/* Shared board layout, sky, toolbar and manual annotation styles. */
@import url("design-tokens.css");

body {
  -webkit-user-select: none;
  user-select: none;
  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;
}

/* Game visuals and transient overlays are not text-selection targets. */
input,
textarea,
[contenteditable]:not([contenteditable="false"]),
[contenteditable]:not([contenteditable="false"]) *,
[data-selectable],
[data-selectable] * {
  -webkit-user-select: text;
  user-select: text;
}
.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);
  animation: cloud-drift var(--dur, 100s) linear infinite;
  animation-delay: var(--delay, 0s);
  animation-play-state: var(--decoration-play-state, running);
}
.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;
  --board-pad: 1rem;
  padding: var(--board-pad);
  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;
}
@media (max-width: 600px) { .board-wrap { --board-pad: .5rem; } }
g-chess-board {
  width: 100%;
}
.annotation-underlay {
  position: absolute;
  pointer-events: none;
  /* Above the squares, below the pieces (10) and the emoji pieces (.fem-overlay, 5): a square tint never covers a piece. */
  z-index: 1;
}
.annotation-overlay {
  position: absolute;
  pointer-events: none;
  /* Above the board's own pieces (10) and arrows (20), the emoji pieces (.fem-overlay, 5) and move targets,
     below the frame's corner controls (30), so marks never pass under a piece. */
  z-index: 25;
}
@media (max-width: 600px) {
  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;
  }


}

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); }

/* Shared practice hint marks, also used by PGN questions. */
.annotation-fill {
  position: absolute;
  width: 12.5%;
  height: 12.5%;
  box-sizing: border-box;
}

.annotation-fill--hint {
  border: 3px solid var(--annotation-hint);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 35%, rgba(15, 143, 131, 0.3) 100%);
  box-shadow: inset 0 0 12px var(--annotation-hint);
}

.annotation-fill--refutation {
  background: radial-gradient(circle, rgba(136, 32, 32, 0) 25%, rgba(136, 32, 32, 0.6) 100%);
  box-shadow: inset 0 0 0 3px var(--annotation-red);
}

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The toolbar is built by script. Without this the first paint shifts when it appears; the timeout keeps the page visible if the script fails. */
body:not([data-controls-ready]) :is(main.layout, .position-shell) { visibility: hidden; animation: controls-timeout 0s 3s forwards; }
@keyframes controls-timeout { to { visibility: visible; } }

.share-notice { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 999px; background: #3f3a2a; color: #fffaf0; font-size: 0.9rem; box-shadow: 0 6px 18px #0003; }