@charset "UTF-8";
:root{color-scheme:light;--paper:#f5f6f0;--card:#fff;--ink:#243327;--muted:#788174;--line:#e3e6dc;--lime:#d4f572;--board:#172d27;--soft:#f0f3e9;--shadow:0 12px 35px #22342607;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink)}button,input{font:inherit}button{cursor:pointer;transition:background .15s,transform .15s}button:disabled{cursor:default;opacity:.45}button:focus-visible,canvas:focus-visible,input:focus-visible+.toggle{outline:3px solid #83a649;outline-offset:4px}button:not(:disabled):active{transform:translateY(1px)}.shell{max-width:1100px;padding:32px 40px 20px;margin:auto}.header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:23px}.brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:2px;font-weight:800}.brand-icon{display:grid;place-items:center;background:var(--lime);border-radius:12px;width:42px;height:42px;font-size:38px;line-height:1;letter-spacing:0}.brand small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted);margin-top:5px;font-weight:400}.edition{font-size:11px;color:var(--muted);display:flex;gap:12px;align-items:center}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8aad57}.intro{display:flex;justify-content:space-between;align-items:center;padding:32px 0 22px}.eyebrow{letter-spacing:2px;font-size:10px;font-weight:700;color:var(--muted);margin:0 0 10px}h1{font-size:34px;letter-spacing:-1px;margin:0;font-weight:750}h1 span{font-size:12px;letter-spacing:1px;margin-left:16px;font-weight:400;color:var(--muted);border-left:1px solid #bdc5b7;padding-left:16px}.intro-text{font-size:12px;color:var(--muted);margin:10px 0 0}.intro-number{font-size:53px;font-weight:300;color:#c4cbbc;letter-spacing:-4px}.intro-number span{display:block;font-size:8px;letter-spacing:2px;text-align:center;margin-top:0;color:var(--muted)}.connection{font-size:11px;color:var(--muted);padding:0 0 12px;min-height:26px}.connection.error{color:#a94236}.arcade{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:22px}.game-column{background:var(--card);padding:20px 20px 0;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);min-width:0}.scorebar{display:flex;align-items:center;padding:0 2px 18px;gap:34px}.scorebar span{display:block;font-size:10px;color:var(--muted)}.scorebar strong{display:block;line-height:1;margin-top:7px;font-size:30px;font-variant-numeric:tabular-nums;font-family:Consolas,monospace;letter-spacing:1px}.score-secondary strong{font-size:22px;color:#879275}.scorebar .status-pill{margin-left:auto;border:1px solid var(--line);border-radius:20px;padding:7px 9px;display:flex;gap:6px;align-items:center}.status-pill span{font-size:9px}.board-wrap{position:relative;background:var(--board);border-radius:13px;overflow:hidden;aspect-ratio:1}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#10271c66;backdrop-filter:blur(2px);padding:20px}.overlay[hidden]{display:none}.overlay-card{text-align:center;color:#f0f7dd}.mini-snake{font-size:68px;line-height:1;color:var(--lime);font-family:monospace;display:block;margin-bottom:15px}.overlay-card .eyebrow{color:#9aa896;font-size:8px;letter-spacing:2px;margin-bottom:13px}h2{margin:0;font-size:25px;letter-spacing:1px}.overlay-card p:not(.eyebrow){font-size:12px;color:#aab9aa;margin:12px 0 26px}.primary{display:flex;justify-content:space-between;align-items:center;background:var(--lime);color:#263b22;border:0;padding:14px 22px;min-width:185px;border-radius:9px;font-weight:700;font-size:13px;margin:0 auto}.primary:not(:disabled):hover{background:#e2ffa0}.primary span{font-size:18px;font-weight:400}.overlay-hint{display:block;color:#a0af9b;font-size:9px;margin-top:15px;letter-spacing:.5px}.game-toolbar{display:flex;justify-content:space-between;align-items:center;min-height:58px;gap:5px}.game-toolbar>span{font-size:10px;color:var(--muted)}.food-dot{display:inline-block;width:7px;height:7px;background:#f5aa79;border-radius:3px;margin-right:5px}.text-button{font-size:11px;color:var(--ink);background:none;border:0;border-radius:5px;padding:9px 8px}.text-button:not(:disabled):hover{background:var(--soft)}.sidebar{display:flex;flex-direction:column;gap:16px}.settings,.controls{border:1px solid var(--line);border-radius:17px;background:var(--card);padding:21px}.section-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;margin-bottom:22px}.section-index{font-family:Consolas,monospace;font-weight:400;font-size:10px;color:#a0aa94}.field-label{display:block;font-size:10px;color:var(--muted);margin-bottom:10px}.speed-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.speed-options button{background:var(--soft);border:1px solid transparent;border-radius:8px;font-size:10px;color:var(--ink);padding:10px 0}.speed-options button.selected{background:#edf6d5;border-color:#bed58d}.speed-options small{display:block;margin-top:5px;font-size:8px;color:var(--muted)}.toggle-row{display:flex;position:relative;align-items:center;justify-content:space-between;margin-top:23px;font-size:11px;gap:10px;cursor:pointer}.toggle-row small{display:block;font-size:9px;color:var(--muted);margin-top:6px}.toggle-row input{position:absolute;right:0;width:36px;height:22px;opacity:0;cursor:pointer}.toggle{width:34px;height:20px;background:#dce2d6;border-radius:20px;padding:3px;flex-shrink:0;pointer-events:none}.toggle:after{content:"";display:block;width:14px;height:14px;background:white;border-radius:50%;transition:transform .2s}input:checked+.toggle{background:#94b657}input:checked+.toggle:after{transform:translateX(14px)}input:disabled+.toggle{opacity:.5}.settings-note{font-size:9px;color:var(--muted);margin:21px 0 0;padding-top:15px;border-top:1px dashed var(--line)}.controls{text-align:center}.controls .section-title{margin-bottom:17px}.keyboard kbd{display:inline-grid;place-items:center;width:27px;height:25px;border-radius:5px;border:1px solid var(--line);box-shadow:0 2px var(--line);font-size:13px;color:#7d8976;background:var(--soft);margin:2px}.controls p{font-size:10px;line-height:1.9;margin:13px 0 0}.controls p span{font-size:9px;color:var(--muted)}.dpad{margin-top:14px}.dpad button{width:42px;height:35px;touch-action:manipulation;border:1px solid var(--line);border-radius:7px;background:var(--soft);color:var(--ink);margin:3px;font-size:16px}.touch-note{color:var(--muted);font-size:9px!important;margin-top:7px!important}.tip{background:#eaf0dc;border-radius:14px;padding:17px;display:flex;gap:14px;align-items:center}.tip>span{color:#839959;font-size:27px}.tip p{font-size:10px;line-height:1.9;margin:0;color:#677952}footer{display:flex;justify-content:space-between;gap:12px;color:#959e8b;font-size:9px;margin-top:24px;padding-top:19px;border-top:1px solid var(--line)}
@media(min-width:880px){.dpad{display:none}.touch-note{display:none}.controls{padding-bottom:25px}}
@media(max-width:760px){.shell{padding:20px}.arcade{grid-template-columns:minmax(0,1fr)}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tip{grid-column:1/-1}.settings,.controls{padding:17px}.header{padding-bottom:17px}.intro{padding:24px 0 18px}.intro-number{font-size:40px}.game-column{padding:16px 16px 0}.keyboard{display:none}.controls .section-title{margin-bottom:10px}.controls p{margin-top:7px}.dpad{margin-top:8px}footer{flex-wrap:wrap}}
@media(max-width:420px){.shell{padding:14px 12px}.edition{display:none}.intro{padding-top:22px}h1{font-size:29px}h1 span{font-size:10px;margin-left:11px;padding-left:11px}.intro-number{font-size:34px}.intro-text{font-size:11px}.game-column{padding:12px 12px 0;border-radius:16px}.scorebar{gap:18px;padding-bottom:13px}.scorebar strong{font-size:26px}.score-secondary strong{font-size:20px}.scorebar .status-pill{padding:6px}.status-pill span{font-size:8px}.sidebar{gap:10px}.settings,.controls{padding:13px}.section-title{font-size:11px}.speed-options{gap:3px}.speed-options button{font-size:9px}.dpad button{width:34px;height:33px;margin:2px}h2{font-size:21px}.overlay-card .eyebrow{font-size:7px}.overlay-card p:not(.eyebrow){margin-bottom:20px}.mini-snake{font-size:52px;margin-bottom:10px}.game-toolbar>span{font-size:9px}.text-button{font-size:10px;padding:8px 5px}.overlay{padding:12px}.tip{padding:13px}.intro-number span{font-size:7px}.brand{font-size:11px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
:root[data-theme="dark"]{color-scheme:dark;--paper:#16231d;--card:#203128;--ink:#e0e8d6;--muted:#a0ac99;--line:#354538;--soft:#293c30;--shadow:none}:root[data-theme="dark"] .tip{background:#2b4129}:root[data-theme="dark"] .tip p{color:#c0cfa6}:root[data-theme="dark"] .speed-options button.selected{color:#263b22}:root[data-theme="dark"] .speed-options button.selected small{color:#61744d}