:root{--snake-canvas-bg: var(--color-bg);--snake-canvas-border: var(--color-border);--snake-panel-bg: var(--color-bg-panel);--snake-paused-overlay: rgba(13, 17, 23, .8)}:root[data-theme=light]{--snake-paused-overlay: rgba(255, 255, 255, .8)}.snake-container{max-width:1200px;margin:0 auto;padding:var(--spacing-5xl) var(--spacing-4xl);height:100vh;overflow:hidden;display:flex;flex-direction:column;background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-mono)}.snake-header{margin-bottom:var(--spacing-5xl)}.snake-header-bar{display:flex;justify-content:space-between;align-items:flex-start}.snake-header-actions{display:flex;gap:var(--spacing-sm)}.snake-prompt{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text-muted);text-decoration:none;margin-bottom:var(--spacing-md);display:block}.snake-prompt:before{content:"$ ";color:var(--color-accent)}.snake-prompt:hover{text-decoration:none;color:var(--color-text)}.snake-title{font-family:var(--font-mono);font-size:var(--font-size-3xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);margin-bottom:var(--spacing-md)}.snake-main{display:flex;align-items:stretch;gap:var(--spacing-xl);flex:1;min-height:0}.snake-game-area{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-xl)}.snake-canvas-container{display:inline-flex;flex-direction:column;gap:var(--spacing-md)}.snake-canvas{border:var(--border-width-thin) solid var(--color-border);display:block}.snake-controls-bar{display:flex;justify-content:center;align-items:center;gap:var(--spacing-md)}.snake-stats{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text)}.snake-stats h4{margin:0 0 var(--spacing-sm) 0;font-size:var(--font-size-2xl);font-weight:var(--font-weight-semibold)}.snake-stats p{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.snake-panel-container{width:270px;flex-shrink:0;display:flex;flex-direction:column;gap:var(--spacing-md)}.snake-players-header{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm);color:var(--color-text-muted);cursor:pointer;padding:var(--spacing-sm) 0}.snake-players-header:hover{color:var(--color-text)}.snake-players-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.snake-players-list.collapsed{display:none}.snake-button{font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-panel);color:var(--color-text);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--border-radius-none);padding:var(--spacing-sm) var(--spacing-lg);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.snake-button:hover{border-color:var(--color-accent);color:var(--color-accent)}.snake-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.snake-icon-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-panel);color:var(--color-text);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--border-radius-none);cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast)}.snake-icon-button:hover{border-color:var(--color-accent);color:var(--color-accent)}.snake-icon-button:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.snake-input{font-family:var(--font-mono);font-size:var(--font-size-sm);background-color:var(--color-bg-panel);color:var(--color-text);border:var(--border-width-thin) solid var(--color-border);border-radius:var(--border-radius-none);padding:var(--spacing-xs) var(--spacing-sm)}.snake-input:focus{outline:none;border-color:var(--color-accent)}.snake-input::placeholder{color:var(--color-text-muted)}.snake-checkbox{accent-color:var(--color-accent);cursor:pointer}.snake-label{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.snake-panel{background-color:var(--snake-panel-bg);border:var(--border-width-thin) solid var(--color-border);padding:var(--spacing-sm)}.snake-player-card{display:flex;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--color-bg);border:var(--border-width-thin) solid var(--color-border);transition:border-color var(--transition-fast)}.snake-player-card:hover{border-color:var(--color-accent)}.snake-player-row{display:flex;align-items:center;gap:var(--spacing-md)}.snake-player-info{display:flex;flex-direction:column;justify-content:center;flex:1;min-width:0}.snake-player-name{font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.snake-player-stats{display:flex;flex-wrap:wrap;gap:var(--spacing-md);font-size:var(--font-size-sm);color:var(--color-text-muted)}.snake-high-score{color:var(--color-accent);font-weight:var(--font-weight-semibold)}.snake-digesting-horizontal{display:flex;justify-content:center;height:20px;gap:2px;flex:1}.snake-digesting-horizontal .food-block{width:20px;height:20px;border:var(--border-width-thin) solid var(--color-border)}.snake-digesting-vertical{display:flex;flex-direction:column;width:20px;gap:2px}.snake-digesting-vertical .food-block{width:20px;height:20px;border:var(--border-width-thin) solid var(--color-border)}.panel-switcher{display:flex;justify-content:center;gap:6px}.panel-switcher-unit{width:28px;height:28px;background:var(--color-bg);border:var(--border-width-thin) solid var(--color-border);cursor:pointer;transition:background-color var(--transition-fast),border-color var(--transition-fast);padding:0}.panel-switcher-unit:hover{border-color:var(--color-accent)}.panel-switcher-unit.active{background:var(--color-text)}.snake-panel-content{display:flex;flex-direction:column;gap:var(--spacing-lg);padding:var(--spacing-xl);background:var(--color-bg-panel);border:var(--border-width-thin) solid var(--color-border);overflow:hidden;box-sizing:border-box}.snake-food-badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;padding:0 var(--spacing-xs);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}.snake-text-muted{color:var(--color-text-muted)}.snake-text-accent{color:var(--color-accent)}.snake-settings{display:flex;flex-direction:column;gap:var(--spacing-lg)}.snake-settings-section{display:flex;flex-direction:column;gap:var(--spacing-md)}.snake-disconnected{display:flex;align-items:center;justify-content:center;flex:1;color:var(--color-accent);font-size:var(--font-size-lg)}.react-colorful{width:150px!important;height:150px!important}.react-colorful__saturation,.react-colorful__hue,.react-colorful__alpha{border-radius:var(--border-radius-none)!important}.react-colorful__saturation{border:var(--border-width-thin) solid var(--color-border)}.react-colorful__hue{border:var(--border-width-thin) solid var(--color-border);margin-top:var(--spacing-xs)}.react-colorful__pointer{width:16px!important;height:16px!important;border-radius:var(--border-radius-none)!important;border:2px solid var(--color-text)!important}@media (max-width: 640px){.snake-container{padding:var(--spacing-4xl) var(--spacing-xl)}.snake-header{margin-bottom:var(--spacing-4xl)}.snake-title{font-size:var(--font-size-2xl)}.snake-main{flex-direction:column;align-items:center}.snake-panel-container{width:100%;margin-top:var(--spacing-3xl)}.snake-player-card{padding:var(--spacing-xl)}.snake-settings{flex-direction:column}}:root{--color-bg: #0d1117;--color-bg-panel: #161b22;--color-border: #30363d;--color-text: #e6edf3;--color-text-muted: #8b949e;--color-accent: #c9714a;color-scheme:dark}:root[data-theme=light]{--color-bg: #ffffff;--color-bg-panel: #f6f8fa;--color-border: #d0d7de;--color-text: #1f2328;--color-text-muted: #656d76;--color-accent: #b35c3a;color-scheme:light}:root[data-theme=dark]{--color-bg: #0d1117;--color-bg-panel: #161b22;--color-border: #30363d;--color-text: #e6edf3;--color-text-muted: #8b949e;--color-accent: #c9714a;color-scheme:dark}@media (prefers-color-scheme: light){:root:not([data-theme]){--color-bg: #ffffff;--color-bg-panel: #f6f8fa;--color-border: #d0d7de;--color-text: #1f2328;--color-text-muted: #656d76;--color-accent: #b35c3a;color-scheme:light}}:root{--color-haskell: #5e5086}:root{--font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.75rem;--font-size-3xl: 2.5rem;--font-weight-normal: 400;--font-weight-semibold: 600;--line-height-normal: 1.6;--letter-spacing-tight: -.02em;--letter-spacing-normal: .02em;--letter-spacing-wide: .05em}:root{--spacing-xs: .125rem;--spacing-sm: .25rem;--spacing-md: .5rem;--spacing-lg: .75rem;--spacing-xl: 1rem;--spacing-2xl: 1.25rem;--spacing-3xl: 1.5rem;--spacing-4xl: 2rem;--spacing-5xl: 4rem}:root{--border-width-thin: 1px;--border-radius-none: 0}:root{--max-width-container: 1200px;--max-width-card: 340px;--breakpoint-mobile: 640px}:root{--transition-fast: .15s ease;--transition-theme: .2s ease;--card-lift: -2px}.font-mono{font-family:var(--font-mono)}.font-sans{font-family:var(--font-sans)}.text-primary{color:var(--color-text)}.text-muted{color:var(--color-text-muted)}.text-accent{color:var(--color-accent)}.bg-primary{background:var(--color-bg)}.bg-panel{background:var(--color-bg-panel)}.border{border:var(--border-width-thin) solid var(--color-border)}.border-accent{border:var(--border-width-thin) solid var(--color-accent)}.theme-transition{transition:background-color var(--transition-theme),color var(--transition-theme),border-color var(--transition-theme)}html{height:100vh;overflow:hidden}:root{font-family:var(--font-mono);line-height:var(--line-height-normal);font-weight:var(--font-weight-normal);color-scheme:dark;color:var(--color-text);background-color:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;height:100vh;overflow:hidden;background-color:var(--color-bg)}#root{height:100vh;overflow:hidden}