/* Layout: o telão 8:1 fica preso no topo e, embaixo dele, a bancada de quem avalia: comandos, o que foi dito,
   o que a regra escolheu e o acervo. No modo palco só sobra o telão.
   Nova ID 2026 da GZero: palco preto, ABC Whyte, canto reto, sem brilho. Visual único de propósito (não segue o tema). */
@font-face { font-family: 'ABC Whyte Inktrap'; src: url('./fonts/ABCWhyteInktrapVariable-Trial.woff2') format('woff2'); font-weight: 100 900; }
@font-face { font-family: 'ABC Whyte'; src: url('./fonts/ABCWhyteVariable-Trial.woff2') format('woff2'); font-weight: 100 900; }
@font-face { font-family: 'ABC Whyte Semi-Mono'; src: url('./fonts/ABCWhyteSemi-Mono-Regular-Trial.woff2') format('woff2'); font-weight: 400; }

:root {
  color-scheme: dark;
  --preto: #000000;      /* o telão */
  --chao: #0d0a0f;       /* a bancada */
  --sup: #17131a;        /* cartões e campos */
  --linha: #352c3b;
  --sand: #f7f5eb;
  --apagado: #a99fb1;
  --heart: #ff32bb;      /* Heartstorm, a assinatura */
  --jester: #edff5c;
  --drop: #0bfdca;
  --tinta: #230c21;
  --titulo: 'ABC Whyte Inktrap', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --texto: 'ABC Whyte', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'ABC Whyte Semi-Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --flutua: cubic-bezier(0.22, 0.61, 0.36, 1);
}
* { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--chao); color: var(--sand); font: 400 15px/1.5 var(--texto); -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--jester); outline-offset: 2px; }
.borda { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.miolo { max-width: 1320px; margin: 0 auto; }
.olho { font: 400 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin: 0; }

/* ── cabeçalho ── */
.cab { padding-block: 22px 14px; }
.cab h1 { font: 500 clamp(30px, 4.6vw, 54px)/1 var(--titulo); letter-spacing: -0.01em; margin: 6px 0 10px; text-wrap: balance; }
.cab p.fio { max-width: 68ch; margin: 0; color: var(--apagado); text-wrap: pretty; }
.cab p.fio b { color: var(--sand); font-weight: 500; }

/* ── o telão ── */
#moldura { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: var(--chao); padding-block: 10px; border-bottom: 1px solid var(--linha); }
body::before { content: ''; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--chao); }
#janela { position: relative; overflow: hidden; background: var(--preto); outline: 1px solid var(--linha); }
.perto #janela { overflow-x: auto; overflow-y: hidden; }
#palco { position: absolute; left: 0; top: 0; width: 9408px; /* o palco.js troca pela largura do formato */ height: 1176px; transform-origin: 0 0; background: var(--preto); overflow: hidden; user-select: none; -webkit-user-select: none; }

#pecas { position: absolute; inset: 0; isolation: isolate; }
#rotulos { position: absolute; inset: 0; pointer-events: none; }
/* cada peça: a casca cuida do lugar, a boia do balanço, a arte do tamanho e do giro */
.peca { position: absolute; display: grid; place-items: center; pointer-events: none; will-change: transform, opacity; }
.boia { display: grid; place-items: center; animation: boia var(--dur, 9s) ease-in-out var(--atraso, 0s) infinite alternate; }
@keyframes boia { from { transform: translateY(calc(var(--sobe, 14px) * -1)) rotate(calc(var(--balanco, 1deg) * -1)); } to { transform: translateY(var(--sobe, 14px)) rotate(var(--balanco, 1deg)); } }
.arte { display: block; transform: rotate(var(--giro, 0deg)) scale(var(--cresce, 1)); transition: transform 0.6s var(--flutua); }
img.arte { max-width: none; }
.tese { font: 500 var(--corpo, 240px)/0.9 var(--titulo); letter-spacing: -0.02em; white-space: nowrap; color: var(--cor, var(--sand)); }
.rotulo { position: absolute; translate: -50% 0; display: flex; align-items: center; gap: 14px; font: 400 36px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--sand); }
.rotulo::before { content: ''; width: 20px; height: 20px; background: var(--heart); flex: none; }
.rotulo.pisca { animation: pisca 0.7s var(--flutua); }
@keyframes pisca { from { color: var(--heart); scale: 1.25; } to { color: var(--sand); scale: 1; } }

/* a fala, correndo embaixo */
#legenda { position: absolute; left: 50%; translate: -50% 0; bottom: 30px; width: min(3400px, calc(100% - 2 * (var(--margem, 150px) + 200px))); height: 56px; overflow: hidden; display: flex; justify-content: flex-end; align-items: baseline; gap: 16px; font: 400 42px/56px var(--texto); color: rgba(247, 245, 235, 0.5); white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%); mask-image: linear-gradient(90deg, transparent 0, #000 22%); }
#legenda span { flex: none; }
#legenda .achou { color: var(--heart); }
#legenda .vindo { color: rgba(247, 245, 235, 0.28); }
.sem-legenda #legenda { display: none; }

#espera { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font: 400 44px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 245, 235, 0.55); transition: opacity 0.5s linear; }
.tem-pecas #espera { opacity: 0; transition: none; }
#carimbo { position: absolute; left: 50%; top: 44px; translate: -50% 0; margin: 0; padding: 14px 26px 12px; background: var(--jester); color: var(--preto); font: 400 34px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity 0.4s linear; }
#carimbo.visto { opacity: 1; }
#marca { position: absolute; right: var(--margem, 150px); bottom: 44px; width: 150px; opacity: 0.9; }
#marca img { display: block; width: 100%; height: auto; }
#ouvindo { position: absolute; left: var(--margem, 150px); bottom: 50px; display: flex; align-items: center; gap: 14px; font: 400 26px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--apagado); opacity: 0; transition: opacity 0.3s linear; }
#ouvindo::before { content: ''; width: 20px; height: 20px; border-radius: 50%; background: var(--heart); animation: pulsa 1.4s ease-in-out infinite alternate; }
@keyframes pulsa { from { opacity: 0.35; } to { opacity: 1; } }
.escutando #ouvindo { opacity: 1; }

/* ── comandos ── */
.comandos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 14px 4px; }
.bt { background: var(--sup); border: 1px solid var(--linha); border-radius: 0; padding: 8px 14px; cursor: pointer; white-space: nowrap; }
.bt:hover { border-color: var(--heart); }
.bt[aria-pressed='true'], .bt.cheio { background: var(--heart); border-color: var(--heart); color: var(--preto); font-weight: 500; }
.bt:disabled { opacity: 0.4; cursor: default; }
.comandos .folga { flex: 1 1 0; min-width: 0; }
#aviso { flex-basis: 100%; min-height: 1.5em; margin: 0; font-size: 13.5px; color: var(--apagado); }
#aviso.erro { color: var(--jester); }
.digitar { display: flex; flex-wrap: wrap; gap: 8px; padding-block: 4px 18px; }
.digitar label { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.digitar label span, .ensaio label span { font: 400 11.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
#digitado, #roteiro, .tela select, .tela input { width: 100%; min-width: 0; background: var(--sup); border: 1px solid var(--linha); border-radius: 0; padding: 9px 12px; }
#digitado:focus, #roteiro:focus, .tela select:focus, .tela input:focus { border-color: var(--heart); outline: none; }
.tela { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; padding-block: 4px 12px; max-width: 760px; }
.tela label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tela label span { font: 400 11.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); }
.tela p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--apagado); }

/* ── bancada: três colunas ── */
.bancada { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; padding-bottom: 22px; }
.painel { min-width: 0; background: var(--sup); border: 1px solid var(--linha); padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.painel h2 { font: 400 12px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--apagado); margin: 0; }
.painel .vazio { color: var(--apagado); margin: 0; font-size: 14px; }
#dito { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(247, 245, 235, 0.62); max-height: 14.5em; overflow: auto; overflow-wrap: anywhere; }
#dito .achou { color: var(--heart); font-weight: 500; }
#decisoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-height: 22em; overflow: auto; }
#decisoes li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--linha); }
#decisoes li:first-child { border-top: 0; }
#decisoes .mini { width: 44px; height: 44px; background: var(--preto); display: grid; place-items: center; font: 500 18px/1 var(--titulo); color: var(--heart); }
#decisoes .mini img { max-width: 40px; max-height: 40px; display: block; }
#decisoes b { font-weight: 500; }
#decisoes .seta { color: var(--heart); }
#decisoes small { display: block; font: 400 11.5px/1.35 var(--mono); color: var(--apagado); font-variant-numeric: tabular-nums; }
#foco { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#foco .topo { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; }
#foco .topo .quadro { width: 96px; height: 96px; background: var(--preto); display: grid; place-items: center; }
#foco .topo img { max-width: 88px; max-height: 88px; display: block; }
#foco h3 { font: 500 19px/1.15 var(--titulo); margin: 0 0 4px; text-wrap: balance; }
#foco .origem { font: 400 11.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--drop); }
#foco .conta { margin: 0; font-size: 13.5px; color: var(--apagado); }
#foco .conta b { color: var(--sand); font-weight: 500; }
#foco dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
#foco dt { font: 400 11px/1.9 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--apagado); white-space: nowrap; }
#foco dd { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; }
#foco dd span { border: 1px solid var(--linha); padding: 4px 9px; line-height: 1.3; }
#foco dd span.foi { background: var(--heart); border-color: var(--heart); color: var(--preto); font-weight: 500; }

/* ── ensaio ── */
.ensaio { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: end; padding-bottom: 22px; }
.ensaio label { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#roteiro { min-height: 7.5em; resize: vertical; line-height: 1.5; }
.ensaio .lado { display: flex; flex-direction: column; gap: 8px; }
.ensaio p { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--apagado); max-width: 82ch; }

/* ── acervo ── */
.acervo h2 { font: 500 24px/1.1 var(--titulo); margin: 0 0 4px; }
.acervo p { margin: 0 0 12px; color: var(--apagado); max-width: 74ch; font-size: 14px; }
#grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; }
#grade button { aspect-ratio: 1; min-width: 0; padding: 6px; background: var(--preto); border: 1px solid var(--linha); border-radius: 0; cursor: pointer; display: grid; place-items: center; }
#grade button:hover { border-color: var(--heart); }
#grade button.usada { border-color: var(--drop); }
#grade img { max-width: 100%; max-height: 100%; display: block; min-height: 0; object-fit: contain; }
.rodape { padding-block: 22px 36px; color: var(--apagado); font-size: 13px; max-width: 86ch; }
.rodape p { margin: 0 0 6px; }

/* ── modo palco: só o telão ── */
.palco body { background: var(--preto); overflow: hidden; }
.palco .cab, .palco .comandos, .palco .tela, .palco .digitar, .palco .bancada, .palco .ensaio, .palco .acervo, .palco .rodape { display: none; }
.palco #moldura { position: fixed; inset: 0; padding: 0; border: 0; background: var(--preto); display: grid; align-items: center; }
.palco #moldura .miolo { max-width: none; width: 100%; padding: 0; }
.palco #janela { outline: 0; cursor: none; }

@media (max-width: 640px) {
  .ensaio { grid-template-columns: minmax(0, 1fr); }
  .ensaio .lado { flex-direction: row; flex-wrap: wrap; }
  .tela { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tela label:first-child { grid-column: 1 / -1; }
  #moldura { position: static; }
}
@media (prefers-reduced-motion: reduce) {
  .boia, #ouvindo::before, .rotulo.pisca { animation: none; }
  .arte { transition: none; }
}