{"project":{"id":"Fv88I9J","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Bounce","visible":true,"contributors":"","githubRepo":null,"forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>Untitled</title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Orbitron:wght@700;900&display=swap\" rel=\"stylesheet\">\n<script src=\"https://unpkg.com/lucide@latest\"></script>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">\n</head>\n<body>\n<div class=\"game\">\n\t<canvas id=\"gameCanvas\"></canvas>\n\t<div class=\"game__ui\">\n\t\t<div class=\"game__score\" id=\"score\">0</div>\n\t\t<div class=\"game__height\" id=\"height\">Height: 0m</div>\n\t</div>\n\t<div class=\"game__overlay\" id=\"startScreen\">\n\t\t<h1 class=\"game__title\">SKY<br>BOUNCE</h1>\n\t\t<p class=\"game__subtitle\">Bounce to the top. Don't fall.</p>\n\t\t<button class=\"game__btn\" id=\"startBtn\">TAP TO PLAY</button>\n\t</div>\n\t<div class=\"game__overlay game__overlay--hidden\" id=\"gameOverScreen\">\n\t\t<h2 class=\"game__over-title\">GAME OVER</h2>\n\t\t<p class=\"game__final-score\" id=\"finalScore\">0m</p>\n\t\t<p class=\"game__best\" id=\"bestScore\">Best: 0m</p>\n\t\t<button class=\"game__btn\" id=\"restartBtn\">PLAY AGAIN</button>\n\t</div>\n\t<div class=\"game__controls\" id=\"controls\">\n\t\t<div class=\"game__control game__control--left\" id=\"leftBtn\">\n\t\t\t<i data-lucide=\"chevron-left\"></i>\n\t\t</div>\n\t\t<div class=\"game__control game__control--right\" id=\"rightBtn\">\n\t\t\t<i data-lucide=\"chevron-right\"></i>\n\t\t</div>\n\t</div>\n</div>\n  <script type=\"module\" src=\"main.js\"></script>\n</body>\n</html>"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();\n\nconst canvas = document.getElementById('gameCanvas');\nconst ctx = canvas.getContext('2d');\n\n// Screens\nconst startScreen = document.getElementById('startScreen');\nconst gameOverScreen = document.getElementById('gameOverScreen');\nconst startBtn = document.getElementById('startBtn');\nconst restartBtn = document.getElementById('restartBtn');\nconst scoreEl = document.getElementById('score');\nconst heightEl = document.getElementById('height');\nconst finalScoreEl = document.getElementById('finalScore');\nconst bestScoreEl = document.getElementById('bestScore');\n\n// Controls\nconst leftBtn = document.getElementById('leftBtn');\nconst rightBtn = document.getElementById('rightBtn');\n\nlet W, H, dpr;\nlet gameRunning = false;\nlet bestHeight = parseInt(localStorage.getItem('skyBounce_best') || '0');\n\nfunction resize() {\n\tconst container = canvas.parentElement;\n\tdpr = window.devicePixelRatio || 1;\n\tW = container.clientWidth;\n\tH = container.clientHeight;\n\tcanvas.width = W * dpr;\n\tcanvas.height = H * dpr;\n\tcanvas.style.width = W + 'px';\n\tcanvas.style.height = H + 'px';\n\tctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n}\nwindow.addEventListener('resize', resize);\nresize();\n\n// Game state\nlet player, platforms, camera, maxHeight, particles, stars;\n\nconst GRAVITY = 0.3;\nconst JUMP_FORCE = -9.5;\nconst MOVE_SPEED = 6;\nconst PLATFORM_COUNT = 15;\n\nclass Star {\n\tconstructor() {\n\t\tthis.x = Math.random() * W;\n\t\tthis.y = Math.random() * H;\n\t\tthis.size = Math.random() * 1.5 + 0.5;\n\t\tthis.alpha = Math.random() * 0.8 + 0.2;\n\t\tthis.speed = Math.random() * 0.5 + 0.1;\n\t\tthis.parallax = Math.random() * 0.3 + 0.1;\n\t}\n}\n\nclass Particle {\n\tconstructor(x, y, color) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.vx = (Math.random() - 0.5) * 6;\n\t\tthis.vy = (Math.random() - 0.5) * 6 - 2;\n\t\tthis.life = 1;\n\t\tthis.decay = Math.random() * 0.03 + 0.02;\n\t\tthis.size = Math.random() * 4 + 2;\n\t\tthis.color = color;\n\t}\n\tupdate() {\n\t\tthis.x += this.vx;\n\t\tthis.y += this.vy;\n\t\tthis.vy += 0.1;\n\t\tthis.life -= this.decay;\n\t}\n\tdraw() {\n\t\tctx.globalAlpha = this.life;\n\t\tctx.fillStyle = this.color;\n\t\tctx.fillRect(this.x, this.y - camera, this.size, this.size);\n\t\tctx.globalAlpha = 1;\n\t}\n}\n\nclass Platform {\n\tconstructor(x, y, w, type) {\n\t\tthis.x = x;\n\t\tthis.y = y;\n\t\tthis.w = w;\n\t\tthis.h = 12;\n\t\tthis.type = type || 'normal'; // normal, moving, breakable, boost\n\t\tthis.broken = false;\n\t\tthis.moveDir = 1;\n\t\tthis.moveSpeed = Math.random() * 1.5 + 0.8;\n\t\tthis.originalX = x;\n\t\tthis.glowPhase = Math.random() * Math.PI * 2;\n\t}\n\n\tupdate() {\n\t\tif (this.type === 'moving') {\n\t\t\tthis.x += this.moveSpeed * this.moveDir;\n\t\t\tif (this.x + this.w > W || this.x < 0) {\n\t\t\t\tthis.moveDir *= -1;\n\t\t\t}\n\t\t}\n\t\tthis.glowPhase += 0.04;\n\t}\n\n\tdraw() {\n\t\tif (this.broken) return;\n\t\tconst screenY = this.y - camera;\n\t\tif (screenY > H + 20 || screenY < -20) return;\n\n\t\tconst glow = Math.sin(this.glowPhase) * 0.3 + 0.7;\n\n\t\tif (this.type === 'normal') {\n\t\t\tctx.fillStyle = `rgba(0, 255, 200, ${0.8 * glow})`;\n\t\t\tctx.shadowColor = 'rgba(0, 255, 200, 0.6)';\n\t\t\tctx.shadowBlur = 12;\n\t\t} else if (this.type === 'moving') {\n\t\t\tctx.fillStyle = `rgba(100, 180, 255, ${0.8 * glow})`;\n\t\t\tctx.shadowColor = 'rgba(100, 180, 255, 0.6)';\n\t\t\tctx.shadowBlur = 12;\n\t\t} else if (this.type === 'breakable') {\n\t\t\tctx.fillStyle = `rgba(255, 200, 60, ${0.6 * glow})`;\n\t\t\tctx.shadowColor = 'rgba(255, 200, 60, 0.4)';\n\t\t\tctx.shadowBlur = 8;\n\t\t} else if (this.type === 'boost') {\n\t\t\tctx.fillStyle = `rgba(255, 62, 122, ${0.9 * glow})`;\n\t\t\tctx.shadowColor = 'rgba(255, 62, 122, 0.7)';\n\t\t\tctx.shadowBlur = 16;\n\t\t}\n\n\t\t// Draw platform with rounded ends\n\t\tconst r = this.h / 2;\n\t\tctx.beginPath();\n\t\tctx.roundRect(this.x, screenY, this.w, this.h, r);\n\t\tctx.fill();\n\n\t\tctx.shadowBlur = 0;\n\t}\n}\n\nfunction initGame() {\n\tplayer = {\n\t\tx: W / 2 - 15,\n\t\ty: H - 80,\n\t\tw: 30,\n\t\th: 30,\n\t\tvx: 0,\n\t\tvy: 0,\n\t\tonGround: false,\n\t\tfacing: 1\n\t};\n\n\tcamera = 0;\n\tmaxHeight = 0;\n\tparticles = [];\n\tplatforms = [];\n\n\t// Create stars\n\tstars = [];\n\tfor (let i = 0; i < 60; i++) {\n\t\tstars.push(new Star());\n\t}\n\n\t// Base platform\n\tplatforms.push(new Platform(W / 2 - 60, H - 40, 120, 'normal'));\n\n\t// Generate initial platforms\n\tfor (let i = 1; i < PLATFORM_COUNT; i++) {\n\t\tgeneratePlatform(H - 40 - i * (H / PLATFORM_COUNT));\n\t}\n}\n\nfunction generatePlatform(y) {\n\tconst w = Math.random() * 40 + 60;\n\tconst x = Math.random() * (W - w);\n\tconst heightMeters = Math.abs(y) / 50;\n\n\tlet type = 'normal';\n\tconst rand = Math.random();\n\tif (heightMeters > 20 && rand < 0.15) {\n\t\ttype = 'boost';\n\t} else if (heightMeters > 10 && rand < 0.3) {\n\t\ttype = 'moving';\n\t} else if (heightMeters > 15 && rand < 0.45) {\n\t\ttype = 'breakable';\n\t}\n\n\tplatforms.push(new Platform(x, y, w, type));\n}\n\n// Input handling\nconst keys = {\n\tleft: false,\n\tright: false\n};\n\ndocument.addEventListener('keydown', (e) => {\n\tif (e.key === 'ArrowLeft' || e.key === 'a') keys.left = true;\n\tif (e.key === 'ArrowRight' || e.key === 'd') keys.right = true;\n});\ndocument.addEventListener('keyup', (e) => {\n\tif (e.key === 'ArrowLeft' || e.key === 'a') keys.left = false;\n\tif (e.key === 'ArrowRight' || e.key === 'd') keys.right = false;\n});\n\n// Touch controls\nleftBtn.addEventListener('touchstart', (e) => {\n\te.preventDefault();\n\tkeys.left = true;\n});\nleftBtn.addEventListener('touchend', (e) => {\n\te.preventDefault();\n\tkeys.left = false;\n});\nrightBtn.addEventListener('touchstart', (e) => {\n\te.preventDefault();\n\tkeys.right = true;\n});\nrightBtn.addEventListener('touchend', (e) => {\n\te.preventDefault();\n\tkeys.right = false;\n});\n\nfunction spawnParticles(x, y, color, count) {\n\tfor (let i = 0; i < count; i++) {\n\t\tparticles.push(new Particle(x, y, color));\n\t}\n}\n\nfunction update() {\n\tif (!gameRunning) return;\n\n\t// Player movement\n\tif (keys.left) {\n\t\tplayer.vx = -MOVE_SPEED;\n\t\tplayer.facing = -1;\n\t} else if (keys.right) {\n\t\tplayer.vx = MOVE_SPEED;\n\t\tplayer.facing = 1;\n\t} else {\n\t\tplayer.vx *= 0.85;\n\t}\n\n\t// Apply gravity\n\tplayer.vy += GRAVITY;\n\tplayer.x += player.vx;\n\tplayer.y += player.vy;\n\n\t// Wrap around screen edges\n\tif (player.x + player.w < 0) player.x = W;\n\tif (player.x > W) player.x = -player.w;\n\n\t// Platform collision (only when falling)\n\tif (player.vy > 0) {\n\t\tfor (let p of platforms) {\n\t\t\tif (p.broken) continue;\n\t\t\tif (\n\t\t\t\tplayer.x + player.w > p.x &&\n\t\t\t\tplayer.x < p.x + p.w &&\n\t\t\t\tplayer.y + player.h >= p.y &&\n\t\t\t\tplayer.y + player.h <= p.y + p.h + player.vy + 2\n\t\t\t) {\n\t\t\t\t// Land on platform\n\t\t\t\tif (p.type === 'breakable') {\n\t\t\t\t\tp.broken = true;\n\t\t\t\t\tspawnParticles(p.x + p.w / 2, p.y, 'rgba(255, 200, 60, 0.8)', 8);\n\t\t\t\t\tplayer.vy = JUMP_FORCE * 0.7;\n\t\t\t\t} else if (p.type === 'boost') {\n\t\t\t\t\tplayer.vy = JUMP_FORCE * 1.8;\n\t\t\t\t\tspawnParticles(player.x + player.w / 2, player.y + player.h, '#ff3e7a', 12);\n\t\t\t\t} else {\n\t\t\t\t\tplayer.vy = JUMP_FORCE;\n\t\t\t\t\tspawnParticles(player.x + player.w / 2, player.y + player.h, '#00ffc8', 5);\n\t\t\t\t}\n\t\t\t\tplayer.y = p.y - player.h;\n\t\t\t}\n\t\t}\n\t}\n\n\t// Update camera\n\tconst targetCamera = player.y - H * 0.4;\n\tif (targetCamera < camera) {\n\t\tcamera += (targetCamera - camera) * 0.1;\n\t}\n\n\t// Track max height\n\tconst currentHeight = Math.floor(Math.abs(Math.min(0, player.y)) / 50);\n\tif (currentHeight > maxHeight) {\n\t\tmaxHeight = currentHeight;\n\t}\n\n\t// Generate new platforms above\n\tconst highestPlatform = Math.min(...platforms.map(p => p.y));\n\tif (highestPlatform > camera - H * 0.5) {\n\t\tconst gap = Math.random() * 30 + 50;\n\t\tgeneratePlatform(highestPlatform - gap);\n\t}\n\n\t// Remove platforms far below\n\tplatforms = platforms.filter(p => p.y < camera + H + 100);\n\n\t// Update platforms\n\tplatforms.forEach(p => p.update());\n\n\t// Update particles\n\tparticles.forEach(p => p.update());\n\tparticles = particles.filter(p => p.life > 0);\n\n\t// Game over check\n\tif (player.y - camera > H + 50) {\n\t\tgameOver();\n\t}\n\n\t// Update UI\n\tscoreEl.textContent = maxHeight;\n\theightEl.textContent = `Height: ${maxHeight}m`;\n}\n\nfunction drawPlayer() {\n\tconst sx = player.x;\n\tconst sy = player.y - camera;\n\tconst squish = player.vy > 0 ? 0.9 : (player.vy < -8 ? 1.15 : 1);\n\tconst squishW = player.w * (2 - squish);\n\tconst squishH = player.h * squish;\n\tconst offsetX = (player.w - squishW) / 2;\n\tconst offsetY = player.h - squishH;\n\n\t// Glow\n\tctx.shadowColor = '#ff3e7a';\n\tctx.shadowBlur = 20;\n\n\t// Body\n\tctx.fillStyle = '#ff3e7a';\n\tctx.beginPath();\n\tctx.roundRect(sx + offsetX, sy + offsetY, squishW, squishH, 8);\n\tctx.fill();\n\n\tctx.shadowBlur = 0;\n\n\t// Eyes\n\tconst eyeY = sy + offsetY + squishH * 0.35;\n\tconst eyeSize = 4;\n\tconst eyeSpacing = squishW * 0.2;\n\tconst centerX = sx + player.w / 2;\n\n\tctx.fillStyle = '#fff';\n\tctx.beginPath();\n\tctx.arc(centerX - eyeSpacing, eyeY, eyeSize, 0, Math.PI * 2);\n\tctx.arc(centerX + eyeSpacing, eyeY, eyeSize, 0, Math.PI * 2);\n\tctx.fill();\n\n\t// Pupils (look in movement direction)\n\tconst pupilOffset = player.facing * 1.5;\n\tctx.fillStyle = '#1a1040';\n\tctx.beginPath();\n\tctx.arc(centerX - eyeSpacing + pupilOffset, eyeY, 2, 0, Math.PI * 2);\n\tctx.arc(centerX + eyeSpacing + pupilOffset, eyeY, 2, 0, Math.PI * 2);\n\tctx.fill();\n\n\t// Trail when moving fast\n\tif (Math.abs(player.vy) > 5) {\n\t\tconst trailAlpha = Math.min(Math.abs(player.vy) / 20, 0.4);\n\t\tctx.fillStyle = `rgba(255, 62, 122, ${trailAlpha})`;\n\t\tfor (let i = 1; i <= 3; i++) {\n\t\t\tctx.globalAlpha = trailAlpha / i;\n\t\t\tctx.beginPath();\n\t\t\tctx.roundRect(sx + offsetX, sy + offsetY + i * 8, squishW, squishH, 8);\n\t\t\tctx.fill();\n\t\t}\n\t\tctx.globalAlpha = 1;\n\t}\n}\n\nfunction drawBackground() {\n\t// Stars with parallax\n\tstars.forEach(s => {\n\t\tconst sy = ((s.y - camera * s.parallax) % H + H) % H;\n\t\tctx.fillStyle = `rgba(200, 220, 255, ${s.alpha})`;\n\t\tctx.beginPath();\n\t\tctx.arc(s.x, sy, s.size, 0, Math.PI * 2);\n\t\tctx.fill();\n\t});\n\n\t// Height gradient lines\n\tconst lineSpacing = 200;\n\tconst startLine = Math.floor(camera / lineSpacing) * lineSpacing;\n\tfor (let y = startLine; y < camera + H; y += lineSpacing) {\n\t\tconst sy = y - camera;\n\t\tconst alpha = 0.04;\n\t\tctx.strokeStyle = `rgba(0, 255, 200, ${alpha})`;\n\t\tctx.lineWidth = 1;\n\t\tctx.beginPath();\n\t\tctx.moveTo(0, sy);\n\t\tctx.lineTo(W, sy);\n\t\tctx.stroke();\n\t}\n}\n\nfunction draw() {\n\tctx.clearRect(0, 0, W, H);\n\n\tdrawBackground();\n\n\t// Draw platforms\n\tplatforms.forEach(p => p.draw());\n\n\t// Draw particles\n\tparticles.forEach(p => p.draw());\n\n\t// Draw player\n\tif (gameRunning) {\n\t\tdrawPlayer();\n\t}\n}\n\nfunction gameLoop() {\n\tupdate();\n\tdraw();\n\trequestAnimationFrame(gameLoop);\n}\n\nfunction startGame() {\n\tinitGame();\n\tgameRunning = true;\n\tstartScreen.classList.add('game__overlay--hidden');\n\tgameOverScreen.classList.add('game__overlay--hidden');\n}\n\nfunction gameOver() {\n\tgameRunning = false;\n\tif (maxHeight > bestHeight) {\n\t\tbestHeight = maxHeight;\n\t\tlocalStorage.setItem('skyBounce_best', bestHeight.toString());\n\t}\n\tfinalScoreEl.textContent = maxHeight + 'm';\n\tbestScoreEl.textContent = 'Best: ' + bestHeight + 'm';\n\tgameOverScreen.classList.remove('game__overlay--hidden');\n}\n\nstartBtn.addEventListener('click', startGame);\nrestartBtn.addEventListener('click', startGame);\n\n// Also allow tap on canvas to start\ncanvas.addEventListener('click', () => {\n\tif (!gameRunning && startScreen.classList.contains('game__overlay--hidden') && gameOverScreen.classList.contains('game__overlay--hidden')) {\n\t\tstartGame();\n\t}\n});\n\n// Tilt controls for mobile\nif (window.DeviceOrientationEvent) {\n\twindow.addEventListener('deviceorientation', (e) => {\n\t\tif (!gameRunning) return;\n\t\tif (e.gamma !== null) {\n\t\t\tconst tilt = e.gamma / 30;\n\t\t\tconst clampedTilt = Math.max(-1, Math.min(1, tilt));\n\t\t\tif (Math.abs(clampedTilt) > 0.15) {\n\t\t\t\tif (clampedTilt < 0) {\n\t\t\t\t\tkeys.left = true;\n\t\t\t\t\tkeys.right = false;\n\t\t\t\t} else {\n\t\t\t\t\tkeys.right = true;\n\t\t\t\t\tkeys.left = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t});\n}\n\n// Initialize with a preview draw\ninitGame();\ngameLoop();"},{"name":"style.css","content":"@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Orbitron:wght@700;900&display=swap');\n\n:root {\n\tcolor-scheme: dark;\n\t--c-bg: #0a0e1a;\n\t--c-accent: #00ffc8;\n\t--c-accent2: #ff3e7a;\n\t--c-platform: #00ffc8;\n\t--c-player: #ff3e7a;\n\t--c-text: #e0e8ff;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n\t-webkit-tap-highlight-color: transparent;\n\tuser-select: none;\n}\n\nhtml, body {\n\twidth: 100%;\n\theight: 100%;\n\toverflow: hidden;\n\tbackground: var(--c-bg);\n\tfont-family: 'Chakra Petch', sans-serif;\n\ttouch-action: none;\n}\n\n.game {\n\tposition: relative;\n\twidth: 100%;\n\theight: 100dvh;\n\tmax-width: 500px;\n\tmargin: 0 auto;\n\toverflow: hidden;\n\tbackground: linear-gradient(180deg, #0a0e1a 0%, #101833 40%, #1a1040 70%, #0a0e1a 100%);\n}\n\n#gameCanvas {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: block;\n}\n\n.game__ui {\n\tposition: absolute;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tpadding: 16px 20px;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tz-index: 10;\n\tpointer-events: none;\n}\n\n.game__score {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 900;\n\tfont-size: 2rem;\n\tcolor: var(--c-accent);\n\ttext-shadow: 0 0 20px rgba(0, 255, 200, 0.5);\n}\n\n.game__height {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 700;\n\tfont-size: 0.85rem;\n\tcolor: var(--c-text);\n\topacity: 0.7;\n}\n\n.game__overlay {\n\tposition: absolute;\n\tinset: 0;\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 50;\n\tbackground: rgba(10, 14, 26, 0.92);\n\tbackdrop-filter: blur(10px);\n\ttransition: opacity 0.4s, visibility 0.4s;\n}\n\n.game__overlay--hidden {\n\topacity: 0;\n\tvisibility: hidden;\n\tpointer-events: none;\n}\n\n.game__title {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 900;\n\tfont-size: clamp(3rem, 12vw, 5rem);\n\tline-height: 1;\n\ttext-align: center;\n\tcolor: var(--c-accent);\n\ttext-shadow: 0 0 40px rgba(0, 255, 200, 0.4), 0 0 80px rgba(0, 255, 200, 0.15);\n\tletter-spacing: 0.05em;\n\tmargin-bottom: 16px;\n}\n\n.game__subtitle {\n\tcolor: var(--c-text);\n\tfont-size: 1.1rem;\n\topacity: 0.6;\n\tmargin-bottom: 48px;\n\tletter-spacing: 0.1em;\n\ttext-transform: uppercase;\n}\n\n.game__btn {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 700;\n\tfont-size: 1rem;\n\tletter-spacing: 0.15em;\n\tpadding: 16px 48px;\n\tborder: 2px solid var(--c-accent);\n\tbackground: transparent;\n\tcolor: var(--c-accent);\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\tposition: relative;\n\toverflow: hidden;\n}\n\n.game__btn::before {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n\tbackground: var(--c-accent);\n\topacity: 0;\n\ttransition: opacity 0.2s;\n}\n\n.game__btn:hover::before,\n.game__btn:active::before {\n\topacity: 0.15;\n}\n\n.game__over-title {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 900;\n\tfont-size: clamp(2rem, 8vw, 3.5rem);\n\tcolor: var(--c-accent2);\n\ttext-shadow: 0 0 40px rgba(255, 62, 122, 0.4);\n\tmargin-bottom: 16px;\n}\n\n.game__final-score {\n\tfont-family: 'Orbitron', sans-serif;\n\tfont-weight: 900;\n\tfont-size: 3rem;\n\tcolor: var(--c-accent);\n\ttext-shadow: 0 0 30px rgba(0, 255, 200, 0.4);\n\tmargin-bottom: 8px;\n}\n\n.game__best {\n\tcolor: var(--c-text);\n\topacity: 0.5;\n\tfont-size: 1rem;\n\tmargin-bottom: 40px;\n}\n\n.game__controls {\n\tposition: absolute;\n\tbottom: 0;\n\tleft: 0;\n\tright: 0;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tz-index: 20;\n\tpadding: 20px;\n\tpointer-events: none;\n}\n\n.game__control {\n\twidth: 80px;\n\theight: 80px;\n\tborder-radius: 50%;\n\tborder: 2px solid rgba(255, 255, 255, 0.15);\n\tbackground: rgba(255, 255, 255, 0.05);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: rgba(255, 255, 255, 0.4);\n\tpointer-events: all;\n\ttransition: all 0.1s;\n}\n\n.game__control:active {\n\tbackground: rgba(0, 255, 200, 0.15);\n\tborder-color: var(--c-accent);\n\tcolor: var(--c-accent);\n}\n\n.game__control svg {\n\twidth: 36px;\n\theight: 36px;\n}\n\n@media (min-width: 600px) {\n\t.game__controls {\n\t\tdisplay: none;\n\t}\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-07T12:19:01.963Z","updatedAt":"2026-02-07T12:19:42.009Z","hasThumbnail":true}}