/* ============================================
   GAME CSS + MOBILE RESPONSIVE
   ============================================ */

/* Game header */
.game-mode-badge{background:var(--surface);border:1px solid var(--border);border-radius:100px;padding:4px 12px;font-size:.8rem;color:var(--text2)}
.board-labels-top{display:flex;padding-left:24px}
.board-labels-top span{width:var(--cell-size,56px);text-align:center;font-size:.7rem;color:var(--text2);font-family:'JetBrains Mono',monospace}
.board-labels-side{display:flex;flex-direction:column;justify-content:space-around;padding:2px 4px;font-size:.7rem;color:var(--text2);font-family:'JetBrains Mono',monospace;width:20px}
.game-status{margin-top:10px;font-size:.9rem;color:var(--text2);font-weight:600;text-align:center;min-height:24px}
.ai-thinking-bar{display:flex;align-items:center;gap:8px;margin-top:8px;color:var(--accent);font-size:.85rem;justify-content:center}
.diff-btn{width:100%;padding:8px;margin-bottom:6px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text2);font-family:'Outfit',sans-serif;font-size:.82rem;cursor:pointer;transition:.2s;text-align:left}
.diff-btn.active{border-color:var(--accent);color:var(--text);background:rgba(124,106,247,.1)}
.diff-btn:hover{border-color:var(--border2)}

/* ---- BOARD RESPONSIVE ---- */
/*
  Board uses CSS custom property --cell-size.
  On desktop: 64px, tablet: 52px, mobile: calc(min(90vw,90vh)/8)
*/
:root { --cell-size: 64px; }

.board {
  display: grid;
  grid-template-columns: repeat(8, var(--cell-size));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 0 3px var(--border2), var(--shadow);
  touch-action: none;
}

.board-cell {
  width: var(--cell-size);
  height: var(--cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .12s;
  position: relative;
}
.board-cell.light { background: #f0d9b5; }
.board-cell.dark  { background: #b58863; }
.board-cell.selected { background: #f6f669 !important; box-shadow: inset 0 0 0 3px rgba(246,246,0,.5); }
.board-cell.possible-move { background: #cdd16f !important; cursor: pointer; }
.board-cell.last-move { background: #aaa23a !important; }

/* Possible move dot */
.board-cell.possible-move::after {
  content: '';
  display: block;
  width: 32%; height: 32%;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}
.board-cell.possible-capture::after {
  content: '';
  display: block;
  width: 88%; height: 88%;
  border-radius: 50%;
  border: 3px solid rgba(220,50,50,.55);
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  pointer-events: none;
}

/* Must-capture flash */
@keyframes mustFlash{0%,100%{box-shadow:none}25%,75%{box-shadow:0 0 0 3px rgba(239,68,68,.8),0 0 16px rgba(239,68,68,.5)}}
.must-capture-flash{animation:mustFlash .8s ease-in-out}

/* Pieces */
.piece {
  width: 78%; height: 78%;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  transition: transform .12s, box-shadow .12s;
  user-select: none;
}
.piece:hover { transform: scale(1.08); }
.piece.p1 {
  background: radial-gradient(circle at 35% 30%, #fff8e8, #e8c07d 60%, #c49a45);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.4);
}
.piece.p2 {
  background: radial-gradient(circle at 35% 30%, #666, #222 60%, #111);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.4), 0 3px 8px rgba(0,0,0,.5);
}
.piece.king::after {
  content: '♛';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(.6rem, 1.5vw, 1.1rem);
  color: rgba(255,215,0,.9);
  text-shadow: 0 0 8px gold;
}
.piece.selected-piece {
  transform: scale(1.12);
  box-shadow: 0 0 20px rgba(124,106,247,.7), 0 4px 12px rgba(0,0,0,.5);
}

/* Skin variants */
.board.skin-neon .board-cell.light{background:#1a1a2e}
.board.skin-neon .board-cell.dark{background:#16213e}
.board.skin-neon .piece.p1{background:radial-gradient(circle at 35% 30%,#80ffff,#00ffff 60%,#007777)}
.board.skin-neon .piece.p2{background:radial-gradient(circle at 35% 30%,#ff80ff,#ff00ff 60%,#770077)}
.board.skin-fire .board-cell.light{background:#2d1b00}
.board.skin-fire .board-cell.dark{background:#1a0d00}
.board.skin-fire .piece.p1{background:radial-gradient(circle at 35% 30%,#ffaa00,#ff4500 60%,#990000)}
.board.skin-fire .piece.p2{background:radial-gradient(circle at 35% 30%,#aaddff,#00bfff 60%,#003366)}
.board.skin-gold .board-cell.light{background:#3d2b00}
.board.skin-gold .board-cell.dark{background:#1a1200}
.board.skin-gold .piece.p1{background:radial-gradient(circle at 35% 30%,#fffaaa,#ffd700 60%,#886600)}
.board.skin-gold .piece.p2{background:radial-gradient(circle at 35% 30%,#444,#1a1a1a 60%,#000)}
.board.skin-emerald .board-cell.light{background:#0d2614}
.board.skin-emerald .board-cell.dark{background:#071a0d}
.board.skin-emerald .piece.p1{background:radial-gradient(circle at 35% 30%,#afffcf,#50fa7b 60%,#1a7a3a)}
.board.skin-emerald .piece.p2{background:radial-gradient(circle at 35% 30%,#666,#282a36 60%,#111)}
.board.skin-galaxy .board-cell.light{background:#0f0c29}
.board.skin-galaxy .board-cell.dark{background:#302b63}
.board.skin-galaxy .piece.p1{background:radial-gradient(circle at 35% 30%,#c4b5fd,#a78bfa 60%,#5b21b6)}
.board.skin-galaxy .piece.p2{background:radial-gradient(circle at 35% 30%,#fbb6ce,#f472b6 60%,#9d174d)}

/* ---- GAME LAYOUT RESPONSIVE ---- */
.game-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 240px 1fr 240px;
  height: calc(100vh - 57px);
  overflow: hidden;
}
.game-sidebar {
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--bg2);
}
.game-sidebar--right { border-right: none; border-left: 1px solid var(--border); }
.game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--bg);
  overflow: auto;
}

/* Mobile bottom bar for game */
.game-mobile-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(17,17,24,.95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  z-index: 40;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.mobile-timer-row {
  display: flex;
  gap: 12px;
  width: 100%;
  justify-content: space-between;
}
.mobile-timer {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  text-align: center;
}
.mobile-timer.active-turn { border-color: var(--accent); }
.mobile-timer-name { font-size: .7rem; color: var(--text2); }
.mobile-timer-time { font-family: 'JetBrains Mono', monospace; font-size: 1rem; font-weight: 700; }

/* Room code display */
.room-code-display {
  background: var(--bg3);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  margin: 16px 0;
}
.room-code-big {
  font-family: 'JetBrains Mono', monospace;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: .25em;
  color: var(--accent);
  display: block;
  margin: 8px 0;
}
.room-code-label { font-size: .85rem; color: var(--text2); }
.copy-btn {
  background: rgba(124,106,247,.15);
  border: 1px solid rgba(124,106,247,.3);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  color: var(--accent);
  font-family: 'Outfit', sans-serif;
  font-size: .85rem;
  cursor: pointer;
  transition: .2s;
  margin-top: 10px;
}
.copy-btn:hover { background: rgba(124,106,247,.25); }
.copy-btn.copied { color: var(--green); border-color: var(--green); background: rgba(16,185,129,.1); }

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: 768px - 1100px */
@media (max-width: 1100px) {
  :root { --cell-size: 56px; }
  .board-labels-top span { width: 56px; }
  .game-layout { grid-template-columns: 200px 1fr 200px; }
}

/* Small tablet / large phone: hide sidebars */
@media (max-width: 900px) {
  :root { --cell-size: 52px; }
  .board-labels-top span { width: 52px; }
  .game-layout { grid-template-columns: 1fr; height: auto; }
  .game-sidebar { display: none !important; }
  .game-main { padding: 12px 8px 100px; min-height: calc(100vh - 57px); }
  .game-mobile-bar { display: flex; }
}

/* Phone portrait */
@media (max-width: 600px) {
  :root { --cell-size: calc((100vw - 56px) / 8); }
  .board-labels-top span { width: calc((100vw - 56px) / 8); }
  .game-header { padding: 8px 12px; }
  .game-header .btn { padding: 6px 8px; font-size: .8rem; }
  .board-wrap { overflow: auto; }
  .board-labels-top { padding-left: 20px; }
  .board-labels-side { width: 20px; font-size: .65rem; }
}

@media (max-width: 400px) {
  :root { --cell-size: calc((100vw - 48px) / 8); }
  .board-labels-top span { width: calc((100vw - 48px) / 8); }
}