/* Modern UI — round page layout */
@media (min-width: 800px) {
  .round:not(.bug) {
    --m-strip: 48px;
    /* Same max as the original layout, but never taller than the viewport minus the two player strips */
    --m-board-max: min(
      calc(100vh * var(--board-scale) - (var(--site-header-height) + var(--site-header-margin)) - 3rem),
      calc(100vh - (var(--site-header-height) + var(--site-header-margin)) - 2rem - 2 * var(--m-strip))
    );
    --m-board: minmax(min(calc(70vmin * var(--board-scale)), var(--m-board-max)), var(--m-board-max));
    grid-template-columns: minmax(220px, 300px) var(--m-board) minmax(260px, 380px);
  }
  .round-app:not(.bug) {
    grid-template-columns: var(--m-board) minmax(260px, 380px);
    grid-template-rows: auto var(--m-strip) auto auto auto minmax(6rem, 1fr) auto auto auto var(--m-strip) auto;
    grid-template-areas:
      'mat-top  .'
      'user-top clock-top'
      'board    pocket-top'
      'board    expi-top'
      'board    move-controls'
      'board    moves'
      'board    game-controls'
      'board    expi-bot'
      'board    pocket-bot'
      'user-bot clock-bot'
      'mat-bot  .';
    grid-row-gap: 0;
  }
  /* Move list fills the column instead of a fixed 8rem */
  .round-app:not(.bug) .movelist-block { min-height: 0; overflow: hidden; justify-content: flex-start; border-radius: 0; box-shadow: none; }
  .round-app:not(.bug) #movelist { flex: 1 1 0; height: auto; max-height: none; min-height: 0; }
  /* Right column reads as one card */
  .round-app:not(.bug) .info-wrap0 { border-radius: var(--m-radius) var(--m-radius) 0 0; }
  .round-app:not(.bug) .info-wrap1 { border-radius: 0 0 var(--m-radius) var(--m-radius); }
  .round-app:not(.bug) .info-wrap0,
  .round-app:not(.bug) .info-wrap1,
  .round-app:not(.bug) #btn-controls-top,
  .round-app:not(.bug) .movelist-block,
  .round-app:not(.bug) .btn-controls.game,
  .round-app:not(.bug) .btn-controls.after {
    background: var(--m-panel);
  }
}

/* Player strips */
.round-app:not(.bug) round-player0,
.round-app:not(.bug) round-player1 {
  background: none;
  line-height: var(--m-strip, 40px);
  font-size: 1.05em;
  padding: 0 2px;
  min-width: 0;
}
.round-app:not(.bug) .player-data { display: flex; align-items: center; gap: 8px; padding: 0; min-width: 0; }
.round-app:not(.bug) .player-data player { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.round-app:not(.bug) .player-data .user-link { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.round-app:not(.bug) .player-data rating { float: none; font-size: 0.9em; opacity: 0.7; }

/* Clocks */
.round-app:not(.bug) .info-wrap0,
.round-app:not(.bug) .info-wrap1 { align-self: stretch; padding: 0 8px; }
.round-app:not(.bug) .clock {
  font-variant-numeric: tabular-nums;
  font-size: 2.2em;
  line-height: 1.35;
  border-radius: var(--m-radius-sm);
  box-shadow: none;
  background: var(--m-panel-2);
  transition: background-color 0.2s, color 0.2s;
}
.round-app:not(.bug) .clock.running { box-shadow: inset 0 0 0 2px var(--good); }
.round-app:not(.bug) .clock.hurry { animation: m-hurry 1s ease-in-out infinite alternate; }
@keyframes m-hurry { from { filter: none; } to { filter: brightness(1.25); } }

/* Move navigation */
.round-app:not(.bug) #btn-controls-top { gap: 2px; padding: 4px 6px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.round-app:not(.bug) #btn-controls-top button { height: 34px; background: transparent; border-radius: var(--m-radius-sm); }
.round-app:not(.bug) #btn-controls-top button:hover { background: var(--m-panel-2); color: var(--font-color); }

/* Move list */
.round-app:not(.bug) move.counter { background: none; opacity: 0.6; }
.round-app:not(.bug) move { border-radius: 4px; }
.round-app:not(.bug) move.active { background: var(--m-accent); color: #fff; }
.round-app:not(.bug) div.result { border-top: 1px solid var(--border-color); padding-top: 6px; font-size: 1.4em; }
.round-app:not(.bug) div.status { padding-bottom: 8px; opacity: 0.85; }

/* Game buttons: bigger targets, resign is outlined in --bad */
.round-app:not(.bug) .btn-controls.game { gap: 6px; padding: 6px; border-top: 1px solid var(--border-color); }
.round-app:not(.bug) .btn-controls.game button { height: 44px; border-radius: var(--m-radius-sm); background: var(--m-panel-2); }
.round-app:not(.bug) .btn-controls.game button:not([disabled]):hover { color: #fff; background: var(--green-hover); }
.round-app:not(.bug) button#resign { box-shadow: inset 0 0 0 1px var(--bad); }
.round-app:not(.bug) button#resign:not([disabled]):hover { background: var(--bad); }

@media (min-width: 800px) {
  /* Bottom name sits below the a–h coordinates */
  .round-app:not(.bug) round-player1 { align-self: end; line-height: 32px; }
  /* Spectator chat: compact panel instead of a tall empty box */
  .round .sidebar-first .chat { flex: 0 0 auto; min-height: 0; }
  .round .sidebar-first .chat ol#roundchat-messages { flex: 0 1 auto; min-height: 4em; max-height: 40vh; }
}

@media (max-width: 799px) and (orientation: portrait) {
  .round-app:not(.bug) {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: none;
    grid-auto-rows: auto;
    grid-column-gap: 0;
    grid-template-areas:
      'mat-top       mat-top'
      'pocket-top    pocket-top'
      'user-top      clock-top'
      'expi-top      expi-top'
      'board         board'
      'user-bot      clock-bot'
      'expi-bot      expi-bot'
      'pocket-bot    pocket-bot'
      'mat-bot       mat-bot'
      'moves         moves'
      'game-controls game-controls'
      'move-controls move-controls';
  }
  .round-app:not(.bug) .info-wrap0 { grid-area: clock-top; justify-self: end; }
  .round-app:not(.bug) .info-wrap1 { grid-area: clock-bot; justify-self: end; }
  .round-app:not(.bug) round-player0,
  .round-app:not(.bug) round-player1 { line-height: 44px; padding: 0 8px; font-size: 15px; }
  .round-app:not(.bug) .player-data .user-link { font-size: 15px; }
  .round-app:not(.bug) .player-data rating { font-size: 13px; }
  .round-app:not(.bug) .clock { font-size: 1.6em; margin: 2px 6px; }

  /* Moves: one horizontally scrolling line */
  .round-app:not(.bug) .movelist-block { border-radius: 0; }
  .round-app:not(.bug) #movelist {
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    height: auto;
    max-height: none;
    scrollbar-width: none;
  }
  .round-app:not(.bug) #movelist move { flex: 0 0 auto; padding: 0 8px; }
  .round-app:not(.bug) #movelist move.counter { padding: 0 2px 0 8px; }
  .round-app:not(.bug) #movelist div.result,
  .round-app:not(.bug) #movelist div.status { flex: 0 0 auto; width: auto; border: none; padding: 0 10px; white-space: nowrap; font-size: 1em; }

  /* Navigation pinned to the bottom edge, within thumb reach */
  .round-app:not(.bug) #btn-controls-top {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--m-panel);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
  }
  .round-app:not(.bug) #btn-controls-top button { height: 48px; }
}

/* Player avatar (client/player.ts) */
.m-avatar { display: none; }
.round-app:not(.bug) .m-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--m-accent); color: #fff; font-weight: 700; font-size: 14px; line-height: 1;
}
@media (max-width: 799px) and (orientation: portrait) {
  .round-app:not(.bug) .m-avatar { width: 26px; height: 26px; font-size: 13px; }
}

/* /tv with no game (client/tvEmpty.ts) */
.m-empty {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 10vh auto;
  padding: 32px 40px;
  text-align: center;
  background: var(--m-panel);
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
}
.m-empty p { font-size: 1.2em; margin: 0 0 16px; }
.m-empty .lobby-button { display: inline-block; width: auto; margin: 0; padding: 10px 24px; border-radius: var(--m-radius-sm); }

/* Post-game actions (roundCtrl.ts: div.btn-controls.after) */
.round-app:not(.bug) .btn-controls.after {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px;
  border-top: 1px solid var(--border-color);
  box-shadow: none;
}
.round-app:not(.bug) .btn-controls.after > * { min-width: 0; }
.round-app:not(.bug) .btn-controls.after > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.round-app:not(.bug) .btn-controls.after button {
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 0 8px;
  border-radius: var(--m-radius-sm);
  background: var(--m-panel-2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.round-app:not(.bug) .btn-controls.after button.rematch,
.round-app:not(.bug) .btn-controls.after button.view-rematch { background: var(--m-accent); color: #fff; }
/* "View rematch" arrives later (roundCtrl onMsgViewRematch) and is inserted first: give it the whole row */
.round-app:not(.bug) .btn-controls.after button.view-rematch { grid-column: 1 / -1; }
.round-app:not(.bug) .btn-controls.after button:not([disabled]):hover { color: #fff; background: var(--green-hover); }

/* Head-to-head table (client/crosstable.ts) */
.round div.ctable-container { flex-direction: column; align-items: stretch; gap: 6px; }
.round .ct-title { font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; padding-left: 2px; }
.round .crosstable { border-radius: var(--m-radius); box-shadow: var(--m-shadow); overflow-x: auto; }
[data-zen="on"] .ct-title { display: none; }
.round-app:not(.bug) .btn-controls.after > .view-rematch ~ :last-child:nth-child(even) { grid-column: 1 / -1; }