/* ── chess board ── */
.chess-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: start;
}

.chess-board-container { display: flex; flex-direction: column; align-items: center; gap: 6px; }

.chess-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 480px;
  height: 480px;
  border: 2px solid #1a1a1a;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.chess-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.1s;
}

.chess-sq.light { background: #f0d9b5; }
.chess-sq.dark  { background: #b58863; }
.chess-sq.selected    { background: #7fc97f !important; }
.chess-sq.last-from   { background: rgba(255,215,0,0.5) !important; }
.chess-sq.last-to     { background: rgba(255,215,0,0.7) !important; }
.chess-sq.in-check    { background: rgba(220,50,50,0.7) !important; }
.chess-sq:hover:not(.selected) { filter: brightness(1.08); }
.chess-sq.drag-over { background: rgba(100,200,100,0.55) !important; outline: 2px solid rgba(80,180,80,0.9); outline-offset: -2px; }

[draggable="true"] { cursor: grab; }
[draggable="true"]:active { cursor: grabbing; }

/* coordinate labels */
.chess-coords-rank {
  display: flex;
  flex-direction: column;
  height: 480px;
  justify-content: space-around;
  padding: 0 6px;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.chess-coords-file {
  display: flex;
  width: 480px;
  justify-content: space-around;
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px 0;
}

/* piece colors */
.chess-piece-w { color: #fffff0; text-shadow: 0 1px 3px rgba(0,0,0,0.8); }
.chess-piece-b { color: #1a1a1a; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* ── sidebar ── */
.chess-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 260px;
  max-width: 320px;
}

.chess-info-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.chess-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.chess-player-row:last-child { border-bottom: none; }
.chess-player-color {
  width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.2);
}
.chess-player-color.white { background: #f0d9b5; }
.chess-player-color.black { background: #2a2a2a; }
.chess-player-name { font-weight: 600; font-size: 0.9rem; flex: 1; }
.chess-turn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #4caf82; flex-shrink: 0;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

.chess-status {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  text-align: center;
}

.chess-wager-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(224,40,40,0.1);
  border: 1px solid rgba(224,40,40,0.3);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 0.8rem;
  color: var(--gold);
  font-weight: 700;
  box-shadow: 0 0 10px rgba(224,40,40,0.12);
}

/* ── chess challenge form card ── */
.chess-challenge-card {
  background: var(--surface);
  border: 1px solid rgba(224,40,40,0.18);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 4px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(224,40,40,0.06);
  position: relative; overflow: hidden;
}
.chess-challenge-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(224,40,40,0.5), transparent);
}
.chess-challenge-card h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem; margin-bottom: 22px; color: var(--text);
}
.chess-challenge-fields {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
}
.chess-challenge-field { display: flex; flex-direction: column; gap: 6px; }
.chess-challenge-field.flex-1 { flex: 1; min-width: 200px; }
.chess-challenge-field.w-140 { min-width: 140px; }
.chess-field-label {
  font-size: 0.76rem; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: .09em; font-weight: 700;
}

.chess-moves {
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.8;
}
.chess-moves::-webkit-scrollbar { width: 3px; }
.chess-moves::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

.chess-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── promotion modal ── */
.chess-promo-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.75);
  display: flex; align-items: center; justify-content: center;
}
.chess-promo-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.chess-promo-box h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem; margin-bottom: 18px;
}
.chess-promo-pieces { display: flex; gap: 10px; justify-content: center; }
.chess-promo-btn {
  font-size: 2.5rem; background: var(--bg3);
  border: 1px solid var(--border); border-radius: 8px;
  width: 64px; height: 64px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.chess-promo-btn:hover { background: var(--bg); border-color: var(--gold); }

/* ── clocks ── */
.chess-clock {
  font-family: monospace;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.chess-clock.chess-clock-active { color: var(--text); }
.chess-clock.chess-clock-low    { color: #e05c5c; animation: pulse 0.6s ease-in-out infinite; }

/* ── chess list page ── */
@keyframes chess-turn-pulse {
  0%, 100% { border-left-color: rgba(74,144,217,0.35); }
  50%       { border-left-color: rgba(74,144,217,0.85); box-shadow: 0 0 20px rgba(74,144,217,0.2), 0 2px 8px rgba(0,0,0,0.4); }
}
.chess-game-row {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
  margin-bottom: 12px; text-decoration: none; color: inherit;
  position: relative; overflow: hidden;
  transition: border-color .2s, background .2s, box-shadow .25s, transform .22s cubic-bezier(0.34,1.56,0.64,1);
}
.chess-game-row::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.025) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform 0.6s ease;
}
.chess-game-row:hover::after { transform: translateX(130%); }
.chess-game-row:hover {
  border-color: rgba(224,40,40,0.42); background: rgba(224,40,40,0.03);
  box-shadow: 0 8px 32px rgba(224,40,40,0.12), 0 2px 8px rgba(0,0,0,0.45);
  transform: translateY(-2px);
}
.chess-game-row.chess-game-win  { border-left: 4px solid rgba(76,175,130,0.7); background: rgba(76,175,130,0.03); }
.chess-game-row.chess-game-loss { border-left: 4px solid rgba(224,92,92,0.6); background: rgba(224,92,92,0.03); }
.chess-game-row.chess-game-active-turn {
  border-left: 4px solid rgba(74,144,217,0.5); background: rgba(74,144,217,0.03);
  animation: chess-turn-pulse 2s ease-in-out infinite;
}
.chess-game-vs { flex: 1; font-size: 0.96rem; }
.chess-game-vs strong { color: var(--text); font-size: 1rem; font-weight: 700; }
.chess-result-badge {
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px; flex-shrink: 0;
}
.chess-result-win  { background: rgba(76,175,130,0.12); color: #4caf82; border: 1px solid rgba(76,175,130,0.35); box-shadow: 0 0 10px rgba(76,175,130,0.1); }
.chess-result-loss { background: rgba(224,92,92,0.1);   color: #e05c5c; border: 1px solid rgba(224,92,92,0.3);  box-shadow: 0 0 10px rgba(224,92,92,0.08); }
.chess-result-draw { background: rgba(100,110,130,0.1); color: var(--text-muted); border: 1px solid var(--border); }
.chess-result-active  { background: rgba(74,144,217,0.12); color: #5ba8f5; border: 1px solid rgba(74,144,217,0.35); box-shadow: 0 0 10px rgba(74,144,217,0.1); }
.chess-result-pending { background: rgba(255,200,0,0.1); color: #f0c040; border: 1px solid rgba(255,200,0,0.25); }

@media (max-width: 860px) {
  .chess-wrap { grid-template-columns: 1fr; }
  .chess-board {
    flex: 1;
    min-width: 0;
    height: auto;
    grid-template-rows: repeat(8, auto);
  }
  .chess-sq {
    aspect-ratio: 1;
    font-size: clamp(1.2rem, 8vw, 2.2rem);
  }
  .chess-coords-rank { height: auto; align-self: stretch; }
  .chess-coords-file { width: 100%; }
  .chess-sidebar { max-width: 100%; }
}