:root {
  --bg: #1c2230;
  --bg2: #12161f;
  --gold: #ffd24d;
  --heal: #4ade80;
  --danger: #ff4d5e;
  --armor: #b8c4d4;
  --floorLine: #4d5568;
  --frost: #6fd0ff;
  --text: #e7ecf2;
  --muted: #8b95a7;
  --font: 'Rajdhani', system-ui, sans-serif;
  --font-head: 'Space Grotesk', var(--font);
  /* Freihaltezone der geteilten Systemknöpfe: assets/js/fullscreen.js setzt
     .ng-fs-btn oben links, assets/js/menu.js .ng-menu-btn oben rechts — beide
     10px eingerückt, 44px gross, z-index 900. Jede eigene Kopfzeile muss die
     beiden oberen Ecken freilassen, sonst liegt sie darunter. */
  --sys-clear: 66px;
  /* Der weiche Gold-Schein der Wortmarke, als Token statt als Copy je Stelle. */
  --glow-gold: 0 0 18px rgba(255, 210, 77, 0.34);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  user-select: none;
  -webkit-user-select: none;
}

#game { position: fixed; inset: 0; }
#game canvas { display: block; touch-action: none; }

.hidden { display: none !important; }

/* ── Rotate-Prompt (Portrait → bitte drehen) ── */
.rotate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem;
  background: var(--bg2); text-align: center; padding: 2rem;
}
.rotate-icon { font-size: 4rem; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%,100%{ transform: rotate(0); } 50%{ transform: rotate(90deg); } }
.rotate-text { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; }
.rotate-sub { color: var(--muted); font-size: 0.95rem; }
@media (prefers-reduced-motion: reduce) { .rotate-icon { animation: none; } }

/* ── HUD ── */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; pointer-events: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 0.5rem)
           calc(env(safe-area-inset-right) + var(--sys-clear)) 0
           calc(env(safe-area-inset-left) + var(--sys-clear));
}
.hud-block { display: flex; align-items: baseline; gap: 0.35rem; }
.hud-mid { flex: 1; justify-content: center; }
.hud-right { flex: 1; justify-content: flex-end; }
.hud-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.hud-value { font-size: 1.3rem; font-weight: 900; font-family: var(--font-head); }
.hud-value.gold { color: var(--gold); }
.hud-value.punch { animation: punch .2s ease-out; }
@keyframes punch { 0%{transform:scale(1)} 35%{transform:scale(1.28)} 100%{transform:scale(1)} }
.march-bar {
  width: min(40vw, 260px); height: 8px; border-radius: 999px;
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12); overflow: hidden;
}
.march-fill {
  width: 0%; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #c99516, var(--gold)); box-shadow: var(--glow-gold);
  transition: width .2s linear;
}

/* ── zentrale Feier ── */
.pop {
  position: fixed; z-index: 7; pointer-events: none;
  top: 32%; left: 50%; transform: translate(-50%, -50%) scale(0.4);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(2rem, 9vw, 3.6rem); color: var(--gold);
  text-shadow: 0 0 20px currentColor; opacity: 0; text-align: center;
}
.pop.show { animation: pop .9s cubic-bezier(.2,.9,.3,1) forwards; }
@keyframes pop {
  0%{ opacity:0; transform: translate(-50%,-50%) scale(0.4);}
  22%{ opacity:1; transform: translate(-50%,-50%) scale(1.12);}
  60%{ opacity:1; transform: translate(-50%,-50%) scale(1);}
  100%{ opacity:0; transform: translate(-50%,-74%) scale(1);}
}
@media (prefers-reduced-motion: reduce) { .pop.show, .hud-value.punch { animation: none; } }

/* ── Schadens-/Heil-Zahlen (gepooltes DOM-Layer, kein PIXI.Text — Haus-Regel) ── */
.fx-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.dmgnum {
  position: absolute; top: 0; left: 0; transform: translate(-50%, -100%);
  font-family: var(--font-head); font-weight: 700; font-size: 0.95rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); opacity: 0; white-space: nowrap;
}
.dmgnum.show { animation: dmgfloat .7s ease-out forwards; }
@keyframes dmgfloat {
  0%   { opacity: 0; transform: translate(-50%, -100%) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -100%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -220%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .dmgnum.show { animation: none; } }

/* ── Screens ── */
.screen {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: radial-gradient(120% 90% at 50% 25%, rgba(40,50,66,0.5) 0%, rgba(18,22,31,0.92) 72%);
  backdrop-filter: blur(2px);
}
.card { width: 100%; max-width: 460px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }

/* Querformat: Notch und Home-Indikator liegen SEITLICH, nicht oben/unten.
   Nur top/bottom zu berücksichtigen (wie bisher) schneidet quer die
   Randelemente an — deshalb hier alle vier Kanten. */
.screen--title, #screen-slots {
  display: block; padding:
    calc(env(safe-area-inset-top) + 0.6rem)
    calc(env(safe-area-inset-right) + 0.9rem)
    calc(env(safe-area-inset-bottom) + 0.6rem)
    calc(env(safe-area-inset-left) + 0.9rem);
}

/* ── Wortmarke: das „I" ist eine Schwertklinge ── */
.logo {
  position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 0.02em; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700;
  /* Quer ist die Höhe knapp und die Breite üppig — an nur einer Achse
     hängend wird die Marke entweder winzig oder läuft aus dem Bild. */
  font-size: clamp(2.6rem, min(9vw, 15vh), 4.8rem); line-height: 0.84; letter-spacing: -0.01em;
  color: var(--armor); text-shadow: 0 0 26px rgba(184,196,212,0.26), 0 3px 0 #2a3040;
}
.logo .sword { position: relative; width: 0.40em; height: 1.16em; margin: 0 0.05em; }
.logo .sword i { position: absolute; left: 50%; transform: translateX(-50%); display: block; }
.logo .blade  { top: 0; width: 0.13em; height: 0.78em;
  background: linear-gradient(180deg, #fbfdff, #cfdae8 55%, #93a3b8);
  box-shadow: 0 0 14px rgba(220,235,255,0.5); }
.logo .guard  { top: 0.74em; width: 0.40em; height: 0.10em; background: var(--gold); border-radius: 1px; }
.logo .grip   { top: 0.84em; width: 0.09em; height: 0.22em; background: #4a3524; }
.logo .pommel { top: 1.04em; width: 0.16em; height: 0.12em; background: var(--gold); border-radius: 2px; }
.logo .nine {
  display: inline-grid; place-items: center; width: 0.92em; height: 0.92em;
  margin-left: 0.16em; border-radius: 0.2em; transform: rotate(-6deg); font-size: 0.78em;
  background: linear-gradient(158deg, var(--gold), #c99516); color: #2a1c00;
  box-shadow: 0 0 22px rgba(255,210,77,0.42);
}

/* Zwischen Wortmarke und den Modus-Spalten — und nur im Kanal zwischen ihnen.
   Über die volle Breite gesetzt lief sie im kleinsten Querformat (667×375)
   30 px unter beide Spalten; die Zeile bricht dort jetzt lieber um.
   206px = Spaltenbreite (176) + Kantenabstand (0,9rem) + Luft. */
.tagline { position: absolute; top: 56%; text-align: center;
  left: calc(env(safe-area-inset-left) + 206px);
  right: calc(env(safe-area-inset-right) + 206px);
  color: var(--text); font-size: 0.96rem; font-weight: 700; opacity: 0.9;
  text-shadow: 0 0 12px rgba(0,0,0,0.9); }

/* ── Modus-Spalten ──────────────────────────────────────────────────
   Beide Knöpfe auf einer Linie an den unteren Ecken: quer greifen dort
   beide Daumen am kürzesten, und darüber wird je Seite Platz für die
   Rangliste des jeweiligen Modus frei. Die obere Zeile bleibt den
   Systemknöpfen (Vollbild links, Menü rechts) — die Spalten wachsen
   deshalb nach oben, nicht darüber hinaus.
   display:contents löst die Reihe auf, damit beide Knöpfe eigenständig
   positioniert werden können, ohne das Markup zu spalten. */
.t-modes { display: contents; }
/* Der Rahmen liegt im Grundzustand transparent an: .mbtn.daily trägt eine
   1,5-px-Kante, .normal nicht — nebeneinander auf einer Linie wäre der eine
   Knopf sonst 3 px höher als der andere. */
.mbtn { position: absolute; width: 268px; border-radius: 14px; padding: 0.72rem 0.9rem;
  border: 1.5px solid transparent; cursor: pointer; font-family: var(--font-head); font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 0.12rem;
  box-shadow: 0 4px 0 rgba(0,0,0,0.32); }
.mbtn b { font-size: 1.12rem; }
.mbtn span { font-size: 0.72rem; font-weight: 600; opacity: 0.8; font-family: var(--font); }
.mbtn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,0.32); filter: brightness(0.93); }
#btn-campaign { left: calc(env(safe-area-inset-left) + 0.9rem);
  bottom: calc(env(safe-area-inset-bottom) + 1.1rem); }
#btn-daily { right: calc(env(safe-area-inset-right) + 0.9rem);
  bottom: calc(env(safe-area-inset-bottom) + 1.1rem); }

/* ── Rangliste je Modus, über ihrem Knopf ───────────────────────────
   Schmal, nicht knopfbreit: auf 268 px klebt der Name links und der Wert
   an der Knopfkante, der Blick muss die leere Strecke dazwischen mitlesen.
   150 px belegen ein Fünftel der Bildbreite statt gut einem Drittel und
   lassen die Wortmarke frei (Mockup Runde 2, Variante C1). */
/* 6,7rem = Knopf-Abstand (1,1rem) + Knopfhöhe (~65px) + Luft. Beide hängen an
   derselben env()-Einrückung, der Abstand bleibt also auch mit Home-Indikator. */
.t-board { position: absolute; width: 176px; bottom: calc(env(safe-area-inset-bottom) + 6.7rem); }
.t-board--l { left: calc(env(safe-area-inset-left) + 0.9rem); }
.t-board--r { right: calc(env(safe-area-inset-right) + 0.9rem); }
.t-board--r .t-board-head { text-align: right; }
.t-board-head { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.24rem; }
.t-row { display: flex; align-items: baseline; gap: 0.46rem; font-size: 0.88rem;
  font-weight: 700; line-height: 1.34; }
.t-row .pos { width: 1.1em; text-align: right; color: var(--muted);
  font-family: var(--font-head); font-size: 0.76rem; }
.t-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-row .sc { font-family: var(--font-head); color: var(--gold); }
.t-row.me .pos, .t-row.me .nm { color: var(--gold); }
/* Steht der Spieler außerhalb der Top 5, wird seine Zeile abgesetzt — sonst
   liest sich „5" und „12" als lückenlose Folge. */
.t-row.apart { margin-top: 0.22rem; padding-top: 0.22rem; border-top: 1px solid rgba(255,255,255,0.1); }
.t-board-empty { font-size: 0.72rem; color: var(--muted); font-weight: 600; line-height: 1.4; }
.mbtn.normal { background: linear-gradient(158deg, var(--gold), #c99516); color: #2a1c00; }
.mbtn.daily { background: rgba(18,22,31,0.82); color: var(--frost, #6fd0ff);
  border: 1.5px solid var(--frost, #6fd0ff); }
/* Sichtbar, aber noch nicht scharf — Muster von Gravity 9 (.daily-btn.spent) */
.mbtn.locked { border-color: rgba(139,149,167,0.34); color: var(--muted);
  background: rgba(16,20,26,0.72); cursor: default; }
.mbtn.locked:active { transform: none; box-shadow: 0 4px 0 rgba(0,0,0,0.32); }

/* ── Hochformat-Zustand des Titels ──────────────────────────────────
   Kein Deckel mehr, sondern der gestaltete Screen: Die Welt liegt (PIXI
   dreht sie), die Truppe fällt durchs Bild, und die Wortmarke liegt mit
   ihr — SIDE steht buchstäblich auf der Seite, bis man dreht.
   Bestwert, Tagline und Modus-Wahl warten aufs Querformat: Die Auswahl
   soll dort getroffen werden, wo auch gespielt wird. */
.t-rotate { display: none; }
.portrait .t-board, .portrait .tagline, .portrait .t-modes { display: none; }
.portrait .t-rotate {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 8%);
  display: flex; flex-direction: column; align-items: center; gap: 0.45rem; text-align: center;
}
.t-rot-ico {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  border: 2px solid var(--gold); color: var(--gold); font-size: 1.5rem;
  animation: turnhint 2.4s ease-in-out infinite;
}
@keyframes turnhint { 0%,55%,100% { transform: rotate(0deg); } 78% { transform: rotate(-90deg); } }
.t-rot-t { font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; }
.t-rot-s { color: var(--muted); font-size: 0.85rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .t-rot-ico { animation: none; } }

/* Die Wortmarke wird nicht neu ausgelegt, sondern mitgedreht — dieselbe
   Bewegung, die PIXI mit der Welt macht. Rechts, senkrecht, mittig. */
.portrait .logo {
  left: 66%; top: 50%; transform: translate(-50%, -50%) rotate(90deg);
  font-size: clamp(2.4rem, 13vw, 3.6rem);
}

/* ── Spielstand-Auswahl (Querformat: drei Kacheln nebeneinander) ──
   Die Kachel zeigt die ECHTE Truppe als Pixelfiguren statt Rollen-Punkte —
   „Choose your band" wörtlich genommen. Erst quer ist dafür Platz. */
.backbtn { position: absolute; left: calc(env(safe-area-inset-left) + 0.9rem); top: calc(env(safe-area-inset-top) + 0.7rem);
  width: 30px; height: 30px; border-radius: 8px; z-index: 2; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18); background: rgba(18,22,31,0.8); color: var(--text);
  display: grid; place-items: center; font-size: 0.95rem; font-weight: 700; }
.slots-head { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 0.9rem); text-align: center; }
.slots-title { font-family: var(--font-head); font-weight: 700; font-size: 1.22rem; color: var(--gold); }
.slots-sub { font-size: 0.76rem; color: var(--muted); font-weight: 600; margin-top: 0.1rem; }
.slot-list {
  position: absolute; top: calc(env(safe-area-inset-top) + 3.9rem); bottom: calc(env(safe-area-inset-bottom) + 1rem);
  left: calc(env(safe-area-inset-left) + 1.4rem); right: calc(env(safe-area-inset-right) + 1.4rem);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem;
}
.slot-tile {
  position: relative; border-radius: 14px; padding: 0.55rem 0.5rem 0.4rem; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.16); background: rgba(18,22,31,0.76);
  display: flex; flex-direction: column; align-items: center; gap: 0.1rem;
  cursor: pointer; text-align: center;
}
.slot-tile:active { transform: translateY(1px); }
.slot-num { font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); }
.slot-dungeon { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--text); }
.slot-gold { font-family: var(--font-head); font-weight: 700; font-size: 0.92rem; color: var(--gold); }
/* Die Truppe steht auf einer angedeuteten Bodenlinie — dasselbe Motiv wie im Run */
.slot-band { margin-top: auto; width: 100%; height: 58px; padding-bottom: 3px;
  display: flex; align-items: flex-end; justify-content: center; gap: 2px;
  border-bottom: 3px solid var(--floorLine, #4d5568);
  background: linear-gradient(180deg, transparent 60%, rgba(58,65,82,0.5) 100%); }
.slot-band svg { width: 34px; height: 48px; display: block; }
.slot-empty { margin: auto; color: var(--muted); }
.slot-plus { font-size: 1.9rem; color: var(--gold); font-weight: 900; line-height: 1; }
.slot-empty-label { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.slot-empty-sub { font-size: 0.72rem; opacity: 0.7; }
.slot-del {
  position: absolute; top: 0.4rem; right: 0.4rem; width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid rgba(255,77,94,0.4); background: rgba(255,77,94,0.1); color: var(--danger);
  font-size: 0.75rem; font-weight: 900; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.slot-confirm { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.slot-confirm-text { font-size: 0.72rem; color: var(--text); font-weight: 700; line-height: 1.3; }
.slot-confirm-btns { display: flex; gap: 0.4rem; }
.slot-confirm-btns button {
  padding: 0.35rem 0.7rem; border-radius: 999px; border: none; font-family: var(--font); font-weight: 900;
  font-size: 0.72rem; cursor: pointer;
}
.slot-confirm-yes { background: var(--danger); color: #2a0006; }
/* geteilt: Abbrechen in jeder Bestätigung (Slot löschen, Held verkaufen) */
.btn-cancel { background: rgba(255,255,255,0.14); color: var(--text); }

/* ── Hub: Ansichten mit fester Aktionsleiste ──────────────────────────
   Kopf, Bühne und Leiste hängen an den Bildkanten, NICHT am Inhalt. Vorher
   war der Hub-Block vertikal zentriert und seine Höhe hing an der offenen
   Tafel — Reiter und Startknopf wanderten dadurch bei jedem Wechsel um
   37 px. Jetzt bewegt sich nichts mehr. */
#screen-hub { display: block; padding: 0; }

/* Die Kopfzeile teilt sich die oberste Zeile mit Vollbild- und Menü-Knopf —
   deshalb links und rechts deren Freihaltezone einrücken. */
/* Deckungsgleich mit dem Band der Systemknöpfe: dieselbe Oberkante (10px),
   dieselbe Höhe (44px), align-items:center. An der Schriftlinie ausgerichtet
   saß der Text vorher spürbar zu hoch neben den beiden Knöpfen. */
.hub-head {
  position: absolute; top: calc(env(safe-area-inset-top) + 10px); height: 44px;
  left: calc(env(safe-area-inset-left) + var(--sys-clear));
  right: calc(env(safe-area-inset-right) + var(--sys-clear));
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
/* 66px = Knopf-Unterkante (10 + 44) plus 12px Luft. Ohne die stießen die
   Rahmen der Bühne direkt an Vollbild- und Menü-Knopf. */
.hub-stage {
  position: absolute; top: calc(env(safe-area-inset-top) + 66px);
  bottom: calc(env(safe-area-inset-bottom) + 4.2rem);
  left: calc(env(safe-area-inset-left) + 0.8rem);
  right: calc(env(safe-area-inset-right) + 0.8rem);
}
.hub-view { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* Fünf gleiche Slots. Ein ungebrauchter wird unsichtbar, behält aber seinen
   Platz — klappte er weg, rückten die übrigen nach und March läge in jeder
   Ansicht woanders. Dieselbe Regel wie beim CTA im Ende-Screen. */
.hub-bar {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
  left: calc(env(safe-area-inset-left) + 0.8rem);
  right: calc(env(safe-area-inset-right) + 0.8rem);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
.slot {
  height: 46px; border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 1.5px solid rgba(255,255,255,0.14); background: rgba(18,22,31,0.72);
  color: var(--muted); font-family: var(--font-head); font-weight: 700; font-size: 0.84rem;
}
.slot small { font-family: var(--font); font-weight: 600; font-size: 0.6rem; opacity: 0.75; }
.slot.empty { visibility: hidden; }
.slot.nav { color: var(--text); }
.slot.ctx { color: var(--gold); border-color: rgba(255,210,77,0.42); background: rgba(255,210,77,0.08); }
.slot.act { border-color: transparent; color: #2a1c00;
  background: linear-gradient(158deg, var(--gold), #c99516);
  box-shadow: 0 3px 0 rgba(0,0,0,0.32), var(--glow-gold); }
.slot:disabled { opacity: 0.38; cursor: default; box-shadow: none; }
.slot:active:not(:disabled) { transform: translateY(2px); filter: brightness(0.93); }

/* ── Übersicht ── */
.ov { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 250px; gap: 0.7rem; }
.ov-band, .ov-stat {
  border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  background: rgba(12,16,24,0.5); padding: 0.6rem 0.7rem;
}
.ov-band { display: flex; flex-direction: column; min-height: 0; }
/* Die Linie mittig im Feld statt oben angeklebt — sie ist der Inhalt. */
#ov-line { margin: auto 0; }
.ov-side { display: flex; flex-direction: column; gap: 0.5rem; }
.ov-stat { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ov-k { font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.ov-v { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: var(--gold); }
.ov-s { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.hub-title { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--gold); flex: 1;
  text-shadow: var(--glow-gold); }
.hub-gold { font-size: 1rem; color: var(--muted); font-weight: 700; }
/* Gleiche Größe wie die Überschrift — beide sind Kopfzeilen-Information,
   und die Zahl ist die, nach der der Spieler ständig schaut. */
.hub-gold strong { color: var(--gold); font-size: 1.2rem; text-shadow: var(--glow-gold); }
/* ── Bank ── */
.bank-split { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.bank-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 0.3rem; min-height: 0; }
.bank-slot {
  border-radius: 8px; border: 1.5px solid var(--bc, rgba(255,255,255,0.12));
  background: rgba(18,22,31,0.7); cursor: pointer; padding: 0.2rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem;
  min-height: 46px;
}
.bank-slot.empty { border-style: dashed; opacity: 0.4; cursor: default; }
.bank-slot.sel { box-shadow: 0 0 0 2px var(--gold), var(--glow-gold); }
.bank-fig { width: 34px; height: 48px; display: block; }
.bank-slot-name { font-size: 0.5rem; font-weight: 700; color: var(--bc, #fff); line-height: 1; text-align: center; }
/* Zeile statt Spalte: links der Held, rechts seine Werte. Als Spalte war das
   Panel zu zwei Dritteln leer. */
.bank-detail {
  border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.12); background: rgba(0,0,0,0.28);
  padding: 0.7rem 0.8rem; display: flex; gap: 0.9rem; min-height: 0; overflow: auto;
}
.bd-hero { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.bd-hero svg { width: 74px; height: 104px; display: block; }
.bd-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.bank-empty { color: var(--muted); font-size: 0.75rem; font-weight: 700; margin: auto; text-align: center; }
.bd-name { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: #fff; }
.bd-rar { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--rc); }
.bd-stats { display: grid; grid-template-columns: auto 1fr; gap: 0.05rem 0.5rem; font-size: 0.66rem; }
.bd-stats dt { color: var(--muted); font-weight: 700; }
.bd-stats dd { color: var(--text); font-weight: 700; }
/* Rückfrage vor dem Verkauf: der Slot in der Leiste wird zu „Sure?", diese
   Zeile sagt wofür. Kein eigener Dialog — er verdeckte das Helden-Detail. */
.bd-confirm { margin-top: auto; font-size: 0.68rem; color: var(--danger); font-weight: 700; line-height: 1.3; }

/* ── Skilltree ── */
.skill-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; overflow: auto; }
.skill-col { display: flex; flex-direction: column; gap: 0.3rem; min-height: 0; }
.skill-col-head {
  text-align: center; font-family: var(--font-head); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--sc, var(--text)); padding-bottom: 0.1rem;
}
.skill-node {
  flex: 1; border-radius: 8px; padding: 0.4rem 0.35rem; border: 1.5px solid rgba(255,255,255,0.14);
  background: rgba(18,22,31,0.7); display: flex; flex-direction: column; gap: 0.1rem; text-align: center;
  min-height: 48px; justify-content: center;
}
.skill-node-name { font-family: var(--font-head); font-weight: 700; font-size: 0.62rem; color: #fff; line-height: 1.1; }
.skill-node-desc { font-size: 0.5rem; color: var(--muted); line-height: 1.2; }
.skill-node-cost { font-size: 0.6rem; font-weight: 900; color: var(--gold); font-family: var(--font-head); }
.skill-node.owned { border-color: var(--sc, var(--gold)); background: color-mix(in srgb, var(--sc, var(--gold)) 16%, rgba(18,22,31,0.7)); }
.skill-node.owned .skill-node-desc { color: var(--text); }
.skill-node.buyable { cursor: pointer; }
.skill-node.buyable:active { transform: translateY(1px); }
.skill-node.cant { opacity: 0.55; }
.skill-node.locked { opacity: 0.35; }

/* ── Skill-Bar (aktive Fähigkeiten im Run) ── */
.skill-bar {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 0.6rem); z-index: 6;
  display: flex; justify-content: center; gap: 0.5rem; pointer-events: none;
}
.skill-btn {
  position: relative; overflow: hidden; pointer-events: auto;
  padding: 0.5rem 1rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.25);
  background: rgba(12,16,24,0.82); color: var(--text); cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: 0.78rem;
}
.skill-btn:disabled { color: var(--muted); cursor: default; }
.skill-btn-name { position: relative; z-index: 1; }
.skill-btn-fill {
  position: absolute; inset: 0; left: auto; width: 0%; background: rgba(0,0,0,0.55);
  transition: width 0.1s linear;
}
/* ── Shop ── */
/* flex:1 — die Bühne hat seit dem Leisten-Umbau eine feste Höhe, und ohne
   das standen die Karten auf ihrer Mindesthöhe mit 140 px Leere darunter. */
.shop-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.card-item {
  position: relative; border-radius: 10px; padding: 0.5rem 0.25rem;
  border: 1.5px solid var(--cc, rgba(255,255,255,0.2)); background: rgba(18,22,31,0.7);
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  /* center statt space-between: die Karte füllt jetzt die ganze Bühnenhöhe,
     auseinandergezogen ständen Portrait und Preis an den Kartenrändern. */
  cursor: pointer; min-height: 128px; justify-content: center; text-align: center;
}
.card-item.bought { opacity: 0.28; pointer-events: none; }
.card-item.cant { opacity: 0.5; }
.card-portrait { width: 44px; height: 44px; }
.card-name { font-family: var(--font-head); font-weight: 700; font-size: 0.64rem; line-height: 1.05; color: #fff; }
.card-rar { font-size: 0.52rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--cc); }
.card-stats { font-size: 0.55rem; color: var(--muted); line-height: 1.3; }
.card-price { font-size: 0.78rem; font-weight: 900; color: var(--gold); font-family: var(--font-head); }
.card-price.short { color: var(--danger); }
/* Reroll, Bandgröße und der Start-Knopf leben nicht mehr hier: der Reroll
   sitzt in der Aktionsleiste, die Bandgröße in der Überschrift, und March
   ist Slot 5. Die Karten bekommen dadurch die ganze Bühne. */

/* ── Ende-Screen ── */
/* ── Ende-Screen ────────────────────────────────────────────────────
   Zwei Zustände, ein Screen. Beide im Querformat ausgelegt.
   Entwurf: tools/html/side9-gameover-mockups.html (Richtung B) */
#screen-over { display: block; padding: 0; }
.go-title { font-family: var(--font-head); font-weight: 700; font-size: 1.85rem; line-height: 1; }
.go-title.win { color: var(--gold); text-shadow: 0 0 22px rgba(255,210,77,0.45); }
.go-title.lose { color: var(--danger); text-shadow: 0 0 22px rgba(255,77,94,0.45); }
.go-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.17em; text-transform: uppercase; color: var(--muted); }
.go-value { font-family: var(--font-head); font-weight: 700; font-size: 1.9rem; line-height: 1; color: var(--gold); }
.go-best { font-size: 0.76rem; color: var(--muted); font-weight: 600; }

/* ── Sieg: Zwischenschirm ── */
.go-win {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  padding: calc(env(safe-area-inset-top) + 0.7rem) 1rem calc(env(safe-area-inset-bottom) + 0.7rem);
}
.v-gold { font-family: var(--font-head); font-weight: 700; font-size: 2.2rem; color: var(--gold); }
.v-gold small { font-size: 0.45em; color: var(--muted); margin-left: 0.2em; }
.v-sub { font-size: 0.9rem; color: var(--text); font-weight: 700; }
/* Der Sieg-Zwischenschirm wartet auf einen Tap — der Hinweis muss das zeigen.
   Die Regel ging beim Titel-Umbau (a0c83cc) mit der alten Titel-CSS verloren,
   die Klasse blieb am Markup stehen und war seither unformatiert. */
.tap-hint { color: var(--text); font-weight: 700; font-size: 0.92rem; opacity: 0.85;
  animation: blink 1.3s ease-in-out infinite; }
@keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) { .tap-hint { animation: none; } }
.v-strip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 86px;
  display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding-bottom: 8px;
  border-bottom: 3px solid var(--floorLine);
  background: linear-gradient(180deg, transparent 55%, rgba(58,65,82,0.4) 100%);
}
.v-strip svg { width: 34px; height: 48px; display: block; }
.v-strip .fallen { filter: grayscale(1) brightness(0.42); }
.v-strip .fallen svg { transform: rotate(84deg) translateY(2px); }

/* ── Niederlage: die Marschlinie ── */
.go-lose {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 0.6rem) calc(env(safe-area-inset-right) + 1.6rem)
           calc(env(safe-area-inset-bottom) + 0.6rem) calc(env(safe-area-inset-left) + 1.6rem);
}
.b-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.b-nums { display: flex; align-items: flex-end; gap: 1.5rem; text-align: right; }
.b-line { position: relative; height: 66px; margin: 0.4rem 0 0.3rem; }
.b-track { position: absolute; left: 0; right: 0; top: 38px; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; }
.b-done { position: absolute; left: 0; top: 38px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, #c99516, var(--gold)); }
.b-break { position: absolute; top: 30px; width: 3px; height: 20px; background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.b-node {
  position: absolute; top: 31px; width: 18px; height: 18px; border-radius: 50%; transform: translateX(-50%);
  display: grid; place-items: center; font-size: 0.55rem; font-weight: 900; font-family: var(--font-head);
}
.b-node.done { background: var(--gold); color: #2a1c00; }
.b-node.boss { background: var(--boss, #a83232); color: #fff; }
/* Nur in der laufenden Kampagne (Übersicht): der nächste Dungeon als offener
   Ring — das Gegenstück zum roten Bruch im Ende-Screen. Was danach kommt,
   steht blass da: sichtbar als Weg, aber nicht als Erreichtes. */
.b-node.now { background: transparent; border: 2px solid var(--gold); color: var(--gold); box-shadow: var(--glow-gold); }
.b-node.future { background: rgba(255,255,255,0.1); color: var(--muted); }
.b-node.boss.future { background: rgba(168,50,50,0.4); color: rgba(255,255,255,0.6); }
.b-death { position: absolute; top: 4px; transform: translateX(-50%); width: 22px; height: 26px; }
.b-death svg { width: 100%; height: 100%; display: block; }
.b-tick { position: absolute; top: 60px; transform: translateX(-50%); font-size: 0.56rem; color: var(--muted); font-weight: 700; white-space: nowrap; }
.b-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.b-stats { min-width: 190px; }
.b-tally { display: flex; align-items: baseline; gap: 0.4rem; margin-top: 0.2rem; font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.b-tally b { font-family: var(--font-head); font-size: 1rem; color: var(--text); margin-right: 0.12rem; }
.b-tally .dead b { color: var(--danger); }
.b-tally .sep { opacity: 0.45; }

/* Rang: drei Zustände, weil rankDelta() drei liefert (assets/js/rank-spec.js).
   Ein Absturz zeigt bewusst kein Delta — der Rang fällt nur, wenn andere
   besser werden, und das dem eigenen Lauf anzurechnen wäre falsch zugeordnet. */
.go-rank { display: flex; align-items: center; justify-content: flex-end; gap: 0.3rem;
  font-family: var(--font-head); font-size: 1.05rem; min-height: 26px; white-space: nowrap; }
.go-rank .from { color: var(--muted); font-size: 0.9rem; text-decoration: line-through; text-decoration-color: rgba(139,149,167,0.5); }
.go-rank .arrow { color: var(--muted); font-size: 0.85rem; }
.go-rank .hash { color: var(--muted); font-size: 0.8rem; margin-right: -0.14rem; }
.go-rank .now { color: var(--gold); font-size: 1.35rem; }
/* Gold statt Grün wie überall sonst: Gravity 9 färbt den Rang-Pfeil ebenfalls
   im eigenen Akzent (style.css § .go-rank), es ist keine feste Projektfarbe. */
.go-rank .up { color: var(--gold); font-size: 0.78rem; font-weight: 700; background: rgba(255,210,77,0.14); border-radius: 999px; padding: 0.05rem 0.38rem; }
.go-rank .dots { display: none; }
.go-rank.pending .dots { display: inline-block; }
.go-rank.pending .dots i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); margin-right: 4px; opacity: 0.45; }

/* CTA-Zone: Höhe bleibt reserviert, auch solange kein CTA läuft — sonst
   wandert „New Band" von Kampagne zu Kampagne aus dem Daumenweg. */
.go-cta-zone { min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; }
.cta-btn { border-radius: 999px; padding: 0.5rem 1.2rem; border: 1.5px solid var(--frost); background: rgba(12,20,30,0.8);
  color: var(--frost); font-family: var(--font-head); font-weight: 700; font-size: 0.9rem; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 1px; }
.cta-btn small { font-family: var(--font); font-weight: 600; font-size: 0.63rem; opacity: 0.7; }
/* Läuft kein CTA, bleibt der Knopf stehen und wird nur unsichtbar — sonst
   springt „New Band" von Kampagne zu Kampagne. Schlägt .hidden absichtlich. */
.cta-btn.hidden { display: flex !important; visibility: hidden; }
.go-note { font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.go-actions { text-align: center; }
.again-btn { border: none; border-radius: 999px; padding: 0.85rem 2.4rem;
  background: linear-gradient(158deg, var(--gold), #c99516); color: #2a1c00;
  font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; box-shadow: 0 4px 0 rgba(0,0,0,0.3); cursor: pointer; }
.again-btn:active { box-shadow: 0 2px 0 rgba(0,0,0,0.3); filter: brightness(0.93); }
.go-quiet { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.45rem; }
.quiet-btn { background: none; border: none; color: var(--muted); font-family: var(--font); font-weight: 700;
  font-size: 0.74rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ── Bottom sheets (Name · Register) ──
   Querformat: die Sheets bleiben schmal und mittig statt bildschirmbreit —
   ein Eingabefeld über 900 px hat keinen Bezug mehr zum Daumen. Über dem
   Ende-Screen (z-index 10), unter dem In-Game-Menü (900). */
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(6,8,14,0.75); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 0.25s;
}
.sheet-backdrop.open { opacity: 1; pointer-events: all; }
.sheet {
  position: fixed; z-index: 21; bottom: 0; left: 50%; width: min(460px, 100%);
  background: #12161f; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px 20px 0 0;
  padding: 0.85rem calc(env(safe-area-inset-right) + 1rem)
           calc(env(safe-area-inset-bottom) + 1.2rem)
           calc(env(safe-area-inset-left) + 1rem);
  display: flex; flex-direction: column; gap: 0.5rem;
  transform: translate(-50%, 100%); transition: transform 0.3s cubic-bezier(0.32, 1, 0.32, 1);
}
.sheet.open { transform: translate(-50%, 0); }
.sheet-handle { width: 36px; height: 4px; background: rgba(255,255,255,0.14); border-radius: 2px; align-self: center; }
.sheet-title { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--muted);
  text-align: center; letter-spacing: 0.06em; text-transform: uppercase; }
.sheet-sub { margin: 0; font-size: 0.82rem; line-height: 1.4; opacity: 0.7; text-align: center; }
.reg-input { width: 100%; padding: 0.65rem 0.9rem; border: 1.5px solid rgba(255,255,255,0.18); border-radius: 8px;
  background: rgba(255,255,255,0.07); color: #fff; font-family: var(--font); font-size: 1rem; outline: none; }
.reg-input + .reg-input { margin-top: 6px; }
.reg-input::placeholder { opacity: 0.4; }
.reg-input:focus { border-color: rgba(255,255,255,0.45); }
.reg-error { font-size: 0.82rem; font-weight: 700; color: var(--danger); }
.reg-row { display: flex; gap: 0.55rem; margin-top: 6px; }
.reg-submit { flex: 1; padding: 0.7rem; border: none; border-radius: 8px; background: var(--gold); color: #2a1c00;
  font-family: var(--font); font-weight: 900; font-size: 1rem; cursor: pointer; }
.reg-skip { padding: 0.7rem 1rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 8px;
  background: transparent; color: rgba(255,255,255,0.45); font-family: var(--font); font-weight: 700; font-size: 0.9rem; cursor: pointer; }
.reg-saved { font-size: 0.95rem; font-weight: 700; color: var(--gold); text-align: center; }