/* PostSpar marketing site.
   Palette mirrors the app's dark theme (lib/theme/theme_primary/app_theme_dark.dart
   and lib/theme/boxing_colors.dart). Change them together. */

:root {
  /* The page is dark by design. Saying so stops the automatic dark modes in
     Chrome and Samsung Internet from running their own pass over it, which was
     washing the App Store badge from black to grey on Android and giving the
     number inputs light native chrome. Both back off when a page declares it
     has already handled dark. */
  color-scheme: dark;

  --bg: #0B0B0D;
  --surface: #1A1A1F;
  --surface-elevated: #26262D;
  --gold: #D4AF37;
  --gold-bright: #FFC53D;
  --on-gold: #1A1400;
  --boxer: #FF4B57;
  --coach: #2BB8FF;
  --text: #F5F5F7;
  --muted: #9A9AA5;
  --hairline: #2E2E36;

  --shell: 1160px;
  --gutter: 20px;
  --band-y: 64px;
}

@media (min-width: 720px) {
  :root { --gutter: 40px; --band-y: 104px; }
}

/* font-display: swap is deliberate. If Sen is slow or never arrives the text
   is still readable in whatever the device already has, which is the failure
   the canvas build could not survive. */
@font-face {
  font-family: 'Sen';
  src: url('fonts/Sen-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Sen';
  src: url('fonts/Sen-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Sen';
  src: url('fonts/Sen-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Sen', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--on-gold);
  padding: 12px 18px;
  font-weight: 700;
  z-index: 100;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 820px; }

/* ---------- Type ---------- */

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }

h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.1rem);
  letter-spacing: -1.4px;
  line-height: 1.04;
  max-width: 15ch;
}

h2 {
  font-size: clamp(2.1rem, 4.4vw, 3rem);
  letter-spacing: -0.8px;
  margin-bottom: 16px;
}

h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.2px; }

p { margin: 0; }

.eyebrow {
  margin: 0 0 14px;
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.2px;
  text-transform: uppercase;
}

.eyebrow--pill {
  display: inline-block;
  margin-bottom: 24px;
  padding: 7px 14px;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 100px;
  background: rgba(212, 175, 55, 0.12);
  letter-spacing: 1.8px;
}

.lede {
  margin-top: 20px;
  max-width: 52ch;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.6vw, 1.19rem);
}

.section-lede {
  margin-top: 4px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 1.06rem;
}

/* ---------- Top bar ---------- */

.topbar { padding-top: 22px; }

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark { width: auto; height: 30px; }

.topbar__cta {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__cta:hover { color: var(--gold-bright); }

@media (max-width: 719px) {
  .topbar__cta { display: none; }
  .wordmark { height: 26px; }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: 48px 56px;
  background: radial-gradient(circle at 22% 8%, #1E1A0E 0%, var(--bg) 62%);
}

@media (min-width: 720px) {
  .hero { padding-block: 72px 96px; }
}

.hero__inner { display: grid; gap: 44px; }

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 6fr 5fr;
    align-items: center;
    gap: 48px;
  }
}

.proof {
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.proof li {
  position: relative;
  padding-left: 25px;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
}

.proof li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

/* Two store panels, offset. They are already framed marketing images, so they
   need depth rather than a device mockup around them. */
.hero__art {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 420px;
}

@media (min-width: 1024px) {
  .hero__art { min-height: 520px; }
}

.hero__art img {
  width: clamp(150px, 46%, 252px);
  border-radius: 20px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.8);
}

/* Tuned so the panels only just overlap. Any closer and the back one loses
   its headline, which is the part doing the selling. */
.hero__art img:first-child {
  transform: translate(7%, 3%) rotate(-3.5deg) scale(0.88);
}

.hero__art img:last-child {
  position: relative;
  z-index: 1;
  transform: translate(-7%, -3%) rotate(3deg);
}

/* ---------- Bands ---------- */

.band { padding-block: var(--band-y); }
.band--surface { background: var(--surface); }

/* ---------- Cards ---------- */

.card {
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
}

.band--surface .card { background: var(--bg); }

.card__ordinal {
  display: block;
  margin-bottom: 14px;
  color: var(--gold);
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 1.5px;
}

.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 0.96rem; }

.loop {
  display: grid;
  gap: 20px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) { .loop { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .loop { grid-template-columns: repeat(4, 1fr); margin-top: 56px; }
}

/* ---------- Gallery ---------- */

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.gallery__head h2 { margin-bottom: 0; }

.gallery__arrows { display: none; gap: 10px; flex-shrink: 0; }

@media (min-width: 720px) {
  .gallery__arrows:not([hidden]) { display: flex; }
}

.arrow {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
}
.arrow:hover { background: #33333c; }

/* Runs past the content column on purpose: a strip that leaves the edge reads
   as scrollable without needing a hint. */
.gallery__strip {
  display: flex;
  gap: 18px;
  margin-top: 32px;
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.gallery__strip::-webkit-scrollbar { display: none; }

@media (min-width: 720px) { .gallery__strip { margin-top: 44px; } }

.gallery__strip img {
  height: 480px;
  width: auto;
  flex: 0 0 auto;
  border-radius: 18px;
  scroll-snap-align: center;
  cursor: zoom-in;
}

@media (min-width: 720px) { .gallery__strip img { height: 620px; } }

/* ---------- Roles ---------- */

.roles { display: grid; gap: 20px; margin-top: 36px; }

@media (min-width: 1024px) {
  .roles { grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 52px; }
}

.role { padding: 30px; }

.role__label {
  position: relative;
  margin: 0 0 18px;
  padding-left: 20px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.role__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.role--boxer .role__label { color: var(--boxer); }
.role--boxer .role__label::before { background: var(--boxer); }
.role--coach .role__label { color: var(--coach); }
.role--coach .role__label::before { background: var(--coach); }

.role h3 { font-size: clamp(1.35rem, 2.4vw, 1.65rem); font-weight: 800; }

.role ul { margin: 22px 0 0; padding: 0; list-style: none; }

.role li {
  position: relative;
  margin-bottom: 14px;
  padding-left: 20px;
  color: var(--muted);
  font-size: 0.97rem;
}

.role li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
}

.role--boxer li::before { background: rgba(255, 75, 87, 0.75); }
.role--coach li::before { background: rgba(43, 184, 255, 0.75); }

/* ---------- Features ---------- */

.features { display: grid; gap: 34px 28px; margin-top: 36px; }

@media (min-width: 720px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .features { grid-template-columns: repeat(4, 1fr); margin-top: 52px; }
}

.feature h3 { font-size: 1.12rem; margin-bottom: 10px; }

.feature h3::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--gold);
}

.feature p { color: var(--muted); font-size: 0.94rem; }

/* ---------- FAQ ---------- */

.faq { margin-top: 28px; }

@media (min-width: 720px) { .faq { margin-top: 40px; } }

.faq details {
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s ease;
}

.faq details[open] summary::after {
  border-color: var(--gold);
  transform: rotate(225deg) translate(-2px, -2px);
}

.faq details p {
  padding: 0 22px 20px;
  color: var(--muted);
  font-size: 0.98rem;
}

/* ---------- Closing ---------- */

.closing {
  padding-block: 72px;
  text-align: center;
  background: radial-gradient(circle at 50% 60%, #221D0F 0%, var(--bg) 70%);
}

@media (min-width: 720px) { .closing { padding-block: 116px; } }

.closing h2 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); }
.closing .lede { margin-inline: auto; }
.closing .store-buttons { justify-content: center; margin-top: 36px; }

/* ---------- Store buttons ---------- */

.store-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}

@media (min-width: 1024px) { .store-buttons { margin-top: 36px; } }

.store-badge { display: inline-block; transition: transform 0.14s ease; }
.store-badge:hover { transform: scale(1.03); }
.store-badge img { display: block; height: 62px; width: auto; }

/* Google's badge is not the same shape as the file it arrives in. Their asset
   bakes the mandated clear space into the image: 41px of transparent margin on
   every side of a 646x250 canvas, leaving artwork of 564x168. Apple's SVG fills
   its viewBox edge to edge.

   So an equal `height` on both is not an equal badge. At 62px Google's pill
   comes out 41.7px tall against Apple's 62px, which is the sort of mismatch you
   see immediately and cannot explain from the markup.

   Scaling by 250/168 makes the two lockups optically the same size. The extra
   height is Google's own transparent margin, so the negative block margin pulls
   the box back to 62px and the row keeps its alignment. Neither vendor file is
   touched, which is what both sets of brand guidelines ask for, and the flex gap
   still honours the clear space. */
/* The clear space is on all four sides, so all four have to come back off.
   Pulling only the vertical left the Play artwork starting 15px right of its
   box, which is invisible when the badges sit side by side and an obviously
   ragged left edge once they stack on a phone. */
.store-badge--play img { height: 92px; margin: -15px; }

/* Used on both <a> and <button>, so it resets the parts a button brings with
   it rather than assuming a link. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding-inline: 28px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary { background: var(--gold); color: var(--on-gold); font-weight: 800; }
.btn--primary:hover { background: var(--gold-bright); }
.btn--primary[disabled] { opacity: 0.55; cursor: progress; }

/* A dimmed button was the only sign that anything was happening, which reads as
   a frozen page when the request behind it is a cold Cloud Function and takes
   seconds. The label carries the message and this only decorates it. */
.btn[data-busy="true"] { opacity: 1; }

.btn[data-busy="true"]::before {
  content: "";
  /* The button is an inline-flex, so this pseudo-element is a flex item and
     shrinks like one. Without flex:none it collapsed to a 4px sliver: a thin
     line rather than a ring, which is why it looked washed out instead of
     small. Size and stroke are up from 16/2 so it reads at arm's length on a
     phone. */
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 12px;
  border: 3px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  animation: spin 0.7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* A ring that cannot turn is just a broken circle, so it goes rather than
   sitting there static. The changed label still says what is happening. */
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="true"]::before { display: none; }
}

/* Only appears if the wait runs long enough to need explaining. */
.trial__waiting {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.9rem;
}
.trial__waiting[hidden] { display: none; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-inline: 22px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 700;
}

.chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
}

/* ---------- Footer ---------- */

.footer { padding-block: 44px 56px; }

.footer .shell { border-top: 1px solid var(--hairline); padding-top: 32px; }

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}

.footer__links { display: flex; flex-wrap: wrap; gap: 28px; }

.footer__links a {
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 700;
  text-decoration: none;
}
.footer__links a:hover { color: var(--gold); }

.footer__legal { margin-top: 26px; color: var(--muted); font-size: 0.88rem; }

/* ---------- Sticky CTA ---------- */

.sticky-cta { display: none; }

@media (max-width: 719px) {
  .sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    display: block;
    padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--hairline);
    z-index: 50;
  }
  .sticky-cta .btn { width: 100%; }
  /* Keeps the bar off the last line of the footer. */
  body { padding-bottom: 92px; }
}

/* ---------- Legal pages ---------- */

.legal { padding-block: 56px 40px; }

.legal h1 { font-size: clamp(2.1rem, 7vw, 3rem); margin-bottom: 10px; }

.legal__updated {
  margin-bottom: 32px;
  color: var(--muted);
  font-size: 0.9rem;
}

.legal .lede { margin-bottom: 8px; }

/* Long-form prose, so the rhythm is set once here rather than per element. */
.legal h2 {
  margin-top: 44px;
  margin-bottom: 12px;
  font-size: 1.45rem;
}

.legal h3 {
  margin-top: 28px;
  margin-bottom: 8px;
  font-size: 1.05rem;
  color: var(--gold);
}

.legal p { color: var(--muted); margin-bottom: 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; color: var(--muted); }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--text); }

.legal a { color: var(--gold); }

.topbar__inner > a:first-child { display: inline-flex; }

/* ---------- The test: hook ---------- */

.trial-hook {
  padding-block: var(--band-y);
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}

.trial-hook__inner {
  display: grid;
  gap: 36px;
  align-items: center;
}

@media (min-width: 900px) {
  .trial-hook__inner { grid-template-columns: 1.35fr 1fr; gap: 64px; }
}

.trial-hook__cta { margin-top: 28px; }

.trial-hook__fine { margin-top: 14px; color: var(--muted); font-size: 0.9rem; }

.trial-hook__stats {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  overflow: hidden;
}

.trial-hook__stats li {
  padding: 20px 24px;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.92rem;
}

.trial-hook__stats span {
  display: block;
  color: var(--gold);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
}

/* ---------- The test: the trial itself ---------- */

.trial {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.trial::backdrop { background: rgba(0, 0, 0, 0.94); }

.trial__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(560px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 64px var(--gutter) 40px;
  overflow-y: auto;
}

.trial__panel[hidden] { display: none; }

.trial__panel h2 { font-size: clamp(1.7rem, 6vw, 2.3rem); margin-bottom: 14px; }
.trial__panel p { color: var(--muted); }

.trial__step {
  margin-bottom: 12px;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trial__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1;
}

.trial__form { margin-top: 28px; }

.trial__form label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.trial__form input {
  width: 100%;
  height: 52px;
  padding-inline: 16px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 1.05rem;
}

.trial__form input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--gold);
}

.trial__form .btn { width: 100%; margin-top: 24px; }

.trial__record { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.trial__record input { text-align: center; }

/* Scoped past `.trial__panel p`, which is a descendant selector and therefore
   outranks a lone class. Errors had been painting muted grey since the day this
   shipped, so a message meant to stop someone read like more body copy. */
.trial .trial__error {
  margin-top: 14px;
  color: var(--boxer);
  font-size: 0.94rem;
  font-weight: 700;
}
.trial__error[hidden] { display: none; }

.trial__fine { margin-top: 22px; font-size: 0.86rem; }

/* One line under a title, sized so it is read rather than skipped. The panels
   used to carry four sentences here, which is three more than anyone deciding
   whether to continue is willing to take in. */
.trial__lead { font-size: 1.06rem; }

/* The rule, drawn. Sits big enough to be understood without being read. */
.trial__teach {
  display: flex;
  justify-content: center;
  gap: 44px;
  margin: 34px 0 40px;
}

.trial__teach figure { margin: 0; text-align: center; }
.trial__teach svg { width: 116px; height: 116px; display: block; }

/* Above the ring while practising, so it has to be small enough not to steal
   the play area's height on a phone. */
.trial__teach--inline { margin: 10px 0 16px; gap: 30px; }
.trial__teach--inline svg { width: 62px; height: 62px; }
.trial__teach--inline figcaption { margin-top: 4px; font-size: 0.8rem; }
.trial__teach[hidden] { display: none; }

/* The scale on the ready screen. */
.trial__scale { margin: 28px 0 34px; }
.trial__scale svg { width: 100%; height: auto; display: block; }

.trial__record-label {
  display: block;
  margin: 24px 0 8px;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.trial__record span {
  display: block;
  margin-top: 6px;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.trial__teach figcaption {
  margin-top: 10px;
  font-size: 0.94rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.trial__teach figure:first-child figcaption { color: var(--gold); }

.trial__panel--game { justify-content: flex-start; padding-top: 72px; }

.trial__hud {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.trial__hud [data-hud="progress"] { color: var(--muted); font-size: 0.84rem; }
.trial__hud [data-hud="status"] { font-size: 1.1rem; color: var(--muted); }
.trial__hud [data-state="hit"] { color: var(--gold); }
.trial__hud [data-state="feint"] { color: var(--boxer); }

/* The ring is the play area. touch-action: none keeps a fast tap from being
   read as the start of a scroll, which on mobile would add its own delay to
   every reaction the test is trying to measure. */
.trial__ring {
  position: relative;
  flex: 1;
  min-height: 320px;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background: var(--surface);
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

.trial__ring[data-foul] { border-color: var(--boxer); background: rgba(255, 75, 87, 0.12); }

.trial__ring-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
}
.trial__ring-hint[hidden] { display: none; }

.trial__target {
  position: absolute;
  width: 84px;
  height: 84px;
  margin: -42px 0 0 -42px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.trial__target[hidden] { display: none; }

.trial__target--gold {
  background: var(--gold-bright);
  box-shadow: 0 0 0 10px rgba(212, 175, 55, 0.22), 0 0 40px rgba(255, 197, 61, 0.5);
}

.trial__target--feint {
  background: var(--boxer);
  box-shadow: 0 0 0 10px rgba(255, 75, 87, 0.2), 0 0 40px rgba(255, 75, 87, 0.45);
}

.trial__times {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 34px;
  margin-top: 16px;
}

.trial__times span {
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

/* The standing, at the size the milliseconds used to be. */
.trial__place { margin: 0; }

.trial__place strong {
  display: block;
  color: var(--text);
  font-size: clamp(3.6rem, 18vw, 5.6rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.trial[data-verdict="pass"] .trial__place strong { color: var(--gold); }

.trial__among {
  margin-top: 6px;
  color: var(--muted);
  font-size: 1rem;
  font-weight: 700;
}

/* The time and the distance to the record, demoted to supporting facts. */
.trial__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 22px 0 26px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  color: var(--muted);
  font-size: 0.98rem;
  font-weight: 700;
}

.trial__stats strong {
  color: var(--text);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.trial__reward { margin-top: 26px; }
.trial__reward[hidden] { display: none; }

.trial__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.trial .trial__shared {
  margin-top: 12px;
  color: var(--gold);
  font-size: 0.9rem;
  font-weight: 700;
}
.trial__shared[hidden] { display: none; }

/* ---------- Lightbox ---------- */

.lightbox {
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

.lightbox::backdrop { background: rgba(0, 0, 0, 0.95); }

.lightbox img {
  width: auto;
  height: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 56px 24px 32px;
  object-fit: contain;
}

.lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-elevated);
  color: var(--text);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}