:root{color-scheme:dark;--bg: #14161f;--panel: #1f2230;--panel-border: #33384d;--text: #e8e9f0;--text-dim: #9aa0b4;--accent: #5fd6e0;--accent-strong: #38b6c2;--danger: #e0544f;--attack-glow: #39ff88;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}input,textarea{-webkit-user-select:text;user-select:text}html,body{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}#app{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}img{max-width:100%}[hidden]{display:none!important}.screen{width:100%;max-width:960px;display:flex;flex-direction:column;align-items:center;gap:16px}.logo{font-size:clamp(2rem,8vw,3.5rem);letter-spacing:.05em;color:var(--accent);margin:0}.menu-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}.btn{padding:14px 20px;font-size:1rem;border-radius:10px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);cursor:pointer;touch-action:manipulation}.btn:hover{border-color:var(--accent)}.btn-primary{background:var(--accent-strong);border-color:var(--accent-strong);color:#06202a;font-weight:600}.btn-small{padding:8px 12px;font-size:.85rem}.btn-back{margin-top:8px;opacity:.7}.lobby-code-box{display:flex;align-items:center;gap:12px}.lobby-code{font-size:2.5rem;letter-spacing:.2em;font-weight:700;color:var(--accent)}.code-input{font-size:1.5rem;letter-spacing:.3em;text-align:center;text-transform:uppercase;padding:12px;border-radius:10px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);width:220px}.lobby-status{color:var(--text-dim);min-height:1.2em}.lobby-form,.lobby-waiting,.lobby-browser{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:360px}.lobby-form h3{margin:8px 0 0;font-size:1rem;color:var(--text-dim)}.segmented{display:flex;width:100%;margin:0;padding:0;border:none}.segmented legend{width:100%;margin-bottom:6px;color:var(--text-dim);font-size:.85rem}.segmented label{flex:1}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:block;padding:10px 12px;text-align:center;border:1px solid var(--panel-border);background:var(--panel);cursor:pointer}.segmented label:first-of-type span{border-radius:10px 0 0 10px}.segmented label:last-of-type span{border-radius:0 10px 10px 0}.segmented input:checked+span{background:var(--accent-strong);border-color:var(--accent-strong);color:#06202a;font-weight:600}.segmented input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}.password-row{display:flex;gap:8px;width:100%}.text-input{flex:1;min-width:0;width:100%;font-size:1rem;padding:10px 12px;border-radius:10px;border:1px solid var(--panel-border);background:var(--panel);color:var(--text)}.lobby-meta{margin:0;color:var(--text-dim);overflow-wrap:anywhere;text-align:center}.lobby-list{list-style:none;margin:0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow-y:auto}.lobby-entry{border:1px solid var(--panel-border);border-radius:10px;background:var(--panel)}.lobby-entry.is-open{border-color:var(--accent)}.lobby-entry-main{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border:none;background:none;color:var(--text);font:inherit;cursor:pointer;touch-action:manipulation}.lobby-entry-code{font-weight:700;letter-spacing:.15em;color:var(--accent)}.lobby-entry-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.badge{font-size:.75rem;padding:2px 8px;border-radius:999px;border:1px solid var(--panel-border);color:var(--text-dim)}.badge-mobile{border-color:var(--accent);color:var(--accent)}.lobby-entry-password{display:flex;gap:8px;padding:0 14px 12px}.lobby-empty{margin:0;color:var(--text-dim)}.screen-game{position:relative;gap:8px;max-width:none;width:100%}.gesture-surface{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none;z-index:5;background:transparent}.game-hud{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px;width:100%}.hud-side-panels{display:contents}.hold-panel{order:1}.own-board-panel{order:2}.next-panel{order:3}.opponent-panel{order:4}.hud-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:6px}.hud-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim)}canvas{display:block;background:#0a0b12;border-radius:6px}.board-canvas{width:min(40vh,320px);height:auto;aspect-ratio:10 / 20}.opponent-canvas{width:min(20vh,160px);height:auto;aspect-ratio:10 / 20}.board-with-meter{display:flex;align-items:stretch;gap:6px}.attack-meter{position:relative;width:14px;flex:0 0 auto;border-radius:7px;background:#0a0b12;border:1px solid rgba(57,255,136,.35);box-shadow:0 0 8px #39ff8833 inset;overflow:hidden}.attack-meter[hidden]{display:none}.attack-meter-fill{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:bottom;transform:scaleY(var(--attack-fill, 0));transition:transform .22s ease-out;background:linear-gradient(to top,#1fd16a,var(--attack-glow) 70%,#b6ffd3);box-shadow:0 0 12px 2px #39ff88cc}.attack-meter:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to top,transparent calc(50% - 1px),rgba(232,233,240,.75) calc(50% - 1px),rgba(232,233,240,.75) calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to top,transparent calc(25% - .5px),rgba(232,233,240,.35) calc(25% - .5px),rgba(232,233,240,.35) calc(25% + .5px),transparent calc(25% + .5px)),linear-gradient(to top,transparent calc(75% - .5px),rgba(232,233,240,.35) calc(75% - .5px),rgba(232,233,240,.35) calc(75% + .5px),transparent calc(75% + .5px))}.attack-meter.attack-meter-fire{animation:attack-meter-fire .52s ease-out}@keyframes attack-meter-fire{0%{box-shadow:0 0 #39ff8800;border-color:#39ff8859}25%{box-shadow:0 0 22px 6px #39ff88e6;border-color:var(--attack-glow);background:#39ff8873}to{box-shadow:0 0 #39ff8800;border-color:#39ff8859}}.garbage-counters{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.75rem;color:var(--text-dim)}.score-display,.level-display{display:flex;flex-direction:column;align-items:center;gap:2px}.score-value,.level-value{font-size:1.25rem;font-weight:700;font-variant-numeric:tabular-nums}.final-score{font-size:1.1rem;color:var(--text-dim)}.screen-gameover h2{color:var(--accent)}@media(max-width:900px),(max-height:500px)and (pointer:coarse){.screen-game{position:fixed;top:0;right:0;bottom:0;left:0;max-width:none;width:100vw;height:100vh;height:100svh;height:100dvh;padding:calc(env(safe-area-inset-top,0px) + 8px) calc(env(safe-area-inset-right,0px) + 8px) calc(env(safe-area-inset-bottom,0px) + 8px) calc(env(safe-area-inset-left,0px) + 8px);margin:0;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;overflow:hidden}.game-hud{flex:1 1 auto;min-height:0;flex-wrap:nowrap;flex-direction:row;align-items:stretch;justify-content:center;gap:8px;width:100%}.own-board-panel{order:1;flex:1 1 auto;min-width:0;min-height:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;gap:4px}.own-board-panel .board-with-meter{flex:1 1 auto;min-height:0;max-width:100%;gap:4px}.attack-meter{width:10px}.own-board-panel .board-canvas{flex:1 1 auto;min-height:0;width:auto;height:100%;max-width:100%;aspect-ratio:10 / 20}.own-board-panel .score-display,.own-board-panel .level-display{flex:0 0 auto}.hud-side-panels{display:flex;flex-direction:column;order:2;flex:0 0 auto;justify-content:center;align-items:center;gap:6px;height:100%;overflow:hidden}.hud-side-panels .hud-panel{padding:4px;gap:2px;flex:0 0 auto}.hud-side-panels .hold-canvas,.hud-side-panels .next-canvas,.hud-side-panels .opponent-canvas{width:52px;height:auto}.hud-side-panels .opponent-canvas{aspect-ratio:10 / 20}.hud-side-panels .hud-label,.hud-side-panels .garbage-counters{font-size:.6rem}}.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-top:8px;font-size:.85rem}.legal-links a,.link-button{color:var(--text-dim)}.link-button{padding:0;border:0;background:none;font:inherit;text-decoration:underline;cursor:pointer}.legal-links a:hover,.link-button:hover{color:var(--accent)}.consent{position:fixed;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:10;max-width:760px;margin:0 auto;padding:16px 18px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;background:var(--panel);border:1px solid var(--panel-border);border-radius:12px;box-shadow:0 8px 32px #00000073}.consent-text{flex:1 1 320px;margin:0;color:var(--text-dim);font-size:.9rem}.consent-text a{color:var(--accent)}.consent-actions{display:flex;gap:10px;flex:1 0 auto;justify-content:flex-end}.consent-actions .btn{flex:1 0 auto}.audio-toggles{position:fixed;top:calc(env(safe-area-inset-top,0px) + 10px);right:calc(env(safe-area-inset-right,0px) + 10px);z-index:20;display:flex;gap:6px}.audio-toggle{width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--panel-border);background:var(--panel);color:var(--text);font-size:1rem;line-height:1;cursor:pointer;opacity:.85}.audio-toggle:hover,.audio-toggle:focus-visible{opacity:1;border-color:var(--accent)}.audio-toggle.is-muted{color:var(--text-dim);opacity:.5;text-decoration:line-through}@media(max-width:900px),(max-height:500px)and (pointer:coarse){.audio-toggle{width:30px;height:30px;font-size:.85rem}}.own-board-panel.shake-soft{animation:board-shake-soft .14s ease-out}.own-board-panel.shake-hard{animation:board-shake-hard .38s cubic-bezier(.36,.07,.19,.97)}.own-board-panel.garbage-warning{animation:garbage-warning .52s ease-out}@keyframes board-shake-soft{0%{transform:translateY(0)}35%{transform:translateY(3px)}to{transform:translateY(0)}}@keyframes board-shake-hard{10%,90%{transform:translate(-1px,1px)}20%,80%{transform:translate(3px,-1px)}30%,50%,70%{transform:translate(-5px,2px)}40%,60%{transform:translate(5px,-2px)}to{transform:translate(0)}}@keyframes garbage-warning{0%{box-shadow:0 0 #e0544f00;border-color:var(--panel-border)}25%{box-shadow:0 0 22px 4px #e0544fbf;border-color:var(--danger)}to{box-shadow:0 0 #e0544f00;border-color:var(--panel-border)}}@media(prefers-reduced-motion:reduce){.own-board-panel.shake-soft,.own-board-panel.shake-hard{animation:none}}