:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #070817; touch-action: none; }
body { color: #f7f5ff; }
canvas { display: block; width: 100%; height: 100%; }
.hud { position: fixed; inset: max(18px, env(safe-area-inset-top)) 18px auto; display: flex; align-items: center; gap: 14px; pointer-events: none; }
.brand { font-weight: 900; font-size: 14px; letter-spacing: .18em; display: flex; align-items: center; gap: 9px; }
.brand-dot { width: 10px; height: 10px; border-radius: 50%; background: #ffe66d; box-shadow: 0 0 16px #ffe66d; }
.status { color: #8f94b7; font-size: 12px; }
.timer { margin-left: auto; min-width: 70px; text-align: center; padding: 9px 12px; border: 1px solid #ffffff1b; border-radius: 99px; background: #0c0e24c9; font-variant-numeric: tabular-nums; font-weight: 800; }
.scores { position: fixed; right: 18px; top: 74px; width: min(180px, 42vw); padding: 12px; border: 1px solid #ffffff12; border-radius: 16px; background: #090b1abb; backdrop-filter: blur(16px); pointer-events: none; }
.score { display: grid; grid-template-columns: 9px 1fr auto; align-items: center; gap: 8px; padding: 5px 2px; font-size: 12px; }
.score i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.score span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score b { font-variant-numeric: tabular-nums; }
.hint { position: fixed; left: 50%; bottom: max(28px, env(safe-area-inset-bottom)); transform: translateX(-50%); color: #b8bbd3; font-size: 13px; padding: 9px 14px; border-radius: 99px; background: #090b1aaa; opacity: 0; transition: opacity .3s; pointer-events: none; white-space: nowrap; }
.hint.visible { opacity: 1; }
.join { position: fixed; inset: 0; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 70% 25%, #38246f55, transparent 35%), radial-gradient(circle at 20% 80%, #006d7950, transparent 40%), #070817e8; backdrop-filter: blur(8px); transition: opacity .35s, visibility .35s; }
.join.hidden { opacity: 0; visibility: hidden; }
.join-card { position: relative; width: min(520px, 100%); padding: clamp(28px, 7vw, 52px); overflow: hidden; border: 1px solid #ffffff1c; border-radius: 32px; background: linear-gradient(145deg, #14162bea, #0b0d20e8); box-shadow: 0 30px 100px #0008; }
.orb { position: absolute; width: 170px; height: 170px; right: -45px; top: -45px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff9, #ff68d8 12%, #5b43d9 44%, transparent 70%); filter: blur(1px); box-shadow: 0 0 80px #7b5cff88; }
.eyebrow { margin: 0 0 18px; color: #8f94b7; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
h1 { margin: 0; font-size: clamp(58px, 17vw, 98px); line-height: .75; letter-spacing: -.07em; text-transform: uppercase; }
h1 em { color: #ffe66d; font-style: normal; text-shadow: 0 0 35px #ffdb3d55; }
.intro { max-width: 360px; margin: 32px 0; color: #b8bbd3; line-height: 1.55; }
label { display: block; margin-bottom: 9px; color: #8f94b7; font-size: 12px; font-weight: 700; }
.name-row { display: flex; gap: 9px; }
input, button { min-height: 52px; border-radius: 15px; font: inherit; }
input { min-width: 0; flex: 1; padding: 0 15px; color: white; border: 1px solid #ffffff1c; outline: none; background: #070817; }
input:focus { border-color: #7771ff; box-shadow: 0 0 0 3px #7771ff22; }
button { padding: 0 18px; color: #090b1a; border: 0; background: #ffe66d; font-weight: 900; cursor: pointer; }
button span { margin-left: 8px; }
.one-finger { margin: 18px 0 0; color: #6f7498; font-size: 11px; }
@media (max-width: 520px) { .status { display: none; } .scores { top: 67px; right: 12px; } .hud { left: 12px; right: 12px; } }