/* v323: Ränder der Systemleisten. Capacitor 8 (SystemBars, insetsHandling "css") setzt --safe-area-inset-* am <html>, weil Android-WebViews env() oft mit 0 melden;
   ohne diese Variablen lag der untere Rand (z. B. „Fertig“ im Adventure-Konfigurator) unter der Android-Navigationsleiste */
:root { --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)); }
/* PLUSSION App-Hülle – Hochformat, dunkel (v1). Farben nur über theme.css-Variablen. */
html, body { height: 100%; margin: 0; }
body { background: var(--surface-bg); color: var(--surface-ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* kein blaues Tipp-Rechteck (Android-WebView); Knöpfe haben eigenes Druck-Feedback in ihrer Form (User 2026-10-12) */
:focus:not(:focus-visible) { outline: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
.app { height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding-top: var(--sat); padding-bottom: var(--sab); }
/* Markenverlauf (Blueprint: background brand-gradient) auf allen Schirmen außer dem Match */
.app, .app.brand { background: radial-gradient(circle at 50% 30%, var(--brand-indigo) 0%, var(--surface-bg) 75%) fixed; }
.glyph { display: inline-block; width: 22px; height: 22px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.boot { margin: auto; color: var(--surface-muted); }
.screen { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: var(--space-lg); gap: var(--space-lg); }
.display { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; line-height: 1; text-wrap: balance; }
h1.display { font-size: 34px; margin: 0; } h2.display { font-size: 24px; margin: 0; }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--surface-muted); }
.muted { color: var(--surface-muted); }
.stack { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.row { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
/* button (Blueprint): primary = Akzentfläche mit hellem Rand und dunklem Außenring, secondary = Kontur, ghost = Text; Display-Schrift */
.btn { --acc: var(--tier-base); appearance: none; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15px; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; }
.btn.primary { background: var(--acc); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); border-color: var(--surface-strokeLight); box-shadow: 0 0 0 3px var(--surface-strokeDark), var(--shadow-highlight); }
.btn.cta { height: 52px; padding: 0 24px; font-size: 17px; width: 100%; box-shadow: 0 0 0 4px var(--surface-strokeDark), var(--shadow-highlight); }
.btn.secondary { background: transparent; color: var(--acc); border-color: var(--acc); width: 100%; }
.btn.ghost { background: transparent; border-color: transparent; color: var(--acc); width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:focus-visible, .tile:focus-visible, .slotbtn:focus-visible { outline: 2px solid var(--surface-focus); outline-offset: 2px; }
/* menu-tile (Blueprint): Akzent-Verlauf, linker Akzentbalken, Icon in Akzent, Titel Display, Maskottchen rechts */
.tile { --acc: var(--tier-base); appearance: none; position: relative; width: 100%; min-height: 110px; padding: 12px 14px; border-radius: var(--radius-panel); border: 1.5px solid color-mix(in srgb, var(--surface-strokeLight) 13%, transparent); border-left: 4px solid var(--acc); background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 27%, transparent), color-mix(in srgb, var(--surface-panel) 80%, transparent) 60%); color: var(--surface-ink); text-align: left; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; overflow: visible; }
.tile .glyph { width: 28px; height: 28px; color: var(--acc); }
.tile .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile .ttl { font-size: 17px; letter-spacing: .4px; } .tile .sub { font-size: 12px; color: var(--surface-muted); }
.tile.wide { flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; min-height: 96px; } .tile.wide .glyph { width: 36px; height: 36px; } .tile.wide .ttl { font-size: 22px; }
.tile.hero { min-height: 104px; } .tile.hero .ttl { font-size: 28px; }
.tile .mascot { position: absolute; right: 10px; bottom: -4px; height: 118px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); pointer-events: none; }
.tile.withmascot .txt { padding-right: 118px; }
.tile.hero .mascot { height: 112px; right: 6px; bottom: -6px; } .tile.hero.withmascot .txt { padding-right: 112px; } .tile.hero .ttl { font-size: 26px; }
/* Spielmenü (v266): kleiner Freisteller am rechten Rand, ragt leicht über den Knopf hinaus; Text weicht ihm aus */
.tile .mascot.avatar { height: 86px; right: 6px; bottom: -8px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); } .tile.withavatar .txt { padding-right: 92px; } .tile.hero .mascot.avatar { height: 100px; right: 4px; bottom: -10px; } .tile.hero.withavatar .txt { padding-right: 104px; }
.playmodes .tile.wide { overflow: visible; }
.tile.locked { opacity: .55; cursor: default; } .tile .lockmark { position: absolute; top: 10px; right: 12px; width: 14px; height: 14px; color: var(--surface-muted); }
.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .trio .tile { min-height: 124px; padding: 12px 10px; } .trio .ttl { font-size: 17px; }
.rows { display: flex; flex-direction: column; }
.listrow { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--surface-line); background: transparent; color: var(--surface-ink); font: 500 15px var(--font-body); text-align: left; cursor: pointer; }
.listrow .glyph { width: 14px; height: 14px; color: var(--surface-muted); } .listrow .muted { font-size: calc(13px * var(--text-k)); } .listrow:disabled { opacity: .45; cursor: default; }
.tiny { font-size: 11px; }
/* header-bar (Blueprint): Zurück-Glyphe 22 px, Titel Display 20 px oder Wortmarke, Aktion rechts in Stufenfarbe */
.header { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.header h2 { font-size: 20px; letter-spacing: .4px; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header .back, .header .hact { appearance: none; border: 0; background: transparent; width: 36px; height: 36px; display: grid; place-items: center; color: var(--surface-ink); cursor: pointer; padding: 0; border-radius: 50%; }
.header .hact { color: var(--tier-base); } .header .back.hidden { visibility: hidden; }
.header .wordmark { height: 26px; width: auto; display: block; }
.logo { display: block; width: 72%; max-width: 320px; margin: 24px auto 8px; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { font-size: 13px; font-weight: 700; padding: 6px 13px; border-radius: var(--radius-pill); border: 1px solid var(--surface-line); background: var(--surface-panelRaised); }
.pill.base { border-color: var(--tier-base); color: var(--tier-base); } .pill.stage1 { border-color: var(--tier-stage1); color: var(--tier-stage1); } .pill.stage2 { border-color: var(--tier-stage2); color: var(--tier-stage2); }
.pill.on { background: var(--state-active); color: #04140a; border-color: var(--state-active); box-shadow: var(--shadow-highlight); }
.deckcard { min-width: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--surface-line); border-radius: var(--radius-card); background: var(--surface-panel); font-size: 13px; }
.deckcard b { font-weight: 600; grid-column: 1 / -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .deckcard.withimg b { grid-column: 2 / -1; } .deckcard .pill { font-size: 11px; padding: 2px 8px; justify-self: start; grid-column: 1 / -1; } .deckcard.withimg .pill { grid-column: 2 / -1; } .deckcard .muted { grid-column: 1 / -1; font-size: 12px; } .deckcard.withimg .muted { grid-column: 2 / -1; }
.cardlist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; min-height: 0; }
/* Deckauswahl: Kopfzeile fest mit sehr großem Start-Button, Inhalt darunter scrollbar */
.deckscreen .header { flex-wrap: wrap; row-gap: var(--space-sm); flex: none; }
.deckscreen .header h2 { flex: 1; min-width: 0; }
.startbtn { flex-basis: 100%; font-size: 24px; font-weight: 800; padding: 18px 20px; letter-spacing: .02em; box-shadow: 0 6px 24px color-mix(in srgb, var(--tier-base) 45%, transparent); }
.zoomable { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .zoomable img { -webkit-user-drag: none; } /* v395: Halte-Zoom – kein Langdruck-Menü, keine Auswahl, kein Bild-Ziehen (zoom.js guardTouch) */
.scrollbody { overflow-y: auto; overflow-x: hidden; min-height: 0; /* kein seitliches Scrollen: das Key-Art des Hubs ist breiter als der Bildschirm (User 2026-10-06, Android) */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: var(--space-lg); }
/* Startschirm: Logo mittig im freien Raum, Navigation unten */
/* Kommentar-Knopf (claude.ai-Kommentare): unauffällig, nur sichtbar wenn die Fähigkeit vorhanden ist */
.ibtn.comment { color: var(--surface-muted); } .ibtn.comment svg { display: block; } .header .ibtn.comment { margin-left: auto; } .deckscreen .header .ibtn.comment { order: 1; }

/* Match */
.match { padding: 0; gap: 0; }
/* Leisten nach Blueprint match-board: 52 dp, hp-bar Ring + counter-chips, Spielername dazwischen */
.topbar, .ownbar { display: flex; align-items: center; gap: 6px; padding: 0 8px; min-height: 34px; height: 34px; font-size: 12px; white-space: nowrap; overflow: hidden; } /* 40 → 34 px (User 2026-10-06): vertikaler Platz fürs Brett (Fallenplätze, Statuskarten) */
.topbar { border-bottom: 1px solid var(--surface-line); } .ownbar { border-top: 1px solid var(--surface-line); border-bottom: 1px solid var(--surface-line); }
.who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .who.on { color: var(--state-active); } .who-wrap { min-width: 0; text-align: center; overflow: hidden; }
.cchip { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-panelRaised); color: var(--surface-ink); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; flex: 0 0 auto; }
.cchip .glyph { width: 12px; height: 12px; } .cchip .num { font-size: 12px; }
.hpring { position: relative; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; --hpc: var(--hp-full); } .hpring[data-level="mid"] { --hpc: var(--hp-mid); } .hpring[data-level="low"] { --hpc: var(--hp-low); }
.hpring svg { position: absolute; inset: 0; } .hpring .track { fill: none; stroke: var(--hp-track); stroke-width: 5; } .hpring .fill { fill: none; stroke: var(--hpc); stroke-width: 5; transition: stroke-dashoffset var(--motion-slow) var(--motion-ease), stroke var(--motion-slow) var(--motion-ease); }
.hpring .ticks line { stroke: rgba(0,0,0,.45); stroke-width: 1; } .hpring .num { position: relative; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; } .hpring .num.small { font-size: 11px; }
/* phase-chip (Blueprint): Zug-Punkt, Wer, Segmente, Runde */
.phasewrap { position: relative; height: 44px; flex: 0 0 44px; display: flex; align-items: stretch; } /* Phasenleiste (ganz unten, volle Breite) und Bestätigen-Leiste teilen sich eine Zone (User 2026-10-07): die Aktionsleiste deckt die Phasenleiste vollständig ab */
.phasebar { display: flex; align-items: center; gap: 6px; height: 44px; margin: 0; padding: 0 8px; border-radius: 0; border-top: 1px solid var(--surface-line); flex: 1 1 auto; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, var(--surface-bg)); color: var(--surface-ink); font-size: 11px; width: 100%; box-sizing: border-box; }
.phasebar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--state-onTurn); box-shadow: 0 0 6px var(--state-onTurn); flex: 0 0 auto; } .phasebar .dot.off { background: var(--state-disabled); box-shadow: none; }
/* Zugtimer (Entscheidung 2026-10-07-turn-timer, Ring am Punkt): --tm-k = Restanteil; ab 15 s rot und atmend, ab 10 s Sekundenzahl im Ring */
.phasebar .dot.timer, .actionbar .dot.timer { position: relative; width: 18px; height: 18px; background: conic-gradient(var(--state-onTurn) calc(var(--tm-k, 1) * 1turn), rgba(255,255,255,.14) 0); box-shadow: 0 0 8px rgba(255,145,77,.6); display: grid; place-items: center; }
.phasebar .dot.timer::after, .actionbar .dot.timer::after { content: attr(data-s); width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, var(--surface-bg)); display: grid; place-items: center; font: 800 8px var(--font-body); color: #fff; font-variant-numeric: tabular-nums; }
.actionbar .dot.timer { flex: none; align-self: flex-end; margin-bottom: 13px; } .actionbar .dot.timer::after { background: var(--brand-indigoDeep); }
.phasebar .dot.timer.warn, .actionbar .dot.timer.warn { background: conic-gradient(#FF2727 calc(var(--tm-k, 1) * 1turn), rgba(255,255,255,.14) 0); box-shadow: 0 0 10px rgba(255,39,39,.8); animation: tmBreath .9s var(--motion-ease) infinite; }
@keyframes tmBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .actionbar .dot.timer { flex: none; align-self: flex-end; margin-bottom: 13px; } .actionbar .dot.timer::after { background: var(--brand-indigoDeep); }
.phasebar .dot.timer.warn, .actionbar .dot.timer.warn { animation: none; } } .reduce-motion .actionbar .dot.timer { flex: none; align-self: flex-end; margin-bottom: 13px; } .actionbar .dot.timer::after { background: var(--brand-indigoDeep); }
.phasebar .dot.timer.warn, .actionbar .dot.timer.warn { animation: none; }
.phasebar .who { min-width: 28px; font-size: 13px; } .phasebar .segs { display: flex; gap: 2px; flex: 1; justify-content: center; }
.phasebar .seg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; border: 1.5px solid transparent; color: var(--surface-muted); transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .phasebar .seg .glyph { width: 12px; height: 12px; }
.phasebar .seg.on { background: var(--tier-base); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); font-weight: 700; border-color: var(--surface-strokeLight); box-shadow: 0 0 0 2px var(--surface-strokeDark), var(--shadow-highlight); }
.phasebar .round { color: var(--surface-muted); font-variant-numeric: tabular-nums; margin-left: auto; white-space: nowrap; }
/* Ansicht und Ziele in der Phasenleiste (Entscheidung 2026-10-07-view-cycle); die laufende Phase steht im Segment nur als Symbol, der Name kommt als Schärpe */
.phasebar .pbtn { appearance: none; height: 28px; min-width: 28px; padding: 0 7px; border-radius: 999px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 5px; flex: none; cursor: pointer; }
.phasebar .pbtn .glyph { width: 14px; height: 14px; } .phasebar .pbtn .glyph.flip { transform: rotate(180deg); } .phasebar .pbtn.on { background: var(--tier-base); border-color: var(--surface-strokeLight); }
.phasebar .pbtn .pdots { display: inline-flex; flex-direction: column; gap: 2px; } .phasebar .pbtn .pdots i { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.35); } .phasebar .pbtn .pdots i.on { background: #fff; }
.phasebar .seg.on > span:not(.glyph) { display: none; } .phasebar { gap: 5px; } .phasebar .round { font-size: 10px; }
.phasebar .histbtn { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); color: var(--surface-ink); display: grid; place-items: center; padding: 0; cursor: pointer; flex: 0 0 auto; } .phasebar .histbtn .glyph { width: 15px; height: 15px; }
.phasebar.swap .seg.on { animation: phasePop var(--motion-normal) var(--motion-ease) both; }
.boardwrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.boardwrap canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100% !important; height: 100% !important; }
.prompt { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: 10px; background: color-mix(in srgb, var(--surface-panel) 92%, transparent); border: 1px solid var(--surface-line); border-radius: var(--radius-panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.prompt .title { font-weight: 700; } .prompt .sub { font-size: 13px; color: var(--surface-muted); }
.prompt .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.optbtn { appearance: none; border: 1px solid var(--surface-line); background: var(--surface-panelRaised); color: var(--surface-ink); border-radius: 10px; padding: 8px 10px; font-size: 13px; cursor: pointer; text-align: left; }
.optbtn.primary { border-color: var(--tier-base); }
.optbtn:disabled { opacity: .45; cursor: default; }
.hand { display: flex; gap: 6px; padding: 8px 12px; overflow-x: auto; border-top: 1px solid var(--surface-line); min-height: 86px; align-items: stretch; }
/* card-mini (Blueprint): Stufenrahmen 2 px, Kopfband, Name in Display, Bildausschnitt, Fuß mit Blöcken und LP; Breite 64 */
.mini { --tier: var(--tier-base); flex: 0 0 auto; width: 64px; aspect-ratio: 600 / 819; border-radius: var(--radius-chip); border: 2px solid var(--tier); background: var(--surface-panel); display: flex; flex-direction: column; justify-content: space-between; padding: 0 4px 3px; color: var(--surface-ink); font-size: 9px; position: relative; box-shadow: 0 1px 4px rgba(0,0,0,.4); overflow: hidden; }
.mini.base { --tier: var(--tier-base); } .mini.stage1 { --tier: var(--tier-stage1); } .mini.stage2 { --tier: var(--tier-stage2); }
.mini .head { height: 10px; background: var(--tier); margin: 0 -4px; } .mini .nm { font-size: 11px; text-align: center; letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .art { flex: 1; margin: 2px 0; border-radius: 3px; background: rgba(255,255,255,.06) center 20% / cover no-repeat; }
.mini .foot { display: flex; justify-content: space-between; align-items: center; gap: 2px; } .mini .blocks { display: flex; gap: 2px; } .mini .blocks i { width: 7px; height: 7px; border-radius: 2px; display: block; } .mini .mono { font-weight: 700; font-variant-numeric: tabular-nums; }
.mini.rv { width: 40px; aspect-ratio: 600 / 819; border-radius: 6px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; padding: 3px; }
.mini.rv i { display: block; border-radius: 2px; } .mini.rv b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; text-shadow: 0 1px 2px #000; }
.ticker { font-size: 12px; color: var(--surface-muted); padding: 4px 14px; border-top: 1px solid var(--surface-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover { position: fixed; inset: 0; background: var(--surface-bg); display: grid; place-items: center; z-index: 10; padding: 24px; text-align: center; }
.cover .inner { display: flex; flex-direction: column; gap: 14px; align-items: center; max-width: 320px; }
.resultbox-old { margin: auto; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.resultbox-old img { height: 160px; }
.log { font-size: 12px; color: var(--surface-muted); max-height: 160px; overflow: auto; border: 1px solid var(--surface-line); border-radius: var(--radius-card); padding: 8px 10px; width: 100%; text-align: left; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.reduce-motion * { transition: none !important; } /* Einstellung „Bewegung reduzieren: Immer“ */

/* Kartenansicht (Antippen einer Karte) */
.sheet { position: fixed; inset: 0; z-index: 20; background: var(--surface-scrim); display: flex; align-items: flex-end; justify-content: center; }
.sheet .panel { width: 100%; max-width: 520px; max-height: 80%; overflow: auto; background: var(--surface-panel); border: 1px solid var(--surface-line); border-radius: 18px 18px 0 0; padding: 16px 18px calc(16px + var(--sab)); display: flex; flex-direction: column; gap: 10px; }
.sheet .head { display: flex; align-items: baseline; gap: 10px; }
.sheet .head .display { font-size: 26px; }
.sheet .kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.sheet .kv dt { color: var(--surface-muted); } .sheet .kv dd { margin: 0; }
.sheet .blocks { display: flex; gap: 4px; } .sheet .blocks i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.sheet .power { border-left: 3px solid var(--tier-stage1); padding-left: 10px; font-size: calc(14px * var(--text-k)); }
.sheet .spell { border-left: 3px solid var(--tier-base); padding-left: 10px; font-size: calc(14px * var(--text-k)); }
.mini { cursor: pointer; }


.deckcard .thumbwrap { grid-row: 1 / span 4; width: 44px; border-radius: 4px; overflow: hidden; display: block; } .deckcard.withimg { grid-template-columns: 44px minmax(0, 1fr) auto; } .deckcard .thumb { display: block; width: 44px; aspect-ratio: 600 / 819; height: auto; object-fit: contain; border-radius: 4px; }
.sheet .bigwrap { width: 100%; max-width: 360px; align-self: center; border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.6); } .sheet .bigcard { display: block; width: 100%; }

/* Aktionsleiste mit Icon-Buttons */
.actionbar { position: absolute; left: 0; right: 0; bottom: 0; height: auto; min-height: 44px; padding: 0 8px 3px; display: flex; flex-direction: row; align-items: flex-end; gap: 8px; box-sizing: border-box; z-index: 6; overflow: visible; } /* Knöpfe in Normalgröße liegen über der Phasenleiste und ragen nach oben in den Handbereich (User 2026-10-07) */
.actionbar::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: var(--brand-indigoDeep); border-top: 1px solid var(--surface-line); z-index: -1; } /* deckende Fläche: nichts von der Phasenleiste scheint durch */
.actionbar .atitle { align-self: center; }
.actionbar.idle { visibility: hidden; animation: none; }
.atitle { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--surface-muted); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 96px; line-height: 1.2; }
.arow { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px; flex: 1; align-items: center; }
/* action-button (Blueprint, r-0024): Farbe je Aktion, Icon und Schrift weiß, Lichtpunkt oben, feiner weißer Innenrand; empfohlen = highlight (weißer Ring + Glow) */
.ibtn { --k: var(--tier-base); appearance: none; flex: 0 0 auto; min-width: 64px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 9px 6px; border-radius: 14px; border: 0; color: #fff; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--k) 70%, white) 0%, var(--k) 55%, color-mix(in srgb, var(--k) 75%, var(--surface-bg)) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--k) 45%, transparent), inset 0 0 0 1.5px rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.18); }
.ibtn .ico { width: 26px; height: 26px; display: block; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.ibtn .lbl { font-size: 11px; font-weight: 800; letter-spacing: .01em; } .ibtn .sub { font-size: 11px; font-weight: 600; opacity: .9; max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibtn.primary { box-shadow: 0 0 0 2px var(--surface-bg), var(--shadow-highlight), 0 6px 18px color-mix(in srgb, var(--k) 55%, transparent), inset 0 0 0 1.5px rgba(255,255,255,.55); }
.ibtn.on { box-shadow: var(--shadow-highlight), 0 6px 18px color-mix(in srgb, var(--k) 55%, transparent); }
.ibtn.pressed, .ibtn.primary.pressed { transform: scale(.95); }
.ibtn:disabled { opacity: .45; filter: saturate(.35); cursor: default; box-shadow: none; }
.ibtn.small { flex-direction: row; min-width: 0; padding: 6px 12px; gap: 6px; border-radius: 999px; } .ibtn.small .ico, .ibtn.small svg { width: 18px; height: 18px; }
.ibtn.round { min-width: 0; width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; } .ibtn.round .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .ibtn.round .ico { width: 26px; height: 26px; }
.ibtn[data-k="ok"], .ibtn[data-k="place"] { --k: #12C65A; }
.ibtn[data-k="no"], .ibtn[data-k="skip"], .ibtn[data-k="pass"], .ibtn[data-k="back"], .ibtn[data-k="comment"] { --k: #5B6CFF; }
.ibtn[data-k="attack"] { --k: #FF5A36; } .ibtn[data-k="sub"] { --k: #FF8A00; }
.ibtn[data-k="flip"] { --k: #9D5CFF; } .ibtn[data-k="pull"], .ibtn[data-k="suggest"] { --k: #F2B400; }
.ibtn[data-k="retreat"] { --k: #0082FF; } .ibtn[data-k="evolve"], .ibtn[data-k="card"], .ibtn[data-k="next"] { --k: #00ADE2; }
.ibtn[data-k="meta"] { --k: #E63FC4; } .ibtn[data-k="heal"] { --k: #16B88A; } .ibtn[data-k="xp"] { --k: #F29A2E; }
.ibtn[data-k^="rfx-"] { --k: #E63FC4; } .ibtn[data-k="rfx-heal"] { --k: #16B88A; } .ibtn[data-k="rfx-xp"] { --k: #F29A2E; } /* River-Effekte (Masters): Effekt-Karten-Magenta, Heilen und XP wie bisher */
.ibtn.comment { color: #fff; }
.chip { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--state-targeted); color: var(--state-targeted); text-transform: none; letter-spacing: 0; }
.chip.ok { border-color: var(--state-active); color: var(--state-active); }
.ticker { display: flex; align-items: center; gap: 8px; }
.mini.sel { box-shadow: var(--shadow-highlight); } .mini.on { box-shadow: var(--shadow-highlight); transform: translateY(-8px); }
.mini.rv.effect { border-color: var(--state-onTurn); }
.hand { min-height: 96px; }

/* Bewegung (docs/design/MOTION.md): Ease-in-out überall, 300–400 ms; Fade an Navigationsanfang/-ende, Slide zwischen Menüebenen */
.app { position: relative; overflow: hidden; }
.screen { animation: fadeIn var(--motion-normal) var(--motion-ease) both; }
.screen.enter-left { animation: slideInLeft var(--motion-normal) var(--motion-ease) both; }
.screen.enter-right { animation: slideInRight var(--motion-normal) var(--motion-ease) both; }
.screen.leave { position: absolute; inset: 0; pointer-events: none; }
.screen.leave-left { animation: slideOutLeft var(--motion-normal) var(--motion-ease) both; }
.screen.leave-right { animation: slideOutRight var(--motion-normal) var(--motion-ease) both; }
.screen.leave-fade { animation: fadeOut var(--motion-normal) var(--motion-ease) both; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } } @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
@keyframes slideInLeft { from { transform: translateX(100%); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes slideInRight { from { transform: translateX(-100%); opacity: .6 } to { transform: none; opacity: 1 } }
@keyframes slideOutLeft { from { transform: none; opacity: 1 } to { transform: translateX(-100%); opacity: .6 } }
@keyframes slideOutRight { from { transform: none; opacity: 1 } to { transform: translateX(100%); opacity: .6 } }
.blackout { position: fixed; inset: 0; background: var(--surface-bg); z-index: 50; opacity: 0; pointer-events: none; transition: opacity var(--motion-slow) var(--motion-ease); }
.blackout.on { opacity: 1; pointer-events: auto; }
.btn, .tile, .ibtn, .pill, .mini, .tab, .tog { transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), outline-color var(--motion-fast) var(--motion-ease); }
.pressed:not(:disabled) { transform: scale(.96); }
.actionbar { animation: riseIn var(--motion-normal) var(--motion-ease) both; } .actionbar.out { animation: dropOut var(--motion-fast) var(--motion-ease) both; pointer-events: none; } @keyframes dropOut { from { opacity: 1; transform: none } to { opacity: 0; transform: translateY(12px) } }
.arow .ibtn { animation: riseIn var(--motion-normal) var(--motion-ease) both; } .arow .ibtn:nth-child(2) { animation-delay: 40ms; } .arow .ibtn:nth-child(3) { animation-delay: 80ms; } .arow .ibtn:nth-child(n+4) { animation-delay: 120ms; } @keyframes riseIn { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.sheet { animation: fadeIn var(--motion-normal) var(--motion-ease) both; } .sheet .panel { animation: slideUp var(--motion-normal) var(--motion-ease) both; } .sheet.closing { animation: fadeOut var(--motion-normal) var(--motion-ease) both; pointer-events: none; } .sheet.closing .panel { animation: slideDown var(--motion-normal) var(--motion-ease) both; }
@keyframes slideUp { from { transform: translateY(100%) } to { transform: none } } @keyframes slideDown { from { transform: none } to { transform: translateY(100%) } }
.num { display: inline-block; transition: color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); font-variant-numeric: tabular-nums; } .num.down { color: var(--state-targeted); transform: scale(1.15); } .num.up { color: var(--state-active); transform: scale(1.15); }
.phasechip.swap { animation: phasePop var(--motion-normal) var(--motion-ease) both; } @keyframes phasePop { 0% { transform: scale(.85); opacity: .5 } 100% { transform: none; opacity: 1 } }
.cover { animation: fadeIn var(--motion-normal) var(--motion-ease) both; }
.hand .mini { animation: riseIn var(--motion-fast) var(--motion-ease) backwards; } /* backwards: nach dem Einstieg darf der Fächer die Transformation setzen */
.reduce-motion :is(.screen, .actionbar, .sheet, .sheet .panel, .cover, .hand .mini) { animation-duration: 0s !important; }
@media (prefers-reduced-motion: reduce) { .screen, .actionbar, .sheet, .sheet .panel, .cover, .hand .mini { animation-duration: 0s !important; } .blackout { transition-duration: 0s; } }
.actionbar.passive .ibtn { pointer-events: none; } .actionbar.passive .ibtn.on { border-color: var(--state-onTurn); box-shadow: inset 0 0 0 1px var(--state-onTurn); }
.actionbar.passive .mini.rv { width: 40px; aspect-ratio: 600 / 819; }

/* result-banner (Blueprint): Ausgang in Akzent, radialer Schein, Kennzahlen, Maskottchen oben rechts */
.banner { --acc: var(--tier-base); position: relative; width: 100%; padding: 22px 16px; margin-top: 48px; border-radius: var(--radius-panel); background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--acc) 40%, transparent), var(--surface-panel) 70%); border: 1px solid color-mix(in srgb, var(--acc) 53%, transparent); text-align: center; color: var(--surface-ink); display: flex; flex-direction: column; gap: 12px; align-items: center; }
/* v406 (User 2026-10-20, Screenshot: Revanche-Knopf zur Linie gestaucht, „Zum Start“ unter der Navigationsleiste): Ergebnis scrollt, nichts schrumpft */
.resultscreen { overflow-y: auto; overflow-x: hidden; padding-bottom: calc(var(--space-lg) + 28px); } .resultscreen > * { flex-shrink: 0; }
.banner .big { font-size: 40px; color: var(--acc); line-height: 1; letter-spacing: 1px; }
.banner .stats { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: var(--surface-muted); } .banner .stats .mono { font-size: 20px; color: var(--surface-ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.banner .mascot { position: absolute; right: -6px; top: -54px; height: 96px; width: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.5)); }
.deckrow { --acc: var(--tier-base); display: flex; gap: 10px; align-items: center; width: 100%; padding: 8px; border-radius: var(--radius-panel); background: var(--surface-panel); border: 1.5px solid var(--state-active); color: var(--surface-ink); }
.deckrow .thumbbox { width: 44px; aspect-ratio: 600 / 819; border-radius: 6px; border: 2px solid var(--acc); background: url("./assets/cards/back.webp") center / cover; flex: 0 0 auto; }
.deckrow .display { font-size: 16px; }
.log { font-size: 12px; color: var(--surface-muted); } .log summary { cursor: pointer; }
.cover { background: radial-gradient(circle at 50% 35%, var(--brand-indigo) 0%, var(--brand-bgEdge) 100%); }
.pressed:not(:disabled) { transform: scale(.96); }
.btn, .tile, .listrow, .pill { transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease); }

/* Schwebender Weiter-Knopf am Brett (ersetzt den Debug-Ticker), Kommentar in der Kopfleiste */
.extrabar { display: flex; gap: 4px; }
.ticker { height: 22px; font-size: 11px; padding: 2px 10px; }
.hand { padding: 6px 8px; min-height: 100px; border-top: 0; }

/* Halte-Zoom */
.zoomlayer { position: fixed; inset: 0; pointer-events: none; z-index: 70; } /* über Tutorial (61–63) und Vollbild-Ebenen (60) */
.zoomlayer .scrim { position: absolute; inset: 0; background: rgba(5,6,30,0); transition: background var(--motion-normal) var(--motion-ease); } .zoomlayer.on .scrim { background: rgba(5,6,30,.7); }
.zoomlayer .zoomimg { position: absolute; box-shadow: 0 20px 60px rgba(0,0,0,.6); transition-property: left, top, width, height, border-radius; transition-timing-function: var(--motion-ease); transition-duration: var(--motion-normal); will-change: left, top, width, height; }

/* Hand: Fächer (Standard) oder Fokus-Karussell + RV-Münzen; Band 120 px */
.hand { display: flex; flex-direction: column; gap: 0; padding: 0 8px 4px; min-height: 120px; height: 120px; overflow: visible; }
.hand .cards { position: relative; height: 86px; flex: 0 0 86px; }
.hand.fan .cards .mini { position: absolute; left: 50%; bottom: -6px; transform-origin: 50% 170%; transition: transform var(--motion-normal) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); will-change: transform; }
.hand.fan .cards .mini.focus { box-shadow: var(--shadow-highlight); }
.hand.caro .cards { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px calc(50% - 32px) 0; scrollbar-width: none; height: 94px; flex-basis: 94px; } .hand.caro .cards::-webkit-scrollbar { display: none; }
.hand.caro .cards .mini { scroll-snap-align: center; transform: scale(.82); transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } /* v293: Nachbarkarten nicht mehr durchscheinend (wirkten dunkel) */
.hand.caro .cards .mini.focus { transform: scale(1); box-shadow: var(--shadow-highlight); }
.hand .mini.on { transform: translateY(-8px); }
.hand .coins { display: flex; gap: 6px; align-items: center; height: 34px; padding: 2px 0 0; overflow-x: auto; scrollbar-width: none; }
.coin { appearance: none; border: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: default; box-shadow: inset 0 0 0 3px var(--surface-bg), 0 2px 6px rgba(0,0,0,.4); flex: 0 0 auto; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.coin span { background: var(--surface-bg); color: #fff; border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center; font: 800 10px var(--font-body); font-variant-numeric: tabular-nums; }
.coin.sel { cursor: pointer; box-shadow: inset 0 0 0 3px var(--surface-bg), 0 0 0 2px rgba(255,255,255,.6); } .coin.on { box-shadow: inset 0 0 0 3px var(--surface-bg), var(--shadow-highlight); transform: translateY(-3px); } .coin.effect { box-shadow: inset 0 0 0 3px var(--surface-bg), 0 0 0 2px var(--state-onTurn); }
.cchip.tog { appearance: none; border: 0; cursor: pointer; color: var(--surface-ink); }
.hand .mini.noanim { transition: none !important; }

/* Glanz für alle HTML-Karten: Lichtfleck (soft-light) + Glanzband (overlay), beide folgen der gemeinsamen Lichtquelle --lx/--ly (shine.js) */
.shine { position: relative; isolation: isolate; }
.shine::before, .shine::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; }
.shine::before { background: radial-gradient(circle at var(--lx, 30%) var(--ly, 25%), rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,0) 48%); mix-blend-mode: soft-light; }
.shine::after { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.22) 46%, rgba(255,255,255,.45) 50%, rgba(255,255,255,.22) 54%, transparent 62%); background-size: 260% 260%; background-position: calc(100% - var(--lx, 30%)) calc(100% - var(--ly, 25%)); mix-blend-mode: overlay; }
/* Halte-Zoom: Karte kippt mit dem Finger, Glanz folgt dem Kippwinkel */
.zoomcard { position: absolute; border-radius: 14px; overflow: hidden; background: var(--brand-indigoDeep); box-shadow: 0 20px 60px rgba(0,0,0,.6); transition-property: left, top, width, height, border-radius; /* transform setzt die Kipp-Schleife je Frame */ transition-timing-function: var(--motion-ease); transition-duration: var(--motion-normal); will-change: left, top, width, height, transform; transform-style: preserve-3d; }
.zoomcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zoomcard .gloss, .zoomcard .glare { position: absolute; inset: 0; pointer-events: none; }
.zoomcard .gloss { background: radial-gradient(circle at var(--px, 50%) var(--py, 50%), rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,0) 48%); mix-blend-mode: soft-light; }
.zoomcard .glare { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 46%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.28) 54%, transparent 62%); background-size: 220% 220%; background-position: var(--gx, 50%) var(--gy, 50%); mix-blend-mode: overlay; }
.zoomlayer { perspective: 1100px; }
.zoomlayer.pinned { pointer-events: auto; cursor: zoom-out; } .zoomlayer.pinned .zthumb { cursor: pointer; } /* Rechtsklick-Zoom (Desktop): angeheftet, Klick schließt */
/* Zoom mit Status-Karten und Sub-Angriffen (Entscheidung 2026-10-08-zoom-extras, Variante A): Beschriftung und Vorschauleiste zum Blättern */
.zoomcap, .zoomthumbs { opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease); } .zoomlayer.on .zoomcap, .zoomlayer.on .zoomthumbs { opacity: 1; }
.zoomcap { position: absolute; left: 16px; right: 16px; text-align: center; color: #fff; font: 600 14px/1.3 var(--font-body); text-shadow: 0 1px 6px rgba(5,6,30,.8); }
.zoomcap b { font: italic 700 15px var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--brand-skyLight); margin-right: 8px; }
.zoomcap small { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.7); }
.zoomthumbs { position: absolute; left: 50%; bottom: max(14px, var(--sab)); transform: translateX(-50%); display: flex; gap: 8px; padding: 7px 9px; border-radius: 14px; background: color-mix(in srgb, var(--brand-indigoDeep) 82%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,.16); }
.zthumb { width: 34px; height: 46px; border-radius: 5px; overflow: hidden; opacity: .5; box-shadow: 0 0 0 1.5px rgba(255,255,255,.3); transition: opacity 160ms var(--motion-ease), transform 160ms var(--motion-ease), box-shadow 160ms var(--motion-ease); }
.zthumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.zthumb.on { opacity: 1; transform: translateY(-4px) scale(1.08); box-shadow: 0 0 0 2px #fff, 0 0 14px color-mix(in srgb, var(--brand-sky) 70%, transparent); }
.zthumb.status { box-shadow: 0 0 0 1.5px #B46CFF; } .zthumb.sub { box-shadow: 0 0 0 1.5px #FFBD59; }

/* Kartenansicht (Blueprint card-viewer) */
.viewer { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; gap: 10px; padding: calc(var(--sat) + 8px) 12px calc(var(--sab) + 14px); background: radial-gradient(circle at 50% 30%, var(--brand-indigo) 0%, var(--surface-bg) 75%); animation: riseIn var(--motion-normal) var(--motion-ease) both; overflow: hidden; }
.viewer.closing { animation: dropOut var(--motion-normal) var(--motion-ease) both; pointer-events: none; }
.viewer.above { z-index: 68; } /* v365: aus dem Booster-Blatt (.packov, 65) geöffnet; der Halte-Zoom (70) bleibt darüber */
.viewer .header { flex: 0 0 auto; }
.viewer .seg { display: inline-flex; background: var(--surface-panelRaised); border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto; }
.viewer .seg button { --acc: var(--tier-base); appearance: none; border: 2px solid var(--acc); background: transparent; color: var(--acc); font: italic 700 12px var(--font-display); letter-spacing: .5px; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); }
.viewer .seg button.on { background: var(--acc); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); border-color: var(--surface-strokeLight); box-shadow: 0 0 0 2px var(--surface-strokeDark), var(--shadow-highlight); }
.vstage { position: relative; flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .vstage img { -webkit-user-drag: none; pointer-events: none; }
.vstage > * { grid-area: 1 / 1; }
/* Blätterpfeile der Kartenansicht (Desktop-Steuerung v183): nur mit Maus sichtbar, mittig an den Seiten */
.vnav { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--surface-panelRaised) 70%, transparent); color: var(--surface-ink); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.vnav .glyph { width: 18px; height: 18px; } .vnav.prev { left: 16px; } .vnav.next { right: 16px; } .vnav:disabled { opacity: .25; cursor: default; } .vnav[hidden] { display: none; }
@media (hover: none), (pointer: coarse) { .vnav { display: none; } }
.vcard { width: min(100cqw, 100cqh * 600 / 820); height: auto; aspect-ratio: 600 / 820; border-radius: 14px; overflow: hidden; touch-action: none; will-change: transform; /* v365: Finger neigt die Karte, kein Scrollen auf der Karte */ box-shadow: 0 16px 40px rgba(0,0,0,.55); }
.vcard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vcard { position: relative; } /* Karten-Renderer: gezeichnete Karte liegt über dem Druckbild (Zoom und Ansicht, r-0055) */
.vcard .cardface-layer, .zoomcard .cardface-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: opacity var(--motion-fast) var(--motion-ease); }
.zoomcard.holo .gloss, .zoomcard.holo .glare, .vcard.holo::before, .vcard.holo::after { display: none; } /* Holo-Fassungen (holo.js, v264) bringen Glanz und Glanzlicht selbst mit */
.vtext { width: min(100%, 380px); max-height: 100%; overflow: auto; background: var(--surface-panel); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; color: var(--surface-ink); box-shadow: 0 16px 40px rgba(0,0,0,.45); }
.vtext .vhead { display: flex; align-items: baseline; gap: 8px; } .vtext .vhead .display { font-size: 24px; } .vtext .mono { font-variant-numeric: tabular-nums; font-weight: 700; }
.vtext .vblocks { display: flex; gap: 4px; } .vtext .vblocks i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.vtext .power { border-left: 3px solid var(--tier-stage1); padding-left: 10px; font-size: calc(14px * var(--text-k)); } .vtext .spell { border-left: 3px solid var(--tier-base); padding-left: 10px; font-size: calc(14px * var(--text-k)); }
.in-left { animation: slideInLeft var(--motion-normal) var(--motion-ease) both; } .in-right { animation: slideInRight var(--motion-normal) var(--motion-ease) both; }
.out-left { animation: slideOutLeft var(--motion-normal) var(--motion-ease) both; } .out-right { animation: slideOutRight var(--motion-normal) var(--motion-ease) both; }
.chain { display: flex; justify-content: center; gap: 10px; flex: 0 0 auto; }
.chain .link { --tier: var(--tier-base); appearance: none; position: relative; width: 52px; aspect-ratio: 600 / 820; border-radius: 6px; border: 2px solid var(--tier); background: var(--surface-panel) center top / cover no-repeat; cursor: pointer; padding: 0; overflow: hidden; opacity: .7; transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.chain .link.stage1 { --tier: var(--tier-stage1); } .chain .link.stage2 { --tier: var(--tier-stage2); }
.chain .link span { position: absolute; left: 0; right: 0; bottom: 0; font: 700 10px var(--font-body); color: #fff; background: rgba(14,17,64,.75); padding: 2px 0; text-align: center; }
.chain .link.on { opacity: 1; transform: translateY(-4px); box-shadow: var(--shadow-highlight); }
.vinfo { display: flex; justify-content: center; align-items: center; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; min-height: 22px; }
/* v341 (r-0096 B): Anzahl und Chancen als Chips unter der Stufenkette – Anzahl dunkel, Super-Holo im Holo-Verlauf, Eclipse schwarz mit Goldrand */
.ochip { display: inline-flex; gap: 5px; height: 28px; padding: 0 11px; box-sizing: border-box; align-items: center; border-radius: 999px; font: italic 800 15px/1 var(--font-display); color: #fff; background: #12153F; box-shadow: 0 0 0 1.5px rgba(255,255,255,.8) inset; white-space: nowrap; }
.ochip b { font: inherit; } .ochip small { font: 700 11px var(--font-body); opacity: .85; }
.ochip.sh { background: linear-gradient(110deg, #ff6ad5, #a46bff 30%, #6af0ff 60%, #ffd23f); color: #1C1340; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9) inset; }
.ochip.ec { background: #050510; color: #FFD23F; box-shadow: 0 0 0 1.5px #FFD23F inset; } .vinfo .pager { font-size: 12px; font-variant-numeric: tabular-nums; }
.vtext .mk { color: var(--tier-base); font-weight: 700; } .vtext .mk-status { color: var(--state-onTurn); }

/* Fächer: Gesten gehören der Hand (Wischen, Ziehen), nicht dem Browser */
.hand .cards { touch-action: none; user-select: none; -webkit-user-select: none; }
.hand .mini.dragging { opacity: .35; }
.dragghost { position: fixed; z-index: 70; pointer-events: none; margin: 0; box-shadow: var(--shadow-highlight), 0 14px 30px rgba(0,0,0,.5); transform-origin: 50% 50%; }

/* Hand-Bereich (Fix 2026-10-04): RV-Reihe oben, Fächer darunter in eigenem Bereich; Aktionsleiste liegt immer über der Hand */

.hand { position: relative; z-index: 2; height: 150px; min-height: 150px; padding: 0 8px 2px; display: flex; flex-direction: column; overflow: hidden; }
.hand .coinrow { display: flex; align-items: center; gap: 8px; height: 40px; flex: 0 0 40px; }
.hand .coinlabel { font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--surface-muted); flex: 0 0 auto; }
.hand .coins { display: flex; gap: 6px; align-items: center; flex: 1; min-width: 0; height: 40px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
.hand .coinsum { font: 800 12px var(--font-body); font-variant-numeric: tabular-nums; color: var(--surface-ink); flex: 0 0 auto; }
.hand.nocoins .coinsum { color: var(--surface-muted); font-weight: 600; }
.hand .coin { width: 34px; height: 34px; } .hand .coin span { width: 23px; height: 23px; font-size: 10px; }
.hand .cards { position: relative; flex: 1 1 auto; height: auto; min-height: 0; }
.hand.fan .cards .mini { bottom: 2px; transform-origin: 50% 190%; }

/* Hand ohne Neuaufbau (2026-10-04): bekannte Karten steigen nicht erneut ein; beim Wischen folgt der Fächer dem Finger ohne Übergang */
.hand .mini.seen { animation: none; }
.hand.fan .cards.live .mini { transition: none !important; }

/* Einstellungen: Spielgeschwindigkeit als vier Pills unter der Zeile */
.speedpills { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 10px 12px 16px; }
.speedpills.two { grid-template-columns: repeat(2, 1fr); }
/* Einstellungs-Pillen (User 2026-10-06: CI wie .btn): Akzentrand, Display-Font, gewählt gefüllt wie .btn.primary */
.chips .pill, .speedpills .pill, .pills .pill { --acc: var(--tier-base); height: 40px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 10px; border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; box-sizing: border-box; cursor: pointer; }
.chips .pill.on, .speedpills .pill.on, .pills .pill.on { background: var(--acc); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); border-color: var(--surface-strokeLight); box-shadow: 0 0 0 3px var(--surface-strokeDark), var(--shadow-highlight); }
.chips .pill:active, .speedpills .pill:active, .pills .pill:active { transform: scale(.97); }
.listrow.static { cursor: default; } .listrow.static .glyph { display: none; }
.listrow > .grow { flex: 1 0 auto; } .listrow > .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Titel bricht nicht um, langer Wert (Version) wird gekürzt (360 px, v160) */
.listrow.linkrow { text-decoration: none; box-sizing: border-box; } .listrow .rowicon { width: 20px; height: 20px; flex: none; } /* Discord-Community (v160) */

/* Effekt-Ebene (fx.js): HTML über dem Brett bzw. über der Vorschau-Bühne in den Einstellungen */
.fxlayer { pointer-events: none; }
.fxlayer .fxcanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.fxlayer .fxel { position: absolute; pointer-events: none; }
.fxlayer .fxslot { position: absolute; perspective: 700px; z-index: 10; }
.fxlayer .fxcard { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; box-shadow: 0 6px 18px rgba(8,10,40,.55); transform-style: preserve-3d; }
.fxlayer .fxcard img, .fxlayer .fxriver img, .fxlayer .fxghost img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.fxlayer .fxflash { position: absolute; inset: 0; background: #fff; opacity: 0; mix-blend-mode: screen; }
.fxlayer .fxholo { position: absolute; inset: 0; opacity: 0; mix-blend-mode: color-dodge; background: linear-gradient(115deg, #ff4dd8 0%, #ffe84d 20%, #4dffb8 40%, #4dc3ff 60%, #b84dff 80%, #ff4dd8 100%); background-size: 300% 300%; }
.fxlayer .fxghost { position: absolute; inset: 0; border-radius: 6px; overflow: hidden; opacity: 0; }
.fxlayer .fxriver { border-radius: 5px; overflow: hidden; box-shadow: 0 3px 10px rgba(8,10,40,.5); }
.fxlayer .fxbadge { position: absolute; left: 50%; top: -14%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--tier-stage1, #FF914D); color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 13px; letter-spacing: .05em; white-space: nowrap; box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(255,145,77,.8); opacity: 0; z-index: 5; text-shadow: 0 1px 2px rgba(14,17,64,.4); }
.fxlayer .fxword { position: absolute; text-align: center; font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: .04em; white-space: nowrap; pointer-events: none; }
.fxlayer .fxword span { display: inline-block; opacity: 0; background: linear-gradient(180deg, #FFFC00, #FF7300); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1.5px rgba(14,17,64,.85); filter: drop-shadow(0 0 10px var(--mc, rgba(255,210,63,.75))); }
.fxlayer .fxstamp { position: absolute; padding: 2px 16px 4px; border: 4px solid #fff; border-radius: 10px; font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: .06em; color: #fff; opacity: 0; white-space: nowrap; text-shadow: 0 2px 0 rgba(14,17,64,.35); }
.matchfx { position: fixed; z-index: 4; overflow: visible; }

/* Einstellungen: Effekte je Profil mit Vorschau-Bühne */
.settingsbody { gap: 6px; padding-bottom: 24px; }
.fxblock { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 6px; border-top: 1px solid var(--surface-line); }
.fxwho { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .fxwho .pill { justify-content: center; }
.fxcat { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.fxcattitle { font-family: var(--font-display); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: .03em; }
.fxpills { display: flex; flex-wrap: wrap; gap: 6px; }
.fxpills .pill.on, .fxwho .pill.on { color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); }
.fxstage { position: relative; height: 170px; border-radius: 14px; overflow: hidden; cursor: pointer; background: radial-gradient(90% 80% at 50% 45%, var(--brand-cardBackBlue) 0%, #1B1F7A 60%, #12155A 100%); border: 1px solid var(--surface-line); }
.fxstage.river { height: 150px; }
.fxstage .fxrest { position: absolute; left: 50%; top: 50%; height: 74%; aspect-ratio: 600 / 819; transform: translate(-50%, -50%); border-radius: 6px; box-shadow: 0 6px 18px rgba(8,10,40,.55); }
.fxstage .fxrest.rc { transform: none; border-radius: 5px; height: auto; }
.fxstage .fxinner { position: absolute; inset: 0; z-index: 10; } /* über den River-Karten der Vorschau (Farbblöcke liegen über den echten Karten) */
.fxstage .fxriverlab { position: absolute; top: 50%; transform: translateY(-50%); font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--surface-muted); padding: 3px 8px; border-radius: 8px; background: rgba(8,10,40,.45); } .fxstage .fxriverlab.l { left: 8px; } .fxstage .fxriverlab.r { right: 8px; }

/* Große Angriffswahl (2026-10-04): ersetzt Aktionsleiste und Hand, solange der Spieler seinen Angriff wählt */
.screen.match { position: relative; }
.hand { transition: opacity var(--motion-normal) var(--motion-ease), transform var(--motion-normal) var(--motion-ease); }
.hand.away { opacity: 0; transform: translateY(24px); pointer-events: none; }
.atkpanel { position: absolute; left: 0; right: 0; bottom: 40px; height: 214px; z-index: 8; display: flex; flex-direction: column; gap: 6px; padding: 8px 0 8px; box-sizing: border-box; background: linear-gradient(180deg, rgba(35,36,130,.0) 0%, rgba(35,36,130,.92) 14%, var(--brand-indigoDeep) 100%); animation: riseIn var(--motion-normal) var(--motion-ease) both; }
.atkpanel.out { animation: dropOut var(--motion-fast) var(--motion-ease) both; pointer-events: none; }
.atkhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; }
.atkwho { display: flex; flex-direction: column; min-width: 0; }
.atkeyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-skyLight); }
.atkname { font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atkpass { flex: none; height: 44px; min-height: 44px; }
.atktrack { flex: 1; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 12px 4px; scrollbar-width: none; }
.atktrack::-webkit-scrollbar { display: none; }
.atktrack.single { justify-content: center; }
.atkcard { appearance: none; flex: 0 0 min(86%, 360px); scroll-snap-align: center; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; border-radius: 16px; border: 2px solid var(--brand-sky); background: linear-gradient(160deg, var(--brand-cardBackBlue) 0%, var(--brand-indigoDeep) 100%); color: #fff; font: inherit; cursor: pointer; box-shadow: var(--shadow-highlight); position: relative; overflow: hidden; }
.atkcard.sub { border-color: var(--tier-stage1); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 0 18px rgba(255,145,77,.55); }
.atkcard.short { box-shadow: none; cursor: default; border-color: rgba(189,245,255,.35); } .atkcard.short .atkspell, .atkcard.short .atkcost { opacity: .6; }
.atktop { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.atktype { padding: 2px 8px; border-radius: 999px; background: var(--brand-sky); color: #fff; } .atkcard.sub .atktype { background: var(--tier-stage1); }
.atktarget { color: var(--brand-skyLight); align-self: center; }
.atkmid { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.atkspell { font-size: 26px; line-height: 1; min-width: 0; }
.atkcost { flex: none; display: flex; align-items: baseline; gap: 3px; padding: 4px 10px; border-radius: 12px; background: linear-gradient(180deg, #FFBD59, #FF914D); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.atkcost b { font-family: var(--font-display); font-style: italic; font-size: 22px; } .atkcost span { font-size: 11px; font-weight: 800; }
.atktext { font-size: calc(14px * var(--text-k)); line-height: 1.35; color: #E8ECFF; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.atkshort { font-size: 11px; font-weight: 800; color: #fff; background: var(--state-targeted); padding: 2px 8px; border-radius: 999px; letter-spacing: .04em; }
.atkdots { display: flex; justify-content: center; gap: 6px; } .atkdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(189,245,255,.35); } .atkdots i.on { background: #fff; box-shadow: 0 0 6px #fff; }

/* Hand ohne Rahmen, mit Kategorien (2026-10-04): Originalbilder; Leiste mit Häkchen je Kartenart statt Münzreihe */
.hand .handbar { display: flex; align-items: center; gap: 6px; height: 40px; flex: 0 0 40px; overflow-x: auto; scrollbar-width: none; }
.hcat { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 7px; border-radius: 999px; border: 1px solid var(--surface-line); background: rgba(35,36,130,.6); color: var(--surface-muted); font: 700 12px var(--font-body); cursor: pointer; white-space: nowrap; }
.hcat .hbox { width: 16px; height: 16px; border-radius: 4px; border: 2px solid currentColor; box-sizing: border-box; display: grid; place-items: center; }
.hcat.on { color: #fff; background: var(--brand-cardBackBlue); border-color: rgba(255,255,255,.55); }
.hcat.on .hbox { background: #fff; border-color: #fff; } .hcat.on .hbox::after { content: ""; width: 8px; height: 4px; border-left: 2.5px solid var(--brand-cardBackBlue); border-bottom: 2.5px solid var(--brand-cardBackBlue); transform: translateY(-1px) rotate(-45deg); }
.hcat.forced { opacity: .8; cursor: default; }
.hcat .hcount { font-variant-numeric: tabular-nums; padding: 0 6px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 11px; }
.hcat .hextra { font-variant-numeric: tabular-nums; color: var(--brand-skyLight); font-size: 11px; }
.hand .mini.card { border: 0; padding: 0; background: none; border-radius: 5px; overflow: hidden; box-shadow: 0 3px 10px rgba(8,10,40,.55); }
.hand .mini.card img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.hand .mini.card.sel { box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 0 12px rgba(47,180,255,.75); }
.hand .mini.card.on { box-shadow: var(--shadow-highlight); }
.hand .mini.card.river.on { box-shadow: 0 0 0 3px #fff, 0 0 16px 3px rgba(0,227,105,.9); }
.hand .mini.card.effect { box-shadow: 0 0 0 2px var(--state-onTurn), 0 0 12px rgba(255,145,77,.8); }

/* Einblendungen (announce.js): Angriffe und Statuseffekte; Format „card“ (Standard bis r-0030) und „sash“ */
.ann { position: absolute; z-index: 60; pointer-events: none; color: #fff; }
.ann-card { left: 50%; top: 50%; width: min(78%, 360px); display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; border-radius: 16px; border: 2px solid var(--brand-sky); background: linear-gradient(160deg, var(--brand-cardBackBlue) 0%, var(--brand-indigoDeep) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 22px rgba(47,180,255,.6), 0 18px 40px rgba(8,10,40,.6); box-sizing: border-box; opacity: 0; }
.ann-card.tone-debuff { border-color: #B46CFF; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 22px rgba(180,108,255,.65), 0 18px 40px rgba(8,10,40,.6); }
.ann-card.tone-buff { border-color: var(--state-active); box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 0 22px rgba(0,227,105,.55), 0 18px 40px rgba(8,10,40,.6); }
.ann .anntop { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ann .anntype { padding: 2px 8px; border-radius: 999px; background: var(--brand-sky); white-space: nowrap; } .ann.tone-debuff .anntype { background: #8E4FE0; } .ann.tone-buff .anntype { background: #00A85A; }
.ann .annwho { color: var(--brand-skyLight); text-align: right; min-width: 0; }
.ann .annmid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ann .annname { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 28px; line-height: 1; text-transform: uppercase; min-width: 0; overflow-wrap: anywhere; }
.ann .annchip { flex: none; padding: 3px 10px; border-radius: 12px; background: linear-gradient(180deg, #FFBD59, #FF914D); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 18px; text-shadow: 0 1px 2px rgba(14,17,64,.4); }
.ann.tone-debuff .annchip { background: linear-gradient(180deg, #C99BFF, #8E4FE0); } .ann.tone-buff .annchip { background: linear-gradient(180deg, #5CF0A0, #00A85A); }
.ann .anntext { font-size: 14px; line-height: 1.35; color: #E8ECFF; } .ann .anntext b { color: var(--brand-skyLight); }
.ann-sash { left: -12%; right: -12%; top: 37%; min-height: 26%; transform: rotate(-7deg); display: flex; align-items: center; gap: 12px; padding: 10px 16% 10px 15%; box-sizing: border-box; background: linear-gradient(90deg, rgba(255,115,0,0) 0%, #FF7300 9%, #FF914D 50%, #FFBD59 91%, rgba(255,189,89,0) 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.9), 0 10px 30px rgba(8,10,40,.55); opacity: 0; }
.ann-sash.tone-debuff { background: linear-gradient(90deg, rgba(142,79,224,0) 0%, #6D35C9 9%, #8E4FE0 50%, #B46CFF 91%, rgba(180,108,255,0) 100%); }
.ann-sash.tone-phase { background: linear-gradient(90deg, rgba(0,173,226,0) 0%, #0A6FA8 9%, #00ADE2 50%, #2FB4FF 91%, rgba(47,180,255,0) 100%); } .ann.tone-phase .anntype { background: #0A6FA8; } .ann.tone-phase .anntext:empty { display: none; }
.ann-sash.tone-buff { background: linear-gradient(90deg, rgba(0,168,90,0) 0%, #008A4A 9%, #00A85A 50%, #00E369 91%, rgba(0,227,105,0) 100%); }
.ann-sash .annthumb { flex: none; width: 15%; aspect-ratio: 1; border-radius: 50%; background: center 22% / 210% no-repeat; box-shadow: 0 0 0 3px #fff; }
.ann-sash .anncopy { min-width: 0; display: flex; flex-direction: column; gap: 2px; transform: rotate(7deg); }
.ann-sash .annkicker { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ann-sash .annline { display: flex; align-items: baseline; gap: 8px; } .ann-sash .annchip { background: #fff; color: #6D35C9; text-shadow: none; }
.ann-sash .anntext { font-size: calc(12.5px * var(--text-k)); font-weight: 600; color: #fff; } .ann-sash .anntext b { color: #fff; text-decoration: underline; }
.ann-sash .annname { font-size: clamp(22px, 7.4vw, 34px); overflow-wrap: normal; word-break: keep-all; }
.ann-sash .annline { flex-wrap: wrap; row-gap: 4px; }

/* Gezahlte RV-Karten offen in der Mitte (2026-10-05) */
.fxflash { position: fixed; inset: 0; z-index: 58; pointer-events: none; opacity: 0; } /* Bildschirm-Blitz beim River-Match (fx.js screenFlash) */
.fxlayer .fxpop { position: absolute; pointer-events: none; transform-origin: 50% 50%; } .fxlayer .fxpop svg { display: block; overflow: visible; } /* Farbblöcke beim River-Match */
.matchfx .paidcard { position: absolute; z-index: 30; border-radius: 6px; box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255,210,63,.7), 0 8px 18px rgba(8,10,40,.6); object-fit: cover; }
/* Spielzone (r-0073 A): Karten liegen groß zwischen den Reihen; Halten zoomt, im Meta-Ziel golden und antippbar. Ursprung oben links für FLIP und Flug */
.matchfx .zonecard { pointer-events: auto; transform-origin: 0 0; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
.matchfx .zonecard, .matchfx .zonelbl { transition: opacity .2s cubic-bezier(.76,0,.24,1); } .matchfx.trapslots .zonecard, .matchfx.trapslots .zonelbl { opacity: .22; pointer-events: none; }
.matchfx .zonecard.spell { box-shadow: 0 0 0 2px #fff, 0 0 16px rgba(47,180,255,.8), 0 8px 18px rgba(8,10,40,.6); }
.matchfx .zonecard.pick { cursor: pointer; box-shadow: 0 0 0 3px #FFD23F, 0 0 0 5px rgba(255,255,255,.85), 0 0 24px rgba(255,210,63,.95), 0 8px 18px rgba(8,10,40,.6); animation: zonePick 1.1s cubic-bezier(.76,0,.24,1) infinite alternate; }
@keyframes zonePick { from { translate: 0 0; scale: 1; } to { translate: -2.5% -2.5%; scale: 1.05; } }
.matchfx .zonelbl { position: absolute; z-index: 55; pointer-events: none; height: 18px; padding: 0 9px; border-radius: 999px; display: flex; align-items: center; white-space: nowrap; font: 800 10px/1 var(--font-body, inherit); letter-spacing: .1em; text-transform: uppercase; color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.9), 0 4px 10px rgba(8,10,40,.45); background: linear-gradient(180deg, #FFBD59, #FF914D); text-shadow: 0 1px 2px rgba(14,17,64,.35); }
.matchfx .zonelbl.spells { background: linear-gradient(180deg, #49C3FF, #1C8FE0); }
@media (prefers-reduced-motion: reduce) { .matchfx .zonecard.pick { animation: none; } }

/* Einheitliches Knopf-System (r-0033 A, 2026-10-05): Pillen gleicher Höhe mit Icon und Wort, Farbe je Aktion, Lichtkante oben, weißer Innenrand,
   empfohlene Aktion mit weißem Außenring und Glow; kein dunkler Rand. In der Aktionsleiste teilen sich die Knöpfe die Breite gleichmäßig. */
.ibtn { flex-direction: row; justify-content: center; gap: 7px; height: 52px; min-height: 52px; min-width: 0; padding: 0 14px 0 11px; border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 78%, #fff) 0%, var(--k) 46%, color-mix(in srgb, var(--k) 82%, #0E1140) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), inset 0 2px 0 rgba(255,255,255,.35), 0 6px 16px color-mix(in srgb, var(--k) 45%, transparent); text-shadow: 0 1px 2px rgba(14,17,64,.35); }
.ibtn .ico { width: 24px; height: 24px; flex: none; }
.ibtn .lbl { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 17px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibtn .sub { display: none; }
@media (max-width: 520px) { .actionbar .atitle.retreattitle { display: none; } .arow.retreatrow { gap: 6px; } .arow.retreatrow .ibtn.cost .lbl { font-size: 13px; } }
.ibtn.cost { flex-direction: column; justify-content: center; gap: 1px; padding: 0 8px; flex: 1 1 0 !important; min-width: 0; } .ibtn.cost .ico { display: none; } .ibtn.cost .lbl { font-size: 14px; } .ibtn.cost .sub { display: block; font-size: 11px; font-weight: 700; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* v400: Rückzug – Monster mit Kosten darunter */
.ibtn.primary { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75), inset 0 2px 0 rgba(255,255,255,.4), 0 0 0 3px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.5), 0 6px 18px color-mix(in srgb, var(--k) 55%, transparent); }
.ibtn.on { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75), 0 0 0 3px rgba(255,255,255,.9), 0 0 16px rgba(255,255,255,.5); }
.ibtn.round { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.ibtn.small { height: 36px; min-height: 36px; padding: 0 12px; border-radius: 18px; } .ibtn.small .lbl { font-size: 14px; }
.arow { gap: 10px; padding: 4px 4px; overflow: visible; }
.arow .ibtn { flex: 1 1 auto; } .arow .ibtn.round { flex: none; } /* v400: runde Knöpfe wachsen nicht mit */ /* Breite nach Inhalt, damit kurze Wörter wie „Drehen“ auf 360 px nicht abgeschnitten werden */
@media (max-width: 400px) { .arow .ibtn .lbl { font-size: 15px; } }
.atkpass { height: 46px; min-height: 46px; flex: none; }
.actionbar .arow { min-width: 0; }
.arow:has(> .ibtn:nth-child(3)) .ibtn { flex-direction: column; gap: 1px; padding: 0 6px; }
.arow:has(> .ibtn:nth-child(3)) .ibtn .ico { width: 20px; height: 20px; }
.arow:has(> .ibtn:nth-child(3)) .ibtn .lbl { font-size: 13px; max-width: 100%; }
.actionbar:has(.arow > .ibtn:nth-child(3)) .atitle { max-width: 74px; font-size: 10px; }
.actionbar:has(.arow > .ibtn:nth-child(3)) .atitle .chip { font-size: 11px; padding: 2px 6px; white-space: nowrap; }
.arow:has(> .ibtn:nth-child(3)) .ibtn .lbl { font-size: 12.5px; letter-spacing: 0; text-overflow: clip; }
.arow:has(> .ibtn:nth-child(3)) { gap: 6px; }

/* Logo in den Hauptmenüs (2026-10-05): Wortmarke mit Schriftzug, mittig, gut sichtbar */
.logoblock { display: flex; justify-content: center; padding: 4px 8px 14px; }
.logoblock .brandlogo { width: min(88%, 380px); height: auto; display: block; filter: drop-shadow(0 6px 18px rgba(14,17,64,.45)); animation: riseIn var(--motion-normal) var(--motion-ease) both; }
/* Glow nicht abschneiden (User 2026-10-05): Scrollbereiche und Pillenreihen bekommen Luft, die per negativem Rand wieder ausgeglichen wird */
.scrollbody { margin: -10px calc(-1 * var(--space-lg)) 0; padding: 10px var(--space-lg) var(--space-lg); }
.pills { padding: 8px; margin: -8px; }
/* Splash (Blueprint splash-visual): blauer Radialverlauf, nie Schwarz */
.splash { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 24px; background: radial-gradient(circle at 50% 42%, var(--splash-center) 0%, var(--splash-mid) 33%, var(--splash-deep) 70%, var(--splash-edge) 100%); transition: opacity var(--motion-slow) var(--motion-ease); }
.splash.out { opacity: 0; pointer-events: none; }
/* v374 Splash „Atem“ und lebende Hub-Bühne (splash.js): Ebenen in Seitenprozent auf einer quadratischen Bühne, z = Tiefe für die Parallaxe; seit v375 auf einer Canvas gezeichnet.
   Die Bühne (.kahost) trägt dieselbe Ellipsen-Maske wie .hubart, zunächst auf 400 % (unsichtbar); beim Flug in den Hub zieht sie sich auf 100 % zusammen statt hart zu wechseln. */
.splash .kahost { position: relative; width: min(92vw, 560px); perspective: 1100px; -webkit-mask-image: none; mask-image: none; } .splash { overflow: hidden; } /* v394: im Splash ohne Maske, die Canvas reicht über den ganzen Bildschirm (splash.js setFullStage); die Maske kommt mit dem Flug (.masked) */
.kahost { aspect-ratio: 1; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 47%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 47%, #000 64%, transparent 100%); -webkit-mask-size: 400% 400%; mask-size: 400% 400%; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.kahost.masked, .hubart.kahost { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.kahost > canvas.kcv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 50%; } /* v375: eine Canvas statt 51 Bild-Ebenen (Grafikspeicher auf dem Handy); Neigung dreht die Canvas per CSS */
.hubart.kahost { perspective: 1100px; }
.hubsym { position: absolute; left: 42%; top: 60%; width: 16%; height: 17%; border: 0; padding: 0; background: transparent; pointer-events: auto; cursor: pointer; z-index: 2; -webkit-tap-highlight-color: transparent; } /* v376: Tipp-Fläche über dem Metazauber-Symbol (Ebene bei 45,7 % / 63,7 %) */
/* Deckauswahl */
.decktop { display: flex; flex-direction: column; gap: 8px; flex: none; }
/* Segment-Knöpfe (User 2026-10-06: „Buttons im Menü CI-konform“): wie .btn – Pille, Akzentrand, Display-Font kursiv/versal; gewählt gefüllt wie .btn.primary */
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; padding: 2px; }
.seg2 button { --acc: var(--tier-base); appearance: none; height: 40px; border: 2px solid var(--acc); background: transparent; color: var(--acc); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; border-radius: var(--radius-pill); padding: 0 10px; min-width: 0; cursor: pointer; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.seg2 button.on { background: var(--acc); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); border-color: var(--surface-strokeLight); box-shadow: 0 0 0 3px var(--surface-strokeDark), var(--shadow-highlight); }
.seg2 button:active { transform: scale(.97); }
.decktabs button { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 6px 10px; }
.decktabs .tabwho { font-size: 11px; font-weight: 600; opacity: .8; } .decktabs .tabdeck { font-family: var(--font-display, inherit); font-size: 15px; }
.deckcovers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 2px 4px 6px; }
.deckcover { appearance: none; border: 0; padding: 0; background: none; border-radius: 10px; overflow: hidden; aspect-ratio: 480 / 701; cursor: pointer; opacity: .55; transform: scale(.95); transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); }
.deckcover img:not(.cut) { display: block; width: 100%; height: 100%; object-fit: cover; } /* Freisteller eigener Decks behalten Größe und Lage aus dem Deck-Design (User 2026-10-12) */
.deckcover.on { opacity: 1; transform: none; box-shadow: 0 0 0 2px #fff, var(--shadow-highlight), 0 10px 24px rgba(14,17,64,.55); }
.linelist { display: flex; flex-direction: column; gap: 8px; }
.linerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: var(--radius-card); background: var(--surface-panel); border: 1px solid var(--surface-line); }
.lineinfo { min-width: 0; appearance: none; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 6px 0; display: flex; align-items: center; gap: 10px; cursor: pointer; } .linetxt { min-width: 0; display: flex; flex-direction: column; } .linename { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lineup { font-size: 12px; font-variant-numeric: tabular-nums; }
.linestages { display: grid; grid-template-columns: repeat(3, 56px); gap: 5px; }
.stagecard { appearance: none; border: 0; padding: 0; background: var(--surface-panelRaised); cursor: pointer; position: relative; width: 56px; aspect-ratio: 600 / 819; border-radius: 5px; overflow: hidden; }
.stagecard img { display: block; width: 100%; height: 100%; object-fit: cover; }
.stagecard .noimg { font-size: 10px; padding: 4px; display: block; }
.stagetag { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; font-weight: 700; color: #fff; text-align: center; padding: 2px 0; background: color-mix(in srgb, var(--acc, var(--tier-base)) 88%, transparent); text-shadow: 0 1px 2px rgba(14,17,64,.5); }
.stagecard.base { --acc: var(--tier-base); } .stagecard.stage1 { --acc: var(--tier-stage1); } .stagecard.stage2 { --acc: var(--tier-stage2); }
.btn.primary.startbtn { color: #fff; text-shadow: 0 1px 3px rgba(14,17,64,.5); }
.deckbody > .eyebrow { margin-top: 4px; }
/* Kreaturen an- und abwählen: Häkchen links, abgewählte Zeilen gedimmt und entsättigt */
.linecheck { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface-line); background: transparent; display: grid; place-items: center; transition: background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.linerow.on .linecheck { background: var(--state-active); border-color: #fff; box-shadow: var(--shadow-highlight); }
.linerow.on .linecheck::after { content: ""; width: 14px; height: 14px; background: #fff; -webkit-mask: url("./assets/icons/ui/check.svg") center / contain no-repeat; mask: url("./assets/icons/ui/check.svg") center / contain no-repeat; }
.linerow { transition: opacity var(--motion-normal) var(--motion-ease), border-color var(--motion-normal) var(--motion-ease); }
.linerow.on { border-color: color-mix(in srgb, var(--state-active) 55%, var(--surface-line)); }
.linerow.off { opacity: .55; } .linerow.off .stagecard img { filter: grayscale(.85); }
.decksum.warn { color: var(--state-onTurn); }
.decktabs button.warn .tabdeck { color: var(--state-onTurn); } .decktabs button.on.warn .tabdeck { color: #fff; }
.startbtn.off { opacity: .45; filter: grayscale(.6); cursor: not-allowed; }
.exthead { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--surface-line); } .exthead .muted { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; }
.levels .lvl { font-size: 13px; }
/* Kartensammlung (card-roster) */
.rosterbar { display: flex; gap: 8px; align-items: center; flex: none; }
.rostersearch { flex: 1; min-width: 0; height: 38px; border-radius: var(--radius-pill); border: 1px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); color: var(--surface-ink); font: inherit; font-size: 14px; padding: 0 14px; }
.rostersearch::placeholder { color: var(--surface-muted); } .rostersearch:focus { outline: none; border-color: var(--brand-sky); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-sky) 40%, transparent); }
.rosterzoom { flex: none; } .rosterzoom button { padding: 7px 12px; }
.rosterchips { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: -8px calc(-1 * var(--space-lg)); padding: 8px var(--space-lg); } .rosterchips::-webkit-scrollbar { display: none; }
.rosterchips .pill { flex: none; } .rosterchips .pill.on { color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.45); }
.colpill { display: inline-flex; align-items: center; gap: 6px; } .colpill .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.ghostpill { background: transparent; color: var(--surface-muted); }
.rostercount { flex: none; }
.rostergrid { display: grid; gap: 8px; align-content: start; grid-auto-rows: max-content; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rostergrid.z-m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .rostergrid.z-l { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-left: 10%; padding-right: 10%; }
.rostertile { appearance: none; border: 0; padding: 0; background: var(--surface-panelRaised); border-radius: 6px; overflow: hidden; aspect-ratio: 600 / 819; cursor: pointer; box-shadow: 0 4px 12px rgba(14,17,64,.45); transition: transform var(--motion-fast) var(--motion-ease); }
.rostertile:active { transform: scale(.96); } .rostertile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rostertile { position: relative; } .rostertile .vertag { position: absolute; top: 5px; left: 5px; font: 800 11px/1 var(--font-body); letter-spacing: .06em; color: #fff; padding: 3px 6px; border-radius: 5px; background: linear-gradient(135deg, #6a5cff, #00ade2); box-shadow: 0 1px 4px rgba(14,17,64,.55); pointer-events: none; } .rostertile .vertag.y { background: linear-gradient(135deg, #ff914d, #ff3131); } /* X/Y-Fassung aus dem Adventure (v234) */
.rostergrid.z-l .rostertile { border-radius: 12px; }
/* v344 (r-0095 G): Anzahl unter der Albumkarte, Stil der Adventure-Deckwahl (.dkstage); nur in der Sammelmappe, die Fächer bekommen Platz für die Zeile */
.rostertile .tcap { display: none; } .rostertile img { border-radius: inherit; }
.binder .rostertile { overflow: visible; }
.binder .rostertile .tcap { display: flex; position: absolute; left: 0; right: 0; top: calc(100% + 4px); justify-content: center; line-height: 1.15; pointer-events: none; }
.rostertile .tcap .st { font: 700 11px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--acc); } .rostertile .tcap .dim { font: 600 10.5px var(--font-body); color: rgba(255,255,255,.72); }
.rostertile.base { --acc: var(--tier-base); } .rostertile.stage1 { --acc: var(--tier-stage1); } .rostertile.stage2 { --acc: var(--tier-stage2); }
.rosterempty { grid-column: 1 / -1; text-align: center; padding: 40px 0; }
.atkacts { display: flex; gap: 8px; padding: 0 12px; } .atkacts .ibtn { flex: 1; min-width: 0; }
.cardpick { appearance: none; border: 0; padding: 0; position: relative; width: 52px; aspect-ratio: 600 / 819; border-radius: 5px; overflow: hidden; background: var(--surface-panelRaised); cursor: pointer; flex: none; box-shadow: 0 4px 10px rgba(14,17,64,.45); transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.cardpick img { display: block; width: 100%; height: 100%; object-fit: cover; } .cardpick:active { transform: scale(.94); } .cardpick:focus-visible { box-shadow: var(--shadow-highlight); }
.cardpick .noimg { font-size: 9px; padding: 3px; display: block; color: #fff; }
.cardpick.base { --acc: var(--tier-base); } .cardpick.stage1 { --acc: var(--tier-stage1); } .cardpick.stage2 { --acc: var(--tier-stage2); }
.atkhead .atkwho { min-width: 0; flex: 1; }
/* Knappe Höhe (Handy im Claude-Fenster, User 2026-10-05): Aktionsleiste und Kategoriezeile etwas flacher, damit das Brett mehr Höhe bekommt */
@media (max-height: 780px) {
  .actionbar { min-height: 54px; height: 54px; flex: 0 0 54px; padding-top: 4px; padding-bottom: 4px; }
  .hand .handbar { height: 34px; flex: 0 0 34px; } .hcat { height: 27px; }
}
/* Hand ohne Kategoriezeile (User 2026-10-05): Häkchen-Knopf am Fächerende schaltet zwischen smarter Ansicht (nur spielbare Karten) und allen Karten */
.hand { height: 116px; min-height: 116px; }
/* „Alle“-Umschalter der Hand (User 2026-10-06): CI-konform wie .btn, Pille mit Akzentrand, Display-Font kursiv/versal; eingeschaltet gefüllt wie .btn.primary */
/* v406: Smart | Alle fest links an der Hand (User 2026-10-20), zwei Schalter mit Kästchen; Standard Smart */
.hand .handtoggle { --acc: var(--tier-base); position: absolute; left: 8px; top: 50%; z-index: 30; display: flex; flex-direction: column; align-items: stretch; gap: 6px; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(-6px); transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.hand .handtoggle.show { opacity: 1; pointer-events: auto; transform: translateY(-50%); }
.hand .hseg { appearance: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; min-width: 76px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); border: 2px solid var(--acc); background: color-mix(in srgb, var(--brand-indigoDeep) 86%, transparent); color: var(--acc); font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; box-sizing: border-box; transition: background var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.hand .hseg .hbox { flex: none; width: 13px; height: 13px; border-radius: 4px; border: 2px solid currentColor; box-sizing: border-box; display: grid; place-items: center; }
.hand .hseg.on { color: #fff; background: var(--acc); text-shadow: 0 1px 2px rgba(14,17,64,.45); border-color: var(--surface-strokeLight); box-shadow: 0 0 0 3px var(--surface-strokeDark), var(--shadow-highlight); }
.hand .hseg.on .hbox { background: #fff; border-color: #fff; } .hand .hseg.on .hbox::after { content: ""; width: 5px; height: 8px; border: solid var(--acc); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.hand .hseg .hcount { font: 700 11px var(--font-body); font-style: normal; letter-spacing: 0; font-variant-numeric: tabular-nums; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, var(--acc) 28%, transparent); color: #fff; }
.hand .hseg:active { transform: scale(.94); } .screen.match:has(.phasewrap .actionbar .cardpick) .hand .handtoggle.show { opacity: 0; pointer-events: none; } /* Kartenwahl in der Leiste (z. B. Spell-Kosten): der Hand-Schalter lag über dem Hinweis (User 2026-10-12) */
/* Spieler-Panel (User 2026-10-05): Lebensleiste als Balken, wenige Icons, Stapel-Knopf in der Ecke */
.topbar, .ownbar { gap: 8px; }
.lpbar { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; --hpc: var(--hp-full); } .lpbar[data-level="mid"] { --hpc: var(--hp-mid); } .lpbar[data-level="low"] { --hpc: var(--hp-low); }
.lpbar .track { position: relative; width: 104px; height: 12px; border-radius: 999px; background: var(--hp-track); overflow: hidden; }
/* Spieler-LP-Treffer (User 2026-10-07): rotes Aufblitzen, kurzes Rütteln, schwebende Zahl */
.lpbar { position: relative; } .lpdelta { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); font: 800 16px var(--font-display); font-style: italic; color: #FF2727; text-shadow: 0 1px 2px rgba(14,17,64,.6); pointer-events: none; animation: lpDelta 1s var(--motion-ease) both; }
@keyframes lpDelta { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; transform: translate(-50%, -4px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(1); } }
.topbar.lphit .lpbar .track, .ownbar.lphit .lpbar .track { box-shadow: 0 0 0 2px #FF2727, 0 0 14px #FF2727; animation: lpShake .45s var(--motion-ease) both; } .topbar.lphit .lpbar .fill, .ownbar.lphit .lpbar .fill { background: #FF2727; }
@keyframes lpShake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .lpdelta, .topbar.lphit .lpbar .track, .ownbar.lphit .lpbar .track { animation: none; } } .reduce-motion :is(.lpdelta, .lphit .lpbar .track) { animation: none !important; }
.lpbar .fill { position: absolute; inset: 0 auto 0 0; background: var(--hpc); border-radius: 999px; transition: width var(--motion-slow) var(--motion-ease), background var(--motion-slow) var(--motion-ease); }
.lpbar .track::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--segs) - 1px), rgba(20,22,90,.45) calc(100% / var(--segs) - 1px) calc(100% / var(--segs))); pointer-events: none; }
.lpbar .num { font: 800 13px var(--font-body); font-variant-numeric: tabular-nums; min-width: 34px; color: var(--surface-ink); }
.topbar .who, .ownbar .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.topbar.stacks .who, .ownbar.stacks .who { display: none; }
.stackrow { display: inline-flex; gap: 4px; min-width: 0; overflow: hidden; } .stackrow:empty { display: none; }
.stackrow .cchip { animation: riseIn var(--motion-fast) var(--motion-ease) backwards; padding: 0 6px; }
.cchip .sub { font-size: 10px; font-weight: 700; color: var(--brand-skyLight); margin-left: 1px; }
.stackbtn { appearance: none; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--surface-line); background: var(--surface-panelRaised); color: var(--surface-ink); display: grid; place-items: center; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.stackbtn .glyph { width: 16px; height: 16px; } .stackbtn.on { background: var(--brand-cardBackBlue); color: #fff; border-color: rgba(255,255,255,.55); } .stackbtn:active { transform: scale(.92); }
@media (max-height: 780px) { .hand { height: 108px; min-height: 108px; } }
@media (prefers-reduced-motion: reduce) { .hand .handtoggle, .stackrow .cchip { transition-duration: 0s; animation-duration: 0s; } }
.topbar.stacks .lpbar .track, .ownbar.stacks .lpbar .track { width: 46px; } .topbar.stacks, .ownbar.stacks { gap: 5px; } .stackrow .cchip { padding: 0 5px; gap: 2px; } .stackrow { gap: 3px; }
.hand.fan .cards .mini { bottom: -8px; } /* Fokuskarte bleibt unter der Aktionsleiste frei greifbar */
/* Varianten-Leiste der Vollansicht (User 2026-10-05): alle Varianten der Kreatur, scrollt seitlich; Zoomstufe S mit vier Karten je Zeile */
.chain { gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 6px 12px 2px; max-width: 100%; box-sizing: border-box; } .chain::-webkit-scrollbar { display: none; }
.chain.many { justify-content: flex-start; } .chain .link { flex: 0 0 auto; width: 48px; }
.rostergrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
/* Griff (User 2026-10-05): Farben des greifenden Monsters groß */
.pullstrip { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pullstrip .pname { font: 700 11px var(--font-body); color: var(--surface-muted); max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pullstrip .pblock { width: 52px; height: auto; aspect-ratio: 729 / 372; filter: drop-shadow(0 0 6px rgba(255,255,255,.45)); animation: riseIn var(--motion-fast) var(--motion-ease) backwards; }
.pullstrip .pblock:nth-of-type(2) { animation-delay: 60ms; } .pullstrip .pblock:nth-of-type(3) { animation-delay: 120ms; } .pullstrip .pblock:nth-of-type(4) { animation-delay: 180ms; }
/* Angriffswahl (User 2026-10-05): Kartentext in der Kartenschrift (CI: Averia Libre, type.cardText), engere Zeilen, nichts abgeschnitten;
   links die verfügbaren River-Karten, das Angriffsfeld rückt nach rechts */
.atkpanel { height: auto; min-height: 214px; max-height: 300px; }
.atkbody { flex: 1; min-height: 0; display: flex; gap: 0; padding-left: 10px; }
.atkbody .atktrack { flex: 1; min-width: 0; padding-left: 8px; }
.atkbody .atkcard { flex-basis: min(90%, 340px); }
.atktext { font-family: var(--font-card); font-size: 13.5px; line-height: 1.24; display: block; -webkit-line-clamp: unset; overflow-y: auto; max-height: calc(1.24em * 5); scrollbar-width: none; }
.atktext b, .atktext strong { font-weight: 700; } .atktext::-webkit-scrollbar { display: none; }
.atkrv { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 0; }
.atkrvsum { font: 700 italic 22px/1 var(--font-display); color: #fff; display: flex; align-items: baseline; gap: 2px; } .atkrvsum small { font-size: 11px; color: var(--brand-skyLight); font-style: normal; }
.atkrvstack { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: center; padding: 2px 0 6px; } .atkrvstack::-webkit-scrollbar { display: none; }
.atkrvcard { width: 46px; aspect-ratio: 600 / 820; border-radius: 5px; overflow: hidden; flex: none; box-shadow: 0 3px 8px rgba(8,10,40,.55), 0 0 0 1px rgba(255,255,255,.35); background: var(--surface-panelRaised); display: grid; place-items: center; font: 700 14px var(--font-display); color: #fff; animation: riseIn var(--motion-fast) var(--motion-ease) backwards; }
.atkrvcard + .atkrvcard { margin-top: -38px; } .atkrvcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atkrvnone { font-size: 10px; color: var(--surface-muted); text-align: center; }
.vtext .power, .vtext .spell { font-family: var(--font-card); line-height: 1.28; } .vtext .power > b, .vtext .spell > b { font-family: var(--font-body); }
/* Zahlen (User 2026-10-05): Wert über jeder River-Karte, gewählte Karten deutlich angehoben mit grünem Ring und Häkchen, nicht gewählte treten zurück */
.hand .mini.card.river { overflow: visible; } .hand .mini.card.river img { border-radius: 5px; }
.hand .mini .rvval { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); min-width: 30px; padding: 1px 7px; border-radius: 999px; background: var(--brand-indigoDeep); color: #fff; font: 700 italic 14px/18px var(--font-display); text-align: center; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 2px 6px rgba(8,10,40,.6); opacity: 0; transition: opacity var(--motion-fast) var(--motion-ease), background var(--motion-fast) var(--motion-ease); pointer-events: none; }
.hand.paying .mini.river .rvval { opacity: 1; }
.hand.paying .cards { padding-top: 0; } .hand.paying.fan .cards .mini.river { bottom: -14px; }
.hand.paying .mini.card.river.sel:not(.on) { box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); } /* v293: wählbare RV-Karten nicht mehr entsättigt und abgedunkelt */
.hand.paying .mini.card.river.on { filter: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--block-green), 0 0 22px 6px rgba(0,227,105,.85); }
.hand.paying .mini.card.river.on .rvval { background: var(--block-green); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.6); }
.hand.paying .mini.card.river.on::after { content: ""; position: absolute; right: -7px; bottom: -7px; width: 22px; height: 22px; border-radius: 50%; background: var(--block-green) url("./assets/icons/ui/check.svg") center / 13px no-repeat; box-shadow: 0 0 0 2px #fff; }
/* KI denkt nach (User 2026-10-05) */
.actionbar .thinking { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--font-body); color: var(--surface-ink); padding: 0 6px; }
.thinking .dots { display: inline-flex; gap: 4px; } .thinking .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--brand-sky); animation: thinkDot 1.1s var(--motion-ease) infinite; } .thinking .dots i:nth-child(2) { animation-delay: .15s; } .thinking .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes thinkDot { 0%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .thinking .dots i { animation: none; opacity: .8; } }
.reduce-motion .thinking .dots i { animation: none; opacity: .8; }
/* Spieler-Panel (User 2026-10-05): LP-Leiste nimmt den freien Platz ein; wer am Zug ist, leuchtet orange mit Chip „Am Zug“ */
.topbar, .ownbar { position: relative; transition: background var(--motion-normal) var(--motion-ease), box-shadow var(--motion-normal) var(--motion-ease); }
.lpbar { flex: 1 1 auto; min-width: 120px; max-width: 58%; gap: 8px; } .lpbar .track { flex: 1; width: auto; height: 14px; }
.lpbar .num { font: 700 italic 19px/1 var(--font-display); min-width: 42px; }
.topbar.stacks .lpbar, .ownbar.stacks .lpbar { flex: 0 0 auto; min-width: 0; } .topbar.stacks .lpbar .track, .ownbar.stacks .lpbar .track { flex: none; width: 46px; } .topbar.stacks .lpbar .num, .ownbar.stacks .lpbar .num { font-size: 15px; min-width: 34px; }
/* Spielerkennzeichnung (Entscheidung 2026-10-07-player-marks): zwei Fähnchen links an jeder Leiste – „Aktiv“ (himmelblau, Stern; aktiver Spieler der Runde)
   und „Am Zug“ (orange, Schwerter, pulsiert; Spieler am Zug) –, dazu ein oranges Lauflicht als Rahmen um die Leiste des Spielers am Zug. Keine Flächenverläufe,
   keine Marker auf den Karten. Das Rand-Leuchten des aktiven Spielers auf sein Feld (board.js) bleibt. */
.topbar, .ownbar { position: relative; padding-left: 0; }
.ptags { display: flex; flex-direction: column; gap: 2px; align-self: stretch; justify-content: center; margin-right: 6px; flex: none; }
.ptag { display: none; align-items: center; gap: 4px; height: 14px; padding: 0 7px 0 5px; border-radius: 0 999px 999px 0; color: #fff; font: 800 9px var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(14,17,64,.45); white-space: nowrap; }
.ptag .glyph { width: 10px; height: 10px; }
/* Stapel-Anzeige an (Roadmap 4.4): die Fähnchen zeigen nur noch Stern bzw. Schwerter, Farbe und Leuchten bleiben; so passen alle Stapel auch bei 360 px in die eigene Leiste */
.topbar.stacks .ptag, .ownbar.stacks .ptag { font-size: 0; letter-spacing: 0; gap: 0; padding: 0 6px 0 5px; }
.topbar.stacks .who, .ownbar.stacks .who, .ownbar.stacks .grow { display: none; } /* Name hat hier ohnehin keinen Platz (Breite 0), Lücke sparen */ .ownbar.stacks .stackbtn { margin-left: auto; }
.topbar.stacks .lpbar .track, .ownbar.stacks .lpbar .track { width: 36px; } .topbar.stacks .stackrow, .ownbar.stacks .stackrow { gap: 2px; } .topbar.stacks .stackrow .cchip, .ownbar.stacks .stackrow .cchip { padding: 0 4px; }
.topbar.activeplayer .ptag.active, .ownbar.activeplayer .ptag.active { display: inline-flex; background: var(--brand-sky); box-shadow: 0 0 10px var(--brand-sky); }
.topbar.turn .ptag.turn, .ownbar.turn .ptag.turn { display: inline-flex; background: var(--state-onTurn); box-shadow: 0 0 10px var(--state-onTurn); animation: ptagPulse 1.4s var(--motion-ease) infinite; }
@keyframes ptagPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
.topbar.turn::before, .ownbar.turn::before { content: ""; position: absolute; inset: 0; padding: 3px; z-index: 3; pointer-events: none; background: conic-gradient(from var(--pt-a), transparent 0 62%, var(--state-onTurn) 80%, #FFE2CC 88%, var(--state-onTurn) 94%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ptSpin 2.6s linear infinite; }
/* Am Zug deutlicher (User 2026-10-12: „Spieler am Zug sollte deutlicher den Umlauf in seiner Bar haben“): breiterer, hellerer Lauf mit weißem Kern und weichem
   Schweif, zweiter weicher Lauf als Glow nach innen, Leiste leicht orange getönt */
.topbar.turn::before, .ownbar.turn::before { padding: 4px; background: conic-gradient(from var(--pt-a), transparent 0 48%, color-mix(in srgb, var(--state-onTurn) 30%, transparent) 64%, var(--state-onTurn) 78%, #FFF4EA 86%, var(--state-onTurn) 92%, transparent 100%); animation-duration: 2.2s; }
.topbar.turn::after, .ownbar.turn::after { content: ""; position: absolute; inset: 0; padding: 10px; z-index: 2; pointer-events: none; opacity: .55; background: conic-gradient(from var(--pt-a), transparent 0 62%, color-mix(in srgb, var(--state-onTurn) 45%, transparent) 80%, color-mix(in srgb, #FFE2CC 55%, transparent) 86%, color-mix(in srgb, var(--state-onTurn) 45%, transparent) 92%, transparent 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ptSpin 2.2s linear infinite; }
.topbar.turn, .ownbar.turn { background: linear-gradient(90deg, color-mix(in srgb, var(--state-onTurn) 20%, transparent), color-mix(in srgb, var(--state-onTurn) 6%, transparent) 70%); box-shadow: inset 0 0 14px color-mix(in srgb, var(--state-onTurn) 30%, transparent); }
@media (prefers-reduced-motion: reduce) { .topbar.turn::after, .ownbar.turn::after { display: none; } }
@property --pt-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; } @keyframes ptSpin { to { --pt-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .topbar.turn::before, .ownbar.turn::before { animation: none; background: none; box-shadow: inset 0 0 0 3px var(--state-onTurn); } .ptag.turn { animation: none !important; } }
.topbar .who, .ownbar .who { font-weight: 800; } .who .whodeck { font-weight: 600; opacity: .72; } .topbar.turn .who, .ownbar.turn .who { color: var(--state-onTurn); }
.atitle .pullstrip { margin-top: 4px; gap: 5px; } .atitle .pullstrip .pname { display: none; } .atitle .pullstrip .pblock { width: 40px; height: auto; }
.atkbody .atkspell { font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } /* langer Angriffsname überlappt die Kosten nicht */
/* Angriffswahl: RV-Wert rechts neben jeder River-Karte (User 2026-10-05) */
.atkrv { flex-basis: 78px; align-items: flex-start; } .atkrvsum { align-self: center; }
.atkrvstack { align-items: stretch; width: 100%; }
.atkrvrow { display: flex; align-items: flex-start; gap: 6px; } .atkrvrow + .atkrvrow { margin-top: -30px; }
.atkrvrow .atkrvcard { width: 40px; margin: 0 !important; } .atkrvcard + .atkrvcard { margin-top: 0; }
.atkrvval { font: 700 italic 16px/1 var(--font-display); color: #fff; padding-top: 4px; text-shadow: 0 1px 2px rgba(8,10,40,.7); font-variant-numeric: tabular-nums; }
/* Falle legen: River-Karte wählen, Wert über der Karte (User 2026-10-05) */
.cardpick.rvpick { overflow: visible; margin-top: 16px; } .cardpick.rvpick img { border-radius: 5px; }
.cardpick.rvpick .rvval { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); padding: 1px 7px; border-radius: 999px; background: var(--brand-indigoDeep); color: #fff; font: 700 italic 13px/16px var(--font-display); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
/* Drag-Bild (Design-Auswahl Runde 1, User 2026-10-05): Zoom 130 %, leicht schräg, zweistufiger Schatten, kein Umlauf; die Karte fehlt in der Hand, solange sie gezogen wird */
.hand .mini.dragging { opacity: 0; transition: none; }
.dragghost { box-shadow: 0 2px 4px rgba(4,6,30,.45), 0 16px 30px rgba(4,6,30,.6) !important; border: 0 !important; outline: 0; border-radius: 5px; overflow: hidden; transition: transform var(--motion-fast) var(--motion-ease); }
.dragghost.shine::before, .dragghost.shine::after { display: none; }
.dragghost.mini { padding: 0 !important; background: none !important; } .dragghost img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 5px; }

/* L2 Tippflächen (UX-Plan): sichtbare Größe bleibt, die Trefferfläche wächst auf mindestens 44 px */
.header .back, .header .hact, .stackbtn, .decktabs button, .linecheck { position: relative; }
.header .back::before, .header .hact::before { content: ""; position: absolute; inset: -4px; }
.stackbtn::before { content: ""; position: absolute; inset: -6px; }
.decktabs button::before { content: ""; position: absolute; inset: -6px 0; }

/* Darstellung (prefs.js): Textgröße Groß skaliert Lesetexte über --text-k; Linkshändig spiegelt die schwebenden Knöpfe */
:root { --text-k: 1; } html.textlg { --text-k: 1.15; }
html.textlg body { font-size: calc(15px * var(--text-k)); }

html.lefthand .ownbar .stackbtn, html.lefthand .topbar .stackbtn { order: -1; }

/* Sammlung (J1, Entscheidung 2026-10-05-album): Sammelmappe mit 3 × 3 Fächern, umschaltbar auf „Nach Kreatur“ */
.rostergrid.v-binder, .rostergrid.v-creature { display: flex; flex-direction: column; gap: 14px; grid-template-columns: none; }
.binderstrip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding: 4px 2px 8px; scrollbar-width: none; }
.binderstrip::-webkit-scrollbar { display: none; }
.binder { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: 14px 14px 14px 30px; border-radius: 18px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-content: start;
  background: linear-gradient(135deg, color-mix(in srgb, var(--brand-indigo) 55%, var(--surface-panel)) 0%, var(--surface-panel) 100%); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25), 0 10px 24px rgba(14,17,64,.45); }
.binder .ring { position: absolute; left: 9px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface-bg); box-shadow: inset 0 2px 3px rgba(14,17,64,.8), 0 0 0 1.5px rgba(255,255,255,.3); }
.binder .ring:nth-child(1) { top: 18%; } .binder .ring:nth-child(2) { top: 50%; } .binder .ring:nth-child(3) { top: 82%; }
.binder .slot { aspect-ratio: 600 / 819; border-radius: 6px; border: 1.5px dashed var(--surface-line); }
.binderpage { text-align: center; font: 700 12px var(--font-body); color: var(--surface-muted); }
/* Blättern per Pfeil (Desktop-Steuerung v183): Pfeile neben der Seitenzahl; auf Touch-Geräten ohne Maus bleibt nur die Seitenzahl, dort blättert der Finger */
.bindernavrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.bindernav { appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--surface-panelRaised) 80%, transparent); color: var(--surface-ink); display: grid; place-items: center; padding: 0; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.bindernav .glyph { width: 14px; height: 14px; } .bindernav:disabled { opacity: .3; cursor: default; }
@media (hover: none), (pointer: coarse) { .bindernav { display: none; } }
.crline { display: flex; flex-direction: column; gap: 8px; }
.crhead { display: flex; align-items: baseline; gap: 8px; } .crhead .crname { font-size: 20px; } .crhead .muted { font-size: 12px; }
.crrow { display: flex; align-items: center; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .crrow::-webkit-scrollbar { display: none; }
.crrow .rostertile { flex: none; width: 92px; } .crsep { flex: none; color: var(--surface-muted); font: 700 16px var(--font-body); }
.rosterbar { flex-wrap: wrap; } .rosterbar .rostersearch { flex: 1 1 150px; min-width: 150px; }

/* Hub (B1, Entscheidung 2026-10-05-hub, Feinschliff „Bühne mit Lichtkegel“): randloses Key-Art auf dem Splash-Leuchten, CI-Kapsel und CI-Kacheln */
.hubscreen { position: relative; padding: 0; overflow: hidden; background: radial-gradient(circle at 50% 26%, var(--splash-center) 0%, var(--splash-mid) 30%, var(--splash-deep) 62%, var(--splash-edge) 100%); }
.hubbody { display: flex; flex-direction: column; padding-bottom: 12px; container-type: inline-size; }
.hubgear { appearance: none; border: 0; position: absolute; right: 10px; top: 10px; z-index: 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; background: color-mix(in srgb, var(--splash-edge) 55%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.hubgear .glyph { width: 22px; height: 22px; }
.hubstage { position: relative; flex: none; height: calc(min(132cqw, 620px) * .85 - 34px); /* wächst mit dem Key-Art (quadratisch, 132 % breit): Spielen sitzt bei jeder Breite unter den Kreaturen (bei 360 px wie in der Vorschau 370 px) */ overflow: visible; pointer-events: none; }
.hubglow { position: absolute; left: 50%; top: 44%; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand-skyLight) 45%, transparent) 0%, transparent 60%); filter: blur(8px); }
.hubart { position: absolute; left: 50%; top: -34px; width: 132%; max-width: 620px; transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 47%, #000 64%, transparent 100%); mask-image: radial-gradient(ellipse 52% 50% at 50% 47%, #000 64%, transparent 100%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* Knopfbereich (User 2026-10-08: „viel ungenutzter Platz unten, darüber alles gedrängt“): nimmt die ganze freie Höhe zwischen Bühne und Fußzeile und setzt die
   Knöpfe mittig hinein; Höhe und Abstände wachsen mit der Bildschirmhöhe (vh), so bleibt weder unten ein leeres Band noch oben ein Gedränge */
.hubpad { display: flex; flex-direction: column; justify-content: center; flex: 1 0 auto; gap: clamp(16px, 2.7vh, 28px); padding: clamp(20px, 3vh, 32px) 16px; position: relative; z-index: 2; }
.hubpad .ibtn.hubbtn { height: clamp(56px, 7.2vh, 68px); border-radius: 999px; }
/* v377 „Sticker“ (User-Wahl 2026-10-19, Auswahlseite NXSw7yKersrqHQ3Rqnq2qn): Verlauf dunkler als bisher, dunkle Kontur um den weißen Rand, harter Versatzschatten nach unten
   und weicher Schatten darunter, Unterkante innen verschattet; die Kontur ist fest Tiefnachtblau, weil der Hub immer auf dem dunklen Verlauf liegt */
.hubpad .ibtn.primary.hubbtn { background: linear-gradient(180deg, color-mix(in srgb, var(--k) 70%, #fff) 0%, var(--k) 45%, color-mix(in srgb, var(--k) 68%, #0E1140) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65), inset 0 -4px 0 rgba(14,17,64,.3), 0 0 0 3px #fff, 0 0 0 5px rgba(14,17,64,.75), 0 7px 0 rgba(14,17,64,.55), 0 12px 18px rgba(14,17,64,.45); }
/* Hauptmenü-Schrift größer (User 2026-10-11): Beschriftung 21 statt 18 px, Unterzeile 12,5 statt 11 px, Glyphe 24 statt 22 px; Online-Knöpfe bleiben bei 18 px */
.hubpad .ibtn.hubbtn .lbl { font-size: 21px; } .hubpad .ibtn.hubbtn .sub { font-size: 12.5px; } .hubpad .ibtn.hubbtn .ico { width: 24px; height: 24px; }
/* Hauptmenü einheitlich (User 2026-10-07): fünf gleiche Kapseln, volle Breite, 56 px, Glyphe 22 px, Schrift 18 px; „Spielen“ behält Glanzlauf und Glühen */
.ibtn.hubbtn { width: 100%; height: 56px; min-height: 56px; border-radius: 28px; flex-direction: row; justify-content: center; gap: 10px; padding: 0 18px; position: relative; }
.ibtn.hubbtn .ico { width: 22px; height: 22px; } .ibtn.hubbtn .lbl { font-size: 18px; }
.ibtn.hubbtn .txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.05; }
.ibtn.hubbtn .sub { font-family: var(--font-body); font-style: normal; font-weight: 600; font-size: 11px; letter-spacing: 0; text-transform: none; color: #fff; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.ibtn.hubbtn.locked { opacity: .55; filter: saturate(.6); } .ibtn.hubbtn .glyph.lockmark { width: 14px; height: 14px; position: absolute !important; right: 16px; top: 50%; transform: translateY(-50%); color: #fff; }
.ibtn.hubbtn .txt .sub { display: block; }
.ibtn[data-k="hub-quick"] { --k: var(--tier-stage1); } .ibtn[data-k="hub-cards"] { --k: var(--brand-indigo); } .ibtn[data-k="hub-decks"] { --k: var(--brand-magenta, #E63FC4); } /* Hauptmenü-Farben (User 2026-10-07) */
.hubhalf { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vh, 20px); } .hubhalf .ibtn.hubbtn { padding: 0 12px; } .hubhalf .ibtn.hubbtn .glyph.lockmark { right: 12px; }
.hubgear.hubprofile { right: 62px; } /* Unterzeile Schnellstart (die allgemeine .ibtn .sub-Regel blendet sie aus) */
.hubquick.tile.wide { min-height: 72px; } .hubquick.tile.wide .ttl { font-size: 18px; } .hubquick .glyph { width: 28px; height: 28px; }
.hubfoot { text-align: center; padding-top: 12px; }
/* Spielen-Bildschirm (Layout-Prüfung 2026-10-08): die Modus-Kacheln nehmen die freie Höhe, Abstände und Kachelhöhe wachsen mit dem Bildschirm, kein leeres Band unten */
.playmodes { flex: 1 0 auto; justify-content: center; gap: clamp(12px, 2vh, 22px); } .playmodes .tile.wide { min-height: clamp(88px, 11.5vh, 120px); }
/* Spielen-Menü v386 (Auswahlseite Stand 7, User 2026-10-19): drei Bühnen-Kacheln im Rahmen der Knopf-Familie (weiße Linie, dunkler Ring), Höhen 1,3 : 1 : 1,12 der freien Höhe.
   Adventure: Biom der nächsten Stage, Schrift mittig mit dunkler Kontur, Stage-Zeile, neun Monster in einer Reihe (playmenu.js startGathering).
   Gegen KI: Maltek 1 rechts. Online: nur die Kuppel aus dem Splash (beams.webp, Kugel mit Wabe), seit v388 ohne Lichtebenen und Effekte (playmenu.js mountDome). */
.playmodes:has(.tile.pm) { flex: 1 1 auto; min-height: 0; gap: 16px; }
.playmodes .tile.pm { flex: 1 1 0; min-height: 0; padding: 12px 16px; border-radius: 22px; border: 0; overflow: hidden; align-items: center; color: #fff; isolation: isolate;
  background: linear-gradient(180deg, #3038A8 0%, #181D6C 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85), 0 0 0 4px #0E1140, 0 0 0 5px rgba(255,255,255,.14), 0 12px 26px rgba(5,6,30,.5); }
.playmodes .tile.pm:hover { transform: none; } .playmodes .tile.pm:active { transform: scale(.985); }
.playmodes .tile.pm .glyph { position: absolute; top: 10px; left: 12px; width: 26px; height: 26px; color: var(--acc); opacity: .95; z-index: 3; }
.playmodes .tile.pm .lockmark { top: 10px; right: 12px; z-index: 3; }
.playmodes .tile.pm .txt { position: relative; z-index: 3; padding: 0; }
.playmodes .tile.pm .ttl { font-size: 32px; line-height: .95; color: #fff; text-shadow: -1.5px 0 #0E1140, 1.5px 0 #0E1140, 0 -1.5px #0E1140, 0 1.5px #0E1140, -1px -1px #0E1140, 1px 1px #0E1140, -1px 1px #0E1140, 1px -1px #0E1140, 0 3px 0 #0E1140, 0 6px 12px rgba(5,6,30,.6); }
.playmodes .tile.pm .sub { font-size: 12.5px; color: #DCE0FF; text-shadow: 0 1px 2px rgba(5,6,30,.8); }
.playmodes .tile.pm-adventure { flex: 1.3 1 0; flex-direction: column; justify-content: center; }
.playmodes .tile.pm-adventure .txt { align-items: center; text-align: center; } .playmodes .tile.pm-adventure .ttl { font-size: 38px; }
.playmodes .tile.pm-adventure .sub { font: 700 13px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px rgba(5,6,30,.9), 0 0 8px rgba(5,6,30,.6); }
.pm-bio { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; pointer-events: none; border-radius: inherit; z-index: 0; }
.pm-shade { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0; background: linear-gradient(180deg, rgba(14,17,64,.45) 0%, rgba(14,17,64,.18) 35%, rgba(14,17,64,.25) 60%, rgba(14,17,64,.62) 100%); }
.pm-stand { position: absolute; bottom: -3px; transform: translateX(-50%); width: auto; pointer-events: none; z-index: 2; filter: drop-shadow(0 5px 8px rgba(5,6,30,.6)); will-change: transform, opacity; }
.pm-one { position: absolute; pointer-events: none; z-index: 2; width: auto; filter: drop-shadow(0 8px 12px rgba(5,6,30,.6)); }
.playmodes .tile.pm-solo .txt { padding-right: 156px; }
.playmodes .tile.pm-solo .pm-one { right: 4px; bottom: -2px; height: 150px; transform: scaleX(-1); filter: drop-shadow(0 0 12px rgba(47,180,255,.45)) drop-shadow(0 8px 10px rgba(5,6,30,.6)); } /* v387: Maltek gespiegelt, blickt zum Text */
.playmodes .tile.pm-online { flex: 1.12 1 0; flex-direction: column; justify-content: flex-start; padding-top: 10px; }
.playmodes .tile.pm-online .txt { align-items: center; text-align: center; }
.pm-domeimg { position: absolute; left: 50%; bottom: var(--domeb, -26%); width: var(--domew, 370px); max-width: none; transform: translateX(-50%); pointer-events: none; z-index: 1; opacity: .96; } /* v388: nur die Kuppel, keine weiteren Ebenen oder Animationen */
@media (min-width: 1100px) { .playmodes:has(.tile.pm) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); align-content: center; gap: 18px; } .playmodes .tile.pm-adventure { grid-column: 1 / -1; min-height: 210px; } .playmodes .tile.pm { min-height: 150px; } }

/* Kontext-Tipps (I2, Entscheidung 2026-10-05-tips): Hinweiskarte mit Maskottchen */
.tipcard { position: absolute; left: 12px; right: 12px; z-index: 40; pointer-events: auto; box-sizing: border-box; min-height: 124px; padding: 14px 14px 14px 118px; border-radius: 20px; display: flex; flex-direction: column; gap: 6px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-indigo) 85%, #fff) 0%, var(--brand-indigo) 60%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px var(--surface-strokeDark), 0 16px 40px rgba(14,17,64,.6); }
.tippet { position: absolute; left: 2px; top: 50%; height: 108px; width: auto; transform: translateY(-50%) scaleX(-1); filter: drop-shadow(0 6px 10px rgba(14,17,64,.5)); pointer-events: none; } /* Pormu mittig links, gespiegelt: blickt zum Text (User 2026-10-06) */
.tiptitle { font: italic 700 22px var(--font-display); text-transform: uppercase; }
.tiptext { font: 600 calc(15px * var(--text-k, 1))/1.35 var(--font-body); } /* v283: kurze Schritt-Tipps (1–2 Sätze), eine Stufe größer */
.tipfoot { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .tipfoot .tipok { margin-left: auto; flex: none; } /* v283: „Tipps überspringen“ links, „Verstanden“ rechts */
.tipskip { appearance: none; border: 0; background: none; color: rgba(255,255,255,.78); font: 600 13px var(--font-body); padding: 8px 2px; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.tipok { appearance: none; border: 0; cursor: pointer; align-self: flex-end; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--brand-indigo); color: #fff; font: italic 700 15px var(--font-display); text-transform: uppercase; letter-spacing: .04em; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 0 0 3px var(--surface-strokeDark); text-shadow: 0 1px 2px rgba(14,17,64,.45); }

.modedesc { margin: -4px 0 2px; font-size: 12.5px; } /* Kurzbeschreibung des Modus unter der Größenwahl (v2 §3) */

/* Startspieler-Ziehung (Entscheidung 2026-10-06-start-draw): Fächer mit Touch-Hold, vor dem Spielfeld */
.startdraw { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; color: #fff; overflow: hidden; touch-action: none; background: radial-gradient(circle at 50% 30%, var(--splash-center) 0%, var(--splash-mid) 30%, var(--splash-deep) 62%, var(--splash-edge) 100%); transition: opacity var(--motion-normal) var(--motion-ease); }
.startdraw.out { opacity: 0; }
.startdraw .sd-head { padding: max(28px, var(--sat) + 18px) 28px 8px; text-align: center; width: 100%; max-width: 560px; margin: 0 auto; } /* v268: Abstand vom Rand, auf 560 px begrenzt */
.startdraw .sd-eyebrow { font: 800 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); }
.startdraw .sd-title { font: italic 700 26px/1.05 var(--font-display); text-transform: uppercase; }
.startdraw .sd-sub { font: 600 13px var(--font-body); color: var(--surface-muted); margin-top: 4px; }
.startdraw .sd-row { display: flex; gap: 10px; justify-content: center; align-items: center; min-height: 92px; padding: 4px 24px; width: 100%; max-width: 560px; margin: 0 auto; }
.startdraw .sd-row.me { min-height: 96px; }
.startdraw .sd-spread { position: relative; flex: 1; min-height: 0; margin: 4px 10px; }
.startdraw .sd-foot { height: max(18px, var(--sab) + 10px); }
/* Tauziehen (v268): Gegner links, Betrachter rechts, Seil dazwischen; der Knoten wandert zur höheren Summe (Quart), die führende Seite leuchtet */
.startdraw .sd-tug { display: grid; grid-template-columns: minmax(0, 1fr) minmax(90px, 1.4fr) minmax(0, 1fr); align-items: center; gap: 10px; width: 100%; max-width: 560px; margin: 2px auto 0; padding: 6px 24px; }
.startdraw .sd-side { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 6px 8px; border-radius: 14px; border: 1.5px solid rgba(255,255,255,.14); background: rgba(8,10,40,.45); transition: box-shadow calc(var(--motion-normal) * .5) var(--motion-ease), border-color calc(var(--motion-normal) * .5) var(--motion-ease), transform calc(var(--motion-normal) * .5) var(--motion-ease); }
.startdraw .sd-side.lead { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 0 22px rgba(47,180,255,.75); transform: scale(1.04); }
.startdraw .sd-side.top.lead { box-shadow: 0 0 0 1.5px rgba(255,255,255,.75), 0 0 22px rgba(255,138,0,.75); }
.startdraw .sd-name { font: 800 10px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--surface-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.startdraw .sd-total { font: italic 700 30px/1 var(--font-display); } .startdraw .sd-total.pop { animation: sdBadge calc(var(--motion-fast) * .5) var(--motion-ease) both; }
.startdraw .sd-calc { font: 600 11px var(--font-body); color: var(--surface-muted); min-height: 14px; }
/* v368 (A1 „Energie“, User 2026-10-19: „Bitte A1, sonst nichts. Animations speed bitte verdoppeln“): 14 Zellen, Gegner orange von links, Betrachter blau von rechts, Füllung im Verhältnis der Summen;
   Naht springt mit Nachschwingen (310 ms), Stoßring, Zellen neben der Naht leuchten kurz, führende Seite pulsiert, Gleichstand flackert, am Ende Blitz und Sprung zur Gewinnerseite */
.startdraw .sd-bar { --k: 50%; position: relative; height: 18px; display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; padding: 3px; border-radius: 999px; background: rgba(8,10,40,.55); box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
.startdraw .sd-bar i { display: block; border-radius: 4px; background: rgba(255,255,255,.1); transition: background 90ms var(--motion-ease), box-shadow 90ms var(--motion-ease), transform 110ms cubic-bezier(.34,1.56,.64,1); transition-delay: var(--d, 0ms); }
.startdraw .sd-bar i.t { background: linear-gradient(180deg, #FFB457, var(--tier-stage1)); } .startdraw .sd-bar i.m { background: linear-gradient(180deg, #8FE0FF, var(--brand-sky)); }
.startdraw .sd-bar i.edge { box-shadow: 0 0 10px 2px rgba(255,255,255,.75); transform: scaleY(1.25); background: #fff; }
.startdraw .sd-bar .sd-seam { position: absolute; top: -4px; bottom: -4px; left: var(--k); width: 4px; margin-left: -2px; border-radius: 2px; background: #fff; box-shadow: 0 0 12px 3px rgba(255,255,255,.7); transition: left 310ms cubic-bezier(.34,1.56,.64,1); }
.startdraw .sd-bar .sd-shock { position: absolute; top: 50%; left: var(--k); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #fff; opacity: 0; pointer-events: none; }
.startdraw .sd-bar.hit .sd-shock { animation: sdShock .28s cubic-bezier(.2,.7,.2,1) both; } @keyframes sdShock { from { transform: scale(.3); opacity: .95; } to { transform: scale(2.6); opacity: 0; } }
.startdraw .sd-bar.lead-t i.t, .startdraw .sd-bar.lead-m i.m { animation: sdPulse .6s ease-in-out infinite alternate; } @keyframes sdPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.startdraw .sd-bar.tie .sd-seam { animation: sdFlick .3s steps(2) infinite; } @keyframes sdFlick { from { opacity: 1; } to { opacity: .35; } }
.startdraw .sd-bar .sd-flash { position: absolute; inset: -10px; border-radius: 999px; background: #fff; opacity: 0; pointer-events: none; }
.startdraw .sd-bar.win .sd-flash { animation: sdFlash .3s ease-out both; } @keyframes sdFlash { from { opacity: .9; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .startdraw .sd-bar i, .startdraw .sd-bar .sd-seam { transition: none; } .startdraw .sd-bar.lead-t i.t, .startdraw .sd-bar.lead-m i.m, .startdraw .sd-bar.tie .sd-seam, .startdraw .sd-bar.hit .sd-shock { animation: none; } }
.startdraw .sd-card, .startdraw .sd-slot { position: relative; border-radius: 6px; overflow: visible; box-shadow: 0 4px 14px rgba(8,10,40,.6); }
.startdraw .sd-card img, .startdraw .sd-slot img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 6px; user-select: none; -webkit-user-drag: none; }
.startdraw .sd-card { position: absolute; transform: rotate(var(--a)); transition: transform 75ms var(--motion-ease), opacity calc(var(--motion-normal) * .5) var(--motion-ease), box-shadow 60ms var(--motion-ease); } /* v368: Zeiten halbiert */ /* v268: Heben und Senken schneller */
.startdraw .sd-card.hot { transform: rotate(var(--a)) translateY(-18px) scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.7); z-index: 60 !important; }
.startdraw .sd-card.picked { transform: rotate(var(--a)) translateY(-26px) scale(1.06); box-shadow: 0 0 0 2px var(--brand-sky), 0 0 22px var(--brand-sky); z-index: 61 !important; }
.startdraw .sd-card.flip { transition: transform 75ms cubic-bezier(.5,0,.75,0); transform: rotate(var(--a)) translateY(-26px) scale(1.06) rotateY(90deg); }
.startdraw .sd-card.shown { transition: transform 90ms cubic-bezier(.25,1,.5,1); }
.startdraw .sd-card.gone { opacity: 0; pointer-events: none; }
.startdraw .sd-card.dim { opacity: .18; }
.startdraw .sd-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; background: conic-gradient(#fff calc(var(--p, 0) * 1turn), rgba(255,255,255,.22) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); transition: opacity var(--motion-fast) var(--motion-ease); }
.startdraw .sd-card.hot .sd-ring { opacity: 0; } /* kein Hold-Ring mehr (User 2026-10-06): Loslassen zieht */
.startdraw .sd-slot { width: 64px; aspect-ratio: 600 / 819; transform: scale(.6); opacity: 0; transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.startdraw .sd-slot.in { transform: none; opacity: 1; transition: none; } /* Landung ohne Sprung: der Flug (sd-fly) endet exakt auf dem Platz */
.startdraw .sd-fly { position: absolute; z-index: 80; border-radius: 6px; pointer-events: none; will-change: transform; transform: translate(-50%, -50%); } .startdraw .sd-fly img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: 6px; }
.startdraw .sd-slot.opp img { transform: rotate(180deg); } /* Gegnerkarte zum Gegner gedreht, das Wert-Schild bleibt lesbar */
.startdraw .sd-badge.pop { animation: sdBadge calc(var(--motion-fast) * .5) var(--motion-ease) both; } @keyframes sdBadge { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.startdraw .sd-badge { position: absolute; right: 4px; bottom: 4px; padding: 1px 7px; border-radius: 999px; background: var(--brand-indigoDeep); font: italic 700 14px var(--font-display); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.startdraw .sd-banner { position: absolute; left: 50%; width: min(calc(100% - 48px), 440px); translate: -50% 0; top: 50%; z-index: 70; transform: translateY(-50%) scale(.9); opacity: 0; text-align: center; padding: 16px 12px; border-radius: 20px; background: linear-gradient(180deg, var(--tier-stage1), var(--brand-indigoDeep)); box-shadow: 0 0 0 2px #fff, 0 0 40px rgba(0,173,226,.6); transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease); }
.startdraw .sd-banner.win { background: linear-gradient(180deg, var(--brand-sky), var(--brand-indigo)); }
.startdraw .sd-banner.in { opacity: 1; transform: translateY(-50%) scale(1); }
.startdraw .sd-banner .sd-eyebrow { color: #fff; opacity: .85; }
.startdraw .sd-who { font: italic 700 30px/1 var(--font-display); text-transform: uppercase; margin-top: 4px; }
.startdraw, .startdraw .sd-banner, .startdraw .sd-slot { transition-duration: calc(var(--motion-normal) * .5); } /* v368: Ein- und Ausblenden halb so lang */
.startdraw .sd-go { appearance: none; border: 0; cursor: pointer; margin-top: 12px; padding: 10px 22px; border-radius: 999px; background: #fff; color: var(--brand-indigoDeep); font: italic 700 16px var(--font-display); text-transform: uppercase; }

/* EvoDraft-Bildschirm (Auswahlseite draft; Anordnungen A Booster-Tisch, B Große Auswahl, C Fächer) */
.draft { position: absolute; inset: 0; z-index: 60; display: flex; flex-direction: column; color: #fff; overflow: hidden; touch-action: none; background: radial-gradient(circle at 50% 30%, var(--splash-center) 0%, var(--splash-mid) 30%, var(--splash-deep) 62%, var(--splash-edge) 100%); transition: opacity var(--motion-normal) var(--motion-ease); }
.draft.out { opacity: 0; }
.draft .dr-head { padding: 12px 14px 4px; text-align: center; }
.draft .dr-eyebrow { font: 800 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); }
.draft .dr-title { font: italic 700 24px/1.05 var(--font-display); text-transform: uppercase; }
.draft .dr-sub { font: 600 12px var(--font-body); color: var(--surface-muted); margin-top: 2px; }
.draft .dr-lab { display: flex; justify-content: space-between; align-items: center; padding: 2px 14px; font: 800 11px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--surface-muted); }
.draft .dr-quota { font: 700 11px var(--font-body); letter-spacing: .04em; color: var(--brand-skyLight); }
.draft .dr-picks { display: flex; gap: 4px; padding: 2px 14px; min-height: 48px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.draft .dr-mini { width: 32px; aspect-ratio: 600 / 819; border-radius: 4px; overflow: hidden; flex: none; box-shadow: 0 2px 8px rgba(8,10,40,.6); border: 1.5px solid transparent; }
.draft .dr-mini.base { border-color: var(--tier-base); } .draft .dr-mini.stage1 { border-color: var(--tier-stage1); } .draft .dr-mini.stage2 { border-color: var(--tier-stage2); }
.draft .dr-mini img, .draft .dr-card img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.draft .dr-order { display: flex; gap: 4px; justify-content: center; padding: 4px; }
.draft .dr-ord { font: 700 10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--surface-muted); }
.draft .dr-ord.now { background: var(--brand-sky); color: #fff; box-shadow: 0 0 10px var(--brand-sky); } .draft .dr-ord.me:not(.now) { color: var(--brand-skyLight); }
.draft .dr-tabs { display: flex; gap: 4px; padding: 4px 14px; }
.draft .dr-tab { flex: 1; appearance: none; border: 0; font: 700 12px var(--font-body); color: var(--surface-muted); background: rgba(255,255,255,.08); border-radius: 999px; padding: 6px 4px; display: flex; justify-content: center; gap: 6px; }
.draft .dr-tab.on { background: var(--state-active); color: #fff; } .draft .dr-tab.done { opacity: .5; } .draft .dr-tabn { opacity: .75; font-weight: 600; }
.draft .dr-mid { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; overflow: hidden; }
.draft .dr-row { display: flex; flex-direction: column; gap: 2px; min-height: 0; }
.draft .dr-rowcap { display: flex; justify-content: space-between; padding: 0 14px; font: 800 10px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--surface-muted); }
.draft .dr-row.cur .dr-rowcap { color: var(--brand-skyLight); }
.draft .dr-strip { display: flex; gap: 6px; padding: 4px 14px; overflow-x: auto; scrollbar-width: none; align-items: center; }
.draft .dr-card { position: relative; flex: none; width: 92px; aspect-ratio: 600 / 819; border-radius: 7px; overflow: visible; box-shadow: 0 4px 14px rgba(8,10,40,.6); transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.draft .dr-card img { border-radius: 7px; }
.draft .dr-card.taken { opacity: .22; filter: grayscale(.6); } .draft .dr-card.taken.mine { outline: 2px solid var(--brand-sky); outline-offset: -2px; }
.draft .dr-card.sel { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 2px #fff, 0 0 20px rgba(255,255,255,.7); z-index: 5; }
.draft .dr-noimg { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--font-body); background: var(--surface-panelCard); border-radius: 7px; text-align: center; padding: 4px; }
.draft-A .dr-row.later .dr-card, .draft-A .dr-row.done .dr-card { width: 46px; } .draft-A .dr-row.cur { flex: 1; } .draft-A .dr-row.cur .dr-card { width: 112px; }
.draft-A .dr-row.later, .draft-A .dr-row.done { opacity: .75; }
.draft-B .dr-strip { flex-wrap: wrap; justify-content: center; align-content: center; flex: 1; gap: 8px; overflow: hidden; } .draft-B .dr-card { width: calc((100% - 3 * 8px) / 4); max-width: 96px; } .draft-B .dr-row { flex: 1; }
.draft-B .dr-row.stage2 .dr-card { width: calc((100% - 2 * 8px) / 3); max-width: 110px; }
.draft-C .dr-strip { position: absolute; inset: 0; overflow: visible; padding: 0; display: block; } .draft-C .dr-card { position: absolute; left: calc(50% - 50px); top: 14%; width: 100px; transform-origin: 50% 300px; transform: rotate(var(--a)); transition: transform var(--motion-normal) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.draft-C .dr-card.hot { transform: rotate(var(--a)) translateY(-22px) scale(1.06); box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(255,255,255,.7); z-index: 60 !important; }
.draft-C .dr-card.sel { transform: rotate(var(--a)) translateY(-30px) scale(1.06); }
.draft-C .dr-ring { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; pointer-events: none; background: conic-gradient(#fff calc(var(--p, 0) * 1turn), rgba(255,255,255,.22) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); transition: opacity var(--motion-fast) var(--motion-ease); }
.draft-C .dr-card.hot .dr-ring { opacity: 1; }
.draft .dr-bar { display: flex; align-items: center; gap: 8px; padding: 6px 14px; min-height: 44px; }
.draft .dr-info { flex: 1; font: 600 12px/1.25 var(--font-body); color: var(--surface-muted); min-width: 0; }
.draft .dr-take, .draft .dr-go { appearance: none; border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px; background: var(--brand-sky); color: #fff; font: italic 700 15px var(--font-display); text-transform: uppercase; flex: none; box-shadow: 0 0 16px rgba(47,180,255,.5); }
.draft .dr-take:disabled { opacity: .4; box-shadow: none; } .draft .dr-go { background: #fff; color: var(--brand-indigoDeep); }
.dr-fly { position: fixed; z-index: 1000; pointer-events: none; border-radius: 7px; overflow: hidden; box-shadow: 0 8px 24px rgba(8,10,40,.7); } .dr-fly img { width: 100%; height: 100%; object-fit: cover; }

.evoinfo { padding: 12px 14px; border-radius: 14px; background: var(--surface-panel); border: 1px solid var(--surface-line); }
.evosteps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.35; }

/* EvoCraft-Deckbau */
.craft { display: flex; flex-direction: column; gap: 8px; }
.craftsum { display: flex; align-items: baseline; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-panel); border: 1px solid var(--surface-line); } .craftsum.ok { border-color: var(--state-active); }
.craftn { font-size: 22px; } .craftstages { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .crafttools { display: flex; gap: 6px; }
.craftgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.crafttile { position: relative; overflow: visible; } .crafttile img { border-radius: 6px; opacity: .55; transition: opacity var(--motion-fast) var(--motion-ease); } .crafttile.in img { opacity: 1; }
.crafttile.in { box-shadow: 0 0 0 2px var(--brand-sky), 0 4px 12px rgba(14,17,64,.45); }
.craftbadge { position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font-body); color: #fff; background: var(--surface-muted); box-shadow: 0 1px 4px rgba(14,17,64,.5); }
.crafttile.in .craftbadge { background: var(--brand-sky); }
.crafttile.shake { animation: craftshake .4s var(--motion-ease); } @keyframes craftshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.seg2.modes button { padding: 0 4px; font-size: 12px; letter-spacing: .3px; white-space: nowrap; }

/* Spielerprofil (Aufgabe #60) – Grundfassung */
.namesheet { display: flex; flex-direction: column; gap: 10px; }
.nameinput { height: 46px; border-radius: 12px; border: 1px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); color: var(--surface-ink); font: 700 18px var(--font-body); padding: 0 14px; } .nameinput:focus { outline: none; border-color: var(--brand-sky); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-sky) 40%, transparent); }
.pfhead { display: flex; align-items: center; gap: 14px; }
.pfavatar { appearance: none; border: 0; width: 84px; height: 84px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-sky), 0 8px 20px rgba(14,17,64,.5); cursor: pointer; }
.pfname { appearance: none; border: 0; background: none; color: var(--surface-ink); display: flex; align-items: center; gap: 8px; font-size: 26px; cursor: pointer; padding: 0; min-width: 0; } .pfname .display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pfname .glyph { width: 16px; height: 16px; color: var(--surface-muted); }
.pfstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pfstat { padding: 10px; border-radius: 12px; background: var(--surface-panel); border: 1px solid var(--surface-line); text-align: center; } .pfnum { font-size: 24px; }
.pfgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .pfav { appearance: none; border: 0; aspect-ratio: 1; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 2px transparent; } .pfav.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-sky); }
.pfav { position: relative; background-size: 86% auto; } .pfav.locked { filter: grayscale(1) brightness(.55); cursor: default; } .pfav.locked .glyph { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; --icon-color: #fff; } .pfhint { margin-top: 10px; font-size: 12px; color: var(--surface-muted); line-height: 1.35; }
.namerow { display: flex; gap: 10px; justify-content: flex-end; align-items: center; } .namerow .btn.primary { min-width: 150px; }
/* Konto sichern (Entscheidung r-0050, v159): Anbieter-Knöpfe als volle Pillen wie .btn.primary; Google hell mit dem farbigen „G“ (Schrift Indigo statt Schwarz), Discord in Blurple, E-Mail in der Basisfarbe */
.acctsheet { width: 100%; max-width: 360px; } .acctlead { font-size: calc(14px * var(--text-k)); line-height: 1.4; margin-bottom: 6px; }
.btn.acctbtn { width: 100%; height: 48px; gap: 10px; } .btn.acctbtn img { width: 20px; height: 20px; flex: none; }
.btn.acct-mail { --acc: var(--tier-base); } .btn.acct-discord { --acc: #5865F2; }
.btn.acct-google { --acc: #FFFFFF; background: #FFFFFF; color: var(--brand-indigoDeep); text-shadow: none; }
.acctnote { font-size: calc(13px * var(--text-k)); line-height: 1.4; color: var(--surface-ink); opacity: 0; max-height: 0; overflow: hidden; transition: opacity var(--motion-normal) var(--motion-ease), max-height var(--motion-normal) var(--motion-ease); } .acctnote.on { opacity: .9; max-height: 80px; }
/* Entwicklung wählen (User 2026-10-06): Karten als Bilder, Zielposition als Band oben, etwas größer als die Ablage-Auswahl */
.cardpick.evopick { width: 52px; } .cardpick.evopick .postag { position: absolute; left: 0; right: 0; top: 0; font-size: 10px; font-weight: 700; color: #fff; text-align: center; padding: 2px 0; background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); text-shadow: 0 1px 2px rgba(14,17,64,.5); }

/* Button-Animation (Entscheidung 2026-10-06-button-fx): Textur „Glas“ mit 150 % auf allen gefüllten Knöpfen – feine Lichtlinie oben, weiche Innenschattierung
   unten, eine große sehr weiche Spiegelung gleitet in 10 s von links nach rechts und zurück. Rand bleibt unberührt (kein box-shadow am Knopf selbst). */
:root { --btnfx: 1.5; }
.ibtn.primary, .btn.primary, .btn.cta, .seg2 button.on, .pills .pill.on, .hand .hseg.on { position: relative; overflow: hidden; isolation: isolate; }
:is(.ibtn.primary, .btn.primary, .btn.cta, .seg2 button.on, .pills .pill.on, .hand .hseg.on) > * { position: relative; z-index: 2; }
:is(.ibtn.primary, .btn.primary, .btn.cta, .seg2 button.on, .pills .pill.on, .hand .hseg.on)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 92% 62% at 50% 0%, rgba(255,255,255,calc(.22 * var(--btnfx))) 0%, rgba(255,255,255,calc(.08 * var(--btnfx))) 55%, transparent 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,calc(.5 * var(--btnfx))), inset 0 -10px 16px rgba(14,17,64,calc(.22 * var(--btnfx))); pointer-events: none; z-index: 1; } /* Highlight als Ellipse an der Oberkante, keine gerade Kante auf der Pille (User 2026-10-06) */
:is(.ibtn.primary, .btn.primary, .btn.cta, .seg2 button.on, .pills .pill.on, .hand .hseg.on)::after { content: ""; position: absolute; top: 6%; bottom: 6%; left: -10%; width: 44%; border-radius: 999px; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255,255,255,calc(.24 * var(--btnfx))) 0%, rgba(255,255,255,calc(.08 * var(--btnfx))) 45%, transparent 72%); animation: btnGlass 10s cubic-bezier(.45,0,.55,1) infinite alternate; pointer-events: none; z-index: 1; } /* Spiegelung: weiche Ellipse innerhalb der Knopfhöhe */
@keyframes btnGlass { from { transform: translateX(0); } to { transform: translateX(150%); } }
/* Spielen: dazu der langsame Glanzlauf (10-s-Takt, der Streifen braucht 6 s) und ein atmender Schein über filter (der weiße Rand bleibt) */
.ibtn.hubplay .sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.ibtn.hubplay .sheen::after { content: ""; position: absolute; inset: -40% -70%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.18) 46%, rgba(255,255,255,.4) 50%, rgba(255,255,255,.18) 54%, transparent 62%); transform: translateX(-130%); animation: btnSheen 10s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes btnSheen { 0%, 40% { transform: translateX(-130%) } 100% { transform: translateX(130%) } }
.ibtn.hubplay { animation: btnGlow 3.6s ease-in-out infinite; }
@keyframes btnGlow { 0%, 100% { filter: drop-shadow(0 0 6px rgba(47,180,255,.35)); } 50% { filter: drop-shadow(0 0 18px rgba(189,245,255,.8)); } }
/* Klick: Einsinken (button-fx.js setzt .pressing), Funken als feste Punkte über allem */
:is(.btn, .ibtn, .seg2 button, .pills .pill, .tile) { transition: transform 160ms var(--motion-ease), filter 160ms var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) var(--motion-ease), border-color var(--motion-fast) var(--motion-ease); }
:is(.btn, .ibtn, .seg2 button, .pills .pill, .tile).pressing { transform: scale(.965) !important; filter: brightness(.92); } /* kein Versatz nach unten: in scrollenden Listen wurde die Unterkante abgeschnitten (User 2026-10-06) */
.ibtn.hubplay.pressing { animation-play-state: paused; }
.btnspark { position: fixed; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(189,245,255,.9); pointer-events: none; z-index: 999; }
.reduce-motion :is(.ibtn.primary, .btn.primary, .btn.cta, .seg2 button.on, .pills .pill.on, .hand .hseg.on)::after, .reduce-motion .ibtn.hubplay .sheen::after, .reduce-motion .ibtn.hubplay { animation: none; }

/* Hauptmenü-Pillen (User 2026-10-06): Schnellstart, Karten, Decks, Profil im .btn-Stil statt Kacheln; Kacheln bleiben in Untermenüs */
/* (alte .btn.hubbtn-Pillen und .hubtrio entfernt: Hauptmenü einheitlich, 2026-10-07) */

/* Ränge (#63): Block im Profil – Badge, Rangname, Fortschrittsbalken; je Modus eine Zeile; Rangleiter aufklappbar */
.rankblock { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface-panel); border: 1px solid var(--surface-line); }
.rankhead { display: flex; align-items: center; gap: 14px; } .rankbadge svg { display: block; filter: drop-shadow(0 6px 12px rgba(14,17,64,.5)); } .rankinfo { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.rankname { font-size: 24px; line-height: 1; }
.rankbar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); border: 1px solid var(--surface-line); overflow: hidden; } .rankbar .fill { height: 100%; border-radius: 999px; transition: width var(--motion-slow) var(--motion-ease); min-width: 4px; }
.rankmodes { display: flex; flex-direction: column; gap: 8px; } .rankrow { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; } .rankmini svg { display: block; } .ranktx { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .rankmode { font-size: 13px; font-weight: 700; } .rankdiv { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 14px; text-transform: uppercase; color: var(--surface-muted); }
.rankladder summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .rankladder summary::-webkit-details-marker { display: none; } .rankladder summary .glyph { width: 16px; height: 16px; transition: transform var(--motion-fast) var(--motion-ease); } .rankladder[open] summary .glyph { transform: rotate(180deg); }
.rankladderrow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px 4px; margin-top: 10px; } .rankstep svg, .rankbadge svg, .rankmini svg { overflow: visible; }
.reduce-motion .rankblock svg animate, .reduce-motion .rankblock svg animateTransform { display: none; } .rankstep { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; opacity: .55; } .rankstep.on { opacity: 1; } .rankstep svg { display: block; } .rankstep .tiny { font-size: 9px; line-height: 1.1; color: var(--surface-muted); } .rankstep.on .tiny { color: var(--surface-ink); font-weight: 700; }

/* Profil-Kopf „Spielerkarte“ (Entscheidung 2026-10-06-profile) */
.pfcard { position: relative; border-radius: 22px; padding: 16px; display: flex; gap: 14px; align-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-indigo) 85%, transparent), color-mix(in srgb, var(--brand-sky) 45%, var(--brand-indigoDeep))); box-shadow: inset 0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--surface-strokeDark), 0 16px 34px rgba(14,17,64,.5); }
.pfcardav { appearance: none; border: 0; width: 96px; height: 128px; border-radius: 12px; flex: none; box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(14,17,64,.6); cursor: pointer; background-size: 86% auto !important; background-repeat: no-repeat; }
.pfcardtxt { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; } .pfcardtxt .pfname .display { font-size: 26px; } .pfed { color: var(--brand-skyLight); }
.pfkpi { display: flex; gap: 14px; } .pfkpi .pfnum { font-size: 22px; line-height: 1; } .pfkpilab { font: 800 10px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--brand-skyLight); }

/* Rang auf dem Ergebnis-Bildschirm (#63) */
.rankresult { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: 16px; background: var(--surface-panel); border: 1px solid var(--surface-line); box-sizing: border-box; }
.rankresult .rankinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rankresult .rankname { font-size: 22px; line-height: 1; }
.rankdelta { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 16px; text-transform: uppercase; color: var(--state-active); } .rankdelta.neg { color: var(--brand-orange, #FF914D); }
.rankmsg { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15px; text-transform: uppercase; color: #fff; animation: rankPop var(--motion-normal) var(--motion-ease) both; }
.rankresult.switched .rankbadge svg { animation: rankPop 600ms var(--motion-ease) both; }
@keyframes rankPop { from { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.12); opacity: 1; } to { transform: scale(1); opacity: 1; } }
.reduce-motion .rankmsg, .reduce-motion .rankresult.switched .rankbadge svg { animation: none; }

/* Ansichtsstufen (Entscheidung 2026-10-07-view-levels): drei kleine Knöpfe links am Brettrand auf Höhe des Flusses */
.boardwrap.gutter canvas { left: 32px; width: calc(100% - 32px) !important; }
.viewbtns { position: absolute; left: 1px; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; flex-direction: column; gap: 6px; }
.viewbtn { appearance: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); color: var(--surface-muted); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
.viewbtn .glyph { width: 15px; height: 15px; } .viewbtn.on { background: var(--tier-base); color: #fff; border-color: var(--surface-strokeLight); box-shadow: 0 0 0 2px var(--surface-strokeDark); }
/* Ansichtsknöpfe bleiben während einer Frage bedienbar (User 2026-10-07) */
/* Positionsblatt (Stufe 3): über dem Brett, Karte groß mit angeschnittenen Nachbarn, darunter Klartext */
.posview { position: absolute; inset: 0 0 0 32px; z-index: 4; background: color-mix(in srgb, var(--surface-bg) 92%, transparent); display: flex; flex-direction: column; gap: 10px; padding: 10px; box-sizing: border-box; overflow: hidden; }
.posstrip { display: grid; grid-template-columns: 18% 1fr 18%; gap: 8px; align-items: center; flex: none; }
.posslot { aspect-ratio: 600 / 819; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); opacity: .5; cursor: pointer; display: grid; place-items: center; } .posslot.cur { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 12px 30px rgba(14,17,64,.6); cursor: default; max-height: 44vh; justify-self: center; }
.posslot img { display: block; width: 100%; height: 100%; object-fit: cover; } .posempty { font-size: 11px; color: var(--surface-muted); }
.posinfo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; } .poshead .posname { font-size: 24px; line-height: 1; }
.possec { display: flex; flex-direction: column; gap: 6px; } .posrow { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--surface-panel); border: 1px solid var(--surface-line); }
.posdot { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 3px; box-shadow: 0 0 0 1.5px #fff; } .posdot.sub { background: var(--tier-stage1); } .posrowtx { min-width: 0; font-size: 13px; line-height: 1.3; } .posrowtx b { display: block; }
.posview.pos-B { flex-direction: row; } .posview.pos-B .posstrip { grid-template-columns: 1fr; grid-template-rows: 14% 1fr 14%; width: 44%; align-self: stretch; } .posview.pos-B .posslot { aspect-ratio: auto; min-height: 0; height: 100%; } .posview.pos-B .posslot.cur { max-height: none; justify-self: stretch; }

/* River-Bilder seit Nachschnitt C (2026-10-07) im Verhältnis 63:88: in jedem Rahmen deckend statt gestreckt */
img[src*="/assets/rivers/"] { object-fit: cover; }

/* Lobby (Online-Multiplayer, 2026-10-07) */
.lobby { padding: 0 16px; gap: 12px; } .lobby .field { display: flex; flex-direction: column; gap: 4px; } .lobby input { width: 100%; box-sizing: border-box; height: 44px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); color: var(--surface-ink); font: 600 15px var(--font-body); }
.lobby .center { text-align: center; } .lobby .srvpills .pill { --acc: var(--brand-sky); flex: 1 1 0; } .lobby .srvpills .pill.on { --acc: var(--brand-sky); } .lobbyjoin { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; } .lobbyjoin input { text-transform: uppercase; letter-spacing: .2em; font-size: 18px; text-align: center; }
.lobbycode { text-align: center; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); border: 1.5px solid var(--surface-line); } .lobbycode .display.big { font-size: 40px; letter-spacing: .18em; }
.lobbystatus { min-height: 20px; text-align: center; }
/* Lobby lesbar (User 2026-10-07): Schriften nach Type-Scale – Labels Barlow 600 11px, Name Display (heading), Hinweise small; Text in Weiß statt Grau auf dem blauen Grund */
.lobby .eyebrow { color: color-mix(in srgb, var(--surface-ink) 72%, transparent); letter-spacing: .6px; }
.lobby .field { gap: 10px; } /* .pills frisst 8px per negativem Rand (Platz für den Leuchtrand) – 10px lassen sichtbar 2px + Rand, das Label klebt nicht mehr */
.lobbyme { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); border: 1.5px solid var(--surface-line); }
.lobbywho { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .lobbywho .eyebrow { white-space: nowrap; } .lobbyname { font-size: 22px; color: var(--surface-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acctchip { flex: 0 1 auto; max-width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 13px/18px var(--font-body); color: var(--surface-ink); background: color-mix(in srgb, var(--surface-ink) 10%, transparent); }
.acctchip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #FF914D; } .acctchip.ok::before { background: var(--state-active); } .acctchip.wait::before { background: var(--surface-muted); }
.lobbyhint { margin-top: -4px; text-align: center; font: 400 13px/18px var(--font-body); color: color-mix(in srgb, var(--surface-ink) 78%, transparent); }
.lobbyor { display: flex; align-items: center; gap: 10px; } .lobbyor::before, .lobbyor::after { content: ""; flex: 1; height: 1px; background: var(--surface-line); }
.lobbyjoin { grid-template-columns: minmax(0, 1fr) auto; } .lobbyjoin .ibtn { padding-left: 14px; padding-right: 14px; } .lobbyjoin input { min-width: 0; padding: 0 6px; font: 700 21px var(--font-display); font-style: normal; font-variant-numeric: tabular-nums; letter-spacing: .16em; } /* Code: Barlow Condensed aufrecht (Typ „number“) */
.lobbyjoin input::placeholder { font-family: var(--font-display); font-style: italic; font-weight: 700; letter-spacing: .16em; color: color-mix(in srgb, var(--surface-ink) 45%, transparent); }
/* Raum (2026-10-07): Sitze, Deck-/Moduspillen, Chat, Einladung */
.roomshare { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; } .roomshare .btn { height: 40px; padding: 0 18px; } .roomshare .small { font-size: 12px; min-height: 14px; }
.roomseats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .roomseat { padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 45%, transparent); display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.roomseat.me { border-color: var(--brand-sky); } .roomseat.ready { border-color: var(--state-active); box-shadow: 0 0 0 3px color-mix(in srgb, var(--state-active) 35%, transparent); }
.roomseat .seatname { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .roomseat .seatdeck { font-size: 12px; } .roomseat .seatstate { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--surface-muted); } .roomseat .seatstate.on { color: var(--state-active); }
.lobby .modepills .pill, .lobby .deckpills .pill { --acc: var(--brand-sky); flex: 1 1 0; } .lobby .deckpills .pill { flex: 1 1 calc(33% - 6px); height: 36px; font-size: 13px; }
.readybtn.on { filter: saturate(.7) brightness(.85); }
.roomchat { display: flex; flex-direction: column; gap: 6px; } .chatlist { min-height: 72px; max-height: 160px; overflow-y: auto; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 45%, transparent); display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.chatmsg .who { font-weight: 700; color: var(--brand-sky); margin-right: 6px; } .chatmsg.me .who { color: var(--state-active); } .chatmsg .txt { overflow-wrap: anywhere; } .chatrow input { text-transform: none; letter-spacing: 0; font-size: 14px; text-align: left; }
.roomscreen { padding-bottom: 24px; }
.roomseat .seatstate.off { color: var(--surface-muted); opacity: .7; } .roomseat .kickbtn { margin-top: 6px; height: 30px; padding: 0 10px; font-size: 12px; align-self: flex-start; }
.lobby .linesbtn { margin-top: 6px; height: 40px; }
/* Ranked (v405): Einstieg in der Lobby, Leiter, Forderungen, Ergebnis-Karte */
.srmodes .ibtn.hubbtn { padding: 0 12px; gap: 8px; } .srmodes .ibtn.hubbtn .lbl { font-size: 17px; white-space: nowrap; } .srmodes .livebtn .sub { text-transform: uppercase; letter-spacing: .08em; }
.srscreen { padding-bottom: 24px; }
.srtop .srseason, .srme { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); border: 1.5px solid var(--surface-line); }
.srseason .display { font-size: 18px; } .srseason .muted { margin-left: auto; font-size: 13px; white-space: nowrap; }
.srme { flex-direction: column; align-items: stretch; gap: 4px; border-color: var(--brand-sky); } .srme > .display { font-size: 18px; text-align: center; } .srme .btn { align-self: center; min-width: 160px; }
.srstat { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 4px 12px; } .srstat .display.big { font-size: 34px; line-height: 1; } .srstat .srdots { grid-column: 1 / -1; }
.srdots { display: flex; gap: 6px; } .srdots span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--surface-line); } .srdots span.on { background: var(--state-active); }
.srsect { display: flex; flex-direction: column; gap: 6px; } .srlist { display: flex; flex-direction: column; gap: 6px; }
.srrow { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px 4px 10px; border-radius: 12px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 45%, transparent); }
.srrow.chal { grid-template-columns: 40px minmax(0, 1fr) auto; padding-block: 6px; } .srmain { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .srmain .srtags { justify-content: flex-start; }
.chip.plain { border-color: color-mix(in srgb, var(--surface-ink) 45%, transparent); color: color-mix(in srgb, var(--surface-ink) 80%, transparent); }
.srrow.me { border-color: var(--brand-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-sky) 30%, transparent); }
.srrow.won { border-color: color-mix(in srgb, var(--state-active) 70%, transparent); } .srrow.lost { border-color: color-mix(in srgb, var(--tier-stage2) 70%, transparent); }
.srplace { font: 700 15px var(--font-display); font-style: italic; color: var(--brand-sky); font-variant-numeric: tabular-nums; }
.srname { display: flex; align-items: center; gap: 6px; min-width: 0; } .srname .display { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.botchip { flex: none; font-size: 10px; padding: 1px 6px; border-color: var(--surface-muted); color: var(--surface-muted); letter-spacing: .06em; }
.srtags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; grid-column: 3 / span 1; } .srtags .chip { font-size: 11px; white-space: nowrap; }
.srrow .inchip { border-color: var(--tier-stage1); color: var(--tier-stage1); } .srrow .outchip { border-color: var(--brand-sky); color: var(--brand-sky); }
.srpts { font: 700 15px var(--font-display); font-variant-numeric: tabular-nums; text-align: right; min-width: 36px; } .srrec { font-size: 12px; text-align: right; min-width: 72px; }
.srrow .btn.srgo { height: 36px; min-height: 36px; padding: 0 12px; font-size: 13px; min-width: 72px; } .srrow .btn.srx { height: 40px; min-height: 40px; width: 40px; padding: 0; font-size: 24px; line-height: 1; color: var(--surface-ink); }
.srres { font-size: 14px; } .srrow.won .srres { color: var(--state-active); } .srrow.lost .srres { color: var(--tier-stage2); }
.srcard { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--brand-sky); background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); width: min(100%, 420px); box-sizing: border-box; align-self: center; }
/* v407: Saisonbelohnung */ .srreward .panel { align-items: center; text-align: center; gap: 6px; padding-top: 20px; } .srreward .display.big { font-size: 34px; } .srreward .coinsline { margin: 6px 0 4px; } .srreward .cta { width: 100%; margin-top: 6px; }
.srcard .display.big { font-size: 30px; } .srcard .srdots { width: 100%; } .srmove { display: flex; align-items: baseline; gap: 14px; } .srmove .up { color: var(--state-active); } .srmove .down { color: var(--tier-stage2); } .srmove .display:not(.big) { font-size: 22px; }
/* Linienwahl-Blatt (Roadmap 1.3): Kreaturen-Linien der Serie mit Basiskarte, genau N wählen */
.linesheet .head { justify-content: space-between; } .linelist { display: flex; flex-direction: column; gap: 6px; }
.linerow2 { appearance: none; display: grid; grid-template-columns: 44px 1fr 22px; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 12px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 45%, transparent); color: var(--surface-ink); text-align: left; cursor: pointer; }
.linerow2 img { width: 44px; aspect-ratio: 600 / 820; object-fit: cover; border-radius: 4px; } .linerow2 .linetxt .display { font-size: 17px; } .linerow2 .linetxt .muted { font-size: 12px; }
.linerow2 .linechk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--surface-line); display: grid; place-items: center; } .linerow2.on { border-color: var(--brand-sky); } .linerow2.on .linechk { background: var(--brand-sky); border-color: #fff; } .linerow2.on .linechk::after { content: ""; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.linerow2.ext .linetxt .muted { color: var(--brand-sky); }
/* Emotes (Entscheidung 2026-10-07-emotes): Knopf in der eigenen Leiste, Fächer in zwei Bögen, Emoji springt auf und schwebt vom Brettrand weg */
.screen.match { position: relative; }
.emotebtn { appearance: none; flex: 0 0 auto; position: relative; width: 32px; height: 32px; padding: 0; border-radius: 10px; border: 1px solid var(--surface-line); background: var(--surface-panelRaised); display: grid; place-items: center; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease); }
.emotebtn img { width: 20px; height: 20px; } .emotebtn.on { background: var(--brand-sky); border-color: #fff; }
.emotebtn.unread::after { content: ""; position: absolute; right: -1px; top: -1px; width: 9px; height: 9px; border-radius: 50%; background: #FF914D; box-shadow: 0 0 0 2px var(--surface-bg); }
html.lefthand .ownbar .emotebtn { order: -1; }
.emofan { position: absolute; width: 0; height: 0; z-index: 60; pointer-events: none; }
.emofan button { appearance: none; position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: color-mix(in srgb, var(--brand-indigoDeep) 92%, transparent); border: 1.5px solid var(--surface-line); box-shadow: 0 4px 12px rgba(8,10,40,.5); opacity: 0; transform: translate(0, 0) scale(.4); transition: transform 280ms var(--motion-ease), opacity 200ms var(--motion-ease); }
.emofan button img { width: 30px; height: 30px; pointer-events: none; }
.emofan.show { pointer-events: auto; } .emofan.show button { opacity: 1; transform: translate(var(--fx), var(--fy)) scale(1); }
.emofan.show button.hit { transform: translate(var(--fx), var(--fy)) scale(1.25); background: var(--brand-sky); }
.emofan .mute { color: var(--surface-muted); } .emofan .mute i { width: 16px; height: 16px; background: currentColor; -webkit-mask: url("./assets/icons/ui/mute.svg") center / contain no-repeat; mask: url("./assets/icons/ui/mute.svg") center / contain no-repeat; } .emofan .mute.on { color: #FF914D; border-color: #FF914D; }
.emofloat { position: absolute; z-index: 40; left: 50%; width: 56px; height: 56px; pointer-events: none; filter: drop-shadow(0 4px 10px rgba(8,10,40,.55)); }
.emofloat img { width: 100%; height: 100%; }
.emofloat.opp { top: 4px; animation: emoDown 2.4s var(--motion-ease) both; } .emofloat.me { bottom: 4px; animation: emoUp 2.4s var(--motion-ease) both; }
@keyframes emoUp { 0% { opacity: 0; transform: translate(-50%, 20px) scale(.3); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 28% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; transform: translate(-50%, -26px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(.9); } }
@keyframes emoDown { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.3); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 28% { transform: translate(-50%, 0) scale(1); } 75% { opacity: 1; transform: translate(-50%, 26px) scale(1); } 100% { opacity: 0; transform: translate(-50%, 60px) scale(.9); } }

/* Abzeichen (Aufgabe #63, Entscheidung 2026-10-08-badges): Vitrine, Gruppen mit Zeilen und Fortschritt, Stufen-Aufstieg auf dem Ergebnis, Mini-Reihe auf der Spielerkarte */
.bdgblock { display: flex; flex-direction: column; gap: 8px; }
/* Abzeichen im Profil (v230, User 2026-10-13: keine Aufklapp-Listen): Galerie nach Gruppen, darunter jedes Abzeichen als Karte mit Balken und zwei Zeilen */
.bdghead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .bdgcount { font: italic 700 15px/1 var(--font-display); text-transform: uppercase; color: var(--state-onTurn); }
.bdghint { margin-top: -2px; }
.bdgghead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; }
.bdggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.bdgtile { appearance: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border-radius: 16px; color: inherit; font: inherit; cursor: pointer; text-align: center; border: 1px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 60%, transparent); }
.bdgtile.on { border-color: color-mix(in srgb, var(--tc) 55%, transparent); background: radial-gradient(70% 55% at 50% 34%, color-mix(in srgb, var(--tc) 34%, transparent) 0%, transparent 72%), color-mix(in srgb, var(--brand-indigoDeep) 60%, transparent); }
.bdgtile .bdgart { position: relative; width: 76px; height: 76px; display: grid; place-items: center; } .bdgtile .bdgart svg { overflow: visible; }
.bdgtile.off .bdgart svg { filter: grayscale(1) brightness(.8); opacity: .42; } /* gesperrt: Motiv entsättigt, damit das Design schon zu sehen ist */
.bdgtile .bdglock { position: absolute; right: 4px; bottom: 4px; width: 20px; height: 20px; --icon-color: #fff; opacity: .9; }
.bdgtile .bdgtname { font: italic 700 13px/1.05 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; } .bdgtile.off .bdgtname { opacity: .7; }
.bdgtile .bdgtstage { font: 700 11px/1 var(--font-body); color: var(--tc, var(--surface-muted)); } .bdgtile.off .bdgtstage { color: var(--surface-muted); }
.bdgtile .bdgpin { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; --icon-color: var(--state-onTurn); }
.bdgsec { margin-top: 14px; }
.bdgcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 8px; }
.bdgcard { display: flex; gap: 10px; align-items: center; padding: 8px 8px 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); border: 1px solid var(--surface-line); scroll-margin: 80px; }
.bdgcard.flash { animation: bdgFlash 1.2s cubic-bezier(.76,0,.24,1); } @keyframes bdgFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25% { box-shadow: 0 0 0 2px var(--state-onTurn), 0 0 18px rgba(255,210,63,.45); } }
.bdgpinbtn { appearance: none; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--surface-line); background: transparent; cursor: pointer; } .bdgpinbtn .glyph { width: 18px; height: 18px; --icon-color: var(--surface-ink); opacity: .45; }
.bdgpinbtn.on { border-color: var(--state-onTurn); background: color-mix(in srgb, var(--state-onTurn) 18%, transparent); } .bdgpinbtn.on .glyph { --icon-color: var(--state-onTurn); opacity: 1; } .bdgpinbtn:disabled { opacity: .3; cursor: default; }
.bdgnext { color: var(--surface-ink); opacity: .82; }
@media (prefers-reduced-motion: reduce) { .bdgcard.flash { animation: none; } }
.bdgmini { flex: none; width: 52px; height: 52px; display: grid; place-items: center; } .bdgmini svg { overflow: visible; }
.bdgtx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .bdgtop { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; } .bdgname { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bdgval { font-size: 12px; color: var(--surface-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bdgbar { height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; } .bdgbar .fill { height: 100%; border-radius: 99px; background: var(--bc, var(--brand-sky)); } /* Farbe der nächsten Stufe */ .bdgbar .fill.max { background: linear-gradient(90deg, #2FB4FF, #FF914D, #FF3131, #FFFC00); }
.bdgsub { font-size: 12px; color: var(--surface-muted); } .bdgtag { font: 700 10px var(--font-body); letter-spacing: .06em; text-transform: uppercase; padding: 1px 6px; border-radius: 99px; background: var(--brand-sky); color: #0E1140; margin-left: 6px; vertical-align: 1px; }
.bdgups { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 18px; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); border: 1px solid var(--surface-line); } .bdguprow { display: flex; gap: 10px; align-items: center; }
.pfbadges { display: flex; gap: 6px; min-height: 0; } .pfbadges svg { overflow: visible; }
/* Tutorial (Roadmap 4.2, Auswahlseite tutorial): Rahmen um das Bedienelement, A Hinweiskarte, B Sprechblase, C Leiste; Begrüßung und Abschluss als Karte */
.tutring { position: fixed; z-index: 62; pointer-events: none; border-radius: 16px; box-shadow: 0 0 0 2.5px #fff, 0 0 0 6px color-mix(in srgb, var(--brand-sky) 70%, transparent), 0 0 26px color-mix(in srgb, var(--brand-sky) 60%, transparent); animation: tutpulse 1.6s cubic-bezier(.76,0,.24,1) infinite; }
@keyframes tutpulse { 50% { box-shadow: 0 0 0 2.5px #fff, 0 0 0 10px color-mix(in srgb, var(--brand-sky) 35%, transparent), 0 0 34px color-mix(in srgb, var(--brand-sky) 45%, transparent); } }
.reduce-motion .tutring { animation: none; }
.tutveil { position: fixed; inset: 0; z-index: 61; pointer-events: none; }
.tutcard { position: fixed; z-index: 63; left: 50%; transform: translateX(-50%); width: min(calc(100vw - 24px), 380px); box-sizing: border-box; padding: 14px 16px 12px 84px; border-radius: 18px; background: color-mix(in srgb, var(--brand-indigoDeep) 94%, transparent); box-shadow: 0 0 0 1.5px rgba(255,255,255,.35), 0 18px 50px rgba(5,6,30,.6); color: #fff; }
.tutcard.tutcenter { top: 50%; transform: translate(-50%, -50%); padding-top: 18px; }
.tutcard .tutpet { position: absolute; left: 10px; top: 12px; width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(5,6,30,.6)); }
.tuttitle { font: italic 700 20px/1.1 var(--font-display); text-transform: uppercase; margin-bottom: 4px; }
.tuttext { font: 500 calc(14px * var(--text-k, 1))/1.4 var(--font-body); color: rgba(255,255,255,.9); }
.tutfoot { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .tutfoot .tutok { margin-left: auto; flex: none; white-space: nowrap; min-height: 44px; padding: 0 18px; font-size: 17px; } .tutfoot { flex-wrap: wrap; row-gap: 6px; }
.tutstep { font: 700 11px var(--font-body); letter-spacing: .08em; color: var(--brand-skyLight); padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); }
.tutskip { appearance: none; border: 0; background: none; color: rgba(255,255,255,.65); font: 600 13px var(--font-body); padding: 8px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.tutcard .tutfoot .tutskip:last-child { margin-left: auto; }
.tutbubble { position: fixed; z-index: 63; box-sizing: border-box; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; background: #fff; color: var(--brand-indigoDeep); box-shadow: 0 12px 34px rgba(5,6,30,.5); }
.tutbubble .tutpet { width: 40px; height: 40px; object-fit: contain; flex: none; }
.tutbubble .tuttxt { flex: 1; display: flex; flex-direction: column; gap: 2px; font: 500 calc(13.5px * var(--text-k, 1))/1.38 var(--font-body); min-width: 0; }
.tutbubble .tutfoot { margin-top: 4px; } .tutbubble .tutstep { color: var(--brand-indigo); background: color-mix(in srgb, var(--brand-indigo) 12%, transparent); }
.tutbubble .tuttxt b { font: italic 700 16px var(--font-display); text-transform: uppercase; color: var(--brand-indigo); }
.tutbubble .tutskip { color: var(--brand-indigo); margin-left: auto; padding: 4px; }
.tutarrow { position: absolute; bottom: -7px; width: 14px; height: 14px; background: #fff; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.tutbubble.below .tutarrow { bottom: auto; top: -7px; }
.tutbar { position: fixed; z-index: 63; left: 8px; right: 8px; top: max(8px, var(--sat)); display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 14px; background: color-mix(in srgb, var(--brand-indigoDeep) 95%, transparent); box-shadow: 0 0 0 1.5px rgba(255,255,255,.3), 0 10px 30px rgba(5,6,30,.55); color: #fff; }
.tutbar .tutpet { width: 30px; height: 30px; object-fit: contain; flex: none; }
.tutbar .tuttxt { flex: 1; min-width: 0; font: 500 calc(13px * var(--text-k, 1))/1.35 var(--font-body); } .tutbar .tuttxt b { font: italic 700 15px var(--font-display); text-transform: uppercase; color: var(--brand-skyLight); }
.tutbar .tuthead { display: flex; align-items: center; gap: 8px; } .tutbar .tuthead .tutskip { margin-left: auto; padding: 2px 4px; } .tutbar .tutline { display: block; margin-top: 2px; color: rgba(255,255,255,.9); }

/* Fortsetzen nach Neustart (match.js replayCover): deckt das Brett ab, während die Partie ohne Animation nachgespielt wird */
.replaycover { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; gap: 6px; text-align: center; background: radial-gradient(circle at 50% 30%, var(--brand-indigo) 0%, var(--surface-bg) 75%); color: #fff; }
.replaycover .display { font-size: 24px; text-transform: uppercase; }

/* Regelübersicht je Modus (mode-rules.js, User 2026-10-08): dieselben Symbole in Leiste, Übersicht und Blatt; Unterschiede zu Rush 12 himmelblau markiert */
.modedesc { display: grid; gap: 6px; margin: -2px 0 0; } .modedesc .mtag { font-size: 12.5px; color: color-mix(in srgb, var(--surface-ink) 72%, transparent); }
.rulestrip { appearance: none; position: relative; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 6px; border-radius: 14px; border: 1px solid var(--surface-line); background: color-mix(in srgb, var(--surface-panel) 70%, transparent); color: #fff; cursor: pointer; text-align: left; }
.rulestrip .rinfo { position: absolute; right: -6px; top: -7px; box-shadow: 0 0 0 2px var(--surface-bg); width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font: italic 800 12px/1 var(--font-display); color: var(--brand-indigoDeep); background: rgba(255,255,255,.85); }
.rchip { display: inline-flex; align-items: center; min-height: 30px; padding: 2px 6px; border-radius: 999px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.rchip.diff { background: color-mix(in srgb, var(--brand-sky) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--brand-sky); }
.sym { display: inline-flex; align-items: center; gap: 3px; color: #fff; font: 800 13px/1 var(--font-body); white-space: nowrap; } .sym .glyph { width: 16px; height: 16px; }
.minstack { position: relative; width: 24px; height: 24px; flex: none; } .minstack i { position: absolute; width: 14px; height: 19px; border-radius: 2.5px; background: url("./assets/cards/back.webp") center / cover; box-shadow: 0 0 0 1px rgba(255,255,255,.75); }
.minstack i:nth-child(1) { left: 0; top: 5px; } .minstack i:nth-child(2) { left: 3px; top: 2.5px; } .minstack i:nth-child(3) { left: 6px; top: 0; }
.minstack b { position: absolute; right: -6px; bottom: -3px; min-width: 15px; padding: 0 3px; border-radius: 8px; background: #fff; color: var(--brand-indigoDeep); font: 800 10px/14px var(--font-body); text-align: center; }
.stagenums { display: inline-flex; gap: 2px; margin-left: 4px; } .stagenums .sn { min-width: 15px; height: 16px; padding: 0 3px; border-radius: 9px; display: grid; place-items: center; font: 800 10.5px/1 var(--font-body); color: #fff; }
.sn.base { background: var(--tier-base); } .sn.stage1 { background: var(--tier-stage1); } .sn.stage2 { background: var(--tier-stage2); }
.minlp { display: inline-flex; gap: 1px; } .minlp i { width: 4px; height: 11px; border-radius: 1.5px; background: var(--block-green, #00E369); } .minlp.zero i { background: rgba(255,255,255,.22); }
.minslots { display: inline-flex; gap: 2px; } .minslots i { width: 11px; height: 15px; border-radius: 2px; background: var(--tier-base); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); }
.symplace.hidden .minslots i { background: url("./assets/cards/back.webp") center / cover; } .symplace .lockg { width: 12px; height: 12px; } .symplace .eyeg { width: 13px; height: 13px; opacity: .85; } .symplace .secs { font-size: 11px; }
.symdry .xpg { width: 13px; height: 13px; color: var(--fx-gold, #FFD24D); } .symdry .alt { font-size: 12px; opacity: .85; }
.symend .or { opacity: .45; font-weight: 600; } .riverout { position: relative; display: inline-flex; } .riverout::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--state-targeted, #FF3131); transform: rotate(-35deg); border-radius: 1px; }
.mincards { display: inline-flex; } .mincards i { width: 12px; height: 16px; border-radius: 2px; background: var(--tier-base); box-shadow: 0 0 0 1px rgba(255,255,255,.75); } .mincards i + i { margin-left: -6px; transform: translateY(-2px); }
.symdup:not(.two) .mincards i + i { display: none; } .mincards.river i { background: #141747; box-shadow: 0 0 0 1px rgba(255,255,255,.75), inset 3px 3px 0 -1px var(--block-red, #FF3131), inset -3px -3px 0 -1px var(--block-blue, #2FB4FF); }
.symsnake { gap: 4px; } .symsnake .alt { font-size: 14px; opacity: .85; }
.rulescard { display: grid; gap: 8px; padding: 12px 12px 10px; border-radius: 16px; background: var(--surface-panel); border: 1px solid var(--surface-line); }
.rulescard .rtag { font: 600 13.5px/1.35 var(--font-body); color: rgba(255,255,255,.9); margin-top: 2px; }
.rdiff { font: 650 12px/1.35 var(--font-body); color: var(--brand-skyLight); padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--brand-sky) 14%, transparent); } .rdiff.none { color: rgba(255,255,255,.75); background: rgba(255,255,255,.06); }
.rrows, .rflow { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rrow { display: grid; grid-template-columns: 104px 1fr; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; }
.rrow.diff { background: color-mix(in srgb, var(--brand-sky) 11%, transparent); box-shadow: inset 3px 0 0 var(--brand-sky); }
.rrow .rsym { display: flex; align-items: center; min-width: 0; } .rrow .rtx { display: grid; gap: 1px; min-width: 0; } .rrow .rtx b { font: 700 13px/1.25 var(--font-body); } .rrow .rtx span { font: 500 12.5px/1.3 var(--font-body); color: rgba(255,255,255,.8); }
.evorules { display: grid; gap: 12px; }
.rulesheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; background: rgba(5,6,30,.55); opacity: 0; transition: opacity var(--motion-fast) var(--motion-ease); }
.rulesheet.in { opacity: 1; } .rulesheet.out { opacity: 0; }
.rulespanel { position: relative; width: 100%; max-height: 88vh; overflow-y: auto; padding: 14px 12px calc(16px + var(--sab)); border-radius: 20px 20px 0 0; background: var(--surface-bg); box-shadow: 0 -12px 40px rgba(5,6,30,.6); transform: translateY(28px); transition: transform var(--motion-normal) var(--motion-ease); }
.rulesheet.in .rulespanel { transform: none; } .rulespanel .rulescard { border: 0; background: transparent; padding: 4px 2px 0; }
.rulesclose { appearance: none; position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255,255,255,.1); color: #fff; font-size: 16px; cursor: pointer; z-index: 1; }
.reduce-motion .rulesheet, .reduce-motion .rulespanel { transition: none; }

/* Verdeckte Aufstellung (match.js fxHiddenBacks/fxRevealCascade): Rückseiten über den Plätzen, Umdrehen als Kaskade */
.hidback { position: absolute; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7), 0 6px 16px rgba(5,6,30,.5); backface-visibility: hidden; transform-style: preserve-3d; pointer-events: none; }
.hidback img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Status der angreifenden Karte über der Hand (Angriff wählen, RV bezahlen): Symbol und Name in der Status-Farbe, Wirkung kurz (User 2026-10-09) */
.hand { position: relative; }
.handstatus { position: absolute; left: 8px; right: 8px; bottom: 4px; display: flex; flex-wrap: wrap-reverse; justify-content: center; gap: 4px 6px; pointer-events: none; z-index: 60; } /* unten auf der Hand, über den unteren Kartenkanten (die RV-Werte stehen oben) */
.hstat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; background: rgba(14,17,64,.9); box-shadow: 0 0 0 1.5px var(--st), 0 0 12px color-mix(in srgb, var(--st) 45%, transparent); color: #fff; font-size: 12px; line-height: 1.15; max-width: 100%; animation: riseIn var(--motion-fast) var(--motion-ease) backwards; }
.hstat .glyph { width: 15px; height: 15px; color: var(--st); }
.hstat b { color: var(--st); font: italic 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.hstat small { color: rgba(255,255,255,.82); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.handstatus.compact .hstat small { display: none; }
/* Metazauber auf der Hand: Farbton wandert (wie auf dem Brett, User 2026-10-09) */
.hstat.rainbow { --st: #FF4D6D; animation: hueSpin 4.5s linear infinite, riseIn var(--motion-fast) var(--motion-ease) backwards; }
@keyframes hueSpin { to { filter: hue-rotate(360deg); } }
.reduce-motion .hstat.rainbow { animation: none; }
/* Optionen im Spiel (v162): Reiter im Verlauf-Blatt; Einstellungen als Pillen wie im Einstellungs-Bildschirm, darunter „Spiel verlassen“ mit Rückfrage */
.histtabs button { white-space: nowrap; }
.gamemenu { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.gamemenu .gmrow { display: flex; flex-direction: column; gap: 8px; } .gamemenu .gmhead { display: flex; justify-content: space-between; align-items: baseline; color: var(--surface-ink); font: 600 calc(15px * var(--text-k)) var(--font-body); }
.gamemenu .gmhead .muted { font-size: calc(13px * var(--text-k)); }
.btn.secondary.gmleave { --acc: var(--block-red); margin-top: 6px; }
.gamemenu .gmask { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--block-red); background: color-mix(in srgb, var(--block-red) 14%, transparent); text-align: center; }
.gamemenu .gmask .display { font-size: 20px; } .gamemenu .gmask .muted { font-size: calc(13px * var(--text-k)); line-height: 1.4; }
.gamemenu .gmaskrow { display: flex; gap: 10px; } .gamemenu .gmaskrow .btn { flex: 1; } .btn.primary.gmgo { --acc: var(--block-red); }


/* ---- Masters: Spell-Karten und Reaktionsfenster (docs/SPELLS.md, 2026-10-10) ---- */
.mini.spell { --tier: var(--tier-base); } .mini.spell.stage1 { --tier: var(--tier-stage1); } .mini.spell.stage2 { --tier: var(--tier-stage2); }
.vtext .mk-t1, .atktext .mk-t1, .histbody .mk-t1 { color: var(--tier-base); } .vtext .mk-t2, .atktext .mk-t2, .histbody .mk-t2 { color: var(--tier-stage1); } .vtext .mk-t3, .atktext .mk-t3, .histbody .mk-t3 { color: var(--tier-stage2); } /* Stufenwerte wie auf der gedruckten Karte */
.atkspells { display: flex; flex-direction: column; gap: 4px; padding: 0 12px 2px; min-width: 0; } .atkspells .atkeyebrow { display: block; }
.spelltiles { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; } .spelltiles::-webkit-scrollbar { display: none; }
.spelltile { appearance: none; border: 0; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: var(--surface-panelRaised); color: #fff; cursor: pointer; text-align: left; box-shadow: 0 4px 10px rgba(14,17,64,.45), inset 0 0 0 1.5px rgba(255,255,255,.14); transition: transform var(--motion-fast) var(--motion-ease); }
.spelltile:active { transform: scale(.96); } .spelltile img { width: 34px; aspect-ratio: 600 / 820; border-radius: 4px; object-fit: cover; display: block; box-shadow: 0 0 0 1.5px var(--tier-base); }
.spelltile.stage1 img { box-shadow: 0 0 0 1.5px var(--tier-stage1); } .spelltile.stage2 img { box-shadow: 0 0 0 1.5px var(--tier-stage2); }
.spelltile .sptx { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .spelltile .sptx b { font-size: 14px; letter-spacing: .01em; } .spelltile .sptx small { font-size: 10.5px; opacity: .9; font-weight: 700; }
.spelltile .tier.t1 { color: var(--tier-base); } .spelltile .tier.t2 { color: var(--tier-stage1); } .spelltile .tier.t3 { color: var(--tier-stage2); } .spelltile .ends { color: var(--state-onTurn); } .spelltile .why { opacity: .75; font-weight: 600; }
.spelltile.short { opacity: .55; filter: saturate(.35); } .spelltile.short { cursor: default; } .spelltile.short:active { transform: none; } .spelltile { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.spelltiles .ibtn { flex: 0 0 auto; }
.cardpick.spell { outline: 2px solid var(--acc, var(--tier-base)); outline-offset: -2px; } .cardpick .copies { position: absolute; right: 3px; top: 3px; padding: 0 5px; border-radius: 999px; background: var(--brand-indigoDeep); color: #fff; font: 700 italic 11px/16px var(--font-display); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.reactbar { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 40; width: min(92%, 400px); touch-action: none; } /* Zentrierung über transform: die Einblend-Animation läuft auf dem Innenteil, sonst setzt riseIn (transform: none) sie außer Kraft */
.reactbar .reactinner { animation: riseIn var(--motion-fast) var(--motion-ease) both; } .reactbar.out .reactinner { animation: fadeOut var(--motion-fast) var(--motion-ease) both; }
.reactinner { background: color-mix(in srgb, var(--brand-indigoDeep) 92%, transparent); border-radius: 18px; padding: 12px 14px; box-shadow: 0 14px 36px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(255,255,255,.18); display: flex; flex-direction: column; gap: 9px; color: #fff; backdrop-filter: blur(6px); }
.reactinner .eyebrow { color: #FFD23F; } .reacttx { font-size: 17px; line-height: 1.2; }
.reacttrack { height: 8px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; } .reactfill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(1); border-radius: 999px; background: linear-gradient(90deg, var(--state-onTurn), #FFD23F); }
.reactbar.paused .reacttrack { box-shadow: 0 0 0 2px #FFD23F; } .reactbtns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ibtn.stbtn .glyph.ico { background: currentColor; }
.mastersbox { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 12px; min-width: 0; }
.reactrow { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: var(--surface-panel); } .reactrow .reactlab { flex: 1; display: flex; flex-direction: column; min-width: 0; } .reactrow .reactlab b { font-size: 14px; }
.reactrow .reactval { font: 700 italic 20px/1 var(--font-display); min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.reactrow .stepbtn { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--tier-base); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px color-mix(in srgb, var(--tier-base) 45%, transparent); } .reactrow .stepbtn:disabled { opacity: .4; box-shadow: none; }
.spellstrip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; } .spellstrip::-webkit-scrollbar { display: none; } .spellstrip .cardpick { width: 76px; overflow: visible; } .spellstrip .cardpick img { border-radius: 5px; }

/* Masters Schritt 2: Konter in der Reaktionsleiste, offene Hand (Kontrollverlust) */
.reactspells { justify-content: center; flex-wrap: wrap; overflow: visible; padding: 2px 0; } .reactspells .spelltile { padding: 5px 10px 5px 5px; border-radius: 12px; } .reactspells .spelltile img { width: 30px; } .reactspells .spelltile .sptx b { font-size: 13px; } .reactspells .spelltile .sptx small { font-size: 10px; }
.reactspells .spelltile:not(.short) { box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 0 0 1.5px color-mix(in srgb, var(--state-onTurn) 60%, transparent); }
.topbar { position: relative; } .revealstrip { position: absolute; left: 12px; right: 12px; top: 100%; z-index: 30; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 0 0 14px 14px; background: color-mix(in srgb, var(--brand-indigoDeep) 92%, transparent); box-shadow: 0 10px 24px rgba(0,0,0,.4); animation: riseIn var(--motion-fast) var(--motion-ease) both; }
.revealstrip .eyebrow { color: #FFD23F; white-space: nowrap; } .revealcards { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .revealcards::-webkit-scrollbar { display: none; }
.revealcard { appearance: none; border: 0; padding: 0; background: transparent; width: 28px; flex: 0 0 auto; border-radius: 3px; overflow: hidden; color: #fff; font-size: 9px; } .revealcard img { width: 100%; aspect-ratio: 600 / 820; object-fit: cover; display: block; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.3); } .revealcard.spell img { box-shadow: 0 0 0 1px var(--tier-stage1); }

/* Masters Schritt 3: Meta-Zauber (Kennzeichen, Meta-Knopf in der River-Phase, Auswahl sichtbarer Karten, Dauer-Spells, Kopien) */
.spelltile .metatag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--brand-sky, #2FB4FF); color: #fff; font: 700 9.5px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; font-style: normal; }
.spelltile.meta img { box-shadow: 0 0 0 1.5px var(--brand-sky, #2FB4FF); }
.metariver { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding: 2px 0; scrollbar-width: none; } .metariver::-webkit-scrollbar { display: none; } .metariver .spelltile { padding: 5px 10px 5px 5px; } .metariver .spelltile img { width: 30px; } .metariver .spelltile .sptx b { font-size: 13px; }
.cardpick.metapick .stagetag { white-space: normal; line-height: 1.15; } .cardpick.metapick .where { display: block; font-size: 10px; opacity: .8; }
.cardpick.metapick { position: relative; } .cardpick.metapick .rvval { position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(8,10,40,.75); color: #fff; font: 700 12px/1.4 var(--font-display); font-style: italic; }
.cardpick.metapick.trap { display: flex; align-items: center; justify-content: center; min-height: 96px; background: var(--surface-panelRaised); } .cardpick.metapick .glyph.big { width: 36px; height: 36px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; color: #fff; }
.cardpick .grouptag { position: absolute; top: 4px; left: 4px; padding: 1px 6px; border-radius: 999px; background: rgba(8,10,40,.75); color: #FFD23F; font: 700 9.5px/1.4 var(--font-body); letter-spacing: .04em; }
.standingstrip { display: inline-flex; gap: 3px; margin-left: 6px; align-items: center; } .standingcard { appearance: none; border: 0; padding: 0; background: transparent; width: 18px; border-radius: 2px; overflow: hidden; } .standingcard img { width: 100%; aspect-ratio: 600 / 820; object-fit: cover; display: block; border-radius: 2px; box-shadow: 0 0 0 1px var(--brand-sky, #2FB4FF); }
.mini .copybadge { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; background: var(--brand-sky, #2FB4FF); color: #fff; font: 700 9px/1.4 var(--font-body); letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }

/* Deckbau Masters (v166, Auswahlseite deckbuilder r-0051, User 2026-10-10: Regal und Reiter beide, umschaltbar). Klassen dk* = Editor, dl* = Deckliste. */
.dkscreen .dkbody { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; }
.dkscreen .eyebrow { margin-top: 2px; } .dkviewseg { flex: none; }
.dkpill { display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 2px 9px; border-radius: 999px; background: var(--tier-stage1); color: #fff; font: italic 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-shadow: 0 1px 2px rgba(14,17,64,.4); }
.dkpill.ok { background: var(--state-active); color: #04140a; text-shadow: none; } .dkpill.bad { background: var(--tier-stage2); } .dkhp { margin-right: 2px; }
.dkcolours { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: var(--surface-line); width: 100%; } .dkcolours span { height: 100%; display: block; }
.dkbuild { display: flex; flex-direction: column; gap: 6px; } .dkbars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; height: 64px; } .dkbars .bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; min-width: 0; } .dkbars i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--acc); } .dkbars small { font: 700 9px var(--font-body); color: var(--surface-muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .dkbars b { font: 800 12px var(--font-body); color: #fff; }
.dkspellstages { display: flex; justify-content: space-between; gap: 8px; font: 600 11px var(--font-body); color: var(--surface-muted); } .dkspellstages b { color: #fff; font-weight: 700; }
.dkcheck { display: flex; flex-direction: column; gap: 5px; } .dkcheck > div { display: flex; gap: 8px; align-items: center; font: 600 13px var(--font-body); color: #fff; } .dkcheck .ic { width: 18px; height: 18px; flex: none; border-radius: 50%; display: grid; place-items: center; font: 800 11px var(--font-body); color: #fff; background: var(--tier-stage2); } .dkcheck .ok .ic { background: var(--state-active); color: #04140a; } .dkcheck .hint .ic { background: var(--fx-gold); color: #04140a; } .dkcheck .hint { color: var(--surface-muted); }
.dkfilter { display: flex; flex-direction: column; gap: 8px; flex: none; } .dkfilter .rosterchips { margin-top: 0; }
.dkgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; align-content: start; padding: 6px 0 2px; } .dkgrid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.dktile { position: relative; appearance: none; border: 0; padding: 0; background: var(--surface-panelRaised); border-radius: 6px; aspect-ratio: 600 / 819; cursor: pointer; overflow: visible; box-shadow: 0 4px 12px rgba(14,17,64,.45); transition: transform var(--motion-fast) var(--motion-ease); flex: none; --acc: var(--tier-base); }
.dktile.stage1 { --acc: var(--tier-stage1); } .dktile.stage2 { --acc: var(--tier-stage2); }
.dktile:active { transform: scale(.96); } .dktile img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 6px; opacity: 1; transition: opacity var(--motion-fast) var(--motion-ease); } /* volle Farbe auch ohne Auswahl (User 2026-10-12) */ .dktile.in { box-shadow: 0 0 0 2px var(--acc), 0 4px 12px rgba(14,17,64,.45); } .dktile.max img { opacity: .3; }
.dktile .stagetag { border-radius: 0 0 6px 6px; font-size: 10px; } /* Zauber: Stufenband wie bei den Karten der Deckwahl (User 2026-10-10: Stufen auch bei Zaubern unterscheiden) */
.dkn { position: absolute; right: -3px; top: -7px; min-width: 27px; height: 27px; padding: 0 7px; border-radius: 14px; display: grid; place-items: center; font: 800 16px var(--font-body); color: #fff; background: var(--surface-muted); box-shadow: 0 1px 4px rgba(14,17,64,.5); box-sizing: border-box; } .dktile.in .dkn { background: var(--acc); text-shadow: 0 1px 2px rgba(14,17,64,.45); } .dktile.max .dkn { background: var(--surface-panelRaised); color: var(--surface-muted); }
.dkminus { position: absolute; left: -3px; top: -7px; width: 27px; height: 27px; border-radius: 50%; background: var(--tier-stage2); color: #fff; font: 800 19px/1 var(--font-body); display: grid; place-items: center; cursor: pointer; box-shadow: 0 1px 4px rgba(14,17,64,.5); } /* v345 (UX-Review): Zähler und „−“ seitlich nur 3 px über den Rand, sie überdecken die Nachbarkarte nicht mehr */
.dkrows { display: flex; flex-direction: column; gap: 4px; } .dkrow { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 10px; background: color-mix(in srgb, var(--surface-panel) 70%, transparent); --acc: var(--tier-base); } .dkrow.stage1 { --acc: var(--tier-stage1); } .dkrow.stage2 { --acc: var(--tier-stage2); } .dkrow img { width: 34px; aspect-ratio: 600 / 819; object-fit: cover; border-radius: 4px; flex: none; box-shadow: 0 0 0 1.5px var(--acc); } .dkrow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dkrow .nm b { font: 700 14px var(--font-body); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dkrow .nm small { font: 600 11px var(--font-body); color: var(--surface-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dkstep { display: flex; align-items: center; gap: 4px; flex: none; } .dkstep button { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: var(--surface-panelRaised); color: #fff; font: 800 16px/1 var(--font-body); cursor: pointer; display: grid; place-items: center; padding: 0; } .dkstep button:disabled { opacity: .35; cursor: default; } .dkstep b { min-width: 16px; text-align: center; font: 800 14px var(--font-body); color: #fff; }
.dkgroup { font: italic 700 15px var(--font-display); text-transform: uppercase; color: var(--surface-muted); margin: 8px 2px 2px; display: flex; justify-content: space-between; gap: 8px; letter-spacing: .03em; } .dkgroup span:last-child { font-size: 12px; font-style: normal; text-transform: none; letter-spacing: 0; white-space: nowrap; } .dkempty { font: 600 12px var(--font-body); color: var(--surface-muted); padding: 2px 4px 4px; }
.dkstat { display: flex; align-items: center; gap: 10px; font: 600 13px var(--font-body); color: var(--surface-muted); flex: none; } .dkstat b { font: italic 700 20px var(--font-display); color: #fff; text-transform: uppercase; }
.dk { position: relative; } .dkcat { padding-bottom: 150px; display: flex; flex-direction: column; gap: 8px; }
.dksheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; background: color-mix(in srgb, var(--surface-panel) 97%, transparent); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(14,17,64,.6), inset 0 1.5px 0 rgba(255,255,255,.28); padding: 6px 14px calc(12px + var(--sab)); display: flex; flex-direction: column; gap: 8px; max-height: 34%; transition: max-height var(--motion-normal) var(--motion-ease); }
.dksheet.open { max-height: 74%; } .dkhandle { appearance: none; border: 0; background: transparent; height: 18px; width: 100%; cursor: pointer; display: grid; place-items: center; padding: 0; } .dkhandle::before { content: ""; width: 42px; height: 4px; border-radius: 2px; background: var(--surface-line); display: block; }
.dksum { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; align-items: end; cursor: pointer; flex: none; } .dksum .l { display: flex; flex-direction: column; gap: 8px; } .dksum .l b { font: italic 700 15px var(--font-display); text-transform: uppercase; color: var(--brand-skyLight); } .dksum .dkbars { height: 52px; } .dksum .dkspellstages { display: none; } .dksheet.open .dksum .dkspellstages { display: flex; }
.dksavebtn { height: 44px; width: 100%; flex: none; } /* Speichern unten im Deck-Blatt (User 2026-10-12) */
.dktile .stagetag.hasown { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 2px 8px; } /* Zauber: Stufe links, Exemplare im Besitz rechts */
.dkown { display: inline-flex; gap: 3px; flex: none; } .dkown i { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; display: block; } .dkown i.on { background: #fff; box-shadow: 0 0 0 1px rgba(14,17,64,.35); }
.dkbars { grid-template-columns: repeat(3, 1.4fr) repeat(4, .8fr); column-gap: 5px; } .dksum { grid-template-columns: 1fr 1.6fr; } .dksumtx { text-wrap: balance; } .dkbars small { letter-spacing: .02em; } /* Monster je Stufe, dann Zauber je Farbe (User 2026-10-12) */
.dkbars .sgrp .th { flex: 1 1 0; min-height: 0; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.dkbars .sgrp .th i { width: 3px; flex: none; border-radius: 2px 2px 0 0; background: var(--acc); } .dkbars .sgrp .th i.z { height: 2px; opacity: .35; border-radius: 1px; }
.dkbars .sgrp small { color: color-mix(in srgb, var(--col) 70%, #fff); } .dkbars .sgrp:nth-child(4) { border-left: 1px solid var(--surface-line); padding-left: 4px; }
.dkmore { overflow: auto; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-top: 4px; border-top: 1px solid var(--surface-line); }
.dkseg { display: flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surface-panelRaised); border: 1px solid var(--surface-line); flex: none; } .dkseg button { flex: 1; height: 36px; border: 0; border-radius: 999px; background: transparent; color: var(--surface-muted); font: italic 700 15px var(--font-display); text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; } .dkseg button.on { background: var(--brand-indigo); color: #fff; box-shadow: 0 0 0 1.5px rgba(255,255,255,.6); } .dkseg .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tier-stage1); box-shadow: 0 0 0 1.5px #fff; }
.dkpage { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; } .dkdeckhead { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; border-radius: 14px; background: color-mix(in srgb, var(--surface-panel) 80%, transparent); border: 1px solid var(--surface-line); }
.dkfoot { display: flex; align-items: center; gap: 10px; flex: none; padding-top: 6px; border-top: 1px solid var(--surface-line); font: 600 12px var(--font-body); } .dkfoot .muted { flex: 1; min-width: 0; } .dkdone { height: 44px; padding: 0 18px; flex: none; min-width: 0; }
.dkscrim { position: absolute; inset: 0; z-index: 6; background: rgba(14,17,64,.55); } .dkscrim.clear { background: transparent; z-index: 7; }
.dkmenu { position: absolute; right: 10px; top: 50px; z-index: 8; min-width: 230px; background: color-mix(in srgb, var(--surface-panel) 98%, transparent); border-radius: 14px; box-shadow: 0 12px 30px rgba(14,17,64,.6), inset 0 0 0 1px var(--surface-line); padding: 6px; display: flex; flex-direction: column; } .dkmenu button { appearance: none; border: 0; background: transparent; color: #fff; text-align: left; padding: 10px 12px; border-radius: 10px; font: 600 14px var(--font-body); cursor: pointer; } .dkmenu button.danger { color: var(--tier-stage2Light); } .dkmenu button:hover { background: var(--surface-panelRaised); }
.dksheetbox .nameinput { width: 100%; box-sizing: border-box; } .dkrules { text-align: left; margin: 0; padding-left: 18px; font-size: 14px; display: flex; flex-direction: column; gap: 6px; color: var(--surface-ink); } .btn.primary.danger { --acc: var(--tier-stage2); }
.dlgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.dlcover { position: relative; appearance: none; border: 0; padding: 0; background: none; cursor: pointer; display: flex; flex-direction: column; gap: 5px; text-align: left; min-width: 0; color: #fff; } .dlcover:disabled { opacity: .5; cursor: default; }
.dlart { position: relative; aspect-ratio: 480 / 701; border-radius: 10px; overflow: hidden; background: var(--surface-panelRaised); box-shadow: 0 8px 20px rgba(14,17,64,.5); width: 100%; } .dlart:not(.ddcover) img.cut { position: absolute; left: 50%; top: 50%; width: 92%; transform: translate(-50%, -48%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.45)); } .dlart img.full { width: 100%; height: 100%; object-fit: cover; display: block; } .dlgrad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,64,0) 55%, rgba(14,17,64,.55) 100%); pointer-events: none; }
.dlart.empty { border: 1.5px dashed var(--surface-line); background: transparent; box-shadow: none; display: grid; place-items: center; } .dlart .plus, .dlrow .plus { color: var(--surface-muted); font: 300 34px/1 var(--font-body); }
.dlname { font: italic 700 15px var(--font-display); text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .dlsub { font: 600 11px var(--font-body); color: var(--surface-muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlbadge { position: absolute; right: 6px; top: 6px; } .dltag { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 6px; background: linear-gradient(transparent, rgba(14,17,64,.9)); font: 700 10px var(--font-body); color: #fff; letter-spacing: .1em; text-transform: uppercase; }
.dlhead { display: flex; align-items: center; justify-content: space-between; } .dlrows { display: flex; flex-direction: column; gap: 8px; }
.dlrow { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 8px; border-radius: 14px; background: color-mix(in srgb, var(--surface-panel) 80%, transparent); border: 1.5px solid var(--surface-line); appearance: none; width: 100%; text-align: left; color: #fff; cursor: pointer; min-height: 72px; box-sizing: border-box; font: inherit; } .dlrow:disabled { opacity: .5; cursor: default; } .dlrow .th { width: 42px; flex: none; position: relative; } .dlrow .th .dlart { border-radius: 6px; box-shadow: none; } .dlrow .th .dlbadge, .dlrow .th .dltag { display: none; } .dlrow .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .dlrow .glyph { width: 20px; height: 20px; color: var(--surface-muted); } .dlrow.empty { border-style: dashed; background: transparent; min-height: 56px; } .dlrow.empty .th { display: grid; place-items: center; width: 42px; } .dlrow.tiny { min-height: 40px; padding: 4px 10px 4px 8px; opacity: .6; } .dlrow .ghostpill { color: var(--brand-skyLight); border-color: var(--brand-skyLight); background: transparent; }
/* Masters-Deckwahl: Vorgaben und eigene Decks als Cover (eigene mit Platzhalter-Optik), unfertige Decks abgedunkelt */
.deckcover.own { position: relative; } .deckcover.own .dlart { border-radius: 10px; width: 100%; } .deckcover.own.off { opacity: .35; } .deckcover .owntag { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 6px 5px; background: linear-gradient(transparent, rgba(14,17,64,.9)); font: italic 700 12px var(--font-display); text-transform: uppercase; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.manageRow { align-self: flex-start; }

/* Deck-Design (v167, Schritt 3, Auswahlseite deckdesign r-0052 = B „Frei“): Cover aus Hintergrund, bis zu drei Freistellern und Name; Editor mit Ziehen, Größe, Spiegeln */
.ddcover { position: relative; aspect-ratio: 480 / 701; border-radius: 10px; overflow: hidden; background: var(--brand-indigoDeep); box-shadow: 0 8px 20px rgba(14,17,64,.5); width: 100%; touch-action: none; container-type: inline-size; }
.ddcover .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ddcover .cut { position: absolute; transform: translate(-50%, -50%); filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); user-select: none; -webkit-user-drag: none; } .ddcover .cut.flip { transform: translate(-50%, -50%) scaleX(-1); }
.ddcover .cut.sel { outline: 2px dashed #fff; outline-offset: -2px; border-radius: 8px; } .ddpreview .ddcover .cut { cursor: grab; }
.ddcover .shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,17,64,.12), transparent 26%, transparent 60%, rgba(14,17,64,.82)); pointer-events: none; z-index: 4; }
.ddcover .nm { position: absolute; left: 6%; right: 6%; bottom: 4%; font: italic 700 clamp(9px, 13cqw, 20px) var(--font-display); text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px rgba(14,17,64,.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 5; letter-spacing: .02em; line-height: 1.1; }
.dlrow .th .ddcover .nm { display: none; } /* Zeilen: der Name steht in der Zeile, das Mini-Cover bleibt frei */
.ddbody { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; } .ddbody > * { flex: none; } .ddtop { display: flex; justify-content: center; } .ddpreview { width: 62%; }
.ddtools { display: flex; flex-direction: column; gap: 6px; } .ddrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 600 12px var(--font-body); color: var(--surface-muted); } .ddrow .lab { flex: 1 0 100%; } .ddrow input[type=range] { flex: 1; min-width: 120px; accent-color: var(--brand-sky); } .ddrow .pill:disabled { opacity: .4; }
.ddbgs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; margin: 0 -2px; } .ddbgs::-webkit-scrollbar { display: none; }
.ddbg { appearance: none; border: 0; padding: 0; background: none; flex: none; width: 58px; display: flex; flex-direction: column; gap: 3px; align-items: center; cursor: pointer; color: var(--surface-muted); font: 600 10px var(--font-body); } .ddbg img { width: 58px; height: 84px; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 10px rgba(14,17,64,.45); opacity: .7; transition: opacity var(--motion-fast) var(--motion-ease); } .ddbg.on img { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--brand-sky), 0 4px 10px rgba(14,17,64,.45); } .ddbg.on { color: #fff; }
.ddgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.ddtile { position: relative; appearance: none; padding: 4px 2px 3px; border-radius: 10px; background: color-mix(in srgb, var(--surface-panel) 80%, transparent); border: 1.5px solid var(--surface-line); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--surface-muted); font: 600 10px var(--font-body); min-width: 0; } .ddtile img { width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 3px 5px rgba(0,0,0,.45)); } .ddtile .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ddtile.on { border-color: #fff; background: color-mix(in srgb, var(--brand-indigo) 70%, transparent); color: #fff; } .ddtile.max { opacity: .4; } .ddtile .ord { position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--brand-sky); color: #fff; font: 800 12px/20px var(--font-body); text-align: center; box-shadow: 0 0 0 1.5px #fff; } .ddtile .tag { position: absolute; left: 4px; top: 4px; padding: 1px 5px; border-radius: 999px; background: var(--state-active); color: #04140a; font: 800 9px var(--font-body); letter-spacing: .04em; text-transform: uppercase; }

/* Tempo (v168, User 2026-10-10): zwei Pfeiltasten oben rechts in der Gegnerleiste, › schnell und ›› sehr schnell, nur für den laufenden Zug */
.speedbtns { display: inline-flex; gap: 3px; margin-left: auto; flex: none; } .speedbtns[hidden] { display: none; }
.spdbtn { appearance: none; height: 24px; min-width: 26px; padding: 0 4px; border-radius: 999px; border: 1.5px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 78%, transparent); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0; cursor: pointer; transition: background var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
.spdbtn .glyph { width: 11px; height: 11px; } .spdbtn .glyph + .glyph { margin-left: -5px; } .spdbtn:active { transform: scale(.95); }
.spdbtn.on { background: var(--state-onTurn); border-color: var(--surface-strokeLight); box-shadow: 0 0 10px rgba(255,145,77,.6); }

/* Deckbau v172 (User 2026-10-10): Hauptseiten Monster | Zauber (im Reiter auch Deck), Filter als Blatt hinter dem Filterknopf; Passung-Visuals A/B/C (Auswahlseite spellfit, r-0054) */
.dktop { display: flex; flex-direction: column; gap: 8px; flex: none; } .dkpagebar { display: flex; align-items: center; gap: 8px; } .dkpagebar .dkseg { flex: 1; min-width: 0; }
.dkseg button .lab { white-space: nowrap; } .dkseg button .cnt { font: 800 10px var(--font-body); font-style: normal; letter-spacing: 0; padding: 1px 6px; border-radius: 999px; background: rgba(14,17,64,.35); color: inherit; } .dkseg button.on .cnt { background: rgba(255,255,255,.22); } .dkseg.three button { font-size: 13px; gap: 4px; padding: 0 4px; }
.dkfbtn { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: var(--surface-panelRaised); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; } .dkfbtn .glyph { width: 20px; height: 20px; } .dkfbtn.on { border-color: var(--brand-sky); box-shadow: 0 0 0 1.5px var(--brand-sky); }
.dkfbtn .badge { position: absolute; right: -4px; top: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--brand-sky); color: #fff; font: 800 11px/18px var(--font-body); text-align: center; box-shadow: 0 0 0 1.5px #fff; box-sizing: border-box; }
.dkfsheet { width: min(92vw, 360px); max-width: none; align-items: stretch; text-align: left; } .dkfsheet .dkfilter .rosterchips { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; } .dkfsheet .namerow { justify-content: space-between; } .dkfsheet .rostersearch { width: 100%; box-sizing: border-box; }
.dktile .dkfit { position: absolute; z-index: 2; pointer-events: none; bottom: 4px; } .dktile.spell .dkfit { bottom: 20px; }
.dktile .fitA { right: 4px; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: color-mix(in srgb, var(--brand-indigoDeep) 90%, transparent); border: 1.5px solid var(--brand-sky); color: #fff; font: 800 11px var(--font-body); box-sizing: border-box; box-shadow: 0 1px 4px rgba(14,17,64,.5); } .dktile .fitA.none { border-style: dashed; border-color: var(--surface-line); color: var(--surface-muted); }
.dktile .fitB { left: 4px; display: flex; align-items: center; } .dktile .fitB img { width: 19px; height: 19px; border-radius: 50%; object-fit: cover; opacity: 1; border: 1.5px solid #fff; background: var(--brand-indigoDeep); box-shadow: 0 1px 4px rgba(14,17,64,.5); box-sizing: border-box; } .dktile .fitB img + img, .dktile .fitB img + i { margin-left: -8px; } .dktile .fitB img.sp { border-radius: 4px; width: 14px; height: 19px; object-position: top; } /* bis zu vier Köpfe passen auf die Regal-Kachel */
.dktile .fitB i { font: 800 10px/16px var(--font-body); font-style: normal; color: #fff; background: var(--brand-indigoDeep); border: 1.5px solid #fff; border-radius: 10px; padding: 0 5px; height: 16px; box-shadow: 0 1px 4px rgba(14,17,64,.5); } .dktile .fitB.none i { border-style: dashed; border-color: var(--surface-line); color: var(--surface-muted); }
.dktile .fitC { left: 4px; right: 4px; display: flex; align-items: center; gap: 4px; } .dktile .fitC .bar { flex: 1; height: 5px; border-radius: 3px; background: rgba(14,17,64,.75); display: flex; gap: 1px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.25); } .dktile .fitC .bar i { display: block; height: 100%; } .dktile .fitC b { font: 800 10px var(--font-body); color: #fff; text-shadow: 0 1px 2px rgba(14,17,64,.8); flex: none; } .dktile .fitC.none b { color: var(--surface-muted); }

/* Auftakt Online (v173, Entscheidung 2026-10-10-online-splash, B Diagonale): Gegner oben, du unten, VERSUS in der Mitte; Avatare ganz, Namen groß und zentriert */
.vs { position: fixed; inset: 0; z-index: 95; /* über dem Start-Splash (90), unter nichts Wichtigem */ display: flex; flex-direction: column; color: #fff; overflow: hidden; background: var(--splash-edge, var(--brand-bgEdge)); animation: fadeIn var(--motion-normal) var(--motion-ease) both; cursor: pointer; } .vs.out { animation: vsOut .26s var(--motion-ease) forwards; } @keyframes vsOut { to { opacity: 0; } }
.vs .eyebrow2 { text-align: center; font: 800 11px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); padding: calc(18px + var(--sat)) 16px 0; position: relative; z-index: 4; }
.vs .vscover { aspect-ratio: 480 / 701; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 34px rgba(14,17,64,.6), inset 0 0 0 1.5px rgba(255,255,255,.35); background: var(--surface-panelRaised); width: 34%; flex: none; } .vs .vscover img:not(.cut) { width: 100%; height: 100%; object-fit: cover; display: block; } .vs .vscover .ddcover { border-radius: 12px; box-shadow: none; }
.vs .half { position: absolute; left: 0; right: 0; padding: 0 20px; display: flex; align-items: center; } .vs .half .inner { display: flex; align-items: center; gap: 14px; width: 100%; }
.vs .half.top { top: 0; height: 60%; clip-path: polygon(0 0, 100% 0, 100% 56%, 0 100%); background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 60%, var(--splash-deep)), var(--splash-deep) 80%); align-items: flex-start; padding-top: calc(52px + var(--sat)); animation: vsTop .7s var(--motion-ease) both; }
.vs .half.bot { bottom: 0; height: 60%; clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 44%); background: linear-gradient(340deg, color-mix(in srgb, var(--tint) 60%, var(--splash-deep)), var(--splash-deep) 80%); align-items: flex-end; padding-bottom: calc(78px + var(--sab)); animation: vsBot .7s var(--motion-ease) both; }
.vs .who { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; }
.vs .av { width: 68px; height: 68px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 55%, #fff), var(--tint) 74%); box-shadow: 0 0 0 2.5px #fff, 0 6px 14px rgba(14,17,64,.5); overflow: hidden; display: grid; place-items: center; flex: none; } .vs .av img { width: 90%; height: 90%; object-fit: contain; object-position: center 58%; display: block; filter: drop-shadow(0 2px 3px rgba(14,17,64,.5)); } /* ganzer Freisteller, nichts abgeschnitten (User 2026-10-10) */
.vs .nm { font: italic 700 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(14,17,64,.55), 0 4px 14px rgba(14,17,64,.7); max-width: 100%; overflow-wrap: anywhere; }
.vs .sub { font: 700 11px var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; background: rgba(14,17,64,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.vs .vsword { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-7deg); z-index: 3; font: italic 800 44px/1 var(--font-display); letter-spacing: .12em; padding-left: .12em; color: #fff; text-shadow: 0 3px 0 var(--tier-stage1), 0 0 26px color-mix(in srgb, var(--tier-stage1) 80%, transparent), 0 6px 16px rgba(14,17,64,.85); animation: vsPop .5s .55s var(--motion-ease) both; white-space: nowrap; }
.vs .foot { margin-top: auto; padding: 0 28px calc(22px + var(--sab)); text-align: center; font: 600 12px var(--font-body); color: var(--surface-muted); position: relative; z-index: 4; } .vs .hint { opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease); } .vs .hint.on { opacity: 1; }
.vs .bar { height: 4px; border-radius: 2px; background: var(--surface-line); overflow: hidden; margin-top: 8px; } .vs .bar i { display: block; height: 100%; width: 0; background: var(--brand-sky); animation: vsbar 3s linear forwards; } @keyframes vsbar { to { width: 100%; } }
@keyframes vsTop { from { transform: translateY(-40%); opacity: 0; } } @keyframes vsBot { from { transform: translateY(40%); opacity: 0; } } @keyframes vsPop { from { transform: translate(-50%, -50%) rotate(-7deg) scale(.2); opacity: 0; } 70% { transform: translate(-50%, -50%) rotate(-7deg) scale(1.12); } to { transform: translate(-50%, -50%) rotate(-7deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vs .half, .vs .vsword { animation: none; } }

/* Deckbau v174 (User 2026-10-10): Halte-Zoom bleibt stehen (kein Bildziehen, keine Textauswahl, nur senkrechtes Scrollen), Ansichten Raster/Ketten/Liste */
.dktile { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .dktile img { pointer-events: none; -webkit-user-drag: none; }
.dkrow { touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; } .dkrow img { -webkit-user-drag: none; }
.dkvbtn { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--surface-line); background: var(--surface-panelRaised); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; } .dkvbtn .glyph { width: 20px; height: 20px; }
.dkmenu button.on { background: color-mix(in srgb, var(--brand-indigo) 55%, transparent); }
.dkcatalog { display: flex; flex-direction: column; gap: 6px; } .dkcatalog .dkgrid { padding-top: 2px; }
.dkchainhead { display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 0; } .dkchainhead b { font: italic 700 16px var(--font-display); text-transform: uppercase; color: #fff; letter-spacing: .02em; } .dkchainhead small { font: 600 11px var(--font-body); color: var(--surface-muted); }
.dklrow.in { box-shadow: inset 0 0 0 1.5px var(--acc, var(--brand-sky)); } .dklrow.stage1 { --acc: var(--tier-stage1); } .dklrow.stage2 { --acc: var(--tier-stage2); } .dklrow.base { --acc: var(--tier-base); }
.dkrow .dkfit { position: static; margin-top: 3px; } .dkrow .fitB { display: flex; align-items: center; } .dkrow .fitB img { width: 19px; height: 19px; aspect-ratio: auto; border-radius: 50%; object-fit: cover; border: 1.5px solid #fff; background: var(--brand-indigoDeep); box-shadow: 0 1px 4px rgba(14,17,64,.5); box-sizing: border-box; } .dkrow .fitB img + img, .dkrow .fitB img + i { margin-left: -8px; } .dkrow .fitB img.sp { border-radius: 4px; width: 14px; height: 19px; object-position: top; }
.dkrow .fitB i { font: 800 10px/16px var(--font-body); font-style: normal; color: #fff; background: var(--brand-indigoDeep); border: 1.5px solid #fff; border-radius: 10px; padding: 0 5px; height: 16px; } .dkrow .fitB.none i { border-style: dashed; border-color: var(--surface-line); color: var(--surface-muted); }

/* Aktionsleiste mit Kartenwahl oder Zauber-Kacheln (Durchlauf 2026-10-10): Titel in voller Breite darüber statt auf 96 px gequetscht; Knöpfe werden nicht abgeschnitten */
.actionbar:has(.spelltiles), .actionbar:has(.cardpick) { flex-wrap: wrap; row-gap: 2px; } .actionbar:has(.spelltiles) .atitle, .actionbar:has(.cardpick) .atitle { max-width: none; flex: 1 0 100%; align-self: flex-start; padding-top: 4px; }
.arow > .ibtn { flex: 0 0 auto; }
.matchfx .reactbar { pointer-events: auto; z-index: 60; } /* Reaktionsfenster liegt in der Effekt-Ebene über den gezahlten Karten */
/* Desktop-Steuerung (v183): Hover nur mit Maus (Touch bekommt nichts davon, kein „klebender“ Hover nach dem Tippen). Gefüllte Knöpfe hellen auf,
   Umriss-Knöpfe füllen sich leicht in ihrer Farbe, Kacheln und Karten heben sich an; gedrückt (.pressed/:active) gewinnt immer gegen Hover. */
@media (hover: hover) and (pointer: fine) {
  :where(button:not(:disabled), [role="button"], label.chk) { cursor: pointer; }
  :is(.ibtn, .btn.primary, .btn.cta, .seg2 button.on):not(:disabled):not(.pressed):not(.locked):hover { filter: brightness(1.1) saturate(1.05); }
  :is(.btn.secondary, .btn.ghost, .btn:not(.primary):not(.cta), .seg2 button:not(.on), .viewer .seg button:not(.on)):not(:disabled):hover { background-color: color-mix(in srgb, var(--acc) 14%, transparent); }
  button.pill:not(:disabled):not(.on):hover, .optbtn:not(:disabled):hover { border-color: color-mix(in srgb, #fff 45%, transparent); background-color: color-mix(in srgb, var(--surface-panelRaised) 82%, #fff); }
  .tile:not(:disabled):not(.pressed):not(.locked):hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--surface-strokeLight) 26%, transparent); box-shadow: 0 10px 24px rgba(14,17,64,.45); }
  .listrow:not(:disabled):hover { background: color-mix(in srgb, #fff 5%, transparent); }
  .header :is(.back, .hact):not(.hidden):hover { background: color-mix(in srgb, #fff 10%, transparent); border-radius: 50%; }
  :is(.rostertile, .dktile, .cardpick, .spelltile, .stagecard):not(:disabled):not(.short):not(:active):hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(14,17,64,.55), 0 0 0 1.5px color-mix(in srgb, #fff 55%, transparent); }
  .chain .link:not(.on):hover { opacity: 1; transform: translateY(-2px); }
  .deckcover:not(.on):hover { opacity: .85; transform: scale(.97); }
  .dlcover:not(:disabled):hover > :first-child { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(14,17,64,.6); }
  .dlcover > :first-child { transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); }
  .atkcard:not(.short):not(:disabled):hover { border-color: #fff; }
  .hand .mini:hover { filter: brightness(1.1); }
  .linerow2:hover, .dkrow:hover { background-color: color-mix(in srgb, #fff 5%, transparent); }
  :is(.bindernav, .vnav):not(:disabled):hover { background: color-mix(in srgb, var(--surface-panelRaised) 70%, #fff 18%); }
}
/* ===== Freischaltungen und Sasani Coins (Entscheidung 2026-10-11-progression-unlocks, v185): Coin-Anzeige, Kaufblatt „Sammlung erweitern“, gesperrte Karten und Linien.
   Münze: Drive „Sasani Coin Blue“ (design/assets/icons/coin/sasani-coin-*.webp). Gesperrt = Silhouette (dunkel, entsättigt) mit Schloss, nie Schwarz. */
.coin-ic { width: 20px; height: 20px; flex: none; display: block; filter: drop-shadow(0 1px 2px rgba(14,17,64,.5)); }
.coinchip { appearance: none; border: 0; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px; border-radius: 999px; cursor: pointer; color: #fff; font: italic 700 17px/1 var(--font-display); font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); box-shadow: inset 0 0 0 1.5px rgba(255,214,90,.55), 0 4px 12px rgba(14,17,64,.35); }
.coinchip .coin-ic { width: 26px; height: 26px; }
.coinchip:active { transform: scale(.95); }
.hubcoins { position: absolute; left: 10px; top: 14px; z-index: 3; }
.coinsline { margin-top: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.coinsline .sum { display: flex; align-items: center; gap: 8px; } .coinsline .sum .coin-ic { width: 34px; height: 34px; } .coinsline .sum b { font: italic 700 30px/1 var(--font-display); color: #FFD65A; text-shadow: 0 2px 6px rgba(14,17,64,.5); } .coinsline .sum span { font: italic 700 16px var(--font-display); text-transform: uppercase; color: #fff; }
.coinsline .items { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .coinsline .it { padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--brand-indigoDeep) 55%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); font: 600 12px var(--font-body); color: #fff; }
.shopsheet .panel { max-height: 86%; overflow: auto; display: flex; flex-direction: column; gap: 12px; }
.shophead { display: flex; align-items: center; gap: 10px; } .shophead .display { font-size: 24px; text-transform: uppercase; }
.shoplist { display: flex; flex-direction: column; gap: 12px; }
.shopitem { display: grid; grid-template-columns: 150px minmax(0, 1fr); grid-template-rows: auto auto; gap: 8px 14px; align-items: center; padding: 14px; border-radius: 16px; background: linear-gradient(140deg, color-mix(in srgb, var(--brand-indigo) 55%, var(--surface-panel)) 0%, var(--surface-panel) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.shopitem.focus { box-shadow: inset 0 0 0 2px #FFD65A, 0 0 22px rgba(255,214,90,.35); }
.shopitem.owned { background: var(--surface-panel); } .shopitem .shopbuy { grid-column: 1 / -1; width: 100%; gap: 8px; }
.shopfan { position: relative; height: 112px; grid-row: 1; } .shopfan .fc { position: absolute; left: 50%; bottom: 0; width: 62px; aspect-ratio: 600 / 819; margin-left: -31px; border-radius: 6px; overflow: hidden; transform-origin: 50% 140%; transform: translateX(calc(var(--i) * 18px)) rotate(calc(var(--i) * 6deg)); box-shadow: 0 6px 14px rgba(14,17,64,.55), 0 0 0 1.5px rgba(255,255,255,.6); }
.shopfan .fc img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shopitem:not(.owned) .shopfan .fc img { filter: saturate(.85) brightness(.92); }
.shoptxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shoptxt .display { font-size: 22px; text-transform: uppercase; } .shopcre { color: var(--brand-skyLight); font-weight: 600; } .shopmiss { color: #FFD65A; font-weight: 700; }
.shopbuy.armed { background: #12C65A; border-color: #fff; }
/* gesperrt im Album, Deckbau, in der Linienwahl */
.rostertile.locked img, .dktile.locked img, .dklrow.locked img, .linerow.locked .stagecard img { filter: grayscale(1) brightness(.55) sepia(1) hue-rotate(195deg) saturate(2.4) brightness(.62); } /* Silhouette in Markenblau, kein Schwarz */
.rostertile.locked { position: relative; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12); cursor: pointer; } .rostertile.locked .lockmark, .dktile .dklock { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%); color: rgba(255,255,255,.75); filter: drop-shadow(0 1px 3px rgba(14,17,64,.8)); }
.dktile.locked { opacity: 1; } .dktile .dklock { width: 22px; height: 22px; }
.dklrow.locked .nm b { color: var(--surface-muted); } .dklrow.locked .dkstep button:last-child { opacity: .35; }
.linerow.locked { opacity: .78; } .linerow.locked .lineinfo .glyph { width: 18px; height: 18px; color: #FFD65A; flex: none; } .linerow.locked .linename { color: var(--surface-muted); }
.exthead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .exthead .extbuy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #fff; border-color: rgba(255,214,90,.7); background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); font: italic 700 13px var(--font-display); text-transform: uppercase; letter-spacing: .03em; } .exthead .extbuy .glyph { width: 13px; height: 13px; color: #FFD65A; } .exthead .extbuy .coin-ic { width: 18px; height: 18px; }
.linerow2.locked { opacity: .6; } .linerow2.locked .glyph { width: 18px; height: 18px; color: #FFD65A; }
.lockcover .namerow { flex-wrap: wrap; }
/* v335: gesperrte Karte auf der Platte (CI v316) – Silhouette in Markenblau mit Schloss, Name in Display-Größe, Stufe in Tier-Farbe, Knöpfe untereinander */
.lockcover .lockplate { width: min(88vw, 340px); max-width: none; padding: 20px 18px 16px; gap: 6px; }
.lockcover .lockart { position: relative; width: 132px; aspect-ratio: 600 / 819; margin-bottom: 8px; border-radius: 10px; overflow: hidden; background: rgba(8,10,40,.55); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.45); }
.lockcover .lockart img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.55) sepia(1) hue-rotate(195deg) saturate(2.4) brightness(.62); }
.lockcover .lockart .lockmark { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; transform: translate(-50%, -50%); --icon-color: rgba(255,255,255,.85); }
.lockcover .lockeb { color: #FFD23F; letter-spacing: .14em; }
.lockcover .lockname { font: italic 700 34px/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: #fff; text-shadow: 0 2px 8px rgba(14,17,64,.6); }
.lockcover .lockstage { font: 800 12px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tier-base); } .lockcover .lockstage.stage1 { color: var(--tier-stage1); } .lockcover .lockstage.stage2 { color: var(--tier-stage2); }
.lockcover .lockwhere { margin-top: 6px; font: 600 15px/1.35 var(--font-body); color: rgba(255,255,255,.86); }
.lockcover .lockrow { width: 100%; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; } .lockcover .lockrow .btn { width: 100%; min-width: 0; }
.dkfootrow { display: flex; gap: 10px; flex-wrap: wrap; } .shoprow { display: inline-flex; align-items: center; gap: 6px; } .shoprow .coin-ic { width: 18px; height: 18px; }
/* ===== Desktop-Aufbau „Breit + Tisch“ (Entscheidung 2026-10-11-desktop-layout, r-0057) – ab 1100 × 600 px Fenster: Desktop, Laptop, iPad und Tablet im
   Querformat (Grenze auch in viewport.js). Darunter bleibt alles wie auf dem Handy. Verlauf-Leiste ist nur hier sichtbar. */
.histrail { display: none; }
/* Verlauf als Aktionen (Entscheidung 2026-10-12-history-blocks, timeline.js; Blatt und Desktop-Leiste): links das Symbol der Aktionsklasse, daneben Spieler → Karte → Aktion → Ziel,
   rechts die gespielten Karten, darunter in voller Breite die Folgen in ihrer Reihenfolge; Fähigkeiten und Fallen als eingesetzte Blöcke mit gelbem Rand.
   Einstellung „Events in der Timeline einzeln aufführen“: jeder Schritt ein nummerierter Block (.tlseq). */
.tlblk { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico body cards" "lines lines lines"; column-gap: 10px; align-items: start; padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--surface-panel) 58%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.tlblk > .tlico { grid-area: ico; } .tlblk > .tlbody { grid-area: body; min-width: 0; display: grid; gap: 3px; } .tlblk > .tlcards { grid-area: cards; } .tlblk > .tllines { grid-area: lines; }
.tlico { --c: var(--brand-sky); width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px #fff, 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); display: grid; place-items: center; flex: none; }
.tlico.mid { width: 30px; height: 30px; box-shadow: 0 0 0 1.5px #fff; } .tlico.sm { width: 20px; height: 20px; box-shadow: none; margin-top: 1px; }
.tlico i { display: block; width: 58%; height: 58%; background: #fff; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.tlkick { font: 700 calc(10.5px * var(--text-k, 1))/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--surface-muted); }
.tlhead { font: 600 calc(14px * var(--text-k, 1))/1.35 var(--font-body); color: #fff; overflow-wrap: anywhere; }
.tlhead .tlarw { color: var(--surface-muted); padding: 0 .25em; } .tlhead .tlpos { color: var(--surface-muted); font-weight: 500; }
.tlhead .tlp1 { color: var(--brand-skyLight); font-weight: 700; } .tlhead .tlp2 { color: var(--state-onTurn); font-weight: 700; }
.tlhead .tlact { font: italic 700 calc(16px * var(--text-k, 1))/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.tlhead .tlchip { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--surface-line); font: 700 11px/16px var(--font-body); font-variant-numeric: tabular-nums; vertical-align: 1px; }
.tllines { display: grid; gap: 5px; margin-top: 8px; min-width: 0; }
.tlline { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 7px; align-items: start; }
.tlline, .tltext, .tlplain { font: 400 calc(13px * var(--text-k, 1))/1.4 var(--font-body); color: color-mix(in srgb, #fff 88%, transparent); overflow-wrap: anywhere; }
.tlline.muted, .tltext.muted { color: var(--surface-muted); }
.tlnum { display: inline-block; padding: 0 5px; border-radius: 5px; margin-right: 5px; font: italic 700 13px/17px var(--font-display); color: #fff; background: var(--block-red); font-variant-numeric: tabular-nums; } .tlnum.plus { background: #12A856; }
.tlext { padding: 8px; background: color-mix(in srgb, var(--surface-panelCard) 92%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--fx-gold) 55%, transparent); }
.tlext .tlhead .tlact { font-size: calc(15px * var(--text-k, 1)); }
.tlcards { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; max-width: 76px; }
.tlcd { display: grid; gap: 2px; justify-items: center; width: 34px; cursor: zoom-in; } .tlcd img { width: 34px; aspect-ratio: 600 / 819; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 2px 6px rgba(0,0,0,.4); display: block; max-width: 100%; }
.tlcd span { font: 600 9.5px/1.1 var(--font-body); color: var(--surface-muted); text-align: center; white-space: nowrap; }
.tlmore { font: 700 11px var(--font-body); color: var(--surface-muted); align-self: center; }
.tldiv { display: flex; align-items: center; gap: 8px; color: var(--surface-muted); font: 700 11px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .tldiv::before, .tldiv::after { content: ""; flex: 1; height: 1px; background: var(--surface-line); }
.tlseq { display: grid; gap: 6px; }
.tlstep { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "no ico body cards" "lines lines lines lines"; padding: 8px 10px; }
.tlstep > .tlno { grid-area: no; font: italic 700 14px/30px var(--font-display); color: var(--surface-muted); width: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.tlseq > .tlstep:not(:first-child) { margin-left: 12px; }
@media (min-width: 1100px) and (min-height: 600px) {
  body { background: radial-gradient(ellipse 80% 70% at 50% 0%, #2B3194 0%, var(--surface-bg) 70%) fixed, var(--surface-bg); }
  .app { max-width: none; } .app, .app.brand { background: transparent; }
  /* Menüs: lesbare Spalte; Album und Decks nutzen die Breite */
  .screen:not(.match):not(.hubscreen) { width: 100%; max-width: 760px; margin: 0 auto; box-sizing: border-box; padding: 22px 32px; }
  .app > .screen.rosterscreen, .app > .screen.dkscreen:not(.ddscreen) { max-width: 1240px; padding: 22px 40px; } /* gewinnt gegen die Menü-Spalte oben (gleiche Gewichtung, später) */
  .screen > .header h2 { font-size: 26px; }
  /* Hub: Key-Art links groß, Menü rechts */
  .hubscreen { background: radial-gradient(circle at 36% 48%, var(--splash-center) 0%, var(--splash-mid) 22%, var(--splash-deep) 50%, var(--splash-edge) 100%); }
  .hubbody { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(380px, 460px); grid-template-rows: 1fr auto; column-gap: 40px; padding: 0 max(56px, calc((100vw - 1400px) / 2)) 12px; align-items: center; }
  .hubstage { grid-column: 1; grid-row: 1 / span 2; height: 100%; }
  .hubglow { top: 50%; width: min(118%, 104vh); }
  .hubart { top: 50%; width: min(118%, 98vh); max-width: none; transform: translate(-50%, -50%); }
  .hubpad { grid-column: 2; grid-row: 1; flex: none; padding: 0; align-self: center; }
  .hubfoot { grid-column: 2; grid-row: 2; text-align: center; }
  .hubgear { right: 24px; top: 20px; } .hubgear.hubprofile { right: 78px; }
  /* Album: aufgeschlagener Hefter, Ringe in der Mitte (User: „Hefter-Look symmetrisch“), eine Doppelseite pro Schritt (app.js) */
  .rosterscreen { display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); align-content: start; column-gap: 18px; row-gap: 12px; }
  .rosterscreen > .header, .rosterscreen > .rostercount, .rosterscreen > .rostergrid { grid-column: 1 / -1; }
  .rosterscreen > .rosterchips { padding: 0; align-self: center; }
  .rosterscreen .rostergrid { padding: 0; min-height: 0; }
  .rosterscreen .binderstrip { width: 100%; max-width: clamp(600px, calc((100vh - 340px) * 1.465 + 144px), 1120px); margin: 0 auto; gap: 6px; } /* v344 (r-0095 G): Mappe etwas kleiner (340 statt 262 px Vorlauf, Untergrenze 600 statt 720 px), damit die Anzahl-Zeile unter der dritten Reihe Platz hat */
  .rosterscreen .binder { flex: 0 0 calc(50% - 3px); }
  .rosterscreen .binder:nth-child(odd) { scroll-snap-align: start; border-radius: 18px 6px 6px 18px; padding: 14px 30px 14px 14px; } /* linke Seite: Ringe rechts am Rücken */
  .rosterscreen .binder:nth-child(odd) .ring { left: auto; right: 9px; }
  .rosterscreen .binder:nth-child(even) { scroll-snap-align: none; border-radius: 6px 18px 18px 6px; } /* rechte Seite: Ringe links am Rücken */
  /* Decks: alle Plätze in einer Reihe */
  .dlgrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 18px 16px; }
  /* Deckbau: Katalog links in 5 Spalten, das Deck steht fest offen rechts (deckbuilder.js) */
  .dk:not(.ddscreen) { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: auto auto minmax(0, 1fr); column-gap: 28px; }
  .dk > .header { grid-column: 1 / -1; } .dk > .dktop { grid-column: 1; } .dk > .dkcat { grid-column: 1; grid-row: 3; }
  .dk > .dksheet { position: relative; grid-column: 2; grid-row: 2 / span 2; max-height: none; height: auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(14,17,64,.5), inset 0 0 0 1px rgba(255,255,255,.14); padding: 14px 16px; margin-bottom: 4px; min-height: 0; display: flex; flex-direction: column; }
  .dk > .dksheet .dkhandle { display: none; } .dk > .dksheet .dkmore { flex: 1; } .dk > .dksheet .dksum { cursor: default; }
  .dk .dkgrid, .dk .dkgrid.c3 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 12px; }
  .playmodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(104px, auto); align-content: center; gap: 16px; }
  /* Partie als Spieltisch (Umbau 2026-10-12, User: „Die Hand … sollte nicht oben, sondern unten angezeigt werden“ – „Gemeint war unten innerhalb des rechten Panels“ –,
     „Bestätigungsbutton … rechts unten außerhalb vom Spielfeld“): links Verlauf, darunter die Phasenleiste; in der Mitte das Brett in voller Höhe; rechts das Panel
     (match.js placeDesk): unten die Hand als Raster in zwei Spalten, ganz unten die Bestätigen-Leiste; die Angriffswahl deckt das Panel. Spielerleisten größer. */
  .screen.match { display: grid; grid-template-columns: clamp(320px, 22vw, 440px) minmax(0, 1fr) clamp(300px, 22vw, 440px); /* Verlauf-Leiste breiter für die Aktionsblöcke (2026-10-12) */ grid-template-rows: auto minmax(0, 1fr) auto 48px; grid-template-areas: "lrail top act" "lrail board act" "phase board act" "phase own act"; padding: 0; gap: 0; overflow: clip; } /* das Brett reicht bis zur eigenen Leiste, die Phasenleiste (unten links) bestimmt nur die Höhe der linken Spalte */
  .screen.match > .topbar { grid-area: top; } .screen.match > .boardwrap { grid-area: board; min-height: 0; } .screen.match > .ownbar { grid-area: own; } .screen.match > .ticker { display: none; }
  /* Phasenleiste unten links (unter dem Verlauf): Zeile 1 Zug und Runde, Zeile 2 Phasen, Zeile 3 Ansicht und Ziele; der Verlauf-Knopf entfällt (die Spalte darüber ist der Verlauf) */
  .screen.match > .phasewrap { display: contents; }
  .screen.match .phasebar { grid-area: phase; height: auto; min-height: 0; flex-wrap: wrap; align-content: center; gap: 10px 8px; padding: 12px 18px 12px 22px; border-top: 0; box-shadow: inset -1px 0 0 var(--surface-line), inset 0 1px 0 var(--surface-line); font-size: 13px; }
  .screen.match .phasebar .who { font-size: 18px; } .screen.match .phasebar .round { order: 1; font-size: 14px; }
  .screen.match .phasebar .segs { order: 2; flex: 1 0 100%; justify-content: flex-start; gap: 4px; } .screen.match .phasebar .seg { padding: 5px 10px; } .screen.match .phasebar .seg .glyph { width: 16px; height: 16px; }
  .screen.match .phasebar .seg.on > span:not(.glyph) { display: inline; }
  .screen.match .phasebar .pbtn { order: 3; height: 34px; min-width: 34px; } .screen.match .phasebar .histbtn { display: none; }
  /* Rechtes Panel: Hand unten, Bestätigen-Leiste ganz unten (Knöpfe groß und untereinander, der Hauptknopf zuletzt, also ganz unten rechts) */
  .screen.match > .deskside { grid-area: act; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0; box-shadow: inset 1px 0 0 var(--surface-line); }
  .screen.match .actionbar { position: relative; left: auto; right: auto; bottom: auto; flex: none; flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 22px 24px; min-height: 0; max-height: 60%; overflow-y: auto; scrollbar-width: thin; box-shadow: inset 0 1px 0 var(--surface-line); }
  .screen.match .actionbar.idle { display: none; } /* ohne Frage steht die Hand ganz unten */
  .screen.match .actionbar::before { display: none; }
  .screen.match .actionbar .atitle { align-self: stretch; max-width: none; font-size: 15px; line-height: 1.3; color: var(--surface-ink); }
  .screen.match .actionbar .arow { flex: none; flex-direction: column; align-items: stretch; gap: 12px; overflow: visible; padding: 0; }
  .screen.match .actionbar .ibtn, .screen.match .actionbar .arow:has(> .ibtn:nth-child(3)) .ibtn { flex-direction: row; height: 64px; min-height: 64px; width: 100%; padding: 0 22px 0 18px; gap: 12px; border-radius: 32px; } /* auch bei drei und mehr Knöpfen (die Handy-Leiste stapelt dann Symbol und Wort) */
  .screen.match .actionbar .ibtn .ico, .screen.match .actionbar .arow:has(> .ibtn:nth-child(3)) .ibtn .ico { width: 30px; height: 30px; } .screen.match .actionbar .ibtn .lbl, .screen.match .actionbar .arow:has(> .ibtn:nth-child(3)) .ibtn .lbl { font-size: 22px; letter-spacing: .03em; }
  .screen.match .actionbar:has(.arow > .ibtn:nth-child(3)) .atitle { max-width: none; font-size: 15px; } .screen.match .actionbar .atitle .chip { font-size: 15px; padding: 3px 10px; }
  .screen.match .actionbar .dot.timer { align-self: flex-end; margin-bottom: 0; }
  .screen.match .actionbar.passive .arow { flex-direction: row; flex-wrap: wrap; }
  .screen.match > .atkpanel { grid-area: act; top: 0; bottom: 0; left: 0; right: 0; height: auto; min-height: 0; max-height: none; padding: 18px 0 12px; gap: 10px; background: var(--brand-indigoDeep); box-shadow: inset 1px 0 0 var(--surface-line); animation-name: fadeIn; }
  .screen.match > .atkpanel .atkhead { padding: 0 16px; } .screen.match > .atkpanel .atkdots { display: none; }
  .screen.match > .atkpanel .atkbody { padding-left: 12px; } .screen.match > .atkpanel .atktrack { flex-direction: column; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; padding: 2px 16px 8px 8px; gap: 12px; }
  .screen.match > .atkpanel .atkcard { flex: none; width: auto; }
  .screen.match > .atkpanel .atktrack.single { justify-content: flex-start; } .screen.match > .atkpanel .atkspell { font-size: 19px; white-space: normal; }
  .screen.match .ptags { gap: 3px; } /* Fähnchen (User 2026-10-12: „Schärpe ist beschnitten“): 20 statt 14 px hoch, über dem Lauflicht-Rahmen der Leiste */
  .screen.match .ptag { height: 20px; font-size: 12px; line-height: 20px; padding: 0 11px 0 8px; gap: 6px; position: relative; z-index: 4; } .screen.match .ptag .glyph { width: 13px; height: 13px; }
  .screen.match > .topbar, .screen.match > .ownbar { height: 48px; min-height: 48px; font-size: 15px; gap: 12px; }
  .screen.match .lpbar .track { height: 18px; } .screen.match .lpbar .num { font-size: 26px; min-width: 56px; } .screen.match .who { font-size: 16px; }
  .screen.match > .histrail { grid-area: lrail; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; padding: 18px 18px 18px 22px; scrollbar-width: thin; box-shadow: inset -1px 0 0 var(--surface-line); }
  .histrail .hrow { padding: 8px 10px !important; border-bottom: 0 !important; border-radius: 12px; background: color-mix(in srgb, var(--surface-panel) 55%, transparent); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
  /* Hand unten im rechten Panel (User 2026-10-12): zwei Spalten, Karten rund 195 px breit (vorher vier Spalten à 131 px oben rechts); viele Karten scrollen */
  .screen.match .deskside > .hand { flex: 0 1 auto; height: auto; min-height: 0; overflow: auto; padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; position: relative; border-top: 0; scrollbar-width: thin; }
  .screen.match .deskside > .hand::before { content: attr(data-title); font: italic 700 18px var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--brand-skyLight); min-height: 36px; display: flex; align-items: center; flex: none; }
  .screen.match .deskside > .hand .cards { touch-action: pan-y; position: static; height: auto; flex: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; overflow: visible; padding: 0; }
  .screen.match .deskside > .hand .cards .mini { position: relative; left: auto; bottom: auto; width: 100%; height: auto; opacity: 1; transition: box-shadow var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); }
  .screen.match .deskside > .hand .cards .mini:hover { transform: translateY(-4px); }
  .screen.match .deskside > .hand .cards .mini.on { box-shadow: 0 0 0 3px #fff, var(--shadow-highlight); } .screen.match .deskside > .hand .cards .mini.sel { box-shadow: var(--shadow-highlight); }
  .screen.match .deskside > .hand .cards .mini .rvval { top: 6px; }
  .screen.match .deskside > .hand .handtoggle { position: absolute; top: 16px; right: 18px; left: auto; transform: none; display: none; flex-direction: row; } .screen.match .deskside > .hand .handtoggle.show { display: flex; }
  .screen.match .deskside > .hand .coins { height: auto; flex-wrap: wrap; overflow: visible; }
  .screen.match .deskside > .hand .handstatus { position: static; flex: none; order: 1; justify-content: flex-start; } .screen.match .deskside > .hand .cards { order: 2; } /* Status des Angreifers beim Bezahlen: unter der Überschrift, über den Karten */
}

/* Fortschritt sichern (v200, backup.js): Blatt wie „Konto sichern“, scrollbar; Code groß in Monospace, Text-Sicherung und Eingabe als Felder */
.bksheet { max-height: calc(100dvh - 48px); overflow-y: auto; text-align: left; align-items: stretch; padding: 2px 4px; }
.bksheet > .eyebrow, .bksheet > .display { text-align: center; }
.bkstatus { font-size: calc(13px * var(--text-k)); color: var(--surface-ink); opacity: .85; text-align: center; }
.bkhead { margin-top: 8px; }
.bkcode { font: 800 calc(22px * var(--text-k)) ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; letter-spacing: .06em; text-align: center; padding: 12px 8px; border-radius: 12px; background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); border: 1px solid var(--surface-line); color: var(--surface-ink); user-select: all; word-break: break-all; }
.bkhint { line-height: 1.4; }
.bkrow { display: flex; gap: 8px; } .bkrow .btn { flex: 1; }
.btn.bkbtn { width: 100%; height: 44px; }
.bkarea { width: 100%; box-sizing: border-box; border-radius: 12px; border: 1px solid var(--surface-line); background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); color: var(--surface-ink); font: 600 13px ui-monospace, Menlo, Consolas, monospace; padding: 10px 12px; resize: vertical; }
.bkarea:focus { outline: none; border-color: var(--brand-sky); }
.bkfound { display: flex; flex-direction: column; gap: 6px; } .bkfound:empty { display: none; } .bkname { font-size: calc(20px * var(--text-k)); }
.bkwarn { font-size: calc(13px * var(--text-k)); color: var(--state-onTurn); }
.btn.bkdanger { background: var(--tier-stage2, #FE2829); color: #fff; } /* v279: Fortschritt zurücksetzen */

/* Erfolge (v200): Einblendung im Spiel oben mittig (blockiert nichts), Block auf dem Ergebnis-Bildschirm, Liste im Profil */
.achtoast { position: fixed; left: 50%; top: calc(var(--sat) + 12px); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 12px; max-width: min(92vw, 420px); padding: 10px 16px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-indigo) 88%, transparent), color-mix(in srgb, var(--brand-indigoDeep) 92%, transparent)); border: 1px solid color-mix(in srgb, var(--state-onTurn) 70%, transparent); box-shadow: 0 10px 30px rgba(14,17,64,.55), 0 0 18px color-mix(in srgb, var(--state-onTurn) 35%, transparent); color: var(--surface-ink); pointer-events: none; animation: achin .5s cubic-bezier(.76,0,.24,1) both; }
.achtoast.out { animation: achout .5s cubic-bezier(.76,0,.24,1) both; }
@keyframes achin { from { opacity: 0; transform: translate(-50%, -16px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes achout { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -12px); } }
.achtoast > .glyph { width: 28px; height: 28px; flex: none; --icon-color: var(--state-onTurn); }
.achtoast .achtx { min-width: 0; } .achtoast .achname { font-size: calc(18px * var(--text-k)); line-height: 1.15; }
.achcoins { flex: none; font: 800 calc(14px * var(--text-k)) var(--font-body); color: var(--state-onTurn); white-space: nowrap; }
.achic { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--state-onTurn) 22%, transparent); } .achic .glyph { width: 22px; height: 22px; --icon-color: var(--state-onTurn); }
.achrow { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-top: 1px solid var(--surface-line); }
.achrow:not(.on) .achic { background: color-mix(in srgb, var(--surface-ink) 8%, transparent); } .achrow:not(.on) .achic .glyph { --icon-color: var(--surface-ink); opacity: .55; } .achrow:not(.on) .achcoins { color: var(--surface-ink); opacity: .7; }
.achups .bdguprow { align-items: center; }
/* Laden und Booster (Entscheidung 2026-10-12-booster-shop): Hauptmenü-Knopf mit Zähler, Laden-Bildschirm, Booster-Bild (Platzhalter bis zur Design-Datei), Öffnen */
.ibtn[data-k="hub-shop"] { --k: #12C65A; }
.hubcount { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); min-width: 28px; height: 28px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; background: #FFD65A; color: var(--brand-indigoDeep); font: 800 15px/1 var(--font-body); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(14,17,64,.4); z-index: 2; }
.hubcount[hidden] { display: none; } .ibtn.primary.hubbtn > .hubcount { position: absolute; right: 16px; } /* rechts in der Pille, nicht neben dem Untertitel (User 2026-10-12) */
.header .coinchip.hdcoins { height: 32px; font-size: 15px; } .header .coinchip.hdcoins .coin-ic { width: 22px; height: 22px; }
.shopbody { padding: 4px 16px 24px; }
.shopwrap { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 0 auto; }
.shoplbl { margin-top: 6px; }
.shopitem.bpack { grid-template-columns: 124px minmax(0, 1fr); align-items: start; background: linear-gradient(140deg, color-mix(in srgb, var(--brand-sky) 40%, var(--surface-panel)) 0%, var(--surface-panel) 100%); }
.bpack .packart { width: 112px; }
.shopnote { line-height: 1.4; margin-top: 2px; }
.shoppocket { align-self: flex-start; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-weight: 700; background: color-mix(in srgb, var(--surface-ink) 10%, transparent); }
.shoppocket.on { background: #FFD65A; color: var(--brand-indigoDeep); }
.bbtns { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bbtns .btn { width: 100%; gap: 8px; } .shopitem .bbtns .shopbuy { grid-column: auto; }
.btn.shopopen { --acc: var(--tier-stage1); background: var(--tier-stage1); border-color: var(--tier-stage1); color: #fff; }
.btn.shopopen:disabled { opacity: .45; filter: saturate(.5); }
.packart { position: relative; aspect-ratio: 300 / 430; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg, #2D34E1 0%, #00ADE2 45%, #7B5CFF 100%); box-shadow: inset 0 0 0 2px rgba(255,255,255,.75), 0 8px 18px rgba(14,17,64,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%; container-type: inline-size; color: #fff; user-select: none; }
.packart::before, .packart::after { content: ""; position: absolute; left: 0; right: 0; height: 6%; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 4%, rgba(255,255,255,.15) 4% 8%); }
.packart::before { top: 0; } .packart::after { bottom: 0; }
.packart .foil { position: absolute; inset: -40% -80%; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); animation: packSweep 3.2s cubic-bezier(.76,0,.24,1) infinite; pointer-events: none; }
@keyframes packSweep { 0% { transform: translateX(-30%); } 60%, 100% { transform: translateX(30%); } }
.packart .plogo { width: 78%; filter: drop-shadow(0 2px 4px rgba(14,17,64,.5)); position: relative; }
.packart .ped { font: italic 800 13cqw/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; position: relative; text-shadow: 0 2px 6px rgba(14,17,64,.45); }
.packart .pkind { font: italic 700 9cqw/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); position: relative; }
.packart .pn { position: absolute; bottom: 9%; font: 700 7.5cqw/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.packart .pcount { position: absolute; top: 9%; right: 7%; min-width: 22cqw; height: 22cqw; padding: 0 5cqw; box-sizing: border-box; border-radius: 999px; display: grid; place-items: center; background: #FFD65A; color: var(--brand-indigoDeep); font: 800 13cqw/1 var(--font-body); box-shadow: 0 0 0 2px #fff; }
/* Öffnen (r-0069 A): Bühne mit festem Seitenverhältnis, Karten in Prozent gelegt; Effekte folgen (User 2026-10-12) */
.packov { position: fixed; inset: 0; z-index: 65; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: max(12px, var(--sat)) 12px max(14px, var(--sab)); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand-indigo) 80%, var(--surface-bg)) 0%, var(--surface-bg) 72%), var(--surface-bg); opacity: 0; transition: opacity .32s cubic-bezier(.76,0,.24,1); overflow: hidden; }
.packov.on { opacity: 1; } .packov.off { opacity: 0; pointer-events: none; }
.packtop { width: min(100%, 620px); display: flex; align-items: center; gap: 10px; } .packtop .display { font-size: 22px; }
.packhint { min-height: 20px; font: 600 14px var(--font-body); color: var(--brand-skyLight); text-align: center; }
.packstage { position: relative; width: min(100%, 620px, calc((100dvh - 230px) / .9)); aspect-ratio: 10 / 9; flex: none; margin: auto 0; }
.packbox { appearance: none; border: 0; padding: 0; background: transparent; cursor: pointer; position: absolute; left: 50%; top: 48%; width: min(76%, calc((100dvh - 250px) * .59)); transform: translate(-50%, -50%); transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .4s cubic-bezier(.76,0,.24,1); z-index: 30; }
.packbox .packart { width: 100%; }
.packbox .strip { position: absolute; left: 0; right: 0; top: 0; height: 13%; border-radius: 12px 12px 0 0; background: linear-gradient(90deg, var(--brand-skyLight), #fff, var(--brand-skyLight)); z-index: 2; transition: transform .5s cubic-bezier(.76,0,.24,1), opacity .5s cubic-bezier(.76,0,.24,1); }
.packbox.torn .strip { transform: translate(60%, -160%) rotate(25deg); opacity: 0; }
.packbox.gone { opacity: 0; transform: translate(-50%, -20%) scale(.85); pointer-events: none; }
.pc { touch-action: none; /* v365: Halten und Ziehen neigt die Zoom-Karte, kein Scroll-Abbruch */ appearance: none; border: 0; padding: 0; background: transparent; position: absolute; left: 36.5%; top: 28%; width: 27%; aspect-ratio: 600 / 819; perspective: 700px; transform: translate(0%, 0%) rotate(var(--rot, 0deg)) scale(.92); transform-origin: 50% 100%; cursor: pointer; transition: transform .6s cubic-bezier(.76,0,.24,1); } /* Flug in den Fächer nur über transform (--tx/--ty aus booster-open.js), läuft auf der Grafikkarte */
.packstage:not(.fanned) .pc { opacity: 0; pointer-events: none; }
.packstage:not(.fanned):not(.inpack) .pc { visibility: hidden; }
/* Karten im Booster (User 2026-10-13): Stapel in Booster-Größe, schiebt sich mit starkem Ease-out aus der Öffnung; danach Flug in den Fächer (.fanned) */
.packstage.inpack .pc { opacity: 1; transform: translate(var(--px, 0%), var(--py, 0%)) rotate(var(--prot, 0deg)) scale(var(--ps, 1)); transition: transform .62s cubic-bezier(.16,1,.3,1); }
.packstage.fanned .pc { transform: translate(var(--tx, 0%), var(--ty, 0%)) rotate(var(--rot, 0deg)) scale(1); }
.packstage.instant .pc, .packstage.instant .pc .in, .packstage.instant .pbadge { transition: none !important; }
.pc[hidden] { display: none; }
.pc .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.76,0,.24,1); }
.pc.flip .in { transform: rotateY(180deg); }
.pc .f, .pc .b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 10px rgba(14,17,64,.6); }
.pc .f { transform: rotateY(180deg); } .pc img { width: 100%; height: 100%; display: block; object-fit: cover; }
.pc.s2.flip .f { box-shadow: 0 0 0 2px #FFC34D, 0 0 18px 5px rgba(255,195,77,.75); }
.pc.holo.flip .f { box-shadow: 0 0 0 2px #fff, 0 0 22px 7px rgba(189,245,255,.85), 0 0 34px 10px rgba(255,195,77,.55); }
.pbadge { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%) scale(0); transition: transform .35s cubic-bezier(.76,0,.24,1); display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; font: 800 11px/1 var(--font-body); color: #fff; white-space: nowrap; z-index: 3; box-shadow: 0 0 0 1.5px #fff, 0 2px 6px rgba(14,17,64,.5); }
.pbadge.new { background: #12C65A; } .pbadge.coin { background: var(--tier-stage1); } .pbadge.own { background: var(--brand-indigo); }
.pbadge .coin-ic { width: 13px; height: 13px; }
.pc.flip .pbadge { transform: translateX(-50%) scale(1); transition-delay: .35s; }
.packsum { min-height: 44px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 14px; opacity: 0; transition: opacity .4s cubic-bezier(.76,0,.24,1); }
.packsum.on { opacity: 1; } .packsum b { font: italic 700 17px var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.packsum .pcoins { display: inline-flex; align-items: center; gap: 6px; color: #FFD65A; font-weight: 700; } .packsum .coin-ic { width: 18px; height: 18px; }
.packctl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; min-height: 44px; }
.reduce-motion .packart .foil { animation: none; }
@media (prefers-reduced-motion: reduce) { .packart .foil { animation: none; } }

/* Booster-Folie (User 2026-10-12, Review r-0070; app/src/pack-foil.js): Motiv A/B, Schillerfolie, schillernde und spiegelnde Schrift, Lichtreflex, Siegelnaht */
:root { --sparkle: url("./assets/boosters/sparkle.png"); }
.foilpack { --mx: 50; --my: 42; --rx: 0deg; --ry: 0deg; --hyp: 0; --holo: 0; --glit: 0; --ink: .85; --spec: .9; --glare: .8; --crimp: 6.85%; position: relative; aspect-ratio: 768 / 1300; perspective: 900px; }
.foilpack::before, .packart.hasart.foilpack::before { content: ""; display: block; position: absolute; inset: 1.5% 1%; height: auto; border-radius: 4px; background: none; box-shadow: 0 10px 18px rgba(14,17,64,.55); pointer-events: none; } /* fester Schatten statt drop-shadow-Filter: der Filter wurde mit der Folie jedes Bild neu berechnet (User 2026-10-12: flüssiger) */
.fp-tilt { position: absolute; inset: 0; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; border-radius: 3px; overflow: hidden;
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / 12px 6px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / 12px 6px repeat-x, linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - 11px) no-repeat;
          mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) 50% 0 / 12px 6px repeat-x, conic-gradient(from -45deg at 50% 100%, #000 90deg, #0000 0) 50% 100% / 12px 6px repeat-x, linear-gradient(#000 0 0) 50% 50% / 100% calc(100% - 11px) no-repeat; }
.fp-tilt > * { position: absolute; inset: 0; pointer-events: none; }
.fp-tilt > .fp-art { top: var(--crimp); bottom: auto; width: 100%; height: calc(100% - 2 * var(--crimp)); object-fit: cover; display: block; user-select: none; }
.fp-tilt > .fp-crimp { height: calc(var(--crimp) + 2px); background: var(--art) 50% 0 / 100% auto no-repeat; filter: blur(2.5px) brightness(.82) saturate(1.15); transform: scaleX(1.08); }
.fp-tilt > .fp-crimp.top { bottom: auto; } .fp-tilt > .fp-crimp.bot { top: auto; background-position: 50% 100%; }
.fp-holo { mix-blend-mode: color-dodge; opacity: var(--holo); background: repeating-linear-gradient(118deg, #ff6f91 0%, #ffc75f 5%, #f9f871 9%, #6ef0a5 13%, #5ad1ff 18%, #9b8cff 23%, #ff6fd8 28%, #ff6f91 33%); background-size: 260% 260%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%); }
.fp-glit { mix-blend-mode: color-dodge; opacity: calc(var(--glit) * (.35 + var(--hyp) * .65)); background: repeating-linear-gradient(118deg, #ff9fb6 0%, #ffe08a 8%, #a6f5c8 16%, #9fe0ff 24%, #c6b4ff 32%, #ff9fb6 40%) calc(var(--mx) * 1%) calc(var(--my) * 1%) / 300% 300%; -webkit-mask: var(--sparkle) calc(var(--mx) * -.5px) calc(var(--my) * -.5px) / 96px 96px repeat; mask: var(--sparkle) calc(var(--mx) * -.5px) calc(var(--my) * -.5px) / 96px 96px repeat; }
.fp-tilt > .fp-ink, .fp-tilt > .fp-spec { inset: var(--crimp) 0; }
.fp-ink { -webkit-mask: var(--lt) 50% 50% / 100% 100% no-repeat; mask: var(--lt) 50% 50% / 100% 100% no-repeat; mix-blend-mode: multiply; opacity: var(--ink); background: repeating-linear-gradient(118deg, #ffb3c6 0%, #ffe08a 6%, #b8ffd0 12%, #a6e8ff 18%, #cdb8ff 24%, #ffb3ec 30%, #ffb3c6 36%); background-size: 300% 300%; background-position: calc(var(--mx) * 1.2%) calc(var(--my) * 1%); }
.fp-spec { -webkit-mask: var(--lt) 50% 50% / 100% 100% no-repeat; mask: var(--lt) 50% 50% / 100% 100% no-repeat; mix-blend-mode: screen; opacity: var(--spec); background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.95) 48%, #fff 50%, rgba(255,255,255,.95) 52%, transparent 60%); background-size: 320% 100%; background-position: calc(100% - var(--mx) * 1%) 0; }
.fp-sheen { mix-blend-mode: screen; opacity: var(--sheen, 0); background: linear-gradient(115deg, transparent 34%, rgba(255,255,255,.16) 44%, rgba(255,255,255,.34) 50%, rgba(255,255,255,.16) 56%, transparent 66%); background-size: 260% 100%; background-position: calc(100% - var(--mx) * 1%) 0; }
.fp-glare { mix-blend-mode: soft-light; opacity: var(--glare); background: radial-gradient(farthest-corner circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgba(255,255,255,.9) 0%, rgba(255,255,255,.28) 24%, rgba(14,17,64,.4) 85%); }
.fp-edge { background: linear-gradient(90deg, rgba(255,255,255,.2), transparent 7%, transparent 93%, rgba(14,17,64,.32)), repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 1.5px, rgba(14,17,64,.2) 1.5px 3.5px) 0 0 / 100% var(--crimp) no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 1.5px, rgba(14,17,64,.2) 1.5px 3.5px) 0 100% / 100% var(--crimp) no-repeat, linear-gradient(rgba(14,17,64,.35), rgba(14,17,64,0)) 0 var(--crimp) / 100% 1.2% no-repeat, linear-gradient(rgba(14,17,64,0), rgba(14,17,64,.35)) 0 calc(100% - var(--crimp)) / 100% 1.2% no-repeat; }
.foilpack.v-a { --holo: .26; --ink: .85; --spec: .9; --glare: .85; }
.foilpack.v-b { --holo: 0; --sheen: .55; --ink: .9; --spec: 1; --glare: .65; } /* r-0070 B: nur die Schrift schillert, dazu leichter Glanz auf dem Hintergrund (User 2026-10-12) */
.foilpack.v-c { --holo: .12; --glit: .95; --ink: .85; --spec: .9; --glare: .8; }
.packart.hasart { aspect-ratio: 768 / 1300; background: none; box-shadow: none; border-radius: 0; overflow: visible; display: block; }
.packart.hasart::before, .packart.hasart::after { display: none; }
.packart.hasart .pcount { z-index: 3; top: 7%; right: 5%; }
.bpack .packstack { position: relative; width: 100px; margin: 6px 12px 0 0; } .bpack .packstack .packart { width: 100%; }
.packstack .packart.back { position: absolute; inset: 0; transform: translate(20%, 3%) rotate(10deg) scale(.88); filter: brightness(.72) drop-shadow(0 6px 12px rgba(14,17,64,.5)); }
.packstack .packart .pcount { top: auto; bottom: 4%; right: -8%; }
.packstack .packart.front { position: relative; transform: rotate(-3deg); }
/* Abriss (booster-open.js tear): das obere Stück ist eine Kopie des Boosters, beide mit derselben Zickzack-Kante geschnitten */
.packbox .tearoff { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 2; }
/* Masters-Deckwahl: KI-Decks (User 2026-10-12) */
.aidecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.aideck { appearance: none; border: 0; cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 12px; text-align: left; color: #fff; background: color-mix(in srgb, var(--brand-indigo) 45%, var(--surface-panel)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); min-width: 0; }
.aideck .display { font-size: 17px; } .aideck .tiny { line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aideck.on { box-shadow: inset 0 0 0 2.5px #fff, 0 0 16px rgba(189,245,255,.45); background: color-mix(in srgb, var(--brand-sky) 40%, var(--surface-panel)); }
.aideck.off { opacity: .55; cursor: default; } .aideck .glyph { position: absolute; right: 10px; top: 10px; width: 14px; height: 14px; }
/* Licht beim Öffnen (pack-light.js, Review r-0072 A „Sternenlicht“, mehrere Ebenen): hinter dem Booster Aura, zwei weichgezeichnete Strahlenkränze gegenläufig,
   ungeordnete Einzelstrahlen; davor Blitz an der Reißkante, kurzer Lichtkegel, Lichtring; Partikel auf einer Leinwand (canvas.lr-fx). Farben --g1/--g2 je Motiv */
.lrig { position: absolute; left: 50%; top: 48%; width: min(175vw, 1150px); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: 0; transition: opacity 1.2s ease; }
/* Flüssig (User 2026-10-12): keine Filter, kein Blend-Modus; weich durch Verläufe und Masken, Ebenen ohne Verschiebe-Transform zentriert, damit scale beim Aufleuchten um die Mitte wirkt */
.lrig > * { position: absolute; aspect-ratio: 1; }
.lr-aura { width: 44%; left: 28%; top: 28%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--g1) 80%, #fff) 0%, color-mix(in srgb, var(--g1) 58%, transparent) 20%, color-mix(in srgb, var(--g1) 30%, transparent) 40%, color-mix(in srgb, var(--g1) 10%, transparent) 56%, transparent 70%); opacity: .9; animation: lrPulse 3.2s ease-in-out infinite; }
.lr-wreath { border-radius: 50%; -webkit-mask: radial-gradient(circle, transparent 14%, #000 28%, #000 39%, transparent 70%); mask: radial-gradient(circle, transparent 14%, #000 28%, #000 39%, transparent 70%); }
.lr-wreath.w1 { width: 64%; left: 18%; top: 18%; background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--g2) 65%, #fff) 0deg, color-mix(in srgb, var(--g2) 30%, transparent) 3deg, transparent 6deg 8deg, color-mix(in srgb, var(--g2) 30%, transparent) 10deg, color-mix(in srgb, var(--g2) 65%, #fff) 13deg); opacity: .5; animation: lrSpin 46s linear infinite; }
.lr-wreath.w2 { width: 84%; left: 8%; top: 8%; background: repeating-conic-gradient(from 6deg, color-mix(in srgb, var(--g1) 75%, #fff) 0deg, color-mix(in srgb, var(--g1) 35%, transparent) 5deg, transparent 10deg 13deg, color-mix(in srgb, var(--g1) 35%, transparent) 18deg, color-mix(in srgb, var(--g1) 75%, #fff) 23deg); opacity: .42; animation: lrSpin 71s linear infinite reverse; }
.lr-rays { width: 100%; left: 0; top: 0; }
.lr-ray { position: absolute; left: 50%; top: 50%; transform-origin: 50% 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--g2) 55%, #fff) 0%, color-mix(in srgb, var(--g1) 45%, transparent) 38%, transparent 100%);
  -webkit-mask: conic-gradient(from 180deg at 50% 0, #000 0deg, rgba(0,0,0,.45) calc(var(--ha) * .5), transparent var(--ha), transparent calc(360deg - var(--ha)), rgba(0,0,0,.45) calc(360deg - var(--ha) * .5), #000 360deg);
          mask: conic-gradient(from 180deg at 50% 0, #000 0deg, rgba(0,0,0,.45) calc(var(--ha) * .5), transparent var(--ha), transparent calc(360deg - var(--ha)), rgba(0,0,0,.45) calc(360deg - var(--ha) * .5), #000 360deg); } /* weicher Keil; Winkel, Länge, Schwingen je Strahl aus pack-light.js */
.lr-bloom { width: 34%; left: 33%; top: 33%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0%, color-mix(in srgb, var(--g2) 70%, #fff) 16%, color-mix(in srgb, var(--g2) 45%, transparent) 34%, color-mix(in srgb, var(--g1) 18%, transparent) 54%, transparent 70%); opacity: 0; } /* Aufleuchten beim Aufreißen */
@keyframes lrSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes lrPulse { 0%, 100% { transform: scale(.92); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
.lrig.calm { opacity: .5; }
.lr-front { position: absolute; inset: 0; pointer-events: none; z-index: 34; overflow: visible; }
.lr-flash { position: absolute; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(closest-side, #fff 0%, rgba(255,255,255,.9) 30%, color-mix(in srgb, var(--g2) 55%, transparent) 62%, transparent 100%); opacity: 0; }
.lr-cone { position: absolute; transform-origin: 50% 100%; background: linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 6%, color-mix(in srgb, var(--g2) 60%, transparent) 28%, color-mix(in srgb, var(--g1) 28%, transparent) 60%, transparent 100%);
  -webkit-mask: conic-gradient(from 0deg at 50% 156%, #000 0deg, #000 7deg, transparent 16.6deg, transparent 343.4deg, #000 353deg); mask: conic-gradient(from 0deg at 50% 156%, #000 0deg, #000 7deg, transparent 16.6deg, transparent 343.4deg, #000 353deg); opacity: 0; } /* Kegel: Spitze unter der Reißkante, weiche Ränder aus der Maske */
.lr-shock { position: absolute; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, transparent 62%, color-mix(in srgb, var(--g1) 45%, transparent) 74%, rgba(255,255,255,.9) 85%, color-mix(in srgb, var(--g2) 60%, transparent) 92%, transparent 100%); opacity: 0; transform: translate(-50%, -50%); }
.lr-cardrays { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255,214,90,.8) 0deg, rgba(255,214,90,.35) 3deg, transparent 6deg 9deg, rgba(255,214,90,.35) 12deg, rgba(255,214,90,.8) 15deg), radial-gradient(circle, rgba(255,214,90,.55) 0%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 0%, transparent 66%); mask: radial-gradient(circle, #000 0%, transparent 66%); opacity: 0; }
canvas.lr-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.reduce-motion .lrig *, .reduce-motion .lrig { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .lrig, .lrig * { animation: none !important; } }
/* Gezogene Karten (User 2026-10-12): kurz groß in der Mitte, dann in die Hand (match.js showDrawn) */
.drawreveal { position: fixed; inset: 0; z-index: 64; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: radial-gradient(ellipse 70% 45% at 50% 50%, rgba(14,17,64,.6), rgba(14,17,64,0) 75%); cursor: pointer; }
.drawreveal .eyebrow { color: #fff; text-shadow: 0 1px 3px rgba(14,17,64,.8); }
.drawreveal .drrow { display: flex; gap: 10px; justify-content: center; padding: 0 16px; }
.drawreveal .drcard { width: min(150px, calc((100vw - 32px - (var(--n) - 1) * 10px) / var(--n))); aspect-ratio: 600 / 820; border-radius: 8px; overflow: hidden; box-shadow: 0 14px 30px rgba(14,17,64,.6), 0 0 0 2px #fff; background: var(--brand-indigoDeep); }
.drawreveal .drcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v276: recycelte Karte – unsichtbar, bis ihr Flug aus der Zahl-Zone landet, dann kurzer Glanz */
.hand .mini.incoming, .mini.incoming { opacity: 0; transition: none; }
.mini.arrive img { animation: rvArrive 420ms cubic-bezier(.76,0,.24,1); } @keyframes rvArrive { 0% { filter: brightness(1.8) drop-shadow(0 0 8px rgba(0,227,105,.9)); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .mini.arrive img { animation: none; } }
/* v289 (User 2026-10-16: „Wenn eine Karte ausgewählt werden muss, werden diese zu klein angezeigt. Die Karten müssen auf der Hand erscheinen und valide Karten müssen deutlich größer
   werden. Einheitliche Anzeige!“): Wahl-Modus der Hand (match.js › renderHand, hand.js › layout) – wählbare Karten groß (Breite --pickw) in einer flachen Reihe, sie dürfen über die
   Hand hinausragen; übrige klein und gedämpft. Gilt für River-Karte als Falle, Zahlen, Karte wählen (auch aus Ablage oder Deck), Entwicklung und Handlimit. Tisch (Desktop): Raster wie bisher. */
@media not all and (min-width: 1100px) and (min-height: 600px) {
  .hand.picking { overflow: visible; z-index: 8; }
  .hand.picking .cards { overflow: visible !important; display: block; padding: 0 !important; scroll-snap-type: none; }
  .hand.picking .cards > .mini { position: absolute; left: 50%; bottom: 4px !important; transform-origin: 50% 100%; opacity: 1; scroll-snap-align: none; transition: transform var(--motion-normal) var(--motion-ease), width var(--motion-normal) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease); }
  .hand.picking .cards > .mini.pickbig { width: var(--pickw, 104px); }
  .hand.picking .cards > .mini { bottom: calc(4px + var(--picklift, 0px)) !important; } /* v291: über den Knöpfen der Aktionsleiste (hand.js › pickLift) */
  .hand.picking .cards > .mini.picksmall { width: 50px; filter: grayscale(.6); } /* v292: nicht abdunkeln (User 2026-10-16) */
  .hand.picking .cards > .mini.card.pickbig.sel:not(.on) { box-shadow: 0 0 0 2px #fff, 0 0 18px rgba(47,180,255,.85); }
  .hand.picking .mini .rvval { top: -24px; font-size: 16px; line-height: 20px; min-width: 38px; opacity: 1; }
  .hand.picking .handstatus { bottom: auto; top: -64px; }
  .screen.match:has(.hand.picking) .actionbar .atitle { max-width: none; flex: 1 1 0; min-width: 0; font-size: 12px; } .screen.match:has(.hand.picking) .actionbar .arow { flex: 0 0 auto; } /* Frage in einer Zeile neben den Knöpfen statt schmal unter den großen Karten */
}
.hand .mini .picktag { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 1px 8px; border-radius: 999px; background: rgba(14,17,64,.88); box-shadow: 0 0 0 1px rgba(255,255,255,.35); color: #fff; font: 700 10px/16px var(--font-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }

/* v316 Panel-Look D (r-0094, User 2026-10-17: „weg von dünner Outline und durchscheinender Fläche“): deckende Platte ohne Kontur.
   Verlauf --p1 → --p2 je Funktion, Lichtkante oben (--edge), Innenglühen oben links (--hl), feine Rausch-Textur (--tex), Abdunklung unten, Schatten.
   Erst in den Adventure-Menüs (adventure.css setzt die Farben je Funktion); Hub, Profil, Deckbau, Laden, Blätter, Verlauf folgen mit derselben Klasse. */
:root { --tex: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.plate { --p1: #252C8E; --p2: #12153F; --edge: rgba(255,255,255,.22); --hl: .14; border: 0; border-radius: 18px; color: var(--surface-ink);
  background: var(--tex), radial-gradient(120% 70% at 18% 0%, rgba(255,255,255,var(--hl)), transparent 55%), linear-gradient(160deg, var(--p1), var(--p2));
  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 10px 24px rgba(0,0,0,.45); }
.plate.gold { --p1: #FFDF6A; --p2: #DD960C; --edge: rgba(255,255,255,.7); --hl: .4; color: #1C1340; } /* Coins */
.plate.violet { --p1: #7E50E6; --p2: #43218A; --edge: rgba(233,217,255,.7); --hl: .22; } /* XP */
.well { background: rgba(8,10,40,.55); border: 0; border-radius: 12px; box-shadow: inset 0 2px 6px rgba(0,0,0,.5); } /* eingesenkte Mulde auf einer Platte */
.binderstrip .binder:nth-child(n) { row-gap: 26px; padding-bottom: 28px; } /* v344 (r-0095 G): Platz für die Anzahl unter jeder Karte; steht am Ende, damit es die Seiten-Polster (Handy, Desktop) übersteuert */
.seg button, .dkview button { position: relative; } .seg button::before { content: ""; position: absolute; inset: -8px -2px; } /* v345 (UX-Review): Umschalter Karte/Text mit mind. 44 px Trefferfläche */

/* v349 Laden (User 2026-10-18: „Booster-Content schön präsentieren, nicht Fließtext“; Schriften nach r-0086 B: Titel und Zahlen Barlow Condensed kursiv in Versalien,
   Beschriftungen Barlow Bold in Versalien gesperrt, himmelblaue Kopfzeile über dem Titel) */
.shopitem.bpack { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px; }
.bpack .beyebrow { font: 800 11px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-sky, #2FB4FF); }
.bpack .btitle { font: italic 800 28px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; margin: 3px 0 8px; }
.bpack .bpocket { align-self: flex-start; padding: 4px 11px; border-radius: 999px; font: 800 11px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, #fff 12%, transparent); color: color-mix(in srgb, #fff 80%, transparent); }
.bpack .bpocket.on { background: #FFD65A; color: var(--brand-indigoDeep); }
.bpack .bmiss { margin-top: 8px; font: 700 11px/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: #FFB4B4; }
.bpack .bmore { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, #fff 14%, transparent); }
.bsec { display: flex; flex-direction: column; gap: 8px; }
.blabel { font: 800 11px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, #fff 62%, transparent); }
/* Inhalt (Wahl A, User 2026-10-18): je Stufe Anzahl und ein kleiner Fächer mit genau so vielen gezeichneten Beispielkarten, ohne Rahmen; Stufe II als Second-Holo */
.bgroups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
.bgroup { display: flex; align-items: center; gap: 4px; min-width: 0; }
.bcount { --acc: var(--tier-base); display: flex; flex-direction: column; align-items: flex-start; min-width: 50px; } .bcount.t-stage1 { --acc: var(--tier-stage1); } .bcount.t-stage2 { --acc: var(--tier-stage2); } .bcount.t-spell { --acc: #B388FF; }
.bcount b { font: italic 800 28px/1 var(--font-display); color: #fff; } .bcount span { font: 800 10px/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); white-space: nowrap; }
.bfan { position: relative; flex: 1 1 0; height: 92px; }
.bcard { position: absolute; left: 50%; bottom: 0; width: 56px; margin-left: -28px; aspect-ratio: 600 / 820; border-radius: 5px; overflow: hidden; background: #12153F; box-shadow: 0 6px 16px rgba(0,0,0,.5); transform: translateX(calc(var(--i) * 21px)) rotate(calc(var(--i) * 7deg)); transform-origin: 50% 150%; }
.bcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Seltenheiten und Doppelte: die Pillen der Kartenansicht (.ochip, v341). Holo-Verlauf und Schwarz-Gold bleiben Super-Holo und Eclipse vorbehalten (User 2026-10-18);
   Seltenheiten sind alle dunkel und unterscheiden sich nur in Ring, Zahl und Symbol: Rare weiß, Holo-Rare flieder, Super Rare orange, Uber Rare himmelblau */
.brars, .bdupes { display: flex; flex-wrap: wrap; gap: 8px; }
.bnote { font: 600 12px/1.3 var(--font-body); color: color-mix(in srgb, #fff 70%, transparent); }
.brar { --rc: #fff; padding-left: 7px; color: var(--rc); box-shadow: 0 0 0 1.5px var(--rc) inset; } .brar img { width: 18px; height: 18px; filter: brightness(0) invert(1); } .brar small { color: #fff; letter-spacing: .08em; text-transform: uppercase; }
.brar.r4 { --rc: #CDA6FF; } .brar.r5 { --rc: #FF9A3C; } .brar.r6 { --rc: var(--brand-sky, #2FB4FF); }
.bpack .bbtns .btn { font: italic 800 20px/1 var(--font-display); text-transform: uppercase; }
/* v354 Neue Karten im Album (User 2026-10-18: „Ich muss sehen können, welche Karten neu sind“; Wahl C und 1; Glow-Auswahl auf der Artifact-Seite: Karte Puls, Pille Glanzlauf, Schrift Display):
   grüne NEU-Pille (.pbadge.new, auch beim Booster-Öffnen) oben mittig auf der Karte, bleibt bis zum Antippen */
.rostertile .pbadge.new { top: -8px; bottom: auto; transform: translateX(-50%); transition: none; pointer-events: none; }
.rostertile.isnew { animation: newPulse 1.8s ease-in-out infinite; }
@keyframes newPulse { 0%, 100% { box-shadow: 0 0 0 2px #12C65A, 0 0 6px 1px rgba(18,198,90,.45), 0 4px 12px rgba(14,17,64,.45); } 50% { box-shadow: 0 0 0 2.5px #5CF59A, 0 0 30px 11px rgba(18,198,90,.95), 0 4px 12px rgba(14,17,64,.45); } }
.pbadge.new { font: italic 700 13.5px/1 var(--font-display); letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px 2px 8px; overflow: hidden; box-shadow: 0 0 0 1.5px #fff, 0 0 9px 2px rgba(18,198,90,.8); } /* CI-Display (r-0086 B), Wahl 2026-10-18 */
.pbadge.new::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.85), transparent); animation: newSheen 2.4s ease-in-out infinite; }
@keyframes newSheen { 0%, 35% { transform: translateX(0); } 100% { transform: translateX(380%); } }
@media (prefers-reduced-motion: reduce) { .rostertile.isnew, .pbadge.new::after { animation: none; } .rostertile.isnew { box-shadow: 0 0 0 2px #12C65A, 0 0 16px 4px rgba(18,198,90,.75), 0 4px 12px rgba(14,17,64,.45); } }
.reduce-motion .rostertile.isnew, .reduce-motion .pbadge.new::after { animation: none !important; } .reduce-motion .rostertile.isnew { box-shadow: 0 0 0 2px #12C65A, 0 0 16px 4px rgba(18,198,90,.75), 0 4px 12px rgba(14,17,64,.45); }
.rosterchips .newpill.on { --acc: #12C65A; }
.hubhalf .hubbtn > .hubcount.newcount { top: 50%; right: 10px; transform: translateY(-50%); min-width: 24px; height: 24px; padding: 0 7px; font-size: 13px; } /* v376 (User: „sitzt nicht richtig“): mittig rechts in der Pille wie beim Shop; der Inhalt rückt nach links */
.hubhalf .hubbtn:has(> .hubcount:not([hidden])) { padding-right: 36px; } .hubpad > .ibtn.primary.hubbtn:has(> .hubcount:not([hidden])) { padding-right: 52px; }
/* v355 (#209): r-0086 B in allen Menüs, nicht nur im Adventure und im Laden. Beschriftungen (eyebrow) in Barlow Bold, Versalien, gesperrt, himmelblau;
   Abschnittsköpfe mit auslaufender Linie wie im Adventure. :where hält die Spezifität niedrig, damit eigene Farben (Lobby, Ziehen, Reaktion) bleiben. Match unverändert. */
: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); }
:where(.screen:not(.match), .cover .namesheet, .cover .bksheet) .eyebrow { font: var(--ci-lab); letter-spacing: var(--ci-sp); color: var(--ci-acc); }
:where(.screen:not(.match)) :where(.scrollbody, .deckbody, .pfpick, .stack) > .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; }
:where(.screen:not(.match)) :where(.scrollbody, .deckbody, .pfpick, .stack) > .eyebrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(111,211,255,.5), transparent); }
/* v356 Login-Sync: Anmeldeblatt (E-Mail, Code) und Konfliktblatt „Welchen Stand behalten?“ im Muster der Konto- und Sicherungsblätter */
.acctstep { display: flex; flex-direction: column; gap: 10px; }
.acctinput { width: 100%; box-sizing: border-box; } .acctcode { font: italic 700 26px/1 var(--font-display); letter-spacing: .3em; text-align: center; }
.acctmail { font-size: 22px; overflow-wrap: anywhere; text-transform: none; } .btn.acctdel { --acc: #FF6B6B; }
.syncsheet { max-width: 520px; } .syncpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 4px; }
.synccard { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; border-radius: 16px; text-align: left; cursor: pointer; color: var(--surface-ink);
  background: color-mix(in srgb, var(--brand-indigoDeep) 70%, transparent); border: 1.5px solid color-mix(in srgb, var(--brand-sky) 45%, transparent); min-width: 0; }
.synccard:hover, .synccard:focus-visible { border-color: var(--brand-skyLight); } .synccard:disabled { opacity: .6; cursor: default; }
.syncname { font-size: 20px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syncrows { display: flex; flex-direction: column; gap: 2px; font: 700 12px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--ci-dim, rgba(255,255,255,.72)); }
.synccard .synckeep { margin-top: auto; width: 100%; height: 38px; font-size: 14px; pointer-events: none; }
@media (max-width: 360px) { .syncpair { grid-template-columns: 1fr; } }
/* v358 Album (User 2026-10-19, Screenshots): „Unten ×1 abgeschnitten“: auf kürzeren Bildschirmen schrumpfte die Mappe in der Spalte (flex-shrink),
   die Anzahl unter der letzten Reihe lag dann auf dem Rand. Mappe und Kreaturreihen behalten ihre Höhe, die Seite scrollt.
   „NEU abgeschnitten“ (Nach Kreatur): die waagrecht scrollende Reihe schnitt Pille und Glow oben und unten ab; Innenabstand mit gleichem Gegen-Rand gibt ihnen Platz. */
.rostergrid.v-binder > *, .rostergrid.v-creature > * { flex-shrink: 0; }
.crrow { padding: 26px 14px 30px 14px; margin: -22px -14px -26px -14px; } .crrow .rostertile { overflow: visible; } /* die Kachel selbst schnitt die Pille ab (wie in der Mappe: sichtbar lassen) */
/* v360 Anmeldeblatt Variante C „Spielerkarte“ (User 2026-10-19: „Ja, Variante C war gemeint“; Auswahlseite „Anmeldeblatt“, vorher: „Viel zu kleine Schriften,
   kein Design … Bitte Pormu Grafik einfügen“): Platte in Himmelblau, Text links, Pormu ragt rechts oben aus der Platte. CI r-0086 B: Label Barlow Bold Versalien
   gesperrt himmelblau 13 px, Titel Barlow Condensed Bold Italic Versalien 42 px, Text Barlow Medium 16 px, Knöpfe 56 px hoch mit 19 px.
   Gilt für Anmelden, Ohne Konto, E-Mail, Code, Angemeldet und das Konfliktblatt. Das Blatt scrollt, wenn es höher als der Bildschirm ist (Tastatur offen). */
.cover.acctcover { overflow-y: auto; place-items: safe center; }
.acctv { width: 100%; max-width: 352px; gap: 0; }
.acctv .acctcard { --p1: #1F6FAE; --p2: #14306E; --edge: rgba(189,245,255,.65); position: relative; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; text-align: left; margin-top: 58px; padding: 24px 20px 20px; border-radius: 24px; }
.acctv .acctart { position: absolute; right: -18px; top: -64px; width: 158px; display: block; pointer-events: none; user-select: none; transform: rotate(7deg); filter: drop-shadow(0 12px 14px rgba(5,6,30,.55)); animation: acctBob 3.4s ease-in-out infinite; }
@keyframes acctBob { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(7deg) translateY(-7px); } }
.reduce-motion .acctv .acctart { animation: none; } @media (prefers-reduced-motion: reduce) { .acctv .acctart { animation: none; } }
.acctv .eyebrow { font: 700 13px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); }
.acctv .accttitle { font: italic 700 42px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: #fff; margin-top: 6px; text-wrap: balance; }
.acctv .accttitle.mail { text-transform: none; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; } /* Adresse: Umbruch nach dem @, links von Pormu */
.acctv .acctlead { font: 500 16px/1.45 var(--font-body); color: rgba(255,255,255,.88); margin: 8px 0 0; }
.acctv .acctsub { font: 600 15px/1.4 var(--font-body); color: rgba(255,255,255,.88); margin-top: 8px; }
.acctv .eyebrow, .acctv .accttitle, .acctv .acctlead, .acctv .acctsub { max-width: 58%; }
.acctv .acctstep { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 20px; }
.acctv .btn.acctbtn { height: 56px; font-size: 19px; letter-spacing: .04em; } .acctv .btn.acctbtn img { width: 22px; height: 22px; }
.acctv .btn.acctlocal { --acc: #fff; border-color: rgba(255,255,255,.55); }
.acctv .acctinput { width: 100%; box-sizing: border-box; height: 56px; font: 600 18px var(--font-body); text-align: left; padding-left: 16px; }
.acctv .acctcode { font: italic 700 34px/1 var(--font-display); letter-spacing: .35em; text-align: center; padding-left: 0; } .acctv .acctcode::placeholder { font: 600 17px var(--font-body); letter-spacing: normal; }
.acctv .btn.ghost { font-size: 18px; height: 48px; } .acctv > .btn.ghost { margin-top: 12px; }
.acctv .acctnote { font: 600 15px/1.4 var(--font-body); text-align: left; } .acctv .acctnote.on { margin-top: 12px; }
.acctv .syncpair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 16px 0 0; }
.acctv .synccard { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 12px 12px; border-radius: 16px; text-align: left; color: #fff; background: rgba(8,10,40,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.5); border: 0; min-width: 0; }
.acctv .synccard .eyebrow { font-size: 11px; max-width: 100%; }
.acctv .syncname { font: italic 700 24px/1 var(--font-display); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.acctv .syncrows { display: flex; flex-direction: column; gap: 3px; font: 700 13px/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: 8px; }
.acctv .syncat { font: 600 12px var(--font-body); color: rgba(255,255,255,.7); margin-bottom: 6px; }
.acctv .synccard .synckeep { width: 100%; height: 42px; font-size: 16px; margin-top: auto; pointer-events: none; }
@media (max-width: 340px) { .acctv .syncpair { grid-template-columns: 1fr; } }

/* v369: Sasani-Coin-Prägung (coin-fx.js). Bühne quadratisch, Ebenen in Seitenprozent (0..900 → %), Tiefe über translateZ; die Neigung setzt --rx/--ry/--lx/--ly/--mag/--specA an .cfx-coin */
.cfx { position: relative; width: 100%; aspect-ratio: 1; perspective: 1100px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cfx-coin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
.cfx-ly { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); transform: translateZ(calc(var(--z) * 1px)); pointer-events: none; display: block; -webkit-user-drag: none; }
.cfx-ly.disc { border-radius: 50%; background: var(--fill); } .cfx-ly.edge { border-radius: 50%; background: #9C7A2A; }
.cfx-ly.spark { opacity: .3; transform: translateZ(calc(var(--z) * 1px)) translate(calc(var(--lx, 0) * -5%), calc(var(--ly, 0) * -5%)); } /* Glanz dezent, wandert gegen die Neigung */
.cfx-ly.hero-shadow { filter: brightness(0) blur(6px); opacity: .45; transform: translateZ(calc(var(--z) * 1px)) translate(calc(var(--lx, 0) * -3%), calc(var(--ly, 0) * -3%)); }
.cfx-spec { border-radius: 50%; opacity: var(--specA, 0); background: radial-gradient(circle at calc(50% + var(--lx, 0) * 42%) calc(50% + var(--ly, 0) * 42%), rgba(255,255,255,.5), rgba(255,255,255,.1) 28%, transparent 55%); mix-blend-mode: soft-light; transition: opacity var(--motion-normal) var(--motion-ease); }
.cfx-sweepc { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%); border-radius: 50%; overflow: hidden; pointer-events: none; transform: translateZ(calc(var(--z) * 1px)); }
.cfx-sweep { position: absolute; top: -20%; bottom: -20%; left: 30%; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.85) 50%, transparent); opacity: 0; }
.cfx-shock { position: absolute; left: 50%; top: 50%; width: 64%; aspect-ratio: 1; margin: -32% 0 0 -32%; border-radius: 50%; border: 3px solid rgba(255,236,170,.95); box-shadow: 0 0 24px 6px rgba(255,214,90,.55), inset 0 0 24px rgba(255,214,90,.35); opacity: 0; pointer-events: none; transform: translateZ(30px); }
.cfx-flash { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255,245,200,.95), rgba(255,220,120,.35) 45%, transparent 70%); opacity: 0; pointer-events: none; }
/* Großformat im Shop */
.coinov { position: fixed; inset: 0; z-index: 66; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: max(12px, var(--sat)) 16px max(14px, var(--sab)); background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--brand-indigo) 70%, #000) 0%, #05061E 72%); opacity: 0; transition: opacity 260ms var(--motion-ease); }
.coinov.on { opacity: 1; } .coinov.off { opacity: 0; pointer-events: none; }
.coinov-top { position: absolute; top: max(12px, var(--sat)); left: 16px; right: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coinov-stage { width: min(92vw, 60vh, 560px); flex: none; }
.coinov-sum { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 86px; opacity: 0; transform: translateY(10px) scale(.9); transition: opacity var(--motion-normal) var(--motion-ease), transform var(--motion-normal) cubic-bezier(.34,1.56,.64,1); }
.coinov.done .coinov-sum { opacity: 1; transform: none; }
.coinov-num { font-size: clamp(44px, 12vw, 64px); line-height: 1; color: #FFD65A; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 24px rgba(255,214,90,.45); }
.coinov-unit { font: 800 12px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-skyLight); }
.coinov-ctl { min-height: 52px; opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease); } .coinov.done .coinov-ctl { opacity: 1; } .coinov-ctl .btn { min-width: 160px; font: italic 800 20px/1 var(--font-display); text-transform: uppercase; }
/* Coin-Paket im Shop */
.shopitem.cpack { grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px; align-items: center; background: linear-gradient(140deg, color-mix(in srgb, #FFD65A 34%, var(--surface-panel)) 0%, var(--surface-panel) 100%); }
.cpack .cpart { display: grid; place-items: center; } .cpack .cpcoin { width: 96px; height: 96px; filter: drop-shadow(0 6px 14px rgba(0,0,0,.45)); }
.cpack .beyebrow { font: 800 11px/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: #FFD65A; }
.cpack .btitle { font: italic 800 26px/1 var(--font-display); text-transform: uppercase; color: #fff; margin-top: 3px; }
.cpack .cpbuy { grid-column: 1 / -1; font: italic 800 20px/1 var(--font-display); text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) { .cfx-spec, .coinov, .coinov-sum, .coinov-ctl { transition: none; } }

/* v370 (User 2026-10-19, Screenshot Shop): senkrecht kompakter, auf großen Handys ohne Scrollen. Coin-Paket eine Zeile plus Knopf, Booster-Kachel enger,
   Inhalts-Fächer kleiner; Abstände der Abschnitte kleiner. Auf breiten Bildschirmen sitzt der Erwerben-Knopf rechts in der Zeile. */
.shopbody { padding: 2px 16px 14px; } .shopwrap { gap: 8px; } .shoplbl { margin-top: 2px; }
.shopitem.cpack { grid-template-columns: 56px minmax(0, 1fr); gap: 8px 12px; padding: 10px 12px; align-items: center; }
.cpack .cpcoin { width: 56px; height: 56px; } .cpack .beyebrow { font-size: 10px; letter-spacing: .12em; } .cpack .btitle { font-size: 22px; margin-top: 2px; }
.cpack .cpbuy { grid-column: 1 / -1; height: 40px; padding: 0 16px; font-size: 17px; }
@media (min-width: 480px) { .shopitem.cpack { grid-template-columns: 56px minmax(0, 1fr) auto; } .cpack .cpbuy { grid-column: auto; } }
.shopitem.bpack { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 12px; padding: 12px 14px; }
.bpack .packstack { width: 80px; margin: 2px 8px 0 0; }
.bpack .btitle { font-size: 24px; margin: 2px 0 6px; } .bpack .bmiss { margin-top: 6px; }
.bpack .bmore { gap: 10px; padding-top: 10px; } .bsec { gap: 5px; }
.bgroups { gap: 8px 10px; } .bfan { height: 68px; } .bcount { min-width: 44px; } .bcount b { font-size: 24px; }
.bcard { width: 44px; margin-left: -22px; border-radius: 4px; transform: translateX(calc(var(--i) * 17px)) rotate(calc(var(--i) * 7deg)); }
.bpack .ochip { height: 26px; padding: 0 10px; font-size: 14px; } .bpack .brar img { width: 16px; height: 16px; }
.bpack .bbtns { gap: 12px; } .bpack .bbtns .btn { height: 42px; font-size: 18px; }
.cpack.wait .cpbuy { font-variant-numeric: tabular-nums; } /* v372: Restzeit der Abklingzeit auf dem Knopf */