/* The game room — a wall of scoreboard for one club's game day.
 *
 * The host's spec, from a fan lounge he wanted rebuilt here: a ribbon of every
 * score, a jumbotron for YOUR club, a headline crawl along the bottom.
 *
 * ⚠ IT READS AS HARDWARE, NOT AS A WEB PAGE. The panels carry a dot-pitch
 * overlay and the lit type carries a glow, because the thing being imitated is
 * an LED board in a dark room. That is a deliberate departure from the site's
 * flat editorial surfaces, and it is confined to this page.
 *
 * ⚠ NO GOOGLE FONTS REQUEST. The faces come from `lt-brand.css` like everywhere
 * else on this site — Anton for the lit numerals, Archivo for labels, JetBrains
 * Mono for the clock. A page that pulled its own webfont would be the only one
 * here that does.
 */

/* ⚠ THE RESET EVERY OTHER PAGE HERE HAS, AND THIS ONE DID NOT. Under the
   default content-box, a panel that sets `width:100%` and then takes padding
   is 100% PLUS the padding — the field and the play feed each ran 26px past
   the viewport, and because BOTH did it, hiding either one alone changed the
   overflow by nothing and read as innocent. */
*,*::before,*::after{box-sizing:border-box}

:root{
  --rm-room:#08090C;
  --rm-panel:#0C0E13;
  --rm-bezel:#191D24;
  --rm-lit:#F2F0ED;
  --rm-amber:#FFB400;
  --rm-dim:#5C6472;
  --rm-team:#D4AF37;          /* repainted per club */
  --rm-hot:#C8102E;
}

/* ⚠ Room for the site's injected bottom tab bar. Without it the headline
   crawl renders UNDERNEATH the tabs — the panel is there, and unreadable. */
body[data-mode='full']{padding-bottom:64px}
body{
  background:var(--rm-room);color:var(--rm-lit);
  font-family:'Archivo','Helvetica Neue',Arial,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  /* ⚠ BORDER-BOX, OR THE PADDING ABOVE DOES NOTHING. Under the default
     content-box, `min-height:100vh` PLUS 64px of padding makes the body taller
     than the viewport, so the crawl still lands at the 100vh mark and the tab
     bar still covers it — measured at 44px of overlap on every phone width
     while the padding was already in place. The rule looked right and changed
     nothing, which is why this is checked by rectangle rather than by eye. */
  box-sizing:border-box;
}

/* ── the control bar ─────────────────────────────────────────── */
.rm-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.5rem .7rem;padding:.45rem clamp(.7rem,3vw,1.6rem);
  border-bottom:1px solid var(--rm-bezel);background:#0A0C10;
}
.rm-pick{display:flex;align-items:center;gap:.55rem}
/* ⚠⚠ THE LABEL IS FOR SCREEN READERS ONLY, and that is what got this bar down
   to one row. "YOUR TEAM" next to a select already reading "Bills" is a label
   restating its own control — and its width was what pushed three utility
   buttons onto a SECOND row, so the bar took 95px of an 844px screen before a
   single thing worth looking at, and shoved the message input below the fold
   on a page whose chat is the point. Measured 95px -> 47px. The control is
   self-describing; the label stays for anyone who cannot see that. */
.rm-pick label{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.rm-pick select{
  background:#12151B;color:var(--rm-lit);border:1px solid var(--rm-bezel);
  border-radius:3px;padding:.4rem .6rem;min-height:32px;
  font:600 .8rem 'Archivo',sans-serif;cursor:pointer;
}
.rm-saved{font-size:.68rem;color:var(--rm-amber)}
.rm-tools{display:flex;gap:.4rem;flex-wrap:wrap}
.rm-btn{
  background:none;color:var(--rm-dim);border:1px solid var(--rm-bezel);
  border-radius:3px;padding:.35rem .6rem;min-height:32px;cursor:pointer;
  font:600 .64rem 'Archivo',sans-serif;letter-spacing:.04em;white-space:nowrap;
}
.rm-btn:hover{color:var(--rm-lit);border-color:var(--rm-team)}
.rm-btn[aria-pressed='true']{color:#0A0C10;background:var(--rm-team);border-color:var(--rm-team)}
.rm-btn:focus-visible,.rm-pick select:focus-visible{outline:2px solid var(--rm-amber);outline-offset:2px}

/* ── LED panels ──────────────────────────────────────────────── */
.rm-panel{
  position:relative;
  background:linear-gradient(180deg,#0E1117 0%,var(--rm-panel) 30%,#070A0D 100%);
  border-top:1px solid var(--rm-bezel);border-bottom:1px solid var(--rm-bezel);
  box-shadow:inset 0 0 30px rgba(0,0,0,.8);
}
/* the dot pitch — what makes it read as a board rather than a div */
.rm-panel::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background-image:radial-gradient(circle at 1.5px 1.5px,transparent 0 1px,rgba(0,0,0,.45) 1.15px);
  background-size:3px 3px;
}
.rm-w{color:var(--rm-lit);text-shadow:0 0 6px rgba(242,240,237,.55)}
.rm-a{color:var(--rm-amber);text-shadow:0 0 6px rgba(255,180,0,.8)}
.rm-t{color:var(--rm-team);text-shadow:0 0 7px currentColor}
.rm-d{color:var(--rm-dim)}

#ribbon{height:clamp(50px,8.5vh,104px);display:flex;align-items:center}
/* ⚠⚠ AN ID SELECTOR SETTING `display` OUTRANKS THE BROWSER'S OWN `[hidden]`
   RULE, so `el.hidden = true` set the attribute, changed nothing, and left a
   72px lit band on screen scrolling "Loading the board". Measured: hidden
   true, display flex. Third time this exact shape has bitten in this repo —
   see `.shp-c[hidden]` and `.sl-pane[hidden]`. Anywhere a rule sets display,
   the hidden case has to be restated. */
#ribbon[hidden],#crawlbar[hidden]{display:none !important}
.rm-clip{overflow:hidden;width:100%}
.rm-track{
  display:inline-flex;white-space:nowrap;will-change:transform;
  animation:rmscroll var(--dur,60s) linear infinite;
}
@keyframes rmscroll{to{transform:translateX(-50%)}}
.rm-seg{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:clamp(15px,3.6vh,38px);letter-spacing:.03em;padding:0 1.3em;
}
.rm-sep{color:var(--rm-team);opacity:.5;align-self:center;font-size:.65em}
.rm-tag{font-size:.6em;color:var(--rm-dim);letter-spacing:.1em}
.rm-rz{color:var(--rm-hot);animation:rmpulse 1s steps(2,end) infinite}
@keyframes rmpulse{50%{opacity:.15}}

/* ── the stage: panels that ABUT, not sections floating in black ──
   ⚠⚠ THE FIRST BUILD OF THIS PAGE WAS CENTRED SECTIONS WITH BIG GAPS OF DARK
   BETWEEN THEM. The "LED hardware" idea only existed in the two thin strips top
   and bottom and everything between was a plain dark web page — on a wide
   screen, a narrow column with two thirds of the display empty. Host: "design
   wise I think it's really bleh." He was right.

   A fan lounge is a WALL: panels touching each other, edge-lit, dense, no dead
   space. So every block here is a framed panel with a 2px seam, a club-coloured
   top edge and a faint inner light, and on a wide screen the chat becomes a
   rail beside the game rather than a thing you scroll to. */
.rm-stage{
  display:grid;gap:2px;background:var(--rm-bezel);
  grid-template-columns:1fr;
  /* ⚠⚠ IT HAS TO FILL, OR THE PAGE ENDS IN A VOID. `align-content:start`
     packed the grid to the top of a flex child that never grew, so on any day
     without football the page ran out of content two thirds up and left ~500px
     of flat black between the last band and the tab bar. `flex:1` makes the
     stage take the remaining height and `stretch` hands it to the chat, which
     is the part that still works when there is no game on. */
  flex:1;min-height:0;align-content:stretch;
}
@media(min-width:900px){
  .rm-stage{grid-template-columns:minmax(0,2.1fr) minmax(300px,1fr)}
  .rm-log{max-height:none}
  #jumbo{grid-row:1}
  .rm-chat{grid-row:1;height:100%;min-height:0}
}
#jumbo{
  display:flex;flex-direction:column;gap:2px;min-width:0;
  background:var(--rm-bezel);padding:0;
}
.rm-board{width:100%;display:flex;flex-direction:column;gap:2px;text-align:center}

/* One panel: bezel, a club-coloured lit edge, and a little inner glow so it
   reads as a screen rather than a card. */
.rm-tile-p{
  position:relative;background:var(--rm-panel);padding:clamp(.7rem,2vh,1.15rem) .8rem;
  box-shadow:inset 0 0 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.035);
}
.rm-tile-p::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--rm-team);opacity:.85;
  box-shadow:0 0 12px var(--rm-team),0 0 26px var(--rm-team);
}
.rm-label{
  font:700 .58rem/1 'Archivo',sans-serif;letter-spacing:.34em;
  text-transform:uppercase;color:var(--rm-dim);margin-bottom:clamp(6px,1.4vh,14px);
}

/* ── the score ─────────────────────────────────────────────── */
.rm-match{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(6px,2.4vw,34px)}
.rm-team{display:flex;flex-direction:column;align-items:center;gap:.18em;min-width:0}
.rm-crest{width:min(9vh,17vw,104px);height:min(9vh,17vw,104px);object-fit:contain;
  filter:drop-shadow(0 0 12px rgba(255,255,255,.16))}
/* ⚠ The crest's fallback, swapped in on `onerror`. A blocked image must leave
   a MARK, never a hole — same rule as every other crest here. */
.rm-tile{
  width:min(9vh,17vw,104px);height:min(9vh,17vw,104px);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton','Arial Narrow',sans-serif;font-size:clamp(16px,4vh,38px);
}
.rm-abbr{font-family:'Anton','Arial Narrow',sans-serif;font-size:min(3.4vh,6vw,38px);letter-spacing:.06em}
.rm-rec{font-size:clamp(9px,1.4vh,14px);color:var(--rm-dim);font-family:'JetBrains Mono',monospace}
/* ⚠ Sized on BOTH axes. A height-only clamp is fine on a wall and far too wide
   in a phone's third of a column — the digits spilled over the game clock. */
.rm-pts{
  font-family:'Anton','Arial Narrow',sans-serif;
  /* ⚠ 24vw was 94px a side on a 390px phone, which left the middle column —
     down and distance, possession, the clock — squeezed between two walls of
     numeral and reading as though it overlapped them. The score is the
     headline; it does not have to be the entire row. */
  font-size:min(11vh,19vw,150px);line-height:.92;font-variant-numeric:tabular-nums;
  text-shadow:0 0 18px rgba(255,180,0,.35);
}
.rm-mid{display:flex;flex-direction:column;align-items:center;gap:.3em;min-width:18vw}
.rm-clockbig{font-family:'Anton','Arial Narrow',sans-serif;font-size:min(4.4vh,7.5vw,52px);line-height:1}
.rm-sub{font-size:clamp(11px,2vh,21px);letter-spacing:.05em;font-family:'JetBrains Mono',monospace}
.rm-at{font-family:'Anton','Arial Narrow',sans-serif;font-size:clamp(14px,2.6vh,30px);color:var(--rm-dim)}

/* ── the home ground, where the @ used to be ─────────────────────────────
   ⚠ THE CANVAS NEEDS A HEIGHT IN CSS OR IT DRAWS INTO NOTHING. It is sized
   from its own bounding box at every frame, so a canvas the stylesheet has
   not given a box measures zero and the ground silently never appears —
   which reads as a broken feature rather than a missing rule. */
.rm-venue{display:flex;flex-direction:column;align-items:center;gap:.15em;max-width:34vw}
.rm-venue canvas{
  display:block;width:clamp(88px,17vh,200px);height:clamp(62px,12vh,140px);
}
.rm-vname{
  font-family:'Anton','Arial Narrow',sans-serif;letter-spacing:.04em;
  font-size:clamp(10px,1.7vh,17px);color:var(--rm-ink,#E8E4E0);
  text-align:center;line-height:1.1;
}
/* ⚠ A neutral card has no model, so the column would collapse to two lines of
   text and the two club tiles would slide inward. It keeps the model's height
   and centres in it. */
.rm-neutral{justify-content:center;min-height:clamp(62px,12vh,140px)}
.rm-vkick{
  font-family:'JetBrains Mono',monospace;font-size:clamp(8px,1.2vh,12px);
  letter-spacing:.22em;color:var(--rm-dim);text-align:center;
}
.rm-vwhere{
  font-family:'JetBrains Mono',monospace;font-size:clamp(8px,1.3vh,13px);
  letter-spacing:.06em;color:var(--rm-dim);text-align:center;
}
.rm-rzb{
  margin-top:.4em;padding:.14em .8em;border:1px solid var(--rm-hot);color:var(--rm-hot);
  letter-spacing:.3em;font-size:clamp(9px,1.6vh,16px);
  animation:rmpulse 1s steps(2,end) infinite;
}
.rm-last{
  margin-top:clamp(8px,1.8vh,18px);font-size:clamp(10px,1.7vh,17px);color:var(--rm-dim);
  max-width:92%;margin-left:auto;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* The line score — what every real scoreboard carries and a bare score does
   not: WHEN the game turned. */
.rm-ls{
  width:100%;border-collapse:collapse;margin-top:clamp(8px,1.8vh,16px);
  font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;
  font-size:clamp(10px,1.6vh,15px);
}
.rm-ls th{
  font:700 .82em/1 'Archivo',sans-serif;letter-spacing:.14em;color:var(--rm-dim);
  padding:.25rem .1rem;border-bottom:1px solid var(--rm-bezel);font-weight:700;
}
.rm-ls td{padding:.3rem .1rem;color:var(--rm-lit);border-bottom:1px solid #14171D}
.rm-ls td:first-child,.rm-ls th:first-child{text-align:left;padding-left:.3rem}
.rm-ls td.tot,.rm-ls th.tot{color:var(--rm-amber);font-weight:700}
.rm-ls tr.me td:first-child{color:var(--rm-team)}

.rm-count{display:flex;justify-content:center;gap:clamp(8px,2.4vw,32px);margin:clamp(8px,2vh,22px) 0}
.rm-cu{display:flex;flex-direction:column;align-items:center}
.rm-cu b{font-family:'Anton','Arial Narrow',sans-serif;font-size:min(9vh,16vw,108px);line-height:1;font-weight:400;font-variant-numeric:tabular-nums}
.rm-cu span{font:700 .55rem/1 'Archivo',sans-serif;letter-spacing:.28em;color:var(--rm-dim);margin-top:.5em}
.rm-odds{font-size:clamp(11px,1.8vh,20px);letter-spacing:.08em;font-family:'JetBrains Mono',monospace}

/* ── the field ───────────────────────────────────────────────────
   ⚠ THE OFFENSE ALWAYS ATTACKS RIGHTWARD. The feed says who has the ball but
   not which way they are facing, and guessing a direction to match the real
   stadium would be a coin flip that looks like a bug half the time. Drawing it
   one way and LABELLING the end zones is unambiguous with the data we have:
   left is the offense's own goal, right is the one they are driving at. */
.rm-fieldwrap{width:100%;margin:0}
.rm-field{display:block;width:100%;height:auto;border:1px solid var(--rm-bezel);border-radius:3px}
.rm-grass{fill:#0E1A12}
.rm-ez{fill:var(--ez,#1B1A1E)}
.rm-yard{stroke:#2A3B31;stroke-width:.22}
.rm-yard5{stroke:#22322A;stroke-width:.14}
.rm-num{fill:#3E5449;font:700 4px 'Archivo',sans-serif;text-anchor:middle}
.rm-eztext{font:700 5px 'Anton','Arial Narrow',sans-serif;text-anchor:middle;letter-spacing:.1em}
/* The two lines every broadcast draws: scrimmage in blue, the chains in
   yellow. Transitioned, so a gain slides instead of teleporting. */
.rm-los{stroke:#3E8FF0;stroke-width:.5;transition:transform .7s ease-out}
.rm-fd{stroke:#FFC400;stroke-width:.5;transition:transform .7s ease-out}
.rm-ball{transition:transform .7s ease-out}
/* Big enough to find at a glance on a phone: at rx 1.7 in a 120-wide viewBox
   the ball was ~5px on a 390px screen and read as a smudge on the line. */
.rm-ball ellipse{fill:#B4763A;stroke:#F5F2EE;stroke-width:.34;
  filter:drop-shadow(0 0 1.4px rgba(0,0,0,.9))}
@media (prefers-reduced-motion:reduce){
  .rm-los,.rm-fd,.rm-ball{transition:none}
}
.rm-fmeta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;
  padding:.5rem .2rem 0;font-family:'JetBrains Mono',monospace;
  font-size:clamp(10px,1.7vh,15px);color:var(--rm-dim);
}
.rm-fmeta b{color:var(--rm-lit);font-weight:400}

/* ── play by play ────────────────────────────────────────────── */
.rm-plays{
  width:100%;margin:0;text-align:left;display:flex;flex-direction:column;gap:1px;
  max-height:min(30vh,260px);overflow-y:auto;
}
.rm-ph{
  font:700 .58rem/1 'Archivo',sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rm-dim);padding:.2rem .1rem .45rem;
}
.rm-play{
  display:flex;gap:.7rem;align-items:baseline;padding:.45rem .6rem;
  background:#0C0E13;border-left:2px solid var(--rm-bezel);
  font-size:clamp(11px,1.8vh,16px);line-height:1.45;
}
.rm-play.is-score{border-left-color:var(--rm-amber);background:#141109}
.rm-play time{
  flex:none;font-family:'JetBrains Mono',monospace;font-size:.82em;
  color:var(--rm-dim);min-width:4.6em;
}
.rm-play.is-score p{color:var(--rm-amber)}
.rm-play p{margin:0;color:var(--rm-lit);opacity:.9}

/* ── crawl ───────────────────────────────────────────────────── */
#crawlbar{height:clamp(38px,6vh,74px);display:flex;align-items:stretch}
#crawl{flex:1;display:flex;align-items:center;overflow:hidden;min-width:0}
.rm-lh{color:var(--rm-team);font:700 .8em 'Archivo',sans-serif;letter-spacing:.16em;text-transform:uppercase}
.rm-rank{color:var(--rm-dim);font-size:.78em;min-width:1.4em}
#crawl .rm-seg{font-size:clamp(12px,2.4vh,25px);padding:0 1.1em;font-family:'Archivo',sans-serif}
#chip{
  display:flex;align-items:center;gap:.85em;padding:0 clamp(10px,1.5vw,24px);
  border-left:2px solid var(--rm-bezel);background:#0A0C10;position:relative;z-index:6;
  white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:clamp(11px,2.2vh,22px);
}
#rmDot{width:.5em;height:.5em;border-radius:50%;background:#39D98A;box-shadow:0 0 8px #39D98A}
#rmDot.err{background:var(--rm-hot);box-shadow:0 0 8px var(--rm-hot)}

/* ── wall-display modes ──────────────────────────────────────────
   `?mode=board` or `?mode=ticker` is a screen on a wall, not a page someone
   is reading. Everything that is site furniture comes off, including the
   chrome injected on every page — a bottom tab bar burned into a jumbotron
   is the same mistake /reel exists to avoid. */
body[data-mode='board'] #ribbon,
body[data-mode='board'] #crawlbar,
body[data-mode='ticker'] #jumbo,
body[data-mode='ticker'] #crawlbar,
body:not([data-mode='full']) nav,
body:not([data-mode='full']) .rm-bar,
body:not([data-mode='full']) .lt-tabbar,
body:not([data-mode='full']) .lt-navarrows,
body:not([data-mode='full']) #lt-theme-toggle{display:none!important}
body[data-mode='ticker'] #ribbon{height:100vh}
body[data-mode='ticker'] .rm-seg{font-size:clamp(26px,22vh,260px)}

@media (max-width:640px){
  .rm-mid{min-width:27vw}
  /* ⚠ On a phone the two club tiles and the model share one row, so the model
     has to give ground rather than push the clubs off the card. */
  .rm-venue{max-width:38vw}
  .rm-venue canvas{width:clamp(76px,26vw,150px);height:clamp(54px,18vw,105px)}
  .rm-bar{gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
  .rm-track{animation:none;transform:none}
  .rm-rz,.rm-rzb{animation:none}
}


/* ── the rooms ───────────────────────────────────────────────────
   General room, or your club's. Same chat layer as /live (one implementation,
   scoped by `ChatMessage.room`), so moderation, rate limits and the model's
   replies all work here without a second copy of any of it. */
.rm-chat{width:100%;margin:0;display:flex;flex-direction:column;min-width:0}
.rm-rooms{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.6rem}
.rm-rooms button{
  background:none;color:var(--rm-dim);border:1px solid var(--rm-bezel);
  border-radius:999px;padding:.32rem .8rem;min-height:28px;cursor:pointer;
  font:600 .7rem 'Archivo',sans-serif;white-space:nowrap;
}
.rm-rooms button[aria-selected='true']{
  color:#0A0C10;background:var(--rm-team);border-color:var(--rm-team);
}
.rm-rooms button:focus-visible{outline:2px solid var(--rm-amber);outline-offset:2px}
.rm-log{
  display:flex;flex-direction:column;gap:1px;flex:1;
  /* ⚠ A FLOOR, NOT A CEILING. This was capped at 34vh, which on an idle day
     left the chat as a short letterbox with dead space under it — the one
     part of the page that still has something to show, given the least room.
     It grows into whatever the stage has spare and only scrolls past that. */
  min-height:min(38vh,320px);overflow-y:auto;
  border:1px solid var(--rm-bezel);border-radius:3px;background:#0A0C10;padding:.3rem;
}
.rm-msg{
  display:flex;gap:.5rem;align-items:baseline;padding:.32rem .45rem;
  font-size:clamp(12px,1.9vh,16px);line-height:1.45;
}
.rm-msg b{color:var(--rm-team);font-weight:700;flex:none;font-size:.9em}
.rm-msg.is-sys{color:var(--rm-dim);font-style:italic;font-size:.86em}
.rm-msg.is-model b{color:var(--rm-amber)}
.rm-msg.is-mine b{color:var(--rm-lit)}
.rm-msg p{margin:0;color:var(--rm-lit);opacity:.92;word-break:break-word}
.rm-say{display:flex;gap:.4rem;margin-top:.5rem}
.rm-say input{
  flex:1;min-width:0;background:#12151B;color:var(--rm-lit);
  border:1px solid var(--rm-bezel);border-radius:3px;padding:.5rem .7rem;
  min-height:36px;font:400 .85rem 'Archivo',sans-serif;
}
.rm-say input:focus-visible{outline:2px solid var(--rm-amber);outline-offset:2px}
.rm-say input:disabled{opacity:.5;cursor:not-allowed}
.rm-note{margin:.4rem 0 0;font-size:.72rem;color:var(--rm-dim);min-height:1em}
.rm-note a{color:var(--rm-amber)}


/* ── the ghost, and the live chance ──────────────────────────────
   ⚠ THIS IS WHAT THE ROOM IS FOR. We published a projected score before
   kickoff; this is us living with it in public all afternoon, sitting under the
   real number and drifting as the game goes. Deliberately QUIET — dimmed, small,
   under the score rather than beside it. It is a claim we are being held to, not
   a thing competing with the actual result for attention. */
.rm-ghost{
  font-family:'JetBrains Mono',monospace;font-size:clamp(9px,1.4vh,13px);
  color:var(--rm-dim);margin-top:.15em;
  /* ⚠ NOT `nowrap`. "we said 26 · −2" is wider than a team column on a phone,
     so it ran out past both edges of the card and was clipped mid-word at
     each side — the model's own published number, the point of the ghost,
     rendered as "we said 20 ·". It wraps now. */
  max-width:100%;text-align:center;line-height:1.3;
}
.rm-ghost b{color:var(--rm-lit);opacity:.75;font-weight:400}
/* The gap between what we said and what happened. Not coloured good/bad — it
   is not a result, and tinting it green when we are close is the model
   congratulating itself. */
.rm-ghost i{font-style:normal;color:var(--rm-dim);margin-left:.35em;opacity:.75}

.rm-wp{margin:clamp(10px,2vh,18px) auto 0;max-width:min(100%,640px)}
.rm-wp-h{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-family:'JetBrains Mono',monospace;font-size:clamp(10px,1.6vh,14px);
  color:var(--rm-lit);margin-bottom:.35rem;
}
.rm-wp-h b{color:var(--rm-amber);font-weight:700}
.rm-wp-pre{color:var(--rm-dim);font-size:.9em}
.rm-wp-track{
  position:relative;height:10px;border-radius:2px;overflow:hidden;
  background:#181C22;border:1px solid var(--rm-bezel);
}
/* Filled from the LEFT for the home side, so the bar reads the same way the
   scoreboard does. */
.rm-wp-fill{
  height:100%;background:var(--rm-team);opacity:.85;
  transition:width .8s ease-out;
}
/* Where we were before anyone kicked off. The whole point is watching the fill
   pull away from this pin. */
.rm-wp-pin{
  position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--rm-lit);
  opacity:.85;box-shadow:0 0 6px rgba(242,240,237,.7);
}
@media (prefers-reduced-motion:reduce){ .rm-wp-fill{transition:none} }

/* ── the idle day ──────────────────────────────────────────────────────────
   ⚠ Plain sentence case in the body face, NOT the lit letterspaced scoreboard
   type. Set as scoreboard, "Not on today's board" filled a whole screen to
   deliver an apology; this is a note, so it is sized like one. */
.rm-idle{
  margin:.7rem auto 0;max-width:34rem;padding:0 1rem;text-align:center;
  font:400 .84rem/1.45 'Archivo',sans-serif;color:var(--rm-dim);
  letter-spacing:0;text-transform:none;
}


/* ── the club gate ────────────────────────────────────────────────────────
   ⚠⚠ `[hidden]` LOSES TO A CLASS THAT SETS `display`, and this is the FOURTH
   time that has bitten in this repo (.shp-c, .sl-pane, #ribbon/#crawlbar).
   The hidden case has to be restated wherever a rule sets display. */
.rm-gate{
  position:fixed;inset:0;z-index:2000;display:flex;align-items:center;
  justify-content:center;padding:clamp(12px,4vw,40px);
  background:rgba(8,9,12,.97);overflow-y:auto;
}
.rm-gate[hidden]{display:none !important}
.rm-gbox{width:100%;max-width:760px}
.rm-gh{
  font-family:'Anton','Arial Narrow',sans-serif;text-transform:uppercase;
  letter-spacing:.04em;font-size:clamp(20px,4.4vw,34px);text-align:center;
  color:var(--rm-ink,#E8E4E0);margin:0 0 .25em;
}
.rm-gsub{
  text-align:center;color:var(--rm-dim);font-size:clamp(11px,2.4vw,14px);
  margin:0 0 1.1em;line-height:1.4;
}
.rm-ggrid{
  display:grid;gap:clamp(6px,1.6vw,12px);
  grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
}
/* ⚠ 44px is the tap floor this site audits against; these are well over it. */
.rm-gcell{
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  padding:.6rem .3rem;min-height:84px;cursor:pointer;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  border-radius:10px;color:inherit;font:inherit;
}
.rm-gcell:hover,.rm-gcell:focus-visible{background:rgba(255,255,255,.10)}
.rm-gcrest{width:clamp(32px,7vw,44px);height:clamp(32px,7vw,44px);object-fit:contain}
.rm-gtile{
  display:flex;align-items:center;justify-content:center;
  width:clamp(32px,7vw,44px);height:clamp(32px,7vw,44px);border-radius:8px;
  font-family:'Anton','Arial Narrow',sans-serif;font-size:.72rem;letter-spacing:.02em;
}
.rm-gname{
  font-size:clamp(9px,1.9vw,11px);letter-spacing:.03em;text-align:center;
  color:var(--rm-dim);line-height:1.15;
}