/* Selected concept 2: broadcast panels, with concept 1's daylight and logo. */
#menu {
  --menu-navy: #071c33ed; --menu-line: #c1d7e79a; --menu-gold: #ffd15c;
  --menu-center-x: calc(50% + (var(--safe-l) - var(--safe-r)) / 2);
  --menu-center-y: calc(50% + (var(--safe-t) - var(--safe-b)) / 2);
  --menu-feature-width: min(820px,45%);
  color: #f4f6f8;
}
#menu[data-page="player"] { --menu-feature-width: min(760px,53%); }
.menu-art { position: absolute; inset: 0; background: #63b2e1 url('../assets/menu/daylight.webp') center / cover no-repeat; pointer-events: none; }
/* Keep the portrait beside the centered content, inside the remaining space. */
#menu-player-art {
  position: absolute; left: calc(var(--menu-center-x) + var(--menu-feature-width) / 2 + 16px); right: auto;
  top: var(--menu-center-y); bottom: auto; transform: translateY(-50%);
  width: min(720px,calc(50% - var(--menu-feature-width) / 2 - (var(--safe-l) + var(--safe-r)) / 2 - 32px));
  height: calc(100% - 120px - var(--safe-t) - var(--safe-b));
  object-fit: contain; object-position: center; pointer-events: none; filter: drop-shadow(8px 12px 8px #09213a26);
}
/* The home illustration has transparent margins. Size its canvas by height,
   rather than shrinking the whole player into the narrow spare column. */
#menu[data-page="home"] #menu-player-art {
  left: auto; right: calc(12px + var(--safe-r));
  top: auto; bottom: calc(12px + var(--safe-b)); transform: none;
  height: calc(100% - 72px - var(--safe-t) - var(--safe-b));
  width: auto; max-width: 43%; object-position: right bottom;
}
#menu[data-illustrated="false"] :is(.menu-art,#menu-player-art) { display: none; }
#menu:is([data-page="teams"],[data-page="options"],[data-page="controls"],[data-page="online"]) #menu-player-art { display: none; }
#menu::before { background: linear-gradient(90deg,#07213b30,transparent 70%); }
/* Width caps must not move any panel or the home logo away from the center. */
#menu .logo { left: var(--menu-center-x); right: auto; transform: translateX(-50%); top: calc(13% + var(--safe-t)); width: var(--menu-feature-width); max-width: 820px; }
#menu .logo h1 { font-size: 0; }
#menu .logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 12px #041d4340); }
#menu:not([data-page="home"]) .logo, #menu:not([data-page="home"]) .star-plate { display: none; }
/* Beat the shared settings toolbar's generic top offset on every menu page. */
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page] {
  left: var(--menu-center-x); right: auto; top: var(--menu-center-y); bottom: auto; transform: translate(-50%,-50%);
  width: min(650px,calc(100% - 80px - var(--safe-l) - var(--safe-r))); max-height: calc(100% - 120px - var(--safe-t) - var(--safe-b));
  padding: 20px; border-radius: 7px; background: var(--menu-navy); color: #f3f6fa; border: 1px solid var(--menu-line);
  box-shadow: 0 8px 30px #051c4666, inset 0 0 0 3px #142e4c80;
}
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="home"] {
  top: 46%; transform: translateX(-50%); width: var(--menu-feature-width); max-width: 820px; padding: 0; border: 0; background: none; box-shadow: none;
}
.main-menu { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 5px; }
:is(.main-menu,.pause-actions) .menu-choice { min-height: clamp(65px,10cqh,100px); font: 700 clamp(20px,2.25cqw,34px)/1.1 'Barlow Condensed',var(--font); padding: 16px 22px; border: 1px solid #d6e3e7b3; border-radius: 6px; background: linear-gradient(120deg,#142d49f2,#071b30f2); box-shadow: inset 0 0 0 3px #ffffff0a,0 3px 8px #081d3e35; }
:is(.main-menu,.pause-actions) .menu-choice span { min-width: 0; }
:is(.main-menu,.pause-actions) .menu-choice b { font: inherit; white-space: nowrap; }
:is(.main-menu,.pause-actions) .menu-choice small { display: block; margin-top: 6px; font: 500 clamp(12px,1.2cqw,17px)/1.1 var(--font); letter-spacing: .2px; }
.menu-choice i { font-style: normal; font-size: 32px; }
#menu button:not(:disabled):focus-visible, #menu summary:focus-visible { outline: 3px solid #ffdb79; outline-offset: 3px; }
.menu-choice:not(:disabled):hover,.menu-choice:not(:disabled):focus-visible,.menu-choice[data-gamepad-focus],.club-tile:hover,.club-tile:focus-visible,.roster-bar:hover,.roster-bar:focus-visible { background: linear-gradient(110deg,#ffe79c,#ffd052); color: #081a31; border-color: #fff0b7; box-shadow: 0 0 0 2px #e8ac32,0 0 17px #ffc85666; }
.menu-choice:not(:disabled):hover i,.menu-choice:not(:disabled):focus-visible i { color: #081a31; }
#menu .menu-heading { gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-color: #ffd15c8c; }
#menu .menu-heading h2 { font: 700 clamp(18px,2cqw,30px)/1.2 'Barlow Condensed',var(--font); color: #fff4d1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#menu .menu-heading .btn { flex: none; }
#menu .menu-panel > .tabpane { min-height: 0; overflow-y: auto; scrollbar-color: #6684a2 #0a2038; padding: 3px; }
/* Rotated phone menus scroll along the screen's horizontal axis.
   Allow both native pan axes; the shared guard still blocks browser zoom. */
#menu :is(.main-menu,.tabpane) { touch-action: pan-x pan-y; }
#menu .menu-panel .btn:not(.primary):not(.danger) { background: #193650; border-color: #8ea9bd; color: #f3f6fa; }
#menu .menu-panel .note,#menu .menu-panel .label,#menu .menu-panel .field,#menu .menu-panel .match-options,#menu .menu-panel .stadium-picker > span { color: #c4d3e2; }
#menu .menu-panel .field input,#menu .menu-panel select,#menu .menu-panel .join input { background: #102a45; border-color: #7793ac; color: #fff6dd; }
#menu .menu-panel .mini-popup { background: #102a45; color: #f3f6fa; border-color: #8ca8bd; }
#menu .menu-panel .mini-popup h3,#menu .menu-panel .mini-popup h4 { color: #ffe19a; }
#menu .menu-panel .seg button { color: #b9cede; background: #102942; }
#menu .menu-panel .seg button.on { background: #ffe09a; color: #14283a; }
#menu .team-summary b,#menu #solo-summary { color: #f6edda; }
#menu .star-plate { left: auto; right: calc(24px + var(--safe-r)); top: auto; bottom: calc(24px + var(--safe-b)); padding: 7px 12px; border-radius: 4px; max-width: calc(50% - var(--menu-feature-width) / 2 - (var(--safe-l) + var(--safe-r)) / 2 - 32px); background: #0c213ae0; }
#menu .star-plate b { font: 700 clamp(15px,1.32cqw,19px) 'Barlow Condensed',var(--font); }
#menu .star-plate small { font-size: 10px; }
#menu .star-plate span { display: none; }
#menu .model-hint { display: block; left: 60%; right: 3%; bottom: calc(63px + var(--safe-b)); text-align: center; font-size: 12px; }
#menu:has(#menu-model[hidden]) .model-hint { display: none; }
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel:is([data-menu-page="teams"],[data-menu-page="options"],[data-menu-page="controls"],[data-menu-page="online"]) { width: calc(92% - var(--safe-l) - var(--safe-r)); max-width: 1400px; }
.club-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; padding: 5px; }
.club-tile { display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: clamp(140px,25cqh,260px); padding: 14px; background: linear-gradient(150deg,#173554,#081b30); border: 1px solid #829bae; border-radius: 5px; color: #fff6df; cursor: pointer; }
.club-tile .team-logo { width: clamp(65px,10cqw,150px); height: clamp(65px,10cqw,150px); filter: drop-shadow(0 5px 8px #0006); }
.club-tile b { font: 700 clamp(18px,2.3cqw,32px)/1.1 'Barlow Condensed',var(--font); }
.club-tile small { font-size: 12px; margin: 8px 0 4px; }
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="player"] { width: var(--menu-feature-width); max-width: 760px; }
.profile-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.profile-heading small { color: #b1c9dd; font-size: 12px; }
.profile-heading h3 { font: 700 clamp(20px,2.5cqw,35px)/1.15 'Barlow Condensed',var(--font); color: #fff; margin: 3px 0; }
.profile-heading h3 em { font-style: normal; color: #ffda7b; }
.profile-heading p { font-size: 12px; margin: 5px 0 0; color: #c0d3e5; }
.profile-heading .player-role-bar { position: static; flex: none; width: auto; height: 30px; }
.profile-heading .player-role-bar > span { min-width: 36px; font-size: 17px; padding: 0 8px; }
.profile-measurements { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 14px; padding: 10px 12px; border: 1px solid #6684a1; border-radius: 4px; background: #0b2139; }
.profile-measurements > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.profile-measurements dt { color: #ffda7b; font-size: 12px; }
.profile-measurements dd { margin: 0; color: #fff; font-size: 16px; font-weight: 700; }
.profile-measurements dd span { color: #c0d3e5; font-size: 12px; font-weight: 400; }
.profile-stats { padding: 12px; border: 1px solid #b1c9da87; background: #06172d90; border-radius: 4px; }
.profile-stat { display: grid; grid-template-columns: minmax(55px,1fr) 24px minmax(70px,2fr) 28px; align-items: center; gap: 12px; margin: 7px 0; font: 600 18px/1.2 'Barlow Condensed',var(--font); }
.profile-stat strong { text-align: right; }
.grade { display: grid; place-items: center; background: #efbf52; color: #162538; height: 23px; border-radius: 3px; }
.grade-S,.grade-A { background: #ff6d70; }.grade-B { background: #a2d783; }.grade-D,.grade-E { background: #67baeb; }
.profile-stat meter { width: 100%; height: 13px; appearance: none; border: 1px solid #92a7c1; border-radius: 1px; background: #132942; }
.profile-stat meter::-webkit-meter-bar { background: #132942; border: 0; height: 11px; border-radius: 0; }
.profile-stat meter::-webkit-meter-optimum-value { background: linear-gradient(90deg,#ffc43c,#ffe291); }
.profile-stat meter::-moz-meter-bar { background: #ffd15c; }
.profile-pitches { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; }
.profile-pitches span { background: #173b59; padding: 4px 8px; border-radius: 3px; }
.profile-skills,.profile-story { margin-top: 16px; }
.profile-skills h4,.profile-story h4 { color: #ffdc80; font-size: 14px; margin: 0 0 8px; border-left: 3px solid #ffcf59; padding-left: 8px; }
.profile-skills details { border: 1px solid #789bb5; border-radius: 3px; margin: 5px 0; background: linear-gradient(90deg,#244e70,#0e2944); }
.profile-skills summary { cursor: pointer; padding: 5px 10px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.profile-skills summary::after { content: '+'; margin-left: auto; font-size: 18px; }
.profile-skills details[open] summary::after { content: '−'; }
.profile-skills summary .skill-icon { width: 26px; height: 26px; }
.profile-skills details p { margin: 0; padding: 8px 12px 12px; font-size: 12px; color: #d6e1ec; }
.profile-story > p { margin: 0; font-size: clamp(12px,1cqw,15px); line-height: 1.65; color: #e0e8f0; }
.profile-story > p + p { margin-top: 12px; }
.profile-tastes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.profile-tastes > div { padding: 8px 12px; border: 1px solid #6684a1; border-radius: 4px; background: #0b2139; }
.profile-tastes b { display: block; font-size: 11px; color: #ffda7b; margin-bottom: 4px; }.profile-tastes span { font-size: 13px; }
[data-pane="options"] .menu-actions { display: grid; grid-template-columns: repeat(3,1fr); padding: 12px; }
[data-pane="options"] .btn { min-height: 100px; font-size: 25px; }
[data-pane="controls"] { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(220px,1fr); gap: 30px; }
.mapping-head,.mapping-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 12px; align-items: center; }
.mapping-head { color: #acc4dc; font-size: 12px; padding: 10px 0; }
.mapping-row { padding: 8px 0; border-top: 1px solid #637e9e50; font-size: 14px; }
#control-mapping h3 { margin: 0 0 8px; color: #ffdb7d; }
#menu .auto-aim-options { margin: 0; align-self: start; border-color: #7c99b1; }
#menu .auto-aim-options legend { color: #ffda7c; }
[data-gamepad-focus] { outline: 3px solid #ffd463 !important; outline-offset: 3px; }
@container app (min-width: 1700px) { #menu .logo { top: 16%; } #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="home"] { top: 47%; } }
@container app (max-aspect-ratio: 3/2) {
  #menu[data-page="home"] .logo { width: min(720px,40%); }
}
@container app (max-height: 600px) and (orientation: landscape) {
  #menu[data-page="home"] { --menu-feature-width: min(820px,55%); }
  #menu .logo { top: 14%; max-height: 29%; }
  #menu .logo img { max-height: min(120px,25cqh); width: auto; max-width: 100%; margin-inline: auto; }
  #menu-player-art { height: calc(100% - 96px - var(--safe-t) - var(--safe-b)); }
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page] { top: calc(var(--menu-center-y) + 12px); max-height: calc(100% - 96px - var(--safe-t) - var(--safe-b)); padding: 10px 14px; }
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="home"] { top: 41%; padding: 0; }
  .main-menu { gap: 7px; }:is(.main-menu,.pause-actions) .menu-choice { min-height: 51px; padding: 9px 14px; font-size: 20px; }:is(.main-menu,.pause-actions) .menu-choice small { font-size: 10px; margin-top: 2px; }
  #menu .menu-heading { padding-bottom: 6px; margin-bottom: 8px; gap: 12px; } #menu .menu-heading h2 { font-size: 20px; }
  #menu .star-plate { display: none; }
  #menu .model-hint { bottom: 44px; font-size: 10px; }
  .club-grid { gap: 8px; }.club-tile { min-height: 100px; padding: 8px; }.club-tile .team-logo { width: 56px; height: 56px; }.club-tile small { display: none; }.club-tile b { font-size: 20px; }
  .profile-heading { margin-bottom: 8px; }.profile-heading h3 { font-size: 20px; }.profile-heading p,.profile-heading small { font-size: 10px; }
  .profile-stats { padding: 5px 8px; }.profile-stat { font-size: 16px; gap: 8px; margin: 4px 0; }.profile-stat .grade { height: 20px; }
  [data-pane="controls"] { gap: 18px; }.mapping-row { padding-block: 5px; font-size: 12px; }.mapping-row select { padding: 5px; }
}
@container app (max-width: 700px) and (orientation: portrait) {
  #menu { --menu-feature-width: calc(92% - var(--safe-l) - var(--safe-r)); }
  #menu-player-art { left: var(--menu-center-x); top: 22%; transform: translateX(-50%); width: calc(90% - var(--safe-l) - var(--safe-r)); height: 43%; }
  #menu[data-page="player"] #menu-player-art { top: calc(55px + var(--safe-t)); height: calc(45% - 60px - var(--safe-t)); }
  #menu .logo { top: calc(70px + var(--safe-t)); width: calc(90% - var(--safe-l) - var(--safe-r)); }
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page] { width: calc(92% - var(--safe-l) - var(--safe-r)); max-height: calc(100% - 133px - var(--safe-t) - var(--safe-b)); padding: 12px; }
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="home"] { top: auto; bottom: calc(57px + var(--safe-b)); padding: 0; }
  .main-menu { gap: 8px; }:is(.main-menu,.pause-actions) .menu-choice { min-height: 66px; padding: 12px 16px; font-size: 23px; }:is(.main-menu,.pause-actions) .menu-choice small { font-size: 12px; }
  #menu .star-plate,#menu .model-hint { display: none; }
  .club-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.club-tile { min-height: 145px; }.club-tile .team-logo { width: 76px; height: 76px; }
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="player"] { top: 45%; transform: translateX(-50%); width: calc(92% - var(--safe-l) - var(--safe-r)); max-height: calc(55% - 55px - var(--safe-b)); }
  .profile-stat { font-size: 17px; }.profile-heading h3 { font-size: 25px; }
  [data-pane="options"] .menu-actions { grid-template-columns: 1fr; gap: 12px; }[data-pane="options"] .btn { min-height: 70px; }
  [data-pane="controls"] { display: block; }#menu .auto-aim-options { margin-top: 20px; }
  .mapping-head,.mapping-row { gap: 8px; }.mapping-row { font-size: 12px; }.mapping-row select { padding: 8px 4px; }
}