/* ===================== Azbry Chess — CSS FIX (Final Azbry Classic Olive) ===================== */

/* Palet */
:root{
  --sq-light:#E7EBCB;          /* ivory-hijau lembut, beda dari chess.com */
  --sq-dark:#668B57;           /* olive emerald gelap khas Azbry */
  --coord:rgba(255,255,255,.96);
  --coord-shadow:0 1px 1px rgba(0,0,0,.55);
  --ring-last:rgba(0,0,0,.18);
  --ring-src:rgba(255,255,255,.28);
  --ring-check:rgba(255,77,77,.9);
  --glow-check:rgba(255,77,77,.50);
}

/* ================= Papan ================= */
#board{
  position:relative;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(8,1fr);
  aspect-ratio:1/1;
  width:100%;
  gap:0;                           
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  border:1px solid rgba(0,0,0,.12);
}

/* Kotak */
#board .sq{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  user-select:none;
  -webkit-user-select:none;
  font-size:clamp(42px,9vw,76px);
  border:none;
}
#board .sq.light{ background:var(--sq-light); }
#board .sq.dark { background:var(--sq-dark);  }

/* ================= Bidak ================= */
#board .piece{
  position:relative;
  z-index:2;
  line-height:1;
  pointer-events:none;
}
#board .piece.white{
  color:#fff;
  text-shadow:0 0 2px #000,0 0 1px #000,0 1px 0 #000,
              1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}
#board .piece.black{
  color:#000;
  text-shadow:0 0 3px rgba(0,0,0,.3);
}

/* ================= Koordinat (pakai data-rank & data-file) ================= */
#board .sq:nth-child(8n+1)::before{
  content:attr(data-rank);
  position:absolute;
  left:6px;
  top:6px;
  font-size:11px;
  opacity:.7;
  letter-spacing:.2px;
  color:#000;
}
#board .sq:nth-child(n+57)::after{
  content:attr(data-file);
  position:absolute;
  right:6px;
  bottom:6px;
  font-size:11px;
  opacity:.7;
  letter-spacing:.2px;
  color:#000;
}

/* ================= Dot legal move ================= */
#board .dot{
  position:absolute;
  z-index:1;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(0,0,0,.25);
  box-shadow:0 0 6px rgba(0,0,0,.4);
  pointer-events:none;
}
#board .dot.enter{
  transform:translate(-50%,-50%) scale(1.15);
  opacity:.9;
}

/* ================= Highlight ================= */
#board .sq.src  { box-shadow:inset 0 0 0 3px var(--ring-src);  }
#board .sq.last { box-shadow:inset 0 0 0 3px var(--ring-last); }
#board .sq.check{
  box-shadow:inset 0 0 0 3px var(--ring-check),
              inset 0 0 18px var(--glow-check);
}

/* ================= Flip support ================= */
#board.flipped{ transform:rotate(180deg); }
#board.flipped .sq > *{ transform:rotate(180deg); }

/* ================= Responsif ================= */
body.board-only .board-wrap{ max-width:min(98vw,1100px); }

/* ================= Captured Trays ================= */
.captured{
  max-width:820px;
  margin:12px auto 0;
  display:grid;
  gap:8px;
}
.cap-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.cap-tray{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-height:28px;
  padding:8px 10px;
  border-radius:12px;
  background:var(--panel-bg-1);
  border:1px solid var(--panel-bd);
}
.cap-piece{
  font-size:20px;
  line-height:1;
  filter:drop-shadow(0 0 8px rgba(0,0,0,.35));
}

/* ================= Animasi bidak bergerak ================= */
.anim-piece{
  position:absolute;
  left:0; 
  top:0;
  transform:translate(0,0);
  transition:transform .18s ease-in-out;
  pointer-events:none;
  line-height:1;
  font-size:clamp(42px,9vw,76px);
}
.anim-piece.white{
  color:#fff;
  text-shadow:0 0 2px #000,0 0 1px #000,0 1px 0 #000,
              1px 0 0 #000,-1px 0 0 #000,0 -1px 0 #000;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.anim-piece.black{
  color:#222;
  text-shadow:0 0 3px rgba(255,255,255,.25);
}