/* Timeline Card Battler – taktisches Dark-Theme (Spec #89/#110: schnelle Lesbarkeit). */
:root {
  --bg: #0d1017; --bg2: #141a24; --panel: #1a2130; --panel2: #222c3d;
  --line: #2c384c; --text: #e6ecf5; --muted: #8494ac;
  --accent: #4da3ff; --accent2: #6b5dff;
  --attack: #ff5d5d; --defense: #4da3ff; --trap: #b06bff; --instant: #46d98a;
  --ok: #46d98a; --bad: #ff6b6b; --gold: #ffce4d; --legendary: #ff7a1a;
  --radius: 10px; --shadow: 0 6px 20px rgba(0,0,0,.35);
   /* Menü-Titelbildschirm ("Hand of Chronos", s. screens/menu.js): eigene Schriften, bewusst nur dort
     eingesetzt (App-weite UI bleibt beim bestehenden system-ui-Stack). */
  --font-display: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-menu: 'Manrope', system-ui, "Segoe UI", sans-serif;
  /* Chronos-Akzentfarben: global (nicht nur .menu-screen), damit .btn-chrono & Co. auch in der Lobby
     (screens/lobby.js, "konsistenter Stil") dieselben Töne treffen. */
  --menu-gold: #ffce4d; --menu-amber: #ff7a1a;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 50% -10%, #182236 0%, var(--bg) 60%);
  color: var(--text); font-family: var(--font-menu); font-size: 15px; line-height: 1.45;
}
/* Einheitlicher "Hand of Chronos"-Look APP-WEIT (nicht nur Menü/Lobby): Überschriften in Cinzel,
   Buttons in Gold-Akzent statt Blau – greift automatisch in Shop/Profil/Deckeditor/Spieler-Minikarte/
   Kampf-HUD, da diese alle dieselben globalen .btn-/h2-/h3-Klassen nutzen. */
h1, h2, h3 { margin: 0 0 .5rem; font-weight: 700; font-family: var(--font-display); }
.muted { color: var(--muted); } .small { font-size: .8rem; } .center { text-align: center; }

/* ---- Buttons & Felder ---- */
.btn {
  background: var(--panel2); color: var(--text); border: 1px solid rgba(255,206,77,.28);
  padding: .55rem 1rem; border-radius: var(--radius); cursor: pointer; font-weight: 700;
  font-family: var(--font-display); letter-spacing: .01em;
  transition: transform .06s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: #2a3548; border-color: var(--menu-gold); box-shadow: 0 0 16px -6px rgba(255,206,77,.5); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn--primary { background: linear-gradient(180deg, #ffe9b0, var(--menu-gold) 55%, var(--menu-amber)); border-color: transparent; color: #241705; }
.btn--primary:hover { filter: brightness(1.08); box-shadow: 0 0 20px -6px rgba(255,122,26,.65); }
.btn--ghost { background: transparent; }
.btn--danger { border-color: #4a2530; color: #ff9b9b; }
.btn--danger:hover { background: #37202a; border-color: var(--bad); box-shadow: 0 0 16px -6px rgba(255,107,107,.45); }
.btn--small { padding: .3rem .6rem; font-size: .82rem; }
.btn--icon { padding: .3rem .55rem; }
.btn--block { width: 100%; display: block; }
.field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; }
.field span { font-size: .82rem; color: var(--muted); }
input, select {
  background: var(--bg2); color: var(--text); border: 1px solid var(--line);
  padding: .55rem .7rem; border-radius: 8px; font-size: 1rem; width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); }
.tag { background: var(--panel2); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .4rem; font-size: .7rem; color: var(--muted); }
.tag--you { color: var(--accent); border-color: var(--accent); }
.tag--ready { color: var(--ok); border-color: #2c5a45; }
.notice--error { color: var(--bad); margin-top: .6rem; }

.screen { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* ---- Menü: Titelbildschirm "Hand of Chronos" – Spiel-Look statt Formular-/Webseiten-Panels ---- */
.menu-screen {
  font-family: var(--font-menu); max-width: 1180px; margin: 0 auto;
  padding: clamp(0, 5vw, 3.5rem) clamp(1rem, 4vw, 2.5rem) 0; position: relative;
}

/* Hero: Logo (Uhr + Karte) + Titel + Slogan, atmosphärischer Glow statt Panel-Rahmen. */
.menu-hero { position: relative; text-align: center; padding: 1.5rem 0 2.2rem; overflow: hidden; }
.menu-hero__glow {
  position: absolute; inset: -40% -10% auto -10%; height: 480px; pointer-events: none; z-index: 0;
  background:
    radial-gradient(420px 280px at 50% 30%, rgba(255,206,77,.16), transparent 70%),
    radial-gradient(600px 360px at 50% 10%, rgba(255,122,26,.10), transparent 65%),
    radial-gradient(900px 500px at 50% 0%, rgba(77,163,255,.08), transparent 70%);
  filter: blur(2px);
}
.menu-hero__mark { position: relative; z-index: 1; width: 128px; height: auto; margin: 0 auto .6rem; display: block;
  filter: drop-shadow(0 0 18px rgba(255,206,77,.25)); }
.mark-clock__hand { transform-origin: 30px 30px; animation: menu-tick 60s linear infinite; }
@keyframes menu-tick { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mark-clock__hand { animation: none; } }

.menu-hero__title {
  position: relative; z-index: 1; margin: 0; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 5.4vw, 3.4rem); letter-spacing: .06em; color: #e9edf5; text-transform: uppercase;
}
.menu-hero__title span {
  display: block; font-weight: 900; font-size: 1.18em; letter-spacing: .08em; margin-top: .05em;
  background: linear-gradient(180deg, #ffe9b0 0%, var(--menu-gold) 45%, var(--menu-amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 34px rgba(255,122,26,.35);
}
.menu-hero__tagline {
  position: relative; z-index: 1; margin: .7rem 0 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(.86rem, 1.6vw, 1.05rem); letter-spacing: .05em; color: #c9b98a;
}

/* Aktionsbereich: zwei offene Spalten (Login+Create links / Join+Lobbyliste rechts), kein Box-Layout –
   Trennung nur über einen zarten vertikalen Steg. */
.menu-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(1.2rem, 4vw, 3rem); align-items: start; margin-top: 1.6rem; }
.menu-actions__col { display: flex; flex-direction: column; gap: 1.6rem; min-width: 0; }
.menu-actions__divider { width: 1px; align-self: stretch; background: linear-gradient(180deg, transparent, rgba(255,206,77,.4) 20%, rgba(255,206,77,.4) 80%, transparent); }
.menu-block { min-width: 0; }
.menu-block--cta { margin-top: .2rem; }

.menu-field { display: block; }
.menu-field__label { display: block; font-family: var(--font-display); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--menu-gold); margin-bottom: .5rem; }
.menu-field__row { display: flex; gap: .6rem; }
.menu-field__row input {
  flex: 1 1 auto; min-width: 0; background: transparent; border: none; border-bottom: 2px solid rgba(255,206,77,.35);
  border-radius: 0; color: #f2f0e6; font-size: 1.05rem; font-family: var(--font-menu); padding: .5rem .1rem; transition: border-color .2s;
}
.menu-field__row input:focus { outline: none; border-bottom-color: var(--menu-gold); }
.menu-field__row input::placeholder { color: #5c6270; }
.menu-field__hint { margin: .5rem 0 0; font-size: .74rem; color: var(--muted); }

/* Chronos-Buttons: angeschrägte Ecken statt runder Standard-Buttons, Primär = Metall-Verlauf. */
.btn-chrono {
  --clip: 8px; font-family: var(--font-display); font-weight: 600; letter-spacing: .04em; font-size: .88rem;
  background: rgba(255,206,77,.08); border: 1px solid rgba(255,206,77,.5); color: var(--menu-gold);
  padding: .6rem 1.15rem; cursor: pointer; white-space: nowrap;
  clip-path: polygon(var(--clip) 0, 100% 0, 100% calc(100% - var(--clip)), calc(100% - var(--clip)) 100%, 0 100%, 0 var(--clip));
  transition: transform .12s ease, background .15s, box-shadow .15s;
}
.btn-chrono:hover { background: rgba(255,206,77,.16); box-shadow: 0 0 22px -4px rgba(255,206,77,.5); }
.btn-chrono:active { transform: translateY(1px); }
.btn-chrono:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.btn-chrono--primary {
  text-align: center; font-size: 1rem; padding: .85rem 1.2rem;
  background: linear-gradient(180deg, #ffe9b0, var(--menu-gold) 55%, var(--menu-amber));
  color: #241705; border-color: transparent; box-shadow: 0 10px 26px -10px rgba(255,122,26,.55);
}
/* Kein `filter` hier: kombiniert mit dem `clip-path` von .btn-chrono erzeugt `filter` in Chrome/Firefox
   dunkle Kanten-Artefakte an den geschrägten Ecken (Filter rastert inkl. Clip-Rand) – der Button wirkte
   dadurch beim Hover fälschlich "abgedunkelt"/deaktiviert statt aktiv. Stattdessen: hellerer Verlauf direkt. */
.btn-chrono--primary:hover {
  background: linear-gradient(180deg, #fff6df, #ffe9b0 50%, var(--menu-gold));
  box-shadow: 0 12px 30px -8px rgba(255,122,26,.85);
  transform: translateY(-1px);
}
.btn-chrono--ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn-chrono--ghost:hover { border-color: var(--menu-gold); color: var(--menu-gold); background: rgba(255,206,77,.08); }
.btn-chrono--danger { background: transparent; border-color: rgba(255,107,107,.5); color: #ff9b9b; }
.btn-chrono--danger:hover { background: rgba(255,107,107,.12); box-shadow: 0 0 22px -6px rgba(255,107,107,.6); border-color: var(--bad); }
/* Volle Breite + etwas Abstand darunter (eigenständiger CTA statt Reihen-Button, s. Menü „Create Lobby"
   und Lobby „Profile & Deck Editor"). */
.btn-chrono--block { width: 100%; display: block; }
.btn-chrono--profile { width: 100%; display: block; margin-bottom: 1rem; font-size: 1rem; padding: .8rem 1.2rem; }
.btn-chrono--small { padding: .3rem .6rem; font-size: .74rem; }

.menu-lobbies__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.menu-lobbies__head h3 { margin: 0; font-family: var(--font-display); font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: #cfd6e4; }
.lobby-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem .3rem; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s; }
.lobby-row:hover { background: rgba(255,206,77,.05); }
.lobby-row__code { font-family: var(--font-display); font-weight: 700; letter-spacing: 1.5px; color: var(--menu-gold); }
.menu-error { margin-top: 1.2rem; }

/* Footer: zentriert wie ein Abspann statt ein weiteres Panel – Feature-Tags + erweiterte Erklärung. */
.menu-footer { margin-top: clamp(2.5rem, 6vw, 4rem); padding: 2rem 0 3rem; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
.menu-footer__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.8rem; }
.menu-footer__grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 2rem; text-align: left; max-width: 980px; margin: 0 auto; }
.menu-footer__col h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--menu-gold); margin: 0 0 .55rem; }
.menu-footer__col p { margin: .4rem 0; font-size: .82rem; line-height: 1.5; color: var(--muted); }
.menu-footer__col p b { color: #cfd6e4; font-weight: 700; }
.rarity-scale { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .6rem; }
.rarity-chip { font-size: .68rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; border: 1px solid currentColor; }
.rarity-chip--common { color: #9aa6bc; }
.rarity-chip--uncommon { color: var(--ok); }
.rarity-chip--rare { color: var(--accent); }
.rarity-chip--epic { color: var(--gold); }
.rarity-chip--legendary { color: var(--legendary); }
.menu-footer__disclaimer { margin: 2rem auto 0; max-width: 640px; font-size: .78rem; color: #7d8aa0; letter-spacing: .02em; }

@media (max-width: 760px) {
  .menu-actions { grid-template-columns: 1fr; }
  .menu-actions__divider { display: none; }
  .menu-footer__grid { grid-template-columns: 1fr; }
}

/* ---- Lobby ---- */
.lobby-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1rem; }
.code-big { font-size: 2rem; letter-spacing: 3px; color: var(--gold); margin: 0; }
.players { display: flex; flex-direction: column; gap: .4rem; }
.player-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: center; padding: .55rem .7rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; }
.player-row.is-ready { border-color: #2c5a45; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #3a465c; }
.dot--on { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.player-row__deck.ok { color: var(--ok); } .player-row__deck.bad { color: var(--bad); }
.player-row__status { color: var(--muted); font-size: .85rem; }
.lobby-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---- Karten (physische Spielkarte, 2:3, schwarz, doppelte Kontur) ----
   .card = flex-Wrapper (Breite/Höhe je Kontext, s. .hand-card/.card--shop/.card-grid .card/.reward-card .card
   weiter unten) + optional der Deckeditor-Stepper darunter (normaler Fluss, sprengt NICHT das 2:3-Verhältnis
   der eigentlichen Kartenfläche). .card__frame = die Karte selbst: dicke WEISSE Außenkontur, aspect-ratio
   2:3 IMMER aus der eigenen Breite abgeleitet (einzige Formquelle -> behebt auch "Karte wird beim Drag&Drop
   schmal", s. ui/dragdrop.js). .card__inner = 1px Raritätskontur INNERHALB der weißen Kontur, enthält den
   gesamten Karteninhalt. */
.card { display: flex; flex-direction: column; width: 148px; user-select: none; }
.card--compact { width: 130px; font-size: .82rem; }
.card--disabled { opacity: .45; filter: grayscale(.4); }
.card--free .card__frame { outline: 2px solid var(--ok); outline-offset: 2px; }
.card__free { font-size: .58rem; font-weight: 800; color: #04240f; background: var(--ok); border-radius: 5px; padding: 0 .28rem; vertical-align: middle; }

.card__frame {
  /* KEIN overflow:hidden hier (bewusst): der Slots-Diamant unten sitzt absichtlich AUF der inneren
     1px-Kontur (halb innerhalb/halb außerhalb, s. .card__slots) und würde sonst abgeschnitten. Das
     Runden der Ecken übernimmt allein .card__inner (dessen eigenes overflow:hidden clippt den
     rechteckigen Header-Hintergrund auf die abgerundete Form) – .card__frame selbst hat keinen Inhalt,
     der über seine eigenen (bereits abgerundeten) Kanten hinausragen könnte. */
  position: relative; flex: none; width: 100%; aspect-ratio: 2 / 3;
  background: #1c1c1c; border: 5px solid #fff; border-radius: 14px;
}
/* Raritätsfarbe als CSS-Var: treibt die innere 1px-Kontur UND den Header-Hintergrund (bestehendes System). */
.card--rar-common { --rar-color: #9aa6bc; } .card--rar-uncommon { --rar-color: var(--ok); }
.card--rar-rare { --rar-color: var(--accent); } .card--rar-epic { --rar-color: var(--gold); }
.card--rar-legendary { --rar-color: var(--legendary); }
.card__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  border: 1px solid var(--rar-color, #9aa6bc); border-radius: 9px; overflow: hidden;
}

/* Kopf: bündig an der inneren Kontur, Hintergrund = Raritätsfarbe. Erste Zeile Seltenheit (klein/fett/
   Großbuchstaben), darunter der Kartenname (etwas größer, weiß, zentriert). Reichlich padding-top, damit
   der Name nicht mit den überlagernden Zeit-/Energie-Kreisen kollidiert (s. u.). */
.card__header { flex: none; background: var(--rar-color, #9aa6bc); text-align: center; padding: 1rem .5rem .4rem; }
.card__rarity { font-size: .52rem; font-weight: 800; letter-spacing: .06em; color: #000; }
.card__name { font-size: .82rem; font-weight: 700; color: #fff; line-height: 1.2; margin-top: .15rem; text-shadow: 0 1px 3px rgba(0,0,0,.65); }

/* Zeit (oben links, Text mit Uhr-Icon) / Energie (oben rechts, fester Kreis): überlagern den Kopf.
   Upgrade-Pfeile wachsen NUR nach innen dazu (s. .upg-arrows) – die Anker-Position bleibt dadurch fest. */
.card__timebadge {
  position: absolute; top: 4px; left: 4px; z-index: 2; display: flex; align-items: center; gap: .22rem;
  background: rgba(16,19,26,.88); border: 1px solid rgba(255,255,255,.5); border-radius: 6px;
  padding: .16rem .4rem; color: #fff; line-height: 1;
}
.card__timebadge .c-ico { font-size: .68rem; opacity: .85; }
.card__timebadge .c-val { font-size: .68rem; font-weight: 800; white-space: nowrap; }
.card__energybadge { position: absolute; top: 4px; right: 4px; z-index: 2; display: flex; align-items: center; gap: 1px; flex-direction: row-reverse; }
.card__energycircle {
  flex: none; width: 16%; min-width: 27px; max-width: 32px; aspect-ratio: 1;
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1; text-align: center;
  background: linear-gradient(150deg, #ffe14d, #ff8a1a); border: 1.5px solid rgba(0,0,0,.3);
  color: #221400; font-weight: 800; font-size: .82rem;
}
/* Upgrade-Pfeile: nur Pfeilspitzen (dreieckig), grün, leicht diagonal versetzt gestapelt. */
.upg-arrows { display: inline-flex; }
.upg-arrow { color: var(--ok); font-size: .55rem; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.upg-arrows .upg-arrow + .upg-arrow { margin-left: -.32em; }
.upg-arrows .upg-arrow:nth-child(odd) { transform: translateY(-1px); }
.upg-arrows .upg-arrow:nth-child(even) { transform: translateY(1px); }

.card__content { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; padding: .3rem .4rem .1rem; }
.card__typetag {
  align-self: flex-start; padding: .04rem .4rem; border-radius: 6px; font-size: .58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; border: 1px solid currentColor; background: rgba(0,0,0,.35);
}
.card__typetag--attack { color: var(--attack); }
.card__typetag--defense { color: var(--defense); }
.card__typetag--trap { color: var(--trap); }
.card__typetag--instant, .card__typetag--effect { color: var(--instant); }
.card__dmgupg { margin-top: .22rem; font-size: .64rem; font-weight: 700; color: var(--ok); }
.card__body { margin-top: .22rem; font-size: .66rem; line-height: 1.3; color: #fff; flex: 1 1 auto; overflow-y: auto; }
.card__target { font-size: .68rem; color: var(--accent); margin-top: .2rem; flex: none; }

/* Slots: Diamant unten mittig, auf der inneren 1px-Kontur. Zahl bleibt horizontal (Gegenrotation),
   Schriftgröße wie die Zeit-Kreis-Zahl (aber nicht fett), damit die Zahl gut lesbar bleibt. */
.card__slots {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 16px; height: 16px; background: #fff; border: 1.5px solid #9aa6bc; z-index: 3;
}
.card__slots-inner {
  position: absolute; inset: 0; display: grid; place-items: center; transform: rotate(-45deg);
  font-size: .62rem; font-weight: 400; color: #8a94a6;
}

.card__stepper { display: flex; align-items: center; justify-content: space-between; margin-top: .4rem; gap: .3rem; flex: none; }
.step { background: var(--bg); border: 1px solid var(--line); color: var(--text); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.step:hover { border-color: var(--accent); }
.step__count { font-size: .78rem; color: var(--muted); }
.draggable { cursor: grab; }
.drag-ghost { position: fixed; transform: translate(-50%, -50%); pointer-events: none; z-index: 999; opacity: .9; box-shadow: var(--shadow); }
body.dragging { cursor: grabbing; }

/* ---- Deckeditor ---- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5,8,14,.7); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 1rem; }
/* Kein min-width hier (zog vorher ALLE Modals auf 920px, egal ob sie schmäler sein wollten – betraf u.a.
   Confirm-/Target-/Zone-/Options-/Playercard-Modal). Nur der Deckeditor braucht die feste Mindestbreite
   für sein Kartenraster, s. `.deck-editor` weiter unten. */
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); width: 100%; max-height: 90vh; display: flex; flex-direction: column; }
.deck-editor { min-width: min(920px, 96vw); }
.modal__head { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.modal__head h2 { margin: 0; }
/* Close-Button IMMER am rechten Rand des Kopfbereichs, unabhängig von der Länge der Überschrift/anderer
   Kopf-Inhalte (mehrere aufeinanderfolgende auto-margins teilen sich denselben freien Platz, harmlos). */
.modal__head > .btn--icon:last-child { margin-left: auto; }
.deck-count { font-weight: 700; margin-left: auto; } .deck-count.ok { color: var(--ok); } .deck-count.bad { color: var(--gold); }
.deck-warn { color: var(--bad); font-weight: 700; font-size: .85rem; }
/* Slot-Auswahl (Standard deck / My Deck 1-3): eigene Reihe über den Typ-Filtern, etwas größere Chips,
   damit sie klar als "welches Deck bearbeite ich" statt als weiterer Kartenfilter lesbar sind. */
.deck-slot-tabs { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 1.2rem .8rem; }
.deck-slot-tabs .chip { font-size: .86rem; padding: .35rem .9rem; }
.deck-tools { display: flex; gap: .6rem; align-items: center; padding: .8rem 1.2rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.filters { display: flex; gap: .35rem; }
.chip { background: var(--bg2); border: 1px solid var(--line); color: var(--muted); padding: .3rem .7rem; border-radius: 20px; cursor: pointer; font-size: .82rem; }
.chip--on { background: var(--menu-gold); color: #241705; font-weight: 700; border-color: transparent; }
.search { max-width: 220px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; padding: 1rem 1.2rem; overflow-y: auto; align-items: start; }
/* Deckeditor-Karten tragen zusätzlich den Stepper (+/-) unterhalb der 2:3-Kartenfläche – .card selbst
   bekommt daher KEIN eigenes aspect-ratio (das sitzt einzig auf .card__frame), sonst würde der Stepper
   entweder abgeschnitten oder die Karte gestreckt. */
.card-grid .card { width: auto; height: auto; }
.modal__foot { display: flex; justify-content: space-between; align-items: center; padding: .9rem 1.2rem; border-top: 1px solid var(--line); }
.target-modal { max-width: 360px; padding: 1.2rem; }
.target-list { display: flex; flex-direction: column; gap: .5rem; margin: .8rem 0; }
.target-btn { text-align: left; }

/* ---- Kampf: Spiel-Layout (Vollbild) ---- */
.game { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.loading { color: var(--muted); text-align: center; padding-top: 40vh; }

/* Bühne */
.scene { position: absolute; inset: 0; z-index: 0; }
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mtn--far { fill: #1b2740; } .mtn--near { fill: #202c45; }
.ground { fill: #171f2c; } .ground-line { fill: #33415a; }
.actors { position: absolute; inset: 0; }
.actor { position: absolute; bottom: 44%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; width: 154px; pointer-events: none; }
.actor--enemy { pointer-events: auto; cursor: crosshair; }
.actor.is-dead { filter: grayscale(.85) brightness(.55); opacity: .55; }
.actor--enemy.drop-hover .avatar { filter: drop-shadow(0 0 10px var(--attack)); }
.actor--enemy.drop-hover .pbox { border-color: var(--attack); box-shadow: 0 0 0 2px var(--attack) inset; }
.actor--ally, .actor--you { pointer-events: auto; }
.actor--ally.drop-hover .avatar, .actor--you.drop-hover .avatar { filter: drop-shadow(0 0 10px var(--ok)); }
.actor--ally.drop-hover .pbox, .actor--you.drop-hover .pbox { border-color: var(--ok); box-shadow: 0 0 0 2px var(--ok) inset; }

.avatar { position: relative; width: 110px; height: 106px; pointer-events: none; }
/* Idle-Bob auf dem SVG; Gegner werden dabei gespiegelt (Bob-Variante mit scaleX). */
.avatar svg { width: 100%; height: 100%; overflow: visible; animation: bob 2.6s ease-in-out infinite; }
.actor--enemy .avatar svg { animation: bob-mirror 2.6s ease-in-out infinite; }
.a-body { fill: var(--c); } .a-foot { fill: var(--c); filter: brightness(.75); } .a-shadow { fill: rgba(0,0,0,.4); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bob-mirror { 0%,100% { transform: translateY(0) scaleX(-1); } 50% { transform: translateY(-6px) scaleX(-1); } }

/* Angriffs-Dash: kurzer Sprung nach vorne und zurück (eigen nach rechts, Gegner nach links). */
.actor--you .avatar.is-dash { animation: dash-r .5s ease; }
.actor--enemy .avatar.is-dash { animation: dash-l .5s ease; }
@keyframes dash-r { 0% { transform: translateX(0); } 40% { transform: translateX(40px); } 100% { transform: translateX(0); } }
@keyframes dash-l { 0% { transform: translateX(0); } 40% { transform: translateX(-40px); } 100% { transform: translateX(0); } }

/* Hüllen-Effekte um den Avatar */
/* Dauerhafter Schild-Ring: sichtbar SOLANGE ein Schild vorhanden ist (Spec #1). */
.avatar.has-shield::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 122px; height: 122px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(77,163,255,.20), rgba(77,163,255,.05) 62%, transparent 72%);
  border: 2px solid rgba(120,190,255,.72); box-shadow: 0 0 18px rgba(77,163,255,.5);
}
/* Kurzer Puls, wenn Schild dazukommt (auf dem dauerhaften Ring). */
.avatar.has-shield.fx-shield-pop::after { animation: shield-pop .48s ease-out; }
/* Schutz-Status (Zauberschutz/Reflektion/Immun) = lila Kugel, vorübergehend. */
.avatar.fx-shield-purple::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 122px; height: 122px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle, rgba(176,107,255,.30), rgba(176,107,255,.07) 62%, transparent 72%);
  border: 2px solid rgba(200,150,255,.8); box-shadow: 0 0 20px rgba(176,107,255,.65); animation: sphere-in .3s ease-out;
}
.avatar.fx-aura-white::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 134px; height: 134px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(255,255,255,.45), rgba(255,255,255,.12) 55%, transparent 70%);
  animation: flare .45s ease-in-out infinite alternate;
}
@keyframes sphere-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes shield-pop { 0% { transform: translate(-50%, -50%) scale(1.28); filter: brightness(1.8); } 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } }
@keyframes flare { from { opacity: .5; transform: translate(-50%, -50%) scale(.92); } to { opacity: .95; transform: translate(-50%, -50%) scale(1.1); } }

/* ---- Angriffs-Visuals: fliegende Projektile + Einschläge (Spec #5) ---- */
.fx-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; overflow: visible; }
.fx-proj { position: absolute; width: 32px; height: 32px; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.fx-proj svg { width: 100%; height: 100%; overflow: visible; }
.fx-proj--orb, .fx-proj--meteor, .fx-proj--shard { filter: drop-shadow(0 0 9px var(--glow, #ffd36b)); }
.fx-proj--meteor { width: 40px; height: 40px; }
/* Feuerschweif hinter dem Meteor (zeigt entgegen der Flugrichtung, dreht mit). */
.fx-proj--meteor::after, .fx-proj--fireball::after, .fx-proj--orb::after {
  content: ''; position: absolute; right: 58%; top: 50%; width: 42px; height: 9px; transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, var(--glow, #ff7a2f)); border-radius: 6px; filter: blur(2px); opacity: .85;
}

/* Einschlag: expandierender Ring; Farbe je Angriffsart. */
.fx-impact { position: absolute; width: 30px; height: 30px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 3px solid #fff; box-shadow: 0 0 12px rgba(255,255,255,.6); animation: impact-ring .5s ease-out forwards; }
.fx-impact--ice { border-color: #a6e6ff; box-shadow: 0 0 12px #58c8ff; }
.fx-impact--fire { border-color: #ff8a3d; box-shadow: 0 0 16px #ff5d2e; }
.fx-impact--poison { border-color: #8fe152; box-shadow: 0 0 12px #4caf2f; }
.fx-impact--shadow { border-color: #c08bff; box-shadow: 0 0 14px #8a3dff; }
.fx-impact--spark { border-color: #cdeaff; box-shadow: 0 0 16px #7cc4ff; animation-duration: .32s; }
.fx-impact--meteor { width: 54px; height: 54px; border-color: #ffb057; border-width: 4px; box-shadow: 0 0 26px #ff5d1a; }
/* Flächen-Schockwellen (Erdbeben/Explosion): groß, doppelter Ring. */
.fx-impact--quake, .fx-impact--explosion { width: 60px; height: 60px; border-width: 4px; animation-duration: .6s; }
.fx-impact--quake { border-color: #d8b27a; box-shadow: 0 0 24px rgba(180,140,80,.8); }
.fx-impact--explosion { border-color: #ff9a3d; box-shadow: 0 0 30px #ff5d2e; }
/* Nahkampf-Schnitt: kurzer heller Strich statt Ring. */
.fx-impact--slash { border: none; width: 56px; height: 8px; border-radius: 5px; box-shadow: 0 0 12px rgba(255,255,255,.7);
  background: linear-gradient(90deg, transparent, #fff 45%, #fff 55%, transparent);
  transform: translate(-50%, -50%) rotate(-35deg); animation: slash-flash .32s ease-out forwards; }
/* Blitz-Zickzack. */
.fx-bolt { position: absolute; pointer-events: none; animation: bolt-flash .3s ease-out forwards; }
.fx-bolt svg { filter: drop-shadow(0 0 5px #7cc4ff); }

/* Uhr-FX (Zeitkontroll-Karten): poppt über dem Avatar auf. */
.fx-clock { position: absolute; left: 0; bottom: 6px; transform: translateX(-50%); width: 46px; height: 46px; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(120,200,255,.7)); animation: clock-pop 1.1s ease-out forwards; }
.fx-clock svg { width: 100%; height: 100%; }
.fx-clock-hand { transform-origin: 24px 26px; animation: clock-spin 1.1s ease-in-out; }
@keyframes clock-pop { 0% { opacity: 0; transform: translate(-50%, 8px) scale(.4); } 20% { opacity: 1; transform: translate(-50%, -6px) scale(1.1); } 80% { opacity: 1; transform: translate(-50%, -14px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -26px) scale(.9); } }
@keyframes clock-spin { from { transform: rotate(0deg); } to { transform: rotate(300deg); } }

/* Leuchten beim Ausspielen (für alle sichtbar): Energie = grün, Falle = lila. */
.avatar.fx-glow-green::before, .avatar.fx-glow-purple::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; border-radius: 50%;
  transform: translate(-50%, -50%); pointer-events: none; z-index: -1; animation: glow-pulse 1s ease-in-out;
}
.avatar.fx-glow-green::before { background: radial-gradient(circle, rgba(70,217,138,.55), rgba(70,217,138,.12) 55%, transparent 72%); }
.avatar.fx-glow-purple::before { background: radial-gradient(circle, rgba(176,107,255,.55), rgba(176,107,255,.12) 55%, transparent 72%); }
@keyframes glow-pulse { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }

@keyframes impact-ring { 0% { transform: translate(-50%, -50%) scale(.35); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } }
@keyframes slash-flash { 0% { transform: translate(-50%, -50%) rotate(-35deg) scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-35deg) scale(1.15); opacity: 0; } }
@keyframes bolt-flash { 0% { opacity: 0; } 20% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; } }

.pbox { width: 154px; background: rgba(18,24,36,.85); border: 1px solid var(--line); border-radius: 10px; padding: .4rem .5rem; margin-bottom: .4rem; backdrop-filter: blur(3px); pointer-events: none; }
.pbox--you { border-color: var(--accent); }
.pbox__name { font-weight: 700; font-size: .82rem; display: flex; justify-content: space-between; align-items: center; }
.pbox__you { color: var(--accent); font-size: .66rem; border: 1px solid var(--accent); border-radius: 5px; padding: 0 .3rem; }
.pbox__hpbar { position: relative; height: 16px; background: var(--bg); border-radius: 10px; overflow: hidden; margin: .28rem 0; }
.hpfill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #e0574f, #ff8a5c); transition: width .35s ease; }
.hptxt { position: relative; display: block; text-align: center; font-size: .66rem; line-height: 16px; text-shadow: 0 1px 2px #000; }
.pbox__stats { display: flex; justify-content: space-between; font-size: .74rem; }
.st-energy { color: var(--instant); } .st-shield { color: var(--defense); }
.pbox__statuses { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .25rem; }
.status-chip { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem; font-size: .64rem; color: var(--trap); }
/* Dauerschaden-Chips farblich getrennt (Gift grün, Brennen orange) inkl. Restdauer "(n)". */
.status-chip--poison { color: #8fe152; border-color: rgba(143,225,82,.5); }
.status-chip--burn { color: #ff8a3d; border-color: rgba(255,138,61,.5); }
.status-chip--regen { color: var(--ok); border-color: rgba(70,217,138,.5); }
.status-chip--slow { color: #8fd4ff; border-color: rgba(143,212,255,.5); }

/* Countdown-Vorlauf (groß im Spielfeld) */
.countdown { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; pointer-events: none;
  font-size: 24vh; font-weight: 900; color: rgba(255,255,255,.92); text-shadow: 0 8px 30px rgba(0,0,0,.7); }
.countdown--pulse { animation: cd-pulse 1s ease-out; }
.countdown--go { color: var(--gold); animation: cd-go .4s ease-out; }
@keyframes cd-pulse { 0% { transform: scale(1.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1); opacity: .85; } }
@keyframes cd-go { 0% { transform: scale(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }

/* Spieler-Popups */
.pop-layer { position: absolute; bottom: 100%; left: 50%; width: 0; }
.pop { position: absolute; left: 0; transform: translateX(-50%); white-space: nowrap; font-weight: 800; font-size: 1.05rem; text-shadow: 0 2px 4px #000; animation: pop 1.2s ease-out forwards; }
.pop-dmg { color: #ff6b6b; } .pop-heal { color: var(--ok); } .pop-shield { color: var(--defense); }
/* Kritischer Treffer (Precision-Attribut): größer + Glow, sonst gleiche rote Schadensfarbe. */
.pop-crit { font-size: 1.35rem; color: #ff8a3d; text-shadow: 0 0 10px rgba(255,138,61,.8), 0 2px 4px #000; }
.pop-block, .pop-status { color: #cdd7e6; } .pop-trap { color: #ffb14d; } .pop-dot { color: var(--trap); }
.pop-frozen { color: #9fd8ff; }
.pop-death { font-size: 1.7rem; } .pop-cast { color: var(--gold); font-size: .9rem; } .pop-buff { color: var(--instant); }
@keyframes pop { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -42px); } }

/* "Bereit!"-Sprechblase über dem Avatar (nur Planung, für alle sichtbar) */
.ready-bubble { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 4;
  background: var(--ok); color: #04240f; font-weight: 800; font-size: .78rem; padding: .2rem .6rem; border-radius: 12px;
  white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); animation: bubble-in .25s ease-out; }
.ready-bubble::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ok); }
@keyframes bubble-in { 0% { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }

/* HUD: Runde/Phase (oben mittig) */
.hud-top { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 12; display: flex; gap: .6rem; align-items: center; background: rgba(18,24,36,.9); border: 1px solid var(--line); border-radius: 20px; padding: .35rem 1rem; pointer-events: none; }
.hud-top__round { font-weight: 700; }
.hud-top__phase { font-size: .82rem; color: var(--muted); }
.hud-top__phase.phase--execution { color: var(--gold); }

/* HUD: Ereignislog (oben rechts) */
.hud-log { position: absolute; top: 62px; right: 12px; z-index: 12; width: 300px; max-height: 40vh; background: rgba(11,14,20,.88); border: 1px solid var(--line); border-radius: 10px; display: flex; flex-direction: column; backdrop-filter: blur(3px); }
.hud-log__title { padding: .4rem .7rem; font-weight: 700; font-size: .8rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.hud-log__body { overflow-y: auto; padding: .3rem .6rem; }
.logline { font-size: .76rem; padding: .22rem 0; border-bottom: 1px solid rgba(255,255,255,.05); color: #c7d2e2; }

/* HUD: Timeline */
.hud-timeline { position: absolute; left: 12px; right: 190px; bottom: 29vh; z-index: 10; background: rgba(11,14,20,.82); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; backdrop-filter: blur(3px); }
.hud-timeline--exec { right: 12px; bottom: 16px; max-height: 60vh; }
.tl-head { font-size: .78rem; color: var(--muted); margin-bottom: .35rem; }
.tl-plan { display: flex; align-items: stretch; gap: .4rem; min-height: 84px; overflow-x: auto; }
.tl-plan.drop-hover { outline: 2px solid var(--accent); border-radius: 8px; }
.tl-zero { align-self: center; color: var(--muted); font-size: .72rem; }
.tl-hint { align-self: center; color: var(--muted); font-size: .82rem; margin: auto; }
/* Eigene Timeline-Karten: weißer Hintergrund, dunkler Text, voller Kategorie-Rand. */
.tl-chip { flex: none; width: 150px; background: #fff; color: #16181d; border: 2px solid var(--rar-color, var(--line)); border-radius: 8px; padding: .35rem .45rem; display: flex; flex-direction: column; gap: .15rem; }
.tl-chip__top { display: flex; justify-content: space-between; align-items: center; gap: .3rem; }
.tl-chip__name { font-weight: 700; font-size: .8rem; display: inline-flex; align-items: center; gap: .3rem; }
.tl-chip__remove { background: none; border: none; color: #9aa3b0; cursor: pointer; font-size: .8rem; }
.tl-chip__remove:hover { color: var(--bad); }
.tl-chip__info { font-size: .66rem; color: #5c6674; }
.tl-chip__foot { display: flex; justify-content: space-between; align-items: center; gap: .3rem; margin-top: auto; }
.tl-chip__at { font-size: .66rem; color: #a06a00; }
.tl-chip__retarget { background: #eef2f7; border: 1px solid #cbd5e2; color: #1d6fe0; border-radius: 5px; padding: 0 .3rem; font-size: .66rem; cursor: pointer; }

/* Ausführungs-Timelines + Abspielkopf (horizontal scrollbar bei breiten Timelines) */
.xl-scrollwrap { overflow: auto; max-height: 52vh; scroll-behavior: smooth; }
.xl-scroll { position: relative; }
.xl-row { display: flex; align-items: center; height: 40px; border-bottom: 1px solid rgba(255,255,255,.05); }
.xl-row--you { background: rgba(91,140,255,.10); }
.xl-label { width: 96px; flex: none; font-size: .74rem; padding-right: .5rem; text-align: right; color: #c7d2e2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: sticky; left: 0; z-index: 3; background: #0f131b; }
.xl-track { position: relative; height: 40px; flex: none; }
.xl-chip { position: absolute; top: 5px; height: 30px; border-radius: 6px; padding: 0 .4rem; display: flex; align-items: center; gap: .25rem; font-size: .7rem; overflow: hidden; white-space: nowrap; border: 2px solid var(--rar-color, var(--line)); }
/* Hintergrund nach Zugehörigkeit: eigene weiß, Gegner 70% schwarz, gegen MICH gerichtet schwarz. */
.xl-own { background: #fff; color: #16181d; }
.xl-enemy { background: rgba(0,0,0,.7); color: #fff; }
.xl-vsme { background: #000; color: #fff; }
.xl-chip b { font-weight: 700; } .xl-chip em { font-style: normal; }
.xl-own em { color: #5c6674; } .xl-enemy em, .xl-vsme em { color: #d0d8e4; }
.xl-empty { color: var(--muted); font-size: .7rem; padding-left: .4rem; }
.xl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.xl-playhead::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; background: var(--gold); border-radius: 50%; }

/* Bestätigen-Button (rechts, auf Timeline-Höhe) */
.hud-confirm { position: absolute; right: 12px; bottom: 30vh; z-index: 13; width: 162px; background: linear-gradient(180deg, #ffce4d, #efab30); color: #241a00; border: none; font-weight: 800; padding: .75rem 1rem; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); }
.hud-confirm.is-on { background: linear-gradient(180deg, #46d98a, #2fae6b); color: #04240f; }
.hud-confirm:disabled { opacity: .5; cursor: default; }

/* Hand (unten mittig, schwebend). Karten im 2:3-Format; padding-top gibt dem Hover-Lift Platz
   (sonst schneidet der horizontale Scroll-Container den oberen Rand ab -> Overflow-Bug). */
/* right-Inset lässt unten rechts Platz für die Kartenstapel (Opferstapel/Nachziehstapel). */
.hud-hand { position: absolute; left: 0; right: 84px; bottom: 1vh; z-index: 11; display: flex; justify-content: center; pointer-events: none; }
/* overflow-y explizit hidden: CSS promotet ein alleinstehendes overflow-x:auto sonst automatisch auch
   overflow-y auf 'auto' (Spec-Verhalten), wodurch bislang ein unnötiger vertikaler Scrollbalken auftauchte.
   Horizontaler Scrollbalken bewusst im CI-Gold, nur der Anfasser sichtbar (kein Track). */
.hand-fan {
  display: flex; align-items: flex-end; gap: .5rem; padding: 3vh .3rem .8rem; pointer-events: auto;
  max-width: 96vw; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin; scrollbar-color: var(--menu-gold) transparent;
}
.hand-fan::-webkit-scrollbar { height: 6px; }
.hand-fan::-webkit-scrollbar-track { background: transparent; }
.hand-fan::-webkit-scrollbar-thumb { background: var(--menu-gold); border-radius: 999px; }
.hand-card { flex: none; width: auto; height: 24vh; aspect-ratio: 2 / 3; display: flex; flex-direction: column; box-shadow: 0 10px 22px rgba(0,0,0,.5); transition: transform .12s; }
.hand-card .card__body { flex: 1 1 auto; overflow: hidden; }
.hand-card:hover { transform: translateY(-14px); }
.hand-empty { color: var(--muted); padding: 1.5rem; }

/* ---- Kartenstapel (unten rechts): Opferstapel (oben) + Nachziehstapel (unten) ---- */
.hud-piles { position: absolute; right: 12px; bottom: 12px; z-index: 12; display: flex; flex-direction: column; gap: .55rem; pointer-events: none; }
.pile { display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.pile__label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* Karte im 2:3-Format; ein „Stapel"-Look über zwei versetzte Schatten hinter der Karte. */
.pile__card { position: relative; width: 46px; aspect-ratio: 2 / 3; border-radius: 7px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--panel2), var(--panel)); border: 1.5px solid var(--line);
  box-shadow: 3px 3px 0 -1px var(--panel), 3px 3px 0 0 var(--line), 6px 6px 0 -1px var(--panel), 6px 6px 0 0 var(--line); }
.pile__card--draw { border-color: var(--accent); box-shadow: 3px 3px 0 -1px var(--panel), 3px 3px 0 0 var(--accent), 6px 6px 0 -1px var(--panel), 6px 6px 0 0 var(--accent); }
.pile__card--empty { border-style: dashed; opacity: .55; box-shadow: none; }
/* Anzahl als Kreis-Badge auf der Karte. */
.pile__count { min-width: 26px; height: 26px; padding: 0 .2rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .82rem; font-weight: 800; color: var(--text); background: rgba(9,12,18,.9); border: 1.5px solid var(--line); }
.pile__card--draw .pile__count { border-color: var(--accent); color: #fff; }

/* ---- Verbrauchskarten-Auswahl (Opfer/Wiederherstellen) ---- */
.pick-modal { min-width: auto; width: min(760px, 94vw); max-width: 760px; padding: 1.2rem; text-align: center; }
.pick-modal h3 { margin: 0 0 .8rem; }
.pick-list { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-bottom: 1rem; max-height: 62vh; overflow-y: auto; padding: 1rem 0; }
.pick-card { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.pick-card:hover { transform: translateY(-6px); box-shadow: 0 10px 22px rgba(0,0,0,.5); border-color: var(--accent); }
.pick-card__count { position: absolute; top: -6px; left: -6px; background: var(--gold); color: #241a00; font-weight: 800; font-size: .72rem; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--bg2); }

/* ---- Kartenupgrade-Auswahl (Shop, ui/cardPicker.js openCardUpgradeChooser): 2. Schritt desselben
   Picker-Modals – die gewählte Karte GROSS links (mit den echten aktuellen Werten, unverdeckt), die 3
   Kaufoptionen als eigenes Panel DANEBEN statt als Overlay AUF der Karte, damit Karte + Optionen
   gleichzeitig ohne Scrollen sichtbar bleiben. `.pick-modal--wide` vergrößert dafür das Modal selbst. */
.pick-modal--wide { width: min(880px, 96vw); max-width: 880px; }
.upg-focus { display: block; text-align: left; }
.upg-focus__back { margin-bottom: .6rem; }
.upg-focus__wrap { display: flex; gap: 1.2rem; align-items: flex-start; justify-content: center; flex-wrap: wrap; }
.upg-focus__card { cursor: default; width: 200px; flex: 0 0 200px; }
.upg-focus__panel { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 320px; min-width: 260px; max-width: 380px; }
.upg-opt {
  display: grid; grid-template-columns: 1fr auto; column-gap: .6rem; row-gap: .15rem; text-align: left;
  background: rgba(20,26,36,.92); border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
  color: var(--text); cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s;
}
.upg-opt:hover:not(:disabled) { border-color: var(--menu-gold); background: rgba(255,206,77,.1); }
.upg-opt:disabled { opacity: .45; cursor: not-allowed; }
.upg-opt__t { font-weight: 700; font-size: .86rem; grid-column: 1; }
.upg-opt__lvl { color: var(--muted); font-size: .74rem; grid-column: 1; }
.upg-opt__stat { font-size: .82rem; font-weight: 700; color: var(--ok); grid-column: 1; }
.upg-opt__price { font-size: .82rem; color: var(--gold); white-space: nowrap; grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.upg-opt:disabled .upg-opt__price { color: var(--muted); }

/* Zentrales Kurz-Popup nach einem Kartenupgrade-Kauf (Wert-Vorschau nochmal + Puls-Animation). */
.upg-toast {
  position: fixed; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(1); z-index: 900;
  display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none;
  background: rgba(10,13,20,.92); border: 2px solid var(--menu-gold); border-radius: 16px;
  padding: 1.1rem 1.8rem; box-shadow: 0 0 40px -4px rgba(255,206,77,.6);
  animation: upg-toast-in .28s ease-out;
}
.upg-toast__icon { font-size: 2.4rem; }
.upg-toast__name { font-family: var(--font-display); font-weight: 700; color: var(--menu-gold); letter-spacing: .03em; }
.upg-toast__stat { font-size: 1.3rem; font-weight: 800; color: var(--ok); }
.upg-toast--out { opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .4s, transform .4s; }
@keyframes upg-toast-in { from { opacity: 0; transform: translate(-50%, -50%) scale(.8); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---- Floater / Toast ---- */
.floater { position: fixed; transform: translate(-50%, 0); font-weight: 800; font-size: 1.1rem; pointer-events: none; z-index: 500; text-shadow: 0 2px 4px #000; animation: floatUp 1.1s ease-out forwards; }
.flt-dmg { color: #ff6b6b; } .flt-heal { color: var(--ok); } .flt-shield { color: var(--defense); }
.flt-block, .flt-status { color: var(--muted); } .flt-trap { color: #ffb14d; } .flt-dot { color: var(--trap); } .flt-death { font-size: 1.6rem; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 6px); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
.toast { position: fixed; bottom: 1.4rem; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: .6rem 1.1rem; border-radius: 20px; z-index: 600; box-shadow: var(--shadow); transition: opacity .3s; }
.toast--out { opacity: 0; }

/* ---- Ergebnis ---- */
.result { max-width: 640px; text-align: center; }
.result__title { font-size: 3rem; letter-spacing: 4px; margin-top: 1.5rem; }
.result__title.win { color: var(--gold); } .result__title.lose { color: var(--muted); }
.stats { width: 100%; border-collapse: collapse; margin-top: .5rem; }
.stats th, .stats td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); text-align: left; }
.stats .is-winner { color: var(--gold); font-weight: 700; }
.result__actions { display: flex; gap: .6rem; justify-content: center; margin-top: 1.2rem; }

@media (max-width: 640px) {
  .hud-timeline { right: 12px; bottom: 208px; }
  .hud-confirm { right: 12px; bottom: 150px; width: auto; padding: .5rem .8rem; }
  .hud-log { width: 190px; max-height: 28vh; }
  .actor { width: 120px; }
}

/* ==== Lobby: Charakter-Anpassung, Modus & Team (Battle-Royale-Basis) ====
   Gleicher "Hand of Chronos"-Look wie das Menü (Cinzel-Überschriften, Gold-Akzent, .btn-chrono statt .btn) –
   scoped auf .lobby-screen, damit andere Screens (Shop/Deckeditor/Profil), die weiterhin .btn/.panel in ihrer
   bisherigen Optik nutzen, unangetastet bleiben. Bewusst wie eine Game-Lobby statt eines Web-Dashboards:
   Charakter/Modus/Team/Spielerliste liegen DIREKT auf dem Hintergrund (kein .panel-Kasten mehr), dafür
   deutlich größere, goldene Section-Headlines statt kleiner Uppercase-Panel-Titel. */
.lobby-screen h2, .lobby-screen h3 { font-family: var(--font-display); }
.lobby-screen .code-big { font-family: var(--font-display); }
/* Lobby nutzt die volle verfügbare Breite statt der App-weiten .screen-Beschränkung (max-width:1100px) –
   nur hier überschrieben, andere Screens (Menü/Deckeditor/Profil/Shop) bleiben unverändert. */
.lobby-screen--wide { max-width: none; width: 100%; padding-inline: clamp(1rem, 4vw, 3.5rem); box-sizing: border-box; }
.lobby-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-bottom: 1.5rem; }
.lobby-section__h {
  font-size: clamp(1.3rem, 2vw, 1.6rem); color: var(--menu-gold); letter-spacing: .02em;
  margin: 0 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(255,206,77,.18);
}
.mt { margin-top: 1rem; }
.lobby-section .mt { margin-top: 1.8rem; }

/* align-items: stretch -> die Vorschau übernimmt die volle Höhe der Regler-Spalte (Spec: Rahmen so groß
   wie die Werte daneben, Avatar mittig). */
.customizer { display: flex; gap: 1rem; align-items: stretch; }
.cz-preview { flex: 0 0 220px; display: flex; min-height: 260px; }
.cz-canvas { flex: 1; background: radial-gradient(circle at 50% 35%, #131a26, #05070b); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cz-controls { flex: 1 1 auto; display: flex; flex-direction: column; gap: .7rem; min-width: 0; }
.cz-group { display: flex; flex-direction: column; gap: .35rem; }
.cz-label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }

/* 2-Slider Color-Picker (Hue + Brightness, volle 0–100-Spanne, frei ziehbar statt nur klickbar). */
.cz-picker { display: flex; flex-direction: column; gap: .3rem; }
.cz-picker__row { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--muted); }
.cz-picker__row span { flex: 0 0 70px; }
.cz-picker__row input[type="range"] { flex: 1; accent-color: var(--accent); }

/* Hut/Brille als Dropdown (statt Tag-Liste) mit Icon-Ersatz (Emoji-Präfix, keine Icon-Assets vorhanden).
   Eigener "Hand of Chronos"-Look statt Standard-Browser-Select: Cinzel-Schrift wie Buttons/Headlines,
   Gold-Rahmen + eigener Chevron (System-Pfeil per appearance:none entfernt) statt generischer Web-Optik. */
.cz-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 100%; background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ffce4d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right .7rem center / 11px;
  border: 1px solid rgba(255,206,77,.28); color: var(--text); border-radius: 8px;
  padding: .45rem 2rem .45rem .65rem; font-size: .85rem; font-family: var(--font-display);
  cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.cz-select:hover { border-color: var(--menu-gold); }
.cz-select:focus { outline: none; border-color: var(--menu-gold); box-shadow: 0 0 0 3px rgba(255,206,77,.15); }
.cz-select option { font-family: var(--font-menu); background: var(--bg2); color: var(--text); }
#cz-hatcolor-group.is-disabled { opacity: .4; pointer-events: none; }

.mode-select { display: flex; gap: .6rem; margin-bottom: .5rem; }
.mode-btn { flex: 1; font-family: var(--font-display); background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); padding: .7rem; cursor: pointer; text-align: center; }
.mode-btn b { display: block; font-size: .98rem; }
.mode-btn:hover:not(:disabled) { border-color: var(--menu-gold); }
.mode-btn.is-active { border-color: var(--menu-gold); background: linear-gradient(180deg, rgba(255,206,77,.14), rgba(255,206,77,.04)); box-shadow: inset 0 0 0 1px var(--menu-gold); }
.mode-btn:disabled { cursor: default; opacity: .9; }

.team-select { display: flex; flex-wrap: wrap; gap: .5rem; }
.team-btn { --team: #888; font-family: var(--font-display); background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: .4rem .9rem; cursor: pointer; font-weight: 600; }
.team-btn::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--team); margin-right: .45rem; vertical-align: middle; }
.team-btn:hover { border-color: var(--team); }
.team-btn.is-active { border-color: var(--team); box-shadow: inset 0 0 0 1px var(--team); background: color-mix(in srgb, var(--team) 16%, var(--bg2)); }

.pdot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); }
.team-chip { --team: #888; font-size: .72rem; color: var(--team); border: 1px solid var(--team); border-radius: 6px; padding: .06rem .45rem; white-space: nowrap; }
.lobby-screen .player-row { grid-template-columns: auto 1fr auto auto auto; }

/* ==== Overworld (Battle Royale) ==== */
.world-screen { position: fixed; inset: 0; background: #0c1016; }
.world-canvas { position: absolute; inset: 0; }
.world-canvas canvas { display: block; }
.world-hud { position: absolute; inset: 0; pointer-events: none; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.world-hud__top { display: flex; justify-content: space-between; align-items: flex-start; }
.world-hud .btn { pointer-events: auto; }
.hud-pill { background: rgba(16,22,32,.72); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; font-size: .9rem; }
.world-legend { position: absolute; left: 12px; bottom: 12px; display: flex; flex-direction: column; gap: .3rem; background: rgba(16,22,32,.72); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; }
.legend-item { display: flex; align-items: center; gap: .5rem; font-size: .82rem; }
.legend-item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.world-controls { align-self: center; background: rgba(16,22,32,.72); border: 1px solid var(--line); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; color: var(--muted); }
.world-controls kbd { display: inline-block; background: var(--panel2); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35rem; margin: 0 .1rem; font-family: inherit; color: var(--text); }

@media (max-width: 720px) {
  .lobby-cols { grid-template-columns: 1fr; }
  .customizer { flex-direction: column; align-items: center; }
}

/* Aufgeben-Button im Overworld-Kampf + BR-Ergebniszeile */
.hud-surrender { position: absolute; top: 12px; left: 12px; z-index: 14; }
.result__br { font-size: 1.05rem; color: var(--text); margin: .1rem 0 .4rem; }

/* Shop-Prompt (Overworld) + Shop-Modal */
/* Shop-Hinweis: mittig auf dem Bildschirm (aus dem Flow genommen), damit die Steuerungsleiste unten bleibt. */
.shop-prompt { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); pointer-events: auto; cursor: pointer; margin: 0;
  background: rgba(16,22,32,.85); border: 1px solid var(--gold); border-radius: 999px; padding: .45rem 1rem; color: var(--gold); font-weight: 600; }
.shop-prompt:hover { background: rgba(28,36,50,.95); box-shadow: 0 0 12px rgba(255,206,77,.35); }
.shop-prompt kbd { display: inline-block; background: var(--panel2); border: 1px solid var(--gold); border-bottom-width: 2px; border-radius: 5px; padding: 0 .4rem; margin-right: .35rem; font-family: inherit; color: var(--gold); }
.shop-modal { width: min(60vw, 96vw); height: 88vh; overflow: hidden; padding: 1rem; display: flex; flex-direction: column; }
.shop-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: .6rem; margin-bottom: .8rem; }
.shop-head h2 { margin: 0; }
.shop-stats { display: flex; gap: .9rem; flex-wrap: wrap; align-items: center; margin-left: auto; }
.shop-stats b { color: var(--gold); }
.shop-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; flex: 1; min-height: 0; }
/* Jede Spalte füllt die Modalhöhe und scrollt bei Bedarf; die Verkaufsbox streckt sich bis unten. */
.shop-sec { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.shop-sec h3 { font-size: 1.1rem;	margin: 0 0 .5rem; text-align: center;	margin: 1em; border-bottom: 1px solid var(--line); }
/* Slot-Kosten-Badge im Shop (Kauf/Verkauf). */
.shop-card__meta .slots, .shop-sell__row .slots { color: var(--gold); font-weight: 700; }
.shop-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; align-content: start; padding: 1rem; }
.shop-buy { display: flex; flex-direction: column; gap: .4rem; }
.shop-buy .btn { width: 100%; }
.shop-buy.is-out { opacity: .45; }
.card--shop { width: auto; aspect-ratio: 2 / 3; overflow: hidden; }
.shop-qty { color: var(--muted); font-weight: 600; }
.shop-card { background: var(--bg2); border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .35rem; }
.shop-card__name { font-size: .82rem; font-weight: 600; line-height: 1.15; min-height: 2.3em; }
.shop-card__meta { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); }
.shop-card .btn, .shop-perk .btn { width: 100%; }
.shop-card.is-out, .shop-perk.is-out { opacity: .45; }
.shop-perks { display: grid; grid-template-columns: 1fr; gap: .5rem; padding: 1rem; }
.shop-perk { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .25rem; }
.shop-perk__t { display: flex; align-items: center; gap: .4rem; } .shop-perk__t .qty { margin-left: auto; color: var(--muted); font-size: .78rem; }
.shop-upgrade-cta { padding: 0 1rem 1rem; }
.shop-consum { display: flex; flex-direction: column; gap: .5rem; }
.shop-consum .btn { width: 100%; }
.shop-owned__row, .shop-sell__row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .5rem; border-radius: 7px; margin-bottom: .35rem; background: var(--bg2); font-size: .85rem; }
.shop-owned__row { border: 1px solid var(--line); border-left-width: 3px; border-left-color: var(--gold); } /* Perks: eigene Randfarbe, keine Kartenrarität */
.shop-sell__row { border: 1px solid var(--rar-color, var(--line)); } /* Karten: gleichmäßiger Rand in Raritätsfarbe, s. .rar-* weiter unten */
.shop-sell__row > span:first-child { display: flex; align-items: center; gap: .35rem; }
#open-upgrades {
	padding: 2rem 1rem;
}
.badge { font-size: .72rem; padding: .15rem .45rem; border-radius: 6px; white-space: nowrap; }
.badge--locked { color: var(--muted); border: 1px solid var(--line); background: var(--bg); }
.shop-sell { flex: 1; min-height: 120px; overflow: auto; }
.rar { text-transform: capitalize; }
@media (max-width: 760px) {
  .shop-cols { grid-template-columns: 1fr; } .shop-cards { grid-template-columns: repeat(2, 1fr); }
  /* Schmale Screens: gesamtes Modal scrollen statt Spalten strecken. */
  .shop-modal { height: auto; max-height: 90vh; overflow: auto; }
  .shop-sec { overflow: visible; } .shop-sell { flex: none; min-height: 0; }
}
.result__reward { font-size: 1rem; color: var(--gold); margin: 0 0 .9rem; font-weight: 600; }

/* Belohnungs-Overlay (fast Vollbild, Box nur 5% transparent, über dem Kampf) */
.reward-backdrop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; background: rgba(8,10,14,.4); backdrop-filter: blur(2px); }
/* Kurzer XP-/Credits-Gewinn-Vorspann vor dem eigentlichen Reward-Modal (s. ui/reward.js showGainIntro):
   XP-Schritt mit zwei animiert auffüllenden Level-Balken (Run + Profil), Credits-Schritt als Münz-Kachel. */
.gain-intro { display: flex; flex-direction: column; align-items: center; }
.gain-intro__step { opacity: 0; transform: scale(.85); transition: opacity .35s ease, transform .35s ease; }
.gain-intro__step.is-in { opacity: 1; transform: scale(1); }
.gain-intro__step.is-out { opacity: 0; transform: scale(1.1); }
.gain-intro__label {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; color: var(--gold); margin: 0 0 1.4rem;
  text-align: center; text-shadow: 0 0 30px rgba(255,206,77,.6), 0 8px 24px rgba(0,0,0,.7);
}
.gain-bar-row { display: flex; gap: 2.4rem; width: min(760px, 88vw); }
.gain-bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.gain-bar-col__label { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.coin-badge { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.coin-badge__icon {
  width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font-size: 2.6rem;
  background: radial-gradient(circle at 35% 30%, #fff4c2, var(--gold) 62%, #a8790a);
  box-shadow: 0 0 34px rgba(255,206,77,.65), inset 0 -5px 10px rgba(0,0,0,.35);
}
.coin-badge__val { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--gold); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.reward-modal { width: 95vw; max-width: 1280px; height: 92vh; max-height: 92vh; overflow: auto; background: rgba(26,33,48,.95); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.6rem; text-align: center; display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.reward-title { font-size: 2.4rem; margin: 0; letter-spacing: 2px; }
.reward-title.win { color: var(--gold); } .reward-title.lose { color: var(--bad); }
.reward-sub { color: var(--text); margin: .2rem 0 .6rem; font-size: 1.1rem; }
.reward-hint { color: var(--muted); margin: .3rem 0 .7rem; }
/* Karten füllen die Breite gleichmäßig, Hochformat 2:3 mit Mindesthöhe – kein horizontales Scrollen. */
.reward-cards { display: flex; gap: 1rem; justify-content: center; align-items: stretch; flex-wrap: nowrap; width: 100%; margin: .4rem auto; }
.reward-card { flex: 1 1 0; min-width: 0; max-width: 240px; display: flex; flex-direction: column; gap: .5rem; border: 2px solid transparent; border-radius: 12px; padding: .3rem; }
.reward-card .card { width: 100%; aspect-ratio: 2 / 3; min-height: 260px; display: flex; flex-direction: column; position: relative; }
.reward-card .card__body { flex: 1 1 auto; }
.reward-card.is-keep { border-color: var(--ok); } .reward-card.is-sell { border-color: var(--gold); }
.reward-item__badge { position: absolute; top: .4rem; left: .4rem; right: .4rem; background: var(--gold); color: #3a2e00; font-size: .62rem; font-weight: 800; letter-spacing: .5px; text-align: center; border-radius: 6px; padding: .12rem .2rem; }
/* Nicht-Karten-Loot (permanenter Slot/Perk/Consumable) – gleiche Fläche wie eine Karte, andere Optik. */
.reward-item-tile { width: 100%; aspect-ratio: 2 / 3; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 1rem; text-align: center; }
.reward-item-tile__emoji { font-size: 2.4rem; }
.reward-item-tile__name { font-weight: 800; }
.reward-item-tile__desc { font-size: .78rem; color: var(--muted); }
.reward-btns { display: flex; gap: .35rem; width: 100%; }
.reward-btns .btn { flex: 1; padding-left: .4rem; padding-right: .4rem; }
.rw-take.is-on { background: linear-gradient(180deg, var(--ok), #2fa968); border-color: transparent; color: #06301c; }
.rw-sell.is-on { background: linear-gradient(180deg, var(--gold), #d9a92e); border-color: transparent; color: #3a2e00; }
.rw-price { display: inline-flex; align-items: center; justify-content: center; min-width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--gold); color: #3a2e00; font-weight: 700; font-size: .72rem; margin-left: .3rem; padding: 0 .3rem; }
.reward-actions { margin-top: 1.1rem; }

/* ==== Profil (Login-Hinweise + Profil-Modal) ==== */
.login-row { display: flex; gap: .5rem; align-items: stretch; }
.login-row input { flex: 1 1 auto; min-width: 0; }
.login-row .btn { flex: 0 0 auto; }
.notice { border-radius: 8px; padding: .5rem .7rem; margin-top: .5rem; font-size: .86rem; border: 1px solid var(--line); background: var(--bg2); }
.notice--error { color: var(--bad); border-color: #5a2c34; }
.notice--ok { color: var(--ok); border-color: #2c5a45; }
.notice.small { padding: .3rem .55rem; font-size: .78rem; }

.profile-modal { width: min(620px, 96vw); max-height: 90vh; overflow: auto; padding: 1rem; }
.profile-body { display: flex; flex-direction: column; gap: 1rem; }
.profile-top { display: flex; align-items: center; gap: 1rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem;
  background: linear-gradient(145deg, var(--accent), var(--accent2)); color: #fff; flex: none; }
.profile-id { flex: 1 1 auto; min-width: 0; }
.profile-name { font-size: 1.4rem; font-weight: 800; }
.profile-sub { color: var(--muted); font-size: .82rem; }
.profile-level { text-align: center; flex: none; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .3rem .8rem; }
.profile-level span { display: block; font-size: .64rem; color: var(--muted); letter-spacing: 1px; }
.profile-level b { font-size: 1.5rem; color: var(--gold); }

.profile-xp__label { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-bottom: .3rem; }
.profile-xp__bar { height: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.profile-xp__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }

.profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.profile-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .15rem; }
.profile-stat__k { font-size: .72rem; color: var(--muted); }
.profile-stat__v { font-size: 1.02rem; font-weight: 700; }

/* Kampfstatistiken (Profil-Modal Stats-Tab + fremdes Spielerprofil, s. ui/profile.js/playercard.js). */
.stats-block { margin-bottom: 1.1rem; }
.stats-block__h { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--menu-gold); margin: 0 0 .5rem; }
.stats-pve-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stats-pve-table td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); }
.stats-pve-table td:last-child { text-align: right; font-weight: 700; }
.stats-pve-table tr:last-child td { border-bottom: none; }

.profile-cards__head { font-size: .82rem; color: var(--muted); margin-bottom: .4rem; }
.profile-cards__list { display: flex; flex-wrap: wrap; gap: .35rem; padding: .2rem; }
/* Kompakte Karten-"Tags" (Profil/Playercard/Shop-Verkaufsliste/Timeline): gleichmäßiger 1px Rahmen in der
   RARITÄTS-Farbe (statt einseitig dickerem Typ-Rand) + Typ-Icon in Typfarbe vor dem Namen (s. ui/card.js
   typeIconHtml + .type-icon-- unten). Eine Quelle für alle "Karte als Tag"-Stellen (.pc-chip/.shop-sell__row/
   .tl-chip/.xl-chip teilen dieselbe .rar-*-Farbskala). */
.rar-common { --rar-color: #9aa6bc; } .rar-uncommon { --rar-color: var(--ok); }
.rar-rare { --rar-color: var(--accent); } .rar-epic { --rar-color: var(--gold); }
.rar-legendary { --rar-color: var(--legendary); }
.type-icon { display: inline-flex; width: 11px; height: 11px; flex: none; vertical-align: -1px; }
.type-icon svg { width: 100%; height: 100%; display: block; }
.type-icon--attack { color: var(--attack); } .type-icon--defense { color: var(--defense); }
.type-icon--trap { color: var(--trap); } .type-icon--effect, .type-icon--instant { color: var(--instant); }

.pc-chip { font-size: .72rem; border: 1px solid var(--rar-color, var(--line)); border-radius: 6px; padding: .12rem .5rem; background: var(--bg2); display: inline-flex; align-items: center; gap: .3rem; }
.pc-chip--perk-perm { border-color: var(--gold); } .pc-chip--perk-run { border-color: var(--accent); }
@media (max-width: 620px) { .profile-stats { grid-template-columns: repeat(2, 1fr); } }

/* ==== Deck-Ökonomie: Slot-Kosten, gesperrte/nur-lese Karten, Reset-Dialog ====
   (Slot-Diamant + Kartenupgrade-Pfeile sind jetzt fester Teil des Kartendesigns, s. "---- Karten ----"
   oben: .card__slots / .upg-arrows / .card__dmgupg.) */
.card--locked { opacity: .55; filter: grayscale(.5); }
.card--locked .card__stepper .step--plus { opacity: .4; cursor: not-allowed; }
.card--readonly .card__stepper .step { opacity: .35; pointer-events: none; }
.deck-foot-actions { display: flex; gap: .6rem; align-items: center; }

/* Ja/Nein-Bestätigung */
.confirm-modal { max-width: 440px; text-align: center; }
.confirm-modal p { margin: .2rem 0 1rem; }
.confirm-actions { display: flex; gap: .6rem; justify-content: center; }

/* Belohnung: Deck-voll-Hinweis */
.reward-full { color: var(--bad); font-weight: 600; }
.reward-card.is-deckfull .rw-take { opacity: .5; }

/* ==== Vision (Vorsehung) ==== */
.countdown--vision { color: #d9b6ff; font-size: 16vh; text-shadow: 0 0 40px rgba(176,107,255,.8), 0 8px 30px rgba(0,0,0,.7); letter-spacing: 4px; }
.vision-banner { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); z-index: 13; max-width: 90vw;
  background: rgba(40,20,64,.92); border: 1px solid #b06bff; color: #e6d6ff; border-radius: 12px; padding: .5rem 1rem;
  font-weight: 600; text-align: center; box-shadow: 0 4px 20px rgba(176,107,255,.4); animation: bubble-in .3s ease-out; }

/* ==== Kampf-Zonen-Modal (Bereit-System) ==== */
.zone-modal { width: min(520px, 96vw); padding: 1rem 1.2rem 1.2rem; }
.zone-modal .modal__head { padding: 0 0 .8rem; margin-bottom: .8rem; }
.zone-cd { text-align: center; font-size: 1.1rem; margin: .3rem 0 .7rem; color: var(--gold); }
.zone-cd b { font-size: 1.4rem; }
.zone-list { display: flex; flex-direction: column; gap: .35rem; }
.zone-teams { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.zone-team h4 { margin: 0 0 .4rem; font-size: .82rem; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.zone-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem .6rem;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; font-size: .9rem; }
.zone-row.is-ready { border-color: #2c5a45; color: var(--ok); }
.zone-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.zone-actions .btn { flex: 1; }

/* ==== Spieler-Mini-Profil ==== */
.playercard-modal { width: min(460px, 96vw); padding: 1rem 1.2rem 1.2rem; }
.playercard-modal .modal__head { padding: 0 0 .8rem; margin-bottom: .8rem; }
.pc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.pc-stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
.pc-stat__k { font-size: .7rem; color: var(--muted); }
.pc-stat__v { font-size: 1rem; font-weight: 700; }
.pc-deck { margin-top: .8rem; }
.pc-deck__head { font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
.pc-deck__list { display: flex; flex-wrap: wrap; gap: .3rem; max-height: 160px; overflow: auto; padding: .1rem; }
.pc-actions { display: flex; gap: .6rem; margin-top: 1rem; }
.pc-actions .btn { flex: 1; }
.pc-credits { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .8rem;
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .6rem .7rem; }
.stepper { display: inline-flex; align-items: center; gap: .35rem; }
.stepper input { width: 90px; text-align: center; }

/* ==== Kampf-Anfrage-Popup ==== */
.pvp-request { width: min(380px, 92vw); padding: 1.2rem; text-align: center; }
.pvp-request h3 { margin: 0 0 .5rem; }
.pvp-request__actions { display: flex; gap: .6rem; margin-top: 1rem; }
.pvp-request__actions .btn { flex: 1; }

/* Overworld-Prompts als Overlay (nehmen KEINEN Flow-Platz -> Steuerungsleiste bleibt unten). */
.world-prompts { position: absolute; inset: 0; pointer-events: none; }

/* ==== HUD-Box (oben links: Profil + Lvl/Leben/HP/Credits) ==== */
.hud-box { display: flex; align-items: center; gap: .7rem; background: rgba(16,22,32,.85); border: 1px solid var(--line); border-radius: 12px; padding: .4rem .7rem; pointer-events: auto; }
.hud-box__profile { background: var(--panel2); border: 1px solid var(--line); color: var(--text); width: 46px; height: 46px; border-radius: 10px; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.hud-box__profile:hover { border-color: var(--menu-gold); }
.hud-box__stats { display: flex; align-items: center; gap: .95rem; font-size: 1.05rem; flex-wrap: wrap; }
.hud-box__stats .st { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; }
.hud-box__stats .st b { font-size: 1.18rem; }
.hud-box__stats .st--lives { font-size: 1.15rem; letter-spacing: 1px; }

/* ==== HUD-Menü (Zahnrad-Dropdown, oben rechts – Overworld & Kampf) ==== */
.hud-menu-slot { pointer-events: auto; }
.hud-menu-slot--battle { position: absolute; top: 12px; right: 12px; z-index: 14; }
.hud-menu { position: relative; }
.hud-gear { background: rgba(16,22,32,.85); border: 1px solid var(--line); color: var(--text); width: 44px; height: 44px; border-radius: 10px; font-size: 1.35rem; cursor: pointer; line-height: 1; }
.hud-gear:hover { border-color: var(--menu-gold); }
.hud-dropdown { position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; z-index: 30; display: flex; flex-direction: column; }
.hud-dropdown[hidden] { display: none; } /* hidden-Attribut muss display:flex schlagen */
.hud-dropdown button { background: none; border: none; color: var(--text); text-align: left; padding: .7rem .9rem; font-size: .95rem; cursor: pointer; }
.hud-dropdown button:hover { background: var(--panel2); }

/* ==== Optionen-Modal (Sound) ==== */
.options-modal { width: min(460px, 94vw); padding: 1rem 1.2rem 1.3rem; }
.options-modal .modal__head { padding: 0 0 .8rem; margin-bottom: .4rem; }
.opt-h { margin: .2rem 0 .4rem; color: var(--muted); font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; }
.opt-row { display: grid; grid-template-columns: 1fr auto 130px; align-items: center; gap: .9rem; padding: .6rem 0; border-top: 1px solid var(--line); }
.opt-row__label { font-size: 1rem; }
.opt-vol { width: 130px; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch__slider { position: absolute; inset: 0; background: var(--panel2); border: 1px solid var(--line); border-radius: 20px; transition: .15s; cursor: pointer; }
.switch__slider::before { content: ''; position: absolute; left: 3px; top: 2px; width: 20px; height: 20px; background: #cfd6e2; border-radius: 50%; transition: .15s; }
.switch input:checked + .switch__slider { background: var(--menu-gold); border-color: transparent; }
.switch input:checked + .switch__slider::before { transform: translateX(20px); background: #fff; }

/* Quellenangaben (Musik/SFX-Attribution) im Optionen-Modal – kollabierbar, dezent wie ein Disclaimer. */
.opt-sources { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .6rem; }
.opt-sources summary { cursor: pointer; font-size: .82rem; color: var(--muted); list-style: none; }
.opt-sources summary::-webkit-details-marker { display: none; }
.opt-sources summary:hover { color: var(--text); }
.opt-sources__body { margin-top: .6rem; }
.opt-sources__group { margin: .6rem 0 .2rem; font-size: .8rem; }
.opt-sources__list { font-size: .76rem; line-height: 1.6; color: var(--muted); margin: 0; }
.opt-sources__list a { color: var(--accent); text-decoration: none; }
.opt-sources__list a:hover { text-decoration: underline; }

/* ==== Bestätigungs-Modal (Kampf verlassen) ==== */
.confirm-modal { width: min(380px, 92vw); padding: 1.2rem; text-align: center; }
.confirm-modal h3 { margin: 0 0 .5rem; }
.confirm-actions { display: flex; gap: .6rem; margin-top: 1.1rem; }
.confirm-actions .btn { flex: 1; }

/* ==== Profil-Modal (2 Spalten Profil/Run + dicke XP-Leisten) ==== */
.profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.1rem; }
.profile-col { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .8rem .9rem; }
.profile-col__h { display: flex; align-items: center; gap: .5rem; font-size: .95rem; margin: 0 0 .8rem; }
.lvl-badge { margin-left: auto; background: var(--gold); color: #241a00; font-weight: 800; border-radius: 50%; min-width: 28px; height: 28px; padding: 0 .3rem; display: inline-grid; place-items: center; font-size: .9rem; }
.xp-track { display: flex; align-items: center; gap: .5rem; }
.xp-lvl { width: 30px; height: 30px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; font-size: .82rem; flex: none; }
.xp-bar { position: relative; flex: 1; height: 22px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.xp-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .4s ease; }
.xp-bar__txt { position: absolute; inset: 0; display: grid; place-items: center; font-size: .74rem; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.75); }
@media (max-width: 560px) { .profile-cols { grid-template-columns: 1fr; } }

/* ---- Profil-Kopf: Username + Umbenennen, Toolbar (Tabs + „Open Deck Editor") ---- */
#p-username { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.profile-tab { background: var(--bg2); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: .35rem .9rem; font-size: .82rem; font-weight: 600; cursor: pointer; font-family: var(--font-display); }
.profile-tab.is-active { background: var(--menu-gold); border-color: var(--menu-gold); color: #241705; }
.profile-tab__badge { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: .3rem; padding: 0 .2rem; border-radius: 50%; background: var(--bad); color: #fff; font-size: .64rem; font-weight: 800; vertical-align: middle; }

/* ---- Klickbare Übersicht-Stats (Drill-down zu Cards/Deck) + Zurück-Button ---- */
.profile-stat--btn { cursor: pointer; text-align: left; font-family: inherit; color: var(--text); transition: border-color .15s, background .15s; }
.profile-stat--btn:hover { border-color: var(--menu-gold); background: var(--panel2); }
.profile-back { display: inline-flex; align-items: center; gap: .35rem; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 999px; cursor: pointer; font-size: .82rem; font-weight: 600; padding: .35rem .9rem; margin-bottom: .8rem; }
.profile-back::before { content: '←'; font-size: 1rem; line-height: 1; }
.profile-back:hover { border-color: var(--menu-gold); color: var(--menu-gold); }

/* ---- Permanente-Perks-Icon-Slots in der Übersicht (statt reinem "0/3 equipped"-Text) ---- */
.perk-slot-row { display: flex; gap: .3rem; }
.perk-slot-icon { width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); font-size: 1.05rem; }
.perk-slot-icon--empty { opacity: .35; border-style: dashed; }

/* ---- Permanente Perks (Grid, gesperrt = Tooltip mit Unlock-Bedingung) ---- */
.perk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.perk-tile { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .5rem; cursor: pointer; color: var(--text); }
.perk-tile.is-on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.perk-tile.is-locked { opacity: .55; cursor: help; }
.perk-tile:disabled { cursor: not-allowed; }
.perk-tile__emoji { font-size: 1.6rem; }
.perk-tile__name { font-weight: 700; font-size: .84rem; }
.perk-tile__desc { font-size: .7rem; color: var(--muted); }

/* ---- Consumables (stapelbare Kacheln mit Eck-Kreis-Anzahl) ---- */
.consumable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; }
.consumable-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: .7rem .5rem; cursor: pointer; color: var(--text); }
.consumable-tile:hover { border-color: var(--accent); }
.consumable-tile__emoji { font-size: 1.6rem; }
.consumable-tile__name { font-weight: 700; font-size: .78rem; }
.consumable-tile__count { position: absolute; top: -6px; right: -6px; background: var(--gold); color: #241a00; font-weight: 800; font-size: .72rem; min-width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--bg2); }

/* ---- Run-Attribute (Skill-Tree, Profil-Tab "Attributes", s. ui/profile.js) ---- */
.attr-points { color: var(--gold); text-shadow: 0 0 10px rgba(255,206,77,.6); }
.attr-list { display: flex; flex-direction: column; gap: .5rem; }
.attr-row { display: flex; align-items: center; gap: .7rem; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; }
.attr-row__icon { font-size: 1.4rem; flex: none; width: 1.8rem; text-align: center; }
.attr-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.attr-row__name { font-weight: 700; font-size: .88rem; }
.attr-row__desc { font-size: .74rem; color: var(--muted); }
.attr-row__val { flex: none; font-weight: 700; font-size: .9rem; white-space: nowrap; }
.attr-row__add { flex: none; width: 32px; height: 32px; padding: 0; font-size: 1.1rem; font-weight: 800; }

/* ---- Bosse & neue Debuffs (Medusa/Zerberus, Vulnerable/Barrier Penetration) ---- */
.actor--untargetable .avatar { filter: grayscale(.3) brightness(.9); }
/* Medusa: Respawn-Zähler der besiegten Schlangen – bis zu 3 Zahlen über dem Kopf */
.respawn-timers { position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); display: flex; gap: 4px; z-index: 6; pointer-events: none; }
.respawn-timer { background: rgba(20,26,38,.92); border: 1px solid #4caf50; color: #8fe152; font-size: .72rem; font-weight: 800; border-radius: 6px; padding: 1px 5px; box-shadow: 0 2px 6px rgba(0,0,0,.55); }
/* Wächter-Badge: Medusa ist nicht angreifbar, solange Schlangen leben */
.guard-badge { position: absolute; top: 46%; left: 50%; transform: translateX(-50%); z-index: 6; font-size: 1.15rem; pointer-events: none; filter: drop-shadow(0 0 5px rgba(120,180,255,.85)); }
/* neue Status-Chips */
.status-chip--vulnerable { color: #ff6b9a; border-color: rgba(255,107,154,.5); }
.status-chip--pierced { color: #ffd479; border-color: rgba(255,212,121,.5); }