/* Atalhos do topo na mesma paleta azul, ouro e ciano da HUD. */
.atalhos-topo {
  gap: 4px;
}
.atalhos-topo .icone {
  --chanfro: 8px;
  width: 44px;
  height: 44px;
  border: 1px solid #d8b264;
  background: linear-gradient(150deg, #123d4a, #071c28 56%, #05141e);
  box-shadow: inset 0 0 0 2px #17414d, inset 0 -4px 8px #0008;
  color: #ffd881;
  transition: color .15s, background .15s, box-shadow .15s, transform .15s;
}
.atalhos-topo .icone::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px solid #376e7b;
  background: radial-gradient(circle at 50% 44%, #2e829044, transparent 68%);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
  pointer-events: none;
}
.atalhos-topo .icone .ic {
  position: relative;
  width: 26px;
  height: 26px;
  z-index: 1;
  filter: drop-shadow(0 1px 0 #58390d) drop-shadow(0 0 4px #e4b65488);
}
.atalhos-topo .icone:hover,
.atalhos-topo .icone:focus-visible {
  color: #ffedb0;
  background: linear-gradient(150deg, #1c5964, #0a3441 58%, #08222e);
  box-shadow: inset 0 0 0 2px #48dce7, 0 0 10px #45dce37a;
  transform: translateY(-1px);
}
.atalhos-topo .icone:focus-visible { outline: 2px solid #58e7f0; outline-offset: 2px; }
.atalhos-topo .icone:active { transform: translateY(1px); }
.atalhos-topo .icone.on {
  color: #fff0ad;
  background: linear-gradient(150deg, #59602d, #1d3020 70%);
  box-shadow: inset 0 0 0 2px #e7bd65, 0 0 9px #e4af5288;
}
.atalhos-topo .icone.apagado { opacity: .6; }
.atalhos-topo .icone kbd {
  z-index: 2;
  right: 3px;
  bottom: 2px;
  padding: 1px 3px;
  border: 1px solid #b9914d;
  background: #071923;
  color: #ffe5a0;
  font: bold 9px/1 Georgia, serif;
  opacity: 1;
}

@media (max-width: 1100px) {
  .atalhos-topo { max-width: 206px; }
}
@media (max-width: 620px) {
  .topbar .atalhos-topo { width: min(240px, 100%); max-width: none; justify-self: center; }
  .atalhos-topo .icone { width: 38px; height: 38px; }
  .atalhos-topo .icone .ic { width: 23px; height: 23px; }
}