:root { --noir: #050807; --emerald: #10b981; --purple: #a855f7; }
* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--noir); color: #e5e7eb; min-height: 100vh; display: flex; flex-direction: column; }
.display-font { font-family: 'Space Grotesk', sans-serif; }
.mono { font-family: 'JetBrains Mono', monospace; }
.bg-grid { position: fixed; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.03) 1px, transparent 0); background-size: 32px 32px; pointer-events: none; mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%); z-index: 0; }
.aurora { position: fixed; top: -20%; left: -10%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(168,85,247,0.12) 0%, transparent 70%); filter: blur(90px); z-index: 0; animation: auroraFloat 22s ease-in-out infinite; pointer-events: none; }
@keyframes auroraFloat { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-40px) scale(1.1); } }
.game-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid rgba(255,255,255,0.05); backdrop-filter: blur(20px); background: rgba(0,0,0,0.5); padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.game-main { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 16px; position: relative; z-index: 10; }
.score-badge { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); border-radius: 12px; color: #10b981; font-weight: 700; }
.game-canvas { background: #0a0f0d; border: 2px solid rgba(168,85,247,0.3); border-radius: 12px; box-shadow: 0 20px 40px -15px rgba(168,85,247,0.2); max-width: 100%; height: auto; touch-action: none; }
.touch-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; user-select: none; -webkit-user-select: none; }
.touch-row { display: flex; gap: 16px; }
.touch-btn { width: 60px; height: 60px; background: rgba(168,85,247,0.15); border: 2px solid rgba(168,85,247,0.3); border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #c084fc; cursor: pointer; transition: all 0.15s; touch-action: manipulation; }
.touch-btn:active { background: var(--purple); color: white; transform: scale(0.9); box-shadow: 0 0 20px rgba(168,85,247,0.5); }
.back-btn { padding: 8px 16px; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #f87171; border-radius: 10px; font-size: 12px; font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: all 0.2s; }
.back-btn:hover { background: #ef4444; color: white; }
.game-over { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 20px; z-index: 50; border-radius: 12px; }
.game-over.active { display: flex; }
.game-over h2 { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 800; color: #ef4444; margin: 0; }
.btn-primary { padding: 10px 24px; background: linear-gradient(135deg, #a855f7, #ec4899); color: white; border: none; border-radius: 12px; font-weight: 700; cursor: pointer; transition: all 0.2s; font-size: 14px; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -6px rgba(168,85,247,0.4); }