/* ── GOOGLE FONTS ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800;900&display=swap');

/* ── RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{cursor:pointer;font-family:inherit}
input,textarea,select{font-family:inherit;direction:ltr;text-align:left}

/* ── VARIABLES ──────────────────────────────────────── */
:root{
  --blue-deep:#0d1b2a;--blue-dark:#132033;--blue-mid:#1a2d45;
  --blue-card:#1e3350;--blue-border:#2a4060;--blue-hover:#243b57;
  --blue-accent:#1565C0;--blue-bright:#1E88E5;--blue-light:#42A5F5;
  --yellow:#FFD600;--yellow-soft:#FFF176;
  --green:#00C853;--green-soft:#69F0AE;
  --red:#FF1744;--red-soft:#FF8A80;--teal:#00BCD4;
  --status-open:var(--yellow);--status-won:var(--green);--status-lost:var(--red-soft);
  --text:#FFFFFF;--text-muted:#CBD5E1;--text-dim:#94A3B8;--text-ghost:#64748B;
  --bg:var(--blue-deep);--bg2:var(--blue-dark);--bg3:var(--blue-mid);--bg4:var(--blue-card);
  --border:var(--blue-border);--border-mid:#304d6d;--border-hi:#3d6080;
  --gold:var(--yellow);--pink:var(--red-soft);--purple:#7C6AF7;--orange:#FF6D00;
  --font-display:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'Inter',sans-serif;
  --sidebar-w:260px;--r-sm:6px;--r-md:8px;--r-lg:12px;--r-xl:16px;--t:150ms ease;
}

/* ── BASE ───────────────────────────────────────────── */
body{background:var(--blue-deep);color:var(--text);font-family:var(--font-body);font-size:15px;min-height:100vh;line-height:1.5}
.hidden{display:none!important}

/* ── AUTH ───────────────────────────────────────────── */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#0a1628 0%,#0d1f38 50%,#0f2340 100%);padding:20px}
.auth-box{width:100%;max-width:400px;background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-xl);padding:40px 36px;box-shadow:0 24px 60px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04)}
.auth-logo{font-family:var(--font-display);font-size:34px;font-weight:800;letter-spacing:3px;color:var(--yellow);text-align:center;margin-bottom:4px}
.auth-sub{font-size:11px;color:var(--text-dim);letter-spacing:3px;text-align:center;margin-bottom:36px;text-transform:uppercase}
.auth-error{background:rgba(255,23,68,0.12);border:1px solid rgba(255,23,68,0.35);color:#FF8A80;font-size:13px;padding:10px 14px;border-radius:var(--r-md);margin-bottom:14px}

/* ── LAYOUT ─────────────────────────────────────────── */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sidebar-w);background:var(--blue-dark);border-right:1px solid var(--blue-border);display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.main{flex:1;overflow-y:auto;padding:32px 36px 60px;min-width:0;will-change:contents}

/* ── SIDEBAR ────────────────────────────────────────── */
.sidebar__logo{padding:24px 20px 20px;border-bottom:1px solid var(--blue-border);background:linear-gradient(180deg,rgba(21,101,192,0.15) 0%,transparent 100%)}
.sidebar__logo-text{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:3px;color:var(--yellow);line-height:1}
.sidebar__logo-sub{font-size:9px;color:var(--text-dim);letter-spacing:3px;margin-top:4px;text-transform:uppercase}
.sidebar__nav{padding:14px 10px}
.sidebar__friends{padding:12px 10px 20px;border-top:1px solid var(--blue-border);margin-top:auto}
.sidebar__section-label{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--text-ghost);padding:0 10px;margin-bottom:8px;display:block;text-transform:uppercase}
.sidebar__current-user{margin:10px 10px 0;padding:10px 12px;border-radius:var(--r-md);background:var(--blue-mid);border:1px solid var(--blue-border);display:flex;align-items:center;gap:10px;transition:border-color var(--t);cursor:pointer}
.sidebar__current-user:hover{border-color:var(--border-hi)}
.sidebar__user-name{font-size:13px;font-weight:700;flex:1;color:var(--text)}
.sidebar__user-role{font-size:10px;color:var(--text-ghost);letter-spacing:1px;text-transform:uppercase}

/* ── NAV ────────────────────────────────────────────── */
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);font-size:13px;font-weight:600;color:var(--text-muted);background:none;border:1px solid transparent;width:100%;text-align:left;transition:all var(--t);margin-bottom:3px;letter-spacing:0.3px}
.nav-item:hover{background:var(--blue-mid);color:var(--text);border-color:var(--blue-border)}
.nav-item.active{background:rgba(21,101,192,0.25);color:var(--blue-light);border-color:rgba(30,136,229,0.45);font-weight:700}
.nav-item--dim{opacity:0.35;pointer-events:none}
.nav-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}

/* ── FRIENDS ───────────────────────────────────────────── */
.friends-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:var(--r-md);transition:background var(--t);cursor:pointer}
.friends-item:hover{background:var(--blue-mid)}
.friends-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.friends-name{font-size:13px;color:var(--text-muted);font-weight:500;flex:1}
.friends-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:10px;color:#0a0a0a}
.friends-delete{background:none;border:none;color:var(--text-ghost);font-size:14px;padding:2px 4px;border-radius:3px;transition:color var(--t);line-height:1}
.friends-delete:hover{color:var(--red-soft)}

/* ── TOPBAR / STATS ─────────────────────────────────── */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px}
.page-title{font-family:var(--font-display);font-size:44px;font-weight:800;letter-spacing:2px;line-height:1;color:#fff}
.page-sub{font-size:12px;color:var(--text-dim);letter-spacing:0.5px;margin-top:5px;font-weight:500}
.stats-row{display:block;margin-bottom:16px;width:100%}
.stat-card{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-md);padding:10px 12px;animation:fadeIn 250ms ease both;transition:border-color var(--t)}
.stat-card:hover{border-color:var(--border-mid)}
.stat-card:nth-child(2){animation-delay:50ms}
.stat-card:nth-child(3){animation-delay:100ms}
.stat-card:nth-child(4){animation-delay:150ms}
.stat-card__val{font-family:var(--font-display);font-size:28px;font-weight:800;letter-spacing:1px;line-height:1}
.stat-card__label{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:1px;margin-top:3px;text-transform:uppercase}
.stat-card__trend{font-size:9px;margin-top:3px;font-weight:600}

/* ── FILTER ─────────────────────────────────────────── */
.filter-row{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.filter-btn{background:var(--blue-dark);border:1px solid var(--blue-border);color:var(--text-muted);padding:8px 18px;font-size:12px;font-weight:600;letter-spacing:0.5px;border-radius:var(--r-md);transition:all var(--t)}
.filter-btn:hover{border-color:var(--border-mid);color:var(--text);background:var(--blue-mid)}
.filter-btn.active{background:rgba(21,101,192,0.3);color:var(--blue-light);border-color:rgba(30,136,229,0.5)}

/* ── BUTTONS ────────────────────────────────────────── */
.new-btn{background:var(--yellow);color:#0a1628;border:none;padding:11px 22px;font-weight:800;font-size:13px;letter-spacing:0.5px;border-radius:var(--r-md);transition:all var(--t);white-space:nowrap}
.new-btn:hover{background:#FFE033;transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,214,0,0.3)}
.new-btn:active{transform:scale(0.97)}
.admin-btn{background:rgba(124,106,247,0.2);border:1px solid rgba(124,106,247,0.4);color:#A78BFA;padding:11px 18px;font-size:12px;font-weight:700;letter-spacing:0.5px;border-radius:var(--r-md);transition:all var(--t);white-space:nowrap}
.admin-btn:hover{background:rgba(124,106,247,0.3)}
.logout-btn{background:none;border:1px solid var(--blue-border);color:var(--text-muted);padding:9px 12px;font-size:12px;font-weight:600;border-radius:var(--r-md);transition:all var(--t);width:100%;margin-top:10px}
.logout-btn:hover{border-color:var(--border-mid);color:var(--text)}
.lock-btn{width:100%;background:var(--yellow);color:#0a1628;border:none;padding:14px;font-weight:800;font-size:14px;letter-spacing:0.5px;border-radius:var(--r-md);margin-top:6px;transition:all var(--t)}
.lock-btn:not(:disabled):hover{background:#FFE033;transform:translateY(-1px);box-shadow:0 4px 20px rgba(255,214,0,0.3)}
.lock-btn:active{transform:scale(0.98)}
.lock-btn:disabled{opacity:0.3;cursor:not-allowed}
.cancel-btn{width:100%;background:none;border:1px solid var(--blue-border);color:var(--text-muted);padding:12px;font-size:13px;font-weight:600;border-radius:var(--r-md);margin-top:8px;transition:all var(--t)}
.cancel-btn:hover{border-color:var(--border-mid);color:var(--text)}
.icon-btn{background:none;border:1px solid var(--blue-border);color:var(--text-muted);padding:6px 12px;font-size:12px;font-weight:600;border-radius:var(--r-sm);transition:all var(--t)}
.icon-btn:hover{border-color:var(--border-mid);color:var(--text);background:var(--blue-mid)}
.icon-btn--danger:hover{border-color:rgba(255,23,68,0.5);color:var(--red-soft);background:rgba(255,23,68,0.08)}
.icon-btn--won{border-color:rgba(0,200,83,0.4);color:var(--green)}
.icon-btn--won:hover{background:rgba(0,200,83,0.1);border-color:var(--green)}
.icon-btn--lost{border-color:rgba(255,138,128,0.4);color:var(--red-soft)}
.icon-btn--lost:hover{background:rgba(255,23,68,0.1);border-color:var(--red-soft)}
.icon-btn--reopen{border-color:var(--blue-border);color:var(--text-dim)}
.icon-btn--reopen:hover{border-color:var(--border-mid);color:var(--text-muted)}
.close-btn{background:var(--blue-mid);border:1px solid var(--blue-border);color:var(--text-muted);font-size:12px;font-weight:600;padding:7px 14px;border-radius:var(--r-sm);transition:all var(--t)}
.close-btn:hover{color:var(--text);border-color:var(--border-mid)}

/* ── BET CARDS ──────────────────────────────────────── */
.bets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.empty-state{grid-column:1/-1;text-align:center;padding:80px 0;color:var(--text-ghost);font-size:14px;font-weight:600;letter-spacing:1px}
.bet-card{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:transform 250ms cubic-bezier(0.2,0.8,0.2,1),box-shadow 250ms ease,border-color 250ms ease,background-color 250ms ease;position:relative;overflow:hidden;animation:fadeIn 200ms ease both;will-change:transform}
.bet-card:nth-child(2){animation-delay:40ms}.bet-card:nth-child(3){animation-delay:80ms}.bet-card:nth-child(4){animation-delay:120ms}
.bet-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;z-index:2}
.bet-card.open::before{background:var(--yellow)}
.bet-card.won::before{background:var(--green)}
.bet-card.lost::before{background:var(--red-soft)}
.bet-card.won{background:linear-gradient(160deg,rgba(0,200,83,0.1) 0%,var(--blue-dark) 60%);border-color:rgba(0,200,83,0.4)}
.bet-card.won .bet-card__title{color:var(--green-soft)}
.bet-card.won .pool-chip__val{color:var(--green)}
.bet-card.won .pool-chip{border-color:rgba(0,200,83,0.35)}
.bet-card.lost{background:linear-gradient(160deg,rgba(255,23,68,0.08) 0%,var(--blue-dark) 60%);border-color:rgba(255,23,68,0.35)}
.bet-card.lost .bet-card__title{color:var(--red-soft)}
.bet-card.lost .pool-chip__val{color:var(--red-soft)}
.bet-card.lost .pool-chip{border-color:rgba(255,23,68,0.3)}

/* When depth modes are active, won/lost cards get the top-highlight overlay
   stacked on top of their existing color-tinted gradient. The `background`
   shorthand on .bet-card.won / .bet-card.lost resets background-image, so we
   re-apply BOTH layers together here for the depth-active case. */
body[data-card-depth="float"] .bet-card.won,
body[data-card-depth="tilt"] .bet-card.won,
body[data-card-depth="glow"] .bet-card.won{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.06) 100%),
    linear-gradient(160deg, rgba(0,200,83,0.10) 0%, var(--blue-dark) 60%);
}
body[data-card-depth="float"] .bet-card.lost,
body[data-card-depth="tilt"] .bet-card.lost,
body[data-card-depth="glow"] .bet-card.lost{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.06) 100%),
    linear-gradient(160deg, rgba(255,23,68,0.08) 0%, var(--blue-dark) 60%);
}

/* ── DEPTH MODES (toggleable via admin panel) ────────────────────────────── */
/* Activated by body[data-card-depth="..."] attribute, set from getCardDepthMode().
   Default mode is 'float'. Switch values: none, float, tilt, glow */

/* Mode: none — flat cards, basic hover (legacy behavior) */
body[data-card-depth="none"] .bet-card:hover{border-color:var(--border-mid);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}

/* Mode: float — layered shadows that make cards always look elevated.
   Stacks 3 shadows: tight contact + medium ambient + soft far. The combo creates
   a sense of physical depth without movement.

   The "physical object" treatment also applies here:
   - Inner top highlight (1px inset on top edge mimicking ambient light from above)
   - Subtle vertical gradient (top ~3% lighter than bottom — mimics how a
     physical surface reflects more light at its top than its bottom)
   - Stronger far shadow (last layer pushed wider/darker so cards feel like
     they're floating well above the page, not just lifted slightly)
   - Bevel border (top edge of border slightly lighter, bottom slightly darker —
     the classic skeuomorphic 3D edge)
*/
body[data-card-depth="float"] .bet-card,
body[data-card-depth="tilt"] .bet-card,
body[data-card-depth="glow"] .bet-card{
  /* Subtle top-to-bottom gradient on top of the existing card background.
     The 0.04 highlight at top + 0.02 darken at bottom is just enough to
     read as "real surface" without being noticeably tinted. */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 18%, transparent 82%, rgba(0,0,0,0.06) 100%);
  /* Bevel edge: light top, slightly darker bottom. Layered shadows do the rest. */
  border-top-color: rgba(255,255,255,0.10);
  border-bottom-color: rgba(0,0,0,0.4);
  /* Stacked depth shadows + inset highlight on top edge.
     The inset shadow at the very top is the "ambient light catching the top
     of a physical object" cue — small but transformative. */
  box-shadow:
    /* Inner highlight on top edge (like light catching a raised surface) */
    inset 0 1px 0 rgba(255,255,255,0.08),
    /* Tight contact shadow */
    0 1px 2px rgba(0,0,0,0.5),
    /* Medium ambient shadow */
    0 6px 14px rgba(0,0,0,0.4),
    /* Strong far shadow — gives cards real "floating above the page" feel */
    0 24px 48px rgba(0,0,0,0.4);
}
body[data-card-depth="float"] .bet-card:hover{
  transform:translateY(-3px);
  border-color:var(--border-mid);
  border-top-color: rgba(255,255,255,0.16);
  border-bottom-color: rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 2px 4px rgba(0,0,0,0.55),
    0 12px 24px rgba(0,0,0,0.45),
    0 32px 64px rgba(0,0,0,0.5);
}

/* Mode: tilt — perspective container set on the parent grid; cards transform
   in 3D based on cursor position (handled in JS). The CSS just sets up the
   stage and transitions. The transform itself is set inline by the JS handler. */
body[data-card-depth="tilt"] .bets-grid,
body[data-card-depth="glow"] .bets-grid{
  perspective:1400px;
  perspective-origin:center top;
}
body[data-card-depth="tilt"] .bet-card,
body[data-card-depth="glow"] .bet-card{
  transform-style:preserve-3d;
  transition:transform 120ms cubic-bezier(0.2,0.8,0.2,1),box-shadow 250ms ease,border-color 250ms ease;
}
body[data-card-depth="tilt"] .bet-card:hover,
body[data-card-depth="glow"] .bet-card:hover{
  border-color:var(--border-mid);
  border-top-color: rgba(255,255,255,0.16);
  border-bottom-color: rgba(0,0,0,0.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 8px rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.5),
    0 36px 72px rgba(0,0,0,0.45);
}
/* Highlight overlay that follows cursor — set as a CSS variable from JS */
body[data-card-depth="tilt"] .bet-card::after,
body[data-card-depth="glow"] .bet-card::after{
  content:'';position:absolute;inset:0;border-radius:var(--r-lg);pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.06),transparent 40%);
  opacity:0;transition:opacity 200ms ease;z-index:1;
}
body[data-card-depth="tilt"] .bet-card:hover::after,
body[data-card-depth="glow"] .bet-card:hover::after{opacity:1}

/* Mode: glow — adds a colored aura matching the bet's status to the tilt mode.
   Different aura color per status (open/won/lost) so the eye can scan results
   at a glance without reading. The inset highlight + bevel + base shadows stay
   intact; we just add the colored glow on top. */
body[data-card-depth="glow"] .bet-card.open:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 8px rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.5),
    0 36px 72px rgba(0,0,0,0.45),
    0 0 24px rgba(255,214,0,0.20),
    0 0 56px rgba(255,214,0,0.12);
  border-color:rgba(255,214,0,0.45);
}
body[data-card-depth="glow"] .bet-card.won:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 8px rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.5),
    0 36px 72px rgba(0,0,0,0.45),
    0 0 24px rgba(0,200,83,0.28),
    0 0 56px rgba(0,200,83,0.16);
  border-color:rgba(0,200,83,0.55);
}
body[data-card-depth="glow"] .bet-card.lost:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 4px 8px rgba(0,0,0,0.55),
    0 18px 36px rgba(0,0,0,0.5),
    0 36px 72px rgba(0,0,0,0.45),
    0 0 24px rgba(255,23,68,0.24),
    0 0 56px rgba(255,23,68,0.13);
  border-color:rgba(255,23,68,0.5);
}
/* Even at rest in glow mode, give a subtle status-colored aura so cards always
   look "alive" — but kept very faint so 20+ cards don't become a Christmas tree.
   Inset highlight stays so the surface still reads as physical. */
body[data-card-depth="glow"] .bet-card.won{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 1px 2px rgba(0,0,0,0.5),
    0 6px 14px rgba(0,0,0,0.4),
    0 24px 48px rgba(0,0,0,0.4),
    0 0 14px rgba(0,200,83,0.07);
}
body[data-card-depth="glow"] .bet-card.lost{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.5),
    0 6px 14px rgba(0,0,0,0.4),
    0 24px 48px rgba(0,0,0,0.4),
    0 0 14px rgba(255,23,68,0.07);
}

/* Reduced motion — kill all the animation/tilt for users who request it */
@media (prefers-reduced-motion: reduce){
  body[data-card-depth="tilt"] .bet-card,
  body[data-card-depth="glow"] .bet-card{transform:none !important}
  body[data-card-depth="tilt"] .bet-card::after,
  body[data-card-depth="glow"] .bet-card::after{display:none}
}

/* Modal clone — the lightboxed card. Hover-based depth effects are suppressed
   because the clone is already at its expanded target state and shouldn't move
   on cursor hover. Inline transform set by JS takes precedence over our
   hover-state CSS rules thanks to inline-style specificity, but we also clear
   the post-pseudo overlay so cursor-tracking highlights don't reappear. */
.bet-card[data-modal-clone="1"]::after{display:none !important}
.bet-card[data-modal-clone="1"]{
  /* Disable the transform-style: preserve-3d set by tilt/glow modes — the
     modal clone is a 2D animated element, no 3D context needed. */
  transform-style:flat !important;
}
/* Block ALL hover transforms on modal clones across every depth mode.
   The clone IS a .bet-card so :hover rules from float/tilt/glow modes
   would otherwise add their own transforms (translateY, rotateX, etc.)
   that compound with our FLIP transform mid-animation, causing jitter. */
body[data-card-depth] [data-modal-clone="1"]:hover,
body[data-card-depth] [data-modal-clone="1"]{
  transform-style:flat !important;
}
body[data-card-depth] [data-modal-clone="1"]:hover{
  /* Inline style takes precedence over CSS for transform, so the JS-set
     transform on the clone wins. We just neutralize hover-shadow effects. */
  box-shadow: 0 24px 48px rgba(0,0,0,0.55) !important;
  filter: none !important;
}

/* During modal open/close transitions, we keep all visual styling intact —
   gradients, shadows, depth-mode effects all stay on. Previously we stripped
   `background-image` and the multi-layer shadows during animation to avoid
   per-frame paint, but the visual delta between "during" and "after" was so
   noticeable it looked like the color was lagging behind the shape change.

   Modern Safari/Chrome handle the heavy compositing fine when the element
   is on its own GPU layer (translateZ + backface-visibility:hidden), and we
   already do that. So now we keep the look consistent throughout — what you
   see at frame 1 is what you see at frame 60.

   We DO still pause child element animations (status pulses, etc.) because
   those force main-thread paint cycles that compete with the transform. */
[data-modal-clone="1"][data-modal-animating="1"] *{
  animation-play-state: paused !important;
}

/* Hide the modal's scrollbar in webkit (Chrome/Safari/Edge). The bar overlapping
   the score column was visually impeding content. Scrolling still works via
   touch swipe / mouse wheel, just no visible bar. Firefox is handled by
   `scrollbar-width: none` set inline in JS. */
[data-modal-clone="1"]::-webkit-scrollbar{ display:none; width:0; height:0; }
[data-modal-clone="1"]{ -ms-overflow-style:none; }
.bet-card__header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.bet-card__left{flex:1;min-width:0}
.bet-card__meta{display:flex;gap:8px;align-items:center;margin-bottom:7px;flex-wrap:wrap;row-gap:4px}
.bet-card__title{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:0.5px;line-height:1.15;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet-card__desc{font-size:12px;color:var(--text-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bet-card__actions{display:flex;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid var(--blue-border);flex-wrap:wrap}
.pool-chip{background:var(--blue-mid);border:1px solid var(--blue-border);border-radius:var(--r-md);padding:6px 12px;text-align:right;flex-shrink:0;margin-left:12px}
.pool-chip__label{font-size:9px;color:var(--text-ghost);letter-spacing:1.5px;font-weight:700;text-transform:uppercase}
.pool-chip__val{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--yellow);letter-spacing:1px;line-height:1.1}

/* ── PILLS / TAGS ───────────────────────────────────── */
.status-pill{font-size:9px;font-weight:800;padding:3px 9px;border-radius:4px;color:#0a1628;letter-spacing:0.8px;flex-shrink:0;text-transform:uppercase}
.status-pill.open{background:var(--yellow)}
.status-pill.won{background:var(--green)}
.status-pill.lost{background:var(--red-soft);color:#fff}
.date-label{font-size:11px;color:var(--text-dim);font-weight:500}
.owner-label{font-size:10px;color:var(--text-dim);margin-left:auto}
.p-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.p-tag{display:flex;align-items:center;gap:5px}
.p-tag__dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.p-tag__name{font-size:12px;color:var(--text-muted);font-weight:500}
.p-tag__odds{font-size:11px;font-weight:700}

/* ── SPLIT BAR ──────────────────────────────────────── */
.split-bar{height:5px;border-radius:3px;overflow:hidden;background:var(--blue-mid);display:flex;margin:8px 0 7px}
.split-bar__seg{transition:width 0.5s ease}

/* ── OVERLAY / PANEL ────────────────────────────────── */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(4px);animation:overlayIn 150ms ease}
.panel{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-xl);width:100%;max-width:500px;max-height:90vh;overflow-y:auto;padding:28px;scrollbar-width:thin;scrollbar-color:var(--blue-border) transparent;animation:slideUp 200ms ease;box-shadow:0 24px 60px rgba(0,0,0,0.5)}
.panel--wide{max-width:560px}.panel--sm{max-width:380px}
.panel::-webkit-scrollbar{width:4px}
.panel::-webkit-scrollbar-thumb{background:var(--blue-border);border-radius:4px}

/* ── DETAIL PANEL ───────────────────────────────────── */
.detail__topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.detail__title{font-family:var(--font-display);font-size:30px;font-weight:700;letter-spacing:1px;margin:10px 0 6px;line-height:1.1}
.detail__desc{font-size:13px;color:var(--text-muted);margin-bottom:16px}
.pool-card{background:var(--blue-mid);border:1px solid rgba(255,214,0,0.25);border-radius:var(--r-lg);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;margin:16px 0}
.pool-card__label{font-size:9px;font-weight:700;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}
.pool-card__val{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--yellow);letter-spacing:2px;line-height:1}
.p-detail-card{background:var(--blue-mid);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;border-left-width:4px}
.p-detail-card__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.p-detail-card__left{display:flex;align-items:center;gap:12px}
.p-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#0a0a0a;flex-shrink:0}
.p-detail-card__name{font-weight:700;font-size:14px;letter-spacing:0.5px}
.p-detail-card__odds{font-size:12px;color:var(--text-muted);margin-top:2px;font-weight:500}
.p-detail-card__amt{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:1px;line-height:1}
.p-detail-card__payout{font-size:12px;color:var(--green);margin-top:2px;font-weight:600}
.p-detail-card__share-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:var(--text-ghost);margin-bottom:3px}
.share-bar-bg{background:var(--blue-dark);height:5px;border-radius:3px;overflow:hidden}
.share-bar-fill{height:100%;border-radius:3px;transition:width 0.5s ease}
.mark-row{display:flex;gap:10px;margin-top:22px}
.mark-btn{flex:1;border:none;padding:13px;font-weight:700;font-size:12px;letter-spacing:0.5px;border-radius:var(--r-md);transition:all var(--t)}
.mark-btn:hover{transform:translateY(-1px);opacity:0.9}
.detail__action-row{display:flex;gap:8px;margin-top:12px}

/* ── FORMS ──────────────────────────────────────────── */
.modal-title{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:2px;color:var(--yellow);margin-bottom:22px}
.form-group{margin-bottom:16px}
.form-group--inline{display:flex;gap:10px}
.form-group--inline .form-group{flex:1;margin-bottom:0}
.form-label{display:block;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text-dim);margin-bottom:7px;text-transform:uppercase}
.form-input{width:100%;background:var(--blue-mid);border:1px solid var(--blue-border);color:var(--text);padding:12px 14px;font-size:16px;font-weight:500;border-radius:var(--r-md);outline:none;transition:border-color var(--t)}
.form-input:focus{border-color:var(--blue-bright)}
.form-input::placeholder{color:var(--text-ghost)}
.form-select{width:100%;background:var(--blue-mid);border:1px solid var(--blue-border);color:var(--text);padding:12px 14px;font-size:16px;font-weight:500;border-radius:var(--r-md);outline:none;appearance:none;transition:border-color var(--t)}
.form-select:focus{border-color:var(--blue-bright)}
.odds-hint{font-size:11px;color:#A78BFA;margin-top:5px;font-weight:600}
.section-divider{height:1px;background:var(--blue-border);margin:18px 0}

/* ── FRIEND CHIPS ───────────────────────────────────── */
.friend-chips{display:flex;flex-wrap:wrap;gap:8px}
.f-chip{display:flex;align-items:center;gap:7px;background:var(--blue-mid);border:2px solid var(--blue-border);border-radius:20px;padding:6px 14px 6px 7px;font-size:12px;font-weight:600;color:var(--text-muted);transition:all var(--t)}
.f-chip:hover{border-color:var(--border-mid);color:var(--text)}
.f-chip.selected{color:inherit}
.f-chip__av{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#0a0a0a;flex-shrink:0}
.friend-input-block{margin-bottom:14px}
.friend-input-block__header{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.friend-input-block__name{font-size:12px;font-weight:700;letter-spacing:0.5px}

/* ── PREVIEW BAR ────────────────────────────────────── */
.preview-bar{height:10px;border-radius:6px;overflow:hidden;background:var(--blue-mid);display:flex;margin-top:8px}
.preview-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}
.preview-legend__item{font-size:11px;font-weight:700}

/* ── ADMIN ──────────────────────────────────────────── */
.admin-title{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:2px;color:#A78BFA;margin-bottom:6px}
.admin-sub{font-size:12px;color:var(--text-dim);margin-bottom:24px;font-weight:500}
.admin-section{margin-bottom:28px}
.admin-section__title{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-dim);border-bottom:1px solid var(--blue-border);padding-bottom:8px;margin-bottom:14px;text-transform:uppercase}
.admin-code-display{background:var(--blue-mid);border:1px solid rgba(124,106,247,0.4);border-radius:var(--r-md);padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.admin-code-val{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:4px;color:#A78BFA}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--blue-mid);border:1px solid var(--blue-border);border-radius:var(--r-md);margin-bottom:8px}
.user-row__name{font-size:13px;font-weight:700;flex:1}
.user-row__role{font-size:9px;padding:2px 8px;border-radius:4px;letter-spacing:1px;font-weight:700;text-transform:uppercase}
.user-row__role.admin{background:rgba(124,106,247,0.25);color:#A78BFA}
.user-row__role.user{background:var(--blue-card);color:var(--text-muted)}
.color-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── CONFIRM ────────────────────────────────────────── */
.confirm-title{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:1px;margin-bottom:8px}
.confirm-msg{font-size:14px;color:var(--text-muted);margin-bottom:20px;line-height:1.6}
.confirm-row{display:flex;gap:10px}
.confirm-row .cancel-btn,.confirm-row .mark-btn{margin:0;flex:1}

/* ── SPORT TABS ─────────────────────────────────────── */
.sport-tabs-wrap{position:relative;margin-bottom:20px;-webkit-mask-image:linear-gradient(to right,transparent 0,black 20px,black calc(100% - 20px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,black 20px,black calc(100% - 20px),transparent 100%)}
.sport-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 20px 10px;scrollbar-width:none;-ms-overflow-style:none}
.sport-tabs::-webkit-scrollbar{display:none}
.sport-tab{display:flex;align-items:center;gap:6px;padding:7px 16px;border-radius:20px;font-family:var(--font-body);font-size:12px;font-weight:700;white-space:nowrap;flex-shrink:0;border:1px solid transparent;transition:all 150ms ease;cursor:pointer}
.sport-tab--empty{background:transparent;border-color:var(--blue-border);color:var(--text-ghost)}
.sport-tab--empty:hover{border-color:var(--border-mid);color:var(--text-dim)}
.sport-tab--has-bets{background:var(--blue-dark);border-color:var(--blue-border);color:var(--text-muted)}
.sport-tab--has-bets:hover{border-color:var(--border-mid);color:var(--text);background:var(--blue-mid)}
.sport-tab--active{background:rgba(21,101,192,0.3)!important;border-color:rgba(30,136,229,0.55)!important;color:var(--blue-light)!important}
.sport-tab__badge{background:var(--yellow);color:#0a1628;font-size:9px;font-weight:900;padding:1px 6px;border-radius:8px;line-height:1.4}

/* ── ACTIVITY VIEW ──────────────────────────────────── */
.activity-hero{background:linear-gradient(135deg,var(--blue-mid) 0%,var(--blue-card) 100%);border:1px solid var(--blue-border);border-radius:var(--r-xl);padding:28px;margin-bottom:20px;text-align:center}
.activity-hero__label{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--text-dim);margin-bottom:10px;text-transform:uppercase}
.activity-hero__val{font-family:var(--font-display);font-size:60px;font-weight:800;letter-spacing:2px;line-height:1;margin-bottom:8px}
.activity-hero__sign{font-size:13px;letter-spacing:2px;font-weight:700;text-transform:uppercase}
.activity-row{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all var(--t)}
.activity-row:hover{border-color:var(--border-mid);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.2)}

/* ── LEADERBOARD ────────────────────────────────────── */
.lb-list{display:flex;flex-direction:column;gap:10px}
.leaderboard-row{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.lb-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#0a0a0a;flex-shrink:0}
.lb-name-block{flex:1;min-width:100px}
.lb-username{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:1px;color:#fff}
.lb-sub{font-size:11px;color:var(--text-dim);margin-top:2px;font-weight:500}
.lb-stats{text-align:right}
.lb-pl{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:1px;line-height:1}
.lb-pl-label{font-size:9px;color:var(--text-ghost);letter-spacing:1.5px;margin-top:2px;text-transform:uppercase}

/* ── UVSU CARD ──────────────────────────────────────── */
.uvsu-card{background:var(--blue-dark);border:1px solid var(--blue-border);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer;transition:all var(--t);position:relative;overflow:hidden;animation:fadeIn 200ms ease both}
.uvsu-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--purple),var(--blue-bright))}
.uvsu-card:hover{border-color:var(--border-mid);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.3)}
.uvsu-vs-bar{display:flex;align-items:center;gap:10px;margin:10px 0 8px}
.uvsu-side{flex:1;background:var(--blue-mid);border-radius:var(--r-md);padding:10px 12px;text-align:center}
.uvsu-side__name{font-size:14px;font-weight:700;color:#fff;letter-spacing:0.5px}
.uvsu-side__amt{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:1px;margin-top:2px}
.uvsu-side__odds{font-size:11px;color:var(--text-dim);margin-top:2px;font-weight:500}
.uvsu-vs{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--text-ghost);letter-spacing:2px;flex-shrink:0}
.uvsu-badge{font-size:9px;font-weight:800;padding:3px 8px;border-radius:4px;color:#fff;letter-spacing:1px;background:var(--purple);text-transform:uppercase}
.uvsu-form-sides{display:flex;gap:12px}
.uvsu-form-side{flex:1;background:var(--blue-mid);border-radius:var(--r-lg);padding:14px}
.uvsu-form-side__title{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--text-dim);margin-bottom:10px;text-transform:uppercase}

/* ── MOBILE ─────────────────────────────────────────── */
.mobile-topbar{display:none;position:fixed;top:0;left:0;right:0;height:54px;background:var(--blue-dark);border-bottom:1px solid var(--blue-border);align-items:center;justify-content:space-between;padding:0 16px;z-index:200}
.mobile-logo{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:3px;color:var(--yellow)}
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px;background:none;border:none;padding:4px;cursor:pointer;width:32px}
.hamburger span{display:block;height:2px;background:var(--text-muted);border-radius:2px;transition:all 200ms ease}
.hamburger:hover span{background:var(--text)}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.65);z-index:299;display:none}
.sidebar-backdrop.hidden{display:none!important}

/* ── ANIMATIONS ─────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}

/* ── RESPONSIVE ─────────────────────────────────────── */
@media(max-width:900px){.sidebar{width:220px}.main{padding:24px 20px 40px}}
@media(max-width:768px){.sidebar{display:none!important}.main{padding:68px 14px 40px!important;width:100%}.page-title{font-size:30px}.topbar{flex-wrap:wrap;gap:12px}.bets-grid{grid-template-columns:1fr}.sport-tabs-wrap{margin-left:-14px;margin-right:-14px}.sport-tabs{padding-left:14px;padding-right:14px}}
@media(max-width:480px){.page-title{font-size:26px}}

/* ── MISC ───────────────────────────────────────────── */
#f-sport-add-row{display:none;align-items:center}

/* ── View transitions ─────────────────────────────────────────────────────── */
.view-entering{animation:view-in 0.18s ease-out both}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tab-entering{animation:tab-in 0.12s ease-out both}
@keyframes tab-in{from{opacity:0}to{opacity:1}}

/* Pulse border on a streak-pick player photo when their game is live.
   Used by streakfeed strip + slip cards. Green ring grows + fades to
   signal "live now, watch this one". 1.5s cycle is brisk enough to
   read as live without being distracting next to other content. */
@keyframes streak-live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,200,83,0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(0,200,83,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,83,0); }
}
.streak-live-photo {
  border: 2px solid #00c853 !important;
  animation: streak-live-pulse 1.5s ease-out infinite;
}