/* ImageGen direction 01: a broadcast match board. All choices are localized
   native buttons; the artwork is decorative and menus retain native scrolling. */
#menu:is([data-page="play"],[data-page="batting"],[data-page="pitching"],[data-page="derby"]) #menu-player-art { display: none; }
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel:is([data-menu-page="play"],[data-menu-page="batting"],[data-menu-page="pitching"],[data-menu-page="derby"]) {
  left: calc(50% + (var(--safe-l) - var(--safe-r)) / 2); right: auto;
  top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2); bottom: auto;
  transform: translate(-50%,-50%); width: min(1240px,calc(100% - 80px - var(--safe-l) - var(--safe-r)));
  max-width: none; max-height: calc(100% - 110px - var(--safe-t) - var(--safe-b)); padding: 20px 24px;
  background: linear-gradient(135deg,#102f4af5,#061a30f7); border-color: #8ba7b9;
}
#menu .menu-panel:has(> .setup-pane:not([hidden])) .menu-heading { margin-bottom: 12px; padding-bottom: 12px; }
#menu .menu-panel > .setup-pane { overflow: hidden; padding: 0; }
#menu .setup-pane > .setup-content { flex: 1 1 auto; min-height: 0; padding: 3px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-color: #6684a2 #0a2038; }
.setup-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#menu .setup-pane button { cursor: pointer; }
#menu .setup-pane button:focus-visible { outline: 3px solid #fff2b9; outline-offset: 3px; z-index: 2; }
#menu .setup-pane .team-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 40px; margin: 0 0 14px; padding: 12px 16px; border: 1px solid #7893ac80; border-radius: 6px; background: linear-gradient(100deg,#26435e80,#0b203780,#26435e80); }
#menu .setup-pane .team-summary { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 40px 1fr; gap: 0; }
#menu .setup-pane .team-summary > div { display: grid; grid-template-columns: 54px 1fr; column-gap: 12px; align-items: center; }
#menu .setup-pane .team-summary small { grid-column: 2; align-self: end; color: #acc3d5; font-size: 11px; letter-spacing: .04em; }
#menu .setup-pane .team-summary b { position: relative; display: flex; align-items: center; gap: 10px; grid-column: 2; font: 700 24px/1.2 'Barlow Condensed',var(--font); color: #fff5d6; }
#menu .setup-pane .team-summary .team-logo { position: absolute; left: -66px; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; filter: drop-shadow(0 3px 4px #0007); }
#menu .setup-pane .team-summary > span { display: grid; place-items: center; font: italic 800 26px 'Barlow Condensed',var(--font); color: #ffdc80; }
#menu .setup-team-choice { min-width: 0; }
#menu .setup-pane .team-grid { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); gap: 5px; margin: 0; }
#menu .setup-pane .team-card { position: relative; display: grid; place-items: center; min-width: 0; min-height: 49px; padding: 3px; border: 1px solid #6888a080; border-radius: 4px; background: #0b213a; color: #d4e1ec; box-shadow: none; }
#menu .setup-pane .team-card .tc-icon { display: grid; place-items: center; width: auto; height: auto; font-size: 28px; }
#menu .setup-pane .team-card .team-logo { width: 38px; height: 38px; }
#menu .setup-pane .team-card b { font-size: 9px; line-height: 1.1; }
#menu .setup-pane .team-card.on { border-color: #ffdc80; background: #735d2c66; color: #ffe9a5; box-shadow: inset 0 0 0 1px #ffdc80; }
/* your own team in the opponents' row (practice, the derby): its place kept, not a choice */
#menu .setup-pane .team-card:disabled { opacity: .3; filter: grayscale(1); cursor: default; border-style: dashed; }
#menu .setup-pane .team-card:disabled:hover { border-color: #6888a080; }
#menu .setup-pane .team-card.on::after { content: '✓'; position: absolute; top: 1px; right: 2px; color: #ffdc80; font: 700 12px sans-serif; }
/* Each side's players sit under its team's column (in the team picker's grid: a third row); the venue and
   the match's settings (or the derby's records) follow on rows of their own. */
#menu #practice-setup:not([hidden]) { display: contents; }
#menu .setup-side { grid-row: 3; align-self: stretch; min-width: 0; margin-top: 4px; padding-top: 10px; border-top: 1px solid #7893ac55; }
#menu .setup-batter-side, #menu .setup-pane.pitching .setup-pitcher-side { grid-column: 1; }
#menu .setup-pitcher-side, #menu .setup-pane.pitching .setup-batter-side { grid-column: 2; }
#menu .setup-columns { display: grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
/* the venue: the picked park beside the eight, the time of day at the right */
#menu .setup-venue { display: grid; grid-template-columns: minmax(0,1fr) minmax(150px,.25fr); gap: 0 14px; align-items: start; }
#menu .setup-venue > :is(h3,.venue-note) { grid-column: 1 / -1; }
#menu .setup-venue > #solo-time-row { margin-top: 0; }
#menu .setup-venue .setup-time-cards { grid-template-columns: 1fr; }
#setup-stadium-cards { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.7fr); gap: 10px; align-items: stretch; }
#setup-stadium-cards .setup-stadium-hero { height: auto; min-height: 110px; margin: 0; }
#menu .setup-section { min-width: 0; padding: 14px; border: 1px solid #647f9970; border-radius: 6px; background: #071b31b0; }
#menu .setup-section h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; color: #ffdd85; font: 700 21px/1.2 'Barlow Condensed',var(--font); }
#menu .setup-section h3::before { content: ''; width: 4px; height: 18px; background: #ffd15c; transform: skew(-12deg); }
#menu .setup-choice-field + .setup-choice-field { margin-top: 12px; }
#menu .setup-label,#menu .setup-player-label { display: flex; margin-bottom: 7px; color: #b9cde0; font-size: 12px; }
#menu .setup-player-label { justify-content: space-between; gap: 10px; align-items: baseline; }
#menu .setup-player-label strong { color: #fff0c8; font-size: 13px; font-weight: 600; text-align: right; }
.setup-stadium-hero { position: relative; margin: 0 0 7px; border-radius: 4px; overflow: hidden; height: clamp(110px,14cqh,140px); border: 1px solid #829eb6; background: #234462; }
.setup-stadium-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.setup-stadium-hero[data-time="evening"] img { filter: brightness(.65) sepia(.25); }
.setup-stadium-hero figcaption { position: absolute; inset: auto 0 0; padding: 22px 12px 10px; background: linear-gradient(transparent,#061b31ed); }
.setup-stadium-hero figcaption span { display: block; color: #ffdd85; font-size: 10px; margin-bottom: 2px; }
.setup-stadium-hero strong { color: #fff; font: 700 23px/1.1 'Barlow Condensed',var(--font); }
.setup-stadium-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
#menu .setup-stadium-card { position: relative; min-width: 0; padding: 0; overflow: hidden; border: 1px solid #627e96; border-radius: 4px; background: #102942; color: #e4edf5; text-align: left; }
.setup-stadium-card img { display: block; width: 100%; height: 36px; object-fit: cover; }
.setup-stadium-card > span:not(.setup-check) { display: flex; align-items: baseline; gap: 5px; padding: 5px 6px; font-size: 10px; line-height: 1.2; min-height: 32px; }
.setup-stadium-card em { flex: none; white-space: nowrap; color: #9ab5ca; font: 600 12px 'Barlow Condensed',var(--font); }
.setup-check { display: none; position: absolute; top: 4px; right: 4px; width: 16px; height: 16px; place-items: center; background: #ffda76; border-radius: 50%; color: #102038; font: 800 11px sans-serif; box-shadow: 0 1px 3px #0005; }
#menu .setup-pane [aria-pressed="true"] > .setup-check { display: grid; }
#menu .setup-pane :is(.setup-stadium-card,.setup-time-card,.setup-player-card,.setup-pitch-card)[aria-pressed="true"] { border-color: #ffda76; box-shadow: inset 0 0 0 1px #ffda76,0 0 10px #ffc34420; background-color: #3c3e38; }
#menu .setup-pane :is(.team-card,.setup-stadium-card,.setup-time-card,.setup-player-card,.setup-pitch-card):hover { border-color: #ffedbc; }
.setup-time-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#menu .setup-time-card { position: relative; display: flex; align-items: center; gap: 9px; min-height: 55px; padding: 8px 22px 8px 11px; border: 1px solid #7392ac; border-radius: 4px; color: #fff; text-align: left; background: linear-gradient(155deg,#4087ad,#19374f 80%); }
#menu .setup-time-card.evening { background: linear-gradient(155deg,#75506a,#202c4c 80%); }
.setup-time-card i { font: 32px/1 sans-serif; color: #ffe594; }
.setup-time-card span:not(.setup-check) { font-size: 11px; line-height: 1.35; }
#menu .setup-rules { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 12px 18px; }
#menu .setup-rules .row { display: flex; flex-direction: column; align-items: stretch; gap: 7px; margin: 0; }
#menu .setup-rules .label { width: auto; font-size: 12px; }
#menu .setup-rules .seg { display: flex; flex-wrap: nowrap; overflow: visible; gap: 7px; border: 0; border-radius: 0; background: transparent; }
#menu .setup-rules .seg button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; flex: 1 1 0; min-width: 0; min-height: 56px; padding: 8px 6px; border: 1px solid #66849e; border-radius: 5px; background: linear-gradient(140deg,#1a3b58,#10253c); color: #d2e0ec; font: 600 13px/1.2 var(--font); }
#menu .setup-rules .seg button.on { border-color: #ffda76; background: linear-gradient(140deg,#ffdf88,#e9b643); color: #102038; box-shadow: inset 0 0 0 1px #ffecb1; }
#menu .setup-rules .seg button:hover { border-color: #ffeab4; }
.setup-role { display: grid; place-items: center; width: 34px; height: 28px; border: 1px solid currentColor; clip-path: polygon(50% 0,100% 35%,100% 100%,0 100%,0 35%); font: 25px/1 sans-serif; }
.setup-stars { font: 24px/1 sans-serif; letter-spacing: 3px; color: #ffdc80; }
.on .setup-stars { color: #6d4a11; }
#menu .setup-rules [data-solo="innings"] button { min-height: 56px; }
[data-solo="innings"] b { font: 700 35px/1 'Barlow Condensed',var(--font); }
.setup-player-grid { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); gap: 5px; }
#menu .setup-player-card { position: relative; min-width: 0; padding: 0; border: 1px solid #627f98; border-radius: 4px; background: #16324d; color: #e3edf5; overflow: hidden; text-align: left; }
/* Framed on the face (portrait-framing.js portraitFaceStyle): every player drawn at one scale (the pupils a
   third of --w apart before its zoom), the eyes 41% of the way down, though each team's art was drawn at
   its own scale; where a face sits low in its picture, the picture comes down until its last row of art
   (--face-b, above the exporter's cream and grey mat line) meets the photo's foot. --w is held to 95% of
   the photo's height so a long beard's bottom stays in; the art's own cream shows beside the picture in
   a photo wider than that. */
.setup-player-photo { --face-x: .5; --face-y: .5; --face-zoom: 1; --face-b: 1; display: block; position: relative; overflow: hidden; height: 67px; container-type: size; background: #faf8ef; }
.setup-player-photo img { --w: calc(min(max(100cqw, 80cqh), 95cqh) * var(--face-zoom)); position: absolute; left: 50%; top: max(41%, calc(100% - (var(--face-b) - var(--face-y)) * 1.25 * var(--w))); display: block; width: var(--w); max-width: none; height: auto; transform: translate(calc(var(--face-x) * -100%), calc(var(--face-y) * -100%)); }
.setup-player-photo em { position: absolute; bottom: 2px; left: 3px; font: italic 700 16px/1 'Barlow Condensed',var(--font); color: white; text-shadow: 0 1px 3px #000; }
.setup-player-info { display: block; padding: 4px; }
.setup-player-info b { display: block; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-player-info small { display: none; font-size: 10px; color: #acc5db; margin-top: 4px; }
/* (the pitchers are the batters' tiles in the same columns: one card size on both sides, the rating in the heading) */
.setup-pitch-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(68px,1fr)); gap: 6px; }
#menu .setup-pitch-card { position: relative; min-width: 0; display: flex; align-items: center; flex-direction: column; gap: 4px; padding: 7px 4px; border: 1px solid #627f98; border-radius: 4px; background: linear-gradient(145deg,#17344e,#0a1e33); color: #e6eef6; }
.setup-pitch-art { display: grid; place-items: center; width: 40px; height: 37px; color: var(--pitch); background: linear-gradient(#a9cce01a 1px,transparent 1px),linear-gradient(90deg,#a9cce01a 1px,transparent 1px); background-size: 13px 12px; }
.setup-pitch-art .brk { width: 36px; height: 36px; fill: currentColor; }
.setup-pitch-art .brk path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.setup-pitch-art i { font: 36px/1 sans-serif; }
.setup-pitch-card b { font-size: 10px; line-height: 1.2; text-align: center; }
.setup-pitch-card small { font: 600 11px 'Barlow Condensed',var(--font); color: #b5cbdd; }
#menu .setup-rules :is([data-solo="cpu"],[data-solo="side"]) button { flex-direction: row; gap: 8px; }
/* (position: the home side's icon is .home, which #menu .home, the corner's link, would pin to the corner) */
#menu .setup-rules [data-solo="side"] .setup-role { position: static; z-index: auto; flex: none; width: 26px; height: 22px; font-size: 18px; }
#menu .setup-rules .setup-stars { font-size: 15px; letter-spacing: 1px; }
#menu .setup-help { margin: 10px 3px 0; font-size: 12px; line-height: 1.5; color: #b7cce0; }
#menu .setup-footer { display: flex; flex-shrink: 0; align-items: center; gap: 14px; margin: 12px 3px 3px; padding-top: 12px; border-top: 1px solid #ffd15c66; }
#menu .setup-footer #solo-summary { flex: 1; min-width: 0; font-size: 13px; line-height: 1.5; }
#menu .setup-footer #solo-go { display: flex; align-items: center; justify-content: center; gap: 16px; flex: 0 0 260px; width: auto; min-height: 52px; margin: 0; padding: 10px 20px; border: 1px solid #ffe7a7; border-radius: 5px; color: #102038; background: linear-gradient(120deg,#ffe49b,#ffd15c 65%,#e9b644); box-shadow: 0 3px 0 #997122; font: italic 800 26px/1.1 'Barlow Condensed',var(--font); }
#menu .setup-footer #solo-go::after { content: '›'; font: 700 32px/1 sans-serif; }
@container app (max-height: 600px) {
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel:is([data-menu-page="play"],[data-menu-page="batting"],[data-menu-page="pitching"],[data-menu-page="derby"]) { width: min(1240px,calc(100% - 40px - var(--safe-l) - var(--safe-r))); max-height: calc(100% - 74px - var(--safe-t) - var(--safe-b)); top: calc(50% + 16px + (var(--safe-t) - var(--safe-b)) / 2); padding: 10px 12px; }
  #menu .menu-panel:has(> .setup-pane:not([hidden])) .menu-heading { margin-bottom: 8px; padding-bottom: 8px; }
  #menu .setup-pane .team-picker { margin-bottom: 10px; padding: 8px; gap: 7px 18px; }
  #menu .setup-pane .team-summary b { font-size: 19px; }
  #menu .setup-pane .team-summary > div { grid-template-columns: 42px 1fr; gap: 0 6px; }
  #menu .setup-pane .team-summary .team-logo { width: 38px; height: 38px; left: -48px; }
  #menu .setup-pane .team-grid { gap: 3px; }
  #menu .setup-pane .team-card { min-height: 44px; }
  #menu .setup-pane .team-card .team-logo { width: 30px; height: 30px; }
  #menu .setup-pane .team-card b { display: none; }
  #menu .setup-columns { gap: 10px; }
  #menu .setup-side { padding-top: 7px; }
  #menu .setup-rules button { min-height: 44px; }
  #menu .setup-section { padding: 10px; }
  #menu .setup-section h3 { font-size: 18px; margin-bottom: 9px; }
  #setup-stadium-cards .setup-stadium-hero { min-height: 90px; }
  .setup-stadium-card img { height: 34px; }
  .setup-stadium-card > span:not(.setup-check) { font-size: 9px; padding: 4px; }
  .setup-stadium-card em { display: none; }
  .setup-player-photo { height: 55px; }
  .setup-player-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
  #menu .setup-footer { margin-top: 8px; padding-top: 8px; gap: 10px; }
  #menu .setup-footer #solo-go { flex-basis: 180px; min-height: 44px; font-size: 22px; padding: 8px 12px; }
}
@container app (max-width: 1000px) {
  #menu .setup-pane .team-picker { column-gap: 12px; }
  #menu .setup-pane .team-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
/* a phone held sideways: all eight teams on one line, so each side's players show right under them */
@container app (max-height: 600px) and (min-width: 760px) {
  #menu .setup-pane .team-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
  #menu .setup-pane .team-card { min-height: 40px; }
}
@container app (max-width: 720px) {
  #menu .setup-venue { grid-template-columns: minmax(0,1fr) minmax(120px,.3fr); }
  .setup-player-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@container app (max-width: 600px) and (orientation: portrait) {
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel:is([data-menu-page="play"],[data-menu-page="batting"],[data-menu-page="pitching"],[data-menu-page="derby"]) { width: calc(100% - 24px - var(--safe-l) - var(--safe-r)); padding: 12px; }
  #menu .setup-pane .team-summary b { font-size: 17px; }
  .setup-player-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #menu .setup-venue, #setup-stadium-cards { grid-template-columns: minmax(0,1fr); }
  #menu .setup-venue > #solo-time-row { margin-top: 10px; }
  #menu .setup-venue .setup-time-cards { grid-template-columns: 1fr 1fr; }
  #menu .setup-footer { flex-wrap: wrap; gap: 8px; }
  #menu .setup-footer #solo-summary { flex-basis: 100%; }
  #menu .setup-footer #solo-go { flex: 1; }
}
@container app (min-height: 601px) and (max-height: 950px) {
  #menu .setup-pane .team-picker { padding-block: 9px; }
  #menu .setup-pane .team-card .team-logo { width: 30px; height: 30px; }
  #menu .setup-section { padding: 12px; }
  #menu .setup-section h3 { margin-bottom: 10px; }
  .setup-stadium-card > span:not(.setup-check) { min-height: 28px; padding-block: 4px; }
  .setup-player-photo { height: 60px; }
  #menu .setup-choice-field + .setup-choice-field { margin-top: 10px; }
  .setup-pitch-art { height: 31px; }
  .setup-pitch-art .brk { width: 30px; height: 30px; }
}
/* 全壘打大賽: batting practice's setup, its record a row of its own under the venue (js/ui/derby-board.js):
   a guest's best beside its notes, the top ten in two lists */
#menu .derby-board-body:has(> .derby-best) { display: grid; grid-template-columns: minmax(150px,.35fr) minmax(0,1fr); gap: 0 14px; align-content: start; }
#menu .derby-board-body > .derby-best { grid-row: span 4; }
#menu .derby-board-body:has(> .derby-best) > :not(.derby-best) { grid-column: 2; }
#menu .derby-board-body:has(> .derby-best) > .derby-runs { margin-top: 0; text-align: left; }
#menu .derby-board-body > p { margin: 0; }
#menu .derby-head, #menu .derby-top li { display: grid; grid-template-columns: 22px minmax(0,1fr) 28px 50px; gap: 5px; align-items: center; }
#menu .derby-head { padding: 0 8px 5px; color: #9fb7cc; font-size: 10px; letter-spacing: .04em; }
#menu .derby-head span:nth-child(n+3) { text-align: right; }
#menu .derby-top { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
#menu .derby-top li { min-height: 38px; padding: 4px 8px; border: 1px solid #5c7a9466; border-radius: 4px; background: #0e2740; }
#menu .derby-top li:first-child { border-color: #ffda76; background: linear-gradient(100deg,#6a5524b0,#0e2740 75%); }
#menu .derby-top em { color: #ffdc80; font: italic 700 18px/1 'Barlow Condensed',var(--font); text-align: center; }
#menu .derby-top span { min-width: 0; }
#menu .derby-top b, #menu .derby-top small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#menu .derby-top b { color: #fff5d6; font-size: 12px; }
#menu .derby-top small { margin-top: 1px; color: #9fb7cc; font-size: 10px; }
#menu .derby-top strong { color: #fff5d6; font: 700 22px/1 'Barlow Condensed',var(--font); text-align: right; }
#menu .derby-top i { color: #b9cde0; font-size: 11px; font-style: normal; text-align: right; white-space: nowrap; }
#menu .derby-board-body > .derby-mine { margin-top: 10px; padding-top: 8px; border-top: 1px solid #7893ac55; color: #fff0c8; font-size: 12px; }
#menu .derby-best { display: grid; justify-items: center; gap: 2px; padding: 16px 8px; border: 1px solid #ffda7699; border-radius: 6px; background: radial-gradient(at 50% 0,#6a5524b0,#0e2740 70%); text-align: center; }
#menu .derby-best b { color: #ffdc80; font: 700 68px/1 'Barlow Condensed',var(--font); }
#menu .derby-best span { color: #fff5d6; font-size: 13px; }
#menu .derby-best small { color: #b9cde0; font-size: 11px; }
#menu .derby-best .derby-empty { padding: 18px 0; color: #b9cde0; }
#menu .derby-board-body > .derby-runs { margin-top: 8px; color: #9fb7cc; font-size: 11px; text-align: center; }
#menu .derby-board-body > .derby-login-note { margin-top: 12px; color: #d2e0ec; font-size: 12px; line-height: 1.5; }
#menu .derby-board-body > .derby-status { color: #b9cde0; font-size: 12px; }
#menu .derby-board .btn { justify-self: start; min-width: 160px; margin-top: 8px; }
@container app (min-width: 721px) {
  #menu .setup-pane.derby .derby-top { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 8px; }
  /* (two lists side by side: each row reads on its own) */
  #menu .setup-pane.derby .derby-head { display: none; }
}
@container app (max-width: 600px) and (orientation: portrait) {
  #menu .derby-board-body:has(> .derby-best) { grid-template-columns: minmax(0,1fr); }
  #menu .derby-board-body:has(> .derby-best) > :not(.derby-best) { grid-column: 1; }
  #menu .derby-board-body > .derby-best { grid-row: auto; margin-bottom: 8px; }
}