/* ===========================================================
   Chess page styling - matches the site's Drawing Register theme
   =========================================================== */

.chess-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 20px;
  margin-top: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-light);
}
.chess-mode-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chess-control-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-dark);
}
.chess-select {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: 9px 12px;
  min-width: 160px;
  cursor: pointer;
}
.chess-select:focus {
  outline: none;
  border-color: var(--maroon);
}

.chess-layout {
  display: grid;
  grid-template-columns: minmax(0, 620px) 1fr;
  gap: 36px;
  margin-top: 28px;
  align-items: start;
}
@media (max-width: 900px) {
  .chess-layout { grid-template-columns: 1fr; }
}

.chess-board-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chess-status {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--black);
  padding: 10px 16px;
  background: var(--cream);
  border-radius: 8px;
}
.chess-status.check { background: #FFE3D6; color: #FF4600; }
.chess-status.game-over { background: var(--black); color: var(--yellow); }

.chess-board-frame {
  position: relative;
  width: 100%;
}
.chess-board-frame::before {
  content: '';
  display: block;
  padding-top: 100%; /* forces a definite square height on every browser, no aspect-ratio dependency */
}

.chess-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  border: 3px solid var(--black);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(18, 17, 16, 0.16);
}

.chess-sq {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  min-height: 0;
}
.chess-sq.light { background: #EEEED2; }
.chess-sq.dark { background: #769656; }

.chess-sq.selected { box-shadow: inset 0 0 0 4px var(--yellow); }
.chess-sq.in-check { background: #FF4600; }

.chess-sq.move-target::after {
  content: '';
  position: absolute;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  background: rgba(18, 17, 16, 0.28);
  pointer-events: none;
}
.chess-sq.light.move-target::after { background: rgba(18, 17, 16, 0.22); }
.chess-sq.capture-target { box-shadow: inset 0 0 0 4px rgba(255, 70, 0, 0.75); }

.chess-piece-svg {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  pointer-events: none;
}

.chess-coord {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  pointer-events: none;
  opacity: 0.6;
}
.chess-sq.light .chess-coord { color: #769656; }
.chess-sq.dark .chess-coord { color: #EEEED2; }
.chess-coord-rank { top: 3px; left: 4px; }
.chess-coord-file { bottom: 2px; right: 4px; }

.chess-captured {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.chess-captured-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gray-dark);
  min-height: 24px;
}
.chess-captured-label { margin-right: 8px; }
.chess-captured-icon { width: 20px; height: 20px; }

.chess-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chess-rating-card {
  background: var(--black);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}
.chess-rating-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 8px;
}
.chess-rating-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--cream);
  line-height: 1;
}
.chess-rating-stats {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--gray);
  margin-top: 8px;
}

.chess-moves-card {
  border: 1px solid var(--line-light);
  border-radius: 14px;
  padding: 18px;
}
.chess-move-list {
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.chess-move-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr;
  gap: 6px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line-light);
}
.mv-num { color: var(--gray-dark); }
.mv-white, .mv-black { color: var(--black); }

/* Promotion modal */
.chess-promo-modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 9, 8, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.chess-promo-modal.open { display: flex; }
.chess-promo-box {
  background: var(--white);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
}
.chess-promo-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.1rem;
  margin-bottom: 16px;
  color: var(--black);
}
.chess-promo-options {
  display: flex;
  gap: 14px;
}
.chess-promo-choice {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line-light);
  border-radius: 10px;
  background: var(--cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.chess-promo-choice:hover { border-color: var(--maroon); background: var(--white); }
.chess-promo-icon { width: 44px; height: 44px; }

@media (max-width: 560px) {
  .chess-controls { flex-direction: column; align-items: stretch; }
  .chess-select { min-width: 0; width: 100%; }
}

/* ---------- Online play panel ---------- */
.chess-online-panel {
  margin-top: 20px;
  padding: 20px;
  background: var(--cream);
  border-radius: 12px;
}
.online-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.online-or {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--gray-dark);
  text-transform: uppercase;
}
.online-link-box {
  flex: 1;
  min-width: 220px;
}
.online-link-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-dark);
  margin-bottom: 6px;
}
.online-link-value {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--black);
  background: var(--white);
  border: 1px solid var(--line-light);
  border-radius: 8px;
  padding: 10px 14px;
  word-break: break-all;
}
.online-status {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--gray-dark);
}
.online-status.online-connected { color: #1a7a3c; font-weight: 700; }
.online-status.online-error { color: #FF4600; font-weight: 700; }

@media (max-width: 560px) {
  .online-row { flex-direction: column; align-items: stretch; }
}