/* 對稱棋 · 3/4 人熱座與線上房間版 */

.symbattle-app { max-width: 1180px; }

/* 未解鎖鎖定畫面 */
.sb-lock {
  text-align: center;
  padding: 40px 24px;
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--radius);
}
.sb-lock h2 { color: var(--danger); margin: 10px 0; }
.sb-lock p { color: var(--text-muted); }
.sb-emoji { font-size: 3em; line-height: 1; }
input, code, .room-link {
  -webkit-user-select: text;
  user-select: text;
}
#board { background: #fbfcfe; touch-action: none; cursor: grab; }
#board.dragging { cursor: grabbing; }

.battle-layout {
  display: grid;
  grid-template-columns: minmax(440px, 1fr) 280px;
  gap: 16px;
  align-items: start;
}
.battle-board-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 12px;
}
.battle-side { display: flex; flex-direction: column; gap: 12px; }

.room-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
}
.room-row-tools {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.room-row-tools label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--primary);
  font-weight: 700;
  font-size: .86em;
}
.room-row-tools input {
  min-height: 46px;
  width: 150px;
  border: 2px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
}
.room-row-tools input:focus { outline: none; border-color: var(--primary); }
.mode-status {
  color: var(--text-muted);
  font-weight: 700;
  padding: 10px 0;
}
.created-room {
  color: var(--text-muted);
  font-size: .9em;
  line-height: 1.45;
}
.created-room code {
  user-select: text;
  -webkit-user-select: text;
  background: var(--primary-bg);
  color: var(--primary);
  padding: 2px 6px;
  border-radius: 6px;
}
.room-share-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.room-qr {
  width: 132px;
  height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px;
}
.room-qr img { width: 112px; height: 112px; image-rendering: pixelated; }
.room-qr-fallback {
  color: var(--text-muted);
  font-size: .8em;
  text-align: center;
}
.room-link {
  user-select: text;
  -webkit-user-select: text;
  overflow-wrap: anywhere;
}

.player-panel,
.turn-panel {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 14px;
}
.player-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--card-border);
}
.player-row:last-child { border-bottom: 0; }
.player-row.active { font-weight: 900; color: var(--primary); }
.color-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(0,0,0,.18); }
.dot-red { background: #d94a4a; }
.dot-green { background: #27965d; }
.dot-yellow { background: #e0a92c; }
.dot-blue { background: #2a6cb6; }
.player-row.waiting { opacity: .55; }
.player-row small { color: var(--text-muted); font-weight: 500; }
.turn-panel h3 { color: var(--primary); font-size: 1em; margin-bottom: 8px; }
.turn-panel p { color: var(--text-muted); font-size: .9em; line-height: 1.45; margin-bottom: 8px; }
.preview-list {
  display: grid;
  gap: 6px;
  font-size: .88em;
}
.preview-list span {
  display: block;
  padding: 7px 9px;
  border-radius: 8px;
  background: var(--primary-bg);
}

.sb-board-bg { fill: #f3f7fd; stroke: #d6deea; stroke-width: 0.03; }
.sb-grid-line { stroke: #d2dcea; stroke-width: 0.025; }
.sb-cell-hit { fill: transparent; cursor: pointer; touch-action: manipulation; }
.sb-cell-hit:hover { fill: rgba(42,108,182,.08); }
.sb-axis { stroke: #e08a2c; stroke-width: 0.22; stroke-linecap: round; }
.sb-axis-core { stroke: #ffd9a0; stroke-width: 0.07; stroke-linecap: round; }
.sb-link { stroke: var(--warning); stroke-width: 0.045; stroke-dasharray: 0.15 0.1; opacity: .8; }
.sb-preview-add { fill: rgba(27,138,74,.18); stroke: var(--success); stroke-width: 0.05; }
.sb-preview-capture { fill: rgba(232,160,32,.22); stroke: var(--warning); stroke-width: 0.06; }
.sb-preview-blocked { fill: rgba(217,74,74,.12); stroke: var(--danger); stroke-width: 0.04; stroke-dasharray: 0.12 0.08; }

.sb-stack-label {
  font-size: .22px;
  font-weight: 900;
  fill: #fff;
  stroke: rgba(0,0,0,.45);
  stroke-width: 0.015;
  paint-order: stroke;
  pointer-events: none;
}
.sb-peg { stroke: rgba(0,0,0,.28); stroke-width: 0.035; }
.sb-peg-red { fill: #d94a4a; }
.sb-peg-green { fill: #27965d; }
.sb-peg-yellow { fill: #e0a92c; }
.sb-peg-blue { fill: #2a6cb6; }
.sb-active-ring { fill: none; stroke: var(--primary); stroke-width: 0.07; stroke-dasharray: 0.16 0.1; }

.sb-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 12px; text-align: center;
  background: rgba(245,249,255,.94);
  border-radius: var(--radius);
  padding: 24px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sb-overlay h2 { color: var(--primary); }
.sb-overlay p { max-width: 420px; color: var(--text-muted); line-height: 1.5; }
.sb-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sb-score-table {
  width: min(680px, 100%);
  display: grid;
  gap: 4px;
  font-size: .82em;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.sb-score-head,
.sb-score-row {
  display: grid;
  grid-template-columns: 30px minmax(90px, 1.4fr) repeat(4, minmax(52px, .8fr));
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  border-radius: 8px;
  min-width: 460px;
}
.sb-score-head {
  color: var(--text-muted);
  font-weight: 900;
  background: var(--primary-bg);
}
.sb-score-row {
  background: #fff;
  border: 1px solid var(--card-border);
}
.sb-score-row.winner {
  border-color: var(--gold);
  background: #fff9ea;
}
.sb-score-row small {
  display: block;
  color: var(--text-muted);
  font-size: .8em;
}
.sb-score-rank {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-bg);
  color: var(--primary);
  font-weight: 900;
}

@media (max-width: 760px) {
  .battle-layout { grid-template-columns: 1fr; }
  .battle-side { order: -1; }
  .room-share-grid { grid-template-columns: 1fr; }
  .sb-score-table { font-size: .74em; }
  .sb-score-head,
  .sb-score-row {
    grid-template-columns: 24px minmax(72px, 1.2fr) repeat(4, minmax(40px, .7fr));
    gap: 3px;
    padding: 6px 5px;
    min-width: 360px;
  }
}

@media (min-width: 760px) and (orientation: landscape) and (max-height: 900px) {
  body { font-size: 16px; }
  .symbattle-app {
    max-width: 1180px;
    padding: 10px 14px 24px;
    display: block;
  }
  .symbattle-app .topbar {
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  .room-panel {
    padding: 10px;
    margin-bottom: 8px;
  }
  .room-row-tools {
    gap: 8px;
    margin-bottom: 6px;
  }
  .room-row-tools label {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: .78em;
    white-space: nowrap;
  }
  .room-row-tools input {
    min-height: 40px;
    width: 116px;
  }
  .room-row-tools button {
    min-height: 40px;
    padding: 4px 10px;
  }
  .mode-status { padding: 6px 0; }
  .battle-layout {
    grid-template-columns: minmax(430px, 1fr) 260px;
    gap: 10px;
  }
  .battle-board-wrap {
    max-width: min(560px, calc(100vh - 300px));
    min-width: 360px;
    margin-bottom: 8px;
  }
  .battle-side { gap: 8px; }
  .player-panel,
  .turn-panel { padding: 10px; }
  .player-row {
    grid-template-columns: 16px 1fr auto;
    gap: 6px;
    padding: 6px 0;
  }
  .color-dot { width: 16px; height: 16px; }
  .turn-panel h3 { margin-bottom: 5px; }
  .turn-panel p { margin-bottom: 5px; line-height: 1.35; }
  .preview-list { gap: 4px; }
  .preview-list span { padding: 5px 7px; }
  .controls-row { margin-bottom: 8px; }
  .controls-row button {
    min-height: 40px;
    padding: 4px 10px;
  }
  .rules-card {
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  .leaderboard-card { margin-top: 10px; }
  .sb-overlay {
    padding: 14px;
    gap: 8px;
  }
  .sb-overlay p { line-height: 1.35; }
}