/* Broadcast Game Land v20260907_1938
   Online games: one-screen mobile layout (portrait + landscape).
   Loaded after the legacy game/mobile styles so these rules win. */

@media (max-width: 1024px) {
  html,
  body[data-view="online-game"],
  body[data-view="online-game"] .app-shell,
  body[data-view="online-game"] .online-game-screen {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body[data-view="online-game"].online-one-screen {
    height: var(--online-vvh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--online-vvh, 100dvh) !important;
  }

  body[data-view="online-game"].online-one-screen .app-shell,
  body[data-view="online-game"].online-one-screen .online-game-screen {
    height: var(--online-vvh, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--online-vvh, 100dvh) !important;
    border-radius: 0 !important;
  }

  body[data-view="online-game"].online-one-screen .online-game-screen {
    display: grid !important;
    grid-template-rows: 40px minmax(0, 1fr) !important;
  }

  body[data-view="online-game"].online-one-screen .online-topbar {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    padding: 3px 6px !important;
    gap: 5px !important;
  }

  body[data-view="online-game"].online-one-screen .online-title-wrap {
    min-width: 0 !important;
    gap: 5px !important;
    flex: 1 1 auto !important;
  }
  body[data-view="online-game"].online-one-screen .online-title-icon {
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    border-radius: 8px !important;
  }
  body[data-view="online-game"].online-one-screen .online-title-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  body[data-view="online-game"].online-one-screen .online-title-wrap small { display: none !important; }
  body[data-view="online-game"].online-one-screen .online-title-wrap h2 {
    margin: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-view="online-game"].online-one-screen .online-top-actions {
    flex: 0 0 auto !important;
    max-width: none !important;
    min-width: 0 !important;
    gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .online-top-actions > * {
    min-width: 0 !important;
  }
  body[data-view="online-game"].online-one-screen #onlineExpandBtn,
  body[data-view="online-game"].online-one-screen .online-net-pill,
  body[data-view="online-game"].online-one-screen [data-jukdol-bgm-button],
  body[data-view="online-game"].online-one-screen [data-jukdol-sfx-button] {
    display: none !important;
  }
  body[data-view="online-game"].online-one-screen #onlineRankingBtn,
  body[data-view="online-game"].online-one-screen #leaveOnlineBtn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 7px !important;
    border-radius: 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  body[data-view="online-game"].online-one-screen .online-layout {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .online-layout > section:not(.hidden) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  /* Lobby: remove promotional copy and keep every control in one view. */
  body[data-view="online-game"].online-one-screen .online-lobby {
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: center !important;
    align-content: center !important;
    padding: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .online-lobby-copy { display: none !important; }
  body[data-view="online-game"].online-one-screen .online-lobby-panel {
    box-sizing: border-box !important;
    width: min(100%, 520px) !important;
    max-height: 100% !important;
    margin: auto !important;
    padding: 8px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .online-field-label {
    margin-bottom: 3px !important;
    font-size: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .online-input.nickname {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 9px !important;
    font-size: 13px !important;
  }
  body[data-view="online-game"].online-one-screen .online-room-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin-top: 5px !important;
  }
  body[data-view="online-game"].online-one-screen .online-room-card {
    min-height: 78px !important;
    padding: 7px !important;
    border-radius: 12px !important;
  }
  body[data-view="online-game"].online-one-screen .room-card-icon {
    width: 25px !important;
    height: 25px !important;
    font-size: 15px !important;
  }
  body[data-view="online-game"].online-one-screen .online-room-card strong {
    margin-top: 3px !important;
    font-size: 13px !important;
  }
  body[data-view="online-game"].online-one-screen .online-room-card small {
    margin-top: 1px !important;
    font-size: 8px !important;
    line-height: 1.1 !important;
  }
  body[data-view="online-game"].online-one-screen .room-code-entry {
    margin-top: 3px !important;
    gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .room-code-entry .online-input {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 5px !important;
    font-size: 11px !important;
  }
  body[data-view="online-game"].online-one-screen .room-code-entry button {
    min-height: 30px !important;
    padding: 0 7px !important;
    font-size: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .online-ai-practice {
    min-height: 42px !important;
    margin-top: 5px !important;
    padding: 5px 8px !important;
    border-radius: 11px !important;
  }
  body[data-view="online-game"].online-one-screen .online-ai-practice > span { font-size: 18px !important; }
  body[data-view="online-game"].online-one-screen .online-ai-practice strong { font-size: 12px !important; }
  body[data-view="online-game"].online-one-screen .online-ai-practice small { display: none !important; }
  body[data-view="online-game"].online-one-screen .online-ai-practice b { font-size: 10px !important; }
  body[data-view="online-game"].online-one-screen .online-room-box {
    margin-top: 5px !important;
    padding: 5px 7px !important;
    border-radius: 10px !important;
  }
  body[data-view="online-game"].online-one-screen .online-room-box > small { font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .room-code-display strong { font-size: 20px !important; }
  body[data-view="online-game"].online-one-screen .room-code-display button { min-height: 26px !important; font-size: 9px !important; }
  body[data-view="online-game"].online-one-screen .online-room-box p { margin: 2px 0 0 !important; font-size: 9px !important; }

  /* Ready room */
  body[data-view="online-game"].online-one-screen .online-match-lobby {
    display: grid !important;
    align-content: center !important;
    place-items: center !important;
    gap: 6px !important;
    padding: 4px !important;
  }
  body[data-view="online-game"].online-one-screen .match-lobby-head span { font-size: 9px !important; }
  body[data-view="online-game"].online-one-screen .match-lobby-head b { font-size: 15px !important; }
  body[data-view="online-game"].online-one-screen .match-lobby-head small { margin-top: 1px !important; font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .versus-ready-grid {
    width: min(100%, 480px) !important;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
    gap: 5px !important;
  }
  body[data-view="online-game"].online-one-screen .ready-player-card {
    padding: 8px 5px !important;
    border-radius: 13px !important;
  }
  body[data-view="online-game"].online-one-screen .player-role { left: 6px !important; top: 5px !important; font-size: 7px !important; }
  body[data-view="online-game"].online-one-screen .ready-avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
  }
  body[data-view="online-game"].online-one-screen .ready-player-card strong { margin-top: 4px !important; font-size: 12px !important; }
  body[data-view="online-game"].online-one-screen .ready-player-card em { margin-top: 1px !important; font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .ready-vs span { font-size: 20px !important; }
  body[data-view="online-game"].online-one-screen .ready-vs i { width: 22px !important; margin: 3px auto !important; }
  body[data-view="online-game"].online-one-screen .online-ready-btn {
    min-width: 150px !important;
    min-height: 36px !important;
    padding: 5px 14px !important;
    border-radius: 11px !important;
    font-size: 13px !important;
    box-shadow: 0 4px 0 #1b6e73 !important;
  }
  body[data-view="online-game"].online-one-screen .online-ready-hint { font-size: 9px !important; }

  /* Shared arena chrome */
  body[data-view="online-game"].online-one-screen .online-arena {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding: 0 !important;
  }
  body[data-view="online-game"].online-one-screen .online-player-strip {
    box-sizing: border-box !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .strip-player {
    padding: 0 5px !important;
    grid-template-columns: 23px minmax(0, 1fr) !important;
    column-gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .strip-player.guest { grid-template-columns: minmax(0, 1fr) 23px !important; }
  body[data-view="online-game"].online-one-screen .strip-player > span {
    width: 21px !important;
    height: 21px !important;
    border-radius: 6px !important;
    font-size: 8px !important;
  }
  body[data-view="online-game"].online-one-screen .strip-player strong { font-size: 9px !important; line-height: 1 !important; }
  body[data-view="online-game"].online-one-screen .strip-player small { font-size: 6px !important; line-height: 1 !important; }
  body[data-view="online-game"].online-one-screen .strip-room { padding: 0 4px !important; }
  body[data-view="online-game"].online-one-screen .strip-room span { font-size: 6px !important; }
  body[data-view="online-game"].online-one-screen .strip-room b { font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .online-idle-clock {
    bottom: -12px !important;
    min-width: 74px !important;
    height: 24px !important;
    padding: 0 7px !important;
  }
  body[data-view="online-game"].online-one-screen .online-idle-clock > span { font-size: 12px !important; }
  body[data-view="online-game"].online-one-screen .online-idle-clock > strong { font-size: 15px !important; }
  body[data-view="online-game"].online-one-screen .online-idle-clock > small { font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .online-game-content {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
  }

  /* RPS */
  body[data-view="online-game"].online-one-screen .rps-arena {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: 28px minmax(0, 1fr) 52px !important;
    gap: 2px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .rps-scoreboard { gap: 5px !important; }
  body[data-view="online-game"].online-one-screen .rps-score { width: 58px !important; }
  body[data-view="online-game"].online-one-screen .rps-score small { font-size: 6px !important; }
  body[data-view="online-game"].online-one-screen .rps-score strong { font-size: 20px !important; }
  body[data-view="online-game"].online-one-screen .rps-round { padding: 3px 7px !important; font-size: 7px !important; }
  body[data-view="online-game"].online-one-screen .rps-stage {
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
    gap: 2px !important;
  }
  body[data-view="online-game"].online-one-screen .rps-hand-label { font-size: 7px !important; }
  body[data-view="online-game"].online-one-screen .rps-hand {
    width: min(18cqh, 74px, 19vw) !important;
    margin-top: 2px !important;
    font-size: min(11cqh, 46px, 12vw) !important;
  }
  body[data-view="online-game"].online-one-screen .rps-center b { font-size: 18px !important; }
  body[data-view="online-game"].online-one-screen .rps-center span { display: none !important; }
  body[data-view="online-game"].online-one-screen .rps-choices {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .rps-choice {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 3px !important;
    border-radius: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .rps-choice span { font-size: 21px !important; }
  body[data-view="online-game"].online-one-screen .rps-choice strong { margin-top: 0 !important; font-size: 9px !important; }

  /* Gomoku */
  body[data-view="online-game"].online-one-screen .gomoku-stage {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: 28px minmax(0, 1fr) 30px !important;
    gap: 2px !important;
    padding: 3px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .gomoku-board {
    --board-pad: 6px !important;
    width: min(84vw, calc(var(--online-vvh, 100dvh) - 142px)) !important;
    height: min(84vw, calc(var(--online-vvh, 100dvh) - 142px)) !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: auto !important;
  }
  body[data-view="online-game"].online-one-screen .gomoku-info {
    min-height: 28px !important;
    padding: 3px 6px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .gomoku-help { display: none !important; }

  /* Yutnori */
  body[data-view="online-game"].online-one-screen .yut-arena {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 45%) minmax(0, 55%) !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .yut-board-wrap {
    min-height: 0 !important;
    overflow: hidden !important;
    display: grid !important;
    place-items: center !important;
  }
  body[data-view="online-game"].online-one-screen .yut-board {
    width: min(78vw, calc((var(--online-vvh, 100dvh) - 92px) * .43)) !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-width: 3px !important;
    border-radius: 16px !important;
  }
  body[data-view="online-game"].online-one-screen .yut-side-panel {
    box-sizing: border-box !important;
    min-height: 0 !important;
    height: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 24px 44px 14px 31px 25px minmax(0, 1fr) !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .yut-side-panel > .turn-banner {
    grid-column: 1 / 3 !important;
    grid-row: 1 !important;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 2px !important;
    font-size: 8px !important;
  }
  body[data-view="online-game"].online-one-screen .yut-sticks {
    grid-column: 1 !important;
    grid-row: 2 !important;
    height: 42px !important;
    margin: 0 !important;
    gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .yut-stick { width: 10px !important; height: 37px !important; }
  body[data-view="online-game"].online-one-screen .yut-result-name {
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
    align-self: center !important;
  }
  body[data-view="online-game"].online-one-screen .yut-result-name strong { font-size: 16px !important; }
  body[data-view="online-game"].online-one-screen .yut-result-name small { font-size: 6px !important; line-height: 1 !important; }
  body[data-view="online-game"].online-one-screen .yut-power-gauge {
    grid-column: 1 / 3 !important;
    grid-row: 3 !important;
    height: 14px !important;
    margin: 0 auto !important;
  }
  body[data-view="online-game"].online-one-screen .yut-throw-btn {
    grid-column: 1 / 3 !important;
    grid-row: 4 !important;
    min-height: 29px !important;
    margin: 0 auto !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    box-shadow: 0 3px 0 #77371e !important;
  }
  body[data-view="online-game"].online-one-screen .yut-throw-btn small { display: none !important; }
  body[data-view="online-game"].online-one-screen .yut-move-queue {
    grid-column: 1 / 3 !important;
    grid-row: 5 !important;
    min-height: 23px !important;
    max-height: 25px !important;
    margin: 0 auto !important;
    gap: 2px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .yut-move-chip {
    min-width: 31px !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
    font-size: 7px !important;
  }
  body[data-view="online-game"].online-one-screen .yut-move-chip b { font-size: 9px !important; }
  body[data-view="online-game"].online-one-screen .yut-benches {
    grid-column: 1 / 3 !important;
    grid-row: 6 !important;
    min-height: 0 !important;
    margin: 0 !important;
    gap: 2px !important;
  }
  body[data-view="online-game"].online-one-screen .yut-bench {
    min-height: 0 !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .yut-bench-head { margin-bottom: 1px !important; }
  body[data-view="online-game"].online-one-screen .yut-bench-head strong,
  body[data-view="online-game"].online-one-screen .yut-bench-head span { font-size: 7px !important; }
  body[data-view="online-game"].online-one-screen .yut-bench .yut-piece { width: 17px !important; height: 17px !important; }
  body[data-view="online-game"].online-one-screen .yut-help { display: none !important; }

  /* Word chain / Kungkungtta */
  body[data-view="online-game"].online-one-screen .word-arena {
    box-sizing: border-box !important;
    height: 100% !important;
    min-height: 0 !important;
    grid-template-rows: 34px minmax(0, 1fr) 38px !important;
    gap: 2px !important;
    padding: 2px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .word-rule-banner,
  body[data-view="online-game"].online-one-screen .word-match-banner {
    min-height: 34px !important;
    height: 34px !important;
    padding: 2px 4px !important;
    border-radius: 8px !important;
  }
  body[data-view="online-game"].online-one-screen .word-rule-copy,
  body[data-view="online-game"].online-one-screen .word-match-title small { display: none !important; }
  body[data-view="online-game"].online-one-screen .word-match-title b { font-size: 13px !important; }
  body[data-view="online-game"].online-one-screen .word-round-rail { gap: 2px !important; }
  body[data-view="online-game"].online-one-screen .word-round-step {
    min-width: 28px !important;
    height: 25px !important;
    padding: 2px 3px !important;
    border-radius: 6px !important;
  }
  body[data-view="online-game"].online-one-screen .word-round-step i { font-size: 6px !important; }
  body[data-view="online-game"].online-one-screen .word-round-step strong { font-size: 12px !important; }
  body[data-view="online-game"].online-one-screen .word-playfield {
    min-height: 0 !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 66px minmax(0, 1fr) !important;
    gap: 2px !important;
  }
  body[data-view="online-game"].online-one-screen .word-required-card {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    padding: 3px 5px !important;
    border-radius: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .word-required-head { grid-column: 2 !important; grid-row: 1 !important; }
  body[data-view="online-game"].online-one-screen .word-required-head > small { font-size: 6px !important; }
  body[data-view="online-game"].online-one-screen .word-required-letter {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    width: 40px !important;
    margin: 0 4px 0 0 !important;
    border-radius: 11px !important;
    font-size: 27px !important;
    box-shadow: 0 3px 0 #17566a !important;
  }
  body[data-view="online-game"].online-one-screen .word-head-rule { display: none !important; }
  body[data-view="online-game"].online-one-screen .word-required-card p {
    grid-column: 2 !important;
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1 !important;
  }
  body[data-view="online-game"].online-one-screen .word-clock {
    min-width: 45px !important;
    height: 23px !important;
    padding-inline: 3px !important;
  }
  body[data-view="online-game"].online-one-screen .word-clock span { font-size: 8px !important; }
  body[data-view="online-game"].online-one-screen .word-clock strong { font-size: 13px !important; }
  body[data-view="online-game"].online-one-screen .word-history-panel {
    min-height: 0 !important;
    padding: 3px !important;
    border-radius: 9px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .word-history-head { padding-bottom: 2px !important; }
  body[data-view="online-game"].online-one-screen .word-history-head strong { font-size: 9px !important; }
  body[data-view="online-game"].online-one-screen .word-history-head span { font-size: 7px !important; }
  body[data-view="online-game"].online-one-screen .word-history-list {
    min-height: 0 !important;
    padding: 2px 1px !important;
    gap: 2px !important;
    overflow-y: auto !important;
  }
  body[data-view="online-game"].online-one-screen .word-chip {
    min-height: 22px !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
    font-size: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .word-last-event {
    min-height: 22px !important;
    padding: 2px 4px !important;
    border-radius: 6px !important;
    font-size: 7px !important;
  }
  body[data-view="online-game"].online-one-screen .word-controls {
    width: 100% !important;
    height: 38px !important;
    grid-template-columns: minmax(0, 1fr) 56px 56px !important;
    grid-template-areas: none !important;
    gap: 2px !important;
    margin: 0 !important;
  }
  body[data-view="online-game"].online-one-screen .word-input {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    padding-inline: 5px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
  }
  body[data-view="online-game"].online-one-screen .word-submit-btn,
  body[data-view="online-game"].online-one-screen .word-giveup-btn {
    grid-row: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;
    max-height: 36px !important;
    padding: 0 2px !important;
    border-radius: 8px !important;
    font-size: 9px !important;
  }
  body[data-view="online-game"].online-one-screen .word-submit-btn { grid-column: 2 !important; }
  body[data-view="online-game"].online-one-screen .word-giveup-btn { grid-column: 3 !important; }
  body[data-view="online-game"].online-one-screen .word-turn-wait { display: none !important; }

  /* Modal / result overlays: never exceed the same visible viewport. */
  body[data-view="online-game"].online-one-screen .online-start-intro,
  body[data-view="online-game"].online-one-screen .rps-match-over,
  body[data-view="online-game"].online-one-screen .yut-win-overlay,
  body[data-view="online-game"].online-one-screen .word-round-overlay,
  body[data-view="online-game"].online-one-screen .word-win-overlay {
    box-sizing: border-box !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 4px !important;
    overflow: hidden !important;
  }
  body[data-view="online-game"].online-one-screen .online-start-card,
  body[data-view="online-game"].online-one-screen .rps-match-card,
  body[data-view="online-game"].online-one-screen .word-round-card {
    box-sizing: border-box !important;
    width: min(100%, 440px) !important;
    max-height: calc(100% - 2px) !important;
    padding: 8px !important;
    border-radius: 12px !important;
    overflow: auto !important;
  }

  body[data-view="online-game"].online-one-screen .online-auto-control {
    top: 35px !important;
    width: calc(100% - 6px) !important;
    padding: 4px 6px !important;
    grid-template-columns: 7px minmax(0, 1fr) auto !important;
    gap: 3px !important;
    border-radius: 8px !important;
  }
  body[data-view="online-game"].online-one-screen .online-auto-copy small,
  body[data-view="online-game"].online-one-screen .online-auto-copy span { display: none !important; }
  body[data-view="online-game"].online-one-screen .online-auto-copy strong { font-size: 12px !important; }
  body[data-view="online-game"].online-one-screen .online-auto-cancel {
    min-height: 26px !important;
    padding-inline: 5px !important;
    border-radius: 7px !important;
    font-size: 7px !important;
  }
}

/* Very short phones / landscape browser chrome: compact one more step. */
@media (max-width: 1024px) and (max-height: 700px) {
  body[data-view="online-game"].online-one-screen .online-game-screen { grid-template-rows: 36px minmax(0, 1fr) !important; }
  body[data-view="online-game"].online-one-screen .online-topbar { height:36px !important; min-height:36px !important; max-height:36px !important; }
  body[data-view="online-game"].online-one-screen .online-title-icon { display:none !important; }
  body[data-view="online-game"].online-one-screen .online-player-strip { height:28px !important; min-height:28px !important; max-height:28px !important; flex-basis:28px !important; }
  body[data-view="online-game"].online-one-screen .gomoku-board { width:min(78vw, calc(var(--online-vvh,100dvh) - 125px)) !important; height:min(78vw, calc(var(--online-vvh,100dvh) - 125px)) !important; }
  body[data-view="online-game"].online-one-screen .yut-arena { grid-template-rows:minmax(0,42%) minmax(0,58%) !important; }
}

@media (max-width: 1024px) and (orientation: landscape) {
  body[data-view="online-game"].online-one-screen .online-game-screen { grid-template-rows: 34px minmax(0,1fr) !important; }
  body[data-view="online-game"].online-one-screen .online-topbar { height:34px !important; min-height:34px !important; max-height:34px !important; }
  body[data-view="online-game"].online-one-screen .online-title-icon { display:none !important; }
  body[data-view="online-game"].online-one-screen .online-player-strip { height:27px !important; min-height:27px !important; max-height:27px !important; flex-basis:27px !important; }
  body[data-view="online-game"].online-one-screen .yut-arena {
    grid-template-columns:minmax(0,1.05fr) minmax(230px,.95fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
  body[data-view="online-game"].online-one-screen .yut-board { width:min(68cqh,43vw,380px) !important; }
  body[data-view="online-game"].online-one-screen .word-playfield {
    grid-template-columns:minmax(130px,.48fr) minmax(0,1.52fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
  }
  body[data-view="online-game"].online-one-screen .word-required-card {
    grid-template-columns:1fr !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
  }
  body[data-view="online-game"].online-one-screen .word-required-head { grid-column:1 !important; grid-row:1 !important; }
  body[data-view="online-game"].online-one-screen .word-required-letter {
    grid-column:1 !important;
    grid-row:2 !important;
    width:min(20cqh,66px) !important;
    margin:2px auto !important;
    font-size:34px !important;
  }
  body[data-view="online-game"].online-one-screen .word-required-card p { grid-column:1 !important; grid-row:3 !important; }
}


/* v20260907_0432
   Mobile online top controls:
   - normal view: keep EVERY top control visible
   - expanded view: hide all chrome except the expand/collapse button */
@media (max-width: 1024px) {
  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-game-screen {
    grid-template-rows: 64px minmax(0, 1fr) !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-topbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 27px 29px !important;
    align-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 3px 5px !important;
    gap: 2px !important;
    overflow: visible !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-title-wrap {
    width: 100% !important;
    min-width: 0 !important;
    height: 27px !important;
    gap: 5px !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-title-icon {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 7px !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-title-wrap h2 {
    font-size: 12px !important;
    line-height: 1 !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-top-actions {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 29px !important;
    display: grid !important;
    grid-template-columns: 46px 56px minmax(48px, 1fr) 38px 44px 52px !important;
    align-items: stretch !important;
    gap: 2px !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-top-actions > * {
    display: inline-flex !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 28px !important;
    min-height: 28px !important;
    max-height: 28px !important;
    margin: 0 !important;
    padding: 0 3px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 8.5px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-net-pill {
    gap: 3px !important;
  }
  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-net-pill span {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
  }
  body[data-view="online-game"].online-one-screen:not(.online-expanded) .online-net-pill b {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Expanded: only the collapse button remains. */
  body[data-view="online-game"].online-one-screen.online-expanded .online-top-actions > * {
    display: none !important;
  }
  body[data-view="online-game"].online-one-screen.online-expanded #onlineExpandBtn {
    display: inline-flex !important;
    width: auto !important;
    min-width: 72px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 10px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}

/* v20260907_1938 — mobile online screens are mutually exclusive.
   main -> ready -> game. AI practice goes main -> game directly. */
@media (max-width: 1024px) {
  body[data-view="online-game"].online-one-screen .online-layout {
    position: relative !important;
  }

  /* Never allow legacy display:grid !important rules to make hidden stages visible. */
  body[data-view="online-game"].online-one-screen .online-layout > #onlineLobby.hidden,
  body[data-view="online-game"].online-one-screen .online-layout > #onlineMatchLobby.hidden,
  body[data-view="online-game"].online-one-screen .online-layout > #onlineArena.hidden {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="main"] #onlineLobby {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="main"] #onlineMatchLobby,
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="main"] #onlineArena {
    display: none !important;
  }

  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="ready"] #onlineMatchLobby {
    display: grid !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="ready"] #onlineLobby,
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="ready"] #onlineArena {
    display: none !important;
  }

  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="game"] #onlineArena {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="game"] #onlineLobby,
  body[data-view="online-game"].online-one-screen[data-online-mobile-stage="game"] #onlineMatchLobby {
    display: none !important;
  }
}