:root {
  --bg: #020205;
  --ink: #eef0ff;
  --dim: #9aa3c7;
  --accent: #ff5a4f;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 16px/1.45 "Space Grotesk", system-ui, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }
a { color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }

/* ---- intro ---- */
#intro { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px 16px; overflow: hidden; transition: opacity .6s, transform .6s; }
#intro.leaving { opacity: 0; transform: scale(1.06); pointer-events: none; }
.intro-inner { position: relative; max-width: 30rem; text-align: center; }
.kicker { margin: 0; letter-spacing: .3em; text-transform: uppercase; font-size: 12px; color: var(--dim); }
h1 { margin: .2em 0 .3em; font-size: clamp(48px, 13vw, 92px); line-height: .95; font-weight: 700; letter-spacing: -.03em; }
h1 em { font-style: normal; background: linear-gradient(90deg, #ff5a4f, #ffc94f, #4fe3a1, #4f8dff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { color: #c9cff0; font-size: 18px; margin: 0 auto 28px; }
#start { position: relative; border: 0; background: none; width: 168px; height: 168px; border-radius: 50%; }
#start span { position: relative; z-index: 1; font-weight: 700; font-size: 18px; }
#start::before, #start::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
#start::before { background: radial-gradient(circle at 35% 30%, #ff8a6a, #c4183a 60%, #5a0820); box-shadow: 0 0 60px rgba(255,80,80,.45); }
#start::after { border: 1px solid rgba(255,140,120,.6); animation: ping 2.4s ease-out infinite; }
#start:disabled { opacity: .5; }
#start:focus-visible { outline: 3px solid #ffc94f; outline-offset: 6px; }
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.fine { color: var(--dim); font-size: 13px; margin-top: 26px; }
.credits { color: var(--dim); font-size: 13px; }
.orbs i { position: absolute; width: 38vmax; height: 38vmax; border-radius: 50%; filter: blur(60px); opacity: .28; animation: drift 18s ease-in-out infinite alternate; }
.orbs i:nth-child(1) { background: #ff5a4f; left: -10%; top: -10%; }
.orbs i:nth-child(2) { background: #4f8dff; right: -15%; top: 20%; animation-delay: -4s; }
.orbs i:nth-child(3) { background: #4fe3a1; left: 20%; bottom: -20%; animation-delay: -8s; }
.orbs i:nth-child(4) { background: #ffc94f; right: 10%; bottom: -10%; width: 22vmax; height: 22vmax; animation-delay: -2s; }
.orbs i:nth-child(5) { background: #d06bff; left: 40%; top: 5%; width: 18vmax; height: 18vmax; animation-delay: -11s; }
.orbs i:nth-child(6) { background: #4fd8ff; left: 5%; top: 50%; width: 16vmax; height: 16vmax; animation-delay: -6s; }
@keyframes drift { to { transform: translate(8vmax, -6vmax) scale(1.15); } }

/* ---- field ---- */
#field { position: fixed; inset: 0; }
#radar { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 12px;
       padding: max(14px, env(safe-area-inset-top)) 16px 30px; background: linear-gradient(#020205ee, #02020500); pointer-events: none; }
#now { margin: 0; font-weight: 700; font-size: 22px; }
#medley, #others, #mode { margin: 0; color: var(--dim); font-size: 13px; }
#others { margin-left: auto; }
.ring { --p: 0deg; width: 34px; height: 34px; border-radius: 50%; flex: none;
        background: conic-gradient(var(--ink) var(--p), rgba(255,255,255,.12) 0); display: grid; place-items: center; }
.ring span { width: 26px; height: 26px; border-radius: 50%; background: var(--bg); }
.bottom { position: absolute; left: 0; right: 0; bottom: 0; display: grid; justify-items: center; gap: 12px;
          padding: 30px 16px max(16px, env(safe-area-inset-bottom)); background: linear-gradient(#02020500, #020205ee); }
#carry { border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
         padding: 12px 22px; border-radius: 999px; font-weight: 500; }
#carry:hover { background: rgba(255,255,255,.16); }
#board { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pad { --hue: 0deg; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
       background: radial-gradient(circle at 35% 30%, hsl(calc(var(--hue)) 90% 70% / .9), hsl(calc(var(--hue)) 80% 35% / .5));
       filter: hue-rotate(0deg); transition: transform .1s; }
.pad:active { transform: scale(.92); }
.pad.hit { animation: hit .5s ease-out; }
@keyframes hit { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 100% { box-shadow: 0 0 0 22px rgba(255,255,255,0); } }
.pad:focus-visible, #carry:focus-visible { outline: 3px solid #ffc94f; outline-offset: 3px; }
#toast { position: absolute; left: 50%; bottom: 140px; transform: translateX(-50%); background: #fff; color: #000;
         padding: 8px 14px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .3s; pointer-events: none; }
#toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .orbs i, #start::after { animation: none; } }