:root{
  --bg:#080810;
  --bg2:#0f0f1a;
  --bg3:#171726;
  --bg4:#1e1e32;
  --red:#e8003d;
  --cyan:#00f0ff;
  --magenta:#c850c0;
  --purple:#7b2ff7;
  --white:#fff;
  --off:#c8c8e0;
  --muted:#5a5a80;
  --font:'Outfit',sans-serif;
  --s:clamp(13px,0.85vw,17px);
  --pad:clamp(16px,1.2vw,24px);
  --gap:clamp(14px,1.1vw,22px);
  --sidebar:clamp(280px,22vw,400px);
  --glow-cyan:0 0 24px rgba(0,240,255,.1);
  --glow-magenta:0 0 24px rgba(200,80,192,.1);
  --r:20px;
  --r-lg:24px;
  --r-sm:14px;
  --r-xs:10px;
  --r-pill:50px
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;padding:0;background:var(--bg);color:var(--off);font-family:var(--font);font-size:var(--s);min-height:100vh;background-image:radial-gradient(ellipse at 30% 0%,rgba(123,47,247,.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 100%,rgba(0,240,255,.04) 0%,transparent 50%)}

/* ═══ MOUSE GLOW ═══ */
#mouseGlowCanvas{position:fixed;inset:0;z-index:99999;pointer-events:none;}
#telaEntrada,#telaLobby{background:transparent!important;z-index:9999;}

/* ═══ TELA ENTRADA ═══ */
#telaEntrada{position:fixed;inset:0;z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:center;padding:var(--pad);overflow-y:auto;background:var(--bg)}
.e-logo{font-family:var(--font);font-weight:900;font-size:clamp(2.6em,8vw,5em);color:#fff;letter-spacing:1px;margin:0 0 2px}
.e-logo em{font-style:italic;color:var(--cyan)}
.e-sub{color:var(--muted);font-family:var(--font);font-size:.78em;letter-spacing:4px;text-transform:uppercase;margin-bottom:clamp(24px,3vw,44px);font-weight:500}
.e-card{background:rgba(10,10,18,0.45);backdrop-filter:blur(48px) saturate(1.2);-webkit-backdrop-filter:blur(48px) saturate(1.2);width:100%;max-width:clamp(400px,34vw,520px);border:1px solid rgba(255,255,255,.07);padding:clamp(28px,2.8vw,40px);margin-bottom:0;border-radius:var(--r-lg);box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03)}
.e-card h3{font-family:var(--font);font-weight:600;font-size:.78em;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:0 0 clamp(8px,1vw,14px);padding:0;border:none}
.e-label{font-family:var(--font);font-weight:600;font-size:clamp(9px,.62em,11px);letter-spacing:2px;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:6px}
.e-inp{width:100%;padding:clamp(14px,1.1em,18px) clamp(16px,1.2em,20px);margin-bottom:16px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.06);font-size:1em;font-family:var(--font);border-radius:var(--r-sm);transition:border-color .15s,background .15s}
.e-inp:focus{outline:none;border-color:rgba(0,240,255,.3);box-shadow:0 0 0 4px rgba(0,240,255,.06);background:rgba(0,240,255,.02)}
.e-inp::placeholder{color:rgba(255,255,255,.2);text-transform:uppercase;letter-spacing:2px;font-weight:500;font-size:.85em}
.e-inp.codigo{font-size:2em;font-family:var(--font);font-weight:800;letter-spacing:10px;text-align:center;text-transform:uppercase}
.e-sel{width:100%;padding:clamp(14px,1.1em,18px) clamp(16px,1.2em,20px);margin-bottom:16px;background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.06);font-size:.95em;font-family:var(--font);border-radius:var(--r-sm);-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300f0ff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.e-btn{width:100%;padding:clamp(16px,1.2em,20px);font-family:var(--font);font-weight:700;font-size:.9em;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;margin-bottom:10px;border-radius:var(--r-pill);transition:background .15s,border-color .15s}
.btn-r{background:linear-gradient(135deg,var(--cyan),#00d4d8);color:#000;box-shadow:0 4px 24px rgba(0,240,255,.25)}
.btn-r:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,240,255,.35)}
.btn-c{background:rgba(255,255,255,.03);color:var(--off);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-pill)}
.btn-c:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12)}
.e-ou{color:var(--muted);font-size:.72em;letter-spacing:3px;text-transform:uppercase;text-align:center;margin:6px 0 14px;font-family:var(--font);font-weight:500}
.e-erro{color:#ff4466;font-family:var(--font);font-size:.85em;text-align:center;margin-top:6px;min-height:18px}

/* ═══ TELA LOBBY ═══ */
#telaLobby{position:fixed;inset:0;z-index:9998;display:none;flex-direction:column;align-items:center;padding:clamp(40px,5vh,80px) var(--pad) var(--pad);overflow-y:auto;background:var(--bg)}
.l-codigo-box{background:rgba(0,240,255,.03);backdrop-filter:blur(48px);-webkit-backdrop-filter:blur(48px);border:1px solid rgba(0,240,255,.08);padding:clamp(16px,1.6vw,26px) clamp(24px,2.8vw,44px);text-align:center;margin-bottom:24px;border-radius:var(--r-lg);box-shadow:0 4px 24px rgba(0,240,255,.04)}
.l-codigo-label{color:var(--muted);font-size:.65em;letter-spacing:3px;text-transform:uppercase;font-family:var(--font);font-weight:600;margin-bottom:4px}
.l-codigo{font-family:var(--font);font-size:clamp(2.4em,4.5vw,4em);font-weight:900;color:var(--cyan);letter-spacing:clamp(6px,1vw,14px)}
.l-hint{color:var(--muted);font-size:.68em;letter-spacing:2px;text-transform:uppercase;font-family:var(--font);margin-top:2px}
.l-card{background:rgba(10,10,18,0.40);backdrop-filter:blur(48px) saturate(1.2);-webkit-backdrop-filter:blur(48px) saturate(1.2);width:100%;max-width:clamp(500px,50vw,720px);border:1px solid rgba(255,255,255,.06);padding:clamp(22px,2.2vw,34px);margin-bottom:14px;border-radius:var(--r-lg);box-shadow:0 8px 32px rgba(0,0,0,.4)}
.l-card h3{font-family:var(--font);font-weight:700;font-size:.85em;letter-spacing:3px;text-transform:uppercase;color:var(--off);margin:0 0 16px;padding-bottom:0;border:none;display:flex;align-items:center;gap:8px}
.l-jogs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;min-height:44px;margin-bottom:14px}
.l-jog-row{display:flex;align-items:center;gap:10px;padding:clamp(12px,.9em,16px) clamp(14px,1.1em,20px);background:rgba(255,255,255,.03);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:var(--r-sm);animation:fadeIn .3s ease;transition:background .15s,border-color .15s;border:1px solid rgba(255,255,255,.06)}
.l-jog-row:hover{background:rgba(255,255,255,.05)}
.l-jog-badge{font-family:var(--font);font-weight:600;font-size:.68em;letter-spacing:1px;padding:3px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);white-space:nowrap;border-radius:var(--r-pill);color:var(--off)}
.l-jog-nome{font-family:var(--font);font-weight:700;font-size:.95em;color:#fff}
.l-jog-host{font-size:.65em;letter-spacing:1px;text-transform:uppercase;color:var(--magenta);font-family:var(--font);margin-left:auto;font-weight:600}
.l-status{color:var(--muted);font-size:.78em;letter-spacing:1px;text-transform:uppercase;text-align:center;font-family:var(--font);margin-bottom:14px;font-weight:500}
.pulse{animation:pulseAnim 1.4s ease-in-out infinite}
@keyframes pulseAnim{0%,100%{opacity:.3}50%{opacity:1}}

/* ═══ TELA JOGO ═══ */
#telaJogo{display:none;padding:var(--pad);max-width:1800px;margin:0 auto;position:relative;z-index:2}
.jogo-grid{display:flex;gap:var(--gap);align-items:flex-start}
.col-esq{width:var(--sidebar);flex-shrink:0;display:flex;flex-direction:column;gap:var(--gap)}
.col-dir{flex-grow:1;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:var(--gap)}
.box{background:rgba(10,10,18,0.40);backdrop-filter:blur(48px) saturate(1.2);-webkit-backdrop-filter:blur(48px) saturate(1.2);border:1px solid rgba(255,255,255,.06);padding:var(--pad);border-radius:var(--r);box-shadow:0 8px 32px rgba(0,0,0,.45)}
.box.cyan{
  background:rgba(10,10,18,0.40);
  backdrop-filter:blur(48px) saturate(1.2);
  -webkit-backdrop-filter:blur(48px) saturate(1.2);
  border:1px solid rgba(0,240,255,.07);
  box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 14px rgba(0,240,255,.04)
}
.box-title{font-family:var(--font);font-weight:700;font-size:.85em;letter-spacing:3px;text-transform:uppercase;margin:0 0 clamp(10px,1vw,16px);padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.05)}
#temaHud{display:none;justify-content:center;align-items:center;padding:10px 16px;margin-bottom:var(--gap)}
.tema-badge{display:inline-flex;align-items:stretch;border:1px solid rgba(0,240,255,.15);box-shadow:var(--glow-cyan);overflow:hidden;border-radius:var(--r-sm)}
.tema-badge-nome{font-family:var(--font);font-weight:700;font-size:clamp(.82em,1.2vw,1.1em);letter-spacing:3px;text-transform:uppercase;color:#fff;background:var(--bg3);padding:clamp(8px,.6vw,12px) clamp(16px,1.6vw,26px);display:flex;align-items:center}
.tema-badge-num{font-family:var(--font);font-weight:800;font-size:clamp(.82em,1.2vw,1.1em);letter-spacing:2px;color:#000;background:linear-gradient(135deg,var(--cyan),#00c8d4);padding:clamp(8px,.6vw,12px) clamp(14px,1.4vw,22px);display:flex;align-items:center}
#vezBox{border-color:rgba(0,240,255,.08)}
.vez-nome{font-family:var(--font);font-weight:800;font-size:clamp(1.2em,1.8vw,1.8em);letter-spacing:1px;text-transform:uppercase}
.vez-label{font-size:.7em;letter-spacing:2px;text-transform:uppercase;color:var(--muted);font-family:var(--font);margin-bottom:4px;font-weight:500}

/* Host controls + Placar */
#hostControles{
  background:rgba(10,10,18,0.40)!important;
  backdrop-filter:blur(48px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(48px) saturate(1.2)!important;
  border:1px solid rgba(200,80,192,.06)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.4)!important
}
#campoPalpite{display:flex;gap:8px;margin-top:12px}
#campoPalpite input{
  flex:1;padding:clamp(12px,1em,16px) clamp(14px,1.1em,18px);
  background:rgba(255,255,255,.04);color:#fff;
  border:1px solid rgba(255,255,255,.06);
  font-size:.9em;font-family:var(--font);
  border-radius:var(--r);transition:background .15s,border-color .15s
}
#campoPalpite input:focus{outline:none;border-color:rgba(0,240,255,.2);box-shadow:0 0 0 3px rgba(0,240,255,.04)}
#campoPalpite input:disabled{opacity:.25;cursor:not-allowed}
#campoPalpite input::placeholder{color:rgba(255,255,255,.15);font-weight:500;font-size:.9em}
#campoPalpite button{
  padding:clamp(12px,1em,16px) clamp(16px,1.4em,22px);
  background:linear-gradient(135deg,var(--cyan),#00c8d4);
  color:#000;border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.95em;
  border-radius:var(--r);transition:background .15s,border-color .15s;
  flex-shrink:0
}
#campoPalpite button:hover{box-shadow:0 0 16px rgba(0,240,255,.2)}
#campoPalpite button:disabled{opacity:.2;cursor:not-allowed}
#inputAdivNum{width:100%;padding:clamp(14px,1.1em,18px);background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.06);font-size:1em;font-family:var(--font);margin-bottom:8px;border-radius:var(--r-sm)}
#inputAdivNum:focus{outline:none;border-color:rgba(0,240,255,.3)}
#inputAdivNum:disabled{opacity:.3}
.placar-item{display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,.8em,16px) clamp(14px,1.1em,20px);border:1px solid rgba(255,255,255,.05);border-left:3px solid;background:rgba(255,255,255,.03);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border-radius:var(--r-xs);margin-bottom:clamp(6px,.5em,10px);transition:opacity .2s,border-color .2s}
.placar-item:hover{background:rgba(255,255,255,.04)}
.placar-nome{font-family:var(--font);font-weight:700;font-size:1em;letter-spacing:1px;text-transform:uppercase}
.placar-pts{font-family:var(--font);font-weight:800;font-size:1em;background:rgba(0,240,255,.05);padding:4px 14px;border:1px solid rgba(0,240,255,.08);border-radius:var(--r-pill);color:var(--cyan)}
#areaResultado{background:var(--bg2);border:1px solid rgba(255,255,255,.05);padding:clamp(22px,2vw,34px);min-height:clamp(250px,30vh,450px);display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden}
.colunas{display:flex;gap:var(--gap);width:100%;flex-wrap:nowrap;overflow-x:auto}
.coluna{flex:1;min-width:clamp(110px,10vw,160px);background:rgba(255,255,255,.02);border-top:3px solid;padding:clamp(10px,1em,16px);border-radius:var(--r-xs)}
.col-tit{font-family:var(--font);font-weight:700;font-size:1em;letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.05)}
.col-lista{display:flex;flex-direction:column;gap:5px;max-height:clamp(300px,40vh,500px);overflow-y:auto}
.col-item{background:rgba(255,255,255,.03);padding:clamp(6px,.5em,10px) clamp(8px,.7em,14px);font-size:.88em;display:flex;justify-content:space-between;align-items:center;border-radius:8px}
.col-pos{font-family:var(--font);font-size:.8em;opacity:.5;margin-right:6px}
.col-pts{font-family:var(--font);font-weight:700;font-size:.9em}
.tabela-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(3px,.4vw,6px);width:100%;max-width:100%;overflow:hidden}
.tabela-cell{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:clamp(10px,.8em,14px);text-align:center;padding:clamp(6px,.5vw,10px);min-height:clamp(48px,5.5vw,80px);line-height:1.3;word-break:break-word;border-radius:10px}
.adiv-item{display:flex;justify-content:space-between;align-items:center;background:rgba(255,255,255,.03);padding:clamp(10px,.9em,16px) clamp(12px,1em,20px);margin-bottom:8px;border-left:3px solid;border-radius:var(--r-xs)}
.live-chutes{display:flex;flex-direction:column;gap:8px;width:100%;max-width:clamp(360px,35vw,500px);margin:16px auto 0}
.live-item{display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,.8em,14px) clamp(14px,1.2em,22px);border-left:3px solid;background:rgba(255,255,255,.03);border-radius:var(--r-xs)}
.live-nome{font-family:var(--font);font-weight:700;font-size:1em;text-transform:uppercase;letter-spacing:1px}
.live-val{font-family:var(--font);font-weight:800;font-size:1.4em;color:var(--cyan);letter-spacing:2px}
.timer-display{font-family:var(--font);font-weight:900;font-size:clamp(1.6em,2.5vw,2.5em);color:var(--cyan)}
.timer-display.urgente{color:#ff4466;animation:blink .5s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
#minhaVezBanner{position:fixed;top:0;left:0;right:0;z-index:8000;display:none;background:linear-gradient(135deg,var(--cyan),#00c8d4);color:#000;font-family:var(--font);font-weight:800;font-size:clamp(.85em,1.1vw,1.2em);letter-spacing:3px;text-transform:uppercase;text-align:center;padding:clamp(10px,.8vw,16px);box-shadow:0 4px 30px rgba(0,240,255,.3)}
#euSouBar{display:none!important}
.sair-btn{background:rgba(255,68,102,.04);border:1px solid rgba(255,68,102,.12);color:rgba(255,255,255,.4);font-family:var(--font);font-weight:600;font-size:.8em;letter-spacing:2px;text-transform:uppercase;padding:8px 18px;cursor:pointer;white-space:nowrap;border-radius:var(--r-pill);transition:background .15s,border-color .15s;flex-shrink:0}
.sair-btn:hover{background:rgba(255,68,102,.08);border-color:rgba(255,68,102,.25);color:#ff4466}
#modalSair{position:fixed;inset:0;z-index:99000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.65);backdrop-filter:blur(4px)}
.modal-box{background:var(--bg2);border:1px solid rgba(255,255,255,.06);padding:clamp(28px,2.8vw,44px);max-width:clamp(340px,30vw,440px);width:90%;text-align:center;border-radius:var(--r-lg);box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-box h3{font-family:var(--font);font-weight:800;font-size:1.15em;letter-spacing:2px;text-transform:uppercase;color:#fff;margin:0 0 10px}
.modal-box p{color:var(--muted);font-size:.88em;margin:0 0 clamp(16px,1.8vw,28px);line-height:1.6}
.modal-btns{display:flex;gap:10px}
.modal-btns button{flex:1;padding:clamp(14px,1.1em,18px);font-family:var(--font);font-weight:700;font-size:.88em;letter-spacing:1px;text-transform:uppercase;border:none;cursor:pointer;border-radius:var(--r-sm);transition:background .15s,border-color .15s}
.modal-btn-cancelar{background:rgba(255,255,255,.04);color:var(--muted);border:1px solid rgba(255,255,255,.06)}
.modal-btn-cancelar:hover{color:#fff;border-color:rgba(255,255,255,.15)}
.modal-btn-sair{background:linear-gradient(135deg,#ff4466,#e8003d);color:#fff}
.modal-btn-sair:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(232,0,61,.25)}
.btn{width:100%;padding:clamp(14px,1.1em,18px);font-family:var(--font);font-weight:700;font-size:.9em;letter-spacing:2px;text-transform:uppercase;border:none;cursor:pointer;margin-bottom:8px;border-radius:var(--r-sm);transition:background .15s,border-color .15s}
.btn-vermelho{background:linear-gradient(135deg,var(--magenta),var(--purple));color:#fff;box-shadow:0 4px 16px rgba(200,80,192,.15)}
.btn-vermelho:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(200,80,192,.25)}
.btn-cyan{background:rgba(0,240,255,.04);color:var(--cyan);border:1px solid rgba(0,240,255,.1)}
.btn-cyan:hover{background:rgba(0,240,255,.08)}
.btn-amarelo{background:rgba(255,200,0,.04);color:#ffc800;border:1px solid rgba(255,200,0,.12)}
.btn-amarelo:hover{border-color:rgba(255,200,0,.25)}
select.e-sel:focus{outline:none;border-color:rgba(0,240,255,.25);box-shadow:0 0 0 4px rgba(0,240,255,.05)}
.dv{color:#00e676;font-family:var(--font);font-weight:700;font-size:1.1em;text-transform:uppercase}
.da{color:#ffc800;font-weight:700;font-family:var(--font)}
.dr{color:#ff4466;font-weight:700;font-family:var(--font)}
#adivCountdown{font-family:var(--font);font-weight:900;font-size:clamp(2.5em,4vw,4em);color:var(--cyan);text-align:center;animation:countPulse .8s ease-in-out infinite;letter-spacing:4px}
@keyframes countPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#adivFaseLabel{font-family:var(--font);font-weight:700;font-size:.78em;letter-spacing:3px;text-transform:uppercase;text-align:center;margin-bottom:8px;padding:5px 14px;display:inline-block}
.adiv-jogador-status{display:flex;align-items:center;gap:10px;padding:clamp(8px,.7em,14px) clamp(12px,1em,18px);background:rgba(255,255,255,.02);border-left:3px solid;margin-bottom:clamp(5px,.4em,8px);border-radius:var(--r-xs);font-family:var(--font);font-size:1em}
.adiv-status-icon{font-size:1.2em;min-width:24px;text-align:center}
.adiv-status-nome{font-weight:700;text-transform:uppercase;flex:1}
.adiv-status-badge{font-size:.68em;letter-spacing:1px;padding:3px 10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);white-space:nowrap;border-radius:var(--r-pill)}
#meuPalpiteAdiv{width:100%;padding:clamp(14px,1.1em,20px);background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(0,240,255,.15);font-size:clamp(1.3em,1.8vw,1.8em);font-family:var(--font);font-weight:800;letter-spacing:4px;text-align:center;border-radius:var(--r-sm);margin-bottom:10px}
#meuPalpiteAdiv:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,240,255,.08)}
#meuPalpiteAdiv:disabled{opacity:.3}
#btnConfirmarAdiv{width:100%;padding:clamp(14px,1.1em,18px);background:linear-gradient(135deg,var(--cyan),#00c8d4);color:#000;border:none;cursor:pointer;font-family:var(--font);font-weight:700;font-size:1em;letter-spacing:3px;text-transform:uppercase;border-radius:var(--r-sm);transition:background .15s,border-color .15s}
#btnConfirmarAdiv:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,240,255,.25)}
#btnConfirmarAdiv:disabled{opacity:.25;cursor:not-allowed}
.confirmado-badge{width:100%;padding:clamp(14px,1.1em,18px);background:rgba(81,207,102,.05);border:1px solid rgba(81,207,102,.15);color:#51cf66;font-family:var(--font);font-weight:700;font-size:.95em;letter-spacing:2px;text-transform:uppercase;text-align:center;border-radius:var(--r-sm)}
#secHost{animation:fadeIn .25s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,240,255,.15);border-radius:4px}

/* ═══ VIP styles — animated color-cycling glows ═══ */

/* Shared VIP base */
.placar-item[class*="vip-item-"]{border-left-width:4px!important;position:relative}
.l-jog-row[class*="vip-row-"]{border-left-width:4px!important;position:relative}

/* VIP 1 — ELITE (Cyan↔Blue) */
.vip-name-1{background:linear-gradient(135deg,#4dabf7,#00f0ff,#4dabf7);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName1 2.5s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName1{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(0,240,255,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(77,171,247,.8))}}
.placar-item.vip-item-1{border-left:4px solid var(--cyan)!important;background:linear-gradient(135deg,rgba(0,240,255,.1),rgba(0,180,220,.04),rgba(0,0,0,.4))!important;animation:vipBox1 3s ease-in-out infinite!important}
.l-jog-row.vip-row-1{border-left:4px solid var(--cyan)!important;background:rgba(0,240,255,.06)!important;animation:vipBox1 3s ease-in-out infinite}
@keyframes vipBox1{0%,100%{border-color:rgba(0,240,255,.35);box-shadow:0 0 18px rgba(0,240,255,.15),inset 0 0 25px rgba(0,240,255,.04)}50%{border-color:rgba(77,171,247,.4);box-shadow:0 0 22px rgba(77,171,247,.2),inset 0 0 30px rgba(77,171,247,.06)}}

/* VIP 2 — LENDA (Gold→Orange→Red) */
.vip-name-2{background:linear-gradient(135deg,#ffd43b,#ff922b,#ff6b6b,#ffd43b);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName2 2.5s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName2{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(255,212,59,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(255,107,107,.8))}}
.placar-item.vip-item-2{border-left:4px solid #ff922b!important;background:linear-gradient(135deg,rgba(255,146,43,.1),rgba(255,107,107,.04),rgba(0,0,0,.4))!important;animation:vipBox2 3s ease-in-out infinite!important}
.l-jog-row.vip-row-2{border-left:4px solid #ff922b!important;background:rgba(255,146,43,.06)!important;animation:vipBox2 3s ease-in-out infinite}
@keyframes vipBox2{0%,100%{border-color:rgba(255,212,59,.35);box-shadow:0 0 18px rgba(255,212,59,.15),inset 0 0 25px rgba(255,212,59,.04)}33%{border-color:rgba(255,146,43,.4);box-shadow:0 0 22px rgba(255,146,43,.2),inset 0 0 30px rgba(255,146,43,.06)}66%{border-color:rgba(255,107,107,.35);box-shadow:0 0 20px rgba(255,107,107,.18),inset 0 0 28px rgba(255,107,107,.05)}}

/* VIP 3 — GOAT (Magenta→Pink→Rose) */
.vip-name-3{background:linear-gradient(135deg,#cc5de8,#e599f7,#f06595,#cc5de8);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName3 2.5s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName3{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(204,93,232,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(240,101,149,.8))}}
.placar-item.vip-item-3{border-left:4px solid var(--magenta)!important;background:linear-gradient(135deg,rgba(204,93,232,.1),rgba(240,101,149,.04),rgba(0,0,0,.4))!important;animation:vipBox3 3s ease-in-out infinite!important}
.l-jog-row.vip-row-3{border-left:4px solid var(--magenta)!important;background:rgba(204,93,232,.06)!important;animation:vipBox3 3s ease-in-out infinite}
@keyframes vipBox3{0%,100%{border-color:rgba(204,93,232,.35);box-shadow:0 0 18px rgba(204,93,232,.15),inset 0 0 25px rgba(204,93,232,.04)}33%{border-color:rgba(229,153,247,.4);box-shadow:0 0 22px rgba(229,153,247,.2),inset 0 0 30px rgba(229,153,247,.06)}66%{border-color:rgba(240,101,149,.35);box-shadow:0 0 20px rgba(240,101,149,.18),inset 0 0 28px rgba(240,101,149,.05)}}

/* VIP 4 — DEEP (Indigo↔Blue) */
.vip-name-4{background:linear-gradient(135deg,#6c8fff,#4dabf7,#6c8fff);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName4 3s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName4{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(108,143,255,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(77,171,247,.8))}}
.placar-item.vip-item-4{border-left:4px solid #4dabf7!important;background:linear-gradient(135deg,rgba(77,171,247,.1),rgba(108,143,255,.04),rgba(0,0,0,.4))!important;animation:vipBox4 3s ease-in-out infinite!important}
.l-jog-row.vip-row-4{border-left:4px solid #4dabf7!important;background:rgba(77,171,247,.06)!important;animation:vipBox4 3s ease-in-out infinite}
@keyframes vipBox4{0%,100%{border-color:rgba(108,143,255,.35);box-shadow:0 0 18px rgba(108,143,255,.15),inset 0 0 25px rgba(108,143,255,.04)}50%{border-color:rgba(77,171,247,.4);box-shadow:0 0 22px rgba(77,171,247,.2),inset 0 0 30px rgba(77,171,247,.06)}}

/* VIP 5 — FOREST (Green↔Mint) */
.vip-name-5{background:linear-gradient(135deg,#51cf66,#69db7c,#51cf66);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName5 3s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName5{0%,100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(81,207,102,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(105,219,124,.8))}}
.placar-item.vip-item-5{border-left:4px solid #51cf66!important;background:linear-gradient(135deg,rgba(81,207,102,.1),rgba(105,219,124,.04),rgba(0,0,0,.4))!important;animation:vipBox5 3s ease-in-out infinite!important}
.l-jog-row.vip-row-5{border-left:4px solid #51cf66!important;background:rgba(81,207,102,.06)!important;animation:vipBox5 3s ease-in-out infinite}
@keyframes vipBox5{0%,100%{border-color:rgba(81,207,102,.35);box-shadow:0 0 18px rgba(81,207,102,.15),inset 0 0 25px rgba(81,207,102,.04)}50%{border-color:rgba(105,219,124,.4);box-shadow:0 0 22px rgba(105,219,124,.2),inset 0 0 30px rgba(105,219,124,.06)}}

/* VIP 6 — INFERNO (Orange→Gold→Magenta→Purple) */
.vip-name-6{background:linear-gradient(135deg,#ff6b35,#f7931e,#c850c0,#7b2ff7);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName6 3s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName6{0%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(255,107,53,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(123,47,247,.7))}100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(255,107,53,.7))}}
.placar-item.vip-item-6{border-left:4px solid #ff6b35!important;background:linear-gradient(135deg,rgba(255,107,53,.1),rgba(200,80,192,.05),rgba(0,0,0,.4))!important;animation:vipBox6 4s ease-in-out infinite!important}
.l-jog-row.vip-row-6{border-left:4px solid #ff6b35!important;background:rgba(255,107,53,.06)!important;animation:vipBox6 4s ease-in-out infinite}
@keyframes vipBox6{0%,100%{border-color:rgba(255,107,53,.4);box-shadow:0 0 20px rgba(255,107,53,.18),inset 0 0 25px rgba(255,107,53,.05)}25%{border-color:rgba(247,147,30,.4);box-shadow:0 0 22px rgba(247,147,30,.2),inset 0 0 28px rgba(247,147,30,.06)}50%{border-color:rgba(200,80,192,.4);box-shadow:0 0 22px rgba(200,80,192,.2),inset 0 0 28px rgba(200,80,192,.06)}75%{border-color:rgba(123,47,247,.35);box-shadow:0 0 20px rgba(123,47,247,.18),inset 0 0 25px rgba(123,47,247,.05)}}

/* VIP 7 — COSMOS (Cyan→Purple→Red→Orange) */
.vip-name-7{background:linear-gradient(135deg,#00f0ff,#7b2ff7,#f72f6e,#ff922b);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName7 3.5s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName7{0%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(0,240,255,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(247,47,110,.7))}100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(0,240,255,.7))}}
.placar-item.vip-item-7{border-left:4px solid #7b2ff7!important;background:linear-gradient(135deg,rgba(123,47,247,.1),rgba(0,240,255,.04),rgba(0,0,0,.4))!important;animation:vipBox7 4.5s ease-in-out infinite!important}
.l-jog-row.vip-row-7{border-left:4px solid #7b2ff7!important;background:rgba(123,47,247,.06)!important;animation:vipBox7 4.5s ease-in-out infinite}
@keyframes vipBox7{0%,100%{border-color:rgba(0,240,255,.4);box-shadow:0 0 22px rgba(0,240,255,.2),inset 0 0 28px rgba(0,240,255,.05)}25%{border-color:rgba(123,47,247,.4);box-shadow:0 0 22px rgba(123,47,247,.2),inset 0 0 28px rgba(123,47,247,.06)}50%{border-color:rgba(247,47,110,.4);box-shadow:0 0 22px rgba(247,47,110,.2),inset 0 0 28px rgba(247,47,110,.06)}75%{border-color:rgba(255,146,43,.35);box-shadow:0 0 20px rgba(255,146,43,.18),inset 0 0 25px rgba(255,146,43,.05)}}

/* VIP 8 — EMBER (Red→Orange→Gold) */
.vip-name-8{background:linear-gradient(135deg,#f72f6e,#ff6b35,#ffd43b,#f72f6e);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName8 2.8s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName8{0%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(247,47,110,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(255,212,59,.7))}100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(247,47,110,.7))}}
.placar-item.vip-item-8{border-left:4px solid #f72f6e!important;background:linear-gradient(135deg,rgba(247,47,110,.1),rgba(255,107,53,.05),rgba(0,0,0,.4))!important;animation:vipBox8 3.5s ease-in-out infinite!important}
.l-jog-row.vip-row-8{border-left:4px solid #f72f6e!important;background:rgba(247,47,110,.06)!important;animation:vipBox8 3.5s ease-in-out infinite}
@keyframes vipBox8{0%,100%{border-color:rgba(247,47,110,.4);box-shadow:0 0 20px rgba(247,47,110,.18),inset 0 0 25px rgba(247,47,110,.05)}33%{border-color:rgba(255,107,53,.4);box-shadow:0 0 22px rgba(255,107,53,.2),inset 0 0 28px rgba(255,107,53,.06)}66%{border-color:rgba(255,212,59,.4);box-shadow:0 0 22px rgba(255,212,59,.2),inset 0 0 28px rgba(255,212,59,.06)}}

/* VIP 9 — AURORA (Green→Cyan→Blue→Purple) */
.vip-name-9{background:linear-gradient(135deg,#51cf66,#00f0ff,#4dabf7,#7b2ff7);background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName9 4s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName9{0%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(81,207,102,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 16px rgba(123,47,247,.7))}100%{background-position:0% 50%;filter:drop-shadow(0 0 10px rgba(81,207,102,.7))}}
.placar-item.vip-item-9{border-left:4px solid #51cf66!important;background:linear-gradient(135deg,rgba(81,207,102,.1),rgba(0,240,255,.04),rgba(0,0,0,.4))!important;animation:vipBox9 5s ease-in-out infinite!important}
.l-jog-row.vip-row-9{border-left:4px solid #51cf66!important;background:rgba(81,207,102,.06)!important;animation:vipBox9 5s ease-in-out infinite}
@keyframes vipBox9{0%,100%{border-color:rgba(81,207,102,.4);box-shadow:0 0 20px rgba(81,207,102,.18),inset 0 0 25px rgba(81,207,102,.05)}25%{border-color:rgba(0,240,255,.4);box-shadow:0 0 22px rgba(0,240,255,.2),inset 0 0 28px rgba(0,240,255,.06)}50%{border-color:rgba(77,171,247,.4);box-shadow:0 0 22px rgba(77,171,247,.2),inset 0 0 28px rgba(77,171,247,.06)}75%{border-color:rgba(123,47,247,.35);box-shadow:0 0 20px rgba(123,47,247,.18),inset 0 0 25px rgba(123,47,247,.05)}}

/* VIP 10 — PRISMA (Gold→Green→Cyan→Magenta — rainbow) */
.vip-name-10{background:linear-gradient(135deg,#ffd43b,#51cf66,#00f0ff,#c850c0,#ffd43b);background-size:400% 400%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:vipName10 4s ease-in-out infinite;font-weight:900!important;font-size:1.05em!important}
@keyframes vipName10{0%{background-position:0% 50%;filter:drop-shadow(0 0 12px rgba(255,212,59,.7))}25%{filter:drop-shadow(0 0 14px rgba(81,207,102,.7))}50%{background-position:100% 50%;filter:drop-shadow(0 0 14px rgba(0,240,255,.7))}75%{filter:drop-shadow(0 0 14px rgba(200,80,192,.7))}100%{background-position:0% 50%;filter:drop-shadow(0 0 12px rgba(255,212,59,.7))}}
.placar-item.vip-item-10{border-left:4px solid #ffd43b!important;background:linear-gradient(135deg,rgba(255,212,59,.1),rgba(0,240,255,.04),rgba(200,80,192,.04),rgba(0,0,0,.4))!important;animation:vipBox10 5s ease-in-out infinite!important}
.l-jog-row.vip-row-10{border-left:4px solid #ffd43b!important;background:rgba(255,212,59,.06)!important;animation:vipBox10 5s ease-in-out infinite}
@keyframes vipBox10{0%,100%{border-color:rgba(255,212,59,.4);box-shadow:0 0 22px rgba(255,212,59,.2),inset 0 0 28px rgba(255,212,59,.05)}20%{border-color:rgba(81,207,102,.4);box-shadow:0 0 22px rgba(81,207,102,.2),inset 0 0 28px rgba(81,207,102,.06)}40%{border-color:rgba(0,240,255,.4);box-shadow:0 0 22px rgba(0,240,255,.2),inset 0 0 28px rgba(0,240,255,.06)}60%{border-color:rgba(200,80,192,.4);box-shadow:0 0 22px rgba(200,80,192,.2),inset 0 0 28px rgba(200,80,192,.06)}80%{border-color:rgba(255,212,59,.35);box-shadow:0 0 20px rgba(255,212,59,.18),inset 0 0 25px rgba(255,212,59,.05)}}

/* VIP tag badges */
.vip-tag{font-family:var(--font);font-weight:800;font-size:.55em;letter-spacing:2px;padding:2px 8px;border-radius:var(--r-pill);margin-left:6px;vertical-align:middle;text-transform:uppercase;display:inline-block}
.vip-tag-1{background:rgba(0,240,255,.15);color:#00f0ff;border:1px solid rgba(0,240,255,.3);text-shadow:0 0 6px rgba(0,240,255,.4)}
.vip-tag-2{background:rgba(255,146,43,.15);color:#ff922b;border:1px solid rgba(255,146,43,.3);text-shadow:0 0 6px rgba(255,146,43,.4)}
.vip-tag-3{background:rgba(204,93,232,.15);color:#cc5de8;border:1px solid rgba(204,93,232,.3);text-shadow:0 0 6px rgba(204,93,232,.4)}
.vip-tag-4{background:rgba(77,171,247,.15);color:#4dabf7;border:1px solid rgba(77,171,247,.3);text-shadow:0 0 6px rgba(77,171,247,.4)}
.vip-tag-5{background:rgba(81,207,102,.15);color:#51cf66;border:1px solid rgba(81,207,102,.3);text-shadow:0 0 6px rgba(81,207,102,.4)}
.vip-tag-6{background:rgba(255,107,53,.15);color:#ff6b35;border:1px solid rgba(255,107,53,.3);text-shadow:0 0 6px rgba(255,107,53,.4)}
.vip-tag-7{background:rgba(123,47,247,.15);color:#7b2ff7;border:1px solid rgba(123,47,247,.3);text-shadow:0 0 6px rgba(123,47,247,.4)}
.vip-tag-8{background:rgba(247,47,110,.15);color:#f72f6e;border:1px solid rgba(247,47,110,.3);text-shadow:0 0 6px rgba(247,47,110,.4)}
.vip-tag-9{background:rgba(81,207,102,.15);color:#51cf66;border:1px solid rgba(81,207,102,.3);text-shadow:0 0 6px rgba(81,207,102,.4)}
.vip-tag-10{background:rgba(255,212,59,.15);color:#ffd43b;border:1px solid rgba(255,212,59,.3);text-shadow:0 0 6px rgba(255,212,59,.4)}

/* Mode selector - THREE TABS */
.mode-tabs{display:flex;gap:0;margin-bottom:18px;border-radius:var(--r-sm);overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.mode-tab{flex:1;padding:14px 8px;background:rgba(255,255,255,.02);cursor:pointer;text-align:center;font-family:var(--font);font-weight:700;font-size:.75em;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:background .15s,border-color .15s;border:none}
.mode-tab:not(:last-child){border-right:1px solid rgba(255,255,255,.06)}
.mode-tab.active{background:rgba(0,240,255,.06);color:var(--cyan)}
.mode-tab:hover:not(.active){background:rgba(255,255,255,.04);color:var(--off)}
.mode-sub-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.mode-btn{padding:clamp(12px,1em,18px) 8px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);cursor:pointer;text-align:center;font-family:var(--font);font-weight:600;font-size:.82em;letter-spacing:1px;text-transform:uppercase;color:var(--muted);transition:background .15s,border-color .15s;border-radius:var(--r-sm)}
.mode-btn:hover{border-color:rgba(255,255,255,.1);color:var(--off)}
.mode-btn.active{border-color:rgba(0,240,255,.2);color:#fff;background:rgba(0,240,255,.04)}
.mode-btn.active.red{border-color:rgba(200,80,192,.2);background:rgba(200,80,192,.04)}
.mode-btn .mode-ico{font-size:1.4em;display:block;margin-bottom:3px}
.mode-btn .mode-sub{font-size:.58em;font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none;margin-top:2px}
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}

/* Lobby color picker */
.lobby-color-section{padding:14px 16px;border-top:1px solid rgba(255,255,255,.04);margin-top:8px}
.lobby-color-label{font-size:.62em;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;font-family:var(--font);font-weight:600}
.lobby-color-grid{display:flex;gap:6px;flex-wrap:wrap}

/* Lobby sair button */
.lobby-sair-btn{width:100%;padding:16px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);color:var(--muted);font-family:var(--font);font-weight:600;font-size:.82em;letter-spacing:3px;text-transform:uppercase;cursor:pointer;border-radius:var(--r-sm);transition:background .15s,border-color .15s;margin-top:10px}
.lobby-sair-btn:hover{border-color:rgba(255,68,102,.2);color:#ff4466;background:rgba(255,68,102,.03)}

*{-webkit-user-select:none!important;-moz-user-select:none!important;user-select:none!important}
input,textarea,select{-webkit-user-select:text!important;user-select:text!important}

/* Game screen title */
.game-title{font-family:var(--font);font-weight:900;font-size:clamp(1.2em,2vw,1.8em);color:var(--cyan);letter-spacing:1px;font-style:italic;text-transform:uppercase;margin-bottom:var(--gap)}

/* Timer HUD top bar */
#timerHudTop .timer-urgent{color:#ff4466!important;animation:blink .5s ease-in-out infinite}


/* GAME ON watermark */
.game-watermark{position:fixed;bottom:40px;right:-20px;font-family:var(--font);font-weight:900;font-size:clamp(6em,12vw,14em);color:rgba(255,255,255,.015);letter-spacing:-4px;text-transform:uppercase;pointer-events:none;z-index:0;user-select:none}

/* ═══ FLOATING TIMER PILL ═══ */
#timerHudTop{
  display:none;
  margin:0 0 var(--gap);
  position:relative;z-index:100;
  width:100%
}
#timerHudTop .timer-inner{
  display:flex;align-items:stretch;width:100%;
  background:rgba(10,10,18,0.40);
  backdrop-filter:blur(48px) saturate(1.2);-webkit-backdrop-filter:blur(48px) saturate(1.2);
  border:1px solid rgba(0,240,255,.07);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.4)
}
#timerHudTop .timer-section{
  padding:10px 16px;text-align:center;flex:1
}
#timerHudTop .timer-divider{
  width:1px;background:rgba(0,240,255,.06);margin:8px 0
}
#timerHudTop .timer-label{
  font-size:.46em;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:1px
}
#timerHudTop .timer-value{
  font-family:var(--font);font-weight:900;font-size:clamp(1.6em,2.8vw,2.6em);color:var(--cyan);letter-spacing:3px;
  line-height:1.1
}
#timerHudTop .timer-value.urgente{color:#ff4466;animation:blink .5s ease-in-out infinite}
#timerHudTop .timer-player{
  font-family:var(--font);font-weight:800;font-size:.9em;color:#fff;letter-spacing:1px
}
#timerHudTop .timer-label-magenta{color:var(--magenta)}
#timerHudTop .timer-icon{
  font-size:1.4em;display:flex;align-items:center;padding:0 12px 0 4px;color:var(--muted)
}

/* ═══ MOBILE FIXED GUESS BAR (BOTTOM) — only visible on mobile ═══ */
#guessBarFixed{
  position:fixed;bottom:0;left:0;right:0;z-index:7600;
  display:none;align-items:center;gap:8px;
  padding:10px clamp(12px,3vw,20px);
  padding-bottom:max(10px,env(safe-area-inset-bottom));
  background:rgba(10,10,18,.92);
  border-top:1px solid rgba(0,240,255,.06);
  border-radius:0
}
#guessBarFixed .guess-input{
  flex:1;padding:11px 14px;min-width:0;
  background:rgba(255,255,255,.04);color:#fff;
  border:1px solid rgba(255,255,255,.06);
  font-size:.88em;font-family:var(--font);
  border-radius:var(--r);transition:background .15s,border-color .15s
}
#guessBarFixed .guess-input:focus{
  outline:none;border-color:rgba(0,240,255,.2);
  box-shadow:0 0 0 3px rgba(0,240,255,.04)
}
#guessBarFixed .guess-input:disabled{opacity:.2;cursor:not-allowed}
#guessBarFixed .guess-input::placeholder{
  color:rgba(255,255,255,.12);letter-spacing:1px;font-weight:500;font-size:.85em
}
#guessBarFixed .guess-btn{
  padding:11px 18px;flex-shrink:0;
  background:linear-gradient(135deg,var(--cyan),#00c8d4);
  color:#000;border:none;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:.88em;
  border-radius:var(--r);transition:background .15s,border-color .15s;
  display:flex;align-items:center;gap:4px
}
#guessBarFixed .guess-btn:hover{box-shadow:0 0 14px rgba(0,240,255,.18)}
#guessBarFixed .guess-btn:disabled{opacity:.12;cursor:not-allowed}

/* Desktop: no fixed guess bar, no extra padding */
body.in-game #telaJogo{padding-bottom:12px!important}
/* Mobile: push euSouBar up when guess bar is visible */
/* Guess bar sits above euSouBar */
/* Mobile: guess bar sits above euSouBar */
body.in-game.guess-active #guessBarFixed{bottom:0}
body.in-game.guess-active #telaJogo{padding-bottom:56px!important}

/* ═══ QSE PROFILE CARDS ═══ */
.qse-cards-grid{display:flex;gap:var(--gap);justify-content:center;flex-wrap:wrap}
.qse-card{
  background:rgba(10,10,18,.9);
  border:1px solid rgba(255,255,255,.05);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:border-color .25s,box-shadow .25s,opacity .25s;
  position:relative;
  flex:0 1 340px;max-width:400px
}
.qse-card.active-vez{
  /* glow color set via inline style per player */
  animation:cardPulse 2s ease-in-out infinite
}
@keyframes cardPulse{0%,100%{opacity:1}50%{opacity:.92}}
.qse-card.active{
  border-color:rgba(0,240,255,.1);
  box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 20px rgba(0,240,255,.03)
}
.qse-card.active-magenta{
  border-color:rgba(200,80,192,.12);
  box-shadow:0 8px 32px rgba(0,0,0,.35),0 0 20px rgba(200,80,192,.03)
}
.qse-card.acertou{opacity:.35;filter:grayscale(.3);border-color:rgba(81,207,102,.08)}
.qse-card-header{
  padding:12px 16px;display:flex;align-items:center;justify-content:space-between
}
.qse-card-label{
  font-size:.52em;letter-spacing:3px;text-transform:uppercase;color:var(--muted);font-weight:600
}
.qse-card-status{
  font-size:.48em;letter-spacing:2px;text-transform:uppercase;font-weight:700;
  padding:4px 10px;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;gap:4px
}
.qse-card-status{display:none}
.qse-card-name{
  font-family:var(--font);font-weight:800;font-size:1.05em;color:#fff;letter-spacing:1px
}
.qse-card-body{
  padding:24px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:120px;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.01) 0%,transparent 70%)
}
.qse-card-mystery{
  width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.02);
  border:2px solid rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
  font-size:2em;color:var(--cyan);opacity:.4;margin-bottom:12px;
  box-shadow:inset 0 0 20px rgba(0,0,0,.25)
}
.qse-card-persona{
  font-family:var(--font);font-weight:900;font-size:1.4em;color:#fff;letter-spacing:1px;margin-bottom:4px
}
.qse-card-question{
  font-family:var(--font);font-weight:400;font-size:.82em;color:var(--muted);font-style:italic;letter-spacing:1px
}
.qse-card-links{
  padding:10px 12px;display:flex;gap:5px;border-top:1px solid rgba(255,255,255,.03)
}
.qse-card-link{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;background:rgba(255,255,255,.015);
  border:1px solid rgba(255,255,255,.03);border-radius:var(--r-sm);
  color:rgba(255,255,255,.4);text-decoration:none;
  font-family:var(--font);font-weight:600;font-size:.58em;
  letter-spacing:1px;text-transform:uppercase;transition:background .15s,border-color .15s
}
.qse-card-link:hover{background:rgba(255,255,255,.04);color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.08)}
.qse-card-link .link-icon{font-size:1.4em;color:var(--magenta)}
.qse-card-vez{
  padding:8px 12px;border-top:1px solid rgba(0,240,255,.04);
  background:rgba(0,240,255,.02)
}
.qse-card-vez-btn{
  width:100%;padding:8px;background:rgba(0,240,255,.04);
  border:1px solid rgba(0,240,255,.08);border-radius:var(--r-sm);
  color:var(--cyan);font-family:var(--font);font-weight:700;
  font-size:.75em;letter-spacing:2px;text-transform:uppercase;
  cursor:default;display:flex;align-items:center;justify-content:space-between
}

/* ═══ MOBILE RESPONSIVE ═══ */
@media(max-width:700px){
  .jogo-grid{flex-direction:column}
  .col-esq{width:100%;order:1}
  .col-dir{order:0}
  /* Timer pill — smaller on mobile */
  #timerHudTop .timer-inner{border-radius:var(--r-sm)}
  #timerHudTop .timer-section{padding:6px 16px}
  #timerHudTop .timer-value{font-size:1.5em}
  #timerHudTop .timer-player{font-size:.75em}
  #timerHudTop .timer-label{font-size:.4em}
  #timerHudTop .timer-icon{font-size:1.1em;padding:0 8px 0 2px}
  /* Show fixed guess bar on mobile — controlled by JS via guess-active class */
  body.in-game.guess-active #guessBarFixed{display:flex}
  /* Hide sidebar input on mobile (use fixed bar instead) */
  #campoPalpite{display:none!important}
  body.in-game #telaJogo{padding-bottom:12px!important}
  /* QSE cards — 2 per row on mobile, compact floating */
  .qse-cards-grid{flex-direction:row;flex-wrap:wrap;gap:8px;padding:0 6px;justify-content:center}
  .qse-card{
    max-width:calc(50% - 4px);min-width:0;width:calc(50% - 4px);flex:0 0 calc(50% - 4px);
    background:rgba(10,10,18,.88);
    border:1px solid rgba(255,255,255,.06);
    border-radius:var(--r);
    box-shadow:0 4px 16px rgba(0,0,0,.25)
  }
  .qse-card-body{padding:12px 8px;min-height:60px}
  .qse-card-mystery{width:44px;height:44px;font-size:1.2em;margin-bottom:6px}
  .qse-card-persona{font-size:.95em}
  .qse-card-header{padding:6px 10px}
  .qse-card-label{font-size:.42em;letter-spacing:2px}
  .qse-card-name{font-size:.78em}
  .qse-card-links{padding:6px 6px;gap:3px}
  .qse-card-link{padding:5px 2px;font-size:.42em;gap:1px}
  .qse-card-link .link-icon{font-size:1.2em}
  .qse-card-vez{padding:5px 8px}
  .qse-card-vez-btn{padding:6px;font-size:.62em;letter-spacing:1px}
  .qse-card-question{font-size:.68em}
  /* Lobby grid single column on mobile */
  .l-jogs{grid-template-columns:1fr}
  /* Hide placar on mobile (keep vez + host) */
  .col-esq .box:not(#vezBox):not(#hostControles){display:none}
  /* VezBox compact */
  #vezBox{padding:12px 14px}
  .vez-nome{font-size:1.1em}
  /* Home card */
  .e-card{padding:clamp(20px,5vw,30px);border-radius:var(--r)}
  .e-logo{font-size:clamp(2.2em,10vw,3.5em)}
}
@media(max-width:400px){
  #timerHudTop .timer-section{padding:5px 10px}
  #timerHudTop .timer-value{font-size:1.3em;letter-spacing:2px}
  #timerHudTop .timer-icon{display:none}
  .e-card{margin-left:-4px;margin-right:-4px;border-radius:var(--r-sm)}
}
/* Desktop: guess bar hidden (input is in sidebar) — JS handles mobile */

/* ═══ PERFORMANCE ═══ */
*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.e-btn,.btn,.mode-btn,.mode-tab,.sair-btn,.qse-card,.placar-item,.l-jog-row,.e-inp,.e-sel,
#campoPalpite button,#guessBarFixed .guess-btn,#guessBarFixed .guess-input{
  will-change:auto;
  -webkit-tap-highlight-color:transparent
}
/* GPU-accelerate hover transforms */
.e-btn:active,.btn:active,#campoPalpite button:active,#guessBarFixed .guess-btn:active{
  transform:scale(.97)
}
/* Reduce heavy box-shadows on mobile */
@media(max-width:700px){
  .box,.box.cyan,#hostControles,.l-card,.e-card,.modal-box,.l-codigo-box{
    box-shadow:0 2px 8px rgba(0,0,0,.2)!important
  }
  .qse-card.active,.qse-card.active-magenta{
    box-shadow:0 6px 24px rgba(0,0,0,.3)!important
  }
}


/* Fixed gear button */
#settingsGear{
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 10px rgba(0,0,0,.3)
}
#settingsGear:active{transform:scale(.9)}
/* Settings modal */
#settingsModal input[type=range]{
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.06);border-radius:4px;outline:none;height:4px
}
#settingsModal input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--cyan);cursor:pointer;box-shadow:0 0 8px rgba(0,240,255,.3)
}
#settingsModal input[type=range]::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;border:none;
  background:var(--cyan);cursor:pointer
}