/* Responsive board metrics, overridden at runtime from chess.js */
:root {
  --chess-cell-size: 100px;
  --chess-rank-width: calc(var(--chess-cell-size) * 0.42);
  --chess-file-label-height: calc(var(--chess-cell-size) * 0.42);
}

/* Ensure cells center their children */
.chess-cell {
  width: var(--chess-cell-size);
  height: var(--chess-cell-size);
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chess-letter {
  font-size: calc(var(--chess-cell-size) * 0.28); /* smaller, less dominant */
  font-weight: 800;
  width: var(--chess-cell-size);
  height: var(--chess-file-label-height);
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: calc(var(--chess-cell-size) * 0.08);
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

.chess-number {
  font-size: calc(var(--chess-cell-size) * 0.28);
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}

/* Shift bottom row (letters) so each letter sits centered under its cell
   Take into account the width of the rank column (30px) and the left
   padding of the board (10px) we set earlier. Adjust if you change those. */
.chess-board > .chess-row:last-child {
  margin-left: var(--chess-rank-width);
}

/* Center children (like the chess board) inside the game container */
#game-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: clamp(40px, 6vh, 58px) 0;
  box-sizing: border-box;
  position: relative;
}

#screen-game {
  justify-content: center !important;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 16px;
  overflow: hidden !important;
}

.game-layout {
  width: 90vw;
  height: calc(100vh - 32px);
  display: grid;
  grid-template-columns: minmax(760px, 1fr) 360px;
  gap: 18px;
}

.game-main {
  background: linear-gradient(180deg, rgba(11, 20, 30, 0.5), rgba(11, 20, 30, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 14px;
}

/* Chess player labels: minimal positioning, visual styles centralized */
#game-container .player-label.chess-player-label { position: absolute; z-index: 35; pointer-events: none; }
#game-container .p-top.chess-player-label { top: 10px; }
#game-container .p-bottom.chess-player-label { bottom: 10px; }
#game-container .player-label.chess-player-label.in-check { box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.32); }

.captured-panel {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(128px, 12vw, 168px);
  background: linear-gradient(180deg, rgba(18, 29, 40, 0.92), rgba(8, 14, 20, 0.92));
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 10px 9px;
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  z-index: 20;
}

.captured-panel-left {
  left: 8px;
}

.captured-panel-right {
  right: 8px;
}

.captured-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: #deebf5;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 6px;
}

.captured-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 22px;
}

.captured-piece {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  line-height: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.14s ease;
}

.captured-piece:hover {
  transform: translateY(-1px);
}

.captured-piece-white {
  color: #f6fbff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
}

.captured-piece-black {
  color: #0a0f14;
  background: linear-gradient(180deg, rgba(244, 248, 252, 0.92), rgba(222, 232, 241, 0.9));
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 1px 5px rgba(0, 0, 0, 0.28);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 1px rgba(0, 0, 0, 0.22);
}

.captured-piece-queen,
.captured-piece-rook,
.captured-piece-bishop,
.captured-piece-knight,
.captured-piece-pawn {
  font-family: "Segoe UI Symbol", "Segoe UI Emoji", "Segoe UI", sans-serif;
}

.captured-empty {
  color: #8ea2b2;
  font-size: 0.76rem;
  font-style: italic;
}

.game-captured-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.captured-panel-sidebar {
  position: static;
  top: auto;
  transform: none;
  width: calc(100% - 16px);
  margin: 0;
  padding: 8px;
}

.captured-panel-sidebar .captured-list {
  min-height: 0;
}

.game-sidebar {
  background: linear-gradient(180deg, #1f2d3a, #17212a);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  padding: 14px;
  gap: 12px;
  min-height: 0;
}

.sidebar-turn-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px;
}

.sidebar-timer-box {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 10px;
}

.sidebar-timer-box h3 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: #d9e4ef;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.game-timer-mode {
  color: #9fb0c0;
  font-size: 0.82rem;
  margin-bottom: 4px;
}

.game-timer-value {
  color: #f4f8fb;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: 1px;
}

.game-timer-value.is-warning {
  color: #ff9f9f;
}

.sidebar-turn-box h3 {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  color: #d9e4ef;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-tabs {
  display: flex;
}

.sidebar-section-title h3 {
  margin: 0;
  font-size: 0.85rem;
  color: #d9e4ef;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-tab {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: #d9e4ef;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  margin: 0;
}

.sidebar-tab.active {
  background: rgba(241, 196, 15, 0.2);
  color: #ffd84c;
  border: 1px solid rgba(241, 196, 15, 0.35);
}

.sidebar-tab-panels {
  flex: 1;
  min-height: 0;
}

.sidebar-panel {
  height: 100%;
}

.game-history-list {
  height: 100%;
  overflow-y: auto;
  padding: 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.34));
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.history-empty {
  margin: 0;
  color: #9fb0c0;
  font-style: italic;
}

.history-item {
  margin: 0;
  color: #eaf2f8;
  font-size: 0.9rem;
  line-height: 1.35;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px;
}

.history-item:last-child {
  margin-bottom: 0;
}

.history-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.history-index {
  font-size: 0.75rem;
  color: #9fb0c0;
  font-weight: 700;
}

.history-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2px;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid transparent;
  text-transform: uppercase;
}

.history-badge--move {
  color: #b7d6ff;
  background: rgba(52, 152, 219, 0.18);
  border-color: rgba(52, 152, 219, 0.38);
}

.history-badge--capture {
  color: #ffd4d4;
  background: rgba(231, 76, 60, 0.2);
  border-color: rgba(231, 76, 60, 0.45);
}

.history-badge--promotion {
  color: #ffe6b6;
  background: rgba(241, 196, 15, 0.22);
  border-color: rgba(241, 196, 15, 0.45);
}

.history-badge--castling {
  color: #d7d2ff;
  background: rgba(142, 68, 173, 0.2);
  border-color: rgba(142, 68, 173, 0.42);
}

.history-badge--check {
  color: #ffd4d4;
  background: rgba(192, 57, 43, 0.22);
  border-color: rgba(192, 57, 43, 0.5);
}

.history-item-body {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.history-player {
  font-weight: 800;
  color: #ffffff;
}

.history-piece {
  color: #d6e3ef;
  text-transform: capitalize;
}

.history-path {
  color: #8fb0cc;
  font-family: Consolas, monospace;
  font-size: 0.85rem;
}

.game-sidebar #btn-abandon {
  margin-top: auto;
  width: 100%;
}

/* --- MODAL SCORE --- */
#score-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
  justify-content: center;
  align-items: center;
}
#score-content {
  width: 560px;
  max-width: 95%;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #1b2733 0%, #131d26 100%);
  font-family: "Segoe UI", sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.endgame-modal {
  color: #eef4f8;
}

.endgame-header {
  padding: 20px 24px 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.endgame-header h2 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.endgame-reason {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #ffd178;
  background: rgba(255, 209, 120, 0.12);
  border: 1px solid rgba(255, 209, 120, 0.36);
  padding: 6px 10px;
  border-radius: 999px;
}

.endgame-body {
  padding: 22px 24px;
  text-align: center;
}

.endgame-winner-label {
  margin: 0;
  font-size: 0.86rem;
  color: #9fb0c0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.endgame-winner-name {
  margin: 6px 0 18px 0;
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #ffffff;
}

.endgame-ready-counter {
  margin: 0;
  font-size: 1rem;
  color: #f4f8fb;
  font-weight: 700;
}

.endgame-ready-status {
  margin: 8px 0 0 0;
  font-size: 0.9rem;
  color: #b9c8d5;
}

.endgame-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 24px 24px 24px;
}

.endgame-actions .btn-red,
.endgame-actions .btn-green {
  min-width: 145px;
}

@keyframes popIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}


/* Chess board styling */

.chess-row {
  display: flex;
}

.chess-cell {
  width: var(--chess-cell-size);
  height: var(--chess-cell-size);
  box-sizing: border-box;
  /* Retirer le changement de curseur par défaut */
  cursor: default;
  /* Retirer la selection de texte */
  user-select: none;
}

/* Left numbers (ranks) and bottom letters (files) */
.chess-number {
  width: var(--chess-rank-width); /* space reserved for rank numbers */
  height: var(--chess-cell-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}

.chess-letter {
  width: var(--chess-cell-size); /* match cell width */
  height: var(--chess-file-label-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}

/* Small horizontal margin so letters sit nicely inside the green border */
.chess-board {
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  padding: 6px 6px 2px 6px; /* top right bottom left - larger bottom padding for letters */
  background: transparent;
  cursor: default;
  /* Retirer la selection de texte */
  user-select: none;
  -webkit-user-drag: none;
}
.chess-board .chess-row {
  margin-bottom: 0; /* no extra space between rows */
}

.hachure {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 0, 0, 0.6),
    rgba(255, 0, 0, 0.6) 5px,
    transparent 5px,
    transparent 10px
  );
}

.canBeSelected {
  /* faire un petit cercle au centre de la case */
  background-color: green;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: auto;
  position: absolute;
}

/* Top bar: abandon button + announcer side by side */
#game-top-bar {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
}

#game-top-bar #game-announcer {
  position: static;
  transform: none;
}

#game-top-bar #btn-abandon {
  padding: 8px 12px;
  font-size: 0.9em;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.game-sidebar .game-announcer {
  position: static;
  transform: none;
  white-space: normal;
}

@media (max-width: 1080px) {
  .game-layout {
    grid-template-columns: 1fr;
    height: auto;
    gap: 12px;
    overflow-y: auto;
  }

  .game-main {
    min-height: clamp(380px, 68vh, 620px);
    padding: 72px 10px;
  }

  .game-sidebar {
    min-height: 320px;
  }

  #screen-game {
    overflow-y: auto !important;
    align-items: flex-start;
  }
}

@media (max-width: 820px) {
  #screen-game {
    padding: 8px;
  }

  .game-layout {
    width: 100%;
    height: auto;
    gap: 10px;
  }

  .game-main {
    min-height: clamp(320px, 58vh, 500px);
    padding: 52px 6px 12px;
    border-radius: 12px;
  }

  #game-container {
    min-height: 0;
    padding: 42px 0;
  }

  .captured-piece {
    width: 32px;
    height: 32px;
    font-size: 2rem;
  }

  .game-captured-sidebar {
    gap: 8px;
  }

  #game-container .player-label.chess-player-label {
    min-width: 150px;
    max-width: calc(100% - 10px);
    padding: 5px 8px;
  }

  #game-container .p-top.chess-player-label {
    top: 6px;
  }

  #game-container .p-bottom.chess-player-label {
    bottom: 6px;
  }

  .game-sidebar {
    padding: 10px;
    gap: 10px;
    border-radius: 12px;
  }

  .sidebar-tab-panels {
    min-height: 200px;
  }

  .game-history-list {
    max-height: 260px;
  }
}

@media (max-width: 740px) {
  .captured-panel-sidebar {
    padding: 7px;
  }

  .captured-title {
    font-size: 0.66rem;
  }

  .captured-piece {
    font-size: 1.8rem;
  }

  #game-container .player-label.chess-player-label {
    min-width: 170px;
    padding: 6px 9px;
  }

  #game-container .player-label.chess-player-label .player-avatar {
    width: 32px;
    height: 32px;
  }

  #game-container .player-label.chess-player-label .player-name {
    font-size: 0.9rem;
  }
}

@media (max-width: 520px) {
  .game-main {
    padding-top: 48px;
  }

  #game-container {
    padding: 38px 0;
  }

  .captured-title {
    font-size: 0.62rem;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }

  .game-captured-sidebar {
    gap: 6px;
  }

  .captured-piece {
    width: 28px;
    height: 28px;
    font-size: 1.55rem;
  }

  #game-container .player-label.chess-player-label {
    min-width: 128px;
  }

  #game-container .player-label.chess-player-label .player-avatar {
    width: 26px;
    height: 26px;
    font-size: 0.8rem;
  }

  #game-container .player-label.chess-player-label .player-name {
    font-size: 0.78rem;
  }

  #game-container .player-label.chess-player-label .player-stats {
    font-size: 0.68rem;
  }

  .game-timer-value {
    font-size: 1.35rem;
  }

  .history-item {
    font-size: 0.82rem;
    padding: 7px;
  }
}

.isCheck {
  /* Red gradient toward center in back */
  background: radial-gradient(
    circle,
    rgba(255, 0, 0, 0.4) 70%,
    rgba(255, 0, 0, 0) 100%
  );
}

.capture-flash {
  animation: captureFlash 0.38s ease-out;
}

@keyframes captureFlash {
  0% {
    box-shadow: inset 0 0 0 0 rgba(231, 76, 60, 0.85);
    transform: scale(1);
  }
  50% {
    box-shadow: inset 0 0 0 999px rgba(231, 76, 60, 0.22);
    transform: scale(1.02);
  }
  100% {
    box-shadow: inset 0 0 0 0 rgba(231, 76, 60, 0);
    transform: scale(1);
  }
}

.promotion-pop {
  animation: promotionPop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes promotionPop {
  0% {
    transform: scale(0.55) rotate(-6deg);
    filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
  }
  55% {
    transform: scale(1.22) rotate(4deg);
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.65));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
  }
}

#game-container .player-label.chess-player-label.winner-label {
  box-shadow: 0 0 0 2px rgba(255, 209, 120, 0.42), 0 0 18px rgba(255, 209, 120, 0.28);
  animation: winnerPulse 1.3s ease-in-out infinite;
}

@keyframes winnerPulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.game-main.round-win {
  animation: boardWinGlow 1.6s ease-in-out infinite;
}

@keyframes boardWinGlow {
  0%,
  100% {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
  }
  50% {
    box-shadow: 0 18px 44px rgba(255, 209, 120, 0.24);
  }
}

#promotion-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.85);
  z-index: 100;
  justify-content: center;
  align-items: center;
}
#promotion-content {
  width: 560px;
  max-width: 95%;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #1b2733 0%, #131d26 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Segoe UI", sans-serif;
}

.promotion-modal-body {
  color: #eef4f8;
}

.promotion-header {
  padding: 20px 24px 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.promotion-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
}

.promotion-header p {
  margin: 8px 0 0 0;
  color: #b9c8d5;
  font-size: 0.92rem;
}

.promotion-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px 24px;
}

.promotion-piece-option {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  color: #eef4f8;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  transition: all 0.18s ease;
}

.promotion-piece-option:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 209, 120, 0.45);
  background: rgba(255, 209, 120, 0.08);
}

.promotion-piece-option.active {
  border-color: rgba(255, 209, 120, 0.8);
  background: rgba(255, 209, 120, 0.18);
  box-shadow: 0 0 0 2px rgba(255, 209, 120, 0.2);
}

.promotion-piece-icon {
  font-size: 2rem;
  line-height: 1;
}

.promotion-piece-label {
  font-size: 0.82rem;
  font-weight: 700;
}

.promotion-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 24px 24px 24px;
}

.promotion-actions .btn-red,
.promotion-actions .btn-green {
  min-width: 145px;
}

@media (max-width: 680px) {
  .promotion-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

#btn-abandon {
  display: inline-block;
}