:root {
  --bg-dark: #08121b;
  --accent: #00c4ff;
  --card-dark: #0f1720;
  --muted: #9aa4ad;
  --square-size: 64px;
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* BODY */
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 400px at 10% 10%, rgba(0,196,255,0.06), transparent),
              linear-gradient(180deg, var(--bg-dark), #000);
  color: #e6eef6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 22px;
  min-height: 100vh;
}

/* TITLE */
h1 {
  font-size: 2.4rem;
  color: var(--accent);
  text-shadow: 0 6px 26px rgba(0,196,255,0.08);
}

/* TOP CONTROLS */
.top-row {
  width: 100%;
  max-width: 980px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.controls button,
.controls select {
  padding: 8px 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #06d6a0, #05b388);
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(2,6,23,0.35);
  transition: transform .12s, box-shadow .12s, opacity .12s;
}

.controls button:hover,
.controls select:hover {
  transform: translateY(-3px);
}

/* GAME AREA */
.game-area {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 980px;
}

/* BOARD WRAPPER */
#board-wrapper {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.6);
  border: 2px solid rgba(255,255,255,0.03);
}

/* BOARD GRID */
#board {
  display: grid;
  grid-template-columns: repeat(8, var(--square-size));
  grid-template-rows: repeat(8, var(--square-size));
  border-radius: 8px;
  overflow: hidden;
  border: 6px solid #111827;
  background: linear-gradient(180deg, #0b1220, #071017);
}

.square {
  width: var(--square-size);
  height: var(--square-size);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: outline .15s, background .15s;
}

.light {
  background: linear-gradient(180deg, #dfe7ea, #cfd8dd);
}

.dark {
  background: linear-gradient(180deg, #2e3b42, #20282c);
}

.square.valid-move {
  outline: 4px solid rgba(184,255,154,0.9);
  z-index: 2;
  box-shadow: inset 0 6px 20px rgba(184,255,154,0.04);
}

/* PIECES */
.piece {
  width: calc(var(--square-size) - 14px);
  height: calc(var(--square-size) - 14px);
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(2,6,23,0.35),
              inset -3px -3px 8px rgba(255,255,255,0.03);
  transition: transform .12s, box-shadow .12s;
}

.piece.selected {
  transform: scale(1.05);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

/* KING PIECES */
.piece.king {
  border: 2px solid yellow !important;
  box-shadow: 0 0 15px 4px yellow, 0 20px 40px rgba(0,0,0,0.5);
  animation: glow 1.5s infinite alternate;
}

.piece.king::after {
  content: "★";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  color: gold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

@keyframes glow {
  from { box-shadow: 0 0 12px 3px gold; }
  to { box-shadow: 0 0 22px 8px gold; }
}

/* SIDE PANELS */
.side {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 220px;
  align-items: flex-start;
}

.panel {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 12px;
  border-radius: 12px;
  width: 220px;
  box-shadow: 0 8px 30px rgba(2,6,23,0.45);
  border: 1px solid rgba(255,255,255,0.03);
}

.panel h3 {
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 1rem;
}

.score {
  font-weight: 700;
  color: #dbeafe;
}

.turn {
  font-weight: 700;
  margin-top: 6px;
}

/* COLOR PICKERS */
.color-option {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
  cursor: pointer;
  border: 2px solid #111;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.color-option.selected {
  outline: 4px solid gold;
  box-shadow: 0 10px 30px rgba(255,215,0,0.12);
}

/* MODALS */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 50;
}

.modal.show {
  display: flex;
}

.modal-content {
  background: #071017;
  padding: 18px;
  border-radius: 12px;
  text-align: center;
  color: #e6eef6;
  max-width: 360px;
  box-shadow: 0 18px 80px rgba(0,0,0,0.6);
}

.modal-content button {
  margin-top: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  background: linear-gradient(180deg, #06d6a0, #05b388);
  color: white;
  font-weight: 700;
}

/* ENDGAME OVERLAY */
#endgame-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
  background: linear-gradient(180deg, rgba(2,6,23,0.6), rgba(2,6,23,0.85));
}

/* ADS */
.ads {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
  max-width: 980px;
  align-items: center;
}

.ad-banner, .ad-image, .ad-video {
  width: 100%;
  max-width: 980px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  border-radius: 10px;
  height: 80px;
}

.ad-image {
  height: 180px;
}

.ad-video video {
  width: 100%;
  border-radius: 10px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .game-area {
    flex-direction: column;
    align-items: center;
  }

  .side {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}