/* ==========================================================================
   CPS Tester — Core Test Interface
   Shared visual system for every interactive test (click, reaction, aim,
   mouse, keyboard). Keep this file free of page-specific rules.
   ========================================================================== */

/* Tool layout: main column (stats, pad, result) + a "Select time" /
   "More tools" sidebar, the same arrangement high-traffic CPS sites use —
   people see the pad first and the controls beside it. */
.tool-layout{
  display:grid;
  gap:var(--space-4);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .tool-layout{grid-template-columns:minmax(0,1fr) 280px;gap:var(--space-5);}
}
.tool{min-width:0;}
.tool__main,.test-panel{
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:var(--space-3);
  min-width:0;
  contain:layout style;
}
@media (min-width:480px){.tool__main,.test-panel{padding:var(--space-4);}}
@media (min-width:768px){.tool__main,.test-panel{padding:var(--space-5);}}

.tool__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-4);
  margin-bottom:var(--space-3);
}
.tool__title{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-lg);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-secondary);
}

/* ---------- Sidebar cards ---------- */
.side-card{
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-lg);
  padding:var(--space-4);
}
.side-card + .side-card{margin-top:var(--space-4);}
.side-card__title{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--fs-base);
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-align:center;
  margin-bottom:var(--space-3);
}
.select-time{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);}
@media (min-width:900px){.select-time{grid-template-columns:minmax(0,1fr);}}
.select-time__btn{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;
  padding:9px 10px;
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-primary);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-sm);
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-align:center;
  transition:background var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out);
}
.select-time__btn:hover{background:var(--surface-card-hover);}
.select-time__btn[aria-pressed="true"],.select-time__btn[aria-current="page"]{
  background:var(--grad-orange);
  border-color:transparent;
  color:var(--text-on-accent);
}
.select-time__btn:disabled{opacity:0.5;cursor:not-allowed;}
.side-list{display:flex;flex-direction:column;}
.side-list a{
  display:flex;align-items:center;gap:10px;
  padding:9px 4px;
  border-bottom:1px dashed var(--surface-border);
  font-size:var(--fs-sm);
  color:var(--text-secondary);
}
.side-list a:last-child{border-bottom:0;}
.side-list a:hover{color:var(--color-accent-400);}
.side-list svg{width:16px;height:16px;color:var(--color-accent-400);}

/* Legacy pill selector (kept for the spacebar test). */
.option-select{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-5);}
.option-select__btn{
  padding:9px 16px;
  border-radius:var(--radius-md);
  border:1px solid var(--surface-border);
  background:var(--surface-card);
  color:var(--text-secondary);
  font-family:var(--font-heading);
  font-weight:700;
  letter-spacing:0.03em;
  font-size:var(--fs-sm);
  transition:all var(--duration-fast) var(--ease-out);
}
.option-select__btn:hover{color:var(--text-primary);}
.option-select__btn[aria-pressed="true"]{background:var(--grad-orange);border-color:transparent;color:var(--text-on-accent);}
.option-select__btn:disabled{opacity:0.4;cursor:not-allowed;}

/* ---------- Stat pills: one signature gradient each ---------- */
/* minmax(0,1fr) lets a column shrink below its content width — plain 1fr
   columns refuse to, which is what pushed long values past the panel edge. */
.test-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-4);
  text-align:center;
}
@media (min-width:640px){.test-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3);}}
.test-stats.test-stats--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.test-stats.test-stats--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.test-stats__item{
  min-width:0;
  padding:var(--space-3) var(--space-1);
  border-radius:var(--radius-md);
  background:var(--grad-purple);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.test-stats__item:nth-child(4n+2){background:var(--grad-orange);color:var(--text-on-accent);}
.test-stats__item:nth-child(4n+3){background:var(--grad-green);}
.test-stats__item:nth-child(4n+4){background:var(--grad-pink);}
@media (min-width:480px){.test-stats__item{padding-inline:var(--space-2);}}
.test-stats__value{
  font-family:var(--font-heading);
  font-size:clamp(1.15rem,0.85rem + 1.6vw,1.75rem);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  white-space:nowrap;
}
.test-stats--3 .test-stats__value{font-size:clamp(0.95rem,0.5rem + 2.6vw,1.6rem);}
.test-stats__label{
  font-family:var(--font-heading);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  opacity:0.92;
  margin-top:2px;
  overflow-wrap:anywhere;
}
@media (min-width:480px){.test-stats__label{font-size:12px;}}

/* ---------- Click pad (CPS / jitter / butterfly / drag / kohi / right) ---------- */
.click-zone{
  position:relative;
  width:100%;
  min-height:260px;
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  background:var(--surface-pad);
  border:1px solid var(--surface-border-strong);
  color:#fff;
  text-align:center;
  padding:var(--space-6);
  overflow:hidden;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  cursor:pointer;
  transition:transform 80ms var(--ease-out),border-color var(--duration-base) var(--ease-out);
}
@media (min-width:768px){.click-zone{min-height:340px;}}
.click-zone:hover{border-color:rgba(255,255,255,0.3);}
.click-zone:active{transform:scale(0.995);}
.click-zone::after{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(var(--color-brand-500-rgb),0.35),transparent 55%);
  opacity:0;
  transition:opacity var(--duration-fast) var(--ease-out);
  pointer-events:none;
}
.click-zone[data-state="active"]{border-color:rgba(255,160,77,0.6);}
.click-zone[data-state="active"]::after{opacity:1;}

.click-zone__label{
  font-family:var(--font-heading);
  font-size:var(--fs-2xl);
  font-weight:800;
  letter-spacing:0.05em;
  text-transform:uppercase;
}
.click-zone__sub{font-size:var(--fs-sm);color:var(--text-secondary);max-width:340px;}
.click-zone__counter{
  font-family:var(--font-heading);
  font-size:var(--fs-6xl);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.click-zone[data-state="idle"] .click-zone__counter{display:none;}
.click-zone[data-state="idle"] .click-zone__label{display:block;}
.click-zone[data-state="active"] .click-zone__label,
.click-zone[data-state="active"] .click-zone__sub{display:none;}
.click-zone[data-state="active"] .click-zone__counter{display:block;}
.click-zone[data-state="completed"]{display:none;}
.tool[data-has-result="true"] .test-stats,
.test-panel[data-has-result="true"] .test-stats{display:none;}
.test-panel[data-has-result="true"] .typing-passage,
.test-panel[data-has-result="true"] .typing-input,
.test-panel[data-has-result="true"] [data-typing-restart-wrap]{display:none;}


.click-zone__ring{
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:4px solid rgba(255,255,255,0.35);
  clip-path:inset(0 0 0 0);
}

/* Size is set from JS (≈ the zone's longest side) so the wave always
   sweeps the whole pad; a soft radial fill reads more refined than a
   flat disc. Only transform/opacity animate, so rapid clicking stays cheap. */
.click-ripple{
  position:absolute;
  width:var(--ripple-size,320px);height:var(--ripple-size,320px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,0) 38%,rgba(255,255,255,0.28) 62%,rgba(255,255,255,0.05) 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.4);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  will-change:transform,opacity;
  animation:click-ripple 720ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes click-ripple{
  0%{transform:translate(-50%,-50%) scale(0.05);opacity:0.95;}
  100%{transform:translate(-50%,-50%) scale(1);opacity:0;}
}

/* ---------- Result overlay ---------- */
.test-result{
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  padding:var(--space-6) var(--space-3);
  text-align:center;
  min-width:0;
  overflow-wrap:anywhere;
  animation:result-in var(--duration-slow) var(--ease-out);
}
@media (min-width:480px){.test-result{padding:var(--space-8) var(--space-6);}}
@keyframes result-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.test-result__badge{font-size:var(--fs-xl);margin-bottom:var(--space-2);}
.test-result__score{
  font-family:var(--font-heading);
  font-size:var(--fs-5xl);
  font-weight:800;
  background:var(--grad-orange);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  line-height:1;
  margin-bottom:var(--space-2);
}
.test-result__unit{font-size:var(--fs-lg);color:var(--text-muted);font-weight:600;margin-left:6px;-webkit-text-fill-color:var(--text-muted);}
.test-result__detail{color:var(--text-secondary);margin-bottom:var(--space-5);}
.test-result__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-6);
  text-align:left;
}
@media (min-width:480px){.test-result__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);}}
.test-result__stat{
  min-width:0;
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  border-radius:var(--radius-md);
  padding:var(--space-3);
}
.test-result__stat-value{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-base);}
.test-result__stat-label{font-size:10px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600;}
.test-result__pb{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  max-width:100%;
  gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-pill);
  background:rgba(245,158,11,0.12);
  color:var(--color-warning-400);
  font-weight:700;
  margin-bottom:var(--space-6);
}
.test-result__pb[data-new="true"]{background:rgba(34,197,94,0.15);color:var(--color-success-400);}
.test-result__actions{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-3);
  justify-content:center;
}
.test-result__actions .btn{white-space:normal;text-align:center;max-width:100%;}
@media (max-width:479px){.test-result__actions .btn{width:100%;}}
.test-result__xp{
  margin-top:var(--space-5);
  padding-top:var(--space-5);
  border-top:1px solid var(--surface-border);
}
.test-result__xp-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-2);font-size:var(--fs-sm);}
.test-result__level-up{
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--brand-gradient-soft);
  border:1px solid rgba(var(--color-brand-500-rgb),0.3);
  animation:level-pulse 900ms var(--ease-out);
}
@keyframes level-pulse{0%{transform:scale(0.96);opacity:0;}60%{transform:scale(1.02);}100%{transform:scale(1);opacity:1;}}

/* ---------- Share panel ---------- */
.share-panel{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-4);}
.share-btn{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--surface-raised);
  border:1px solid var(--surface-border);
  color:var(--text-secondary);
  transition:all var(--duration-fast) var(--ease-out);
}
.share-btn:hover{color:var(--text-primary);border-color:var(--color-brand-400);background:var(--surface-card-hover);}
.share-btn svg{width:18px;height:18px;}

/* ---------- Reaction test ---------- */
.reaction-stage{
  min-height:300px;
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--space-3);
  text-align:center;
  padding:var(--space-6);
  color:#fff;
  transition:background var(--duration-fast) linear;
  -webkit-user-select:none;user-select:none;
}
@media (min-width:768px){.reaction-stage{min-height:380px;}}
.reaction-stage[data-phase="idle"]{background:var(--surface-card);color:var(--text-primary);}
.reaction-stage[data-phase="waiting"]{background:var(--color-danger-500);}
.reaction-stage[data-phase="ready"]{background:var(--color-success-600);}
.reaction-stage[data-phase="too-soon"]{background:var(--color-warning-500);}
.reaction-stage[data-phase="result"]{background:var(--surface-card);color:var(--text-primary);}
.reaction-stage__big{font-family:var(--font-heading);font-size:var(--fs-3xl);font-weight:800;overflow-wrap:break-word;max-width:100%;}
.reaction-stage{min-width:0;}

/* ---------- Aim / target test ---------- */
.aim-stage{
  position:relative;
  width:100%;
  height:360px;
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  overflow:hidden;
  touch-action:none;
}
@media (min-width:768px){.aim-stage{height:440px;}}
.aim-target{
  position:absolute;
  width:44px;height:44px;
  border-radius:50%;
  background:var(--brand-gradient);
  box-shadow:0 6px 18px -4px rgba(var(--color-brand-500-rgb),0.6);
  transform:translate(-50%,-50%) scale(0);
  animation:target-in 140ms var(--ease-out) forwards;
}
@keyframes target-in{to{transform:translate(-50%,-50%) scale(1);}}
.aim-target:active{filter:brightness(1.2);}
.aim-stage__overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);
  background:rgba(8,9,13,0.7);
  backdrop-filter:blur(2px);
  text-align:center;
  padding:var(--space-6);
}

/* ---------- Mouse test ---------- */
.mouse-diagram{
  display:grid;
  gap:var(--space-3);
  grid-template-columns:repeat(2,1fr);
  max-width:360px;
  margin-inline:auto;
}
.mouse-btn{
  padding:var(--space-5) var(--space-3);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  text-align:center;
  font-weight:700;
  transition:all 80ms var(--ease-out);
}
.mouse-btn[data-active="true"]{background:var(--brand-gradient);border-color:transparent;color:#fff;transform:scale(0.97);}
.mouse-btn__count{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--text-muted);font-weight:600;}
.mouse-btn[data-active="true"] .mouse-btn__count{color:rgba(255,255,255,0.85);}

/* ---------- Scroll test ---------- */
.scroll-zone{
  height:220px;
  border-radius:var(--radius-lg);
  background:var(--surface-card);
  border:2px dashed var(--surface-border-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--text-muted);
  font-weight:600;
  overscroll-behavior:contain;
}

/* ---------- Keyboard / spacebar ---------- */
.key-cap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:120px;
  padding:var(--space-6) var(--space-8);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border-strong);
  border-bottom-width:4px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:var(--fs-lg);
  transition:all 60ms var(--ease-out);
}
.key-cap[data-active="true"]{
  transform:translateY(2px);
  border-bottom-width:1px;
  background:var(--brand-gradient);
  border-color:transparent;
  color:#fff;
}
.keys-log{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:center;
  margin-top:var(--space-4);
  max-height:120px;
  overflow-y:auto;
}
.keys-log .badge{font-family:var(--font-heading);}

/* ---------- Typing test ---------- */
.typing-passage{
  font-family:var(--font-body);
  font-size:clamp(1rem,0.9rem + 0.6vw,1.3125rem);
  font-weight:500;
  line-height:1.75;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  max-width:100%;
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  background:var(--surface-card);
  border:1px solid var(--surface-border);
  color:var(--text-muted);
  -webkit-user-select:none;
  user-select:none;
}
.typing-char--correct{color:var(--color-success-400);}
.typing-char--incorrect{color:#fff;background:rgba(239,68,68,0.55);border-radius:2px;}
.typing-char--current{color:var(--text-primary);border-bottom:2px solid var(--color-brand-400);}
.typing-char--pending{color:var(--text-muted);}
.typing-input{
  width:100%;
  margin-top:var(--space-4);
  padding:14px 18px;
  border-radius:var(--radius-md);
  background:var(--surface-raised);
  border:1px solid var(--surface-border-strong);
  color:var(--text-primary);
  font-size:var(--fs-base);
}
.typing-input:focus{border-color:var(--color-brand-400);}
.typing-input:disabled{opacity:0.6;}

/* ---------- Error / unsupported state ---------- */
[data-unsupported="true"] .click-zone,
[data-unsupported="true"] .reaction-stage,
[data-unsupported="true"] .aim-stage{display:none;}
.unsupported-notice{
  display:none;
  text-align:center;
  padding:var(--space-10) var(--space-6);
  color:var(--text-secondary);
}
[data-unsupported="true"] .unsupported-notice{display:block;}

/* ---------- Small helpers used by the newer tools ---------- */
.select-time--row{grid-template-columns:repeat(3,minmax(0,1fr));}
.polling-pad{cursor:crosshair;touch-action:none;min-height:220px;}
.dpi-pad{cursor:ew-resize;}

/* Calculators */
.calc__inputs{display:grid;gap:var(--space-3) var(--space-4);grid-template-columns:minmax(0,1fr);margin-bottom:var(--space-4);}
@media (min-width:640px){.calc__inputs{grid-template-columns:repeat(2,minmax(0,1fr));}}
.calc__inputs .form-field{margin-bottom:0;}
.calc__wide{grid-column:1 / -1;}

/* F1 start-lights */
.f1-pad{
  position:relative;
  border-radius:var(--radius-lg);
  background:var(--surface-pad);
  border:1px solid var(--surface-border-strong);
  padding:var(--space-8) var(--space-3) var(--space-6);
  text-align:center;
  cursor:pointer;
  -webkit-user-select:none;user-select:none;
  touch-action:manipulation;
  transition:background var(--duration-fast) linear,border-color var(--duration-fast) linear;
  min-width:0;
}
.f1-pad[data-phase="go"]{background:#0b3d1c;border-color:var(--color-success-500);}
.f1-pad[data-phase="false-start"]{background:#4a1111;border-color:var(--color-danger-500);}
.f1-gantry{display:flex;justify-content:center;gap:clamp(6px,2.5vw,18px);margin-bottom:var(--space-6);}
.f1-col{
  display:flex;flex-direction:column;gap:clamp(6px,1.6vw,12px);
  padding:clamp(6px,1.4vw,10px);
  border-radius:14px;
  background:#1b1b20;
  border:1px solid #34343c;
}
.f1-bulb{
  width:clamp(26px,9vw,58px);height:clamp(26px,9vw,58px);
  border-radius:50%;
  background:#2a1515;
  border:2px solid #3b2222;
  transition:background 60ms linear,box-shadow 60ms linear;
}
.f1-col[data-on="true"] .f1-bulb{background:#ff2a2a;border-color:#ff7676;box-shadow:0 0 18px 4px rgba(255,42,42,0.55);}
.f1-hint{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-lg);letter-spacing:0.03em;text-transform:uppercase;color:var(--text-secondary);}
.f1-pad[data-phase="go"] .f1-hint{color:#7dffa3;font-size:var(--fs-2xl);}