:root{--ground:#3a281c;--dirt:#6b4c33;--chalk:#f3eee4;--chalk-dim:#f3eee499;--chalk-faint:#f3eee447;--ink:#1f140c;--panel:#1c120aa8;--accent:#ffcf4a;--accent-dark:#b88c22;--hot:#ff8a4c;--cool:#9a96ff;--earth:#9ccc5c;--danger:#ff6a4d;--top-h:116px;--bottom-h:236px;--round:"Baloo 2", "Trebuchet MS", system-ui, sans-serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--ground);height:100%;color:var(--chalk);font-family:var(--round);-webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none;margin:0;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui button,#ui .interactive{pointer-events:auto}.screen{padding:max(14px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;display:none;position:absolute;inset:0}.screen.on{display:flex}.screen.cover{pointer-events:auto;background:radial-gradient(at 50% 38%,#78563a59,#180f08b8 75%)}.col{flex-direction:column;gap:12px;width:100%;max-width:460px;display:flex}.btn{appearance:none;font:800 21px/1.1 var(--round);color:var(--ink);background:var(--accent);box-shadow:0 4px 0 var(--accent-dark), 0 10px 20px #00000059;cursor:pointer;border:none;border-radius:18px;padding:13px 18px 11px;transition:transform 60ms,box-shadow 60ms,opacity .2s}.btn:active:not(:disabled){box-shadow:0 1px 0 var(--accent-dark), 0 4px 10px #00000059;transform:translateY(3px)}.btn:disabled{opacity:.45;cursor:default}.btn.ghost{color:var(--chalk);border:2px dashed var(--chalk-dim);box-shadow:none;background:0 0}.btn small{opacity:.8;font-size:12px;font-weight:600;display:block}.panel{background:var(--panel);border:2px dashed var(--chalk-faint);-webkit-backdrop-filter:blur(3px);border-radius:18px}.badge-bot{vertical-align:2px;color:var(--ink);letter-spacing:.06em;background:#e2dacb;border-radius:999px;margin-left:6px;padding:0 7px;font-size:11px;font-weight:800;line-height:17px;display:inline-block}.class-chip{color:var(--ink);border-radius:999px;padding:1px 9px;font-size:13px;font-weight:700;display:inline-block}.class-penyerang{background:var(--hot)}.class-pengendali{background:var(--cool)}.class-bertahan{background:var(--earth)}.muted{color:var(--chalk-dim)}.ring{flex:none;width:54px;height:54px;position:relative}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring .track{fill:none;stroke:var(--chalk-faint);stroke-width:5px;stroke-dasharray:4 5}.ring .bar{fill:none;stroke:var(--chalk);stroke-width:6px;stroke-linecap:round}.ring span{place-items:center;font-size:22px;font-weight:800;display:grid;position:absolute;inset:0}.ring.urgent .bar{stroke:var(--danger)}.lobby .title{text-align:center;text-shadow:0 4px #00000059;margin:18px 0 0;font-size:50px;font-weight:800;line-height:.95}.lobby .subtitle{text-align:center;margin-top:-2px;font-size:17px}.lobby .hero{flex:1;place-items:center;width:100%;display:grid;position:relative}.lobby .hero .chalk-ring{aspect-ratio:1;border:3px dashed var(--chalk-dim);border-radius:50%;width:min(72vw,300px);position:absolute}.lobby .hero .marble{filter:drop-shadow(0 18px 14px #00000073);width:min(40vw,170px);animation:3.2s ease-in-out infinite bob}.lobby .hero .caption{font-size:15px;position:absolute;bottom:6%}.lobby .modes{grid-template-columns:1fr 1fr;gap:12px;display:grid}@keyframes bob{50%{transform:translateY(-10px)rotate(8deg)}}.loading{justify-content:center;gap:18px;font-size:20px}.spinner{border:4px dashed var(--chalk);border-radius:50%;width:72px;height:72px;animation:2.4s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.draft header{justify-content:space-between;align-items:center;gap:12px;display:flex}.draft h1{margin:0;font-size:28px;line-height:1}.draft .opp{padding:8px 12px;font-size:15px}.picks{justify-content:space-around;padding:8px 0 2px;display:flex}.pick{appearance:none;color:var(--chalk);font:700 16px var(--round);cursor:pointer;background:0 0;border:none;border-radius:16px;flex-direction:column;align-items:center;gap:4px;padding:6px;transition:transform .15s;display:flex}.pick .marble{outline-offset:5px;filter:drop-shadow(0 8px 6px #0006);border-radius:50%;outline:3px dashed #0000;width:82px;height:82px;transition:outline-color .15s}.pick.sel{transform:translateY(-6px)}.pick.sel .marble{outline-color:var(--chalk)}.info{flex-direction:column;gap:8px;min-height:210px;padding:14px 16px;display:flex}.info h2{align-items:center;gap:10px;margin:0;font-size:26px;line-height:1;display:flex}.skill h3{color:var(--accent);margin:0;font-size:16px}.skill h3 .tag{color:var(--chalk-dim);margin-right:6px;font-size:13px;font-weight:600}.skill p{margin:1px 0 0;font-family:system-ui,sans-serif;font-size:15px;line-height:1.25}.draft .spacer{flex:1}.hud{padding:0}.hud-top,.hud-bottom{flex-direction:column;align-items:center;padding:0 14px;display:flex;position:absolute;left:0;right:0}.hud-top{height:var(--top-h);padding-top:max(10px, env(safe-area-inset-top));top:0}.hud-bottom{height:var(--bottom-h);padding-bottom:max(14px, env(safe-area-inset-bottom));justify-content:flex-end;bottom:0}.hud .row{align-items:center;gap:10px;width:100%;max-width:460px;display:flex}.pcard{flex-direction:column;flex:1;gap:5px;min-width:0;padding:8px 12px 9px;display:flex}.pcard .line{justify-content:space-between;align-items:center;gap:8px;display:flex}.pcard .name{white-space:nowrap;text-overflow:ellipsis;font-size:17px;font-weight:800;overflow:hidden}.pcard .meta{white-space:nowrap;font-size:13px}.hpbar{border:2px solid var(--chalk-faint);background:#00000080;border-radius:9px;height:16px;position:relative;overflow:hidden}.hpbar i{background:linear-gradient(#b9ec7a,#6faa34);width:100%;transition:width .12s linear;position:absolute;inset:0 auto 0 0}.hpbar.mid i{background:linear-gradient(#ffe07a,#d9a326)}.hpbar.low i{background:linear-gradient(#ff9b7a,#d8462a)}.hpbar b{text-shadow:0 1px 2px #000;place-items:center;font-size:13px;line-height:1;display:grid;position:absolute;inset:0}.lives{gap:4px;display:flex}.life{background:radial-gradient(circle at 35% 30%,#fff 0 16%,#ffd86a 20%,#c8901a 100%);border-radius:50%;width:13px;height:13px}.life.lost{border:2px dashed var(--chalk-faint);background:0 0}.timer{text-align:center;min-width:64px;padding:6px 10px 4px;font-size:30px;font-weight:800;line-height:1}.timer small{color:var(--chalk-dim);font-size:11px;font-weight:700;display:block}.timer.shrink{color:var(--danger)}.aim-title{text-shadow:0 3px #0006;font-size:27px;font-weight:800;line-height:1.05}.aim-status{font-size:15px}.aim-status.done{color:var(--earth)}.ballinfo{align-items:center;gap:10px;padding:8px 12px;display:flex}.ballinfo .marble{width:44px;height:44px}.ballinfo .t{flex-direction:column;gap:2px;display:flex}.ballinfo b{font-size:19px;line-height:1}.lock-btn{min-width:150px}.aim-hint{margin-bottom:8px;font-size:15px}.skill-wrap{flex-direction:column;align-items:center;gap:4px;margin-top:6px;display:flex}.skill-btn{cursor:pointer;width:118px;height:118px;color:var(--chalk);font:800 20px/1 var(--round);background:radial-gradient(circle at 36% 30%, #ffffff73, #fff0 32%), radial-gradient(circle at 50% 55%, var(--skill-core,#e2552d), var(--skill-dark,#6d1d10) 78%);border:none;border-radius:50%;padding:0;transition:transform 60ms,filter .2s;position:relative;box-shadow:0 6px #00000059,0 12px 24px #0006}.skill-btn svg{pointer-events:none;width:calc(100% + 22px);height:calc(100% + 22px);position:absolute;inset:-11px;transform:rotate(-90deg)}.skill-btn .track{fill:none;stroke:#00000073;stroke-width:9px}.skill-btn .energy{fill:none;stroke:var(--accent);stroke-width:9px;stroke-linecap:round;transition:stroke .2s}.skill-btn .label{text-shadow:0 2px 3px #0009;flex-direction:column;align-items:center;gap:3px;display:flex;position:relative}.skill-btn .state{opacity:.9;font-size:13px;font-weight:700}.skill-btn.cooldown,.skill-btn.charging{filter:saturate(.45)brightness(.8)}.skill-btn.cooldown .energy{stroke:var(--chalk-dim)}.skill-btn.ready{animation:.9s ease-in-out infinite ready}.skill-btn.ready .energy{stroke:#fff6c2}.skill-btn.pressed{transform:scale(.93)}.skill-btn.blocked{filter:grayscale()brightness(.7)}@keyframes ready{50%{box-shadow:0 6px #00000059,0 0 32px 6px #ffdc6ebf}}.overlay{place-items:center;padding:24px;display:none;position:absolute;inset:0}.overlay.on{display:grid}.overlay.block{pointer-events:auto;background:#140c068c}.card{text-align:center;flex-direction:column;align-items:center;gap:10px;min-width:260px;max-width:380px;padding:20px 22px;animation:.25s ease-out pop;display:flex}.card h2{margin:0;font-size:36px;line-height:1}.card .sub{font-size:16px}.card .versus{align-items:center;gap:18px;font-size:15px;display:flex}.card .versus>div{flex-direction:column;align-items:center;gap:4px;display:flex}.card .btns{flex-direction:column;gap:10px;width:100%;margin-top:6px;display:flex}.win{color:var(--accent)}.lose{color:#ffb4a3}@keyframes pop{0%{opacity:0;transform:scale(.85)}}.toast{left:50%;bottom:calc(var(--bottom-h) + 8px);border:2px dashed var(--chalk-faint);white-space:nowrap;opacity:0;background:#140c06d9;border-radius:999px;padding:8px 16px;font-size:16px;transition:opacity .25s;position:absolute;transform:translate(-50%)}.toast.on{opacity:1}.chip{color:var(--chalk);white-space:nowrap;background:#f3eee424;border-radius:999px;padding:1px 8px;font-size:12px;font-weight:700;line-height:18px;display:inline-block}.chip.adv{background:#5f9a2e}.chip.dis{background:#b0412a}.chip.bonus{background:var(--accent);color:var(--ink)}.chips{flex-wrap:wrap;gap:4px;display:inline-flex}.pcard .line .meta{text-overflow:ellipsis;overflow:hidden}.relations{flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:700;display:flex}.relations .up{color:#a8e070}.relations .down{color:#ff9a80}.perfect-line{color:#ffe08a}.perfect-line b{color:var(--accent)}.skill-btn.hint{animation:.7s ease-in-out infinite perfect-hint}.skill-btn.hint.now{filter:brightness(1.25);animation-duration:.22s}.skill-btn.hint .energy{stroke:#ffd23f}.skill-btn.hint .state{color:#ffe36a}@keyframes perfect-hint{50%{transform:scale(1.04);box-shadow:0 6px #00000059,0 0 0 6px #ffd23f8c,0 0 42px 14px #ffd23fd9}}.between header{justify-content:space-between;align-items:center;gap:12px;display:flex}.between h1{margin:0;font-size:28px;line-height:1}.between .sub{font-size:16px;font-weight:700}.curball{align-items:center;gap:12px;padding:10px 14px;display:flex}.curball .marble{flex:none;width:54px;height:54px}.curball .t{flex-direction:column;gap:2px;min-width:0;display:flex}.curball b{font-size:19px;line-height:1.1}.between-body{flex-direction:column;gap:10px;display:flex}.section-title{font-size:17px;font-weight:800}.section-title .muted{font-size:14px;font-weight:600}.evo-note{background:#ffd23f29;border:2px dashed #ffd23f8c;border-radius:12px;padding:6px 10px;font-size:14px}.deal{justify-content:center;gap:8px;display:flex}.ucard{appearance:none;max-width:120px;min-height:150px;color:var(--ink);font-family:var(--round);cursor:pointer;animation:.42s cubic-bezier(.2,.9,.3,1.25) both deal;animation-delay:calc(var(--i) * 90ms);background:radial-gradient(circle at 50% 22%,#ffffffe6,#fff0 55%),linear-gradient(170deg,#fbf3e0,#ecdcb8);border:3px solid #e8d8b4;border-radius:14px;flex-direction:column;flex:1 1 0;align-items:center;gap:4px;padding:10px 6px 8px;transition:transform .12s;display:flex;box-shadow:0 5px #a8916a,0 12px 18px #00000073}.ucard .icon{width:42px;height:42px;color:var(--accent);background:#3a281c;border:2px dashed #c9a96a;border-radius:50%;place-items:center;font-size:24px;display:grid}.ucard b{text-align:center;font-size:15px;line-height:1.05}.ucard .desc{text-align:center;color:#4a3424;font-family:system-ui,sans-serif;font-size:12px;line-height:1.2}.ucard:active{transform:translateY(3px)}.ucard.chosen{border-color:var(--accent);transform:translateY(-10px)scale(1.06)}@keyframes deal{0%{opacity:0;transform:translate(40vw,30vh)rotate(25deg)scale(.6)}}.btn-row{gap:10px;display:flex}.btn-row .btn{flex:1}.waiting{text-align:center;flex-direction:column;gap:4px;padding:16px;font-size:17px;display:flex}.between .info{touch-action:pan-y;pointer-events:auto;min-height:0;max-height:34vh;overflow-y:auto}.between .pick .marble{width:64px;height:64px}.opp-status{text-align:center;font-size:15px}.opp-status.done{color:var(--earth)}.acc{text-align:left;flex-direction:column;gap:4px;width:100%;font-size:14px;display:flex}.acc.big .acc-title{font-size:17px}.acc-bar{background:#00000073;border-radius:6px;height:10px;display:flex;overflow:hidden}.acc-bar i{height:100%;display:block}.acc-bar .p{background:#ffd23f}.acc-bar .g{background:#9ccc5c}.acc-bar .m{background:#8a7a6a}.acc-legend{font-size:12px}.lobby-foot{flex-direction:column;align-items:center;gap:2px;display:flex}.linkbtn{appearance:none;color:var(--chalk);font:700 16px var(--round);-webkit-text-decoration:underline dashed var(--chalk-dim);text-decoration:underline dashed var(--chalk-dim);text-underline-offset:4px;cursor:pointer;background:0 0;border:none;padding:6px 10px}.netline{min-height:18px;font-size:13px}.search{text-align:center;justify-content:center;gap:16px}.search h2,.host h1{margin:0;font-size:30px}.search b{color:var(--accent)}.host .col{text-align:center}.code-box{flex-direction:column;gap:4px;padding:16px 12px 12px;display:flex}.code-box .code{letter-spacing:.16em;color:var(--accent);-webkit-user-select:all;user-select:all;font-size:46px;font-weight:800;line-height:1}.host .waiting{font-size:16px}.dots:after{content:"";animation:1.5s steps(4,end) infinite dots}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.code-input{border:2px dashed var(--chalk-dim);width:100%;color:var(--chalk);font:800 30px var(--round);letter-spacing:.2em;text-align:center;text-transform:uppercase;-webkit-user-select:text;user-select:text;touch-action:manipulation;pointer-events:auto;background:#00000059;border-radius:14px;outline:none;padding:10px 12px 8px}.code-input:focus{border-color:var(--accent)}.code-input::placeholder{color:var(--chalk-faint);letter-spacing:.1em}.overlay.block.dim{background:#140c06d1}.spinner.small{border-width:3px;width:44px;height:44px}.pcard.offline{opacity:.55}.pcard.offline .name:after{content:" · terputus";color:#ffb4a3;font-size:12px;font-weight:700}.timer .ping{opacity:.85;margin-top:2px;font-size:10px;font-weight:700;display:block}.ping.good{color:#a8e070}.ping.ok{color:#ffe08a}.ping.bad{color:#ff9a80}.mode-toggle{border:2px dashed var(--chalk-faint);background:#0000004d;border-radius:16px;grid-template-columns:1fr 1fr;padding:4px;display:grid}.mode-toggle button{appearance:none;color:var(--chalk-dim);font:800 18px var(--round);cursor:pointer;background:0 0;border:none;border-radius:12px;padding:7px 0 5px}.mode-toggle button.on{background:var(--chalk);color:var(--ink)}.row2{grid-template-columns:1fr 1fr;gap:10px;display:grid}.row2 .btn{font-size:17px}.party{text-align:left;grid-template-columns:1fr 1fr;gap:10px;display:grid}.party:empty,.party-actions:empty{display:none}.team-col{flex-direction:column;gap:6px;min-width:0;padding:8px;display:flex}.team-label{color:var(--chalk-dim);font-size:14px;font-weight:800}.seat{white-space:nowrap;text-overflow:ellipsis;background:#ffffff14;border-radius:12px;padding:8px 10px 6px;font-size:15px;font-weight:700;overflow:hidden}.seat small{opacity:.75;font-weight:600}.seat.you{background:#ffcf4a38}.seat.off{opacity:.55}.seat.empty{border:2px dashed var(--chalk-faint);color:var(--chalk-dim);background:0 0;font-size:13px;font-weight:600}button.seat.empty{appearance:none;text-align:left;cursor:pointer;width:100%;color:var(--accent);border-color:var(--accent-dark);font-family:var(--round)}.party-actions{flex-direction:column;gap:10px;display:flex}.hud .cards{flex:1;gap:8px;min-width:0;display:flex}.pcard.compact{gap:4px;padding:6px 8px 7px}.pcard.compact .name{font-size:14px}.pcard.compact .meta{font-size:11px}.pcard.compact .hpbar{height:14px}.pcard.compact .life{width:7px;height:7px}.pcard.compact .life.lost{border-width:1px}.pcard.compact .lives{flex-shrink:0;gap:2px}.pcard.compact .line{gap:4px}.pcard.compact .chip{padding:0 5px;font-size:10px;line-height:15px}.pcard.compact .badge-bot{padding:0 4px;font-size:9px;line-height:13px}.pcard.nolives .lives{display:none}.pcard.ally{border-color:#7cc8ff99}.pcard.down{opacity:.5}.versus small{max-width:130px;font-size:12px;display:block}.acc-rows{flex-direction:column;gap:3px;width:100%;font-size:14px;display:flex}.acc-row{justify-content:space-between;gap:8px;display:flex}.acc-row span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.screen{padding-top:max(14px, env(safe-area-inset-top), calc(var(--tg-safe-area-inset-top,0px) + var(--tg-content-safe-area-inset-top,0px)))}.screen.on{animation:.18s ease-out screen-in}.screen.hud.on{animation:none}@keyframes screen-in{0%{opacity:0;transform:translateY(6px)}}.lobby-top{justify-content:space-between;align-items:center;gap:10px;width:100%;max-width:460px;display:flex}.lobby .title{margin-top:4px}.icon-btn{appearance:none;border:2px dashed var(--chalk-faint);background:var(--panel);width:42px;height:42px;color:var(--chalk);font:800 20px/1 var(--round);cursor:pointer;border-radius:50%;flex-shrink:0}.profile-chip{appearance:none;border:2px dashed var(--chalk-faint);background:var(--panel);min-width:0;max-width:240px;color:var(--chalk);font-family:var(--round);text-align:left;cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:4px 10px 4px 4px;display:flex}.profile-chip .avatar{object-fit:cover;background:var(--accent);width:32px;height:32px;color:var(--ink);border-radius:50%;flex-shrink:0;place-items:center;font-weight:800;display:grid}.profile-chip .t{flex-direction:column;min-width:0;line-height:1.1;display:flex}.profile-chip b,.profile-chip small{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.profile-chip b{font-size:14px}.profile-chip small{color:var(--accent);font-size:12px;font-weight:700}.board header{text-align:center;grid-template-columns:42px 1fr 42px;align-items:center;display:grid}.board h1{margin:0;font-size:28px}.board .me{flex-direction:column;gap:8px;padding:12px 14px;display:flex}.board .me:empty{display:none}.me-top{justify-content:space-between;font-size:18px;display:flex}.me-top .rt{color:var(--accent);font-weight:800}.me-stats{text-align:center;color:var(--chalk-dim);grid-template-columns:repeat(4,1fr);font-size:12px;display:grid}.me-stats b{color:var(--chalk);font-size:20px;display:block}.board-list{pointer-events:auto;touch-action:pan-y;flex:1;min-height:0;padding:6px;overflow-y:auto}.board-list .empty{text-align:center;padding:24px 12px}.brow{border-radius:12px;grid-template-columns:34px 1fr auto 52px;align-items:center;gap:8px;padding:8px 8px 6px;font-size:15px;display:grid}.brow+.brow{border-top:1px dashed var(--chalk-faint)}.brow.you{background:#ffcf4a33}.brow .rk{text-align:center;font-weight:800}.brow .nm{white-space:nowrap;text-overflow:ellipsis;font-weight:700;overflow:hidden}.brow .wr{font-size:12px}.brow .rt{text-align:right;color:var(--accent)}.board-note{text-align:center;font-size:12px}.banner{pointer-events:none;text-shadow:0 4px #00000073;flex-direction:column;align-items:center;display:none;position:absolute;top:42%;left:0;right:0}.banner.on{animation:1.1s ease-out forwards banner;display:flex}.banner b{color:var(--accent);font-size:46px;font-weight:800}.banner small{font-size:17px;font-weight:700}@keyframes banner{0%{opacity:0;transform:scale(1.5)}15%{opacity:1;transform:scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-14px)}}.rating-line{font-size:18px;font-weight:700}.rating-line.pop{animation:.3s ease-out pop}.rating-line .delta{background:#f3eee426;border-radius:999px;padding:0 8px;font-size:15px;display:inline-block}.rating-line .delta.up{background:#5f9a2e}.rating-line .delta.down{background:#b0412a}.screen.hud{padding:0}