/* ===========================================================================
 * app.css — Aufbau und Bauteile.
 * ======================================================================== */

.shell{ max-width:1340px; margin:0 auto; padding:22px 22px 70px }

/* ========================================================== Kopfzeile === */
.topbar{ position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line) }
.topbar-in{ max-width:1340px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap }

.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; color:inherit; min-width:0 }
.brandmark{
  width:44px; height:44px; border-radius:12px; flex:none; overflow:hidden;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:14.5px; letter-spacing:.06em;
  color:#00121a; background:linear-gradient(150deg,var(--cyan) 5%,#0f9fd0 95%);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent),
             0 6px 20px -6px color-mix(in srgb,var(--cyan) 70%,transparent);
}
.brandmark.sm{ width:34px; height:34px; font-size:12px; border-radius:9px; margin-bottom:12px }
.brandmark img{ width:100%; height:100%; object-fit:contain }
.brandtext{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.brandname{ font-family:var(--font-display); font-weight:700; font-size:17px; letter-spacing:.02em;
  line-height:1.1; white-space:nowrap }
.brandname em{ font-style:normal; color:var(--magenta) }
.brandsub{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint) }
.spacer{ flex:1 }

/* Kurs-Anzeige */
.ticker{ display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2); white-space:nowrap;
  transition:border-color .15s var(--ease) }
.ticker:hover{ border-color:var(--cyan) }
.tsym{ font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.1em;
  color:var(--ink-faint) }
.tval{ font-family:var(--font-display); font-weight:600; font-size:13.5px }
.tchg{ font-size:11.5px; font-weight:600 }
.tchg.up{ color:var(--lime) } .tchg.down{ color:var(--red) }

.tools{ display:flex; gap:7px; align-items:center }
.sport{ background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:9px 11px; font-size:13px; color:var(--ink) }
.iconbtn{ width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--panel-2); display:grid; place-items:center; font-size:16px; flex:none }
.iconbtn:hover{ border-color:var(--cyan) }

/* Wallet */
.walletwrap{ position:relative }
.walletmenu{ position:absolute; right:0; top:calc(100% + 9px); width:270px; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; padding:6px }
.wmhead{ padding:12px 12px 10px; border-bottom:1px solid var(--line-soft); margin-bottom:6px }
.wmlabel{ display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px }
.wmaddr{ display:block; font-family:ui-monospace,monospace; font-size:11.5px; color:var(--ink);
  word-break:break-all; line-height:1.5 }
.wmrow{ padding:0 12px 10px; font-size:12px; color:var(--ink-dim) }
.wmitem{ display:block; width:100%; text-align:left; padding:10px 12px; border-radius:var(--r-sm);
  font-size:13.5px; color:var(--ink-dim); text-decoration:none;
  transition:background .12s var(--ease), color .12s var(--ease) }
.wmitem:hover{ background:var(--panel-2); color:var(--ink) }
.wmitem.danger:hover{ color:var(--red) }

/* ========================================================= Navigation === */
/* Trennlinie oben: die Leiste selbst hat schon eine Unterkante (border-bottom
   von .topbar, dessen letztes Kind sie ist) — mit border-top oben wird die
   Reihe als eigene, gerahmte Einheit lesbar, nicht nur als Textzeile unter
   dem Logo. Dünne Striche zwischen den einzelnen Tabs (border-left je Tab
   außer dem ersten) markieren zusätzlich jeden Eintrag als eigenes Feld. */
.mainnav{ max-width:1340px; margin:0 auto; padding:0 22px; display:flex; gap:2px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -ms-overflow-style:none;
  border-top:1px solid var(--line) }
.mainnav::-webkit-scrollbar{ display:none }
.tab{ position:relative; display:flex; align-items:center; gap:7px; padding:14px 16px;
  font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink-faint);
  white-space:nowrap; transition:color .15s var(--ease) }
.tab:not(:first-child){ border-left:1px solid var(--line) }
.tab:hover{ color:var(--ink-dim) }
.tab[aria-pressed="true"]{ color:var(--ink) }
.tab[aria-pressed="true"]::after{ content:''; position:absolute; left:14px; right:14px; bottom:0;
  height:2px; border-radius:2px 2px 0 0; background:var(--cyan) }
.tab .count{ font-family:var(--font-body); font-size:11px; font-weight:500; color:var(--ink-faint);
  background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:1px 7px }

/* Meldungszeile */
.appalert{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 16px; padding:11px 15px; border-radius:var(--r-sm); font-size:13.5px;
  background:var(--panel-2); border:1px solid var(--line); color:var(--ink-dim) }
.appalert.ok{ border-color:color-mix(in srgb,var(--lime) 40%,transparent); color:var(--ink) }
.appalert.warn{ border-color:color-mix(in srgb,var(--gold) 40%,transparent); color:var(--ink) }
.appalert button{ color:var(--ink-faint); font-size:13px; flex:none }

/* ------------------------------------------------------------- Aufbau --- */
.cols{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:20px; align-items:start }
.cols > *{ min-width:0 }
@media (max-width:960px){ .cols{ grid-template-columns:1fr } }

.card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow) }
.pad{ padding:var(--pad) }
.eyebrow{
  font-family:var(--font-display); font-size:11px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 11px;
}
.empty{ padding:38px 20px; text-align:center; color:var(--ink-dim); font-size:14px; line-height:1.7 }
.empty.small{ padding:20px 0 }
.empty strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:16px; margin-bottom:6px }
.note-inline{
  margin-top:14px; padding:11px 13px; border-radius:var(--r-sm); font-size:12px; line-height:1.55;
  color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line);
}

/* ------------------------------------------------------------ Filter --- */
.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:14px }
.pill{
  padding:7px 13px; border-radius:999px; font-size:13px; font-weight:600;
  border:1px solid var(--line); color:var(--ink-dim); background:var(--panel);
  transition:background .15s var(--ease), color .15s var(--ease);
}
.pill[aria-pressed="true"]{ color:#00121a; background:var(--cyan); border-color:transparent }
.filters select,.filters input[type=search]{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:7px 10px; font-size:13px;
}
.filters input[type=search]{ min-width:130px }

/* ------------------------------------------------------ Spielerkarten --- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:12px; min-width:0 }

.pcard{
  position:relative; display:block; padding:0; overflow:hidden; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .2s var(--ease), border-color .18s var(--ease), box-shadow .22s var(--ease);
  will-change:transform;
}
.pcard:hover{ border-color:color-mix(in srgb,var(--team) 55%,var(--line));
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7) }
.pcard[aria-pressed="true"]{ border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), 0 14px 34px -14px color-mix(in srgb,var(--cyan) 60%,transparent) }

.pcard .shot{ position:relative; display:block; aspect-ratio:1/1; background:#070b16; overflow:hidden }
.pcard .shot img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s var(--ease), filter .25s var(--ease) }
.pcard:hover .shot img{ transform:scale(1.035) }
/* Verlauf nach unten, damit die Werte immer lesbar bleiben */
.pcard .grad{ position:absolute; inset:auto 0 0 0; height:46%; pointer-events:none;
  background:linear-gradient(to top, rgba(4,8,16,.85), transparent) }

/* Metallischer Schimmer, sehr zurückhaltend */
.pcard .sheen{ position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .25s var(--ease);
  background:
    radial-gradient(260px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.22), transparent 48%),
    linear-gradient(112deg, transparent 38%, rgba(190,215,255,.20) 48%,
      rgba(255,255,255,.10) 54%, transparent 64%);
  mix-blend-mode:soft-light }
.pcard:hover .sheen{ opacity:1 }

.pcard .ovr{ position:absolute; left:9px; top:9px; z-index:2;
  font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1; color:#fff;
  padding:6px 8px; border-radius:9px; background:rgba(4,8,16,.72);
  border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(4px) }
.pcard .capmark{ position:absolute; right:9px; top:9px; z-index:2; width:21px; height:21px;
  border-radius:7px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:11px; color:#1a1200;
  background:var(--gold) }
.pcard .ownmark{ position:absolute; right:9px; bottom:9px; z-index:2; width:21px; height:21px;
  border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700;
  color:#04140a; background:var(--lime) }

/* Nicht im Wallet — hochwertig gedämpft statt einfach blass */
.pcard.locked .shot img{ filter:grayscale(.72) brightness(.55) contrast(1.05) }
.pcard.locked{ background:var(--panel) }
.pcard.locked .meta{ opacity:.72 }
.lockwrap{ position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; pointer-events:none;
  background:linear-gradient(180deg, rgba(6,10,22,.30), rgba(6,10,22,.62)) }
.lockicon{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  color:var(--ink-dim); background:rgba(8,13,28,.75); border:1px solid rgba(255,255,255,.12) }
.lockicon svg{ width:16px; height:16px }
.locktext{ font-family:var(--font-display); font-size:10px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-dim);
  padding:4px 9px; border-radius:999px; background:rgba(8,13,28,.75);
  border:1px solid rgba(255,255,255,.10);
  opacity:0; transform:translateY(4px); transition:opacity .2s var(--ease), transform .2s var(--ease) }
.pcard.locked:hover .locktext{ opacity:1; transform:none }
.pcard.locked:hover .shot img{ filter:grayscale(.4) brightness(.72) }

/* Werte unter dem Bild — klare Reihenfolge: ID, Team, Position */
.pcard .meta{ display:block; padding:11px 12px 12px }
.pcard .mrow{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.pcard .id{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink) }
.pcard .rar{ font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.09em;
  padding:3px 7px; border-radius:5px; border:1px solid currentColor; opacity:.9 }
.pcard .rar.r0{ color:#98a4bd } .pcard .rar.r1{ color:var(--lime) }
.pcard .rar.r2{ color:var(--cyan) } .pcard .rar.r3{ color:#c07bff }
.pcard .rar.r4,.pcard .rar.r5{ color:var(--gold) }
.pcard .pname{ display:block; font-size:12.5px; color:var(--ink); margin-top:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pcard .team{ display:block; font-size:11.5px; color:var(--ink-dim); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pcard .pos{ display:flex; align-items:center; gap:6px; font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin-top:6px }
.pcard .pos i{ width:5px; height:5px; border-radius:50%; flex:none }

/* --------------------------------------------------------- Kollektion --- */
.tgroup{ margin-bottom:26px }
.tgroup:last-child{ margin-bottom:0 }
.tgroup .th{ display:flex; align-items:center; gap:9px; margin-bottom:11px; flex-wrap:wrap }
.tgroup .swatch{ width:4px; height:20px; border-radius:2px; background:var(--team); flex:none }
.tgroup .tn{ font-family:var(--font-display); font-weight:700; font-size:15px }
.tgroup .own{
  font-family:var(--font-display); font-size:11.5px; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px;
}
.tgroup .own.some{ color:var(--cyan); border-color:color-mix(in srgb, var(--cyan) 35%, transparent) }
.tgroup .own.all{ color:var(--lime); border-color:color-mix(in srgb, var(--lime) 35%, transparent) }

/* ------------------------------------------------------------- Spiel --- */
.game{ border-color:color-mix(in srgb, var(--team,var(--cyan)) 30%, var(--line)) }
.game{ box-shadow:var(--shadow), 0 0 40px -22px var(--team,var(--cyan)) }
.ghead{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.ghead .eyebrow{ margin-bottom:0 }

.pickrow{ margin:12px 0 13px }
.pickrow .lbl{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:8px }
.picks{ display:flex; gap:8px; overflow-x:auto; padding-bottom:5px; min-width:0; max-width:100% }
.pick{
  flex:none; display:flex; align-items:center; gap:9px; padding:6px 12px 6px 6px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--panel-2);
  color:var(--ink-dim); transition:border-color .15s var(--ease), color .15s var(--ease);
}
.pick:hover:not(:disabled){ border-color:var(--team,var(--cyan)); color:var(--ink) }
.pick[aria-pressed="true"]{ color:var(--ink); border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) }
.pick:disabled{ opacity:.5; cursor:not-allowed }
.pick img{ width:36px; height:36px; border-radius:7px; object-fit:cover; background:#070b16 }
.pick .pmeta{ display:flex; flex-direction:column; gap:2px; text-align:left }
.pick .pid{ font-weight:700; font-size:13px; line-height:1.1 }
.pick .pov{ font-size:10.5px; color:var(--ink-faint); white-space:nowrap }
.pick .pov b{ color:var(--ink) }
/* padding:0 ist Pflicht, nicht Kosmetik: weiter unten gibt es eine ZWEITE,
   voellig andere Komponente mit derselben Klasse `.stam` (die grosse
   Ausdauer-Anzeige, ~Zeile 1500). Deren `padding:11px 12px 10px` greift
   mangels eigener Angabe auch hier — aus der 3px-Leiste wurden dadurch
   23px, sichtbar als schwarzer Kasten mit einem duennen gruenen Strich
   darin. Beide Komponenten sollten langfristig getrennte Namen bekommen. */
.pick .stam{ display:block; height:3px; padding:0; border-radius:2px; background:var(--line-soft); overflow:hidden; margin-top:2px }
.pick .stam i{ display:block; height:100%; background:var(--lime); transition:width .3s var(--ease) }
.pick.tired .stam i{ background:var(--gold) }

/* Auswahl-Dialog fuer grosse Kader */
.pick.more{ background:var(--panel); border-style:dashed }
.pick .morenum{
  width:36px; height:36px; border-radius:7px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  background:var(--line-soft); color:var(--ink-dim); flex:none;
}
.mbox.wide{ width:min(880px,100%); max-height:86vh; display:flex; flex-direction:column }
.pkhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px }
.pkhead h2{ font-size:19px }
.picker .filters{ margin-bottom:14px }
.pkgrid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); gap:10px;
  overflow-y:auto; padding:2px; min-height:0;
}
.pkcard{
  display:flex; gap:11px; align-items:flex-start; text-align:left; padding:10px;
  border:1px solid var(--line); border-left:3px solid var(--team); border-radius:var(--r-sm);
  background:var(--panel-2); transition:border-color .15s var(--ease), transform .1s var(--ease);
}
.pkcard:hover{ border-color:var(--team); transform:translateY(-1px) }
.pkcard[aria-pressed="true"]{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) }
.pkcard img{ width:52px; height:52px; border-radius:8px; object-fit:cover; background:#070b16; flex:none }
.pkinfo{ min-width:0; flex:1 }
.pkid{ display:flex; align-items:baseline; gap:7px; font-family:var(--font-display); font-weight:700; font-size:14px }
.pkid em{ font-style:normal; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint) }
.pkteam{ display:block; font-size:11px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.pkbars{ display:flex; gap:9px; margin-top:5px }
.pkbars i{ font-style:normal; display:flex; flex-direction:column; line-height:1.25 }
.pkbars span{ font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint) }
.pkbars b{ font-family:var(--font-display); font-size:13px; color:var(--ink) }
.pkstam{ display:block; font-size:10.5px; color:var(--ink-faint); margin-top:5px }
.pkstam.low{ color:var(--gold) }

.duel{ display:flex; align-items:stretch; gap:12px; margin-bottom:13px }
.mini{
  flex:1; display:flex; gap:11px; align-items:flex-start; min-width:0;
  background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--team);
  border-radius:var(--r-sm); padding:11px 12px;
}
.mini img{ width:56px; height:56px; border-radius:9px; object-fit:cover; background:#070b16; flex:none }
.mini .mi{ min-width:0 }
.mini .role{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint) }
.mini .who{ font-weight:700; font-size:17px; line-height:1.2 }
.mini .tm{ font-size:11.5px; color:var(--ink-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mini .sk3{ display:flex; flex-wrap:wrap; gap:2px 10px; margin-top:5px; font-size:11px; color:var(--ink-faint) }
.mini .sk3 b{ color:var(--ink); font-size:12px }
.mini .derive{ font-size:10px; color:var(--ink-faint); margin-top:5px; opacity:.85 }
.vs{ align-self:center; font-family:var(--font-display); font-size:11px; letter-spacing:.16em;
     text-transform:uppercase; color:var(--ink-faint); flex:none }
@media (max-width:660px){ .duel{ flex-direction:column } .vs{ align-self:flex-start } }

.pitchwrap{ position:relative; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; background:#050810; min-width:0 }
#pitchHud{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
#pitch{ display:block; width:100%; height:auto; cursor:crosshair; touch-action:none;
  aspect-ratio:900/580; background:#03050c } /* TEST: war 900/506, mehr Himmel sichtbar — noch nicht deployed */

/* Vollbild-Knopf: nur auf schmalen (mobilen) Bildschirmen — auf dem Desktop
   ist ein größeres Fenster kein Problem, quer drehen ergibt dort keinen Sinn.
   Saß erst oben im Kopfbereich neben dem Spieltitel — dort ist er zwischen
   Überschrift und Spielerauswahl fast untergegangen (Markus fand ihn beim
   ersten Mobiltest nicht). Jetzt direkt unter dem Spielfeld, wo der Daumen
   nach dem letzten Schuss ohnehin ist, mit Textlabel statt nur Icon. */
.fsRow{ display:none; justify-content:center; margin-top:10px }
@media (max-width:820px){ .fsRow{ display:flex } }
#fsBtn{ font-size:13px; font-weight:600; line-height:1; padding:10px 18px }

/* Im Vollbild bleibt das Seitenverhältnis erhalten und die Box wird zentriert
   — sonst würde #pitchHud (inset:0, an .pitchwrap verankert) nicht mehr zum
   sichtbaren Spielfeld passen, sobald Bildschirm- und Spielseitenverhältnis
   auseinanderlaufen (praktisch immer der Fall). */
.pitchwrap:fullscreen{
  position:fixed; inset:0; margin:auto; border:0; border-radius:0;
  width:min(100vw, calc(100vh * 900 / 506));
  height:min(100vh, calc(100vw * 506 / 900));
  background:#000;
}

/* Vollbild-Exit: lebt bewusst INNERHALB von .pitchwrap, nicht daneben —
   nur Nachfahren des vollbildgeschalteten Elements bleiben im Vollbild
   überhaupt sichtbar. #fsBtn (außerhalb) würde hier einfach verschwinden,
   ohne Weg zurück. Nur per :fullscreen sichtbar, sonst nirgends im Weg. */
.fsExit{ display:none; position:absolute; top:10px; right:10px; z-index:6;
  width:38px; height:38px; border-radius:50%; align-items:center; justify-content:center;
  font-size:16px; line-height:1; color:#fff; background:rgba(6,10,20,.55);
  border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(4px); cursor:pointer }
.pitchwrap:fullscreen .fsExit{ display:flex }

.hud{ margin-top:13px }
.hud .score{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:11px; flex-wrap:wrap }
.hud .slbl{ display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--ink-faint); margin-bottom:6px }
.hud .legend{ display:flex; align-items:center; gap:5px; font-size:10.5px; color:var(--ink-faint); margin-top:7px; flex-wrap:wrap }
.hud .legend i{ width:9px; height:9px; border-radius:2px; display:inline-block; margin-left:7px }
.hud .legend i:first-child{ margin-left:0 }
.hud .legend i.g{ background:var(--lime) } .hud .legend i.s{ background:var(--red) }
.hud .legend i.a{ background:#c9d3e8 }     .hud .legend i.m{ background:var(--gold) }
.pdots{ display:flex; gap:6px }
.pdot{ width:24px; height:7px; border-radius:4px; background:var(--line-soft) }
.pdot.g{ background:var(--lime) } .pdot.s{ background:var(--red) }
.pdot.m{ background:var(--gold) } .pdot.a{ background:#c9d3e8 }
.hud .sc{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:16px }
.hud .fire{ font-size:12px; color:var(--gold); animation:flicker 1.1s infinite alternate }
@keyframes flicker{ from{ opacity:.65 } to{ opacity:1 } }
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px }
/* Elfmeter: Werteanzeige steht über den Schritten, nicht daneben */
.cbstats + .steps{ margin-top:12px }

/* Latten schießen: die gewählte Flugbahn. Die Farbe ist die Aussage —
   rot heißt riskant und teuer bezahlt, grün heißt sicher und billig. */
.cbtraj{
  display:flex; align-items:center; gap:8px; margin-top:8px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel-2);
}
.cbtraj .tlbl{
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-faint);
}
.cbtraj .tval{ font-family:var(--font-display); font-weight:700; font-size:12px;
  letter-spacing:.06em }
.cbtraj .tmul{ margin-left:auto; font-family:var(--font-display); font-weight:700;
  font-size:13px; font-variant-numeric:tabular-nums }
.cbtraj.flat  { border-color:color-mix(in srgb, var(--red) 55%, var(--line)) }
.cbtraj.flat   .tval, .cbtraj.flat   .tmul{ color:var(--red) }
.cbtraj.medium{ border-color:color-mix(in srgb, var(--gold) 55%, var(--line)) }
.cbtraj.medium .tval, .cbtraj.medium .tmul{ color:var(--gold) }
.cbtraj.lofted{ border-color:color-mix(in srgb, var(--lime) 45%, var(--line)) }
.cbtraj.lofted .tval, .cbtraj.lofted .tmul{ color:var(--lime) }
@media (max-width:640px){ .steps{ grid-template-columns:1fr } }
.step{ display:flex; align-items:flex-start; gap:10px; padding:11px 13px;
  border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line) }
/* Nummer links, Text rechts — untereinander, nicht nebeneinander. */
.stx{ display:block; min-width:0 }
.sn{ width:20px; height:20px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:11px;
  color:var(--ink-faint); border:1px solid var(--line) }
.step b{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); line-height:1.4 }
.step em{ display:block; font-style:normal; font-size:11.5px; color:var(--ink-faint); margin-top:3px }
.step i{ font-style:normal }
.step i.ok{ color:var(--lime) } .step i.fx{ color:var(--magenta) }
.hud .final{ padding:13px 15px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line) }
.hud .final b{ font-family:var(--font-display); font-size:15px }
.hud .pts{ font-size:28px; color:var(--lime); line-height:1.2; margin-top:3px }
.hud .mx{ font-size:11.5px; color:var(--ink-faint) }
.hud .finalrow{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-top:14px }

/* Share-Popup: ein Knopf statt zwei, das Popup fragt erst wohin.
   Aufbau wie .walletwrap/.walletmenu, nur kleiner und ohne Kopfzeile. */
.sharewrap{ position:relative; display:inline-block }
.sharemenu{ position:absolute; left:0; top:calc(100% + 7px); width:170px; z-index:40;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow); overflow:hidden; padding:5px }
.smitem{ display:block; width:100%; text-align:left; padding:8px 10px; border-radius:var(--r-sm);
  font-size:13px; color:var(--ink-dim); background:none; border:0; cursor:pointer;
  transition:background .12s var(--ease), color .12s var(--ease) }
.smitem:hover{ background:var(--panel-2); color:var(--ink) }

/* Wucht: kurzes Wackeln nur im Spielfeld */
.shake{ animation:shake .34s var(--ease) }
@keyframes shake{
  0%,100%{ transform:translate(0,0) }
  15%{ transform:translate(-5px,3px) } 30%{ transform:translate(5px,-3px) }
  45%{ transform:translate(-4px,-2px) } 60%{ transform:translate(4px,2px) }
  80%{ transform:translate(-2px,1px) }
}
/* Spielerbild reagiert auf das Ergebnis */
.fx-goal{ animation:hop .55s var(--ease) }
@keyframes hop{
  0%{ transform:translateY(0) } 35%{ transform:translateY(-11px) }
  55%{ transform:translateY(2px) } 100%{ transform:translateY(0) }
}
.fx-goal{ box-shadow:0 0 0 2px var(--lime), 0 0 22px rgba(125,255,90,.55) }
.fx-miss{ animation:sag .55s var(--ease); filter:saturate(.35) }
@keyframes sag{ 0%{ transform:translateY(0) } 45%{ transform:translateY(5px) } 100%{ transform:translateY(0) } }

/* --------------------------------------------------------- Detailkarte --- */
[data-blk="detail"] .hero .n{ font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.15 }
[data-blk="detail"] .hero .t{ font-size:13px; color:var(--ink-dim) }
[data-blk="detail"] .hero .p{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--cyan); margin-top:5px }
/* War versehentlich .sk — dieselbe Klasse wie der Lade-Skeleton weiter unten
   (.sk mit skwipe-Shimmer-Animation). Die Attribut-Balken erbten dadurch
   den endlosen Schimmer/Blink-Effekt mit, obwohl sie fertig geladen waren
   — daher eigener Name. */
.attrbar{ margin-bottom:11px }
.attrbar .row{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px }
.attrbar .row span{ color:var(--ink-dim) }
.attrbar .row b{ font-size:14px }
.attrbar .track{ height:6px; border-radius:4px; background:var(--line-soft); overflow:hidden }
.attrbar .track i{ display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--cyan),var(--magenta)) }
.boost{ font-size:11.5px; color:var(--gold); margin-top:10px }
.pen{ margin-top:12px; font-size:11.5px; color:var(--ink-dim); line-height:1.7 }
.pen b{ color:var(--ink) }
.locked{
  margin-top:12px; padding:9px 11px; border-radius:var(--r-sm); font-size:12px; line-height:1.5;
  color:var(--ink-dim); background:var(--panel-2); border:1px solid var(--line);
}
.locked.ok{ color:var(--lime) }

/* Heatmap */
.heat{ margin-top:14px }
.hlbl{ font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:6px }
.hbox{ position:relative; width:150px; height:62px; margin-left:auto; margin-right:auto }
.hbox .frame{ position:absolute; inset:0; border:2px solid rgba(180,205,255,.35); border-bottom:0; border-radius:2px }
.hbox i{ position:absolute; width:6px; height:6px; border-radius:50%; transform:translate(-3px,-3px) }
.hbox i.g{ background:var(--lime) } .hbox i.s{ background:var(--red) } .hbox i.m{ background:var(--gold) }

/* Dividenden */
.divhead{ display:flex; align-items:baseline; gap:10px; margin-bottom:12px }
.divamt{ font-family:var(--font-display); font-size:30px; font-weight:700; color:var(--lime); line-height:1.1 }
.divamt small{ font-size:14px; margin-left:5px; color:var(--ink-dim) }
.divsub{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint) }
.divbtn{ width:100% }
.divdone{ margin-top:10px; font-size:12px; color:var(--ink-dim); line-height:1.5 }
.divlist{ list-style:none; margin:14px 0 0; padding:0 }
.divlist li{
  display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  padding:8px 0; border-top:1px solid var(--line-soft); color:var(--ink-faint);
}
.divlist li b{ color:var(--ink); font-family:var(--font-display) }
.divnote{ font-size:11.5px; color:var(--ink-faint); margin-top:14px; line-height:1.6 }

/* Gesamter Topf */
.poolbox{ margin-top:14px; padding:12px 13px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line) }
.poolrow{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  color:var(--ink-faint); margin-bottom:8px }
.poolrow b{ font-family:var(--font-display); font-size:14px; color:var(--ink) }
.poolbar{ height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden }
.poolbar i{ display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--lime),var(--cyan)) }
.poolnote{ font-size:10.5px; color:var(--ink-faint); margin-top:7px; line-height:1.5 }

.divlist li.warn b{ color:var(--gold) }

/* Auszahlungs-Historie */
.histempty{ font-size:12px; color:var(--ink-faint); margin-top:12px }
.hist{ margin-top:14px; padding-top:13px; border-top:1px solid var(--line) }
.histtop{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; color:var(--ink-faint) }
.histtop b{ font-family:var(--font-display); font-size:15px; color:var(--lime) }
.histmeta{ font-size:11px; color:var(--ink-faint); margin-top:3px }
.histlist{ list-style:none; margin:10px 0 0; padding:0 }
.histlist a{ display:flex; justify-content:space-between; gap:10px; padding:7px 9px;
  border-radius:6px; font-size:12px; color:var(--ink-dim); text-decoration:none;
  transition:background .12s var(--ease) }
.histlist a:hover{ background:var(--panel-2); color:var(--ink) }
.histlist em{ font-style:normal; font-size:11px; color:var(--ink-faint) }

/* Team-Synergie */
.synhead{ display:flex; align-items:baseline; gap:10px; margin-bottom:11px }
.synmult{ font-size:26px; font-weight:700; color:var(--lime) }
.synsub{ font-size:11.5px; color:var(--ink-faint) }
.synlist{ list-style:none; margin:0; padding:0 }
.synlist li{
  display:flex; justify-content:space-between; gap:10px; font-size:12.5px;
  padding:7px 0; border-top:1px solid var(--line-soft); color:var(--ink-faint);
}
.synlist li b{ color:var(--ink-faint) }
.synlist li.on{ color:var(--ink) } .synlist li.on b{ color:var(--lime) }
.synhint{ font-size:11.5px; color:var(--ink-faint); margin-top:10px; line-height:1.55 }

/* Team-Aufbau */
.tline{ margin-bottom:15px }
.tline .head{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:7px }
.tline .name{ font-family:var(--font-display); font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tline .bp{ font-size:12px; color:var(--lime); white-space:nowrap }
.tline .dots{ display:grid; grid-template-columns:repeat(11,1fr); gap:3px }
.tline .dot{ height:16px; border-radius:3px; background:var(--line-soft); position:relative }
.tline .dot.on{ background:var(--team,var(--cyan)) }
.tline .dot.gate::after{ content:''; position:absolute; inset:-3px -1px; border-right:2px solid var(--gold); border-radius:2px }
.tline .hint{ font-size:11.5px; color:var(--ink-faint); margin-top:6px }
.tline .hint b{ color:var(--gold); font-weight:600 }
.tline.done .hint{ color:var(--lime) }
.tline.total{ border-top:1px solid var(--line); padding-top:12px; margin-bottom:0 }

/* --------------------------------------------------------- Rangliste --- */
.board{ width:100%; border-collapse:collapse; font-size:13px }
.board th{
  text-align:left; font-family:var(--font-display); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); padding:0 8px 9px; font-weight:600;
}
.board td{ padding:9px 8px; border-top:1px solid var(--line-soft) }
.board .rk{ color:var(--ink-faint); width:28px }
.board .pl{ font-family:var(--font-display); font-weight:600 }
.board .pl small{ color:var(--ink-faint); font-weight:400; font-family:var(--font-body); margin-left:5px }
.board .dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:7px }
.board .pt{ text-align:right; color:var(--lime); font-weight:700 }

/* ------------------------------------------------------------- Über --- */
.about{ max-width:100% }

/* Kopfbereich */
.hero{ position:relative; border-radius:var(--r-lg); overflow:hidden; margin-bottom:16px;
  border:1px solid var(--line);
  background:
    radial-gradient(620px 260px at 92% -30%, color-mix(in srgb,var(--magenta) 26%,transparent), transparent 70%),
    radial-gradient(560px 280px at -6% 120%, color-mix(in srgb,var(--cyan) 24%,transparent), transparent 70%),
    var(--panel-2);
}
.hero-in{ padding:40px 38px 34px }
.tagline{ display:inline-block; font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  background:color-mix(in srgb,var(--cyan) 12%,transparent);
  border-radius:999px; padding:6px 13px; margin-bottom:16px }
.hero h2 em{ font-style:normal;
  background:linear-gradient(96deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text; background-clip:text; color:transparent }
@media (max-width:620px){ .hero h2{ font-size:30px } .hero-in{ padding:24px 20px } }
.hero p{ line-height:1.68; color:var(--ink); margin:0 0 26px }
.hero-cta{ display:flex; gap:9px; flex-wrap:wrap }
.hero-cta .btn{ text-decoration:none }
.hero-strip{ display:flex; height:3px; opacity:.5 }
.hero-strip span{ flex:1; filter:saturate(.75) }

/* Vier Kacheln */
.cards4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:10px; margin-bottom:16px }
.cards4 .c{ padding:20px 18px; border-radius:var(--r); background:var(--panel-2);
  border:1px solid var(--line); border-top:3px solid var(--cyan) }
.cards4 .c1{ border-top-color:var(--cyan) }    .cards4 .c2{ border-top-color:var(--lime) }
.cards4 .c3{ border-top-color:var(--gold) }    .cards4 .c4{ border-top-color:var(--magenta) }
.cards4 b{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:8px }
.cards4 p{ margin:0; font-size:14px; line-height:1.62; color:var(--ink); opacity:.72 }

/* Season-Block: Kollektion und Royalty gehören zusammen */
.season{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel-2); margin-bottom:16px }
.seasonhead{ display:flex; align-items:center; gap:14px; padding:22px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(100deg, color-mix(in srgb,var(--lime) 12%,transparent), transparent 60%) }
.sbadge{ font-family:var(--font-display); font-size:10.5px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lime); padding:5px 12px; border-radius:999px;
  border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);
  background:color-mix(in srgb,var(--lime) 12%,transparent) }
.seasonhead h3{ font-size:23px; margin:0 }
.seasongrid{ display:grid; grid-template-columns:1fr 1fr; gap:0 }
@media (max-width:760px){ .seasongrid{ grid-template-columns:1fr } }
.sblock{ padding:26px }
.sblock + .sblock{ border-left:1px solid var(--line) }
@media (max-width:760px){ .sblock + .sblock{ border-left:0; border-top:1px solid var(--line) } }
.sblock h4{ font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cyan); margin:0 0 14px }
.sblock p{ font-size:15px; line-height:1.75; color:var(--ink); opacity:.76; margin:0 0 14px }
.sblock p b{ color:var(--ink) }
.sblocklink{ display:inline-block; font-family:var(--font-display); font-size:13px;
  font-weight:600; color:var(--cyan); text-decoration:none }
.sblocklink:hover{ text-decoration:underline; text-underline-offset:3px }

.minis{ display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line) }
.minis span{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim) }
.minis b{ display:block; font-family:var(--font-display); font-size:25px; color:var(--ink); margin-bottom:2px }

.split{ display:flex; gap:9px; margin-bottom:14px }
.split div{ flex:1; padding:14px; text-align:center; border-radius:var(--r-sm);
  background:var(--panel); border:1px solid var(--line) }
.split b{ display:block; font-family:var(--font-display); font-size:27px; color:var(--ink); margin-bottom:2px }
.split span{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-dim) }
.split .hi{ border-color:color-mix(in srgb,var(--gold) 50%,transparent) }
.split .hi b{ color:var(--gold) }

.panelbox{ padding:26px; border-radius:var(--r); background:var(--panel-2);
  border:1px solid var(--line); border-left:3px solid var(--cyan); margin-bottom:16px }
.panelbox:last-child{ margin-bottom:0 }
.b-cyan{ border-left-color:var(--cyan) }  .b-magenta{ border-left-color:var(--magenta) }
.panelbox h3{ font-size:20px; margin-bottom:14px }
.panelbox p{ font-size:15px; line-height:1.75; color:var(--ink); opacity:.76; margin:0 0 12px }
.panelbox p:last-child{ margin-bottom:0 }
.panelbox b{ color:var(--ink) }

/* Roadmap */
.roadlead{ margin-bottom:18px !important }
.road ol{ list-style:none; margin:0; padding:0 }
.road li{ position:relative; padding:0 0 22px 30px }
.road li:last-child{ padding-bottom:0 }
.road li::before{ content:''; position:absolute; left:4px; top:6px; width:11px; height:11px;
  border-radius:50%; background:var(--line-soft); border:2px solid var(--panel-2); z-index:1 }
.road li:not(:last-child)::after{ content:''; position:absolute; left:9px; top:18px; bottom:0;
  width:2px; background:var(--line) }
.road li.done::before{ background:var(--lime) }
.road li.now::before{ background:var(--cyan); box-shadow:0 0 0 4px color-mix(in srgb,var(--cyan) 22%,transparent) }
.road li.future::before{ background:var(--magenta) }
.road li b{ font-family:var(--font-display); font-size:16px; color:var(--ink); margin-right:10px }
.road li p{ font-size:14.5px; line-height:1.7; color:var(--ink); opacity:.72; margin:8px 0 0 }
.rtag{ display:inline-block; font-size:9.5px; font-family:var(--font-display); font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:3px 9px; border-radius:999px;
  color:var(--ink-faint); border:1px solid var(--line) }
.rtag.live{ color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 45%,transparent);
  background:color-mix(in srgb,var(--cyan) 12%,transparent) }

/* Creator */
.creator .cr{ display:flex; gap:18px; align-items:flex-start }
@media (max-width:560px){ .creator .cr{ flex-direction:column } }
.crpic{ position:relative; overflow:hidden }
.crpic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.crpic span{ font-family:var(--font-display); font-weight:700; font-size:32px; color:#00121a; opacity:0 }
.crpic.ph span{ opacity:1 }

/* Live-Status in der Seitenleiste */
.livesub{ font-size:11.5px; color:var(--ink-faint); margin:5px 0 13px }
.ab-stats{ display:flex; gap:9px; flex-wrap:wrap }
.ab-stats.vertical{ flex-direction:column; gap:8px }
.ab-stats div{ flex:1; min-width:104px; padding:12px 14px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.ab-stats b{ font-family:var(--font-display); font-size:20px; line-height:1.15; color:var(--lime) }
.ab-stats span{ font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint) }
.ld{ opacity:.4 }
.buyside{ display:flex; width:100%; margin-top:16px }
.tiny{ font-size:12.5px; color:var(--ink-dim); line-height:1.65; margin:12px 0 0 }

/* Social-Liste — deutlich sichtbar statt kaum erkennbar */
.sociallist{ display:flex; flex-direction:column; gap:8px }
.sociallist a{ display:flex; align-items:center; gap:11px; padding:11px 13px;
  border-radius:var(--r-sm); text-decoration:none;
  background:var(--panel-2); border:1px solid var(--line);
  transition:border-color .15s var(--ease), background .15s var(--ease) }
.sociallist a:hover{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 8%,var(--panel-2)) }
.stag{ width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:11px; letter-spacing:.04em;
  color:var(--cyan); background:color-mix(in srgb,var(--cyan) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 32%,transparent) }
.sname{ flex:1; min-width:0; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink) }
.sname em{ display:block; font-style:normal; font-family:var(--font-body); font-weight:400;
  font-size:11.5px; color:var(--ink-faint); margin-top:1px }
.sarrow{ color:var(--ink-faint); font-size:15px }

.buy{ border-color:color-mix(in srgb,var(--lime) 45%,transparent) !important;
  color:var(--lime) !important; font-weight:600 }
.buy.sm{ font-size:11.5px; padding:3px 10px; border-radius:999px; border:1px solid; text-decoration:none }

/* ------------------------------------------------------ Willkommen --- */
.modal{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:20px;
  background:rgba(3,6,14,.72); backdrop-filter:blur(6px); animation:fade .2s var(--ease);
}
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.mbox{
  width:min(520px,100%); background:var(--panel); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow);
  animation:rise .28s var(--ease);
}
@keyframes rise{ from{ transform:translateY(14px); opacity:0 } to{ transform:none; opacity:1 } }
.mmark{
  width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  font-family:var(--font-display); font-weight:700; color:#00121a;
  background:linear-gradient(150deg,var(--cyan),#0f9fd0);
}
.mtag{ display:inline-block; font-family:var(--font-display); font-size:9.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--cyan); margin-bottom:10px }
.mbox h2{ font-size:23px; margin-bottom:11px }
.mtree{ display:flex; flex-direction:column; gap:8px; margin:16px 0 4px;
  padding-left:14px; border-left:2px solid var(--line) }
.mtree span{ font-size:12.5px; color:var(--ink-faint) }
.mtree b{ display:inline-block; min-width:120px; font-family:var(--font-display);
  color:var(--ink); margin-right:8px }
.mtree .dim{ opacity:.6 }
.mbox p{ font-size:14px; color:var(--ink-dim); line-height:1.65; margin:0 0 13px }
.mbox ul{ margin:0 0 15px; padding-left:19px; font-size:13.5px; color:var(--ink-dim); line-height:1.9 }
.mbox ul b,.mbox p b{ color:var(--ink) }
.mbox .small{ font-size:12px; color:var(--ink-faint) }
.mbox .btn{ width:100%; margin-top:6px }

/* ------------------------------------------------------------ Fußzeile --- */
.foot{ margin-top:44px; padding-top:30px; border-top:1px solid var(--line) }
.footcols{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:26px }
@media (max-width:1180px){ .footcols{ grid-template-columns:1.6fr 1fr 1fr; gap:24px } }
@media (max-width:900px){ .footcols{ grid-template-columns:1fr 1fr; gap:24px } }
@media (max-width:560px){ .footcols{ grid-template-columns:1fr; gap:20px } }
.footcols h4{ font-family:var(--font-display); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 11px }
.footcols p{ font-size:13px; line-height:1.65; color:var(--ink-dim); margin:0; max-width:38ch }
.footcols a{ display:block; font-size:13px; color:var(--ink-dim); text-decoration:none;
  padding:5px 0; transition:color .15s var(--ease) }
.footcols a:hover{ color:var(--cyan) }
.footbar{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:26px; padding-top:18px; border-top:1px solid var(--line-soft);
  font-size:12px; color:var(--ink-faint) }
.fmono{ font-family:ui-monospace,monospace }


/* ===========================================================================
 * Touch-Geräte
 * Alles hier gilt nur für Finger-Bedienung. Am Rechner ändert sich nichts.
 * ======================================================================== */
@media (pointer:coarse){
  /* Antippbare Flächen mindestens 44 Pixel — sonst trifft man daneben */
  .btn{ padding:13px 18px; min-height:46px }
  .btn.sm{ padding:10px 14px; min-height:40px }
  .iconbtn{ width:46px; height:46px; font-size:18px }
  .pill{ padding:11px 16px; min-height:44px }
  .tab{ padding:14px 16px }
  .filters select,.filters input[type=search]{ padding:11px 12px; min-height:44px }
  .pick{ padding:9px 14px 9px 9px }
  .pick img{ width:42px; height:42px }
  .misslist a{ padding:5px 10px; display:inline-block; margin-bottom:4px }

  /* Doppeltipp-Zoom auf Bedienelementen unterbinden */
  button, .btn, a.btn, .pill, .tab, .pick, .pcard, .pkcard{ touch-action:manipulation }

  /* Karten kippen nicht — auf dem Finger wirkt das nur zufällig */
  .pcard{ transform:none !important }
  
  /* Spielfeld höher, damit das Tor genug Platz bekommt */
  #pitch{ cursor:default }
  .pitchwrap{ margin-inline:-4px }
}

/* Schwebeeffekte nur, wo es echtes Schweben gibt */
@media (hover:none){
  .pcard:hover{ transform:none; box-shadow:none }
  .pcard.missing:hover{ opacity:.44 }
}

/* Schmale Bildschirme */
@media (max-width:560px){
  .shell{ padding:14px 12px 56px }
  .card.pad,.pad{ padding:13px }
  .grid{ grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:9px }
  .hero h2{ font-size:27px }
  .hero-in{ padding:22px 18px }
  .hero-cta{ flex-direction:column }
  .hero-cta .btn{ width:100%; justify-content:center }
  .cards4{ grid-template-columns:1fr 1fr }
  .ab-stats div{ min-width:calc(50% - 5px) }
  .minis{ gap:12px }
    .mbox{ padding:20px 17px }
  .mbox.wide{ max-height:92vh }
  .pkgrid{ grid-template-columns:1fr }
  .hud .score{ gap:8px }
  .tline .dot{ height:14px }
}

/* Sichere Zonen bei Geräten mit Aussparung */
@supports (padding:max(0px)){
  .shell{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
    padding-bottom:max(56px, env(safe-area-inset-bottom));
  }
}


/* ============================================================ Bereiche === */
.panel{ display:block }
.panel > .card{ margin-bottom:16px }
.panel > .card:last-child{ margin-bottom:0 }
.cols{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:20px; align-items:start }
.cols > *{ min-width:0 }
@media (max-width:1080px){ .cols{ grid-template-columns:1fr } }

.secthead{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px }
.secttitle{ font-size:24px; line-height:1.2; margin:4px 0 8px }
.sectlead{ font-size:14.5px; line-height:1.7; color:var(--ink); opacity:.74; max-width:64ch; margin:0 }

.empty.big{ padding:52px 24px }
.empty.big p{ max-width:44ch; margin:0 auto 20px; font-size:14.5px; line-height:1.7 }
.emptycta{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap }

/* ============================================================== Spiele === */
.gamegrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:13px }
.gcard{ position:relative; display:flex; gap:15px; text-align:left; padding:19px;
  border-radius:var(--r); background:var(--panel-2); border:1px solid var(--line);
  transition:border-color .18s var(--ease), transform .12s var(--ease) }
.gcard:not(:disabled):hover{ border-color:var(--accent); transform:translateY(-2px) }
.gcard:disabled{ opacity:.6; cursor:default }
.gcicon{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  color:var(--accent); background:color-mix(in srgb,var(--accent) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent) }
.gcicon svg{ width:26px; height:26px }
.gcbody{ min-width:0; flex:1 }
.gctop{ display:flex; align-items:center; gap:10px; margin-bottom:4px }
.gctop b{ font-family:var(--font-display); font-size:17px }
.gstatus{ font-size:9.5px; font-family:var(--font-display); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-faint) }
.gstatus.live{ color:var(--lime); border-color:color-mix(in srgb,var(--lime) 45%,transparent);
  background:color-mix(in srgb,var(--lime) 12%,transparent) }
.gctag{ display:block; font-size:13px; color:var(--ink-dim); margin-bottom:8px }
/* War color:var(--ink) mit opacity:.66 — genau das Muster aus Übergabe 3.5:
   Deckkraft als Abstufung funktioniert nur auf dunklem Grund. --ink ist im
   hellen Thema fast schwarz; bei 66 % Deckkraft auf weiß verwaschte der Text
   sichtbar. --ink-dim ist je Thema geprüft (siehe theme.css) und ersetzt das
   direkt, ohne den Kontrast dem Zufall zu überlassen. */
.gcdesc{ display:block; font-size:13px; line-height:1.62; color:var(--ink-dim) }
.gcmeta{ display:flex; gap:20px; flex-wrap:wrap; margin-top:13px; padding-top:12px;
  border-top:1px solid var(--line);
  /* Platz für den absolut positionierten "Play →"-Badge (.gcgo) reservieren —
     ohne das lief die Attributes-Zeile bei kurzen "Positions"-Texten (z.B.
     "All positions") mit dem Badge zusammen, weil .gcmeta selbst nichts vom
     Badge weiß und erst bei genug Inhalt von selbst umbrach. */
  padding-right:82px }
.gcmeta span{ font-size:12px; color:var(--ink-dim) }
.gcmeta i{ display:block; font-style:normal; font-size:9.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px }
.gcgo{ position:absolute; right:19px; bottom:19px; font-family:var(--font-display);
  font-size:12.5px; font-weight:600; color:var(--accent) }

.gamebar{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:16px;
  padding:12px 16px; border-radius:var(--r); background:var(--panel); border:1px solid var(--line) }
.backbtn{ font-size:13px; color:var(--ink-faint) }
.backbtn:hover{ color:var(--cyan) }
.gbtitle{ display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:16px }
.gbicon svg{ width:22px; height:22px; display:block }
.subtabs{ margin-left:auto; display:flex; gap:3px; padding:3px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line) }
.subtab{ padding:7px 15px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-faint) }
.subtab[aria-pressed="true"]{ background:var(--cyan); color:#00121a }

/* =============================================================== Hilfe === */
.helpnav{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin-bottom:20px }
.hnav{ padding:13px 15px; text-align:left; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line);
  transition:border-color .15s var(--ease) }
.hnav:hover{ border-color:var(--cyan) }
.hnav[aria-pressed="true"]{ border-color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 10%,var(--panel-2)) }
.hnav b{ display:block; font-family:var(--font-display); font-size:14px; margin-bottom:3px }
.hnav em{ font-style:normal; font-size:11.5px; color:var(--ink-faint) }
.helpintro{ font-size:14.5px; color:var(--ink); opacity:.72; margin:0 0 16px }

.helplist{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.hitem + .hitem{ border-top:1px solid var(--line) }
.hq{ display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  text-align:left; padding:16px 18px; font-family:var(--font-display); font-weight:600;
  font-size:15px; color:var(--ink); background:var(--panel-2) }
.hq:hover{ background:color-mix(in srgb,var(--cyan) 6%,var(--panel-2)) }
.hchev{ color:var(--ink-faint); transition:transform .2s var(--ease); flex:none }
.hitem.open .hchev{ transform:rotate(180deg); color:var(--cyan) }
.ha{ display:none; padding:2px 18px 20px; background:var(--panel-2) }
.hitem.open .ha{ display:block }
.ha p{ font-size:14.5px; line-height:1.75; color:var(--ink); opacity:.76; margin:0 0 12px }
.ha p:last-child{ margin-bottom:0 }
.ha b{ color:var(--ink); opacity:1 }
.ha ul{ margin:0 0 12px; padding-left:20px; font-size:14.5px; line-height:1.85;
  color:var(--ink); opacity:.76 }
.hlptable{ width:100%; border-collapse:collapse; margin:0 0 14px; font-size:13.5px }
.hlptable th{ text-align:left; font-family:var(--font-display); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); padding:0 10px 8px; font-weight:600 }
.hlptable td{ padding:8px 10px; border-top:1px solid var(--line); color:var(--ink-dim) }
.hlptable td.jump{ color:var(--gold); font-weight:600 }
.helpfoot{ margin-top:22px; padding:20px; border-radius:var(--r); text-align:center;
  background:var(--panel-2); border:1px solid var(--line) }
.helpfoot b{ font-family:var(--font-display); font-size:16px }
.helpfoot p{ font-size:13.5px; color:var(--ink-dim); margin:6px 0 14px }

.feedbackbox{ margin-top:14px; padding:20px; border-radius:var(--r);
  background:var(--panel-2); border:1px solid var(--line) }
.feedbackbox b{ font-family:var(--font-display); font-size:16px }
.feedbackbox p{ font-size:13.5px; color:var(--ink-dim); margin:6px 0 14px }
.feedbackbox form{ display:flex; flex-direction:column; gap:10px }
.feedbackbox input[type=text], .feedbackbox textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--ink); font-family:inherit; font-size:13.5px; padding:10px 12px; resize:vertical;
}
.feedbackbox textarea{ min-height:88px }
.feedbackbox input[type=text]:focus, .feedbackbox textarea:focus{ border-color:var(--cyan); outline:none }
.feedbackbox .hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }
.feedbackbox .btn{ align-self:flex-start }

/* Dezent statt aufdringlich: kleine Pille am Rand, kein Icon-Klischee,
   kein Schatten-Overkill — sie soll auffindbar sein, nicht nerven. */
.feedbackfab{
  position:fixed; right:18px; bottom:18px; z-index:55;
  padding:10px 16px; border-radius:999px;
  font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.03em;
  color:var(--ink-dim); background:var(--panel); border:1px solid var(--line);
  box-shadow:var(--shadow); cursor:pointer;
  transition:color .16s var(--ease), border-color .16s var(--ease),
             transform .12s var(--ease), background .16s var(--ease),
             opacity .18s var(--ease);
}
/* Sobald die Fußzeile im Bild ist, würde der Button sonst dauerhaft über
   ihren Links schweben — siehe IntersectionObserver in ui.js. */
.feedbackfab.hide{ opacity:0; pointer-events:none; transform:translateY(6px) }
.feedbackfab:hover{
  color:var(--ink); border-color:color-mix(in srgb, var(--cyan) 55%, var(--line));
  background:color-mix(in srgb, var(--cyan) 10%, var(--panel));
  transform:translateY(-1px);
}
@media (max-width:620px){ .feedbackfab{ right:12px; bottom:12px; padding:9px 14px; font-size:12px } }

.fblist{ display:flex; flex-direction:column; gap:10px }
.fbitem{ padding:12px 14px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line) }
.fbmeta{ display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--ink-faint); margin-bottom:6px }
.fbmeta b{ color:var(--ink-dim); font-weight:600 }
.fbitem p{ font-size:13.5px; color:var(--ink); white-space:pre-wrap; margin:0 }

/* ============================================================ Leaderboard === */
.lbnick{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px;
  padding:10px 14px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line);
  font-size:13px; color:var(--ink-dim) }
.lbnick b{ color:var(--ink) }
.lblist{ display:flex; flex-direction:column; gap:6px; margin-top:14px }
.lbrow{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line) }
.lbrow.mine{ border-color:color-mix(in srgb, var(--cyan) 40%, var(--line)); background:color-mix(in srgb, var(--cyan) 6%, var(--panel-2)) }
.lbrank{ width:34px; flex:none; font-family:var(--font-display); color:var(--ink-faint); font-size:13px }
.lbname{ flex:1; font-size:13.5px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
/* Eigene Spalte, feste Breite — steht bei jeder Zeile an derselben Stelle,
   unabhängig davon, ob/wie lang der Nickname links davon ist. Ohne Nickname
   bleibt .lbname leer, hier steht dann trotzdem dieselbe Adresse wie sonst
   überall (keine doppelte Anzeige). */
.lbaddr{ width:104px; flex:none; text-align:right; font-size:11px; color:var(--ink-faint);
  font-weight:400; font-variant-numeric:tabular-nums }
.lbpts{ font-family:var(--font-display); font-weight:700; color:var(--lime); font-size:13.5px }

/* ========================================================== Seitenleiste === */
.sblk{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:12px; overflow:hidden }
.sblk:last-child{ margin-bottom:0 }
.sblk.t-lime{ border-color:color-mix(in srgb,var(--lime) 24%,var(--line)) }
.sblk.t-cyan{ border-color:color-mix(in srgb,var(--cyan) 24%,var(--line)) }
.sblkhead{ display:flex; align-items:center; gap:8px; padding:5px 12px 5px 4px;
  border-bottom:1px solid var(--line) }
.sblktoggle{ flex:1; display:flex; align-items:center; gap:10px; padding:9px 12px;
  text-align:left; border-radius:var(--r-sm) }
.sblktoggle:hover{ background:var(--panel-2) }
.sblk.off .sblkhead{ border-bottom-color:transparent }
.sblktitle{ flex:1; font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint) }
.sblk.t-lime .sblktitle{ color:var(--lime) }
.sblk.t-cyan .sblktitle{ color:var(--cyan) }
.sblkbadge{ font-family:var(--font-display); font-size:12px; color:var(--lime) }
.sblkchev{ color:var(--ink-faint); font-size:12px; transition:transform .2s var(--ease) }
.sblk.off .sblkchev{ transform:rotate(-90deg) }
.sblkbody{ padding:16px }
.sblk.off .sblkbody{ display:none }

/* ============================================================== Kurs === */
.mkttop{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:12px }
.mktprice{ font-family:var(--font-display); font-weight:700; font-size:26px; color:var(--ink) }
.mktchg{ font-size:12px; font-weight:600 }
.mktchg em{ font-style:normal; color:var(--ink-faint); font-weight:400; margin-left:3px }
.mktchg.up{ color:var(--lime) } .mktchg.down{ color:var(--red) }
.mktchart{ height:88px; margin-bottom:11px }
.spark{ width:100%; height:88px; display:block }
.mktfail{ display:grid; place-items:center; font-size:12.5px;
  color:var(--ink-faint); text-align:center; height:auto; padding:14px 0 }
.mktrange{ display:flex; gap:4px; padding:3px; border-radius:999px;
  background:var(--panel-2); border:1px solid var(--line) }
.mktrange button{ flex:1; padding:6px 0; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--ink-faint) }
.mktrange button[aria-pressed="true"]{ background:var(--lime); color:#04140a }
/* .multi-Variante: jede Pille bekommt ihre eigene Farbe statt einer einzigen
   für die ganze Leiste — im Leaderboard dieselben Farben wie die Spiel-
   Kacheln in der Arena (GAMES[].accent), per --pill inline gesetzt. */
.mktrange.multi button[aria-pressed="true"]{ background:var(--pill, var(--cyan)); color:#04140a }
.mktcap{ display:flex; justify-content:space-between; gap:10px; margin-top:12px; padding-top:11px;
  border-top:1px solid var(--line-soft); font-size:12.5px; color:var(--ink-faint) }
.mktcap b{ font-family:var(--font-display); color:var(--ink) }


/* ============================================ Erklärungen und Tooltips === */
.infobtn{ width:19px; height:19px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:11px; font-weight:700; line-height:1; color:var(--ink-faint);
  border:1px solid var(--line); background:var(--panel-2);
  transition:color .15s var(--ease), border-color .15s var(--ease) }
.infobtn:hover{ color:var(--cyan); border-color:var(--cyan) }

.helppop{ position:fixed; z-index:60; animation:popin .16s var(--ease) }
@keyframes popin{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
.hpin{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px; max-height:min(64vh, 460px); overflow-y:auto }
.hphead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:9px }
.hpgroup{ font-family:var(--font-display); font-size:9.5px; font-weight:700; letter-spacing:.15em;
  text-transform:uppercase; color:var(--cyan) }
.hpclose{ color:var(--ink-faint); font-size:13px }
.hpclose:hover{ color:var(--ink) }
.hpin h4{ font-family:var(--font-display); font-size:15px; margin:0 0 10px; line-height:1.35 }
.hpbody p{ font-size:13.5px; line-height:1.7; color:var(--ink); opacity:.78; margin:0 0 10px }
.hpbody p:last-child{ margin-bottom:0 }
.hpbody ul{ margin:0 0 10px; padding-left:18px; font-size:13.5px; line-height:1.8;
  color:var(--ink); opacity:.78 }
.hpbody b{ color:var(--ink); opacity:1 }
.hpbody .hlptable{ font-size:12.5px }
.hpmore{ width:100%; margin-top:12px }


/* ======================================================== Das Universum === */
.universe{ border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--panel-2); margin-bottom:16px }
.uhead{ display:flex; align-items:flex-start; gap:16px; padding:22px 24px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(100deg, color-mix(in srgb,var(--cyan) 10%,transparent), transparent 62%) }
.umark{ width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:.05em;
  color:#00121a; background:linear-gradient(150deg,var(--cyan),#0f9fd0);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--cyan) 40%,transparent) }
.uhead h3{ font-size:20px; margin:0 0 5px }
.uhead p{ font-size:14px; line-height:1.65; color:var(--ink); opacity:.72; margin:0; max-width:56ch }

.ubranch{ display:grid; grid-template-columns:repeat(3,1fr); gap:0 }
@media (max-width:820px){ .ubranch{ grid-template-columns:1fr } }
.ub{ position:relative; padding:20px 22px 22px }
.ub + .ub{ border-left:1px solid var(--line) }
@media (max-width:820px){ .ub + .ub{ border-left:0; border-top:1px solid var(--line) } }
/* Verbindungslinie nach oben zum Dach */
.ub::before{ content:''; position:absolute; left:22px; top:0; width:2px; height:12px;
  background:var(--cyan); opacity:.5 }
.ub.soon::before{ background:var(--ink-faint) }
.ubtag{ display:inline-block; font-family:var(--font-display); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:999px; padding:3px 9px; margin:6px 0 10px }
.ub.live .ubtag{ color:var(--cyan); border-color:color-mix(in srgb,var(--cyan) 35%,transparent) }
.ub b{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:7px }
.ub p{ font-size:13.5px; line-height:1.65; color:var(--ink); opacity:.7; margin:0 0 12px }
.ub a, .ub button{ font-family:var(--font-display); font-size:13px; font-weight:600;
  color:var(--cyan); text-decoration:none; padding:0 }
.ub a:hover, .ub button:hover{ text-decoration:underline; text-underline-offset:3px }
.ubsoon{ font-family:var(--font-display); font-size:13px; color:var(--ink-faint) }
.ub.soon{ opacity:.78 }

/* Marken-Baum in der Fußzeile */
.fctree{ list-style:none; margin:14px 0 0; padding:0; border-left:2px solid var(--line);
  padding-left:14px }
.fctree li{ padding:5px 0; font-size:12.5px }
.fctree b{ font-family:var(--font-display); color:var(--ink-dim); margin-right:8px }
.fctree span{ color:var(--ink-faint); font-size:11.5px }
.fctree li.dim{ opacity:.6 }
.ftags{ font-family:var(--font-display); letter-spacing:.04em; color:var(--ink-faint) }

/* Brotkrume in der Kopfzeile */
.crumb{ color:var(--ink-faint) }

/* ===========================================================================
 * UI-Überarbeitung — Buttons, Hilfe, Vorschau, Seitenhintergrund.
 * Bewusst ans Ende gehängt: überschreibt gezielt, ohne bestehende Regeln
 * anzufassen. Wer etwas zurücknehmen will, löscht hier einen Block.
 * ======================================================================== */

/* ---------------------------------------------------- Seitenhintergrund ---
   Wie bei planetetn: ein Bild am unteren Rand, das nach oben ausblendet.
   Der Inhalt bleibt dabei vollständig lesbar — deshalb die weiche Maske
   und der dunkle Verlauf darüber. */
body::before{
  content:''; position:fixed; inset:auto 0 0 0; height:min(62vh, 760px);
  z-index:-2; pointer-events:none;
  background:url('../assets/bg-horizon.jpg') center bottom / cover no-repeat;
  opacity:.50;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 42%, #000 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 42%, #000 100%);
}
body::after{
  content:''; position:fixed; inset:auto 0 0 0; height:min(62vh, 760px);
  z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 0%, transparent),
    color-mix(in srgb, var(--bg) 62%, transparent) 55%,
    color-mix(in srgb, var(--bg) 86%, transparent));
}
:root[data-theme="light"] body::before{ opacity:.20 }

/* Der Inhalt muss über dem Bild liegen. ACHTUNG: die Kopfzeile hat ihren
   eigenen Stapelwert (30) — den hier nicht überschreiben, sonst rutscht das
   Wallet-Menü unter die Kacheln der Seitenleiste. */
.shell{ position:relative; z-index:1 }
.topbar{ position:sticky; z-index:60 }
.walletmenu{ z-index:70 }

/* ============================================================= Buttons ===
   Vorher gab es KEINE Grundregel für .btn — die Schaltflächen waren nackter
   Text. Jetzt drei klar unterscheidbare Stufen: primär, sekundär, still. */
.btn{
  --btn-bg:var(--panel-2);
  --btn-line:var(--line);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 18px; min-height:42px;
  font-family:var(--font-display); font-size:13.5px; font-weight:600; letter-spacing:.02em;
  color:var(--ink); text-decoration:none; white-space:nowrap;
  background:var(--btn-bg);
  border:1px solid var(--btn-line);
  border-radius:var(--r-sm);
  cursor:pointer;
  transition:background .16s var(--ease), border-color .16s var(--ease),
             transform .12s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}
.btn:hover{
  --btn-bg:color-mix(in srgb, var(--cyan) 10%, var(--panel-2));
  --btn-line:color-mix(in srgb, var(--cyan) 55%, var(--line));
  transform:translateY(-1px);
}
.btn:active{ transform:translateY(0) scale(.985) }
.btn:disabled, .btn[aria-disabled="true"]{
  opacity:.42; cursor:not-allowed; transform:none; --btn-line:var(--line);
}

/* Primär: die eine Handlung, die auf dieser Seite zählt. Höchstens eine je Block. */
.btn.primary{
  color:#00121a; border-color:transparent;
  background:linear-gradient(145deg, var(--cyan) 0%, #12b6e6 55%, #0f9fd0 100%);
  box-shadow:0 6px 20px -8px color-mix(in srgb, var(--cyan) 85%, transparent),
             inset 0 1px 0 rgba(255,255,255,.28);
}
.btn.primary:hover{
  background:linear-gradient(145deg, #4ff0ff 0%, var(--cyan) 55%, #12b6e6 100%);
  box-shadow:0 10px 26px -8px color-mix(in srgb, var(--cyan) 95%, transparent),
             inset 0 1px 0 rgba(255,255,255,.34);
}
:root[data-theme="light"] .btn.primary{ color:#ffffff }

/* Zweite Stufe: sichtbar, aber ohne Anspruch auf die Aufmerksamkeit */
.btn.accent{
  color:#1a0016; border-color:transparent;
  background:linear-gradient(145deg, var(--magenta) 0%, #d425ae 100%);
  box-shadow:0 6px 20px -9px color-mix(in srgb, var(--magenta) 85%, transparent);
}
.btn.ghost{ --btn-bg:transparent; --btn-line:var(--line) }

/* Gleichrangig zu .primary, aber ohne dessen Leuchten. Für Gruppen aus
   mehreren gleichwertigen Zielen — drei „ghost"-Knöpfe nebeneinander
   verschwinden auf dunklem Grund. */
.btn.soft{
  color:var(--ink); border-color:transparent;
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--cyan) 22%, var(--panel-2)) 0%,
    color-mix(in srgb, var(--cyan) 12%, var(--panel-2)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),
             0 0 0 1px color-mix(in srgb, var(--cyan) 34%, transparent);
}
.btn.soft:hover{
  background:linear-gradient(145deg,
    color-mix(in srgb, var(--cyan) 34%, var(--panel-2)) 0%,
    color-mix(in srgb, var(--cyan) 20%, var(--panel-2)) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),
             0 0 0 1px color-mix(in srgb, var(--cyan) 58%, transparent);
}
.btn.ghost:hover{ --btn-bg:color-mix(in srgb, var(--cyan) 8%, transparent) }
.btn.sm{ padding:8px 13px; min-height:36px; font-size:12.5px }
.btn.wide{ width:100% }

/* Sichtbarer Tastaturfokus auf allem, was man bedienen kann */
.btn:focus-visible, .iconbtn:focus-visible, .pill:focus-visible, .tab:focus-visible,
.hnav:focus-visible, .hq:focus-visible, .pick:focus-visible, .pcard:focus-visible,
select:focus-visible, input:focus-visible{
  outline:2px solid var(--cyan); outline-offset:3px;
}

/* Icon-Schaltflächen bekommen dieselbe Rückmeldung */
.iconbtn{ transition:border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease) }
.iconbtn:hover{ background:color-mix(in srgb, var(--cyan) 10%, var(--panel-2)); transform:translateY(-1px) }
.iconbtn:active{ transform:translateY(0) scale(.94) }

/* ======================================================== Hilfe & Infos ===
   Vorher sahen Kategorie, Frage und Antwort fast gleich aus. Jetzt hat jede
   Ebene ein eigenes Gewicht: Kategorie = Kachel, Frage = Zeile mit Nummer,
   Antwort = abgesetzte Fläche mit farbiger Kante. */
.helpnav{ gap:11px; margin-bottom:24px }
.hnav{
  position:relative; padding:15px 16px 14px; border:1px solid var(--line);
  background:var(--panel-2); border-radius:var(--r);
  transition:border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease);
}
.hnav::after{
  content:''; position:absolute; left:16px; right:16px; bottom:0; height:2px;
  background:var(--cyan); border-radius:2px 2px 0 0;
  transform:scaleX(0); transform-origin:left; transition:transform .2s var(--ease);
}
.hnav:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--cyan) 45%,var(--line)) }
.hnav[aria-pressed="true"]{
  background:color-mix(in srgb, var(--cyan) 11%, var(--panel-2));
  border-color:color-mix(in srgb, var(--cyan) 62%, transparent);
}
.hnav[aria-pressed="true"]::after{ transform:scaleX(1) }
.hnav[aria-pressed="true"] b{ color:var(--cyan) }
.hnav b{ font-size:14.5px }
.hnav em{ font-size:11px; letter-spacing:.08em; text-transform:uppercase }

.helpintro{
  font-size:14px; opacity:1; color:var(--ink-dim);
  border-left:2px solid color-mix(in srgb,var(--cyan) 45%,transparent);
  padding:2px 0 2px 14px; margin:0 0 18px;
}

.helplist{ border:0; border-radius:0; overflow:visible; counter-reset:hq }
.hitem{
  counter-increment:hq;
  border:1px solid var(--line); border-radius:var(--r); background:var(--panel);
  margin-bottom:10px; overflow:hidden;
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.hitem + .hitem{ border-top:1px solid var(--line) }
.hq{ padding:16px 18px; font-family:var(--font-display); font-size:15px; font-weight:600; line-height:1.4 }
.hq > span:first-child{ display:flex; align-items:baseline; gap:11px }
.hq > span:first-child::before{
  content:counter(hq, decimal-leading-zero);
  font-size:11px; letter-spacing:.1em; color:var(--ink-faint);
  font-variant-numeric:tabular-nums; flex:none;
}
.hchev{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--panel-2); font-size:11px;
}
.hitem.open{
  border-color:color-mix(in srgb,var(--cyan) 55%,transparent);
  box-shadow:0 10px 30px -18px color-mix(in srgb,var(--cyan) 90%,transparent);
}
.hitem.open .hq{ color:var(--cyan) }
.hitem.open .hq > span:first-child::before{ color:var(--cyan) }
.hitem.open .hchev{ border-color:var(--cyan); background:color-mix(in srgb,var(--cyan) 14%,transparent) }
.ha{
  padding:4px 18px 20px 42px; background:var(--panel-2);
  border-top:1px solid var(--line-soft);
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--cyan) 55%,transparent);
}
.ha p, .ha ul{ opacity:1; color:var(--ink-dim) }
.ha b{ color:var(--ink) }
@media (max-width:560px){ .ha{ padding-left:18px } }

.helpfoot{ border:1px solid var(--line); background:var(--panel-2) }

/* ==================================================== Spielervorschau ===
   Das NFT wird in seinem eigenen Seitenverhältnis gezeigt — nichts wird
   beschnitten, nichts verschoben. Ein fester Rahmen mit erzwungenem
   Zuschnitt trifft bei 220 unterschiedlichen Motiven immer irgendjemanden
   falsch; die einzige Darstellung, die bei allen stimmt, ist die ganze. */
[data-blk="detail"] .hero{
  display:block; margin-bottom:18px;
  border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel-2);
}
[data-blk="detail"] .hero img{
  display:block; width:100%; height:auto;
  aspect-ratio:auto;                 /* natürliches Verhältnis des Bildes */
  object-fit:contain; object-position:center;
  border-radius:0; flex:none;
  background:radial-gradient(120% 90% at 50% 25%, #101c38, #05080f);
}
/* Beschriftung: eigene Fläche, großzügig, klare Rangfolge */
[data-blk="detail"] .hero > div{
  padding:15px 17px 16px;
  background:var(--panel-2);
  border-top:1px solid var(--line);
}
[data-blk="detail"] .hero .n{ font-size:23px; line-height:1.1; margin-bottom:5px }
[data-blk="detail"] .hero .t{ font-size:14px; color:var(--ink); opacity:.86; margin-bottom:7px }
[data-blk="detail"] .hero .p{ margin-top:0; font-size:10.5px; letter-spacing:.14em;
  display:inline-block; padding:4px 10px; border-radius:999px;
  color:var(--cyan);
  background:color-mix(in srgb, var(--cyan) 13%, transparent);
  border:1px solid color-mix(in srgb, var(--cyan) 35%, transparent) }
@media (max-width:920px){
  [data-blk="detail"] .hero{ display:flex; gap:0; align-items:stretch }
  [data-blk="detail"] .hero img{ width:132px; align-self:flex-start }
  [data-blk="detail"] .hero > div{ flex:1; border-top:0; border-left:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:center }
}

/* ================================================= Logo und Creator-Bild ===
   Das Logo hat einen transparenten Rand — auf dem cyanfarbenen Verlauf ging
   der dunkle Schild darin unter. Deshalb weiße Fläche darunter. */
.brandmark, .umark, .mmark{
  background:none !important;
  box-shadow:none; border:0; overflow:visible;
  /* Der Schild bringt seinen eigenen Rand und sein eigenes Leuchten mit.
     Eine weiße Kachel darunter macht daraus einen Aufkleber. */
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--cyan) 45%, transparent))
         drop-shadow(0 4px 10px rgba(0,0,0,.55));
}
.brandmark, .umark, .mmark{ display:grid; place-items:center }
.brandmark img, .umark img, .mmark img{
  width:100%; height:100%; object-fit:contain; object-position:center;
  display:block; padding:0; margin:0 auto;
}
.brandmark{ width:56px; height:56px; border-radius:0 }
.brandmark.sm{ width:52px; height:52px; border-radius:0; margin-bottom:14px }
.umark{ width:66px; height:66px; border-radius:0 }
.mmark{ width:44px; height:44px; border-radius:0 }
@media (max-width:560px){ .brandmark{ width:44px; height:44px } }

/* Creator: das Bild darf Platz einnehmen — die Leute sollen wissen, wer das baut. */
.creator .cr > div:last-child{ min-width:0 }
.creator h3{ margin-bottom:10px !important }

/* ================================================= Kopfzeile lesbarer ===
   „SEASON 1 · FOOTBALL", die Reiter und das Kurskürzel standen auf
   --ink-faint. Auf dunklem Grund mit Bildhintergrund darunter war das zu
   schwach. Jetzt türkis für alles, was Orientierung gibt. */
.brandsub{ color:color-mix(in srgb, var(--cyan) 78%, var(--ink)); opacity:.95;
  font-weight:600; letter-spacing:.18em }
.tab{ color:var(--ink-dim); font-weight:600 }
.tab:hover{ color:var(--ink) }
.tab[aria-current="page"], .tab.on, .tab.active{ color:var(--cyan) }
.tab .count{ color:var(--cyan); background:color-mix(in srgb,var(--cyan) 14%,transparent);
  border-radius:999px; padding:1px 7px; font-weight:600 }
.tsym{ color:color-mix(in srgb, var(--cyan) 80%, var(--ink)) }
.topbar{ background:color-mix(in srgb, var(--bg) 92%, transparent) }

/* ==================================================== Fußzeile in Türkis ===
   Eigene Fläche mit türkisfarbener Oberkante, damit der Abschluss der Seite
   sichtbar ist statt einfach auszulaufen. */
.foot{
  margin-top:56px; padding:34px 26px 22px;
  border-top:0; border-radius:var(--r-lg) var(--r-lg) 0 0;
  position:relative;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 8%, var(--panel)) 0%,
    color-mix(in srgb, var(--bg) 92%, var(--panel)) 100%);
  box-shadow:inset 0 1px 0 color-mix(in srgb, var(--cyan) 30%, transparent);
}
.foot::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--cyan) 18%, var(--magenta) 82%, transparent);
  box-shadow:0 0 14px color-mix(in srgb, var(--cyan) 60%, transparent);
}
.footcols h4{ color:var(--cyan); opacity:1 }
.footcols a{ color:var(--ink-dim) }
.footcols a:hover{ color:var(--cyan); text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 55%,transparent) }
.footcols p{ color:var(--ink-dim) }
.fctree{ border-left-color:color-mix(in srgb, var(--cyan) 45%, transparent) }
.fctree b{ color:var(--ink) }
.footbar{ border-top:1px solid color-mix(in srgb, var(--cyan) 18%, var(--line));
  color:var(--ink-faint) }
.ftags{ color:color-mix(in srgb, var(--cyan) 70%, var(--ink-faint)) }
.fcbrand h4{ font-size:13px !important }

/* ================================================== Creator, ausführlich ===
   Der Bereich darf Platz einnehmen — er beantwortet die Frage, wer dahinter
   steht, und das entscheidet bei einem NFT-Projekt mit. */
.creator{ margin-top:20px }
.creator .cr{ gap:34px; align-items:stretch }
.crpic{ width:300px; height:auto; aspect-ratio:593/813; flex:none;
  border-radius:var(--r-lg); overflow:hidden }
.crpic img{ object-position:center 12% }
.creator h3{ font-size:30px }
.creator p{ font-size:15.5px; line-height:1.82; max-width:64ch; margin:0 0 13px }
.creator p:last-child{ margin-bottom:0 }
.crrole{ display:inline-block; font-family:var(--font-display); font-size:10.5px;
  font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--magenta);
  border:1px solid color-mix(in srgb,var(--magenta) 40%,transparent);
  background:color-mix(in srgb,var(--magenta) 12%,transparent);
  border-radius:999px; padding:5px 12px; margin-bottom:12px }
.crfacts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:10px; margin-top:20px; list-style:none; padding:0 }
.crfacts li{ padding:12px 13px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line) }
.crfacts b{ display:block; font-family:var(--font-display); font-size:17px; color:var(--cyan) }
.crfacts span{ font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em }
.crlinks{ display:flex; gap:9px; flex-wrap:wrap; margin-top:18px }
@media (max-width:820px){
  .creator .cr{ flex-direction:column; gap:20px }
  .crpic{ width:100%; max-width:320px }
}

/* ================================================= Nebenkurse BTC / ETH ===
   Eigene Farbe je Münze und dunklere Fläche — vorher standen zwei graue
   Kästchen nebeneinander und man las sie schlicht nicht. */
.mktside{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px;
  padding-top:16px; border-top:1px solid var(--line) }
.msc{
  position:relative; display:flex; flex-direction:column; gap:3px;
  padding:12px 13px 12px 15px; border-radius:var(--r-sm);
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--coin) 12%, var(--panel-2)) 0%,
    color-mix(in srgb, var(--bg) 55%, var(--panel-2)) 100%);
  border:1px solid color-mix(in srgb, var(--coin) 32%, var(--line));
  overflow:hidden;
}
.msc::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--coin);
  box-shadow:0 0 12px color-mix(in srgb, var(--coin) 75%, transparent);
}
.msc[data-coin="BTC"]{ --coin:#f7931a }
.msc[data-coin="ETH"]{ --coin:#8f9eff }
.mscs{ font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.16em; color:var(--coin) }
.msc b{ font-family:var(--font-display); font-size:16.5px; line-height:1.15;
  font-variant-numeric:tabular-nums; color:var(--ink) }
.msc em{ font-style:normal; font-size:11.5px; font-weight:700 }
.msc em.up{ color:var(--lime) } .msc em.down{ color:var(--red) }

/* ==================================================== NFT-Galerie ===
   Sechs Kacheln, alle fünf Sekunden tauscht genau eine ihren Spieler.
   Das zeigt die Bandbreite der Kollektion, ohne zu flackern. */
.nftshow{ margin:16px 0 }
.nshead{ display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:10px; flex-wrap:wrap }
.nshead .eyebrow{ margin-bottom:0 }
.nstile{
  position:relative; padding:0; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; aspect-ratio:1/1; background:#070b16; cursor:pointer;
  transition:transform .18s var(--ease), border-color .18s var(--ease),
             box-shadow .18s var(--ease);
}
.nstile img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .26s var(--ease), transform .5s var(--ease) }
.nstile:hover{ transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--cyan) 60%,var(--line));
  box-shadow:0 14px 30px -18px color-mix(in srgb,var(--cyan) 90%,transparent) }
.nsid{
  position:absolute; left:7px; bottom:7px;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  padding:3px 7px; border-radius:999px;
  color:var(--ink); background:rgba(4,8,18,.72);
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
  backdrop-filter:blur(4px);
}

/* ================================================== Fortschritt Kollektion ===
   Vorher hatte dieser Block überhaupt kein CSS — daher „1Spieler 1von 20
   Teams begonnen 0komplett" ohne Abstände. Jetzt drei klare Ebenen:
   Ziel, Zahlen, Teamleiste. */
.progbox{
  margin:0 0 18px; padding:18px 18px 16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 6%, var(--panel)) 0%, var(--panel) 100%);
}
.proghead{ display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px }
.proglbl{ font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; padding-top:4px }
.proglbl .infobtn{ margin-left:6px; vertical-align:middle }
.proggoal{ text-align:right; min-width:0 }
.proggoal b{ display:block; font-family:var(--font-display); font-size:17px;
  color:var(--cyan); line-height:1.25 }
.proggoal em{ display:block; font-style:normal; font-size:12.5px;
  color:var(--ink-dim); margin-top:3px }

.progstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px }
.progstats > div{ padding:11px 13px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line) }
.progstats b{ display:block; font-family:var(--font-display); font-size:22px;
  line-height:1.1; font-variant-numeric:tabular-nums }
.progstats b i{ font-style:normal; font-size:13px; color:var(--ink-faint) }
.progstats span{ display:block; font-size:11px; color:var(--ink-faint); margin-top:3px;
  letter-spacing:.04em }

.teamgrid{ display:grid; grid-template-columns:repeat(20,1fr); gap:4px; height:34px }
.tcell{ position:relative; display:block; border-radius:3px; overflow:hidden;
  background:var(--line-soft); border:1px solid var(--line);
  transition:transform .15s var(--ease) }
.tcell:hover{ transform:translateY(-2px) }
.tcell i{ position:absolute; left:0; right:0; bottom:0; display:block;
  background:var(--team); opacity:.85 }
.tcell.part{ border-color:color-mix(in srgb, var(--team) 55%, transparent) }
.tcell.full{ border-color:var(--lime);
  box-shadow:0 0 10px -2px color-mix(in srgb, var(--lime) 80%, transparent) }
@media (max-width:640px){
  .progstats{ grid-template-columns:1fr 1fr }
  .proggoal{ text-align:left }
  .teamgrid{ grid-template-columns:repeat(10,1fr); height:auto; grid-auto-rows:26px }
}

/* ============================================= Seitenleiste sortierbar ===
   Ziehen am Griff, Reihenfolge bleibt im Browser gespeichert. */
.sblkhead{ display:flex; align-items:center; gap:8px }
.sblkgrip{
  flex:none; cursor:grab; user-select:none;
  color:var(--ink-faint); font-size:14px; line-height:1; padding:2px 2px;
  border-radius:5px; transition:color .15s var(--ease), background .15s var(--ease);
}
.sblkgrip:active{ cursor:grabbing }
.sblk:hover .sblkgrip{ color:var(--cyan); background:color-mix(in srgb,var(--cyan) 12%,transparent) }
.sblk{ transition:opacity .15s var(--ease), box-shadow .15s var(--ease),
                  border-color .15s var(--ease) }
.sblk.dragging{ opacity:.45 }
.sblk.dropover{
  border-color:var(--cyan);
  box-shadow:0 0 0 1px var(--cyan), 0 12px 32px -18px color-mix(in srgb,var(--cyan) 90%,transparent);
}
.sidehint{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:4px 0 0; padding:11px 13px; border-radius:var(--r-sm);
  font-size:12.5px; color:var(--ink-dim);
  background:color-mix(in srgb,var(--cyan) 7%,var(--panel-2));
  border:1px dashed color-mix(in srgb,var(--cyan) 35%,var(--line));
}
.sidehint b{ color:var(--cyan) }
.sidehintx{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--cyan);
  border:1px solid color-mix(in srgb,var(--cyan) 40%,transparent);
  border-radius:999px; padding:4px 11px; background:transparent }
.sidehintx:hover{ background:color-mix(in srgb,var(--cyan) 14%,transparent) }

/* =============================================== Helles Design nachziehen ===
   Mit dem Hintergrundbild braucht das helle Design eigene Werte: das Bild
   darf durchscheinen, aber die Flächen müssen ruhig und grau bleiben. */
:root[data-theme="light"] body::before{ opacity:.30 }
:root[data-theme="light"] body::after{
  background:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg) 10%, transparent),
    color-mix(in srgb, var(--bg) 70%, transparent) 50%,
    color-mix(in srgb, var(--bg) 92%, transparent));
}
:root[data-theme="light"] .topbar{
  background:color-mix(in srgb, var(--panel) 90%, transparent);
  border-bottom-color:var(--line);
}
:root[data-theme="light"] .foot{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--cyan) 7%, var(--panel)) 0%,
    color-mix(in srgb, var(--bg) 88%, var(--panel)) 100%);
}
:root[data-theme="light"] .brandmark,
:root[data-theme="light"] .umark,
:root[data-theme="light"] .mmark{
  /* Auf hellem Grund wirkt der Neonschein wie ein Fleck — dezenter Schatten */
  filter:drop-shadow(0 3px 8px rgba(20,30,60,.28));
}
:root[data-theme="light"] [data-blk="detail"] .hero img{
  background:radial-gradient(120% 90% at 50% 25%, #cfd6e4, #b9c1d2);
}
:root[data-theme="light"] .msc b{ color:var(--ink) }
:root[data-theme="light"] .nsid{ background:rgba(240,243,250,.86); color:var(--ink) }

/* ==================================================== Schussbild klarer ===
   Vorher: ein Kasten mit Punkten und ohne Erklärung. Jetzt mit Torform,
   angedeutetem Netz und einer Legende, die die Punkte benennt. */
.heat{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft) }
.hlbl{ display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:9px }
.hlbl b{ font-family:var(--font-display); font-size:12px; letter-spacing:.02em;
  text-transform:none; color:var(--cyan) }
.hbox{ position:relative; width:100%; max-width:190px; aspect-ratio:190/80;
  height:auto; margin:0 auto;
  background:linear-gradient(180deg, rgba(10,18,38,.85), rgba(6,11,24,.85));
  border-radius:3px }
.hbox .frame{ position:absolute; inset:0; border:2px solid rgba(190,215,255,.55);
  border-bottom:0; border-radius:3px 3px 0 0 }
/* Netzraster — macht sofort klar, dass das ein Tor ist */
.hbox .hnet{ position:absolute; inset:2px 2px 0 2px; opacity:.32;
  background-image:
    repeating-linear-gradient(90deg, rgba(190,215,255,.5) 0 1px, transparent 1px 11px),
    repeating-linear-gradient(0deg,  rgba(190,215,255,.5) 0 1px, transparent 1px 11px) }
.hbox i{ position:absolute; width:8px; height:8px; border-radius:50%;
  transform:translate(-4px,-4px); box-shadow:0 0 8px currentColor }
.hbox i.g{ background:var(--lime); color:var(--lime) }
.hbox i.s{ background:var(--red);  color:var(--red) }
.hbox i.m{ background:var(--gold); color:var(--gold) }
.hleg{ display:flex; justify-content:center; gap:14px; margin-top:10px;
  font-size:11px; color:var(--ink-dim) }
.hleg span{ display:flex; align-items:center; gap:5px }
.hleg i{ width:8px; height:8px; border-radius:50%; display:inline-block }
.hleg i.g{ background:var(--lime) } .hleg i.s{ background:var(--red) }
.hleg i.m{ background:var(--gold) }

/* Wallet-Menü: der Abmelden-Eintrag muss als solcher erkennbar sein */
.wmitem.danger{ margin-top:4px; border-top:1px solid var(--line-soft);
  padding-top:12px; color:var(--red); font-weight:600 }
.wmitem.danger:hover{ background:color-mix(in srgb,var(--red) 12%,transparent) }

/* ============================================ Elfmeterwerte und Ausdauer ===
   Vorher ein Fließtext mit fettgedruckten Zahlen und einem verlorenen
   Fragezeichen. Jetzt drei Werte als Raster und die Ausdauer als das, was
   sie ist: ein Balken mit Folge fürs Spiel. */
.pen{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:inherit; color:inherit; line-height:inherit }
.penlbl{ font-family:var(--font-display); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:10px }
.pengrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.pengrid > div{ padding:10px 8px; border-radius:var(--r-sm); text-align:center;
  background:var(--panel-2); border:1px solid var(--line) }
.pengrid b{ display:block; font-family:var(--font-display); font-size:20px;
  line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums }
.pengrid span{ display:block; font-size:10.5px; color:var(--ink-faint);
  letter-spacing:.06em; margin-top:3px }

.stam{ margin-top:12px; padding:11px 12px 10px; border-radius:var(--r-sm);
  background:var(--panel-2); border:1px solid var(--line) }
.stamtop{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint) }
.stamtop b{ font-family:var(--font-display); font-size:15px; letter-spacing:0;
  text-transform:none; font-variant-numeric:tabular-nums; color:var(--stamc) }
.stamtop .infobtn{ margin-left:5px; vertical-align:middle }
.stambar{ height:6px; border-radius:4px; background:var(--line-soft);
  overflow:hidden; margin:8px 0 7px }
.stambar i{ display:block; height:100%; border-radius:4px; background:var(--stamc);
  transition:width .3s var(--ease) }
.stam em{ display:block; font-style:normal; font-size:11.5px; line-height:1.5;
  color:var(--ink-dim) }
.stam.ok{  --stamc:var(--lime) }
.stam.mid{ --stamc:var(--gold) }
.stam.low{ --stamc:var(--red);
  border-color:color-mix(in srgb, var(--red) 32%, var(--line));
  background:color-mix(in srgb, var(--red) 8%, var(--panel-2)) }

/* ====================================================== Hero, neu gebaut ===
   Vorher: linksbündiger Text auf leerer Fläche, der Aufruf zum Kauf ging
   optisch unter. Jetzt zwei Spalten — links die Aussage, rechts drei echte
   Karten aus der Kollektion. Der Kauf-Button hat eigenes Gewicht. */
.hero{ position:relative; isolation:isolate; overflow:hidden }
.heroglow{
  position:absolute; inset:-40% -10% auto -10%; height:170%; z-index:-1;
  background:
    radial-gradient(46% 60% at 78% 22%, color-mix(in srgb,var(--magenta) 34%,transparent), transparent 70%),
    radial-gradient(46% 60% at 14% 78%, color-mix(in srgb,var(--cyan) 30%,transparent), transparent 70%);
  filter:blur(14px);
  animation:heroDrift 18s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  0%{ transform:translate3d(0,0,0) scale(1) }
  100%{ transform:translate3d(-3%,2%,0) scale(1.07) }
}
/* Feines Raster darüber — gibt Tiefe, ohne laut zu sein */
.hero::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(90deg, color-mix(in srgb,var(--cyan) 9%,transparent) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg,  color-mix(in srgb,var(--cyan) 7%,transparent) 0 1px, transparent 1px 46px);
  -webkit-mask-image:radial-gradient(80% 70% at 30% 40%, #000, transparent 78%);
          mask-image:radial-gradient(80% 70% at 30% 40%, #000, transparent 78%);
}
.hero-in{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:32px; align-items:center; padding:44px 38px 38px }
.hero-text{ min-width:0 }
.hero p{ font-size:17.5px; max-width:44ch; margin-bottom:24px }

.btn.lg{ padding:15px 26px; min-height:52px; font-size:15px }
.btn.primary.lg{
  box-shadow:0 10px 30px -10px color-mix(in srgb, var(--cyan) 95%, transparent),
             inset 0 1px 0 rgba(255,255,255,.32);
  animation:ctaPulse 3.4s var(--ease) infinite;
}
@keyframes ctaPulse{
  0%,100%{ box-shadow:0 10px 30px -10px color-mix(in srgb,var(--cyan) 95%,transparent),
                      inset 0 1px 0 rgba(255,255,255,.32) }
  50%{     box-shadow:0 14px 40px -10px color-mix(in srgb,var(--cyan) 100%,transparent),
                      0 0 0 4px color-mix(in srgb,var(--cyan) 16%,transparent),
                      inset 0 1px 0 rgba(255,255,255,.32) }
}
.btn.primary.lg span{ transition:transform .18s var(--ease); display:inline-block }
.btn.primary.lg:hover span{ transform:translateX(4px) }

.herofacts{ display:flex; gap:26px; flex-wrap:wrap; list-style:none; padding:0;
  margin:26px 0 0; border-top:1px solid color-mix(in srgb,var(--cyan) 18%,var(--line));
  padding-top:18px }
.herofacts b{ display:block; font-family:var(--font-display); font-size:22px;
  line-height:1.1; color:var(--cyan); font-variant-numeric:tabular-nums }
.herofacts span{ font-size:11.5px; color:var(--ink-dim); letter-spacing:.04em }

/* Drei Karten, gefächert und leicht schwebend */
.herocards{ position:relative; height:270px; min-width:0 }
.hcard{
  position:absolute; top:50%; width:150px; aspect-ratio:3/4;
  border-radius:var(--r); overflow:hidden;
  border:1px solid color-mix(in srgb,var(--cyan) 30%,var(--line));
  background:#070b16;
  box-shadow:0 24px 50px -22px rgba(0,0,0,.9);
  transition:transform .35s var(--ease);
}
.hcard img{ width:100%; height:100%; object-fit:cover; display:block }
.hcard em{
  position:absolute; left:8px; bottom:8px; font-style:normal;
  font-family:var(--font-display); font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:999px; color:var(--ink);
  background:rgba(4,8,18,.75);
  border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent);
}
.hcard.h0{ left:2%;  transform:translateY(-52%) rotate(-8deg);  z-index:1;
  animation:float1 7s ease-in-out infinite }
.hcard.h1{ left:30%; transform:translateY(-50%) rotate(-1deg);  z-index:3;
  animation:float2 8s ease-in-out infinite }
.hcard.h2{ left:58%; transform:translateY(-46%) rotate(7deg);   z-index:2;
  animation:float3 9s ease-in-out infinite }
@keyframes float1{ 0%,100%{ transform:translateY(-52%) rotate(-8deg) }
                   50%{ transform:translateY(-57%) rotate(-9.5deg) } }
@keyframes float2{ 0%,100%{ transform:translateY(-50%) rotate(-1deg) }
                   50%{ transform:translateY(-56%) rotate(.5deg) } }
@keyframes float3{ 0%,100%{ transform:translateY(-46%) rotate(7deg) }
                   50%{ transform:translateY(-51%) rotate(8.5deg) } }

@media (max-width:980px){
  .hero-in{ grid-template-columns:1fr; gap:26px; padding:32px 24px 28px }
  .hero h2{ font-size:38px }
  .herocards{ height:230px }
  .hcard{ width:128px }
}
@media (max-width:620px){
  .hero h2{ font-size:31px }
  .hero p{ font-size:15.5px }
  .herocards{ display:none }          /* auf dem Handy zählt der Aufruf, nicht die Deko */
  .hero-cta .btn.lg{ width:100% }
  .herofacts{ gap:18px }
}

/* =================================================== Text besser lesbar ===
   Fließtexte liefen auf 0.7–0.8 Deckkraft. Zusammen mit dem Hintergrundbild
   war das grenzwertig. Deckkraft raus, stattdessen echte Farbwerte. */
.hero p, .cards4 p, .sblock p, .panelbox p, .road li p, .sectlead,
.helpintro, .ha p, .ha ul, .hpbody p, .uhead p, .ub p{
  opacity:1; color:var(--ink-dim);
}
.hero p{ color:var(--ink) }
.ha b, .sblock b, .panelbox b, .hpbody b, .ub b{ color:var(--ink) }
.eyebrow, .fctree span, .tiny{ color:var(--ink-faint) }
.tiny{ font-size:12px; line-height:1.6 }

/* ================================================= Galerie als Laufband ===
   Die Karten ziehen langsam vorbei; beim Überfahren steht alles still.
   Zwei identische Reihen ergeben den nahtlosen Umlauf. */
.nsviewport{
  position:relative; overflow:hidden; padding:4px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.nstrack{
  display:flex; gap:12px; width:max-content;
  animation:nsRoll 58s linear infinite;
  will-change:transform;
}
.nsdup{ display:flex; gap:12px }
.nsviewport.hold .nstrack{ animation-play-state:paused }
@keyframes nsRoll{
  from{ transform:translate3d(0,0,0) }
  /* Genau die halbe Strecke — danach steht die Kopie exakt am Anfang */
  to{   transform:translate3d(calc(-50% - 6px),0,0) }
}
.nstile{
  flex:none; width:154px; aspect-ratio:1/1;
  position:relative; padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--line); border-radius:var(--r); background:#070b16;
  transition:transform .2s var(--ease), border-color .2s var(--ease),
             box-shadow .2s var(--ease);
}
.nstile img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s var(--ease) }
.nstile:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--cyan) 65%,var(--line));
  box-shadow:0 16px 34px -18px color-mix(in srgb,var(--cyan) 95%,transparent);
}
.nstile:hover img{ transform:scale(1.05) }
.nshint{ margin:10px 0 0; font-size:11.5px; color:var(--ink-faint);
  letter-spacing:.04em }
@media (max-width:620px){ .nstile{ width:124px } .nstrack{ animation-duration:44s } }
@media (prefers-reduced-motion:reduce){ .nstrack{ animation:none } }

/* ============================================ Hero: Überschrift und Streifen ===
   Die Überschrift trug die ganze Aussage, sah aber aus wie normaler Fließtext
   in groß. Jetzt mit Gegenlicht hinter dem farbigen Wort. */
.hero h2{
  font-size:56px; line-height:1.02; letter-spacing:-.025em;
  text-shadow:0 2px 24px rgba(0,0,0,.5);
}
.hero h2 em{
  position:relative; font-style:normal;
  background:linear-gradient(96deg, var(--cyan) 0%, #8f7bff 48%, var(--magenta) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero h2 em::after{
  content:''; position:absolute; left:-6%; right:-6%; top:14%; bottom:14%;
  z-index:-1; border-radius:40px; filter:blur(26px); opacity:.42;
  background:linear-gradient(96deg, var(--cyan), var(--magenta));
}
.herolead{ font-size:17px; line-height:1.62 }
.herolead b{ color:var(--cyan); font-weight:700 }

/* Teamfarben unten am Hero: waren auf 3 px und halb durchsichtig kaum zu sehen */
.hero-strip{ height:7px; opacity:1; gap:0 }
.hero-strip span{ flex:1; filter:none;
  box-shadow:0 0 14px -2px currentColor }

/* Die Seltenheits-Marke auf den Hero-Karten ist ersatzlos entfallen —
   sie lag oben rechts genau über den Gesichtern. Die Seltenheit steht
   ohnehin in der Vorschau und in der Kollektion. */

/* „Alle 220 ansehen" — vorher ein Geisterrahmen auf dunklem Grund */
.nsall{
  --btn-bg:color-mix(in srgb, var(--cyan) 16%, var(--panel-2));
  --btn-line:color-mix(in srgb, var(--cyan) 55%, var(--line));
  color:var(--cyan); font-weight:700;
}
.nsall:hover{
  --btn-bg:color-mix(in srgb, var(--cyan) 26%, var(--panel-2));
  --btn-line:var(--cyan);
  box-shadow:0 6px 20px -10px color-mix(in srgb, var(--cyan) 95%, transparent);
}
.nsall span{ transition:transform .18s var(--ease); display:inline-block }
.nsall:hover span{ transform:translateX(3px) }

/* Fragezeichen neben „Ausdauer" statt darunter.
   Ursache: .infobtn ist display:grid und damit ein Blockelement — es hat die
   Zeile umgebrochen. Als inline-grid bleibt es in der Zeile stehen. */
.stamtop > span{ display:inline-flex; align-items:center; gap:6px }
.stamtop .infobtn, .proglbl .infobtn, .pen .infobtn{
  display:inline-grid; margin-left:0; vertical-align:middle; flex:none;
}


/* ---------------------------------------------------------------------------
 * Vorschau-Kachel bleibt beim Scrollen stehen
 * Nur DIESER Block reagiert auf einen Klick in der Kollektion. Alle anderen
 * Kacheln (Dividenden, Kurse, Team-Aufbau) scrollen normal mit und bleiben
 * damit erreichbar. Ein zweiter Scrollbereich in der Leiste entfällt.
 * Erst ab der zweispaltigen Ansicht — darunter steht die Leiste unter dem
 * Inhalt, dort wäre „sticky" nur im Weg.
 * ------------------------------------------------------------------------ */
@media (min-width:1081px){
  /* Nur in der Kollektion — dort ist die Vorschau der einzige Block, und
     nur dort scrollt man weit genug, dass es etwas bringt. */
  /* WICHTIG: „sticky" wirkt nur innerhalb des eigenen Elternelements. Weil
     die Leiste in der Kollektion nur EINE Kachel enthält, war sie genauso
     hoch wie die Kachel — es gab keinen Weg, an dem etwas kleben konnte.
     Deshalb muss sie hier die volle Zeilenhöhe füllen. */
  #side[data-sticky="1"]{ align-self:stretch }
  #side[data-sticky="1"] [data-blk="detail"]{
    position:sticky;
    top:calc(var(--topbar-h, 112px) + 14px);
    z-index:2;
    /* Bei starkem Browser-Zoom wird die Kachel (Bild + Werte + Stamina)
       schnell höher als der sichtbare Bereich unter dem Sticky-Offset —
       ohne eigene Grenze klebte sie dann fest UND der untere Teil war
       nirgends erreichbar, weil Sticky-Elemente keinen eigenen Scroll
       haben. Jetzt bekommt sie eine eigene Scroll-Grenze: passt sie in
       den Platz, sieht man nichts davon; passt sie nicht, scrollt man mit
       der Maus über der Kachel NUR die Kachel selbst — die Seite bleibt
       stehen, overscroll-behavior verhindert das "Durchrutschen" an den
       Rand. */
    max-height:calc(100vh - var(--topbar-h, 112px) - 28px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  /* Beim Ziehen darf nichts kleben, sonst springt die Kachel unter dem Zeiger */
  #side.reordering [data-blk="detail"]{ position:static }
}


/* ---------------------------------------------------------------------------
 * Creator-Kästchen mit Kontrast
 * Vier graue Rechtecke auf grauem Grund — man hat sie schlicht nicht gesehen.
 * Jedes bekommt jetzt eine eigene Farbe, eine Leuchtkante links und einen
 * dunkleren Grund. Reihenfolge: Season 1, 6 %, Öffentlich, Multi-Sport.
 * ------------------------------------------------------------------------ */
.crfacts li{
  position:relative; overflow:hidden;
  padding:14px 15px 14px 18px;
  /* Gegen --panel-2 mischen statt gegen ein festes Dunkelblau — sonst sind
     die Kästchen im hellen Thema dunkle Klötze. */
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--fc, var(--cyan)) 16%, var(--panel-2)) 0%,
      color-mix(in srgb, var(--fc, var(--cyan)) 5%,  var(--panel-2)) 100%);
  border:1px solid color-mix(in srgb, var(--fc, var(--cyan)) 42%, transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),
             0 0 18px -8px color-mix(in srgb, var(--fc, var(--cyan)) 70%, transparent);
}
.crfacts li::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--fc, var(--cyan));
  box-shadow:0 0 10px var(--fc, var(--cyan));
}
.crfacts li:nth-child(1){ --fc:var(--cyan) }
.crfacts li:nth-child(2){ --fc:var(--lime, #7dff5a) }
.crfacts li:nth-child(3){ --fc:var(--magenta) }
.crfacts li:nth-child(4){ --fc:var(--gold, #ffc53d) }
.crfacts b{
  font-size:18px; letter-spacing:.01em;
  color:var(--fc, var(--cyan));
  text-shadow:0 0 12px color-mix(in srgb, var(--fc, var(--cyan)) 55%, transparent);
}
/* War fest auf #c3d2ec verdrahtet — ein helles Blaugrau, nur fürs dunkle
   Thema brauchbar. Im hellen Thema stand das nahezu unsichtbar auf weißem
   Grund (Übergabe 3.5: "Beschreibungstexte darunter sind fast durchsichtig").
   --ink-dim ist je Thema definiert und trifft im Dunklen fast denselben Ton. */
.crfacts span{ color:var(--ink-dim); font-size:11.5px }

/* ---------------------------------------------------------------------------
 * Dividenden auszahlen — Kopfzeile
 * Als „Ticker" gebaut sah es aus wie eine Anzeige neben dem ETN-Kurs, also
 * wie etwas zum Ablesen. Es ist aber eine HANDLUNG. Deshalb jetzt gefüllt,
 * mit Pfeil und Verb — ein Knopf, den man als Knopf erkennt.
 * ------------------------------------------------------------------------ */
.claimbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:0 14px 0 11px; min-height:42px;
  border:1px solid transparent; border-radius:999px;
  font-family:var(--font-display); cursor:pointer;
  background:linear-gradient(135deg, var(--lime) 0%,
             color-mix(in srgb, var(--lime) 74%, var(--cyan)) 100%);
  color:#04140a;
  box-shadow:0 0 24px -10px var(--lime), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .14s var(--ease), box-shadow .14s var(--ease);
}
.claimico{
  display:grid; place-items:center; flex:none;
  width:19px; height:19px; border-radius:50%;
  background:rgba(4,20,10,.22); font-size:12px; line-height:1; font-weight:800;
}
.claimval{ font-size:14px; font-weight:800; letter-spacing:.01em }
.claimcta{
  font-size:9.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  opacity:.78; padding-left:2px;
}
/* Ohne diese Zeile war der Knopf NIE verborgen: `display:inline-flex` oben
   schlägt die eingebaute Browser-Regel `[hidden]{display:none}`. Er belegte
   dadurch immer 140 px in der Kopfzeile, auch ohne verbundene Wallet. */
.claimbtn[hidden]{ display:none }

.claimbtn:hover{ transform:translateY(-1px); box-shadow:0 0 30px -8px var(--lime) }
.claimbtn[disabled]{
  background:var(--panel-2); color:var(--ink-dim);
  border-color:var(--line-strong, var(--line));
  box-shadow:none; cursor:default; transform:none;
}
.claimbtn[disabled] .claimico{ background:color-mix(in srgb,var(--ink) 10%,transparent) }
/* Übergabe 3.5: --lime und --cyan sind im hellen Thema auf TEXT-Kontrast
   getrimmt (#1d7026 / #066a89 — beide bewusst dunkel und entsättigt, damit
   Schrift auf hellem Grund lesbar bleibt). Als Knopf-Füllung gemischt ergab
   das genau den "schlammigen" Ton aus der Übergabe. Eine Handlungsfläche
   braucht Leuchtkraft, keinen Textkontrast — deshalb eine eigene, kräftige
   Verlaufsfarbe statt der wiederverwendeten Text-Variablen. */
:root[data-theme="light"] .claimbtn{
  color:#03210f;
  background:linear-gradient(135deg, #34d769 0%, #1fc4c4 100%);
  box-shadow:0 0 22px -8px rgba(31,196,110,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
:root[data-theme="light"] .claimbtn:hover{ box-shadow:0 0 28px -6px rgba(31,196,110,.65) }
@media (max-width:720px){ .claimcta{ display:none } }


/* ---------------------------------------------------------------------------
 * Markenzeichen: mehr Präsenz
 * „GALACTIC SPORTS LEAGUE" stand als schmale graue Zeile neben einem großen
 * Logo und trug den Namen nicht. Jetzt: weiter gesperrt, heller, mit einem
 * Verlauf über LEAGUE und einer Konturlinie unter der Unterzeile.
 * ------------------------------------------------------------------------ */
.brandname{
  font-size:19px !important;
  font-weight:800 !important;
  letter-spacing:.055em !important;
  line-height:1.05;
  /* War #f4f8ff — im hellen Thema weiß auf weiß und damit unlesbar. */
  color:var(--ink);
  text-shadow:0 0 18px color-mix(in srgb, var(--cyan) 22%, transparent);
}
.brandname em{
  background:linear-gradient(100deg, var(--magenta) 0%, #ff7ae0 55%, var(--cyan) 130%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:var(--magenta);
  filter:drop-shadow(0 0 10px color-mix(in srgb, var(--magenta) 50%, transparent));
}
.brandsub{
  font-size:9.5px !important; letter-spacing:.24em !important; font-weight:600;
  padding-top:3px;
}
@media (max-width:560px){ .brandname{ font-size:15px !important } }

/* ---------------------------------------------------------------------------
 * Hero-Vorspann etwas luftiger — der Text ist länger geworden.
 * ------------------------------------------------------------------------ */
.herolead b{ color:var(--cyan); font-weight:700 }
.herolead{ max-width:52ch }


/* ---------------------------------------------------------------------------
 * Bedienbare Elemente sichtbar abgrenzen
 * Ein Knopf muss als Knopf zu erkennen sein, bevor man ihn berührt. Die
 * schwache Rahmenfarbe traf besonders `.btn.ghost` — durchsichtige Fläche
 * plus unsichtbarer Rahmen ergibt Text, der aussieht wie Text.
 * ------------------------------------------------------------------------ */
.btn.ghost{
  --btn-bg:color-mix(in srgb, var(--ink) 5%, transparent);
  --btn-line:var(--line-strong, var(--line));
}
.btn.ghost:hover{
  --btn-bg:color-mix(in srgb, var(--cyan) 12%, transparent);
  --btn-line:var(--cyan);
}
.iconbtn, .pill, .tab,
.filters select, .filters input[type="search"], select.sport{
  border-color:var(--line-strong, var(--line));
}
.iconbtn:hover, .pill:hover{ border-color:var(--cyan) }

/* Tastaturbedienung: ein Ring, der auf jedem Untergrund trägt. */
:where(a, button, select, input, [tabindex]):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
  border-radius:var(--r-sm);
}


/* ===========================================================================
 * HELLES THEMA — Nacharbeit
 * Das Farbschema ist für den dunklen Grund entworfen: gedämpfte Beschriftungen,
 * halbdurchsichtige Flächen, Deckkraft als Stilmittel. Auf hellem Grund kippt
 * jedes dieser Mittel ins Unlesbare. Hier steht deshalb, was im hellen Thema
 * anders sein muss — gemessen, nicht geschätzt.
 * ======================================================================== */
:root[data-theme="light"]{

  /* Der Hintergrundschimmer legte einen rosa-blauen Schleier über die ganze
     Seite und nahm allem darunter Kontrast. */
  & body::before{ opacity:.12 }

  /* Kleine, weit gesperrte Großbuchstaben brauchen mehr als --ink-faint:
     bei 11 px und .16em Sperrung liest sich 5,1:1 wie 3:1. */
  & .sblktitle,
  & .tiny,
  & .nshint,
  & .ld{ color:var(--ink-dim) }

  /* Deckkraft als Abstufung funktioniert auf Weiß nicht — aus „gedämpft"
     wird „verschwunden". Für kommende Spiele und gesperrte Knöpfe deshalb
     höhere Werte. */
  & .gcard:disabled{ opacity:.82 }
  & .btn[disabled], & .btn:disabled{ opacity:.62 }
  & .pick:disabled{ opacity:.7 }
  & .sblk.dragging{ opacity:.6 }

  /* Kacheln bekommen einen echten Schatten statt eines Leuchtens — auf
     hellem Grund trägt nur Tiefe, kein Schein. */
  & .sblk, & .panel, & .gcard, & .pcard{
    box-shadow:0 1px 2px rgba(20,30,60,.06), 0 6px 18px -12px rgba(20,30,60,.30);
  }

  /* Neon auf Weiß wird zum Fleck. Textschatten und Leuchtränder abschalten. */
  & .brandname{ text-shadow:none }
  & .hero h2 em, & .sblktitle, & .crfacts b{ text-shadow:none }
  & .btn.soft{
    color:var(--ink);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
               0 0 0 1px color-mix(in srgb, var(--cyan) 45%, transparent);
  }

  /* Die Statuszeile über den Reitern und die Fußzeile lagen fast auf der
     Hintergrundfarbe. */
  & .foot{ border-top:1px solid var(--line) }
  & .topbar{ box-shadow:0 1px 0 var(--line), 0 8px 24px -20px rgba(20,30,60,.5) }
}

/* Ohne Verschachtelungs-Unterstützung (ältere Browser) greifen die Regeln
   oben nicht. Die wichtigsten deshalb zusätzlich flach: */
:root[data-theme="light"] .sblktitle,
:root[data-theme="light"] .tiny,
:root[data-theme="light"] .nshint,
:root[data-theme="light"] .ld{ color:var(--ink-dim) }
:root[data-theme="light"] .gcard:disabled{ opacity:.82 }
:root[data-theme="light"] .brandname{ text-shadow:none }


/* ---------------------------------------------------------------------------
 * Besitz-Filter in der Kollektion
 * Optisch von den Positions-Knöpfen getrennt: es sind zwei verschiedene
 * Fragen („welche Position?" und „habe ich sie?"), und nebeneinander in einer
 * Reihe gleich aussehender Knöpfe würde man das nicht erkennen.
 * ------------------------------------------------------------------------ */
.pill.own[aria-pressed="true"].o-mine{
  border-color:var(--lime);
  background:color-mix(in srgb, var(--lime) 16%, transparent);
  color:var(--lime);
}
.pill.own[aria-pressed="true"].o-missing{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  color:var(--gold);
}

.skwrap{ display:block; padding:2px 0 }
.skwrap .skrow{ margin-top:8px }


/* ===========================================================================
 * NACHTRAG — dieser Block ging verloren
 * Ein Patch-Skript hat vor dem Anhängen dieses Abschnitts abgebrochen. Die
 * unsichtbaren Auswahlfelder, die einfarbigen Positionsknöpfe, die riesigen
 * Fußzeilen-Symbole und der unsichtbare Karten-Glanz hatten alle dieselbe
 * Ursache: es stand nie im Stylesheet.
 * ======================================================================== */

/* --- Farbe je Position ---------------------------------------------------
 * Alle fünf Knöpfe sahen aktiv gleich aus — man musste den Text lesen, um zu
 * wissen, was eingestellt ist. Jetzt trägt jede Position ihre eigene Farbe.
 * Die Regel muss die Grundregel `.pill[aria-pressed="true"]` überschreiben,
 * daher der doppelte Attributselektor.
 * ------------------------------------------------------------------------ */
.pill[data-cf][aria-pressed="true"]{
  color:var(--pc, var(--cyan));
  background:color-mix(in srgb, var(--pc, var(--cyan)) 20%, transparent);
  border-color:var(--pc, var(--cyan));
  box-shadow:0 0 18px -7px var(--pc, var(--cyan));
}
.pill.p-all,       .pill.o-all{     --pc:var(--ink-dim) }
.pill.p-goalkeeper{ --pc:#ffc53d }
.pill.p-defender{   --pc:#4fc3ff }
.pill.p-midfielder{ --pc:#7dff5a }
.pill.p-striker{    --pc:#ff5a6e }
.pill.o-mine{       --pc:var(--lime) }
.pill.o-missing{    --pc:var(--gold) }
/* Auch im Ruhezustand ein leiser Hinweis auf die Farbe */
/* Die farbigen Punkte vor der Beschriftung sind entfallen — sie waren
   Dekoration ohne Aussage. Die Farbe zeigt sich, wenn ein Knopf aktiv ist. */

/* --- Ladeplatzhalter ------------------------------------------------------
 * Ein pulsierender Block an der Stelle, an der der Inhalt erscheint, sagt
 * mehr als ein Satz: man sieht Form und Menge des Kommenden, und das Bild
 * springt beim Eintreffen nicht.
 * ------------------------------------------------------------------------ */
.sk{
  display:block; border-radius:6px;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--ink) 7%, transparent) 0%,
    color-mix(in srgb, var(--ink) 15%, transparent) 45%,
    color-mix(in srgb, var(--ink) 7%, transparent) 90%);
  background-size:220% 100%;
  animation:skwipe 1.35s ease infinite;
}
.sk + .sk{ margin-top:8px }
.sk.w40{ width:40% } .sk.w60{ width:60% }
.sk.h12{ height:12px } .sk.h20{ height:20px } .sk.h34{ height:34px }
.sk.h64{ height:64px }
.skrow{ display:flex; gap:10px; align-items:center }
.skrow .sk{ flex:1 }
@keyframes skwipe{ from{ background-position:180% 0 } to{ background-position:-40% 0 } }
@media (prefers-reduced-motion:reduce){ .sk{ animation:none } }

/* --- Holografischer Schimmer nach Seltenheit ------------------------------
 * Beim ersten Versuch mit 0,14 Deckkraft war er unter der Wahrnehmungs-
 * schwelle. Jetzt 0,38, ein zweiter schmaler Streifen dahinter und ein
 * leichter Farbschein am Kartenrand — sichtbar, aber immer noch unter dem
 * Text und ohne Dauerbewegung.
 * ------------------------------------------------------------------------ */
/* Farben jetzt an das TEXT-Badge nebenan angeglichen (.pcard .rar.rX weiter
   oben) — das hatte die Zuordnung schon richtig: Common grau, Uncommon
   grün, Rare türkis, Epic violett, Legendary UND Legendary+ gold (gleiche
   Farbe für beide — sie unterscheiden sich über die Stärke, siehe unten,
   nicht über den Farbton). Die --rar-Variable hier hatte vorher eine
   eigene, dazu passende Reihenfolge — daher die vertauschten Farben. */
.pcard{ --rar:#98a4bd }                    /* r0 Common */
.pcard[data-r="1"]{ --rar:var(--lime) }    /* r1 Uncommon */
.pcard[data-r="2"]{ --rar:var(--cyan) }    /* r2 Rare */
.pcard[data-r="3"]{ --rar:#c07bff }        /* r3 Epic */
.pcard[data-r="4"]{ --rar:var(--gold) }    /* r4 Legendary */
.pcard[data-r="5"]{ --rar:var(--gold) }    /* r5 Legendary+ — selbe Farbe wie r4 */
.pcard .shot{ isolation:isolate }
.pcard .shot::after{
  content:''; position:absolute; inset:-40% -60%;
  pointer-events:none; opacity:0; z-index:2;
  /* Diagonal von links unten nach rechts oben. Der Winkel ist auf die
     Kartenform abgestimmt: bei 190 x 190 ergibt 38 Grad einen Verlauf, der
     die Ecke trifft statt sie zu schneiden. */
  background:linear-gradient(38deg,
    transparent 36%,
    color-mix(in srgb, var(--rar) 35%, #ffffff) 45%,
    color-mix(in srgb, var(--rar) 70%, #ffffff) 50%,
    color-mix(in srgb, var(--rar) 35%, #ffffff) 55%,
    transparent 64%);
  transform:translate(-60%, 60%);
  mix-blend-mode:screen;
}
.pcard:hover .shot::after,
.pcard:focus-visible .shot::after{
  /* War 0,20 — laut Rückmeldung fiel der Effekt beim normalen Durchklicken
     kaum auf. Etwas angehoben (0,28), aber bewusst nicht zurück auf die
     ursprünglichen 0,38 (die galten als zu unruhig). */
  opacity:.28;
  animation:rarshine 1.5s cubic-bezier(.32,0,.24,1) forwards;
}
.pcard:hover{ border-color:color-mix(in srgb, var(--rar) 78%, transparent) }
/* Stärke steigt mit der Seltenheit — jetzt inklusive Common (dezent) statt
   nur Randfarbe. War vorher zu eng eingezogen (negativer Spread zu groß),
   dadurch blieb der Glow bei Uncommon/Rare/Epic praktisch unsichtbar —
   jetzt größerer Blur UND weniger negativer Spread, damit der Schein
   tatsächlich sichtbar über den Rand hinausreicht. Legendary und
   Legendary+ teilen die Goldfarbe (siehe --rar oben), bleiben aber über
   die Stärke unterscheidbar. */
.pcard[data-r="0"]:hover{ box-shadow:0 0 14px -6px var(--rar) }
.pcard[data-r="1"]:hover{ box-shadow:0 0 22px -5px var(--rar) }
.pcard[data-r="2"]:hover{ box-shadow:0 0 28px -4px var(--rar) }
.pcard[data-r="3"]:hover{ box-shadow:0 0 34px -4px var(--rar) }
.pcard[data-r="4"]:hover{ box-shadow:0 0 40px -3px var(--rar) }
.pcard[data-r="5"]:hover{ box-shadow:0 0 48px -2px var(--rar) }
@keyframes rarshine{ to{ transform:translate(60%, -60%) } }
@media (prefers-reduced-motion:reduce){
  .pcard:hover .shot::after{ animation:none; opacity:.14; transform:none }
}

.skwrap{ display:block; padding:2px 0 }
.skwrap .skrow{ margin-top:8px }


/* --- On Fire --------------------------------------------------------------
 * Vorher eine kleine orange Textzeile — man hat es übersehen. Jetzt eine
 * eigene Plakette mit Flammensymbol, Rand und ruhigem Pulsieren.
 * ------------------------------------------------------------------------ */
.fire.hot{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px 5px 10px; border-radius:999px;
  font-family:var(--font-display); font-size:13px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  color:#ffd7a3;
  background:linear-gradient(135deg, rgba(255,90,20,.30), rgba(255,180,40,.14));
  border:1px solid rgba(255,138,61,.65);
  box-shadow:0 0 22px -6px #ff8a3d, inset 0 1px 0 rgba(255,255,255,.16);
  text-shadow:0 0 10px rgba(255,120,40,.9);
  animation:firebadge 1.5s ease-in-out infinite;
}
.fire.hot::before{ content:'🔥'; font-size:15px; line-height:1 }
@keyframes firebadge{
  50%{ box-shadow:0 0 30px -4px #ff8a3d, inset 0 1px 0 rgba(255,255,255,.24);
       border-color:rgba(255,180,90,.9) }
}
@media (prefers-reduced-motion:reduce){ .fire.hot{ animation:none } }


/* ===========================================================================
 * LATTEN SCHIESSEN
 * Die Leiste unter dem Spielfeld trägt hier mehr Information als beim
 * Elfmeter — Stufenleiter, Werte, Bedienung. Sie ist deshalb in klare Blöcke
 * geteilt statt in eine lange Zeile: was zusammengehört, steht zusammen, und
 * jede Zeile hat eine feste Rolle.
 * ======================================================================== */

/* --- Stufenleiter --------------------------------------------------------- */
.cbladder{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
  margin:14px 0 16px;
}
.cbstep{
  display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:11px 6px 9px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--panel-2);
  transition:border-color .18s var(--ease), background .18s var(--ease);
}
.cbstep b{
  font-family:var(--font-display); font-size:19px; font-weight:800;
  color:var(--ink-dim); line-height:1;
}
.cbstep b i{ font-style:normal; font-size:11px; opacity:.65; margin-left:1px }
.cbstep span{ font-size:11px; color:var(--ink-faint) }
.cbstep.done{
  border-color:var(--lime);
  background:color-mix(in srgb, var(--lime) 14%, transparent);
}
.cbstep.done b{ color:var(--lime) }
.cbstep.now{
  border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 16%, transparent);
  box-shadow:0 0 22px -8px var(--gold);
}
.cbstep.now b{ color:var(--gold) }

/* --- Zwei Spalten unter dem Feld ------------------------------------------ */
.cbfoot{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px }
@media (max-width:820px){ .cbfoot{ grid-template-columns:1fr } }
.cbstats, .cbside{
  padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--r); background:var(--panel-2);
}
.cbh{
  font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); margin-bottom:10px;
}

/* --- Werteanzeige ---------------------------------------------------------
 * Vier Spalten: Wert, Zahl, Wirkung, konkreter Betrag. Die letzte Spalte ist
 * die eigentliche Auskunft — sie sagt, was die Zahl für DICH bedeutet.
 * ------------------------------------------------------------------------ */
.cbtab{ width:100%; border-collapse:collapse; font-size:13px }
.cbtab th{
  text-align:left; font-weight:600; color:var(--ink);
  padding:7px 10px 7px 0; white-space:nowrap;
}
.cbtab td{ padding:7px 10px 7px 0; color:var(--ink-dim); vertical-align:baseline }
.cbtab tr + tr th, .cbtab tr + tr td{ border-top:1px solid var(--line) }
.cbtab .num{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  color:var(--cyan); width:42px;
}
.cbtab .det{ color:var(--ink); white-space:nowrap; text-align:right }
.cbnote{
  margin:11px 0 0; font-size:12px; line-height:1.6; color:var(--ink-faint);
  padding-top:10px; border-top:1px solid var(--line);
}
.cbnote b{ color:var(--gold) }

/* --- Bedienhinweis -------------------------------------------------------- */
.cbsteps{ list-style:none; margin:0; padding:0; counter-reset:cbs }
.cbsteps li{
  position:relative; padding:0 0 10px 27px; counter-increment:cbs;
  font-size:13px; line-height:1.45;
}
.cbsteps li::before{
  content:counter(cbs); position:absolute; left:0; top:1px;
  width:18px; height:18px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:10.5px; font-weight:800;
  color:var(--gold); background:color-mix(in srgb, var(--gold) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
.cbsteps b{ display:block; color:var(--ink); font-weight:600 }
.cbsteps em{ font-style:normal; color:var(--ink-faint); font-size:12px }
.cbsc{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:4px; padding-top:11px; border-top:1px solid var(--line);
  font-family:var(--font-display); font-weight:800; font-size:15px;
}
.cbsc > span:last-child{ color:var(--cyan) }
/* Direkt unter der Stufenleiter statt am Ende der Anleitungsspalte — kein
   Trennstrich nötig, die Leiter darüber übernimmt das schon. */
.cbsc.top{ margin:14px 0 12px; padding-top:0; border-top:0 }

/* --- Abschluss ------------------------------------------------------------ */
.cbover{
  margin-top:16px; padding:20px; text-align:center;
  border:1px solid var(--gold); border-radius:var(--r);
  background:color-mix(in srgb, var(--gold) 10%, transparent);
}
.cbover b{ font-size:13px; color:var(--ink-dim); font-weight:600 }
.cbover .bignum{
  font-family:var(--font-display); font-size:34px; font-weight:800;
  color:var(--gold); margin:4px 0 2px;
}
.cbover p{ margin:0 0 14px; font-size:13px; color:var(--ink-faint) }

/* --- Stufenkarte über dem Spielfeld --------------------------------------- */
.mini.stagecard{ --team:var(--gold) }
.stagenum{
  flex:none; width:54px; height:54px; border-radius:var(--r-sm);
  display:grid; place-items:center; align-content:center;
  border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
}
.stagenum b{
  font-family:var(--font-display); font-size:22px; font-weight:800;
  color:var(--gold); line-height:1;
}
.stagenum span{ font-size:9px; color:var(--ink-faint); letter-spacing:.08em }

/* ===========================================================================
 * KEEPER WALL
 * ======================================================================== */
.wtop{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:14px 0 12px;
}
.wdots{ display:flex; gap:7px; flex-wrap:wrap }
.wdot{
  width:34px; height:9px; border-radius:5px;
  background:color-mix(in srgb, var(--ink) 12%, transparent);
  border:1px solid var(--line);
}
.wdot.save{ background:var(--lime); border-color:var(--lime);
            box-shadow:0 0 12px -4px var(--lime) }
.wdot.goal{ background:var(--red); border-color:var(--red) }
.wsc{
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:800; font-size:15px;
}
.wsc > span:last-child{ color:var(--cyan) }

/* Abstand und Reichweite nach jedem Ball — daran lernt man */
.wlast{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 14px; margin-bottom:12px; border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb, var(--wc, var(--cyan)) 45%, transparent);
  background:color-mix(in srgb, var(--wc, var(--cyan)) 12%, transparent);
}
.wlast.saved{ --wc:var(--lime) }
.wlast.goal{  --wc:var(--red) }
.wlast b{
  font-family:var(--font-display); font-size:13px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; color:var(--wc, var(--cyan));
}
.wlast span{ font-size:12.5px; color:var(--ink-dim) }

/* Hinweis auf den Leih-Torwart */
.wdemo{
  padding:12px 15px; margin-bottom:12px; border-radius:var(--r-sm);
  border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background:color-mix(in srgb, var(--gold) 11%, transparent);
  font-size:12.5px; line-height:1.6; color:var(--ink-dim);
}
.wdemo b{
  display:block; color:var(--gold); font-family:var(--font-display);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:3px;
}
.wdemo a{ color:var(--cyan); display:inline-block; margin-top:5px }


/* ===========================================================================
 * Filterleiste: drei Gruppen mit Beschriftung
 * „Welche Position?", „habe ich sie?", „welche genau?" sind drei Fragen. In
 * einer Reihe gleich aussehender Knöpfe war das nicht zu erkennen.
 * ======================================================================== */
.filters{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px;
  padding:13px 15px; margin-bottom:16px;
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel);
}
/* Bündelt Position + Ownership zu einem Block, damit die äußere Zeile nur
   zwischen zwei Elementen entscheiden muss — siehe Kommentar in ui.js. */
.fgrp-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px }
.fgrp{ display:flex; flex-direction:column; gap:6px; min-width:0 }
.fgrp.grow{ flex:1; min-width:280px }
.fgl{
  font-family:var(--font-display); font-size:9.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
}
.fbtns{ display:flex; flex-wrap:wrap; gap:7px; align-items:center }
/* min-width:0 hiess: das Auswahlfeld darf unter seine laengste Option
   schrumpfen — „Any rarity" wurde dadurch abgeschnitten. fit-content setzt die
   Untergrenze auf den Inhalt, das Feld gibt also erst nach, wenn wirklich kein
   Platz mehr ist.
   Vorher stand hier zusaetzlich `flex-wrap:nowrap` auf dieser Zeile, mit einer
   Bildbreiten-Schwelle als Notausgang. Das Problem: ein langer Teamname macht
   die Selects breiter als jede feste Schwelle vorgesehen hat, und OHNE
   Umbruch lief das Suchfeld dann seitlich aus dem Rahmen — sichtbar im
   Kollektions-Screenshot. Jetzt darf die Zeile wie die aeussere Filterleiste
   ganz normal umbrechen; das Suchfeld faellt dann sauber in die naechste
   Zeile, statt zu ueberlaufen. Keine feste Schwelle mehr noetig. */
.fgrp.grow select{ flex:0 1 auto; min-width:fit-content }
.fgrp.grow input[type="search"]{ flex:1 1 200px; min-width:140px }

/* Besitz als zusammenhängende Schaltergruppe — drei Zustände einer Frage,
   also auch optisch ein Element. */
.fbtns.seg{ gap:0; border-radius:999px; overflow:hidden;
            border:1px solid var(--line-strong, var(--line)) }
.fbtns.seg .pill{
  border-radius:0; border:0; border-right:1px solid var(--line);
  box-shadow:none;
}
.fbtns.seg .pill:last-child{ border-right:0 }
.fbtns.seg .pill[aria-pressed="true"]{ box-shadow:none }

/* ===========================================================================
 * Buyback & Burn
 *
 * Der Bereich bleibt in BEIDEN Designs dunkel — wie das Spielfeld. Feuer vor
 * hellem Grund sieht aus wie ein Fehler, und der ganze Kontrastärger des
 * hellen Themas entsteht hier erst gar nicht. Innen gelten deshalb feste
 * Farben statt der Design-Variablen.
 *
 * Die Flammen sind reines CSS: sieben Zungen, unterschiedlich groß, mit
 * versetztem Takt. Kein Bild, kein Canvas, keine Animationsschleife in JS.
 * ------------------------------------------------------------------------ */

/* ---------- Flammen-Bauteil für den Knopf in der Kopfzeile ----------
   Vier Schichten: Schein, Aussenflamme, Kern, Spitze. Bewusst OHNE
   mix-blend-mode — der Knopf steht im hellen Design vor fast weissem Grund,
   dort wuerde „screen" die Flamme komplett ausbleichen. Stattdessen decken
   Verlaeufe, und der Schein kommt aus einem weichen radialen Verlauf. */
.flame{ position:relative; display:inline-block; flex:none; width:16px; height:20px }
.flame i{
  position:absolute; left:50%; bottom:0;
  border-radius:0 50% 50% 50%;
  transform:translateX(-50%) rotate(-45deg);
  transform-origin:50% 85%;
  animation:flick 1.9s ease-in-out infinite;
  will-change:transform;
}
/* 1 — Schein rundherum, kein Flammenkoerper */
.flame i:nth-child(1){
  width:190%; height:190%; border-radius:50%;
  transform:translateX(-50%) rotate(0deg);
  background:radial-gradient(circle, rgba(255,109,0,.55), transparent 68%);
  animation:glowpulse 2.6s ease-in-out infinite;
}
/* 2 — Aussenflamme */
.flame i:nth-child(2){ width:100%; height:100%;
  background:linear-gradient(to top, #e02800 4%, #ff6d00 42%, #ff9d00 78%, #ffc400);
  filter:blur(.3px); animation-duration:2.1s }
/* 3 — heisser Kern */
.flame i:nth-child(3){ width:62%; height:62%;
  background:linear-gradient(to top, #ff8f00, #ffd54f 72%, #fff8e1);
  animation-duration:1.45s; animation-delay:-.5s }
/* 4 — weisse Spitze, schnellstes Flackern */
.flame i:nth-child(4){ width:30%; height:34%;
  background:linear-gradient(to top, #ffe082, #ffffff);
  animation-duration:1.05s; animation-delay:-.8s }

/* Organischer als reines Skalieren: die Flamme legt sich beim Zucken auch
   leicht zur Seite, statt nur schmaler und breiter zu werden. */
@keyframes flick{
  0%,100%{ transform:translateX(-50%) rotate(-45deg) scale(1,1)      skewX(0deg)   }
  20%    { transform:translateX(-53%) rotate(-45deg) scale(.90,1.14) skewX(-3deg)  }
  42%    { transform:translateX(-47%) rotate(-45deg) scale(1.08,.92) skewX(2.5deg) }
  63%    { transform:translateX(-52%) rotate(-45deg) scale(.95,1.07) skewX(-1.5deg)}
  81%    { transform:translateX(-49%) rotate(-45deg) scale(1.03,.97) skewX(1deg)   }
}
@keyframes glowpulse{
  0%,100%{ opacity:.55; transform:translateX(-50%) scale(1)    }
  50%    { opacity:.95; transform:translateX(-50%) scale(1.14) }
}

/* ---------- Knopf in der Kopfzeile ---------- */
.burnbtn{
  display:inline-flex; align-items:center; gap:9px; white-space:nowrap;
  padding:7px 14px 7px 11px; border-radius:999px;
  border:1px solid color-mix(in srgb, #ff6d00 42%, var(--line));
  background:var(--panel-2);
  box-shadow:inset 0 0 18px -12px #ff9100;
  transition:border-color .15s var(--ease), box-shadow .15s var(--ease),
             transform .15s var(--ease);
}
.burnbtn:hover{
  border-color:#ff9100; transform:translateY(-1px);
  box-shadow:0 0 22px -10px #ff6d00, inset 0 0 18px -10px #ff9100;
}
.burnval{ font-family:var(--font-display); font-weight:700; font-size:13.5px;
  font-variant-numeric:tabular-nums }
.burnsym{ font-family:var(--font-display); font-weight:700; font-size:11px;
  letter-spacing:.1em; color:var(--ink-faint) }

/* Die Kopfzeile ist voll — gemessen im schlimmsten Fall, also bei verbundener
   Wallet, wenn auch der Auszahl-Knopf mitläuft. Ohne diese Staffelung rutschte
   „Wallet verbinden" in die zweite Zeile.
   Erst werden die Abstände enger (hilft allen Elementen), dann weicht die
   Einheit, dann der ganze Knopf. Der Burn-Bereich über der Fußzeile ist ja
   auf jeder Seite erreichbar — der Knopf ist nur die Abkürzung dorthin. */
@media (max-width:1360px){ .topbar-in{ gap:10px } }
@media (max-width:1300px){ .burnsym{ display:none } }
@media (max-width:1240px){ .burnbtn{ display:none } }

/* ---------- Der große Bereich über der Fußzeile ---------- */
.burnzone{
  position:relative; overflow:hidden; isolation:isolate;
  margin:34px 0 0; padding:30px var(--pad) 26px;
  border-radius:var(--r-lg);
  border:1px solid #241f30;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(130,95,200,.12), transparent 65%),
    linear-gradient(180deg, #0a0c16 0%, #131120 55%, #08070d 100%);
  color:#f6efe6;
}

/* Fragezeichen statt Erklaertext — verlinkt in Help & Info, an der Stelle,
   die die Mechanik ohnehin schon erklaert (600er-Boden, Buyback & Burn). */
.bz-help{
  position:absolute; top:16px; right:16px; z-index:1;
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12.5px; font-weight:700; line-height:1; color:#e0cdb8;
  border:1px solid rgba(255,180,90,.35); background:rgba(20,16,28,.55);
  backdrop-filter:blur(4px);
  transition:color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.bz-help:hover{ color:#ffd873; border-color:#ffab40; background:rgba(40,28,14,.7) }

/* ---------- Hintergrund-Layer ----------
   Dunkler Sci-Fi-Verlauf (Navy → Anthrazit mit Lila-Anflug, oben im
   .burnzone-Hintergrund selbst) plus ein warmer Energie-Pool am unteren
   Rand und feine treibende Partikel. Bewusst KEINE Flammen-Silhouette mehr:
   bei dieser Größe las sich jede Zunge als gelber Blob, kein Nachjustieren
   an Form/Farbe hat das behoben. Abstrakter Glow + Partikel liest sich
   zuverlässig als „Energie", reine Deko-Ebene ohne Text. */
.bz-bg{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
}

/* Grosse unscharfe Energie-Orbs hinter allem — geben Tiefe, bevor ueberhaupt
   etwas sich bewegt. Ueberwiegend warmes Amber, zwei kuehlere violette
   darunter gemischt, sonst wirkt die Flaeche einfarbig statt wie ein
   Reaktorfenster. Bewegung ist bewusst langsam und klein (Drift + Atmen),
   das ist Tiefe, kein Effekt. */
.bz-orbs i{
  position:absolute; border-radius:50%; filter:blur(40px);
  mix-blend-mode:screen; will-change:transform, opacity;
  animation:bzorbdrift 15s ease-in-out infinite;
}
.bz-orbs i:nth-child(1){ left:6%;  top:2%;  width:220px; height:220px;
  background:radial-gradient(circle, rgba(255,170,60,.75), transparent 70%); animation-delay:-2s }
.bz-orbs i:nth-child(2){ left:60%; top:-6%; width:180px; height:180px;
  background:radial-gradient(circle, rgba(150,110,255,.42), transparent 70%); animation-delay:-8s }
.bz-orbs i:nth-child(3){ left:70%; top:34%; width:260px; height:260px;
  background:radial-gradient(circle, rgba(255,140,40,.72), transparent 70%); animation-delay:-4.5s }
.bz-orbs i:nth-child(4){ left:0%;  top:48%; width:130px; height:130px;
  background:radial-gradient(circle, rgba(255,205,120,.55), transparent 70%); animation-delay:-11s }
.bz-orbs i:nth-child(5){ left:36%; top:14%; width:150px; height:150px;
  background:radial-gradient(circle, rgba(125,95,225,.35), transparent 70%); animation-delay:-.5s }
/* Rechte untere Ecke war leer — die Sektion wirkte einseitig nach links
   gewichtet. Dieser Orb balanciert die Komposition. */
.bz-orbs i:nth-child(6){ left:80%; top:68%; width:190px; height:190px;
  background:radial-gradient(circle, rgba(255,160,55,.6), transparent 70%); animation-delay:-6.5s }

@keyframes bzorbdrift{
  0%,100%{ transform:translate(0,0)     scale(1);    opacity:.55 }
  50%    { transform:translate(12px,-9px) scale(1.08); opacity:.8  }
}

/* Warmer Pool, der von unten Licht abgibt und leise atmet — zwei Verlaeufe
   uebereinander (enger heller Kern, breiterer weicher Schein) fuer mehr
   Tiefe als eine einzelne flache Flaeche. */
.bz-pool{
  position:absolute; left:0; right:0; bottom:-22%; height:72%;
  background:
    radial-gradient(46% 88% at 50% 100%, rgba(255,200,100,.68), transparent 68%),
    radial-gradient(72% 100% at 50% 100%, rgba(255,140,30,.46), transparent 74%);
  filter:blur(2px);
  animation:bzbreathe 6s ease-in-out infinite;
}
@keyframes bzbreathe{ 0%,100%{ opacity:.8 } 50%{ opacity:1 } }

/* Ein paar deutlich sichtbare Funken — steigen schnell auf (2.4-3.6s statt
   der 7-11s der Staub-Partikel) und liefern die Bewegung, die dem ruhigen
   Hintergrund vorher fehlte. ease-out statt linear, damit die Bewegung
   ausklingt statt abrupt zu stoppen — sonst wirkt es nach Spielexplosion
   statt nach Reaktorfenster. */
.bz-sparks i{
  position:absolute; border-radius:50%; background:#ffd873;
  box-shadow:0 0 18px 4px rgba(255,175,60,.95);
  opacity:0; animation:bzsparkrise ease-out infinite;
}
.bz-sparks i:nth-child(1){ left:15%; bottom:6%;  width:9px;  height:9px;  animation-duration:3.2s; animation-delay:-.4s  }
.bz-sparks i:nth-child(2){ left:34%; bottom:10%; width:11px; height:11px; animation-duration:2.6s; animation-delay:-1.6s }
.bz-sparks i:nth-child(3){ left:52%; bottom:4%;  width:8px;  height:8px;  animation-duration:3.6s; animation-delay:-2.2s }
.bz-sparks i:nth-child(4){ left:69%; bottom:12%; width:10px; height:10px; animation-duration:2.9s; animation-delay:-.9s  }
.bz-sparks i:nth-child(5){ left:85%; bottom:7%;  width:13px; height:13px; animation-duration:3.4s; animation-delay:-1.1s }
.bz-sparks i:nth-child(6){ left:24%; bottom:16%; width:9px;  height:9px;  animation-duration:2.4s; animation-delay:-2.6s }

@keyframes bzsparkrise{
  0%   { transform:translateY(0)      scale(.5); opacity:0  }
  15%  { opacity:1 }
  100% { transform:translateY(-125px) scale(.6); opacity:0  }
}

/* Partikel — treiben langsam nach oben, driften leicht seitlich, verglimmen.
   Zwei Farbtöne (warmes Amber, blasses Gold) für etwas Tiefe statt eines
   einzelnen flachen Gelbs. */
.bz-particles i{
  position:absolute; border-radius:50%;
  background:#ffd54f; box-shadow:0 0 5px 1px rgba(255,150,40,.6);
  opacity:0; animation:bzdrift linear infinite;
}
.bz-particles i:nth-child(odd){ background:#ffe9b0; box-shadow:0 0 4px 1px rgba(255,200,120,.5) }

.bz-particles i:nth-child(1) { left:6%;  bottom:4%;  width:3px; height:3px; animation-duration:9.0s;  animation-delay:-0.0s }
.bz-particles i:nth-child(2) { left:13%; bottom:14%; width:2px; height:2px; animation-duration:7.4s;  animation-delay:-3.6s }
.bz-particles i:nth-child(3) { left:21%; bottom:2%;  width:3px; height:3px; animation-duration:10.2s; animation-delay:-1.8s }
.bz-particles i:nth-child(4) { left:29%; bottom:20%; width:2px; height:2px; animation-duration:8.1s;  animation-delay:-5.4s }
.bz-particles i:nth-child(5) { left:37%; bottom:8%;  width:3px; height:3px; animation-duration:9.6s;  animation-delay:-2.4s }
.bz-particles i:nth-child(6) { left:45%; bottom:16%; width:2px; height:2px; animation-duration:7.8s;  animation-delay:-6.6s }
.bz-particles i:nth-child(7) { left:53%; bottom:3%;  width:3px; height:3px; animation-duration:10.8s; animation-delay:-4.2s }
.bz-particles i:nth-child(8) { left:61%; bottom:12%; width:2px; height:2px; animation-duration:8.7s;  animation-delay:-1.2s }
.bz-particles i:nth-child(9) { left:69%; bottom:6%;  width:3px; height:3px; animation-duration:9.3s;  animation-delay:-7.2s }
.bz-particles i:nth-child(10){ left:77%; bottom:18%; width:2px; height:2px; animation-duration:7.1s;  animation-delay:-3.0s }
.bz-particles i:nth-child(11){ left:85%; bottom:5%;  width:3px; height:3px; animation-duration:10.5s; animation-delay:-5.9s }
.bz-particles i:nth-child(12){ left:92%; bottom:10%; width:2px; height:2px; animation-duration:8.4s;  animation-delay:-0.7s }
.bz-particles i:nth-child(13){ left:35%; bottom:26%; width:2px; height:2px; animation-duration:9.9s;  animation-delay:-4.8s }
.bz-particles i:nth-child(14){ left:58%; bottom:24%; width:2px; height:2px; animation-duration:8.9s;  animation-delay:-2.1s }

@keyframes bzdrift{
  0%   { transform:translate(0,0)        scale(.6); opacity:0   }
  12%  { opacity:.65 }
  55%  { transform:translate(8px,-70px)  scale(1);  opacity:.5  }
  100% { transform:translate(-6px,-150px) scale(.3); opacity:0  }
}

.bz-in{ position:relative; max-width:940px; margin:0 auto; text-align:center }

.bz-kicker{
  margin:0 0 6px; font-family:var(--font-display); font-size:10.5px; font-weight:700;
  letter-spacing:.19em; text-transform:uppercase; color:#ffab40;
}
.bz-title{
  margin:0 0 28px; font-size:clamp(24px, 4.4vw, 38px); font-weight:700; letter-spacing:.01em;
  background:linear-gradient(180deg, #fff8e1, #ffab40);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,150,50,.35));
}

/* ---------- Die drei Zahlen ---------- */
.bz-grid{
  display:grid; gap:14px; margin:0 auto 22px; max-width:820px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:720px){ .bz-grid{ grid-template-columns:1fr } }

.bz-tile{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:18px 14px 16px; border-radius:var(--r);
  border:1px solid #4a2f14; background:rgba(255,255,255,.035);
}
.bz-tile.hot{
  border-color:#ff8f00;
  background:linear-gradient(180deg, rgba(255,145,0,.15), rgba(255,61,0,.06));
  box-shadow:0 0 34px -14px #ff6d00;
}
.bz-lab{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#c9ab8c;
}
.bz-val{
  font-family:var(--font-display); font-variant-numeric:tabular-nums;
  font-size:clamp(26px, 4.6vw, 36px); font-weight:700; line-height:1.15;
  color:#fff8e1;
}
.bz-tile.hot .bz-val{ color:#ffc400; text-shadow:0 0 26px rgba(255,145,0,.55) }
.bz-unit{ font-family:var(--font-display); font-size:11px; font-weight:700;
  letter-spacing:.14em; color:#c9ab8c; margin-top:-2px }
.bz-usd{ margin-top:6px; font-size:13px; font-weight:600; color:#ffab40;
  font-variant-numeric:tabular-nums }

/* ---------- Fortschritt ---------- */
.bz-bar{ max-width:520px; margin:0 auto 18px }
.bz-track{
  height:9px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.09); border:1px solid #4a2f14;
}
.bz-track i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, #ff3d00, #ff9100 60%, #ffc400);
  box-shadow:0 0 18px -3px #ff6d00;
  transition:width .8s var(--ease);
}
.bz-barlab{ display:block; margin-top:7px; font-size:12px; color:#c9ab8c }

.bz-note{ margin:0 auto 22px; max-width:600px; font-size:12.5px; color:#b39b83 }

/* ---------- Fußbereich des Kastens ---------- */
.bz-foot{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:center;
}
.bz-addr{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  padding:9px 15px; border-radius:999px;
  border:1px solid #4a2f14; background:rgba(0,0,0,.32); color:#e0cdb8;
  transition:border-color .15s var(--ease), color .15s var(--ease);
}
.bz-addr:hover{ border-color:#ff9100; color:#fff8e1 }
.bz-addrlab{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:#c9ab8c;
}
.bz-addr .fmono{ font-size:12.5px }
.bz-tg{
  font-size:13px; font-weight:600; color:#ffab40; text-decoration:none;
  padding:9px 4px;
}
.bz-tg:hover{ color:#ffc400; text-decoration:underline }

@media (max-width:520px){
  .burnzone{ padding:30px 14px 28px }
  .bz-addr .fmono{ font-size:11px }
}

/* Wer Bewegung abgestellt hat, bekommt ein ruhiges Feuer statt gar keinem.
   Die Funken verschwinden ganz — ein stehender Punkt in der Luft ergibt
   ohne Bewegung keinen Sinn. */
@media (prefers-reduced-motion:reduce){
  .flame i, .bz-pool, .bz-orbs i{ animation:none }
  .bz-particles, .bz-sparks{ display:none }
}