/* WikiRacers: newsprint puzzle. Cream paper, ink borders, hard offset shadows,
   and the same blue/red/green squares the share card uses. */
:root {
  --bg: #f4efe3;
  --surface: #fffdf7;
  --surface-2: #ece5d3;
  --text: #1a1814;
  --ink: #1a1814;
  --muted: #6b6455;
  --border: #1a1814;
  --hairline: #d6cdb6;
  --accent: #ffd23f; /* highlighter yellow: primary actions, the daily */
  --accent-text: #1a1814;
  --accent-soft: #fff1b8;
  --link: #2f5fd0;
  --c-blue: #4a7cf0; /* a click */
  --c-red: #e5484d; /* a back move */
  --c-green: #3fa66b; /* the goal */
  --good: #23784a;
  --good-soft: #dff1e4;
  --danger: #c92a2a;
  --danger-soft: #fbe3e1;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 6px;
  --serif: 'Fraunces', 'Georgia', 'Times', serif;
  --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --article-serif: 'Linux Libertine', 'Georgia', 'Times', serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1a1814;
    --surface: #24211c;
    --surface-2: #2f2b24;
    --text: #f1ead9;
    --ink: #f1ead9;
    --muted: #a99f8a;
    --border: #f1ead9;
    --hairline: #4a4438;
    --accent: #ffd23f;
    --accent-text: #1a1814;
    --accent-soft: #4a3f17;
    --link: #8fb0ff;
    --good: #7fd69c;
    --good-soft: #1f3a29;
    --danger: #ff8a80;
    --danger-soft: #42221f;
    --shadow: 4px 4px 0 #000;
    --shadow-sm: 3px 3px 0 #000;
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #1a1814;
  --surface: #24211c;
  --surface-2: #2f2b24;
  --text: #f1ead9;
  --ink: #f1ead9;
  --muted: #a99f8a;
  --border: #f1ead9;
  --hairline: #4a4438;
  --accent: #ffd23f;
  --accent-text: #1a1814;
  --accent-soft: #4a3f17;
  --link: #8fb0ff;
  --good: #7fd69c;
  --good-soft: #1f3a29;
  --danger: #ff8a80;
  --danger-soft: #42221f;
  --shadow: 4px 4px 0 #000;
  --shadow-sm: 3px 3px 0 #000;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
}
a { color: var(--link); }
h1, h2, h3 { line-height: 1.15; }
h2 { font-family: var(--serif); font-weight: 800; font-size: 1.25rem; margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h3 {
  font-size: 0.72rem; font-weight: 800; margin: 0 0 0.5rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--muted);
}
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mt { margin-top: 1rem; }
.error { color: var(--danger); margin: 0.5rem 0 0; font-weight: 600; }
.row { display: flex; gap: 0.6rem; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
[hidden] { display: none !important; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 1rem; background: var(--bg); border-bottom: 2px solid var(--ink);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--text); text-decoration: none; }
.brand-mark { width: 30px; height: 30px; flex: none; display: block; }
.brand-name { font-family: var(--serif); font-weight: 900; font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1; }
.chip {
  font-family: var(--mono); font-weight: 700; font-size: 0.78rem; padding: 0.2rem 0.6rem; border-radius: 4px;
  background: var(--accent); color: var(--accent-text); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

main { max-width: 1280px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.screen { display: none; }
.screen.active { display: block; }

.card {
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1.25rem; box-shadow: var(--shadow); min-width: 0;
}
.card.compact { padding: 0.85rem 1rem; }

label {
  display: block; font-size: 0.72rem; font-weight: 800; color: var(--muted); margin-bottom: 0.3rem;
  text-transform: uppercase; letter-spacing: 0.1em;
}
input, select {
  width: 100%; font: inherit; color: var(--text); background: var(--surface);
  border: 2px solid var(--ink); border-radius: 4px; padding: 0.5rem 0.65rem;
}
input::placeholder { color: var(--muted); opacity: 0.8; }
select {
  appearance: none; cursor: pointer; padding-right: 2rem; font-weight: 600;
  background: var(--surface) no-repeat right 0.6rem center / 0.7rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2.5'/%3E%3C/svg%3E");
}
input:focus, select:focus { outline: none; background: var(--accent-soft); }
input:disabled, select:disabled { background: var(--surface-2); color: var(--text); opacity: 1; border-style: dashed; }

/* Chunky buttons that press down when clicked. */
.btn {
  font: inherit; font-weight: 800; cursor: pointer; border-radius: 4px; padding: 0.5rem 0.95rem;
  border: 2px solid var(--ink); background: var(--surface); color: var(--text); white-space: nowrap;
  box-shadow: var(--shadow-sm); transition: transform 0.06s, box-shadow 0.06s, background 0.1s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--accent); color: var(--accent-text); }
.btn.primary:hover:not(:disabled) { background: #ffdb63; }
.btn.ghost { background: transparent; box-shadow: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); }
.btn.ghost:active:not(:disabled) { transform: none; }
.btn.danger { color: var(--danger); }
.btn.big { width: 100%; padding: 0.8rem; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: var(--shadow); }
.btn.big:active:not(:disabled) { transform: translate(4px, 4px); }
.btn:focus-visible, .player.clickable:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* Article tiles: the start and goal of a race, wherever they appear. */
.tiles { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.tile {
  font-family: var(--serif); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15;
  background: var(--surface); color: var(--text); border: 2px solid var(--ink); border-radius: 4px;
  padding: 0.45rem 0.7rem; box-shadow: var(--shadow-sm); min-width: 0; overflow-wrap: anywhere;
}
.tile.goal { background: var(--c-green); color: #fff; }
.tile.goal:not(:has(.tile-label))::before, .tile.goal .tile-label::before { content: '🏁 '; }
.tile-arrow { font-weight: 900; font-size: 1.3rem; color: var(--ink); }
.tile-label { display: block; font-family: var(--sans); font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.75; margin-bottom: 0.1rem; }

/* The click squares, as on the share card. */
.squares { display: flex; flex-wrap: wrap; gap: 4px; }
.sq { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 3px; background: var(--c-blue); }
.sq.back { background: var(--c-red); }
.sq.goal { background: var(--c-green); }
.sq.more { background: none; border: 0; width: auto; font-weight: 800; line-height: 22px; }

/* host-only controls */
body:not(.is-host) .hostonly { display: none; }

/* ---------- home ---------- */
/* Paper grain on the page background. */
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.topnav { display: flex; gap: 1.6rem; margin-left: auto; margin-right: 1rem; }
.topnav a { color: var(--text); text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.topnav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
body:not([data-screen='home']) .topnav { display: none; }

.home { position: relative; max-width: 1180px; margin: 0 auto; padding: 1.5rem 0 1rem; }
.home::before, .home::after {
  /* checkered corners, like the edge of a finish-line banner */
  content: ''; position: absolute; bottom: -2.5rem; width: 96px; height: 96px; pointer-events: none;
  background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(to top right, #000 45%, transparent 46%); mask: linear-gradient(to top right, #000 45%, transparent 46%);
}
.home::before { left: -150px; }
.home::after { right: -150px; transform: scaleX(-1); }
.deco-flag { position: absolute; left: -185px; top: 3.5rem; width: 170px; transform: rotate(-8deg); pointer-events: none; }

.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.kicker-line { display: flex; align-items: center; gap: 1rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 1.1rem; }
.kicker-line::after { content: ''; flex: 1; max-width: 260px; border-top: 1.5px solid var(--ink); }
.hero-copy h1 {
  font-family: var(--serif); font-weight: 900; font-size: clamp(2.6rem, 6.2vw, 4.6rem); line-height: 0.98;
  letter-spacing: -0.045em; margin: 0 0 1.1rem;
}
.hero-copy h1 em {
  font-style: normal; padding: 0 0.12em; margin-left: -0.12em;
  background: linear-gradient(transparent 62%, var(--accent) 62%, var(--accent) 90%, transparent 90%);
}
.lede { color: var(--text); opacity: 0.85; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.45; margin: 0 0 1.6rem; max-width: 34ch; }
.hero-actions { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero-btn { font-size: 1.25rem; padding: 0.75rem 2.6rem; text-transform: uppercase; letter-spacing: 0.04em; box-shadow: var(--shadow); }
.hero-btn:active:not(:disabled) { transform: translate(4px, 4px); }
.text-link { color: var(--text); font-weight: 800; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; margin-top: 1.5rem; font-size: 0.98rem; }
.stat-chip { display: inline-flex; align-items: center; gap: 0.45rem; }
.stat-chip + .stat-chip { padding-left: 1.4rem; border-left: 1.5px solid var(--ink); }
.stat-chip svg { width: 1.35rem; height: 1.35rem; fill: var(--ink); stroke: var(--ink); }

/* daily card, home version: bigger tiles with the articles' own images */
.home .daily-card { padding: 1.6rem 1.4rem 1.2rem; gap: 1rem; }
.home #dailyNum { font-size: 0.85rem; padding: 0.2rem 0.6rem; box-shadow: 2px 2px 0 var(--ink); }
.art-tile { position: relative; display: flex; flex-direction: column; min-height: 150px; overflow: hidden; padding: 0.6rem 0.75rem; }
.art-tile .tile-label { font-size: 0.72rem; }
.art-tile .tile-name { position: relative; z-index: 1; font-size: clamp(1.15rem, 2vw, 1.55rem); line-height: 1.05; }
.tile-art { position: absolute; inset: 40% 0 0 0; display: block; }
.tile-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  /* engraving-ish: high-contrast greyscale printed onto the paper */
  filter: grayscale(1) contrast(1.35) brightness(1.08); mix-blend-mode: multiply;
  -webkit-mask: linear-gradient(to bottom, transparent, #000 35%); mask: linear-gradient(to bottom, transparent, #000 35%);
}
.tile.goal .tile-art img { filter: grayscale(1) contrast(1.5) brightness(0.95); opacity: 0.55; }
.home .daily-route .tile-arrow { font-size: 1.6rem; }

/* mode cards */
.mode-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.75rem; }
.mode-card { display: grid; gap: 0.8rem; align-content: start; padding: 1.4rem 1.5rem; }
.mode-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 0.3rem; }
.mode-head h2 { font-size: 1.6rem; margin: 0 0 0.25rem; letter-spacing: -0.02em; }
.mode-head p { margin: 0; max-width: 40ch; }
.mode-icon { width: 54px; height: 54px; flex: none; }
.mode-card .btn.big { justify-self: start; width: auto; min-width: min(100%, 320px); }
.mode-card .field label { margin-bottom: 0.3rem; }
.join-toggle { justify-self: start; min-width: min(100%, 320px); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; background: var(--surface-2); }
.join-row { display: flex; gap: 0.5rem; max-width: 420px; }
.practice-link { justify-self: start; }
.mode-card { position: relative; overflow: hidden; }
.mode-deco { position: absolute; right: -6px; bottom: -6px; width: min(46%, 260px); pointer-events: none; }
@media (max-width: 640px) { .mode-deco { display: none; } }

/* how it works + about */
.how, .about { margin-top: 3rem; }
.rule-title { display: flex; align-items: center; gap: 1.25rem; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; margin-bottom: 1.25rem; }
.rule-title::before, .rule-title::after { content: ''; flex: 1; border-top: 1.5px solid var(--ink); }
.howto { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); counter-reset: step; }
.howto li { display: flex; gap: 1rem; align-items: flex-start; padding: 0 1.5rem; counter-increment: step; color: var(--muted); }
.howto li + li { border-left: 1.5px solid var(--ink); }
.howto li::before {
  content: counter(step); flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  font: 800 1.2rem var(--serif); color: var(--text); background: var(--surface); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink);
}
.howto b { display: block; color: var(--text); font-family: var(--serif); font-weight: 800; font-size: 1.05rem; margin-bottom: 0.1rem; }
.about p { text-align: center; max-width: 70ch; margin: 0 auto; }

/* an invite link: just the join card */
body.joining .home-hero, body.joining #quickCard, body.joining .how, body.joining .about, body.joining .deco-flag { display: none; }
body.joining .mode-row { grid-template-columns: minmax(0, 520px); justify-content: center; margin-top: 1rem; }
body.joining .home::before, body.joining .home::after { display: none; }
body.joining .join-toggle { display: none; }

@media (max-width: 1500px) { .deco-flag, .home::before, .home::after { display: none; } }
@media (max-width: 900px) {
  .home-hero, .mode-row { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .mode-row { margin-top: 1.5rem; }
  .howto { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .howto li { padding: 0; }
  .howto li + li { border-left: 0; }
  .topnav { display: none; }
}
@media (max-width: 640px) {
  .hero-btn { flex: 1; }
  .hero-stats { flex-direction: column; }
  .stat-chip + .stat-chip { border-left: 0; padding-left: 0; }
  .art-tile { min-height: 120px; }
  .mode-card .btn.big, .join-toggle { width: 100%; }
}

/* ---------- lobby ---------- */
.lobby-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.25rem; align-items: start; }
.share { display: flex; gap: 0.6rem; }
.share input { font-family: var(--mono); font-size: 0.85rem; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-bottom: 0.9rem; }
.pair-arrow { padding-top: 1.75rem; font-weight: 900; font-size: 1.3rem; }
.field { min-width: 0; }

.preview { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.5rem; min-height: 1rem; }
.preview img { width: 52px; height: 52px; object-fit: cover; border-radius: 4px; flex: none; background: var(--surface-2); border: 2px solid var(--ink); }
.preview-title { font-weight: 800; font-family: var(--serif); font-size: 1.05rem; }

.players { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.player { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.4rem; min-width: 0; border-bottom: 1px dashed var(--hairline); }
.player:last-child { border-bottom: 0; }
.player.offline { opacity: 0.5; }
.dot { width: 12px; height: 12px; border-radius: 2px; flex: none; border: 2px solid var(--ink); }
.pname { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.05rem 0.35rem;
  border-radius: 3px; border: 1.5px solid var(--ink); background: var(--accent); color: var(--accent-text); white-space: nowrap;
}
.tag.you { background: var(--surface); color: var(--text); }
.tag.off { background: transparent; color: var(--muted); border-style: dashed; border-color: var(--muted); }
.pextra { margin-left: auto; font-size: 0.85rem; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- race ---------- */
.racebar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 0.6rem 0.9rem; box-shadow: var(--shadow); position: sticky; top: 62px; z-index: 10; margin-bottom: 1.25rem;
}
.route { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.route b { font-family: var(--serif); font-weight: 800; font-size: 1rem; }
.route .tile { padding: 0.25rem 0.5rem; box-shadow: 2px 2px 0 var(--ink); }
.route-label { display: none; }
.route-arrow { font-weight: 900; }
.stats { display: flex; gap: 0.5rem; }
.stat {
  display: flex; flex-direction: column; align-items: center; min-width: 4.2rem; padding: 0.15rem 0.5rem;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--bg);
}
.stat-label { font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.stat-value { font-size: 1.2rem; font-weight: 700; line-height: 1.2; }
#remainingWrap.urgent { background: var(--c-red); }
#remainingWrap.urgent .stat-value, #remainingWrap.urgent .stat-label { color: #fff; }

.race-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1.25rem; align-items: start; }
.side { display: grid; gap: 1.25rem; position: sticky; top: 140px; }
.path { margin: 0; padding: 0; list-style: none; max-height: 260px; overflow: auto; font-size: 0.9rem; counter-reset: p; }
.path li { counter-increment: p; display: flex; gap: 0.5rem; padding: 0.15rem 0; }
.path li::before { content: counter(p); font: 700 0.75rem/1.6 var(--mono); color: var(--muted); min-width: 1.2rem; text-align: right; }
.path li:first-child::before { content: '▶'; }
.path li.back { color: var(--c-red); }

.banner {
  border: 2px solid var(--ink); border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 1.25rem;
  background: var(--accent-soft); color: var(--text); font-weight: 700; box-shadow: var(--shadow-sm);
}
.banner.good { background: var(--c-green); color: #fff; }

.overlay {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
}
.countdown-inner { text-align: center; padding: 1rem; display: grid; justify-items: center; gap: 0.5rem; }
.countdown-inner .muted { font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; }
.countdown-goal { font-family: var(--serif); font-size: clamp(1.6rem, 5vw, 2.6rem); font-weight: 900; }
.countdown-num {
  display: grid; place-items: center; width: clamp(7rem, 26vw, 10rem); aspect-ratio: 1; margin-top: 1rem;
  font: 800 clamp(4.5rem, 18vw, 7rem)/1 var(--mono); background: var(--accent); color: var(--accent-text);
  border: 3px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink);
  animation: pop 1s ease-out infinite;
}
@keyframes pop { 0% { transform: scale(1.12); } 25% { transform: scale(1); } }

/* ---------- results ---------- */
.results-wrap { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.results-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.9rem; }
.results-head h2 { font-size: 1.5rem; margin: 0.15rem 0; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.result { display: flex; gap: 0.75rem; padding: 0.75rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--bg); }
.result.mine { background: var(--accent-soft); }
.result.dnf { opacity: 0.65; border-style: dashed; }
.result-badge { font-size: 1.5rem; width: 2rem; text-align: center; flex: none; line-height: 1.2; font-family: var(--mono); font-weight: 800; }
.result-main { min-width: 0; flex: 1; }
.result-top { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.result-path { margin-top: 0.45rem; font-size: 0.85rem; line-height: 1.5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0; }
.result-path .hop { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.result-path .step { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.result-path .path-mid { display: contents; }
.result-path:not(.expanded) .path-mid { display: none; }
.path-more {
  font: 700 0.75rem var(--sans); cursor: pointer; margin: 0 0.25rem; padding: 0.05rem 0.45rem;
  border: 1.5px dashed var(--ink); border-radius: 3px; background: transparent; color: var(--text);
}
.result-path.expanded .path-more { order: 1; margin-top: 0.15rem; }
.result-path .step {
  background: var(--surface); border: 1.5px solid var(--ink); border-left: 5px solid var(--c-blue);
  border-radius: 3px; padding: 0.05rem 0.4rem; white-space: nowrap; font-weight: 600;
}
.result-path .step:first-child { border-left-color: var(--ink); }
.result-path .step.goal { border-left-color: var(--c-green); background: var(--good-soft); }
.result-path .step.back { border-left-color: var(--c-red); border-style: dashed; border-left-style: solid; color: var(--muted); }
.result-path .sep { color: var(--muted); margin: 0 0.25rem; font-weight: 800; }

/* ---------- toasts / connection ---------- */
#toasts { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); display: grid; gap: 0.5rem; z-index: 100; width: min(92vw, 420px); }
.toast {
  background: var(--surface); color: var(--text); padding: 0.6rem 0.9rem; border: 2px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); font-weight: 700; transition: opacity 0.4s, transform 0.4s;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }
.toast.error { background: var(--c-red); color: #fff; }
.toast.good { background: var(--c-green); color: #fff; }
.toast.out { opacity: 0; transform: translateY(8px); }
.conn {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--c-red); color: #fff; padding: 0.35rem 0.9rem; border: 2px solid var(--ink); border-radius: 4px;
  font-weight: 800; box-shadow: var(--shadow-sm);
}

/* ---------- article (Wikipedia content stays on light paper in both themes, in Wikipedia's own type) ---------- */
.paper {
  color-scheme: light;
  --wp-text: #202122; --wp-link: #3366cc; --wp-border: #a2a9b1; --wp-bg2: #f8f9fa;
  background: #fff; color: var(--wp-text);
  border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem 2rem 2.5rem; font-size: 0.95rem; line-height: 1.6; min-height: 60vh;
  transition: opacity 0.15s; overflow-wrap: break-word;
}
.paper.loading { opacity: 0.45; pointer-events: none; cursor: progress; }
.paper.hidden-content { visibility: hidden; }
.wr-title { font-family: var(--article-serif); font-weight: 400; font-size: 2rem; margin: 0 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--wp-border); }
.wr-body h2 { font-family: var(--article-serif); font-weight: 400; font-size: 1.5rem; border-bottom: 1px solid var(--wp-border); margin: 1.4em 0 0.5em; padding-bottom: 0.15em; }
.wr-body h3 { font-size: 1.15rem; text-transform: none; letter-spacing: 0; color: inherit; font-weight: 700; margin: 1.2em 0 0.4em; }
.wr-body h4 { margin: 1em 0 0.3em; }
.wr-body .mw-heading { clear: none; }
.wr-body p { margin: 0.5em 0; }
.wr-body img { max-width: 100%; height: auto; vertical-align: middle; }
.wr-body a { color: var(--wp-link); text-decoration: none; }
.wr-body a.wr-link { cursor: pointer; }
.wr-body a.wr-link:hover { text-decoration: underline; }
.wr-body a.wr-link:visited { color: var(--wp-link); }
.wr-body a.wr-dead { color: inherit; cursor: default; }
.wr-body a.wr-anchor { cursor: pointer; }
.wr-body sup, .wr-body sub { line-height: 1; }
.wr-body .shortdescription, .wr-body .mw-empty-elt, .wr-body .noprint.portal, .wr-body .mw-cite-backlink { display: none; }
.wr-body .hatnote { font-style: italic; padding-left: 1.6em; margin-bottom: 0.5em; color: #54595d; }
.wr-body blockquote { border-left: 4px solid #eaecf0; margin: 1em 0; padding: 0 1em; }

.wr-body .infobox, .wr-body .sidebar {
  float: right; clear: right; width: 22em; max-width: 100%; margin: 0 0 1em 1.2em;
  border: 1px solid var(--wp-border); background: var(--wp-bg2); font-size: 88%; line-height: 1.5; padding: 0.2em; border-spacing: 3px;
}
.wr-body .infobox th, .wr-body .infobox td { vertical-align: top; text-align: left; padding: 0.15em 0.3em; }
.wr-body .infobox-above, .wr-body .infobox-title { font-size: 125%; font-weight: bold; text-align: center; }
.wr-body .infobox-image, .wr-body .infobox-caption { text-align: center; }

.wr-body figure, .wr-body .thumb { margin: 0.5em 0 1.2em; }
.wr-body figure[typeof~='mw:File/Thumb'], .wr-body figure[typeof~='mw:File/Frame'] {
  display: table; border: 1px solid #c8ccd1; background: var(--wp-bg2); padding: 3px; font-size: 88%;
}
.wr-body figure > figcaption { display: table-caption; caption-side: bottom; padding: 4px 3px; line-height: 1.4; background: var(--wp-bg2); border: 1px solid #c8ccd1; border-top: 0; }
.wr-body figure.mw-default-size, .wr-body figure.mw-halign-right, .wr-body .tright { float: right; clear: right; margin-left: 1.4em; }
.wr-body figure.mw-halign-left, .wr-body .tleft { float: left; clear: left; margin-right: 1.4em; }
.wr-body figure.mw-halign-center { margin-left: auto; margin-right: auto; }
.wr-body .thumbinner { border: 1px solid #c8ccd1; background: var(--wp-bg2); padding: 3px; font-size: 88%; }
.wr-body .gallery { display: flex; flex-wrap: wrap; gap: 0.5em; padding: 0; list-style: none; }
.wr-body .gallerybox { font-size: 88%; }

.wr-body table.wikitable {
  border-collapse: collapse; background: var(--wp-bg2); border: 1px solid var(--wp-border); margin: 1em 0;
  display: block; overflow-x: auto; max-width: 100%;
}
.wr-body table.wikitable > * > tr > th, .wr-body table.wikitable > * > tr > td { border: 1px solid var(--wp-border); padding: 0.2em 0.4em; }
.wr-body table.wikitable > * > tr > th { background: #eaecf0; text-align: center; }

.wr-body .navbox, .wr-body .navbox-styles + .navbox { clear: both; width: 100%; border: 1px solid var(--wp-border); padding: 1px; margin-top: 1em; font-size: 88%; text-align: center; }
.wr-body .navbox table { width: 100%; border-spacing: 0; }
.wr-body .navbox-title, .wr-body .navbox-abovebelow, .wr-body .navbox-group { background: #ccf; padding: 0.25em 1em; }
.wr-body .navbox-group { background: #ddf; text-align: right; white-space: nowrap; font-weight: bold; }
.wr-body .navbox-list { text-align: left; padding: 0 0.5em; border-left: 2px solid #fdfdfd; }
.wr-body .navbox-even { background: #f7f7f7; }
.wr-body .navbox-odd { background: transparent; }
.wr-body .hlist ul, .wr-body .hlist ol { margin: 0; padding: 0; }
.wr-body .hlist li { display: inline; }
.wr-body .hlist li:not(:last-child)::after { content: ' · '; font-weight: bold; }

.wr-body .reflist, .wr-body .references { font-size: 88%; }
.wr-body .refbegin { font-size: 88%; }
.wr-body ol.references { padding-left: 2em; }
/* Maintenance banners ("needs more citations"…) are noise mid-race and only link to Wikipedia: pages. */
.wr-body .ambox, .wr-body .box-Multiple_issues { display: none; }
.wr-body .ombox, .wr-body .tmbox {
  border: 1px solid var(--wp-border); border-left: 10px solid #36c; background: #fbfbfb;
  margin: 0.5em 0 !important; width: auto !important; max-width: 100%; font-size: 88%;
}
.wr-body .mw-collapsible-toggle { display: none; }
.wr-body .toc, .wr-body #toc { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .race-layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; order: -1; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .side .card:has(#myPath) { display: none; }
  .results-wrap, .lobby-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  main { padding: 1rem 16px 3rem; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair-arrow { display: none; }
  .racebar { top: 56px; gap: 0.5rem; padding: 0.5rem 0.6rem; }
  .route { flex-basis: 100%; }
  .stats { flex: 1; }
  .stat { flex: 1; min-width: 0; }
  .paper { padding: 1rem 16px 2rem; }
  .wr-title { font-size: 1.6rem; }
  .wr-body .infobox, .wr-body .sidebar, .wr-body figure.mw-default-size, .wr-body figure.mw-halign-right,
  .wr-body figure.mw-halign-left, .wr-body .tright, .wr-body .tleft {
    float: none; width: auto; margin: 0.75em 0;
  }
  .wr-body figure[typeof~='mw:File/Thumb'] { display: block; }
  .wr-body figure > figcaption { display: block; }
  .wr-body .navbox { display: none; }
  .results-head { flex-direction: column; }
  .brand-name { font-size: 1.2rem; }
}

/* narrow race sidebar: let the stat drop below the name instead of truncating it */
.side .player { flex-wrap: wrap; }
.side .tag:not(.you):not(.ghost) { display: none; }

/* ---------- join card, pair type, spectating ---------- */
.join-info { background: var(--accent-soft); border: 2px dashed var(--ink); border-radius: 4px; padding: 0.6rem 0.75rem; display: grid; gap: 0.15rem; }
.join-title { font-size: 0.95rem; }
.join-route { font-family: var(--serif); font-weight: 800; font-size: 1.1rem; }
.pair-type { width: auto; flex: 1 1 180px; }
.claim-host { display: block; margin: 0.6rem auto 0; font-size: 0.85rem; }
.hint { text-transform: none; letter-spacing: 0; font-weight: 600; margin-left: 0.25rem; color: var(--link); }
.player { flex-wrap: wrap; }
.psub { flex-basis: 100%; padding-left: 1.25rem; font-size: 0.8rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psub b { color: var(--text); font-weight: 700; }
.player.clickable { cursor: pointer; border-radius: 4px; }
.player.clickable:hover { background: var(--accent-soft); }
.player.selected { background: var(--accent); color: var(--accent-text); }
.player.selected .pextra, .player.selected .psub, .player.selected .psub b { color: var(--accent-text); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; max-height: 220px; overflow: auto; font-size: 0.85rem; }
.feed li { display: flex; gap: 0.4rem; align-items: baseline; }
.feed .dot { transform: translateY(1px); }

/* ---------- daily challenge ---------- */
.daily-card { display: grid; gap: 0.85rem; position: relative; padding-top: 1.4rem; }
.daily-card::before {
  /* checkered strip across the top, like a finish line */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 10px; border-bottom: 2px solid var(--ink);
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--surface) 0 50%) 0 0 / 10px 10px;
  border-radius: 4px 4px 0 0;
}
.daily-kicker { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
#dailyNum {
  font: 800 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  background: var(--accent); border: 2px solid var(--ink); border-radius: 3px; padding: 0.1rem 0.45rem; color: var(--accent-text);
}
.daily-kicker .muted { font-size: 0.85rem; }
.daily-route.tiles { gap: 0.5rem; }
.daily-route .tile { font-size: 1.3rem; flex: 1 1 0; }
.daily-route .tile-arrow { flex: none; }
body.daily-mode .side .card:has(#racePlayers), body.daily-mode #feedCard { display: none; }
.daily-result-route { margin: 0.4rem 0 0.9rem; }
.daily-result-route .tile { font-size: 1.05rem; padding: 0.3rem 0.55rem; }
.daily-headline { font: 800 clamp(1.6rem, 5vw, 2.1rem)/1.1 var(--serif); letter-spacing: -0.02em; margin-bottom: 0.25rem; }
.daily-headline .mono { font-weight: 700; }
#dResultRank { font-weight: 600; }
#dSquares { margin: 0.9rem 0 0.2rem; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.btn.block { display: flex; justify-content: center; }
.daily-top { list-style: none; margin: 0; padding: 0; display: grid; }
.daily-top li { display: flex; gap: 0.5rem; align-items: baseline; padding: 0.4rem 0.4rem; border-bottom: 1px dashed var(--hairline); }
.daily-top li:last-child { border-bottom: 0; }
.daily-top li.you { background: var(--accent-soft); border-radius: 4px; }
.daily-top .rank { width: 1.8rem; font: 700 0.85rem var(--mono); color: var(--muted); }
.daily-top .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dist { display: grid; gap: 0.3rem; }
.dist-row { display: grid; grid-template-columns: 1.6rem 1fr 2.5rem; gap: 0.5rem; align-items: center; font-size: 0.8rem; }
.dist-bar { height: 1rem; }
.dist-bar span { display: block; height: 100%; min-width: 4px; background: var(--surface-2); border: 2px solid var(--ink); border-radius: 2px; }
.dist-row.you .dist-bar span { background: var(--c-green); }
.daily-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; text-align: center; }
.daily-stats div { display: grid; background: var(--bg); border: 2px solid var(--ink); border-radius: 4px; padding: 0.45rem 0.25rem; }
.daily-stats b { font: 800 1.35rem var(--mono); }
.daily-stats .muted { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
#dNameForm input { flex: 1; min-width: 0; }

/* ---------- quick play ---------- */
body.public-room .setup-only, body.public-room .private-only { display: none; }
.public-info { display: grid; gap: 0.8rem; }
.public-info h2 { margin: 0; }
.public-countdown { display: flex; align-items: center; gap: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.public-countdown b {
  font-size: 1.6rem; letter-spacing: 0; background: var(--accent); color: var(--accent-text);
  border: 2px solid var(--ink); border-radius: 4px; padding: 0.1rem 0.6rem; box-shadow: var(--shadow-sm);
}
.public-next { display: grid; gap: 0.6rem; }
body.public-room .private-mt { margin-top: 0; }
.public-joined { font: 800 1.05rem var(--serif); }
.public-joined .muted { font: 600 0.85rem var(--sans); }
.practice-link { font-size: 0.85rem; font-weight: 700; padding: 0.2rem 0.4rem; }
.public-next h2 { margin: 0; }
.tag.ghost { background: var(--surface-2); color: var(--text); border-style: dashed; }
.player.ghost .pname { font-style: italic; }