*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#0d0a1c;color:#fff;font-family:"Avenir Next","Trebuchet MS","Segoe UI",Helvetica,Arial,sans-serif;overflow:hidden}
#stage{position:fixed;inset:0;display:grid;place-items:center;background:#0d0a1c}
#c{display:block}
#start{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;background:radial-gradient(ellipse at 50% 40%,rgba(120,70,160,.55),rgba(13,10,28,.94))}
#start[hidden],#replay[hidden]{display:none}
#start h1{font-size:clamp(3rem,10vw,7rem);font-weight:900;letter-spacing:-.02em}
#start p{font-size:clamp(1rem,2.4vw,1.6rem);opacity:.9;margin-bottom:12px}
button{font:inherit;cursor:pointer;border:0;border-radius:999px;padding:16px 34px;font-weight:800;font-size:1.15rem;background:#fff;color:#6b2d82;transition:transform .15s}
button:hover{transform:scale(1.05)}
button:focus-visible{outline:4px solid #ffd166;outline-offset:3px}
button.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.55);font-weight:700;font-size:1rem}
#replay{position:absolute;left:50%;top:50%;translate:-50% -50%}
#fs{position:absolute;right:16px;top:16px;padding:10px 16px;background:rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
#progress{position:absolute;left:0;right:0;bottom:0;height:5px;background:rgba(255,255,255,.18)}
#bar{height:100%;width:0;background:linear-gradient(90deg,#ff6b6b,#ffa94d,#ffe066,#69db7c,#4dabf7,#9775fa)}
@media (prefers-reduced-motion:reduce){button{transition:none}}