/* Schuno – Cosmetics (im Spiel bisher nur im Reiter Sammlung, dazu die Bibliothek). Muster setzt Cos.applyStyles() als CSS-Variablen. */

/* Profilrahmen ohne Schlagschatten, nur der Kreis (Nutzer, 17.10.2026). Profilbild im Rahmen immer auf Weiß, auch bei Schwarz
   (sonst geht die dunkle Figur im Rahmen unter) */
.cos-frame .pb-avatar { background: #fff; }

/* ---------- Holz ---------- */
/* Brett: nur die eigene Hälfte bekommt sk-<set> */
.sq.l.sk-holz { background: var(--holz-sq-l) center / 100% 100%; }
.sq.d.sk-holz { background: var(--holz-sq-d) center / 100% 100%; }

/* Kartenrücken: Bretter mit Nägeln, Oval aus dunklem Nussholz, Logo wie eingebrannt hell */
.card.c-back.bk-holz { background: var(--holz-back) center / 100% 100%; }
.bk-holz .c-oval { background: #6E3F22; box-shadow: inset 0 0 0 calc(var(--cw) * .03) #A4683B; }
.bk-holz .c-logo { color: #FFE2B0; }

/* Schlageffekt: Holzsplitter-Stern; zu den normalen Schlagwörtern (CAPTURE_WORDS) kommt das Set-Wort „KNACKS!“ in den Pool (ein Effekt) */
.boom .cap-holz { color: #FFF1D6; }

/* Profilrahmen: Holzring mit vier Nägeln */
.cos-frame { position: relative; display: inline-grid; place-items: center; border-radius: 50%; flex: none; }
.fr-holz { padding: 5px; background: var(--holz-plate) center / 100% 100%; border: 3px solid var(--ink); }
.fr-holz::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  --nail: #6A6580 0 1.6px, var(--ink) 1.7px 2.4px, transparent 2.6px;
  background:
    radial-gradient(circle at 50% 2.5px, var(--nail)),
    radial-gradient(circle at 50% calc(100% - 2.5px), var(--nail)),
    radial-gradient(circle at 2.5px 50%, var(--nail)),
    radial-gradient(circle at calc(100% - 2.5px) 50%, var(--nail));
}

/* ---------- Skizzenblock ---------- */
/* Brett: Rechenpapier, dunkle Felder mit Bleistift schraffiert */
.sq.l.sk-skizze { background: var(--skizze-sq-l) center / 100% 100%; }
.sq.d.sk-skizze { background: var(--skizze-sq-d) center / 100% 100%; }

/* Kartenrücken: Karoblatt mit rotem Rand und Lochung, Oval schraffiert */
.card.c-back.bk-skizze { background: var(--skizze-back) center / 100% 100%; }
.bk-skizze .c-oval { background: var(--skizze-hatch) center / 40% 40%; }
.bk-skizze .c-oval::after {
  content: ''; position: absolute; inset: -4px -2px -2px -4px; border: 1.5px solid #5A5A66; border-radius: 50%; transform: rotate(4deg);
}
.bk-skizze .c-logo { color: #fff; }

/* Schlageffekt: Graphit-Schrift auf Papierstern */
.boom .cap-skizze { color: #4A4A55; -webkit-text-stroke: 1px #fff; text-shadow: 2px 2px 0 var(--ink); }

/* Profilrahmen: Rechenpapier-Ring */
.fr-skizze { padding: 5px; background: var(--skizze-paper) center / 100% 100%; border: 3px solid var(--ink); }

/* Titel: Zettel aus liniertem Papier */
.ti-skizze { background: var(--skizze-lined) center / 100% 100%; color: #3A3A44; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Garten ---------- */
/* Brett: Rasen im Mähmuster, auf einigen hellen Feldern ein Gänseblümchen */
.sq.l.sk-garten { background: var(--garten-sq-l) center / 100% 100%; }
.sq.l.sk-garten:nth-child(5n + 2) { background-image: var(--garten-sq-f); }
.sq.d.sk-garten { background: var(--garten-sq-d) center / 100% 100%; }

/* Kartenrücken: Rasenstreifen mit Blumen, Oval als Beet mit Erdkrümeln */
.card.c-back.bk-garten { background: var(--garten-back) center / 100% 100%; }
.bk-garten .c-oval { background: #8A5A33 radial-gradient(circle, #6B4224 1.6px, transparent 1.9px) 0 0 / 9px 9px; }

/* Schlageffekt */
.boom .cap-garten { color: #fff; }

/* Profilrahmen: Blätterkranz mit vier Gänseblümchen */
.fr-garten { padding: 6px; background: var(--garten-leaves) 0 0 / 30px 30px; border: 3px solid var(--ink); }
.fr-garten::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  --fl: #FFD23F 0 1.7px, var(--ink) 1.8px 2.3px, #fff 2.4px 4.2px, var(--ink) 4.3px 5px, transparent 5.2px;
  background:
    radial-gradient(circle at 50% 3px, var(--fl)),
    radial-gradient(circle at 50% calc(100% - 3px), var(--fl)),
    radial-gradient(circle at 3px 50%, var(--fl)),
    radial-gradient(circle at calc(100% - 3px) 50%, var(--fl));
}

/* Titel: grünes Blätterschild */
.ti-garten {
  background: var(--garten-leaves) 0 0 / 26px 26px; color: #fff;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Strand ---------- */
/* Brett: Sand, auf einigen hellen Feldern eine Muschel, dunkle Felder nasser Sand mit Wellenrippe */
.sq.l.sk-strand { background: var(--strand-sq-l) center / 100% 100%; }
.sq.l.sk-strand:nth-child(5n + 3) { background-image: var(--strand-sq-s); }
.sq.d.sk-strand { background: var(--strand-sq-d) center / 100% 100%; }

/* Kartenrücken: Strandtuch, Oval als Meer */
.card.c-back.bk-strand { background: var(--strand-back) center / 100% 100%; }
.bk-strand .c-oval { background: var(--strand-water) center / 100% 100%; }

/* Schlageffekt */
.boom .cap-strand { color: #fff; }

/* Profilrahmen: Rettungsring rot-weiß */
.fr-strand {
  padding: 6px; border: 3px solid var(--ink);
  background: conic-gradient(from -22.5deg, #EE4B2B 0 45deg, #fff 0 90deg, #EE4B2B 0 135deg, #fff 0 180deg, #EE4B2B 0 225deg, #fff 0 270deg, #EE4B2B 0 315deg, #fff 0);
}

/* Titel: Wasser-Schild */
.ti-strand {
  background: var(--strand-water) center / 100% 100%; color: #fff;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Pixel ---------- */
/* Brett: Spielfeld-Kacheln mit hellem und dunklem Rand */
.sq.l.sk-pixel { background: var(--pixel-sq-l) center / 100% 100%; image-rendering: pixelated; }
.sq.d.sk-pixel { background: var(--pixel-sq-d) center / 100% 100%; image-rendering: pixelated; }

/* Kartenrücken: Spielmodul; Oval als Pixel-Ellipse mit geschlossener Kontur (Bild statt clip-path) */
.card.c-back.bk-pixel { background: var(--pixel-back) center / 100% 100%; }
.bk-pixel .c-oval { border: 0; border-radius: 0; background: var(--pixel-oval) center / 100% 100%; }

/* Schlageffekt */
.boom .cap-pixel { color: #fff; }

/* Profilrahmen: Pixelring aus kleinen Quadraten */
.fr-pixel { padding: 6px; border: 3px solid var(--ink); background: repeating-conic-gradient(#F8D878 0 25%, #E39A2E 0 50%) 0 0 / 6px 6px; }

/* Titel: alter Bildschirm, grüne Schrift mit Zeilenstreifen */
.ti-pixel {
  color: #8BEA5C; border-radius: 2px; box-shadow: 2px 2px 0 var(--ink); text-shadow: 0 0 4px rgba(139, 234, 92, .6);
  background: repeating-linear-gradient(0deg, #1E2A5A 0 2px, #26346E 2px 4px);
}

/* ---------- Eis ---------- */
.sq.l.sk-eis { background: var(--eis-sq-l) center / 100% 100%; }
.sq.d.sk-eis { background: var(--eis-sq-d) center / 100% 100%; }
/* Kartenrücken: Frost mit Schneeflocken, Oval aus hellem Eis, Logo blau */
.card.c-back.bk-eis { background: var(--eis-back) center / 100% 100%; }
.bk-eis .c-oval { background: var(--eis-frost) center / 100% 100%; }
.bk-eis .c-logo { color: #2E6FA8; }
.boom .cap-eis { color: #fff; }
/* Profilrahmen: Frostring aus geschliffenen Eiskristall-Facetten mit Glanz oben links */
.fr-eis {
  padding: 6px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .95) 0 7%, transparent 16%),
    repeating-conic-gradient(from 8deg, #E6F6FF 0 14deg, #B4DEF4 14deg 26deg, #7CC4EA 26deg 36deg, #CFEBFA 36deg 45deg);
}
/* Titel: Eisschild */
.ti-eis { background: var(--eis-frost) center / 100% 100%; color: #1F5A8C; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Piraten ---------- */
.sq.l.sk-piraten { background: var(--piraten-sq-l) center / 100% 100%; }
.sq.d.sk-piraten { background: var(--piraten-sq-d) center / 100% 100%; }
/* Kartenrücken: Schatzkarte, Oval als schwarze Piratenflagge mit weißem Logo */
.card.c-back.bk-piraten { background: var(--piraten-back) center / 100% 100%; }
.bk-piraten .c-oval { background: #1E1A20; }
.bk-piraten .c-logo { color: #fff; }
.boom .cap-piraten { color: #fff; }
/* Profilrahmen: Steuerrad, Holzring mit acht Griffen außen (größer als die anderen Rahmen) */
.fr-piraten {
  padding: 7px; margin: 9px; isolation: isolate; border: 3px solid var(--ink);
  background: #8A5A32; box-shadow: inset 0 0 0 2px #B98049, inset 0 0 0 5px #8A5A32, inset 0 0 0 6px rgba(27, 21, 48, .5);
}
.fr-piraten::before { content: ''; position: absolute; inset: -14px; z-index: -1; pointer-events: none; background: var(--piraten-wheel) center / 100% 100%; }
/* Titel: schwarze Flagge mit Goldrand */
.ti-piraten { background: #1E1A20; color: #fff; border-color: var(--ink); box-shadow: 0 0 0 2px #E2B33C inset, 2px 2px 0 var(--ink); }

/* ---------- Süßigkeiten ---------- */
/* Brett: Schokoladentafel, hell Vollmilch, dunkel Zartbitter */
.sq.l.sk-suess { background: var(--suess-sq-l) center / 100% 100%; }
.sq.d.sk-suess { background: var(--suess-sq-d) center / 100% 100%; }
/* Kartenrücken: gestreiftes Bonbonpapier mit Streuseln, Oval als Lolli */
.card.c-back.bk-suess { background: var(--suess-back) center / 100% 100%; }
.bk-suess .c-oval { background: var(--suess-lolli) center / 100% 100%; }
.bk-suess .c-logo { color: #fff; }
.boom .cap-suess { color: #fff; }
/* Profilrahmen: Donut mit rosa Zuckerguss und Streuseln, Teig am Rand */
.fr-suess {
  padding: 9px; border: 3px solid var(--ink);
  background: var(--suess-glaze) 0 0 / 30px 30px; box-shadow: inset 0 0 0 2px #E0A35F;
}
.fr-suess .pb-avatar { box-shadow: 0 0 0 2px #E0A35F; }
/* Titel: Schokoladenriegel */
.ti-suess {
  background: var(--suess-bar) 0 0 / 20px 20px; color: #FFD6E6;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Dschungel ---------- */
/* Brett: Blätterboden, auf einigen hellen Feldern eine Hibiskusblüte */
.sq.l.sk-dschungel { background: var(--dschungel-sq-l) center / 100% 100%; }
.sq.l.sk-dschungel:nth-child(5n + 4) { background-image: var(--dschungel-sq-f); }
.sq.d.sk-dschungel { background: var(--dschungel-sq-d) center / 100% 100%; }
/* Kartenrücken: Lianenvorhang, Oval als Stein mit Moos */
.card.c-back.bk-dschungel { background: var(--dschungel-back) center / 100% 100%; }
.bk-dschungel .c-oval { background: var(--dschungel-stone) center / 100% 100%; }
.bk-dschungel .c-logo { color: #C6EA8A; }
.boom .cap-dschungel { color: #fff; }
/* Profilrahmen: Tempelring aus Steinblöcken mit Moos */
.fr-dschungel { padding: 7px; border: 3px solid var(--ink); background: var(--dschungel-temple) center / 100% 100%; }
.fr-dschungel::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 10deg, transparent 0 41deg, rgba(27, 21, 48, .55) 41deg 45deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px)); mask: radial-gradient(circle closest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
}
/* Titel: Bambusschild mit Knoten */
.ti-dschungel {
  color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: repeating-linear-gradient(90deg, transparent 0 30px, #3F6B22 30px 32px, #C9E89A 32px 33px, transparent 33px 60px),
    linear-gradient(180deg, #BCE07E, #86B84E 55%, #5F9436);
}

/* ---------- Wilder Westen ---------- */
.sq.l.sk-western { background: var(--western-sq-l) center / 100% 100%; }
.sq.d.sk-western { background: var(--western-sq-d) center / 100% 100%; }
/* Kartenrücken: Steckbrief „WANTED“ mit Belohnung, Oval aus Leder mit Ziernaht */
.card.c-back.bk-western { background: var(--western-back) center / 100% 100%; }
.bk-western::before, .bk-western::after {
  position: absolute; left: 0; right: 0; z-index: 1; text-align: center; pointer-events: none;
  font-family: var(--display); letter-spacing: .06em; line-height: 1; color: #5A3518;
}
.bk-western::before { content: 'WANTED'; top: 6%; font-size: calc(var(--cw) * .2); }
.bk-western::after { content: '$ 500'; bottom: 5%; font-size: calc(var(--cw) * .15); }
.bk-western .c-oval { background: var(--western-leather) center / 100% 100%; }
.bk-western .c-oval::after { content: ''; position: absolute; inset: 7%; border: 1.5px dashed #E2BC82; border-radius: 50%; }
.boom .cap-western { color: #fff; }
/* Profilrahmen: Lasso, gedrehtes Seil */
.fr-western {
  padding: 6px; border: 3px solid var(--ink);
  background: repeating-conic-gradient(#D9A86C 0 7deg, #A8743F 7deg 10deg, #E8C48A 10deg 12deg);
}
/* Titel: Lederschild mit Ziernaht, goldene Schrift, Sheriffstern davor */
.ti-western {
  background: #6B3F22; color: #F5C542; outline: 1.5px dashed #E2BC82; outline-offset: -5px; padding-left: 6px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Roboter ---------- */
/* Brett: Platine */
.sq.l.sk-roboter { background: var(--roboter-sq-l) center / 100% 100%; }
.sq.d.sk-roboter { background: var(--roboter-sq-d) center / 100% 100%; }
/* Kartenrücken: Platine, Oval als Bildschirm mit Zeilen, Logo leuchtet blau */
.card.c-back.bk-roboter { background: var(--roboter-back) center / 100% 100%; }
.bk-roboter .c-oval { background: repeating-linear-gradient(0deg, #0E1A24 0 3px, #14303F 3px 5px); box-shadow: inset 0 0 12px rgba(92, 230, 255, .5); }
.bk-roboter .c-logo { color: #5CE6FF; text-shadow: 2px 2px 0 var(--ink), 0 0 8px rgba(92, 230, 255, .8); }
.boom .cap-roboter { color: #fff; }
/* Profilrahmen: Metallring mit Nieten (schräg) und vier blinkenden Lämpchen (oben, unten, links, rechts) */
.fr-roboter {
  padding: 7px; border: 3px solid var(--ink);
  background: conic-gradient(from 20deg, #C9D1DA, #8E99A6, #EEF2F6, #7D8895, #C9D1DA, #9AA5B2, #EEF2F6, #8E99A6, #C9D1DA);
}
.fr-roboter::before, .fr-roboter::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1; }
.fr-roboter::before {
  --led: #E6FFFF 0 1px, #3DD8FF 1.2px 2.4px, var(--ink) 2.6px 3.2px, rgba(61, 216, 255, .35) 3.4px 5px, transparent 5.2px;
  background:
    radial-gradient(circle at 50% 3.5px, var(--led)), radial-gradient(circle at 50% calc(100% - 3.5px), var(--led)),
    radial-gradient(circle at 3.5px 50%, var(--led)), radial-gradient(circle at calc(100% - 3.5px) 50%, var(--led));
  animation: robLed 1.6s steps(2) infinite;
}
.fr-roboter::after {
  --riv: #F4F7FA 0 .8px, #AEB8C4 1px 2px, var(--ink) 2.2px 2.7px, transparent 2.9px;
  --o: calc(50% - (50% - 3.5px) * .7071); --f: calc(50% + (50% - 3.5px) * .7071);
  background:
    radial-gradient(circle at var(--o) var(--o), var(--riv)), radial-gradient(circle at var(--f) var(--o), var(--riv)),
    radial-gradient(circle at var(--o) var(--f), var(--riv)), radial-gradient(circle at var(--f) var(--f), var(--riv));
}
@keyframes robLed { 50% { opacity: .35; } }
/* Titel: Metallschild mit vier Schrauben */
.ti-roboter {
  color: #1F2A36; padding-left: 10px; padding-right: 10px;
  --sc: #5A6573 0 1.2px, var(--ink) 1.4px 1.9px, transparent 2.1px;
  background: radial-gradient(circle at 4px 4px, var(--sc)), radial-gradient(circle at calc(100% - 4px) 4px, var(--sc)),
    radial-gradient(circle at 4px calc(100% - 4px), var(--sc)), radial-gradient(circle at calc(100% - 4px) calc(100% - 4px), var(--sc)),
    linear-gradient(180deg, #EEF2F6, #BCC6D1 55%, #9AA5B2);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Unterwasser ---------- */
/* Brett: Wasser mit Blasen, auf einigen hellen Feldern ein Seestern */
.sq.l.sk-unterwasser { background: var(--unterwasser-sq-l) center / 100% 100%; }
.sq.l.sk-unterwasser:nth-child(5n + 2) { background-image: var(--unterwasser-sq-f); }
.sq.d.sk-unterwasser { background: var(--unterwasser-sq-d) center / 100% 100%; }
/* Kartenrücken: Meerestiefe mit Seetang und Blasen, Oval als Bullauge mit Messingrand */
.card.c-back.bk-unterwasser { background: var(--unterwasser-back) center / 100% 100%; }
.bk-unterwasser .c-oval {
  background: radial-gradient(circle at 35% 30%, #D6F8FF, #55BEE0 55%, #1D6A9C);
  box-shadow: inset 0 0 0 calc(var(--cw) * .028) #D9B04A, inset 0 0 0 calc(var(--cw) * .04) var(--ink);
}
.bk-unterwasser .c-logo { color: #fff; }
.boom .cap-unterwasser { color: #fff; }
/* Profilrahmen: Blasenring, Wasserfarben mit acht Blasen */
.fr-unterwasser {
  padding: 6px; border: 3px solid var(--ink);
  background: conic-gradient(from 30deg, #7FE3EC, #2F9BD0, #1B5E96, #4FB8DE, #7FE3EC);
}
.fr-unterwasser::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 1;
  --bu: rgba(255, 255, 255, .4) 0 1.6px, #fff 1.8px 2.6px, transparent 2.8px;
  --bs: rgba(255, 255, 255, .4) 0 1px, #fff 1.2px 1.9px, transparent 2.1px;
  --o: calc(50% - (50% - 3px) * .7071); --f: calc(50% + (50% - 3px) * .7071);
  background:
    radial-gradient(circle at 50% 3px, var(--bu)), radial-gradient(circle at 50% calc(100% - 3px), var(--bu)),
    radial-gradient(circle at 3px 50%, var(--bu)), radial-gradient(circle at calc(100% - 3px) 50%, var(--bu)),
    radial-gradient(circle at var(--o) var(--o), var(--bs)), radial-gradient(circle at var(--f) var(--o), var(--bs)),
    radial-gradient(circle at var(--o) var(--f), var(--bs)), radial-gradient(circle at var(--f) var(--f), var(--bs));
}
/* Titel: Tauchschild, Wasser mit Blasen */
.ti-unterwasser {
  background: var(--unterwasser-sea) 0 0 / 30px 30px; color: #fff;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Neon ---------- */
/* Brett: dunkle Felder mit leuchtender Gitterkante */
.sq.l.sk-neon { background: var(--neon-sq-l) center / 100% 100%; }
.sq.d.sk-neon { background: var(--neon-sq-d) center / 100% 100%; }
/* Kartenrücken: Nachtraster, Oval als leuchtender Ring, Logo leuchtet türkis */
.card.c-back.bk-neon { background: var(--neon-back) center / 100% 100%; }
.bk-neon .c-oval { background: #15102E; border-color: #FF6FE0; box-shadow: 0 0 6px 1px rgba(255, 79, 216, .7), inset 0 0 8px rgba(255, 79, 216, .6); }
.bk-neon .c-logo { color: #7DF3FF; -webkit-text-stroke: 0; text-shadow: 0 0 6px rgba(25, 217, 255, .9), 0 0 2px #fff; }
.boom .cap-neon { color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0 6px #FF4FD8, 0 0 2px #FF6FE0, 2px 2px 0 var(--ink); }
/* Profilrahmen: dunkler Ring mit zwei durchgehenden Leuchtröhren wie bei einem Neonschild (außen pink, innen türkis, mit Abstand),
   an drei Stellen (oben, links, rechts) durch ein kurzes Stück verbunden, unten führt die Röhre ein Stück nach außen (Anschluss). Ohne Animation. */
.fr-neon { padding: 11px; border: 3px solid var(--ink); background: #15102E; }
.fr-neon::before, .fr-neon::after { content: ''; position: absolute; pointer-events: none; z-index: 1; }
/* pinke Röhre als Rand (mit Schein wie bei den Figuren), die türkise Röhre mit ebenso breitem Schein kommt als Ring in ::after */
.fr-neon::before {
  inset: 1.5px; border-radius: 50%; border: 2px solid #FF8BE8;
  box-shadow: 0 0 4px 1px #FF4FD8, inset 0 0 4px 1px #FF4FD8;
}
/* türkiser Ring (Kern 16,2 bis 18,2 px vom Rand dieser Ebene, Schein beidseitig) und Verbindungen, Anschluss ragt unten 5 px über den Rahmen */
.fr-neon::after {
  inset: -8px;
  background:
    radial-gradient(circle closest-side, transparent calc(100% - 19.6px), rgba(25, 217, 255, .5) calc(100% - 18.7px), #3FE6FF calc(100% - 18px) calc(100% - 16.4px), rgba(25, 217, 255, .55) calc(100% - 15.6px), transparent calc(100% - 12.6px)),
    linear-gradient(90deg, #FF8BE8, #3FE6FF) no-repeat left 9.5px top 50% / 7px 2px,
    linear-gradient(270deg, #FF8BE8, #3FE6FF) no-repeat right 9.5px top 50% / 7px 2px,
    linear-gradient(180deg, #FF8BE8, #3FE6FF) no-repeat left 50% top 9.5px / 2px 7px,
    linear-gradient(0deg, #FF8BE8 0 55%, #3FE6FF 55%) no-repeat left 50% bottom 3px / 2px 16px,
    linear-gradient(#5A5478, #5A5478) no-repeat left 50% bottom 0 / 6px 3px;
}
/* Titel: dunkles Leuchtschild; der pinke Rand leuchtet und hat außen noch eine zweite, dünnere Leuchtlinie wie ein Rahmen */
.ti-neon {
  background: #15102E; color: #7DF3FF; border-color: #FF6FE0; text-shadow: 0 0 5px rgba(25, 217, 255, .9);
  box-shadow: 0 0 7px 2px rgba(255, 79, 216, .9), inset 0 0 6px rgba(255, 79, 216, .8);
  outline: 1.5px solid rgba(255, 111, 224, .6); outline-offset: 2.5px;
}

/* ---------- Urzeit ---------- */
/* Brett: Vulkanerde, hell sandig mit Kieseln (auf einigen Feldern ein Dino-Fußabdruck), dunkel rotbraun mit Glutpunkten */
.sq.l.sk-urzeit { background: var(--urzeit-sq-l) center / 100% 100%; }
.sq.l.sk-urzeit:nth-child(5n) { background-image: var(--urzeit-sq-f); }
.sq.d.sk-urzeit { background: var(--urzeit-sq-d) center / 100% 100%; }
/* Kartenrücken: Höhlenwand mit Handabdrücken, Oval als Ammonit */
.card.c-back.bk-urzeit { background: var(--urzeit-back) center / 100% 100%; }
.bk-urzeit .c-oval { background: var(--urzeit-ammo) center / 100% 100%; }
.bk-urzeit .c-logo { color: #FFF1D6; }
.boom .cap-urzeit { color: #fff; }
/* Profilrahmen: acht Knochen Ende an Ende auf einem Erdring */
.fr-urzeit { padding: 8px; border: 3px solid var(--ink); background: var(--urzeit-bones) center / 100% 100% no-repeat, #8A6B3E; }
/* Titel: Steintafel mit eingravierter Schrift */
.ti-urzeit {
  background: var(--urzeit-tablet) 0 0 / 40px 40px; color: #3B2A1C; border-radius: 3px;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, .45); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Weltraum ---------- */
/* Brett: Sternenhimmel; dazu funkeln vier Sterne je Feld ganz dezent (zwei Gruppen, langsam und in kleinen Stufen, damit es wenig Rechenzeit kostet).
   --wa/--wb sind die Helligkeiten der beiden Gruppen und werden animiert (mit @property weich, ohne blinkt es nur). Sterne und Takt wechseln
   je nach Feldnummer, damit es nicht wie ein Muster aussieht. Auf einigen hellen Feldern steht ein kleiner Ringplanet. */
@property --wa { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --wb { syntax: '<number>'; inherits: false; initial-value: .4; }
.sq.l.sk-weltraum, .sq.d.sk-weltraum {
  --s1: 22% 30%; --s2: 74% 62%; --s3: 48% 84%; --s4: 86% 18%;
  background-size: 100% 100%; background-position: center;
  background-image:
    radial-gradient(circle at var(--s1), rgba(255, 255, 255, var(--wa)) 0 1.1px, transparent 1.9px),
    radial-gradient(circle at var(--s2), rgba(255, 243, 176, var(--wa)) 0 1px, transparent 1.8px),
    radial-gradient(circle at var(--s3), rgba(255, 255, 255, var(--wb)) 0 1.2px, transparent 2px),
    radial-gradient(circle at var(--s4), rgba(190, 215, 255, var(--wb)) 0 1px, transparent 1.8px),
    var(--wr-bg);
  animation: wrTwA 6s steps(10) infinite, wrTwB 8s steps(10) infinite;
}
.sq.l.sk-weltraum { background-color: #3340A8; --wr-bg: var(--weltraum-sq-l); }
.sq.l.sk-weltraum:nth-child(5n + 3) { --wr-bg: var(--weltraum-sq-f); }
.sq.d.sk-weltraum { background-color: #0F1340; --wr-bg: var(--weltraum-sq-d); }
.sq.sk-weltraum:nth-child(3n + 1) { --s1: 68% 24%; --s2: 18% 70%; --s3: 56% 50%; --s4: 90% 86%; }
.sq.sk-weltraum:nth-child(3n + 2) { --s1: 34% 14%; --s2: 82% 46%; --s3: 20% 88%; --s4: 60% 74%; }
.sq.sk-weltraum:nth-child(2n) { animation-delay: -2.4s, -5.1s; }
.sq.sk-weltraum:nth-child(3n) { animation-delay: -4.2s, -1.3s; }
.sq.sk-weltraum:nth-child(5n) { animation-delay: -1.1s, -6.4s; }
@keyframes wrTwA { 0%, 100% { --wa: 1; } 50% { --wa: .3; } }
@keyframes wrTwB { 0%, 100% { --wb: .35; } 50% { --wb: 1; } }
@media (prefers-reduced-motion: reduce) { .sq.sk-weltraum { animation: none; } }
/* Kartenrücken: Galaxie, Oval als Planet mit Wolkenbändern, Logo weiß */
.card.c-back.bk-weltraum { background: var(--weltraum-back) center / 100% 100%; }
.bk-weltraum .c-oval {
  background: repeating-linear-gradient(0deg, transparent 0 7px, rgba(130, 40, 90, .22) 7px 11px), radial-gradient(circle at 34% 28%, #FFE9B8 0, #F6A650 38%, #D2603E 68%, #7A2F6A 100%);
}
.bk-weltraum .c-logo { color: #fff; }
.boom .cap-weltraum { color: #fff; }
/* Profilrahmen: Umlaufbahn, Himmelsring mit einem kleinen Mond auf der Bahn (ragt oben rechts etwas heraus) */
.fr-weltraum {
  padding: 7px; border: 3px solid var(--ink); background: var(--weltraum-sky) center / 100% 100%;
  box-shadow: inset 0 0 0 1.5px rgba(160, 180, 255, .6);
}
.fr-weltraum::before {
  content: ''; position: absolute; right: -3px; top: 2px; width: 12px; height: 12px; border-radius: 50%; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #FFF3D0, #F6A650 70%); border: 2px solid var(--ink);
}
/* Titel: Nachthimmel mit gelber Schrift */
.ti-weltraum {
  background: var(--weltraum-sky) 0 0 / 46px 46px; color: #FFE27A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Geisterschloss ---------- */
/* Brett: Steinplatten, nur zwei Felder der eigenen Hälfte mit Spinnweben (Reihe 4 von oben der eigenen Seite: helles Feld mit Spinne, Reihe 5 ein dunkles) */
.sq.l.sk-geister { background: var(--geister-sq-l) center / 100% 100%; }
.sq.l.sk-geister:nth-child(42) { background-image: var(--geister-sq-s); }
.sq.d.sk-geister { background: var(--geister-sq-d) center / 100% 100%; }
/* zwei ganze Netze, jedes über vier Felder um eine gemeinsame Ecke (Reihen 5 und 6 von oben, zwischen Spalte 4|5 und 7|8): jedes Feld zeigt das Viertel zur Ecke hin */
.sq.sk-geister:nth-child(36) { background-image: var(--geister-w-a00); }
.sq.sk-geister:nth-child(37) { background-image: var(--geister-w-a01); }
.sq.sk-geister:nth-child(44) { background-image: var(--geister-w-a10); }
.sq.sk-geister:nth-child(45) { background-image: var(--geister-w-a11); }
.sq.sk-geister:nth-child(39) { background-image: var(--geister-w-b00); }
.sq.sk-geister:nth-child(40) { background-image: var(--geister-w-b01); }
.sq.sk-geister:nth-child(47) { background-image: var(--geister-w-b10); }
.sq.sk-geister:nth-child(48) { background-image: var(--geister-w-b11); }
/* Kartenrücken: Spukschloss bei Nacht, Oval als grünes Geisterlicht, Logo weiß */
.card.c-back.bk-geister { background: var(--geister-back) center / 100% 100%; }
.bk-geister .c-oval { background: radial-gradient(circle at 38% 32%, #F2FFF8, #9BEBC6 50%, #3E9A80); }
.bk-geister .c-logo { color: #fff; }
.boom .cap-geister { color: #fff; }
/* Profilrahmen: Spinnennetz-Rad, oben rechts seilt sich eine Spinne an einem kurzen Faden vom Netz ab */
.fr-geister { padding: 7px; border: 3px solid var(--ink); background: var(--geister-ring) center / 100% 100%; }
.fr-geister::before {
  content: ''; position: absolute; left: 54%; top: 0; width: 22px; height: 28px; z-index: 1; pointer-events: none;
  background: var(--geister-spider) center / 100% 100% no-repeat;
}
/* Titel: dunkles Schild mit Spinnweben-Ecke, Gespenstchen vor dem Wort, Schrift in geisterhaftem Grünweiß */
.ti-geister {
  background: var(--geister-webtr) no-repeat right top / 20px 20px, linear-gradient(180deg, #4B3F78, #241A4A); color: #E5FFF3; padding-left: 6px;
  text-shadow: 0 0 5px rgba(156, 255, 216, .55), 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Japan ---------- */
/* Brett: Tatami-Matten ohne Bewegung; auf fünf Feldern der eigenen Hälfte liegt je ein Kirschblütenblatt (andere Lage und Drehung) */
.sq.l.sk-japan { background: var(--japan-sq-l) center / 100% 100%; }
.sq.d.sk-japan { background: var(--japan-sq-d) center / 100% 100%; }
.sq.l.sk-japan:is(:nth-child(37), :nth-child(5)) { background-image: var(--japan-sq-lp0); }
.sq.d.sk-japan:is(:nth-child(37), :nth-child(5)) { background-image: var(--japan-sq-dp0); }
.sq.l.sk-japan:is(:nth-child(42), :nth-child(10)) { background-image: var(--japan-sq-lp1); }
.sq.d.sk-japan:is(:nth-child(42), :nth-child(10)) { background-image: var(--japan-sq-dp1); }
.sq.l.sk-japan:is(:nth-child(46), :nth-child(14)) { background-image: var(--japan-sq-lp2); }
.sq.d.sk-japan:is(:nth-child(46), :nth-child(14)) { background-image: var(--japan-sq-dp2); }
.sq.l.sk-japan:is(:nth-child(51), :nth-child(19)) { background-image: var(--japan-sq-lp3); }
.sq.d.sk-japan:is(:nth-child(51), :nth-child(19)) { background-image: var(--japan-sq-dp3); }
.sq.l.sk-japan:is(:nth-child(60), :nth-child(28)) { background-image: var(--japan-sq-lp4); }
.sq.d.sk-japan:is(:nth-child(60), :nth-child(28)) { background-image: var(--japan-sq-dp4); }
/* Kartenrücken: indigoblaue Wellen mit Kirschzweigen, Oval als rote Lacksonne mit Goldrand */
.card.c-back.bk-japan { background: var(--japan-back) center / 100% 100%; }
.bk-japan .c-oval {
  background: radial-gradient(circle at 36% 30%, #FF9A9A 0, #D6354F 35%, #A01E34 100%);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #E2B33C, inset 0 0 0 calc(var(--cw) * .04) var(--ink);
}
.bk-japan .c-logo { color: #FFF1E0; }
.boom .cap-japan { color: #fff; }
/* Profilrahmen: roter Lackring mit gleich dicker Goldlinie innen (Gold und Rot je 3,5 px) */
.fr-japan {
  padding: 7px; border: 3px solid var(--ink); background: #C42A3E;
  box-shadow: inset 0 0 0 3.5px #E8B93C;
}
/* Titel: weißes Schild, äußere Linie und Schrift rot */
.cos-title.ti-japan { background: #fff; color: #C42A3E; border-color: #C42A3E; }

/* ---------- Vulkan ---------- */
/* Brett: erkaltete Lava und dunkles Gestein mit glühenden Rissen, die ohne festes Raster über die Feldgrenzen weiterlaufen; helle Stücke fließen
   von links nach rechts (die Bewegung steckt im Bild, ein Bild je Feld der eigenen Hälfte, bei reduzierter Bewegung die ruhigen Bilder) */
.sq.l.sk-vulkan { background: var(--vulkan-sq-l) center / 100% 100%; }
.sq.d.sk-vulkan { background: var(--vulkan-sq-d) center / 100% 100%; }
.sq.sk-vulkan:is(:nth-child(1), :nth-child(33)) { background-image: var(--vulkan-sq-n1); }
.sq.sk-vulkan:is(:nth-child(2), :nth-child(34)) { background-image: var(--vulkan-sq-n2); }
.sq.sk-vulkan:is(:nth-child(3), :nth-child(35)) { background-image: var(--vulkan-sq-n3); }
.sq.sk-vulkan:is(:nth-child(4), :nth-child(36)) { background-image: var(--vulkan-sq-n4); }
.sq.sk-vulkan:is(:nth-child(5), :nth-child(37)) { background-image: var(--vulkan-sq-n5); }
.sq.sk-vulkan:is(:nth-child(6), :nth-child(38)) { background-image: var(--vulkan-sq-n6); }
.sq.sk-vulkan:is(:nth-child(7), :nth-child(39)) { background-image: var(--vulkan-sq-n7); }
.sq.sk-vulkan:is(:nth-child(8), :nth-child(40)) { background-image: var(--vulkan-sq-n8); }
.sq.sk-vulkan:is(:nth-child(9), :nth-child(41)) { background-image: var(--vulkan-sq-n9); }
.sq.sk-vulkan:is(:nth-child(10), :nth-child(42)) { background-image: var(--vulkan-sq-n10); }
.sq.sk-vulkan:is(:nth-child(11), :nth-child(43)) { background-image: var(--vulkan-sq-n11); }
.sq.sk-vulkan:is(:nth-child(12), :nth-child(44)) { background-image: var(--vulkan-sq-n12); }
.sq.sk-vulkan:is(:nth-child(13), :nth-child(45)) { background-image: var(--vulkan-sq-n13); }
.sq.sk-vulkan:is(:nth-child(14), :nth-child(46)) { background-image: var(--vulkan-sq-n14); }
.sq.sk-vulkan:is(:nth-child(15), :nth-child(47)) { background-image: var(--vulkan-sq-n15); }
.sq.sk-vulkan:is(:nth-child(16), :nth-child(48)) { background-image: var(--vulkan-sq-n16); }
.sq.sk-vulkan:is(:nth-child(17), :nth-child(49)) { background-image: var(--vulkan-sq-n17); }
.sq.sk-vulkan:is(:nth-child(18), :nth-child(50)) { background-image: var(--vulkan-sq-n18); }
.sq.sk-vulkan:is(:nth-child(19), :nth-child(51)) { background-image: var(--vulkan-sq-n19); }
.sq.sk-vulkan:is(:nth-child(20), :nth-child(52)) { background-image: var(--vulkan-sq-n20); }
.sq.sk-vulkan:is(:nth-child(21), :nth-child(53)) { background-image: var(--vulkan-sq-n21); }
.sq.sk-vulkan:is(:nth-child(22), :nth-child(54)) { background-image: var(--vulkan-sq-n22); }
.sq.sk-vulkan:is(:nth-child(23), :nth-child(55)) { background-image: var(--vulkan-sq-n23); }
.sq.sk-vulkan:is(:nth-child(24), :nth-child(56)) { background-image: var(--vulkan-sq-n24); }
.sq.sk-vulkan:is(:nth-child(25), :nth-child(57)) { background-image: var(--vulkan-sq-n25); }
.sq.sk-vulkan:is(:nth-child(26), :nth-child(58)) { background-image: var(--vulkan-sq-n26); }
.sq.sk-vulkan:is(:nth-child(27), :nth-child(59)) { background-image: var(--vulkan-sq-n27); }
.sq.sk-vulkan:is(:nth-child(28), :nth-child(60)) { background-image: var(--vulkan-sq-n28); }
.sq.sk-vulkan:is(:nth-child(29), :nth-child(61)) { background-image: var(--vulkan-sq-n29); }
.sq.sk-vulkan:is(:nth-child(30), :nth-child(62)) { background-image: var(--vulkan-sq-n30); }
.sq.sk-vulkan:is(:nth-child(31), :nth-child(63)) { background-image: var(--vulkan-sq-n31); }
.sq.sk-vulkan:is(:nth-child(32), :nth-child(64)) { background-image: var(--vulkan-sq-n32); }
@media (prefers-reduced-motion: reduce) {
  .sq.l.sk-vulkan:nth-child(n) { background-image: var(--vulkan-sq-l); }
  .sq.d.sk-vulkan:nth-child(n) { background-image: var(--vulkan-sq-d); }
}
/* Kartenrücken: Rissnetz in Glut, Oval als glühende Lavakugel */
.card.c-back.bk-vulkan { background: var(--vulkan-back) center / 100% 100%; }
.bk-vulkan .c-oval {
  background: radial-gradient(circle at 40% 36%, #FFF6B8 0, #FFC23E 22%, #F2531F 55%, #8E1F10 100%);
  box-shadow: 0 0 8px 1px rgba(255, 120, 30, .75), inset 0 0 8px rgba(120, 20, 0, .6);
}
.bk-vulkan .c-logo { color: #FFE9B0; text-shadow: 2px 2px 0 var(--ink), 0 0 8px rgba(255, 140, 40, .9); }
.boom .cap-vulkan { color: #fff; }
/* Profilrahmen: dunkler Steinring mit glühenden Rissen */
.fr-vulkan { padding: 7px; border: 3px solid var(--ink); background: var(--vulkan-ring) center / 100% 100%; box-shadow: inset 0 0 6px 1px rgba(255, 110, 30, .6); }
/* Titel: dunkles Gestein, unten glühend */
.ti-vulkan {
  background: linear-gradient(180deg, #3A2427 0 45%, #D9441A 100%); color: #FFE9B0;
  text-shadow: 0 0 5px rgba(255, 150, 50, .9), 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Wetter ---------- */
/* Brett ohne Bewegung: helle Felder blauer Himmel mit zwei Wölkchen, dunkle Felder Gewitterhimmel mit Regen */
.sq.l.sk-wetter { background: var(--wetter-sq-l) center / 100% 100%; }
.sq.d.sk-wetter { background: var(--wetter-sq-d) center / 100% 100%; }
/* Kartenrücken: Sonne über einer Wolke mit etwas Regen; das Oval und das Logo bleiben wie beim normalen Rücken */
.card.c-back.bk-wetter { background: var(--wetter-back) center / 100% 100%; }
.boom .cap-wetter { color: #fff; }
/* Profilrahmen: gelber Sonnenring mit kurzen Strahlen außen (größer als die anderen Rahmen, wie das Steuerrad) */
.fr-wetter {
  padding: 7px; margin: 9px; isolation: isolate; border: 3px solid var(--ink);
  background: radial-gradient(circle at 30% 25%, #FFF3A0, #FFD93D 55%, #F5B700);
}
.fr-wetter::before { content: ''; position: absolute; inset: -9px; z-index: -1; pointer-events: none; background: var(--wetter-rays) center / 100% 100%; }
/* Titel: Himmelsschild */
.ti-wetter {
  background: var(--wetter-sky) center / 100% 100%; color: #fff;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Plastik ---------- */
/* Brett: glatte, leicht glänzende Plastikfelder */
.sq.l.sk-plastik { background: var(--plastik-sq-l) center / 100% 100%; }
.sq.d.sk-plastik { background: var(--plastik-sq-d) center / 100% 100%; }
/* Kartenrücken: glänzend blaues Plastik, Oval und Logo wie beim normalen Rücken */
.card.c-back.bk-plastik { background: var(--plastik-back) center / 100% 100%; }
.boom .cap-plastik { color: #fff; }
/* Profilrahmen: Ring aus Bausteinen in Rot, Gelb, Blau und Grün (16 Stücke mit Fugen) */
.fr-plastik {
  padding: 6px; border: 3px solid var(--ink);
  background: repeating-conic-gradient(from -10deg, #E5483A 0 20deg, var(--ink) 20deg 22.5deg, #FFC93D 22.5deg 42.5deg, var(--ink) 42.5deg 45deg,
    #3B82E0 45deg 65deg, var(--ink) 65deg 67.5deg, #4CBF5A 67.5deg 87.5deg, var(--ink) 87.5deg 90deg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}
/* Titel: einfacher roter Kasten */
.ti-plastik {
  color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
  background: linear-gradient(180deg, #F7746A, #E5483A 50%, #C9372B);
}

/* ---------- Herbstwald ---------- */
/* Brett: Laubboden, hell ockerfarben (auf wenigen Feldern ein Blatt, auf einem eine Eichel), dunkel braun */
/* Drei Ahornblätter und eine Eichel liegen als Großbild über der eigenen Hälfte (Nutzer 18.10.2026: 2 bis 4 Blätter, vorher je Feld nach nth-child) */
.sq.l.sk-herbst, .sq.d.sk-herbst { background: var(--herbst-fall) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-herbst { --ct: var(--herbst-sq-l); }
.sq.d.sk-herbst { --ct: var(--herbst-sq-d); }
/* Kartenrücken: Blätterdecke, Oval als glänzende Kastanie */
.card.c-back.bk-herbst { background: var(--herbst-back) center / 100% 100%; }
.bk-herbst .c-oval { background: radial-gradient(circle at 34% 28%, #D98A55 0, #8A4420 35%, #5A2610 70%, #3A1808 100%); }
.bk-herbst .c-logo { color: #FFE9B8; }
.boom .cap-herbst { color: #fff; }
/* Profilrahmen: Laubkranz aus bunten Blättern */
.fr-herbst { padding: 6px; border: 3px solid var(--ink); background: var(--herbst-leaves) 0 0 / 30px 30px; }
/* Titel: dunkler Waldboden, goldene Schrift */
.ti-herbst {
  background: #4B3322; color: #FFD27A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Großbild über die eigene Hälfte (Fußball, Origami, Steampunk, Stein, Metall, Luxus, Stadt, Kupfer, Dreck, Müll, Realistisch, Herbstwald, Schnee) ---------- */
/* Ein Bild (800×400) über alle 32 Felder der eigenen Hälfte, jedes Feld zeigt seinen Ausschnitt (Spalte --bx, Reihe --by);
   so laufen Spielfeldlinien und Falten ohne Raster über die Feldgrenzen. Eigene Hälfte = Kinder 33–64 im Brett, 1–32 in der Brettkachel. */
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 1) { --bx: 0%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 2) { --bx: 14.2857%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 3) { --bx: 28.5714%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 4) { --bx: 42.8571%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 5) { --bx: 57.1429%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 6) { --bx: 71.4286%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n + 7) { --bx: 85.7143%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):nth-child(8n) { --bx: 100%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):is(:nth-child(-n + 8), :nth-child(n + 33):nth-child(-n + 40)) { --by: 0%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):is(:nth-child(n + 9):nth-child(-n + 16), :nth-child(n + 41):nth-child(-n + 48)) { --by: 33.3333%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):is(:nth-child(n + 17):nth-child(-n + 24), :nth-child(n + 49):nth-child(-n + 56)) { --by: 66.6667%; }
.sq:is(.sk-fussball, .sk-origami, .sk-steampunk, .sk-stein, .sk-metall, .sk-luxus, .sk-stadt, .sk-kupfer, .sk-dreck, .sk-muell, .sk-real, .sk-herbst, .sk-schnee, .sk-gaming, .sk-katzen, .sk-weihnachten, .sk-ostern, .sk-kuerbis, .sk-silvester, .sk-goettlich, .sk-geburtstag, .sk-baustelle, .sk-klasse, .sk-sonnemond, .sk-pluesch):is(:nth-child(n + 25):nth-child(-n + 32), :nth-child(n + 57)) { --by: 100%; }

/* ---------- Fußball ---------- */
/* Brett: Rasen hell und dunkel, darüber die Spielfeldlinien der eigenen Hälfte als Großbild */
.sq.l.sk-fussball, .sq.d.sk-fussball { background: var(--fussball-lines) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-fussball { --ct: var(--fussball-sq-l); }
.sq.d.sk-fussball { --ct: var(--fussball-sq-d); }
/* Kartenrücken: gemähter Rasen mit Linien, Oval als Mittelkreis */
.card.c-back.bk-fussball { background: var(--fussball-back) center / 100% 100%; }
.bk-fussball .c-oval { background: #3F8F3A; box-shadow: inset 0 0 0 calc(var(--cw) * .035) #3F8F3A, inset 0 0 0 calc(var(--cw) * .055) #F4F8EE; }
.boom .cap-fussball { color: #fff; }
/* Profilrahmen: alter Lederball, braunbeiges Leder mit Poren, Felder abwechselnd etwas dunkler, helle Nähte dazwischen
   (vorher weiß mit schwarzen Flecken, Nutzer wollte Leder) */
.fr-fussball {
  padding: 6px; border: 3px solid var(--ink);
  background:
    repeating-conic-gradient(from 22.5deg, transparent 0 43.5deg, #F3E1B8 43.5deg 45deg),
    repeating-conic-gradient(from 22.5deg, rgba(90, 50, 20, .2) 0 45deg, transparent 45deg 90deg),
    var(--fussball-leather) center / 100% 100%;
}
/* Titel: Rasenschild mit Kreidelinie */
.ti-fussball {
  background: #4F9C3F; color: #fff; outline: 1.5px solid #F4F8EE; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Ritterburg ---------- */
/* Brett: Kopfsteinpflaster im Burghof, hell Sandstein, dunkel Granit */
.sq.l.sk-ritter { background: var(--ritter-sq-l) center / 100% 100%; }
.sq.d.sk-ritter { background: var(--ritter-sq-d) center / 100% 100%; }
/* Kartenrücken: Burgmauer mit Zinnen, Oval als roter Wappenschild mit Goldrand */
.card.c-back.bk-ritter { background: var(--ritter-back) center / 100% 100%; }
.bk-ritter .c-oval { background: #B5332B; box-shadow: inset 0 0 0 calc(var(--cw) * .035) #F2C24A; }
.boom .cap-ritter { color: #fff; }
/* Profilrahmen: roter Wappenring mit Goldkante und vier goldenen Spangen */
.fr-ritter {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #F2C24A;
  background: repeating-conic-gradient(from -7deg, #F2C24A 0 14deg, #B5332B 14deg 90deg);
}
/* Titel: rotes Banner mit Goldlinie */
.ti-ritter {
  background: #B5332B; color: #FFD34D; outline: 1.5px solid #F2C24A; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Wikinger ---------- */
/* Brett: Klinkerplanken eines Drachenboots, auf zwei freien Feldern ein Rundschild (--cm) */
.sq.l.sk-wikinger, .sq.d.sk-wikinger { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-wikinger { --ct: var(--wikinger-sq-l); }
.sq.d.sk-wikinger { --ct: var(--wikinger-sq-d); }
.sq.sk-wikinger:is(:nth-child(35), :nth-child(3)) { --cm: var(--wikinger-shield-a); }
.sq.sk-wikinger:is(:nth-child(46), :nth-child(14)) { --cm: var(--wikinger-shield-b); }
/* Kartenrücken: gestreiftes Rahsegel, Oval als Holzschild mit Eisenrand */
.card.c-back.bk-wikinger { background: var(--wikinger-back) center / 100% 100%; }
.bk-wikinger .c-oval { background: #8A5A33; box-shadow: inset 0 0 0 calc(var(--cw) * .035) #9AA1AA; }
.boom .cap-wikinger { color: #fff; }
/* Profilrahmen: Rundschild aus Brettern, abwechselnd rot bemalt, Holz, hell bemalt, Holz (Maserung scheint durch), Eisenrand
   (vorher nur rot und hell, Nutzer wollte es schildartiger mit Holz) */
.fr-wikinger {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #8A9099;
  background:
    repeating-conic-gradient(rgba(192, 67, 47, .85) 0 45deg, transparent 45deg 90deg, rgba(241, 227, 192, .82) 90deg 135deg, transparent 135deg 180deg),
    var(--wikinger-shieldwood) center / 100% 100%;
}
/* Titel: dunkle geteerte Planke, goldene Schrift */
.ti-wikinger {
  background: var(--wikinger-plank) center / 100% 100%; color: #F2C24A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Origami ---------- */
/* Brett: helles Papier und Packpapier mit feinen Fasern, dezente lange Faltlinien als Großbild (die Kraniche hat der Nutzer entfernt) */
.sq.l.sk-origami, .sq.d.sk-origami { background: var(--origami-folds) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-origami { --ct: var(--origami-sq-l); }
.sq.d.sk-origami { --ct: var(--origami-sq-d); }
/* Kartenrücken: Faltmuster auf Indigopapier, Oval als geknicktes Korallenpapier */
.card.c-back.bk-origami { background: var(--origami-back) center / 100% 100%; }
.bk-origami .c-oval { background: linear-gradient(90deg, #F08A6E 50%, #D9694E 50%); }
.boom .cap-origami { color: #E8644A; }
/* Profilrahmen: Rosette aus hellem Papier, 16 Faltflächen, jede von hell (Knick) nach dunkel schattiert, helle Papierkante innen
   (vorher flach, dann korallenrot; Nutzer wollte Papier statt der Farbe der dunklen Felder) */
.fr-origami {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
  background: repeating-conic-gradient(#FFFBF2 0deg, #EFE6D2 12deg, #D6C8AA 22.5deg, #FFFBF2 22.5deg, #EFE6D2 34deg, #D6C8AA 45deg);
}
/* Titel: Papierstreifen mit umgeknickter Ecke */
.ti-origami { background: linear-gradient(225deg, #D9CDB4 0 7px, #F7F0E1 7px); color: #3E4A8A; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Ägypten ---------- */
/* Brett: Sandstein hell und ocker, auf drei freien Feldern eine eingeritzte Hieroglyphe (--cm) */
.sq.l.sk-aegypten, .sq.d.sk-aegypten { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-aegypten { --ct: var(--aegypten-sq-l); }
.sq.d.sk-aegypten { --ct: var(--aegypten-sq-d); }
.sq.sk-aegypten:is(:nth-child(34), :nth-child(2)) { --cm: var(--aegypten-g-eye); }
.sq.sk-aegypten:is(:nth-child(39), :nth-child(7)) { --cm: var(--aegypten-g-water); }
.sq.sk-aegypten:is(:nth-child(45), :nth-child(13)) { --cm: var(--aegypten-g-ankh); }
/* Kartenrücken: lapisblaue Grabdecke mit Goldsternen, Oval als goldene Kartusche */
.card.c-back.bk-aegypten { background: var(--aegypten-back) center / 100% 100%; }
.bk-aegypten .c-oval {
  background: radial-gradient(circle at 40% 35%, #FFE08A, #F2C24A 50%, #C9952A);
  box-shadow: inset 0 0 0 calc(var(--cw) * .035) #F2C24A, inset 0 0 0 calc(var(--cw) * .05) #9A6A1E;
}
.bk-aegypten .c-logo { color: #2E55B8; }
.boom .cap-aegypten { color: #fff; }
/* Profilrahmen: Streifen in Gold und Lapisblau wie das Kopftuch eines Pharaos */
.fr-aegypten { padding: 6px; border: 3px solid var(--ink); background: repeating-conic-gradient(#F2C24A 0 7.5deg, #2E55B8 7.5deg 15deg); }
/* Titel: Lapisschild mit Goldlinie */
.ti-aegypten {
  background: #23408E; color: #F2C24A; outline: 1.5px solid #F2C24A; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Musik ---------- */
/* Brett: Notenpapier hell und vergilbt mit durchlaufenden Notenlinien, auf zwei hellen Feldern Noten, links vorn ein Notenschlüssel (--cm) */
.sq.l.sk-musik, .sq.d.sk-musik { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-musik { --ct: var(--musik-sq-l); }
.sq.d.sk-musik { --ct: var(--musik-sq-d); }
.sq.sk-musik:is(:nth-child(37), :nth-child(5)) { --cm: var(--musik-n-quarter); }
.sq.sk-musik:is(:nth-child(42), :nth-child(10)) { --cm: var(--musik-n-eighth); }
.sq.sk-musik:is(:nth-child(33), :nth-child(1)) { --cm: var(--musik-n-clef); }
/* Kartenrücken: lila Plattenhülle mit Notenzeilen, Oval als Schallplatte mit Rillen und rotem Etikett */
.card.c-back.bk-musik { background: var(--musik-back) center / 100% 100%; }
.bk-musik .c-oval {
  background: radial-gradient(closest-side, #D83A3A 0 24%, #1E1C24 25%, transparent 26%),
    repeating-radial-gradient(closest-side, #1E1C24 0 3%, #34303E 3% 4.5%);
}
.bk-musik .c-logo { color: #fff; }
.boom .cap-musik { color: #fff; }
/* Profilrahmen: Klaviertasten rundherum, die schwarzen nur im äußeren Teil des Rings (Gruppen zu zwei und drei, vier Oktaven) */
.fr-musik {
  padding: 6px; border: 3px solid var(--ink);
  background: repeating-conic-gradient(#FFFDF6 0 12deg, #8A8578 12deg 12.857deg);
}
.fr-musik::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(transparent 0 9.3deg, #1E1C24 9.3deg 16.4deg, transparent 16.4deg 22.1deg, #1E1C24 22.1deg 29.3deg,
    transparent 29.3deg 47.8deg, #1E1C24 47.8deg 55deg, transparent 55deg 60.7deg, #1E1C24 60.7deg 67.9deg,
    transparent 67.9deg 73.5deg, #1E1C24 73.5deg 80.7deg, transparent 80.7deg 90deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3.5px));
}
/* Titel: schwarzes Lackschild mit roter Linie, gelbe Schrift */
.ti-musik {
  background: #1E1C24; color: #FFD23F; outline: 1.5px solid #E0463A; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Superhelden ---------- */
/* Brett: Pop-Art-Rasterpunkte, hell gelb und dunkel himmelblau, auf zwei dunklen Feldern ein kleiner Comicstern (--cm) */
.sq.l.sk-helden, .sq.d.sk-helden { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-helden { --ct: var(--helden-sq-l); }
.sq.d.sk-helden { --ct: var(--helden-sq-d); }
.sq.sk-helden:is(:nth-child(34), :nth-child(2)) { --cm: var(--helden-pow-a); }
.sq.sk-helden:is(:nth-child(47), :nth-child(15)) { --cm: var(--helden-pow-b); }
/* Kartenrücken: Comicseite aus drei Bildern, Oval als weiße Sprechblase, Logo rot */
.card.c-back.bk-helden { background: var(--helden-back) center / 100% 100%; }
.bk-helden .c-oval { background: #fff; box-shadow: inset 0 0 0 calc(var(--cw) * .025) var(--ink); }
.bk-helden .c-logo { color: #E0463A; }
.boom .cap-helden { color: #FFE14D; }
/* Profilrahmen: roter Ring mit gelber Linie, links und rechts ein Blitz */
.fr-helden { padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #FFE14D; background: #D83A3A; }
.fr-helden::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: var(--helden-bolt) 0 50% / 10px 14px no-repeat, var(--helden-bolt) 100% 50% / 10px 14px no-repeat;
}
/* Titel: gelber Comic-Kasten, rote Schrift */
.ti-helden {
  background: #FFE14D; color: #E0463A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Zauberschule ---------- */
/* Brett: hell lila und nachtblau mit feinem Sternenstaub, auf zwei dunklen Feldern ein goldenes Funkeln (--cm) */
.sq.l.sk-zauber, .sq.d.sk-zauber { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-zauber { --ct: var(--zauber-sq-l); }
.sq.d.sk-zauber { --ct: var(--zauber-sq-d); }
.sq.sk-zauber:is(:nth-child(38), :nth-child(6)) { --cm: var(--zauber-spark-a); }
.sq.sk-zauber:is(:nth-child(43), :nth-child(11)) { --cm: var(--zauber-spark-b); }
/* Kartenrücken: Zauberbuch aus lila Leder mit Goldrahmen, Oval als Kristallkugel */
.card.c-back.bk-zauber { background: var(--zauber-back) center / 100% 100%; }
.bk-zauber .c-oval {
  background: radial-gradient(circle at 38% 30%, #fff 0 6%, #D6E8FF 18%, #8FB2EC 62%, #5A74C4);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #F2C24A;
}
.bk-zauber .c-logo { color: #3A2470; }
.boom .cap-zauber { color: #fff; }
/* SIMSALABIM! ist länger als die anderen Set-Wörter: schmaler gesetzt, damit es im Stern bleibt */
.boom .cap-zauber.own { letter-spacing: 0; transform: rotate(-6deg) scaleX(.8); }
/* Profilrahmen: nachtblau-lila Ring mit Goldlinie und vier goldenen Funkeln schräg (Ebene um 45° gedreht) */
.fr-zauber {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #F2C24A;
  background: conic-gradient(#2A2C6A, #5B3C9E, #2A2C6A, #5B3C9E, #2A2C6A);
}
.fr-zauber::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none; transform: rotate(45deg);
  background: var(--zauber-spark) 50% 0 / 11px 11px no-repeat, var(--zauber-spark) 50% 100% / 11px 11px no-repeat,
    var(--zauber-spark) 0 50% / 11px 11px no-repeat, var(--zauber-spark) 100% 50% / 11px 11px no-repeat;
}
/* Titel: lila Schild mit Goldlinie */
.ti-zauber {
  background: #3A2470; color: #F2C24A; outline: 1.5px solid #F2C24A; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Steampunk ---------- */
/* Brett: gebürstetes Messing und Kupfer, darüber große Platten mit Nähten und Nieten als Großbild, zwei Zahnräder (--cm) */
.sq.l.sk-steampunk, .sq.d.sk-steampunk {
  background: var(--cm, none) center / 100% 100%, var(--steampunk-plates) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%;
}
.sq.l.sk-steampunk { --ct: var(--steampunk-sq-l); }
.sq.d.sk-steampunk { --ct: var(--steampunk-sq-d); }
.sq.sk-steampunk:is(:nth-child(35), :nth-child(3)) { --cm: var(--steampunk-gear-a); }
.sq.sk-steampunk:is(:nth-child(46), :nth-child(14)) { --cm: var(--steampunk-gear-b); }
/* Kartenrücken: Uhrwerk mit Messingzahnrädern, Oval als Zifferblatt mit Messingrand */
.card.c-back.bk-steampunk { background: var(--steampunk-back) center / 100% 100%; }
.bk-steampunk .c-oval {
  background: #F6EBD0; box-shadow: inset 0 0 0 calc(var(--cw) * .035) #C99A45, inset 0 0 0 calc(var(--cw) * .05) #8A6424;
}
.bk-steampunk .c-logo { color: #3B2A1E; }
.boom .cap-steampunk { color: #FFF1C8; }
/* Profilrahmen: Messingring als Zahnrad, Zähne außen (Tinte unten, Messing darüber, je nur außerhalb des Rings) */
.fr-steampunk {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #8A6424;
  background: conic-gradient(#F6DC98, #C99A45 25%, #F6DC98 50%, #C99A45 75%, #F6DC98);
}
.fr-steampunk::before, .fr-steampunk::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.fr-steampunk::before {
  inset: -9px; background: repeating-conic-gradient(from -5deg, var(--ink) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
  mask: radial-gradient(closest-side, transparent calc(100% - 7px), #000 calc(100% - 7px));
}
.fr-steampunk::after {
  inset: -7px; background: repeating-conic-gradient(from -3deg, #D9A944 0 6deg, transparent 6deg 20deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
/* Titel: Messingplakette mit zwei Nieten, dunkelbraune Schrift */
.ti-steampunk {
  padding-left: 13px; padding-right: 13px; color: #3B2A1E; box-shadow: 2px 2px 0 var(--ink);
  background: radial-gradient(circle at 6px 50%, #8A6424 0 2px, transparent 2.5px), radial-gradient(circle at calc(100% - 6px) 50%, #8A6424 0 2px, transparent 2.5px),
    linear-gradient(#F6DC98, #C99A45);
}

/* ---------- Kindisch ---------- */
/* Brett: Papier, die dunklen Felder mit Wachsmalstift ausgemalt (blau, jedes dritte grün), Sonne und Blume auf zwei hellen Feldern (--cm) */
.sq.l.sk-kindisch, .sq.d.sk-kindisch { background: var(--cm, none) center / 100% 100%, var(--ct) center / 100% 100%; }
.sq.l.sk-kindisch { --ct: var(--kindisch-sq-l); }
.sq.d.sk-kindisch { --ct: var(--kindisch-sq-d); }
.sq.d.sk-kindisch:nth-child(3n) { --ct: var(--kindisch-sq-d2); }
.sq.sk-kindisch:is(:nth-child(33), :nth-child(1)) { --cm: var(--kindisch-sun); }
.sq.sk-kindisch:is(:nth-child(44), :nth-child(12)) { --cm: var(--kindisch-flower); }
/* Kartenrücken: Kinderbild mit Himmel, grinsender Sonne und Wiese, Oval als Papier mit roter Stiftkante */
.card.c-back.bk-kindisch { background: var(--kindisch-back) center / 100% 100%; }
.bk-kindisch .c-oval { background: #FFFDF6; box-shadow: inset 0 0 0 calc(var(--cw) * .03) #E0463A; }
.bk-kindisch .c-logo { color: #E0463A; }
.boom .cap-kindisch { color: #fff; }
/* Profilrahmen: Regenbogen aus drei Wachsmalstiftlinien (außen rot, gelb, innen blau) */
.fr-kindisch {
  padding: 6px; border: 3px solid var(--ink);
  background: radial-gradient(closest-side, #4CA3E0 calc(100% - 4px), #FFD23F calc(100% - 4px) calc(100% - 2px), #E0463A calc(100% - 2px));
}
/* Titel: hellgelbes Papier, rote Schrift */
.ti-kindisch {
  background: #FFF6C9; color: #E0463A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Disco ---------- */
/* Brett: leuchtende Tanzfläche, helle Felder wechseln ihre Farbe (pink, türkis, gelb; je nach Feld versetzt, SMIL im Bild), dunkle Felder gedämpft violett */
.sq.l.sk-disco { background: var(--disco-sq-a0) center / 100% 100%; }
.sq.l.sk-disco:nth-child(3n + 1) { background-image: var(--disco-sq-a1); }
.sq.l.sk-disco:nth-child(3n + 2) { background-image: var(--disco-sq-a2); }
.sq.d.sk-disco { background: var(--disco-sq-d) center / 100% 100%; }
/* Kartenrücken: Tanzsaal mit Discokugel und zwei Lichtkegeln, Oval als Spiegelfläche aus Facetten */
.card.c-back.bk-disco { background: var(--disco-back) center / 100% 100%; }
.bk-disco .c-oval {
  background: repeating-linear-gradient(90deg, transparent 0 9%, #9AA1B6 9% 10%), repeating-linear-gradient(0deg, #E4E7F0 0 9%, #9AA1B6 9% 10%);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #FF7EC0;
}
.bk-disco .c-logo { color: #2B1B4A; }
.boom .cap-disco { color: #fff; }
/* Profilrahmen: silberner Spiegelring aus Facetten in drei Tönen */
.fr-disco {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #7E86A0;
  background: repeating-conic-gradient(#F4F6FA 0 10deg, #B4BACB 10deg 20deg, #D7DBE6 20deg 30deg);
}
/* Titel: dunkles Schild mit Silberlinie, pinke Schrift */
.ti-disco {
  background: #2B1B4A; color: #FF7EC0; outline: 1.5px solid #C9CEDB; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Stein ---------- */
/* Brett: Granit hell und dunkel, darüber unregelmäßige große Steinplatten mit Fugen und zwei Rissen als Großbild */
.sq.l.sk-stein, .sq.d.sk-stein { background: var(--stein-slabs) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-stein { --ct: var(--stein-sq-l); }
.sq.d.sk-stein { --ct: var(--stein-sq-d); }
/* Kartenrücken: Felswand mit gemeißeltem Rand, Oval eingemeißelt (dunkle Kante oben, helle unten) */
.card.c-back.bk-stein { background: var(--stein-back) center / 100% 100%; }
.bk-stein .c-oval {
  background: #85807A;
  box-shadow: inset 0 calc(var(--cw) * .03) 0 #5A564F, inset 0 calc(var(--cw) * -.025) 0 #C4BFB6;
}
.bk-stein .c-logo { color: #EEEAE2; }
.boom .cap-stein { color: #fff; }
/* KRACH-BUMM! ist lang: schmaler gesetzt, damit es im Stern bleibt */
.boom .cap-stein.own { letter-spacing: 0; transform: rotate(-6deg) scaleX(.8); }
/* Profilrahmen: Steinbogen aus zwölf Keilsteinen in zwei Grautönen, dunkle Fugen */
.fr-stein {
  padding: 6px; border: 3px solid var(--ink);
  background: repeating-conic-gradient(#B8B3AA 0 28deg, #4A463F 28deg 30deg, #9A958C 30deg 58deg, #4A463F 58deg 60deg);
}
/* Titel: grobe Steinplatte, helle Schrift */
.ti-stein {
  background: linear-gradient(#A7A299, #85807A); color: #F4F1EA;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Metall ---------- */
/* Brett: Riffelblech hell und dunkel, darüber weicher Glanz als Großbild (Schraubenköpfe vom Nutzer gestrichen) */
.sq.l.sk-metall, .sq.d.sk-metall {
  background: var(--metall-sheen) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%;
}
.sq.l.sk-metall { --ct: var(--metall-sq-l); }
.sq.d.sk-metall { --ct: var(--metall-sq-d); }
/* Kartenrücken: dunkles Riffelblech mit Eckschrauben, Oval als polierte Stahlplatte */
.card.c-back.bk-metall { background: var(--metall-back) center / 100% 100%; }
.bk-metall .c-oval {
  background: linear-gradient(135deg, #A3AAB7, #E4E8EF 35%, #FFFFFF 42%, #D2D7E0 50%, #A3AAB7);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #6E7684;
}
.bk-metall .c-logo { color: #C9D0DC; }
.boom .cap-metall { color: #fff; }
/* Profilrahmen: polierter Stahlring mit vier Nieten */
.fr-metall {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #5A616D;
  background: conic-gradient(#F4F6FA, #9AA3B2 25%, #E4E8EF 50%, #8A93A3 75%, #F4F6FA);
}
.fr-metall::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  --rivet: #F4F6FA 0 .8px, #9AA3B2 1px 1.8px, var(--ink) 1.9px 2.5px, transparent 2.7px;
  background:
    radial-gradient(circle at 50% 4.5px, var(--rivet)), radial-gradient(circle at 50% calc(100% - 4.5px), var(--rivet)),
    radial-gradient(circle at 4.5px 50%, var(--rivet)), radial-gradient(circle at calc(100% - 4.5px) 50%, var(--rivet));
}
/* Titel: dunkle Stahlplatte, helle Schrift */
.ti-metall {
  background: linear-gradient(#7E8794, #474D58); color: #F4F6FA;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Luxus ---------- */
/* Brett: heller Carrara- und dunkelgrüner Marmor mit weichen Wolken (Großbild, je Feldfarbe eigener Ton), in allen Feldern eine
   Goldverzierung mit wanderndem Glanz (Großbild mit SMIL; vorher Adern, dann goldene Rauten auf Feldecken, Nutzer) */
.sq.l.sk-luxus, .sq.d.sk-luxus {
  background: var(--luxus-ornament) var(--bx) var(--by) / 800% 400% no-repeat, var(--cv) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%;
}
.sq.l.sk-luxus { --ct: var(--luxus-sq-l); --cv: var(--luxus-cloud-l); }
.sq.d.sk-luxus { --ct: var(--luxus-sq-d); --cv: var(--luxus-cloud-d); }
/* Kartenrücken: Onyx mit doppeltem Goldrahmen und Goldfächern in den Ecken (Funkeln im Bild), Oval aus Gold, Logo hell (dunkel war es
   nicht lesbar, Nutzer). Ein einziger Glanz läuft über Rahmen und Oval zugleich, nicht über das Schwarze (Ebene über der Karte mit Maske) */
.card.c-back.bk-luxus { background: var(--luxus-back) center / 100% 100%; }
.bk-luxus .c-oval {
  background: linear-gradient(135deg, #B5832A, #E9BC4E 32%, #FFF1B8 42%, #E9BC4E 54%, #B5832A);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #8A6018;
}
.card.c-back.bk-luxus::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%) 100% 0 / 300% 100% no-repeat;
  -webkit-mask: var(--luxus-backmask) center / 100% 100% no-repeat; mask: var(--luxus-backmask) center / 100% 100% no-repeat;
  animation: lxSweep 4s ease-in-out infinite;
}
@keyframes lxSweep { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
.ti-luxus::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .9) 50%, transparent 65%);
  transform: translateX(-120%); animation: lxShine 2.6s ease-in-out infinite;
}
.bk-luxus .c-logo { color: #fff; }
.boom .cap-luxus { color: #FFF4C8; }
/* Profilrahmen (pompöser, Nutzer 18.10.2026): breiter Goldring mit doppeltem Rand, der Glanz dreht langsam im Kreis; vier große Steine
   (Rubin oben und unten, Saphir links, Smaragd rechts), vier kleine Diamanten schräg dazwischen, oben rechts blitzt ein Funkeln auf */
@property --lx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fr-luxus {
  padding: 8px; border: 3px solid var(--ink);
  box-shadow: inset 0 0 0 1.5px #8A6018, inset 0 0 0 3.5px #FFE89A, inset 0 0 0 5px #8A6018;
  background: conic-gradient(from var(--lx-a), #FFF1B8, #C9952F 25%, #F2CF6A 50%, #B5832A 75%, #FFF1B8);
  animation: lxSpin 6s linear infinite;
}
.fr-luxus::before, .fr-luxus::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.fr-luxus::before {
  inset: -3px;
  background: var(--luxus-gem-r) 50% 0 / 16px 16px no-repeat, var(--luxus-gem-r) 50% 100% / 16px 16px no-repeat,
    var(--luxus-gem-s) 0 50% / 16px 16px no-repeat, var(--luxus-gem-g) 100% 50% / 16px 16px no-repeat,
    var(--luxus-gem-d) 14% 14% / 9px 9px no-repeat, var(--luxus-gem-d) 86% 14% / 9px 9px no-repeat,
    var(--luxus-gem-d) 14% 86% / 9px 9px no-repeat, var(--luxus-gem-d) 86% 86% / 9px 9px no-repeat;
}
.fr-luxus::after { inset: -6px; background: var(--luxus-spark) 76% 13% / 11px 11px no-repeat; opacity: 0; animation: lxBlink 3.8s ease-in-out infinite; }
@keyframes lxSpin { to { --lx-a: 360deg; } }
@keyframes lxBlink { 0%, 40%, 60%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes lxShine { 0% { transform: translateX(-120%); } 40%, 100% { transform: translateX(120%); } }
/* Titel: Goldbarren, dunkle Schrift, ein Glanz wandert darüber, drei Funkeln blitzen nacheinander auf, leichter Goldschein
   (mehr Funkeln, Nutzer 18.10.2026) */
.ti-luxus {
  position: relative; overflow: hidden;
  background: linear-gradient(#FFF1B8, #E9BC4E 45%, #B5832A); color: #2A1E08; box-shadow: 2px 2px 0 var(--ink), 0 0 7px rgba(255, 210, 80, .6);
}
.ti-luxus::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--luxus-spark) 7% 22% no-repeat, var(--luxus-spark) 58% 12% no-repeat, var(--luxus-spark) 93% 80% no-repeat;
  background-size: 0 0, 0 0, 0 0; animation: lxTwinkle 2.4s ease-in-out infinite;
}
@keyframes lxTwinkle {
  0%, 30%, 64%, 100% { background-size: 0 0, 0 0, 0 0; }
  12% { background-size: 10px 10px, 0 0, 0 0; }
  42% { background-size: 0 0, 9px 9px, 0 0; }
  80% { background-size: 0 0, 0 0, 10px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .fr-luxus { animation: none; }
  .fr-luxus::after, .card.c-back.bk-luxus::after, .ti-luxus::after, .ti-luxus::before { animation: none; display: none; }
}

/* ---------- Stadt ---------- */
/* Brett: Häuserblöcke hell und dunkel, darüber drei Straßen als Großbild, auf einem freien Feld ein kleiner Park (--cm) */
.sq.l.sk-stadt, .sq.d.sk-stadt {
  background: var(--cm, none) center / 100% 100%, var(--stadt-streets) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%;
}
.sq.l.sk-stadt { --ct: var(--stadt-sq-l); }
.sq.d.sk-stadt { --ct: var(--stadt-sq-d); }
.sq.sk-stadt:is(:nth-child(34), :nth-child(2)) { --cm: var(--stadt-park); }
/* Kartenrücken: Abendhimmel mit Skyline, Oval als blaues Straßenschild mit weißem Rand */
.card.c-back.bk-stadt { background: var(--stadt-back) center / 100% 100%; }
.bk-stadt .c-oval { background: #2F5FB0; box-shadow: inset 0 0 0 calc(var(--cw) * .025) #fff, inset 0 0 0 calc(var(--cw) * .04) #2F5FB0; }
.bk-stadt .c-logo { color: #fff; }
.boom .cap-stadt { color: #fff; }
/* Profilrahmen: Gullideckel aus Gusseisen, Rautenmuster mit hellem Außenrand (vorher Rippen, sah aus wie ein Reifen, Nutzer) */
.fr-stadt {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 2px #9AA0AC, inset 0 0 0 3.5px #2E323A;
  background: repeating-linear-gradient(45deg, transparent 0 3px, #2E323A 3px 4.3px), repeating-linear-gradient(-45deg, transparent 0 3px, #2E323A 3px 4.3px), #6A707C;
}
/* Titel: blaues Straßenschild mit weißem Rand */
.ti-stadt {
  background: #2F5FB0; color: #fff; outline: 1.5px solid #fff; outline-offset: -4px;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Kupfer ---------- */
/* Brett: geschliffenes Kupfer hell und dunkel mit metallischem Glanz (Großbild), Grünspan blendet an wenigen Stellen weich ein (Großbild;
   vorher Hammerschlag und runde Flecken) */
.sq.l.sk-kupfer, .sq.d.sk-kupfer {
  background: var(--kupfer-patina) var(--bx) var(--by) / 800% 400% no-repeat, var(--kupfer-sheen) var(--bx) var(--by) / 800% 400% no-repeat,
    var(--ct) center / 100% 100%;
}
.sq.l.sk-kupfer { --ct: var(--kupfer-sq-l); }
.sq.d.sk-kupfer { --ct: var(--kupfer-sq-d); }
/* Kartenrücken: Grünspan mit doppeltem Kupferrand, Oval aus blankem Kupfer */
.card.c-back.bk-kupfer { background: var(--kupfer-back) center / 100% 100%; }
.bk-kupfer .c-oval {
  background: linear-gradient(135deg, #C77A4A, #EDAA7C 34%, #FFE2CC 44%, #EDAA7C 56%, #C77A4A);
  box-shadow: inset 0 0 0 calc(var(--cw) * .03) #9A4E26;
}
.bk-kupfer .c-logo { color: #4A200C; }
.boom .cap-kupfer { color: #fff; }
/* Profilrahmen: blanker Kupferring */
.fr-kupfer {
  padding: 6px; border: 3px solid var(--ink); box-shadow: inset 0 0 0 1.5px #9A4E26;
  background: conic-gradient(#FFD2B0, #C77A4A 25%, #F2B48A 50%, #B8653A 75%, #FFD2B0);
}
/* Titel: Kupferplatte, dunkelbraune Schrift */
.ti-kupfer {
  background: linear-gradient(#FFD2B0, #E89A68 45%, #B8653A); color: #3A1A08; box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Dreck ---------- */
/* Brett: trockene Erde hell, nasser Matsch dunkel, darüber Krümel, Flecken, zwei Pfützen und eine Stiefelspur als Großbild */
.sq.l.sk-dreck, .sq.d.sk-dreck { background: var(--dreck-mud) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-dreck { --ct: var(--dreck-sq-l); }
.sq.d.sk-dreck { --ct: var(--dreck-sq-d); }
/* Kartenrücken: Lehm mit herunterlaufendem Matsch, Oval als Schlammpfütze */
.card.c-back.bk-dreck { background: var(--dreck-back) center / 100% 100%; }
.bk-dreck .c-oval { background: #5E432D; box-shadow: inset 0 0 0 calc(var(--cw) * .03) #7C5C40; }
.bk-dreck .c-logo { color: #F0DDBF; }
.boom .cap-dreck { color: #fff; }
/* Profilrahmen: fleckiger Schlammring, unten laufen zwei Tropfen über den Rand */
.fr-dreck {
  padding: 6px; border: 3px solid var(--ink);
  background: conic-gradient(#6B4D34, #5A402B 20%, #7A5A3E 45%, #5E432D 70%, #6B4D34);
}
.fr-dreck::before, .fr-dreck::after {
  content: ''; position: absolute; top: calc(99% - 3px); width: 7px; border: 2.5px solid var(--ink); border-top: 0;
  border-radius: 0 0 6px 6px; background: #5E432D; pointer-events: none;
}
.fr-dreck::before { left: calc(40% - 6px); height: 13px; }
.fr-dreck::after { left: calc(58% - 6px); height: 8px; }
/* Titel: Schlammbrocken, helle Schrift */
.ti-dreck {
  background: linear-gradient(#8A6648, #6B4D34); color: #F4E6CC;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Müll ---------- */
/* Brett: Karton hell und dunkel, darüber Laschenkanten und Klebeband als Großbild; je ein Feld mit Bananenschale und Apfelbutzen (--cm) */
.sq.l.sk-muell, .sq.d.sk-muell {
  background: var(--cm, none) center / 100% 100%, var(--muell-box) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%;
}
.sq.l.sk-muell { --ct: var(--muell-sq-l); }
.sq.d.sk-muell { --ct: var(--muell-sq-d); }
.sq.sk-muell:is(:nth-child(43), :nth-child(11)) { --cm: var(--muell-banana); }
.sq.sk-muell:is(:nth-child(39), :nth-child(7)) { --cm: var(--muell-apple); }
/* Kartenrücken: grüne Mülltonne mit Deckel und Rippen, Oval helleres Grün */
.card.c-back.bk-muell { background: var(--muell-back) center / 100% 100%; }
.bk-muell .c-oval { background: #6E8A6C; box-shadow: inset 0 0 0 calc(var(--cw) * .03) #3E503D; }
.bk-muell .c-logo { color: #F2F5EE; }
.boom .cap-muell { color: #fff; }
/* Profilrahmen: Altreifen, außen Profilblöcke, innen glatte Flanke */
.fr-muell {
  padding: 7px; border: 3px solid var(--ink);
  background: radial-gradient(closest-side, #2A2C30 calc(100% - 4px), transparent calc(100% - 4px)), repeating-conic-gradient(#4A4D54 0 7deg, #24262A 7deg 12deg);
}
/* Titel: Pappkarton, dunkelbraune Schrift */
.ti-muell { background: linear-gradient(#DCC197, #B8945F); color: #3A2A14; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Minimalismus ---------- */
/* Brett: helles und mittleres Grau (roter Punkt auf einem Feld vom Nutzer entfernt) */
.sq.l.sk-minimal, .sq.d.sk-minimal { background: var(--ct) center / 100% 100%; }
.sq.l.sk-minimal { --ct: var(--minimal-sq-l); }
.sq.d.sk-minimal { --ct: var(--minimal-sq-d); }
/* Kartenrücken: weiß mit feiner Linie, Oval nur als dünner Ring, Logo schwarz ohne Kontur */
.card.c-back.bk-minimal { background: var(--minimal-back) center / 100% 100%; }
.bk-minimal .c-oval { background: transparent; border-width: 1.5px; }
.bk-minimal .c-logo { color: #1E1E1E; -webkit-text-stroke: 0; text-shadow: none; }
.boom .cap-minimal { color: #1E1E1E; -webkit-text-stroke: 0; text-shadow: none; }
/* Profilrahmen: weißer Ring, die feine Linie genau in der Mitte (innen und außen gleich viel Weiß); alle drei Linien gleich dünn,
   auch der Rand des Profilbilds (Nutzer; roten Punkt hat der Nutzer entfernt) */
.fr-minimal { padding: 7.5px; border: 1.5px solid var(--ink); background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4.5px var(--ink); }
.fr-minimal .pb-avatar { border-width: 1.5px; }
/* Titel: weiß, dünner Rand, eckig, weit gesperrt */
.cos-title.ti-minimal { background: #fff; color: #1E1E1E; border-width: 1.5px; border-radius: 0; letter-spacing: .14em; }

/* ---------- Realistisch ---------- */
/* Brett: Ahorn hell, Nussbaum dunkel, Maserung je Feld und ein Lichtschein von links oben als Großbild */
.sq.l.sk-real, .sq.d.sk-real {
  background: var(--real-lamp) var(--bx) var(--by) / 800% 400% no-repeat, var(--real-grain) var(--bx) var(--by) / 800% 400% no-repeat,
    var(--ct) center / 100% 100%;
}
.sq.l.sk-real { --ct: var(--real-sq-l); }
.sq.d.sk-real { --ct: var(--real-sq-d); }
/* Kartenrücken: echte Spielkarte mit weißem Rand, Oval rot mit Lichtschein von links oben */
.card.c-back.bk-real { background: var(--real-back) center / 100% 100%; }
.bk-real .c-oval { background: radial-gradient(circle at 32% 28%, #D04A4E, #9A2228 55%, #6A1418); box-shadow: inset 0 0 0 calc(var(--cw) * .025) #F1E3C6; }
.bk-real .c-logo { color: #FBF3E2; }
.boom .cap-real { color: #fff; }
/* Profilrahmen: Zinnring in Grautönen, Licht fällt von links oben (vorher Nussbaum braun, Nutzer wollte Grau) */
.fr-real {
  padding: 6px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 26% 20%, rgba(255, 255, 255, .8) 0, transparent 34%), linear-gradient(135deg, #C9CDD2, #8E949B 50%, #4A4F56);
}
/* Titel: graue Zinnleiste mit Lichtkante oben, helle Schrift mit weichem Schatten (vorher Nussbaum braun, Nutzer wollte Grau) */
.ti-real {
  background: linear-gradient(175deg, #A7ACB3, #7B8189 55%, #555A61); color: #F6F7F8;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 2px 2px 0 var(--ink);
}


/* Titel: kleines Holzschild */
.cos-title {
  display: inline-block; font-family: var(--display); font-size: 13px; letter-spacing: .06em; line-height: 1; white-space: nowrap;
  padding: 3px 8px 1px; border: 2px solid var(--ink); border-radius: 5px;
}
.ti-holz {
  background: var(--holz-plate) center / 100% 100%; color: #FFF1D6;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink);
}

/* ==================== Kartenpack ==================== */
/* Bühne: dunkler Spot. Ablauf in tools/bibliothek.html (openPack): Pack aufreißen, Kartenstapel (vorderste Karte + Kanten der
   nächsten), jede Karte per Antippen aufdecken, danach Übersicht. --fx = Farbe der aktuellen Seltenheit für Schein, Ränder, Funkeln. */
.pk-stage {
  position: relative; display: grid; place-items: center; min-height: 460px; overflow: hidden; border-radius: 14px; border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 45%, #3A2F6B 0, #1E1838 55%, #120E24 100%);
  --cw: clamp(100px, 30vw, 150px); --fx: #fff;
  /* schnelles Antippen soll nichts blau markieren (Text, Bilder, Tipp-Aufleuchten am Handy) */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}
.pk-stage :focus:not(:focus-visible) { outline: none; }
.pk-stage img, .pk-stage svg { -webkit-user-drag: none; }
.pk-stage.flash::after { content: ''; position: absolute; inset: 0; background: #fff; animation: pkFlash .6s ease-out forwards; pointer-events: none; z-index: 30; }
@keyframes pkFlash { from { opacity: .95; } to { opacity: 0; } }
/* glänzende Bildschirmränder in der Seltenheitsfarbe (--str = Stärke) */
.pk-edge { position: absolute; inset: 0; pointer-events: none; z-index: 20; border-radius: 11px; opacity: 0; transition: opacity .5s; }
.pk-edge.on {
  opacity: 1; animation: pkEdge 1.5s ease-in-out infinite;
  box-shadow: inset 0 0 calc(var(--str) * 46px) calc(var(--str) * 10px) var(--fx), inset 0 0 calc(var(--str) * 10px) calc(var(--str) * 2px) rgba(255, 255, 255, .7);
}
.pk-edge.charge { animation-duration: .35s; }
@keyframes pkEdge { 50% { opacity: .55; } }
/* Schein hinter der Karte: rund, läuft nach außen weich aus (keine harte Kante) */
/* Mittig über negative Ränder statt translate: das Pulsieren (Eigenschaft scale) skaliert sonst um den unverschobenen Punkt und der
   Schein wandert beim Größerwerden zur Seite (Nutzer, 18.10.2026) */
.pk-aura {
  position: absolute; left: 50%; top: 46%; width: calc(var(--cw) * 4.2); height: calc(var(--cw) * 4.2); margin: calc(var(--cw) * -2.1) 0 0 calc(var(--cw) * -2.1);
  border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle, var(--fx) 0, transparent 58%); opacity: 0; transform: scale(.6);
  transition: opacity .45s, transform .6s cubic-bezier(.3, 1.4, .5, 1);
}
.pk-aura.on { opacity: var(--ao); transform: scale(1); animation: pkAura 2s ease-in-out infinite; }
.pk-aura.charge { opacity: calc(var(--ao) * .9); transform: scale(.85); animation: pkAura .5s ease-in-out infinite; }
@keyframes pkAura { 50% { scale: 1.1; filter: brightness(1.25); } }
/* Strahlen (ab Selten), weich ausgeblendet */
.pk-rays {
  position: absolute; left: 50%; top: 46%; aspect-ratio: 1; z-index: 4; pointer-events: none; opacity: 0; width: calc(var(--cw) * var(--rw, 3));
  background: repeating-conic-gradient(from 0deg, var(--fx) 0 8deg, transparent 8deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%);
  transform: translate(-50%, -50%); animation: rot 14s linear infinite, pkFadeTo .6s ease-out forwards;
}
.pk-rays.slow { animation-duration: 22s, .6s; }
.pk-rays.back { animation-direction: reverse, normal; }
@keyframes pkFadeTo { to { opacity: var(--o); } }

/* ---------- Pack ---------- */
.pk-pack { position: relative; width: calc(var(--cw) * 1.25); height: calc(var(--cw) * 1.88); cursor: pointer; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .45)); z-index: 5; }
.pk-pack.idle { animation: pkBob 2.4s ease-in-out infinite; }
.pk-pack.idle:hover { animation-duration: 1.2s; }
@keyframes pkBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-10px) rotate(1.5deg); } }
.pk-top, .pk-bottom { position: absolute; inset: 0; }
.pk-top { clip-path: inset(0 0 82% 0); transform-origin: 100% 18%; }
.pk-bottom { clip-path: inset(18% 0 0 0); transform-origin: 50% 100%; }
.pk-foil {
  position: absolute; inset: 0; border: 3px solid var(--ink); border-radius: 10px;
  background: repeating-linear-gradient(-35deg, rgba(255, 255, 255, .08) 0 10px, transparent 10px 22px), linear-gradient(160deg, #8A6BE8, #5B3FC0 55%, #3E2A93);
}
.pk-foil::before, .pk-foil::after {
  content: ''; position: absolute; left: -3px; right: -3px; height: 9px; opacity: .5;
  background: linear-gradient(135deg, var(--ink) 25%, transparent 25%) 0 0 / 10px 9px repeat-x, linear-gradient(225deg, var(--ink) 25%, transparent 25%) 0 0 / 10px 9px repeat-x;
}
.pk-foil::before { top: 6px; }
.pk-foil::after { bottom: 6px; transform: scaleY(-1); }
/* Folienglanz, der langsam über das Pack wandert */
.pk-sheen { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; overflow: hidden; }
.pk-sheen::before { content: ''; position: absolute; inset: -30%; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%); animation: pkSheen 3.2s ease-in-out infinite; }
@keyframes pkSheen { from { transform: translateX(-70%); } to { transform: translateX(70%); } }
.pk-art { position: absolute; inset: 0; pointer-events: none; }
.pk-burst { position: absolute; left: 50%; top: 47%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(8deg); }
.pk-burst svg { width: 100%; height: 100%; display: block; }
.pk-logo {
  position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%) rotate(-8deg); white-space: nowrap;
  font-family: var(--display); font-size: calc(var(--cw) * .3); letter-spacing: .03em; color: var(--pow);   /* rot (Nutzer, 18.10.2026; vorher gelb) */
  -webkit-text-stroke: 1.6px var(--ink); text-shadow: 3px 3px 0 var(--ink);
}
.pk-label {
  position: absolute; left: 50%; top: 67%; transform: translateX(-50%) rotate(-3deg); white-space: nowrap;
  font-family: var(--display); font-size: calc(var(--cw) * .15); letter-spacing: .08em; color: #fff;
  background: var(--pow); border: 2.5px solid var(--ink); border-radius: 6px; padding: 2px 8px 0; box-shadow: 2px 2px 0 var(--ink);
}
.pk-count { position: absolute; left: 0; right: 0; bottom: 9%; text-align: center; font-family: var(--display); font-size: calc(var(--cw) * .11); letter-spacing: .1em; color: #E8DEFF; }
.pk-tearline { position: absolute; left: 6%; right: 6%; top: 18%; border-top: 2px dashed rgba(255, 255, 255, .75); }
.pk-hint { position: absolute; left: 0; right: 0; top: 6%; text-align: center; font-family: var(--display); font-size: calc(var(--cw) * .1); color: #fff; letter-spacing: .06em; text-shadow: 1px 1px 0 var(--ink); animation: pkHint 1.2s ease-in-out infinite; }
@keyframes pkHint { 50% { opacity: .45; } }
/* Aufreißen: Pack ruckelt, heller Riss mit Funken läuft von links nach rechts, Streifen biegt sich und fliegt weg, Pack federt nach */
.pk-pack.shake { animation: pkWiggle .4s ease-in-out; }
@keyframes pkWiggle { 20% { transform: rotate(-4deg) scale(1.02); } 40% { transform: rotate(3deg); } 60% { transform: rotate(-3deg) scale(1.03); } 80% { transform: rotate(2deg); } }
.pk-rip { position: absolute; left: 0; top: calc(18% - 3px); height: 6px; width: 0; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px var(--sun); border-radius: 3px; z-index: 2; }
.pk-rip::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: radial-gradient(circle, #fff 0 25%, rgba(255, 210, 63, .8) 45%, transparent 70%); }
.pk-rip::after { opacity: 0; }
.pk-pack.tearing .pk-rip::after { opacity: 1; }
.pk-pack.tearing { animation: pkTug .6s ease-in-out; }
@keyframes pkTug { 30% { transform: rotate(-2deg) translateY(2px); } 70% { transform: rotate(2.5deg) translateY(-2px); } }
.pk-pack.tearing .pk-rip { animation: pkRip .6s cubic-bezier(.5, 0, .6, 1) forwards; }
.pk-pack.tearing .pk-top { animation: pkLift .6s ease-in forwards; }
@keyframes pkRip { to { width: 100%; } }
@keyframes pkLift { to { transform: rotate(-5deg) translateY(-3px); } }
.pk-pack.torn .pk-top { animation: pkFly .65s cubic-bezier(.3, .1, .6, 1) forwards; }
@keyframes pkFly { 0% { transform: rotate(-5deg) translateY(-3px); } 35% { transform: translate(18%, -40%) rotate(14deg); } 100% { transform: translate(85%, -150%) rotate(70deg); opacity: 0; } }
.pk-pack.torn .pk-bottom { animation: pkSquash .45s ease-out; }
@keyframes pkSquash { 30% { transform: scale(1.06, .92); } 60% { transform: scale(.97, 1.04); } }
.pk-pack.tearing .pk-hint, .pk-pack.torn .pk-hint, .pk-pack.torn .pk-rip, .pk-pack.torn .pk-tearline { opacity: 0; }
.pk-pack.drop { animation: pkDrop .55s cubic-bezier(.5, 0, .8, .5) forwards; }
/* „Überspringen“ mitten im Aufreißen: das Pack verschwindet schnell (Nutzer, 23.10.2026; blieb vorher stehen) */
.pk-pack.vanish { animation: pkVanish .22s ease-in forwards; pointer-events: none; }
@keyframes pkVanish { to { opacity: 0; transform: scale(.85); } }
@keyframes pkDrop { to { transform: translateY(95%) rotate(6deg); opacity: 0; } }

/* ---------- Kartenstapel: vorderste Karte ganz zu sehen, die nächsten als Kanten dahinter ---------- */
.pk-stack { position: absolute; left: 50%; top: 46%; width: var(--cw); height: calc(var(--cw) * 1.45); transform: translate(-50%, -50%); z-index: 6; }
.pk-card {
  position: absolute; inset: 0; perspective: 900px; --k: 0; z-index: calc(10 - var(--k));
  transform: translate(calc(var(--k) * 3px), calc(var(--k) * 7px)); transition: transform .45s cubic-bezier(.3, 1.3, .5, 1), opacity .35s;
}
/* hintere Karten: nur als helle Kanten unter der vordersten zu sehen (wie der Stapel im Spiel) */
.pk-card .c-back { transition: background-color .3s; }
.pk-card .c-back > * { transition: opacity .3s; }
.pk-card:not(.front):not(.away) .c-back { background: #FFF8E7; }
.pk-card:not(.front):not(.away) .c-back > * { opacity: 0; }
.pk-card.front { cursor: pointer; }
.pk-stack.rise .pk-card { animation: pkRise .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.pk-stack.rise .pk-card:nth-child(2) { animation-delay: .06s; }
.pk-stack.rise .pk-card:nth-child(3) { animation-delay: .12s; }
@keyframes pkRise { from { translate: 0 110%; opacity: 0; } to { translate: 0 0; opacity: 1; } }
.pk-card.away { transform: translate(-170%, 8%) rotate(-18deg); opacity: 0; pointer-events: none; }
.pk-card.charge .pk-inner { animation: pkShake .09s linear infinite; }
@keyframes pkShake { 25% { translate: -2px 1px; } 50% { translate: 2px -1px; } 75% { translate: -1px -2px; } }
.pk-card.front.idle .pk-inner { animation: pkNudge 1.6s ease-in-out infinite; }
@keyframes pkNudge { 50% { translate: 0 -5px; rotate: -1.5deg; } }
.pk-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.4, 1.5, .5, 1); }
.pk-card.flip .pk-inner { transform: rotateY(180deg); }
.pk-inner > .card, .pk-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pk-card.shown.r-l .pk-inner, .pk-card.shown.r-e .pk-inner { animation: pkFloat 2.4s ease-in-out infinite; }
@keyframes pkFloat { 50% { translate: 0 -6px; } }
.pk-tip { position: absolute; left: 0; right: 0; bottom: 64px; text-align: center; z-index: 21; font-family: var(--display); font-size: 17px; letter-spacing: .06em; color: #fff; text-shadow: 1px 1px 0 var(--ink); pointer-events: none; animation: pkHint 1.4s ease-in-out infinite; }
.pk-skip, .pk-again, .pk-collect { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 22; }
/* Drücken: nur leicht nach unten rechts, die Mitte bleibt (.play-btn:active setzte sonst translate(2px, 2px) und der Knopf sprang um die halbe Breite) */
.pk-skip:active, .pk-again:active, .pk-collect:active { transform: translate(calc(-50% + 2px), 2px); }

/* ---------- Kartenvorderseite eines Cosmetics: Band in Seltenheitsfarbe, Vorschau, Name ---------- */
.pk-face {
  transform: rotateY(180deg); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; background: var(--paper);
  border: 3px solid var(--ink); border-radius: calc(var(--cw) * .12); box-shadow: inset 0 0 0 3px var(--rc);
}
.pk-band {
  background: var(--rc); border-bottom: 3px solid var(--ink); text-align: center;
  font-family: var(--display); font-size: calc(var(--cw) * .12); letter-spacing: .06em; line-height: 1; padding: 5px 4px 3px;
  color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink);
}
.pk-view { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--paper-2); min-height: 0; }
.pk-face .pk-name { padding: 4px 5px 6px; text-align: center; border-top: 3px solid var(--ink); line-height: 1.1; background: var(--paper); }
.pk-face .pk-name b { display: block; font-size: calc(var(--cw) * .1); }
.pk-face .pk-name span { font-size: calc(var(--cw) * .08); color: var(--ink-soft); }
/* Vorschau auf der Kartenvorderseite: Größen hängen an der Kartenbreite (aus der Bibliothek, auch Freischalten in der Sammlung) */
.pk-view { --vw: var(--cw); }
.pk-view .pv-pieces { display: flex; gap: 2px; }
.pk-view .pv-pieces svg { width: calc(var(--vw) * .4); height: calc(var(--vw) * .4); }
.pk-view .pv-board { width: calc(var(--vw) * .78); display: grid; grid-template-columns: repeat(4, 1fr); border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; }
.pk-view .pv-board .sq { aspect-ratio: 1; display: grid; place-items: center; }
.pk-view .pv-board svg { width: 92%; height: 92%; }
.pk-view .pv-back { --cw: calc(var(--vw) * .42); }
.pk-view .pv-back .card { box-shadow: 2px 2px 0 var(--ink); }
.pk-view .boom { position: relative; left: auto; top: auto; margin: 0; animation: none; width: calc(var(--vw) * .9); height: calc(var(--vw) * .58); }
.pk-view .boom span { font-size: calc(var(--vw) * .17); padding: 0 4px; }
.pk-view .cos-title { font-size: calc(var(--vw) * .11); }
.pk-q { font-family: var(--display); font-size: calc(var(--cw) * .55); line-height: 1; color: var(--rc); -webkit-text-stroke: 2px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
/* Glanz über die Vorderseite: Selten einmal, Episch und Legendär immer wieder; dazu Folien-Schimmer (Episch lila, Legendär golden) */
.pk-face::after {
  content: ''; position: absolute; inset: -25%; pointer-events: none; opacity: 0; z-index: 3;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .9) 48%, transparent 58%); transform: translateX(-80%);
}
.shown.r-r .pk-face::after { opacity: 1; animation: pkShine 1s .3s ease-out forwards; }
.shown.r-e .pk-face::after { opacity: 1; animation: pkShine 1.6s .3s ease-in-out infinite; }
.shown.r-l .pk-face::after { opacity: 1; animation: pkShine 1.2s .3s ease-in-out infinite; }
@keyframes pkShine { to { transform: translateX(80%); } }
.pk-face::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; mix-blend-mode: overlay; }
.shown.r-e .pk-face::before, .shown.r-l .pk-face::before { opacity: .55; animation: pkHolo 2.2s linear infinite; }
.shown.r-e .pk-face::before { background: linear-gradient(130deg, transparent, #D7B5FF 25%, transparent 45%, #9B59E8 65%, transparent) 0 0 / 250% 250%; }
.shown.r-l .pk-face::before { opacity: .7; background: linear-gradient(130deg, transparent, #FFF3B0 20%, transparent 40%, #F5B700 60%, #fff 75%, transparent) 0 0 / 250% 250%; }
@keyframes pkHolo { to { background-position: 250% 250%; } }

/* ---------- Partikel ---------- */
/* Funken beim Aufdecken (fliegen nach außen) bzw. beim Aufladen (fliegen nach innen) */
.pk-part { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); background: var(--c); pointer-events: none; z-index: 12; animation: pkPart var(--t) cubic-bezier(.15, .8, .3, 1) forwards; }
.pk-part.star { clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.pk-part.dot { border-radius: 50%; box-shadow: 0 0 6px var(--c); }
.pk-part.in { animation-name: pkIn; animation-timing-function: cubic-bezier(.6, 0, .9, .6); }
@keyframes pkPart { 0% { transform: translate(0, 0) rotate(0) scale(.4); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; } }
@keyframes pkIn { 0% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(0, 0) scale(.3); opacity: .9; } }
/* Funkeln: vierzackige Sterne, die aufblitzen und sich drehen (äußere Hülle für den Leuchtschein) */
.pk-tw { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); pointer-events: none; z-index: 13; filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 2px #fff); animation: pkTw var(--t) ease-in-out forwards; }
.pk-tw i { position: absolute; inset: 0; background: var(--c); clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%); }
@keyframes pkTw { 0% { transform: scale(0) rotate(0); opacity: 0; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 100% { transform: scale(0) rotate(90deg); opacity: 0; } }
/* Glitzerstaub: winzige Punkte, die langsam aufsteigen */
.pk-dust { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); box-shadow: 0 0 5px var(--c); pointer-events: none; z-index: 11; animation: pkDust var(--t) ease-out forwards; }
@keyframes pkDust { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--dx), -90px); opacity: 0; } }
/* Comic-Wort (ab Selten) */
.pk-word { position: absolute; left: 50%; top: 3%; z-index: 25; pointer-events: none; }
.pk-word .boom { position: relative; margin: 0 0 0 -150px; left: auto; top: auto; }

/* ---------- Übersicht nach dem Öffnen ---------- */
.pk-over { position: absolute; inset: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 7; }
.pk-over-title { font-family: var(--display); font-size: 24px; letter-spacing: .06em; color: var(--sun); -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); }
.pk-over-row { display: flex; gap: calc(var(--cw) * .12); --cw: clamp(84px, 24vw, 132px); }
.pk-ocard { position: relative; width: var(--cw); height: calc(var(--cw) * 1.45); animation: pkPop .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.pk-ocol:nth-child(2) .pk-ocard { animation-delay: .1s; }
.pk-ocol:nth-child(3) .pk-ocard { animation-delay: .2s; }
.pk-ocard .pk-face { transform: none; }
.pk-ocard::before { content: ''; position: absolute; inset: -40%; border-radius: 50%; z-index: -1; background: radial-gradient(circle, var(--rc) 0, transparent 60%); opacity: var(--og, 0); }
.pk-ocard.r-u { --og: .45; } .pk-ocard.r-r { --og: .6; } .pk-ocard.r-e { --og: .8; } .pk-ocard.r-l { --og: 1; }
@keyframes pkPop { from { transform: scale(.4) translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pk-rays, .pk-aura, .pk-edge, .pk-card .pk-inner, .pk-pack.idle, .pk-face::before { animation: none !important; } }

/* ---------- Göttlich (Nutzer, 21. und 23.10.2026; Ablauf in cosmetics.js packFx god, godSet, nanu) ---------- */
.pk-over-row.four { --cw: clamp(70px, 21vw, 124px); }
.pk-ocard.r-g { --og: 1; }
/* Vorderseite: Glanz läuft immer wieder darüber, Schimmer in Weiß, Gold und Himmelblau */
.shown.r-g .pk-face::after { opacity: 1; animation: pkShine 1s .3s ease-in-out infinite; }
.shown.r-g .pk-face::before { opacity: .75; animation: pkHolo 1.8s linear infinite; background: linear-gradient(130deg, transparent, #FFFFFF 15%, #FFE98F 30%, transparent 42%, #CFEFFF 55%, #FFF3B0 68%, #FFFFFF 80%, transparent) 0 0 / 250% 250%; }
.pk-card.shown.r-g .pk-inner { animation: pkFloat 2.4s ease-in-out infinite; }
/* Karte beim Aufladen: zittert je Stufe stärker (--shk), leuchtet in der Farbe der Stufe (--fx der Bühne), wächst beim göttlichen Aufladen */
.pk-card.charge.godc .pk-inner { animation: pkShakeG .08s linear infinite; }
@keyframes pkShakeG {
  25% { translate: calc(var(--shk, 1) * -2px) calc(var(--shk, 1) * 1px); }
  50% { translate: calc(var(--shk, 1) * 2px) calc(var(--shk, 1) * -1px); }
  75% { translate: calc(var(--shk, 1) * -1px) calc(var(--shk, 1) * -2px); }
}
.pk-card.godc .c-back { box-shadow: 3px 3px 0 var(--ink), 0 0 calc(var(--cw) * .16) calc(var(--cw) * .03) var(--fx); }
.pk-card.godc.peak { transform: scale(1.1); transition: transform 3.6s cubic-bezier(.4, 0, .9, .6); }
/* göttlicher Rücken: blendet zu Beginn des göttlichen Aufladens in 1 s über den normalen (Nutzer, 25.10.2026; die Regel für
   .c-back > * mit 0,3 s war stärker und ließ ihn fast schlagartig erscheinen), ein Glanz wandert darüber */
.pk-godback { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; background: var(--godback) center / 100% 100%; opacity: 0; }
.pk-card .c-back > .pk-godback { transition: opacity 1s ease-in-out; }
.pk-card.godback .pk-godback { opacity: 1; }
.pk-godback::after { content: ''; position: absolute; inset: -30%; background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%); animation: pkSheen 2.6s ease-in-out infinite; }
/* weißgoldener Schleier über der Bühne, wird beim göttlichen Aufladen langsam hell */
.pk-god-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 3.4s ease-in;
  background: radial-gradient(circle at 50% 46%, #FFFDF0 0, rgba(255, 243, 196, .9) 28%, rgba(240, 205, 110, .6) 62%, rgba(214, 170, 70, .5) 100%);
}
.pk-stage.god .pk-god-veil { opacity: .8; }
/* Lichtstrahlen von oben, die nacheinander aufleuchten */
.pk-god-beams { position: absolute; inset: 0; z-index: 2; pointer-events: none; animation: pkFadeIn 1s ease-out both; }
.pk-god-beams i {
  position: absolute; left: 50%; top: -14%; width: calc(var(--cw) * .42); height: 66%; margin-left: calc(var(--cw) * -.21);
  transform-origin: 50% 0; transform: rotate(var(--a)); animation: pkBeam 2.4s ease-in-out var(--d) infinite;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 250, 225, .85) 40%, rgba(255, 243, 196, .5) 75%, rgba(255, 243, 196, 0));
  -webkit-mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
}
@keyframes pkBeam { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes pkFadeIn { from { opacity: 0; } }
/* Flügel öffnen sich hinter der Karte, Heiligenschein schwebt darüber */
.pk-god-wings {
  position: absolute; left: 50%; top: calc(46% - var(--cw) * 1.833); width: calc(var(--cw) * 5.667); height: calc(var(--cw) * 2.833); margin-left: calc(var(--cw) * -2.833);
  z-index: 5; pointer-events: none; filter: drop-shadow(0 0 calc(var(--cw) * .08) rgba(255, 243, 196, .9)); animation: pkWings 1s cubic-bezier(.3, 1.4, .5, 1) both;
}
@keyframes pkWings { from { transform: scale(.15, .5); opacity: 0; } }
.pk-god-halo {
  position: absolute; left: 50%; top: calc(46% - var(--cw) * 1.3); width: calc(var(--cw) * 1.1); height: calc(var(--cw) * .44); margin-left: calc(var(--cw) * -.55);
  z-index: 7; pointer-events: none; filter: drop-shadow(0 0 calc(var(--cw) * .06) #FFF3B0); animation: pkHaloIn .9s cubic-bezier(.3, 1.4, .5, 1) both, pkHalo 2.6s ease-in-out .9s infinite;
}
@keyframes pkHaloIn { from { transform: translateY(-70%); opacity: 0; } }
@keyframes pkHalo { 50% { translate: 0 -5px; } }
.pk-god-wings svg, .pk-god-halo svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Blitze und Druckwelle beim Umdrehen; großer Lichtblitz in Weißgold */
.pk-bolt { position: absolute; z-index: 14; pointer-events: none; filter: drop-shadow(0 0 6px #FFF3B0) drop-shadow(0 0 2px #FFFFFF); animation: pkBolt var(--t) linear forwards; }
.pk-bolt svg { display: block; overflow: visible; }
@keyframes pkBolt { 0% { opacity: 1; } 30% { opacity: .3; } 45% { opacity: 1; } 100% { opacity: 0; } }
.pk-shock {
  position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2); border-radius: 50%; z-index: 16; pointer-events: none;
  border: 6px solid #FFF3B0; box-shadow: 0 0 24px 6px #FFE98F, inset 0 0 24px 6px #FFE98F; animation: pkShock 1.05s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes pkShock { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.5); opacity: 0; } }
.pk-stage.flash.flash-g::after { background: radial-gradient(circle at 50% 46%, #FFFFFF 30%, #FFF3C4 70%, #FFE98F); animation-duration: 1.3s; }
/* Göttlich-Set: Karten liegen deckungsgleich, nur die vorderste ist zu sehen; die Teile fliegen ins Raster */
.pk-stack.one .pk-card { transform: none; }
.pk-stack.one .pk-card:not(.front) { opacity: 0; }
.pk-card.fly { transition: transform .6s cubic-bezier(.5, 0, .3, 1); z-index: 30; }
.pk-card.gone { visibility: hidden; }
.pk-godset { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.pk-godset .pk-over-title { position: absolute; left: 0; right: 0; text-align: center; opacity: 0; transition: opacity .6s .3s, top .7s; }
.pk-godset.done .pk-over-title { opacity: 1; }
.pk-gslot {
  position: absolute; width: var(--gw); height: calc(var(--gw) * 1.45); transform: translate(-50%, -50%); --cw: var(--gw);
  transition: left .7s cubic-bezier(.4, 0, .2, 1), top .7s cubic-bezier(.4, 0, .2, 1), width .7s, height .7s;
}
.pk-gslot .pk-ocard { width: 100%; height: 100%; animation: none; }
/* „Nanu“: die 4. Karte blendet von hinten ein (wird aus der Tiefe größer, Nutzer 23.10.2026; vorher sprang sie von unten herein),
   darüber der Text, am PC deutlich größer */
.pk-stack.nanu .pk-card { animation: pkNanu 1.1s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes pkNanu { from { scale: .45; opacity: 0; filter: brightness(2.2); } 60% { opacity: 1; } to { scale: 1; opacity: 1; filter: none; } }
.pk-nanu {
  position: absolute; left: 16px; right: 16px; bottom: calc(54% + var(--cw) * .85); text-align: center; z-index: 21; pointer-events: none;
  font-family: var(--display); font-size: clamp(20px, 3.4vw, 46px); letter-spacing: .04em; line-height: 1.2; color: #fff;
  -webkit-text-stroke: 1px var(--ink); text-shadow: 2px 2px 0 var(--ink); animation: pkPop .45s .45s cubic-bezier(.3, 1.5, .5, 1) both; transition: opacity .5s;
}
.pk-nanu.out { opacity: 0; }
/* Belohnung: Text über dem Pack */
/* doppelt so groß wie die Überschrift „Deine Karten“ (Nutzer, 23.10.2026: war zu klein), am Handy kleiner */
.pk-reward-title { position: absolute; left: 16px; right: 16px; top: 7%; text-align: center; z-index: 21; pointer-events: none; transition: opacity .4s; font-size: clamp(26px, 5vw, 48px); line-height: 1.15; }
.pk-reward-title.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .pk-card.charge.godc .pk-inner, .pk-god-beams i, .pk-god-halo, .pk-god-wings, .pk-stack.nanu .pk-card, .pk-godback::after { animation: none !important; }
  .pk-card.godc.peak { transform: none; }
}

/* ---------- Packchance auslosen (Drehscheibe, Nutzer 18.10.2026) ----------
   Feld „Pack“ so groß wie die echte Chance; der Zeiger landet gleichmäßig zufällig im ausgelosten Feld (keine gemogelten Fast-Treffer).
   Dreht 2,6 s, Antippen springt zum Ergebnis. Ab 100 % gibt es die vollen Packs vorab, gedreht wird um den Rest. */
.pk-roll { position: relative; z-index: 6; display: grid; justify-items: center; gap: 10px; cursor: pointer; }
.pk-roll-sure { font-family: var(--display); font-size: 22px; letter-spacing: .05em; color: #FFE27A; text-shadow: 2px 2px 0 var(--ink); }
/* Schatten am feststehenden Kasten, nicht an der Scheibe: sonst dreht er sich mit (Nutzer: immer unten rechts) */
.pk-wheel-box { position: relative; width: min(230px, 60vw); aspect-ratio: 1; margin-top: 12px; filter: drop-shadow(5px 5px 0 rgba(0, 0, 0, .45)); }
.pk-wheel { width: 100%; height: 100%; display: block; transition: transform 2.6s cubic-bezier(.12, .75, .2, 1); }
.pk-wheel.now { transition: none; }
.pk-pointer { position: absolute; left: 50%; top: -16px; width: 30px; height: 36px; transform: translateX(-50%); z-index: 2; }
.pk-hub {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 36%; aspect-ratio: 1; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; background: var(--paper); border: 3px solid var(--ink); font-family: var(--display); font-size: 22px; letter-spacing: .03em;
}
.pk-roll-res { min-height: 46px; text-align: center; font-family: var(--display); font-size: 40px; line-height: 1.1; letter-spacing: .05em; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 3px 3px 0 var(--ink); }
.pk-roll-res.win { color: #F5B700; animation: pkPop .45s cubic-bezier(.2, 1.6, .4, 1); }
.pk-roll-res.lose { color: #C9C5D4; }
.pk-roll-res small { display: block; font-size: 17px; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 var(--ink); color: #fff; letter-spacing: .06em; }
@keyframes pkPop { from { transform: scale(.3); } }
.pk-many { position: absolute; right: -14px; top: -12px; z-index: 6; font-family: var(--display); font-size: calc(var(--cw) * .2); color: #fff; background: var(--pow); border: 3px solid var(--ink); border-radius: 999px; padding: 2px 10px 0; box-shadow: 2px 2px 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .pk-wheel { transition-duration: .8s; } .pk-roll-res.win { animation: none; } }

/* ---------- Packchance bekommen (Hochzählen vor dem Auslosen, Nutzer 18.10.2026; Cos.countUp) ---------- */
.pk-gain { position: relative; z-index: 6; display: grid; justify-items: center; gap: 6px; text-align: center; }
.pk-gain-label { font-family: var(--display); font-size: 20px; letter-spacing: .05em; color: #E8DEFF; text-shadow: 1px 1px 0 var(--ink); }
.pk-gain-num {
  font-family: var(--display); font-size: 84px; line-height: 1; letter-spacing: .03em; color: #fff; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--ink); transition: color .25s, transform .25s;
}
.pk-gain-num.done { color: #FFE27A; transform: scale(1.12); }
.pk-gain-add {
  font-family: var(--display); font-size: 26px; letter-spacing: .05em; color: #fff; background: #5B3FC0; border: 3px solid var(--ink); border-radius: 999px;
  padding: 4px 14px 1px; box-shadow: 3px 3px 0 var(--ink); animation: pkPop .45s cubic-bezier(.2, 1.6, .4, 1);
}
.pk-gain-sub { font-family: var(--display); font-size: 17px; letter-spacing: .08em; color: #B9B4C8; }
@media (prefers-reduced-motion: reduce) { .pk-gain-add { animation: none; } }

/* ---------- Schnee (Platz 42, 18.10.2026) ---------- */
/* Brett: Schneedecke, darüber eine Spur Fußstapfen als Großbild (siehe oben) */
.sq.l.sk-schnee, .sq.d.sk-schnee { background: var(--schnee-steps) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-schnee { --ct: var(--schnee-sq-l); }
.sq.d.sk-schnee { --ct: var(--schnee-sq-d); }
/* Kartenrücken: Nachthimmel mit Flocken über einem Schneehügel, Oval als Schneeball, Logo blau */
.card.c-back.bk-schnee { background: var(--schnee-back) center / 100% 100%; }
.bk-schnee .c-oval { background: radial-gradient(circle at 34% 30%, #FFFFFF 0, #EEF4FC 45%, #C6D7EE 100%); }
.bk-schnee .c-logo { color: #2E4F8F; }
.boom .cap-schnee { color: #3B6FB6; }
/* Profilrahmen: Schneering mit drei blauen Flocken */
.fr-schnee { padding: 8px; border: 3px solid var(--ink); background: var(--schnee-ring) center / 100% 100%; }
/* Titel: weißes Schild, blaue Schrift */
.ti-schnee { background: #F4F8FF; color: #2E4F8F; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Gaming (Platz 43, 20.10.2026) ---------- */
/* Brett: Tastenkappen, beschriftet wie eine QWERTZ-Tastatur (englische Fassung später QWERTY); Schrift und Lichtränder aller Tasten
   leuchten in RGB (eine SMIL-Animation im Großbild, in Stufen, ohne Bewegung blau; siehe keyLegendsSVG in cosmetics.js) */
.sq.l.sk-gaming, .sq.d.sk-gaming { background: var(--gaming-keys) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-gaming { --ct: var(--gaming-sq-l); }
.sq.d.sk-gaming { --ct: var(--gaming-sq-d); }
/* Kartenrücken: Controller mit Steuerkreuz und zwei blauen Knöpfen, Oval als dunkler Bildschirm mit blauem Rand, Logo blau */
.card.c-back.bk-gaming { background: var(--gaming-back) center / 100% 100%; }
.bk-gaming .c-oval { background: #16181D; border-color: #2463D1; }
.bk-gaming .c-logo { color: #4F8DEB; }
.boom .cap-gaming { color: #fff; }
/* Profilrahmen: schmaler anthrazit Ring mit breitem RGB-Lichtstreifen (rot, grün, blau). Nur die Farben laufen im Kreis (Winkel des
   Verlaufs über @property), der Streifen selbst steht still; vorher drehte sich die ganze Ebene und die Kanten flimmerten; 50 % schneller als zuerst, 2,7 statt 4 s (Nutzer 20.10.2026) */
@property --ga-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fr-gaming { padding: 6px; border: 3px solid var(--ink); background: #2A2D35; }
.fr-gaming::before {
  content: ''; position: absolute; inset: 1px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--ga-a), #FF4D5E, #3CCB6E, #3A8DFF, #FF4D5E);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  mask: radial-gradient(closest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
  animation: gaSpin 2.7s linear infinite;
}
@keyframes gaSpin { to { --ga-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .fr-gaming::before { animation: none; } }
/* Titel: anthrazit Schild, blaue Schrift */
.ti-gaming { background: #2A2D35; color: #4F8DEB; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Bauernhof (Platz 44, 20.10.2026) ---------- */
/* Brett: helle Felder Weide, dunkle Felder Acker mit Furchen; nur ein Huhn (Nutzer): Feld 46 von 64 (eigene Hälfte unten, leere Reihe),
   oben Feld 14 für die Hälfte des Gegners, in der Sammlung (nur 32 Felder) ebenfalls Feld 14 */
.sq.l.sk-bauernhof { background: var(--bauernhof-sq-l) center / 100% 100%; }
.sq.l.sk-bauernhof:nth-child(32n + 14) { background-image: var(--bauernhof-sq-h); }
.sq.d.sk-bauernhof { background: var(--bauernhof-sq-d) center / 100% 100%; }
/* Kartenrücken: rotes Scheunentor, Oval als Heuballen, Logo scheunenrot */
.card.c-back.bk-bauernhof { background: var(--bauernhof-back) center / 100% 100%; }
.bk-bauernhof .c-oval { background: #F0C24A repeating-linear-gradient(100deg, transparent 0 5px, rgba(180, 130, 30, .45) 5px 6.5px); }
.bk-bauernhof .c-logo { color: #B8322A; }
.boom .cap-bauernhof { color: #C8352B; }
/* Profilrahmen: Strohkranz */
.fr-bauernhof { padding: 8px; border: 3px solid var(--ink); background: var(--bauernhof-ring) center / 100% 100%; }
/* Titel: braunes Schild, weiße Schrift (Nutzer: braun statt rot) */
.ti-bauernhof { background: #7A4A2A; color: #fff; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Katzen (Platz 45, 20.10.2026) ---------- */
/* Brett: helle Felder Teppich, auf wenigen zwei Pfotenabdrücke; dunkle Felder Sisal; darüber zwei große Kratzspuren als Großbild (siehe oben) */
.sq.l.sk-katzen, .sq.d.sk-katzen { background: var(--katzen-scratch) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-katzen { --ct: var(--katzen-sq-l); }
.sq.l.sk-katzen:nth-child(5n + 1) { --ct: var(--katzen-sq-p); }
.sq.d.sk-katzen { --ct: var(--katzen-sq-d); }
/* Kartenrücken: petrol mit Wollknäuel, Oval cremefarben, Logo rot */
.card.c-back.bk-katzen { background: var(--katzen-back) center / 100% 100%; }
.bk-katzen .c-oval { background: #F5EAD7; }
.bk-katzen .c-logo { color: #D9534F; }
.boom .cap-katzen { color: #fff; }
/* Profilrahmen: orange getigerter Ring, oben zwei Ohren (eigene Fläche über dem Ring, im Kreis abgeschnitten) */
.fr-katzen { padding: 8px; border: 3px solid var(--ink); background: var(--katzen-ring) center / 100% 100%; }
.fr-katzen::before { content: ''; position: absolute; left: -3px; right: -3px; top: calc(-16% - 4px); aspect-ratio: 100 / 116; pointer-events: none; background: var(--katzen-ears) center / 100% 100% no-repeat; }
/* Titel: oranges Schild, weiße Schrift mit Kontur */
.ti-katzen { background: #F0A04B; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Pilzwald (Platz 46, 20.10.2026) ---------- */
/* Brett: helle Felder Moos, auf wenigen ein Fliegenpilz; dunkle Felder Waldboden mit Nadeln */
.sq.l.sk-pilzwald { background: var(--pilzwald-sq-l) center / 100% 100%; }
.sq.l.sk-pilzwald:nth-child(6n + 3) { background-image: var(--pilzwald-sq-m); }
.sq.d.sk-pilzwald { background: var(--pilzwald-sq-d) center / 100% 100%; }
/* Kartenrücken: Fliegenpilzhut, Oval wie der Stiel, Logo rot */
.card.c-back.bk-pilzwald { background: var(--pilzwald-back) center / 100% 100%; }
.bk-pilzwald .c-oval { background: #F6EEDC; }
.bk-pilzwald .c-logo { color: #D8342C; }
.boom .cap-pilzwald { color: #fff; }
/* Profilrahmen: Moosring */
.fr-pilzwald { padding: 8px; border: 3px solid var(--ink); background: var(--pilzwald-ring) center / 100% 100%; }
/* Titel: moosgrünes Schild, weiße Schrift mit Kontur */
.ti-pilzwald { background: #6E9A44; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Wüste (Platz 47, 21.10.2026) ---------- */
/* Brett: heller und dunkler Sand mit Dünenrippeln; ein Kaktus auf den Feldern 35 und 46 (leere Reihen der eigenen Hälfte),
   oben 3 und 14 für die Hälfte des Gegners, in der Sammlung (nur 32 Felder) ebenfalls 3 und 14 */
.sq.l.sk-wueste { background: var(--wueste-sq-l) center / 100% 100%; }
.sq.l.sk-wueste:is(:nth-child(32n + 3), :nth-child(32n + 14)) { background-image: var(--wueste-sq-c); }
.sq.d.sk-wueste { background: var(--wueste-sq-d) center / 100% 100%; }
/* Kartenrücken: Abendhimmel mit Sonne, Dünen und Kamel, Oval sandfarben, Logo rotbraun */
.card.c-back.bk-wueste { background: var(--wueste-back) center / 100% 100%; }
.bk-wueste .c-oval { background: #F7E3B5; }
.bk-wueste .c-logo { color: #B5572A; }
.boom .cap-wueste { color: #fff; }
/* Profilrahmen: Sandring mit Rippelbögen */
.fr-wueste { padding: 8px; border: 3px solid var(--ink); background: var(--wueste-ring) center / 100% 100%; }
/* Titel: sandfarbenes Schild, rotbraune Schrift */
.ti-wueste { background: #E9B96A; color: #6E3415; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Weihnachten (Platz 48, 21.10.2026) ---------- */
/* Brett: Geschenkpapier (creme und tannengrün), durch die leeren Reihen ein rotes Band mit Schleife als Großbild (siehe oben) */
.sq.l.sk-weihnachten, .sq.d.sk-weihnachten { background: var(--weihnachten-ribbon) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-weihnachten { --ct: var(--weihnachten-sq-l); }
.sq.d.sk-weihnachten { --ct: var(--weihnachten-sq-d); }
/* Kartenrücken: Nussknacker-Jacke, Oval schwarz mit Goldrand, Logo gold */
.card.c-back.bk-weihnachten { background: var(--weihnachten-back) center / 100% 100%; }
.bk-weihnachten .c-oval { background: #22222C; border-color: #F2C94C; }
.bk-weihnachten .c-logo { color: #F2C94C; }
.boom .cap-weihnachten { color: #fff; }
/* Profilrahmen: Tannenkranz mit roter Schleife */
.fr-weihnachten { padding: 8px; border: 3px solid var(--ink); background: var(--weihnachten-ring) center / 100% 100%; }
/* Titel: rotes Schild, weiße Schrift mit Kontur */
.ti-weihnachten { background: #C0282D; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Ostern (Platz 49, 21.10.2026) ---------- */
/* Brett: Frühlingswiese, in den leeren Reihen drei versteckte Ostereier als Großbild (siehe oben) */
.sq.l.sk-ostern, .sq.d.sk-ostern { background: var(--ostern-eggs) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-ostern { --ct: var(--ostern-sq-l); }
.sq.d.sk-ostern { --ct: var(--ostern-sq-d); }
/* Kartenrücken: gelb mit lila Zickzackbändern, Oval als bemaltes Ei (cremeweiß mit hellblauem Band), Logo lila */
.card.c-back.bk-ostern { background: var(--ostern-back) center / 100% 100%; }
.bk-ostern .c-oval { background: linear-gradient(#FBF4E6 0 40%, #8EC3F0 40% 60%, #FBF4E6 60%); }
.bk-ostern .c-logo { color: #7A5CB8; }
.boom .cap-ostern { color: #fff; }
/* Profilrahmen: Zweignest mit zwei kleinen Eiern */
.fr-ostern { padding: 8px; border: 3px solid var(--ink); background: var(--ostern-ring) center / 100% 100%; }
/* Titel: lila Schild, weiße Schrift mit Kontur */
.ti-ostern { background: #9C7FD0; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Halloween (Platz 50, id kuerbis, 21.10.2026) ---------- */
/* Brett: Stroh und Erde, durch die leeren Reihen eine Kürbisranke mit Laterne als Großbild (siehe oben) */
.sq.l.sk-kuerbis, .sq.d.sk-kuerbis { background: var(--kuerbis-vine) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-kuerbis { --ct: var(--kuerbis-sq-l); }
.sq.d.sk-kuerbis { --ct: var(--kuerbis-sq-d); }
/* Kartenrücken: Nachthimmel mit Mond und Fledermäusen, Oval kürbisorange, Logo dunkelviolett */
.card.c-back.bk-kuerbis { background: var(--kuerbis-back) center / 100% 100%; }
.bk-kuerbis .c-oval { background: #F28C28; }
.bk-kuerbis .c-logo { color: #2E1F45; }
.boom .cap-kuerbis { color: #fff; }
/* Profilrahmen: Kürbis von oben mit Rippen und einer Ranke */
.fr-kuerbis { padding: 8px; border: 3px solid var(--ink); background: var(--kuerbis-ring) center / 100% 100%; }
/* Titel: oranges Schild, weiße Schrift mit Kontur */
.ti-kuerbis { background: #F28C28; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Silvester (Platz 51, 21.10.2026) ---------- */
/* Brett: champagnerfarben und nachtblau, in den leeren Reihen zwei Feuerwerke als Großbild (siehe oben) */
.sq.l.sk-silvester, .sq.d.sk-silvester { background: var(--silvester-fire) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-silvester { --ct: var(--silvester-sq-l); }
.sq.d.sk-silvester { --ct: var(--silvester-sq-d); }
/* Kartenrücken: Nachtblau mit Rakete und Feuerwerk, Oval gold, Logo rot (nachtblau war mit der Tintenkontur kaum lesbar) */
.card.c-back.bk-silvester { background: var(--silvester-back) center / 100% 100%; }
.bk-silvester .c-oval { background: #F2C94C; }
.bk-silvester .c-logo { color: #E2504A; }
.boom .cap-silvester { color: #fff; }
/* Profilrahmen: nachtblauer Ring mit vier goldenen Funken */
.fr-silvester { padding: 8px; border: 3px solid var(--ink); background: var(--silvester-ring) center / 100% 100%; }
/* Titel: nachtblaues Schild, goldene Schrift */
.ti-silvester { background: #1F2547; color: #F2C94C; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Göttlich (Set des göttlichen Gustavsson, Belohnung für „Gottesgleich“, 21.10.2026; alle Teile bewegt) ---------- */
/* Brett: perlweiß und Himmelsverlauf, darüber Lichtstrahlen, schwebender Heiligenschein, Wolken, Glitzer und Feder (Großbild mit SMIL) */
.sq.l.sk-goettlich, .sq.d.sk-goettlich { background: var(--goettlich-sky) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-goettlich { --ct: var(--goettlich-sq-l); }
.sq.d.sk-goettlich { --ct: var(--goettlich-sq-d); }
/* Kartenrücken: kräftiger Himmel mit kreisendem Goldkranz, Goldrahmen, Wolken und Glitzer (im Bild); Oval perlweiß mit Goldrand,
   das sanft golden leuchtet; Logo wie beim normalen Rücken */
.card.c-back.bk-goettlich { background: var(--goettlich-back) center / 100% 100%; }
.bk-goettlich .c-oval {
  background: radial-gradient(#FFFFFF 40%, #FFF3CF); box-shadow: inset 0 0 0 calc(var(--cw) * .035) #E3B23C, 0 0 calc(var(--cw) * .06) #FFE38A;
  animation: gtOval 2.4s ease-in-out infinite alternate;
}
@keyframes gtOval { to { box-shadow: inset 0 0 0 calc(var(--cw) * .035) #E3B23C, 0 0 calc(var(--cw) * .16) #FFF3B0; } }
.boom .cap-goettlich { color: #FFD84A; }
.boom .cap-goettlich.own { letter-spacing: 0; transform: rotate(-6deg) scaleX(.8); }
/* Profilrahmen mit eigener Form: polierter Goldring mit Tintenrand (Fassung A von drei, Nutzer 21.10.2026; vorher hell-dunkle
   Strahlen im Ring), dahinter Strahlenkranz und zwei schlagende Engelsflügel (::before, unter dem Profilbild), darüber ein
   schwebender Heiligenschein und zwei Glitzer (::after) */
.fr-goettlich {
  padding: 8px; border: 3px solid var(--ink); isolation: isolate;
  background: linear-gradient(135deg, #FFF6C8, #F2CF6A 35%, #D9A932 55%, #FFF1B0 80%, #E3B23C);
}
.fr-goettlich::before, .fr-goettlich::after { content: ''; position: absolute; inset: -26%; pointer-events: none; background: center / 100% 100% no-repeat; }
/* ohne den versetzten Comic-Schatten des Profilbilds: im Goldring lag er als dunkler Halbmond unten rechts (Nutzer, 24.10.2026) */
.fr-goettlich > * { box-shadow: none; }
.fr-goettlich::before { z-index: -1; background-image: var(--goettlich-corona); }
.fr-goettlich::after { background-image: var(--goettlich-halo); }
/* In Kacheln, Slots und Packkarten etwas kleiner, damit Strahlen und Flügel nicht an den Rand stoßen (Nutzer, 21.10.2026) */
:is(.tile-view, .col-view, .col-slot-view, .pk-view) .fr-goettlich { transform: scale(.8); }
/* Titel: perlweißes Schild mit Goldrand, goldene Schrift; leuchtet golden auf und ab, ein Glanz wandert darüber, drei Glitzer */
.ti-goettlich {
  position: relative; overflow: hidden; background: linear-gradient(#FFFFFF, #FFF1C2 55%, #F5D77A); color: #FFD84A;
  -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink);
  box-shadow: inset 0 0 0 1.5px #E3B23C, 2px 2px 0 var(--ink), 0 0 3px rgba(255, 215, 90, .5); animation: gtTitle 2.2s ease-in-out infinite alternate;
}
@keyframes gtTitle { to { box-shadow: inset 0 0 0 1.5px #E3B23C, 2px 2px 0 var(--ink), 0 0 12px rgba(255, 225, 110, 1); } }
.ti-goettlich::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%);
  transform: translateX(-120%); animation: lxShine 2.2s ease-in-out infinite;
}
.ti-goettlich::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: var(--goettlich-spark) 6% 25% no-repeat, var(--goettlich-spark) 55% 10% no-repeat, var(--goettlich-spark) 94% 78% no-repeat;
  background-size: 0 0, 0 0, 0 0; animation: lxTwinkle 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bk-goettlich .c-oval, .ti-goettlich { animation: none; }
  .ti-goettlich::after, .ti-goettlich::before { animation: none; display: none; }
}

/* ---------- Gottesgaben (zweites göttliches Set aus Packs, 24.10.2026; eigene Bereiche, alle Teile bewegt) ---------- */
/* Glanz, der über eine Fläche läuft (Kartenvorderseite, Ladungszahl, Profilknopf, Schach-Schild) */
@keyframes ggShine { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
.fc-shine { display: none; }
.fc-gottesgaben .fc-shine, .gg-pts::after, .check-tag.cl-gottesgaben span::after {
  content: ''; display: block; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .8) 48%, transparent 58%) no-repeat; background-size: 250% 100%;
  animation: ggShine 3.4s ease-in-out infinite;
}
/* Kartenvorderseite „Goldschnitt“: Verlauf je Kartenart mit drehendem Strahlenkranz, Goldkante und Glitzer (Bild), Oval perlweiß mit
   Goldrand, das golden leuchtet; Zahl mit goldenem statt rotem Schatten, Eckzeichen golden */
.card.fc-gottesgaben { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; }
.card.fc-gottesgaben.c-num { background-image: var(--gottesgaben-face-num); }
.card.fc-gottesgaben.c-act { background-image: var(--gottesgaben-face-act); }
.card.fc-gottesgaben.c-plus { background-image: var(--gottesgaben-face-plus); }
.card.fc-gottesgaben.c-wild { background-image: var(--gottesgaben-face-wild); }
.fc-gottesgaben .c-oval {
  background: radial-gradient(#FFFFFF 45%, #FFF3CF); box-shadow: inset 0 0 0 calc(var(--cw) * .035) #E3B23C, 0 0 calc(var(--cw) * .06) #FFE38A;
  animation: gtOval 2.4s ease-in-out infinite alternate;
}
.fc-gottesgaben .c-glyph svg { filter: drop-shadow(calc(var(--cw) * .04) calc(var(--cw) * .04) 0 #E3B23C) drop-shadow(0 0 calc(var(--cw) * .03) #FFF1B8); }
.fc-gottesgaben .c-big { text-shadow: calc(var(--cw) * .04) calc(var(--cw) * .04) 0 #E3B23C; }
.fc-gottesgaben .c-corner { color: #FFE27A; }
.fc-gottesgaben .c-corner .c-glyph-mini { fill: #FFE27A; }
/* Aufladung „Gloriole“: Ring hinter der Figur (im Bild), voll mit Strahlenkranz und Pulsieren; Zahl in Gold mit Glanz */
.pc svg.gg-glory {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 2px #FFE38A); transition: none;
}
.pc svg.gg-glory.full { animation: ggGlory 1.3s ease-in-out infinite alternate; }
@keyframes ggGlory { to { filter: drop-shadow(0 0 5px #FFF6CC) drop-shadow(0 0 2px #FFE38A); } }
.pc .pts.gg-pts { overflow: hidden; background: linear-gradient(#FFFDF0, #FFE58A 55%, #F2C440); box-shadow: 1px 1px 0 var(--ink), 0 0 4px rgba(255, 215, 90, .8); }
.pc .pts.gg-pts::after { animation-duration: 2.4s; }
.pc .pts.gg-pts.full { background: linear-gradient(#FFFFFF, #FFF1B8 50%, #FFD84A); animation: ggPts 1s ease-in-out infinite alternate; }
@keyframes ggPts { to { box-shadow: 1px 1px 0 var(--ink), 0 0 9px 2px rgba(255, 236, 160, 1); } }
/* Rufe „Himmelsruf“: Stern, Strahlen, Heiligenschein und Blitze (Bild), steht länger als ein normales Wort (app.js boom) */
.boom.gg-call { animation: ggCall 1.9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
@keyframes ggCall {
  0% { transform: scale(.2) rotate(-20deg); opacity: 0; filter: brightness(2.4); }
  12% { transform: scale(1.18) rotate(3deg); opacity: 1; }
  24% { transform: scale(1) rotate(0); filter: brightness(1); }
  84% { opacity: 1; transform: scale(1.03); }
  100% { transform: scale(1.08) translateY(-30px); opacity: 0; }
}
.boom .call-gg { color: #EE4B2B; text-shadow: 3px 3px 0 var(--ink), 0 0 14px #FFF6CC; }
.boom .call-gg.stale { color: #7B5CD6; }
/* Schach-Schild am König: perlweiß-golden mit roter Schrift, leuchtet und glänzt */
.check-tag.cl-gottesgaben span {
  overflow: hidden; background: linear-gradient(#FFFFFF, #FFF1B8 55%, #F5D46A); color: #EE4B2B;
  box-shadow: 2px 2px 0 var(--ink), 0 0 6px rgba(255, 220, 110, .9); animation: checkPulse 1.2s ease-in-out infinite, ggTag 1.2s ease-in-out infinite;
}
@keyframes ggTag { 50% { box-shadow: 2px 2px 0 var(--ink), 0 0 14px 3px rgba(255, 236, 160, 1); } }
.check-tag.cl-gottesgaben span::after { animation-duration: 2.4s; }
/* Lichtspur „Sternenstaub“ (cosmetics.js trailFx): Schweif, Lichtkopf, Ring am Ziel, rieselnder Sternenstaub */
.gg-trail { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.gg-trail i { position: absolute; display: block; }
.gg-beam {
  transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 210, 70, 0), rgba(255, 206, 60, .9) 55%, #FFF3B8 85%, #FFFFFF);
  filter: drop-shadow(0 0 3px #F2C440) drop-shadow(0 0 10px rgba(255, 220, 110, .9));
}
.gg-head { border-radius: 50%; background: radial-gradient(#FFFFFF 30%, #FFF1B8 55%, rgba(255, 227, 138, 0) 72%); }
.gg-ring { border-radius: 50%; border: 3px solid #FFE38A; box-shadow: 0 0 10px #FFF1B8, inset 0 0 8px #FFF1B8; }
.gg-dust svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* Profilknopf „Himmelsglanz“: nur die Schaltfläche, nichts am Profilbild (das gehört zum Profilrahmen, Nutzer 24.10.2026; vorher Flügel,
   Heiligenschein und Goldring ums Bild). Goldenes Schild mit wanderndem Goldverlauf, golden pulsierender Schein, ein Lichtpunkt läuft
   um den Rand, drei Sterne funkeln nacheinander */
@property --gg-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ggSpinA { to { --gg-a: 360deg; } }
.profile-chip.pf-gottesgaben {
  position: relative; isolation: isolate;
  background: linear-gradient(90deg, #FFF8DC, #FFD95A 20%, #FFFBEA 40%, #F5C842 62%, #FFE9A0 82%, #FFF8DC) 0 0 / 200% 100%;   /* Anfang = Ende: nahtlos */
  box-shadow: var(--shadow-sm), 0 0 6px rgba(255, 215, 90, .6); animation: ggChip 2.2s ease-in-out infinite alternate, ggBarGold 5s linear infinite;
}
@keyframes ggChip { to { box-shadow: var(--shadow-sm), 0 0 14px 3px rgba(255, 230, 140, .95); } }
.profile-chip.pf-gottesgaben::after {
  content: ''; position: absolute; inset: -3px; border-radius: inherit; padding: 3px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--gg-a), transparent 0 64%, #FFE38A 76%, #FFFFFF 82%, #FFE38A 88%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ggSpinA 2.8s linear infinite;
}
.profile-chip.pf-gottesgaben::before {
  content: ''; position: absolute; inset: -4px; pointer-events: none; z-index: 1;
  background: var(--gottesgaben-spark) 62% 8% no-repeat, var(--gottesgaben-spark) 96% 30% no-repeat, var(--gottesgaben-spark) 80% 94% no-repeat;
  background-size: 0 0, 0 0, 0 0; animation: lxTwinkle 2.6s ease-in-out infinite;
}
.pf-gottesgaben .pc-sub { color: #7A5A10; }
/* Am-Zug-Leuchten „Gotteslicht“: Leiste perlweiß-golden, schräge Lichtbahnen von oben ziehen langsam vorbei, golden pulsierender Schein,
   Schild „Am Zug“ golden mit roter Schrift */
.pbar.tg-gottesgaben.active {
  isolation: isolate; background: linear-gradient(90deg, #FFF3C4, #FFD95A 20%, #FFF6D6 40%, #F5C842 62%, #FFE38A 82%, #FFF3C4) 0 0 / 200% 100%;   /* Anfang = Ende: nahtlos */
  box-shadow: var(--shadow-sm), inset 0 0 0 2px #FFF6D6, 0 0 12px 3px rgba(255, 210, 80, .8);
  animation: ggBar 1.8s ease-in-out infinite alternate, ggBarGold 6s linear infinite;
}
@keyframes ggBar { to { box-shadow: var(--shadow-sm), inset 0 0 0 2px #FFF6D6, 0 0 24px 8px rgba(255, 232, 140, 1); } }
@keyframes ggBarGold { to { background-position: -200% 0; } }
.pbar.tg-gottesgaben.active::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: var(--gottesgaben-beams) 0 0 / 320px 100% repeat-x; animation: ggBeams 9s linear infinite;
}
@keyframes ggBeams { to { background-position: 320px 0; } }
.pbar.tg-gottesgaben.active::after {
  background: linear-gradient(#FFFFFF, #FFE58A 60%, #F2C440); color: #EE4B2B; -webkit-text-stroke: .6px var(--ink);
  box-shadow: 0 0 8px rgba(255, 220, 110, .95);
}
/* Vorschauen (Sammlung, Ausrüstung, Bibliothek, Packkarte): alles in em, der Behälter setzt die Schriftgröße */
.gg-view { display: flex; align-items: center; justify-content: center; gap: .5em; font-size: 16px; line-height: 1.15; }
.col-slot-view .gg-view { font-size: 9.5px; }
.pk-view .gg-view { font-size: calc(var(--vw) * .072); }
.gg-view.gv-face .card { --cw: 4.3em; border-width: .19em; box-shadow: .19em .19em 0 var(--ink); margin: 0; }
.gg-view.gv-face .card:first-child { transform: rotate(-7deg); }
.gg-view.gv-face .card + .card { transform: rotate(7deg); margin-left: -.7em; }
.gg-view.gv-charge { gap: 0; border: .19em solid var(--ink); border-radius: .45em; overflow: hidden; }
.gv-sq { position: relative; width: 4.6em; height: 4.6em; }
.gv-sq.l { background: var(--sq-light); }
.gv-sq.d { background: var(--sq-dark); }
.gg-view .pc.gv-pc { left: 0; top: 0; width: 100%; height: 100%; transform: none; transition: none; }
.gg-view .gv-pc .pts { font-size: .72em; }
.gg-view.gv-call .boom { position: relative; left: auto; top: auto; margin: 0; animation: none; width: 11em; height: 7em; opacity: 1; }
.gg-view.gv-call .boom span { font-size: 2em; }
.gg-view.gv-call .boom.play { animation: ggCall 1.9s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.gg-view.gv-trail { display: block; position: relative; width: 11.4em; border: .19em solid var(--ink); border-radius: .45em; overflow: hidden; line-height: 0; }
.gv-trail svg { display: block; width: 100%; height: auto; }
.gg-view.gv-button .profile-chip { font-size: 1em; border-width: .19em; padding: .19em .9em .19em .19em; gap: .5em; border-radius: 2em; max-width: none; pointer-events: none; }
.gv-button .pc-avatar { width: 2.1em; height: 2.1em; border-width: .13em; }
.gv-button .pc-avatar svg { width: 1.75em; height: 1.75em; }
.gv-button .pc-name { font-size: 1em; }
.gv-button .pc-sub { font-size: .75em; }
.gg-view.gv-glow .pbar { width: 13em; min-height: 3.6em; padding: .375em .6em; border-width: .19em; margin-top: .6em; }
.gv-glow .pb-content { gap: .6em; }
.gv-glow .pb-avatar { width: 2.6em; height: 2.6em; border-width: .19em; }
.gv-glow .pb-avatar svg { width: 2.2em; height: 2.2em; }
.gv-glow .pb-name { font-size: 1.06em; }
.gv-glow .pb-sub { font-size: .8em; }
.gg-view.gv-glow .pbar.active::after { font-size: .94em; top: -.8em; right: .75em; padding: .12em .5em 0; border-width: .13em; }
/* Szene der Sammlung und Bibliothek (cosmetics.js giftBoardHTML, giftSideHTML) */
.gg-board {
  position: relative; width: 100%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr);
  border: 4px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.gg-board .boom { left: 50%; top: 50%; z-index: 8; }
.gg-chip { max-width: none; cursor: default; }
.gg-cards { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; --cw: 80px; }
.gg-btns { display: flex; flex-wrap: wrap; gap: 8px; max-width: 330px; }
.gg-cards .card.gg-drawn { animation: ggDraw .4s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes ggDraw { from { transform: translateY(-30%) rotate(-12deg) scale(.7); opacity: 0; } }
@media (max-width: 560px) {
  .col-slot .col-slot-view .gg-view { font-size: 7.5px; }
  .col-view .gg-view { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fc-gottesgaben .c-oval, .pc svg.gg-glory.full, .pc .pts.gg-pts.full, .check-tag.cl-gottesgaben span, .profile-chip.pf-gottesgaben,
  .profile-chip.pf-gottesgaben::after, .pbar.tg-gottesgaben.active, .pbar.tg-gottesgaben.active::before { animation: none; }
  .fc-gottesgaben .fc-shine, .gg-pts::after, .profile-chip.pf-gottesgaben::after, .profile-chip.pf-gottesgaben::before, .check-tag.cl-gottesgaben span::after { display: none; }
}

/* ---------- Geburtstag (Platz 53, 22.10.2026) ---------- */
/* Brett: creme und rosa, in den leeren Reihen drei Luftballons und etwas Konfetti als Großbild (siehe oben) */
.sq.l.sk-geburtstag, .sq.d.sk-geburtstag { background: var(--geburtstag-party) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-geburtstag { --ct: var(--geburtstag-sq-l); }
.sq.d.sk-geburtstag { --ct: var(--geburtstag-sq-d); }
/* Kartenrücken: hellblau mit Wimpelkette und Torte, Oval creme, Logo rot */
.card.c-back.bk-geburtstag { background: var(--geburtstag-back) center / 100% 100%; }
.bk-geburtstag .c-oval { background: #FFF5DC; }
.bk-geburtstag .c-logo { color: #E2504A; }
.boom .cap-geburtstag { color: #fff; }
/* Profilrahmen: rosa Ring mit drei Luftballons */
.fr-geburtstag { padding: 8px; border: 3px solid var(--ink); background: var(--geburtstag-ring) center / 100% 100%; }
/* Titel: rosa Schild, weiße Schrift mit Kontur */
.ti-geburtstag { background: #F37AA4; color: #fff; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Baustelle (Platz 54, 22.10.2026) ---------- */
/* Brett: Beton und Kies, durch die leeren Reihen zwei Absperrbänder als Großbild (siehe oben) */
.sq.l.sk-baustelle, .sq.d.sk-baustelle { background: var(--baustelle-tape) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-baustelle { --ct: var(--baustelle-sq-l); }
.sq.d.sk-baustelle { --ct: var(--baustelle-sq-d); }
/* Kartenrücken: Himmel mit Baukran, Oval baggergelb, Logo rot */
.card.c-back.bk-baustelle { background: var(--baustelle-back) center / 100% 100%; }
.bk-baustelle .c-oval { background: #F5C431; }
.bk-baustelle .c-logo { color: #D8342C; }
.boom .cap-baustelle { color: #fff; }
/* Profilrahmen: gelb-schwarzer Warnring */
.fr-baustelle { padding: 8px; border: 3px solid var(--ink); background: var(--baustelle-ring) center / 100% 100%; }
/* Titel: baggergelbes Schild, dunkle Schrift */
.ti-baustelle { background: #F5C431; color: var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Klassenzimmer (Platz 55, id klasse, 22.10.2026) ---------- */
/* Brett: zwei Tafelgrün, in den leeren Reihen „1+1=2“ in Kreide und eine Wischspur als Großbild (siehe oben) */
.sq.l.sk-klasse, .sq.d.sk-klasse { background: var(--klasse-chalk) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-klasse { --ct: var(--klasse-sq-l); }
.sq.d.sk-klasse { --ct: var(--klasse-sq-d); }
/* Kartenrücken: blauer Schulranzen, Oval gelb, Logo rot */
.card.c-back.bk-klasse { background: var(--klasse-back) center / 100% 100%; }
.bk-klasse .c-oval { background: #F7D65A; }
.bk-klasse .c-logo { color: #D8342C; }
.boom .cap-klasse { color: #fff; }
/* Profilrahmen: Winkelmesser */
.fr-klasse { padding: 8px; border: 3px solid var(--ink); background: var(--klasse-ring) center / 100% 100%; }
/* Titel: tafelgrünes Schild, Kreideschrift */
.ti-klasse { background: #3F6B55; color: #F4F2EA; text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Büro (Platz 56, 22.10.2026) ---------- */
/* Brett: nur Teppichfliesen (Büroklammer und Kugelschreiber vom Nutzer gestrichen) */
.sq.l.sk-buero { background: var(--buero-sq-l) center / 100% 100%; }
.sq.d.sk-buero { background: var(--buero-sq-d) center / 100% 100%; }
/* Kartenrücken: Pinnwand aus Kork mit zwei Haftnotizen, Oval weiß, Logo rot */
.card.c-back.bk-buero { background: var(--buero-back) center / 100% 100%; }
.bk-buero .c-oval { background: #FFFFFF; }
.bk-buero .c-logo { color: #D8342C; }
.boom .cap-buero { color: #fff; }
/* Profilrahmen: Papierring mit Kaffeerand */
.fr-buero { padding: 8px; border: 3px solid var(--ink); background: var(--buero-ring) center / 100% 100%; }
/* Titel: gelbe Haftnotiz, blaue Schrift */
.ti-buero { background: #FFE37A; color: #2F4E8C; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Olymp (Platz 57, 22.10.2026) ---------- */
/* Brett: Marmor- und Terrakottaplatten, jede mit eingravierter Mäander-Bordüre (vorher ein großer Fries darüber, vom Nutzer verworfen) */
.sq.l.sk-olymp { background: var(--olymp-sq-l) center / 100% 100%; }
.sq.d.sk-olymp { background: var(--olymp-sq-d) center / 100% 100%; }
/* Kartenrücken: Tempelfront, Oval gold, Logo weiß */
.card.c-back.bk-olymp { background: var(--olymp-back) center / 100% 100%; }
.bk-olymp .c-oval { background: #E9C46A; }
.bk-olymp .c-logo { color: #FFFFFF; }
.boom .cap-olymp { color: #fff; }
/* Profilrahmen: Marmorring mit goldenem Lorbeerkranz */
.fr-olymp { padding: 8px; border: 3px solid var(--ink); background: var(--olymp-ring) center / 100% 100%; }
/* Titel: ägäisblaues Schild, goldene Schrift mit Kontur (vorher Terrakotta mit schwarzer Schrift, Nutzer wollte andere Farben) */
.ti-olymp { background: #2F5DA8; color: #F2CF6A; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Drachen (Platz 58, 24.10.2026) ---------- */
/* Brett: Goldocker und roter Lack, chinesisch angehaucht; auf wenigen Feldern eine eingravierte Glückswolke (Münzen und Ei vom Nutzer gestrichen) */
.sq.l.sk-drachen { background: var(--drachen-sq-l) center / 100% 100%; }
.sq.l.sk-drachen:nth-child(5n + 1) { background-image: var(--drachen-sq-lp); }
.sq.d.sk-drachen { background: var(--drachen-sq-d) center / 100% 100%; }
.sq.d.sk-drachen:nth-child(5n + 3) { background-image: var(--drachen-sq-dp); }
/* Kartenrücken: dunkelrote Schuppen, Oval gold, Logo dunkelgrau (dunkelrot war schlecht lesbar, Nutzer) */
.card.c-back.bk-drachen { background: var(--drachen-back) center / 100% 100%; }
.bk-drachen .c-oval { background: #F2C14E; }
.bk-drachen .c-logo { color: #D9D7DF; }
.boom .cap-drachen { color: #fff; }
/* Profilrahmen: goldener Drache rund um einen roten Lackring (vorher Eierschale) */
.fr-drachen { padding: 8px; border: 3px solid var(--ink); background: var(--drachen-ring) center / 100% 100%; }
/* Titel: dunkelrotes Schild, goldene Schrift mit Kontur */
.ti-drachen { background: #8E2B2E; color: #F2C14E; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Sonne & Mond (Platz 59, id sonnemond, 24.10.2026) ---------- */
/* Brett: linke vier Spalten Tag, rechte vier Nacht; Sonne, Mond und zwei Sterne als Großbild (siehe oben) */
.sq.l.sk-sonnemond, .sq.d.sk-sonnemond { background: var(--sonnemond-sky) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-sonnemond { --ct: var(--sonnemond-sq-l); }
.sq.d.sk-sonnemond { --ct: var(--sonnemond-sq-d); }
.sq.l.sk-sonnemond:is(:nth-child(8n + 5), :nth-child(8n + 6), :nth-child(8n + 7), :nth-child(8n)) { --ct: var(--sonnemond-sq-nl); }
.sq.d.sk-sonnemond:is(:nth-child(8n + 5), :nth-child(8n + 6), :nth-child(8n + 7), :nth-child(8n)) { --ct: var(--sonnemond-sq-nd); }
/* Kartenrücken: schräg geteilt in Tag und Nacht, Oval gold, Logo nachtblau */
.card.c-back.bk-sonnemond { background: var(--sonnemond-back) center / 100% 100%; }
.bk-sonnemond .c-oval { background: #FFD84A; }
.bk-sonnemond .c-logo { color: #2B3466; }
.boom .cap-sonnemond { color: #fff; }
/* Profilrahmen: halb Tag, halb Nacht */
.fr-sonnemond { padding: 8px; border: 3px solid var(--ink); background: var(--sonnemond-ring) center / 100% 100%; }
/* Titel: nachtblaues Schild, gelbe Schrift */
.ti-sonnemond { background: #2B3466; color: #FFD84A; text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Glas (Platz 60, 24.10.2026) ---------- */
/* Brett: Glasbausteine */
.sq.l.sk-glas { background: var(--glas-sq-l) center / 100% 100%; }
.sq.d.sk-glas { background: var(--glas-sq-d) center / 100% 100%; }
/* Kartenrücken: Bleiglasfenster, Oval weiß, Logo blau */
.card.c-back.bk-glas { background: var(--glas-back) center / 100% 100%; }
.bk-glas .c-oval { background: #FFFFFF; }
.bk-glas .c-logo { color: #2F5DA8; }
.boom .cap-glas { color: #fff; }
/* Profilrahmen: geschliffenes Glas */
.fr-glas { padding: 8px; border: 3px solid var(--ink); background: var(--glas-ring) center / 100% 100%; }
/* Titel: hellblaues Glasschild, dunkle petrolfarbene Schrift */
.ti-glas { background: #DDF1F6; color: #1F5568; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Porzellan (Platz 61, 24.10.2026) ---------- */
/* Brett: weiße und kobaltblaue Kacheln, auf genau zwei weißen Feldern in den leeren Reihen je eine Blüte (Nutzer, 24.10.2026: insgesamt
   nur zwei Zeichen); die Nummern zählen für beide Brett-Hälften, die Farbe der Felder ist dort gleich */
.sq.l.sk-porzellan { background: var(--porzellan-sq-l) center / 100% 100%; }
.sq.l.sk-porzellan:is(:nth-child(3), :nth-child(35), :nth-child(14), :nth-child(46)) { background-image: var(--porzellan-sq-p); }
.sq.d.sk-porzellan { background: var(--porzellan-sq-d) center / 100% 100%; }
/* Kartenrücken: Zwiebelmuster, Oval blau, Logo weiß */
.card.c-back.bk-porzellan { background: var(--porzellan-back) center / 100% 100%; }
.bk-porzellan .c-oval { background: #2B55A8; }
.bk-porzellan .c-logo { color: #FFFFFF; }
.boom .cap-porzellan { color: #fff; }
/* Profilrahmen: Tellerrand */
.fr-porzellan { padding: 8px; border: 3px solid var(--ink); background: var(--porzellan-ring) center / 100% 100%; }
/* Titel: weißes Schild, kobaltblaue Schrift */
.ti-porzellan { background: #F7F8FC; color: #2B55A8; box-shadow: 2px 2px 0 var(--ink); }

/* ---------- Plüsch (Platz 62, id pluesch, 24.10.2026) ---------- */
/* Brett: Kuscheldecke aus Flicken, in den leeren Reihen zwei große Knöpfe als Großbild (siehe oben) */
.sq.l.sk-pluesch, .sq.d.sk-pluesch { background: var(--pluesch-buttons) var(--bx) var(--by) / 800% 400% no-repeat, var(--ct) center / 100% 100%; }
.sq.l.sk-pluesch { --ct: var(--pluesch-sq-l); }
.sq.d.sk-pluesch { --ct: var(--pluesch-sq-d); }
/* Kartenrücken: hellblauer Plüsch mit Flicken und Knopf, Oval creme, Logo rosa */
.card.c-back.bk-pluesch { background: var(--pluesch-back) center / 100% 100%; }
.bk-pluesch .c-oval { background: #F7EBDD; }
.bk-pluesch .c-logo { color: #C8506A; }
.boom .cap-pluesch { color: #fff; }
/* Profilrahmen: rosa Plüschring mit weißer Steppnaht */
.fr-pluesch { padding: 8px; border: 3px solid var(--ink); background: var(--pluesch-ring) center / 100% 100%; }
/* Titel: karamellfarbenes Schild, helle Schrift mit Kontur */
.ti-pluesch { background: #C79A6B; color: #FFF6EA; -webkit-text-stroke: .6px var(--ink); text-shadow: 1px 1px 0 var(--ink); box-shadow: 2px 2px 0 var(--ink); }

/* Gewonnenes Pack: oben rechts ein rotes X, damit man es nicht gleich öffnen muss; es wandert dann (klein werdend nach oben rechts) in die Sammlung */
.pk-close {
  position: absolute; right: 12px; top: 12px; z-index: 25; width: 40px; height: 40px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; background: var(--pow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
.pk-close svg { width: 18px; height: 18px; display: block; }
.pk-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.pk-pack.stash, .pk-over.stash { animation: pkStash .55s cubic-bezier(.5, 0, .8, .4) forwards; }
@keyframes pkStash { to { transform: translate(160%, -120%) scale(.2) rotate(12deg); opacity: 0; } }
.pk-stashed { position: absolute; left: 0; right: 0; top: 46%; text-align: center; z-index: 21; font-family: var(--display); font-size: 26px; letter-spacing: .05em; color: #fff; text-shadow: 2px 2px 0 var(--ink); animation: pkPop .45s cubic-bezier(.2, 1.6, .4, 1); }
@media (prefers-reduced-motion: reduce) { .pk-pack.stash { animation-duration: .01s; } .pk-stashed { animation: none; } }

/* ---------- Duplikat → Kartenfragmente (Nutzer, 18.10.2026) ----------
   Schon besessene Teile: nach dem Aufdecken wird die Karte grau (Band, Bild, Name, ohne Glanz), darüber gerade „Duplikat“ und die
   Fragmente (Cos.fragmentSVG + „+X Kartenfragment(e)“). In der Übersicht grau, die Fragmente stehen unter der Karte. */
.frag-ico { width: 1.5em; height: 1.5em; flex: none; display: block; }
.pk-dupe {
  position: absolute; inset: 20% 5% 24%; z-index: 3; display: grid; place-items: center; align-content: center; gap: calc(var(--cw) * .07);
  opacity: 0; transform: scale(.5); transition: opacity .25s, transform .4s cubic-bezier(.2, 1.6, .4, 1); pointer-events: none;
}
.dupe .pk-dupe { opacity: 1; transform: none; }
.pk-dupe > b {
  font-family: var(--display); font-weight: 400; font-size: calc(var(--cw) * .13); letter-spacing: .05em; line-height: 1; color: #fff;
  background: #6E6A85; border: 2px solid var(--ink); border-radius: 5px; padding: 3px 6px 1px; box-shadow: 2px 2px 0 var(--ink);   /* gerade, nicht angewinkelt (Nutzer) */
}
.pk-frag {
  display: inline-flex; align-items: center; gap: 3px; font-size: calc(var(--cw) * .068); line-height: 1.1; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 6px 2px 3px; box-shadow: 2px 2px 0 var(--ink);
}
.pk-frag .frag-ico { width: calc(var(--cw) * .16); height: calc(var(--cw) * .16); }
.pk-frag-t { display: grid; text-align: left; font-weight: 700; }
.pk-frag-t b { font-family: var(--display); font-weight: 400; font-size: 1.5em; line-height: 1; color: #5B3FC0; }
.pk-card.dupe, .pk-ocard.dupe { --rc: #A3A0B3; }
.dupe .pk-band, .dupe .pk-view > *, .dupe .pk-name { filter: grayscale(1); transition: filter .5s; }
.dupe .pk-view { background: #E4E1EC; }
.dupe .pk-view > * { opacity: .4; transition: filter .5s, opacity .5s; }   /* Vorschau blass, damit „Duplikat“ und die Fragmente lesbar sind */
.dupe .pk-face::before, .dupe .pk-face::after { opacity: 0 !important; animation: none !important; }
.pk-card.dupe .pk-inner { animation: none; }
.pk-ocard.dupe::before { opacity: 0; }
.pk-ocol { display: grid; justify-items: center; align-content: start; gap: 8px; }
.pk-ocard .pk-frag { display: none; }
.pk-ofrag {
  display: inline-flex; align-items: center; gap: 4px; max-width: calc(var(--cw) * 1.15); font-family: var(--display); font-size: calc(var(--cw) * .12);
  letter-spacing: .03em; line-height: 1.1; color: #fff; text-shadow: 1px 1px 0 var(--ink); animation: pkPop .45s .35s cubic-bezier(.3, 1.5, .5, 1) both;
}
@media (prefers-reduced-motion: reduce) { .pk-dupe { transition: none; } .pk-ofrag { animation: none; } }

/* ==================== Rahmen und Titel außerhalb der Partie (Profil, Rangliste, Freundesliste) ==================== */
.prof-look { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.pod .cos-frame { margin: 0 auto; }
.pod-title { margin: 2px 0 4px; }
.lb .who { flex-wrap: wrap; row-gap: 3px; }   /* Handy: Titel rutscht in die nächste Zeile statt in die Elo-Spalte */
.lb .who .cos-title { font-size: 10px; padding: 2px 5px 1px; }
.fr-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.fr-top .cos-title { font-size: 11px; padding: 2px 6px 1px; }
/* Schuno-Meister (Nutzer, 19.10.2026): die Strahlen bleiben im Profilbild, der Rahmen schneidet sie ab (seine Ringe liegen darüber) */

/* Zielfelder auf Skin-Brettern (Nutzer, 19.10.2026): Punkt und Ring hell mit dunklem Rand statt dunkel, damit sie auf
   hellen wie dunklen Mustern immer Kontrast haben (z. B. Springer-Ziele auf dem Neon-Brett) */
.sq[class*="sk-"].tgt::before { background: rgba(242, 242, 250, .88); box-shadow: 0 0 0 2px rgba(27, 21, 48, .7); }
.sq[class*="sk-"].tgt:hover::before { background: #fff; }
.sq[class*="sk-"].tgt.cap::before { background: transparent; border-color: rgba(242, 242, 250, .92); box-shadow: 0 0 0 2px rgba(27, 21, 48, .65), inset 0 0 0 2px rgba(27, 21, 48, .65); }
.sq[class*="sk-"].ghost::before { border-color: rgba(242, 242, 250, .85); box-shadow: 0 0 0 1.5px rgba(27, 21, 48, .5); }