.snk{grid-template-columns:minmax(0, var(--game-width)) minmax(16rem, 1fr);align-items:start;gap:var(--space-6);margin:0 0 var(--space-6);-webkit-user-select:none;user-select:none;display:grid}.snk .snk-play{min-width:0}.snk .lb.lb-board{margin:0}@media (width<=859px){.snk{grid-template-columns:minmax(0, var(--game-width))}}.snk .snk-top{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3);flex-wrap:wrap;display:flex}.snk .snk-scores{gap:var(--space-2);display:flex}.snk .snk-score{min-width:5rem;padding:.375rem var(--space-3);border-radius:var(--radius-md);background:var(--wash);text-align:center;margin:0;line-height:1.2}.snk .snk-time{min-width:7.25rem}.snk .snk-label{color:var(--muted);font-size:var(--text-xs);font-weight:650;display:block}.snk .snk-score strong{font-size:var(--text-md);font-variant-numeric:tabular-nums;font-weight:800}.snk .button{color:var(--ink);cursor:pointer}.snk .snk-play{container-type:inline-size}.snk .snk-controls .button{gap:.375rem}.snk .snk-controls .icon{width:18px;height:18px}@container (width<26rem){.snk .snk-controls .button{padding-inline:var(--space-2);white-space:nowrap}}@container (width>=26rem) and (width<=46rem){.snk .snk-controls .button{justify-content:center;width:2.75rem;padding-inline:0}.snk .snk-label-text{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}}.snk{--board:linear-gradient(135deg, var(--kind-game-from), var(--kind-game-to));--field:var(--on-colour-chip);--grid:color-mix(in srgb, var(--on-colour) 8%, transparent);--body:var(--on-colour);--body-from:.92;--body-to:.28;--head:var(--on-colour);--eye:var(--kind-game-to);--food:var(--now-first);--hint:var(--on-colour)}.snk .snk-board{border-radius:var(--radius-lg);background:var(--board);touch-action:none;padding:2.5%;position:relative}.snk .snk-board:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.snk .snk-field{aspect-ratio:1;border-radius:var(--radius-md);background:var(--field);position:relative;overflow:hidden}.snk .snk-grid{grid-template-columns:repeat(var(--size), 1fr);grid-template-rows:repeat(var(--size), 1fr);display:grid;position:absolute;inset:0}.snk .snk-grid i{background:var(--grid);border-radius:30%;margin:7%}.snk .snk-grid i.is-under{visibility:hidden}.snk .snk-body{width:100%;height:100%;color:var(--body);position:absolute;inset:0}.snk .snk-part,.snk .snk-food{width:calc(100% / var(--size));aspect-ratio:1;transform:translate(calc(var(--x) * 100%), calc(var(--y) * 100%));position:absolute;top:0;left:0}.snk .snk-part.is-head{z-index:1}.snk .snk-part.is-head:before{content:"";background:var(--head);border-radius:36%;position:absolute;inset:2%}.snk .is-head[data-back=left]:before{border-top-left-radius:0;border-bottom-left-radius:0}.snk .is-head[data-back=right]:before{border-top-right-radius:0;border-bottom-right-radius:0}.snk .is-head[data-back=up]:before{border-top-left-radius:0;border-top-right-radius:0}.snk .is-head[data-back=down]:before{border-bottom-right-radius:0;border-bottom-left-radius:0}.snk .snk-eyes{position:absolute;inset:0}.snk [data-dir=down] .snk-eyes{transform:rotate(90deg)}.snk [data-dir=left] .snk-eyes{transform:rotate(180deg)}.snk [data-dir=up] .snk-eyes{transform:rotate(-90deg)}.snk .snk-eyes i{aspect-ratio:1;background:var(--eye);border-radius:50%;width:18%;position:absolute;right:22%}.snk .snk-eyes i:first-child{top:22%}.snk .snk-eyes i:last-child{bottom:22%}.snk .snk-food:before{content:"";background:var(--food);border-radius:50%;animation:.9s ease-in-out infinite alternate snk-pulse;position:absolute;inset:24%}.snk .snk-food.is-new:before{animation:.22s ease-out snk-appear,.9s ease-in-out .22s infinite alternate snk-pulse}.snk .snk-food[hidden]{display:none}.snk .is-crashed .is-head{animation:.38s ease-in-out snk-shake}.snk .snk-hint{color:var(--hint);text-align:center;pointer-events:none;margin:0;font-weight:700;position:absolute;top:22%;left:0;right:0}.snk .snk-hint[hidden]{display:none}.snk .snk-message{z-index:3;place-content:center;justify-items:center;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 84%, transparent);text-align:center;animation:.3s both snk-fade;display:grid;position:absolute;inset:0}.snk .snk-message[hidden]{display:none}.snk .snk-message p{font-size:var(--text-xl);letter-spacing:-.02em;margin:0;font-weight:800}.snk .snk-actions{justify-content:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.snk .snk-controls{align-items:center;gap:var(--space-3);display:flex}.snk .snk-mode{align-items:center;gap:var(--space-2);font-size:var(--text-sm);cursor:pointer;font-weight:650;display:flex}.snk .snk-mode input{width:1.125rem;height:1.125rem;accent-color:var(--lane-games);cursor:inherit;margin:0}.snk .snk-mode:has(input:disabled){color:var(--muted);cursor:not-allowed}.snk .snk-help{margin:var(--space-3) 0 0;color:var(--muted);font-size:var(--text-sm);text-align:center}:root[data-game-look=old] .snk{--board:color-mix(in srgb, var(--lane-games) 20%, var(--surface));--field:color-mix(in srgb, var(--lane-games) 8%, var(--surface));--grid:color-mix(in srgb, var(--lane-games) 14%, var(--surface));--body:var(--lane-games);--body-from:.85;--body-to:.3;--head:var(--lane-games);--eye:var(--surface);--food:var(--ink);--hint:var(--ink)}@keyframes snk-pulse{0%{transform:scale(.86)}to{transform:scale(1.04)}}@keyframes snk-appear{0%{transform:scale(0)}}@keyframes snk-shake{20%{translate:-6%}40%{translate:6%}60%{translate:-4%}80%{translate:3%}}@keyframes snk-fade{0%{opacity:0}}
