/* AEON web client – readable duel layout, no page scroll, mobile-first */
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
:root {
  --bg: #0b0d12;
  --panel: #151a23;
  --panel2: #1e2430;
  --line: #303748;
  --text: #ece7da;
  --dim: #98a0b0;
  --gold: #d4af37;
  --red: #d24437;
  --green: #37a06b;
  --blue: #4a7fb5;
  --foe-tint: rgba(210, 68, 55, .05);
  --me-tint: rgba(74, 127, 181, .06);
  /* fits 6 card bands + middle + chrome on phones AND desktops without scrolling */
  --card-w: clamp(42px, min(14.6vw, 7.0vh), 96px);   /* 14.6vw: six slots + label fit 390 px */
  --card-h: calc(var(--card-w) * 1.4);
}
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at top, #11141c, var(--bg));
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.hidden { display: none !important; }
button { font-family: inherit; }
#app { display: flex; flex-direction: column; height: 100dvh; }

/* ---------- Start: episches Key-Visual ---------- */
.start { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; text-align: center; }

/* Bühne: zwei Zeitalter, an der Bruchlinie ineinander geblendet (hero.jpg aus Kartenkunst) */
.herobg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: #06070b; }
.herobg-img {
  position: absolute; inset: -4%; z-index: 0;
  background: url("hero.jpg") center 42% / cover no-repeat;
  transform: scale(1.02);
}
.herobg::after {                       /* Schleier: hält Text lesbar, zieht die Ränder ins Dunkel */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(132% 86% at 50% 28%, rgba(6,7,11,0) 0%, rgba(6,7,11,.32) 55%, rgba(6,7,11,.86) 100%),
    linear-gradient(180deg, rgba(6,7,11,.60) 0%, rgba(6,7,11,.08) 24%, rgba(6,7,11,.30) 58%, rgba(6,7,11,.74) 88%, rgba(6,7,11,.96) 100%);
}
.herobg-seam {                         /* Lichtnaht dort, wo die Zeitalter aufeinandertreffen */
  position: absolute; top: -10%; bottom: -10%; left: 50%; width: 46%; z-index: 2;
  transform: translateX(-50%);
  background: radial-gradient(closest-side ellipse at 50% 44%, rgba(255,198,102,.24), rgba(255,168,58,.07) 52%, transparent 76%);
  opacity: .85;
}
.herobg-dust {                         /* Funkenflug */
  position: absolute; left: 0; right: 0; top: 0; height: 170%; z-index: 3; opacity: .5;
  background-image:
    radial-gradient(2px 2px at 7% 96%, rgba(255,214,140,.95), transparent 60%),
    radial-gradient(1.6px 1.6px at 17% 78%, rgba(255,196,120,.75), transparent 60%),
    radial-gradient(2.4px 2.4px at 29% 88%, rgba(255,226,160,.8), transparent 60%),
    radial-gradient(1.4px 1.4px at 38% 66%, rgba(255,190,110,.7), transparent 60%),
    radial-gradient(2px 2px at 47% 93%, rgba(255,220,150,.85), transparent 60%),
    radial-gradient(1.8px 1.8px at 56% 74%, rgba(255,204,128,.7), transparent 60%),
    radial-gradient(2.2px 2.2px at 66% 90%, rgba(255,228,168,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 74% 63%, rgba(255,196,116,.65), transparent 60%),
    radial-gradient(2px 2px at 83% 86%, rgba(255,214,140,.8), transparent 60%),
    radial-gradient(1.7px 1.7px at 92% 71%, rgba(255,202,124,.7), transparent 60%);
}

/* Inhalt über der Bühne */
.startinner {
  position: relative; z-index: 1; min-height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(16px, 3.6vh, 32px);
  padding: clamp(22px, 5vh, 56px) 20px calc(clamp(22px, 5vh, 52px) + env(safe-area-inset-bottom));
}
.brand { display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 1.8vh, 16px); }
.brandmark {
  display: block; width: min(520px, 74vw); height: auto;
  filter: drop-shadow(0 0 44px rgba(212,175,55,.26)) drop-shadow(0 12px 30px rgba(0,0,0,.8));
}
.tagline {
  display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 20px);
  margin: 0; color: #cbb47e; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(10.5px, 2.3vw, 14.5px); letter-spacing: .40em; text-transform: uppercase; text-indent: .40em;
}
.tagline::before, .tagline::after {
  content: ""; height: 1px; width: clamp(24px, 9vw, 92px);
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.75));
}
.tagline::after { transform: scaleX(-1); }

@media (orientation: portrait) { .herobg-img { background-image: url("hero-portrait.jpg"); background-position: center 40%; } }

@media (prefers-reduced-motion: no-preference) {
  .herobg-img { animation: heroDrift 52s ease-in-out infinite alternate; }
  .herobg-seam { animation: seamPulse 8s ease-in-out infinite; }
  .herobg-dust { animation: emberRise 34s linear infinite; }
  .brandmark { animation: brandRise .9s cubic-bezier(.2,.75,.25,1) both; }
  .tagline { animation: brandRise 1s cubic-bezier(.2,.75,.25,1) .18s both; }
  .home, #step-faction, #step-deck, #step-banner, #step-tutorial { animation: brandRise .8s cubic-bezier(.2,.75,.25,1) .3s both; }
}
@keyframes heroDrift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.11) translate3d(-1.4%, -1.2%, 0); } }
@keyframes seamPulse { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
@keyframes emberRise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, -41.2%, 0); } }
@keyframes brandRise { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Kopf & Fuß ---------- */
header {
  display: flex; align-items: center; gap: 10px; padding: 4px 10px;
  background: var(--panel); border-bottom: 1px solid var(--line); z-index: 5; min-height: 36px;
}
header .mid { margin: 0 auto; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; }
header .menu { display: flex; gap: 2px; }
header .menu button { background: none; border: none; font-size: 17px; cursor: pointer; padding: 4px 6px; border-radius: 8px; }
header .menu button:hover { background: var(--panel2); }
.pstats { display: flex; align-items: center; min-width: 0; }

/* ---------- Spielertafel ---------- */
.plate {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 5px 10px 5px 6px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0)), var(--panel2);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  transition: border-color .25s, box-shadow .25s;
}
.plate.active { border-color: rgba(212,175,55,.55); box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 0 18px rgba(212,175,55,.18), inset 0 1px 0 rgba(255,255,255,.05); }
.plate .portrait {
  position: relative; flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%; overflow: hidden;
  border: 2px solid #3b4358; background: #0d1119; box-shadow: 0 2px 8px #0009;
}
.plate.active .portrait { border-color: var(--gold); }
.plate .portrait.clickable { cursor: pointer; }
.plate .portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
.plate .portrait .fac {
  position: absolute; right: -2px; bottom: -2px; font-style: normal; font-size: 11px; line-height: 1;
  background: var(--panel); border: 1px solid var(--line); border-radius: 50%; width: 19px; height: 19px;
  display: flex; align-items: center; justify-content: center;
}
.plate .pcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.plate .pname { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.15; }
.plate .who { font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plate .ruler { color: var(--dim); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.plate .turn {
  font-style: normal; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #14100a; background: var(--gold); border-radius: 6px; padding: 2px 6px; white-space: nowrap; align-self: center;
}
.plate .prow { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.plate .ico { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }
.plate .stat { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.plate .stat b { font-size: 15px; font-weight: 900; line-height: 1; }
.plate .stat small { font-size: 11px; color: var(--dim); font-weight: 600; }
.plate .hp { color: #ff8d80; }
.plate .hp b { color: #ffb0a6; }
.plate .hp .hbar { width: 62px; height: 6px; border-radius: 3px; background: #1a1f2b; overflow: hidden; margin-left: 3px; border: 1px solid #2c3345; }
.plate .hp .hbar u { display: block; height: 100%; background: linear-gradient(90deg, #d24437, #ff8d80); transition: width .4s ease; }
.plate .hp.low .hbar u { background: linear-gradient(90deg, #b8541f, #f0a44a); }
.plate .hp.crit .hbar u { background: linear-gradient(90deg, #8f1d14, #d24437); animation: hpPulse 1.2s ease-in-out infinite; }
@keyframes hpPulse { 50% { opacity: .55; } }
.plate .hp.targetable { outline: 2px solid var(--red); border-radius: 8px; padding: 1px 6px; background: rgba(210,68,55,.22); cursor: pointer; animation: pulse-red 1.1s infinite; }
.plate .hp.attacked { outline: 2px solid var(--red); border-radius: 8px; padding: 1px 6px; }
.plate .respips { display: inline-flex; align-items: center; gap: 3px; }
.plate .respips b { color: var(--gold); font-size: 15px; font-weight: 900; line-height: 1; }
.plate .respips small { font-size: 11px; color: var(--dim); font-weight: 600; margin-right: 3px; }
.plate .respips .pips { display: inline-flex; gap: 4px; align-items: center; }
.plate .chip {
  display: inline-flex; align-items: center; gap: 4px; color: var(--dim); font-size: 11.5px;
  background: rgba(0,0,0,.28); border: 1px solid #2a3142; border-radius: 8px; padding: 2px 7px 2px 5px; line-height: 1.2;
}
.plate .chip b { color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; }
.plate .chip.banner { color: #e8d9a8; border-color: rgba(212,175,55,.35); }
.plate .chip.banner b { color: #e8d9a8; font-weight: 700; font-size: 11px; }
.plate .rabil { gap: 6px; }
.plate .rab {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--text); background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 3px 9px;
  line-height: 1.2; white-space: nowrap; cursor: default;
}
.plate .rab .rcost { display: inline-flex; align-items: center; gap: 2px; font-style: normal; color: var(--gold); font-weight: 900; }
.plate .rab .rcost .ico { width: 9px; height: 9px; }
.plate .rab.passive, .plate .rab.foeab { color: var(--dim); border-style: dashed; font-weight: 600; }
.plate button.rab:disabled { opacity: .55; }
.plate button.rab.used { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.5); }
.plate button.rab.ready {
  cursor: pointer; color: #14100a; background: linear-gradient(180deg, #ffe08a, var(--gold)); border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(212,175,55,.4), 0 0 12px rgba(212,175,55,.45); animation: pulse-gold 1.6s infinite;
}
.plate button.rab.ready .rcost { color: #5b4300; }
.plate button.rab.ready:hover { filter: brightness(1.08); }
/* Kopfzeile: die gegnerische Tafel bleibt flach - Name und Werte in zwei Zeilen */
header .plate { padding: 3px 10px 3px 4px; gap: 8px; }
header .plate .portrait { width: 38px; height: 38px; }
header .plate .portrait .fac { width: 16px; height: 16px; font-size: 9px; }
header .plate .pcol { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
header .plate .pname { flex: 1 0 100%; }
header .plate .stat b, header .plate .respips b { font-size: 13.5px; }
header .plate .hp .hbar { width: 46px; height: 5px; }
header .plate .respips i { width: 9px; height: 9px; }
header .plate .chip { padding: 1px 6px 1px 4px; font-size: 11px; }
header .plate .rab { padding: 2px 7px; font-size: 11px; }

#hint {
  padding: 4px 12px; text-align: center; font-size: 11.5px; font-weight: 600;
  background: rgba(212,175,55,.12); border-bottom: 1px solid rgba(212,175,55,.35); color: #ffd97a;
  min-height: 25px;
}
#hint.waiting { background: rgba(152,160,176,.08); border-color: var(--line); color: var(--dim); font-weight: 500; }

footer { background: var(--panel); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 5; }
footer .pstats { padding: 5px 10px 0; }
footer .plate { width: 100%; }

/* ---------- Inhalt ---------- */
#content { flex: 1; display: flex; min-height: 0; }
main {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
  padding: 3px 4px; min-width: 0; gap: 1px;
}
.mat { flex: 1; display: flex; gap: 6px; min-height: 0; justify-content: center; }
.matrows { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.matside { display: none; }
@media (min-width: 1000px) {
  main { align-items: center; }
  /* Beide Stapel in der Hälfte ihres Besitzers: Gegner oben, eigene unten */
  .matside.foeside { justify-content: flex-start; }
  .matside.myside { justify-content: flex-end; }
  .mat {
    width: fit-content; max-width: 100%; align-self: center;
    background: linear-gradient(rgba(210,68,55,.04), rgba(24,28,38,.55) 38%, rgba(24,28,38,.55) 62%, rgba(74,127,181,.05));
    border: 1px solid var(--line); border-radius: 18px; padding: 8px 12px;
    box-shadow: inset 0 0 60px #0007, 0 4px 24px #0006;
  }
  /* 8 cells (7 slots + plot/deity) plus label and gaps; 8.6 card widths let
     the eighth cell run off the mat once a plot or deity was in play. */
  .matrows { flex: 0 1 auto; width: calc(var(--card-w) * 8 + 46px); max-width: 100%; }
}
.half { display: flex; flex-direction: column; gap: 2px; padding: 2px 0; border-radius: 10px; }
.half.foe { background: linear-gradient(var(--foe-tint), transparent); }
.half.me { background: linear-gradient(transparent, var(--me-tint)); }

.rowwrap { position: relative; display: flex; align-items: center; gap: 2px; }
.rowlabel {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: #5a6274;
  width: 13px; text-align: center; flex-shrink: 0; user-select: none;
}
.row { position: relative; display: flex; gap: 4px; flex: 1; overflow-x: auto; scrollbar-width: none; padding: 1px; min-width: 0; }
.row > :first-child { margin-left: auto; }
.row > :last-child { margin-right: auto; }
.row::-webkit-scrollbar { display: none; }

/* Gegnerische Hand als Kartenrücken */
/* Gegnerische Hand: ein kleiner Faecher aus Kartenruecken (Winkel aus --i/--n
   in app.js) und daneben die Zahl in Gold. Vorher standen zwei winzige
   Rechtecke neben grauem "2 Handkarten" - die Information ging unter. */
.foehand-wrap { display: flex; justify-content: center; align-items: flex-end; min-height: 12px; padding-top: 3px; }
#foe-hand { display: flex; align-items: flex-end; }
#foe-hand .back {
  --i: 0; --n: 1;
  width: calc(var(--card-w) * .32); height: calc(var(--card-w) * .448);
  border-radius: 4px; border: 1px solid rgba(212,175,55,.38); margin-left: calc(var(--card-w) * -.13);
  background: url("card-back.svg") center / cover no-repeat, #0d1119;
  box-shadow: 0 1px 3px #000a;
  transform-origin: 50% 140%;
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 6deg));
}
#foe-hand .back:first-child { margin-left: 0; }
#foe-hand .cnt {
  display: inline-flex; align-items: baseline; gap: 4px; align-self: center; margin-left: 10px;
  font-size: 11px; color: var(--dim); white-space: nowrap;
}
#foe-hand .cnt b { font-size: 15px; font-weight: 900; color: var(--gold); line-height: 1; }

/* Mitte */
#middle { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 20px; padding: 0 10px; }
.battleline { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #4a4130, transparent); }
#terrain { display: flex; gap: 6px; align-items: center; }
#terrain:empty::after { content: "⚔️"; opacity: .35; font-size: 13px; }
#terrain .card { width: calc(var(--card-w) * .72); height: calc(var(--card-h) * .72); }

/* ---------- Slots & Karten ---------- */
.slot {
  width: var(--card-w); height: calc(var(--card-h) * .92); border-radius: 8px;
  border: 1px dashed #262d3d; flex-shrink: 0; position: relative;
}
.slot.droppable { border: 2px solid var(--green); box-shadow: 0 0 12px rgba(55,160,107,.65); cursor: pointer; animation: pulse-green 1.1s infinite; }
/* Brett-/Handkarte = die Bibliothekskarte (.tcg) im Kleinen: Typfarbe am
   Rand, Kopfleiste mit Kosten, Name und grossem Wert, Kunst, Fusszeile mit
   Verteidigung, Initiative und Schluesselwoertern. Alle Masse in cqw, damit
   Hand (breiter), Terrain (schmaler) und Brett dieselbe Karte zeigen. */
.card {
  --tc: #6d7484;
  width: var(--card-w); height: calc(var(--card-h) * .92); border-radius: 8px; position: relative;
  background: linear-gradient(180deg, #12151d, #0a0c11); border: 1.5px solid var(--tc);
  overflow: hidden; flex-shrink: 0; display: flex; flex-direction: column;
  container-type: inline-size;
  cursor: pointer; user-select: none; -webkit-user-select: none;
}
.card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.card .chead {
  flex: 0 0 auto; display: flex; align-items: center; gap: max(2px, 3cqw); z-index: 2;
  padding: max(1px, 2cqw) max(2px, 3.5cqw); min-height: max(15px, 23cqw);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 42%, #0b0d12), #0b0d12);
  border-bottom: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
  border-radius: 6.5px 6.5px 0 0;      /* .card.defended lifts overflow:hidden */
}
.card .cost {
  flex: 0 0 auto; width: max(13px, 19cqw); height: max(13px, 19cqw); border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9a8, var(--gold) 62%, #8C6A17);
  color: #1a1408; font-weight: 900; font-size: max(8.5px, 12cqw); line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #FBF0C6; box-shadow: 0 1px 3px #000b;
}
/* Der Name bekommt die ganze Breite: im Kopf neben Kosten und Wert blieben
   auf dem Brett drei Buchstaben uebrig ("Sp...", 02.09.2026). Er liegt als
   Streifen am unteren Rand der Kunst, wo die Grafiken ohnehin dunkel sind. */
.card .nm {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  font-size: max(7px, 10.5cqw); font-weight: 700; text-align: center;
  /* Kein padding-bottom: overflow:hidden kappt erst an der Polsterkante, sonst
     lugten in Chrome die Oberlaengen der dritten (geclampten) Zeile hervor.
     Seitlich 1 statt 2 px Mindestpolster: die zwei Pixel mehr Zeilenbreite
     sparen auf 42-px-Karten elf Ellipsen (74 -> 63 von 213 Namen). */
  padding: max(6px, 9cqw) max(1px, 3cqw) 0;
  background: linear-gradient(transparent, rgba(7,9,13,.92) 55%);
  color: #f6efdd; overflow: hidden; hyphens: auto; text-wrap: balance;
  /* Getrennt wird mit Strich oder gar nicht: mit overflow-wrap:break-word und
     engen Trennlimits brach der Name sonst mitten im Wort ohne Trennstrich
     ("Kataphrak|te", "Triumphzu|g" – gemessen 22-31 Namen je Engine auf
     42-px-Karten, 02.09.2026). Jetzt trennt der Browser ab sechs Buchstaben
     mit drei davor und drei danach; was dann noch nicht passt, bekommt die
     Ellipse aus dem Zeilenclamp statt eines Waisenbuchstabens. */
  overflow-wrap: normal;
  hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3;
  /* Zwei Zeilen statt "Römischer Legi…": die Kunst ist unten ohnehin dunkel.
     line-height 1.2 statt 1.12: die Zeilenschachtel umschliesst damit die
     Unterlaengen, die ohne padding-bottom sonst angeschnitten wuerden. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2;
}
.card .chead .sp { flex: 1; }
.card .big {
  flex: 0 0 auto; font-size: max(11px, 19cqw); font-weight: 900; line-height: 1; color: #fff8e6;
  text-shadow: 0 1px 4px #000, 0 0 2px #000; font-variant-numeric: tabular-nums;
}
.card .art { flex: 1 1 auto; min-height: 0; position: relative; background: #0a0c11; }
.card .art img { object-position: 50% 0; }
.card .art .noart { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: max(14px, 30cqw); opacity: .4; }
.card .cfoot {
  flex: 0 0 auto; display: flex; align-items: center; gap: max(2px, 2cqw); z-index: 2;
  padding: max(1px, 1.5cqw) max(2px, 3cqw); min-height: max(13px, 19cqw);
  background: linear-gradient(0deg, #07090d, rgba(7,9,13,.9));
  border-top: 1px solid color-mix(in srgb, var(--tc) 40%, transparent);
  font-size: max(7.5px, 10.5cqw); font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 0 0 6.5px 6.5px;
}
.card .def { color: #cfe2f7; white-space: nowrap; }
.card .def.hurt { color: #ff8d80; }
.card .ini { color: #8b93a4; white-space: nowrap; font-weight: 700; }
.card .kw {
  flex: 1; min-width: 0; display: flex; gap: 2px; justify-content: center; overflow: hidden;
  font-size: max(6.5px, 8.5cqw); font-weight: 600;
}
.card .kw i { font-style: normal; color: #ffd97a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .kw i.ty { color: color-mix(in srgb, var(--tc) 70%, #fff); letter-spacing: .04em; text-transform: uppercase; }
/* Auf kleinen Kacheln bleibt nur das Spielrelevante. Die Schwelle lag bei 72 px
   und liess damit auf JEDER Brettkarte (51-63 px bei 1440x900 und am Telefon)
   Schluesselwoerter und Initiative verschwinden (02.09.2026). Jetzt geht zuerst
   die Initiative, das erste Schluesselwort bleibt bis 44 px (mit Ellipse). */
@container (max-width: 55px) { .card .ini { display: none; } }
@container (max-width: 43px) { .card .kw i:not(.ty) { display: none; } }
@container (max-width: 100px) { .card .kw i + i { display: none; } }
/* Schadensmarke: Schaden UND verbleibende VER (Kanon 4.6 - der Schaden bleibt
   liegen, die Marke muss also sagen, wie viel Luft die Einheit noch hat). Der
   VER-Teil ist das erste, was weicht, wenn die Karte schmal wird. */
.card .dmg {
  position: absolute; top: calc(max(15px, 23cqw) + 2px); right: 2px; z-index: 3;
  background: #000d; color: #ff8d80; font-size: max(8px, 11cqw); font-weight: 800; padding: 1px 3px; border-radius: 5px;
  display: flex; gap: 2px; align-items: baseline; white-space: nowrap;
}
/* Der VER-Teil traegt die Marke, soll sie aber nicht sprengen: auf einer 57 px
   breiten Brettkarte bleibt sie so bei rund der Haelfte der Kartenbreite. */
.card .dmg i { font-style: normal; font-weight: 700; font-size: .88em; color: #d8e4f2; }
/* Ruhender Schaden (4.6): die Marke bekommt einen zweiten Ring, der Wortlaut
   steht im Karteninspektor - auf 50 px Kartenbreite ist fuer eine dritte Zahl
   kein Platz. */
.card.susp .dmg { box-shadow: 0 0 0 1px #ffb95e; }
/* Erschöpft = getappt: liegt quer wie am Tisch */
.card.exhausted {
  transform: rotate(90deg) scale(.8);
  filter: grayscale(.55) brightness(.72);
  z-index: 0;
  transition: transform .25s ease;
}
.card.exhausted::after { content: "⏳"; position: absolute; top: calc(max(15px, 23cqw) + 2px); left: 2px; font-size: max(10px, 14cqw); filter: none; z-index: 3; }
/* §4.2 B: Wer geblockt hat, ist nicht nur erschöpft – er überspringt seine nächste
   Reaktivierung und liegt auch den ganzen eigenen Zug noch quer. Das ist eine andere
   Auskunft als "erschöpft" und braucht ein eigenes Zeichen: Pause statt Sanduhr, dazu
   ein kräftigerer Grauschleier. */
.card.spent { filter: grayscale(.8) brightness(.6); }
.card.spent::after { content: "⏸"; position: absolute; top: calc(max(15px, 23cqw) + 2px); left: 2px; font-size: max(10px, 14cqw); filter: none; z-index: 3; color: #ffd97a; }
.card.fresh::after { content: "💤"; position: absolute; top: calc(max(15px, 23cqw) + 2px); left: 2px; font-size: max(10px, 14cqw); z-index: 3; }
/* Unter 46 px Breite (Tutorial am Telefon) ist die Kunst restlos vom
   zweizeiligen Namensstreifen belegt – gemessen 21 px Kunst gegen 23 px
   Streifen bei 42 px Kartenbreite. Am Boden der Kunst lagen Marker und
   Schadenszahl deshalb mitten auf dem Namen (02.09.2026). Beide ziehen jetzt
   dorthin, wo auf so schmalen Karten wirklich Platz ist: der Zustandsmarker
   in die Fusszeile (Initiative und zweites Schluesselwort sind dort weg), die
   Schadenszahl in die Kopfzeile an die Stelle der Kosten – auf dem Brett
   zaehlt der Schaden, die Kosten stehen auf der Handkarte. */
@container (max-width: 46px) {
  .card.fresh::after, .card.exhausted::after, .card.spent::after {
    top: auto; left: auto; bottom: max(1px, 1.5cqw); right: max(2px, 3cqw);
    line-height: 1;                      /* sonst ist die Zeilenschachtel hoeher als die Fusszeile */
  }
  .card.fresh .kw, .card.exhausted .kw, .card.spent .kw { padding-right: max(15px, 20cqw); }
  .card.dmgd .cost { visibility: hidden; }
  .card .dmg {
    top: max(2px, 3cqw); right: auto; bottom: auto; left: max(2px, 3cqw);
    padding: 0 2px;                      /* so breit wie der Kostenkreis darunter */
  }
  .card .dmg i { display: none; }        /* der Kostenkreis ist nur einstellig breit */
}
.card.selectable { box-shadow: 0 0 0 2px var(--gold), 0 0 12px rgba(212,175,55,.55); animation: pulse-gold 1.2s infinite; }
.card.selected { box-shadow: 0 0 0 3px #fff, 0 0 16px #fff9; animation: none; }
.card.targetable { box-shadow: 0 0 0 2px var(--red), 0 0 14px rgba(210,68,55,.8); cursor: crosshair; animation: pulse-red 1.1s infinite; }
.card.attacking { box-shadow: 0 0 0 2px var(--red); transform: translateY(-3px); }
.card.blocking { box-shadow: 0 0 0 2px var(--blue); }
.attacked { box-shadow: 0 0 0 2px #ff9a3c, 0 0 14px rgba(255,154,60,.7) !important; position: relative; }
.card.attacked::before {
  content: "🎯"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 14px; z-index: 6; filter: drop-shadow(0 1px 2px #000);
}
.card.facedown { --tc: #3f9b8c; }
.card.facedown .art { background: repeating-linear-gradient(45deg, #262d40, #262d40 6px, #1c2233 6px, #1c2233 12px); }
/* Kernstrukturen sind Bauwerkskarten: Kunst, Kategorie, Trefferpunkte.
   Die Kategorie ist das Spielrelevante und bleibt bis auf Handygröße lesbar. */
.card.core { border-color: rgba(212,175,55,.45); }
.card.core img { filter: brightness(.7) saturate(.85); }
/* Kategorie-Symbol und Zustandszeichen stehen ÜBEREINANDER an der linken Kante.
   Nebeneinander passen sie nicht: zwischen Symbol und TP-Zahl bleiben je nach
   Browser nur 10 bis 21 px (gemessen 02.09.2026, Chrome und WebKit, 1440x900 bis
   390x844) - das Blitzzeichen lief dort in die TP-Zahl. */
.card.core .coretop {
  position: absolute; top: 1px; left: 3px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1;
}
.card.core .cic {
  font-size: max(10px, calc(var(--card-w) * .17));
  filter: drop-shadow(0 1px 3px #000);
}
.card.core .corehp {
  position: absolute; top: 1px; right: 3px; z-index: 2;
  font-size: max(10px, calc(var(--card-w) * .19)); font-weight: 900; color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 9px #000;
}
.card.core .corehp small { font-size: .6em; font-weight: 700; color: #c8cfdd; }
.card.core .corefoot {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 14px 3px 1px; text-align: center;
  background: linear-gradient(transparent, rgba(0,0,0,.94) 58%);
}
.card.core .corename {
  display: none; max-width: 100%; color: var(--dim); line-height: 1.15;
  font-size: max(8px, calc(var(--card-w) * .105));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Zwei Zeilen sind hier der Normalfall, nicht die Ausnahme: nachgemessen
   (02.09.2026, Chrome und WebKit) brechen "VERWALTUNG" und "WIRTSCHAFT" von
   52 bis 88 px Kartenbreite am weichen Trennstrich aus app.js um
   ("VER-/WALTUNG"). Der alte Kommentar versprach faelschlich eine Zeile ab
   ~45 px. Einzeilig wuerden sie erst bei rund 10.5cqw - dann waere das Label
   auf jeder Brettkarte kleiner, ohne dass etwas gewonnen waere. Also bleibt
   es bei 14cqw: lieber gross und getrennt als klein und einzeilig. Unter
   46 px Breite zeigt die Karte ohnehin die Kurzform aus data-short. */
.card.core .corelabel {
  max-width: 100%; overflow: hidden; white-space: normal; hyphens: manual; overflow-wrap: normal;
  font-size: max(8px, 14cqw); font-weight: 800; line-height: 1.08;
  color: #f2e2ac; letter-spacing: 0; text-transform: uppercase;
  text-shadow: 0 1px 3px #000;
}
/* "WALTUNG" passt auch getrennt nicht mehr in 33 px: unter 46 px Kartenbreite
   zeigt die Karte die Kurzform aus data-short (steht hinter der Langform,
   sonst gewinnt deren font-size bei gleicher Spezifitaet). */
@container (max-width: 46px) {
  .card.core .corelabel { font-size: 0; }
  .card.core .corelabel::before { content: attr(data-short); font-size: 8px; }
  /* Auf 42 px Kartenbreite stossen Kategorie-Symbol, Zustandszeichen und TP-Zahl
     aneinander (gemessen 02.09.2026, 320x568): Der Blitz ueberlappte "12/12" in WebKit
     um 1,1 px, das breitere Kategorie-Symbol sogar um 2,1 px; Chrome hatte 3,5 bzw.
     1,5 px Luft. Kleiner werden darf die TP-Zahl nicht, sie ist das Spielrelevante -
     also faellt der NENNER weg: Wie viel vom Ganzen noch steht, zeigt die Leiste am
     unteren Rand ohnehin, und der volle Stand steht im Titel der Karte. Nachgemessen
     sind es jetzt 8,6 px (Blitz) bzw. 7,6 px (Symbol) in WebKit und 11,9 / 9,9 px in
     Chrome - beide Kaesten stehen frei. */
  .card.core .corehp small { display: none; }
  .card.core .coreact { font-size: 8px; align-self: flex-start; }
}
.card.core .bar {
  position: absolute; bottom: 2px; left: 3px; right: 3px; z-index: 2;
  height: 4px; background: rgba(0,0,0,.65); border-radius: 3px; overflow: hidden;
}
.card.core .bar i { display: block; height: 100%; background: linear-gradient(90deg, #2f8d5d, #63c98f); }
.card.core.destroyed { opacity: .38; filter: grayscale(1); }
.card.core.destroyed .bar i { background: var(--red); }
/* Das Banner (3.0) ist eine der eigenen drei Kernstrukturen - die, unter der man
   antritt. Sie bekommt den goldenen Rand, sonst nichts: auf 50 px Kartenbreite
   ist jede zusaetzliche Marke eine Marke zu viel. */
.card.core.bannered { border-color: var(--gold); }
/* Gedruckte, aktivierbare Faehigkeit (5): einsetzbar, in dieser Runde verbraucht
   oder gerade nicht moeglich. Das Zeichen haengt unter dem Kategorie-Symbol. */
.card.core .coreact {
  font-size: max(9px, calc(var(--card-w) * .14)); line-height: 1;
  /* Zwei Schatten, kein Kasten: die Kunst hinter dem Zeichen reicht von Nachthimmel
     bis Mittagslicht (Kapitolinischer Tempel), ein einzelner Schatten liess den
     Haken auf hellen Karten verschwinden. Der Kasten dagegen haette die Spalte
     verbreitert - neben der TP-Zahl bleiben je nach Browser nur 10 px. */
  filter: drop-shadow(0 1px 2px #000) drop-shadow(0 0 3px #000);
  color: #cdd6e4; opacity: .8;
}
.card.core.canact .coreact { color: #ffd97a; opacity: 1; }
.card.core.actused .coreact { color: #e6ecf6; opacity: 1; }
.card.core.canact { cursor: pointer; }
/* Der Bauwerksname ist Beiwerk – er kommt erst dazu, wenn die Karte wirklich
   Platz hat. Die Kategorie muss immer lesbar bleiben, sie ist das Spielrelevante. */
@media (min-width: 1000px) and (min-height: 940px) { .card.core .corename { display: block; } }

/* Blocken: der Blocker stellt sich VOR den Bedrohten, nicht auf den Angreifer.
   Die Leiste sitzt auf der feindzugewandten Kante der bedrohten Karte. */
.card.defended {
  box-shadow: 0 0 0 2px rgba(212,175,55,.8), 0 0 22px rgba(212,175,55,.42);
  z-index: 4; overflow: visible;          /* sonst kappt .card die Leiste weg */
}
.card.defended img { border-radius: 7px; }
.intercept {
  position: absolute; height: 17px; z-index: 7;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  border-radius: 8px; cursor: pointer; overflow: hidden; padding: 0 1px;
  font-family: inherit; font-weight: 800; letter-spacing: -.01em; white-space: nowrap;
  font-size: max(8px, calc(var(--card-w) * .125));
  color: #17130a; border: 1px solid rgba(255,240,196,.9);
  background: linear-gradient(180deg, rgba(248,235,186,.93), rgba(206,168,50,.88));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  box-shadow: 0 2px 10px rgba(0,0,0,.65), 0 0 16px rgba(212,175,55,.55);
  animation: pulse-gold 1.15s infinite;
}
.intercept:hover { filter: brightness(1.12); }
/* Beim Ziehen muss der Zeiger durch die Leiste auf die Karte darunter kommen */
body.dragging .intercept { pointer-events: none; }
.card.defended.dragover { box-shadow: 0 0 0 3px #ffe6a6, 0 0 26px rgba(212,175,55,.75); }
.intercept .ish { font-size: .85em; line-height: 1; }
.intercept .itx { text-transform: uppercase; }
@keyframes pulse-gold {
  50% { box-shadow: 0 2px 10px rgba(0,0,0,.65), 0 0 28px rgba(212,175,55,.95); }
}
@media (max-width: 700px) { .intercept .itx { display: none; } }
@keyframes pulse-gold { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(212,175,55,.9); } }
@keyframes pulse-red { 50% { box-shadow: 0 0 0 2px var(--red), 0 0 22px rgba(210,68,55,1); } }
@keyframes pulse-green { 50% { box-shadow: 0 0 20px rgba(55,160,107,1); } }

/* ---------- Hand & Aktionen ---------- */
#hand {
  display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px 2px;
  scrollbar-width: thin; min-height: calc(var(--card-h) * .74 + 8px); align-items: flex-end;
}
#hand .card { width: calc(var(--card-w) * .84); height: calc(var(--card-h) * .78); }
#hand .card.unaffordable { opacity: .45; }
#actions { display: flex; gap: 8px; padding: 5px 10px 8px; }
#actions button {
  flex: 1; padding: 10px 8px; font-size: 15px; font-weight: 800; letter-spacing: .01em;
  border-radius: 11px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer;
}
#actions button.primary { background: var(--gold); color: #14100a; border-color: var(--gold); box-shadow: 0 2px 10px rgba(212,175,55,.35); }
#actions button:active { transform: scale(.98); }

/* ---------- Seitenleiste (Desktop) ---------- */
#side { display: none; }

/* ---------- Inspector-Inhalt (Seitenleiste & Modal) ---------- */
.insp { display: flex; flex-direction: column; gap: 8px; }
.insp img { width: 100%; max-width: 210px; border-radius: 10px; align-self: center; }
.insp h3 { font-size: 16px; }
.insp .meta { color: var(--gold); font-size: 12.5px; font-weight: 700; }
.insp .kws { display: flex; flex-wrap: wrap; gap: 4px; }
.insp .kws i { font-style: normal; background: var(--panel2); border: 1px solid var(--line); color: #ffd97a; border-radius: 6px; padding: 2px 7px; font-size: 11px; }
.insp .txt { font-size: 13px; color: var(--dim); line-height: 1.5; }
.insp .status { font-size: 12px; color: #ff8d80; }
#inspector .placeholder { color: #5a6274; font-size: 12.5px; line-height: 1.5; padding: 8px 2px; }

/* ---------- Overlays ---------- */
#toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 28%;
  background: #000e; border: 1px solid var(--gold); padding: 10px 16px; border-radius: 10px;
  font-size: 14px; z-index: 60; max-width: 88vw; text-align: center;
}
#toast.err { border-color: var(--red); }
#log {
  position: fixed; top: 46px; right: 8px; width: min(330px, 88vw); max-height: 58dvh;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; overflow-y: auto; z-index: 40; font-size: 13px; box-shadow: 0 8px 30px #000a;
}
#log h3, #side-log h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--dim); margin-bottom: 6px; }
#log li, #side-log li { margin: 4px 0 0 16px; color: var(--dim); }
#log li:last-child, #side-log li:last-child { color: var(--text); }
#surrender, #surrender-mobile { margin-top: 10px; width: 100%; padding: 9px; border-radius: 9px; border: 1px solid var(--red); background: none; color: var(--text); cursor: pointer; }
#overlay {
  position: fixed; inset: 0; background: #000b; z-index: 70;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; padding: 24px;
}
#overlay h2 { font-size: clamp(30px, 7vw, 48px); color: var(--gold); }
#overlay p { color: var(--dim); font-size: 16px; }
#overlay button { padding: 13px 30px; font-size: 17px; border-radius: 12px; border: none; background: var(--gold); font-weight: 800; cursor: pointer; }
#overlay button.ghost { background: none; border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: 15px; }
#overlay .tutdone-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
#overlay .tutall { color: #ffd97a; max-width: 420px; }
#cardinfo { position: fixed; inset: 0; background: #000c; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 18px; }
#cardinfo .box { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; max-width: 380px; width: 100%; padding: 14px; max-height: 88dvh; overflow-y: auto; }
#cardinfo .ci-close {
  position: sticky; top: 0; float: right; z-index: 5; margin: -4px -4px 0 0;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: #000c; color: var(--text); font-size: 16px; cursor: pointer;
}
#cardinfo .box > .insp { margin-top: 8px; }
#howto { position: fixed; inset: 0; background: #000c; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
#howto .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; max-width: 560px; width: 100%; padding: 22px; max-height: 88dvh; overflow-y: auto; }
#howto h2 { color: var(--gold); margin-bottom: 12px; font-size: 20px; }
#howto li { margin: 0 0 10px 18px; font-size: 14px; line-height: 1.5; color: var(--text); }
#howto b { color: #ffd97a; }
#howto button { margin-top: 8px; width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--gold); font-weight: 800; font-size: 15px; cursor: pointer; }

/* ---------- Breakpoints ---------- */
@media (min-width: 1000px) {
  /* Vertikal aus dem Budget: Kopf, Hinweis, Faecher, Mittelstreifen und Dock
     sind ~200 px fest, der Rest sind 9.95 Kartenbreiten (6 Reihen + Hand).
     7vh liess bei 1440x900 63-px-Karten - jetzt ~70, bei 1080 p ~88. */
  :root { --card-w: clamp(52px, min(5.4vw, (100vh - 200px) / 9.95), 124px); }
  .matside {
    display: flex; flex-direction: column; gap: 8px;
    width: calc(var(--card-w) * 1.02); flex-shrink: 0; padding: 4px 0;
  }
  /* Beide Stapel in der Hälfte ihres Besitzers: Gegner oben, eigene unten */
  .matside.foeside { justify-content: flex-start; }
  .matside.myside { justify-content: flex-end; }
  .pile {
    width: var(--card-w); height: calc(var(--card-h) * .92); border-radius: 8px; position: relative;
    border: 1px solid #39415a; overflow: hidden; cursor: default; flex-shrink: 0;
  }
  .pile.deck {
    background: url("card-back.svg") center / cover no-repeat, #0d1119;
    box-shadow: 2px 2px 0 #10141f, 4px 4px 0 #0c0f18;
  }
  .pile.grave { background: #12151d; cursor: pointer; }
  .pile.grave img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.65) brightness(.72); }
  .pile.empty { border-style: dashed; border-color: #262d3d; background: none; box-shadow: none; }
  .pile .plabel {
    position: absolute; bottom: 0; left: 0; right: 0; text-align: center; font-size: 8.5px;
    letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
    background: linear-gradient(transparent, rgba(0,0,0,.95) 40%); padding: 8px 0 2px;
  }
  .pile .pcount {
    position: absolute; top: 3px; right: 3px; background: #000c; border: 1px solid var(--line);
    border-radius: 8px; min-width: 20px; text-align: center; font-size: 11px; font-weight: 800; padding: 1px 4px;
  }
  #content { padding: 6px 10px; gap: 10px; }
  main { max-width: 1240px; margin: 0 auto; width: 100%; }
  #side {
    display: flex; flex-direction: column; width: 285px; flex-shrink: 0; gap: 10px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; overflow-y: auto;
  }
  /* The inspector shrank below its content and bled into the log; now it
     scrolls on its own and the log keeps a fixed minimum. */
  #inspector { flex: 0 1 auto; min-height: 0; max-height: 62%; overflow-y: auto; scrollbar-width: thin; }
  #inspector .tcg { box-shadow: 0 8px 26px #000a; }
  #inspector .fx-lore { margin-top: 10px; }
  #side-log { flex: 1 1 110px; overflow-y: auto; min-height: 110px; }
  #surrender { flex-shrink: 0; }
  #log-toggle { display: none; }
  /* Dock als drei Spalten: Werte links, Hand in der Mitte, Knoepfe rechts.
     Die Knoepfe unter der Hand kosteten 52 px Hoehe, die jetzt den Karten
     gehoeren; die Hand bleibt ueber gleich breite Aussenspalten zentriert. */
  /* 200 statt 180 px Aussenspalte: mit 10 Handkarten fiel sie auf ihr Minimum
     zurueck, und die Ressourcenleiste (Label + 10 Pips ~ 193 px) lief 5-10 px
     in die erste Handkarte (gemessen 1000-1439 px, Chrome und WebKit,
     02.09.2026). layoutHandFan() rechnet mit demselben Wert (DOCK_SIDE). */
  footer { display: grid; grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr); column-gap: 10px; align-items: center; }
  footer .pstats { padding: 4px 10px 6px 14px; align-self: center; min-width: 0; }
  #hand { min-width: 0; }
  #actions { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; padding: 6px 14px 6px 4px; max-width: 260px; justify-self: end; width: 100%; }
  #actions button { flex: 0 0 auto; min-width: 0; }
  #hand > :first-child { margin-left: auto; } #hand > :last-child { margin-right: auto; }
  header .mid, #hint { font-size: 14px; }
  .rowlabel { font-size: 9.5px; }
}
/* Phone: the header goes two rows - turn info + menu on top, the foe stats
   as one non-wrapping line below. Before, "Gegner · Imperator Caesar" broke
   into three lines and HP, resources and deck each took their own row (~130px). */
@media (max-width: 720px) {
  header { flex-wrap: wrap; row-gap: 2px; padding: 4px 8px; }
  header .mid { order: 1; margin: 0; flex: 1 1 auto; text-align: left; font-size: 12.5px; }
  header .menu { order: 2; margin-left: auto; }
  header .menu button { font-size: 16px; padding: 3px 4px; }
  header #foe-stats { order: 3; flex: 1 0 100%; }
  /* Telefon: die Tafel wird eine einzige, seitlich scrollende Zeile */
  .plate { padding: 3px 8px 3px 4px; gap: 7px; overflow-x: auto; scrollbar-width: none; border-radius: 10px; }
  .plate::-webkit-scrollbar { display: none; }
  .plate .portrait { width: 34px; height: 34px; }
  .plate .portrait .fac { width: 15px; height: 15px; font-size: 8.5px; }
  .plate .pcol { flex-direction: row; align-items: center; gap: 9px; flex-wrap: nowrap; }
  .plate .pname { flex: 0 0 auto; max-width: 40vw; }
  .plate .ruler { display: none; }
  .plate .prow { flex-wrap: nowrap; flex: 0 0 auto; }
  .plate .stat b, .plate .respips b { font-size: 13px; }
  .plate .hp .hbar { width: 34px; height: 5px; }
  .plate .respips i { width: 8px; height: 8px; }
  .plate .counts .chip:not(.banner) { padding: 1px 5px 1px 3px; }
  .plate .chip.banner b { display: none; }
  header .plate .pcol { flex-wrap: nowrap; }
  header .plate .pname { flex: 0 0 auto; }
  /* Der Herrscher-Knopf gehört auf dem Telefon vor die Zähler - sonst liegt er
     hinter dem seitlichen Scrollen, und keiner findet den Schutzeid. */
  .plate .rabil { order: 1; }
  .plate .counts { order: 2; }
  .plate .rab.passive { order: 2; }
}
@media (max-height: 500px) {
  :root { --card-w: clamp(40px, 10.5vh, 60px); }
  #hand { min-height: calc(var(--card-h) * .7); }
  header { min-height: 32px; padding: 2px 10px; }
  #hint { min-height: 20px; padding: 3px 10px; font-size: 11px; }
}

/* ---------- Regelwerk ---------- */
#rules { position: fixed; inset: 0; background: #000d; z-index: 99;   /* above #cardinfo (98): pills/FAQ refs open it from there */ display: flex; align-items: center; justify-content: center; padding: 14px; }
.rsheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  width: min(1100px, 100%); height: min(92dvh, 100%); display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 12px 60px #000c;
}
.rhead { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rhead h2 { font-size: 16px; color: var(--gold); white-space: nowrap; }
.rhead input {
  flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--text); padding: 9px 12px; font-size: 14px; outline: none;
}
.rhead input:focus { border-color: var(--gold); }
#rcount { color: var(--dim); font-size: 12px; white-space: nowrap; }
.rbody { flex: 1; display: flex; min-height: 0; }
#rtoc {
  width: 235px; flex-shrink: 0; overflow-y: auto; padding: 12px 8px; border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 1px;
}
#rtoc a {
  color: var(--dim); text-decoration: none; font-size: 12.5px; padding: 5px 9px; border-radius: 7px; line-height: 1.3;
}
#rtoc a.sub { padding-left: 22px; font-size: 12px; }
#rtoc a:hover { background: var(--panel2); color: var(--text); }
#rtoc a.dim { opacity: .32; }
#rcontent { flex: 1; overflow-y: auto; padding: 16px 22px 40px; scroll-behavior: smooth; }
#rcontent .rsec { margin-bottom: 26px; }
#rcontent h2 { color: var(--gold); font-size: 18px; margin-bottom: 10px; padding-top: 4px; }
#rcontent h3 { color: #ffd97a; font-size: 15px; margin-bottom: 8px; padding-top: 2px; }
#rcontent p { font-size: 13.5px; line-height: 1.6; color: var(--text); margin-bottom: 8px; }
#rcontent ul { margin: 0 0 10px 20px; }
#rcontent li { font-size: 13.5px; line-height: 1.55; margin-bottom: 4px; }
#rcontent table { border-collapse: collapse; margin: 6px 0 12px; width: 100%; font-size: 12.5px; }
#rcontent th, #rcontent td { border: 1px solid var(--line); padding: 6px 9px; text-align: left; vertical-align: top; line-height: 1.45; }
#rcontent th { background: var(--panel2); color: var(--gold); font-weight: 700; }
#rcontent td { color: var(--text); }
#rcontent code { background: var(--panel2); border-radius: 4px; padding: 1px 5px; font-size: 12px; color: #9fd0ff; }
#rcontent mark { background: var(--gold); color: #14100a; border-radius: 3px; padding: 0 2px; }
#rcontent .rempty { color: var(--dim); padding: 30px 0; text-align: center; }
.rloading { color: var(--dim); }
@media (max-width: 720px) {
  #rules { padding: 0; }
  .rsheet { border-radius: 0; height: 100dvh; }
  .rbody { flex-direction: column; }
  #rtoc { width: auto; flex-direction: row; overflow-x: auto; overflow-y: hidden; border-right: none; border-bottom: 1px solid var(--line); padding: 8px; }
  #rtoc a { white-space: nowrap; }
  #rtoc a.sub { padding-left: 9px; }
  .rhead h2 { display: none; }
}

/* ---------- Startspieler-Zeremonie (§3.0) ---------- */
#ceremony {
  position: fixed; inset: 0; background: #000c; z-index: 85;
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
#ceremony .csheet {
  background: var(--panel); border: 1px solid var(--gold); border-radius: 18px;
  max-width: 480px; width: 100%; padding: 24px; text-align: center;
  box-shadow: 0 0 60px rgba(212,175,55,.18);
}
#ceremony h2 { color: var(--gold); font-size: 20px; margin-bottom: 16px; }
.cbanners { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 12px; }
.cbanner { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; min-width: 120px; }
.cbanner .ic { font-size: 30px; }
.cbanner .nm { font-size: 13px; font-weight: 700; margin-top: 4px; }
.cbanner .who { font-size: 11px; color: var(--dim); }
.cbanner.winner { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,175,55,.5); }
.cvs { font-size: 18px; color: var(--dim); font-weight: 800; }
.cvang { font-size: 13px; color: var(--dim); margin: 6px 0; line-height: 1.5; }
.cvang b { color: var(--text); }
.cresult { font-size: 17px; font-weight: 800; margin: 14px 0 4px; }
.cresult.you { color: var(--gold); }
.cnote { font-size: 12px; color: var(--dim); margin-bottom: 14px; }
#ceremony button { padding: 12px 30px; font-size: 16px; border-radius: 11px; border: none; background: var(--gold); font-weight: 800; cursor: pointer; }

/* Enthuellung (7): die Karten eines `look`. Sie liegt ueber Brett und Zeremonie,
   aber unter Karteninspektor und Regeln - von hier aus wird nichts nachgeschlagen. */
#reveal {
  position: fixed; inset: 0; background: #000d; z-index: 86;
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
.rvsheet {
  background: var(--panel); border: 1px solid var(--gold); border-radius: 16px;
  max-width: 520px; width: 100%; padding: 16px; text-align: center;
  max-height: 92dvh; overflow-y: auto; box-shadow: 0 0 60px rgba(212,175,55,.18);
}
.rvsheet h2 { color: var(--gold); font-size: 17px; margin-bottom: 4px; }
.rvnote { color: var(--dim); font-size: 12.5px; line-height: 1.4; margin-bottom: 12px; }
/* Bis zu drei Karten (VIK-U018, SPA-CS003) nebeneinander: jede bekommt den
   gleichen Anteil, damit die cqw-Masse der Karte selbst rechnen kann. */
.rvcards { display: flex; gap: 10px; justify-content: center; align-items: flex-start; }
.rvcards .tcgwrap { flex: 1 1 0; min-width: 0; max-width: 150px; }
.rvplain {
  flex: 1 1 0; padding: 18px 8px; border: 1px dashed var(--line); border-radius: 10px;
  color: var(--text); font-size: 13px; font-weight: 700;
}
#reveal button {
  margin-top: 14px; padding: 11px 28px; font-size: 15px; border-radius: 11px;
  border: none; background: var(--gold); font-weight: 800; cursor: pointer;
}

/* ---------- Home-Hub: Steintafeln vor der Bühne ---------- */
.home { width: min(760px, 94vw); margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tilegrid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.tilegrid .tile { flex: 1 1 168px; max-width: 248px; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(180deg, rgba(32,38,52,.70), rgba(11,14,20,.86));
  border: 1px solid rgba(212,175,55,.18); border-radius: 14px;
  padding: 16px 14px; cursor: pointer; color: var(--text); text-align: center;
  display: flex; flex-direction: column; gap: 5px; align-items: center;
  -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .22s ease;
  background: radial-gradient(120% 90% at 50% 0%, rgba(212,175,55,.18), transparent 62%);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-3px); border-color: rgba(212,175,55,.62); outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(212,175,55,.16),
              0 18px 36px rgba(0,0,0,.55), 0 0 30px rgba(212,175,55,.13);
}
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:active { transform: translateY(-1px); }
.tile .tic {
  font-size: 26px;
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.08)
          drop-shadow(0 2px 4px rgba(0,0,0,.65));
}
.tile.major.play .tic { filter: grayscale(1) sepia(1) saturate(3.2) hue-rotate(-14deg) brightness(1.25)
          drop-shadow(0 2px 6px rgba(0,0,0,.7)); }
.tile b { font-size: 15px; letter-spacing: .02em; }
.tile small { color: var(--dim); font-size: 12px; line-height: 1.38; }

/* Primäre Aktionen: breite Tafeln mit Blick nach vorn */
.tile.major {
  display: grid; grid-template-columns: auto 1fr; column-gap: 16px; row-gap: 2px;
  align-items: center; text-align: left; padding: 17px 22px;
}
.tile.major .tic { grid-row: 1 / span 2; font-size: 36px; }
.tile.major b { align-self: end; font-size: 19px; letter-spacing: .05em; }
.tile.major small { align-self: start; font-size: 12.5px; }
.tile.major.play {
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(122,92,20,.12) 52%, rgba(11,14,20,.88));
  box-shadow: inset 0 1px 0 rgba(255,236,180,.22), 0 0 34px rgba(212,175,55,.15), 0 14px 32px rgba(0,0,0,.5);
}
.tile.major.play b { color: #ffe6a6; }
.tile.major.play .tic { font-size: 40px; }
#tile-resume { border-color: rgba(212,175,55,.40); }
/* With a game to resume, that tile carries the gold - not "Spielen" next to it */
#tile-resume:not(.hidden) {
  border-color: rgba(212,175,55,.55);
  background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(122,92,20,.12) 52%, rgba(11,14,20,.88));
  box-shadow: inset 0 1px 0 rgba(255,236,180,.22), 0 0 34px rgba(212,175,55,.15), 0 14px 32px rgba(0,0,0,.5);
}
#tile-resume:not(.hidden) b { color: #ffe6a6; }
.tile.major.play.secondary { border-color: var(--line); background: rgba(11,14,20,.82); box-shadow: 0 14px 32px rgba(0,0,0,.5); }
.tile.major.play.secondary b { color: var(--text); }
.frguest { padding: 26px 14px; text-align: center; color: var(--dim); font-size: 14px; line-height: 1.5; }
.frguest button { margin-top: 14px; padding: 11px 22px; border-radius: 11px; border: none; background: var(--gold); color: #14100a; font-weight: 800; cursor: pointer; }
.edition {
  margin-top: 4px; color: #6d7484; font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
}

/* Sprachwahl auf dem Startbildschirm: zwei Kürzel, das aktive in Gold. */
.langpick { margin: 8px 0 0; display: flex; gap: 6px; align-items: center; justify-content: center; color: #4d5464; font-size: 11px; }
.langpick i { font-style: normal; opacity: .5; }
.langbtn {
  background: none; border: none; padding: 2px 4px; cursor: pointer;
  color: #6d7484; font: inherit; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.langbtn:hover { color: var(--text); }
.langbtn.on { color: var(--gold); }
.legal-en { font-size: 11px; }

/* Schritte: Fraktion, Banner, Lektion */
.pick {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: clamp(19px, 4.4vw, 26px); color: #f2e6c1; letter-spacing: .09em;
  margin: 0 0 8px; text-shadow: 0 2px 20px rgba(0,0,0,.85);
}
.picksub { color: var(--dim); font-size: 13px; margin: 0 0 18px; }
#step-faction .pick, #step-tutorial .pick { margin-bottom: 20px; }
.factions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.factions.banners button {
  display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center;
  min-width: 150px; font-size: 32px; padding: 20px 24px; border-radius: 16px; cursor: pointer;
  color: var(--text); border: 1px solid rgba(212,175,55,.22);
  background: linear-gradient(180deg, rgba(32,38,52,.72), rgba(11,14,20,.88));
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.factions.banners button span { font-size: 15.5px; font-weight: 700; letter-spacing: .04em; }
.factions.banners .tic {
  font-size: 32px; font-weight: 400; letter-spacing: 0;
  filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.08)
          drop-shadow(0 2px 4px rgba(0,0,0,.65));
}
.factions.banners button em { font-style: normal; font-size: 11px; color: var(--dim); }
.factions.banners button:hover, .factions.banners button:focus-visible {
  transform: translateY(-3px); border-color: rgba(212,175,55,.65); outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 18px 36px rgba(0,0,0,.55), 0 0 30px rgba(212,175,55,.14);
}
.bannerhint {
  color: var(--dim); font-size: 12.5px; max-width: 460px; margin: 18px auto 0; line-height: 1.55;
}
.bannerhint b { color: #e7d9ae; }
.ghost {
  margin-top: 26px; background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.22);
  color: #b8ae95; padding: 11px 20px; border-radius: 11px; cursor: pointer; letter-spacing: .04em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .18s ease, color .18s ease;
}
.ghost:hover { border-color: rgba(212,175,55,.6); color: var(--text); }
.backhome { margin-top: 22px; }

/* Fraktions-Kacheln mit Kartenkunst */
.fcard {
  position: relative; width: 172px; height: 230px; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(212,175,55,.25); cursor: pointer; background: #12151d; padding: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 34px rgba(0,0,0,.55);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.fcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fcard .fname {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 30px 8px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.96) 58%);
  font-size: 17px; font-weight: 800; letter-spacing: .05em; color: #f2e6c1; text-align: center;
}
.fcard .fname small { display: block; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: #c9c0a8; line-height: 1.35; }
.fcard .femoji { position: absolute; top: 9px; left: 9px; font-size: 22px; filter: drop-shadow(0 1px 3px #000); }
.fcard:hover, .fcard:focus-visible {
  transform: translateY(-4px); border-color: rgba(212,175,55,.75); outline: none;
  box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 22px 44px rgba(0,0,0,.6), 0 0 34px rgba(212,175,55,.16);
}
@media (max-width: 560px) {
  .tilegrid .tile {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 1px;
    align-items: center; text-align: left; padding: 13px 16px;
    flex-basis: 100%; max-width: none;
  }
  .tilegrid .tile .tic { grid-row: 1 / span 2; font-size: 23px; }
  .tilegrid .tile b { align-self: end; }
  .tilegrid .tile small { align-self: start; }
}
@media (max-width: 430px) {
  .fcard { width: 136px; height: 182px; }
  .fcard .fname { font-size: 15px; padding: 24px 6px 9px; }
  .fcard .fname small { font-size: 10px; }
  .tile.major { padding: 15px 16px; column-gap: 13px; }
  .tile.major b { font-size: 17.5px; }
}

/* Tutorial-Liste */
.tutlist { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.tutlist button {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(32,38,52,.70), rgba(11,14,20,.86));
  border: 1px solid rgba(212,175,55,.18); border-radius: 12px;
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(0,0,0,.4);
  padding: 12px 14px; color: var(--text); cursor: pointer;
  transition: border-color .18s ease, transform .18s ease;
}
.tutlist button:hover { border-color: rgba(212,175,55,.6); transform: translateY(-2px); }
.tutlist .tnum {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 50%;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; color: var(--gold); flex-shrink: 0;
}
.tutlist b { font-size: 14.5px; display: block; }
.tutlist small { color: var(--dim); font-size: 12px; }
.tutlist .tsteps { margin-left: auto; color: var(--dim); font-size: 11px; white-space: nowrap; }
.tutlist .tutprog { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--dim); padding: 2px 4px; }
.tutlist .tutprog i { flex: 1; height: 4px; background: #1d2230; border-radius: 3px; overflow: hidden; }
.tutlist .tutprog i b { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe9a8); font-size: 0; }
.tutlist .tutprog > b { color: #ffd97a; font-size: 13px; }
.tutlist button.done { opacity: .72; }
.tutlist button.done .tnum { background: rgba(55,160,107,.2); border-color: rgba(55,160,107,.7); color: #63c98f; }
.tutlist button.done .tsteps { color: #63c98f; }
.tutlist button.next { border-color: rgba(212,175,55,.6); box-shadow: 0 0 0 1px rgba(212,175,55,.25), 0 10px 24px rgba(0,0,0,.4); }
.tutlist button.next .tsteps { color: #ffd97a; font-weight: 700; }

/* Tutorial im Spiel */
#hint.tutorial { background: rgba(74,127,181,.14); border-color: rgba(74,127,181,.5); color: #bcd6f0; font-weight: 500; text-align: left; display: flex; gap: 10px; align-items: center; padding: 7px 12px; }
#hint.tutorial .ttext { flex: 1; line-height: 1.45; }
#hint.tutorial .tprog { color: var(--dim); font-size: 11px; white-space: nowrap; }
#hint.tutorial button { background: var(--gold); border: none; border-radius: 8px; font-weight: 800; padding: 7px 16px; cursor: pointer; flex-shrink: 0; }
.card.tuthigh { box-shadow: 0 0 0 2px #6fb1ff, 0 0 14px rgba(111,177,255,.75); animation: pulse-blue 1.2s infinite; }
@keyframes pulse-blue { 50% { box-shadow: 0 0 0 2px #6fb1ff, 0 0 24px rgba(111,177,255,1); } }

/* Bibliothek */
#library { position: fixed; inset: 0; background: #000d; z-index: 94; display: flex; align-items: center; justify-content: center; padding: 14px; }
#library select {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text);
  padding: 8px 8px; font-size: 13px;
}
.lbody { flex: 1; display: flex; min-height: 0; }
#lpanel { display: none; }
@media (min-width: 1000px) {
  #lpanel {
    display: block; width: 330px; flex-shrink: 0; overflow-y: auto;
    border-left: 1px solid var(--line); padding: 16px;
  }
  #lpanel .placeholder { color: #5a6274; font-size: 13px; padding: 12px 4px; }
}
.faq { margin-top: 12px; }
.faq summary { cursor: pointer; color: var(--gold); font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.faq .qa { margin: 10px 0; }
.faq .q { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.faq .q::before { content: "F: "; color: var(--gold); }
.faq .a { font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.faq .a::before { content: "A: "; color: #7fb069; font-weight: 700; }
.faq .ref {
  display: inline-block; margin: 2px 6px 0 0; padding: 2px 8px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--line); color: #ffd97a;
  font-size: 11px; cursor: pointer;
}
.faq .ref:hover { border-color: var(--gold); }
/* Sheet 1100 px minus 330 px panel gave four columns at 1440 px - now six. */
#library .rsheet { width: min(1420px, 100%); }
#lgrid {
  /* 165 px: six columns on the 1420-px sheet next to the 330-px panel; 140 px: two on a 375-px phone */
  --libw: clamp(140px, 11.4vw, 165px);
  flex: 1; overflow-y: auto; padding: 14px; display: grid;
  grid-template-columns: repeat(auto-fill, var(--libw)); gap: 10px; align-content: start; justify-content: center;
}
/* Jede Kachel ist die komplette Karte (fullCardHTML) im Kleinen - Daniel wollte
   im Raster dasselbe sehen wie in der Vorschau rechts (02.09.2026). Rahmen und
   Auswahl sitzen auf der Karte selbst. Der Deckeditor (.dbcard) macht es genauso. */
.libcard { width: var(--libw); cursor: pointer; border-radius: 12px; }
.libcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.libcard .tcg { transition: border-color .12s ease, box-shadow .12s ease; }
.libcard:hover .tcg, .libcard:focus-visible .tcg { border-color: var(--gold); }
.libcard.active .tcg { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 4cqw 12.8cqw #000b; }
/* Einstellungen */
#settings { position: fixed; inset: 0; background: #000c; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 16px; }
#settings .sheet { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; max-width: 430px; width: 100%; padding: 22px; }
#settings h2 { color: var(--gold); font-size: 19px; margin-bottom: 16px; }
.setrow { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--dim); }
.setrow input, .setrow select {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text);
  padding: 10px 12px; font-size: 14.5px; outline: none;
}
.setrow input:focus, .setrow select:focus { border-color: var(--gold); }
.setbtns { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 16px; }
.setbtns button { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 10px; cursor: pointer; font-size: 13.5px; }
.setbtns button.danger { border-color: var(--red); color: #ff9d92; }
#settings-close { width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--gold); font-weight: 800; font-size: 15px; cursor: pointer; }

/* ---------- Drag & Drop ---------- */
#hand .card { touch-action: pan-x; }        /* horizontal scrollt die Hand, vertikal ziehen spielt */
main .card.selectable, main .card.tuthigh { touch-action: none; }
.dragsrc { opacity: .35; }
.dragghost {
  position: fixed; z-index: 220; pointer-events: none;
  transform: translate(-50%, -65%) scale(1.08) rotate(2deg);
  opacity: .95; box-shadow: 0 14px 34px #000d; border-radius: 8px;
}
.dragover { outline: 3px solid #fff !important; outline-offset: 1px; }

/* ---------- Tutorial-Panel im Live-Activity-Stil ---------- */
#tutpanel {
  background: rgba(6, 8, 12, .96); border: 1px solid #262b38; border-radius: 22px;
  box-shadow: 0 14px 44px #000d;
  padding: 15px 16px 14px; font-size: 13.5px; z-index: 30;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#tutpanel .thead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#tutpanel .ttitle { color: var(--text); font-size: 13px; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tutpanel .tstep { color: var(--dim); font-size: 11px; white-space: nowrap; }
#tutpanel .quit { background: none; border: none; color: #5a6274; font-size: 14px; cursor: pointer; padding: 2px 4px; }
#tutpanel .quit:hover { color: var(--text); }
#tutpanel .tbar { height: 3px; background: #1d2230; border-radius: 3px; margin: 0 0 10px; overflow: hidden; }
#tutpanel .tbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), #ffe9a8); }
#tutpanel .ttext { line-height: 1.55; color: var(--text); }
#tutpanel .tbtns { margin-top: 12px; display: flex; gap: 8px; align-items: center; }
#tutpanel .thintpill {
  flex: 1; background: rgba(212,175,55,.13); border: 1px solid rgba(212,175,55,.4);
  color: #ffd97a; border-radius: 999px; padding: 7px 12px; font-size: 12px; line-height: 1.35;
}
#tutpanel button.primary {
  margin-left: auto; background: var(--gold); color: #14100a; border: none; border-radius: 999px;
  font-weight: 800; padding: 9px 20px; cursor: pointer; font-size: 14px;
}
#tutpanel button.primary:hover { filter: brightness(1.08); }
#tutpanel .fold { display: none; }
@media (min-width: 1000px) {
  #content { position: relative; }
  #tutpanel { position: absolute; left: 10px; top: 12px; width: min(240px, 18vw); }
  /* Das Brett rueckt neben das Panel statt darunter - vorher lagen die
     Gegnerstapel halb unter dem Lektionstext */
  body.tutorial main { padding-left: calc(min(240px, 18vw) + 14px); }
}
/* Phone/Tablet: #content ist eine Zeile, und als Geschwister von main drueckte
   das Panel das Brett an den rechten Rand - nur die Reihenbeschriftung blieb
   sichtbar (02.09.2026). Jetzt liegt es als kompakte Leiste UEBER dem Brett,
   der Text ist auf drei Zeilen gekappt und klappt per Tipp auf. */
@media (max-width: 999px) {
  #content { flex-direction: column; }
  #tutpanel {
    flex: 0 0 auto; order: -1; margin: 5px 6px 2px; padding: 8px 11px 9px;
    border-radius: 14px; font-size: 12.5px; max-height: 44vh; overflow-y: auto;
  }
  #tutpanel .thead { margin-bottom: 5px; }
  #tutpanel .tbar { margin-bottom: 6px; }
  #tutpanel .ttext { line-height: 1.4; cursor: pointer; }
  #tutpanel:not(.open) .ttext { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #tutpanel .fold {
    display: inline-block; background: none; border: none; color: #8b93a4; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 4px; transition: transform .2s ease;
  }
  #tutpanel.open .fold { transform: rotate(180deg); }
  #tutpanel .tbtns { margin-top: 7px; gap: 6px; }
  #tutpanel .thintpill { padding: 5px 10px; font-size: 11.5px; }
  #tutpanel button.primary { padding: 7px 16px; font-size: 13px; }
  /* Das Brett bekommt weniger Hoehe, also kleinere Karten. Was ueber den
     Bildschirm verteilt fest ist (Kopf, Lektionspanel, Mittelstreifen, Dock
     ohne Handkarten, aufgeklapptes Panel) sind rund 360 px; der Rest teilt sich auf sechs Reihen
     (je 1.288 Kartenbreiten) und die Hand (1.09) auf. Eine reine vh-Formel
     passt nicht zugleich fuer 667 und 844 px Hoehe: entweder ragte die eigene
     Bautenreihe unter das Dock oder die Karten blieben auf dem grossen Telefon
     unnoetig klein (02.09.2026). main braucht min-height:0, sonst schiebt das
     aufgeklappte Panel das Brett aus dem Bild statt es scrollen zu lassen. */
  /* --card-h is resolved where it is declared (:root), so it must be redeclared
     next to every --card-w override - otherwise slots keep the root height. */
  /* 42 px Untergrenze: darunter war nichts mehr lesbar (34 px bei 375x667) -
     das Brett scrollt dann lieber. dvh, weil #app 100dvh hoch ist. */
  body.tutorial { --card-w: clamp(42px, min(14.6vw, (100dvh - 363px) / 8.9), 96px); --card-h: calc(var(--card-w) * 1.4); }
  body.tutorial main { min-height: 0; overflow-y: auto; }
}
/* Telefon quer: uebereinander blieben dem Brett 126 px Hoehe (844x390). Das
   Panel steht dann als schmale Spalte links, das Brett scrollt daneben. */
@media (max-width: 999px) and (max-height: 500px) and (orientation: landscape) {
  #content { flex-direction: row; }
  #tutpanel { flex: 0 0 min(300px, 36vw); max-height: none; align-self: stretch; margin: 4px 0 4px 6px; }
  #tutpanel:not(.open) .ttext { -webkit-line-clamp: 6; }
  body.tutorial main { flex: 1; min-width: 0; }
}
/* Zwischen 1000 und 1200 px nimmt das Lektionspanel dem Brett 18vw weg - mit
   der normalen Kartenbreite ragte der siebte Bauplatz aus dem Bild. */
@media (min-width: 1000px) and (max-width: 1199px) {
  body.tutorial { --card-w: clamp(44px, min(4.4vw, (100vh - 200px) / 9.95), 124px); --card-h: calc(var(--card-w) * 1.4); }
}

/* ---------- Ressourcen-Pips ---------- */
.respips { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.respips b { color: var(--gold); font-size: 12.5px; margin-right: 2px; }
.respips i {
  width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px;
  background: #2a3040; border: 1px solid #3a4258; display: inline-block;
}
.respips i.full { background: linear-gradient(135deg, #ffe9a8, var(--gold)); border-color: var(--gold); box-shadow: 0 0 6px rgba(212,175,55,.55); }
footer .respips i { width: 13px; height: 13px; }
/* Bis 1500 px ist die Aussenspalte des Docks nur 200-209 px breit; zehn Pips
   zu 13 px plus Label brauchen 217 px. Dort bleiben sie so gross wie im Kopf
   (11 px), darueber ist Platz fuer die grossen. flex-wrap oben ist das Netz,
   falls eine Partie doch einmal mehr als zehn Ressourcen zulaesst. */
@media (min-width: 1000px) and (max-width: 1499px) { footer .respips i { width: 11px; height: 11px; } }

/* ---------- Hand als Fächer ---------- */
#hand { overflow: visible; padding-top: 14px; }
#hand .card {
  width: calc(var(--card-w) * .98); height: calc(var(--card-h) * .92);
  transition: transform .15s ease, box-shadow .15s ease; position: relative;
}
#hand .card + .card { margin-left: calc(var(--card-w) * -0.22); }
#hand .card:hover, #hand .card.selected {
  transform: translateY(-16px) scale(1.12); z-index: 25 !important;
  box-shadow: 0 10px 26px #000c, 0 0 0 2px var(--gold);
}
#hand .card.unaffordable { opacity: .5; }
#hand .card.unaffordable .cost { background: var(--red); color: #fff; }
.card .cost.disc { background: linear-gradient(180deg, #7fdc9a, #37a06b); color: #06170c; }
.card .cost.disc s { font-size: .55em; opacity: .75; margin-left: 2px; text-decoration-thickness: 1.5px; }
.tcg-cost.disc { background: linear-gradient(180deg, #7fdc9a, #37a06b); color: #06170c; }
@media (max-width: 999px) {
  #hand { overflow-x: auto; overflow-y: hidden; padding-top: 18px; }
  #hand .card + .card { margin-left: calc(var(--card-w) * -0.1); }
}
@media (min-width: 1000px) {
  /* Hand cards were 62x81 px at 1440x900 - names truncated, pills unreadable */
  #hand .card { width: calc(var(--card-w) * 1.32); height: calc(var(--card-h) * 1.22); }
  #hand .card + .card { margin-left: var(--hand-ml, calc(var(--card-w) * -0.18)); }
}

/* ---------- Stapel-Besitz unmissverständlich ---------- */
.matside .pile .plabel { font-size: 8px; line-height: 1.25; padding-top: 10px; }
.matside.foeside .pile { border-color: rgba(210,68,55,.55); }
.matside.myside .pile { border-color: rgba(74,127,181,.6); }


/* ---------- Regelwerk: Legende, Trefferschritt, Paragraphensprünge ---------- */
#rnav { display: inline-flex; gap: 2px; }
#rnav button {
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; width: 26px; height: 26px; font-size: 15px; line-height: 1; cursor: pointer;
}
#rnav button:hover { border-color: var(--gold); color: var(--gold); }
#rcontent mark { background: rgba(212,175,55,.30); color: inherit; border-radius: 3px; padding: 0 1px; }
#rcontent mark.current {
  background: var(--gold); color: #14100a; font-weight: 700;
  box-shadow: 0 0 0 2px rgba(212,175,55,.45);
}
.rsec.flash { animation: rflash 1.6s ease-out; }
@keyframes rflash {
  0% { background: rgba(212,175,55,.22); box-shadow: 0 0 0 1px rgba(212,175,55,.5); }
  100% { background: transparent; box-shadow: none; }
}

/* Zitierte Paragraphen sind Sprungziele, keine tote Schrift */
.pref {
  color: #ffd97a; border-bottom: 1px dashed rgba(212,175,55,.55);
  cursor: pointer; white-space: nowrap;
}
.pref:hover { color: #fff2c8; border-bottom-style: solid; }

/* Die Legende erklärt die Zeichen an einer echten Karte */
.rlegend { border-bottom: 1px solid var(--line); padding-bottom: 18px; margin-bottom: 18px; }
.rlegend h3 {
  color: var(--gold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  margin: 18px 0 10px;
}
.rlegend h3:first-child { margin-top: 0; }
.lgwrap { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
/* Die Legende zeigt die echte Karte (fullCardHTML) mit ueberstehenden Nummern
   statt Nummern AUF den Werten, die sie erklaeren. */
.lgcard { position: relative; width: 236px; flex-shrink: 0; padding: 12px; }
.lgcard .tcg { box-shadow: none; }
/* White with a gold ring - the card's own gold cost badge sits right next to
   pin 1 and looked like a second marker. */
.lgcard .pin {
  position: absolute; z-index: 3; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; color: #14100a; border: 2px solid var(--gold); font-size: 11px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px #000a; font-style: normal;
}
.lglist { list-style: none; flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 9px; }
.lglist li { display: flex; gap: 9px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.lglist li b {
  flex-shrink: 0; width: 19px; height: 19px; border-radius: 50%; margin-top: 1px;
  background: #fff; color: #14100a; border: 2px solid var(--gold); font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.lglist strong { color: var(--text); font-weight: 700; }
.lgsym { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.lgsym li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); }
.lgsym .sw { flex-shrink: 0; width: 26px; height: 18px; border-radius: 5px; background: var(--panel2); border: 1px solid var(--line); }
.lgsym .sw.gold { border-color: var(--gold); box-shadow: 0 0 8px rgba(212,175,55,.5); }
.lgsym .sw.red { border-color: var(--red); box-shadow: 0 0 8px rgba(210,68,55,.5); }
.lgsym .sw.rot { transform: rotate(90deg); opacity: .6; }
.lgsym .sw.z { border-style: dashed; }
.lgsym .sw.pause { transform: rotate(90deg); opacity: .45; border-color: rgba(212,175,55,.55); }
.lgsym .sw.shield { background: linear-gradient(180deg, #F6E7B0, #C9A227); border-color: rgba(255,240,196,.9); }
.lgkw { display: flex; flex-wrap: wrap; gap: 6px; }
.lgkw .ref {
  display: inline-block; padding: 3px 9px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--line); color: #ffd97a;
  font-size: 11.5px; cursor: pointer;
}
.lgkw .ref:hover { border-color: var(--gold); background: rgba(212,175,55,.12); }

/* Kartenkunde: der historische Hintergrund unter dem Regeltext */
.insp .lore {
  margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(212,175,55,.22);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-size: 13px; line-height: 1.62; color: #b9b09a; font-style: italic;
}

/* ---------- Duell: Lobby, Code, Warten ---------- */
.duelbox { display: flex; flex-direction: column; gap: 14px; width: min(560px, 94vw); margin: 0 auto; }
.duelcode { display: flex; gap: 8px; }
.duelcode input {
  flex: 1; text-align: center; letter-spacing: .34em; font-size: 20px; font-weight: 800;
  text-transform: uppercase; padding: 12px; border-radius: 12px; color: var(--text);
  background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.22); outline: none;
}
.duelcode input::placeholder { letter-spacing: .2em; color: #5c6374; font-weight: 600; }
.duelcode input:focus { border-color: rgba(212,175,55,.62); box-shadow: 0 0 0 1px rgba(212,175,55,.18); }
.btn-join {
  padding: 0 22px; border-radius: 12px; font-weight: 800; font-size: 15px; cursor: pointer;
  color: #17130a; border: 1px solid rgba(255,236,180,.5);
  background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F);
}
.btn-join:hover { filter: brightness(1.08); }
.duellobby {
  background: linear-gradient(180deg, rgba(32,38,52,.62), rgba(11,14,20,.82));
  border: 1px solid rgba(212,175,55,.18); border-radius: 14px; padding: 10px 12px 12px;
}
.lobbyhead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: #6d7484; margin-bottom: 8px;
}
.lobbyhead button { background: none; border: none; color: var(--gold); font-size: 16px; cursor: pointer; }
.lobbyempty { color: var(--dim); font-size: 13px; padding: 8px 2px; text-align: center; }
.lobbyrow {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
  border-radius: 10px; color: var(--text); font-size: 13.5px;
  background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.14);
  transition: border-color .16s ease, transform .16s ease;
}
.lobbyrow:hover { border-color: rgba(212,175,55,.55); transform: translateY(-1px); }
.lobbyrow .lhost { font-weight: 700; }
.lobbyrow .lfac, .lobbyrow .lwait { color: var(--dim); font-size: 12px; }
.lobbyrow .lcode {
  font-weight: 800; letter-spacing: .14em; color: var(--gold);
  background: rgba(212,175,55,.10); border-radius: 7px; padding: 3px 8px;
}
.waitcode {
  font-size: clamp(34px, 9vw, 58px); font-weight: 900; letter-spacing: .28em;
  color: #f6e7b0; text-shadow: 0 0 34px rgba(212,175,55,.35);
  margin: 8px 0 4px; padding-left: .28em;
}

/* Code kopieren – der Code ist zum Weitergeben da, nicht zum Abtippen */
.codewrap { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.codewrap .waitcode { margin: 8px 0 4px; cursor: pointer; }
#code-copy {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 10px 16px; border-radius: 11px; font-weight: 800; font-size: 14px;
  color: #17130a; border: 1px solid rgba(255,236,180,.5);
  background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F);
  transition: filter .16s ease, transform .16s ease;
}
#code-copy:hover { filter: brightness(1.08); transform: translateY(-1px); }
#code-copy .ci { font-size: 16px; line-height: 1; }
.linkcopy { margin-top: 14px; }
@media (max-width: 480px) { #code-copy .ct { display: none; } }

/* ---------- Deckeditor ---------- */
#deckbuilder { position: fixed; inset: 0; background: #000d; z-index: 95; display: flex; align-items: center; justify-content: center; padding: 14px; }
#deckbuilder .rsheet { width: min(1420px, 100%); }
.dbhead { flex-wrap: wrap; }
.dbhead input, .dbhead select {
  background: var(--panel2); border: 1px solid rgba(212,175,55,.22); border-radius: 9px;
  color: var(--text); padding: 8px 10px; font-size: 13px; outline: none;
}
.dbhead input:focus, .dbhead select:focus { border-color: rgba(212,175,55,.62); }
.dbhead #db-name { min-width: 170px; }
.dbcount { font-weight: 900; color: var(--gold); letter-spacing: .06em; font-size: 15px; }
.dbfilters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
}
.dbfilters input, .dbfilters select {
  background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.18); border-radius: 9px;
  color: var(--text); padding: 7px 10px; font-size: 12.5px; outline: none;
}
.dbfilters #db-search { flex: 1; min-width: 160px; }
/* The select groups only exist for the phone layout (one scrolling row); on
   wider screens they dissolve into the flex row as before. */
.lfilters, .dbsel { display: contents; }
/* Head buttons: line icons + label. They were bare emoji in unstyled browser
   buttons, which read as grey boxes in Chrome and as colourful stickers in Safari. */
.hbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto;
  height: 34px; padding: 0 12px; border-radius: 9px; white-space: nowrap; cursor: pointer;
  border: 1px solid rgba(212,175,55,.38);
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.06));
  color: #f0dfa8; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.hbtn svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hbtn:hover { border-color: var(--gold); background: rgba(212,175,55,.24); }
.hbtn:active { transform: translateY(1px); }
.hbtn.danger { color: #ffb4aa; border-color: rgba(210,68,55,.45); background: linear-gradient(180deg, rgba(210,68,55,.16), rgba(210,68,55,.05)); }
.hbtn.danger:hover { border-color: var(--red); background: rgba(210,68,55,.24); }
.hbtn.close { width: 34px; padding: 0; border-radius: 50%; color: var(--dim); background: var(--panel2); border-color: var(--line); }
.hbtn.close:hover { color: var(--text); border-color: var(--gold); background: var(--panel2); }
.hbtn.close svg { width: 16px; height: 16px; stroke-width: 2.4; }
@media (max-width: 900px) {
  .hbtn .lbl { display: none; }
  .hbtn:not(.close) { width: 36px; padding: 0; }
}
.dbonly { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.dbbody { flex: 1; display: flex; min-height: 0; }
#db-grid {
  /* 190 px: five columns on the 1420-px sheet next to the panel; 140 px: two on a 375-px phone.
     The tile is the complete card (fullCardHTML), so it needs the room - Daniel
     wanted the same card here as in the library (02.09.2026). */
  --libw: clamp(140px, 12vw, 190px);
  flex: 1; overflow-y: auto; padding: 12px; display: grid;
  grid-template-columns: repeat(auto-fill, var(--libw)); gap: 10px; align-content: start; justify-content: center;
}
.dbcard { position: relative; width: var(--libw); border-radius: 12px; cursor: pointer; container-type: inline-size; }
.dbcard .tcg { transition: border-color .12s ease, box-shadow .12s ease; }
.dbcard:hover .tcg, .dbcard:focus-visible .tcg { border-color: var(--gold); }
.dbcard.inDeck .tcg { border-color: rgba(212,175,55,.9); box-shadow: 0 0 0 2px rgba(212,175,55,.55), 0 4cqw 12.8cqw #000b; }
.dbcard.illegal { opacity: .42; filter: grayscale(.7); }
.dbcard .pill.kw.ref { cursor: inherit; pointer-events: none; }   /* the tile has one job: add the card */
.dbempty { color: var(--dim); font-size: 12.5px; padding: 14px 6px; line-height: 1.5; }
.dbrow {
  display: grid; grid-template-columns: 30px 22px 1fr auto; gap: 7px; align-items: center;
  width: 100%; text-align: left; padding: 6px 8px; margin-bottom: 3px; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 8px; color: var(--text); font-size: 12.5px;
}
.dbrow:hover { background: rgba(212,175,55,.10); border-color: rgba(212,175,55,.30); }
.dbrow .dn { font-weight: 900; color: var(--gold); }
.dbrow .dc { color: var(--dim); text-align: right; }
.dbrow .dnm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbrow .dt { color: #5f6779; font-size: 10.5px; }
.curvehead { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #6d7484; padding: 10px 12px 4px; }
.curve { display: flex; gap: 4px; align-items: flex-end; height: 62px; padding: 0 12px 6px; }
.cbar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.cbar i { display: block; width: 100%; min-height: 2px; background: linear-gradient(180deg, #E4C266, #8C6A17); border-radius: 3px 3px 0 0; }
.cbar span { font-size: 9.5px; color: #6d7484; margin-top: 3px; }
#db-valid { padding: 10px 12px 14px; font-size: 12px; line-height: 1.5; border-top: 1px solid var(--line); }
#db-valid.valid { color: #7fd6a4; }
#db-valid.invalid { color: #ffbdb4; }
#db-valid ul { margin: 5px 0 0 16px; color: var(--dim); }

/* Aufgeben gehört in die Kopfzeile: die Seitenleiste gibt es erst ab 1000px,
   und der Ersatzknopf steckte im geschlossenen Protokoll – unter 1000px war
   Aufgeben damit überhaupt nicht erreichbar. */
#concede-top[data-arm] {
  background: rgba(210,68,55,.22); color: #ff9d92; font-size: 12px; font-weight: 800;
  padding: 4px 9px; border-radius: 8px;
}

/* Werkzeugzeile: Regelwerk, Kurzanleitung, Einstellungen sind Nachschlagewerke,
   keine Spielmodi – als Kacheln standen sie gleichrangig neben „Spielen". */
.utilrow { display: flex; gap: 10px; justify-content: center; margin-top: 4px; flex-wrap: wrap; }
.util {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border-radius: 11px; font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: #b8ae95; background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.util span { font-size: 16px; filter: grayscale(1) sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.08); }
.util:hover { border-color: rgba(212,175,55,.6); color: var(--text); transform: translateY(-2px); }
.util#tile-settings { padding: 9px 13px; }

/* Die Kurzanleitung gehört an den Anfang der Lektionsliste, nicht daneben */
.tutlist .starter {
  border-color: rgba(212,175,55,.5);
  background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(11,14,20,.86));
}
.tutlist .starter .tnum { background: var(--gold); color: #14100a; border-color: transparent; }

/* Konto */
#account { position: fixed; inset: 0; background: #000c; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 16px; }
#account .sheet { background: var(--panel); border: 1px solid rgba(212,175,55,.3); border-radius: 16px; max-width: 440px; width: 100%; padding: 22px; }
#account h2 { color: var(--gold); font-size: 19px; margin-bottom: 16px; }
.acctbox { background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.16); border-radius: 11px; padding: 4px 12px; margin-bottom: 12px; }
.acctrow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; font-size: 13px; color: var(--dim); }
.acctrow + .acctrow { border-top: 1px solid rgba(212,175,55,.10); }
.acctrow b { color: var(--text); font-weight: 700; }
.accthint { font-size: 12.5px; line-height: 1.55; color: var(--dim); margin-bottom: 14px; }
#account-close { width: 100%; padding: 12px; border-radius: 10px; border: none; background: var(--gold); font-weight: 800; font-size: 15px; cursor: pointer; }
.util b { font-weight: 700; color: var(--text); }

/* ---------- Freunde ---------- */
.abil { margin: 0 0 5px; line-height: 1.45; }
.abil:last-child { margin-bottom: 0; }
.abil b { color: #e8d9a8; font-weight: 700; }
.abil b::after { content: ":"; color: #6d7484; font-weight: 400; }

/* Die Kopfzeile der Bibliothek traegt inzwischen sieben Bedienelemente und
   lief rechts aus dem Fenster - der Kartenzaehler war abgeschnitten. */
#library .rhead { flex-wrap: wrap; row-gap: 6px; }
#library .rhead select { flex: 0 1 auto; min-width: 0; }
#lcount { flex: 0 0 auto; white-space: nowrap; font-size: 12px; color: var(--dim); }
#library #lsearch { flex: 1 1 150px; min-width: 120px; }

/* ---------- Karte im Sammelkarten-Aufbau ----------
   Nach den Vorbildern One Piece und Cyberpunk-TCG (01.09.2026): Rahmen in der
   Typfarbe, Kopf mit Kosten und Name, Kunst, Typ-Pillen, abgesetzter
   Faehigkeitskasten, Fusszeile mit Werten und Sammelnummer.
   Alle Masse in cqw, Bezug ist die 297 px breite Karte im Bibliotheks-Panel
   (1cqw = 2,97 px). So bleibt dieselbe Karte als 140-px-Kachel im Raster und in
   der 257 px schmalen Spielspalte stimmig - seit dem 02.09.2026 zeigt das
   Bibliotheksraster die komplette Karte statt Bild plus Namensstreifen.
   .tcgwrap ist der Container; ohne ihn faellt cqw auf die Fensterbreite zurueck. */
.tcgwrap { container-type: inline-size; width: 100%; }
.tcg {
  --tc: #6d7484;
  position: relative; width: 100%; aspect-ratio: 5 / 7;
  display: flex; flex-direction: column;
  border-radius: 4.7cqw; overflow: hidden;
  background: linear-gradient(180deg, #12151d, #0a0c11);
  border: max(1px, .67cqw) solid var(--tc);
  box-shadow: 0 4cqw 12.8cqw #000b, inset 0 0 0 1px #0008;
}
/* Typfarben gelten fuer die grosse Karte (.tcg) und die Brettkarte (.card) */
.t-unit { --tc: #c8563c; } .t-tactic { --tc: #8a6bd1; }
.t-intrigue { --tc: #3f9b8c; } .t-building { --tc: #b98a2f; }
.t-terrain { --tc: #6f8f52; } .t-event { --tc: #4a7fb5; }
.t-deity { --tc: #d9d0a8; } .t-ruler { --tc: #e8c25a; }
.t-monument { --tc: #b98a2f; }

/* Kopf: Kosten links, Name mittig, großer Wert rechts */
.tcg-head {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 2.7cqw; flex-shrink: 0;
  padding: 2.7cqw 3.4cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 38%, #0b0d12), #0b0d12);
  border-bottom: 1px solid color-mix(in srgb, var(--tc) 45%, transparent);
}
.tcg-cost {
  flex: 0 0 auto; width: 14.8cqw; height: 14.8cqw; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ffe9a8, var(--gold) 62%, #8C6A17);
  color: #1a1408; font-weight: 900; font-size: 8.4cqw; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  border: max(1px, .67cqw) solid #FBF0C6; box-shadow: 0 1cqw 3.4cqw #000b, inset 0 -.7cqw 2cqw #0004;
  text-shadow: 0 1px 0 #ffffff5c;
}
.tcg-title { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.12; }
.tcg-title b { font-size: 5.7cqw; color: #f6efdd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg-title small { font-size: 3.4cqw; color: #9aa0ae; letter-spacing: .04em; text-transform: uppercase;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg-big {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  font-size: 13.5cqw; font-weight: 900; color: #fff8e6; line-height: .92;
  text-shadow: 0 .7cqw 2.7cqw #000, 0 0 2px #000;
  font-variant-numeric: tabular-nums;
}
.tcg-big i { font-style: normal; font-size: 3.4cqw; font-weight: 800; color: var(--tc);
             letter-spacing: .16em; margin-top: .7cqw; text-shadow: 0 1px 3px #000; }

/* Die Kunst beginnt UNTER dem Kopf und haengt oben an: als sie die ganze Karte
   fuellte, lag die Kopfleiste als Deckel ueber dem Bildoberrand und schnitt bei
   fast jeder Figur den Kopf ab (01.09.2026). Beschnitten wird jetzt unten, wo
   die Grafiken ohnehin ihren dunklen, leeren Fuss haben. */
.tcg-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tcg-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block; }
.tcg-art .noart { position: absolute; inset: 0; display: flex; align-items: center;
                  justify-content: center; font-size: 15.5cqw; opacity: .4; }

/* Der Textteil bestimmt seine Hoehe selbst - ein Deckel darauf schnitt den
   Faehigkeitstext ab. Er liegt ueber dem dunklen Fuss der Grafik und ueberlappt
   die Kunst nur um ein kurzes Stueck, damit der Uebergang weich bleibt. */
.tcg-lower {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0 3cqw 2.7cqw; z-index: 2;
  background: linear-gradient(transparent, rgba(7,9,13,.88) 30%, rgba(7,9,13,.98) 58%);
}
.tcg-pills { display: flex; flex-wrap: wrap; gap: 1.35cqw; padding: 2.7cqw 0 2cqw; }
.pill {
  font-style: normal; font-size: 3.4cqw; letter-spacing: .05em; text-transform: uppercase;
  padding: .7cqw 2.4cqw; border-radius: 1.35cqw; font-weight: 700;
  background: color-mix(in srgb, var(--tc) 26%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc) 60%, transparent); color: #f2ead6;
}
.pill.kw.ref { cursor: pointer; }
.pill.kw.ref:hover, .pill.kw.ref:focus-visible { border-color: var(--gold); outline: none; }
.libcard .pill.kw.ref { cursor: inherit; pointer-events: none; }
.pill.kw { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.34); color: #f0dfa8;
           text-transform: none; letter-spacing: .01em; }
.tcg-box {
  background: rgba(10,12,17,.78); border: 1px solid #2a3143; border-radius: 2.7cqw;
  padding: 2.4cqw 3cqw; font-size: 4cqw; line-height: 1.42; color: var(--text);
}
.tcg-box em { color: var(--dim); }
.tcg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 2.7cqw;
  padding-top: 2cqw; font-size: 3.7cqw; color: #8b93a4;
}
.tcg-stats { font-size: 4.4cqw; }
.tcg-stats b { color: #f6efdd; font-weight: 900; font-size: 5.4cqw; }
.tcg-stats .sep { margin: 0 2cqw; opacity: .5; }
.tcg-id { font-size: 3.2cqw; letter-spacing: .06em; color: #5f6779; }

/* ---------- Statistik ---------- */
.statbox { margin: 10px 0 4px; border: 1px solid #242c3d; border-radius: 12px;
           background: #0d1119; padding: 10px 12px; font-size: 12.5px; }
.stathead { font-weight: 700; color: #e8d9a8; margin: 8px 0 5px; font-size: 12px;
            letter-spacing: .04em; text-transform: uppercase; }
.stathead:first-child { margin-top: 0; }
.statrow { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.statrow b { font-variant-numeric: tabular-nums; }
.statbar { height: 5px; border-radius: 3px; background: #1d2433; overflow: hidden; margin: 3px 0 6px; }
.statbar i { display: block; height: 100%; background: linear-gradient(90deg, #b98f3a, #e8c66a); }
.statempty { opacity: .65; }

#friends { position: fixed; inset: 0; background: #000d; z-index: 96; display: flex; align-items: center; justify-content: center; padding: 16px; }
.frsheet { max-width: 620px; }

/* ---------- Chat ---------- */
#chat { position: fixed; inset: 0; z-index: 97; display: flex; align-items: center;
        justify-content: center; background: rgba(4,6,11,.72); backdrop-filter: blur(6px); }
#chat.hidden { display: none; }
.chatsheet { max-width: 560px; width: min(560px, 94vw); height: min(680px, 88vh);
             display: flex; flex-direction: column; }
.chatsheet .rhead h2 { flex: 1; font-size: 1.02rem; }
#chat-back { background: none; border: 0; color: var(--ink, #e7e3d8); font-size: 1.4rem;
             cursor: pointer; padding: 0 .3rem; }
.chatlog { flex: 1; overflow-y: auto; padding: .8rem .9rem; display: flex;
           flex-direction: column; gap: .45rem; }
.chatmsg { max-width: 78%; padding: .42rem .62rem; border-radius: 12px; line-height: 1.35;
           font-size: .92rem; word-break: break-word; }
.chatmsg.them { align-self: flex-start; background: #1b2030; border: 1px solid #2b3245; }
.chatmsg.me { align-self: flex-end; background: #2a3a2f; border: 1px solid #3c5645; }
.chatmsg time { display: block; margin-top: .18rem; font-size: .68rem; opacity: .55; }
.chatempty { margin: auto; opacity: .6; font-size: .9rem; text-align: center; }
.chatbar { display: flex; gap: .5rem; padding: .7rem; border-top: 1px solid #232a3a; }
.chatbar input { flex: 1; min-width: 0; padding: .55rem .7rem; border-radius: 10px;
                 border: 1px solid #2b3245; background: #10141e; color: inherit; font: inherit; }
.chatbar button { padding: .55rem .9rem; border-radius: 10px; cursor: pointer; }
.frbody { flex: 1; overflow-y: auto; padding: 6px 14px 16px; }
.frhead { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #6d7484; margin: 14px 0 7px; }
.frempty { color: var(--dim); font-size: 12.5px; line-height: 1.55; padding: 6px 2px 10px; }
.frrow {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; margin-bottom: 6px;
  background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.14); border-radius: 11px;
}
.frdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.frname { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.frname b { font-size: 13.5px; }
.frname small { color: var(--dim); font-size: 11.5px; }
.fracts { display: flex; gap: 6px; flex-shrink: 0; }
.fracts button {
  padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
  color: #b8ae95; background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.2);
}
.fracts button:hover { border-color: rgba(212,175,55,.6); color: var(--text); }
.fracts button.ok {
  color: #17130a; border-color: rgba(255,236,180,.5);
  background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F);
}
.frbadge {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; border-radius: 9px;
  background: var(--red); color: #fff; font-size: 10.5px; font-weight: 900; font-style: normal;
  display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
#tile-friends { position: relative; }

/* ==================== Deckeditor: Fokusspalte ====================
   Ergebnis des Entwurfsvergleichs vom 01.09.2026. Der Editor bekommt genau
   EINEN Ort, an dem eine Karte vollstaendig erklaert wird; sein Ruhezustand
   ist der gewaehlte Herrscher. Die Kachel bleibt bildstark und traegt nur
   eine Metazeile - gemessen braucht schon ein mittlerer Regeltext vier
   Zeilen und damit 44% einer 96px-Kachel. */
/* --- Overlay stack: #cardinfo above #deckbuilder (95), #rules (99) above both. --- */
#cardinfo { z-index: 98; }     /* was 80 – also fixes the library modal */
#toast    { z-index: 210; }    /* was 60 – under the drag ghost (220) */

/* ---------- Kachel ---------- */
/* Overlay-Masse in cqw: .dbcard ist ein inline-size-Container, genau so breit
   wie die Karte darin. Die Kopfleiste der Karte (.tcg-head) ist 22,6 cqw hoch
   (Kosten, Name, grosser Wert) - alles Overlay sitzt darunter auf der Kunst,
   nie auf Name oder Werten. */
.dbcard {
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.dbcard img { pointer-events: none; }        /* long press must not grab the image */
/* One overlay layer so updateCardTile never touches the card. Above .tcg-head (3). */
.dbcard .ov, .dbstack .ov { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.dbcard .ov button, .dbstack .ov button { pointer-events: auto; }

/* Copies: gold badge on the art, top right, carrying the real limit. */
.dbcard .have, .dbstack .have {
  position: absolute; top: calc(23.5cqw + 2px); right: 3.4cqw; z-index: 3;
  background: rgba(0,0,0,.8); color: var(--gold); font-weight: 900; font-size: max(11px, 7.5cqw); line-height: 1;
  border-radius: 7px; padding: 4px 6px; border: 1px solid rgba(212,175,55,.45);
  box-shadow: 0 1px 4px #000b;
}
.dbcard .have i, .dbstack .have i { font-style: normal; font-weight: 700; opacity: .6; }
.dbcard.maxed .have { background: var(--gold); color: #14100a; border-color: #f7e7b4; }

/* Format lock: one red chip over the art, the tile itself is greyed. */
.dbcard .k.bad {
  position: absolute; top: 44cqw; left: 50%; transform: translateX(-50%); z-index: 3;
  max-width: calc(100% - 6.8cqw); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-style: normal; font-size: max(10px, 6.5cqw); line-height: 1.3; padding: 2px 7px; border-radius: 6px;
  background: rgba(210,68,55,.92); color: #fff; font-weight: 700;
}

.dbcard.isLeader .tcg { border-color: #f0dc94; box-shadow: 0 0 0 2px rgba(240,220,148,.6), 0 0 16px rgba(212,175,55,.28); }
.dbcard .ribbon {
  position: absolute; top: calc(22.6cqw + 2px); left: 0; right: 0; z-index: 4; text-align: center;
  background: linear-gradient(90deg, #A8841F, #F0DC94, #A8841F); color: #14100a;
  font-size: max(9px, 5.8cqw); font-weight: 900; letter-spacing: .12em; padding: 2px 0;
}
.dbcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.dbcard .tbtn, .dbstack .tbtn {
  position: absolute; z-index: 5; width: 28px; height: 28px; border-radius: 9px;
  display: none; align-items: center; justify-content: center;
  background: rgba(11,14,20,.82); border: 1px solid rgba(212,175,55,.45);
  color: #f0dfa8; font-size: 16px; font-weight: 800; line-height: 1;
}
.dbcard .tbtn svg, .dbstack .tbtn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.dbcard .tbtn.minus { top: calc(23.5cqw + 2px); left: 3.4cqw; }
.dbcard .tbtn.info  { right: 3.4cqw; bottom: 3.4cqw; }
.dbcard.inDeck .tbtn.minus { display: flex; }
@media (hover: none) { .dbcard .tbtn.info { display: flex; } }

/* ---------- Rechte Seite: Inspektor (a) und Deckbereich (b) ---------- */
/* Zwei Bereiche, die für sich scrollen: #db-focus (Karte, Kopienzeile, Hinweise,
   FAQ, Hintergrund) und #db-deck (Kernstrukturen, Reiter Deck/Prüfung, Liste oder
   Stapel, Fußzeile). Bis zum 03.09.2026 stand alles in EINER Spalte: die Prüfung
   bekam 200 px und lag unter der Fußzeile, die Karte scrollte immer, gemessen bei
   1440x900. Ab 1000 px stehen beide als Spalten nebeneinander (Katalog | Karte |
   Deck), ab 1200 px wahlweise als Streifen (Deck oben, Katalog unten, Karte
   seitlich – #deckbuilder.strip), darunter im Blatt von unten. */
#db-panel { display: flex; flex-shrink: 0; min-height: 0; border-left: 1px solid var(--line); background: var(--panel); }
#db-panel > *, #db-deck > * { min-height: 0; }
#db-focus {
  width: clamp(250px, 21vw, 300px); flex: 0 0 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 10px 12px 12px; container-type: size;
}
/* Die Karte so breit wie die Spalte – oder so hoch, dass Kopienzeile, Hinweis und
   die beiden Aufklapper (FAQ, Hintergrund) ohne Scrollen darunter passen. */
.fx-card { width: min(100%, calc((100cqh - 150px) * 5 / 7)); margin: 0 auto; }
#db-deck { width: clamp(230px, 19vw, 280px); flex: 0 0 auto; display: flex; flex-direction: column; border-left: 1px solid var(--line); }
#db-deck > * { flex-shrink: 0; }
#db-deck > .dbtabbody { flex: 1 1 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.fx-card .tcg { box-shadow: 0 4cqw 12.8cqw #000b, 0 0 0 1px #0008; }
.fx-leader { margin-left: auto; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
             background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.34);
             color: #f0dfa8; border-radius: 7px; font-size: 11px; padding: 3px 8px;
             cursor: pointer; min-height: 26px; }
.fx-leader:hover { border-color: var(--gold); }
.fx-act .fx-leader { flex: 0 1 auto; margin-left: 0; padding: 3px 10px; font-weight: 700; }
.akind { display: inline-block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
         border-radius: 5px; padding: 1px 5px; margin-right: 5px; vertical-align: 1px;
         background: rgba(126,180,255,.16); color: #a8ccff; }
.akind.act { background: rgba(212,175,55,.18); color: #f0d488; }
.acost { display: inline-block; background: var(--gold); color: #14100a; font-weight: 900;
         font-size: 10px; border-radius: 5px; padding: 1px 5px; margin-right: 5px; }
.fx-copies { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 12px; }
.fx-copies b { color: var(--gold); }
.fx-copies small { color: #6d7484; font-size: 10.5px; margin-left: auto; text-align: right; }
.fx-copies button:not(.fx-leader) { width: 30px; height: 30px; border-radius: 8px; font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer;
                    background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.06));
                    border: 1px solid rgba(212,175,55,.38); color: #f0dfa8; }
.fx-copies button:not(.fx-leader):hover:not(:disabled) { border-color: var(--gold); background: rgba(212,175,55,.24); }
.fx-copies button:not(.fx-leader):disabled { opacity: .35; cursor: default; }
.fx-flag { margin-top: 9px; background: rgba(210,68,55,.18); border: 1px solid rgba(210,68,55,.5);
           color: #ff9d92; border-radius: 8px; padding: 6px 9px; font-size: 11.5px; font-weight: 700; }
.fx-note { font-size: 10.5px; color: #6d7484; margin-top: 8px; line-height: 1.4; }
.fx-lore { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line);
           font-size: 11.5px; font-style: italic; color: #6d7484; line-height: 1.55; }
details.fx-lore { font-style: normal; }
details.fx-lore summary { cursor: pointer; color: var(--gold); font-size: 13px; font-weight: 700; }
details.fx-lore summary:hover { color: #f0dfa8; }
details.fx-lore p { margin-top: 7px; font-style: italic; }
.fx-act { display: flex; gap: 7px; margin-top: 11px; }
.fx-act button { flex: 1; padding: 9px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer;
                 border: 1px solid rgba(212,175,55,.38); color: #f0dfa8;
                 background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.06)); }
.fx-act button:hover { border-color: var(--gold); background: rgba(212,175,55,.24); }
.fx-act button.primary { background: var(--gold); color: #14100a; border-color: var(--gold); font-weight: 800; }
.pickrow { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center;
           width: 100%; text-align: left; margin-bottom: 6px; padding: 6px; cursor: pointer;
           background: none; border: 1px solid var(--line); border-radius: 9px; color: var(--text); }
.pickrow:hover, .pickrow:focus-visible { border-color: var(--gold); background: rgba(212,175,55,.08); }
.pickrow .pa { position: relative; width: 34px; height: 46px; border-radius: 5px; overflow: hidden;
               background: var(--panel2); display: flex; align-items: center; justify-content: center; }
.pickrow .pa img { width: 100%; height: 100%; object-fit: cover; }
.pickrow .pn { min-width: 0; font-size: 12.5px; font-weight: 700; }
.pickrow .pn small { display: block; font-weight: 400; font-size: 10.5px; color: var(--dim);
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickrow .ph { font-size: 14px; font-weight: 900; color: var(--gold); }

/* ---------- Kernstrukturen im Deckeditor (§5) ---------- */
.dbcores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 7px 8px;
           border-bottom: 1px solid var(--line); flex-shrink: 0; }
.coreslot { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 44px;
            padding: 4px; border-radius: 8px; cursor: pointer; background: none;
            border: 1px dashed rgba(212,175,55,.32); color: var(--dim); font-size: 10.5px; line-height: 1.2; text-align: center; }
.coreslot.set { border-style: solid; border-color: rgba(212,175,55,.5); color: #f0dfa8; background: rgba(212,175,55,.08); }
.coreslot:hover, .coreslot:focus-visible { border-color: var(--gold); background: rgba(212,175,55,.14); }
.coreslot .cic { font-size: 14px; line-height: 1; }
.coreslot .cn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.coreslot .cn i { font-style: normal; font-weight: 500; }
.dbcard.isCore .tcg { border-color: #f0dc94; box-shadow: 0 0 0 2px rgba(240,220,148,.6), 0 0 16px rgba(212,175,55,.28); }
.dbstatus .s-c { color: var(--dim); font-weight: 700; white-space: nowrap; }

/* ---------- Vorlagen (die Starterdecks) ---------- */
.tplfaction { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 12px 0 6px; }
.tpl { border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; background: rgba(255,255,255,.02); }
.tpl .tplhead { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.tpl .tplbadge { font-style: normal; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
                 padding: 1px 6px; border-radius: 5px; background: rgba(212,175,55,.18); color: #f0d488; }
.tpl .tplmeta { font-size: 11.5px; color: #f0dfa8; margin-top: 3px; }
.tpl .tplcores { display: flex; flex-wrap: wrap; gap: 3px 9px; font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.tpl .tplplan { font-size: 11.5px; line-height: 1.5; color: var(--text); margin: 7px 0 0; }
.tplact { display: flex; gap: 7px; margin-top: 9px; }
.tplact button { flex: 1; padding: 8px 6px; border-radius: 9px; font-size: 12px; font-weight: 700; cursor: pointer;
                 border: 1px solid rgba(212,175,55,.38); color: #f0dfa8;
                 background: linear-gradient(180deg, rgba(212,175,55,.16), rgba(212,175,55,.06)); }
.tplact button:hover { border-color: var(--gold); background: rgba(212,175,55,.24); }
.tplact button.primary { background: var(--gold); color: #14100a; border-color: var(--gold); font-weight: 800; }
/* Gespeicherte Decks: wo eins lebt (Konto / nur dieser Browser) und welches offen ist */
.tpl .tplbadge.local { background: rgba(255,255,255,.07); color: var(--dim); }
.tpl .tplbadge.open { background: rgba(79,143,247,.18); color: #9dc0ff; }
.tpl.saved.open { border-color: rgba(212,175,55,.45); }
.setdecks { font-size: 12.5px; line-height: 1.5; color: var(--dim); margin: -2px 0 10px; }
.tpllist { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11px; color: var(--dim);
           columns: 2; column-gap: 10px; line-height: 1.45; }
.tpllist div { break-inside: avoid; }
.tpllist i { font-style: normal; color: #6d7484; }

/* ---------- Reiter, Deckliste, Stapel, Fußzeile ---------- */
.dbtabrow { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); container-type: inline-size; }
.dbtabs { display: flex; flex: 1 1 auto; min-width: 0; }
.dbtab { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap;
         color: var(--dim); font-size: 12px; padding: 9px 4px; cursor: pointer; }
.dbtab.on { color: #f0dfa8; border-bottom-color: var(--gold); }
.dbtab.tcard { display: none; }                 /* nur das Telefon hat den Karten-Reiter („card" ist die Brettkarte) */
.dbtabs .dot.ok { color: #7fd6a4; } .dbtabs .dot.bad { color: #ffbdb4; }
#db-list { padding: 6px 8px; }
#db-valid { border-top: none; }
.dbrow .dx { color: #6d7484; font-size: 15px; line-height: 1; padding: 0 2px; }
.dbrow:hover .dx { color: #ff9d92; }
.dbhits { font-size: 11.5px; color: var(--dim); margin-left: auto; }
.dbstatus { display: flex; gap: 10px; align-items: center; width: 100%; cursor: pointer;
            padding: 11px 12px; border: none; border-top: 1px solid var(--line);
            background: var(--panel2); color: var(--text); font-size: 12px; font-weight: 700; }
.dbstatus .s-n { color: var(--gold); font-weight: 900; }
.dbstatus .s-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--dim); font-weight: 600; }
.dbstatus.valid .s-v { color: #7fd6a4; }
.dbstatus.invalid .s-v { color: #ffbdb4; }

/* Segmentknöpfe: Liste|Karten im Deckbereich, Spalten|Oben/Unten im Kopf. */
.seg { display: inline-flex; flex: 0 0 auto; align-self: center; overflow: hidden;
       border: 1px solid rgba(212,175,55,.3); border-radius: 9px; background: var(--panel2); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0;
              background: none; color: var(--dim); font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.seg button + button { border-left: 1px solid rgba(212,175,55,.2); }
.seg button:hover { color: var(--text); }
.seg button.on { background: rgba(212,175,55,.18); color: #f0dfa8; }
.seg svg { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#db-layout { display: none; }                   /* die Anordnung gibt es erst ab 1200 px */
.dbview { margin: 0 6px; }
.dbview button { height: 26px; padding: 0 7px; }
@container (max-width: 300px) { .dbview .lbl { display: none; } }   /* schmale Deckspalte: nur die Symbole */

/* Deck als Kartenstapel: je Karte ein Stapel, die Kopien um 6 px versetzt, die
   vorderste trägt den Kopienstand. Dieselbe Karte wie im Katalog (fullCardHTML);
   .cp ist ein inline-size-Container, damit Badge und Knöpfe in cqw sitzen. */
#db-stacks { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--stcol, 96px), 1fr));
             gap: 6px; padding: 8px; align-content: start; }
.dbstack { position: relative; --fan: 6px; cursor: pointer; border-radius: 8px;
           -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.dbstack::before { content: ""; display: block; padding-top: calc((100% - 2 * var(--fan)) * 7 / 5 + 2 * var(--fan)); }
.dbstack .cp { position: absolute; left: calc(var(--i) * var(--fan)); top: calc(var(--i) * var(--fan));
               width: calc(100% - 2 * var(--fan)); container-type: inline-size; }
.dbstack .cp .tcg { box-shadow: 0 2px 6px #000c, 0 0 0 1px #0008; }
.dbstack .cp:not(.top) .tcg-lower, .dbstack .cp:not(.top) .tcg-art { visibility: hidden; }   /* hinten nur der Rahmen: ruhiger und billiger */
.dbstack img { pointer-events: none; }
.dbstack:hover .cp.top .tcg, .dbstack:focus-visible .cp.top .tcg { border-color: var(--gold); }
.dbstack:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dbstack.illegal .cp { opacity: .55; filter: grayscale(.6); }
.dbstack.over .have { background: rgba(210,68,55,.92); color: #fff; border-color: #ffb4aa; }
.dbstack .tbtn.minus { left: 3.4cqw; bottom: 3.4cqw; }
.dbstack .tbtn.plus  { right: 3.4cqw; bottom: 3.4cqw; }
.dbstack .tbtn:disabled { opacity: .35; cursor: default; }
.dbstack:hover .tbtn, .dbstack:focus-within .tbtn { display: flex; }
@media (hover: none) { .dbstack .tbtn.minus { display: flex; } }
.dbstack.unknown { border: 1px dashed rgba(210,68,55,.5); }
.dbstack.unknown .dbempty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4px; }

/* ---------- Ab 1200 px wahlweise: das Deck als Streifen oben (OPTCGSim-Art) ---------- */
/* .rsheet wird ein Raster; .dbbody und #db-panel lösen sich auf (display: contents),
   damit Kopf, Streifen, Filter, Katalog und Karte direkt darin liegen. */
@media (min-width: 1200px) {
  #db-layout { display: inline-flex; }
  #deckbuilder.strip .rsheet {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 21vw, 300px);
    grid-template-rows: auto auto auto minmax(0, 1fr);
    grid-template-areas: "head head" "deck focus" "filters focus" "grid focus";
  }
  #deckbuilder.strip .dbbody, #deckbuilder.strip #db-panel { display: contents; }
  #deckbuilder.strip .dbhead { grid-area: head; }
  #deckbuilder.strip .dbfilters { grid-area: filters; }
  #deckbuilder.strip #db-grid { grid-area: grid; --libw: clamp(120px, 9.6vw, 160px); }
  #deckbuilder.strip #db-focus { grid-area: focus; width: auto; border-left: 1px solid var(--line); background: var(--panel); }
  #deckbuilder.strip #db-deck {
    grid-area: deck; width: auto; height: clamp(200px, 34dvh, 320px); border-left: none; border-bottom: 1px solid var(--line);
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr);
  }
  #deckbuilder.strip .dbtabrow { grid-column: 1; grid-row: 1; container-type: normal; border-bottom: none; }
  #deckbuilder.strip #db-cores { grid-column: 2 / 4; grid-row: 1; align-self: stretch; display: flex; align-items: center; gap: 6px;
                                 padding: 4px 10px; border-bottom: none; border-left: 1px solid var(--line); }
  #deckbuilder.strip .coreslot { flex: 0 1 190px; flex-direction: row; min-height: 30px; padding: 3px 9px; gap: 6px; }
  #deckbuilder.strip #db-status { grid-column: 4; grid-row: 1; width: auto; align-self: stretch; border-top: none; border-left: 1px solid var(--line); background: none; }
  #deckbuilder.strip #db-deck > .dbtabbody { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
  #deckbuilder.strip #db-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 10px; align-content: start; }
  #deckbuilder.strip #db-stacks { --stcol: 84px; }
  #deckbuilder.strip #db-check { display: flex; gap: 18px; align-items: flex-start; padding-right: 12px; }
  #deckbuilder.strip #db-curve { flex: 0 0 300px; }
  #deckbuilder.strip #db-valid { flex: 1 1 auto; min-width: 0; }
  #deckbuilder.strip #db-valid ul { columns: 2; column-gap: 24px; }
  #deckbuilder.strip #db-valid li { break-inside: avoid; }
}
/* Der Kopf: bis 1499 px ohne Titel, bis 1399 px der Umschalter nur mit Symbolen –
   sonst wäre bei 1200–1280 px eine zweite Kopfzeile fällig (44 px, gemessen). */
@media (min-width: 1200px) and (max-width: 1499px) { .dbhead h2 { display: none; } }
@media (min-width: 1200px) and (max-width: 1399px) { #db-layout .lbl { display: none; } }

/* ---------- Unter 1000 px: das Blatt von unten ---------- */
/* Tablet (721–999 px): Griff, Karte (so hoch wie sie ist), darunter der Deckbereich
   mit garantierter Mindesthöhe. Der Deckbereich löst sich dafür in das Blatt auf. */
.dbbody { position: relative; }     /* anchor: .rsheet is overflow:hidden, so absolute is safe */
@media (max-width: 999px) {         /* same threshold as dbWide() in app.js */
  #db-panel {
    position: absolute; left: 0; right: 0; bottom: 0; width: auto; z-index: 6; flex-direction: column;
    height: min(90%, 900px); border-left: none; border-top: 1px solid rgba(212,175,55,.3);
    border-radius: 16px 16px 0 0; box-shadow: 0 -12px 34px #000a;
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(calc(100% - 46px)); transition: transform .22s ease;
  }
  #db-panel.open { transform: translateY(0); }
  #db-deck { display: contents; }
  .dbstatus { order: -4; flex-shrink: 0; border-top: none; border-bottom: 1px solid var(--line);
              border-radius: 16px 16px 0 0; height: 46px; }
  .dbstatus::after { content: "▲"; font-size: 9px; color: var(--dim); }
  #db-panel.open .dbstatus::after { content: "▼"; }
  #db-focus { order: -3; width: auto; flex: 0 1 auto; container-type: normal; border-bottom: 1px solid var(--line);
              display: flex; flex-direction: column; }
  #db-focus > * { flex-shrink: 0; }
  /* Die +/−-Zeile (oder die Herrscherknöpfe) zuerst, die Karte darunter. */
  .fx-copies, .fx-act { order: -1; margin: 0 0 10px; }
  .fx-card { width: min(100%, 250px); }
  #db-cores { order: -2; }
  .dbtabrow { order: -1; }
  #db-deck > .dbtabbody { order: 0; flex: 1 1 0; min-height: 180px; }
  #db-grid { padding-bottom: 58px; }
}
/* Tablet: die Prüfung nebeneinander (Kurve | Befunde in zwei Spalten), damit auch
   acht Befunde in die 180 px des Deckbereichs passen, ohne zu scrollen. */
@media (min-width: 721px) and (max-width: 999px) {
  #db-check { display: flex; gap: 18px; align-items: flex-start; padding-right: 12px; }
  #db-curve { flex: 0 0 300px; }
  #db-valid { flex: 1 1 auto; min-width: 0; }
  #db-valid ul { columns: 2; column-gap: 24px; }
  #db-valid li { break-inside: avoid; }
}
/* Telefon: drei Reiter – Karte | Deck | Prüfung. Die Karte füllt das Blatt allein,
   der Deckbereich (Kernstrukturen, Liste/Stapel, Prüfung) ebenso. */
@media (max-width: 720px) {
  #db-panel { height: min(86%, 620px); }
  .dbtab.tcard { display: block; }
  #db-focus { order: 0; flex: 1 1 0; border-bottom: none; }
  #db-deck > .dbtabbody { order: 1; min-height: 0; }
  #db-panel:not([data-tab="card"]) #db-focus { display: none; }
  #db-panel[data-tab="card"] #db-cores, #db-panel[data-tab="card"] .dbtabbody { display: none; }
  .fx-card { width: min(100%, 300px); }
}
@media (max-width: 720px) {
  #deckbuilder { padding: 0; }  /* 100dvh sheet was clipped 14px top+bottom */
  /* Two columns that use the whole width: 152 px (library, 14 px sheet + 14 px grid
     padding) and 168 px (editor, 12 px grid padding) on a 375-px phone. */
  #lgrid  { --libw: calc((100vw - 70px) / 2); }     /* sheet border 2 px + 2 px slack */
  #db-grid { --libw: calc((100vw - 38px) / 2); }
}

/* ---------- Phone: compact sheet heads ----------
   Library head took 44 % and deck editor head 33 % of a 390x844 screen, the
   close buttons were 14x19 px. Two-column selects, one search row, 36 px ✕. */
@media (max-width: 720px) {
  #library .rhead, .dbhead, .dbfilters { padding: 8px 10px; gap: 6px; }
  #library .rhead h2 { display: block; flex: 0 1 auto; font-size: 14px; }
  #library #lsearch { order: 2; flex: 1 1 100%; padding: 8px 10px; font-size: 13px; }
  /* Six selects in a 2x3 grid ate a third of the screen; now one row that scrolls sideways. */
  .lfilters, .dbsel { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; flex: 1 1 100%; order: 3; min-width: 0; }
  .lfilters::-webkit-scrollbar, .dbsel::-webkit-scrollbar { display: none; }
  #library .lfilters select, .dbsel select { flex: 0 0 auto; width: auto; min-width: max-content; font-size: 12px; padding: 6px 6px; }
  #lcount { order: 0; flex: 0 0 auto; margin-left: auto; font-size: 11.5px; }
  #library-close, #deckbuilder-close { order: 1; width: 36px; height: 36px; }
  .dbhead h2 { display: none; }
  .dbhead #db-name { flex: 1 1 100px; min-width: 0; font-size: 13px; padding: 7px 9px; }
  .dbhead select { flex: 1 1 90px; min-width: 0; font-size: 12px; padding: 6px 6px; }
  .dbhead #db-format { flex: 0 1 120px; }
  .dbhead #deckbuilder-close { order: -1; }
  .dbfilters #db-search { flex: 1 1 120px; min-width: 0; font-size: 13px; padding: 7px 10px; }
  .dbonly { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { #db-panel { transition: none; } }

/* ==================== Konto, Einstellungen, Einladen, Chat-Anhänge (03.09.2026) ==================== */
/* „Anmelden" ist die einzige goldene Kachel in der Werkzeugzeile – ein Gast soll sie finden. */
.util.login { color: #17130a; border-color: rgba(255,236,180,.55); background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F); }
.util.login b { color: #17130a; }
.util.login span { filter: none; }
.util.login:hover { border-color: #fff2c4; color: #17130a; }

.acctperks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acctperks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--text); }
.acctperks li span { flex: 0 0 22px; text-align: center; font-size: 16px; }
.setbtns button.primary, .frguest button.primary {
  color: #17130a; border-color: rgba(255,236,180,.5); font-weight: 800;
  background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F);
}
.setbtns button:disabled { opacity: .55; cursor: default; }
.setbtns.row { flex-direction: row; }
.setbtns.row button { flex: 1 1 0; min-width: 0; }

/* Einstellungen: Abschnitte, scrollbar auf kleinen Displays */
.setsheet { max-height: 92vh; display: flex; flex-direction: column; }
.setscroll { overflow-y: auto; min-height: 0; margin: 0 -6px 12px; padding: 0 6px; }
.setsec { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: #8b8467; margin: 6px 0 10px; }
.setsec + .setsec, .setcheck + .setsec, .setrow + .setsec, .setbtns + .setsec, .setcard + .setsec { margin-top: 16px; }
.setcard { background: rgba(11,14,20,.55); border: 1px solid rgba(212,175,55,.16); border-radius: 11px; padding: 12px; margin-bottom: 14px; }
.setcard p { font-size: 13px; line-height: 1.5; color: var(--dim); margin-bottom: 10px; }
.setcard .setrow { margin-bottom: 8px; }
.setcard .acctrow { padding: 8px 0 10px; }
.setcard button { width: 100%; background: var(--panel2); border: 1px solid var(--line); border-radius: 9px; color: var(--text); padding: 10px; cursor: pointer; font-size: 13.5px; }
.setcard button.danger { border-color: var(--red); color: #ff9d92; }
.setcard button.primary { color: #17130a; border-color: rgba(255,236,180,.5); font-weight: 800; background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F); }
.setinline { display: flex; gap: 8px; }
.setinline input { flex: 1; min-width: 0; }
.setinline button { width: auto !important; padding: 0 14px !important; white-space: nowrap; font-weight: 700; }
.setrow small { font-size: 11.5px; line-height: 1.4; color: #7d8494; }
.setcheck { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 13.5px; color: var(--text); cursor: pointer; border-top: 1px solid rgba(212,175,55,.08); }
.setcheck:first-of-type { border-top: 0; }
.setcheck input { margin-top: 3px; accent-color: var(--gold); width: 16px; height: 16px; flex: 0 0 auto; }
.setcheck span { display: flex; flex-direction: column; gap: 2px; }
.setcheck small { font-size: 11.5px; color: var(--dim); line-height: 1.4; }

/* Schalter aus den Einstellungen */
body.nohints #hint { display: none !important; }
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after {
  animation-duration: .001s !important; animation-iteration-count: 1 !important;
  transition-duration: .001s !important; scroll-behavior: auto !important;
}

/* Freunde: Einladen */
#fr-invite .lbl { white-space: nowrap; }
.invitebox { display: flex; gap: 16px; align-items: center; margin: 12px 0 6px; padding: 14px;
             background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.28); border-radius: 13px; }
.invqr { flex: 0 0 auto; width: 148px; height: 148px; background: #fff; border-radius: 10px; padding: 6px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 11px; text-align: center; }
.invqr svg { width: 100%; height: 100%; display: block; }
.invtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.invtext b { color: var(--gold); font-size: 14px; }
.invtext p { font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.invtext code { display: block; font-size: 11.5px; color: var(--text); background: rgba(0,0,0,.35); border-radius: 7px; padding: 6px 8px; word-break: break-all; }
.invbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.invbtns button { padding: 8px 12px; border-radius: 9px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #b8ae95; background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.2); }
.invbtns button.ok { color: #17130a; border-color: rgba(255,236,180,.5); background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F); }
@media (max-width: 520px) {
  .invitebox { flex-direction: column; }
  .invqr { width: 180px; height: 180px; }
  .invtext { width: 100%; text-align: center; }
  .invbtns { justify-content: center; }
}

/* Freundeszeilen: antippbar, ungelesen */
.frrow.tap { cursor: pointer; }
.frrow.tap:hover { border-color: rgba(212,175,55,.45); }
.frrow.unread { border-color: rgba(79,143,247,.55); box-shadow: inset 3px 0 0 #4f8ff7; }
.frnew { color: #8fb4ff; font-style: normal; font-weight: 700; }
.fracts button.muted { opacity: .7; }
.fracts button.muted:hover { opacity: 1; }
@media (max-width: 520px) {
  .frrow { flex-wrap: wrap; }
  .fracts { width: 100%; justify-content: flex-end; }
}

/* Chat: Deck- und Duellkarten, Deckauswahl */
.chatmsg .chatdeck { display: flex; flex-direction: column; gap: 4px; min-width: 200px; }
.chatdeck b { color: var(--gold); }
.chatdeck small { color: var(--dim); font-size: .78rem; }
.chatdeck button { margin-top: 6px; align-self: flex-start; padding: 6px 12px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer;
                   color: #17130a; border: 1px solid rgba(255,236,180,.5); background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F); }
#chat-deck { background: none; border: 1px solid #2b3245; border-radius: 10px; font-size: 1.1rem; padding: 0 .55rem; cursor: pointer; }
#chat-deck:hover { border-color: rgba(212,175,55,.6); }
.chatpick { border-top: 1px solid #232a3a; padding: 4px 12px 10px; max-height: 40%; overflow-y: auto; background: #10141e; }
.chatpick button { display: flex; flex-direction: column; width: 100%; text-align: left; gap: 2px; margin-bottom: 6px; padding: 8px 11px;
                   border-radius: 9px; cursor: pointer; color: var(--text); background: rgba(11,14,20,.6); border: 1px solid rgba(212,175,55,.18); }
.chatpick button:hover { border-color: rgba(212,175,55,.6); }
.chatpick button small { color: var(--dim); font-size: 11.5px; }
.chatsheet .rhead h2 { display: block; }          /* die Telefonregel blendet Blatt-Titel aus – der Chatpartner muss stehen */
.hbtn .ic { font-size: 15px; line-height: 1; }

/* Einstellungen am Desktop: zwei Spalten, alles auf einen Blick, kein Scrollen.
   Konto und Daten links, Spiel rechts; am Telefon bleibt die Reihenfolge Konto, Spiel, Daten. */
.setblock .setsec:first-child { margin-top: 0; }
@media (min-width: 900px) {
  #settings .sheet.setsheet { max-width: 880px; }
  .setscroll { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "konto spiel" "daten spiel"; column-gap: 32px; row-gap: 18px; align-content: start; }
  .sb-konto { grid-area: konto; }
  .sb-spiel { grid-area: spiel; }
  .sb-daten { grid-area: daten; }
  .setblock .setsec { margin-top: 0; }
  .sb-konto .setcard { margin-bottom: 0; }
}

/* ==================== Deckwahl beim Spielstart (03.09.2026) ==================== */
/* Fraktion → Deck → Banner: eigene Decks und Vorlagen der Fraktion als Karten mit
   Herrscher und den drei Kernstrukturen; nur spielbereite sind wählbar. Die Liste
   scrollt für sich, damit Zurück und Weiter auch auf dem Telefon erreichbar bleiben. */
.deckpick { max-width: 780px; margin: 0 auto; text-align: left; max-height: min(56dvh, 620px); overflow-y: auto;
            padding: 2px 4px; -webkit-overflow-scrolling: touch; }
.dpsec { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #8d95a6; margin: 10px 0 7px; }
.dplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.dpempty { grid-column: 1 / -1; color: var(--dim); font-size: 12.5px; line-height: 1.5; padding: 8px 2px; }
.dpcard { display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; padding: 11px 13px;
          border-radius: 14px; color: var(--text); border: 1px solid rgba(212,175,55,.22);
          background: linear-gradient(180deg, rgba(32,38,52,.72), rgba(11,14,20,.88));
          box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.4);
          transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dpcard:hover, .dpcard:focus-visible { transform: translateY(-2px); border-color: rgba(212,175,55,.65); outline: none; }
.dpcard.on { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212,175,55,.35), 0 10px 24px rgba(0,0,0,.4); }
.dpcard.off { opacity: .55; cursor: not-allowed; }
.dpcard.off:hover { transform: none; border-color: rgba(212,175,55,.22); }
.dphead { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 14px; }
.dpmeta { color: #f0dfa8; font-size: 12px; }
.dpcores { display: flex; flex-wrap: wrap; gap: 3px 10px; font-size: 11px; color: var(--dim); }
.dpcores .miss { color: #ffbdb4; }
.dpplan { font-size: 11.5px; line-height: 1.45; color: var(--dim); }
.dpwhy { font-size: 11.5px; line-height: 1.4; color: #ffbdb4; }
.dpact { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin-top: 4px; }
.dpact .ghost { margin-top: 18px; }
.dpgo { margin-top: 18px; padding: 11px 22px; border-radius: 11px; cursor: pointer; font-weight: 800; letter-spacing: .04em;
        color: #17130a; border: 1px solid rgba(255,236,180,.55);
        background: linear-gradient(180deg, #F0DC94, #D4AF37 55%, #A8841F); font-size: 14px; }
.dpgo:hover { filter: brightness(1.06); }
.dpgo:disabled { opacity: .45; cursor: default; filter: none; }
.deckline { color: #f0dfa8; font-size: 12.5px; margin: -8px 0 14px; }
.deckline b { color: #ffe6a6; }
.cdeck { color: var(--dim); font-size: 12.5px; margin-top: 10px; }
.cdeck b { color: #ffe6a6; }
@media (max-width: 720px) {
  .deckpick { max-height: min(52dvh, 560px); }
  .dplist { grid-template-columns: 1fr; }
}

/* ---------- Feedback 04.09.2026: Nachzieh-Bonus, Herrscher-Ziel, Tutorial-Hinweis, Bot-Stärke ---------- */
#hand .card.mull { opacity: 1; box-shadow: 0 0 0 2px var(--green), 0 0 18px rgba(55,160,107,.8); animation: pulse-green 1.2s infinite; }
#hint .hintbtn {
  font: inherit; font-size: 11.5px; font-weight: 800; margin-left: 8px; padding: 3px 10px; border-radius: 8px;
  border: 1px solid rgba(212,175,55,.5); background: rgba(0,0,0,.3); color: #ffd97a; cursor: pointer; vertical-align: middle;
}
#hint .hintbtn.gold { background: var(--gold); color: #14100a; border-color: var(--gold); }
#foe-half { position: relative; }
#ruler-target {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 12px 24px; min-width: min(520px, 70%);
  border-radius: 18px; background: rgba(92,16,12,.94); border: 3px solid var(--red); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 4px rgba(210,68,55,.3), 0 0 44px rgba(210,68,55,.85); animation: pulse-red 1.1s infinite;
}
#ruler-target.dragover { border-color: #ffe6a6; box-shadow: 0 0 0 4px #ffe6a6, 0 0 52px rgba(212,175,55,.95); animation: none; }
#ruler-target .rt-portrait { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 2px solid #ffd0c8; background: #2a0906; display: flex; align-items: center; justify-content: center; font-size: 30px; flex: 0 0 auto; }
#ruler-target .rt-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
#ruler-target .rt-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ruler-target .rt-text b { font-size: 19px; letter-spacing: .01em; }
#ruler-target .rt-text span { font-size: 13px; color: #ffd6d0; }
@media (max-width: 720px) {
  #ruler-target { padding: 8px 14px; gap: 10px; min-width: 78%; }
  #ruler-target .rt-portrait { width: 44px; height: 44px; }
  #ruler-target .rt-text b { font-size: 15px; }
}
.ttodo { background: var(--gold); color: #14100a; font-weight: 800; border-radius: 8px; padding: 4px 10px; font-size: 12.5px; }
#actions button.pulse { animation: pulse-gold 1.2s infinite; }
.fx-kw { margin-top: 10px; font-size: 12px; color: var(--dim); display: flex; flex-direction: column; gap: 5px; line-height: 1.35; }
.fx-kw b { color: #e8d9a8; margin-right: 4px; }
.fx-kw .fx-combat { margin-top: 4px; }
.fx-kw .fx-combat summary { cursor: pointer; color: #e8d9a8; font-weight: 700; }
.fx-kw .fx-combat div { margin-top: 4px; }
.levels { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
.levels .lvl-label { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.levels button {
  font: inherit; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 7px 14px; min-width: 96px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); color: var(--text); cursor: pointer; font-weight: 800; font-size: 13px;
}
.levels button em { font-style: normal; font-weight: 500; font-size: 10.5px; color: var(--dim); }
.levels button.on { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212,175,55,.5), 0 0 14px rgba(212,175,55,.3); color: #ffd97a; }

/* Ereignis neben dem Terrain + Protokoll kopieren (04.09.2026) */
#terrain .evwrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#terrain .evwrap .card.event { box-shadow: 0 0 0 2px rgba(212,175,55,.7), 0 0 16px rgba(212,175,55,.5); }
#terrain .evcap { font-size: 9px; color: #ffd97a; white-space: nowrap; letter-spacing: .02em; }
.logcopy {
  font: inherit; font-size: 11px; font-weight: 700; float: right; padding: 2px 8px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel2); color: var(--dim);
}
.logcopy:hover { color: var(--text); border-color: var(--gold); }

/* Gegnerzug-Erzählung + Zielwahl in der Hand (04.09.2026) */
main#board { position: relative; }
#botturn {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); z-index: 45;
  min-width: min(360px, 90%); max-width: min(560px, 92%); padding: 14px 20px 10px; cursor: pointer;
  background: rgba(10,12,18,.95); border: 1px solid var(--gold); border-radius: 14px; box-shadow: 0 12px 40px #000d;
}
#botturn .bt-head { font-weight: 800; color: #ffd97a; margin-bottom: 8px; font-size: 14px; }
#botturn ul { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 13px; line-height: 1.35; }
#botturn li { animation: brandRise .3s cubic-bezier(.2,.75,.25,1) both; }
#botturn .bt-skip { margin-top: 9px; font-size: 10.5px; color: var(--dim); text-align: right; }
#hand .card.targetable { opacity: 1; transform: translateY(-12px); z-index: 24; }

/* Effektschicht (04.09.2026): gezogene Karten, Schadenszahlen, Ressourcenpuls */
#hand .card.drawn { animation: cardDraw .55s cubic-bezier(.2,.75,.25,1) both; }
/* Der Endzustand nennt bewusst keine Deckkraft: mit fill-mode „both" blieb eine gezogene,
   aber unspielbare Karte sonst hell (Tester, 04.09.2026). */
@keyframes cardDraw {
  from { opacity: 0; transform: translate(60px, 30px) scale(.6) rotate(6deg); box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(212,175,55,.9); }
  60% { transform: translate(0, -8px) scale(1.04); box-shadow: 0 0 0 2px var(--gold), 0 0 24px rgba(212,175,55,.9); }
  to { transform: none; }
}
.floatnum {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 60; pointer-events: none;
  font-weight: 900; font-size: 22px; color: #fff; text-shadow: 0 2px 6px #000, 0 0 14px rgba(0,0,0,.8);
  animation: floatUp 1.3s ease-out both;
}
.floatnum.hurt { color: #ff6b5c; }
.floatnum.heal { color: #7fdc9a; }
.plate .floatnum { top: -4px; left: auto; right: -6px; transform: none; font-size: 18px; }
@keyframes floatUp { from { opacity: 0; transform: translate(-50%, -30%) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } to { opacity: 0; transform: translate(-50%, -140%) scale(1); } }
.plate .hp.shake { animation: shake .6s; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
.plate .respips.pulse i.full { animation: pipPulse .9s ease-out; }
@keyframes pipPulse { 30% { transform: rotate(45deg) scale(1.35); box-shadow: 0 0 14px rgba(212,175,55,1); } }

/* Blick mit Wahl: „nimm 1 auf die Hand" (04.09.2026) */
.rvcards .rvpick { position: relative; cursor: pointer; flex: 1 1 0; min-width: 0; max-width: 150px; border-radius: 12px; transition: transform .15s; }
.rvcards .rvpick .tcgwrap { max-width: none; }
.rvcards .rvpick:hover { transform: translateY(-6px); }
.rvcards .rvpick .rvtake {
  display: block; margin-top: 6px; text-align: center; font-size: 11.5px; font-weight: 800; color: #14100a;
  background: var(--gold); border-radius: 8px; padding: 4px 6px; box-shadow: 0 0 12px rgba(212,175,55,.6);
}
.rvsheet.picking .rvcards .rvpick .tcg { box-shadow: 0 0 0 2px var(--gold), 0 0 18px rgba(212,175,55,.7); }

/* Mehrfachziel: gewählte Ziele (04.09.2026) */
.card.picked, .core.picked { box-shadow: 0 0 0 3px var(--gold), 0 0 22px rgba(212,175,55,.9) !important; animation: none !important; }
.card.picked::after { content: "✔"; position: absolute; top: 4px; left: 4px; background: var(--gold); color: #14100a; font-weight: 900; font-size: 12px; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; z-index: 5; }

/* Rechtliches (04.09.2026) */
.home .legal { margin-top: 6px; font-size: 11px; color: var(--dim); }
.home .legal a { color: var(--dim); text-decoration: underline; text-underline-offset: 2px; }
.home .legal a:hover { color: var(--text); }

/* Rest-Verteidigung deutlicher + Lupe beim Hovern (04.09.2026) */
.card .def { font-weight: 900; font-size: 1.12em; }
.card .def small { font-size: .7em; font-weight: 600; opacity: .8; margin-left: 1px; }
.card .def.crit { color: #ff5c4a; }
#lens {
  position: fixed; z-index: 70; pointer-events: none; min-width: 150px; max-width: 240px;
  background: rgba(10,12,18,.96); border: 1px solid var(--gold); border-radius: 12px; padding: 9px 12px;
  box-shadow: 0 10px 30px #000c; font-size: 12px; color: var(--text);
}
#lens .ln { font-weight: 800; font-size: 13px; margin-bottom: 6px; color: #ffd97a; }
#lens .lv { display: flex; gap: 12px; align-items: baseline; margin-bottom: 4px; }
#lens .lv span { font-size: 24px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
#lens .lv span i { display: block; font-style: normal; font-size: 9px; letter-spacing: .1em; color: var(--dim); font-weight: 700; margin-bottom: 2px; }
#lens .lv span small { font-size: 12px; font-weight: 600; opacity: .8; }
#lens .lv .atk { color: #ffd97a; } #lens .lv .def { color: #cfe2f7; } #lens .lv .def.hurt { color: #ff8d80; } #lens .lv .def.crit { color: #ff5c4a; } #lens .lv .ini { color: #9aa3b5; }
#lens .ld { color: #ff8d80; font-size: 11.5px; margin-bottom: 3px; }
#lens .lk { color: var(--dim); font-size: 11px; margin-bottom: 3px; }
#lens .ls { color: var(--dim); font-size: 11px; }

/* Gegnervolk-Auswahl (04.09.2026) */
.levels.foes { margin-top: -6px; }
.levels.foes button { min-width: 0; padding: 6px 12px; font-size: 12.5px; flex-direction: row; gap: 5px; }
.levels.foes button:disabled, .levels.foes button.own { opacity: .35; cursor: not-allowed; }

/* Ablage durchsuchen + eigenes verdecktes Komplott (04.09.2026) */
.rvsheet.wide { width: min(960px, 96vw); }
.rvcards.rvgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; max-height: 62vh; overflow-y: auto; padding: 2px; justify-content: start; }
.rvcards.rvgrid .gvtile { cursor: pointer; }
.rvcards.rvgrid .gvtile .tcgwrap { max-width: none; }
.rvcards.rvgrid .gvtile:hover { transform: translateY(-3px); }
.card.facedown-own::before { content: "verdeckt"; position: absolute; top: 2px; left: 2px; z-index: 4; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #000c; color: #d8c8ff; border: 1px solid #6a5acd; border-radius: 4px; padding: 1px 4px; }

/* Gottheit im Feld: goldener Schein, damit sie neben den Kernen auffällt (04.09.2026) */
.card.deity { box-shadow: 0 0 0 2px rgba(212,175,55,.75), 0 0 18px rgba(212,175,55,.55); }

/* Initiative so sichtbar wie die Verteidigung (04.09.2026) */
.tcg-stats b.ini { color: #ffd97a; }
.card .ini { color: #ffd97a; font-weight: 900; }

/* Kartengerüst v2 (04.09.2026): ANG + VER im Kopf, Initiative gross im Fuss, lange Texte kleiner */
.tcg-big { flex-direction: row; align-items: flex-end; gap: 2.4cqw; }
.tcg-big .v { display: flex; flex-direction: column; align-items: center; line-height: .92; }
.tcg-big .v.atk { color: #ffd97a; }
.tcg-big .v.def { color: #cfe2f7; font-size: 11.5cqw; }
.tcg-big .v.hp { color: #fff8e6; }
.tcg-big .v i { font-size: 3.1cqw; letter-spacing: .14em; margin-top: .6cqw; color: #9aa0ae; }
.tcg-big .v.atk i { color: #d4af37; }
.tcg-big .v.def i { color: #7fa6cc; }
.tcg-stats { display: flex; align-items: center; gap: 3cqw; }
.tcg-stats b.ini-big, .tcg-stats b.rng {
  display: inline-flex; align-items: baseline; gap: 1.2cqw; font-size: 7.2cqw; font-weight: 900; line-height: 1;
  color: #ffd97a; background: rgba(212,175,55,.12); border: 1px solid rgba(212,175,55,.45); border-radius: 2cqw; padding: 1cqw 2.4cqw;
}
.tcg-stats b.rng { color: #cfe2f7; background: rgba(127,166,204,.12); border-color: rgba(127,166,204,.45); font-size: 5.4cqw; }
.tcg-stats b i { font-style: normal; font-size: 2.8cqw; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #b9a15a; }
.tcg-stats b.rng i { color: #7fa6cc; }
.tcg-box.long { font-size: 3.55cqw; line-height: 1.36; padding: 2cqw 2.6cqw; }
.tcg-box.xlong { font-size: 3.2cqw; line-height: 1.3; padding: 1.8cqw 2.4cqw; }
.tcg-box.long .abil + .abil, .tcg-box.xlong .abil + .abil { margin-top: .6cqw; }

/* Rahmen C (04.09.2026): Initiative-Plakette im Kopf (silber), ANG/VER in den unteren Ecken mit Beschriftung */
.tcg-big .v.ini {
  font-size: 9.6cqw; color: #e9edf3; background: linear-gradient(180deg, #4a5262, #232935); border: max(1px, .5cqw) solid #aeb6c4;
  border-radius: 2.4cqw; padding: 1.2cqw 2.4cqw .9cqw; box-shadow: 0 .7cqw 2.4cqw #0009, inset 0 1px 0 #ffffff33; text-shadow: 0 1px 2px #000;
}
.tcg-big .v.ini i { color: #c9d1dc; font-size: 2.9cqw; letter-spacing: .18em; margin-top: .5cqw; }
.tcg-foot.unit { align-items: flex-end; padding-top: 1.4cqw; }
.tcg-foot.unit .tcg-id { align-self: center; }
.tcg-stats.right { justify-content: flex-end; }
.tcg-stats b.corner {
  display: inline-flex; align-items: baseline; gap: 1.2cqw; font-size: 9.6cqw; font-weight: 900; line-height: 1;
  background: none; border: none; padding: 0; text-shadow: 0 .7cqw 2.7cqw #000, 0 0 2px #000;
}
.tcg-stats b.corner.atk { color: #ffd97a; }
.tcg-stats b.corner.def { color: #cfe2f7; }
.tcg-stats b.corner.rng { color: #cfe2f7; font-size: 5.6cqw; margin-left: 2.4cqw; }
.tcg-stats b.corner i { font-style: normal; font-size: 2.9cqw; letter-spacing: .16em; font-weight: 800; color: #b9a15a; }
.tcg-stats b.corner.def i, .tcg-stats b.corner.rng i { color: #7fa6cc; }

/* Namen brechen um statt abzuschneiden – neben der Initiative-Plakette wurde „Periöken-Bogenschütze" zu „Periöken-Bogens…" */
.tcg-title b { white-space: normal; font-size: 5.1cqw; line-height: 1.06; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Konto- und Einstellungsblatt: auf dem Telefon scrollbar, der gelbe Knopf unten bleibt erreichbar
   (iPhone 15 Pro, 04.09.2026) */
#account .sheet, #settings .sheet { max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
@media (max-width: 720px) { #account, #settings { align-items: flex-start; padding: 12px 10px calc(12px + env(safe-area-inset-bottom)); } }

/* Telefon: die neuen Spielertafeln und Effekte brauchen ~60 px mehr Höhe – die Kartengröße rechnet
   damit, und das Brett darf zur Not senkrecht scrollen, statt Support und Bauten abzuschneiden
   (iPhone 15 Pro, 04.09.2026). */
@media (max-width: 720px) {
  :root { --card-w: clamp(38px, min(14.6vw, 6.1vh), 96px); }
  main#board { overflow-y: auto; overscroll-behavior: contain; }
  .plate { padding: 2px 8px 2px 4px; }
  .plate .portrait { width: 30px; height: 30px; }
  #hint { padding: 3px 10px; font-size: 11px; }
  .foehand-wrap { transform: scale(.85); transform-origin: top center; margin-bottom: -6px; }
}

/* Telefon + Tutorial: das Lektionsfenster nimmt ~150 px – ohne kleinere Karten scrollte das Brett
   um 23 px und Wischen traf die Scrollung statt der Karte (04.09.2026). --card-h muss mit. */
@media (max-width: 720px) {
  body.tutorial { --card-w: clamp(34px, min(14vw, 5.5vh), 96px); --card-h: calc(var(--card-w) * 1.4); }
  body.tutorial main#board { overflow-y: hidden; }
}

/* Fraktionsfarbe am Kostenkreis (04.09.2026): Rom rot, Wikinger eisblau, Sparta bronze */
.tcg.f-romans .tcg-cost, .card.f-romans .cost { background: radial-gradient(circle at 34% 28%, #ffc9a8, #d9342b 58%, #6e120c); color: #fff3e6; border-color: #ffd7c2; text-shadow: 0 1px 2px #0009; }
.tcg.f-vikings .tcg-cost, .card.f-vikings .cost { background: radial-gradient(circle at 34% 28%, #e8f6ff, #4f95dc 58%, #143b6b); color: #07162b; border-color: #d7ecff; text-shadow: 0 1px 0 #ffffff66; }
.tcg.f-spartans .tcg-cost, .card.f-spartans .cost { background: radial-gradient(circle at 34% 28%, #f6e2b8, #c48a2e 58%, #5a3f10); color: #1a1408; border-color: #f3dfb3; text-shadow: 0 1px 0 #ffffff5c; }
.card .cost.disc { background: linear-gradient(180deg, #7fdc9a, #37a06b) !important; color: #06170c !important; }

/* Angriffspfeile (04.09.2026) */
#arrows { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 35; overflow: visible; }
#arrows path.arrow { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 12 9; animation: arrowFlow .7s linear infinite; filter: drop-shadow(0 0 4px #000c); }
#arrows path.attack { stroke: #ff5c4a; }
#arrows path.blocked { stroke: #ffd97a; }
#arrows path.dim { stroke: #ff5c4a; opacity: .28; stroke-width: 3; animation: none; }
#arrows path.preview { stroke-width: 3.5; opacity: .9; }
@keyframes arrowFlow { to { stroke-dashoffset: -21; } }
@media (prefers-reduced-motion: reduce) { #arrows path.arrow { animation: none; } }

/* Gegnerzug-Fenster in der Seitenspalte (Desktop) + Protokoll unten rechts (04.09.2026) */
#botturn.docked { position: static; transform: none; min-width: 0; max-width: none; width: 100%; margin-bottom: 10px; cursor: pointer; }
@media (min-width: 1000px) {
  #side { display: flex; flex-direction: column; }
  #side-log { margin-top: auto; flex: 0 1 38%; min-height: 120px; }
}

/* Terrain in der Mittellinie: die Zone wächst mit der Karte, statt dass die Karte in die Frontreihen
   ragt (Handy, 04.09.2026). Auf dem Telefon kleiner, damit das Brett weiter passt. */
#middle:has(#terrain .card) { min-height: calc(var(--card-h) * .72 + 8px); }
@media (max-width: 720px) {
  #terrain .card { width: calc(var(--card-w) * .55); height: calc(var(--card-h) * .55); }
  #middle:has(#terrain .card) { min-height: calc(var(--card-h) * .55 + 6px); }
  :root:has(#terrain .card) { --card-w: clamp(36px, min(14.6vw, 5.7vh), 96px); --card-h: calc(var(--card-w) * 1.4); }
}

/* Gegnerzug-Panel (Desktop, 04.09.2026): bleibt stehen, scrollt nach oben */
#botturn.docked { cursor: default; }
#botturn.docked ul { max-height: 168px; overflow-y: auto; scrollbar-width: thin; padding-right: 4px; }
#botturn.docked .bt-empty { font-size: 12.5px; color: var(--dim); }
#botturn.docked li:last-child { color: #ffd97a; }

/* Desktop mit Terrain-Band: das Brett rechnet die zusätzliche Höhe ein, sonst rutscht die untere
   Bautenzeile aus dem Bild (04.09.2026). */
@media (min-width: 1000px) {
  :root:has(#terrain .card) { --card-w: clamp(44px, min(4.4vw, (100vh - 200px) / 11.2), 124px); --card-h: calc(var(--card-w) * 1.4); }
  body.tutorial:has(#terrain .card) { --card-w: clamp(44px, min(4.4vw, (100vh - 200px) / 11.2), 124px); --card-h: calc(var(--card-w) * 1.4); }
  #side-log h3 { position: sticky; top: 0; background: var(--panel); z-index: 2; padding-bottom: 4px; }
}

/* Feldkarte wie die grosse Karte (Rahmen C, 04.09.2026): Initiative oben rechts,
   Angriff unten links, Verteidigung unten rechts. */
.card .atk { color: #ffd97a; white-space: nowrap; font-weight: 900; font-size: 1.12em; }
.card .big.ini { color: #e9edf5; font-size: max(10px, 15.5cqw); letter-spacing: -.02em; }

/* Dock-Knöpfe: grösser und eindeutig; „Zug beenden" fragt einmal nach (04.09.2026) */
#dock button { min-height: 40px; padding: 8px 16px; font-size: 14px; font-weight: 800; border-radius: 10px; }
#dock button.primary { box-shadow: 0 0 0 1px #ffd97a66, 0 4px 14px #0008; }
#dock button.armed { background: #7a2b1e; color: #fff; border-color: #ff8d80; animation: pulse 1s infinite; }
/* Wählbare Karten im Ablagestapel */
.rvcards.rvgrid .gvpick { position: relative; cursor: pointer; }
.rvcards.rvgrid .gvpick .rvtake { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-weight: 800; font-size: 12px; color: #14100a; background: var(--gold); border-radius: 6px; margin: 0 8px; padding: 3px 0; pointer-events: none; }
.rvcards.rvgrid .gvpick .gvtile { outline: 2px solid var(--gold); border-radius: 10px; }

/* ===== Desktop-Spielbildschirm v3 (04.09.2026, Daniel): Brett von oben bis unten =====
   Links: Gegnerzüge + Protokoll (über der eigenen Tafel). Rechts: Gegnerhand, Kartenvorschau,
   eigene Hand als Stapel. Der Hinweis sitzt direkt über der unteren Leiste. */
#left { display: none; }
@media (min-width: 1000px) {
  /* Kopf, Hinweis, Mittelstreifen und untere Leiste sind ~190 px fest; der Rest gehört sechs
     Reihen (8.6 Kartenbreiten). Seitlich bleiben ~600 px für beide Spalten. */
  :root { --card-w: clamp(52px, min((100vw - 600px) / 9.2, (100vh - 190px) / 8.7), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #app > #topbar { order: 1; } #app > #content { order: 2; } #app > #hint { order: 3; } #app > footer { order: 4; }
  #hint { border-top: 1px solid rgba(212,175,55,.35); border-bottom: none; }
  #content { padding: 6px 8px; gap: 8px; }
  main { max-width: none; }
  .foehand-wrap { display: none; }
  #left {
    display: flex; flex-direction: column; width: clamp(220px, 17vw, 300px); flex-shrink: 0; gap: 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 12px; min-height: 0;
  }
  #left #botturn.docked { margin-bottom: 0; flex: 0 1 auto; }
  #left #side-log { flex: 1 1 120px; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-end; }
  #left #side-log ul { overflow-y: auto; }
  #side {
    width: clamp(190px, 15vw, 250px); padding: 10px; gap: 8px; overflow: visible; justify-content: flex-start;
  }
  #side #foe-hand { flex: 0 0 auto; justify-content: center; padding: 2px 0 4px; border-bottom: 1px solid var(--line); }
  #side #inspector { flex: 0 0 auto; max-height: 46%; }
  #side #hand {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
    padding: 6px 0 0; overflow: visible; border-top: 1px solid var(--line);
  }
  #side #hand > :first-child { margin-left: 0; } #side #hand > :last-child { margin-right: 0; }
  #side #hand .card { width: min(calc(var(--card-w) * 1.55), 100%); height: calc(var(--card-h) * 1.45); flex-shrink: 0; }
  #side #hand .card + .card { margin-left: 0; margin-top: var(--hand-mt, calc(var(--card-h) * -0.7)); }
  #side #hand .card:hover, #side #hand .card.selected { transform: translateX(-18px) scale(1.12); }
  footer { grid-template-columns: minmax(220px, 1fr) auto; }
  #actions { max-width: 320px; flex-direction: row; justify-content: flex-end; padding: 8px 14px; }
}

/* ===== Desktop v4 (04.09.2026): keine untere Leiste, Hand als Fächer unten rechts =====
   Linke Spalte: Gegnerzüge, Protokoll, Hinweis, eigene Tafel. Rechte Spalte: Gegnerhand,
   Kartenvorschau, Aktionsknöpfe, Handfächer. */
@media (min-width: 1000px) {
  footer#dock { display: none !important; }
  :root { --card-w: clamp(52px, min((100vw - 640px) / 9.2, (100vh - 120px) / 8.7), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #left { width: clamp(230px, 18vw, 320px); padding: 10px; gap: 8px; }
  #left #side-log { flex: 1 1 100px; min-height: 100px; }
  #left #hint {
    flex: 0 0 auto; text-align: left; font-size: 13px; line-height: 1.35; padding: 8px 10px; min-height: 0;
    border: 1px solid rgba(212,175,55,.4); border-radius: 10px; background: rgba(212,175,55,.1);
  }
  #left #hint.waiting { border-color: var(--line); }
  #left .pstats { flex: 0 0 auto; padding: 0; }
  #left .pstats .plate { width: 100%; }
  #side { width: clamp(300px, 22vw, 420px); overflow: visible; }
  #side #inspector { max-height: 40%; }
  #side #actions { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 8px 0 2px; max-width: none; width: auto; justify-self: auto; border-top: 1px solid var(--line); margin-top: auto; }
  #side #actions button { flex: 1 1 auto; min-height: 42px; font-size: 14px; }
  #side #hand {
    position: relative; flex: 0 0 auto; display: block; height: calc(var(--card-h) * 1.4 + 26px);
    margin: 0; padding: 0; border: none; overflow: visible; --spread: 30px;
  }
  #side #hand .card {
    position: absolute; left: 50%; bottom: 8px; margin: 0 !important;
    width: calc(var(--card-w) * 1.5); height: calc(var(--card-h) * 1.4);
    --k: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
    transform-origin: 50% 120%;
    transform: translateX(calc(-50% + var(--k) * var(--spread))) rotate(calc(var(--k) * 2.5deg));
    z-index: calc(10 + var(--i, 0));
    transition: transform .15s ease, box-shadow .15s ease;
  }
  #side #hand .card:hover, #side #hand .card.selected {
    transform: translateX(calc(-50% + var(--k) * var(--spread))) translateY(-44px) rotate(0deg) scale(1.15);
    z-index: 40 !important;
  }
}
/* v4: mit Terrain-Band braucht das Brett ~9.5 statt 8.7 Kartenbreiten Höhe (04.09.2026) */
@media (min-width: 1000px) {
  :root:has(#terrain .card) { --card-w: clamp(52px, min((100vw - 640px) / 9.2, (100vh - 130px) / 9.5), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #side #hand .card:hover, #side #hand .card.selected { transform: translateX(calc(-50% + var(--k) * var(--spread))) translateY(-40px) rotate(0deg) scale(1.12); }
}

/* ===== Desktop v5 (04.09.2026): breitere rechte Spalte, Fächer geht beim Überfahren auf,
   Handkarten tragen den Namen oben, Protokoll als Ausklappfenster ===== */
@media (min-width: 1000px) {
  #side { width: clamp(320px, 26vw, 640px); }
  :root { --card-w: clamp(52px, min((100vw - 700px) / 9.2, (100vh - 120px) / 8.7), 140px); --card-h: calc(var(--card-w) * 1.4); }
  :root:has(#terrain .card) { --card-w: clamp(52px, min((100vw - 700px) / 9.2, (100vh - 130px) / 9.5), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #side #hand .card {
    left: auto; right: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--spread));
    transform: rotate(calc(var(--k) * 2.5deg));
    transition: right .18s ease, transform .15s ease, box-shadow .15s ease;
  }
  #side #hand:hover .card { right: calc((var(--n, 1) - 1 - var(--i, 0)) * var(--spread-wide, var(--spread))); }
  #side #hand .card:hover, #side #hand .card.selected { transform: translateY(-44px) rotate(0deg) scale(1.12); z-index: 40 !important; }
  /* Der Name oben statt am unteren Bildrand: im Fächer ist nur der linke obere Streifen sichtbar */
  #side #hand .card .nm {
    top: 0; bottom: auto; padding: 2px max(1px, 3cqw) max(6px, 9cqw); text-align: left;
    background: linear-gradient(rgba(7,9,13,.94) 45%, transparent); -webkit-line-clamp: 2;
  }
  /* Protokoll: zugeklappt nur die Kopfzeile, ein Klick öffnet es */
  #side-log h3 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 6px; }
  #side-log h3 .fold { display: inline-block; font-style: normal; transition: transform .2s ease; color: var(--dim); }
  #side-log:not(.collapsed) h3 .fold { transform: rotate(90deg); }
  #left #side-log.collapsed { flex: 0 0 auto; min-height: 0; }
  #left #side-log.collapsed ul { display: none; }
  #left #botturn.docked { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  #left #botturn.docked ul { max-height: none; flex: 1 1 auto; }
}

/* ===== Desktop v6 (04.09.2026): keine Leisten mehr – Brett von ganz oben bis ganz unten.
   Links: Gegnertafel, Zuginfo, Gegnerzüge, Protokoll, Hinweis, eigene Tafel. Rechts: Gegnerhand,
   Vorschau, Aktionen, Aufgeben, Menü. Die Hand hängt als Fächer halb unter dem Bildrand. ===== */
@media (min-width: 1000px) {
  #topbar { display: none !important; }
  :root { --card-w: clamp(52px, min((100vw - 700px) / 9.2, (100vh - 40px) / 9.6), 140px); --card-h: calc(var(--card-w) * 1.4); }
  :root:has(#terrain .card) { --card-w: clamp(52px, min((100vw - 700px) / 9.2, (100vh - 50px) / 10.4), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #content { padding: 8px; }
  main { padding-bottom: calc(var(--card-h) * .72); }
  #left .pstats.foe { flex: 0 0 auto; padding: 0; }
  #left #turninfo { flex: 0 0 auto; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--dim); text-align: center; padding: 2px 0 4px; border-bottom: 1px solid var(--line); }
  #left #tutpanel { position: static; width: auto; max-height: 46%; overflow-y: auto; flex: 0 0 auto; }
  body.tutorial main { padding-left: 4px; }
  #side .menu { display: flex; gap: 4px; justify-content: flex-end; flex: 0 0 auto; padding-top: 2px; }
  #side .menu button { background: var(--panel2); border: 1px solid var(--line); font-size: 16px; cursor: pointer; padding: 5px 8px; border-radius: 9px; }
  #side .menu button:hover { border-color: var(--gold); }
  #side #surrender { flex: 0 0 auto; margin-top: 0; }
  #side #actions { margin-top: auto; }
  #side #concede-top { display: none; }
  /* Fächer am unteren Rand */
  #hand.fan {
    position: fixed; bottom: 0; height: calc(var(--card-h) * 1.5); z-index: 30; pointer-events: none;
    display: block; padding: 0; margin: 0; border: none; overflow: visible; background: none; flex: none;
  }
  #hand.fan .card {
    --k: calc(var(--i, 0) - (var(--n, 1) - 1) / 2);
    pointer-events: auto; position: absolute; right: auto;
    left: calc(50% + var(--k) * var(--spread)); margin-left: calc(var(--card-w) * -0.75) !important;
    bottom: calc(var(--card-h) * -0.82);
    width: calc(var(--card-w) * 1.5); height: calc(var(--card-h) * 1.5);
    transform-origin: 50% 240%; transform: rotate(calc(var(--k) * 1.6deg));
    transition: transform .18s ease, bottom .18s ease, box-shadow .18s ease;
    z-index: calc(10 + var(--i, 0));
    box-shadow: 0 -4px 18px #000a;
  }
  #hand.fan .card:hover, #hand.fan .card.selected {
    bottom: 10px; transform: rotate(0deg) scale(1.04); z-index: 60 !important;
    box-shadow: 0 10px 30px #000c, 0 0 0 2px var(--gold);
  }
  #hand.fan .card .nm {
    top: 0; bottom: auto; padding: 2px max(1px, 3cqw) max(6px, 9cqw); text-align: left;
    background: linear-gradient(rgba(7,9,13,.94) 45%, transparent); -webkit-line-clamp: 2;
  }
}
/* v6b (04.09.2026): keine Kartenvorschau mehr rechts – die Spalte trägt nur Gegnerhand und Knöpfe.
   Details gibt es per Rechtsklick / langem Druck (das Grundlagen-Tutorial erklärt es). */
@media (min-width: 1000px) {
  #side { width: clamp(200px, 16vw, 250px); }
  #side #inspector { display: none; }
  :root { --card-w: clamp(52px, min((100vw - 560px) / 9.2, (100vh - 40px) / 9.6), 140px); --card-h: calc(var(--card-w) * 1.4); }
  :root:has(#terrain .card) { --card-w: clamp(52px, min((100vw - 560px) / 9.2, (100vh - 50px) / 10.4), 140px); --card-h: calc(var(--card-w) * 1.4); }
  #side #actions { flex-direction: column; align-items: stretch; }
  #side #actions button { min-height: 44px; font-size: 14.5px; }
  #side #surrender { width: 100%; }
}
/* Fächer: unbezahlbare Karten bleiben deckend – der rote Kostenkreis sagt genug; halb durchsichtig
   schimmerten die Nachbarkarten durch (Daniel, 04.09.2026). */
@media (min-width: 1000px) {
  #hand.fan .card.unaffordable { opacity: 1; filter: saturate(.6) brightness(.82); }
  #hand.fan .card.unaffordable:hover { filter: none; }
}

/* ===== Desktop v7 (04.09.2026): breitere Spalten, Protokoll nur am Spielende, Gegnerzüge rechts,
   Tafeln und Knöpfe grösser, Fächer links am Brett und grösser ===== */
@media (min-width: 1000px) {
  #left, #side { width: clamp(250px, 20vw, 440px); gap: 10px; }
  :root { --card-w: clamp(52px, min((100vw - 2 * clamp(250px, 20vw, 440px) - 60px) / 9.2, (100vh - 40px) / 9.75), 140px); --card-h: calc(var(--card-w) * 1.4); }
  :root:has(#terrain .card) { --card-w: clamp(52px, min((100vw - 2 * clamp(250px, 20vw, 440px) - 60px) / 9.2, (100vh - 50px) / 10.6), 140px); --card-h: calc(var(--card-w) * 1.4); }
  /* Links: Gegnertafel oben, Zuginfo, dann Luft, Hinweis und eigene Tafel unten */
  #left #side-log { display: none !important; }
  #left #botturn { display: none; }
  #left .pstats .plate { zoom: 1.25; width: calc(100% / 1.25); }
  #left #turninfo { font-size: 14.5px; padding: 4px 0 8px; }
  #left #hint { margin-top: auto; font-size: 14.5px; padding: 10px 12px; }
  /* Rechts: Gegnerhand, Gegnerzüge (füllen den Platz), Knöpfe */
  #side #botturn.docked { flex: 1 1 auto; min-height: 120px; display: flex; flex-direction: column; margin: 0; }
  #side #botturn.docked ul { flex: 1 1 auto; max-height: none; overflow-y: auto; font-size: 14px; }
  #side #botturn.docked .bt-head { font-size: 15px; }
  #side #actions { margin-top: 0; gap: 8px; padding-top: 10px; }
  #side #actions button { min-height: 54px; font-size: 17px; border-radius: 12px; }
  #side #surrender { min-height: 46px; font-size: 15px; }
  #side .menu { gap: 8px; }
  #side .menu button { font-size: 22px; padding: 8px 12px; flex: 1 1 auto; }
  /* Fächer: links am Brett, grösser, halb unter dem Rand */
  #hand.fan { height: calc(var(--card-h) * 1.8); }
  #hand.fan .card {
    left: calc(var(--shift, 0px) + var(--i, 0) * var(--spread)); margin-left: 0 !important;
    width: calc(var(--card-w) * 1.8); height: calc(var(--card-h) * 1.8);
    bottom: calc(var(--card-h) * -0.98);
  }
  #hand.fan .card:hover, #hand.fan .card.selected { bottom: 10px; }
  main { padding-bottom: calc(var(--card-h) * .9); }
}

/* ===== Spielertafeln in der breiten linken Spalte (04.09.2026): volle Breite, grosse Zahlen,
   Lebensbalken und Ressourcen über die ganze Zeile, keine Deck/Ablage/Hand-Zähler (die stehen
   an den Stapeln). ===== */
@media (min-width: 1000px) {
  #left .pstats .plate { zoom: 1; width: 100%; padding: 12px 14px; gap: 14px; align-items: flex-start; }
  #left .plate .portrait { width: 92px; height: 92px; border-width: 3px; }
  #left .plate .portrait .fac { width: 26px; height: 26px; font-size: 14px; right: -3px; bottom: -3px; }
  #left .plate .pcol { gap: 9px; }
  #left .plate .pname { flex-wrap: wrap; row-gap: 2px; align-items: center; }
  #left .plate .who { font-size: 19px; }
  #left .plate .ruler { font-size: 13px; flex-basis: 100%; order: 3; }
  #left .plate .turn { font-size: 11px; padding: 3px 9px; margin-left: auto; }
  #left .plate .vitals { flex-direction: column; align-items: stretch; gap: 7px; }
  #left .plate .ico { width: 20px; height: 20px; }
  #left .plate .stat.hp { display: flex; width: 100%; gap: 8px; }
  #left .plate .stat b { font-size: 26px; }
  #left .plate .stat small { font-size: 14px; }
  #left .plate .hp .hbar { flex: 1 1 auto; width: auto; height: 11px; border-radius: 6px; margin-left: 8px; }
  #left .plate .respips { display: flex; width: 100%; gap: 8px; }
  #left .plate .respips b { font-size: 26px; }
  #left .plate .respips small { font-size: 14px; }
  #left .plate .respips .pips { flex: 1 1 auto; gap: 5px; flex-wrap: wrap; }
  #left .plate .respips i { width: 16px; height: 16px; }
  #left .plate .counts .chip:not(.banner) { display: none; }
  #left .plate .chip.banner { font-size: 13.5px; padding: 5px 11px 5px 9px; border-radius: 10px; }
  #left .plate .chip.banner b { font-size: 13.5px; }
  #left .plate .rabil { gap: 8px; }
  #left .plate .rab { font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: normal; text-align: center; }
  #left .plate button.rab { flex: 1 1 auto; justify-content: center; }
  #left .plate .rab .rcost .ico { width: 12px; height: 12px; }
}
/* Balken und Pips in eigener Zeile – neben den grossen Zahlen blieben ihnen 30 px (1440 px breit) */
@media (min-width: 1000px) {
  #left .plate .stat.hp { flex-wrap: wrap; row-gap: 5px; }
  #left .plate .hp .hbar { flex: 1 0 100%; margin-left: 0; }
  #left .plate .respips { flex-wrap: wrap; row-gap: 5px; }
  #left .plate .respips .pips { flex: 1 0 100%; }
}
@media (min-width: 1000px) and (max-width: 1599px) {
  #left .plate .portrait { width: 74px; height: 74px; }
  #left .plate .stat b, #left .plate .respips b { font-size: 22px; }
}

/* ===== Zielmodus und Reichweite auf der Brettkarte (05.09.2026) =====
   Wer eine Einheit anfasst, sieht sofort, was er treffen kann: legale Ziele leuchten, alles
   andere tritt zurück. Die Reichweite steht auf der Karte, sobald sie vom Nahkampf abweicht. */
body.aiming main .card:not(.targetable):not(.dragsrc):not(.defended),
body.aiming .core:not(.targetable),
body.aiming .pile { filter: grayscale(.85) brightness(.55); transition: filter .12s ease; }
body.aiming main .card.targetable { filter: none; z-index: 20; }
body.aiming #ruler-target { filter: none; }
.card .rngb {
  position: absolute; top: max(16px, 24cqw); left: max(1px, 2cqw); z-index: 3;
  font-size: max(7px, 9.5cqw); font-weight: 900; line-height: 1; letter-spacing: -.02em;
  background: rgba(7,9,13,.88); border: 1px solid #4a5670; border-radius: 5px;
  padding: 1px max(2px, 3cqw) 1px max(1px, 2cqw); color: #cfe2f7; pointer-events: none;
}
.card .rngb.r3 { border-color: #b8862f; color: #ffd97a; }   /* Belagerung */
.card .rngb.r0 { border-color: #6d7484; color: #98a0b0; }   /* greift nie an */

/* ===== Aktionsleiste (Designer-Review 05.09.2026): ein Tipp wählt, die Leiste zeigt Preis, Ziel
   und Wirkung, ein Knopf führt aus. Desktop: schwebend neben der Karte; Telefon: in #hint. ===== */
#strip {
  position: fixed; z-index: 72; min-width: 210px; max-width: 320px;
  background: rgba(10,12,18,.97); border: 1px solid var(--gold); border-radius: 12px; padding: 9px 11px;
  box-shadow: 0 10px 30px #000c; font-size: 12.5px; color: var(--text);
}
#strip.hidden { display: none; }
body.dragging #strip { display: none; }
#strip .st, #hint.strip .st { font-weight: 800; font-size: 13px; color: #ffd97a; margin-bottom: 4px; }
#strip .sl, #hint.strip .sl { color: var(--dim); font-size: 11.5px; line-height: 1.4; margin-bottom: 3px; text-align: left; }
#strip .sl.why, #hint.strip .sl.why { color: #ff8d80; }
#strip .sl.prev, #hint.strip .sl.prev { color: #cfe2f7; }
#strip .sl.cost, #hint.strip .sl.cost { color: #ffe6a6; }
#strip .sl.stat, #hint.strip .sl.stat { color: #cfe2f7; font-variant-numeric: tabular-nums; }
#strip .sl.fx, #hint.strip .sl.fx { color: var(--text); }
#strip .sl.deity { margin: 2px 0; }
#strip .sb, #hint.strip .sb { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.sbtn {
  font: inherit; font-size: 12.5px; font-weight: 800; padding: 7px 10px; border-radius: 9px; text-align: left;
  border: 1px solid rgba(212,175,55,.5); background: rgba(0,0,0,.35); color: #ffd97a; cursor: pointer;
}
.sbtn:hover { background: rgba(212,175,55,.18); }
.sbtn.gold { background: var(--gold); color: #14100a; border-color: var(--gold); }
.sbtn.gold:hover { filter: brightness(1.08); }
.sbtn.muted { color: var(--dim); border-color: var(--line); }
#hint.strip { text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 0; padding: 6px 10px; font-weight: 500; }
#hint.strip .sb { flex-direction: row; flex-wrap: wrap; margin-top: 4px; }
#hint.strip .sbtn { flex: 1 1 auto; font-size: 12px; padding: 7px 10px; min-height: 36px; }
#hint.strip .sl.prev { color: #dfeaf7; }
.intercept.picked { background: var(--gold); box-shadow: 0 0 0 2px #ffe6a6, 0 0 18px rgba(212,175,55,.9); }
#ruler-target.picked { border-color: #ffe6a6; box-shadow: 0 0 0 4px #ffe6a6, 0 0 52px rgba(212,175,55,.95); animation: none; }
/* Gottheit: Beschwörung und Sieg mit Stand (im Fenster, in der Vorschau, in der Leiste) */
.deity { margin: 8px 0 4px; font-size: 12.5px; line-height: 1.45; }
.deity .dsec { margin-bottom: 6px; }
.deity .dsec > b { color: #ffd97a; }
.deity .dsec > i.ok, .deity b.ok { color: var(--green, #37a06b); font-style: normal; font-weight: 800; }
.deity .dsec > i.nok { color: #ff8d80; font-style: normal; }
.deity .dsec > i.dim { color: var(--dim); font-style: normal; font-size: 11px; }
.deity .dline { padding-left: 2px; }
.deity .dline b { font-variant-numeric: tabular-nums; }
.deity .dparts { padding-left: 16px; }
.deity .dor { color: var(--dim); font-size: 11px; padding-left: 18px; }
.deity.compact { margin: 2px 0; font-size: 11.5px; }
#cardinfo .deity, #inspector .deity { margin: 10px 2px 4px; }

/* ---------- Deck-Editor: Synergie-Pakete (05.09.2026) ---------- */
.dbsyn { flex: 1 1 240px; min-width: 0; }
.dbsyn .syn { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px 12px; border-top: 1px solid #ffffff12; font-size: 12.5px; line-height: 1.35; }
.dbsyn .syn b { color: #e7dcc4; }
.dbsyn .syn .sc { color: #aeb5c4; }
.dbsyn .syn .sv { color: #d9c68f; }
.dbsyn .syn.strong .sv { color: #8fd39a; }
.dbsyn .syn.half .sv { color: #e9a07a; }
.dbsyn .syn .st { color: #8c93a4; font-size: 11.5px; }

/* Verliehene Schlüsselwörter (07.09.2026): gestrichelt statt gefüllt – nicht auf der Karte gedruckt */
.card .cfoot .kw i.granted { border: 1px dashed #d9c68f; background: transparent; color: #e7dcc4; }
.plate .turn.swap { background: #2f5d8a; }

/* Große Karte beim Verweilen (07.09.2026) */
#lens.full { max-width: none; width: 296px; padding: 8px; }
#lens.full .lensfull .tcgwrap { width: 280px; }
#lens.full .lstat { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ffffff18; }

/* Entscheidungs-Pop-ups (07.09.2026) */
.rvsheet.decision .rvnote { color: var(--text); font-size: 13.5px; }
.rvsheet.decision .dcbtns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rvsheet.decision .dcbtn.plain { background: transparent; border: 1px solid var(--line); color: var(--dim); }
.rvsheet.decision .dcbtn.gold { background: var(--gold); }
.rvcards .rvpick.chosen .tcg { box-shadow: 0 0 0 3px #8fd39a, 0 0 18px rgba(143,211,154,.6); }
.respips small.nxt { display: block; font-size: 10.5px; color: var(--dim); margin-top: 2px; }

/* Der Bot zieht sichtbar (07.09.2026) */
@keyframes cardArrive { 0% { transform: scale(.6); opacity: 0; box-shadow: 0 0 0 0 rgba(255,217,122,.9); } 60% { transform: scale(1.08); opacity: 1; box-shadow: 0 0 0 6px rgba(255,217,122,.35); } 100% { transform: none; box-shadow: none; } }
@keyframes cardHit { 0%, 100% { transform: none; filter: none; } 20% { transform: translateX(-4px); filter: brightness(1.6) saturate(1.4); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); filter: brightness(1.4); } 80% { transform: translateX(3px); } }
.card.arrive { animation: cardArrive .9s ease-out; }
.card.hit, .core.hit, .stat.hp.hit { animation: cardHit .8s ease-out; }
#botbanner { position: fixed; left: 50%; top: 14%; transform: translate(-50%, -8px); z-index: 60; pointer-events: none;
  background: rgba(10,12,18,.94); border: 1px solid var(--gold); border-radius: 12px; padding: 10px 16px; max-width: min(92vw, 520px);
  color: #ffd97a; font-weight: 700; font-size: 15px; line-height: 1.35; box-shadow: 0 10px 30px #000c; opacity: 0; transition: opacity .18s, transform .18s; }
#botbanner.show { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1000px) { #botbanner { display: none; } }
#botturn li.now { color: #ffd97a; font-weight: 700; }
body.botmoving #dock button, body.botmoving #actions button { opacity: .55; }

/* Live-Zustand unter der Auswahlkachel (07.09.2026) */
.rvsheet.decision .dcpick .dcwhere { margin-top: 5px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.rvsheet.decision .dcpick .dcstate { margin-top: 3px; font-size: 11.5px; line-height: 1.35; color: #ffd0a0; text-align: left; }
.rvsheet.decision .dcpick .dcstate.plain { color: var(--dim); text-align: center; }

/* Zähler auf der Karte (§4.7, 07.09.2026) */
.card .ctrb { position: absolute; left: 2px; bottom: calc(max(15px, 21cqw) + 2px); z-index: 4; display: flex; gap: 2px; flex-wrap: wrap; max-width: 70%; }
.card .ctrb i { font-style: normal; font-size: max(9px, 12cqw); font-weight: 900; line-height: 1;
  padding: max(1px, 1.5cqw) max(3px, 3cqw); border-radius: 999px; background: #2f5d8a; color: #eaf3ff; border: 1px solid #7fb0e0; }
#lens .lc { color: #9fd0ff; font-size: 11.5px; margin-bottom: 3px; font-weight: 700; }
.insp .ctrs { margin: 4px 0; display: flex; gap: 6px; flex-wrap: wrap; }
.insp .ctrs i { font-style: normal; font-size: 11.5px; font-weight: 700; color: #9fd0ff; border: 1px solid #2f5d8a; border-radius: 999px; padding: 1px 8px; }

/* Göttlicher Sieg auf der Spielertafel (07.09.2026) */
.plate .prow.gods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.plate .prow.gods .god { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11.5px; font-weight: 700; color: #e7dcc4; border: 1px solid #6b5bd0; background: #221c46;
  border-radius: 999px; padding: 2px 9px; }
.plate .prow.gods .god.won { border-color: #ffd97a; background: #4a3a10; color: #ffd97a; animation: hpPulse 1.2s infinite; }
.plate .prow.gods .gp b { color: #cfe2f7; font-variant-numeric: tabular-nums; }
.plate .prow.gods .gp.near b { color: #ffd97a; }
.plate .prow.gods .gp.met b { color: #8fd39a; }
.plate .prow.gods .gor { font-style: normal; opacity: .6; margin: 0 3px; }

/* Garnison auf dem Bauwerk (§7, 07.09.2026) */
.card .garb { position: absolute; right: 2px; bottom: calc(max(15px, 21cqw) + 2px); z-index: 4;
  font-size: max(9px, 12cqw); font-weight: 900; line-height: 1; padding: max(1px, 1.5cqw) max(3px, 3cqw);
  border-radius: 6px; background: #23304a; color: #cfe2f7; border: 1px solid #4a6da0; }
.card .garb.full { background: #3b2f10; color: #ffd97a; border-color: var(--gold); }