:root {
  /* Ultipick dark palette — neutral charcoal with a whisper of pitch green
     so the whole app reads "Rasen bei Flutlicht" statt generisches Grau. */
  --bg: #0b0d0c;
  --bg-2: #121514;
  --card: #161a18;
  --card-2: #1d2220;
  --line: #28302c;
  --txt: #f4f6f5;
  --txt-dim: #9aa49e;
  --accent: #16a34a;     /* ultipick pitch green */
  --accent-2: #34d399;
  --blue: #3b82f6;
  --green: #22c55e;
  --amber: #f59e0b;
  --gold: #f5c518;
  --silver: #cfd2d8;
  --bronze: #cd7f32;
  --radius: 18px;
  --maxw: 520px;
  /* Apple-style design tokens — new code should reach for these instead of
     hardcoded values. Existing rules unchanged so we don't ripple a refactor;
     the tokens give us a north star for consistency from here on. */
  --r-sm: 8px;    /* chips, badges, small pills */
  --r-md: 12px;   /* cards, list rows */
  --r-lg: 16px;   /* hero cards, segmented controls */
  --r-xl: 22px;   /* modals, sheets */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.2, .9, .3, 1.2);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 1px 6px rgba(0,0,0,.06);
  --shadow-md: 0 2px 6px rgba(0,0,0,.10), 0 10px 28px rgba(0,0,0,.18);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.14), 0 24px 56px rgba(0,0,0,.30);
  --focus-ring: 2px solid color-mix(in srgb, var(--accent) 70%, white);
  /* Type scale — Apple-style 8-step ladder. New code should always reach for
     one of these tokens instead of a raw px value; existing rules can migrate
     opportunistically. The values keep a ~1.20–1.25 modular ratio which is
     what iOS HIG uses for body→title progression.
       xs   → micro labels, captions, ad-tags, badge text
       sm   → list rows, default body, button labels
       base → comfortable read body (15px = iOS default for SF Body)
       md   → lead paragraphs, list-row headlines
       lg   → small section headlines, name labels
       xl   → page section headlines
       2xl  → hero / event-name headlines
       3xl  → display / launch screens (Oswald shines here) */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   22px;
  --text-xl:   28px;
  --text-2xl:  34px;
  --text-3xl:  56px;
  /* Spacing scale — 4px-base grid so margins/paddings snap to a rhythm.
     Same opportunistic-migration policy as the type tokens. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --font-brand: "Oswald", "Arial Narrow", system-ui, sans-serif;
  /* legacy alias — kept so old rules fall through to system font instead of Oswald */
  --font-head: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --backdrop: #050507;        /* desktop letterbox behind the phone frame */
  --bar: 11,11,15;            /* topbar/bottomnav base (rgb for translucency) */
}

/* Apple-feel accessibility: keyboard users get a visible ring on every focusable
   button / link. :focus-visible avoids the dreaded mouse-click outline that
   plagues every "buttons feel wrong" web app. */
.btn:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Respect prefers-reduced-motion — kill durations/animations for users who
   asked their OS for less motion (Apple's HIG calls this out specifically). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tabular numerals — stops digits from shifting when a value crosses a place
   boundary (1 → 10 → 100 → 1000). Apple, Bloomberg, every serious dashboard
   uses this everywhere a number can update in place. Applied broadly to the
   stat / point / countdown / odds / streak / time families so we don't have
   to remember each call-site. Body keeps proportional digits because reading
   prose with tabular nums looks robotic. */
.v, .stat-top, .stat-pts, .countdown, .countdown-box,
.odds-num, .odds-chip, .ev-meta, .hh-meta,
.rank-pts, .rank-no, .pod-pts, .pod-rank,
.pts, .points,
.streak-chip, .badge-chip,
.acc-bar + *, .stat-delta,
.fs-rv, .fs-bv, .ush-stat-v,
.profile-points, .profile-acc,
.day-streak-badge {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Universal press-feedback — every tappable surface drops to .98 scale for
   80ms when pressed, just like iOS list rows and buttons. Subtle enough to
   feel physical, fast enough to never delay the action. Excludes things
   that already have bespoke press states (.btn) so we don't double-animate.
   :where() keeps specificity 0 so existing rules win when they explicitly
   override transform. */
@media (hover: hover) {
  :where(.card.tap, .event-card, .pick-row, .rank-row, .rank-row-tap,
         .home-hero, .pod, .lang-chooser-btn, .grp-card, .creator-hero-card,
         .mep-row, .pkc-card, .fs-tab, .lang-chooser-btn,
         .grp-pulse-row, .grp-last-row,
         .pick-row, .badges-card, .prem-card) {
    transition: transform var(--t-fast, 120ms) var(--ease-out, ease),
                box-shadow var(--t-base, 200ms) var(--ease-out, ease);
  }
  :where(.card.tap, .event-card, .pick-row, .rank-row, .rank-row-tap,
         .home-hero, .pod, .lang-chooser-btn, .grp-card,
         .mep-row, .pkc-card, .fs-tab,
         .grp-pulse-row, .grp-last-row,
         .pick-row):active {
    transform: scale(.985);
  }
}

/* ── RTL safety net for Arabic (and any future RTL locale) ───────────────
   We don't want to refactor every directional rule in this file — instead
   keep most layout LTR and only flip the things that visibly read wrong
   when text mirrors. Tap-targets (bottomnav, topbar, match cards) are
   intentionally LTR even in RTL mode because emoji/icon positions and
   left-to-right time flow are universal. Only text-leading edges and the
   close-button placement get the mirror treatment. */
html[dir="rtl"] body { text-align: right; }
html[dir="rtl"] .center { text-align: center; }
html[dir="rtl"] .modal-close,
html[dir="rtl"] .modal-x { right: auto; left: 12px; }
html[dir="rtl"] .ad-tag,
html[dir="rtl"] .wc-badge,
html[dir="rtl"] .prem-badge { /* keep at logical-end of card */ }
html[dir="rtl"] .pick-row,
html[dir="rtl"] .grp-pulse-row,
html[dir="rtl"] .rank-row { flex-direction: row-reverse; }
html[dir="rtl"] .pick-res,
html[dir="rtl"] .mep-pts { text-align: left; }
html[dir="rtl"] .login,
html[dir="rtl"] .empty-state { text-align: center; }
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] { direction: ltr; text-align: left; }
/* Number-heavy components stay LTR (records, odds, times — universally LTR) */
html[dir="rtl"] .fs-rv,
html[dir="rtl"] .fs-bv,
html[dir="rtl"] .countdown,
html[dir="rtl"] .odds-num,
html[dir="rtl"] .pick-row .pick-res { direction: ltr; unicode-bidi: isolate; }

/* light mode — overrides the palette; toggled via <html class="light"> */
html.light {
  /* Warm paper white (statt kühlem Grau) — wirkt ruhiger und hochwertiger,
     Karten schweben mit weichen, gelayerten Schatten darüber. */
  --bg: #f4f5f2;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #eef0eb;
  --line: #e3e5df;
  --txt: #161817;
  --txt-dim: #6b7270;
  --backdrop: #dddfd8;
  --bar: 255,255,255;
  color-scheme: light;
}
html.light .card {
  border-color: color-mix(in srgb, var(--line) 60%, transparent);
  box-shadow: 0 1px 2px rgba(22,28,24,.04), 0 6px 20px rgba(22,28,24,.05);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  height: 100%; }
body { overscroll-behavior: none; }
/* v359: REVERTED all the .native-app document-lock CSS (v355–v358) — every variant
   fought the iOS safe-areas (clipped nav / black bar at the bottom). The clean
   layout is restored; the minor WKWebView overscroll-bounce is fixed at the NATIVE
   level instead (scrollView.bounces=false), not via CSS. (Epir 2026-06-07) */

#app { max-width: var(--maxw); width: 100%; margin: 0 auto; height: 100svh; display: flex;
  flex-direction: column; overflow: hidden; position: relative; background: var(--bg);
  container-type: inline-size; container-name: app; }

/* desktop / wide screens: frame the app as a centered modern phone (9:19.5) */
@media (min-width: 540px) {
  body { display: flex; align-items: center; justify-content: center; min-height: 100svh; background: var(--backdrop); }
  #app { height: min(100svh - 24px, 900px); width: auto; max-width: none; aspect-ratio: 9 / 19.5;
    border-radius: 34px; box-shadow: 0 0 0 1px var(--line), 0 24px 70px rgba(0,0,0,.6);
    transition: aspect-ratio .25s ease; }

  /* Per-tab widths — give each tab a frame that fits its content density:
     Rankings/QuickPick: slim (more focused), Groups: wide (more social),
     Profile: slightly narrower than Events. */
  body.tab-rankings #app { aspect-ratio: 9 / 21; }
  body.tab-quickpick #app { aspect-ratio: 9 / 21; }
  body.tab-groups #app { aspect-ratio: 9 / 17.5; }
  body.tab-profile #app { aspect-ratio: 9 / 20; }
}

/* Topbar */
.topbar { display: none; /* v374: Topbar entfernt — schlankeres Design; Profil+Einstellungen sind jetzt in der Bottom-Nav, Logo/Avatar/Dev bleiben nur im Markup (versteckt) damit JS-Refs heil bleiben (Epir 2026-06-07) */ flex: none; z-index: 20; background: rgba(var(--bar),.85);
  backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px); /* v351: clears iOS notch / status bar */ }
.topbar-inner { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; }
.brand { font-weight: 700; letter-spacing: 1px; font-size: 18px; }
.brand-mark { display: none; }  /* wordmark removed — logo alone is the home button */
.brand-mark.accent { color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { background: var(--card); border: 1px solid var(--line); color: var(--txt);
  width: 38px; height: 38px; border-radius: 12px; font-size: 16px; cursor: pointer; }
.icon-btn.on { background: var(--blue); border-color: var(--blue); }
.tg { display: inline-flex; align-items: center; gap: 5px; height: 38px;
  padding: 0 10px; border-radius: 12px; cursor: pointer; background: var(--card);
  border: 1px solid var(--line); color: var(--txt-dim);
  font-weight: 600; font-size: 12px; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1; white-space: nowrap; }
.tg svg { display: block; }
/* Topbar entry = the user's avatar (Epir 2026-06-02): a clean round, bordered
   avatar that reads as "you / account" — so the only gear left (Settings, in the
   profile head) is unambiguous. Accent ring while the Profile view is open. */
.top-profile { padding: 0; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: var(--card); border: 1px solid var(--line); justify-content: center; color: var(--txt-dim); }
.top-profile .ava { width: 32px; height: 32px; }
.top-profile .top-profile-ph { display: block; }
.top-profile.active { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(22,163,74,.22); }
.top-gear { padding: 0 9px; }
.top-gear.active { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 2px rgba(22,163,74,.22); }
/* Topbar coin-balance pill — shown only on the Profile screen (Epir 2026-06-03). */
.coins-pill { padding: 0 11px; color: var(--accent); border-color: rgba(22,163,74,.40);
  background: rgba(22,163,74,.10); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.coins-pill[hidden] { display: none; }
.tg.green { background: rgba(34,197,94,.14); border-color: var(--green); color: var(--green); }
.tg.red { background: rgba(22,163,74,.12); border-color: var(--accent); color: var(--accent); }
.user-select { background: var(--card); color: var(--txt); border: 1px solid var(--line);
  border-radius: 12px; padding: 8px 10px; font-size: 13px; max-width: 120px; }
/* middle dev/beta cluster: user switcher + dev panel, clearly labelled as temporary */
.dev-group { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dev-beta { font-size: 7px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--txt-dim); line-height: 1; opacity: .7; }
.dev-group-row { display: flex; align-items: center; gap: 6px; }

/* narrow app frame (real phones AND the desktop phone-frame): tighten the topbar
   so logo + 2 toggles + user + gear fit on one row */
@container app (max-width: 470px) {
  .topbar-inner { padding: 12px 12px; }
  .topbar-actions { gap: 6px; }
  .user-select { max-width: 84px; padding: 8px; }
  .tg { padding: 0 9px; gap: 4px; }
}

/* Dev panel */
.dev-panel { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 12px 16px; }
.dev-row { display: flex; gap: 8px; margin-bottom: 8px; }
.dev-btn { flex: 1; background: var(--card-2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dev-btn.primary { background: var(--accent); border-color: var(--accent); }
.dev-hint { color: var(--txt-dim); font-size: 11px; margin: 4px 0 0; }

/* View */
.view { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: none; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 24px;
  scrollbar-width: none; -ms-overflow-style: none; }   /* clean look — hide scrollbar, still scrolls */
  /* NB: -webkit-overflow-scrolling:touch REMOVED (v372). It forced the legacy iOS
     momentum-scroll path which ignores overscroll-behavior and bounces in a native
     sub-scroller JS preventDefault can't reach — the root cause of the rubber-band
     "Balken". On iOS 15+ momentum is the default without it, so feel is unchanged. */
.view::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* v379: finger-following tab paging — the fixed track + its 1:1-dragged preview panels */
.tab-track { will-change: transform; }
.tab-pan { background: var(--bg); will-change: transform; scrollbar-width: none; }
.tab-pan::-webkit-scrollbar { display: none; }
/* hide scrollbars on horizontal scrollers too */
.league-scroll::-webkit-scrollbar { display: none; }
.league-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.section-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .09em;
  color: color-mix(in srgb, var(--txt-dim) 88%, transparent); margin: 20px 4px 10px; font-weight: 700; }
.section-title:first-child { margin-top: 4px; }
/* Spoiler/Odds toggles moved out of the topbar INTO the Events tab (Epir 2026-06-01):
   small, inline with the section title, state-coloured via .tg.red / .tg.green.
   Spoiler sits at Spotlight height; Odds is right-aligned at "Upcoming Events". */
.evt-title-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.evt-title-row > span { flex: 1; min-width: 0; }
.evt-toggle { height: 26px; padding: 0 8px; gap: 4px; border-radius: 9px; font-size: 10px;
  letter-spacing: .02em; flex: 0 0 auto; }
.evt-toggle svg { width: 12px; height: 12px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; }
.card.tap { cursor: pointer; transition: transform .08s ease, border-color .2s; }
.card.tap:active { transform: scale(.99); }

/* Event list */
.event-card .ev-top { display: flex; justify-content: space-between; align-items: flex-start; }
.event-name { font-size: var(--text-md); font-weight: 700; margin: 0 0 var(--space-1); line-height: 1.25; }
.event-meta { color: var(--txt-dim); font-size: 12px; }
.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-2); font-size: 13px; }
.progress { height: 6px; background: var(--card-2); border-radius: 99px; margin-top: 12px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }

/* Badges */
.badge { font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 4px 8px;
  border-radius: 99px; text-transform: uppercase; }
.badge.upcoming { background: #2a2a38; color: var(--txt-dim); }
.badge.live { background: rgba(239,68,68,.15); color: #ef4444; }
.badge.live::before { content: "● "; animation: pulse 1s infinite; }
.badge.finished { background: rgba(34,197,94,.15); color: var(--green); }
.badge.locked { background: rgba(245,158,11,.15); color: var(--amber); }
@keyframes pulse { 50% { opacity: .35; } }

/* Match card */
.match { padding: 14px; }
.match-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.match-wc { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .5px; }
.match-main-tag { color: var(--blue); font-weight: 700; font-size: 11px; }
.teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
.corner { border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 8px; text-align: center;
  background: var(--card-2); cursor: pointer; transition: all .15s; }
.corner .cn { font-weight: 700; font-size: 14px; line-height: 1.2; }
.corner .ctag { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.corner.red .ctag { color: var(--accent); }
.corner.blue .ctag { color: var(--blue); }
/* friends' picks on a match */
.friends-row { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.fp-label { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 7px; }
.fp-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.fp-chip { position: relative; width: 27px; height: 27px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; background: var(--card-2); color: var(--txt-dim); border: 2px solid var(--line); overflow: hidden; }
.fp-chip .fp-ini { line-height: 1; }
.fp-chip .fp-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.fp-chip.fp-red { border-color: var(--accent); color: var(--accent); }
.fp-chip.fp-blue { border-color: var(--blue); color: var(--blue); }
.fp-chip.fp-hidden { filter: blur(0.6px); opacity: .65; }
.fp-chip.fp-tap { cursor: pointer; transition: transform .12s ease; }
.fp-chip.fp-tap:hover { transform: scale(1.08); }
.fp-chip.fp-tap:active { transform: scale(.94); }
/* Overflow chip when the friend-pick grid is capped (e.g. "+43") — neutral, non-tappable. */
.fp-chip.fp-more { background: var(--line); color: var(--txt-dim); border-color: transparent; font-weight: 800; cursor: default; }
/* Friends-first grid: real friends (private groups) show by default; the rest of
   the users hide behind a "👥 +N" button (revealed via display:contents). */
.fp-lazy-wrap { display: none; }
.fp-lazy-wrap.shown { display: contents; }
.fp-load-users { margin-top: 8px; padding: 5px 12px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); color: var(--txt-dim); font-size: 12px; font-weight: 800; cursor: pointer; }
.fp-load-users:hover { background: var(--card); color: var(--txt); }
.fp-note { font-size: 10px; color: var(--txt-dim); margin-left: 4px; }
/* Friend-chip + reactions wrapper: chip on top, reaction pills underneath */
.fp-chip-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fp-rxs { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; max-width: 70px; }
.fp-rx { display: inline-flex; align-items: center; gap: 2px; padding: 1px 5px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--txt-dim);
  font-size: 9px; font-weight: 600; line-height: 1.3; }
.fp-rx.mine { background: rgba(22,163,74,.12); border-color: var(--accent); color: var(--accent); }
/* Floating emoji picker shown when a friend-chip is tapped */
.rx-picker { position: fixed; z-index: 9999; display: flex; gap: 4px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); animation: rxIn .14s ease; }
@keyframes rxIn { from { opacity: 0; transform: translateY(4px) scale(.94); } to { opacity: 1; transform: none; } }
.rx-emoji { width: 36px; height: 36px; border: none; background: transparent; border-radius: 10px;
  font-size: 20px; line-height: 1; cursor: pointer; transition: transform .1s ease, background .15s; }
.rx-emoji:hover { background: var(--card-2); transform: scale(1.15); }
.rx-emoji:active { transform: scale(.92); }
.rx-emoji.mine { background: rgba(22,163,74,.18); }
/* Explicit per-friend pick list under the match chips (post-lock only) */
.fpd-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.fpd-row { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 8px;
  background: var(--card-2); border: 1px solid var(--line); font-size: 12px; line-height: 1.3; }
.fpd-row.fpd-red { border-left: 3px solid var(--accent); }
.fpd-row.fpd-blue { border-left: 3px solid var(--blue); }
.fpd-row.fpd-ok { background: rgba(34, 197, 94, 0.08); }
.fpd-row.fpd-miss { opacity: .65; }
.fpd-name { font-weight: 600; color: var(--txt); }
.fpd-arrow { color: var(--txt-dim); font-weight: 700; }
.fpd-who { color: var(--txt); font-weight: 500; }
.fpd-meta { color: var(--txt-dim); font-size: 11px; }
.fpd-pts { margin-left: auto; font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 999px;
  background: var(--card); color: var(--txt-dim); border: 1px solid var(--line); }
.fpd-pts.fpd-ok { background: rgba(34, 197, 94, 0.15); color: rgb(34, 165, 74); border-color: rgba(34, 197, 94, 0.4); }
.fpd-pts.fpd-miss { background: rgba(239,68,68,.08); color: var(--txt-dim); border-color: var(--line); }
.odds-chip { display: inline-block; margin-left: 5px; padding: 1px 6px; border-radius: 6px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .3px;
  text-transform: none; vertical-align: middle; }
/* OneFootball-style odds row */
.odds-row { display: flex; gap: 8px; margin-top: 12px; }
.odds-pick { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: 11px; background: rgba(0,0,0,.35); border: 1px solid var(--line); min-width: 0; }
.odds-pick .op-name { font-size: 12px; font-weight: 600; color: var(--txt-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odds-pick .op-val { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--gold); }
.odds-pick.red { border-left: 3px solid var(--accent); }
/* Blue corner's accent hugs the RIGHT edge so the two pills bookend the row
   like real match corners (red left · blue right). Epir 2026-05-31. */
.odds-pick.blue { border-right: 3px solid var(--blue); }
/* ad placeholder slot */
.ad-slot { position: relative; margin: 16px 0; min-height: 90px; border: 1px dashed var(--line);
  border-radius: 14px; background: var(--card); display: flex; align-items: center; justify-content: center; }
.ad-slot[hidden] { display: none !important; }
.ad-tag { position: absolute; top: 7px; left: 9px; font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-dim); }
.ad-body { color: var(--txt-dim); font-size: 13px; letter-spacing: .03em; }
/* watch (broadcaster) affiliate card */
.watch-card { position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-top: 22px; }
.wc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-dim); }
.wc-when { font-weight: 700; font-size: 14px; margin-top: 2px; }
.wc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 12px;
  background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
.wc-badge { position: absolute; top: 6px; right: 8px; font-size: 9px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold);
  background: rgba(245,197,24,.10); border: 1px solid rgba(245,197,24,.35);
  padding: 2px 6px; border-radius: 999px; }
/* betting affiliate banner */
.bet-ad { position: relative; display: flex; align-items: center; justify-content: center;
  margin: 12px 0; min-height: 56px; padding: 14px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, rgba(22,163,74,.18), rgba(245,197,24,.12));
  border: 1px solid var(--line); }
.bet-ad-body { color: var(--txt); font-weight: 700; font-size: 14px; }
/* v210: non-gambling alternative — calmer blue/green gradient, no 18+ chip */
.bet-ad.alt-ad {
  background: linear-gradient(135deg, rgba(59,130,246,.16), rgba(110,224,168,.10));
}
.bet-ad.alt-ad .ad-tag {
  background: rgba(59,130,246,.18); color: #3b82f6; border-color: rgba(59,130,246,.3);
}
.alt-ad-icon { font-size: 18px; margin-right: 4px; vertical-align: -2px; }
.bet-gate { flex-wrap: wrap; gap: 10px; }
.age-btn { background: var(--txt); color: var(--bg); border: none; border-radius: 8px;
  padding: 7px 14px; font-weight: 700; font-size: 12px; cursor: pointer; }
/* promo / raffle banner */
.promo-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 14px 16px;
  border-radius: 14px; background: linear-gradient(135deg, rgba(245,197,24,.16), rgba(22,163,74,.10));
  border: 1px solid rgba(245,197,24,.4); }
.pb-icon { font-size: 26px; }
.pb-title { font-weight: 700; font-size: 14px; }
.pb-sub { color: var(--txt-dim); font-size: 12px; margin-top: 2px; }
.corner.picked.red { border-color: var(--accent); background: rgba(239,68,68,.12); box-shadow: 0 0 0 1px var(--accent) inset; }
.corner.picked.blue { border-color: var(--blue); background: rgba(59,130,246,.12); box-shadow: 0 0 0 1px var(--blue) inset; }
/* Result colours the WHOLE card (Epir 2026-05-31): Sieger = ganze Karte grün +
   Glow, Verlierer ausgegraut. ".mine" (Post-Result = dein Pick) = grünes Outline
   → auf dem Sieger extra hell, auf einem verlorenen Pick „gräuliches grün" (durch
   .lose-Opacity gedimmt). ".perfect" (Sieger+Art+Runde = 5 Pkt) = extra fetter Rahmen. */
.corner.win { box-shadow: 0 0 0 2px var(--green) inset, 0 0 22px -6px rgba(34,197,94,.6); border-color: var(--green); background: rgba(34,197,94,.08); }
.corner.lose { opacity: .32; filter: grayscale(.6); }  /* Verlierer deutlich ausgegraut — entsättigt + gedimmt (Epir 2026-05-31) */
.corner.mine { box-shadow: 0 0 0 3px rgba(34,197,94,.7); }
.corner.win.mine { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 3px rgba(34,197,94,.92), 0 0 26px -2px rgba(34,197,94,.8); }
.corner.lose.mine { opacity: .8; filter: grayscale(.08); box-shadow: 0 0 0 3px rgba(234,179,8,.95), 0 0 16px -2px rgba(234,179,8,.6); }  /* v354: DEIN Fehlpick bleibt klar GELB sichtbar — überschreibt das starke .lose-Dimmen (.32) + Graustufen (.6), die das Gelb auf ~16% auswuschen (Epir 2026-06-07). Generische Verlierer bleiben via .corner.lose ausgegraut. */
.corner.win.mine.perfect { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 5px rgba(34,197,94,1), 0 0 32px 0 rgba(34,197,94,.9); }
/* Korrekter Pick (du hattest den Sieger, ≥1 Pkt) pulsiert sanft grün — zusätzlich
   zum statischen Rahmen; perfekt (5 Pkt) kräftiger. (Epir 2026-05-31) */
@keyframes correctPickPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 3px rgba(34,197,94,.92), 0 0 14px -4px rgba(34,197,94,.4); }
  50%      { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 3px rgba(34,197,94,.92), 0 0 30px 0 rgba(34,197,94,.85); }
}
@keyframes perfectPickPulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 5px rgba(34,197,94,1), 0 0 18px -2px rgba(34,197,94,.55); }
  50%      { box-shadow: 0 0 0 2px var(--green) inset, 0 0 0 5px rgba(34,197,94,1), 0 0 40px 2px rgba(34,197,94,.95); }
}
.corner.win.mine { animation: correctPickPulse 2.4s ease-in-out infinite; }
.corner.win.mine.perfect { animation: perfectPickPulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .corner.win.mine, .corner.win.mine.perfect { animation: none; } }
.mypick-tag { position: absolute; top: 6px; left: 6px; z-index: 2; font-size: 9px; font-weight: 800;
  padding: 2px 7px; border-radius: 999px; letter-spacing: .04em; background: rgba(255,255,255,.07);
  color: var(--txt-dim); border: 1px solid var(--line); }
.mypick-tag.ok { background: rgba(34,197,94,.22); color: var(--green); border-color: rgba(34,197,94,.6); }
.mypick-tag.warn { background: rgba(234,179,8,.34); color: #facc15; border-color: rgba(234,179,8,.9); }  /* v354: kräftigeres, besser lesbares Gelb */
.corner.disabled { cursor: default; opacity: .9; }
.corner { position: relative; }
.corner-tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.corner-win { margin-top: 6px; display: inline-block; background: rgba(34,197,94,.18); color: var(--green);
  font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 99px; }
.live-seg { display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px; }
.live-seg > div { flex: 1; padding: 11px; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 13px; }
.live-seg .ls-a { background: var(--card); color: var(--txt); border-right: 1px solid var(--line); }
.live-seg .ls-b { background: var(--card); color: var(--txt-dim); }
.vs { display: flex; align-items: center; justify-content: center; color: var(--txt-dim);
  font-weight: 700; font-size: 12px; }

.rounds { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.round-chip { border: 1px solid var(--line); background: var(--card-2); color: var(--txt-dim);
  border-radius: 99px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.round-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.rounds-label { font-size: 11px; color: var(--txt-dim); margin: 12px 0 6px; }

.result-line { margin-top: 12px; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
/* Any positive score = green (covers 1–5 + Lone-Wolf bonus values 6,8,12…),
   zero = neutral translucent grey that works in light AND dark mode — the old
   solid #2a2a38 looked like a dark blob on white. (Epir 2026-05-31) */
.pts { font-weight: 700; border-radius: 99px; padding: 4px 10px; font-size: 12px;
  background: rgba(34,197,94,.18); color: var(--green); }
.pts.p0 { background: rgba(140,140,155,.2); color: var(--txt-dim); }
.result-hidden { color: var(--txt-dim); font-style: italic; }

/* Rankings */
.tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.tab { flex: 1; text-align: center; padding: 10px; border-radius: 12px; background: var(--card);
  border: 1px solid var(--line); color: var(--txt-dim); font-weight: 700; font-size: 13px; cursor: pointer; }
.tab.on { background: var(--txt); border-color: var(--txt); color: var(--bg); }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.rank-row.me { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset; }
.rank-no { font-weight: 700; width: 28px; text-align: center; font-size: 16px; color: var(--txt-dim); }
.rank-no.top { color: var(--accent-2); }
.rank-name { flex: 1; font-weight: 700; }
.rank-acc { font-size: 11px; color: var(--txt-dim); }
.rank-pts { font-weight: 700; font-size: var(--text-md); }
.rank-pts small { font-size: var(--text-xs); color: var(--txt-dim); font-weight: 600; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.stat .v { font-size: 26px; font-weight: 700; }
.stat .v.accent { color: var(--txt); }
.stat .l { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

/* Forms */
.field { width: 100%; background: var(--card-2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 12px; padding: 12px; font-size: 14px; margin-bottom: 10px;
  transition: border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out); }
.field:hover { border-color: color-mix(in srgb, var(--line) 50%, var(--accent) 50%); }
.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); outline: none; }
.btn { width: 100%; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, white), var(--accent));
  color: #fff; border: none; border-radius: 13px;
  box-shadow: 0 1px 2px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.18);
  padding: 13px; font-size: 15px; font-weight: 700; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background var(--t-base) var(--ease-out);
  will-change: transform; }
.btn:hover { box-shadow: var(--shadow-sm); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn.ghost { background: var(--card); border: 1px solid var(--line); color: var(--txt); }
.btn.ghost:hover { background: var(--card-2); }
/* login screen */
.login { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center; gap: 10px; padding: 56px 24px 24px; }
.login-logo { width: 110px; height: 128px; background-color: var(--accent);
  -webkit-mask: url('logo-mark.png') no-repeat center / contain;
  mask: url('logo-mark.png') no-repeat center / contain; }
.login-title { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: var(--text-2xl);
  letter-spacing: 2px; margin-top: 6px; }
.login-beta { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--txt-dim); background: rgba(127,127,127,.12); border: 1px solid var(--line); border-radius: 999px; padding: 2px 11px; margin: 2px 0 9px; }
.login-sub { color: var(--txt-dim); font-size: 14px; margin-bottom: 8px; }
.login-pitch { color: var(--txt-dim); font-size: 13px; line-height: 1.45; max-width: 300px; margin: 0 auto 18px; text-align: center; opacity: .88; }
.login-msg { color: var(--accent); font-size: 13px; margin-bottom: 6px; }
.auth-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 300px;
  padding: 12px 16px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer;
  border: 1.5px solid transparent; }
.auth-btn svg { flex: none; }
.auth-google { background: #fff; color: #1f1f1f; border-color: #c4c5cc; }
.auth-apple { background: #000; color: #fff; margin-top: 10px; }
.auth-apple.auth-disabled { opacity: .45; cursor: default; }
.auth-soon { font-size: 11px; font-weight: 400; opacity: .7; margin-left: 2px; }
.auth-divider { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 300px;
  margin: 16px 0 4px; color: var(--txt-dim); font-size: 12px; }
.auth-divider::before,.auth-divider::after { content:""; flex:1; height:1px; background:var(--line); }
.auth-input { width: 100%; max-width: 300px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid #c4c5cc; background: var(--card); color: var(--txt);
  font-size: 16px; margin-top: 8px; box-sizing: border-box; outline: none; }
.auth-input:focus { border-color: var(--blue); }
.auth-email-btn { margin-top: 10px; background: var(--accent); color: #fff; border-color: transparent; }
.auth-email-btn:disabled { opacity: .5; cursor: default; }
.auth-email-links { display: flex; justify-content: space-between; width: 100%; max-width: 300px;
  margin-top: 10px; font-size: 12px; }
.auth-email-links a { color: var(--txt-dim); text-decoration: underline; cursor: pointer; }
.login-demo { background: none; border: none; color: var(--txt-dim); font-size: 13px;
  text-decoration: underline; cursor: pointer; margin-top: 16px; }
/* v201: Demo CTA promoted to hero — gold-bordered, two-line layout with
 * subtitle, sits right under the brand line so visitors see the demo
 * choice immediately. Replaces the tiny text-link at the bottom. */
.auth-demo-hero {
  width: 100%; max-width: 320px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.10), rgba(22,163,74,.06));
  border: 2px solid var(--gold, #f5c518);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  margin-top: 18px; margin-bottom: 8px;
  text-align: left;
  color: var(--txt);
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-demo-hero:hover {
  box-shadow: 0 6px 18px -6px rgba(245,197,24,.4);
}
.auth-demo-hero:active { transform: scale(.99); }
/* v219: Investor Tour CTA — sits below Demo Testen, deeper red+gold accent
 * so it's distinguishable but visually sibling. Routes directly to the
 * Full Investor Tour orchestrator without going through ?dev=1. */
.auth-tour-hero {
  width: 100%; max-width: 320px;
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(52,211,153,.08));
  border: 2px solid var(--accent);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  margin-bottom: 18px;
  text-align: left;
  color: var(--txt);
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}
.auth-tour-hero:hover { box-shadow: 0 6px 18px -6px rgba(22,163,74,.4); }
.auth-tour-hero:active { transform: scale(.99); }
.auth-tour-hero .auth-demo-title { color: var(--accent); }
.auth-demo-icon {
  font-size: 28px; line-height: 1; flex: 0 0 32px; text-align: center;
}
.auth-demo-body {
  display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1;
}
.auth-demo-title {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 16px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold, #f5c518);
}
.auth-demo-sub {
  font-size: 12px; color: var(--txt-dim); line-height: 1.35;
}
.verify-screen { padding-top: 80px; text-align: center; }
.verify-icon { font-size: 56px; margin-bottom: 14px; }
.verify-title { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: 28px; color: var(--txt); margin-bottom: 12px; }
.verify-sub { color: var(--txt-dim); font-size: 14px; line-height: 1.5; max-width: 320px; margin: 0 auto 22px; }
.verify-sub b { color: var(--txt); }
.verify-hint { color: var(--txt-dim); font-size: 12px; max-width: 280px; margin: 14px auto 0; line-height: 1.5; }
.verify-back { display: inline-block; color: var(--txt-dim); font-size: 13px; text-decoration: underline; cursor: pointer; margin-top: 22px; }

/* Bottom nav */
.bottomnav { flex: none; display: flex; background: rgba(var(--bar),.92);
  backdrop-filter: blur(12px); border-top: 1px solid var(--line); z-index: 20;
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.nav-btn { flex: 1; background: none; border: none; color: var(--txt-dim); padding: 10px 0 14px;
  font-size: 10px; font-weight: 700; display: flex; flex-direction: column; align-items: center;
  gap: 3px; cursor: pointer; }
.nav-btn > span:first-child { font-size: 20px; height: 22px; display: inline-flex;
  align-items: center; justify-content: center; line-height: 1; }
.nav-btn > span[data-i18n] { font-size: 10px; font-weight: 700; white-space: nowrap; }
.nav-btn.active { color: var(--accent); }
/* v376: Profil-Nav zeigt das eigene Avatar (Epir) — runder Avatar statt generischem Icon, Accent-Ring wenn aktiv */
.nav-btn #navProfileIcon { height: 24px; }
.nav-btn #navProfileIcon .ava { width: 24px; height: 24px; font-size: 9px; border: 1px solid var(--line); }
.nav-btn.active #navProfileIcon .ava { box-shadow: 0 0 0 2px var(--accent); border-color: transparent; }

/* Misc */
.back { color: var(--txt-dim); background: none; border: none; font-size: 14px; cursor: pointer;
  margin-bottom: 8px; padding: 4px 0; }
.muted { color: var(--txt-dim); font-size: 13px; }
/* Generic centered text helper — used as a graceful fallback for places that
   haven't migrated to the emptyState() card yet. Padding + max-width + line
   length so even a single sentence reads cleanly instead of looking forgotten. */
.center { text-align: center; padding: 48px 24px; color: var(--txt-dim);
  font-size: 14px; line-height: 1.5; max-width: 38ch; margin: 0 auto; }
.hidden { display: none !important; }
.toast { position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  background: var(--card-2); border: 1px solid var(--line); color: var(--txt); padding: 10px 18px;
  border-radius: 99px; font-size: 13px; font-weight: 600; z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.invite-code { font-family: ui-monospace, monospace; background: var(--card-2); padding: 4px 10px;
  border-radius: 8px; border: 1px solid var(--line); letter-spacing: 2px; }
.row-between { display: flex; justify-content: space-between; align-items: center; }

/* Logo */
.brand { display: flex; align-items: center; }
.logo { width: 26px; height: 30px; margin-right: 0; background-color: var(--accent);
  -webkit-mask: url('logo-mark.png') no-repeat center / contain;
  mask: url('logo-mark.png') no-repeat center / contain; }

/* Avatars */
.ava { position: relative; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, #2a2a38, #14141c);
  display: flex; align-items: center; justify-content: center; }
.ava-fallback { font-weight: 700; color: var(--txt-dim); }
.ava-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; background: #14141c; }
.ava-flag { position: absolute; bottom: -2px; right: -2px; width: 42%; height: 42%;
  border-radius: 50%; object-fit: cover; border: 2px solid var(--card); background: var(--card); }
.ava-md { width: 60px; height: 60px; margin: 0 auto 8px; }
.ava-md .ava-fallback { font-size: 20px; }
.ava-sm { width: 38px; height: 38px; }
.ava-sm .ava-fallback { font-size: 14px; }
.ava-lg { width: 84px; height: 84px; }
.ava-lg .ava-fallback { font-size: 30px; }
/* Team image ALWAYS keeps its red/blue corner ring — so you never forget which
   corner, even on the (green) winner card. The result/your-pick lives on the CARD,
   not the photo. (Epir 2026-05-31 — removed the green .corner.win .ava override.) */
.corner.red .ava { box-shadow: 0 0 0 2px rgba(239,68,68,.55); }
.corner.blue .ava { box-shadow: 0 0 0 2px rgba(59, 130, 246, .55); }

/* Hero banner */
.hero { position: relative; border-radius: var(--radius); overflow: hidden;
  margin-bottom: 14px; border: 1px solid var(--line); }
.hero-bg { position: absolute; inset: 0; background:
  radial-gradient(130% 100% at 100% 0%, rgba(22,163,74,.30), transparent 55%),
  radial-gradient(110% 90% at 0% 100%, rgba(52,211,153,.10), transparent 50%),
  linear-gradient(135deg, #102418, #0b0d0c 72%); }  /* Flutlicht-auf-Rasen statt UFC-Blutrot */
.hero-octagon { position: absolute; right: -28px; top: -22px; width: 175px; height: 175px; opacity: .12; }
.hero-content { position: relative; padding: 18px 16px; color: #fff; }  /* hero bg is always dark → light text */
.hero-title { font-size: 22px; font-weight: 700; margin: 10px 0 4px; line-height: 1.15; color: #fff; }
.hero-meta { color: rgba(255,255,255,.78); font-size: 12px; margin-bottom: 12px; }
.hero .cd-label { color: rgba(255,255,255,.7); }

/* Event card accent */
.event-card { position: relative; overflow: hidden; }
.event-card.dimmed { opacity: .5; filter: grayscale(.5); }
.event-card.dimmed:active { opacity: .8; }
/* pulsing red LIVE chip next to the Spotlight title */
.live-dot { color: #ef4444; font-size: 11px; font-weight: 700; letter-spacing: .05em; margin-left: 8px; animation: livepulse 1.2s ease-in-out infinite; }
.hero-past-chip { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 8px; background: rgba(0,0,0,.06); color: var(--txt-dim); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; }
@keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* app footer (legal links) */
.app-footer { margin: 22px 0 8px; text-align: center; }
.foot-links { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.foot-links a { color: var(--txt-dim); font-size: 12px; cursor: pointer; text-decoration: underline; }
.foot-links span { color: var(--line); font-size: 12px; }
.foot-meta { color: var(--txt-dim); font-size: 11px; margin-top: 8px; opacity: .7; }
.foot-attrib { color: var(--txt-dim); font-size: 10px; margin-top: 4px; opacity: .55; }
.foot-attrib a { color: inherit; text-decoration: underline; }
/* simple modal (legal pages) */
.modal-ov { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 20px; }
.modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; max-width: 460px;
  width: 100%; max-height: 80svh; display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-bottom: 1px solid var(--line); }
.modal-x { background: none; border: none; color: var(--txt-dim); font-size: 16px; cursor: pointer; }
.modal-body { padding: 16px; overflow-y: auto; color: var(--txt-dim); font-size: 13px; line-height: 1.6; }
/* Settings overlay (Epir 2026-06-01): profile ⚙ gear → modal. The generic
   .modal-body is sized for legal copy; normalise it so the setting cards read
   at full contrast/size. */
.settings-body { color: var(--txt); font-size: 14px; line-height: 1.5; }
.settings-body .card { margin-bottom: 0; }
.settings-body .card + .card,
.settings-body > div + div { margin-top: 12px; }
.settings-body .set-title { font-weight: 700; font-size: 14px; margin-bottom: 8px; }

/* Group Detail — Next-Event pulse + Last-Event compare */
.grp-pulse, .grp-last { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-top: 12px; }
.grp-pulse-head, .grp-last-head { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--txt-dim); text-transform: uppercase; margin-bottom: 8px; }
.grp-pulse-event, .grp-last-event { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.grp-pulse-name, .grp-last-name { font-weight: 700; color: var(--txt); font-size: 14px; }
.grp-pulse-meta { color: var(--txt-dim); font-size: 12px; margin-top: 2px; }
.grp-pulse-members { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.grp-pulse-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: var(--card-2); }
.grp-pulse-row.me { background: rgba(22,163,74,.08); border: 1px solid rgba(22,163,74,.2); }
.grp-pulse-name-cell { flex: 1; min-width: 0; font-size: 13px; color: var(--txt); }
.grp-pulse-tip { font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--txt-dim); }
.grp-pulse-row.done .grp-pulse-tip { color: #15803d; }
.grp-pulse-row.partial .grp-pulse-tip { color: var(--blue); }
.grp-pulse-row.missing .grp-pulse-tip { color: var(--accent); }
.grp-pulse-cta { width: 100%; padding: 10px 16px; font-size: 14px; }

.grp-last-top { color: var(--txt-dim); font-size: 12px; margin-top: 4px; }
.grp-last-top b { color: var(--accent); }
.grp-last-totals { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.grp-last-total { display: flex; align-items: center; gap: 8px; padding: 7px 10px; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px;
  width: 100%; text-align: left; cursor: pointer; transition: background .15s, transform .1s; font: inherit; color: inherit; }
.grp-last-total:hover { background: var(--card); }
.grp-last-total:active { transform: scale(.98); }
.grp-last-total.me { background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); }
.grp-last-total-name { flex: 1; font-size: 13px; color: var(--txt); font-weight: 600; }
.grp-last-total-hint { font-size: 10px; color: var(--txt-dim); font-weight: 400; margin-top: 1px; }
.grp-last-total-pts { font-family: var(--font-head); font-weight: 700; color: var(--accent); font-size: 14px; }
.grp-last-total-chev { color: var(--txt-dim); font-size: 18px; line-height: 1; padding-left: 2px; }
/* Live-Group-Pulse indicator on group-detail card when next_event is live/locked */
.grp-live { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; margin-left: 8px;
  animation: livepulse 1.5s ease-in-out infinite; }
.grp-live-meta { color: var(--accent); font-weight: 500; }

/* Tappable rank rows — group + event-letztes leaderboards open the picks
   drilldown. Visual cue: chevron + hover tint, no big restyle. */
button.rank-row, button.rank-row-tap { width: 100%; text-align: left; border: 1px solid var(--line);
  background: var(--card); cursor: pointer; font: inherit; color: inherit; transition: background .15s, transform .1s; }
.rank-row-tap:hover { background: var(--card-2); }
.rank-row-tap:active { transform: scale(.985); }
.rank-chev { color: var(--txt-dim); font-size: 20px; line-height: 1; padding-left: 4px; }

/* Event-picker modal (Welches Event?) — shown from Group rankings / Group leaderboard */
.mep-pick-ev-list { display: flex; flex-direction: column; gap: 6px; padding: 12px !important; max-height: 60vh; overflow-y: auto; }
.mep-pick-ev { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 11px 14px; background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  cursor: pointer; transition: background .15s, transform .1s; font: inherit; color: inherit; text-align: left; }
.mep-pick-ev:hover { background: var(--card); }
.mep-pick-ev:active { transform: scale(.985); }
.mep-pick-ev-name { font-weight: 600; font-size: 13px; color: var(--txt); line-height: 1.3; }
.mep-pick-ev-meta { font-size: 11px; color: var(--txt-dim); }

/* ============================================================ */
/* NEW EVENT-DETAIL HERO — teams above the fold, no duplicate
   venue/date, single compact action row. Replaces the old hero
   that stacked statusBadge → name → venue → date → countdown. */
.ev-hero { padding-bottom: 14px; }
.ev-hero-content { display: flex; flex-direction: column; gap: 10px; }
.ev-hero-top { display: flex; justify-content: space-between; align-items: center; padding: 0 2px; }
.ev-hero-status { font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 3px 9px; border-radius: 999px; }
.ev-hero-status.live { background: #ef4444; color: #fff; animation: livepulse 1.2s ease-in-out infinite; }
.ev-hero-status.finished { background: rgba(255,255,255,.12); color: #fff; }
.ev-hero-status.upcoming { background: rgba(29,111,224,.85); color: #fff; }
.ev-live-autorefresh { margin-left: 8px; background: rgba(255,55,55,.15) !important; color: var(--accent) !important; animation: livepulse 2s ease-in-out infinite; }
.ev-hero-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 8px 4px 4px; }
.ev-hero-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,.05);
  border: 3px solid; display: flex; align-items: center; justify-content: center; margin: 0 auto; flex-shrink: 0; }
.ev-hero-photo.red { border-color: var(--accent); }
.ev-hero-photo.blue { border-color: var(--blue); }
.ev-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.ev-hero-photo-fb { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: #fff; opacity: .85; }
/* Finished main-event hero: WINNER photo glows strong green — your correct call
   pulses + grows — and the loser greys out hard. Stronger than the match cards on
   purpose (Epir 2026-06-07: "wie bei den anderen aber MEHR · effekt beim gewinner"). */
.ev-hero-photo.ev-hero-win { border-color: var(--green) !important; box-shadow: 0 0 0 3px var(--green), 0 0 34px 2px rgba(34,197,94,.7); }
.ev-hero-photo.ev-hero-win-mine { animation: heroWinPulse 1.9s ease-in-out infinite; }
.ev-hero-photo.ev-hero-lose { opacity: .32; filter: grayscale(.78); }
@keyframes heroWinPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--green), 0 0 26px 0 rgba(34,197,94,.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 5px var(--green), 0 0 50px 8px rgba(34,197,94,1);  transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .ev-hero-photo.ev-hero-win-mine { animation: none; transform: none; } }
.ev-hero-mypick { margin: 10px auto 0; max-width: 92%; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.82); }
.ev-hero-mypick.good { color: var(--green); }
.ev-hero-mypick.bad { color: #f59e0b; }
.ev-hero-pts { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(34,197,94,.2); color: var(--green); font-weight: 800; font-size: 12px; }
.ev-hero-mypick.bad .ev-hero-pts { background: rgba(245,158,11,.16); color: #f59e0b; }
.ev-hero-center { text-align: center; min-width: 0; padding: 0 4px; }
.ev-hero-tag { font-size: 9px; letter-spacing: .12em; color: rgba(255,255,255,.6); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.ev-hero-names { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.ev-hero-name { font-family: var(--font-head); font-weight: 700; font-size: 16px; line-height: 1.1; color: #fff; }
.ev-hero-name.red { color: #fff; }
.ev-hero-name.blue { color: #fff; }
.ev-hero-vs-big { color: rgba(255,255,255,.45); font-weight: 600; font-size: 11px; letter-spacing: .15em; padding: 1px 0; }
.ev-hero-records { font-size: 11px; color: rgba(255,255,255,.65); margin-top: 4px; letter-spacing: .04em; }
.ev-hero-odds { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 6px; }
.ev-hero-odds .odds-chip { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); color: var(--gold); }
.ev-hero-vs { color: rgba(255,255,255,.4); font-size: 10px; font-weight: 700; }
.ev-hero-event-name { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: rgba(255,255,255,.85);
  text-align: center; margin: 6px 0 0; line-height: 1.3; }
.ev-hero-meta { font-size: 12px; color: rgba(255,255,255,.65); text-align: center; line-height: 1.4; }
.ev-hero-progress-label { font-size: 11px; color: rgba(255,255,255,.6); text-align: center; margin-top: 4px; }

/* v240: Friend-picks banner — was a fat 60-px tall gradient block;
 * now a compact 32-px chip-style strip. Same info (count + status),
 * 50% less visual weight. ev-friends-mine variant keeps the green
 * tint so "you already tipped" still pops. */
.ev-friends-banner { display: flex; align-items: center; gap: 8px; padding: 7px 12px; margin: 8px 0;
  background: rgba(29,111,224,.08);
  border: 1px solid var(--line); border-radius: 999px; }
.ev-friends-banner.ev-friends-mine { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.3); }
.ev-friends-icon { font-size: 14px; flex-shrink: 0; }
.ev-friends-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.ev-friends-title { font-weight: 700; font-size: 12px; color: var(--txt); }
.ev-friends-sub { font-size: 11px; color: var(--txt-dim); }
.ev-friends-sub::before { content: "·"; margin-right: 6px; color: var(--txt-dim); opacity: .6; }
.ev-friends-cta { background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 4px 10px; font-weight: 700; font-size: 11px; cursor: pointer; flex-shrink: 0;
  transition: transform .1s; }
.ev-friends-cta:hover { transform: scale(1.03); }
.ev-friends-cta:active { transform: scale(.97); }

/* v240: action chips (was: full-width buttons that ate 4 rows of vertical
 * space and made the event page feel crowded — Epir feedback "zu viel
 * Action"). Now a single horizontal-scroll chip row that fits 4-5 chips
 * on a mobile viewport. The Watch-on-DAZN CTA stays prominent below as
 * its own primary button — it's the only one that monetises. */
.ev-actions { display: flex; gap: 6px; margin: 10px 0 14px; overflow-x: auto;
  scrollbar-width: none; padding-bottom: 4px; -ms-overflow-style: none; }
.ev-actions::-webkit-scrollbar { display: none; }
.ev-act { flex: 0 0 auto; min-width: auto; padding: 7px 13px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--txt); cursor: pointer;
  white-space: nowrap; transition: background .15s; }
.ev-act:hover { background: var(--card); }
.ev-act:active { transform: scale(.97); }
/* Watch-on-DAZN remains the primary money button — full-width pill below the
 * chip row instead of an inline chip, so it doesn't get lost in the scroll. */
.ev-act-watch { background: var(--accent); color: #fff; border-color: var(--accent);
  flex: 0 0 auto; padding: 9px 16px; font-weight: 700; }
.ev-act-watch:hover { background: #c91c1c; }
/* Per-event push-mute pill — neutral when on, dim when muted */
.ev-act-mute { display: inline-flex; align-items: center; gap: 5px; min-width: auto;
  flex: 0 0 auto; padding: 7px 12px; }
.ev-act-mute.is-muted { opacity: .65; }
.ev-act-mute .ev-act-mute-label { font-size: 11px; letter-spacing: .02em; }
/* v294: "🔔 Erinnern" pill + sheet — folds Reminder/+Calendar/Push into one menu. */
.ev-act-remind.is-on { border-color: rgba(63,185,80,.55); color: #3fb950; }
.remind-list { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.remind-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 12px; cursor: pointer; color: var(--txt); transition: background .15s; }
.remind-item:hover { background: var(--card); }
.remind-item:active { transform: scale(.99); }
.remind-item.on { border-color: rgba(63,185,80,.5); background: rgba(63,185,80,.08); }
.remind-item-ic { font-size: 20px; flex: 0 0 auto; width: 24px; text-align: center; }
.remind-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.remind-item-t { font-size: 14px; font-weight: 700; }
.remind-item-s { font-size: 11px; color: var(--txt-dim); }
.remind-item-state { flex: 0 0 auto; font-weight: 800; color: #3fb950; font-size: 15px; }
/* Live-Chat action: small pulsing red dot to nudge people into the chat. */
.ev-act-chat { position: relative; }
.ev-act-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: evActPulse 1.6s ease-out infinite; }
@keyframes evActPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.feedback-pill { text-decoration: none; }
/* Investor-Tour password gate */
.investor-gate-ov { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.investor-gate { width: 100%; max-width: 340px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 20px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.ig-title { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.ig-sub { font-size: 13px; color: var(--txt-dim); margin-bottom: 16px; }
.ig-input { width: 100%; box-sizing: border-box; padding: 11px 13px; margin-bottom: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--txt); font-size: 15px; }
.ig-input:focus { outline: none; border-color: var(--accent); }
.ig-err { min-height: 16px; color: var(--accent); font-size: 12px; margin: 2px 0 8px; }
.ig-actions { display: flex; gap: 8px; }
.ig-btn { flex: 1; padding: 11px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); }
.ig-cancel { background: var(--card-2); color: var(--txt-dim); }
.ig-go { background: var(--accent); color: #fff; border-color: var(--accent); }
.ig-go:disabled { opacity: .6; cursor: default; }

/* ─────────────────────────────────────────────────────────────────────────
   Live Mini-Leaderboard — top 5 + me-row, sits inside event detail under
   the actions row. Auto-refreshes on SSE match_update (renderEventDetail
   re-fires).
   ───────────────────────────────────────────────────────────────────────── */
.ev-mini-lb { margin: 12px 0; padding: 12px 14px; }
.ev-mini-lb-head { display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; }
.ev-mini-lb-title { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.ev-mini-lb-live { font-size: 10px; font-weight: 800; color: var(--accent);
  letter-spacing: .06em; animation: pulse 1.6s ease-in-out infinite; }
.ev-mini-lb-list { list-style: none; padding: 0; margin: 0; display: flex;
  flex-direction: column; gap: 4px; }
.ev-mini-lb-row { display: grid; grid-template-columns: 32px 24px 1fr auto auto;
  gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px;
  cursor: pointer; transition: background .12s; }
.ev-mini-lb-row:hover { background: var(--card-2); }
.ev-mini-lb-row.is-leader { background: linear-gradient(90deg, rgba(245,197,24,.10), transparent); }
.ev-mini-lb-row.is-me { background: rgba(22,163,74,.06); border: 1px solid rgba(22,163,74,.2); }
.ev-mini-lb-rank { font-weight: 800; font-size: 12px; color: var(--txt-dim);
  font-variant-numeric: tabular-nums; }
.ev-mini-lb-row.is-leader .ev-mini-lb-rank { color: var(--gold, #f5c518); }
.ev-mini-lb-name { font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-mini-lb-you { font-size: 10px; color: var(--accent); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; }
.ev-mini-lb-acc { font-size: 11px; color: var(--txt-dim); font-variant-numeric: tabular-nums; }
.ev-mini-lb-pts { font-size: 14px; font-weight: 800;
  color: var(--accent); font-variant-numeric: tabular-nums; min-width: 50px; text-align: right; }
.ev-mini-lb-pts small { font-size: 9px; font-weight: 600; color: var(--txt-dim);
  margin-left: 2px; }
.ev-mini-lb-sep { text-align: center; color: var(--txt-dim); font-size: 14px;
  padding: 2px 0; letter-spacing: .12em; }
.ev-mini-lb-more { margin-top: 10px; width: 100%; font-size: 12px; padding: 8px; }

/* ─────────────────────────────────────────────────────────────────────────
   Event Recap — post-card summary card. "Du warst 5/7, Coup: Holloway R4 SUB"
   Replaces the empty-feeling state after a finished card with a glanceable
   personal scoreline + group context (Epir 2026-05-29).
   ───────────────────────────────────────────────────────────────────────── */
.ev-recap { margin: 10px 0 14px; padding: 14px 16px;
  background: linear-gradient(135deg, rgba(22,163,74,.05), rgba(245,197,24,.03));
  border: 1px solid rgba(22,163,74,.18); }
.recap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.recap-tag { font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--accent); text-transform: uppercase; }
.recap-share-btn { background: var(--card-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 600;
  color: var(--txt-dim); cursor: pointer; transition: background .12s; }
.recap-share-btn:hover { background: var(--card); color: var(--txt); }
.recap-mine { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; }
.recap-mine-score { font-size: 22px; font-weight: 800; color: var(--accent);
  font-variant-numeric: tabular-nums; }
.recap-mine-acc { font-size: 12px; color: var(--txt-dim);
  font-variant-numeric: tabular-nums; }
.recap-mine-pts { margin-left: auto; font-size: 16px; font-weight: 700;
  color: var(--txt); font-variant-numeric: tabular-nums; }
.recap-mine-pts small { font-size: 10px; color: var(--txt-dim); font-weight: 600; margin-left: 2px; }
.recap-coup { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px;
  padding: 8px 10px; background: rgba(245,197,24,.10); border-radius: 10px;
  border: 1px solid rgba(245,197,24,.25); }
.recap-coup-tag { font-size: 10px; font-weight: 800; letter-spacing: .04em;
  color: var(--gold, #f5c518); text-transform: uppercase; flex: none; }
.recap-coup-body { flex: 1; min-width: 0; font-size: 12px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.recap-coup-conf { color: var(--gold, #f5c518); font-weight: 700; }
.recap-coup-pts { font-size: 14px; font-weight: 800; color: var(--gold, #f5c518);
  font-variant-numeric: tabular-nums; flex: none; }
.recap-friends { display: flex; align-items: center; gap: 6px; margin-top: 10px;
  flex-wrap: wrap; }
/* Legibility bump (Epir 2026-05-31): bigger text, lighter pill so the chips pop
   off the dark recap card, brighter score. */
.recap-friend-pill { display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px 5px 5px; background: rgba(255,255,255,.08); border: 1px solid var(--line);
  border-radius: 999px; font-size: 12.5px; cursor: pointer; transition: background .12s; }
.recap-friend-pill:hover { background: rgba(255,255,255,.15); }
.recap-friend-name { font-weight: 700; color: var(--txt); }
.recap-friend-score { color: #cfcfd8; font-variant-numeric: tabular-nums; font-weight: 800; }
.recap-friend-more { font-size: 12px; color: var(--txt); font-weight: 700; padding: 4px 8px; }

/* ============================================================ */
/* GROUPS TAB v2 — restructured for clarity:
   Promo → My Groups → Quick Actions → Find → Creator */
.group-row-v2 { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  width: 100%; text-align: left; cursor: pointer; transition: background .15s, transform .1s;
  font: inherit; color: inherit; border: 1px solid var(--line); }
.group-row-v2:hover { background: var(--card-2); }
.group-row-v2:active { transform: scale(.99); }
.grp-row-main { flex: 1; min-width: 0; }
.grp-row-name { font-weight: 700; font-size: 14px; color: var(--txt); line-height: 1.3; }
.grp-verified { color: var(--blue); font-size: 12px; margin-left: 2px; }
.grp-row-meta { font-size: 11px; color: var(--txt-dim); margin-top: 3px; line-height: 1.3; }
.grp-row-rank { text-align: center; min-width: 50px; }
.grp-row-rank-num { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--accent); line-height: 1; }
.grp-row-rank-label { font-size: 9px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }
.grp-link-btn { width: 32px; height: 32px; border-radius: 8px; background: var(--card-2);
  border: 1px solid var(--line); cursor: pointer; font-size: 14px; flex-shrink: 0; }

/* Quick-actions row (Create + Join side-by-side).
   Grid + align-items:stretch + button margin-top:auto keeps both cards the
   same height and aligns the Create + Join buttons to the bottom edge — the
   Create card has an extra "Private" checkbox that used to push it taller
   than the Join card (Epir feedback 2026-05-29 "create group und join sind
   nicht eben"). */
.grp-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin: 14px 0; align-items: stretch; }
@media (max-width: 420px) { .grp-quick-row { grid-template-columns: 1fr; } }
.grp-quick-card { display: flex; flex-direction: column; gap: 8px; padding: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  height: 100%; }
.grp-quick-icon { font-size: 18px; color: var(--accent); font-weight: 700; }
.grp-quick-input { padding: 8px 10px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 12px; color: var(--txt); width: 100%; }
.grp-quick-priv { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--txt-dim); cursor: pointer; }
.grp-quick-priv input { margin: 0; }
.grp-quick-btn { padding: 8px 12px; background: var(--accent); color: #fff; border: none; border-radius: 8px;
  font-weight: 700; font-size: 12px; cursor: pointer; transition: background .15s;
  margin-top: auto; }
.grp-quick-btn:hover { background: #c91c1c; }
.grp-quick-btn-ghost { background: var(--card-2); color: var(--txt); border: 1px solid var(--line); }
.grp-quick-btn-ghost:hover { background: var(--card); }

/* Find-friends card compact variant */
.find-card-compact { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  margin-top: 6px; }
.find-card-compact .find-card-text { flex: 1; min-width: 0; }
.find-card-chev { color: var(--txt-dim); font-size: 20px; line-height: 1; padding-left: 4px; }

/* Skeleton tweaks for groups-tab loading state */
.promo-skel { background: linear-gradient(110deg, var(--card-2) 8%, var(--card) 18%, var(--card-2) 33%);
  background-size: 200% 100%; }

/* Member-event-picks drilldown modal (tap a member in Letztes Event) */
.mep-modal { max-width: 520px; }
.mep-head-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mep-name { font-weight: 700; font-size: 15px; color: var(--txt); }
.mep-sub { font-size: 12px; margin-top: 2px; }
.mep-totals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 14px;
  background: var(--card-2); border-bottom: 1px solid var(--line); }
.mep-stat { text-align: center; padding: 6px 4px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.mep-stat .mep-v { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--txt); line-height: 1.1; }
.mep-stat .mep-v.accent { color: var(--accent); }
.mep-stat .mep-v.blue { color: var(--blue); }
.mep-stat .mep-l { font-size: 10px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .04em; margin-top: 3px; }
.mep-list-wrap { padding: 8px 0 !important; max-height: 60vh; overflow-y: auto; }
.mep-list { display: flex; flex-direction: column; gap: 6px; padding: 0 12px; }
.mep-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.mep-row.mep-ok { background: rgba(34,197,94,.06); border-left: 3px solid rgb(34,165,74); }
.mep-row.mep-miss { background: var(--card-2); border-left: 3px solid var(--txt-dim); opacity: .8; }
.mep-row.mep-open { border-left: 3px solid var(--line); }
.mep-row.mep-skip { background: var(--card); opacity: .6; }
.mep-no { width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 1px solid var(--line);
  font-size: 11px; font-weight: 700; color: var(--txt-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mep-body { flex: 1; min-width: 0; }
.mep-teams { font-weight: 600; font-size: 13px; color: var(--txt); line-height: 1.3; }
.mep-vs { color: var(--txt-dim); font-weight: 400; font-size: 11px; margin: 0 2px; }
.mep-pick-line { font-size: 12px; margin-top: 4px; line-height: 1.3; color: var(--txt); }
.mep-pick-line.mep-red { color: var(--accent); }
.mep-pick-line.mep-blue { color: var(--blue); }
.mep-arrow { color: var(--txt-dim); font-weight: 700; margin-right: 2px; }
.mep-meta { color: var(--txt-dim); font-size: 11px; }
.mep-result { font-size: 11px; color: var(--txt-dim); margin-top: 3px; }
.mep-tba { color: var(--txt-dim); font-style: italic; }
.mep-no-pick { font-size: 11px; color: var(--txt-dim); font-style: italic; margin-top: 3px; }
.mep-pts { font-family: var(--font-head); font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); color: var(--txt-dim); flex-shrink: 0; min-width: 38px; text-align: center; }
.mep-pts.mep-ok { background: rgba(34,197,94,.18); color: rgb(34,165,74); border-color: rgba(34,197,94,.4); }
.mep-pts.mep-miss { background: var(--card); color: var(--txt-dim); }
.mep-pts.mep-skip-pts { background: var(--card); color: var(--txt-dim); border-style: dashed; }
.mep-row.mep-main { border-left-width: 4px; }
.mep-main-flag { font-size: 9px; color: var(--gold); line-height: 1; margin-top: 2px; }
.mep-expand-btn { width: 100%; padding: 11px; margin-top: 6px;
  background: var(--card-2); border: 1px dashed var(--line); border-radius: 10px;
  font-size: 12px; font-weight: 600; color: var(--txt-dim); cursor: pointer;
  transition: background .15s, color .15s; }
.mep-expand-btn:hover { background: var(--card); color: var(--txt); }
/* Comparison row: "Dein Tipp" line stacks below the target's pick. */
.mep-pick-label { color: var(--txt-dim); font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.mep-no-pick-line { color: var(--txt-dim); font-style: italic; }
.mep-ok-mark { color: rgb(34,165,74); font-weight: 700; margin-left: 4px; }
.mep-miss-mark { color: var(--accent); font-weight: 700; margin-left: 4px; }
/* Blurred state: match not yet locked, pick exists but hidden. */
.mep-pick-line.mep-blurred { color: var(--txt-dim); }
.mep-blurred-text { font-style: italic; }
/* "Vollständiges Profil →" — bottom escape-hatch link inside the modal. */
.mep-profile-link { width: calc(100% - 24px); margin: 12px 12px 4px; padding: 11px 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  color: var(--txt); font-weight: 600; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s; }
.mep-profile-link:hover { background: var(--card); border-color: var(--accent); }


/* Global error boundary — replaces the old "Fehler: foo" one-liner */
.err-boundary { display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 28px 18px; margin: 22px auto; max-width: 360px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.err-boundary-icon { font-size: 40px; line-height: 1; }
.err-boundary-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--txt); }
.err-boundary-sub { font-size: 13px; color: var(--txt-dim); line-height: 1.5; }
.err-boundary-details { width: 100%; text-align: left; font-size: 11px; color: var(--txt-dim); }
.err-boundary-details summary { cursor: pointer; padding: 6px 0; }
.err-boundary-pre { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px; font-family: ui-monospace, monospace; font-size: 10px; color: var(--accent);
  white-space: pre-wrap; word-break: break-word; max-height: 120px; overflow-y: auto; }
.err-boundary-actions { display: flex; gap: 8px; width: 100%; }
.err-boundary-actions .btn { flex: 1; }

/* Post-Event Highlight Card — Sonntags-Recap hero in groups */
.post-event-highlight { position: relative; padding: 18px 16px 16px;
  background: linear-gradient(135deg, rgba(232,185,35,.10), rgba(22,163,74,.08));
  border: 1px solid rgba(232,185,35,.3); border-radius: 16px;
  margin: 14px 0; }
.peh-trophy { position: absolute; top: -16px; left: 16px; font-size: 32px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2)); }
.peh-head { padding-left: 44px; margin-bottom: 12px; }
.peh-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold); text-transform: uppercase; }
.peh-event { font-weight: 700; font-size: 14px; color: var(--txt); margin-top: 2px; line-height: 1.3; }
.peh-winner { display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.peh-winner-info { flex: 1; min-width: 0; }
.peh-winner-name { font-weight: 700; font-size: 14px; color: var(--txt); }
.peh-winner-meta { font-size: 11px; color: var(--txt-dim); margin-top: 2px; }
.peh-winner-badge { padding: 4px 9px; border-radius: 999px;
  background: var(--gold); color: #2a1d00; font-weight: 800; font-size: 10px; letter-spacing: .08em; }
.peh-me { display: flex; align-items: center; gap: 8px; padding: 6px 10px; margin-top: 8px;
  background: rgba(29,111,224,.08); border: 1px solid rgba(29,111,224,.25); border-radius: 8px; }
.peh-me-rank { font-family: var(--font-head); font-weight: 800; color: var(--blue); font-size: 14px; }
.peh-me-text { font-size: 12px; color: var(--txt); }
.peh-cta { display: block; width: 100%; padding: 10px; margin-top: 10px;
  background: var(--accent); color: #fff; border: none; border-radius: 10px;
  font-weight: 700; font-size: 13px; cursor: pointer; transition: background .15s; }
.peh-cta:hover { background: #c91c1c; }

/* First-pick celebration: confetti + welcome modal */
.confetti-burst { position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
  pointer-events: none; z-index: 99998; overflow: hidden; }
.confetti-piece { position: absolute; top: -10px; width: 8px; height: 14px;
  border-radius: 2px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall {
  0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.first-pick-modal { max-width: 380px; text-align: center; padding: 28px 22px 22px; }
.first-pick-trophy { font-size: 56px; animation: trophy-bounce .6s ease-out; }
@keyframes trophy-bounce {
  0% { transform: scale(.4) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.first-pick-title { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--txt);
  margin: 10px 0 6px; }
.first-pick-sub { color: var(--txt-dim); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.first-pick-rules { list-style: none; padding: 0; margin: 0 0 14px; text-align: left; }
.first-pick-rules li { padding: 8px 12px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 8px; font-size: 13px; color: var(--txt); margin-bottom: 6px; }
.first-pick-rules li b { color: var(--accent); margin-right: 6px; font-weight: 800; }
.first-pick-tip { font-size: 12px; color: var(--txt-dim); margin: 0 0 14px; line-height: 1.5; }
.first-pick-cta { width: 100%; padding: 12px; }
/* Event-complete celebration (v333) — confetti reuses .confetti-* above. */
.evc-modal { max-width: 360px; text-align: center; padding: 26px 22px 20px; }
.evc-trophy { font-size: 52px; line-height: 1; margin-bottom: 6px; animation: evc-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.evc-title { margin: 4px 0 10px; font-weight: 800; }
.evc-coins { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 20px;
  color: var(--accent); background: rgba(22,163,74,.12); border: 1px solid rgba(22,163,74,.4);
  border-radius: 999px; padding: 6px 16px; margin-bottom: 18px; }
.evc-coin { display: inline-block; animation: evc-coin-pop .6s cubic-bezier(.2,1.5,.4,1) both; }
.evc-watch-q { font-weight: 700; margin-bottom: 12px; }
.evc-watch-btns { display: flex; gap: 10px; }
.evc-watch-btns .btn { flex: 1; padding: 12px; margin-top: 0; }
@keyframes evc-pop { from { transform: scale(0) rotate(-15deg); opacity: 0; } to { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes evc-coin-pop { 0% { transform: translateY(8px) scale(.4); opacity: 0; } 60% { transform: translateY(-4px) scale(1.25); } 100% { transform: translateY(0) scale(1); opacity: 1; } }
/* Coins chip on the Spotlight title row (coins moved off the profile head). */
.evt-coins-chip { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 800; color: var(--accent); background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.35); border-radius: 999px; padding: 3px 9px; }

/* Pull-to-Refresh indicator — mobile only (touch-coarse devices).
   Positioned floating at the top-center of the viewport; transformed
   down + scaled with pull distance in JS. The .armed state flips
   the spinner color to signal that releasing now will trigger the refresh.
   .loading spins indefinitely until the render completes. */
.ptr-indicator { position: fixed; top: -36px; left: 50%; transform: translateX(-50%);
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line);
  display: none; align-items: center; justify-content: center;
  z-index: 99997; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.ptr-indicator.visible { display: flex; }
.ptr-spinner { width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--txt-dim); }
.ptr-indicator.armed .ptr-spinner { border-top-color: var(--accent); }
.ptr-indicator.loading .ptr-spinner { animation: ptr-spin .9s linear infinite;
  border-top-color: var(--accent); }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* Trending widget — surfaces biggest rank movers since last snapshot */
.trending-widget { margin: 0 0 12px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.trending-label { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 6px; }
.trending-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.trend-chip { font-size: 11px; padding: 4px 9px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--txt); }
.trend-chip.trend-up { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.35); color: rgb(34,165,74); }
.trend-chip.trend-down { background: rgba(239,68,68,.06); border-color: rgba(239,68,68,.25); color: #ef4444; opacity: .8; }
.trend-chip b { font-weight: 700; }

/* Onboarding v2 — scoring rules slide */
.onb-rules { list-style: none; padding: 0; margin: 12px 0 0; text-align: left; }
.onb-rules li { padding: 8px 12px; margin-bottom: 6px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 8px; font-size: 13px; color: var(--txt); }
.onb-rules li b { color: var(--accent); margin-right: 6px; font-weight: 800; }
.grp-last-details > summary { cursor: pointer; font-size: 12px; color: var(--txt-dim); padding: 6px 0; }
.grp-last-details > summary:hover { color: var(--txt); }
.grp-last-matches { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.grp-last-match { background: var(--card-2); border-radius: 8px; padding: 8px 10px; }
.grp-last-match-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--txt); }
.grp-last-winner { color: var(--accent); font-weight: 700; font-size: 11px; }
.grp-last-power { background: var(--gold); color: #1a1a1a; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: .05em; }
.grp-last-match-picks { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.grp-pick { display: flex; align-items: center; gap: 8px; font-size: 11px; padding: 2px 0; }
.grp-pick-name { flex: 0 0 80px; color: var(--txt-dim); }
.grp-pick-side { flex: 1; color: var(--txt); }
.grp-pick-side.red { color: var(--accent); }
.grp-pick-side.blue { color: var(--blue); }
.grp-pick-side.none { color: var(--txt-dim); font-style: italic; }
.grp-pick-pts { font-family: var(--font-head); font-weight: 700; min-width: 28px; text-align: right; }
.grp-pick.ok .grp-pick-pts { color: #15803d; }
.grp-pick.miss .grp-pick-pts { color: var(--accent); }
.grp-pick.open .grp-pick-pts { color: var(--txt-dim); }

/* "Freunde finden" card in Groups */
.find-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; width: 100%;
  text-align: left; border: 1px solid var(--line); background: var(--card); margin-top: 10px; cursor: pointer; }
.find-card:hover { border-color: var(--accent); }
.find-card-ic { font-size: 24px; line-height: 1; }
.find-card-text { flex: 1; }
.find-card-title { font-weight: 700; color: var(--txt); font-size: 14px; }
.find-card-sub { color: var(--txt-dim); font-size: 12px; margin-top: 2px; }

/* user search modal */
.us-modal { background: var(--card); border: 1px solid var(--line); border-radius: 16px; max-width: 460px;
  width: 100%; max-height: 80svh; display: flex; flex-direction: column; overflow: hidden; }
.us-body { padding: 14px 16px; overflow-y: auto; }
.us-input { width: 100%; padding: 10px 14px; font-size: 14px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card-2); color: var(--txt); margin-bottom: 12px; }
.us-input:focus { outline: none; border-color: var(--accent); }
.us-results { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.us-hint { color: var(--txt-dim); font-size: 12px; padding: 12px; text-align: center; }
.us-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
  cursor: pointer; transition: background .15s; }
.us-row:hover { background: var(--card-2); }
.us-row-text { flex: 1; min-width: 0; }
.us-row-name { font-weight: 600; color: var(--txt); font-size: 14px; }
.us-row-uname { color: var(--txt-dim); font-size: 12px; }
/* search results: league section (Epir 2026-06-01) — reuses .ig-meta / .ig-tag.member */
.us-sec-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--txt-dim); padding: 10px 10px 2px; }
.us-sec-label:first-child { padding-top: 2px; }
.us-grp-row { gap: 12px; }
.us-grp-ic { width: 34px; height: 34px; flex: 0 0 auto; display: flex; align-items: center;
  justify-content: center; font-size: 18px; border-radius: 10px; background: var(--card-2); }
.us-grp-ver { color: var(--green); font-weight: 800; font-size: 12px; }
.grp-join-cta { width: 100%; margin: 10px 0 4px; }
/* profile field-edit modal (username / display name) — Epir 2026-06-01 */
.pe-field { display: flex; align-items: center; gap: 6px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; }
.pe-field:focus-within { border-color: var(--accent); }
.pe-at { color: var(--txt-dim); font-weight: 700; font-size: 15px; }
.pe-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--txt); font-size: 15px; }
.pe-status { font-size: 12px; margin: 8px 2px 12px; min-height: 16px; }
.pe-status.pe-good { color: var(--green); }
.pe-status.pe-bad { color: #ef4444; }
.pe-save { width: 100%; }
/* confirm dialog (replaces window.confirm) — Epir 2026-06-01 */
.modal-confirm { max-width: 360px; }
.cf-msg { font-size: 15px; line-height: 1.45; color: var(--txt); margin: 4px 2px 16px; }
.cf-actions { display: flex; gap: 10px; }
.cf-actions .btn { flex: 1; }
.cf-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.cf-danger:hover { background: #dc2626; border-color: #dc2626; }
/* theme segmented control (Light / Dark / System) */
.theme-seg { display: flex; gap: 4px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 13px; padding: 4px; margin: 6px 0 8px; }
.theme-seg-btn { flex: 1; padding: 9px 6px; border: 0; border-radius: 10px; background: transparent;
  color: var(--txt-dim); font-size: 13px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out); }
.theme-seg-btn.active { background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
/* favorite star on a team corner */
.fav-tag { color: #f5c518; font-size: 12px; font-weight: 800; margin-left: 3px; }
/* pick progress + unified tap-to-pick (Epir 2026-06-01) */
.pick-progress { background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; margin: 8px 0 12px; }
.pick-progress.done { border-color: var(--green); }
.pp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.pp-label { font-weight: 700; font-size: 13px; color: var(--txt); }
.pp-next { background: transparent; border: 0; color: var(--accent); font-weight: 700; font-size: 13px;
  cursor: pointer; padding: 2px 4px; white-space: nowrap; }
.pp-bar { height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; }
.pp-fill { height: 100%; border-radius: 99px; background: var(--accent); transition: width .3s; }
.pick-progress.done .pp-fill { background: var(--green); }
/* slim tap-to-pick hint (replaces the big per-match "Make pick" button) */
.pick-hint { display: block; width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed var(--line);
  border-radius: 10px; background: transparent; color: var(--txt-dim); font-size: 13px; font-weight: 600;
  cursor: pointer; text-align: center; transition: border-color .15s, color .15s; }
.pick-hint:hover { border-color: var(--accent); color: var(--txt); }
.pick-hint.picked { border-style: solid; opacity: .85; }
/* tappable team corners read as interactive */
.match-pickable .corner { cursor: pointer; }
.match-pickable .corner:hover { filter: brightness(1.08); }
/* group-detail skeleton + collapsed create/join (Epir 2026-06-01) */
.skel-card { margin-bottom: 12px; }
.skel-line { height: 12px; border-radius: 6px; margin: 8px 0;
  background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.3s ease infinite; }
.skel-line.w40 { width: 40%; } .skel-line.w50 { width: 50%; }
.skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-podium { display: flex; gap: 10px; margin-top: 12px; }
.skel-podium span { flex: 1; height: 90px; border-radius: 12px;
  background: linear-gradient(90deg, var(--card-2) 25%, var(--line) 37%, var(--card-2) 63%);
  background-size: 400% 100%; animation: skel-shimmer 1.3s ease infinite; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.grp-quick-details { margin: 8px 0 4px; }
.grp-quick-summary { cursor: pointer; list-style: none; color: var(--txt-dim); font-weight: 700;
  font-size: 13px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.grp-quick-summary::-webkit-details-marker { display: none; }
.grp-quick-details[open] .grp-quick-summary { margin-bottom: 8px; border-style: solid; }
/* MY GROUPS header with inline "＋" create/join toggle (Epir 2026-06-01) */
.mg-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mg-add-btn { width: 28px; height: 28px; flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2);
  color: var(--txt); font-size: 18px; line-height: 1; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, transform .2s; }
.mg-add-btn:hover { border-color: var(--accent); }
.mg-add-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); transform: rotate(45deg); }
.mg-add-panel { margin: 8px 0 4px; }
.mg-add-panel[hidden] { display: none; }

/* user mini profile modal */
.ump-modal { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  max-width: 320px; width: 100%; padding: 28px 22px 22px; text-align: center; }
.ump-close { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--txt-dim); font-size: 16px; cursor: pointer; padding: 6px; }
.ump-head .ava-lg { margin: 0 auto 10px; }
.ump-name { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: 20px; color: var(--txt); }
.ump-uname { color: var(--txt-dim); font-size: 13px; margin-bottom: 16px; }
.ump-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.ump-stat { background: var(--card-2); border-radius: 10px; padding: 10px 4px; }
.ump-stat .v { font-family: var(--font-brand); font-weight: 700; font-size: 18px; color: var(--txt); }
.ump-stat .l { font-size: 11px; color: var(--txt-dim); margin-top: 2px; }
.ump-cta { display: flex; gap: 8px; }
.ump-cta .btn { flex: 1; }

/* reusable empty-state — icon, headline, sub, optional CTA */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 36px 20px; margin: 16px 0; }
.es-icon { font-size: 44px; line-height: 1; margin-bottom: 12px; opacity: .9; }
.es-title { font-weight: 700; color: var(--txt); font-size: 16px; margin-bottom: 6px; }
.es-sub { color: var(--txt-dim); font-size: 13px; max-width: 260px; line-height: 1.5; margin-bottom: 16px; }
.es-btn { width: auto; min-width: 180px; padding: 10px 22px; font-size: 13px; }
.es-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.es-actions .es-btn, .es-actions .btn { min-width: 0; }

/* team profile modal — opened by tapping the ⓘ icon next to a team name */
.cn-info { display: inline-block; margin-left: 6px; background: none; border: none; padding: 0 4px;
  color: var(--txt-dim); font-size: 13px; line-height: 1; cursor: pointer; vertical-align: middle; opacity: .7; }
.cn-info:hover, .cn-info:active { color: var(--txt); opacity: 1; }
.fpx-modal { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  max-width: 360px; width: 100%; padding: 28px 24px 22px; text-align: center; overflow: hidden; }
.fpx-modal.fp-red::before, .fpx-modal.fp-blue::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: var(--accent); }
.fpx-modal.fp-blue::before { background: var(--blue); }
.fpx-close { position: absolute; top: 12px; right: 14px; background: none; border: none;
  color: var(--txt-dim); font-size: 16px; cursor: pointer; padding: 6px; line-height: 1; }
.fpx-close:hover { color: var(--txt); }
.fpx-photo-wrap { position: relative; width: 140px; height: 140px; margin: 6px auto 16px;
  border-radius: 50%; overflow: hidden; background: var(--card-2); border: 3px solid var(--line); }
.fpx-modal.fp-red .fpx-photo-wrap { border-color: var(--accent); }
.fpx-modal.fp-blue .fpx-photo-wrap { border-color: var(--blue); }
.fpx-photo { width: 100%; height: 100%; object-fit: cover; }
.fpx-photo-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-weight: 700; font-size: 38px; color: var(--txt-dim); }
.fpx-flag { position: absolute; bottom: 4px; right: 4px; width: 32px; height: 22px; object-fit: cover;
  border-radius: 4px; border: 2px solid var(--card); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.fpx-name { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: 22px;
  color: var(--txt); margin-bottom: 8px; letter-spacing: .5px; }
.fpx-meta { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.fpx-rec { font-family: var(--font-brand); font-weight: 700; color: var(--accent); font-size: 16px; letter-spacing: .5px; }
.fpx-wc { color: var(--txt-dim); font-size: 13px; padding: 2px 8px; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 8px; }
.fpx-vs { background: var(--card-2); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.fpx-vs-label { font-size: 10px; letter-spacing: .1em; color: var(--txt-dim); text-transform: uppercase; }
.fpx-vs-line { font-size: 15px; color: var(--txt); margin-top: 4px; }
.fpx-event { font-size: 12px; color: var(--txt-dim); margin-top: 4px; }
.fpx-soon { font-size: 11px; color: var(--txt-dim); opacity: .7; }

/* mini onboarding tour — v3, 6 slides, first login only */
.onb-modal { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; max-width: 360px; width: 100%; padding: 32px 24px 24px; text-align: center; }
.onb-skip { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--txt-dim); font-size: 12px; cursor: pointer; padding: 6px; }
.onb-skip:hover { color: var(--txt); }
.onb-slide { padding: 12px 4px 22px; min-height: 180px; }
.onb-ic { font-size: 56px; line-height: 1; margin-bottom: 16px; }
.onb-t { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: 22px; color: var(--txt); margin-bottom: 10px; letter-spacing: .5px; }
.onb-b { color: var(--txt-dim); font-size: 14px; line-height: 1.5; max-width: 280px; margin: 0 auto; }
.onb-dots { display: flex; justify-content: center; gap: 7px; margin: 4px 0 18px; }
.onb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background .2s, width .2s; }
.onb-dot.on { background: var(--accent); width: 22px; border-radius: 4px; }
.onb-next { width: 100%; }
.onb-next-locked, .onb-next:disabled { opacity: .45; cursor: not-allowed; }

/* Demo-pick slide — fake match card. Result NEVER persisted. */
.onb-demo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; margin: 14px 0 6px; }
.onb-demo-side { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; padding: 14px 6px; background: var(--card-2); border: 2px solid var(--line);
  border-radius: 12px; cursor: pointer; color: var(--txt); font-family: var(--font-brand);
  font-style: italic; transition: border-color .15s, transform .1s, background .15s; }
.onb-demo-side:hover { transform: translateY(-1px); }
.onb-demo-red:hover, .onb-demo-red.sel { border-color: #ef4444; background: rgba(239,68,68,.08); }
.onb-demo-blue:hover, .onb-demo-blue.sel { border-color: var(--blue, #2563eb); background: rgba(37,99,235,0.08); }
.onb-demo-name { font-weight: 700; font-size: 14px; letter-spacing: .3px; }
.onb-demo-rec { font-size: 11px; color: var(--txt-dim); font-style: normal; font-weight: 600; }
.onb-demo-vs { font-family: var(--font-brand); font-weight: 800; color: var(--txt-dim);
  font-size: 13px; padding: 0 2px; }
.onb-demo-msg { min-height: 18px; margin-top: 10px; font-size: 12px; color: var(--txt-dim);
  opacity: 0; transition: opacity .25s; }
.onb-demo-msg.on { opacity: 1; color: #15803d; font-weight: 700; }

/* Animated pulsing arrow that highlights the bottom-nav ⚡ FAB.
   Positioned via inline left/top (set in JS). */
.onb-fab-arrow { position: fixed; transform: translate(-50%, -100%); z-index: 2000;
  color: var(--accent); font-size: 22px; line-height: 1; pointer-events: none;
  text-shadow: 0 0 8px rgba(22,163,74,0.55), 0 2px 4px rgba(0,0,0,.45);
  animation: onb-arrow-bounce 1s ease-in-out infinite; }
@keyframes onb-arrow-bounce {
  0%, 100% { transform: translate(-50%, -100%); opacity: .95; }
  50%      { transform: translate(-50%, -130%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .onb-fab-arrow { animation: none; }
}

/* Post-signup language chooser */
.lang-chooser-modal { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; max-width: 380px; width: 100%; padding: 28px 22px 22px; text-align: center; }
.lang-chooser-flag { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.lang-chooser-title { font-family: var(--font-brand); font-style: italic; font-weight: 700; font-size: 22px; color: var(--txt); margin: 0 0 8px; letter-spacing: .5px; }
.lang-chooser-sub { color: var(--txt-dim); font-size: 13px; line-height: 1.5; margin: 0 0 22px; max-width: 280px; margin-left: auto; margin-right: auto; }
.lang-chooser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lang-chooser-btn { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; cursor: pointer; transition: border-color .15s, transform .1s, background .15s; color: var(--txt); }
.lang-chooser-btn:hover { transform: translateY(-1px); border-color: var(--accent); }
.lang-chooser-btn.sel { border-color: var(--accent); background: rgba(22,163,74,0.06); }
.lang-chooser-flag-em { font-size: 36px; line-height: 1; }
/* Multi-flag variant — English (US/UK/England) + Shqip (AL/XK): shrink the
   emoji to fit 3 (or 2) glyphs on one row without breaking, keep the visual
   weight comparable to single-flag buttons. */
.lang-chooser-flag-em.lang-multi { font-size: 22px; letter-spacing: 1px; white-space: nowrap; }
.lang-chooser-name { font-size: 14px; font-weight: 600; letter-spacing: .3px; }

/* Team avatar picker */
.fpick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fpick { aspect-ratio: 1/1; border-radius: 50%; cursor: pointer; padding: 0;
  background: #fff;
  border: 3px solid transparent; transition: border-color .15s, transform .1s; overflow: hidden; }
.fpick:hover { transform: scale(1.05); }
.fpick.selected { border-color: var(--accent); transform: scale(1.05); }
.fpick svg, .fpick img { width: 100%; height: 100%; display: block; object-fit: cover; }
@container app (max-width:380px) { .fpick-grid { grid-template-columns: repeat(4, 1fr); } }

/* Profile setup modal */
.ps-label { color: var(--txt); font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.ps-input { margin-top: 0 !important; }
.ps-gender { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.ps-gender .seg-btn { padding: 9px 6px; font-size: 12px; }
.ps-gender .seg-btn.sel { background: var(--accent); color: #fff; border-color: var(--accent); }

/* DOB three-select row */
.dob-row { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 6px; }
.dob-sel { width: 100%; padding: 11px 10px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); font-size: 14px; outline: none; appearance: none;
  -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%239aa' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
.dob-sel:focus { border-color: var(--blue); }

/* "oder Avatar wählen" divider */
.ps-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--txt-dim); font-size: 12px; }
.ps-or::before, .ps-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Skeleton loading placeholders — Apple-style shimmer.
   Two-layer approach: a baseline tint (the "card body" colour) + a narrow
   high-contrast highlight band that sweeps left-to-right. The band uses a
   tighter gradient peak (30% wide instead of 50%) so it reads as motion,
   not as the whole element pulsing. Animation is `ease-in-out` so the
   highlight feels weighted at the edges and faster through the middle —
   that's what makes Apple's loaders feel "alive" instead of mechanical.
   border-radius matches the design-token scale so skeletons line up with
   the cards/rows they're standing in for. */
.skeleton {
  background-color: var(--card-2);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.06) 35%,
    rgba(0,0,0,.12) 50%,
    rgba(0,0,0,.06) 65%,
    transparent 100%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 200% 0;
  animation: skel-shimmer 1.4s cubic-bezier(.45,.05,.55,.95) infinite;
  border-radius: var(--r-sm, 8px);
}
html:not(.light) .skeleton {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.04) 35%,
    rgba(255,255,255,.12) 50%,
    rgba(255,255,255,.04) 65%,
    transparent 100%
  );
}
@keyframes skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -120% 0; }
}
/* Pause shimmer when the element scrolls offscreen — saves repaints during
   long lists. `content-visibility: auto` opts that element out of rendering
   when out of view; browsers without support just keep painting. */
@media (prefers-reduced-motion: no-preference) {
  .skeleton { content-visibility: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}
.skel-line { height: 12px; margin: 8px 0; }
.skel-stat { height: 64px; }
.del-title { font-weight: 700; font-size: 13px; color: var(--txt); margin: 14px 0 4px; }
.del-reason { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13px; color: var(--txt); cursor: pointer; }
.del-reason input { accent-color: var(--accent); }
.del-btn { background: var(--accent); }
.event-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.event-card::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--blue), #60a5fa); }
.ev-thumbs { display: flex; flex: none; }
.ev-thumbs .ava { margin: 0; }
.ev-thumbs .ava:last-child { margin-left: -12px; border-radius: 50%; }
.event-card .event-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Home hero (featured event) */
.home-hero { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  min-height: 270px; margin-bottom: 14px; cursor: pointer; }
.hh-photos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.hh-photo { position: relative; overflow: hidden; }
.hh-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hh-photo.red { background: radial-gradient(110% 100% at 0 0, rgba(239,68,68,.26), #121217); }
.hh-photo.blue { background: radial-gradient(110% 100% at 100% 0, rgba(59,130,246,.28), #121217); }
.hh-grad { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.2) 0, transparent 28%, rgba(10,10,12,.94) 86%); }
.hh-top { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; }
.hh-badge { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  padding: 4px 9px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.hh-badge.live { background: #ef4444; border-color: #ef4444; }
.hh-badge.ppv { background: var(--accent-2); border-color: var(--accent-2); color: #1a1a1a; }
/* In-flow (not absolute-bottom) so the hero GROWS with its content. Was
   position:absolute;bottom:0 inside a fixed 270px overflow:hidden card — when a
   long event name wrapped to 2 lines on mobile, the body grew upward past the
   top edge and the title's first line got clipped (Epir 2026-05-30, mobile).
   padding-top reserves the team-photo band above the text. */
.hh-body { position: relative; padding: 120px 16px 16px; }
.hh-event { font-family: var(--font-brand); font-style: italic; text-transform: uppercase; font-weight: 700;
  font-size: 23px; line-height: 1.05; color: #fff; }
.hh-matchup { font-size: 13px; color: #e8e8ee; margin-top: 4px; font-weight: 600; }
.hh-matchup span { color: var(--accent); }
.hh-meta { font-size: 11px; color: rgba(255,255,255,.72); margin: 3px 0 2px; }
.hh-watch { font-size: 11px; color: #e8e8ee; font-weight: 600; margin: 0 0 12px; }
.hh-watch-cta { display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 5px 12px; text-decoration: none;
  color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  margin: 4px 0 10px; transition: background .15s, transform .12s; }
.hh-watch-cta:hover { background: rgba(255,255,255,.14); }
.hh-watch-cta:active { transform: scale(.97); }
/* dark outline so white hero text stays readable over bright photo areas (both themes) */
.hh-event, .hh-matchup, .hh-meta, .hh-watch { text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 0 2px rgba(0,0,0,.6); }
.hh-cta { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

/* Profile head */
.set-title { font-weight: 700; font-size: 14px; margin: 0 0 8px; }
.profile-head { position: relative; display: flex; flex-direction: row; align-items: center; text-align: left; gap: 14px; padding: 14px 16px; }
.ph-settings-btn { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); color: var(--txt-dim); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s, color .15s; }
.ph-settings-btn:hover, .ph-settings-btn:active { background: var(--line); color: var(--txt); }
.profile-name-row { display: flex; align-items: center; gap: 6px; }
.profile-name-edit { background: none; border: none; padding: 2px 6px; font-size: 13px; cursor: pointer; opacity: .55; }
.profile-name-edit:hover { opacity: 1; }
/* Quick day/night toggle in the profile head (Epir 2026-06-03) — right-aligned,
   moved out of the topbar. */
.profile-theme-toggle { margin-left: auto; flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  border-radius: 50%; background: var(--card-2); border: 1px solid var(--line); cursor: pointer;
  color: var(--txt-dim); /* v383: pin currentColor so the sun/moon SVG is neutral-grey, not the UA button blue */
  font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.profile-theme-toggle:hover, .profile-theme-toggle:active { background: var(--line); }
.profile-username-row { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.profile-username { font-size: 13px; color: var(--txt-dim); font-weight: 500; letter-spacing: .2px; }
.profile-username-edit { background: none; border: none; padding: 2px 4px; font-size: 11px; cursor: pointer; opacity: .55; color: inherit; }
.profile-username-edit:hover { opacity: 1; }
.profile-share-btn { background: var(--card-2); border: 1px solid var(--line); color: var(--txt); padding: 3px 10px; font-size: 11px; border-radius: 999px; cursor: pointer; font-weight: 600; }
.profile-share-btn:hover, .profile-share-btn:active { background: var(--line); }
.avatar-nudge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; margin-top: 10px;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.02)); border: 1px solid rgba(22,163,74,.25); }
.avatar-nudge span { flex: 1; font-size: 13px; line-height: 1.4; color: var(--txt); }
/* width:auto overrides the base .btn{width:100%} — without it the button forces
   full width and squeezes the nudge text into a one-word-per-line column. */
.avatar-nudge .btn { flex: 0 0 auto; width: auto; white-space: nowrap; padding: 7px 14px; font-size: 12px; }
/* Refer-a-Friend card on the profile tab */
.referral-card { margin-top: 10px; display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(135deg, rgba(56,182,255,.07), rgba(22,163,74,.05));
  border: 1px solid rgba(56,182,255,.22); }
.referral-card .set-title { font-weight: 700; }
.referral-code-row { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.referral-code-row strong { font-size: 15px; }
.referral-count { font-size: 13px; }
.referral-badge { font-weight: 700; font-size: 14px; }
/* Coins reward hint — replaced the tier/'X until Recruiter' progress bar (Epir 2026-06-03). */
.referral-coins-hint { font-size: 12.5px; font-weight: 600; color: var(--accent); }
.referral-progress { display: flex; flex-direction: column; gap: 4px; }
.referral-progress-label { font-size: 12px; }
.referral-cta { margin-top: 4px; align-self: flex-start; padding: 8px 16px; font-size: 13px; }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.profile-head .ava-lg { width: 58px; height: 58px; }
.profile-head .ava-lg .ava-fallback { font-size: 21px; }
.profile-head .avatar-edit { width: 22px; height: 22px; font-size: 11px; border-width: 2px; }
.ph-info { min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.profile-name { font-size: 19px; font-weight: 700; }
/* Coin balance under the Global Rank line in the profile head (Epir 2026-06-03). */
.profile-coins { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--accent); margin-top: 6px; padding: 3px 9px 3px 7px; background: rgba(22,163,74,.08); border-radius: 999px; }
.profile-head .streak-badge { margin-top: 2px; }

/* === Visual refresh (Stitch-inspired) === */
.brand, .brand-mark { font-family: var(--font-brand); font-style: italic; letter-spacing: 1px; }
.hero-title, .profile-name { font-family: var(--font-brand); font-style: italic;
  text-transform: uppercase; letter-spacing: .5px; }
.event-name { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .3px; }
.corner .cn { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .3px; font-weight: 600; }
.rank-pts, .rank-no, .stat .v { font-family: var(--font-head); }

/* Countdown boxes */
.cd-label { font-size: 10px; letter-spacing: 1.5px; color: var(--txt-dim); text-transform: uppercase;
  margin: 4px 0 6px; font-weight: 700; }
.countdown-box { display: flex; gap: 6px; }
.cd-cell { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 0; min-width: 48px; text-align: center; }
.cd-num { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--txt); line-height: 1;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* v202: cd-unit labels (TAGE / STD / MIN) were STILL too dim with opacity
 * .72 — going hard now: solid dark hex, weight 800, no opacity. Specific
 * overrides for dark variants stay below. */
.cd-unit { font-size: 10px; color: #2c2c34; letter-spacing: 1px; margin-top: 4px; font-weight: 800; }
.hero .cd-unit, .hh-countdown .cd-unit { color: rgba(255,255,255,.85); }
.cd-mini .cd-cell { min-width: 34px; padding: 4px 0; }
.cd-mini .cd-num { font-size: 15px; }
.cd-mini .cd-unit { font-size: 8px; margin-top: 2px; }

/* Community pick bar */
.community { margin-top: 12px; }
.cbar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--card-2); }
.cbar .cb-red { background: var(--accent); }
.cbar .cb-blue { background: var(--blue); }
.community-hint { font-size: 10px; color: var(--txt-dim); margin-top: 6px; text-align: center; }

/* Podium */
.podium { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.pod { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 8px 12px; text-align: center; position: relative; }
/* v205: podium borders normalised — gold was solid, silver+bronze were
 * .5 opacity so silver disappeared on light backgrounds. All three now
 * solid + heavier 2px border so the medal hierarchy reads at a glance. */
.pod { border-width: 2px; }
.pod.first { padding-top: 22px; background: linear-gradient(180deg, rgba(245,197,24,.18), var(--card));
  border-color: var(--gold); }
.pod.second { background: linear-gradient(180deg, rgba(207,210,216,.18), var(--card)); border-color: #9aa0a8; }
.pod.second .pod-rank { color: var(--silver); }
.pod.second .ava { box-shadow: 0 0 0 2px var(--silver); }
.pod.third { background: linear-gradient(180deg, rgba(205,127,50,.16), var(--card)); border-color: #c17d3c; }
.pod.third .pod-rank { color: var(--bronze); }
.pod.third .ava { box-shadow: 0 0 0 2px var(--bronze); }
.pod-crown { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); width: 56px; height: 34px; }
.pod-rank { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--txt-dim); }
.pod.first .pod-rank { color: var(--gold); }
.pod-name { font-weight: 700; font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-pts { font-family: var(--font-head); font-weight: 700; font-size: var(--text-md); color: var(--txt); margin-top: 2px; }
.pod.first .pod-pts { color: #c8900a; }   /* gold */
.pod.second .pod-pts { color: #9aa0a8; }  /* silber */
.pod.third .pod-pts { color: #c17d3c; }   /* bronze */
.pod-pts small { font-size: 10px; color: var(--txt-dim); }
.pod .ava { margin: 0 auto 6px; }
.pod.first .ava { box-shadow: 0 0 0 2px var(--gold); }

/* Quick Pick screen */
.ava-xl { width: 110px; height: 110px; margin: 0 auto 10px; }
.ava-xl .ava-fallback { font-size: 40px; }
.pick-btn { margin-top: 12px; }
.qp { }
.qp-meta { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .5px; text-align: center; }
.qp-prompt { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 1px;
  text-align: center; color: var(--txt-dim); font-size: 13px; margin: 6px 0 16px; }
.qp-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; }
/* v256: Team Stats moved into the Quick-Pick screen, directly under the
   team display (always shown). Separator + spacing so it reads as its own
   section above the method/round controls. */
.qp-fs { margin: 14px 0 6px; border-top: 1px solid var(--line); padding-top: 12px; }
.qp-fs .fs-loading { padding: 12px 0; text-align: center; }
.qp-card { position: relative; min-height: 210px; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--line); background: var(--card); cursor: pointer; transition: all .15s; }
.qpf-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 54px; font-weight: 700; color: #3a3a46;
  background: radial-gradient(120% 80% at 50% 18%, #20202a, #121217); }
.qp-card.red .qpf-fallback { background: radial-gradient(120% 80% at 50% 18%, rgba(239,68,68,.20), #121217); }
.qp-card.blue .qpf-fallback { background: radial-gradient(120% 80% at 50% 18%, rgba(59,130,246,.20), #121217); }
.qpf-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.qpf-grad { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(0,0,0,.88)); }
.qpf-corner { position: absolute; top: 10px; left: 10px; font-family: var(--font-head); font-size: 11px;
  font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; }
.qpf-corner.red { background: var(--accent); color: #fff; }
.qpf-corner.blue { background: var(--blue); color: #fff; }
.qpf-check { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.qpf-odds { position: absolute; top: 9px; right: 10px; padding: 2px 7px; border-radius: 7px;
  background: rgba(0,0,0,.55); border: 1px solid var(--line); color: var(--gold);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; backdrop-filter: blur(2px); }
.qp-card.sel .qpf-odds { right: 42px; }
.qpf-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; text-align: left; }
.qpf-rec { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--txt-dim); margin-top: 3px; }
.qpf-flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.qp-card.red.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, 0 0 20px rgba(22,163,74,.35); }
.qp-card.blue.sel { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue) inset, 0 0 20px rgba(59,130,246,.35); }
.qp-vs { align-self: center; font-family: var(--font-brand); font-weight: 700; color: var(--txt-dim); font-size: 14px; }
.qp-name { font-family: var(--font-head); text-transform: uppercase; font-weight: 600; font-size: 17px; line-height: 1.1; color: #fff; }
.qp-section { font-size: 11px; color: var(--txt-dim); text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; margin: 20px 0 8px; }
.seg { display: flex; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; }
.seg-btn { flex: 1; background: transparent; border: none; color: var(--txt-dim); border-radius: 9px;
  padding: 11px 6px; font-weight: 700; font-size: 13px; cursor: pointer; font-family: var(--font-head);
  letter-spacing: .5px; }
.seg-btn.sel { background: var(--blue); color: #fff; }
.seg-disabled { opacity: .4; pointer-events: none; }
.lock-btn { margin-top: 22px; }
.lock-btn[disabled] { opacity: .45; cursor: default; }

/* Profile stat extras */
.stat-top { display: flex; align-items: baseline; gap: 8px; }
.stat-delta { font-size: 12px; font-weight: 700; }
.stat-delta.up { color: var(--green); }
.stat-delta.down { color: var(--txt); }
.acc-bar { height: 6px; background: var(--card-2); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.acc-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--blue)); }
.stat .v.blue { color: var(--txt); }
.perfect-dots { display: flex; gap: 5px; margin: 8px 0 6px; }
.perfect-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); display: inline-block; }
.invite-btn { margin-bottom: 14px; }
.trend-tag { font-family: var(--font-head); font-size: 10px; font-weight: 700; letter-spacing: .5px; padding: 3px 8px; border-radius: 6px; }
.trend-tag.up { background: rgba(34,197,94,.18); color: var(--green); }
.trend-tag.down { background: rgba(239,68,68,.16); color: #ef4444; }

/* Reminder bar */
.rem-bar { display: flex; gap: 8px; margin-bottom: 14px; }
.rem-btn { flex: 1; background: var(--card); border: 1px solid var(--line); color: var(--txt);
  border-radius: 12px; padding: 11px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rem-btn.on { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Streak badge */
.streak-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .5px; padding: 4px 12px;
  border-radius: 99px; text-transform: uppercase; margin-top: -14px; position: relative; z-index: 2; }
.day-streak-badge { display: inline-flex; align-items: center; gap: 4px;
  background: linear-gradient(135deg, #ff9a3c, #ff3c3c); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: .5px;
  padding: 4px 12px; border-radius: 99px; text-transform: uppercase; cursor: help;
  margin-right: 6px; }
.profile-head .day-streak-badge { margin-top: 2px; }

/* Creator-league tiles (horizontal scroll) — legacy compat */
.league-scroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 2px 10px; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; }
.league-scroll::-webkit-scrollbar { display: none; }

/* ── Creator Hero Cards (Groups tab) ─────────────────────────────────────
   Spec 2026-05-27 (Epir): "Pick or Tap" Liga muss spektakulär wirken statt
   funktional-nüchtern. Dunkler Octagon-Gradient, VERIFIED-Pill prominent
   oben-links, Display-Font für den Namen, Stats-Row mit Live-Pulse als
   FOMO-Signal, 80%-Peek-Scroll, Solid-Accent-CTA. */
.league-scroll-hero { padding: 4px 2px 14px; gap: 14px; }
.creator-hero-card {
  flex: 0 0 82%;
  scroll-snap-align: start;
  position: relative;
  min-height: 230px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  cursor: pointer;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.creator-hero-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) {
  .creator-hero-card:hover {
    transform: translateY(-2px) scale(1.015);
    box-shadow: 0 10px 28px rgba(22,163,74,.22), 0 2px 8px rgba(0,0,0,.4);
    border-color: rgba(22,163,74,.4);
  }
}
.creator-hero-card:active { transform: scale(.99); }

/* Layer 1: image (optional) + radial-gradient base */
.creator-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 15% 0%, rgba(22,163,74,.55) 0%, rgba(22,163,74,.18) 35%, transparent 65%),
    radial-gradient(140% 110% at 90% 100%, rgba(52,211,153,.22) 0%, transparent 55%),
    linear-gradient(160deg, #0a140e 0%, var(--bg-2) 55%, #08080b 100%);
}
.creator-hero-bg .chc-img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: .35; mix-blend-mode: luminosity;
}

/* Layer 2: octagon-style geometric pattern (pure CSS, no SVG asset needed) */
.creator-hero-pattern {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .10;
  background-image:
    repeating-linear-gradient( 60deg, rgba(255,255,255,.6) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(-60deg, rgba(255,255,255,.6) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(  0deg, rgba(255,255,255,.6) 0 1px, transparent 1px 28px);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 35%, transparent 80%);
}

/* Layer 3: bottom darkening for text legibility */
.creator-hero-shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.55) 75%, rgba(0,0,0,.78) 100%);
}

/* Layer 4: content */
.creator-hero-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column;
  height: 100%; min-height: 230px;
  padding: 14px 16px 16px;
  gap: 8px;
}
.creator-hero-badge {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  font-family: var(--font-head);
  font-size: 10.5px; font-weight: 800; letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 99px;
}
.creator-hero-badge.is-verified {
  background: linear-gradient(135deg, rgba(22,163,74,.95), rgba(52,211,153,.95));
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 2px 10px rgba(22,163,74,.4);
}
.creator-hero-badge .chb-star { font-size: 12px; line-height: 1; }
.creator-hero-text { margin-top: auto; }
.creator-hero-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.creator-hero-tagline {
  margin-top: 4px;
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  line-height: 1.35;
}
.creator-hero-stats {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,.88); font-weight: 600;
}
.creator-hero-stats .chs-item { display: inline-flex; align-items: center; gap: 5px; }
.creator-hero-stats .chs-ic { font-size: 13px; }
.creator-hero-stats .chs-dot { color: rgba(255,255,255,.4); }
.creator-hero-stats .chs-live { color: #fff; }
.creator-hero-stats .chs-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
  animation: chs-pulse 1.8s ease-out infinite;
}
@keyframes chs-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
  .creator-hero-stats .chs-pulse { animation: none; }
  .creator-hero-card { transition: none; }
}
.creator-hero-cta {
  margin-top: 12px;
  align-self: stretch;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 11px;
  padding: 11px 14px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13.5px;
  letter-spacing: .4px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(22,163,74,.35);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.creator-hero-cta:hover { background: #ff2640; }
.creator-hero-cta:active { transform: scale(.97); }
.creator-hero-cta.is-joined {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.5);
  box-shadow: none;
}
.creator-hero-cta.is-joined:hover { background: rgba(255,255,255,.08); border-color: #fff; }

/* Light-mode: dark hero card stays dark (deliberately premium feel),
   but tone down outer shadow + border. */
html.light .creator-hero-card { border-color: rgba(0,0,0,.08); box-shadow: 0 4px 16px rgba(0,0,0,.12); }

/* My groups row */
.group-row { display: flex; align-items: center; justify-content: space-between; padding: 14px; }
.group-row .gr-rank { font-family: var(--font-head); font-weight: 700; color: var(--blue); }
.live-dot { color: var(--accent); font-size: 10px; }

/* Trend chart */
.trend-card .trend-top { display: flex; align-items: baseline; gap: 8px; }
.trend-val { font-family: var(--font-head); font-size: 26px; font-weight: 700; }
.trend-delta { font-size: 12px; font-weight: 700; }
.trend-delta.up { color: var(--green); } .trend-delta.down { color: var(--accent); }
.trend-svg { width: 100%; height: 90px; margin-top: 8px; display: block; }
.trend-x { display: flex; justify-content: space-between; font-size: 9px; color: var(--txt-dim); margin-top: 4px; }

/* Latest picks — base row used both standalone (in accordion body) and as .card.pick-row */
.pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
/* Standalone legacy card variant (kept for back-compat, not used by the new accordion) */
.card.pick-row { padding: 12px 14px; margin-bottom: 8px; }
.pick-ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex: none; }
.pick-ic.ok { background: rgba(34,197,94,.18); color: var(--green); }
.pick-ic.miss { background: rgba(239,68,68,.15); color: #ef4444; }
.pick-ic.open { background: var(--card-2); color: var(--txt-dim); }
.pick-main { flex: 1; min-width: 0; }
.pick-title { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-sub { font-size: 11px; color: var(--txt-dim); margin-top: 2px; }
.pick-res { font-size: 12px; font-weight: 700; flex-shrink: 0; }
.pick-res.ok { color: var(--green); }
.pick-res.miss { color: var(--txt-dim); }
.pick-res.open { color: var(--txt-dim); }

/* Avatar upload (profile) */
.avatar-upload { position: relative; cursor: pointer; display: inline-block; }
.avatar-edit { position: absolute; bottom: 0; right: 0; width: 28px; height: 28px;
  border-radius: 50%; background: var(--blue); color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; border: 2px solid var(--bg); z-index: 2; }
.avatar-upload:hover .avatar-edit { background: var(--accent-2); }

/* Avatar color swatches (account creation) */
.avatar-color-grid { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.color-swatch { width: 36px; height: 36px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; transition: transform .1s; }
.color-swatch:active { transform: scale(.9); }
.color-swatch.sel { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.5); }

/* Private/Public toggle */
.toggle-row { display: flex; align-items: center; gap: 10px; color: var(--txt-dim);
  font-size: 13px; padding: 10px 4px; cursor: pointer; }
.toggle-row input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--blue); }

/* Rank movement */
.rank-move { font-size: 10px; font-weight: 700; margin-top: 2px; }
.rank-move.up { color: var(--green); } .rank-move.down { color: var(--accent); } .rank-move.flat { color: var(--txt-dim); }

/* Champion-Belt Inline-SVG — passt sich an Textgröße an, sitzt sauber neben Worten */
.belt-ic { vertical-align: -4px; margin-right: 4px; }

/* Group edit modal: member list with kick-buttons */
.grp-mem-list { display: flex; flex-direction: column; gap: 8px; }
.grp-mem-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; }
.grp-mem-row .grp-mem-name { flex: 1; font-weight: 600; }
.grp-mem-row .grp-kick-btn { width: auto; flex: none; padding: 6px 12px;
  font-size: 12px; background: transparent; color: var(--accent);
  border: 1px solid var(--accent); }
.grp-mem-row .grp-kick-btn:hover { background: var(--accent); color: #fff; }

/* Group Chat */
.grp-admin-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: rgba(22,163,74,.12); color: var(--accent); border: 1px solid rgba(22,163,74,.3);
  border-radius: 6px; padding: 2px 7px; margin-left: auto; flex: none; }
/* All-picks reward banner */
.all-picked-banner { display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(22,163,74,.03));
  border: 1px solid rgba(22,163,74,.22); border-radius: 12px;
  padding: 12px 14px; margin: 10px 0; }
.all-picked-icon { font-size: 26px; flex: none; }
.all-picked-body { flex: 1; min-width: 0; }
.all-picked-title { font-weight: 700; font-size: 14px; }
.all-picked-sub { font-size: 12px; color: var(--txt-dim); margin-top: 2px; line-height: 1.4; }
.all-picked-cta { flex: none; font-size: 13px; padding: 0 12px; height: 36px; white-space: nowrap; }
.all-picked-dismiss { flex: none; background: none; border: none; color: var(--txt-dim);
  font-size: 16px; cursor: pointer; padding: 4px 2px; line-height: 1; }
/* Group remind modal rows */
.grp-remind-row { display: flex; align-items: center; gap: 10px; padding: 10px 0;
  font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.grp-remind-row:last-of-type { border-bottom: none; }
.grp-remind-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }

.grp-chat-wrap { margin-top: 0; }
.ev-chat-live-badge { font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: #16a34a; animation: pulse 1.4s ease-in-out infinite; vertical-align: middle; }
.grp-chat-messages { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column;
  gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
/* v190: avatar before each message. Layout switches from column-only to
   row (avatar | body wrap) so the avatar can sit next to the bubble. */
.grp-chat-msg { display: flex; flex-direction: row; align-items: flex-end; gap: 6px;
  max-width: 88%; position: relative; }
.grp-chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.grp-chat-msg .chat-avatar { flex: none; width: 26px; height: 26px; align-self: flex-end;
  margin-bottom: 2px; }
.grp-chat-msg .chat-avatar .av { width: 26px; height: 26px; font-size: 11px; }
.chat-body-wrap { display: flex; flex-direction: column; min-width: 0; flex: 1; position: relative; }

/* v1 live-scoring: bot match-result card in the event chat (dark in any theme,
   like the tap-cards). Active-pinned ones stick to the top of the scroll area. */
.evr-row { display: block; max-width: 100%; width: 100%; margin: 4px 0; }
.evr-row.evr-pinned { position: sticky; top: 0; z-index: 3; }
.evr-pintag { font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #e8b923;
  text-transform: uppercase; margin: 0 2px 5px; }
.evr-card { background: linear-gradient(160deg, #20202b, #14141c); border: 1px solid #34343f;
  border-left: 4px solid #16a34a; border-radius: 13px; padding: 12px 14px; color: #f4f4f7; }
.evr-card.evr-main { border-left-color: #e8b923; }
.evr-kicker { font-family: "Oswald", sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .12em;
  color: #9a9aa8; text-transform: uppercase; }
.evr-winner { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 20px; line-height: 1.1; margin-top: 2px; }
.evr-beat { font-size: 13.5px; color: #b4b4c0; margin-top: 2px; }
.evr-how { display: inline-block; font-family: "Oswald", sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .03em; color: #fff; background: rgba(22,163,74,.18); border: 1px solid rgba(22,163,74,.5);
  padding: 2px 9px; border-radius: 6px; margin-top: 8px; }
.evr-break { font-size: 13px; color: #dcdce4; margin-top: 9px; line-height: 1.55; }
.evr-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid #2a2a36; flex-wrap: wrap; }
.evr-me { font-family: "Oswald", sans-serif; font-weight: 700; font-size: 13px; }
.evr-me.ok { color: #27c46b; } .evr-me.miss { color: #ff5b5b; }
.evr-picks { font-size: 12.5px; color: #b4b4c0; }
.grp-chat-msg.mine .chat-body-wrap { align-items: flex-end; }
.grp-chat-meta { font-size: 10px; color: var(--txt-dim); margin-bottom: 2px; }
.grp-chat-bubble { background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  padding: 7px 12px; font-size: 13px; line-height: 1.4; word-break: break-word;
  max-width: 100%; }
.grp-chat-msg.mine .grp-chat-bubble { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.28); }
.grp-chat-input-row { display: flex; gap: 6px; align-items: center; }
.grp-chat-input { flex: 1; min-width: 0; }
.grp-chat-send-btn { flex: none; width: auto; padding: 0 16px; height: 42px; }
/* GIF picker trigger button — compact pill before the input */
.chat-gif-btn { flex: none; width: 42px; height: 42px; padding: 0; font-size: 18px;
  line-height: 1; border-radius: 12px; }

/* Inline GIF / image embedded in a chat bubble (renderChatBody detected a URL) */
.chat-gif { display: block; max-width: 220px; max-height: 220px; width: auto; height: auto;
  border-radius: 10px; margin: 2px 0; }

/* Reaction chips below a chat bubble + add-reaction trigger */
.chat-react-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chat-react-chip { display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; font-size: 11px; cursor: pointer; transition: background .12s;
  font-variant-numeric: tabular-nums; }
.chat-react-chip:hover { background: var(--card); }
.chat-react-chip.mine { background: rgba(22,163,74,.14); border-color: rgba(22,163,74,.32);
  color: var(--accent); font-weight: 700; }
.chat-react-btn { position: absolute; right: -28px; top: 0; width: 24px; height: 24px;
  padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 50%;
  font-size: 12px; cursor: pointer; opacity: 0; transition: opacity .15s; line-height: 1; }
.grp-chat-msg.mine .chat-react-btn { right: auto; left: -28px; }
.grp-chat-msg:hover .chat-react-btn, .chat-react-btn:focus { opacity: 1; }
@media (max-width: 480px) { .chat-react-btn { opacity: 1; } }

/* Floating emoji palette for adding a reaction */
.chat-react-palette { z-index: 1000; display: flex; gap: 4px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.30); }
.chat-react-opt { background: none; border: none; padding: 4px 6px; font-size: 18px;
  cursor: pointer; border-radius: 6px; }
.chat-react-opt:hover { background: var(--card-2); }

/* GIF picker modal */
.gif-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
.gif-modal { background: var(--bg); border: 1px solid var(--line); border-radius: 16px;
  width: 100%; max-width: 460px; max-height: 80vh; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; }
.gif-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gif-tile { background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  gap: 4px; transition: transform .12s, background .12s; }
.gif-tile:hover { background: var(--card-2); transform: scale(1.02); }
.gif-tile img { width: 100%; height: 96px; object-fit: cover; border-radius: 8px; }
.gif-tile-label { font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt-dim); }
.gif-paste-row { display: flex; gap: 6px; }
.gif-paste-input { flex: 1; min-width: 0; }
.gif-paste-btn { flex: none; padding: 0 14px; height: 38px; }

/* Bottom-nav center FAB (Quick Pick) — keep .bottomnav position:fixed (from base) */
.nav-fab-slot { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 14px; }
.nav-fab { width: 50px; height: 50px; border-radius: 50%; margin-top: -26px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: 4px solid var(--bg);
  font-size: 22px; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(22,163,74,.45);
  display: flex; align-items: center; justify-content: center; z-index: 22; }
.nav-fab:active { transform: scale(.94); }
.nav-fab-label { font-size: 10px; font-weight: 700; color: var(--accent); margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Desktop/Tablet wide layout (>= 1200px)
   - Drops the centered phone-frame and uses a wide 1280px canvas
   - Events tab: spotlight + cards spread into 2 columns via CSS columns
   - Rankings tab: single ~720px centered column
   - Profile tab: 2 columns (head/stats left, rest right) using CSS columns
   - Bottom nav: floating pill, bottom-right, not full-width
   - Pure CSS — no JS structural changes required
   --------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  body { display: block; min-height: 100svh; background: var(--bg);
    align-items: initial; justify-content: initial; }
  #app { max-width: 1280px; width: 100%; margin: 0 auto;
    height: 100svh; aspect-ratio: auto; border-radius: 0;
    box-shadow: none; background: var(--bg); }

  /* Topbar: full-width grid with brand pinned to the left edge of the
     centered content band (760px) and SPOILER/ODDS chips pinned to the
     viewport right (Epir feedback 2026-05-29 "auf desktop 16:9 breit ist
     spoiler und odds nicht rechtsbündig"). Achieved by giving the grid the
     full viewport width with a left padding that matches where the content
     band starts and a small right padding so the chips clear the edge. */
  .topbar { position: relative; }
  .topbar-inner { max-width: none; margin: 0; padding: 16px 32px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  /* Pin each to its grid column so the avatar lands at the RIGHT edge even when
     the dev-group is display:none (Epir 2026-06-03 — grid auto-placement was
     dropping the avatar into the MIDDLE column → it looked centered on wide
     desktop instead of right-aligned). */
  .topbar-inner > .brand { grid-column: 1; justify-self: start; }
  .topbar-inner > .dev-group { grid-column: 2; justify-self: center; }
  .topbar-inner > .topbar-actions { grid-column: 3; justify-self: end; }

  /* View gets generous horizontal padding and leaves room for the floating nav */
  .view { padding: 24px 32px 120px; }

  /* Section titles slightly larger on wide screens */
  .section-title { font-size: 14px; margin: 22px 4px 12px; }

  /* All main-content tabs: single-column, identical width — consistent look
     across Events / Rankings / Groups / Profile / QuickPick.
     `width: 100%` is the critical bit: without it, #view (a flex child with
     margin:0 auto) shrinks to its content's intrinsic width because the auto
     margins cancel the parent's align-items: stretch. Result was Rankings
     rendering at ~403px and Events at ~226px while Profile/Groups stretched
     to whatever the widest child needed — desktop felt inconsistent. With
     width:100% + max-width:760px, all five tabs land at exactly 760px.
     box-sizing: border-box keeps padding INSIDE that 760px so the content
     band always lines up across tabs. */
  #view {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    column-count: auto;
  }

  /* Rankings extras */
  body.tab-rankings .trending-widget { margin-bottom: 16px; }
  body.tab-rankings #view .rank-row { padding: 14px 18px; }
  body.tab-rankings #view .podium { gap: 24px; }

  /* Groups DETAIL: 2-Col Layout — Rangliste links, Events rechts.
     Header + Back-Button bleiben full-width darüber. Erst ab 1200px aktiv. */
  body.tab-groups #view:has(.grp-detail-grid) { max-width: 1080px; }
  .grp-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 12px; align-items: start; }
  .grp-detail-grid .grp-col-rank,
  .grp-detail-grid .grp-col-events { min-width: 0; }
  .grp-detail-grid .section-title:first-child { margin-top: 0; }
  /* Creator-Ligen: weg von horizontal-scroll, hin zu 3-Spalten Grid auf Desktop.
     Mobile bleibt unverändert (scroll-snap horizontal). */
  body.tab-groups .league-scroll-hero { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; overflow: visible; scroll-snap-type: none; }
  body.tab-groups .league-scroll-hero .creator-hero-card { flex: 1; width: auto; }

  /* Bottom-Nav: zentriertes Pill, FAB sitzt INLINE in der Bar (kein floating
     margin-top, weil das auf Desktop weird aussieht — User-Feedback 2026-05-28). */
  /* Wide bottom-bar spanning the full content band (matches the topbar width),
     not a centered pill (Epir 2026-06-03 "bottom bar in die Breite"). width:100%
     is the critical bit — .bottomnav is a STATIC flex child, so without an
     explicit width max-width does nothing and the bar shrinks to its 3-item
     content width (~248px) and gets centered by #app's align-items. Items keep
     flex:1 so they spread evenly across the band (Events ↔ Quick-Pick ↔ Leagues). */
  .bottomnav { width: 100%; max-width: 1280px; left: 0; right: 0; margin-left: auto; margin-right: auto;
    border-radius: 0; padding: 10px 32px 12px; box-shadow: 0 -8px 30px rgba(0,0,0,.35); }
  .bottomnav .nav-btn { padding: 8px 14px; flex: 1; }
  .bottomnav .nav-fab-slot { padding: 4px 0; justify-content: center; }
  .bottomnav .nav-fab { margin-top: 0; width: 42px; height: 42px; border-width: 0;
    box-shadow: 0 4px 12px rgba(22,163,74,.4); font-size: 18px; }
  /* v212: keep "Quick Pick" on a single line on desktop — pill nav has
     enough room (~80px per slot at 560px / 5 cols), wrap looked uneven. */
  .bottomnav .nav-fab-label { margin-top: 2px; text-align: center; white-space: nowrap; }
  /* v212: icon row gets fixed height so SVG/emoji width variance doesn't
     bump labels onto different baselines. */
  .bottomnav .nav-btn > span:first-child { height: 22px; display: inline-flex;
    align-items: center; justify-content: center; }

  /* Topbar narrow-frame container query no longer applies (frame is wide) —
     but the @container query keys on app width, which is now ~1280px, so the
     compact rules naturally turn off. No explicit override needed. */
}

/* --- Admin chat delete button -------------------------------------------- */
.grp-chat-msg { position: relative; }
.chat-del-btn {
  position: absolute;
  top: 4px; right: 4px;
  background: none;
  border: none;
  color: #555;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.grp-chat-msg:hover .chat-del-btn { opacity: 1; }
.chat-del-btn:hover { color: #dc2626; }

/* --- Match result flash animations --------------------------------------- */
@keyframes flash-correct {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  60%  { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); }
  100% { box-shadow: none; }
}
@keyframes flash-wrong {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  60%  { box-shadow: 0 0 0 10px rgba(239,68,68,0); }
  100% { box-shadow: none; }
}
.match-result-flash-correct { animation: flash-correct 1.4s ease-out; }
.match-result-flash-wrong   { animation: flash-wrong 1.4s ease-out; }

/* ── Group detail → Ranking shortcut button ──────────────────────────── */
.grp-to-rank-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin: 12px 0 4px;
  padding: 11px 16px;
  background: var(--card); border: 1px solid var(--accent);
  border-radius: 12px; color: var(--accent);
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: background .15s, transform .1s;
}
.grp-to-rank-btn:hover { background: rgba(22,163,74,.08); }
.grp-to-rank-btn:active { transform: scale(.98); }

/* ── Profile: 2-col core stat grid ──────────────────────────────────── */
.stat-grid-2 { grid-template-columns: 1fr 1fr; }

/* ── Profile: collapsible details toggle ─────────────────────────────── */
.profile-details-toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; border-bottom: 1px dashed var(--line);
  color: var(--txt-dim); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 10px 4px 8px; cursor: pointer; width: 100%;
  margin-top: 12px; transition: color .15s;
}
.profile-details-toggle:hover { color: var(--txt); }

/* ── Profile: flat paginated picks list ──────────────────────────────── */
.picks-flat-list { display: flex; flex-direction: column; gap: 0; }
/* Event name divider — thin label between picks from different events */
.picks-ev-label {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--txt-dim);
  padding: 12px 4px 4px; margin-top: 2px;
}
.picks-ev-label:first-child { padding-top: 0; margin-top: 0; }
/* pick-rows inside the flat list sit directly in the container */
.picks-flat-list .pick-row { margin-bottom: 4px; }

/* ── Events results: "mehr laden" button ─────────────────────────────── */
.btn-load-more-results {
  display: block; width: 100%;
  margin: 10px 0 4px;
  padding: 11px 16px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--txt-dim);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.btn-load-more-results:hover { background: var(--card-2); color: var(--txt); }
.btn-load-more-results:active { transform: scale(.98); }

/* ── Rankings: gap indicator + show-all button ──────────────────────── */
.rank-gap {
  text-align: center; color: var(--txt-dim); letter-spacing: .2em;
  font-size: 16px; padding: 4px 0; margin: 2px 0;
}
.rank-show-all-btn {
  display: block; width: 100%; margin: 8px 0 0;
  padding: 10px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--txt-dim);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.rank-show-all-btn:hover { background: var(--card-2); color: var(--txt); }
.rank-show-all-btn:active { transform: scale(.98); }
/* Group-leaderboard scope toggle (Epir 2026-06-03): All-time vs Since-created. */
.rank-scope-seg { display: flex; gap: 6px; justify-content: center; margin: 0 0 10px; }
.rank-scope-btn { flex: 0 0 auto; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--txt-dim); font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background .12s, color .12s, border-color .12s; }
.rank-scope-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Collapsible member roster at the bottom of a group detail (Epir 2026-06-01):
   banner → ranking → chat → members (5, load-more / show-less). */
.grp-members-list { display: flex; flex-direction: column; gap: 6px; }
.grp-member-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.grp-member-name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-member-name .muted { font-weight: 500; }
.grp-member-owner { font-size: 14px; flex: none; line-height: 1; }
.grp-members-toggle { display: block; width: 100%; margin: 8px 0 0; padding: 10px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  color: var(--txt-dim); font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, transform .1s; }
.grp-members-toggle:hover { background: var(--card-2); color: var(--txt); }
.grp-members-toggle:active { transform: scale(.98); }

/* "Dein Platz" — viewer's own rank + point gap to the neighbour above/below,
   shown between the ranking and the chat (Epir 2026-06-01). */
.your-standing { margin-top: 14px; background: var(--card); border: 1px solid var(--accent);
  border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 0 3px rgba(22,163,74,.10); }
.ys-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ys-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--txt-dim); }
.ys-rankpts { font-size: 15px; color: var(--txt); }
.ys-rankpts b { color: var(--accent); font-size: 16px; }
.ys-gaps { display: flex; flex-direction: column; gap: 5px; }
.ys-gap { font-size: 13px; display: flex; align-items: center; gap: 6px; color: var(--txt-dim); }
.ys-gap b { color: var(--txt); }
.ys-name { font-weight: 600; color: var(--txt); }
.ys-rk { color: var(--txt-dim); font-size: 12px; }
.ys-arrow { font-size: 12px; }
.ys-behind .ys-arrow { color: #ef9a3a; }      /* orange ▲ = ground to make up */
.ys-ahead .ys-arrow { color: var(--green); }   /* green ▼ = your cushion */
.ys-leader { color: #f5a623; font-weight: 600; }

/* Group invites (Epir 2026-06-01): inbox cards on Leagues + the search→invite
   group picker + the Leagues nav-badge. */
.invite-card { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--accent); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 8px; box-shadow: 0 0 0 3px rgba(22,163,74,.08); }
.invite-card-info { min-width: 0; }
.invite-card-group { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.invite-card-meta { font-size: 12px; margin-top: 2px; }
.invite-card-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.invite-card-actions .btn { white-space: nowrap; }
.invite-group-list { display: flex; flex-direction: column; gap: 8px; }
.invite-group-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; cursor: pointer; color: var(--txt); text-align: left;
  transition: background .15s, border-color .15s, transform .1s; }
.invite-group-row:hover { background: var(--card); border-color: var(--accent); }
.invite-group-row:active { transform: scale(.99); }
.invite-group-row:disabled { opacity: .5; cursor: default; }
.ig-name { font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-meta { color: var(--txt-dim); font-size: 12px; flex: 0 0 auto; }
.ig-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.ig-tag.invited { color: #fff; background: var(--green); }
.ig-tag.member { color: var(--txt-dim); background: rgba(127,127,127,.16); font-weight: 600; }
.ig-tag.sending { color: var(--txt-dim); font-weight: 600; }
/* invited row stays full-opacity green (overrides the :disabled dim) so the "sent" proof pops */
.invite-group-row.is-invited, .invite-group-row.is-invited:hover {
  opacity: 1; border-color: var(--green); background: rgba(34,197,94,.08); }
.invite-group-row.is-member { opacity: .6; }
.invite-group-row.is-member:hover { background: var(--card-2); border-color: var(--line); }
.nav-badge { position: absolute; top: 2px; right: calc(50% - 22px); min-width: 16px; height: 16px;
  padding: 0 4px; border-radius: 9px; background: var(--accent); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }

/* ── Early Prelims: collapsible details/summary ──────────────────────── */
.early-prelims-details { margin: 0; }
.early-prelims-details > summary { list-style: none; cursor: pointer; }
.early-prelims-details > summary::-webkit-details-marker { display: none; }
.section-title-toggle { display: flex; align-items: center; gap: 6px; }
.section-title-toggle::before { content: "›"; font-size: 14px; color: var(--txt-dim); display: inline-block; transform: rotate(0deg); transition: transform .2s; line-height: 1; }
.early-prelims-details[open] > summary.section-title-toggle::before { transform: rotate(90deg); }

/* ── Groups: show-more button ───────────────────────────────────────── */
.grp-show-more-btn {
  display: block; width: 100%; margin: 8px 0 0;
  padding: 10px 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; color: var(--txt-dim);
  font-weight: 700; font-size: 13px; cursor: pointer;
  transition: background .15s, color .15s, transform .1s;
}
.grp-show-more-btn:hover { background: var(--card-2); color: var(--txt); }
.grp-show-more-btn:active { transform: scale(.98); }

/* ── Quick Pick: match navigation bar ───────────────────────────────── */
.qp-nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 10px 0 4px; margin-top: 8px;
}
.qp-nav-btn {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 6px 14px;
  font-size: 11px; font-weight: 700; color: var(--txt-dim);
  cursor: pointer; transition: background .15s, color .15s;
  white-space: nowrap; max-width: 43%;
  overflow: hidden; text-overflow: ellipsis;
}
.qp-nav-btn:hover { background: var(--card); color: var(--txt); }
.qp-nav-btn:active { transform: scale(.93); }
.qp-nav-pos { font-size: 11px; color: var(--txt-dim); font-weight: 600; flex-shrink: 0; }

/* ── Profile: Recent Performance swipeable carousel ────────────────── */
.perf-carousel-wrap { margin-top: 4px; }
.perf-carousel {
  display: flex; gap: 10px;
  overflow-x: scroll; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 4px 0 8px;
}
.perf-carousel::-webkit-scrollbar { display: none; }
.perf-carousel-card {
  flex-shrink: 0; width: calc(100% - 40px);
  scroll-snap-align: start;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.perf-card-name {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--txt-dim); text-transform: uppercase; margin-bottom: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.perf-card-pts {
  font-family: var(--font-head); font-size: 34px; font-weight: 700;
  line-height: 1; color: var(--txt);
}
.perf-card-unit { font-size: 14px; font-weight: 600; margin-left: 4px; color: var(--txt-dim); }
.perf-card-delta { font-size: 11px; font-weight: 700; margin: 5px 0 12px; min-height: 16px; }
.perf-card-delta.up { color: var(--green); }
.perf-card-delta.down { color: var(--accent); }
.perf-bar-track { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.perf-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }
.perf-carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; padding-bottom: 2px; }
.perf-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--line); transition: background .2s, transform .2s; }
.perf-dot.active { background: var(--accent); transform: scale(1.35); }
.perf-card-delta.neutral { color: var(--txt-dim); }

/* ── Auth inline error (#1-2) ─────────────────────────────────────────── */
.auth-error { margin: -4px 0 8px; padding: 8px 12px; background: rgba(22,163,74,.09); border: 1px solid rgba(22,163,74,.25); border-radius: 8px; color: var(--accent); font-size: 13px; text-align: center; line-height: 1.4; }
.auth-error.hidden { display: none; }
.auth-input.input-error { border-color: var(--accent); }

/* ── Lock button loading state (#3) ──────────────────────────────────── */
.lock-btn { position: relative; }
.lock-btn:disabled { opacity: .6; }
/* v266: the armed (winner-selected) Lock button pulses so the required commit
   step can't be missed — a reviewer tapped winner+method+round and never
   realised the pick still had to be locked. Side-agnostic white ring. */
@keyframes lockPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 50% { box-shadow: 0 0 0 7px rgba(255,255,255,0); } }
.lock-btn:not(:disabled) { animation: lockPulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .lock-btn:not(:disabled) { animation: none; } }

/* ── Section match-count hint (#5) ────────────────────────────────────── */
.section-count-hint { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--card-2); color: var(--txt-dim); font-size: 11px; font-weight: 600; margin-left: 6px; }
.early-prelims-details[open] .section-count-hint { opacity: 0.5; }

/* ── "Dein Tipp" badge (#9) ───────────────────────────────────────────── */
.my-pick-badge { display: flex; align-items: center; gap: 6px; padding: 6px 12px 8px; }
.my-pick-label { font-size: 11px; font-weight: 600; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .4px; flex-shrink: 0; }
.my-pick-name { font-size: 12px; font-weight: 600; color: var(--txt); background: var(--card-2); padding: 2px 8px; border-radius: 20px; }

/* ── LATEST PICKS improved open badge color (#6) ─────────────────────── */
.pick-res.open { color: var(--txt-dim); font-size: 11px; letter-spacing: .3px; }
.pick-ic.open { background: var(--card-2); color: var(--txt-dim); font-size: 10px; }

/* ── Carousel grab cursor for mouse drag (#7) ────────────────────────── */
.perf-carousel { cursor: grab; }
.perf-carousel:active { cursor: grabbing; }

/* ── QP nav bar at top (#6 QP nav) ───────────────────────────────────── */
.qp-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 12px; gap: 8px; }

/* ── Match HAUPTKAMPF tag ─────────────────────────────────────────────── */
.match-main-tag { font-size: 10px; font-weight: 700; color: var(--accent); letter-spacing: .5px; }

/* v163 ─────────────────────────────────────────────────────────────────── */

/* ── #18 Match result — winner name green + method chip ──────────────── */
.result-winner { color: var(--green); font-weight: 700; }
.result-method-chip { display: inline-block; background: rgba(34,197,94,.12); color: var(--green); font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 20px; margin-left: 5px; letter-spacing: .3px; }

/* ── #19 Ad slot — nearly invisible placeholder ─────────────────────── */
.ad-slot { opacity: 0.35; min-height: 44px !important; }
.ad-body { display: none; }

/* ── #11 Streak badges tappable ─────────────────────────────────────── */
.streak-badge, .day-streak-badge { cursor: pointer; user-select: none; }
.streak-badge:active, .day-streak-badge:active { opacity: 0.75; }

/* #20 avatar edit hint removed (Epir 2026-06-07): the 📷 badge already signals
   tap-to-change; the floating "Tippe zum Ändern" text collided with the coins
   chip and threw the avatar off-centre (padding-bottom). Cleaner without it. */

/* ── #6 LATEST PICKS open icon size fix (⏳ needs no background ring) ── */
.pick-ic.open { background: transparent; font-size: 14px; }

/* v164 ─────────────────────────────────────────────────────────────────── */

/* ── Color-coded QP: selected side colors method + round + lock ───────── */
/* Red corner selected */
.qp-side-red .seg-btn.sel { background: var(--accent); color: #fff; border-color: var(--accent); }
.qp-side-red .lock-btn:not(:disabled), .lock-btn.qp-side-red:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.qp-side-red .qp-prompt { color: var(--accent); }
/* Blue corner selected */
.qp-side-blue .seg-btn.sel { background: var(--blue); color: #fff; border-color: var(--blue); }
.qp-side-blue .lock-btn:not(:disabled), .lock-btn.qp-side-blue:not(:disabled) { background: var(--blue); border-color: var(--blue); color: #fff; }
.qp-side-blue .qp-prompt { color: var(--blue); }

/* ── Native-feel gestures (v351) ──────────────────────────────────────────── */
/* Bottom-sheet grab handle — added by _attachSheetDismiss to every .modal-ov */
.sheet-grab { width: 40px; height: 5px; border-radius: 99px; background: var(--line);
  margin: 8px auto 2px; flex: none; opacity: .85; cursor: grab; }
/* Pull-to-refresh indicator — lives in #app, floats over the top of #view */
.ptr-ind { position: absolute; top: 0; left: 50%;
  transform: translateX(-50%) translateY(0); width: 34px; height: 34px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0,0,0,.35); display: none; align-items: center;
  justify-content: center; z-index: 30; pointer-events: none; opacity: 0;
  transition: opacity .15s ease; }
.ptr-ind.show { display: flex; opacity: 1; }
.ptr-spin { width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--txt-dim); border-top-color: var(--accent);
  transition: transform .15s ease; }
.ptr-ind.ready .ptr-spin { transform: rotate(180deg); }
.ptr-ind.busy .ptr-spin { animation: ptrspin .7s linear infinite; }
@keyframes ptrspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr-ind.busy .ptr-spin { animation-duration: 1.4s; } }

/* ── Desktop: rankings tabs equal width ───────────────────────────────── */
@media (min-width: 640px) {
  .tabs { display: flex; }
  .tabs .tab { flex: 1; text-align: center; }
}

/* ── Tablet / small-desktop: cap phone-frame width ──────────────────────
   Only active between 640px and 1199px — at 1200px+ the full desktop
   layout takes over (max-width: 1280px, flat bar, no phone frame).
   Previously had no max-width: N constraint which caused it to override
   the 1200px+ rules and produce a broken 480px/1280px hybrid layout. */
@media (min-width: 640px) and (max-width: 1199px) {
  #app { max-width: 480px; margin: 0 auto; }
}


/* v165 ─────────────────────────────────────────────────────────────────── */

/* ── Team Stats collapsible panel ─────────────────────────────────── */
.fs-panel { border-top: 1px solid var(--line); margin-top: 10px; }
.fs-toggle {
  list-style: none; cursor: pointer; padding: 8px 0;
  font-size: 12px; font-weight: 600; color: var(--txt-dim);
  letter-spacing: .4px; text-transform: uppercase;
  display: flex; align-items: center; gap: 5px; user-select: none;
}
.fs-toggle::-webkit-details-marker { display: none; }
.fs-panel[open] > .fs-toggle { color: var(--txt); }
.fs-loading { font-size: 12px; color: var(--txt-dim); padding: 10px 0; text-align: center; }

/* Wrap */
.fs-wrap { padding-bottom: 10px; }
.fs-team-names {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; margin-bottom: 8px;
}
.fs-name-r { color: var(--accent); }
.fs-name-b { color: var(--blue); }

/* Tab bar */
.fs-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.fs-tab {
  flex: 1; background: none; border: none; color: var(--txt-dim);
  font-size: 10px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; padding: 4px 2px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color .15s;
}
.fs-tab.active { color: var(--txt); border-bottom-color: var(--accent); }

/* Panel content. Keep panels in the DOM but visually swap with `active` —
   wrapping every panel in a fixed-width grid guarantees the column widths
   stay identical between Matchup ↔ Win By ↔ Strikes ↔ Grappling so switching
   tabs never reflows the row layout. */
.fs-panels { display: block; }
.fs-panel-content { display: none; }
.fs-panel-content.active { display: block; }

/* Stat rows: red-value | LABEL | blue-value
   minmax(0, …) lets the grid track shrink below content's min-content —
   this stops long labels (e.g. "KNOCKDOWNS PRO 15 MIN") from pushing the
   middle column wider on the Win-By/Grappling tabs and visually breaking
   alignment with the Matchup tab. */
.fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  align-items: center; padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
.fs-row:last-child { border-bottom: none; }
.fs-rv { color: var(--accent); font-weight: 700; text-align: left;  min-width: 0; overflow-wrap: anywhere; }
.fs-bv { color: var(--blue);   font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fs-label {
  text-align: center; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px; color: var(--txt-dim);
  line-height: 1.4; min-width: 0; overflow-wrap: anywhere;
}
.fs-sub { font-size: 9px; opacity: .7; display: block; }

/* Bar for win-by / strikes / grappling */
.fs-bar {
  height: 3px; background: var(--line); border-radius: 2px;
  display: flex; overflow: hidden; margin-top: 3px;
}
.fs-bar-r { background: var(--accent); border-radius: 2px 0 0 2px; }
.fs-bar-b { background: var(--blue); margin-left: auto; border-radius: 0 2px 2px 0; }

/* ── Radar Chart (Matchup tab top) ───────────────────────────────────────
   6-axis spider graph comparing both teams. Pure SVG — themes via CSS
   vars so light/dark + future palettes work without JS. */
.rc-wrap {
  display: flex; align-items: center; justify-content: center;
  padding: 8px 0 14px;
}
.rc { display: block; width: 100%; max-width: 280px; height: auto;
  /* labels are positioned just outside the polygon ring — let them paint
     outside the viewBox so long words ("ERFAHRUNG", "WIN-RATE") don't clip */
  overflow: visible; }
.rc-wrap { padding: 8px 24px 14px; }
.rc-grid {
  fill: none;
  stroke: var(--line);
  stroke-width: 1;
  opacity: .55;
}
.rc-grid-outer { opacity: .85; }
.rc-axis {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: .55;
}
.rc-poly {
  stroke-width: 2;
  fill-opacity: .28;
  transition: fill-opacity var(--t-base) var(--ease-out);
}
.rc-poly-r {
  fill: var(--accent);
  stroke: var(--accent);
}
.rc-poly-b {
  fill: var(--blue);
  stroke: var(--blue);
}
.rc:hover .rc-poly { fill-opacity: .36; }
.rc-dot {
  stroke: var(--bg);
  stroke-width: 1.5;
}
.rc-dot-r { fill: var(--accent); }
.rc-dot-b { fill: var(--blue); }
.rc-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  fill: var(--txt-dim);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── Achievement Badges row (Profile) ────────────────────────────────────
   Renders the active streak chip + earned badges in a horizontal row that
   reads as one cohesive "accomplishments" card. Streak chip is visually
   bolder (gradient + glow) to emphasise active momentum vs. historical wins. */
.badges-wrap { margin: 16px 0 0; }
.badges-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md, 12px);
  padding: 12px 14px 14px;
}
.badges-head {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--txt-dim);
  margin-bottom: 10px;
}
.badges-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.streak-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,197,24,.18));
  border: 1px solid rgba(245,158,11,.45);
  color: #ffb38a;
  font-weight: 600;
  box-shadow: 0 0 12px rgba(245,158,11,.18);
}
html.light .streak-chip { color: #b54200; }
.streak-chip b { font-weight: 800; color: #ffd4ad; }
html.light .streak-chip b { color: #7a2900; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px;
  font-size: 12px;
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--txt);
  font-weight: 600;
  transition: transform var(--t-fast, 120ms) var(--ease-out, ease);
}
.badge-chip:hover { transform: translateY(-1px); }
.badge-em { font-size: 14px; line-height: 1; }
.badge-l  { line-height: 1.1; }

/* Card-open time annotation — secondary "Card opens 10:00" shown only when the
   prelims start ≥45 min before the main event walkout. Dimmer than the main
   time so the eye reads the headline first. */
.hh-meta-sub, .ev-hero-meta-sub {
  font-weight: 500;
  opacity: .75;
  font-size: .9em;
}
html.light .rc-label { fill: var(--txt); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .rc-poly {
    animation: rc-pop .42s cubic-bezier(.2,.9,.3,1.2) both;
  }
  @keyframes rc-pop {
    from { transform: scale(.85); transform-origin: 50% 50%; opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
}

/* ── Premium / Stripe Paywall — Apple-style gold accent card ──────────── */
.prem-card {
  position: relative; overflow: hidden;
  background: linear-gradient(165deg, #1d1409 0%, #221604 45%, #15110a 100%);
  border: 1px solid rgba(245,197,24,.32);
  border-radius: 18px;
  padding: 18px 18px 16px;
  color: #f5e9c9;
  isolation: isolate;
}
html.light .prem-card {
  background: linear-gradient(165deg, #fff8e6 0%, #fef0c4 45%, #fff8e6 100%);
  border-color: rgba(184,127,0,.35);
  color: #4d3500;
}
.prem-card .prem-shine {
  position: absolute; inset: -50% -10% auto -10%; height: 200%;
  background: radial-gradient(ellipse at top, rgba(245,197,24,.18), transparent 55%);
  pointer-events: none; z-index: -1;
}
.prem-card.prem-active { border-color: rgba(245,197,24,.55); }
.prem-card.prem-active .prem-shine {
  background: radial-gradient(ellipse at top, rgba(245,197,24,.28), transparent 60%);
}
.prem-badge {
  display: inline-block;
  font-size: 10px; font-weight: 800; letter-spacing: .18em;
  color: #f5c518;
  background: rgba(245,197,24,.10);
  border: 1px solid rgba(245,197,24,.4);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
html.light .prem-badge { color: #8a6410; background: rgba(245,197,24,.18); border-color: rgba(138,100,16,.4); }
.prem-headline {
  font-family: var(--font-brand);
  font-size: 22px; font-weight: 700; letter-spacing: -.01em;
  line-height: 1.15; margin-bottom: 4px; color: #ffe9a6;
}
html.light .prem-headline { color: #4d3500; }
.prem-sub  { font-size: 13px; color: #d8c992; opacity: .9; }
html.light .prem-sub { color: #715a1c; }
.prem-renew {
  font-size: 11px; color: #c8b87a; opacity: .8; margin-top: 6px;
}
html.light .prem-renew { color: #8a6410; }
.prem-features {
  list-style: none; padding: 0; margin: 12px 0 4px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
.prem-features li { color: #ffe9a6; line-height: 1.3; }
html.light .prem-features li { color: #4d3500; }
.prem-price {
  font-size: 12px; font-weight: 600; color: #c8b87a;
  letter-spacing: .02em; margin-top: 10px;
}
html.light .prem-price { color: #8a6410; }
.btn.prem-cta {
  background: linear-gradient(135deg, #f5c518 0%, #e8b923 60%, #d4a008 100%);
  color: #1a1308;
  border: none;
  font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(245,197,24,.25), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .08s ease, box-shadow .15s ease;
}
.btn.prem-cta:hover  { box-shadow: 0 8px 24px rgba(245,197,24,.32), inset 0 1px 0 rgba(255,255,255,.5); }
.btn.prem-cta:active { transform: scale(.985); }
.btn.ghost.prem-manage {
  border-color: rgba(245,197,24,.35);
  color: #ffe9a6;
}
html.light .btn.ghost.prem-manage { color: #4d3500; border-color: rgba(184,127,0,.4); }
.btn.ghost.prem-manage:hover { background: rgba(245,197,24,.08); }

/* Paywall modal — used when a free user taps a Premium-only feature.
   Uses the same backdrop pattern as other modals but with the gold card. */
.modal-backdrop.paywall-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: paywall-fade .18s ease-out;
}
@keyframes paywall-fade { from { opacity: 0 } to { opacity: 1 } }
.modal.paywall-modal {
  position: relative;
  background: linear-gradient(165deg, #1d1409 0%, #221604 45%, #15110a 100%);
  border: 1px solid rgba(245,197,24,.4);
  border-radius: 22px;
  max-width: 380px; width: 100%;
  padding: 24px 22px 20px;
  text-align: center;
  color: #f5e9c9;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(245,197,24,.15);
  animation: paywall-pop .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes paywall-pop { from { transform: scale(.92); opacity: 0 } to { transform: scale(1); opacity: 1 } }
html.light .modal.paywall-modal {
  background: linear-gradient(165deg, #fff8e6 0%, #fef0c4 45%, #fff8e6 100%);
  border-color: rgba(184,127,0,.45);
  color: #4d3500;
}
.modal.paywall-modal .modal-close {
  position: absolute; top: 12px; right: 12px;
  background: none; border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 14px; color: #c8b87a; cursor: pointer;
  transition: background .15s;
}
.modal.paywall-modal .modal-close:hover { background: rgba(245,197,24,.1); }
.paywall-icon { font-size: 38px; line-height: 1; margin-bottom: 12px; }
.paywall-title {
  font-family: var(--font-brand);
  font-size: 22px; font-weight: 700;
  letter-spacing: -.01em; margin-bottom: 6px;
  color: #ffe9a6;
}
html.light .paywall-title { color: #4d3500; }
.paywall-sub { font-size: 13px; color: #d8c992; line-height: 1.4; margin-bottom: 14px; }
html.light .paywall-sub { color: #715a1c; }
.paywall-features { text-align: left; margin-top: 6px !important; margin-bottom: 4px !important; }
.btn.paywall-cta { width: 100%; margin-top: 14px; }
.btn.ghost.paywall-skip { color: #c8b87a; border-color: transparent; }
html.light .btn.ghost.paywall-skip { color: #8a6410; }
.btn.ghost.paywall-skip:hover { background: rgba(245,197,24,.06); }

/* ── Combo-Picks (Premium feature) ───────────────────────────────────────
   Gold-rim card under the event hero; pickers sheet is a modal with red/blue
   bilateral buttons per leg. Visual cues mirror the Premium card so users
   read "gold = premium" consistently across the app. */
.combo-mount { margin-top: var(--space-3, 12px); }
.combo-card {
  position: relative;
  background: linear-gradient(165deg, rgba(245,197,24,.10), rgba(22,163,74,.06));
  border: 1px solid rgba(245,197,24,.4);
  border-radius: var(--r-lg, 16px);
  padding: 14px 16px 14px;
}
html.light .combo-card { background: linear-gradient(165deg, rgba(245,197,24,.18), rgba(22,163,74,.06)); }
.combo-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.combo-badge {
  font-size: var(--text-xs, 11px); font-weight: 800; letter-spacing: .14em;
  color: #f5c518; background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.4);
  border-radius: 999px; padding: 3px 9px;
}
html.light .combo-badge { color: #8a6410; border-color: rgba(138,100,16,.4); background: rgba(245,197,24,.2); }
.combo-multipliers {
  font-size: var(--text-xs, 11px); font-weight: 700; letter-spacing: .08em;
  color: var(--gold);
}
/* Light mode: raw --gold (#f5c518) is unreadable on the white card. Drop to a
   dark amber that keeps the "gold" feel but actually has contrast (matches the
   .combo-badge light override). Epir 2026-05-29: "im Light Mode lesbar machen". */
html.light .combo-multipliers { color: #8a6410; }
.combo-title {
  font-family: var(--font-brand);
  font-weight: 700; font-size: var(--text-md, 17px);
  margin-bottom: 4px;
}
.combo-sub { font-size: var(--text-sm, 13px); color: var(--txt-dim); margin-bottom: 12px; line-height: 1.4; }
.combo-status-line {
  font-size: var(--text-sm, 13px); font-weight: 600;
  padding: 6px 10px; border-radius: 999px;
  margin-bottom: 10px; display: inline-block;
}
.combo-won  { background: rgba(34,197,94,.12); color: rgb(34,165,74); }
.combo-lost { background: rgba(239,68,68,.12); color: #ef4444; }
.combo-pending,
.combo-status-line:not(.combo-won):not(.combo-lost) {
  background: var(--card-2); color: var(--txt-dim);
}
.btn.combo-cta {
  background: linear-gradient(135deg, #f5c518, #e8b923 60%, #d4a008);
  color: #1a1308; border: none;
  font-weight: 800; letter-spacing: .03em;
  box-shadow: 0 6px 18px rgba(245,197,24,.22), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.combo-cta:hover { box-shadow: 0 8px 24px rgba(245,197,24,.28), inset 0 1px 0 rgba(255,255,255,.55); }

/* Combo composer sheet (modal) */
.modal-backdrop.combo-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.6); backdrop-filter: blur(10px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.modal.combo-sheet {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 22px) var(--r-xl, 22px) 0 0;
  width: 100%; max-width: 540px;
  padding: 24px 18px 24px;
  max-height: 88svh;
  overflow-y: auto;
  animation: combo-up .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes combo-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 540px) {
  .modal-backdrop.combo-backdrop { align-items: center; padding: 24px; }
  .modal.combo-sheet { border-radius: var(--r-xl, 22px); max-height: 80svh; }
}
.modal.combo-sheet .modal-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--card-2); border: 1px solid var(--line);
  color: var(--txt-dim); font-size: 14px; cursor: pointer;
}
.combo-sheet-head { text-align: center; margin-bottom: 16px; }
.combo-sheet-head .combo-badge { display: inline-block; margin-bottom: 10px; }
.combo-sheet-title { font-family: var(--font-brand); font-weight: 700; font-size: var(--text-lg, 22px); }
.combo-sheet-sub { font-size: var(--text-sm, 13px); color: var(--txt-dim); margin-top: 4px; }

.combo-legs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.combo-leg {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--r-md, 12px); padding: 10px 12px;
}
.combo-leg-head { display: flex; justify-content: space-between; font-size: var(--text-xs, 11px);
  color: var(--txt-dim); font-weight: 700; letter-spacing: .06em; margin-bottom: 6px; }
.combo-leg-pickers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.combo-pick {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-sm, 8px); padding: 12px 10px;
  font-weight: 700; font-size: var(--text-sm, 13px);
  color: var(--txt); cursor: pointer;
  transition: transform var(--t-fast, 120ms) var(--ease-out),
              border-color var(--t-base, 200ms) var(--ease-out),
              background var(--t-base, 200ms) var(--ease-out);
}
.combo-pick:active { transform: scale(.97); }
.combo-pick[data-side="red"].sel  { background: rgba(239,68,68,.14); border-color: #ef4444; color: #ef4444; }
.combo-pick[data-side="blue"].sel { background: rgba(59,130,246,.14); border-color: var(--blue);   color: var(--blue); }

.combo-footer {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--card-2); border-radius: var(--r-md, 12px);
  padding: 10px 14px; margin-bottom: 12px;
  font-size: var(--text-sm, 13px);
}
.combo-counter { font-weight: 700; }
.combo-payout { display: flex; gap: 8px; align-items: baseline; }
.cp-mult {
  font-family: var(--font-brand); font-weight: 700;
  font-size: var(--text-md, 17px); color: var(--gold);
}
/* Light mode: the prominent multiplier (x2/x3/x5) in the composer footer sits
   on --card-2 (#eef0f4) — gold is invisible there. Dark amber for contrast. */
html.light .cp-mult { color: #8a6410; }
.cp-pts { color: var(--txt-dim); }
.btn.combo-submit { width: 100%; background: linear-gradient(135deg, #f5c518, #e8b923 60%, #d4a008); color: #1a1308; font-weight: 800; }
.btn.combo-submit:disabled { opacity: .4; background: var(--card-2); color: var(--txt-dim); }
.btn.ghost.combo-delete { width: 100%; margin-top: 8px; color: var(--accent); }

/* ─────────────────────────────────────────────────────────────────────────
   Sign-in nudge — replaces the 1.6 s bottom toast when an action needs auth.
   Sticks for 6 s, has a real CTA button so users actually convert.
   ───────────────────────────────────────────────────────────────────────── */
.sign-nudge {
  position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #1a1a22 0%, #28282f 100%);
  color: #fff; border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px; padding: 12px 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  max-width: calc(100vw - 32px); width: 420px;
  z-index: 9999;
  animation: signNudgeIn .22s cubic-bezier(.2, .8, .2, 1);
}
.sign-nudge-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.sign-nudge-body { flex: 1 1 auto; min-width: 0; }
.sign-nudge-title { font-weight: 700; font-size: 14px; line-height: 1.25; }
.sign-nudge-sub { font-size: 12px; opacity: .78; margin-top: 2px; }
.sign-nudge-cta {
  background: var(--accent, #16a34a); color: #fff;
  border: none; border-radius: 999px; padding: 8px 16px;
  font-weight: 700; font-size: 13px; cursor: pointer; flex: 0 0 auto;
  box-shadow: 0 4px 14px rgba(22,163,74,.42);
}
.sign-nudge-close {
  background: transparent; border: none; color: rgba(255,255,255,.55);
  font-size: 16px; cursor: pointer; padding: 4px 6px; line-height: 1;
}
@keyframes signNudgeIn {
  from { transform: translate(-50%, 20px); opacity: 0; }
  to   { transform: translate(-50%, 0);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Spotlight hero countdown — was missing on the most important card.
   Sits between the meta line and the watch row.
   ───────────────────────────────────────────────────────────────────────── */
.hh-countdown {
  display: flex; gap: 5px; margin: 8px 0 4px;
  font-variant-numeric: tabular-nums; opacity: .92;
}
.hh-countdown .cd-cell {
  background: rgba(0,0,0,.32); border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px; padding: 3px 7px; min-width: 30px;
  text-align: center;
}
.hh-countdown .cd-num { font-weight: 600; font-size: 12px; line-height: 1.15; color: #fff; }
/* Bug: countdownCells() renders .cd-unit; old rule targeted .cd-lbl (unused). */
.hh-countdown .cd-unit { font-size: 8px; opacity: .55; letter-spacing: .06em;
  margin-top: 1px; font-weight: 600; text-transform: uppercase; }
.hh-countdown-live .live-dot {
  background: var(--accent, #16a34a); color: #fff; padding: 4px 10px;
  border-radius: 999px; font-weight: 800; font-size: 11px; letter-spacing: .06em;
}

/* ─────────────────────────────────────────────────────────────────────────
   Crystal Ball — confidence stars (1–5) on the Quick Pick screen.
   ───────────────────────────────────────────────────────────────────────── */
.qp-cb-section { display: flex; align-items: baseline; gap: 10px; }
.qp-cb-hint { font-size: 12px; color: var(--txt-dim, #818384); font-weight: 400; }
.cb-stars {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 4px 4px;
}
.cb-star {
  font-size: 30px; line-height: 1; padding: 4px 6px;
  background: none; border: none; cursor: pointer;
  color: var(--txt-dim, #818384);
  transition: transform .12s, color .12s;
}
.cb-star:active { transform: scale(.92); }
.cb-star.on { color: #f5c518; text-shadow: 0 0 12px rgba(245,197,24,.45); }
.cb-mult {
  margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--gold, #f5c518); padding: 4px 10px;
  background: rgba(245,197,24,.10); border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────────────────────────────────────────────────────
   Picktagon Coins — in-app currency card on the Profile screen.
   ───────────────────────────────────────────────────────────────────────── */
.coins-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2a2009 0%, #3d2e0a 100%);
  border: 1px solid rgba(245,197,24,.30);
  border-radius: 14px; padding: 12px 16px; margin-top: 10px;
  color: #fff;
}
.coins-icon { font-size: 30px; line-height: 1; flex: 0 0 auto; }
.coins-body { display: flex; flex-direction: column; }
.coins-value {
  font-family: var(--font-brand, inherit); font-weight: 800;
  font-size: var(--text-xl, 28px); color: var(--gold, #f5c518);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.coins-label { font-size: 11px; opacity: .7; letter-spacing: .06em; text-transform: uppercase; }
.coins-hint { flex: 1 1 auto; text-align: right; font-size: 11px; opacity: .55; }
@media (max-width: 480px) {
  .coins-hint { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Tale of the Tape — team profile modal: side-by-side stat comparison.
   ───────────────────────────────────────────────────────────────────────── */
.fpx-tot-head { font-size: 13px; font-weight: 800; letter-spacing: .06em;
                text-transform: uppercase; opacity: .85; margin: 14px 0 8px; }
.fpx-tot {
  display: grid; gap: 4px; padding: 8px 4px;
  background: var(--card-2, rgba(255,255,255,.04));
  border-radius: 12px;
}
.fpx-tot.two-col .fpx-row { grid-template-columns: 1fr 110px 1fr; }
.fpx-tot.one-col .fpx-row { grid-template-columns: 1fr 110px; }
.fpx-row {
  display: grid; align-items: center; gap: 6px;
  padding: 6px 10px; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.fpx-row:last-child { border-bottom: none; }
.fpx-row-me { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.fpx-row-op { text-align: left; font-weight: 700; font-variant-numeric: tabular-nums; opacity: .8; }
.fpx-row-label { text-align: center; font-size: 11px; opacity: .55;
                 text-transform: uppercase; letter-spacing: .04em; }
.fpx-row-win {
  color: var(--gold, #f5c518) !important;
  text-shadow: 0 0 8px rgba(245,197,24,.30);
}
.fpx-tot-foot { font-size: 11px; opacity: .55; text-align: right;
                margin-top: 8px; padding: 0 4px; }

/* Style-Clash banner — between the header and the stat rows. */
.fpx-clash {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin: 8px 0;
  background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(29,111,224,.12));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
}
.fpx-clash-emoji { font-size: 28px; line-height: 1; }
.fpx-clash-body { display: flex; flex-direction: column; }
.fpx-clash-title { font-weight: 800; letter-spacing: .04em;
                   font-size: 13px; color: var(--gold, #f5c518); }
.fpx-clash-sub { font-size: 12px; opacity: .78; }

/* ─────────────────────────────────────────────────────────────────────────
   Auto-Beef banner — opposing picks in a group make for the best in-app
   social moment, so we surface it as a hype card above the chip row.
   ───────────────────────────────────────────────────────────────────────── */
.beef-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 6px 0 8px;
  background: linear-gradient(120deg, rgba(239,68,68,.18) 0%, rgba(29,111,224,.18) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 13px;
  animation: beefPulse 2.4s ease-in-out infinite alternate;
}
@keyframes beefPulse {
  from { box-shadow: 0 0 0 0 rgba(22,163,74,.0); }
  to   { box-shadow: 0 0 0 4px rgba(22,163,74,.15); }
}
.beef-tag {
  background: var(--accent, #16a34a); color: #fff;
  padding: 3px 8px; border-radius: 6px;
  font-weight: 800; font-size: 11px; letter-spacing: .06em;
  flex: 0 0 auto;
}
.beef-side { font-weight: 700; }
.beef-red  { color: #f87171; }
.beef-blue { color: #93c5fd; }
.beef-vs   { opacity: .55; font-size: 11px; }

/* Friends'-Pick row: confidence chip "★N" */
.fpd-cb {
  background: rgba(245,197,24,.14); color: var(--gold, #f5c518);
  font-weight: 700; font-size: 11px;
  padding: 2px 6px; border-radius: 6px;
  margin-left: 2px;
}

/* Called-Shot confetti — pinned to a specific match card. */
.confetti-mini {
  position: fixed; pointer-events: none; overflow: visible;
  z-index: 9000;
}

/* Confidence-aware result flash variants */
.match-result-flash-correct.flash-called-shot {
  animation: calledShot 1.4s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 0 0 2px rgba(245,197,24,.6) inset, 0 0 32px rgba(245,197,24,.4);
}
@keyframes calledShot {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.match-result-flash-wrong.flash-cocky-wrong {
  animation: cockyShake .5s ease-in-out 2;
}
@keyframes cockyShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}

/* Lock-button multiplier chip — shows the live Crystal Ball payoff */
.lock-mult {
  display: inline-block; margin-left: 8px;
  background: rgba(245,197,24,.18); color: var(--gold, #f5c518);
  font-weight: 800; font-size: 12px;
  padding: 2px 8px; border-radius: 999px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* --- Beef-Cards (v191) --------------------------------------------------- *
 * Auto-injected into group chat the moment a match locks. The card surfaces
 * the picker split inside that specific group — "Tom + Lisa picken Aspinall,
 * Bob pickt Volkov" — so the chat lights up with built-in rivalry instead
 * of a silent transition. Highlight the viewer's own side in gold.
 * ------------------------------------------------------------------------ */
/* --- Tap-Card (v192 redesign) ------------------------------------------ *
 * Auto-injected once per group when the MAIN EVENT locks. Poster vibe:
 * big team portraits, dramatic VS divider, method-mix + avg confidence
 * stars per side, lone-wolf callout when the split is lopsided. The
 * viewer's own side glows gold; the dominant side gets a subtle tint.
 * ----------------------------------------------------------------------- */
.grp-chat-tap { width: 100%; max-width: 100%; }
.grp-chat-tap .chat-body-wrap { width: 100%; }
.tap-card {
  margin-top: 8px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(245,197,24,.10), transparent 60%),
    linear-gradient(180deg, rgba(28,28,34,.95), rgba(14,14,20,.95));
  border: 1px solid rgba(245,197,24,.4);
  border-radius: 16px;
  padding: 14px 12px 12px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  animation: tapCardIn .4s cubic-bezier(.16,1,.3,1);
}
.tap-card::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(245,197,24,.04) 50%, transparent 70%);
  pointer-events: none;
}
.tap-card:active { transform: scale(.99); }
.tap-card:hover {
  border-color: rgba(245,197,24,.65);
  box-shadow: 0 6px 20px -8px rgba(245,197,24,.25);
}
.tap-card-fallback {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.08);
  font-size: 13px;
  white-space: pre-line;
  cursor: default;
  animation: none;
}
@keyframes tapCardIn {
  0%   { transform: translateY(6px) scale(.98); opacity: 0; }
  100% { transform: translateY(0)   scale(1);   opacity: 1; }
}
.tap-head-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  position: relative;
}
.tap-badge {
  background: linear-gradient(135deg, var(--accent, #16a34a), var(--accent-2, #34d399));
  color: #fff;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .1em;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(22,163,74,.4);
}
.tap-subtitle {
  color: var(--gold, #f5c518);
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tap-sides {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: stretch;
  position: relative;
}
.tap-side {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1.5px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px 8px 8px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-width: 0;
  transition: border-color .18s ease, background .18s ease;
}
.tap-side-red.is-dominant  { background: linear-gradient(180deg, rgba(239,68,68,.10), rgba(239,68,68,.02)); }
.tap-side-blue.is-dominant { background: linear-gradient(180deg, rgba(58,141,255,.10), rgba(58,141,255,.02)); }
.tap-side-red.is-mine {
  border-color: var(--gold, #f5c518);
  box-shadow: 0 0 0 1px var(--gold, #f5c518) inset, 0 4px 12px -4px rgba(245,197,24,.35);
}
.tap-side-blue.is-mine {
  border-color: var(--gold, #f5c518);
  box-shadow: 0 0 0 1px var(--gold, #f5c518) inset, 0 4px 12px -4px rgba(245,197,24,.35);
}
.tap-side.is-lone {
  border-color: rgba(255,180,80,.7);
  box-shadow: 0 0 0 1px rgba(255,180,80,.4) inset;
}
.tap-team { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tap-team-img {
  width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover;
  background: #1c1c22;
  border: 3px solid rgba(255,255,255,.1);
  transition: transform .2s ease;
}
.tap-side-red  .tap-team-img { border-color: var(--accent, #16a34a); }
.tap-side-blue .tap-team-img { border-color: #3a8dff; }
.tap-card:hover .tap-team-img { transform: scale(1.04); }
.tap-team-img-fallback {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 26px; color: #aaa;
}
.tap-team-name {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: .05em;
  color: #f0f0f4;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.1;
}
.tap-count {
  display: flex; flex-direction: column; align-items: center;
  line-height: 1;
}
.tap-count-num {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 22px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.tap-side-red.is-dominant  .tap-count-num { color: var(--accent, #16a34a); }
.tap-side-blue.is-dominant .tap-count-num { color: #3a8dff; }
.tap-side.is-mine .tap-count-num { color: var(--gold, #f5c518); }
.tap-count-lbl {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a8a92;
  margin-top: 2px;
  font-weight: 600;
}
.tap-pickers {
  display: flex; justify-content: center; align-items: center;
  min-height: 22px;
}
.tap-head {
  display: inline-block;
  width: 22px; height: 22px;
  margin-right: -6px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #0e0e14;
  background: #1c1c22;
}
.tap-head.is-me {
  border-color: var(--gold, #f5c518);
  box-shadow: 0 0 0 1px var(--gold, #f5c518);
  z-index: 2; position: relative;
}
.tap-head .avatar, .tap-head img {
  width: 100%; height: 100%; display: block; object-fit: cover;
}
.tap-head-more {
  display: inline-block;
  margin-left: 8px;
  font-size: 10px;
  color: #c0c0c8;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.tap-method-mix {
  font-size: 10px;
  color: #b0b0b8;
  font-weight: 600;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.tap-stars {
  font-size: 11px;
  color: var(--gold, #f5c518);
  letter-spacing: 1px;
  line-height: 1;
}
.tap-lone-wolf {
  font-size: 9.5px;
  color: #ffb050;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  background: rgba(255,180,80,.12);
  border: 1px solid rgba(255,180,80,.35);
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.tap-vs {
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.tap-vs > span {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 16px;
  color: var(--gold, #f5c518);
  letter-spacing: .12em;
  padding: 4px 8px;
  background: rgba(14,14,20,.6);
  border-radius: 8px;
  border: 1px solid rgba(245,197,24,.3);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.tap-cta {
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px;
  color: #8a8a92;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 380px) {
  .tap-team-img { width: 54px; height: 54px; }
  .tap-team-name { font-size: 12px; }
  .tap-count-num { font-size: 20px; }
  .tap-vs > span { font-size: 14px; padding: 3px 6px; }
}

/* Dev: Tap-Card Preview Modal (v195) — opens from devPanel "🃏 Tap-Card
 * Preview anzeigen". Reuses the real chat row renderer so what you see is
 * exactly what production will paint when a match locks. */
.tap-preview-modal {
  background: #14141a;
  border: 1px solid var(--line, #2a2a33);
  border-radius: 14px;
  padding: 16px;
  width: min(94vw, 480px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
}
.tap-preview-modal .modal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.tap-preview-modal .modal-head b {
  font-family: var(--font-head, "Oswald", sans-serif);
  letter-spacing: .04em;
}
.tap-preview-modal .modal-x {
  background: none; border: 0; color: #888; font-size: 22px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.tap-preview-chatframe {
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px;
  margin-top: 12px;
}

/* =========================================================================
 * Demo Lab (v199) — gear-button + multi-step strategy modal
 * Visible top-right of the Events tab for non-authenticated visitors so
 * investor demos / first-touch users can browse the strategy artifacts.
 * ========================================================================= */
.demo-lab-btn {
  position: fixed; top: 14px; right: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d1d24, #0e0e14);
  color: var(--gold, #f5c518);
  border: 2px solid var(--gold, #f5c518);
  font-size: 20px;
  cursor: pointer;
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4), 0 0 0 4px rgba(245,197,24,.12);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.demo-lab-btn:hover {
  transform: rotate(60deg);
  box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 0 6px rgba(245,197,24,.2);
}
.demo-lab-btn:active { transform: rotate(60deg) scale(.95); }
.demo-lab-modal {
  background: #14141a;
  border: 1px solid var(--line, #2a2a33);
  border-radius: 14px;
  padding: 16px;
  width: min(94vw, 520px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.5);
  color: #eaeaee;
}
.demo-lab-modal.demo-lab-wide { width: min(94vw, 720px); }
.demo-lab-modal .modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-bottom: 6px;
}
.demo-lab-modal .modal-head b { font-family: var(--font-head, "Oswald", sans-serif); letter-spacing: .04em; font-size: 16px; }
.demo-lab-modal .modal-x, .demo-lab-modal .demo-back {
  background: none; border: 0; color: #888; font-size: 22px; cursor: pointer; padding: 0 8px; line-height: 1;
}
.demo-lab-modal .demo-back { font-size: 24px; color: var(--gold, #f5c518); }
.demo-lab-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.demo-lab-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 14px;
  text-align: left; cursor: pointer; color: inherit;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.demo-lab-item:hover { border-color: rgba(245,197,24,.4); background: rgba(245,197,24,.04); }
.demo-lab-item:active { transform: scale(.99); }
.demo-lab-icon { font-size: 24px; flex: 0 0 32px; text-align: center; }
.demo-lab-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.demo-lab-title { font-family: var(--font-head, "Oswald", sans-serif); font-weight: 700; font-size: 14px; letter-spacing: .03em; }
.demo-lab-sub { font-size: 12px; color: #8a8a92; line-height: 1.35; }

/* Financing cards grid */
.demo-fin-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
@media (min-width: 600px) { .demo-fin-grid { grid-template-columns: 1fr 1fr; } }
.demo-fin-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px;
}
.demo-fin-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.demo-fin-icon { font-size: 22px; }
.demo-fin-title { font-family: var(--font-head, "Oswald", sans-serif); font-weight: 700; font-size: 13.5px; letter-spacing: .03em; }
.demo-fin-sub { font-size: 11px; color: #8a8a92; margin-top: 2px; }
.demo-fin-body { font-size: 12.5px; line-height: 1.45; color: #d0d0d8; }
.demo-fin-meta { font-size: 11px; color: #a0a0a8; margin-top: 8px; line-height: 1.55; }
.demo-fin-meta b { color: var(--gold, #f5c518); font-weight: 600; }

/* Revenue calc */
.demo-rev-sliders { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.demo-rev-slider-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #c0c0c8; margin-bottom: 4px;
}
.demo-rev-slider-head b { color: var(--gold, #f5c518); font-weight: 700; font-variant-numeric: tabular-nums; }
.demo-rev-slider input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; background: #2a2a33; border-radius: 999px;
  outline: none;
}
.demo-rev-slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold, #f5c518); cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.demo-rev-slider input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--gold, #f5c518); cursor: pointer; border: 0;
}
.demo-rev-output {
  margin-top: 16px; padding: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.08), rgba(22,163,74,.04));
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 12px;
}
.demo-rev-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-head, "Oswald", sans-serif); font-size: 14px;
  text-transform: uppercase; letter-spacing: .06em;
}
.demo-rev-total b { font-size: 26px; color: var(--gold, #f5c518); font-variant-numeric: tabular-nums; }
.demo-rev-breakdown {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px;
  margin-top: 10px; font-size: 12px;
}
.demo-rev-breakdown > div { display: flex; justify-content: space-between; }
.demo-rev-breakdown b { color: #e0e0e8; font-variant-numeric: tabular-nums; }
.demo-rev-footnote { margin-top: 10px; font-size: 11px; }
.demo-rev-footnote b { color: var(--gold, #f5c518); }

/* Economy explainer */
.demo-econ { line-height: 1.55; font-size: 13px; }
.demo-econ ol.demo-econ-list { padding-left: 20px; margin: 8px 0 14px; }
.demo-econ ol.demo-econ-list li { margin-bottom: 4px; }
.demo-econ-grid {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0;
}
@media (min-width: 600px) { .demo-econ-grid { grid-template-columns: 1fr 1fr 1fr; } }
.demo-econ-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px;
}
.demo-econ-emoji { font-size: 26px; text-align: center; margin-bottom: 4px; }
.demo-econ-title {
  text-align: center;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 13px; color: var(--gold, #f5c518);
  letter-spacing: .04em; margin-bottom: 6px;
}
.demo-econ-card ul { padding-left: 16px; margin: 0; font-size: 12px; color: #d0d0d8; }
.demo-econ-card ul li { margin-bottom: 3px; }
.demo-econ-foot { font-size: 11.5px; line-height: 1.5; margin-top: 8px; }

/* Tap-Card Preview multi-variant stack (v200) */
.tap-preview-stack { display: flex; flex-direction: column; gap: 20px; margin-top: 8px; }
.tap-preview-variant-label {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--gold, #f5c518);
  font-weight: 700;
  padding-left: 4px;
  border-left: 3px solid var(--gold, #f5c518);
  padding-left: 8px;
}

/* ============================================================
 * Economy Live-Simulator (v202) — interactive XP+Belts demo
 * Sliders, corner picks, lock-in, win/lose flash. Demo-only.
 * ============================================================ */
.econ-sim-section {
  margin: 20px 0 12px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(245,197,24,.06), rgba(14,14,20,.5));
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 14px;
}
.econ-sim-title {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 15px;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold, #f5c518);
  margin-bottom: 14px;
}
.econ-sim-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 14px;
}
.econ-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 10px;
  text-align: center;
}
.econ-stat-lbl {
  font-size: 10px; letter-spacing: .12em;
  color: #8a8a92; text-transform: uppercase; font-weight: 600;
}
.econ-stat-val {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 22px; font-weight: 700;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.econ-stat-xp .econ-stat-val { color: #6ee0a8; }
.econ-stat-belts .econ-stat-val { color: var(--gold, #f5c518); }
.econ-stat-points .econ-stat-val { color: #fff; }
.econ-sim-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.econ-sim-btn {
  flex: 1; min-width: 140px;
  padding: 10px 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #e0e0e8; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.econ-sim-btn:hover { background: rgba(245,197,24,.1); border-color: rgba(245,197,24,.4); }
.econ-sim-btn:active { transform: scale(.98); }
.econ-sim-earn { color: #6ee0a8; }
.econ-sim-convert { color: var(--gold, #f5c518); }
.econ-sim-reset { color: #b0b0b8; flex: 0 0 auto; min-width: 80px; }

.econ-sim-match {
  background: linear-gradient(180deg, rgba(28,28,34,.7), rgba(14,14,20,.7));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 14px;
  position: relative; overflow: hidden;
}
.econ-sim-match-head {
  font-family: var(--font-head, "Oswald", sans-serif);
  text-align: center; font-size: 12px; font-weight: 700;
  color: var(--gold, #f5c518); letter-spacing: .08em;
  margin-bottom: 10px;
}
.econ-sim-match-pickers {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 10px; align-items: center;
  margin-bottom: 14px;
}
.econ-sim-corner {
  padding: 14px 10px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  text-align: center; color: #e0e0e8; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.econ-sim-corner:hover { transform: translateY(-1px); }
.econ-sim-corner[data-sim-side="red"] { border-color: rgba(239,68,68,.5); }
.econ-sim-corner[data-sim-side="blue"] { border-color: rgba(58,141,255,.5); }
.econ-sim-corner.picked[data-sim-side="red"] {
  background: rgba(239,68,68,.18);
  border-color: var(--accent, #16a34a);
  box-shadow: 0 0 0 2px rgba(239,68,68,.4) inset;
}
.econ-sim-corner.picked[data-sim-side="blue"] {
  background: rgba(58,141,255,.18);
  border-color: #3a8dff;
  box-shadow: 0 0 0 2px rgba(58,141,255,.4) inset;
}
.econ-sim-corner-name {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 16px; letter-spacing: .03em;
}
.econ-sim-corner-tag {
  font-size: 10px; color: #8a8a92; letter-spacing: .12em; margin-top: 2px;
}
.econ-sim-vs {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px;
  color: var(--gold, #f5c518); letter-spacing: .08em;
}

.econ-sim-belt-row {
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px; padding: 10px; margin-bottom: 12px;
}
.econ-sim-belt-lbl {
  font-size: 11px; color: #b0b0b8; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 600;
}
.econ-sim-belt-stars { display: flex; gap: 6px; flex-wrap: wrap; }
.econ-sim-belt-star {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: #5a5a64;
  font-size: 18px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, transform .1s ease;
}
.econ-sim-belt-star.on { background: rgba(245,197,24,.2); border-color: var(--gold, #f5c518); color: var(--gold, #f5c518); }
.econ-sim-belt-star.selected {
  box-shadow: 0 0 0 2px var(--gold, #f5c518) inset;
  transform: translateY(-1px);
}
.econ-sim-belt-star.disabled,
.econ-sim-belt-star:disabled {
  opacity: .35; cursor: not-allowed;
}
.econ-sim-belt-status {
  margin-top: 8px;
  font-size: 11.5px; color: var(--gold, #f5c518); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.econ-sim-locks { display: flex; flex-direction: column; gap: 10px; }
.econ-sim-lock {
  padding: 12px;
  background: linear-gradient(135deg, var(--accent, #16a34a), var(--accent-2, #34d399));
  color: #fff; border: 0; border-radius: 10px;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px; letter-spacing: .04em;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease;
}
.econ-sim-lock:disabled { opacity: .35; cursor: not-allowed; }
.econ-sim-lock.locked {
  background: rgba(80, 200, 120, .15);
  color: #6ee0a8;
  border: 1px solid #6ee0a8;
}
.econ-sim-outcome-row { display: flex; gap: 8px; }
.econ-sim-result {
  flex: 1; padding: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  border-radius: 10px; cursor: pointer;
  font-size: 12px; font-weight: 600;
  color: #c0c0c8;
  transition: background .15s ease, color .15s ease;
}
.econ-sim-result:disabled { opacity: .4; cursor: not-allowed; }
.econ-sim-result-win:not(:disabled):hover { background: rgba(80, 200, 120, .15); color: #6ee0a8; border-color: #6ee0a8; }
.econ-sim-result-lose:not(:disabled):hover { background: rgba(232, 19, 43, .15); color: var(--accent, #16a34a); border-color: var(--accent, #16a34a); }

.econ-sim-flash {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  padding: 14px 22px;
  border-radius: 14px;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 16px;
  letter-spacing: .04em;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  white-space: nowrap;
  z-index: 5;
}
.econ-sim-flash.good { opacity: 1; background: rgba(110, 224, 168, .25); color: #6ee0a8; border: 1px solid #6ee0a8; }
.econ-sim-flash.gold { opacity: 1; background: rgba(245, 197, 24, .25); color: var(--gold, #f5c518); border: 1px solid var(--gold, #f5c518); }
.econ-sim-flash.warn { opacity: 1; background: rgba(255, 180, 80, .2); color: #ffb050; border: 1px solid #ffb050; }
.econ-sim-flash.win  { opacity: 1; background: rgba(110, 224, 168, .35); color: #6ee0a8; border: 2px solid #6ee0a8; box-shadow: 0 0 30px rgba(110,224,168,.5); animation: simWinPulse .8s ease-out 2; font-size: 18px; }
.econ-sim-flash.loss { opacity: 1; background: rgba(232, 19, 43, .35); color: #fff; border: 2px solid var(--accent, #16a34a); animation: simLoseShake .5s ease-in-out 2; font-size: 18px; }
@keyframes simWinPulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.06); } }
@keyframes simLoseShake { 0%,100% { transform: translate(-50%,-50%); } 25% { transform: translate(-54%,-50%); } 75% { transform: translate(-46%,-50%); } }

.econ-sim-log {
  margin-top: 14px;
  display: flex; flex-direction: column-reverse; gap: 4px;
  max-height: 132px; overflow-y: auto;
  font-size: 11.5px; color: #a0a0a8;
}
.econ-sim-log-row {
  padding: 4px 8px; border-radius: 6px;
  background: rgba(255,255,255,.03);
  border-left: 2px solid rgba(255,255,255,.1);
  animation: simLogIn .25s ease-out;
}
.econ-sim-log-row.good { border-left-color: #6ee0a8; }
.econ-sim-log-row.gold { border-left-color: var(--gold, #f5c518); }
.econ-sim-log-row.bad { border-left-color: var(--accent, #16a34a); }
@keyframes simLogIn { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } }

/* Horde badge (v203) — sits on the side opposite a Lone Wolf, mirrors
 * the orange-tone of the wolf badge but in cool teal so the dichotomy
 * reads instantly: solo orange vs pack teal. */
.tap-horde {
  font-size: 9.5px;
  color: #5dd0c8;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  background: rgba(93,208,200,.12);
  border: 1px solid rgba(93,208,200,.35);
  padding: 2px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.tap-side.is-horde {
  border-color: rgba(93,208,200,.6);
  box-shadow: 0 0 0 1px rgba(93,208,200,.35) inset;
}

/* Sim v203 additions — Scenario toggle, available-resources header,
 * inline convert popup that fires when belt-stake exceeds available. */
.econ-sim-scenario {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-bottom: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  font-size: 12px; color: #c8c8d0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.econ-sim-scenario:has(input:checked) {
  background: rgba(255,180,80,.10);
  border-color: rgba(255,180,80,.4);
  color: #ffcb88;
}
.econ-sim-scenario input { accent-color: var(--gold, #f5c518); }

.econ-sim-belt-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; gap: 10px; flex-wrap: wrap;
}
.econ-sim-belt-avail {
  font-size: 11px; color: #a0a0a8;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.econ-sim-belt-avail b { color: var(--gold, #f5c518); }

.econ-sim-belt-stars-wrap {
  position: relative;
  display: flex; align-items: center;
}
.econ-sim-belt-star.convert-hint {
  border-color: rgba(245,197,24,.4);
  background: rgba(245,197,24,.06);
  color: var(--gold, #f5c518);
  position: relative;
}
.econ-sim-belt-star.convert-hint::after {
  content: "↑";
  position: absolute; top: -2px; right: -2px;
  font-size: 10px;
  color: var(--gold, #f5c518);
}

.econ-sim-convert-popup {
  margin-left: 12px;
  padding: 8px 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(245,197,24,.08));
  border: 1px solid var(--gold, #f5c518);
  border-radius: 10px;
  display: flex; align-items: center; gap: 10px;
  animation: convPopIn .2s ease-out;
  white-space: nowrap;
}
.econ-sim-convert-popup.hidden { display: none; }
.econ-sim-convert-msg {
  font-size: 12px; color: var(--gold, #f5c518); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.econ-sim-convert-btn {
  padding: 6px 12px;
  background: var(--gold, #f5c518);
  color: #0e0e14;
  border: 0; border-radius: 8px;
  font-weight: 700; font-size: 12px; cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.econ-sim-convert-btn:hover { transform: scale(1.04); }
.econ-sim-convert-btn:active { transform: scale(.98); }
@keyframes convPopIn {
  0% { opacity: 0; transform: translateX(-6px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Mobile: stack popup below stars instead of beside */
@media (max-width: 480px) {
  .econ-sim-belt-stars-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
  .econ-sim-convert-popup { margin-left: 0; justify-content: space-between; }
}

/* ============================================================
 * Lone Wolf / Horde Trigger Explainer + Story-Sim (v204)
 * ============================================================ */
.econ-trigger-section {
  margin: 20px 0;
  padding: 16px;
  background: linear-gradient(180deg, rgba(255,180,80,.06), rgba(14,14,20,.5));
  border: 1px solid rgba(255,180,80,.3);
  border-radius: 14px;
}
.econ-trigger-title {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  color: #ffb050;
  margin-bottom: 12px;
}
.econ-trigger-rules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.econ-rule {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; color: #d0d0d8; line-height: 1.4;
}
.econ-rule-num {
  flex: 0 0 22px; height: 22px; border-radius: 50%;
  background: #ffb050; color: #0e0e14;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 11px;
  font-family: var(--font-head, "Oswald", sans-serif);
}
.econ-rule b { color: #fff; }
.econ-trigger-action {
  padding: 10px;
  background: rgba(255,180,80,.08);
  border-left: 3px solid #ffb050;
  border-radius: 8px;
  font-size: 12.5px; color: #e0e0e8; line-height: 1.5;
  margin-bottom: 14px;
}
.econ-trigger-action code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px; color: #ffb050;
  background: rgba(0,0,0,.3); padding: 1px 5px; border-radius: 4px;
}
.econ-trigger-cta { display: flex; gap: 8px; flex-wrap: wrap; }
.econ-story-btn {
  flex: 1; min-width: 200px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #ffb050, #ff7a30);
  color: #fff; border: 0; border-radius: 10px;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 13px; letter-spacing: .04em;
  cursor: pointer;
  transition: transform .12s ease, opacity .12s ease;
}
.econ-story-btn:hover { transform: translateY(-1px); }
.econ-story-btn:disabled { opacity: .6; cursor: wait; }
.econ-story-reset {
  padding: 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  color: #c0c0c8; font-size: 12px; cursor: pointer;
}
.econ-story-reset.hidden { display: none; }

/* Story stage — panels stack vertically with fade-in animation */
.econ-story-stage {
  margin-top: 16px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: 540px; overflow-y: auto;
}
.story-panel {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px;
  animation: storyFade .55s cubic-bezier(.16,1,.3,1);
}
.story-panel-lock { border-color: rgba(22,163,74,.4); }
.story-panel-match { border-color: rgba(245,197,24,.4); }
.story-panel-outcome { border-color: rgba(110,224,168,.5); }
.story-panel-title {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: .08em;
  color: #ffb050; margin-bottom: 10px;
}
@keyframes storyFade {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Per-card layouts */
.story-card { font-size: 13px; line-height: 1.55; color: #e0e0e8; }
.story-line { margin-bottom: 5px; }
.story-line b { color: var(--gold, #f5c518); }
.story-members { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.story-member {
  padding: 3px 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  font-size: 11px; color: #b0b0b8;
}
.story-member-me {
  background: rgba(245,197,24,.18);
  border-color: var(--gold, #f5c518);
  color: var(--gold, #f5c518); font-weight: 700;
}

.story-split { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.story-split-side {
  background: rgba(255,255,255,.04);
  border-radius: 10px; padding: 10px;
}
.story-split-red { border: 1px solid rgba(239,68,68,.4); }
.story-split-blue { border: 1px solid rgba(58,141,255,.4); }
.story-team {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px; margin-bottom: 8px;
  letter-spacing: .04em;
}
.story-pickers { display: flex; flex-direction: column; gap: 4px; }
.story-chip {
  font-size: 10.5px;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  padding: 3px 7px;
  color: #c0c0c8;
}
.story-chip-me {
  background: rgba(245,197,24,.18);
  border-color: var(--gold, #f5c518);
  color: var(--gold, #f5c518); font-weight: 700;
}
.story-count {
  margin-top: 8px; font-size: 11px;
  color: #8a8a92; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 600;
}
.story-vs {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px;
  color: var(--gold, #f5c518);
  align-self: center;
}
.story-hint {
  margin-top: 10px; font-size: 11.5px; color: #ffb050;
  background: rgba(255,180,80,.08);
  border-radius: 6px; padding: 6px 8px;
}
.story-hint b { color: #fff; }

/* Lock panel */
.story-trigger {
  background: rgba(22,163,74,.12);
  border: 1px solid rgba(22,163,74,.4);
  border-radius: 8px;
  padding: 8px;
  font-size: 11.5px;
  color: #ff8a8a;
  margin-bottom: 12px;
  line-height: 1.5;
}
.story-trigger b { color: #fff; }
.story-trigger code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; color: var(--accent, #16a34a);
  background: rgba(0,0,0,.4); padding: 1px 4px; border-radius: 3px;
}
.story-tap-card {
  background: linear-gradient(180deg, rgba(28,28,34,.95), rgba(14,14,20,.95));
  border: 2px solid var(--gold, #f5c518);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
}
.story-tap-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.story-tap-badge {
  background: linear-gradient(135deg, var(--accent, #16a34a), var(--accent-2, #34d399));
  color: #fff;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 11px;
  letter-spacing: .1em;
  padding: 3px 8px; border-radius: 999px;
}
.story-tap-subtitle {
  color: var(--gold, #f5c518);
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.story-tap-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.story-tap-side {
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px; text-align: center;
}
.story-tap-horde { border-color: rgba(93,208,200,.6); background: rgba(93,208,200,.06); }
.story-tap-lone { border-color: rgba(255,180,80,.6); background: rgba(255,180,80,.08); }
.story-tap-team {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 13px;
  letter-spacing: .04em;
}
.story-tap-count {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 24px;
  color: #fff;
  font-variant-numeric: tabular-nums;
  margin: 4px 0;
}
.story-tap-horde .story-tap-count { color: #5dd0c8; }
.story-tap-lone .story-tap-count { color: #ffb050; }
.story-tap-tag {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 999px;
  display: inline-block;
  margin-top: 4px;
}
.story-tap-horde .story-tap-tag {
  background: rgba(93,208,200,.18);
  color: #5dd0c8;
  border: 1px solid #5dd0c8;
}
.story-tap-lone .story-tap-tag {
  background: rgba(255,180,80,.18);
  color: #ffb050;
  border: 1px solid #ffb050;
}
.story-tap-vs {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 14px;
  color: var(--gold, #f5c518);
  text-align: center;
}

/* Match panel */
.story-clock {
  text-align: center;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 12px; color: #8a8a92;
  letter-spacing: .12em; margin-bottom: 10px;
}
.story-headline {
  text-align: center;
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 18px; font-weight: 700;
  color: var(--gold, #f5c518); letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.story-headline b { color: #fff; }
.story-sub {
  text-align: center; color: #b0b0b8; font-size: 12px; margin-bottom: 12px;
}
.story-shocked { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.story-chip-red {
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.4);
  color: #ff8a8a;
}

/* Outcome panel */
.story-payoff-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 12px;
}
.story-payoff {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 10px; text-align: center;
}
.story-payoff-bonus { border-color: var(--gold, #f5c518); background: rgba(245,197,24,.08); }
.story-payoff-wolf { border-color: #ffb050; background: rgba(255,180,80,.1); }
.story-payoff-lbl { font-size: 10px; color: #8a8a92; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.story-payoff-val {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 18px; font-weight: 700; color: #fff;
}
.story-payoff-bonus .story-payoff-val { color: var(--gold, #f5c518); }
.story-payoff-wolf .story-payoff-val { color: #ffb050; }
.story-belts-back {
  padding: 8px;
  background: rgba(110,224,168,.1);
  border-left: 3px solid #6ee0a8;
  border-radius: 6px;
  font-size: 12px; color: #6ee0a8;
  margin-bottom: 12px;
}
.story-belts-back b { color: #fff; }
.story-group-reactions {
  font-size: 12px; color: #b0b0b8; line-height: 1.7;
}
.story-chip-react {
  display: inline-block; margin: 2px;
  background: rgba(58,141,255,.15);
  border: 1px solid rgba(58,141,255,.4);
  color: #88baff;
}
.story-final-line {
  margin-top: 12px;
  text-align: center;
  font-style: italic;
  font-size: 12.5px;
  color: var(--gold, #f5c518);
  padding: 10px;
  background: rgba(245,197,24,.06);
  border-radius: 8px;
}
.story-final-line b { color: #fff; }

/* Tap-Card explainer header (v206) — sits above the 3 variants in the
 * Demo Lab Tap-Card item. Walks investors through "what this does" +
 * the meaning of each badge/state in 5 lines. */
.tap-explain {
  margin: 8px 0 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(245,197,24,.06), rgba(14,14,20,.4));
  border: 1px solid rgba(245,197,24,.25);
  border-radius: 12px;
}
.tap-explain-title {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold, #f5c518);
  margin-bottom: 10px;
}
.tap-explain-line {
  font-size: 12.5px; color: #d0d0d8;
  line-height: 1.5; margin-bottom: 6px;
}
.tap-explain-line b { color: #fff; }
.tap-explain-states {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 10px;
}
.tap-explain-state {
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: #c0c0c8; line-height: 1.4;
}
.tap-explain-state b { color: #fff; }
.tap-explain-tag {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  font-family: var(--font-head, "Oswald", sans-serif);
  white-space: nowrap;
}
.tap-explain-wolf {
  background: rgba(255,180,80,.14);
  color: #ffb050;
  border: 1px solid rgba(255,180,80,.45);
}
.tap-explain-horde {
  background: rgba(93,208,200,.14);
  color: #5dd0c8;
  border: 1px solid rgba(93,208,200,.45);
}
.tap-explain-gold {
  background: rgba(245,197,24,.14);
  color: var(--gold, #f5c518);
  border: 1px solid rgba(245,197,24,.45);
}
.tap-explain-method {
  background: rgba(255,255,255,.06);
  color: #c0c0c8;
  border: 1px solid rgba(255,255,255,.18);
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 10px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.tap-explain-over {
  background: rgba(58,141,255,.14);
  color: #88baff;
  border: 1px solid rgba(58,141,255,.45);
}

/* Belt-icon adjustments inside the Economy modal (v206) — SVG replaces 🥋
 * emoji where it carries weight. Inline use stays as emoji. */
.demo-lab-item .demo-lab-icon .belt-ic { display: block; }
.demo-econ-emoji .belt-ic { display: block; margin: 0 auto; }
.econ-stat-belt-ic { display: inline-block; vertical-align: -2px; margin-right: 3px; }
.econ-stat-belt-ic .belt-ic { display: block; }
.econ-sim-belt-star .belt-ic {
  display: block;
  pointer-events: none;
}
/* v213: inline belt SVG inside button labels, story chips, and dynamic
 * status text. Replaces 🥋 emoji wherever it appears in user-visible UI.
 * vertical-align tuned so the belt sits on text baseline like an emoji. */
.btn-belt { display: inline-block; vertical-align: -3px; line-height: 1; }
.btn-belt .belt-ic { display: inline-block; vertical-align: top; }
/* Demo Lab financing-model card — larger belt as the card hero icon. */
.demo-fin-icon .belt-ic { display: block; margin: 0 auto; }

/* =====================================================================
 * v214: LIVE UFC NIGHT SIMULATOR — investor showcase
 * Phone-frame mockup that auto-plays through Pre-Card → Prelims → Co-Main
 * → Tap-Card → Main Event → Alpha Lone Wolf → Summary Push.
 * ===================================================================== */
.live-night-ov { overflow-y: auto; }
.live-night-modal { max-width: 720px; margin: 24px auto; background: var(--bg);
  border-radius: 18px; padding: 18px 18px 16px; position: relative;
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.demo-lab-hero { background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(245,197,24,.08)) !important;
  border: 1px solid rgba(22,163,74,.3) !important; }
.demo-lab-hero .demo-lab-title { color: var(--accent) !important; }
.lns-stage-title { font-weight: 800; font-size: 14px; color: var(--txt); margin-top: 8px; }
.lns-stage-sub { font-size: 12px; color: var(--txt-dim); margin: 4px 0 14px; min-height: 32px; }
.lns-frame-wrap { display: flex; justify-content: center; margin-bottom: 14px; }
.lns-phone { width: 340px; min-height: 540px; background: #0c0c12; border-radius: 28px;
  border: 6px solid #1a1a22; padding: 14px 12px 16px; position: relative; overflow: hidden;
  box-shadow: 0 24px 50px rgba(0,0,0,.5); display: flex; flex-direction: column; }
.lns-phone-statusbar { display: flex; justify-content: space-between; color: #888; font-size: 11px;
  font-weight: 700; padding: 0 6px 8px; border-bottom: 1px solid rgba(255,255,255,.05); }
.lns-phone-meta { color: #6ee0a8; }
.lns-notif-stack { position: absolute; top: 32px; left: 8px; right: 8px; z-index: 5;
  pointer-events: none; display: flex; flex-direction: column; gap: 4px; }
.lns-notif { background: rgba(38,38,48,.95); backdrop-filter: blur(10px);
  border-radius: 12px; padding: 8px 10px; color: #fff; font-size: 11px;
  animation: lnsNotifIn .35s ease-out; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.lns-notif-out { animation: lnsNotifOut .35s ease-in forwards; }
.lns-notif-app { font-size: 9px; color: #9aa0a8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }
.lns-notif-title { font-weight: 800; font-size: 12px; margin-bottom: 2px; }
.lns-notif-body { font-size: 11px; line-height: 1.35; color: #d8d8e0; white-space: pre-line; }
@keyframes lnsNotifIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lnsNotifOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
.lns-app-body { flex: none; margin-top: 8px; min-height: 220px; }
.lns-screen { background: #15151c; border-radius: 14px; padding: 14px; color: #d8d8e0; font-size: 12px;
  border: 1px solid rgba(255,255,255,.05); }
.lns-hero { text-align: center; }
.lns-hero-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 9px;
  font-weight: 800; letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; margin-bottom: 8px; }
.lns-hero-comain { background: linear-gradient(135deg, var(--accent-2), var(--accent)); }
.lns-hero-main { background: linear-gradient(135deg, #f5c518, var(--accent)); }
.lns-hero-title { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #fff;
  letter-spacing: .5px; margin-bottom: 4px; }
.lns-hero-meta { font-size: 10px; color: #888; margin-bottom: 10px; }
.lns-pick-summary { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; margin-bottom: 8px; }
.lns-pick-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0;
  font-size: 11px; gap: 8px; border-bottom: 1px solid rgba(255,255,255,.04); }
.lns-pick-row:last-child { border-bottom: none; }
.lns-pick-row b { color: #fff; }
.lns-stake { font-weight: 700; color: #f5c518; font-size: 11px; }
.lns-locked-badge { display: inline-block; background: rgba(110,224,168,.15); color: #6ee0a8;
  font-weight: 700; font-size: 11px; padding: 5px 10px; border-radius: 6px; margin-top: 4px; }
.lns-status-bar { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700;
  color: #fff; margin-bottom: 10px; }
.lns-live-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
  animation: lnsLivePulse 1.2s ease-in-out infinite; }
@keyframes lnsLivePulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.lns-match-card { background: rgba(0,0,0,.3); border-radius: 8px; padding: 10px; }
.lns-match-name { font-weight: 800; color: #fff; margin-bottom: 4px; }
.lns-match-pick { font-size: 11px; color: #aaa; }
.lns-match-pick b { color: var(--accent); }
.lns-result-badge { display: inline-block; background: rgba(245,197,24,.15); color: #f5c518;
  font-weight: 800; font-size: 9px; letter-spacing: 1px; padding: 4px 8px; border-radius: 4px; margin-bottom: 8px; }
.lns-result-alpha-badge { background: linear-gradient(135deg, #f5c518, var(--accent)); color: #fff; }
.lns-result-headline { font-family: var(--font-head); font-weight: 800; font-size: 15px; color: #fff; margin-bottom: 4px; }
.lns-result-method { font-size: 11px; color: #aaa; margin-bottom: 8px; }
.lns-result-payoff { font-weight: 700; font-size: 12px; padding: 7px 9px; border-radius: 8px; }
.lns-good { background: rgba(110,224,168,.15); color: #6ee0a8; }
.lns-gold { background: linear-gradient(135deg, rgba(245,197,24,.2), rgba(22,163,74,.15));
  color: #f5c518; border: 1px solid rgba(245,197,24,.3); }
.lns-tapcard-inline { background: rgba(0,0,0,.5); border-radius: 10px; padding: 10px; margin-top: 10px;
  border: 1px solid rgba(22,163,74,.3); }
.lns-tapcard-alpha { border-color: #f5c518; box-shadow: 0 0 14px rgba(245,197,24,.3); }
.lns-tc-head { display: flex; gap: 6px; margin-bottom: 8px; }
.lns-tc-badge { background: var(--accent); color: #fff; font-size: 9px; font-weight: 800;
  padding: 3px 6px; border-radius: 4px; letter-spacing: 1px; }
.lns-tc-sub { font-size: 9px; color: #888; font-weight: 700; align-self: center; }
.lns-tc-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.lns-tc-side { text-align: center; padding: 8px 4px; border-radius: 8px; }
.lns-tc-pack { background: rgba(58,58,72,.4); }
.lns-tc-lone { background: rgba(110,224,168,.12); }
.lns-tc-alpha { background: linear-gradient(135deg, rgba(245,197,24,.2), rgba(22,163,74,.12));
  box-shadow: 0 0 12px rgba(245,197,24,.25); }
.lns-tc-side b { display: block; font-size: 11px; color: #fff; margin-bottom: 2px; }
.lns-tc-count { display: block; font-size: 20px; font-weight: 800; color: #fff; }
.lns-tc-tag { display: block; font-size: 8px; font-weight: 700; color: #aaa; letter-spacing: .5px; margin-top: 2px; }
.lns-tc-alpha .lns-tc-tag { color: #f5c518; }
.lns-tc-vs { font-size: 11px; font-weight: 800; color: #666; }
.lns-mini-board { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; }
.lns-mb-row { display: grid; grid-template-columns: 60px 1fr 50px; gap: 6px; padding: 4px 0;
  font-size: 11px; border-bottom: 1px solid rgba(255,255,255,.04); }
.lns-mb-row:last-child { border-bottom: none; }
.lns-mb-row b { color: #fff; text-align: center; }
.lns-mb-pts { color: var(--accent) !important; }
.lns-score-card { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; }
.lns-sc-row { display: grid; grid-template-columns: 90px 1fr; gap: 8px; padding: 6px 0;
  font-size: 11px; border-bottom: 1px solid rgba(255,255,255,.04); align-items: center; }
.lns-sc-row:last-child { border-bottom: none; }
.lns-sc-row b { color: #fff; font-family: var(--font-mono, monospace); font-size: 10px; }
.lns-sc-leading { background: rgba(110,224,168,.06); border-radius: 6px; padding-left: 4px; }
.lns-pick-stake-banner { background: rgba(245,197,24,.12); color: #f5c518; padding: 8px 10px;
  border-radius: 8px; font-size: 11px; margin-top: 8px; border: 1px solid rgba(245,197,24,.25); }
.lns-pick-stake-banner b { color: #fff; }
.lns-xp-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(110,224,168,.08));
  border-radius: 10px; border: 1px solid rgba(245,197,24,.3); margin-bottom: 12px; }
.lns-xp-lbl { font-size: 10px; color: #aaa; }
.lns-xp-val { font-weight: 800; color: #f5c518; font-size: 14px; }
.lns-ranking-jump { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px; }
.lns-rj-row { display: flex; justify-content: space-between; align-items: center; padding: 6px;
  font-size: 12px; }
.lns-rj-was { color: #666; }
.lns-rj-now { color: #f5c518; font-weight: 700; }
.lns-arrow { color: #6ee0a8; font-size: 16px; }
.lns-medal { font-size: 18px; }
.lns-summary-hero { text-align: center; margin-bottom: 12px; }
.lns-sh-badge { display: inline-block; background: linear-gradient(135deg, #f5c518, var(--accent));
  color: #fff; font-weight: 800; font-size: 10px; letter-spacing: 2px; padding: 5px 10px;
  border-radius: 4px; margin-bottom: 6px; }
.lns-sh-title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 14px; }
.lns-summary-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; }
.lns-sst { background: rgba(0,0,0,.3); border-radius: 8px; padding: 8px 4px; text-align: center; }
.lns-sst b { display: block; color: #f5c518; font-weight: 800; font-size: 16px; }
.lns-sst span { display: block; font-size: 9px; color: #aaa; margin-top: 2px; }
.lns-summary-quote { font-size: 11px; color: #d8d8e0; font-style: italic; text-align: center;
  padding: 8px 10px; background: rgba(22,163,74,.08); border-radius: 8px;
  border-left: 3px solid var(--accent); }
/* Chat block below the app-body */
.lns-chat { margin-top: 10px; background: rgba(0,0,0,.25); border-radius: 12px; padding: 10px;
  max-height: 130px; overflow-y: auto; font-size: 11px; }
.lns-chat-msg { padding: 4px 0; line-height: 1.4; animation: lnsChatIn .25s ease-out; color: #d8d8e0; }
.lns-chat-msg b { color: #f5c518; }
.lns-cm-me { color: #6ee0a8; }
.lns-cm-me b { color: #6ee0a8; }
.lns-cm-loud { color: #fff; font-weight: 700; }
.lns-cm-loud b { color: var(--accent); }
.lns-chat-tapcard { background: rgba(22,163,74,.15); color: #fff; font-weight: 700; padding: 6px 8px;
  border-radius: 6px; margin: 4px 0; border-left: 3px solid var(--accent); font-size: 11px;
  animation: lnsChatIn .25s ease-out; }
@keyframes lnsChatIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
/* Controls */
.lns-controls { margin-top: 10px; }
.lns-progress { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; }
.lns-dot { width: 18px; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer;
  transition: background .2s, width .2s; }
.lns-dot-on { background: var(--accent); width: 28px; }
.lns-dot-done { background: var(--accent-2); opacity: .5; }
.lns-control-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.lns-ctrl { background: var(--card); color: var(--txt); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.lns-ctrl:hover { background: var(--card-2); }
.lns-playpause { background: var(--accent); color: #fff; border-color: var(--accent); }

/* =====================================================================
 * v214: SPOILER MODE REVEAL SIM
 * ===================================================================== */
.spoiler-sim-ov { overflow-y: auto; }
.spoiler-sim-modal { max-width: 640px; margin: 24px auto; background: var(--bg);
  border-radius: 18px; padding: 18px 18px 16px; position: relative;
  border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.ssim-stage-title { font-weight: 800; font-size: 14px; color: var(--txt); margin-top: 8px; }
.ssim-stage-sub { font-size: 12px; color: var(--txt-dim); margin: 4px 0 14px; min-height: 32px; }
.ssim-frame { background: #0c0c12; border-radius: 16px; padding: 16px; min-height: 360px;
  border: 1px solid var(--line); }
.ssim-screen { color: #d8d8e0; }
.ssim-toggle-row { display: flex; justify-content: space-between; align-items: center;
  padding: 10px; background: #15151c; border-radius: 10px; margin-bottom: 10px;
  font-size: 12px; color: #d8d8e0; }
.ssim-toggle { font-weight: 800; padding: 4px 10px; border-radius: 4px; font-size: 11px; }
.ssim-toggle-on { background: rgba(110,224,168,.15); color: #6ee0a8; }
.ssim-toggle-off { background: rgba(22,163,74,.15); color: var(--accent); }
.ssim-muted { font-size: 11px; color: #888; padding: 8px; }
.ssim-push { background: rgba(38,38,48,.95); border-radius: 12px; padding: 10px 12px;
  margin-bottom: 8px; color: #fff; font-size: 11px; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.ssim-push-muted { opacity: .55; filter: blur(.4px); }
.ssim-push-reveal { animation: ssimReveal .5s ease-out backwards; }
.ssim-push-alpha { background: linear-gradient(135deg, rgba(245,197,24,.2), rgba(22,163,74,.15));
  border: 1px solid rgba(245,197,24,.3); }
.ssim-push-summary { background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(110,224,168,.1));
  border: 1px solid rgba(245,197,24,.25); }
.ssim-push-app { font-size: 9px; color: #9aa0a8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.ssim-push-title { font-weight: 800; margin-bottom: 3px; }
.ssim-push-body { color: #d8d8e0; line-height: 1.4; white-space: pre-line; }
@keyframes ssimReveal { from { opacity: 0; transform: translateY(-12px) scale(.95); }
  to { opacity: 1; transform: translateY(0) scale(1); } }
.ssim-event-card { background: #15151c; border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.ssim-event-name { font-weight: 800; color: #fff; font-size: 12px; margin-bottom: 8px; }
.ssim-pick-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 11px;
  border-bottom: 1px solid rgba(255,255,255,.05); color: #d8d8e0; }
.ssim-pick-row:last-child { border-bottom: none; }
.ssim-blur { filter: blur(5px); opacity: .55; user-select: none; }
.ssim-pick-revealed { animation: ssimReveal .5s ease-out backwards; }
.ssim-good { color: #6ee0a8; font-weight: 700; }
.ssim-bad { color: var(--accent); font-weight: 700; }
.ssim-cta { padding: 10px; background: rgba(245,197,24,.1); border-radius: 8px;
  border-left: 3px solid #f5c518; font-size: 11px; color: #d8d8e0; }
.ssim-cta-msg { font-weight: 700; }
.ssim-reveal-stack { padding-top: 6px; }
.ssim-chat { background: #15151c; border-radius: 12px; padding: 10px; }
.ssim-cm { padding: 6px 0; font-size: 11px; line-height: 1.4; border-bottom: 1px solid rgba(255,255,255,.04); }
.ssim-cm:last-child { border-bottom: none; }
.ssim-cm-them { color: #aaa; }
.ssim-cm-them b { color: #f5c518; }
.ssim-cm-me { color: #6ee0a8; font-weight: 700; }
.ssim-cm-me b { color: #6ee0a8; }
.ssim-controls { margin-top: 14px; }
.ssim-progress { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; }
.ssim-dot { width: 22px; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer; }
.ssim-dot-on { background: var(--accent); width: 32px; }
.ssim-dot-done { background: var(--accent-2); opacity: .5; }
.ssim-control-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.ssim-ctrl { background: var(--card); color: var(--txt); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.ssim-playpause { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Lone-Wolf scenario help text — sits above the checkbox in the sim,
 * explains the connection back to the Tap-Card so the toggle isn't
 * a magic switch out of nowhere. */
.econ-sim-scenario-help {
  font-size: 12px; line-height: 1.5;
  color: #b0b0b8;
  padding: 10px 12px;
  background: rgba(255,180,80,.06);
  border-left: 3px solid #ffb050;
  border-radius: 6px;
  margin-bottom: 8px;
}
.econ-sim-scenario-help b { color: #fff; }

/* ============================================================
 * v207 — Alpha Lone Wolf, Pack-Split rule box, Multi-Group note,
 * 3-tier scenario picker in the Economy sim.
 * ============================================================ */
/* Alpha tier — bigger glow on the badge + on the whole side */
.tap-lone-wolf.tap-alpha {
  background: linear-gradient(135deg, rgba(245,197,24,.25), rgba(255,180,80,.18));
  color: var(--gold, #f5c518);
  border: 1px solid var(--gold, #f5c518);
  font-weight: 800;
  letter-spacing: .12em;
  box-shadow: 0 0 12px rgba(245,197,24,.4);
}
.tap-side.is-alpha {
  border-color: var(--gold, #f5c518);
  box-shadow:
    0 0 0 1px var(--gold, #f5c518) inset,
    0 0 24px rgba(245,197,24,.3);
  animation: alphaPulse 2.4s ease-in-out infinite;
}
@keyframes alphaPulse {
  0%,100% { box-shadow: 0 0 0 1px var(--gold, #f5c518) inset, 0 0 18px rgba(245,197,24,.3); }
  50%     { box-shadow: 0 0 0 1px var(--gold, #f5c518) inset, 0 0 32px rgba(245,197,24,.55); }
}

/* Rule + multi-group boxes inside the Tap-Card explainer */
.tap-explain-rule,
.tap-explain-multigroup {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255,180,80,.06);
  border-left: 3px solid #ffb050;
  border-radius: 6px;
}
.tap-explain-multigroup {
  background: rgba(58,141,255,.06);
  border-left-color: #88baff;
}
.tap-explain-rule-head {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase;
  color: #ffb050;
  margin-bottom: 5px;
}
.tap-explain-multigroup .tap-explain-rule-head { color: #88baff; }
.tap-explain-rule-body {
  font-size: 12px; line-height: 1.5; color: #d0d0d8;
}
.tap-explain-rule-body b { color: #fff; }

/* Alpha chip in the state legend */
.tap-explain-alpha {
  background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(255,180,80,.14));
  color: var(--gold, #f5c518);
  border: 1px solid var(--gold, #f5c518);
}

/* Scenario picker (3 tier buttons) replaces the single checkbox */
.econ-sim-scenario-picker {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px; margin-bottom: 14px;
}
.econ-sim-scenario-opt {
  padding: 10px 8px;
  background: rgba(255,255,255,.04);
  border: 1.5px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #c0c0c8;
  text-align: center;
  cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .12s ease, background .12s ease, transform .1s ease;
}
.econ-sim-scenario-opt:hover { border-color: rgba(245,197,24,.4); }
.econ-sim-scenario-opt.selected {
  border-color: var(--gold, #f5c518);
  background: rgba(245,197,24,.1);
  box-shadow: 0 0 0 1px var(--gold, #f5c518) inset;
}
.econ-sim-scenario-lbl {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: #e8e8ec;
  line-height: 1.3;
}
.econ-sim-scenario-lbl small {
  display: block;
  font-family: inherit;
  font-weight: 500;
  font-size: 9.5px;
  color: #8a8a92;
  letter-spacing: .04em;
  text-transform: none;
  margin-top: 2px;
}
.econ-sim-scenario-bonus {
  font-family: var(--font-head, "Oswald", sans-serif);
  font-weight: 700; font-size: 13px;
  color: var(--gold, #f5c518);
  font-variant-numeric: tabular-nums;
}
.econ-sim-scenario-opt[data-sim-scenario="none"] .econ-sim-scenario-bonus { color: #8a8a92; }
@media (max-width: 480px) {
  .econ-sim-scenario-picker { grid-template-columns: 1fr; }
}

/* =====================================================================
 * v215: SHARED DEMO-SIM FRAMEWORK
 * Used by Pick Flow, Group Chat, Onboarding, Rankings, Profile, i18n.
 * Each sim wraps its specific content; framework provides modal shell,
 * stage title/sub, progress dots, prev/play-pause/next/restart controls.
 * ===================================================================== */
.demo-sim-ov, .picksim-ov, .chatsim-ov, .onsim-ov, .ranksim-ov, .prosim-ov, .lsim-ov { overflow-y: auto; }
.demo-sim-modal, .picksim-modal, .chatsim-modal, .onsim-modal, .ranksim-modal, .prosim-modal, .lsim-modal {
  max-width: 640px; margin: 24px auto; background: var(--bg); border-radius: 18px;
  padding: 18px 18px 16px; position: relative; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.dsim-stage-title { font-weight: 800; font-size: 14px; color: var(--txt); margin-top: 8px; }
.dsim-stage-sub { font-size: 12px; color: var(--txt-dim); margin: 4px 0 14px; min-height: 32px; }
.dsim-body { background: #0c0c12; border-radius: 16px; padding: 16px; min-height: 380px;
  border: 1px solid var(--line); position: relative; overflow: hidden; }
.dsim-controls { margin-top: 12px; }
.dsim-progress { display: flex; gap: 4px; justify-content: center; margin-bottom: 10px; flex-wrap: wrap; }
.dsim-dot { width: 20px; height: 4px; background: var(--line); border-radius: 2px; cursor: pointer;
  transition: background .2s, width .2s; }
.dsim-dot-on { background: var(--accent); width: 30px; }
.dsim-dot-done { background: var(--accent-2); opacity: .5; }
.dsim-control-row { display: flex; gap: 6px; justify-content: center; margin-bottom: 10px; }
.dsim-ctrl { background: var(--card); color: var(--txt); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.dsim-ctrl:hover { background: var(--card-2); }
.dsim-playpause { background: var(--accent); color: #fff; border-color: var(--accent); }

/* =====================================================================
 * 🎯 PICK FLOW SIM
 * ===================================================================== */
.psim-phone { color: #d8d8e0; font-size: 12px; max-width: 360px; margin: 0 auto; }
.psim-header { font-size: 10px; font-weight: 800; color: var(--accent); letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 10px; text-align: center; }
.psim-match-card { background: #15151c; border-radius: 14px; padding: 16px; border: 1px solid rgba(255,255,255,.05); }
.psim-fc-active { border-color: rgba(245,197,24,.3); box-shadow: 0 0 14px rgba(245,197,24,.1); }
.psim-fc-swiping { animation: psimSwipeIn .5s ease-out; }
@keyframes psimSwipeIn { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.psim-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 12px; }
.psim-corner { text-align: center; padding: 10px 6px; border-radius: 10px; transition: all .3s; }
.psim-red { background: linear-gradient(135deg, rgba(239,68,68,.15), rgba(255,90,31,.08)); }
.psim-blue { background: linear-gradient(135deg, rgba(59,130,246,.15), rgba(96,165,250,.08)); }
.psim-dimmed { opacity: .4; }
.psim-active { box-shadow: 0 0 16px rgba(245,197,24,.4); }
.psim-photo { font-size: 32px; margin-bottom: 4px; }
.psim-pulse { animation: psimPulse 1.4s ease-in-out infinite; }
@keyframes psimPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.psim-name { font-weight: 800; color: #fff; font-size: 13px; }
.psim-record { font-size: 10px; color: #888; margin-top: 2px; }
.psim-odds { font-weight: 800; color: #f5c518; margin-top: 4px; }
.psim-tag { display: inline-block; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800;
  padding: 2px 6px; border-radius: 4px; margin-top: 4px; letter-spacing: .5px; }
.psim-vs { font-weight: 800; color: #666; font-size: 14px; }
.psim-hint { text-align: center; font-size: 11px; color: #888; padding: 10px 0; }
.psim-method-picker, .psim-round-picker, .psim-belt-picker { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.05); }
.psim-method-lbl, .psim-round-lbl, .psim-belt-lbl { font-size: 10px; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .5px; }
.psim-method-row, .psim-round-row { display: flex; gap: 6px; }
.psim-method, .psim-round { flex: 1; background: rgba(255,255,255,.04); color: #d8d8e0; border: 1px solid rgba(255,255,255,.06);
  padding: 8px; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.psim-method-on, .psim-round-on, .psim-belt-on { background: var(--accent); color: #fff; border-color: var(--accent);
  box-shadow: 0 0 10px rgba(22,163,74,.4); }
.psim-progress-track { display: flex; gap: 6px; padding-bottom: 12px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.05); justify-content: space-between; }
.psim-step { flex: 1; padding: 4px 6px; background: rgba(255,255,255,.04); border-radius: 6px; font-size: 9px;
  text-align: center; color: #666; font-weight: 700; text-transform: uppercase; }
.psim-step-done { background: rgba(110,224,168,.15); color: #6ee0a8; }
.psim-step-on { background: var(--accent); color: #fff; }
.psim-summary-mini { font-size: 11px; color: #f5c518; font-weight: 700; padding: 6px 8px;
  background: rgba(245,197,24,.08); border-radius: 6px; margin-bottom: 10px; text-align: center; }
.psim-belt-stars { display: flex; gap: 6px; justify-content: center; padding: 8px 0; }
.psim-belt { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); padding: 6px;
  border-radius: 8px; opacity: .4; cursor: pointer; }
.psim-belt.psim-belt-on { opacity: 1; background: rgba(245,197,24,.15); border-color: rgba(245,197,24,.4); }
.psim-belt-mult { font-size: 10px; color: #f5c518; text-align: center; font-weight: 700; }
.psim-lock-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: none; border-radius: 12px; font-weight: 800; font-size: 14px; letter-spacing: 1px; cursor: pointer; margin-top: 10px; }
.psim-lock-pressed { animation: psimLockFlash .8s ease-out; }
@keyframes psimLockFlash {
  0% { transform: scale(1); box-shadow: 0 0 0 rgba(245,197,24,0); }
  40% { transform: scale(.95); box-shadow: 0 0 30px rgba(245,197,24,.6); }
  100% { transform: scale(1); box-shadow: 0 0 12px rgba(245,197,24,.2); }
}
.psim-locked-glow { background: linear-gradient(135deg, rgba(110,224,168,.15), rgba(245,197,24,.08));
  padding: 14px; border-radius: 10px; text-align: center; border: 1px solid rgba(110,224,168,.3);
  animation: psimGlowIn .6s ease-out; }
@keyframes psimGlowIn { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.psim-locked-badge { color: #6ee0a8; font-weight: 800; font-size: 14px; }
.psim-locked-msg { font-size: 11px; color: #d8d8e0; margin-top: 4px; }
.psim-progress-mini { text-align: center; font-size: 11px; color: #888; margin-top: 10px; }
.psim-swipe-indicator { text-align: center; font-size: 10px; color: var(--accent); margin-bottom: 8px;
  font-weight: 700; animation: psimSwipeHint 1.4s ease-in-out infinite; }
@keyframes psimSwipeHint { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-8px); } }

/* =====================================================================
 * 💬 GROUP CHAT SIM
 * ===================================================================== */
.csim-frame { background: #15151c; border-radius: 14px; min-height: 360px; display: flex;
  flex-direction: column; color: #d8d8e0; font-size: 12px; overflow: hidden; }
.csim-head { padding: 12px; border-bottom: 1px solid rgba(255,255,255,.05); }
.csim-grp { display: flex; justify-content: space-between; align-items: center; }
.csim-grp-name { font-weight: 800; color: #fff; }
.csim-grp-meta { font-size: 10px; color: #888; }
.csim-avatars { display: flex; gap: 4px; margin-top: 8px; }
.csim-av { width: 28px; height: 28px; border-radius: 50%; background: var(--card); color: var(--txt);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; border: 2px solid #15151c; }
.csim-av-me { background: var(--accent); color: #fff; }
.csim-stream { flex: 1; padding: 10px; overflow-y: auto; max-height: 260px; }
.csim-msg { padding: 6px 0; animation: csimMsgIn .25s ease-out; }
.csim-msg-head { display: flex; gap: 6px; align-items: center; margin-bottom: 2px; font-size: 10px; }
.csim-msg-head b { color: #f5c518; }
.csim-msg-time { color: #555; font-size: 9px; }
.csim-msg-body { line-height: 1.4; color: #d8d8e0; }
.csim-msg-me .csim-msg-head b { color: #6ee0a8; }
.csim-msg-me .csim-msg-body { color: #6ee0a8; }
.csim-msg-system { padding: 6px 8px; background: rgba(245,197,24,.1); color: #f5c518; font-weight: 700;
  border-radius: 6px; margin: 4px 0; font-size: 11px; }
.csim-msg-tapcard { padding: 6px 8px; background: rgba(22,163,74,.15); color: #fff; font-weight: 700;
  border-radius: 6px; margin: 6px 0; border-left: 3px solid var(--accent); }
.csim-gif { font-size: 28px; margin: 4px 0; padding: 6px 10px; background: rgba(255,255,255,.04);
  border-radius: 8px; display: inline-block; }
.csim-react-row { display: flex; gap: 4px; margin-top: 4px; }
.csim-react { background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 6px; font-size: 11px; }
.csim-msg-del { background: none; border: none; color: #666; cursor: pointer; font-size: 12px; padding: 0 4px; margin-left: auto; }
.csim-msg-deleted { color: #666; font-style: italic; padding: 4px 0; }
@keyframes csimMsgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.csim-input { padding: 10px; border-top: 1px solid rgba(255,255,255,.05); display: flex; gap: 8px; align-items: center;
  font-size: 11px; color: #666; }
.csim-input span { padding: 4px 8px; background: rgba(255,255,255,.04); border-radius: 6px; }
.csim-send { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 4px 12px;
  font-weight: 800; cursor: pointer; margin-left: auto; }
.csim-live-bar { padding: 8px 12px; background: linear-gradient(90deg, rgba(22,163,74,.2), rgba(22,163,74,.05));
  color: #fff; font-weight: 800; font-size: 10px; letter-spacing: 1px; display: flex; gap: 6px; align-items: center; }
.csim-live-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
  animation: lnsLivePulse 1.2s ease-in-out infinite; }
.csim-beef-card { background: rgba(0,0,0,.5); border-radius: 10px; padding: 10px; margin: 6px 0;
  border: 1px solid rgba(22,163,74,.3); animation: csimMsgIn .35s ease-out; }
.csim-beef-head { display: flex; gap: 6px; margin-bottom: 8px; font-size: 10px; font-weight: 800; }
.csim-beef-head span:first-child { background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px; }
.csim-beef-sub { color: #888; align-self: center; }
.csim-beef-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; }
.csim-beef-side { text-align: center; padding: 6px; border-radius: 8px; }
.csim-beef-red { background: rgba(239,68,68,.1); }
.csim-beef-blue { background: rgba(59,130,246,.1); }
.csim-beef-team { font-size: 11px; font-weight: 800; color: #fff; }
.csim-beef-pickers { font-size: 9px; color: #888; margin-top: 2px; }
.csim-beef-count { font-size: 18px; font-weight: 800; color: #f5c518; margin-top: 4px; }
.csim-beef-vs { font-size: 11px; font-weight: 800; color: #666; }

/* =====================================================================
 * 👥 ONBOARDING SIM
 * ===================================================================== */
.osim-phone { color: #d8d8e0; font-size: 12px; max-width: 320px; margin: 0 auto; background: #fff;
  color: #222; border-radius: 14px; padding: 24px 20px; min-height: 360px; }
.osim-brand { text-align: center; margin-bottom: 24px; }
.osim-logo { width: 60px; height: 60px; background: var(--accent); color: #fff; border-radius: 14px;
  margin: 0 auto 8px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; font-family: var(--font-head); }
.osim-title { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.osim-tagline { font-size: 12px; color: #666; margin-top: 4px; }
.osim-demo-cta { width: 100%; padding: 14px; background: linear-gradient(135deg, #f5c518, #34d399); color: #fff;
  border: none; border-radius: 12px; font-weight: 800; font-size: 13px; margin-bottom: 16px; cursor: pointer; line-height: 1.4; }
.osim-demo-cta small { font-weight: 500; font-size: 11px; opacity: .9; }
.osim-sep { text-align: center; font-size: 11px; color: #999; margin: 14px 0; }
.osim-google, .osim-apple { width: 100%; padding: 12px; background: #fff; color: #222; border: 1px solid #ddd;
  border-radius: 10px; font-weight: 700; font-size: 13px; margin-bottom: 8px; cursor: pointer; }
.osim-apple { background: #888; color: #fff; }
.osim-google-popup { background: #fff; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.2);
  padding: 16px; max-width: 280px; margin: 40px auto; }
.osim-google-head { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.osim-google-app { font-size: 11px; color: #888; margin-bottom: 14px; }
.osim-google-acc { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 8px;
  background: #f4f5f8; cursor: pointer; }
.osim-google-avatar { width: 36px; height: 36px; background: #34d399; color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; }
.osim-google-pick { background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 8px 14px; font-weight: 700; cursor: pointer; margin-top: 14px; width: 100%; }
.osim-setup-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; margin-bottom: 18px; text-align: center; }
.osim-setup-row { margin-bottom: 14px; }
.osim-setup-row label { display: block; font-size: 11px; color: #666; margin-bottom: 4px; font-weight: 700; }
.osim-setup-row input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; font-size: 13px; }
.osim-avatar-grid { display: flex; gap: 6px; }
.osim-av-choice { width: 40px; height: 40px; background: #f4f5f8; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
.osim-av-on { background: var(--accent); transform: scale(1.1); }
.osim-lang { display: flex; gap: 6px; font-size: 11px; }
.osim-lang span { padding: 4px 8px; background: #f4f5f8; border-radius: 4px; }
.osim-lang span:first-child { background: var(--accent); color: #fff; }
.osim-setup-btn { width: 100%; padding: 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 12px; font-weight: 800; font-size: 13px; cursor: pointer; }
.osim-welcome-head { font-family: var(--font-head); font-size: 22px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.osim-welcome-sub { font-size: 12px; color: #666; text-align: center; margin-bottom: 16px; }
.osim-grp-card { background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(245,197,24,.06)); border-radius: 12px;
  padding: 14px; border: 1px solid rgba(22,163,74,.2); margin-bottom: 14px; }
.osim-grp-name { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.osim-grp-count { font-size: 11px; color: #666; margin-bottom: 8px; }
.osim-grp-cta { color: var(--accent); font-weight: 800; font-size: 12px; }
.osim-private-cta { text-align: center; font-size: 12px; color: #666; padding: 10px; background: #f4f5f8; border-radius: 8px; }
.osim-events { padding: 6px; }
.osim-spotlight { background: linear-gradient(135deg, rgba(22,163,74,.1), rgba(245,197,24,.06));
  border-radius: 12px; padding: 14px; margin-bottom: 12px; border: 1px solid rgba(22,163,74,.2); }
.osim-sl-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 9px;
  font-weight: 800; padding: 3px 6px; border-radius: 4px; margin-bottom: 6px; letter-spacing: 1px; }
.osim-sl-title { font-weight: 800; margin-bottom: 4px; }
.osim-sl-meta { font-size: 11px; color: #666; margin-bottom: 10px; }
.osim-sl-cta { width: 100%; padding: 10px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; font-weight: 800; cursor: pointer; }
.osim-event-row { padding: 10px; background: #f4f5f8; border-radius: 8px; margin-bottom: 6px; font-size: 12px; }
.osim-success { text-align: center; padding: 20px; }
.osim-success-icon { font-size: 48px; animation: osimBounce 1s ease-out; }
@keyframes osimBounce { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.osim-success-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; margin: 8px 0; }
.osim-success-sub { font-size: 12px; color: #666; margin-bottom: 14px; }
.osim-streak { background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(52,211,153,.06)); padding: 14px;
  border-radius: 12px; margin-bottom: 12px; }
.osim-streak-lbl { font-size: 11px; color: #666; }
.osim-streak-val { font-size: 22px; font-weight: 800; color: var(--accent); }
.osim-onboard-time { font-size: 11px; color: #6ee0a8; font-weight: 700; padding: 8px;
  background: rgba(110,224,168,.1); border-radius: 6px; }

/* =====================================================================
 * 🏆 RANKINGS + STREAK SIM
 * ===================================================================== */
.rsim-frame { background: #15151c; border-radius: 14px; padding: 14px; color: #d8d8e0; font-size: 12px; min-height: 360px; }
.rsim-tabs { display: flex; gap: 4px; margin-bottom: 12px; background: rgba(0,0,0,.3); border-radius: 8px; padding: 4px; }
.rsim-tab { flex: 1; padding: 7px; text-align: center; font-size: 11px; font-weight: 700; color: #888; border-radius: 6px; cursor: pointer; }
.rsim-tab-on { background: var(--accent); color: #fff; }
.rsim-list { background: rgba(0,0,0,.2); border-radius: 8px; overflow: hidden; }
.rsim-row { display: grid; grid-template-columns: 50px 32px 1fr auto 60px; gap: 8px; padding: 10px;
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.rsim-row:last-child { border-bottom: none; }
.rsim-row-me { background: rgba(22,163,74,.08); }
.rsim-row-silver { background: linear-gradient(90deg, rgba(207,210,216,.12), transparent);
  border-left: 3px solid #9aa0a8; }
.rsim-rank { font-weight: 800; color: #f5c518; font-size: 13px; }
.rsim-icon { font-size: 16px; text-align: center; }
.rsim-name { color: #fff; }
.rsim-row-me .rsim-name { font-weight: 800; }
.rsim-streak-chip { font-size: 11px; color: var(--accent); font-weight: 700; }
.rsim-pts { font-weight: 800; color: #fff; text-align: right; }
.rsim-trend-head { font-weight: 800; color: var(--accent); margin-bottom: 10px; font-size: 13px; }
.rsim-trend { display: flex; justify-content: space-between; align-items: center; padding: 10px;
  background: rgba(0,0,0,.2); border-radius: 8px; margin-bottom: 6px; }
.rsim-trend b { color: #fff; }
.rsim-up { color: #6ee0a8; font-size: 11px; font-weight: 700; }
.rsim-streak-card { background: linear-gradient(135deg, rgba(22,163,74,.15), rgba(52,211,153,.08));
  border-radius: 12px; padding: 18px; text-align: center; margin-bottom: 12px; border: 1px solid rgba(22,163,74,.3); }
.rsim-streak-num { font-size: 36px; font-weight: 800; color: var(--accent); }
.rsim-streak-lbl { font-size: 12px; color: #aaa; margin-bottom: 14px; }
.rsim-streak-progress { background: rgba(0,0,0,.4); height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 6px; }
.rsim-streak-bar { background: linear-gradient(90deg, var(--accent), #f5c518); height: 100%; border-radius: 4px;
  transition: width 1s ease-out; }
.rsim-streak-next { font-size: 11px; color: #f5c518; font-weight: 700; }
.rsim-streak-history { display: flex; flex-wrap: wrap; gap: 4px; }
.rsim-streak-history span { background: rgba(110,224,168,.15); color: #6ee0a8; padding: 4px 8px;
  border-radius: 6px; font-size: 11px; font-weight: 700; }
.rsim-pub-head { font-size: 11px; color: #888; padding: 6px 10px; background: rgba(0,0,0,.3); border-radius: 6px;
  font-family: var(--font-mono, monospace); margin-bottom: 12px; }
.rsim-pub-card { background: linear-gradient(135deg, rgba(22,163,74,.1), rgba(245,197,24,.06));
  border-radius: 14px; padding: 18px; text-align: center; border: 1px solid rgba(22,163,74,.2); }
.rsim-pub-avatar { font-size: 48px; margin-bottom: 8px; }
.rsim-pub-name { font-family: var(--font-head); font-size: 18px; font-weight: 800; margin-bottom: 14px; color: #fff; }
.rsim-pub-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 12px; }
.rsim-pub-stats div { background: rgba(0,0,0,.3); padding: 8px 4px; border-radius: 8px; }
.rsim-pub-stats b { display: block; font-weight: 800; color: #f5c518; font-size: 14px; }
.rsim-pub-stats span { display: block; font-size: 9px; color: #aaa; margin-top: 2px; }
.rsim-pub-share { font-size: 11px; color: var(--accent); font-weight: 700; padding: 8px; background: rgba(22,163,74,.05);
  border-radius: 8px; }

/* =====================================================================
 * 👤 PROFILE SIM
 * ===================================================================== */
.prosim-phone { background: #fff; color: #222; border-radius: 14px; padding: 18px; min-height: 360px;
  font-size: 12px; }
.prosim-header { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.prosim-avatar { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, #f5c518, var(--accent));
  display: flex; align-items: center; justify-content: center; font-size: 28px; }
.prosim-name { font-family: var(--font-head); font-size: 16px; font-weight: 800; }
.prosim-meta { font-size: 11px; color: #888; }
.prosim-rank { font-family: var(--font-head); font-size: 24px; font-weight: 800; color: var(--accent); }
.prosim-score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.prosim-score { background: #f4f5f8; padding: 10px 4px; border-radius: 10px; text-align: center; }
.prosim-score b { display: block; font-weight: 800; font-size: 14px; color: var(--accent); }
.prosim-score span { display: block; font-size: 9px; color: #888; margin-top: 2px; }
.prosim-section-head { font-weight: 800; font-size: 12px; color: #222; margin: 12px 0 8px; text-transform: uppercase; letter-spacing: .5px; }
.prosim-hist-row { padding: 10px; background: #f4f5f8; border-radius: 8px; margin-bottom: 6px; }
.prosim-hist-ev { font-weight: 800; font-size: 12px; margin-bottom: 4px; }
.prosim-hist-stats { display: flex; gap: 8px; font-size: 11px; }
.prosim-hist-stats span { padding: 2px 6px; background: rgba(0,0,0,.05); border-radius: 4px; }
.prosim-good { color: #6ee0a8; font-weight: 700; }
.prosim-belt-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-bottom: 12px;
  padding: 12px; background: #f4f5f8; border-radius: 10px; }
.prosim-belt-slot { display: flex; align-items: center; justify-content: center; aspect-ratio: 1;
  background: #fff; border-radius: 6px; }
.prosim-belt-special { background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(22,163,74,.06));
  padding: 12px; border-radius: 12px; border: 1px solid rgba(245,197,24,.3); }
.prosim-belt-special-row { display: flex; gap: 12px; align-items: center; }
.prosim-belt-special-icon { width: 36px; }
.prosim-setting { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px;
  background: #f4f5f8; border-radius: 10px; margin-bottom: 4px; font-size: 13px; }
.prosim-toggle { font-weight: 800; padding: 4px 10px; border-radius: 4px; font-size: 11px; }
.prosim-on { background: rgba(110,224,168,.2); color: #2d7a4e; }
.prosim-off { background: rgba(22,163,74,.1); color: var(--accent); }
.prosim-cta { color: var(--accent); font-weight: 800; font-size: 12px; }
.prosim-danger { color: var(--accent); }

/* =====================================================================
 * 🌍 LOCALIZATION SIM
 * ===================================================================== */
.lsim-screen { background: #fff; color: #222; padding: 30px 24px; border-radius: 14px;
  min-height: 360px; font-size: 13px; }
.lsim-screen.lsim-rtl { text-align: right; }
.lsim-headline { font-family: var(--font-head); font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.lsim-sub { font-size: 14px; color: #555; margin-bottom: 24px; line-height: 1.5; }
.lsim-card { background: #f4f5f8; padding: 14px; border-radius: 10px; margin-bottom: 20px; }
.lsim-card div:first-child { font-weight: 800; margin-bottom: 4px; }
.lsim-card .muted { font-size: 12px; color: #888; }
.lsim-cta { background: var(--accent); color: #fff; border: none; padding: 14px 24px; border-radius: 10px;
  font-weight: 800; font-size: 14px; cursor: pointer; }
.lsim-rtl .lsim-cta { float: right; }

/* =====================================================================
 * v216: PWA + PUSH SUBSCRIPTION SIM
 * ===================================================================== */
.pwsim-ov, .propsim-ov, .combosim-ov, .llb-ov, .sharesim-ov { overflow-y: auto; }
.pwsim-modal, .propsim-modal, .combosim-modal, .llb-modal, .sharesim-modal {
  max-width: 640px; margin: 24px auto; background: var(--bg); border-radius: 18px;
  padding: 18px 18px 16px; position: relative; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.pwsim-browser { background: #f4f5f8; border-radius: 12px; padding: 0; overflow: hidden;
  border: 1px solid #ddd; min-height: 360px; position: relative; }
.pwsim-url { padding: 8px 14px; background: #fff; border-bottom: 1px solid #ddd; font-size: 11px; color: #444; font-family: var(--font-mono, monospace); }
.pwsim-page { padding: 30px 20px; min-height: 200px; }
.pwsim-page-content { font-size: 11px; color: #888; }
.pwsim-prompt { position: absolute; bottom: 14px; left: 14px; right: 14px; background: #fff;
  border-radius: 12px; padding: 12px; box-shadow: 0 8px 28px rgba(0,0,0,.18); display: flex; gap: 10px;
  align-items: center; animation: pwsimSlideUp .6s ease-out; }
@keyframes pwsimSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.pwsim-prompt-icon { font-size: 24px; }
.pwsim-prompt-body { flex: 1; font-size: 12px; color: #222; }
.pwsim-prompt-body b { font-size: 13px; }
.pwsim-prompt-body .muted { font-size: 11px; color: #666; margin-top: 2px; }
.pwsim-prompt-cta { background: var(--accent); color: #fff; border: none; border-radius: 8px;
  padding: 8px 16px; font-weight: 800; font-size: 12px; cursor: pointer; white-space: nowrap; }
.pwsim-homescreen { background: linear-gradient(180deg, #2c3e50, #3498db); border-radius: 14px;
  padding: 30px 20px; min-height: 360px; color: #fff; }
.pwsim-hs-time { text-align: center; font-size: 56px; font-weight: 300; margin-bottom: 30px; letter-spacing: 2px; }
.pwsim-hs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pwsim-app { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.pwsim-app-icon { width: 52px; height: 52px; background: #fff; border-radius: 12px; display: flex;
  align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.pwsim-app-new { animation: pwsimPop .8s ease-out; }
.pwsim-app-pkt { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important;
  font-family: var(--font-head); font-weight: 800; font-size: 30px; }
@keyframes pwsimPop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.pwsim-perm-bg { background: rgba(0,0,0,.6); border-radius: 14px; padding: 60px 20px; min-height: 360px;
  display: flex; justify-content: center; align-items: center; }
.pwsim-perm-modal { background: rgba(58,58,68,.95); backdrop-filter: blur(20px); border-radius: 14px;
  padding: 18px; max-width: 280px; text-align: center; color: #fff; }
.pwsim-perm-app { font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.pwsim-perm-detail { font-size: 11px; color: #aaa; margin-bottom: 14px; line-height: 1.5; }
.pwsim-perm-btns { display: flex; gap: 1px; border-top: 1px solid rgba(255,255,255,.1); }
.pwsim-perm-btns button { flex: 1; padding: 10px; background: none; border: none; color: #007aff;
  font-weight: 600; cursor: pointer; font-size: 13px; }
.pwsim-perm-allow { font-weight: 700 !important; }
.pwsim-tech { padding: 14px; color: #d8d8e0; font-size: 12px; }
.pwsim-tech-step { padding: 10px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px;
  border-left: 3px solid #444; }
.pwsim-tech-step b { color: var(--accent); margin-right: 6px; }
.pwsim-tech-step code { background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono, monospace); font-size: 11px; color: #f5c518; }
.pwsim-tech-done { border-left-color: #6ee0a8; }
.pwsim-tech-on { border-left-color: var(--accent); background: rgba(22,163,74,.08); }
.pwsim-tech-push { background: rgba(245,197,24,.15); color: #f5c518; padding: 2px 6px; border-radius: 4px;
  font-weight: 700; }
.pwsim-lockscreen { background: linear-gradient(180deg, #1a1d24, #0c0c12); border-radius: 14px;
  padding: 40px 20px; min-height: 360px; color: #fff; text-align: center; }
.pwsim-ls-time { font-size: 56px; font-weight: 300; letter-spacing: 2px; }
.pwsim-ls-date { font-size: 14px; color: #aaa; margin-bottom: 30px; }
.pwsim-ls-notif { background: rgba(38,38,48,.95); backdrop-filter: blur(10px); border-radius: 14px;
  padding: 12px; text-align: left; animation: pwsimSlideUp .6s ease-out; }
.pwsim-ls-app { font-size: 9px; color: #9aa0a8; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.pwsim-ls-title { font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.pwsim-ls-body { font-size: 12px; color: #d8d8e0; line-height: 1.4; }
.pwsim-ls-bottom { font-size: 10px; color: #666; margin-top: 30px; }

/* =====================================================================
 * v216: PRO UPGRADE SIM
 * ===================================================================== */
.propsim-screen { color: #d8d8e0; font-size: 12px; padding: 16px; min-height: 380px; }
.propsim-paywall { background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(22,163,74,.08));
  border-radius: 14px; padding: 20px; text-align: center; border: 1px solid rgba(245,197,24,.3); }
.propsim-paywall-icon { font-size: 48px; margin-bottom: 8px; }
.propsim-paywall-title { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: #fff; margin-bottom: 4px; }
.propsim-paywall-sub { font-size: 12px; color: #aaa; margin-bottom: 14px; }
.propsim-paywall-perks { text-align: left; margin-bottom: 14px; }
.propsim-perk { padding: 6px 8px; background: rgba(255,255,255,.04); border-radius: 6px; margin-bottom: 4px;
  font-size: 11px; color: #d8d8e0; }
.propsim-paywall-cta { background: linear-gradient(135deg, #f5c518, var(--accent)); color: #fff; border: none;
  border-radius: 10px; padding: 14px; font-weight: 800; font-size: 13px; width: 100%; cursor: pointer; }
.propsim-paywall-tiny { font-size: 10px; color: #888; margin-top: 6px; }
.propsim-stripe { background: #fff; color: #222; }
.propsim-stripe-head { padding-bottom: 10px; border-bottom: 1px solid #eee; margin-bottom: 14px; text-align: center; }
.propsim-stripe-app { font-weight: 700; font-size: 13px; }
.propsim-stripe-price { font-size: 18px; font-weight: 800; color: var(--accent); margin-top: 4px; }
.propsim-stripe-row { margin-bottom: 10px; }
.propsim-stripe-row label { display: block; font-size: 11px; color: #666; font-weight: 700; margin-bottom: 4px; }
.propsim-stripe-row input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-family: var(--font-mono, monospace); }
.propsim-stripe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.propsim-stripe-grid input { width: 100%; }
.propsim-stripe-btn { width: 100%; background: #635bff; color: #fff; border: none; border-radius: 8px;
  padding: 14px; font-weight: 800; font-size: 13px; cursor: pointer; margin-top: 6px; }
.propsim-stripe-trust { font-size: 10px; color: #666; text-align: center; margin-top: 6px; }
.propsim-success { background: rgba(110,224,168,.12); border-radius: 14px; padding: 26px; text-align: center;
  border: 1px solid rgba(110,224,168,.3); }
.propsim-success-check { width: 60px; height: 60px; background: #6ee0a8; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 800;
  margin: 0 auto 12px; animation: pwsimPop .6s ease-out; }
.propsim-success-title { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: #fff; }
.propsim-success-sub { font-size: 12px; color: #aaa; margin-bottom: 16px; }
.propsim-success-perks { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.propsim-success-perk { padding: 8px 12px; background: rgba(110,224,168,.15); border-radius: 8px; color: #6ee0a8; font-weight: 700; }
.propsim-success-cta { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 12px; font-weight: 800; cursor: pointer; width: 100%; }
.propsim-chat-msg { display: flex; gap: 8px; padding: 8px 10px; background: rgba(255,255,255,.04);
  border-radius: 8px; margin-bottom: 6px; font-size: 12px; align-items: baseline; }
.propsim-chat-msg b { color: #f5c518; }
.propsim-chat-msg span { font-size: 9px; color: #666; }
.propsim-chat-msg div { color: #d8d8e0; }
.propsim-chat-me { background: rgba(22,163,74,.08); }
.propsim-chat-me b { color: #fff; }
.propsim-pro-badge { background: linear-gradient(135deg, #f5c518, #34d399); color: #fff; padding: 2px 6px;
  border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: .5px; margin-left: 4px; }
.propsim-funnel { padding: 14px; }
.propsim-funnel-row { margin-bottom: 8px; }
.propsim-funnel-bar { background: rgba(255,255,255,.06); padding: 10px 14px; border-radius: 8px; color: #fff;
  font-weight: 700; font-size: 12px; }
.propsim-funnel-trial { background: rgba(245,197,24,.2); }
.propsim-funnel-engage { background: rgba(255,90,31,.2); }
.propsim-funnel-pro { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.propsim-funnel-revenue { text-align: center; padding: 12px; color: #6ee0a8; font-size: 13px; }

/* =====================================================================
 * v216: COMBO PICK SIM
 * ===================================================================== */
.combo-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.combo-head { font-weight: 800; font-size: 14px; color: var(--accent); margin-bottom: 14px; text-align: center; letter-spacing: 1px; }
.combo-match { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 10px;
  background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px; align-items: center; }
.combo-match span { color: #888; font-weight: 700; }
.combo-match b { color: #fff; }
.combo-odds { color: #f5c518; font-weight: 800; }
.combo-tick { color: #6ee0a8; font-weight: 800; font-size: 16px; }
.combo-match-won { background: rgba(110,224,168,.1); }
.combo-match-live { background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3); animation: lnsLivePulse 1.4s ease-in-out infinite; }
.combo-live { color: var(--accent); font-weight: 800; font-size: 11px; }
.combo-add-btn { background: rgba(245,197,24,.1); color: #f5c518; border: 1px dashed rgba(245,197,24,.4); border-radius: 8px;
  padding: 10px; font-weight: 700; font-size: 11px; width: 100%; cursor: pointer; margin-top: 6px; }
.combo-calc { background: rgba(0,0,0,.3); border-radius: 10px; padding: 14px; margin-bottom: 14px; }
.combo-calc-row { display: flex; justify-content: space-between; padding: 6px 0; }
.combo-calc-row b { color: #f5c518; }
.combo-calc-sep { color: #444; text-align: center; font-family: var(--font-mono, monospace); margin: 8px 0; }
.combo-calc-total { display: flex; justify-content: space-between; padding: 8px 0; }
.combo-calc-total span { color: #fff; font-weight: 700; }
.combo-calc-total b { color: var(--accent); font-size: 18px; }
.combo-payoff { background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(22,163,74,.06));
  border-radius: 10px; padding: 12px; text-align: center; border: 1px solid rgba(245,197,24,.3); }
.combo-payoff-lbl { font-size: 10px; color: #aaa; margin-bottom: 4px; }
.combo-payoff-val { font-weight: 800; color: #f5c518; font-size: 14px; }
.combo-status { padding: 10px; border-radius: 8px; margin-bottom: 10px; text-align: center; font-weight: 800; font-size: 12px; }
.combo-status-pending { background: rgba(245,158,11,.15); color: #f59e0b; }
.combo-tension { font-size: 11px; color: var(--accent); text-align: center; padding: 8px; margin-top: 10px; font-weight: 700; }
.combo-success { text-align: center; padding: 20px; background: linear-gradient(135deg, rgba(245,197,24,.2), rgba(22,163,74,.12));
  border-radius: 14px; border: 1px solid rgba(245,197,24,.4); margin-bottom: 14px; }
.combo-success-icon { font-size: 48px; }
.combo-success-title { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #fff;
  letter-spacing: 2px; animation: comboCelebrate 1.2s ease-out; }
@keyframes comboCelebrate { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
.combo-success-mult { color: #f5c518; font-weight: 800; font-size: 14px; margin-top: 4px; }
.combo-success-payoff { color: #6ee0a8; font-weight: 800; font-size: 16px; margin-top: 8px; }
.combo-chat-reactions { padding: 10px; background: rgba(0,0,0,.3); border-radius: 8px; }
.combo-react { padding: 6px 0; font-size: 11px; }
.combo-react b { color: #f5c518; margin-right: 4px; }

/* =====================================================================
 * v216: LIVE LEADERBOARD SIM
 * ===================================================================== */
.llb-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.llb-head { display: flex; gap: 6px; align-items: center; font-weight: 800; font-size: 11px; color: #fff;
  letter-spacing: .5px; margin-bottom: 14px; padding: 8px 12px; background: linear-gradient(90deg, rgba(22,163,74,.2), rgba(22,163,74,.05));
  border-radius: 8px; }
.llb-live { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; animation: lnsLivePulse 1.2s ease-in-out infinite; }
.llb-board { background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; }
.llb-row { display: grid; grid-template-columns: 40px 1fr 60px 50px; gap: 10px; padding: 10px;
  align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 13px; }
.llb-row:last-child { border-bottom: none; }
.llb-rank { font-weight: 800; color: #f5c518; }
.llb-leader { background: rgba(245,197,24,.08); }
.llb-leader .llb-rank::before { content: "🥇 "; }
.llb-me { color: #fff; font-weight: 800; }
.llb-me .llb-name { color: var(--accent); }
.llb-jump { animation: llbJump .6s ease-out; }
@keyframes llbJump { 0% { transform: translateX(0) scale(1); } 30% { transform: translateY(-4px) scale(1.04); background: rgba(245,197,24,.2); } 100% { transform: translateY(0) scale(1); } }
.llb-name { color: #d8d8e0; }
.llb-pts { color: #fff; font-weight: 800; text-align: right; }
.llb-delta { color: #6ee0a8; font-weight: 700; text-align: right; font-size: 11px; }
.llb-flash { text-align: center; padding: 12px; background: linear-gradient(90deg, rgba(245,197,24,.15), rgba(245,197,24,.05));
  border-radius: 8px; color: #f5c518; font-weight: 800; margin-top: 12px; animation: pwsimSlideUp .5s ease-out; }
.llb-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.llb-board-mini, .llb-chat-mini { background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; }
.llb-head-mini, .llb-chat-head-mini { font-weight: 800; font-size: 10px; color: var(--accent); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .5px; }
.llb-row-mini { display: flex; justify-content: space-between; padding: 6px 0; font-size: 11px; }
.llb-row-mini b { color: #f5c518; }
.llb-row-mini.llb-leader { background: rgba(245,197,24,.08); padding: 6px 8px; border-radius: 4px; }
.llb-chat-msg { padding: 4px 0; font-size: 11px; line-height: 1.4; }
.llb-chat-msg b { color: #f5c518; }
.llb-chat-me { color: #6ee0a8; }
.llb-chat-me b { color: #6ee0a8; }
.llb-stack-info { font-size: 10px; color: #666; text-align: center; padding: 10px; background: rgba(0,0,0,.3); border-radius: 8px; }
.llb-stack-info code { background: rgba(245,197,24,.1); padding: 2px 6px; border-radius: 4px; color: #f5c518;
  font-family: var(--font-mono, monospace); }
.llb-tapcard-pop { background: rgba(0,0,0,.5); border-radius: 10px; padding: 12px; border: 1px solid rgba(22,163,74,.3);
  animation: pwsimSlideUp .5s ease-out; }
.llb-tc-head { display: flex; gap: 8px; font-size: 10px; font-weight: 800; margin-bottom: 8px; }
.llb-tc-head span:first-child { background: var(--accent); color: #fff; padding: 2px 6px; border-radius: 3px; letter-spacing: .5px; }
.llb-tc-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.llb-tc-side { padding: 8px; background: rgba(58,58,72,.4); border-radius: 6px; text-align: center; font-size: 11px; font-weight: 700; }
.llb-tc-lone { background: rgba(110,224,168,.1); color: #6ee0a8; }
.llb-tc-vs { font-weight: 800; color: #666; }

/* =====================================================================
 * v216: RESULT SHARE SIM
 * ===================================================================== */
.share-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.share-trigger { background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(22,163,74,.12));
  border-radius: 14px; padding: 24px; text-align: center; border: 1px solid rgba(245,197,24,.4); }
.share-trigger-icon { font-size: 56px; animation: pwsimPop .8s ease-out; }
.share-trigger-title { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #fff; margin: 8px 0 4px; }
.share-trigger-sub { font-size: 13px; color: #d8d8e0; margin-bottom: 16px; }
.share-trigger-cta { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none;
  border-radius: 10px; padding: 12px 24px; font-weight: 800; cursor: pointer; }
.share-preview-frame { display: flex; justify-content: center; padding: 20px 0; }
.share-story { width: 200px; aspect-ratio: 9/16; background: linear-gradient(135deg, #1a1a22, #2a2a35, #1a1a22);
  border-radius: 12px; padding: 18px 14px; color: #fff; text-align: center; box-shadow: 0 12px 30px rgba(0,0,0,.5);
  border: 1px solid rgba(245,197,24,.3); position: relative; overflow: hidden; }
.share-story::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 50% at 50% 0%, rgba(245,197,24,.15), transparent 60%);
  pointer-events: none; }
.share-st-brand { font-family: var(--font-head); font-size: 11px; font-weight: 800; letter-spacing: 2px; color: var(--accent); margin-bottom: 14px; }
.share-st-badge { background: linear-gradient(135deg, #f5c518, var(--accent)); color: #fff; font-weight: 800;
  font-size: 9px; padding: 4px 8px; border-radius: 4px; letter-spacing: 1px; margin-bottom: 14px; display: inline-block; }
.share-st-team { font-family: var(--font-head); font-size: 22px; font-weight: 800; letter-spacing: 1px; }
.share-st-result { font-size: 11px; color: #aaa; margin: 4px 0; }
.share-st-method { font-size: 11px; color: #fff; font-weight: 700; margin-bottom: 18px; }
.share-st-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 14px; position: relative; z-index: 1; }
.share-st-stats div { background: rgba(245,197,24,.1); padding: 6px 2px; border-radius: 6px; }
.share-st-stats b { display: block; color: #f5c518; font-weight: 800; font-size: 11px; }
.share-st-stats span { display: block; font-size: 7px; color: #aaa; margin-top: 2px; }
.share-st-user { font-size: 9px; color: #888; margin-top: 10px; }
.share-st-footer { font-size: 9px; color: var(--accent); font-weight: 700; margin-top: 18px; letter-spacing: 1px; }
.share-sheet { background: rgba(0,0,0,.3); border-radius: 14px; padding: 20px; }
.share-sheet-title { font-weight: 800; font-size: 13px; color: #fff; margin-bottom: 14px; text-align: center; }
.share-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.share-ch { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #d8d8e0; cursor: pointer; }
.share-ch-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800; font-size: 16px; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.share-flow { padding: 14px; }
.share-flow-step { padding: 12px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px;
  font-size: 12px; border-left: 3px solid var(--accent-2); color: #d8d8e0; }
.share-flow-step b { color: var(--accent); margin-right: 6px; font-weight: 800; }
.share-flow-conv { text-align: center; padding: 14px; background: linear-gradient(135deg, rgba(110,224,168,.15), rgba(245,197,24,.08));
  border-radius: 10px; color: #6ee0a8; font-weight: 800; margin-top: 10px; }

/* =====================================================================
 * v217: MONETIZATION SIM
 * ===================================================================== */
.msim-ov { overflow-y: auto; }
.msim-modal { max-width: 680px; margin: 24px auto; background: var(--bg); border-radius: 18px;
  padding: 18px 18px 16px; position: relative; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.msim-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 14px; }
.msim-card { padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px;
  text-align: center; border: 1px solid rgba(255,255,255,.05); }
.msim-card .msim-icon { font-size: 32px; display: block; margin-bottom: 6px; }
.msim-card b { display: block; color: #fff; font-weight: 800; margin-bottom: 4px; font-size: 13px; }
.msim-card span:last-child { color: #f5c518; font-weight: 700; font-size: 11px; }
.msim-total { text-align: center; padding: 14px; background: linear-gradient(135deg, rgba(110,224,168,.15), rgba(245,197,24,.08));
  border-radius: 10px; color: #6ee0a8; font-weight: 800; margin: 0 14px 14px; border: 1px solid rgba(110,224,168,.3); }
.msim-flow { padding: 14px; }
.msim-flow-step { display: flex; gap: 12px; align-items: center; padding: 12px; background: rgba(255,255,255,.04);
  border-radius: 10px; margin-bottom: 4px; color: #d8d8e0; }
.msim-flow-step b { display: block; color: #fff; font-weight: 800; }
.msim-flow-step .muted { font-size: 11px; color: #888; margin-top: 2px; }
.msim-flow-active { background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.3); animation: pwsimSlideUp .5s ease-out; }
.msim-step-icon { width: 36px; height: 36px; background: rgba(255,255,255,.06); border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 18px; }
.msim-flow-arrow { text-align: center; color: #666; font-size: 18px; padding: 4px 0; }
.msim-flow-result { text-align: center; padding: 14px; background: linear-gradient(135deg, rgba(110,224,168,.15), rgba(245,197,24,.08));
  border-radius: 10px; color: #6ee0a8; font-weight: 800; margin-top: 10px; border: 1px solid rgba(110,224,168,.3); }
.msim-stat-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1.4fr; gap: 8px; padding: 10px; background: rgba(255,255,255,.04);
  border-radius: 8px; margin-bottom: 8px; color: #d8d8e0; }
.msim-stat { text-align: center; padding: 6px; }
.msim-stat b { display: block; font-weight: 800; color: #fff; font-size: 16px; }
.msim-stat span { display: block; font-size: 10px; color: #888; }
.msim-stat-result b { color: #f5c518; }
.msim-stat-row.msim-stat-row .msim-stat-result.msim-highlight b { color: #6ee0a8; font-size: 18px; }
.msim-ad-demo { padding: 14px; }
.msim-ad-banner { display: flex; justify-content: space-between; padding: 12px; background: rgba(255,255,255,.04);
  border-radius: 8px; margin-bottom: 10px; color: #d8d8e0; }
.msim-ad-rev { color: #f5c518; font-weight: 700; }
.msim-ad-rewarded { background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(22,163,74,.06));
  border-radius: 10px; padding: 12px; border: 1px solid rgba(245,197,24,.3); margin-bottom: 12px; }
.msim-ad-rev-head { display: flex; justify-content: space-between; font-weight: 800; color: #fff; margin-bottom: 6px; }
.msim-ad-rev-body { font-size: 11px; color: #d8d8e0; }
.msim-ad-math { padding: 10px; background: rgba(0,0,0,.3); border-radius: 8px; font-size: 12px; color: #d8d8e0; }
.msim-ad-math div { padding: 4px 0; }
.msim-ad-total { color: #6ee0a8; font-weight: 800; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.04); }
.msim-bet-demo { padding: 14px; }
.msim-bet-row { display: grid; grid-template-columns: 50px 20px 1fr auto; gap: 10px; padding: 12px;
  background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px; align-items: center; color: #d8d8e0; }
.msim-bet-row b { color: #fff; font-weight: 800; }
.msim-bet-cpa { color: #f5c518; font-weight: 800; font-size: 11px; }
.msim-bet-guard { padding: 12px; background: rgba(110,224,168,.1); border-radius: 8px; color: #6ee0a8;
  font-size: 11px; font-weight: 700; margin-top: 10px; }
.msim-tourn { padding: 14px; }
.msim-tourn-card { background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(22,163,74,.08));
  border-radius: 14px; padding: 20px; border: 1px solid rgba(245,197,24,.3); }
.msim-tourn-spon { font-size: 11px; color: #f5c518; font-weight: 800; letter-spacing: 1px; margin-bottom: 6px; }
.msim-tourn-title { font-family: var(--font-head); font-weight: 800; color: #fff; font-size: 18px; margin-bottom: 4px; }
.msim-tourn-prize { color: #f5c518; font-weight: 700; margin-bottom: 6px; }
.msim-tourn-conds { font-size: 12px; color: #d8d8e0; margin-bottom: 14px; }
.msim-tourn-result { padding: 10px; background: rgba(110,224,168,.1); border-radius: 8px; color: #6ee0a8; font-weight: 800; }
.msim-eco { padding: 14px; }
.msim-eco-loop { display: flex; gap: 6px; align-items: center; padding: 14px; background: rgba(255,255,255,.04);
  border-radius: 10px; margin-bottom: 12px; justify-content: center; flex-wrap: wrap; }
.msim-eco-step { padding: 6px 10px; background: rgba(245,197,24,.1); color: #f5c518; border-radius: 6px;
  font-size: 11px; font-weight: 700; }
.msim-eco-arrow { color: #888; }
.msim-eco-impact { padding: 14px; background: linear-gradient(135deg, rgba(110,224,168,.12), rgba(245,197,24,.06));
  border-radius: 10px; color: #6ee0a8; border: 1px solid rgba(110,224,168,.3); }
.msim-eco-impact div { padding: 6px 0; font-weight: 700; }
.msim-final { padding: 14px; }
.msim-final-row { display: flex; justify-content: space-between; padding: 10px 14px; background: rgba(255,255,255,.04);
  border-radius: 8px; margin-bottom: 6px; color: #d8d8e0; font-weight: 700; }
.msim-final-row span:last-child { color: #f5c518; }
.msim-final-total { display: flex; flex-direction: column; align-items: center; padding: 18px;
  background: linear-gradient(135deg, rgba(110,224,168,.2), rgba(245,197,24,.12)); border-radius: 14px;
  border: 2px solid rgba(110,224,168,.5); margin-top: 10px; }
.msim-final-total b { color: #6ee0a8; font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.msim-final-total span { color: #fff; font-size: 12px; }

/* =====================================================================
 * v217: FULL INVESTOR TOUR ORCHESTRATOR
 * ===================================================================== */
.tour-orchestrator-ov { overflow-y: auto; }
.tour-orchestrator-modal { max-width: 620px; margin: 24px auto; background: linear-gradient(180deg, #1a1d24, #0c0c12);
  color: #d8d8e0; border-radius: 18px; padding: 18px 18px 16px; position: relative;
  border: 2px solid rgba(22,163,74,.3); box-shadow: 0 30px 80px rgba(0,0,0,.7);
  animation: tourModalIn .6s cubic-bezier(.16,1,.3,1); }
@keyframes tourModalIn {
  from { opacity: 0; transform: translateY(40px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tour-orchestrator-modal .modal-head b { color: #fff; }
.tour-stage { padding: 50px 30px; text-align: center; min-height: 320px; display: flex;
  flex-direction: column; justify-content: center; align-items: center; gap: 12px; }
.tour-station-icon { font-size: 64px; line-height: 1; animation: pwsimPop .8s ease-out; }
.tour-station-icon .belt-ic { width: 64px !important; height: 64px !important; }
.tour-station-num { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 2px; text-transform: uppercase; }
.tour-station-title { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: #fff; letter-spacing: 1px; line-height: 1.2; }
.tour-station-intro { font-size: 14px; color: #d8d8e0; max-width: 480px; line-height: 1.5; }
.tour-controls { margin-top: 12px; }
.tour-progress { display: flex; gap: 3px; justify-content: center; margin-bottom: 12px; flex-wrap: wrap; }
.tour-dot { width: 16px; height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; cursor: pointer;
  transition: background .2s, width .2s; }
.tour-dot-on { background: var(--accent); width: 28px; }
.tour-dot-done { background: var(--accent-2); opacity: .6; }
.tour-control-row { display: grid; grid-template-columns: 1fr 1fr 1.6fr 1fr; gap: 6px; margin-bottom: 8px; }
.tour-ctrl { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.1);
  padding: 10px; border-radius: 8px; font-weight: 700; font-size: 12px; cursor: pointer; }
.tour-ctrl:hover { background: rgba(255,255,255,.1); }
.tour-ctrl:disabled { opacity: .35; cursor: not-allowed; }
.tour-skip { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; border-color: var(--accent) !important; font-weight: 800; }
.tour-playpause { background: rgba(245,197,24,.15) !important; color: #f5c518 !important; }
.tour-hint { font-size: 10px; color: #888; text-align: center; }

/* =====================================================================
 * v217: TOP-OF-LAB "Full Investor Tour" CTA
 * ===================================================================== */
.demo-lab-tour-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: none; border-radius: 12px; font-weight: 800; font-size: 13px; cursor: pointer;
  letter-spacing: .5px; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(22,163,74,.3);
  animation: tourCtaPulse 3s ease-in-out infinite; }
.demo-lab-tour-btn:hover { box-shadow: 0 12px 32px rgba(22,163,74,.5); transform: translateY(-1px); }
@keyframes tourCtaPulse { 0%, 100% { box-shadow: 0 8px 24px rgba(22,163,74,.3); } 50% { box-shadow: 0 12px 32px rgba(22,163,74,.5); } }

/* =====================================================================
 * v222: TOUR ORCHESTRATOR — rich Welcome/Why-Now/Roadmap/Ask cards
 * Custom HTML views per station (icon+intro layout stays for sim stations).
 * ===================================================================== */
.tour-hero-card { padding: 20px 30px; text-align: center; }
.tour-hero-icon { font-size: 64px; line-height: 1; margin-bottom: 8px; animation: pwsimPop .8s ease-out; }
.tour-hero-brand { font-family: var(--font-head); font-size: 36px; font-weight: 800; color: #fff; letter-spacing: 4px; }
.tour-hero-tagline { font-size: 14px; color: var(--accent); margin-bottom: 14px; letter-spacing: 1px; }
.tour-hero-pitch { font-size: 13px; color: #d8d8e0; max-width: 480px; margin: 0 auto 18px; line-height: 1.5; }
.tour-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 380px; margin: 0 auto 12px; }
.tour-hero-stats div { background: rgba(255,255,255,.05); padding: 10px 4px; border-radius: 10px; }
.tour-hero-stats b { display: block; color: #f5c518; font-weight: 800; font-size: 18px; }
.tour-hero-stats span { display: block; font-size: 9px; color: #aaa; margin-top: 2px; }
.tour-hero-hint { font-size: 11px; color: var(--accent); font-weight: 700; padding: 8px; background: rgba(22,163,74,.08); border-radius: 8px; max-width: 340px; margin: 0 auto; }

.tour-why-card { padding: 10px 20px; }
.tour-why-head { font-family: var(--font-head); font-weight: 800; font-size: 24px; color: var(--accent); letter-spacing: 2px; margin-bottom: 18px; text-align: center; }
.tour-why-grid { display: flex; flex-direction: column; gap: 10px; }
.tour-why-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px; border-left: 3px solid var(--accent); text-align: left; }
.tour-why-icon { font-size: 26px; line-height: 1; flex: 0 0 36px; }
.tour-why-row b { display: block; color: #fff; font-weight: 800; margin-bottom: 4px; font-size: 13px; }
.tour-why-row span { display: block; font-size: 12px; color: #aaa; line-height: 1.5; }

.tour-roadmap-card { padding: 10px 20px; }
.tour-roadmap-head { font-family: var(--font-head); font-weight: 800; font-size: 22px; color: #f5c518; letter-spacing: 2px; margin-bottom: 14px; text-align: center; }
.tour-roadmap-phase { display: flex; gap: 14px; padding: 12px; background: rgba(255,255,255,.04); border-radius: 10px; margin-bottom: 8px; text-align: left; }
.tour-phase-num { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), #f5c518); color: #fff; font-family: var(--font-head); font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 13px; flex: 0 0 40px; }
.tour-roadmap-phase b { display: block; color: #fff; font-weight: 800; margin-bottom: 4px; font-size: 13px; }
.tour-roadmap-phase span { display: block; font-size: 11px; color: #aaa; line-height: 1.5; margin-bottom: 4px; }
.tour-phase-target { color: #6ee0a8 !important; font-weight: 700 !important; }

.tour-ask-card { padding: 10px 20px; text-align: center; }
.tour-ask-head { font-family: var(--font-head); font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: 3px; margin-bottom: 14px; }
.tour-ask-amount { font-family: var(--font-head); font-size: 48px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: 1px; }
.tour-ask-terms { font-size: 12px; color: #aaa; margin: 6px 0 18px; }
.tour-ask-use { background: rgba(255,255,255,.04); border-radius: 12px; padding: 14px; margin-bottom: 14px; text-align: left; }
.tour-use-head { font-weight: 800; font-size: 11px; color: var(--accent); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.tour-use-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; color: #d8d8e0; border-bottom: 1px solid rgba(255,255,255,.04); }
.tour-use-row:last-child { border-bottom: none; }
.tour-use-row b { color: #f5c518; }
.tour-ask-ctas { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.tour-cta { display: block; padding: 12px; border-radius: 10px; text-decoration: none; font-weight: 800; font-size: 13px; cursor: pointer; border: none; text-align: center; }
.tour-cta-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.tour-cta-secondary { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }
.tour-cta-tertiary { background: rgba(245,197,24,.1); color: #f5c518; border: 1px solid rgba(245,197,24,.3); }
.tour-ask-quote { font-style: italic; font-size: 12px; color: #d8d8e0; padding: 10px; background: rgba(22,163,74,.05); border-left: 3px solid var(--accent); border-radius: 6px; text-align: left; }

/* =====================================================================
 * v223: 4 NEW SIMS — Group Create, Team Stats, Theme Switch, Performance
 * ===================================================================== */
.gcsim-ov, .fssim-ov, .thsim-ov, .perfsim-ov { overflow-y: auto; }
.gcsim-modal, .fssim-modal, .thsim-modal, .perfsim-modal {
  max-width: 640px; margin: 24px auto; background: var(--bg); border-radius: 18px;
  padding: 18px 18px 16px; position: relative; border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

/* GROUP CREATE SIM */
.gcsim-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.gcsim-tab-head { font-size: 11px; font-weight: 800; color: var(--accent); letter-spacing: 1px; margin-bottom: 14px; text-transform: uppercase; }
.gcsim-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.gcsim-card { background: rgba(255,255,255,.05); border-radius: 12px; padding: 14px; text-align: center; border: 1px solid rgba(255,255,255,.06); }
.gcsim-card.gcsim-create { background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(52,211,153,.06)); border-color: rgba(22,163,74,.3); }
.gcsim-card-icon { font-size: 32px; margin-bottom: 6px; }
.gcsim-card b { display: block; color: #fff; margin-bottom: 4px; }
.gcsim-card span { font-size: 10px; color: #aaa; }
.gcsim-existing { padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.gcsim-section-head { font-weight: 800; color: #888; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.gcsim-grp-row { display: flex; justify-content: space-between; padding: 10px; background: rgba(255,255,255,.04); border-radius: 8px; }
.gcsim-form-card { padding: 18px; background: #15151c; border-radius: 14px; border: 1px solid rgba(255,255,255,.08); margin: 20px auto; max-width: 320px; }
.gcsim-modal-head { font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 12px; }
.gcsim-lbl { display: block; font-size: 10px; color: #888; text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 4px; }
.gcsim-input { width: 100%; padding: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: #fff; }
.gcsim-emoji-row { display: flex; gap: 6px; }
.gcsim-emoji-row span { width: 40px; height: 40px; background: rgba(255,255,255,.04); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; cursor: pointer; }
.gcsim-emoji-on { background: var(--accent) !important; transform: scale(1.1); }
.gcsim-options { margin: 14px 0; }
.gcsim-opt { display: flex; justify-content: space-between; padding: 8px; background: rgba(255,255,255,.04); border-radius: 6px; margin-bottom: 4px; font-size: 11px; }
.gcsim-toggle-on { color: #6ee0a8; font-weight: 800; }
.gcsim-toggle-off { color: #16a34a; font-weight: 800; }
.gcsim-btn { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 12px; font-weight: 800; cursor: pointer; width: 100%; margin-top: 6px; }
.gcsim-success { text-align: center; padding: 20px; }
.gcsim-success-icon { font-size: 48px; animation: pwsimPop .6s ease-out; }
.gcsim-success-title { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #fff; margin-top: 8px; }
.gcsim-success-sub { font-size: 12px; color: #aaa; margin: 6px 0 14px; }
.gcsim-code-box { display: flex; gap: 8px; padding: 12px; background: rgba(245,197,24,.1); border-radius: 10px; border: 1px solid rgba(245,197,24,.3); margin-bottom: 14px; }
.gcsim-code { flex: 1; font-family: var(--font-mono, monospace); font-weight: 800; color: #f5c518; font-size: 18px; letter-spacing: 1px; align-self: center; }
.gcsim-copy { background: var(--accent); color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-weight: 700; cursor: pointer; font-size: 11px; }
.gcsim-share-row { display: flex; gap: 6px; }
.gcsim-share-row button { flex: 1; background: rgba(255,255,255,.06); color: #d8d8e0; border: none; padding: 10px; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 11px; }
.gcsim-feed { padding: 8px; background: rgba(0,0,0,.3); border-radius: 10px; }
.gcsim-feed-row { display: flex; justify-content: space-between; padding: 10px; background: rgba(255,255,255,.05); border-radius: 8px; margin-bottom: 6px; }
.gcsim-feed-meta { font-size: 10px; color: #888; }
.gcsim-feed-msg { padding: 6px 0; font-size: 12px; animation: lnsChatIn .25s ease-out; }
.gcsim-system { background: rgba(245,197,24,.08); color: #f5c518; padding: 6px 10px; border-radius: 6px; font-weight: 700; font-size: 11px; margin: 4px 0; text-align: center; }
.gcsim-feed-msg b { color: #f5c518; }
.gcsim-me { color: #6ee0a8; }
.gcsim-me b { color: #6ee0a8 !important; }
.gcsim-mini-rank { background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.gcsim-mr-row { display: flex; justify-content: space-between; padding: 8px; font-size: 12px; border-bottom: 1px solid rgba(255,255,255,.04); }
.gcsim-mr-row b { color: #f5c518; margin-right: 8px; }
.gcsim-mr-row span { color: #aaa; }
.gcsim-mr-leader { background: rgba(245,197,24,.08); border-radius: 6px; padding: 8px; }
.gcsim-mr-me { background: rgba(110,224,168,.08); }
.gcsim-mr-me b { color: #6ee0a8; }
.gcsim-celebrate { text-align: center; padding: 12px; background: rgba(245,197,24,.1); border-radius: 8px; color: #f5c518; font-weight: 700; font-size: 11px; }

/* FIGHTER STATS SIM */
.fssim-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.fssim-match-strip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 14px; background: rgba(255,255,255,.04); border-radius: 12px; margin-bottom: 10px; }
.fssim-team-mini { font-family: var(--font-head); font-weight: 800; color: #fff; text-align: center; }
.fssim-vs { font-weight: 800; color: #666; }
.fssim-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.fssim-pick { flex: 1; background: var(--accent); color: #fff; border: none; padding: 10px; border-radius: 8px; font-weight: 800; cursor: pointer; }
.fssim-stats { flex: 1; background: rgba(255,255,255,.05); color: #d8d8e0; border: 1px solid rgba(255,255,255,.1); padding: 10px; border-radius: 8px; font-weight: 700; cursor: pointer; }
.fssim-stats-on { background: rgba(245,197,24,.15); color: #f5c518; border-color: #f5c518; }
.fssim-hint { text-align: center; font-size: 11px; color: #888; }
.fssim-radar-wrap { display: flex; justify-content: center; padding: 10px 0; }
.fssim-radar { max-width: 240px; }
.fssim-legend { display: flex; gap: 14px; justify-content: center; padding: 10px; font-size: 11px; }
.fssim-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.fssim-dot-red { background: #16a34a; }
.fssim-dot-blue { background: #3b82f6; }
.fssim-table { background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; }
.fssim-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.04); font-size: 12px; }
.fssim-row:last-child { border-bottom: none; }
.fssim-row b { color: #fff; text-align: center; }
.fssim-row-head { font-weight: 800; color: #888; font-size: 10px; text-transform: uppercase; }
.fssim-row-edge { background: rgba(245,197,24,.06); }
.fssim-row-edge b { color: #f5c518; }
.fssim-form { padding: 10px; background: rgba(255,255,255,.04); border-radius: 8px; font-size: 11px; margin-top: 10px; text-align: center; }
.fssim-pro-tip { background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(22,163,74,.06)); border-radius: 12px; padding: 14px; border: 1px solid rgba(245,197,24,.3); margin-bottom: 12px; }
.fssim-pro-badge { display: inline-block; background: linear-gradient(135deg, #f5c518, #34d399); color: #fff; padding: 3px 8px; font-size: 9px; font-weight: 800; border-radius: 4px; margin-bottom: 8px; }
.fssim-pro-tip b { display: block; color: #fff; margin-bottom: 8px; }
.fssim-pro-tip ul { margin: 0; padding-left: 18px; }
.fssim-pro-tip li { padding: 4px 0; font-size: 11px; color: #d8d8e0; }
.fssim-trend-head { font-size: 10px; color: #888; margin-bottom: 6px; font-weight: 800; text-transform: uppercase; }
.fssim-spark { padding: 6px 0; font-size: 11px; }
.fssim-spark b { color: #fff; margin-right: 6px; }

/* THEME SWITCH SIM */
.thsim-mockup { padding: 20px; border-radius: 14px; transition: all .25s ease; min-height: 320px; }
.thsim-light { background: #f4f5f8; color: #15161c; }
.thsim-dark { background: #0a0a0c; color: #f5f5f7; }
.thsim-transition { background: linear-gradient(135deg, #f4f5f8, #0a0a0c); color: #aaa; position: relative; }
.thsim-bar { font-family: var(--font-head); font-weight: 800; padding: 10px; border-radius: 8px; margin-bottom: 14px; }
.thsim-light .thsim-bar { background: #fff; }
.thsim-dark .thsim-bar { background: #17171c; color: #f5f5f7; }
.thsim-transition .thsim-bar { background: rgba(255,255,255,.5); color: #444; }
.thsim-card-light, .thsim-card-dark { padding: 12px; border-radius: 10px; margin-bottom: 8px; }
.thsim-card-light { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.thsim-card-dark { background: #17171c; }
.thsim-card-light b, .thsim-card-dark b { display: block; font-weight: 800; margin-bottom: 2px; }
.thsim-card-light span, .thsim-card-dark span { font-size: 11px; color: #888; }
.thsim-toggle { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: rgba(0,0,0,.05); border-radius: 8px; margin-top: 14px; }
.thsim-dark .thsim-toggle { background: rgba(255,255,255,.05); }
.thsim-tg-on { color: #6ee0a8; font-weight: 800; }
.thsim-tg-off { color: #aaa; }
.thsim-anim-card { padding: 14px; background: rgba(245,197,24,.15); border-radius: 10px; text-align: center; color: #f5c518; font-weight: 800; }
.thsim-anim-card b { display: block; margin-bottom: 2px; }
.thsim-anim-card span { display: block; font-size: 11px; color: #f5c518; opacity: .8; }
.thsim-progress-bar { height: 4px; background: linear-gradient(90deg, var(--accent), #f5c518); border-radius: 2px; margin: 14px 0; animation: thsimProgress 1.4s ease-out infinite; transform-origin: left; }
@keyframes thsimProgress { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
.thsim-hint { font-size: 11px; color: #888; text-align: center; }
.thsim-tech { color: #d8d8e0; padding: 14px; }
.thsim-tech-row { padding: 10px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px; font-size: 11px; }
.thsim-tech-row b { color: #f5c518; margin-right: 6px; }
.thsim-tech-row code { background: rgba(0,0,0,.4); padding: 2px 6px; border-radius: 4px; font-family: var(--font-mono, monospace); color: #6ee0a8; }

/* PERFORMANCE SIM */
.perfsim-screen { color: #d8d8e0; font-size: 12px; padding: 14px; min-height: 380px; }
.perfsim-vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 14px; }
.perfsim-vital { padding: 12px 6px; border-radius: 10px; text-align: center; }
.perfsim-good { background: rgba(110,224,168,.12); border: 1px solid rgba(110,224,168,.3); }
.perfsim-vital-num { font-family: var(--font-head); font-weight: 800; color: #6ee0a8; font-size: 16px; }
.perfsim-vital span { display: block; font-size: 9px; color: #aaa; }
.perfsim-rating { color: #6ee0a8 !important; font-weight: 700 !important; }
.perfsim-bench { padding: 12px; background: rgba(255,255,255,.04); border-radius: 10px; }
.perfsim-bench > div:first-child { font-size: 11px; color: #888; margin-bottom: 8px; font-weight: 700; }
.perfsim-bench-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12px; }
.perfsim-bench-row:first-child { color: #f5c518; }
.perfsim-bench-row:first-child b { color: #6ee0a8; }
.perfsim-bench-row b { color: #fff; font-weight: 800; }
.perfsim-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.perfsim-stack { padding: 12px; background: rgba(255,255,255,.04); border-radius: 10px; }
.perfsim-stack b { display: block; color: #f5c518; font-weight: 800; font-size: 11px; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .5px; }
.perfsim-stack span { display: block; color: #fff; font-weight: 700; }
.perfsim-stack .muted { color: #888; font-size: 10px; margin-top: 4px; font-weight: 400; }
.perfsim-sw { background: rgba(0,0,0,.3); border-radius: 10px; padding: 10px; margin-bottom: 12px; }
.perfsim-sw-row { padding: 8px; background: rgba(255,255,255,.04); border-radius: 6px; margin-bottom: 4px; font-size: 11px; }
.perfsim-sw-row b { margin-right: 6px; }
.perfsim-sw-cached b { color: #6ee0a8; }
.perfsim-sw-net b { color: #f5c518; }
.perfsim-sw-update b { color: var(--accent); }
.perfsim-result { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px; background: linear-gradient(135deg, rgba(110,224,168,.12), rgba(245,197,24,.06)); border-radius: 10px; border: 1px solid rgba(110,224,168,.3); }
.perfsim-result > div { font-size: 11px; color: #aaa; }
.perfsim-result > b { color: #6ee0a8; font-weight: 800; }
.perfsim-gestures { padding: 8px; }
.perfsim-g-row { display: grid; grid-template-columns: 40px 90px 1fr; gap: 10px; padding: 12px; background: rgba(255,255,255,.04); border-radius: 8px; margin-bottom: 6px; align-items: center; }
.perfsim-g-row span:first-child { font-size: 22px; text-align: center; }
.perfsim-g-row b { color: #fff; font-weight: 800; }
.perfsim-g-row span:last-child { color: #aaa; font-size: 11px; }

/* v224: keyboard hints in tour controls */
.tour-keys { font-size: 10px; color: #666; text-align: center; padding: 6px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.04); }
.tour-keys b { color: var(--accent); padding: 1px 5px; background: rgba(22,163,74,.1); border-radius: 3px; font-family: var(--font-mono, monospace); }

/* v229: Live-event Spoiler prompt modal */
.live-spoiler-ov { z-index: 1100; }
.live-spoiler-modal { max-width: 380px; margin: 80px auto; background: var(--bg); color: var(--txt);
  border-radius: 16px; padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.4); border: 1px solid var(--line);
  animation: tourModalIn .4s cubic-bezier(.16,1,.3,1); }
.live-spoiler-head { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 12px; }
.live-spoiler-head b { color: var(--accent); }
.live-spoiler-pulse { width: 10px; height: 10px; background: var(--accent); border-radius: 50%; animation: lnsLivePulse 1.2s ease-in-out infinite; flex: 0 0 10px; }
.live-spoiler-body { font-size: 13px; line-height: 1.5; color: var(--txt-dim); margin-bottom: 18px; }
.live-spoiler-body b { color: var(--txt); }
.live-spoiler-actions { display: flex; flex-direction: column; gap: 8px; }
.live-spoiler-actions button { padding: 12px; border-radius: 10px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid var(--line); background: var(--card); color: var(--txt); }
.live-spoiler-keep:hover { background: var(--card-2); }
.live-spoiler-on { background: linear-gradient(135deg, var(--accent), var(--accent-2)) !important; color: #fff !important; border-color: var(--accent) !important; }

/* v230: Spoiler reveal animation — applied programmatically to .pick-row
   and friends when user toggles Spoiler OFF after a card has ended. Each
   row fades + lifts in with an incrementing delay so the results land
   like the sim shows them in Demo Lab. */
@keyframes spoilerRevealRow {
  from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0)  scale(1);   filter: blur(0); }
}

/* v235: theme toggle in topbar — shows ☀️ in light mode, 🌙 in dark mode */
.tg-theme { padding: 0 8px; font-size: 16px; min-width: 36px; }
.tg-theme .tg-theme-light { display: inline; }
.tg-theme .tg-theme-dark { display: none; }
html.light .tg-theme .tg-theme-light { display: inline; }
html.light .tg-theme .tg-theme-dark { display: none; }
html:not(.light) .tg-theme .tg-theme-light { display: none; }
html:not(.light) .tg-theme .tg-theme-dark { display: inline; }

/* v236: Win-share auto-offer modal */
.win-share-ov { z-index: 1100; }
.win-share-modal { max-width: 360px; margin: 80px auto; background: linear-gradient(135deg, rgba(245,197,24,.1), rgba(22,163,74,.06));
  border: 1px solid rgba(245,197,24,.3); color: var(--txt); border-radius: 16px; padding: 26px 22px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.4); animation: tourModalIn .5s cubic-bezier(.16,1,.3,1); }
.win-share-confetti { font-size: 48px; animation: pwsimPop 1s ease-out; }
.win-share-headline { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: var(--accent); letter-spacing: 1px; margin: 6px 0 14px; }
.win-share-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px; }
.win-share-stats div { background: rgba(255,255,255,.04); padding: 10px 4px; border-radius: 10px; }
.win-share-stats b { display: block; font-weight: 800; color: var(--gold,#f5c518); font-size: 18px; }
.win-share-stats span { display: block; font-size: 10px; color: var(--txt-dim); margin-top: 2px; }
.win-share-cta-text { font-size: 12px; color: var(--txt-dim); line-height: 1.5; margin-bottom: 18px; }
.win-share-actions { display: flex; flex-direction: column; gap: 8px; }
.win-share-go { padding: 13px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border: none; border-radius: 10px; font-weight: 800; font-size: 13px; cursor: pointer; }
.win-share-skip { padding: 12px; background: transparent; color: var(--txt-dim); border: 1px solid var(--line); border-radius: 10px; font-weight: 700; cursor: pointer; }

/* v239: Combo-Pick inline entry — sits under Lock button in Quick Pick.
   Replaced the heavy standalone gold card on event detail to clean up
   visual hierarchy (Epir feedback "event card zu bunt").
   Style: low-saturation gold accent so it whispers "Pro feature" without
   yelling. Tap target sized for thumbs. */
.qp-combo-entry {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 14px 16px; margin-top: 12px;
  background: linear-gradient(135deg, rgba(245,197,24,.06), rgba(245,197,24,.02));
  border: 1px solid rgba(245,197,24,.3);
  border-radius: 14px;
  color: var(--txt);
  text-align: left; cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, transform .1s ease;
}
.qp-combo-entry:hover { background: linear-gradient(135deg, rgba(245,197,24,.12), rgba(245,197,24,.04)); }
.qp-combo-entry:active { transform: scale(.99); }
.qp-combo-icon {
  font-size: 22px; line-height: 1;
  flex: 0 0 28px; text-align: center; color: var(--gold, #f5c518);
}
.qp-combo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qp-combo-title { font-weight: 800; font-size: 13px; color: var(--gold, #f5c518); }
.qp-combo-sub { font-size: 11px; color: var(--txt-dim); line-height: 1.35; }
.qp-combo-cta {
  font-size: 11px; font-weight: 800; color: var(--gold, #f5c518);
  flex: 0 0 auto;
  padding: 6px 10px;
  background: rgba(245,197,24,.1);
  border-radius: 6px;
  letter-spacing: .5px;
  white-space: nowrap;
}

/* v240: empty state — used when no upcoming/finished events. Was a bare
   "No events" line; now a centered hero with icon + clear next action so
   first-time visitors don't bounce on a blank screen. */
.empty-state { text-align: center; padding: 60px 24px 40px; max-width: 380px; margin: 0 auto; }
.empty-state-icon { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.empty-state-title { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--txt); margin-bottom: 6px; }
.empty-state-sub { font-size: 13px; color: var(--txt-dim); line-height: 1.5; margin-bottom: 18px; }
.empty-state-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.empty-state-cta { padding: 10px 18px; background: var(--card-2); color: var(--txt); border: 1px solid var(--line);
  border-radius: 999px; font-weight: 700; font-size: 12px; cursor: pointer; }
.empty-state-cta:hover { background: var(--card); }

/* v240: Boxing-Q4 teaser — single-line strip in events tab. Dismissable
   per-session so it doesn't nag. Subtle yellow accent — "coming soon"
   vibe, not competing with real cards above. */
.boxing-teaser { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 24px 0 8px;
  background: linear-gradient(135deg, rgba(245,197,24,.06), rgba(245,197,24,.02));
  border: 1px dashed rgba(245,197,24,.4); border-radius: 12px; position: relative; }
.boxing-teaser-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--txt-dim);
  font-size: 14px; cursor: pointer; padding: 4px 8px; line-height: 1; }
.boxing-teaser-close:hover { color: var(--txt); }
.boxing-teaser-icon { font-size: 26px; flex-shrink: 0; }
.boxing-teaser-body { flex: 1; min-width: 0; }
.boxing-teaser-title { font-weight: 800; font-size: 13px; color: var(--gold, #f5c518); }
.boxing-teaser-sub { font-size: 11px; color: var(--txt-dim); line-height: 1.4; margin-top: 2px; }
.boxing-teaser-tag { background: rgba(245,197,24,.15); color: var(--gold, #f5c518); font-weight: 800;
  font-size: 10px; padding: 3px 8px; border-radius: 4px; letter-spacing: 1px; flex-shrink: 0; }

/* v241: hash-color group avatar — appears at the start of each group row.
   bg/fg are set inline by JS from a deterministic hash, so the same name
   always renders the same color. */
.grp-row-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 800; font-size: 16px;
  flex-shrink: 0; font-family: var(--font-head); letter-spacing: .5px;
  background-image: linear-gradient(160deg, rgba(255,255,255,.18), rgba(0,0,0,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.12); }
/* Owner-set group picture (v323): the list-card avatar carries the image when
   one is set; otherwise the hash-color initial above still renders. */
.grp-row-avatar.has-img { background: var(--card-2); overflow: hidden; }
.grp-row-avatar.has-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* Group-detail lean header (v324): back + avatar + name/privacy + actions, one
   compact bar (no card). Replaces the old big head card — "insgesamt schlank". */
.gd-head { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; }
.gd-head-back { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none;
  background: none; color: var(--txt); font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.gd-head-back:hover { background: var(--card-2); }
.gd-head-av { position: relative; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.gd-head-av.is-admin { cursor: pointer; }
.gd-head-img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.gd-head-initial { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 17px; font-family: var(--font-head);
  box-shadow: 0 1px 2px rgba(0,0,0,.15); }
.gd-head-cam { position: absolute; right: -2px; bottom: -2px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 9px; line-height: 18px; text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); border: 2px solid var(--bg); transition: transform .12s; }
.gd-head-av.is-admin:hover .gd-head-cam, .gd-head-av.is-admin:focus-visible .gd-head-cam { transform: scale(1.12); }
.gd-head-id { flex: 1; min-width: 0; }
.gd-head-name { font-weight: 800; font-size: 17px; font-family: var(--font-head); line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-head-vrf { color: var(--accent); font-size: 13px; }
.gd-head-sub { font-size: 12px; color: var(--txt-dim); margin-top: 1px; }
.gd-head-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* Global hero card: round logo avatar + identity row (logo replaced the 🌍). */
.grp-hero-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.grp-hero-logo { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: var(--card-2); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.grp-hero-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* openGroupEdit — picture section: round preview + upload/remove buttons. */
.ged-image-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ged-image-preview { width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--card-2); }
.ged-image-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ged-image-initial { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 26px; font-family: var(--font-head); }
.ged-image-col { min-width: 0; }
.ged-image-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ged-image-actions .btn { width: auto; margin-top: 0; display: inline-flex; align-items: center; }
.ged-image-remove { color: var(--txt-dim); }

/* v241: group/user search — first-class action at the top of Groups tab.
   Pill-shaped, full-width on mobile, with leading magnifier + trailing
   clear button. Live-filters .group-row elements client-side. */
.grp-search-wrap { display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 999px;
  margin: 14px 0 8px; height: 42px; }
.grp-search-icon { font-size: 14px; color: var(--txt-dim); flex-shrink: 0; }
.grp-search-input { flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--txt); font-size: 13px; font-family: inherit; }
.grp-search-input::placeholder { color: var(--txt-dim); }
.grp-search-clear { background: none; border: none; color: var(--txt-dim); cursor: pointer;
  padding: 4px 8px; font-size: 14px; }
.grp-search-clear:hover { color: var(--txt); }

/* v244: coins badge on profile header — small pill next to streak badges */
.coins-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  background: linear-gradient(135deg, rgba(245,197,24,.15), rgba(245,197,24,.06));
  border: 1px solid rgba(245,197,24,.3); border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--gold, #f5c518); margin-top: 6px; }

/* v245: tappable event-hero — adds cursor + hover feedback + a small
   discoverable hint chip in the top-right so users notice the card
   is interactive. The hint only shows on the event-detail hero
   (where it makes contextual sense), not on the home-spotlight which
   already has its own PICK NOW button. */
.ev-hero-tappable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.ev-hero-tappable:hover { transform: translateY(-2px); box-shadow: 0 12px 32px -8px rgba(22,163,74,.3); }
.ev-hero-tappable:active { transform: translateY(0); }
/* In den Fluss gelegt statt absolut — überlappte sonst die Status-Chips
   in .ev-hero-top auf schmalen Screens (Epir 2026-06-12). */
.ev-hero-tap-hint { display: table; margin: 0 0 8px auto; font-size: 11px; font-weight: 700;
  color: var(--accent); background: rgba(22,163,74,.1); border: 1px solid rgba(22,163,74,.3);
  padding: 4px 10px; border-radius: 999px; pointer-events: none;
  animation: heroTapPulse 2s ease-in-out infinite; }
/* Finished events: calm, non-pulsing "tap → view result" hint (no pick urgency). */
.ev-hero-tap-hint.ev-hero-tap-hint-calm { animation: none; color: var(--txt-dim);
  background: rgba(255,255,255,.08); border-color: var(--line); }
@keyframes heroTapPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(22,163,74,0); }
}

/* ── "X Picks offen"-Nudge (retention) — slim, tappable, crimson ───────── */
.openpick-host { margin: 10px 0 2px; }
.openpick-nudge {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: linear-gradient(135deg, rgba(22,163,74,.15), rgba(52,211,153,.09));
  border: 1px solid rgba(22,163,74,.42); border-radius: 14px; padding: 12px 14px; color: var(--txt);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease;
}
.openpick-nudge:active { transform: scale(.99); }
.openpick-nudge:hover { box-shadow: var(--shadow-md); border-color: rgba(22,163,74,.6); }
.openpick-nudge.live { border-color: rgba(22,163,74,.7); animation: opnPulse 2.4s ease-in-out infinite; }
@keyframes opnPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } 50% { box-shadow: 0 0 0 4px rgba(22,163,74,.10); } }
.opn-badge {
  flex: 0 0 auto; min-width: 30px; height: 30px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 900; font-size: 15px;
  border-radius: 9px; box-shadow: 0 2px 8px rgba(22,163,74,.45);
}
.opn-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.opn-title { font-weight: 800; font-size: 14px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.opn-sub { font-size: 12px; color: var(--txt-dim); line-height: 1.2; }
.opn-go { flex: 0 0 auto; font-size: 22px; font-weight: 700; color: var(--accent); opacity: .9; }

/* ── Belt-Leiter (rank ladder) — BJJ-style progression on profile ──────── */
.belt-card { display: flex; flex-direction: column; gap: 10px; }
.belt-kicker { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--txt-dim); }
.belt-main { display: flex; align-items: center; gap: 12px; }
.belt-bar {
  flex: 1 1 auto; position: relative; border-radius: 5px; background: var(--bc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4); overflow: hidden;
}
.belt-tip {
  position: absolute; right: 12%; top: 0; bottom: 0; width: 30%; background: var(--tip);
  display: flex; align-items: center; justify-content: center; gap: 4px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.12), inset -1px 0 0 rgba(0,0,0,.3);
}
.belt-stripe { width: 3px; height: 58%; background: #eef0f4; border-radius: 1px; opacity: .92; }
.belt-meta { flex: 0 0 auto; text-align: right; }
.belt-name { font-weight: 900; font-size: 16px; }
.belt-pts { font-size: 12px; color: var(--txt-dim); font-weight: 700; }
.belt-prog { height: 7px; border-radius: 6px; background: var(--card-2); overflow: hidden; }
.belt-prog > span { display: block; height: 100%; border-radius: 6px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.belt-next { font-size: 12.5px; color: var(--txt-dim); font-weight: 600; }
.belt-ladder { display: flex; align-items: flex-start; justify-content: space-between; gap: 5px; margin-top: 2px; }
.belt-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.belt-dot { width: 100%; height: 9px; border-radius: 3px; position: relative; background: var(--bc);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.belt-dot::after { content: ""; position: absolute; right: 18%; top: 0; bottom: 0; width: 26%;
  background: var(--tip); border-radius: 0 2px 2px 0; }
.belt-step-min { font-size: 10px; font-weight: 700; color: var(--txt-dim); }
.belt-step.todo { opacity: .42; }
.belt-step.on .belt-dot { height: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 0 0 2px var(--accent); }
.belt-step.on .belt-step-min { color: var(--txt); }

/* ── v296 Groups redesign — community hero + richer cards ─────────────────── */
/* Overlapping member-avatar stack (hero + cards). Sizes set inline per use. */
.face-stack { display: inline-flex; align-items: center; vertical-align: middle; }
.face-stack .face, .face-stack .more {
  border-radius: 50%; border: 2px solid var(--card); margin-left: -9px;
  display: flex; align-items: center; justify-content: center;
  font: 800 9px system-ui; color: #fff; box-sizing: border-box; object-fit: cover; flex: 0 0 auto;
}
.face-stack .face:first-child { margin-left: 0; }
.face-stack .more { background: var(--card-2); color: var(--txt-dim); }

/* Global community hero (top of the Groups tab). */
.grp-hero {
  position: relative; border-radius: var(--r-lg); padding: 16px 16px 14px; margin-bottom: 16px;
  overflow: hidden; cursor: pointer;
  background: radial-gradient(135% 115% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 56%),
              linear-gradient(162deg, var(--card-2), var(--card));
  border: 1px solid var(--line); transition: transform var(--t-fast) var(--ease-out);
}
.grp-hero:active { transform: scale(.99); }
.grp-hero.is-live {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 26%, transparent), var(--shadow-md);
}
.grp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.grp-hero-title { font: 800 19px system-ui; color: var(--txt); display: flex; align-items: center; gap: 7px; }
.grp-hero-title .gl { font-size: 21px; }
.grp-hero-title .v { color: var(--blue); font-size: 14px; }
.grp-hero-sub { color: var(--txt-dim); font-size: 13px; margin-top: 3px; }
.grp-live-badge {
  display: inline-flex; align-items: center; gap: 5px; font: 800 11px system-ui; letter-spacing: .03em;
  color: #fff; background: var(--accent); padding: 4px 10px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto;
}
.grp-live-badge .dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: grp-pulse 1.4s infinite; }
@keyframes grp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.grp-hero-people { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.grp-hero-people .cnt { color: var(--txt); font-weight: 700; font-size: 13px; }
.grp-hero-next {
  display: flex; align-items: center; gap: 6px; margin-top: 12px; padding: 8px 11px; border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 60%, transparent); border: 1px solid var(--line);
  color: var(--txt); font-size: 12.5px;
}
.grp-hero-cta {
  margin-top: 14px; width: 100%; border: none; border-radius: 12px; padding: 12px;
  font: 800 15px system-ui; color: #fff; background: var(--accent); cursor: pointer;
}

/* Richer "Meine Gruppen" cards: faces row + medal-colored rank. */
.group-row-v3 .grp-row-faces { display: flex; align-items: center; gap: 8px; }
.group-row-v3 .grp-row-count { color: var(--txt-dim); font-size: 12.5px; }
.group-row-v3 .grp-row-lock { font-size: 11px; opacity: .8; }
.group-row-v3 .grp-row-rank-num { color: var(--txt-dim); }  /* muted base; medals below carry the top-3 hierarchy */
.grp-row-rank.medal-gold .grp-row-rank-num { color: var(--accent); }
.grp-row-rank.medal-silver .grp-row-rank-num { color: var(--silver); }
.grp-row-rank.medal-bronze .grp-row-rank-num { color: var(--bronze); }

/* ══════════════ ULTIPICK: score tipping UI ══════════════ */
.qp-score-row { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 12px 0 6px; }
.score-stepper { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.score-stepper .step-btn {
  width: 56px; height: 40px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card-2); color: var(--txt); font-size: 20px; font-weight: 800;
  cursor: pointer; box-shadow: var(--shadow-sm);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
@media (hover: hover) { .score-stepper .step-btn:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.score-stepper .step-btn:active { transform: scale(.92); background: var(--accent); border-color: var(--accent); color: #fff; }
.score-num {
  font-family: "Oswald", sans-serif; font-size: 48px; font-weight: 700; line-height: 1;
  min-width: 58px; text-align: center; color: var(--txt); font-variant-numeric: tabular-nums;
}
.score-colon { font-family: "Oswald", sans-serif; font-size: 40px; font-weight: 700; color: var(--txt-dim); opacity: .6; padding-bottom: 2px; }
/* Schnell-Chips: sauberes 4er-Raster statt ausgefranstem Umbruch */
.score-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin-top: 12px; border-radius: 14px; }
.score-chips .seg-btn { min-width: 0; padding: 9px 0; border-radius: 10px;
  background: var(--card-2); font-variant-numeric: tabular-nums; font-weight: 700; }
.score-chips .seg-btn.sel { background: var(--accent); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.qp-points-hint { text-align: center; font-size: 12px; margin-top: 10px; }

/* centre cell of a match row: score / kickoff time */
.vs.match-score { font-family: "Oswald", sans-serif; font-size: 24px; font-weight: 700; color: var(--txt); min-width: 56px; }
.vs.match-score.live { color: #ef4444; animation: pulse 1.2s ease-in-out infinite; }
.vs.match-ko { font-size: 13px; font-weight: 700; color: var(--txt-dim); min-width: 52px; }

/* community 3-way bar: home (accent) / draw (grey) / away (blue) */
.cbar .cb-draw { background: var(--txt-dim); opacity: .55; height: 100%; }

/* profile favorites chips */
.profile-favs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fav-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--txt);
  background: var(--card-2);
}
.fav-chip img { width: 16px; height: 16px; object-fit: contain; }

/* onboarding favorites */
.onb-fav-leagues { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; max-height: 220px; overflow-y: auto; }
.onb-lg-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card-2);
  color: var(--txt); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.onb-lg-chip img { width: 20px; height: 20px; object-fit: contain; }
.onb-lg-chip.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); }
.onb-fav-search { width: 100%; margin: 12px 0 8px; }
.onb-fav-teams {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px;
  max-height: 240px; overflow-y: auto; padding: 2px;
}
.onb-team-chip {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card-2);
  color: var(--txt); font-size: 11.5px; font-weight: 600; cursor: pointer; text-align: center;
}
.onb-team-chip img { width: 34px; height: 34px; object-fit: contain; }
.onb-team-chip.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--card-2)); }
.onb-fav-player { width: 100%; margin-top: 12px; }
.onb-fav-hint { font-size: 11.5px; margin-top: 10px; text-align: center; }

/* ══════════════ ULTIPICK: calendar home (Epir 2026-06-12) ══════════════ */
.cal-strip { display: flex; gap: 7px; overflow-x: auto; padding: 6px 2px 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cal-strip::-webkit-scrollbar { display: none; }
.cal-day { flex: 0 0 auto; width: 56px; padding: 10px 0 11px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); color: var(--txt);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; position: relative; box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease-out),
              background var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              transform var(--t-fast) var(--ease-out); }
.cal-day:active { transform: scale(.95); }
.cal-day .cal-num { font-weight: 800; font-size: 17px; line-height: 1;
  font-variant-numeric: tabular-nums; }
.cal-day .cal-dow { font-size: 9.5px; font-weight: 700; color: var(--txt-dim);
  text-transform: uppercase; letter-spacing: .6px; }
.cal-day.has::after { content: ""; position: absolute; bottom: 5px; left: 50%;
  transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); opacity: .8; }
/* aktiver Tag = satte grüne Pille (gefüllt, nicht nur umrandet) */
.cal-day.on { border-color: transparent; background: var(--accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 38%, transparent); }
.cal-day.on .cal-num { color: #fff; }
.cal-day.on .cal-dow { color: rgba(255,255,255,.85); }
.cal-day.on.has::after { background: #fff; }

.cal-list { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.league-sec { padding: 12px 14px 6px; }
.league-head { display: flex; align-items: center; gap: 11px; width: 100%;
  background: none; border: none; padding: 2px 0 10px; cursor: pointer;
  color: var(--txt); text-align: left; }
.league-badge-tile { flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: var(--card-2); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; }
.league-badge { width: 22px; height: 22px; object-fit: contain; flex: none; display: block; }
.league-head-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.league-name { font-weight: 800; font-size: 15px; letter-spacing: .1px; }
.league-country { font-size: 11.5px; color: var(--txt-dim); }
.league-chev { color: var(--txt-dim); opacity: .7; font-size: 18px; line-height: 1; padding-right: 2px; }

.league-matches { display: flex; flex-direction: column; }
.ml-row { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 2px; border: none; border-top: 1px solid
  color-mix(in srgb, var(--line) 65%, transparent);
  background: none; cursor: pointer; color: var(--txt); text-align: left;
  transition: background var(--t-fast) var(--ease-out); }
.ml-row:active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
@media (hover: hover) { .ml-row:hover { background: color-mix(in srgb, var(--txt) 3%, transparent); } }
.ml-left { flex: 0 0 48px; text-align: center; }
.ml-time { font-size: 13px; font-weight: 700; color: var(--txt-dim);
  font-variant-numeric: tabular-nums; }
.ml-score { display: flex; flex-direction: column; gap: 5px; align-items: center;
  font-size: 14px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.ml-score.live b { color: #ef4444; }
.ml-livedot { color: var(--accent); font-size: 7px; animation: pulse 1.6s ease-in-out infinite; }
.ml-teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.ml-team { display: flex; align-items: center; gap: 9px; font-size: 14px;
  font-weight: 600; letter-spacing: .1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-team img { width: 21px; height: 15px; object-fit: cover; flex: none;
  border-radius: 3px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--txt) 14%, transparent); }
.ml-team-fb { width: 21px; height: 15px; flex: none; border-radius: 3px; background: var(--card-2); }
/* Tipp-Chips: gefüllt statt umrandet — ruhiger, moderner */
.ml-tip { flex: 0 0 auto; font-size: 12px; font-weight: 800; padding: 5px 11px;
  border-radius: 999px; border: none; color: var(--txt-dim); background: var(--card-2);
  font-variant-numeric: tabular-nums; }
.ml-tip.cta { color: #fff; background: var(--accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
.ml-tip.ok { color: #3fb950; background: rgba(63,185,80,.13); }
.ml-tip.miss { color: #f85149; background: rgba(248,81,73,.12); }
.ml-pts { margin-left: 5px; color: #3fb950; }

/* ── deep-green bottom bar (Referenz-Look, Epir 2026-06-12) ───────────── */
.bottomnav { background: #0c3a2b; border-top: 1px solid rgba(10,48,35,.9);
  box-shadow: 0 -10px 28px rgba(4, 24, 16, .28); }
.bottomnav .nav-btn { color: rgba(236, 253, 243, .60);
  transition: color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.bottomnav .nav-btn:active { transform: scale(.93); }
.bottomnav .nav-btn.active { color: #fff; }
.bottomnav .nav-btn.active svg { filter: drop-shadow(0 0 7px rgba(74, 222, 128, .60)); }
.bottomnav .nav-btn > span[data-i18n] { letter-spacing: .02em; }
.nav-fab { background: linear-gradient(180deg, #25cf63, #15953f); color: #fff;
  border-color: #0c3a2b;
  box-shadow: 0 6px 16px rgba(8, 48, 30, .45), inset 0 1px 0 rgba(255,255,255,.25); }
.nav-fab:hover { filter: brightness(1.05); }
.nav-fab-label { color: rgba(236, 253, 243, .72); letter-spacing: .02em; }
html.light .bottomnav { background: #0c3a2b; border-top-color: rgba(10,48,35,.9); }

/* ── Folgen (Ligen + Verein) & Gruppen-Wettbewerbs-Scope (Epir 2026-06-12) ── */
.cal-follow-row { display: flex; align-items: center; gap: 8px; width: 100%;
  margin: 0 0 12px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--txt-dim);
  cursor: pointer; text-align: left; box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out); }
.cal-follow-row svg { color: var(--accent); flex: none; }
.cal-follow-row .cal-follow-txt { flex: 1; min-width: 0; font-size: 12.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-follow-row .cal-follow-txt b { color: var(--txt); font-weight: 700; }
@media (hover: hover) { .cal-follow-row:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } }
.cal-follow-row:active { transform: scale(.985); }

.cal-more-btn { display: block; width: 100%; margin: 2px 0 10px; padding: 11px;
  border-radius: 14px; border: 1px dashed var(--line); background: none;
  color: var(--txt-dim); font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out); }
@media (hover: hover) { .cal-more-btn:hover { color: var(--txt); border-color: var(--txt-dim); } }
.cal-extra { opacity: .82; }

/* Lieblingsverein im Kalender: markierte Zeile + Stern; eigene Mini-Sektion */
.ml-row.fav { background: color-mix(in srgb, var(--accent) 5%, transparent);
  border-radius: 12px; border-top-color: transparent; }
.ml-fav-star { color: var(--accent); font-size: 11px; vertical-align: 1px; }
.cal-fav-sec { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.cal-fav-sec .league-badge-tile { color: var(--accent); font-size: 16px; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 12%, var(--card-2)); }

/* Folgen-Sheet: Team-Zeile */
.fs-team-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.fs-team-row .fav-chip img { width: 18px; height: 18px; }
.fs-team-picker .onb-fav-teams { max-height: 200px; }

/* Gruppen: Scope-Anzeige im Kopf */
.gd-head-comps { color: var(--txt-dim); font-size: 11.5px; }

/* ── Tor-Timeline: Torschütze · Vorlage · Minute (Epir 2026-06-13) ───────── */
.goals-host:empty { display: none; }
.match-goals { display: flex; flex-direction: column; gap: 6px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.mg-row { display: flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.25;
  min-width: 0; }
.mg-row.mg-away { flex-direction: row-reverse; text-align: right; }
.mg-min { flex: none; min-width: 30px; font-weight: 700; color: var(--txt-dim);
  font-variant-numeric: tabular-nums; }
.mg-row.mg-away .mg-min { text-align: right; }
.mg-ball { flex: none; font-size: 11px; opacity: .9; }
.mg-scorer { font-weight: 700; color: var(--txt); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; }
.mg-assist { font-weight: 600; color: var(--txt-dim); }
.mg-assist::before { content: "("; }
.mg-assist::after { content: ")"; }
.mg-kind { font-weight: 600; color: var(--accent); font-size: 11.5px; }

/* Hero (dunkler Verlauf): helle Schrift für die Tore des Top-Spiels */
.ev-hero-goals { margin-top: 8px; }
.ev-hero-goals .match-goals { border-top-color: rgba(255,255,255,.18);
  align-items: center; }
.ev-hero-goals .mg-scorer { color: #fff; }
.ev-hero-goals .mg-min, .ev-hero-goals .mg-assist { color: rgba(255,255,255,.78); }
.ev-hero-goals .mg-kind { color: var(--accent-2); }

/* ── Tor-Team-Flagge in der Timeline (Epir 2026-06-13) ──────────────────── */
.mg-team { width: 18px; height: 13px; object-fit: cover; flex: none; border-radius: 2.5px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--txt) 14%, transparent); }
.mg-row.mg-away .mg-team { order: 0; }
.ev-hero-goals .mg-team { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

/* ── Stadion/Ort-Zeile auf der Match-Card ──────────────────────────────── */
.match-venue { font-size: 12px; color: var(--txt-dim); margin: -2px 0 8px; padding: 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tabelle / Standings (Epir 2026-06-13) ─────────────────────────────── */
.tbl-comp-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tbl-comp-strip::-webkit-scrollbar { display: none; }
.tbl-comp-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--card); color: var(--txt); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-sm);
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-base) var(--ease-out); }
.tbl-comp-chip img { width: 18px; height: 18px; object-fit: contain; }
.tbl-comp-chip.on { border-color: transparent; background: var(--accent); color: #fff;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 34%, transparent); }
.tbl-comp-chip:active { transform: scale(.96); }

.tbl-group { padding: 6px 8px 8px; margin-bottom: 12px; }
.tbl-group-head { font-family: var(--font-brand); font-weight: 700; font-size: 13px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--txt-dim);
  padding: 8px 6px 6px; }
.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.tbl th { font-size: 11px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase;
  letter-spacing: .03em; padding: 6px 4px; text-align: center; }
.tbl th.tbl-team-h { text-align: left; padding-left: 4px; }
.tbl td { padding: 8px 4px; text-align: center; font-size: 13.5px; font-weight: 600;
  border-top: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.tbl-pos { color: var(--txt-dim); font-weight: 800; width: 22px; }
.tbl-team { text-align: left !important; display: flex; align-items: center; gap: 8px;
  min-width: 0; }
.tbl-team img, .tbl-team .tbl-team-fb { width: 20px; height: 14px; object-fit: cover; flex: none;
  border-radius: 2.5px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--txt) 12%, transparent); }
.tbl-team .tbl-team-fb { background: var(--card-2); }
.tbl-team-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl-pts { font-weight: 800; color: var(--txt); }
.tbl tr.tbl-qual td.tbl-pos { color: var(--accent); }
.tbl tr.tbl-qual td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.tbl tr.tbl-fav td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.tbl tr.tbl-fav .tbl-team-name::after { content: " ★"; color: var(--accent); font-size: 11px; }
.tbl-legend { display: flex; align-items: center; gap: 7px; font-size: 11.5px; padding: 2px 6px 8px; }
.tbl-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex: none;
  box-shadow: inset 3px 0 0 var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
/* Schmale Screens: Sieg/Unent./Niederlage + Tore ausblenden, Kern bleibt */
@media (max-width: 380px) { .tbl-hide-sm { display: none; } }
@media (max-width: 330px) { .tbl-hide-xs { display: none; } }

/* ── Live-Spielminute (Epir 2026-06-14) ─────────────────────────────────── */
/* Match-Card: Score + Minute als zentrierte Spalte (kein Flex-Umbruch) */
.match-score-col { display: flex; flex-direction: column; align-items: center; line-height: 1.05; gap: 2px; }
.match-live-min { display: block; font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #ef4444; font-variant-numeric: tabular-nums;
  animation: livepulse 1.2s ease-in-out infinite; }
.match-live-min.ht { color: var(--amber); animation: none; text-transform: uppercase;
  font-size: 10px; letter-spacing: .06em; }
/* Kalender-Zeile: Minute statt nacktem Live-Punkt */
.ml-min { display: block; font-size: 10px; font-weight: 800; color: #ef4444;
  margin-top: 2px; font-variant-numeric: tabular-nums; animation: livepulse 1.2s ease-in-out infinite; }
.ml-min.ht { color: var(--amber); animation: none; }
/* Hero-Status-Chip: Minute neben LIVE */
.ev-hero-status.live .ehs-min { font-variant-numeric: tabular-nums; opacity: .95; }

/* ── Spiele-Tab: LIVE-Banner + Top-Spiel-Spotlight (Epir 2026-06-14) ───────── */
.cal-live-banner { margin: 12px 0 4px; padding: 12px 14px; border-radius: 14px;
  border: 1px solid #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.20), rgba(239,68,68,.06));
  display: flex; flex-direction: column; gap: 9px; }
.clb-head { display: flex; align-items: center; gap: 8px; font-weight: 800;
  font-size: 12px; letter-spacing: .08em; color: #ef4444; }
.clb-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25); animation: livepulse 1.2s ease-in-out infinite; flex: 0 0 auto; }
.clb-more { margin-left: 2px; opacity: .7; font-weight: 700; }
.clb-match { display: flex; align-items: center; gap: 7px; font-weight: 700; font-size: 15px; }
.clb-match img { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; flex: 0 0 auto; }
.clb-vs { opacity: .55; margin: 0 1px; }
.clb-score { font-weight: 900; font-variant-numeric: tabular-nums; margin: 0 1px; }
.clb-tname { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clb-actions { display: flex; gap: 8px; }
.clb-btn { flex: 1; padding: 9px 10px; border-radius: 10px; font-weight: 800;
  font-size: 13px; border: none; cursor: pointer; }
.clb-go { background: var(--accent); color: #fff; }
.clb-chat { background: rgba(22,163,74,.14); color: var(--accent); border: 1px solid var(--accent); }

.cal-spotlight { margin: 10px 0 6px; padding: 14px; border-radius: 16px; color: #fff;
  background: linear-gradient(150deg, rgba(22,163,74,.96), rgba(18,110,56,.94));
  box-shadow: 0 8px 26px -12px rgba(22,163,74,.6); }
.cal-spotlight.live { background: linear-gradient(150deg, rgba(239,68,68,.96), rgba(150,28,28,.94));
  box-shadow: 0 8px 26px -12px rgba(239,68,68,.65); }
.cspot-tag { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; opacity: .96; margin-bottom: 12px; }
.cspot-tag.live { opacity: 1; }
.cspot-livetag { display: flex; align-items: center; gap: 6px; }
.cspot-livetag .clb-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.cspot-star { color: #ffe08a; }
.cspot-comp { margin-left: auto; opacity: .8; font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 12px; }
.cspot-teams { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cspot-team { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.cspot-team img { width: 46px; height: 46px; object-fit: contain; }
.cspot-fb { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.2); }
.cspot-team span { font-weight: 700; font-size: 13px; text-align: center; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cspot-mid { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0 6px; }
.cspot-score { font-size: 30px; font-weight: 900; line-height: 1; display: flex; gap: 5px; font-variant-numeric: tabular-nums; }
.cspot-score span { opacity: .7; }
.cspot-ko { font-size: 20px; font-weight: 800; opacity: .95; }
.cspot-status { font-size: 10px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px;
  border-radius: 999px; display: flex; align-items: center; gap: 5px; }
.cspot-status.live { background: #ef4444; color: #fff; animation: livepulse 1.2s ease-in-out infinite; }
.cspot-status.live .clb-dot { background: #fff; box-shadow: none; animation: none; }
.cspot-status.fin, .cspot-status.up { background: rgba(255,255,255,.22); color: #fff; }
.cspot-venue { text-align: center; font-size: 11px; opacity: .82; margin-top: 9px; }
.cspot-actions { display: flex; gap: 8px; margin-top: 12px; }
.cspot-btn { flex: 1; padding: 10px; border-radius: 11px; font-weight: 800; font-size: 13px;
  border: none; cursor: pointer; background: rgba(255,255,255,.18); color: #fff; }
.cspot-btn.primary { background: #fff; color: var(--accent); }
/* Onboarding: Nationen-/Vereins-Chips nutzen die Team-Chip-Styles; Flaggen rund */
.onb-fav-nations .onb-team-chip img { border-radius: 3px; }