/**
 * themes.css - Dynamic Board Themes & Halloween Default Aesthetics
 *
 * Implements theme color tokens for:
 * 1. Halloween (Default on launch): Spooky pumpkin night, glowing lanterns & haunted board
 * 2. Heritage Wood: Traditional warm teak wood, brass inlays & temple gold
 * 3. Royal Bronze: Ancient stone courtyard, royal ivory & polished copper
 * 4. Midnight Nebula: Deep cosmic indigo, glowing violet & starlight
 */

/* ==========================================================================
   1. Halloween Theme (Default on launch)
   ========================================================================== */
body[data-theme="halloween"] {
  background: radial-gradient(
    ellipse at 50% 0%,
    #3b1842 0%,
    #1d0d26 50%,
    #0e0614 100%
  );
}

body[data-theme="halloween"] .boardcard {
  background: linear-gradient(
    140deg,
    #351608 0%,
    #1a0c20 28%,
    #250f24 72%,
    #4a1e0b 100%
  );
  border-color: #6a2a0c;
  box-shadow:
    0 16px 50px #06020bcc,
    0 0 25px #ff75182a,
    inset 0 0 0 2px #ff8c0055;
}

body[data-theme="halloween"] .boardcard:before,
body[data-theme="halloween"] .boardcard:after {
  content: "🎃";
  font-size: clamp(15px, 2.2vh, 22px);
  color: #ff8c00;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px #ff7518aa);
}

body[data-theme="halloween"] .cell {
  background: #1e1126cc;
  border-color: #4a2952;
  color: #fbd6a5;
}

body[data-theme="halloween"] .cell:hover {
  background: #2f1b3bcc;
}

body[data-theme="halloween"] .cell.safe {
  background: #3b1b0fee;
  border-color: #ff922b;
  box-shadow: inset 0 0 10px #ff751844;
}

body[data-theme="halloween"] .cell.safe .motif {
  color: #ffaa33;
  text-shadow: 0 0 8px #ff7518;
}

body[data-theme="halloween"] .cell.goal {
  background: radial-gradient(circle, #5c2009 0%, #260f26 100%);
  border-color: #ff9f1c;
  box-shadow:
    inset 0 0 14px #ff751888,
    0 0 10px #ff751844;
}

body[data-theme="halloween"] .cell.goal .motif {
  color: #ffc078;
  text-shadow: 0 0 10px #ff9500;
}

body[data-theme="halloween"] .cell.legal {
  border-color: #ff922b !important;
  box-shadow: 0 0 0 2px #ff922b, 0 0 12px #ff751899 !important;
  animation: halloweenLegalPulse 1.4s infinite ease-in-out;
}

@keyframes halloweenLegalPulse {
  0%, 100% { box-shadow: 0 0 0 2px #ff922b, 0 0 8px #ff751866; }
  50% { box-shadow: 0 0 0 3px #ffa94d, 0 0 16px #ff7518cc; }
}

body[data-theme="halloween"] .dieface {
  background: linear-gradient(
    145deg,
    #ff922b 0%,
    #cc5803 52%,
    #4a1506 100%
  );
  border-color: #ffc07888;
  color: #2b0b03;
  box-shadow:
    inset 4px 4px 7px #fff6,
    inset -5px -5px 8px #2b0b0388;
}

body[data-theme="halloween"] .logo {
  background: #ff7518;
  color: #1a0802;
  box-shadow: 0 0 12px #ff751888;
}

body[data-theme="halloween"] .panel {
  border-color: #ff75182e;
  background: #180b2077;
}

body[data-theme="halloween"] .panel h2 {
  color: #ffaa4d;
}

body[data-theme="halloween"] .btn {
  background: linear-gradient(135deg, #ff7518 0%, #e8590c 100%);
  color: #ffffff;
  border-color: #ffa94d;
  box-shadow: 0 4px 14px #ff751844;
}

body[data-theme="halloween"] .btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff922b 0%, #f76707 100%);
  box-shadow: 0 6px 18px #ff751866;
}

body[data-theme="halloween"] .pathbase {
  stroke: #ff7518;
  opacity: 0.22;
}

body[data-theme="halloween"] .pathflow {
  stroke: #ffa94d;
}

body[data-theme="halloween"] .lastroll-container {
  background: #19092499;
  border-color: #ff751844;
  box-shadow: 0 4px 16px #09020e88, inset 0 0 10px #ff75181a;
}

body[data-theme="halloween"] .lastroll-number {
  color: #ffa94d;
  text-shadow: 0 0 18px #ff7518cc, 0 2px 6px #000;
}

body[data-theme="halloween"] .lastroll-status.bonus {
  background: #ff751833;
  color: #ffc078;
  border-color: #ff922baa;
  box-shadow: 0 0 12px #ff751866;
}

/* --- Halloween Festive Board Goodies (Subtle & Non-cluttering) --- */
.halloween-decorations {
  display: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
  border-radius: inherit;
}

[data-theme="halloween"] .halloween-decorations {
  display: block;
}

.halloween-decor {
  position: absolute;
  user-select: none;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  transition: opacity 0.3s;
}

.halloween-decor.spiderweb {
  font-size: clamp(16px, 2.5vmin, 24px);
  opacity: 0.38;
}

.halloween-decor.spiderweb.top-left {
  top: 4px;
  left: 4px;
}

.halloween-decor.spiderweb.top-right {
  top: 4px;
  right: 4px;
}

.halloween-decor.spiderweb.bottom-left {
  bottom: 4px;
  left: 4px;
}

.halloween-decor.spiderweb.bottom-right {
  bottom: 4px;
  right: 4px;
}

.halloween-decor.bat-1 {
  top: 15%;
  right: 17%;
  font-size: clamp(13px, 2vmin, 18px);
  opacity: 0.42;
  animation: batFlap 4.2s ease-in-out infinite alternate;
}

.halloween-decor.bat-2 {
  bottom: 16%;
  left: 17%;
  font-size: clamp(12px, 1.8vmin, 16px);
  opacity: 0.36;
  animation: batFlap 5s ease-in-out 1.8s infinite alternate;
}

.halloween-decor.ghost-1 {
  top: 48%;
  left: 3%;
  font-size: clamp(14px, 2.2vmin, 18px);
  opacity: 0.42;
  animation: ghostDrift 6.5s ease-in-out infinite;
}

.halloween-decor.candy-1 {
  bottom: 15%;
  right: 16%;
  font-size: clamp(12px, 1.8vmin, 16px);
  opacity: 0.42;
  transform: rotate(20deg);
}

.halloween-decor.candy-2 {
  top: 15%;
  left: 17%;
  font-size: clamp(12px, 1.8vmin, 16px);
  opacity: 0.38;
  transform: rotate(-15deg);
}

.halloween-decor.pumpkin-1 {
  bottom: 4%;
  right: 48%;
  font-size: clamp(12px, 1.8vmin, 16px);
  opacity: 0.45;
  animation: pumpkinGlow 3.5s ease-in-out infinite alternate;
}

@keyframes ghostDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.35; }
  50% { transform: translateY(-7px) rotate(5deg); opacity: 0.58; }
}

@keyframes batFlap {
  0% { transform: translateY(0) scale(1) rotate(-4deg); }
  50% { transform: translateY(-5px) scale(1.06) rotate(4deg); }
  100% { transform: translateY(0) scale(1) rotate(-4deg); }
}

@keyframes pumpkinGlow {
  0% { filter: drop-shadow(0 0 2px #ff751866); opacity: 0.38; }
  100% { filter: drop-shadow(0 0 7px #ff7518cc); opacity: 0.65; }
}

/* ==========================================================================
   2. Heritage Wood Theme (Classic Teak & Brass)
   ========================================================================== */
body[data-theme="wood"] {
  background: radial-gradient(
    ellipse at 50% 0%,
    #57402c 0%,
    #271c15 55%,
    #1b1410 100%
  );
}

body[data-theme="wood"] .boardcard {
  background: linear-gradient(
    140deg,
    #925b2e,
    #4b2918 17%,
    #6b3c22 70%,
    #9b6536
  );
  border-color: #4c2b19;
  box-shadow:
    0 16px 50px #08050280,
    inset 0 0 0 2px #d4a66d80;
}

body[data-theme="wood"] .boardcard:before,
body[data-theme="wood"] .boardcard:after {
  content: "✺";
  color: #e6b777;
  opacity: 0.8;
}

body[data-theme="wood"] .cell {
  background: #3e2213ee;
  border-color: #63361e;
  color: #ffe6ba;
}

body[data-theme="wood"] .cell.safe {
  background: #5b311bee;
  border-color: #d49f64;
}

body[data-theme="wood"] .cell.safe .motif {
  color: #ffd899;
}

body[data-theme="wood"] .cell.goal {
  background: radial-gradient(circle, #7e4320 0%, #3e2213 100%);
  border-color: #ffcd82;
}

body[data-theme="wood"] .dieface {
  background: linear-gradient(
    145deg,
    #ffdaa5 0%,
    #d88745 52%,
    #955027 100%
  );
  border-color: #ffe6baaa;
  color: #4c2413;
}

/* ==========================================================================
   3. Royal Bronze Theme
   ========================================================================== */
body[data-theme="bronze"] {
  background: radial-gradient(
    ellipse at 50% 0%,
    #3e352f 0%,
    #1d1815 55%,
    #120f0e 100%
  );
}

body[data-theme="bronze"] .boardcard {
  background: linear-gradient(
    140deg,
    #70543f,
    #3b2c22 25%,
    #533e31 70%,
    #7c624d
  );
  border-color: #8c6a51;
  box-shadow:
    0 16px 50px #050403aa,
    inset 0 0 0 2px #c9a68688;
}

body[data-theme="bronze"] .boardcard:before,
body[data-theme="bronze"] .boardcard:after {
  content: "✦";
  color: #d5b596;
}

body[data-theme="bronze"] .cell {
  background: #2a221cee;
  border-color: #554437;
  color: #eddcd0;
}

body[data-theme="bronze"] .cell.safe {
  background: #48392eee;
  border-color: #c9a686;
}

body[data-theme="bronze"] .dieface {
  background: linear-gradient(
    145deg,
    #d5b596 0%,
    #987556 52%,
    #583e29 100%
  );
  border-color: #eddcd0aa;
  color: #2b1c11;
}

/* ==========================================================================
   4. Midnight Nebula Theme
   ========================================================================== */
body[data-theme="nebula"] {
  background: radial-gradient(
    ellipse at 50% 0%,
    #1e1b4b 0%,
    #0f172a 55%,
    #030712 100%
  );
}

body[data-theme="nebula"] .boardcard {
  background: linear-gradient(
    140deg,
    #312e81 0%,
    #111827 25%,
    #1e1b4b 70%,
    #3730a3 100%
  );
  border-color: #4f46e5;
  box-shadow:
    0 16px 50px #020617cc,
    0 0 25px #6366f133,
    inset 0 0 0 2px #818cf855;
}

body[data-theme="nebula"] .boardcard:before,
body[data-theme="nebula"] .boardcard:after {
  content: "✦";
  color: #a5b4fc;
  filter: drop-shadow(0 0 6px #818cf8);
}

body[data-theme="nebula"] .cell {
  background: #111827ee;
  border-color: #374151;
  color: #e0e7ff;
}

body[data-theme="nebula"] .cell.safe {
  background: #1e1b4bee;
  border-color: #818cf8;
}

body[data-theme="nebula"] .cell.safe .motif {
  color: #c7d2fe;
}

body[data-theme="nebula"] .cell.goal {
  background: radial-gradient(circle, #3730a3 0%, #111827 100%);
  border-color: #a5b4fc;
}

body[data-theme="nebula"] .dieface {
  background: linear-gradient(
    145deg,
    #a5b4fc 0%,
    #6366f1 52%,
    #312e81 100%
  );
  border-color: #c7d2fe88;
  color: #0f172a;
}
/* ==========================================================================
   5. Thanksgiving Theme
   ========================================================================== */
body[data-theme="thanksgiving"] {
  background: radial-gradient(ellipse at 50% 0%, #4b2c1d 0%, #281a0f 50%, #140e07 100%);
}

body[data-theme="thanksgiving"] .boardcard {
  background: linear-gradient(140deg, #5a3315 0%, #332016 28%, #4e361b 72%, #7b5016 100%);
  border-color: #9c6020;
  box-shadow: 0 16px 50px #0a0503cc, 0 0 25px #c975122a, inset 0 0 0 2px #c9751255;
}

body[data-theme="thanksgiving"] .cell {
  background: #331a0fcc;
  border-color: #5a2e1c;
  color: #f5deb3;
}

body[data-theme="thanksgiving"] .cell.safe {
  background: #5a1b0fee;
  border-color: #e07b12;
  box-shadow: inset 0 0 10px #e07b1244;
}

body[data-theme="thanksgiving"] .cell.goal {
  background: radial-gradient(circle, #5c2009 0%, #260f26 100%);
  border-color: #e07b12;
  box-shadow: inset 0 0 14px #e07b1288, 0 0 10px #e07b1244;
}

/* ==========================================================================
   6. Christmas Theme
   ========================================================================== */
body[data-theme="christmas"] {
  background: radial-gradient(ellipse at 50% 0%, #003300 0%, #001a00 50%, #000900 100%);
}

body[data-theme="christmas"] .boardcard {
  background: linear-gradient(140deg, #006600 0%, #004400 28%, #003300 72%, #009900 100%);
  border-color: #00ff00;
  box-shadow: 0 16px 50px #001100cc, 0 0 25px #00ff122a, inset 0 0 0 2px #00ff1255;
}

body[data-theme="christmas"] .cell {
  background: #002200cc;
  border-color: #004400;
  color: #e6ffe6;
}

body[data-theme="christmas"] .cell.safe {
  background: #004400ee;
  border-color: #00ff00;
  box-shadow: inset 0 0 10px #00ff0044;
}

body[data-theme="christmas"] .cell.goal {
  background: radial-gradient(circle, #005500 0%, #001a00 100%);
  border-color: #00ff00;
  box-shadow: inset 0 0 14px #00ff0088, 0 0 10px #00ff0044;
}

/* ==========================================================================
   7. New Year Theme (Fireworks)
   ========================================================================== */
body[data-theme="newyear"] {
  background: radial-gradient(ellipse at 50% 0%, #0a0010 0%, #050009 50%, #020004 100%);
}

body[data-theme="newyear"] .boardcard {
  background: linear-gradient(140deg, #1a001f 0%, #0a0010 28%, #1f0025 72%, #3a0044 100%);
  border-color: #ff00ff;
  box-shadow: 0 16px 50px #0a0009cc, 0 0 25px #ff00ff2a, inset 0 0 0 2px #ff00ff55;
}

body[data-theme="newyear"] .cell {
  background: #0a0010cc;
  border-color: #3a0044;
  color: #ffccff;
}

body[data-theme="newyear"] .cell.safe {
  background: #1f001fcc;
  border-color: #ff00ff;
  box-shadow: inset 0 0 10px #ff00ff44;
}

body[data-theme="newyear"] .cell.goal {
  background: radial-gradient(circle, #3a0044 0%, #12000a 100%);
  border-color: #ff00ff;
  box-shadow: inset 0 0 14px #ff00ff88, 0 0 10px #ff00ff44;
}

/* ==========================================================================
   8. Pongal Theme (Harvest & Sun)
   ========================================================================== */
body[data-theme="pongal"] {
  background: radial-gradient(ellipse at 50% 0%, #ffd700 0%, #ffae00 50%, #ff8c00 100%);
}

body[data-theme="pongal"] .boardcard {
  background: linear-gradient(140deg, #ffcc00 0%, #ffb300 28%, #ff9900 72%, #ff6600 100%);
  border-color: #ff9900;
  box-shadow: 0 16px 50px #ff8800cc, 0 0 25px #ff66002a, inset 0 0 0 2px #ff660055;
}

body[data-theme="pongal"] .cell {
  background: #ffdd33cc;
  border-color: #ff8800;
  color: #5a2d00;
}

body[data-theme="pongal"] .cell.safe {
  background: #ffbb00ee;
  border-color: #ff6600;
  box-shadow: inset 0 0 10px #ff660044;
}

body[data-theme="pongal"] .cell.goal {
  background: radial-gradient(circle, #ff6600 0%, #ff4400 100%);
  border-color: #ff6600;
  box-shadow: inset 0 0 14px #ff660088, 0 0 10px #ff660044;
}

/* Preserve existing Halloween styles after new sections */