@font-face { font-family: 'Pixelify Sans'; src: url('./vendor/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root {
  --fundo: #1a1422; --painel: #231b2e; --painel2: #2e2440; --borda: #5a4870; --texto: #f4ecdc; --suave: #cbbfd8;
  --ambar: #ffc15a; --ambar2: #ff9a3a; --vermelho: #ff4d4d; --centro: #fff1c4; --borda-enq: #ffb347;
  --fonte: 'Pixelify Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--texto); font-family: var(--fonte); -webkit-tap-highlight-color: transparent; }
canvas#jogo { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.vinheta { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 55%, rgba(12, 6, 20, .55) 100%); }
button { font-family: var(--fonte); }
kbd { display: inline-block; min-width: 1.6em; padding: 0 .35em; margin: 0 .1em; border: 2px solid #f4ecdc; border-bottom-width: 4px; border-radius: 4px; background: #2e2440; color: #fff; font-family: var(--fonte); font-size: .95em; line-height: 1.3; text-align: center; }
.gesto { display: inline-block; padding: 0 .4em; border: 2px dashed #f4ecdc; border-radius: 12px; }

/* ---------- visor ---------- */
#visor { position: fixed; inset: 0; pointer-events: none; --cor: var(--centro); }
#visor[data-enq="borda"] { --cor: var(--borda-enq); }
#visor[data-enq="fora"], #visor[data-enq="longe"] { --cor: var(--vermelho); }
#visor[data-enq="fora"] .canto, #visor[data-enq="longe"] .canto { animation: piscaCanto .25s steps(2) infinite; }
@keyframes piscaCanto { 50% { opacity: .25; } }
.canto { position: absolute; width: 38px; height: 38px; border: 0 solid var(--cor); filter: drop-shadow(0 0 2px rgba(0,0,0,.8)); }
.c1 { top: 12px; left: 12px; border-top-width: 4px; border-left-width: 4px; }
.c2 { top: 12px; right: 12px; border-top-width: 4px; border-right-width: 4px; }
.c3 { bottom: 12px; left: 12px; border-bottom-width: 4px; border-left-width: 4px; }
.c4 { bottom: 12px; right: 12px; border-bottom-width: 4px; border-right-width: 4px; }
.topo { position: absolute; top: 18px; left: 60px; right: 18px; display: flex; align-items: center; gap: 12px; text-shadow: 0 2px 0 #000; }
.rec { font-size: 18px; display: flex; align-items: center; gap: 6px; background: rgba(14, 10, 20, .55); padding: 2px 8px; border-radius: 4px; }
.rec .ponto { width: 10px; height: 10px; border-radius: 50%; background: var(--vermelho); animation: rec 1s steps(2) infinite; }
@keyframes rec { 50% { opacity: .2; } }
#tc { font-variant-numeric: tabular-nums; color: var(--suave); }
#take-rotulo { flex: 1; text-align: center; font-size: 18px; letter-spacing: 1px; }
.botoes-topo { display: flex; gap: 8px; pointer-events: auto; }
.bt-icone { width: 44px; height: 44px; border: 2px solid var(--borda); border-radius: 8px; background: rgba(35, 27, 46, .85); color: var(--texto); cursor: pointer; display: grid; place-items: center; padding: 0; }
.bt-icone svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; }
.bt-icone.mudo .onda { display: none; }
.bt-icone:focus-visible, .bt:focus-visible, .bt-ctl:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
#fita { position: absolute; top: 70px; left: 60px; right: 60px; height: 10px; background: #120d18; border: 2px solid #3b2f4a; border-radius: 3px; overflow: hidden; }
#fita::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255,255,255,.08) 10px 14px); }
#fita-fill { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #ff9a3a, #ffd25a); }
#fita-marcas i { position: absolute; top: -2px; width: 3px; height: 14px; background: #fff; box-shadow: 0 0 0 1px #000; }
.placar { position: absolute; top: 90px; right: 22px; font-size: 22px; text-shadow: 0 2px 0 #000; display: flex; align-items: center; gap: 8px; }
.p-ic { color: var(--ambar); }
.rolos-box { display: inline-flex; align-items: center; gap: 5px; font-size: 18px; background: rgba(14,10,20,.55); padding: 1px 8px; border-radius: 4px; }
.rolos-box.pop { animation: pop .3s ease-out; }
.rolo-ic { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #f4c24a 0 2px, #d9dde6 2px 5px, #3a3a48 5px 6px, #d9dde6 6px); box-shadow: 0 0 0 1px #000; }
@keyframes pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.base { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: flex-end; gap: 16px; }
#monitor-gabi { position: relative; width: 112px; background: #0f0c14; border: 3px solid #3b3350; border-radius: 6px; padding: 4px 4px 2px; box-shadow: 0 4px 0 rgba(0,0,0,.5); }
#retrato { display: block; width: 96px; height: 84px; image-rendering: pixelated; background: linear-gradient(#34506e, #1d2c40); margin: 0 auto; }
.mon-rotulo { font-size: 10px; text-align: center; color: var(--suave); letter-spacing: 1px; }
#fala { position: absolute; left: 148px; bottom: 82px; white-space: nowrap; background: #fff8e6; color: #1a1422; font-size: 22px; font-weight: 700; padding: 4px 12px; border-radius: 10px; border: 3px solid #1a1422; }
#fala::before { content: ''; position: absolute; left: -12px; bottom: 10px; border: 8px solid transparent; border-right-color: #1a1422; }
#fala.pop, #dica.pop { animation: pop .25s ease-out; }
.medidores { position: absolute; top: 90px; left: 50%; transform: translateX(-50%); width: min(340px, 44vw); display: flex; flex-direction: column; gap: 4px; }
#medidor { position: relative; width: 100%; height: 34px; background: rgba(14, 10, 20, .7); border: 3px solid var(--cor); border-radius: 6px; }
.med-linha { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zona-centro { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 24%; transform: translateX(-50%); border: 2px dashed rgba(255, 241, 196, .8); border-radius: 3px; }
#med-duble { position: absolute; top: 3px; width: 14px; height: 22px; margin-left: -8px; background: linear-gradient(#3a2518 0 30%, #c0392b 30% 75%, #2d3552 75%); border: 2px solid #000; border-radius: 4px 4px 2px 2px; transition: left .08s linear; }
#medidor.longe #med-duble { transform: scale(.6); opacity: .7; }
#med-txt { font-size: 17px; color: var(--cor); text-shadow: 0 2px 0 #000; white-space: nowrap; }
#corta-box { display: flex; align-items: center; gap: 8px; font-size: 14px; text-shadow: 0 2px 0 #000; }
.claq-ic { width: 18px; height: 14px; background: linear-gradient(#f4ecdc 0 3px, #26242b 3px); border: 2px solid #000; }
.corta-trilho { display: block; width: min(110px, 22vw); height: 10px; background: #120d18; border: 2px solid #3b2f4a; border-radius: 3px; overflow: hidden; }
#corta-fill { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: repeating-linear-gradient(45deg, #ff4d4d 0 6px, #ffb347 6px 12px); }
#corta-box.perigo { color: var(--vermelho); animation: piscaCanto .3s steps(2) infinite; }

/* dica do ensaio e toasts */
#dica { position: fixed; left: 50%; top: 160px; transform: translateX(-50%); max-width: min(560px, 92vw); background: rgba(255, 248, 230, .96); color: #1a1422; font-size: 20px; line-height: 1.35; padding: 10px 16px; border-radius: 10px; border: 3px solid #1a1422; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.35); pointer-events: none; z-index: 5; }
#dica kbd { color: #fff; }
.seta-dica { font-size: 22px; font-weight: 700; color: #b8321f; animation: rec .6s steps(2) infinite; }
#dica .gesto { border-color: #1a1422; }
#toast { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.9); font-size: 24px; font-weight: 700; color: #fff8e6; text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 180, 60, .7); opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 4; white-space: nowrap; }
#toast.vis { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#toast.ruim { color: #ffd0d0; text-shadow: 0 3px 0 #000, 0 0 12px rgba(255, 60, 60, .8); }

/* controles na tela */
#controles-tela { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 10px 10px; pointer-events: none; z-index: 3; }
.ctl-dir { display: flex; gap: 8px; }
.bt-ctl { pointer-events: auto; width: 76px; height: 64px; border: 3px solid rgba(244, 236, 220, .6); border-radius: 12px; background: rgba(26, 20, 34, .55); color: #f4ecdc; font-size: 26px; cursor: pointer; touch-action: none; }
.bt-ctl.pulo { width: 118px; font-size: 18px; }
.bt-ctl.ativo { background: rgba(255, 193, 90, .7); color: #1a1422; }
body.com-controles .base { bottom: 86px; }
body.com-controles #fala { bottom: 146px; }
body.estreita #monitor-gabi { display: none; }
body.estreita #fala { bottom: auto; left: 0; top: 0; font-size: 16px; padding: 2px 8px; }
body.estreita #fala::before { left: 50%; bottom: -14px; margin-left: -8px; border-right-color: transparent; border-top-color: #1a1422; }
body.com-controles .c3, body.com-controles .c4 { bottom: 84px; }

/* claquete e corta */
#claquete { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(10, 6, 16, .35); z-index: 6; pointer-events: none; }
.claq { width: min(420px, 88vw); animation: entra .25s ease-out; }
@keyframes entra { from { transform: translateY(20px) scale(.95); opacity: 0; } }
.ripa, .res-claq .ripa { height: 26px; display: flex; background: #f4ecdc; border: 3px solid #111; transform-origin: 3% 100%; transform: rotate(-14deg); transition: transform .12s ease-in; }
.ripa i { flex: 1; background: #1c1a20; transform: skewX(-30deg); margin: 0 10px; }
#claquete.bate .ripa { transform: rotate(0deg); }
.corpo { background: #1c1a20; border: 3px solid #111; border-top: 0; padding: 12px 16px; color: #f4ecdc; }
.linha1 { font-size: 22px; letter-spacing: 2px; border-bottom: 2px solid #f4ecdc; padding-bottom: 6px; margin-bottom: 8px; }
.linha2 { display: flex; justify-content: space-between; font-size: 16px; }
.linha2 b { font-size: 26px; display: block; }
.linha3 { font-size: 14px; margin-top: 8px; color: var(--suave); }
.claq-sub { font-size: 22px; text-shadow: 0 2px 0 #000; margin: 0; text-align: center; }
#aviso-corta { position: fixed; inset: 0; display: grid; place-items: center; align-content: center; background: rgba(60, 0, 10, .35); z-index: 6; pointer-events: none; text-align: center; }
#aviso-corta .grande { font-size: clamp(64px, 16vw, 140px); margin: 0; color: #fff; text-shadow: 0 6px 0 #000, 0 0 30px #ff4d4d; animation: entra .2s ease-out; }
#aviso-corta .sub { font-size: 22px; margin: 0; text-shadow: 0 2px 0 #000; }

/* telas */
.tela { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(14, 9, 20, .6); z-index: 10; overflow-y: auto; }
.abertura-tela { background: linear-gradient(90deg, rgba(14, 9, 20, .82) 0%, rgba(14, 9, 20, .45) 60%, rgba(14, 9, 20, .15) 100%); justify-items: start; padding-left: max(16px, 5vw); }
.caixa { width: min(520px, calc(100vw - 32px)); min-width: 0; background: var(--painel); border: 3px solid var(--borda); border-radius: 10px; padding: 20px 22px; box-shadow: 0 8px 0 rgba(0, 0, 0, .45); }
.caixa.larga { width: min(760px, calc(100vw - 32px)); }
.abertura { width: min(600px, calc(100vw - 32px)); background: rgba(35, 27, 46, .92); }
.abertura-topo { display: flex; gap: 16px; align-items: center; }
#retrato-abertura { width: 112px; height: 154px; image-rendering: pixelated; flex: none; background: radial-gradient(circle at 50% 40%, #4a3a60, #231b2e 70%); border: 3px solid var(--borda); border-radius: 8px; }
h1 { font-size: clamp(34px, 6vw, 52px); margin: 4px 0 6px; line-height: 1; color: var(--ambar); text-shadow: 0 4px 0 #6a2a1a; }
h2 { font-size: 28px; margin: 0 0 12px; color: var(--ambar); }
h3 { font-size: 22px; margin: 10px 0 4px; }
.selo { margin: 0 0 8px; font-size: 13px; letter-spacing: 1px; color: var(--suave); text-transform: uppercase; }
.sub { font-size: 17px; line-height: 1.4; color: var(--texto); margin: 6px 0; }
.aviso-ficcao { font-size: 13px; color: var(--suave); margin: 12px 0 0; line-height: 1.35; }
.botoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.botoes.coluna { flex-direction: column; }
.bt { min-height: 48px; padding: 8px 18px; font-size: 20px; border: 3px solid #1a1422; border-radius: 8px; background: var(--ambar); color: #1a1422; cursor: pointer; box-shadow: 0 4px 0 #8a4a1a; }
.bt:hover { filter: brightness(1.08); }
.bt:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a4a1a; }
.bt.sec { background: var(--painel2); color: var(--texto); border-color: var(--borda); box-shadow: 0 4px 0 #120d18; }
.bt:disabled { opacity: .45; cursor: default; }
.pisca { font-size: 22px; animation: rec 1s steps(2) infinite; }

/* locações */
.lista-locacoes { display: grid; gap: 12px; }
.locacao { border: 3px solid var(--borda); border-radius: 8px; padding: 12px; background: var(--painel2); }
.locacao.bloqueada { opacity: .6; }
.locacao h3 { margin: 0; color: var(--ambar); }
.locacao .loc-sub { font-size: 14px; color: var(--suave); margin: 2px 0 8px; }
.locacao .loc-nov { font-size: 15px; margin: 0 0 8px; }
.takes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.take-bt { text-align: left; min-height: 64px; padding: 6px 10px; border: 2px solid var(--borda); border-radius: 6px; background: #1a1422; color: var(--texto); cursor: pointer; font-size: 15px; }
.take-bt:disabled { cursor: default; opacity: .5; }
.take-bt .est { color: var(--ambar); letter-spacing: 2px; display: block; }
.take-bt .est .vazia { color: #4a3e5a; }

/* guia */
.guia { width: min(560px, calc(100vw - 32px)); }
.guia-topo { display: flex; justify-content: space-between; align-items: baseline; }
.guia-pag { color: var(--suave); }
.guia-midia { position: relative; background: #0f0c14; border: 3px solid #3b3350; border-radius: 6px; aspect-ratio: 16 / 9; overflow: hidden; }
.guia-midia video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0f0c14; }
.bt-clipe { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 44px; padding: 6px 14px; border: 3px solid #1a1422; border-radius: 8px; background: var(--ambar); color: #1a1422; font-size: 18px; cursor: pointer; }
#guia-gabi { position: absolute; left: 6px; bottom: 6px; width: 48px; height: 66px; image-rendering: pixelated; }
.guia-cartao p { font-size: 18px; line-height: 1.4; margin: 4px 0; min-height: 3em; }
.guia-controles { display: flex; flex-wrap: wrap; gap: 8px; font-size: 16px; }
.guia-controles .aba { padding: 4px 10px; border: 2px solid var(--borda); border-radius: 6px; background: #1a1422; color: var(--texto); cursor: pointer; font-size: 15px; min-height: 44px; }
.guia-controles .aba[aria-pressed="true"] { background: var(--ambar); color: #1a1422; }
.guia-controles .linha { width: 100%; font-size: 17px; line-height: 1.6; }

/* opções */
.opcoes { display: grid; gap: 12px; margin-top: 8px; font-size: 18px; }
.opcoes label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.opcoes input[type="range"] { flex: 1; min-width: 140px; accent-color: var(--ambar); height: 32px; }
.opcoes input[type="checkbox"] { width: 26px; height: 26px; accent-color: var(--ambar); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { min-height: 44px; padding: 4px 12px; border: 2px solid var(--borda); border-radius: 6px; background: #1a1422; color: var(--texto); font-size: 16px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ambar); color: #1a1422; }

/* resultado */
.resultado { text-align: center; }
.res-claq { margin: 0 auto 10px; width: min(420px, 100%); }
.res-claq .ripa { transform: rotate(0); }
.res-cab { display: flex; justify-content: space-between; gap: 10px; background: #1c1a20; border: 3px solid #111; border-top: 0; padding: 6px 12px; font-size: 18px; }
.estrelas { font-size: 48px; letter-spacing: 8px; }
.estrelas span { color: #4a3e5a; display: inline-block; }
.estrelas span.on { color: var(--ambar); text-shadow: 0 3px 0 #8a4a1a; animation: pop .35s ease-out backwards; }
.res-metricas { display: grid; gap: 8px; margin: 10px auto; width: 100%; max-width: 460px; text-align: left; font-size: 17px; }
.metrica { display: grid; grid-template-columns: 130px 1fr 70px; align-items: center; gap: 8px; }
.metrica .barra { height: 12px; background: #120d18; border: 2px solid #3b2f4a; border-radius: 3px; overflow: hidden; }
.metrica .barra i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a3a, #ffd25a); }
.metrica b { text-align: right; }
.copiao { margin: 8px 0; min-width: 0; max-width: 100%; }
.copiao-rot { margin: 0 0 4px; font-size: 14px; color: var(--suave); letter-spacing: 2px; text-transform: uppercase; }
.copiao-fita { display: flex; gap: 6px; overflow-x: auto; padding: 8px 6px; background: #0e0b12; border-top: 6px dotted #3b3350; border-bottom: 6px dotted #3b3350; }
.copiao-fita figure { margin: 0; flex: none; }
.copiao-fita canvas { width: 144px; height: 81px; display: block; border: 2px solid #3b3350; }
.copiao-fita figcaption { font-size: 12px; color: var(--suave); max-width: 144px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sobre p { font-size: 16px; line-height: 1.45; }
.estreia { text-align: center; }
#palco-estreia { width: 100%; max-width: 600px; aspect-ratio: 240 / 112; image-rendering: pixelated; border: 3px solid #3b3350; border-radius: 6px; background: #140f1c; }
.creditos { font-size: 14px; color: var(--suave); line-height: 1.4; margin-top: 6px; }
.creditos p { margin: 2px 0; }
.copiao-fita img { width: 144px; height: 81px; display: block; border: 2px solid #3b3350; image-rendering: pixelated; }
.copiao-vazio { width: 144px; height: 81px; display: grid; place-items: center; border: 2px dashed #3b3350; color: var(--suave); font-size: 12px; }
.bt-estreia-loc { width: 100%; margin-bottom: 10px; }

/* tela estreita (retrato) */
@media (max-width: 640px) {
  .topo { left: 16px; top: 14px; gap: 6px; }
  .rec { font-size: 14px; }
  #take-rotulo { font-size: 13px; }
  .bt-icone { width: 44px; height: 44px; }
  #fita { top: 64px; left: 18px; right: 18px; }
  .placar { top: 80px; right: 18px; font-size: 18px; }
  .canto { width: 26px; height: 26px; }
  .base { left: 12px; right: 12px; bottom: 16px; gap: 8px; }
  .medidores { top: 84px; left: 16px; right: 16px; width: auto; transform: none; }
  .placar { top: 148px; right: 16px; font-size: 16px; }
  #monitor-gabi { width: 80px; padding: 3px; }
  #retrato { width: 68px; height: 60px; }
  .mon-rotulo { font-size: 8px; }
  #fala { font-size: 17px; bottom: 44px; padding: 2px 8px; }
  #medidor { height: 30px; }
  #med-duble { height: 18px; top: 3px; width: 12px; margin-left: -6px; }
  #med-txt { font-size: 14px; }
  #corta-box { font-size: 12px; }
  #dica { top: 180px; font-size: 16px; padding: 8px 12px; }
  .bt-ctl { width: 70px; height: 60px; }
  .bt-ctl.pulo { width: 104px; }
  body.com-controles .base { bottom: 80px; }
  body.com-controles .c3, body.com-controles .c4 { bottom: 78px; }
  .abertura-tela { justify-items: center; padding-left: 16px; align-items: end; background: linear-gradient(0deg, rgba(14, 9, 20, .9) 0%, rgba(14, 9, 20, .6) 65%, rgba(14, 9, 20, .1) 100%); }
  .abertura { padding: 14px; }
  #retrato-abertura { width: 76px; height: 104px; }
  h1 { font-size: 32px; }
  .sub { font-size: 15px; }
  .bt { font-size: 17px; padding: 6px 12px; }
  .abertura .botoes { gap: 8px; }
  .metrica { grid-template-columns: 112px 1fr 50px; font-size: 14px; }
  .estrelas { font-size: 38px; }
  .copiao-fita canvas { width: 112px; height: 63px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; transition-duration: .01s !important; }
}