/* ============================================================
   SPORTCARDS — Oberfläche
   Bildsprache: dunkles Stadion bei Nacht, Karten wie echte
   Sammelkarten (Metallrahmen, Hologramm, Lichtreflex beim Kippen).
   Das Spielbrett passt bewusst auf eine Bildschirmhöhe.
   ============================================================ */

@import url("fonts.css");

:root {
  /* --- Stadion bei Nacht --- */
  --bg:        #04070e;
  --bg2:       #080e1b;
  --panel:     #0c1424cc;
  --panel-s:   #101a2ecc;
  --panel2:    #142238;
  --line:      #22344f;
  --line-soft: #ffffff14;
  --txt:       #eaf1fb;
  --dim:       #8ca4c6;
  --ice:       #57d3f5;
  --ice-deep:  #1b7fa8;
  --ice-soft:  #57d3f533;
  --good:      #3ddc84;
  --bad:       #ff5470;
  --warn:      #ffc043;
  --gold:      #f3c65a;

  /* --- Seltenheit: Metall --- */
  --r-normal:  #8496ad;
  --r-bronze:  #cd8442;
  --r-silber:  #cbd8e8;
  --r-gold:    #f3c65a;
  --r-diamant: #8ee9ff;

  --radius: 16px;
  --shadow: 0 18px 44px #00000080;

  /* Kartengrösse. Ausserhalb des Spielbretts dürfen die Karten gross
     sein — die Sammlung soll wie ein Album wirken. */
  --cw: clamp(96px, 11.5vw, 138px);
  --ch: calc(var(--cw) * 1.4);

  --disp: "Anton", "Segoe UI", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Segoe UI Semibold", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  color: var(--txt);
  font: 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}
/* Die Grundfarbe gehört auf `html`, nicht auf `body`.
   Sonst übermalt der deckende Body-Hintergrund alles, was mit negativem
   z-index dahinterliegt — genau daran waren Flutlicht und Eisgrund
   zuerst unsichtbar. */
html { background: var(--bg); }
body { background: transparent; }
/* Flutlicht und Vignette — das Stadion hinter allem. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(900px 460px at 18% -8%,  #1f5f8433 0%, transparent 62%),
    radial-gradient(900px 460px at 82% -8%,  #2b3f8433 0%, transparent 62%),
    radial-gradient(1400px 800px at 50% 42%, #0d1c31 0%, #05090f 68%, #03060b 100%);
}

/* ------------------------------------------------------------
   Der Eisgrund: was auf den leeren Flächen zu sehen ist.

   Alles bewusst sehr schwach (2–7 % Deckkraft). Ein Hintergrund
   darf auffallen, wenn man ihn sucht, und muss verschwinden,
   sobald man liest. Darum keine Bilder, keine harten Kanten,
   keine schnelle Bewegung.
   ------------------------------------------------------------ */
.eisgrund {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
}
.eisgrund > span { position: absolute; inset: -10%; display: block; }

/* 1. Schlittschuhspuren: feine Striche in zwei Richtungen, wie sie
      nach einem Drittel auf dem Eis stehen. */
.eisgrund .kratzer {
  opacity: .7;
  background:
    repeating-linear-gradient(114deg, transparent 0 44px,
      #cfefff12 44px 45px, transparent 45px 130px),
    repeating-linear-gradient(66deg, transparent 0 66px,
      #cfefff0c 66px 67px, transparent 67px 170px),
    repeating-linear-gradient(96deg, transparent 0 210px,
      #cfefff0a 210px 212px, transparent 212px 520px);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 55%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 55%, #000 20%, transparent 78%);
}

/* 2. Die Linien des Spielfelds — nur angedeutet: zwei blaue Linien,
      dazwischen die rote Mittellinie, dazu der Anspielkreis. */
.eisgrund .linien {
  opacity: .9;
  background:
    linear-gradient(180deg, transparent calc(50% - 1px),
      #ff54701e calc(50% - 1px), #ff54701e calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(26% - 1px),
      #57d3f518 calc(26% - 1px), #57d3f518 calc(26% + 1px), transparent calc(26% + 1px)),
    linear-gradient(180deg, transparent calc(74% - 1px),
      #57d3f518 calc(74% - 1px), #57d3f518 calc(74% + 1px), transparent calc(74% + 1px)),
    radial-gradient(circle at 50% 50%, transparent 118px, #ff54701a 118px 120px,
      transparent 120px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* 3. Frost in den Ecken und ein Hauch Kälte über allem. */
.eisgrund .frost {
  background:
    radial-gradient(60% 40% at 0% 100%,   #8ee9ff18, transparent 70%),
    radial-gradient(60% 40% at 100% 100%, #8ee9ff14, transparent 70%),
    radial-gradient(50% 30% at 50% 0%,    #cfefff16, transparent 72%);
}

/* 4. Ein Lichtschein, der ganz langsam über das Eis wandert — wie die
      Beleuchtung einer Halle, die man nur bemerkt, wenn man hinschaut. */
.eisgrund::after {
  content: ""; position: absolute; top: -30%; left: -40%;
  width: 70%; height: 160%;
  background: linear-gradient(100deg, transparent, #9fd8ff1a 45%, #9fd8ff26 50%,
                              #9fd8ff1a 55%, transparent);
  filter: blur(28px);
  animation: eisschein 42s ease-in-out infinite alternate;
}
@keyframes eisschein {
  from { transform: translateX(0)    rotate(-2deg); }
  to   { transform: translateX(190%) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .eisgrund::after { animation: none; opacity: .5; }
}
/* Feines Korn, damit die Farbflächen nicht digital-flach wirken. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
h2, h3 { margin: 0 0 6px; }
h3 { font-family: var(--cond); font-size: 17px; letter-spacing: .6px;
     text-transform: uppercase; color: var(--ice); }

/* ---------- Grundbausteine ---------- */
.btn {
  background: linear-gradient(180deg, #1a2a44, #111c2f);
  color: var(--txt); border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 17px; transition: .16s; text-decoration: none;
  display: inline-block; font-family: var(--cond); font-size: 16px; letter-spacing: .4px;
  box-shadow: inset 0 1px 0 #ffffff12, 0 2px 10px #0006;
}
.btn:hover { border-color: var(--ice); color: #fff; transform: translateY(-1px);
             box-shadow: inset 0 1px 0 #ffffff20, 0 6px 18px #0008, 0 0 20px var(--ice-soft); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: linear-gradient(180deg, #2ba3d0, #14688b);
  border-color: #4dc5ec; color: #04131c; font-weight: 700;
  text-shadow: 0 1px 0 #ffffff40;
}
.btn.primary:hover { filter: brightness(1.12); color: #04131c; }
.btn.tiny { padding: 5px 11px; font-size: 14px; }
.btn.huge { padding: 15px 46px; font-size: 22px; border-radius: 14px; }
.btn.ghost { background: transparent; color: var(--dim); box-shadow: none; }
.btn:disabled { opacity: .38; cursor: not-allowed; transform: none; }

.msg { min-height: 20px; color: var(--warn); font-size: 14px; margin: 8px 0; }
.msg.ok { color: var(--good); }
.sub { color: var(--dim); }
.tiny { font-size: 12px; }
.mini { background: #0a1120; color: var(--txt); border: 1px solid var(--line);
        border-radius: 9px; padding: 6px 10px; font: inherit; font-size: 13px; }

.logo {
  font-family: var(--disp); font-size: 46px; letter-spacing: 4px; margin: 0 0 4px;
  line-height: 1; text-transform: uppercase;
  background: linear-gradient(180deg, #ffffff 0%, #bcd8ea 46%, #5d8fae 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 14px #0af6);
}
.logo span {
  background: linear-gradient(180deg, #9bebff, var(--ice) 55%, #1786ae);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo.small { font-size: 22px; letter-spacing: 3px; }
/* Das Spiel-Logo. Es kommt als Bild — die Schriftmarke bleibt als
   Ersatztext stehen, falls das Bild einmal nicht lädt. */
.marke { display: block; height: auto; }
.marke.gross { width: min(330px, 82%); margin: 0 auto 10px;
               filter: drop-shadow(0 10px 30px #0af5); }
/* In der Kopfzeile zählt die Höhe, sonst wächst die Leiste mit dem Bild. */
.marke.klein { width: auto; height: 52px; filter: drop-shadow(0 4px 14px #0af4); }
.top .marke.klein { height: 44px; margin-right: 6px; }

/* Das «1/1» ist die Marke: so heisst im Sammlerkreis eine Karte,
   die es genau einmal gibt. */
.logo .eins {
  display: inline-block; vertical-align: .18em; margin-right: .26em;
  padding: .06em .22em .1em; border-radius: .14em; line-height: 1;
  font-family: var(--cond); font-weight: 700; font-size: .42em; letter-spacing: .5px;
  background: linear-gradient(180deg, #9bebff, var(--ice) 60%, #1786ae);
  color: #04131c; -webkit-text-fill-color: #04131c;
  box-shadow: 0 0 18px var(--ice-soft);
}

.warnbox {
  background: linear-gradient(180deg, #2b2009, #1d1607); border: 1px solid #6b4d12;
  border-radius: 12px; padding: 12px 16px; margin: 10px 0; color: #ffd88a; font-size: 14px;
}
.warnbox div { padding: 2px 0; }

/* ---------- Anmeldung ---------- */
.gate { min-height: 100dvh; display: grid; place-items: center; align-content: center;
        padding: 20px; }

/* Ein aufgefächertes Kartentrio über der Anmeldung — erste Kostprobe. */
.gatefan { display: none; }
.gatefan-alt { display: flex; justify-content: center; margin-bottom: -46px;
           pointer-events: none; z-index: 1; }
.gatefan .fk {
  --pos: var(--ice); --pos-bg: #16253f; --pos-bg2: #1a2c4a;
  width: 106px; height: 148px; border-radius: 13px; display: grid; place-items: center;
  font-family: var(--disp); font-size: 40px; color: var(--pos); line-height: 1;
  border: 1px solid color-mix(in srgb, var(--pos) 55%, #000);
  background:
    radial-gradient(60% 42% at 50% 44%, color-mix(in srgb, var(--pos) 30%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 44%, #ffffff09 0deg 6deg, transparent 6deg 12deg),
    linear-gradient(165deg, var(--pos-bg2), var(--pos-bg) 60%, #070c16);
  box-shadow: 0 22px 44px #000b, inset 0 0 30px #0008;
  text-shadow: 0 0 20px color-mix(in srgb, var(--pos) 65%, transparent);
  animation: schweben 5s ease-in-out infinite;
}
.gatefan .fk.p-F { --pos: #ff7a5c; --pos-bg: #2e1620; --pos-bg2: #45202c;
                   transform: translateY(-16px) rotate(0deg); z-index: 2; }
.gatefan .fk.p-D { --pos: #3ddc84; --pos-bg: #10281f; --pos-bg2: #17392a;
                   transform: rotate(-13deg) translateX(26px); animation-delay: -1.6s; }
.gatefan .fk.p-G { --pos: #b06cf0; --pos-bg: #221a3a; --pos-bg2: #2f2452;
                   transform: rotate(13deg) translateX(-26px); animation-delay: -3.2s; }
/* Nur `translate` bewegen — ein Aussenabstand würde die Anmeldebox
   darunter dauernd verschieben. */
@keyframes schweben { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }
.gate-box {
  width: min(440px, 100%); background: linear-gradient(180deg, #101c31ee, #0a1120ee);
  border: 1px solid var(--line); border-radius: 22px; padding: 38px 34px; text-align: center;
  box-shadow: var(--shadow), inset 0 1px 0 #ffffff18;
  position: relative; overflow: hidden;
}
.gate-box::before {
  content: ""; position: absolute; inset: -40% -10% auto -10%; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, #57d3f52e, transparent 70%);
  pointer-events: none;
}
.claim { color: var(--dim); margin: 0 0 22px; text-wrap: balance; }
.gate-box input {
  width: 100%; margin-bottom: 10px; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--line); background: #070d18; color: var(--txt); font: inherit;
}
.gate-box input:focus { outline: none; border-color: var(--ice); box-shadow: 0 0 0 3px var(--ice-soft); }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1; }
.hint { color: var(--dim); font-size: 12.5px; margin-top: 16px; }

/* ---------- Kopfzeile ---------- */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: #060c17d9; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px #00000055;
}
.top .hd { font-family: var(--cond); font-size: 22px; letter-spacing: 1px;
           text-transform: uppercase; flex: 1; margin: 0; }
.purse { display: flex; align-items: center; gap: 10px; font-size: 13.5px; flex-wrap: wrap; }
.coins { color: var(--gold); font-family: var(--cond); font-size: 16px; }
.coins b { font-size: 19px; }
.coins::before { content: "◉ "; color: var(--gold); }
.club { color: var(--ice); font-weight: 600; font-family: var(--cond); font-size: 17px;
        letter-spacing: .5px; text-transform: uppercase; }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.flt { background: #0b1322; border: 1px solid var(--line); color: var(--dim);
       border-radius: 9px; padding: 5px 12px; font-size: 13px; transition: .15s; }
.flt:hover { color: var(--txt); }
.flt.active { color: #04131c; border-color: var(--ice);
              background: linear-gradient(180deg, #6fdcf8, #2ba3d0); font-weight: 600; }

.view { max-width: 1260px; margin: 0 auto; padding: 22px; }

/* Ton an/aus */
.sndbtn { width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 15px;
          display: grid; place-items: center; }

/* ============================================================
   Lobby
   ============================================================ */
/* Links die Kabine mit «wer ist da» und dem Chat darunter, rechts alles
   zum Tun. Die linke Spalte bleibt schmal, damit die Knöpfe rechts in
   drei Reihen passen statt in eine lange Kolonne mit Löchern. */
.lobbywrap {
  max-width: 1440px; margin: 0 auto; padding: 20px;
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: 20px;
  align-items: stretch;
}
/* Der Chat wächst bis zum unteren Rand der Knöpfe — sonst bleibt links
   unten ein leeres Feld stehen. */
.lobbyseite { display: flex; flex-direction: column; gap: 12px; }
.lobbyseite .chatbox { flex: 1; }
@media (max-width: 900px) { .lobbyseite .chatbox { flex: none; } }
.statusbar {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 16px; margin-bottom: 14px; font-size: 14px; color: var(--dim);
  backdrop-filter: blur(6px);
}
.statusbar b { color: var(--txt); }
.statusbar .warn { color: var(--warn); }
.statusbar .ok { color: var(--good); }

/* Die Knöpfe sind nach Zweck gruppiert: Spielen, Dein Team, Karten, Du.
   Jede Gruppe füllt ihre Zeile selbst aus — dadurch entstehen keine
   Löcher mehr, egal wie viele Knöpfe eine Gruppe hat. */
.tilegruppe { --gf: var(--ice); margin-bottom: 20px; }
.tilegruppe > h3 {
  margin: 0 0 10px; font-size: 12px; color: var(--gf);
  text-transform: uppercase; letter-spacing: 1.8px; font-weight: 600;
  display: flex; align-items: center; gap: 12px; opacity: .85;
}
.tilegruppe > h3::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--gf) 45%, transparent), transparent);
}
/* auto-FILL, nicht auto-fit: leere Spuren bleiben stehen. Sonst zieht eine
   Gruppe mit zwei Knöpfen diese beiden über die ganze Breite auseinander,
   und die Kacheln sind je Gruppe verschieden gross. */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
}
.tile {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #14233bcc, #0a1120cc);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 15px; color: var(--txt); text-align: left; transition: .2s;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: inset 0 1px 0 #ffffff10;
}
.tile::after {
  content: ""; position: absolute; inset: auto -30% -70% -30%; height: 100%;
  background: radial-gradient(50% 60% at 50% 0%,
              color-mix(in srgb, var(--gf, var(--ice)) 26%, transparent), transparent 70%);
  opacity: 0; transition: .25s;
}
.tile:hover { border-color: color-mix(in srgb, var(--gf, var(--ice)) 70%, var(--line));
              transform: translateY(-4px);
              box-shadow: 0 16px 34px #0009,
                          0 0 0 1px color-mix(in srgb, var(--gf, var(--ice)) 30%, transparent); }
.tile:hover::after { opacity: 1; }

/* Das Symbol steht in einer eigenen Fassung, damit es nicht als nacktes
   Emoji auf der Fläche klebt. Die Farbe kommt aus der Gruppe. */
.tile .ic {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 7px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(160deg,
              color-mix(in srgb, var(--gf, var(--ice)) 26%, #0d1725),
              color-mix(in srgb, var(--gf, var(--ice)) 8%, #080e18));
  border: 1px solid color-mix(in srgb, var(--gf, var(--ice)) 34%, transparent);
  box-shadow: inset 0 1px 0 #ffffff18;
  transition: .2s;
}
.tile:hover .ic {
  border-color: color-mix(in srgb, var(--gf, var(--ice)) 65%, transparent);
  box-shadow: inset 0 1px 0 #ffffff20,
              0 0 18px color-mix(in srgb, var(--gf, var(--ice)) 30%, transparent);
  transform: translateY(-1px);
}
/* Ein feiner Pfeil rechts: der Knopf führt irgendwohin. */
.tile > b { padding-right: 16px; }
.tile .pfeil {
  position: absolute; right: 14px; bottom: 14px; color: var(--dim);
  font-size: 15px; opacity: 0; transform: translateX(-4px); transition: .2s;
}
.tile:hover .pfeil { opacity: .8; transform: translateX(0); color: var(--gf, var(--ice)); }
.tile .ic { font-size: 22px; line-height: 1.1; filter: drop-shadow(0 3px 8px #0008); }
.tile b { font-family: var(--cond); font-size: 18px; letter-spacing: .6px; text-transform: uppercase; }
.tile i { font-style: normal; color: var(--dim); font-size: 12px; line-height: 1.35; }

/* Verträge in der Kopfzeile von Handel und Tauschbörse. Sind keine da,
   wird die Zahl rot — dann kann man mit neuen Karten nichts anfangen. */
.vorratzahl { color: var(--dim); font-size: 13px; }
.vorratzahl b { font-family: var(--cond); font-size: 17px; color: var(--txt); }
.vorratzahl.leer b { color: var(--bad); }

/* Zahl am Symbol: wie viele ungeöffnete Päckchen oder Hinweise offen sind.
   Bewusst ::before — ::after ist beim Knopf schon der Lichtschein, und
   zwei Regeln auf dasselbe Pseudo-Element mischen sich (der Schein setzt
   opacity: 0, die Zahl wäre unsichtbar geblieben). */
.tile.mitzahl { position: relative; }
.tile.mitzahl::before {
  content: attr(data-zahl); position: absolute; top: 9px; right: 11px;
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--gold); color: #10131a;
  font-family: var(--cond); font-weight: 700; font-size: 13px;
  display: grid; place-items: center; z-index: 1;
  box-shadow: 0 3px 10px #0008;
}

/* ---------- Die Kabine ----------
   Ein Foto in Ebenen: zum Grundbild gehört je eine Maske. Die Farbe des
   Spielers wird durch die Maske gelegt — `multiply` behält Licht, Schatten
   und Stoffstruktur des Fotos. Das Grundfoto ist darum hell und neutral;
   Multiplizieren kann nur abdunkeln, nie aufhellen. */
.room {
  /* Vorgabe: die von Hand ausgemessene Kabine. Wer einen anderen Raum
     wählt, bekommt die Pfade von app.js gesetzt. */
  --maske-wand:    url("img/kabine/maske_wand.png");
  --maske-holz:    url("img/kabine/maske_holz.png");
  --maske-polster: url("img/kabine/maske_polster.png");
  --maske-trikot:  url("img/kabine/maske_trikot.png");
  --maske-boden:   url("img/kabine/maske_boden.png");
  --maske-teppich: url("img/kabine/maske_teppich.png");
  --maske-led:     url("img/kabine/maske_led.png");
  --wand: #eaf0f8; --holz: #cfd6de; --polster: #3b4b63; --trikot: #e9edf3;
  --boden: #cdd6e0; --teppich: #243a5e; --akzent: #9fd8ff;
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  aspect-ratio: 1916 / 821; background: #05090f; isolation: isolate;
}
.room .k-basis { width: 100%; height: 100%; object-fit: cover; display: block; }
.room .k-ton, .room .k-leuchte {
  position: absolute; inset: 0; pointer-events: none;
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.room .k-ton { mix-blend-mode: multiply; }
.room .k-ton.wand    { background: var(--wand);
  mask-image: var(--maske-wand); -webkit-mask-image: var(--maske-wand); }
.room .k-ton.holz    { background: var(--holz);
  mask-image: var(--maske-holz); -webkit-mask-image: var(--maske-holz); }
.room .k-ton.polster { background: var(--polster);
  mask-image: var(--maske-polster); -webkit-mask-image: var(--maske-polster); }
.room .k-ton.trikot  { background: var(--trikot);
  mask-image: var(--maske-trikot); -webkit-mask-image: var(--maske-trikot); }
.room .k-ton.boden   { background: var(--boden);
  mask-image: var(--maske-boden); -webkit-mask-image: var(--maske-boden); }
.room .k-ton.teppich { background: var(--teppich);
  mask-image: var(--maske-teppich); -webkit-mask-image: var(--maske-teppich); }
/* Die Leuchtbänder sind im Foto fast weiss. Weiss lässt sich nicht
   «heller» einfärben — darum werden sie zuerst multipliziert (dann
   nehmen sie die Farbe wirklich an) und erst danach zum Leuchten gebracht. */
.room .k-ton.ledfarbe {
  background: var(--akzent); mix-blend-mode: multiply; opacity: .9;
  mask-image: var(--maske-led); -webkit-mask-image: var(--maske-led);
}

/* Die Leuchtbänder nehmen die Lichtfarbe an und strahlen sie ab.
   Zwei Ebenen: die scharfen Bänder und ein weicher Schein darüber —
   erst der Schein macht die Farbe im Raum wirklich sichtbar. */
.room .k-leuchte {
  background: var(--akzent); mix-blend-mode: screen; opacity: .95;
  mask-image: var(--maske-led); -webkit-mask-image: var(--maske-led);
}
.room .k-schein {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: var(--akzent); opacity: .85; filter: blur(11px);
  mask-image: var(--maske-led); -webkit-mask-image: var(--maske-led);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}

/* ---------- Wirkung der eingerichteten Stücke ----------
   Die Deko soll den Raum verändern, nicht nur darin stehen. */

/* Sitzbank: die Polster glänzen in der gewählten Polsterfarbe — `screen`
   hellt auf, was `multiply` vorher eingefärbt hat. Ohne Sitzbank ist die
   Ebene unsichtbar (--polster-glanz: 0). */
.room .k-glanz {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: var(--polster);
  opacity: var(--polster-glanz, 0); transition: opacity .5s;
  mask-image: var(--maske-polster); -webkit-mask-image: var(--maske-polster);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
/* Ab Gold wandert ein Lichtstreifen über das Leder. */
.room .k-streif {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  opacity: 0;
  background: linear-gradient(115deg, transparent 40%, #ffffff 50%, transparent 60%);
  background-size: 300% 100%; background-position: 100% 0;
  mask-image: var(--maske-polster); -webkit-mask-image: var(--maske-polster);
  mask-size: 100% 100%; -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat;
}
.room[data-bank="gold"] .k-streif    { opacity: .28; animation: polsterstreif 7s ease-in-out infinite; }
.room[data-bank="diamant"] .k-streif { opacity: .45; animation: polsterstreif 5s ease-in-out infinite; }
@keyframes polsterstreif {
  0%, 55% { background-position: 100% 0; }
  100%    { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) { .room .k-streif { animation: none !important; } }

/* Licht: legt einen Schimmer in seiner Farbe über den ganzen Raum. */
.room .w-raumlicht {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  opacity: var(--raumlicht-kraft, 0); transition: opacity .4s;
  background:
    radial-gradient(90% 60% at 50% 0%, var(--raumlicht, #9fd8ff), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, var(--raumlicht, #9fd8ff), transparent 76%);
}
/* Vitrine: wirft farbiges Licht auf die rechte Seite. */
.room .w-vitrine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  opacity: var(--vitrine-kraft, 0); transition: opacity .4s;
  background: radial-gradient(30% 45% at 88% 55%, var(--vitrinelicht, #9fd8ff), transparent 70%);
}
/* Wandschmuck: spannt ein Vereinsbanner über die Rückwand. */
.room .w-banner {
  position: absolute; left: 27%; right: 27%; top: 8.5%; height: 9%;
  display: none; align-items: center; justify-content: center; gap: 6%;
  border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--banner, #2b4f7a) 88%, #fff 8%),
              color-mix(in srgb, var(--banner, #2b4f7a) 78%, #000 22%));
  box-shadow: 0 6px 14px #0009, inset 0 1px 0 #ffffff44;
  opacity: var(--banner-kraft, .8);
}
.room.hat-banner .w-banner { display: flex; }
.room .w-banner .wappen { height: 78%; width: auto; }
.room .w-banner span {
  font-family: var(--disp); font-size: clamp(6px, .95vw, 13px); letter-spacing: 1.4px;
  text-transform: uppercase; color: #fff; text-shadow: 0 1px 3px #0009;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Maskottchen: bekommt einen Scheinwerfer von der Decke. */
.room .w-strahler {
  position: absolute; left: 14%; top: 8%; width: 16%; height: 78%;
  display: none; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--strahler, #ffffff) 55%, transparent), transparent 82%);
  clip-path: polygon(38% 0%, 62% 0%, 100% 100%, 0% 100%);
  opacity: .45; filter: blur(1px);
}
.room.hat-strahler .w-strahler { display: block; }

/* Wappen und Vereinsname liegen flach auf dem Teppich. */
.room .bodenlogo {
  position: absolute; left: 50%; top: 80%; width: 26%;
  transform: translate(-50%, -50%) perspective(360px) rotateX(66deg);
  transform-origin: 50% 50%; text-align: center; cursor: pointer;
  filter: drop-shadow(0 6px 10px #0006);
}
.room .bodenlogo .tw { width: 58%; margin: 0 auto; }
.room .bodenlogo .tn {
  font-family: var(--disp); font-size: clamp(8px, 1.4vw, 19px); letter-spacing: 2px;
  text-transform: uppercase; color: #fff; margin-top: 2%;
  text-shadow: 0 2px 6px #0009;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.room .bodenlogo .tz { line-height: 1; }
.room .bodenlogo .tz .moebel { width: 26%; margin: 2% auto 0; display: block; opacity: .9; }

/* ---------- Eingerichtete Stücke ----------
   Jedes Stück steckt in einer Fassung, die zum Platz passt: Bilderrahmen
   an der Wand, Lampe unter der Decke, Tuch auf der Bank, Glaskasten,
   Sockel für das Maskottchen. Die Seltenheit steckt im Material der
   Fassung — Bronze, Silber, Gold und Kristall sehen verschieden aus. */
.room .plaetze { position: absolute; inset: 0; }
.deko {
  --metall: linear-gradient(160deg, #9aa8ba, #5c6a7c 55%, #78889b);
  --leuchten: transparent;
  --gr: 1;
  position: absolute; transform: translate(-50%, -50%) scale(var(--gr));
  background: none; border: none; padding: 0; cursor: pointer;
  display: grid; place-items: center; transition: .18s;
  filter: drop-shadow(0 6px 12px #0009);
}
.deko:hover { transform: translate(-50%, -50%) scale(calc(var(--gr) * 1.06)); }

/* Was auf dem Boden oder auf der Bank steht, steht mit der Unterkante
   auf seinem Punkt — nicht mittig darüber. Sonst schwebt es. */
.deko[data-anker="boden"] { transform: translate(-50%, -100%) scale(var(--gr));
                            transform-origin: 50% 100%; }
.deko[data-anker="boden"]:hover { transform: translate(-50%, -100%) scale(calc(var(--gr) * 1.06)); }

/* Aufsetzschatten: der weiche Fleck, mit dem ein Gegenstand den Boden
   berührt. Ohne ihn wirkt jedes Stück aufgeklebt, egal wie gut es
   gezeichnet ist. */
.deko .aufsetz {
  position: absolute; left: 50%; bottom: -3%; transform: translateX(-50%);
  width: 116%; height: 14%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, #000000a8, #00000000 72%);
  filter: blur(1px);
}
.room:not(.big) .deko { pointer-events: none; }
.room:not(.big) .deko.leer { display: none; }
.deko .schild {
  position: absolute; top: 104%; left: 50%; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--cond); font-size: 11px; letter-spacing: .6px;
  text-transform: uppercase; color: #cfe0f5cc; background: #04101bcc;
  padding: 1px 7px; border-radius: 999px; opacity: 0; transition: .16s; pointer-events: none;
}
.deko:hover .schild { opacity: 1; }

/* Materialien nach Seltenheit */
.deko.r-bronze  { --metall: linear-gradient(160deg, #e0a163, #8a5327 55%, #c07b3c); }
.deko.r-silber  { --metall: linear-gradient(160deg, #eef3f9, #97a6b8 55%, #cbd8e8); }
.deko.r-gold    { --metall: linear-gradient(160deg, #ffe9a8, #b98a1f 55%, #f3c65a);
                  --leuchten: #f3c65a3a; }
.deko.r-diamant { --metall: linear-gradient(160deg, #eafcff, #7ac9e0 45%, #c9f6ff);
                  --leuchten: #8ee9ff55; }
.deko.leer { opacity: .22; filter: none; }
.deko.leer:hover { opacity: .8; }
/* Ein leerer Platz zeigt seine Form, damit man weiss, was dort hinkommt. */
.room.big .deko.leer::after {
  content: "+"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #ffffff88; font-size: clamp(12px, 1.6vw, 22px); z-index: 3;
}
.room.big .deko.leer .bild, .room.big .deko.leer .glas,
.room.big .deko.leer .tuch, .room.big .deko.leer .podest,
.room.big .deko.leer .schirm { outline: 1px dashed #ffffff44; outline-offset: -2px; }

/* --- Bilderrahmen an der Wand --- */
/* Höhen in Prozent des Raums statt aspect-ratio: der Inhalt darf die
   Fassung nicht auseinanderdrücken. */
.deko.rahmen { width: 10.5%; height: 17%; padding: 4px;
               background: var(--metall); border-radius: 3px;
               box-shadow: 0 5px 12px #000a, 0 0 14px var(--leuchten),
                           inset 0 1px 0 #ffffff55; }
.deko.rahmen .bild {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: clamp(12px, 1.6vw, 24px);
  background:
    radial-gradient(70% 60% at 50% 30%, #ffffff1f, transparent 70%),
    linear-gradient(165deg, color-mix(in srgb, var(--f) 62%, #0b1220), #0a1220);
  box-shadow: inset 0 0 14px #000a, inset 0 0 0 2px #ffffff22;
}
/* Aufhängung: zwei feine Drähte zur Wand hinauf */
.deko.rahmen::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 40%;
  background: linear-gradient(#ffffff00, #ffffff55); transform: translateX(-50%);
}
.deko.rahmen .leiste { position: absolute; inset: auto 18% -7% 18%; height: 5%;
                       background: var(--metall); border-radius: 2px; opacity: .8; }

/* --- Lampe unter der Decke --- */
.deko.lampe { width: 6.5%; height: 14%; }
.deko.lampe .schirm {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; height: 42%; border-radius: 50% 50% 42% 42%;
  background: var(--metall); box-shadow: 0 4px 10px #000a;
}
.deko.lampe .schein {
  position: absolute; top: 34%; left: 50%; transform: translateX(-50%);
  width: 150%; height: 160%; pointer-events: none; opacity: .7;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--f) 65%, transparent),
              transparent 72%);
  filter: blur(2px);
}
.deko.lampe .glyphe { position: absolute; top: 30%; left: 50%; transform: translateX(-50%);
                      width: 84%; height: 62%; }

/* --- Tuch auf der Bank --- */
.deko.decke { width: 11%; height: 11%; }
.deko.decke .tuch {
  position: absolute; inset: 0; border-radius: 4px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--f) 85%, #fff 6%),
              color-mix(in srgb, var(--f) 70%, #000 20%));
  box-shadow: 0 5px 12px #000a, inset 0 1px 0 #ffffff40, 0 0 20px var(--leuchten);
  transform: perspective(220px) rotateX(58deg) skewX(-16deg);
}
.deko.decke .glyphe { position: absolute; inset: 8% 12%; display: grid; place-items: center;
                      filter: drop-shadow(0 2px 3px #0008); }

/* --- Glaskasten (Vitrine) --- */
.deko.kasten { width: 8%; height: 22%; }
.deko.kasten .glas {
  position: absolute; inset: 0; border-radius: 3px;
  border: 2px solid transparent;
  background: linear-gradient(160deg, #0c1a2ee0, #060e1ae8) padding-box,
              var(--metall) border-box;
  box-shadow: inset 0 0 18px #ffffff20, 0 6px 14px #000a, 0 0 22px var(--leuchten);
  backdrop-filter: blur(1px);
}
.deko.kasten .brett { position: absolute; left: 6%; right: 6%; bottom: 16%; height: 6%;
                      background: var(--metall); border-radius: 2px; opacity: .85; }
.deko.kasten .glas::after {
  content: ""; position: absolute; inset: 0; border-radius: 3px; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, #ffffff33 50%, transparent 60%);
}
.deko.kasten .glyphe { position: absolute; left: 14%; right: 14%; bottom: 22%; height: 42%; }

/* --- Sockel fürs Maskottchen --- */
.deko.sockel { width: 10%; height: 26%; }
.deko.sockel .figur { position: absolute; left: 4%; right: 4%; top: 0; height: 70%; z-index: 2;
                      filter: drop-shadow(0 4px 6px #000a); }
.deko.sockel .podest::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 34%; height: 22%;
  border-radius: 1px; background: #0b1526aa;
}
.deko.sockel .podest {
  position: absolute; left: 12%; right: 12%; bottom: 8%; height: 26%;
  border-radius: 4px 4px 2px 2px; background: var(--metall);
  box-shadow: 0 6px 14px #000b, inset 0 1px 0 #ffffff55, 0 0 22px var(--leuchten);
  transform: perspective(180px) rotateX(28deg);
}
.deko.sockel .schatten {
  position: absolute; left: 4%; right: 4%; bottom: 0; height: 14%;
  background: radial-gradient(closest-side, #00000088, transparent 75%); filter: blur(1px);
}

/* Die gezeichneten Gegenstände füllen ihre Fassung ganz aus. Ein Emoji
   bleibt nur als Notnagel, falls für ein Stück noch keine Form da ist. */
.deko .moebel, .bodenlogo .moebel { display: block; width: 100%; height: 100%; }
.deko.rahmen .bild .moebel { width: 78%; height: 78%; }
.deko .ersatz { font-size: clamp(10px, 1.3vw, 20px); line-height: 1; }
.deko .mkoerper { transition: .2s; }
.deko:hover .mkoerper { filter: brightness(1.15); }

/* Farbvorlagen */
.raumwahl { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.vorlagentitel { font-family: var(--cond); text-transform: uppercase; letter-spacing: 1px;
                 color: var(--dim); font-size: 15px; width: 100%; }
.raumknopf {
  flex: 1 1 130px; padding: 8px; border-radius: 12px; text-align: left;
  border: 1px solid var(--line); background: #0a1120; color: var(--txt); transition: .16s;
}
.raumknopf .probe { display: flex; gap: 3px; margin-bottom: 6px; }
.raumknopf .probe i { flex: 1; height: 16px; border-radius: 4px; border: 1px solid #ffffff18; }
.raumknopf .nm { font-family: var(--cond); font-size: 15px; letter-spacing: .5px;
                 text-transform: uppercase; }
/* Kleiner Grundriss statt Farbstreifen: man sieht sofort, wo was steht. */
.raumknopf .grundriss {
  position: relative; display: block; height: 46px; margin-bottom: 6px;
  border-radius: 7px; border: 1px solid #ffffff1c;
  background: linear-gradient(160deg, #16233b, #0a1220);
}
.raumknopf .grundriss i, .raumknopf .grundriss b {
  position: absolute; width: 7px; height: 7px; border-radius: 2px;
  transform: translate(-50%, -50%); background: var(--ice);
}
.raumknopf .grundriss b { width: 13px; height: 13px; border-radius: 50%;
                          background: #ffffff30; border: 1px solid var(--ice); }
.raumknopf:hover { border-color: var(--ice); }
.raumknopf.an { border-color: var(--ice); box-shadow: 0 0 0 1px var(--ice), 0 8px 22px #0009; }

.stylebar {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 12px 16px;
}
.stylebar label { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13.5px; }
.stylebar input[type=text], .stylebar input:not([type]) {
  background: #0a1120; color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 8px 11px; font: inherit; width: 170px;
}
.stylebar input[type=color] {
  width: 42px; height: 30px; padding: 0; border: 1px solid var(--line);
  border-radius: 8px; background: none;
}
.gardgrid { display: grid; grid-template-columns: minmax(320px, 660px) 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .gardgrid, .lobbywrap { grid-template-columns: 1fr; } }

/* Auf dem Handy zählt zuerst, was man tun kann. Die Kabine bleibt oben als
   Aushängeschild, danach kommen die Knöpfe, und erst darunter «wer ist da»
   und der Chat. `display: contents` löst die linke Spalte auf, damit sich
   alle vier Blöcke frei in eine Kolonne sortieren lassen. */
@media (max-width: 900px) {
  .lobbywrap { gap: 12px; padding: 14px; }
  .lobbyseite { display: contents; }
  .lobbyseite .room { order: 1; }
  .lobbymenu   { order: 2; }
  .lobbyseite .onlinebox { order: 3; }
  .lobbyseite .chatbox   { order: 4; }
  .tilegruppe { margin-bottom: 14px; }
}

.gardslot {
  display: flex; align-items: center; gap: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.gardslot .vis { font-size: 27px; width: 42px; text-align: center; }
.gardslot .nm { flex: 1; }
.gardslot .nm small { display: block; color: var(--dim); font-size: 12px; }

/* ============================================================
   Karte — das Herzstück
   ============================================================ */
.card {
  width: var(--cw); height: var(--ch); border-radius: 13px; position: relative;
  background: transparent; border: none; padding: 0; flex: none;
  transition: transform .2s cubic-bezier(.2,.8,.3,1), filter .2s;
  transform-style: preserve-3d;
}
.card-in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .55s cubic-bezier(.35,.05,.2,1);
}
.card.faceup .card-in { transform: rotateY(180deg); }

/* Kippen mit Lichtreflex (wird von fx.js gesetzt) */
.card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 30%; }
.card.tilt {
  transform: perspective(760px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.05);
  z-index: 5;
}
.card:not(.dead):not(.tilt):hover { transform: translateY(-5px); }

.face {
  position: absolute; inset: 0; backface-visibility: hidden; border-radius: 13px;
  padding: 7px; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 8px 20px #000a;
}
.face > * { position: relative; z-index: 2; }

/* Farbe nach Position — auf einen Blick erkennbar, auch auf der Rückseite.
   Die Seltenheit sitzt im Rahmen und im grossen Wert. */
.card { --pos: var(--ice); --pos-bg: #16253f; --pos-bg2: #1a2c4a; --metal: var(--r-normal); }
.card.p-F { --pos: #ff7a5c; --pos-bg: #2e1620; --pos-bg2: #45202c; }  /* Stürmer */
.card.p-D { --pos: #3ddc84; --pos-bg: #10281f; --pos-bg2: #17392a; }  /* Verteidiger */
.card.p-G { --pos: #b06cf0; --pos-bg: #221a3a; --pos-bg2: #2f2452; }  /* Torwart */

/* --- Rückseite: Wappen statt Streifen --- */
.back {
  align-items: center; justify-content: center; text-align: center; gap: 3px;
  background:
    radial-gradient(60% 42% at 50% 34%, color-mix(in srgb, var(--pos) 30%, transparent), transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 34%,
      #ffffff09 0deg 6deg, transparent 6deg 12deg),
    linear-gradient(165deg, var(--pos-bg2), var(--pos-bg) 60%, #070c16);
  border: 1px solid color-mix(in srgb, var(--pos) 55%, #000);
}
.back::before {   /* Innenrahmen */
  content: ""; position: absolute; inset: 4px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--pos) 34%, transparent);
  box-shadow: inset 0 0 22px #0009;
}
.back .pos {
  font-family: var(--disp); font-size: calc(var(--cw) * .30); color: var(--pos); line-height: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--pos) 60%, transparent), 0 2px 0 #0008;
}
.back .rueckname {
  font-family: var(--cond); font-size: calc(var(--cw) * .125); font-weight: 600;
  color: #eaf2fd; line-height: 1.1; letter-spacing: .4px; padding: 0 3px; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* Der Verein muss lesbar bleiben — «Nischni Nowgorod Panther» braucht zwei Zeilen. */
.back .team {
  font-size: calc(var(--cw) * .082); color: #d3e2f5cc; line-height: 1.2; padding: 0 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}

/* --- Vorderseite --- */
.front {
  transform: rotateY(180deg);
  background:
    radial-gradient(85% 55% at var(--mx) var(--my), #ffffff14, transparent 60%),
    repeating-linear-gradient(115deg, #ffffff06 0 1px, transparent 1px 7px),
    linear-gradient(168deg,
      color-mix(in srgb, var(--pos) 30%, var(--pos-bg2)) 0%,
      var(--pos-bg) 46%, #070c16 100%);
  border: 1px solid color-mix(in srgb, var(--metal) 60%, #000);
}
.front::before {   /* Metallrahmen innen */
  content: ""; position: absolute; inset: 3px; border-radius: 9px; z-index: 1;
  border: 1px solid color-mix(in srgb, var(--metal) 45%, transparent);
  box-shadow: inset 0 0 26px #000a, inset 0 1px 0 #ffffff18;
}
.card .nm {
  font-family: var(--cond); font-size: calc(var(--cw) * .135); font-weight: 600;
  line-height: 1.1; letter-spacing: .2px; text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 3px #000a;
}
.card .tm {
  font-size: calc(var(--cw) * .075); color: #a9bfd8; margin-bottom: auto; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere; letter-spacing: .2px;
}
.card .lbl {
  font-family: var(--cond); font-size: calc(var(--cw) * .075); color: var(--pos);
  text-transform: uppercase; letter-spacing: 1.1px;
}
.card .big {
  font-family: var(--disp); font-size: calc(var(--cw) * .40); line-height: .92;
  color: #fff; text-shadow: 0 2px 10px #000c, 0 0 24px color-mix(in srgb, var(--pos) 40%, transparent);
}
.card .chk { font-size: calc(var(--cw) * .082); color: var(--warn); font-family: var(--cond);
             letter-spacing: .4px; }
.card .foot { font-size: calc(var(--cw) * .075); color: var(--dim);
              display: flex; justify-content: space-between; gap: 4px; }
.card.blocked .foot, .card.inuse .foot { visibility: hidden; }
.card .plus { color: var(--good); font-weight: 700; }

/* --- Seltenheit: Metall und Hologramm --- */
.card.r-normal  { --metal: var(--r-normal); }
.card.r-bronze  { --metal: var(--r-bronze); }
.card.r-silber  { --metal: var(--r-silber); }
.card.r-gold    { --metal: var(--r-gold); }
.card.r-diamant { --metal: var(--r-diamant); }

.card.r-bronze  .front { box-shadow: 0 8px 20px #000a, inset 0 0 24px #cd844222; }
.card.r-silber  .front { box-shadow: 0 8px 20px #000a, inset 0 0 24px #cbd8e822; }
.card.r-gold    .front { box-shadow: 0 8px 22px #000a, inset 0 0 30px #f3c65a2e, 0 0 20px #f3c65a26; }
.card.r-diamant .front { box-shadow: 0 8px 22px #000a, inset 0 0 34px #8ee9ff3d, 0 0 26px #8ee9ff3d; }
.card.r-gold .big    { color: var(--r-gold); }
.card.r-diamant .big { color: var(--r-diamant); }

/* Hologramm-Schleier: nur Gold und Diamant, wandert beim Kippen mit. */
.card.r-gold .front::after, .card.r-diamant .front::after {
  content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: 1;
  pointer-events: none; mix-blend-mode: color-dodge; opacity: .38;
  background:
    linear-gradient(115deg, transparent 30%, #ffffff55 47%, transparent 62%),
    repeating-linear-gradient(72deg,
      #ff4d6d18 0 6px, #ffd60a18 6px 12px, #4cf5a318 12px 18px, #59a5ff18 18px 24px, #c77dff18 24px 30px);
  background-position: calc(var(--mx) - 50%) 0, 0 0;
  transition: background-position .12s linear;
}
.card.r-diamant .front::after { opacity: .5; }
.card.tilt .front::after { opacity: .62; }

/* ---------- Vereinswappen ---------- */
.wappen { display: block; width: 100%; height: 100%; }
/* Rückseite: Wappen gross im Hintergrund, der Positionsbuchstabe liegt darauf. */
.wpbg {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
  width: 66%; aspect-ratio: 1; opacity: .55; z-index: 1; pointer-events: none;
  filter: saturate(1.2) drop-shadow(0 3px 10px #000c);
}
.back .pos { text-shadow: 0 0 10px #000c, 0 0 22px color-mix(in srgb, var(--pos) 60%, transparent); }
/* Vorderseite: kleines Wappen vor dem Vereinsnamen. */
.card .tm { display: flex; align-items: center; gap: .35em; }
.card .tm .wp { width: calc(var(--cw) * .26); aspect-ratio: 1; flex: none;
                filter: drop-shadow(0 1px 3px #0009); }

/* Die Auflage: «1/1» heisst, es gibt sie genau einmal auf der Welt.
   Das ist der Kern des Spiels, darum steht es auf jeder Karte. */
.card .nummer {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  font-family: var(--cond); font-size: calc(var(--cw) * .085); letter-spacing: .5px;
  padding: 1px calc(var(--cw) * .04); border-radius: 4px; line-height: 1.25;
  background: #04101bcc; color: #cfe0f5; border: 1px solid #ffffff22;
}
.card .nummer.unikat {
  background: linear-gradient(180deg, #9bebff, #2ba3d0); color: #04131c;
  border-color: #ffffff44; font-weight: 700; box-shadow: 0 0 12px #57d3f566;
}
.pickwrap .card .nummer { top: auto; bottom: 6px; right: 6px; }
.gkarte .gnummer {
  position: absolute; top: 46px; right: 18px; z-index: 3;
  font-family: var(--cond); font-size: 13px; letter-spacing: 1.4px;
  text-transform: uppercase; color: #cfe8f7;
}
.vzeile .rar .nr { display: block; color: var(--dim); font-weight: 400; letter-spacing: .4px; }

/* Seltenheitsstein neben dem grossen Wert — oben rechts sass er dem
   Namen und dem Hinweisband im Weg. */
.gem {
  position: absolute; top: 58%; right: 7px; z-index: 3;
  width: calc(var(--cw) * .1); height: calc(var(--cw) * .1); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--metal) 55%, #0006);
  box-shadow: 0 0 10px color-mix(in srgb, var(--metal) 70%, transparent), inset 0 0 4px #0008;
}
.card.r-normal .gem { opacity: .55; }

.card.dead { opacity: .28; filter: grayscale(.75); }
/* Verletzt oder gesperrt: die Karte tritt zurück und trägt ein rotes Band. */
.card.blocked { opacity: .62; filter: grayscale(.5); }
.card.blocked .front, .card.blocked .back { border-color: var(--bad); }
.card.blocked .front { box-shadow: inset 0 0 26px #ff547040; }
.blockband {
  position: absolute; inset: auto 0 0 0; padding: 3px;
  text-align: center; font-size: calc(var(--cw) * .075); font-weight: 700; line-height: 1.2;
  color: #fff; background: linear-gradient(180deg, #d21c40ee, #8c1027ee); letter-spacing: .2px;
  overflow-wrap: anywhere; z-index: 4;
}
.blockband.ruhig { background: #0b1526dd; color: #dbe6f5; font-weight: 400; letter-spacing: .6px; }
.card.pick { cursor: pointer; }
.card.pick .face { box-shadow: 0 0 0 2px var(--ice), 0 0 26px var(--ice-soft), 0 8px 20px #000a; }
.card.pick::after {   /* leises Pochen: hier darfst du klicken */
  content: ""; position: absolute; inset: -4px; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 0 #57d3f566; animation: pickpuls 2.2s ease-out infinite;
}
@keyframes pickpuls {
  0%   { box-shadow: 0 0 0 0 #57d3f555; }
  70%  { box-shadow: 0 0 0 12px #57d3f500; }
  100% { box-shadow: 0 0 0 0 #57d3f500; }
}
/* Karte steht schon in der Aufstellung */
.card.inuse { opacity: .34; filter: grayscale(.85); }
.card.inuse:hover { opacity: .55; }

/* Einflug frisch gezogener Karten */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(26px) scale(.86) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Trainer, Verträge, Einrichtung ---------- */
.coachcard, .itemcard {
  width: var(--cw); min-height: var(--ch); border-radius: 13px;
  background: linear-gradient(168deg, #1a2740, #0b1220);
  border: 1px solid var(--line); padding: 9px; display: flex; flex-direction: column;
  flex: none; font-size: 12px; position: relative; overflow: hidden;
  box-shadow: 0 8px 20px #0008, inset 0 1px 0 #ffffff10;
  transition: .18s;
}
.coachcard:hover, .itemcard:hover, .decorcard:hover { transform: translateY(-4px); }
.coachcard::before, .itemcard::before {
  content: ""; position: absolute; inset: 3px; border-radius: 9px;
  border: 1px solid #ffffff12; pointer-events: none;
}
.coachcard .nm, .itemcard .nm {
  font-family: var(--cond); font-weight: 600; font-size: calc(var(--cw) * .13);
  line-height: 1.1; text-transform: uppercase;
}
.coachcard .role, .itemcard .role {
  font-family: var(--cond); font-size: calc(var(--cw) * .082); color: var(--ice);
  text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: auto;
}
.coachcard .bonus, .itemcard .bonus {
  font-family: var(--disp); font-size: calc(var(--cw) * .26); color: var(--good);
  line-height: 1; text-shadow: 0 0 18px #3ddc8455;
}
.itemcard .info { color: var(--dim); font-size: calc(var(--cw) * .075); }
.itemcard.r-gold, .coachcard.r-gold { border-color: var(--r-gold); box-shadow: 0 8px 22px #000a, inset 0 0 26px #f3c65a22; }
.itemcard.r-diamant, .coachcard.r-diamant { border-color: var(--r-diamant); box-shadow: 0 8px 22px #000a, inset 0 0 26px #8ee9ff2a; }
.decorcard {
  width: var(--cw); min-height: calc(var(--ch) * .8); border-radius: 13px;
  background: linear-gradient(168deg, #1a2740, #0b1220);
  border: 1px solid var(--line); padding: 9px; text-align: center; flex: none;
  font-size: 11.5px; transition: .18s; box-shadow: 0 8px 20px #0008;
}
.decorcard .vis { font-size: calc(var(--cw) * .3); filter: drop-shadow(0 4px 8px #0008); }
.decorcard .nm { font-family: var(--cond); font-weight: 600; line-height: 1.15;
                 font-size: calc(var(--cw) * .12); text-transform: uppercase; }
.decorcard .sl { color: var(--dim); font-size: calc(var(--cw) * .08); }

/* ============================================================
   Spielbrett — passt auf eine Bildschirmhöhe
   ============================================================ */
.matchscreen {
  height: 100dvh; overflow: hidden; display: flex; flex-direction: column;
  padding: 8px 12px 10px; gap: 8px; position: relative;
  /* Die Kartengrösse muss in BEIDE Richtungen passen: quer stehen sieben
     Karten nebeneinander (6 im Block + Torwart), hoch drei Reihen
     übereinander. Ein fester Mindestwert war der Fehler — auf einem
     schmalen Handy schnitt er die äusseren Karten einfach ab. */
  /* Die Höhe muss für drei Kartenreihen PLUS die beiden Zeilenköpfe, die
     Abstände und die Leisten darüber und darunter reichen. Mit zu knapp
     gerechnetem Abzug rutschte die eigene Reihe hinter die Hinweisleiste. */
  --cw: clamp(26px,
              min(calc((100vw - 74px) / 7.3), calc((100dvh - 276px) / 4.3)),
              120px);
  --ch: calc(var(--cw) * 1.4);
}
.matchscreen.beben { animation: beben .38s cubic-bezier(.36,.07,.19,.97); }
@keyframes beben {
  10%, 90% { transform: translate(-2px, 1px); }
  30%, 70% { transform: translate(4px, -2px); }
  50%      { transform: translate(-5px, 2px); }
}

.scoreline {
  display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center;
  gap: 12px; border-radius: 14px; padding: 8px 16px; flex: none;
  background: linear-gradient(180deg, #101c2fdd, #080e1add);
  border: 1px solid var(--line); box-shadow: inset 0 1px 0 #ffffff12, 0 8px 24px #0007;
}
/* Die Hervorhebung soll nur den Namen umfassen, nicht das halbe Feld. */
.side { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%;
        padding: 4px 12px; border-radius: 10px; transition: .2s; justify-self: start; }
.side.right { justify-content: flex-end; justify-self: end; }
.side .nm { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-family: var(--cond); font-size: 18px; letter-spacing: .6px; text-transform: uppercase; }
.side .sc { font-family: var(--disp); font-size: 34px; line-height: 1;
            text-shadow: 0 0 20px #57d3f544; }
.mid { text-align: center; display: flex; flex-direction: column; }
.mid span:first-child { color: var(--ice); font-family: var(--cond); font-size: 18px;
                        letter-spacing: 1px; text-transform: uppercase; }
.mid .tiny { color: var(--dim); }

/* Wer am Zug ist: die aktive Seite wird hell, die andere tritt zurück. */
.side.aktiv { background: #57d3f51f; box-shadow: inset 0 0 0 1px var(--ice); }
.side.aktiv .nm { color: var(--txt); }
.side.passiv { opacity: .45; }
.sc.zaehlt { animation: torzahl .7s cubic-bezier(.2,1.6,.4,1); }
@keyframes torzahl {
  0% { transform: scale(1); } 35% { transform: scale(1.55); color: var(--good); }
  100% { transform: scale(1); }
}

/* Das Zugband: eine Zeile, die immer sagt, wer dran ist. */
.turnbar {
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 9px 18px; border-radius: 12px; font-size: 17px;
  font-family: var(--cond); letter-spacing: .4px;
  border: 1px solid var(--line); background: var(--panel); transition: .2s;
}
.turnbar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--dim); flex: none; }
.turnbar .skip { margin-left: auto; font-family: var(--body); font-size: 12.5px;
                 color: var(--dim); opacity: 0; transition: .2s; }
.turnbar.du {
  border-color: var(--ice); background: linear-gradient(180deg, #0e2c3d, #0a1c2a); color: #9fe8ff;
  box-shadow: 0 0 30px var(--ice-soft), inset 0 1px 0 #ffffff10;
}
.turnbar.du .dot { background: var(--ice); animation: puls 1.4s ease-in-out infinite; }
@keyframes puls {
  0%,100% { box-shadow: 0 0 0 0 #57d3f566; }
  50%     { box-shadow: 0 0 0 7px #57d3f500; }
}
.turnbar.gegner { color: var(--warn); border-color: #6b4d12;
                  background: linear-gradient(180deg, #2b2009, #1a1406); }
.turnbar.gegner .dot { background: var(--warn); animation: laufen 1s linear infinite; }
@keyframes laufen { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }
.turnbar.gegner .skip { opacity: 1; }
.turnbar.ende { color: var(--dim); }

/* --- Das Eis --- */
.ice {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 18px; padding: 10px 14px; gap: 6px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% 50%, #16304d 0%, #0b1728 55%, #070e1a 100%);
  box-shadow: inset 0 1px 0 #ffffff12, inset 0 -30px 60px #0006, 0 14px 40px #0008;
}
/* Eismarkierungen. Das Eis liegt quer: der Gegner oben, du unten —
   also laufen die blauen Linien und die rote Mittellinie waagrecht. */
.ice::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* rote Mittellinie */
    linear-gradient(180deg, transparent calc(50% - 1.5px), #ff4a6a2e calc(50% - 1.5px),
                    #ff4a6a2e calc(50% + 1.5px), transparent calc(50% + 1.5px)),
    /* zwei blaue Linien */
    linear-gradient(180deg, transparent calc(26% - 1px), #4aa8ff1c calc(26% - 1px),
                    #4aa8ff1c calc(26% + 1px), transparent calc(26% + 1px)),
    linear-gradient(180deg, transparent calc(74% - 1px), #4aa8ff1c calc(74% - 1px),
                    #4aa8ff1c calc(74% + 1px), transparent calc(74% + 1px)),
    /* vier Anspielpunkte */
    radial-gradient(circle at 22% 22%, transparent 40px, #ff4a6a1c 40px, #ff4a6a1c 41.5px, transparent 42px),
    radial-gradient(circle at 78% 22%, transparent 40px, #ff4a6a1c 40px, #ff4a6a1c 41.5px, transparent 42px),
    radial-gradient(circle at 22% 78%, transparent 40px, #ff4a6a1c 40px, #ff4a6a1c 41.5px, transparent 42px),
    radial-gradient(circle at 78% 78%, transparent 40px, #ff4a6a1c 40px, #ff4a6a1c 41.5px, transparent 42px);
}
.ice::after {   /* Anspielkreis in der Mitte */
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(230px, 26vw); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  border: 1.5px solid #ff4a6a22; box-shadow: inset 0 0 70px #ffffff08;
}
/* Vereinszeichen in der Mitte des Eises — wie im echten Stadion. */
.eislogo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--disp); font-size: clamp(28px, 5.4vw, 74px); line-height: 1;
  letter-spacing: 4px; text-transform: uppercase; text-align: center;
  color: #cfe8ff; opacity: .07; pointer-events: none; white-space: nowrap;
  max-width: 90%; overflow: hidden; text-overflow: ellipsis;
}
.lane { flex: 0 0 auto; position: relative; z-index: 1; }
.lane-head { color: var(--dim); font-family: var(--cond); font-size: 13px;
             text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 5px;
             display: flex; gap: 10px; }
.laneinfo { color: var(--good); letter-spacing: .4px; }
.laneCards { display: flex; gap: 14px; align-items: flex-start; justify-content: center; }
.lane-head { justify-content: center; }
.cards { display: flex; gap: 8px; flex-wrap: nowrap; }
#oppGoalie, #youGoalie { border-left: 1px solid var(--line); padding-left: 14px; }

/* Das Duellfeld liegt über den Kartenreihen. */
.duel { flex: 1 1 auto; min-height: var(--ch); display: grid; place-items: center;
        position: relative; z-index: 3;
        background: radial-gradient(460px 150px at 50% 50%, #57d3f518, transparent 70%); }
.duel-inner { display: flex; align-items: center; gap: clamp(12px, 3vw, 38px); }
.duel-inner .card { animation: cardIn .32s cubic-bezier(.2,1.3,.4,1) both; }
.duel-vs { font-family: var(--disp); font-size: 30px; letter-spacing: 2px; }
.duel-vs.tor   { color: var(--good); text-shadow: 0 0 26px #3ddc8477; }
.duel-vs.block { color: var(--bad);  text-shadow: 0 0 26px #ff547077; }
.duel-note { color: var(--dim); font-size: 13.5px; text-align: center; max-width: 280px; }

.flash-goal  { animation: goalflash .8s ease-out; }
@keyframes goalflash {
  0% { box-shadow: inset 0 0 0 #3ddc8400; } 22% { box-shadow: inset 0 0 160px #3ddc8477; }
  100% { box-shadow: inset 0 0 0 #3ddc8400; } }
.flash-block { animation: blockflash .6s ease-out; }
@keyframes blockflash {
  0% { box-shadow: inset 0 0 0 #ff547000; } 25% { box-shadow: inset 0 0 130px #ff547066; }
  100% { box-shadow: inset 0 0 0 #ff547000; } }

.prompt {
  flex: none; padding: 9px 16px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--line); font-size: 14px;
}
.prompt b { color: var(--ice); }
.prompt.act { border-color: var(--ice); box-shadow: 0 0 26px var(--ice-soft); }
.logbtn { justify-self: end; display: flex; gap: 6px; align-items: center; }

.logpanel {
  position: absolute; right: 14px; top: 66px; width: min(380px, 80vw);
  max-height: 62vh; overflow-y: auto; z-index: 20;
  background: #060c17f2; border: 1px solid var(--line); border-radius: 14px;
  padding: 12px 16px; backdrop-filter: blur(8px); box-shadow: var(--shadow);
}
.log { font-size: 13px; color: var(--dim); }
.log div { padding: 3px 0; border-bottom: 1px solid #12203a; }
.log div:last-child { border-bottom: none; }
.log .g { color: var(--good); } .log .b { color: var(--bad); }
.log .p { color: var(--warn); } .log .n { color: var(--ice); }

.endoverlay {
  position: absolute; inset: 0; display: grid; place-items: safe center;
  background: #030710e8; backdrop-filter: blur(6px); z-index: 40;
  animation: fade .35s ease-out;
  /* Nach einem Turnier können viele Meldungen kommen (Verträge abgelaufen,
     Verletzte …). Das Fenster muss dann scrollen, sonst hängt der Knopf
     unter dem Rand — so kam Pascal am 11.09. nicht mehr aus der Partie. */
  overflow-y: auto; padding: 16px;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
.endbox {
  background: linear-gradient(180deg, #12203aee, #0a1120ee);
  border: 1px solid var(--line); border-radius: 22px;
  padding: 36px 46px; text-align: center; max-width: min(580px, 92vw);
  box-shadow: var(--shadow), inset 0 1px 0 #ffffff18;
  animation: endin .4s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes endin { from { opacity: 0; transform: translateY(20px) scale(.94); } to { opacity: 1; } }
.endtitle { font-family: var(--disp); font-size: 52px; letter-spacing: 3px; line-height: 1;
            text-transform: uppercase; }
.endtitle.win  { color: var(--good); text-shadow: 0 0 34px #3ddc8455; }
.endtitle.lose { color: var(--bad);  text-shadow: 0 0 34px #ff547044; }
.endscore { font-family: var(--disp); font-size: 62px; margin: 8px 0 16px; line-height: 1; }
.endnotes { color: var(--dim); font-size: 14px; margin-bottom: 22px; text-align: left;
            max-height: 38vh; overflow-y: auto; padding-right: 6px; }
.endnotes div { padding: 2px 0; }

/* ============================================================
   Aufstellung
   ============================================================ */
.blockrow { background: var(--panel); border: 1px solid var(--line);
            border-radius: var(--radius); padding: 13px 16px; margin-bottom: 12px;
            box-shadow: inset 0 1px 0 #ffffff0d; }
.blockrow h3 { margin: 0 0 4px; font-size: 16px; }
.blockrow .bonus { color: var(--good); font-size: 12.5px; margin-bottom: 8px; }
.slotline { display: flex; gap: 11px; flex-wrap: wrap; align-items: flex-start; }
.slot {
  width: var(--cw); min-height: var(--ch); border-radius: 13px; border: 1px dashed var(--line);
  display: grid; place-items: center; color: var(--dim); font-size: 12px; cursor: pointer;
  text-align: center; padding: 6px; flex: none;
  background: repeating-linear-gradient(45deg, #0a121f 0 8px, #0c1626 8px 16px);
  transition: .16s;
}
.slot:hover { border-color: var(--ice); color: var(--ice); background: #0e1b2c;
              box-shadow: inset 0 0 24px var(--ice-soft); }
.slotwrap { position: relative; }
.slotwrap .clear {
  position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim);
  font-size: 13px; line-height: 1; display: grid; place-items: center; z-index: 6;
}
.slotwrap .clear:hover { border-color: var(--bad); color: var(--bad); }

/* ---------- Auswahlfenster ---------- */
.picker { position: fixed; inset: 0; background: #030710e0; backdrop-filter: blur(6px);
          z-index: 60; display: grid; place-items: center; padding: 20px; }
.picker-box {
  background: linear-gradient(180deg, #101c31f2, #0a1120f2);
  border: 1px solid var(--line); border-radius: 20px;
  padding: 20px; width: min(1040px, 96vw); max-height: 86vh;
  display: flex; flex-direction: column; box-shadow: var(--shadow);
}
.picker-head { display: flex; justify-content: space-between; align-items: center;
               margin-bottom: 14px; font-family: var(--cond); font-size: 20px;
               letter-spacing: .6px; text-transform: uppercase; }
.picker-body { overflow-y: auto; display: flex; flex-wrap: wrap; gap: 12px; padding: 4px; }

/* ============================================================
   Päckchen, Sammlung, Börse, Turnier
   ============================================================ */
.grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.packlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin-top: 16px; }
.packcard {
  --pc: var(--ice);
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, color-mix(in srgb, var(--pc) 16%, #101b2e), #080e1a);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, var(--line));
  border-radius: var(--radius); padding: 17px 18px; text-align: left; color: var(--txt);
  transition: .2s; display: flex; flex-direction: column; gap: 6px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 10px 26px #0008;
}
.packcard::before {   /* Folienglanz */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(115deg, transparent 34%, #ffffff26 48%, transparent 60%);
  transform: translateX(-120%); transition: transform .5s;
}
.packcard:hover::before { transform: translateX(120%); }
.packcard:hover { transform: translateY(-4px); box-shadow: 0 16px 34px #0009,
                  0 0 26px color-mix(in srgb, var(--pc) 30%, transparent); }
.packcard { flex-direction: row; align-items: stretch; gap: 14px; }
.packcard .pb { width: 78px; flex: none; object-fit: contain; align-self: center;
                filter: drop-shadow(0 8px 16px #000a); transition: .2s; }
.packcard:hover .pb { transform: translateY(-3px) scale(1.05) rotate(-2deg); }
.packcard .pt { display: flex; flex-direction: column; gap: 5px; text-align: left; flex: 1; }
.packcard .pn { font-family: var(--cond); font-weight: 700; font-size: 21px;
                text-transform: uppercase; letter-spacing: .8px; color: var(--pc); }
.packcard .pi { color: var(--dim); font-size: 12.5px; flex: 1; }
.packcard .pp { font-family: var(--cond); font-weight: 700; color: var(--gold); font-size: 20px; }
.packcard:disabled { opacity: .42; }

/* ---------- Herausforderungen ---------- */
.challkarte {
  --pc: var(--ice);
  background: linear-gradient(165deg, color-mix(in srgb, var(--pc) 12%, #101b2e), #080e1a);
  border: 1px solid color-mix(in srgb, var(--pc) 40%, var(--line));
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 #ffffff14, 0 10px 26px #0008;
}
.challkarte .chkopf { display: flex; justify-content: space-between;
                      gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.challkarte .chkopf b { font-family: var(--cond); font-weight: 700; font-size: 21px;
                        text-transform: uppercase; letter-spacing: .8px; color: var(--pc); }
.challkarte .lohn { font-family: var(--cond); font-weight: 700;
                    color: var(--gold); font-size: 18px; text-align: right; }
.challkarte .pill { display: inline-block; margin-left: 8px; padding: 2px 10px;
                    border: 1px solid var(--line); border-radius: 999px;
                    font-size: 11px; letter-spacing: .6px; color: var(--dim);
                    vertical-align: middle; }
.challkarte .pill.zeit { color: var(--pc);
                         border-color: color-mix(in srgb, var(--pc) 55%, transparent); }
.challkarte h4 { margin: 16px 0 6px; font-size: 12px; color: var(--dim);
                 text-transform: uppercase; letter-spacing: 1.2px; }
.chaktion { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
            margin-top: 14px; border-top: 1px solid #16253f; padding-top: 14px; }
/* Bestenliste — dieselbe Zeilenoptik wie die Ligatabelle. */
.tabelle-chall { display: flex; flex-direction: column; gap: 3px; }
.czeile2 {
  display: grid; grid-template-columns: 30px 1fr 110px; align-items: center;
  gap: 10px; padding: 7px 12px; border-radius: 9px; font-size: 13.5px;
  background: var(--panel); border: 1px solid var(--line); text-align: center;
}
.czeile2 .nm { text-align: left; font-family: var(--cond); font-size: 16px; letter-spacing: .3px; }
.czeile2.kopf { background: transparent; border: none; color: var(--dim); font-size: 11.5px;
                text-transform: uppercase; letter-spacing: 1px; }
.czeile2.ich { border-color: var(--pc); background: #0d2233; }

@media (max-width: 560px) {
  .challkarte .chkopf { flex-direction: column; }
  .challkarte .lohn { text-align: left; }
}



/* Saison-Päckchen: gibt es nur für kurze Zeit — das muss man sehen. */
.packcard.saison { border-color: color-mix(in srgb, var(--pc) 70%, var(--line)); }
.packcard .pz {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; letter-spacing: .6px; color: var(--pc);
  border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  border-radius: 999px; padding: 2px 10px 2px 3px;
}
/* Kurze Sperre direkt nach dem Öffnen — gegen den Fehlkauf mit demselben
   Fingertipp, der die Zeremonie geschlossen hat. */
.gesperrt { pointer-events: none; opacity: .55; transition: opacity .15s; }

.packcard .pgrenze {
  align-self: flex-start; font-size: 11.5px; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius: 999px; padding: 2px 10px;
}
.packcard.vergriffen .pgrenze { color: var(--dim); border-color: var(--line); }
.packcard.vergriffen { opacity: .55; }
.packcard .pz b {
  background: var(--pc); color: #0a0f19; border-radius: 999px;
  font-family: var(--cond); font-weight: 700; font-size: 10.5px;
  letter-spacing: 1.2px; padding: 2px 8px;
}

.reveal .card, .reveal .coachcard, .reveal .itemcard, .reveal .decorcard {
  animation: pop .6s cubic-bezier(.2,1.4,.4,1) both; }
.reveal > *:nth-child(1) { animation-delay: .05s } .reveal > *:nth-child(2) { animation-delay: .18s }
.reveal > *:nth-child(3) { animation-delay: .31s } .reveal > *:nth-child(4) { animation-delay: .44s }
.reveal > *:nth-child(5) { animation-delay: .57s }
@keyframes pop { from { opacity: 0; transform: scale(.4) rotateY(180deg); }
                 to { opacity: 1; transform: scale(1) rotateY(0); } }

/* ---------- Päckchen-Zeremonie ----------
   Die Hülle soll sich wie eine echte Plastikpackung anfühlen: gewölbte
   Folie mit Glanzstreifen, geriffelte Schweissnähte oben und unten,
   je Sorte ein eigenes Muster. */
.packopen {
  position: fixed; inset: 0; z-index: 70; display: grid;
  /* «safe center» statt «center»: passt die Beute nicht mehr auf den
     Bildschirm, wird sie oben angesetzt statt an beiden Enden abgeschnitten.
     Mit overflow-y kommt man dann an die letzte Reihe heran — vorher war
     bei mehr als zwei Reihen die unterste weg und nicht scrollbar. */
  place-items: safe center; overflow-y: auto; overscroll-behavior: contain;
  background: #020509f2; backdrop-filter: blur(10px); animation: fade .25s ease-out;
  padding: 20px; text-align: center; perspective: 1200px;
}
/* Beim Schliessen bleibt das Fenster kurz als unsichtbarer Deckel liegen und
   schluckt den Klick, der sonst auf der Päckchenkarte darunter landet. */
.packopen.verblasst { opacity: 0; transition: opacity .18s; backdrop-filter: none; }
.packopen .strahl, .grossauftritt .strahl {
  position: absolute; inset: -20%; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: conic-gradient(from 0deg at 50% 50%,
    #ffffff00 0deg, #ffffff12 7deg, #ffffff00 15deg, #ffffff00 40deg,
    #ffffff10 47deg, #ffffff00 55deg, #ffffff00 95deg,
    #ffffff0e 103deg, #ffffff00 111deg, #ffffff00 180deg,
    #ffffff12 188deg, #ffffff00 196deg, #ffffff00 260deg,
    #ffffff10 268deg, #ffffff00 276deg, #ffffff00 360deg);
  animation: drehen 26s linear infinite;
}
.packopen.hell .strahl, .grossauftritt .strahl { opacity: 1; }
@keyframes drehen { to { transform: rotate(360deg); } }

.huelle {
  --pc: var(--ice); --rx: 0deg; --ry: 0deg; --gx: 50%;
  position: relative; z-index: 2; cursor: pointer;
  width: min(320px, 76vw); aspect-ratio: 3 / 4.6; border-radius: 6px;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d; transition: transform .12s ease-out;
  animation: wiegen 4.5s ease-in-out infinite;
  /* Wölbung: dunkel an den Rändern, hell in der Mitte — das macht die Folie */
  background:
    linear-gradient(90deg, #00000070 0%, #00000020 8%, #ffffff28 26%, #ffffff10 40%,
                    #00000018 58%, #ffffff20 76%, #00000030 92%, #00000075 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--pc) 72%, #0b1220) 0%,
                    color-mix(in srgb, var(--pc) 42%, #070c16) 52%,
                    color-mix(in srgb, var(--pc) 78%, #05080f) 100%);
  box-shadow: 0 34px 70px #000d, 0 0 70px color-mix(in srgb, var(--pc) 30%, transparent),
              inset 0 0 40px #0006;
}
/* Liegt ein gezeichnetes Päckchen vor, zeigt die Hülle nur noch dieses
   Bild — Nähte, Muster und Aufdruck sind dann schon drauf. */
.huelle .folie {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  z-index: 3; filter: drop-shadow(0 26px 40px #000c);
}
.huelle:not(.ohnebild) { background: none; box-shadow: none; }
.huelle:not(.ohnebild) .naht,
.huelle:not(.ohnebild) .muster,
.huelle:not(.ohnebild) .knick,
.huelle:not(.ohnebild) .aufdruck { display: none; }
/* Ausnahme: die Saison-Folien sind absichtlich LEER geliefert. Bei ihnen
   gehört der Aufdruck wieder her — er ist ja der ganze Sinn der Sache.
   Die acht festen Sorten tragen ihren Namen schon im Bild. */
.huelle.mitfolie:not(.ohnebild) .aufdruck {
  display: flex; z-index: 5;
  text-shadow: 0 2px 6px #000c, 0 0 16px #0009;
}
.huelle.mitfolie .aufdruck .marke { opacity: .85; }
.huelle:not(.ohnebild) .glanz {
  z-index: 4; opacity: .5; border-radius: 0;
  /* Der Glanz darf nur auf der Folie liegen, nicht im leeren Raum daneben. */
  mask-image: var(--pack); -webkit-mask-image: var(--pack);
  mask-size: contain; -webkit-mask-size: contain;
  mask-position: center; -webkit-mask-position: center;
}
.huelle:not(.ohnebild) .reissen { z-index: 4; bottom: -30px; }
.huelle.ohnebild .folie { display: none; }

@keyframes wiegen {
  0%,100% { rotate: -1.6deg; translate: 0 0; }
  50%     { rotate: 1.6deg; translate: 0 -10px; }
}
/* Schweissnähte oben und unten */
.huelle .naht {
  position: absolute; left: 0; right: 0; height: 7%;
  background:
    repeating-linear-gradient(90deg, #ffffff30 0 2px, #00000030 2px 5px),
    color-mix(in srgb, var(--pc) 55%, #0a1018);
  box-shadow: inset 0 0 10px #0008;
}
.huelle .naht.oben  { top: 0; border-bottom: 1px solid #0006; }
.huelle .naht.unten { bottom: 0; border-top: 1px solid #0006; }
/* Der Kartenstapel drückt sich von innen durch */
.huelle .knick {
  position: absolute; inset: 12% 9% 12% 9%; border-radius: 4px; pointer-events: none;
  box-shadow: inset 0 0 30px #00000055, 0 0 22px #ffffff10;
  background: linear-gradient(100deg, #ffffff00 40%, #ffffff10 50%, #ffffff00 60%);
}
/* Laufender Glanz */
.huelle .glanz {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 6px;
  background: linear-gradient(102deg, transparent 34%, #ffffff40 48%, #ffffff10 53%, transparent 66%);
  background-size: 260% 100%; background-position: var(--gx) 0;
  animation: folienglanz 3.6s ease-in-out infinite;
}
@keyframes folienglanz {
  0% { background-position: -60% 0; } 60%,100% { background-position: 160% 0; }
}
/* Muster je Sorte */
.huelle .muster { position: absolute; inset: 7% 0; pointer-events: none; opacity: .5; }
.sorte-einsteiger .muster { background: repeating-linear-gradient(180deg, #ffffff10 0 2px, transparent 2px 16px); }
.sorte-standard .muster   { background: repeating-linear-gradient(60deg, #ffffff12 0 3px, transparent 3px 22px); }
.sorte-sturm .muster      { background: repeating-linear-gradient(-40deg, #ffffff1c 0 6px, transparent 6px 20px); }
.sorte-abwehr .muster     { background: repeating-linear-gradient(90deg, #ffffff12 0 4px, transparent 4px 26px),
                                        repeating-linear-gradient(0deg, #ffffff0c 0 4px, transparent 4px 26px); }
.sorte-gold .muster       { background: repeating-conic-gradient(from 0deg at 50% 40%,
                                        #ffffff1a 0deg 4deg, transparent 4deg 10deg); }
.sorte-stab .muster       { background: repeating-linear-gradient(135deg, #ffffff14 0 5px, transparent 5px 18px); }
.sorte-vertraege .muster  { background: repeating-linear-gradient(180deg, #ffffff10 0 1px, transparent 1px 9px); }
.sorte-garderobe .muster  { background: radial-gradient(60% 40% at 50% 30%, #ffffff20, transparent 70%); }

.huelle .aufdruck {
  position: absolute; inset: 14% 8% auto 8%; z-index: 2;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
}
.huelle .marke { width: 68%; margin: 0 auto; filter: drop-shadow(0 3px 10px #000a); }
.huelle .sorte {
  font-family: var(--cond); font-size: clamp(13px, 3.4vw, 18px); letter-spacing: 1.4px;
  text-transform: uppercase; color: #ffffffdd;
}
.huelle .menge {
  margin-top: 4px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #ffffff9c;
}
.huelle .reissen {
  position: absolute; left: 0; right: 0; bottom: 9%; z-index: 2;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #ffffff70;
  animation: blinken 2s ease-in-out infinite;
}
@keyframes blinken { 0%,100% { opacity: .35 } 50% { opacity: 1 } }
.huelle.auf { animation: reissen .55s cubic-bezier(.3,1.4,.4,1) forwards; }
@keyframes reissen {
  30%  { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(2.6) rotate(-3deg); opacity: 0; }
}

/* Die Beute */
.beutebox { z-index: 2; max-width: 100%; padding: 10px 0 6px; }
.packopen .titel { font-family: var(--disp); font-size: clamp(20px, 4vw, 30px);
                   letter-spacing: 2px; text-transform: uppercase; margin-bottom: 18px; }
.packopen .beute { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
                   max-width: min(1050px, 94vw); }
.beutekarte { animation: pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.beutekarte .card, .beutekarte .coachcard,
.beutekarte .itemcard, .beutekarte .decorcard { --cw: clamp(104px, 14vw, 158px); }
/* Verdeckte Diamantkarte: sie wartet auf den Fingertipp. */
.beutekarte.verdeckt .ruecken {
  width: clamp(104px, 14vw, 158px); aspect-ratio: 1 / 1.4; border-radius: 13px;
  display: grid; place-items: center; gap: 6px; cursor: pointer;
  background: linear-gradient(165deg, #12354a, #071019 70%);
  border: 1px solid var(--r-diamant);
  box-shadow: 0 0 0 1px #8ee9ff40, 0 0 34px #8ee9ff55, inset 0 0 30px #8ee9ff26;
  animation: diapuls 1.5s ease-in-out infinite;
}
@keyframes diapuls {
  0%,100% { box-shadow: 0 0 0 1px #8ee9ff40, 0 0 26px #8ee9ff44, inset 0 0 26px #8ee9ff22; }
  50%     { box-shadow: 0 0 0 1px #8ee9ff80, 0 0 52px #8ee9ff88, inset 0 0 34px #8ee9ff44; }
}
.beutekarte .funkel { font-size: 34px; color: var(--r-diamant);
                      text-shadow: 0 0 20px #8ee9ff; }
.beutekarte .hinweis { font-family: var(--cond); font-size: 14px; letter-spacing: 1.5px;
                       text-transform: uppercase; color: #cdefff; }
.packopen .zeile { color: var(--dim); margin-top: 20px; font-size: 14px; }
.packopen .zeile .dia { color: var(--r-diamant); font-weight: 400; }

/* ---------- Grosser Auftritt einer Diamantkarte ---------- */
.grossauftritt {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  background: #01040af6; backdrop-filter: blur(14px);
  animation: fade .3s ease-out; padding: 20px; text-align: center;
}
.gkarte {
  --pos: var(--ice); --pos-bg: #16253f; --pos-bg2: #1a2c4a;
  position: relative; z-index: 2;
  width: min(330px, 78vw); aspect-ratio: 1 / 1.4; border-radius: 18px;
  padding: 20px 18px; display: flex; flex-direction: column; align-items: flex-start;
  background:
    radial-gradient(80% 50% at 50% 0%, #ffffff1a, transparent 60%),
    linear-gradient(168deg, color-mix(in srgb, var(--pos) 34%, var(--pos-bg2)) 0%,
                    var(--pos-bg) 46%, #070c16 100%);
  border: 2px solid var(--r-diamant);
  box-shadow: 0 30px 80px #000c, 0 0 60px #8ee9ff44, inset 0 0 50px #8ee9ff22;
  animation: gkommt .7s cubic-bezier(.2,1.2,.3,1) both;
}
.gkarte.p-F { --pos: #ff7a5c; --pos-bg: #2e1620; --pos-bg2: #45202c; }
.gkarte.p-D { --pos: #3ddc84; --pos-bg: #10281f; --pos-bg2: #17392a; }
.gkarte.p-G { --pos: #b06cf0; --pos-bg: #221a3a; --pos-bg2: #2f2452; }
@keyframes gkommt {
  from { opacity: 0; transform: rotateY(180deg) scale(.6); }
  to   { opacity: 1; transform: none; }
}
.gkarte .gfolie {
  position: absolute; inset: 0; border-radius: 16px; pointer-events: none;
  mix-blend-mode: color-dodge; opacity: .16;
  background:
    linear-gradient(115deg, transparent 32%, #ffffff66 47%, transparent 62%),
    repeating-linear-gradient(72deg, #ff4d6d18 0 5px, #ffd60a18 5px 10px,
                              #4cf5a318 10px 15px, #59a5ff18 15px 20px, #c77dff18 20px 25px);
  animation: holowandern 5s linear infinite;
}
@keyframes holowandern { to { background-position: 300px 0, 0 0; } }
/* Die Felder kommen einzeln dazu. */
.gkarte .gfeld { opacity: 0; transform: translateY(10px); transition: .45s cubic-bezier(.2,.9,.3,1); }
.gkarte .gfeld.an { opacity: 1; transform: none; }
.gkarte .nm  { font-family: var(--cond); font-size: 30px; font-weight: 600; line-height: 1.05;
               text-transform: uppercase; text-align: left; }
.gkarte .tm  { font-size: 14px; color: #b9cee6; margin-top: 2px; }
.gkarte .chk { font-family: var(--cond); font-size: 17px; color: var(--warn); margin-top: 14px; }
.gkarte .pos { font-family: var(--cond); font-size: 15px; letter-spacing: 2px;
               text-transform: uppercase; color: var(--pos); margin-top: 4px; }
.gkarte .gwappen {
  position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%);
  width: 62%; aspect-ratio: 1; opacity: 0; transition: opacity .7s, transform .7s;
  filter: drop-shadow(0 6px 20px #000a); pointer-events: none;
}
.gkarte .gwappen.an { opacity: .34; transform: translate(-50%, -50%) scale(1.04); }
.gkarte .gstein {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  font-family: var(--cond); font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
  color: #04131c; background: linear-gradient(180deg, #d7f6ff, #7ad3ee);
  padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 20px #8ee9ff88;
}
.gkarte .wert { position: relative; margin-top: auto; display: flex; align-items: baseline; gap: 10px; }
.gkarte .wert b { font-family: var(--disp); font-size: 78px; line-height: .9;
                  color: var(--r-diamant); text-shadow: 0 0 40px #8ee9ff77; }
.gkarte .wert i { font-family: var(--cond); font-style: normal; font-size: 15px;
                  letter-spacing: 1.6px; text-transform: uppercase; color: #cfe8f7; }
.gkarte.schlag { animation: gschlag .5s cubic-bezier(.2,1.5,.3,1); }
@keyframes gschlag { 0% { transform: scale(1) } 35% { transform: scale(1.07) } 100% { transform: scale(1) } }
.grossauftritt .gzeile {
  margin-top: 22px; z-index: 2; font-family: var(--cond); font-size: 20px;
  letter-spacing: 3px; text-transform: uppercase; color: var(--r-diamant);
}

.levels { display: flex; gap: 14px; flex-wrap: wrap; margin: 12px 0 20px; }
.lvl { background: linear-gradient(165deg, #14233bcc, #0a1120cc); border: 1px solid var(--line);
       border-radius: var(--radius); padding: 18px 24px; color: var(--txt); text-align: left;
       min-width: 190px; transition: .2s; box-shadow: inset 0 1px 0 #ffffff10; }
.lvl:hover { border-color: var(--ice); transform: translateY(-4px); box-shadow: 0 14px 30px #0009; }
.lvl b { display: block; font-family: var(--cond); font-size: 22px; letter-spacing: .8px;
         text-transform: uppercase; margin-bottom: 2px; }
.lvl span { color: var(--dim); font-size: 12.5px; }

.offerform { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.offerform select, .offerform input {
  background: #0a1120; color: var(--txt); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font: inherit;
}
.offerform select { min-width: 300px; }
.offer { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.offer .price { color: var(--gold); font-family: var(--cond); font-size: 17px; font-weight: 700; }
.offer .seller { color: var(--dim); font-size: 11.5px; }

.bracket { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; }
.brRound { min-width: 240px; }
.brRound h3 { margin-bottom: 8px; }
.brRound.now h3::after { content: " · jetzt"; color: var(--warn); }
.pair {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin-bottom: 8px; font-size: 13.5px;
}
.pair.me { border-color: var(--ice); box-shadow: 0 0 20px var(--ice-soft); }
.pair .t { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; }
.pair .t.you { color: var(--ice); }
/* Eigene Partien sollen den Ausgang genauso deutlich zeigen wie fremde. */
.pair .t.win, .pair .t.you.win { color: var(--good); font-weight: 700; }
.pair .t.lose, .pair .t.you.lose { color: var(--dim); font-weight: 400; }

/* Handy im Querformat: sehr wenig Höhe. Alles Feste wird flacher,
   damit die drei Kartenreihen überhaupt Platz haben. */
@media (max-height: 520px) and (orientation: landscape) {
  .matchscreen { padding: 4px 8px 6px; gap: 4px; --cw: clamp(26px,
                 min(calc((100vw - 74px) / 7.3), calc((100dvh - 158px) / 4.9)), 120px); }
  .scoreline { padding: 3px 10px; }
  .side .sc { font-size: 22px; }
  .side .nm { font-size: 14px; }
  .mid span:first-child { font-size: 14px; }
  .mid .tiny, .turnbar .skip { display: none; }
  .turnbar { padding: 4px 12px; font-size: 14px; }
  .prompt { padding: 5px 10px; font-size: 12px; }
  .ice { padding: 6px 8px; gap: 3px; border-radius: 12px; }
  .lane-head { font-size: 10px; margin-bottom: 2px; }
  .duel-note { font-size: 11px; max-width: 190px; }
  .duel-vs { font-size: 20px; }
}

@media (max-width: 720px) {
  .laneCards { overflow-x: auto; }
  .view, .lobbywrap { padding: 14px 12px 40px; }
  .top { padding: 8px 12px; gap: 10px; }
  :root { --cw: clamp(88px, 26vw, 120px); }
}

/* Kopfzeile einer Blockzeile: Titel links, «leeren» rechts. */
.blockhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.blockhead h3 { margin: 0; }

/* Strafe im Duellfeld */
.strafe {
  margin-top: 8px; display: flex; flex-direction: column; gap: 2px;
  padding: 7px 11px; border-radius: 10px; font-size: 12.5px; line-height: 1.35;
  background: linear-gradient(180deg, #2b2009, #1c1406); border: 1px solid #6b4d12; color: #ffd88a;
}
.strafe .art { font-family: var(--cond); font-weight: 700; color: var(--warn);
               text-transform: uppercase; letter-spacing: 1px; font-size: 13px; }
.strafe.spieldauer { background: linear-gradient(180deg, #2e1114, #1d0a0d);
                     border-color: #7a2028; color: #ffc0c6; }
.strafe.spieldauer .art { color: var(--bad); }
.strafe b { color: #fff; }

/* ---------- Sammlung: Filter und Markieren ---------- */
.filterbar, .markbar {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 14px; margin-bottom: 10px;
}
.filterbar label, .markbar label { display: flex; align-items: center; gap: 7px;
                                   color: var(--dim); font-size: 13px; }
.filterbar select, .filterbar input { min-width: 68px; }
.filterbar select#fTeam { min-width: 180px; }
.markbar { border-color: var(--ice); background: linear-gradient(180deg, #0e2334, #0a1826); }
.markbar #markCount { font-family: var(--cond); font-size: 17px; color: var(--ice); }

/* Karte in der Markier-Ansicht */
.pickwrap { position: relative; }
.pickwrap .haken {
  position: absolute; top: 6px; left: 6px; width: 22px; height: 22px; border-radius: 7px;
  border: 2px solid var(--line); background: #0b1526cc; z-index: 6;
  display: grid; place-items: center; font-size: 14px; color: transparent;
}
.pickwrap.an .haken { border-color: var(--good); background: var(--good); color: #06210f; }
.pickwrap.an .card { outline: 2px solid var(--good); outline-offset: 3px; border-radius: 14px; }
.pickwrap .card { cursor: pointer; }
/* Platz für das Eckband freihalten, sonst schneidet es den Namen ab. */
.pickwrap .card .nm { padding-right: 34%; }
.tagband {
  position: absolute; top: 6px; right: 6px; z-index: 6; font-size: 9.5px; font-weight: 700;
  padding: 3px 7px; border-radius: 7px; background: #0b1526e6; color: var(--gold);
  letter-spacing: .4px;
}

/* Funkenflug-Fläche */
#fxCanvas { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; }
}


/* ============================================================
   Gegnerstufen, Verzeichnis, Eintausch, Vorrat
   ============================================================ */

/* Der eigene Schnitt: eine Zahl, die man sofort versteht. */
.schnittbox {
  display: flex; align-items: center; gap: 16px; margin: 14px 0 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 18px;
}
.schnittbox .zahl { font-family: var(--disp); font-size: 46px; line-height: 1; color: var(--ice);
                    text-shadow: 0 0 26px var(--ice-soft); }
.schnittbox .txt { color: var(--dim); font-size: 14px; }
.schnittbox small { color: #6f88a8; }

.levels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.lvl .bereich { display: block; font-family: var(--cond); font-size: 15px; color: var(--ice);
                letter-spacing: .5px; }
.lvl em { display: inline-block; margin-top: 6px; font-style: normal; font-size: 11.5px;
          letter-spacing: 1px; text-transform: uppercase; color: #04131c;
          background: var(--good); border-radius: 999px; padding: 2px 9px; }
.lvl.leichter { opacity: .78; }
.lvl.schwerer { border-color: #6b4d12; }
.lvl.passt { border-color: var(--good); box-shadow: 0 0 0 1px #3ddc8455, 0 10px 26px #0008; }
/* Gewählte Schwierigkeitsklasse im Turnier */
.lvl.gewaehlt { border-color: var(--ice); background: linear-gradient(165deg, #12283f, #0b1626);
                box-shadow: 0 0 0 1px var(--ice), 0 12px 30px #0009; }
.lvl .geld { display: block; margin-top: 6px; font-family: var(--cond); font-size: 14px;
             color: var(--gold); letter-spacing: .4px; }

/* ---------- Verzeichnis ---------- */
.verzeichnis { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vzeile {
  display: grid; grid-template-columns: 30px 2fr 110px 2fr 90px 1.4fr;
  align-items: center; gap: 12px; padding: 7px 12px; border-radius: 10px;
  background: var(--panel); border: 1px solid var(--line); font-size: 13.5px;
}
.vzeile:hover { border-color: #2f4a6e; }
.vzeile.meins { border-color: var(--ice); background: #0d2233; }
.vzeile .wp { width: 26px; height: 27px; }
.vzeile .nm { font-family: var(--cond); font-size: 16px; letter-spacing: .3px; }
.vzeile .tm { color: var(--dim); }
.vzeile .pos { font-family: var(--cond); font-size: 13px; letter-spacing: 1px;
               text-transform: uppercase; }
.vzeile .pos.p-F { color: #ff7a5c; } .vzeile .pos.p-D { color: #3ddc84; }
.vzeile .pos.p-G { color: #b06cf0; }
.vzeile .rar { font-size: 11.5px; text-transform: uppercase; letter-spacing: 1px; }
.vzeile .rar.r-diamant { color: var(--r-diamant); } .vzeile .rar.r-gold { color: var(--r-gold); }
.vzeile .rar.r-silber { color: var(--r-silber); } .vzeile .rar.r-bronze { color: var(--r-bronze); }
.vzeile .rar.r-normal { color: var(--r-normal); }
.vzeile .bes { text-align: right; color: #cfe0f5; }
.vzeile .bes small { display: block; color: var(--dim); font-size: 11px; }
.vzeile .bes .frei { color: var(--good); }
.vzeile .bes .du { color: var(--ice); font-weight: 400; }
.blaettern { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }

/* ---------- Eintausch ---------- */
.tauschbox {
  background: linear-gradient(180deg, #10233a, #0a1626); border: 1px solid var(--ice);
  border-radius: 14px; padding: 14px 18px; margin-bottom: 12px;
  box-shadow: 0 0 30px var(--ice-soft);
}
.tauschbox b { font-family: var(--cond); font-size: 19px; letter-spacing: .5px; }
.tauschbox .warn { color: var(--warn); }
.tauschwahl { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ---------- Vorrat an ungeöffneten Päckchen ---------- */
.vorrat { margin-top: 16px; }
.vorratliste { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.vorratpack {
  background: linear-gradient(180deg, #14233b, #0a1120); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 14px 12px; color: var(--txt); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; transition: .18s;
  min-width: 130px;
}
.vorratpack img { width: 62px; filter: drop-shadow(0 8px 14px #000a); }
.vorratpack .anz { font-family: var(--disp); font-size: 22px; color: var(--gold); }
.vorratpack .nm { font-family: var(--cond); font-size: 15px; letter-spacing: .4px; }
.vorratpack .tu { font-size: 11.5px; color: var(--dim); }
.vorratpack:hover { border-color: var(--ice); transform: translateY(-3px);
                    box-shadow: 0 12px 28px #0009; }
/* Der Vorratsknopf sitzt in der Ecke, damit er den Text nicht verdrängt. */
.packcard { position: relative; padding-bottom: 44px; }
.vorratknopf { position: absolute; right: 12px; bottom: 12px; z-index: 2; }


/* ============================================================
   Trainerprofil
   ============================================================ */
.profilgrid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 26px;
              align-items: start; }
@media (max-width: 820px) { .profilgrid { grid-template-columns: 1fr; } }

.profilkarte {
  background: linear-gradient(180deg, #12203aee, #0a1120ee); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 18px; text-align: center;
  box-shadow: var(--shadow), inset 0 1px 0 #ffffff14;
}
.profilkarte .wappenvor { width: 62%; margin: 0 auto 12px; filter: drop-shadow(0 8px 20px #000a); }
.profilkarte .wname { font-family: var(--disp); font-size: 24px; letter-spacing: 1.5px;
                      text-transform: uppercase; line-height: 1.1; }
.profilkarte .wsub { color: var(--gold); font-family: var(--cond); font-size: 17px; margin-top: 4px; }

.feldreihe { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.feldreihe label { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13.5px; }
.feldreihe input.mini { min-width: 190px; }
.feldreihe input[type=color] { width: 42px; height: 30px; padding: 0; border: 1px solid var(--line);
                               border-radius: 8px; background: none; }
.mt { margin-top: 20px; }

.wappenauswahl { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.wvorschlag { width: 58px; height: 62px; padding: 4px; border-radius: 12px;
              background: #0b1526; border: 1px solid var(--line); transition: .16s; }
.wvorschlag:hover { border-color: var(--ice); transform: translateY(-3px);
                    box-shadow: 0 8px 20px #0009; }

.trainerliste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.tzeile {
  display: grid; grid-template-columns: 34px 1.6fr 1.4fr auto; align-items: center; gap: 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 11px;
  padding: 8px 14px; font-size: 14px;
}
.tzeile .wp { width: 30px; height: 32px; }
.tzeile .nm { font-family: var(--cond); font-size: 17px; letter-spacing: .3px; }
.tzeile .nm small { display: block; font-family: var(--body); font-size: 11.5px; color: var(--dim);
                    letter-spacing: 0; }
.tzeile .zu { color: var(--dim); font-size: 12.5px; }


/* ============================================================
   Lobby: wer ist da und der Chat
   ============================================================ */
.onlinebox, .chatbox {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 10px 12px; display: flex; flex-direction: column;
}
.onlinebox { min-height: 120px; }
/* Der Chat nimmt sich, was unter der Kabine übrig bleibt. */
.chatbox { min-height: 170px; max-height: 260px; }
.onlinebox .kopf, .chatbox .kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.onlinebox .kopf b, .chatbox .kopf b {
  font-family: var(--cond); font-size: 16px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--ice);
}
.onlineliste { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; max-height: 150px; }
.onlinezeile {
  display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 8px;
  font-size: 13px; padding: 3px 6px; border-radius: 8px;
}
.onlinezeile .wp { width: 22px; height: 23px; }
.onlinezeile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onlinezeile .nm small { color: var(--dim); }
.onlinezeile .zu { color: var(--dim); font-size: 11.5px; }
.onlinezeile.ich { background: #57d3f514; }
.onlinezeile.sucht { background: #3ddc8418; }
.sucht-marke {
  font-family: var(--cond); font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase;
  color: #04131c; background: var(--good); border-radius: 999px; padding: 1px 8px;
}

.chatverlauf {
  flex: 1; overflow-y: auto; min-height: 70px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 13.5px; padding-right: 4px;
}
/* Auf dem Handy darf der Verlauf die Seite nicht endlos lang machen. */
@media (max-width: 900px) { .chatverlauf { max-height: 240px; } }

/* ---------- Chaträume: Alle, Direktchats, eigene Gruppen ---------- */
.raumleiste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.raumknopf {
  position: relative; background: #0a121f; color: var(--dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.raumknopf:hover { border-color: var(--ice); color: var(--txt); }
.raumknopf.aktiv { background: #12304399; border-color: var(--ice); color: var(--txt); }
.raumknopf .neu {
  display: inline-block; margin-left: 6px; min-width: 16px; padding: 0 4px;
  background: var(--ice); color: #06111c; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; line-height: 15px; text-align: center;
}
.raumknopf .art { opacity: .6; margin-right: 4px; }
.chatmitglieder { color: var(--dim); font-size: 11.5px; margin-bottom: 6px; }
.chatmitglieder button {
  background: none; border: none; color: var(--ice); font: inherit;
  font-size: 11.5px; cursor: pointer; padding: 0; text-decoration: underline;
}

/* ---------- Chat in der Partie ---------- */
.matchchat {
  position: fixed; right: 14px; bottom: 14px; z-index: 40; width: min(330px, calc(100vw - 28px));
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: 0 14px 34px #000a; overflow: hidden;
}
.mchatkopf {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: none; color: var(--txt); font: inherit;
  padding: 9px 12px; cursor: pointer; text-align: left;
}
.mchatkopf:hover { background: #12304955; }
.mchattitel { flex: 1; font-size: 13px; color: var(--dim); }
.mchattitel b { color: var(--ice); font-family: var(--cond); letter-spacing: .4px; }
.mchatpfeil { color: var(--dim); transition: transform .2s; }
.matchchat.zu .mchatpfeil { transform: rotate(-90deg); }
.mchatpunkt { width: 9px; height: 9px; border-radius: 50%; background: var(--ice);
              box-shadow: 0 0 8px var(--ice); }
.mchatkoerper { padding: 0 12px 10px; }
.matchchat.zu .mchatkoerper { display: none; }
.matchchat .chatverlauf { max-height: 190px; min-height: 90px; }

/* Auf einem breiten Bildschirm macht das Brett dem offenen Chat Platz,
   statt dass er die eigenen Karten zudeckt — sonst kann man die Karte
   darunter nicht mehr spielen. Die Karten stehen mittig und rücken
   dadurch einfach nach links. */
@media (min-width: 1100px) {
  .matchscreen.chatoffen .ice { padding-right: 350px; }
}
/* Schmal ist dafür kein Platz: dort liegt der Chat über dem Brett und
   wird mit einem Tipp auf die Leiste wieder zugeklappt. */
@media (max-width: 1099px) {
  .matchchat { left: 10px; right: 10px; width: auto; }
  .matchchat .chatverlauf { max-height: 34dvh; }
}
.chatzeile-eintrag { padding: 3px 7px; border-radius: 8px; background: #0a121fbb; }
.chatzeile-eintrag.ich { background: #12304399; }
.chatzeile-eintrag .wer { font-family: var(--cond); color: var(--ice); margin-right: 7px; }
.chatzeile { display: flex; gap: 8px; margin-top: 8px; }
.chatzeile input {
  flex: 1; background: #0a1120; color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 13.5px;
}
.chatzeile input:focus { outline: none; border-color: var(--ice); }

/* Herausforderungen in der Lobby */
.einladungen { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.einladung {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(180deg, #10233a, #0a1626); border: 1px solid var(--ice);
  border-radius: 12px; padding: 10px 14px; box-shadow: 0 0 26px var(--ice-soft);
  animation: puls-einladung 2s ease-in-out infinite;
}
.einladung.laeuft { border-color: var(--good); box-shadow: 0 0 26px #3ddc8433; }
@keyframes puls-einladung {
  0%,100% { box-shadow: 0 0 18px var(--ice-soft); }
  50%     { box-shadow: 0 0 34px var(--ice-soft); }
}
.onlinezeile .fordern { padding: 2px 8px; font-size: 12.5px; }


/* ============================================================
   Liga
   ============================================================ */
.ligaliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.ligakarte {
  background: linear-gradient(165deg, #14233bcc, #0a1120cc); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; color: var(--txt); text-align: left;
  display: flex; flex-direction: column; gap: 4px; transition: .18s;
}
.ligakarte:not(.statisch):hover { border-color: var(--ice); transform: translateY(-3px); }
.ligakarte b { font-family: var(--cond); font-size: 19px; letter-spacing: .5px;
               text-transform: uppercase; }
.ligakarte span { color: var(--dim); font-size: 13px; }
.ligakarte .btn { align-self: flex-start; margin-top: 6px; }

.ligakopf { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.ligakopf h3 { margin: 0; font-size: 22px; }

.tabelle-liga { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.lzeile {
  display: grid; grid-template-columns: 28px 1fr 40px 34px 34px 34px 34px 70px 48px;
  align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; font-size: 13.5px;
  background: var(--panel); border: 1px solid var(--line); text-align: center;
}
.lzeile .nm { text-align: left; font-family: var(--cond); font-size: 16px; letter-spacing: .3px; }
.lzeile .pkt { font-family: var(--disp); font-size: 17px; color: var(--ice); }
.lzeile.kopf { background: transparent; border: none; color: var(--dim); font-size: 11.5px;
               text-transform: uppercase; letter-spacing: 1px; }
.lzeile.mensch { border-color: var(--ice); background: #0d2233; }

.spielplan { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px;
             margin-top: 8px; }
.runde { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.runde h4 { margin: 0 0 6px; font-family: var(--cond); font-size: 15px; letter-spacing: 1px;
            text-transform: uppercase; color: var(--ice); }
.lspiel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
          font-size: 12.5px; padding: 3px 0; }
.lspiel b { font-family: var(--cond); font-size: 14px; }
.lspiel span:last-child { text-align: right; }
.lspiel.meins { color: var(--ice); }


/* ============================================================
   Handel
   ============================================================ */
.angebot {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
  padding: 12px 16px; margin-bottom: 10px;
}
.angebot.meins { border-color: #2f4a6e; opacity: .9; }
.angebot .akopf { display: flex; gap: 12px; flex-wrap: wrap; align-items: baseline;
                  margin-bottom: 8px; }
.aseiten { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 700px) { .aseiten { grid-template-columns: 1fr; } }
.aseiten > div b { display: block; font-family: var(--cond); font-size: 14px;
                   letter-spacing: .6px; text-transform: uppercase; color: var(--ice);
                   margin-bottom: 4px; }
.apost { display: inline-block; background: #0a1120; border: 1px solid var(--line);
         border-radius: 8px; padding: 3px 9px; margin: 0 5px 5px 0; font-size: 13px; }
.apost i { color: var(--dim); font-style: normal; font-size: 11.5px; }
.aknoepfe { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* Aushang — Angebote und Gesuche für alle */
.angebot.aushang.passt { border-color: var(--good); box-shadow: 0 0 0 1px #3ddc8433, 0 0 24px #3ddc8422; }
.angebot .tag { font-family: var(--cond); font-size: 12px; letter-spacing: .6px; text-transform: uppercase;
                background: #17243a; border: 1px solid var(--line); color: var(--ice);
                border-radius: 999px; padding: 1px 9px; }
.angebot .tag.gut { background: #10281f; border-color: var(--good); color: var(--good); }
.apost small { color: var(--dim); font-size: 11px; margin-left: 2px; }
.apost small.besitzer { font-size: 10.5px; margin-left: 6px; color: var(--ice); }
.apost em { font-style: normal; font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase;
            margin-left: 4px; color: var(--gold); }
.apost em.r-diamant { color: #9fe8ff; } .apost em.r-silber { color: #d7dee8; } .apost em.r-bronze { color: #d59a66; }
.apost .weg { margin-left: 6px; cursor: pointer; color: var(--dim); font-weight: 700; }
.apost .weg:hover { color: var(--bad); }
.aushangbau { background: #0a1120; border: 1px solid var(--line); border-radius: 13px;
              padding: 6px 14px 14px; margin: 10px 0 14px; }
.aushangbau .handelseite { background: var(--panel); }
.auposten { min-height: 34px; margin: 6px 0 8px; }
.ausuche { position: relative; margin-bottom: 8px; }
.ausuche input { width: 100%; box-sizing: border-box; }
.autreffer { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
             background: #0c1526; border: 1px solid var(--line); border-radius: 10px;
             max-height: 260px; overflow-y: auto; box-shadow: 0 12px 30px #0009; padding: 4px; }
.autreffer-zeile { display: flex; justify-content: space-between; gap: 10px; width: 100%;
                   background: none; border: 0; color: var(--txt); text-align: left;
                   padding: 7px 10px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.autreffer-zeile:hover { background: #17243a; }
.autreffer-zeile small { color: var(--dim); font-size: 11px; white-space: nowrap; }
.autreffer-zeile em { font-style: normal; font-size: 10.5px; text-transform: uppercase; color: var(--gold); margin-left: 4px; }
.aushangliste { margin-bottom: 8px; }

.handelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
@media (max-width: 860px) { .handelgrid { grid-template-columns: 1fr; } }
.handelseite { background: var(--panel); border: 1px solid var(--line); border-radius: 13px;
               padding: 12px 14px; }
.handelseite h4 { margin: 0 0 6px; font-family: var(--cond); font-size: 17px;
                  letter-spacing: .8px; text-transform: uppercase; color: var(--ice); }
.wertzeile { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
             color: var(--dim); font-size: 13px; margin-bottom: 10px; }
.wertzeile b { color: var(--txt); font-family: var(--cond); font-size: 18px; }
.wertzeile input { width: 90px; }
.handelkarten { display: flex; flex-wrap: wrap; gap: 10px; max-height: 340px; overflow-y: auto;
                --cw: 82px; }
.hkarte { position: relative; cursor: pointer; border-radius: 14px; padding: 3px; }
.hkarte.an { outline: 2px solid var(--good); outline-offset: 1px; background: #10281f66; }
.hkarte.gesperrt { opacity: .45; cursor: not-allowed; }
.hkarte .hwert { position: absolute; bottom: 6px; right: 6px; z-index: 5;
                 background: #04101bdd; color: var(--gold); border-radius: 6px;
                 padding: 1px 6px; font-family: var(--cond); font-size: 12px; }
.hkarte .hsperre { position: absolute; inset: auto 4px 4px; z-index: 5; font-size: 9.5px;
                   text-align: center; color: var(--bad); background: #04101bdd;
                   border-radius: 5px; padding: 1px 3px; }
.handelfuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.handelfuss input { flex: 1; min-width: 200px; }
.waage { font-family: var(--cond); font-size: 16px; letter-spacing: .4px; }
.waage.gut { color: var(--good); }
.waage.schlecht { color: var(--warn); }


/* ---------- Vereinssammlungen und Ikonen ---------- */
.ikonen { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.ikonezeile {
  display: grid; grid-template-columns: 28px 1.4fr 2fr 70px auto; gap: 12px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 12px; font-size: 13.5px;
}
.ikonezeile.voll { border-color: var(--gold); box-shadow: 0 0 20px #f3c65a2a; }
.ikonezeile .wp { width: 24px; height: 25px; }
.ikonezeile .nm { font-family: var(--cond); font-size: 15px; letter-spacing: .3px; }
.ikonezeile .balken { height: 8px; background: #0a1120; border-radius: 999px; overflow: hidden;
                      border: 1px solid var(--line); }
.ikonezeile .balken i { display: block; height: 100%;
                        background: linear-gradient(90deg, var(--ice-deep), var(--ice)); }
.ikonezeile .zahl { color: var(--dim); text-align: right; font-family: var(--cond); font-size: 14px; }
.ikonenbesitz { background: linear-gradient(180deg, #2a2009, #1a1406); border: 1px solid var(--gold);
                border-radius: 11px; padding: 10px 14px; margin-bottom: 8px; }
.ikonemarke { display: inline-block; background: #04101b; border: 1px solid var(--gold);
              color: var(--gold); border-radius: 999px; padding: 2px 10px; margin-left: 6px;
              font-family: var(--cond); letter-spacing: .5px; }


/* ---------- Chancen eines Päckchens ---------- */
.chancenknopf { position: absolute; right: 12px; top: 12px; z-index: 2; width: 26px; height: 26px;
                padding: 0; border-radius: 50%; font-family: var(--cond); font-size: 15px; }
.chancenfenster {
  position: fixed; inset: 0; z-index: 65; display: grid; place-items: center;
  background: #030710e0; backdrop-filter: blur(6px); padding: 20px; animation: fade .25s ease-out;
}
.cbox {
  background: linear-gradient(180deg, #101c31f2, #0a1120f2); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 24px; width: min(620px, 96vw); max-height: 86vh;
  overflow-y: auto; box-shadow: var(--shadow);
}
.ckopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ckopf b { font-family: var(--cond); font-size: 22px; letter-spacing: .6px; text-transform: uppercase; }
.cbox h4 { font-family: var(--cond); font-size: 15px; letter-spacing: 1px; text-transform: uppercase;
           color: var(--ice); margin: 16px 0 6px; }
.cinhalt { margin: 0; padding-left: 18px; color: #cfe0f5; font-size: 14px; }
.ctabelle { display: flex; flex-direction: column; gap: 4px; }
.czeile { display: grid; grid-template-columns: 70px 1fr 52px 118px 110px; gap: 10px;
          align-items: center; font-size: 13px; padding: 4px 8px; border-radius: 8px;
          background: #0a1120; border: 1px solid var(--line); }
.czeile .crar { font-family: var(--cond); text-transform: uppercase; letter-spacing: .6px; }
.czeile .crar.r-diamant { color: var(--r-diamant); } .czeile .crar.r-gold { color: var(--r-gold); }
.czeile .crar.r-silber { color: var(--r-silber); } .czeile .crar.r-bronze { color: var(--r-bronze); }
.czeile .crar.r-normal { color: var(--r-normal); }
.czeile .cbalken { height: 7px; background: #060c16; border-radius: 999px; overflow: hidden; }
.czeile .cbalken i { display: block; height: 100%;
                     background: linear-gradient(90deg, var(--ice-deep), var(--ice)); }
.czeile .cwert { font-family: var(--cond); font-size: 15px; text-align: right; }
.czeile .cpack, .czeile .cfrei { color: var(--dim); font-size: 12px; }

/* Auf dem Telefon reicht die Breite nicht für fünf Spalten nebeneinander:
   Balken und Prozent bleiben oben, der Rest rutscht in eine zweite Zeile. */
@media (max-width: 560px) {
  .czeile { grid-template-columns: 62px 1fr 46px; row-gap: 3px; }
  .czeile .cpack { grid-column: 2 / 4; }
  .czeile .cfrei { grid-column: 1 / 4; }
}


/* ============================================================
   Tagesbonus und Erfolge
   ============================================================ */
.bonusbox {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
  background: linear-gradient(180deg, #2a2009, #1a1406); border: 1px solid var(--gold);
  border-radius: 13px; padding: 10px 16px; box-shadow: 0 0 26px #f3c65a2a;
  animation: bonuskommt .5s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes bonuskommt { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }
.bonusbox .tage { font-family: var(--disp); font-size: 26px; color: var(--gold);
                  line-height: 1; white-space: nowrap; }
.bonusbox .txt { flex: 1; font-size: 14px; color: #ffe6b0; }
.bonustimer { display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  font-size: 13px; color: var(--dim); padding: 6px 14px; border: 1px dashed var(--line);
  border-radius: 999px; width: fit-content; max-width: 100%; }
.bonustimer b { color: var(--gold); font-variant-numeric: tabular-nums; }
.bonustimer.bereit { border-style: solid; border-color: var(--gold); color: #ffe6b0; }
.bonusbox .txt b { color: #fff; }

.seriebox { display: flex; align-items: center; gap: 18px; margin-bottom: 16px;
            background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
            padding: 14px 20px; }
.seriezahl { font-family: var(--disp); font-size: 52px; line-height: 1; color: var(--ice);
             text-shadow: 0 0 28px var(--ice-soft); }
.serietext b { display: block; font-family: var(--cond); font-size: 18px; letter-spacing: .5px;
               text-transform: uppercase; }
.serietext .sub { display: block; font-size: 13px; }

.erfolgliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.erfolg {
  background: linear-gradient(165deg, #14233bcc, #0a1120cc); border: 1px solid var(--line);
  border-radius: 14px; padding: 12px 15px; display: flex; flex-direction: column; gap: 5px;
}
.erfolg.offen { border-color: var(--gold); box-shadow: 0 0 22px #f3c65a22; }
.erfolg.geholt { opacity: .62; }
.ekopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ekopf b { font-family: var(--cond); font-size: 18px; letter-spacing: .4px; text-transform: uppercase; }
.elohn { font-family: var(--cond); font-size: 14px; color: var(--gold); white-space: nowrap; }
.ebalken { height: 7px; background: #060c16; border-radius: 999px; overflow: hidden;
           border: 1px solid var(--line); margin-top: 4px; }
.ebalken i { display: block; height: 100%;
             background: linear-gradient(90deg, var(--ice-deep), var(--ice)); }
.efuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.ehaken { font-family: var(--cond); font-size: 13px; color: var(--good); letter-spacing: .5px;
          text-transform: uppercase; }


/* ---------- Kabinenwahl: vierzig Räume in fünf Formen ---------- */
.kabinenwahl { margin-top: 14px; }
.kabinenliste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
  gap: 8px; margin-top: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px;
}
.kabinenknopf {
  position: relative; background: none; border: 1px solid var(--line);
  border-radius: 10px; padding: 0; overflow: hidden; cursor: pointer;
  display: block; transition: .16s;
}
.kabinenknopf img { width: 100%; display: block; aspect-ratio: 1916 / 821;
                    object-fit: cover; opacity: .85; transition: .16s; }
.kabinenknopf .nm {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px;
  background: linear-gradient(180deg, transparent, #04101bee);
  font-size: 10.5px; color: #cfe0f5; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kabinenknopf:hover { border-color: var(--ice); }
.kabinenknopf:hover img { opacity: 1; }
.kabinenknopf.an { border-color: var(--ice); box-shadow: 0 0 0 1px var(--ice-soft), 0 0 16px var(--ice-soft); }
.kabinenknopf.an img { opacity: 1; }

/* In den neuen Räumen wirken nur Boden und Licht — die übrigen Regler
   werden ausgegraut, statt so zu tun, als täten sie etwas. */
.room.neuerraum ~ .stylebar label:not(.gilt) { opacity: .4; }
.stylebar .raumhinweis { flex-basis: 100%; }


/* Der Preisfaktor hängt am eigenen Kader: unter der eigenen Klasse zu
   spielen bringt fast nichts, darüber deutlich mehr. Das muss man sehen,
   BEVOR man wählt. */
.lvl .geld.mager { color: var(--bad); }
.lvl .geld.satt  { color: var(--good); }


/* ---------- Besuch bei einem anderen Trainer ---------- */
.besuchfenster {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: safe center;
  overflow-y: auto; padding: 20px; background: #020509e8; backdrop-filter: blur(8px);
  animation: fade .2s ease-out;
}
.bbox {
  width: min(760px, 100%); background: var(--panel-s); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
}
.bkopf { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.bkopf .wp { width: 46px; flex: none; }
.bkopf b { font-family: var(--cond); font-size: 22px; letter-spacing: .5px; display: block; }
.bkopf > div { flex: 1; }
.besuchraum { margin-bottom: 14px; }
.bzahlen { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-bottom: 14px; }
.bzahlen span { display: flex; flex-direction: column; gap: 2px;
                font-family: var(--cond); font-size: 19px; }
.bzahlen i { color: var(--dim); font-size: 11px; font-style: normal;
             text-transform: uppercase; letter-spacing: 1px; font-family: var(--body); }
.bfuss { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
         border-top: 1px solid #16253f; padding-top: 12px; }
.tzeile .staerke { color: var(--ice); }


/* ---------- Kartenwähler mit Filtern ---------- */
.waehlerfenster {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: safe center;
  padding: 16px; background: #020509ee; backdrop-filter: blur(8px);
  animation: fade .2s ease-out; overflow-y: auto;
}
.wbox {
  width: min(1100px, 100%); max-height: calc(100dvh - 32px);
  display: flex; flex-direction: column;
  background: var(--panel-s); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.wkopf { display: flex; justify-content: space-between; align-items: center;
         gap: 12px; margin-bottom: 12px; }
.wkopf b { font-family: var(--cond); font-size: 21px; letter-spacing: .5px; }
.wfilter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.wfilter input, .wfilter select {
  background: #0a1120; color: var(--txt); border: 1px solid var(--line);
  border-radius: 9px; padding: 7px 11px; font: inherit; font-size: 13.5px;
}
.wfilter input:focus, .wfilter select:focus { outline: none; border-color: var(--ice); }
.wfilter .chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim); }
.wfilter input[type=checkbox] { accent-color: var(--ice); width: 16px; height: 16px; }

.wliste {
  flex: 1; overflow-y: auto; display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cw), 1fr));
  padding: 2px; min-height: 180px;
}
/* Gewählte Karten heben sich ab, ohne dass die Karte selbst umgebaut wird. */
.wkarte { cursor: pointer; transition: .14s; }
.wkarte:hover { transform: translateY(-3px); }
.wkarte.gewaehlt { outline: 2px solid var(--ice); outline-offset: 3px;
                   box-shadow: 0 0 22px var(--ice-soft); }

.wfuss { display: flex; justify-content: space-between; align-items: center;
         gap: 12px; flex-wrap: wrap; margin-top: 12px;
         border-top: 1px solid #16253f; padding-top: 12px; }
.wtun { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.preisfeld { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--dim); }
.anbieten { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }


/* ---------- Ikonenstempel ----------
   Eine Ikone gibt es je Verein genau einmal. Das muss man der Karte
   ansehen, ohne den Namen zu lesen: ein schräger Stempel wie auf einer
   Urkunde, dazu ein goldener Rand. */
.card.ikone .front { box-shadow: inset 0 0 0 2px #f3c65a99, inset 0 0 30px #f3c65a26; }
/* Unten rechts, nicht über dem Namen: dort ist Platz, und der Name muss
   lesbar bleiben — er ist bei einer Ikone das Besondere. */
.ikonenstempel {
  position: absolute; right: 5%; bottom: 11%;
  transform: rotate(-13deg);
  font-family: var(--disp); font-size: calc(var(--cw) * .082);
  letter-spacing: .18em; text-indent: .18em;
  color: #f3c65a; padding: .18em .5em;
  border: 2px solid #f3c65a; border-radius: 4px;
  opacity: .82; pointer-events: none; z-index: 3;
  text-shadow: 0 1px 3px #0009; box-shadow: 0 0 14px #f3c65a44;
  background: #0a1120aa;
}
/* Auf der Rückseite ebenfalls erkennbar — sonst sieht man es im Spiel nie. */
.card.ikone .back { box-shadow: inset 0 0 0 2px #f3c65a80; }
.ikonemarke { border-color: var(--gold) !important; color: var(--gold) !important; }

.whinweis { color: var(--dim); font-size: 13px; margin: 0 0 10px; }
.whinweis b { color: var(--txt); }

.erfolgleiste { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }

/* ============================================================
   Eintauschen
   ============================================================
   Die Angebote sind Kacheln wie in der Lobby — dieselbe Sprache,
   damit man sie sofort als «hier kann ich etwas tun» liest. Was
   noch nicht reicht, bleibt sichtbar, aber gedämpft: es soll ein
   Ziel bleiben, kein verschlossenes Tor. */
.ettiles {
  display: grid; gap: 12px; margin-top: 6px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ettile {
  position: relative; overflow: hidden; text-align: left; cursor: pointer;
  background: linear-gradient(165deg, #14233bcc, #0a1120cc);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; color: var(--txt); transition: .2s;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 1px 0 #ffffff10;
}
.ettile::after {
  content: ""; position: absolute; inset: auto -30% -70% -30%; height: 100%;
  background: radial-gradient(50% 60% at 50% 0%,
              color-mix(in srgb, var(--ef, var(--ice)) 26%, transparent), transparent 70%);
  opacity: 0; transition: .25s;
}
.ettile:hover { transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--ef, var(--ice)) 70%, var(--line));
  box-shadow: 0 16px 34px #0009; }
.ettile:hover::after { opacity: 1; }
.ettile .etbild {
  width: 46px; height: 46px; display: grid; place-items: center; font-size: 25px;
  border-radius: 12px; margin-bottom: 4px; overflow: hidden;
  background: color-mix(in srgb, var(--ef, var(--ice)) 16%, #0a1120);
  border: 1px solid color-mix(in srgb, var(--ef, var(--ice)) 40%, transparent);
}
.ettile .etbild img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; }
/* Mit Bild darf die Kachel gross sein — Pascals Motive sind gezeichnet, keine Symbole. */
.ettile .etbild:has(img) { width: 100%; height: 132px; border-radius: 12px; margin-bottom: 8px;
                           background: #0a1120; }
.ettile .etbild:has(img) img { border-radius: 0; }
.ettile b { font-family: var(--cond); font-size: 19px; letter-spacing: .4px; }
.ettile i { font-style: normal; font-size: 13px; color: var(--dim); line-height: 1.4; }
.ettile .etstand {
  margin-top: 6px; font-size: 12.5px; font-weight: 700;
  color: color-mix(in srgb, var(--ef, var(--ice)) 80%, var(--txt));
}
.ettile.knapp { opacity: .62; }
.ettile.knapp .etstand { color: var(--dim); }

.etdetail h3 { font-family: var(--cond); font-size: 24px; letter-spacing: .5px; }
.etleiste {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin: 12px 0; padding: 11px 13px;
  background: var(--panel-s); border: 1px solid var(--line); border-radius: var(--radius);
  position: sticky; top: 6px; z-index: 5;
}
.etleiste #etStand { margin-left: auto; }
.etstuecke {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(var(--cw), 1fr));
}
/* Trainer, Verträge und Ärzte haben keine Kartenoptik — eine Zeile genügt. */
.etstueck {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  background: #0a1120; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; color: var(--txt); transition: .14s;
}
.etstueck:hover { transform: translateY(-2px); border-color: #ffffff30; }
.etstueck.gewaehlt {
  border-color: var(--ice);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ice) 45%, transparent);
  background: color-mix(in srgb, var(--ice) 10%, #0a1120);
}
.etstueck i { font-style: normal; font-size: 12.5px; color: var(--dim); }
.etstueck .rar { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--dim); }

/* Der Info-Kasten erklärt Tauschbörse, Handel und Eintausch nebeneinander. */
.infobox { width: min(640px, 100%); }
.winhalt { overflow-y: auto; }
.infoliste dt {
  font-family: var(--cond); font-size: 18px; letter-spacing: .4px;
  margin-top: 14px; color: var(--ice);
}
.infoliste dd { margin: 4px 0 0; padding-left: 2px; font-size: 14px; line-height: 1.55; color: var(--dim); }
.infoliste dd b { color: var(--txt); }

/* Dublette: derselbe Spieler, ein zweiter Abzug.

   Die Marke zeigt nur die Zahl und sitzt am rechten Rand der
   Vereinszeile. Jede Ecke der Karte ist schon vergeben — Name,
   Auflagennummer, Ikonenstempel —, und ein Aufkleber, der den Namen
   zudeckt, nützt niemandem. Das Wort «Dublette» steht im Tooltip und
   im Filter; damit man Dubletten im Raster überhaupt findet, bekommt
   die ganze Karte einen kühlen Rand. Den sieht man, ohne zu lesen. */
.card .dubmarke {
  position: absolute; right: 5%; top: 25.5%; z-index: 4;
  font-family: var(--cond); font-size: calc(var(--cw) * .075); font-weight: 700;
  line-height: 1.35; white-space: nowrap; color: #04131c;
  padding: 0 calc(var(--cw) * .035); border-radius: 4px;
  background: linear-gradient(180deg, #9ee2fa, #4fb8dd);
  box-shadow: 0 1px 4px #0008; pointer-events: none;
}
/* Der Vereinsname darf nicht unter die Marke laufen. */
.card.dublette .tm { padding-right: 18%; }
.card.dublette { outline: 2px solid #7fd4f555; outline-offset: -2px; border-radius: inherit; }

#abholung { display: block; font-size: 13px; color: var(--dim); margin-top: 6px; }
#abholung b { color: var(--gold); }

/* ---------- Bildanleitung ---------- */
.neuhier {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
  background: linear-gradient(180deg, #10233a, #0a1626); border: 1px solid var(--ice);
  border-radius: 12px; padding: 12px 16px; box-shadow: 0 0 26px var(--ice-soft);
}
.neuhier .ic { font-size: 28px; }
.neuhier > div { flex: 1; min-width: 200px; font-size: 14.5px; }
.anl-view { max-width: 860px; margin: 0 auto; }
.anl-kopf { text-align: center; margin: 6px 0 14px; }
.anl-nr { display: inline-block; font-family: var(--cond); letter-spacing: 1px; text-transform: uppercase;
          color: var(--ice); font-size: 13px; margin-bottom: 4px; }
.anl-kopf h3 { font-family: var(--cond); font-size: 30px; letter-spacing: .5px; text-transform: uppercase; margin: 0 0 6px; }
.anl-kopf p { margin: 0 auto; max-width: 620px; font-size: 17px; line-height: 1.45; }
.anl-bild {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 18px; min-height: 300px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 14px; box-shadow: var(--shadow);
}
.anl-bild .card { pointer-events: none; }
.anl-bild .card.klein { --cw: 84px; --ch: 118px; }
.anl-reihe { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; align-items: flex-start; }
.anl-reihe.faecher .card:nth-child(1) { transform: rotate(-9deg) translateY(8px); }
.anl-reihe.faecher .card:nth-child(3) { transform: rotate(9deg) translateY(8px); }
.anl-pfeile { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center;
              font-family: var(--cond); font-size: 19px; text-transform: uppercase; letter-spacing: .5px; margin-top: 8px; }
.anl-pfeile i, .anl-gross { color: var(--ice); font-style: normal; font-size: 28px; }
.anl-pfeile span { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
.anl-fuss { color: var(--dim); font-size: 14px; text-align: center; max-width: 620px; margin: 4px 0 0; line-height: 1.45; }
.anl-paeckchen { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; }
.anl-pack { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 120px; height: 150px;
            justify-content: center; border-radius: 14px; border: 1px solid var(--gold);
            background: linear-gradient(160deg, #2a2210, #0f0d06); box-shadow: 0 0 26px #f3c65a33; }
.anl-pack span { font-size: 46px; }
.anl-pack b { font-family: var(--cond); text-transform: uppercase; letter-spacing: 1px; color: var(--gold); }
.anl-selten { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.anl-stufe { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 74px; padding: 10px 4px;
             border-radius: 10px; border: 2px solid var(--metal, var(--r-normal)); background: #0b1220; }
.anl-stufe b { font-family: var(--cond); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--metal, var(--r-normal)); }
.anl-stufe .gem { position: static; width: 18px; height: 18px; }
.anl-stufe.r-normal  { --metal: var(--r-normal); }  .anl-stufe.r-bronze { --metal: var(--r-bronze); }
.anl-stufe.r-silber  { --metal: var(--r-silber); }  .anl-stufe.r-gold   { --metal: var(--r-gold); }
.anl-stufe.r-diamant { --metal: var(--r-diamant); }
.anl-seite { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 250px; text-align: center; }
.anl-seite > b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .6px; font-size: 14px; color: var(--dim); }
.anl-seite small { color: var(--dim); font-size: 12.5px; line-height: 1.4; }
.anl-aufstellung { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 640px; }
.anl-block { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.anl-block.tw { grid-column: 1 / -1; }
.anl-block > b { display: block; font-family: var(--cond); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; color: var(--dim); margin-bottom: 8px; }
.anl-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.anl-slots span { flex: 1 1 40%; text-align: center; font-size: 12px; padding: 7px 4px; border-radius: 8px; border: 1px dashed var(--line); }
.anl-slots .F { border-color: #ff8a5b; color: #ffb597; } .anl-slots .D { border-color: var(--ice); color: var(--ice); }
.anl-slots .G { border-color: var(--gold); color: var(--gold); flex-basis: 100%; }
.anl-duell { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.anl-vs { font-family: var(--disp); font-size: 22px; color: var(--dim); text-transform: uppercase; }
.anl-wert { font-family: var(--disp); font-size: 30px; color: var(--txt); }
.anl-wert small { display: block; font-family: var(--cond); font-size: 13px; color: var(--dim); }
.anl-ergebnis { flex-basis: 100%; text-align: center; font-family: var(--cond); font-size: 20px; letter-spacing: .5px;
                padding: 10px 14px; border-radius: 10px; background: #0d2a1a; border: 1px solid #1d6b3f; color: #8ff0be; }
.anl-ergebnis b { color: var(--good); font-size: 24px; }
.anl-gegner { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.anl-team { text-align: center; } .anl-team > b { display: block; font-family: var(--cond); text-transform: uppercase; color: var(--dim); font-size: 14px; margin-bottom: 8px; }
.anl-team small { display: block; margin-top: 8px; color: var(--dim); font-size: 12.5px; }
.anl-stufen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.anl-stufen span { text-align: center; font-family: var(--cond); font-size: 17px; text-transform: uppercase; letter-spacing: .5px;
                   padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); min-width: 110px; }
.anl-stufen small { text-transform: none; letter-spacing: 0; color: var(--dim); font-size: 12px; }
.anl-stufen .passt { border-color: var(--good); box-shadow: 0 0 18px #3ddc8433; }
.anl-stufen .schwerer { border-color: var(--gold); } .anl-stufen .leichter { opacity: .75; }
.anl-kacheln .anl-kachel { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 150px; padding: 16px 8px;
                           border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); text-align: center; }
.anl-kachel span { font-size: 30px; } .anl-kachel b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .5px; }
.anl-kachel small { color: var(--dim); font-size: 12px; }
.anl-punkte { display: flex; justify-content: center; gap: 8px; margin: 16px 0 10px; }
.anl-punkte i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); cursor: pointer; transition: transform .15s; }
.anl-punkte i.vorbei { background: var(--ice-deep); } .anl-punkte i.an { background: var(--ice); transform: scale(1.3); box-shadow: 0 0 10px var(--ice-soft); }
.anl-nav { display: flex; justify-content: space-between; gap: 10px; }
@media (max-width: 560px) {
  .anl-aufstellung { grid-template-columns: 1fr; }
  .anl-kopf h3 { font-size: 24px; } .anl-kopf p { font-size: 15.5px; }
  .anl-bild { padding: 16px 10px; }
}

/* Erstes Bild der Anleitung: Pascals Titelbild oben, die Karten darüber gelegt. */
.anl-bild.mit-titel { padding-top: 0; overflow: hidden; }
.anl-titel { width: calc(100% + 36px); margin: 0 -18px 0; display: block; aspect-ratio: 21 / 9;
             object-fit: cover; border-radius: var(--radius) var(--radius) 0 0;
             mask-image: linear-gradient(180deg, #000 70%, transparent); }
.anl-bild.mit-titel .anl-reihe.faecher { margin-top: -60px; }
@media (max-width: 560px) { .anl-titel { width: calc(100% + 20px); margin: 0 -10px; }
  .anl-bild.mit-titel .anl-reihe.faecher { margin-top: -30px; } }

/* Aufdruck auf dem Eintausch-Bild: Name in der gewählten Schriftfarbe, unten im Bild. */
.ettile .etbild { position: relative; }
.etaufdruck {
  position: absolute; left: 6%; right: 6%; bottom: 8%; text-align: center;
  font-family: var(--cond); font-size: clamp(14px, 1.6vw, 20px); letter-spacing: 1.6px;
  text-transform: uppercase; line-height: 1.1; pointer-events: none;
  text-shadow: 0 2px 6px #000d, 0 0 14px #000a;
}
.etvorschau {
  position: relative; display: block; width: 100%; max-width: 220px; height: 132px;
  border-radius: 12px; overflow: hidden; background: #0a1120;
  border: 1px solid color-mix(in srgb, var(--ef, var(--ice)) 40%, transparent);
}
.etvorschau img { width: 100%; height: 100%; object-fit: cover; }
.etvorschau .sym { display: grid; place-items: center; height: 100%; font-size: 40px; }

/* ---------- Album im Verzeichnis ---------- */
.ansichtwahl { display: flex; gap: 6px; margin-bottom: 12px; }
.ansichtwahl .btn.gewaehlt { border-color: var(--ice); color: #fff; box-shadow: 0 0 14px var(--ice-soft); }
.albumvereine { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.albumverein {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; color: var(--txt);
  cursor: pointer; transition: .15s; text-align: center;
}
.albumverein:hover { border-color: var(--ice); transform: translateY(-2px); }
.albumverein .wp { width: 46px; height: 50px; }
.albumverein .wp svg { width: 100%; height: 100%; }
.albumverein b { font-family: var(--cond); font-size: 15px; letter-spacing: .3px; line-height: 1.1; }
.albumverein i { font-style: normal; font-size: 12px; color: var(--dim); }
.albumverein.leer { opacity: .55; }
.albumverein.voll { border-color: var(--gold); box-shadow: 0 0 16px #f3c65a33; }
.albumverein .balken { width: 100%; height: 4px; border-radius: 2px; background: #ffffff14; overflow: hidden; margin-top: 4px; }
.albumverein .balken span { display: block; height: 100%; background: var(--ice); border-radius: 2px; }
.albumverein.voll .balken span { background: var(--gold); }
.albumkopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.albumkopf .wp { width: 44px; height: 48px; } .albumkopf .wp svg { width: 100%; height: 100%; }
.albumkopf h3 { font-family: var(--cond); font-size: 24px; text-transform: uppercase; letter-spacing: .6px; margin: 0; }
.albumkarten { display: flex; flex-wrap: wrap; gap: 14px 10px; --cw: clamp(96px, 10vw, 124px); --ch: calc(var(--cw) * 1.4); }
.albumplatz { display: flex; flex-direction: column; align-items: center; gap: 5px; width: var(--cw); }
.albumkarte.fehlt { opacity: .42; filter: grayscale(.9) brightness(.8); }
.albumkarte.fehlt .big { color: var(--dim); }
.albuminfo { font-size: 11.5px; color: var(--dim); text-align: center; line-height: 1.3; }
.albuminfo .frei { color: var(--good); }
.albuminfo .btn.tiny { padding: 2px 8px; font-size: 12px; margin-top: 3px; }
@media (max-width: 560px) { .albumkarten { --cw: 44vw; gap: 12px 3vw; } .albumvereine { grid-template-columns: repeat(2, 1fr); } }
.albumfilter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.albumfilter .btn.gewaehlt { border-color: var(--ice); color: #fff; }

/* ---------- Deko als Foto (Pascals Bilder, 11.09.2026) ----------
   Mit Foto fällt die gezeichnete Fassung weg; das Bild steht allein an
   seinem Platz. Die Farbe des Stücks liegt als leichter Schein darunter,
   die Seltenheit als Rand-Leuchten (--leuchten), wie bei den Fassungen. */
.deko.mitfoto { background: none; padding: 0; border: none; box-shadow: none; }
.deko.mitfoto::before, .deko.mitfoto::after { display: none; }
.deko.mitfoto .dekofoto {
  display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 6px 10px #000b) drop-shadow(0 0 10px var(--leuchten))
          drop-shadow(0 0 14px color-mix(in srgb, var(--f, transparent) 55%, transparent));
}
.deko.rahmen.mitfoto  { width: 11%; height: 18%; }
.deko.rahmen.mitfoto .dekofoto { object-position: center; }
.deko.lampe.mitfoto   { width: 8%; height: 16%; }
.deko.lampe.mitfoto .dekofoto { object-position: center top; }
.deko.lampe.mitfoto .schein { position: absolute; top: 40%; left: 50%; transform: translateX(-50%);
  width: 170%; height: 170%; pointer-events: none; opacity: .6; filter: blur(3px);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--f) 60%, transparent), transparent 72%); }
.deko.decke.mitfoto   { width: 15%; height: 14%; }
.deko.kasten.mitfoto  { width: 9%; height: 18%; }
.deko.sockel.mitfoto  { width: 11%; height: 26%; }
.deko.mitfoto .schatten { position: absolute; left: 6%; right: 6%; bottom: -2%; height: 12%;
  background: radial-gradient(closest-side, #00000099, transparent 75%); filter: blur(1.5px); z-index: -1; }
.deko.mitfoto:hover .dekofoto { filter: drop-shadow(0 8px 12px #000b) drop-shadow(0 0 14px var(--leuchten)) brightness(1.08); }
.bodenlogo .tz .bodenfoto { display: block; width: 34%; margin: 2% auto 0; opacity: .95;
  filter: drop-shadow(0 3px 6px #0009); }
/* Die Fotolampe hängt von der Decke: höher und etwas kleiner, damit sie nicht ins Banner ragt. */
.deko.lampe.mitfoto { width: 7%; height: 12%; transform: translate(-50%, -78%) scale(var(--gr)); }
.deko.lampe.mitfoto:hover { transform: translate(-50%, -78%) scale(calc(var(--gr) * 1.06)); }

/* ---------- Münzwurf vor dem Anpfiff ---------- */
.muenzoverlay { position: absolute; inset: 0; display: grid; place-items: center; z-index: 45;
                background: #030710d9; backdrop-filter: blur(5px); animation: fade .3s ease-out; cursor: pointer; }
.muenzbox { display: flex; flex-direction: column; align-items: center; gap: 18px; perspective: 900px; }
.muenze { position: relative; width: clamp(140px, 26vw, 220px); aspect-ratio: 1; transform-style: preserve-3d; }
.muenze img { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden;
              filter: drop-shadow(0 12px 24px #000c); }
.muenze .zahl { transform: rotateY(180deg); }
/* Sieben halbe Drehungen + Hochwerfen. Kopf endet bei 0°, Zahl bei 180° (Rückseite vorn). */
.muenze.dreht.kopf { animation: muenzKopf 1.9s cubic-bezier(.25,.7,.3,1) both; }
.muenze.dreht.zahl { animation: muenzZahl 1.9s cubic-bezier(.25,.7,.3,1) both; }
@keyframes muenzKopf { 0% { transform: translateY(0) rotateY(0) scale(.9); }
                       45% { transform: translateY(-160px) rotateY(900deg) scale(1.08); }
                       100% { transform: translateY(0) rotateY(1800deg) scale(1); } }
@keyframes muenzZahl { 0% { transform: translateY(0) rotateY(0) scale(.9); }
                       45% { transform: translateY(-160px) rotateY(990deg) scale(1.08); }
                       100% { transform: translateY(0) rotateY(1980deg) scale(1); } }
.muenztext { font-family: var(--disp); font-size: clamp(26px, 5vw, 44px); letter-spacing: 1px; text-transform: uppercase;
             color: var(--dim); transition: color .25s, transform .25s; }
.muenztext.da { color: #fff; transform: scale(1.06); text-shadow: 0 4px 18px #000c; }
.muenzsub { font-size: 13.5px; color: var(--dim); }

/* ---------- Stärketabelle in der Lobby ---------- */
.tabellenbox { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; padding: 10px 12px; }
.tabellenbox .kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.tabellenbox .kopf b { font-family: var(--cond); font-size: 16px; letter-spacing: .6px; text-transform: uppercase; color: var(--ice); }
.staerketabelle { display: flex; flex-direction: column; gap: 2px; max-height: 230px; overflow-y: auto; }
.tzeile {
  display: grid; grid-template-columns: 22px 24px 1fr 10px auto; align-items: center; gap: 8px;
  padding: 4px 6px; border-radius: 8px; background: none; border: none; color: var(--txt);
  font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background .15s;
}
.tzeile:hover { background: #ffffff10; }
.tzeile.ich { background: #57d3f514; }
.tzeile .rang { color: var(--dim); font-family: var(--cond); font-size: 13px; text-align: right; }
.tzeile .wp { width: 22px; height: 23px; } .tzeile .wp svg { width: 100%; height: 100%; }
.tzeile .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tzeile .nm small { color: var(--dim); }
.tzeile .punkt { width: 8px; height: 8px; border-radius: 50%; background: #ffffff22; }
.tzeile.da .punkt { background: var(--good); box-shadow: 0 0 6px #3ddc8488; }
.tzeile .st { font-family: var(--disp); font-size: 18px; color: var(--ice); min-width: 30px; text-align: right; }
/* Team im Besuchsfenster */
.bteam { margin: 12px 0 14px; }
.bteam .kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bteam .kopf b { font-family: var(--cond); font-size: 15px; letter-spacing: .6px; text-transform: uppercase; color: var(--ice); }
.bteamkarten { display: flex; flex-wrap: wrap; gap: 6px; --cw: 88px; --ch: 123px; }
.bteamkarten .card { pointer-events: none; }
.bteamkarten .card .big { color: var(--dim); }
.tzeile .st em { font-style: normal; font-family: var(--cond); font-size: 12px; color: var(--gold); margin-left: 4px; vertical-align: top; }

/* Deko-Fotos in Sammlung, Auswahl und Platzliste */
.decorcard .vis.foto, .gardslot .vis.foto { display: grid; place-items: center; }
.decorcard .vis.foto img { width: 74px; height: 74px; object-fit: contain;
  filter: drop-shadow(0 4px 8px #000a) drop-shadow(0 0 10px color-mix(in srgb, var(--f, transparent) 45%, transparent)); }
.gardslot .vis.foto img { width: 42px; height: 42px; object-fit: contain; filter: drop-shadow(0 3px 6px #000a); }
.hkarte { position: relative; }
.hkarte .tagband { position: absolute; left: 8px; right: auto; top: auto; bottom: 34px; z-index: 6; }
.hkarte .card .big { font-size: calc(var(--cw) * .22); }
.marktfilter { margin-bottom: 10px; }

/* Laden: was demnächst kommt (wiederkehrende Saison-Päckchen) */
.packbald { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 10px; }
.packbald span { display: inline-flex; align-items: center; gap: 7px; }
.packbald i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }

/* Päckchen als Handelsware: Zählerzeilen und Plättchen */
.packzeilen { margin: 6px 0 10px; }
.packtitel { font-family: var(--cond); font-size: 12.5px; letter-spacing: .6px; text-transform: uppercase;
             color: var(--dim); margin: 4px 0 4px; }
.packzeile { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13px; }
.packzeile .pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.packzeile .pn small { color: var(--dim); margin-left: 4px; }
.packzeile b { min-width: 22px; text-align: center; font-family: var(--cond); font-size: 16px; }
.packzeile .btn.tiny { padding: 0 9px; line-height: 22px; }
.pf { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; box-shadow: 0 0 6px currentColor; }
.apost.pack .pf { margin-right: 6px; vertical-align: middle; }