/* Embed layout — prod-aligned (starterfive.com app.css tokens). Operator
   theme vars (--color-primary/--color-bg/...) still override the defaults
   below, but every component hard-references the --sfb-* token so the
   visual system stays consistent whether theming is on or off. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* === Design tokens — 1:1 match with public/app.css :root on starterfive.com === */
:root {
  --sfb-bg:        var(--color-bg, #0a0e14);
  --sfb-surface:   var(--color-surface, #111820);
  --sfb-surface-2: #1a2230;
  --sfb-surface-rgb: 17, 24, 32;
  --sfb-border:       #1e2a3a;
  --sfb-border-strong:#2a3a4e;

  --sfb-s400: #6b7a92;
  --sfb-s500: #8899aa;
  --sfb-s700: #c8d6e5;
  --sfb-s800: #dce6f0;
  --sfb-s900: var(--color-text, #f0f4f8);

  /* "gold" in prod is actually cyan/teal — brand primary. Operator theme's
     primary wins when set; otherwise we default to prod cyan. */
  --sfb-gold:      var(--color-primary, #22d3ee);
  --sfb-gold-dk:   #06b6d4;
  --sfb-gold-lt:   rgba(6, 182, 212, 0.08);
  --sfb-gold-glow: rgba(6, 182, 212, 0.25);
  --sfb-on-accent: #0a0e14;

  --sfb-emerald: #10b981;
  --sfb-blue:    #60a5fa;
  --sfb-red:     #f87171;
  --sfb-orange:  #fb923c;
  --sfb-purple:  #a78bfa;

  /* Position pill colours — prod values (used by .sfb-pos-pill-*). */
  --sfb-pos-pg: #f472b6;
  --sfb-pos-sg: #60a5fa;
  --sfb-pos-sf: #34d399;
  --sfb-pos-pf: #fb923c;
  --sfb-pos-c:  #a78bfa;
  /* Slot circle colours (muted variants used on sidebar chips). */
  --sfb-slot-pg: #b85a8a;
  --sfb-slot-sg: #4a80c4;
  --sfb-slot-sf: #2a9d6e;
  --sfb-slot-pf: #b8872a;
  --sfb-slot-c:  #7a6aad;

  --sfb-r:     10px;
  --sfb-r-sm:  8px;
  --sfb-sh:    0 2px 8px rgba(0, 0, 0, 0.25);
  --sfb-hdr:   56px;
}

html {
  background: var(--sfb-bg);
  color: var(--sfb-s700);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body {
  min-height: 100vh;
  padding: calc(var(--sfb-hdr) + 14px) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

a { color: var(--sfb-gold); text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; color: inherit; }
input, select {
  font: inherit; color: inherit;
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  border-radius: var(--sfb-r-sm);
  padding: 8px 12px;
  outline: none;
}
input:focus, select:focus {
  border-color: var(--sfb-gold);
  box-shadow: 0 0 0 2px var(--sfb-gold-glow);
}
::placeholder { color: var(--sfb-s400); }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sfb-border-strong); border-radius: 3px; }

#sfb-root {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 28px 40px;
}

/* === Header — pinned, backdrop-blurred, 3-col grid (mirrors .sf-hdr) === */
.sfb-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 10px 28px 0;
  margin: 0;
  background: transparent;
  display: block;
}
.sfb-header-inner {
  max-width: 1140px;
  margin: 0 auto;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(var(--sfb-surface-rgb), 0.92);
  border: 1px solid var(--sfb-border);
  border-radius: 16px;
  padding: 0 24px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}
.sfb-header-left   { display: flex; align-items: center; gap: 10px; white-space: nowrap; min-width: 0; }
.sfb-header-center { display: flex; justify-content: center; }
.sfb-header-right  { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }

.sfb-logo {
  max-height: 32px;
  max-width: 140px;
  object-fit: contain;
}
.sfb-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sfb-s900);
  letter-spacing: -0.01em;
}

/* Generic "coin" token used anywhere credits are rendered inline. */
.sfb-cc {
  display: inline-block;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe066 0%, #f59e0b 45%, #b45309 100%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(180, 83, 9, 0.5);
  vertical-align: middle;
  flex-shrink: 0;
  position: relative;
}
.sfb-cc::after {
  content: 'C';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 900; font-family: serif;
  color: rgba(120, 53, 0, 0.6);
  line-height: 1;
}
.sfb-cc-lg { width: 18px; height: 18px; }
.sfb-cc-lg::after { font-size: 10px; }

.sfb-status {
  font-size: 13px;
  color: var(--sfb-s500);
  padding: 14px 0;
}

.sfb-view { display: block; }

/* Tournament list */
.sfb-t-list {
  display: grid;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.sfb-t-card {
  background: var(--color-surface, #13151d);
  border-radius: var(--radius, 14px);
  padding: 16px;
  cursor: pointer;
  transition: transform 120ms ease;
}
.sfb-t-card:hover { transform: translateY(-2px); }
.sfb-t-card h2 { margin: 0 0 6px 0; font-size: 16px; }
.sfb-t-card .sfb-t-meta { opacity: 0.6; font-size: 12px; }

/* Detail */
.sfb-detail { background: var(--color-surface, #13151d); border-radius: var(--radius, 14px); padding: 20px; }
.sfb-detail h2 { margin-top: 0; }
.sfb-picks-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sfb-pick-row { display: flex; gap: 8px; align-items: center; }
.sfb-pick-row input {
  flex: 1;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: var(--color-bg, #0c0e14);
  color: inherit;
  font: inherit;
}

.sfb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  border: 0;
  background: var(--color-primary, #f0b429);
  color: #000;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
  min-height: 44px; /* iOS touch target */
}
.sfb-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sfb-btn.sfb-btn-ghost {
  background: transparent;
  color: var(--color-text, #eef0ff);
  border: 1px solid rgba(255,255,255,0.16);
}

/* Standings */
.sfb-standings { list-style: none; padding: 0; margin: 0; }
.sfb-standings li {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-variant-numeric: tabular-nums;
}
.sfb-standings li:last-child { border-bottom: 0; }
.sfb-standings .sfb-rank { font-weight: 700; color: var(--color-accent, #34d399); }
.sfb-standings .sfb-score { font-weight: 700; }

.sfb-error {
  background: rgba(248, 113, 113, 0.12);
  border: 1px solid rgba(248, 113, 113, 0.4);
  color: #fca5a5;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.sfb-consent-gate {
  background: var(--color-surface, #13151d);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius, 14px);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sfb-consent-gate h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.sfb-consent-text {
  margin: 0;
  line-height: 1.5;
  font-size: 14px;
  opacity: 0.9;
}

.sfb-consent-versions {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  opacity: 0.7;
}

.sfb-consent-versions li { margin: 2px 0; }

/* ─── Picker + lineup (Session 29) ─────────────────────────────────────── */

.sfb-pick-wrap { display: flex; flex-direction: column; gap: 16px; }

.sfb-lineup-header {
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}

.sfb-lineup-rows {
  display: flex; flex-direction: column; gap: 4px;
  font-variant-numeric: tabular-nums;
}

.sfb-lineup-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
}
.sfb-lineup-row:last-child { border-bottom: none; }
.sfb-lineup-slot { opacity: 0.6; font-weight: 600; }
.sfb-lineup-live-on { color: var(--sfb-emerald, #34d399); font-weight: 700; }

.sfb-lineup-summary { margin: 0; font-weight: 700; }
.sfb-lineup-actions { display: flex; gap: 8px; }

.sfb-picker-body { display: flex; flex-direction: column; gap: 12px; }

.sfb-picker-group {
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  padding: 10px 12px;
}

.sfb-picker-group-h {
  font-size: 11px;
  margin: 0 0 6px 0;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.sfb-picker-list { list-style: none; margin: 0; padding: 0; }

.sfb-picker-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sfb-picker-row:hover { background: rgba(255,255,255,0.03); }
.sfb-picker-row.sfb-selected {
  background: rgba(52,211,153,0.08);
  border: 1px solid var(--sfb-emerald, #34d399);
}
.sfb-picker-row.sfb-injured { opacity: 0.7; }
.sfb-picker-name { font-weight: 600; }
.sfb-picker-proj { opacity: 0.7; }
.sfb-picker-injury {
  background: var(--sfb-red, #f87171);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}

/* ─── Injury polish (Session 31) ──────────────────────────────────────── */

.sfb-picker-row.sfb-injured-out {
  opacity: 0.5;
  cursor: not-allowed;
}
.sfb-picker-row.sfb-injured-gtd {
  opacity: 0.85;
}

.sfb-picker-injury.sfb-picker-injury-out {
  background: var(--sfb-red, #f87171);
}
.sfb-picker-injury.sfb-picker-injury-gtd {
  background: var(--sfb-orange, #fb923c);
}

.sfb-injury-banner {
  background: rgba(248,113,113,0.1);
  border: 1px solid var(--sfb-red, #f87171);
  color: var(--sfb-red, #f87171);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
}

.sfb-lineup-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sfb-lineup-name-line { font-weight: 600; }

.sfb-lineup-injury {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
  margin-right: 4px;
  align-self: flex-start;
}
.sfb-lineup-injury.sfb-injury-out { background: var(--sfb-red, #f87171); }
.sfb-lineup-injury.sfb-injury-gtd { background: var(--sfb-orange, #fb923c); }

.sfb-lineup-stat-snippet {
  font-size: 11px;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

/* ─── Leaderboards (Session 32) ─────────────────────────────────────────── */

.sfb-list-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.sfb-leaderboards { display: flex; flex-direction: column; gap: 12px; }

.sfb-lb-tabs {
  display: flex; gap: 6px;
  background: var(--sfb-surface, #13151d);
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--sfb-border, #2a2d3d);
  width: fit-content;
}

.sfb-lb-pane {
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  padding: 12px 14px;
}

.sfb-records { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; }
.sfb-records dt { font-weight: 600; opacity: 0.7; font-size: 12px; }
.sfb-records dd { margin: 0; font-variant-numeric: tabular-nums; }

/* ─── PickOne + list sections (Session 33) ─────────────────────────────── */

.sfb-list-section {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin: 18px 0 8px 0;
}
.sfb-list-section:first-of-type { margin-top: 6px; }

.sfb-t-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.sfb-t-card-head h2 { margin: 0; }

.sfb-t-format {
  background: linear-gradient(135deg, #f0b429, #fb923c);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sfb-t-card-pickone {
  background: linear-gradient(135deg, var(--sfb-surface, #13151d), var(--sfb-surface-2, #1a1d28));
  border: 1px solid var(--sfb-border, #2a2d3d);
  position: relative;
}

.sfb-detail-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.sfb-detail-head h2 { margin: 0; }

/* ─── Chat (Session 37) ────────────────────────────────────────────────── */

.sfb-chat-panel {
  margin-top: 20px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 380px;
}

.sfb-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-surface-2, #1a1d28);
}
.sfb-chat-title { margin: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; }
.sfb-chat-online { font-size: 11px; opacity: 0.55; font-variant-numeric: tabular-nums; }

.sfb-chat-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
}

.sfb-chat-msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 6px;
  padding: 4px 0;
  position: relative;
}
.sfb-chat-msg-system .sfb-chat-line {
  font-style: italic;
  color: var(--sfb-gold, #f0b429);
}
.sfb-chat-msg-deleted { opacity: 0.4; font-style: italic; }

.sfb-chat-line { grid-column: 1; min-width: 0; }
.sfb-chat-who { font-weight: 700; margin-right: 6px; color: var(--sfb-s700, #c4c8e0); }
.sfb-chat-text { word-break: break-word; }

.sfb-chat-rx { grid-column: 1 / 3; display: flex; flex-wrap: wrap; gap: 4px; }
.sfb-chat-rx-pill {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: inherit;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.sfb-chat-rx-pill:hover { background: rgba(255,255,255,0.08); }

.sfb-chat-rx-add {
  grid-column: 2; grid-row: 1;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sfb-s500, #8b90b0);
  width: 22px; height: 22px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s;
}
.sfb-chat-msg:hover .sfb-chat-rx-add { opacity: 1; }
.sfb-chat-rx-add:hover { background: rgba(255,255,255,0.08); border-color: var(--sfb-border, #2a2d3d); }

.sfb-chat-emoji-pop {
  position: fixed;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  gap: 2px;
  z-index: 20;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.sfb-chat-emoji-opt {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  width: 28px; height: 28px;
  border-radius: 6px;
}
.sfb-chat-emoji-opt:hover { background: rgba(255,255,255,0.08); }

.sfb-chat-typing {
  font-size: 11px;
  opacity: 0.6;
  padding: 2px 14px;
  font-style: italic;
  min-height: 16px;
}

.sfb-chat-form {
  border-top: 1px solid var(--sfb-border, #2a2d3d);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--sfb-surface-2, #1a1d28);
}
.sfb-chat-quick { display: flex; gap: 3px; flex-wrap: wrap; }
.sfb-chat-quick-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 6px;
  opacity: 0.8;
}
.sfb-chat-quick-btn:hover { background: rgba(255,255,255,0.08); opacity: 1; }

.sfb-chat-input-row { display: flex; gap: 8px; }
.sfb-chat-input {
  flex: 1;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 999px;
  font-family: inherit;
}
.sfb-chat-input:focus {
  outline: none;
  border-color: var(--sfb-emerald, #34d399);
}
.sfb-chat-send { padding-left: 14px; padding-right: 14px; }

/* ─── Sport tabs (Session 45) ──────────────────────────────────────────── */

.sfb-sport-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 4px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  width: fit-content;
}

.sfb-sport-tab {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-s500, #8b90b0);
  cursor: pointer;
  border-radius: 8px;
  letter-spacing: 0.02em;
  font-family: inherit;
}
.sfb-sport-tab:hover { color: inherit; background: rgba(255,255,255,0.04); }
.sfb-sport-tab-active {
  background: var(--sfb-emerald, #34d399);
  color: #0c0e14;
}
.sfb-sport-tab-active:hover { background: var(--sfb-emerald, #34d399); }

/* ─── Visual parity capstone (Session 46) ──────────────────────────────── */

/* Stronger card polish to match starterfive.com: border highlight,
   subtle shadow, smooth lift on hover. */
.sfb-t-card {
  border: 1px solid var(--sfb-border, #2a2d3d);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.sfb-t-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px rgba(0,0,0,0.25);
  border-color: var(--sfb-border-strong, #3a3d55);
}

/* Section header on the list view. */
.sfb-list-section {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--sfb-s500, #8b90b0);
}

/* Header profile pill — right-aligned compact chip. */
.sfb-header { justify-content: flex-start; }
.sfb-profile-pill {
  margin-left: auto;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  padding: 6px 14px;
  color: inherit;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.sfb-profile-pill:hover {
  border-color: var(--sfb-emerald, #34d399);
  color: var(--sfb-emerald, #34d399);
}

/* Drawer (profile) */
.sfb-drawer {
  position: fixed;
  inset: 0;
  background: rgba(12, 14, 20, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  justify-content: flex-end;
  animation: sfb-drawer-fade 160ms ease forwards;
}
@keyframes sfb-drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sfb-drawer-panel {
  background: var(--sfb-bg, #0c0e14);
  border-left: 1px solid var(--sfb-border, #2a2d3d);
  width: 360px;
  max-width: 90vw;
  height: 100%;
  overflow-y: auto;
  padding: 24px;
  position: relative;
  animation: sfb-drawer-slide 220ms ease forwards;
  box-shadow: -16px 0 32px rgba(0,0,0,0.35);
}
@keyframes sfb-drawer-slide {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.sfb-drawer-close {
  position: absolute;
  top: 16px; right: 16px;
  background: transparent;
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: inherit;
  font-size: 14px;
  width: 28px; height: 28px;
  border-radius: 8px;
  cursor: pointer;
}
.sfb-drawer-close:hover { background: var(--sfb-surface, #13151d); }

.sfb-drawer-h { margin: 0 0 4px 0; font-size: 22px; font-weight: 800; }
.sfb-drawer-sub { margin: 0 0 16px 0; font-size: 12px; opacity: 0.65; font-variant-numeric: tabular-nums; }

.sfb-drawer-xpbar {
  background: var(--sfb-surface, #13151d);
  border-radius: 999px;
  height: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-drawer-xpbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  transition: width 400ms ease;
}

.sfb-drawer-block {
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-drawer-block h3 {
  margin: 0 0 10px 0;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}
.sfb-drawer-empty { opacity: 0.5; font-size: 12px; font-style: italic; }
.sfb-drawer-credits { font-size: 28px; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }

.sfb-drawer-badge-grid,
.sfb-drawer-cosm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.sfb-drawer-badge,
.sfb-drawer-cosm {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 120ms, border-color 120ms;
}
.sfb-drawer-badge { cursor: default; }
.sfb-drawer-cosm:hover { transform: translateY(-2px); border-color: var(--sfb-emerald, #34d399); }
.sfb-drawer-cosm-equipped { border-color: var(--sfb-emerald, #34d399); box-shadow: 0 0 0 1px var(--sfb-emerald, #34d399) inset; }

.sfb-drawer-badge-icon,
.sfb-drawer-cosm-icon {
  font-size: 22px;
  line-height: 1;
}
.sfb-drawer-badge-label,
.sfb-drawer-cosm-label {
  font-size: 10px;
  text-align: center;
  opacity: 0.8;
  line-height: 1.2;
  font-weight: 600;
}

.sfb-tier-common    { border-color: #3a3d55; }
.sfb-tier-bronze    { border-color: #a16207; }
.sfb-tier-silver    { border-color: #a1a1aa; }
.sfb-tier-rare      { border-color: #60a5fa; }
.sfb-tier-epic      { border-color: #a78bfa; }
.sfb-tier-gold      { border-color: #f0b429; }
.sfb-tier-legendary { border-color: #f0b429; box-shadow: 0 0 12px rgba(240,180,41,0.3); }

.sfb-drawer-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 20px;
  letter-spacing: 0.12em;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px dashed var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  padding: 12px 16px;
  text-align: center;
  font-weight: 700;
  color: var(--sfb-gold, #f0b429);
}

/* Winner star on leaderboard rank 1 */
.sfb-standings li:first-child .sfb-rank {
  color: var(--sfb-gold, #f0b429);
  font-weight: 800;
}

/* Align base color vars with starterfive.com aesthetic — these are
   fallbacks when the operator theme doesn't override. */
:root {
  --sfb-bg: var(--color-bg, #0c0e14);
  --sfb-surface: var(--color-surface, #13151d);
  --sfb-surface-2: #1a1d28;
  --sfb-text: var(--color-text, #eef0ff);
  --sfb-border: #2a2d3d;
  --sfb-border-strong: #3a3d55;
  --sfb-s400: #6b7194;
  --sfb-s500: #8b90b0;
  --sfb-s700: #c4c8e0;
  --sfb-gold: #f0b429;
  --sfb-emerald: #34d399;
  --sfb-red: #f87171;
  --sfb-orange: #fb923c;
  --sfb-primary: var(--color-primary, var(--sfb-emerald));
  --sfb-accent: var(--color-accent, var(--sfb-gold));
}

/* CYCLE 1 WAVE 1 — Core components (S50-S54) */

:root {
  --sfb-pos-pg: #ec4899;
  --sfb-pos-sg: #60a5fa;
  --sfb-pos-sf: #34d399;
  --sfb-pos-pf: #fb923c;
  --sfb-pos-c:  #a78bfa;
  --sfb-pos-gk: #38bdf8;
  --sfb-pos-def:#64748b;
  --sfb-pos-mid:#10b981;
  --sfb-pos-fwd:#f43f5e;
  --sfb-pos-bat:#facc15;
  --sfb-pos-bowl:#3b82f6;
  --sfb-pos-ar: #a855f7;
  --sfb-pos-wk: #06b6d4;
}

.sfb-pick-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .sfb-pick-layout { grid-template-columns: 1fr; }
}
.sfb-pick-main { min-width: 0; }
.sfb-pick-sidebar { position: relative; }
.sfb-lineup-sticky { position: sticky; top: 16px; }

.sfb-filter-bar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sfb-chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.sfb-chip-row-small .sfb-chip { font-size: 11px; padding: 4px 10px; }
.sfb-chip {
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: var(--sfb-s500, #8b90b0);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.sfb-chip:hover { color: inherit; border-color: var(--sfb-border-strong, #3a3d55); }
.sfb-chip-active {
  background: var(--sfb-emerald, #34d399);
  color: #0c0e14;
  border-color: var(--sfb-emerald, #34d399);
}
.sfb-chip-pos-pg.sfb-chip-active { background: var(--sfb-pos-pg); border-color: var(--sfb-pos-pg); }
.sfb-chip-pos-sg.sfb-chip-active { background: var(--sfb-pos-sg); border-color: var(--sfb-pos-sg); }
.sfb-chip-pos-sf.sfb-chip-active { background: var(--sfb-pos-sf); border-color: var(--sfb-pos-sf); }
.sfb-chip-pos-pf.sfb-chip-active { background: var(--sfb-pos-pf); border-color: var(--sfb-pos-pf); }
.sfb-chip-pos-c.sfb-chip-active  { background: var(--sfb-pos-c);  border-color: var(--sfb-pos-c); }

.sfb-control-row { display: flex; gap: 8px; align-items: center; }
.sfb-search {
  flex: 1;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: inherit;
  font: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 999px;
}
.sfb-search:focus { outline: none; border-color: var(--sfb-emerald, #34d399); }
.sfb-toggle {
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  color: var(--sfb-s500, #8b90b0);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.sfb-toggle-on { background: var(--sfb-emerald, #34d399); color: #0c0e14; border-color: var(--sfb-emerald, #34d399); }

.sfb-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.sfb-player-card {
  position: relative;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms, box-shadow 180ms;
  font-variant-numeric: tabular-nums;
}
.sfb-player-card:hover {
  transform: translateY(-3px);
  border-color: var(--sfb-border-strong, #3a3d55);
  box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}
.sfb-player-card.sfb-selected {
  border-color: var(--sfb-emerald, #34d399);
  box-shadow: 0 0 0 1px var(--sfb-emerald, #34d399) inset, 0 0 24px rgba(52,211,153,0.15);
}
.sfb-player-card.sfb-injured-out { opacity: 0.55; cursor: not-allowed; }
.sfb-player-card.sfb-injured-out:hover { transform: none; border-color: var(--sfb-border, #2a2d3d); }

.sfb-player-top {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 10px;
  align-items: center;
}
.sfb-player-photo {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.sfb-player-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.sfb-player-init {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  letter-spacing: -0.02em;
}

.sfb-player-meta { min-width: 0; }
.sfb-player-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sfb-player-pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

.sfb-pos-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  color: #fff;
  background: var(--sfb-s500, #8b90b0);
}
.sfb-pos-pill.sfb-pos-pg  { background: var(--sfb-pos-pg); }
.sfb-pos-pill.sfb-pos-sg  { background: var(--sfb-pos-sg); }
.sfb-pos-pill.sfb-pos-sf  { background: var(--sfb-pos-sf); }
.sfb-pos-pill.sfb-pos-pf  { background: var(--sfb-pos-pf); color: #1a0d00; }
.sfb-pos-pill.sfb-pos-c   { background: var(--sfb-pos-c); }

.sfb-team-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--team-color, #3a3d55);
  color: #fff;
  border: 1px solid var(--team-color, #3a3d55);
}
.sfb-match-chip {
  font-size: 10px;
  opacity: 0.6;
  padding: 2px 4px;
  font-weight: 600;
}

.sfb-player-proj-col { text-align: right; min-width: 48px; }
.sfb-player-proj-n { font-size: 20px; font-weight: 800; color: var(--sfb-emerald, #34d399); line-height: 1; }
.sfb-player-proj-l { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; color: var(--sfb-s500, #8b90b0); margin-top: 2px; }

.sfb-player-avgs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 6px 0;
  border-top: 1px solid var(--sfb-border, #2a2d3d);
  border-bottom: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-avg-cell { text-align: center; }
.sfb-avg-n { font-size: 13px; font-weight: 700; color: var(--sfb-s700, #c4c8e0); }
.sfb-avg-l { font-size: 9px; color: var(--sfb-s500, #8b90b0); letter-spacing: 0.05em; font-weight: 600; }

.sfb-gamelog-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
.sfb-gamelog-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 2px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.sfb-gl-n { font-size: 12px; font-weight: 700; }
.sfb-gl-d { font-size: 8px; opacity: 0.6; font-weight: 600; }
.sfb-gl-hot  { background: rgba(52, 211, 153, 0.22); color: var(--sfb-emerald, #34d399); }
.sfb-gl-warm { background: rgba(240, 180, 41, 0.18); color: var(--sfb-gold, #f0b429); }
.sfb-gl-cool { background: rgba(139, 144, 176, 0.14); color: var(--sfb-s500, #8b90b0); }

.sfb-player-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sfb-emerald, #34d399);
  color: #0c0e14;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 0 0 3px var(--sfb-surface, #13151d);
}

.sfb-picker-empty { padding: 30px; text-align: center; opacity: 0.5; font-style: italic; }

.sfb-slot-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sfb-s500, #8b90b0);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.02em;
  border: 2px solid var(--sfb-border, #2a2d3d);
  flex-shrink: 0;
  position: relative;
}
.sfb-slot-circle img { width: 100%; height: 100%; object-fit: cover; }
.sfb-slot-pg  { background: var(--sfb-pos-pg); border-color: var(--sfb-pos-pg); }
.sfb-slot-sg  { background: var(--sfb-pos-sg); border-color: var(--sfb-pos-sg); }
.sfb-slot-sf  { background: var(--sfb-pos-sf); border-color: var(--sfb-pos-sf); }
.sfb-slot-pf  { background: var(--sfb-pos-pf); border-color: var(--sfb-pos-pf); }
.sfb-slot-c   { background: var(--sfb-pos-c);  border-color: var(--sfb-pos-c); }

.sfb-lineup-rows { display: flex; flex-direction: column; gap: 6px; }
.sfb-lineup-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.sfb-lineup-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sfb-lineup-name-line { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfb-lineup-subline { font-size: 10px; color: var(--sfb-s500, #8b90b0); font-weight: 600; letter-spacing: 0.02em; }

.sfb-fp-budget { margin: 12px 0 10px; }
.sfb-fp-budget-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sfb-s500, #8b90b0);
  margin-bottom: 4px;
}
.sfb-fp-budget-track {
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
  border: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-fp-budget-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  transition: width 300ms ease, background 300ms;
}
.sfb-fp-budget-fill-ok { background: var(--sfb-emerald, #34d399); }
.sfb-fp-budget-fill-warn { background: var(--sfb-gold, #f0b429); }
.sfb-fp-budget-fill-over { background: var(--sfb-red, #f87171); }

.sfb-t-card-hero { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.sfb-t-chips { display: flex; gap: 6px; align-items: center; }
.sfb-status-chip {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  background: var(--sfb-s500, #8b90b0);
}
.sfb-status-chip-sport { background: var(--sfb-gold, #f0b429); color: #1a0d00; }
.sfb-status-chip-open { background: var(--sfb-emerald, #34d399); color: #0c0e14; }
.sfb-status-chip-finalized { background: var(--sfb-s500, #8b90b0); }
.sfb-status-chip-locked { background: var(--sfb-orange, #fb923c); color: #1a0d00; }
.sfb-status-chip-cancelled { background: var(--sfb-red, #f87171); }

.sfb-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sfb-emerald, #34d399);
  animation: sfb-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes sfb-pulse-dot {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.1); }
}

.sfb-t-name { font-size: 20px; font-weight: 800; margin: 0; }

.sfb-t-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sfb-tile {
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.sfb-tile-v { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--sfb-s900, #eef0ff); }
.sfb-tile-l { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: var(--sfb-s500, #8b90b0); margin-top: 3px; }

.sfb-prize-tiers { display: flex; gap: 4px; flex-wrap: wrap; }
.sfb-prize-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  font-variant-numeric: tabular-nums;
}
.sfb-prize-pill-1 { border-color: var(--sfb-gold, #f0b429); color: var(--sfb-gold, #f0b429); }
.sfb-prize-pill-2 { border-color: #c4c8e0; color: #c4c8e0; }
.sfb-prize-pill-3 { border-color: #c87533; color: #c87533; }

.sfb-standings-polished .sfb-standings-row {
  display: grid;
  grid-template-columns: 44px 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 14px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  margin-bottom: 4px;
  transition: transform 120ms, border-color 120ms;
}
.sfb-standings-polished .sfb-standings-row:hover {
  transform: translateX(2px);
  border-color: var(--sfb-border-strong, #3a3d55);
}
.sfb-standings-polished .sfb-rank { font-size: 18px; text-align: center; font-weight: 800; }
.sfb-standings-polished .sfb-rank-gold .sfb-rank   { color: var(--sfb-gold, #f0b429); }
.sfb-standings-polished .sfb-rank-silver .sfb-rank { color: #c4c8e0; }
.sfb-standings-polished .sfb-rank-bronze .sfb-rank { color: #c87533; }
.sfb-standings-polished .sfb-rank-gold {
  border-color: var(--sfb-gold, #f0b429);
  box-shadow: 0 0 0 1px var(--sfb-gold, #f0b429) inset;
}
.sfb-standings-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  color: #0c0e14;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 14px;
}
.sfb-standings-polished .sfb-standings-name { font-size: 14px; font-weight: 600; }
.sfb-standings-polished .sfb-score {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sfb-emerald, #34d399);
}

@media (max-width: 600px) {
  .sfb-t-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ======================================================================
 * Session 55 (C1) — Top nav bar (tabs + credits chip + profile pill)
 * ====================================================================== */
.sfb-topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sfb-nav-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
}
.sfb-nav-tab {
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.sfb-nav-tab:hover { color: var(--sfb-s900, #eef0ff); }
.sfb-nav-tab-active {
  color: var(--sfb-bg, #0c0e14);
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), #86efac);
}
.sfb-credits-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-gold, #f0b429);
  color: var(--sfb-gold, #f0b429);
  font-weight: 800;
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 120ms, transform 120ms;
}
.sfb-credits-chip:hover {
  background: rgba(240, 180, 41, 0.08);
  transform: translateY(-1px);
}
.sfb-credits-chip-icon { font-size: 14px; }
.sfb-spacer { flex: 1; }

/* ======================================================================
 * Session 56 (C2) — Profile page
 * ====================================================================== */
.sfb-profile-page { display: flex; flex-direction: column; gap: 14px; }

.sfb-profile-hero {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 20px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  background-image:
    radial-gradient(circle at top right, rgba(52, 211, 153, 0.08), transparent 60%),
    radial-gradient(circle at bottom left, rgba(240, 180, 41, 0.06), transparent 55%);
}
.sfb-profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 36px;
  color: #0c0e14;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  border: 3px solid var(--sfb-border, #2a2d3d);
  box-shadow: 0 8px 24px rgba(52, 211, 153, 0.2);
}
.sfb-profile-info { display: flex; flex-direction: column; gap: 6px; }
.sfb-profile-name {
  font-size: 22px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-profile-lvl-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  border: 1px solid rgba(52, 211, 153, 0.34);
  color: var(--sfb-emerald, #34d399);
  align-self: flex-start;
}

.sfb-profile-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  padding: 14px 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
}
.sfb-profile-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
}
.sfb-profile-stat + .sfb-profile-stat {
  border-left: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-profile-stat-n {
  font-size: 20px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
  font-variant-numeric: tabular-nums;
}
.sfb-profile-stat-l {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sfb-profile-xp {
  padding: 14px 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
}
.sfb-profile-xp-header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  margin-bottom: 8px;
}
.sfb-profile-xp-track {
  height: 10px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  overflow: hidden;
}
.sfb-profile-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  border-radius: 999px;
  transition: width 500ms ease-out;
  position: relative;
  overflow: hidden;
}
.sfb-profile-xp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: -40px;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: sfb-shimmer 2.4s infinite;
}

@keyframes sfb-shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(400px); }
}

.sfb-profile-subnav {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  align-self: flex-start;
}
.sfb-profile-subtab {
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms, background 120ms;
}
.sfb-profile-subtab:hover { color: var(--sfb-s900, #eef0ff); }
.sfb-profile-subtab-active {
  color: var(--sfb-bg, #0c0e14);
  background: var(--sfb-s900, #eef0ff);
}

.sfb-pane {
  padding: 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
}
.sfb-pane h4 {
  margin: 0 0 10px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--sfb-s700, #c4c8e0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sfb-profile-accordion {
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  padding: 0;
  margin-bottom: 8px;
  overflow: hidden;
}
.sfb-profile-accordion > summary {
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--sfb-s900, #eef0ff);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sfb-profile-accordion > summary::-webkit-details-marker { display: none; }
.sfb-profile-accordion > summary::after {
  content: '>';
  color: var(--sfb-s500, #8b90b0);
  transition: transform 200ms;
}
.sfb-profile-accordion[open] > summary::after { transform: rotate(90deg); }
.sfb-profile-accordion > summary:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sfb-profile-badge-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  padding: 0 14px 14px 14px;
}
.sfb-profile-badge-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  text-align: center;
  transition: transform 160ms, border-color 160ms;
}
.sfb-profile-badge-cell:hover {
  transform: translateY(-2px);
  border-color: var(--sfb-gold, #f0b429);
}
.sfb-profile-badge-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 6px rgba(240, 180, 41, 0.25));
}
.sfb-profile-badge-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s700, #c4c8e0);
}
.sfb-profile-cosm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.sfb-profile-cosm-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  text-align: center;
}
.sfb-ref-code-box {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--sfb-gold, #f0b429);
  background: rgba(240, 180, 41, 0.06);
  border: 1px dashed var(--sfb-gold, #f0b429);
  border-radius: 10px;
  cursor: pointer;
  user-select: all;
}
.sfb-ref-code-hint {
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
  text-align: center;
  margin-top: 6px;
}
.sfb-credit-ledger {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sfb-credit-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px;
  background: var(--sfb-surface-2, #1a1d28);
  border-radius: 8px;
  font-size: 12px;
}
.sfb-credit-row-amt {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sfb-credit-row-amt-pos { color: var(--sfb-emerald, #34d399); }
.sfb-credit-row-amt-neg { color: var(--sfb-red, #f87171); }
.sfb-credit-row-reason { color: var(--sfb-s500, #8b90b0); }

/* ======================================================================
 * Session 57 (D1) — Shop page
 * ====================================================================== */
.sfb-shop-page { display: flex; flex-direction: column; gap: 14px; }

.sfb-shop-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  background-image: radial-gradient(circle at top right, rgba(240, 180, 41, 0.08), transparent 60%);
}
.sfb-shop-preview {
  display: flex;
  gap: 10px;
}
.sfb-shop-slot {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--sfb-bg, #0c0e14);
  border: 2px dashed var(--sfb-border, #2a2d3d);
  color: var(--sfb-s500, #8b90b0);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sfb-shop-slot-filled {
  border-style: solid;
  border-color: var(--sfb-emerald, #34d399);
  background: rgba(52, 211, 153, 0.08);
  color: var(--sfb-s900, #eef0ff);
}
.sfb-shop-slot-icon { font-size: 24px; }
.sfb-shop-balance-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.sfb-shop-balance {
  font-size: 28px;
  font-weight: 900;
  color: var(--sfb-gold, #f0b429);
  font-variant-numeric: tabular-nums;
}
.sfb-shop-balance-lbl {
  font-size: 11px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sfb-shop-featured {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.sfb-shop-cat-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  overflow-x: auto;
  align-self: flex-start;
}
.sfb-shop-cat-tab {
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 120ms, background 120ms;
}
.sfb-shop-cat-tab:hover { color: var(--sfb-s900, #eef0ff); }
.sfb-shop-cat-tab-active {
  color: var(--sfb-bg, #0c0e14);
  background: var(--sfb-s900, #eef0ff);
}

.sfb-shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

.sfb-shop-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  position: relative;
  transition: transform 160ms, border-color 160ms, box-shadow 160ms;
}
.sfb-shop-card:hover {
  transform: translateY(-3px);
  border-color: var(--sfb-border-strong, #3a3d55);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.sfb-shop-card-tier-rare    { border-color: #60a5fa; }
.sfb-shop-card-tier-epic    { border-color: #a78bfa; }
.sfb-shop-card-tier-legendary {
  border-color: var(--sfb-gold, #f0b429);
  background-image: radial-gradient(circle at top, rgba(240, 180, 41, 0.06), transparent 65%);
  animation: sfb-tier-pulse 2.8s ease-in-out infinite;
}
@keyframes sfb-tier-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(240, 180, 41, 0); }
  50%      { box-shadow: 0 0 18px 0 rgba(240, 180, 41, 0.28); }
}
.sfb-shop-card-tier-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--sfb-bg, #0c0e14);
  color: var(--sfb-s500, #8b90b0);
}
.sfb-shop-card-tier-rare .sfb-shop-card-tier-badge        { color: #60a5fa; border: 1px solid #60a5fa; }
.sfb-shop-card-tier-epic .sfb-shop-card-tier-badge        { color: #a78bfa; border: 1px solid #a78bfa; }
.sfb-shop-card-tier-legendary .sfb-shop-card-tier-badge   { color: var(--sfb-gold, #f0b429); border: 1px solid var(--sfb-gold, #f0b429); }
.sfb-shop-card-icon {
  font-size: 34px;
  text-align: center;
  margin: 4px 0;
  filter: drop-shadow(0 2px 8px rgba(52, 211, 153, 0.2));
}
.sfb-shop-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--sfb-s900, #eef0ff);
  text-align: center;
  min-height: 2.4em;
}
.sfb-shop-card-price-pill {
  align-self: center;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.12);
  color: var(--sfb-gold, #f0b429);
  border: 1px solid rgba(240, 180, 41, 0.34);
  font-variant-numeric: tabular-nums;
}
.sfb-shop-card-price-owned {
  background: rgba(52, 211, 153, 0.12);
  color: var(--sfb-emerald, #34d399);
  border-color: rgba(52, 211, 153, 0.34);
}
.sfb-shop-card-btn {
  margin-top: 4px;
  padding: 7px 0;
  border: 0;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), #86efac);
  color: #0c0e14;
  transition: transform 100ms, opacity 120ms;
}
.sfb-shop-card-btn:hover { transform: translateY(-1px); }
.sfb-shop-card-btn:active { transform: translateY(0) scale(0.97); }
.sfb-shop-card-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s500, #8b90b0);
}
.sfb-shop-card-btn-equip {
  background: linear-gradient(135deg, #60a5fa, #a78bfa);
  color: #0c0e14;
}

/* ======================================================================
 * Session 58 (E1) — Motion pass
 * ====================================================================== */
.sfb-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 18px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-emerald, #34d399);
  border-radius: 10px;
  color: var(--sfb-s900, #eef0ff);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  z-index: 9999;
  animation: sfb-toast-in 240ms ease-out both;
}
.sfb-toast-error { border-color: var(--sfb-red, #f87171); }
.sfb-toast-leave { animation: sfb-toast-out 220ms ease-in both; }
@keyframes sfb-toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sfb-toast-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(14px); }
}

.sfb-fade-in { animation: sfb-fade-in 200ms ease-out both; }
@keyframes sfb-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sfb-badge-flash { animation: sfb-badge-flash 800ms ease-out both; }
@keyframes sfb-badge-flash {
  0%   { filter: drop-shadow(0 0 0 rgba(240, 180, 41, 0)); transform: scale(1); }
  30%  { filter: drop-shadow(0 0 16px rgba(240, 180, 41, 0.8)); transform: scale(1.25); }
  100% { filter: drop-shadow(0 0 0 rgba(240, 180, 41, 0)); transform: scale(1); }
}

.sfb-fp-budget-fill-warn::after,
.sfb-fp-budget-fill-over::after {
  content: '';
  position: absolute;
  top: 0; left: -40px;
  width: 40px; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: sfb-shimmer 1.6s infinite;
}
.sfb-fp-budget-fill { position: relative; overflow: hidden; }

@media (max-width: 600px) {
  .sfb-profile-stats { grid-template-columns: repeat(3, 1fr); }
  .sfb-profile-stat + .sfb-profile-stat { border-left: 0; }
  .sfb-shop-hero { grid-template-columns: 1fr; }
  .sfb-shop-balance-wrap { align-items: flex-start; }
  .sfb-topnav { padding: 8px 10px; }
  .sfb-nav-tab { padding: 7px 12px; font-size: 12px; }
}

/* ======================================================================
 * Session 59 (F1) — Hall of Fame
 * ====================================================================== */
.sfb-hall-page { display: flex; flex-direction: column; gap: 14px; }
.sfb-hall-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--sfb-s900, #eef0ff);
  margin: 0;
  letter-spacing: 0.01em;
}

.sfb-hall-podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.sfb-hall-record {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 18px 14px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.sfb-hall-record::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top, var(--sfb-hall-glow, transparent), transparent 65%);
  pointer-events: none;
}
.sfb-hall-record-gold    { --sfb-hall-glow: rgba(240, 180, 41, 0.12); border-color: rgba(240, 180, 41, 0.34); }
.sfb-hall-record-emerald { --sfb-hall-glow: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.34); }
.sfb-hall-record-purple  { --sfb-hall-glow: rgba(167, 139, 250, 0.14); border-color: rgba(167, 139, 250, 0.34); }
.sfb-hall-record-icon {
  font-size: 34px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
  position: relative;
}
.sfb-hall-record-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  position: relative;
}
.sfb-hall-record-value {
  font-size: 30px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.sfb-hall-record-gold .sfb-hall-record-value    { color: var(--sfb-gold, #f0b429); }
.sfb-hall-record-emerald .sfb-hall-record-value { color: var(--sfb-emerald, #34d399); }
.sfb-hall-record-purple .sfb-hall-record-value  { color: #a78bfa; }
.sfb-hall-record-sub {
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-s700, #c4c8e0);
  position: relative;
}

.sfb-hall-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.sfb-hall-empty {
  padding: 18px;
  text-align: center;
  color: var(--sfb-s500, #8b90b0);
  font-size: 13px;
}

@media (max-width: 760px) {
  .sfb-hall-podium { grid-template-columns: 1fr; }
  .sfb-hall-cols { grid-template-columns: 1fr; }
}

/* ======================================================================
 * Session 60 (F2) — Notifications bell + dropdown
 * ====================================================================== */
.sfb-bell {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-surface-2, #1a1d28);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.sfb-bell:hover {
  transform: translateY(-1px);
  border-color: var(--sfb-emerald, #34d399);
}
.sfb-bell-icon { font-size: 16px; line-height: 1; }
.sfb-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--sfb-red, #f87171);
  color: #0c0e14;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 0 2px var(--sfb-surface, #13151d);
  animation: sfb-bell-pulse 2s infinite;
}
@keyframes sfb-bell-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

.sfb-bell-dropdown {
  width: min(360px, 92vw);
  max-height: 480px;
  display: flex;
  flex-direction: column;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  z-index: 9000;
  overflow: hidden;
}
.sfb-bell-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-surface-2, #1a1d28);
}
.sfb-bell-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-bell-mark-all {
  border: 0;
  background: transparent;
  color: var(--sfb-emerald, #34d399);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.sfb-bell-mark-all:hover { text-decoration: underline; }

.sfb-bell-list { overflow-y: auto; padding: 4px; }
.sfb-bell-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
  align-items: start;
  transition: background 100ms;
}
.sfb-bell-row:hover { background: rgba(255, 255, 255, 0.03); }
.sfb-bell-row-unread {
  background: rgba(52, 211, 153, 0.05);
  border-left: 2px solid var(--sfb-emerald, #34d399);
  padding-left: 8px;
}
.sfb-bell-row-icon { font-size: 18px; }
.sfb-bell-row-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-bell-row-body {
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
  margin-top: 2px;
}
.sfb-bell-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--sfb-s500, #8b90b0);
  font-size: 12px;
}

/* ======================================================================
 * Session 61 (F3) — Cosmetic sets panel (lives inside shop page)
 * ====================================================================== */
.sfb-sets-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sfb-set-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 12px;
  padding: 12px 14px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
  align-items: center;
}
.sfb-set-card-complete {
  border-color: var(--sfb-gold, #f0b429);
  background-image: radial-gradient(circle at top right, rgba(240, 180, 41, 0.08), transparent 60%);
}
.sfb-set-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-set-desc {
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
  margin-top: 2px;
}
.sfb-set-progress-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sfb-set-progress-track {
  height: 6px;
  background: var(--sfb-bg, #0c0e14);
  border-radius: 999px;
  overflow: hidden;
}
.sfb-set-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  transition: width 400ms ease-out;
}
.sfb-set-progress-text {
  font-size: 10px;
  color: var(--sfb-s500, #8b90b0);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sfb-set-items {
  display: inline-flex;
  gap: 4px;
}
.sfb-set-item-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.sfb-set-item-dot-owned {
  background: var(--sfb-emerald, #34d399);
  border-color: var(--sfb-emerald, #34d399);
  color: #0c0e14;
}

/* ======================================================================
 * Session 62 (F4) — Streak chip
 * ====================================================================== */
.sfb-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-orange, #fb923c);
  color: var(--sfb-orange, #fb923c);
  font-weight: 800;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: transform 120ms, background 120ms;
}
.sfb-streak-chip:hover {
  background: rgba(251, 146, 60, 0.1);
  transform: translateY(-1px);
}
.sfb-streak-flame {
  font-size: 13px;
  animation: sfb-flame-flicker 1.6s ease-in-out infinite;
}
@keyframes sfb-flame-flicker {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(251, 146, 60, 0.6)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.9)); }
}

/* ======================================================================
 * Session 62 (F5) — Challenge-a-friend share button on lobby card
 * ====================================================================== */
.sfb-t-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.sfb-t-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s700, #c4c8e0);
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, transform 100ms;
}
.sfb-t-share:hover {
  border-color: var(--sfb-emerald, #34d399);
  color: var(--sfb-emerald, #34d399);
  transform: translateY(-1px);
}

/* ======================================================================
 * Session 63 (H1) — Mobile bottom nav
 * ====================================================================== */
.sfb-bottom-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 8000;
  background: rgba(12, 14, 20, 0.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--sfb-border, #2a2d3d);
  padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
  gap: 4px;
  justify-content: space-around;
}
.sfb-bottom-nav-tab {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 4px 4px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--sfb-s500, #8b90b0);
  font-size: 10px;
  font-weight: 700;
  transition: background 120ms, color 120ms;
}
.sfb-bottom-nav-tab:hover { background: rgba(255,255,255,0.03); }
.sfb-bottom-nav-tab-active {
  color: var(--sfb-emerald, #34d399);
}
.sfb-bottom-nav-tab-active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 28px;
  height: 3px;
  background: var(--sfb-emerald, #34d399);
  border-radius: 0 0 3px 3px;
}
.sfb-bottom-nav-tab { position: relative; }
.sfb-bottom-nav-icon { font-size: 18px; line-height: 1; }
.sfb-bottom-nav-label {
  font-size: 10px;
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .sfb-bottom-nav { display: flex; }
  /* Give content room so it's not hidden under the fixed nav. */
  #sfb-view { padding-bottom: 72px; }
  /* Collapse top-nav tabs; keep bell/credits/profile for glanceable state. */
  .sfb-nav-tabs { display: none; }
}

/* ======================================================================
 * Session 63 (H2) — Empty states
 * ====================================================================== */
.sfb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  background: var(--sfb-surface, #13151d);
  border: 1px dashed var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  text-align: center;
}
.sfb-empty-icon {
  font-size: 52px;
  filter: drop-shadow(0 4px 14px rgba(52, 211, 153, 0.2));
  margin-bottom: 4px;
}
.sfb-empty-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-empty-body {
  font-size: 13px;
  color: var(--sfb-s500, #8b90b0);
  max-width: 320px;
  line-height: 1.4;
}
.sfb-empty-cta {
  margin-top: 6px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), #86efac);
  color: #0c0e14;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: transform 100ms;
}
.sfb-empty-cta:hover { transform: translateY(-1px); }

/* ======================================================================
 * Session 63 (H3) — Tooltips via [data-tip] attribute
 * ====================================================================== */
[data-tip] {
  position: relative;
}
[data-tip]::before,
[data-tip]::after {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease-out 100ms, transform 120ms ease-out 100ms;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--sfb-bg, #0c0e14);
  color: var(--sfb-s900, #eef0ff);
  padding: 6px 10px;
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  z-index: 9999;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}
[data-tip]::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: var(--sfb-border, #2a2d3d);
  z-index: 9999;
}
[data-tip]:hover::before,
[data-tip]:hover::after,
[data-tip]:focus::before,
[data-tip]:focus::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ======================================================================
 * Session 63 (H4) — Copy polish (used as utility classes for microcopy)
 * ====================================================================== */
.sfb-microcopy {
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
  line-height: 1.45;
}
.sfb-microcopy strong { color: var(--sfb-s700, #c4c8e0); }

/* ======================================================================
 * Session 64 (I1) — Blog / News page
 * ====================================================================== */
.sfb-blog-page { display: flex; flex-direction: column; gap: 14px; }
.sfb-blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.sfb-blog-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 160ms, border-color 160ms;
}
.sfb-blog-card:hover {
  transform: translateY(-3px);
  border-color: var(--sfb-emerald, #34d399);
}
.sfb-blog-kind {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s500, #8b90b0);
  border: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-blog-kind-recap {
  color: var(--sfb-emerald, #34d399);
  border-color: rgba(52, 211, 153, 0.3);
  background: rgba(52, 211, 153, 0.06);
}
.sfb-blog-card-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
  margin: 0;
  line-height: 1.3;
}
.sfb-blog-card-sub {
  font-size: 12px;
  color: var(--sfb-s500, #8b90b0);
  margin: 0;
  line-height: 1.4;
}
.sfb-blog-card-foot {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.sfb-blog-detail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 22px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  max-width: 760px;
  margin: 0 auto;
}
.sfb-btn-back {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: var(--sfb-emerald, #34d399);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
}
.sfb-btn-back:hover { text-decoration: underline; }
.sfb-blog-detail-title {
  font-size: 28px;
  font-weight: 900;
  color: var(--sfb-s900, #eef0ff);
  margin: 8px 0 0;
  line-height: 1.15;
}
.sfb-blog-detail-sub {
  font-size: 15px;
  color: var(--sfb-s700, #c4c8e0);
  margin: 0 0 6px;
}
.sfb-blog-detail-body {
  font-size: 14px;
  line-height: 1.65;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-blog-detail-body h1,
.sfb-blog-detail-body h2 {
  color: var(--sfb-s900, #eef0ff);
  margin-top: 18px;
}
.sfb-blog-detail-body p { margin: 10px 0; }
.sfb-blog-detail-body ul { padding-left: 22px; }

/* ======================================================================
 * Session 64 (I5) — Lobby filters (search + status chips)
 * ====================================================================== */
.sfb-lobby-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  margin-bottom: 10px;
}
.sfb-lobby-search {
  flex: 1 1 200px;
  min-width: 160px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  color: var(--sfb-s900, #eef0ff);
  padding: 8px 14px;
  font-size: 13px;
  outline: none;
  transition: border-color 120ms;
}
.sfb-lobby-search:focus { border-color: var(--sfb-emerald, #34d399); }
.sfb-lobby-search::placeholder { color: var(--sfb-s500, #8b90b0); }
.sfb-lobby-status-row {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ======================================================================
 * Session 64 (I4) — Winner modal + confetti
 * ====================================================================== */
.sfb-modal-back {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sfb-fade-in 220ms ease-out both;
  overflow: hidden;
}
.sfb-modal {
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 440px;
  width: calc(100% - 40px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  position: relative;
  z-index: 10001;
}
.sfb-winner-modal {
  text-align: center;
  border-color: var(--sfb-gold, #f0b429);
  background-image: radial-gradient(circle at top, rgba(240, 180, 41, 0.1), transparent 60%);
}
.sfb-winner-medal {
  font-size: 78px;
  margin: 0 auto 8px;
  line-height: 1;
  filter: drop-shadow(0 6px 20px rgba(240, 180, 41, 0.4));
  animation: sfb-winner-bounce 900ms ease-out both;
}
@keyframes sfb-winner-bounce {
  0%   { transform: scale(0.3) rotate(-20deg); opacity: 0; }
  55%  { transform: scale(1.2) rotate(8deg);   opacity: 1; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
.sfb-winner-head {
  font-size: 28px;
  font-weight: 900;
  color: var(--sfb-gold, #f0b429);
  margin-bottom: 8px;
}
.sfb-winner-body {
  font-size: 14px;
  color: var(--sfb-s700, #c4c8e0);
  line-height: 1.55;
  margin-bottom: 18px;
}
.sfb-winner-prize {
  font-size: 13px;
  color: var(--sfb-emerald, #34d399);
  font-weight: 700;
  margin-top: 4px;
}
.sfb-winner-close {
  padding: 11px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sfb-gold, #f0b429), #fde68a);
  color: #0c0e14;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition: transform 100ms;
}
.sfb-winner-close:hover { transform: translateY(-1px); }

.sfb-confetti {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10000;
}
.sfb-confetti-piece {
  position: absolute;
  top: -20px;
  left: var(--x, 50%);
  width: 10px;
  height: 14px;
  background: var(--c, #34d399);
  transform: rotate(0deg);
  animation: sfb-confetti-fall var(--d, 2.4s) ease-in var(--dl, 0s) forwards;
  border-radius: 2px;
}
@keyframes sfb-confetti-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0);       opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate3d(0, 110vh, 0) rotate(var(--r, 360deg)); opacity: 0.85; }
}

/* ======================================================================
 * Session 64 (I9) — Skeleton loaders
 * ====================================================================== */
.sfb-lobby-skel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sfb-skel {
  background: linear-gradient(90deg,
    var(--sfb-surface, #13151d) 0%,
    var(--sfb-surface-2, #1a1d28) 40%,
    var(--sfb-surface, #13151d) 80%);
  background-size: 300% 100%;
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 14px;
  animation: sfb-skel-shimmer 1.6s ease-in-out infinite;
}
@keyframes sfb-skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.sfb-skel-t-card { height: 168px; }

/* ======================================================================
 * Session 65 (J10) — Lock countdown urgency
 * ====================================================================== */
.sfb-lock-countdown {
  display: inline-block;
  transition: color 200ms;
}
.sfb-lock-countdown-urgent {
  color: var(--sfb-red, #f87171);
  animation: sfb-pulse-red 1.4s ease-in-out infinite;
}
@keyframes sfb-pulse-red {
  0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(248, 113, 113, 0); }
  50%      { opacity: 0.85; text-shadow: 0 0 8px rgba(248, 113, 113, 0.55); }
}

/* ======================================================================
 * Session 65 (J11) — Welcome banner
 * ====================================================================== */
.sfb-welcome-banner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px 14px;
  padding: 14px 18px;
  margin-bottom: 12px;
  background: linear-gradient(135deg,
    rgba(52, 211, 153, 0.10),
    rgba(240, 180, 41, 0.08));
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 12px;
  align-items: center;
}
.sfb-welcome-title {
  grid-column: 1 / 2;
  font-size: 14px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-welcome-body {
  grid-column: 1 / 2;
  grid-row: 2;
  font-size: 12px;
  color: var(--sfb-s700, #c4c8e0);
  line-height: 1.45;
}
.sfb-welcome-close {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  align-self: start;
  transition: color 120ms;
}
.sfb-welcome-close:hover { color: var(--sfb-s900, #eef0ff); }

/* ======================================================================
 * Session 66 (K1) — Player detail modal + info button
 * ====================================================================== */
.sfb-player-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-bg, #0c0e14);
  color: var(--sfb-s500, #8b90b0);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 120ms, border-color 120ms, color 120ms;
}
.sfb-player-info-btn:hover {
  transform: scale(1.12);
  border-color: var(--sfb-emerald, #34d399);
  color: var(--sfb-emerald, #34d399);
}
.sfb-player-card { position: relative; }

.sfb-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sfb-bg, #0c0e14);
  color: var(--sfb-s500, #8b90b0);
  border: 1px solid var(--sfb-border, #2a2d3d);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0;
}
.sfb-modal-close:hover {
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s900, #eef0ff);
}

.sfb-player-modal {
  max-width: 520px;
  padding: 0 26px 24px;
  text-align: left;
}
.sfb-player-modal-hero {
  width: calc(100% + 52px);
  margin: 0 -26px 14px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  position: relative;
  overflow: hidden;
}
.sfb-player-modal-hero img {
  height: 160px;
  object-fit: contain;
}
.sfb-player-modal-init {
  font-size: 52px;
  font-weight: 900;
  color: #fff;
}
.sfb-player-modal-name {
  font-size: 24px;
  font-weight: 900;
  color: var(--sfb-s900, #eef0ff);
  margin: 0 0 8px;
}
.sfb-player-modal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.sfb-player-modal-proj {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
  margin-bottom: 16px;
}
.sfb-player-modal-proj-n {
  font-size: 34px;
  font-weight: 900;
  color: var(--sfb-emerald, #34d399);
  font-variant-numeric: tabular-nums;
}
.sfb-player-modal-proj-l {
  font-size: 11px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sfb-player-modal-section {
  margin-top: 14px;
}
.sfb-player-modal-section h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--sfb-s700, #c4c8e0);
  letter-spacing: 0.04em;
}
.sfb-sparkline {
  margin-bottom: 6px;
}
.sfb-player-modal-avg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.sfb-player-modal-avg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 6px;
  background: var(--sfb-surface-2, #1a1d28);
  border-radius: 8px;
  gap: 2px;
}
.sfb-player-modal-avg-v {
  font-size: 18px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-player-modal-avg-l {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
}

/* ======================================================================
 * Session 66 (K4) — Unread dot on Lobby nav tab
 * ====================================================================== */
.sfb-nav-tab-has-unread {
  position: relative;
}
.sfb-nav-tab-has-unread::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 6px;
  height: 6px;
  background: var(--sfb-emerald, #34d399);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--sfb-bg, #0c0e14);
  animation: sfb-bell-pulse 2s infinite;
}

/* ======================================================================
 * Session 66 (K5) — Tournament detail skeleton
 * ====================================================================== */
.sfb-detail-skel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sfb-skel-title { height: 36px; width: 260px; border-radius: 8px; }
.sfb-skel-chips { height: 20px; width: 340px; border-radius: 999px; }
.sfb-skel-body  { height: 280px; border-radius: 12px; }

/* ======================================================================
 * Session 67 Cycle 5 — entry-confirm modal + daily reward + activity feed
 * ====================================================================== */

/* Entry confirmation modal */
.sfb-entry-modal { max-width: 440px; padding: 26px 28px; text-align: left; }
.sfb-entry-modal-title {
  font-size: 22px; font-weight: 900; text-align: center;
  color: var(--sfb-emerald, #34d399); margin-bottom: 4px;
}
.sfb-entry-modal-sub {
  font-size: 13px; font-weight: 700; color: var(--sfb-s700, #c4c8e0);
  text-align: center; margin-bottom: 14px;
}
.sfb-entry-lineup {
  display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px;
  padding: 10px; background: var(--sfb-bg, #0c0e14);
  border-radius: 10px; border: 1px solid var(--sfb-border, #2a2d3d);
}
.sfb-entry-lineup-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  gap: 8px; align-items: center;
  font-size: 12px;
  padding: 4px 0;
}
.sfb-entry-slot {
  font-size: 10px; font-weight: 800;
  color: var(--sfb-s500, #8b90b0);
  text-align: center;
}
.sfb-entry-player-name { font-weight: 700; color: var(--sfb-s900, #eef0ff); }
.sfb-entry-team {
  font-size: 10px; font-weight: 800;
  color: var(--sfb-s500, #8b90b0);
}
.sfb-entry-proj {
  font-size: 11px; font-weight: 800; color: var(--sfb-emerald, #34d399);
  font-variant-numeric: tabular-nums;
}
.sfb-entry-modal-cta {
  display: flex; gap: 10px; justify-content: flex-end;
}
.sfb-entry-share {
  padding: 9px 16px; border: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-bg, #0c0e14); color: var(--sfb-s700, #c4c8e0);
  border-radius: 999px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.sfb-entry-share:hover { color: var(--sfb-emerald, #34d399); border-color: var(--sfb-emerald, #34d399); }
.sfb-entry-ok {
  padding: 9px 22px; border: 0;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), #86efac);
  color: #0c0e14; border-radius: 999px; font-size: 13px;
  font-weight: 800; cursor: pointer;
}

/* Daily reward modal */
.sfb-daily-modal {
  text-align: center; max-width: 360px;
  border-color: var(--sfb-gold, #f0b429);
}
.sfb-daily-icon {
  font-size: 64px; margin-bottom: 6px;
  animation: sfb-winner-bounce 800ms ease-out both;
}
.sfb-daily-head {
  font-size: 22px; font-weight: 900;
  color: var(--sfb-gold, #f0b429); margin-bottom: 8px;
}
.sfb-daily-body {
  font-size: 14px; color: var(--sfb-s700, #c4c8e0);
  margin-bottom: 18px;
}

/* Activity feed */
.sfb-activity-feed { margin-top: 16px; }
.sfb-activity-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.sfb-activity-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: var(--sfb-bg, #0c0e14);
  border-radius: 8px;
  font-size: 12px;
  color: var(--sfb-s700, #c4c8e0);
  animation: sfb-fade-in 200ms ease-out both;
}
.sfb-activity-row em {
  font-style: normal;
  color: var(--sfb-gold, #f0b429);
  font-weight: 700;
}
.sfb-activity-row strong { color: var(--sfb-s900, #eef0ff); font-weight: 700; }
.sfb-activity-icon { font-size: 14px; text-align: center; }
.sfb-activity-time {
  font-size: 10px; color: var(--sfb-s500, #8b90b0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sfb-activity-empty {
  padding: 14px; text-align: center;
  color: var(--sfb-s500, #8b90b0); font-size: 12px; font-style: italic;
}

/* ======================================================================
 * Session 68 Cycle 6 — rank moves, history pane, profile sparkline
 * ====================================================================== */

/* Rank-move pill */
.sfb-rank-move {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s500, #8b90b0);
  vertical-align: middle;
}
.sfb-rank-move-up   { color: var(--sfb-emerald, #34d399); }
.sfb-rank-move-down { color: var(--sfb-red, #f87171); }
.sfb-rank-move-new  { color: var(--sfb-blue, #60a5fa); }

/* Profile sparkline */
.sfb-profile-sparkline-wrap {
  padding: 10px 14px;
  margin-bottom: 14px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
}
.sfb-profile-sparkline-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

/* History rows */
.sfb-history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.sfb-history-row {
  display: grid;
  grid-template-columns: 1fr 56px auto;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  padding: 10px 14px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 120ms, border-color 120ms;
}
.sfb-history-row:hover {
  transform: translateX(2px);
  border-color: var(--sfb-emerald, #34d399);
}
.sfb-history-name {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-history-sub {
  grid-column: 1;
  grid-row: 2;
  font-size: 10px;
  color: var(--sfb-s500, #8b90b0);
}
.sfb-history-rank {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  color: var(--sfb-s700, #c4c8e0);
}
.sfb-history-rank-gold  { color: var(--sfb-gold, #f0b429); }
.sfb-history-rank-medal { color: var(--sfb-s900, #eef0ff); }
.sfb-history-score {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--sfb-emerald, #34d399);
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
 * Session 69 Cycle 7 — number counters + top progress bar + gradient
 * headlines + card hover zoom
 * ====================================================================== */

/* Top progress bar */
.sfb-topbar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg,
    var(--sfb-emerald, #34d399),
    var(--sfb-gold, #f0b429));
  z-index: 11000;
  transition: width 400ms ease-out, opacity 220ms;
  opacity: 0;
}
.sfb-topbar-active {
  opacity: 1;
  animation: sfb-topbar-indeterminate 1.4s ease-in-out infinite;
}
@keyframes sfb-topbar-indeterminate {
  0%   { width: 0;    margin-left: 0; }
  50%  { width: 60%;  margin-left: 0; }
  100% { width: 0;    margin-left: 100%; }
}

/* Gradient page titles */
.sfb-hall-title,
.sfb-profile-name,
.sfb-winner-head,
.sfb-daily-head {
  background: linear-gradient(135deg,
    var(--sfb-s900, #eef0ff) 0%,
    var(--sfb-emerald, #34d399) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.sfb-winner-head {
  background: linear-gradient(135deg,
    var(--sfb-gold, #f0b429) 0%,
    #fde68a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Player card photo zoom on hover */
.sfb-player-card .sfb-player-photo img {
  transition: transform 340ms ease-out;
}
.sfb-player-card:hover .sfb-player-photo img {
  transform: scale(1.08);
}
.sfb-player-card .sfb-player-photo {
  overflow: hidden;
}

/* Lobby card subtle sheen on hover */
.sfb-t-card {
  position: relative;
  overflow: hidden;
}
.sfb-t-card::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 100%);
  transition: left 700ms;
  pointer-events: none;
}
.sfb-t-card:hover::after {
  left: 120%;
}

/* Animated number class (used when we want explicit styling) */
.sfb-num-animate {
  font-variant-numeric: tabular-nums;
}

/* Reduced-motion overrides — kill most keyframe animations */
@media (prefers-reduced-motion: reduce) {
  .sfb-topbar-active,
  .sfb-tier-pulse,
  .sfb-badge-flash,
  .sfb-confetti-piece,
  .sfb-bell-pulse,
  .sfb-streak-flame,
  .sfb-pulse-red,
  .sfb-flame-flicker,
  .sfb-skel,
  .sfb-profile-xp-fill::after,
  .sfb-fp-budget-fill-warn::after,
  .sfb-fp-budget-fill-over::after {
    animation: none !important;
  }
  .sfb-t-card::after { display: none; }
  .sfb-player-card:hover .sfb-player-photo img { transform: none; }
}

/* ======================================================================
 * Session 70 Cycle 8 — share result + notification groups
 * ====================================================================== */

/* Share result button inside winner modal */
.sfb-winner-share {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  margin-right: 8px;
  border: 1px solid var(--sfb-border, #2a2d3d);
  background: var(--sfb-bg, #0c0e14);
  color: var(--sfb-s700, #c4c8e0);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: color 120ms, border-color 120ms, transform 100ms;
}
.sfb-winner-share:hover {
  color: var(--sfb-emerald, #34d399);
  border-color: var(--sfb-emerald, #34d399);
  transform: translateY(-1px);
}

/* Notification group badge */
.sfb-bell-row-group {
  grid-template-columns: 28px 1fr auto;
}
.sfb-bell-group-badge {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--sfb-emerald, #34d399);
  color: #0c0e14;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  align-self: center;
}

/* ======================================================================
 * Session 71 Cycle 9 — A11y: skip link, font-size menu, focus rings,
 * text-scale body attribute
 * ====================================================================== */

.sfb-skip-link {
  position: absolute;
  left: -10000px;
  top: 6px;
  padding: 8px 14px;
  background: var(--sfb-emerald, #34d399);
  color: #0c0e14;
  border-radius: 6px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  z-index: 20000;
}
.sfb-skip-link:focus {
  left: 10px;
  outline: 2px solid var(--sfb-gold, #f0b429);
  outline-offset: 2px;
}

.sfb-a11y-dock {
  position: fixed;
  right: 10px;
  bottom: 10px;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 999px;
  z-index: 7500;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.sfb-a11y-btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
}
.sfb-a11y-btn:hover { color: var(--sfb-s900, #eef0ff); }
.sfb-a11y-btn-active {
  background: var(--sfb-s900, #eef0ff);
  color: var(--sfb-bg, #0c0e14);
}
@media (max-width: 640px) {
  .sfb-a11y-dock { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* Font-size preference — multiplies base 16px */
body[data-sfb-text-scale="sm"] { font-size: 14px; }
body[data-sfb-text-scale="md"] { font-size: 16px; }
body[data-sfb-text-scale="lg"] { font-size: 17px; }
body[data-sfb-text-scale="lg"] .sfb-t-card { padding: 18px; }
body[data-sfb-text-scale="lg"] .sfb-player-card,
body[data-sfb-text-scale="lg"] .sfb-shop-card { padding: 14px; }

/* Focus-visible rings on every interactive surface */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible {
  outline: 2px solid var(--sfb-emerald, #34d399);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Kill native focus ring where we've already highlighted */
.sfb-nav-tab-active:focus-visible,
.sfb-bottom-nav-tab-active:focus-visible {
  outline-offset: -2px;
}

/* Visible state indicator on aria-current tabs */
[aria-current="page"].sfb-nav-tab {
  font-weight: 900;
}

/* ======================================================================
 * Session 72 Cycle 10 — Perf: content-visibility on long lists
 * ====================================================================== */

/* Long grids get GPU-friendly render-skipping for off-screen items. */
.sfb-player-grid .sfb-player-card,
.sfb-shop-grid .sfb-shop-card,
.sfb-standings-polished .sfb-standings-row,
.sfb-blog-grid .sfb-blog-card,
.sfb-history-list .sfb-history-row {
  content-visibility: auto;
  contain-intrinsic-size: auto 180px;
}

/* Reserve space for player photos so lazy-load doesn't cause layout
   thrash as images resolve one-by-one. */
.sfb-player-photo {
  aspect-ratio: 1 / 1;
  background-color: var(--sfb-surface-2, #1a1d28);
}
.sfb-player-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================================================================
 * Session 73 Cycle 11 — Trust: cert verify + scoring rules panel
 * ====================================================================== */

.sfb-cert-section {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--sfb-surface, #13151d);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 12px;
}
.sfb-cert-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
}
.sfb-cert-chip-loading {
  background: var(--sfb-surface-2, #1a1d28);
  color: var(--sfb-s500, #8b90b0);
}
.sfb-cert-chip-ok {
  background: rgba(52, 211, 153, 0.12);
  color: var(--sfb-emerald, #34d399);
  border: 1px solid rgba(52, 211, 153, 0.34);
}
.sfb-cert-chip-ok::before { content: '✓ '; }
.sfb-cert-chip-warn,
.sfb-cert-chip-error {
  background: rgba(248, 113, 113, 0.12);
  color: var(--sfb-red, #f87171);
  border: 1px solid rgba(248, 113, 113, 0.34);
}

.sfb-cert-details { margin-top: 10px; }
.sfb-cert-details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--sfb-s500, #8b90b0);
  padding: 4px 0;
}
.sfb-cert-pre {
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 8px;
  padding: 10px;
  font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  color: var(--sfb-s700, #c4c8e0);
  overflow-x: auto;
  margin-top: 8px;
}
.sfb-cert-hmac {
  margin-top: 8px;
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
}
.sfb-cert-hmac code {
  color: var(--sfb-s700, #c4c8e0);
  word-break: break-all;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.sfb-cert-hmac-l {
  font-weight: 800;
  color: var(--sfb-s700, #c4c8e0);
}

.sfb-scoring-panel {
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--sfb-surface-2, #1a1d28);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
}
.sfb-scoring-panel > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--sfb-s900, #eef0ff);
  list-style: none;
}
.sfb-scoring-panel > summary::-webkit-details-marker { display: none; }
.sfb-scoring-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
}
.sfb-scoring-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  background: var(--sfb-bg, #0c0e14);
  border-radius: 6px;
}
.sfb-scoring-stat {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  letter-spacing: 0.03em;
}
.sfb-scoring-pts {
  font-size: 13px;
  font-weight: 800;
  color: var(--sfb-emerald, #34d399);
  font-variant-numeric: tabular-nums;
}

/* ======================================================================
 * Session 74 Cycle 12 — Quests
 * ====================================================================== */
.sfb-quests {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid rgba(52, 211, 153, 0.28);
  border-radius: 10px;
  background-image: radial-gradient(circle at top right, rgba(52, 211, 153, 0.06), transparent 60%);
}
.sfb-quests h4 {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sfb-emerald, #34d399);
}
.sfb-quest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--sfb-border, #2a2d3d);
  align-items: center;
}
.sfb-quest-row:first-of-type { border-top: 0; }
.sfb-quest-title {
  grid-column: 1;
  grid-row: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-quest-progress {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.sfb-quest-track {
  height: 6px;
  background: var(--sfb-surface-2, #1a1d28);
  border-radius: 999px;
  overflow: hidden;
}
.sfb-quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  border-radius: 999px;
  transition: width 500ms ease-out;
}
.sfb-quest-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500, #8b90b0);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sfb-quest-reward {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--sfb-gold, #f0b429);
  padding: 4px 10px;
  border: 1px solid rgba(240, 180, 41, 0.34);
  border-radius: 999px;
  background: rgba(240, 180, 41, 0.06);
  font-variant-numeric: tabular-nums;
}
.sfb-quest-done .sfb-quest-title {
  color: var(--sfb-emerald, #34d399);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.sfb-quest-done .sfb-quest-reward {
  background: rgba(52, 211, 153, 0.12);
  color: var(--sfb-emerald, #34d399);
  border-color: rgba(52, 211, 153, 0.34);
}

/* ======================================================================
 * Session 75 Cycle 13 — Social: public user profile modal
 * ====================================================================== */
.sfb-user-modal {
  max-width: 360px;
  padding: 24px 28px;
  text-align: center;
}
.sfb-user-modal-avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sfb-emerald, #34d399), var(--sfb-gold, #f0b429));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0c0e14;
  font-weight: 900;
  font-size: 30px;
  border: 3px solid var(--sfb-border, #2a2d3d);
}
.sfb-user-modal-name {
  font-size: 20px;
  font-weight: 900;
  margin: 0 0 4px;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-user-modal-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--sfb-emerald, #34d399);
  margin-bottom: 14px;
}
.sfb-user-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}
.sfb-user-modal-cell {
  padding: 12px 6px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 10px;
}
.sfb-user-modal-v {
  font-size: 20px;
  font-weight: 800;
  color: var(--sfb-s900, #eef0ff);
  font-variant-numeric: tabular-nums;
}
.sfb-user-modal-l {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sfb-s500, #8b90b0);
  margin-top: 2px;
}

.sfb-standings-name { transition: color 120ms; }
.sfb-standings-name:hover { color: var(--sfb-emerald, #34d399); }

/* ======================================================================
 * Session 76 Cycle 14 — footer + shortcut cheatsheet
 * ====================================================================== */
.sfb-footer {
  margin-top: 24px;
  padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 11px;
  color: var(--sfb-s500, #8b90b0);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sfb-footer strong {
  color: var(--sfb-s700, #c4c8e0);
  font-weight: 700;
}
.sfb-footer-sep {
  opacity: 0.5;
}
.sfb-footer-kbd {
  border: 0;
  background: transparent;
  color: var(--sfb-s500, #8b90b0);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.sfb-footer-kbd:hover { color: var(--sfb-emerald, #34d399); }

@media (max-width: 640px) {
  .sfb-footer { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
}

/* Shortcut cheatsheet */
.sfb-shortcuts-modal {
  max-width: 420px;
  padding: 26px 28px;
}
.sfb-shortcuts-h {
  font-size: 18px;
  font-weight: 900;
  margin: 0 0 14px;
  color: var(--sfb-s900, #eef0ff);
}
.sfb-shortcuts-table {
  width: 100%;
  border-collapse: collapse;
}
.sfb-shortcuts-table td {
  padding: 8px 4px;
  border-top: 1px solid var(--sfb-border, #2a2d3d);
  font-size: 13px;
  color: var(--sfb-s700, #c4c8e0);
}
.sfb-shortcuts-table tr:first-child td { border-top: 0; }
.sfb-shortcuts-key {
  width: 80px;
}
.sfb-shortcuts-key kbd {
  display: inline-block;
  padding: 3px 9px;
  background: var(--sfb-bg, #0c0e14);
  border: 1px solid var(--sfb-border, #2a2d3d);
  border-radius: 6px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--sfb-gold, #f0b429);
  box-shadow: 0 2px 0 var(--sfb-border, #2a2d3d);
}

/* =========================================================================
 * Session 77 — Prod UI alignment. Rewrites every card/header/picker class
 * to match starterfive.com app.css (.sf-* + .fy-*) pixel-for-pixel.
 * This block appears at the END of embed.css so later rules win.
 * ========================================================================= */

/* -- Top nav — pill-group styled like .sf-nav/.sf-nav-btn -- */
.sfb-nav-tabs {
  display: flex;
  gap: 0;
  background: var(--sfb-surface-2);
  border-radius: var(--sfb-r-sm);
  padding: 3px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 0;
}
.sfb-nav-tabs::-webkit-scrollbar { display: none; }
.sfb-nav-tab {
  padding: 7px 18px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-s500);
  background: transparent;
  border: 0;
  border-radius: 6px;
  position: relative;
  white-space: nowrap;
  transition: all 0.15s;
}
.sfb-nav-tab:hover { color: var(--sfb-s800); }
.sfb-nav-tab-active {
  color: var(--sfb-s900);
  font-weight: 700;
  background: var(--sfb-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* -- Credits chip — inline pill with gold coin + number (NOT big gold ring) -- */
.sfb-credits-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: var(--sfb-r-sm);
  border: 1px solid var(--sfb-border);
  background: var(--sfb-surface-2);
  color: var(--sfb-s800);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sfb-credits-chip::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #ffe066 0%, #f59e0b 45%, #b45309 100%);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(180, 83, 9, 0.5);
  flex-shrink: 0;
}
.sfb-credits-chip:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
}

/* -- Streak chip — orange flame, narrow (beside credits) -- */
.sfb-streak-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: var(--sfb-r-sm);
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  color: var(--sfb-orange);
  font-weight: 700;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* -- Bell — minimal, no big badge -- */
.sfb-bell {
  width: 30px; height: 30px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--sfb-s500);
  position: relative;
  border-radius: 50%;
  transition: color 0.15s;
}
.sfb-bell:hover { color: var(--sfb-s800); }
.sfb-bell-icon { font-size: 16px; line-height: 1; }
.sfb-bell-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  background: var(--sfb-red);
  color: #fff;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px rgba(var(--sfb-surface-rgb), 0.92);
  animation: none;
}

/* -- Profile pill — 30px circle avatar + name (mirrors .sf-hdr-user) -- */
.sfb-profile-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sfb-s800);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.sfb-profile-pill::before {
  content: attr(data-initial);
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--sfb-gold);
  color: var(--sfb-on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

/* -- Tournament list — prod spacing -- */
.sfb-t-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}

/* -- Tournament card — mirrors .fy-contest-card -- */
.sfb-t-card,
.sfb-t-card-hero {
  background: var(--sfb-surface);
  border: 1px solid var(--sfb-border);
  border-radius: 16px;
  padding: 22px 24px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease;
  max-width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sfb-t-card:hover,
.sfb-t-card-hero:hover {
  transform: translateY(-3px);
  border-color: var(--sfb-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.sfb-t-card.sfb-t-entered,
.sfb-t-card-hero.sfb-t-entered {
  border-color: rgba(16, 185, 129, 0.15);
  background: rgba(6, 182, 212, 0.02);
}
/* Kill the sheen sweep pseudo-element from Cycle 7 */
.sfb-t-card::after,
.sfb-t-card-hero::after { display: none; }

/* Card header row — date + sport/status/weekly chips + right-side meta */
.sfb-t-card-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sfb-t-date {
  font-size: 19px;
  font-weight: 900;
  color: var(--sfb-s900);
  letter-spacing: -0.02em;
}
.sfb-t-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--sfb-s900);
  margin: 0;
  letter-spacing: -0.01em;
  background: none !important;
  -webkit-text-fill-color: var(--sfb-s900) !important;
  color: var(--sfb-s900) !important;
}

/* Chips — prod .fy-contest-badge style */
.sfb-status-chip,
.sfb-t-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sfb-status-chip-open      { background: rgba(16, 185, 129, 0.12); color: var(--sfb-emerald); }
.sfb-status-chip-live      { background: rgba(248, 113, 113, 0.12); color: var(--sfb-red); animation: sfb-pulse-badge 2s infinite; }
.sfb-status-chip-locked    { background: rgba(248, 113, 113, 0.12); color: var(--sfb-red); }
.sfb-status-chip-finalized { background: rgba(107, 122, 146, 0.12); color: var(--sfb-s400); }
.sfb-status-chip-upcoming  { background: rgba(96, 165, 250, 0.12); color: var(--sfb-blue); }
.sfb-status-chip-sport     { background: rgba(251, 146, 60, 0.12); color: var(--sfb-orange); }
.sfb-t-chip-weekly         { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }
@keyframes sfb-pulse-badge { 0%, 100% { opacity: 1 } 50% { opacity: 0.6 } }

/* Live dot override */
.sfb-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sfb-emerald);
  animation: sfb-live-dot-pulse 1.5s infinite;
}
@keyframes sfb-live-dot-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.3 } }

/* Meta row — prize podium + cap + entries + locks in (replaces 4-tile grid) */
.sfb-t-tiles { display: none; }  /* retire the Session 50 4-tile grid */
.sfb-t-meta {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--sfb-s400);
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}
.sfb-t-meta-item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.sfb-t-meta-item strong { color: var(--sfb-s700); font-weight: 700; }

/* Inline game chips — mirrors .fy-game-chip-lobby */
.sfb-t-games {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  flex-wrap: wrap;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.sfb-t-games::-webkit-scrollbar { display: none; }
.sfb-t-game-chip {
  flex: 0 0 auto;
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  border-radius: var(--sfb-r-sm);
  padding: 6px 10px;
  font-size: 11px;
  text-align: center;
  min-width: 90px;
}
.sfb-t-game-chip .teams { font-weight: 700; color: var(--sfb-s700); white-space: nowrap; }
.sfb-t-game-chip .teams .vs { color: var(--sfb-s400); font-weight: 400; margin: 0 2px; }
.sfb-t-game-chip .gtime { color: var(--sfb-s400); font-size: 10px; margin-top: 2px; }

/* Entered panel — emerald border + cyan-tinted bg */
.sfb-t-entered-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--sfb-gold-lt);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--sfb-r-sm);
  padding: 8px 14px;
  font-size: 12px;
  flex-wrap: wrap;
}
.sfb-t-entered-panel .sfb-entry-badge {
  background: rgba(16, 185, 129, 0.15);
  color: var(--sfb-emerald);
  font-weight: 700;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.sfb-t-entered-panel .sfb-entry-fp {
  margin-left: auto;
  font-size: 18px;
  font-weight: 800;
  color: var(--sfb-emerald);
  font-variant-numeric: tabular-nums;
}
.sfb-t-entered-panel .sfb-entry-fp .lbl {
  font-size: 9px;
  color: var(--sfb-s400);
  font-weight: 400;
}

/* 5-cell lineup preview on entered cards */
.sfb-t-picks-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  width: 100%;
}
.sfb-t-pick-cell {
  background: var(--sfb-surface);
  border: 1px solid var(--sfb-border);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.sfb-t-pick-cell .pg-pos {
  font-size: 9px; font-weight: 800; color: #fff;
  border-radius: 4px;
  padding: 2px 0; margin-bottom: 4px;
  display: block;
}
.sfb-t-pick-cell .pg-pos-PG { background: var(--sfb-pos-pg); }
.sfb-t-pick-cell .pg-pos-SG { background: var(--sfb-pos-sg); }
.sfb-t-pick-cell .pg-pos-SF { background: var(--sfb-pos-sf); }
.sfb-t-pick-cell .pg-pos-PF { background: var(--sfb-pos-pf); }
.sfb-t-pick-cell .pg-pos-C  { background: var(--sfb-pos-c); }
.sfb-t-pick-cell .pg-name {
  font-size: 12px; font-weight: 700;
  color: var(--sfb-s800);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sfb-t-pick-cell .pg-fp {
  font-size: 15px; font-weight: 800;
  color: var(--sfb-gold);
  margin-top: 4px;
}

/* Card footer — "Enter Contest" or "Edit Picks" CTA */
.sfb-t-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.sfb-t-cta {
  padding: 8px 20px;
  border-radius: var(--sfb-r-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--sfb-emerald);
  color: var(--sfb-on-accent);
  border: 0;
  white-space: nowrap;
  transition: background 0.15s;
  cursor: pointer;
}
.sfb-t-cta:hover { background: #059669; }
.sfb-t-cta-ghost {
  padding: 8px 20px;
  border-radius: var(--sfb-r-sm);
  font-size: 13px;
  font-weight: 600;
  background: var(--sfb-surface-2);
  color: var(--sfb-s700);
  border: 1px solid var(--sfb-border);
  cursor: pointer;
}
.sfb-t-cta-ghost:hover { border-color: var(--sfb-gold); color: var(--sfb-gold); }
.sfb-t-lock-timer {
  font-size: 12px;
  font-weight: 600;
  color: var(--sfb-s500);
  white-space: nowrap;
}

/* Prize tier inline chips (retired — meta row now handles prize podium) */
.sfb-prize-tiers {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sfb-prize-pill {
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-variant-numeric: tabular-nums;
  color: var(--sfb-s700);
}
.sfb-prize-pill-1 { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.sfb-prize-pill-2 { color: #c8d6e5; }
.sfb-prize-pill-3 { color: #cd7f32; }

/* === Player picker (2-column) — mirrors prod's .fy-grid layout === */
.sfb-pick-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .sfb-pick-layout { grid-template-columns: 1fr; }
}

/* Right-hand sticky "Your Lineup" panel */
.sfb-lineup-panel,
.sfb-pick-layout > aside {
  position: sticky;
  top: calc(var(--sfb-hdr) + 16px);
  max-height: calc(100vh - var(--sfb-hdr) - 32px);
  display: flex;
  flex-direction: column;
  background: var(--sfb-bg);
  border: 1px solid var(--sfb-border);
  border-radius: var(--sfb-r);
  overflow-y: auto;
  overflow-x: hidden;
  align-self: start;
  scrollbar-width: thin;
}
.sfb-lineup-hdr {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sfb-lineup-hdr h3 {
  font-size: 17px;
  font-weight: 800;
  color: var(--sfb-s900);
  margin: 0;
}
.sfb-lineup-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--sfb-gold);
}

/* Slot rows — mirrors prod's .fy-slot */
.sfb-slots {
  padding: 8px 14px;
  flex: 1;
  overflow-y: auto;
}
.sfb-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sfb-r);
  margin-bottom: 6px;
  min-height: 62px;
  border: 1px solid var(--sfb-border);
  background: var(--sfb-surface);
  transition: all 0.15s;
}
.sfb-slot-filled {
  border-color: var(--sfb-gold-dk);
  background: rgba(6, 182, 212, 0.04);
}
.sfb-slot-empty { background: var(--sfb-surface); }
.sfb-slot-pos {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.sfb-slot-pos-PG { background: var(--sfb-slot-pg); }
.sfb-slot-pos-SG { background: var(--sfb-slot-sg); }
.sfb-slot-pos-SF { background: var(--sfb-slot-sf); }
.sfb-slot-pos-PF { background: var(--sfb-slot-pf); }
.sfb-slot-pos-C  { background: var(--sfb-slot-c); }
.sfb-slot-empty-l {
  flex: 1;
  font-size: 13px;
  color: var(--sfb-s400);
}
.sfb-slot-player {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sfb-slot-player .slot-img {
  width: 38px; height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--sfb-surface-2);
}
.sfb-slot-player .name {
  font-size: 15px;
  font-weight: 800;
  color: var(--sfb-s900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfb-slot-player .meta {
  font-size: 11px;
  color: var(--sfb-s400);
  margin-top: 1px;
}
.sfb-slot-fp {
  font-size: 20px;
  font-weight: 900;
  color: var(--sfb-gold);
  flex-shrink: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sfb-slot-fp .fp-lbl {
  font-size: 9px;
  color: var(--sfb-s400);
  font-weight: 400;
}
.sfb-slot-remove {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--sfb-s400);
  background: rgba(255, 255, 255, 0.06);
  transition: all 0.1s;
  flex-shrink: 0;
  cursor: pointer;
  border: 0;
}
.sfb-slot-remove:hover {
  background: rgba(248, 113, 113, 0.15);
  color: var(--sfb-red);
}

/* FP budget row inside sidebar */
.sfb-fp-budget {
  padding: 14px 18px;
  border-top: 1px solid var(--sfb-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--sfb-s500);
}
.sfb-fp-budget strong {
  color: var(--sfb-gold);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.sfb-fp-budget.over strong { color: var(--sfb-red); }

/* Enter/save CTA footer inside sidebar */
.sfb-lineup-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--sfb-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sfb-lineup-footer button {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: 0;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.sfb-lineup-footer .sfb-lineup-save {
  background: linear-gradient(180deg, var(--sfb-emerald), #059669);
  color: #fff;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.25);
}
.sfb-lineup-footer .sfb-lineup-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35);
}
.sfb-lineup-footer .sfb-lineup-save:disabled {
  background: var(--sfb-surface-2);
  color: var(--sfb-s500);
  box-shadow: none;
  cursor: not-allowed;
}
.sfb-lineup-footer .sfb-lineup-secondary {
  background: var(--sfb-surface-2);
  color: var(--sfb-s700);
  border: 1px solid var(--sfb-border);
}
.sfb-lineup-footer .sfb-lineup-secondary:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
}

/* === Player filter row — game tabs + position chips === */
.sfb-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.sfb-game-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sfb-game-tab {
  padding: 7px 14px;
  border-radius: var(--sfb-r-sm);
  font-size: 12px;
  font-weight: 600;
  background: var(--sfb-surface);
  border: 1px solid var(--sfb-border);
  color: var(--sfb-s500);
  transition: all 0.15s;
  cursor: pointer;
}
.sfb-game-tab:hover { border-color: var(--sfb-border-strong); color: var(--sfb-s700); }
.sfb-game-tab-active {
  background: var(--sfb-gold-lt);
  color: var(--sfb-gold);
  border-color: var(--sfb-gold-glow);
}

.sfb-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.sfb-chip {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--sfb-surface);
  border: 1px solid var(--sfb-border);
  color: var(--sfb-s500);
  transition: all 0.15s;
  cursor: pointer;
  white-space: nowrap;
}
.sfb-chip:hover { border-color: var(--sfb-border-strong); color: var(--sfb-s700); }
.sfb-chip-active {
  background: var(--sfb-gold);
  color: var(--sfb-on-accent);
  border-color: var(--sfb-gold);
}
.sfb-chip-active[data-pos="PG"] { background: var(--sfb-pos-pg); border-color: var(--sfb-pos-pg); color: #fff; }
.sfb-chip-active[data-pos="SG"] { background: var(--sfb-pos-sg); border-color: var(--sfb-pos-sg); color: #fff; }
.sfb-chip-active[data-pos="SF"] { background: var(--sfb-pos-sf); border-color: var(--sfb-pos-sf); color: #fff; }
.sfb-chip-active[data-pos="PF"] { background: var(--sfb-pos-pf); border-color: var(--sfb-pos-pf); color: #fff; }
.sfb-chip-active[data-pos="C"]  { background: var(--sfb-pos-c);  border-color: var(--sfb-pos-c);  color: #fff; }

.sfb-search {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--sfb-r-sm);
  border: 1px solid var(--sfb-border);
  background: var(--sfb-surface-2);
  font-size: 13px;
  color: var(--sfb-s700);
}

/* === Player card — mirrors .fy-player-card === */
.sfb-player-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.sfb-player-card {
  background: var(--sfb-surface) !important;
  border: 1px solid var(--sfb-border) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: all 0.15s;
  position: relative;
  cursor: pointer;
}
.sfb-player-card:hover {
  border-color: var(--sfb-border-strong) !important;
  box-shadow: var(--sfb-sh);
  transform: none;  /* disable Cycle 7 lift */
}
.sfb-player-card.sfb-selected,
.sfb-player-card[aria-pressed="true"] {
  border-color: var(--sfb-gold) !important;
  background: var(--sfb-gold-lt) !important;
  box-shadow: 0 0 0 1px var(--sfb-gold);
}
.sfb-player-card.sfb-injured { opacity: 0.5; }

.sfb-player-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.sfb-player-photo {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  background: var(--sfb-surface-2);
  flex-shrink: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.sfb-player-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.sfb-player-init {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--sfb-s500);
}

.sfb-player-meta { flex: 1; min-width: 0; }
.sfb-player-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--sfb-s900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.sfb-player-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  font-size: 11px;
  color: var(--sfb-s400);
}
.sfb-pos-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  background: var(--sfb-s500);
}
.sfb-pos-pill.sfb-pos-pg, .sfb-pos-pg { background: var(--sfb-pos-pg); }
.sfb-pos-pill.sfb-pos-sg, .sfb-pos-sg { background: var(--sfb-pos-sg); }
.sfb-pos-pill.sfb-pos-sf, .sfb-pos-sf { background: var(--sfb-pos-sf); }
.sfb-pos-pill.sfb-pos-pf, .sfb-pos-pf { background: var(--sfb-pos-pf); }
.sfb-pos-pill.sfb-pos-c,  .sfb-pos-c  { background: var(--sfb-pos-c); }
.sfb-team-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500);
}
.sfb-match-chip {
  font-size: 10px;
  color: var(--sfb-s400);
  margin-left: auto;
  white-space: nowrap;
}

/* Stats row — 5 columns (PPG/RPG/APG/SPG/BPG) */
.sfb-player-stats,
.sfb-player-avgs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.sfb-player-stat,
.sfb-player-avg {
  text-align: center;
  background: var(--sfb-surface-2);
  padding: 5px 8px;
  border-radius: 6px;
}
.sfb-player-stat .val,
.sfb-player-avg-v {
  font-size: 13px;
  font-weight: 800;
  color: var(--sfb-s800);
  font-variant-numeric: tabular-nums;
}
.sfb-player-stat .lbl,
.sfb-player-avg-l {
  font-size: 8px;
  color: var(--sfb-s400);
  text-transform: uppercase;
  margin-top: 1px;
  letter-spacing: 0.3px;
}

/* Gamelog strip — 5-6 cells, prod style */
.sfb-gamelog-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.sfb-gl-cell {
  padding: 6px 4px;
  border-radius: 6px;
  background: var(--sfb-surface-2);
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--sfb-s500);
  font-variant-numeric: tabular-nums;
}
.sfb-gl-hot  { color: var(--sfb-emerald); border: 1px solid rgba(16, 185, 129, 0.2); }
.sfb-gl-warm { color: var(--sfb-gold); border: 1px solid rgba(6, 182, 212, 0.2); }
.sfb-gl-cool { color: var(--sfb-s500); }

/* Bottom row — proj + select button */
.sfb-player-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 4px;
}
.sfb-player-proj,
.sfb-player-proj-col {
  font-size: 12px;
  font-weight: 700;
  color: var(--sfb-gold);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
}
.sfb-player-proj.over { color: var(--sfb-red); font-weight: 600; }
.sfb-player-proj-n { font-size: 14px; font-weight: 800; }
.sfb-player-proj-l {
  font-size: 9px;
  color: var(--sfb-s400);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sfb-player-action,
.sfb-player-select {
  padding: 4px 14px !important;
  border-radius: var(--sfb-r-sm) !important;
  font-size: 12px !important;
  font-weight: 600;
  border: 1px solid var(--sfb-border) !important;
  color: var(--sfb-s700) !important;
  background: var(--sfb-surface-2) !important;
  transition: all 0.15s;
  cursor: pointer;
  position: static !important;
  width: auto !important;
  height: auto !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sfb-player-action:hover {
  border-color: var(--sfb-gold) !important;
  color: var(--sfb-gold) !important;
}
.sfb-player-card.sfb-selected .sfb-player-action,
.sfb-player-card[aria-pressed="true"] .sfb-player-action {
  background: var(--sfb-gold) !important;
  border-color: var(--sfb-gold) !important;
  color: var(--sfb-on-accent) !important;
}

/* Injury badge — corner variant like prod */
.sfb-picker-injury,
.sfb-player-injury {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.sfb-picker-injury-out,   .sfb-player-injury.OUT  { background: rgba(248, 113, 113, 0.15); color: var(--sfb-red); }
.sfb-picker-injury-gtd,   .sfb-player-injury.GTD  { background: rgba(251, 146, 60, 0.15); color: var(--sfb-orange); }
.sfb-picker-injury-day,   .sfb-picker-injury-dtd, .sfb-player-injury.DTD  { background: rgba(251, 146, 60, 0.15); color: var(--sfb-orange); }

/* Override old slot-circle styling to match prod .fy-slot-pos exactly —
   40px round with position-colour fill. Layout surrounding it (lineup
   row) is restyled below to match .fy-slot. */
.sfb-slot-circle {
  display: flex !important;
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #fff !important;
  flex-shrink: 0;
  overflow: hidden;
  border: 0 !important;
  text-transform: uppercase;
}
.sfb-slot-circle img { width: 100%; height: 100%; object-fit: cover; }
.sfb-slot-circle.sfb-slot-pg { background: var(--sfb-slot-pg) !important; }
.sfb-slot-circle.sfb-slot-sg { background: var(--sfb-slot-sg) !important; }
.sfb-slot-circle.sfb-slot-sf { background: var(--sfb-slot-sf) !important; }
.sfb-slot-circle.sfb-slot-pf { background: var(--sfb-slot-pf) !important; }
.sfb-slot-circle.sfb-slot-c  { background: var(--sfb-slot-c)  !important; }

.sfb-lineup-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: var(--sfb-r) !important;
  border: 1px solid var(--sfb-border) !important;
  background: var(--sfb-surface) !important;
  min-height: 62px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.sfb-lineup-row[data-filled="1"],
.sfb-lineup-row.sfb-filled {
  border-color: var(--sfb-gold-dk) !important;
  background: rgba(6, 182, 212, 0.04) !important;
}
.sfb-lineup-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sfb-lineup-name-line { font-size: 15px; font-weight: 800; color: var(--sfb-s900); letter-spacing: -0.01em; }
.sfb-lineup-name-meta { font-size: 11px; color: var(--sfb-s400); }

.sfb-lineup-rows { padding: 8px 14px; }

.sfb-fp-budget-track {
  height: 6px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 999px !important;
}
.sfb-fp-budget-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--sfb-gold), var(--sfb-emerald)) !important;
  border-radius: 999px !important;
}
.sfb-fp-budget-fill-warn { background: linear-gradient(90deg, var(--sfb-gold), var(--sfb-orange)) !important; }
.sfb-fp-budget-fill-over { background: var(--sfb-red) !important; }

/* Scoring rules — flatter, prod-matched */
.sfb-scoring-panel {
  padding: 14px 18px !important;
  margin-bottom: 12px;
  background: var(--sfb-surface) !important;
  border: 1px solid var(--sfb-border) !important;
  border-radius: var(--sfb-r) !important;
}
.sfb-scoring-panel > summary {
  font-weight: 700;
  font-size: 13px;
  color: var(--sfb-s800);
}
.sfb-scoring-pts { color: var(--sfb-gold) !important; }

/* Footer / a11y dock tweaks — keep but lower vis */
.sfb-footer { color: var(--sfb-s500); }
.sfb-footer strong { color: var(--sfb-s700); }
.sfb-a11y-dock {
  background: rgba(var(--sfb-surface-rgb), 0.92);
  border: 1px solid var(--sfb-border);
}

/* Responsive header collapse */
@media (max-width: 640px) {
  .sfb-header { padding: 8px 10px 0; }
  .sfb-header-inner {
    height: 48px;
    grid-template-columns: 1fr 1fr;
    padding: 0 14px;
    border-radius: 14px;
    gap: 6px;
  }
  .sfb-header-center { display: none; }  /* hide top nav on mobile — bottom nav covers it */
  .sfb-title { font-size: 14px; }
  .sfb-profile-pill span { display: none; }  /* show only avatar on mobile */
  #sfb-root { padding: 0 14px 80px; }
  .sfb-t-card, .sfb-t-card-hero { padding: 14px 16px; }
}

/* Disable the intrusive gradient-text on headings (Cycle 7) — prod uses solid color */
.sfb-hall-title,
.sfb-winner-head,
.sfb-daily-head,
.sfb-profile-name {
  -webkit-text-fill-color: var(--sfb-s900) !important;
  color: var(--sfb-s900) !important;
  background: none !important;
}

/* =========================================================================
 * Session 78 — Rich gamelog cells (.sfb-recent-game) + Top Performances
 * carousel (.sfb-tp-*). Mirrors .fy-recent-game + .tp-* from starterfive.com.
 * ========================================================================= */

/* -- Rich gamelog cells -------------------------------------------------- */
.sfb-recent-games-wrap { margin-top: 2px; }
.sfb-recent-games {
  display: flex;
  gap: 4px;
}
.sfb-recent-game {
  flex: 1;
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  border-radius: 6px;
  padding: 5px 4px;
  text-align: center;
  font-size: 10px;
  min-width: 0;
}
.sfb-recent-game.sfb-rg-dnp { opacity: 0.45; }
.sfb-rg-opp {
  font-weight: 700;
  color: var(--sfb-s700);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfb-rg-result { font-size: 9px; font-weight: 700; }
.sfb-rg-result-W { color: var(--sfb-emerald); }
.sfb-rg-result-L { color: var(--sfb-red); }
.sfb-rg-fp {
  font-size: 14px;
  font-weight: 800;
  color: var(--sfb-gold);
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sfb-rg-fp-dnp { color: var(--sfb-s400); font-size: 12px; }
.sfb-rg-sub {
  font-size: 9px;
  color: var(--sfb-s400);
  font-variant-numeric: tabular-nums;
}
.sfb-rg-date {
  font-size: 9px;
  color: var(--sfb-s400);
  margin-top: 2px;
}

/* Hide the old simple .sfb-gamelog-strip / .sfb-gamelog-cell
   (pre-S78) now that every card emits the rich form. */
.sfb-player-card .sfb-gamelog-strip,
.sfb-player-card .sfb-gamelog-cell { display: none; }

/* -- Top Performances carousel (hero above contest list) ----------------- */
.sfb-tp-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--sfb-border);
  background: var(--sfb-surface);
  margin-bottom: 16px;
}
.sfb-tp-track {
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(calc(var(--sfb-tp-idx, 0) * -100%));
  will-change: transform;
}
.sfb-tp-slide {
  min-width: 100%;
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.sfb-tp-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--sfb-gold);
  margin-bottom: 10px;
}
.sfb-tp-card {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.sfb-tp-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--sfb-gold-glow);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sfb-surface-2);
  font-size: 22px;
  font-weight: 900;
  color: var(--sfb-s900);
}
.sfb-tp-content { flex: 1; min-width: 160px; }
.sfb-tp-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--sfb-s900);
  margin-bottom: 2px;
}
.sfb-tp-ctx {
  font-size: 11px;
  color: var(--sfb-s400);
  margin-bottom: 6px;
}
.sfb-tp-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sfb-tp-stat {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  text-align: center;
}
.sfb-tp-stat-v {
  font-size: 14px;
  font-weight: 800;
  color: var(--sfb-gold);
  font-variant-numeric: tabular-nums;
}
.sfb-tp-stat-l {
  font-size: 8px;
  color: var(--sfb-s400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sfb-tp-fp {
  margin-left: auto;
  text-align: center;
  flex-shrink: 0;
}
.sfb-tp-fp-v {
  font-size: 32px;
  font-weight: 900;
  color: var(--sfb-gold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sfb-tp-fp-l {
  font-size: 9px;
  color: var(--sfb-s400);
  margin-top: 2px;
}
.sfb-tp-arrows {
  position: absolute;
  top: 50%; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 8px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 5;
}
.sfb-tp-arr {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(var(--sfb-surface-rgb), 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid var(--sfb-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  color: var(--sfb-s500);
  font-size: 16px;
  line-height: 1;
  transition: all 0.2s;
}
.sfb-tp-arr:hover {
  background: var(--sfb-gold-lt);
  border-color: var(--sfb-gold-glow);
  color: var(--sfb-gold);
}
.sfb-tp-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 8px;
}
.sfb-tp-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sfb-border-strong);
  cursor: pointer;
  transition: all 0.3s;
  border: 0;
  padding: 0;
}
.sfb-tp-dot-active {
  background: var(--sfb-gold);
  box-shadow: 0 0 8px var(--sfb-gold-glow);
  width: 20px;
  border-radius: 4px;
}
@media (max-width: 640px) {
  .sfb-tp-card { flex-direction: column; align-items: flex-start; }
  .sfb-tp-fp { margin-left: 0; text-align: left; }
  .sfb-tp-fp-v { font-size: 24px; }
  .sfb-tp-slide { padding: 16px; }
  .sfb-tp-avatar { width: 44px; height: 44px; }
  .sfb-tp-name { font-size: 14px; }
}

/* -- Operator theme override (gap 3) ------------------------------------- */
/* When an operator sets their theme's color_primary, it cascades through
   --color-primary → our --sfb-gold fallback. But a few places still need
   to react to color_primary for pills/chips that we hardcoded to specific
   prod colors. Override those explicitly here so operator branding wins. */
.sfb-nav-tab-active {
  /* active tab is surface bg (prod) — no primary colour needed */
}
.sfb-credits-chip:hover {
  border-color: var(--color-primary, var(--sfb-gold));
  color: var(--color-primary, var(--sfb-gold));
}
.sfb-t-cta {
  /* Primary CTA — operator emerald equivalent or brand primary */
  background: var(--color-primary, var(--sfb-emerald));
}
.sfb-t-cta:hover {
  filter: brightness(1.08);
}
.sfb-t-cta-ghost:hover {
  border-color: var(--color-primary, var(--sfb-gold));
  color: var(--color-primary, var(--sfb-gold));
}
.sfb-lineup-footer .sfb-lineup-save {
  background: linear-gradient(180deg, var(--color-primary, var(--sfb-emerald)), #059669);
}
.sfb-player-card.sfb-selected,
.sfb-player-card[aria-pressed="true"] {
  border-color: var(--color-primary, var(--sfb-gold)) !important;
  box-shadow: 0 0 0 1px var(--color-primary, var(--sfb-gold));
}

/* =========================================================================
 * Session 79 — Lineup sidebar layout rebuild. Matches the prod
 * "Your Lineup  N/5" sidebar with FP Budget card, 5 slot rows, status
 * line, primary emerald CTA, and inline Auto-Pick + Clear row.
 * ========================================================================= */

/* Pane chrome — give the sidebar a distinct rounded card */
.sfb-lineup-header {
  background: var(--sfb-bg) !important;
  border: 1px solid var(--sfb-border) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.sfb-lineup-sticky {
  position: sticky;
  top: calc(var(--sfb-hdr) + 16px);
  max-height: calc(100vh - var(--sfb-hdr) - 32px);
  overflow-y: auto;
  align-self: start;
}

/* Sidebar header: "Your Lineup  0/5" (mirrors .fy-sidebar-hdr) */
.sfb-sidebar-hdr {
  padding: 16px 18px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--sfb-border);
}
.sfb-sidebar-hdr h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--sfb-s900);
  letter-spacing: -0.01em;
}
.sfb-sidebar-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--sfb-gold);
  font-variant-numeric: tabular-nums;
}

/* FP Budget card — 3-column head (label / value / remaining) + bar underneath */
.sfb-fp-budget-card {
  padding: 12px 16px 14px;
  background: var(--sfb-surface-2);
  border-top: 1px solid var(--sfb-border);
  border-bottom: 1px solid var(--sfb-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sfb-fp-budget-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  font-variant-numeric: tabular-nums;
}
.sfb-fp-budget-lbl {
  font-size: 10px;
  font-weight: 800;
  color: var(--sfb-s500);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.sfb-fp-budget-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--sfb-s900);
  justify-self: center;
}
.sfb-fp-budget-rem {
  font-size: 11px;
  font-weight: 700;
  color: var(--sfb-emerald);
}
.sfb-fp-budget-rem-over { color: var(--sfb-red); }
.sfb-fp-budget-over .sfb-fp-budget-val { color: var(--sfb-red); }

.sfb-fp-budget-card .sfb-fp-budget-track {
  height: 5px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 999px !important;
  overflow: hidden;
}
.sfb-fp-budget-card .sfb-fp-budget-fill {
  height: 100% !important;
  background: var(--sfb-emerald) !important;
  border-radius: 999px !important;
  transition: width 240ms ease-out;
}
.sfb-fp-budget-fill-warn { background: var(--sfb-orange) !important; }
.sfb-fp-budget-fill-over { background: var(--sfb-red) !important; }

/* Slot rows — prod .fy-slot shape, 62px min-height, tinted for filled.
   Override Session 77 default padding/margins because they render too
   large in the narrow sidebar. */
.sfb-lineup-rows {
  padding: 10px 14px 6px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sfb-lineup-row {
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  min-height: 58px !important;
  border-radius: var(--sfb-r) !important;
  border: 1px solid var(--sfb-border) !important;
  background: var(--sfb-surface) !important;
  margin-bottom: 0 !important;
  transition: border-color 0.15s;
}
.sfb-lineup-row.sfb-filled,
.sfb-lineup-row[data-filled="1"] {
  border-color: var(--sfb-gold-dk) !important;
  background: rgba(6, 182, 212, 0.04) !important;
}

.sfb-lineup-name {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
.sfb-lineup-name-line {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--sfb-s800) !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sfb-lineup-name-placeholder {
  font-weight: 500 !important;
  color: var(--sfb-s500) !important;
}
.sfb-lineup-subline {
  font-size: 11px !important;
  color: var(--sfb-s400) !important;
}

.sfb-lineup-live {
  font-size: 18px;
  font-weight: 900;
  color: var(--sfb-gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  text-align: right;
}
.sfb-lineup-live-empty {
  font-size: 20px !important;
  font-weight: 500 !important;
  color: var(--sfb-s500) !important;
}
.sfb-lineup-live-on { color: var(--sfb-emerald); }

/* Status line + Pick N more */
.sfb-lineup-status {
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  color: var(--sfb-s500);
  border-top: 1px solid var(--sfb-border);
  font-variant-numeric: tabular-nums;
}

/* Primary CTA — exact prod .fy-enter-btn spec (padding 14×32, font 16/800,
   radius 14, emerald gradient, 0 6px 20px emerald shadow). */
.sfb-lineup-primary {
  margin: 10px 14px 8px;
  padding: 14px 32px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  background: linear-gradient(180deg, var(--color-primary, var(--sfb-emerald)), #059669);
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
  transition: transform 120ms, box-shadow 120ms, opacity 120ms;
}
.sfb-lineup-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(16, 185, 129, 0.4);
}
.sfb-lineup-primary:active:not(:disabled) { transform: translateY(0); }
.sfb-lineup-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Secondary Auto-Pick + Clear row — exact prod .fy-enter-btn.ghost spec
   (padding 12×24, font 14/700, radius 12, surface2 bg + border, cyan hover). */
.sfb-lineup-actions-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px;
  padding: 0 14px 14px;
}
.sfb-lineup-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  background: var(--sfb-surface-2);
  color: var(--sfb-s700);
  border: 1px solid var(--sfb-border);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, transform 0.1s;
}
.sfb-lineup-secondary:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
}
.sfb-lineup-secondary:active { transform: scale(0.98); }
.sfb-lineup-icon {
  font-size: 14px;
  color: var(--sfb-gold);
  line-height: 1;
}

/* Projected / Live summary when present — small gold */
.sfb-lineup-summary { display: none; }

/* Kill the old circular-action layout (was causing round button trio) */
.sfb-lineup-actions { display: none !important; }

/* Injury banner in the sidebar */
.sfb-injury-banner {
  margin: 0 14px 8px;
  padding: 8px 12px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 8px;
  color: var(--sfb-red);
  font-size: 11px;
  font-weight: 600;
}

/* Make the slot circle text smaller so "PG"/"SG"/"SF"/"PF"/"C" fits */
.sfb-lineup-row .sfb-slot-circle {
  font-size: 11px !important;
  letter-spacing: 0.5px;
}

/* Remove the prod-override padding that Session 77 accidentally set too
   tight on the outer aside wrapper for this re-styled sidebar */
.sfb-pick-layout > aside {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

@media (max-width: 900px) {
  .sfb-lineup-sticky { position: static; max-height: none; }
}

/* =========================================================================
 * Session 80 — Lobby card prod parity. Layout now: Row 1 (date + chips +
 * right-aligned CTA), Row 2 (compact meta line), Row 3 (inline games
 * preview), Row 4 (avatar strip + "N playing" + share + globe).
 * Mirrors .fy-contest-card on starterfive.com.
 * ========================================================================= */

/* Outer card — left sport-accent stripe + tighter padding */
.sfb-t-card,
.sfb-t-card-hero {
  padding: 20px 22px 16px !important;
  gap: 10px !important;
  overflow: hidden;
}
.sfb-t-card::before,
.sfb-t-card-hero::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--sfb-gold), var(--sfb-emerald));
  border-radius: 16px 0 0 16px;
  pointer-events: none;
}
.sfb-t-card-nba::before    { background: linear-gradient(180deg, #22d3ee, #06b6d4); }
.sfb-t-card-euro::before   { background: linear-gradient(180deg, #ff8c00, #fb923c); }
.sfb-t-card-soccer::before { background: linear-gradient(180deg, #4ade80, #16a34a); }
.sfb-t-card-cricket::before{ background: linear-gradient(180deg, #f59e0b, #b45309); }

/* Row 1: hdr with anchored CTA on the right */
.sfb-t-card-hdr {
  display: flex !important;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sfb-t-hdr-cta {
  margin-left: auto;
  padding: 10px 22px;
  border-radius: var(--sfb-r-sm);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, var(--sfb-emerald));
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.1s;
}
.sfb-t-hdr-cta:hover { filter: brightness(1.08); }
.sfb-t-hdr-cta:active { transform: scale(0.98); }
.sfb-t-hdr-cta-edit {
  background: var(--sfb-surface-2);
  color: var(--sfb-s800);
  border: 1px solid var(--sfb-border);
}
.sfb-t-hdr-cta-edit:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
  filter: none;
}
.sfb-t-hdr-cta-ghost {
  background: var(--sfb-surface-2);
  color: var(--sfb-s700);
  border: 1px solid var(--sfb-border);
}
.sfb-t-hdr-cta-ghost:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
  filter: none;
}

/* Row 2: meta line — compact inline facts */
.sfb-t-meta-line {
  display: flex;
  gap: 10px 18px;
  font-size: 12px;
  color: var(--sfb-s400);
  align-items: center;
  flex-wrap: wrap;
}
.sfb-t-meta-line .sfb-t-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.sfb-t-meta-line strong { color: var(--sfb-s700); font-weight: 700; }
.sfb-t-cap {
  background: rgba(6, 182, 212, 0.06);
  border: 1px solid rgba(6, 182, 212, 0.18);
  color: var(--sfb-gold);
  padding: 3px 9px;
  border-radius: 6px;
  font-weight: 700;
}
.sfb-t-cap strong { color: var(--sfb-gold); font-weight: 800; }
.sfb-t-meta-lock { color: var(--sfb-s500); }

/* Prize podium chips inline in meta line */
.sfb-t-meta-line .sfb-prize-tiers {
  gap: 6px;
}
.sfb-t-meta-line .sfb-prize-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--sfb-s700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sfb-t-meta-line .sfb-prize-pill strong {
  font-weight: 800;
  color: var(--sfb-s900);
}
.sfb-t-meta-line .sfb-prize-pill-1 { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.22); }
.sfb-t-meta-line .sfb-prize-pill-2 { background: rgba(192, 202, 216, 0.08); border-color: rgba(192, 202, 216, 0.18); }
.sfb-t-meta-line .sfb-prize-pill-3 { background: rgba(180, 83, 9, 0.08);  border-color: rgba(180, 83, 9, 0.18); }

/* Row 3: inline games preview strip */
.sfb-t-card .sfb-t-games,
.sfb-t-card-hero .sfb-t-games {
  display: flex !important;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 0;
  flex-wrap: wrap;
}
.sfb-t-card .sfb-t-games::-webkit-scrollbar { display: none; }
.sfb-t-card .sfb-t-game-chip {
  flex: 0 0 auto;
  min-width: 92px;
  background: var(--sfb-surface-2);
  border: 1px solid var(--sfb-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 11px;
  text-align: center;
}
.sfb-t-card .sfb-t-game-chip .teams {
  font-weight: 700;
  color: var(--sfb-s700);
  white-space: nowrap;
  font-size: 12px;
}
.sfb-t-card .sfb-t-game-chip .teams .vs { color: var(--sfb-s400); font-weight: 400; margin: 0 3px; }
.sfb-t-card .sfb-t-game-chip .gtime {
  color: var(--sfb-s400);
  font-size: 10px;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* Row 4: footer — avatars, playing count, share, globe */
.sfb-t-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 4px;
}
.sfb-t-avatars {
  display: inline-flex;
}
.sfb-t-avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sfb-gold), var(--sfb-emerald));
  color: #0a0e14;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid var(--sfb-surface);
  margin-left: -8px;
  text-transform: uppercase;
}
.sfb-t-avatar:first-child { margin-left: 0; }
.sfb-t-avatar-plus {
  background: var(--sfb-surface-2);
  color: var(--sfb-s500);
  font-size: 10px;
  font-weight: 700;
  border-color: var(--sfb-surface);
}
.sfb-t-playing {
  font-size: 11px;
  font-weight: 600;
  color: var(--sfb-s400);
}
.sfb-t-foot-spacer { flex: 1; }
.sfb-t-share-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--sfb-border);
  color: var(--sfb-s500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
}
.sfb-t-share-icon:hover {
  border-color: var(--sfb-gold);
  color: var(--sfb-gold);
}
.sfb-t-globe {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--sfb-border);
  color: var(--sfb-s500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  user-select: none;
}

/* Retire the old bottom-aligned footer/CTA rows (Session 77 placed a
   full-width button pair at the bottom; prod keeps the CTA top-right). */
.sfb-t-card .sfb-t-footer,
.sfb-t-card-hero .sfb-t-footer { display: none !important; }
.sfb-t-card .sfb-t-actions,
.sfb-t-card-hero .sfb-t-actions { display: none !important; }
.sfb-t-card .sfb-prize-tiers:not(.sfb-t-meta-line .sfb-prize-tiers),
.sfb-t-card-hero .sfb-prize-tiers:not(.sfb-t-meta-line .sfb-prize-tiers) { display: none !important; }

/* Retire the separate entered panel — "Entered" state is signaled via
   the edit-picks CTA + tinted card border (prod pattern). */
.sfb-t-card .sfb-t-entered-panel,
.sfb-t-card-hero .sfb-t-entered-panel { display: none !important; }

/* Adjusted hover so the ::before stripe stays visible */
.sfb-t-card:hover::before,
.sfb-t-card-hero:hover::before { opacity: 1; }

@media (max-width: 640px) {
  .sfb-t-card, .sfb-t-card-hero { padding: 16px 16px 12px !important; }
  .sfb-t-hdr-cta { padding: 8px 14px; font-size: 12px; }
  .sfb-t-meta-line { gap: 8px 12px; font-size: 11px; }
  .sfb-t-game-chip { min-width: 84px; }
}