/* Shared board layout, sky, toolbar and manual annotation styles. */
:root {
  color-scheme: light dark;
  --ink: #4a3f2b;
  --muted: #8a7f5e;
  --accent: #c9762f;
  --accent-dark: #a85f22;
  --panel-bg: rgba(255, 250, 235, 0.88);
  --panel-border: #ddd0a0;
  --annotation-green: #15781b;
  --annotation-red: #882020;
  --annotation-blue: #003088;
  --annotation-yellow: #e68f00;
  --annotation-hint: #0f8f83;
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem 1rem;
  box-sizing: border-box;
  background-color: var(--body-bg);
  background-image:
    var(--stars-layer),
    url("textures/noise.svg"),
    radial-gradient(circle at 88% 6%, var(--sun-glow), rgba(255, 232, 168, 0) 24%),
    radial-gradient(ellipse 150px 46px at 14% 9%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 110px 34px at 33% 5%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 170px 50px at 78% 15%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, transparent 80%, var(--ground-a) 80%, var(--ground-b) 90%, var(--ground-c) 100%),
    linear-gradient(180deg, var(--sky-top) 0%, var(--sky-upper) 38%, var(--sky-lower) 64%, var(--sky-bottom) 100%);
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 140px 140px, 160px 160px, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
  transition: background-color 0.4s ease;
}
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.cloud {
  position: absolute;
  top: var(--y, 10%);
  left: 0;
  width: var(--w, 260px);
  aspect-ratio: 240 / 150;
  background: var(--cloud-image) no-repeat center / contain;
  opacity: var(--op, 0.9);
  filter: drop-shadow(0 10px 14px rgba(90, 70, 30, 0.07));
  will-change: transform;
  animation: cloud-drift var(--dur, 100s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.cloud--flip {
  transform: scaleX(-1);
  animation-name: cloud-drift-flip;
}
@keyframes cloud-drift {
  0% { transform: translateX(-45vw); opacity: 0; }
  15% { transform: translateX(-16.5vw); opacity: 0; }
  24% { transform: translateX(0.6vw); opacity: var(--op, 0.9); }
  76% { transform: translateX(99.4vw); opacity: var(--op, 0.9); }
  85% { transform: translateX(116.5vw); opacity: 0; }
  100% { transform: translateX(145vw); opacity: 0; }
}
@keyframes cloud-drift-flip {
  0% { transform: translateX(-45vw) scaleX(-1); opacity: 0; }
  15% { transform: translateX(-16.5vw) scaleX(-1); opacity: 0; }
  24% { transform: translateX(0.6vw) scaleX(-1); opacity: var(--op, 0.9); }
  76% { transform: translateX(99.4vw) scaleX(-1); opacity: var(--op, 0.9); }
  85% { transform: translateX(116.5vw) scaleX(-1); opacity: 0; }
  100% { transform: translateX(145vw) scaleX(-1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud,
  .cloud--flip {
    animation: none;
    transform: var(--rest-transform, translateX(20vw));
  }
}
.layout {
  display: flex;
  justify-content: center;
  gap: var(--layout-gap, 1.5rem);
  flex-wrap: wrap;
  align-items: flex-start;
}
.board-wrap {
  width: min(1000px, 95vw, 90vh);
  position: relative;
  padding: 1rem;
  border-radius: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow: 0 12px 30px rgba(var(--shell-shadow, 40, 30, 10), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  box-sizing: border-box;
}
g-chess-board {
  width: 100%;
}
.annotation-overlay {
  position: absolute;
  pointer-events: none;
}
.annotation-marker {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
  border-style: solid;
  border-radius: 18%;
  transform: scale(0.92);
}
.annotation-marker.green { border-color: var(--annotation-green); }
.annotation-marker.red { border-color: var(--annotation-red); }
.annotation-marker.blue { border-color: var(--annotation-blue); }
.annotation-marker.yellow { border-color: var(--annotation-yellow); }
.side-panel {
  position: fixed;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
@media (max-width: 700px) {
  body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    padding: 0 0.4rem;
  }

  .layout {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .side-panel {
    position: static;
    right: auto;
    top: auto;
    transform: none;
    order: -1;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }
}
.icon-btn {
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--accent-dark);
  background: linear-gradient(180deg, #dc9a4c, var(--accent));
  box-shadow: 0 6px 14px rgba(var(--shell-shadow, 40, 30, 10), 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.icon-btn:hover {
  background: linear-gradient(180deg, #e2a55a, #cf8438);
}
.icon-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}
.icon-btn:disabled:hover {
  background: linear-gradient(180deg, #dc9a4c, var(--accent));
}
.icon-btn svg {
  width: 1.6rem;
  height: 1.6rem;
  stroke: #fffaf0;
  fill: none;
}

g-chess-board::part(arrow-green) { color: var(--annotation-green); }
g-chess-board::part(arrow-red) { color: var(--annotation-red); }
g-chess-board::part(arrow-blue) { color: var(--annotation-blue); }
g-chess-board::part(arrow-yellow) { color: var(--annotation-yellow); }
g-chess-board::part(arrow-hint) { color: var(--annotation-hint); }