/* Rota 3D: cena, entrada, HUD e joystick. A base compartilhada está em base.css.
   Só tokens; breakpoints 900px e 620px. */
html,body{height:100%;overflow:hidden}

.cena,.cena canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.fade{position:fixed;inset:0;background:var(--ink-950);opacity:0;pointer-events:none;transition:opacity .2s}
.fade.ativo{opacity:1}

/* Entrada (S00/S01) */
.entrada{position:fixed;inset:0;display:grid;place-items:center;padding:16px;overflow:auto;background:linear-gradient(180deg,var(--ink-a55),var(--ink-a96));z-index:5;transition:opacity .5s var(--ease-out)}
.entrada.saindo{opacity:0;pointer-events:none}
.entrada-cartao{width:min(560px,100%);background:var(--surface-dark);background-image:var(--texture-dots);background-size:var(--texture-size);border:1px solid var(--border-on-dark);border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-pop)}
.entrada-logo{display:block;margin-bottom:20px;height:auto}
.entrada-lead{font-size:var(--text-lead);color:var(--text-on-dark-muted)}
.entrada-opcoes{display:flex;flex-wrap:wrap;gap:12px 24px;margin:18px 0}
.entrada .ajuda{margin:14px 0 0}
.carga progress{width:100%;height:6px;appearance:none;border:0;border-radius:var(--radius-pill);background:var(--white-a15);overflow:hidden}
.carga progress::-webkit-progress-bar{background:var(--white-a15)}
.carga progress::-webkit-progress-value{background:var(--gradient-info-action)}
.carga progress::-moz-progress-bar{background:var(--gradient-info-action)}
.carga p,.carga-demora{font-size:var(--text-small);color:var(--text-on-dark-muted);margin:8px 0 0}
.erro{color:var(--gold-300);font-weight:600}
.sem-js{position:fixed;inset:auto 16px 16px;padding:16px;background:var(--ink-900);border-radius:var(--radius-md)}

/* HUD */
.hud{position:fixed;inset:0;pointer-events:none;z-index:2}
.hud>*{pointer-events:auto}
.missao{position:absolute;top:16px;left:16px;padding:14px 16px;min-width:220px;background:var(--ink-a85);border:1px solid var(--white-a15);border-radius:var(--radius-lg);backdrop-filter:blur(6px)}
.missao .kicker{margin-bottom:6px}
.missao-linha{display:flex;justify-content:space-between;gap:16px;margin:2px 0;font-size:var(--text-small);color:var(--text-on-dark-muted)}
.missao-linha strong{color:var(--white);font-weight:600}
.pontos{display:inline-flex;align-items:center;gap:4px;color:var(--white);font-variant-numeric:tabular-nums}
.pontos i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--blue-300)}
.pontos i.cheio{background:var(--arrival);border-color:var(--arrival)}
.hud-acoes{position:absolute;top:16px;right:16px;display:flex;gap:8px}
.sala-atual{position:absolute;top:22px;left:50%;translate:-50% 0;margin:0;font:600 var(--text-small) var(--font-display);letter-spacing:var(--tracking-kicker);text-transform:uppercase;color:var(--white);background:var(--ink-a85);padding:6px 14px;border-radius:var(--radius-pill);pointer-events:none;opacity:0}
.sala-atual.entra{animation:sala 3.2s var(--ease-out) forwards}
@keyframes sala{0%{opacity:0;translate:-50% -6px}12%{opacity:1;translate:-50% 0}75%{opacity:1}100%{opacity:0}}
.dica{position:absolute;bottom:24px;left:50%;translate:-50% 0;max-width:min(520px,calc(100% - 32px));display:flex;align-items:center;gap:16px;padding:12px 18px;background:var(--ink-a90);border:1px solid var(--white-a24);border-radius:var(--radius-pill);font-size:var(--text-small)}
.dica p{margin:0}
.dica.reforco{border-color:var(--arrival);box-shadow:0 0 0 4px color-mix(in srgb,var(--arrival) 30%,transparent)}
.rotulo{position:absolute;left:0;top:0;transform:translate(-50%,-100%);display:grid;gap:2px;padding:8px 14px;background:var(--ink-a90);color:var(--white);border:1px solid var(--blue-300);border-radius:var(--radius-md);font:var(--text-small) var(--font-body);cursor:pointer;white-space:nowrap}
.rotulo strong{font-family:var(--font-display);font-size:var(--text-body)}
.rotulo span{font-size:var(--text-label);color:var(--blue-300)}
.cta-fixo{position:absolute;right:16px;bottom:24px;background:var(--arrival);border-color:var(--arrival);color:var(--ink-950)}
.cta-fixo:hover{background:var(--gold-300);border-color:var(--gold-300)}
.joystick{position:fixed;left:0;top:0;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;border:2px solid var(--white-a33);background:var(--ink-a55);pointer-events:none;z-index:3}
.joystick span{position:absolute;inset:32px;border-radius:50%;background:var(--white-a92)}

/* Menu */
.menu h3{margin:22px 0 8px;color:var(--blue-300);text-transform:uppercase;letter-spacing:var(--tracking-kicker);font-size:var(--text-label)}
.efeitos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;margin:8px 0 12px}
.efeito{padding:6px 0;border-bottom:1px solid var(--white-a07)}
.controles{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:var(--text-small);margin:0}
.controles dt{font-weight:600}
.controles dd{margin:0;color:var(--text-on-dark-muted)}

@media (max-width:900px){
  .efeitos{grid-template-columns:1fr}
  #versao-leve{display:none}
}
@media (max-width:620px){
  .entrada-cartao{padding:22px}
  .missao{top:12px;left:12px;min-width:0;padding:10px 12px}
  .hud-acoes{top:12px;right:12px;flex-direction:column;align-items:flex-end}
  .sala-atual{top:auto;bottom:150px}
  .cta-fixo{right:12px;bottom:auto;top:116px;min-height:40px;padding:0 14px}
  .dica{bottom:16px;left:16px;right:16px;translate:none;max-width:none;justify-content:space-between;border-radius:var(--radius-lg)}
  .aviso{bottom:auto;top:176px}
}
@media (prefers-reduced-motion:reduce){
  .sala-atual.entra{opacity:1}
}