:root{color-scheme:dark;--bg:#0b121b;--panel:#12212b;--line:#273a44;--mint:#78f6c1;--text:#eef7f6;--muted:#a0b2bd;--pink:#ff7496;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% -30%,#193d39 0,transparent 58%),var(--bg);color:var(--text);min-height:100vh;min-height:100svh}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid white;outline-offset:4px}button:active{transform:translateY(2px)}button:disabled{opacity:.4;cursor:default}button:disabled:active{transform:none}.game-shell{width:min(100%,776px);margin:auto;padding:30px 24px max(22px,env(safe-area-inset-bottom));padding-top:max(24px,env(safe-area-inset-top))}.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px}.eyebrow{color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.16em;margin:0 0 7px}h1{font-size:clamp(1.6rem,5.4vw,2rem);letter-spacing:-.04em;line-height:1.1;margin:0;font-weight:850}h1 span{color:var(--mint)}.edition{font-size:.75rem;color:var(--mint);letter-spacing:.12em;line-height:1.55;border-left:2px solid var(--mint);padding-left:12px}.dashboard{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}.scores{display:flex;gap:28px}.scores>div{display:flex;flex-direction:column;gap:2px}.label{font-size:.75rem;letter-spacing:.08em;color:var(--muted);font-weight:700}.scores strong{font-size:1.9rem;line-height:1.15;font-variant-numeric:tabular-nums}.scores>div+div strong{color:#a6bac3}.auto{display:flex;gap:18px;align-items:center;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);min-height:60px;text-align:left}.auto-copy{font-size:.9rem;font-weight:650;line-height:1.25}.auto small{display:block;font-size:.75rem;font-weight:600;color:var(--muted);margin-top:3px}.track{display:block;background:#3b505c;width:40px;height:24px;padding:3px;border-radius:24px;flex-shrink:0;transition:background .15s}.track>span{display:block;background:#c3d1d6;width:18px;height:18px;border-radius:50%;transition:transform .15s}.auto[aria-checked=true]{border-color:#3c8c72;background:#16372d}.auto[aria-checked=true] .track{background:var(--mint)}.auto[aria-checked=true] .track>span{transform:translateX(16px);background:#133d2f}.auto[aria-checked=true] small{color:var(--mint)}.arena{position:relative;overflow:hidden;border:1px solid #365446;border-radius:16px;background:#101c26;box-shadow:0 16px 60px #0005,0 0 32px #59d5a508;touch-action:none}canvas{display:block;width:100%;height:auto;aspect-ratio:30 / 22;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;background:#071018cc;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.overlay-card{max-width:100%}.overlay-card>p:first-child{font-size:.75rem;letter-spacing:.15em;font-weight:700;color:var(--mint);margin:0 0 10px}.overlay h2{font-size:clamp(1.4rem,5vw,2rem);line-height:1.15;letter-spacing:-.025em;margin:0 0 8px}.overlay p{font-size:1rem;color:#c0d1d7;margin:0 0 18px}.primary{min-height:48px;padding:12px 25px;border:0;border-radius:12px;background:var(--mint);color:#08281b;font-size:1rem;font-weight:750;display:inline-flex;gap:24px;align-items:center;justify-content:center}.primary span{font-size:.85rem}.status-line{display:flex;justify-content:space-between;gap:14px;padding:12px 2px 0;min-height:48px;font-size:.875rem;color:var(--muted);line-height:1.4}#length{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--mint)}.bottom-controls{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:15px 0 0}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(3,46px);gap:6px;touch-action:none;user-select:none;-webkit-user-select:none}.dpad button{background:#172833;border:1px solid #304550;border-bottom:3px solid #304550;border-radius:11px;font-size:1.75rem;line-height:1}.dpad button:active{background:#204937;border-color:var(--mint)}.up{grid-area:1/2}.left{grid-area:2/1}.right{grid-area:2/3}.down{grid-area:3/2}.dpad-center{grid-area:2/2;display:grid;place-items:center;color:#3b6255;font-size:1.3rem}.actions{width:190px;display:flex;flex-direction:column;gap:8px}.secondary{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#1d302e;border:1px solid #3d5c51;border-radius:11px;padding:10px 14px;min-height:46px;font-size:.9375rem;font-weight:650;color:var(--mint)}.secondary span{font-size:1.1rem}.secondary.muted{background:transparent;color:#c0d1d7;border-color:#30414a}.actions p{font-size:.75rem;color:var(--muted);line-height:1.6;margin:3px 0 0}.dpad[data-auto=true]{opacity:.45}@media(min-width:700px){.bottom-controls{padding:0 30px}.brand{margin-bottom:28px}.game-shell{padding-top:40px}.arena{border-radius:20px}.dpad{grid-template-columns:repeat(3,60px);grid-template-rows:repeat(3,48px)}}@media(max-width:420px){.game-shell{padding-right:16px;padding-left:16px;padding-top:max(18px,env(safe-area-inset-top))}.brand{margin-bottom:20px}.scores{gap:18px}.auto{gap:12px;padding:9px 12px}.bottom-controls{gap:14px;margin-top:6px}.actions{width:150px}.dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,44px);gap:5px}.status-line{font-size:.875rem}}@media(max-width:340px){.game-shell{padding-left:10px;padding-right:10px}.scores{gap:12px}.auto{gap:8px;padding:9px}.bottom-controls{gap:10px}.actions{width:135px}.edition{display:none}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Midnight neon background and a compact, touch-friendly color drawer. */
:root{--bg:#080d1b;--snake-color:#60e2ae;--panel:#141e32;--line:#33415d;--muted:#a7b4cf}
body{background:radial-gradient(ellipse at 0% 5%,#16424a88 0,transparent 48%),radial-gradient(ellipse at 100% 75%,#502b7959 0,transparent 55%),linear-gradient(145deg,#080e1b,#10132c 58%,#0b0f23);background-attachment:fixed}
.arena{border-color:#577b995e;background:#0a1020;box-shadow:0 20px 60px #02041280,-10px -8px 40px #45cfd00c,10px 12px 45px #a67cff12}
.overlay{background:linear-gradient(135deg,#061523bb,#15122bc9)}
.auto{background:#111e32cc;border-color:#33455d}.dpad button{background:linear-gradient(150deg,#1f3143,#172034);border-color:#3c4d68}.secondary.muted{background:#141d302e;border-color:#38435e}.edition{color:#95dbef;border-color:#6acddb}.brand{margin-bottom:20px}.dashboard{margin-bottom:12px}
.appearance{margin:0 0 14px;border:1px solid #3645608c;border-radius:14px;background:linear-gradient(115deg,#162335b3,#211d3eb3);overflow:hidden}
.appearance summary{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 13px;font-size:.9375rem;font-weight:600;cursor:pointer;list-style:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.appearance summary::-webkit-details-marker{display:none}.appearance summary:focus-visible{outline:2px solid var(--mint);outline-offset:-3px;border-radius:12px}
.color-preview{width:19px;height:19px;border-radius:50%;background:var(--snake-color);border:2px solid #d9e6ff99;box-shadow:0 0 12px #ffffff12;flex-shrink:0}
#color-name{margin-left:auto;font-size:.875rem;font-weight:450;color:#b9c5de}.expand-mark{font-size:1.2rem;line-height:1;color:#b2c7dc;transition:transform .15s}.appearance[open] .expand-mark{transform:rotate(180deg)}
.appearance-panel{padding:3px 13px 13px;border-top:1px solid #33415b6b}.swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:9px 0}
.swatches button{min-width:0;min-height:44px;border:1px solid transparent;border-radius:11px;background:transparent;display:grid;place-items:center;position:relative}
.swatches button>span{display:block;width:27px;height:27px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 1px #ffffff25}
.swatches button[aria-pressed=true]{background:#ffffff0b;border-color:#b8c9e899}.swatches button[aria-pressed=true]>span::after{content:'✓';display:grid;place-items:center;width:100%;height:100%;color:#11192d;font-weight:900;font-size:1rem}
.custom-color{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:50px;border:1px solid #44516e;border-radius:11px;padding:5px 9px 5px 12px;font-size:.9375rem;cursor:pointer;background:#0b13224f}
.custom-color>span{display:flex;align-items:center;gap:13px;flex-wrap:wrap}.custom-color small{font-family:ui-monospace,monospace;font-size:.875rem;color:#aebbd2}
input[type=color]{-webkit-appearance:none;appearance:none;border:0;padding:0;width:46px;height:38px;min-width:46px;background:transparent;cursor:pointer;border-radius:8px}
input[type=color]::-webkit-color-swatch-wrapper{padding:3px}input[type=color]::-webkit-color-swatch{border:2px solid #c7d2e599;border-radius:7px}input[type=color]::-moz-color-swatch{border:2px solid #c7d2e599;border-radius:7px}input[type=color]:focus-visible{outline:2px solid white;outline-offset:2px}
.appearance-panel p{font-size:.875rem;line-height:1.5;color:#aebbd2;margin:9px 0 0}
@media(prefers-reduced-motion:reduce){.expand-mark{transition:none}}
.settings-section{border-top:1px solid #44516e66;margin-top:16px;padding-top:15px}.settings-section h2{font-size:1rem;line-height:1.4;margin:0 0 12px}.grid-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.grid-fields label{display:flex;flex-direction:column;gap:7px;font-size:.9375rem}.grid-fields input{min-width:0;width:100%;min-height:44px;padding:9px 12px;font:inherit;font-size:1rem;background:#0c1427;color:var(--text);border:1px solid #455677;border-radius:9px}.grid-fields small{font-size:.8rem;color:var(--muted)}.settings-button{width:100%;justify-content:center;margin-top:10px}.file-label{position:relative;display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 12px;background:#213146;border:1px solid #597a95;border-radius:10px;font-size:.9375rem;text-align:center;cursor:pointer}.file-label input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-label:focus-within{outline:2px solid var(--mint);outline-offset:3px}#background-preview{display:block;width:100%;height:140px;object-fit:cover;border-radius:9px;margin-top:12px}#background-preview[hidden],#background-adjustments[hidden]{display:none}.range-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-size:.9375rem;margin-top:14px}.range-label input{flex-basis:100%;width:100%;height:30px;accent-color:var(--mint);touch-action:pan-y}.range-label output{font-size:.875rem;color:var(--muted)}.settings-section p:empty{display:none}
.arena{margin-inline:auto}.arena.compact .overlay{padding:6px}.arena.compact .overlay-card{display:flex;align-items:center;justify-content:center;gap:12px}.arena.compact .overlay-card>p{display:none}.arena.compact .overlay h2{font-size:1rem;margin:0;max-width:45%}.arena.compact .primary{padding:10px 14px;min-height:42px;white-space:nowrap}
#background-preview{width:auto;height:auto;max-width:100%;max-height:160px;aspect-ratio:auto;margin:12px auto 0}

.settings-open{display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 12px;border:1px solid #344256;border-radius:12px;background:#152131;color:#e2ecf7;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.settings-open:hover{border-color:#60e2ae;background:#1a2c3a}
.settings-dialog{color:#e2ecf7;background:#101b29;border:1px solid #34485f;border-radius:22px;width:min(92vw,480px);max-height:85vh;max-height:85svh;padding:0;box-shadow:0 24px 90px #0009;overflow:auto;color-scheme:dark}
.settings-dialog::backdrop{background:#020710bb;backdrop-filter:blur(5px)}
.settings-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;background:#101b29;position:sticky;top:0;z-index:2;border-bottom:1px solid #2b3b4e}
.settings-header h2{font-size:19px;margin:0}.settings-header button{width:44px;height:44px;border:1px solid #34485f;border-radius:12px;background:#1c2a3b;color:#e2ecf7;font-size:20px;cursor:pointer}
.settings-content{padding:0 20px 22px}.settings-content>.settings-section:first-child{border-top:0;margin-top:0;padding-top:20px}
.settings-content p{color:#9cacc0;font-size:13px;line-height:1.6}.settings-content h2{font-size:16px}.settings-content>.primary{margin-top:18px;min-height:48px}
@media(max-width:400px){.brand{gap:8px}.settings-open{padding:8px;font-size:12px}.settings-content{padding-inline:16px}}