* { box-sizing: border-box; }
html, body, main { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: #11152c; color: #f4f2ff; font-family: system-ui, sans-serif; }
main { position: relative; touch-action: none; }
canvas { display: block; width: 100%; height: 100%; }
header { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; background: linear-gradient(#11152cd9, transparent); gap: 12px; }
header strong { font-size: 12px; letter-spacing: .19em; color: #b3f6e2; }
header div { display: flex; align-items: center; gap: 25px; }
header span { display: grid; gap: 2px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #b4b9d7; }
header b { color: #fff; font-size: 23px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
button { font: inherit; cursor: pointer; color: #fff; border: 1px solid #ffffff2b; border-radius: 12px; background: #ffffff10; padding: 10px 16px; }
button:hover { filter: brightness(1.12); }
button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
button:disabled { opacity: .35; cursor: default; }
#overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(ellipse, #15172dce 0%, #15172d00 75%); text-align: center; padding: 80px 20px 35px; }
#overlay[hidden] { display: none; }
.badge { color: #ffde89; font-size: 64px; line-height: 1; text-shadow: 0 0 40px #e6aa52b3; margin-bottom: 12px; }
.eyebrow { color: #a9a6d2; font-size: 9px; letter-spacing: .28em; }
h1 { font-size: clamp(35px, 7vw, 64px); margin: 2px 0 12px; letter-spacing: -.055em; line-height: 1.1; }
#message { color: #c3c8e4; line-height: 1.7; font-size: 14px; margin: 0 0 25px; }
#start { background: #a5f0d8; color: #183e3b; font-size: 16px; font-weight: 750; min-width: 170px; padding: 15px 30px; border-color: #d9fff2; box-shadow: 0 5px 0 #4a9e8a, 0 10px 35px #6ee7bc20; }
.controls { color: #898eb0; font-size: 11px; margin-top: 23px; }
footer { position: absolute; inset: auto 0 0; display: flex; justify-content: space-between; padding: 16px 28px; color: #7f86af; font-size: 9px; letter-spacing: .08em; pointer-events: none; }
@media (max-width: 550px) { header { padding: 18px 16px; align-items: flex-start; } header strong { max-width: 90px; line-height: 1.6; } header div { gap: 12px; } header b { font-size: 20px; } header button { padding: 8px; font-size: 12px; } footer { padding: 16px; } }