/* Board themes added with the crystal stage, board micro-animations and the
   settings preview. Theme rules use [data-board] (not body[...]) so a preview
   element can carry its own theme. Works in every UI style. */

/* ---------- amber: honey glass ---------- */
[data-board="amber"] { --light: #fbe7b9; --dark: #c98a2b; --hl: #fff4a866; --sel: #7a3f0055; --dotc: #4a2a06a0; --shard: #ffe3a1; --end-bg: #8a4a06; --end-ink: #fff3d6; }
[data-board="amber"] .cb-sq { box-shadow: inset 1px 1px 1px #fff8e8b0, inset -1px -1px 1px #6b380a40; }
[data-board="amber"] .cb-sq.light { background: radial-gradient(ellipse at 90% 96%, #ffffffa0, transparent 38%), linear-gradient(141deg, #fff6dd, #f6d996 58%, #fbe8bb); }
[data-board="amber"] .cb-sq.dark { background: radial-gradient(ellipse at 6% 92%, #ffe2a050, transparent 34%), linear-gradient(137deg, #e3a748, #b9771d 44%, #985a10 78%, #d89b3c); }
[data-board="amber"] .board-wrap { padding: clamp(4px, .8vw, 9px); border-radius: 12px; background: linear-gradient(140deg, #fff1c9, #c47f1f 38%, #7c4106 62%, #f2c46a); box-shadow: 0 10px 26px -14px #7c4106; }
[data-board="amber"] .cb-sq.light .coord { color: #8a4f0c; }
[data-board="amber"] .cb-sq.dark .coord { color: #fff5dc; }

/* ---------- rose: flat hot pink on cream ---------- */
[data-board="rose"] { --light: #fff0e6; --dark: #ea4b8b; --hl: #ffd23f70; --sel: #7b0f3d50; --dotc: #6b0d33a0; --shard: #ffd0e2; --end-bg: #ea4b8b; --end-ink: #fff0e6; }
[data-board="rose"] .cb-sq.light .coord { color: #c0306c; }

/* ---------- lemon: yellow and black ---------- */
[data-board="lemon"] { --light: #ffe14a; --dark: #1c1b17; --hl: #ff7a2e5c; --sel: #ff7a2e80; --dotc: #9a8618e6; --shard: #ffe14a; --end-bg: #1c1b17; --end-ink: #ffe14a; }
/* A yellow rim keeps black pieces readable on black squares. */
[data-board="lemon"] .cb-pc:not(.dragging) { filter: drop-shadow(0 0 .8px #ffe14a) drop-shadow(0 0 .8px #ffe14a); }
[data-board="lemon"] .cb-sq.dark .coord { color: #ffe14a; }

/* ---------- midnight: deep navy with cobalt glow ---------- */
[data-board="midnight"] { --light: #2d3d7c; --dark: #121a47; --hl: #f6c04a40; --sel: #f6c04a6e; --dotc: #c9d8ffa6; --shard: #9fbcff; --end-bg: #f6c04a; --end-ink: #121a47; }
[data-board="midnight"] .cb-sq { box-shadow: inset 1px 1px 0 #7d9cff2e, inset -1px -1px 0 #00000040; }
[data-board="midnight"] .cb-sq.light { background: radial-gradient(ellipse at 88% 94%, #5f86ff40, transparent 42%), linear-gradient(140deg, #34478e, #283a77 60%, #31458a); }
[data-board="midnight"] .cb-sq.dark { background: linear-gradient(137deg, #18235c, #0e1640 52%, #141f52); }
[data-board="midnight"] .board-wrap { padding: clamp(3px, .6vw, 7px); border-radius: 12px; background: linear-gradient(150deg, #5b7dff, #121a47 40%, #0a1033 70%, #3a5ee8); box-shadow: 0 0 0 1px #0a1033, 0 18px 50px -18px #2f5bffaa; }
[data-board="midnight"] .cb-pc:not(.dragging) { filter: drop-shadow(0 0 1.1px #b7cbffd0); }
[data-board="midnight"] .cb-sq .coord { color: #c9d6ff; }

/* ---------- swatches ---------- */
.sw[data-theme="amber"] { --sl: #fbe7b9; --sd: #c98a2b; }
.sw[data-theme="rose"] { --sl: #fff0e6; --sd: #ea4b8b; }
.sw[data-theme="lemon"] { --sl: #ffe14a; --sd: #1c1b17; }
.sw[data-theme="midnight"] { --sl: #2d3d7c; --sd: #121a47; }

/* ---------- micro-animations (board.js adds these only when motion is allowed) ---------- */
.cb { container-type: inline-size; }
.cb-fx2 { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.cb-shards { position: absolute; width: 12.5%; height: 12.5%; }
.cb-shards i {
  position: absolute; left: 50%; top: 50%; width: 22%; height: 34%; margin: -17% 0 0 -11%;
  background: linear-gradient(160deg, #fff, var(--shard, #cfe0ff) 55%, #3154b7aa);
  clip-path: polygon(50% 0, 100% 78%, 18% 100%);
  transform: rotate(var(--a)) translateY(0) scale(var(--s));
  animation: cb-shard .52s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes cb-shard {
  to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(var(--r)) scale(calc(var(--s) * .6)); opacity: 0; }
}
.cb-checkpulse { position: absolute; width: 12.5%; height: 12.5%; border-radius: 50%; box-shadow: 0 0 0 0 #1738bdcc, inset 0 0 0 3px #1738bd; animation: cb-check .7s ease-out forwards; }
[data-board="midnight"] .cb-checkpulse, [data-board="lemon"] .cb-checkpulse { box-shadow: 0 0 0 0 #ffe14acc, inset 0 0 0 3px #ffe14a; }
@keyframes cb-check {
  0% { transform: scale(.7); opacity: 1; }
  60% { box-shadow: 0 0 0 1.4cqi #1738bd00, inset 0 0 0 3px #1738bd; opacity: 1; }
  100% { transform: scale(1.25); opacity: 0; }
}
/* Game end: one heavy line of type sweeps across the board and rests briefly. */
.cb-end { position: absolute; inset: 0; z-index: 16; display: grid; align-items: center; pointer-events: none; overflow: hidden; }
.cb-end span {
  display: block; padding: .06em .3em .14em; text-align: center; white-space: nowrap;
  font: 700 19cqi/1 Heebo, var(--sans); letter-spacing: -.045em;
  background: var(--end-bg, #112ca3); color: var(--end-ink, #fff9f1);
  transform: skewY(-4deg); box-shadow: 0 1.4cqi 4cqi -1cqi #0c183680;
  animation: cb-end 2.3s cubic-bezier(.2, .9, .25, 1.15) forwards;
}
.cb-end.small span { font-size: 13cqi; }
@keyframes cb-end {
  0% { translate: -110% 0; }
  22% { translate: 0 0; }
  80% { translate: 0 0; opacity: 1; }
  100% { translate: 0 0; opacity: 0; }
}
[dir="rtl"] .cb-end span { animation-name: cb-end-rtl; }
@keyframes cb-end-rtl {
  0% { translate: 110% 0; }
  22% { translate: 0 0; }
  80% { translate: 0 0; opacity: 1; }
  100% { translate: 0 0; opacity: 0; }
}
/* Hover tilt (desktop, motion on). Flattened before any press so square picking stays exact. */
.board-wrap.tilting { transform: perspective(1400px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .2s ease-out; }
.board-wrap.tilt-flat { transform: none; transition: none; }

/* ---------- settings: live preview ---------- */
.set-preview { display: grid; grid-template-columns: minmax(0, 200px) 1fr; align-items: center; gap: 14px; }
.set-preview .board-wrap { width: 100%; }
.set-preview .cb-squares { direction: ltr; }
.set-preview .cb { box-shadow: 0 10px 24px -14px #0c183680; border-radius: 6px; }
.set-preview .cb-sq img { position: absolute; inset: 4%; width: 92%; height: 92%; }
.set-preview p { margin: 0; font-size: 13px; color: var(--text2); }
.set-preview b { display: block; font: 500 20px/1.2 var(--serif); color: var(--text); margin-bottom: 4px; }
@media (max-width: 480px) { .set-preview { grid-template-columns: minmax(0, 150px) 1fr; } }

/* ---------- settings preview, scoped to the preview's own data-board ----------
   The page body carries data-board too, so glass rules like [data-board="crystal"] .cb-sq
   would also reach a rose or lemon preview inside it. Every theme element resets these
   --pv-* values; only the glass themes set them. The preview reads only these. */
[data-board] { --pv-l: var(--light); --pv-d: var(--dark); --pv-edge: none; --pv-wrap: none; --pv-pad: 0px; --pv-squares: none; --pv-pc: none; }
[data-board="crystal"] {
  --pv-l: radial-gradient(ellipse at 92% 98%, #ffffff90, transparent 37%), linear-gradient(141deg, #fff9ecf0, #dce5fbdf 57%, #f4f5fcda);
  --pv-d: radial-gradient(ellipse at 4% 94%, #a9caff38, transparent 33%), linear-gradient(137deg, #8eb7ff63, #1d39a24d 36%, #15288659 76%, #abc9ff6b);
  --pv-edge: inset 1px 1px 1px #f3f8ffab, inset -1px -1px 1px #1b319768;
  --pv-wrap: conic-gradient(from 40deg at 50% 50%, #15267f, #8baeff 12%, #12299a 24%, #08195c 33%, #4876f0 37%, #e0f4ff 40%, #243dba 44%, #07154e 58%, #7aa3fc 65%, #102688 74%, #678ef8 82%, #ecf6ff 89%, #2d4abb 95%, #15267f);
  --pv-pad: 5px; --pv-squares: #284ec9 url(cobalt-glass.jpg) center / cover;
  --pv-pc: drop-shadow(0 1px 1px #fff9) drop-shadow(0 2px 1px #0c1f4899);
}
[data-board="amber"] {
  --pv-l: radial-gradient(ellipse at 90% 96%, #ffffffa0, transparent 38%), linear-gradient(141deg, #fff6dd, #f6d996 58%, #fbe8bb);
  --pv-d: radial-gradient(ellipse at 6% 92%, #ffe2a050, transparent 34%), linear-gradient(137deg, #e3a748, #b9771d 44%, #985a10 78%, #d89b3c);
  --pv-edge: inset 1px 1px 1px #fff8e8b0, inset -1px -1px 1px #6b380a40;
  --pv-wrap: linear-gradient(140deg, #fff1c9, #c47f1f 38%, #7c4106 62%, #f2c46a); --pv-pad: 5px;
}
[data-board="midnight"] {
  --pv-l: radial-gradient(ellipse at 88% 94%, #5f86ff40, transparent 42%), linear-gradient(140deg, #34478e, #283a77 60%, #31458a);
  --pv-d: linear-gradient(137deg, #18235c, #0e1640 52%, #141f52);
  --pv-edge: inset 1px 1px 0 #7d9cff2e, inset -1px -1px 0 #00000040;
  --pv-wrap: linear-gradient(150deg, #5b7dff, #121a47 40%, #0a1033 70%, #3a5ee8); --pv-pad: 4px;
  --pv-pc: drop-shadow(0 0 1.1px #b7cbffd0);
}
[data-board="lemon"] { --pv-pc: drop-shadow(0 0 .8px #ffe14a) drop-shadow(0 0 .8px #ffe14a); }
.set-preview .cb-sq.light { background: var(--pv-l) !important; }
.set-preview .cb-sq.dark { background: var(--pv-d) !important; }
.set-preview .cb-sq { box-shadow: var(--pv-edge) !important; }
.set-preview .cb-squares { background: var(--pv-squares) !important; }
.set-preview .board-wrap { background: var(--pv-wrap) !important; padding: var(--pv-pad) !important; border-radius: 8px !important; box-shadow: none !important; }
.set-preview .board-wrap::before { display: none !important; }
.set-preview .cb-sq img { filter: var(--pv-pc) !important; }

/* ---------- mode gallery dots ---------- */
.gallery-dots { display: flex; justify-content: center; gap: 10px; padding: 0 0 clamp(20px, 3vw, 36px); }
.gallery-dots button { width: 10px; height: 10px; padding: 0; border: 1.5px solid #0c1836; border-radius: 50%; background: transparent; cursor: pointer; }
.gallery-dots button[aria-current="true"] { background: #0c1836; width: 26px; border-radius: 999px; }
[data-motion="on"] .gallery-dots button { transition: width .25s, background-color .25s; }
.mode-gallery.pinned .gallery-dots { position: absolute; inset: auto 0 clamp(10px, 2vw, 22px); padding: 0; }