/* Outs Left: a hand-turned outfield scoreboard. Every square is one out: the empty slots are the outs to go. */
:root {
  --green: #1E4D2B;     /* board paint */
  --slot: #0F2A17;      /* empty slot: an out to go */
  --tile: #F3F1EA;      /* enamel tile */
  --ink: #141414;
  --yel: #F2C230;       /* stencil yellow */
  --lamp: #FF4A3D;      /* live lamp, nothing else */
  --mute: #5B6358;      /* secondary text on tile */
  --dim: rgba(243, 241, 234, .76); /* secondary text on paint */
  --rule: #CDD1C6;
  --win: #D9DCCF; --loss: #4E7358; --pwin: #F2C230; --ploss: #7E7F33;
  --s: 13px;            /* slot size; integer px keeps the slot grid crisp */
  color-scheme: dark;
  scrollbar-color: var(--slot) var(--green);
}
@supports (width: round(down, 13.5px, 1px)) {
  :root { --s: clamp(11px, round(down, calc((100vw - 32px) / 27), 1px), 16px) }
}
* { box-sizing: border-box; margin: 0; padding: 0 }
html { background: var(--green); -webkit-text-size-adjust: 100% }
body {
  min-height: 100vh; background: var(--green); color: var(--tile);
  font: 500 15px/1.35 Barlow, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
::selection { background: var(--yel); color: var(--ink) }
:focus-visible { outline: 2px solid var(--yel); outline-offset: 2px; border-radius: 2px }
a { color: inherit; text-underline-offset: 3px }
button { font: inherit; color: inherit }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.stencil { font-family: "Big Shoulders Stencil Display", "Arial Narrow", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .06em }

/* ---------- shell ---------- */
.top, main, .foot { width: min(100%, 1360px); margin-inline: auto; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)) }
.top { padding-block: max(10px, env(safe-area-inset-top)) 4px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mark seg pick"; align-items: center; gap: 10px }
.mark { grid-area: mark; font-size: 21px; line-height: 1; letter-spacing: .05em; color: var(--yel); text-decoration: none; white-space: nowrap }
/* The native select sits invisible over its own label, so the closed picker can show the club's pennant and short name. */
.pick { grid-area: pick; justify-self: end; position: relative; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 30px 0 10px; border: 1px solid rgba(243, 241, 234, .38); border-radius: 6px; background: rgba(0, 0, 0, .2); color: var(--tile); font: 600 15px Barlow, sans-serif; white-space: nowrap }
.pick:hover { border-color: rgba(243, 241, 234, .7) }
.pick:focus-within { outline: 2px solid var(--yel); outline-offset: 2px }
.pick .pn { display: flex; color: rgba(243, 241, 234, .6) }
.pick .pennant { width: 22px; height: 14px }
.pick .nm { display: none }
.pick select { position: absolute; inset: 0; width: 100%; opacity: 0; appearance: none; -webkit-appearance: none; border: 0; font: 600 16px Barlow, sans-serif; cursor: pointer }
.pick select option { background: var(--slot); color: var(--tile) }
.pick .chev { position: absolute; right: 11px; width: 12px; height: 8px; pointer-events: none }
.seg { grid-area: seg; justify-self: center; width: min(100%, 140px); display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--slot); border-radius: 8px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4) }
.seg a { height: 32px; display: grid; place-items: center; border-radius: 6px; font: 600 14px Barlow, sans-serif; text-decoration: none; color: var(--dim); transition: color .2s }
.seg a[aria-current] { background: var(--tile); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .4) }
.seg a:hover:not([aria-current]) { color: var(--tile) }
@media (max-width: 359px) { /* too narrow for one row */
  .top { grid-template-columns: auto 1fr; grid-template-areas: "mark pick" "seg seg" }
  .seg { width: 100% }
}

main { display: flex; flex-direction: column; gap: 22px; padding-block: 12px 8px }
.toprow, .lead { display: flex; flex-direction: column; gap: 16px; min-width: 0 }

/* ---------- tiles: enamel plates hung on a pin, each a little off true ---------- */
.tiles { display: inline-flex; gap: 6px; padding: 6px; background: var(--slot); border-radius: 4px; box-shadow: inset 0 3px 8px rgba(0, 0, 0, .65), 0 1px 0 rgba(243, 241, 234, .08); vertical-align: middle }
.tiles b {
  --tw: 20px;
  width: var(--tw); height: calc(var(--tw) * 1.38); display: grid; place-items: center; padding-top: calc(var(--tw) * .1);
  color: var(--ink); border-radius: 3px; font: 900 calc(var(--tw) * 1.42)/1 "Big Shoulders Display", "Arial Narrow", sans-serif;
  background: radial-gradient(circle at 50% calc(var(--tw) * .1), #77746b 0 calc(var(--tw) * .028 + .5px), transparent calc(var(--tw) * .028 + 1.2px)),
    linear-gradient(#FBFAF6, var(--tile) 35%, #E6E3D8);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .1), inset 0 1px 0 #fff, 0 3px 6px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
  rotate: var(--tilt, 0deg); transform-origin: 50% calc(var(--tw) * .1); backface-visibility: hidden;
}
.tiles.big { gap: 8px; padding: 8px; border-radius: 5px }
.tiles.big b { --tw: min(118px, calc((100vw - 32px - 16px - (var(--n) - 1) * 8px) / var(--n))) }
.tiles.big b:nth-child(4n+1) { --tilt: -.9deg } .tiles.big b:nth-child(4n+2) { --tilt: .5deg }
.tiles.big b:nth-child(4n+3) { --tilt: -.3deg } .tiles.big b:nth-child(4n) { --tilt: .8deg }
.tiles.big.word b { --tw: min(96px, calc((100vw - 32px - 16px - (var(--n) - 1) * 8px) / var(--n))) }
.tiles.sm { gap: 3px; padding: 3px; border-radius: 3px }
.tiles.sm b { --tw: 19px; font-weight: 800; background: var(--tile); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .45) }
/* A new tile is hung on the pin and swings to rest. */
.tiles b.flip { animation: hang .9s cubic-bezier(.16, 1, .3, 1) both }
.tiles b.lift { animation: lift .26s cubic-bezier(.5, 0, .75, 0) both }
@keyframes lift { to { transform: translateY(-24%) rotate(-9deg); opacity: 0 } }
@keyframes hang {
  0% { transform: translateY(-14%) rotate(10deg) }
  34% { transform: translateY(0) rotate(-6deg) }
  56% { transform: rotate(3deg) }
  76% { transform: rotate(-1.2deg) }
  100% { transform: none }
}

/* ---------- top: whose count, the count, what it means ---------- */
.head { display: contents } /* phone: name, count and game, odds, road */
.name { order: 0 } .lead { order: 1 } .meta { order: 2 } .road { order: 3 }
.name { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; min-width: 0 }
.club { display: flex; align-items: center; gap: .16em; min-width: 0; font-size: clamp(40px, 13.5vw, 64px); line-height: .9; letter-spacing: .03em; color: var(--yel); text-wrap: balance }
.pennant { flex: none; width: 1.15em; height: .69em; rotate: -5deg; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)) }
.count { min-width: 0 }
.cap { margin-top: 12px; font-size: 15px; letter-spacing: .1em; color: var(--tile) }
.meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px }
.side { display: flex; flex-wrap: wrap; gap: 14px 32px; min-width: 0 }
.stat .stencil { display: block; font-size: 13px; letter-spacing: .1em; color: var(--yel) }
.stat strong { display: block; font: 800 clamp(44px, 13vw, 60px)/.9 "Big Shoulders Display", sans-serif; letter-spacing: .01em; margin: 6px 0 4px }
.stat small { display: block; font-size: 13px; color: var(--dim); max-width: 22ch }
.share { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid rgba(243, 241, 234, .38); border-radius: 6px; background: rgba(0, 0, 0, .2); font-weight: 600; cursor: pointer; transition: border-color .2s, background-color .2s }
.share:hover { border-color: var(--tile); background: rgba(0, 0, 0, .32) }
.share svg { width: 16px; height: 16px }
.winners { display: flex; flex-wrap: wrap; gap: 10px }
/* a plate hung under the name board on two pins */
.hung { position: relative; display: grid; gap: 3px; padding: 11px 16px 9px; background: var(--ink); border-radius: 3px; rotate: -1.5deg; transform-origin: 50% 0;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(243, 241, 234, .08) }
.hung::before, .hung::after { content: ""; position: absolute; top: 5px; left: 7px; width: 4px; height: 4px; border-radius: 50%; background: #77746b }
.hung::after { left: auto; right: 7px }
.hung b { font-size: 22px; line-height: 1; letter-spacing: .08em; color: var(--yel) }
.hung small { font: 600 12px Barlow, sans-serif; color: var(--tile) }
.hung.in { animation: hang-plate 1.1s cubic-bezier(.16, 1, .3, 1) both }
@keyframes hang-plate {
  0% { transform: translateY(-28px) rotate(-7deg); opacity: 0 }
  18% { opacity: 1 }
  40% { transform: translateY(0) rotate(4deg) }
  62% { transform: rotate(-2deg) }
  82% { transform: rotate(.8deg) }
  100% { transform: none }
}

/* ---------- plates bolted over the board ---------- */
.plate { border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .38) }
.live { background: var(--ink); color: var(--tile); display: grid; gap: 10px; padding: 10px 14px; font: 600 15px Barlow, sans-serif }
.live .ln { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.live .wl { font-size: 14px; color: var(--dim) }
.live .wl.w { color: var(--yel) }
.live .on { display: flex; align-items: center; gap: 7px; color: var(--lamp); font-weight: 700; letter-spacing: .08em; text-transform: uppercase }
.live .lbl { color: var(--yel); font-size: 14px }
.live .gm { color: var(--dim) }
.live .sc { display: flex; align-items: center; gap: 7px; font: 800 20px/1 "Big Shoulders Display", sans-serif; letter-spacing: .05em }
.live .sc .at { color: var(--dim); font: 600 14px Barlow, sans-serif }
.live .tiles.sm { background: #000 }
.live .inn { font: 800 19px/1 "Big Shoulders Display", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--yel) }
.live .outs { display: flex; align-items: center; gap: 5px; margin-left: auto }
.live .outs .stencil { font-size: 12px; color: var(--dim); margin-right: 3px }
.live .outs i { width: 13px; height: 13px; border-radius: 50%; background: #35352F; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7) }
.live .outs i.lit { background: var(--lamp); box-shadow: none } /* lit against the unlit discs */
.live .outs i.ignite { animation: ignite .7s ease-out both }
@keyframes ignite { 0% { background: #35352F } 25% { background: #FFC2BC } 100% { background: var(--lamp) } }
/* this game's row rides in the strip on a phone, so the out drop is on the first screen */
.gamerow { container-type: inline-size; --s: 11px }
.gamerow .liverow { width: calc(27 * var(--s)); margin-inline: auto }
.road .now, .run { display: none }
.gamerow p { margin-top: 6px; font-size: 12px; color: var(--dim); text-align: right }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); flex: none }

/* ---------- the road: one empty slot per out to go ---------- */
.road { display: grid; gap: 12px; width: calc(27 * var(--s)); max-width: 100%; align-self: center }
.lh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: 13px; color: var(--dim) }
.lh .stencil { display: flex; align-items: center; gap: 7px; font-size: 15px; letter-spacing: .08em; color: var(--yel) }
.lh b { font: 800 22px/1 "Big Shoulders Display", sans-serif; letter-spacing: .03em; color: var(--tile); margin-left: 2px }
.slots {
  height: calc(var(--rows) * var(--s));
  background:
    repeating-linear-gradient(90deg, var(--green) 0 2px, transparent 0 var(--s)),
    repeating-linear-gradient(180deg, var(--green) 0 2px, rgba(0, 0, 0, .5) 0 4px, transparent 0 var(--s)),
    var(--slot);
}
.slots.part { height: var(--s); width: calc(var(--k) * var(--s)); margin-left: auto }
.fold { margin-bottom: 4px; padding: 3px 0; text-align: center; font: 600 12px Barlow, sans-serif; color: var(--dim); border-block: 2px dashed rgba(15, 42, 23, .9) }
.liverow { display: grid; grid-template-columns: repeat(27, var(--s)); grid-auto-rows: var(--s); background: var(--slot) }
.liverow i { position: relative; background: var(--slot); box-shadow: inset 2px 2px 0 var(--green), inset 0 4px 0 -2px rgba(0, 0, 0, .5) }
.liverow i.on::before, .liverow i.next::before { content: ""; position: absolute; inset: 2px 0 0 2px }
.liverow i.on::before { background: var(--tile); box-shadow: 0 1px 1px rgba(0, 0, 0, .4) }
.liverow i.next::before { box-shadow: inset 0 0 0 2px var(--yel); animation: wait 2.4s ease-in-out var(--ph, 0ms) infinite }
@keyframes wait { 50% { box-shadow: inset 0 0 0 2px rgba(242, 194, 48, .3) } }
.liverow i.drop::before { animation: drop .6s cubic-bezier(.3, 0, .2, 1) both }
@keyframes drop {
  0% { transform: translateY(-220%); opacity: 0; background: var(--yel) }
  20% { opacity: 1 }
  58% { transform: none }
  72% { transform: translateY(-14%) }
  86% { transform: none; background: var(--yel) }
  100% { background: var(--tile) }
}

/* ---------- scenario plate ---------- */
.scn { background: var(--tile); color: var(--ink); padding: 4px 8px 10px }
.scn table { width: 100%; border-collapse: collapse; table-layout: fixed }
.scn col.lbl { width: 32% }
.scn col.on { background: #FBFAF6 }
.scn th, .scn td { text-align: left; vertical-align: top; padding: 7px 8px }
.scn thead th { padding-top: 10px; border-top: 3px solid transparent; font: 800 14px "Big Shoulders Stencil Display", sans-serif; letter-spacing: .08em; text-transform: uppercase }
.scn thead th.on { border-top-color: var(--green) }
.scn th small { display: block; font: 500 12px/1.25 Barlow, sans-serif; letter-spacing: 0; text-transform: none; color: var(--mute); margin-top: 2px }
.scn tbody th { font-size: 15px; font-weight: 700; padding-top: 12px }
.scn tbody td { font: 800 clamp(30px, 9.5vw, 42px)/1 "Big Shoulders Display", sans-serif; letter-spacing: .01em; padding-block: 10px }
.scn tbody td.na { color: var(--mute) }
.scn tbody tr { border-top: 1px solid var(--rule) }
.scn .foot-note { font-size: 12px; color: var(--mute); padding: 8px 8px 0; border-top: 1px solid var(--rule) }

/* ---------- out-of-town board and bracket ---------- */
.board { background: var(--green); padding: 14px 0 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .38) }
.board h2 { font-size: 19px; color: var(--yel); padding: 0 14px 8px; text-wrap: balance }
.board .sub { padding: 0 14px 8px; color: var(--dim); font-size: 13px }
.cols, .row { display: flex; align-items: center; gap: 12px }
.cols { padding: 0 14px 6px; font-size: 12px; letter-spacing: .08em; color: var(--yel); border-bottom: 1px solid rgba(0, 0, 0, .3); white-space: nowrap }
.cols > :first-child { width: 76px; flex: none }
.cols > :nth-child(2) { flex: 1 }
.c-w { width: 26px; flex: none; text-align: center }
.c-o { width: 80px; flex: none; text-align: right }
.c-p { width: 3.7em; flex: none; text-align: right }
.ser { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 7px 14px; border-bottom: 1px solid rgba(0, 0, 0, .3); row-gap: 4px }
.ser.focus { background: rgba(0, 0, 0, .15) }
.sname { grid-row: span 2; font-size: 19px; color: var(--yel); line-height: 1 }
.sname small { display: flex; align-items: center; gap: 5px; white-space: nowrap; font: 600 12px Barlow, sans-serif; letter-spacing: .01em; text-transform: none; color: var(--tile); margin-top: 5px }
.sname .lamp { width: 6px; height: 6px }
.row { grid-column: 2; min-height: 36px; margin: 0 -8px; padding: 0 8px; border-radius: 3px }
.row .tm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; font: 800 22px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; white-space: nowrap; overflow: hidden }
.row a.tm:hover { color: var(--yel) }
.row .tm .nm { display: none }
.pn { flex: none; width: 20px; height: 12px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)) }
.row .tbd { color: var(--dim) }
.row .from { font-size: 12px; color: var(--dim) }
.row .c-p { font: 600 14px Barlow, sans-serif; color: var(--dim) }
.row.me { background: rgba(242, 194, 48, .16) }
.row.me .tm, .row.me .c-p { color: var(--yel) }
.row.out .tm { color: rgba(243, 241, 234, .55); text-decoration: line-through; text-decoration-thickness: 2px }
.row .res { font: 800 13px "Big Shoulders Stencil Display", sans-serif; letter-spacing: .08em; color: var(--yel) }
.row.out .res { color: var(--dim) }
.elim { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 12px 14px 2px }
.elim .stencil { font-size: 12px; color: var(--yel) }
.elim ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px }
.elim li { font: 800 13px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em; color: var(--dim); background: var(--slot); padding: 4px 5px 3px; border-radius: 2px; text-decoration: line-through; text-decoration-color: rgba(243, 241, 234, .4) }
.elim li a { text-decoration: none }
.elim li:hover { color: var(--tile) }

.facts { background: var(--tile); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr }
.facts div { padding: 12px 14px; border-top: 1px solid var(--rule) }
.facts div:nth-child(odd) { border-right: 1px solid var(--rule) }
.facts div:nth-child(-n+2) { border-top: 0 }
.facts dt { font: 800 13px "Big Shoulders Stencil Display", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mute) }
.facts dd { font: 800 30px/1.05 "Big Shoulders Display", sans-serif; margin-top: 4px }
.facts dd small { display: block; font: 500 12px Barlow, sans-serif; color: var(--mute) }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 10px }
.tabs a { font: 600 14px Barlow, sans-serif; text-decoration: none; padding: 6px 10px; border-radius: 4px; background: var(--slot); color: var(--dim) }
.tabs a[aria-current] { background: var(--tile); color: var(--ink) }
.tabs a:hover:not([aria-current]) { color: var(--tile) }

.seeds { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 0 14px }
.seeds ol { list-style: none }
.seeds li { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, .3); font: 800 20px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em }
.seeds li b { font: 600 12px Barlow, sans-serif; color: var(--yel) }
.seeds li small { font: 600 13px Barlow, sans-serif; color: var(--dim); letter-spacing: 0 }
.seeds a { text-decoration: none }
.seeds li.me { background: rgba(242, 194, 48, .16); color: var(--yel) }

.msg { background: var(--tile); color: var(--ink); padding: 14px 16px; font-size: 15px }
.msg strong { display: block; font-size: 17px; margin-bottom: 4px }
.plates { display: grid; gap: 16px; align-items: start }

/* ---------- the season: every out recorded ---------- */
.season header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; margin-bottom: 12px }
.season h2 { font-size: 22px; color: var(--yel) }
.season header p { font-size: 14px; color: var(--dim) }
.list { display: grid; gap: 14px; width: calc(27 * var(--s)); max-width: 100%; margin-inline: auto }
.mo > p { display: flex; justify-content: space-between; font-size: 14px; letter-spacing: .08em; color: var(--yel); margin-bottom: 5px }
.mo > p span { font-family: "Big Shoulders Display", sans-serif; color: var(--tile) }
.g i { display: block; position: relative; height: var(--s); width: calc(var(--o) * var(--s));
  background: repeating-linear-gradient(90deg, transparent 0 2px, var(--c) 0 var(--s)) 0 2px / 100% calc(var(--s) - 2px) no-repeat }
.w { --c: var(--win) } .l { --c: var(--loss) } .pw { --c: var(--pwin) } .pl { --c: var(--ploss) } .f { --c: var(--slot) }
.g .x::after { content: ""; position: absolute; right: calc(var(--s) / 2 - 3px); top: calc(var(--s) / 2 - 1px); width: 4px; height: 4px; border-radius: 50%; background: var(--ink) } /* extra innings: the game ran past 27 outs */
.pano { display: none }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 13px; color: var(--dim) }
.legend > span { display: inline-flex; align-items: center; gap: 6px }
.legend > .unit { display: inline }
.legend .k { width: 11px; height: 11px; flex: none; position: relative }
.k.w { background: var(--win) } .k.l { background: var(--loss) } .k.pw { background: var(--pwin) } .k.pl { background: var(--ploss) }
.k.o { background: var(--slot) } .k.n { box-shadow: inset 0 0 0 2px var(--yel) }
.k.x { background: var(--win) } .k.x::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--ink) }
.dt { display: none }

/* ---------- footer ---------- */
.foot { padding-block: 28px max(28px, env(safe-area-inset-bottom)); font-size: 13px; line-height: 1.5; color: var(--dim); display: grid; gap: 4px }
.foot .fine { font-size: 12px }

/* ---------- desktop: count and road side by side, the season as one panorama ---------- */
@media (min-width: 960px) {
  :root { --s: 16px }
  .top { grid-template-columns: auto 260px 1fr; column-gap: 32px; padding-top: 18px }
  .seg { width: 100% }
  .seg a { height: 34px; font-size: 15px }
  .pick { height: 40px; padding-left: 12px; font-size: 16px }
  .pick .ab { display: none } .pick .nm { display: inline }
  main { display: grid; grid-template-areas: "top" "season" "plates"; gap: 44px; padding-block: 26px 8px }
  /* name board across the top with the odds in its corner; the count, then the road beside it */
  .toprow { grid-area: top; display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "head head" "lead road"; column-gap: clamp(40px, 5vw, 72px); row-gap: 22px }
  .head { grid-area: head; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px }
  .meta { margin-left: auto; gap: 28px }
  .toprow.solo { grid-template-areas: "name name" "lead meta" }
  .solo .head { display: contents }
  .solo .name { grid-area: name } .solo .meta { grid-area: meta; margin-left: 0; align-self: end }
  .lead { grid-area: lead; gap: 20px }
  .toprow:has(.now) .lead { justify-content: space-between }
  .lead > .live { contain: inline-size } /* the strip wraps to the count's width instead of widening it */
  .solo .meta { flex-direction: column; align-items: flex-start; gap: 20px }
  .solo .side { flex-direction: column }
  .club { font-size: clamp(64px, 7vw, 100px) }
  .tiles.big { --tb: clamp(380px, 42vw, 570px) }
  .tiles.big b { --tw: min(170px, calc((var(--tb) - 16px - (var(--n) - 1) * 8px) / var(--n))) }
  .tiles.big.word b { --tw: min(124px, calc((var(--tb) - 16px - (var(--n) - 1) * 8px) / var(--n))) }
  .stat strong { font-size: 72px }
  .cap { font-size: 16px }
  .hung b { font-size: 26px }
  .gamerow { display: none }
  .road { grid-area: road; align-self: start; width: auto; container-type: inline-size }
  .road:has(.now) { align-self: end } /* this game's row lines up with this game's strip */
  .road .now { display: block }
  .road.run { display: block; align-self: end }
  .run .legs { display: grid; gap: 16px 24px }
  .run .leg { margin-left: 0 }
  .leg { --s: 17px; width: calc(27 * var(--s)); margin-left: auto }
  .plates { grid-area: plates; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px }
  .plates > .board { grid-column: 2; grid-row: 1 / span 3 }
  .plates > :only-child { grid-column: 1 / -1 }
  /* a full bracket takes the width as a tree */
  .plates:has(> .br) { grid-template-columns: minmax(0, 1fr) }
  .plates:has(> .br) > .scn { max-width: 660px }
  .plates > .board.br { grid-column: 1 / -1; grid-row: auto }
  .br .grid { display: none }
  .br .tree { display: grid }
  /* the club column takes the slack, so the numbers sit at the plate's right edge */
  .row .tm, .cols > :nth-child(2) { flex: 1 1 160px }
  .row .tm .ab { display: none }
  .row .tm .nm { display: inline }

  .season { grid-area: season }
  .list, .ph { display: none }
  .dt { display: inline }
  .pano { display: block; container-type: inline-size; padding: 30px 0 34px }
  .track { --pc: 6px; display: flex; height: calc(27 * var(--pc)) }
  .track > i, .ahead > i { flex: none; position: relative; width: var(--pc); height: 100%;
    background: repeating-linear-gradient(180deg, var(--c) 0 calc(var(--pc) - 1px), transparent 0 var(--pc)) 0 0 / calc(var(--pc) - 1px) calc(var(--o) * var(--pc)) no-repeat }
  .track .x::after { content: ""; position: absolute; left: 0; right: 1px; top: calc(27 * var(--pc) + 1px); height: 2px; background: var(--win) } /* extra innings */
  .ahead { flex: none; display: flex; position: relative; height: 100% }
  .ahead::before { content: ""; position: absolute; left: 0; right: 1px; bottom: calc(100% + 5px); height: 5px; border: 2px solid var(--yel); border-bottom: 0 }
  .tg { position: absolute; right: 0; bottom: calc(100% + 13px); white-space: nowrap; font: 800 17px/1 "Big Shoulders Display", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--yel) }
  .ahead > .lc { background:
      repeating-linear-gradient(180deg, var(--tile) 0 calc(var(--pc) - 1px), transparent 0 var(--pc)) 0 0 / calc(var(--pc) - 1px) calc(var(--r) * var(--pc)) no-repeat,
      repeating-linear-gradient(180deg, var(--slot) 0 calc(var(--pc) - 1px), transparent 0 var(--pc)) 0 0 / calc(var(--pc) - 1px) calc(var(--o) * var(--pc)) no-repeat }
  .lc::after { content: ""; position: absolute; left: -2px; top: calc(var(--r) * var(--pc) - 2px); width: calc(var(--pc) + 3px); height: calc(var(--pc) + 3px); box-shadow: inset 0 0 0 2px var(--yel) }
  .mk { flex: none; width: 0; position: relative }
  .mk::before { content: ""; position: absolute; top: calc(100% + 4px); left: 0; width: 1px; height: 6px; background: var(--dim) }
  .mk::after { content: attr(data-m); position: absolute; top: calc(100% + 13px); left: 0; font: 800 12px/1 "Big Shoulders Stencil Display", sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); white-space: nowrap }
  .mk.ps::before { top: -4px; height: calc(100% + 14px); width: 2px; left: -2px; background: var(--yel) }
  .mk.ps::after { color: var(--yel) }
  .end { flex: none; position: relative; width: 3px; margin-left: 5px; background: var(--yel); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) }
  .end b { position: absolute; top: 0; left: 9px; font-size: 12px; line-height: 1; letter-spacing: .1em; color: var(--yel); white-space: nowrap }
}
@media (min-width: 1200px) { :root { --s: 17px } }
@supports (width: round(down, 6.5px, 1px)) {
  .gamerow .liverow { --s: round(down, calc(100cqw / 27), 1px) }
  @media (min-width: 960px) {
    .track { --pc: clamp(4px, round(down, calc((100cqw - 72px) / var(--n)), 1px), 14px) }
    .leg { --s: clamp(13px, round(down, calc(100cqw / 27), 1px), 26px) }
    .run .leg { --s: clamp(10px, round(down, calc(100cqw / 27), 1px), 16px) }
    /* a wide road takes the run two series across, so it fills the column instead of trailing down it */
    @container (min-width: 640px) {
      .run .legs { grid-template-columns: 1fr 1fr }
      .run .leg { --s: clamp(10px, round(down, calc((100cqw - 24px) / 54), 1px), 20px) }
    }
  }
}

/* ---------- the bracket tree (desktop): AL from the left, NL from the right, the World Series between ---------- */
.tree { display: none; --cg: 26px; --rg: 14px; --wire: rgba(243, 241, 234, .3);
  grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: auto 1fr 1fr; column-gap: var(--cg); row-gap: var(--rg); padding: 4px 14px 0 }
.tree .lg { grid-row: 1; font-size: 13px; letter-spacing: .1em; color: var(--yel); padding-bottom: 7px; border-bottom: 1px solid rgba(0, 0, 0, .3) }
.tree .lg.al { grid-column: 1 / 4 }
.tree .lg.nl { grid-column: 5 / 8; text-align: right }
.tnote { grid-column: 1 / -1; grid-row: 4; padding-top: 4px; font-size: 12px; color: var(--dim) }
.node { position: relative; display: grid; align-items: center; min-width: 0 }
.card { position: relative; padding: 8px 10px 4px; background: var(--slot); border-radius: 4px; box-shadow: inset 0 1px 0 rgba(243, 241, 234, .06), 0 2px 6px rgba(0, 0, 0, .35) }
.node.focus .card { box-shadow: inset 0 0 0 2px var(--yel), 0 2px 6px rgba(0, 0, 0, .35) }
.ws .card { padding-top: 12px; box-shadow: inset 0 3px 0 var(--yel), 0 2px 6px rgba(0, 0, 0, .35) }
.nh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; margin-bottom: 3px }
.nh .stencil { font-size: 14px; letter-spacing: .08em; color: var(--yel); white-space: nowrap }
.nh small { display: flex; align-items: center; gap: 4px; font: 600 11px Barlow, sans-serif; color: var(--dim); white-space: nowrap }
.nh .lamp { width: 6px; height: 6px }
.nt { display: flex; align-items: center; gap: 7px; min-height: 32px; margin: 0 -10px; padding: 0 10px; border-top: 1px solid rgba(243, 241, 234, .08) }
.nt .tm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font: 800 19px/1 "Big Shoulders Display", sans-serif; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; overflow: hidden }
.nt a.tm:hover { color: var(--yel) }
.nt .tm .nm { display: none } /* a tree column is too narrow for names; abbreviations, as on a printed bracket */
.nt.tbd .tm { color: var(--dim) }
.nt.tbd small { font-size: 11px; color: var(--dim) }
.nt .c-p { width: auto; min-width: 2.7em; font: 600 13px Barlow, sans-serif; color: var(--dim); text-align: right }
.nt .res { font: 800 12px "Big Shoulders Stencil Display", sans-serif; letter-spacing: .08em; color: var(--yel) }
.nt.out .tm { color: rgba(243, 241, 234, .55); text-decoration: line-through; text-decoration-thickness: 2px }
.nt.out .res { color: var(--dim) }
.nt.me { background: rgba(242, 194, 48, .16) }
.nt.me .tm, .nt.me .c-p { color: var(--yel) }
/* wires: each series feeds the next one toward the middle */
.node::before, .node::after, .card::after { position: absolute; border: 0 solid var(--wire) }
.rF::after, .rD::after, .rL::before, .rL::after, .rL .card::after { content: "" }
.rF::after, .rD::after, .rL::after, .rL .card::after { top: 50%; border-top-width: 2px }
.rF.al::after { left: 100%; width: var(--cg) }
.rF.nl::after { right: 100%; width: var(--cg) }
.rD.al::after { left: 100%; width: calc(var(--cg) / 2) }
.rD.nl::after { right: 100%; width: calc(var(--cg) / 2) }
.rL::before { top: calc(25% - var(--rg) / 4); bottom: calc(25% - var(--rg) / 4); border-left-width: 2px }
.rL.al::before { left: calc(var(--cg) / -2) }
.rL.nl::before { right: calc(var(--cg) / -2 - 2px) }
.rL.al::after { left: calc(var(--cg) / -2); width: calc(var(--cg) / 2) }
.rL.nl::after { right: calc(var(--cg) / -2); width: calc(var(--cg) / 2) }
.rL.al .card::after { left: 100%; width: var(--cg) }
.rL.nl .card::after { right: 100%; width: var(--cg) }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
}