/* =====================================================================
   TECLAS DE ATALHO (22/10) — src/ui/atalhos.js
   Alt/Z: monstros apagados e o nome de cada item no chão. Ctrl/X: recolhe.
   Celular: a mochila no canto da arena. Nada aqui muda o tamanho ou a
   posição da arena: tudo é transparência ou caixa por cima dela.
   ===================================================================== */

/* --- o nome do item no chão (só aparece segurando Alt/Z ou a mochila) --- */
.chao-drop-nome{display:none}
html.col-revelar-chao .chao-drop-nome{
  display:block;position:absolute;left:0;top:calc(var(--chao-lado) * -.82 - 4px);z-index:10;
  transform:translate(calc(-50% + var(--nome-dx,0px)),calc(-100% + var(--nome-dy,0px)));max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:1px 6px;border-radius:5px;pointer-events:none;
  background:rgba(6,6,10,.82);border:1px solid color-mix(in srgb,var(--chao-cor) 55%,transparent);
  color:var(--chao-cor);font:800 calc(10.5px * var(--text-scale,1))/1.35 Arial,sans-serif;letter-spacing:.2px;
  text-shadow:0 1px 1px #000;box-shadow:0 2px 6px rgba(0,0,0,.5)}
html.col-revelar-chao .chao-drop[data-saindo] .chao-drop-nome{display:none}
/* Os corpos (dois canvas) e o ambiente ficam apagados: o chão aparece por baixo deles. */
html.col-revelar-chao #swarmCanvasBack,
html.col-revelar-chao #swarmCanvasFront{opacity:.18}
html.col-revelar-chao .swarm-layer-ambiente{opacity:.25}
/* O feixe de luz fica fraco: ele passaria por cima do nome de outro item. */
html.col-revelar-chao :is(.chao-drop-raio,.chao-drop-nucleo,.chao-drop-anel,.chao-drop-clarao,.chao-drop-p){opacity:.2!important;animation:none!important}
html.col-revelar-chao .chao-drop-icone{filter:drop-shadow(0 0 6px var(--chao-cor)) drop-shadow(0 0 2px #fff)}
/* Recolher tudo: a mesma subida do clique em um item. */
.chao-drop[data-saindo="recolher"] .chao-drop-icone{animation:chao-drop-pega .26s ease-in forwards}

/* --- aviso curto no meio da arena (recolhidos / dica da primeira vez) --- */
.atalhos-aviso{
  position:absolute;left:50%;bottom:86px;z-index:120;transform:translateX(-50%);
  max-width:min(440px,calc(100% - 96px));padding:7px 14px;border-radius:999px;pointer-events:none;
  background:rgba(14,12,18,.9);border:1px solid rgba(215,169,68,.6);color:#f6ead0;text-align:center;
  font:700 calc(12px * var(--text-scale,1))/1.35 Arial,sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.5);
  animation:atalhos-entra .18s ease-out both;transition:opacity .25s linear}
.atalhos-aviso[data-tipo="dica"]{border-radius:12px}
.atalhos-aviso.some{opacity:0}
.atalhos-aviso[hidden]{display:none}
@keyframes atalhos-entra{from{opacity:0;transform:translate(-50%,6px)}to{opacity:1;transform:translateX(-50%)}}

/* --- a mochila do celular: só sem mouse (hover:none, dedo) e só com item no chão --- */
.chao-mochila{display:none}
@media (hover:none) and (pointer:coarse){
  .chao-mochila:not([hidden]){
    display:flex;align-items:center;gap:3px;position:absolute;z-index:55;
    right:calc(8px + env(safe-area-inset-right,0px));bottom:72px;
    min-width:44px;height:44px;padding:0 9px 0 5px;border-radius:22px;
    background:rgba(20,17,24,.88);border:1px solid rgba(215,169,68,.7);color:#f3cf7a;
    box-shadow:0 4px 12px rgba(0,0,0,.5);touch-action:none;-webkit-user-select:none;user-select:none;
    -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;cursor:var(--cur-mao,pointer)}
  .chao-mochila img{width:30px;height:30px;object-fit:contain;pointer-events:none}
  .chao-mochila-n{font:900 calc(13px * var(--text-scale,1))/1 Arial,sans-serif;font-variant-numeric:tabular-nums}
  .chao-mochila.segurando{background:rgba(48,38,20,.95);box-shadow:0 0 0 2px rgba(215,169,68,.45),0 4px 12px rgba(0,0,0,.5)}
}

/* --- a letra do atalho no botão do menu, ao passar o mouse (só PC) --- */
@media (hover:hover) and (pointer:fine){
  .nav-button[data-atalho]{position:relative}
  .nav-button[data-atalho]::after{
    content:attr(data-atalho);position:absolute;right:3px;top:3px;z-index:3;
    min-width:15px;height:15px;padding:0 3px;border-radius:4px;box-sizing:border-box;
    background:#1d1822;border:1px solid rgba(215,169,68,.65);border-bottom-width:2px;color:#f3cf7a;
    font:800 10px/12px Consolas,monospace;text-align:center;opacity:0;transition:opacity .12s linear;pointer-events:none}
  .nav-button[data-atalho]:hover::after,.nav-button[data-atalho]:focus-visible::after{opacity:1}
}

/* --- o quadro de atalhos (H) usa a moldura das janelas rápidas --- */
.atalhos-janela{width:min(520px,calc(100vw - 24px))}
.atalhos-lista{display:grid;gap:5px}
.atalhos-linha{display:grid;grid-template-columns:minmax(78px,auto) 1fr;gap:10px;align-items:center;
  font:calc(13px * var(--text-scale,1))/1.35 Arial,sans-serif;color:#d9dde7}
.atalhos-teclas{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.atalhos-janela kbd{display:inline-block;min-width:24px;padding:2px 6px;border-radius:5px;box-sizing:border-box;text-align:center;
  background:linear-gradient(#2c2533,#1d1822);border:1px solid #4a3f54;border-bottom-width:3px;color:#f3e7cf;
  font:800 calc(11px * var(--text-scale,1))/1.3 Consolas,monospace;white-space:nowrap}
.atalhos-ou{font-style:normal;font-size:calc(10px * var(--text-scale,1));color:#8e97aa}
.atalhos-nota{margin:14px 0 0;font:calc(12px * var(--text-scale,1))/1.4 Arial,sans-serif;color:#9aa3b5}
.atalhos-ver{flex:none;padding:7px 12px;border-radius:8px;border:1px solid rgba(215,169,68,.6);background:#2a2216;color:#f3cf7a;
  font:800 calc(11px * var(--text-scale,1))/1.2 Arial,sans-serif;letter-spacing:.6px;cursor:var(--cur-mao,pointer)}