/* Runekin · css/scanner.css — Scanner (4g): palco, indicador (overlay), painel da câmera, Despertar.
   Fatia do antigo style.css (linhas 379–426); a ORDEM dos <link> em layout.jsx preserva a cascata.
   Áreas seguras só pelos tokens (--top-shift, --sa-b) de tokens.css, nunca os insets crus. */

/* ============ SCANNER (4g) ============ */
/* coluna da altura da tela: palco + status em cima, Capturar e as fontes embaixo (zona do polegar),
   acima do indicador de home. Sem rolagem: um arrasto sem querer não mexe no visor. */
#screen-scanner { color: #fff; padding-bottom: calc(16px + var(--sa-b)); --on-c1: var(--ink);
  /* orçamento do visor em variáveis: o modo guiado (--scan-extra), a tela baixa (--scan-chrome) e a faixa
     larga (--scan-drop) somam em qualquer combinação — antes a regra do guiado (mais específica) ganhava da
     tela baixa e o visor do SE ficava 24px menor que o que cabe */
  --scan-chrome: 352px; --scan-extra: 0px; --scan-drop: 0px; --scan-floor: 240px;
  --scan-w: min(100%, max(var(--scan-floor), calc(100dvh - var(--scan-chrome) - var(--scan-extra) - var(--scan-drop) - var(--top-shift) - var(--sa-b))));
}
#screen-scanner[data-guided] { --scan-extra: 46px; --scan-floor: 220px; }
:root[data-chamber="sombra"] #screen-scanner { --on-c1: #fff; }
#screen-scanner.is-active { display: flex; flex-direction: column; }
body[data-screen="scanner"] .app { padding-bottom: 0; }   /* o inset de baixo já está no padding da tela */
:root:has(body[data-screen="scanner"]) { overscroll-behavior: none; }
/* faixa c2 cresce com o deslocamento do cromo (Dynamic Island no app): o título e o chip da câmara
   ficam sempre sobre o amarelo. Site/PWA: --top-shift = 0 → 112px como antes. */
.sc-head { left: 0; right: 0; top: 0; height: calc(112px + var(--top-shift)); background: var(--c2); clip-path: var(--e-hdr); }
/* iPad/tela larga: a faixa vai a 100vw (overrides.css) e a queda de 14vw passa de 56px — cresce junto,
   senão vira cunha e a ponta direita (status bar, chip) cai no preto */
@media (min-width: 560px) { .sc-head { height: calc(112px + var(--top-shift) + max(0px, 14vw - 56px)); } }

/* visor quadrado na largura da coluna; em tela larga e baixa (iPad deitado) encolhe pra caber com
   status + ações sem rolar (352px = cromo de cima + status + Capturar + fontes + folga de baixo).
   62px: o topo do visor fica abaixo da ponta esquerda da faixa c2 (com 42 a diagonal entrava no
   visor e engolia o canto do painel, que também é c2) */
.scan-stage {
  position: relative; display: grid; aspect-ratio: 1; margin: 62px auto 0;
  width: var(--scan-w);
  background: var(--stage); background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.3px); background-size: 5px 5px;
}
/* camadas absolutas; só o painel fica no fluxo (texto longo estica o palco em vez de vazar) */
#scanCanvas, .scan-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#scanCanvas { background: var(--stage); }
/* prévia = o próprio <video> (GPU, nítido); o canvas 480 é só análise / foto parada embaixo dele */
.scan-video { z-index: 1; object-fit: cover; background: transparent; visibility: hidden; }
.scan-stage.is-live .scan-video { visibility: visible; }
/* 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; }
/* varredura enquanto procura: só transform no compositor (zero JS por quadro) */
.scan-sweep { position: absolute; left: 13%; right: 13%; top: 13%; bottom: 13%; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .2s; }
.scan-sweep i { position: absolute; inset: 0 6px; background: linear-gradient(transparent calc(50% - 18px), rgba(255,255,255,.18) 50%, transparent calc(50% + 18px)); transform: translateY(-42%); }
.scan-stage.is-searching .scan-sweep { opacity: 1; }
.scan-stage.is-searching .scan-sweep i { animation: scanSweep 1.2s ease-in-out infinite alternate; }
@keyframes scanSweep { from { transform: translateY(-42%); } to { transform: translateY(42%); } }
@media (prefers-reduced-motion: reduce) { .scan-sweep { display: none; } }

/* lanterna: só aparece quando o track suporta (Android e também o WKWebView do iOS). FORA do visor, no
   vão de cima, alinhada à direita: dentro (8px da borda) ela cobria o canto de baixo da janela (13%) */
.scan-torch {
  position: absolute; right: 0; top: -52px; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(17,17,17,.72); color: #fff;
}
.scan-torch svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; }
.scan-torch.on { background: var(--c2); color: var(--ink); }
.scan-torch.on svg { fill: currentColor; }

/* ---- painel da câmera (explicação · negada · sem câmera · falhou · pausada): cobre o palco,
   moldura de cantos na cor da câmara (a mesma linguagem do visor) ---- */
.scan-panel {
  --b: var(--c2); --l: 26px; --w: 5px;
  grid-area: 1 / 1; position: relative; z-index: 6; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 20px; text-align: center;
  background:
    linear-gradient(var(--b), var(--b)) top left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) top right / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom left / var(--w) var(--l) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--l) var(--w) no-repeat,
    linear-gradient(var(--b), var(--b)) bottom right / var(--w) var(--l) no-repeat,
    var(--stage);
}
.scan-panel-ico { width: 40px; height: 40px; color: var(--c2); }
.scan-panel-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: miter; stroke-linecap: square; }
.scan-panel-title { margin: 0; font: 400 26px/1 var(--display); letter-spacing: 1px; text-transform: uppercase; color: #fff; text-wrap: balance; }
.scan-panel p { margin: 0 0 6px; max-width: 300px; font: 400 14px/1.45 var(--body); color: var(--muted-ink); text-wrap: balance; }
.scan-panel-go { min-height: 48px; max-width: 100%; white-space: normal; text-align: center; }
.scan-panel-alt { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 18px; }
.scan-panel-alt button {
  min-height: 44px; padding: 0 4px; color: #fff;
  font: 400 15px var(--display); letter-spacing: 1.5px; text-transform: uppercase;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
#scanPanelDebug { display: block; font: 500 10px var(--mono); color: #888; letter-spacing: 1px; max-width: 300px; word-break: break-word; }

/* modo guiado (introdução): câmera negada/indisponível → "Fazer a demonstração" */
.scan-panel-demo { min-height: 44px; max-width: 100%; margin-top: 2px; padding: 8px 16px; font-size: 17px; white-space: normal; text-align: center; }
/* guiado: o painel ganha um botão — aperta o respiro pra caber no visor sem rolar a tela */
#screen-scanner[data-guided] .scan-panel { gap: 7px; padding: 14px 16px; }
#screen-scanner[data-guided] .scan-panel p { margin-bottom: 2px; }

/* ---- modo guiado (introdução · scanner/ui.js startGuided): faixa "aponte para o sigilo do X" com o
   mini sigilo-alvo; substitui a dica genérica e o visor encolhe o que ela ocupa ---- */
.scan-guide {
  display: flex; align-items: center; gap: 10px; align-self: center; max-width: 100%; margin: 14px auto 0; padding: 5px 12px 5px 5px;
  background: var(--c2); color: var(--ink); clip-path: var(--e-chip);
  font: 400 15px/1.1 var(--display); letter-spacing: 1.2px; text-transform: uppercase; text-align: left; text-wrap: balance;
}
.scan-guide b { font-weight: 400; background: var(--ink); color: #fff; padding: 1px 6px; white-space: nowrap; }
.scan-guide-sigil { flex: none; width: 36px; height: 36px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; padding: 2px; background: #fff; }
.scan-guide-sigil i { display: block; }
#screen-scanner[data-guided] .hint { display: none; }
#screen-scanner[data-guided] .scan-status { margin-top: 8px; min-height: 0; }
:lang(ko) .scan-guide { letter-spacing: .5px; font-weight: 700; word-break: keep-all; }
:lang(ko) .scan-guide b { margin-inline-end: 2px; }   /* a partícula (의) não cola na caixa do nome */
/* chips do guiado/ao vivo na largura do visor, não da coluna (no SE passavam das bordas dele) */
#screen-scanner .scan-guide { max-width: var(--scan-w); }
#screen-scanner .scan-live { max-width: min(calc(100% - 24px), var(--scan-w)); }

/* ---- status: chip ao vivo (fora da imagem: nunca cobre a linha de cima do tabuleiro) ou a dica ---- */
.scan-status { min-height: 46px; margin-top: 14px; display: flex; flex-direction: column; align-items: center; }
.scan-live {
  max-width: calc(100% - 24px); padding: 6px 12px; background: #fff; color: var(--ink); clip-path: var(--e-chip);
  font: 400 14px/1.15 var(--display); letter-spacing: 2px; text-transform: uppercase; text-align: center; text-wrap: balance;
}
.scan-live b { font-weight: 400; background: var(--c1); color: var(--on-c1); padding: 1px 6px; margin-left: 2px; }
/* recado curto (Capturar sem tabuleiro, lanterna…): mesmo lugar, na cor da câmara */
.scan-live.flash { background: var(--c2); color: var(--ink); }
.scan-live:not([hidden]) ~ .hint { display: none; }
#screen-scanner .hint { margin: 0 auto; max-width: 420px; text-wrap: balance; }
#screen-scanner:is([data-scan^="panel"], [data-scan="starting"]) .hint { visibility: hidden; }

/* dica genérica (também no Caderno) */
.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="grimorio"] .hint { color: var(--muted); }

/* ---- ações, ancoradas embaixo ---- */
.scan-actions { margin-top: auto; padding-top: 16px; }
.btn.capture { margin: 0; width: 100%; padding: 20px; font-size: 40px; letter-spacing: 2px; }
.btn.capture svg { display: none; }
/* fontes da imagem: segmentos iguais de 44px (câmera · carta-teste); a ativa em branco. Só aparece com
   as ferramentas de dev (devtools.js) — pro jogador a câmera ao vivo é a única fonte e a fileira some */
.scan-tools { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; margin: 18px 0 0; }
.scan-tools button {
  min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 8px;
  border: 2px solid rgba(255,255,255,.24); color: var(--muted-ink);
  font: 400 15px/1 var(--display); letter-spacing: 2px; text-transform: uppercase;
}
.scan-tools button svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: miter; }
.scan-tools button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-tools button.on { background: #fff; border-color: #fff; color: var(--ink); }
.scan-tools button:active:not([disabled]) { transform: translateY(1px); }
.scan-tools button[disabled] { opacity: .35; }

/* telas baixas (SE, Android pequeno com barras): tudo cabe sem rolar */
@media (max-height: 740px) {
  #screen-scanner { --scan-chrome: 328px; }
  .btn.capture { padding: 14px; font-size: 34px; }
  .scan-tools { margin-top: 12px; }
}

/* tela larga: a faixa cresce (14vw − 56px) e o visor desce/encolhe junto (depois da regra base e
   do bloco de tela baixa — mesma especificidade, a ordem decide) */
@media (min-width: 560px) {
  #screen-scanner { --scan-drop: max(0px, 14vw - 56px); }
  .scan-stage { margin-top: calc(62px + var(--scan-drop)); }
}
/* a sobra de altura não vira um bloco morto entre a dica e Capturar: metade desce o visor, metade fica
   sob a dica (o status cresce; Capturar segue ancorado embaixo) — visor + status no meio do vão. O teto
   antigo de 72px jogava todo o resto (~150px no Pro Max) embaixo da dica */
#screen-scanner.is-active::before { content: ""; flex: 1 1 0; }
#screen-scanner .scan-status { flex-grow: 1; }
/* Capturar desligado (painel da câmera na frente): apagado no chão de tinta, não um slab claro que
   compete com o CTA do painel */
#screen-scanner .btn.capture[disabled] { --face: #26262a; color: #5f5f64; }

/* coreano: Staatliches não tem Hangul (cai na sans do sistema) — sem o espaçamento de caixa-alta
   condensada e sem quebrar palavra no meio */
:lang(ko) #screen-scanner { word-break: keep-all; overflow-wrap: break-word; }
:lang(ko) #screen-scanner :is(.scan-live, .scan-tools button, .btn.capture, .scan-panel-title, .scan-panel-alt button) { letter-spacing: 0; font-weight: 700; }

/* toast global por cima do chão em tinta do scanner: face clara (tinta sobre tinta sumia) */
body[data-screen="scanner"] .toast { background: #fff; color: var(--ink); }

.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; } }