:root{
  --bg:#f3f5fb;--bg2:#e8ecf8;--card:#ffffff;--text:#121726;--muted:#5a6479;--line:#e0e5f2;
  --accent:#4f46e5;--accent2:#06b6d4;--accent-text:#fff;--good:#16a34a;--bad:#e11d48;--wait:#f59e0b;
  --shadow:0 1px 2px rgba(18,23,38,.06),0 8px 24px rgba(18,23,38,.07);
  --radius:18px;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0e18;--bg2:#111628;--card:#151b2e;--text:#eef1fb;--muted:#98a3bd;--line:#232b45;
    --accent:#7c83ff;--accent2:#22d3ee;--accent-text:#0b0e18;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  }
}
/* per-test accent colours */
.t-reaction{--accent:#16a34a;--accent2:#84cc16}
.t-cps{--accent:#e11d48;--accent2:#f97316}
.t-mem{--accent:#7c3aed;--accent2:#ec4899}
.t-aim{--accent:#0284c7;--accent2:#06b6d4}
.t-num{--accent:#d97706;--accent2:#facc15}
@media (prefers-color-scheme:dark){
  .t-reaction{--accent:#4ade80;--accent2:#a3e635}
  .t-cps{--accent:#fb7185;--accent2:#fb923c}
  .t-mem{--accent:#a78bfa;--accent2:#f472b6}
  .t-aim{--accent:#38bdf8;--accent2:#22d3ee}
  .t-num{--accent:#fbbf24;--accent2:#fde047}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;color:var(--text);font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);
  background-image:radial-gradient(900px 420px at 85% -80px,color-mix(in srgb,var(--accent) 16%,transparent),transparent),
                   radial-gradient(700px 380px at -10% 120px,color-mix(in srgb,var(--accent2) 12%,transparent),transparent);
  background-repeat:no-repeat;min-height:100vh;
}
a{color:var(--accent)}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}

/* header */
header.site{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px}
header.site a.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.01em;color:var(--text);text-decoration:none;white-space:nowrap}
header.site a.brand::before{content:"";width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--accent),var(--accent2))}
header.site nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;font-size:.88rem;padding:8px 0}
header.site nav::-webkit-scrollbar{display:none}
header.site nav a{color:var(--muted);text-decoration:none;padding:5px 11px;border-radius:999px;white-space:nowrap;transition:background .15s,color .15s}
header.site nav a:hover{background:var(--bg2);color:var(--text)}
header.site nav a[aria-current=page]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:600}

/* typography */
h1{font-size:clamp(1.9rem,6vw,2.6rem);line-height:1.1;margin:26px 0 8px;letter-spacing:-.03em;font-weight:800}
h1 .grad{background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
h2{font-size:1.2rem;margin:34px 0 8px;letter-spacing:-.01em}
p.lead{color:var(--muted);font-size:1.05rem;margin:0 0 20px}
.muted{color:var(--muted)}.small{font-size:.88rem}

/* cards and tiles */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:16px 0;box-shadow:var(--shadow)}
.grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:560px){.grid{grid-template-columns:1fr 1fr}.grid a.tile:first-child{grid-column:1/-1}}
a.tile{
  position:relative;display:flex;gap:14px;align-items:flex-start;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s,box-shadow .18s;overflow:hidden;
}
a.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--accent),var(--accent2));opacity:0;transition:opacity .2s;mix-blend-mode:soft-light;pointer-events:none}
a.tile:hover{transform:translateY(-3px);border-color:var(--accent)}
a.tile:hover::after{opacity:.18}
a.tile:active{transform:scale(.98)}
a.tile .ico{flex:0 0 auto;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 35%,transparent)}
a.tile strong{display:block;font-size:1.05rem;letter-spacing:-.01em}
a.tile .desc{color:var(--muted);font-size:.9rem;display:block;margin-top:2px}
a.tile em{display:inline-block;margin-top:8px;font-style:normal;font-size:.78rem;font-weight:700;color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);padding:2px 9px;border-radius:999px}
a.tile em:empty{display:none}

/* play stage */
.stage{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:300px;border-radius:var(--radius);padding:18px;user-select:none;-webkit-user-select:none;
  touch-action:manipulation;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:background .12s,transform .08s,box-shadow .2s;
}
.stage:active{transform:scale(.992)}
.stage .big{font-size:clamp(2rem,9vw,3rem);font-weight:800;line-height:1.1;letter-spacing:-.03em;text-shadow:0 2px 12px rgba(0,0,0,.18)}
.stage .sub{opacity:.92;margin-top:8px}
.stage.wait{background:linear-gradient(135deg,#be123c,#e11d48);box-shadow:0 14px 40px rgba(225,29,72,.35)}
.stage.wait::before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;border:3px solid rgba(255,255,255,.5);animation:ping 1.4s ease-out infinite;top:50%;left:50%;margin:-60px 0 0 -60px;pointer-events:none}
.stage.go{background:linear-gradient(135deg,#15803d,#22c55e);box-shadow:0 0 0 6px rgba(34,197,94,.3),0 14px 50px rgba(34,197,94,.55)}
.stage.early{background:linear-gradient(135deg,#d97706,#f59e0b);animation:shake .35s}
.stage.plain{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:var(--shadow)}
.stage.plain .big{text-shadow:none;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stage:focus-visible{outline-offset:4px}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.4rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat small{color:var(--muted);font-size:.78rem}

/* buttons */
.row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
button,.btn{
  font:inherit;font-weight:700;border:0;border-radius:12px;padding:12px 20px;min-height:46px;cursor:pointer;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent) 35%,transparent);
  transition:transform .12s,box-shadow .2s,filter .15s;
}
button:hover{filter:brightness(1.06)}
button:active{transform:scale(.96)}
button.ghost{background:var(--card);color:var(--text);border:1px solid var(--line);box-shadow:none}
button[aria-pressed=true]{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-color:transparent}
button[aria-pressed=false].ghost{background:var(--card)}

/* result card */
#result{animation:pop .45s cubic-bezier(.2,1.3,.4,1) both;border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
#result[hidden]{display:none}
#rating{display:block;font-size:1.5rem;letter-spacing:-.02em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.banner{background:color-mix(in srgb,var(--accent) 10%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:12px;padding:10px 14px;margin:12px 0;font-weight:600;animation:fadeup .4s both}
.banner[hidden]{display:none}
.hist{font-size:.85rem;color:var(--muted);margin:8px 0 0}
.toast{min-height:1.4em;color:var(--good);font-size:.9rem;font-weight:600}

/* memory pads */
.pads{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:380px;margin:0 auto}
.pad{aspect-ratio:1;border-radius:16px;border:1px solid var(--line);background:var(--bg2);min-height:0;padding:0;box-shadow:none;transition:background .08s,transform .08s,box-shadow .12s}
.pad:hover{filter:none}
.pad.lit{background:linear-gradient(135deg,var(--accent),var(--accent2));transform:scale(1.05);box-shadow:0 0 28px color-mix(in srgb,var(--accent) 70%,transparent)}
.pad.bad{background:var(--bad);animation:shake .35s}
.pad:disabled{opacity:1;cursor:default}

/* aim */
.field{position:relative;overflow:hidden;height:340px;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 40px color-mix(in srgb,var(--accent) 30%,transparent);touch-action:manipulation;user-select:none;-webkit-user-select:none}
.target{position:absolute;width:58px;height:58px;border-radius:50%;border:0;padding:0;min-height:0;background:radial-gradient(circle,#fff 0 22%,#ff4d6d 23% 45%,#fff 46% 66%,#ff4d6d 67%);box-shadow:0 4px 14px rgba(0,0,0,.3);animation:spawn .14s ease-out}
.target:hover{filter:none}

/* number memory */
.digits{font-size:clamp(2rem,10vw,3rem);font-weight:800;letter-spacing:.12em;text-align:center;min-height:3.4rem;word-break:break-all;font-variant-numeric:tabular-nums}
input.num{font:inherit;font-size:1.5rem;width:100%;max-width:360px;padding:12px;border-radius:12px;border:2px solid var(--line);background:var(--bg);color:var(--text);text-align:center;outline:none}
input.num:focus{border-color:var(--accent)}

/* content */
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card);border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
td,th{border-bottom:1px solid var(--line);padding:8px 12px;text-align:left}
th{background:var(--bg2);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
tr:last-child td{border-bottom:0}
footer.site{margin:44px 0 28px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:.88rem}
footer.site a{color:var(--muted)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* entrance */
main > *{animation:fadeup .5s both}
main > *:nth-child(2){animation-delay:.05s}main > *:nth-child(3){animation-delay:.1s}main > *:nth-child(4){animation-delay:.15s}
.grid a.tile{animation:fadeup .5s both}
.grid a.tile:nth-child(1){animation-delay:.08s}.grid a.tile:nth-child(2){animation-delay:.14s}.grid a.tile:nth-child(3){animation-delay:.2s}.grid a.tile:nth-child(4){animation-delay:.26s}.grid a.tile:nth-child(5){animation-delay:.32s}

@keyframes fadeup{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}
@keyframes ping{from{transform:scale(.6);opacity:.9}to{transform:scale(1.8);opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
@keyframes spawn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}