.snake-root{--ink: #07080a;--elevated: #14161c;--panel: #1a1d25;--fg: #eef0f3;--muted: #8b919a;--subtle: #5c6370;--line: #2a303c;--mint: #7dffb3;--mint-fg: #06210f;--danger: #ff6b5a;--font-display: "Trebuchet MS", "Avenir Next Condensed", "Segoe UI", system-ui, sans-serif;--font-sans: "Segoe UI", system-ui, -apple-system, sans-serif;--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;height:100%;min-height:100dvh;background:var(--ink);color:var(--fg);font-family:var(--font-sans)}.snake-root *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.snake-root button:not(:disabled){cursor:pointer;touch-action:manipulation}.shell{height:100vh;height:100dvh;height:100svh;max-height:100dvh;display:flex;justify-content:center;user-select:none;-webkit-user-select:none;overflow:hidden;background:var(--ink)}.col{width:100%;max-width:480px;height:100%;min-height:0;display:flex;flex-direction:column;padding-inline:max(16px,env(safe-area-inset-left),env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}header{display:flex;align-items:center;gap:8px;min-height:44px;flex:0 0 auto;position:relative;z-index:3}.brand{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px}header h1{margin:0;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.1}.ver-badge{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;border:1px solid color-mix(in oklab,var(--fg) 16%,transparent);background:color-mix(in oklab,var(--ink) 40%,transparent);color:var(--muted);font-family:var(--font-display);font-size:10px;font-weight:600;letter-spacing:.08em;white-space:nowrap}.icon-btn{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--elevated);color:var(--fg);border-radius:12px;position:relative;z-index:4}.icon-btn:active{transform:scale(.98)}.hud{min-width:56px;text-align:right;line-height:1.15;flex-shrink:0}.hud .lv{display:block;font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted)}.hud .score{font-family:var(--font-mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.best-chip{min-width:52px;text-align:right;line-height:1.15;flex-shrink:0}.best-chip .best-label{display:block;font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.14em;color:var(--muted)}.best-chip .best-value{font-family:var(--font-mono);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}.best-chip.is-hot .best-value{color:var(--mint)}.board-slot{flex:1 1 auto;min-height:0;min-width:0;width:100%;display:grid;place-items:center;margin-top:8px}.board-stack{position:relative;width:var(--board, min(100%, 70dvh));height:var(--board, min(100%, 70dvh));max-width:100%;max-height:100%}.board-frame{position:relative;width:100%;height:100%;border-radius:20px;padding:8px;background:var(--elevated);border:1px solid var(--line);box-shadow:0 18px 48px #0000006b,inset 0 1px #ffffff0a;touch-action:none}.board-frame canvas{display:block;width:100%;height:100%;border-radius:12px;touch-action:none}.veil{position:absolute;top:8px;right:8px;bottom:8px;left:8px;z-index:10;display:flex;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in oklab,var(--ink) 78%,transparent);pointer-events:auto;touch-action:manipulation;overflow:hidden}.veil.pause{background:color-mix(in oklab,var(--ink) 58%,transparent);border:0;width:auto}.card{margin:0 12px;width:100%;max-width:300px;max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:20px;border:1px solid var(--line);background:var(--elevated);padding:16px 16px 14px;text-align:center;animation:overlay-in .25s cubic-bezier(.22,1,.36,1)}.card-head{display:flex;align-items:center;justify-content:center;gap:8px}.kicker{font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0}.kicker.danger{color:var(--danger)}.card h2{margin:8px 0 0;font-family:var(--font-display);font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1}.card .tag,.card p{margin:8px 0 0;font-size:13px;color:var(--muted);line-height:1.35}.hi{margin:12px 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:color-mix(in oklab,var(--ink) 35%,transparent)}.hi-label{font-family:var(--font-display);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.hi-value{font-family:var(--font-mono);font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}.howto{margin:12px 0 0;text-align:left}.howto-title{margin:0 0 8px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--mint);text-align:center}.howto-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}.howto-list li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start}.howto-n{width:22px;height:22px;display:grid;place-items:center;border-radius:999px;background:var(--panel);color:var(--mint);font-family:var(--font-display);font-size:11px;font-weight:600;line-height:1}.howto-t{margin:0;font-size:12px;line-height:1.4;color:var(--fg)}.big-score{margin:12px 0 0;font-family:var(--font-mono);font-size:40px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;color:var(--fg)}.cta{margin-top:14px;height:48px;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;background:var(--mint);color:var(--mint-fg);font-family:var(--font-display);font-size:15px;font-weight:600;letter-spacing:.08em;animation:pulse-play 2.4s ease-in-out infinite;touch-action:manipulation}.cta:active{transform:scale(.98)}.cta.ghost{margin-top:8px;height:44px;background:transparent;color:var(--fg);border:1px solid var(--line);animation:none;font-size:13px}.toast{pointer-events:none;position:absolute;left:50%;top:50%;z-index:20;transform:translate(-50%,-50%);border-radius:12px;border:1px solid var(--line);background:var(--elevated);padding:8px 20px;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--mint);animation:toast-in .25s cubic-bezier(.22,1,.36,1)}.meta{flex:0 0 auto;margin-top:8px;display:flex;justify-content:space-between;padding:0 4px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}.dpad{--pad: clamp(48px, 13.5vw, 64px);flex:0 0 auto;display:grid;grid-template-columns:var(--pad) var(--pad) var(--pad);grid-template-rows:var(--pad) var(--pad) var(--pad);gap:6px;justify-content:center;margin:10px auto 0;touch-action:none}.col.is-idle .dpad,.col.is-idle .meta{display:none}.dpad-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:1px solid var(--line);background:var(--elevated);color:var(--fg);border-radius:12px;touch-action:none}.dpad-btn:active,.dpad-btn.is-down{transform:scale(.96);background:var(--panel)}.dpad-btn.pause{border-radius:999px;background:var(--panel);color:var(--mint)}.drawer-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40}.backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:color-mix(in oklab,black 55%,transparent);border:0;width:100%;animation:fade-in .25s cubic-bezier(.22,1,.36,1)}.drawer{position:absolute;inset:0 auto 0 0;width:min(22rem,86vw);display:flex;flex-direction:column;background:var(--ink);border-right:1px solid var(--line);padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));animation:drawer-in .4s cubic-bezier(.22,1,.36,1)}.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px 12px}.drawer-head h2{margin:0;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}.drawer-body{min-height:0;flex:1;overflow-y:auto;padding:0 16px 32px;display:flex;flex-direction:column;gap:20px}.label{margin:0 0 8px;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}.swatches{display:flex;flex-wrap:wrap;gap:10px}.swatch{width:32px;height:32px;border-radius:999px;border:2px solid transparent;box-shadow:inset 0 0 0 1px #ffffff1f}.swatch[data-active=true]{border-color:var(--fg);box-shadow:0 0 0 2px var(--ink),0 0 0 4px var(--fg)}.theme-swatch{width:44px;height:32px;border-radius:8px;border:2px solid transparent;box-shadow:inset 0 0 0 1px #ffffff1a}.theme-swatch[data-active=true]{border-color:var(--fg)}.slider-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}.slider-head .val{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums}.slider-wrap{position:relative;display:flex;align-items:center;height:28px}.slider-track,.slider-fill{pointer-events:none;position:absolute;left:0;height:4px;border-radius:999px}.slider-track{right:0;background:var(--line)}.slider-fill{background:var(--fg)}.snake-root input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:28px;background:transparent;margin:0;position:relative;z-index:1}.snake-root input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent}.snake-root input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border-radius:999px;background:var(--fg);border:0;box-shadow:0 0 0 3px var(--ink)}.snake-root input[type=range]::-moz-range-track{height:4px;background:transparent;border:0}.snake-root input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:999px;background:var(--fg);border:0;box-shadow:0 0 0 3px var(--ink)}.hint{margin:4px 0 0;font-size:11px;color:var(--subtle)}.toggle-row{display:flex;width:100%;align-items:center;justify-content:space-between;background:none;border:0;color:var(--fg);padding:4px 0;font-family:var(--font-display);font-size:13px;font-weight:500;letter-spacing:.04em;min-height:44px}.toggle{width:48px;height:28px;border-radius:999px;background:var(--line);position:relative}.toggle[data-on=true]{background:var(--mint)}.toggle-knob{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:var(--fg);transition:transform .15s cubic-bezier(.22,1,.36,1)}.toggle[data-on=true] .toggle-knob{transform:translate(20px);background:var(--mint-fg)}@keyframes overlay-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes drawer-in{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse-play{0%,to{box-shadow:0 0 color-mix(in oklab,var(--mint) 35%,transparent)}50%{box-shadow:0 0 0 8px color-mix(in oklab,var(--mint) 0%,transparent)}}@media(max-width:380px){header h1{font-size:11px;letter-spacing:.1em}.hud .score,.best-chip .best-value{font-size:13px}}@media(max-height:720px){.dpad{--pad: clamp(44px, 12vw, 56px);gap:4px;margin-top:8px}.card h2{font-size:clamp(20px,6vw,26px)}.big-score{font-size:clamp(28px,10vw,40px)}.howto-t{font-size:11px}.card{padding:12px}}@media(max-height:640px){.col.is-idle .board-slot{flex:1 1 auto}.howto-list{gap:6px}}@media(orientation:landscape)and (max-height:560px){.col{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"header dpad" "board dpad" "hud dpad";column-gap:12px;max-width:920px;padding-bottom:max(12px,env(safe-area-inset-bottom))}header{grid-area:header}.board-slot{grid-area:board;margin-top:4px}.meta{grid-area:hud;margin-top:4px}.dpad{grid-area:dpad;align-self:center;margin:0 4px 0 0;--pad: clamp(44px, 18vh, 56px)}.col.is-idle .dpad{display:none}.col.is-idle{grid-template-columns:minmax(0,1fr);grid-template-areas:"header" "board" "hud"}}@media(prefers-reduced-motion:reduce){.card,.toast,.drawer,.backdrop,.cta{animation:none}.toggle-knob{transition:none}}html,body,#root{margin:0;height:100%;overflow:hidden;background:#07080a;color:#eef0f3;overscroll-behavior:none;-webkit-font-smoothing:antialiased}button:not(:disabled){cursor:pointer}