/* ==========================================================================
   SKIN SYSTEM
   Every skin defines the same set of CSS custom properties. To add a new
   skin: copy a block, change the values, give it a new [data-skin="..."]
   selector, and add it as an <option> in the admin dashboard skin picker.
   ========================================================================== */

:root {
  /* Fallback values (used only if no skin attribute is present yet) */
  --bg-deep: #0b0713;
  --bg-mid: #1a1027;
  --bg-panel: #201533;
  --accent: #ff7a1a;
  --accent-2: #7c3aed;
  --accent-3: #39ff14;
  --text-main: #f4ecff;
  --text-muted: #b9a9d6;
  --card-face: #fdf6ea;
  --card-back: #3b1f5c;
  --card-text: #1a1027;
  --card-red: #c81c3a;
  --card-black: #1a1027;
  --tile-2: #3b2f52;
  --tile-4: #4a3766;
  --tile-8: #ff7a1a;
  --tile-16: #ff9838;
  --tile-32: #ff5f6d;
  --tile-64: #ff3d5c;
  --tile-128: #ffd23f;
  --tile-256: #ffe45f;
  --tile-512: #39ff14;
  --tile-1024: #2ee6ff;
  --tile-2048: #b76bff;
  --tile-super: #ff2ec4;
  --board-bg: #150c22;
  --cell-bg: rgba(255,255,255,0.06);
  --snake-head: #39ff14;
  --snake-body: #1fae0c;
  --snake-food: #ff7a1a;
  --font-display: 'Griffy', 'Chewy', cursive;
  --font-body: 'Nunito', system-ui, sans-serif;
  --deco-corner: '🎃';
  --deco-title: '🎃 PIXEL ARCADE 🎃';
  --glow: 0 0 18px rgba(255, 122, 26, 0.55);
}

/* ---------------------------- HALLOWEEN --------------------------------- */
[data-skin="halloween"] {
  --bg-deep: #0b0713;
  --bg-mid: #1a1027;
  --bg-panel: #21132f;
  --accent: #ff7a1a;
  --accent-2: #7c3aed;
  --accent-3: #39ff14;
  --text-main: #f4ecff;
  --text-muted: #b9a9d6;

  --card-face: #fdf6ea;
  --card-back: #3b1f5c;
  --card-text: #1a1027;
  --card-red: #c81c3a;
  --card-black: #1a1027;

  --tile-2: #3b2f52;
  --tile-4: #4a3766;
  --tile-8: #ff7a1a;
  --tile-16: #ff9838;
  --tile-32: #ff5f6d;
  --tile-64: #ff3d5c;
  --tile-128: #ffd23f;
  --tile-256: #ffe45f;
  --tile-512: #39ff14;
  --tile-1024: #2ee6ff;
  --tile-2048: #b76bff;
  --tile-super: #ff2ec4;
  --board-bg: #150c22;
  --cell-bg: rgba(255,255,255,0.06);

  --snake-head: #39ff14;
  --snake-body: #1fae0c;
  --snake-food: #ff7a1a;

  --font-display: 'Griffy', 'Chewy', cursive;
  --font-body: 'Nunito', system-ui, sans-serif;
  --deco-title: "🎃 PIXEL ARCADE 🎃";
  --glow: 0 0 18px rgba(255, 122, 26, 0.55);
}
[data-skin="halloween"] body {
  background-image:
    radial-gradient(ellipse at 20% -10%, rgba(124,58,237,0.35), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(255,122,26,0.25), transparent 45%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-mid));
}
[data-skin="halloween"] .deco-float {
  content: '🎃';
}
[data-skin="halloween"] .skin-emoji::before { content: '🎃 '; }

/* ---------------------------- CHRISTMAS --------------------------------- */
[data-skin="christmas"] {
  --bg-deep: #05130d;
  --bg-mid: #0b2318;
  --bg-panel: #0f2e1f;
  --accent: #d1263a;
  --accent-2: #1c8f4d;
  --accent-3: #ffd23f;
  --text-main: #f2fff6;
  --text-muted: #a9d6bd;

  --card-face: #fffdf6;
  --card-back: #14512f;
  --card-text: #0b2318;
  --card-red: #d1263a;
  --card-black: #123521;

  --tile-2: #12472c;
  --tile-4: #1c5c37;
  --tile-8: #d1263a;
  --tile-16: #e04554;
  --tile-32: #1c8f4d;
  --tile-64: #24b262;
  --tile-128: #ffd23f;
  --tile-256: #ffe45f;
  --tile-512: #6fd6ff;
  --tile-1024: #b76bff;
  --tile-2048: #ff2ec4;
  --tile-super: #fff2c4;
  --board-bg: #081b12;
  --cell-bg: rgba(255,255,255,0.07);

  --snake-head: #d1263a;
  --snake-body: #1c8f4d;
  --snake-food: #ffd23f;

  --font-display: 'Mountains of Christmas', 'Griffy', cursive;
  --font-body: 'Nunito', system-ui, sans-serif;
  --deco-title: "🎄 PIXEL ARCADE 🎄";
  --glow: 0 0 18px rgba(255, 210, 63, 0.55);
}
[data-skin="christmas"] body {
  background-image:
    radial-gradient(ellipse at 15% -10%, rgba(28,143,77,0.35), transparent 55%),
    radial-gradient(ellipse at 90% 5%, rgba(209,38,58,0.3), transparent 45%),
    linear-gradient(180deg, var(--bg-deep), var(--bg-mid));
}
[data-skin="christmas"] .skin-emoji::before { content: '🎄 '; }

/* Snowfall only shows up in the christmas skin */
[data-skin="christmas"] .snowfall { display: block; }
[data-skin="halloween"] .snowfall { display: none; }
[data-skin="halloween"] .batfall { display: block; }
[data-skin="christmas"] .batfall { display: none; }