/* Die Vorlagen. Jede setzt nur Variablen + ein paar Extras;
   das Spielbrett selbst (play.css) bleibt identisch. */

[data-tpl] {
  --radius: 14px;
  --gap: 10px;
  --tile-radius: 12px;
  --font-ui: 'Outfit', system-ui, sans-serif;
  --font-display: 'Anton', Impact, sans-serif;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --tile-shadow: 0 8px 0 rgba(0, 0, 0, .35);
  --tile-hover-lift: -6px;
  --board-deco: none;
  /* Schrift auf Akzentflächen (Knöpfe). Muss pro Vorlage stimmen, sonst
     steht bei dunklen Akzentfarben Schwarz auf Schwarz. */
  --on-accent: #0b0b12;
  --team-bg: color-mix(in srgb, var(--panel) 85%, transparent);
  --team-fg: var(--text);
}

/* Helle Vorlagen: die Punktetafel bekommt einen dunklen Streifen, sonst
   verschwinden helle Teamfarben wie Gelb auf weißem Grund. */
[data-tpl="paper"], [data-tpl="comic"] {
  --on-accent: #fffdf7;
  --team-bg: #1f1c17;
  --team-fg: #fdf8ee;
}

/* ---------- 1. Klassik ---------- */
[data-tpl="classic"] {
  --bg: #050b28;
  --bg2: #0b1c6b;
  --panel: #0d1a45;
  --tile: linear-gradient(180deg, #1b3bb5, #0f2585);
  --tile-hover: linear-gradient(180deg, #2a52e0, #17359e);
  --tile-text: #f5c85a;
  --text: #eef2ff;
  --muted: #9fb0e6;
  --accent: #f0c04a;
  --accent2: #6f8cff;
  --line: rgba(240, 192, 74, .35);
  --cat-bg: linear-gradient(180deg, #0a1a55, #071240);
  --board-deco: radial-gradient(1200px 600px at 50% -10%, rgba(111, 140, 255, .25), transparent 70%);
}

/* ---------- 2. Neon Arcade ---------- */
[data-tpl="neon"] {
  --bg: #07030f;
  --bg2: #12042a;
  --panel: #150a2b;
  --tile: linear-gradient(180deg, #1b0b3a, #0e0620);
  --tile-hover: linear-gradient(180deg, #35106e, #1a0940);
  --tile-text: #22e4ff;
  --text: #f2e9ff;
  --muted: #a48fd0;
  --accent: #ff2e97;
  --accent2: #22e4ff;
  --line: rgba(255, 46, 151, .45);
  --cat-bg: linear-gradient(180deg, #2a0a4d, #14062c);
  --font-display: 'Orbitron', 'Outfit', sans-serif;
  --tile-shadow: 0 0 0 1px rgba(34, 228, 255, .25), 0 0 22px rgba(255, 46, 151, .25);
  --board-deco:
    repeating-linear-gradient(0deg, rgba(34, 228, 255, .045) 0 1px, transparent 1px 3px),
    radial-gradient(900px 500px at 80% 0%, rgba(255, 46, 151, .22), transparent 70%),
    radial-gradient(900px 500px at 10% 100%, rgba(34, 228, 255, .18), transparent 70%);
}

/* ---------- 3. Papier ---------- */
[data-tpl="paper"] {
  --bg: #f7f1e4;
  --bg2: #efe6d3;
  --panel: #fffaf0;
  --tile: linear-gradient(180deg, #ffffff, #f6efe1);
  --tile-hover: linear-gradient(180deg, #ffffff, #ece0c9);
  --tile-text: #1f5f4e;
  --text: #2a2622;
  --muted: #8a7f6d;
  --accent: #1f5f4e;
  --accent2: #c2703c;
  --line: rgba(31, 95, 78, .25);
  --cat-bg: linear-gradient(180deg, #1f5f4e, #17493c);
  --font-display: 'Fraunces', Georgia, serif;
  --shadow: 0 14px 34px rgba(90, 70, 40, .18);
  --tile-shadow: 0 3px 0 rgba(140, 120, 90, .30);
  --tile-radius: 10px;
  --board-deco:
    repeating-linear-gradient(45deg, rgba(160, 140, 105, .05) 0 2px, transparent 2px 6px);
}

/* ---------- 4. Deep Space ---------- */
[data-tpl="space"] {
  --bg: #03050e;
  --bg2: #0a1130;
  --panel: rgba(20, 30, 70, .55);
  --tile: linear-gradient(180deg, rgba(70, 105, 220, .28), rgba(20, 32, 80, .5));
  --tile-hover: linear-gradient(180deg, rgba(110, 160, 255, .45), rgba(30, 50, 120, .6));
  --tile-text: #9fe9ff;
  --text: #e8f4ff;
  --muted: #8fa4cf;
  --accent: #7ee0ff;
  --accent2: #b18cff;
  --line: rgba(126, 224, 255, .3);
  --cat-bg: linear-gradient(180deg, rgba(90, 130, 255, .25), rgba(20, 30, 80, .45));
  --font-display: 'Outfit', system-ui, sans-serif;
  --tile-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  --tile-radius: 18px;
  --board-deco:
    radial-gradient(1000px 700px at 70% 10%, rgba(126, 224, 255, .12), transparent 65%),
    radial-gradient(800px 600px at 15% 90%, rgba(177, 140, 255, .14), transparent 65%);
}

/* ---------- 6. Magma ---------- */
[data-tpl="magma"] {
  --bg: #100503;
  --bg2: #2b0a04;
  --panel: #1e0806;
  --tile: linear-gradient(180deg, #3a1409, #1b0703);
  --tile-hover: linear-gradient(180deg, #6b2410, #351006);
  --tile-text: #ffb347;
  --text: #ffeadf;
  --muted: #c08a72;
  --accent: #ff7a18;
  --accent2: #ffd166;
  --line: rgba(255, 122, 24, .4);
  --cat-bg: linear-gradient(180deg, #58180b, #2a0a04);
  --tile-shadow: 0 8px 0 rgba(0, 0, 0, .5), 0 0 22px rgba(255, 90, 10, .22);
  --board-deco:
    radial-gradient(800px 420px at 50% 108%, rgba(255, 110, 20, .40), transparent 70%),
    radial-gradient(500px 300px at 12% -8%, rgba(255, 60, 0, .22), transparent 70%);
}

/* ---------- 7. Tiefsee ---------- */
[data-tpl="ocean"] {
  --bg: #01121f;
  --bg2: #052f4a;
  --panel: rgba(6, 46, 70, .72);
  --tile: linear-gradient(180deg, rgba(20, 110, 140, .55), rgba(4, 40, 62, .75));
  --tile-hover: linear-gradient(180deg, rgba(40, 170, 190, .7), rgba(8, 62, 90, .85));
  --tile-text: #9ef7ef;
  --text: #e4fbff;
  --muted: #74a8bd;
  --accent: #35e0d0;
  --accent2: #6fd0ff;
  --line: rgba(53, 224, 208, .3);
  --cat-bg: linear-gradient(180deg, rgba(10, 90, 120, .7), rgba(3, 34, 54, .8));
  --tile-radius: 16px;
  --tile-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  --board-deco:
    radial-gradient(900px 500px at 50% -12%, rgba(90, 220, 230, .22), transparent 70%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px);
}

/* ---------- 8. Comic ---------- */
[data-tpl="comic"] {
  --bg: #fff3d6;
  --bg2: #ffe3a8;
  --panel: #fffdf6;
  --tile: linear-gradient(180deg, #ff5a5e, #ff2f34);
  --tile-hover: linear-gradient(180deg, #ffd166, #ffb703);
  --tile-text: #fff8e7;
  --text: #16130d;
  --muted: #6b6154;
  --accent: #111111;
  --accent2: #1e6fff;
  --line: #111111;
  --cat-bg: linear-gradient(180deg, #1e6fff, #0b46b5);
  --font-display: 'Bangers', Impact, sans-serif;
  --tile-radius: 12px;
  --tile-shadow: 6px 6px 0 #111;
  --shadow: 10px 10px 0 rgba(17, 17, 17, .85);
  --board-deco:
    radial-gradient(rgba(17, 17, 17, .14) 1.4px, transparent 1.5px) 0 0 / 11px 11px,
    radial-gradient(700px 420px at 82% -6%, rgba(255, 183, 3, .5), transparent 70%);
}
[data-tpl="comic"] .tile,
[data-tpl="comic"] .cat { border-width: 3px; border-color: #111; }
[data-tpl="comic"] .tile { letter-spacing: .06em; }

/* ---------- 9. Frost ---------- */
[data-tpl="frost"] {
  --bg: #061826;
  --bg2: #103b58;
  --panel: rgba(16, 48, 72, .7);
  --tile: linear-gradient(160deg, rgba(180, 232, 255, .26), rgba(30, 78, 110, .5));
  --tile-hover: linear-gradient(160deg, rgba(210, 245, 255, .45), rgba(50, 120, 160, .6));
  --tile-text: #d8f6ff;
  --text: #eefaff;
  --muted: #8fb6cc;
  --accent: #9be7ff;
  --accent2: #ffffff;
  --line: rgba(190, 235, 255, .38);
  --cat-bg: linear-gradient(160deg, rgba(150, 215, 245, .35), rgba(16, 55, 82, .6));
  --tile-radius: 10px;
  --tile-shadow: 0 8px 24px rgba(0, 20, 40, .5), inset 0 1px 0 rgba(255, 255, 255, .35);
  --board-deco:
    radial-gradient(700px 420px at 25% -10%, rgba(190, 240, 255, .28), transparent 70%),
    repeating-linear-gradient(58deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-58deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 14px);
}

/* ---------- 10. Schiefer ---------- */
[data-tpl="slate"] {
  --bg: #101114;
  --bg2: #191b20;
  --panel: #1b1d22;
  --tile: linear-gradient(180deg, #24262c, #1b1d22);
  --tile-hover: linear-gradient(180deg, #32353d, #24262c);
  --tile-text: #e6e7ea;
  --text: #eceef1;
  --muted: #8b8f98;
  --accent: #e6e7ea;
  --accent2: #9aa0aa;
  --line: rgba(255, 255, 255, .12);
  --cat-bg: linear-gradient(180deg, #2a2d33, #1e2025);
  --font-display: 'Space Grotesk', 'Outfit', system-ui, sans-serif;
  --tile-radius: 8px;
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .05);
  --tile-hover-lift: -3px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .55);
  --board-deco: none;
}

/* ---------- 5. TV Show ---------- */
[data-tpl="tv"] {
  --bg: #0c0409;
  --bg2: #2a0a1a;
  --panel: #1a0710;
  --tile: linear-gradient(180deg, #7d1132, #4a0a1f);
  --tile-hover: linear-gradient(180deg, #ad1a48, #6c0f2c);
  --tile-text: #ffd166;
  --text: #fff3e6;
  --muted: #d5a2ad;
  --accent: #ffd166;
  --accent2: #ff6b6b;
  --line: rgba(255, 209, 102, .4);
  --cat-bg: linear-gradient(180deg, #3b0c1e, #250611);
  --font-display: 'Anton', Impact, sans-serif;
  --tile-shadow: 0 10px 0 rgba(0, 0, 0, .45);
  --board-deco:
    radial-gradient(700px 420px at 50% -5%, rgba(255, 209, 102, .30), transparent 70%),
    conic-gradient(from 200deg at 50% -20%, rgba(255, 255, 255, .07), transparent 25%, rgba(255, 255, 255, .07) 50%, transparent 75%);
}