/* Centered match menu; all dimensions follow the rotated game container. */
#pause { --pause-ink: #f4f6fa; --pause-muted: #b9ccdd; --pause-gold: #ffd15c; --pause-unit: clamp(.85px,min(.078125cqw,.138889cqh),2px); --pause-gap-x: clamp(12px,2cqw,64px); --pause-gap-y: clamp(12px,2cqh,40px); color: var(--pause-ink); font-size: calc(14 * var(--pause-unit)); background: #031326b8; backdrop-filter: blur(9px); touch-action: pan-x pan-y; grid-template: minmax(0,1fr) / minmax(0,1fr); }
#pause .pause-shell { position: absolute; left: calc(50% + (var(--safe-l) - var(--safe-r)) / 2); top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2); transform: translate(-50%,-50%); width: calc(100cqw - 2 * var(--pause-gap-x) - var(--safe-l) - var(--safe-r)); height: calc(100cqh - 2 * var(--pause-gap-y) - var(--safe-t) - var(--safe-b)); min-width: 0; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0,1fr) auto; padding: calc(18 * var(--pause-unit)) calc(22 * var(--pause-unit)); background: linear-gradient(135deg,#102e48f7,#06192ff7); border: 1px solid #9ab3cd; border-top: 3px solid var(--pause-gold); border-radius: 8px; box-shadow: 0 20px 80px #0008; }
#pause .pause-header { border-bottom: 1px solid #57728e; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 16px; }
#pause .pause-header small { font-size: 11px; color: var(--pause-gold); letter-spacing: 2px; }
#pause h2 { font: 700 38px/1.05 'Barlow Condensed',var(--font); margin: 4px 0 0; color: #fff6df; }
#pause .pause-score { display: flex; align-items: center; gap: 18px; }
#pause .pause-score strong { font: 700 29px 'Barlow Condensed',var(--font); white-space: nowrap; }
#pause .pause-score small { display: block; text-align: right; color: var(--pause-muted); font: 500 12px var(--font); letter-spacing: 0; }
#pause button { cursor: pointer; }
#pause .pause-roster-tabs button { padding: 12px 22px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: var(--pause-muted); font: 600 16px var(--font); }
#pause .pause-roster-tabs button[aria-pressed="true"] { color: var(--pause-gold); border-bottom-color: var(--pause-gold); background: #ffd15c09; }
#pause button:focus-visible,#pause summary:focus-visible,#pause select:focus-visible { outline: 3px solid var(--pause-gold); outline-offset: 2px; }
#pause .pause-content { min-height: 0; padding: 20px 0; }
#pause [data-pause-pane] { height: 100%; min-height: 0; }
#pause select { border: 1px solid #66839f; background: #081f37; color: var(--pause-ink); font: 600 16px var(--font); min-height: 42px; border-radius: 4px; }
#pause .btn { border: 1px solid #708ca6; border-radius: 4px; box-shadow: none; min-height: 46px; padding: 11px 18px; background: #183850; color: #f4f6fa; font: 600 15px var(--font); }
#pause .btn:hover { background: #234860; border-color: var(--pause-gold); }
#pause .btn.primary { background: var(--pause-gold); color: #081e33; border-color: var(--pause-gold); min-width: 180px; }
#pause .btn.danger { color: #ffb2b3; background: #311f31; border-color: #8b5768; }
#pause summary { cursor: pointer; }
#pause .pause-footer { display: flex; align-items: center; gap: 20px; border-top: 1px solid #57728e; padding-top: 16px; }
#pause .pause-status { margin: 0; flex: 1; color: var(--pause-muted); font-size: 12px; line-height: 1.5; }
#pause .pause-defense { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 20px; }
#pause .pause-map-panel,#pause .pause-roster-panel { min-height: 0; min-width: 0; border: 1px solid #57728e; border-radius: 5px; background: #0a223a; overflow: hidden; }
#pause .pause-map-panel { display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
#pause .pause-map-title { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; }
#pause .pause-map-title span { color: var(--pause-muted); font-size: 11px; }
#pause .pause-field-wrap { min-height: 0; min-width: 0; display: grid; place-items: center; container: pausefield / size; }
#pause .pause-field { position: relative; width: 100cqw; height: 100cqh; min-height: 0; }
#pause .pause-field-art { display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; opacity: .85; }
#pause .pause-spot { position: absolute; transform: translate(-50%,-50%); display: flex; align-items: center; gap: 5px; padding: 4px 7px 4px 4px; min-height: 37px; max-width: 29%; border-radius: 5px; border: 1px solid #92abc0; background: #061d32ee; color: white; box-shadow: 0 3px 9px #0006; }
#pause .pause-spot img { width: 29px; height: 31px; object-fit: cover; object-position: 50% 22%; border-radius: 3px; }
#pause .pause-spot b { font: 700 12px var(--font); color: var(--pause-gold); }
#pause .pause-spot em { font-style: normal; }
#pause .pause-spot small { display: block; font: 500 10px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
#pause .pause-spot[data-position="DH"] { border-style: dashed; }
#pause .pause-spot.drop-target { border: 2px solid var(--pause-gold); box-shadow: 0 0 0 4px #ffd15c33; background: #3c411e; }
#pause .pause-spot.potential { border-color: var(--pause-gold); }
#pause .pause-map-note { margin: 0; padding: 10px 16px; color: var(--pause-muted); font-size: 11px; line-height: 1.5; border-top: 1px solid #3d5972; }
#pause .pause-roster-panel { display: grid; grid-template-rows: auto minmax(0,1fr); }
#pause .pause-roster-tabs { display: flex; border-bottom: 1px solid #57728e; }
#pause .pause-roster-tabs button { flex: 1; padding: 11px; font-size: 14px; }
#pause .pause-roster { overflow: auto; padding: 10px; touch-action: pan-x pan-y; overscroll-behavior: contain; scrollbar-width: thin; }
#pause .player-bar { display: flex; align-items: stretch; gap: 0; min-height: 62px; border: 1px solid #46657f; border-radius: 4px; margin-bottom: 6px; background: linear-gradient(100deg,#1b3a54,#102b43); overflow: hidden; }
#pause .player-bar.selected { border-color: var(--pause-gold); background: #45472b; }
#pause .player-bar-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; padding: 0 10px 0 0; border: 0; color: var(--pause-ink); background: transparent; text-align: left; font: inherit; }
#pause .player-bar img { width: 55px; height: 64px; align-self: stretch; object-fit: cover; object-position: 50% 20%; background: #2a4862; }
#pause .player-bar-copy { min-width: 0; flex: 1; }
#pause .player-bar-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 14px var(--font); }
#pause .player-bar-meta { display: block; color: #bdcfdf; font-size: 10px; margin-top: 4px; }
#pause .player-bar-meta .out-of-position { color: #ffb2a0; }
#pause .player-bar-role { padding: 4px 6px; border-radius: 3px; background: #071b30; color: var(--pause-gold); font: 700 12px 'Barlow Condensed',var(--font); }
#pause .player-drag { width: 34px; flex: none; background: #071f3570; border: 0; border-left: 1px solid #46657f; color: #9cb7cb; font-size: 20px; cursor: grab; touch-action: none; }
#pause .player-drag:active { cursor: grabbing; }
#pause .player-bar button:disabled { cursor: default; opacity: .5; }
#pause .pause-batting { display: grid; grid-template-rows: auto minmax(0,1fr); overflow: auto; touch-action: pan-x pan-y; scrollbar-width: thin; scrollbar-color: #708ca6 #0a223a; }
#pause .pause-batting-heading { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; }
#pause .pause-batting-heading h3 { margin: 0; font: 700 24px 'Barlow Condensed',var(--font); }
#pause .pause-batting-heading p { margin: 0; font-size: 12px; color: var(--pause-muted); }
#pause .pause-batting-list { min-height: 0; display: grid; grid-template-rows: repeat(5,minmax(56px,1fr)); grid-auto-flow: column; grid-template-columns: repeat(2,minmax(0,1fr)); gap: calc(8 * var(--pause-unit)) calc(16 * var(--pause-unit)); }
#pause .pause-batting-list .player-bar { position: relative; min-width: 0; min-height: 0; margin: 0; }
#pause .pause-batting-list .player-bar-main { min-height: 0; }
#pause .pause-batting-list .player-bar img { height: 100%; min-height: 0; width: auto; aspect-ratio: 55/64; max-width: 28%; flex: none; }
#pause .batting-number { width: 32px; flex: none; display: grid; place-items: center; font: 700 22px 'Barlow Condensed',var(--font); color: #9eb9cc; }
#pause .batting-cue { align-self: center; padding: 5px 10px; font-size: 11px; color: var(--pause-gold); }
#pause .batting-current { border-color: var(--pause-gold); }
#pause .pause-drag-ghost { position: absolute; z-index: 10; pointer-events: none; transform: translate(-50%,-120%); padding: 9px 14px; color: #10283d; background: var(--pause-gold); border-radius: 5px; font: 600 13px var(--font); box-shadow: 0 4px 15px #0005; white-space: nowrap; }
/* Scale the content with the game window as well as enlarging the frame. */
#pause .pause-header { gap: calc(18 * var(--pause-unit)); padding-bottom: calc(12 * var(--pause-unit)); }
#pause .pause-header small { font-size: calc(11 * var(--pause-unit)); }
#pause h2 { font-size: calc(36 * var(--pause-unit)); }
#pause .pause-score strong { font-size: calc(29 * var(--pause-unit)); }
#pause .pause-score small { font-size: calc(12 * var(--pause-unit)); }
#pause .pause-content { padding: calc(12 * var(--pause-unit)) 0; }
#pause select { font-size: max(16px,calc(16 * var(--pause-unit))); min-height: calc(42 * var(--pause-unit)); }
#pause .btn { min-height: calc(46 * var(--pause-unit)); padding: calc(10 * var(--pause-unit)) calc(18 * var(--pause-unit)); font-size: calc(15 * var(--pause-unit)); }
#pause .btn.primary { min-width: calc(180 * var(--pause-unit)); }
#pause .pause-footer { padding-top: calc(12 * var(--pause-unit)); }
#pause .pause-status { font-size: calc(12 * var(--pause-unit)); }
#pause .pause-map-title { font-size: calc(14 * var(--pause-unit)); }
#pause .pause-map-title span,#pause .pause-map-note { font-size: calc(11 * var(--pause-unit)); }
#pause .pause-roster-tabs button { font-size: calc(14 * var(--pause-unit)); padding: calc(11 * var(--pause-unit)); }
#pause .pause-roster .player-bar { min-height: calc(64 * var(--pause-unit)); }
#pause .pause-roster .player-bar img { width: calc(55 * var(--pause-unit)); height: calc(64 * var(--pause-unit)); }
#pause .player-bar-name { font-size: calc(15 * var(--pause-unit)); }
#pause .player-bar-meta { font-size: calc(11 * var(--pause-unit)); }
#pause .player-bar-role { font-size: calc(13 * var(--pause-unit)); padding: calc(4 * var(--pause-unit)) calc(6 * var(--pause-unit)); }
#pause .player-drag { width: max(34px,calc(34 * var(--pause-unit))); font-size: calc(20 * var(--pause-unit)); }
#pause .pause-batting-heading { margin-bottom: calc(12 * var(--pause-unit)); }
#pause .pause-batting-heading h3 { font-size: calc(24 * var(--pause-unit)); }
#pause .pause-batting-heading p { font-size: calc(12 * var(--pause-unit)); }
#pause .batting-number { width: calc(32 * var(--pause-unit)); font-size: calc(22 * var(--pause-unit)); }
#pause .batting-cue { font-size: calc(11 * var(--pause-unit)); }
#pause .pause-home { display: grid; place-items: center; overflow: auto; }
#pause .pause-actions { display: grid; gap: calc(12 * var(--pause-unit)); width: min(100%,calc(600 * var(--pause-unit))); padding: 5px; }
#pause .pause-actions .menu-choice { min-height: calc(66 * var(--pause-unit)); font: 700 calc(25 * var(--pause-unit))/1.15 'Barlow Condensed',var(--font); }
#pause .pause-actions .pause-leave:not(:hover):not(:focus-visible):not([data-gamepad-focus]) { color: #ffb2b3; }
#pause .pause-actions .menu-choice i { font-size: calc(32 * var(--pause-unit)); }
#pause[data-view="home"] .pause-status { text-align: center; }
#pause .pause-shared-options { display: grid; align-items: center; overflow: auto; }
#pause .pause-shared-options .tabpane { width: min(100%,calc(1000 * var(--pause-unit))); margin: auto; }
#pause .pause-shared-controls { overflow: auto; scrollbar-width: thin; scrollbar-color: #708ca6 #0a223a; }
#pause .pause-shared-controls > .tabpane { padding: calc(12 * var(--pause-unit)); overflow: visible; touch-action: pan-x pan-y; }
#pause .pause-shared-controls .note { color: var(--pause-muted); font-size: calc(13 * var(--pause-unit)); line-height: 1.55; }
#pause .auto-aim-options { margin: 0; align-self: start; border-color: #7c99b1; }
#pause .auto-aim-options legend { color: var(--pause-gold); }
#pause .auto-aim-options .field,#pause .auto-aim-options .note { color: var(--pause-muted); }
#pause .auto-aim-options input { accent-color: var(--pause-gold); }
#pause .mapping-head { font-size: calc(12 * var(--pause-unit)); }
#pause .mapping-row { font-size: calc(14 * var(--pause-unit)); padding-block: calc(8 * var(--pause-unit)); }
@container pausefield (max-height: 340px) {
  #pause .pause-spot { min-height: 29px; padding: 3px 5px; gap: 3px; }
  #pause .pause-spot small { display: none; }
  #pause .pause-spot img { width: 21px; height: 23px; }
  #pause .pause-spot b { font-size: 11px; }
}
@container app (max-height: 600px) {
  #pause .pause-actions { width: min(100%,54cqw); gap: 6px; }
  #pause .pause-actions .menu-choice { min-height: 40px; padding: 7px 12px; font-size: clamp(18px,2.5cqw,25px); }
  #pause .pause-shared-controls > .tabpane { padding: 3px; }
  #pause .mapping-row { padding-block: 5px; font-size: 12px; }

  #pause .pause-shell { padding: 10px 14px; }
  #pause .pause-header { padding-bottom: 7px; }
  #pause .pause-header small { display: none; }
  #pause h2 { font-size: 25px; margin: 0; }
  #pause .pause-score { gap: 10px; }
  #pause .pause-score strong { font-size: 22px; }
  #pause .pause-score small { display: block; font-size: 10px; }
  #pause .pause-content { padding: 9px 0; }
  #pause .btn { min-height: 35px; padding: 7px 12px; font-size: 12px; }
  #pause .btn.primary { min-width: 135px; }
  #pause .pause-footer { padding-top: 8px; gap: 12px; }
  #pause .pause-status { font-size: 10px; }
  #pause .pause-defense { gap: 10px; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr); }
  #pause .pause-map-title { padding: 5px 9px; font-size: 11px; }
  #pause .pause-map-title span { font-size: 9px; }
  #pause .pause-map-note { padding: 5px 9px; font-size: 9px; }
  #pause .pause-roster-tabs button { padding: 6px; font-size: 12px; }
  #pause .pause-roster { padding: 6px; }
  #pause .pause-roster .player-bar { min-height: 49px; }
  #pause .pause-roster .player-bar img { width: 42px; height: 50px; }
  #pause .player-bar-name { font-size: 12px; }
  #pause .player-bar-main { gap: 7px; padding-right: 7px; }
  #pause .player-bar-role { font-size: 11px; padding: 4px; }
  #pause .player-drag { width: 32px; }
  #pause .player-bar-meta { font-size: 9px; margin-top: 3px; }
  #pause .pause-spot { min-height: 34px; min-width: 44px; justify-content: center; gap: 2px; padding: 3px 5px; }
  #pause .pause-spot[data-position="P"] { top: 63% !important; }
  #pause .pause-spot[data-position="C"] { top: 89% !important; }
  #pause .pause-spot img,#pause .pause-spot small { display: none; }
  #pause .pause-spot b { font-size: 10px; }
  #pause .pause-batting-heading { margin-bottom: 8px; }
  #pause .pause-batting-heading h3 { font-size: 18px; }
  #pause .pause-batting-heading p { font-size: 10px; }
  #pause .pause-batting-list { gap: 5px 10px; }
  #pause .batting-number { width: 24px; font-size: 18px; }
  #pause .batting-cue { font-size: 9px; padding: 4px 6px; }
}
/* Short landscape windows fit the nine hitters in three columns of three. */
@container app (max-height: 600px) and (min-width: 620px) {
  #pause .pause-batting-list { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(54px,1fr)); }
  #pause .pause-batting-list .batting-number { width: 20px; }
  #pause .pause-batting-list .player-bar-main { gap: 6px; }
  #pause .pause-batting-list .player-bar-name { font-size: clamp(12px,1.5cqw,18px); }
  #pause .pause-batting-list .player-bar-meta { font-size: clamp(9px,1.05cqw,12px); }
  #pause .pause-batting-list .player-bar-role { padding: 3px; font-size: clamp(10px,1.2cqw,14px); }
  #pause .batting-cue { position: absolute; bottom: 2px; right: 4px; padding: 1px 3px; font-size: clamp(8px,1cqw,11px); background: #102b43; border-radius: 2px; }
}
/* A narrow desktop pane remains usable without requiring landscape mode. */
@container app (max-width: 619px) {
  #pause .pause-actions { width: 100%; }
  #pause [data-pane="controls"] { display: block; }
  #pause .auto-aim-options { margin-top: 20px; }

  #pause .pause-header { gap: 10px; }
  #pause .pause-score { gap: 8px; }
  #pause .pause-score strong { font-size: 20px; }
  #pause .pause-score small { font-size: 10px; }
  #pause .pause-batting-heading { flex-wrap: wrap; gap: 4px 12px; }
  #pause .pause-batting-list { grid-template-columns: minmax(0,1fr); grid-template-rows: repeat(9,minmax(56px,1fr)); }
  #pause .pause-footer { flex-wrap: wrap; gap: 8px; }
  #pause .pause-status { order: -1; flex-basis: 100%; }
}