:root{--night:#070b24;--deep:#141c52;--teal:#2fd6c1;--gold:#f0c050;--ember:#e0612b;--bone:#f4f1e6;--lime:#8fe04a;--panel:rgba(20,28,82,.86);--line:rgba(240,192,80,.38);--red:#e0283a;--green:#1fb865;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--night);color:var(--bone);font-family:Rubik,system-ui,sans-serif;font-size:15px;overscroll-behavior:none}
[hidden]{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3{font-family:'Uncial Antiqua',serif;font-weight:400;margin:0;letter-spacing:.02em}
.small{font-size:12px;opacity:.75}
.spacer{flex:1}
#app{position:fixed;inset:0;overflow:hidden}
#bg{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 0,#1a2670 0,#0b1240 45%,#070b24 100%);background-size:cover;background-position:center}
#bg::after{content:"";position:absolute;inset:0;background:
 repeating-linear-gradient(115deg,transparent 0 46px,rgba(47,214,193,.05) 46px 48px),
 radial-gradient(circle at 20% 80%,rgba(47,214,193,.14),transparent 40%),radial-gradient(circle at 85% 30%,rgba(240,192,80,.10),transparent 38%);
 animation:veins 7s ease-in-out infinite alternate}
@keyframes veins{from{opacity:.55}to{opacity:1}}
.screen{position:absolute;inset:0;overflow:auto;-webkit-overflow-scrolling:touch}
/* botões */
.btn-main,.btn-go,.btn-stone{border:2px solid var(--gold);border-radius:12px;padding:11px 18px;font-weight:600;color:var(--bone);background:linear-gradient(180deg,#3a4aa8,#1b2766);box-shadow:inset 0 2px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.35),0 3px 0 #0a1038;text-shadow:0 1px 0 rgba(0,0,0,.5);clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.btn-main{width:100%;font-size:16px;background:linear-gradient(180deg,#2fd6c1,#16897d);color:#04211d;text-shadow:none}
.btn-go{background:linear-gradient(180deg,#f0c050,#b9851f);color:#2a1a00;text-shadow:none}
.btn-stone:disabled,.btn-go:disabled,.btn-main:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.6)}
.btn-stone:active:not(:disabled),.btn-go:active:not(:disabled),.btn-main:active:not(:disabled){transform:translateY(2px)}
.btn-danger{background:linear-gradient(180deg,#e0612b,#8e2a0c)}
.btn-ghost{background:none;border:1px dashed var(--line);border-radius:10px;padding:9px 14px;width:100%;margin-top:10px;opacity:.85}
.pill-btn{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;padding:7px 12px;font-size:13px;text-decoration:none;color:var(--bone);white-space:nowrap}
.ic-btn{position:relative;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid var(--line);display:grid;place-items:center;font-size:18px;padding:0}
.ic-btn svg{width:20px;height:20px}
#chatBadge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;border-radius:8px;background:var(--ember);font-size:10px;display:grid;place-items:center;padding:0 3px}
.btn-exit{background:rgba(224,97,43,.2);border:1px solid var(--ember);border-radius:10px;padding:7px 11px;font-size:13px}
/* entrada */
.st-wrap{min-height:100%;display:flex;flex-direction:column;justify-content:center;gap:20px;padding:calc(20px + var(--safe-t)) 16px 24px;max-width:960px;margin:0 auto}
.st-title{font-size:clamp(46px,14vw,88px);color:var(--gold);text-shadow:0 0 24px rgba(47,214,193,.55),0 4px 0 #6b4a0c;line-height:1}
.st-logo{max-width:min(420px,80vw);display:block}
.st-sub{font-family:Almendra,serif;font-size:18px;line-height:1.35;max-width:46ch;margin:10px 0}
.st-gems{display:flex;gap:6px;flex-wrap:wrap}
.st-gems svg{animation:bob 3s ease-in-out infinite}
.st-gems svg:nth-child(2n){animation-delay:-1.2s}
@keyframes bob{50%{transform:translateY(-5px) rotate(4deg)}}
.st-form{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:16px;max-width:380px;width:100%}
.tabs{display:flex;gap:6px;margin-bottom:12px}
.tabs button{flex:1;padding:9px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid transparent}
.tabs button.on{border-color:var(--teal);background:rgba(47,214,193,.15);font-weight:600}
.fld{margin-bottom:10px}.fld label{display:block;font-size:12px;opacity:.8;margin-bottom:4px}
input,select,textarea{width:100%;background:#0a1038;border:1px solid var(--line);border-radius:9px;color:var(--bone);padding:10px;font:inherit;font-size:16px}
input[type=checkbox]{width:auto}
.form-err{color:#ff8a7a;min-height:18px;margin:4px 0 8px;font-size:13px}
.st-note{font-size:12px;opacity:.7;margin:12px 0 0}
@media(min-width:760px){.st-wrap{flex-direction:row;align-items:center;justify-content:space-between}}
/* lobby */
.lb-deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lb-deco i{position:absolute;bottom:-20px;width:60px;height:90px;background:linear-gradient(160deg,#6ff3e0,#14786c);clip-path:polygon(50% 0,100% 30%,85% 100%,15% 100%,0 30%);opacity:.18;animation:pulse 4s ease-in-out infinite}
.lb-deco i:nth-child(1){left:4%;transform:scale(1.4)}.lb-deco i:nth-child(2){left:20%;height:60px;animation-delay:-1s;background:linear-gradient(160deg,#ffd27a,#b9741f)}
.lb-deco i:nth-child(3){left:46%;transform:scale(1.8);animation-delay:-2s}.lb-deco i:nth-child(4){left:68%;background:linear-gradient(160deg,#ff8fc6,#a02a66);animation-delay:-.5s}
.lb-deco i:nth-child(5){left:84%;transform:scale(1.5);animation-delay:-3s}.lb-deco i:nth-child(6){left:93%;height:50px;background:linear-gradient(160deg,#c5ff8a,#4c8a16)}
@keyframes pulse{50%{opacity:.4}}
.lb-wrap{position:relative;max-width:1000px;margin:0 auto;padding:calc(10px + var(--safe-t)) 12px 30px}
.lb-top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.brand{font-family:'Uncial Antiqua',serif;font-size:26px;color:var(--gold);margin-right:6px}
.who{font-size:13px;background:rgba(0,0,0,.35);padding:6px 10px;border-radius:999px}
.who button{background:none;border:0;text-decoration:underline;margin-left:6px;padding:0;font-size:12px}
.live{background:rgba(47,214,193,.15);border:1px solid var(--teal);border-radius:12px;padding:10px 12px;margin-bottom:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.live.offer{background:rgba(240,192,80,.18);border-color:var(--gold)}
.lb-main{display:grid;gap:14px}
@media(min-width:820px){.lb-main{grid-template-columns:1.5fr 1fr}}
.seats-box,.lb-side,.box{background:var(--panel);border:2px solid var(--line);border-radius:16px;padding:14px}
.lb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.seats{display:grid;gap:8px}
.seat{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px 10px;min-height:56px}
.seat.empty{border-style:dashed;opacity:.6;justify-content:center}
.seat .nm{font-weight:600}.seat .tag{font-size:11px;border:1px solid var(--gold);border-radius:6px;padding:1px 5px;margin-left:6px;color:var(--gold)}
.seat .tag.off{border-color:#888;color:#aaa}
.seat .grow{flex:1;min-width:0}.seat .grow>div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini{background:rgba(255,255,255,.1);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.av{display:inline-block;border-radius:50%;overflow:hidden;flex:none;background:#1b2766}.av img,.av svg{display:block;width:100%;height:100%;object-fit:cover}
.lb-chat{margin-top:14px}
.cfg{display:grid;gap:8px;margin-top:10px}
.cfg label{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cfg select,.cfg input{width:auto;min-width:90px;padding:6px}
/* partida */
#game{display:flex;flex-direction:column;overflow:hidden}
.top{display:flex;align-items:center;gap:6px;padding:calc(6px + var(--safe-t)) 8px 6px;background:rgba(7,11,36,.82);border-bottom:1px solid var(--line);flex:none;flex-wrap:wrap;z-index:5}
.pill{background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:12px;white-space:nowrap}
.pill.risk b{color:var(--lime)}.pill.risk.hot b{color:#ff8a7a}
.turnbox{font-size:13px;font-weight:600;color:var(--teal);min-width:0}
.turnbox .cd{font-variant-numeric:tabular-nums;color:var(--gold);margin-left:4px}
.table{flex:1;overflow:auto;padding:8px 8px 6px;-webkit-overflow-scrolling:touch;position:relative}
.waitbar{background:rgba(240,192,80,.15);border:1px solid var(--gold);border-radius:10px;padding:8px;margin-bottom:8px;font-size:13px;text-align:center}
.slots{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px;align-items:stretch}
.slot{flex:none;width:86px;border:2px solid var(--line);border-radius:12px;background:rgba(20,28,82,.8);padding:6px;text-align:center;position:relative}
.slot.next{border-color:var(--teal);box-shadow:0 0 14px rgba(47,214,193,.5);animation:pulse2 1.6s infinite}
.slot.taken,.slot.lost{opacity:.5}.slot.lost::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;font-size:40px;color:var(--red)}
.slot .m{font-family:'Uncial Antiqua';font-size:20px;color:var(--gold)}
.slot .qc{margin:4px auto -50px;transform:scale(.62);transform-origin:top center}
.slot .ph{height:80px}.slot.deck{opacity:.9;margin-left:auto}
.slot .who{font-size:11px;display:block;background:none;padding:0}
@keyframes pulse2{50%{box-shadow:0 0 4px rgba(47,214,193,.2)}}
.rivals{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:8px}
.pl{background:var(--panel);border:2px solid rgba(255,255,255,.12);border-radius:14px;padding:8px;position:relative;transition:.2s}
.pl.turn{border-color:var(--teal);box-shadow:0 0 16px rgba(47,214,193,.45)}
.pl.out{opacity:.62}.pl.target{cursor:pointer;border-color:var(--gold);box-shadow:0 0 14px rgba(240,192,80,.6);animation:pulse2 1.2s infinite}
.pl .hd{display:flex;gap:8px;align-items:center}.pl .nm{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl .st{font-size:11px;opacity:.85}
.pl .money{margin-left:auto;font-family:'Uncial Antiqua';color:var(--gold);font-size:17px}
.cart{margin-top:6px;display:flex;flex-wrap:wrap;gap:3px;min-height:26px;align-items:center;background:linear-gradient(180deg,#5a3a1c,#3a2410);border:2px solid #8a5a2a;border-radius:6px 6px 12px 12px;padding:4px}
.cart.cartimg{background-size:cover}
.chip{display:inline-flex;align-items:center;position:relative}.chip i{font-style:normal;font-size:11px;font-weight:700;margin-left:-4px;background:rgba(0,0,0,.6);border-radius:6px;padding:0 3px}
.chip.sel svg{filter:drop-shadow(0 0 5px #fff)}
.chip[data-pick]{cursor:pointer;border-radius:6px;outline:2px solid transparent}.chip[data-pick]:hover,.chip.sel{outline-color:var(--gold)}
.cry.uns{filter:drop-shadow(0 0 4px #8fe04a);animation:glowu 1.4s infinite alternate}@keyframes glowu{to{filter:drop-shadow(0 0 9px #c8ff7a)}}
.empty{opacity:.45;font-size:11px;padding:0 4px}
.badges{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap;font-size:11px}.badges span{background:rgba(255,255,255,.1);border-radius:6px;padding:1px 6px}
.badges .xp{background:rgba(143,224,74,.25);border:1px solid var(--lime)}
.badges .bad{background:rgba(224,40,58,.3)}
.mine{margin-bottom:6px}
.pl.me{border-color:var(--gold)}
.coin{font-family:'Uncial Antiqua';color:var(--gold)}
/* mão e ações */
.handbar{flex:none;background:rgba(7,11,36,.94);border-top:2px solid var(--line);padding:6px 8px calc(8px + var(--safe-b));z-index:6}
.hint{font-size:13px;min-height:18px;margin-bottom:4px;color:var(--teal)}
.acts{display:flex;gap:8px;margin-bottom:6px;flex-wrap:wrap}.acts button{flex:1;min-width:110px}
.hand{display:flex;gap:6px;overflow-x:auto;padding:8px 2px 4px;min-height:132px;-webkit-overflow-scrolling:touch;align-items:flex-end}
/* cartas */
.qc{position:relative;flex:none;width:92px;height:128px;border-radius:9px;padding:4px;display:flex;flex-direction:column;
 background:linear-gradient(160deg,#243390,#0f1850);border:3px double var(--gold);box-shadow:0 3px 8px rgba(0,0,0,.5);user-select:none;transition:transform .15s}
.qc.blue{border-color:#6aa8ff}.qc.purple{border-color:#b98cff;background:linear-gradient(160deg,#4a2a8a,#1f1050)}
.qc::before,.qc::after{content:"";position:absolute;width:10px;height:10px;border:2px solid var(--gold);border-radius:50%;top:-5px;left:-5px;background:var(--night)}
.qc::after{left:auto;right:-5px;top:auto;bottom:-5px}
.qc .qv{position:absolute;top:2px;left:3px;font-size:11px;background:rgba(0,0,0,.65);border-radius:6px;padding:0 4px;color:var(--gold);z-index:2}
.qc .qa{flex:1;border-radius:6px;overflow:hidden;display:grid;place-items:center;background:rgba(0,0,0,.28)}.qc .qa img{width:100%;height:100%;object-fit:cover}
.qe{font-size:34px}
.qc .qn{font-size:9.5px;line-height:1.1;text-align:center;padding:3px 1px 0;min-height:24px;display:grid;place-items:center}
.qc.green{border-color:var(--green)}
.qc.back{background:linear-gradient(160deg,#1b2766,#0a1038);place-items:center}.qc.back img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.hand .qc{cursor:pointer}.hand .qc.dis{filter:grayscale(.45) brightness(.82);cursor:not-allowed}
.hand .qc.pick{transform:translateY(-12px);box-shadow:0 0 14px var(--gold)}
.qc.big{width:150px;height:210px}.qc.big .qn{font-size:12px}.qc.big .qx{font-size:10px;padding:2px;text-align:center;opacity:.9}.qc.big .qe{font-size:56px}
/* modal */
#overlay{position:fixed;inset:0;background:rgba(3,5,20,.78);display:grid;place-items:center;z-index:50;padding:12px calc(12px + env(safe-area-inset-right)) calc(12px + var(--safe-b)) calc(12px + env(safe-area-inset-left))}
.modal{background:linear-gradient(180deg,#1b2766,#0d1448);border:3px double var(--gold);border-radius:18px;padding:16px;width:min(560px,100%);max-height:calc(100dvh - 24px - var(--safe-b));overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.7)}
.modal h2{font-size:22px;color:var(--gold);margin-bottom:8px}.modal p{line-height:1.4}
.modal .btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}.modal .btns>*{flex:1;min-width:120px}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0;align-items:center}
.picks .opt{border:2px solid var(--line);border-radius:12px;padding:6px 10px;background:rgba(255,255,255,.06);display:flex;gap:6px;align-items:center}.picks .opt.sel{border-color:var(--teal);background:rgba(47,214,193,.2)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl th,.tbl td{padding:6px 5px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.tbl th{opacity:.7;font-weight:500}
.podium{display:flex;gap:6px;align-items:flex-end;justify-content:center;margin:12px 0}
.podium>div{flex:1;max-width:120px;text-align:center;background:rgba(255,255,255,.08);border:1px solid var(--line);border-radius:10px 10px 0 0;padding:8px 4px}
.podium .p1{min-height:130px;background:rgba(240,192,80,.2)}.podium .p2{min-height:100px}.podium .p3{min-height:80px}.podium .p4,.podium .p5{min-height:62px}
.podium .pos{font-family:'Uncial Antiqua';font-size:22px;color:var(--gold)}
/* efeitos */
#flash{position:fixed;inset:0;pointer-events:none;z-index:70;opacity:0}
#flash.red{background:radial-gradient(circle,rgba(224,40,58,.1),rgba(224,40,58,.65));animation:fl 1.1s ease-out}
#flash.green{background:radial-gradient(circle,rgba(31,184,101,.05),rgba(31,184,101,.5));animation:fl 1s ease-out}
@keyframes fl{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
body.shake #app{animation:shake .5s}@keyframes shake{20%{transform:translate(-8px,3px)}40%{transform:translate(7px,-4px)}60%{transform:translate(-5px,2px)}80%{transform:translate(3px,-1px)}}
#annLayer{position:fixed;inset:0;pointer-events:none;z-index:65;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;padding-top:calc(64px + var(--safe-t))}
.ann{background:rgba(7,11,36,.9);border:3px double var(--gold);border-radius:18px;padding:16px 24px;text-align:center;max-width:min(92vw,520px);animation:annIn .3s cubic-bezier(.2,1.4,.4,1),annOut .4s 1.5s forwards;padding:10px 18px}
.ann.bad{border-color:var(--red);box-shadow:0 0 40px rgba(224,40,58,.7)}.ann.good{border-color:var(--green);box-shadow:0 0 40px rgba(31,184,101,.6)}
.ann h3{font-size:clamp(22px,6vw,34px);color:var(--gold)}.ann.bad h3{color:#ff8a7a}.ann.good h3{color:#7dffb0}.ann p{margin:6px 0 0;font-size:15px}
.ann .qc{margin:6px auto 0;transform:scale(.7);transform-origin:top center;margin-bottom:-38px}
@keyframes annIn{from{transform:scale(.4);opacity:0}}@keyframes annOut{to{transform:scale(.9) translateY(-20px);opacity:0}}
#toasts{position:fixed;left:0;right:0;top:calc(10px + var(--safe-t));display:grid;gap:6px;justify-items:center;z-index:80;pointer-events:none}
.toast{background:#0d1448;border:1px solid var(--gold);padding:8px 14px;border-radius:12px;animation:annIn .2s,annOut .4s 3s forwards;max-width:90vw;font-size:14px}
.toast.err{border-color:var(--red)}
#conn{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);background:var(--ember);padding:8px 14px;border-radius:999px;z-index:90;font-size:13px}
/* emotes e chat */
#emoteLayer{position:fixed;inset:0;pointer-events:none;z-index:60}
.emo{position:absolute;display:flex;flex-direction:column;align-items:center;font-size:12px;animation:emoUp 5s ease-out forwards}.emo .e{font-size:52px;line-height:1}.emo img{width:64px;height:64px;object-fit:contain}
@keyframes emoUp{0%{transform:translateY(20px) scale(.4);opacity:0}10%{opacity:1;transform:scale(1.1)}80%{opacity:1}100%{transform:translateY(-70px);opacity:0}}
.emo-pick{position:fixed;right:8px;top:calc(52px + var(--safe-t));z-index:55;background:#0d1448;border:2px solid var(--gold);border-radius:14px;padding:8px;display:grid;grid-template-columns:repeat(5,44px);gap:6px;max-width:94vw}
.emo-pick button{width:44px;height:44px;font-size:24px;background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:10px;padding:0}.emo-pick img{width:34px;height:34px;object-fit:contain}
.chat-panel{position:fixed;right:0;top:0;bottom:0;width:min(340px,100%);background:#0b1240;border-left:2px solid var(--gold);z-index:58;display:flex;flex-direction:column;padding:calc(10px + var(--safe-t)) 10px calc(10px + var(--safe-b))}
.chat-log{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px;font-size:13px}.chat-log .m b{color:var(--teal)}.chat-log .m.gm b{color:var(--gold)}.chat-log .m.spec{opacity:.7}
.chat-in{display:flex;gap:6px;margin-top:8px}
.lobbychat .chat-log{max-height:200px;background:rgba(0,0,0,.25);padding:8px;border-radius:10px;min-height:80px}
/* regras / ranking */
.rules h3{margin:12px 0 4px;color:var(--teal);font-size:16px}.rules li,.rules p{font-size:14px;line-height:1.4}
.tut{position:fixed;left:8px;right:8px;bottom:calc(210px + var(--safe-b));z-index:40;background:rgba(240,192,80,.95);color:#2a1a00;border-radius:12px;padding:8px 12px;font-size:14px;font-weight:500;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.tut button{float:right;background:none;border:0;font-weight:700;color:inherit}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
@media(min-width:900px){.hand .qc{width:104px;height:146px}.slot{width:100px}.qc.big{width:170px;height:238px}}
body.noprov .qe,body.noprov .av svg:not([class]){visibility:hidden}