/* ============================================================
   screens.css — Screen-Layouts
   ============================================================ */

/* iOS: 16px verhindert Auto-Zoom auf Eingaben */
.input, .textarea, .select { font-size: 16px; }

/* ---------------- Layout-Container ---------------- */
#app-main { position: absolute; inset: 0; }
.view-container {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
}
.view {
  min-height: 100%;
  /* Die Nav schwebt 10px über der Unterkante – entsprechend mehr freihalten. */
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 24px);
  will-change: transform, opacity;
}
.screen-body { padding: var(--sp-4) var(--sp-4) 0; }
.section-head { margin: var(--sp-6) 2px var(--sp-3); }
.section-head:first-child { margin-top: var(--sp-2); }
.section-head .overline { position: relative; padding-left: 12px; color: var(--ink-600); }
.section-head .overline::before { content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%); width: 4px; height: 13px; border-radius: 2px; background: var(--fando); }

/* ---------------- Loader ---------------- */
.app-loader {
  position: absolute; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-5); background: var(--bg);
}
.loader-mark { display: flex; align-items: center; gap: var(--sp-3); }
.loader-logo {
  width: 52px; height: 61px; object-fit: contain;
  animation: scale-in 600ms var(--ease-spring) both, crown-float 3.8s var(--ease-in-out) 0.6s infinite;
}
.loader-words { display: flex; flex-direction: column; animation: fade-up var(--dur-4) var(--ease-out) 120ms both; }
.loader-word {
  font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: 1;
}
.loader-tag {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fando); margin-top: 3px;
}
.loader-bar { width: 132px; height: 4px; border-radius: 99px; background: var(--stone-200); overflow: hidden; }
.loader-bar span {
  display: block; height: 100%; width: 40%; border-radius: 99px; background: var(--fando);
  animation: loader-slide 1.1s var(--ease-in-out) infinite;
}
@keyframes loader-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* ---------------- Auth (immersives Hero + Karte) ---------------- */
#auth-root { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; }

.auth3 { min-height: 100%; display: flex; flex-direction: column; background: var(--surface); }

.auth3-hero {
  position: relative; overflow: hidden;
  padding: calc(var(--safe-top) + 32px) var(--sp-6) 54px;
  background: linear-gradient(150deg, #5aa233 0%, #43811f 60%, #356a1b 100%);
  color: #fff;
}
.auth3-hero::after { content: ""; position: absolute; right: -74px; top: -54px; width: 224px; height: 224px;
  border-radius: 50%; border: 36px solid rgba(255,255,255,0.07); }
.auth3-hero::before { content: ""; position: absolute; right: 62px; bottom: -34px; width: 120px; height: 120px;
  border-radius: 50%; border: 20px solid rgba(255,255,255,0.06); }
.auth3-brand { display: flex; align-items: center; gap: var(--sp-3); position: relative; z-index: 1; }
.auth3-logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.auth3-logo img { width: 26px; height: 31px; object-fit: contain; }
.auth3-headline { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight);
  line-height: 1.05; margin-top: 26px; position: relative; z-index: 1; }
.auth3-sub { color: rgba(255,255,255,0.84); margin-top: 8px; position: relative; z-index: 1; max-width: 300px; }

.auth3-card {
  flex: 1; background: var(--surface);
  border-radius: 26px 26px 0 0; margin-top: -24px; position: relative; z-index: 2;
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-8) + var(--safe-bottom));
  box-shadow: 0 -12px 30px rgba(35,37,37,0.10);
}
/* Rechtliches (Login-Karte + Profil-Fuß): bewusst leise – zwei kleine
   graue Links, die niemandem den Screen vollstellen. */
.legal-links {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: var(--sp-6);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.legal-links a { color: var(--text-muted); text-decoration: none; }
.legal-links a:active { color: var(--fando-700); }
.legal-a { color: var(--fando-700); font-weight: var(--fw-semibold); }

.auth3-tabs { display: flex; gap: 4px; padding: 5px; margin-bottom: var(--sp-5);
  background: var(--bg-sunken); border-radius: var(--r-pill); }
.auth3-tabs button { flex: 1; height: 44px; border-radius: var(--r-pill);
  font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-muted);
  transition: background var(--dur-3) var(--ease-out), color var(--dur-3); }
.auth3-tabs button.active { background: var(--fando); color: #fff; box-shadow: var(--shadow-sm); }

.fields { display: flex; flex-direction: column; gap: var(--sp-4); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.photo-pick { display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3); border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); }
.photo-pick .avatar { --sz: 56px; }
.auth-error { display: none; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--danger-tint); color: var(--danger); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.auth-error.show { display: flex; animation: fade-down var(--dur-2) var(--ease-out) both; }

/* ---------------- Header ---------------- */
.header-avatar { --sz: 38px; }

/* ---------------- Dashboard ---------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--sp-6);
  background: linear-gradient(150deg, #5aa233 0%, #43811f 60%, #356a1b 100%);
  color: #fff; box-shadow: 0 14px 30px rgba(53,106,27,0.26);
}
/* Billiardartige Ringe als ruhige Tiefe – bewusst KEIN Glow. */
.hero::after {
  content: ""; position: absolute; right: -64px; bottom: -84px; width: 216px; height: 216px;
  border-radius: 50%; border: 34px solid rgba(255,255,255,0.07); pointer-events: none;
}
.hero::before {
  content: ""; position: absolute; right: 34px; top: -36px; width: 118px; height: 118px;
  border-radius: 50%; border: 20px solid rgba(255,255,255,0.06); pointer-events: none;
}
.hero.to-next::after, .hero.to-next::before { display: none; }
.hero .overline.hero-ol { color: rgba(255,255,255,0.78); }

/* Form-Streifen (letzte Ergebnisse) in der Hero-Karte */
.hero-form { display: flex; align-items: center; gap: 6px; margin-top: 18px; position: relative; }
.form-pill { width: 22px; height: 6px; border-radius: 99px; background: rgba(255,255,255,0.28); }
.form-pill.w { background: #fff; }
.form-label { margin-left: 6px; font-size: var(--fs-2xs); color: rgba(255,255,255,0.72);
  text-transform: uppercase; letter-spacing: 0.09em; font-weight: var(--fw-bold); }

/* Fortschrittsbalken (außerhalb der dunklen Hero-Karte) */
.pbar { height: 7px; border-radius: 99px; background: var(--stone-200); overflow: hidden; margin-top: 8px; }
.pbar span { display: block; height: 100%; border-radius: 99px; background: var(--fando);
  transform-origin: left; animation: grow-bar var(--dur-5) var(--ease-out) both; }
.hero .hero-top { display: flex; justify-content: space-between; align-items: flex-start; }
.hero .rank-big { display: flex; align-items: baseline; gap: 6px; margin-top: var(--sp-2); }
.hero .rank-big .num { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: 1; letter-spacing: -0.03em; }
.hero .rank-big .of { color: rgba(255,255,255,0.6); font-weight: var(--fw-semibold); }
.hero .hero-crown {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: linear-gradient(160deg, #f2dfa8, #d8b45c); color: #6d5416;
}
.hero .hero-stats { display: flex; gap: var(--sp-5); margin-top: var(--sp-5); }
.hero .hero-stats { border-top: 1px solid rgba(255,255,255,0.16); padding-top: var(--sp-4); }
.hero .hero-stat .num { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.hero .hero-stat .lbl { font-size: var(--fs-xs); color: rgba(255,255,255,0.72); }
.hero .to-next { margin-top: var(--sp-5); }
.hero .bar { height: 7px; border-radius: 99px; background: rgba(255,255,255,0.14); overflow: hidden; margin-top: 8px; }
.hero .bar span { display: block; height: 100%; border-radius: 99px; background: var(--fando-300);
  transform-origin: left; animation: grow-bar var(--dur-5) var(--ease-out) both; }
@keyframes grow-bar { from { transform: scaleX(0); } }

.hero-medal { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255,255,255,0.16); color: #fff; }
.hero-medal svg { width: 26px; height: 26px; }

.cta-row { display: flex; gap: 10px; margin-top: 16px; }
.cta-row .btn-outline { flex: none; width: 56px; padding: 0; background: var(--surface); }

.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.stat-tile {
  display: flex; flex-direction: column; gap: 3px; padding: var(--sp-4) var(--sp-3);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.stat-tile.accent { background: var(--fando-tint); border-color: var(--fando-100); }
.stat-ic { width: 36px; height: 36px; border-radius: 11px; margin-bottom: 6px;
  background: var(--fando-tint); color: var(--fando); display: grid; place-items: center; }
.stat-ic .icon { width: 20px; height: 20px; }
.stat-val { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.1; }
.stat-label { font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-medium); }

.mini-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
}
.mini-list { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Spielergebnis-Zeile (Historie) */
.result-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.result-badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.result-badge.win { background: var(--fando-100); color: var(--fando-700); }
.result-badge.loss { background: var(--stone-100); color: var(--text-muted); }
.result-score { font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* Aktivitäts-Feed */
.activity-item { display: flex; gap: var(--sp-3); padding: var(--sp-3) 2px; }
/* Antippbare Feed-Zeilen sind Buttons – ohne Button-Optik, linksbündig. */
button.activity-item { width: 100%; text-align: left; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.activity-dot {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--stone-100); color: var(--text-muted);
}
.activity-dot.green { background: var(--fando-100); color: var(--fando-700); }
.activity-dot.gold { background: var(--ink-800); color: var(--gold); }

/* ---------------- Ranglisten-Zeilen (geteilt) ---------------- */
.player-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.player-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-2), background var(--dur-3);
}
.player-row.is-me { border-color: var(--fando-300); background: var(--fando-tint); box-shadow: var(--shadow-xs); }
.player-row.is-banned { opacity: 0.62; }
.rank-badge {
  width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center;
  font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--text-muted); background: var(--stone-100);
  font-variant-numeric: tabular-nums;
}
.rank-badge.r1 { background: linear-gradient(160deg, #f2dfa8, #d8b45c); color: #6d5416; }
.rank-badge.r2 { background: #e4e5e7; color: #6a6c6e; }
.rank-badge.r3 { background: #eaddcf; color: #93733f; }
.pr-avatar { position: relative; flex: none; }
.pr-name { font-weight: var(--fw-semibold); font-size: var(--fs-md); }
/* Die Metazeile trägt seit der Quoten-Regel neben dem Text auch das
   Punktwert-Plättchen und die Formpunkte. Flex mit Umbruch, damit auf
   schmalen Geräten das Plättchen umbricht statt die Zeile zu sprengen;
   der Text selbst bleibt als EIN Element zusammen (sonst zerlegte Flex
   ihn an den Trennern in eigene Zeilen). */
.pr-meta { margin-top: 1px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.pr-meta > span:first-child { min-width: 0; }
.pr-points { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.pr-points .num { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.pts-label { font-size: 10px; color: var(--text-subtle); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .05em; }
.crown-badge.on-avatar { position: absolute; top: -8px; right: -6px; width: 22px; height: 22px; border: 2px solid var(--surface); }
.crown-badge.on-avatar .icon { width: 13px; height: 13px; }
.delta { display: inline-flex; align-items: center; gap: 1px; font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.delta.up { color: var(--fando); } .delta.down { color: var(--danger); }
.delta .icon { width: 14px; height: 14px; }

/* Podium (Top 3) */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-5); }
.podium-col { display: flex; flex-direction: column; align-items: center; }
.podium-people { display: flex; align-items: flex-end; justify-content: center; gap: var(--sp-2); }
.podium-figure { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }

/* Geteilter Platz: Auf eine Stufe passt nur einer – also stehen sie nicht
   darauf, sondern schweben darüber. Platz 1 kann das nie (nur eine Krone). */
.podium-col.tied .podium-people {
  margin-bottom: 9px;
  animation: podium-hover 3.6s var(--ease-in-out) infinite;
}
.podium-col.tied .avatar { --sz: 46px; }
.podium-col.tied .podium-name { font-size: var(--fs-xs); max-width: 62px; }
.podium-col.tied .podium-crown svg { width: 22px; height: 22px; }
.podium-col.tied .podium-spacer { height: 22px; }
.podium-more {
  align-self: center; margin-bottom: 26px; padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--stone-200); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.podium-stand {
  width: 100%; border-radius: var(--r-md) var(--r-md) 0 0; display: flex; align-items: flex-start; justify-content: center;
  padding-top: 8px; font-weight: var(--fw-black); color: #fff; font-variant-numeric: tabular-nums;
}
.podium-col.p1 .podium-stand { height: 74px; background: linear-gradient(160deg, #e6c874, #cfa94e); color: #5c4715; }
.podium-col.p2 .podium-stand { height: 56px; background: linear-gradient(160deg, #d9dade, #b7b9bd); color: #4c4e50; }
.podium-col.p3 .podium-stand { height: 44px; background: linear-gradient(160deg, #e2c9ac, #c99f6f); color: #5a4529; }
.podium .avatar { --sz: 56px; box-shadow: var(--shadow-sm); }
.podium-col.p1 .avatar { --sz: 66px; }
.podium-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 92px; text-align: center; }
.podium-pts { font-size: var(--fs-xs); color: var(--text-muted); }
.podium-crown { color: var(--gold); animation: crown-float 3.4s var(--ease-in-out) infinite;
  filter: drop-shadow(0 2px 2px rgba(138,109,31,0.35)); }
.podium-crown svg { width: 28px; height: 28px; }
.podium-spacer { height: 28px; display: block; }

/* Staubige Krone: schwebt nicht mehr, sondern liegt matt da – der Träger hat
   sie zu lange nicht verteidigt. Die Körnchen sind Staub, deshalb grau und still. */
.podium-crown.dusty { color: var(--stone-400); animation: none; filter: none; position: relative; }
.podium-crown.dusty::after {
  content: ''; position: absolute; top: -3px; right: -5px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--stone-300);
  box-shadow: -16px 4px 0 -1px var(--stone-300), -8px -2px 0 -2px var(--stone-400);
}
.podium-stand { box-shadow: 0 10px 20px rgba(35,37,37,0.13), inset 0 1px 0 rgba(255,255,255,0.4); }
.podium.n1 { max-width: 200px; margin-inline: auto; }
.podium.n2 { max-width: 320px; margin-inline: auto; }
.podium.n1 .podium-col.p1 .podium-stand,
.podium.n2 .podium-col.p1 .podium-stand { height: 68px; }

/* ---------------- Herausfordern ---------------- */
.rule-note {
  display: flex; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-muted);
}
.rule-note .icon { color: var(--fando); flex: none; }

/* Kronen-Hinweis: bleibt eine ganz normale Notiz – die Krone markiert nur eine
   schmale Goldkante (dieselbe Idee wie .request-card.crown-stake) und ein
   dunkles Plättchen. Keine eingefärbte Fläche. */
.rule-note.crown { border-left: 3px solid var(--gold); color: var(--text); align-items: center; }
.crown-chip {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--ink-800); color: var(--gold);
}
.crown-chip .icon, .crown-chip svg { width: 16px; height: 16px; }

.challenge-row .pr-points { display: none; }
/* Sitzt auf der grünen Hero-Karte: dunkel + Gold trägt dort (6,4:1),
   das alte Beige verschwamm mit dem Grün zu Schlamm. */
.chip-crown { background: var(--ink-900); color: var(--gold); }

/* Modus-Auswahl im Sheet */
.mode-options { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-4); }
.mode-option {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-4);
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1);
}
.mode-option[aria-checked="true"] { border-color: var(--fando); background: var(--fando-tint); }
.mode-option:active { transform: scale(0.99); }
.mode-ball {
  position: relative; width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(circle at 34% 27%, rgba(255,255,255,0.30), transparent 44%), var(--ball, #1c1d1d);
  box-shadow: 0 3px 8px rgba(35,37,37,0.22);
}
.mode-ball i {
  font-style: normal; width: 56%; height: 56%; border-radius: 50%;
  background: #fff; color: #26282a; display: grid; place-items: center;
  font-weight: var(--fw-black); font-size: 13px; line-height: 1;
}
.mode-ball.m8  { --ball: #1c1d1d; }
.mode-ball.m9  { --ball: #e3a419; }
.mode-ball.m10 { --ball: #2f6fce; }
.mode-ball.sm { width: 24px; height: 24px; box-shadow: 0 1px 3px rgba(35,37,37,0.2); }
.mode-ball.sm i { width: 60%; height: 60%; font-size: 9px; }
.mode-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.mode-check { color: var(--fando); opacity: 0; transform: scale(.6); transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-spring); }
.mode-option[aria-checked="true"] .mode-check { opacity: 1; transform: scale(1); }

/* Tischwahl im Sheet: vier Mini-Tische, ohne Vorauswahl. Der gewählte
   bekommt das satte Fando-Grün als „Filz“, die anderen bleiben grau. */
.table-options { display: flex; gap: var(--sp-3); margin-top: var(--sp-4); }
.table-option {
  flex: 1; display: grid; place-items: center; padding: 10px 6px;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur-2), background var(--dur-2), transform var(--dur-1);
}
.table-option:active { transform: scale(0.96); }
.table-option[aria-checked="true"] { border-color: var(--fando); background: var(--fando-tint); }
.table-felt {
  width: 48px; height: 32px; border-radius: 8px; display: grid; place-items: center;
  background: var(--stone-200); color: var(--ink-600);
  box-shadow: inset 0 0 0 3px var(--stone-300);
  font-weight: var(--fw-black); font-size: var(--fs-md);
  transition: background var(--dur-2), color var(--dur-2), box-shadow var(--dur-2);
}
.table-option[aria-checked="true"] .table-felt {
  background: linear-gradient(160deg, #5aa233 0%, #43811f 100%); color: #fff;
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.22);
}
/* Tisch-Chip in Karten und Zeilen: „an welchem Tisch läuft das?“
   vertical-align: Als erstes Flex-Kind hat das SVG keine Schriftlinie –
   der Browser nähme seine Unterkante, und der Chip säße im Fließtext
   (Live-Zeile am Homescreen) sichtbar zu hoch. */
.table-chip { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; vertical-align: middle; }
.table-chip .icon-sm { color: var(--fando); }

/* ---------------- Herausforderungen ---------------- */
.tab-bar { position: sticky; top: calc(var(--header-h) + var(--safe-top)); z-index: 5; padding: var(--sp-2) var(--sp-4) var(--sp-3); background: var(--bg); }
.request-card {
  position: relative; overflow: hidden;
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-xs);
}
.request-card.incoming { border-left: 3px solid var(--fando); }
.request-card.crown-stake { border-left: 3px solid var(--gold); }
/* Doppel: satt grün eingefärbte Karten – die Spielform hebt sich als eigene
   Sektion klar vom Einzel ab, ohne einen neuen Kartentyp zu erfinden. */
.request-card.double { background: var(--fando-200); border-color: var(--fando-300); border-left: 3px solid var(--fando); }
.request-card.double .badge-green { background: var(--fando); color: #fff; }
.request-card.double .countdown-pill { background: rgba(255,255,255,.6); }

/* Doppel-Zone im Fordern-Screen: das Marken-Grün des Heros, nicht der
   blasse Tint – sie ist der Einstieg in die eigene Spielform. */
.double-zone {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: linear-gradient(150deg, #5aa233 0%, #43811f 90%);
  border-radius: var(--r-md); color: #fff;
  box-shadow: 0 6px 16px rgba(53,106,27,0.22);
}
.double-zone .caption { color: rgba(255,255,255,.82); }
.double-zone .btn-primary { --btn-bg: #fff; --btn-fg: var(--fando-700); box-shadow: none; }
.dz-ic {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: rgba(255,255,255,.18); color: #fff; display: grid; place-items: center;
}

/* Auswahlfeld im Doppel-Sheet: sieht aus wie ein Eingabefeld, öffnet das
   Spieler-Popup. Zeigt nach der Wahl Bild + Name. */
.picker-field { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer; }
.picker-field .avatar.sm { width: 26px; height: 26px; font-size: 11px; flex: none; }
.picker-field > .icon-sm { color: var(--stone-500); flex: none; }

/* Bestätigungs-Stand eines Doppels: vier Köpfe, Haken für Zusagen,
   blass wer noch aussteht (dasselbe Prinzip wie „kommt noch“). */
.confirm-row { display: flex; gap: var(--sp-4); margin-top: 10px; flex-wrap: wrap; }
.confirm-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 52px; opacity: .5; }
.confirm-chip.is-ok { opacity: 1; }
.confirm-chip .pr-avatar { position: relative; }
.confirm-chip .caption { max-width: 100%; }
.cc-check {
  position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--fando); color: #fff; display: grid; place-items: center; border: 2px solid #fff;
}
.cc-check .icon-sm { width: 10px; height: 10px; }
.request-top { display: flex; align-items: center; gap: var(--sp-3); }
.request-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.countdown-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px;
  background: var(--stone-100); color: var(--text-muted); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.countdown-pill.urgent { background: var(--danger-tint); color: var(--danger); }
.countdown-pill .icon { width: 13px; height: 13px; }
.status-tag { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .05em; }

/* ---------------- Challenge-Detail ---------------- */
.detail-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0; }
.detail-player { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.detail-player .avatar { --sz: 74px; box-shadow: var(--shadow-sm); }
.vs-badge { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--stone-400); }
.detail-meta { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ---------------- Scorer / Scoreboard ---------------- */
.scorer { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--ink-900); color: var(--offwhite); display: flex; flex-direction: column; overscroll-behavior: none; }
.scorer-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: calc(var(--safe-top) + 10px) var(--sp-4) var(--sp-3);
}
.scorer-top .icon-btn { color: var(--offwhite); }
.scorer-timer { display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); font-size: var(--fs-lg); }
/* Kopfmitte: Modus-Zeile und Info-Pillen (Ansage, Einsatz, Punktwert) in
   EINER umbruchfähigen Reihe – nichts stapelt sich mehr als lose Textzeilen.
   Quer passt alles nebeneinander, hochkant bricht es mittig um. */
.scorer-head {
  flex: 1; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 5px 7px; text-align: center;
}
/* text-wrap: balance – bricht die Zeile um, teilt sie gleichmäßig statt
   „… GEWINNSPIELE“ oben und einem verlorenen „· TISCH 2“ darunter. */
.scorer-mode { font-size: var(--fs-xs); color: var(--stone-400); font-weight: var(--fw-semibold); letter-spacing: .05em; text-transform: uppercase; text-wrap: balance; }
.scorer-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--fando-300); font-weight: var(--fw-bold); }
.scorer-chip {
  display: inline-block; max-width: 100%;
  padding: 3px 9px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.09); color: var(--stone-300);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Punktwert im dunklen Scorer-Kopf: Das helle Plättchen aus der Liste würde
   dort leuchten – hier eine ruhige, durchscheinende Variante. */
.scorer-stake { display: inline-flex; }
.scorer-stake .stake-chip { background: rgba(255,255,255,.10); color: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.scorer-stake .stake-chip.s-up { color: var(--fando-300); }
.scorer-stake .stake-chip.s-down { color: #f0a494; background: rgba(194,70,47,.22); box-shadow: inset 0 0 0 1px rgba(240,164,148,.28); }
.scorer-live .badge-dot { background: var(--fando-300); animation: pulse-dot 1.4s ease infinite; }
/* Dieselbe „Live“-Kennung erscheint auch auf den HELLEN Karten der
   Herausforderungs-Liste (request-card). Das helle --fando-300 erreicht dort
   nur ~1,8:1 (auf --fando-200) bzw. ~2,4:1 (auf Weiss) und ist kaum lesbar –
   im request-card-Kontext deshalb sattes Grün. Der dunkle Scorer-Screen
   behält das helle Grün. */
.request-card .scorer-live { color: var(--fando-700); }
.request-card .scorer-live .badge-dot { background: var(--fando); }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.board { position: relative; flex: 1; display: grid; grid-template-rows: 1fr 1fr; gap: 2px; min-height: 0; }
.board-side {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-3); padding: clamp(10px, 2.4vh, 22px) var(--sp-4); background: var(--ink-800);
  overflow: hidden; min-height: 0;
}
.board-side.win-target { transition: background var(--dur-3); }
.side-player { display: flex; align-items: center; gap: var(--sp-3); }
.side-player .avatar { --sz: 36px; }
.side-name { font-weight: var(--fw-bold); font-size: var(--fs-lg); }
.board-score {
  flex: 1; min-height: 0; width: 100%; display: grid; place-items: center;
  font-size: clamp(72px, 22vh, 190px); font-weight: var(--fw-black); line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform var(--dur-1) var(--ease-standard);
  -webkit-tap-highlight-color: transparent;
}
.board-score:active { transform: scale(0.93); }
.board-controls { display: flex; align-items: center; gap: var(--sp-4); }
.score-btn {
  width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,0.08); color: var(--offwhite); border: 1.5px solid rgba(255,255,255,0.14);
  transition: transform var(--dur-1), background var(--dur-2);
}
.score-btn:active { transform: scale(0.9); background: rgba(255,255,255,0.16); }
.score-btn.plus { background: var(--fando); border-color: var(--fando); }
.score-btn.plus:active { background: var(--fando-600); }
.score-btn .icon { width: 34px; height: 34px; }
.race-dots { display: flex; gap: 6px; }
.race-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.18); transition: background var(--dur-2), transform var(--dur-2); }
.race-dot.on { background: var(--fando-300); transform: scale(1.15); }
.board-side.crown-side::before { content: ""; position: absolute; top: 10px; right: 12px; }

/* Break: dezente Text-Pille neben dem Namen der Seite, die gerade dran ist. */
.break-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 99px;
  background: rgba(255,255,255,0.09); color: var(--fando-300);
  font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: .07em;
  animation: fade-in var(--dur-3) ease both;
}

/* Break-Wahl vor dem ersten Punkt – liegt nur über dem Spielfeld,
   Kopfzeile (Uhr, Schließen) bleibt bedienbar. */
.scorer-break {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: rgba(20,21,21,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade-in var(--dur-3) ease both; padding: var(--sp-5);
}
.scorer-break-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: min(400px, 100%); animation: modal-in var(--dur-4) var(--ease-out) both;
}
.break-pick-row { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; margin-top: 18px; }
.break-pick-btn {
  min-height: 78px; padding: 16px 20px; width: 100%;
  font-size: var(--fs-xl); font-weight: var(--fw-bold);
  background: rgba(255,255,255,0.08); color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.22);
}
.break-pick-btn:active { background: rgba(255,255,255,0.16); }

/* Querformat: Seiten liegen links/rechts – die Wahl-Buttons ebenso. */
@media (orientation: landscape) {
  .scorer-break-inner { width: min(640px, 96%); }
  .break-pick-row { flex-direction: row; }
  .break-pick-row .break-pick-btn { flex: 1 1 0; min-height: 88px; }
}

/* Finish-Overlay — „Grüne Bühne": satter Fando-Verlauf wie der Homescreen-Hero,
   weiße Palme im Glas-Medaillon, kein Konfetti (ersetzt durch driftendes Palmen-
   Wasserzeichen + Feder-Einstieg + EIN Feier-Ring nur bei eigenem Sieg/Krone).
   Zustandsklassen is-win | is-done | is-crown liegen auf .scorer-finish[data-finish]. */
.scorer-finish {
  position: absolute; inset: 0; z-index: 3; overflow: hidden;
  display: grid; place-items: center; padding: var(--sp-6);
  background: linear-gradient(150deg, #5aa233 0%, #43811f 60%, #356a1b 100%);
  animation: fade-in var(--dur-3) ease both;
}
/* Zart schwebendes Palmen-Wasserzeichen — das „Leben" statt Konfetti. */
.scorer-finish::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  right: -12%; bottom: -8%; width: 78%; max-width: 420px; aspect-ratio: 1133.91 / 1333.65;
  background: url("../img/logo-white.svg") no-repeat center / contain;
  opacity: 0.12;
  animation: finish-palm-drift 9s var(--ease-in-out) infinite;
  will-change: transform;
}
/* Weiche Tiefe: Licht oben, Abdunklung unten. Kein Glow, keine 3D-Kugel. */
.scorer-finish::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 20%, rgba(255,255,255,0.10), rgba(255,255,255,0) 44%),
    radial-gradient(140% 120% at 50% 118%, rgba(16,34,10,0.34), rgba(16,34,10,0) 56%);
}
.scorer-finish-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-1); width: 100%; max-width: 360px;
  animation: modal-in var(--dur-4) var(--ease-out) both;
}
/* Glas-Medaillon mit weißer Palme: mattes Glas (ein 1px-Inset-Ring), kein Orb. */
.finish-medallion {
  position: relative;
  width: 112px; height: 112px; border-radius: var(--r-circle);
  display: grid; place-items: center; margin-bottom: var(--sp-5);
  background: rgba(255,255,255,0.13);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.20),
    0 18px 40px rgba(16,34,10,0.32);
  animation: finish-medallion-in var(--dur-5) var(--ease-spring) both;
}
.finish-medallion img { width: 46px; height: 54px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.16)); }
/* EIN Feier-Ring statt Konfetti — nur bei eigenem Sieg / Krone, NIE bei Niederlage. */
.finish-medallion::after {
  content: ""; position: absolute; inset: -6px; border-radius: var(--r-circle);
  border: 2px solid rgba(255,255,255,0.55); opacity: 0; pointer-events: none;
}
.scorer-finish.is-win .finish-medallion::after,
.scorer-finish.is-crown .finish-medallion::after {
  animation: finish-ring-pulse 1.5s var(--ease-out) 0.45s both;
}
/* Label / Name / Score */
.scorer-finish .overline { color: rgba(255,255,255,0.72); }
.scorer-finish.is-done .overline { color: rgba(255,255,255,0.60); }
.scorer-finish h2 { font-size: var(--fs-2xl); font-weight: var(--fw-black); color: #fff;
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); margin-top: 2px; }
.finish-verb { font-weight: var(--fw-semibold); color: rgba(255,255,255,0.72); }
.finish-score { font-size: var(--fs-4xl); font-weight: var(--fw-black); color: #fff;
  margin-top: var(--sp-2); letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums; }
/* Was der Endstand bedeutet: Punkte-Pille + Stand-Zeile (Kronen-Chance/Abstand).
   Kommt bewusst einen Tick NACH dem Score – erst das Ergebnis, dann die Folge. */
.finish-take {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  margin-top: var(--sp-4);
  animation: fade-up var(--dur-4) var(--ease-out) 0.4s both;
}
.finish-take .ft-pts {
  padding: 6px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.13);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22);
  color: #fff; font-size: var(--fs-md); font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
/* Minuspunkt auf der Bühne: dunkles Plättchen statt des hellen – das
   Ergebnis darf sich nicht wie ein Zugewinn lesen. Bewusst KEIN grelles Rot:
   Die Bühne bleibt die grüne Feier-Fläche, hier wird nur der Ton gedämpft
   (ein Rot-Ton auf Grün ergäbe ohnehin nur Braun). */
.finish-take .ft-pts.is-minus {
  background: rgba(35,37,37,.42);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.finish-take .ft-standing {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,0.82); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.finish-take .ft-standing .icon-sm { width: 15px; height: 15px; flex: none; }
/* Kronen-Bühne: Text in Gold-Pale – Gold nur auf dunklem Grund (siehe tokens). */
.scorer-finish.is-crown .ft-standing { color: var(--gold-pale); }
/* Aktionen — auf der grünen Bühne invertiert (nutzen die .btn-Basis --btn-bg/--btn-fg) */
.finish-actions { display: flex; gap: var(--sp-3); width: 100%; margin-top: var(--sp-6); }
.finish-actions .btn { flex: 1; }
.finish-btn-1 { --btn-bg: #fff; --btn-fg: var(--fando-700); font-weight: var(--fw-bold);
  box-shadow: 0 10px 24px rgba(16,34,10,0.26); }
.finish-btn-1:hover { --btn-bg: #f4f8f1; }
.finish-btn-1:active { --btn-bg: #eaf1e4; }
.finish-btn-2 { --btn-bg: rgba(255,255,255,0.13); --btn-fg: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.26); }
.finish-btn-2:hover { --btn-bg: rgba(255,255,255,0.20); }

/* Krone erobert: feierlichster Fall. Gold NUR als Haarlinie/Text auf Dunkel. */
.scorer-finish.is-crown::after {
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(239,224,189,0.16), rgba(255,255,255,0) 46%),
    radial-gradient(140% 120% at 50% 118%, rgba(16,34,10,0.38), rgba(16,34,10,0) 56%);
}
.scorer-finish.is-crown .finish-medallion {
  box-shadow:
    inset 0 0 0 1px rgba(200,162,74,0.55),
    0 18px 44px rgba(10,24,6,0.42);
}
.scorer-finish.is-crown .finish-medallion::after { border-color: rgba(200,162,74,0.60); }
.scorer-finish.is-crown .overline { color: var(--gold-pale); }

@keyframes finish-medallion-in {
  0%   { opacity: 0; transform: translateY(14px) scale(0.82); }
  60%  { opacity: 1; transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes finish-palm-drift {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50%      { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes finish-ring-pulse {
  0%   { opacity: 0.55; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Querformat: Medaillon + Typo kompakter, damit alles auf kurze Höhe passt.
   (Additiv — ersetzt den Board-Landscape-Block darunter NICHT.) */
@media (orientation: landscape) {
  .scorer-finish { padding: var(--sp-4); }
  .scorer-finish-inner { gap: 0; max-width: 420px; }
  .finish-medallion { width: 74px; height: 74px; margin-bottom: var(--sp-3); }
  .finish-medallion img { width: 31px; height: 37px; }
  .scorer-finish h2 { font-size: var(--fs-xl); }
  .finish-score { font-size: var(--fs-3xl); margin-top: 2px; }
  .finish-actions { margin-top: var(--sp-4); max-width: 400px; }
  .scorer-finish::before { width: 44%; right: -6%; bottom: -16%; opacity: 0.10; }
}

@media (prefers-reduced-motion: reduce) {
  .scorer-finish, .scorer-finish-inner, .finish-medallion { animation: none; }
  .scorer-finish::before { animation: none; }
  .finish-medallion::after { animation: none; opacity: 0; }
}

/* Querformat: zwei Spalten nebeneinander, füllt den ganzen Bildschirm */
@media (orientation: landscape) {
  .board { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .board-score { font-size: clamp(64px, 30vh, 150px); }
  .board-side { padding: 10px var(--sp-5) 14px; gap: var(--sp-2); }
  .scorer-top { padding-top: calc(var(--safe-top) + 6px); padding-bottom: 6px; }
  .score-btn { width: 60px; height: 60px; }
  .score-btn .icon { width: 28px; height: 28px; }
}

/* ---------------- Profil ---------------- */
.profile-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); padding: var(--sp-6) 0 var(--sp-4); }
.profile-hero .avatar { --sz: 104px; box-shadow: var(--shadow-md); }
.profile-photo-btn {
  position: absolute; bottom: -2px; right: -2px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--fando); color: #fff; display: grid; place-items: center; border: 3px solid var(--bg);
}
.profile-name { font-size: var(--fs-2xl); font-weight: var(--fw-black); }
.list-group { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--divider); transition: background var(--dur-2); text-align: left; width: 100%; }
.list-item:last-child { border-bottom: none; }
.list-item:active { background: var(--stone-100); }
.list-item .li-ic { color: var(--text-muted); flex: none; }
.list-item .li-label { flex: 1; font-weight: var(--fw-medium); }
.list-item .li-value { color: var(--text-muted); font-size: var(--fs-sm); }
.list-item.danger .li-ic, .list-item.danger .li-label { color: var(--danger); }

/* ---------------- Schalter (Ein/Aus) ---------------- */
.switch {
  position: relative; flex: none; width: 46px; height: 28px; border-radius: 99px;
  background: var(--stone-300); transition: background var(--dur-2), opacity var(--dur-2);
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs);
  transition: transform var(--dur-2) var(--ease-standard);
}
.switch[aria-checked="true"] { background: var(--fando); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch[aria-disabled="true"] { opacity: 0.4; }
.switch.loading { opacity: 0.6; pointer-events: none; }
/* Schalter arbeitet gerade (Berechtigung + Token holen): Knopf pulsiert.
   Bewusst nur opacity – transform würde die Knopfposition (checked) überschreiben. */
.switch.busy { pointer-events: none; }
.switch.busy::after { animation: switch-busy .65s ease-in-out infinite alternate; }
@keyframes switch-busy { from { opacity: 1; } to { opacity: .35; } }

/* iPhone-Installations-Anleitung (Sheet im Profil) */
.guide-ic {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--stone-100); color: var(--fando);
}
.list-item .chev { color: var(--stone-400); }

/* ---------------- Admin ---------------- */
.admin-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; background: var(--ink-700); color: var(--offwhite); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.admin-nav { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-4); scrollbar-width: none; }
.admin-nav::-webkit-scrollbar { display: none; }
.admin-tab { flex: none; height: 36px; padding: 0 var(--sp-4); border-radius: 99px; background: var(--stone-100); color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; transition: background var(--dur-2), color var(--dur-2); }
.admin-tab.active { background: var(--anthracite); color: var(--offwhite); }
.admin-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.data-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
.data-row .row-actions { display: flex; gap: 4px; }
.mini-btn { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--stone-100); color: var(--text-muted); transition: background var(--dur-2), color var(--dur-2); }
.mini-btn:active { transform: scale(0.92); }
.mini-btn.danger { color: var(--danger); background: var(--danger-tint); }
.search-bar { position: relative; margin-bottom: var(--sp-3); }
.search-bar .input { padding-left: 44px; }
.search-bar .lead { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--stone-500); }
.log-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) 2px; border-bottom: 1px solid var(--divider); font-size: var(--fs-sm); }

/* ---------------- Im Lokal (Anwesenheit) ---------------- */
.presence-faces { display: flex; flex: none; align-items: center; }
/* Überlappend gestapelt – spart Platz und liest sich als Gruppe. */
.presence-faces .pr-avatar + .pr-avatar { margin-left: -12px; }
.presence-faces .avatar { box-shadow: 0 0 0 2px var(--surface); }
.presence-more {
  margin-left: -6px; padding: 3px 7px; border-radius: var(--r-pill);
  background: var(--stone-200); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
/* Die Gesichter-Gruppe ist ein Knopf: sie führt in die volle Liste.
   Als <button> braucht sie die Browser-Voreinstellungen zurückgesetzt. */
button.presence-faces {
  border: 0; background: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
[data-lokal] { cursor: pointer; }

/* ---------------- Popup „Im Lokal“ ---------------- */
/* Drei Avatare fassen einen guten Abend nicht. Hier steht jeder, den es
   betrifft – mit dem, was vor Ort zählt: spielt gerade, oder ansprechbar. */
.lk-sheet { gap: 0; }
.lk-head { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-1); }
.lk-orb {
  flex: none; width: 46px; height: 46px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--fando-100); color: var(--fando-700);
}
/* Atmen statt Ring: box-shadow braucht keinen Platz und kann das
   Sheet darum nicht aufreißen. */
@keyframes lk-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 148, 42, 0.34); }
  55%      { box-shadow: 0 0 0 9px rgba(79, 148, 42, 0); }
}
.lk-orb:not(.idle) { animation: lk-breathe 2.6s var(--ease-out) infinite; }
.lk-orb.idle { background: var(--stone-100); color: var(--stone-500); }
.lk-title { display: block; font-size: var(--fs-lg); }

.lk-sheet .section-head { margin: var(--sp-5) 0 var(--sp-2); }
.lk-list { display: flex; flex-direction: column; gap: 6px; }
.lk-row {
  display: flex; align-items: center; gap: var(--sp-3); cursor: pointer;
  padding: 9px 11px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-md);
}
.lk-row.is-me { border-color: var(--fando-300); background: var(--fando-tint); }
/* Zusager sind noch nicht da – ihr Bild steht blass hinter den Anwesenden. */
.lk-row.is-coming .avatar { opacity: 0.6; }
.lk-row .caption { display: block; margin-top: 1px; }
.lk-plays { display: inline-flex; align-items: center; gap: 3px; color: var(--fando-700); font-weight: var(--fw-semibold); }
.lk-plays .icon-sm { width: 13px; height: 13px; }
.lk-go { flex: none; color: var(--stone-300); }
/* Der schnellste Weg vom „der ist da“ zum Spiel: fordern direkt aus der Liste. */
.lk-fight {
  flex: none; width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; border: 0;
  background: var(--fando); color: #fff;
  box-shadow: 0 4px 10px rgba(53, 106, 27, 0.26);
}
.lk-fight:active { transform: scale(0.92); }
.lk-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-5); }
.lk-actions .btn { flex: 1; min-width: 0; }

/* ---------------- Spotlight (Dashboard) ---------------- */
/* Genau EIN Hinweis, dafür schön: Farbkante links (das crown-stake-Prinzip),
   passendes Icon-Plättchen, ein Satz, höchstens ein Knopf. */
.spotlight { width: 100%; text-align: left; }
.spotlight.gold  { border-left: 3px solid var(--gold); }
.spotlight.red   { border-left: 3px solid var(--danger); }
.spotlight.green { border-left: 3px solid var(--fando); }
.spotlight.dust  { border-left: 3px solid var(--stone-300); }
.spotlight .btn { flex: none; }
.spot-ic {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
}
.spot-ic.gold  { background: var(--ink-800); color: var(--gold); }
.spot-ic.red   { background: var(--danger-tint); color: var(--danger); }
.spot-ic.green { background: var(--fando-100); color: var(--fando-700); }
.spot-ic.dust  { background: var(--stone-100); color: var(--stone-500); }

/* ---------------- Lokal-Leiste (unter dem Hero) ---------------- */
/* Bewusst eine schmale Zeile statt einer Karte: Anwesenheit ist ein Blick,
   keine Lektüre. Laufende Spiele hängen sich als Zeilen darunter. */
.presence-bar { margin-top: 12px; padding: 6px 14px; }
.presence-line { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-height: 40px; }
.presence-text { min-width: 0; }
.presence-actions { display: flex; gap: 8px; margin-left: auto; flex: none; }
/* „Bin da“ / „Komme noch“: eigene Zeile, linksbündig – Knöpfe schweben
   nicht mehr frei im Feld, egal wie lang der Text darüber ist. */
.presence-cta { display: flex; gap: 8px; padding: 2px 0 8px; }
/* Zusager („kommt noch“) stehen blass hinter den Anwesenden. */
.presence-faces .is-coming { opacity: 0.55; }
.live-line {
  display: flex; width: 100%; align-items: center; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--divider);
}

/* ---------------- Schicksals-Acht (Sheet) ---------------- */
.mode-ball.fate-size {
  width: 64px; height: 64px;
  box-shadow: 0 6px 14px rgba(35,37,37,0.28), inset 0 -2px 6px rgba(0,0,0,0.25);
}
.mode-ball.fate-size i { width: 46%; height: 46%; font-size: 16px; }
.mode-ball.shaking { animation: fate-shake 0.75s var(--ease-in-out) infinite; }

/* ---------------- Spieler des Monats ---------------- */
.month-medal {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--stone-100); color: var(--stone-600);
}

/* ---------------- Direktduell ---------------- */
.duel {
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--border);
}
.duel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.duel-score {
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  font-weight: var(--fw-black); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums;
  margin: 2px 0;
}
.duel-sep { color: var(--text-muted); font-weight: var(--fw-medium); }
/* Die Farbe sagt auf einen Blick, wem das Duell gehört. */
.duel.lead-win  { background: var(--fando-tint); border-color: var(--fando-100); }
.duel.lead-win .duel-score { color: var(--fando-700); }
.duel.lead-loss { background: var(--danger-tint); border-color: transparent; }
.duel.lead-loss .duel-score { color: var(--danger); }

/* ---------------- Jetzt am Tisch (Live-Ticker) ---------------- */
.live-row .live-score { font-weight: var(--fw-black); font-size: var(--fs-lg); flex: none; font-variant-numeric: tabular-nums; }
.live-row .live-score .muted { margin: 0 2px; font-weight: var(--fw-medium); }
.live-dot {
  position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--fando); margin-right: 2px;
}
/* Der Ring pulst, nicht der Punkt selbst – sonst springt die Zeile. */
.live-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--fando); animation: pulse-ring 1.8s var(--ease-out) infinite;
}

/* ---------------- Kronen-Inszenierung ---------------- */
.crown-stage {
  position: absolute; inset: 0; z-index: var(--z-celebrate); display: grid; place-items: center;
  background: rgba(18,19,19,0.55); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  animation: fade-in var(--dur-3) ease both;
}
.crown-stage.leaving { animation: fade-in var(--dur-3) ease reverse both; }
.crown-stage-inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.crown-ring { position: absolute; top: -6px; width: 132px; height: 132px; border-radius: 50%; border: 3px solid var(--gold); }
.crown-ring.r1 { animation: ring-expand 1.6s var(--ease-out) 0.1s forwards; }
.crown-ring.r2 { animation: ring-expand 1.6s var(--ease-out) 0.45s forwards; }
.crown-big {
  width: 128px; height: 128px; border-radius: 34px; display: grid; place-items: center;
  background: linear-gradient(160deg, #f6e6b6, #d8b45c); color: #6d5416; box-shadow: var(--shadow-xl);
  animation: crown-land 1s var(--ease-spring) both;
}
.crown-big svg { width: 72px; height: 72px; }
.crown-title { margin-top: 18px; color: #fff; font-weight: var(--fw-black); font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight); animation: fade-up var(--dur-4) var(--ease-out) 0.24s both; }
.crown-name { color: var(--gold-pale); font-weight: var(--fw-semibold); margin-top: 2px;
  animation: fade-up var(--dur-4) var(--ease-out) 0.36s both; }

/* ---------------- Tutorial / Einführung ----------------
   Eine ruhige Bühne für alle Folien: 4 Kapitel mit Story-Segmenten
   oben, jede Szene auf DERSELBEN Fando-Karte (Wasserzeichen, weiße
   Karten, unten die Status-Pille [data-foot], die Tipps beantwortet).
   Die Szenen-Bausteine heißen tsc-*: Karte, Zeile, Pille, Chip … */
.tut {
  position: absolute; inset: 0; z-index: var(--z-modal);
  display: flex; flex-direction: column;
  background: radial-gradient(120% 46% at 50% 0, var(--fando-100), transparent 55%), var(--bg);
  padding-top: var(--safe-top); animation: fade-in var(--dur-3) ease both;
}
.tut.leaving { animation: fade-in var(--dur-2) ease reverse both; }
.tut-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 2px; }
.tut-count { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }

/* Story-Segmente: ein Balken je Kapitel, füllt sich Folie für Folie.
   Antippen springt zum Kapitelanfang. */
.tut-prog { display: flex; gap: 6px; padding: 6px 20px 0; }
.tut-seg {
  position: relative; flex: 1; height: 4px; border-radius: 99px;
  background: var(--stone-200); border: 0; padding: 0; cursor: pointer;
  overflow: hidden; transition: background var(--dur-3);
}
.tut-seg i {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--fando); border-radius: inherit;
  transition: width var(--dur-4) var(--ease-out);
}
.tut-seg.on { background: var(--stone-300); }

.tut-stage { flex: 1; display: grid; place-items: center; padding: 4px 24px; overflow: hidden; }
/* min-width: 0 – sonst wüchse das Grid-Kind auf die Mindestbreite seines
   Inhalts und schöbe sich auf schmalen Geräten übers Stage-Padding. */
.tut-slide { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
  width: 100%; max-width: 340px; min-width: 0; animation: slide-in-right var(--dur-4) var(--ease-out) both; }
.tut-slide.back { animation: slide-in-left var(--dur-4) var(--ease-out) both; }
.tut-copy { display: flex; flex-direction: column; align-items: center; }
.tut-ch {
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--fando);
  text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-bottom: 6px;
}
.tut-title { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight); line-height: 1.15; }
.tut-text { color: var(--text-muted); margin-top: 8px; font-size: var(--fs-md); line-height: 1.55; }
.tut-nav { padding: 12px 20px calc(20px + var(--safe-bottom)); }
.tut-actions { display: flex; gap: 12px; align-items: center; }

/* --- Bühne: EIN Look für alle Szenen --- */
.tscene {
  width: 100%; max-width: 320px; min-height: 236px; border-radius: 26px; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; overflow: hidden; padding: 18px 16px 14px;
  background: linear-gradient(160deg, var(--fando) 0%, var(--fando-700) 100%);
  box-shadow: 0 10px 24px rgba(53, 106, 27, 0.22);
  color: #fff;
}
.tsc-wm {
  position: absolute; right: -14px; top: -18px; width: 110px; height: 130px;
  object-fit: contain; opacity: 0.14; transform: rotate(10deg); pointer-events: none;
}
.tsc-body {
  position: relative; flex: 1; width: 100%; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
}

/* Status-Pille: stellt die Aufgabe, feiert die Antwort (data-foot).
   Inline-Block statt Flex: Gemischter Inline-Text („Konto: <b>7</b>
   Punkte“) soll als EIN Satz fließen, nicht als Flex-Bruchstücke. */
.tsc-foot {
  position: relative; display: inline-block; max-width: 100%;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 16px; padding: 5px 13px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; text-align: center;
  animation: fade-up var(--dur-4) var(--ease-out) 0.3s both;
}
.tsc-foot .icon-sm { display: inline-block; width: 14px; height: 14px; vertical-align: -3px; margin-right: 3px; }
.tsc-foot .num { font-weight: var(--fw-black); }

/* Willkommen: Marke pur. */
.tsc-hero { display: flex; flex-direction: column; align-items: center; }
.tsc-logo {
  width: 72px; height: 86px; object-fit: contain; margin-bottom: 10px;
  filter: drop-shadow(0 8px 14px rgba(20, 50, 10, 0.32));
  animation: scale-in 700ms var(--ease-spring) both, crown-float 4.4s var(--ease-in-out) 1s infinite;
}
.tsc-name { font-weight: var(--fw-black); font-size: var(--fs-xl); letter-spacing: var(--tracking-tight); }
.tsc-sub { color: rgba(255, 255, 255, 0.82); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  letter-spacing: 0.24em; text-transform: uppercase; margin-top: 3px; }

/* Weiße Karten (Punkte, Einsatz & Ansage). Umbruch statt Überlauf,
   wenn zwei Karten nebeneinander nicht mehr ausgehen. */
.tsc-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 100%; }
.tsc-cards.col { flex-direction: column; }
.tsc-card {
  display: flex; align-items: center; gap: 11px; text-align: left;
  background: #fff; color: var(--text); border: 0; border-radius: 14px;
  padding: 10px 13px; min-width: 126px; box-shadow: var(--shadow-sm); font: inherit;
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
button.tsc-card { cursor: pointer; }
.tsc-cards.col .tsc-card { min-width: 218px; }
.tsc-badge {
  width: 32px; height: 32px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--stone-100); color: var(--text-muted);
  font-weight: var(--fw-black); font-size: 13px;
}
.tsc-badge.win { background: var(--fando-100); color: var(--fando-700); }
.tsc-badge.gold { background: #f7eccf; color: #8a6d1f; }
.tsc-badge.hot { background: var(--danger-tint); color: var(--danger); }
.tsc-cardtx b { display: block; font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1.1; color: var(--ink-800); }
.tsc-card[data-res="win"] .tsc-cardtx b { color: var(--fando); }
.tsc-cardtx b.sm { font-size: var(--fs-md); }
.tsc-cardtx i {
  display: block; font-style: normal; margin-top: 2px;
  font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-muted);
}

/* Formkurve (Punkte-Szene): füllt sich aus den eigenen Tipps. */
.tsc-form { display: flex; gap: 8px; }
.tsc-form i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); transition: background var(--dur-2); }
.tsc-form i.on { background: #fff; }
.tsc-form i.off { background: rgba(0, 0, 0, 0.3); }

/* Zwei Spieler (Krone, Herausfordern). Die Spalte ist exakt so breit wie
   der Avatar – ein langes Label („Wen forderst du?“) steht symmetrisch
   über, statt die Spalte aufzublähen und das Duo aus der Mitte zu
   schieben. */
.tsc-duo { display: flex; align-items: center; justify-content: center; gap: 24px; }
.tsc-person { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 58px; }
.tsc-person .avatar { --sz: 58px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), var(--shadow-sm); }
.tsc-duo.small .tsc-person { width: 50px; }
.tsc-duo.small .tsc-person .avatar { --sz: 50px; }
.tsc-person > i {
  font-style: normal; font-size: var(--fs-2xs); font-weight: var(--fw-bold);
  color: rgba(255, 255, 255, 0.85); letter-spacing: 0.03em; white-space: nowrap;
}
.tsc-vs { font-weight: var(--fw-black); color: rgba(255, 255, 255, 0.65); font-size: var(--fs-md); transition: transform var(--dur-3) var(--ease-spring), color var(--dur-3); }

/* Die Krone sitzt beim König – und hüpft beim Fordern rüber. */
.tsc-crown { position: absolute; top: -26px; left: 50%; transform: translateX(-50%) rotate(-8deg); color: var(--gold); pointer-events: none; }
.tsc-crown svg { width: 30px; height: 30px; filter: drop-shadow(0 2px 2px rgba(60, 45, 8, 0.45)); }
.tsc-crown.stolen { animation: tsc-steal 0.7s var(--ease-spring) forwards; }
@keyframes tsc-steal {
  0% { transform: translateX(-50%) rotate(-8deg); }
  50% { transform: translate(calc(-50% + 66px), -26px) rotate(8deg); }
  100% { transform: translate(calc(-50% + 131px), 0) rotate(6deg); }
}

/* Weiße Pille als Mini-CTA (Krone fordern, Annehmen). */
.tsc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; color: var(--fando-700); border: 0; border-radius: 99px;
  padding: 8px 16px; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm); cursor: pointer;
  animation: pop-in 0.5s var(--ease-spring) 0.25s both;
}
.tsc-pill.sm { padding: 6px 12px; font-size: var(--fs-2xs); animation-delay: 0s; flex: none; }
.tsc-pill.done { background: rgba(255, 255, 255, 0.25); color: #fff; box-shadow: none; }

/* Quartals-Chips. */
.tsc-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.tsc-chip {
  padding: 7px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.16); color: #fff;
  font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap;
  animation: fade-up 500ms var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
.tsc-chip.now { background: #fff; color: var(--fando-700); }

/* Weiße Zeile (Kronenpunkt, Anfrage, Offener Tisch, Palmen, Push). */
.tsc-row {
  display: flex; align-items: center; gap: 10px; text-align: left;
  width: 254px; max-width: 100%;
  background: #fff; color: var(--text); border-radius: 14px; padding: 9px 12px;
  box-shadow: var(--shadow-sm);
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
.tsc-row.wide { width: 100%; }
.tsc-row.hidden { display: none; }
.tsc-row.muted { background: rgba(255, 255, 255, 0.86); }
.tsc-row .avatar { --sz: 36px; font-size: var(--fs-xs); }
.tsc-row.won { box-shadow: inset 0 0 0 2px var(--fando), var(--shadow-sm); }
.tsc-row.shake { animation: tsc-shake 0.4s var(--ease-out); }
@keyframes tsc-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
}
.tsc-val {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font-weight: var(--fw-black); font-size: var(--fs-lg); color: var(--fando-700);
}
.tsc-row.dim .tsc-val { color: var(--ink-800); }
.tsc-val .icon-sm { width: 18px; height: 18px; }
.tsc-rowtx { min-width: 0; }
.tsc-rowtx b { display: block; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.tsc-rowtx i { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }

/* Runde Aktionsknöpfe (Anfrage ablehnen/annehmen, Glocke). */
.tsc-btnrow {
  display: flex; gap: 12px;
  animation: pop-in 0.5s var(--ease-spring) 0.2s both;
}
.tsc-round {
  width: 46px; height: 38px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: #fff; color: var(--text-muted); border: 0;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: opacity var(--dur-2), transform var(--dur-2);
}
.tsc-round.yes { color: var(--fando-700); }
.tsc-round:disabled { opacity: 0.45; cursor: default; }
.tsc-round.ring { animation: tsc-ring 0.7s var(--ease-in-out); }
@keyframes tsc-ring {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(14deg); }
  50% { transform: rotate(-11deg); }
  75% { transform: rotate(6deg); }
}

/* Disziplin wählen: echte Spielkugeln, gewählt = weißer Ring. */
.tsc-balls { display: flex; gap: 14px; }
.tsc-balls .mode-ball {
  border: 0; cursor: pointer; padding: 0;
  transition: transform var(--dur-3) var(--ease-spring), box-shadow var(--dur-2);
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(0.12s + var(--i, 0) * 100ms);
}
.tsc-balls .mode-ball.sel { transform: scale(1.12); box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(35, 37, 37, 0.3); }

/* Doppel: vier bestätigen. */
.tsc-teams { display: flex; align-items: center; gap: 12px; }
.tsc-team { display: flex; }
.tsc-mate {
  position: relative; z-index: 1; border: 0; background: none; padding: 0; cursor: pointer;
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 100ms);
}
.tsc-mate .avatar { --sz: 52px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9); }
/* Der ERSTE liegt oben (z-index), damit sein Bestätigungs-Häkchen unten
   rechts nicht unterm überlappenden Nachbarn verschwindet. */
.tsc-team .tsc-mate + .tsc-mate { margin-left: -12px; z-index: 0; }
.tsc-mate.ok::after {
  content: "✓"; position: absolute; right: -2px; bottom: -2px;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--fando-700);
  font-size: 11px; font-weight: var(--fw-black);
  box-shadow: var(--shadow-xs);
  animation: pop 0.3s var(--ease-spring);
}
.tsc-teams.go .tsc-vs { color: #fff; transform: scale(1.2); }

/* Live-Scorer als weiße Karte. */
.tsc-board {
  display: flex; align-items: flex-start; gap: 18px;
  background: #fff; color: var(--text); border-radius: 18px; padding: 12px 20px;
  box-shadow: var(--shadow-sm);
  animation: pop-in 0.5s var(--ease-spring) both;
}
.tsc-side { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tsc-sname { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.tsc-break {
  font-size: 10px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.07em;
  background: var(--fando-100); color: var(--fando-700); padding: 2px 8px; border-radius: 99px;
}
.tsc-score { font-size: 40px; font-weight: var(--fw-black); line-height: 1; color: var(--anthracite); }
.tsc-plus {
  width: 42px; height: 42px; border-radius: 50%; border: 0;
  background: var(--fando); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
.tsc-plus svg { width: 22px; height: 22px; }
.tsc-colon { font-size: var(--fs-xl); font-weight: var(--fw-black); color: var(--stone-300); margin-top: 40px; }

/* Kopfzeile in der Szene (Palmen-Ergebnis, Abzeichen-Zähler). */
.tsc-head {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); opacity: 0.95;
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 130ms);
}
.tsc-head b { font-weight: var(--fw-black); font-size: var(--fs-lg); }

/* Abzeichen: freigeschaltet weiß, gesperrt als Glas – antippbar. */
.tsc-medals { display: flex; align-items: center; gap: 8px; }
.tsc-medal {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display: grid; place-items: center; border: 0; padding: 0; font: inherit;
  background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.22);
  animation: pop-in 0.5s var(--ease-spring) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
button.tsc-medal { cursor: pointer; }
.tsc-medal .icon-sm { width: 20px; height: 20px; }
.tsc-medal.on { background: #fff; color: var(--fando-700); box-shadow: var(--shadow-sm); }
/* „big“, nicht „hero“: Eine globale .hero-Regel (padding --sp-6) hätte
   sonst den Kreis auf 8px Innenraum gequetscht. */
.tsc-medal.big { width: 54px; height: 54px; }

/* Push-Zeilen: App-Icon wie in der echten Mitteilung. */
.tsc-app { width: 34px; height: 34px; border-radius: 9px; flex: none; }

/* ---------------- Verlauf (Herausforderungen) ---------------- */
/* Gespielt = kleine Duell-Karte: Kante + Avatar-Zeichen sagen Sieg/Niederlage,
   der Endstand steht rechts (Siegerzahl grün, wie im Archiv). */
.hist-row { display: flex; align-items: center; gap: var(--sp-3); padding: 10px 14px 10px 12px;
  border-left: 3px solid transparent; }
.hist-row.win { border-left-color: var(--fando); }
.hist-row.loss { border-left-color: var(--stone-300); }
.hist-mark { position: absolute; right: -4px; bottom: -4px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: var(--fando); color: #fff; box-shadow: 0 0 0 2px #fff; }
.hist-mark .icon-sm { width: 10px; height: 10px; }
.hist-mark.l { background: var(--danger); }
.hist-score { display: flex; align-items: baseline; gap: 3px; flex: none;
  font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: -0.02em; color: var(--stone-400); }
.hist-score .w { color: var(--fando); }
.hist-score .sep { font-size: var(--fs-sm); color: var(--stone-300); font-weight: var(--fw-semibold); }
.hist-status { display: inline-flex; align-items: center; gap: 5px; flex: none;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted); }
.hist-status.danger { color: var(--danger); }
.hist-duo { display: flex; }
.hist-duo .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2px #fff; }

/* ---------------- Spielarchiv ---------------- */
/* Spieler-Filter: horizontale Avatar-Pillen, per Suchfeld eingrenzbar. */
.arch-filter { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.arch-filter::-webkit-scrollbar { display: none; }
.arch-pill { display: inline-flex; align-items: center; gap: 7px; flex: none; max-width: 46vw;
  padding: 5px 12px 5px 5px; border-radius: 99px; background: #fff; border: 0;
  box-shadow: inset 0 0 0 1.5px var(--stone-200); font: inherit; font-size: var(--fs-sm);
  font-weight: var(--fw-semibold); color: var(--text); cursor: pointer;
  transition: box-shadow var(--dur-2) ease, background var(--dur-2) ease, color var(--dur-2) ease; }
.arch-pill .avatar { --sz: 26px; font-size: 10px; }
.arch-pill.active { background: var(--fando); color: #fff; box-shadow: none; }

/* Tages-Trenner: Overline mit auslaufender Linie. */
.arch-day { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; }
.arch-day-line { flex: 1; height: 1px; background: var(--stone-200); }

/* Duell-Karte: zwei Seiten, Score in der Mitte, Sieger satt – Verlierer blass. */
.arch-card { padding: 14px 14px 12px; }
.arch-card.crowned { box-shadow: inset 0 0 0 1.5px var(--gold), var(--shadow-sm); }
.arch-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.arch-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0;
  opacity: 0.55; transition: opacity var(--dur-3) ease; }
.arch-side.won { opacity: 1; }
.arch-side .pr-avatar { border: 0; background: none; padding: 0; cursor: pointer; }
.arch-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 100%; }
.arch-side.won .arch-name { font-weight: var(--fw-bold); }
.arch-score { display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-2xl);
  font-weight: var(--fw-black); letter-spacing: -0.02em; color: var(--stone-400); }
.arch-score .w { color: var(--fando); }
.arch-score .sep { font-size: var(--fs-lg); color: var(--stone-300); font-weight: var(--fw-semibold); }
.arch-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--stone-100); }

/* ---------------- Utility ---------------- */
.dialog-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--fando-tint); color: var(--fando); flex: none; }
.dialog-ic.danger { background: var(--danger-tint); color: var(--danger); }
.fab-space { height: 80px; }

/* ---------------- Warte auf Freischaltung ---------------- */
.pending-screen {
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 32px 24px;
  padding-top: calc(32px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
.pending-logo { opacity: .9; }
.pending-ring {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fando-tint); color: var(--fando);
}
.pending-ring > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--fando); opacity: .35;
  animation: pending-pulse 2.4s var(--ease-out) infinite;
}
@keyframes pending-pulse {
  from { transform: scale(1); opacity: .35; }
  to   { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .pending-ring > span { animation: none; } }

/* ---------------- Update-Hinweis (Neue Version) ---------------- */
/* Bleibt stehen, bis getippt wird – der ganze Toast lädt neu. */
.toast.version-toast { cursor: pointer; }
.toast.version-toast .btn { flex: none; margin-left: 2px; pointer-events: none; }
.pending-ring.rejected { background: var(--danger-tint); color: var(--danger); }
.pending-ring.rejected > span { border-color: var(--danger); animation: none; opacity: .25; }

/* ---------------- Wartungsmodus (js/lib/wartung.js) ---------------- */
/* Eigene Schicht über ALLEM (auch Modals/Toasts): Während der Wartung
   soll niemand halbfertige Daten bedienen. Am <body>, daher eigener
   Hintergrund samt Lichthauch wie in #app. */
.wartung-overlay {
  position: fixed; inset: 0; z-index: var(--z-wartung);
  background: radial-gradient(125% 40% at 50% -6%, var(--fando-100) 0%, transparent 58%), var(--bg);
  overflow: auto; overscroll-behavior: contain;
}
.wartung-screen {
  min-height: 100%;
  max-width: var(--app-max); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 32px 24px;
  padding-top: calc(32px + env(safe-area-inset-top));
  padding-bottom: calc(32px + env(safe-area-inset-bottom));
}
/* Warn-Bernstein statt Grün: sichtbar „kein Normalbetrieb“, aber kein Alarm */
.wartung-ring {
  position: relative; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--warning-tint); color: var(--warning);
}
.wartung-ring > span {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--warning); opacity: .3;
  animation: pending-pulse 2.4s var(--ease-out) infinite;
}
/* Zahnrad dreht gemächlich: „hier wird gerade gearbeitet“ */
.wartung-ring .icon-lg { animation: wartung-dreh 9s linear infinite; }
@keyframes wartung-dreh { to { transform: rotate(360deg); } }

.wartung-live {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-muted); font-size: var(--fs-sm);
  max-width: 300px; text-align: center;
}
.wartung-live .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--fando); flex: none;
  animation: wartung-puls 1.8s var(--ease-in-out) infinite;
}
@keyframes wartung-puls { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.wartung-status { text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .wartung-ring > span, .wartung-ring .icon-lg, .wartung-live .dot { animation: none; }
}

/* ---------------- Querformat-Nachbildung (js/lib/orientation.js) ---------- */
/* Geräte ohne screen.orientation.lock() (iPhone/iPad, Browser-Tab): Liegt das
   Gerät quer, dreht orientation.js den <body> um den Systemwinkel zurück und
   tauscht seine Maße – die App steht damit fest im Hochformat, wie eine
   gesperrte native App. Drehrichtung und Pixelmaße setzt das Modul als
   Inline-Stil. Im Scorer ist die Nachbildung aus: Der läuft echt quer. */
body.quer-simuliert {
  position: fixed; top: 0; left: 0;
  transform-origin: left top;
  overflow: hidden;
}
/* Innen rechnen dvh/vh/vw weiter mit dem ECHTEN, quer liegenden Viewport –
   für die Handvoll Nutzer deshalb hier auf Prozent des gedrehten <body>
   umgestellt (der trägt exakte Pixelmaße, Prozent stimmt also). */
body.quer-simuliert #app { min-height: 100%; }
body.quer-simuliert .sheet { max-height: 92%; }
body.quer-simuliert .wn-card { max-height: min(86%, 720px); }
body.quer-simuliert .lightbox-figure img { max-width: min(86%, 440px); max-height: 70%; }
body.quer-simuliert .pending-screen { min-height: 100%; }
body.quer-simuliert .mbx-inner { max-width: 100%; }

/* ============================================================
   Palmen-Shop (Screen, Profil-Einstieg, Admin, Tutorial)
   ============================================================ */

/* --- Palmen-Symbol (App-Logo als Bild) ------------------------ */
.palm-ic { width: 15px; height: 17px; object-fit: contain; flex: none; vertical-align: -2px; }
.palm-ic-lg { width: 24px; height: 28px; object-fit: contain; flex: none; }

/* --- Kopf: Guthaben-Pill in der Titelzeile ---------------------- */
.shop-balance {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 13px; border-radius: 99px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  font-weight: var(--fw-bold); font-size: var(--fs-sm);
}

/* --- Guthaben-Hero: der Farbanker des Screens ------------------- */
.shop-hero {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 3px;
  padding: 22px 22px 18px; border-radius: 24px;
  background: linear-gradient(150deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; box-shadow: 0 10px 22px rgba(53, 106, 27, 0.30);
}
/* Palmen-Wasserzeichen wiegt sich kaum merklich im Wind. */
.sh-wm {
  position: absolute; right: -20px; top: -24px; width: 150px; height: 172px;
  object-fit: contain; opacity: 0.15; pointer-events: none;
  transform-origin: 60% 30%;
  animation: palm-sway 7s ease-in-out infinite;
}
@keyframes palm-sway { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(12deg); } }
.sh-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; }
.sh-big { display: flex; align-items: center; gap: 10px; font-size: 46px; font-weight: var(--fw-black); line-height: 1.05; letter-spacing: var(--tracking-tight); }
.sh-mini { width: 26px; height: 31px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
.sh-unit { font-size: var(--fs-sm); opacity: 0.9; }
/* Lichtstreif – läuft nur beim Betreten einmal über die Karte. */
.sh-glint {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
  transform: translateX(-130%);
}

/* --- Artikel-Raster --------------------------------------------- */
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.shop-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 16px 12px 13px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(35, 37, 37, 0.05);
  text-align: center;
  transition: box-shadow var(--dur-3) ease;
}
.shop-card:active { box-shadow: 0 6px 16px rgba(35, 37, 37, 0.10); }
.shop-card.out .shop-img, .shop-card.out .shop-name, .shop-card.out .shop-pricepill { opacity: 0.4; filter: grayscale(0.6); }
.shop-stockbadge {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted);
  background: var(--stone-100); border-radius: 99px; padding: 2px 8px;
}
.shop-stockbadge.last { background: var(--ink-800); color: #fff; }
.shop-stockbadge.sold { background: var(--stone-200); color: var(--ink-600); }

/* Freigestellte Bilder: kein Kasten – Wurfschatten plus weiche
   „Standfläche“, auf der das Produkt sitzt. Beim Antippen hebt es ab. */
.shop-imgwrap { position: relative; display: grid; place-items: center; height: 102px; margin-top: 4px; }
.shop-imgwrap::after {
  content: ''; position: absolute; left: 50%; bottom: -1px;
  width: 72px; height: 12px; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(35, 37, 37, 0.15), transparent 72%);
}
.shop-imgwrap.lg { height: 150px; margin-top: 0; }
.shop-imgwrap.lg::after { width: 110px; height: 16px; }
.shop-imgwrap.admin { height: 110px; background: var(--bg-sunken); border-radius: var(--r-md); padding: 8px; }
.shop-imgwrap.admin::after { display: none; }
.shop-img {
  position: relative; z-index: 1;
  width: 94px; height: 94px; object-fit: contain;
  filter: drop-shadow(0 10px 10px rgba(35, 37, 37, 0.18));
  transition: transform var(--dur-3) var(--ease-spring);
}
.shop-card:active .shop-img { transform: translateY(-4px) scale(1.04); }
.shop-img.lg { width: 150px; height: 150px; }
.shop-img.ph { width: 58px; height: 70px; opacity: 0.35; filter: none; }
.shop-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 100%; }
.shop-pricepill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 13px; margin-top: 1px; border-radius: 99px;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
  box-shadow: 0 4px 10px rgba(53, 106, 27, 0.25);
}
.shop-price { display: inline-flex; align-items: center; gap: 5px; font-weight: var(--fw-bold); color: var(--fando-700); }
.shop-price.big { font-size: var(--fs-xl); gap: 8px; align-self: center; }
.shop-price .unit { font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--text-muted); }

/* --- Choreografie: nur beim Betreten (`first`), Repaints still --- */
.shop2.first .shop-hero { animation: pop-in 0.5s var(--ease-spring) both; }
.shop2.first .sh-glint { animation: sh-glint 1s ease 0.5s both; }
@keyframes sh-glint { to { transform: translateX(130%); } }
.shop2.first .shop-card {
  animation: pop-in 0.55s var(--ease-spring) both;
  animation-delay: calc(var(--i) * 70ms + 280ms);
}
.shop2.first .section-head { animation: fade-up var(--dur-4) var(--ease-out) 0.55s both; }
.shop2.first .list-group .list-item {
  animation: fade-up var(--dur-4) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 55ms + 620ms);
}

/* --- Profil: grüner Shop-Einstieg (soll herausstechen) ---------- */
/* Shop und Abzeichen stehen nebeneinander: zwei kompakte Kacheln statt zweier
   breiter Zeilen – so rutscht der Rest des Profils weiter nach oben.
   auto-fit statt fester 2 Spalten: Fehlt die Abzeichen-Kachel (Konto ohne
   Abzeichen-Daten), nimmt der Shop allein die volle Breite ein, statt als
   halbe Kachel neben einer Lücke zu stehen. */
.profile-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3); align-items: stretch;
  margin: 4px 0 14px;
}
.profile-duo > button { margin: 0; height: 100%; }

/* Beide Kacheln sind bewusst HELL und gleich gebaut: Als grosse Zeile trug der
   Shop eine satte grüne Fläche, auf halber Breite wurde daraus ein schwerer
   Klotz mit leerer Ecke. Das Grün steckt jetzt nur noch im runden Symbol –
   damit stehen die beiden als Paar da und passen zu den Listen darunter. */
.shop-cta {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 10px;
  /* Unten dieselben 20px wie bei .ach-cta, obwohl hier kein Fortschritts-
     balken sitzt: Nur mit gleich hohem Innenraum stehen die beiden Titel
     exakt auf einer Linie – sonst sitzt der Shop-Titel 4px höher. */
  padding: 12px 12px 20px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); color: var(--text); text-align: left;
}
.shop-cta .sc-ic {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  box-shadow: 0 4px 10px rgba(53, 106, 27, 0.24);
}
.shop-cta .sc-palm { width: 21px; height: 25px; object-fit: contain; }
.shop-cta .sc-title { display: block; font-weight: var(--fw-bold); font-size: var(--fs-sm); }
.shop-cta .sc-sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-top: 1px; }

/* --- Bestell-Status: Mini-Fortschritt --------------------------- */
/* Drei Stationen (In Bearbeitung → Bestellt → Erhalten) als Punkte-
   Track unter der Bestell-Zeile: erledigt = Fando, aktuell = Ring,
   offen = Stein. Storno bekommt keinen Track – da läuft nichts mehr. */
.ord-track { display: inline-flex; align-items: center; margin-top: 5px; }
.ord-track i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--stone-200); flex: none;
}
.ord-track i.on { background: var(--fando); }
.ord-track i.now { box-shadow: 0 0 0 3px var(--fando-100); }
.ord-track b { width: 18px; height: 2px; background: var(--stone-200); flex: none; }
.ord-track b.on { background: var(--fando); }

/* --- Admin: Shop-Verwaltung ------------------------------------- */
.mini-btn.ok { color: var(--fando-700); background: var(--fando-100); }
/* Beschriftete Variante („Bestätigen“, „Übergeben“): Breite nach Inhalt. */
.mini-btn.wide {
  width: auto; padding: 0 10px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); white-space: nowrap;
}
.shop-thumb { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--bg-sunken); border-radius: 10px; overflow: hidden; }
.shop-thumb img { max-width: 36px; max-height: 36px; object-fit: contain; }
.shop-thumb-ph { width: 22px; height: 26px; opacity: 0.35; }
.shop-history summary { cursor: pointer; list-style: none; }
.shop-history summary::-webkit-details-marker { display: none; }
.shop-history summary::after { content: ' anzeigen'; }
.shop-history[open] summary::after { content: ' ausblenden'; }

/* --- Sortier-Chips über dem Raster ------------------------------ */
.shop-sort {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px;
  margin: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.shop-sort::-webkit-scrollbar { display: none; }
.shop-sort .chip { flex: none; height: 32px; }

/* ============================================================
   Mystery Box (Shop-Karte, Sheet, Öffnungs-Bühne, Admin)
   Die Box-Karte ist eine ganz normale Regalkarte – nur die Plakette
   sagt „Mystery“, und Paul kann ihr optional einen Farbverlauf als
   Hintergrund geben (accent, im Box-Sheet schaltbar).
   ============================================================ */

/* --- Das CSS-Geschenk (Platzhalter ohne Box-Bild + Bühne) --- */
.mbx-gift { position: relative; display: block; width: 84px; height: 90px; }
.mbx-gift .g-glow {
  position: absolute; inset: -14px;
  background: radial-gradient(50% 50% at 50% 58%, rgba(200, 162, 74, 0.45), transparent 70%);
  animation: mbx-glow 2.8s ease-in-out infinite;
}
.mbx-gift .g-body {
  position: absolute; left: 8px; right: 8px; bottom: 2px; height: 52px;
  border-radius: 12px;
  background: linear-gradient(160deg, #e0bf6f 0%, #b08a35 100%);
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.22);
}
.mbx-gift .g-body::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px;
  transform: translateX(-50%); background: rgba(255, 255, 255, 0.88);
}
.mbx-gift .g-lid {
  position: absolute; left: 2px; right: 2px; bottom: 50px; height: 19px;
  border-radius: 7px;
  background: linear-gradient(160deg, #ecd18a 0%, #c8a24a 100%);
  box-shadow: 0 5px 9px rgba(0, 0, 0, 0.28);
}
.mbx-gift .g-lid::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 12px;
  transform: translateX(-50%); background: rgba(255, 255, 255, 0.88);
}
/* Schleife: ein weißer Bogen über dem Deckel */
.mbx-gift .g-lid::after {
  content: ''; position: absolute; left: 50%; top: -12px; transform: translateX(-50%);
  width: 26px; height: 14px; border: 3.5px solid rgba(255, 255, 255, 0.9);
  border-bottom: 0; border-radius: 11px 11px 0 0;
}
@keyframes mbx-glow { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }
.mbx-gift.lg { transform: scale(1.25); }

/* --- Öffnungs-Bühne ---------------------------------------------
   Fürs Handy gebaut: Alles misst sich am Viewport (Strahlenkranz in
   vmin, Inhalt max. Bildschirmbreite, Safe-Area unten fürs iPhone). */
.mbx-stage {
  position: fixed; inset: 0; z-index: var(--z-celebrate);
  display: grid; place-items: center; overflow: hidden;
  background: rgba(18, 19, 19, 0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade-in var(--dur-3) ease both;
}
.mbx-stage.leaving { animation: fade-in var(--dur-3) ease reverse both; }
.mbx-inner {
  position: relative; display: grid; place-items: center;
  width: 100%; max-width: 100vw;
  padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
}
.mbx-inner > * { grid-area: 1 / 1; }

/* Der Strahlenkranz ist reine Deko und liegt ABSOLUT hinter allem:
   Als Grid-Kind würde seine Breite (bis 560px) den Track aufblasen und
   den Inhalt am Handy aus der Mitte schieben – genau so war der
   Mobile-Bug. Absolut zentriert kann er beliebig überstehen. */
.mbx-rays {
  position: absolute; left: 50%; top: 50%;
  width: min(560px, 150vmin); height: min(560px, 150vmin);
  transform: translate(-50%, -50%);
  border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(rgba(200, 162, 74, 0.18) 0 11deg, transparent 11deg 24deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  opacity: 0; transition: opacity 0.5s ease;
}
.mbx-stage.open .mbx-rays { opacity: 1; animation: mbx-spin 18s linear infinite; }
@keyframes mbx-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Ein Wrapper für beides – Pauls Box-Bild oder das Geschenk. Die
   Animationen hängen am Wrapper, die Größe an seinem Inhalt (so beißen
   sich Wackeln und Skalierung nicht). */
.mbx-boxvisual { display: grid; place-items: center; cursor: pointer; }
.mbx-gift.stage { transform: scale(1.45); }
.mbx-boximg {
  width: min(200px, 52vw); max-height: min(220px, 30vh); object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.45));
}
.mbx-stage.shaking .mbx-boxvisual { animation: mbx-wobble 0.5s ease-in-out infinite; }
@keyframes mbx-wobble {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-6deg) translateX(-3px); }
  45% { transform: rotate(5deg) translateX(3px) scale(1.02); }
  70% { transform: rotate(-4deg); }
  85% { transform: rotate(3deg) scale(1.03); }
}
.mbx-stage.open .mbx-boxvisual { animation: mbx-burst 0.5s var(--ease-standard) forwards; pointer-events: none; }
@keyframes mbx-burst { to { transform: scale(1.5); opacity: 0; } }

.mbx-hint {
  position: absolute; left: 0; right: 0; top: calc(50% + 100px);
  text-align: center; color: #fff; opacity: 0.85;
  font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  animation: mbx-hint 1.3s ease-in-out infinite;
}
@keyframes mbx-hint { 50% { opacity: 0.4; } }
.mbx-stage.open .mbx-hint { display: none; }

.mbx-prize {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  max-width: min(88vw, 340px);
  opacity: 0; pointer-events: none;
}
.mbx-prize .shop-imgwrap::after { display: none; }
.mbx-stage.open .mbx-prize { animation: mbx-pop 0.6s var(--ease-spring) 0.14s both; pointer-events: auto; }
@keyframes mbx-pop {
  0% { opacity: 0; transform: scale(0.45) translateY(18px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.mbx-won-name {
  margin-top: 10px; color: #fff; overflow-wrap: anywhere;
  font-size: var(--fs-xl); font-weight: var(--fw-black); letter-spacing: var(--tracking-tight);
}
.mbx-won-sub { margin-top: 3px; color: var(--gold-pale); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mbx-ok { margin-top: 20px; min-width: min(190px, 70vw); }

/* Annehmen oder verzichten: Die Frage gehört zur Bühne (Dialoge lägen
   darunter). „Ja, bestellen“ trägt das Gewicht; der Verzicht ist bewusst
   leise und stellt sich beim ersten Tipp erst scharf. */
.mbx-choice { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 20px; }
.mbx-choice .mbx-take { min-width: min(220px, 74vw); }
/* Ghost-Hover ist für helle Flächen gebaut (stone-100) – auf der dunklen
   Bühne stünde sonst ein weißer Klotz hinter dem Text. */
.mbx-choice .mbx-pass { color: rgba(255, 255, 255, 0.75); }
.mbx-choice .mbx-pass:hover { --btn-bg: rgba(255, 255, 255, 0.12); color: #fff; }
.mbx-choice .mbx-pass.armed { color: #ff9d8a; font-weight: var(--fw-bold); }
.mbx-choice .mbx-pass.armed:hover { color: #ff9d8a; }
.mbx-err {
  margin-top: 10px; padding: 8px 12px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.12); color: #ffd9d1;
  font-size: var(--fs-sm); overflow-wrap: anywhere;
}

/* Niete: gleiche Bühne, aber ohne Gold – stiller Kranz, graues Zeichen. */
.mbx-stage.niete .mbx-rays { background: repeating-conic-gradient(rgba(255, 255, 255, 0.07) 0 11deg, transparent 11deg 24deg); }
.mbx-stage.niete .mbx-won-sub { color: rgba(255, 255, 255, 0.65); }
.mbx-niete-visual {
  display: grid; place-items: center; width: 112px; height: 112px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
}
.mbx-niete-visual .icon-lg { width: 44px; height: 44px; }

/* Nieten im Pool des Box-Sheets: grau und ehrlich. */
.mbx-niete-row .li-label { color: var(--text-muted); }
.mbx-niete-thumb { display: grid; place-items: center; background: var(--stone-100); color: var(--text-subtle); }

/* Kleine Höhen (Handy quer): Prämienbild eindampfen, damit Name und
   Knopf sicher im Bild bleiben. */
@media (max-height: 560px) {
  .mbx-prize .shop-imgwrap.lg { height: 96px; }
  .mbx-prize .shop-img.lg { width: 96px; height: 96px; }
  .mbx-gift.stage { transform: scale(1.1); }
}

/* Reduzierte Bewegung: Ergebnis sofort, keine Show */
@media (prefers-reduced-motion: reduce) {
  .mbx-stage.shaking .mbx-boxvisual,
  .mbx-stage.open .mbx-boxvisual,
  .mbx-stage.open .mbx-rays,
  .mbx-stage.open .mbx-prize,
  .mbx-gift .g-glow { animation: none; }
  .mbx-stage.open .mbx-boxvisual { opacity: 0; }
  .mbx-stage.open .mbx-prize { opacity: 1; pointer-events: auto; }
}

/* --- Admin: Reihenfolge ziehen + Box-Pool pflegen ---------------- */
.drag-grip {
  align-self: center; flex: none;
  width: 26px; height: 40px; margin: 0 -4px 0 -6px;
  display: grid; place-items: center;
  color: var(--text-muted); opacity: 0.7;
  touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none;
}
.drag-row { position: relative; }
.drag-row.dragging {
  z-index: 5; box-shadow: var(--shadow-lg); opacity: 0.97;
  cursor: grabbing;
}
[data-reorder].reordering, [data-reorder].reordering * { user-select: none; -webkit-user-select: none; }

.badge-gold { background: var(--ink-800); color: var(--gold-pale); }
.shop-thumb.mbx { color: var(--fando-700); }

/* Farbverlauf-Zeile im Box-Sheet: Häkchen + zwei native Farbwähler */
.mbx-accrow { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.mbx-accrow input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--fando); flex: none; }
.mbx-color {
  width: 44px; height: 34px; flex: none; padding: 2px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
.mbx-color:disabled { opacity: 0.35; }

.mbx-poolrow {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.mbx-pimg {
  width: 52px; height: 52px; flex: none; overflow: hidden;
  border-radius: 12px; border: 1px dashed var(--border);
  background: var(--surface); color: var(--text-muted);
  display: grid; place-items: center;
}
.mbx-pimg img { width: 100%; height: 100%; object-fit: contain; }
/* Nieten-Zeile im Editor: gedämpft, Bildknopf gesperrt. */
.mbx-poolrow.niete .mbx-pimg { border-style: solid; color: var(--text-subtle); background: var(--stone-100); }
.mbx-poolrow.niete [data-pname] { color: var(--text-muted); }
.mbx-nietelbl {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.mbx-nietelbl input { accent-color: var(--fando); width: 16px; height: 16px; flex: none; }
/* Prozent-Feld mit festem „%“ im Feld – die Eingabe IST die Chance */
.mbx-wwrap { position: relative; flex: none; }
.mbx-w { width: 96px; flex: none; padding-right: 30px; }
.mbx-wwrap b {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  pointer-events: none;
}

/* --- Info-Sheet: „So funktionieren Palmen“ ---------------------- */
.sh-info {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18); color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.sh-info .icon { width: 18px; height: 18px; }

.pi-logo { width: 40px; height: 47px; object-fit: contain; align-self: center; }

/* Kernregel als kleine grüne Karte – der Anker des Sheets. */
.pi-rule {
  background: linear-gradient(150deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; border-radius: var(--r-md);
  padding: 13px 16px; font-size: var(--fs-sm); line-height: 1.5;
  box-shadow: 0 6px 14px rgba(53, 106, 27, 0.24);
}

/* Beispiel-Ergebnisse: Ergebnis | Sieger | Verlierer */
.pi-table {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 12px 14px;
}
.pi-h { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); text-align: center; }
.pi-score {
  justify-self: center; min-width: 52px; text-align: center;
  background: var(--ink-800); color: #fff; border-radius: 9px;
  padding: 3px 10px; font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.pi-val { text-align: center; font-weight: var(--fw-black); font-size: var(--fs-md); color: var(--ink-600); align-self: center; }
.pi-val.win { color: var(--fando-700); }

/* Doppel & kampflos */
.pi-extra { display: flex; flex-direction: column; gap: 10px; }
.pi-x {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 14px;
}
.pi-teams { display: inline-flex; align-items: center; gap: 3px; flex: none; }
.pi-teams i { width: 18px; height: 18px; border-radius: 50%; background: var(--stone-200); }
.pi-teams i.me { background: var(--fando); }
.pi-teams em { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); margin: 0 3px; }
.pi-wo {
  flex: none; min-width: 44px; text-align: center;
  background: var(--fando-100); color: var(--fando-700);
  border-radius: 10px; padding: 6px 0; font-weight: var(--fw-black);
}

/* Einlösen in drei Schritten */
.pi-steps { display: flex; flex-direction: column; gap: 10px; }
.pi-step {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 11px 14px;
}
.pi-n {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; font-weight: var(--fw-bold); font-size: var(--fs-sm);
}
.pi-si { flex: none; color: var(--text-muted); }

/* --- Fordern: Schnell-Knöpfe + Info-Sheet ----------------------- */
.ch-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.ch-qbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--text);
}
.ch-qbtn .icon-sm { color: var(--fando-700); }
.qb-badge {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 7px; border-radius: 99px;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-bold);
}

.ci-hero {
  width: 52px; height: 52px; border-radius: 50%; align-self: center;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--fando) 0%, var(--fando-700) 100%);
  color: #fff; box-shadow: 0 6px 14px rgba(53, 106, 27, 0.28);
}
.ci-chip {
  flex: none; min-width: 48px; height: 34px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  background: var(--ink-800); color: #fff;
  border-radius: 10px; font-weight: var(--fw-black); font-size: var(--fs-sm);
}
.ci-chip i { font-style: normal; font-weight: var(--fw-black); }
.ci-chip.gold { color: var(--gold); }

/* ============ Rangliste: Quartal / Jahr / All-Time ============ */
/* Die Zeiträume stecken DEZENT hinter dem Uhr-Icon im Kopf. Nur wenn ein
   anderer Zeitraum als das laufende Quartal offen ist, erscheint die
   Kontext-Karte; sonst bleibt der Screen exakt wie immer. */
.rk-sub:empty { display: none; }

/* Zeitraum-Band der laufenden Rangliste: Q-Plakette, Monatsspanne und
   Restlaufzeit, darunter ein Haarstrich mit dem Quartals-Fortschritt – so
   sieht man auf einen Blick, wofür die Tabelle gilt und wie lange noch.
   Bewusst ohne Karte: es informiert, es drängt nicht. */
.rk-season { margin: 0 2px var(--sp-4); }
/* Auf sehr schmalen Geräten rutscht die Restlaufzeit in die zweite Zeile,
   statt die Monate abzuschneiden. */
.rk-season-head { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 9px; }
.rk-season-q {
  flex: none; padding: 3px 7px; border-radius: var(--r-xs);
  background: var(--fando-100); color: var(--fando-700);
  font-size: var(--fs-2xs); font-weight: var(--fw-black);
}
.rk-season-range {
  flex: none; white-space: nowrap;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  color: var(--text); letter-spacing: var(--tracking-tight);
}
.rk-season-dash { color: var(--fando); }
.rk-season-year { color: var(--text-subtle); font-weight: var(--fw-medium); margin-left: 5px; }
.rk-season-rest {
  flex: none; margin-left: auto;
  font-size: var(--fs-xs); font-weight: var(--fw-medium);
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.rk-season-track {
  display: block; margin-top: 8px;
  height: 3px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.rk-season-track i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--fando-300), var(--fando));
  transform-origin: left center;
  animation: rk-season-fill 620ms var(--ease-out) both;
}
@keyframes rk-season-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Kontext-Karte im Karten-Stil der App: Icon-Kreis + Zeitraum (öffnet das
   Sheet erneut), rechts der kleine „Aktuell“-Knopf zurück. */
.rk-context {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: var(--sp-3);
}
.rk-ctx-main {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
  appearance: none; background: none; border: 0; padding: 0;
  font: inherit; text-align: left; cursor: pointer;
}
.rk-ctx-main > .icon-sm { color: var(--text-subtle); flex: none; }
.rk-ctx-txt { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rk-ctx-txt strong { line-height: 1.25; }

/* Uhr-Icon im Kopf färbt sich, solange ein anderer Zeitraum offen ist. */
.icon-btn.rk-on { color: var(--fando); background: var(--fando-100); }

/* Zeitraum-Sheet: kompakte Pillen wie die Spieler-Filter im Spielarchiv –
   die gewählte ist grün gefüllt, das Laufende trägt den Punkt. */
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  appearance: none; cursor: pointer; font: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text);
  padding: 9px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}
.rk-chip .icon-sm { width: 14px; height: 14px; color: var(--fando); }
.rk-chip .rk-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fando); }
.rk-chip.active { background: var(--fando); border-color: var(--fando); color: #fff; }
.rk-chip.active .icon-sm { color: #fff; }
.rk-chip.active .rk-dot { background: #fff; }

/* Kronenpunkt-Plakette – Fando-Grün wie die App-Badges, kein Schwarz-Gold. */
.rk-crownpts {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  padding: 3px 8px; border-radius: 999px;
  background: var(--fando-100); color: var(--fando-700);
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
}
.rk-crownpts .icon-sm { width: 13px; height: 13px; }

/* Hinweis-Karte (Krone noch nicht vergeben / Startquartal). */
.rk-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: var(--sp-3);
}
.rk-note .icon-sm { flex: none; margin-top: 2px; color: var(--text-muted); }
.rk-note-crown { flex: none; margin-top: 2px; color: var(--fando); }
.rk-note-crown .icon-sm { color: var(--fando); margin: 0; }

/* (Die Quartals-Szene der Einführung wohnt jetzt bei den Tutorial-Styles.) */

/* ============================================================
   Freunde werben — Profil-Karte, Einladen-Sheet, Registrierung
   ============================================================ */

/* --- Profil: Einstiegskarte (flach, Fando – kein Gold, kein 3D) - */
.invite-cta {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: 14px;
  margin: 0; padding: 14px 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); text-align: left; color: var(--text);
}
.invite-cta .iv-ic {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--fando); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.invite-cta .iv-title { display: block; font-weight: var(--fw-bold); font-size: var(--fs-md); }
.invite-cta .iv-sub { display: block; font-size: var(--fs-sm); color: var(--text-muted); margin-top: 1px; }
.invite-cta > .icon { color: var(--stone-400); flex: none; }

/* --- Sheet: der eigene Code als Abreiß-Ticket (Tippen kopiert) -- */
.inv-code {
  width: 100%; padding: 14px 12px 11px;
  border: 1.5px dashed var(--stone-300); border-radius: var(--r-lg);
  background: var(--bg-sunken); text-align: center;
}
.inv-chars { display: flex; justify-content: center; gap: 6px; }
.inv-chars span {
  width: 36px; height: 46px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  font-size: var(--fs-xl); font-weight: var(--fw-black);
  color: var(--fando-700); font-variant-numeric: tabular-nums;
}
.inv-copy {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-muted);
}
.inv-copy .icon-sm { width: 13px; height: 13px; }
/* Kopier-Feedback: die Zeichen hüpfen einmal durch. */
.inv-code.copied .inv-chars span { animation: inv-copied 0.4s var(--ease-out) both; }
.inv-code.copied .inv-chars span:nth-child(2) { animation-delay: 40ms; }
.inv-code.copied .inv-chars span:nth-child(3) { animation-delay: 80ms; }
.inv-code.copied .inv-chars span:nth-child(4) { animation-delay: 120ms; }
.inv-code.copied .inv-chars span:nth-child(5) { animation-delay: 160ms; }
.inv-code.copied .inv-chars span:nth-child(6) { animation-delay: 200ms; }
@keyframes inv-copied {
  40% { transform: translateY(-4px); background: var(--fando-100); border-color: var(--fando); }
}

/* --- Sheet: QR-Code (immer dunkel auf weiß, sonst scannt's nicht) */
.inv-qr {
  margin-top: 12px; padding: 14px 14px 11px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--stone-200); border-radius: var(--r-lg);
  text-align: center;
}
.inv-qr svg { width: min(190px, 62vw); height: auto; display: block; }
.btn[data-qr].active { border-color: var(--fando); color: var(--fando-700); }

/* --- Sheet: Werbe-Bilanz ---------------------------------------- */
.inv-stat {
  display: flex; align-items: center; gap: 10px;
  margin-top: 12px; padding: 10px 12px;
  background: var(--bg-sunken); border-radius: var(--r-md);
}
.inv-faces { display: flex; flex: none; }
.inv-faces .avatar { box-shadow: 0 0 0 2px var(--surface); }
.inv-faces .avatar + .avatar { margin-left: -8px; }
.inv-wait {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: var(--stone-100); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
}

/* --- Registrierung: „Code aus dem Link übernommen“ -------------- */
.invite-note {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; margin-top: 6px; padding: 7px 11px;
  border-radius: var(--r-pill);
  background: var(--fando-100); color: var(--fando-700);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.invite-note .icon-sm { width: 13px; height: 13px; flex: none; }

/* --- Warte-Screen: die 15 Palmen liegen bereit ------------------ */
.pending-invite {
  display: flex; align-items: center; gap: 9px;
  margin-top: 6px; padding: 10px 14px; border-radius: var(--r-lg);
  background: var(--fando-100); color: var(--fando-700);
  max-width: 300px; text-align: left;
}
.pending-invite .icon-sm { flex: none; }

/* --- Admin: „Geworben von …“ als eigene vollbreite Zeile --------
   In der schmalen Textspalte neben dem Avatar würde der Satz auf dem
   Handy dreizeilig zerbröseln – als eigenes Band unter den Stammdaten
   hat er die ganze Kartenbreite. Der Text steckt in EINEM span, damit
   Flex ihn nicht in Häppchen zerlegt. */
.inv-note {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 11px; border-radius: var(--r-md);
  background: var(--fando-100); color: var(--fando-700);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); line-height: 1.45;
}
.inv-note .icon-sm { width: 14px; height: 14px; flex: none; margin-top: 1px; }