/*--------------------------------------------------------------
# minigames/comum/tempo_real.css
--------------------------------------------------------------*/
:root{--vidro:rgba(12,15,20,.55);--vidro2:rgba(18,22,30,.68);--borda:rgba(255,255,255,.07);--borda2:rgba(255,255,255,.13);
  --txt:#e8ecf1;--cinza:#aeb6c1;--mut:#78828f;--t0:#3b82f6;--t1:#ef4444;
  --ui:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;--num:'JetBrains Mono',ui-monospace,monospace;--ease:cubic-bezier(.2,.8,.2,1)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:#06080b;color:var(--txt);font-family:var(--ui);
  -webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:none;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit;-webkit-user-select:text;user-select:text}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.ic{width:1.3em;height:1.3em;stroke:none;flex:none}
svg.ic.nota{width:1.6em;height:1.2em}

#app{--cor:#3fbf6a;--cor2:color-mix(in srgb,var(--cor) 55%,#000);--brilho:color-mix(in srgb,var(--cor) 80%,#fff);
  position:fixed;left:0;top:0;width:100vw;height:100vh;overflow:hidden;background:#06080b}
#app.girado{transform:rotate(90deg) translateY(-100%);transform-origin:top left}
.fundo{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fundo canvas{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;filter:blur(7px) brightness(.5) saturate(1.05)}
.fundo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 75% at 50% 55%,transparent 30%,rgba(4,6,9,.8) 100%),linear-gradient(180deg,rgba(4,6,9,.2),rgba(4,6,9,.55))}

.tela{position:absolute;inset:0;z-index:3;display:none;flex-direction:column}
.tela.ativa{display:flex;animation:tela-in .5s var(--ease)}
.tela.saindo{display:flex;animation:tela-out .28s ease forwards;pointer-events:none}
@keyframes tela-in{from{opacity:0;transform:scale(1.03);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes tela-out{to{opacity:0;transform:scale(.98);filter:blur(4px)}}

.av{flex:none;width:2.7rem;height:2.7rem;border-radius:50%;display:grid;place-items:center;font-size:1.25rem;
  background:radial-gradient(circle at 35% 30%,#2b3240,#10141b);box-shadow:0 0 0 1.5px var(--cor),0 0 0 4px color-mix(in srgb,var(--cor) 15%,transparent)}
.av.grande{width:5.4rem;height:5.4rem;font-size:2.6rem}

.marca{display:flex;flex-direction:column;align-items:center;line-height:1;margin:1.1rem auto .2rem;text-transform:uppercase}
.marca span{font:300 1.05rem var(--ui);letter-spacing:.9em;padding-left:.9em;color:var(--cinza)}
.marca b{font:600 3rem var(--ui);letter-spacing:.3em;padding-left:.3em;color:#f3f5f8;margin-top:.15rem}
.marca b::after{content:"";display:block;height:1px;width:70%;margin:.5rem auto 0;background:linear-gradient(90deg,transparent,var(--cor),transparent)}
.marca.grande span{font-size:1.4rem}
.marca.grande b{font-size:4.2rem}

#telaCarregando{align-items:center;justify-content:center;gap:1.6rem}
.car-status{display:flex;align-items:center;gap:.7rem;font:400 .82rem var(--ui);letter-spacing:.4em;text-transform:uppercase;color:var(--cinza)}
.gira{width:1.3rem;height:1.3rem;border-radius:50%;border:2px solid rgba(255,255,255,.15);border-top-color:var(--cor);animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.car-barra{width:15rem;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.car-barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cor2),var(--brilho));transition:width .35s ease}
.car-erro{display:flex;flex-direction:column;align-items:center;gap:.9rem;max-width:32rem;padding:1rem 1.2rem;text-align:center;background:rgba(120,30,30,.35);border:1px solid rgba(255,140,140,.3)}
.car-erro p{font:400 .85rem/1.5 var(--ui);color:#ffd9d9;word-break:break-word}

.topo{position:relative;z-index:5;display:flex;align-items:center;gap:1.2rem;padding:.55rem 1.3rem;padding-top:max(.55rem,env(safe-area-inset-top));
  background:linear-gradient(180deg,rgba(8,10,14,.45),rgba(8,10,14,.18));backdrop-filter:blur(18px) brightness(.72);-webkit-backdrop-filter:blur(18px) brightness(.72);
  border-bottom:1px solid var(--borda)}
.topo-perfil{display:flex;align-items:center;gap:.75rem;text-align:left}
.topo-quem{display:flex;flex-direction:column;gap:.25rem;min-width:8rem}
.topo-quem b{font:600 .98rem var(--ui);color:#eef2f6;max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-quem small{font:400 .68rem var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.xp{display:block;width:8rem;height:3px;background:rgba(255,255,255,.08);overflow:hidden}
.xp i{display:block;height:100%;width:0;background:var(--brilho);transition:width .8s var(--ease)}
.topo-nav{display:flex;align-items:center;flex:1;justify-content:center}
.topo-nav button{display:flex;align-items:center;gap:.5rem;white-space:nowrap;padding:.35rem 1.1rem;font:400 .8rem var(--ui);letter-spacing:.08em;color:var(--cinza);border-left:1px solid var(--borda2)}
.topo-nav button:first-child{border-left:0}
.topo-nav button svg{font-size:1.1rem}
.topo-nav button:hover{color:#fff}
.topo-nav #btnGratis{color:var(--brilho)}
.topo-saldo{display:flex;gap:.5rem;margin-left:auto}
.saldo{display:flex;align-items:center;gap:.5rem;height:2.1rem;padding:0 .7rem 0 .55rem;background:rgba(0,0,0,.3);border:1px solid var(--borda);min-width:6.4rem}
.saldo b{flex:1;font:600 .9rem var(--num);color:var(--cinza)}
.topo.sub .voltar{display:flex;align-items:center;gap:.4rem;height:2.1rem;padding:0 .8rem 0 .55rem;border:1px solid var(--borda2);color:var(--cinza);
  font:400 .8rem var(--ui);letter-spacing:.12em;text-transform:uppercase;min-width:7.5rem}
.topo.sub .voltar:hover{color:#fff;border-color:var(--cor)}
.topo-titulo{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.6rem;white-space:nowrap;
  font:500 1.05rem var(--ui);letter-spacing:.3em;text-transform:uppercase;color:#eef2f6}
.topo-titulo svg{font-size:1.2rem;color:var(--brilho)}

.trilho{flex:1;display:flex;align-items:center;overflow:hidden;cursor:grab;touch-action:none;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.trilho.arrastando{cursor:grabbing}
.trilho-pista{display:flex;gap:1rem;padding:0 3rem;will-change:transform}
.trilho-pista.solta{transition:transform .5s var(--ease)}
.modo{position:relative;flex:none;width:13.5rem;height:9rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.18rem;
  padding:1.05rem 1.15rem;text-align:left;overflow:hidden;background:var(--vidro);border:1px solid var(--borda);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .25s,background .25s,transform .25s}
.modo:hover{border-color:color-mix(in srgb,var(--cor) 45%,transparent);background:var(--vidro2);transform:translateY(-2px)}
.modo-ic{position:absolute;top:1rem;left:1.15rem;font-size:1.5rem;color:var(--cinza)}
.modo small{font:400 .66rem var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.modo b{font:500 1.3rem/1.1 var(--ui);letter-spacing:.04em;color:#eef2f6}
.modo i{font-style:normal;font:400 .72rem var(--ui);color:var(--mut);margin-top:.15rem}
.modo.principal{width:16rem;background:linear-gradient(160deg,color-mix(in srgb,var(--cor) 45%,transparent),rgba(10,14,20,.65));border-color:color-mix(in srgb,var(--cor) 45%,transparent)}
.modo.principal .modo-ic,.modo.principal small{color:var(--brilho)}
.modo.principal b{font-size:1.55rem}
.modo .on{display:flex;align-items:center;gap:.4rem;color:var(--brilho)}
.modo .on::before{content:"";width:.38rem;height:.38rem;border-radius:50%;background:#34d06d;box-shadow:0 0 .45rem #34d06d}

.lb-baixo{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:0 1.3rem max(.9rem,env(safe-area-inset-bottom))}
.lb-ajuda{display:flex;align-items:center;gap:.6rem;max-width:22rem;padding:.6rem .8rem;background:var(--vidro);border:1px solid var(--borda);
  font:400 .72rem/1.45 var(--ui);color:var(--cinza)}
.lb-ajuda svg{font-size:1.4rem;flex:none;color:var(--brilho)}
.lb-ajuda b{color:#fff;font-weight:500}
#app.toque .lb-ajuda{display:none}
.lb-voltar{width:2.5rem;height:2.5rem;display:grid;place-items:center;color:var(--mut);font-size:1.15rem;border:1px solid var(--borda);background:var(--vidro)}
.pacotes-slots{display:flex;gap:.6rem}
.slot{position:relative;width:7.2rem;height:5.4rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.28rem;
  background:var(--vidro);border:1px solid var(--borda);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.slot svg{font-size:1.5rem;color:var(--c)}
.slot small{font:400 .6rem var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.slot b{font:500 .78rem var(--num);color:var(--mut)}
.slot.pronto{border-color:color-mix(in srgb,var(--cor) 45%,transparent)}
.slot.pronto b{color:var(--brilho)}
.slot.pronto svg{animation:respira 2.2s ease-in-out infinite}
@keyframes respira{50%{transform:translateY(-2px);filter:drop-shadow(0 0 .45rem var(--c))}}
.pacotes-slots.chama .slot.pronto{animation:chama .5s 3}
@keyframes chama{50%{border-color:var(--cor)}}

.cover{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;touch-action:none}
.cover.arrastando{cursor:grabbing}
.cover-pista{position:absolute;inset:0}
.arena{position:absolute;left:50%;top:50%;width:20rem;display:flex;flex-direction:column;background:var(--vidro2);border:1px solid var(--borda2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1.6rem 3.4rem rgba(0,0,0,.55);
  transform:translate(calc(-50% + var(--x,0px)),-50%) scale(var(--s,1));opacity:var(--o,1);z-index:var(--z,1)}
.arena::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--ac)}
.cover:not(.arrastando) .arena{transition:transform .5s var(--ease),opacity .5s var(--ease)}
.arena.p0{cursor:pointer}
.arena.p0:hover{border-color:var(--ac)}
.arena-cab{padding:1rem 1.2rem .6rem;text-align:center;border-bottom:1px solid var(--borda)}
.arena-cab small{font:400 .64rem var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--mut)}
.arena-cab h3{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.25rem;font:500 1.55rem var(--ui);letter-spacing:.1em;text-transform:uppercase}
.bandeira{width:1.9rem;height:1.27rem;stroke:none;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.arena-premio{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.55rem 0 .15rem;font:600 1.4rem var(--num);color:#e0c98c}
.arena-premio small{font:400 .64rem var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--mut)}
.arena-linhas{padding:.35rem 1.2rem .9rem;display:flex;flex-direction:column;gap:.55rem}
.arena-chut{display:flex;align-items:center;gap:.7rem}
.chut{width:2rem;height:1.6rem;color:#3b424c}
.chut.ok{color:#e0c98c}
.arena-chut .prog{flex:1;display:flex;flex-direction:column;gap:.3rem;font:400 .72rem var(--ui);color:var(--mut)}
.barra{display:block;height:2px;background:rgba(255,255,255,.08);overflow:hidden}
.barra b{display:block;height:100%;background:var(--ac,var(--brilho))}
.arena-info{display:flex;justify-content:space-between;font:400 .76rem var(--ui);color:var(--mut)}
.arena-info span{display:flex;align-items:center;gap:.35rem}
.arena-info b{font:600 .8rem var(--num);color:var(--cinza)}
.arena-info .ic{width:.95rem;height:.95rem}
.arena-regra{padding:.5rem .6rem;text-align:center;font:400 .68rem var(--ui);letter-spacing:.16em;text-transform:uppercase;color:var(--cinza);background:rgba(0,0,0,.25);border:1px solid var(--borda)}
.cover-pontos{display:flex;justify-content:center;gap:.4rem;padding:.3rem 0 1rem}
.cover-pontos i{width:.4rem;height:.4rem;background:rgba(255,255,255,.18);transition:all .35s var(--ease)}
.cover-pontos i.on{width:1.4rem;background:var(--brilho)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;height:2.35rem;padding:0 1.3rem;
  font:500 .78rem var(--ui);letter-spacing:.2em;text-transform:uppercase;transition:background .2s,border-color .2s,color .2s}
.btn.pri{background:var(--cor2);color:#fff;border:1px solid color-mix(in srgb,var(--cor) 55%,transparent)}
.btn.pri:hover{background:var(--cor)}
.btn.sec{background:rgba(0,0,0,.25);border:1px solid var(--borda2);color:var(--cinza)}
.btn.sec:hover{border-color:var(--cor);color:#fff}

#telaFila{align-items:center;justify-content:center}
.fila-cx{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center;padding:2rem 3rem;background:var(--vidro2);border:1px solid var(--borda2);backdrop-filter:blur(14px)}
.fila-cx h3{font:500 1.35rem var(--ui);letter-spacing:.24em;text-transform:uppercase;margin-top:.6rem}
.fila-cx p{font:400 .8rem var(--ui);color:var(--cinza);max-width:26rem}
.fila-tempo{font:600 1.5rem var(--num)!important;color:var(--brilho)!important}
.fila-cx .btn{margin-top:.5rem}
.radar{position:relative;width:7rem;height:7rem;display:grid;place-items:center}
.radar i{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--cor);opacity:0;animation:radar 2.4s ease-out infinite}
.radar i:nth-child(2){animation-delay:.8s}
.radar i:nth-child(3){animation-delay:1.6s}
@keyframes radar{from{transform:scale(.4);opacity:.9}to{transform:scale(1.3);opacity:0}}
.radar .av{width:3.6rem;height:3.6rem;font-size:1.7rem}

#telaJogo{background:#05070a}
#cvJogo{position:absolute;inset:0;display:block;touch-action:none}
.hud{position:absolute;z-index:4;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.8rem;
  height:3.2rem;padding:0 4rem;padding-top:env(safe-area-inset-top);pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.28));border-bottom:1px solid rgba(255,255,255,.06)}
.hud-lado{display:flex;align-items:center;gap:.9rem;min-width:0}
.hud-lado.t0{justify-content:flex-end}
.hud-lado b{font:700 1.9rem var(--num);min-width:2.2rem;text-align:center;text-shadow:0 .15rem .5rem rgba(0,0,0,.5)}
.hud-lado.t0 b{color:#8ab8ff}
.hud-lado.t1 b{color:#ff9a9a}
.hud-lado b.pula{animation:pula .6s var(--ease)}
@keyframes pula{30%{transform:scale(1.5)}}
.hud-nomes{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.hud-lado.t0 .hud-nomes{align-items:flex-end;text-align:right}
.hud-nomes span{display:flex;align-items:center;gap:.4rem;font:500 .82rem var(--ui);color:#e6eaef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:12rem}
.hud-lado.t0 .hud-nomes span{flex-direction:row-reverse}
.flag{width:1.25rem;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.45);vertical-align:middle}
.hud-meio{display:flex;flex-direction:column;align-items:center;min-width:7rem}
.hud-meio b{font:600 1.2rem var(--num);color:#fff}
.hud-meio small{font:400 .6rem var(--ui);letter-spacing:.24em;text-transform:uppercase;color:var(--brilho)}
.aviso{position:absolute;z-index:6;left:50%;top:44%;transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;text-align:center;
  font:700 4.2rem/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:#fff;text-shadow:0 .3rem 1.6rem rgba(0,0,0,.6);transition:opacity .25s,transform .35s var(--ease)}
.aviso.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.aviso small{display:block;font:400 .95rem var(--ui);letter-spacing:.34em;margin-top:.6rem;color:var(--cinza)}
.aviso.t0{color:#8ab8ff}
.aviso.t1{color:#ff9a9a}
.aviso.ouro{color:#ffd66b}
.rede-ruim{position:absolute;z-index:6;left:50%;top:3.8rem;transform:translateX(-50%);padding:.4rem .9rem;background:rgba(120,30,30,.8);
  border:1px solid rgba(255,140,140,.35);font:400 .75rem var(--ui);letter-spacing:.1em;color:#ffd9d9}

.ctl{position:absolute;inset:0;z-index:5;pointer-events:none;display:none}
#app.toque .ctl{display:block}
.ctl-esq,.ctl-dir{position:absolute;bottom:0;pointer-events:auto;display:flex;align-items:flex-end;gap:.9rem;padding:1rem 1.4rem max(1.2rem,env(safe-area-inset-bottom))}
.ctl-esq{left:0;width:48%;height:70%}
.ctl-dir{right:0;justify-content:flex-end}
.ctl-bt{width:4.6rem;height:4.6rem;border-radius:50%;display:grid;place-items:center;font:600 .78rem var(--ui);letter-spacing:.1em;text-transform:uppercase;
  color:#fff;background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);touch-action:none}
.ctl-bt.seta{font-size:1.6rem;width:4.4rem;height:4.4rem}
.ctl-bt.grande{width:5.8rem;height:5.8rem;background:color-mix(in srgb,var(--cor) 38%,transparent);border-color:color-mix(in srgb,var(--cor) 70%,#fff)}
.ctl-bt.on{background:rgba(255,255,255,.3);transform:scale(.94)}
.ctl-zona{position:absolute;inset:0;touch-action:none}
.stick{position:absolute;width:7.2rem;height:7.2rem;margin:-3.6rem 0 0 -3.6rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);
  left:22%;bottom:auto;top:62%;opacity:.45;transition:opacity .2s}
.stick.on{opacity:1}
.stick i{position:absolute;left:50%;top:50%;width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.35);transform:translate(-50%,-50%);box-shadow:0 .3rem .8rem rgba(0,0,0,.35)}
.ctl-esq:has(.seta){height:auto}

.jg-menu{position:absolute;z-index:8;left:.8rem;top:max(.4rem,env(safe-area-inset-top))}
.jg-menu-bt{width:2.4rem;height:2.4rem;display:grid;place-items:center;font-size:1.2rem;color:#cfd4d9;background:rgba(20,24,30,.8);border:1px solid rgba(255,255,255,.14)}
.jg-menu-cx{position:absolute;left:0;top:calc(100% + .45rem);min-width:12rem;display:flex;flex-direction:column;padding:.3rem;background:rgba(18,21,26,.97);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 1rem 2rem rgba(0,0,0,.5)}
.jg-menu-cx button{display:flex;align-items:center;gap:.6rem;padding:.6rem .7rem;font:400 .82rem var(--ui);color:#dfe3e7;text-align:left}
.jg-menu-cx button svg{font-size:1rem;color:#a7adb4}
.jg-menu-cx button:hover{background:rgba(255,255,255,.06)}
.jg-menu-cx button.perigo,.jg-menu-cx button.perigo svg{color:#f0a3a3}

.modal{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:rgba(6,8,12,.92);backdrop-filter:blur(18px) brightness(.7);-webkit-backdrop-filter:blur(18px) brightness(.7);animation:sobe-in .45s var(--ease)}
.modal.saindo{animation:sobe-out .28s ease forwards}
@keyframes sobe-in{from{opacity:0;transform:translateY(2.5%)}to{opacity:1;transform:none}}
@keyframes sobe-out{to{opacity:0;transform:translateY(2%)}}
.md-corpo{flex:1;overflow-y:auto;padding:1.2rem 1.4rem 1.6rem;overscroll-behavior:contain;touch-action:pan-y}
.passo{animation:passo-in .42s var(--ease)}
@keyframes passo-in{from{opacity:0;transform:translateX(2.5rem)}to{opacity:1;transform:none}}

.dialogo{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(0,0,0,.55);backdrop-filter:blur(8px);animation:tela-in .35s var(--ease)}
.dlg-cx{width:min(30rem,92%);padding:1.4rem 1.5rem;background:var(--vidro2);border:1px solid var(--borda2);display:flex;flex-direction:column;gap:.9rem}
.dlg-cx.fim{align-items:center;text-align:center;padding:2rem 2.4rem;gap:.7rem}
.dlg-cx.fim small{font:400 .68rem var(--ui);letter-spacing:.38em;text-transform:uppercase;color:var(--mut)}
.dlg-cx.fim h3{font:600 2.8rem/1 var(--ui);letter-spacing:.2em;padding-left:.2em;text-transform:uppercase}
.dlg-cx.fim.venceu h3{color:#9be7b6}
.dlg-cx.fim.perdeu h3{color:#e59a9a}
.dlg-cx.fim p{font:400 .85rem var(--ui);color:var(--cinza)}
.fim-placar{display:flex;align-items:center;gap:1rem;font:700 2.6rem var(--num)}
.fim-placar i{font:300 1.2rem var(--ui);color:var(--mut)}
.fim-premio{display:flex;align-items:center;gap:.5rem;font:600 1.3rem var(--num);color:#e0c98c}
.fim-premio small{font:400 .7rem var(--ui);color:var(--mut)}
.fim-bts{display:flex;gap:.6rem;margin-top:.6rem}
.pacote-abre{align-items:center;text-align:center;width:min(36rem,94%)}
.pacote-abre h3{font:500 1.2rem var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--cinza)}
.cofre{width:5.2rem;height:5.2rem;color:var(--c);margin:.6rem 0;animation:treme .12s linear infinite;filter:drop-shadow(0 0 1rem var(--c))}
@keyframes treme{25%{transform:translateX(-2px) rotate(-2deg)}75%{transform:translateX(2px) rotate(2deg)}}
.pacote-abre.aberto .cofre{animation:estoura .45s ease forwards}
@keyframes estoura{to{transform:scale(1.5);opacity:0;filter:blur(6px)}}
.premios{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.premio{width:7.4rem;padding:.7rem .5rem;background:rgba(0,0,0,.28);border:1px solid var(--borda);display:flex;flex-direction:column;align-items:center;gap:.35rem;
  opacity:0;transform:translateY(1rem);animation:sobe .45s var(--ease) forwards}
@keyframes sobe{to{opacity:1;transform:none}}
.premio svg.ic{width:2.2rem;height:2.2rem}
.premio svg.ic.nota{width:2.8rem;height:2.1rem}
.premio b{font:600 .95rem var(--num);color:var(--cinza)}
.premio small{font:400 .64rem var(--ui);color:var(--mut)}

.perfil{display:grid;grid-template-columns:15rem 1fr;gap:1.2rem;max-width:62rem;margin:0 auto}
.pf-card{padding:1.3rem;background:var(--vidro);border:1px solid var(--borda);display:flex;flex-direction:column;align-items:center;gap:.7rem;align-self:start}
.pf-nome{display:flex;gap:.5rem;align-items:center}
.pf-flag .flag{width:1.9rem}
.pf-nome-txt{font:500 1.15rem var(--ui)}
.pf-nome select{font-size:.85rem;background:rgba(0,0,0,.4);border:1px solid var(--borda2);color:#fff;padding:.25rem}
.pf-nome input{width:8.5rem;font:500 .95rem var(--ui);background:rgba(0,0,0,.4);border:1px solid var(--borda2);color:#fff;padding:.35rem .5rem}
.pf-id{font:500 .7rem var(--num);letter-spacing:.1em;color:var(--mut)}
.pf-card .xp{width:100%}
.pf-saldos{display:flex;gap:.5rem}
.pf-saldos .saldo{min-width:0}
.pf-dir{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.pf-titulo{font:400 .7rem var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--mut);margin-bottom:.55rem}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.pf-stat{padding:.8rem;background:var(--vidro);border:1px solid var(--borda)}
.pf-stat b{display:block;font:600 1.35rem var(--num);color:var(--cinza)}
.pf-stat small{font:400 .64rem var(--ui);color:var(--mut)}
.pf-conq{display:flex;flex-direction:column;gap:.35rem}
.pf-conq div{display:flex;align-items:center;gap:.6rem;padding:.55rem .8rem;background:var(--vidro);border:1px solid var(--borda);font:400 .82rem var(--ui);color:var(--cinza)}
.pf-conq div small{margin-left:auto;font:500 .7rem var(--num);color:var(--mut)}
.pf-chuts{display:flex;gap:.6rem;flex-wrap:wrap}
.pf-chut{width:6.8rem;padding:.7rem .4rem;text-align:center;background:var(--vidro);border:1px solid var(--borda);display:flex;flex-direction:column;align-items:center;gap:.3rem}
.pf-chut b{display:flex;align-items:center;justify-content:center;gap:.35rem;font:400 .66rem var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cinza)}
.pf-chut b .bandeira{width:1rem;height:.67rem}
.pf-chut small{font:500 .7rem var(--num);color:var(--mut)}

.toast{position:absolute;left:50%;bottom:1.4rem;z-index:60;transform:translate(-50%,1rem);opacity:0;pointer-events:none;padding:.65rem 1.2rem;
  background:rgba(8,10,14,.92);border:1px solid var(--borda2);font:400 .85rem var(--ui);color:var(--cinza);transition:opacity .3s,transform .3s var(--ease);max-width:80%;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.erro{border-color:rgba(229,154,154,.4);color:#e5b4b4}

@media (max-width:1100px){
  .topo-nav button span{display:none}
  .topo-nav button{padding:.35rem .8rem}
  .topo-nav button svg{font-size:1.25rem}
  .perfil{grid-template-columns:1fr}
  .pf-stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-height:520px){
  .marca{margin-top:.5rem}
  .marca b{font-size:2.2rem}
  .hud-nomes span{font-size:.72rem;max-width:8rem}
}