/* Golden-hour broadcast direction, from dev/reference/refinement-2026-10-13.
   Real DOM controls over the live field; the concept image is never a backdrop. */
:root {
  --ink: #122b36; --ink2: #36515c; --sun: #ffd16e; --gold: #ffd16e;
  --cream: #f6f3e8; --cream2: #e9e8dc; --sea: #6fe3c2;
  --shadow: 0 6px 20px #071b2430;
  --broadcast: #102834f2; --broadcast-line: #a5d6dd30;
}
#stage::before { opacity: .12; }
.btn, .icon-btn, .tab, .seg, .team-card, .pitch-choice, .ptype { border-width: 1px; box-shadow: none; }
.btn { border-radius: 9px; padding-block: 10px; font-weight: 600; }
.btn.primary { background: linear-gradient(180deg, #ffdb8b, #f7bf52); border-color: #fbe1a9; box-shadow: 0 3px 0 #ac7931, 0 7px 18px #10283425; }
.btn:active { box-shadow: none; transform: translateY(2px); }
.panel { border-width: 1px; border-color: #e9efe960; border-radius: 17px; box-shadow: 0 16px 42px #0b243654; }
.icon-btn { border-radius: 10px; }
.logo { left: calc(32px + var(--safe-l)); top: calc(82px + var(--safe-t)); }
.logo h1 { color: #fff5db; -webkit-text-stroke: 0; text-shadow: 0 3px 0 #21414c, 0 8px 26px #091c3980; transform: none; font-size: clamp(36px, 4.5cqw, 66px); }
.logo p { font-weight: 500; font-size: 14px; text-shadow: 0 2px 5px #09202d; letter-spacing: .5px; }
#menu::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,#102b3640,transparent 48%,#102b3620); }
#menu .home { left: calc(32px + var(--safe-l)); top: calc(22px + var(--safe-t)); background: #102834c9; border-color: #ffffff40; color: #eef2e6; }
.menu-panel { top: calc(100px + var(--safe-t)); right: calc(32px + var(--safe-r)); width: min(450px, 51cqw); max-height: calc(100% - 124px - var(--safe-t) - var(--safe-b)); padding: 16px 20px 22px; background: #f6f3e8f7; }
.tabs { margin: -3px -5px 16px; border-bottom: 1px solid #122b3629; gap: 2px; padding-bottom: 9px; }
.tab { border-color: transparent; background: transparent; font-size: 13px; border-radius: 8px; min-height: 42px; }
.tab.on { background: #173943; color: #fff3cf; box-shadow: none; }
.field { font-size: 12px; gap: 7px; }
.field input, .join input, #chat-in { border: 1px solid #bfd0ce; border-radius: 8px; background: #fffdf7; }
.field input:focus { border-color: #268570; box-shadow: 0 0 0 3px #64d7b522; }
.seg { border-color: #bdcdca; border-radius: 8px; }
.seg button { border-color: #d8e0da; }
.seg button.on { background: #d9eee4; color: #163e36; }
.mode-picker { margin-block: 18px 10px; }
.mode-picker button { font-size: 15px; }
.team-picker { padding: 8px 0; }
.match-options { border-top: 1px solid #1b3c4930; padding-top: 15px; margin-top: 10px; }
#solo-go { margin-top: 18px; border-radius: 10px; min-height: 56px; }
.star-plate { left: calc(32px + var(--safe-l)); bottom: calc(55px + var(--safe-b)); border: 1px solid #ffffff32; border-left: 4px solid var(--team); border-radius: 10px; background: var(--broadcast); color: #fff6df; padding: 13px 18px; box-shadow: 0 8px 24px #0e293440; }
.star-plate b { color: #fff6df; font-size: 27px; }
.star-plate small, .star-plate span { color: #b9d2cf; font-size: 12px; }
.model-hint { left: calc(34px + var(--safe-l)); color: #eef4df; font-size: 12px; }
.mini-popup { border-width: 1px; border-color: #b7ceca; box-shadow: 0 8px 32px #0b253947; border-radius: 12px; }
.bug { top: calc(18px + var(--safe-t)); left: calc(20px + var(--safe-l)); color: #f9f6e9; background: var(--broadcast); border: 1px solid var(--broadcast-line); border-radius: 10px; box-shadow: 0 5px 20px #0e26303d; }
.bug-team { min-width: 153px; padding: 5px 12px 5px 8px; border-left-width: 4px; gap: 7px; }
.bug-team + .bug-team, .bug-mid { border-color: #a5d6dd26; }
.bug-team b { font: 700 13px var(--font); }
.bug-team.batting { background: linear-gradient(90deg,color-mix(in srgb,var(--team) 30%,transparent),transparent); }
.bug-runs { font: 700 25px/1.15 var(--font); color: #fff7df; }
.bug-inning { color: #fff0c9; font: 700 16px var(--font); }
.bug-inning .arrow { color: var(--gold); }
.bug-count { padding-inline: 12px; gap: 3px; }
.bug-count span { color: #b8ccc9; font-size: 11px; }
.bug-count i { width: 9px; height: 9px; background: #243d47; border-color: #839e9e; }
.bug-count i.on { border-color: transparent; }
.bug-diamond i { border-width: 1px; border-color: #8ba8a6; background: #233d48; }
.bug-diamond i.on { box-shadow: 0 0 6px #ffd16e55; }
.hud-tools { top: calc(18px + var(--safe-t)); right: calc(20px + var(--safe-r)); }
.hud-tools > .icon-btn, .hud-tools > .popover-anchor > .icon-btn { color: #fff3d8; border-color: #b7d4d440; background: var(--broadcast); }
.live-matchup { left: calc(20px + var(--safe-l)); right: calc(20px + var(--safe-r)); top: calc(108px + var(--safe-t)); }
.live-player { background: #102834da; border: 1px solid #9ebfc62e; border-left: 3px solid var(--team); border-radius: 8px; color: #f5f2e5; width: 218px; padding: 8px 10px; box-shadow: none; }
.live-who > span, .live-stats span, .live-today { color: #b6cbc5; }
.live-who b { font-size: 13px; }
.live-stats { margin: 6px 0 3px; }
.live-stats b { font-size: 16px; }
.live-today { font-size: 10px; }
.pitch-info { right: calc(126px + var(--safe-r)); top: calc(21px + var(--safe-t)); background: #102834cf; border-radius: 8px; padding: 6px 12px; text-shadow: none; font-size: 12px; color: #e7eee1; }
.pitch-info:empty { display: none; }
.pitch-info span { font: 700 19px var(--font); }
.phase-chip { position: absolute; left: 50%; top: calc(18px + var(--safe-t)); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 15px; background: var(--broadcast); color: #f6f3e8; border: 1px solid var(--broadcast-line); border-radius: 30px; font-size: 12px; pointer-events: none !important; white-space: nowrap; }
.phase-chip i { width: 6px; height: 6px; background: #72deb4; border-radius: 50%; }
.phase-chip b { font-size: 12px; letter-spacing: .3px; }
.phase-chip span { color: #b8cfca; border-left: 1px solid #b8cfca40; padding-left: 8px; font-size: 11px; }
#hud[data-phase="track"] .phase-chip i, #hud[data-phase="meter"] .phase-chip i { background: var(--gold); box-shadow: 0 0 8px #ffd16e70; }
.action-guide { position: absolute; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); text-align: center; color: #f9f4df; background: #102834d9; border: 1px solid #bad8cc26; border-radius: 10px; padding: 10px 18px; max-width: calc(var(--gw) - 370px); pointer-events: none !important; }
.action-guide b { display: block; font-size: 13px; letter-spacing: 1px; }
.action-guide span { display: block; margin-top: 5px; font-size: 11px; color: #c2d5ca; line-height: 1.4; }
#hud:not(.lele-hud) .hint { display: none; }
.pitchbar { bottom: calc(24px + var(--safe-b)); left: calc(20px + var(--safe-l)); right: calc(24px + var(--safe-r)); }
.pitch-choice { background: var(--broadcast); color: #fff3d6; border-color: #a5c1c650; border-left: 3px solid var(--pc); border-radius: 9px; box-shadow: 0 5px 16px #112a3630; min-height: 48px; font-size: 13px; }
.pitch-choice[aria-expanded="true"] { background: #244651; }
.throw-btn { border: 1px solid #ffe2a0; border-radius: 12px; background: linear-gradient(180deg,#ffdb8b,#edb44b); box-shadow: 0 4px 0 #97682f,0 8px 20px #10283435; font-size: 23px; min-height: 61px; }
.swing-btn { background: radial-gradient(circle at 35% 20%,#ffe6ab,#f7c45e 65%,#dfa83d); width: 105px; height: 105px; font-size: 23px; border: 2px solid #ffedc4; box-shadow: 0 0 0 5px #14313acc,0 8px 22px #10283440,inset 0 0 0 4px #f3bc5750; }
.swing-btn:disabled { background: #233e47dc; color: #bdd0c7; border-color: #97b7b754; box-shadow: 0 0 0 4px #14313a80; opacity: .85; }
#hud[data-phase="track"] .swing-btn { box-shadow: 0 0 0 5px #14313acc,0 0 0 7px #ffd16e85,0 8px 22px #10283440; }
.swing-feedback { left: calc(20px + var(--safe-l)); bottom: calc(24px + var(--safe-b)); background: var(--broadcast); color: #f8f5e7; width: 324px; padding: 12px 14px; border: 1px solid #a5d6dd40; border-top: 3px solid #78daba; border-radius: 11px; box-shadow: 0 8px 25px #0b263540; }
.swing-feedback.sweet { background: #173331f5; border-top-color: #ffd16e; }
.swing-feedback[data-grade="miss"] { border-top-color: #ec9182; }
.feedback-title { font-size: 13px; align-items: center; }
.feedback-title span, .swing-feedback small { font-size: 10px; color: #c2d4cb; }
.feedback-analysis { display: flex; gap: 12px; align-items: center; margin-top: 9px; }
.feedback-timing { flex: 1; min-width: 0; }
.contact-map { position: relative; width: 58px; height: 58px; flex: none; border: 1px solid #adc4bd44; border-radius: 6px; background: linear-gradient(transparent 49%,#adc4bd20 49% 51%,transparent 51%),linear-gradient(90deg,transparent 49%,#adc4bd20 49% 51%,transparent 51%); }
.contact-sweet { position: absolute; left: 24%; top: 24%; width: 52%; height: 52%; border-radius: 50%; border: 1px solid #83e1bf; background: #83e1bf0e; }
.contact-ball { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%,-50%); background: #ffe4a0; box-shadow: 0 0 7px #ffd16eaa; }
.timing-track { height: 8px; margin-top: 4px; border: 0; background: linear-gradient(90deg,#cd8174,#d0b76e 32%,#69caa5 46% 54%,#d0b76e 68%,#cd8174); }
.timing-window { border-color: #e3f5e7; }
.timing-mark { top: -4px; height: 16px; width: 3px; border: 0; background: #fff7dc; box-shadow: 0 1px 3px #0b253d; }
.timing-labels { color: #b8cdc3; font-size: 9px; margin-top: 6px; }
.feedback-advice { border-top: 1px solid #91bab52b; padding-top: 8px; margin: 9px 0 0; color: #e3eadc; font-size: 11px; line-height: 1.35; }
.skip-btn, .hr-replay-btn { background: var(--broadcast); color: #f5edd9; border: 1px solid #a5d6dd40; box-shadow: none; }
.banner span, .pop { -webkit-text-stroke-width: 2px; }
.banner span { text-shadow: 0 5px 15px #09202d70; }
/* The call camera puts the mask and signalling arm in the upper centre.
   Keep its result text below them, including on short landscape phones. */
#hud.umpire-call .banner { top: auto; bottom: 6%; left: 25%; right: 35%; }
#hud.umpire-call .banner span { font-size: clamp(24px, calc(var(--gw) * .04), 48px); padding-inline: 8px; }
.linescore { background: #f6f3e8f5; border: 1px solid #c4d3c3; }
.lele-hud .swing-feedback { background: var(--cream); color: var(--ink); }
.lele-hud .swing-feedback span { color: var(--muted); }
html.short .bug { left: calc(12px + var(--safe-l)); top: calc(10px + var(--safe-t)); }
html.short .bug-team { min-width: 121px; padding: 3px 8px 3px 5px; gap: 5px; }
html.short .bug-team b { font-size: 11px; }
html.short .bug-runs { font-size: 20px; }
html.short .bug-count { padding-inline: 8px; }
html.short .hud-tools { top: calc(10px + var(--safe-t)); right: calc(12px + var(--safe-r)); }
html.short .phase-chip { left: max(50%, calc(370px + var(--safe-l))); top: calc(10px + var(--safe-t)); padding: 7px 10px; }
html.short .phase-chip span { display: none; }
html.short .live-matchup { top: calc(78px + var(--safe-t)); left: calc(12px + var(--safe-l)); right: calc(12px + var(--safe-r)); }
html.short .live-player { padding: 6px 8px; width: 188px; }
html.short .live-today { display: none; }
html.short .action-guide { bottom: calc(14px + var(--safe-b)); padding: 7px 10px; max-width: calc(var(--gw) - 335px); }
html.short .action-guide b { font-size: 11px; letter-spacing: .2px; }
html.short .action-guide span { font-size: 10px; margin-top: 3px; }
html.short .pitch-info { top: calc(58px + var(--safe-t)); right: calc(13px + var(--safe-r)); padding: 5px 8px; }
html.short .swing-feedback { width: 280px; padding: 8px 10px; bottom: calc(14px + var(--safe-b)); left: calc(12px + var(--safe-l)); }
html.short .feedback-title { font-size: 12px; }
html.short .feedback-analysis { margin-top: 6px; gap: 8px; }
html.short .contact-map { width: 42px; height: 42px; }
html.short .feedback-advice { margin-top: 6px; padding-top: 6px; font-size: 10px; }
html.short .swing-btn { width: 82px; height: 82px; font-size: 20px; right: calc(22px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); }
html.short .pitchbar { bottom: calc(14px + var(--safe-b)); }
html.short .throw-btn { min-height: 49px; font-size: 19px; }
@container app (max-height: 520px) and (orientation: landscape) {
  .logo { top: calc(65px + var(--safe-t)); left: calc(24px + var(--safe-l)); }
  .logo h1 { font-size: 36px; }
  .logo p { font-size: 11px; max-width: 38cqw; }
  .menu-panel { top: calc(58px + var(--safe-t)); right: calc(16px + var(--safe-r)); width: min(460px,55cqw); max-height: calc(100% - 70px - var(--safe-t) - var(--safe-b)); padding: 10px 14px; }
  .tabs { margin-bottom: 8px; padding-bottom: 5px; }
  .tab { padding: 6px 3px; font-size: 11px; min-height: 34px; }
  .mode-picker { margin-block: 8px; }
  .mode-picker button { font-size: 13px; }
  .team-picker { padding-block: 0; }
  .star-plate { left: 24px; bottom: 46px; padding: 8px 12px; }
  .star-plate b { font-size: 20px; }
  #solo-go { margin-top: 0; min-height: 43px; }
}
@container app (max-width: 700px) and (orientation: portrait) {
  .logo { top: calc(52px + var(--safe-t)); left: calc(20px + var(--safe-l)); }
  .logo h1 { font-size: 34px; }
  .logo p { margin-top: 5px; font-size: 11px; }
  #menu .home { left: 20px; top: 12px; }
  #menu.has-game-settings[data-game-settings-menu="baseball"]:not(.menu) > .menu-panel { top: calc(135px + var(--safe-t)); }
  .menu-panel { width: calc(100cqw - 28px - var(--safe-l) - var(--safe-r)); right: calc(14px + var(--safe-r)); max-height: calc(100% - 150px - var(--safe-t) - var(--safe-b)); padding: 14px 16px 20px; }
}
/* Tiny landscape: retain the play surface and only the active action. */
html.short #hud[data-phase="track"] .live-matchup,
html.short #hud[data-phase="meter"] .live-matchup { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .phase-chip i { box-shadow: none !important; } }
@container app (max-width: 600px) and (orientation: landscape) {
  html.short .phase-chip { left: 50%; top: calc(78px + var(--safe-t)); }
}
/* Native menu selects retain scrolling, keyboard and touch behavior. */
.stadium-picker { display:flex; align-items:center; gap:12px; margin:10px 0; color:#183246; font-weight:700; }
.stadium-picker select { min-width:0; flex:1; border:1px solid #bfa16b; border-radius:8px; padding:8px 10px; background:#fff6e0; color:#183246; font:inherit; font-size:16px; }
.stadium-picker select:focus-visible { outline:3px solid #bd842d; outline-offset:2px; }
.stadium-picker select:disabled { opacity:.7; }