#replay-view .replay-series-card {
  margin-top: 14px;
  padding: 14px 18px 12px;
  border: 1px solid #dce6df;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 20px rgba(23, 35, 29, .03);
}
#replay-view .replay-series-card .replay-players { display: flex; width: min(100%, 560px); align-items: center; justify-content: center; gap: 12px; margin: 0 auto; padding: 0; border: 0; }
#replay-view .replay-series-card .replay-player-identity { display: grid; flex: 1 1 0; min-width: 0; padding: 6px 10px; border: 0; background: transparent; box-shadow: none; }
#replay-view .replay-series-card .replay-player-a-label { border: 2px solid #dce6df; border-left-width: 4px; border-radius: 10px; background: #fbfdfb; }
#replay-view .replay-series-card .replay-player-b-label { border: 2px solid #dce6df; border-right-width: 4px; border-radius: 10px; background: #fbfdfb; }
#replay-view .replay-series-card .replay-player-identity.is-current-side-a { border-color: var(--color-player-a); background: rgba(29, 78, 216, .045); }
#replay-view .replay-series-card .replay-player-identity.is-current-side-b { border-color: var(--color-player-b); background: rgba(194, 65, 12, .045); }
#replay-view .replay-series-card .replay-player-name { font-size: .9rem; font-weight: 750; }
#replay-view .replay-series-card .replay-player-score { min-width: 38px; height: 38px; border: 0; border-radius: 9px; background: #f2f6f3; box-shadow: none; font-size: 1.18rem; }
#replay-view .replay-series-card .replay-versus { color: #25342c; font-size: 1rem; font-weight: 800; }
#replay-series-slot:empty { display: none; }
#replay-series-slot #replay-series-controls { justify-content: center; width: fit-content; max-width: 100%; margin: 10px auto 0; padding: 0; border: 0; background: transparent; }
#replay-series-slot #replay-series-controls::before { display: none; }
#replay-series-slot #replay-series-controls .secondary-btn { min-width: 62px; padding: 8px 12px; text-align: center; }
#replay-view .replay-layout { grid-template-columns: minmax(0, 1.55fr) minmax(280px, .65fr); gap: 16px; margin-top: 14px; align-items: stretch; }
#replay-view .replay-board-panel,
#replay-view .replay-timeline-panel { padding: 16px; border: 1px solid #dce6df; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px rgba(23, 35, 29, .03); }
#replay-view .replay-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
#replay-view .replay-panel-heading h3 { margin: 0; color: #1b2921; font-size: .95rem; letter-spacing: -.01em; }
#replay-view .replay-panel-count { display: inline-flex; min-height: 24px; align-items: center; padding: 4px 9px; border-radius: 999px; background: #f0f3f1; color: #3f4d45; font-size: .68rem; font-weight: 700; white-space: nowrap; }
#replay-view .replay-board-wrap { width: min(100%, 520px); max-width: 520px; margin: 0 auto 10px; }
#replay-view .replay-current-move { min-height: 0; margin: 8px 0 4px; padding: 7px 10px; border-left: 3px solid #b8c8bc; border-radius: 5px; background: #f7faf8; color: #68766e; font-size: .72rem; }
#replay-view .replay-current-move-a { border-left-color: #7eaef0; background: #f1f6ff; color: #245fae; }
#replay-view .replay-current-move-b { border-left-color: #ed9a75; background: #fff5ef; color: #a7431c; }
#replay-view .replay-scrubber-label { margin-top: 8px; }
#replay-view .replay-controls { position: relative; justify-content: center; padding-top: 12px; }
#replay-view .replay-play { flex-basis: 40px; min-width: 40px; }
#replay-view .replay-play .replay-control-label { display: none; }
#replay-view .replay-speed-label { position: absolute; right: 0; margin-left: 0; }
#replay-view .replay-timeline-panel h3::after { display: none; content: none; }
#replay-view:not(.live-match-view) .replay-selected-move { display: none; }
#replay-view .replay-timeline { max-height: 430px; margin-top: 0; gap: 9px; }
#replay-view .replay-move { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; padding: 12px; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; }
#replay-view .replay-move::before { display: none; }
#replay-view .replay-move-number { color: #7d8982; font-size: .68rem; font-variant-numeric: tabular-nums; }
#replay-view .replay-move-player { max-width: 132px; overflow: hidden; padding: 4px 8px; border-radius: 999px; font-size: .68rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
#replay-view .replay-move-player-a { background: #e5f0ff; color: #2563c7; }
#replay-view .replay-move-player-b { background: #ffebe2; color: #c34b1b; }
#replay-view .replay-move-path { min-width: 0; overflow: hidden; color: #27362e; font-size: .76rem; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
#replay-view .replay-move-side-a { border-left: 3px solid #7eaef0; }
#replay-view .replay-move-side-b { border-left: 3px solid #ed9a75; }
#replay-view .replay-details { grid-template-columns: 1fr; gap: 2px; margin-top: 16px; padding-top: 14px; border-top: 1px solid #e4ebe6; }
#replay-view .replay-detail { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; border: 0; background: transparent; }
#replay-view .replay-detail small { margin: 0; text-transform: none; letter-spacing: 0; }
@media (max-width: 900px) {
  #replay-view .replay-layout { grid-template-columns: 1fr; }
  #replay-view .replay-board-wrap { width: min(100%, 580px); max-width: 580px; }
}
@media (max-width: 600px) {
  #replay-view .replay-heading-row,
  #replay-view .replay-header-subline { align-items: flex-start; }
  #replay-view .replay-series-card .replay-players { gap: 4px; }
  #replay-view .replay-series-card .replay-player-identity { padding: 5px; }
  #replay-view .replay-series-card .replay-player-bot,
  #replay-view .replay-series-card .replay-player-pieces { display: none; }
  #replay-view .replay-speed-label { position: static; width: 100%; margin: 4px 0 0; }
}

/* ==================== EXTRACTED: Match Replay Viewer ==================== */
/* Phase 4: replay viewer */
    .replay-header {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: end;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--border-light);
    }

    .replay-header h2 {
      margin-top: 6px;
    }

    .replay-result {
      max-width: 360px;
      color: #16803c;
      font-weight: 700;
      text-align: right;
      overflow-wrap: anywhere;
    }

    .replay-loading {
      margin-top: 22px;
      padding: 48px 20px;
      border: 1px solid var(--border-light);
      border-radius: 15px;
      background: #fff;
      color: var(--text-secondary);
      text-align: center;
    }

    .is-loading-skeleton {
      position: relative;
      overflow: hidden;
    }
    .is-loading-skeleton::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.62) 45%, transparent 65%);
      transform: translateX(-100%);
      animation: skeleton-shimmer 1.35s ease-in-out infinite;
    }
    .loading-skeleton-card {
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr);
      align-content: center;
      gap: 8px 11px;
      min-height: 166px;
      padding: 20px;
      border: 1px solid #e1e9e3;
      border-radius: 14px;
      background: #fff;
    }
    .loading-skeleton-avatar,
    .loading-skeleton-line {
      display: block;
      border-radius: 7px;
      background: linear-gradient(90deg, #e8efea 0%, #f5f8f5 50%, #e8efea 100%);
      background-size: 220% 100%;
      animation: skeleton-pulse 1.2s ease-in-out infinite;
    }
    .loading-skeleton-avatar { grid-row: 1 / span 3; width: 38px; height: 38px; border-radius: 10px; }
    .loading-skeleton-line { height: 10px; }
    .loading-skeleton-line-title { width: 58%; height: 13px; }
    .loading-skeleton-line-wide { width: 92%; }
    .loading-skeleton-line-short { width: 64%; }
    .loading-skeleton-card.tournament-skeleton { min-height: 148px; }
    .loading-skeleton-row td { height: 54px; padding: 12px 16px; border-bottom: 1px solid #e5ebe6; }
    .loading-skeleton-row .loading-skeleton-line { width: 76%; height: 11px; }
    @keyframes skeleton-shimmer { to { transform: translateX(100%); } }
    @keyframes skeleton-pulse { 0%, 100% { opacity: .72; background-position: 100% 0; } 50% { opacity: 1; background-position: 0 0; } }

    .bot-grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
      align-items: start;
      justify-content: start;
      gap: 18px;
    }

    .bot-card {
      padding: 22px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(23, 35, 29, .04);
    }

    .bot-card-title {
      color: #17231d;
      font-size: 1.08rem;
      line-height: 1.3;
    }

    .bot-card-id {
      max-width: 180px;
      margin-top: 6px;
      color: #87958c;
      font-size: .62rem;
      opacity: .82;
    }

    .bot-config {
      gap: 13px;
      margin: 20px 0;
      padding: 14px;
      border: 1px solid #e3ebe5;
      border-radius: 9px;
      background: #f8faf8;
    }

    .bot-config-row>span {
      color: #66736b;
      font-size: .68rem;
      letter-spacing: .04em;
    }

    .bot-config-row code {
      color: #26372d;
      font-size: .78rem;
      line-height: 1.55;
      overflow-wrap: anywhere;
    }

    .bot-card-footer small {
      color: #66736b;
      font-size: .72rem;
    }

    .bot-delete {
      border-color: #e4c4c0;
      color: #9e3026;
    }

    .bot-delete:hover,
    .bot-delete:focus-visible {
      border-color: #c96d64;
      background: #fff5f3;
      color: #84251e;
    }

    .delete-bot-message {
      margin: 0 0 8px;
      color: #17231d;
      font-size: 1rem;
      line-height: 1.45;
    }

    .delete-bot-message strong {
      overflow-wrap: anywhere;
    }

    .tournaments-workspace-header h2 {
      margin-bottom: 7px;
      font-size: clamp(1.6rem, 3vw, 2rem);
    }

    .tournaments-workspace-header>div>p:last-child {
      margin-top: 0;
      color: #5d6c63;
      font-size: .94rem;
    }

    .tournament-grid {
      grid-template-columns: repeat(auto-fill, minmax(300px, 360px));
      align-items: start;
      justify-content: start;
      gap: 18px;
    }

    .tournament-grid .ui-message {
      min-height: 190px;
      max-width: 560px;
      margin: 0 auto;
      padding: 30px 24px;
      border: 1px solid #dfe7e1;
      border-radius: 12px;
      background: #fff;
      text-align: center;
    }

    .tournament-card {
      padding: 22px;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(23, 35, 29, .04);
    }

    .tournament-card>div:first-child {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .tournament-card h3 {
      min-width: 0;
      color: #17231d;
      font-size: 1.05rem;
      line-height: 1.35;
    }

    .tournament-card-meta {
      color: #5d6c63;
      font-size: .8rem;
    }

    .tournament-card-id {
      max-width: 170px;
      overflow: hidden;
      color: #87958c;
      font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
      font-size: .62rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tournament-next-step {
      display: grid;
      gap: 5px;
      margin-top: 18px;
      padding: 15px 18px;
      border-left: 3px solid #8fc3a0;
      background: #f7faf7;
    }

    .tournament-next-step strong {
      color: #176b4d;
      font-size: .8rem;
    }

    .tournament-next-step p {
      margin: 0;
      color: #536259;
      font-size: .88rem;
      line-height: 1.5;
    }

    .tournament-next-step-cancelled {
      border-left-color: #9aa79f;
      background: #f5f6f5;
    }

    .tournament-next-step-cancelled strong {
      color: #526058;
    }

    .detail-empty {
      padding: 18px 0 4px;
      color: #5d6c63;
      font-size: .88rem;
    }

    .tournament-action {
      width: auto;
      min-width: 0;
      padding: 9px 13px;
      font-size: .78rem;
    }

    .tournament-action-danger {
      border-color: #e4c4c0;
      color: #9e3026;
    }

    .tournament-action-danger:hover,
    .tournament-action-danger:focus-visible {
      border-color: #c96d64;
      background: #fff5f3;
      color: #84251e;
    }

    #add-tourney-modal .modal-head h4 {
      color: #17231d;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.02em;
      text-transform: none;
    }

    #add-tourney-modal .dialog-copy {
      margin-top: -5px;
      margin-bottom: 22px;
      color: #5d6c63;
      font-size: .9rem;
    }

    #add-tourney-modal .form-group label {
      color: #34433a;
      font-size: .82rem;
      font-weight: 650;
    }

    #add-tourney-modal .input-shell {
      display: block;
      width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid #b8c8bc;
      border-radius: 8px;
      background: #fff;
      color: #17231d;
      font: inherit;
      outline: none;
    }

    #add-tourney-modal .input-shell:focus {
      border-color: #176b4d;
      box-shadow: 0 0 0 3px rgba(23, 107, 77, .13);
    }

    .replay-error-panel {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-top: 22px;
      padding: 15px 18px;
      border: 1px solid #fecaca;
      border-radius: 12px;
      background: #fff7f7;
      color: #991b1b;
    }

    .replay-error-panel .secondary-btn {
      width: auto;
      flex: 0 0 auto;
    }

    .replay-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(290px, .38fr);
      gap: 20px;
      margin-top: 22px;
      align-items: start;
    }

    .replay-board-panel,
    .replay-timeline-panel {
      min-width: 0;
      padding: 22px;
      border: 1px solid var(--border-light);
      border-radius: 15px;
      background: #fff;
    }

    .replay-timeline-panel {
      position: sticky;
      top: 22px;
      padding: 20px;
    }

    .replay-players {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: var(--text-secondary);
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .06em;
    }

    .replay-current-move {
      min-height: 1.2em;
      margin-top: 10px;
      color: var(--text-secondary);
      font-size: .78rem;
      text-align: center;
    }

    .replay-player-a,
    .replay-player-b {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .replay-board-wrap {
      width: min(100%, 650px);
      max-width: 650px;
      margin: 18px auto 22px;
    }

    .coord-header {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      margin-left: 26px;
      color: var(--text-faint);
      font-size: .7rem;
      text-align: center;
    }

    .replay-board-row {
      display: grid;
      grid-template-columns: 26px minmax(0, 1fr);
    }

    .coord-side {
      display: grid;
      grid-template-rows: repeat(9, 1fr);
      color: var(--text-faint);
      font-size: .7rem;
      text-align: center;
      align-items: center;
    }

    .replay-board {
      display: grid;
      grid-template-columns: repeat(9, minmax(0, 1fr));
      grid-template-rows: repeat(9, minmax(0, 1fr));
      width: 100%;
      box-sizing: border-box;
      border: 2px solid #b8c8bc;
      border-radius: 3px;
      overflow: hidden;
      background: #f8fbf8;
      aspect-ratio: 1 / 1;
    }

    .replay-cell {
      display: grid;
      place-items: center;
      min-width: 0;
      min-height: 0;
      position: relative;
      box-sizing: border-box;
      aspect-ratio: 1 / 1;
      border: 1px solid #dfe8e1;
      background: #fbfdfb;
      transition: background .15s;
    }

    .replay-cell:nth-child(odd) {
      background: #f2f7f3;
    }

    .replay-cell.goal {
      background: #effaf2;
    }

    .replay-cell.move-from {
      background: #fef3c7;
    }

    .replay-cell.move-to {
      background: #dcfce7;
      box-shadow: inset 0 0 0 2px #16803c;
    }

    .replay-piece {
      display: grid;
      place-items: center;
      width: min(76%, 42px);
      box-sizing: border-box;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .9);
      color: #fff;
      line-height: 0;
      font-size: clamp(.58rem, 1.7vw, .85rem);
      font-weight: 900;
      box-shadow: 0 2px 5px rgba(23, 35, 29, .16);
    }

    .replay-player-a {
      background: #16803c;
    }

    .replay-player-b {
      background: #475569;
    }

    .replay-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 7px;
      padding-top: 15px;
      border-top: 1px solid #e4ebe6;
    }

    .replay-controls .icon-btn,
    .replay-play {
      width: auto;
      min-width: 52px;
      min-height: 40px;
      padding: 8px 11px;
      font-size: .78rem;
    }

    .replay-step {
      min-width: 64px;
      text-align: center;
      font-weight: 800;
    }

    .replay-speed-label {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--text-secondary);
      font-size: .72rem;
    }

    .replay-speed-label select {
      padding: 6px;
      border: 1px solid var(--border-light);
      border-radius: 7px;
      background: #fff;
    }

    .replay-timeline-panel h3 {
      margin-bottom: 5px;
      color: #17231d;
      font-size: 1.05rem;
    }

    .replay-details {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 9px;
      margin-top: 18px;
    }

    .replay-detail {
      min-width: 0;
      padding: 11px 12px;
      border-radius: 10px;
      background: var(--bg-soft);
    }

    .replay-detail small {
      display: block;
      margin-bottom: 4px;
      color: var(--text-faint);
      font-size: .65rem;
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .replay-detail strong {
      display: block;
      overflow-wrap: anywhere;
      font-size: .78rem;
    }

    .replay-timeline {
      display: grid;
      gap: 7px;
      max-height: 620px;
      overflow: auto;
    }

    .replay-move {
      width: 100%;
      padding: 10px;
      border: 1px solid var(--border-light);
      border-radius: 8px;
      background: #fff;
      color: var(--text-secondary);
      text-align: left;
      font-size: .75rem;
      overflow-wrap: anywhere;
    }

    .replay-move:hover,
    .replay-move.active {
      border-color: #16803c;
      background: #effaf2;
      color: #11652f;
    }

    @media (max-width:760px) {
      .replay-header {
        align-items: start;
        flex-direction: column;
      }

      .replay-result {
        text-align: left;
      }

      .replay-layout {
        grid-template-columns: 1fr;
      }

      .replay-match-header {
        gap: 14px;
      }

      .replay-result {
        width: 100%;
        box-sizing: border-box;
      }

      .replay-board-panel {
        padding: 14px;
      }

      .replay-board-wrap {
        margin-top: 14px;
      }

      .replay-controls {
        justify-content: center;
      }

      .replay-controls .icon-btn,
      .replay-play {
        flex: 1 1 42px;
        min-width: 0;
      }

      .replay-speed-label {
        flex: 1 0 100%;
        justify-content: center;
        margin: 4px 0 0;
      }

      .replay-timeline-panel {
        position: static;
      }

      .replay-board-panel,
      .replay-timeline-panel {
        padding: 15px;
      }

      .replay-timeline {
        max-height: 260px;
      }

      .replay-controls {
        justify-content: flex-start;
      }

      .replay-error-panel {
        align-items: flex-start;
        flex-direction: column;
      }

      .replay-error-panel .secondary-btn {
        width: 100%;
      }

      .replay-details {
        grid-template-columns: 1fr;
      }
    }

    /* Replay refinement: keep the board dominant and the move history usable. */
    #replay-view {
      max-width: none;
      margin-left: 232px;
      margin-right: 0;
      width: calc(100% - 232px);
      box-sizing: border-box;
    }
    #replay-view .replay-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 18px;
      align-items: stretch;
      padding-bottom: 24px;
    }
    #replay-view .replay-result {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(680px, 100%);
      min-height: 66px;
      margin: 2px auto 0;
      padding: 16px 24px;
      box-sizing: border-box;
      border: 1px solid #cce4d4;
      border-radius: 16px;
      background: linear-gradient(135deg, #f2fbf5 0%, #ffffff 52%, #edf8f1 100%);
      color: #145c3e;
      font-size: clamp(.95rem, 1.5vw, 1.18rem);
      font-weight: 800;
      letter-spacing: .01em;
      line-height: 1.35;
      text-align: center;
      box-shadow: 0 10px 28px rgba(23, 107, 80, .09), inset 0 1px 0 rgba(255,255,255,.9);
      overflow-wrap: anywhere;
      position: relative;
    }

    /* Replay đã hiển thị tỉ số ngay trong hai khung đội; chỉ live mới cần dòng trạng thái này. */
    #replay-view:not(.live-match-view) #r-result-text {
      display: none;
    }

    #replay-view .replay-detail:has(#r-winner),
    #replay-view .replay-detail:has(#r-termination) {
      display: none;
    }
    #replay-view .replay-result::before {
      content: '';
      width: 7px;
      height: 7px;
      margin-right: 10px;
      flex: 0 0 7px;
      border-radius: 50%;
      background: #1d9b65;
      box-shadow: 0 0 0 5px rgba(29, 155, 101, .12);
    }
    #replay-view .replay-layout {
      grid-template-columns: minmax(0, 1.9fr) minmax(320px, .82fr);
      gap: 22px;
      margin-top: 20px;
    }
    #replay-view .replay-board-panel,
    #replay-view .replay-timeline-panel {
      border-color: #dce7df;
      border-radius: 14px;
      box-shadow: 0 8px 24px rgba(23, 35, 29, .035);
    }
    #replay-view .replay-board-panel { padding: 22px 24px 20px; }
    #replay-view .replay-timeline-panel { padding: 20px; }
    #replay-view .replay-players {
      align-items: stretch;
      gap: 16px;
      padding: 0 0 16px;
      font-size: .78rem;
    }
    #replay-view .replay-player-identity {
      display: grid;
      flex: 1 1 0;
      gap: 5px;
      min-width: 0;
      padding: 12px 14px;
      border: 1px solid #e1eae3;
      border-radius: 10px;
      background: #fbfdfb;
    }
    #replay-view .replay-player-a-label {
      border-color: var(--color-player-a);
    }
    #replay-view .replay-player-b-label {
      border-color: var(--color-player-b);
    }
    #replay-view .replay-player-identity.is-turn {
      box-shadow: 0 0 0 2px currentColor, 0 6px 16px rgba(23, 35, 29, .08);
    }
    #replay-view .replay-player-a-label.is-turn {
      color: var(--color-player-a);
    }
    #replay-view .replay-player-b-label.is-turn {
      color: var(--color-player-b);
    }
    #replay-view .replay-player-name {
      color: #172b20;
      font-size: .98rem;
      font-weight: 750;
      letter-spacing: -.01em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #replay-view .replay-player-bot {
      color: #6e7c73;
      font-size: .76rem;
      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #replay-view .replay-player-pieces {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
    }
    #replay-view .replay-piece-count {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      color: #6e7c73;
      font-size: .72rem;
      white-space: nowrap;
    }
    #replay-view .replay-piece-count .replay-count-icon {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #475569;
    }
    #replay-view .replay-piece-count-separator {
      color: #a5b1a9;
      font-size: .7rem;
    }
    #replay-view .replay-versus {
      align-self: center;
      flex: 0 0 auto;
      color: #9aa69e;
      font-size: .72rem;
      font-weight: 800;
    }
    #replay-view .replay-board-wrap {
      width: min(100%, 700px);
      max-width: 700px;
      margin: 18px auto 20px;
    }
#replay-view .coord-header {
  box-sizing: border-box;
  width: calc(100% - 28px);
  margin-left: 28px;
  padding-inline: 0;
}
#replay-view .coord-header .coord {
  width: auto;
  min-width: 0;
  box-sizing: border-box;
}
#replay-view .coord-side {
  padding-block: 2px;
}
#replay-view .coord-side .coord {
  width: auto;
  min-width: 0;
  box-sizing: border-box;
}
    #replay-view .replay-controls {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding-top: 16px;
    }
    #replay-view .replay-control {
      display: inline-flex;
      flex: 0 0 40px;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 40px;
      min-height: 40px;
      padding: 8px 10px;
      border-radius: 8px;
    }
    #replay-view .replay-play {
      flex-basis: 92px;
      min-width: 92px;
      color: #fff;
      background: #176b50;
      border-color: #176b50;
    }
    #replay-view .replay-play:hover,
    #replay-view .replay-play:focus-visible { background: #12563f; border-color: #12563f; }
    #replay-view .replay-control .ui-icon { width: 25px; height: 25px; }
    #replay-view .replay-step { flex: 0 0 72px; min-width: 72px; font-variant-numeric: tabular-nums; text-align: center; }
    #replay-view .replay-speed-label { flex: 0 0 auto; margin-left: 4px; white-space: nowrap; }
    #replay-view .replay-timeline-panel { min-height: 0; }
    #replay-view .replay-timeline-panel h3 { margin: 0; font-size: 1rem; }
    #replay-view .replay-timeline {
      max-height: min(480px, 52vh);
      margin-top: 14px;
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
    }
    #replay-view .replay-move {
      display: block;
      width: 100%;
      min-height: 42px;
      text-align: left;
      font-variant-numeric: tabular-nums;
    }
    #replay-view .replay-details { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #replay-series-controls { display:flex; align-items:center; gap:8px; max-width:100%; margin:0 0 14px; padding:9px 11px; overflow-x:auto; border:1px solid #dfe8e1; border-radius:11px; background:#fbfdfb; scrollbar-width:thin; }
    #replay-series-controls::before { content:'Các ván'; flex:0 0 auto; color:#7b8980; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    #replay-series-controls .secondary-btn { width:auto; min-width:max-content; flex:0 0 auto; margin:0; padding:7px 10px; border:1px solid #d7e3da; border-radius:8px; background:#fff; color:#53645a; font-size:.74rem; white-space:nowrap; box-shadow:none; }
    #replay-series-controls .secondary-btn:hover { border-color:#9fc7ab; background:#f3faf5; color:#176b50; }
    #replay-series-controls .secondary-btn.active { border-color:#176b50; background:#e8f5ed; color:#176b50; font-weight:750; }
    #replay-view .replay-detail { min-width: 0; padding: 10px 11px; }
    #replay-view .replay-detail small { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; }
    #replay-view .replay-detail strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #replay-view .replay-match-id-value { display: flex; align-items: center; gap: 6px; min-width: 0; }
    #replay-view .replay-match-id-value strong { flex: 1 1 auto; min-width: 0; }
    #replay-view .replay-copy-id { flex: 0 0 auto; width: 30px; min-height: 30px; padding: 5px; }
    #replay-view .replay-copy-id .ui-icon { width: 25px; height: 25px; }

    @media (max-width: 900px) {
      #replay-view .replay-layout { grid-template-columns: minmax(0, 1fr); }
      #replay-view .replay-timeline-panel { position: static; }
      #replay-view .replay-timeline { max-height: 300px; }
    }

    @media (max-width: 600px) {
      #replay-view .replay-header { align-items: stretch; flex-direction: column; gap: 14px; }
      #replay-view .replay-result { max-width: none; }
      #replay-view .replay-board-panel,
      #replay-view .replay-timeline-panel { padding: 15px; }
      #replay-view .replay-players { gap: 8px; }
      #replay-view .replay-player-identity { padding: 10px; }
      #replay-view .replay-player-name { font-size: .86rem; }
      #replay-view .replay-player-bot { font-size: .68rem; }
      #replay-view .replay-player-score { min-width: 36px; height: 36px; font-size: 1.1rem; }
      #replay-view .replay-controls { flex-wrap: wrap; gap: 6px; }
      #replay-view .replay-control { flex-basis: 36px; min-width: 36px; padding: 7px; }
      #replay-view .replay-play { flex-basis: 78px; min-width: 78px; }
      #replay-view .replay-control-label { font-size: .72rem; }
      #replay-view .replay-speed-label { width: 100%; justify-content: center; margin: 3px 0 0; }
    }

    .replay-detail {
      border: 1px solid #e4ebe6;
      background: #f8faf8;
    }

    body.modal-open {
      overflow: hidden;
    }

    :focus-visible {
      outline: 3px solid #176b4d;
      outline-offset: 2px;
    }

    #register-bot-tourney-modal .modal-head h4,
    #tournament-action-modal .modal-head h4 {
      color: #17231d;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -.02em;
      text-transform: none;
    }

    #register-bot-tourney-modal .modal-box {
      width: min(92vw, 520px);
      max-height: min(720px, calc(100dvh - 32px));
      padding: 26px;
      border-radius: 12px;
      overflow-y: auto;
    }

    #register-bot-tourney-modal .modal-head {
      align-items: flex-start;
      margin-bottom: 8px;
    }

    #register-bot-tourney-modal .modal-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 8px;
    }

    #register-bot-tourney-modal .modal-close-icon {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #register-bot-tourney-modal .registration-tournament-summary {
      display: flex;
      align-items: center;
      gap: 11px;
      margin: 16px 0 20px;
      padding: 12px 14px;
      border: 1px solid #dfe7e1;
      border-radius: 10px;
      background: #f7faf8;
      color: #17231d;
      font-size: .92rem;
      font-weight: 700;
      line-height: 1.35;
    }

    #register-bot-tourney-modal .registration-tournament-icon {
      width: 20px;
      height: 20px;
      flex: 0 0 auto;
      color: #176B50;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #register-bot-tourney-modal .registration-summary-label {
      display: block;
      margin-bottom: 2px;
      color: #718078;
      font-size: .7rem;
      font-weight: 650;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    #register-bot-tourney-modal .registration-tournament-summary strong {
      display: block;
      font-weight: 700;
    }

    #register-bot-tourney-modal .dialog-actions {
      margin-top: 22px;
    }

    #register-bot-tourney-modal #submit-registration {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 40px;
      padding: 10px 15px;
    }

    #register-bot-tourney-modal #submit-registration .ui-icon {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #register-bot-tourney-modal .dialog-copy,
    #tournament-action-modal .dialog-copy {
      color: #5d6c63;
      font-size: .9rem;
      line-height: 1.5;
    }

    #register-bot-tourney-modal .form-group {
      margin-bottom: 8px;
    }

    #register-bot-tourney-modal .form-group label {
      margin-bottom: 7px;
      color: #34433a;
      font-size: .82rem;
      font-weight: 650;
    }

    #register-bot-tourney-modal .input-shell {
      display: block;
      box-sizing: border-box;
      min-height: 44px;
      padding: 10px 12px;
      border: 1px solid #b8c8bc;
      border-radius: 8px;
      background: #fff;
      color: #17231d;
      font: inherit;
      outline: none;
    }

    #register-bot-tourney-modal .input-shell:focus {
      border-color: #176b4d;
      box-shadow: 0 0 0 3px rgba(23, 107, 77, .13);
    }

    #register-bot-tourney-modal .input-shell[aria-invalid="true"] {
      border-color: #b42318;
    }

    .dialog-status,
    .dialog-empty-state {
      margin: 16px 0 0;
      color: #536259;
      font-size: .9rem;
      line-height: 1.5;
    }

    .dialog-empty-state {
      padding: 16px;
      border: 1px solid #dfe7e1;
      border-radius: 10px;
      background: #f8faf8;
    }

    .dialog-empty-state strong {
      display: block;
      color: #17231d;
      font-size: .96rem;
    }

    .dialog-empty-state p {
      margin: 6px 0 14px;
    }

    #register-bot-tourney-modal .field-help {
      display: block;
      margin: -1px 0 17px;
      color: #5d6c63;
      font-size: .78rem;
      line-height: 1.5;
    }

    #tournament-action-modal #tournament-action-support {
      margin-top: -8px;
    }

    @media (max-width: 900px) {
      #register-bot-tourney-modal .modal-box {
        width: min(94vw, 520px);
        padding: 22px 20px;
      }

      #register-bot-tourney-modal .dialog-actions {
        gap: 8px;
      }

      #register-bot-tourney-modal .dialog-actions button {
        flex: 1 1 0;
      }

    }

    @media (max-width: 640px) {
      #auth-screen.page {
        width: min(440px, calc(100% - 30px));
        margin-top: 8vh !important;
      }

      #auth-screen .card {
        padding: 24px 20px;
      }

      .workspace-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
      }

      .workspace-primary-action {
        width: 100%;
      }

      .bots-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .bot-search {
        max-width: none;
        width: 100%;
      }

      .replay-layout {
        grid-template-columns: 1fr;
      }

      .replay-board-panel,
      .replay-timeline-panel {
        padding: 14px;
      }

      .replay-current-move {
        min-height: 1.45em;
        margin-top: 8px;
        line-height: 1.35;
      }

      .replay-board-wrap {
        margin: 10px auto 14px;
      }

      .replay-controls {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 6px;
        justify-content: stretch;
      }

      .replay-controls .icon-btn,
      .replay-play {
        width: 100%;
        flex: none;
        min-width: 0;
        padding-inline: 3px;
        font-size: .7rem;
      }

      .replay-step {
        grid-column: 1 / span 2;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .replay-speed-label {
        grid-column: 3 / -1;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
      }

      .replay-speed-label select {
        min-width: 0;
        max-width: 100%;
      }

      .replay-timeline-panel {
        position: static;
      }

      .modal-overlay {
        padding: 10px;
      }

      .modal-box {
        width: min(100%, 480px);
        padding: 22px 18px;
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
      }

      .practice-dialog {
        width: 100%;
      }

      .practice-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .practice-toolbar .primary-btn {
        width: 100%;
      }

      .practice-output {
        grid-template-columns: 1fr;
        grid-template-areas: 'result' 'board';
      }

      .practice-result-details {
        grid-template-columns: 1fr;
        gap: 3px;
      }

      .practice-result-details dd {
        margin-bottom: 7px;
      }

      .dashboard-welcome {
        padding-top: 2px;
      }

      .dashboard-actions,
      .dashboard-empty-actions {
        width: 100%;
        flex-direction: column;
      }

      .dashboard-action,
      .dashboard-empty-actions button {
        width: 100%;
      }

      .dashboard-empty {
        padding: 24px 18px;
      }
    }

    /* Replay workspace: compact match summary with balanced board/history panels. */
    #replay-view:not(.live-match-view) {
      padding-top: 26px;
      background: radial-gradient(circle at 28% 4%, rgba(226, 244, 233, .48), transparent 30%);
    }
    #replay-view .replay-match-header {
      display: block;
      padding: 18px 20px;
      border: 1px solid #dce6df;
      border-radius: 13px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(23, 35, 29, .035);
    }
    #replay-view .replay-heading-row,
    #replay-view .replay-header-subline {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      min-width: 0;
      gap: 16px;
    }
    #replay-view .replay-heading-row > div {
      display: block;
      min-width: 0;
    }
    #replay-view .replay-heading-row .section-kicker {
      margin: 0 0 7px;
      color: #7a8880;
      font-size: .66rem;
      font-weight: 750;
      letter-spacing: .08em;
    }
    #replay-view .replay-heading-row h2 {
      margin: 0;
      font-size: 1.32rem;
      letter-spacing: -.025em;
    }
    #replay-view .replay-status-badge {
      display: inline-flex;
      min-height: 25px;
      align-items: center;
      padding: 5px 10px;
      border-radius: 999px;
      background: #def4e6;
      color: #137348;
      font-size: .69rem;
      font-weight: 750;
      white-space: nowrap;
    }
    #replay-view .replay-header-subline {
      margin-top: 14px;
      color: #6c7971;
      font-size: .73rem;
    }
    #replay-view .replay-back-link {
      display: inline-flex;
      width: auto;
      min-height: 0;
      align-items: center;
      gap: 6px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #526159;
      font: inherit;
      cursor: pointer;
    }
    #replay-view .replay-back-link:hover { color: #176b4d; }
    #replay-view .replay-back-link .ui-icon { width: 25px; height: 25px; }