/* =====================================================================
   ThisRupt — design system
   Palette sampled from the logo. Red is the only accent in the whole
   system and it is reserved for two things: the clock and the action.
   ===================================================================== */

:root {
  --ink:        #0B0B0D;
  --ink-70:     #46464C;
  --muted:      #7A7A82;
  --paper:      #FCFCFC;
  --paper-2:    #F3F3F5;
  --line:       #E4E4E7;
  --bolt:       #D60107;
  --bolt-dark:  #A10005;
  --wash:       #FFF0F0;
  --go:         #0E7A3D;

  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body:    'Instrument Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --shell:      1120px;
  --radius:     4px;
  --slash:      -8deg;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--bolt); }

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

:focus-visible {
  outline: 3px solid var(--bolt);
  outline-offset: 2px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  margin: 0;
}

.display {
  font-size: clamp(2.6rem, 8vw, 5.4rem);
  font-weight: 900;
  text-transform: uppercase;
}

.h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.h3 { font-size: 1.15rem; letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bolt);
  margin: 0 0 14px;
}

.eyebrow--muted { color: var(--muted); }

.lede {
  font-size: 1.08rem;
  color: var(--ink-70);
  max-width: 46ch;
}

.fine { font-size: 0.85rem; color: var(--muted); }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */

.masthead {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 40;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.16rem;
  letter-spacing: -0.04em;
  text-transform: uppercase;
}

.brand:hover { color: var(--ink); }
.brand img { width: 30px; height: 30px; }
.brand span em { font-style: normal; color: var(--bolt); }

.masthead__nav {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 0.92rem;
}

/* :not(.btn) matters — a bare `.masthead__nav a` is specificity (0,1,1) and
   outranks `.btn--primary` (0,1,0), which repainted the red CTA's label in
   the muted nav colour and turned it red-on-red on hover. */
.masthead__nav a:not(.btn) { text-decoration: none; color: var(--ink-70); font-weight: 500; }
.masthead__nav a:not(.btn):hover { color: var(--bolt); }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--bolt);
  border-color: var(--bolt);
  color: #fff;
}
.btn--primary:hover { background: var(--bolt-dark); border-color: var(--bolt-dark); color: #fff; }

.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.btn--block { width: 100%; }

.btn--lg { padding: 18px 34px; font-size: 1.06rem; }

.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

.btn--google {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
  font-weight: 600;
}
.btn--google:hover { border-color: var(--ink); background: #fff; color: var(--ink); }
.btn--google svg { width: 19px; height: 19px; }

/* ---------------------------------------------------------------------
   Signature: the bolt slash
   A skewed red band echoing the diagonal cut in the mark. Used once in
   the hero and again as the in-play progress bar, so the shape always
   means the same thing: time is moving.
   --------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 8vw, 92px);
}

/* The slash is positioned against the clock, not the hero, because the
   composition it belongs to is "card floating on the red band". Anchored
   to the hero it was free to drift into the copy column as the headline
   grew, putting red text on a red ground. Tied to the stage it always
   sits under the card at every breakpoint, and its leftward bleed stops
   inside the grid gap instead of reaching the words. */
.hero__stage { position: relative; }

.hero__slash {
  position: absolute;
  left: -18%;          /* stops within the grid gap, clear of the copy */
  right: -16vw;        /* bleeds off the right edge of the viewport */
  top: 50%;
  height: clamp(96px, 15vw, 168px);
  background: var(--bolt);
  transform: translateY(-50%) rotate(var(--slash));
  z-index: 0;
  pointer-events: none;
}

.hero__slash::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--bolt) 0%, var(--bolt-dark) 100%);
  opacity: .55;
}

.hero__inner { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

/* The clock card sits on top of the slash — that overlap is the whole
   composition, so it gets the only shadow in the system. */
.clock {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  padding: 28px 30px 26px;
  box-shadow: 10px 10px 0 var(--ink);
}

.clock__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}

.clock__time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.5rem, 6.5vw, 3.6rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--ink);
}

.clock__time span { color: var(--muted); }

.clock__foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--ink-70);
}

.hero__title { color: var(--ink); }
.hero__title em { font-style: normal; color: var(--bolt); }

.pot {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 26px;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
}

.pot strong { color: #fff; font-weight: 700; }
.pot__part { white-space: nowrap; }
.pot__sep { opacity: .5; }

/* On a phone the two halves cannot share a line without either shrinking
   the type or overflowing the pill, so they stack and the separator goes. */
@media (max-width: 640px) {
  .pot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .pot__sep { display: none; }
  .pot__part { white-space: normal; }
}

/* ---------------------------------------------------------------------
   Sections & cards
   --------------------------------------------------------------------- */

.band { padding: clamp(48px, 7vw, 80px) 0; border-top: 1px solid var(--line); }
.band--tint { background: var(--paper-2); }

/* Separators are drawn per cell rather than by letting a grey container
   show through 1px gaps. With five items in a four-column row the old
   approach left a grey block where the fifth row had no siblings; this way
   leftover space is just page colour. overflow:hidden clips the hairlines
   that land on the outer border. */
.rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rule {
  background: var(--paper);
  padding: 26px 24px;
  /* Borders, not box-shadow: with no grid gap the adjacent cell's
     background paints straight over a shadow. The hairline on the last
     cell of a row sits on the container border and is clipped. */
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Numbered only because the rules genuinely are a sequence: earn, then
   race, then rank. */
.rule__n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--bolt);
  letter-spacing: 0.12em;
  margin-bottom: 12px;
}

.rule h3 { margin-bottom: 8px; font-size: 1.05rem; }
.rule p { margin: 0; font-size: 0.93rem; color: var(--ink-70); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
}

.card--tight { padding: 22px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */

.form-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 72px) 0;
}

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 7px;
}

.field .hint {
  display: block;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 400;
  margin-top: 4px;
}

.input-wrap { position: relative; display: flex; align-items: stretch; }

.input-wrap__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--paper-2);
  font-family: var(--font-mono);
  color: var(--muted);
  font-size: 0.95rem;
}

.input-wrap__prefix + input { border-radius: 0 var(--radius) var(--radius) 0; }

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="time"],
input[type="date"],
select,
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--ink);
  outline: none;
  box-shadow: 0 0 0 3px var(--wash);
}

input[aria-invalid="true"] { border-color: var(--bolt); }

.error-text {
  display: block;
  margin-top: 6px;
  font-size: 0.84rem;
  color: var(--bolt);
  font-weight: 500;
}

.checkline {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.5;
}

.checkline input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--bolt);
  flex: none;
}

/* ---------------------------------------------------------------------
   Follow steps (activation)
   --------------------------------------------------------------------- */

.follow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: #fff;
  transition: border-color .15s ease, background-color .15s ease;
}

.follow[data-done="1"] {
  border-color: var(--go);
  background: #F3FBF6;
}

.follow__icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
}

.follow[data-done="1"] .follow__icon { background: var(--go); }

.follow__body { flex: 1; min-width: 0; }
.follow__body strong { display: block; font-size: 0.98rem; }
.follow__body span { font-size: 0.85rem; color: var(--muted); }

.follow__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.follow__action:hover { background: var(--ink); color: var(--paper); }
.follow[data-done="1"] .follow__action {
  border-color: var(--go);
  color: var(--go);
  background: #fff;
}

/* ---------------------------------------------------------------------
   Progress (onboarding)
   --------------------------------------------------------------------- */

.steps {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 28px;
}

.steps b { color: var(--ink); font-weight: 700; }
.steps i { font-style: normal; color: var(--line); }

/* ---------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------- */

.flash {
  padding: 13px 18px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  font-size: 0.93rem;
  border: 1.5px solid;
}

.flash--error   { background: var(--wash); border-color: var(--bolt); color: var(--bolt-dark); }
.flash--success { background: #F3FBF6; border-color: var(--go); color: var(--go); }
.flash--info    { background: var(--paper-2); border-color: var(--line); color: var(--ink-70); }

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

.footer {
  border-top: 1px solid var(--line);
  padding: 34px 0;
  font-size: 0.86rem;
  color: var(--muted);
}

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

.footer a { color: var(--muted); text-decoration: none; }
.footer a:hover { color: var(--bolt); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .clock { box-shadow: 6px 6px 0 var(--ink); }
  .masthead__nav { gap: 14px; font-size: 0.86rem; }
}

@media (max-width: 520px) {
  .shell { padding-inline: 18px; }
  .follow { flex-wrap: wrap; }
  .follow__action { width: 100%; justify-content: center; }

  /* Below this width the logo, the anchor link and the CTA cannot share a
     row without overlapping. Scoped to in-page anchors only: the signed-in
     nav (Dashboard, Leaderboard, Sign out) must survive on mobile, so
     a broader a:not(.btn) rule here would break it. */
  .masthead__nav a[href^="#"] { display: none; }

  /* Signed-in members carry three nav links, which still collide with the
     wordmark at this width. Drop the wordmark and keep the logo mark: the
     links are functional, the wordmark is decoration. */
  .brand span { display: none; }

  .masthead__nav { gap: 12px; font-size: .82rem; }
  .masthead__inner { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover { transform: none; }
}

/* ---------------------------------------------------------------------
   Admin: tables, badges, toolbars
   Data-dense screens, so these are tighter than the player-facing UI.
   --------------------------------------------------------------------- */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1.5px solid var(--line);
  margin-bottom: 30px;
}

.admin-nav a {
  padding: 10px 15px;
  text-decoration: none;
  color: var(--ink-70);
  font-size: .9rem;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
}

.admin-nav a:hover { color: var(--bolt); }
.admin-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--bolt); }

.table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--radius); }

.table { width: 100%; border-collapse: collapse; font-size: .92rem; }

.table th {
  text-align: left;
  padding: 12px 14px;
  background: var(--paper-2);
  border-bottom: 1.5px solid var(--line);
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper-2); }
.table .num { font-family: var(--font-mono); white-space: nowrap; }

.badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-70);
  white-space: nowrap;
}

.badge--go   { background: #E8F5EE; border-color: #BFE0CC; color: var(--go); }
.badge--stop { background: var(--wash); border-color: #F2C9C9; color: var(--bolt-dark); }
.badge--wait { background: #FFF7E6; border-color: #F0DFB8; color: #8A6100; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 20px;
}

.toolbar .field { margin-bottom: 0; }
.toolbar input, .toolbar select { padding: 9px 11px; font-size: .9rem; }
.toolbar__grow { flex: 1 1 220px; }

.btn--sm { padding: 7px 13px; font-size: .82rem; }

.pager { display: flex; gap: 8px; align-items: center; margin-top: 20px; font-size: .9rem; }

.inline-form { display: inline-flex; }

/* Row actions: a single horizontal strip of icon buttons. Each form is
   its own element for CSRF reasons, so the flex container lives on the
   wrapper and the forms must not be block-level or they stack. */
.row-actions { display: flex; gap: 4px; align-items: center; }

.icon-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink-70);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}

.icon-btn svg { width: 16px; height: 16px; display: block; }
.icon-btn:hover { border-color: var(--ink); color: var(--ink); }
.icon-btn--danger:hover { border-color: var(--bolt); color: var(--bolt); background: var(--wash); }
.icon-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Native title tooltips are slow and unstyled; this is instant. */
.tip { position: relative; }

.tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s;
  z-index: 20;
}

.tip:hover::after, .tip:focus-visible::after { opacity: 1; }

/* Answer choices: radio sits beside the text, not under it. */
.option-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.option-row input[type="text"] { flex: 1; min-width: 0; }

.option-row__mark {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-size: .82rem;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  flex: 0 0 auto;
}

.option-row__mark input { margin: 0; accent-color: var(--bolt); }
.option-row__mark:hover { border-color: var(--ink); }
.option-row:has(input[type="radio"]:checked) .option-row__mark {
  border-color: var(--go);
  background: #E8F5EE;
  color: var(--go);
  font-weight: 600;
}

@media (max-width: 560px) {
  .option-row { flex-wrap: wrap; }
  .option-row input[type="text"] { flex: 1 1 100%; }
}

/* Destructive admin actions, folded away so they are not a stray click. */
.danger-zone {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 0 18px;
}

.danger-zone > summary {
  cursor: pointer;
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.danger-zone[open] > summary { border-bottom: 1px solid var(--line); color: var(--ink); }

/* ---------------------------------------------------------------------
   Play screen
   Timed, one-shot, often on a phone: tap targets are generous and each
   choice occupies its own line so nobody mis-taps under pressure.
   --------------------------------------------------------------------- */

.play { max-width: 720px; }

.play__bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 22px;
  border-bottom: 1.5px solid var(--line);
}

.play__progress {
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.play__progress b { color: var(--ink); font-weight: 700; }

.play__clock {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.play__clock--low { color: var(--bolt); }

/* The fieldset is for grouping the radios, not for decoration. */
.play__q { border: 0; padding: 0; margin: 0 0 24px; }

.play__qtext {
  display: block;
  padding: 0;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
}

.play__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 15px 18px;
  margin-bottom: 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: 1rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .12s, background .12s;
}

.play__opt:hover { border-color: var(--ink); }

.play__opt input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--bolt);
}

.play__opt span { flex: 1; }

.play__opt:has(input:checked) {
  border-color: var(--bolt);
  background: var(--wash);
  font-weight: 600;
}

.play__nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
}

@media (max-width: 560px) {
  .play__nav { flex-direction: column-reverse; }
  .play__nav .btn { width: 100%; }
  .play__opt { padding: 16px; }
}

/* Daily winner marker. Gold rather than brand red so it reads as a prize
   and not as an error state. */
.trophy {
  display: inline-flex;
  vertical-align: -3px;
  color: #B8860B;
}

.trophy svg { width: 16px; height: 16px; }

/* The browser's default [hidden] rule is display:none, but any later rule
   that sets display — .btn is inline-flex — beats it on specificity and the
   element stays visible. This makes the attribute mean what it says. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Answer review on the result page
   --------------------------------------------------------------------- */

.review {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  counter-reset: none;
}

.review__item {
  border: 1.5px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 10px;
  background: #fff;
}

.review__item--right   { border-left-color: var(--go); }
.review__item--wrong   { border-left-color: var(--bolt); }
.review__item--pending { border-left-color: var(--line); }

.review__head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.review__n {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  padding-top: 2px;
}

.review__q { flex: 1; font-weight: 600; line-height: 1.35; }

.review__mark {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
  padding-top: 2px;
}

.review__item--right .review__mark { color: var(--go); }
.review__item--wrong .review__mark { color: var(--bolt); }

.review__line {
  margin: 0 0 4px 28px;
  font-size: .93rem;
  color: var(--ink-70);
}

.review__line--right { color: var(--go); font-weight: 600; }

.review__label {
  display: inline-block;
  min-width: 118px;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}

.review__why {
  margin: 8px 0 0 28px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: .88rem;
  color: var(--muted);
}

@media (max-width: 520px) {
  .review__line, .review__why { margin-left: 0; }
  .review__label { display: block; min-width: 0; margin-bottom: 2px; }
}