:root{font-family:system-ui,sans-serif;color:#304c41;background:#f7f3e9;--paper:#fffaf0;--line:#c5ceb8;--ink:#304c41;--ground:#f7f3e9}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit;color:inherit}button,select{min-height:44px;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:9px 15px;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.45;cursor:default}.primary{background:#46664c;color:#fff9ea}a{color:inherit}button:focus-visible,canvas:focus-visible{outline:3px solid #b68038;outline-offset:3px}[hidden]{display:none!important}.site-header,main,footer{max-width:1050px;width:calc(100% - 40px);margin:auto}.site-header{display:flex;justify-content:space-between;padding:20px 0;border-bottom:1px solid var(--line);font-size:14px}.heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:24px 0}.eyebrow{font-size:10px;letter-spacing:.18em;color:#778168}h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(25px,4vw,38px);margin:6px 0}.toolbar{display:flex;gap:6px;flex-wrap:wrap}.layout{display:grid;grid-template-columns:minmax(0,600px) 1fr;gap:45px}.scores{display:flex;justify-content:space-around;padding:13px;background:var(--paper);border-radius:14px 14px 0 0;font-size:10px;letter-spacing:.08em}.scores b{display:block;font-size:25px;letter-spacing:0}.board-frame{position:relative;border:8px solid #bba985;border-radius:14px;overflow:hidden;background:var(--paper)}canvas{display:block;width:100%;height:auto;touch-action:none}#overlay{position:absolute;inset:0;display:grid;place-items:center;background:#f7f3e9c9;text-align:center;padding:25px}#overlay>div{background:var(--paper);padding:22px;border-radius:20px;box-shadow:0 10px 45px #304c4122;max-width:330px}h2{font-family:Georgia,serif;font-weight:400}.bottom{display:flex;align-items:center;justify-content:space-between;gap:8px}.pad{display:grid;grid-template-columns:repeat(3,46px);gap:4px}.pad [data-dir=up]{grid-column:2}.pad [data-dir=left]{grid-column:1}.actions{display:flex;flex-wrap:wrap;gap:6px}.pad button{padding:4px;font-size:22px}#message{min-height:42px;font-size:14px}#controls,#storage-status,footer{font-size:12px;color:#74816e;line-height:1.5}aside{align-self:center;text-align:center}aside img{width:100%;height:auto;max-height:260px;object-fit:contain}aside p{font-size:14px;line-height:1.8}footer{text-align:center;padding:25px}dialog{color:inherit;background:var(--paper);border:1px solid var(--line);border-radius:22px;max-width:440px;width:calc(100% - 30px);padding:25px;line-height:1.65}dialog::backdrop{background:#142a2066}dialog button{margin:5px 2px}input{max-width:100%;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--paper)}#player-list{display:flex;flex-wrap:wrap;gap:6px}label{display:block;margin-bottom:12px}.expanded-view,.snake-shell:fullscreen{width:100%;max-width:none;overflow:auto;padding:12px;background:var(--ground)}.game-expanded{overflow:hidden}.expanded-view{position:fixed;inset:0;z-index:100}.snake-shell:fullscreen .layout,.expanded-view .layout{max-width:1000px;margin:auto}@media(prefers-color-scheme:dark){:root{background:#18251f;color:#e0e5cd;--paper:#26382e;--line:#56705b;--ground:#18251f}#overlay{background:#18251fbb}.board-frame{border-color:#827353}#controls,#storage-status,footer,.eyebrow{color:#b5c6ac}}@media(max-width:700px){main,.site-header,footer{width:calc(100% - 24px)}.heading{display:block;margin:15px 0}.toolbar{margin-top:12px}.layout{display:block}aside{display:none}.scores b{font-size:21px}#message{font-size:13px}.actions button{padding:8px}.board-frame{border-width:5px}}@media(max-height:560px)and (min-width:600px){.heading{margin:7px 0;display:flex}h1{font-size:23px}.eyebrow{display:none}.site-header{padding:8px 0}.layout{display:block}.play{display:grid;grid-template-columns:minmax(200px,calc(100dvh - 125px)) minmax(200px,1fr);gap:8px 20px;justify-content:center;max-width:820px;margin:auto}.board-frame{grid-column:1;grid-row:1/6}.scores,#message,.bottom,#controls{grid-column:2;margin:0}.bottom{align-items:center}aside{display:none}#storage-status{margin:5px}footer{display:none}.scores{padding:7px}.toolbar{margin:0}.snake-shell:fullscreen .play{grid-template-columns:minmax(200px,calc(100dvh - 90px)) minmax(200px,1fr)}}