
:root{
  --bg:#140C26; --bg2:#1A1033; --panel:#22164A; --panel2:#2B1B4D;
  --line:#3A2A63; --line2:#4A3878;
  --roxo:#6C3BD4; --roxo2:#8B5CF6; --lil:#C9B8F0; --branco:#F8F5FF;
  --txt:#EDE7FB; --txt2:#B9AAD9; --txt3:#8577A8;
  --ok:#4ADE80; --warn:#FBBF24; --bad:#F87171;
  --disp:"Fraunces",Georgia,serif; --sans:"Space Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:15.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;margin:0}
button{font-family:var(--sans);cursor:pointer;border:none}
a{color:var(--roxo2)}
.hide{display:none !important}

/* ---------- faixa e config ---------- */
.faixa{background:var(--bg2);border-bottom:1px solid var(--line);padding:8px 18px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.faixa .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}
.faixa .dot.on{background:var(--ok)}
.faixa button{margin-left:auto;background:transparent;color:var(--lil);border:1px solid var(--line2);border-radius:20px;padding:3px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
#cfg{background:var(--bg2);border-bottom:1px solid var(--line);padding:16px 18px;display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
#cfg label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt3);margin-bottom:5px}
#cfg input,#cfg select{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--txt);border-radius:8px;padding:9px 11px;font-family:var(--sans);font-size:14px}
#cfg .full{grid-column:1/-1;font-size:12.5px;color:var(--txt3);line-height:1.6}
#cfg .btns{display:flex;gap:8px;align-items:flex-end}
.bt{background:var(--roxo);color:#fff;border-radius:8px;padding:9px 16px;font-size:14px;font-weight:500}
.bt.sec{background:transparent;border:1px solid var(--line2);color:var(--lil)}
.bt:hover{filter:brightness(1.12)}
.bt:disabled{opacity:.45;cursor:not-allowed}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:calc(100vh - 38px)}
@media(max-width:900px){.shell{grid-template-columns:1fr}.nav{display:none}}
.nav{background:var(--bg2);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column;gap:3px}
.marca{font-family:var(--disp);font-size:23px;padding:0 10px 2px}
.marca span{color:var(--roxo2)}
.marca small{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.22em;color:var(--txt3);margin-top:2px}
.nav .it{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:9px;color:var(--txt2);font-size:14.5px;background:transparent;text-align:left;width:100%}
.nav .it.on{background:var(--panel2);color:var(--branco)}
.nav .it:hover{background:var(--panel)}
.nav .sep{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--txt2)}
.av{width:32px;height:32px;border-radius:50%;background:var(--roxo);display:grid;place-items:center;font-size:12px;font-weight:600;color:#fff}
main{padding:30px clamp(18px,4vw,44px) 60px;min-width:0}
.eyebrow{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--roxo2);margin-bottom:8px}
main h1{font-size:clamp(1.7rem,3.4vw,2.3rem);margin-bottom:10px}
.lead{color:var(--txt2);max-width:62ch;margin:0 0 26px}

/* ---------- placar e treinos ---------- */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px;margin:0 0 26px;max-width:820px}
.placar .k{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.placar .k b{font-family:var(--disp);font-size:21px;display:block;color:var(--branco);line-height:1.15}
.placar .k small{color:var(--txt3);font-size:11px;letter-spacing:.07em;text-transform:uppercase;display:block;margin-top:3px}
.placar .k.ouro b{color:var(--lil)}
.tk{font-size:11.5px;color:var(--lil);border:1px solid var(--line2);border-radius:20px;padding:2px 9px;font-weight:400;white-space:nowrap;margin-left:7px;font-variant-numeric:tabular-nums}
.trava{background:rgba(139,92,246,.08);border:1px solid var(--line2);border-radius:10px;padding:10px 13px;margin:14px 0;font-size:13.5px;color:var(--txt2)}
.trava b{color:var(--lil)}
.tkt{margin-top:16px;padding:12px 15px;border:1px dashed var(--line2);border-radius:10px;font-size:14px;color:var(--txt2)}
.tkt b{color:var(--lil);font-family:var(--disp);font-size:17px}
.mod{background:var(--panel);border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.mod .top{display:flex;gap:14px;align-items:center;padding:15px 18px;background:var(--panel2)}
.mod .tag{font-family:var(--disp);font-size:14px;color:var(--lil);min-width:26px}
.mod .top b{font-size:15.5px;display:block}
.mod .top small{color:var(--txt3);font-size:12.5px}
.cen{display:flex;gap:12px;align-items:center;padding:14px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
.cen .n{flex:1;min-width:200px}
.cen .n b{font-size:14.5px;display:block}
.cen .n small{color:var(--txt3);font-size:12.5px}
.niv{background:transparent;border:1px solid var(--line2);color:var(--lil);border-radius:20px;padding:5px 14px;font-size:12.5px}
.niv:hover{background:var(--roxo);color:#fff;border-color:var(--roxo)}

/* ---------- briefing ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:820px}
.pf{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.pf .big{width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--roxo2),var(--roxo));display:grid;place-items:center;font-family:var(--disp);font-size:24px;color:#fff}
.pf b{font-size:17px;display:block}
.pf small{color:var(--txt2);font-size:13px}
.chips{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.chip{border:1px solid var(--line2);border-radius:20px;padding:3px 11px;font-size:12px;color:var(--txt2)}
.card hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.card p{margin:0 0 12px;font-size:14.5px}
.card p b{color:var(--branco)}
.dica{font-size:13px;color:var(--txt3)}
.acoes{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

/* ---------- SIMULACAO (a tela nova) ---------- */
.simbar{display:flex;gap:12px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.simbar .who{display:flex;gap:11px;align-items:center;flex:1;min-width:180px}
.simbar .who .big{width:42px;height:42px;border-radius:50%;background:linear-gradient(150deg,var(--roxo2),var(--roxo));display:grid;place-items:center;font-family:var(--disp);font-size:17px;color:#fff}
.simbar .who b{font-size:15px;display:block;line-height:1.2}
.simbar .who small{color:var(--txt3);font-size:12.5px}
.pillbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{border:1px solid var(--line2);border-radius:20px;padding:5px 13px;font-size:12.5px;color:var(--txt2);white-space:nowrap}
.pill.mono{font-variant-numeric:tabular-nums}
.pill.act{background:var(--roxo);border-color:var(--roxo);color:#fff}

.palco{display:grid;grid-template-columns:1fr 300px;gap:20px;align-items:start}
@media(max-width:980px){.palco{grid-template-columns:1fr}}

.vwrap{position:relative;background:radial-gradient(120% 100% at 50% 8%,#241548 0%,#150C2B 55%,#0C0718 100%);border:1px solid var(--line);border-radius:16px;overflow:hidden;aspect-ratio:16/10}
.vwrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.vwrap video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s ease}
.vwrap video.on{opacity:1}
.vwrap.temvideo canvas{display:none}
.slot{position:absolute;right:14px;top:14px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt3);background:rgba(12,7,24,.6);border:1px solid var(--line);border-radius:20px;padding:4px 11px}
.vstatus{position:absolute;left:14px;top:14px;display:flex;gap:8px;align-items:center;background:rgba(12,7,24,.72);backdrop-filter:blur(6px);border:1px solid var(--line2);border-radius:20px;padding:5px 13px;font-size:12px;color:var(--txt2)}
.vstatus .led{width:8px;height:8px;border-radius:50%;background:var(--txt3)}
.vstatus.on .led{background:var(--ok);box-shadow:0 0 9px var(--ok)}
.vstatus.mic .led{background:var(--bad);box-shadow:0 0 9px var(--bad)}
.legenda{position:absolute;left:0;right:0;bottom:0;padding:30px 20px 18px;background:linear-gradient(transparent,rgba(12,7,24,.92));font-size:16.5px;line-height:1.45;min-height:70px}
.legenda em{color:var(--txt3);font-style:normal;font-size:14px}

/* painel da IA Tecnica */
.tec{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 17px}
.tec h3{font-family:var(--sans);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--roxo2);margin-bottom:3px;display:flex;gap:7px;align-items:center}
.tec .sub{font-size:11.5px;color:var(--txt3);margin-bottom:15px}
.tec .lin{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:13px}
.tec .lin span:first-child{color:var(--txt3)}
.tec .lin b{text-align:right;font-weight:500}
.bar{height:6px;background:var(--bg);border-radius:4px;overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--roxo2);width:0;transition:width .5s}
.bar.q i{background:var(--ok)}
.dots{display:flex;gap:5px;margin-top:7px}
.dots i{width:100%;height:6px;border-radius:3px;background:var(--bg)}
.dots i.f{background:var(--ok)}
.feed{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px;max-height:190px;overflow-y:auto}
.fi{font-size:12.5px;display:flex;gap:7px;line-height:1.4}
.fi .m{flex-shrink:0;font-weight:600}
.fi.ok .m{color:var(--ok)} .fi.bad .m{color:var(--bad)} .fi.neu .m{color:var(--txt3)}

/* entrada */
.entrada{margin-top:20px;display:flex;gap:11px;align-items:center;flex-wrap:wrap}
.ptt{background:var(--roxo);color:#fff;border-radius:12px;padding:14px 22px;font-size:14.5px;font-weight:500;display:flex;gap:9px;align-items:center;user-select:none;min-width:206px;justify-content:center}
.ptt.rec{background:var(--bad);animation:pulse 1s infinite}
@keyframes pulse{50%{filter:brightness(1.3)}}
.entrada input[type=text]{flex:1;min-width:200px;background:var(--panel);border:1px solid var(--line2);color:var(--txt);border-radius:12px;padding:14px 16px;font-family:var(--sans);font-size:14.5px}
.env{background:var(--roxo);color:#fff;border-radius:12px;padding:14px 19px;font-size:16px}
.nota{font-size:12.5px;color:var(--txt3);margin-top:10px}

details.hist{margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px}
details.hist summary{cursor:pointer;font-size:12.5px;color:var(--txt2);letter-spacing:.04em}
details.hist .l{font-size:13.5px;padding:7px 0;border-top:1px solid var(--line);margin-top:8px}
details.hist .l b{color:var(--lil)}

/* resultado */
.notao{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.notao .num{font-family:var(--disp);font-size:64px;line-height:1;color:var(--branco)}
.notao .num small{font-family:var(--sans);font-size:14px;color:var(--txt3);display:block;letter-spacing:.14em}
.rub{display:grid;gap:10px;margin:18px 0}
.rub .r{display:grid;grid-template-columns:210px 1fr 44px;gap:12px;align-items:center;font-size:13.5px}
@media(max-width:600px){.rub .r{grid-template-columns:1fr 44px}.rub .r .bar{grid-column:1/-1}}
.rub .r b{font-variant-numeric:tabular-nums;text-align:right}
.blocos{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:20px}
.bl{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px}
.bl h4{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--txt3);margin:0 0 9px}
.bl ul{margin:0;padding-left:17px;font-size:13.5px}
.bl li{margin-bottom:6px}
.ouro{background:linear-gradient(150deg,rgba(108,59,212,.22),rgba(139,92,246,.09));border-color:var(--line2)}
.ouro p{font-size:14.5px;font-style:italic;color:var(--branco);margin:0}
.erro{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.4);color:#FFD7D7;border-radius:10px;padding:12px 15px;font-size:13.5px;margin:14px 0}

/* ---------- acréscimos do motor ---------- */
.conx{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.conx i{width:7px;height:7px;border-radius:50%;background:var(--bad);display:inline-block}
.conx.on i{background:var(--ok)}
.conx.esperando i{background:var(--warn)}
.fila{font-size:12.5px;color:var(--warn)}
.uso{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-top:14px}
.uso .u{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.uso .u b{display:block;font-family:var(--disp);font-size:16px;color:var(--branco)}
.uso .u small{color:var(--txt3);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- tela de análise ---------- */
.prog{height:7px;border-radius:20px;background:var(--panel2);overflow:hidden;margin-bottom:20px}
.prog i{display:block;height:100%;width:5%;border-radius:20px;
        background:linear-gradient(90deg,var(--roxo),var(--roxo2));transition:width .45s ease}
.passos{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.passos li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--txt3)}
.passos li .b{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--line2);flex:0 0 auto;
              margin-top:3px;display:grid;place-items:center;font-size:10px;color:var(--txt3)}
.passos li.fazendo{color:var(--txt)}
.passos li.fazendo .b{border-color:var(--roxo2);border-right-color:transparent;animation:gira 1s linear infinite}
.passos li.feito{color:var(--txt2)}
.passos li.feito .b{border-color:var(--ok);background:var(--ok);color:#0B2016}
@keyframes gira{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.passos li.fazendo .b{animation:none}}

/* ---------- jogada a jogada ---------- */
.jogadas{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.jogadas h4{margin:0 0 12px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--txt3)}
.jogadas ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.jogadas li{display:grid;grid-template-columns:26px 1fr auto;gap:11px;align-items:center;
            background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.jogadas .nn{font-variant-numeric:tabular-nums;color:var(--txt3);font-size:12.5px;text-align:right}
.jogadas .tt{font-size:14px}
.jogadas .tt small{display:block;color:var(--txt3);font-size:12.5px}
.jogadas .st{font-size:11.5px;padding:2px 9px;border-radius:20px;white-space:nowrap}
.jogadas .st.ok{background:rgba(74,222,128,.14);color:var(--ok)}
.jogadas .st.no{background:rgba(133,119,168,.16);color:var(--txt3)}
.jogadas .st.er{background:rgba(248,113,113,.14);color:var(--bad)}
