.snake{--background:oklch(12% .01 240);--foreground:oklch(97% .01 90);--card:oklch(16% .01 240);--primary:oklch(75% .18 145);--primary-foreground:oklch(12% .01 240);--secondary:oklch(22% .01 240);--secondary-foreground:oklch(97% .01 90);--muted:oklch(22% .01 240);--muted-foreground:oklch(65% .01 90);--accent:oklch(65% .22 30);--accent-foreground:oklch(97% .01 90);--destructive:oklch(63% .2 27);--border:oklch(28% .01 240);--input:oklch(28% .01 240);--ring:oklch(75% .18 145);--snake-body:oklch(75% .18 145);--snake-head:oklch(82% .2 145);--snake-food:oklch(65% .22 30);--snake-grid:oklch(18% .01 240);--snake-grid-line:oklch(100% 0 0/.05);max-width:32rem;color:var(--foreground);background:var(--background);border-radius:1rem;flex-direction:column;gap:1.5rem;margin-inline:auto;padding:2rem 1rem;font-family:Geist Mono,ui-monospace,SFMono-Regular,Menlo,Consolas,Liberation Mono,monospace;display:flex}.snake .snake-header{text-align:center}.snake .snake-header h1{color:var(--primary);letter-spacing:-.025em;margin:0;font-size:2.25rem;font-weight:700;line-height:1.1}.snake .snake-header p{color:var(--muted-foreground);margin:.5rem 0 0;font-size:.875rem}.snake .snake-plays{text-align:center;min-height:1.25rem;margin:0;font-size:.875rem}.snake .snake-link{color:var(--primary);font:inherit;text-underline-offset:3px;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.snake .snake-link:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:2px}.snake .snake-scoreboard{border:1px solid var(--border);background:var(--card);border-radius:.5rem;grid-template-columns:repeat(3,1fr);margin:0;padding:.75rem 0;display:grid}.snake .snake-scoreboard>div{text-align:center}.snake .snake-scoreboard>div+div{border-left:1px solid var(--border)}.snake .snake-scoreboard dt{color:var(--muted-foreground);letter-spacing:.05em;text-transform:uppercase;font-size:.75rem}.snake .snake-scoreboard dd{font-variant-numeric:tabular-nums;margin:0;font-size:1.5rem;font-weight:700}.snake .snake-scoreboard dd.is-primary{color:var(--primary)}.snake .snake-board{width:100%;max-width:400px;margin-inline:auto;position:relative}.snake .snake-board canvas{aspect-ratio:1;border:2px solid var(--border);background:var(--snake-grid);border-radius:.5rem;width:100%;height:auto;display:block}.snake .snake-overlay{background:color-mix(in oklch, var(--background) 80%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);text-align:center;border-radius:.5rem;place-items:center;padding:1rem;display:grid;position:absolute;inset:0}.snake .snake-overlay .snake-overlay-content{flex-direction:column;align-items:center;gap:1rem;display:flex}.snake .snake-overlay h2{margin:0;font-size:1.875rem;font-weight:700}.snake .snake-overlay h2.is-ready{font-size:1.5rem}.snake .snake-overlay h2.is-over{color:var(--accent)}.snake .snake-overlay p{color:var(--muted-foreground);margin:0;font-size:.875rem}.snake .snake-overlay .snake-final{font-size:1.125rem}.snake .snake-overlay .snake-final span{color:var(--primary)}.snake .snake-overlay .snake-message[data-tone=success]{color:var(--primary)}.snake .snake-overlay .snake-message[data-tone=error]{color:var(--destructive)}.snake .snake-controls{flex-direction:column;align-items:center;gap:1rem;display:flex}.snake .snake-dpad{grid-template-rows:repeat(3,3rem);grid-template-columns:repeat(3,3rem);grid-template-areas:".up.""left center right"".down.";gap:.5rem;display:grid}.snake .snake-dpad .snake-dpad-button{touch-action:manipulation;width:3rem;height:3rem}.snake .snake-dpad .snake-dpad-button svg{width:1.5rem;height:1.5rem}.snake .snake-dpad [data-direction=up]{grid-area:up}.snake .snake-dpad [data-direction=down]{grid-area:down}.snake .snake-dpad [data-direction=left]{grid-area:left}.snake .snake-dpad [data-direction=right]{grid-area:right}.snake .snake-dpad .snake-dpad-center{background:color-mix(in oklch, var(--secondary) 50%, transparent);border-radius:.5rem;grid-area:center;place-items:center;display:grid}.snake .snake-dpad .snake-dpad-center:after{background:color-mix(in oklch, var(--primary) 50%, transparent);content:"";border-radius:50%;width:.75rem;height:.75rem}.snake .snake-help{color:var(--muted-foreground);text-align:center;margin:0;font-size:.75rem}.snake .snake-back{align-self:flex-start;font-size:.875rem}.snake .snake-tabs{flex-direction:column;gap:.75rem;display:flex}.snake .snake-tabs-list{width:100%}.snake .snake-empty{color:var(--muted-foreground);text-align:center;margin:0;padding:2rem 0;font-size:.875rem}.snake .snake-empty[data-tone=error]{color:var(--destructive)}.snake .snake-table-wrap{border:1px solid var(--border);background:var(--card);border-radius:.5rem;overflow-x:auto}.snake .snake-table{border-collapse:collapse;width:100%;font-size:.875rem}.snake .snake-table th{border-bottom:1px solid var(--border);color:var(--muted-foreground);letter-spacing:.05em;text-align:left;text-transform:uppercase;padding:.625rem .75rem;font-size:.75rem;font-weight:500}.snake .snake-table td{border-bottom:1px solid var(--border);padding:.625rem .75rem}.snake .snake-table tbody tr{transition:background-color .15s}.snake .snake-table tbody tr:last-child td{border-bottom:0}.snake .snake-table tbody tr:hover{background:color-mix(in oklch, var(--muted) 50%, transparent)}.snake .snake-table .is-rank{width:3rem;color:var(--muted-foreground)}.snake .snake-table .is-player{text-overflow:ellipsis;white-space:nowrap;width:100%;max-width:0;overflow:hidden}.snake .snake-table .is-score{text-align:right;font-variant-numeric:tabular-nums}.snake .snake-table td.is-score{color:var(--primary);font-weight:700}.snake .snake-help-keys{display:none}@media (width>=48rem){.snake .snake-help-keys{display:block}.snake .snake-dpad,.snake .snake-help-touch{display:none}}