/* Adventure Mode (docs/ADVENTURE.md; Prototyp r-0075 Fassung 4, Entscheidungen 2026-10-13-adventure-spin-feel und -colour-rail):
   Biom- und Deckwahl, Stage-Brett (Bühne 412 × 892, skaliert auf den Bildschirm), Farbleiste aus den Blockformen der Karten, Ergebnis. */
.advbiomes { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.advbiome { flex: none; width: 128px; height: 176px; border-radius: 14px; overflow: hidden; position: relative; border: 0; background: #0E1140 center/cover; color: #fff; text-align: left; padding: 0; cursor: pointer; scroll-snap-align: start; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.5); } /* v316: ohne Rahmen */
.advbiome.on { box-shadow: inset 0 -6px 0 var(--state-active), 0 0 26px rgba(0,227,105,.5), 0 10px 24px rgba(0,0,0,.5); } /* v316: grüner Boden statt Rahmen */
.advbiome.locked img { filter: grayscale(.8) brightness(.55); }
.advbiome img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.advbiome .bname { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 10px 8px; background: linear-gradient(180deg, transparent, rgba(14,17,64,.95)); font-family: var(--font-display); font-style: italic; font-weight: 800; text-transform: uppercase; font-size: 18px; line-height: 1.05; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.advbiome .bname small { display: block; font: 700 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--surface-muted); margin-top: 3px; }
.advbiome .glyph.lockmark { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; color: #fff; }
.advbiome .clears { position: absolute; top: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(14,17,64,.85); font: 700 10px var(--font-body); }
.advinfo { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: 13px; color: var(--surface-muted); }
.advinfo b { color: var(--surface-ink); }
.advscreen .startbtn { width: auto; min-width: 150px; }

/* Flusskarten im Spielfeld (adventure-ui.js, User 2026-10-14: normales Brett): Feld über der Fluss-Zone des Pixi-Bretts, je eigenem Platz eine Karte mit Farbleiste darunter */
.advriver { position: absolute; z-index: 3; pointer-events: none; }
.advriver[hidden] { display: none; }
.advcol { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 16px; } /* v286 Option A: 16 px statt 6 – der Chip (9 px unter der Karte) endet 7 px über der Leiste (adventure-ui.js RAIL_GAP) */
.advcol .rc { position: relative; width: 100%; border-radius: 6px; }
.advcol .rc .face { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.5); pointer-events: auto; touch-action: none; cursor: grab; transform-origin: 50% 50%; background: #0B0D2A; will-change: transform; }
.advcol .rc.empty .face { display: none; }
/* v284 (User 2026-10-16: „Die Umrandungen der Karten sind noch verwirrend. Es gibt grün und weiss und manche Karten werden dunkel. Bitte eine einheitliche Umrandung mit glow nach innen
   für aktiv, den Rest entfernen“): eine Umrandung für aktive Karten. Aktiv = die Karte lässt sich in dieser Frage noch drehen (offen, nicht gedreht, nicht gesperrt, Spins übrig).
   Weißer Rand mit Schein nach innen als Ebene über den Kartenschichten (ein inset-Schatten läge unter den Bildern). Griff, Gegnergriff, Patt und Fang zeigen nur noch ihre Chips. */
.advcol.live .rc .face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 6; box-shadow: inset 0 0 0 2px rgba(255,255,255,.95), inset 0 0 18px 4px rgba(47,180,255,.8); }
.advcol.live .rc.empty .face::after { display: none; }
.advcol .rc .face img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.advcol .rc.monster .face { box-shadow: 0 6px 14px rgba(0,0,0,.5); } /* v255: kein roter Rand mehr um die Monsterkarte (User 2026-10-14) */
.advcol .rc .face .hp, .advriver .face.ghost .hp { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: rgba(14,17,64,.85); color: #fff; font: italic 800 11px var(--font-display); white-space: nowrap; }
.advcol .rc .face .tag { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 6px; font: 800 9px var(--font-body); letter-spacing: .06em; color: #fff; background: var(--tier-stage2); }
.advcol .rc .face .tag.ver { background: linear-gradient(135deg, #6A5CFF, #00ADE2); } .advcol .rc .face .tag.ver.y { background: linear-gradient(135deg, #FF914D, #FF3131); } /* Eclipse (v264) */
.advcol .rc.spinning .face { cursor: grabbing; }
.advcol .rc .num { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font: italic 800 20px var(--font-display); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); animation: advnum .9s ease-out both; pointer-events: none; z-index: 2; }
.advcol .rc .num.dmg { color: #FF5A5A; } .advcol .rc .num.ok { color: var(--state-active, #01E369); }
@keyframes advnum { from { opacity: 0; transform: translate(-50%, 0) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -140%) scale(1.1); } }
/* Farbleiste (r-0076 A): links die zwei Eckblöcke der Karte (die unten liegenden Ecken), rechts die Blöcke des Monsters; grau = verbraucht, ok = Griff möglich */
.advcol .rail { display: flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 5px; border-radius: 8px; background: rgba(8,10,40,.72); border: 1px solid var(--surface-line); pointer-events: none; }
.advcol .rail.ok { border-color: var(--state-active, #01E369); box-shadow: 0 0 0 1px var(--state-active, #01E369), 0 0 12px rgba(1,227,105,.6); } /* v285: kräftiger */
.advcol .rail.no { border-color: var(--state-targeted); opacity: .75; }
.advcol .rc.held .face { transform-origin: 50% 50%; } /* v284: kein grüner Ring mehr (eine Umrandung: .advcol.live) */
.advcol .rc .lbl, .advriver .face.ghost .lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 9px; border-radius: 999px; background: rgba(14,17,64,.92); border: 1px solid var(--surface-line); color: #fff; font: 800 10px var(--font-body); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; z-index: 3; pointer-events: none; animation: advlbl 1.2s ease-out both; }
.advcol .rc .lbl.no, .advriver .face.ghost .lbl.no { border-color: var(--state-targeted); }
/* v255: Etikett auf dem Kartenbild (Ausgang der Jagd) bleibt stehen, bis die Karte abfliegt, und fliegt mit; Fang golden */
.advcol .rc .face .lbl, .advriver .face.ghost .lbl { animation: advlblIn .22s cubic-bezier(.22,1,.36,1) both; font-size: 10px; line-height: 1.15; padding: 4px 8px; white-space: normal; width: max-content; max-width: 88%; text-align: center; border-radius: 10px; }
.advcol .rc .lbl.gold, .advriver .face.ghost .lbl.gold { border-color: #FFD23F; color: #FFD23F; box-shadow: 0 0 14px rgba(255,210,63,.6); }
@keyframes advlblIn { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes advlbl { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 75% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -80%); } }
.advcol .edge { display: flex; gap: 4px; } .advcol .edge.spin { opacity: .6; }
.advcol .lb { position: relative; width: 18px; height: 18px; } .advcol .lb i { position: absolute; width: 8px; height: 8px; background: var(--c, rgba(255,255,255,.25)); } .advcol .lb.q i { background: rgba(255,255,255,.18); } .advcol .lb.miss i { opacity: .35; }
/* v285 (User 2026-10-16: „die matching colors deutlicher machen“): getroffene Eckblöcke und Monsterblöcke leuchten in ihrer eigenen Farbe mit weißem Rand (Auge verbindet gleiche Farbe oben und unten);
   eine Eckfarbe, die dem Monster fehlt, trägt ein rotes Kreuz statt nur zu verblassen; Band und Leiste bekommen beim Treffer einen kräftigen grünen Rand */
/* v290 (User 2026-10-16: „die Color-Block-Highlights sind eine Outline, die schwierig für das Layout ist. Bitte ändern in den Grow and Shrink – muss nicht ins Feld passen und fällt besser auf“):
   getroffene Blöcke pulsieren groß-klein (blkpulse), keine weiße Umrandung mehr; sie dürfen über ihr Feld hinausragen */
.advcol .lb.ok { animation: blkpulse .9s ease-in-out infinite; z-index: 2; }
.advcol .lb.miss i { opacity: .55; } .advcol .lb.miss::after { content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; background: linear-gradient(45deg, transparent 44%, #FF4D4D 44%, #FF4D4D 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, #FF4D4D 44%, #FF4D4D 56%, transparent 56%); filter: drop-shadow(0 0 1.5px rgba(0,0,0,.9)); } /* dünnes Kreuz, die Farbe bleibt erkennbar */
.advcol .need { display: flex; gap: 2px; } .advcol .mb { width: 20px; height: 10px; background: var(--im) center / contain no-repeat; } .advcol .mb.grey { filter: grayscale(1) brightness(.6); } .advcol .mb.ok { animation: blkpulse .9s ease-in-out infinite; position: relative; z-index: 2; }
/* Spielerleisten im Adventure: oben Biom und Spawn-Rate, unten Spins, Coins, Zug */
.advbio { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .advbio img { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; }
.topbar .cchip .sub, .ownbar .cchip .sub { font-size: 10px; color: var(--surface-muted); margin-left: 2px; }
/* Ergebnis */
/* v276: Ergebnis scrollt; Teile erscheinen nacheinander (rvwait → rvin), Coins und XP zählen hoch */
.advres .advresbody { display: flex; flex-direction: column; gap: var(--space-lg); } .advres .advresbody > * { flex-shrink: 0; } /* v291: „Wiederholen“ wurde bei langer Ergebnisseite zu einem Strich zusammengedrückt */
.advres .rvwait { opacity: 0; transform: translateY(10px) scale(.98); }
.advres .rvin { opacity: 1; transform: none; transition: opacity 320ms cubic-bezier(.76,0,.24,1), transform 320ms cubic-bezier(.76,0,.24,1); }
.advres .cap.rvwait { transform: translateY(14px) scale(.7) rotate(-6deg); } .advres .cap.rvin { transition-duration: 420ms; }
.advres .advcoins { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; } /* v316: Platte .plate.gold */
.advres .advcoins .xphead { display: flex; justify-content: space-between; align-items: center; } .advres .advcoins .coinhead { display: flex; align-items: center; gap: 8px; }
.advres .advcoins .coinhead b { font-size: 22px; color: #FFD23F; } .advres .advcoins .coinic { width: 22px; height: 22px; }
.advres .advcoins .coinrows { display: flex; flex-direction: column; gap: 3px; } .advres .advcoins .coinrow { display: flex; justify-content: space-between; gap: 12px; font: 500 13px var(--font-body); color: var(--surface-muted); } .advres .advcoins .coinrow b { color: #FFD23F; font-weight: 700; }
.advres .advxp .xpsrc { display: flex; flex-wrap: wrap; gap: 6px; } .advres .advxp .xpsrc span { padding: 2px 9px; border-radius: 999px; font: 600 11px var(--font-body); background: rgba(47,180,255,.14); border: 1px solid rgba(47,180,255,.3); color: var(--surface-ink); }
@media (prefers-reduced-motion: reduce) { .advres .rvin { transition: none; } }
.advres .advbanner .bdgups { text-align: left; } .advres .advbonus { line-height: 1.4; }
.advres .advbanner { padding: 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; } /* v316: Platte .plate */
.advres .advbanner .display.bigcard { font-size: 34px; color: var(--acc); }
.advres .advstats { display: flex; justify-content: center; gap: 22px; }
.advres .advstats > div { display: flex; flex-direction: column; align-items: center; }
.advres .advstats .mono { font: italic 800 22px var(--font-display); }
.advres .caps { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.advres .cap { width: 88px; position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .advres .cap img { pointer-events: none; -webkit-user-drag: none; } /* v392: Halten zoomt – der Browser darf die Geste nicht als Scrollen abbrechen */
.advres .cap img { width: 88px; height: 123px; object-fit: cover; border-radius: 6px; display: block; box-shadow: 0 4px 10px rgba(0,0,0,.5); }
.advres .cap .tag { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 2px 7px; border-radius: 999px; background: #0E1140; border: 1px solid #FFD23F; font: 700 9px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: #FFD23F; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .advstage * { animation: none !important; transition: none !important; } }
/* Zähler neben den Flusskarten (v246, User 2026-10-14): links Spins, rechts Zug (Coins und Stapel seit v254 in der Lücke darüber) – im Blickfeld statt in der Leiste; eine geänderte Zahl hüpft kurz */
.advriver .advside { position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px; pointer-events: none; z-index: 1; }
.advriver .sym { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 34px; padding: 4px 3px 3px; border-radius: 10px; background: rgba(8,10,40,.78); border: 1px solid var(--surface-line); color: #fff; }
.advriver .sym .glyph { width: 17px; height: 17px; color: var(--brand-skyLight); }
.advriver .sym .num { font: italic 800 17px/1 var(--font-display); color: #fff; }
.advriver .sym .sub { font-size: 8px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--surface-muted); line-height: 1; }
.advriver .sym.spins .glyph { color: var(--brand-sky); } .advriver .sym.swaps .glyph { color: var(--fx-gold, #FFD23F); } /* v265: Swap-Zähler unter den Spins */
.advriver .rc.swapping { z-index: 6; filter: drop-shadow(0 8px 14px rgba(0,0,0,.45)); } /* Karte wird seitlich zum Nachbarn gezogen (Positionswechsel) */
.advriver .sym.pop .num { animation: symPop .36s cubic-bezier(.22,1,.36,1) both; }
/* v338: Warnung „Keine Spins/Swaps“ über den Flusskarten (Pille der Event-Einblendung: dunkle Außenkontur, helle Innenkontur, Rot der Warnung), blendet nach 1,4 s aus */
.advriver .advwarn { position: absolute; left: 50%; top: 50%; z-index: 20; display: flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 999px; background: #E0263A; border: 2px solid rgba(255,255,255,.9); box-shadow: 0 0 0 3px #12154F, 0 8px 20px rgba(0,0,0,.45); color: #fff; font: italic 700 16px/1.1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; pointer-events: none; animation: advwarn 1.4s cubic-bezier(.22,1,.36,1) both; }
.advriver .advwarn .glyph { width: 17px; height: 17px; color: #fff; }
@keyframes advwarn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); } }
.advriver .sym.empty { animation: symEmpty .5s ease-out both; }
@keyframes symEmpty { 0%, 100% { transform: none; border-color: var(--surface-line); } 20% { transform: translateX(-4px); border-color: #E0263A; box-shadow: 0 0 10px rgba(224,38,58,.7); } 40% { transform: translateX(4px); border-color: #E0263A; } 60% { transform: translateX(-3px); border-color: #E0263A; } 80% { transform: translateX(2px); } }
@keyframes symPop { 0% { transform: scale(1.6); color: var(--brand-sky); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .advriver .sym.pop .num { animation: none; } }
/* Farbdarstellung der Monster (r-0080): Ebene über dem ganzen Brett; je Stil ein Element am eigenen Monster bzw. unter dem Flussfeld */
.advcolours { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .advcolours[hidden] { display: none; }
.advcolours .cb { position: absolute; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 0 5px; border-radius: 8px; background: rgba(8,10,40,.8); border: 1px solid var(--surface-line); box-sizing: border-box; }
.advcolours .cb.ok { border-color: var(--state-active, #01E369); box-shadow: 0 0 0 1px var(--state-active, #01E369), 0 0 14px rgba(1,227,105,.65); } .advcolours .cb.no { border-color: var(--state-targeted); } /* v285: Treffer am Band kräftiger */
.advcolours .cb .mb { width: 18px; height: 9px; background: var(--im) center / contain no-repeat; position: relative; } .advcolours .cb .mb.ok { animation: blkpulse .9s ease-in-out infinite; z-index: 2; } /* v285: Leuchten in der eigenen Farbe */
.advcolours .cb .mb.pop { animation: mbpop .7s cubic-bezier(.22,1,.36,1) both; } /* v284: zurückgeholter Block nach dem Monster-Dreh */
@keyframes mbpop { 0% { transform: scale(2.1); filter: drop-shadow(0 0 8px #fff) brightness(1.8); } 100% { transform: scale(1); filter: none; } }
.advcolours .cb .mb.grey { filter: grayscale(1) brightness(.55); } .advcolours .cb .mb.grey::after { content: ""; position: absolute; left: -1px; right: -1px; top: 50%; height: 1.5px; background: rgba(255,255,255,.7); transform: rotate(-28deg); }
.advcolours .cb.band { gap: 4px; padding: 0 7px; border-radius: 10px; white-space: nowrap; } .advcolours .cb.band .mb { width: 20px; height: 10px; flex: none; }
.advcolours .cb.foot { gap: 2px; padding: 0 4px; border-radius: 6px; } .advcolours .cb.foot .mb { width: 14px; height: 7px; }
.advcolours .cb.spine { flex-direction: column; gap: 3px; padding: 4px 3px; border-radius: 7px; } .advcolours .cb.spine .mb { width: 15px; height: 8px; }
/* Stil ohne Leiste im Feld (foot, spine): nur die Kante der Flusskarte bleibt klein unter der Karte; beim Band entfällt die Leiste im Feld ganz */
.advriver.edgeonly .rail .need { display: none; } .advriver.edgeonly .rail { height: 24px; padding: 0 5px; }
/* Flüssige Choreografie (User 2026-10-14): Geist-Kopie für den Abgang, Wisch-Fläche für das Zugende, Leiste blendet beim Landen ein */
.advriver .face.ghost { position: absolute; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 14px rgba(0,0,0,.5); pointer-events: none; z-index: 5; background: #0B0D2A; transform-origin: 50% 50%; }
.advriver .face.ghost img { width: 100%; height: 100%; display: block; object-fit: cover; }
.advriver .advswipe { position: absolute; inset: 0; pointer-events: auto; touch-action: pan-x; z-index: 0; }
.advriver .advcol { z-index: 1; }
.advcol .rail, .advcolours .cb { transition: opacity .12s ease-out, box-shadow .15s ease-out; }
.actionbar .ibtn.advend { opacity: .85; }
/* Am Touch-Gerät gibt es keinen Verteilen-Knopf in der Leiste (User 2026-10-14: „ersetzen durch etwas Schnelleres“): Wisch nach unten mit dem Hinweis im Feld (v251); der Knopf bleibt für Maus und Tastatur */
@media (pointer: coarse) { .actionbar .ibtn.advend { display: none; } }
/* Wilde Monster erscheinen direkt (v247): Karte poppt am Platz auf, kurze Kaskade */
.advpop { position: absolute; border-radius: 8px; overflow: hidden; pointer-events: none; box-shadow: 0 6px 16px rgba(5,6,30,.5); }
.advpop img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Schritt 9 (v249): Effekt-Pop-out aus der Karte, Flug zum Ziel; Doppel/Dreifach leuchten golden; Betrag als Chip; gedrehte Karte gedämpft; Stage-Fortschritt; Chancen-Ring */
.fxpop { position: absolute; z-index: 30; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px 5px 7px; border-radius: 999px; background: #2D34E1; color: #fff; font: italic 800 16px/1 var(--font-display); letter-spacing: .02em; white-space: nowrap; pointer-events: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 18px rgba(0,173,226,.7), 0 6px 14px rgba(5,6,30,.5); transform: translate(-50%, -50%); }
.fxpop .glyph { width: 22px; height: 22px; background: #fff; }
.fxpop.big { background: #E8A100; font-size: 19px; box-shadow: 0 0 0 2px #fff, 0 0 26px rgba(255,210,63,.9), 0 6px 14px rgba(5,6,30,.5); }
.fxpop.fallback { background: #8A6A00; }
/* v382: Heilen vom Fluss – grüne Pille, am Monster ein kurzes grünes Funkeln (adventure-ui.js healSparkle) */
.fxpop.heal, .fxpop.big.heal { background: #00A852; box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 0 16px rgba(0,227,105,.75), 0 6px 14px rgba(5,6,30,.5); }
.advheal { position: absolute; z-index: 29; pointer-events: none; }
.advheal .glow { position: absolute; inset: 6%; border-radius: 14px; opacity: 0; background: radial-gradient(ellipse at 50% 58%, rgba(0,227,105,.42) 0%, rgba(0,227,105,.12) 45%, rgba(0,227,105,0) 72%); }
.advheal i { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: #8CFFC0; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); filter: drop-shadow(0 0 4px rgba(0,227,105,.95)); opacity: 0; }
.advcol .rc.jackpot .face { box-shadow: 0 0 0 3px #FFD23F, 0 0 24px rgba(255,210,63,.95); animation: jpPulse .55s cubic-bezier(.22,1,.36,1) 2 alternate; }
@keyframes jpPulse { from { transform: scale(1); } to { transform: scale(1.06); } }
.advcol .rc[data-fx]::after { content: attr(data-fx); position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; max-width: calc(100% + 14px); overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; padding: 1px 8px; border-radius: 999px; background: #2D34E1; color: #fff; font: italic 800 13px/1.35 var(--font-display); box-shadow: 0 0 0 1.5px rgba(255,255,255,.8); pointer-events: none; z-index: 2; } /* v285 (User 2026-10-16: „jeden Text für die RV Verteilungen in eine Zeile“): immer eine Zeile, höchstens 14 px breiter als die Karte */
.advcol .rc.empty[data-fx]::after { display: none; }
/* v284: gedrehte Karten werden nicht mehr abgedunkelt (User: „manche Karten werden dunkel“); sie verlieren nur die Umrandung .advcol.live */
.advprog { display: inline-flex; align-items: center; gap: 6px; min-width: 0; flex: 1 1 auto; margin-right: 4px; } /* v254: über die ganze Breite der Leiste */
.advprog .lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--surface-muted); }
.advprog .bar { position: relative; flex: 1 1 auto; height: 10px; min-width: 60px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; }
.advprog .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #00ADE2, #FF8A00 70%, #FE2829); transition: width .5s cubic-bezier(.76,0,.24,1); }
.advprog .glyph { width: 15px; height: 15px; color: rgba(255,255,255,.45); }
.advprog.boss .glyph { color: #FFD23F; filter: drop-shadow(0 0 6px rgba(255,210,63,.8)); }
/* v254: Coins und Stapel in der Lücke zwischen Gegnerreihe und Flussfeld – links Sasani-Coin-Pille wie .coinchip im Hub, rechts Kartenrücken mit weißer Zahl-Plakette wie im Brett der anderen Modi;
   der Chancen-Ring (Stufen-Anteile des Stapels, v249) liegt als Rand um die Plakette */
.advriver .advcoins, .advriver .advstack { position: absolute; display: flex; align-items: center; transform: translateY(-50%); pointer-events: none; }
.advriver .advcoins { left: 0; gap: 5px; height: 30px; padding: 0 11px 0 4px; border-radius: 999px; color: #fff; font: italic 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255,214,90,.55), 0 4px 12px rgba(14,17,64,.35); }
.advriver .advcoins .coin-ic { width: 24px; height: 24px; }
.advriver .advstack { right: 0; gap: 3px; height: 34px; }
.advriver .advstack .backs { position: relative; width: 29px; height: 34px; }
.advriver .advstack .backs i { position: absolute; left: 0; top: 2px; width: 22px; height: 31px; border-radius: 3px; background: url("./assets/cards/back.webp") center / cover; box-shadow: 0 0 0 .5px rgba(0,0,0,.6), 0 2px 5px rgba(5,6,30,.45); }
.advriver .advstack .backs i:nth-child(2) { left: 3px; top: 1px; } .advriver .advstack .backs i:nth-child(3) { left: 6px; top: 0; }
.advriver .advstack[data-n="0"] .backs i:first-child { opacity: .45; }
.advriver .advstack[data-n="0"] .backs i:nth-child(n+2), .advriver .advstack[data-n="1"] .backs i:nth-child(n+2), .advriver .advstack[data-n="2"] .backs i:nth-child(3) { display: none; }
.advriver .advstack .pill { position: relative; min-width: 24px; height: 22px; padding: 0 7px; box-sizing: border-box; border-radius: 11px; background: #fff; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4px #232482; }
.advriver .advstack .pill .num { font: 800 13px/1 var(--font-body); color: #232482; font-variant-numeric: tabular-nums; }

.advriver .advcoins.pop .num, .advriver .advstack.pop .num { display: inline-block; animation: symPop .36s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .advriver .advcoins.pop .num, .advriver .advstack.pop .num { animation: none; } }
/* v251: Karten bleiben liegen bis zum Verteilen. Wisch nach unten: Spalten folgen dem Finger (--pull), Hinweis unter den Karten (Chevrons, ab 64 px grün „Loslassen“);
   passende Karte = grüner Rand und Chip „RV“, gleiche Effekte (Doppel/Dreifach beim Verteilen) = goldener Chip, gesperrte Karte (keine Lage passt) = Schloss */
.advriver .advcol { transform: translateY(var(--pull, 0px)); }
.advriver.pullback .advcol { transition: transform .24s cubic-bezier(.22,1,.36,1); }
/* v284: kein grüner Griff-Ring mehr um die Karte – der grüne Chip „RV“ und das grüne Farbband zeigen den Griff */
.advcol .rc.match[data-fx]::after { background: #00A85A; letter-spacing: .06em; }
/* v255: Vorschau an der Monsterkarte – gegriffen „−Schaden“ (grün), „Fang!“ (gold), sonst „Flucht 50 %“ (schiefergrau); goldenes Leuchten beim Fang */
.advcol .rc.monster[data-fx]::after { white-space: nowrap; font-size: 12px; }
.advcol .rc.monster .face .hp { bottom: 14px; } /* über dem Vorschau-Chip */
.advcol .rc.monster.hit[data-fx]::after { background: #00A85A; }
.advcol .rc.monster.catch[data-fx]::after { background: #E8A100; box-shadow: 0 0 0 1.5px #fff, 0 0 12px rgba(255,210,63,.8); }
.advcol .rc.monster.flee[data-fx]::after { background: #545A8C; }
/* v284: kein goldener Ring um die Monsterkarte – der Chip „Fang!“ reicht */
.advcol .rc.caught .face { box-shadow: 0 0 0 3px #FFD23F, 0 0 28px rgba(255,210,63,.95); animation: jpPulse .32s cubic-bezier(.22,1,.36,1) 2 alternate; }
.advcol .rc .face .hp.hit { animation: hpHit .5s cubic-bezier(.22,1,.36,1); }
@keyframes hpHit { 0% { transform: translateX(-50%) scale(1.35); color: #FF5A5A; } 100% { transform: translateX(-50%); } }
.advcol .rc.pair:not(.match)[data-fx]::after { background: #C98A00; box-shadow: 0 0 0 1.5px #FFD23F, 0 0 10px rgba(255,210,63,.7); }
/* v385 (r-0091 Variante E, User 2026-10-19: „Bitte E für Chancen-Rand“): kein Schloss mehr (r-0081 C bis v384). Statt der Sperre zeigt die Linie der aktiven Umrandung die Chance,
   dass ein Dreh passt – rot 0, orange 1, gelb 2, grün 3 von vier Lagen; der blaue Schein bleibt. Passt die Karte schon, bleibt die Linie weiß. */
.advcol.live.ch0 { --sc: #FF3B4E; } .advcol.live.ch1 { --sc: #FF8A3D; } .advcol.live.ch2 { --sc: #FFD23F; } .advcol.live.ch3 { --sc: #00E369; }
.advcol.live.ch0 .rc .face::after, .advcol.live.ch1 .rc .face::after, .advcol.live.ch2 .rc .face::after, .advcol.live.ch3 .rc .face::after { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--sc) 85%, transparent), inset 0 0 18px 4px rgba(47,180,255,.8); }
@media (prefers-reduced-motion: reduce) { .advcol .rc.jackpot .face { animation: none; } }

/* v256 (r-0081): Flusskarte aus Ebenen – Grund, Ecken, Wertläufe, Effekt-Symbol mittig und vorgerenderte Glüh-Ebenen. B dezent: wird die Karte gegriffen, pulsieren die
   Wertläufe grün (112 %, 1,25 s, Ease-in-out Quart), sonst pulsiert der Effekt gold; der jeweils andere Teil wird gedämpft. Nur transform/opacity, keine Filter-Animation */
/* Seltene Effekte beim Landen (v267): Flash, Druckwellen und Funkenwirbel als Ebenen unter dem Effekt-Symbol */
.advcol .rc .face .cast { position: absolute; pointer-events: none; }
.advcol .rc .face .cast.flash { inset: 0; background: radial-gradient(circle at 50% 50%, #fff 0%, var(--c) 45%, transparent 75%); mix-blend-mode: screen; }
.advcol .rc .face .cast.ring { left: 50%; top: 50%; width: 70%; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 14px var(--c), inset 0 0 12px var(--c); transform: translate(-50%, -50%) scale(.2); }
.advcol .rc .face .cast.swirl { inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }
/* v283: Druckwelle der seltenen Zauber-Effekte (Cyclecast, Metacast) über das Flussfeld hinaus; die Breite setzt adventure-ui.js castWave aus der Kartenbreite */
.advriver .castwave { position: absolute; aspect-ratio: 1; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 18px var(--c), 0 0 44px var(--c), inset 0 0 18px var(--c); transform: translate(-50%, -50%) scale(.15); pointer-events: none; z-index: 6; mix-blend-mode: screen; }
.advcol .rc .face .lay, .advriver .face.ghost .lay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; object-fit: fill; }
.advcol .rc .face .lay.l-glow, .advriver .face.ghost .lay.l-glow { opacity: 0; }
.advcol .rc .face .lay.l-icon, .advcol .rc .face .lay.l-fx { transform-origin: 50% 50%; }
.advcol .rc .face .lay.L { transform-origin: 13.7% 50.5%; } .advcol .rc .face .lay.R { transform-origin: 87% 50.5%; }
.advcol .rc .face .lay.l-run, .advcol .rc .face .lay.l-icon { transition: opacity .3s cubic-bezier(.76,0,.24,1); }
@keyframes sigPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes sigGlow { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }
.advcol .rc.sig-fx .face .lay.l-icon, .advcol .rc.sig-rv .face .lay.l-run { animation: sigPulse 1.25s cubic-bezier(.76,0,.24,1) infinite; will-change: transform; }
.advcol .rc.sig-fx .face .lay.l-glow.l-fx, .advcol .rc.sig-rv .face .lay.l-glow.l-rv { animation: sigGlow 1.25s cubic-bezier(.76,0,.24,1) infinite; will-change: transform, opacity; }
.advcol .rc.sig-fx .face .lay.l-run { opacity: .32; } .advcol .rc.sig-rv .face .lay.l-icon { opacity: .32; }
.advriver .advarc { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } /* r-0081 E: Strom zwischen gleichen Effekten */
@media (prefers-reduced-motion: reduce) { .advcol .rc .face .lay { animation: none !important; } .advcol .rc.sig-fx .face .lay.l-glow.l-fx, .advcol .rc.sig-rv .face .lay.l-glow.l-rv { opacity: .8; } }
/* v256: Steuerung in der Spielerleiste (statt Spieler-LP): auffällige Schrift, leuchtet, wechselt alle 2 s; beim Ziehen grün „Loslassen: verteilen“ */
.ownbar .advctl { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; overflow: hidden; padding: 0 6px; }
.ownbar .advctl[hidden] { display: none; }
.ownbar.ctlon .who { display: none; }
.ownbar .advctl b { display: block; max-width: 100%; font: italic 800 16px/1.1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: ctlGlow 2s cubic-bezier(.76,0,.24,1) infinite; }
@keyframes ctlGlow { 0%, 100% { text-shadow: 0 0 4px rgba(255,210,63,.65), 0 0 10px rgba(255,210,63,.35); } 50% { text-shadow: 0 0 8px rgba(255,210,63,1), 0 0 20px rgba(255,210,63,.8); } }
.ownbar .advctl.armed b { text-shadow: 0 0 8px rgba(1,227,105,1), 0 0 18px rgba(1,227,105,.75); animation: none; }
@media (prefers-reduced-motion: reduce) { .ownbar .advctl b { animation: none; text-shadow: 0 0 8px rgba(255,210,63,.9); } }
/* v332: Wisch-Hinweis rechts neben dem rechten eigenen Platz – drei Pfeile abwärts, weiß mit Gold-Glow wie die Steuerung, laufen nacheinander auf; beim Ziehen grün */
.advswhint { position: absolute; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translate(-50%, -50%); pointer-events: none; }
.advswhint[hidden] { display: none; }
.advswhint i { display: block; width: 14px; height: 14px; margin-top: -6px; border-right: 3.5px solid #fff; border-bottom: 3.5px solid #fff; border-radius: 0 0 3px 0; transform: rotate(45deg); opacity: .35; animation: swipeArrow 1.5s cubic-bezier(.76,0,.24,1) infinite; }
.advswhint i:nth-child(2) { animation-delay: .2s; } .advswhint i:nth-child(3) { animation-delay: .4s; }
.advswhint.tight i { width: 11px; height: 11px; border-width: 3px; }
@keyframes swipeArrow { 0%, 100% { opacity: .35; filter: drop-shadow(0 0 2px rgba(255,210,63,.5)); } 40% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255,210,63,1)) drop-shadow(0 0 9px rgba(255,210,63,.75)); } }
.advswhint.armed i { opacity: 1; border-color: #fff; animation: none; filter: drop-shadow(0 0 4px rgba(1,227,105,1)) drop-shadow(0 0 9px rgba(1,227,105,.75)); }
@media (prefers-reduced-motion: reduce) { .advswhint i { animation: none; opacity: .9; filter: drop-shadow(0 0 4px rgba(255,210,63,.9)); } }
.screen.match.advask { touch-action: pan-x; } /* während der Flussfrage: senkrechter Wisch gehört dem Verteilen (auch unterhalb des Flussfelds) */
/* v256: Summe der RV auf der Hand, links neben den Karten */
.hand:has(> .handrv) { position: relative; }
.hand > .handrv { position: absolute; left: 10px; top: 50%; z-index: 3; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 9px 6px; border-radius: 12px; background: rgba(8,10,40,.82); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), 0 4px 12px rgba(5,6,30,.45); pointer-events: none; }
.hand > .handrv[hidden], .hand.picking > .handrv { display: none; } /* v289: im Wahl-Modus stehen die großen Karten dort */
.hand > .handrv .glyph { width: 20px; height: 20px; background: currentColor; color: #fff; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.hand > .handrv b { font: italic 800 20px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.hand > .handrv small { font: 700 8px/1.1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--surface-muted); text-align: center; max-width: 58px; }

/* v257: Chancen-Balken rechts neben den Flusskarten (statt Zug): unten Basis blau, darüber Stufe I orange, oben Stufe II rot; darunter die Chance auf eine höhere Stufe */
.advriver .sym.odds { gap: 3px; padding: 5px 4px 3px; }
.advriver .sym.odds .obar { display: flex; flex-direction: column; width: 12px; height: 58px; border-radius: 6px; overflow: hidden; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.advriver .sym.odds .seg { display: block; flex: 0 0 0%; min-height: 0; transition: flex-basis .6s cubic-bezier(.76,0,.24,1); }
.advriver .sym.odds .seg.base { background: #0082FE; } .advriver .sym.odds .seg.t1 { background: #FF8A00; } .advriver .sym.odds .seg.t2 { background: #FE2829; }
.advriver .sym.odds .onums { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; } /* v290: drei Stufen-Chancen übereinander in ihren Farben */
.advriver .sym.odds .on { font: italic 800 13px/1.1 var(--font-display); white-space: nowrap; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.advriver .sym.odds .on.base { color: #4FB0FF; } .advriver .sym.odds .on.t1 { color: #FFA53A; } .advriver .sym.odds .on.t2 { color: #FF5A5B; }
.advriver .sym.odds.pop .onums { animation: symPop .36s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) { .advriver .sym.odds .seg { transition: none; } }
/* v258 Paralyse-Wurf wilder Monster (r-0082 A, Zufallsfarbe): Farbblock rollt über der Karte, darunter die ersten zwei Farben des Monsters */
.advroll { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 10px 7px; border-radius: 14px; background: rgba(22, 24, 72, .88); box-shadow: 0 6px 18px rgba(5, 6, 30, .45), inset 0 0 0 1.5px rgba(180, 108, 255, .75); pointer-events: none; z-index: 5; }
.advroll .dice { display: flex; gap: 6px; } .advroll .die { display: block; width: 48px; height: 24px; background: var(--im) center / contain no-repeat; }
.advroll .die.ok { animation: rollOk .42s cubic-bezier(.22,1,.36,1) both; filter: drop-shadow(0 0 6px #fff); } .advroll .die.no { animation: rollNo .36s cubic-bezier(.76,0,.24,1) both; }
.advroll .goal { display: flex; gap: 3px; } .advroll .tg { display: block; width: 20px; height: 10px; background: var(--im) center / contain no-repeat; transition: transform .2s cubic-bezier(.22,1,.36,1), filter .2s; }
.advroll .tg.ok { filter: drop-shadow(0 0 4px #fff); transform: scale(1.2); } .advroll .tg.dim { filter: grayscale(1) brightness(.6); }
@keyframes rollOk { 0% { transform: scale(1); } 45% { transform: scale(1.3); } 100% { transform: scale(1.12); } }
@keyframes rollNo { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
/* v261 Gegner greift mit (A2): Farben des Gegners gegenüber als kleine Leiste über der Flusskarte; zeigen beide oberen Ecken seine Farben, leuchtet sie orange und die Karte wird gedämpft */
.advcol .foe { position: absolute; left: 50%; top: -17px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; height: 24px; padding: 0 7px; border-radius: 10px; white-space: nowrap; box-sizing: border-box; background: rgba(8,10,40,.8); border: 1px solid var(--surface-line); pointer-events: none; z-index: 2; transition: background-color .18s cubic-bezier(.76,0,.24,1), box-shadow .18s cubic-bezier(.76,0,.24,1); }
.advcol .foe .mb { width: 20px; height: 10px; flex: none; } /* v298: gleiche Größe wie das eigene Farbband (.cb.band); Lage spiegelbildlich, adventure-ui.js › layout */ .advcol .foe .mb.half { filter: drop-shadow(0 0 2px rgba(255,255,255,.7)); } .advcol .foe .mb.hot { animation: blkpulse .9s ease-in-out infinite; position: relative; z-index: 2; } /* v289: getroffene Gegnerfarben leuchten wie die eigenen */
.advcol .foe.takes { background: #E0561A; border-color: #FFB27A; animation: advfoe 1.1s cubic-bezier(.76,0,.24,1) infinite alternate; }
.advcol .foe.grab { transform: translateX(-50%) scale(1.2); box-shadow: 0 0 14px rgba(255,122,26,.85); transition: transform .2s cubic-bezier(.76,0,.24,1), box-shadow .2s cubic-bezier(.76,0,.24,1); }
@keyframes advfoe { from { box-shadow: 0 0 0 rgba(255,122,26,0); } to { box-shadow: 0 0 12px rgba(255,122,26,.9); } }
/* v284: Karten, die der Gegner schnappt, werden nicht mehr abgedunkelt – der orange Chip und die orange Leiste bleiben */
.advcol .rc.stolen[data-fx]::after { background: #E0561A; box-shadow: 0 0 0 1.5px #FFB27A, 0 0 10px rgba(255,122,26,.7); } /* v285: einzeilig „Gegnergriff“ wie alle Chips */
.advcol .rc .lbl.foe, .advriver .face.ghost .lbl.foe { background: #E0561A; border-color: #FFB27A; color: #fff; }
@media (prefers-reduced-motion: reduce) { .advcol .foe.takes { animation: none; box-shadow: 0 0 10px rgba(255,122,26,.8); } }
/* Patt (v271): beide greifen – Gegnerleiste violett, Chip „Patt: Effekt“, beim Verteilen ruckt die Karte zwischen beiden hin und her (Quart ein-aus) */
.advcol .foe.clash { background: #7A3FE0; border-color: #C9A7FF; animation: advclash 1.1s cubic-bezier(.76,0,.24,1) infinite alternate; }
@keyframes advclash { from { box-shadow: 0 0 0 rgba(180,108,255,0); } to { box-shadow: 0 0 12px rgba(180,108,255,.9); } }
/* v289: im Patt greift auch das eigene Monster – Eckblock-Leiste und Farbband leuchten violett, die getroffenen Blöcke wie bei einem Griff */
.advcol .rail.clash { border-color: #C9A7FF; box-shadow: 0 0 0 1px #B46CFF, 0 0 12px rgba(180,108,255,.7); } .advcolours .cb.clash { border-color: #C9A7FF; box-shadow: 0 0 0 1px #B46CFF, 0 0 14px rgba(180,108,255,.7); }
.advcol .rc.clash[data-fx]::after { background: #7A3FE0; box-shadow: 0 0 0 1.5px #C9A7FF, 0 0 10px rgba(180,108,255,.7); } /* v285: einzeilig „Patt“ */
.advcol .rc.clashing { animation: advtug .3s cubic-bezier(.76,0,.24,1) 2 alternate; }
@keyframes advtug { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .advcol .foe.clash { animation: none; box-shadow: 0 0 10px rgba(180,108,255,.8); } .advcol .rc.clashing { animation: none; } }
/* v262-Korrektur: antippbares Monster (Farbe zurück, 1 Spin) nur am Farbband markieren – kein Wahlring, keine Dämpfung der übrigen Karten */
.advcolours .cb.flip { border-color: #00ADE2; box-shadow: 0 0 0 1px rgba(0,173,226,.5), 0 0 10px rgba(0,173,226,.55); animation: advflip 1.6s cubic-bezier(.76,0,.24,1) infinite alternate; padding-right: 22px; }
.advcolours .cb.flip { pointer-events: auto; cursor: pointer; } .advcolours .cb.flip::before { content: ""; position: absolute; inset: -10px -6px; } /* v276: Band antippbar, Trefferfläche größer */
.advcolours .cb.flip::after { content: ""; position: absolute; right: 4px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: #00ADE2; -webkit-mask: url("assets/icons/ui/flip.svg") center / contain no-repeat; mask: url("assets/icons/ui/flip.svg") center / contain no-repeat; }
@keyframes advflip { from { box-shadow: 0 0 0 1px rgba(0,173,226,.5), 0 0 4px rgba(0,173,226,.3); } to { box-shadow: 0 0 0 1px rgba(0,173,226,.8), 0 0 14px rgba(0,173,226,.8); } }
@media (prefers-reduced-motion: reduce) { .advcolours .cb.flip { animation: none; } }

/* Spieler-Level (v272): Karte im Hub, Übersicht aller Level, XP im Ergebnis. Balken in Himmelblau, Aufstieg golden; Ease-in-out Quart */
.advlevel { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; cursor: pointer; transition: transform 160ms cubic-bezier(.76,0,.24,1); } /* v316: Platte .plate */
.advlevel:active { transform: scale(.98); }
.lvbadge { flex: none; width: 56px; height: 56px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 35% 30%, #6FD3FF, var(--brand-sky) 55%, #2D34E1); color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 4px 14px rgba(47,180,255,.45); }
.lvbadge small { font: 800 9px var(--font-body); letter-spacing: .12em; text-transform: uppercase; opacity: .9; } .lvbadge b { font: italic 800 24px/1 var(--font-display); }
.lvmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.lvtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lvtop b { font: italic 800 18px var(--font-display); } .lvtop .muted { font-size: 12px; white-space: nowrap; }
.lvbar { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; box-shadow: inset 0 1px 2px rgba(8,10,40,.4); }
.lvbar > i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: linear-gradient(90deg, #6FD3FF, var(--brand-sky)); transition: width 600ms cubic-bezier(.76,0,.24,1); }
.lvnext { font-size: 12px; color: var(--surface-muted); }
.lvchips { display: flex; flex-wrap: wrap; gap: 6px; } .lvchips span { padding: 2px 9px; border-radius: 999px; font: 700 11px var(--font-body); background: rgba(47,180,255,.16); border: 1px solid rgba(47,180,255,.35); color: var(--surface-ink); }
/* v367 (User 2026-10-19, Auswahl „Pfad“ A): Level-Blatt als Pfad – alle Level auf einer senkrechten Linie, erreichte gefüllt mit grünem Haken, das nächste leuchtet und steht als blaue Platte,
   kommende neutral; je Level Belohnungen mit Symbol oder Bild und die neuen Stages als Chips mit Biom-Bild. Schriften CI r-0086 B: Label Barlow Bold 13 px Versalien gesperrt himmelblau,
   Titel und Zahlen Barlow Condensed Bold Italic (Titel 40 px), Belohnungen Barlow SemiBold 16 px, Stages Barlow SemiBold 14 px, Knopf Barlow Condensed Bold Italic 19 px. Kein Erklärtext. */
.lvcover { padding: 20px 14px 16px; display: flex; flex-direction: column; align-items: center; } /* Flex-Spalte statt Raster: so bekommt das Blatt eine feste Höhe und nur die Stufenliste scrollt */
.cover .inner.lvsheet { width: 100%; max-width: 440px; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: left; }
.lvsheet > :not(.lvscroll) { flex: none; } /* v345 (UX-Review): „Schließen“ wurde in der Flex-Spalte auf 17 px gequetscht – nur die Stufenliste scrollt */
.lvsheet .eyebrow { font: 700 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); }
.lvsheet .lvtitle { font: italic 700 40px/1 var(--font-display); text-transform: uppercase; color: #fff; }
.lvsheet .lvhd { display: flex; flex-direction: column; gap: 8px; }
.lvsheet .lvbar2 { height: 14px; background: rgba(8,10,40,.6); box-shadow: inset 0 2px 4px rgba(0,0,0,.5); } .lvsheet .lvbar2 > i { box-shadow: 0 0 12px rgba(47,180,255,.6); transition: none; }
.lvsheet .lvxpt { display: flex; justify-content: space-between; align-items: baseline; font: 600 15px var(--font-body); color: rgba(255,255,255,.85); } .lvsheet .lvxpt b { font: italic 700 20px var(--font-display); color: #fff; }
.lvsheet .lvstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lvsheet .lvst { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; border-radius: 14px; background: rgba(8,10,40,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.lvsheet .lvst .glyph { width: 22px; height: 22px; color: var(--brand-skyLight); } .lvsheet .lvst b { font: italic 700 26px/1 var(--font-display); } .lvsheet .lvst small { font: 700 10px/1.2 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.lvsheet .lvscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 2px 4px 6px; }
.lvsheet .lvclose { width: 100%; height: 56px; font-size: 19px; }
/* Belohnung: Kachel mit Symbol oder Bild (Deck-Box, Booster), daneben Text */
.lvsheet .rw { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lvsheet .rwic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #6FD3FF, var(--brand-sky) 60%, #2D34E1); box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 4px 10px rgba(0,0,0,.35); }
.lvsheet .rwic .glyph { width: 22px; height: 22px; color: #fff; }
.lvsheet .rwic.img { background: none; box-shadow: none; } .lvsheet .rwic.img img { width: 30px; height: 44px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6), 0 4px 10px rgba(0,0,0,.45); }
.lvsheet .rwic.booster img { width: 32px; height: 46px; object-fit: contain; box-shadow: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); }
.lvsheet .rwt { font: 600 16px/1.2 var(--font-body); color: #fff; min-width: 0; }
.lvsheet .stgs { display: flex; flex-wrap: wrap; gap: 6px; }
.lvsheet .stg { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; border-radius: 999px; background: rgba(8,10,40,.5); font: 600 14px/1 var(--font-body); color: #fff; }
.lvsheet .stg img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); }
.lvsheet .ok { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--state-active, #00E369); flex: none; } .lvsheet .ok .glyph { width: 13px; height: 13px; color: #0E1140; }
/* Pfad: Stufen auf einer Linie, erreichte gefüllt mit Haken, nächstes leuchtet, Karten rechts daneben */
.lvsheet .lvpl { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 10px; padding-bottom: 12px; }
.lvsheet .lvpl::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: -4px; width: 4px; border-radius: 2px; background: rgba(255,255,255,.14); }
.lvsheet .lvpl:last-child::before { display: none; }
.lvsheet .lvpl.got::before { background: linear-gradient(var(--brand-sky), #6FD3FF); }
.lvsheet .lvpn { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: italic 700 22px/1 var(--font-display); color: rgba(255,255,255,.7); background: #14185A; box-shadow: inset 0 0 0 2.5px rgba(255,255,255,.25); }
.lvsheet .got .lvpn { color: #fff; background: radial-gradient(circle at 35% 30%, #6FD3FF, var(--brand-sky) 60%, #2D34E1); box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.lvsheet .got .lvpn .ok { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; box-shadow: 0 0 0 2px #14185A; }
.lvsheet .next .lvpn { width: 54px; height: 54px; margin: -4px; font-size: 26px; color: #fff; background: #1E2A9E; box-shadow: 0 0 0 3px var(--brand-skyLight), 0 0 22px rgba(111,211,255,.75); animation: lvPulse 2.4s ease-in-out infinite; }
@keyframes lvPulse { 50% { box-shadow: 0 0 0 3px var(--brand-skyLight), 0 0 34px rgba(111,211,255,.95); } }
.lvsheet .lvpc { display: flex; flex-direction: column; gap: 9px; padding: 12px 12px 12px 14px; border-radius: 16px; background: rgba(20,24,90,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); min-width: 0; }
.lvsheet .got .lvpc { background: rgba(20,24,90,.38); } .lvsheet .got .lvpc .rwt, .lvsheet .got .lvpc .stg { opacity: .7; }
.lvsheet .next .lvpc { background: linear-gradient(160deg, #2B41BE, #161B66); box-shadow: inset 0 0 0 2px var(--brand-sky), 0 0 20px rgba(47,180,255,.3); }
.lvsheet .pchd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .lvsheet .pchd .eyebrow { font-size: 12px; }
.lvsheet .pchd .pxp { font: italic 700 18px var(--font-display); color: rgba(255,255,255,.8); white-space: nowrap; } .lvsheet .next .pchd .pxp { color: #fff; }
.lvsheet .prw { display: flex; flex-direction: column; gap: 8px; }
@media (prefers-reduced-motion: reduce) { .lvsheet .next .lvpn { animation: none; } } .reduce-motion .lvsheet .next .lvpn { animation: none; }
.advres .advxp { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; text-align: left; } /* v316: Platte .plate.violet */
.advres .advxp .xphead { display: flex; justify-content: space-between; align-items: baseline; } .advres .advxp .xphead b { font-size: 22px; color: var(--brand-sky); }
.advres .advxp.up { --edge: #FFC83D; box-shadow: inset 0 2px 0 var(--edge), inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -26px 40px -30px rgba(0,0,0,.6), 0 0 22px rgba(255,200,61,.55), 0 10px 24px rgba(0,0,0,.45); } /* v316: goldene Lichtkante und Glühen statt Rahmen */
.advres .advxp .lvup { display: flex; flex-direction: column; gap: 6px; animation: sdBadge 260ms cubic-bezier(.76,0,.24,1) both; } .advres .advxp .lvup > b { font: italic 800 18px var(--font-display); color: #FFC83D; }
.advres .advxp .lvup .lvchips span { background: rgba(255,200,61,.16); border-color: rgba(255,200,61,.45); }
@media (prefers-reduced-motion: reduce) { .lvbar > i { transition: none; } .advres .advxp .lvup { animation: none; } }
/* v290 (User 2026-10-16: „Bitte den Balken im Stage clear animieren, pulsierender Glow nach Weiß“): XP-Balken der Ergebnis-Tafel pulsiert, Füllung hellt bis fast Weiß auf, Schein außen */
.advres .advxp .lvbar { overflow: visible; animation: lvglow 1.4s ease-in-out infinite; } .advres .advxp .lvbar > i { animation: lvfill 1.4s ease-in-out infinite; }
@keyframes lvglow { 0%, 100% { box-shadow: inset 0 1px 2px rgba(8,10,40,.4), 0 0 4px rgba(111,211,255,.45); } 50% { box-shadow: inset 0 1px 2px rgba(8,10,40,.4), 0 0 16px 3px rgba(255,255,255,.9); } }
@keyframes lvfill { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.65) saturate(.3); } }
@media (prefers-reduced-motion: reduce) { .advres .advxp .lvbar, .advres .advxp .lvbar > i { animation: none; } }
.advres .advxp .lvup .lvchips span.booster { background: rgba(47,180,255,.2); border-color: var(--brand-sky); font-weight: 800; }
/* v274: Sub-Stages – Begegnungen im Stage-Balken, Stage-Liste je Biom, Modifikator-Chips */
.advprog .cnt { font: 700 11px var(--font-body); color: #fff; font-variant-numeric: tabular-nums; }
.advprog .bosstag { padding: 1px 6px; border-radius: 999px; font: 700 9px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.3); }
.advprog .bosstag.on { color: #fff; background: var(--tier-stage2, #FE2829); border-color: transparent; }
.advstages { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.advstage { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; cursor: pointer; font: inherit; } /* v316: Platte .plate */
.advstage.on { --p1: #2E3DAE; --p2: #141A5C; box-shadow: inset 6px 0 0 var(--state-active), inset 0 2px 0 var(--edge), inset 0 -26px 40px -30px rgba(0,0,0,.6), 0 0 28px rgba(0,227,105,.45), 0 10px 24px rgba(0,0,0,.45); } /* v316: grüner Balken links und Glühen statt Rahmen */
.advstage.locked { --p1: #2B2E58; --p2: #15172F; opacity: .75; cursor: default; }
.advstage .sno { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 italic 16px var(--font-display); color: #fff; background: var(--tier-base, #00ADE2); }
/* v361 (User 2026-10-19: „Stage Nummerierung in einheitlicher Farbe, nicht wechseln“): Boss-Stages nicht mehr rot */
.advstage .smain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.advstage .smain > b { font: 800 italic 16px var(--font-display); text-transform: uppercase; line-height: 1.05; }
.advstage .smeta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--surface-muted); }
.advstage .sboss { padding: 1px 7px; border-radius: 999px; background: var(--tier-stage2, #FE2829); color: #fff; font: 700 10px var(--font-body); letter-spacing: .05em; text-transform: uppercase; }
.advstage .smods { display: flex; flex-direction: column; gap: 3px; width: 100%; }
/* v310: Modifikatoren als Liste, Symbol im Farbkreis, Farbe je Art wie im Sky-Stage-Editor (Gegner rot, Falle orange, Status violett, Boss pink, Gewinn gelb, Hilfe grün) */
.advstage .smod { --k: #FFD54A; display: flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border-radius: 9px; border-left: 4px solid var(--k); background: linear-gradient(90deg, color-mix(in srgb, var(--k) 28%, #0F1242), #0F1242); } /* v316: deckend */
.advstage .smod.k-foe { --k: #FF6B6B; } .advstage .smod.k-trap { --k: #FFA94D; } .advstage .smod.k-status { --k: #B57BFF; } .advstage .smod.k-boss { --k: #FF4D8D; } .advstage .smod.k-gain { --k: #FFD54A; } .advstage .smod.k-help { --k: #3DDC84; }
.advstage .smod .mi { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--k) 72%, #0E1140); box-shadow: 0 0 0 1px color-mix(in srgb, var(--k) 60%, #fff); }
.advstage .smod .mi img { width: 12px; height: 12px; display: block; }
.advstage .smod .mt { font: 700 10px/1.25 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #fff; min-width: 0; }
.advstage.locked .smod { filter: saturate(.5); }
.advstage .sright { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 11px; color: var(--surface-muted); text-align: right; max-width: 84px; }
.advstage .sright .glyph { width: 16px; height: 16px; }
/* v367 (User 2026-10-19, Auswahl „Siegel“ S1): geschaffte Stages tragen ein grünes Haken-Siegel (weiß auf Grün) an der oberen rechten Ecke und einen grünen Rand; rechts „2× geschafft“
   (Barlow Condensed Bold Italic 15 px grün) statt „★ 2“. Gesperrte und noch nicht geschaffte Zeilen unverändert. */
.advstage { position: relative; }
.advstage.sdone { box-shadow: inset 0 0 0 1.5px rgba(0,227,105,.55), inset 0 2px 0 var(--edge), 0 10px 24px rgba(0,0,0,.45); }
.advstage.sdone.on { box-shadow: inset 6px 0 0 var(--state-active), inset 0 0 0 1.5px rgba(0,227,105,.55), 0 0 28px rgba(0,227,105,.45), 0 10px 24px rgba(0,0,0,.45); }
.advstage .sseal { position: absolute; top: -8px; right: -6px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #7DFFB5, #00C45A 60%, #007A3A); box-shadow: 0 0 0 3px #10134A, 0 4px 10px rgba(0,0,0,.5); z-index: 2; }
.advstage .sseal .glyph { width: 22px; height: 22px; color: #fff; }
.advstage .sright b.done2 { font: italic 700 15px var(--font-display); color: var(--state-active, #00E369); letter-spacing: .02em; }
.lvup .fresh { background: rgba(0,173,226,.22); }
/* v277: Deck aus Einzelkarten – gewählte Karten hell mit Haken, nicht gewählte entsättigt, fehlende Stufen als gestrichelter Platz; Linie teilweise gewählt = Strich im Kreis */
.advscreen .linerow.off { opacity: .72; } .advscreen .linerow.part { border-color: color-mix(in srgb, var(--state-active) 35%, var(--surface-line)); }
.advscreen .linerow.part .linecheck { border-color: var(--state-active); } .advscreen .linerow.part .linecheck::after { content: ""; width: 12px; height: 3px; border-radius: 2px; background: var(--state-active); }
.advscreen .stagecard img { transition: filter var(--motion-fast) var(--motion-ease); } .advscreen .stagecard:not(.sel) img { filter: grayscale(.85) brightness(.72); }
.advscreen .stagecard.sel { box-shadow: 0 0 0 2px #fff, 0 0 10px color-mix(in srgb, var(--state-active) 60%, transparent); }
.advscreen .stagecard.sel::after { content: ""; position: absolute; top: 3px; right: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--state-active) url("./assets/icons/ui/check.svg") center / 10px no-repeat; box-shadow: 0 0 0 1.5px #fff; }
.advscreen .stagecard.none { display: block; background: transparent; border: 1.5px dashed var(--surface-line); opacity: .45; cursor: default; }
/* v278: Monster wischen – Kopie des Kartenbilds folgt dem Finger, scharf = Leuchten und Etikett */
.advmonswipe { position: absolute; z-index: 40; pointer-events: none; border-radius: 6px; will-change: transform; }
.advmonswipe img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 24px rgba(14,17,64,.55); }
.advmonswipe.armed img { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(47,180,255,.85), 0 10px 24px rgba(14,17,64,.55); }
.advmonswipe .lbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 4px 10px; border-radius: 999px; background: var(--brand-sky, #2FB4FF); color: #fff; font: italic 800 15px var(--font-display); letter-spacing: .02em; white-space: nowrap; text-shadow: 0 1px 3px rgba(14,17,64,.5); opacity: 0; transition: opacity 120ms ease-out; }
.advmonswipe.armed .lbl { opacity: 1; }
/* v278: Ergebnis – Funkeln im Hintergrund (hinter dem Inhalt, nimmt keine Tipps) */
.advres { position: relative; isolation: isolate; } .advres > .advsparkle { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.advres .advbanner { position: relative; isolation: isolate; } .advres .advbanner > .advsparkle { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.advsparkle i { position: absolute; display: block; background: #fff; transform: rotate(45deg); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation-name: advTwinkle, advRise; animation-timing-function: cubic-bezier(.76,0,.24,1), linear; animation-iteration-count: infinite, infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.9)); }
.advsparkle i.gold { background: #FFD23F; filter: drop-shadow(0 0 5px rgba(255,210,63,.95)); }
@keyframes advTwinkle { 0%, 100% { opacity: 0; scale: .4; } 45% { opacity: .95; scale: 1.15; } 60% { opacity: .7; scale: .9; } }
@keyframes advRise { from { translate: 0 0; } to { translate: 0 -60px; } }
@media (prefers-reduced-motion: reduce) { .advsparkle i { animation: none; opacity: .45; } }
/* v278 (User: „Die kleinen Schriften sind nicht gut gewählt. Das ist ein copy text font und gehört hier nicht hin“): kleine Texte im Ergebnis in der Display-Schrift wie Etiketten */
.advres .advstats .muted, .advres .advbanner > .muted, .advres .advcoins .coinrow, .advres .advcoins .xphead .muted, .advres .advxp .xphead .muted, .advres .advxp .xpsrc span, .advres .lvchips span, .advres .bdgups .muted, .advres .bdgups .tiny { font-family: var(--font-display); font-weight: 600; letter-spacing: .03em; }
.advres .advstats .muted { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; } .advres .advbanner > .muted { font-size: 17px; }
.advres .advcoins .coinrow { font-size: 16px; } .advres .advcoins .coinrow b { font-weight: 700; } .advres .advxp .xpsrc span, .advres .lvchips span { font-size: 13px; }
/* v278: Monsterkarte bleibt im Fluss – blaues Etikett, Wellenring und Schaukeln, danach im Bogen in den Stapel; Stapel zeigt das Monster als „+1“ */
.advcol .rc .lbl.stay, .advriver .face.ghost .lbl.stay { border-color: #2FB4FF; color: #fff; background: rgba(14,40,110,.92); box-shadow: 0 0 14px rgba(47,180,255,.6); }
.advcol .rc.stayback { animation: advStayRock 900ms cubic-bezier(.76,0,.24,1) both; }
.advcol .rc.stayback::after { content: ""; position: absolute; inset: -6px; border-radius: 10px; border: 2px solid rgba(47,180,255,.9); box-shadow: 0 0 16px rgba(47,180,255,.7); animation: advStayRing 900ms cubic-bezier(.22,1,.36,1) infinite; pointer-events: none; }
@keyframes advStayRock { 0% { transform: none; } 25% { transform: rotate(-4deg) translateY(-3px); } 50% { transform: rotate(3deg) translateY(2px); } 75% { transform: rotate(-2deg); } 100% { transform: none; } }
@keyframes advStayRing { from { opacity: .95; transform: scale(.96); } to { opacity: 0; transform: scale(1.12); } }
.advstack { overflow: visible; } .advstack .stackplus { position: absolute; left: 50%; top: -6px; display: flex; align-items: center; gap: 3px; padding: 2px 6px 2px 2px; border-radius: 999px; background: rgba(14,40,110,.95); border: 1px solid #2FB4FF; pointer-events: none; z-index: 5; }
.advstack .stackplus img { width: 18px; height: 25px; object-fit: cover; border-radius: 3px; } .advstack .stackplus b { font: italic 800 14px var(--font-display); color: #fff; }
@media (prefers-reduced-motion: reduce) { .advcol .rc.stayback, .advcol .rc.stayback::after { animation: none; } }
/* v278: Deckwahl für Einzelkarten – Deck als Kartenplätze oben, Sammlung als Raster mit Stufen-Filter */
.advscreen .deckhead { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .advscreen .deckhead .eyebrow { flex: 1; }
.advscreen .decknum { font: italic 800 20px var(--font-display); color: var(--state-onTurn, #FFB020); } .advscreen .decknum.ok { color: var(--state-active, #01E369); }
.advscreen .deckauto { padding: 6px 12px; min-height: 0; font-size: 14px; }
.advscreen .deckslots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.advscreen .deckslot { appearance: none; border: 0; padding: 0; position: relative; aspect-ratio: 600 / 819; border-radius: 5px; overflow: hidden; background: var(--surface-panelRaised); cursor: pointer; box-shadow: 0 0 0 1.5px #fff, 0 4px 10px rgba(14,17,64,.45); }
.advscreen .deckslot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.advscreen .deckslot .stagedot { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--acc, var(--tier-base)); }
.advscreen .deckslot.base { --acc: var(--tier-base); } .advscreen .deckslot.stage1 { --acc: var(--tier-stage1); } .advscreen .deckslot.stage2 { --acc: var(--tier-stage2); }
.advscreen .deckslot.empty { box-shadow: none; border: 1.5px dashed var(--surface-line); background: transparent; cursor: default; }
.advscreen .deckslot.empty::after { content: "+"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 20px var(--font-display); color: var(--surface-muted); }
.advscreen .deckcollhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; } .advscreen .deckcollhead .muted { font: 600 13px var(--font-display); letter-spacing: .03em; }
.advscreen .deckfilter { display: flex; gap: 6px; flex-wrap: wrap; }

/* v287 (User 2026-10-16): Stage-Menü – Level-Werte als Symbole statt Text-Pillen; Biom-Kacheln: die Umrandung der gewählten Kachel wurde vom Scrollrahmen beschnitten;
   Monster der Stage als kleine Bilder in einem Feld statt „ohne …“; kompakter Deck-Wähler oben (Automatisch, Starterdeck-Serien, eigenes Deck) mit Kartenstreifen und „Deck bauen“ */
.lvchips.lvicons { gap: 8px; } .lvchips .lvstat { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: rgba(47,180,255,.16); border: 1px solid rgba(47,180,255,.35); color: var(--surface-ink); }
/* v288 (User 2026-10-16: „Level icons sind blau auf blau?“): „.lvchips span“ gab dem Symbol die blaue Pillenfläche statt currentColor – jetzt weiß und ohne Pillenstil */
.lvchips .lvstat .glyph { width: 16px; height: 16px; padding: 0; border: 0; border-radius: 0; background: #fff; opacity: .95; } .lvstat b { font: italic 800 14px var(--font-display); }
/* v288 (User 2026-10-16: „Die Outline ist immer noch abgeschnitten“): Scroll-Snap legte die erste Kachel bündig an die Kante des Scrollbereichs und schnitt den Rahmen links ab;
   scroll-padding hält beim Einrasten Abstand */
.advbiomes { padding: 8px 8px 12px; margin: 0 -8px; scroll-padding-inline: 8px; } .advbiome { scroll-margin-inline: 0; }
.advstage .smons { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 12px; background: rgba(8,10,40,.55); border: 0; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); width: max-content; max-width: 100%; } /* v316: Mulde */
.advstage .sav { width: 26px; height: 26px; border-radius: 50%; background: #0E1140 var(--im) 50% 24% / 185% auto no-repeat; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); }
/* v288 (User 2026-10-16: „Die Monster icons sind von den Karten und man sieht HUD Elemente – warum nicht die Freisteller?“): Freisteller vor dem Avatar-Verlauf des Profils */
.advstage .sav.cut { width: 30px; height: 30px; background: var(--im) 50% 62% / 92% auto no-repeat, radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand-sky) 55%, var(--brand-indigo)), var(--brand-indigoDeep) 72%); }
/* v327: Pool links, Letzte Welle rechts als eigener Block mit Trennlinie */
.advstage .smons { flex-wrap: nowrap; align-items: flex-start; } .advstage .smons.haswave { width: 100%; }
.advstage .spool { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; }
.advstage .swave { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 3px; flex: none; max-width: 110px; margin-left: auto; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.18); }
.advstage .spool + .swave { margin-left: 4px; }
/* v326: Boss rot (Stufe II), Letzte Welle orange (Stufe I), Zufall als Fragezeichen */
.advstage .sav.boss { --tone: var(--tier-stage2); } .advstage .sav.wave { --tone: var(--tier-stage1); }
.advstage .sav.boss, .advstage .sav.wave { box-shadow: 0 0 0 1.5px var(--tone), 0 0 6px color-mix(in srgb, var(--tone) 70%, transparent); }
.advstage .sav.cut.boss, .advstage .sav.cut.wave { background: var(--im) 50% 62% / 92% auto no-repeat, radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tone) 75%, #fff), var(--tone) 50%, color-mix(in srgb, var(--tone) 55%, #000) 85%); }
.advstage .sav.q { width: 30px; height: 30px; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--tone) 75%, #fff), var(--tone) 50%, color-mix(in srgb, var(--tone) 55%, #000) 85%); color: #fff; font: italic 800 17px/1 var(--font-display); text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.advstage .savmore { font: 800 11px var(--font-body); color: var(--surface-muted); padding: 0 4px; } .advstage.locked .sav { filter: grayscale(.7); }
.advdeckbar { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; } /* v316: Platte .plate */
.advdeckbar .deckhead { margin-top: 0; }
.deckmodes { display: flex; gap: 6px; overflow-x: auto; padding: 2px; margin: 0 -2px; scrollbar-width: none; } .deckmodes::-webkit-scrollbar { display: none; }
.deckmode { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 4px 12px 4px 5px; border-radius: 999px; border: 1.5px solid var(--surface-line); background: rgba(255,255,255,.05); color: var(--surface-ink); font: 700 13px var(--font-body); cursor: pointer; }
.deckmode.text { padding-left: 12px; } .deckmode img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; display: block; }
.deckmode img.deckav { object-fit: contain; object-position: 50% 70%; background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--brand-sky) 55%, var(--brand-indigo)), var(--brand-indigoDeep) 72%); }
.deckmode span { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deckmode.on { border-color: var(--state-active); box-shadow: 0 0 0 1.5px var(--state-active); background: rgba(1,227,105,.12); }
.deckstriprow { display: flex; align-items: center; gap: 8px; } .deckstrip { flex: 1; min-width: 0; display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 2px 4px; scrollbar-width: none; } .deckstrip::-webkit-scrollbar { display: none; }
/* v288 (User 2026-10-16: „Monster derselben Linie overlapping anzeigen“): je Linie ein Fächer, die höhere Stufe liegt oben, links bleibt von jeder Karte ein Streifen mit Stufenfarbe */
.deckline { flex: none; display: flex; } .deckline .deckmini + .deckmini { margin-left: -22px; }
.deckmini { flex: none; width: 34px; aspect-ratio: 600 / 819; border-radius: 3px; object-fit: cover; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; /* v393: Halte-Zoom */ box-shadow: -3px 0 5px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.3); border-bottom: 3px solid var(--acc, var(--tier-base)); box-sizing: border-box; background: #0E1140; }
.deckmini.stage1 { --acc: var(--tier-stage1); } .deckmini.stage2 { --acc: var(--tier-stage2); } .deckmini.empty { border: 1.5px dashed var(--surface-line); background: transparent; box-shadow: none; }
.deckstriprow .btn.deckbuild { flex: none; width: auto; height: auto; padding: 6px 12px; min-height: 36px; font-size: 13px; } /* .btn.ghost hat width 100 % (höhere Spezifität) – sonst verdrängt der Knopf den Kartenstreifen */
.advdeckbar .tiny.warn { color: var(--state-onTurn, #FFB020); } .advdeckbar .decknote { color: rgba(255,255,255,.75); }
/* v287 Ergebnis (User 2026-10-16: „Der stage clear screen muss ansehnlicher werden. Die graue Schrift passt immer noch nicht. Die XP boni müssen ebenso in Zeilen aufgeführt werden“):
   heller Text statt Grau, Titel größer, Kennzahlen als Kacheln, XP-Quellen und Level-Belohnungen als Zeilen wie die Münzen */
.advres .advbanner { padding: 22px 16px 18px; gap: 10px; --p1: #2C35B6; --p2: #171C64; --edge: color-mix(in srgb, var(--acc) 70%, transparent); background: var(--tex), radial-gradient(ellipse 80% 36% at 50% 0%, color-mix(in srgb, var(--acc) 42%, transparent), transparent 72%), linear-gradient(170deg, var(--p1), var(--p2)); } /* v316: Platte mit Akzentglühen */
.advres .advbanner .display.big { font-size: 30px; letter-spacing: .02em; }
.advres .advbanner > .muted { color: rgba(255,255,255,.85); font: 600 15px var(--font-body); }
.advres .advstats { gap: 10px; } .advres .advstats > div { min-width: 92px; padding: 8px 10px; border-radius: 12px; background: rgba(8,10,40,.55); border: 0; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); } /* v316: Mulde */
.advres .advstats .mono { font-size: 26px; } .advres .advstats .muted { color: rgba(255,255,255,.75); font: 700 10px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.advres .advcoins .coinrow, .advres .advxp .xprow { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 0; font: 600 14px var(--font-body); color: rgba(255,255,255,.92); } /* v316: ohne Trennlinien */
.advres .advcoins .coinrow:first-child, .advres .advxp .xprow:first-child { border-top: 0; }
.advres .advxp .xprows { display: flex; flex-direction: column; } .advres .advxp .xprow b { color: var(--brand-sky); font-weight: 800; }
.advres .advcoins .xphead .muted, .advres .advxp .xphead .muted { color: rgba(255,255,255,.8); font-weight: 700; }
.advres .advxp .lvup .lvchips { flex-direction: column; gap: 4px; } .advres .advxp .lvup .lvchips span { border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.advres .eyebrow { color: rgba(255,255,255,.75); }

@keyframes blkpulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* v290: Grow and Shrink der getroffenen Farbblöcke; v292 (User 2026-10-16: „color block grow etwas geringer, da sonst gegenseitig überlappt“): 1,2 statt 1,45, nur transform (läuft ohne Neumalen) */
@media (prefers-reduced-motion: reduce) { .advcol .lb.ok, .advcol .mb.ok, .advcolours .cb .mb.ok, .advcol .foe .mb.hot { animation: none; transform: scale(1.25); } }
/* v292: RV der Gegner in der oberen Leiste (adventure-ui.js › foeRvEl) – damit bezahlen wilde Monster ihre Angriffe */
.foerv { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 5px; border-radius: 999px; background: rgba(255,122,26,.18); box-shadow: inset 0 0 0 1.5px rgba(255,122,26,.55); color: #fff; margin-right: 4px; }
.foerv .glyph { width: 16px; height: 16px; background: #FF9A4D; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.foerv b { font: italic 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.foerv small { font: 700 9px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.foerv.zero { opacity: .55; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); background: rgba(255,255,255,.06); } .foerv.zero .glyph { background: rgba(255,255,255,.6); }
.foerv.pop { animation: foervPop .45s cubic-bezier(.22,1,.36,1); } @keyframes foervPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (max-width: 380px) { .foerv small { display: none; } }
@media (prefers-reduced-motion: reduce) { .foerv.pop { animation: none; } }
/* v292: übrige Spins und Swaps fliegen als Münzen zum Münz-Zähler (adventure-ui.js › endBonus) */
.bonusfly { position: fixed; z-index: 60; pointer-events: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 3px; border-radius: 999px; background: rgba(14,17,64,.85); box-shadow: 0 0 0 1.5px rgba(255,210,63,.7), 0 4px 12px rgba(0,0,0,.4); }
.bonusfly img { width: 20px; height: 20px; display: block; } .bonusfly b { font: italic 700 15px/1 var(--font-display); color: #FFD23F; }
/* v310: r-0086 B eingebaut (Menü-Schriften). Titel = Monstername (Barlow Condensed Bold Italic, Versalien). Label = "Angriff wählen" (Barlow Bold, Versalien, gesperrt). */
:root { --ci-lab: 700 11px/1.25 var(--font-body); --ci-sp: .12em; --ci-acc: var(--brand-skyLight); --ci-dim: rgba(255,255,255,.72); }
.advscreen .eyebrow, .advres .eyebrow { font: var(--ci-lab); letter-spacing: var(--ci-sp); color: var(--ci-acc); }
.deckmode { font: italic 700 15px var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.lvbadge small { font: 700 9px var(--font-body); letter-spacing: var(--ci-sp); }
.lvtop b { font: italic 700 20px var(--font-display); text-transform: uppercase; }
.lvtop .muted { font: 700 10px var(--font-body); letter-spacing: var(--ci-sp); text-transform: uppercase; color: var(--ci-dim); }
.lvnext { font: 700 10px/1.35 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ci-dim); }
.advbiome .bname { font-weight: 700; font-size: 20px; }
.advbiome .bname small { font: 700 10px var(--font-body); letter-spacing: var(--ci-sp); color: rgba(255,255,255,.8); }
.advstage .smain > b { font: italic 700 18px var(--font-display); }
.advstage .smeta { font: 700 10px var(--font-body); letter-spacing: var(--ci-sp); text-transform: uppercase; color: var(--ci-dim); }
.advstage .sright, .advstage .sright small { font: 700 9px/1.35 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ci-dim); }
.advstage .sboss { font: 700 9px var(--font-body); letter-spacing: var(--ci-sp); }
.advstage .savmore { font: italic 700 14px var(--font-display); }
.advres .advbanner > .muted { font: 700 12px var(--font-body); letter-spacing: var(--ci-sp); text-transform: uppercase; color: var(--ci-acc); }
.advres .advstats .muted { font: 700 10px var(--font-body); letter-spacing: var(--ci-sp); color: var(--ci-acc); }
.advres .advcoins .xphead .muted, .advres .advxp .xphead .muted { font: 700 11px var(--font-body); letter-spacing: var(--ci-sp); text-transform: uppercase; color: var(--ci-dim); }
.advres .advcoins .coinrow span, .advres .advxp .xprow span { font: 700 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.85); align-self: center; }
.advres .advcoins .coinrow b, .advres .advxp .xprow b { font: italic 700 18px var(--font-display); }
.advres .advcoins .coinrow { font-family: var(--font-body); }
.advres .advresbody > * { flex-shrink: 0; }
/* r-0086 B: Muster wie im Angriffs-Panel. Label in Himmelblau steht ÜBER dem Titel. */
.advscreen > .scrollbody > .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; margin-top: 6px; }
.advscreen > .scrollbody > .eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(111,211,255,.5), transparent); }
.advbiome .bname { display: flex; flex-direction: column-reverse; }
.advbiome .bname small { margin: 0 0 3px; color: var(--ci-acc); }
.advstage .smeta { order: -1; color: var(--ci-acc); }
.advstage .smain > b { font-size: 20px; }
.lvtop { flex-direction: column-reverse; align-items: flex-start; gap: 1px; }
.lvtop .muted { color: var(--ci-acc); }
.lvtop b { font-size: 22px; }
.advres .advbanner > .mascot { order: 0; } .advres .advbanner > .muted { order: 1; margin-top: 4px; } .advres .advbanner > .display.big { order: 2; font-size: 34px; } .advres .advbanner > :not(.mascot):not(.muted):not(.big):not(.advsparkle) { order: 3; }
.advres .advstats > div { flex-direction: column-reverse; gap: 2px; }
.advres .advcoins .xphead, .advres .advxp .xphead { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } /* v316: Beschriftung links, Summe rechts über den Zeilen */
.advres .advcoins .xphead .muted, .advres .advxp .xphead .muted { color: var(--ci-acc); }

/* v316 Panel-Look D (r-0094): Plattenfarben je Funktion (Rezept .plate in app.css). Coins gold, XP purpur, flächig; Summe rechts über den Zeilen, Zeilen ohne Trennlinie, Schrift kräftiger, Münze größer */
.advdeckbar { --p1: #2B41BE; --p2: #161B66; --edge: rgba(47,180,255,.6); }
.advlevel { --p1: #1F6FAE; --p2: #14306E; --edge: rgba(189,245,255,.65); }
/* v336 (User 2026-10-17: „Die Stage-Panels müssen in einer Farbe bleiben“): Boss-Stages ohne eigene Plattenfarbe – Boss zeigen die rote Nummer, die Pille „Boss“ und die Monster-Mulde */
.lvchips .lvstat, .advres .advxp .xpsrc span, .advres .lvchips span { background: rgba(8,10,40,.45); border: 0; }
.advres .advcoins .xphead .muted { color: #1C1340; font-size: 12px; } .advres .advxp .xphead .muted { color: #E9D9FF; font-size: 12px; }
.advres .advcoins .coinhead { gap: 8px; } .advres .advcoins .coinic { width: 34px; height: 34px; filter: drop-shadow(0 2px 2px rgba(60,30,0,.35)); } .advres .advcoins .coinhead b { font-size: 30px; color: #1C1340; }
.advres .advxp .xphead b { font-size: 28px; color: #F6EEFF; }
.advres .advcoins .coinrow span, .advres .advxp .xprow span { font: 700 12px/1.3 var(--font-body); letter-spacing: .08em; }
.advres .advcoins .coinrow span { color: #1C1340; } .advres .advxp .xprow span { color: #F6EEFF; }
.advres .advcoins .coinrow b, .advres .advxp .xprow b { font-size: 20px; } .advres .advcoins .coinrow b { color: #1C1340; } .advres .advxp .xprow b { color: #fff; }
.advres .advxp .lvbar { background: rgba(20,8,50,.45); } .advres .advxp .lvbar > i { background: linear-gradient(90deg, #FFFFFF, #E9D9FF); }
/* v322 (User 2026-10-17: „Das hier muss dringend überarbeitet werden … Überlagerungen … Aktuell kann ich nicht einmal scrollen!“): Adventure-Konfigurator als Vollbild-Blatt.
   Kopf (Zähler, Deck-Plätze, Status) fest, Sammlung scrollt, „Fertig“ fest unten. Kein Inhalt liegt über einer Karte; Klassen dk* statt .deckcard (kollidierte mit der Deckliste in app.css). */
.cover.dkcover { display: flex; justify-content: center; align-items: stretch; padding: 0; text-align: left; overflow: hidden; }
.dkcover .inner.decksheet { max-width: 560px; width: 100%; height: 100%; max-height: 100dvh; min-height: 0; margin: 0 auto; gap: 0; align-items: stretch; padding: max(12px, var(--sat)) 16px 0; }
.decksheet .dktop { flex: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.1); }
.decksheet .dkhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.decksheet .dkhead .decknum { white-space: nowrap; flex: none; }
.decksheet .dkhead .decknum { margin-left: auto; } .decksheet .dkclose { appearance: none; border: 0; background: transparent; color: var(--surface-ink); width: 36px; height: 36px; margin: -8px -8px -8px 0; display: grid; place-items: center; border-radius: 50%; cursor: pointer; position: relative; flex: none; align-self: center; } .decksheet .dkclose::before { content: ""; position: absolute; inset: -4px; } /* v345: Schließen oben rechts */
.dkview button, .deckauto { position: relative; } .dkview button::before, .deckauto::before { content: ""; position: absolute; inset: -9px -2px; } /* v345 (UX-Review): Trefferfläche mind. 44 px */
.decksheet .dkstat { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.decksheet .dkstat .decksum { flex: 1 1 auto; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; text-align: left; }
.decksheet .dkstat .deckauto { flex: none; width: auto; padding: 6px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; }
/* v328 (User 2026-10-17: „Oben nur eine Zeile für die Karten im Deck, mit Overlap“): alle Plätze in einer Zeile; reicht die Breite nicht, schieben sie sich übereinander */
.decksheet .deckslots { --w: 42px; display: flex; flex-wrap: nowrap; gap: 0; padding-right: 2px; }
.decksheet .deckslots > .deckslot { flex: none; width: var(--w); }
.decksheet .deckslots > .deckslot + .deckslot { margin-left: clamp(-30px, calc((100% - var(--n) * var(--w)) / (var(--n) - 1)), 5px); }
.decksheet .deckslots > .deckslot:not(.empty) { box-shadow: 0 0 0 1.5px #fff, -3px 0 6px rgba(14,17,64,.55); }
.decksheet .deckslots > .deckslot.empty { background: rgba(8,10,40,.55); }
.decksheet .decksheetbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 14px 2px 16px; }
.decksheet .decksheetbody > * { flex: none; }
.decksheet .dkfoot { flex: none; padding: 10px 0 max(14px, var(--sab)); border-top: 1px solid rgba(255,255,255,.1); }
.decksheet .dkfoot .cta { width: 100%; }
.decksheet .dkcollhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.decksheet .dkview { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(8,10,40,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.45); }
.decksheet .dkview button { appearance: none; border: 0; border-radius: 999px; padding: 6px 14px; background: transparent; color: var(--ci-dim, rgba(255,255,255,.72)); font: 700 12px var(--font-body); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.decksheet .dkview button.on { background: var(--brand-skyLight, #4FC3F7); color: #0B0E3A; }
.decksheet .dkhint { margin-top: -6px; font: 600 12px var(--font-body); color: var(--ci-dim, rgba(255,255,255,.72)); }
.decksheet .deckfilter .pill { padding: 6px 14px; font-size: 13px; }
.decksheet .dkgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 8px; }
.decksheet .dkline { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 14px; background: rgba(8,10,40,.35); }
/* v328 (User 2026-10-17: „Hier die Karten platzsparender“): Name und Anzahl links, die Stufen rechts in kleinen Karten – eine Linie je Zeile */
.decksheet .dkline { flex-direction: row; align-items: center; gap: 10px; padding: 8px 10px; }
.decksheet .dkline .dklinehead { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.decksheet .dkline .dklinehead b { font-size: 16px; line-height: 1.05; overflow-wrap: anywhere; }
.decksheet .dkline .dkgrid { flex: none; width: 228px; grid-template-columns: repeat(3, 72px); gap: 6px; }
.decksheet .dkline .dkpick { gap: 3px; } .decksheet .dkline .dkpick .dkstage { font-size: 9.5px; } .decksheet .dkline .dkpick .dkneeds { font-size: 9px; }
.decksheet .dkline .dkpick .dkcheck { top: 3px; right: 3px; width: 16px; height: 16px; background-size: 10px; }
.decksheet .dklinehead { display: flex; align-items: baseline; justify-content: space-between; }
.decksheet .dklinehead b { font: italic 700 18px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.decksheet .dklinehead span { font: 700 12px var(--font-body); color: var(--ci-dim, rgba(255,255,255,.72)); } .decksheet .dklinehead span.on { color: var(--state-active, #01E369); }
.dkpick { appearance: none; border: 0; padding: 0; background: none; color: inherit; display: flex; flex-direction: column; gap: 5px; cursor: pointer; min-width: 0; text-align: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } /* v393 (User 2026-10-19: „Gleicher Bug in der Deck-Konfig bei Adventure“): Halten zoomt, senkrecht wischen scrollt weiter – wie .dktile */
.dkpick .dkimg { position: relative; display: block; aspect-ratio: 600 / 819; border-radius: 6px; overflow: hidden; background: var(--surface-panelRaised); box-shadow: 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.dkpick .dkimg img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.dkpick:active .dkimg { transform: scale(.97); }
.dkpick.sel .dkimg { box-shadow: 0 0 0 2.5px var(--state-active, #01E369), 0 0 12px rgba(1,227,105,.45); }
.dkpick .dkcheck { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--state-active, #01E369) url("./assets/icons/ui/check.svg") center / 13px no-repeat; box-shadow: 0 0 0 1.5px #fff; }
.dkpick.full:not(.sel) .dkimg { opacity: .45; }
.dkpick .dkcap { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15; }
.dkpick .dkstage { font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--acc); }
.dkpick.base { --acc: var(--tier-base); } .dkpick.stage1 { --acc: var(--tier-stage1); } .dkpick.stage2 { --acc: var(--tier-stage2); }
.dkpick .dkneeds { font: 600 10.5px var(--font-body); color: var(--ci-dim, rgba(255,255,255,.72)); }
/* v323 (User 2026-10-17: „Bitte in der Flussphase nicht die Optionsleiste verbergen“): die Flussfrage legt keine Leiste über die Phasenleiste (Ansicht, Ziele, Verlauf bleiben bedienbar).
   Spins und Swaps stehen schon in den Kacheln am Fluss. Am Handy endet der Zug per Wisch; mit Maus schwebt nur „Zug beenden“ rechts über der Phasenleiste. */
.actionbar.advriverq { pointer-events: none; background: none; left: auto; bottom: 48px; min-height: 0; padding: 0 8px; }
.actionbar.advriverq::before, .actionbar.advriverq .atitle, .actionbar.advriverq .tmring { display: none; }
.actionbar.advriverq .ibtn.advend { pointer-events: auto; }
@media (pointer: coarse) { .actionbar.advriverq { visibility: hidden; } }