/* ----------  Root variables (default Sakura) ---------- */
:root {
  --bg: #fdf7fb;
  --square-light: #ffeaf5;
  --square-dark: #f8cde3;
  --accent: #ff4da6;
  --text: #333;
  --piece-black: #444;
  --piece-white: #ffffff;
  --highlight: #ffbde1;
  --highlight-capture: #ff91ca;
  --panel-bg: #fff0f8;
  /* Base size for board squares */
  --square-size: clamp(40px, 9vmin, 72px);
}

/* ----------  Theme overrides  ---------- */
.theme-lilac {
  --bg: #1a1625;
  --square-light: #3a3152;
  --square-dark: #2c2641;
  --accent: #c770f0;
  --text: #eee;
  --piece-black: #e3e3e3;
  --piece-white: #1a1625;
  --highlight: #8653ff;
  --highlight-capture: #e364ff;
  --panel-bg: #2a2440;
}
.theme-midnight {
  --bg: #0f1016;
  --square-light: #2a2c37;
  --square-dark: #1d1f28;
  --accent: #ef4d7b;
  --text: #f5f5f5;
  --piece-black: #f5f5f5;
  --piece-white: #0f1016;
  --highlight: #ef4d7b55;
  --highlight-capture: #ef4d7ba0;
  --panel-bg: #1d1f28;
}
.theme-light {
  --bg: #ffffff;
  --square-light: #f5f5f5;
  --square-dark: #e0e0e0;
  --accent: #6ea5ff;
  --text: #222;
  --piece-black: #222;
  --piece-white: #ffffff;
  --highlight: #cde1ff;
  --highlight-capture: #92c1ff;
  --panel-bg: #fdfdfd;
}
.theme-dark {
  --bg: #121212;
  --square-light: #2a2a2a;
  --square-dark: #1e1e1e;
  --accent: #8e44ad;
  --text: #eeeeee;
  --piece-black: #eeeeee;
  --piece-white: #121212;
  --highlight: #8e44ad55;
  --highlight-capture: #8e44ad99;
  --panel-bg: #1f1f1f;
}

.theme-ocean {
  --bg: #e0f7ff;
  --square-light: #bfeaff;
  --square-dark: #89c9ff;
  --accent: #0077be;
  --text: #042a47;
  --piece-black: #042a47;
  --piece-white: #e0f7ff;
  --highlight: #99d5ff;
  --highlight-capture: #66bfff;
  --panel-bg: #d4f0ff;
}
.theme-grove {
  --bg: #f1fff0;
  --square-light: #d1ecd4;
  --square-dark: #b9d8bd;
  --accent: #2e8b57;
  --text: #203b28;
  --piece-black: #203b28;
  --piece-white: #f1fff0;
  --highlight: #8fd19e;
  --highlight-capture: #5cbf7e;
  --panel-bg: #e4f7e6;
}

/* ----------  Global ---------- */
* { box-sizing: border-box; }
body {
  margin: 0; font-family: 'Quicksand', 'Noto Sans JP', sans-serif;
  background: var(--bg); color: var(--text); 
  display: flex; flex-direction: column; align-items: center;
  min-height: 100vh;
}
header { width: 100%; padding: 0.5rem 1rem; display:flex; flex-wrap:wrap; justify-content:center; gap:1rem; }
h1 { margin: 0 auto 0.5rem auto; color: var(--accent); font-size:2rem; text-align:center; }
.controls select, .controls button {
  background: var(--accent); color:#fff; border:none; padding:0.4rem 0.6rem;
  border-radius:6px; font-size:0.9rem; cursor:pointer;
}
.icon {
  width:1em; height:1em; vertical-align:-0.1em; margin-right:0.3em;
  fill:currentColor;
}
.controls select { color:#fff; }
main {
  display:flex;
  gap:1.2rem;
  padding:1rem;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* ---------- Board ---------- */
#board {
  display:grid;
  grid-template-columns: repeat(9, var(--square-size));
  grid-template-rows: repeat(9, var(--square-size));
  width: calc(var(--square-size) * 9);
  height: calc(var(--square-size) * 9);
  border:4px solid var(--accent); border-radius:8px; overflow:hidden;
}
.square {
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--square-size) * 0.6); line-height:1;
}
.square.light { background: var(--square-light); }
.square.dark  { background: var(--square-dark); }
.square.highlight { background: var(--highlight); }
.square.highlight.capture { background: var(--highlight-capture); }

/* Piece rendering */
.piece {
  width:80%; height:80%;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px;
}
.piece svg { width:100%; height:100%; pointer-events:none; }
.black .piece { color: var(--piece-black); background:transparent; }
.white .piece { color: var(--piece-white); background:transparent;
  transform: rotate(180deg);
}

/* ---------- Sidebar ---------- */
aside {
  width: clamp(180px, 30vw, 220px);
  max-height:80vh; overflow-y:auto;
  background: var(--panel-bg); padding:0.8rem; border-radius:8px;
}
aside h2 { margin-top:0; text-align:center; color:var(--accent); }
#moveHistory { list-style:none; padding:0; margin:0; font-size:0.85rem; }
#moveHistory li { padding:2px 4px; }

/* ---------- Toast ---------- */
#toast {
  position:fixed; bottom:1rem; left:50%; transform:translateX(-50%);
  background: var(--accent); color:#fff; padding:0.6rem 1.4rem;
  border-radius:32px; opacity:0; transition:opacity 0.3s ease;
}

/* ---------- Modal ---------- */
#modal.hidden { display:none; }
#modal {
  position:fixed; inset:0; background:#0008; display:flex; align-items:center; justify-content:center;
}
.modal-content {
  background:var(--bg); color:var(--text); width:90%; max-width:450px;
  padding:1rem; border-radius:12px; position:relative;
}
.modal-content .close {
  position:absolute; top:8px; right:8px; background:none; border:none; font-size:1.2rem; cursor:pointer;
}
.modal-nav { display:flex; justify-content:space-between; margin-top:1rem; }
.modal-nav button {
  background:var(--accent); color:#fff; border:none; padding:0.3rem 0.9rem; border-radius:6px; cursor:pointer;
}

/* Responsive tweaks */
@media (max-width:600px) {
  .controls { flex-direction:column; align-items:center; }
  aside { width:100%; order:-1; }
}