/* Board themes. Select with BRAND.theme in js/config.js (or ?theme=lace|velvet|boudoir for previews).
   All textures are original SVGs in assets/themes/. */
@font-face { font-family: "CM Lipstick"; src: url("../assets/fonts/KaushanScript.ttf") format("truetype"); font-display: swap; }

body[data-theme] .board-frame { position: relative; }
body:not([data-theme="classic"]) .board { border-radius: 4px; }
body:not([data-theme="classic"]) .cf, body:not([data-theme="classic"]) .cr { font-size: 11px; }

/* ===================== A: Black lace + blush ===================== */
body[data-theme="lace"] {
  background:
    url("../assets/themes/lace-faint.svg") 0 0 / 36px 36px,
    radial-gradient(120% 60% at 0% 0%, rgba(255,111,174,.14), transparent 60%),
    radial-gradient(120% 60% at 100% 100%, rgba(79,163,255,.12), transparent 60%), #0c090c;
}
[data-theme="lace"] .board-frame {
  padding: 15px; border-radius: 16px;
  background:
    radial-gradient(circle, #fff3c4 0 1.4px, #e2b04a 2px, #8a6418 3.4px, transparent 3.9px) left 4px top 4px / 8px 8px no-repeat,
    radial-gradient(circle, #fff3c4 0 1.4px, #e2b04a 2px, #8a6418 3.4px, transparent 3.9px) right 4px top 4px / 8px 8px no-repeat,
    radial-gradient(circle, #fff3c4 0 1.4px, #e2b04a 2px, #8a6418 3.4px, transparent 3.9px) left 4px bottom 4px / 8px 8px no-repeat,
    radial-gradient(circle, #fff3c4 0 1.4px, #e2b04a 2px, #8a6418 3.4px, transparent 3.9px) right 4px bottom 4px / 8px 8px no-repeat,
    radial-gradient(circle at 50% 50%, #4a3c44 0 1px, #000 1.6px, transparent 2.2px) 0 0 / 15px 15px,
    radial-gradient(ellipse at 50% 50%, #2e252b 0%, #120d10 72%) 7.5px 7.5px / 15px 15px,
    #0e0a0c;
  box-shadow: 0 0 0 1px #3b2e35, inset 0 0 0 1px #000, 0 14px 40px rgba(0,0,0,.7), inset 0 2px 6px rgba(255,255,255,.08);
}
[data-theme="lace"] .board-frame::before, [data-theme="lace"] .board-frame::after {
  content: ""; position: absolute; width: 34px; height: 21px; z-index: 3; pointer-events: none;
  background: url("../assets/themes/kiss-red.svg") center / contain no-repeat; opacity: .95;
}
[data-theme="lace"] .board-frame::before { top: -6px; right: 10px; transform: rotate(14deg); }
[data-theme="lace"] .board-frame::after { bottom: -6px; left: 10px; transform: rotate(-12deg); }
[data-theme="lace"] .board { box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #b98a2e; }
[data-theme="lace"] .sq.light { background: url("../assets/themes/lace-dark.svg") 0 0 / 50% 50%, linear-gradient(135deg, #fbe3e8, #f2c9d2); }
[data-theme="lace"] .sq.dark {
  background: url("../assets/themes/lace-strong.svg") 0 0 / 50% 50%,
    linear-gradient(125deg, #050405 10%, #2c2229 38%, #0b080a 55%, #231b20 78%, #060506);
}
[data-theme="lace"] .sq.dark img { filter: drop-shadow(0 0 1.2px rgba(255,255,255,.75)) drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
[data-theme="lace"] .cf, [data-theme="lace"] .cr { font-family: "CM Lipstick", cursive; font-weight: 400; }
[data-theme="lace"] .sq.light .cf, [data-theme="lace"] .sq.light .cr { color: #c8195f; }
[data-theme="lace"] .sq.dark .cf, [data-theme="lace"] .sq.dark .cr { color: #ff8fbd; }
[data-theme="lace"] .sq.dot::after { width: 36%; height: 33%; border-radius: 0; background: url("../assets/themes/heart-dot.svg") center / contain no-repeat; }
[data-theme="lace"] .sq.cap::after { inset: 3%; border: 0; border-radius: 0; background: url("../assets/themes/heart-ring.svg") center / contain no-repeat; }
[data-theme="lace"] .sq.last::before { background: rgba(224, 48, 106, .28); }
[data-theme="lace"] .sq.sel::before { background: rgba(255, 196, 80, .55); box-shadow: inset 0 0 0 2px #ffd45e; }

/* ===================== B: Red velvet + black lace ===================== */
body[data-theme="velvet"] {
  background: radial-gradient(90% 50% at 50% 35%, rgba(140, 10, 35, .35), transparent 70%),
              url("../assets/themes/noise.svg") 0 0 / 120px 120px, #0d0507;
}
[data-theme="velvet"] .board-frame {
  padding: 15px; border-radius: 14px;
  background:
    radial-gradient(circle at 40% 40%, #fff6cf 0 0.9px, #e8b84e 1.6px, #8a5f12 3px, transparent 3.5px) 0 0 / 15px 15px space,
    url("../assets/themes/noise.svg") 0 0 / 120px 120px,
    linear-gradient(160deg, #3a1d14, #160906 55%, #2a130c);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255,210,120,.18), 0 16px 44px rgba(0,0,0,.75);
}
[data-theme="velvet"] .board { box-shadow: 0 0 0 1.5px #000, 0 0 0 3px #c9963a, 0 0 0 4.5px #000; }
[data-theme="velvet"] .sq.light {
  background: url("../assets/themes/velvet.svg") 0 0 / 80px 80px,
    radial-gradient(circle at 35% 30%, #c4203c, #8a0d22 60%, #5c0614);
}
[data-theme="velvet"] .sq.dark {
  background: url("../assets/themes/lace-strong.svg") 0 0 / 50% 50%, radial-gradient(circle at 60% 40%, #1d1518, #050304 75%);
}
[data-theme="velvet"] .sq img { filter: drop-shadow(0 0 1.2px rgba(255,255,255,.8)) drop-shadow(0 1.5px 1.5px rgba(0,0,0,.6)); }
[data-theme="velvet"] .cf, [data-theme="velvet"] .cr { font-family: "CM Lipstick", cursive; font-weight: 400; color: #e8c06a; }
[data-theme="velvet"] .sq.dot::after { width: 48%; height: 30%; border-radius: 0; background: url("../assets/themes/kiss-move.svg") center / contain no-repeat; }
[data-theme="velvet"] .sq.cap::after { inset: 4%; border: 3px solid #ffd45e; box-shadow: 0 0 6px #ffd45e; }
[data-theme="velvet"] .sq.cap::before { content: ""; position: absolute; right: 2%; top: 3%; width: 38%; height: 24%; z-index: 2; background: url("../assets/themes/kiss-move.svg") center / contain no-repeat; transform: rotate(18deg); }
[data-theme="velvet"] .sq.last::before { background: rgba(255, 212, 94, .2); }
[data-theme="velvet"] .sq.sel::before { background: rgba(255, 212, 94, .38); box-shadow: inset 0 0 0 2px #ffd45e; }

/* ===================== C: Boudoir glow ===================== */
body[data-theme="boudoir"] {
  background:
    radial-gradient(60% 35% at 50% 42%, rgba(255, 170, 90, .16), transparent 70%),
    linear-gradient(115deg, transparent 0 18%, rgba(255,255,255,.05) 24%, transparent 32% 46%, rgba(255,255,255,.04) 54%, transparent 62% 76%, rgba(255,255,255,.05) 84%, transparent 92%),
    linear-gradient(160deg, transparent 0 30%, rgba(0,0,0,.35) 40%, transparent 50% 70%, rgba(0,0,0,.3) 80%, transparent),
    linear-gradient(180deg, #2a1622, #1a0e17 60%, #120a10);
}
[data-theme="boudoir"] .board-frame {
  padding: 7px; border-radius: 16px;
  background: linear-gradient(135deg, #f1c6b8, #b9796f 45%, #f6d5c6 70%, #a7685f);
  box-shadow: 0 34px 60px -10px rgba(255, 111, 174, .65), 0 -34px 60px -10px rgba(79, 163, 255, .6),
              0 0 90px 10px rgba(255, 176, 92, .22), 0 0 0 1px rgba(0,0,0,.4);
}
[data-theme="boudoir"] .board-frame.flipped {
  box-shadow: 0 34px 60px -10px rgba(79, 163, 255, .6), 0 -34px 60px -10px rgba(255, 111, 174, .65),
              0 0 90px 10px rgba(255, 176, 92, .22), 0 0 0 1px rgba(0,0,0,.4);
}
[data-theme="boudoir"] .board { border-radius: 10px; box-shadow: inset 0 0 30px rgba(120, 40, 60, .25); }
[data-theme="boudoir"] .sq.light { background: radial-gradient(circle at 30% 25%, #fdf0ef, #f3d3d6 70%); }
[data-theme="boudoir"] .sq.dark { background: radial-gradient(circle at 30% 25%, #c48a96, #a8677a 75%); }
[data-theme="boudoir"] .sq img { filter: drop-shadow(0 1.5px 1.5px rgba(60, 10, 30, .45)); }
[data-theme="boudoir"] .cf, [data-theme="boudoir"] .cr { font-family: var(--display); font-style: italic; color: rgba(110, 40, 60, .75); }
[data-theme="boudoir"] .sq.dot::after { width: 40%; height: 40%; background: radial-gradient(circle, #fffbe8 0 18%, #ffc46b 32%, rgba(255, 150, 60, .75) 48%, rgba(255, 120, 60, 0) 72%); filter: drop-shadow(0 0 4px rgba(255, 170, 80, .9)); }
[data-theme="boudoir"] .sq.cap::after { inset: 4%; border: 3px solid rgba(255, 170, 80, .95); box-shadow: 0 0 10px rgba(255, 170, 80, .9), inset 0 0 8px rgba(255, 170, 80, .7); }
[data-theme="boudoir"] .sq.last::before { background: rgba(255, 190, 120, .3); }
[data-theme="boudoir"] .sq.sel::before { background: radial-gradient(circle, rgba(255, 220, 150, .85), rgba(255, 170, 80, .45)); }
[data-theme="boudoir"] .player-row.active.pink { box-shadow: 0 0 18px rgba(255,111,174,.45); }
[data-theme="boudoir"] .player-row.active.blue { box-shadow: 0 0 18px rgba(79,163,255,.45); }

/* --- Lace theme: app-wide accents so setup / task / end screens match the board --- */
[data-theme="lace"] .card { background: linear-gradient(160deg, rgba(28, 20, 25, .96), rgba(14, 10, 13, .96)); border-color: rgba(185, 138, 46, .38); box-shadow: 0 8px 24px rgba(0,0,0,.45); }
[data-theme="lace"] .card h2 { font-family: "CM Lipstick", cursive; font-weight: 400; font-size: 21px; color: #ff8fbd; letter-spacing: .3px; }
[data-theme="lace"] .finished .card h2, [data-theme="lace"] .closed .card h2 { font-size: 30px; color: #ffd1e6; }
[data-theme="lace"] .icon-btn { border-color: rgba(185, 138, 46, .55); background: #120d10; }
[data-theme="lace"] .fresh-tip { border-color: rgba(185, 138, 46, .55); background: linear-gradient(160deg, rgba(200,25,95,.16), rgba(31,95,191,.12)), #120d10; }
[data-theme="lace"] .fresh-tip b { font-family: "CM Lipstick", cursive; font-weight: 400; font-size: 17px; color: #ff8fbd; }
[data-theme="lace"] .home-link { border-color: rgba(185, 138, 46, .55); background: #120d10; }
[data-theme="lace"] .home-link:hover, [data-theme="lace"] .home-link:focus-visible { border-color: #ff8fbd; }
[data-theme="lace"] .opt:not(.on), [data-theme="lace"] .stats div, [data-theme="lace"] textarea { background: #120d10; }
[data-theme="lace"] .opt.on { background: linear-gradient(135deg, rgba(200,25,95,.55), rgba(31,95,191,.5)); box-shadow: inset 0 0 0 1.5px rgba(255, 212, 94, .55); }
[data-theme="lace"] .btn.ghost { border-color: rgba(185, 138, 46, .45); }
[data-theme="lace"] .btn.primary { background: linear-gradient(90deg, #c8195f, #7a1f6e 50%, #1f5fbf); box-shadow: inset 0 0 0 1px rgba(255, 212, 94, .35), 0 6px 18px rgba(200, 25, 95, .25); }
[data-theme="lace"] table.times td, [data-theme="lace"] table.times th { border-bottom-color: rgba(185, 138, 46, .2); }
[data-theme="lace"] .ring { box-shadow: 0 0 0 2px rgba(185, 138, 46, .5), 0 0 30px rgba(200, 25, 95, .25); }
[data-theme="lace"] .timer { background: url("../assets/themes/lace-faint.svg") 0 0 / 24px 24px, radial-gradient(circle, #1c1419, #0b080a); }
[data-theme="lace"] .task-card { position: relative; }
[data-theme="lace"] .finished .card, [data-theme="lace"] .closed .card, [data-theme="lace"] .task-card, [data-theme="lace"] .gate .card { position: relative; overflow: visible; }
[data-theme="lace"] .finished .card::after, [data-theme="lace"] .closed .card::after, [data-theme="lace"] .task-card::after, [data-theme="lace"] .gate .card::after {
  content: ""; position: absolute; top: -9px; right: 12px; width: 34px; height: 21px; transform: rotate(14deg);
  background: url("../assets/themes/kiss-red.svg") center / contain no-repeat; pointer-events: none;
}
[data-theme="lace"] .modal { border-color: rgba(185, 138, 46, .45); background: linear-gradient(160deg, #1c1419, #0e0a0c); }
[data-theme="lace"] .modal h3 { font-family: "CM Lipstick", cursive; font-weight: 400; font-size: 24px; color: #ff8fbd; }