.g-snake-game{--sg-bg:#eef3ee;--sg-bg2:#e4ece5;--sg-snake:#1f6f5c;--sg-head:#14503f;--sg-food:#d9482b;--sg-wall:#6c746f;--sg-text:#1d2320;--sg-dim:rgba(246, 245, 241, .82);margin:0 auto;max-width:100%}:root[data-theme=dark] .g-snake-game{--sg-bg:#1a201d;--sg-bg2:#1f2623;--sg-snake:#3fae8f;--sg-head:#7fd9bd;--sg-food:#ff7a5c;--sg-wall:#949c97;--sg-text:#e8ece9;--sg-dim:rgba(20, 24, 22, .8)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .g-snake-game{--sg-bg:#1a201d;--sg-bg2:#1f2623;--sg-snake:#3fae8f;--sg-head:#7fd9bd;--sg-food:#ff7a5c;--sg-wall:#949c97;--sg-text:#e8ece9;--sg-dim:rgba(20, 24, 22, .8)}}.g-snake-game canvas{display:block;margin:0 auto;border-radius:8px;touch-action:none;cursor:pointer}.g-snake-game canvas:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.g-snake-game-dpad{display:none;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,52px);gap:6px;justify-content:center;margin:8px auto 0}@media(pointer:coarse){.g-snake-game-dpad{display:grid}}.g-snake-game-dpad button{font:inherit;font-size:1.4rem;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);touch-action:manipulation;-webkit-tap-highlight-color:transparent;padding:0}.g-snake-game-dpad button:active{background:var(--accent-soft)}.g-snake-game-dpad button:focus-visible{outline:3px solid var(--focus)}.g-snake-game-dpad [data-dir=up]{grid-column:2;grid-row:1}.g-snake-game-dpad [data-dir=left]{grid-column:1;grid-row:2}.g-snake-game-dpad [data-dir=down]{grid-column:2;grid-row:2}.g-snake-game-dpad [data-dir=right]{grid-column:3;grid-row:2}