/* WikiRace chrome — mimics Vector 2022, full-width. Article content styling comes from /api/wiki.css */

:root {
  --bg: #ffffff;
  --bg-subtle: #f8f9fa;
  --bg-interactive: #eaecf0;
  --bg-hover: #dadde3;
  --fg: #202122;
  --fg-subtle: #54595d;
  --fg-muted: #72777d;
  --link: #3366cc;
  --link-visited: #6a60b0;
  --link-new: #d73333;
  --border: #a2a9b1;
  --border-subtle: #c8ccd1;
  --border-muted: #dadde3;
  --progressive: #3366cc;
  --progressive-fg: #fff;
  --destructive: #d73333;
  --success: #14866d;
  --warning: #a66200;
  --shadow: 0 2px 10px rgba(0,0,0,.18);
  --serif: 'Linux Libertine', 'Georgia', 'Times', 'Source Serif Pro', serif;
  --sans: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
  --mono: 'Menlo', 'Consolas', 'Liberation Mono', 'Fira Code', monospace;
  --text-size: 16px;

}

html.theme-dark {
  --bg: #101418;
  --bg-subtle: #202122;
  --bg-interactive: #27292d;
  --bg-hover: #404244;
  --fg: #eaecf0;
  --fg-subtle: #a2a9b1;
  --fg-muted: #8b9095;
  --link: #88a3e8;
  --link-visited: #a799cd;
  --link-new: #fd7865;
  --border: #72777d;
  --border-subtle: #54595d;
  --border-muted: #393b3f;
  --progressive: #6485d1;
  --progressive-fg: #101418;
  --destructive: #fd7865;
  --success: #3cc097;
  --warning: #f1ab5a;
  --shadow: 0 4px 18px rgba(0,0,0,.55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--text-size);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.wr-muted { color: var(--fg-subtle); }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.wr-header {
  position: sticky; top: 0; z-index: 40;
  display: grid;
  grid-template-columns: minmax(260px, 300px) 1fr auto;
  align-items: center;
  gap: 24px;
  height: 64px;
  padding: 0 24px 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border-muted);
}
.wr-header-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wr-icon-btn {
  width: 36px; height: 36px; border: 0; border-radius: 2px; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--fg);
}
.wr-icon-btn:hover { background: var(--bg-interactive); }
.wr-logo { display: flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none !important; }
.wr-logo img { width: 40px; height: 40px; }
.wr-logo-text { display: flex; flex-direction: column; line-height: 1; }
.wr-wordmark { font-family: var(--serif); font-size: 22px; letter-spacing: .02em; }
.wr-wordmark .sc { font-size: 17px; }
.wr-tagline { font-family: var(--serif); font-size: 10.5px; color: var(--fg-subtle); margin-top: 4px; }

.wr-header-search { min-width: 0; }
.wr-header-search .wr-search { max-width: 520px; }
.wr-search { position: relative; display: flex; align-items: stretch; }
.wr-search input {
  flex: 1; min-width: 0; height: 36px;
  padding: 6px 8px 6px 36px;
  font: inherit; font-size: 14px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 2px 0 0 2px;
  outline: none;
}
.wr-search-inline input { padding-left: 10px; border-radius: 2px; }
.wr-search input:focus { border-color: var(--progressive); box-shadow: inset 0 0 0 1px var(--progressive); }
.wr-search input:disabled { background: var(--bg-subtle); color: var(--fg-muted); cursor: not-allowed; }
.wr-search-icon { position: absolute; left: 9px; top: 8px; color: var(--fg-subtle); pointer-events: none; }
.wr-search > .wr-btn { border-radius: 0 2px 2px 0; border-left: 0; }

.wr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 4px 12px;
  font-size: 14px; font-weight: 700;
  background: var(--bg-interactive); color: var(--fg);
  border: 1px solid var(--border); border-radius: 2px;
  cursor: pointer; white-space: nowrap;
  transition: background .1s;
}
.wr-btn:hover:not(:disabled) { background: var(--bg-hover); }
.wr-btn:disabled { opacity: .45; cursor: not-allowed; }
.wr-btn-quiet { background: transparent; border-color: transparent; font-weight: 700; }
.wr-btn-quiet:hover:not(:disabled) { background: var(--bg-interactive); }
.wr-btn-progressive { background: var(--progressive); border-color: var(--progressive); color: var(--progressive-fg); }
.wr-btn-progressive:hover:not(:disabled) { filter: brightness(1.1); background: var(--progressive); }
.wr-btn-big { min-height: 44px; padding: 6px 22px; font-size: 16px; }

.wr-suggest {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 60;
  background: var(--bg); border: 1px solid var(--border); border-radius: 2px; box-shadow: var(--shadow);
  max-height: 440px; overflow: auto;
}
.wr-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; cursor: pointer; line-height: 1.3;
}
.wr-suggest-item:hover, .wr-suggest-item.active { background: var(--bg-interactive); }
.wr-suggest-thumb {
  width: 40px; height: 40px; flex: none; border-radius: 2px; background: var(--bg-subtle) center/cover no-repeat;
  border: 1px solid var(--border-muted); display: grid; place-items: center; color: var(--fg-muted); font-size: 18px;
}
.wr-suggest-title { font-size: 14px; font-weight: 700; color: var(--fg); }
.wr-suggest-title mark { background: none; color: inherit; font-weight: 400; }
.wr-suggest-desc { font-size: 12.5px; color: var(--fg-subtle); }
.wr-suggest-item { align-items: flex-start; }
.wr-suggest-thumb { width: 56px; height: 56px; }
.wr-suggest-text { min-width: 0; }
.wr-suggest-extract { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wr-suggest-empty { padding: 10px 12px; font-size: 13px; color: var(--fg-subtle); }
.wr-setup .wr-suggest { max-height: 520px; }

.wr-header-end { display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
.wr-user-links { display: flex; gap: 16px; font-size: 14px; white-space: nowrap; }

.wr-hud { display: flex; align-items: center; gap: 6px; }
.wr-hud-item {
  display: flex; flex-direction: column; justify-content: center; line-height: 1.1;
  padding: 4px 12px; min-height: 44px; border-left: 1px solid var(--border-muted);
}
.wr-hud-label { font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .06em; }
.wr-hud-value { font-size: 17px; font-weight: 700; }
.wr-hud-target .wr-hud-value { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--serif); font-weight: 400; font-size: 18px; }
.wr-hud-timer .wr-hud-value { font-size: 22px; }
.wr-hud-timer.warn .wr-hud-value { color: var(--warning); }
.wr-hud-timer.danger .wr-hud-value { color: var(--destructive); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }

.wr-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 100;
  background: var(--progressive); transition: width .25s ease, opacity .3s; opacity: 0;
}
.wr-progress.on { opacity: 1; }

/* ---------- page (full width, main column only) ---------- */
/* Every panel lives in a header dropdown, so nothing ever narrows the article. */
.wr-page { display: block; width: 100%; max-width: none; padding: 0 24px 64px; }
.wr-main { max-width: none; width: 100%; }

/* header toolbar: panels tucked away live here */
.wr-tools { display: flex; align-items: center; gap: 4px; }
.wr-tool { position: relative; display: flex; align-items: center; }
.wr-tool-btn {
  width: 36px; height: 36px; border: 0; border-radius: 2px; background: transparent; cursor: pointer;
  display: grid; place-items: center; color: var(--fg);
}
.wr-tool-btn-badge { width: auto; min-width: 36px; padding: 0 8px; display: inline-flex; gap: 5px; align-items: center; }
.wr-tool-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; font-size: 12px; font-weight: 700; line-height: 20px;
  background: var(--progressive); color: var(--progressive-fg); font-variant-numeric: tabular-nums; text-align: center;
}
.wr-tool-btn:hover, .wr-tool.open > .wr-tool-btn { background: var(--bg-interactive); }
.wr-drop {
  display: none; position: absolute; right: 0; top: calc(100% + 10px); z-index: 70;
  width: 320px; max-height: calc(100vh - 90px); overflow-y: auto; overflow-x: hidden;
  background: var(--bg); border: 1px solid var(--border); border-radius: 2px; box-shadow: var(--shadow);
  padding: 14px 16px 2px; scrollbar-width: thin;
}
.wr-tool.open > .wr-drop { display: block; }
.wr-drop .wr-panel { margin-bottom: 14px; }

/* Give up: red so it's easy to find */
#btn-giveup {
  background: var(--destructive); border-color: var(--destructive); color: #fff; margin-left: 8px;
}
#btn-giveup:hover { filter: brightness(1.1); background: var(--destructive); }
html.theme-dark #btn-giveup { background: #d73333; border-color: #d73333; }

.wr-panel { margin-bottom: 22px; }
.wr-panel-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid var(--border-muted); padding-bottom: 5px; margin-bottom: 8px;
}
.wr-panel-head h2 { margin: 0; font-size: 14px; font-weight: 700; font-family: var(--sans); flex: 1; color: var(--fg); }
.wr-pill-btn {
  font-size: 12px; padding: 0 6px; line-height: 18px; border: 0; border-radius: 2px;
  background: var(--bg-interactive); color: var(--fg); cursor: pointer;
}
.wr-pill-btn:hover { background: var(--bg-hover); }
.wr-pill { font-size: 12px; padding: 0 7px; border-radius: 9px; background: var(--bg-interactive); }

/* toc */
.wr-toc, .wr-toc ul { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.wr-toc ul { padding-left: 12px; }
.wr-toc li { margin: 0; }
.wr-toc a { display: block; padding: 3px 0 3px 10px; color: var(--link); line-height: 1.35; border-left: 2px solid transparent; }
.wr-toc a.top { font-weight: 700; color: var(--fg); }
.wr-toc a.active { font-weight: 700; color: var(--fg); }

/* path */
.wr-path { list-style: none; margin: 0; padding: 0; counter-reset: p; font-size: 14px; }
.wr-path li {
  counter-increment: p; position: relative; padding: 4px 0 4px 28px; line-height: 1.3;
}
.wr-path li::before {
  content: counter(p); position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700;
  display: grid; place-items: center; background: var(--bg-interactive); color: var(--fg-subtle);
}
.wr-path li:not(:last-child)::after {
  content: ''; position: absolute; left: 9.5px; top: 25px; bottom: -4px; width: 1px; background: var(--border-subtle);
}
.wr-path li.current::before { background: var(--progressive); color: var(--progressive-fg); }
.wr-path li.back { color: var(--fg-muted); font-style: italic; }
.wr-path li.goal::before { background: var(--success); color: #fff; }

/* ---------- main column ---------- */
.wr-main { min-width: 0; padding-top: 14px; }
.wr-title-row { display: flex; align-items: flex-end; gap: 16px; border-bottom: 1px solid var(--border); }
.wr-firstheading {
  font-family: var(--serif); font-weight: 400; font-size: 1.8em; line-height: 1.375;
  margin: 0; padding: 0 0 2px; flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.wr-firstheading i { font-style: italic; }
.wr-lang { font-size: 14px; color: var(--link); font-weight: 700; padding-bottom: 6px; white-space: nowrap; }
.wr-tabs { display: flex; justify-content: space-between; font-size: 14px; border-bottom: 1px solid var(--border-muted); margin-bottom: 8px; }
.wr-tabs-left, .wr-tabs-right { display: flex; }
.wr-tab { padding: 6px 8px 5px; color: var(--link); cursor: default; }
.wr-tab.selected { color: var(--fg); border-bottom: 2px solid var(--fg); }
.wr-tab.muted { opacity: .55; }
#tab-solver-only { cursor: pointer; }
.wr-siteSub { margin: 6px 0 14px; font-size: 13px; color: var(--fg-subtle); }
.wr-redirect-note { font-size: 13px; color: var(--fg-subtle); margin: -8px 0 10px; }

/* article body: allow Wikipedia CSS to style, just enforce theme + size */
#bodyContent { font-size: calc(var(--text-size) * 0.875 / 0.875); color: var(--fg); }
#bodyContent .mw-parser-output { line-height: 1.6; }
#bodyContent a.wr-out { color: var(--fg-subtle); text-decoration: none; cursor: not-allowed; }
#bodyContent a.wr-dead { cursor: default; }
body.theme-dark #bodyContent img { opacity: .95; }
.mw-editsection, .mw-empty-elt { display: none !important; }

/* ---------- home ---------- */
.wr-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 4px; align-items: stretch; }
.wr-box-sub { font-family: var(--serif); font-weight: 400; font-size: 1.2em; margin: 18px 0 6px; border-bottom: 1px solid var(--border-subtle); padding-bottom: 2px; }
.wr-home-extra { margin-top: 4px; }
.wr-box { border: 1px solid var(--border-muted); background: var(--bg-subtle); padding: 18px 20px; border-radius: 2px; }
.wr-box-title {
  font-family: var(--serif); font-weight: 400; font-size: 1.45em; margin: 0 0 8px;
  border-bottom: 1px solid var(--border-subtle); padding-bottom: 3px;
}
.wr-box-title + p { margin-top: 0; }
.wr-pick { margin: 14px 0 0; }
.wr-pick > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.wr-pick-row { display: flex; gap: 8px; }
.wr-pick-row .wr-search { flex: 1; }
.wr-dice { font-size: 18px; padding: 0 10px; }
.wr-pick-card {
  display: flex; gap: 12px; align-items: center; margin-top: 8px; padding: 10px;
  background: var(--bg); border: 1px solid var(--border-muted); border-radius: 2px;
}
/* album-style article card: square artwork + title, description and opening lines */
.wr-pick-card { align-items: flex-start !important; gap: 18px !important; padding: 14px !important; }
.wr-pick-card .thumb {
  width: 148px; aspect-ratio: 1; flex: none; border-radius: 6px; overflow: hidden;
  background: var(--bg-interactive) center / cover no-repeat;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06);
  display: grid; place-items: center; color: var(--fg-muted);
}
.wr-pick-card .thumb .ph { font-family: var(--serif); font-size: 64px; opacity: .35; }
.wr-pick-card .info { min-width: 0; flex: 1; padding-top: 2px; }
.wr-pick-card .t { font-family: var(--serif); font-size: 24px; line-height: 1.2; }
.wr-pick-card .d { font-size: 13px; color: var(--fg-subtle); margin-top: 3px; text-transform: none; }
.wr-pick-card .x {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--fg);
  opacity: .85; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 640px) {
  .wr-pick-card .thumb { width: 96px; }
  .wr-pick-card .t { font-size: 20px; }
  .wr-pick-card .x { -webkit-line-clamp: 4; }
}
.wr-swap-row { display: flex; justify-content: center; margin: 6px 0 -6px; }
.wr-setup-actions { display: flex; gap: 10px; margin: 20px 0 12px; flex-wrap: wrap; }
.wr-check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--fg-subtle); margin-top: 4px; cursor: pointer; }
.wr-rules { padding-left: 20px; margin: 0 0 16px; font-size: 14.5px; }
.wr-rules li { margin-bottom: 4px; }
.wr-history { font-size: 14px; }
.wr-history-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border-muted); align-items: center; }
.wr-history-row .res { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; }
.res.win { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.res.lose { background: color-mix(in srgb, var(--destructive) 20%, transparent); color: var(--destructive); }
.wr-history-row .route { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-history-row .stat { color: var(--fg-subtle); font-size: 13px; white-space: nowrap; }
.wr-history-row .replay { cursor: pointer; color: var(--link); }

/* ---------- race panel ---------- */
.wr-target-card { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.wr-target-card .thumb { width: 64px; height: 64px; flex: none; background: var(--bg-interactive) center/cover no-repeat; border-radius: 2px; }
.wr-target-card .t { font-family: var(--serif); font-size: 19px; line-height: 1.2; }
.wr-target-card .d { font-size: 13px; color: var(--fg-subtle); line-height: 1.35; margin-top: 2px; }
.wr-target-card .x { font-size: 12.5px; color: var(--fg-subtle); margin-top: 4px; }
.wr-clock { position: relative; width: 150px; height: 150px; margin: 0 auto; }
.wr-clock-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.wr-clock-ring circle { fill: none; stroke-width: 7; }
.wr-clock-ring .track { stroke: var(--bg-interactive); }
.wr-clock-ring .bar { stroke: var(--progressive); stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear, stroke .3s; }
.wr-clock.warn .bar { stroke: var(--warning); }
.wr-clock.danger .bar { stroke: var(--destructive); }
.wr-clock-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wr-clock-text span { font-size: 30px; font-weight: 700; line-height: 1; }
.wr-clock-text small { font-size: 12px; color: var(--fg-subtle); margin-top: 4px; }

/* ---------- appearance ---------- */
.wr-appearance h3 { font-size: 13px; color: var(--fg-subtle); font-weight: 400; margin: 10px 0 4px; border-bottom: 1px solid var(--border-muted); padding-bottom: 3px; }
.wr-appearance label { display: flex; gap: 8px; align-items: center; font-size: 14px; padding: 2px 0; cursor: pointer; }
.wr-appearance input { accent-color: var(--progressive); width: 16px; height: 16px; margin: 0; }

/* ---------- modal / toast ---------- */
.wr-modal-back {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.6);
  display: grid; place-items: center; padding: 16px; animation: fade .15s;
}
@keyframes fade { from { opacity: 0; } }
.wr-modal {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 32px); overflow: auto;
  background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: 2px; box-shadow: var(--shadow);
  padding: 24px 28px;
}
/* party results (podium + leaderboard): use more of the screen than the other dialogs */
.wr-modal:has(#party-results) { width: max(min(1180px, calc(100vw - 48px)), min(760px, 100%)); }
.wr-modal:has(#party-results) .wr-podium { max-width: 640px; }
.wr-modal-x { position: absolute; top: 10px; right: 10px; border: 0; background: transparent; font-size: 18px; cursor: pointer; color: var(--fg-subtle); width: 32px; height: 32px; }
.wr-modal h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 4px; }
.wr-modal h3 { font-size: 15px; margin: 18px 0 8px; border-bottom: 1px solid var(--border-muted); padding-bottom: 4px; }
.wr-result-banner { font-size: 15px; color: var(--fg-subtle); margin-bottom: 8px; }
.wr-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 6px; }
.wr-stat { background: var(--bg-subtle); border: 1px solid var(--border-muted); padding: 10px 12px; border-radius: 2px; }
.wr-stat b { display: block; font-size: 24px; line-height: 1.1; }
.wr-stat span { font-size: 12px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: .05em; }
.wr-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; }
.wr-chain .node { padding: 3px 9px; border: 1px solid var(--border-subtle); border-radius: 14px; background: var(--bg-subtle); }
.wr-chain .node.start { border-color: var(--progressive); }
.wr-chain .node.end { border-color: var(--success); }
.wr-chain .node.back { opacity: .55; text-decoration: line-through; }
.wr-chain .arrow { color: var(--fg-muted); }
.wr-solver-status { font-size: 14px; color: var(--fg-subtle); display: flex; gap: 10px; align-items: center; }
.wr-spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-subtle); border-top-color: var(--progressive); animation: spin .8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.wr-modal-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.wr-howto ol { margin: 12px 0 0; padding-left: 1.4em; }
.wr-howto li { margin: 0 0 8px; padding-left: 4px; line-height: 1.5; }

.wr-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300;
  background: var(--fg); color: var(--bg); padding: 10px 18px; border-radius: 2px; font-size: 14px; box-shadow: var(--shadow);
  max-width: calc(100vw - 32px);
}

/* countdown overlay */
.wr-countdown {
  position: fixed; inset: 0; z-index: 250; display: grid; place-items: center; pointer-events: none;
  font-family: var(--serif); font-size: 160px; color: var(--fg); text-shadow: 0 4px 30px rgba(0,0,0,.4);
}
.wr-countdown span { animation: pop .9s ease-out forwards; }
@keyframes pop { from { transform: scale(1.6); opacity: 0; } 30% { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.85); } }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .wr-hud-target { display: none; }
}
@media (max-width: 1000px) {
  .wr-header { grid-template-columns: auto 1fr auto; gap: 12px; padding: 0 12px; }
  .wr-tagline { display: none; }
  .wr-user-links { display: none; }
  .wr-page { padding: 0 16px 40px; }
  /* dropdowns become full-width sheets under the header */
  .wr-tool { position: static; }
  .wr-drop { position: fixed; left: 8px; right: 8px; top: calc(var(--hdr, 64px) + 4px); width: auto; max-height: calc(100vh - var(--hdr, 64px) - 16px); }
  .wr-home-grid { grid-template-columns: 1fr; }
  .wr-racers { top: 64px; }
}
@media (max-width: 640px) {
  .wr-header { height: auto; min-height: 56px; grid-template-columns: auto 1fr; padding: 6px 12px; }
  .wr-header-search { grid-column: 1 / -1; grid-row: 2; }
  .wr-header { grid-template-columns: auto minmax(0, 1fr); }
  .wr-header-end { grid-column: 2; grid-row: 1; flex-wrap: wrap; gap: 4px; min-width: 0; }
  .wr-hud { flex-wrap: wrap; justify-content: flex-end; }
  .wr-racers { position: static; }
  .wr-racer .at { max-width: 120px; }
  .wr-logo-text { display: none; }
  .wr-hud-item { padding: 2px 8px; min-height: 36px; }
  .wr-hud-value { font-size: 15px; }
  .wr-stats { grid-template-columns: 1fr 1fr; }
  .wr-party-articles { grid-template-columns: 1fr; }
  .wr-party-swap, .wr-party-arrow { margin: 0; justify-self: center; }
  .wr-party-code { font-size: 40px; }
  .wr-party-pill { padding: 0 8px; }
}

/* ---------- party ---------- */
.wr-tag {
  display: inline-block; font-size: 11.5px; font-weight: 700; line-height: 18px; padding: 0 6px; margin-left: 6px;
  border-radius: 9px; background: var(--bg-interactive); color: var(--fg-subtle); white-space: nowrap; vertical-align: middle;
}
.wr-tag.host { color: var(--warning); }
.dot { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--c, var(--fg-muted)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, #888) 30%, transparent); }

/* home: party box */
.wr-party-box { border-color: color-mix(in srgb, var(--progressive) 55%, var(--border-muted)); background: color-mix(in srgb, var(--progressive) 7%, var(--bg-subtle)); }
.wr-party-box-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px; }
.wr-party-box-head .wr-box-title { border: 0; margin: 0; padding-bottom: 3px; }
.wr-party-lock { font-size: 13px; font-weight: 700; color: var(--fg-subtle); }
.wr-party-box > p { font-size: 14.5px; margin: 0 0 14px; }
.wr-party-form { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; }
.wr-party-card { flex: 1 1 240px; min-width: 0; background: var(--bg); border: 1px solid var(--border-muted); border-radius: 2px; padding: 10px 12px 12px; }
.wr-party-card > label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.wr-party-row { display: flex; gap: 8px; }
.wr-party-row .wr-search { flex: 1; min-width: 0; }
.wr-party-row .wr-btn { flex: none; }
.wr-party-code-field input { text-transform: uppercase; letter-spacing: .18em; font-family: var(--mono); font-weight: 700; }
.wr-party-code-field input::placeholder { letter-spacing: .1em; font-weight: 400; }
.wr-party-or { align-self: center; font-size: 13px; font-weight: 700; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .08em; }
.wr-party-or::before, .wr-party-or::after { content: ' — '; }
.wr-party-current { padding: 10px 12px; background: var(--bg); border: 1px solid var(--border-muted); border-radius: 2px; }
.wr-party-current-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.wr-party-current-head > span { flex: 1; min-width: 160px; }
.wr-party-mini-race { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 4px; }
.wr-party-mini-art { font-family: var(--serif); font-size: 18px; }
.wr-party-mini-race .wr-party-arrow { font-size: 18px; margin: 0; }
.wr-party-mini { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.wr-party-mini li { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px solid var(--border-muted); }
.wr-party-mini li .dot { width: 10px; height: 10px; margin-right: 6px; }
.wr-party-mini li.offline b { opacity: .6; }
.wr-party-mini .at { margin-left: auto; color: var(--fg-subtle); font-family: var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50%; }
.wr-party-current b.mono { font-size: 18px; letter-spacing: .12em; }
.wr-flash { animation: flash 1.4s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--progressive); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* header pill while in a party */
.wr-party-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; white-space: nowrap;
  font-size: 13px; font-weight: 700; color: var(--fg); cursor: pointer;
  background: color-mix(in srgb, var(--progressive) 14%, var(--bg)); border: 1px solid var(--progressive); border-radius: 16px;
}
.wr-party-pill:hover { background: color-mix(in srgb, var(--progressive) 26%, var(--bg)); }
.wr-party-pill .dot { width: 10px; height: 10px; }
body.racing .wr-party-pill { display: none; }

/* lobby dialog */
.wr-party-back { z-index: 190; }
.wr-party-modal { width: min(760px, 100%); padding: 22px 26px 20px; }
.wr-party-modal h3 { display: flex; align-items: center; gap: 8px; }
.wr-party-share {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 10px 0 4px; padding: 14px 18px;
  background: var(--bg-subtle); border: 1px solid var(--border-muted); border-radius: 2px;
}
.wr-party-share-side { flex: 1; min-width: 220px; }
.wr-party-code-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }
.wr-party-code { font-size: 52px; font-weight: 700; letter-spacing: .16em; line-height: 1.1; color: var(--fg); user-select: all; }
.wr-party-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.wr-party-link { font-size: 12.5px; color: var(--fg-subtle); margin-top: 6px; overflow-wrap: anywhere; }
.wr-party-private { font-size: 13.5px; font-weight: 700; margin-top: 6px; color: var(--fg-subtle); }
.wr-party-note { font-size: 13px; margin: 10px 0 0; }
.wr-party-chosen { font-weight: 400; font-size: 13px; }
.wr-party-players { list-style: none; margin: 0 0 12px; padding: 0; }
.wr-party-player { display: flex; align-items: center; gap: 4px; padding: 6px 4px; border-bottom: 1px solid var(--border-muted); font-size: 15px; min-height: 44px; }
.wr-party-player .dot { margin-right: 6px; }
.wr-party-player .name { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wr-party-myname { border: 0; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: 2px; cursor: text; font-size: 15px; }
.wr-party-myname:hover { background: var(--bg-interactive); }
.wr-party-rename { display: inline-flex; gap: 6px; align-items: center; }
.wr-party-rename .wr-search input { height: 32px; width: 200px; }
.wr-party-rename .wr-btn { min-height: 32px; }
.wr-party-player .conn { margin-left: auto; font-size: 12px; color: var(--success); white-space: nowrap; }
.wr-party-player.offline .conn { color: var(--fg-muted); }
.wr-party-player.offline .name { opacity: .6; }
.wr-party-kick { margin-left: 8px; width: 28px; height: 28px; border: 0; border-radius: 2px; background: transparent; color: var(--fg-muted); cursor: pointer; flex: none; }
.wr-party-kick:hover { background: color-mix(in srgb, var(--destructive) 18%, transparent); color: var(--destructive); }
.wr-party-bots { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.wr-party-articles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: start; }
.wr-party-articles .wr-pick { margin: 0; }
.wr-party-swap, .wr-party-arrow { align-self: center; margin-top: 26px; }
.wr-party-arrow { font-size: 26px; color: var(--fg-muted); }
.wr-party-articles .wr-pick-card .t { font-size: 21px; }
.wr-pick-empty { color: var(--fg-muted); font-size: 14px; font-style: italic; min-height: 78px; }
.wr-party-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--fg-subtle); font-size: 15px; }
.wr-party-actions { align-items: center; }
#btn-party-leave { margin-left: auto; color: var(--destructive); }

/* join-from-link dialog */
.wr-join-modal { width: min(460px, 100%); }
.wr-join-code { letter-spacing: .12em; font-weight: 700; }
.wr-join-label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 4px; }

/* racers bar: who is where, live (party races) */
.wr-racers {
  position: sticky; top: 64px; z-index: 39;
  display: flex; align-items: center; gap: 12px; padding: 6px 24px;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border-muted);
}
.wr-racers-list { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; }
.wr-racers-actions { flex: none; display: flex; gap: 8px; align-items: center; font-size: 14px; }
.wr-racers-target b { font-family: var(--serif); font-weight: 400; font-size: 16px; }
.wr-racer {
  flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  max-width: 300px; padding: 4px 10px 4px 9px; border-radius: 4px; line-height: 1.25;
  background: var(--bg); border: 1px solid var(--border-muted); border-left: 4px solid var(--c);
}
.wr-racer .dot { grid-row: 1 / 3; width: 10px; height: 10px; }
.wr-racer .who { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-racer .who .wr-tag { font-size: 10.5px; line-height: 15px; margin-left: 4px; }
.wr-racer .at { grid-column: 2; font-family: var(--serif); font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.wr-racer .clk { grid-column: 3; grid-row: 1 / 3; font-size: 18px; font-weight: 700; padding-left: 6px; border-left: 1px solid var(--border-muted); }
.wr-racer.me { background: color-mix(in srgb, var(--c) 12%, var(--bg)); }
.wr-racer.offline { opacity: .55; }
.wr-racer.done { border-color: var(--success); border-left-color: var(--c); }
.wr-racer.winner { border-color: var(--success); box-shadow: 0 0 0 2px var(--success); background: color-mix(in srgb, var(--success) 14%, var(--bg)); }

/* results */
.wr-party-winner {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 8px 0 4px; font-size: 15px;
  border: 1px solid var(--success); border-left: 5px solid var(--c); border-radius: 2px; background: color-mix(in srgb, var(--success) 12%, var(--bg));
}
.wr-party-route { padding: 8px 0 10px; border-bottom: 1px solid var(--border-muted); }
.wr-party-route .head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 15px; flex-wrap: wrap; }
.wr-party-route .rank { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--bg-interactive); color: var(--fg-subtle); }
.wr-party-route.winner .rank { background: var(--success); color: #fff; }
.wr-party-route .stat { margin-left: auto; font-size: 13px; color: var(--fg-subtle); }

/* results: podium + standings */
.wr-podium { margin: 6px auto 0; max-width: 520px; }
.wr-podium-svg { display: block; width: 100%; height: auto; overflow: visible; }
.wr-pod-num { font: 700 46px var(--serif); fill: #fff; opacity: .9; paint-order: stroke; stroke: rgba(0,0,0,.18); stroke-width: 2px; }
.wr-pod-name { font: 700 14px var(--sans); fill: var(--fg); }
.wr-pod-trophy { font-size: 24px; }
.wr-pod-wait { font: 700 28px var(--sans); fill: var(--fg-muted); }
.wr-pod-floor { stroke: var(--border-subtle); stroke-width: 2; }
.wr-pod-fig.enter { animation: podIn .6s cubic-bezier(.2,.9,.3,1.3) both; animation-delay: var(--d, 0s); }
@keyframes podIn { from { opacity: 0; transform: translateY(-40px); } }
.wr-ranking-wait { justify-content: center; margin: 4px 0 8px; }
.wr-standings { width: 100%; border-collapse: collapse; font-size: 14.5px; margin-top: 10px; }
.wr-standings th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--fg-subtle); border-bottom: 1px solid var(--border-subtle); padding: 4px 8px; }
.wr-standings td { padding: 7px 8px; border-bottom: 1px solid var(--border-muted); }
.wr-standings .num { text-align: right; }
.wr-standings .place { font-weight: 700; width: 56px; }
.wr-standings .who .dot { width: 10px; height: 10px; margin-right: 4px; vertical-align: middle; }
.wr-standings tr.winner td { background: color-mix(in srgb, #d4af37 16%, transparent); }
.wr-standings tr.me td:first-child { box-shadow: inset 3px 0 0 var(--c); }
.wr-standings .ok { color: var(--success); font-weight: 700; }
.wr-party-routes { margin-top: 16px; }
.wr-party-routes > summary { cursor: pointer; font-size: 15px; font-weight: 700; padding: 4px 0; border-bottom: 1px solid var(--border-muted); }
.wr-confetti { position: fixed; inset: 0; z-index: 260; pointer-events: none; overflow: hidden; }
.wr-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: confetti 3s ease-in forwards; }
@keyframes confetti { to { transform: translate(var(--dx), 105vh) rotate(var(--r)); opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .wr-confetti { display: none; } .wr-pod-fig.enter { animation: none; } }

/* ======================================================================
   Wallpaper: a night/space photo fixed behind everything at low opacity,
   with panels as frosted glass over it. Set from Appearance → Wallpaper.
   ====================================================================== */
html.has-wallpaper { background: #06080b; }
html.has-wallpaper body { background: transparent; }
html.has-wallpaper body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(4, 6, 9, var(--wall-dim, .4)), rgba(4, 6, 9, var(--wall-dim, .4))), var(--wall-image) center / cover no-repeat;
  opacity: var(--wall-opacity, .45);
  filter: saturate(1.35) contrast(1.06);
}
html.has-wallpaper body::after { /* soft vignette keeps edges dark and text readable */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, transparent 0%, transparent 55%, rgba(4, 6, 9, .3) 80%, rgba(4, 6, 9, .6) 100%);
  opacity: var(--vignette, .6);
}
html.has-wallpaper {
  --glass: rgba(22, 25, 30, .55);
  --glass-deep: rgba(10, 12, 16, .55);
  --glass-solid: rgba(16, 19, 24, .9);
  --glass-line: rgba(255, 255, 255, .09);
}
html.has-wallpaper .wr-header,
html.has-wallpaper .wr-racers {
  background: rgba(10, 13, 17, .68);
  border-bottom-color: var(--glass-line);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
}
html.has-wallpaper .wr-box {
  background: var(--glass); border-color: var(--glass-line); border-radius: 6px;
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
html.has-wallpaper .wr-party-box {
  background: rgba(40, 62, 120, .28); border-color: rgba(120, 150, 230, .38);
}
html.has-wallpaper .wr-pick-card,
html.has-wallpaper .wr-party-card,
html.has-wallpaper .wr-party-current,
html.has-wallpaper .wr-racer {
  background: var(--glass-deep); border-color: var(--glass-line);
}
html.has-wallpaper .wr-racer { border-left-color: var(--c); }
html.has-wallpaper .wr-search input { background: rgba(6, 8, 11, .6); }
html.has-wallpaper .wr-search input:disabled { background: rgba(30, 32, 36, .5); }
html.has-wallpaper .wr-drop,
html.has-wallpaper .wr-suggest,
html.has-wallpaper .wr-modal {
  background: var(--glass-solid); border-color: rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
html.has-wallpaper .wr-modal-back { background: rgba(0, 0, 0, .5); }
/* article pages sit on a darker sheet so long text stays easy to read */
html.has-wallpaper #view-article {
  background: rgba(13, 16, 20, .84); border: 1px solid var(--glass-line); border-radius: 6px;
  padding: 6px 28px 28px; margin-top: 10px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html.has-wallpaper .wr-stat { background: var(--glass-deep); }

/* wallpaper picker */
.wr-wallpapers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px; }
.wr-wall {
  aspect-ratio: 16 / 10; border: 2px solid transparent; border-radius: 4px; cursor: pointer; padding: 0;
  background: var(--bg-interactive) center / cover no-repeat; color: var(--fg-subtle); font-size: 12px; font-weight: 700;
}
.wr-wall:hover { border-color: var(--border); }
.wr-wall.active { border-color: var(--progressive); box-shadow: 0 0 0 1px var(--progressive); }
.wr-wall-range { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-subtle); }
.wr-wall-range input { flex: 1; accent-color: var(--progressive); }

/* "A different photo in every panel": each panel shows its own photo (set as --pimg by app.js) */
html.panel-photos .wr-photo { isolation: isolate; }
html.panel-photos .wr-box.wr-photo { position: relative; overflow: hidden; }
html.panel-photos .wr-photo::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  /* per-photo dark overlay (--pdim, brighter photo = darker), a little heavier at the bottom where text sits */
  background: linear-gradient(180deg, rgba(6, 8, 12, var(--pdim, .45)), rgba(6, 8, 12, calc(var(--pdim, .45) + .15))), var(--pimg) center / cover no-repeat;
  opacity: var(--panel-opacity, .35);
  filter: saturate(1.4);
}
html.panel-photos .wr-header.wr-photo::before { background-position: center 40%; }
/* dialogs and long text panels keep their photo quieter so text stays readable */
html.panel-photos .wr-modal.wr-photo::before { opacity: calc(var(--panel-opacity, .35) * .55); }
.wr-wall-shuffle { width: 100%; margin: 8px 0 4px; }

/* One tint everywhere: the "Race your friends" blue glass, over the single shared wallpaper.
   Surfaces that sit over scrolling text (header, menus, dialogs, article sheet) use the same
   blue hue, just more opaque, so text underneath never shows through. */
html.has-wallpaper {
  --tint: rgba(40, 62, 120, .28);
  --tint-line: rgba(120, 150, 230, .38);
  --tint-soft-line: rgba(120, 150, 230, .3);
}
html.has-wallpaper .wr-box,
html.has-wallpaper .wr-box.wr-setup,
html.has-wallpaper .wr-box.wr-party-box {
  background: var(--tint); border-color: var(--tint-line);
}
html.has-wallpaper .wr-box-title,
html.has-wallpaper .wr-box-sub { border-bottom-color: var(--tint-soft-line); }
html.has-wallpaper .wr-header {
  background: rgba(30, 46, 96, .72); border-bottom-color: var(--tint-line);
}
html.has-wallpaper .wr-racers {
  background: rgba(30, 46, 96, .66); border-bottom-color: var(--tint-soft-line);
}
html.has-wallpaper .wr-drop,
html.has-wallpaper .wr-suggest,
html.has-wallpaper .wr-modal {
  background: rgba(20, 31, 66, .92); border-color: var(--tint-line);
}
html.has-wallpaper #view-article {
  background: rgba(15, 23, 48, .86); border-color: var(--tint-soft-line);
}

/* suggestion dropdown opening upwards when there's no room below */
.wr-suggest.wr-suggest-up { top: auto; bottom: calc(100% + 2px); }

/* ===== party lobby v2 ===== */
/* wide Blooket-style lobby: share band (code + QR), big racer tiles, roomy article cards */
.wr-party-modal.wr-lobby2 {
  width: min(1180px, calc(100vw - 48px)); max-height: 92vh; overflow: auto;
  padding: 22px 30px 22px;
}
.wr-lobby2 h2 { margin: 0 0 10px; }
.wr-lobby-band {
  display: flex; align-items: center; gap: 20px 32px; flex-wrap: wrap;
  padding: 18px 22px; border-radius: 6px;
  background: color-mix(in srgb, var(--progressive) 9%, var(--bg-subtle)); border: 1px solid var(--border-muted);
}
.wr-lobby-join { flex: 1 1 360px; min-width: 0; }
.wr-lobby2 .wr-party-code { font-size: clamp(44px, 7vw, 72px); line-height: 1.05; margin: 2px 0 12px; }
.wr-lobby2 .wr-party-link { font-size: 13px; margin-top: 10px; }
.wr-lobby-qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 220px; text-align: center; }
.wr-lobby-qr-img {
  width: 160px; height: 160px; background: #fff; border-radius: 6px; overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.wr-lobby-qr-img svg { display: block; width: 100%; height: 100%; }
.wr-lobby-qr-cap { font-size: 13px; font-weight: 700; color: var(--fg-subtle); }
.wr-lobby-qr-note { font-size: 12.5px; line-height: 1.35; color: var(--warning); }

.wr-lobby-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 12px; }
.wr-lobby2 h3.wr-lobby-h { font-family: var(--serif); font-weight: 400; font-size: 26px; border: 0; padding: 0; margin: 0; }
.wr-lobby-sec-head .wr-lobby-h { flex: 1 1 auto; }
.wr-lobby-count { color: var(--fg-subtle); }
.wr-lobby2 #party-setup { margin: 26px 0 12px; border-top: 1px solid var(--border-muted); padding-top: 18px; }
.wr-lobby2 .wr-party-chosen { font-family: var(--sans, inherit); font-size: 14px; }

.wr-lobby-racers {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px;
}
.wr-racer-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0;
  padding: 18px 12px 14px; border-radius: 10px; text-align: center;
  background: color-mix(in srgb, var(--c, #888) 12%, var(--bg-subtle));
  border: 2px solid color-mix(in srgb, var(--c, #888) 55%, transparent);
}
.wr-racer-tile.me { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #888) 35%, transparent); }
.wr-racer-tile .av {
  width: 84px; height: 84px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--c, #888); color: #fff; font-size: 40px; font-weight: 700; line-height: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45); box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}
.wr-racer-tile.bot .av { font-size: 44px; }
.wr-racer-tile .name {
  max-width: 100%; font-size: 19px; font-weight: 700; line-height: 1.2; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wr-racer-tile .wr-party-myname { border: 0; background: transparent; padding: 2px 6px; margin: 0; border-radius: 4px; cursor: text; font: inherit; font-size: 19px; font-weight: 700; }
.wr-racer-tile .wr-party-myname:hover { background: var(--bg-interactive); }
.wr-racer-tile .wr-party-myname .pen { font-size: 14px; color: var(--fg-muted); font-weight: 400; }
.wr-racer-tile .tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.wr-racer-tile .tags .wr-tag { margin: 0; }
.wr-racer-tile .wr-tag.you { color: var(--progressive); }
.wr-racer-tile .wr-tag.on { color: var(--success); }
.wr-racer-tile .wr-tag.off { color: var(--fg-muted); }
.wr-racer-tile.offline .av { filter: grayscale(.7); opacity: .6; }
.wr-racer-tile.offline .name { opacity: .6; }
.wr-racer-tile .wr-party-kick { position: absolute; top: 6px; right: 6px; margin: 0; }
.wr-racer-tile .wr-party-rename { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.wr-racer-tile .wr-party-rename .wr-search input { width: 100%; }
.wr-racer-tile.wr-racer-wait {
  background: transparent; border: 2px dashed var(--border-subtle); color: var(--fg-muted); justify-content: center;
}
.wr-racer-wait .av { background: transparent; box-shadow: none; border: 2px dashed var(--border-subtle); }
.wr-racer-wait .name { font-size: 15px; font-weight: 400; color: var(--fg-subtle); white-space: normal; }
.wr-racer-wait .tags { font-size: 12.5px; }
.wr-racer-tile.pop { animation: wr-tile-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes wr-tile-pop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .wr-racer-tile.pop { animation: none; } }

/* host-only "Add computer" row sits beside the Racers heading */
.wr-lobby2 .wr-party-bots { gap: 8px; }

/* the race: two roomy album cards side by side */
.wr-lobby2 .wr-party-articles { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; }
.wr-lobby2 .wr-party-articles .wr-pick-card .t { font-size: 22px; }
.wr-lobby2 .wr-party-articles .wr-pick-card .x { -webkit-line-clamp: 4; }
.wr-lobby2 .wr-party-articles .wr-pick-empty { display: flex; align-items: center; justify-content: center; min-height: 176px; }

.wr-lobby2 .wr-party-actions { margin-top: 24px; gap: 12px; }
.wr-lobby-start-hint { font-size: 14px; color: var(--fg-subtle); }

@media (max-width: 900px) {
  .wr-lobby2 .wr-party-articles { grid-template-columns: 1fr; }
  .wr-lobby2 .wr-party-swap, .wr-lobby2 .wr-party-arrow { margin: 0; justify-self: center; }
  .wr-lobby2 .wr-party-arrow { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .wr-party-modal.wr-lobby2 { width: 100%; max-height: 92vh; padding: 18px 14px 16px; }
  .wr-lobby-band { padding: 14px; justify-content: center; }
  .wr-lobby-join { flex-basis: 100%; text-align: center; }
  .wr-lobby-qr-img { width: 132px; height: 132px; }
  .wr-lobby2 .wr-party-copy { justify-content: center; }
  .wr-lobby-racers { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
  .wr-racer-tile { padding: 14px 8px 10px; }
  .wr-racer-tile .av { width: 64px; height: 64px; font-size: 30px; }
  .wr-racer-tile .name, .wr-racer-tile .wr-party-myname { font-size: 17px; }
  .wr-lobby2 h3.wr-lobby-h { font-size: 22px; }
  .wr-lobby2 #btn-party-leave { margin-left: 0; }
}

/* ===== party lobby v3: everything visible without scrolling =====
   Wide dialog, three columns on top — join code | racers | big QR — and the
   two article cards side by side underneath. */
.wr-party-modal.wr-lobby2 {
  width: min(1720px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  padding: 22px 28px 18px;
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) 290px;
  grid-template-areas:
    "join  rhead  qr"
    "join  racers qr"
    "rtitle rtitle rtitle"
    "picks picks  picks"
    "acts  acts   acts";
  grid-template-rows: auto 1fr auto auto auto;
  column-gap: 26px;
  align-items: start;
}
.wr-lobby2 .wr-lobby-band { display: contents; }
.wr-lobby2 .wr-lobby-join {
  grid-area: join; align-self: stretch;
  padding: 16px 20px; border-radius: 6px; border: 1px solid var(--border-muted);
  background: color-mix(in srgb, var(--progressive) 9%, var(--bg-subtle));
}
.wr-lobby2 .wr-party-code { font-size: clamp(40px, 4vw, 60px); }
.wr-lobby2 .wr-party-link { word-break: break-all; }
.wr-lobby2 .wr-lobby-qr {
  grid-area: qr; align-self: stretch; max-width: none; justify-content: center;
  padding: 14px; border-radius: 6px; border: 1px solid var(--border-muted);
  background: color-mix(in srgb, var(--progressive) 9%, var(--bg-subtle));
}
.wr-lobby2 .wr-lobby-qr-img { width: 240px; height: 240px; border-radius: 8px; }
.wr-lobby2 .wr-lobby-qr-cap { font-size: 15px; }
.wr-lobby2 .wr-lobby-qr-note { display: none !important; }
.wr-lobby2 .wr-lobby-sec-head { grid-area: rhead; margin: 0 0 10px; }
.wr-lobby2 #party-players { grid-area: racers; margin: 0; }
.wr-lobby2 #party-setup { grid-area: rtitle; margin: 16px 0 10px; padding-top: 14px; }
.wr-lobby2 .wr-party-articles { grid-area: picks; }
.wr-lobby2 .wr-party-actions { grid-area: acts; margin-top: 14px; }
.wr-lobby2 .wr-modal-x { z-index: 2; }

/* shorter screens: keep everything in view by trimming the article cards a little */
@media (max-height: 940px) {
  .wr-lobby2 .wr-pick-card .thumb { width: 120px; }
  .wr-lobby2 .wr-pick-card .x { -webkit-line-clamp: 3; }
  .wr-lobby2 .wr-lobby-qr-img { width: 210px; height: 210px; }
}
/* narrower screens: QR drops under the join box, racers go full width */
@media (max-width: 1150px) {
  .wr-party-modal.wr-lobby2 {
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas: "join qr" "rhead rhead" "racers racers" "rtitle rtitle" "picks picks" "acts acts";
    grid-template-rows: auto;
  }
  .wr-lobby2 .wr-lobby-sec-head { margin-top: 18px; }
}
@media (max-width: 700px) {
  .wr-party-modal.wr-lobby2 {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "join" "qr" "rhead" "racers" "rtitle" "picks" "acts";
    padding: 18px 16px;
  }
  .wr-lobby2 .wr-lobby-qr-img { width: 200px; height: 200px; }
}

/* short laptop screens (≤ 820px tall): compact tiles, QR and cards so the lobby still fits without scrolling */
@media (max-height: 820px) and (min-width: 701px) {
  .wr-party-modal.wr-lobby2 { padding: 14px 22px 12px; }
  .wr-lobby2 h2 { font-size: 22px; margin-bottom: 4px; }
  .wr-lobby2 .wr-party-code { font-size: clamp(34px, 3.4vw, 46px); margin-bottom: 8px; }
  .wr-lobby2 .wr-party-link { margin-top: 6px; }
  .wr-lobby2 .wr-lobby-join, .wr-lobby2 .wr-lobby-qr { padding: 10px 14px; }
  .wr-lobby2 .wr-lobby-qr-img { width: 170px; height: 170px; }
  .wr-lobby2 .wr-lobby-racers { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
  .wr-lobby2 .wr-racer-tile { padding: 10px 10px 8px; gap: 5px; }
  .wr-lobby2 .wr-racer-tile .av { width: 58px; height: 58px; font-size: 28px; }
  .wr-lobby2 .wr-racer-tile.bot .av { font-size: 30px; }
  .wr-lobby2 #party-setup { margin: 10px 0 6px; padding-top: 10px; font-size: 22px; }
  .wr-lobby2 .wr-pick > label { margin-bottom: 2px; }
  .wr-lobby2 .wr-pick-card { padding: 10px !important; gap: 14px !important; margin-top: 6px; }
  .wr-lobby2 .wr-pick-card .thumb { width: 96px; }
  .wr-lobby2 .wr-pick-card .t { font-size: 20px; }
  .wr-lobby2 .wr-pick-card .x { -webkit-line-clamp: 2; margin-top: 6px; }
  .wr-lobby2 .wr-party-actions { margin-top: 8px; }
}

/* ===== party lobby v4: taller, roomier; QR without a box ===== */
@media (min-height: 821px) and (min-width: 1151px) {
  .wr-party-modal.wr-lobby2 {
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr) 320px;
    padding: 30px 34px 24px;
    column-gap: 30px;
  }
  .wr-lobby2 .wr-lobby-join { padding: 22px 24px; display: flex; flex-direction: column; justify-content: center; }
  .wr-lobby2 .wr-party-code { font-size: clamp(48px, 4.2vw, 68px); }
  .wr-lobby2 .wr-lobby-racers { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
  .wr-lobby2 .wr-racer-tile { padding: 24px 14px 18px; gap: 10px; }
  .wr-lobby2 .wr-racer-tile .av { width: 96px; height: 96px; font-size: 46px; }
  .wr-lobby2 .wr-racer-tile.bot .av { font-size: 50px; }
  .wr-lobby2 .wr-racer-tile .name, .wr-lobby2 .wr-racer-tile .wr-party-myname { font-size: 21px; }
  .wr-lobby2 #party-setup { margin: 26px 0 14px; padding-top: 20px; }
  .wr-lobby2 .wr-pick-card { padding: 16px !important; gap: 20px !important; }
  .wr-lobby2 .wr-pick-card .thumb { width: 170px; }
  .wr-lobby2 .wr-pick-card .t { font-size: 26px; }
  .wr-lobby2 .wr-pick-card .x { -webkit-line-clamp: 5; font-size: 14px; }
  .wr-lobby2 .wr-party-actions { margin-top: 20px; }
}
/* QR: no dark box around it, the white code itself fills its column */
.wr-lobby2 .wr-lobby-qr,
html.has-wallpaper .wr-lobby2 .wr-lobby-qr {
  background: none; border: 0; padding: 0; box-shadow: none; justify-content: flex-start;
}
.wr-lobby2 .wr-lobby-qr-img { width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; border-radius: 10px; }
.wr-lobby2 .wr-lobby-qr-cap { margin-top: 6px; }
@media (max-height: 820px) and (min-width: 701px) { .wr-lobby2 .wr-lobby-qr-img { max-width: 190px; } }
/* lots of racers: shrink the tiles so the race section stays on screen */
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(7)) { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important; gap: 10px !important; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(7)) .wr-racer-tile { padding: 10px 8px 8px !important; gap: 4px !important; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(7)) .av { width: 54px !important; height: 54px !important; font-size: 26px !important; }
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(7)) .name,
.wr-lobby2 .wr-lobby-racers:has(> li:nth-child(7)) .wr-party-myname { font-size: 16px !important; }

/* ===== party lobby v6 + live dashboard ===== */
/* Lobby: the join column (code + QR) spans the full height on the left; the right column stacks
   Racers, then The race, then the actions. The racer grid scrolls inside itself if it must.
   (#party-dialog prefix + !important: outranks the lobby v5 grid rules in theme.css.) */
@media (min-width: 1151px) {
  #party-dialog .wr-party-modal.wr-lobby2 {
    grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
    grid-template-areas:
      "join rhead"
      "join racers"
      "join rtitle"
      "join picks"
      "join acts" !important;
    grid-template-rows: auto auto auto auto auto !important;
    align-content: start;
  }
  #party-dialog .wr-lobby2 .wr-lobby-join { align-self: stretch; }
  #party-dialog .wr-lobby2 #party-players {
    max-height: max(150px, calc(100vh - 470px)); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px 6px 4px 2px; margin: 0 -6px 0 -2px; scrollbar-width: thin;
  }
  #party-dialog .wr-lobby2 #party-setup { margin-top: 14px !important; }
}
@media (min-width: 1151px) and (max-height: 820px) {
  #party-dialog .wr-lobby2 #party-players { max-height: max(130px, calc(100vh - 430px)); }
}

/* "I'm racing / Just watching" switch */
.wr-watch-toggle {
  display: inline-flex; flex: none; border: 1px solid var(--border-subtle); border-radius: 18px; overflow: hidden;
  background: rgba(0, 0, 0, .18);
}
.wr-watch-toggle button {
  border: 0; background: transparent; color: var(--fg-subtle); font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 6px 14px; cursor: pointer; white-space: nowrap;
}
.wr-watch-toggle button + button { border-left: 1px solid var(--border-subtle); }
.wr-watch-toggle button.on { background: var(--progressive); color: #fff; }
.wr-watch-toggle button:disabled { cursor: default; opacity: .6; }
.wr-watch-toggle button:not(.on):not(:disabled):hover { background: var(--bg-interactive); color: var(--fg); }
.wr-lobby-watchcount { font-size: .62em; color: var(--fg-muted); font-family: var(--sans, inherit); }
.wr-racer-tile.watching { opacity: .62; border-style: dashed; }
.wr-racer-tile.watching .av { filter: grayscale(.55); }
.wr-racer-tile .wr-tag.watch { color: var(--fg); }

/* home party box: one compact row of chips instead of every racer */
.wr-party-mini2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; font-size: 13.5px; }
.wr-party-mini2 .sum { font-weight: 700; margin-right: 4px; }
.wr-party-mini2 .chip {
  display: inline-flex; align-items: center; gap: 5px; max-width: 160px; padding: 2px 9px 2px 6px; border-radius: 12px;
  background: color-mix(in srgb, var(--c, #888) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wr-party-mini2 .chip .dot { width: 8px; height: 8px; box-shadow: none; }
.wr-party-mini2 .chip.offline, .wr-party-mini2 .chip.watch { opacity: .6; }
.wr-party-mini2 .more { color: var(--fg-subtle); font-weight: 700; }

/* the dashboard replaces the racers bar while it's on screen */
body:has(#view-dashboard:not([hidden])) #racers-bar { display: none !important; }

/* live race dashboard */
.wr-dash { padding: 4px 0 40px; }
.wr-dash-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; margin-bottom: 20px;
}
.wr-dash-art { display: flex; flex-direction: column; min-width: 0; }
.wr-dash-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); margin-bottom: 4px; }
.wr-dash-art .wr-pick-card { flex: 1; margin: 0; }
.wr-dash-art .wr-pick-card .thumb { width: 120px; }
.wr-dash-art .wr-pick-card .x { -webkit-line-clamp: 3; }
.wr-dash-mid, .wr-dash-lb > div {
  border-radius: 10px; background: var(--bg-subtle); border: 1px solid var(--border-muted);
}
.wr-dash-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 240px; padding: 16px 26px; text-align: center; }
.wr-dash-state { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-subtle); }
.wr-dash-timer { font-size: 68px; font-weight: 700; line-height: 1; letter-spacing: .02em; }
.wr-dash-counts { font-size: 15px; color: var(--fg-subtle); }
.wr-dash-counts b { color: var(--fg); font-size: 18px; }
.wr-dash-acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.wr-dash-acts:empty { display: none; }
html.has-wallpaper .wr-dash-mid,
html.has-wallpaper .wr-dash-lb > div {
  background: color-mix(in srgb, var(--glass-tinted) 58%, transparent); border-color: var(--glass-edge);
  -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
}

/* the live ranking: one big row per racer, readable on a projector. Top 10 large, the rest a bit smaller. */
.wr-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wr-drow {
  display: grid; align-items: center; column-gap: 16px; min-width: 0;
  grid-template-columns: 56px 52px minmax(160px, 1fr) minmax(0, 1.6fr) 200px 88px;
  padding: 10px 18px 10px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--c, #888) 12%, var(--bg-subtle));
  border: 2px solid color-mix(in srgb, var(--c, #888) 45%, transparent);
  will-change: transform;
}
html.has-wallpaper .wr-drow { background: color-mix(in srgb, var(--c, #888) 16%, rgba(6, 8, 12, .74)); }
.wr-drow.me { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #888) 40%, transparent); }
.wr-drow .rk { font-size: 36px; font-weight: 800; text-align: center; color: var(--fg-subtle); font-variant-numeric: tabular-nums; line-height: 1; }
.wr-drow.r1 .rk { color: #d4af37; } .wr-drow.r2 .rk { color: #c0c0c0; } .wr-drow.r3 .rk { color: #cd7f32; }
.wr-drow .av {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c, #888); color: #fff; font-size: 26px; font-weight: 700; text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.wr-drow.bot .av { font-size: 28px; }
.wr-drow .who { min-width: 0; }
.wr-drow .nm { font-size: 24px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-drow .tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 3px; }
.wr-drow .tags .wr-tag { margin: 0; font-size: 11.5px; line-height: 17px; }
.wr-drow .wr-tag.you { color: var(--progressive); }
.wr-drow .ago { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; }
.wr-drow .at { min-width: 0; }
.wr-drow .at .t { font-family: var(--serif); font-size: 23px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-drow .trail { font-size: 13px; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.wr-drow .dz { justify-self: start; }
.wr-dist {
  display: inline-block; padding: 5px 12px; border-radius: 16px; font-size: 16px; font-weight: 700; white-space: nowrap;
  background: rgba(255, 255, 255, .08); color: var(--fg-subtle); border: 1px solid rgba(255, 255, 255, .12);
}
.wr-dist.d0 { background: color-mix(in srgb, var(--success) 30%, transparent); color: #fff; border-color: var(--success); }
.wr-dist.d1 { background: color-mix(in srgb, #ff7a2f 32%, transparent); color: #fff; border-color: #ff7a2f; }
.wr-dist.d2 { background: color-mix(in srgb, #f1ab5a 18%, transparent); color: var(--fg); border-color: color-mix(in srgb, #f1ab5a 60%, transparent); }
.wr-dist.d3 { color: var(--fg-subtle); }
.wr-dist.dq { color: var(--fg-muted); min-width: 44px; text-align: center; }
.wr-dist .heat { font-size: 13px; letter-spacing: -2px; margin-left: 2px; }
.wr-drow .clk { text-align: right; line-height: 1; }
.wr-drow .clk b { display: block; font-size: 36px; font-variant-numeric: tabular-nums; }
.wr-drow .clk span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-subtle); }
.wr-drow.done { border-color: var(--success); }
/* past the top 10: same layout, a little smaller */
.wr-drow:not(.top10) { padding-top: 6px; padding-bottom: 6px; grid-template-columns: 56px 40px minmax(160px, 1fr) minmax(0, 1.6fr) 200px 88px; }
.wr-drow:not(.top10) .rk { font-size: 24px; }
.wr-drow:not(.top10) .av { width: 40px; height: 40px; font-size: 19px; }
.wr-drow:not(.top10) .nm { font-size: 19px; }
.wr-drow:not(.top10) .at .t { font-size: 18px; }
.wr-drow:not(.top10) .clk b { font-size: 26px; }
.wr-drow:not(.top10) .wr-dist { font-size: 14px; padding: 3px 10px; }
.wr-drow.top10 + .wr-drow:not(.top10) { margin-top: 10px; }
.wr-drow.moved { animation: wr-drow-pulse .9s ease-out; }
@keyframes wr-drow-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c, #888) 90%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@media (prefers-reduced-motion: reduce) { .wr-drow.moved { animation: none; } .wr-drow { transition: none !important; transform: none !important; } }
/* left / joined late / watching: a small greyed line under the ranking */
.wr-dash-out { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; color: var(--fg-muted); opacity: .8; }
.wr-dash-out .lbl { font-weight: 700; margin-right: 4px; }
.wr-dash-out .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px 2px 6px; border-radius: 12px; background: rgba(255, 255, 255, .06); filter: grayscale(.6); }
.wr-dash-out .chip .dot { width: 8px; height: 8px; box-shadow: none; }
.wr-dash-out .why { font-size: 12px; }

/* finished: big leaderboard (podium + standings) */
.wr-dash-lb { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 18px; align-items: start; }
.wr-dash-lb > div { padding: 16px 20px; }
.wr-dash-lb .wr-standings { font-size: 16px; margin: 0; }
.wr-dash-lb .wr-standings td { padding: 9px 10px; }
.wr-dash.finished .wr-dash-timer { color: var(--success); }

@media (max-width: 1000px) {
  .wr-dash-head { grid-template-columns: minmax(0, 1fr); }
  .wr-dash-mid { order: -1; }
  .wr-dash-lb { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .wr-dash-timer { font-size: 46px; }
  .wr-dash-art .wr-pick-card .thumb { width: 80px; }
  .wr-drow, .wr-drow:not(.top10) {
    grid-template-columns: 34px 36px minmax(0, 1fr) auto; grid-template-areas: "rk av who clk" "rk at at dz";
    column-gap: 8px; row-gap: 4px; padding: 8px 10px;
  }
  .wr-drow .rk { grid-area: rk; font-size: 22px !important; }
  .wr-drow .av { grid-area: av; width: 36px !important; height: 36px !important; font-size: 18px !important; }
  .wr-drow .who { grid-area: who; } .wr-drow .nm { font-size: 18px !important; }
  .wr-drow .at { grid-area: at; } .wr-drow .at .t { font-size: 17px !important; }
  .wr-drow .dz { grid-area: dz; justify-self: end; } .wr-drow .clk { grid-area: clk; }
  .wr-drow .clk b { font-size: 24px !important; }
  .wr-dist { font-size: 13px !important; padding: 3px 9px !important; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  .wr-drow, .wr-drow:not(.top10) { grid-template-columns: 44px 44px minmax(120px, 1fr) minmax(0, 1.3fr) 150px 70px; column-gap: 10px; }
  .wr-drow .nm { font-size: 20px; } .wr-drow .at .t { font-size: 19px; }
  .wr-dist { font-size: 14px; }
}

/* ===== hosting help: tooltips + "How to host" strip ===== */
.wr-tip {
  position: fixed; z-index: 1000; max-width: 300px; padding: 7px 11px; border-radius: 7px; pointer-events: none;
  background: rgba(14, 16, 22, .96); color: #f3f4f6; border: 1px solid rgba(255, 255, 255, .16);
  font-size: 13px; line-height: 1.4; font-weight: 400; text-align: left; box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  animation: wr-tip-in .12s ease-out;
}
@keyframes wr-tip-in { from { opacity: 0; transform: translateY(-3px); } }
.wr-tip.above { animation-name: wr-tip-in-up; }
@keyframes wr-tip-in-up { from { opacity: 0; transform: translateY(3px); } }
.wr-tipwrap { display: inline-flex; }
.wr-tipwrap > .wr-btn:disabled { pointer-events: none; } /* so hovering a disabled Start still explains why */
.wr-lobby-qr-img:focus-visible { outline: 3px solid var(--progressive); outline-offset: 3px; }

.wr-party-joinhint { flex: 1 1 100%; margin: 0 0 2px; font-size: 14px; color: var(--fg-subtle); }

/* one compact row of numbered steps at the top of the lobby (host only) */
.wr-howto-host {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 10px; padding: 5px 6px 5px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--progressive) 12%, rgba(0, 0, 0, .15)); border: 1px solid color-mix(in srgb, var(--progressive) 35%, transparent);
}
.wr-howto-host[hidden] { display: none; }
.wr-howto-host .steps { display: flex; flex: 1; min-width: 0; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.wr-howto-host .steps li {
  display: flex; align-items: center; gap: 6px; flex: none; padding: 3px 10px 3px 4px; border-radius: 14px;
  font-size: 13px; color: var(--fg-subtle); white-space: nowrap;
}
.wr-howto-host .steps li + li::before { content: '→'; margin: 0 4px 0 -2px; color: var(--fg-muted); }
.wr-howto-host .n {
  display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
  font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, .1); color: var(--fg-subtle);
}
.wr-howto-host .steps li.done { opacity: .6; }
.wr-howto-host .steps li.done .n { background: var(--success); color: #fff; }
.wr-howto-host .steps li.now { color: var(--fg); font-weight: 700; background: color-mix(in srgb, var(--progressive) 28%, transparent); }
.wr-howto-host .steps li.now .n { background: var(--progressive); color: #fff; }
.wr-howto-x, .wr-howto-open {
  flex: none; border: 0; background: transparent; color: var(--fg-muted); cursor: pointer; font: inherit; font-size: 13px; border-radius: 6px;
}
.wr-howto-x { width: 26px; height: 26px; }
.wr-howto-x:hover, .wr-howto-open:hover { background: var(--bg-interactive); color: var(--fg); }
.wr-howto-open { display: none; padding: 3px 8px; font-weight: 700; }
.wr-howto-host.collapsed { background: none; border-color: transparent; padding: 0; margin-bottom: 4px; justify-content: flex-end; }
.wr-howto-host.collapsed .steps, .wr-howto-host.collapsed .wr-howto-x { display: none; }
.wr-howto-host.collapsed .wr-howto-open { display: inline-block; }

/* the strip gets its own row in the lobby grid (right column on wide screens, top on narrow ones) */
#party-dialog .wr-lobby2 .wr-howto-host { grid-area: howto; margin-right: 30px; } /* clear of the dialog's ✕ */
@media (min-width: 1151px) {
  #party-dialog .wr-party-modal.wr-lobby2 {
    grid-template-areas:
      "join howto"
      "join rhead"
      "join racers"
      "join rtitle"
      "join picks"
      "join acts" !important;
    grid-template-rows: auto auto auto auto auto auto !important;
  }
  #party-dialog .wr-lobby2 #party-players { max-height: max(150px, calc(100vh - 515px)); }
}
@media (min-width: 1151px) and (max-height: 820px) {
  #party-dialog .wr-lobby2 #party-players { max-height: max(120px, calc(100vh - 470px)); }
}
/* big parties: the dialog takes the full height and the racer grid gets whatever is left, scrolling inside */
@media (min-width: 1151px) {
  #party-dialog .wr-party-modal.wr-lobby2:has(#party-players > li:nth-child(13)) {
    height: calc(100vh - 24px);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto auto !important;
  }
  #party-dialog .wr-lobby2:has(#party-players > li:nth-child(13)) #party-players { max-height: none; height: 100%; min-height: 0; }
}
@media (max-width: 1150px) {
  #party-dialog .wr-party-modal.wr-lobby2 {
    grid-template-areas: "howto" "join" "rhead" "racers" "rtitle" "picks" "acts" !important;
  }
}
.wr-howto-host-list { margin-bottom: 8px; }