/* ==========================================================================
   Wortschmiede – Themes
   Ein Theme = ein [data-theme="..."]-Block mit Design-Tokens.
   Die Text-/Metaphern-Ebene (Stufennamen, Buttonwoerter) liegt in js/themes.js.
   Anleitung fuer eigene Themes: docs/THEMES.md
   ========================================================================== */

/* ---------- 1) FORGE – mittelalterliche Schmiede in Blockoptik ---------- */
[data-theme="forge"] {
  --topbar-bg: #120e0b;
  --bg: #15100d;
  --bg-elev: #241a14;
  --bg-sunken: #100b08;
  --ink: #f4e8d9;
  --ink-dim: #b9a48c;
  --ink-faint: #8a755f;
  --accent: #ff7a18;
  --accent-2: #ffc242;
  --accent-ink: #1a1109;
  --ok: #74c05b;
  --warn: #e8a33d;
  --bad: #e0554f;
  --line: #4a3627;
  --radius: 3px;
  --radius-lg: 5px;
  --btn-drop: #0c0806;
  --shadow-card: 0 6px 0 #0c0806, 0 12px 26px rgba(0, 0, 0, .5);
  --bevel-light: rgba(255, 222, 170, .16);
  --bevel-dark: rgba(0, 0, 0, .5);
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --display-transform: uppercase;
  --display-spacing: .07em;
  --display-shadow: 2px 2px 0 rgba(0, 0, 0, .65);
  --card-face: linear-gradient(180deg, #33251a, #1f1710);
  --tile-top: #5a4230;
  --tile-bottom: #3b2b1f;
  --glow:
    radial-gradient(60% 22% at 50% 92%, rgba(255, 170, 40, .5), transparent 70%),
    radial-gradient(130% 55% at 50% 112%, rgba(255, 106, 0, .45), transparent 72%);
  --pixel: 1;
  /* Steinmauer + Russ: zwei gestapelte Pixelraster */
  --texture:
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 2px, transparent 2px 4px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.16) 0 2px, transparent 2px 4px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  --brand-clip: polygon(42% 0, 58% 0, 58% 42%, 100% 58%, 100% 74%, 0 74%, 0 58%, 42% 42%);
  --brand-mark: linear-gradient(180deg, #ffd873, #ff7a18);
  /* Blockkante: harte 3px-Stufe hell oben/links, dunkel unten/rechts */
  --frame:
    inset 0 3px 0 var(--bevel-light), inset 3px 0 0 var(--bevel-light),
    inset 0 -3px 0 var(--bevel-dark), inset -3px 0 0 var(--bevel-dark);
}
/* Steinplatten-Anmutung fuer Flaechen im Schmiede-Theme */
[data-theme="forge"] .panel,
[data-theme="forge"] .choice,
[data-theme="forge"] .deck {
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 4px);
}
[data-theme="forge"] .quiz-prompt,
[data-theme="forge"] .flipcard__face,
[data-theme="forge"] .swipe-card {
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px),
    var(--card-face);
}

/* ---------- 2) ANIME – helles Shonen-Trainingslager --------------------- */
[data-theme="anime"] {
  --topbar-bg: #120c1e;
  --bg: #150e22;
  --bg-elev: #241640;
  --bg-sunken: #0f0a1c;
  --ink: #fdf3ff;
  --ink-dim: #c3aee6;
  --ink-faint: #907bb5;
  --accent: #ff4d97;
  --accent-2: #4be1ff;
  --accent-ink: #16091f;
  --ok: #4ce6b0;
  --warn: #ffd166;
  --bad: #ff5c7a;
  --line: #4a2d7a;
  --radius: 14px;
  --radius-lg: 22px;
  --btn-drop: #1a0f2e;
  --shadow-card: 0 10px 30px rgba(255, 77, 151, .28), 0 2px 0 rgba(255, 255, 255, .12) inset;
  --bevel-light: rgba(255, 255, 255, .22);
  --bevel-dark: rgba(80, 20, 120, .35);
  --font-display: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --display-transform: none;
  --display-spacing: .01em;
  --display-shadow: 0 0 14px rgba(75, 225, 255, .55);
  --card-face: linear-gradient(160deg, #3a1f63 0%, #23133f 60%, #2c1a4d 100%);
  --tile-top: #5b2f96;
  --tile-bottom: #3a1d63;
  --glow: radial-gradient(120% 70% at 50% -10%, rgba(255, 77, 151, .35), transparent 65%),
          radial-gradient(90% 50% at 50% 110%, rgba(75, 225, 255, .28), transparent 70%);
  --pixel: 0;
  /* Speedlines + Sternenstaub */
  --texture:
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 1px, transparent 1px 26px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%23ffffff' opacity='.18'%3E%3Ccircle cx='18' cy='24' r='1.4'/%3E%3Ccircle cx='84' cy='12' r='1'/%3E%3Ccircle cx='102' cy='72' r='1.6'/%3E%3Ccircle cx='38' cy='96' r='1'/%3E%3Ccircle cx='66' cy='54' r='1.2'/%3E%3C/g%3E%3C/svg%3E");
  --brand-clip: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 82% 100%, 50% 76%, 18% 100%, 30% 60%, 0 38%, 38% 36%);
  --brand-mark: linear-gradient(135deg, #4be1ff, #ff4d97);
  --icon-filter: drop-shadow(0 0 6px rgba(75, 225, 255, .6));
  --frame: inset 0 1px 0 rgba(255, 255, 255, .28), 0 0 22px rgba(255, 77, 151, .16);
}
[data-theme="anime"] .btn { font-weight: 600; }
[data-theme="anime"] .flipcard__face, [data-theme="anime"] .swipe-card { backdrop-filter: blur(2px); }

/* ---------- 3) PERGAMENT – hell, ruhig, augenschonend ------------------- */
[data-theme="pergament"] {
  --bg: #f2e8d5;
  --bg-elev: #fbf5e9;
  --bg-sunken: #e8dcc4;
  --ink: #2f2618;
  --ink-dim: #6b5c45;
  --ink-faint: #97876c;
  --accent: #9a5b1f;
  --accent-2: #c98b2e;
  --accent-ink: #fff8ec;
  --ok: #3f7d3a;
  --warn: #b57614;
  --bad: #a52f2a;
  --line: #cbb790;
  --radius: 14px;
  --radius-lg: 24px;
  --btn-drop: #d6c5a2;
  --shadow-card: 0 6px 0 #e2d3b6, 0 12px 24px rgba(90, 70, 40, .16);
  --bevel-light: rgba(255, 255, 255, .7);
  --bevel-dark: rgba(140, 115, 70, .25);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --display-transform: none;
  --display-spacing: .01em;
  --display-shadow: none;
  --card-face: linear-gradient(180deg, #fffaf0, #f3e8d2);
  --tile-top: #f7edd9;
  --tile-bottom: #e6d7b8;
  --glow: radial-gradient(120% 60% at 50% 0%, rgba(201, 139, 46, .16), transparent 70%);
  --pixel: 0;
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='p'%3E%3CfeTurbulence baseFrequency='.7' numOctaves='3'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23p)' opacity='.055'/%3E%3C/svg%3E");
  --brand-clip: polygon(50% 0, 100% 30%, 100% 100%, 0 100%, 0 30%);
  --brand-mark: linear-gradient(180deg, #c98b2e, #9a5b1f);
}
[data-theme="pergament"] { --frame: inset 0 1px 0 var(--bevel-light); --deco: none; }
/* Als einziges helles Theme braucht Pergament eine eigene Kopfleiste: sie
   reicht unter die Statusleiste, deren Symbole das Geraet hell zeichnet.
   Dunkles Leder ueber hellem Papier - Uhrzeit und Akku bleiben lesbar. */
[data-theme="pergament"] {
  --topbar-bg: #3a2c1c;
  --topbar-ink: #f6ecd9;
  --topbar-dim: #cbb790;
}
/* runde Ecken brauchen etwas mehr Innenabstand, sonst klebt der Text an der Rundung */
[data-theme="pergament"] .panel { padding: 16px 18px; }
[data-theme="pergament"] .btn { padding: 10px 20px; }
[data-theme="pergament"] .chip { padding: 4px 12px; }
[data-theme="pergament"] .topbar, [data-theme="pergament"] .tabbar { backdrop-filter: none; }

/* ---------- 4) FUSSBALL – Flutlicht über nassem Rasen ------------------- */
[data-theme="fussball"] {
  --topbar-bg: #091d13;
  --bg: #0a2116;
  --bg-elev: #123a25;
  --bg-sunken: #06190f;
  --ink: #f1f9f3;
  --ink-dim: #a9cbb6;
  --ink-faint: #74a086;
  --accent: #22c55e;
  --accent-2: #ffffff;
  --accent-ink: #06210f;
  --ok: #4ade80;
  --warn: #fbbf24;          /* gelbe Karte */
  --bad: #ef4444;           /* rote Karte */
  --line: #1e5335;
  --radius: 12px;
  --radius-lg: 18px;
  --btn-drop: #061c11;
  --shadow-card: 0 8px 22px rgba(0, 0, 0, .45);
  --bevel-light: rgba(255, 255, 255, .18);
  --bevel-dark: rgba(0, 0, 0, .35);
  --font-display: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --display-transform: uppercase;
  --display-spacing: .05em;
  --display-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  --card-face: linear-gradient(180deg, #16452c, #0e2e1d);
  --tile-top: #1d5837;
  --tile-bottom: #123a25;
  --frame: inset 0 1px 0 var(--bevel-light);
  /* Rasenbahnen wie nach dem Mähen, dazu Flutlicht von oben */
  /* Flutlicht von oben, Rasenschimmer von unten. */
  --glow:
    radial-gradient(80% 42% at 50% 0%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 72%),
    linear-gradient(0deg, rgba(34, 197, 94, .24), rgba(34, 197, 94, 0) 40%);
  --texture: repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 34px, transparent 34px 68px);
  --brand-clip: circle(50% at 50% 50%);
  --brand-mark: radial-gradient(circle at 38% 32%, #ffffff, #d8e6dc 55%, #7f8f85);
  --pixel: 0;
}

/* ---------- 5) DUNKLER WALD – Nebel, Rinde, Fackelschein ---------------- */
[data-theme="wald"] {
  --topbar-bg: #09110e;
  --bg: #0a1310;
  --bg-elev: #16241d;
  --bg-sunken: #060d0a;
  --ink: #e4ede2;
  --ink-dim: #a4b9a6;
  --ink-faint: #6f8779;
  --accent: #d08a3c;        /* Fackel */
  --accent-2: #9ecf7d;      /* junges Blatt */
  --accent-ink: #14100a;
  --ok: #8fbf6a;
  --warn: #d9a441;
  --bad: #c25b4a;
  --line: #2b3f34;
  --radius: 10px;
  --radius-lg: 16px;
  --btn-drop: #060c09;
  --shadow-card: 0 8px 24px rgba(0, 0, 0, .55);
  --bevel-light: rgba(210, 230, 200, .12);
  --bevel-dark: rgba(0, 0, 0, .5);
  --font-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --display-transform: none;
  --display-spacing: .01em;
  --display-shadow: 0 2px 8px rgba(0, 0, 0, .6);
  --card-face: linear-gradient(170deg, #1d2f26, #111c17);
  --tile-top: #2c4034;
  --tile-bottom: #1b2a22;
  --frame: inset 0 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
  /* Fackelschein von unten, kalter Mondschein von oben, Nebelbänke dazwischen */
  --glow:
    radial-gradient(80% 34% at 50% 106%, rgba(208, 138, 60, .34), transparent 74%),
    radial-gradient(90% 40% at 50% -10%, rgba(150, 190, 210, .12), transparent 70%);
  --texture:
    repeating-linear-gradient(94deg, rgba(255, 255, 255, .016) 0 2px, transparent 2px 7px),
    radial-gradient(60% 18% at 20% 42%, rgba(200, 220, 210, .05), transparent 70%),
    radial-gradient(50% 16% at 78% 68%, rgba(200, 220, 210, .045), transparent 70%);
  --brand-clip: polygon(50% 0, 78% 42%, 64% 42%, 88% 82%, 58% 82%, 58% 100%, 42% 100%, 42% 82%, 12% 82%, 36% 42%, 22% 42%);
  --brand-mark: linear-gradient(180deg, #9ecf7d, #3f6b3a);
  --pixel: 0;
}

/* ---------- 6) WELTRAUM – Sternenfeld und Instrumentenlicht ------------- */
[data-theme="space"] {
  --topbar-bg: #04060d;
  --bg: #05070f;
  --bg-elev: #0e1526;
  --bg-sunken: #02040a;
  --ink: #e8eeff;
  --ink-dim: #9fb0d0;
  --ink-faint: #68799a;
  --accent: #4aa8ff;
  --accent-2: #7ee8fa;
  --accent-ink: #03060e;
  --ok: #4ce6b0;
  --warn: #ffd166;
  --bad: #ff5c7a;
  --line: #1c2a4a;
  --radius: 5px;
  --radius-lg: 9px;
  --btn-drop: #020509;
  --shadow-card: 0 8px 26px rgba(0, 0, 0, .6), 0 0 22px rgba(74, 168, 255, .12);
  --bevel-light: rgba(126, 232, 250, .22);
  --bevel-dark: rgba(0, 0, 0, .5);
  --font-display: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --display-transform: uppercase;
  --display-spacing: .1em;
  --display-shadow: 0 0 12px rgba(74, 168, 255, .5);
  --card-face: linear-gradient(165deg, #121c33, #070c18);
  --tile-top: #1a2745;
  --tile-bottom: #101a2e;
  --frame: inset 0 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
  --glow:
    radial-gradient(75% 38% at 22% -6%, rgba(122, 92, 220, .3), transparent 70%),
    radial-gradient(90% 42% at 78% 104%, rgba(74, 168, 255, .22), transparent 72%);
  /* Sternenfeld in zwei Größen, damit es Tiefe bekommt */
  --texture:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='24' cy='38' r='1.3' opacity='.5'/%3E%3Ccircle cx='142' cy='16' r='.9' opacity='.35'/%3E%3Ccircle cx='88' cy='102' r='1.6' opacity='.55'/%3E%3Ccircle cx='176' cy='128' r='1' opacity='.4'/%3E%3Ccircle cx='52' cy='168' r='1.2' opacity='.45'/%3E%3Ccircle cx='118' cy='186' r='.8' opacity='.3'/%3E%3Ccircle cx='196' cy='72' r='1.1' opacity='.4'/%3E%3Ccircle cx='8' cy='118' r='.9' opacity='.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='%23bcd4ff'%3E%3Ccircle cx='14' cy='22' r='.6' opacity='.35'/%3E%3Ccircle cx='62' cy='54' r='.5' opacity='.3'/%3E%3Ccircle cx='38' cy='70' r='.6' opacity='.28'/%3E%3C/g%3E%3C/svg%3E");
  --brand-clip: polygon(50% 0, 61% 35%, 100% 35%, 68% 58%, 80% 100%, 50% 74%, 20% 100%, 32% 58%, 0 35%, 39% 35%);
  --brand-mark: linear-gradient(135deg, #7ee8fa, #4aa8ff);
  --pixel: 0;
}
[data-theme="space"] .btn, [data-theme="space"] .choice { letter-spacing: .04em; }