/* ═══════════════════════════════════════════════════════════════
   boardtheme.css  —  /public_html/chessboard/boardtheme.css
   ───────────────────────────────────────────────────────────────
   THIS FILE ONLY HANDLES:
     1. Default brown colours (before JS loads — prevents flash)
     2. Smooth transition animation between themes
     3. Move-highlight overrides
     4. Fallback for chessboard.js hashed class names

   ACTUAL THEME COLOURS are injected by theme-loader.js at
   runtime via a <style> tag — this bypasses CSS custom-property
   cascade issues that caused gradient themes (walnut, green-soft,
   lavender, etc.) to silently fail in some browsers.
═══════════════════════════════════════════════════════════════ */

/* ── Smooth transitions (must live in a static file so the
      browser registers them before JS fires its first paint) ── */
.csq-light,
.csq-dark,
.white-1e1d7,
.black-3c85d {
  transition:
    background  280ms cubic-bezier(.4, 0, .2, 1),
    box-shadow  280ms cubic-bezier(.4, 0, .2, 1);
}

/* ── Default: classic brown — visible before theme-loader.js runs ── */
.csq-light,
.white-1e1d7 { background: #f0d9b5 !important; }

.csq-dark,
.black-3c85d { background: #b58863 !important; }

/* ── Move highlights — kept here so they're never overridden ── */
.highlight1-32417,
.highlight2-9c5d2 {
  box-shadow: inset 0 0 4px 4px rgba(255, 215, 0, .80) !important;
}