:root{--fundo:#141714;--papel:#f6f1e6;--tinta:#1d1f1c;--verde:#1f5f5b;--ouro:#d9a441;--borda:#3a3f39;font-family:"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--fundo);color:var(--papel);min-height:100vh;display:flex;flex-direction:column}
button,select,input{font:inherit}
button{background:#2a2f2a;color:var(--papel);border:1px solid var(--borda);border-radius:8px;padding:.45rem .8rem;cursor:pointer}
button:hover{border-color:var(--ouro)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
button.primario{background:var(--verde);border-color:#2f8a84;font-weight:600}
button[disabled]{opacity:.5;cursor:default}
.topo{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;padding:.6rem 1rem}
.marca{font-size:1.2rem;margin:0;letter-spacing:.02em}
.estado{background:#2b2b20;border:1px solid #5a5530;border-radius:99px;padding:.15rem .7rem;font-size:.85rem}
.estado.dentro{background:#1d3a37;border-color:#2f8a84}
.controles{display:flex;flex-wrap:wrap;gap:.4rem;margin-left:auto}
main{flex:1;position:relative}
.palco-wrap{width:100%;overflow:hidden}
.palco{position:relative;width:min(100%,calc((100vh - 170px) * 1672 / 800));aspect-ratio:1672/800;margin:0 auto;transform-origin:50% 75%}
.palco canvas{width:100%;height:100%;display:block}
.camada{position:absolute;inset:0;pointer-events:none}
#hotspots{pointer-events:none}
#hotspots button{position:absolute;pointer-events:auto;background:transparent;border:2px dashed transparent;border-radius:12px;color:transparent}
#hotspots button:hover,#hotspots button:focus-visible{border-color:rgba(217,164,65,.8);color:var(--papel);background:rgba(0,0,0,.25)}
#hotspots button.pessoa{border-radius:40%}
.carregando{position:absolute;inset:auto 0 45% 0;text-align:center;font-size:1.2rem}
.balao{position:absolute;max-width:26%;background:var(--papel);color:var(--tinta);border-radius:14px;padding:.55rem .75rem;font-size:clamp(.72rem,1.15vw,1rem);line-height:1.3;box-shadow:0 6px 18px rgba(0,0,0,.35);transform:translate(-50%,-100%)}
.balao::after{content:"";position:absolute;left:50%;bottom:-9px;border:9px solid transparent;border-top-color:var(--papel);border-bottom:0;transform:translateX(-50%)}
.balao b{display:block;font-size:.75em;color:var(--verde);text-transform:uppercase;letter-spacing:.05em}
.legenda{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);background:rgba(20,23,20,.88);border:1px solid var(--borda);border-radius:10px;padding:.4rem .8rem;font-size:.9rem;max-width:80%}
.ajustes-som{position:relative}
.fechar-x{position:absolute;top:.35rem;right:.4rem;width:2rem;height:2rem;padding:0;font-size:1.3rem;line-height:1}
.janela-externa{position:absolute;left:11%;top:9%;width:76%;height:18%;overflow:hidden;pointer-events:none}
.mochila{position:absolute;top:30%;left:-8%;height:55%;width:auto;aspect-ratio:1;background:radial-gradient(circle at 50% 35%,#e8d9b5 0 22%,transparent 23%),linear-gradient(#5b6d8a,#3d4b63);border-radius:40% 40% 30% 30%}
.mochila::after{content:"";position:absolute;left:30%;bottom:-40%;width:40%;height:45%;background:linear-gradient(#ffd27a,#ff8a3d00);border-radius:0 0 50% 50%}
.painel-reuniao{padding:.5rem 1rem;background:#1b201c;border-top:1px solid var(--borda)}
.bloco-titulo{margin:.2rem 0 .4rem;color:var(--ouro);font-weight:600}
.linha-botoes{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.oferta{margin-top:.5rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;background:#262b22;border:1px solid #5a5530;border-radius:10px;padding:.5rem}
.gaveta{position:fixed;top:0;right:0;width:min(420px,100%);height:100vh;overflow:auto;background:#1b201c;border-left:1px solid var(--borda);padding:1rem;z-index:20}
.gaveta ol{padding-left:1.2rem}.gaveta li{margin:.4rem 0}
.cartao{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);background:#1b201c;border:1px solid var(--borda);border-radius:14px;padding:1rem;z-index:25;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.conversa-lista{max-height:40vh;overflow:auto;padding-left:1rem}
.nota{font-size:.8rem;opacity:.8}
dialog{background:#1b201c;color:var(--papel);border:1px solid var(--borda);border-radius:14px;width:min(520px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog label{display:block;margin-top:.6rem}
dialog input:not([type=checkbox]){width:100%;padding:.5rem;border-radius:8px;border:1px solid var(--borda);background:#101310;color:var(--papel)}
.check{display:flex!important;gap:.5rem;align-items:flex-start}
.obr{font-size:.75rem;color:var(--ouro);margin-left:.3rem}
.erro{display:block;color:#ff9b8a;font-size:.85rem;min-height:1em}
.msg{min-height:1.2em}
.rodape{padding:.6rem 1rem;font-size:.8rem;opacity:.8}.rodape a{color:var(--ouro)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:760px){
  .palco{width:178vw;max-height:none;transition:transform .6s ease}
  .balao{max-width:44%;font-size:.8rem}
  .controles{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.reduzido *{animation:none!important;transition:none!important}

/* Ajustes de audio continuam utilizaveis em telas pequenas e por teclado. */
.ajustes-som { margin: .6rem auto; max-width: 78rem; padding: .7rem 1rem; background: #fff; color: #18252c; border: 1px solid #c9d0d2; border-radius: .5rem; }
.ajustes-som summary { cursor: pointer; font-weight: 700; }
.ajustes-som fieldset { display: flex; flex-wrap: wrap; gap: .6rem 1.1rem; margin: .7rem 0; border: 1px solid #c9d0d2; }
.ajustes-som fieldset label { display: inline-flex; align-items: center; gap: .35rem; }
.ajustes-som input[type="range"] { width: min(14rem, 60vw); vertical-align: middle; }
.ajustes-som input[type="checkbox"] { width: auto; }
.ajustes-som a { color: #174f67; }
.ajustes-som :focus-visible { outline: 3px solid #17759e; outline-offset: 3px; }
.tv-tela{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1em;background:#0e2a52;color:#fff;font:700 clamp(6px,.85vw,13px)/1.15 system-ui,sans-serif;text-align:center;border-radius:2px;overflow:hidden;pointer-events:none;padding:2%}
.tv-tela span{font-weight:400;opacity:.8;font-size:.8em;text-transform:uppercase;letter-spacing:.04em}
.tv-tela[data-tipo="propaganda"]{background:linear-gradient(135deg,#b3261e,#f2a900)}
.tv-tela[data-tipo="plantao"]{background:#7a0c0c}
.tv-vinheta{background:repeating-linear-gradient(0deg,#ccc 0 2px,#444 2px 4px);animation:tvchiado .3s steps(3) infinite}
@keyframes tvchiado{to{background-position:0 6px}}
@media (prefers-reduced-motion:reduce){.tv-vinheta{animation:none}}
#tvPainel .tv-grande{font-size:1.4rem;font-weight:700;margin:.2rem 0 .6rem}
.jato-palco{position:absolute;left:0;bottom:6%;will-change:transform}
.jato-sprite{position:absolute;inset:0;background-repeat:no-repeat}
.jato-fx{position:absolute;background-repeat:no-repeat;pointer-events:none}
.jato-estatico{position:absolute;inset:20% 10%;display:flex;align-items:center;justify-content:center;background:#0e2a52cc;color:#fff;font:600 clamp(9px,1vw,15px)/1.2 system-ui;text-align:center;border-radius:6px;padding:.3em}
.visualmente-oculto{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jato-oclusor{position:absolute;top:0;height:100%;background-repeat:no-repeat;pointer-events:none}
.laboratorio{position:fixed;right:12px;bottom:12px;z-index:50;width:min(320px,calc(100vw - 24px));max-height:70vh;overflow:auto;background:#111c;backdrop-filter:blur(6px);color:#fff;border:1px solid #fff3;border-radius:10px;padding:.6rem .7rem;font:13px/1.3 system-ui,sans-serif;box-shadow:0 6px 24px #0008}
.laboratorio h2{font-size:14px;margin:0 2rem .5rem 0}
.laboratorio .lab-botoes{display:grid;gap:.3rem}
.laboratorio button[data-lab]{text-align:left;padding:.35rem .5rem;border-radius:6px;border:1px solid #fff3;background:#2a3b5a;color:#fff;cursor:pointer}
.laboratorio button[data-lab]:hover:not(:disabled){background:#3b5584}
.laboratorio button:disabled{opacity:.55;cursor:not-allowed}
.laboratorio .lab-status{margin:.5rem 0 .3rem;color:#cfe}
.laboratorio pre{white-space:pre-wrap;font-size:11px;margin:.3rem 0 0}
.laboratorio.recolhido > :not(h2):not(.fechar-x){display:none}
.cantarolar{position:absolute;transform:translate(-50%,-100%);background:#fffbe9;color:#3a2a12;border:1px solid #c9b27a;border-radius:12px;padding:.15rem .55rem;font:600 clamp(10px,1vw,15px)/1.2 system-ui;white-space:nowrap;pointer-events:none;box-shadow:0 2px 6px #0003}

/* QA: X do cadastro visível inclusive em telas pequenas e com rolagem */
#cadastro{max-height:90dvh;overflow:auto}
#cadastro > .fechar-x{position:sticky;top:0;float:right;margin:0 0 .5rem .5rem;background:#2a3b5a;color:#fff;border:1px solid #fff4;border-radius:8px;z-index:5}
/* Rev7/QA: balões sempre acima da TV e dos efeitos; legendas na parte visível; painéis com X e rolagem própria */
#efeitos{z-index:1} #baloes{z-index:2} #hotspots{z-index:3}
.palco-wrap{position:relative}
.palco-wrap > .legenda{z-index:4;max-width:92%}
.cartao,.gaveta{max-height:86vh;overflow:auto}
.cartao{position:fixed}
.cartao > .fechar-x,.gaveta > .fechar-x{position:sticky;top:0;float:right;margin:-.3rem -.3rem .3rem .5rem;z-index:2;background:#2a3b5a;color:#fff;border:1px solid #fff4;border-radius:8px}
@media (max-width:600px){.laboratorio{top:8px;bottom:auto;max-height:45vh}}

/* Mobile QA: laboratório recolhido fora dos controles de entrada e fechamento. */
@media(max-width:600px){
  .laboratorio.recolhido{top:auto;bottom:8px;left:8px;right:auto;width:144px;max-height:none;padding:.3rem .45rem}
  .laboratorio.recolhido h2{font-size:11px;margin:0 1.75rem 0 0}
}