/* ============================================================================
   Aim Trainer — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — lime, measured against base.css surfaces (WCAG relative luminance):
     dark  #c9ef61  14.4:1 on --bg   13.3:1 on --surface   14.9:1 on --bg-sunk
     light #5b6f25   5.4:1 on --bg    5.6:1 on --surface    4.9:1 on --bg-sunk
   All six clear the 4.5:1 text floor.
   ========================================================================= */
:root { --accent: #c9ef61; --accent-dim: rgba(201, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #5b6f25; --accent-dim: rgba(91, 111, 37, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: none; stroke: var(--on-accent); }
.brand svg .mark-fg-dot { fill: var(--on-accent); }

/* base has no visually-hidden helper; the live region and result heading need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Setup — mode / duration / size pickers
   ========================================================================= */

.aim-tool { margin-bottom: 2.5rem; }

.setup-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 0.9rem 1.5rem;
  margin-bottom: 1rem;
}
.setting-group { display: grid; gap: 0.4rem; }

.best-line {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  margin: 0 0 1rem;
}
.best-line strong { color: var(--text); }

/* ============================================================================
   Arena — the play area
   A recessed console (--bg-sunk) that holds the targets. Fixed aspect ratio
   keeps it usable and bounded at any viewport width, including the 500px
   floor headless Chrome uses for layout.
   ========================================================================= */

.arena-wrap { margin-bottom: 1rem; }

.arena {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  min-height: 16rem;
  max-height: 30rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
}
.arena[data-status="finished"] { cursor: default; }

.arena-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
  padding: 1.5rem;
  background: color-mix(in srgb, var(--bg-sunk) 88%, transparent);
}
.arena-title {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.5rem);
  font-weight: 700;
  margin: 0;
}

/* the target itself: a filled, high-contrast bullseye — deliberately not
   the tool's lime accent, which would be hard to see against a light-mode
   panel and is already doing double duty as UI chrome elsewhere on the page */
.target {
  position: absolute;
  display: block;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at 50% 50%,
      #ffffff 0%, #ffffff 18%,
      #e0304a 18%, #e0304a 38%,
      #ffffff 38%, #ffffff 58%,
      #e0304a 58%, #e0304a 100%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
}
.target:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .target { animation: target-pop 0.1s ease-out; }
}
@keyframes target-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
/* base.css already neutralises all animation/transition durations under
   prefers-reduced-motion: reduce; this is a belt-and-braces guard specific
   to the one keyframe this file adds, so nothing here depends on that
   global rule alone. */
@media (prefers-reduced-motion: reduce) {
  .target { animation: none; }
}

/* ---------------------------------------------------------------- live -- */

.live-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 30rem) { .live-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.live-stats .stat-value {
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
  color: var(--accent);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }

/* -------------------------------------------------------------- results -- */

.results {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: 1rem;
}

.results .stat-value {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1, "zero" 1;
}
.results .res-accuracy .stat-value {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 2.75rem);
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
}

.new-best { display: inline-flex; margin-top: 0.85rem; }

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

.mouse-only-note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--text);
  font-size: 0.9375rem;
  margin: 0 0 1.5rem;
}