.online-panel { display: flex; flex-direction: column; height: calc(100dvh - 32px); min-height: 600px; border-radius: 5px; background: #262520; min-width: 0; }
.online-tabs { display: grid; grid-template-columns: repeat(3,1fr); height: 57px; flex: 0 0 auto; }
.online-tabs button { color: #aaa79f; border: 0; background: #22211d; display: grid; justify-items: center; align-content: center; gap: 3px; cursor: pointer; font-size: 11px; }
.online-tabs span { font-size: 23px; line-height: 1; }.online-tabs button[aria-selected="true"] { color: white; background: #2b2924; }
.lobby-pane { padding: 24px 33px; flex: 1; overflow: auto; }
.time-choice, .online-start, .online-secondary .btn { width: 100%; cursor: pointer; }
.time-choice { min-height: 56px; font-size: 19px; display: flex; align-items: center; justify-content: center; gap: 7px; }.time-choice > span:last-child { margin-left: auto; color: #aaa; }
.online-start { margin-top: 8px; min-height: 56px; font-size: 21px; }
.online-secondary { display: grid; gap: 8px; margin-top: 25px; }.online-secondary .btn { display: flex; align-items: center; justify-content: center; min-height: 55px; font-size: 16px; }
.join-code { display: flex; gap: 6px; margin-top: 20px; }.join-code input { min-width: 0; width: 100%; background: #37352f; border: 1px solid #57534a; border-radius: 5px; color: white; padding: 8px; font-size: 13px; text-transform: uppercase; }
.join-code .btn { min-height: 36px; padding: 0 10px; font-size: 12px; cursor: pointer; }
.online-totals { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 6px; padding: 12px; color: #969288; font-size: 10px; margin-top: auto; }.online-totals b { color: #e9e5dd; }
.online .player-card small { display: none; }.online .player-card { flex-wrap: nowrap; min-height: 50px; }
.online .clock { display: block !important; font-size: 24px; font-weight: 650; min-width: 105px; text-align: center; border-radius: 0; }
.online .player-icon { background: #77756d; border-radius: 0; }.online #human-clock { background: #e8e6df; color: #706b60; }
.online #bot-clock { color: #aaa69c; }.online .clock.running { color: #23221e !important; background: #f4f2eb !important; }
.online-match-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.match-opponent { padding: 18px 15px; display: flex; gap: 7px; align-items: center; }
.match-opponent > span { display: grid; place-items: center; font-size: 30px; width: 40px; height: 40px; background: #47433a; }.match-opponent strong { font-size: 14px; }.match-opponent small { margin-left: auto; font-size: 11px; color: #bcb6aa; }
.online-match-pane .moves { min-height: 110px; max-height: none; }
.chat-messages { max-height: 150px; min-height: 50px; overflow: auto; padding: 8px 13px; border-top: 1px solid #ffffff0e; font-size: 12px; color: #d0c9bd; }
.chat-messages p { margin: 4px 0; overflow-wrap: anywhere; }.chat-messages strong { color: #aaa38f; font-size: 11px; margin-right: 5px; }
#chat-form { display: flex; border-top: 1px solid #454137; padding: 7px 10px; }
#chat-form input { min-width: 0; flex: 1; background: transparent; border: 0; color: #e9e5dd; font: inherit; font-size: 12px; outline: none; }
#chat-form button { border: 0; background: transparent; color: #ccc6b8; cursor: pointer; }
.waiting-pane { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 35px 20px; text-align: center; gap: 17px; }
.waiting-pane h2 { font-size: 23px; }.waiting-pane p { color: #c5bfae; font-size: 13px; line-height: 1.6; }
.search-spinner { width: 50px; height: 50px; margin: 35px auto 5px; border: 5px solid #51523e; border-top-color: #9ac259; border-radius: 50%; animation: search-spin 1s linear infinite; }
@keyframes search-spin { to { transform: rotate(360deg); } }
.waiting-pane .btn { padding: 0 20px; cursor: pointer; }.waiting-pane #invite-controls { display: grid; gap: 12px; width: 100%; }
#invite-link { width: 100%; padding: 9px; color: #e8e4da; background: #35332c; border: 1px solid #575349; border-radius: 5px; font-size: 12px; }
.online-error { font-size: 12px; color: #ffb0a0; padding: 10px 13px; line-height: 1.5; }
.draw-notice { padding: 13px; background: #4b523b; font-size: 12px; }.draw-notice .btn { min-height: 32px; margin: 8px 4px 0 0; padding: 0 15px; cursor: pointer; }
.end-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }.end-actions .btn { min-height: 46px; cursor: pointer; font-size: 15px; display: grid; place-items: center; }
.online .secondary-tools button:nth-last-child(2) { margin-left: auto; }
#time-dialog, #challenge-dialog, #online-auth-dialog { border: 1px solid #4e4a40; background: #292721; border-radius: 9px; color: #f1ece2; padding: 22px; width: min(420px,calc(100% - 26px)); }
#time-dialog h2, #challenge-dialog h2, #online-auth-dialog h2 { font-size: 24px; text-align: center; margin-bottom: 20px; }
#time-dialog .btn { width: 100%; margin-top: 18px; cursor: pointer; }.time-category h2 { text-align: left !important; margin: 13px 0 7px !important; font-size: 14px !important; }
#challenge-time { text-align: center; margin-bottom: 20px; color: #b8c79a; }
.challenge-sides { border: 0; padding: 0; display: flex; justify-content: space-between; margin: 16px 0 24px; }.challenge-sides legend { font-size: 13px; margin-bottom: 10px; color: #bcb6a9; }.challenge-sides label { font-size: 14px; }
#challenge-form > label { font-size: 13px; color: #c8c1b3; }#challenge-form input { accent-color: #8bbb54; }
#challenge-dialog .dialog-actions { padding: 20px 0 0; background: none; gap: 8px; }
#online-auth-dialog { text-align: center; position: fixed; padding-top: 32px; }
#online-auth-dialog p { font-size: 14px; color: #c9c3b7; line-height: 1.6; margin: 20px 0; }
.online-auth-art { font-size: 65px; color: #a8ca70; padding: 15px 0; }
#online-auth-dialog .btn { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 10px; font-size: 15px; min-height: 52px; }
#online-auth-dialog .text-button { margin-top: 18px; }
#games-pane h2,#players-pane h2 { font-size: 17px; margin: 0 0 15px; }
.game-entry,.online-player { display: flex; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid #ffffff0c; font-size: 12px; }
.game-entry { flex-direction: column; align-items: start; }.game-entry small { color: #b5ad9d; }.online-player span { flex: 1; min-width: 0; overflow-wrap: anywhere; }.online-player .btn { min-height: 30px; padding: 0 8px; font-size: 11px; cursor: pointer; }
#watch-list, #player-list { margin-bottom: 25px; }
@media(max-width:730px) {
  .online-panel { height: auto; min-height: 510px; }.lobby-pane { padding: 22px; }
  .online .clock { font-size: 19px; min-width: 83px; }.online .game-status { font-size: 11px; }
  .online-match-pane .moves { max-height: 200px; }.online .board-gear { font-size: 16px; }
}
#online-moves button,#review-moves button { padding: 0 5px; color: #dfdad0; background: transparent; border: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
#online-moves button:disabled { cursor: default; }#online-moves button.current-ply,#review-moves button.current-ply { background: #ffffff1b; border-radius: 4px; }
.analysis .clock,.analysis #thinking,.analysis .player-card small { display: none !important; }
.analysis-panel .eval-panel { margin: 0; }.analysis-panel .engine-state { padding: 10px 13px; font-size: 11px; }
.review-summary { padding: 16px; font-size: 13px; color: #d1cabb; }
.review-controls { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 12px; }.review-controls .btn { cursor: pointer; font-size: 24px; }
.review-actions { display: flex; gap: 8px; padding: 0 12px 12px; }.review-actions .btn { flex: 1; font-size: 13px; cursor: pointer; }
.review-import { padding: 10px 13px; font-size: 12px; color: #bdb6a8; }.review-import summary { cursor: pointer; }.review-import textarea { display: block; width: 100%; height: 90px; margin: 10px 0; background: #35322b; color: white; border: 1px solid #575245; border-radius: 6px; padding: 8px; }.review-import .btn { min-height: 34px; width: 100%; cursor: pointer; }
.analysis-panel .credits { margin: 10px 13px; }