*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}:root{--bg: #1a120b;--panel: #241812;--panel2: #2f2016;--gold: #ffd76a;--cream: #f5e9c8;--muted: rgba(245, 233, 200, .6);--green: #2e9e5b;--red: #d84a3f}html,body{height:100%;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--cream);-webkit-user-select:none;user-select:none;touch-action:manipulation}#game-container{position:fixed;inset:0}#game-container canvas{display:block}#ui-root{position:fixed;inset:0;pointer-events:none;z-index:10}.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 18px) 18px calc(env(safe-area-inset-bottom,0px) + 18px);pointer-events:auto;overflow-y:auto}.screen.active{display:flex}.screen.overlay{background:#0a0603d1;backdrop-filter:blur(6px);justify-content:center}button{font-family:inherit;color:inherit;border:none;background:none;cursor:pointer}.btn{background:var(--panel2);border:1px solid rgba(255,215,106,.25);color:var(--cream);border-radius:14px;padding:13px 22px;font-size:16px;font-weight:600}.btn:disabled{opacity:.35}.btn-primary{background:linear-gradient(180deg,#e8b84b,#c98f2a);color:#241505;border:none}.btn-danger{background:linear-gradient(180deg,#d84a3f,#a92f26);color:#fff;border:none}.btn-gold{background:linear-gradient(180deg,#e8b84b,#c98f2a);color:#241505}.btn-small{padding:9px 14px;font-size:14px;border-radius:10px}.btn-back{font-size:40px;line-height:1;color:var(--gold);padding:4px 14px}.spinner{width:46px;height:46px;border-radius:50%;border:4px solid rgba(255,215,106,.2);border-top-color:var(--gold);animation:spin .9s linear infinite;margin:40vh auto 14px}@keyframes spin{to{transform:rotate(360deg)}}.boot-text{text-align:center;color:var(--muted)}#screen-home{justify-content:space-between;max-width:520px;margin:0 auto;width:100%}.home-top{display:flex;justify-content:space-between;width:100%}.chip{background:var(--panel);border:1px solid rgba(255,215,106,.18);border-radius:20px;padding:8px 14px;font-size:15px;display:flex;align-items:center;gap:8px}.ava{font-size:20px}.logo{text-align:center;margin:8px 0}.logo h1{font-size:44px;letter-spacing:2px;color:var(--gold);text-shadow:0 3px 0 rgba(0,0,0,.5)}.logo-sub{letter-spacing:6px;font-size:11px;color:var(--muted);margin-top:4px}.logo-tiles{display:flex;justify-content:center;gap:6px;margin-bottom:10px}.lt{font-style:normal;width:40px;height:54px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;background:linear-gradient(180deg,#faf5e6,#e8dfc8);box-shadow:0 4px 8px #00000073;transform:rotate(-4deg)}.lt-b{transform:rotate(2deg) translateY(-4px);color:#2b6bd4}.lt-r{color:#d23b3b}.lt-y{transform:rotate(5deg);color:#c99a00}#resume-card{width:100%}.resume{width:100%;padding:13px;border-radius:14px;font-size:16px;font-weight:700;background:#2e9e5b2e;border:1px solid rgba(46,158,91,.5);color:#b8ecd0;margin-bottom:10px}.mode-list{width:100%;display:flex;flex-direction:column;gap:10px}.mode{border-radius:16px;padding:15px 18px;text-align:left;display:flex;flex-direction:column;gap:2px;border:1px solid rgba(255,215,106,.22);background:var(--panel)}.mode b{font-size:19px;letter-spacing:1px}.mode span{font-size:13px;color:var(--muted)}.mode.ranked b{color:var(--gold)}.mode.quick b{color:#7ec8ff}.offline-block{border-radius:16px;padding:12px 14px;background:var(--panel);border:1px solid rgba(255,215,106,.14)}.offline-head{display:flex;flex-direction:column;margin-bottom:8px}.offline-head b{font-size:16px;letter-spacing:1px;color:#b8ecd0}.offline-head span{font-size:12px;color:var(--muted)}.diff-row{display:flex;gap:8px}.diff{flex:1;padding:11px 4px;border-radius:12px;background:var(--panel2);border:1px solid rgba(255,215,106,.16);font-size:13px;font-weight:700}.diff:active{transform:scale(.96)}.home-links{display:flex;gap:8px;width:100%;justify-content:center}.link{background:var(--panel);border-radius:12px;padding:11px 13px;font-size:14px;border:1px solid rgba(255,215,106,.14)}.screen-head{display:flex;align-items:center;gap:8px;width:100%;max-width:520px;margin-bottom:14px}.screen-head h2{font-size:22px;color:var(--gold)}.season-line{color:var(--muted);font-size:14px;margin-bottom:12px}.lb-list{width:100%;max-width:520px;display:flex;flex-direction:column;gap:6px}.lb-row{display:flex;align-items:center;gap:10px;background:var(--panel);border-radius:12px;padding:10px 14px;border:1px solid rgba(255,215,106,.1)}.lb-row.me{border-color:#ffd76a80;background:#ffd76a14}.lb-rank{width:30px;color:var(--gold)}.lb-name{flex:1;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lb-score{color:var(--gold);font-size:16px}.lb-empty{color:var(--muted);text-align:center;padding:30px}.profile-body,.settings-body,.rules-body{width:100%;max-width:520px;display:flex;flex-direction:column;gap:14px}.pf-row label,.set-row span{font-size:14px;color:var(--muted)}.pf-row{display:flex;flex-direction:column;gap:8px}.pf-nick,.pf-id{display:flex;gap:8px;align-items:center}.pf-nick input{flex:1;background:var(--panel);border:1px solid rgba(255,215,106,.2);color:var(--cream);border-radius:10px;padding:12px;font-size:16px;outline:none}.pf-id code{flex:1;background:var(--panel);padding:12px;border-radius:10px;font-size:18px;letter-spacing:3px;color:var(--gold)}.avatar-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}.ava-btn{font-size:24px;padding:8px 0;background:var(--panel);border-radius:10px;border:2px solid transparent}.ava-btn.sel{border-color:var(--gold);background:#ffd76a1f}.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:6px}.pf-stats div{background:var(--panel);border-radius:12px;padding:12px 4px;text-align:center}.pf-stats b{display:block;font-size:20px;color:var(--gold)}.pf-stats span{font-size:12px;color:var(--muted)}.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel);border-radius:12px;padding:12px 14px}.toggle{width:52px;height:30px;border-radius:15px;background:#4a3826;position:relative;transition:background .2s}.toggle.on{background:var(--green)}.toggle:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s}.toggle.on:after{transform:translate(22px)}.lang-row,.cosmetic-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.lang,.cos{background:var(--panel2);border:1px solid rgba(255,215,106,.18);border-radius:10px;padding:8px 12px;font-size:13px}.lang.sel,.cos.sel{background:#ffd76a2e;border-color:var(--gold)}.cos.locked{opacity:.45}.rule{display:flex;gap:10px;background:var(--panel);border-radius:12px;padding:12px 14px;align-items:flex-start}.rule b{color:var(--gold);min-width:20px}.rule span{font-size:14.5px;line-height:1.45}.rules-ok{margin:18px auto 0}.queue-box{display:flex;flex-direction:column;align-items:center;gap:18px}.queue-spinner{width:60px;height:60px;border-radius:50%;border:5px solid rgba(255,215,106,.2);border-top-color:var(--gold);animation:spin .9s linear infinite}.queue-title{font-size:18px}.result-box{width:100%;max-width:460px;background:var(--panel);border:1px solid rgba(255,215,106,.3);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:14px}.res-title{text-align:center;font-size:28px;font-weight:800;letter-spacing:1px}.res-title.gold{color:var(--gold);text-shadow:0 2px 12px rgba(255,215,106,.4)}.flag{text-align:center;display:block;color:#ffb27a;font-size:14px}.res-rows{display:flex;flex-direction:column;gap:6px}.res-row{display:flex;align-items:center;gap:8px;background:var(--panel2);border-radius:10px;padding:9px 12px}.res-row.winner{border:1px solid rgba(255,215,106,.55)}.res-row.me{background:#ffd76a14}.res-name{flex:1;font-size:15px}.res-tag{font-size:11px;color:var(--muted)}.res-pen{color:var(--red);font-size:16px}.res-pen.opp{color:#ffb27a}.res-xp{text-align:center;color:#b8ecd0;font-weight:700}.res-btns{display:flex;gap:10px;justify-content:center}.confirm-box{background:var(--panel);border-radius:18px;padding:24px;max-width:360px;text-align:center;display:flex;flex-direction:column;gap:16px}#hud{position:absolute;inset:0;pointer-events:none}#hud.hidden{display:none}#action-bar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);display:flex;gap:8px;justify-content:center;padding:0 12px;pointer-events:auto}.ab{background:#241812eb;border:1px solid rgba(255,215,106,.3);color:var(--cream);border-radius:14px;min-width:52px;height:50px;font-size:18px;font-weight:700;padding:0 14px}.ab:disabled{opacity:.35}.ab.primary{background:linear-gradient(180deg,#e8b84b,#c98f2a);color:#241505;border:none}.ab.primary.hidden,.hidden{display:none}#emoji-bar{position:absolute;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);display:flex;flex-direction:column;gap:6px;pointer-events:auto}.em{background:#241812e6;border:1px solid rgba(255,215,106,.25);border-radius:50%;width:44px;height:44px;font-size:21px}#hud-menu{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;display:flex;flex-direction:column;gap:8px;pointer-events:auto;z-index:30}.mm{background:#241812f5;border:1px solid rgba(255,215,106,.3);border-radius:12px;padding:12px 18px;font-size:15px;text-align:left}#toast{position:fixed;top:18%;left:50%;transform:translate(-50%) translateY(-8px);background:#140c06f2;border:1px solid rgba(255,215,106,.4);color:var(--cream);padding:11px 20px;border-radius:14px;font-size:15px;opacity:0;transition:all .25s;z-index:60;pointer-events:none}#toast.show{opacity:1;transform:translate(-50%) translateY(0)}.ad-sim{position:fixed;inset:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:100}.ad-sim-box{background:#222;border:1px solid #444;border-radius:16px;padding:30px;text-align:center;display:flex;flex-direction:column;gap:14px;min-width:260px}.ad-sim-tag{color:#888;font-size:11px;letter-spacing:2px}.ad-sim-name{color:#fff;font-size:18px}.ad-sim-count{color:var(--gold);font-size:34px;font-weight:800}