\n\n \n

BEST 0

\n \n

\n LV 1\n \n

\n\n \n

\n \n \n \n \n

\n\n \n

NEON
SERPENT

combos · power-ups · portals · mines · drones

\n\n \n\n

\n \n \n \n

\n\n \n \n\n \n

Swipe / WASD / arrows to steer · Space to pause

\n\n \n

🏆 GLOBAL LEADERBOARD

\n \n \n \n

\n \n

\n\n \n

⭐ ACHIEVEMENTS

\n \n

\n\n \n

🎨 SERPENT SKINS

\n \n

\n\n \n

📊 LIFETIME STATS

\n \n

\n\n \n

⚙️ SETTINGS

\n Sound effects\n \n Music\n \n Particles\n \n Virtual D-pad\n \n Screen shake\n \n Haptics (vibration)\n \n Show grid\n \n

\n \n

\n\n \n

⏸ PAUSED

\n \n \n \n

\n\n \n

GAME OVER

\n NEW BEST!\n

\n \n \n

\n\n \n

\n \n \n

\n\n

\n \n\n\n",1,["D",1783684262441],"branchVersion","label",[18],"pulls","branches","forks","envVars",{"_168":26,"_170":26},"connections",{"_168":26,"_169":26},"count","unfilledCount","emptyCount",{"_33":271,"_13":222,"_63":215,"_43":-5,"_35":36,"_158":258,"_187":148,"_37":272,"_39":26,"_65":273,"_154":-5,"_66":24,"_159":-5,"_190":274,"_17":275},{"_33":263,"_13":264,"_63":265,"_43":215,"_35":36,"_158":266,"_187":148,"_37":267,"_39":26,"_65":218,"_154":268,"_66":24,"_159":-5,"_190":269,"_17":270},{"_33":255,"_13":256,"_63":257,"_43":215,"_35":36,"_158":258,"_187":148,"_37":259,"_39":26,"_65":218,"_154":260,"_66":24,"_159":-5,"_190":261,"_17":262},{"_33":247,"_13":248,"_63":249,"_43":215,"_35":36,"_158":250,"_187":148,"_37":251,"_39":26,"_65":218,"_154":252,"_66":24,"_159":-5,"_190":253,"_17":254},{"_33":239,"_13":240,"_63":241,"_43":215,"_35":36,"_158":242,"_187":148,"_37":243,"_39":26,"_65":218,"_154":244,"_66":24,"_159":-5,"_190":245,"_17":246},{"_33":231,"_13":232,"_63":233,"_43":215,"_35":36,"_158":234,"_187":148,"_37":235,"_39":26,"_65":218,"_154":236,"_66":24,"_159":-5,"_190":237,"_17":238},{"_33":223,"_13":224,"_63":225,"_43":215,"_35":36,"_158":226,"_187":148,"_37":227,"_39":26,"_65":218,"_154":228,"_66":24,"_159":-5,"_190":229,"_17":230},{"_33":212,"_13":213,"_63":214,"_43":215,"_35":36,"_158":216,"_187":148,"_37":217,"_39":26,"_65":218,"_154":219,"_66":24,"_159":-5,"_190":220,"_17":221},{"_33":205,"_13":206,"_63":207,"_43":-5,"_35":36,"_158":117,"_187":148,"_37":208,"_39":26,"_65":21,"_154":209,"_66":24,"_159":-5,"_190":210,"_17":211},{"_33":153,"_13":18,"_63":64,"_43":-5,"_35":36,"_158":72,"_187":148,"_37":202,"_39":156,"_65":21,"_154":155,"_66":24,"_159":-5,"_190":203,"_17":204},{"_33":193,"_13":194,"_63":195,"_43":-5,"_35":36,"_158":196,"_187":148,"_37":197,"_39":156,"_65":198,"_154":199,"_66":24,"_159":-5,"_190":200,"_17":201},{"_33":183,"_13":184,"_63":185,"_43":-5,"_35":36,"_158":186,"_187":148,"_37":188,"_39":26,"_65":21,"_154":189,"_66":24,"_159":-5,"_190":191,"_17":192},"366bcdeb-0946-4bb4-bd68-2ac3fcd9bd55","styles.css","c9fe0072-7c55-11f1-813b-1607ee4eb77e",12,"latest",["D",1783684332802],"/* ============================================================================\n NEON SERPENT — styles.css\n Mobile-first neon UI. Safe-area aware, no page scrolling, glassy panels.\n ========================================================================== */\n\n:root {\n --bg: #05050f;\n --panel: rgba(10, 12, 30, 0.92);\n --neon-cyan: #00ffe1;\n --neon-pink: #ff3d81;\n --neon-blue: #3da5ff;\n --neon-gold: #ffd23d;\n --text: #e8ecff;\n --text-dim: #8a93b8;\n --border: rgba(0, 255, 225, 0.25);\n --radius: 14px;\n --font: 'Orbitron', 'Segoe UI', system-ui, sans-serif;\n}\n\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\nhtml, body {\n height: 100%;\n overflow: hidden;\n background: var(--bg);\n color: var(--text);\n font-family: var(--font);\n -webkit-tap-highlight-color: transparent;\n -webkit-user-select: none;\n user-select: none;\n touch-action: manipulation;\n overscroll-behavior: none;\n}\n\n#app {\n height: 100dvh;\n display: flex;\n flex-direction: column;\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n}\n\n/* ============================= HUD ==================================== */\n#hud {\n display: none;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n padding: 8px 12px;\n min-height: 52px;\n}\n#hud.visible { display: flex; }\n\n.hud-left { display: flex; flex-direction: column; }\n.hud-score {\n font-size: 26px;\n font-weight: 900;\n color: var(--neon-cyan);\n text-shadow: 0 0 12px rgba(0, 255, 225, 0.6);\n line-height: 1;\n font-variant-numeric: tabular-nums;\n}\n.hud-best { font-size: 10px; color: var(--text-dim); letter-spacing: 1px; margin-top: 3px; }\n\n.hud-center {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 4px;\n min-width: 0;\n}\n.hud-combo { display: flex; align-items: center; gap: 6px; }\n.combo-x {\n font-size: 18px;\n font-weight: 900;\n color: var(--neon-gold);\n text-shadow: 0 0 10px rgba(255, 210, 61, 0.7);\n}\n.combo-bar {\n width: 72px; height: 6px;\n background: rgba(255, 255, 255, 0.12);\n border-radius: 3px;\n overflow: hidden;\n}\n.combo-fill {\n display: block; height: 100%;\n background: linear-gradient(90deg, var(--neon-gold), var(--neon-pink));\n border-radius: 3px;\n transition: width 0.1s linear;\n}\n.hud-effects { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; }\n.fx-chip {\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 0.5px;\n padding: 2px 7px;\n border-radius: 999px;\n border: 1px solid var(--border);\n background: rgba(0, 255, 225, 0.08);\n color: var(--neon-cyan);\n white-space: nowrap;\n}\n.fx-chip[data-fx=\"shield\"] { color: #3da5ff; border-color: rgba(61,165,255,.4); background: rgba(61,165,255,.1); }\n.fx-chip[data-fx=\"ghost\"] { color: #b48cff; border-color: rgba(180,140,255,.4); background: rgba(180,140,255,.1); }\n.fx-chip[data-fx=\"magnet\"] { color: #ff8c3d; border-color: rgba(255,140,61,.4); background: rgba(255,140,61,.1); }\n.fx-chip[data-fx=\"turbo\"] { color: #ffe93d; border-color: rgba(255,233,61,.4); background: rgba(255,233,61,.1); }\n.fx-chip[data-fx=\"x2\"] { color: #ff3dff; border-color: rgba(255,61,255,.4); background: rgba(255,61,255,.1); }\n.fx-chip[data-fx=\"slowmo\"] { color: #3dffd2; border-color: rgba(61,255,210,.4); background: rgba(61,255,210,.1); }\n\n.hud-right { display: flex; align-items: center; gap: 10px; }\n.hud-level {\n font-size: 13px; font-weight: 800;\n color: var(--neon-pink);\n text-shadow: 0 0 8px rgba(255, 61, 129, 0.6);\n}\n.icon-btn {\n background: rgba(255, 255, 255, 0.06);\n border: 1px solid var(--border);\n color: var(--text);\n font-size: 16px;\n width: 38px; height: 38px;\n border-radius: 10px;\n cursor: pointer;\n}\n.icon-btn:active { transform: scale(0.94); }\n\n/* ============================ BOARD ==================================== */\n#board-wrap {\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n min-height: 0;\n padding: 4px;\n}\n#game {\n border-radius: 8px;\n box-shadow: 0 0 40px rgba(0, 255, 225, 0.1), 0 0 120px rgba(255, 61, 129, 0.06);\n touch-action: none;\n}\n#countdown {\n position: absolute;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n font-size: clamp(64px, 18vw, 120px);\n font-weight: 900;\n color: var(--neon-cyan);\n text-shadow: 0 0 30px rgba(0, 255, 225, 0.8), 0 0 80px rgba(0, 255, 225, 0.4);\n pointer-events: none;\n animation: countPulse 0.7s ease-in-out infinite;\n}\n@keyframes countPulse {\n 0% { transform: scale(1); opacity: 1; }\n 80% { transform: scale(1.18); opacity: 0.85; }\n 100% { transform: scale(1); opacity: 1; }\n}\n\n/* ============================ D-PAD ==================================== */\n#dpad {\n display: none;\n grid-template-columns: repeat(3, 58px);\n grid-template-rows: repeat(2, 46px);\n gap: 6px;\n justify-content: center;\n padding: 6px 0 10px;\n}\n.dpad-up { grid-column: 2; grid-row: 1; }\n.dpad-left { grid-column: 1; grid-row: 2; }\n.dpad-down { grid-column: 2; grid-row: 2; }\n.dpad-right { grid-column: 3; grid-row: 2; }\n.dpad-btn {\n background: rgba(0, 255, 225, 0.07);\n border: 1px solid var(--border);\n border-radius: 12px;\n color: var(--neon-cyan);\n font-size: 18px;\n cursor: pointer;\n touch-action: none;\n}\n.dpad-btn.active, .dpad-btn:active {\n background: rgba(0, 255, 225, 0.25);\n box-shadow: 0 0 14px rgba(0, 255, 225, 0.4);\n}\n\n/* =========================== SCREENS =================================== */\n.screen {\n position: fixed;\n inset: 0;\n display: none;\n align-items: center;\n justify-content: center;\n background: radial-gradient(ellipse at 50% 30%, rgba(20, 24, 60, 0.85), rgba(5, 5, 15, 0.96));\n backdrop-filter: blur(6px);\n z-index: 50;\n padding: 16px;\n}\n.screen.visible { display: flex; }\n\n.panel {\n width: 100%;\n max-width: 420px;\n max-height: calc(100dvh - 32px);\n overflow-y: auto;\n background: var(--panel);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 22px 20px;\n text-align: center;\n box-shadow: 0 0 60px rgba(0, 255, 225, 0.08);\n scrollbar-width: thin;\n}\n\n.logo {\n font-size: clamp(36px, 11vw, 52px);\n font-weight: 900;\n line-height: 0.95;\n letter-spacing: 3px;\n background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink));\n -webkit-background-clip: text;\n background-clip: text;\n -webkit-text-fill-color: transparent;\n filter: drop-shadow(0 0 18px rgba(0, 255, 225, 0.35));\n animation: logoGlow 3s ease-in-out infinite;\n}\n@keyframes logoGlow {\n 0%, 100% { filter: drop-shadow(0 0 14px rgba(0, 255, 225, 0.3)); }\n 50% { filter: drop-shadow(0 0 26px rgba(255, 61, 129, 0.45)); }\n}\n.tagline { font-size: 10px; color: var(--text-dim); letter-spacing: 1.5px; margin: 8px 0 16px; }\n\nh2 { font-size: 20px; font-weight: 800; margin-bottom: 14px; letter-spacing: 1px; }\n\n#player-name {\n width: 100%;\n padding: 11px 14px;\n border-radius: 10px;\n border: 1px solid var(--border);\n background: rgba(255, 255, 255, 0.05);\n color: var(--text);\n font-family: var(--font);\n font-size: 13px;\n letter-spacing: 1px;\n text-align: center;\n outline: none;\n margin-bottom: 14px;\n}\n#player-name:focus { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0, 255, 225, 0.25); }\n\n.mode-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }\n.mode-btn {\n display: flex;\n flex-direction: column;\n gap: 2px;\n padding: 10px 14px;\n border-radius: 10px;\n border: 1px solid rgba(255, 255, 255, 0.12);\n background: rgba(255, 255, 255, 0.04);\n color: var(--text);\n font-family: var(--font);\n cursor: pointer;\n text-align: left;\n transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;\n}\n.mode-btn.selected {\n border-color: var(--neon-cyan);\n background: rgba(0, 255, 225, 0.09);\n box-shadow: 0 0 16px rgba(0, 255, 225, 0.2);\n}\n.mode-name { font-size: 14px; font-weight: 800; letter-spacing: 1px; }\n.mode-desc { font-size: 10px; color: var(--text-dim); }\n\n.big-btn {\n width: 100%;\n padding: 14px;\n margin-top: 10px;\n border: none;\n border-radius: 12px;\n background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));\n color: #041018;\n font-family: var(--font);\n font-size: 17px;\n font-weight: 900;\n letter-spacing: 2px;\n cursor: pointer;\n box-shadow: 0 0 24px rgba(0, 255, 225, 0.35);\n transition: transform 0.1s;\n}\n.big-btn:active { transform: scale(0.97); }\n.ghost-btn {\n background: rgba(255, 255, 255, 0.06);\n color: var(--text);\n box-shadow: none;\n border: 1px solid rgba(255, 255, 255, 0.15);\n font-size: 13px;\n}\n\n.menu-best { font-size: 10px; color: var(--text-dim); margin-top: 12px; letter-spacing: 0.5px; }\n\n.menu-links {\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n justify-content: center;\n margin-top: 14px;\n}\n.link-btn {\n padding: 8px 12px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n background: rgba(255, 255, 255, 0.04);\n color: var(--text);\n font-family: var(--font);\n font-size: 11px;\n cursor: pointer;\n}\n.link-btn:active { background: rgba(0, 255, 225, 0.12); }\n\n.hint { font-size: 9px; color: var(--text-dim); margin-top: 14px; letter-spacing: 0.5px; }\n\n/* ========================= LEADERBOARD ================================= */\n.tab-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; }\n.tab-btn {\n padding: 7px 14px;\n border-radius: 999px;\n border: 1px solid rgba(255, 255, 255, 0.14);\n background: transparent;\n color: var(--text-dim);\n font-family: var(--font);\n font-size: 11px;\n cursor: pointer;\n}\n.tab-btn.selected {\n color: var(--neon-cyan);\n border-color: var(--neon-cyan);\n background: rgba(0, 255, 225, 0.08);\n}\n\n.lb-list { display: flex; flex-direction: column; gap: 5px; min-height: 80px; }\n.lb-compact { max-height: 180px; overflow-y: auto; margin-top: 8px; }\n.lb-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 10px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.04);\n font-size: 12px;\n}\n.lb-row-me {\n border: 1px solid var(--neon-gold);\n background: rgba(255, 210, 61, 0.08);\n}\n.lb-rank { width: 28px; text-align: left; font-weight: 800; flex-shrink: 0; }\n.lb-name {\n flex: 1;\n text-align: left;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-weight: 700;\n}\n.lb-extra { font-size: 9px; color: var(--text-dim); flex-shrink: 0; }\n.lb-score {\n font-weight: 900;\n color: var(--neon-cyan);\n flex-shrink: 0;\n font-variant-numeric: tabular-nums;\n}\n.lb-empty { padding: 24px 0; color: var(--text-dim); font-size: 12px; }\n\n/* ========================= ACHIEVEMENTS ================================ */\n.ach-list { display: flex; flex-direction: column; gap: 6px; text-align: left; }\n.ach {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 10px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.04);\n}\n.ach-locked { opacity: 0.45; }\n.ach-unlocked { border: 1px solid rgba(255, 210, 61, 0.35); }\n.ach-icon { font-size: 20px; flex-shrink: 0; }\n.ach-body { display: flex; flex-direction: column; }\n.ach-name { font-size: 12px; font-weight: 800; }\n.ach-desc { font-size: 10px; color: var(--text-dim); }\n\n/* ============================ SKINS ==================================== */\n.skin-list { display: flex; flex-direction: column; gap: 6px; }\n.skin {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 9px 12px;\n border-radius: 10px;\n background: rgba(255, 255, 255, 0.04);\n border: 1px solid transparent;\n cursor: pointer;\n}\n.skin-active { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0, 255, 225, 0.2); }\n.skin-locked { opacity: 0.45; cursor: default; }\n.skin-swatch {\n width: 34px; height: 20px;\n border-radius: 999px;\n flex-shrink: 0;\n box-shadow: 0 0 10px rgba(255, 255, 255, 0.25);\n}\n.skin-name { flex: 1; text-align: left; font-size: 12px; font-weight: 700; }\n.skin-unlock { font-size: 9px; color: var(--text-dim); }\n\n/* ============================ STATS ==================================== */\n.stats-list { display: flex; flex-direction: column; gap: 4px; }\n.stat-row {\n display: flex;\n justify-content: space-between;\n padding: 7px 10px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.04);\n font-size: 12px;\n}\n.stat-val { font-weight: 800; color: var(--neon-cyan); }\n\n/* =========================== SETTINGS ================================== */\n.settings-list { display: flex; flex-direction: column; gap: 4px; }\n.setting-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 9px 12px;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.04);\n font-size: 12px;\n cursor: pointer;\n}\n.setting-row input[type=\"checkbox\"] {\n width: 20px; height: 20px;\n accent-color: var(--neon-cyan);\n cursor: pointer;\n}\n.setting-row select {\n background: rgba(10, 12, 30, 0.9);\n color: var(--text);\n border: 1px solid var(--border);\n border-radius: 6px;\n padding: 4px 8px;\n font-family: var(--font);\n font-size: 11px;\n}\n\n/* ========================== GAME OVER ================================== */\n.go-title {\n color: var(--neon-pink);\n text-shadow: 0 0 20px rgba(255, 61, 129, 0.6);\n font-size: 26px;\n}\n.go-reason { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; }\n.go-score-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; }\n.go-score {\n font-size: 44px;\n font-weight: 900;\n color: var(--neon-cyan);\n text-shadow: 0 0 24px rgba(0, 255, 225, 0.6);\n font-variant-numeric: tabular-nums;\n}\n.best-badge {\n background: linear-gradient(135deg, var(--neon-gold), #ff8c3d);\n color: #201200;\n font-size: 10px;\n font-weight: 900;\n padding: 4px 10px;\n border-radius: 999px;\n animation: badgePop 0.6s ease infinite alternate;\n}\n@keyframes badgePop { from { transform: scale(1); } to { transform: scale(1.08); } }\n.go-details { font-size: 11px; color: var(--text-dim); margin: 6px 0; }\n.go-rank {\n font-size: 14px;\n font-weight: 800;\n color: var(--neon-gold);\n min-height: 18px;\n margin: 4px 0;\n}\n\n/* ============================ TOAST ==================================== */\n#toast {\n position: fixed;\n left: 50%;\n bottom: calc(24px + env(safe-area-inset-bottom));\n transform: translate(-50%, 150%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 2px;\n background: var(--panel);\n border: 1px solid rgba(255, 210, 61, 0.5);\n border-radius: 12px;\n padding: 10px 20px;\n z-index: 100;\n transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1);\n box-shadow: 0 0 30px rgba(255, 210, 61, 0.25);\n pointer-events: none;\n max-width: 90vw;\n}\n#toast.show { transform: translate(-50%, 0); }\n.toast-title { font-size: 13px; font-weight: 900; color: var(--neon-gold); white-space: nowrap; }\n.toast-sub { font-size: 10px; color: var(--text-dim); }\n\n/* ========================== WIDE SCREENS ================================ */\n@media (min-width: 700px) and (min-height: 700px) {\n .hud-score { font-size: 32px; }\n #dpad { display: none !important; }\n}\n","children",[],[184],"fc923a55-4f94-4d82-9aeb-8c8d1974ef01","main.ts","2efb0bf8-7c53-11f1-a6d1-1607ee4eb77e",3,["D",1783683702093],"http","// ============================================================================\n// NEON SERPENT — Server\n// Serves the static game files and exposes a global leaderboard API\n// backed by this val's project-scoped SQLite database.\n// ============================================================================\n\nimport { Hono } from \"npm:hono\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ---------------------------------------------------------------------------\n// Database schema\n// ---------------------------------------------------------------------------\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS neon_serpent_scores_v1 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n score INTEGER NOT NULL,\n level INTEGER NOT NULL DEFAULT 1,\n max_combo INTEGER NOT NULL DEFAULT 0,\n length INTEGER NOT NULL DEFAULT 3,\n mode TEXT NOT NULL DEFAULT 'classic',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n`);\nawait sqlite.execute(`\n CREATE INDEX IF NOT EXISTS idx_ns_scores_mode_score\n ON neon_serpent_scores_v1 (mode, score DESC)\n`);\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\nconst VALID_MODES = new Set([\"classic\", \"hardcore\", \"zen\"]);\n\nfunction cleanName(raw: unknown): string {\n const s = String(raw ?? \"\")\n .replace(/[^\\p{L}\\p{N} _\\-\\.!]/gu, \"\")\n .trim()\n .slice(0, 16);\n return s.length ? s : \"ANON\";\n}\n\nfunction clampInt(v: unknown, min: number, max: number, fallback = min): number {\n const n = Math.floor(Number(v));\n if (!Number.isFinite(n)) return fallback;\n return Math.max(min, Math.min(max, n));\n}\n\n// ---------------------------------------------------------------------------\n// API: leaderboard\n// ---------------------------------------------------------------------------\napp.get(\"/api/scores\", async (c) => {\n const mode = VALID_MODES.has(c.req.query(\"mode\") ?? \"\") ? c.req.query(\"mode\")! : \"classic\";\n const limit = clampInt(c.req.query(\"limit\"), 1, 50, 15);\n const result = await sqlite.execute({\n sql: `SELECT name, score, level, max_combo, length, mode, created_at\n FROM neon_serpent_scores_v1\n WHERE mode = ?\n ORDER BY score DESC, created_at ASC\n LIMIT ?`,\n args: [mode, limit],\n });\n return c.json({ ok: true, mode, scores: result.rows });\n});\n\napp.post(\"/api/scores\", async (c) => {\n let body: Record;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ ok: false, error: \"invalid json\" }, 400);\n }\n\n const name = cleanName(body.name);\n const score = clampInt(body.score, 0, 10_000_000, 0);\n const level = clampInt(body.level, 1, 999, 1);\n const maxCombo = clampInt(body.maxCombo, 0, 9999, 0);\n const length = clampInt(body.length, 3, 100_000, 3);\n const mode = VALID_MODES.has(String(body.mode)) ? String(body.mode) : \"classic\";\n\n // Basic sanity: a snake of length N implies roughly (N - 3) foods eaten.\n // Reject scores that are wildly impossible for the reported length.\n const theoreticalMax = (length - 2) * 500 * 10 + 5000;\n if (score > theoreticalMax) {\n return c.json({ ok: false, error: \"score rejected by sanity check\" }, 422);\n }\n\n await sqlite.execute({\n sql: `INSERT INTO neon_serpent_scores_v1 (name, score, level, max_combo, length, mode)\n VALUES (?, ?, ?, ?, ?, ?)`,\n args: [name, score, level, maxCombo, length, mode],\n });\n\n // Return the player's global rank for this mode\n const rankRes = await sqlite.execute({\n sql: `SELECT COUNT(*) AS better FROM neon_serpent_scores_v1 WHERE mode = ? AND score > ?`,\n args: [mode, score],\n });\n const rank = Number((rankRes.rows[0] as Record).better) + 1;\n return c.json({ ok: true, rank });\n});\n\n// ---------------------------------------------------------------------------\n// Static files\n// ---------------------------------------------------------------------------\napp.get(\"/\", async (c) => {\n const html = await readFile(\"/index.html\", import.meta.url);\n return c.html(html);\n});\n\napp.get(\"/styles.css\", (c) => serveFile(\"/styles.css\", import.meta.url));\napp.get(\"/js/:file\", (c) => serveFile(`/js/${c.req.param(\"file\")}`, import.meta.url));\n\nexport default app.fetch;\n",[],[194],["D",1783684262441],[],[18],"748bb537-5734-4714-ae18-b1f0091cb34d","README.md","e4f485ae-7c55-11f1-b82b-1607ee4eb77e",["D",1783684378037],"# 🐍 NEON SERPENT\n\nAn absurdly juicy arcade snake game. Fully playable on **desktop and mobile**, with a global SQLite-backed leaderboard.\n\n**Play it:** the val's HTTP endpoint (main.ts).\n\n## Features\n\n- **3 game modes** — Classic, 💀 Hardcore (faster, extra hazards), 🧘 Zen (no death, wrap-around walls, tail-trim mercy)\n- **5 food types** — Data Bits, Gold Cores, Prism Shards (trigger a food FRENZY), Corrupted Bits (shrink you), pulsing MEGA Cores\n- **7 power-ups** — Shield, Ghost, Magnet, Slow-Mo, Turbo, 2X Score, Trim\n- **Hazards** — neon firewalls, blinking proximity mines, patrolling AI drones\n- **Portal pairs** that teleport you across the board\n- **Combo system** — chain food within the timer for up to a x10 multiplier\n- **Infinite levels** — 10 named sectors, then endless escalation; every level reshapes the board and shifts the palette\n- **Procedural audio** — all SFX and the adaptive synthwave soundtrack are synthesized live with WebAudio (zero audio files); music tempo rises with your level\n- **Full FX suite** — particles, shockwave rings, screen shake, floating combat text, parallax starfield, death slow-mo cascade\n- **Mobile-first controls** — swipe anywhere (chainable without lifting your finger), optional virtual D-pad, haptic feedback, safe-area aware layout. Gamepads work too.\n- **Meta progression** — 20 achievements, 6 unlockable skins, lifetime stats, per-mode personal bests (localStorage)\n- **Global leaderboard** — per-mode top scores stored in the val's SQLite DB, with a server-side sanity check against impossible scores\n\n## Architecture\n\n```mermaid\ngraph TD\n A[main.ts — Hono server] -->|serves| B[index.html + styles.css]\n A -->|/api/scores| DB[(SQLite leaderboard)]\n B --> G[js/game.js — engine & render pipeline]\n G --> C[js/config.js — all tuning, levels, achievements]\n G --> E[js/entities.js — food, power-ups, mines, drones, portals]\n G --> I[js/input.js — keyboard / swipe / d-pad / gamepad]\n G --> P[js/particles.js — FX system]\n G --> AU[js/audio.js — procedural WebAudio synth]\n G --> U[js/ui.js — persistence, leaderboard client, menus]\n```\n\n- Fixed-timestep simulation with interpolated rendering (buttery at any frame rate)\n- Direction queue buffers two turns so fast inputs never drop\n- DPR-aware canvas sizing for crisp rendering on high-density phone screens\n\n## Controls\n\n| Input | Action |\n|---|---|\n| Arrows / WASD | steer |\n| Swipe (mobile) | steer — keep your finger down and keep swiping |\n| Space / P / Esc | pause |\n| D-pad buttons | steer (auto-shown on touch devices) |\n",[],[206],"4a866a4e-0f31-43fd-a9b2-c06a48effc4b","ui.js","fb3c3902-7c54-11f1-a9fd-1607ee4eb77e","0a0ca764-612c-4e9d-81e4-1247f1a92cf4",9,["D",1783683985893],"script","// ============================================================================\n// NEON SERPENT — ui.js\n// Meta layer: localStorage persistence (settings / stats / achievements /\n// unlocked skins / best scores), the global leaderboard client, achievement\n// toasts, and screen management helpers.\n// ============================================================================\n\nimport {\n STORAGE_KEYS, DEFAULT_SETTINGS, ACHIEVEMENTS, SKINS,\n} from \"./config.js\";\nimport { audio } from \"./audio.js\";\n\n// ---------------------------------------------------------------------------\n// Safe localStorage wrappers (private-mode Safari throws)\n// ---------------------------------------------------------------------------\nfunction load(key, fallback) {\n try {\n const raw = localStorage.getItem(key);\n return raw ? { ...fallback, ...JSON.parse(raw) } : { ...fallback };\n } catch {\n return { ...fallback };\n }\n}\n\nfunction save(key, value) {\n try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* ignore */ }\n}\n\n// ---------------------------------------------------------------------------\n// Settings\n// ---------------------------------------------------------------------------\nexport const settings = load(STORAGE_KEYS.SETTINGS, DEFAULT_SETTINGS);\nexport function saveSettings() { save(STORAGE_KEYS.SETTINGS, settings); }\n\n// ---------------------------------------------------------------------------\n// Lifetime stats\n// ---------------------------------------------------------------------------\nconst DEFAULT_STATS = {\n gamesPlayed: 0, totalFood: 0, totalScore: 0, deaths: 0,\n portalUses: 0, bestCombo: 0, bestLength: 3, totalTimeMs: 0,\n};\nexport const stats = load(STORAGE_KEYS.STATS, DEFAULT_STATS);\nexport function saveStats() { save(STORAGE_KEYS.STATS, stats); }\n\n// Best score per mode\nexport const best = load(STORAGE_KEYS.BEST, { classic: 0, hardcore: 0, zen: 0 });\nexport function saveBest() { save(STORAGE_KEYS.BEST, best); }\n\n// ---------------------------------------------------------------------------\n// Achievements\n// ---------------------------------------------------------------------------\nconst achState = load(STORAGE_KEYS.ACHIEVEMENTS, {});\nexport function hasAchievement(id) { return !!achState[id]; }\n\nexport function unlockAchievement(id) {\n if (achState[id]) return false;\n const def = ACHIEVEMENTS.find((a) => a.id === id);\n if (!def) return false;\n achState[id] = Date.now();\n save(STORAGE_KEYS.ACHIEVEMENTS, achState);\n audio.achievement();\n showToast(`${def.icon} ${def.name}`, def.desc);\n return true;\n}\n\nexport function achievementCount() {\n return Object.keys(achState).filter((k) => achState[k]).length;\n}\n\n// ---------------------------------------------------------------------------\n// Skins\n// ---------------------------------------------------------------------------\nexport function currentSkinId() {\n try { return localStorage.getItem(STORAGE_KEYS.SKIN) || \"neon\"; } catch { return \"neon\"; }\n}\nexport function setSkin(id) {\n try { localStorage.setItem(STORAGE_KEYS.SKIN, id); } catch { /* ignore */ }\n}\n\nexport function skinUnlocked(skin) {\n if (!skin.unlock) return true;\n const u = skin.unlock;\n const bestAny = Math.max(best.classic, best.hardcore, best.zen);\n if (u.score && bestAny >= u.score) return true;\n if (u.combo && stats.bestCombo >= u.combo) return true;\n if (u.deaths && stats.deaths >= u.deaths) return true;\n return false;\n}\n\nexport function getSkin() {\n const id = currentSkinId();\n const skin = SKINS.find((s) => s.id === id) || SKINS[0];\n return skinUnlocked(skin) ? skin : SKINS[0];\n}\n\n// ---------------------------------------------------------------------------\n// Player name\n// ---------------------------------------------------------------------------\nexport function getPlayerName() {\n try { return localStorage.getItem(STORAGE_KEYS.NAME) || \"\"; } catch { return \"\"; }\n}\nexport function setPlayerName(name) {\n try { localStorage.setItem(STORAGE_KEYS.NAME, name.slice(0, 16)); } catch { /* ignore */ }\n}\n\n// ---------------------------------------------------------------------------\n// Leaderboard client\n// ---------------------------------------------------------------------------\nexport async function fetchLeaderboard(mode = \"classic\") {\n try {\n const res = await fetch(`/api/scores?mode=${encodeURIComponent(mode)}&limit=15`);\n if (!res.ok) return null;\n const data = await res.json();\n return data.scores ?? null;\n } catch {\n return null;\n }\n}\n\nexport async function submitScore({ name, score, level, maxCombo, length, mode }) {\n try {\n const res = await fetch(\"/api/scores\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ name, score, level, maxCombo, length, mode }),\n });\n if (!res.ok) return null;\n const data = await res.json();\n return data.ok ? data.rank : null;\n } catch {\n return null;\n }\n}\n\nexport function renderLeaderboard(container, scores, highlightName = null) {\n if (!scores) {\n container.innerHTML = `

Couldn't reach the leaderboard 📡

`;\n return;\n }\n if (!scores.length) {\n container.innerHTML = `

No scores yet — be the first!

`;\n return;\n }\n const medals = [\"🥇\", \"🥈\", \"🥉\"];\n container.innerHTML = scores.map((s, i) => {\n const hl = highlightName && s.name === highlightName ? \" lb-row-me\" : \"\";\n const rank = medals[i] ?? `${i + 1}.`;\n return `

\n ${rank}\n ${escapeHtml(s.name)}\n L${s.level} · x${s.max_combo}\n ${Number(s.score).toLocaleString()}\n

`;\n }).join(\"\");\n}\n\nfunction escapeHtml(s) {\n return String(s).replace(/[&<>\"']/g, (c) => ({\n \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\", \"'\": \"'\",\n }[c]));\n}\n\n// ---------------------------------------------------------------------------\n// Achievement toast queue (bottom of screen, one at a time)\n// ---------------------------------------------------------------------------\nconst toastQueue = [];\nlet toastActive = false;\n\nexport function showToast(title, subtitle = \"\") {\n toastQueue.push({ title, subtitle });\n if (!toastActive) drainToasts();\n}\n\nfunction drainToasts() {\n const next = toastQueue.shift();\n if (!next) { toastActive = false; return; }\n toastActive = true;\n const el = document.getElementById(\"toast\");\n el.querySelector(\".toast-title\").textContent = next.title;\n el.querySelector(\".toast-sub\").textContent = next.subtitle;\n el.classList.add(\"show\");\n setTimeout(() => {\n el.classList.remove(\"show\");\n setTimeout(drainToasts, 350);\n }, 2400);\n}\n\n// ---------------------------------------------------------------------------\n// Screen management — each screen is a .screen element; one visible at a time\n// ---------------------------------------------------------------------------\nexport function showScreen(id) {\n document.querySelectorAll(\".screen\").forEach((el) => {\n el.classList.toggle(\"visible\", el.id === id);\n });\n}\n\nexport function hideAllScreens() {\n document.querySelectorAll(\".screen\").forEach((el) => el.classList.remove(\"visible\"));\n}\n\n// ---------------------------------------------------------------------------\n// Render helpers for menu panels\n// ---------------------------------------------------------------------------\nexport function renderAchievementsPanel(container) {\n container.innerHTML = ACHIEVEMENTS.map((a) => {\n const unlocked = hasAchievement(a.id);\n return `

\n ${unlocked ? a.icon : \"🔒\"}\n \n ${a.name}\n ${a.desc}\n \n

`;\n }).join(\"\");\n}\n\nexport function renderSkinsPanel(container, onPick) {\n container.innerHTML = \"\";\n const current = currentSkinId();\n for (const skin of SKINS) {\n const unlocked = skinUnlocked(skin);\n const div = document.createElement(\"div\");\n div.className = `skin ${unlocked ? \"\" : \"skin-locked\"} ${skin.id === current ? \"skin-active\" : \"\"}`;\n const unlockText = skin.unlock\n ? (skin.unlock.score ? `Score ${skin.unlock.score.toLocaleString()}`\n : skin.unlock.combo ? `Combo x${skin.unlock.combo}`\n : `${skin.unlock.deaths} deaths`)\n : \"Default\";\n div.innerHTML = `\n \n ${skin.name}\n ${unlocked ? \"✓\" : unlockText}`;\n if (unlocked) {\n div.addEventListener(\"click\", () => {\n setSkin(skin.id);\n audio.ui();\n onPick?.(skin);\n renderSkinsPanel(container, onPick);\n });\n }\n container.appendChild(div);\n }\n}\n\nexport function renderStatsPanel(container) {\n const rows = [\n [\"Games played\", stats.gamesPlayed],\n [\"Lifetime food eaten\", stats.totalFood],\n [\"Lifetime score\", stats.totalScore.toLocaleString()],\n [\"Best combo\", `x${stats.bestCombo}`],\n [\"Longest snake\", `${stats.bestLength} segments`],\n [\"Portal jumps\", stats.portalUses],\n [\"Deaths\", stats.deaths],\n [\"Time in the grid\", `${Math.round(stats.totalTimeMs / 60000)} min`],\n [\"Achievements\", `${achievementCount()} / ${ACHIEVEMENTS.length}`],\n ];\n container.innerHTML = rows.map(([k, v]) =>\n `

${k}${v}

`).join(\"\");\n}\n",[],[222,213],"js","40e80229-e4d3-4e49-b00a-bcc9b4e4ee08","particles.js","b2ae2010-7c54-11f1-8c99-1607ee4eb77e",6,["D",1783683864196],"// ============================================================================\n// NEON SERPENT — particles.js\n// Visual FX toolkit: particle system, floating combat text, screen shake,\n// flash overlays, parallax starfield background, and ring/shockwave effects.\n// All effects respect the \"particles\" quality setting (high / low / off).\n// ============================================================================\n\nexport class FxSystem {\n constructor() {\n this.particles = [];\n this.texts = [];\n this.rings = [];\n this.stars = [];\n this.shake = { power: 0, decay: 0.9, x: 0, y: 0 };\n this.flash = { color: null, alpha: 0 };\n this.quality = \"high\"; // high | low | off\n this._starW = 0;\n this._starH = 0;\n }\n\n setQuality(q) { this.quality = q; }\n\n qualityMult() {\n if (this.quality === \"off\") return 0;\n if (this.quality === \"low\") return 0.35;\n return 1;\n }\n\n // -------------------------------------------------------------------------\n // Starfield (three parallax layers, drifting slowly)\n // -------------------------------------------------------------------------\n initStars(w, h) {\n this._starW = w;\n this._starH = h;\n this.stars = [];\n const count = Math.floor((w * h) / 9000);\n for (let i = 0; i < count; i++) {\n this.stars.push({\n x: Math.random() * w,\n y: Math.random() * h,\n z: 0.3 + Math.random() * 0.7, // depth → speed & brightness\n tw: Math.random() * Math.PI * 2, // twinkle phase\n twSpeed: 0.5 + Math.random() * 2,\n });\n }\n }\n\n updateStars(dt, driftX = 4, driftY = 2) {\n const w = this._starW, h = this._starH;\n for (const s of this.stars) {\n s.x += driftX * s.z * dt;\n s.y += driftY * s.z * dt;\n s.tw += s.twSpeed * dt;\n if (s.x > w) s.x -= w;\n if (s.x < 0) s.x += w;\n if (s.y > h) s.y -= h;\n if (s.y < 0) s.y += h;\n }\n }\n\n drawStars(ctx, hue) {\n if (this.quality === \"off\") return;\n ctx.save();\n for (const s of this.stars) {\n const b = 0.25 + 0.5 * s.z + 0.25 * Math.sin(s.tw);\n ctx.fillStyle = `hsla(${hue}, 60%, 80%, ${b * 0.5})`;\n const size = s.z * 2;\n ctx.fillRect(s.x, s.y, size, size);\n }\n ctx.restore();\n }\n\n // -------------------------------------------------------------------------\n // Particles\n // -------------------------------------------------------------------------\n burst(x, y, color, opts = {}) {\n const mult = this.qualityMult();\n if (mult === 0) return;\n const {\n count = 16, speed = 140, spread = Math.PI * 2, baseAngle = 0,\n life = 0.7, size = 3.5, gravity = 0, drag = 0.92, glow = true,\n shape = \"circle\",\n } = opts;\n const n = Math.max(1, Math.round(count * mult));\n for (let i = 0; i < n; i++) {\n const angle = baseAngle + (Math.random() - 0.5) * spread;\n const sp = speed * (0.4 + Math.random() * 0.8);\n this.particles.push({\n x, y,\n vx: Math.cos(angle) * sp,\n vy: Math.sin(angle) * sp,\n life: life * (0.6 + Math.random() * 0.7),\n maxLife: life,\n size: size * (0.6 + Math.random() * 0.8),\n color, gravity, drag, glow, shape,\n rot: Math.random() * Math.PI * 2,\n rotSpeed: (Math.random() - 0.5) * 10,\n });\n }\n }\n\n confetti(x, y) {\n const colors = [\"#ff3d81\", \"#3da5ff\", \"#ffd23d\", \"#3dffd2\", \"#ff3dff\", \"#b4ff3d\"];\n for (const c of colors) {\n this.burst(x, y, c, {\n count: 6, speed: 220, life: 1.2, size: 4,\n gravity: 260, drag: 0.96, shape: \"square\",\n });\n }\n }\n\n trail(x, y, color) {\n if (this.qualityMult() < 1 && Math.random() > 0.4) return;\n if (this.qualityMult() === 0) return;\n this.particles.push({\n x: x + (Math.random() - 0.5) * 4,\n y: y + (Math.random() - 0.5) * 4,\n vx: (Math.random() - 0.5) * 12,\n vy: (Math.random() - 0.5) * 12,\n life: 0.4, maxLife: 0.4,\n size: 2.5, color, gravity: 0, drag: 0.9, glow: true, shape: \"circle\",\n rot: 0, rotSpeed: 0,\n });\n }\n\n ring(x, y, color, maxRadius = 60, life = 0.5, width = 3) {\n if (this.quality === \"off\") return;\n this.rings.push({ x, y, color, r: 4, maxRadius, life, maxLife: life, width });\n }\n\n // -------------------------------------------------------------------------\n // Floating text (\"+120\", \"COMBO x5!\", \"LEVEL UP\")\n // -------------------------------------------------------------------------\n text(x, y, str, color = \"#ffffff\", opts = {}) {\n const { size = 16, life = 1.0, vy = -46, bold = true } = opts;\n this.texts.push({\n x, y, str, color, size, bold,\n life, maxLife: life, vy,\n vx: (Math.random() - 0.5) * 10,\n });\n }\n\n bigText(x, y, str, color) {\n this.text(x, y, str, color, { size: 26, life: 1.4, vy: -30 });\n }\n\n // -------------------------------------------------------------------------\n // Screen shake & flash\n // -------------------------------------------------------------------------\n addShake(power) {\n this.shake.power = Math.min(24, this.shake.power + power);\n }\n\n addFlash(color, alpha = 0.35) {\n this.flash.color = color;\n this.flash.alpha = Math.max(this.flash.alpha, alpha);\n }\n\n // -------------------------------------------------------------------------\n // Tick\n // -------------------------------------------------------------------------\n update(dt) {\n // particles\n for (let i = this.particles.length - 1; i >= 0; i--) {\n const p = this.particles[i];\n p.life -= dt;\n if (p.life <= 0) { this.particles.splice(i, 1); continue; }\n p.vy += p.gravity * dt;\n p.vx *= Math.pow(p.drag, dt * 60);\n p.vy *= Math.pow(p.drag, dt * 60);\n p.x += p.vx * dt;\n p.y += p.vy * dt;\n p.rot += p.rotSpeed * dt;\n }\n // rings\n for (let i = this.rings.length - 1; i >= 0; i--) {\n const r = this.rings[i];\n r.life -= dt;\n if (r.life <= 0) { this.rings.splice(i, 1); continue; }\n const t = 1 - r.life / r.maxLife;\n r.r = 4 + (r.maxRadius - 4) * (1 - Math.pow(1 - t, 3)); // ease-out cubic\n }\n // texts\n for (let i = this.texts.length - 1; i >= 0; i--) {\n const t = this.texts[i];\n t.life -= dt;\n if (t.life <= 0) { this.texts.splice(i, 1); continue; }\n t.x += t.vx * dt;\n t.y += t.vy * dt;\n }\n // shake\n if (this.shake.power > 0.1) {\n this.shake.x = (Math.random() - 0.5) * this.shake.power;\n this.shake.y = (Math.random() - 0.5) * this.shake.power;\n this.shake.power *= Math.pow(this.shake.decay, dt * 60);\n } else {\n this.shake.x = 0;\n this.shake.y = 0;\n this.shake.power = 0;\n }\n // flash\n if (this.flash.alpha > 0) {\n this.flash.alpha = Math.max(0, this.flash.alpha - dt * 1.4);\n }\n }\n\n // -------------------------------------------------------------------------\n // Draw (call inside the shaken canvas transform)\n // -------------------------------------------------------------------------\n drawParticles(ctx) {\n for (const p of this.particles) {\n const a = Math.max(0, p.life / p.maxLife);\n ctx.save();\n ctx.globalAlpha = a;\n if (p.glow && this.quality === \"high\") {\n ctx.shadowBlur = 8;\n ctx.shadowColor = p.color;\n }\n ctx.fillStyle = p.color;\n if (p.shape === \"square\") {\n ctx.translate(p.x, p.y);\n ctx.rotate(p.rot);\n ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size);\n } else {\n ctx.beginPath();\n ctx.arc(p.x, p.y, p.size * a, 0, Math.PI * 2);\n ctx.fill();\n }\n ctx.restore();\n }\n\n for (const r of this.rings) {\n const a = Math.max(0, r.life / r.maxLife);\n ctx.save();\n ctx.globalAlpha = a;\n ctx.strokeStyle = r.color;\n ctx.lineWidth = r.width * a + 0.5;\n if (this.quality === \"high\") {\n ctx.shadowBlur = 12;\n ctx.shadowColor = r.color;\n }\n ctx.beginPath();\n ctx.arc(r.x, r.y, r.r, 0, Math.PI * 2);\n ctx.stroke();\n ctx.restore();\n }\n }\n\n drawTexts(ctx) {\n for (const t of this.texts) {\n const a = Math.min(1, (t.life / t.maxLife) * 2);\n ctx.save();\n ctx.globalAlpha = a;\n ctx.font = `${t.bold ? \"800\" : \"600\"} ${t.size}px 'Orbitron', 'Segoe UI', sans-serif`;\n ctx.textAlign = \"center\";\n ctx.lineWidth = 3;\n ctx.strokeStyle = \"rgba(0,0,0,0.7)\";\n ctx.strokeText(t.str, t.x, t.y);\n ctx.fillStyle = t.color;\n if (this.quality === \"high\") {\n ctx.shadowBlur = 10;\n ctx.shadowColor = t.color;\n }\n ctx.fillText(t.str, t.x, t.y);\n ctx.restore();\n }\n }\n\n drawFlash(ctx, w, h) {\n if (this.flash.alpha > 0 && this.flash.color) {\n ctx.save();\n ctx.globalAlpha = this.flash.alpha;\n ctx.fillStyle = this.flash.color;\n ctx.fillRect(0, 0, w, h);\n ctx.restore();\n }\n }\n\n clear() {\n this.particles = [];\n this.texts = [];\n this.rings = [];\n this.shake.power = 0;\n this.flash.alpha = 0;\n }\n}\n\nexport const fx = new FxSystem();\n",[],[222,224],"60db469a-3054-46ff-a20d-1b58ea2ba11b","input.js","e1f71c50-7c54-11f1-b534-1607ee4eb77e",8,["D",1783683943523],"// ============================================================================\n// NEON SERPENT — input.js\n// Unified input layer:\n// - Keyboard: arrows / WASD / space / escape / P\n// - Touch swipe: anywhere on the play area, low-latency (fires on move,\n// not on release), supports continuous re-swiping without lifting\n// - Virtual D-pad: optional on-screen buttons for thumb players\n// - Direction queue: buffers up to 2 turns so fast double-taps register\n// - Haptics: tiny vibration pulses on turns / events (Android)\n// ============================================================================\n\nimport { DIRS, oppositeDir } from \"./config.js\";\n\nconst SWIPE_THRESHOLD = 22; // px before a swipe registers\nconst RESWIPE_THRESHOLD = 30; // px of new travel to register another swipe\n\nexport class InputSystem {\n constructor() {\n this.queue = []; // buffered direction changes (max 2)\n this.currentDir = { ...DIRS.right };\n this.onPause = null; // callbacks wired by game.js\n this.onAnyKey = null;\n this.hapticsOn = true;\n this._touch = null; // active swipe tracking\n this._attached = false;\n }\n\n // ---------------------------------------------------------------------\n // Direction queue\n // ---------------------------------------------------------------------\n reset(dir = DIRS.right) {\n this.queue = [];\n this.currentDir = { ...dir };\n }\n\n // The direction the snake will be moving after all queued turns —\n // used to reject 180° reversals correctly even with buffered input.\n effectiveDir() {\n return this.queue.length ? this.queue[this.queue.length - 1] : this.currentDir;\n }\n\n pushDir(dir) {\n const eff = this.effectiveDir();\n if (dir.x === eff.x && dir.y === eff.y) return false; // same direction\n if (oppositeDir(dir, eff)) return false; // no 180s\n if (this.queue.length >= 2) this.queue.shift(); // keep freshest\n this.queue.push({ ...dir });\n this.haptic(8);\n return true;\n }\n\n // game.js calls this once per snake step\n consumeDir() {\n if (this.queue.length) {\n this.currentDir = this.queue.shift();\n }\n return this.currentDir;\n }\n\n haptic(ms) {\n if (!this.hapticsOn) return;\n try {\n if (navigator.vibrate) navigator.vibrate(ms);\n } catch { /* ignore */ }\n }\n\n // ---------------------------------------------------------------------\n // Attach listeners\n // ---------------------------------------------------------------------\n attach(canvas, dpadEl) {\n if (this._attached) return;\n this._attached = true;\n\n // ----- Keyboard -----\n window.addEventListener(\"keydown\", (e) => {\n const key = e.key.toLowerCase();\n const map = {\n arrowup: DIRS.up, w: DIRS.up,\n arrowdown: DIRS.down, s: DIRS.down,\n arrowleft: DIRS.left, a: DIRS.left,\n arrowright: DIRS.right, d: DIRS.right,\n };\n if (map[key]) {\n e.preventDefault();\n this.pushDir(map[key]);\n this.onAnyKey?.();\n } else if (key === \" \" || key === \"escape\" || key === \"p\") {\n e.preventDefault();\n this.onPause?.();\n this.onAnyKey?.();\n } else {\n this.onAnyKey?.();\n }\n }, { passive: false });\n\n // ----- Touch swipe on the canvas -----\n const onTouchStart = (e) => {\n if (e.touches.length !== 1) return;\n const t = e.touches[0];\n this._touch = { x: t.clientX, y: t.clientY, id: t.identifier, moved: false };\n this.onAnyKey?.();\n };\n\n const onTouchMove = (e) => {\n if (!this._touch) return;\n const t = [...e.touches].find((t) => t.identifier === this._touch.id);\n if (!t) return;\n e.preventDefault(); // stop page scroll while playing\n\n const dx = t.clientX - this._touch.x;\n const dy = t.clientY - this._touch.y;\n const adx = Math.abs(dx), ady = Math.abs(dy);\n const threshold = this._touch.moved ? RESWIPE_THRESHOLD : SWIPE_THRESHOLD;\n\n if (Math.max(adx, ady) < threshold) return;\n\n const dir = adx > ady\n ? (dx > 0 ? DIRS.right : DIRS.left)\n : (dy > 0 ? DIRS.down : DIRS.up);\n this.pushDir(dir);\n\n // Re-anchor so the player can chain swipes without lifting their finger\n this._touch.x = t.clientX;\n this._touch.y = t.clientY;\n this._touch.moved = true;\n };\n\n const onTouchEnd = () => { this._touch = null; };\n\n canvas.addEventListener(\"touchstart\", onTouchStart, { passive: true });\n canvas.addEventListener(\"touchmove\", onTouchMove, { passive: false });\n canvas.addEventListener(\"touchend\", onTouchEnd, { passive: true });\n canvas.addEventListener(\"touchcancel\", onTouchEnd, { passive: true });\n\n // ----- Virtual D-pad -----\n if (dpadEl) {\n const bindBtn = (selector, dir) => {\n const btn = dpadEl.querySelector(selector);\n if (!btn) return;\n const fire = (e) => {\n e.preventDefault();\n this.pushDir(dir);\n this.onAnyKey?.();\n btn.classList.add(\"active\");\n setTimeout(() => btn.classList.remove(\"active\"), 120);\n };\n btn.addEventListener(\"touchstart\", fire, { passive: false });\n btn.addEventListener(\"mousedown\", fire);\n };\n bindBtn(\"[data-dir=up]\", DIRS.up);\n bindBtn(\"[data-dir=down]\", DIRS.down);\n bindBtn(\"[data-dir=left]\", DIRS.left);\n bindBtn(\"[data-dir=right]\", DIRS.right);\n }\n\n // ----- Gamepad (bonus: works on mobile with BT controllers too) -----\n this._gamepadPrev = { x: 0, y: 0 };\n }\n\n // Poll gamepads each frame (cheap; most frames no-op)\n pollGamepad() {\n const pads = navigator.getGamepads ? navigator.getGamepads() : [];\n for (const pad of pads) {\n if (!pad) continue;\n const ax = pad.axes[0] ?? 0, ay = pad.axes[1] ?? 0;\n const up = pad.buttons[12]?.pressed || ay < -0.6;\n const down = pad.buttons[13]?.pressed || ay > 0.6;\n const left = pad.buttons[14]?.pressed || ax < -0.6;\n const right = pad.buttons[15]?.pressed || ax > 0.6;\n const cur = { x: right ? 1 : left ? -1 : 0, y: down ? 1 : up ? -1 : 0 };\n if ((cur.x !== this._gamepadPrev.x || cur.y !== this._gamepadPrev.y)) {\n if (cur.y === -1) this.pushDir(DIRS.up);\n else if (cur.y === 1) this.pushDir(DIRS.down);\n else if (cur.x === -1) this.pushDir(DIRS.left);\n else if (cur.x === 1) this.pushDir(DIRS.right);\n this._gamepadPrev = cur;\n }\n if (pad.buttons[9]?.pressed) this.onPause?.();\n break; // first pad only\n }\n }\n}\n\nexport const input = new InputSystem();\n",[],[222,232],"a8fc5154-f62e-41ed-86c7-c65059cd47ef","game.js","76b32cee-7c55-11f1-b0ec-1607ee4eb77e",10,["D",1783684193061],"// ============================================================================\n// NEON SERPENT — game.js\n// The core engine: fixed-timestep snake simulation with interpolated\n// rendering, combo scoring, power-up state machine, level progression,\n// hazards, portals, the full render pipeline, and all screen wiring.\n// ============================================================================\n\nimport {\n GRID, TIMING, SCORING, POWERUP_SPAWN, DIRS,\n levelSpec, applyModeToSpec, makeRng,\n} from \"./config.js\";\nimport { audio } from \"./audio.js\";\nimport { fx } from \"./particles.js\";\nimport { Board, cellKey } from \"./entities.js\";\nimport { input } from \"./input.js\";\nimport * as ui from \"./ui.js\";\n\n// ---------------------------------------------------------------------------\n// Canvas setup\n// ---------------------------------------------------------------------------\nconst canvas = document.getElementById(\"game\");\nconst ctx = canvas.getContext(\"2d\");\nlet CELL = 20; // pixel size of one grid cell (computed on resize)\nlet W = 0, H = 0; // canvas CSS pixel dimensions\n\nfunction resize() {\n const wrap = document.getElementById(\"board-wrap\");\n const rect = wrap.getBoundingClientRect();\n CELL = Math.max(8, Math.floor(Math.min(rect.width / GRID.COLS, rect.height / GRID.ROWS)));\n W = CELL * GRID.COLS;\n H = CELL * GRID.ROWS;\n const dpr = Math.min(2, window.devicePixelRatio || 1);\n canvas.width = W * dpr;\n canvas.height = H * dpr;\n canvas.style.width = `${W}px`;\n canvas.style.height = `${H}px`;\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n fx.initStars(W, H);\n}\nwindow.addEventListener(\"resize\", resize);\n\n// ---------------------------------------------------------------------------\n// Game state\n// ---------------------------------------------------------------------------\nconst board = new Board();\n\nconst state = {\n phase: \"menu\", // menu | countdown | playing | paused | dying | gameover\n mode: \"classic\",\n snake: [], // [{x,y}] head first\n prevSnake: [], // for interpolation\n snakeSet: new Set(), // occupancy\n growPending: 0,\n score: 0,\n displayScore: 0, // animated counter\n level: 1,\n nextLevelAt: SCORING.LEVEL_CURVE_BASE,\n combo: 0,\n maxCombo: 0,\n comboExpires: 0,\n foodsEaten: 0,\n stepMs: TIMING.BASE_STEP_MS.classic,\n stepAcc: 0,\n runStart: 0,\n graceUntil: 0,\n hue: 315,\n levelName: \"BOOT SEQUENCE\",\n levelBannerUntil: 0,\n // power-up effects: id -> expiry timestamp (performance.now())\n effects: {},\n shieldsUsedThisRun: 0,\n nextPowerupAt: 0,\n dyingUntil: 0,\n deathCause: \"\",\n countdownVal: 3,\n countdownAcc: 0,\n frenzyCount: 0,\n};\n\nconst now = () => performance.now();\nconst effectActive = (id) => (state.effects[id] ?? 0) > now();\n\nfunction currentStepMs() {\n let ms = state.stepMs;\n if (effectActive(\"turbo\")) ms *= TIMING.TURBO_MULT;\n if (effectActive(\"slowmo\")) ms *= TIMING.SLOWMO_MULT;\n return ms;\n}\n\nfunction rebuildSnakeSet() {\n state.snakeSet = new Set(state.snake.map((s) => cellKey(s.x, s.y)));\n}\n\nfunction computeStepMs() {\n const base = TIMING.BASE_STEP_MS[state.mode];\n const floor = TIMING.MIN_STEP_MS[state.mode];\n state.stepMs = Math.max(floor, base - (state.level - 1) * TIMING.STEP_MS_PER_LEVEL);\n}\n\n// ---------------------------------------------------------------------------\n// Run lifecycle\n// ---------------------------------------------------------------------------\nfunction newRun(mode) {\n state.mode = mode;\n state.phase = \"countdown\";\n state.countdownVal = 3;\n state.countdownAcc = 0;\n state.score = 0;\n state.displayScore = 0;\n state.level = 1;\n state.nextLevelAt = SCORING.LEVEL_CURVE_BASE;\n state.combo = 0;\n state.maxCombo = 0;\n state.foodsEaten = 0;\n state.growPending = 0;\n state.effects = {};\n state.shieldsUsedThisRun = 0;\n state.frenzyCount = 0;\n state.deathCause = \"\";\n\n const cy = Math.floor(GRID.ROWS / 2);\n state.snake = [\n { x: 6, y: cy }, { x: 5, y: cy }, { x: 4, y: cy },\n ];\n state.prevSnake = state.snake.map((s) => ({ ...s }));\n rebuildSnakeSet();\n input.reset(DIRS.right);\n\n computeStepMs();\n state.stepAcc = 0;\n board.reset();\n loadLevel(1, true);\n state.runStart = now();\n state.graceUntil = now() + TIMING.SPAWN_GRACE_MS;\n state.nextPowerupAt = now() + POWERUP_SPAWN.FIRST_AT_MS;\n\n fx.clear();\n ui.hideAllScreens();\n document.getElementById(\"hud\").classList.add(\"visible\");\n audio.setIntensity(0);\n\n ui.stats.gamesPlayed += 1;\n ui.saveStats();\n updateHud(true);\n}\n\nfunction loadLevel(levelNum, initial = false) {\n const spec = applyModeToSpec(levelSpec(levelNum), state.mode);\n state.hue = spec.hue;\n state.levelName = spec.name;\n state.levelBannerUntil = now() + 2200;\n const rng = makeRng((Date.now() ^ (levelNum * 7919)) >>> 0);\n const head = state.snake[0];\n board.buildLevel(spec, state.snakeSet, head, rng);\n board.foods = [];\n board.powerups = [];\n const foodCount = 1 + (levelNum >= 3 ? 1 : 0);\n board.ensureFood(state.snakeSet, head, levelNum, foodCount);\n if (!initial) {\n state.graceUntil = now() + TIMING.SPAWN_GRACE_MS;\n audio.levelUp();\n audio.setIntensity(Math.min(1, (levelNum - 1) / 9));\n fx.addFlash(`hsl(${spec.hue}, 90%, 60%)`, 0.3);\n fx.bigText(W / 2, H / 2 - 30, `LEVEL ${levelNum}`, `hsl(${spec.hue}, 100%, 70%)`);\n fx.text(W / 2, H / 2 + 4, spec.name, \"#ffffff\", { size: 15, life: 1.8, vy: -14 });\n fx.confetti(W / 2, H / 2);\n input.haptic(40);\n }\n}\n\n// ---------------------------------------------------------------------------\n// The simulation step (fixed timestep)\n// ---------------------------------------------------------------------------\nfunction step() {\n const t = now();\n state.prevSnake = state.snake.map((s) => ({ ...s }));\n\n const dir = input.consumeDir();\n const head = state.snake[0];\n let nx = head.x + dir.x;\n let ny = head.y + dir.y;\n\n const ghost = effectActive(\"ghost\");\n const zen = state.mode === \"zen\";\n\n // --- Border ---------------------------------------------------------------\n const outOfBounds = nx < 0 || nx >= GRID.COLS || ny < 0 || ny >= GRID.ROWS;\n if (outOfBounds) {\n if (zen || ghost) {\n nx = (nx + GRID.COLS) % GRID.COLS;\n ny = (ny + GRID.ROWS) % GRID.ROWS;\n if (ghost && !zen) ui.unlockAchievement(\"ghost_pass\");\n } else if (consumeShield(\"the boundary\")) {\n nx = (nx + GRID.COLS) % GRID.COLS;\n ny = (ny + GRID.ROWS) % GRID.ROWS;\n } else {\n return die(\"Hit the boundary\", nx, ny);\n }\n }\n\n // --- Portals ----------------------------------------------------------------\n const portal = board.portalAt(nx, ny);\n if (portal) {\n fx.ring(nx * CELL + CELL / 2, ny * CELL + CELL / 2, `hsl(${portal.pair.hue},100%,65%)`, CELL * 2.4, 0.45);\n nx = portal.exit.x;\n ny = portal.exit.y;\n fx.ring(nx * CELL + CELL / 2, ny * CELL + CELL / 2, `hsl(${portal.pair.hue},100%,65%)`, CELL * 2.4, 0.45);\n fx.addFlash(`hsl(${portal.pair.hue},100%,60%)`, 0.15);\n audio.portal();\n input.haptic(20);\n ui.stats.portalUses += 1;\n if (ui.stats.portalUses >= 10) ui.unlockAchievement(\"portal_10\");\n ui.saveStats();\n }\n\n // --- Walls ----------------------------------------------------------------\n if (board.isWall(nx, ny)) {\n if (ghost) {\n ui.unlockAchievement(\"ghost_pass\");\n } else if (!consumeShield(\"a firewall\")) {\n return die(\"Crashed into a firewall\", nx, ny);\n }\n }\n\n // --- Mines ------------------------------------------------------------------\n const mine = board.mineAt(nx, ny);\n if (mine && t > state.graceUntil) {\n explodeMine(mine);\n if (!consumeShield(\"a mine\")) {\n state.deathCause = \"mine\";\n return die(\"Detonated a mine\", nx, ny);\n }\n }\n\n // --- Drones -----------------------------------------------------------------\n const drone = board.droneAt(nx, ny);\n if (drone && t > state.graceUntil) {\n if (consumeShield(\"a drone\")) {\n // shield destroys the drone\n board.drones.splice(board.drones.indexOf(drone), 1);\n fx.burst(nx * CELL + CELL / 2, ny * CELL + CELL / 2, \"#ff5555\", { count: 24, speed: 200 });\n audio.explosion();\n } else {\n return die(\"Caught by a patrol drone\", nx, ny);\n }\n }\n\n // --- Self collision -----------------------------------------------------------\n const willEat = board.foodIndexAt(nx, ny) >= 0;\n const tailKey = cellKey(state.snake[state.snake.length - 1].x, state.snake[state.snake.length - 1].y);\n const hitKey = cellKey(nx, ny);\n // moving into the tail cell is safe unless we're growing this step\n const hitsSelf = state.snakeSet.has(hitKey) &&\n !(hitKey === tailKey && state.growPending === 0 && !willEat);\n if (hitsSelf) {\n if (ghost) {\n ui.unlockAchievement(\"ghost_pass\");\n } else if (zen) {\n // Zen mercy: trim the tail at the bite point instead of dying\n const idx = state.snake.findIndex((s) => s.x === nx && s.y === ny);\n if (idx > 0) {\n const removed = state.snake.splice(idx);\n for (const seg of removed) {\n fx.burst(seg.x * CELL + CELL / 2, seg.y * CELL + CELL / 2, \"#8cffb4\", { count: 5, speed: 90, life: 0.5 });\n }\n rebuildSnakeSet();\n fx.text(nx * CELL + CELL / 2, ny * CELL, \"trimmed 🧘\", \"#8cffb4\", { size: 13 });\n }\n } else if (!consumeShield(\"yourself\")) {\n return die(\"Bit your own tail\", nx, ny);\n }\n }\n\n // --- Commit the move --------------------------------------------------------\n state.snake.unshift({ x: nx, y: ny });\n if (state.growPending > 0) {\n state.growPending -= 1;\n } else if (state.growPending < 0) {\n // shrinking: drop extra segments (never below 3)\n const drop = Math.min(-state.growPending, Math.max(0, state.snake.length - 3)) + 1;\n for (let i = 0; i < drop && state.snake.length > 3; i++) {\n const seg = state.snake.pop();\n fx.trail(seg.x * CELL + CELL / 2, seg.y * CELL + CELL / 2, \"#5eff5e\");\n }\n state.growPending = 0;\n } else {\n state.snake.pop();\n }\n rebuildSnakeSet();\n\n // --- Eat food -----------------------------------------------------------------\n const foodIdx = board.foodIndexAt(nx, ny);\n if (foodIdx >= 0) {\n eatFood(board.foods[foodIdx], foodIdx);\n }\n\n // --- Collect power-up ------------------------------------------------------------\n const puIdx = board.powerupIndexAt(nx, ny);\n if (puIdx >= 0) {\n collectPowerup(board.powerups[puIdx], puIdx);\n }\n\n // --- Magnet: drag food one cell toward the head -----------------------------------\n if (effectActive(\"magnet\")) {\n for (const f of board.foods) {\n const dx = state.snake[0].x - f.x;\n const dy = state.snake[0].y - f.y;\n const dist = Math.abs(dx) + Math.abs(dy);\n if (dist > 0 && dist <= 7) {\n const sx = Math.abs(dx) >= Math.abs(dy) ? Math.sign(dx) : 0;\n const sy = sx === 0 ? Math.sign(dy) : 0;\n const tx = f.x + sx, ty = f.y + sy;\n if (!board.isOccupied(tx, ty, state.snakeSet) &&\n tx >= 0 && tx < GRID.COLS && ty >= 0 && ty < GRID.ROWS) {\n f.x = tx; f.y = ty;\n fx.trail(tx * CELL + CELL / 2, ty * CELL + CELL / 2, \"#ff8c3d\");\n }\n }\n }\n }\n\n // --- Combo expiry -----------------------------------------------------------------\n if (state.combo > 0 && t > state.comboExpires) {\n state.combo = 0;\n }\n}\n\n// ---------------------------------------------------------------------------\n// Eating & scoring\n// ---------------------------------------------------------------------------\nfunction scoreMultiplier() {\n let mult = Math.max(1, state.combo);\n if (effectActive(\"x2\")) mult *= 2;\n if (effectActive(\"turbo\")) mult *= 2;\n return mult;\n}\n\nfunction eatFood(food, idx) {\n board.foods.splice(idx, 1);\n const t = now();\n const type = food.type;\n const px = food.x * CELL + CELL / 2;\n const py = food.y * CELL + CELL / 2;\n\n // combo\n state.combo = Math.min(SCORING.MAX_COMBO_MULT, state.combo + 1);\n state.comboExpires = t + TIMING.COMBO_WINDOW_MS;\n state.maxCombo = Math.max(state.maxCombo, state.combo);\n if (state.combo >= 5) ui.unlockAchievement(\"combo_5\");\n if (state.combo >= 10) ui.unlockAchievement(\"combo_10\");\n if (state.combo > ui.stats.bestCombo) { ui.stats.bestCombo = state.combo; }\n\n // points\n const points = Math.round(type.points * scoreMultiplier());\n state.score += points;\n state.foodsEaten += 1;\n ui.stats.totalFood += 1;\n ui.stats.totalScore += points;\n ui.unlockAchievement(\"first_bite\");\n if (ui.stats.totalFood >= 100) ui.unlockAchievement(\"snack_100\");\n\n // growth\n state.growPending += type.grow;\n\n // FX + audio per type\n const color = type.color === \"rainbow\" ? `hsl(${(t / 4) % 360},100%,65%)` : type.color;\n fx.burst(px, py, color, { count: type.id === \"mega\" ? 34 : 14, speed: type.id === \"mega\" ? 240 : 150 });\n fx.ring(px, py, color, CELL * (type.id === \"mega\" ? 3 : 1.8), 0.4);\n fx.text(px, py - 6, `+${points}`, color, { size: state.combo >= 5 ? 20 : 15 });\n if (state.combo >= 3) {\n fx.text(px, py - 26, `COMBO x${state.combo}`, \"#ffffff\", { size: 12, life: 0.8 });\n }\n input.haptic(type.id === \"mega\" ? 35 : 12);\n\n if (type.id === \"golden\") audio.golden();\n else if (type.id === \"mega\") { audio.mega(); ui.unlockAchievement(\"mega_eat\"); fx.addShake(6); }\n else if (type.id === \"rotten\") audio.rotten();\n else audio.eat(state.combo);\n\n // rainbow frenzy\n if (type.frenzy) {\n board.spawnFrenzy(state.snakeSet, state.snake[0]);\n state.frenzyCount += 1;\n ui.unlockAchievement(\"frenzy\");\n fx.addFlash(\"#ffffff\", 0.2);\n fx.bigText(W / 2, H * 0.3, \"FRENZY!\", `hsl(${(t / 4) % 360},100%,70%)`);\n }\n\n // length achievements\n const len = state.snake.length + Math.max(0, state.growPending);\n if (len > ui.stats.bestLength) ui.stats.bestLength = len;\n if (len >= 30) ui.unlockAchievement(\"long_30\");\n if (len >= 60) ui.unlockAchievement(\"long_60\");\n\n // score achievements\n if (state.score >= 1000) ui.unlockAchievement(\"score_1k\");\n if (state.score >= 5000) ui.unlockAchievement(\"score_5k\");\n if (state.score >= 15000) ui.unlockAchievement(\"score_15k\");\n if (state.mode === \"zen\" && state.score >= 500) ui.unlockAchievement(\"zen_500\");\n if (state.mode === \"hardcore\" && state.score >= 1000) ui.unlockAchievement(\"hard_1k\");\n\n ui.saveStats();\n\n // level progression\n if (state.score >= state.nextLevelAt) {\n state.level += 1;\n state.score += SCORING.LEVEL_UP_BONUS;\n state.nextLevelAt += Math.round(\n SCORING.LEVEL_CURVE_BASE * Math.pow(state.level, SCORING.LEVEL_CURVE_EXP));\n computeStepMs();\n loadLevel(state.level);\n if (state.level >= 5) ui.unlockAchievement(\"level_5\");\n if (state.level >= 10) ui.unlockAchievement(\"level_10\");\n if (state.level >= 4 && state.shieldsUsedThisRun === 0) ui.unlockAchievement(\"no_walls\");\n }\n\n // keep the plate full\n const foodCount = 1 + (state.level >= 3 ? 1 : 0);\n board.ensureFood(state.snakeSet, state.snake[0], state.level, foodCount);\n}\n\n// ---------------------------------------------------------------------------\n// Power-ups\n// ---------------------------------------------------------------------------\nfunction collectPowerup(pu, idx) {\n board.powerups.splice(idx, 1);\n const type = pu.type;\n const px = pu.x * CELL + CELL / 2;\n const py = pu.y * CELL + CELL / 2;\n\n fx.burst(px, py, type.color, { count: 20, speed: 180 });\n fx.ring(px, py, type.color, CELL * 2.5, 0.5);\n fx.text(px, py - 8, type.label, type.color, { size: 16, life: 1.2 });\n audio.powerup(type.id);\n input.haptic(25);\n\n if (type.id === \"shrink\") {\n const drop = Math.min(5, Math.max(0, state.snake.length - 3));\n for (let i = 0; i < drop; i++) {\n const seg = state.snake.pop();\n fx.burst(seg.x * CELL + CELL / 2, seg.y * CELL + CELL / 2, type.color, { count: 6, speed: 100, life: 0.5 });\n }\n rebuildSnakeSet();\n return;\n }\n state.effects[type.id] = now() + type.duration;\n}\n\nfunction consumeShield(what) {\n if (!effectActive(\"shield\")) return false;\n delete state.effects.shield;\n state.shieldsUsedThisRun += 1;\n audio.shieldSave();\n fx.addFlash(\"#3da5ff\", 0.35);\n fx.addShake(8);\n const head = state.snake[0];\n fx.ring(head.x * CELL + CELL / 2, head.y * CELL + CELL / 2, \"#3da5ff\", CELL * 4, 0.6, 4);\n fx.text(head.x * CELL + CELL / 2, head.y * CELL, \"SHIELD SAVED YOU\", \"#3da5ff\", { size: 14, life: 1.4 });\n ui.unlockAchievement(\"shield_save\");\n input.haptic(60);\n return true;\n}\n\nfunction explodeMine(mine) {\n const i = board.mines.indexOf(mine);\n if (i >= 0) board.mines.splice(i, 1);\n const px = mine.x * CELL + CELL / 2;\n const py = mine.y * CELL + CELL / 2;\n audio.explosion();\n fx.addShake(14);\n fx.addFlash(\"#ff6b3d\", 0.4);\n fx.burst(px, py, \"#ff6b3d\", { count: 40, speed: 320, life: 0.9, size: 4 });\n fx.burst(px, py, \"#ffd23d\", { count: 24, speed: 220, life: 0.7 });\n fx.ring(px, py, \"#ff6b3d\", CELL * 5, 0.6, 5);\n input.haptic(80);\n}\n\n// ---------------------------------------------------------------------------\n// Death & game over\n// ---------------------------------------------------------------------------\nfunction die(reason, hitX, hitY) {\n state.phase = \"dying\";\n state.dyingUntil = now() + TIMING.DEATH_SLOWMO_MS;\n state.deathReason = reason;\n audio.death();\n fx.addShake(16);\n fx.addFlash(\"#ff2244\", 0.45);\n input.haptic([60, 40, 120]);\n if (state.deathCause === \"mine\") ui.unlockAchievement(\"die_mine\");\n\n // segments explode outward in a cascade\n state.snake.forEach((seg, i) => {\n setTimeout(() => {\n fx.burst(seg.x * CELL + CELL / 2, seg.y * CELL + CELL / 2,\n i === 0 ? \"#ffffff\" : `hsl(${state.hue},100%,65%)`,\n { count: 10, speed: 190, life: 0.8 });\n }, i * 24);\n });\n\n ui.stats.deaths += 1;\n ui.stats.totalTimeMs += now() - state.runStart;\n ui.saveStats();\n}\n\nasync function gameOver() {\n state.phase = \"gameover\";\n document.getElementById(\"hud\").classList.remove(\"visible\");\n\n const isBest = state.score > ui.best[state.mode];\n if (isBest) {\n ui.best[state.mode] = state.score;\n ui.saveBest();\n }\n\n document.getElementById(\"go-score\").textContent = state.score.toLocaleString();\n document.getElementById(\"go-reason\").textContent = state.deathReason || \"\";\n document.getElementById(\"go-best-badge\").style.display = isBest ? \"inline-block\" : \"none\";\n document.getElementById(\"go-details\").textContent =\n `Level ${state.level} · ${state.snake.length} segments · best combo x${state.maxCombo}`;\n\n ui.showScreen(\"screen-gameover\");\n\n // submit + refresh leaderboard\n const rankEl = document.getElementById(\"go-rank\");\n const lbEl = document.getElementById(\"go-leaderboard\");\n rankEl.textContent = \"\";\n lbEl.innerHTML = `

Loading leaderboard…

`;\n\n const name = ui.getPlayerName() || \"ANON\";\n let rank = null;\n if (state.score > 0) {\n rank = await ui.submitScore({\n name, score: state.score, level: state.level,\n maxCombo: state.maxCombo, length: state.snake.length, mode: state.mode,\n });\n }\n if (rank) {\n rankEl.textContent = rank <= 3\n ? `🏆 GLOBAL RANK #${rank}!`\n : `Global rank #${rank}`;\n }\n const scores = await ui.fetchLeaderboard(state.mode);\n ui.renderLeaderboard(lbEl, scores, name);\n}\n\n// ---------------------------------------------------------------------------\n// Pause\n// ---------------------------------------------------------------------------\nfunction togglePause() {\n if (state.phase === \"playing\") {\n state.phase = \"paused\";\n audio.pause();\n ui.showScreen(\"screen-pause\");\n } else if (state.phase === \"paused\") {\n state.phase = \"playing\";\n audio.ui();\n ui.hideAllScreens();\n }\n}\n\ndocument.addEventListener(\"visibilitychange\", () => {\n if (document.hidden && state.phase === \"playing\") togglePause();\n});\n\n// ---------------------------------------------------------------------------\n// Main loop\n// ---------------------------------------------------------------------------\nlet lastFrame = now();\n\nfunction frame() {\n const t = now();\n const dtMs = Math.min(100, t - lastFrame);\n const dt = dtMs / 1000;\n lastFrame = t;\n\n input.pollGamepad();\n\n if (state.phase === \"countdown\") {\n state.countdownAcc += dtMs;\n const el = document.getElementById(\"countdown\");\n el.style.display = \"flex\";\n if (state.countdownAcc >= 700) {\n state.countdownAcc = 0;\n state.countdownVal -= 1;\n if (state.countdownVal <= 0) {\n state.phase = \"playing\";\n el.style.display = \"none\";\n audio.go();\n } else {\n audio.countdown();\n }\n }\n el.textContent = state.countdownVal > 0 ? state.countdownVal : \"GO!\";\n }\n\n if (state.phase === \"playing\") {\n state.stepAcc += dtMs;\n const stepMs = currentStepMs();\n let steps = 0;\n while (state.stepAcc >= stepMs && steps < 4 && state.phase === \"playing\") {\n state.stepAcc -= stepMs;\n step();\n steps++;\n }\n const timeScale = effectActive(\"slowmo\") ? 0.55 : 1;\n board.updateDrones(dtMs, state.snakeSet, timeScale);\n\n // expirations\n for (const f of board.expireFoods(t)) {\n fx.burst(f.x * CELL + CELL / 2, f.y * CELL + CELL / 2, \"#666\", { count: 6, speed: 60, life: 0.5 });\n }\n board.expirePowerups(t);\n\n // scheduled power-up spawns\n if (t >= state.nextPowerupAt) {\n board.spawnPowerup(state.snakeSet, state.snake[0]);\n state.nextPowerupAt = t + POWERUP_SPAWN.INTERVAL_MS +\n (Math.random() - 0.5) * 2 * POWERUP_SPAWN.JITTER_MS;\n }\n\n // clean expired effects\n for (const id of Object.keys(state.effects)) {\n if (state.effects[id] <= t) {\n delete state.effects[id];\n audio.powerdown();\n }\n }\n updateHud();\n }\n\n if (state.phase === \"dying\" && t >= state.dyingUntil) {\n gameOver();\n }\n\n // animated score counter\n state.displayScore += (state.score - state.displayScore) * Math.min(1, dt * 10);\n if (Math.abs(state.score - state.displayScore) < 1) state.displayScore = state.score;\n\n fx.update(dt);\n fx.updateStars(dt, 3 + state.level, 1.5);\n render(t);\n requestAnimationFrame(frame);\n}\n\n// ---------------------------------------------------------------------------\n// HUD\n// ---------------------------------------------------------------------------\nconst hudScore = document.getElementById(\"hud-score\");\nconst hudBest = document.getElementById(\"hud-best\");\nconst hudLevel = document.getElementById(\"hud-level\");\nconst hudCombo = document.getElementById(\"hud-combo\");\nconst hudComboFill = document.getElementById(\"hud-combo-fill\");\nconst hudEffects = document.getElementById(\"hud-effects\");\n\nfunction updateHud(force = false) {\n hudScore.textContent = Math.round(state.displayScore).toLocaleString();\n hudBest.textContent = `BEST ${ui.best[state.mode].toLocaleString()}`;\n hudLevel.textContent = `LV ${state.level}`;\n const t = now();\n if (state.combo > 1) {\n hudCombo.style.display = \"flex\";\n hudCombo.querySelector(\".combo-x\").textContent = `x${state.combo}`;\n const frac = Math.max(0, (state.comboExpires - t) / TIMING.COMBO_WINDOW_MS);\n hudComboFill.style.width = `${frac * 100}%`;\n } else {\n hudCombo.style.display = \"none\";\n }\n // active effect chips\n const chips = Object.entries(state.effects)\n .filter(([, exp]) => exp > t)\n .map(([id, exp]) => {\n const secs = Math.ceil((exp - t) / 1000);\n return `${id.toUpperCase()} ${secs}`;\n }).join(\"\");\n if (force || hudEffects.dataset.last !== chips) {\n hudEffects.innerHTML = chips;\n hudEffects.dataset.last = chips;\n }\n}\n\n// ---------------------------------------------------------------------------\n// RENDER PIPELINE\n// ---------------------------------------------------------------------------\nfunction render(t) {\n ctx.clearRect(0, 0, W, H);\n\n // background: deep space gradient tinted by level hue\n const grad = ctx.createLinearGradient(0, 0, 0, H);\n grad.addColorStop(0, `hsl(${state.hue}, 45%, 6%)`);\n grad.addColorStop(1, `hsl(${(state.hue + 40) % 360}, 55%, 3%)`);\n ctx.fillStyle = grad;\n ctx.fillRect(0, 0, W, H);\n\n fx.drawStars(ctx, state.hue);\n\n ctx.save();\n if (ui.settings.screenShake) ctx.translate(fx.shake.x, fx.shake.y);\n\n // grid lines\n if (ui.settings.showGrid) {\n ctx.strokeStyle = `hsla(${state.hue}, 80%, 60%, 0.07)`;\n ctx.lineWidth = 1;\n ctx.beginPath();\n for (let x = 0; x <= GRID.COLS; x++) {\n ctx.moveTo(x * CELL + 0.5, 0);\n ctx.lineTo(x * CELL + 0.5, H);\n }\n for (let y = 0; y <= GRID.ROWS; y++) {\n ctx.moveTo(0, y * CELL + 0.5);\n ctx.lineTo(W, y * CELL + 0.5);\n }\n ctx.stroke();\n }\n\n // border glow\n ctx.strokeStyle = `hsla(${state.hue}, 100%, 60%, 0.5)`;\n ctx.lineWidth = 2;\n ctx.shadowBlur = 12;\n ctx.shadowColor = `hsl(${state.hue}, 100%, 60%)`;\n ctx.strokeRect(1, 1, W - 2, H - 2);\n ctx.shadowBlur = 0;\n\n drawPortals(t);\n drawWalls();\n drawMines(t);\n drawFoods(t);\n drawPowerups(t);\n drawDrones(t);\n if (state.phase !== \"gameover\" && state.snake.length) drawSnake(t);\n\n fx.drawParticles(ctx);\n fx.drawTexts(ctx);\n ctx.restore();\n\n fx.drawFlash(ctx, W, H);\n\n // level banner\n if (t < state.levelBannerUntil && (state.phase === \"playing\" || state.phase === \"countdown\")) {\n const a = Math.min(1, (state.levelBannerUntil - t) / 600);\n ctx.save();\n ctx.globalAlpha = a * 0.85;\n ctx.font = `800 ${Math.max(13, CELL * 0.8)}px 'Orbitron', sans-serif`;\n ctx.textAlign = \"center\";\n ctx.fillStyle = `hsl(${state.hue}, 100%, 70%)`;\n ctx.shadowBlur = 16;\n ctx.shadowColor = `hsl(${state.hue}, 100%, 60%)`;\n ctx.fillText(`— ${state.levelName} —`, W / 2, CELL * 2.2);\n ctx.restore();\n }\n}\n\nfunction drawWalls() {\n ctx.save();\n ctx.fillStyle = `hsl(${state.hue}, 90%, 55%)`;\n ctx.shadowBlur = 10;\n ctx.shadowColor = `hsl(${state.hue}, 100%, 60%)`;\n for (const key of board.walls) {\n const [x, y] = key.split(\",\").map(Number);\n const pad = CELL * 0.12;\n ctx.globalAlpha = 0.28;\n ctx.fillRect(x * CELL + pad, y * CELL + pad, CELL - pad * 2, CELL - pad * 2);\n ctx.globalAlpha = 1;\n ctx.strokeStyle = `hsl(${state.hue}, 100%, 70%)`;\n ctx.lineWidth = 1.5;\n ctx.strokeRect(x * CELL + pad, y * CELL + pad, CELL - pad * 2, CELL - pad * 2);\n }\n ctx.restore();\n}\n\nfunction drawPortals(t) {\n for (const p of board.portals) {\n for (const end of [p.a, p.b]) {\n const cx = end.x * CELL + CELL / 2;\n const cy = end.y * CELL + CELL / 2;\n const spin = t / 400 + p.phase;\n ctx.save();\n ctx.translate(cx, cy);\n ctx.shadowBlur = 14;\n ctx.shadowColor = `hsl(${p.hue}, 100%, 65%)`;\n for (let ring = 0; ring < 3; ring++) {\n const r = CELL * (0.5 - ring * 0.13);\n ctx.strokeStyle = `hsla(${p.hue}, 100%, ${70 - ring * 12}%, ${0.9 - ring * 0.2})`;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(0, 0, r, spin + ring * 2, spin + ring * 2 + Math.PI * 1.4);\n ctx.stroke();\n }\n ctx.restore();\n }\n }\n}\n\nfunction drawMines(t) {\n for (const m of board.mines) {\n const cx = m.x * CELL + CELL / 2;\n const cy = m.y * CELL + CELL / 2;\n const pulse = 0.75 + 0.25 * Math.sin(t / 220 + m.pulse);\n ctx.save();\n ctx.translate(cx, cy);\n ctx.shadowBlur = 10 * pulse;\n ctx.shadowColor = \"#ff4444\";\n ctx.fillStyle = \"#2a0d0d\";\n ctx.strokeStyle = `rgba(255, 68, 68, ${pulse})`;\n ctx.lineWidth = 2;\n ctx.beginPath();\n ctx.arc(0, 0, CELL * 0.32, 0, Math.PI * 2);\n ctx.fill();\n ctx.stroke();\n // spikes\n for (let i = 0; i < 8; i++) {\n const a = (i / 8) * Math.PI * 2 + t / 900;\n ctx.beginPath();\n ctx.moveTo(Math.cos(a) * CELL * 0.32, Math.sin(a) * CELL * 0.32);\n ctx.lineTo(Math.cos(a) * CELL * 0.46, Math.sin(a) * CELL * 0.46);\n ctx.stroke();\n }\n // blinking core\n ctx.fillStyle = `rgba(255, 80, 80, ${pulse})`;\n ctx.beginPath();\n ctx.arc(0, 0, CELL * 0.1 * pulse, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n}\n\nfunction drawDrones(t) {\n for (const d of board.drones) {\n const cx = d.fx * CELL + CELL / 2;\n const cy = d.fy * CELL + CELL / 2;\n ctx.save();\n ctx.translate(cx, cy);\n ctx.rotate(d.spin);\n ctx.shadowBlur = 12;\n ctx.shadowColor = \"#ff3355\";\n ctx.strokeStyle = \"#ff3355\";\n ctx.fillStyle = \"rgba(255, 51, 85, 0.25)\";\n ctx.lineWidth = 2;\n const r = CELL * 0.38;\n ctx.beginPath();\n for (let i = 0; i < 3; i++) {\n const a = (i / 3) * Math.PI * 2 - Math.PI / 2;\n const px = Math.cos(a) * r, py = Math.sin(a) * r;\n i === 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py);\n }\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n // eye\n ctx.fillStyle = `rgba(255,255,255,${0.6 + 0.4 * Math.sin(t / 150)})`;\n ctx.beginPath();\n ctx.arc(0, 0, CELL * 0.08, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n}\n\nfunction drawFoods(t) {\n for (const f of board.foods) {\n const wob = Math.sin(t / 300 + f.wob) * CELL * 0.06;\n const cx = f.x * CELL + CELL / 2;\n const cy = f.y * CELL + CELL / 2 + wob;\n const type = f.type;\n const color = type.color === \"rainbow\" ? `hsl(${(t / 4) % 360}, 100%, 65%)` : type.color;\n let r = CELL * type.radius;\n if (type.pulse) r *= 0.85 + 0.2 * Math.sin(t / 130);\n\n // ttl warning blink\n let alpha = 1;\n if (type.ttl > 0) {\n const left = type.ttl - (t - f.born);\n if (left < 2000) alpha = 0.35 + 0.65 * Math.abs(Math.sin(t / 120));\n }\n\n ctx.save();\n ctx.globalAlpha = alpha;\n ctx.shadowBlur = 14;\n ctx.shadowColor = color;\n ctx.fillStyle = color;\n ctx.beginPath();\n ctx.arc(cx, cy, r, 0, Math.PI * 2);\n ctx.fill();\n // inner shine\n ctx.fillStyle = \"rgba(255,255,255,0.55)\";\n ctx.beginPath();\n ctx.arc(cx - r * 0.3, cy - r * 0.3, r * 0.3, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n}\n\nfunction drawPowerups(t) {\n for (const p of board.powerups) {\n const cx = p.x * CELL + CELL / 2;\n const cy = p.y * CELL + CELL / 2 + Math.sin(t / 250 + p.x) * CELL * 0.08;\n const left = POWERUP_SPAWN.TTL_MS - (t - p.born);\n const alpha = left < 2200 ? 0.35 + 0.65 * Math.abs(Math.sin(t / 130)) : 1;\n ctx.save();\n ctx.globalAlpha = alpha;\n ctx.translate(cx, cy);\n ctx.rotate(Math.sin(t / 500) * 0.15);\n ctx.shadowBlur = 14;\n ctx.shadowColor = p.type.color;\n // diamond casing\n ctx.strokeStyle = p.type.color;\n ctx.fillStyle = `${p.type.color}33`;\n ctx.lineWidth = 2;\n const s = CELL * 0.42;\n ctx.beginPath();\n ctx.moveTo(0, -s); ctx.lineTo(s, 0); ctx.lineTo(0, s); ctx.lineTo(-s, 0);\n ctx.closePath();\n ctx.fill();\n ctx.stroke();\n // icon\n ctx.fillStyle = \"#fff\";\n ctx.font = `700 ${CELL * 0.45}px sans-serif`;\n ctx.textAlign = \"center\";\n ctx.textBaseline = \"middle\";\n ctx.fillText(p.type.icon, 0, 1);\n ctx.restore();\n }\n}\n\nfunction drawSnake(t) {\n const skin = ui.getSkin();\n const interp = Math.min(1, state.stepAcc / currentStepMs());\n const ghost = effectActive(\"ghost\");\n const shield = effectActive(\"shield\");\n const turbo = effectActive(\"turbo\");\n\n // interpolated pixel positions\n const pts = state.snake.map((seg, i) => {\n const prev = state.prevSnake[i] ?? seg;\n let ix = prev.x + (seg.x - prev.x) * interp;\n let iy = prev.y + (seg.y - prev.y) * interp;\n // teleport / wrap: don't lerp across the board\n if (Math.abs(seg.x - prev.x) > 2 || Math.abs(seg.y - prev.y) > 2) {\n ix = seg.x; iy = seg.y;\n }\n return { x: ix * CELL + CELL / 2, y: iy * CELL + CELL / 2 };\n });\n\n ctx.save();\n if (ghost) ctx.globalAlpha = 0.55;\n\n // body: tapered glowing capsule chain\n for (let i = pts.length - 1; i >= 1; i--) {\n const p = pts[i];\n const next = pts[i - 1];\n const taper = 1 - (i / pts.length) * 0.45;\n const r = CELL * 0.36 * taper;\n const hueShift = (i * 6 + t / 30) % 360;\n\n ctx.strokeStyle = skin.id === \"neon\"\n ? `hsl(${(190 + hueShift * 0.15) % 360}, 100%, ${55 + 10 * Math.sin(i * 0.5 + t / 200)}%)`\n : skin.body;\n ctx.lineWidth = r * 2;\n ctx.lineCap = \"round\";\n ctx.shadowBlur = fx.quality === \"high\" ? 8 : 0;\n ctx.shadowColor = skin.body;\n\n // skip streaks across teleports\n const dx = Math.abs(p.x - next.x), dy = Math.abs(p.y - next.y);\n if (dx > CELL * 2.5 || dy > CELL * 2.5) continue;\n ctx.beginPath();\n ctx.moveTo(p.x, p.y);\n ctx.lineTo(next.x, next.y);\n ctx.stroke();\n }\n\n // turbo exhaust\n if (turbo && pts.length) {\n const tail = pts[pts.length - 1];\n fx.trail(tail.x, tail.y, \"#ffe93d\");\n }\n\n // head\n const head = pts[0];\n const hr = CELL * 0.44;\n ctx.shadowBlur = 16;\n ctx.shadowColor = skin.head;\n ctx.fillStyle = skin.head;\n ctx.beginPath();\n ctx.arc(head.x, head.y, hr, 0, Math.PI * 2);\n ctx.fill();\n\n // eyes track direction\n const dir = input.currentDir;\n const ex = dir.x * hr * 0.35, ey = dir.y * hr * 0.35;\n const perpX = -dir.y * hr * 0.38, perpY = dir.x * hr * 0.38;\n ctx.shadowBlur = 0;\n ctx.fillStyle = \"#0a0a1a\";\n for (const side of [1, -1]) {\n ctx.beginPath();\n ctx.arc(head.x + ex + perpX * side, head.y + ey + perpY * side, hr * 0.18, 0, Math.PI * 2);\n ctx.fill();\n }\n\n // shield bubble\n if (shield) {\n ctx.strokeStyle = `rgba(61, 165, 255, ${0.5 + 0.3 * Math.sin(t / 150)})`;\n ctx.lineWidth = 2.5;\n ctx.shadowBlur = 12;\n ctx.shadowColor = \"#3da5ff\";\n ctx.beginPath();\n ctx.arc(head.x, head.y, hr * 1.5 + Math.sin(t / 150) * 2, 0, Math.PI * 2);\n ctx.stroke();\n }\n ctx.restore();\n}\n\n// ---------------------------------------------------------------------------\n// Menu wiring\n// ---------------------------------------------------------------------------\nfunction applySettingsToSystems() {\n audio.setSound(ui.settings.sound);\n audio.setMusic(ui.settings.music);\n fx.setQuality(ui.settings.particles);\n input.hapticsOn = ui.settings.haptics;\n updateDpadVisibility();\n}\n\nfunction isTouchDevice() {\n return \"ontouchstart\" in window || navigator.maxTouchPoints > 0;\n}\n\nfunction updateDpadVisibility() {\n const dpad = document.getElementById(\"dpad\");\n const show = ui.settings.dpad === \"on\" || (ui.settings.dpad === \"auto\" && isTouchDevice());\n dpad.style.display = show ? \"grid\" : \"none\";\n}\n\nfunction wireMenus() {\n // mode picker\n let selectedMode = \"classic\";\n document.querySelectorAll(\"[data-mode]\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n selectedMode = btn.dataset.mode;\n document.querySelectorAll(\"[data-mode]\").forEach((b) =>\n b.classList.toggle(\"selected\", b === btn));\n audio.ui();\n });\n });\n\n // name field\n const nameInput = document.getElementById(\"player-name\");\n nameInput.value = ui.getPlayerName();\n nameInput.addEventListener(\"change\", () => ui.setPlayerName(nameInput.value.trim()));\n\n const startGame = () => {\n audio.unlock();\n ui.setPlayerName(nameInput.value.trim());\n newRun(selectedMode);\n };\n document.getElementById(\"btn-play\").addEventListener(\"click\", startGame);\n document.getElementById(\"btn-again\").addEventListener(\"click\", () => {\n audio.unlock();\n newRun(state.mode);\n });\n document.getElementById(\"btn-go-menu\").addEventListener(\"click\", () => {\n showMainMenu();\n });\n\n // pause screen\n document.getElementById(\"btn-pause\").addEventListener(\"click\", togglePause);\n document.getElementById(\"btn-resume\").addEventListener(\"click\", togglePause);\n document.getElementById(\"btn-restart\").addEventListener(\"click\", () => newRun(state.mode));\n document.getElementById(\"btn-quit\").addEventListener(\"click\", () => {\n state.phase = \"menu\";\n document.getElementById(\"hud\").classList.remove(\"visible\");\n showMainMenu();\n });\n\n // sub-panels\n const openPanel = (id, renderFn) => {\n audio.ui();\n renderFn?.();\n ui.showScreen(id);\n };\n document.getElementById(\"btn-leaderboard\").addEventListener(\"click\", () =>\n openPanel(\"screen-leaderboard\", loadLeaderboardPanel));\n document.getElementById(\"btn-achievements\").addEventListener(\"click\", () =>\n openPanel(\"screen-achievements\", () =>\n ui.renderAchievementsPanel(document.getElementById(\"ach-list\"))));\n document.getElementById(\"btn-skins\").addEventListener(\"click\", () =>\n openPanel(\"screen-skins\", () =>\n ui.renderSkinsPanel(document.getElementById(\"skin-list\"))));\n document.getElementById(\"btn-stats\").addEventListener(\"click\", () =>\n openPanel(\"screen-stats\", () =>\n ui.renderStatsPanel(document.getElementById(\"stats-list\"))));\n document.getElementById(\"btn-settings\").addEventListener(\"click\", () =>\n openPanel(\"screen-settings\", renderSettings));\n\n document.querySelectorAll(\"[data-back]\").forEach((btn) =>\n btn.addEventListener(\"click\", () => { audio.ui(); showMainMenu(); }));\n\n // leaderboard mode tabs\n document.querySelectorAll(\"[data-lb-mode]\").forEach((btn) => {\n btn.addEventListener(\"click\", () => {\n document.querySelectorAll(\"[data-lb-mode]\").forEach((b) =>\n b.classList.toggle(\"selected\", b === btn));\n loadLeaderboardPanel(btn.dataset.lbMode);\n });\n });\n\n // settings toggles\n const bindToggle = (id, key, apply) => {\n const el = document.getElementById(id);\n el.addEventListener(\"change\", () => {\n ui.settings[key] = el.type === \"checkbox\" ? el.checked : el.value;\n ui.saveSettings();\n apply?.();\n audio.ui();\n });\n };\n bindToggle(\"set-sound\", \"sound\", () => audio.setSound(ui.settings.sound));\n bindToggle(\"set-music\", \"music\", () => audio.setMusic(ui.settings.music));\n bindToggle(\"set-particles\", \"particles\", () => fx.setQuality(ui.settings.particles));\n bindToggle(\"set-dpad\", \"dpad\", updateDpadVisibility);\n bindToggle(\"set-shake\", \"screenShake\");\n bindToggle(\"set-haptics\", \"haptics\", () => { input.hapticsOn = ui.settings.haptics; });\n bindToggle(\"set-grid\", \"showGrid\");\n}\n\nfunction renderSettings() {\n document.getElementById(\"set-sound\").checked = ui.settings.sound;\n document.getElementById(\"set-music\").checked = ui.settings.music;\n document.getElementById(\"set-particles\").value = ui.settings.particles;\n document.getElementById(\"set-dpad\").value = ui.settings.dpad;\n document.getElementById(\"set-shake\").checked = ui.settings.screenShake;\n document.getElementById(\"set-haptics\").checked = ui.settings.haptics;\n document.getElementById(\"set-grid\").checked = ui.settings.showGrid;\n}\n\nasync function loadLeaderboardPanel(mode = \"classic\") {\n const el = document.getElementById(\"lb-list\");\n el.innerHTML = `

Loading…

`;\n const scores = await ui.fetchLeaderboard(mode);\n ui.renderLeaderboard(el, scores, ui.getPlayerName() || null);\n}\n\nfunction showMainMenu() {\n state.phase = \"menu\";\n document.getElementById(\"hud\").classList.remove(\"visible\");\n document.getElementById(\"menu-best\").textContent =\n `BEST — Classic ${ui.best.classic.toLocaleString()} · Hardcore ${ui.best.hardcore.toLocaleString()} · Zen ${ui.best.zen.toLocaleString()}`;\n ui.showScreen(\"screen-menu\");\n}\n\n// ---------------------------------------------------------------------------\n// Boot\n// ---------------------------------------------------------------------------\nfunction boot() {\n resize();\n input.attach(canvas, document.getElementById(\"dpad\"));\n input.onPause = () => {\n if (state.phase === \"playing\" || state.phase === \"paused\") togglePause();\n };\n input.onAnyKey = () => audio.unlock();\n // unlock audio on the first tap anywhere\n window.addEventListener(\"pointerdown\", () => audio.unlock(), { once: true });\n\n applySettingsToSystems();\n wireMenus();\n showMainMenu();\n requestAnimationFrame(frame);\n}\n\nboot();\n",[],[222,240],"b8d9b3aa-f09f-4399-92ae-2c9264be6004","entities.js","cf4f2106-7c54-11f1-b534-1607ee4eb77e",7,["D",1783683912224],"// ============================================================================\n// NEON SERPENT — entities.js\n// Everything on the board that isn't the snake:\n// Food (5 types) · Power-ups (7 types) · Walls · Mines · Patrol drones ·\n// Portal pairs. Includes spawn logic, board occupancy helpers, and the\n// per-level layout generator.\n// ============================================================================\n\nimport {\n GRID, FOOD_TYPES, POWERUP_TYPES, POWERUP_SPAWN,\n randInt, pickWeighted,\n} from \"./config.js\";\n\nexport const cellKey = (x, y) => `${x},${y}`;\n\n// ---------------------------------------------------------------------------\n// Board occupancy — one source of truth for \"what's in this cell?\"\n// ---------------------------------------------------------------------------\nexport class Board {\n constructor() {\n this.foods = []; // { x, y, type, born, wob }\n this.powerups = []; // { x, y, type, born }\n this.walls = new Set(); // \"x,y\"\n this.mines = []; // { x, y, armed, fuse }\n this.drones = []; // { x, y, dir, moveEvery, acc, path }\n this.portals = []; // [{ a: {x,y}, b: {x,y}, hue }]\n this.rng = Math.random;\n }\n\n reset() {\n this.foods = [];\n this.powerups = [];\n this.walls = new Set();\n this.mines = [];\n this.drones = [];\n this.portals = [];\n }\n\n isWall(x, y) { return this.walls.has(cellKey(x, y)); }\n\n mineAt(x, y) { return this.mines.find((m) => m.x === x && m.y === y); }\n\n droneAt(x, y) { return this.drones.find((d) => d.x === x && d.y === y); }\n\n portalAt(x, y) {\n for (const p of this.portals) {\n if (p.a.x === x && p.a.y === y) return { pair: p, exit: p.b };\n if (p.b.x === x && p.b.y === y) return { pair: p, exit: p.a };\n }\n return null;\n }\n\n foodIndexAt(x, y) { return this.foods.findIndex((f) => f.x === x && f.y === y); }\n\n powerupIndexAt(x, y) { return this.powerups.findIndex((p) => p.x === x && p.y === y); }\n\n // A cell is blocked for spawning if anything at all lives there.\n isOccupied(x, y, snakeSet) {\n const k = cellKey(x, y);\n if (snakeSet && snakeSet.has(k)) return true;\n if (this.walls.has(k)) return true;\n if (this.mineAt(x, y)) return true;\n if (this.droneAt(x, y)) return true;\n if (this.portalAt(x, y)) return true;\n if (this.foodIndexAt(x, y) >= 0) return true;\n if (this.powerupIndexAt(x, y) >= 0) return true;\n return false;\n }\n\n // Find a random free cell, keeping `margin` cells from the border and\n // optionally at least `minDistFromHead` manhattan distance from the head.\n findFreeCell(snakeSet, head = null, minDistFromHead = 0, margin = 0, tries = 300) {\n for (let i = 0; i < tries; i++) {\n const x = randInt(this.rng, margin, GRID.COLS - 1 - margin);\n const y = randInt(this.rng, margin, GRID.ROWS - 1 - margin);\n if (this.isOccupied(x, y, snakeSet)) continue;\n if (head && Math.abs(x - head.x) + Math.abs(y - head.y) < minDistFromHead) continue;\n return { x, y };\n }\n return null;\n }\n\n // -------------------------------------------------------------------------\n // Food spawning\n // -------------------------------------------------------------------------\n spawnFood(snakeSet, head, level, forceType = null) {\n const cell = this.findFreeCell(snakeSet, head, 3);\n if (!cell) return null;\n\n let type;\n if (forceType) {\n type = FOOD_TYPES[forceType];\n } else {\n const candidates = Object.values(FOOD_TYPES)\n .filter((t) => !t.minLevel || level >= t.minLevel)\n .map((t) => ({ weight: t.weight, value: t }));\n type = pickWeighted(this.rng, candidates);\n }\n\n const food = {\n x: cell.x, y: cell.y,\n type,\n born: performance.now(),\n wob: Math.random() * Math.PI * 2, // wobble phase for rendering\n };\n this.foods.push(food);\n return food;\n }\n\n ensureFood(snakeSet, head, level, minCount = 1) {\n while (this.foods.length < minCount) {\n if (!this.spawnFood(snakeSet, head, level)) break;\n }\n }\n\n // Frenzy: shower of short-lived normal food\n spawnFrenzy(snakeSet, head, count = 6) {\n for (let i = 0; i < count; i++) {\n const f = this.spawnFood(snakeSet, head, 1, \"normal\");\n if (f) {\n f.type = { ...FOOD_TYPES.normal, ttl: 5200, color: \"#ff7ab0\", points: 15 };\n f.born = performance.now();\n }\n }\n }\n\n expireFoods(now) {\n const expired = [];\n for (let i = this.foods.length - 1; i >= 0; i--) {\n const f = this.foods[i];\n if (f.type.ttl > 0 && now - f.born > f.type.ttl) {\n expired.push(f);\n this.foods.splice(i, 1);\n }\n }\n return expired;\n }\n\n // -------------------------------------------------------------------------\n // Power-up spawning\n // -------------------------------------------------------------------------\n spawnPowerup(snakeSet, head) {\n if (this.powerups.length >= POWERUP_SPAWN.MAX_ON_BOARD) return null;\n const cell = this.findFreeCell(snakeSet, head, 4, 1);\n if (!cell) return null;\n const candidates = Object.values(POWERUP_TYPES)\n .map((t) => ({ weight: t.weight, value: t }));\n const type = pickWeighted(this.rng, candidates);\n const pu = { x: cell.x, y: cell.y, type, born: performance.now() };\n this.powerups.push(pu);\n return pu;\n }\n\n expirePowerups(now) {\n const expired = [];\n for (let i = this.powerups.length - 1; i >= 0; i--) {\n if (now - this.powerups[i].born > POWERUP_SPAWN.TTL_MS) {\n expired.push(this.powerups[i]);\n this.powerups.splice(i, 1);\n }\n }\n return expired;\n }\n\n // -------------------------------------------------------------------------\n // Level layout generation\n // Walls come in strokes (horizontal / vertical / L-shaped) placed away\n // from the snake's spawn area. Mines & drones get free cells. Portals\n // spawn as linked pairs on opposite halves of the board.\n // -------------------------------------------------------------------------\n buildLevel(spec, snakeSet, head, rng) {\n this.rng = rng;\n this.walls = new Set();\n this.mines = [];\n this.drones = [];\n this.portals = [];\n\n const safe = (x, y) =>\n x >= 1 && x < GRID.COLS - 1 && y >= 1 && y < GRID.ROWS - 1 &&\n Math.abs(x - head.x) + Math.abs(y - head.y) > 5 &&\n !snakeSet.has(cellKey(x, y));\n\n // --- Walls: strokes of 3–6 cells --------------------------------------\n for (let w = 0; w < spec.walls; w++) {\n for (let attempt = 0; attempt < 40; attempt++) {\n const len = randInt(rng, 3, 6);\n const horizontal = rng() < 0.5;\n const bend = rng() < 0.3; // L-shaped\n const sx = randInt(rng, 2, GRID.COLS - 3 - (horizontal ? len : 0));\n const sy = randInt(rng, 2, GRID.ROWS - 3 - (horizontal ? 0 : len));\n const cells = [];\n let ok = true;\n for (let i = 0; i < len; i++) {\n const x = horizontal ? sx + i : sx;\n const y = horizontal ? sy : sy + i;\n if (!safe(x, y) || this.walls.has(cellKey(x, y))) { ok = false; break; }\n cells.push([x, y]);\n }\n if (ok && bend && cells.length) {\n const [lx, ly] = cells[cells.length - 1];\n const blen = randInt(rng, 2, 3);\n for (let i = 1; i <= blen; i++) {\n const x = horizontal ? lx : lx + i;\n const y = horizontal ? ly + i : ly;\n if (!safe(x, y) || this.walls.has(cellKey(x, y))) break;\n cells.push([x, y]);\n }\n }\n if (ok) {\n for (const [x, y] of cells) this.walls.add(cellKey(x, y));\n break;\n }\n }\n }\n\n // --- Mines -------------------------------------------------------------\n for (let m = 0; m < spec.mines; m++) {\n const cell = this.findFreeCell(snakeSet, head, 6, 2);\n if (cell) {\n this.mines.push({\n x: cell.x, y: cell.y,\n armed: true,\n pulse: Math.random() * Math.PI * 2,\n });\n }\n }\n\n // --- Patrol drones: pick a row or column corridor and bounce ----------\n for (let d = 0; d < spec.drones; d++) {\n const cell = this.findFreeCell(snakeSet, head, 8, 3);\n if (cell) {\n const horizontal = rng() < 0.5;\n this.drones.push({\n x: cell.x, y: cell.y,\n fx: cell.x, fy: cell.y, // fractional render position\n dir: horizontal\n ? { x: rng() < 0.5 ? 1 : -1, y: 0 }\n : { x: 0, y: rng() < 0.5 ? 1 : -1 },\n moveEveryMs: 340,\n acc: 0,\n spin: 0,\n });\n }\n }\n\n // --- Portals: pairs on roughly opposite halves --------------------------\n for (let p = 0; p < spec.portals; p++) {\n const a = this.findFreeCell(snakeSet, head, 4, 2);\n let b = null;\n for (let attempt = 0; attempt < 60 && !b; attempt++) {\n const cand = this.findFreeCell(snakeSet, head, 4, 2);\n if (cand && a && (Math.abs(cand.x - a.x) + Math.abs(cand.y - a.y)) > GRID.COLS / 2) {\n b = cand;\n }\n }\n if (a && b) {\n this.portals.push({ a, b, hue: (spec.hue + 120 + p * 60) % 360, phase: Math.random() * 6 });\n }\n }\n }\n\n // -------------------------------------------------------------------------\n // Drone AI: bounce off walls / borders / snake body, occasionally turn.\n // Returns list of drones that moved (for FX hooks).\n // -------------------------------------------------------------------------\n updateDrones(dtMs, snakeSet, timeScale = 1) {\n for (const d of this.drones) {\n d.spin += dtMs * 0.004;\n d.acc += dtMs * timeScale;\n if (d.acc < d.moveEveryMs) continue;\n d.acc = 0;\n\n const tryMove = (dir) => {\n const nx = d.x + dir.x, ny = d.y + dir.y;\n if (nx < 0 || nx >= GRID.COLS || ny < 0 || ny >= GRID.ROWS) return false;\n const k = cellKey(nx, ny);\n if (this.walls.has(k)) return false;\n if (this.mineAt(nx, ny)) return false;\n if (this.portalAt(nx, ny)) return false;\n if (this.drones.some((o) => o !== d && o.x === nx && o.y === ny)) return false;\n d.x = nx; d.y = ny;\n return true;\n };\n\n // 12% chance to turn 90° for unpredictability\n if (Math.random() < 0.12) {\n d.dir = d.dir.x !== 0\n ? { x: 0, y: Math.random() < 0.5 ? 1 : -1 }\n : { x: Math.random() < 0.5 ? 1 : -1, y: 0 };\n }\n\n if (!tryMove(d.dir)) {\n // reverse, then try perpendiculars\n const reversed = { x: -d.dir.x, y: -d.dir.y };\n const perps = d.dir.x !== 0\n ? [{ x: 0, y: 1 }, { x: 0, y: -1 }]\n : [{ x: 1, y: 0 }, { x: -1, y: 0 }];\n const options = [...perps.sort(() => Math.random() - 0.5), reversed];\n for (const o of options) {\n if (tryMove(o)) { d.dir = o; break; }\n }\n }\n }\n // smooth fractional positions toward grid position for buttery rendering\n for (const d of this.drones) {\n const ease = Math.min(1, dtMs / 160);\n d.fx += (d.x - d.fx) * ease;\n d.fy += (d.y - d.fy) * ease;\n }\n }\n}\n",[],[222,248],"83e8c336-b5c7-4fa9-b2c2-0eeb1a9b763a","config.js","76602202-7c54-11f1-b534-1607ee4eb77e",4,["D",1783683763016],"// ============================================================================\n// NEON SERPENT — config.js\n// Every tunable number, level definition, skin, food type, power-up type\n// and achievement in the game lives here.\n// ============================================================================\n\nexport const GRID = {\n COLS: 28,\n ROWS: 28,\n};\n\nexport const TIMING = {\n // Base milliseconds per snake step, per mode. Lower = faster.\n BASE_STEP_MS: { classic: 150, hardcore: 105, zen: 165 },\n // Each level shaves this many ms off the step time...\n STEP_MS_PER_LEVEL: 5,\n // ...but never below this floor.\n MIN_STEP_MS: { classic: 62, hardcore: 48, zen: 80 },\n // Turbo power-up speed multiplier (applied to step time)\n TURBO_MULT: 0.55,\n // Slow-mo power-up multiplier\n SLOWMO_MULT: 1.65,\n // How long the combo meter lasts without eating (ms)\n COMBO_WINDOW_MS: 4200,\n // Grace period after spawning before hazards can kill you (ms)\n SPAWN_GRACE_MS: 2500,\n // Death slow-motion replay duration (ms)\n DEATH_SLOWMO_MS: 900,\n};\n\nexport const SCORING = {\n FOOD_BASE: 10,\n GOLDEN_BASE: 50,\n RAINBOW_BASE: 25,\n MEGA_BASE: 150,\n LEVEL_UP_BONUS: 250,\n // Score needed to advance each level = LEVEL_CURVE_BASE * level^LEVEL_CURVE_EXP\n LEVEL_CURVE_BASE: 200,\n LEVEL_CURVE_EXP: 1.35,\n MAX_COMBO_MULT: 10,\n};\n\n// ---------------------------------------------------------------------------\n// Food types. `weight` controls spawn probability, `ttl` is lifetime in ms\n// (0 = forever). `grow` is how many segments it adds (negative shrinks).\n// ---------------------------------------------------------------------------\nexport const FOOD_TYPES = {\n normal: {\n id: \"normal\",\n label: \"Data Bit\",\n color: \"#ff3d81\",\n glow: \"#ff3d81\",\n points: SCORING.FOOD_BASE,\n grow: 1,\n weight: 100,\n ttl: 0,\n radius: 0.32,\n },\n golden: {\n id: \"golden\",\n label: \"Gold Core\",\n color: \"#ffd23d\",\n glow: \"#ffb700\",\n points: SCORING.GOLDEN_BASE,\n grow: 2,\n weight: 10,\n ttl: 7000,\n radius: 0.38,\n },\n rainbow: {\n id: \"rainbow\",\n label: \"Prism Shard\",\n color: \"rainbow\", // rendered with cycling hue\n glow: \"#ffffff\",\n points: SCORING.RAINBOW_BASE,\n grow: 1,\n weight: 7,\n ttl: 6000,\n radius: 0.34,\n frenzy: true, // triggers food frenzy: 6 extra normal foods spawn\n },\n rotten: {\n id: \"rotten\",\n label: \"Corrupted Bit\",\n color: \"#5eff5e\",\n glow: \"#1a7a1a\",\n points: 5,\n grow: -2,\n weight: 8,\n ttl: 9000,\n radius: 0.30,\n minLevel: 3, // only appears from level 3\n },\n mega: {\n id: \"mega\",\n label: \"MEGA Core\",\n color: \"#ff2222\",\n glow: \"#ff6b6b\",\n points: SCORING.MEGA_BASE,\n grow: 4,\n weight: 2,\n ttl: 5000,\n radius: 0.46,\n minLevel: 4,\n pulse: true,\n },\n};\n\n// ---------------------------------------------------------------------------\n// Power-ups. Spawn on a timer, last `duration` ms once collected.\n// ---------------------------------------------------------------------------\nexport const POWERUP_TYPES = {\n shield: {\n id: \"shield\",\n label: \"SHIELD\",\n icon: \"◈\",\n color: \"#3da5ff\",\n duration: 8000,\n weight: 14,\n desc: \"Survive one collision\",\n },\n ghost: {\n id: \"ghost\",\n label: \"GHOST\",\n icon: \"◌\",\n color: \"#b48cff\",\n duration: 6000,\n weight: 10,\n desc: \"Phase through yourself & walls\",\n },\n magnet: {\n id: \"magnet\",\n label: \"MAGNET\",\n icon: \"◎\",\n color: \"#ff8c3d\",\n duration: 7000,\n weight: 12,\n desc: \"Food is pulled toward you\",\n },\n slowmo: {\n id: \"slowmo\",\n label: \"SLOW-MO\",\n icon: \"◔\",\n color: \"#3dffd2\",\n duration: 6000,\n weight: 12,\n desc: \"Time crawls\",\n },\n turbo: {\n id: \"turbo\",\n label: \"TURBO\",\n icon: \"»\",\n color: \"#ffe93d\",\n duration: 5000,\n weight: 9,\n desc: \"2x speed, 2x points\",\n },\n x2: {\n id: \"x2\",\n label: \"2X SCORE\",\n icon: \"✦\",\n color: \"#ff3dff\",\n duration: 9000,\n weight: 11,\n desc: \"Double all points\",\n },\n shrink: {\n id: \"shrink\",\n label: \"TRIM\",\n icon: \"✂\",\n color: \"#8cffb4\",\n duration: 0, // instant\n weight: 7,\n desc: \"Lose 5 segments (keep points)\",\n },\n};\n\nexport const POWERUP_SPAWN = {\n FIRST_AT_MS: 9000, // first power-up appears after 9s\n INTERVAL_MS: 14000, // then roughly every 14s\n JITTER_MS: 6000, // +/- random jitter\n TTL_MS: 8500, // despawn if not collected\n MAX_ON_BOARD: 2,\n};\n\n// ---------------------------------------------------------------------------\n// Level definitions. Levels cycle through palettes; obstacles/hazards ramp.\n// `walls` are static neon barriers, `mines` explode, `drones` patrol.\n// ---------------------------------------------------------------------------\nexport const LEVELS = [\n { name: \"BOOT SEQUENCE\", hue: 315, walls: 0, mines: 0, drones: 0, portals: 0 },\n { name: \"SHALLOW GRID\", hue: 195, walls: 2, mines: 0, drones: 0, portals: 0 },\n { name: \"FIREWALL\", hue: 15, walls: 4, mines: 1, drones: 0, portals: 0 },\n { name: \"PORTAL SECTOR\", hue: 265, walls: 3, mines: 1, drones: 0, portals: 1 },\n { name: \"MINEFIELD\", hue: 45, walls: 2, mines: 4, drones: 0, portals: 1 },\n { name: \"PATROL ZONE\", hue: 145, walls: 3, mines: 2, drones: 1, portals: 1 },\n { name: \"DEEP NET\", hue: 225, walls: 5, mines: 3, drones: 1, portals: 2 },\n { name: \"CORE BREACH\", hue: 355, walls: 4, mines: 4, drones: 2, portals: 2 },\n { name: \"OVERCLOCK\", hue: 55, walls: 6, mines: 4, drones: 2, portals: 2 },\n { name: \"SINGULARITY\", hue: 285, walls: 6, mines: 5, drones: 3, portals: 2 },\n];\n\n// Past the defined levels, this generates infinite escalation.\nexport function levelSpec(levelNum) {\n const idx = levelNum - 1;\n if (idx < LEVELS.length) return { ...LEVELS[idx], num: levelNum };\n const over = idx - LEVELS.length + 1;\n return {\n name: `SINGULARITY +${over}`,\n num: levelNum,\n hue: (285 + over * 47) % 360,\n walls: Math.min(10, 6 + Math.floor(over / 2)),\n mines: Math.min(8, 5 + Math.floor(over / 2)),\n drones: Math.min(5, 3 + Math.floor(over / 3)),\n portals: 2,\n };\n}\n\n// Zen mode strips out everything that can kill you.\nexport function applyModeToSpec(spec, mode) {\n if (mode === \"zen\") return { ...spec, walls: 0, mines: 0, drones: 0 };\n if (mode === \"hardcore\") {\n return {\n ...spec,\n mines: Math.min(9, spec.mines + 1),\n drones: Math.min(6, spec.drones + (spec.num >= 4 ? 1 : 0)),\n };\n }\n return spec;\n}\n\n// ---------------------------------------------------------------------------\n// Snake skins — unlocked via achievements / high scores (stored locally).\n// Head/body are HSL-based so they can shift with level palettes.\n// ---------------------------------------------------------------------------\nexport const SKINS = [\n { id: \"neon\", name: \"Neon Pulse\", head: \"#00ffe1\", body: \"#00c3ff\", unlock: null },\n { id: \"magma\", name: \"Magma\", head: \"#ffdd55\", body: \"#ff4400\", unlock: { score: 1000 } },\n { id: \"toxic\", name: \"Toxic\", head: \"#ccff33\", body: \"#33ff66\", unlock: { score: 3000 } },\n { id: \"violet\", name: \"Ultraviolet\", head: \"#ff66ff\", body: \"#8833ff\", unlock: { combo: 8 } },\n { id: \"ghostly\", name: \"Wraith\", head: \"#ffffff\", body: \"#99aabb\", unlock: { deaths: 25 } },\n { id: \"royal\", name: \"Royal Gold\", head: \"#fff3b0\", body: \"#ffb700\", unlock: { score: 10000 } },\n];\n\n// ---------------------------------------------------------------------------\n// Achievements — checked live during play, persisted to localStorage.\n// ---------------------------------------------------------------------------\nexport const ACHIEVEMENTS = [\n { id: \"first_bite\", name: \"First Bite\", desc: \"Eat your first food\", icon: \"🍒\" },\n { id: \"snack_100\", name: \"Century Snacker\", desc: \"Eat 100 foods (lifetime)\", icon: \"💯\" },\n { id: \"combo_5\", name: \"Chain Reaction\", desc: \"Reach a 5x combo\", icon: \"⚡\" },\n { id: \"combo_10\", name: \"MAXIMUM COMBO\", desc: \"Reach the 10x combo cap\", icon: \"🔥\" },\n { id: \"long_30\", name: \"Absolute Unit\", desc: \"Grow to 30 segments\", icon: \"🐍\" },\n { id: \"long_60\", name: \"Leviathan\", desc: \"Grow to 60 segments\", icon: \"🌊\" },\n { id: \"score_1k\", name: \"Kilobyte\", desc: \"Score 1,000 in one run\", icon: \"📀\" },\n { id: \"score_5k\", name: \"Megabyte\", desc: \"Score 5,000 in one run\", icon: \"💾\" },\n { id: \"score_15k\", name: \"Gigachad-byte\", desc: \"Score 15,000 in one run\", icon: \"🏆\" },\n { id: \"level_5\", name: \"Deep Diver\", desc: \"Reach level 5\", icon: \"🌀\" },\n { id: \"level_10\", name: \"Singularity\", desc: \"Reach level 10\", icon: \"🕳️\" },\n { id: \"ghost_pass\", name: \"Phantom\", desc: \"Phase through your own body\", icon: \"👻\" },\n { id: \"shield_save\", name: \"Not Today\", desc: \"Survive a hit with the shield\", icon: \"🛡️\" },\n { id: \"portal_10\", name: \"Interdimensional\",desc: \"Use portals 10 times (lifetime)\", icon: \"🌌\" },\n { id: \"mega_eat\", name: \"Overindulgence\", desc: \"Eat a MEGA Core\", icon: \"🍖\" },\n { id: \"die_mine\", name: \"Boom Goes the...\", desc: \"Get killed by a mine\", icon: \"💥\" },\n { id: \"zen_500\", name: \"Inner Peace\", desc: \"Score 500 in Zen mode\", icon: \"🧘\" },\n { id: \"hard_1k\", name: \"Built Different\", desc: \"Score 1,000 in Hardcore\", icon: \"💀\" },\n { id: \"no_walls\", name: \"Untouchable\", desc: \"Reach level 4 without shields\", icon: \"✨\" },\n { id: \"frenzy\", name: \"Feeding Frenzy\", desc: \"Trigger a prism frenzy\", icon: \"🌈\" },\n];\n\nexport const STORAGE_KEYS = {\n SETTINGS: \"neon-serpent:settings:v1\",\n STATS: \"neon-serpent:stats:v1\",\n ACHIEVEMENTS: \"neon-serpent:achievements:v1\",\n NAME: \"neon-serpent:name:v1\",\n SKIN: \"neon-serpent:skin:v1\",\n BEST: \"neon-serpent:best:v1\",\n};\n\nexport const DEFAULT_SETTINGS = {\n sound: true,\n music: true,\n particles: \"high\", // high | low | off\n dpad: \"auto\", // auto | on | off\n screenShake: true,\n haptics: true,\n showGrid: true,\n};\n\nexport const DIRS = {\n up: { x: 0, y: -1 },\n down: { x: 0, y: 1 },\n left: { x: -1, y: 0 },\n right: { x: 1, y: 0 },\n};\n\nexport function oppositeDir(a, b) {\n return a.x === -b.x && a.y === -b.y;\n}\n\n// Small seeded RNG so level layouts feel deterministic-ish per run seed\nexport function makeRng(seed) {\n let s = seed >>> 0;\n return function rng() {\n s ^= s << 13; s >>>= 0;\n s ^= s >> 17;\n s ^= s << 5; s >>>= 0;\n return s / 4294967296;\n };\n}\n\nexport function randInt(rng, min, max) {\n return min + Math.floor(rng() * (max - min + 1));\n}\n\nexport function pickWeighted(rng, entries) {\n // entries: [{ weight, value }]\n const total = entries.reduce((s, e) => s + e.weight, 0);\n let roll = rng() * total;\n for (const e of entries) {\n roll -= e.weight;\n if (roll <= 0) return e.value;\n }\n return entries[entries.length - 1].value;\n}\n",[],[222,256],"140975b7-4b76-4492-af97-75675e1816f9","audio.js","9997fee8-7c54-11f1-8c99-1607ee4eb77e",5,["D",1783683822107],"// ============================================================================\n// NEON SERPENT — audio.js\n// Fully procedural WebAudio engine. Zero audio files.\n// - SFX: eat, golden, powerup, level-up, death, portal, combo ticks, UI, mine\n// - Music: generative synthwave loop (bass, arps, pad, hats) that speeds up\n// with the game level and ducks under big SFX moments.\n// ============================================================================\n\nclass AudioEngine {\n constructor() {\n this.ctx = null;\n this.master = null;\n this.sfxBus = null;\n this.musicBus = null;\n this.soundOn = true;\n this.musicOn = true;\n this.musicPlaying = false;\n this.musicTimer = null;\n this.step = 0;\n this.bpm = 96;\n this.intensity = 0; // 0..1 — rises with level\n this._noiseBuf = null;\n }\n\n // Must be called from a user gesture (tap / keypress)\n unlock() {\n if (this.ctx) {\n if (this.ctx.state === \"suspended\") this.ctx.resume();\n return;\n }\n const AC = window.AudioContext || window.webkitAudioContext;\n if (!AC) return;\n this.ctx = new AC();\n this.master = this.ctx.createGain();\n this.master.gain.value = 0.9;\n this.master.connect(this.ctx.destination);\n\n // gentle master compressor so stacked SFX don't clip\n const comp = this.ctx.createDynamicsCompressor();\n comp.threshold.value = -18;\n comp.knee.value = 20;\n comp.ratio.value = 6;\n this.master.disconnect();\n this.master.connect(comp);\n comp.connect(this.ctx.destination);\n\n this.sfxBus = this.ctx.createGain();\n this.sfxBus.gain.value = 0.85;\n this.sfxBus.connect(this.master);\n\n this.musicBus = this.ctx.createGain();\n this.musicBus.gain.value = 0.34;\n this.musicBus.connect(this.master);\n\n if (this.musicOn) this.startMusic();\n }\n\n setSound(on) { this.soundOn = on; }\n setMusic(on) {\n this.musicOn = on;\n if (!this.ctx) return;\n if (on && !this.musicPlaying) this.startMusic();\n if (!on && this.musicPlaying) this.stopMusic();\n }\n\n setIntensity(v) {\n this.intensity = Math.max(0, Math.min(1, v));\n this.bpm = 96 + Math.round(this.intensity * 44); // 96 → 140 bpm\n }\n\n now() { return this.ctx ? this.ctx.currentTime : 0; }\n\n // -------------------------------------------------------------------------\n // Primitive voices\n // -------------------------------------------------------------------------\n _tone({ freq = 440, freqEnd = null, type = \"sine\", dur = 0.15, gain = 0.2,\n attack = 0.005, release = null, bus = null, when = 0 }) {\n if (!this.ctx || !this.soundOn && bus !== this.musicBus) return;\n const t0 = this.now() + when;\n const osc = this.ctx.createOscillator();\n const g = this.ctx.createGain();\n osc.type = type;\n osc.frequency.setValueAtTime(freq, t0);\n if (freqEnd !== null) osc.frequency.exponentialRampToValueAtTime(Math.max(1, freqEnd), t0 + dur);\n const rel = release ?? dur;\n g.gain.setValueAtTime(0.0001, t0);\n g.gain.exponentialRampToValueAtTime(gain, t0 + attack);\n g.gain.exponentialRampToValueAtTime(0.0001, t0 + attack + rel);\n osc.connect(g);\n g.connect(bus || this.sfxBus);\n osc.start(t0);\n osc.stop(t0 + attack + rel + 0.05);\n }\n\n _noise({ dur = 0.2, gain = 0.15, filterFreq = 2000, filterQ = 1,\n type = \"lowpass\", bus = null, when = 0 }) {\n if (!this.ctx || (!this.soundOn && bus !== this.musicBus)) return;\n const t0 = this.now() + when;\n if (!this._noiseBuf) {\n const len = this.ctx.sampleRate * 1;\n this._noiseBuf = this.ctx.createBuffer(1, len, this.ctx.sampleRate);\n const data = this._noiseBuf.getChannelData(0);\n for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1;\n }\n const src = this.ctx.createBufferSource();\n src.buffer = this._noiseBuf;\n src.loop = true;\n const filter = this.ctx.createBiquadFilter();\n filter.type = type;\n filter.frequency.value = filterFreq;\n filter.Q.value = filterQ;\n const g = this.ctx.createGain();\n g.gain.setValueAtTime(gain, t0);\n g.gain.exponentialRampToValueAtTime(0.0001, t0 + dur);\n src.connect(filter); filter.connect(g); g.connect(bus || this.sfxBus);\n src.start(t0);\n src.stop(t0 + dur + 0.05);\n }\n\n // -------------------------------------------------------------------------\n // SFX\n // -------------------------------------------------------------------------\n eat(comboLevel = 1) {\n // pitch rises with the combo — pentatonic ladder feels great\n const scale = [523.25, 587.33, 659.25, 783.99, 880.0, 1046.5, 1174.7, 1318.5, 1568.0, 1760.0];\n const f = scale[Math.min(comboLevel - 1, scale.length - 1)];\n this._tone({ freq: f, type: \"square\", dur: 0.09, gain: 0.16 });\n this._tone({ freq: f * 2, type: \"sine\", dur: 0.12, gain: 0.08, when: 0.02 });\n }\n\n golden() {\n [659.25, 830.61, 987.77, 1318.5].forEach((f, i) =>\n this._tone({ freq: f, type: \"triangle\", dur: 0.14, gain: 0.15, when: i * 0.055 }));\n }\n\n mega() {\n this._tone({ freq: 120, freqEnd: 60, type: \"sawtooth\", dur: 0.35, gain: 0.25 });\n [523.25, 659.25, 783.99, 1046.5, 1318.5].forEach((f, i) =>\n this._tone({ freq: f, type: \"square\", dur: 0.12, gain: 0.13, when: 0.05 + i * 0.06 }));\n }\n\n rotten() {\n this._tone({ freq: 300, freqEnd: 90, type: \"sawtooth\", dur: 0.3, gain: 0.18 });\n this._noise({ dur: 0.25, gain: 0.06, filterFreq: 800 });\n }\n\n powerup(kind = \"generic\") {\n if (kind === \"shield\") {\n this._tone({ freq: 392, freqEnd: 784, type: \"sine\", dur: 0.25, gain: 0.2 });\n this._tone({ freq: 587, freqEnd: 1174, type: \"sine\", dur: 0.25, gain: 0.12, when: 0.06 });\n } else if (kind === \"turbo\") {\n this._tone({ freq: 200, freqEnd: 1600, type: \"sawtooth\", dur: 0.3, gain: 0.15 });\n } else if (kind === \"slowmo\") {\n this._tone({ freq: 1200, freqEnd: 200, type: \"sine\", dur: 0.5, gain: 0.16 });\n } else if (kind === \"ghost\") {\n this._tone({ freq: 660, freqEnd: 440, type: \"triangle\", dur: 0.4, gain: 0.13 });\n this._tone({ freq: 880, freqEnd: 587, type: \"triangle\", dur: 0.4, gain: 0.09, when: 0.08 });\n } else {\n [440, 554.37, 659.25].forEach((f, i) =>\n this._tone({ freq: f, type: \"square\", dur: 0.1, gain: 0.14, when: i * 0.05 }));\n }\n }\n\n powerdown() {\n this._tone({ freq: 659.25, freqEnd: 329.63, type: \"square\", dur: 0.2, gain: 0.1 });\n }\n\n levelUp() {\n const seq = [523.25, 659.25, 783.99, 1046.5, 783.99, 1046.5, 1318.5];\n seq.forEach((f, i) =>\n this._tone({ freq: f, type: \"square\", dur: 0.11, gain: 0.15, when: i * 0.08 }));\n this._noise({ dur: 0.6, gain: 0.05, filterFreq: 6000, type: \"highpass\", when: 0.1 });\n }\n\n portal() {\n this._tone({ freq: 220, freqEnd: 1760, type: \"sine\", dur: 0.28, gain: 0.16 });\n this._tone({ freq: 1760, freqEnd: 220, type: \"sine\", dur: 0.28, gain: 0.12, when: 0.05 });\n }\n\n shieldSave() {\n this._noise({ dur: 0.3, gain: 0.2, filterFreq: 3000, filterQ: 4, type: \"bandpass\" });\n this._tone({ freq: 987.77, type: \"triangle\", dur: 0.3, gain: 0.18 });\n }\n\n explosion() {\n this._noise({ dur: 0.6, gain: 0.35, filterFreq: 400, filterQ: 0.7 });\n this._tone({ freq: 100, freqEnd: 30, type: \"sawtooth\", dur: 0.5, gain: 0.3 });\n }\n\n death() {\n // duck the music for drama\n if (this.musicBus) {\n const t = this.now();\n this.musicBus.gain.cancelScheduledValues(t);\n this.musicBus.gain.setValueAtTime(this.musicBus.gain.value, t);\n this.musicBus.gain.linearRampToValueAtTime(0.05, t + 0.1);\n this.musicBus.gain.linearRampToValueAtTime(0.34, t + 2.5);\n }\n this._tone({ freq: 440, freqEnd: 55, type: \"sawtooth\", dur: 0.9, gain: 0.25 });\n this._tone({ freq: 220, freqEnd: 27.5, type: \"square\", dur: 1.1, gain: 0.18, when: 0.1 });\n this._noise({ dur: 0.8, gain: 0.2, filterFreq: 600 });\n }\n\n ui() { this._tone({ freq: 880, type: \"sine\", dur: 0.06, gain: 0.08 }); }\n pause() { this._tone({ freq: 587.33, freqEnd: 440, type: \"sine\", dur: 0.15, gain: 0.1 }); }\n countdown() { this._tone({ freq: 660, type: \"square\", dur: 0.08, gain: 0.12 }); }\n go() { this._tone({ freq: 1320, type: \"square\", dur: 0.2, gain: 0.15 }); }\n achievement() {\n [783.99, 987.77, 1174.66, 1567.98].forEach((f, i) =>\n this._tone({ freq: f, type: \"triangle\", dur: 0.16, gain: 0.13, when: i * 0.09 }));\n }\n\n // -------------------------------------------------------------------------\n // Generative synthwave music\n // Chord loop: Am — F — C — G (in A minor pentatonic space)\n // 16 steps per bar, scheduled one bar ahead.\n // -------------------------------------------------------------------------\n startMusic() {\n if (!this.ctx || this.musicPlaying) return;\n this.musicPlaying = true;\n this.step = 0;\n const scheduleBar = () => {\n if (!this.musicPlaying) return;\n const stepDur = 60 / this.bpm / 4; // 16th notes\n const bar = Math.floor(this.step / 16) % 4;\n const roots = [110.0, 87.31, 130.81, 98.0]; // A2, F2, C3, G2\n const root = roots[bar];\n const minorPent = [1, 6 / 5, 4 / 3, 3 / 2, 9 / 5, 2];\n\n for (let i = 0; i < 16; i++) {\n const when = i * stepDur;\n const globalStep = this.step + i;\n\n // Bass: pumping eighth notes\n if (i % 2 === 0) {\n this._tone({\n freq: root, type: \"sawtooth\", dur: stepDur * 0.9,\n gain: 0.16, attack: 0.01, bus: this.musicBus, when,\n });\n }\n // Kick-ish thump on the quarter notes\n if (i % 4 === 0) {\n this._tone({\n freq: 150, freqEnd: 45, type: \"sine\", dur: 0.12,\n gain: 0.3, bus: this.musicBus, when,\n });\n }\n // Hats (busier at high intensity)\n const hatEvery = this.intensity > 0.5 ? 1 : 2;\n if (i % hatEvery === 0) {\n this._noise({\n dur: 0.03, gain: i % 4 === 2 ? 0.05 : 0.025,\n filterFreq: 9000, type: \"highpass\", bus: this.musicBus, when,\n });\n }\n // Arp: pseudo-random but deterministic per step\n const arpChance = 0.4 + this.intensity * 0.4;\n const h = Math.sin(globalStep * 12.9898) * 43758.5453;\n const r = h - Math.floor(h);\n if (r < arpChance) {\n const note = minorPent[Math.floor(r * 100) % minorPent.length];\n const octave = r > 0.66 ? 4 : 2;\n this._tone({\n freq: root * note * octave, type: \"square\", dur: stepDur * 0.8,\n gain: 0.05 + this.intensity * 0.03, attack: 0.005,\n bus: this.musicBus, when,\n });\n }\n // Pad swell at the top of each bar\n if (i === 0) {\n [1, 3 / 2, 2].forEach((iv) => this._tone({\n freq: root * iv * 2, type: \"triangle\", dur: stepDur * 14,\n gain: 0.035, attack: 0.4, bus: this.musicBus, when,\n }));\n }\n }\n this.step += 16;\n this.musicTimer = setTimeout(scheduleBar, stepDur * 16 * 1000 - 30);\n };\n scheduleBar();\n }\n\n stopMusic() {\n this.musicPlaying = false;\n if (this.musicTimer) clearTimeout(this.musicTimer);\n this.musicTimer = null;\n }\n}\n\nexport const audio = new AudioEngine();\n",[],[222,264],"15a7459f-c339-4c68-8a47-46502927f09a",["D",1783683763016],"directory",[172,173,174,175,176,177,178],[222],["D",1783683213729],["D",1789524636084],{"_11":12,"_130":69},{"_11":12,"_126":69,"_68":69,"_30":67,"_127":128,"_129":24},{"_39":117,"_13":16,"_33":36,"_118":80,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_53":-5,"_150":314,"_315":316,"_317":318,"_319":24,"_320":24,"_321":24,"_322":148,"_323":-5,"_324":-7,"_325":-7,"_326":26,"_327":24,"_328":24,"_329":-5,"_330":24,"_331":24,"_332":24,"_333":-5},"ENV",{"_285":286,"_287":288,"_289":16,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

NEONSERPENT

🏆 GLOBAL LEADERBOARD

⭐ ACHIEVEMENTS

🎨 SERPENT SKINS

📊 LIFETIME STATS

⚙️ SETTINGS

⏸ PAUSED

GAME OVER

NEON
SERPENT

History · index.html