/* A small arcade, floating in the same quiet network as the rest of the site. */
.snake-main{max-width:1160px;padding-block:50px 68px}
.snake-layout{display:grid;grid-template-columns:1fr minmax(0,540px);align-items:center;gap:72px}
.snake-copy .eyebrow{font-size:10px;letter-spacing:.14em;margin-bottom:25px}
.snake-copy h1{font:600 clamp(64px,7.1vw,100px)/1 var(--display);letter-spacing:-.07em;margin:0 0 24px}
.snake-period{color:var(--accent)}
.snake-tagline{font:400 28px/1.3 var(--display);letter-spacing:-.025em;margin:0 0 22px;color:#c2d7dc}
.snake-description{font:13px/1.85 var(--sans);color:var(--muted);margin:0}
.snake-legend{display:flex;gap:26px;margin:32px 0 37px;font:9px var(--display);letter-spacing:.12em;color:#b4cdd3}
.snake-legend>span{display:flex;align-items:center;gap:9px}.snake-swatch{width:9px;height:9px;background:#b9eea5;box-shadow:0 0 11px #b9eea525}.food-swatch{width:8px;height:8px;transform:rotate(45deg);background:#9edde9;box-shadow:0 0 12px #9edde947}
.snake-instructions{font:11px/1.65 var(--sans);color:#acbfc6}.snake-instructions p{display:flex;align-items:baseline;gap:20px;margin:10px 0}.snake-instructions p>span{font:9px var(--display);letter-spacing:.11em;color:#749ca9;width:46px;flex-shrink:0}
.snake-back{display:inline-block;font:9px var(--display);letter-spacing:.1em;color:#adc6cf;margin-top:34px;padding-block:12px}.snake-back:hover{color:var(--accent)}
.snake-console{min-width:0}.snake-readout{display:flex;gap:35px;align-items:center;margin-bottom:19px;padding-inline:2px}.snake-readout>div{display:flex;flex-direction:column;gap:8px}.snake-readout>div>span{font:9px var(--display);letter-spacing:.14em;color:#8eacb8}.snake-readout strong{font:500 32px/1 var(--display);font-variant-numeric:tabular-nums;letter-spacing:.04em;color:#d9e9e9}.snake-readout>div:first-child strong{color:var(--accent)}.snake-state{margin-left:auto;align-self:flex-end;padding-bottom:4px;font:8px var(--display);letter-spacing:.12em;color:#82adb8}.snake-state:before{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:currentColor;margin-right:7px}
.snake-arena{position:relative;aspect-ratio:1;background:#10253247;isolation:isolate;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
#snake-board{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:crosshair}#snake-board:focus-visible{outline:1px dashed #9ad9c7;outline-offset:5px}
.arena-corner{position:absolute;width:16px;height:16px;border:0 solid #82bdc778;pointer-events:none}.corner-tl{left:0;top:0;border-left-width:1px;border-top-width:1px}.corner-tr{right:0;top:0;border-right-width:1px;border-top-width:1px}.corner-bl{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}.corner-br{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.snake-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;background:#09151c99;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:25px}.snake-overlay>span{font:9px var(--display);letter-spacing:.16em;color:#97b8c5}.snake-overlay h2{font:450 34px/1.15 var(--display);letter-spacing:-.04em;margin:20px 0 10px;color:#e0eeed}.snake-overlay p{font:12px/1.6 var(--sans);color:#a8bec6;max-width:250px;margin:0 0 25px}.snake-action{display:inline-flex;align-items:center;gap:36px;padding:15px 22px;font:600 11px var(--display);letter-spacing:.08em;color:#10201b;background:#c4f69d;border:0;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);min-height:46px}.snake-action:hover{background:#d7ffb6}.snake-action:focus-visible{outline:2px solid #eaffd6;outline-offset:4px;clip-path:none}.snake-action>span{font-size:18px}
.snake-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:7px}.snake-toolbar>span{font:8px var(--display);letter-spacing:.045em;color:#7da1b1}.snake-toolbar>div{display:flex;gap:20px}.snake-toolbar button{border:0;background:none;color:#c2dcd4;font:9px var(--display);letter-spacing:.04em;padding:15px 0;min-height:44px}.snake-toolbar button:disabled{color:#59727f}.snake-toolbar button:hover:not(:disabled){color:var(--accent)}
.snake-touch-controls{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:12px}.snake-touch-controls>p{font:11px/1.8 var(--sans);color:#8dabb6;margin:0}.snake-dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,42px);gap:4px}.snake-dpad button{padding:0;background:#22405055;border:0;color:#bbd9da;font:22px var(--sans);touch-action:manipulation;min-height:42px}.snake-dpad button:hover,.snake-dpad button:active{color:#d4ffba;background:#3f665464}.snake-dpad [data-direction=up]{grid-column:2}.snake-dpad [data-direction=left]{grid-row:2;grid-column:1}.snake-dpad [data-direction=down]{grid-row:2;grid-column:2}.snake-dpad [data-direction=right]{grid-row:2;grid-column:3}
.snake-storage-note{font:9px var(--display);letter-spacing:.03em;color:#7897a4;margin:18px 0 0}
.snake-page .site-footer{border-top-color:#7392a21c}
@media(min-width:1101px){.snake-main{width:calc(100% - 160px)}}
@media(max-width:1100px){.snake-layout{gap:40px;grid-template-columns:.85fr 1.15fr}.snake-copy h1{font-size:72px}.snake-tagline{font-size:25px}}
@media(max-width:760px){.snake-main{max-width:530px;padding-block:35px 42px}.snake-layout{grid-template-columns:1fr;gap:26px}.snake-copy .eyebrow{font-size:8px;margin-bottom:12px}.snake-copy h1{font-size:52px;margin-bottom:9px;letter-spacing:-.06em}.snake-copy{position:relative}.snake-tagline{font-size:17px;line-height:1.45;margin:0}.snake-tagline br{display:none}.snake-tagline br:after{content:' '}.snake-tagline br+*{margin-left:4px}.snake-description,.snake-legend,.snake-instructions,.snake-back{display:none}.snake-readout{gap:27px;margin-bottom:14px}.snake-readout strong{font-size:26px}.snake-readout>div>span{font-size:8px}.snake-state{font-size:8px}.snake-overlay h2{font-size:30px}.snake-overlay p{font-size:11px}.snake-overlay>span{font-size:8px}.snake-overlay{padding:20px}.snake-touch-controls{margin-top:5px}.snake-toolbar>div{gap:17px}.snake-toolbar>span{font-size:7px}.snake-storage-note{margin-top:13px}.snake-dpad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,44px)}.snake-dpad button{min-height:44px}.snake-touch-controls>p{font-size:10px}}
@media(max-width:370px){.snake-copy h1{font-size:47px}.snake-tagline{font-size:15px}.snake-toolbar>div{gap:12px}.snake-toolbar button{font-size:8px}.snake-toolbar>span{font-size:6px}.snake-touch-controls{gap:10px}.snake-touch-controls>p{font-size:9px}.snake-dpad{grid-template-columns:repeat(3,44px)}.snake-readout{gap:19px}}
@media(max-width:760px) and (max-height:900px){.snake-main{padding-top:24px}.snake-copy .eyebrow{margin-bottom:8px}.snake-copy h1{font-size:44px;margin-bottom:8px}.snake-tagline{font-size:15px}.snake-layout{gap:18px}.snake-readout{margin-bottom:12px}.snake-readout strong{font-size:24px}.snake-touch-controls{margin-top:0}}