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

:root {
  --bg: #1B1E24;
  --face: linear-gradient(145deg, #23272F 0%, #1A1D23 100%);
  --face-flat: #20242C;
  --inset: #191C22;
  --ink: #F2F5FA;
  --muted: #8A93A8;
  --line: #2B303A;
  --pill: #B7F34D;
  --pill-ink: #16220A;
  --purple: #A78BFA;
  --green: #4ADE80;
  --red: #FF6B6B;
  --gold: #F5B301;
  --radius: 22px;
  --nm-hi: rgba(255, 255, 255, 0.05);
  --nm-lo: rgba(0, 0, 0, 0.55);
  --shadow: 7px 7px 16px var(--nm-lo), -5px -5px 12px var(--nm-hi);
  --shadow-soft: 5px 5px 12px rgba(0, 0, 0, 0.45), -4px -4px 9px var(--nm-hi);
  --inset-shadow: inset 5px 5px 11px var(--nm-lo), inset -4px -4px 9px var(--nm-hi);
}

html, body { height: 100%; }

body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  min-height: 100dvh;
  overscroll-behavior: none;
  user-select: none;
}

#app {
  position: relative;
  z-index: 1;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 18px 16px 28px;
}

h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; }

/* ---------- Hintergrund: Orbs + Linien + Boost-Swooshes ---------- */
#bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

.orb { position: absolute; border-radius: 50%; filter: blur(75px); pointer-events: none; }
.orb.lime { width: 300px; height: 300px; background: #B7F34D; top: -80px; right: -100px; opacity: 0.16; animation: drift1 14s ease-in-out infinite; }
.orb.purple { width: 340px; height: 340px; background: #7C3AED; bottom: -110px; left: -130px; opacity: 0.18; animation: drift2 18s ease-in-out infinite; }
.orb.lime2 { width: 150px; height: 150px; background: #8B5CF6; top: 45%; right: -60px; opacity: 0.12; animation: drift3 11s ease-in-out infinite; }
@keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-50px, 60px) scale(1.15); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, -50px) scale(0.9); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-40px, -60px); } }

.swirls { position: absolute; inset: 0; width: 100%; height: 100%; }
.sw {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 140 260;
  animation: swflow 16s linear infinite;
}
.sw1 { stroke: rgba(255, 255, 255, 0.1); }
.sw4 { stroke: rgba(255, 255, 255, 0.08); animation-duration: 20s; animation-direction: reverse; }
@keyframes swflow { to { stroke-dashoffset: -400; } }

.swoosh {
  fill: none;
  stroke-linecap: round;
  opacity: 0;
  stroke-dasharray: 130 1000;
  stroke-dashoffset: 1130;
}
.swA { stroke: #B7F34D; stroke-width: 4; filter: drop-shadow(0 0 7px rgba(183, 243, 77, 0.75)); animation: boost 5.2s cubic-bezier(0.7, 0, 0.25, 1) 0.4s infinite; }
.swB { stroke: #A78BFA; stroke-width: 3.4; filter: drop-shadow(0 0 7px rgba(139, 92, 246, 0.75)); animation: boost 6.4s cubic-bezier(0.7, 0, 0.25, 1) 2.3s infinite; }
.swC { stroke: rgba(255, 255, 255, 0.7); stroke-width: 2.4; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); animation: boost 7.2s cubic-bezier(0.7, 0, 0.25, 1) 3.8s infinite; }
@keyframes boost {
  0% { stroke-dashoffset: 1130; opacity: 0; }
  5% { opacity: 0.95; }
  40% { stroke-dashoffset: -135; opacity: 0.95; }
  46%, 100% { stroke-dashoffset: -135; opacity: 0; }
}

/* ---------- Buttons & Chips (Neumorphismus) ---------- */
.btn {
  display: block;
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  background: linear-gradient(145deg, #C8FA69, #9FD93C);
  color: var(--pill-ink);
  box-shadow: var(--shadow), 0 0 26px rgba(183, 243, 77, 0.2);
  transition: box-shadow 0.15s;
}
.btn:active { box-shadow: inset 5px 5px 12px rgba(60, 90, 10, 0.45), inset -4px -4px 9px rgba(255, 255, 255, 0.25); }
.btn.ghost { background: var(--face); color: #B9C0CE; box-shadow: var(--shadow); }
.btn.ghost:active { box-shadow: var(--inset-shadow); }
.btn.small { padding: 10px 18px; font-size: 13.5px; width: auto; display: inline-block; }
.btn:disabled { opacity: 0.35; pointer-events: none; }

.chips { display: flex; gap: 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px; }
.chips::-webkit-scrollbar { display: none; }
/* Die Online-Tableiste hat seit dem Play-Tab fünf Einträge. Frei laufend
   wären sie breiter als der Screen, die Leiste würde scrollen und der aktive
   Tab aus dem Bild wandern. Deshalb hier gleiche Breite für alle statt
   Eigenbreite je Wort. */
.chips.otabs { gap: 6px; overflow-x: visible; }
.chips.otabs .chip {
  flex: 1 1 0; min-width: 0; padding: 11px 3px; text-align: center;
  /* mitwachsend, damit "Matchup" auch auf einem 320er noch ganz dasteht */
  font-size: clamp(10.5px, 3.15vw, 12px);
  letter-spacing: -0.1px;
}
.chip {
  border: none;
  background: var(--face);
  color: #B9C0CE;
  border-radius: 999px;
  padding: 11px 18px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.15s, color 0.15s;
}
.chip:active { box-shadow: var(--inset-shadow); }
.chip.active {
  background: linear-gradient(145deg, #C8FA69, #9FD93C);
  color: var(--pill-ink);
  box-shadow: var(--shadow-soft), 0 0 18px rgba(183, 243, 77, 0.22);
}

.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 10px; align-items: center; }
.spacer { flex: 1; }

/* ---------- Header ---------- */
.apphead { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.apphead .hello { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.apphead .sub { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.iconbtn {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--face);
  color: #C6CCDA;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  cursor: pointer;
  flex: none;
  box-shadow: var(--shadow-soft);
}
.iconbtn:active { box-shadow: var(--inset-shadow); }
.iconbtn svg { width: 18px; height: 18px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(245, 179, 1, 0.16);
  color: #F0C449;
}
.badge.live { background: rgba(74, 222, 128, 0.14); color: #6EE7A0; }

/* Marke in der Kopfzeile: Wortmarke oben, Beta-Kennzeichnung darunter.
   Erbt von .t-logo, damit der Markenverlauf auf ICON nur an einer Stelle definiert ist. */
/* Beide Spalten oben eingehaengt: nur so liegen Name und Wortmarke in derselben
   Zeile. Zentriert man sie stattdessen, verschiebt der Spielername darunter die
   linke Spalte nach unten und die Marke sitzt zu hoch. */
.headwho { min-width: 0; align-self: flex-start; }
/* Name und Wortmarke gleich gross, damit sie eine Zeile bilden, und bewusst
   kleiner als die 20px der uebrigen Kopfzeilen: bei 390px Displaybreite passt
   so auch ein Teamname mit 21 Zeichen daneben, statt abgeschnitten zu werden. */
.headwho .hello { font-size: 16px; line-height: 22px; }
.headbrand { flex: 0 0 auto; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
/* Gleiche Schriftgroesse wie der Teamname: damit haben Archivo und Manrope
   dieselbe Versalhoehe, die Zeile wirkt wie aus einem Guss und es braucht
   keinen optischen Ausgleich mehr. */
/* top gleicht aus, dass Archivo und Manrope die Grundlinie unterschiedlich hoch
   im Zeilenkasten setzen. Gleiche Schriftgroesse allein reicht dafuer nicht. */
.t-logo.hlogo { font-size: 16px; line-height: 22px; text-shadow: none; position: relative; top: 1.33px; }
.headbrand .badge { font-size: 9.5px; padding: 3px 8px; letter-spacing: 0.08em; }

/* ---------- Panels & Listen ---------- */
.panel {
  background: var(--face);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}
.section-title { font-size: 16px; font-weight: 800; margin: 18px 0 10px; display: flex; align-items: center; gap: 6px; }
.section-title .see { margin-left: auto; font-size: 12.5px; color: var(--muted); font-weight: 700; }

.prow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: none; }
.prow.selectable { cursor: pointer; border-radius: 12px; padding: 10px 8px; margin: 0 -8px; }
.prow.selectable:active { background: rgba(255, 255, 255, 0.04); }
.prow.selected { background: rgba(183, 243, 77, 0.08); outline: 2px solid #B7F34D; }
.prow.dim { opacity: 0.4; }
.avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.avatar.small { width: 34px; height: 34px; font-size: 11px; }
.prow .pinfo { min-width: 0; }
.prow .pname { font-weight: 800; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.prow .pmeta { font-size: 12px; color: var(--muted); font-weight: 700; margin-top: 1px; }
.prow .ppts { margin-left: auto; text-align: right; flex: none; }
.prow .ppts .val { font-size: 17px; font-weight: 800; }
.prow .ppts .lab { font-size: 10.5px; color: var(--muted); font-weight: 700; }

.poschip {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
  margin-right: 5px;
}

/* Status-Chips */
.injchip {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
  vertical-align: 1px;
}
.injchip.q { background: rgba(245, 179, 1, 0.18); color: #F0C449; }
.injchip.bad { background: rgba(255, 107, 107, 0.16); color: var(--red); }
.bye { color: var(--red); font-weight: 800; }

/* Strength of Schedule: Ampelfarben für den Gegner */
.sos-g { color: #6EE7A0; font-weight: 800; }
.sos-y { color: #F0C449; font-weight: 800; }
.sos-r { color: var(--red); font-weight: 800; }
.dcard .dsub { font-size: 10.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.livechip {
  font-size: 9.5px;
  font-weight: 800;
  color: #6EE7A0;
  background: rgba(74, 222, 128, 0.14);
  padding: 2px 7px 2px 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.livechip::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pulse 1.4s ease-in-out infinite;
}
.lockicon { width: 13px; height: 13px; color: var(--muted); flex: none; }
.firechip {
  font-size: 9.5px;
  font-weight: 800;
  color: #FDBA74;
  background: rgba(251, 146, 60, 0.16);
  padding: 2px 7px;
  border-radius: 999px;
}

/* Game-Day: Delta-Chips an den Zeilen + Event-Zeile im Hero */
.deltachip {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  padding: 1.5px 7px;
  border-radius: 999px;
  margin-top: 2px;
}
.deltachip.up { background: rgba(110, 231, 160, 0.16); color: #6EE7A0; }
.deltachip.down { background: rgba(255, 107, 107, 0.16); color: var(--red); }
.heroticker {
  margin-top: 12px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 800;
  animation: wordIn 0.4s ease both;
}
.heroticker.lead { color: #B7F34D; }
.prow.flash { animation: rowflash 1.4s ease 2; }
@keyframes rowflash {
  0%, 100% { background: transparent; }
  40% { background: rgba(183, 243, 77, 0.13); }
}

/* Verletzungs-Alarm */
.alert {
  display: flex;
  gap: 10px;
  align-items: center;
  border-radius: 14px;
  padding: 11px 13px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
}
.alert.warn { background: rgba(245, 179, 1, 0.12); color: #F0C449; }
.alert.bad { background: rgba(255, 107, 107, 0.12); color: var(--red); }
.alert .btn.small { margin-left: auto; flex: none; padding: 8px 14px; font-size: 12.5px; }
.alert-text b { font-weight: 800; }

/* ---------- Draft-Karten ---------- */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; perspective: 900px; padding: 4px; }
.dcard {
  background: var(--face);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px 12px 12px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s;
  position: relative;
}
.dcard:active { transform: scale(0.96); }
.dcard.disabled { opacity: 0.32; pointer-events: none; }
.dcard .avatar { width: 52px; height: 52px; font-size: 16px; margin: 24px 0 10px; }

/* Positions-Badge: macht die Position auf einen Blick erkennbar */
.posbadge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--pc);
  color: #101218;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.posbadge.intro {
  position: static;
  flex: none;
  font-size: 13px;
  padding: 8px 0;
  width: 64px;
  text-align: center;
  border-radius: 12px;
}

/* Kader-Intro */
.introrow {
  display: flex;
  align-items: center;
  gap: 13px;
  background: var(--face);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: var(--shadow-soft);
  animation: wordIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.2) both;
}
.introname { font-size: 15px; font-weight: 800; }
.introdesc { font-size: 12px; color: var(--muted); font-weight: 600; line-height: 1.4; margin-top: 2px; }
.dcard .dname { font-weight: 800; font-size: 14px; line-height: 1.2; min-height: 34px; }
.dcard .dmeta { font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 2px; }
.dcard .dppg { margin-top: 8px; font-size: 13px; font-weight: 800; }
.dcard .dppg span { color: var(--muted); font-weight: 700; font-size: 11px; }
.tierdot {
  position: absolute;
  top: 12px; right: 12px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
}
.tier1 { background: rgba(245, 179, 1, 0.2); color: #F0C449; }
.tier2 { background: rgba(200, 210, 225, 0.14); color: #C3CCDA; }
.tier3 { background: rgba(208, 144, 79, 0.16); color: #D0904F; }

/* Deal-Animation */
.dcard.deal { animation: deal 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.15) both; }
@keyframes deal {
  from { opacity: 0; transform: translateY(30px) rotateY(55deg) scale(0.82); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

/* Shiny: Gold für Tier 1 (Icons), Silber für Tier 2 (Starters) */
.dcard.shiny { overflow: hidden; }
.dcard.shiny::before { content: ''; position: absolute; inset: -60% -30%; pointer-events: none; }
@keyframes shine { 0% { transform: translateX(-65%); } 60%, 100% { transform: translateX(65%); } }
.dcard.shiny.gold {
  border-color: rgba(245, 179, 1, 0.75);
  background: linear-gradient(160deg, #262A32 45%, #332C18 115%);
  box-shadow: var(--shadow), 0 0 24px rgba(245, 179, 1, 0.18);
}
.dcard.shiny.gold::before {
  background: linear-gradient(115deg, transparent 40%, rgba(255, 230, 150, 0.28) 50%, rgba(255, 214, 100, 0.14) 54%, transparent 62%);
  animation: shine 2.6s ease-in-out infinite;
}
.dcard.shiny.gold .tierdot { background: var(--gold); color: #3d2e00; animation: pulse 1.6s ease-in-out infinite; }
.dcard.shiny.silver {
  border-color: rgba(190, 202, 218, 0.55);
  background: linear-gradient(160deg, #262A32 45%, #2B313C 115%);
  box-shadow: var(--shadow), 0 0 22px rgba(160, 178, 200, 0.14);
}
.dcard.shiny.silver::before {
  background: linear-gradient(115deg, transparent 40%, rgba(235, 242, 250, 0.22) 50%, rgba(186, 202, 220, 0.12) 54%, transparent 62%);
  animation: shine 3.1s ease-in-out infinite;
}
.dcard.shiny.silver .tierdot { background: linear-gradient(135deg, #E2E8EF, #A9B5C3); color: #39424e; animation: pulse 1.9s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* ---------- Kader-Leiste (nur Fotos, unter den Karten) ---------- */
.slotstrip { display: flex; gap: 5px; margin: 14px 0 4px; padding: 0 2px; }
.slotcell {
  flex: 1;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  min-width: 0;
}
.slotcell.filled { border: none; }
.slotcell .avatar { width: 100%; height: 100%; font-size: 9px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1.5px rgba(255, 255, 255, 0.12); }

/* ---------- Turn-Banner & Teilnehmer ---------- */
.turnbanner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 2px solid var(--uc);
  background: var(--face);
  box-shadow: var(--shadow);
  margin-bottom: 14px;
}
.turnbanner .hello { font-size: 18px; font-weight: 800; color: var(--uc); }
.turnbanner .sub { font-size: 12.5px; color: var(--muted); font-weight: 600; }

.uavatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--uc);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.uavatar svg { width: 55%; height: 55%; }
.uavatar.big { width: 52px; height: 52px; }
button.uavatar { border: none; cursor: pointer; font-family: inherit; padding: 0; transition: transform 0.12s; }
button.uavatar:active { transform: scale(0.9) rotate(-8deg); }
.pmark { display: inline-flex; vertical-align: -3px; }
.pmark svg { width: 15px; height: 15px; }

/* ---------- Sanduhr ---------- */
.hourglass { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.hourglass .icon { width: 18px; height: 18px; color: var(--muted); animation: flip 2s ease-in-out infinite; }
@keyframes flip { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } }
.timersec { display: block; text-align: right; font-size: 13px; font-weight: 800; margin-bottom: 3px; }
.timerbar { width: 56px; height: 6px; border-radius: 3px; background: var(--inset); box-shadow: var(--inset-shadow); overflow: hidden; }
.timerbar > div { height: 100%; background: var(--pill); border-radius: 3px; transition: width 1s linear; }
.timerbar.low > div { background: var(--red); }

/* ---------- Score-Hero ---------- */
.hero {
  background: var(--face);
  color: var(--ink);
  border-radius: 26px;
  padding: 20px 18px 18px;
  box-shadow: var(--shadow);
}
.hero .vsline { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.hero .hteam { text-align: center; min-width: 0; }
.hero .hname { font-size: 13px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero .hscore { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.hero .hlead { font-size: 11px; font-weight: 800; color: #6EE7A0; }
.hero .vs { font-size: 12px; font-weight: 800; color: var(--muted); }
.hero .meter { margin-top: 14px; height: 8px; border-radius: 4px; background: var(--inset); box-shadow: var(--inset-shadow); overflow: hidden; display: flex; }
.hero .meter > div { height: 100%; background: linear-gradient(90deg, #6EE7A0, #B7F34D); border-radius: 4px; transition: width 0.6s; }
.hero .updated { margin-top: 10px; font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; }

.lbrow { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.lbrow .lbrank {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.lbrow:first-child .lbrank { background: var(--gold); color: #3d2e00; }
.lbrow .lbname { font-size: 13.5px; font-weight: 700; width: 98px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.lbrow .lbbar { flex: 1; height: 8px; border-radius: 4px; background: var(--inset); overflow: hidden; }
.lbrow .lbbar > div { height: 100%; background: linear-gradient(90deg, #6EE7A0, #B7F34D); border-radius: 4px; transition: width 0.6s; }
.lbrow .lbpts { font-size: 14px; font-weight: 800; min-width: 44px; text-align: right; }

/* ---------- Startscreen ---------- */
.title-screen { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.title-screen.tdark { position: relative; z-index: 1; }

.t-hero {
  position: relative;
  padding: 30px 22px 26px;
  border-radius: 26px;
  background: var(--face);
  box-shadow: 10px 10px 24px var(--nm-lo), -7px -7px 18px var(--nm-hi), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transform: perspective(700px) rotateX(4deg);
  animation: heroFloat 5s ease-in-out infinite;
  overflow: hidden;
}
.t-hero::after {
  content: '';
  position: absolute;
  inset: -60% -30%;
  background: linear-gradient(115deg, transparent 44%, rgba(255, 255, 255, 0.06) 50%, transparent 56%);
  animation: shine 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroFloat {
  0%, 100% { transform: perspective(700px) rotateX(4deg) translateY(0); }
  50% { transform: perspective(700px) rotateX(4deg) translateY(-7px); }
}
.t-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #B7F34D;
  margin-bottom: 10px;
}
.t-logo {
  font-family: 'Archivo', 'Manrope', sans-serif;
  font-weight: 900;
  font-style: italic;
  /* Neun Buchstaben statt sieben: DRAFTICON ist rund 6,3x so breit wie die
     Schriftgroesse. 11,5vw haelt die Marke auf jedem Handy im Kartenrahmen,
     ab etwa 470px Breite steht sie wieder in voller Groesse. */
  font-size: clamp(30px, 11.5vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: #F4F6FA;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
}
.t-logo .t-num {
  padding: 0 0.15em;
  margin: 0 -0.15em;
  color: transparent;
  background: linear-gradient(135deg, #D9FF7E 12%, #B7F34D 42%, #A78BFA 82%, #8B5CF6 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.t-tagline {
  display: flex;
  gap: 9px;
  margin-top: 12px;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8A93A8;
}
.t-tagline .lime { color: #B7F34D; }
.t-tagline .purple { color: #A78BFA; }
.t-tagline span { animation: wordIn 0.5s cubic-bezier(0.2, 0.7, 0.3, 1.2) both; }
.t-tagline span:nth-child(1) { animation-delay: 0.15s; }
.t-tagline span:nth-child(2) { animation-delay: 0.3s; }
.t-tagline span:nth-child(3) { animation-delay: 0.45s; }
.t-tagline span:nth-child(4) { animation-delay: 0.6s; }
@keyframes wordIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.t-note { font-size: 12.5px; color: #78829A; font-weight: 600; line-height: 1.55; }

.name-input {
  width: 100%;
  padding: 15px 18px;
  border-radius: 999px;
  border: none;
  background: var(--inset);
  color: var(--ink);
  font-family: inherit;
  font-size: 15.5px;
  font-weight: 700;
  outline: none;
  box-shadow: var(--inset-shadow);
}
.name-input::placeholder { color: #5E6778; }
.name-input:focus { box-shadow: var(--inset-shadow), 0 0 0 2px rgba(183, 243, 77, 0.35); }

/* ---------- Packs ---------- */
.packwrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 12px 0 6px; }
.pack {
  position: relative;
  width: min(72%, 250px);
  aspect-ratio: 3 / 4.2;
  border-radius: 22px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  animation: packFloat 3.2s ease-in-out infinite;
}
.pack:active { transform: scale(0.97); }
@keyframes packFloat {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50% { transform: translateY(-9px) rotate(0.6deg); }
}
.pack.gold {
  color: #4a3600;
  background: linear-gradient(150deg, #FFE9A8 0%, #F5C43C 26%, #E8A200 52%, #FFDE8A 74%, #D99400 100%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.55), inset 0 -18px 40px rgba(150, 95, 0, 0.35), 0 18px 38px rgba(216, 150, 0, 0.35);
}
.pack.silver {
  color: #39424e;
  background: linear-gradient(150deg, #FFFFFF 0%, #DCE2E9 26%, #A4AFBB 52%, #F1F4F8 74%, #8B96A3 100%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.75), inset 0 -18px 40px rgba(85, 100, 118, 0.28), 0 18px 38px rgba(120, 135, 152, 0.3);
}
.pack.bronze {
  color: #4a2b0f;
  background: linear-gradient(150deg, #F6D8B8 0%, #D0904F 26%, #A6642F 52%, #EFC79B 74%, #8A4E20 100%);
  box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, 0.45), inset 0 -18px 40px rgba(105, 58, 20, 0.35), 0 18px 38px rgba(150, 95, 45, 0.32);
}
.packshine {
  position: absolute;
  inset: -50% -35%;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.35) 55%, transparent 63%);
  animation: shine 2.8s ease-in-out infinite;
  pointer-events: none;
}
.packstar { font-size: 34px; line-height: 1; color: rgba(255, 255, 255, 0.92); text-shadow: 0 2px 6px rgba(60, 45, 15, 0.4); }
.packlogo {
  font-family: 'Archivo', sans-serif; font-style: italic; font-weight: 900;
  letter-spacing: -0.04em; line-height: 0.84; text-align: center;
  color: #fff; text-shadow: 0 2px 10px rgba(55, 45, 25, 0.5);
  font-size: 46px;   /* Grundmass = Zeile DRAFT, ICON steht auf 1.33em */
}
.packlogo span { display: block; }
.packlogo .lo { font-size: 1.33em; }
.psPack .packlogo { font-size: 28px; }
.packsub { font-size: 10.5px; font-weight: 800; letter-spacing: 0.2em; opacity: 0.85; }
.packseal {
  position: absolute;
  bottom: 16px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  color: inherit;
}
.packhint { font-size: 13.5px; font-weight: 700; color: var(--muted); }

.pack.opening { animation: packOpen 0.72s cubic-bezier(0.35, 0, 0.4, 1) forwards; }
@keyframes packOpen {
  0% { transform: scale(1) rotate(0); }
  12% { transform: scale(1.02) rotate(-2.5deg); }
  24% { transform: scale(1.03) rotate(2.5deg); }
  36% { transform: scale(1.04) rotate(-2.5deg); }
  48% { transform: scale(1.05) rotate(2deg); }
  60% { transform: scale(1.07) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1.65) rotate(0); opacity: 0; }
}
.packflash {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(255, 240, 190, 0.9) 0%, rgba(255, 215, 100, 0.5) 28%, transparent 62%);
  animation: packFlash 0.7s ease-out forwards;
}
@keyframes packFlash {
  0% { opacity: 0; transform: scale(0.6); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- News ---------- */
.newscard {
  display: block;
  background: var(--face);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 14px;
  text-decoration: none;
  color: inherit;
}
.newscard:active { transform: scale(0.99); }
.newshead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.newsplayer { font-size: 13.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.newsmeta { font-size: 11px; color: var(--muted); font-weight: 700; margin-top: 1px; text-transform: capitalize; }
.newslink { margin-left: auto; color: var(--muted); font-size: 15px; font-weight: 800; }
.newstitle { font-size: 14.5px; font-weight: 800; line-height: 1.3; margin-bottom: 5px; }
.newstext {
  font-size: 12.5px;
  color: #9AA3B5;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Lade-Spinner ---------- */
.spinner {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 4px solid var(--line);
  border-top-color: var(--pill);
  animation: spin 0.9s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- End-Screen ---------- */
.end-screen { flex: 1; display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 16px; }
.trophy {
  width: 92px; height: 92px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--face);
  box-shadow: var(--shadow), 0 0 34px rgba(245, 179, 1, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  animation: bounce 1.2s ease infinite;
}
.trophy svg { width: 48px; height: 48px; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.note { font-size: 12.5px; color: var(--muted); font-weight: 600; text-align: center; line-height: 1.5; }
.linkbtn { background: none; border: none; font-family: inherit; color: var(--muted); font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 8px; }

/* ---------- Bottom Sheet ---------- */
#sheet { position: fixed; inset: 0; z-index: 100; }
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 11, 0.62);
  backdrop-filter: blur(3px);
  animation: sheetfade 0.2s ease;
}
@keyframes sheetfade { from { opacity: 0; } to { opacity: 1; } }
.sheet-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, #262A33 0%, #1D2027 100%);
  border-radius: 26px 26px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  max-height: 72vh;
  overflow-y: auto;
  animation: sheetup 0.28s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes sheetup { from { transform: translateY(100%); } to { transform: none; } }
.sheet-handle {
  width: 42px; height: 4.5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  margin: 4px auto 14px;
}
.sheet-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.sheet-head .avatar { width: 46px; height: 46px; }
.sheet-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

/* Pack-Optionen im Trade-Sheet */
.packopts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.packopt {
  border: none;
  border-radius: 18px;
  padding: 16px 10px 13px;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  transition: transform 0.12s;
}
.packopt:active { transform: scale(0.96); }
.packopt:disabled { opacity: 0.35; pointer-events: none; filter: grayscale(0.6); }
.packopt.gold {
  color: #4a3600;
  background: linear-gradient(150deg, #FFE9A8 0%, #F5C43C 40%, #E8A200 100%);
  box-shadow: 0 10px 26px rgba(216, 150, 0, 0.35), inset 0 0 0 2px rgba(255, 255, 255, 0.45);
}
.packopt.silver {
  color: #39424e;
  background: linear-gradient(150deg, #FFFFFF 0%, #DCE2E9 40%, #A4AFBB 100%);
  box-shadow: 0 10px 26px rgba(120, 135, 152, 0.3), inset 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.packopt .po-star { font-size: 24px; line-height: 1; }
.packopt .po-name { font-size: 15px; }
.packopt .po-desc { font-size: 10.5px; font-weight: 700; opacity: 0.8; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: var(--pill);
  color: var(--pill-ink);
  font-size: 13.5px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  z-index: 90;
  animation: toastin 0.25s ease;
  max-width: 90vw;
  text-align: center;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Online: Anmeldung, Profil, Bottom-Nav ---------- */
.bottomnav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  max-width: 480px;
  margin: 0 auto;
  display: grid;
  /* Fuenf Spalten seit dem Lokal-Tab. Mit fester Vierteilung waere der
     fuenfte Knopf in eine zweite Zeile gerutscht. */
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: rgba(27, 30, 36, 0.94);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.navbtn {
  background: none; border: none; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 1px; border-radius: 14px; min-width: 0;
  color: var(--muted); font-size: 10px; font-weight: 700;
}
.navbtn span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.navbtn svg { width: 22px; height: 22px; }
.navbtn.active { color: var(--pill); }
.navbtn:active { background: var(--inset); }
.navpad { padding-bottom: 88px; }

.authbox {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 18px; text-align: center; display: grid; gap: 8px;
}
.authbox h2 { font-size: 19px; }
.note.err { color: var(--red); }

.soon {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 24px 18px; text-align: center; display: grid; gap: 8px;
}
.soon h3 { font-size: 16.5px; }

.flabel {
  /* Als <label> von Haus aus inline, und bei inline-Elementen ignoriert der
     Browser vertikale Abstaende. In den Flex-Spalten faellt das nicht auf
     (dort wird ohnehin blockifiziert), im Matchup klebte die Ueberschrift
     deshalb am Kader darueber. */
  display: block;
  font-size: 11.5px; font-weight: 800; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.08em; margin: 6px 0 -6px 4px;
}

.codebox {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--inset); box-shadow: var(--inset-shadow);
  border-radius: 16px; padding: 10px 12px 10px 18px;
}
.codebox b { font-family: Archivo, system-ui, sans-serif; font-size: 20px; font-weight: 900; letter-spacing: 0.14em; }

/* ---------- Online: Ligenliste und Lobby ---------- */
.leaguecard {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--face); border: none; border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px 16px;
  font-family: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.leaguecard:active { box-shadow: var(--inset-shadow); }
.lname { font-size: 15.5px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaguecard .sub, .lobbyrow .sub, .lobbyhead .sub { font-size: 12px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.lcode {
  font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 13px;
  letter-spacing: 0.1em; color: var(--pill);
  background: var(--inset); box-shadow: var(--inset-shadow);
  border-radius: 10px; padding: 6px 10px;
}
.lobbyrow {
  display: flex; align-items: center; gap: 12px;
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 10px 14px; margin-bottom: 12px; min-height: 62px;
}
.lobbyhead { text-align: center; padding: 4px 0 8px; }
.codeinput { text-align: center; letter-spacing: 0.22em; text-transform: uppercase; font-family: Archivo, system-ui, sans-serif; font-weight: 900; }

/* ---------- Home-Screen: Freunde-Teams und Rivalen ---------- */
.friendcard {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2px 12px; margin-bottom: 10px;
}
.friendcard.rival { box-shadow: var(--shadow), 0 0 0 1.5px rgba(245, 179, 1, 0.45); }
.frow { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.rivalstar {
  background: none; border: none; cursor: pointer; padding: 8px 2px;
  /* Hell genug, dass man ihn als Knopf erkennt: Er ist der einzige Weg zur
     Rivalen-Markierung, ein kaum sichtbares Grau war zu leise dafuer. */
  font-size: 19px; line-height: 1; color: #5A6478;
}
.rivalstar.on { color: var(--gold); text-shadow: 0 0 10px rgba(245, 179, 1, 0.5); }

/* ---------- Frage des Tages (Phase 8) ---------- */
.betcard { margin-bottom: 14px; padding: 14px 16px; }
.bethead { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.betlabel { font-size: 10.5px; font-weight: 900; letter-spacing: 0.14em; color: var(--pill); }
.betcredits { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--purple); }
.betq { font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.betq b { font-weight: 900; }
.betq.dim { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.betbtns { display: flex; gap: 10px; margin: 13px 0 9px; }
.betbtns .btn { flex: 1; width: auto; }
.bethint { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.5; }
.betres { font-size: 13px; font-weight: 800; margin-top: 7px; }
.betres.win { color: var(--pill); }
.betres.loss { color: var(--muted); }
.betstrip { display: flex; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--line); }
.bmark { font-size: 12px; font-weight: 900; line-height: 1; }
.bmark.win { color: var(--pill); }
.bmark.loss { color: var(--red); }
.bmark.open { color: var(--purple); }
.bmark.skip { color: #3A4150; }

/* Installations-Hinweis im Online-Bereich. Der Inhalt ist entweder ein
   ausgewachsener .btn (Android) oder ein Hinweistext (iOS), deshalb hier
   nur die Zeile drumherum. */
.installbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.installbar .btn { margin: 0; }
.installbar .note { text-align: left; margin: 0; }
.installbar .removex { flex: 0 0 auto; }

/* ---------- Play-Tab: Banner, Credits, Wetten, Rangliste ---------- */
.betbanner {
  display: flex; align-items: center; gap: 12px;
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; margin-bottom: 14px;
  border: 1px solid rgba(183, 243, 77, 0.28);
}
.betbannertext { flex: 1; min-width: 0; }
.betbannersub { font-size: 12.5px; font-weight: 700; color: #C8D0DE; margin-top: 3px; }
.betbanner .btn { width: auto; flex: 0 0 auto; }
.cdot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pill); margin-left: 5px; vertical-align: middle;
  box-shadow: 0 0 7px rgba(183, 243, 77, 0.8);
}
.wrow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 2px; font-size: 12.5px; font-weight: 600;
}
.wrow + .wrow { border-top: 1px solid var(--line); }
.wrow.me { color: var(--pill); }
.wkey { flex: 0 0 auto; font-weight: 800; color: #C8D0DE; }
.wrow.me .wkey { color: var(--pill); }
.wval { flex: 1; text-align: right; color: var(--muted); }
.wval.good { color: var(--pill); }
.wsep { height: 1px; background: var(--line); margin: 8px 0; }
.trank { display: inline-block; min-width: 20px; color: var(--muted); font-weight: 900; }
.tpct { color: #5C6579; font-weight: 700; margin-left: 4px; }
/* In der Klapp-Zeile muss der lange Satz links umbrechen duerfen und
   "wofuer?" rechts auf einer Linie stehen bleiben. Ohne das schiebt der
   nicht schrumpfende Schluessel den Rest in die naechste Zeile. */
.wtoggle { cursor: pointer; align-items: baseline; }
.wtoggle .wkey { flex: 1 1 auto; min-width: 0; }
.wtoggle .wval { flex: 0 0 auto; white-space: nowrap; }
.wtoggle .fchev { transition: transform 0.15s; display: inline-block; }
.fchev.open { transform: rotate(90deg); color: var(--pill); }

/* Ein Duell ist eine Karte mit zwei Seiten. Die Zahl rechts ist vor dem
   ersten Anstoß die Prognose und danach der Live-Stand: vorher als
   Entscheidungsgrundlage, nachher als Spannung. */
.duelcard {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 8px 12px 10px; margin-bottom: 10px;
}
.duelcard.won { box-shadow: var(--shadow), inset 0 0 0 1.5px rgba(183, 243, 77, 0.35); }
.duelcard.lost { opacity: 0.6; }
.duelside { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.duelside + .duelside { border-top: 1px solid var(--line); }
.duelname { flex: 1; min-width: 0; font-size: 14px; font-weight: 800; }
.duelpick {
  font-size: 10px; font-weight: 900; letter-spacing: 0.06em; color: var(--pill);
  background: rgba(183, 243, 77, 0.12); border-radius: 999px; padding: 2px 7px; margin-left: 4px;
}
.duelside.picked .duelname { color: var(--pill); }
.duelpts { text-align: right; line-height: 1.15; }
.duelpts b { display: block; font-size: 16px; font-weight: 900; }
.duelpts span { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.duelroster { padding: 2px 0 6px; }
.duelfoot {
  border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px;
  font-size: 12px; font-weight: 700; color: #C8D0DE; text-align: center;
}
.duelnote { font-size: 11px; font-weight: 600; color: var(--muted); }
.duelbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.duelbtns .chip { flex: 1 1 0; min-width: 0; }
.section-title .see .chip.small { margin-left: 6px; }

/* ---------- Online: Verletzungs-Alarm ---------- */
.injwarn { border: 1px solid rgba(255, 107, 107, 0.35); }
.injrow { display: flex; align-items: center; gap: 8px; padding: 7px 2px; font-size: 12.5px; font-weight: 600; color: #C8D0DE; }
.injrow + .injrow { border-top: 1px solid var(--line); }
.lobbyrow.rival { box-shadow: inset 0 0 0 1.5px rgba(245, 179, 1, 0.4); }
.rivalmark { color: var(--gold); font-size: 14px; line-height: 1; }
.linkbtn.inline { padding: 0; font-size: 12px; color: var(--pill); text-decoration: underline; }

/* ---------- Head-to-Head ---------- */
.h2hstat { display: flex; align-items: center; justify-content: space-between; padding: 9px 2px; font-size: 13px; font-weight: 700; color: var(--muted); }
.h2hstat + .h2hstat { border-top: 1px solid var(--line); }
.h2hstat b { color: var(--ink); font-family: Archivo, system-ui, sans-serif; font-size: 15px; }
.h2hweek { display: flex; align-items: center; gap: 10px; padding: 9px 2px; font-size: 13px; font-weight: 700; }
.h2hweek + .h2hweek { border-top: 1px solid var(--line); }
.h2hwk { display: flex; flex-direction: column; line-height: 1.1; width: 46px; }
.h2hseason { font-size: 10px; color: var(--muted); font-weight: 600; }
.h2hres { flex: 1; color: var(--muted); }
.h2hres.up { color: var(--green); }
.h2hres.down { color: var(--red); }
.h2hpts { font-family: Archivo, system-ui, sans-serif; font-weight: 900; }
.h2hopen { cursor: pointer; }

/* ---------- Startscreen: Teaser ---------- */
.tteaser {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 16px 14px; margin: 4px 0 16px; text-align: center;
}
.tteaserrow { display: flex; align-items: center; gap: 10px; text-align: left; font-size: 12.5px; font-weight: 600; color: #C8D0DE; padding: 7px 0; }
.tteaserrow + .tteaserrow { border-top: 1px solid var(--line); }
.tt-ico { width: 20px; height: 20px; color: var(--pill); flex: none; }
.tt-ico svg { width: 20px; height: 20px; }
.tweek { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; color: var(--muted); text-transform: uppercase; }
.tscore { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 40px; line-height: 1.05; margin: 2px 0; }
.tscorelab { font-size: 11px; font-weight: 800; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; }
.tduel { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.tduelname { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tduelrec { font-size: 11px; color: var(--muted); font-weight: 800; }
.tduelpts { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 16px; }
.tduelpts.up { color: var(--green); }
.tduelpts.down { color: var(--red); }
.tnote { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gtime { color: #9AA4B6; font-weight: 700; }

/* ---------- Bestenlisten ---------- */
.rankrow { display: flex; align-items: center; gap: 10px; padding: 9px 2px; }
.rankrow + .rankrow { border-top: 1px solid var(--line); }
.rankrow.me { background: rgba(183, 243, 77, 0.07); border-radius: 12px; padding-left: 8px; padding-right: 8px; }
.rankno { width: 30px; text-align: center; font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 15px; color: var(--muted); }
.rankrow.me .rankno { color: var(--pill); }
.rankrow .uavatar.small { width: 30px; height: 30px; border-radius: 10px; box-shadow: none; }
.rankrow .uavatar.small svg { width: 17px; height: 17px; }
.rankrow .sub { font-size: 11.5px; color: var(--muted); font-weight: 600; margin-top: 1px; }
.rankpts { text-align: right; }
.rankpts .val { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 16px; }
.rankpts .lab { font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.rankme { font-size: 12.5px; font-weight: 700; color: var(--pill); text-align: center; margin-bottom: 10px; }
.rankme.dim { color: var(--muted); font-weight: 600; }
select.name-input { appearance: none; background-image: none; cursor: pointer; }
.chip.small { padding: 7px 13px; font-size: 12px; }

/* ---------- Wochen-Recap ---------- */
.recap {
  background: linear-gradient(150deg, rgba(183,243,77,0.10), rgba(139,92,246,0.10)), var(--face);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 16px; text-align: center;
}
.recaphead { display: flex; align-items: center; gap: 8px; }
.recapweek { flex: 1; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pill); }
.recapscore { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 42px; line-height: 1.05; margin: 4px 0 2px; }
.recapsub { font-size: 12px; font-weight: 700; color: #C8D0DE; }
.recskill { font-size: 12px; font-weight: 700; margin-top: 8px; }
.recskill.up { color: var(--green); }
.recskill.down { color: #9AA4B6; }
.recduels { font-size: 12px; font-weight: 700; color: var(--muted); margin-top: 6px; }
.recawards { margin-top: 12px; display: grid; gap: 8px; }
.recaward { display: flex; align-items: center; gap: 10px; background: var(--inset); border-radius: 14px; padding: 8px 12px; text-align: left; }
.recawlabel { font-size: 9.5px; font-weight: 900; letter-spacing: 0.1em; color: var(--pill); }
.recawtext { font-size: 12.5px; font-weight: 700; margin-top: 1px; }

/* Freundesliste im Matchup: mehr Luft zwischen den Karten und Zeilen */
.friendcard { padding: 6px 14px 8px; margin-bottom: 12px; }
.frow { gap: 12px; padding: 6px 0; min-height: 52px; }
.friendcard .lname { font-size: 15px; }
.friendcard .sub { margin-top: 3px; }
.friendcard .ppts .val { font-size: 18px; }
.fchev { color: var(--muted); font-size: 22px; line-height: 1; padding-left: 2px; transition: transform 0.2s ease; }
.friendcard.open .fchev { transform: rotate(90deg); color: var(--pill); }
.friendcard.open { box-shadow: var(--shadow), inset 0 0 0 1px rgba(183, 243, 77, 0.25); }

/* ---------- Rivalen-Duell im Hero ---------- */
.duels { margin: 14px 0 2px; }
.duelchips { display: flex; gap: 6px; justify-content: center; margin-bottom: 8px; flex-wrap: wrap; }
.duelchip {
  display: flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,0.25); border: none; border-radius: 999px;
  padding: 5px 11px; font-family: inherit; font-size: 11.5px; font-weight: 800;
  color: #9AA4B6; cursor: pointer;
}
.duelchip.active { background: rgba(245,179,1,0.16); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(245,179,1,0.45); }
.dtrend { font-size: 9px; line-height: 1; color: var(--muted); }
.dtrend.up { color: var(--green); }
.dtrend.down { color: var(--red); }

.duelrow { position: relative; background: rgba(0, 0, 0, 0.24); border-radius: 14px; padding: 10px 12px 11px; }
/* Avatar und Name mittig, die Verlaufskurve haengt rechts daneben, ohne
   die Mitte zu verschieben */
.duelhead { display: flex; align-items: center; justify-content: center; gap: 9px; }
.duelhead .uavatar.small { width: 24px; height: 24px; border-radius: 9px; box-shadow: none; flex: 0 0 auto; }
.duelhead .uavatar.small svg { width: 14px; height: 14px; }
.duelname { flex: 0 1 auto; min-width: 0; max-width: 60%; text-align: left; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Die Differenz ist die Hauptfigur, die Punktestände stehen klein darunter */
.duelproj { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 30px; line-height: 1.05; margin-top: 6px; letter-spacing: -0.02em; }
.duelproj.up { color: var(--green); }
.duelproj.down { color: var(--red); }
.duelproj .duelvs { color: var(--muted); font-size: 20px; margin: 0 2px; }
.duelprojlab { font-size: 9px; font-weight: 900; letter-spacing: 0.14em; color: var(--muted); margin-top: 2px; }
.duelproj.flashup { animation: dflash-up 1.2s ease-out; }
.duelproj.flashdown { animation: dflash-down 1.2s ease-out; }
@keyframes dflash-up { 0% { transform: scale(1.18); text-shadow: 0 0 22px rgba(74,222,128,0.85); } 100% { transform: scale(1); text-shadow: none; } }
@keyframes dflash-down { 0% { transform: scale(1.18); text-shadow: 0 0 22px rgba(255,107,107,0.85); } 100% { transform: scale(1); text-shadow: none; } }
.duelrest b { font-family: Archivo, system-ui, sans-serif; }
.duelrest b.up { color: var(--green); }
.duelrest b.down { color: var(--red); }

.spark { position: absolute; top: 9px; right: 10px; width: 56px; height: 24px; }
.sparkzero { stroke: rgba(255,255,255,0.16); stroke-width: 1; }
.sparkline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sparkline.up { stroke: var(--green); }
.sparkline.down { stroke: var(--red); }

.hero .meter.duel { height: 4px; margin: 9px 0 7px; }
.hero .meter.duel > div { background: linear-gradient(90deg, #F5B301, #FFD873); }

.duelrest { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 700; color: var(--muted); }
.duelend.up { color: var(--green); }
.duelend.down { color: var(--red); }
.duelstate { font-size: 11.5px; font-weight: 800; color: var(--muted); text-align: left; margin-top: 4px; }
.duelstate.up { color: var(--green); }
.duelstate.down { color: var(--red); }
.duelhint { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* ---------- Avatar-Auswahl im Profil ---------- */
.avgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 2px; }
.avpick {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--face-flat); border: none; border-radius: 14px; cursor: pointer;
  color: #8A93A8; padding: 0;
}
.avpick svg { width: 60%; height: 60%; }
.avpick.on { background: var(--pill); color: var(--pill-ink); box-shadow: 0 0 0 2px rgba(183,243,77,0.35); }
.avpick:active { transform: scale(0.92); }
.colrow { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-top: 10px; }
.colpick { aspect-ratio: 1; border: none; border-radius: 50%; background: var(--uc); cursor: pointer; padding: 0; }
.colpick.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--uc); }
.colpick:active { transform: scale(0.9); }
.uavatar.rivalring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--gold); }
.duelstate.mid { text-align: center; margin-top: 8px; }
.avbar {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--face-flat); border: none; border-radius: 16px;
  padding: 10px 14px; cursor: pointer; font-family: inherit; color: var(--ink);
}
.avbar:active { transform: scale(0.99); }
.avbar .uavatar { width: 38px; height: 38px; box-shadow: none; }
.avbarlab { font-size: 14px; font-weight: 800; }
.avbarhint { font-size: 11.5px; font-weight: 600; color: var(--pill); margin-top: 1px; }
.headav { background: none; border: none; padding: 0; cursor: pointer; flex: 0 0 auto; }
.headav .uavatar { width: 40px; height: 40px; }
.headav:active { transform: scale(0.92); }
.apphead .hello { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duelempty { background: rgba(0,0,0,0.22); border-radius: 14px; padding: 12px; margin-top: 14px; }
.duelemptytitle { font-size: 13.5px; font-weight: 800; margin-bottom: 2px; }
.duelempty .duelhint { margin-top: 0; }
/* Silber, weil Gold den bereits markierten Rivalen vorbehalten ist */
.note.hintstrong { color: #C8D0DE; }

/* ---------- Vor dem Draft: Rivalität und das Pack-Versprechen ---------- */
.predraft {
  background: linear-gradient(160deg, rgba(183,243,77,0.09), rgba(139,92,246,0.09)), var(--face);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 16px; text-align: center;
}
.pdweek { font-size: 10.5px; font-weight: 900; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.pdtitle { font-size: 22px; line-height: 1.15; margin: 3px 0 4px; }
.pddruck { font-size: 12px; font-weight: 700; color: var(--pill); margin-bottom: 12px; }

.pdrivals { display: grid; gap: 8px; margin-bottom: 14px; }
.pdrival { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.24); border-radius: 14px; padding: 9px 12px; }
.pdrival .uavatar.small { width: 30px; height: 30px; border-radius: 11px; box-shadow: none; flex: 0 0 auto; }
.pdrival .uavatar.small svg { width: 17px; height: 17px; }
.pdname { font-size: 13.5px; font-weight: 800; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdsub { font-size: 11px; font-weight: 700; color: var(--muted); text-align: left; margin-top: 1px; }
.pdstate { text-align: right; flex: 0 0 auto; }
.pdpts { font-family: Archivo, system-ui, sans-serif; font-weight: 900; font-size: 16px; color: var(--gold); }
.pdlab { font-size: 8.5px; font-weight: 900; letter-spacing: 0.1em; color: var(--muted); }
.pdwait { font-size: 11px; font-weight: 800; color: var(--muted); }

/* Luft nach oben, damit die gedrehte obere Ecke des Packs der Ueberschrift
   nicht zu nahe kommt, wenn keine Rivalen-Zeilen dazwischen stehen. */
.pdpack { display: flex; align-items: center; gap: 14px; text-align: left; margin: 10px 0 14px; }
/* Kleiner als der Text daneben, nicht groesser: Vorher war das Pack 105 px
   hoch und der Textblock 90, es ragte oben und unten heraus und stiess mit
   der Drehung je nach Textlaenge an die Ueberschrift. */
.pack.mini {
  width: 60px; height: 84px; flex: 0 0 auto; border-radius: 10px;
  padding: 7px 5px; transform: rotate(-4deg);
}
.pack.mini .packstar { font-size: 16px; }
.pack.mini .packlogo { font-size: 11px; }
.pack.mini .packsub { font-size: 6px; letter-spacing: 0.08em; }
.pdpackline { font-size: 14px; font-weight: 800; }
.pdpacksub { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.pack.mini .packlogo { font-size: 8px; letter-spacing: -0.01em; }
.pack.mini .packseal { display: none; }
.pdinvite { background: rgba(0,0,0,0.24); border-radius: 16px; padding: 14px 14px 13px; margin-bottom: 14px; }
.pdinvitetitle { font-size: 15px; font-weight: 800; margin-bottom: 4px; }
.pdinvitetext { font-size: 12px; font-weight: 600; color: #C8D0DE; line-height: 1.5; margin-bottom: 12px; }
.pdinvitehint { font-size: 10.5px; font-weight: 600; color: var(--muted); margin-top: 8px; line-height: 1.45; font-style: italic; }
.tsolotitle { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin: 2px 0 2px; }
.tsolotext { font-size: 12px; font-weight: 600; color: #C8D0DE; line-height: 1.5; }
.tdruck { font-size: 12px; font-weight: 700; color: var(--pill); margin-top: 2px; }
.tinvitebtn { color: var(--pill); box-shadow: var(--shadow), inset 0 0 0 1px rgba(183,243,77,0.35); padding: 12px; font-size: 14.5px; }

/* ---------- Einladungslink-Screen ---------- */
.invitecard {
  background: linear-gradient(160deg, rgba(245,179,1,0.12), rgba(139,92,246,0.10)), var(--face);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px 16px 18px; text-align: center;
}
.inviteav { display: flex; justify-content: center; margin-bottom: 10px; }
.inviteav .uavatar.big { width: 64px; height: 64px; }
.invitename { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.invitehandle { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 1px; }
.invitechallenge { font-size: 13px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; }
.inviteperf { font-size: 12px; font-weight: 600; color: #C8D0DE; margin-top: 8px; line-height: 1.5; }
.invitestats { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.invitestat { flex: 1; background: rgba(0,0,0,0.28); border-radius: 12px; padding: 9px 4px; }
.invitestat b { display: block; font-family: Archivo, system-ui, sans-serif; font-size: 17px; font-weight: 900; color: var(--gold); }
.invitestat span { display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; margin-top: 2px; }
.invitechallenge { font-size: 12.5px; }
.tinvitesplit { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11.5px; font-weight: 700; color: var(--muted); }
.invitenote { font-size: 11px; font-weight: 700; color: var(--gold); margin-top: 12px; line-height: 1.45; }

/* ---------- Startscreen: Pack-Animation (laeuft von selbst) ---------- */
.packshow { pointer-events: none; user-select: none; margin: 2px 0 14px; }
.packshow-stage { position: relative; height: 210px; display: flex; align-items: center; justify-content: center; }

.psPack {
  position: absolute; width: 132px; height: 186px; padding: 12px 10px;
  animation: psPackLoop 9s ease-in-out infinite;
}
@keyframes psPackLoop {
  0%   { opacity: 1; transform: scale(1) rotate(-3deg); }
  16%  { opacity: 1; transform: scale(1.07) rotate(2deg); }
  22%  { opacity: 0; transform: scale(0.55) rotate(0deg); }
  84%  { opacity: 0; transform: scale(0.55) rotate(0deg); }
  93%  { opacity: 1; transform: scale(1.03) rotate(-2deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}

.pscard {
  position: absolute; width: 106px; padding: 8px 8px 10px;
  background: var(--face); border-radius: 14px; box-shadow: var(--shadow);
  text-align: center; opacity: 0;
  animation: psCard 9s ease-in-out infinite;
}
.pscard .posbadge { position: absolute; top: 7px; left: 7px; transform: scale(0.8); transform-origin: left top; }
.pscard .avatar { width: 46px; height: 46px; margin: 10px auto 6px; }
.psname { font-size: 11px; font-weight: 800; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pspts { font-family: Archivo, system-ui, sans-serif; font-size: 14px; font-weight: 900; color: var(--pill); margin-top: 3px; }
.pspts span { font-size: 8px; color: var(--muted); letter-spacing: 0.06em; }

.ps1 { animation-delay: 0.05s; --x: -74px; --r: -11deg; }
.ps2 { animation-delay: 0.18s; --x: 0px;   --r: 0deg; }
.ps3 { animation-delay: 0.31s; --x: 74px;  --r: 11deg; }

/* Es ist immer etwas zu sehen: erst das Pack, dann die Karten, dann wieder das Pack */
@keyframes psCard {
  0%, 20%  { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
  32%      { opacity: 1; transform: translate(var(--x), -6px) scale(1) rotate(var(--r)); }
  76%      { opacity: 1; transform: translate(var(--x), -6px) scale(1) rotate(var(--r)); }
  86%      { opacity: 0; transform: translate(var(--x), -16px) scale(0.94) rotate(var(--r)); }
  100%     { opacity: 0; transform: translate(0, 0) scale(0.5) rotate(0deg); }
}

.packshowcap { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: -6px; }

@media (prefers-reduced-motion: reduce) {
  .psPack, .pscard { animation: none; opacity: 1; }
  .psPack { display: none; }
  .pscard { position: relative; transform: none; }
  .packshow-stage { gap: 8px; height: auto; }
}
.psPack .packlogo { font-size: 24px; }
.psPack .packsub { font-size: 8.5px; letter-spacing: 0.16em; }
.psPack .packstar { font-size: 22px; }
/* Pack in der Animation kleiner, die Bühne behält ihre Höhe */
.psPack { width: 108px; height: 152px; padding: 10px 8px; }
.psPack .packlogo { font-size: 20px; }
.psPack .packsub { font-size: 7.5px; letter-spacing: 0.14em; }
.psPack .packstar { font-size: 18px; }

/* Einladung: Animation kompakt, Karte schlank, Herausforderung in Lime */
.packshow.compact { margin: 0 0 10px; }
.packshow.compact .packshow-stage { height: 156px; }
.packshow.compact .psPack { width: 88px; height: 124px; padding: 8px 6px; }
.packshow.compact .psPack .packlogo { font-size: 16px; }
.packshow.compact .psPack .packsub { font-size: 6.5px; }
.packshow.compact .psPack .packstar { font-size: 15px; }
.packshow.compact .pscard { width: 88px; padding: 7px 6px 8px; }
.packshow.compact .pscard .avatar { width: 38px; height: 38px; margin: 8px auto 5px; }
.packshow.compact .psname { font-size: 10px; }
.packshow.compact .pspts { font-size: 12px; }
.packshow.compact .ps1 { --x: -62px; }
.packshow.compact .ps3 { --x: 62px; }

.invitecard.slim { padding: 14px 14px 15px; }
.invitecard.slim .inviteav { margin-bottom: 7px; }
.invitecard.slim .inviteav .uavatar.big { width: 52px; height: 52px; }
.invitecard.slim .invitename { font-size: 19px; }
.invitecard .invitechallenge { color: var(--pill); }
.invitecard.slim .invitestats { margin-top: 10px; gap: 6px; }
.invitecard.slim .invitestat { padding: 7px 3px; }
.invitecard.slim .invitestat b { font-size: 15px; color: var(--pill); }
.invitecard.slim .invitestat span { font-size: 8.5px; }
.freechip {
  display: inline-block; margin-top: 12px; padding: 5px 12px;
  background: rgba(183, 243, 77, 0.14); border-radius: 999px;
  font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pill);
}

/* Entfernen als graues X ganz rechts, statt Textlink */
.removex {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  color: #5E6778; font-size: 18px; line-height: 1; padding: 6px 2px 6px 8px;
  font-family: inherit; font-weight: 700;
}
.removex:active { transform: scale(0.9); }
.removex.confirm { color: var(--red); font-size: 11.5px; font-weight: 800; }
/* Der Knopf steht neben dem Namen und bricht nicht um; der Name weicht ihm aus */
.lobbyrow .lname { font-size: 14.5px; }
.lobbyrow { gap: 10px; padding: 10px 12px; }
/* Name und Rivalen-Knopf teilen sich die obere Zeile, die Unterzeile
   bekommt darunter die volle Breite. So wird nichts abgeschnitten. */
.lcol { flex: 1; min-width: 0; }
.lnamerow { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lnamerow .lname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobbyrow .sub { white-space: normal; }
.pdsolo { font-size: 11.5px; font-weight: 700; color: var(--pill); margin: -6px 0 12px; line-height: 1.45; }

/* Mehr Luft zwischen den Bausteinen im Spiel-Tab */
.predraft { padding: 22px 16px 20px; }
.pdtitle { margin: 4px 0 6px; }
.pddruck { margin-bottom: 18px; }
.pdrivals { gap: 10px; margin-bottom: 20px; }
.pdpack { gap: 16px; margin-bottom: 18px; }
.pdinvite { margin: 22px 0 0; padding: 16px 14px 15px; }
.pdinvitetext { margin-bottom: 10px; }
.pdinvitehint { margin-top: 10px; }

#navcontent .hero { margin-bottom: 4px; }
#navcontent .section-title { margin-top: 22px; }
#navcontent .panel + .section-title { margin-top: 24px; }
#navcontent .soon { padding: 24px 18px; }
#navcontent .stack { gap: 14px; }
.recap { margin-bottom: 20px; }

/* ---------- Benachrichtigungen (Profil-Tab) ----------
   Der Kopf ist eine .avbar wie beim Avatar, damit die beiden Klappzeilen im
   Profil gleich aussehen. Statt des Avatars steht dort eine Glocke. */
.pushbell {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  background: var(--inset); box-shadow: var(--inset-shadow);
  display: flex; align-items: center; justify-content: center; color: var(--pill);
}
.pushbell svg { width: 20px; height: 20px; }
.pushbox {
  background: var(--face-flat); border-radius: 16px;
  padding: 12px 14px 14px; margin-top: -4px;
}
.pushbox .btn { margin-top: 10px; }
.pushbox .linkbtn { margin-top: 6px; }
.pushbox .note { margin: 0; }
.pushrow {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: none; padding: 11px 0; cursor: pointer;
  font-family: inherit; color: var(--ink); text-align: left;
}
.pushrow + .pushrow { border-top: 1px solid var(--line); }
.pushtext { flex: 1; min-width: 0; }
.pushlab { display: block; font-size: 13.5px; font-weight: 800; }
.pushhint {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--muted);
  margin-top: 2px; line-height: 1.4;
}
/* Der Schalter: aus ist grau und links, an ist lime und rechts. Farbe allein
   waere zu wenig, deshalb wandert der Punkt sichtbar mit. */
.tgl {
  flex: 0 0 auto; width: 42px; height: 24px; border-radius: 12px;
  background: var(--inset); box-shadow: var(--inset-shadow);
  position: relative; transition: background 0.18s;
}
.tgl i {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #6B7488; transition: transform 0.18s, background 0.18s;
}
.pushrow.on .tgl { background: rgba(183, 243, 77, 0.22); }
.pushrow.on .tgl i { transform: translateX(18px); background: var(--pill); }
.pushrow:active .tgl i { transform: scale(0.92) translateX(0); }
.pushrow.on:active .tgl i { transform: scale(0.92) translateX(18px); }

/* Leiser Einstieg zu den Benachrichtigungen im Play-Tab: eine Zeile im Stil der
   Einstellungen, aber als Karte, damit sie zwischen Frage und Credits nicht
   verloren geht. */
.playpush {
  background: var(--face); border-radius: var(--radius); box-shadow: var(--shadow-soft);
  padding: 11px 14px; margin-bottom: 14px;
  border: 1px solid rgba(183, 243, 77, 0.22);
}
.playpush + .playpush { border-top: none; }
.pushbell.small { width: 30px; height: 30px; }
.pushbell.small svg { width: 16px; height: 16px; }
.pushgo { flex: 0 0 auto; color: var(--pill); font-size: 20px; font-weight: 800; line-height: 1; }

/* Einmalige Erklärung, die man wegtippt (Trade-Tab). Flacher als eine Panel-
   Karte, damit sie nach Hinweis aussieht und nicht nach Inhalt. */
.hintcard {
  display: flex; align-items: flex-start; gap: 6px;
  background: var(--face-flat); border-radius: 16px;
  padding: 11px 10px 12px 14px; margin: 10px 0 12px;
}
.hintbody { flex: 1; min-width: 0; }
.hintbody p {
  font-size: 12.5px; font-weight: 600; color: #C8D0DE;
  line-height: 1.5; margin: 5px 0 0;
}
.hintcard .removex { margin-top: -3px; }