* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #050711; color: #f4f7ff; font-family: "Segoe UI", system-ui, sans-serif; }
body { background: radial-gradient(circle at 50% 45%, #182044 0, #090d1d 48%, #03050c 100%); }
#game-container { position: relative; isolation: isolate; width: 100%; height: 100%; overflow: hidden; background: #070914; box-shadow: inset 0 0 90px rgba(34,211,238,.08), inset 0 0 180px rgba(168,85,247,.08); }
#game-container::before { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 48px 48px; opacity: .45; }
#game-container::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 45%, rgba(2,4,12,.72) 100%); }
#gameCanvas { position: relative; z-index: 0; display: block; width: 100%; height: 100%; background: #121a2f; filter: saturate(1.12) contrast(1.04); }
.overlay { position: absolute; z-index: 1; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: radial-gradient(circle at center, rgba(22,30,65,.72), rgba(4,7,18,.94)); backdrop-filter: blur(7px); }
.overlay.hidden { display: none; }
#game-title { color: #f8fafc; font-size: clamp(1.6rem, 4vw, 2.5rem); letter-spacing: .08em; text-shadow: 0 0 12px rgba(34,211,238,.7), 0 0 30px rgba(168,85,247,.48); }
.difficulty-title { color: #bae6fd; font-weight: 800; text-shadow: 0 0 12px rgba(34,211,238,.35); }
.difficulty-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; max-width: 680px; }
.difficulty-button, #startButton, .pause-actions button { appearance: none; border: 1px solid rgba(186,230,253,.28); border-radius: 999px; padding: 11px 18px; color: #f8fafc; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045)); box-shadow: inset 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.24); font-weight: 800; cursor: pointer; transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; }
.difficulty-button:hover, .pause-actions button:hover { transform: translateY(-2px); filter: brightness(1.18); box-shadow: inset 0 1px rgba(255,255,255,.16), 0 0 18px rgba(34,211,238,.2), 0 10px 28px rgba(0,0,0,.32); }
.difficulty-button.selected { outline: 3px solid #fff; outline-offset: 2px; }
.difficulty-button.easy.selected { background: #16a34a; box-shadow: 0 0 22px rgba(34,197,94,.5); }
.difficulty-button.normal.selected { background: #2563eb; box-shadow: 0 0 22px rgba(59,130,246,.55); }
.difficulty-button.hard.selected { background: #dc2626; box-shadow: 0 0 22px rgba(239,68,68,.55); }
.difficulty-button.magma.selected { background: linear-gradient(135deg, #7f1d1d, #f97316); box-shadow: 0 0 28px rgba(249,115,22,.62); }
#difficultyDescription { min-height: 1.4em; color: #cbd5e1; font-size: .92rem; }
#startButton { padding: 12px 32px; color: #07111c; background: linear-gradient(135deg, #67e8f9, #a78bfa 58%, #f0abfc); border-color: rgba(255,255,255,.6); box-shadow: 0 0 22px rgba(34,211,238,.3), 0 0 38px rgba(168,85,247,.24); letter-spacing: .1em; }
#startButton:disabled { cursor: not-allowed; filter: grayscale(1); opacity: .4; box-shadow: none; }
#startButton:not(:disabled):hover { filter: brightness(1.12); box-shadow: 0 0 28px rgba(34,211,238,.48), 0 0 48px rgba(168,85,247,.34); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#controls-hint, .pause-hint { opacity: .78; font-size: .92rem; }
.pause-overlay { z-index: 2; background: radial-gradient(circle at center, rgba(15,25,55,.86), rgba(2,4,12,.96)); backdrop-filter: blur(8px); }
.pause-overlay h2 { color: #bae6fd; font-size: clamp(1.7rem, 5vw, 2.8rem); text-shadow: 0 0 18px rgba(34,211,238,.5); }
.pause-actions { display: flex; flex-direction: column; gap: 10px; width: min(320px, 90vw); }
.pause-actions button { width: 100%; padding: 13px 20px; font-size: 1rem; }
#restartButton { background: linear-gradient(135deg, rgba(127,29,29,.75), rgba(239,68,68,.42)); }
#difficultyButton { background: linear-gradient(135deg, rgba(30,58,138,.75), rgba(59,130,246,.42)); }
#continueButton { color: #07111c; background: linear-gradient(135deg, #22d3ee, #a78bfa); box-shadow: 0 0 22px rgba(34,211,238,.28); }