body:has(.snek-page){background:radial-gradient(ellipse at 15% 55%, #4a101855, transparent 60%), radial-gradient(ellipse at 85% 25%, #8f1a2835, transparent 65%), var(--color-bg)}.arc-main:has(.snek-page){padding-block-start:calc(var(--nav-height) + 12px)}body:has(.snek-page) .arc-footer{display:none}.snek-page{width:min(100%, 660px, calc(100svh - var(--nav-height) - 150px));margin-inline:auto;position:relative}.snek-heading{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.snek-heading h1{letter-spacing:-.07em;font-size:1.8rem}.snek{--snek-body:#b84b60;--snek-head:#ed8691;--snek-food:#ffb29c;--snek-grid:#9e4255}.snek-hud{align-items:center;gap:28px;margin-bottom:12px;display:flex}.snek-hud p{align-items:baseline;gap:10px;display:flex}.snek-hud p>span{color:var(--color-text-muted);font-size:.8rem}.snek-hud strong{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:500}.snek-best{margin-left:auto}.snek-pause,.snek-settings-trigger{min-width:44px;min-height:44px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0}.snek-pause span{font-size:1.5rem}.snek-pause:disabled{visibility:hidden}.snek-stage{background:linear-gradient(145deg,#1d0c12,#0c070a 70%);border:1px solid #8f1a2866;border-radius:10px;position:relative;overflow:hidden;box-shadow:0 15px 100px #8f1a2818,inset 0 0 60px #8f1a2810}.snek-stage[data-state=dead]{border-color:var(--snek-head)}.snek-board{aspect-ratio:1;touch-action:none;background:0 0;border:0;width:100%;display:block}.snek-stage:focus-within{outline:2px solid var(--color-focus);outline-offset:4px}.snek-overlay{backdrop-filter:blur(3px);background:#10080cb8;flex-direction:column;justify-content:center;align-items:center;gap:12px;animation:.18s ease-out snek-arrive;display:flex;position:absolute;inset:0}.snek-overlay h2{letter-spacing:-.07em;font-size:clamp(2rem,6vw,3.8rem)}.snek-overlay p{color:var(--color-text-muted)}.snek-overlay-action{color:var(--color-text);cursor:pointer;min-height:48px;font:inherit;background:#4a101850;border:1px solid #b84b6066;border-radius:100px;padding:10px 26px}.snek-key-hint{color:var(--color-text-muted);margin-top:3px;font-size:.75rem;display:block}.snek-underboard{color:var(--color-text-muted);justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;display:flex}.snek .game-mobile-controls{justify-content:center;gap:8px;padding:4px 0 12px;display:none}.snek .game-mobile-controls button{min-width:48px;min-height:44px;padding:4px}.snek-touch-hint{display:none}.snek-status{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.snek .snek-settings{background:linear-gradient(145deg, #281019, var(--color-bg));border:1px solid #b84b6070;border-radius:16px;width:min(92vw,460px);max-height:90svh;margin:auto;padding:24px}.snek-settings h2{font-size:1.7rem}.snek-settings>p{color:var(--color-text-muted);font-size:.8rem}.snek-settings fieldset{border:0;border-top:1px solid #b84b6033;min-width:0;margin-top:16px;padding:12px 0}.snek-settings legend{color:var(--snek-head);padding-right:12px;font-size:.9rem}.snek-settings label{min-height:44px;margin:0;padding:6px 0;font-size:.85rem}.snek-settings input{accent-color:var(--snek-head)}.snek-settings input[type=range]{width:100%;min-height:28px}.snek-settings-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.snek-settings-actions form{margin:0}.snek-atmosphere{z-index:-1;pointer-events:none;position:fixed;inset:0;overflow:clip}.snek-atmosphere .arc-line-field{mask-image:linear-gradient(90deg,#000,#0000 45% 55%,#000)}@keyframes snek-arrive{0%{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}@media (width<=47.99rem),(pointer:coarse){.snek-page{width:min(100%,660px)}.snek .game-mobile-controls{display:flex}.snek-touch-hint{display:inline}.snek-desktop-hint,.snek-key-hint{display:none}.snek-hud{gap:12px}.snek-hud strong{font-size:1.4rem}}@media (height<=500px) and (orientation:landscape){.arc-main:has(.snek-page){padding-block-start:calc(var(--nav-height) + 4px)}.snek-page{width:min(100%, calc(100svh - var(--nav-height) - 110px))}.snek-heading{margin:0}.snek-heading h1{font-size:1.4rem}.snek-hud{margin-bottom:4px}}@media (prefers-reduced-motion:reduce){.snek-overlay{animation:none}}.snek .snek-settings label{gap:4px;margin:0;padding:6px 0}.snek .snek-settings label:has(input[type=checkbox]){justify-content:space-between;align-items:center;display:flex}.snek .snek-settings input[type=checkbox]{width:20px;height:20px;flex:none;min-block-size:0}.snek-hud p span{white-space:nowrap}@media (height<=500px) and (orientation:landscape){.snek-page{width:min(100%,600px)}.snek{grid-template-columns:minmax(0, calc(100svh - var(--nav-height) - 72px)) minmax(150px, 1fr);gap:0 24px;display:grid}.snek-stage{grid-area:1/1/4}.snek-hud{flex-wrap:wrap;grid-area:1/2;align-self:start;gap:8px 18px}.snek-best{margin-left:0}.snek-underboard{grid-area:2/2;align-self:center;display:block}.snek .game-mobile-controls{grid-area:3/2;justify-content:start;align-self:end}}.snek-settings-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.snek-settings-header form{margin:0}.snek-close{width:44px;height:44px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;font-size:1.7rem}.snek .snek-settings label:has(input[type=range]){grid-template-columns:minmax(0,1fr) 44%;align-items:center;column-gap:16px}.snek .snek-settings input[type=range]{min-height:44px}.snek-score-value{animation:.18s ease-out snek-score-pop;display:inline-block}@keyframes snek-score-pop{35%{color:var(--snek-head);transform:scale(1.07)}}.snek-stage[data-new-best] .snek-overlay h2{color:var(--snek-head);text-shadow:0 0 24px color-mix(in srgb, var(--snek-head) 28%, transparent)}.snek-stage[data-state=dead] .snek-overlay{backdrop-filter:none;animation:.62s ease-out both snek-result-arrive}@keyframes snek-result-arrive{0%{background:0 0}40%{background:#10080c30}to{background:#10080c90}}.snek-stage[data-state=dead] .snek-overlay>:not(button){animation:.5s ease-out both snek-result-text}@keyframes snek-result-text{0%,35%{opacity:.15}to{opacity:1}}@media (prefers-reduced-motion:reduce){.snek-score-value,.snek-stage[data-state=dead] .snek-overlay,.snek-stage[data-state=dead] .snek-overlay>:not(button){animation:none}}.snek-stage[data-new-best] .snek-overlay>p:first-of-type{color:var(--color-text);font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,4vw,2rem)}.snek:has([data-new-best]) .snek-best strong{animation:.24s ease-out snek-score-pop}@media (prefers-reduced-motion:reduce){.snek:has([data-new-best]) .snek-best strong{animation:none}}
