/* ── 게임 레이아웃 ───────────────────────────────────────── */
.game-layout {
  display: grid;
  grid-template-columns: 200px 1fr 320px;
  gap: 20px;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .game-layout {
    grid-template-columns: 1fr;
  }
}

/* ── 패널 공통 ───────────────────────────────────────────── */
.player-panel,
.chat-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.panel-title {
  font-size: .95rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── 플레이어 카드 ───────────────────────────────────────── */
.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: var(--radius);
  margin-bottom: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.player-card.active { border-color: var(--accent); }

.stone {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stone-black { background: radial-gradient(circle at 35% 35%, #555, #000); box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.stone-white { background: radial-gradient(circle at 35% 35%, #fff, #ccc); box-shadow: 0 2px 6px rgba(0,0,0,.4); }

.player-info   { display: flex; flex-direction: column; }
.player-label  { font-size: .72rem; color: var(--text-muted); }
.player-name   { font-size: .9rem; font-weight: 600; }

.player-timer {
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: .02em;
}
.player-timer.low     { color: #f59e0b; }
.player-timer.byoyomi { color: #ef4444; }
.player-timer.urgent  {
  color: #ef4444;
  animation: timer-blink .6s step-end infinite;
}
@keyframes timer-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .25; }
}

.game-status {
  text-align: center;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  font-size: .85rem;
  margin: 12px 0;
  color: var(--text-muted);
}

.game-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

#btn-ready.btn-cancel {
  background: #374151;
  color: #9ca3af;
  border: 1px solid #4b5563;
}

/* ── 전적 보드 ─────────────────────────────────────────────── */
.score-board {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 0;
  margin: 4px 0;
  font-size: 1.3rem;
  font-weight: 700;
}
.score-board span:not(.score-sep) {
  min-width: 28px;
  text-align: center;
  color: var(--text);
}
.score-sep {
  color: var(--text-muted);
  font-weight: 400;
}

/* ── 교환 신청 버튼 ────────────────────────────────────────── */
.btn-swap {
  background: #2e2e36;
  color: #c0c0cc;
  border: 1px solid #48484f;
}
.btn-swap.btn-cancel {
  background: #252528;
  color: #6b6b75;
  border: 1px solid #3a3a3f;
}

/* ── 교환 요청 배너 ────────────────────────────────────────── */
.swap-banner {
  margin-top: 10px;
  padding: 12px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid #48484f;
  border-radius: var(--radius);
}
.swap-banner-msg {
  font-size: .83rem;
  color: #c0c0cc;
  margin-bottom: 10px;
  text-align: center;
}
.swap-banner-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* ── 기권 버튼 ─────────────────────────────────────────────── */
.btn-danger {
  background: #7f1d1d;
  color: #fca5a5;
  border: 1px solid #991b1b;
}

/* ── 보드 ────────────────────────────────────────────────── */
.board-section { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.board-wrap {
  background: #dcb062;
  border-radius: 4px;
  padding: 16px;
  box-shadow: var(--shadow), inset 0 0 8px rgba(0,0,0,.3);
  display: inline-block;
}

#gomoku-board {
  display: block;
  cursor: crosshair;
}

.board-meta {
  font-size: .83rem;
  color: var(--text-muted);
  display: flex;
  gap: 20px;
}

/* ── 채팅 ────────────────────────────────────────────────── */
.chat-panel {
  display: flex;
  flex-direction: column;
  height: 640px;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
  padding-right: 4px;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.chat-msg {
  font-size: .85rem;
  padding: 7px 11px;
  border-radius: 12px;
  word-break: break-word;
  max-width: 85%;
  align-self: flex-start;
  background: rgba(255,255,255,.06);
  border-radius: 2px 12px 12px 12px;
}
.chat-msg.mine {
  align-self: flex-end;
  background: rgba(233,69,96,.18);
  border-radius: 12px 2px 12px 12px;
  text-align: right;
}
.chat-msg.system {
  align-self: center;
  background: transparent;
  color: var(--text-muted);
  font-style: italic;
  font-size: .78rem;
  max-width: 100%;
  text-align: center;
  border-radius: 0;
  padding: 3px 0;
}
.chat-msg .msg-author {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 2px;
  color: var(--accent);
}

.chat-form {
  display: flex;
  gap: 6px;
  min-width: 0;
}
.chat-form input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: .88rem;
}
.chat-form input:focus { outline: none; border-color: var(--accent); }
.chat-form .btn { padding: 8px 14px; font-size: .85rem; }