/* ==========================================================================
   Hoppa design system
   One file, no build step. Sections:
   1. Tokens      2. Base       3. Utilities   4. Components
   5. Screens     6. Wikipedia article typography   7. Responsiveness
   ========================================================================== */

/* ---------- 1. Tokens ----------------------------------------------------- */

:root {
  /* Brand colour: ember orange. A deliberate break from the corporate blue
     of the reference sites; the sense of a race comes from a warm colour. */
  --ember-300: #ffb086;
  --ember-400: #ff8a4c;
  --ember-500: #ff6b2c;
  --ember-600: #ed4f0c;

  /* Raw palette. These are tuned for dark backgrounds and are used as
     backgrounds and gradient stops (the gold rank badge, the brand gradient),
     so they must NOT be darkened per theme. Text uses the semantic --ok /
     --warn / --danger tokens below, which are themed. */
  --cyan-400: #22d3ee;
  --mint-400: #34d399;
  --rose-400: #fb7185;
  --amber-400: #fbbf24;
  --violet-400: #a78bfa;

  /* Label colour for text sitting on the ember accent. White fails AA on
     every ember shade (2.3:1 on --ember-400); this passes on all four. */
  --on-accent: #2a0d00;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
             "Noto Sans", Arial, sans-serif;
  --font-article: "Iowan Old Style", "Charter", "Palatino Linotype", Palatino,
                  Georgia, "Noto Serif", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
               "Roboto Mono", monospace;

  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --header-h: 60px;
  --content-max: 1180px;
  --article-max: 780px;
}

/* Dark theme, the default */
[data-theme="dark"] {
  --bg: #0b0d14;
  --bg-deep: #07080d;
  --surface: #121623;
  --surface-2: #1a1f31;
  --surface-3: #232941;
  --paper: #14182552;
  --line: #262c42;
  --line-strong: #333b57;

  --text: #eef1f8;
  --text-2: #a6afc6;
  /* #6f7994 fell below 4.5:1 on every surface (3.30:1 on --surface-3). */
  --text-3: #8b93ab;

  --ok: var(--mint-400);
  --warn: var(--amber-400);
  --danger: var(--rose-400);

  --accent: var(--ember-500);
  --accent-soft: #ff6b2c1f;
  --accent-text: #ff8f5e;
  --link: #7db8ff;
  --link-visited: #b79cff;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, .7);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, .8);
  --glow: 0 0 0 1px #ff6b2c33, 0 8px 32px -8px #ff6b2c4d;

  --grid-line: #ffffff08;
  color-scheme: dark;
}

/* Light theme, warm paper */
[data-theme="light"] {
  --bg: #f6f5f2;
  --bg-deep: #ecebe6;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --surface-3: #f0efea;
  --paper: #fffdf9;
  --line: #e3e1da;
  --line-strong: #cfccc2;

  --text: #16181f;
  --text-2: #575d6c;
  /* #8b909e reached only 2.77:1 on --surface-3. */
  --text-3: #656a79;

  /* The raw palette is tuned for dark backgrounds and collapses here: the
     old values landed between 1.5:1 and 2.7:1 on paper. These are the same
     hues at roughly the 700 level, all above 4.7:1 on every light surface. */
  --ok: #036c4e;
  --warn: #92590b;
  --danger: #be123c;

  --accent: var(--ember-600);
  --accent-soft: #ed4f0c14;
  --accent-text: #d1440a;
  --link: #2a5db0;
  --link-visited: #6b45b5;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, .06);
  --shadow-md: 0 8px 24px -10px rgba(20, 20, 20, .18);
  --shadow-lg: 0 24px 64px -20px rgba(20, 20, 20, .25);
  --glow: 0 0 0 1px #ed4f0c2e, 0 8px 32px -10px #ed4f0c40;

  --grid-line: #00000008;
  color-scheme: light;
}

/* ---------- 2. Base ------------------------------------------------------- */

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

* { margin: 0; }

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

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
  min-height: 100dvh;
}

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

button, input, select, textarea { font: inherit; color: inherit; }

button { cursor: pointer; border: 0; background: none; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--accent); color: var(--on-accent); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  padding: 12px 20px; background: var(--accent); color: var(--on-accent);
  border-radius: 0 0 var(--radius-sm) 0; text-decoration: none; font-weight: 600;
}
.skip-link:focus { left: 0; }

.noscript {
  max-width: 640px; margin: 15vh auto; padding: var(--space-6);
  text-align: center;
}

/* Fallback for browsers without inert support. The dialog sets inert on #app;
   without this the page underneath would still take pointer events. */
[inert] { pointer-events: none; user-select: none; }

/* Boot screen */
.boot {
  min-height: 100dvh; display: grid; place-content: center; gap: var(--space-4);
  justify-items: center;
}
.boot__mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--ember-400), var(--ember-600));
  animation: bootPulse 1.2s var(--ease-out) infinite;
}
.boot__text { color: var(--text-3); font-size: 14px; }
@keyframes bootPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(.82) rotate(45deg); opacity: .6; }
}


/* iOS Safari waits for a possible double tap zoom before dispatching a click,
   which shows up as lag on every single hop. The entire game loop is tapping
   links, so this is the cheapest responsiveness win available. Pinch zoom is
   deliberately left working; user-scalable=no would break accessibility. */
a, button, summary, [role="link"], .segmented__opt, .trail__step, .chip {
  touch-action: manipulation;
}
.articlebody a.wl { -webkit-tap-highlight-color: transparent; }

/* ---------- 3. Utilities -------------------------------------------------- */

.wrap {
  width: 100%; max-width: var(--content-max); margin-inline: auto;
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
}
.stack { display: grid; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row--between { justify-content: space-between; }
.row--wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden { display: none !important; }

.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- 4. Components ------------------------------------------------- */

/* Buttons */
.btn {
  --btn-bg: var(--surface-2);
  --btn-fg: var(--text);
  --btn-bd: var(--line);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px 18px; border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: inset 0 0 0 1px var(--btn-bd);
  font-weight: 600; font-size: 14px; letter-spacing: -.01em;
  white-space: nowrap; text-decoration: none;
  transition: transform .12s var(--ease-out), background .16s, box-shadow .16s, opacity .16s;
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  --btn-bg: linear-gradient(180deg, var(--ember-400), var(--ember-500));
  --btn-fg: var(--on-accent); --btn-bd: transparent;
  box-shadow: var(--glow);
}
.btn--primary:hover:not(:disabled) {
  --btn-bg: linear-gradient(180deg, var(--ember-300), var(--ember-400));
}
.btn--ghost { --btn-bg: transparent; --btn-bd: transparent; color: var(--text-2); }
.btn--ghost:hover:not(:disabled) { --btn-bg: var(--surface-2); color: var(--text); }
.btn--outline { --btn-bg: transparent; --btn-bd: var(--line-strong); }
.btn--danger { --btn-bg: transparent; --btn-bd: #f4335544; color: var(--danger); }
.btn--danger:hover:not(:disabled) { --btn-bg: #f4335514; }
.btn--lg { padding: 15px 26px; font-size: 16px; border-radius: var(--radius-md); }
.btn--sm { padding: 7px 12px; font-size: 13px; border-radius: var(--radius-xs); }
.btn--block { width: 100%; }
.btn--icon { padding: 9px; width: 38px; height: 38px; }

/* Counter badge inside a button (for example the hints left) */
.btn__count {
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-full);
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Cards */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md);
  overflow: hidden;
}
.card__body { padding: var(--space-5); }
.card__head {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}

/* Badge / tag */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12px; font-weight: 600; color: var(--text-2);
}
.chip--accent { background: var(--accent-soft); color: var(--accent-text); box-shadow: inset 0 0 0 1px #ff6b2c33; }
.chip--ok { background: #34d3991a; color: var(--ok); box-shadow: inset 0 0 0 1px #34d39933; }
.chip--warn { background: #fbbf241a; color: var(--warn); box-shadow: inset 0 0 0 1px #fbbf2433; }
.chip--live { background: #fb71851a; color: var(--danger); box-shadow: inset 0 0 0 1px #fb718533; }
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip--live .chip__dot { animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

/* Form fields */
.field { display: grid; gap: 6px; }
.field__label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field__hint { font-size: 12px; color: var(--text-3); }

.input, .select, .textarea {
  width: 100%; padding: 11px 14px;
  background: var(--surface-2); color: var(--text);
  border: 0; box-shadow: inset 0 0 0 1px var(--line);
  border-radius: var(--radius-sm);
  transition: box-shadow .16s;
}
.input::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; box-shadow: inset 0 0 0 2px var(--accent);
}
.select {
  appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238b909e' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}

/* Segmented control */
.segmented {
  display: flex; gap: 2px; padding: 3px;
  background: var(--surface-2); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.segmented--grid { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.segmented__opt {
  flex: 1; padding: 8px 12px; border-radius: 7px;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  transition: background .16s, color .16s;
}
.segmented__opt:hover { color: var(--text-2); }
.segmented__opt[aria-pressed="true"] {
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm);
}

/* Toggle switch */
.switch { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); cursor: pointer; }
.switch__track {
  flex: none; width: 42px; height: 25px; border-radius: var(--radius-full);
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line);
  position: relative; transition: background .18s;
}
.switch__track::after {
  content: ""; position: absolute; inset: 3px auto 3px 3px;
  width: 19px; border-radius: 50%; background: var(--text-3);
  transition: transform .18s var(--ease-spring), background .18s;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch input:checked + .switch__track { background: var(--accent); box-shadow: none; }
.switch input:checked + .switch__track::after { transform: translateX(17px); background: #fff; }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Toast */
.toasts {
  position: fixed; z-index: 200; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid; gap: var(--space-2); width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--surface-3); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
  font-size: 14px; font-weight: 500;
  animation: toastIn .3s var(--ease-spring);
}
.toast--ok { box-shadow: inset 0 0 0 1px #34d39955, var(--shadow-lg); }
.toast--err { box-shadow: inset 0 0 0 1px #fb718555, var(--shadow-lg); }
.toast__icon { flex: none; font-size: 16px; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }

/* Dialog */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: #05060ab8; backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: var(--space-4);
  animation: fadeIn .2s var(--ease-out);
}
.modal {
  width: min(520px, 100%); max-height: 85dvh; overflow: auto;
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
  animation: modalIn .28s var(--ease-spring);
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* Loading */
.spinner {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}
.spinner--lg { width: 30px; height: 30px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
  border-radius: var(--radius-xs);
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Avatar */
.avatar {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  font-size: 17px; line-height: 1;
  background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line);
}
.avatar--lg { width: 46px; height: 46px; font-size: 23px; border-radius: var(--radius-md); }
.avatar--sm { width: 26px; height: 26px; font-size: 13px; border-radius: 7px; }

/* ---------- 5. Screens ---------------------------------------------------- */

/* App bar */
.appbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-3);
  padding-left: max(var(--space-5), env(safe-area-inset-left));
  padding-right: max(var(--space-5), env(safe-area-inset-right));
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar--race {
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; letter-spacing: -.03em;
  color: var(--text); text-decoration: none;
}
.brand__mark {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  background: linear-gradient(135deg, var(--ember-400), var(--ember-600));
  display: grid; place-items: center;
  box-shadow: var(--glow);
}
.brand__alt { color: var(--accent-text); }

/* Home page hero */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(40px, 8vw, 88px) 0 clamp(32px, 5vw, 56px);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 70% at 50% -10%, #ff6b2c1f, transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 44px 100%;
  mask-image: linear-gradient(180deg, #000 0%, #0009 55%, transparent 100%);
}
.hero__title {
  font-size: clamp(34px, 7vw, 62px); line-height: 1.02; font-weight: 800;
  letter-spacing: -.035em; max-width: 16ch; margin-inline: auto; text-align: center;
}
.hero__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--ember-400), var(--ember-600) 60%, var(--violet-400));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__sub {
  margin: var(--space-4) auto 0; max-width: 54ch; text-align: center;
  color: var(--text-2); font-size: clamp(15px, 2vw, 18px);
}

/* The animated route inside the hero */
.routeviz {
  margin: var(--space-6) auto 0; max-width: 620px;
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.routeviz__node {
  padding: 8px 14px; border-radius: var(--radius-full);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm);
  font-size: 13px; font-weight: 600; white-space: nowrap;
  animation: nodeIn .5s var(--ease-spring) backwards;
}
.routeviz__node--start { box-shadow: inset 0 0 0 1px var(--line-strong); }
.routeviz__node--end {
  background: var(--accent-soft); color: var(--accent-text);
  box-shadow: inset 0 0 0 1px #ff6b2c55;
}
.routeviz__arrow { color: var(--text-3); font-size: 12px; animation: nodeIn .5s var(--ease-spring) backwards; }
@keyframes nodeIn { from { opacity: 0; transform: translateY(6px) scale(.9); } }

/* Mode cards */
.modes {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(28px, 5vw, 44px);
}
.mode {
  position: relative; text-align: left; overflow: hidden;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow-md);
  display: grid; gap: 10px; align-content: start;
  transition: transform .18s var(--ease-out), box-shadow .18s;
}
.mode::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3px;
  background: var(--mode-accent, var(--accent)); opacity: 0; transition: opacity .18s;
}
.mode:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg); }
.mode:hover::after { opacity: 1; }
.mode__icon {
  width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: color-mix(in srgb, var(--mode-accent, var(--accent)) 14%, transparent);
  color: var(--mode-accent, var(--accent)); font-size: 20px;
}
.mode__title { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.mode__desc { font-size: 14px; color: var(--text-2); }
.mode__meta { margin-top: 4px; display: flex; gap: 6px; flex-wrap: wrap; }
.mode--feature {
  background:
    radial-gradient(120% 130% at 0% 0%, #ff6b2c14, transparent 60%),
    var(--surface);
}

/* Stats strip */
.statstrip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.statstrip__item { background: var(--surface); padding: var(--space-4); text-align: center; }
.statstrip__val { font-size: 24px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.statstrip__lbl { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* Section heading */
.section { padding-block: clamp(40px, 7vw, 72px); }
.section__title {
  font-size: clamp(22px, 3.5vw, 30px); font-weight: 800; letter-spacing: -.03em;
}
.section__lead { color: var(--text-2); margin-top: var(--space-2); max-width: 60ch; }

.prose { max-width: 68ch; }
.prose h3 { font-size: 17px; font-weight: 700; margin-top: var(--space-5); letter-spacing: -.01em; }
.prose p, .prose li { color: var(--text-2); font-size: 15px; }
.prose p { margin-top: var(--space-2); }
.prose ul { margin-top: var(--space-2); padding-left: 20px; display: grid; gap: 5px; }

/* Collapsible FAQ */
.faq { display: grid; gap: var(--space-2); }
.faq details {
  border-radius: var(--radius-md); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
}
.faq summary {
  padding: var(--space-4); cursor: pointer; font-weight: 600; font-size: 15px;
  list-style: none; display: flex; justify-content: space-between; gap: var(--space-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details > p { padding: 0 var(--space-4) var(--space-4); color: var(--text-2); font-size: 14px; }

/* Footer */
.footer {
  border-top: 1px solid var(--line); margin-top: var(--space-7);
  padding-block: var(--space-6);
  font-size: 13px; color: var(--text-3);
}
.footer a { color: var(--text-2); }

/* The brand name in the legal notice carries the hidden easter egg
   (see app.js showEasterEgg). It deliberately takes no styling at all: not
   even the cursor changes, because being the one word that behaves
   differently from the text around it would be the biggest giveaway. The
   only thing added is silencing the tap highlight; a finger on mobile must
   not make the box light up. */
.legalmark { -webkit-tap-highlight-color: transparent; }

/* --- Setup and lobby screen --- */

.panel { width: min(760px, 100%); margin-inline: auto; }
.panel--narrow { width: min(520px, 100%); }

.page-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding-block: var(--space-5) var(--space-4);
}
.page-head__title { font-size: clamp(21px, 3.5vw, 28px); font-weight: 800; letter-spacing: -.03em; }

/* Article pair preview */
.pair {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: stretch;
}
.pair__side {
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: 6px; align-content: start; min-height: 108px;
}
.pair__side--target { background: var(--accent-soft); box-shadow: inset 0 0 0 1px #ff6b2c33; }
.pair__lbl { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.pair__side--target .pair__lbl { color: var(--accent-text); }
.pair__name { font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.pair__ex { font-size: 12.5px; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pair__arrow {
  align-self: center; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-3);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}

/* Course picker */
.coursebox {
  margin-top: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.coursebox__loading {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); min-height: 108px; text-align: center;
  flex-wrap: wrap;
}

/* Article search results */
.searchresults { display: grid; gap: 2px; margin-top: 4px; }
.searchresults__item {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 6px 8px; border-radius: var(--radius-xs);
  background: transparent; font-size: 13.5px; color: var(--text);
  transition: background .12s;
}
.searchresults__item:hover { background: var(--surface-3); }
.searchresults__thumb {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-xs);
  object-fit: cover; background: var(--surface-3);
}
.searchresults__thumb--empty {
  display: grid; place-items: center; font-size: 15px; opacity: .6;
}
.searchresults__title { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

/* A setting that does not apply (difficulty on a custom course, say) */
.field--off { --text-3: color-mix(in srgb, var(--text-3) 70%, transparent); }
.field--off .field__label, .field--off .segmented { opacity: .6; }
.field--off .segmented { pointer-events: none; }

/* Course preview image.
   A fixed aspect ratio is essential: Wikipedia images arrive as a mix of
   portrait, landscape and square, and left alone the two cards ended up at
   different heights. object-fit: cover crops from the centre. */
.pair__thumb {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-sm); margin-bottom: 4px;
  background: var(--surface-3);
}

/* Lobby code */
.lobbycode {
  display: grid; gap: var(--space-3); justify-items: center; text-align: center;
  padding: var(--space-5); border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 120% at 50% 0%, #ff6b2c1a, transparent 65%),
    var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--line);
}
.lobbycode__digits {
  display: flex; gap: 8px;
}
.lobbycode__d {
  width: 44px; height: 56px; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-family: var(--font-mono); font-size: 26px; font-weight: 700; letter-spacing: 0;
}
.codeinput {
  width: 100%; text-align: center; letter-spacing: .5em; text-indent: .5em;
  font-family: var(--font-mono); font-size: 26px; font-weight: 700;
  text-transform: uppercase; padding-block: 16px;
}

/* Notice banner */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text-2); line-height: 1.5;
}
.notice--warn { background: #fbbf240f; box-shadow: inset 0 0 0 1px #fbbf2440; }
.notice--warn strong { color: var(--warn); }

/* Player list */
.players { display: grid; gap: var(--space-2); }
.player {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: box-shadow .18s;
}
.player--me { box-shadow: inset 0 0 0 1px var(--line-strong), 0 0 0 1px var(--accent-soft); }
.player--ready { box-shadow: inset 0 0 0 1px #34d39944; }
.player__name { font-weight: 600; font-size: 14.5px; }
.player__sub { font-size: 12px; color: var(--text-3); }
.player__slot {
  border-style: dashed; box-shadow: none; border: 1px dashed var(--line-strong);
  background: transparent; color: var(--text-3); justify-content: center; font-size: 13px;
}

/* Chat */
.chat { display: grid; grid-template-rows: 1fr auto; gap: var(--space-2); min-height: 0; }
.chat__log {
  display: grid; gap: 6px; align-content: start;
  max-height: 220px; overflow-y: auto; padding-right: 4px;
  font-size: 13.5px;
}
.chat__msg { color: var(--text-2); }
.chat__msg b { color: var(--text); font-weight: 600; }
.chat__sys { color: var(--text-3); font-style: italic; font-size: 12.5px; }

/* --- Race screen --- */

/* The default min-width:auto on grid and flex items lets wide content keep
   its container from shrinking, which pushes the whole page into horizontal
   scroll. minmax(0,1fr) plus min-width:0 cuts that off at the root. */
.race {
  min-height: 100dvh;
  display: grid; grid-template-rows: auto auto 1fr;
  grid-template-columns: minmax(0, 1fr);
}
.race > * { min-width: 0; }

.racebar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-3);
  padding: 9px max(var(--space-4), env(safe-area-inset-right)) 9px max(var(--space-4), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}
.racebar > * { min-width: 0; }

/* A button now, not a div: tapping it shows the target's summary again.
   font/color/text-align are restated because a <button> does not inherit them. */
.target-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0; flex: 0 1 auto;
  padding: 6px 14px 6px 6px; border-radius: var(--radius-full);
  background: var(--accent-soft); box-shadow: inset 0 0 0 1px #ff6b2c40;
  font: inherit; color: inherit; text-align: left;
  transition: background .16s;
}
.target-chip:hover { background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)); }
.target-chip__img {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none;
  background: var(--surface-3);
}
.target-chip__lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); }
.target-chip__name { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }

.hud { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.hud__stat {
  display: grid; justify-items: center; gap: 1px; min-width: 58px;
  padding: 5px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.hud__val { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hud__lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hud__stat--urgent { background: #fb71851f; box-shadow: inset 0 0 0 1px #fb718555; }
.hud__stat--urgent .hud__val { color: var(--danger); animation: livePulse 1s ease-in-out infinite; }

/* Second row: route trail plus actions */
.trailbar {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px max(var(--space-4), env(safe-area-inset-right)) 7px max(var(--space-4), env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky; top: var(--header-h); z-index: 55;
  min-width: 0;
}
.trailbar > * { min-width: 0; }
.trail {
  display: flex; align-items: center; gap: 5px; overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none; min-width: 0; flex: 1;
}
.trail::-webkit-scrollbar { display: none; }
.trail__step {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 4px 10px; border-radius: var(--radius-full);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px; color: var(--text-2); max-width: 190px;
}
.trail__step--now { background: var(--surface-3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); font-weight: 600; }
.trail__n {
  width: 17px; height: 17px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--surface-3); font-size: 10px; font-weight: 700; color: var(--text-3);
}
.trail__step--now .trail__n { background: var(--accent); color: var(--on-accent); }
.trail__sep { color: var(--text-3); flex: none; font-size: 10px; }

/* Click steps as a vertical list.
   Laid out horizontally, long article names were getting truncated. */
.steplist {
  list-style: none; margin: 7px 0 0; padding: 0;
  display: grid; gap: 3px;
  font-size: 12.5px; line-height: 1.45; color: var(--text-3);
}
.steplist li {
  display: grid; grid-template-columns: 18px 1fr; gap: 8px;
  align-items: baseline; min-width: 0;
}
.steplist__n {
  text-align: right; font-variant-numeric: tabular-nums;
  font-size: 11px; opacity: .65;
}
.steplist__t { overflow-wrap: anywhere; }
.steplist__now { color: var(--accent-text); font-weight: 600; }
.steplist__now .steplist__n { opacity: 1; }
.steplist--compact { font-size: 12px; gap: 2px; }

/* Live rivals strip */
.rivals {
  display: flex; gap: var(--space-2); overflow-x: auto;
  padding: 8px max(var(--space-4), env(safe-area-inset-right)) 8px max(var(--space-4), env(safe-area-inset-left));
  border-bottom: 1px solid var(--line); background: var(--surface-2);
  scrollbar-width: none;
}
.rivals::-webkit-scrollbar { display: none; }
.rival {
  display: flex; align-items: center; gap: 8px; flex: none;
  padding: 5px 12px 5px 5px; border-radius: var(--radius-full);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px;
}
.rival--done { box-shadow: inset 0 0 0 1px #34d39955; background: #34d3990f; }
.rival--lost { opacity: .45; }
.rival__name { font-weight: 600; }
.rival__at { color: var(--text-3); max-width: 130px; }
.rival__hops {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--radius-full);
  background: var(--surface-3); color: var(--text-2);
}

/* Article canvas */
.canvas {
  --pad: clamp(18px, 4vw, 44px);
  width: min(var(--article-max), 100%); margin-inline: auto;
  padding: var(--pad) max(var(--space-4), env(safe-area-inset-right)) 120px max(var(--space-4), env(safe-area-inset-left));
}
.canvas__paper {
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--line);
  padding: clamp(20px, 4vw, 40px);
}

/* Bottom action bar (mobile first) */
.actionbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 70;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: var(--space-2);
  padding: 7px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--surface-3) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--line-strong), var(--shadow-lg);
}

/* Countdown */
.countdown {
  position: fixed; inset: 0; z-index: 180; display: grid; place-items: center;
  background: #05060ae6; backdrop-filter: blur(10px);
}
.countdown__n {
  font-size: clamp(90px, 22vw, 190px); font-weight: 800; letter-spacing: -.06em;
  line-height: 1; color: var(--text);
  animation: countPop .9s var(--ease-out);
}
.countdown__go {
  background: linear-gradient(100deg, var(--ember-400), var(--ember-600));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.countdown__cap { text-align: center; color: var(--text-2); margin-top: var(--space-3); }
@keyframes countPop {
  0% { opacity: 0; transform: scale(1.6); }
  30% { opacity: 1; transform: scale(1); }
  100% { opacity: .85; transform: scale(.94); }
}

/* --- Results screen --- */

.podium { display: grid; gap: var(--space-2); }
.result-row {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
}
.result-row--1 {
  background: linear-gradient(100deg, #fbbf2418, var(--surface-2));
  box-shadow: inset 0 0 0 1px #fbbf2455;
}
.result-row--me { box-shadow: inset 0 0 0 1px var(--accent); }
.result-row__rank {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums;
}
.result-row--1 .result-row__rank { background: var(--amber-400); color: #241a00; }
.result-row__metric { font-variant-numeric: tabular-nums; font-weight: 700; }

/* Route replay */
.replay { display: grid; gap: 0; }
.replay__step {
  display: grid; grid-template-columns: 26px 1fr auto; gap: var(--space-3); align-items: center;
  padding: 9px 0; position: relative;
}
.replay__step + .replay__step { border-top: 1px solid var(--line); }
.replay__dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong);
  margin-inline: auto; position: relative;
}
.replay__step:not(:last-child) .replay__dot::after {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 1px; height: 26px; background: var(--line);
}
.replay__step--first .replay__dot { background: var(--text-2); }
.replay__step--last .replay__dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.replay__title { font-size: 14.5px; font-weight: 500; }
.replay__t { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* The generator's own route, folded away on the results screen.
   A <details> wearing .card, so the summary has to carry the head styling and
   drop its own marker. The head's divider is only right when it has something
   under it, otherwise a closed card ends in a stray line. */
.solution > summary {
  cursor: pointer;
  list-style: none;
}
.solution > summary::-webkit-details-marker { display: none; }
.solution > summary::after {
  content: "+"; color: var(--text-3); font-size: 20px; line-height: 1;
}
.solution[open] > summary::after { content: "−"; }
.solution:not([open]) > summary { border-bottom: 0; }
.solution > summary:hover { background: var(--surface-2); }
.solution .replay__step { grid-template-columns: 26px 1fr; }

/* Share box */
.sharebox {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- 6. Wikipedia article typography ------------------------------- */
/* Wikipedia's own CSS is not loaded, so the content styles are recreated
   here. Scope is limited to .articlebody. */

.articlebody {
  font-family: var(--font-article);
  font-size: 17.5px; line-height: 1.72; color: var(--text);
}
.articlebody h1 {
  font-size: clamp(28px, 5vw, 38px); font-weight: 700; letter-spacing: -.02em;
  line-height: 1.15; padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.articlebody h2 {
  font-size: 25px; font-weight: 700; margin-top: 1.4em; padding-bottom: 6px;
  border-bottom: 1px solid var(--line); letter-spacing: -.01em;
}
.articlebody h3 { font-size: 20px; font-weight: 700; margin-top: 1.3em; }
.articlebody h4, .articlebody h5, .articlebody h6 { font-size: 17px; font-weight: 700; margin-top: 1.2em; }
.articlebody p { margin-top: .7em; }
.articlebody ul, .articlebody ol { margin-top: .6em; padding-left: 1.7em; }
.articlebody li { margin-top: .25em; }
.articlebody dl { margin-top: .6em; }
.articlebody dd { margin-left: 1.6em; }
.articlebody dt { font-weight: 700; }
.articlebody hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
.articlebody blockquote {
  margin: 1em 0; padding: .4em 0 .4em 1.1em;
  border-left: 3px solid var(--line-strong); color: var(--text-2); font-style: italic;
}
.articlebody sup, .articlebody sub { line-height: 0; font-size: .72em; }
.articlebody code, .articlebody pre, .articlebody tt {
  font-family: var(--font-mono); font-size: .86em;
  background: var(--surface-2); border-radius: 4px; padding: .1em .35em;
}
.articlebody pre { padding: .8em 1em; overflow-x: auto; }

/* Playable links, the game's main interaction */
.articlebody a.wl {
  color: var(--link); text-decoration: none; cursor: pointer;
  border-radius: 3px; padding: 0 1px; margin: 0 -1px;
  transition: background .12s, color .12s;
}
.articlebody a.wl:hover { background: var(--accent-soft); color: var(--accent-text); }
.articlebody a.wl:visited { color: var(--link-visited); }
/* Disabled links (external, file, category, in-page anchor) */
.articlebody a.wl-off {
  color: var(--text-3); text-decoration: none; cursor: not-allowed;
  border-bottom: 1px dotted var(--line-strong);
}
/* Red link: an article that has not been written on Wikipedia yet.
   Wikipedia shows these in red, and we keep the same cue so the player can
   tell it leads nowhere before clicking. */
.articlebody a.wl-red {
  color: color-mix(in srgb, var(--danger) 75%, var(--text-3));
  border-bottom-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
/* Targets blocked in forbidden zone mode */
.articlebody a.wl-banned {
  color: var(--danger); text-decoration: line-through; cursor: not-allowed;
}

/* Infobox */
.articlebody .infobox, .articlebody .infobox_v2, .articlebody .infobox_v3 {
  float: right; clear: right; width: 300px; max-width: 42%;
  margin: 0 0 1em 1.4em; padding: 0;
  font-family: var(--font-ui); font-size: 13px; line-height: 1.5;
  background: var(--surface-2); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
  border-collapse: collapse;
}
.articlebody .infobox caption,
.articlebody .infobox th[colspan], .articlebody .infobox .infobox-title,
.articlebody .infobox-above {
  padding: 10px 12px; font-size: 15px; font-weight: 700; text-align: center;
  background: var(--surface-3);
}
.articlebody .infobox th, .articlebody .infobox td { padding: 6px 10px; text-align: left; vertical-align: top; }
.articlebody .infobox th { color: var(--text-2); font-weight: 600; width: 38%; }
.articlebody .infobox tr + tr > * { border-top: 1px solid var(--line); }
.articlebody .infobox img { border-radius: var(--radius-xs); margin-inline: auto; }
.articlebody .infobox-image, .articlebody .infobox-caption { text-align: center; }
.articlebody .infobox-caption { color: var(--text-3); font-size: 12px; }

/* Tables */
.articlebody table.wikitable {
  border-collapse: collapse; margin: 1em 0; font-family: var(--font-ui);
  font-size: 14px; background: var(--surface-2);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--line);
}
.articlebody table.wikitable th, .articlebody table.wikitable td {
  padding: 7px 11px; border: 1px solid var(--line); text-align: left; vertical-align: top;
}
.articlebody table.wikitable th { background: var(--surface-3); font-weight: 700; }
/* Wide tables must not force the page to scroll horizontally */
.articlebody .tablewrap { overflow-x: auto; margin: 1em 0; }
.articlebody .tablewrap > table { margin: 0; }

/* Images */
.articlebody figure, .articlebody .thumb {
  margin: 1em 0; max-width: 100%;
}
.articlebody .thumb.tright, .articlebody figure.mw-halign-right {
  float: right; clear: right; margin: .4em 0 1em 1.4em; max-width: 45%;
}
.articlebody .thumb.tleft, .articlebody figure.mw-halign-left {
  float: left; clear: left; margin: .4em 1.4em 1em 0; max-width: 45%;
}
.articlebody .thumbinner, .articlebody figure {
  background: var(--surface-2); padding: 6px; border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.articlebody img { height: auto; border-radius: var(--radius-xs); }
.articlebody .thumbcaption, .articlebody figcaption {
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.45;
  color: var(--text-3); padding: 6px 4px 2px;
}
.articlebody .magnify { display: none; }

/* Navboxes, the link tables at the foot of a page.
   Most of the game runs through these, so they have to stay readable. */
.articlebody .navbox {
  font-family: var(--font-ui); font-size: 13px; line-height: 1.6;
  width: 100%; margin: 1.4em 0 0; border-collapse: collapse;
  background: var(--surface-2); border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--line); overflow: hidden;
}
.articlebody .navbox + .navbox { margin-top: var(--space-2); }
.articlebody .navbox th, .articlebody .navbox td { padding: 6px 10px; vertical-align: top; }
.articlebody .navbox-title, .articlebody .navbox th[colspan] {
  background: var(--surface-3); font-weight: 700; font-size: 13.5px; text-align: center;
}
.articlebody .navbox-group {
  background: color-mix(in srgb, var(--surface-3) 60%, transparent);
  font-weight: 600; color: var(--text-2); text-align: left;
  white-space: nowrap; width: 1%;
}
.articlebody .navbox-list { text-align: left; }
.articlebody .navbox tr + tr > * { border-top: 1px solid var(--line); }
.articlebody .navbox-abovebelow { color: var(--text-3); font-size: 12.5px; text-align: center; }

/* Navboxes and wide tables are the bulk of a long article and are almost
   always far below the fold. content-visibility lets the browser skip their
   layout and paint until they are approached. The usual objection, that it
   breaks the browser's find-in-page, does not apply here: in-page search is
   deliberately disabled in this game. */
.articlebody .navbox,
.articlebody .tablewrap {
  content-visibility: auto;
  contain-intrinsic-size: auto 420px;
}

/* Horizontal lists (most navbox content), Wikipedia's hlist pattern */
.articlebody .hlist ul, .articlebody .hlist ol { margin: 0; padding: 0; list-style: none; }
.articlebody .hlist li { display: inline; margin: 0; }
.articlebody .hlist li:not(:last-child)::after { content: " · "; color: var(--text-3); }
.articlebody .hlist ul ul { display: inline; }
.articlebody .plainlist ul, .articlebody .plainlist ol { list-style: none; margin: 0; padding: 0; }

/* Message boxes */
.articlebody .hatnote {
  font-family: var(--font-ui); font-size: 13.5px; font-style: italic;
  color: var(--text-3); padding: 8px 12px; margin: .6em 0;
  background: var(--surface-2); border-radius: var(--radius-xs);
}
.articlebody .quotebox, .articlebody .templatequote {
  background: var(--surface-2); padding: var(--space-4);
  border-radius: var(--radius-md); margin: 1em 0;
}

/* Keep white-background SVGs and PNGs from glaring in the dark theme */
[data-theme="dark"] .articlebody img:not([src*=".svg"]) { filter: brightness(.94); }
[data-theme="dark"] .articlebody img[src*=".svg"] {
  background: #ffffffe6; border-radius: 4px; padding: 2px;
}

.articlebody::after { content: ""; display: block; clear: both; }

/* CC BY-SA attribution. Shown under every article, required by the licence. */
.attribution {
  clear: both;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-ui); font-size: 12.5px; line-height: 1.6;
  color: var(--text-3);
}
.attribution a { color: var(--text-2); }

/* Reading preferences */
.articlebody[data-size="s"] { font-size: 16px; }
.articlebody[data-size="l"] { font-size: 19.5px; }
.articlebody[data-size="xl"] { font-size: 22px; }

/* ---------- 7. Responsiveness ----------------------------------------------- */

/* Wikipedia content is outside our control; this is the last safety net that
   keeps a table or an image from forcing the page to scroll horizontally.
   `clip`, unlike `hidden`, does not break position:sticky. */
body { overflow-x: clip; }

/* --- Tablet and below --- */
@media (max-width: 1024px) {
  :root { --article-max: 100%; }
  .canvas { padding-inline: var(--space-4); }
}

@media (max-width: 900px) {
  /* The infobox goes full width; table-layout:fixed stops long content from
     pushing the table out of its container. */
  .articlebody .infobox, .articlebody .infobox_v2, .articlebody .infobox_v3 {
    float: none; width: 100%; max-width: 100%; margin: 1em 0;
    table-layout: fixed;
  }
  .articlebody .infobox th, .articlebody .infobox td { overflow-wrap: anywhere; }
  .articlebody .thumb.tright, .articlebody .thumb.tleft,
  .articlebody figure.mw-halign-right, .articlebody figure.mw-halign-left {
    float: none; max-width: 100%; margin: 1em 0;
  }
  .panel { width: 100%; }
}

/* --- Phone --- */
@media (max-width: 680px) {
  :root { --header-h: 54px; }

  .wrap { padding-inline: var(--space-4); }
  .appbar { padding-inline: var(--space-3); gap: var(--space-2); }
  .brand { font-size: 15px; }

  .modes { grid-template-columns: 1fr; }
  .pair { grid-template-columns: 1fr; }
  .pair__arrow { transform: rotate(90deg); justify-self: center; }
  .pair__side { min-height: 0; }

  /* The race header drops to two rows: target on top, counters full width below */
  .racebar { flex-wrap: wrap; gap: var(--space-2); padding: 8px var(--space-3); }
  .racebar > .grow { display: none; }
  .target-chip { order: -1; width: 100%; flex: 1 0 100%; }
  .hud { width: 100%; flex: 1 0 100%; }
  .hud__stat { flex: 1; min-width: 0; }

  .trailbar { position: static; padding-inline: var(--space-3); }
  .rivals { padding-inline: var(--space-3); }
  .trail__step { max-width: 140px; }

  .canvas { padding-inline: var(--space-3); padding-bottom: 110px; }
  .canvas__paper { padding: var(--space-3) 0; background: transparent; box-shadow: none; }
  .articlebody { font-size: 16.5px; }
  .articlebody h2 { font-size: 21px; }
  .articlebody h3 { font-size: 18px; }


  .lobbycode { padding: var(--space-4); }
  .lobbycode__d { width: 100%; max-width: 46px; height: 48px; font-size: 21px; }
  .lobbycode__digits { width: 100%; justify-content: center; gap: 5px; }
  .codeinput { font-size: 22px; letter-spacing: .35em; text-indent: .35em; }

  .statstrip { grid-template-columns: repeat(2, 1fr); }
  .card__body { padding: var(--space-4); }
  .card__head {
    padding: var(--space-3) var(--space-4);
    flex-wrap: wrap; gap: var(--space-2);
  }
  .card__head .chip { font-size: 11px; }
  .page-head__title { font-size: 20px; }

  /* Make the bottom action bar comfortable under a thumb */
  .actionbar { width: calc(100% - 24px); justify-content: space-around; }
  .actionbar .btn { padding: 10px 12px; }
}

/* --- Small phone --- */
@media (max-width: 380px) {
  .lobbycode__d { max-width: 40px; height: 44px; font-size: 18px; }
  .statstrip { grid-template-columns: 1fr 1fr; }
  .segmented--grid { grid-auto-flow: row; grid-auto-columns: auto; }
  .hero__title { font-size: 30px; }
}

/* --- Landscape phone: vertical space is scarce --- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-block: var(--space-5); }
  .countdown__n { font-size: 72px; }
  .chat__log { max-height: 120px; }
}

/* --- Touch devices: grow the hit targets --- */
@media (hover: none) and (pointer: coarse) {
  .articlebody a.wl { padding: 2px 2px; margin: 0 -2px; }
  .btn { min-height: 42px; }
  .segmented__opt { min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

@media print {
  .racebar, .trailbar, .rivals, .actionbar, .appbar { display: none !important; }
}