/* CPS skill family on the site shell: /cps-test/ (home.js, data-page="home")
   plus the timed modes (seconds/<n>/, data-seconds), infinite, jitter,
   butterfly, kohi and drag, which share its legacy markup. Loaded only via
   front.page.styles. Tokens only. The /seconds/ hub (no data-seconds) is
   deliberately out of scope: it has its own card layout. */

body[data-page="home"] > main > .container,
body[data-page="seconds"][data-seconds] > main > .container,
body[data-page="infinite"] > main > .container,
body[data-page="jitter"] > main > .container,
body[data-page="butterfly"] > main > .container,
body[data-page="kohi"] > main > .container,
body[data-page="drag"] > main > .container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-10);
}
body[data-page="home"] > main > .container > *,
body[data-page="seconds"][data-seconds] > main > .container > *,
body[data-page="infinite"] > main > .container > *,
body[data-page="jitter"] > main > .container > *,
body[data-page="butterfly"] > main > .container > *,
body[data-page="kohi"] > main > .container > *,
body[data-page="drag"] > main > .container > * { margin: 0 !important; }

/* ── Fatigue link ───────────────────────────────────────────────────── */
.fatigue-link-bar {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  min-block-size: var(--tap);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.fatigue-link-bar:hover { color: var(--text); }
.fatigue-link-bar i { transition: transform var(--dur-fast) var(--ease); }
.fatigue-link-bar:hover i { transform: translateX(3px); }
[dir="rtl"] .fatigue-link-bar:hover i { transform: translateX(-3px); }

/* ── Readouts ───────────────────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}
.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  text-align: center;
}
.stat-card.featured {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background:
    linear-gradient(var(--accent), var(--accent)) top / 100% 2px no-repeat padding-box,
    var(--surface-1);
}
.stat-label {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
  padding-block-start: 0.12em;
}
:lang(ar) .stat-label { letter-spacing: 0; }
.stat-main { display: flex; justify-content: center; }
.stat-value {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 600;
  line-height: 0.9;
  padding-block-start: 0.1em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat-value.highlight-text { color: var(--accent); }
.timer-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.arrow-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: var(--tap);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.arrow-btn:hover { background: var(--surface-2); color: var(--text); }
.arrow-btn:disabled { opacity: 0.4; cursor: not-allowed; }
[dir="rtl"] .arrow-btn i { transform: scaleX(-1); }

/* ── Click area ─────────────────────────────────────────────────────── */
/* A continuous two-pixel target edge stays the same width in every test state. */
#click-area {
  position: relative;
  display: grid;
  place-items: center;
  min-block-size: 260px;
  padding: var(--space-6) var(--space-4);
  isolation: isolate;
  overflow: hidden;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-1);
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform 60ms linear;
}
#click-area::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 55% at 50% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
  transition: opacity var(--dur-fast) var(--ease);
}
#click-area:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
#click-area:active { transform: translateY(1px); }
#click-area.active-state {
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 6%, var(--bg-raised));
}
#click-area.active-state::before { background: radial-gradient(ellipse 80% 70% at 50% 110%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%); }
.msg-content { pointer-events: none; }
#start-msg {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--text);
  text-transform: uppercase;
}
#click-area.active-state #start-msg { color: var(--accent); }
#sub-msg { margin-block-start: var(--space-2); color: var(--text-muted); }
@media (min-width: 768px) {
  .stats-grid { gap: var(--space-4); }
  .stat-card { padding: var(--space-4); }
  #click-area { min-block-size: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  #click-area, #click-area:active { transition: none; transform: none; }
}
/* Signature neon (tokens.css --neon, the section's full-saturation colour):
   used for live test feedback here; the shared activity surface supplies
   saturated idle readout edges. The glow appears only while a test runs. */
.stat-value.highlight-text { color: var(--neon); }
#click-area.active-state {
  border-color: var(--neon);
  box-shadow: 0 14px 38px -16px var(--neon), var(--shadow-1);
}
#click-area.active-state::before { background: radial-gradient(ellipse 80% 70% at 50% 110%, color-mix(in srgb, var(--neon) 30%, transparent), transparent 72%); }
#click-area.active-state #start-msg { color: var(--neon); }
.stats-grid:has(~ #click-area.active-state) .stat-value.highlight-text { text-shadow: 0 0 22px color-mix(in srgb, var(--neon) 50%, transparent); }

.stop-btn {
  align-self: center;
  min-block-size: var(--tap);
  padding-inline: var(--space-6);
  border: 1px solid color-mix(in srgb, var(--danger) 60%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 14%, var(--surface-1));
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.stop-btn:hover { background: color-mix(in srgb, var(--danger) 26%, var(--surface-1)); }

/* ── Boxes: rank, history, recommendations ──────────────────────────── */
.section-box {
  padding: var(--space-5);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
}
.teko-subtitle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--text);
}
.teko-subtitle i { font-size: 0.75em; color: var(--amber); }
.rank-neighbors { display: flex; flex-direction: column; gap: var(--space-1); }
.rank-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 40px;
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-variant-numeric: tabular-nums;
}
.rank-row:nth-child(odd) { background: var(--bg-raised); }
.rank-row--me { background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)) !important; color: var(--text); }
.rank-pos { color: var(--text-faint); font-weight: 600; }
.rank-name { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.rank-cps { color: var(--accent); font-weight: 600; }
.ghost-btn-sm {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 36px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.ghost-btn-sm:hover { border-color: var(--border-control); background: var(--surface-3); color: var(--text); }
.cps-rank-board-link { margin-block-start: var(--space-4); }
.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}
.history-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: var(--space-2);
}
.history-list > .muted { grid-column: 1 / -1; text-align: center; padding-block: var(--space-3); letter-spacing: 0.06em; }
.history-item {
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.history-cps {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--accent);
}
.history-meta { color: var(--text-muted); font-size: var(--step--1); }
.history-date { color: var(--text-faint); font-size: var(--step--1); }

/* ── Guide cards ────────────────────────────────────────────────────── */
.technique-item {
  margin-block-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
.technique-item strong { display: block; margin-block-end: var(--space-1); color: var(--text); }
.training-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin-block-start: var(--space-3);
}
.training-step-num {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--radius-pill);
  background: var(--surface-3);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1;
  padding-block-start: 0.12em;
}
.training-step .cps-rank-board-link { display: none; } /* stray duplicate link inside step 1 */

/* ── Result modal (home.js and the skill-family scripts) ─────────────── */
.close-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 1.6rem;
  line-height: 1;
}
.close-btn:hover { background: var(--surface-2); color: var(--text); }
.teko-title { font-family: var(--font-display); color: var(--text); }
.hero-score {
  font-family: var(--font-display);
  font-size: var(--step-5);
  font-weight: 600;
  line-height: 0.9;
  padding-block-start: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rank-badge {
  display: inline-flex;
  margin-block: var(--space-3);
  padding: var(--space-1) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: var(--radius-pill);
  color: var(--accent);
  font-weight: 600;
}
.full-width { inline-size: 100%; }

/* ── Narrow phones: three readouts must fit in ~105px cards ─────────── */
@media (max-width: 479px) {
  .stats-grid { gap: var(--space-2); }
  .stat-card { padding: var(--space-3) var(--space-1); }
  .stat-label { letter-spacing: 0.04em; }
  .stat-value { font-size: var(--step-3); }
  .timer-controls { gap: 0; }
  .arrow-btn { inline-size: 24px; font-size: 0.8rem; }
}

/* ── Skill-family extras (seconds/<n>, infinite, jitter, butterfly, kohi,
   drag): live graph, End/Stop button, rank and history markup the
   per-mode scripts render. ─────────────────────────────────────────── */
#graph-container { padding: var(--space-4); }
.graph-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-block-end: var(--space-3);
}
.graph-header > .teko-subtitle { margin: 0; }
.graph-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  color: var(--text-muted);
  font-size: var(--step--1);
}
.graph-stat strong { color: var(--accent); font-variant-numeric: tabular-nums; }
#cps-graph {
  display: block;
  inline-size: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}
:is(#stop-btn, #end-session-btn).glow-btn { align-self: center; inline-size: auto; min-inline-size: min(100%, 16rem); }
.rank-list { display: flex; flex-direction: column; gap: var(--space-1); }
.rank-list > p {
  padding: var(--space-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  text-align: center;
}
.section-box > .history-header .teko-subtitle { margin: 0; }
.history-section > .cps-rank-board-link,
.section-box > .cps-rank-board-link { display: inline-flex; }
.history-list > p.center { grid-column: 1 / -1; text-align: center; padding-block: var(--space-3); letter-spacing: 0.06em; }
.hist-main { display: flex; align-items: baseline; gap: var(--space-2); }
.hist-main strong {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  padding-block-start: 0.1em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.hist-meta { margin-block-start: var(--space-1); font-size: var(--step--1); }
.center { text-align: center; }

/* Press feedback on the click pad (jitter, butterfly, kohi, drag, infinite). */
.click-ripple {
  position: absolute;
  inline-size: 14px;
  block-size: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: cps-ripple 400ms var(--ease) forwards;
}
@keyframes cps-ripple {
  from { opacity: 0.9; transform: scale(1); }
  to { opacity: 0; transform: scale(4); }
}
@media (prefers-reduced-motion: reduce) {
  .click-ripple { animation: none; opacity: 0; }
}
main > .container > [data-device-survey-slot] .device-survey,
main > .container > .device-survey { max-inline-size: none; }

/* Give timer arrows full touch targets when three readouts become too tight. */
@media (max-width: 479px) and (pointer: coarse) {
  .stats-grid:has(.timer-controls) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid:has(.timer-controls) > .stat-card:first-child { grid-column: 1 / -1; }
  .timer-controls { gap: var(--space-4); }
  .arrow-btn { inline-size: var(--tap); }
}
/* Optional standalone CPS stage: enter before a run so the target never
   moves under the player's first timed click. Native and fallback share it. */
.cps-focus { display: flex; flex-direction: column; gap: var(--space-4); }
.cps-focus__toggle {
  position: absolute;
  inset-block-start: 3px;
  inset-inline-end: 3px;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--readout, var(--lime));
  font-size: 0;
  touch-action: manipulation;
}
.cps-focus__toggle::before { content: '\f065'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 1rem; }
.cps-focus__toggle[aria-pressed="true"]::before { content: '\f066'; }
.cps-focus__toggle:hover { background: color-mix(in srgb, var(--readout) 16%, transparent); }
.stat-card--controls { position: relative; padding-inline: 48px; }
@media (max-width: 600px) {
  .stat-card--controls { padding-inline: var(--space-2); padding-block-start: 44px; }
  .stats-grid:has(.stat-card--controls) > .stat-card:nth-child(2) { padding-block-start: 44px; }
}
.cps-focus.arcade-expanded {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  inline-size: 100%;
  max-inline-size: none;
  block-size: 100dvh;
  margin: 0;
  padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  isolation: isolate;
}
.cps-focus.arcade-expanded::backdrop { background: var(--bg); }

.cps-focus.arcade-expanded > :not(#click-area) { flex-shrink: 0; }
.cps-focus.arcade-expanded #click-area { flex: 1 0 140px; min-block-size: 140px; }
.cps-focus.arcade-expanded #stop-btn { margin-block: 0; }
.cps-focus.arcade-expanded #click-area.active-state #sub-msg { visibility: hidden; }
@media (max-width: 479px) { .cps-focus.arcade-expanded { padding-inline: max(var(--space-2), env(safe-area-inset-left)) max(var(--space-2), env(safe-area-inset-right)); } }

/* Color connects the readouts; an extra outer frame only repeats their edges. */
.stats-grid:has(+ #click-area) {
  gap: var(--space-3); padding: 0; overflow: visible;
  border: 0; border-radius: 0; background: none; box-shadow: none;
}
.stats-grid > .stat-card { --readout: var(--amber); }
.stats-grid > .stat-card:nth-child(2) { --readout: var(--cyan); }
.stats-grid > .stat-card:nth-child(3) { --readout: var(--lime); }
.stats-grid:has(+ #click-area) > .stat-card {
  border: 1px solid var(--readout); border-radius: var(--radius-md);
  background: linear-gradient(125deg, color-mix(in srgb, var(--readout) 21%, var(--bg-raised)), var(--bg-raised) 85%);
  box-shadow: none;
}
.stats-grid .stat-card :is(.stat-value, .stat-label, .arrow-btn) { color: var(--readout); }
.stats-grid .stat-label { font-family: var(--font-body); font-size: var(--step--1); font-weight: 650; letter-spacing: .02em; }
.stats-grid .stat-value { text-shadow: none; }
#click-area {
  border-color: color-mix(in srgb, var(--pink) 65%, var(--border));
  background: radial-gradient(ellipse at 50% 115%, color-mix(in srgb, var(--pink) 23%, transparent), transparent 68%), var(--bg-raised);
  box-shadow: none;
}
#click-area #start-msg { color: var(--pink); font-size: clamp(2.4rem, 5vw, 4.5rem); text-shadow: none; }
#click-area.active-state #start-msg { color: var(--cyan); }
#rank-section {
  --accent: var(--amber);
  display: flex; flex-direction: column; gap: var(--space-4);
  border: 2px solid color-mix(in srgb, var(--amber) 70%, var(--border));
  background: var(--surface-1);
}
#rank-section > :is(.teko-subtitle, .rank-list, .rank-neighbors) { margin: 0; }
#rank-section > a { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; max-inline-size: 100%; margin: 0; min-block-size: var(--tap); }
.history-section { --accent: var(--cyan); background: var(--surface-1); }
.history-header > .teko-subtitle { min-inline-size: 0; flex: 1; line-height: 1.2; }
.history-header > button { flex-shrink: 0; }
.history-section .ghost-btn-sm { min-block-size: var(--tap); }
.fatigue-link-bar {
  align-self: stretch; justify-content: flex-start; padding-block: var(--space-2);
  border-block-end: 1px solid var(--border); color: var(--cyan);
}
.fatigue-link-bar::before {
  content: '\f201'; display: grid; place-items: center; flex: none;
  inline-size: 40px; block-size: 40px; margin-inline-end: var(--space-1);
  border-radius: var(--radius-md); color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 16%, var(--bg-raised));
  font-family: 'Font Awesome 6 Free'; font-weight: 900;
}
.fatigue-link-bar > i { margin-inline-start: auto; }
@media (max-width: 479px) {
  .stats-grid:has(+ #click-area) { gap: var(--space-2); }
  .stats-grid .stat-label { font-size: clamp(.65rem, 2.9vw, .8rem); letter-spacing: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
}