/* jogo-empresa.css · 38 coisas antes da primeira venda
   Vitrine à noite: fundo quase preto esverdeado, etiqueta de preço amarela, cupom fiscal em papel.
   Fontes locais (pasta fontes/), licença SIL OFL 1.1: Oswald (Vernon Adams), Schibsted Grotesk
   (Schibsted), JetBrains Mono (The JetBrains Mono Project Authors). */
@font-face{font-family:'EX Disp';font-weight:600;font-display:swap;src:url('fontes/oswald-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'EX Sans';font-weight:400;font-display:swap;src:url('fontes/schibsted-grotesk-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'EX Sans';font-weight:500;font-display:swap;src:url('fontes/schibsted-grotesk-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'EX Sans';font-weight:700;font-display:swap;src:url('fontes/schibsted-grotesk-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'EX Mono';font-weight:500;font-display:swap;src:url('fontes/jetbrains-mono-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'EX Mono';font-weight:700;font-display:swap;src:url('fontes/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

:root{
  --bg:#0E1311; --bg2:#151C19; --bg3:#1D2622;
  --txt:#EEEBE1; --mute:rgba(238,235,225,.62); --dim:rgba(238,235,225,.34); --line:rgba(238,235,225,.13); --line2:rgba(238,235,225,.24);
  --tag:#FFD23F; --tag-ink:#1A1608; --papel:#F5F1E6; --papel-ink:#17150F; --papel-mute:#6B6656;
  --falta:#FF5C4D; --achou:#FFD23F; --bom:#7ED6A5; --frio:#7FB4E0;
  --disp:'EX Disp','Oswald','Arial Narrow',Impact,sans-serif;
  --sans:'EX Sans','Helvetica Neue',Arial,sans-serif;
  --mono:'EX Mono',ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#070A09;color:var(--txt);overflow:hidden}
body{font:500 22px/1.35 var(--sans);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input{font:inherit}

/* palco 1600×900 que escala para caber em qualquer tela */
#moldura{position:fixed;inset:0;display:flex;align-items:center;justify-content:center}
#palco{position:relative;width:1600px;height:900px;flex:none;transform-origin:center center;overflow:hidden;background:var(--bg)}
#palco::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:40;background:radial-gradient(110% 85% at 50% 35%,transparent 55%,rgba(0,0,0,.45))}
.tela{position:absolute;inset:0;padding:64px 80px 96px;opacity:0;pointer-events:none;transition:opacity .45s var(--ease)}
.tela.on{opacity:1;pointer-events:auto}

/* tipografia */
.k{font:700 17px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tag)}
.k.mute{color:var(--mute)}
h1,h2,.disp{font-family:var(--disp);font-weight:600;text-transform:uppercase;letter-spacing:.005em;line-height:.95;margin:0;text-wrap:balance}
h1{font-size:150px}
h2{font-size:76px;line-height:1.1}
h3{font:700 30px/1.2 var(--sans);margin:0}
p{margin:0}
.lede{font-size:30px;line-height:1.38;color:var(--txt);max-width:1100px}
.small{font-size:18px;color:var(--mute)}
.fonte{position:absolute;left:80px;bottom:36px;font-size:15px;color:var(--dim);max-width:1200px}
.mono{font-family:var(--mono)}
.amarelo{color:var(--tag)}.vermelho{color:var(--falta)}.verde{color:var(--bom)}
.num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}

/* etiqueta de preço */
.tag{position:relative;display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px 8px 34px;border-radius:6px 14px 14px 6px;
  background:var(--tag);color:var(--tag-ink);font:700 19px/1.15 var(--sans);clip-path:polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%)}
.tag::before{content:"";position:absolute;left:16px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--bg)}
.tag .tn{font:700 15px var(--mono);opacity:.6}
.tag.vazia{background:transparent;color:var(--dim);clip-path:none;border:2px dashed var(--line2);border-radius:10px;justify-content:center;padding:8px}
.tag.vazia::before{display:none}
.tag.falta{background:transparent;color:var(--falta);clip-path:none;border:2px solid var(--falta);border-radius:10px;padding-left:14px}
.tag.falta::before{display:none}
.tag.outro{background:var(--bg3);color:var(--txt);clip-path:none;border-radius:10px;padding-left:14px}
.tag.outro::before,.tag.dec::before{display:none}
.tag.nova{animation:pousa .7s var(--ease)}
@keyframes pousa{0%{transform:translateY(-30px) rotate(-6deg) scale(1.15);opacity:0}60%{transform:translateY(4px) rotate(1deg);opacity:1}100%{transform:none}}

/* capa */
.capa .tags-capa{position:absolute;right:80px;top:120px;width:520px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.capa .tags-capa i{display:block;height:40px;border:2px dashed var(--line2);border-radius:6px}
.capa .tags-capa i.l{background:var(--tag);border-color:var(--tag);animation:pisca 2.4s var(--ease) infinite}
@keyframes pisca{0%,100%{opacity:.25}50%{opacity:1}}

/* escolha */
.cartoes{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-top:48px}
.cartao{position:relative;background:var(--bg2);border:2px solid var(--line);border-radius:18px;padding:36px;text-align:left;min-height:420px;display:flex;flex-direction:column;gap:16px;transition:border-color .3s,transform .3s}
.cartao:hover{border-color:var(--tag)}
.cartao .tecla{position:absolute;top:24px;right:28px;font:700 22px var(--mono);color:var(--dim)}
.cartao h3{font:600 54px/1 var(--disp);text-transform:uppercase}
.cartao.esc{border-color:var(--tag);transform:translateY(-6px)}
.cartao svg{width:150px;height:110px}
.cartao .ficha{font-size:20px;color:var(--mute);line-height:1.45}

/* desenho em traço */
.sk path,.sk line,.sk rect,.sk circle,.sk polyline{fill:none;stroke:var(--txt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sk .ac{stroke:var(--tag)}
.sk .fa{stroke:var(--falta)}
.sk .so{stroke:var(--mute);stroke-dasharray:6 8}
.sk .ch{fill:var(--tag);stroke:none}
.tela.on .sk .d{stroke-dasharray:1;stroke-dashoffset:1;animation:risca 1.2s var(--ease) forwards;animation-delay:calc(var(--i,0) * .18s)}
@keyframes risca{to{stroke-dashoffset:0}}

/* personagem */
.pessoa{display:grid;grid-template-columns:330px 1fr;gap:60px;align-items:center;margin-top:30px}
.ficha-loja{margin-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ficha-loja div{background:var(--bg2);border-left:4px solid var(--tag);padding:14px 18px;border-radius:4px}
.ficha-loja b{display:block;font:700 15px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:4px}
.ficha-loja span{font-size:23px}
.poupanca{display:inline-flex;align-items:baseline;gap:14px;margin-top:22px;background:var(--papel);color:var(--papel-ink);padding:12px 22px;border-radius:6px}
.poupanca b{font:700 44px var(--mono)}

/* quadro das 38 */
.quadro{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;margin-top:22px}
.quadro .tag{min-height:62px;font-size:17px}
.contador{position:absolute;right:80px;top:56px;text-align:right}
.contador .num{font-size:96px;line-height:.9;color:var(--tag)}
.contador .num small{font-size:44px;color:var(--mute)}
.contador .rot{font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.dica-vez{position:absolute;left:80px;right:80px;bottom:92px;display:flex;align-items:center;gap:18px;font:700 32px/1.25 var(--sans)}
.dica-vez .k{flex:none}
.dica-vez.nova span{animation:aparece .6s var(--ease)}
@keyframes aparece{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.outros{position:absolute;left:80px;right:80px;bottom:150px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.outros .tag{min-height:40px;font-size:16px}
.registro{position:absolute;left:80px;bottom:34px;display:flex;gap:10px;align-items:center;width:900px}
.registro input{flex:1;font:500 24px var(--sans);padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--bg2);color:var(--txt);outline:0}
.registro input:focus{border-color:var(--tag)}
.registro input::placeholder{color:var(--dim)}
.registro .bt,.cands .bt{font:700 18px var(--sans);padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--bg3);color:var(--txt);cursor:pointer;white-space:nowrap}
.cands{position:absolute;left:80px;right:80px;bottom:96px;display:none;flex-wrap:wrap;gap:10px;align-items:center;z-index:5;background:var(--bg2);border:1px solid var(--tag);border-radius:12px;padding:14px 16px}
.cands.on{display:flex}
.cands .small{font-size:20px;margin-right:6px}
.cands .cand{border-color:var(--tag)}
.cands .cand .tecla{display:inline-block;margin-right:8px;color:var(--tag);font-family:var(--mono)}
.campo-outro{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:60;background:var(--bg2);border:2px solid var(--tag);border-radius:14px;padding:26px 30px;width:760px;display:none}
.campo-outro.on{display:block}
.campo-outro input{width:100%;margin-top:12px;font-size:30px;padding:10px 14px;border-radius:8px;border:0;background:var(--papel);color:var(--papel-ink)}

/* o que faltou: quatro colunas de blocos */
.mapa{columns:4;column-gap:30px;margin-top:22px}
.bloco{break-inside:avoid;margin-bottom:22px}
.bloco h4{margin:0 0 8px;font:700 15px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);display:flex;justify-content:space-between;gap:8px}
.bloco h4 em{font-style:normal;color:var(--tag)}
.bloco .tag{min-height:0;padding-top:6px;padding-bottom:6px;margin-bottom:6px;font-size:16.5px;font-weight:600}
.lado{display:inline-block;font:700 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:30px;background:var(--bg3);color:var(--mute);margin-bottom:10px}

/* mecanismo: o que se vê e o que não se vê */
.vitrine{display:grid;grid-template-columns:640px 1fr;gap:60px;align-items:center;margin-top:20px}
.citacao{font:600 52px/1.05 var(--disp);text-transform:uppercase;color:var(--tag)}

/* cupom (estimativas e contas) */
.cupons{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.cupom{background:var(--papel);color:var(--papel-ink);border-radius:4px;padding:16px 18px 18px;position:relative;
  -webkit-mask:radial-gradient(circle 7px at 50% 100%,transparent 6px,#000 7px) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 7px at 50% 100%,transparent 6px,#000 7px) 0 0/22px 100% repeat-x}
.cupom .cb{font:700 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--papel-mute)}
.cupom .ct{font:700 22px/1.15 var(--sans);margin:4px 0 8px}
.cupom .ci{font:500 14px/1.35 var(--sans);color:var(--papel-mute);min-height:58px}
.cupom label{display:flex;align-items:center;gap:6px;margin-top:10px;font:700 20px var(--mono)}
.cupom input{width:100%;font:700 26px var(--mono);border:0;border-bottom:2px dashed #b7b09c;background:transparent;color:var(--papel-ink);padding:2px 0;outline:none}
.cupom input:focus{border-bottom-color:var(--papel-ink);background:#fff7d6}
.soma{position:absolute;right:80px;top:56px;text-align:right}
.soma .num{font-size:72px;color:var(--tag)}
.soma .rot{font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* comparação: risco e correção */
.comp{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.comp .ln{display:grid;grid-template-columns:600px 1fr 190px 190px;gap:18px;align-items:center;font-size:21px;padding:5px 0;border-bottom:1px solid var(--line)}
.comp .ln.cab{font:700 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);border:0}
.comp .barras{position:relative;height:30px}
.comp .barras i{position:absolute;left:0;height:12px;border-radius:3px}
.comp .barras i.v{top:0;background:var(--mute)}
.comp .barras i.r{top:16px;background:var(--tag);transition:width 1s var(--ease)}
.comp .vc{font:700 22px var(--mono);text-align:right;color:var(--mute)}
.comp .vc s{text-decoration-color:var(--falta);text-decoration-thickness:3px}
.comp .vr{font:700 24px var(--mono);text-align:right;color:var(--tag)}
.comp .ln.tot{border-top:2px solid var(--line2);border-bottom:0;font-weight:700}
.comp .esq{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--falta);display:block;margin-top:2px;font-weight:500}
.mao{font-family:var(--disp);color:var(--tag);transform:rotate(-2deg);display:inline-block}

/* pilha das contas que não param */
.pilha{position:absolute;right:80px;top:150px;width:560px;display:flex;flex-direction:column-reverse;gap:8px}
.pilha .conta{background:var(--papel);color:var(--papel-ink);border-radius:4px;padding:12px 18px;display:flex;justify-content:space-between;font:700 21px var(--sans);animation:cai .55s var(--ease)}
.pilha .conta span:last-child{font-family:var(--mono)}
@keyframes cai{from{transform:translateY(-60px) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.porta{position:absolute;left:80px;top:250px}

/* conta do mês (cupom grande) */
.extrato{position:absolute;top:175px;width:640px;background:var(--papel);color:var(--papel-ink);border-radius:4px;padding:22px 28px;font:600 21px var(--sans)}
.extrato.a{left:80px}.extrato.b{right:80px}
.extrato h4{margin:0 0 10px;font:700 15px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--papel-mute)}
.extrato .ln{display:flex;justify-content:space-between;gap:20px;padding:5px 0;border-bottom:1px dashed #cfc8b3}
.extrato .ln span:last-child{font-family:var(--mono);font-weight:700;white-space:nowrap}
.extrato .ln.novo{color:#B3261E}
.extrato .ln.res{border-bottom:0;border-top:2px solid var(--papel-ink);margin-top:6px;padding-top:10px;font-size:28px}
.extrato .ln.esc{opacity:0}
.extrato .ln.on{opacity:1;animation:aparece .5s var(--ease)}
.veredito{position:absolute;left:80px;right:80px;bottom:92px;font:700 30px/1.3 var(--sans)}

/* número grande */
.grande{font:700 190px/.9 var(--mono);color:var(--tag);letter-spacing:-.03em}
.grande.verm{color:var(--falta)}

/* acontecimentos */
.eventos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.evento{background:var(--bg2);border:2px solid var(--line);border-radius:16px;padding:28px;text-align:left;display:flex;flex-direction:column;gap:12px;min-height:300px}
.evento.esc{border-color:var(--tag)}
.evento .tecla{font:700 20px var(--mono);color:var(--dim)}
.evento h3{font:600 34px/1.05 var(--disp);text-transform:uppercase}
.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.opcao{background:var(--bg2);border:2px solid var(--line);border-radius:14px;padding:22px 24px;text-align:left;display:flex;flex-direction:column;gap:10px}
.opcao.esc{border-color:var(--tag);background:var(--bg3)}
.opcao .tecla{font:700 18px var(--mono);color:var(--dim)}
.opcao b{font-size:25px;line-height:1.2}
.opcao .ef{font-size:19px;color:var(--mute);line-height:1.4}
.opcao.esc .ef{color:var(--txt)}
.cenario{margin-top:24px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cenario div{background:var(--papel);color:var(--papel-ink);border-radius:4px;padding:14px 18px}
.cenario b{display:block;font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--papel-mute)}
.cenario span{font:700 34px var(--mono)}

/* fim */
.ato{margin-top:40px;background:var(--papel);color:var(--papel-ink);border-radius:6px;padding:28px 34px;max-width:1150px}
.ato b{font:700 15px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--papel-mute);display:block;margin-bottom:8px}
.ato p{font:700 32px/1.3 var(--sans)}

/* relógio de bloco */
.relogio{position:absolute;right:80px;bottom:36px;font:700 26px var(--mono);color:var(--mute)}
.relogio.fim{color:var(--falta)}

/* controles do professor */
#dock{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));display:flex;gap:6px;padding:6px;border-radius:40px;background:rgba(20,26,23,.92);border:1px solid var(--line);z-index:80;transition:opacity .4s}
#dock.dorme{opacity:.12}
#dock button{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--txt)}
#dock button:hover{background:rgba(255,255,255,.08)}
#dock svg{width:22px;height:22px}
#aviso{position:fixed;left:50%;top:18px;transform:translateX(-50%) translateY(-200%);background:var(--papel);color:var(--papel-ink);padding:12px 20px;border-radius:10px;font:600 18px var(--sans);z-index:90;transition:transform .35s var(--ease);max-width:min(900px,92vw);text-align:center}
#aviso.on{transform:translateX(-50%) translateY(0)}
#painel{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;z-index:85;align-items:center;justify-content:center;padding:20px}
#painel.on{display:flex}
#painel .caixa{background:var(--bg2);border:1px solid var(--line2);border-radius:16px;max-width:860px;width:100%;max-height:92vh;overflow:auto;padding:26px 30px;font-size:17px;line-height:1.45}
#painel h2{font-size:40px;margin-bottom:10px}
#painel h3{font-size:19px;margin:18px 0 6px;color:var(--tag)}
#painel table{border-collapse:collapse;width:100%}
#painel td{padding:4px 8px;border-top:1px solid var(--line);vertical-align:top}
#painel kbd{font:600 14px var(--mono);background:var(--bg3);padding:2px 7px;border-radius:5px}
#painel .nota{background:var(--bg3);border-left:4px solid var(--tag);padding:12px 16px;border-radius:4px}
#painel .bt{background:var(--tag);color:var(--tag-ink);padding:8px 16px;border-radius:8px;font-weight:700}
#painel .fechar{float:right}

/* janela de condução (segunda tela do professor) */
body.conducao{overflow:auto;background:var(--bg);font-size:18px}
.cond{max-width:980px;margin:0 auto;padding:22px max(16px,env(safe-area-inset-left)) 40px}
.cond .fase{font:600 44px/1 var(--disp);text-transform:uppercase;margin:6px 0 10px}
.cond .nota{background:var(--bg2);border-left:4px solid var(--tag);padding:14px 18px;border-radius:4px;line-height:1.5}
.cond .lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:16px}
.cond .lista button{text-align:left;padding:10px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-size:16px}
.cond .lista button.ok{background:var(--tag);color:var(--tag-ink);border-color:var(--tag)}
.cond .lista button b{font-family:var(--mono);opacity:.6;margin-right:6px}
.cond .bts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cond .bts button{padding:10px 16px;border-radius:8px;background:var(--bg3);border:1px solid var(--line2);font-weight:700}

@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

.veredito.solto{position:static;margin-top:18px;font-size:28px}
.veredito.ver-lado{left:80px;right:auto;width:640px;top:470px;bottom:auto;font-size:28px}

/* decisões: acendem sem preço, em contorno */
.tag.dec{background:transparent;color:var(--tag);clip-path:none;border:2px solid var(--tag);border-radius:10px;padding-left:14px}
.cands .cand em{font-style:normal;color:var(--mute);font-weight:500}
/* pares: o que lembraram e o que vem junto */
.pares{margin-top:44px;display:flex;flex-direction:column;gap:22px}
.par{display:grid;grid-template-columns:560px 1fr;gap:30px;align-items:baseline;opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease);border-bottom:1px solid var(--line);padding-bottom:18px}
.par.on{opacity:1;transform:none}
.par .pa{font:500 30px/1.25 var(--sans)}
.par .pa.nao{color:var(--mute)}
.par .pe{font:700 34px/1.2 var(--sans);color:var(--tag)}
/* conta do mês: a pergunta como título e o salário aberto */
h2.pergunta-conta{margin-top:10px;font-size:40px;line-height:1.1;max-width:1440px;text-wrap:balance}
.extrato .det{display:block;font:500 15px/1.3 var(--sans);color:var(--papel-mute);margin-top:1px}
.extrato .det b{color:#B3261E;font-weight:700}