/* Runekin · css/scanner.css — Scanner (4g): palco, indicador (overlay), Despertar.
   Fatia do antigo style.css (linhas 379–426); a ORDEM dos <link> em layout.jsx preserva a cascata. */

/* ============ SCANNER (4g) ============ */
#screen-scanner { color: #fff; }
#screen-scanner.is-active { display: flex; flex-direction: column; }
.sc-head { left: 0; right: 0; top: 0; height: 112px; background: var(--c2); clip-path: var(--e-hdr); }
.scan-stage {
  position: relative; width: 100%; aspect-ratio: 1; margin: 42px auto 0;
  background: var(--stage); background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); background-size: 5px 5px;
}
#scanCanvas { display: block; width: 100%; height: 100%; background: var(--stage); }
/* indicador (cantos, grade, contornos das peças) num canvas próprio sobre o vídeo */
.scan-overlay { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.scan-live {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4;
  background: #fff; color: var(--ink); padding: 4px 12px; clip-path: var(--e-chip);
  font: 400 14px var(--display); letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
.scan-live b { color: var(--c1); font-weight: 400; }
.scan-error {
  position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; gap: 18px;
  align-items: center; justify-content: center; background: rgba(17,17,17,.94); padding: 32px; text-align: center;
}
.scan-error p { margin: 0; font: 400 14px/1.5 var(--body); color: var(--muted-ink); max-width: 280px; }
.hint { text-align: center; font: 400 13px/1.5 var(--body); color: var(--muted-ink); margin: 18px auto 0; max-width: 420px; }
.hint b { color: #fff; font-weight: 500; }
body[data-screen="altar"] .hint, body[data-screen="grimorio"] .hint { color: var(--muted); }
body[data-screen="altar"] .hint b { color: var(--ink); }
.btn.capture { margin: 22px 0 0; width: 100%; padding: 20px; font-size: 40px; letter-spacing: 2px; }
.btn.capture svg { display: none; }
.scan-tools { display: flex; justify-content: space-between; margin: 26px 0 0; font: 400 14px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted-ink); }
.scan-tools button { padding: 6px 4px; color: inherit; letter-spacing: inherit; font: inherit; text-transform: inherit; }
.scan-tools button[disabled] { opacity: .35; }
.scan-tools button.on { color: var(--c2); }
.ar-ground { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.ar-monster { position: absolute; pointer-events: none; z-index: 3; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.6)); }
.ar-monster svg, .ar-monster canvas { width: 100% !important; height: 100% !important; }
.ar-label { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; background: #fff; color: var(--ink); padding: 8px 14px; max-width: 94%; }
.ar-label b { font: 400 18px var(--display); text-transform: uppercase; }
.ar-label span { font: 400 11px var(--display); letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.scan-reveal { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: #fff; animation: revealFade .5s ease-out forwards; }
@keyframes revealFade { 0% { opacity: .9; } 100% { opacity: 0; } }