/* SHARP — precision-instrument dark UI */
:root{
  --bg:#0a0c10;
  --bg2:#0e1117;
  --panel:#12161e;
  --panel2:#161b25;
  --line:#232a37;
  --line2:#2e3746;
  --ink:#e8edf4;
  --ink-dim:#8b95a7;
  --ink-faint:#5a6375;
  --brand:#c8ff2e;
  --brand-dim:#9ac41e;
  --bad:#ff5470;
  --good:#4dffa6;
  --reaction:#45e3ff;
  --focus:#ffc145;
  --memory:#b78bff;
  --control:#4dffa6;
  --logic:#ff6b8b;
  --star:#ffc145;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --disp:"Unbounded",var(--mono);
  --r:4px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.45;
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
}
body::before{ /* dotted engineering grid */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle,#1c2230 1px,transparent 1.1px);
  background-size:22px 22px;
  opacity:.55;
}
body::after{ /* vignette */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(120% 90% at 50% 12%,transparent 40%,rgba(0,0,0,.55) 100%);
}
#frame{
  position:relative;z-index:1;height:100%;
  display:flex;justify-content:center;
}
#app{
  width:100%;max-width:460px;height:100%;
  display:flex;flex-direction:column;
  padding:max(10px,env(safe-area-inset-top)) 16px max(14px,env(safe-area-inset-bottom));
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:none;
}
#app::-webkit-scrollbar{display:none}
@media(min-width:560px){
  #frame{align-items:center}
  #app{
    height:min(880px,96vh);
    border:1px solid var(--line);
    background:linear-gradient(180deg,rgba(18,22,30,.5),rgba(10,12,16,.2));
    box-shadow:0 0 0 1px #000,0 30px 80px rgba(0,0,0,.6);
  }
}

/* ---------- primitives ---------- */
.screen{display:flex;flex-direction:column;min-height:100%;animation:screenIn .28s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1,h2,h3,.disp{font-family:var(--disp);letter-spacing:.02em}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.tiny{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.spacer{flex:1}
.row{display:flex;align-items:center;gap:10px}

.btn{
  display:block;width:100%;
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.12em;
  padding:15px 18px;text-align:center;cursor:pointer;
  background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);border-radius:var(--r);
  transition:transform .06s ease,background .15s,border-color .15s;
}
.btn:active{transform:translateY(2px)}
.btn.primary{
  background:var(--brand);color:#0a0c10;border-color:var(--brand);
  box-shadow:0 0 24px rgba(200,255,46,.18);
}
.btn.primary:active{background:var(--brand-dim)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.4;pointer-events:none}

.card{
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line);border-radius:var(--r);
  padding:14px;
}

/* corner ticks on hero cards */
.ticks{position:relative}
.ticks::before,.ticks::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
}
.ticks::before{top:-1px;left:-1px;border-top:2px solid var(--brand);border-left:2px solid var(--brand)}
.ticks::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--brand);border-right:2px solid var(--brand)}

a.btn{text-decoration:none;display:block}
.gate-input{
  width:min(300px,86%);padding:14px 12px;text-align:center;
  font-family:var(--mono);font-size:16px;font-weight:700;letter-spacing:.08em;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  color:var(--ink);outline:none;text-transform:uppercase;
}
.gate-input:focus{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 0 24px rgba(200,255,46,.15)}
.gate-input::placeholder{color:var(--ink-faint);font-weight:400}
.who{text-align:right;font-size:10px;letter-spacing:.12em;color:var(--ink-dim);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who .who-switch{display:block;color:var(--ink-faint);cursor:pointer;margin-top:3px;letter-spacing:.2em}
.who .who-switch:hover{color:var(--brand)}

/* ---------- header ---------- */
.top{display:flex;align-items:center;justify-content:space-between;padding:8px 0 14px}
.wordmark{font-family:var(--disp);font-weight:900;font-size:22px;color:var(--ink)}
.wordmark i{font-style:normal;color:var(--brand)}
.wordmark .cursor{display:inline-block;width:.44em;height:.95em;background:var(--brand);margin-left:3px;vertical-align:-.12em;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tag{font-size:10px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}

/* ---------- home ---------- */
.cogcard{padding:18px 16px 16px;margin-bottom:14px;text-align:center}
.cogscore{font-family:var(--disp);font-weight:900;font-size:46px;line-height:1;color:var(--brand);text-shadow:0 0 30px rgba(200,255,46,.25)}
.cogscore.empty{color:var(--ink-faint);text-shadow:none}
.attr-rows{margin-top:14px;display:flex;flex-direction:column;gap:7px;text-align:left}
.attr-row{display:grid;grid-template-columns:86px 1fr 34px;gap:10px;align-items:center;font-size:11px;letter-spacing:.1em}
.attr-name{color:var(--ink-dim)}
.attr-bar{height:5px;background:#0b0e13;border:1px solid var(--line);position:relative}
.attr-bar b{position:absolute;inset:0;transform-origin:left;background:var(--c,var(--brand));box-shadow:0 0 10px var(--c,var(--brand))}
.attr-val{text-align:right;color:var(--ink)}
.mode-btns{display:flex;flex-direction:column;gap:9px;margin-bottom:14px}
.daily-sub{font-size:10px;letter-spacing:.14em;opacity:.75;font-weight:400;margin-top:3px}
.section-label{font-size:10px;letter-spacing:.24em;color:var(--ink-faint);text-transform:uppercase;margin:4px 0 8px}
.game-list{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.game-item{
  display:grid;grid-template-columns:5px 1fr auto;gap:12px;align-items:center;
  padding:12px 13px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .15s,background .15s;
}
.game-item:active{background:var(--panel2)}
.game-item .chip{width:5px;height:34px;background:var(--c);box-shadow:0 0 10px var(--c)}
.game-item .g-name{font-weight:700;letter-spacing:.08em;font-size:13.5px}
.game-item .g-attr{font-size:10px;letter-spacing:.18em;color:var(--ink-faint);margin-top:2px}
.game-item .g-best{text-align:right;font-size:13px;font-weight:700}
.game-item .g-stars{font-size:10px;color:var(--star);letter-spacing:.1em;margin-top:2px}
.home-foot{padding:12px 0 4px;text-align:center;font-size:10px;letter-spacing:.2em;color:var(--ink-faint)}

/* ---------- game shell ---------- */
.gtop{display:flex;align-items:center;justify-content:space-between;padding:6px 0 10px}
.gname{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--c,var(--ink))}
.gquit{
  font-family:var(--mono);background:none;border:1px solid var(--line);color:var(--ink-faint);
  width:34px;height:34px;font-size:15px;cursor:pointer;border-radius:var(--r);
}
.hud{display:flex;gap:8px;margin-bottom:12px}
.hud .hbox{
  flex:1;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:7px 10px;text-align:center;
}
.hud .hk{font-size:9px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase}
.hud .hv{font-size:15px;font-weight:700;margin-top:1px}
.hud .hv.flow-on{color:var(--brand)}
.stage{
  position:relative;flex:1;min-height:340px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  overflow:hidden;
}
.stage-msg{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:5}
.flash{
  position:absolute;top:14px;left:0;right:0;text-align:center;z-index:6;pointer-events:none;
  font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:.1em;
  animation:flashUp .7s ease both;
}
@keyframes flashUp{0%{opacity:0;transform:translateY(8px)}18%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-6px)}}
.shake{animation:shake .3s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}60%{transform:translateX(6px)}}

/* intro overlay */
.intro{padding:8px 6px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:auto 0}
.intro .big{font-family:var(--disp);font-weight:900;font-size:30px;color:var(--c,var(--ink))}
.intro .rule{width:44px;height:3px;background:var(--c,var(--brand))}
.intro p{color:var(--ink-dim);font-size:13.5px;max-width:300px}
.intro .keys{font-size:10.5px;letter-spacing:.14em;color:var(--ink-faint)}

/* countdown timer bar */
.tbar{position:absolute;left:0;top:0;height:4px;background:var(--c,var(--brand));width:100%;z-index:4;transform-origin:left}

/* ---------- reaction ---------- */
.rx-wait{font-family:var(--disp);font-size:17px;letter-spacing:.2em;color:var(--ink-faint);animation:pulse 1.4s ease infinite}
@keyframes pulse{50%{opacity:.35}}
.rx-target{
  position:absolute;width:104px;height:104px;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 38% 32%,#8fefff,var(--reaction) 60%,#0891b2);
  box-shadow:0 0 40px rgba(69,227,255,.55),inset 0 0 18px rgba(255,255,255,.25);
  animation:popIn .09s ease both;
  display:flex;align-items:center;justify-content:center;
}
.rx-target::after{content:"";width:12px;height:12px;border-radius:50%;background:#062a33}
@keyframes popIn{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.rx-early{color:var(--bad)}
.rx-ms{font-family:var(--disp);font-weight:900;font-size:40px;color:var(--reaction)}

/* ---------- number match ---------- */
.nm-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:10px 14px}
.nm-seq{
  font-size:clamp(20px,6.4vw,30px);font-weight:700;letter-spacing:.34em;text-indent:.34em;
  padding:16px 8px;width:100%;text-align:center;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.nm-vs{font-size:10px;letter-spacing:.3em;color:var(--ink-faint)}
.nm-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:6px}
.nm-btn{
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.1em;
  padding:20px 8px;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);
}
.nm-btn:active{transform:translateY(2px)}
.nm-btn.yes{border-color:var(--good);color:var(--good)}
.nm-btn.no{border-color:var(--bad);color:var(--bad)}
.nm-key{display:block;font-size:9px;letter-spacing:.2em;color:var(--ink-faint);margin-top:4px}
.nm-good{outline:2px solid var(--good)}
.nm-bad{outline:2px solid var(--bad)}

/* ---------- sequence ---------- */
.sq-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:12px}
.sq-cells{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;min-height:56px}
.sq-cell{
  width:44px;height:54px;display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:700;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line2);
  font-variant-numeric:tabular-nums;
}
.sq-cell.show{color:var(--memory);border-color:var(--memory);box-shadow:0 0 14px rgba(183,139,255,.25)}
.sq-cell.mask{color:var(--ink-faint)}
.sq-cell.fill{color:var(--ink);border-color:var(--line2)}
.sq-cell.ok{color:var(--good);border-color:var(--good)}
.sq-cell.err{color:var(--bad);border-color:var(--bad)}
.sq-cell.cursor{border-color:var(--memory);animation:blink 1s steps(1) infinite}
.sq-label{font-size:10px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;min-height:14px}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(270px,80%)}
.kp{
  font-family:var(--mono);font-size:20px;font-weight:700;padding:13px 0;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);color:var(--ink);border-radius:var(--r);
}
.kp:active{background:var(--panel2);transform:translateY(2px)}
.kp.back{font-size:15px;color:var(--ink-dim)}
.lives{display:flex;gap:5px}
.life{width:9px;height:9px;border-radius:50%;background:var(--memory);box-shadow:0 0 8px rgba(183,139,255,.5)}
.life.lost{background:#333a47;box-shadow:none}

/* ---------- timing ---------- */
.tc-canvas{touch-action:none;cursor:pointer;display:block}

/* ---------- path ---------- */
.pz-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding:12px}
.pz-grid{display:grid;gap:6px;touch-action:none}
.pz-cell{
  width:var(--cell);height:var(--cell);border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:calc(var(--cell)*.34);color:var(--ink-faint);
  position:relative;
}
.pz-cell.on{background:rgba(255,107,139,.16);border-color:var(--logic);color:var(--logic)}
.pz-cell.head{background:var(--logic);color:#14060a;box-shadow:0 0 16px rgba(255,107,139,.5)}
.pz-cell.endpoint{border-color:var(--logic)}
.pz-cell.endpoint::after{
  content:attr(data-ep);position:absolute;font-size:calc(var(--cell)*.3);font-weight:700;
}
.pz-cell.head.endpoint::after{color:#14060a}
.pz-hint{font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}

/* ---------- result ---------- */
.result{display:flex;flex-direction:column;min-height:100%;text-align:center}
.res-head{padding:22px 0 4px}
.res-title{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.3em;color:var(--ink-dim)}
.res-game{font-family:var(--disp);font-weight:900;font-size:21px;color:var(--c,var(--ink));margin-top:4px}
.res-score{font-family:var(--disp);font-weight:900;font-size:62px;line-height:1.05;color:var(--ink);margin:12px 0 2px;font-variant-numeric:tabular-nums}
.res-stars{font-size:19px;letter-spacing:.28em;color:var(--star);margin-bottom:12px;text-shadow:0 0 16px rgba(255,193,69,.4)}
.res-stars .off{color:#2c3442;text-shadow:none}
.newbest{
  display:inline-block;margin:0 auto 12px;padding:7px 14px;
  font-weight:700;font-size:12px;letter-spacing:.2em;
  background:var(--brand);color:#0a0c10;border-radius:var(--r);
  animation:bestPop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes bestPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.prevbest{font-size:11px;letter-spacing:.16em;color:var(--ink-faint);margin-bottom:12px}
.res-stats{margin:6px 0 14px;text-align:left}
.res-stat{
  display:flex;justify-content:space-between;padding:9px 2px;
  border-bottom:1px dashed var(--line);font-size:13px;
}
.res-stat .k{color:var(--ink-dim);letter-spacing:.08em;font-size:11.5px;text-transform:uppercase}
.res-stat .v{font-weight:700;font-variant-numeric:tabular-nums}
.res-btns{display:flex;flex-direction:column;gap:9px;padding-bottom:8px;margin-top:auto}
.progress-dots{display:flex;gap:6px;justify-content:center;margin:8px 0}
.pdot{width:7px;height:7px;border-radius:50%;background:#242c3a}
.pdot.done{background:var(--brand)}
.pdot.cur{border:1px solid var(--brand);background:transparent}

/* archetype / final */
.arch-card{margin:10px 0 4px;padding:16px;text-align:center}
.arch-label{font-size:10px;letter-spacing:.3em;color:var(--ink-faint)}
.arch-name{font-family:var(--disp);font-weight:900;font-size:24px;color:var(--brand);margin-top:6px}
.arch-desc{font-size:12px;color:var(--ink-dim);margin-top:6px}
.share-note{font-size:10px;letter-spacing:.14em;color:var(--ink-faint);min-height:14px;margin-top:6px}

/* count-up helper */
.countup{display:inline-block;font-variant-numeric:tabular-nums}

/* ============ v0.2 ============ */

/* Fix: centered text with letter-spacing drifts left (trailing space).
   text-indent equal to the spacing recenters it. */
.res-title{text-indent:.3em}
.res-stars{text-indent:.28em}
.prevbest{text-indent:.16em}
.newbest{text-indent:.2em}
.arch-label{text-indent:.3em}
.cogcard .tiny{text-indent:.14em}
.home-foot{text-indent:.2em}
.nm-vs{text-indent:.3em}
.sq-label{text-indent:.22em}
.pz-hint{text-indent:.16em}
.daily-sub{text-indent:.14em}
.share-note{text-indent:.14em}
.res-game{text-indent:.02em}

/* result polish */
.res-head{padding-top:26px}
.res-score{margin:16px 0 6px;letter-spacing:.01em}
.res-stars{margin-bottom:16px}
.res-stats{padding:4px 14px}
.res-stat{padding:10px 2px}
.res-stat .v{color:var(--ink)}
.result .card{border-top:2px solid var(--c,var(--line))}

/* ---------- name gate v2 ---------- */
.gate{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100%;gap:0;padding:24px 8px}
.gate-tag{font-size:10px;letter-spacing:.34em;text-indent:.34em;color:var(--ink-faint);animation:gateIn .5s ease both}
.gate-logo{font-family:var(--disp);font-weight:900;font-size:56px;line-height:1.1;color:var(--ink);margin-top:10px;animation:gateIn .5s .08s ease both}
.gate-cursor{display:inline-block;width:.42em;height:.85em;background:var(--brand);margin-left:6px;vertical-align:-.06em;animation:blink 1.1s steps(1) infinite;box-shadow:0 0 22px rgba(200,255,46,.5)}
.gate-sub{font-size:13px;color:var(--ink-dim);margin-top:6px;animation:gateIn .5s .16s ease both}
.gate-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:22px;animation:gateIn .5s .24s ease both}
.gate-chip{
  font-size:9.5px;letter-spacing:.14em;padding:6px 9px;border-radius:3px;
  color:var(--c);border:1px solid color-mix(in srgb,var(--c) 45%,transparent);
  background:color-mix(in srgb,var(--c) 8%,transparent);
}
@supports not (color: color-mix(in srgb, red, blue)){ .gate-chip{border:1px solid var(--line2);background:var(--panel)} }
.gate-meta{font-size:10px;letter-spacing:.22em;text-indent:.22em;color:var(--ink-faint);margin-top:12px;animation:gateIn .5s .32s ease both}
.gate-form{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:30px;animation:gateIn .5s .4s ease both}
.gate-label{font-size:10px;letter-spacing:.26em;text-indent:.26em;color:var(--ink-dim)}
.gate-form .gate-input{width:min(320px,92%)}
.gate-hint{font-size:10.5px;color:var(--ink-faint);max-width:300px;line-height:1.5;min-height:16px}
.gate-err{color:var(--bad);letter-spacing:.06em}
.gate-go{max-width:320px;margin-top:4px}
@keyframes gateIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- home: ability groups ---------- */
.attr-group{margin-top:16px}
.attr-group-head{display:flex;align-items:center;gap:8px;padding:0 2px 8px}
.agh-dot{width:8px;height:8px;background:var(--c);box-shadow:0 0 10px var(--c)}
.agh-name{font-family:var(--disp);font-weight:700;font-size:11.5px;letter-spacing:.18em;color:var(--c)}
.agh-line{flex:1;height:1px;background:var(--line);opacity:.8}
.agh-best{font-size:10px;letter-spacing:.1em;color:var(--ink-faint)}
.g-classic{font-size:8px;letter-spacing:.16em;color:#0a0c10;background:var(--c);padding:2px 5px;border-radius:2px;vertical-align:2px;margin-left:5px;font-weight:700}
.game-item .g-attr{letter-spacing:.02em;text-transform:none;font-size:10.5px;color:var(--ink-faint)}
.attr-group:last-of-type{padding-bottom:6px}

/* ---------- rooms ---------- */
.room-card{margin-bottom:14px;padding:13px 14px}
.room-label{margin-bottom:9px}
.room-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.room-name{font-family:var(--disp);font-weight:700;font-size:15px}
.room-code{font-weight:700;letter-spacing:.24em;text-indent:.12em;font-size:13px;color:#0a0c10;background:var(--brand);padding:4px 9px;border-radius:3px;box-shadow:0 0 16px rgba(200,255,46,.25)}
.room-row{display:flex;gap:8px}
.room-btn{padding:11px 10px;font-size:12px}
.room-zone{margin-top:8px}
.room-zone-row{display:flex;gap:8px;align-items:stretch}
.room-input{flex:1;width:auto;padding:10px 10px;font-size:13px;text-align:left;text-transform:none}
.room-zone-row .room-btn{width:auto;flex:0 0 auto}
.room-err{font-size:10px;letter-spacing:.1em;color:var(--bad);min-height:14px;margin-top:7px}
.room-err .room-view{color:var(--brand)}
.room-note{font-size:10px;color:var(--ink-faint);margin-top:9px;line-height:1.5}

/* ============ v0.2 game modules (merged from css-snippets) ============ */

/* ---- chase ---- */
/* ---------- chase (CHASE TAP) ---------- */
.ch-stage{touch-action:none;cursor:crosshair}
.ch-orb{position:absolute;left:0;top:0;z-index:2;will-change:transform;pointer-events:none}
.ch-core{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#8fefff,var(--reaction) 60%,#0891b2);
  box-shadow:0 0 34px rgba(69,227,255,.5),inset 0 0 16px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;
}
.ch-core::after{content:"";width:16%;height:16%;border-radius:50%;background:#062a33}
.ch-core.ch-spawn{animation:chSpawn .12s ease both}
@keyframes chSpawn{from{transform:scale(.35);opacity:.2}to{transform:scale(1);opacity:1}}
.ch-core.ch-out{transition:transform .3s ease,opacity .3s ease;transform:scale(.3);opacity:0}
.ch-pop{
  position:absolute;z-index:3;pointer-events:none;border-radius:50%;
  border:2px solid var(--reaction);
  box-shadow:0 0 18px rgba(69,227,255,.45);
  animation:chPop .42s ease-out both;
}
@keyframes chPop{
  from{opacity:.9;transform:translate(-50%,-50%) scale(.7)}
  to{opacity:0;transform:translate(-50%,-50%) scale(2)}
}
.hv.ch-low{color:var(--bad)}

/* ---- gonogo ---- */
/* ---------- gonogo (SIGNAL) — Go/No-Go impulse test ---------- */
.gng-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;width:100%;padding:12px;pointer-events:none}
.gng-circle{
  width:150px;height:150px;border-radius:50%;position:relative;
  border:2px solid var(--line2);background:rgba(255,255,255,.02);
  display:flex;align-items:center;justify-content:center;
}
.gng-circle::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line2)}
.gng-go{
  border-color:transparent;
  background:radial-gradient(circle at 38% 32%,#b9ffdf,var(--good) 60%,#0d9058);
  box-shadow:0 0 46px rgba(77,255,166,.55),inset 0 0 20px rgba(255,255,255,.25);
  animation:gngPop .08s ease both;
}
.gng-go::before{background:#06331e}
.gng-nogo{
  border-color:transparent;
  background:radial-gradient(circle at 38% 32%,#ffa9ba,var(--bad) 60%,#9c1136);
  box-shadow:0 0 46px rgba(255,84,112,.5),inset 0 0 20px rgba(255,255,255,.2);
  animation:gngPop .08s ease both;
}
.gng-nogo::before{display:none}
.gng-nogo::after{ /* prohibition X — readable without color */
  content:"";position:absolute;width:62px;height:62px;
  background:
    linear-gradient(45deg,transparent 44%,#33071a 44%,#33071a 56%,transparent 56%),
    linear-gradient(135deg,transparent 44%,#33071a 44%,#33071a 56%,transparent 56%);
}
.gng-hit{animation:gngHit .32s ease both}
.gng-dim{opacity:.4;box-shadow:none}
.gng-ok{border-color:var(--good);box-shadow:0 0 26px rgba(77,255,166,.22)}
.gng-ok::before{background:var(--good);box-shadow:0 0 10px rgba(77,255,166,.8)}
.gng-hint{
  min-height:36px;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-faint);
}
.gng-hint.gng-wait{animation:gngPulse 1.4s ease infinite}
.gng-hint.gng-ms{
  font-family:var(--disp);font-weight:900;font-size:30px;letter-spacing:.02em;
  text-transform:none;color:var(--reaction);font-variant-numeric:tabular-nums;
}
.gng-hint.gng-held{color:var(--good);text-shadow:0 0 14px rgba(77,255,166,.4)}
.gng-hint.gng-err{color:var(--bad)}
@keyframes gngPop{from{transform:scale(.55);opacity:.4}to{transform:scale(1);opacity:1}}
@keyframes gngHit{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes gngPulse{50%{opacity:.35}}

/* ---- stroop ---- */
/* ---------- stroop / color clash ---------- */
.str-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:12px 14px}
.str-prompt{font-size:10px;letter-spacing:.3em;color:var(--ink-faint);text-transform:uppercase}
.str-word{
  font-family:var(--disp);font-weight:900;font-size:clamp(34px,11vw,46px);letter-spacing:.05em;
  min-height:70px;display:flex;align-items:center;justify-content:center;
  text-shadow:0 0 26px currentColor;
  animation:strPop .14s ease both;
}
@keyframes strPop{from{transform:scale(.72);opacity:0}to{transform:scale(1);opacity:1}}
.str-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:4px}
.str-btn{
  font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:.14em;
  min-height:64px;padding:13px 8px;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  transition:transform .06s ease;
}
.str-btn:active{transform:translateY(2px)}
.str-key{display:block;font-size:9px;letter-spacing:.2em;color:var(--ink-faint);margin-top:4px}
.str-good{outline:2px solid var(--good)}
.str-bad{outline:2px solid var(--bad)}

/* ---- oddone ---- */
/* ---------- odd one out ---------- */
.odd-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%;padding:14px}
.odd-hint{font-size:10.5px;letter-spacing:.16em;color:var(--ink-faint);text-transform:uppercase}
.odd-grid{display:grid;gap:4px;touch-action:none}
.odd-tile{
  width:var(--tile);height:var(--tile);border-radius:calc(var(--tile)*.22);
  cursor:pointer;position:relative;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);
}
.odd-tile:active{filter:brightness(1.12)}
/* rotation rounds: one sharp corner + inner notch give every tile an orientation */
.odd-grid.odd-notch .odd-tile{
  border-radius:calc(var(--tile)*.34) calc(var(--tile)*.34) calc(var(--tile)*.34) 2px;
}
.odd-grid.odd-notch .odd-tile::after{
  content:"";position:absolute;left:13%;bottom:13%;width:20%;height:20%;
  border-radius:50%;background:rgba(10,12,16,.5);
}
.odd-tile.odd-good{animation:oddPop .5s ease both;z-index:2}
@keyframes oddPop{
  0%{box-shadow:0 0 0 0 rgba(77,255,166,.85)}
  100%{box-shadow:0 0 0 12px rgba(77,255,166,0)}
}
.odd-tile.odd-bad{box-shadow:0 0 0 2px var(--bad),0 0 14px rgba(255,84,112,.45);z-index:2}
.odd-tile.odd-reveal{box-shadow:0 0 0 2px var(--ink),0 0 18px rgba(232,237,244,.45);z-index:2}
.odd-lives{display:flex;gap:6px}
.odd-life{width:8px;height:8px;border-radius:50%;border:1px solid var(--line2);background:transparent}
.odd-life.lost{background:var(--bad);border-color:var(--bad);box-shadow:0 0 8px rgba(255,84,112,.5)}

/* ---- gridflash ---- */
/* ---------- gridflash / position flash ---------- */
.gf-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:12px}
.gf-label{font-size:10px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase;min-height:14px}
.gf-grid{display:grid;gap:7px;touch-action:manipulation}
.gf-cell{
  width:var(--cell);height:var(--cell);border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line2);
  cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s;
}
.gf-cell:active{transform:scale(.96)}
.gf-cell.lit{
  background:var(--memory);border-color:var(--memory);
  box-shadow:0 0 18px rgba(183,139,255,.55),inset 0 0 10px rgba(255,255,255,.18);
  animation:gfPop .12s ease both;
}
.gf-cell.found{
  background:var(--memory);border-color:var(--memory);
  box-shadow:0 0 12px rgba(183,139,255,.4);
  animation:gfPop .14s cubic-bezier(.2,1.5,.4,1) both;
}
.gf-cell.reveal{
  background:rgba(183,139,255,.16);border-color:var(--memory);
  color:var(--memory);
}
.gf-cell.err{
  background:rgba(255,84,112,.22);border-color:var(--bad);
  box-shadow:0 0 12px rgba(255,84,112,.45);
}
@keyframes gfPop{from{transform:scale(.82)}to{transform:scale(1)}}

/* ---- nback ---- */
/* ---------- repeat radar (nback) ---------- */
.nb-wrap{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:14px;gap:8px}
.nb-rule{font-size:10px;letter-spacing:.26em;color:var(--ink-faint);text-transform:uppercase;padding-top:6px}
.nb-rule.two{color:var(--memory);text-shadow:0 0 12px rgba(183,139,255,.35)}
.nb-zone{flex:1;display:flex;align-items:center;justify-content:center;width:100%}
.nb-ring{
  width:min(216px,58vw);aspect-ratio:1;border-radius:50%;position:relative;
  border:1px dashed var(--line2);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .18s,box-shadow .18s;
}
.nb-ring::before,.nb-ring::after{
  content:"";position:absolute;left:50%;width:2px;height:7px;margin-left:-1px;background:var(--line2);
}
.nb-ring::before{top:-4px}
.nb-ring::after{bottom:-4px}
.nb-ring.two{border-color:rgba(183,139,255,.45)}
.nb-ring.hit{border-color:var(--good);box-shadow:0 0 30px rgba(77,255,166,.22)}
.nb-ring.err{border-color:var(--bad);box-shadow:0 0 30px rgba(255,84,112,.22)}
.nb-hold{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.nb-sym{font-size:clamp(64px,23vw,92px);line-height:1;animation:nbPop .1s ease both}
.nb-sym.got{transform:scale(1.13);transition:transform .12s ease}
@keyframes nbPop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.nb-g0{color:var(--reaction);text-shadow:0 0 26px rgba(69,227,255,.4)}
.nb-g1{color:var(--focus);text-shadow:0 0 26px rgba(255,193,69,.4)}
.nb-g2{color:var(--memory);text-shadow:0 0 26px rgba(183,139,255,.4)}
.nb-g3{color:var(--control);text-shadow:0 0 26px rgba(77,255,166,.4)}
.nb-g4{color:var(--logic);text-shadow:0 0 26px rgba(255,107,139,.4)}
.nb-match{
  font-family:var(--mono);font-weight:700;font-size:17px;letter-spacing:.16em;
  width:100%;min-height:72px;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--memory);color:var(--memory);
  background:rgba(183,139,255,.07);
  transition:transform .05s ease,background .12s,opacity .2s;
  touch-action:manipulation;
}
.nb-match:active{transform:translateY(2px);background:rgba(183,139,255,.22)}
.nb-match.off{opacity:.28;pointer-events:none}
.nb-key{display:block;font-size:9px;letter-spacing:.22em;color:var(--ink-faint);margin-top:4px;font-weight:400}
.nb-card{
  position:absolute;inset:0;z-index:7;padding:24px;text-align:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;
  background:rgba(10,12,16,.93);
  animation:screenIn .25s ease both;
}
.nb-phase{font-size:10px;letter-spacing:.3em;color:var(--ink-faint);text-transform:uppercase}
.nb-big{font-family:var(--disp);font-weight:900;font-size:36px;color:var(--memory);text-shadow:0 0 30px rgba(183,139,255,.35)}
.nb-desc{font-size:13px;color:var(--ink-dim);max-width:280px;line-height:1.55}
.nb-desc b{color:var(--ink)}
.nb-ex{
  display:flex;align-items:center;gap:12px;font-size:25px;
  padding:10px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
}
.nb-ex .eq{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--good);font-weight:700}
.nb-go{font-size:11px;letter-spacing:.3em;color:var(--brand);font-weight:700;animation:pulse 1.1s ease infinite;min-height:16px}
.hv.nb-rule2{color:var(--memory)}

/* ---- beat ---- */
/* ---------- beat keeper ---------- */
.bt-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%;padding:14px}
.bt-label{
  font-size:11px;letter-spacing:.26em;color:var(--ink-faint);text-transform:uppercase;
  font-weight:700;min-height:16px;transition:color .15s;
}
.bt-label.bt-keep{color:var(--control);text-shadow:0 0 14px rgba(77,255,166,.35)}
.bt-pad{
  width:min(64vw,240px);aspect-ratio:1;border-radius:50%;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:radial-gradient(circle at 40% 34%,#182231,var(--bg2) 72%);
  border:2px solid var(--line2);
  box-shadow:0 0 0 rgba(77,255,166,0),inset 0 0 30px rgba(0,0,0,.5);
  transition:transform .09s ease,box-shadow .13s ease,border-color .13s ease;
  will-change:transform;touch-action:manipulation;
}
.bt-pad.bt-on{ /* guide pulse: scale + glow */
  transform:scale(1.07);border-color:var(--control);
  box-shadow:0 0 48px rgba(77,255,166,.55),inset 0 0 26px rgba(77,255,166,.16);
}
.bt-pad.bt-press{transform:scale(.965);border-color:var(--control)}
.bt-bpm{font-family:var(--disp);font-weight:900;font-size:44px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.bt-bpmlab{font-size:9px;letter-spacing:.32em;color:var(--ink-faint);text-indent:.32em}
.bt-dev{
  font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:.06em;
  min-height:25px;font-variant-numeric:tabular-nums;color:var(--ink-dim);
}
.bt-dots{display:flex;gap:7px;min-height:10px}
.bt-dot{width:9px;height:9px;border-radius:50%;background:#242c3a;transition:background .12s,box-shadow .12s}
.bt-dot.bt-lit{background:var(--control);box-shadow:0 0 8px rgba(77,255,166,.5)}
.bt-dot.bt-lit.bt-mid{background:var(--focus);box-shadow:0 0 8px rgba(255,193,69,.45)}
.bt-dot.bt-lit.bt-bad{background:var(--bad);box-shadow:0 0 8px rgba(255,84,112,.45)}
/* tint helpers — used on .bt-dev and HUD .hv values */
.bt-good{color:var(--good)}
.bt-mid{color:var(--focus)}
.bt-bad{color:var(--bad)}

/* ---- arrows ---- */
/* ---------- arrows / direction lock ---------- */
.ar-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:12px 14px}
.ar-glyph{
  width:128px;height:128px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid transparent;
  transition:border-color .1s ease,box-shadow .1s ease;
}
.ar-arrow{
  font-size:72px;line-height:1;color:var(--ink);
  text-shadow:0 0 26px rgba(232,237,244,.3);
  animation:arPop .1s ease both;
}
@keyframes arPop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.ar-glyph.ar-inv{
  border-color:rgba(255,84,112,.45);
  box-shadow:0 0 26px rgba(255,84,112,.18),inset 0 0 20px rgba(255,84,112,.08);
}
.ar-glyph.ar-inv .ar-arrow{color:var(--bad);text-shadow:0 0 26px rgba(255,84,112,.5)}
.ar-hint{font-size:9.5px;letter-spacing:.22em;color:var(--ink-faint);text-transform:uppercase}
.ar-hint .ar-w{color:var(--ink-dim);font-weight:700}
.ar-hint .ar-r{color:var(--bad);font-weight:700}
.ar-pad{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:64px;gap:9px;width:min(280px,86%);margin-top:4px}
.ar-btn{
  font-family:var(--mono);font-size:24px;line-height:1;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  min-width:56px;min-height:56px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .06s ease;
}
.ar-btn:active{transform:translateY(2px)}
.ar-btn.ar-up{grid-column:2;grid-row:1}
.ar-btn.ar-left{grid-column:1;grid-row:2}
.ar-btn.ar-down{grid-column:2;grid-row:2}
.ar-btn.ar-right{grid-column:3;grid-row:2}
.ar-good{outline:2px solid var(--good)}
.ar-bad{outline:2px solid var(--bad)}

/* ---- mathrush ---- */
/* ---------- math rush ---------- */
.mr-wrap{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%;padding:12px 14px}
.mr-expr{
  font-family:var(--disp);font-weight:900;font-size:clamp(24px,8vw,34px);letter-spacing:.03em;
  min-height:96px;max-width:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
  text-shadow:0 0 30px rgba(255,107,139,.22);
}
.mr-pop{animation:mrPop .14s ease both}
@keyframes mrPop{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.mr-btns{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:4px}
.mr-btn{
  font-family:var(--mono);font-weight:700;font-size:clamp(17px,5.4vw,21px);letter-spacing:.04em;
  min-height:64px;padding:12px 4px;cursor:pointer;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);color:var(--ink);
  font-variant-numeric:tabular-nums;
  transition:transform .06s ease;
}
.mr-btn:active{transform:translateY(2px)}
.mr-key{display:block;font-size:9px;letter-spacing:.2em;color:var(--ink-faint);margin-top:4px}
.mr-good{outline:2px solid var(--good)}
.mr-bad{outline:2px solid var(--bad)}
.mr-reveal{outline:2px dashed var(--good)}

/* ---- trail ---- */
/* ---------- trail sprint ---------- */
.tr-board{position:absolute;inset:0;touch-action:none;z-index:2}
.tr-hint{
  position:absolute;top:9px;left:0;right:0;z-index:1;text-align:center;
  font-size:10px;letter-spacing:.18em;color:var(--ink-faint);text-transform:uppercase;
  pointer-events:none;
}
.tr-node{
  position:absolute;width:48px;height:48px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;color:var(--ink);font-variant-numeric:tabular-nums;
  background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:opacity .28s ease,border-color .15s,color .15s,background .15s;
  animation:trIn .18s ease both;animation-delay:var(--d,0ms);
}
@keyframes trIn{from{transform:scale(.45);opacity:0}to{transform:scale(1);opacity:1}}
.tr-node.done{
  pointer-events:none;
  background:rgba(255,107,139,.16);border-color:var(--logic);color:var(--logic);
  opacity:.38;box-shadow:none;
  animation:trPop .22s ease both;
}
@keyframes trPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}}
.tr-node.tr-wrong{border-color:var(--bad);color:var(--bad);animation:trShake .3s ease}
@keyframes trShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}60%{transform:translateX(5px)}}
.hud .hv.tr-next{color:var(--logic)}
.hud .hv.tr-err{color:var(--bad)}