/* ── Spectate page layout ───────────────────────── */
.spectate-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 40px 20px 70px;
}

.spectate-subtitle {
  font-size: 14px;
  margin-bottom: 20px;
  color: #6ab7d4;
  font-variant-caps: all-small-caps;
  letter-spacing: 3px;
}

/* ── Game lobby (list of rooms) ─────────────────── */
.game-lobby {
  width: 100%;
  max-width: 500px;
}

.lobby-empty {
  color: #555;
  font-size: 14px;
  padding: 40px 0;
  letter-spacing: 1px;
}

.game-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.game-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
}

.game-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
}

.game-card-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.game-card-room {
  font-size: 13px;
  color: #aaa;
  letter-spacing: 1px;
  font-weight: 500;
}

.game-card-players {
  font-size: 12px;
  color: #666;
  font-family: monospace;
}

.game-card-players .symbol-x {
  color: #ff4466;
  font-weight: bold;
}

.game-card-players .symbol-o {
  color: #44aaff;
  font-weight: bold;
}

.game-card-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.game-card-wager {
  font-size: 13px;
  color: #00d4ff;
  font-weight: 600;
}

.game-card-status {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.game-card-status.playing {
  color: #00ff88;
}

.game-card-status.waiting {
  color: #ffaa00;
}

.game-card-status.finished {
  color: #ff4466;
}

/* ── Spectate board view ────────────────────────── */
.spectate-view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.back-btn {
  font-size: 12px;
  padding: 8px 18px;
  letter-spacing: 1.5px;
  border-color: rgba(255, 255, 255, 0.1);
  margin-top: 16px;
  margin-bottom: 16px;
}

.spectate-info {
  font-size: 14px;
  color: #888;
  letter-spacing: 1px;
  margin-bottom: 8px;
  min-height: 20px;
  text-align: center;
}

.spectate-info .symbol-x {
  color: #ff4466;
  font-weight: bold;
}

.spectate-info .symbol-o {
  color: #44aaff;
  font-weight: bold;
}

.spectate-info .wager-amount {
  color: #00d4ff;
  font-weight: 600;
}

.spectate-status {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 16px;
  min-height: 28px;
  letter-spacing: 1px;
  transition: color 0.3s;
}

.spectate-status.x-turn {
  color: #ff4466;
}

.spectate-status.o-turn {
  color: #44aaff;
}

.spectate-status.game-over {
  color: #00ff88;
}

.spectate-status.waiting {
  color: #ffaa00;
}

/* ── Mini board previews on game cards ──────────── */
.mini-board {
  display: grid;
  grid-template-columns: repeat(3, 14px);
  grid-template-rows: repeat(3, 14px);
  gap: 2px;
}

.mini-cell {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.mini-cell.X {
  color: #ff4466;
}

.mini-cell.O {
  color: #44aaff;
}

/* ── Game-type badge on game cards (TTT vs Reversi) ── */
.game-card-type {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 3px;
  margin-right: 6px;
  border: 1px solid currentColor;
  vertical-align: 1px;
}
.game-card-type.tictactoe { color: #00d4ff; }
.game-card-type.reversi   { color: #00ff88; }
.game-card-type.connect4  { color: #ffaa44; }
.game-card-type.seabattle { color: #6cd6dc; }

/* Reversi mini board for game-card previews (8x8, very compact) */
.mini-board.reversi {
  grid-template-columns: repeat(8, 5px);
  grid-template-rows: repeat(8, 5px);
  gap: 1px;
}
.mini-board.reversi .mini-cell {
  width: 5px;
  height: 5px;
  font-size: 0;
  border-radius: 1px;
}
.mini-board.reversi .mini-cell.X { background: #ff4466; }
.mini-board.reversi .mini-cell.O { background: #44aaff; }

/* Connect 4 mini board: 7 wide × 6 tall, slightly chunkier than the
   Reversi mini so the column structure stays readable at small sizes. */
.mini-board.connect4 {
  grid-template-columns: repeat(7, 6px);
  grid-template-rows: repeat(6, 6px);
  gap: 1px;
}
.mini-board.connect4 .mini-cell {
  width: 6px;
  height: 6px;
  font-size: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.mini-board.connect4 .mini-cell.X { background: #ff4466; }
.mini-board.connect4 .mini-cell.O { background: #44aaff; }

/* Sea Battle mini board on game cards: 10×10 with hit/miss peg dots. Ship
   positions are PRIVATE on the spectate page until sunk, so the mini-board
   shows only the same peg data the spectator can already infer. */
.mini-board.seabattle {
  grid-template-columns: repeat(10, 4px);
  grid-template-rows: repeat(10, 4px);
  gap: 1px;
}
.mini-board.seabattle .mini-cell {
  width: 4px;
  height: 4px;
  font-size: 0;
  border-radius: 1px;
  background: rgba(108, 180, 220, 0.12);
}
.mini-board.seabattle .mini-cell.hit  { background: #ff4466; }
.mini-board.seabattle .mini-cell.miss { background: #d0d8e0; }
.mini-board.seabattle .mini-cell.sunk { background: #3a4a5a; }

/* ── Sea Battle spectator dual-board ────────────────────────────────── */
.sb-spec-stage {
  display: flex;
  gap: 22px;
  justify-content: center;
  align-items: flex-start;
  margin: 12px 0 14px;
}
@media (max-width: 760px) {
  .sb-spec-stage { flex-direction: column; align-items: center; gap: 14px; }
}

.sb-spec-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.sb-spec-side-title {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #cfe4ee;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sb-spec-side-title .symbol-x { color: #ff4466; font-weight: bold; }
.sb-spec-side-title .symbol-o { color: #44aaff; font-weight: bold; }
.sb-spec-side-title .sb-spec-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #aaa;
}

.sb-spec-grid {
  --sb-c: 26px;
  display: grid;
  grid-template-columns: repeat(10, var(--sb-c));
  grid-template-rows:    repeat(10, var(--sb-c));
  gap: 2px;
  padding: 8px;
  background: rgba(20, 50, 90, 0.85);
  border: 1px solid rgba(80, 130, 200, 0.25);
  border-radius: 10px;
  box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.45);
}
@media (max-width: 760px) {
  .sb-spec-grid { --sb-c: 22px; }
}
@media (max-width: 420px) {
  .sb-spec-grid { --sb-c: 17px; gap: 1px; padding: 6px; }
}

.sb-spec-cell {
  position: relative;
  background: rgba(108, 180, 220, 0.08);
  border-radius: 3px;
  transition: background 0.2s;
}
/* Revealed sunk-ship cell — dark hull underneath the peg */
.sb-spec-cell.sunk-ship {
  background: linear-gradient(160deg, #5a6878, #2a3645);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
/* Hit / miss pegs — circular dot in the centre of the cell */
.sb-spec-cell.hit::after,
.sb-spec-cell.miss::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  pointer-events: none;
}
.sb-spec-cell.hit::after {
  background: #ff4466;
  box-shadow: 0 0 5px rgba(255, 68, 102, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}
.sb-spec-cell.miss::after {
  background: #e6ecf2;
  box-shadow: 0 0 4px rgba(200, 215, 230, 0.45), inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}
/* New-shot animation — quick pop when a peg first appears */
.sb-spec-cell.new-shot::after {
  animation: sbShotPop 0.55s ease-out;
}
@keyframes sbShotPop {
  0%   { transform: scale(2);   opacity: 0.4; }
  60%  { transform: scale(0.85); opacity: 1; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Spectator view: mark cells as read-only (no hover bump). The interactive
   .reversi-cell from reversi.css uses cursor:pointer + hover scale; we
   neutralise both when watching as a spectator. */
.spectate-view .reversi-cell {
  cursor: default;
}
.spectate-view .reversi-cell.legal,
.spectate-view .reversi-cell.legal::after {
  /* Don't surface "legal move" hints to spectators */
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
  animation: none;
  content: none;
}