/* Rocket Chess board (board.js), shared by Chess Puzzles and Chess Variants. Colours come from custom properties so the
   dark and light themes (data-theme on the game's root) restyle the squares, marks and panels together. */
.rbx { --sq-light: #c9d7e6; --sq-dark: #5a7fa6; --sq-light-last: #ecdfa4; --sq-dark-last: #b9a865; --sq-light-sel: #a9e3f5; --sq-dark-sel: #3fa6cf;
  --coord-light: #3d5a7a; --coord-dark: #e6eef7; --board-edge: #3d5a7a; --dot: rgba(10,20,40,0.35);
  --ui-bg: #0b1328; --ui-bg2: #0f1a33; --ui-line: #1c2b4a; --ui-text: #dfe9ff; --ui-strong: #fff; --ui-muted: #8aa3c4; --ui-accent: #55d6ff; --ui-gold: #ffd166; --ui-gold-ink: #1a1200;
  --ui-good: #2fbf71; --ui-bad: #ff6b81; --ui-shadow: rgba(0,0,0,.45); color: var(--ui-text); }
.rbx[data-theme="light"] { --sq-light: #f3ead8; --sq-dark: #b98d63; --sq-light-last: #f6e58a; --sq-dark-last: #d6b552; --sq-light-sel: #bfe8f2; --sq-dark-sel: #6fb7cf;
  --coord-light: #8a6646; --coord-dark: #fbf4e6; --board-edge: #8a6646; --dot: rgba(60,35,10,0.32);
  --ui-bg: #fffaf1; --ui-bg2: #f4ead8; --ui-line: #dccbb0; --ui-text: #2b2116; --ui-strong: #140d05; --ui-muted: #6e5b45; --ui-accent: #0b7fa8; --ui-gold: #e3a21a; --ui-gold-ink: #1e1300;
  --ui-good: #1d8a4f; --ui-bad: #c9364f; --ui-shadow: rgba(60,40,10,.25); }

.rb-board { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); aspect-ratio: 1; width: 100%; border: 2px solid var(--board-edge); border-radius: 6px; overflow: hidden; touch-action: none; position: relative; container-type: inline-size; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rb-board.rb-shake { animation: rb-shake .38s ease-out; }
@keyframes rb-shake { 20% { transform: translate(-1.2%, .6%); } 40% { transform: translate(1%, -.8%); } 60% { transform: translate(-.6%, .4%); } 80% { transform: translate(.4%, 0); } }
.rb-board .ch-sq { position: relative; aspect-ratio: 1; min-width: 0; min-height: 0; overflow: visible; }
.rb-board .ch-sq.light { background: var(--sq-light); } .rb-board .ch-sq.dark { background: var(--sq-dark); }
.rb-board .ch-sq.light.last { background: var(--sq-light-last); } .rb-board .ch-sq.dark.last { background: var(--sq-dark-last); }
.rb-board .ch-sq.light.sel { background: var(--sq-light-sel); } .rb-board .ch-sq.dark.sel { background: var(--sq-dark-sel); }
.rb-board .ch-sq.check { background-image: radial-gradient(circle, rgba(255,70,90,0.95) 0, rgba(255,70,90,0.6) 45%, rgba(255,70,90,0) 75%); }
.rb-board .ch-sq.over { box-shadow: inset 0 0 0 4px rgba(255,255,255,.75); }
.rb-board .ch-sq.hint-from::after, .rb-board .ch-sq.hint-to::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 4px var(--ui-gold); animation: rb-pulse 1.1s ease-in-out infinite alternate; pointer-events: none; z-index: 1; }
.rb-board .ch-sq.hint-to::after { box-shadow: inset 0 0 0 4px var(--ui-gold), inset 0 0 18px 6px rgba(255,209,102,.55); }
@keyframes rb-pulse { from { opacity: 1; } to { opacity: .45; } }
.rb-board .ch-sq.mark-good { box-shadow: inset 0 0 0 4px var(--ui-good); } .rb-board .ch-sq.mark-bad { box-shadow: inset 0 0 0 4px var(--ui-bad); }
.rb-board .ch-sq.mark-hill::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,209,102,.0) 40%, rgba(255,209,102,.38) 100%); box-shadow: inset 0 0 0 2px rgba(255,209,102,.7); pointer-events: none; }
.rb-board .ch-sq .dot { position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: var(--dot); pointer-events: none; }
.rb-board .ch-sq .ring { position: absolute; inset: 5%; border-radius: 50%; border: 4px solid var(--dot); border-width: max(3px, 0.9cqw); pointer-events: none; }
.rb-board .ch-sq .coord { position: absolute; font-size: clamp(9px, 2cqw, 14px); font-weight: 700; opacity: 0.65; pointer-events: none; line-height: 1; }
.rb-board .ch-sq .coord.f { right: 3px; bottom: 2px; } .rb-board .ch-sq .coord.r { left: 3px; top: 2px; }
.rb-board .ch-sq.light .coord { color: var(--coord-light); } .rb-board .ch-sq.dark .coord { color: var(--coord-dark); }
.rb-board .ch-sq > .ch-piece { position: absolute; inset: 7%; width: 86%; height: 86%; cursor: grab; z-index: 2; }
.rb-board .ch-sq:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--ui-accent); z-index: 4; }
.rb-board .ch-piece.dragging { opacity: 0.25; }
.rb-board .ch-ghost { position: absolute; pointer-events: none; z-index: 20; width: 12.5%; height: 12.5%; }
.rb-board .ch-ghost .ch-piece { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.12); filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); }
.rb-fx { position: absolute; inset: 7%; pointer-events: none; z-index: 3; }
.rb-fx .ch-piece { width: 100%; height: 100%; display: block; }
.rb-taken { animation: rb-taken .26s ease-in forwards; }
@keyframes rb-taken { to { opacity: 0; transform: scale(.6); } }
.rb-boom-piece { animation: rb-boom-piece .52s ease-out forwards; }
@keyframes rb-boom-piece { 0% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5) rotate(25deg); filter: blur(2px); } }
.rb-boom { position: absolute; left: 50%; top: 50%; width: 300%; height: 300%; transform: translate(-50%, -50%) scale(.2); border-radius: 50%; pointer-events: none; z-index: 6;
  background: radial-gradient(circle, #fff7c2 0, #ffb347 28%, rgba(255,90,40,.75) 48%, rgba(255,60,30,0) 70%); animation: rb-boom .62s ease-out forwards; }
@keyframes rb-boom { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.2); } 60% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); } }
.rb-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; z-index: 8; }
.rb-burst .rb-glow { position: absolute; left: -45cqw; top: -45cqw; width: 90cqw; height: 90cqw; border-radius: 50%; background: radial-gradient(circle, rgba(255,250,215,.95) 0, rgba(255,209,102,.6) 22%, rgba(85,214,255,.25) 45%, rgba(85,214,255,0) 68%); animation: rb-glow .9s ease-out forwards; }
.rb-burst i { position: absolute; left: -1.2cqw; top: -1.2cqw; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #fff3b0; box-shadow: 0 0 10px 3px rgba(255,209,102,.9); transform: rotate(var(--a)) translateY(0); animation: rb-ray .95s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes rb-glow { 0% { transform: scale(.1); opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
@keyframes rb-ray { 0% { transform: rotate(var(--a)) translateY(0) scale(1.2); opacity: 1; } 100% { transform: rotate(var(--a)) translateY(calc(-34cqw * var(--d))) scale(.3); opacity: 0; } }
.rb-promo { position: absolute; top: 0; width: 12.5%; z-index: 30; display: flex; flex-direction: column; background: var(--ui-bg); border: 2px solid var(--ui-gold); border-radius: 8px; box-shadow: 0 10px 30px var(--ui-shadow); overflow: hidden; animation: rb-drop .14s ease-out; }
.rb-promo.up { top: auto; bottom: 0; flex-direction: column-reverse; }
@keyframes rb-drop { from { opacity: 0; transform: scale(.9); } }
.rb-promo button { position: relative; aspect-ratio: 1; width: 100%; border: 0; padding: 0; background: var(--sq-light); cursor: pointer; }
.rb-promo button:nth-child(even) { background: var(--sq-dark); }
.rb-promo button:focus-visible { outline: 3px solid var(--ui-accent); outline-offset: -3px; }
@media (hover: hover) { .rb-promo button:hover { filter: brightness(1.12); } }
.rb-promo button svg { position: absolute; inset: 8%; width: 84%; height: 84%; }
.rb-promo .rb-promo-x { aspect-ratio: auto; height: 32px; background: var(--ui-bg) !important; color: var(--ui-text); font: 700 20px/1 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { .rb-board .ch-sq.hint-from::after, .rb-board .ch-sq.hint-to::after { animation: none; } .rb-promo { animation: none; } }

/* toolbar icon buttons shared by the chess games */
.rb-icon { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 9px; border: 1px solid var(--ui-line); background: var(--ui-bg); color: var(--ui-text); cursor: pointer; flex: none; }
.rb-icon svg { width: 20px; height: 20px; }
@media (hover: hover) { .rb-icon:hover { border-color: var(--ui-accent); } }
.rb-icon:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (pointer: coarse) { .rb-icon { width: 42px; height: 42px; } }