body {
  background:
    radial-gradient(circle at 15% 18%, rgba(168, 213, 217, .24), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(223, 143, 165, .22), transparent 32%),
    linear-gradient(155deg, #695978, #41364f 55%, #241f2d);
}

#game {
  box-shadow:
    0 18px 50px rgba(31, 24, 39, .65),
    0 0 0 3px rgba(201, 182, 211, .42),
    0 0 55px rgba(168, 213, 217, .14);
}

.campaign-pill,
.campaign-progress {
  border-radius: 999px;
  color: #fffdf4;
  background: linear-gradient(110deg, #695978, #6f9fa8, #c87995);
  font: 800 clamp(10px, 1.7vh, 13px)/1 system-ui, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  box-shadow: 0 7px 18px rgba(65, 54, 79, .25);
}

.campaign-pill {
  position: absolute;
  top: clamp(14px, 3vh, 24px);
  left: clamp(14px, 3vh, 24px);
  padding: .55em 1em;
}

.campaign-progress {
  position: absolute;
  z-index: 4;
  top: 12px;
  right: 12px;
  padding: 8px 12px;
  pointer-events: none;
}

.overlay {
  background:
    linear-gradient(rgba(249, 242, 248, .88), rgba(230, 225, 242, .88)),
    radial-gradient(circle at 50% 20%, rgba(168, 213, 217, .3), transparent 48%);
}

body[data-level-theme="schnuffelpilz"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(143, 202, 181, .3), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(239, 154, 140, .22), transparent 32%),
    linear-gradient(155deg, #315f53, #17372f 55%, #3e2d27);
}

body[data-level-theme="schnuffelpilz"] #game {
  box-shadow:
    0 18px 50px rgba(5, 18, 14, .65),
    0 0 0 3px rgba(143, 202, 181, .4),
    0 0 55px rgba(239, 154, 140, .14);
}

body[data-level-theme="schnuffelpilz"] .campaign-pill,
body[data-level-theme="schnuffelpilz"] .campaign-progress {
  background: linear-gradient(110deg, #2e6b5a, #9a674b);
  box-shadow: 0 7px 18px rgba(31, 77, 64, .22);
}

body[data-level-theme="schnuffelpilz"] .overlay {
  background:
    linear-gradient(rgba(244, 241, 217, .88), rgba(226, 242, 233, .88)),
    radial-gradient(circle at 50% 20%, rgba(143, 202, 181, .4), transparent 48%);
}

body[data-level-theme="schnuffelpilz"] h1,
body[data-level-theme="schnuffelpilz"] .story b,
body[data-level-theme="schnuffelpilz"] .prompt,
body[data-level-theme="schnuffelpilz"] .controls b,
body[data-level-theme="schnuffelpilz"] .hint { color: #397868; }

body[data-level-theme="schnuffelpilz"] .subtitle,
body[data-level-theme="schnuffelpilz"] .prompt b { color: #9a674b; }

body[data-level-theme="schnuffelpilz"] .story,
body[data-level-theme="schnuffelpilz"] .controls span { color: #3f564c; }

body[data-level-theme="schnuffelpilz"] .controls span {
  border-color: #8fcab5;
  background: rgba(244, 241, 217, .9);
}

body[data-level-theme="flatterfuchs"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(224, 154, 85, .28), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(192, 136, 200, .2), transparent 32%),
    linear-gradient(155deg, #453a6e, #2d2649 55%, #3a2a22);
}

body[data-level-theme="flatterfuchs"] #game {
  box-shadow:
    0 18px 50px rgba(20, 12, 40, .65),
    0 0 0 3px rgba(224, 154, 85, .4),
    0 0 55px rgba(255, 193, 104, .16);
}

body[data-level-theme="flatterfuchs"] .campaign-pill,
body[data-level-theme="flatterfuchs"] .campaign-progress {
  background: linear-gradient(110deg, #2d2649, #a85f2c);
  box-shadow: 0 7px 18px rgba(45, 38, 73, .25);
}

body[data-level-theme="flatterfuchs"] .overlay {
  background:
    linear-gradient(rgba(253, 236, 210, .9), rgba(244, 224, 240, .9)),
    radial-gradient(circle at 50% 20%, rgba(224, 154, 85, .35), transparent 48%);
}

body[data-level-theme="flatterfuchs"] h1,
body[data-level-theme="flatterfuchs"] .story b,
body[data-level-theme="flatterfuchs"] .prompt,
body[data-level-theme="flatterfuchs"] .controls b,
body[data-level-theme="flatterfuchs"] .hint { color: #453a6e; }

body[data-level-theme="flatterfuchs"] .subtitle,
body[data-level-theme="flatterfuchs"] .prompt b { color: #a85f2c; }

body[data-level-theme="flatterfuchs"] .story,
body[data-level-theme="flatterfuchs"] .controls span { color: #4c3c4f; }

body[data-level-theme="flatterfuchs"] .controls span {
  border-color: #e09a55;
  background: rgba(253, 236, 210, .9);
}

body[data-level-theme="glitzerquiek"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255, 226, 122, .22), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(95, 184, 217, .22), transparent 32%),
    linear-gradient(155deg, #1b1442, #151033 55%, #2a1f47);
}

body[data-level-theme="glitzerquiek"] #game {
  box-shadow:
    0 18px 50px rgba(8, 4, 24, .65),
    0 0 0 3px rgba(95, 184, 217, .42),
    0 0 55px rgba(255, 226, 122, .18);
}

body[data-level-theme="glitzerquiek"] .campaign-pill,
body[data-level-theme="glitzerquiek"] .campaign-progress {
  background: linear-gradient(110deg, #151033, #347f9c);
  box-shadow: 0 7px 18px rgba(20, 60, 80, .25);
}

body[data-level-theme="glitzerquiek"] .overlay {
  background:
    linear-gradient(rgba(255, 240, 168, .9), rgba(225, 244, 255, .9)),
    radial-gradient(circle at 50% 20%, rgba(95, 184, 217, .35), transparent 48%);
}

body[data-level-theme="glitzerquiek"] h1,
body[data-level-theme="glitzerquiek"] .story b,
body[data-level-theme="glitzerquiek"] .prompt,
body[data-level-theme="glitzerquiek"] .controls b,
body[data-level-theme="glitzerquiek"] .hint { color: #1b1442; }

body[data-level-theme="glitzerquiek"] .subtitle,
body[data-level-theme="glitzerquiek"] .prompt b { color: #347f9c; }

body[data-level-theme="glitzerquiek"] .story,
body[data-level-theme="glitzerquiek"] .controls span { color: #2a1f47; }

body[data-level-theme="glitzerquiek"] .controls span {
  border-color: #5fb8d9;
  background: rgba(255, 240, 168, .9);
}

body[data-level-theme="nebelnasenbaer"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(200, 221, 208, .3), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(143, 168, 154, .24), transparent 32%),
    linear-gradient(155deg, #2f4038, #22322b 55%, #3a4f44);
}

body[data-level-theme="nebelnasenbaer"] #game {
  box-shadow:
    0 18px 50px rgba(9, 18, 14, .65),
    0 0 0 3px rgba(143, 168, 154, .42),
    0 0 55px rgba(232, 200, 106, .18);
}

body[data-level-theme="nebelnasenbaer"] .campaign-pill,
body[data-level-theme="nebelnasenbaer"] .campaign-progress {
  background: linear-gradient(110deg, #22322b, #a8873a);
  box-shadow: 0 7px 18px rgba(34, 50, 43, .25);
}

body[data-level-theme="nebelnasenbaer"] .overlay {
  background:
    linear-gradient(rgba(244, 239, 220, .9), rgba(200, 221, 208, .9)),
    radial-gradient(circle at 50% 20%, rgba(143, 168, 154, .35), transparent 48%);
}

body[data-level-theme="nebelnasenbaer"] h1,
body[data-level-theme="nebelnasenbaer"] .story b,
body[data-level-theme="nebelnasenbaer"] .prompt,
body[data-level-theme="nebelnasenbaer"] .controls b,
body[data-level-theme="nebelnasenbaer"] .hint { color: #2f4038; }

body[data-level-theme="nebelnasenbaer"] .subtitle,
body[data-level-theme="nebelnasenbaer"] .prompt b { color: #a8873a; }

body[data-level-theme="nebelnasenbaer"] .story,
body[data-level-theme="nebelnasenbaer"] .controls span { color: #3a4f44; }

body[data-level-theme="nebelnasenbaer"] .controls span {
  border-color: #8fa89a;
  background: rgba(244, 239, 220, .9);
}

body[data-level-theme="knuddelkrabbe"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(111, 208, 192, .32), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(240, 144, 144, .28), transparent 32%),
    linear-gradient(155deg, #2e8fa3, #1f6b7e 55%, #3fa9a0);
}

body[data-level-theme="knuddelkrabbe"] #game {
  box-shadow:
    0 18px 50px rgba(9, 40, 48, .62),
    0 0 0 3px rgba(255, 246, 234, .42),
    0 0 55px rgba(240, 144, 144, .2);
}

body[data-level-theme="knuddelkrabbe"] .campaign-pill,
body[data-level-theme="knuddelkrabbe"] .campaign-progress {
  background: linear-gradient(110deg, #1f6b7e, #c0555f);
  box-shadow: 0 7px 18px rgba(31, 107, 126, .25);
}

body[data-level-theme="knuddelkrabbe"] .overlay {
  background:
    linear-gradient(rgba(255, 246, 234, .92), rgba(214, 240, 236, .92)),
    radial-gradient(circle at 50% 20%, rgba(111, 208, 192, .35), transparent 48%);
}

body[data-level-theme="knuddelkrabbe"] h1,
body[data-level-theme="knuddelkrabbe"] .story b,
body[data-level-theme="knuddelkrabbe"] .prompt,
body[data-level-theme="knuddelkrabbe"] .controls b,
body[data-level-theme="knuddelkrabbe"] .hint { color: #1f6b7e; }

body[data-level-theme="knuddelkrabbe"] .subtitle,
body[data-level-theme="knuddelkrabbe"] .prompt b { color: #c0555f; }

body[data-level-theme="knuddelkrabbe"] .story,
body[data-level-theme="knuddelkrabbe"] .controls span { color: #256b75; }

body[data-level-theme="knuddelkrabbe"] .controls span {
  border-color: #6fd0c0;
  background: rgba(255, 246, 234, .92);
}

body[data-level-theme="schlummerhase"] {
  background: radial-gradient(circle at 15% 18%, rgba(155,231,255,.3), transparent 31%), radial-gradient(circle at 85% 82%, rgba(255,229,138,.24), transparent 32%), linear-gradient(155deg, #5542a0, #211b4d 55%, #182f55);
}
body[data-level-theme="schlummerhase"] #game { box-shadow: 0 18px 50px rgba(15,10,45,.7), 0 0 0 3px rgba(155,231,255,.42), 0 0 55px rgba(255,229,138,.18); }
body[data-level-theme="schlummerhase"] .campaign-pill,
body[data-level-theme="schlummerhase"] .campaign-progress { background: linear-gradient(110deg, #211b4d, #7ac6e8, #a06b32); }
body[data-level-theme="schlummerhase"] .overlay { background: linear-gradient(rgba(240,247,255,.92), rgba(224,225,255,.92)), radial-gradient(circle at 50% 20%, rgba(155,231,255,.35), transparent 48%); }
body[data-level-theme="schlummerhase"] h1,
body[data-level-theme="schlummerhase"] .story b,
body[data-level-theme="schlummerhase"] .prompt,
body[data-level-theme="schlummerhase"] .controls b,
body[data-level-theme="schlummerhase"] .hint { color: #211b4d; }
body[data-level-theme="schlummerhase"] .subtitle,
body[data-level-theme="schlummerhase"] .prompt b { color: #a06b32; }
body[data-level-theme="schlummerhase"] .story,
body[data-level-theme="schlummerhase"] .controls span { color: #25234a; }
body[data-level-theme="schlummerhase"] .controls span { border-color: #9be7ff; background: rgba(240,247,255,.94); }

body[data-level-theme="punktentigerchen"] {
  background:
    radial-gradient(circle at 15% 18%, rgba(255,217,138,.3), transparent 31%),
    radial-gradient(circle at 85% 82%, rgba(169,159,212,.24), transparent 32%),
    linear-gradient(155deg, #8a7fae, #2b2450 55%, #241f3e);
}

body[data-level-theme="punktentigerchen"] #game {
  box-shadow:
    0 18px 50px rgba(15,10,45,.7),
    0 0 0 3px rgba(255,217,138,.42),
    0 0 55px rgba(255,224,122,.18);
}

body[data-level-theme="punktentigerchen"] .campaign-pill,
body[data-level-theme="punktentigerchen"] .campaign-progress {
  background: linear-gradient(110deg, #2b2450, #ffd98a, #c96a3a);
  box-shadow: 0 7px 18px rgba(43,36,80,.28);
}

body[data-level-theme="punktentigerchen"] .overlay {
  background:
    linear-gradient(rgba(255,246,232,.92), rgba(240,240,255,.92)),
    radial-gradient(circle at 50% 20%, rgba(255,217,138,.35), transparent 48%);
}

body[data-level-theme="punktentigerchen"] h1,
body[data-level-theme="punktentigerchen"] .story b,
body[data-level-theme="punktentigerchen"] .prompt,
body[data-level-theme="punktentigerchen"] .controls b,
body[data-level-theme="punktentigerchen"] .hint { color: #2b2450; }

body[data-level-theme="punktentigerchen"] .subtitle,
body[data-level-theme="punktentigerchen"] .prompt b { color: #c96a3a; }

body[data-level-theme="punktentigerchen"] .story,
body[data-level-theme="punktentigerchen"] .controls span { color: #1d1830; }

body[data-level-theme="punktentigerchen"] .controls span {
  border-color: #ffd98a;
  background: rgba(255,246,232,.94);
}

#followup .mini {
  height: 20vh;
  border-radius: 20%;
}

body[data-level-theme="sternenmuli"] {
  background: radial-gradient(ellipse at 50% 10%, #694478, transparent 60%), linear-gradient(155deg, #120e2e, #24163c 60%, #465b69);
}
body[data-level-theme="sternenmuli"] #game { box-shadow: 0 18px 50px #0c081d, 0 0 0 3px #a3f4e1, 0 0 65px #ac72bb80; }
body[data-level-theme="sternenmuli"] .campaign-pill,
body[data-level-theme="sternenmuli"] .campaign-progress { background: linear-gradient(110deg, #24163c, #694478, #65552c); }
body[data-level-theme="sternenmuli"] .overlay { background: linear-gradient(#fff0f6ed, #e4fff5ed); }
body[data-level-theme="sternenmuli"] h1,
body[data-level-theme="sternenmuli"] .story b,
body[data-level-theme="sternenmuli"] .prompt,
body[data-level-theme="sternenmuli"] .controls b,
body[data-level-theme="sternenmuli"] .hint { color: #4b386b; }
body[data-level-theme="sternenmuli"] .subtitle,
body[data-level-theme="sternenmuli"] .prompt b { color: #885579; }
body[data-level-theme="sternenmuli"] .story,
body[data-level-theme="sternenmuli"] .controls span { color: #24163c; }
body[data-level-theme="sternenmuli"] .controls span { border-color: #ac72bb; background: #fff7ed; }
