:root { color-scheme: dark; --bg: #0b121b; --ink: #eff8fa; --muted: #8295a6; --mint: #79ead2; --blue: #77bfff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font: 14px/1.5 system-ui, sans-serif; overscroll-behavior: none; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
canvas { display: block; }
#c { width: 100%; height: 100%; touch-action: none; }
.panel { background: rgba(12, 22, 32, .87); border: 1px solid rgba(155, 206, 223, .12); border-radius: 16px; box-shadow: 0 8px 30px #0002; }
.label, .eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 650; color: var(--muted); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px #79ead244; margin-right: 8px; }
#board { position: fixed; top: max(20px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left)); width: 212px; padding: 14px 16px; pointer-events: none; }
#board h3 { display: flex; align-items: center; margin: 0 0 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); font-weight: 600; }
.online-count { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #ffffff12; color: var(--muted); font-size: 11px; white-space: nowrap; }
.online-count .live-dot { margin: 0; }
#count { color: var(--mint); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
#lb { list-style: none; margin: 0; padding: 0; font-size: 12px; }
#lb li { display: flex; justify-content: space-between; gap: 12px; line-height: 1.9; }
#lb li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank { display: inline-block; width: 20px; color: #617b8d; font-variant-numeric: tabular-nums; }
#lb li:first-child .rank { color: #efcf86; }
#lb li.me { color: var(--mint); }
#mine { margin-top: 9px; padding-top: 9px; border-top: 1px solid #ffffff0b; color: var(--muted); font-size: 10px; }
#hud { position: fixed; top: max(20px, env(safe-area-inset-top)); right: max(20px, env(safe-area-inset-right)); padding: 14px 20px; text-align: right; min-width: 120px; pointer-events: none; }
#score { color: var(--mint); font-size: 46px; font-weight: 750; letter-spacing: -.05em; line-height: 1.15; font-variant-numeric: tabular-nums; transition: transform .15s; transform-origin: right; }
#score.bump { transform: scale(1.13); }
.best { margin-top: 5px; font-size: 11px; color: var(--muted); }
#best { color: #d7e6ed; margin-left: 4px; }
#harvest-status { margin-top: 8px; color: #efcf86; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
#controls { position: fixed; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; gap: 16px; align-items: center; padding: 11px 15px; white-space: nowrap; }
#controls button { border: 0; padding: 0; background: none; font-size: 12px; touch-action: none; }
#autopilot { display: flex; align-items: center; gap: 5px; }
#autopilot .live-dot { margin-right: 3px; }
#autopilot[aria-pressed="false"] .live-dot { background: var(--blue); }
kbd { font: 9px system-ui, sans-serif; color: #8295a6; padding: 2px 4px; border: 1px solid #ffffff18; border-radius: 4px; }
#autopilot kbd { margin-left: 3px; }
.divider { height: 22px; width: 1px; background: #ffffff12; }
#boost { min-width: 98px; }
#boost > span:first-child { display: flex; justify-content: space-between; align-items: center; }
.energy-track { display: block; height: 3px; width: 100%; margin-top: 6px; background: #ffffff14; border-radius: 2px; overflow: hidden; }
#energy { display: block; height: 100%; width: 100%; background: var(--mint); transform-origin: left; }
#boost.active { color: var(--mint); }
#boost.exhausted { color: var(--muted); }
#molt { min-width: 72px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
#molt small { margin-top: 4px; color: #efcf86; font-size: 9px; }
#molt:disabled { opacity: .55; cursor: default; }
#molt.active, #molt.active small { color: #ffe49b; }
#control-hint { font-size: 11px; color: var(--muted); }
#map-panel { position: fixed; right: 20px; bottom: 22px; padding: 10px; pointer-events: none; }
#map-panel .label { font-size: 8px; margin-bottom: 7px; }
#minimap { width: 104px; height: 104px; border-radius: 5px; }
#help-toggle { position: fixed; left: 20px; bottom: 22px; width: 32px; height: 32px; background: #132330; border: 1px solid #ffffff15; border-radius: 50%; color: var(--muted); }
#help { position: fixed; left: 20px; bottom: 68px; width: 290px; max-width: calc(100vw - 40px); padding: 18px; font-size: 12px; color: var(--muted); }
#help strong { color: var(--mint); }
#help p:last-child { margin-bottom: 0; }
#warning, #connection { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); padding: 8px 15px; background: #431f26e8; border: 1px solid #ec8b7950; border-radius: 30px; color: #ffc4b3; font-size: 12px; pointer-events: none; }
#connection { top: 64px; background: #172735ee; color: #bed9ed; border-color: #77bfff40; }
#harvest-message { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); padding: 8px 15px; background: #3b2c17ed; border: 1px solid #efcf8680; border-radius: 30px; color: #ffe4a9; font-weight: 700; font-size: 13px; white-space: nowrap; pointer-events: none; }
#dead { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; background: #08101965; }
.death-card { width: min(340px, calc(100vw - 36px)); text-align: center; padding: 28px; background: #0d1a27f5; }
#dead h1 { margin: 8px 0 0; font-size: 42px; letter-spacing: -.05em; }
#dead p { color: var(--muted); font-size: 12px; }
.death-score { margin: 18px 0; display: flex; flex-direction: column; }
#death-score { font-size: 48px; color: var(--mint); font-weight: 700; line-height: 1.2; }
.respawn-track { height: 3px; background: #ffffff0b; border-radius: 3px; overflow: hidden; }
#respawn-progress { display: block; height: 100%; background: var(--mint); transform-origin: left; }
#dbg { position: fixed; left: 16px; bottom: 180px; font: 11px/1.6 ui-monospace, monospace; color: var(--mint); background: #0b121be8; padding: 10px; border-radius: 8px; pointer-events: none; }
#join { position: fixed; inset: 0; display: grid; place-items: center; overflow: auto; background: radial-gradient(ellipse at 50% 45%, #152d37 0%, #0b121b 67%); }
#join::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(#b1e7dc03 1px, transparent 1px), linear-gradient(90deg, #b1e7dc03 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.card { width: min(460px, calc(100% - 40px)); text-align: center; padding: 44px 0; position: relative; }
#join h1 { font-size: clamp(70px, 13vw, 108px); line-height: 1.1; letter-spacing: -.075em; margin: 8px 0 4px; font-weight: 800; }
#join h1 span { color: var(--mint); }
.tag { color: #9fb4bf; margin: 12px 0 0; font-size: 15px; }
.snake-art { position: relative; margin: 24px auto; max-width: 390px; }
.snake-art svg { display: block; width: 100%; filter: drop-shadow(0 5px 18px #6de3cc10); }
.art-food { position: absolute; width: 8px; height: 8px; background: #efcc78; border-radius: 50%; box-shadow: 0 0 0 6px #efcc780c, 0 0 18px #efcc7825; }
.f1 { left: 7%; top: 21%; }.f2 { right: 9%; bottom: 13%; background: #b99be9; }.f3 { left: 51%; top: 8%; width: 5px; height: 5px; }
#joinform { text-align: left; }
#joinform label { display: block; margin-bottom: 9px; }
.join-fields { display: flex; gap: 10px; }
#name { width: 100%; min-width: 0; padding: 14px 16px; border: 1px solid #b3e7e022; border-radius: 12px; background: #0b1923; color: var(--ink); font-size: 16px; }
#name::placeholder { color: #627986; }
#play { flex-shrink: 0; padding: 14px 22px; border: 0; border-radius: 12px; background: var(--mint); color: #103b38; font-weight: 750; transition: background .15s, transform .15s; }
#play span { margin-left: 10px; }
#play:hover { background: #a0f6e3; transform: translateY(-1px); }
#play:disabled { opacity: .6; cursor: wait; transform: none; }
#join-status { font-size: 12px; color: #efcc78; margin: 7px 0; min-height: 18px; }
.how-to { display: flex; justify-content: space-between; margin-top: 15px; gap: 12px; font-size: 11px; color: #9fb4bf; }
.how-to b { display: block; font-size: 9px; color: #557b82; margin-bottom: 4px; letter-spacing: .15em; }
.hint { margin: 23px 0 0; color: #688590; font-size: 11px; line-height: 1.9; }
.join-footer { position: absolute; bottom: 22px; color: #45616d; font-size: 8px; letter-spacing: .19em; }
.join-footer span { margin: 0 12px; }
.orbit { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 720px; height: 720px; border: 1px solid #91d4c904; border-radius: 50%; pointer-events: none; }
.orbit-two { width: 1000px; height: 1000px; }
@media (max-width: 1050px) { #control-hint { display: none; } }
@media (max-width: 600px) {
  #board { top: max(12px, env(safe-area-inset-top)); left: 12px; width: 165px; padding: 10px 12px; border-radius: 12px; }
  #lb li { font-size: 11px; } #lb li:nth-child(n+4) { display: none; } #mine { font-size: 9px; padding-top: 5px; margin-top: 5px; }
  #hud { top: max(12px, env(safe-area-inset-top)); right: 12px; min-width: 92px; padding: 10px 14px; border-radius: 12px; }
  #score { font-size: 34px; } #hud .label { font-size: 8px; }
  #controls { bottom: max(18px, env(safe-area-inset-bottom)); padding: 12px 12px; gap: 10px; } #controls kbd { display: none; } #boost { min-width: 76px; }
  #map-panel { right: 12px; bottom: 92px; padding: 7px; border-radius: 9px; } #minimap { width: 65px; height: 65px; } #map-panel .label { display: none; }
  #help-toggle { left: 12px; bottom: max(23px, env(safe-area-inset-bottom)); } #warning { top: 156px; font-size: 11px; } #connection { top: 192px; white-space: nowrap; } #harvest-message { top: 225px; }
  .card { padding: 28px 0; }.eyebrow { font-size: 8px; letter-spacing: .1em; }.tag { font-size: 12px; }.snake-art { margin: 16px auto; }
  #play { padding: 14px 16px; }.how-to { font-size: 9px; }.join-footer { display: none; }
}
@media (max-width: 360px) { #help-toggle { bottom: 90px; } #help { bottom: 135px; } }
@media (max-height: 520px) { .card { padding: 20px 0; }.snake-art, .how-to, .join-footer { display: none; } #join h1 { font-size: 62px; }.tag { margin-bottom: 20px; } #map-panel { display: none; } #lb li:nth-child(n+3) { display: none; } #warning { top: 14px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }