/* Online match reuses game.html's game-app, top-bar, main-stage, board,
   side-panel and control-bar. This file contains online-only UI states; the
   actual game layout is owned by style.css + arena-layout.css + game-chrome.css. */
body.arena-home { min-width:0; }

#onlineDialog.arena-game-dialog {
  position:fixed;inset:0;
  box-sizing:border-box;
  width:100vw;max-width:none;height:100dvh;max-height:none;
  margin:0;padding:0;border:0;border-radius:0;
  overflow-x:hidden;overflow-y:auto;
  color:#e9f2ff;background:#08152c;
  overscroll-behavior:contain;
}
#onlineDialog::backdrop { background:#050b15d9; }
#onlineDialog .online-game-app { width:100%!important;min-height:100dvh; }
#onlineDialog .online-match { display:flex;flex-direction:column;flex:1 0 auto;min-width:0;width:100%; }
#onlineDialog .online-match[hidden],
#onlineDialog #onlineMatchScoreboard[hidden] { display:none!important; }
#onlineDialog .online-match > .progress-track { flex:none; }
#onlineDialog .center-area > .board-heading[hidden] { display:none!important; }
#onlineDialog #onlineStatus {
  margin:0;padding:9px 14px;text-align:center;
  color:#c0d2e9;font:12px/1.45 Verdana,sans-serif;
}
#onlineDialog #onlineStatus[data-error="true"] { color:#ffc5b3; }
#onlineDialog:has(#onlineBoardWrapper:not([hidden])) #onlineStatus { display:none; }
#onlineDialog:has(#onlineBoardWrapper[hidden]) .timer-wrap,
#onlineDialog:has(#onlineBoardWrapper[hidden]) .bag-count { visibility:hidden; }
#onlineDialog .online-waiting { padding:28px 18px 48px;text-align:center;color:#d5e2f4; }
#onlineDialog .online-waiting p { margin:7px 0; }
#onlineDialog .online-waiting .online-cancel-search { margin-top:20px;min-height:46px;padding:10px 24px;white-space:normal; }

/* A read-only board must be just as bright as the local game. The generic
   button:disabled opacity would otherwise dim every cell on opponent turns. */
#onlineDialog #onlineBoard .cell:disabled {
  opacity:1;filter:none;cursor:default;
}

/* Scorecards occupy the same header positions as the local player's cards. */
#onlineDialog .game-header-score .match-scoreboard #onlinePlayer0Card { grid-column:1;grid-row:1; }
#onlineDialog .game-header-score .match-scoreboard #onlinePlayer1Card { grid-column:2;grid-row:1; }
#onlineDialog .game-header-score .match-scoreboard .player-card { flex-direction:column; }

/* Only the online client knows about reconnects, chat badges and result review. */
#onlineDialog .online-opponent-notice,
#onlineDialog .online-reconnect-notice {
  margin:5px 12px 9px;padding:9px 12px;border:1px solid #e7b15f;
  border-radius:8px;background:#422a23;color:#fff0cb;
  font:12px/1.45 Verdana,sans-serif;
}
#onlineDialog .online-reconnect-notice { display:flex;align-items:center;gap:9px;flex-wrap:wrap; }
#onlineDialog .online-reconnect-notice #onlineReconnectText { flex:1 1 190px; }
#onlineDialog .online-opponent-notice[hidden],
#onlineDialog .online-reconnect-notice[hidden] { display:none!important; }
#onlineDialog #onlineLastMoveReview {
  width:100%;padding:6px 8px;margin:4px 0;
  border:1px solid #35628c;border-radius:7px;color:#d3e4f7;
  font:12px/1.4 Verdana,sans-serif;
}
/* The chat list scrolls inside its card; it must never push the composer
   outside the sidebar as more messages arrive. Roughly ten short rows fit. */
#onlineDialog .right-side .chat-panel {
  box-sizing:border-box;min-height:0;
  max-height:min(515px,70dvh);overflow:hidden;
}
#onlineDialog .chat-panel > #onlinePanelChat {
  display:flex;flex-direction:column;min-width:0;min-height:0;
  max-height:100%;overflow:hidden;
}
#onlineDialog #onlineChat {
  flex:0 1 auto;min-height:0;min-width:0;
  max-height:min(400px,50dvh);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-right:0;
}
#onlineDialog .chat-messages .online-chat-line {
  box-sizing:border-box;flex:0 0 auto;min-height:33px;
  padding:6px 8px;border-radius:6px;border-left:2px solid #53b5ed;
  color:#e7f1ff;background:#29314680;overflow-wrap:anywhere;
}
#onlineDialog #onlineChatForm {
  display:flex;flex:0 0 auto;flex-wrap:nowrap;
  gap:6px;min-width:0;width:100%;box-sizing:border-box;
}
#onlineDialog #onlineChatInput {
  box-sizing:border-box;flex:1 1 auto;width:0;min-width:0;
  border:1px solid #49668a!important;
  outline:none!important;box-shadow:none!important;
}
#onlineDialog #onlineChatInput:focus,
#onlineDialog #onlineChatInput:focus-visible {
  border:2px solid #8ad5ff!important;
  outline:none!important;outline-offset:0;
  box-shadow:none!important;
}
#onlineDialog #onlineChatForm .gold-button {
  flex:0 0 auto;min-width:0;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
}
/* Uniform navigation actions, including the newly accessible Friends list. */
#onlineDialog .game-navigation .gold-button {
  box-sizing:border-box;display:inline-flex;
  justify-content:center;align-items:center;
  text-align:center;text-decoration:none;min-width:0;
}
#onlineDialog .online-unread-badge {
  display:inline-grid;place-items:center;min-width:21px;height:21px;
  margin-left:6px;padding:1px 5px;border-radius:99px;
  background:#c53747;color:white;font:700 12px Verdana,sans-serif;
}
#onlineDialog .online-unread-badge[hidden] { display:none!important; }
#onlineDialog .online-chat-toast {
  position:fixed;z-index:80;right:max(10px,env(safe-area-inset-right));
  top:clamp(120px,30dvh,310px);display:flex;align-items:center;gap:9px;
  width:max-content;max-width:min(275px,72vw);min-height:52px;padding:9px 10px;
  border:1px solid #d6ac65;border-radius:14px 0 0 14px;
  background:#15345c;color:#e6eef9;box-shadow:0 6px 23px #060c16cb;
  text-align:left;cursor:pointer;
}
#onlineDialog .online-chat-toast[hidden] { display:none!important; }
#onlineDialog .online-chat-toast-icon { font-size:24px; }
#onlineDialog .online-chat-toast-copy { display:flex;min-width:0;flex-direction:column;gap:2px; }
#onlineDialog .online-chat-toast-copy strong { font:700 12px Verdana,sans-serif; }
#onlineDialog .online-chat-toast-copy small { color:#b4c9e5;font:11px Verdana,sans-serif;overflow:hidden;white-space:nowrap;text-overflow:ellipsis; }
#onlineDialog .online-chat-toast-arrow { font-size:22px; }

@media (min-width:1101px), (min-width:900px) and (orientation:landscape) and (min-height:601px) {
  #onlineDialog .top-bar .game-navigation {
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    justify-self:stretch;align-items:stretch;width:100%;gap:4px;
  }
  #onlineDialog .top-bar .game-navigation .gold-button {
    width:100%;min-width:0;min-height:34px;
    padding:5px 2px;font-size:clamp(9px,.72vw,11px);white-space:nowrap;
  }
  #onlineDialog .game-header-score .match-scoreboard #onlinePlayer0Card {
    grid-column:2;grid-row:1 / span 2;align-self:center;
  }
  #onlineDialog .game-header-score .match-scoreboard #onlinePlayer1Card {
    grid-column:4;grid-row:1 / span 2;align-self:center;
  }
  #onlineDialog .game-header-score .match-scoreboard .player-card { flex-direction:row!important; }
  #onlineDialog .control-bar #onlineUndo,
  #onlineDialog .control-bar #onlineConfirm {
    width:100%;height:40px;min-width:0;border-radius:9px;
  }
  #onlineDialog .control-bar #onlineUndo { grid-column:1;grid-row:2; }
  #onlineDialog .control-bar #onlineConfirm { grid-column:2;grid-row:2; }
  #onlineDialog .control-bar .game-controls { flex-direction:column;align-items:stretch;width:100%;gap:5px; }
  #onlineDialog .control-bar .game-controls .gold-button {
    width:100%;min-width:0;min-height:38px;padding:5px 7px;font-size:12px;
  }
  #onlineDialog .control-bar .rack-frame { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto 40px;gap:6px;width:100%;padding:0; }
  #onlineDialog .control-bar .rack { grid-column:1/-1;grid-row:1;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:48px;gap:clamp(2px,.5vw,8px);padding:3px; }
  #onlineDialog .control-bar .tile { flex:0 1 clamp(36px,3vw,54px);width:clamp(36px,3vw,54px);height:40px;font-size:24px; }
}

@media (max-width:1100px) and (orientation:portrait), (max-width:740px) {
  #onlineDialog #onlineStatus,
  #onlineDialog .online-waiting,
  #onlineDialog .online-reconnect-notice,
  #onlineDialog .online-opponent-notice { grid-column:1/-1; }
  #onlineDialog .online-match {
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    grid-column:1/-1;
    grid-auto-rows:max-content;align-content:start;
  }
  #onlineDialog .online-match > .progress-track { grid-column:1/-1;grid-row:1; }
  #onlineDialog .online-match .center-area { grid-column:1/-1;grid-row:2; }
  #onlineDialog .online-match .control-bar { grid-column:1/-1;grid-row:3; }
  #onlineDialog .online-match .status-panel { grid-column:1/-1;grid-row:4; }
  #onlineDialog .online-match .chat-panel { grid-column:1/-1;grid-row:5;margin-bottom:12px; }
  #onlineDialog .online-game-app .top-bar .game-header-score .match-scoreboard .player-card {
    flex-direction:column!important;
  }
}

@media (max-width:840px) and (orientation:portrait), (max-width:700px) {
  #onlineDialog .online-match .game-message { display:none; }
  #onlineDialog .online-match .mobile-game-message { display:block; }
  #onlineDialog .online-match .mobile-game-message[data-error="true"] { color:#ffc5b3;border-color:#f4937d; }
}

@media (min-width:700px) and (max-width:1100px) and (orientation:portrait) and (pointer:coarse) {
  #onlineDialog .control-bar { display:grid!important;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)!important;grid-template-rows:auto;gap:6px; }
  #onlineDialog .control-bar .rack-frame { grid-column:2;grid-row:1; }
  #onlineDialog .control-bar .game-controls { display:contents!important; }
  #onlineDialog .control-bar #onlineExchange { grid-column:1;grid-row:1; }
  #onlineDialog .control-bar #onlinePass { grid-column:3;grid-row:1; }
  #onlineDialog .control-bar .game-controls .gold-button { width:100%;min-width:0;height:44px;padding:4px 5px;font-size:12px;white-space:normal; }
}

@media (orientation:landscape) and (max-width:1100px) and (max-height:600px) and (pointer:coarse) {
  #onlineDialog .online-match { display:flex;flex-direction:column; }
  #onlineDialog .control-bar { display:grid!important;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr)!important;grid-template-rows:auto;gap:6px; }
  #onlineDialog .control-bar .rack-frame { grid-column:2;grid-row:1; }
  #onlineDialog .control-bar .game-controls { display:contents!important; }
  #onlineDialog .control-bar #onlineExchange { grid-column:1;grid-row:1; }
  #onlineDialog .control-bar #onlinePass { grid-column:3;grid-row:1; }
  #onlineDialog .control-bar .game-controls .gold-button { width:100%;min-width:0;min-height:42px;white-space:normal; }
}