:root{color:#173f35;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#e7efe9;font:16px/1.45 Microsoft YaHei,PingFang SC,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{-webkit-tap-highlight-color:transparent;min-width:320px;min-height:100svh;margin:0}button{font:inherit;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}#app{min-height:100svh}.game-shell{background:linear-gradient(135deg,#ffffff94,#d2e7dd33),radial-gradient(circle at 0 0,#5e96754d,#0000 36%),#e7efe9;grid-template-columns:minmax(360px,620px) minmax(320px,460px);justify-content:center;align-items:center;gap:24px;min-height:100svh;padding:24px;display:grid}.mobile-page-tabs{display:none}.game-stage{justify-items:center;gap:12px;width:100%;display:grid;position:relative}.canvas-panel{gap:8px;width:min(100%,520px);display:grid}.canvas-panel>span{color:#173f35;background:#ffffffb8;border-radius:6px;justify-self:start;padding:4px 9px;font-size:13px;font-weight:800}canvas{aspect-ratio:520/740;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#f8fbf7;border:1px solid #23604c47;border-radius:8px;width:min(100%,520px);max-height:calc(100svh - 48px);box-shadow:0 24px 60px #173f3533}.touch-controls{grid-template-columns:1fr 1fr;gap:12px;width:min(100%,520px);display:grid}.touch-controls button{color:#173f35;cursor:pointer;touch-action:none;-webkit-touch-callout:none;background:#ffffffd6;border:1px solid #23604c40;border-radius:8px;height:48px;font-size:32px;line-height:1}.hud{background:#ffffffd1;border:1px solid #23604c33;border-radius:8px;align-content:start;gap:18px;padding:28px;display:grid;box-shadow:0 18px 50px #173f3529}.mode-tabs{background:#e5eee8;border-radius:8px;grid-template-columns:1fr 1fr;gap:6px;padding:4px;display:grid}.mode-tabs button{color:#4d675e;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;min-height:38px;font-size:14px;font-weight:800}.mode-tabs button.is-active{color:#173f35;background:#fff;border-color:#23604c33;box-shadow:0 6px 14px #173f351a}.mobile-page-tabs{background:#e5eee8f5;border:1px solid #23604c24;border-radius:8px;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:6px;padding:4px}.mobile-page-tabs button{color:#4d675e;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;min-height:40px;font-weight:800}.mobile-page-tabs button.is-active{color:#173f35;background:#fff;border-color:#23604c33;box-shadow:0 6px 14px #173f351a}.brand-block{gap:8px;display:grid}.profile-panel{grid-template-columns:1fr auto;align-items:end;gap:10px;display:grid}.profile-panel label{color:#607a70;gap:5px;font-size:13px;font-weight:700;display:grid}.profile-panel input,.room-actions input{color:#173f35;background:#fff;border:1px solid #23604c38;border-radius:8px;width:100%;min-height:38px;padding:7px 10px}.profile-panel>button,.room-actions button,.avatar-summary button{color:#173f35;cursor:pointer;background:#fff;border:1px solid #23604c38;border-radius:8px;min-height:38px;padding:7px 12px}.avatar-summary{color:#607a70;grid-column:1/-1;grid-template-columns:auto minmax(120px,max-content) auto 1fr;align-items:center;gap:8px;font-size:13px;font-weight:700;display:grid}.avatar-summary b{color:#fff;background:#1f5c4c;border-radius:8px;place-items:center;min-width:118px;height:38px;padding:0 10px;font-size:15px;display:inline-grid}.avatar-summary button{justify-self:start;min-height:34px;padding:6px 12px}.avatar-picker{grid-column:1/-1;grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.avatar-picker button{color:#fff;background:var(--avatar);cursor:pointer;border:2px solid #0000;border-radius:8px;place-items:center;gap:2px;min-height:54px;padding:6px;font-weight:800;display:grid}.avatar-picker button b{font-size:16px}.avatar-picker button span{font-size:11px;line-height:1.1}.avatar-picker button.is-active{border-color:#f0b429;box-shadow:0 0 0 2px #f0b42940}.room-panel{background:#f7fbf6;border:1px solid #23604c29;border-radius:8px;gap:8px;padding:12px;display:grid}.room-actions{grid-template-columns:1fr 92px 64px;gap:8px;display:grid}.room-joined{grid-template-columns:1fr auto auto;align-items:center;gap:10px;display:grid}.room-joined button{color:#9a2f25;cursor:pointer;background:#fff;border:1px solid #9a2f253d;border-radius:8px;min-height:36px;padding:7px 12px}.room-joined #roomActionButton{color:#fff;background:#1f5c4c;border-color:#1f5c4c33}.room-joined #roomActionButton:disabled{color:#71827b;cursor:not-allowed;background:#e5eee8;border-color:#23604c24}.room-panel p{color:#4d675e;margin:0;font-size:13px}.kicker{color:#9a2f25;margin:0;font-weight:800}h1{color:#123d31;letter-spacing:0;margin:0;font-size:36px;line-height:1.14}.brand-block p:last-child{color:#4d675e;margin:0}.player-board{grid-template-columns:1fr 1fr;gap:10px;max-height:220px;display:grid;overflow:auto}.player-card{background:#f7fbf6;border:1px solid #23604c26;border-left:5px solid #1f5c4c;border-radius:8px;min-height:94px;padding:12px}.player-card span{color:#607a70;font-size:13px;font-weight:700;display:block}.player-card strong{color:#173f35;margin-top:6px;font-size:24px;line-height:1.1;display:block}.player-card p{color:#4d675e;margin:8px 0 0;font-size:13px}.player-card b,.player-card em{color:#173f35;font-style:normal}.score-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.score-grid div{background:#f7fbf6;border:1px solid #23604c26;border-radius:8px;min-height:76px;padding:12px}.score-grid span{color:#607a70;font-size:13px;display:block}.score-grid strong{color:#173f35;margin-top:6px;font-size:22px;line-height:1.15;display:block}.progress-wrap{gap:8px;display:grid}.progress-track{background:#d4e3dc;border-radius:999px;height:12px;overflow:hidden}[hidden]{display:none!important}.progress-track span{border-radius:inherit;width:0;height:100%;transition:width .18s;display:block}.p1-track span{background:linear-gradient(90deg,#34785f,#c02f25)}.p2-track span{background:linear-gradient(90deg,#2d5f9f,#f0b429)}.powerups{gap:10px;display:grid}.powerups button,.message-panel button{color:#173f35;cursor:pointer;background:#fff;border:1px solid #23604c38;border-radius:8px}.powerups button{text-align:left;grid-template-columns:108px 1fr;align-items:center;min-height:54px;padding:10px 12px;display:grid}.powerups strong{color:#123d31}.powerups span{color:#607a70;font-size:13px}.powerups button:hover:not(:disabled),.message-panel button:hover{border-color:#c02f2573;box-shadow:0 8px 20px #173f351c}.powerups button:disabled{cursor:not-allowed;opacity:.56}.powerups .is-used{background:#eef3ef}.message-panel{background:#fff8f3;border:1px solid #c02f252e;border-radius:8px;gap:12px;padding:16px;display:grid}.message-panel.is-hidden{display:none}.message-panel strong{color:#9a2f25;font-size:20px}.message-panel p{color:#4d675e;margin:0}.message-panel button{color:#fff;background:#1f5c4c;min-height:44px;padding:9px 14px}.message-panel button:disabled{cursor:not-allowed;opacity:.55}.scoreboard{background:#f7fbf6;border:1px solid #23604c29;border-radius:8px;gap:8px;padding:12px;display:grid}.scoreboard>strong{color:#173f35}.scoreboard ol{max-height:180px;margin:0;padding-left:22px;overflow:auto}.scoreboard li{color:#4d675e;padding:4px 0}.scoreboard li span{color:#173f35;min-width:92px;display:inline-block}.scoreboard li b{font-weight:700}@media (width<=900px){.game-shell{grid-template-columns:1fr;align-items:start;padding:14px}canvas{max-height:68svh}.hud{order:-1;padding:18px}h1{font-size:28px}}@media (width<=520px){.game-shell{gap:14px}.score-grid,.player-board{grid-template-columns:1fr}.score-grid div{min-height:62px}.powerups button,.room-actions,.room-joined{grid-template-columns:1fr}}body[data-mobile-layout=true] .game-shell{-webkit-user-select:none;user-select:none;grid-template-columns:1fr;align-items:start;gap:12px;min-height:100svh;padding:10px;display:grid}body[data-mobile-layout=true] .mobile-page-tabs{z-index:10;display:grid;position:sticky;top:8px}body[data-mobile-layout=true] .game-stage{align-content:start;min-height:calc(100svh - 72px)}body[data-mobile-layout=true] .canvas-panel{width:min(100%,520px)}body[data-mobile-layout=true] canvas{width:100%;max-height:calc(100svh - 136px)}body[data-mobile-layout=true] .touch-controls{position:sticky;bottom:10px}body[data-mobile-layout=true] .hud{order:initial;max-height:none;padding:16px;box-shadow:0 12px 32px #173f351f}body[data-mobile-layout=true] .brand-block{gap:6px}body[data-mobile-layout=true] h1{font-size:26px}