:root { --primary: #7127FF; --accent: #00F0FF; --bg: #0B0714; --text: #F1EAFF; }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; background: var(--bg); font-family: 'Oswald', sans-serif, sans-serif; }
canvas { display: block; width: 100vw; height: 100vh; touch-action: none; cursor: crosshair; }
.hud { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center; gap: 26px; padding: 14px; font-size: 13px; letter-spacing: .14em; color: var(--text); pointer-events: none; user-select: none; }
.hud b { font-size: 15px; }
.overlay { position: fixed; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(6px); }
.overlay.hidden { display: none; }
.panel { text-align: center; color: var(--text); padding: 44px 52px; background: color-mix(in srgb, var(--primary) 12%, var(--bg)); border: 1.5px solid var(--primary); border-radius: 20px; max-width: 92vw; }
.panel h1 { font-size: clamp(34px, 6vw, 58px); letter-spacing: -0.03em; margin-bottom: 8px; }
.panel h1 em { font-style: normal; color: var(--accent); }
.panel p { font-family: 'Source Sans 3', sans-serif, sans-serif; opacity: .8; margin-bottom: 24px; font-size: 15px; }
.panel button { font-family: 'Oswald', sans-serif, sans-serif; font-size: 17px; font-weight: 700; padding: 14px 34px; border-radius: 999px; border: none; background: var(--primary); color: #FFFFFF; cursor: pointer; transition: transform .12s ease; }
.panel button:hover { transform: scale(1.05); }
.panel .hint { margin-top: 18px; font-size: 12px; letter-spacing: .1em; opacity: .55; font-family: 'Source Sans 3', sans-serif, sans-serif; }
.panel .stats { display: flex; gap: 30px; justify-content: center; margin: 6px 0 22px; }
.panel .stats div b { display: block; font-size: 30px; }
.panel .stats div span { font-size: 11px; letter-spacing: .12em; opacity: .6; }