/* ---------------------------------------------------------------------------
   Game day (src/gameday_view.js) — in the room (2026-09-25).

   The page stands in the stadium tunnel, and on game day the tunnel moves
   (the art session's engine on the room's canvas, src/room.js). Everything
   on it is the room kit's furniture (src/room.css): windows with a
   club-colour title bar, the gold cursor, chunky buttons, badges, face
   frames. This file only lays Game day's own pieces out: the clubs'
   plates, the scoreboard and the down bar, the field, the call cards, the
   play cards and the rows, the final and the XP.

   Own classes `gd-` / `gf-` / `sb-` / `sit-` / `ctl-` / `dec-` / `pb-` /
   `gds-` / `wk-` / `xp-` / `lg-` so nothing collides. House rules: solid
   colour only, no pale tints, no emoji, no left-edge stripes, square pixel
   corners, Jersey 15 for display, Rubik 700+ for everything read.
--------------------------------------------------------------------------- */

/* --- the room: a taller clear strip before kick-off, so the tunnel reads -- */
.rm-stage.gd-xl { height: 236px; }

.gd { font-weight: 700; }
.gd-go { display: flex; gap: 8px 10px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.gd-go.l { justify-content: flex-start; margin-top: 14px; }
.gd-err { margin-bottom: 22px; }
.gd-err .rm-wb { font: 800 15px/1.3 var(--sans); }
.gd-held-at:empty, .gd-dec-at:empty, .pb-top:empty { display: none; }

/* pixel logos: 32 / 64 only (a clean quarter / half of the 128 grid) */
.gd img.gd-logo { image-rendering: pixelated; image-rendering: crisp-edges; flex: none; display: block; }
.gd img.gd-l32 { width: 32px; height: 32px; }
.gd img.gd-l64 { width: 64px; height: 64px; }
.rm-crest.gd-c64 { width: 76px; height: 76px; }
.rm-crest.gd-c64 img { width: 64px; height: 64px; }

/* a club's plate: its colour with the title bar's bevel, its crest on white */
.gd-plate, .gd-wk, .gd-ft, .sb-team, .gd-sit {
  background: var(--tm); color: var(--on-tm);
  --gd-bevel: inset 0 3px 0 0 color-mix(in srgb, var(--tm) 70%, #fff), inset 0 -3px 0 0 color-mix(in srgb, var(--tm) 62%, #000);
}
.gd-plate, .gd-wk, .gd-ft { margin: 3px; box-shadow: var(--frame), var(--gd-bevel); }
.gd-where { font: 900 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.gd-tname { margin-top: 4px; font: 400 32px/.92 var(--disp); letter-spacing: .4px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh); overflow-wrap: break-word; }
.gd-tname a { color: inherit; text-decoration: none; }
.gd-tname a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 3px; }
.gd-trec { margin-top: 4px; font: 400 26px/1 var(--disp); color: var(--tm-acc); text-shadow: 2px 2px 0 var(--tm-sh); }

/* --- before kick-off: both clubs and their key men ----------------------- */
.gd-match { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; }
.gd-at { margin-top: 30px; font: 400 44px/1 var(--disp); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); text-transform: uppercase; }
.gd-team { display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size; }
.gd-plate { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; }
.gd-team.r .gd-plate { flex-direction: row-reverse; text-align: right; }
.gd-pt { min-width: 0; }
.gd-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
/* a narrow side (a tablet) lists its men one under the other */
@container (max-width: 520px) { .gd-keys { grid-template-columns: minmax(0, 1fr); } }
.gd-key {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 3px; padding: 6px 8px 6px 30px;
  background: var(--win-2); color: #fff; box-shadow: var(--frame); text-decoration: none;
}
.gd-key:hover, .gd-key:focus-visible { background: var(--win-3); }
.gd-key-t { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; flex: 1; }
.gd-key-t b { font: 800 14px/1.15 var(--sans); overflow-wrap: break-word; max-width: 100%; }   /* a long name wraps, never cut */
.gd-slot.rm-bd { margin: 2px 2px 1px; }
.gd-key-l { font: 800 11px/1.2 var(--sans); color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.gd-key .ovr { flex: none; }
.gd-kickoff.rm-btn { font-size: 34px; padding: 14px 26px 12px; gap: 12px; }
.gd-gear.rm-btn { padding: 8px 10px 7px; }
.gd-gear.on, .ctl-b.on {
  background: var(--gold); color: var(--ink);
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk);
}
.gd-gear-i { width: 24px; height: 24px; display: block; }

/* --- the settings: an old sports game's options window -------------------- */
.gd-matchwin .gd-set { width: calc(100% - 6px); max-width: 480px; margin: 18px auto 3px; box-shadow: var(--frame); }
.gds-b { display: flex; flex-direction: column; gap: 12px; }
.gds-row { display: flex; flex-direction: column; gap: 6px; }
.gds-n { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.gd-seg { display: flex; margin: 3px; background: var(--ink); box-shadow: var(--frame); }
.gd-seg button {
  flex: 1 1 0; min-width: 0; padding: 10px 4px 9px; border: 0; border-left: 2px solid var(--rule); cursor: pointer;
  background: none; color: #fff; font: 900 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.gd-seg button:first-child { border-left: 0; }
.gd-seg button:hover { background: var(--win-3); }
.gd-seg button.on { background: var(--gold); color: var(--ink); }
.gds-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; padding-top: 12px; border-top: 3px solid var(--rule); }
.gds-foot b { flex-basis: 100%; margin: 0 3px 4px; font: 800 14px/1.3 var(--sans); }
.gds-x.rm-btn { font: 800 22px/1 var(--sans); padding: 2px 8px 4px; }

/* --- before game day: the next opponent, and practice ---------------------- */
.gd-wk { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 12px 14px; }
.wk-t { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.wk-recs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 8px; }
.wk-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

/* --- the game: one slim pinned bar — the scoreboard, then the down and
   distance and the buttons — so the field under it is the picture ---------- */
.gd-top { position: sticky; top: 0; z-index: 8; display: flex; align-items: stretch; margin: 3px 3px 8px;
  background: var(--ink); border: 2px solid #fff; box-shadow: var(--frame), var(--drop); }
.gd-sb { flex: none; display: flex; align-items: stretch; background: var(--ink); }
.sb-team { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 10px; box-shadow: var(--gd-bevel); }
.sb-team.home { flex-direction: row-reverse; }
.sb-lg.rm-crest { width: 36px; height: 36px; margin: 2px; box-shadow: var(--frame-2); }
.sb-ab { font: 400 26px/1 var(--disp); letter-spacing: .6px; text-shadow: 2px 2px 0 var(--tm-sh); padding-top: 2px; }
.sb-pts { min-width: 1.1em; text-align: center; font: 400 44px/.8 var(--disp); text-shadow: 3px 3px 0 var(--tm-sh); padding-top: 5px; }
.sb-poss { position: relative; width: 18px; height: 11px; flex: none; background: #8b4513; box-shadow: var(--frame-2); }
.sb-poss::after { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; background: #fff; }
.sb-to { display: flex; gap: 3px; flex: none; }
.sb-to i { width: 11px; height: 6px; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.sb-to i.on { background: var(--gold); }
.sb-mid { display: flex; align-items: center; justify-content: center; min-width: 150px; padding: 3px 14px; background: var(--ink); }
.sb-q { font: 400 30px/1 var(--disp); color: var(--gold); white-space: nowrap; padding-top: 3px; }
.sb-q span { margin-left: 8px; color: #fff; }
/* a score: the scorer's side flashes gold */
.sb-team.flash { animation: sb-fl .3s steps(1, end) 5; }
@keyframes sb-fl { 0%, 100% { background: var(--gold); color: var(--ink); } 50% { background: #fff; color: var(--ink); } }

/* the down bar in the colours of whoever has the ball */
.gd-sit { position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px;
  padding: 3px 6px 0 12px; border-left: 3px solid var(--ink); box-shadow: var(--gd-bevel); }
.sit-dd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 auto; min-width: 0; }
.sit-poss { display: inline-flex; align-items: center; gap: 6px; flex: none; margin: 2px; padding: 4px 7px 3px;
  background: #fff; color: var(--ink); box-shadow: var(--frame-2); font: 900 12px/1 var(--sans); letter-spacing: .08em; }
.dn-ball { position: relative; width: 16px; height: 10px; flex: none; background: #8b4513; box-shadow: 0 0 0 2px var(--ink); }
.sit-dir { font: 900 14px/1 var(--sans); }
.sit-big { font: 400 36px/.9 var(--disp); text-transform: uppercase; white-space: nowrap; padding-top: 4px; text-shadow: 3px 3px 0 var(--tm-sh); }
.sit-dot { width: 8px; height: 8px; flex: none; background: currentColor; box-shadow: 2px 2px 0 var(--tm-sh); }

/* --- the three buttons on the bar, and the windows they drop --------------- */
.gd-ctl { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-left: auto; }
.ctl-b.rm-btn { margin: 3px 3px 7px; }
.ctl-car { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid currentColor; }
.ctl-b.on .ctl-car { transform: rotate(180deg); }
.ctl-gear.rm-btn { padding: 4px 7px 5px; }
.ctl-tp.gold.on { background: var(--gold); color: var(--ink); }
.ctl-wait { font: 400 24px/1 var(--disp); text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh); padding: 0 6px; }
.gd-pop { position: absolute; top: calc(100% + 12px); right: 4px; z-index: 20; }
/* the bar is pinned, so a long window scrolls inside itself: its last
   button (Leave game) is always in reach */
.sim-pop, .set-pop { max-height: max(260px, calc(100vh - 300px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--rule) var(--ink); }
.sim-pop { width: 270px; }
.sim-pop .rm-wb { display: grid; gap: 2px; padding: 8px; }
.pop-i.rm-opt { font-size: 22px; }
.set-pop { width: 560px; padding: 3px 12px 14px 3px; right: -5px; top: calc(100% + 9px); }
/* in the game the settings read across: the name, then the choice */
.set-pop .gds-row { flex-direction: row; align-items: center; gap: 10px; }
.set-pop .gds-n { flex: 0 0 150px; line-height: 1.2; }
.set-pop .gd-seg { flex: 1; }

/* --- the field: the hero. Drawn across the screen on a desk and up it on a
   phone; everything on it is placed by --p (along, 0-100% end line to end
   line) and --q (across), and this file alone decides which way round -- */
.gd-field-wrap { position: relative; margin: 3px 3px 10px; border: 2px solid #fff; background: var(--ink); box-shadow: var(--frame), var(--drop); scroll-margin-top: 80px; }
.gd-field { position: relative; height: clamp(300px, calc(100vh - 290px), 560px); overflow: hidden; background: #2e8b3e; }
.gd-field .gf-x { position: absolute; top: 0; bottom: 0; left: var(--p); width: 2px; transform: translateX(-50%); }
.gd-field .gf-at { position: absolute; left: var(--p); top: var(--q, 50%); transform: translate(-50%, -50%); }
.gf-turf { position: absolute; top: 0; bottom: 0; left: 8.3333%; right: 8.3333%;
  background: repeating-linear-gradient(90deg, #2e8b3e 0 5%, #267a35 5% 10%); }
.gf-ez { position: absolute; top: 0; bottom: 0; width: 8.3333%; display: grid; place-items: center; overflow: hidden; z-index: 1; }
.gf-ez.l { left: 0; border-right: 3px solid #fff; }
.gf-ez.r { right: 0; border-left: 3px solid #fff; }
.gf-ez span { position: absolute; left: 50%; top: 50%; font: 400 34px var(--disp); text-transform: uppercase; letter-spacing: 3px; white-space: nowrap; transform: translate(-50%, -50%) rotate(-90deg); }
.gf-ez.r span { transform: translate(-50%, -50%) rotate(90deg); }
/* a touchdown: the end zone flashes gold and white */
.gf-ez.lit { animation: ez-lit 0.45s steps(1, end) 8; }
@keyframes ez-lit { 0%, 100% { background: #ffd34d; color: #0d1b2a; box-shadow: inset 0 0 0 5px #fff; } 50% { background: #fff; color: #0d1b2a; box-shadow: inset 0 0 0 5px #ffd34d; } }
.gf-yl { background: #fff; z-index: 1; }
.gd-field .gf-yl.half { top: 12%; bottom: 12%; }
.gf-num { position: absolute; left: var(--p); transform: translateX(-50%); font: 400 34px var(--disp); color: #fff; z-index: 1; line-height: 1; text-shadow: 2px 2px 0 #1b5e2a; }
.gf-num.a { top: 9%; }
.gf-num.b { bottom: 9%; }
.gf-hash { position: absolute; left: 8.3333%; right: 8.3333%; height: 8px; z-index: 1;
  background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 1%); }
.gf-hash.a { top: 37%; }
.gf-hash.b { bottom: 37%; }
/* the goal posts on the end lines, from above */
.gf-post { position: absolute; top: 44%; height: 12%; width: 5px; z-index: 2; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.gf-post.l { left: 1%; }
.gf-post.r { right: 1%; }
.gf-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; }
.gf-mid img.gd-l64 { width: 64px; height: 64px; }
.gf-los, .gf-fd { z-index: 2; transition: left 0.45s steps(6), top 0.45s steps(6); }
.gd-field .gf-los, .gd-field .gf-fd { width: 4px; }
.gf-los { background: var(--sky); }
.gf-fd { background: var(--gold); }
.gf-gain { position: absolute; left: var(--lo); width: calc(var(--hi) - var(--lo)); top: 66%; height: 10px; box-shadow: var(--frame-2); z-index: 3; display: grid; place-items: center; }
.gf-gain em { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 5px;
  font: 900 12px var(--sans); font-style: normal; white-space: nowrap; background: var(--ink); color: #fff; padding: 3px 6px 2px; }
.gf-ball { width: 22px; height: 14px; z-index: 6; background: #8b4513; box-shadow: var(--frame-2); transition: left 0.45s steps(6), top 0.45s steps(6); }
.gf-ball::after { content: ''; position: absolute; left: 5px; right: 5px; top: 5px; height: 2px; background: #fff; }
.gd-field.anim .gf-ball { visibility: hidden; }

/* the snap played out: pixel men, the ball and its shadow, the names */
.gf-play { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gf-off { visibility: hidden; }
.gf-tr { width: 8px; height: 8px; z-index: 4; background: var(--c); box-shadow: 0 0 0 2px var(--ink); }
.gf-man { display: block; z-index: 6; }
.gf-man > i { display: block; width: 14px; height: 14px; background: var(--c); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #fff; }
.gf-man.key > i { width: 18px; height: 18px; }
.gf-man.small > i { width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--ink); }
.gf-man.def > i { transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--red); }
.gf-man.def.small > i { box-shadow: 0 0 0 2px var(--ink); }
.gf-man > span { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 3px 5px 2px;
  font: 900 11px/1 var(--sans); letter-spacing: .06em; white-space: nowrap; background: #fff; color: var(--ink); box-shadow: var(--frame-2); }
.gf-man.key > span { background: var(--gold); font-size: 13px; padding: 4px 6px 3px; }
.gf-man.def > span { background: var(--ink); color: #fff; bottom: auto; top: calc(100% + 8px); }
.gf-man.qb > span { font-size: 10px; }
.gf-man.key { z-index: 7; }
.gf-flag { width: 10px; height: 10px; z-index: 7; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.gf-ab { width: 16px; height: 10px; z-index: 8; }
.gf-ab::before { content: ''; position: absolute; inset: 2px 1px 0; background: rgba(3, 10, 5, .45); }
.gf-ab u { position: absolute; inset: 0; background: #8b4513; box-shadow: var(--frame-2);
  transform: translateY(calc(var(--z, 0) * -26px)) scale(calc(1 + var(--z, 0) * .3)); }
.gf-ab u::after { content: ''; position: absolute; left: 4px; right: 4px; top: 4px; height: 2px; background: #fff; }
.gd-field:not(.anim) .gf-ab { visibility: hidden; }

/* a sim playing out: the banner (a score, a turnover, the ball changing
   hands) and the drive so far */
.gf-ban { position: absolute; left: 50%; top: 16px; z-index: 11; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 24px 9px; background: var(--tm); color: var(--on-tm); box-shadow: var(--frame), var(--drop);
  text-align: center; white-space: nowrap; transform: translateX(-50%); animation: gf-pop .3s steps(3, end); }
.gf-ban[hidden] { display: none; }
.gf-ban b { font: 400 60px/.88 var(--disp); text-transform: uppercase; letter-spacing: 1px; text-shadow: 3px 3px 0 var(--tm-sh); }
.gf-ban small { font: 900 13px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gf-ban.small b { font-size: 36px; }
.gf-ban.red { background: var(--red); color: #fff; }
.gf-ban.red b { text-shadow: 3px 3px 0 var(--ink); }
.gf-ban.ink { background: var(--ink); color: var(--gold); }
@keyframes gf-pop { from { transform: translateX(-50%) scale(.6); } to { transform: translateX(-50%); } }
.gf-drv { position: absolute; left: 50%; bottom: 12px; z-index: 10; transform: translateX(-50%); padding: 6px 10px 5px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame-2); white-space: nowrap;
  font: 900 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.gf-drv[hidden] { display: none; }
.pb-ff .pb-head { font-size: 17px; }

/* your call: a dark glass panel over the field — the sideline, the grass
   still there behind it (the owner's ask: the one translucent panel) */
.gd-call { position: absolute; inset: 12px; z-index: 12; overflow-y: auto; overscroll-behavior: contain; padding: 3px;
  scrollbar-color: var(--rule) transparent; pointer-events: none; }
.gd-call > * { pointer-events: auto; }
.gd-call:empty { display: none; }
.gd-call > .gd-dec { max-width: 880px; margin: 0 auto; background: rgba(13, 27, 42, .85); box-shadow: var(--frame); }
.gd-call .dec-q { font-size: 26px; margin-bottom: 8px; }
.gd-call .dec-opts { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px; }
.gd-call .dec-o { margin-bottom: 7px; }
.dec-tempo { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 3px 10px; }
.dec-tempo .gd-seg { flex: 0 1 380px; }
.dec-o.win { background: var(--gold); color: var(--ink); }
.dec-win.rm-btn { display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); margin: 3px 3px 14px; font-size: 26px; }
.dec-win em { margin-left: auto; padding: 4px 7px 3px; font: 900 11px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--ink); color: var(--gold); }
.dec-o.win .dec-recm { background: var(--ink); color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  .gf-ez.lit { animation-iteration-count: 2; }
  .sb-team.flash { animation-iteration-count: 1; }
  .gf-los, .gf-fd, .gf-ball { transition: none; }
  .gf-ban { animation: none; }
}

/* --- stopped on a big moment: a gold bar that says which --------------------- */
.gd-held .rm-tb { flex-wrap: wrap; row-gap: 2px; border-bottom: 0; }
.hl-why { flex: 1; min-width: 0; font: 800 15px/1.25 var(--sans); }

/* --- your call ----------------------------------------------------------------- */
.gd-dec { scroll-margin-top: 170px; }
.dec-kick { display: inline-flex; align-items: center; gap: 10px; }
.dec-pulse { width: 10px; height: 10px; flex: none; background: var(--ink); animation: pb-blink 1s steps(1) infinite; }
.dec-q { margin: 0 3px 10px; font: 400 34px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.dec-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 6px; }
.dec-opts[hidden] { display: none; }   /* a grid ignores the hidden attribute */
.dec-grp { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 3px 0;
  font: 400 20px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; color: var(--gold); }
.dec-grp::after { content: ''; flex: 1; height: 3px; background: var(--rule); }
.dec-opts > .dec-grp:first-child { margin-top: 0; }
.dec-rest { margin-top: 8px; padding-top: 10px; border-top: 3px solid var(--rule); }
.dec-o {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0;
  margin: 3px 3px 8px; padding: 6px 7px 9px; border: 0; cursor: pointer; text-align: left;
  background: var(--win-2); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink);
}
.dec-o:hover, .dec-o:focus-visible { background: var(--win-3); outline: none; }
.dec-o:active { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 var(--ink); }
/* the cursor stands at the head of the card you point at, and rests on the one the staff likes */
.dec-o::before {
  content: ''; position: absolute; left: 7px; top: 6px; width: 14px; height: 22px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.dec-o:hover::before, .dec-o:focus-visible::before, .dec-o.rec::before { visibility: visible; }
.dec-o.rec::before { animation: rm-bob .7s steps(2, jump-none) infinite; }
.dec-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; min-height: 26px; padding-left: 20px; }
.dec-n { width: 22px; height: 22px; flex: none; display: grid; place-items: center; margin: 2px; font: 900 12px/1 var(--sans); font-style: normal;
  background: #fff; color: var(--ink); box-shadow: var(--frame-2); }
.dec-pk { margin: 2px; padding: 4px 6px 3px; text-decoration: none; font: 900 10.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: #fff; box-shadow: var(--frame-2); }
.dec-art { display: block; margin: 2px; background: #2e8b3e; box-shadow: var(--frame-2); overflow: hidden; }
.dec-svg { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.dec-o .dec-name { margin: 2px 2px 0; font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; overflow-wrap: anywhere; }
.dec-recm { align-self: flex-start; margin: 2px; padding: 4px 6px 3px; font: 900 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase;
  background: var(--gold); color: var(--ink); box-shadow: var(--frame-2); }
.dec-more { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin-top: 8px; }
.kbd { flex: none; margin-left: 2px; padding: 3px 5px 2px; font: 900 10.5px/1 var(--sans); font-style: normal; letter-spacing: .06em;
  background: var(--ink); color: #fff; }

/* --- the newest play: a window, the man who made it as the portrait -------- */
.pb-card .rm-tb { flex-wrap: wrap; row-gap: 4px; }
.pb-card .rm-tb h3 { font-size: 30px; }
.pb-card .rm-tb .rm-end { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.rm-tb.gold .pb-yc { background: var(--ink); color: #fff; }
/* a score shouts: its word in gold on the scorer's colour */
.pb-card.score .pb-ctx h3 { color: var(--tm-acc); }
.rm-tb.red .pb-dd, .rm-tb.ink .pb-dd { background: #fff; color: var(--ink); }
.pb-body { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.pb-body.solo { grid-template-columns: minmax(0, 1fr); }
.pb-por { padding: 12px; background: #13233f; border-right: 3px solid var(--ink); }
.pb-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; }
.pb-head { min-height: 1.35em; font: 800 19px/1.35 var(--sans); overflow-wrap: anywhere; }
.pb-card.pb-kick .pb-head { font: 400 32px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.pb-yds { margin: 0 2px; padding: 1px 6px 0; text-decoration: none; white-space: nowrap; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2); }
.pb-yds.loss { background: var(--red); color: #fff; }
.pb-beat[hidden] { display: none; }
.pb-beat { align-self: flex-start; margin: 2px; padding: 6px 10px 5px; font: 800 13.5px/1.3 var(--sans); background: var(--ink); color: var(--gold); box-shadow: var(--frame-2); }
.pb-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pb-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin: 2px; padding: 2px 9px 2px 2px;
  background: var(--win-2); color: #fff; box-shadow: var(--frame-2); }
.pb-chip .rm-fc { margin: 0; box-shadow: none; }
.pb-chip em { padding-left: 5px; font: 900 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.pb-chip-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pb-chip-t b { font: 800 12.5px var(--sans); white-space: nowrap; }
.pb-chip-t i { font: 800 11px var(--sans); font-style: normal; color: var(--soft); white-space: nowrap; }
.pb-fbox.none { background: var(--ink); }
/* the setup beat: the line of who has it, and three blinking blocks */
.pb-setup { display: none; align-items: center; gap: 12px; min-height: 90px; padding: 12px 16px; font: 800 19px/1.3 var(--sans); }
.pb-card.setup .pb-setup { display: flex; }
.pb-card.setup .pb-body { display: none; }
.pb-dots { display: inline-flex; gap: 5px; }
.pb-dots u { width: 10px; height: 10px; background: var(--gold); animation: pb-blink 0.9s steps(1) infinite; }
.pb-dots u:nth-child(2) { animation-delay: 0.3s; }
.pb-dots u:nth-child(3) { animation-delay: 0.6s; }
@keyframes pb-blink { 0%, 100% { visibility: visible; } 50% { visibility: hidden; } }

/* --- the play-by-play: zebra rows like every table in the room -------------- */
.gd-pbp:has(.pb-hist:empty) { display: none; }
.gd-pbp .rm-wb { padding: 9px; }
.pb-hist { display: flex; flex-direction: column; max-height: 560px; overflow-y: auto; margin: 3px; box-shadow: var(--frame); scrollbar-color: var(--rule) var(--ink); }
.pb-row {
  display: grid; grid-template-columns: 36px auto minmax(0, 1fr); align-items: center; gap: 3px 8px; flex: none;
  padding: 6px 8px 6px 4px; background: var(--win-2); color: #fff; border-top: 2px solid var(--rule); font: 700 13px/1.3 var(--sans);
}
.pb-row:first-child { border-top: 0; }
.pb-row:nth-child(even) { background: var(--zebra); }
.pb-row.score { background: var(--tm); color: var(--on-tm); }
.pb-row > .pb-fbox { grid-row: 1 / 3; align-self: start; }
.pb-r-t { grid-column: 2; grid-row: 1; font: 900 10.5px/1 var(--sans); letter-spacing: .06em; color: var(--gold); white-space: nowrap; }
.pb-r-dd { grid-column: 3; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0;
  font: 900 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.pb-row.score .pb-r-t, .pb-row.score .pb-r-dd { color: inherit; }
.pb-r-tx { grid-column: 2 / 4; grid-row: 2; font-weight: 800; overflow-wrap: anywhere; }
.pb-r-dd .rm-bd { font-size: 9.5px; padding: 3px 5px 2px; }
.pb-row.hot .pb-r-tx { font-weight: 900; }
.pb-row.fresh { animation: pb-in 0.35s steps(3, end); }
@keyframes pb-in { from { transform: translateY(-8px); } to { transform: none; } }

/* --- live player grades ------------------------------------------------------ */
.lg-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.lg-col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-th.rm-tb { margin: 3px; box-shadow: var(--frame), inset 0 3px 0 0 color-mix(in srgb, var(--tm) 70%, #fff), inset 0 -3px 0 0 color-mix(in srgb, var(--tm) 62%, #000); }
.lg-th .rm-meta { margin-left: auto; }
.lg-list { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.lg-row { min-width: 0; display: flex; align-items: center; gap: 8px; margin: 3px; padding: 3px 8px 3px 3px; background: var(--win-2); color: #fff; box-shadow: var(--frame); text-decoration: none; }
.lg-row:hover { background: var(--win-3); }
.lg-row.moved { background: var(--win-3); }
.lg-nm { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lg-nm b { font: 800 12.5px var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-nm i { font: 800 10.5px var(--sans); font-style: normal; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-d { flex: none; min-width: 34px; text-align: right; font: 900 12.5px var(--sans); font-variant-numeric: tabular-nums; }
.lg-d.up { color: #22c55e; }
.lg-d.dn { color: #ff5c7a; }

/* --- the final: the score, the button that moves on, XP and the box score -- */
.gd-fs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.gd-ft { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px; }
.gd-ft.r { flex-direction: row-reverse; }
.gd-fab { font: 400 38px/1 var(--disp); letter-spacing: .6px; text-shadow: 2px 2px 0 var(--tm-sh); }
.gd-fpts { margin-left: auto; font: 400 76px/.82 var(--disp); font-style: normal; padding-top: 6px; text-shadow: 3px 3px 0 var(--tm-sh); }
.gd-ft.r .gd-fpts { margin-left: 0; margin-right: auto; }
.gd-ft.won .gd-fpts { color: var(--tm-acc); }
.gd-res { font: 400 64px/1 var(--disp); letter-spacing: 1px; text-transform: uppercase; color: #fff; text-shadow: 4px 4px 0 var(--ink); }
.gd-res.gold { color: var(--gold); }
.gd-res.red { color: var(--red); }
.gd-on.rm-btn { font-size: 32px; padding: 13px 26px 11px; gap: 12px; }
.gd-ftabs.rm-tb { padding: 4px 8px 3px; gap: 2px; flex-wrap: wrap; }
.gd-ftabs .rm-tabi { font-size: 21px; }
.xp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px; }
.xp-row { display: flex; align-items: center; gap: 10px; min-width: 0; margin: 3px; padding: 6px 12px 6px 30px;
  background: var(--win-2); color: #fff; box-shadow: var(--frame); text-decoration: none; }
.xp-row:hover { background: var(--win-3); }
.xp-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.xp-nm b { font: 800 15px/1.15 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xp-sub { display: flex; align-items: center; gap: 6px; }
.xp-sub .rm-bd { margin: 2px; }
.xp-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.xp-n { display: flex; align-items: baseline; gap: 3px; flex: none; }
.xp-n b { font: 400 34px/.9 var(--disp); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); }
.xp-n i { font: 900 11px/1 var(--sans); font-style: normal; color: var(--gold); }

/* in a game you are in a game: the rest of the club is out of sight until
   the whistle — hidden, not faded, and in place, so nothing jumps when it
   comes back */
/* (owner, 2026-09-26: "the Home bar is still there — why?") no menu, no
   sub-menu, no day strip, no buttons: the header is one slim line, and on a
   phone it is gone — the scoreboard says it all. Leave game is in Settings. */
body.in-game #tabs, body.in-game #subs, body.in-game #calbar { display: none !important; }
body.in-game #hdr .hd-go > :not(.hq-btn) { display: none !important; }
body.in-game #hdr { margin-top: 8px; padding-top: 5px; padding-bottom: 5px; }
body.in-game #hdr .hd-logo { width: 40px; height: 40px; margin: 2px; }
body.in-game #hdr .hd-img { width: 32px; height: 32px; }
body.in-game #hdr .hd-name { font-size: 26px; }
body.in-game #hdr .hd-sub { display: none; }
body.in-game #hdr .hd-rec { font-size: 34px; }
body.in-game #hdr .hd-ph { font-size: 20px; }
@media (max-width: 720px) { body.in-game #hdr { display: none !important; } }

/* --- between a phone and a desk ---------------------------------------------- */
@media (max-width: 1100px) {
  /* the buttons first: the eight men are a long way down on a tablet or a phone */
  .gd-matchwin .rm-wb { display: flex; flex-direction: column; }
  .gd-matchwin .gd-go { order: -1; margin: 0 0 16px; }
  .gd-matchwin .gd-set { order: -1; margin: 0 auto 18px; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  .lg-cols { grid-template-columns: minmax(0, 1fr); }
  .lg-list { max-height: 300px; }
  .pb-hist { max-height: 420px; }
}

/* --- phone ------------------------------------------------------------------------ */
@media (max-width: 760px) {
  .rm-stage.gd-xl { height: 132px; }
  .gd-go { margin-top: 14px; }
  .gd-match { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gd-at { margin: 2px 0 0; text-align: center; font-size: 32px; }
  .gd-team.r .gd-plate { flex-direction: row; text-align: left; }
  .gd-keys { grid-template-columns: minmax(0, 1fr); }
  .gd-tname { font-size: 26px; }
  .gd-trec { font-size: 22px; }
  .rm-crest.gd-c64 { width: 58px; height: 58px; }
  .rm-crest.gd-c64 img, .gd .rm-crest.gd-c64 img.gd-l64 { width: 32px; height: 32px; }
  .gd-kickoff.rm-btn { font-size: 28px; padding: 12px 18px 10px; }
  .gd-kickoff.rm-btn, .gd-on.rm-btn { width: calc(100% - 6px); }
  .gd-on.rm-btn { font-size: 24px; white-space: normal; text-align: center; }
  .wk-chips { flex-direction: row; flex-wrap: wrap; align-items: flex-start; width: 100%; }

  .dec-q { font-size: 27px; }
  .gd-seg button { padding: 8px 2px 7px; font-size: 11px; letter-spacing: 0; white-space: normal; line-height: 1.1; }
  .dec-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .dec-o .dec-name { font-size: 19px; }
  .pb-card .rm-tb h3 { font-size: 26px; }
  .pb-por { padding: 8px; }
  .pb-main { padding: 10px; gap: 8px; }
  .pb-head { font-size: 16px; }
  .pb-setup { font-size: 16px; min-height: 80px; padding: 10px 12px; }
  .pb-hist { max-height: 460px; }
  .hl-why { flex-basis: 100%; font-size: 14px; }
  .gd-fs { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gd-res { order: -1; text-align: center; font-size: 48px; }
  .gd-ft.r { flex-direction: row; }
  .gd-ft.r .gd-fpts { margin-left: auto; margin-right: 0; }
  .gd-fab { font-size: 32px; }
  .gd-fpts { font-size: 60px; }
  .lg-cols { grid-template-columns: minmax(0, 1fr); }
  .lg-list { max-height: 320px; }
  .xp-grid { grid-template-columns: minmax(0, 1fr); }
  /* no pointer on a phone: the rows give the cursor's room back to the names */
  .xp-row.rm-pt, .gd-key.rm-pt { padding-left: 8px; }
  .xp-row.rm-pt::before, .gd-key.rm-pt::before { display: none; }
  .xp-nm b { white-space: normal; overflow-wrap: break-word; }
  .xp-n b { font-size: 30px; }
  .gd-ftabs .rm-tabi { font-size: 18px; padding: 6px 9px 4px; }
}

/* --- coaching badges on game day (sim.js BADGE_FX) ------------------------- */
/* a badge that made the difference: a chip in the card's bar, never over words */
.pb-bdg.rm-bd, .pb-r-bdg.rm-bd { font-style: normal; white-space: nowrap; }
.rm-tb.gold .pb-bdg.gold { background: var(--ink); color: var(--gold); }
.pb-r-bdg.rm-bd { margin-left: 4px; font-size: 9.5px; padding: 3px 5px 2px; }
/* halftime: what the first half looked like, on each fix */
.dec-stat.rm-bd { align-self: flex-start; font-style: normal; }
/* how much you call: at halftime and at the end of every quarter */
.gd-modes { display: flex; flex-direction: column; gap: 10px; margin: 12px 3px 0; padding-top: 12px; border-top: 3px solid var(--rule); }
.gd-qbreak .gd-modes { margin-top: 0; padding-top: 0; border-top: 0; }
.gd-modes .gds-row { flex-direction: row; align-items: center; gap: 10px; }
.gd-modes .gds-n { flex: 0 0 150px; line-height: 1.2; }
.gd-modes .gd-seg { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .gd-modes .gds-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .gd-modes .gds-n { flex: none; }
  .gd-modes .gd-seg button { font-size: 11px; letter-spacing: .02em; }
}

/* the play-by-play sits straight under the newest play, one column, newest first */
.gd-mid.gd-onecol { display: flex; flex-direction: column; gap: 10px; }
.gd-onecol .pb-hist { max-height: 520px; }

/* the play card, before and after the booth has told it (owner, 2026-09-26):
   no result on the card until the line is done; then the result line pops */
.pb-result { margin-top: 8px; }
.pb-result b { display: inline-block; padding: 5px 10px 4px; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2, 0 0 0 2px #000);
  font: 400 20px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.pb-result.pop b { animation: pb-pop .32s steps(3, end); }
@keyframes pb-pop { from { transform: scale(.6); } to { transform: none; } }
.pb-card.new-in { animation: pb-in .3s steps(3, end); }

/* in the game: no menu and no Game day chip — the way out is Leave game in
   Settings (owner, 2026-09-26) */
body:has(.gd-live) #tabs, body:has(.gd-live) #subs { display: none !important; }

/* after the game: each man's bar to his next skill point fills from where
   it stood before the game; a point earned fills it, flashes, and restarts */
.xp-row { flex-wrap: wrap; }
.xp-bar { flex: 1 0 100%; height: 10px; background: var(--ink); box-shadow: inset 0 0 0 2px #000; position: relative; overflow: hidden; }
.xp-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--to); background: var(--gold); animation: xp-fill 1.1s steps(12, end) both .25s; }
.xp-bar.up i { animation: xp-full .7s steps(8, end) both .25s, xp-flash .3s steps(2, end) .95s 2, xp-fill2 .6s steps(8, end) 1.6s both; }
@keyframes xp-fill { from { width: var(--from); } to { width: var(--to); } }
@keyframes xp-full { from { width: var(--from); } to { width: 100%; } }
@keyframes xp-flash { 50% { background: #fff; } }
@keyframes xp-fill2 { from { width: 0; } to { width: var(--to); } }
@media (prefers-reduced-motion: reduce) { .xp-bar i { animation: none !important; } }
/* --- a phone in a game: the slim bar on two rows, and the field turned to
   run up the screen, so it is still the picture ------------------------------ */
@media (max-width: 760px) {
  .gd-top { flex-wrap: wrap; margin: 3px 0 6px; }
  .gd-sb { flex: 1 1 100%; }
  .sb-team { flex: 1 1 0; gap: 5px; padding: 2px 6px; }
  .sb-lg.rm-crest { display: none; }      /* the abbreviation on the club's colour says who */
  .sb-ab { font-size: 20px; }
  .sb-pts { font-size: 32px; }
  .sb-team.away .sb-pts { margin-left: auto; }
  .sb-team.home .sb-pts { margin-right: auto; }
  .sb-to { flex-direction: column; gap: 2px; }
  .sb-to i { width: 9px; height: 4px; }
  .sb-poss { width: 14px; height: 9px; }
  .sb-poss::after { left: 3px; right: 3px; top: 3px; }
  .sb-mid { min-width: 0; padding: 2px 8px; }
  .sb-q { font-size: 21px; }
  .sb-q span { margin-left: 5px; }
  .gd-sit { flex: 1 1 100%; border-left: 0; border-top: 3px solid var(--ink); gap: 0 6px; padding: 3px 2px 0 8px; }
  .sit-dd { gap: 2px 8px; }
  .sit-poss { display: none; }
  .sit-big { font-size: 27px; }
  .sit-dot { width: 6px; height: 6px; }
  .ctl-b.rm-btn { font-size: 16px; padding: 5px 8px 5px; margin: 3px 2px 7px; }
  .ctl-gear.rm-btn { padding: 3px 5px 4px; }
  .gd-gear-i { width: 20px; height: 20px; }
  .gd-pop { left: 0; right: 0; width: auto; }
  .sim-pop, .set-pop { max-height: max(240px, calc(100vh - 200px)); }
  .set-pop { right: -3px; left: -9px; }
  .set-pop .gds-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .set-pop .gds-n { flex: none; }

  .gd-field-wrap { margin: 3px 0 10px; scroll-margin-top: 104px; }
  .gd-field { height: clamp(380px, calc(100vh - 240px), 620px); }
  .gd-field .gf-x { left: 0; right: 0; top: calc(100% - var(--p)); bottom: auto; width: auto; height: 2px; transform: translateY(-50%); }
  .gd-field .gf-at { left: var(--q, 50%); top: calc(100% - var(--p)); }
  .gd-field .gf-yl.half { top: calc(100% - var(--p)); bottom: auto; left: 12%; right: 12%; }
  .gd-field .gf-los, .gd-field .gf-fd { width: auto; height: 4px; }
  .gf-turf { top: 8.3333%; bottom: 8.3333%; left: 0; right: 0; background: repeating-linear-gradient(0deg, #2e8b3e 0 5%, #267a35 5% 10%); }
  .gf-ez { left: 0; right: 0; width: auto; height: 8.3333%; }
  .gf-ez.l { top: auto; bottom: 0; border-right: 0; border-top: 3px solid #fff; }
  .gf-ez.r { top: 0; bottom: auto; border-left: 0; border-bottom: 3px solid #fff; }
  .gf-ez span, .gf-ez.r span { font-size: 22px; letter-spacing: 2px; transform: translate(-50%, -50%); }
  .gf-num { left: auto; top: calc(100% - var(--p)); transform: translateY(-50%); font-size: 20px; }
  .gf-num.a { left: 7%; top: calc(100% - var(--p)); }
  .gf-num.b { right: 7%; bottom: auto; }
  .gf-hash { top: 8.3333%; bottom: 8.3333%; left: auto; right: auto; width: 7px; height: auto;
    background: repeating-linear-gradient(0deg, #fff 0 2px, transparent 2px 1%); }
  .gf-hash.a { left: 35%; top: 8.3333%; }
  .gf-hash.b { right: 35%; top: 8.3333%; bottom: 8.3333%; }
  .gf-post { top: auto; left: 44%; width: 12%; height: 5px; }
  .gf-post.l { bottom: 1%; left: 44%; }
  .gf-post.r { top: 1%; right: auto; }
  .gf-mid img.gd-l64 { width: 32px; height: 32px; }
  .gf-gain { left: 70%; width: 10px; top: calc(100% - var(--hi)); height: calc(var(--hi) - var(--lo)); }
  .gf-gain em { top: 50%; left: 100%; transform: translateY(-50%); margin: 0 0 0 5px; }
  .gf-ball { width: 14px; height: 22px; }
  .gf-ball::after { left: 6px; right: auto; width: 2px; top: 5px; bottom: 5px; height: auto; }
  .gf-ab { width: 10px; height: 16px; }
  .gf-ab u::after { left: 4px; right: auto; width: 2px; top: 4px; bottom: 4px; height: auto; }
  .gf-man > span { font-size: 10px; bottom: calc(100% + 6px); }
  .gf-man.key > span { font-size: 11.5px; }
  .gf-ban { top: 12px; padding: 8px 14px 7px; max-width: calc(100% - 20px); white-space: normal; }
  .gf-ban b { font-size: 40px; }
  .gf-ban.small b { font-size: 28px; }
  .gf-drv { bottom: 10%; font-size: 11px; }
  /* your call takes the whole field, and scrolls inside it */
  .gd-call { inset: 4px; }
  .gd-call .dec-q { font-size: 22px; }
  .gd-call .dec-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .gd-call .rm-wb { padding: 8px; }
  .dec-tempo { gap: 4px; }
  .dec-tempo .gd-seg { flex: 1 1 100%; }
}

/* Play the Moments (src/moments.js): the offer over the field */
.gd-moment .gd-mo-p { margin: 4px 3px 10px; font: 800 13.5px/1.4 var(--sans); }
.gd-moment .gd-mo-b { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-moment .gd-mo-b .rm-btn { flex: 1 1 160px; justify-content: center; }
/* How do you want to play? (before kick-off) */
.gd-mode .gd-modes-l { display: grid; gap: 6px; }
.gd-mode .gd-mo { display: grid; gap: 3px; text-align: left; padding: 10px 12px 9px 30px; }
.gd-mode .gd-mo b { font: 400 22px/1 var(--disp); text-transform: uppercase; }
.gd-mode .gd-mo span { font: 800 12.5px/1.3 var(--sans); }
.gd-mode .gd-mo-p { margin: 8px 3px 0; font: 800 12px var(--sans); color: var(--soft); }