/* Online entry, room and chat share the centered broadcast menu system. */
#menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="online"] {
  left: calc(50% + (var(--safe-l) - var(--safe-r)) / 2);
  right: auto;
  top: calc(50% + (var(--safe-t) - var(--safe-b)) / 2);
  transform: translate(-50%,-50%);
  width: min(1040px,calc(100% - 80px - var(--safe-l) - var(--safe-r)));
  max-width: none;
  max-height: calc(100% - 120px - var(--safe-t) - var(--safe-b));
  padding: 22px 26px;
}
#menu .online-connect { display: grid; grid-template-columns: minmax(180px,1fr) minmax(230px,1.4fr); align-items: end; gap: 20px; padding: 20px; margin: 20px 0; background: #102b45; border: 1px solid #647f99; border-radius: 5px; }
#menu .online-connect .field { gap: 6px; font-size: 13px; }
#menu .online-connect .join { width: 100%; margin-top: 6px; }
#menu .online-connect input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: 4px; font-size: 16px; }
#menu .online-connect .join input { flex: 1; letter-spacing: 2px; }
#menu [data-pane="online"] .btn { min-height: 44px; border-width: 1px; border-radius: 4px; box-shadow: none; font: 600 15px var(--font); }
#menu #create { min-height: 46px; background: #ffd15c; color: #0a2038; }
#menu .rooms-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 0 12px; color: #ffe19a; }
#menu .rooms-head h3 { margin: 0; font: 700 23px 'Barlow Condensed',var(--font); }
#menu #rooms { min-height: 110px; }
#menu #rooms .empty { padding: 24px 14px; margin: 0; color: #b8cbdd; text-align: center; border: 1px dashed #627e99; border-radius: 5px; }
#menu .room-item { width: 100%; padding: 16px; border: 1px solid #647f99; border-radius: 5px; background: #102b45; color: #f3f6fa; text-align: left; font: inherit; }
#menu .room-item:hover { border-color: #ffd15c; background: #193650; }
#menu .ri-name small { color: #b8cbdd; margin-top: 8px; line-height: 1.5; }
#menu .ri-n { flex: none; color: #c4d3e2; font-size: 13px; }
#menu .ri-st { flex: none; background: #24485f; color: #ffe19a; }

#room { overflow: hidden; touch-action: pan-x pan-y; color: #f3f6fa; --muted: #b8cbdd; }
#room .room-wrap {
  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: min(1200px,calc(100% - 80px - var(--safe-l) - var(--safe-r)));
  height: min(780px,calc(100% - 120px - var(--safe-t) - var(--safe-b)));
  max-width: none;
  margin: 0;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  background: #071c33ed;
  border: 1px solid #c1d7e79a;
  border-radius: 7px;
  box-shadow: 0 8px 30px #051c4666,inset 0 0 0 3px #142e4c80;
}
#room .room-head { display: flex; flex: none; flex-wrap: nowrap; padding: 0 0 16px; gap: 16px; border-bottom: 1px solid #ffd15c8c; }
#room .room-title { min-width: 0; flex-wrap: wrap; gap: 6px 10px; }
#room .room-title h2 { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 25px/1.2 'Barlow Condensed',var(--font); color: #fff4d1; }
#room .badge { padding: 3px 8px; border-radius: 3px; font-size: 11px; background: #275665; color: #d4f4e6; }
#room .badge.private { background: #34435d; color: #e1e9f2; }
#room .room-code { flex: none; gap: 10px; }
#room .room-code > span { font-size: 12px; }
#room .room-code b { color: #ffd15c; font: 700 27px 'Barlow Condensed',var(--font); letter-spacing: 3px; }
#room .room-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: 18px; margin-top: 18px; }
#room .room-config { min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; scrollbar-color: #6684a2 #0a2038; padding: 3px; }
#room .room-main .panel { background: #102b45; color: #f3f6fa; border: 1px solid #647f99; border-radius: 5px; box-shadow: none; }
#room .sides { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
#room .side-card { padding: 14px; min-width: 0; border-top: 3px solid var(--team); }
#room .side-card h3 { margin-bottom: 12px; color: #b8cbdd; font-size: 12px; }
#room .side-team { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 4px 10px; }
#room .side-team .tc-icon { grid-row: span 2; }
#room .side-team .team-logo { width: 44px; height: 44px; }
#room .side-team b { min-width: 0; overflow-wrap: anywhere; color: #fff6df; font: 700 23px/1.1 'Barlow Condensed',var(--font); }
#room .side-team small { grid-column: 2; margin: 0; color: #b8cbdd; font-size: 11px; }
#room .side-who { font-size: 13px; overflow-wrap: anywhere; line-height: 1.5; margin: 14px 0 10px; }
#room .side-pick { gap: 5px; }
#room .side-pick button { min-width: 0; min-height: 44px; padding: 5px; border: 1px solid #6886a0; border-radius: 4px; background: #173752; }
#room .side-pick button.on { background: #ffd15c; border-color: #ffe5a0; }
#room .watchers { min-width: 0; overflow-wrap: anywhere; font-size: 12px; }
/* the account's avatar left of each name, in the sides, the watchers and the chat (common/player-avatar.js) */
#room { --player-avatar-ring: #8ea9bd; --player-avatar-bg: #e9f5ff; }
#room .side-who .player-avatar { --player-avatar-size: 1.85em; }
#room .watcher { white-space: nowrap; }
#room .chat-log .line .player-avatar { --player-avatar-size: 1.7em; --player-avatar-gap: .45em; }
#room .settings { margin-top: 12px; padding: 16px; }
#room .settings h3,#room .chatbox h3 { margin: 0 0 14px; padding-left: 10px; border-left: 3px solid #ffd15c; color: #ffe19a; font: 700 22px/1.2 'Barlow Condensed',var(--font); }
#room .stadium-picker { margin: 0; gap: 12px; }
#room .stadium-picker span,#room .settings .label { color: #b8cbdd; font-size: 13px; }
#room .settings .row { margin: 12px 0 0; gap: 12px; flex-wrap: nowrap; }
#room .settings .row .label { width: 76px; }
#room .settings .row:has(.check) { flex-wrap: wrap; }
#room .settings .check { min-height: 32px; font-size: 12px; gap: 8px; }
#room input[type="checkbox"] { accent-color: #ffd15c; width: 18px; height: 18px; }
#room #room-venue { font-size: 12px; margin: 8px 0 0; color: #b8cbdd; }
#room .seg { flex: 1; display: flex; gap: 4px; flex-wrap: nowrap; border: 0; border-radius: 0; background: transparent; overflow: visible; }
#room .seg button { flex: 1; min-width: 0; min-height: 44px; padding: 7px 4px; border: 1px solid #7793ac; border-radius: 4px; font-size: 13px; background: #0b243d; color: #d2e0ed; }
#room .seg button.on { background: #ffd15c; border-color: #ffdf8d; color: #0a2038; }
#room .seg button:disabled { cursor: default; }
#room .seg button:disabled:not(.on) { opacity: .5; }
#room .btn { flex: none; min-height: 44px; padding: 8px 12px; border: 1px solid #8ea9bd; border-radius: 4px; background: #193650; color: #f3f6fa; box-shadow: none; font: 600 13px var(--font); }
#room :is(input:not([type="checkbox"]),select) { min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid #7793ac; border-radius: 4px; background: #0b243d; color: #fff6dd; font: 500 16px/1.3 var(--font); }
#room :is(input,select):disabled { opacity: .75; }
#room :is(input,select)::placeholder { color: #a9bfd3; }
#room :is(button,input,select):focus-visible { outline: 2px solid #ffd15c; outline-offset: 2px; }
#room .chatbox { min-width: 0; min-height: 0; height: auto; margin: 3px 0; padding: 16px; }
#room .chatbox h3 { flex: none; }
#room .chat-log { min-height: 0; padding: 4px 6px 8px 0; touch-action: pan-x pan-y; scrollbar-color: #6684a2 #0a2038; }
#room .chat-log .line { overflow-wrap: anywhere; padding: 10px 0; border-bottom: 1px solid #7591ab30; font-size: 14px; line-height: 1.5; }
#room .chat-log .line.sys { color: #a9bfd3; font-size: 12px; }
#room #chat-form { flex: none; padding-top: 12px; margin-top: 8px; border-top: 1px solid #647f99; gap: 8px; }
#room .room-actions { display: flex; flex: none; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #ffd15c66; }
#room #start { width: 230px; min-height: 48px; background: #ffd15c; color: #0a2038; border-color: #ffdf8d; box-shadow: 0 3px 0 #b98122; font: 700 26px 'Barlow Condensed',var(--font); }
#room #wait { min-height: 48px; display: flex; align-items: center; margin: 0; color: #c4d3e2; font-size: 14px; }
.room-share-overlay[data-theme="baseball"] { --rs-bg: #0d263f; --rs-ink: #f3f6fa; --rs-line: #8ca8bd; --rs-accent: #ffd15c; --rs-field: #193650; --rs-border: 1px; }
.room-share-overlay[data-theme="baseball"] .rs-card { border-radius: 7px; box-shadow: 0 12px 32px #00132899; }
.room-share-overlay[data-theme="baseball"] :is(button,.rs-url) { border-radius: 4px; }
@container app (max-height: 600px) {
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="online"] { width: calc(100% - 48px - var(--safe-l) - var(--safe-r)); max-height: calc(100% - 80px - var(--safe-t) - var(--safe-b)); top: calc(50% + 12px + (var(--safe-t) - var(--safe-b)) / 2); padding: 10px 14px; }
  #menu .online-connect { padding: 12px; margin: 12px 0; gap: 12px; grid-template-columns: minmax(150px,1fr) minmax(180px,1.4fr); }
  #menu #rooms { min-height: 70px; }
  #menu .rooms-head { margin-top: 14px; }
  #room .room-wrap { width: calc(100% - 32px - var(--safe-l) - var(--safe-r)); height: calc(100% - 32px - var(--safe-t) - var(--safe-b)); padding: 10px 14px; }
  #room .room-head { padding-bottom: 8px; gap: 10px; }
  #room .room-title h2 { font-size: 20px; }
  #room .room-title { gap: 3px 6px; }
  #room .room-code { gap: 6px; }
  #room .room-code > span { display: none; }
  #room .room-code b { font-size: 23px; }
  #room .room-code .btn { font-size: 11px; padding-inline: 8px; }
  #room .room-main { margin-top: 8px; gap: 10px; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
  #room .sides { gap: 8px; }
  #room .side-card,#room .settings { padding: 10px; }
  #room .side-team { grid-template-columns: 32px minmax(0,1fr); gap: 4px 7px; }
  #room .side-team .team-logo { width: 32px; height: 32px; }
  #room .side-team b { font-size: 18px; }
  #room .side-pick { grid-template-columns: repeat(3,minmax(0,1fr)); }
  #room .side-who { font-size: 11px; }
  #room .chatbox { padding: 10px; }
  #room .chatbox h3 { font-size: 20px; margin-bottom: 6px; }
  #room .chat-log .line { font-size: 12px; padding-block: 6px; }
  #room #chat-form { gap: 5px; padding-top: 8px; margin-top: 4px; }
  #room #chat-in { padding-inline: 8px; }
  #room .room-actions { margin-top: 8px; padding-top: 8px; }
  #room #start { min-height: 44px; width: 170px; font-size: 23px; }
  #room #wait { min-height: 44px; font-size: 12px; }
}
@container app (max-width: 600px) and (orientation: portrait) {
  #menu.has-game-settings[data-game-settings-menu="baseball"] > .menu-panel[data-menu-page="online"] { width: calc(100% - 28px - var(--safe-l) - var(--safe-r)); padding: 14px; }
  #menu .online-connect { grid-template-columns: 1fr; padding: 14px; }
  #room .room-wrap { width: calc(100% - 28px - var(--safe-l) - var(--safe-r)); height: calc(100% - 48px - var(--safe-t) - var(--safe-b)); padding: 14px; }
  #room .room-head { flex-wrap: wrap; }
  #room .room-code { flex-basis: 100%; flex-wrap: wrap; }
  #room .room-main { display: flex; flex-direction: column; overflow-y: auto; }
  #room .room-config { flex: none; overflow: visible; }
  #room .sides { grid-template-columns: 1fr; }
  #room .chatbox { flex: none; min-height: 240px; height: 240px; }
}