*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* Neutral near-black. The previous ladder was blue-purple (#111827 ->
     #303750): every surface carried a hue, so the whole product read as
     tinted rather than as a dark UI, and the purple accent had nothing
     neutral to sit against. Greys now have no hue at all, which is what
     lets a single flat accent do the work of the old gradients. */
  --bg:#050507;
  --surface:#121214;
  --surface2:#1c1c20;
  --surface3:#2a2a30;
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.15);
  --text:#ffffff;
  --muted:#9a9aa5;
  --muted2:#c6c6ce;
  --accent:#7c5cbf;
  --accent-bright:#9b72e8;
  --accent-dim:rgba(155,114,232,0.13);
  --green:#22c55e;
  --green-dim:rgba(34,197,94,0.12);
  --red:#d98aa0;
  --red-dim:rgba(217,138,160,0.12);
  --yellow:#e6c07a;
  --yellow-dim:rgba(230,192,122,0.12);
  --font-head:'Archivo','Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --radius:8px;
  --radius-lg:12px;
  /* Vertical rhythm. Landing sections used to set their own gaps ad hoc, which
     is why one section ran 274px of empty black under its last line while the
     next stacked four distinct blocks 18px apart. Three steps only: between
     sections, between blocks inside a section, between related items. */
  --sp-section:clamp(56px,7vw,96px);
  --sp-block:clamp(32px,4vw,56px);
  --sp-group:24px;
  --accept:#22c55e;
  --hot:#ef4444;
}
html{scroll-behavior:smooth}
html{overflow-x:hidden;max-width:100vw}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;overflow-x:hidden;max-width:100vw;font-size:16px;padding-top:60px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* NAV */
/* Three-zone symmetric bar: logo | centered tabs | utilities. The 1fr side
   columns are equal, so the tab group sits on the true centerline of the page. */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(5,5,7,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 1px 0 rgba(124,92,191,.12);height:60px;display:grid;grid-template-columns:1fr minmax(0,max-content) 1fr;align-items:center;padding:0 1.5rem;gap:1rem}
.nav-logo{justify-self:start}
.nav-links{justify-self:center;max-width:100%}
.nav-right{justify-self:end;display:flex;align-items:center}
.nav-logo{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;display:flex;align-items:center;gap:9px;text-decoration:none;cursor:pointer}
.nav-logo span{color:var(--accent-bright)}
.bk-pill{display:none;align-items:center;gap:5px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.25);border-radius:20px;padding:4px 10px 4px 5px;cursor:pointer;transition:background .15s;margin-left:auto}
.bk-pill:hover{background:rgba(167,139,250,.18)}
.bk-pill .bk-amt{font-size:13px;font-weight:700;color:var(--text)}
.bk-pill .bk-lbl{font-size:10px;font-weight:600;color:var(--muted);letter-spacing:.04em}
.comm-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:10px}
.comm-give-get{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:10px 0}
.comm-chips{display:flex;flex-wrap:wrap;gap:4px}
.comm-chip{display:inline-flex;align-items:center;gap:4px;background:var(--surface3);border-radius:100px;padding:3px 8px;font-size:11px;font-weight:600}
.comm-arrow{text-align:center;color:var(--muted);font-size:14px;font-weight:700}
.comm-verdict{display:inline-flex;align-items:center;padding:3px 9px;border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.comm-verdict.win{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.2)}
.comm-verdict.even{background:rgba(251,191,36,.1);color:#fbbf24;border:1px solid rgba(251,191,36,.2)}
.comm-verdict.lose{background:rgba(248,113,113,.1);color:#f87171;border:1px solid rgba(248,113,113,.2)}
.comm-vote-row{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.comm-vote-btn{display:flex;align-items:center;gap:4px;background:var(--surface3);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--muted);transition:all .15s}
.comm-vote-btn:hover{color:var(--text);border-color:var(--border2)}
.comm-vote-btn.voted-up{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.3);color:#4ade80}
.comm-vote-btn.voted-down{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.3);color:#f87171}
.comm-opinion-btn{background:var(--accent-dim);border:1px solid rgba(155,114,232,.45);color:var(--accent-bright);
  font-size:12px;font-weight:700;cursor:pointer;padding:6px 14px;border-radius:100px;transition:all .15s;margin-left:auto}
.comm-opinion-btn:hover{background:var(--accent-bright);color:#0d0817}
.comm-opinion-btn::before{content:'\1F5E8';content:'';display:none}
.qotd{background:rgba(155,114,232,.12);border:1px solid rgba(155,114,232,.35);
  border-radius:12px;padding:14px 16px;margin-bottom:14px}
.qotd-label{font-size:10px;font-weight:700;color:var(--accent-bright);text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}
.qotd-q{font-family:var(--font-head);font-size:15px;font-weight:700;color:var(--text);line-height:1.4}
.comm-opinions{display:none;margin-top:10px;border-top:1px solid var(--border);padding-top:10px}
.comm-opinions.open{display:block}
.comm-op-row{display:flex;gap:8px;margin-bottom:8px;align-items:flex-start}
.comm-op-text{font-size:12px;color:var(--muted2);line-height:1.6;flex:1}
.comm-op-user{font-size:11px;font-weight:700;color:var(--accent-bright)}
.comm-op-like{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;padding:2px 6px;border-radius:4px;display:flex;align-items:center;gap:3px;flex-shrink:0}
.comm-op-like:hover{color:var(--text)}
.comm-op-like.liked{color:#f59e0b}
.comm-opinion-input{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.comm-opinion-input textarea{width:100%;background:var(--surface3);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text);resize:none;font-family:var(--font-body);line-height:1.5;min-height:72px;box-sizing:border-box;transition:border-color .15s}
.comm-opinion-input textarea:focus{outline:none;border-color:var(--accent-bright)}
.comm-opinion-input textarea::placeholder{color:var(--muted)}
.comm-opinion-input .post-row{display:flex;align-items:center;justify-content:space-between}
.comm-opinion-input .char-count{font-size:11px;color:var(--muted)}
/* Player photo chips in feed */
.comm-player-chip{display:inline-flex;align-items:center;gap:5px;background:var(--surface3);border-radius:8px;padding:4px 8px 4px 4px;font-size:11px;font-weight:600;color:var(--text);margin:2px}
.comm-player-chip img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:var(--surface2)}
.comm-pick-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.2);border-radius:8px;padding:4px 8px;font-size:11px;font-weight:600;color:var(--accent-bright);margin:2px}
.share-trade-btn{width:100%;margin-top:12px;padding:10px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.25);border-radius:var(--radius);color:var(--accent-bright);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s}
.share-trade-btn:hover{background:rgba(167,139,250,.18)}
.ctx-seg{display:flex;gap:6px;flex-wrap:wrap}
.ctx-seg-btn{flex:1 1 0;min-width:120px;padding:9px 10px;background:var(--surface2);border:1px solid var(--border);border-radius:9px;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ctx-seg-btn:hover{border-color:rgba(167,139,250,.4);color:var(--text)}
.ctx-seg-btn.active{background:var(--accent-dim);border-color:rgba(167,139,250,.55);color:var(--accent-bright)}
/* Draft-with-friends choice cards */
.mpx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:580px}
.mpx-card{position:relative;cursor:pointer;padding:22px 20px;border-radius:16px;border:1px solid var(--border);background:var(--surface2);overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s}
.mpx-card:hover{transform:translateY(-3px);border-color:rgba(167,139,250,.5);box-shadow:0 12px 34px -14px rgba(124,92,191,.55)}
.mpx-card::after{content:"";position:absolute;inset:0;background:none;opacity:0;transition:opacity .18s;pointer-events:none}
.mpx-card:hover::after{opacity:1}
.mpx-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.mpx-t{font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--text)}
.mpx-s{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.mp-live-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;animation:mpPulse 1.8s infinite}
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(94,230,168,.55)}70%{box-shadow:0 0 0 8px rgba(94,230,168,0)}100%{box-shadow:0 0 0 0 rgba(94,230,168,0)}}
@media(prefers-reduced-motion:reduce){.mp-live-dot{animation:none}.mpx-card:hover{transform:none}}
@media(max-width:560px){.mpx-grid{grid-template-columns:1fr}}
/* Reading-your-opponent: premium radial gauges with animated count-up */
.oppread-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.oppread-cell{background:var(--surface2);border:1px solid var(--border);border-radius:16px;padding:16px 12px 14px;text-align:center;position:relative;overflow:hidden}
.oppread-cell::after{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:rgba(155,114,232,.3);opacity:.7}
.oppread-q{font-size:11px;color:var(--muted);line-height:1.4;min-height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.oppread-ring{position:relative;width:92px;height:92px;margin:0 auto}
.oppread-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.oppread-ring .ring-bg{fill:none;stroke:var(--surface);stroke-width:7}
.oppread-ring .ring-fg{fill:none;stroke-width:7;stroke-linecap:round;stroke-dasharray:238.76;stroke-dashoffset:238.76;transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 0 5px rgba(155,114,232,.45))}
.oppread-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent-bright)}
.oppread-label{font-size:10.5px;font-weight:700;margin-top:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
@media(max-width:560px){.oppread-grid{gap:8px}.oppread-ring{width:78px;height:78px}.oppread-pct{font-size:20px}.oppread-q{font-size:10px;min-height:26px}}
@media(prefers-reduced-motion:reduce){.oppread-ring .ring-fg{transition:none}}
.oppread-calc{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:#fff;background:#9b72e8;border:none;border-radius:100px;padding:11px 26px;cursor:pointer;box-shadow:0 6px 22px -6px rgba(124,92,191,.7);transition:transform .16s,box-shadow .16s,filter .16s}
.oppread-calc:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 9px 28px -8px rgba(124,92,191,.85)}
.oppread-calc:active{transform:translateY(0)}
.q1-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted2);background:var(--surface2);border:1px solid rgba(167,139,250,.3);border-radius:100px;padding:7px 14px;margin-bottom:12px}
.q1-chip strong{color:var(--accent-bright);font-weight:700}
.nav-links{display:flex;gap:.25rem;margin-left:auto;align-items:center}
.nav-link{font-size:13px;color:var(--muted2);cursor:pointer;transition:color .15s;text-decoration:none}
.nav-link:hover{color:var(--text)}
/* Dropdown nav */
.nav-item{position:relative}
.nav-item-btn{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted2);cursor:pointer;padding:6px 12px;border-radius:100px;transition:background .16s,color .16s,opacity .16s;white-space:nowrap;background:none;border:none;font-family:inherit}
.nav-item-btn:not(.sage-hot):hover{background:rgba(167,139,250,.1);color:var(--text);opacity:1}
.nav-item-btn.active:not(.sage-hot),.nav-item-btn.screen-nav.active:not(.sage-hot){background:rgba(155,114,232,.15);color:var(--accent-bright);opacity:1;font-weight:600}
.nav-item-btn:hover,.nav-item-btn.active{color:var(--text);background:var(--surface2)}
/* Ask Sage: the centre tab carries a permanent-but-subtle purple signpost - a
   faint tint plus a 1px accent border - so it reads as "special" without the
   loud solid pill shouting over the rest of the flat nav. Active/hover deepen
   the tint. */
.nav-item-btn.sage-hot{color:var(--accent-bright);font-weight:700;background:rgba(155,114,232,.09);border:1px solid rgba(155,114,232,.42);border-radius:100px;padding:5px 15px;transition:background .18s,border-color .18s,color .18s}
.nav-item-btn.sage-hot:hover,.nav-item-btn.sage-hot.active{color:var(--accent-bright);background:rgba(155,114,232,.18);border-color:rgba(155,114,232,.7)}
.nav-item-btn .caret{font-size:9px;opacity:.5;transition:transform .15s}
.nav-item:hover .caret,.nav-item.open .caret{transform:rotate(180deg)}
.nav-dropdown{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:180px;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,.4);padding-top:12px;margin-top:0}
.nav-dropdown::before{content:'';position:absolute;top:-8px;left:0;right:0;height:8px}
.nav-item:hover .nav-dropdown,.nav-item.open .nav-dropdown{display:block}
.nav-dd-item{display:block;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--muted2);cursor:pointer;transition:all .15s;white-space:nowrap}
.nav-dd-item:hover{background:var(--surface2);color:var(--text)}
.nav-dd-item.active{color:var(--accent-bright)}
.nav-dd-sep{height:1px;background:var(--border);margin:4px 6px}
.nav-dd-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;padding:6px 12px 2px}
/* User account dropdown */
.user-pill{display:none;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:5px 10px;cursor:pointer;font-size:12px;color:var(--muted2);transition:all .15s;position:relative;margin-left:8px}
.user-pill:hover{border-color:var(--accent-bright);color:var(--text)}
.user-pill-name{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;color:var(--text)}
.user-dropdown{display:none;position:absolute;top:calc(100% + 8px);right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:200px;z-index:999;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.user-pill.open .user-dropdown{display:block}
.user-dd-header{padding:8px 12px 6px;border-bottom:1px solid var(--border);margin-bottom:4px}
.user-dd-name{font-size:13px;font-weight:700;color:var(--text)}
.user-dd-league{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-dd-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--muted2);cursor:pointer;transition:all .15s}
.user-dd-item:hover{background:var(--surface2);color:var(--text)}
.user-dd-item.danger{color:var(--red)}
.user-dd-item.danger:hover{background:rgba(239,68,68,.08);color:var(--red)}

/* HERO */
.hero{padding:0;box-sizing:border-box;max-width:100%;margin:0;position:relative;overflow:hidden;min-height:calc(100vh - 60px);display:flex;align-items:flex-start;justify-content:center;background:var(--bg)}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:none;pointer-events:none;z-index:0}
@keyframes heroAura{0%{opacity:.5}100%{opacity:1}}
/* Floating hero particles */
.hero-particles{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hpart{position:absolute;border-radius:50%;animation:hpartFloat var(--d,14s) var(--del,0s) ease-in-out infinite alternate}
@keyframes hpartFloat{0%{transform:translate(0,0) scale(1);opacity:var(--lo,.15)}100%{transform:translate(var(--dx,20px),var(--dy,-40px)) scale(var(--sc,1.3));opacity:var(--hi,.55)}}
/* Hero inner - centered column */
/* Hero fades in as ONE block - no element-by-element stagger, so it never reads
   as loading in pieces (the badge/headline/tagline all appear together). */
.hero-inner{text-align:center;position:relative;z-index:1;max-width:620px;padding:16px 24px 34px;display:flex;flex-direction:column;align-items:center;animation:heroEnter .7s ease both}
@keyframes heroEnter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.hero-inner{animation:none}}
/* Mobile: the full-screen "peek" sections are a desktop effect. On phones, size
   sections to their content so there's no giant empty gap between them. */
@media(max-width:640px){
  /* The old #home-problem padding override lived here; the marketing home now
     carries one section step for every block (home.css --mk-sec-pad), so the
     special case is gone. */
  html.v12 .hero,html.v12 .ticker-visible .hero,html.v12 body.ticker-on .hero{min-height:auto!important}
  html.v12 .hero-inner{padding-top:22px!important;padding-bottom:48px!important}
}
/* Sage stage - centered with rings */
.hero-sage-stage{position:relative;display:inline-flex;align-items:center;justify-content:center;margin-bottom:32px}
/* Ambient glow removed: the pulsing purple halo read as AI-generated flourish. */
.hero-sage-stage::before{content:none}
.hero-ring{position:absolute;border-radius:50%;border:1px solid rgba(167,139,250,.18);animation:heroRing 4s ease-in-out infinite}
.hero-ring-1{inset:-28px;animation-delay:0s}
.hero-ring-2{inset:-48px;animation-delay:.9s;border-color:rgba(167,139,250,.1)}
.hero-ring-3{inset:-70px;animation-delay:1.8s;border-color:rgba(167,139,250,.06)}
@keyframes heroRing{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.03);opacity:1}}
/* Badge */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--accent-dim);border:1px solid rgba(124,92,191,0.3);border-radius:100px;padding:4px 14px;font-size:12px;color:var(--accent-bright);font-weight:500;margin-bottom:24px}
.hero-badge-dot{width:6px;height:6px;background:var(--accent-bright);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
/* Typography */
h1{font-family:var(--font-head);font-size:clamp(44px,6.5vw,82px);font-weight:900;line-height:1.0;letter-spacing:-.05em;color:var(--text);margin-bottom:1.1rem}
h1 .hl{color:var(--accent-bright)}
.hero-tagline{font-size:clamp(16px,1.8vw,19px);color:var(--muted2);line-height:1.65;margin-bottom:2.2rem;max-width:480px;font-weight:400}
.hero-sub{font-size:clamp(15px,1.8vw,18px);color:var(--muted2);max-width:580px;line-height:1.7;margin-bottom:1rem;font-weight:400}
.hero-sub strong{color:var(--text);font-weight:500}
.hero-villain{display:none}
/* CTA */
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-bottom:0}
.hero-noaccount{flex-basis:100%;margin:14px 0 0;font-size:13px;font-weight:500;color:var(--muted);text-align:center}
/* Hero mock starter: the league-context box is the product's front door, so it
   sits right in the hero. Same quiet surface language as the app inputs. */
.hero-mock-start{width:100%;max-width:520px;text-align:left}
.hero-mock-start label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:8px}
.hero-mock-start textarea{width:100%;resize:none;background:var(--surface);border:1px solid var(--border2);border-radius:12px;color:var(--text);font-family:inherit;font-size:14px;line-height:1.55;padding:12px 14px}
.hero-mock-start textarea::placeholder{color:var(--muted)}
.hero-mock-start textarea:focus{outline:none;border-color:var(--accent-bright)}
.hero-mock-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.hero-mock-alt{font-size:12.5px;color:var(--muted)}
.hero-mock-alt a{color:var(--accent-bright);text-decoration:none;font-weight:600}
/* Aurora Drift: a living purple->cyan gradient drifts across the primary CTA */
.btn-primary{background:var(--accent-bright);color:#fff;font-size:15px;font-weight:700;padding:15px 36px;border:none;border-radius:100px;cursor:pointer;transition:transform .2s,box-shadow .3s;text-decoration:none;display:inline-block;letter-spacing:.01em;box-shadow:0 5px 30px rgba(124,92,191,.5),0 1px 0 rgba(255,255,255,.18) inset}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(155,114,232,.36),0 1px 0 rgba(255,255,255,.22) inset}
.btn-primary:active{transform:translateY(0);box-shadow:0 2px 10px rgba(124,92,191,.3)}
@keyframes tmDrift{to{background-position:300% 0}}
@keyframes tmPcFade{from{opacity:.35}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.btn-primary{animation:none}.pcwrap{animation:none!important}}
.btn-outline{background:rgba(255,255,255,.05);color:var(--text);font-size:15px;font-weight:500;padding:15px 32px;border:1px solid rgba(255,255,255,.16);border-radius:100px;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-block}
.btn-outline:hover{color:#fff;border-color:rgba(155,114,232,.6);background:rgba(155,114,232,.1);box-shadow:0 0 20px rgba(155,114,232,.18);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0)}
/* Social proof strip */
.hero-proof{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:28px;font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.01em}
.hero-proof-sep{color:rgba(255,255,255,.2);font-size:10px}
/* STATS (kept for any leftover refs) */
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.stat-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:0 8px 30px -16px rgba(124,92,191,.45)}
.stat-num{font-family:var(--font-head);font-size:36px;font-weight:700;color:var(--accent-bright);line-height:1;margin-bottom:4px}
.stat-label{font-size:12px;color:var(--muted);font-weight:400}
.hero-layout{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:center}
.stats-bar{display:flex;align-items:center;gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:0;margin:20px 0 0;overflow:hidden}
.stats-bar-item{flex:1;padding:14px 16px;text-align:center;border-right:1px solid var(--border)}
.stats-bar-item:last-child{border-right:none}
.stats-bar-num{font-size:18px;font-weight:700;color:var(--accent-bright);letter-spacing:-.02em;line-height:1}
.stats-bar-lbl{font-size:10px;color:var(--muted);margin-top:2px;font-weight:500;letter-spacing:.02em}

/* DEMO TRADE */
.demo-section{padding:40px 1.5rem}
.demo-wrap{max-width:820px;margin:0 auto}
.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-top:24px}
.demo-card-header{background:rgba(155,114,232,.10);border-bottom:1px solid var(--border);padding:14px 20px;display:flex;align-items:center;gap:10px}
.demo-tag{font-size:9px;font-weight:700;padding:2px 8px;border-radius:100px;background:rgba(167,139,250,.2);color:var(--accent-bright);text-transform:uppercase;letter-spacing:.06em}
.demo-body{padding:20px}
.demo-trade-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;background:var(--surface2);border-radius:12px;padding:16px;margin-bottom:16px}
.demo-side-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.demo-player-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.demo-player-img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1.5px solid var(--border2);background:var(--surface3);flex-shrink:0}
.demo-player-info{font-size:12px;font-weight:700;color:var(--text);line-height:1.2}
.demo-player-meta{font-size:10px;color:var(--muted)}
.demo-pick-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.demo-pick-chip{display:inline-flex;align-items:center;gap:4px;background:rgba(167,139,250,.1);border:1px solid rgba(167,139,250,.2);border-radius:6px;padding:5px 9px;font-size:11px;font-weight:600;color:var(--accent-bright)}
.demo-arrow{font-size:22px;color:var(--muted);text-align:center}
.demo-verdict{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:10px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.demo-verdict-label{font-size:13px;font-weight:800;color:var(--green)}
.demo-verdict-sub{font-size:12px;color:var(--muted2);margin-top:2px}
.demo-verdict-gap{font-size:22px;font-weight:700;color:var(--green);letter-spacing:-.02em}
.demo-verdict-gap-lbl{font-size:9px;color:var(--muted);text-align:right;font-weight:600;letter-spacing:.03em}

/* FEATURE GRID */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2rem}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;transition:border-color .15s}
.feat-card:hover{border-color:rgba(167,139,250,.4)}
.feat-icon{font-size:28px;margin-bottom:.75rem;line-height:1}
.feat-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.feat-desc{font-size:13px;color:var(--muted);line-height:1.6}

/* TESTIMONIALS */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2rem}
.testi-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}
.testi-quote{font-size:13px;color:var(--muted2);line-height:1.7;margin-bottom:12px;font-style:italic}
.testi-quote::before{content:'"';color:var(--accent-bright);font-size:20px;font-weight:700;font-style:normal;line-height:0;vertical-align:-6px;margin-right:2px}
.testi-author{display:flex;align-items:center;gap:8px}
.testi-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--accent-bright)}
.testi-name{font-size:12px;font-weight:700;color:var(--text)}
.testi-handle{font-size:10px;color:var(--muted)}

/* SECTION. This is the single container every tool screen lives in. On a tool
   page the hero is hidden, so the 60px top padding was pure dead space under the
   nav (the ~120px gap above "Ask me anything" and every other tool title). Trim
   the top; keep generous bottom room before the footer. */
.section{padding:30px 0 60px}
.wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem}
#analyzer{scroll-margin-top:16px}
.section-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:.5rem}
.section-title{font-family:var(--font-head);font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.03em;color:var(--text);margin-bottom:1rem}
.section-sub{font-size:15px;color:var(--muted2);max-width:520px;line-height:1.7}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border2);border-radius:16px;padding:1.5rem;box-shadow:0 8px 30px -16px rgba(124,92,191,.45),0 4px 24px rgba(0,0,0,.35),0 1px 0 rgba(255,255,255,.04) inset}
.card+.card{margin-top:12px}

/* TICKER */
#ticker-bar{position:fixed;top:60px;left:0;right:0;z-index:99;display:none;overflow:hidden;padding:7px 0;background:rgba(14,20,33,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(155,114,232,.15)}
body.ticker-on{padding-top:94px}
.ticker{display:flex;gap:48px;white-space:nowrap;animation:ticker 28s linear infinite}
.ticker-item{font-size:12px;color:var(--muted);letter-spacing:.04em;display:flex;align-items:center;gap:8px}
.ticker-item .dot{width:4px;height:4px;background:var(--accent-bright);border-radius:50%;flex-shrink:0}
.ticker-item span{color:var(--accent-bright)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ANALYZER LAYOUT */
.analyzer-grid{display:grid;grid-template-columns:1fr;gap:16px;}

/* LOGIN */
.sleeper-connect{text-align:center;margin-bottom:1.75rem}
.sleeper-icon{width:56px;height:56px;background:transparent;border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;flex-shrink:0;overflow:hidden}
.connect-title{font-size:21px;font-weight:800;color:var(--text);letter-spacing:-.03em;margin-bottom:7px}
.connect-sub{font-size:13px;color:var(--muted2);line-height:1.65;max-width:340px;margin:0 auto}
.input-group{display:flex;gap:8px}
#login-panel .input-group{flex-direction:column;gap:10px}
.tm-input{flex:1;background:var(--surface2);border:1px solid var(--border2);border-radius:10px;color:var(--text);font-family:var(--font-body);font-size:14px;padding:11px 14px;outline:none;transition:all .2s;text-overflow:ellipsis}
.tm-input:focus{border-color:var(--accent-bright);box-shadow:0 0 0 3px rgba(155,114,232,.15)}
.tm-input::placeholder{color:var(--muted)}
#login-panel .tm-input{font-size:15px;padding:13px 16px;border-radius:12px}
.btn-load{background:#9b72e8;color:#fff;border:none;border-radius:100px;font-size:13px;font-weight:700;padding:0 22px;cursor:pointer;white-space:nowrap;transition:transform .16s,box-shadow .16s,filter .16s;box-shadow:0 6px 22px -6px rgba(124,92,191,.7)}
.btn-load:hover{filter:brightness(1.06);box-shadow:0 9px 28px -8px rgba(124,92,191,.85);transform:translateY(-1px)}
.btn-load:active{transform:translateY(0)}
.btn-load:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
#login-panel .btn-load{width:100%;padding:14px;font-size:15px;font-weight:700;border-radius:12px;letter-spacing:.01em}
.status-msg{font-size:12px;color:var(--muted);margin-top:8px;min-height:18px;line-height:1.5;text-align:center}
.hint-row{font-size:11px;color:var(--muted);margin-top:10px;line-height:1.6;text-align:center}
#login-panel{border-top:2px solid var(--accent-bright);background:var(--surface)}

/* LEAGUE CARDS */
.league-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:13px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;box-shadow:0 1px 6px rgba(0,0,0,.15)}
.league-card:hover{border-color:rgba(155,114,232,.5);background:var(--accent-dim);box-shadow:0 4px 16px rgba(124,92,191,.15);transform:translateY(-1px)}
.league-card-name{font-size:14px;font-weight:600;color:var(--text)}
.league-card-meta{font-size:11px;color:var(--muted);margin-top:2px}
.league-arrow{color:var(--accent-bright);font-size:16px;font-weight:700}

/* TRADE BUILDER */
.trade-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.trade-header-info{font-size:13px;font-weight:600;color:var(--text)}
.trade-header-meta{font-size:11px;color:var(--muted);margin-top:2px}
.btn-sm{background:rgba(155,114,232,.12);border:1px solid rgba(167,139,250,.24);border-radius:100px;color:var(--muted2);font-family:var(--font-body);font-size:12px;font-weight:600;padding:7px 15px;cursor:pointer;transition:all .2s;letter-spacing:-.01em;text-transform:none}
.btn-sm:hover{border-color:rgba(167,139,250,.5);color:var(--text);background:rgba(155,114,232,.20)}
.btn-sm:hover{color:var(--text);border-color:rgba(155,114,232,.5);background:rgba(155,114,232,.08);transform:translateY(-1px)}
.btn-sm:active{transform:translateY(0)}

.trade-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin-bottom:1.25rem}
.trade-sides>div:first-child{background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.18);border-radius:14px;padding:14px}
.trade-sides>div:last-child{background:rgba(155,114,232,.06);border:1px solid rgba(155,114,232,.22);border-radius:14px;padding:14px}
.trade-col-label{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text);margin-bottom:.75rem;display:flex;align-items:center;gap:7px}
#builder-panel{border:1px solid rgba(155,114,232,.28);background:var(--surface);box-shadow:0 12px 48px rgba(0,0,0,.45),0 0 0 1px rgba(155,114,232,.06) inset}
#builder-panel .trade-divider{padding-top:0;align-self:center}
.you-dot{width:8px;height:8px;background:var(--green);border-radius:50%}
.them-dot{width:8px;height:8px;background:var(--red);border-radius:50%}
.trade-divider{display:flex;flex-direction:column;align-items:center;padding:2rem .75rem 0;color:var(--muted);font-size:12px;font-weight:600;gap:6px}
.trade-divider-line{width:1px;flex:1;background:var(--border);min-height:32px}

.player-row{display:flex;gap:6px;margin-bottom:10px}
.pos-tag{font-size:10px;font-weight:700;padding:0 7px;border-radius:4px;display:flex;align-items:center;min-width:36px;justify-content:center;flex-shrink:0;border:1px solid var(--border)}
.pos-tag.QB{background:rgba(124,92,191,0.15);color:#a78bfa;border-color:rgba(167,139,250,0.3)}
.pos-tag.RB{background:rgba(34,197,94,0.12);color:#4ade80;border-color:rgba(74,222,128,0.3)}
.pos-tag.WR{background:rgba(245,158,11,0.12);color:#fbbf24;border-color:rgba(251,191,36,0.3)}
.pos-tag.TE{background:rgba(239,68,68,0.12);color:#f87171;border-color:rgba(248,113,113,0.3)}
.add-btn{width:100%;background:transparent;border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);font-size:12px;font-weight:500;padding:8px;cursor:pointer;transition:all .15s;margin-top:2px}
.add-btn:hover{border-color:var(--border2);color:var(--text)}

.opp-select-wrap{margin-bottom:.75rem}
.field-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.opp-select{width:100%;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);color:var(--text);font-family:var(--font-body);font-size:13px;padding:9px 12px;outline:none}

/* AUTOCOMPLETE */
.ac-wrap{position:relative;flex:1}
.ac-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:9999;background:var(--surface2);border:1px solid var(--accent-bright);border-radius:var(--radius);max-height:220px;overflow-y:auto;display:none;box-shadow:0 8px 32px rgba(0,0,0,.6)}
.ac-dropdown.open{display:block}
.ac-item{padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:13px;transition:background .1s;border-bottom:1px solid rgba(255,255,255,.04)}
.ac-item:last-child{border-bottom:none}
.ac-item:hover{background:var(--surface3)}
.ac-pos{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;flex-shrink:0}
.ac-pos.QB{background:rgba(124,92,191,0.2);color:#a78bfa}
.ac-pos.RB{background:rgba(34,197,94,0.15);color:#4ade80}
.ac-pos.WR{background:rgba(245,158,11,0.15);color:#fbbf24}
.ac-pos.TE{background:rgba(239,68,68,0.12);color:#f87171}
.ac-team{font-size:11px;color:var(--muted);margin-left:auto}
.ac-ktc{font-size:11px;font-weight:600;color:var(--accent-bright);margin-left:4px}
.ac-team-logo{width:18px;height:18px;object-fit:contain;flex-shrink:0;border-radius:2px;vertical-align:middle}
.ac-thumb{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--surface3);flex-shrink:0;border:1px solid var(--border)}
.ac-thumb-placeholder{width:28px;height:28px;border-radius:50%;background:var(--surface3);flex-shrink:0;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted)}
.pos-badge{font-size:10px;font-weight:700;padding:0 7px;border-radius:4px;display:flex;align-items:center;min-width:36px;justify-content:center;flex-shrink:0;border:1px solid var(--border)}
.pos-badge.QB,.pos-badge.qb{background:rgba(124,92,191,0.15);color:#a78bfa;border-color:rgba(167,139,250,0.3)}
.pos-badge.RB,.pos-badge.rb{background:rgba(34,197,94,0.12);color:#4ade80;border-color:rgba(74,222,128,0.3)}
.pos-badge.WR,.pos-badge.wr{background:rgba(245,158,11,0.12);color:#fbbf24;border-color:rgba(251,191,36,0.3)}
.pos-badge.TE,.pos-badge.te{background:rgba(239,68,68,0.12);color:#f87171;border-color:rgba(248,113,113,0.3)}
.pos-badge.PK,.pos-badge.pk{background:rgba(124,92,191,0.15);color:#a78bfa;border-color:rgba(167,139,250,0.3)}
.remove-btn{background:transparent;border:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;padding:0 4px;flex-shrink:0;transition:color .15s}
.remove-btn:hover{color:var(--red)}

/* PLAYER CARD MODAL */
.pm-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.75);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .2s}
.pm-overlay.open{opacity:1;pointer-events:all}
.pm-card{background:var(--surface);border:1px solid var(--border2);border-radius:16px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(12px) scale(.97);transition:transform .2s;position:relative}
.pm-overlay.open .pm-card{transform:translateY(0) scale(1)}
.pm-header{background:var(--surface2);padding:1.5rem;display:flex;gap:1rem;align-items:flex-end;position:relative;border-bottom:1px solid var(--border)}
.pm-photo-wrap{position:relative;flex-shrink:0}
.pm-photo{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--accent-bright);background:var(--surface3);display:block}
.pm-team-logo{position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;border:2px solid var(--surface);background:var(--surface2);object-fit:contain}
.pm-info{flex:1;min-width:0}
.pm-name{font-family:var(--font-head);font-size:20px;font-weight:700;color:var(--text);line-height:1.1;margin-bottom:4px}
.pm-meta{font-size:12px;color:var(--muted2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pm-pos-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}
.pm-pos-badge.QB{background:rgba(124,92,191,0.2);color:#a78bfa}
.pm-pos-badge.RB{background:rgba(34,197,94,0.15);color:#4ade80}
.pm-pos-badge.WR{background:rgba(245,158,11,0.15);color:#fbbf24}
.pm-pos-badge.TE{background:rgba(239,68,68,0.12);color:#f87171}
.pm-pos-badge.K,.pm-pos-badge.DEF{background:rgba(124,92,191,0.15);color:#a78bfa}
.pm-close{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.08);border:none;color:var(--muted2);width:28px;height:28px;border-radius:50%;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.pm-close:hover{background:rgba(255,255,255,.16);color:var(--text)}
.pm-body{padding:1.25rem}
.pm-ktc-bar{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:.875rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:1rem}
.pm-ktc-val{font-family:var(--font-head);font-size:28px;font-weight:700;color:var(--accent-bright);line-height:1}
.pm-ktc-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px}
.pm-ktc-tier{font-size:12px;font-weight:600;padding:3px 10px;border-radius:100px;margin-left:auto}
.pm-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:1rem}
.pm-stat{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.625rem .75rem}
.pm-stat-val{font-size:15px;font-weight:700;color:var(--text)}
.pm-stat-key{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.pm-injury{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.5rem .75rem;margin-bottom:1rem;font-size:12px;color:var(--red);font-weight:600}
.pm-sleeper-btn{display:block;text-align:center;background:var(--accent-dim);border:1px solid rgba(124,92,191,.4);color:var(--accent-bright);border-radius:8px;padding:.625rem;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;cursor:pointer}
.pm-sleeper-btn:hover{background:rgba(124,92,191,.25)}
.player-info-btn{background:none;border:none;padding:0;margin:0;cursor:pointer;display:inline-flex;align-items:center;flex-shrink:0;opacity:.6;transition:opacity .15s}
.player-info-btn:hover{opacity:1}
.player-info-btn img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:1px solid var(--border)}
.player-info-btn .ph{width:28px;height:28px;border-radius:50%;background:var(--surface3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:var(--muted)}
.ktc-live{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:.625rem 1rem;margin:.75rem 0;display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.ktc-live-side{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.ktc-live-val{font-family:var(--font-head);font-size:16px;font-weight:700}
.ktc-live-gap{font-size:12px;font-weight:600;margin-left:auto}
.player-row-filled{display:flex;align-items:center;gap:8px;padding:6px 0}
.player-thumb-sm{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface2);border:1px solid var(--border);flex-shrink:0}

/* PROFILER */
.profiler-section{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.profiler-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.profiler-sub{font-size:12px;color:var(--muted);margin-bottom:1rem;line-height:1.5}
.progress-dots{display:flex;gap:6px;margin-bottom:1.25rem}
.pdot{width:24px;height:3px;background:var(--border2);border-radius:2px;transition:background .3s}
.pdot.done{background:var(--accent-bright)}
.pdot.active{background:rgba(155,114,232,.5)}
.q-step{display:none;animation:qslide .25s ease}
.q-step.active{display:block}
@keyframes qslide{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}
.q-text{font-size:14px;font-weight:600;color:var(--text);margin-bottom:3px;line-height:1.4}
.q-hint{font-size:12px;color:var(--muted);margin-bottom:.875rem;line-height:1.5}
.q-opts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.q-opt{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:8px;text-align:left}
.q-opt:hover{border-color:var(--border2);background:var(--surface3)}
.q-opt.sel{border-color:var(--accent-bright);background:var(--accent-dim)}
.q-opt-key{font-size:10px;font-weight:700;color:var(--muted);background:var(--surface3);border:1px solid var(--border);border-radius:4px;padding:1px 6px;flex-shrink:0;transition:all .15s;margin-top:1px}
.q-opt.sel .q-opt-key{background:var(--accent-bright);color:#fff;border-color:var(--accent-bright)}
.q-opt-text{font-size:12px;color:var(--muted2);line-height:1.45;transition:color .15s}
.q-opt.sel .q-opt-text{color:var(--text)}
.q-nav{display:flex;justify-content:space-between;align-items:center;margin-top:.875rem}
.q-back{background:transparent;border:none;color:var(--muted);font-size:12px;cursor:pointer;padding:4px 0;transition:color .15s}
.q-back:hover{color:var(--text)}
.q-back:disabled{opacity:0;pointer-events:none}
.q-counter{font-size:11px;color:var(--muted)}

/* PROFILE BADGE */
.profile-badge{display:none;margin-top:1rem;padding:12px 14px;background:var(--accent-dim);border:1px solid rgba(155,114,232,.35);border-radius:var(--radius);animation:qslide .3s ease}
.profile-badge.show{display:flex;gap:12px;align-items:center}
.pb-icon{font-size:28px;flex-shrink:0}
.pb-name{font-size:13px;font-weight:700;color:var(--accent-bright);margin-bottom:2px}
.pb-desc{font-size:12px;color:var(--muted2);line-height:1.5}

/* YOUR VERDICT */
.your-section{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.your-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px}
.your-sub{font-size:12px;color:var(--muted);margin-bottom:1rem;line-height:1.5}
.your-badge{display:none;margin-top:1rem;padding:12px 14px;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.35);border-radius:var(--radius);animation:qslide .3s ease}
.your-badge.show{display:flex;gap:12px;align-items:center}
.yb-verdict{font-size:13px;font-weight:700;margin-bottom:2px}
.yb-desc{font-size:12px;color:var(--muted2);line-height:1.5}
.verdict-go{color:var(--green)}
.verdict-stop{color:var(--red)}
.verdict-warn{color:var(--yellow)}

/* ANALYZE BTN */
.analyze-btn{width:100%;margin-top:1.25rem;background:#9b72e8;color:#fff;font-family:var(--font-head);font-size:15px;font-weight:700;padding:18px;border:none;border-radius:16px;cursor:pointer;transition:all .2s;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 6px 32px rgba(124,92,191,.5),0 1px 0 rgba(255,255,255,.15) inset}
.analyze-btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(124,92,191,.6),0 1px 0 rgba(255,255,255,.15) inset;background:#ab8bee}
.analyze-btn:active{transform:translateY(0);box-shadow:0 2px 12px rgba(124,92,191,.3)}

/* TRADE IDEAS */
.ideas-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.ideas-header{padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;background:none;border-bottom:1px solid var(--border)}
.ideas-title{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--text)}
.ideas-sub{font-size:12.5px;color:var(--muted);margin-top:4px}
.ideas-refresh{background:rgba(155,114,232,.18);border:1px solid rgba(167,139,250,.42);color:var(--accent-bright);font-size:12px;font-weight:700;padding:8px 16px;border-radius:100px;cursor:pointer;letter-spacing:.01em;white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s;box-shadow:0 2px 10px -4px rgba(124,92,191,.55)}
.ideas-refresh:hover{transform:translateY(-1px);background:rgba(155,114,232,.26);box-shadow:0 6px 18px -6px rgba(124,92,191,.75)}
.ideas-filter{display:flex;flex-direction:column;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.015)}
.ideas-filter>input,.ideas-filter-excl input{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--text);font-family:var(--font-body);outline:none;width:100%;box-sizing:border-box}
.ideas-filter>input:focus,.ideas-filter-excl input:focus{border-color:var(--accent-bright)}
.ideas-filter-excl{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ideas-excl-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--accent-bright);background:var(--accent-dim);border:1px solid rgba(167,139,250,.35);border-radius:100px;padding:4px 6px 4px 11px}
.ideas-excl-chip b{cursor:pointer;font-weight:800;opacity:.7;font-size:14px;line-height:1}
.ideas-excl-chip b:hover{opacity:1}
.idea-item{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 18px 16px;margin-bottom:14px;transition:border-color .18s,transform .18s,box-shadow .18s}
.idea-item:hover{border-color:rgba(155,114,232,.42);transform:translateY(-2px);box-shadow:0 14px 34px -20px rgba(124,92,191,.75)}
.idea-players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:10px}
.idea-side{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.02);border:1px solid var(--border);border-radius:12px;padding:9px 11px}
.idea-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--border);background:var(--surface3);flex-shrink:0}
.idea-pk{width:36px;height:36px;border-radius:10px;background:rgba(155,114,232,.24);border:1px solid rgba(155,114,232,.45);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-size:15px;font-weight:800;color:var(--accent-bright);flex-shrink:0}
.idea-player-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.3}
.idea-player-sub{font-size:11px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:3px}
.idea-arrow{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;background:#9b72e8;box-shadow:0 3px 12px rgba(124,92,191,.4);flex-shrink:0}
.idea-tag{font-size:9.5px;font-weight:800;padding:4px 11px;border-radius:100px;flex-shrink:0;text-transform:uppercase;letter-spacing:.07em;border:1px solid transparent;white-space:nowrap}
.idea-tag.win{background:rgba(34,197,94,.16);color:var(--green);border-color:rgba(34,197,94,.42)}
.idea-tag.fair{background:rgba(245,158,11,.14);color:var(--yellow);border-color:rgba(245,158,11,.4)}
.idea-tag.counter{background:rgba(155,114,232,.24);color:#c4b5fd;border-color:rgba(167,139,250,.5);box-shadow:0 2px 10px -4px rgba(124,92,191,.65)}
.idea-reason{font-size:12px;color:var(--muted2);line-height:1.6;margin-top:4px}
.idea-opp{font-size:11px;color:var(--muted);margin-bottom:6px}
.idea-use-btn{font-size:12px;font-weight:700;color:#fff;background:#9b72e8;border:1px solid rgba(196,167,255,.35);padding:9px 22px;border-radius:100px;cursor:pointer;margin-top:12px;display:inline-flex;align-items:center;gap:7px;letter-spacing:.01em;box-shadow:0 4px 16px rgba(107,72,196,.4),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .18s,box-shadow .18s;font-family:var(--font-body)}
.idea-use-btn:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(107,72,196,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.idea-use-btn:active{transform:translateY(0)}
.ideas-empty{padding:2.5rem;text-align:center;color:var(--muted);font-size:13px;line-height:1.6}

/* RESULT */
.result-panel{display:none;margin-top:16px;animation:fadeUp .35s ease}
.result-panel.visible{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

.verdict-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:12px}
.pitch-card{background:var(--surface)}
.how-card:nth-child(1){border-top:3px solid var(--accent-bright)}
.how-card:nth-child(2){border-top:3px solid var(--green)}
.how-card:nth-child(3){border-top:3px solid var(--yellow)}
.verdict-top{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:1.25rem}
.ring-wrap{flex-shrink:0;text-align:center}
.ring-container{width:100px;height:100px;position:relative;margin:0 auto 6px}
.ring-container svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:none;stroke:var(--surface2);stroke-width:8}
.ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1)}
.ring-label-pct{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);font-family:var(--font-head);font-size:26px;font-weight:700;line-height:1}
.ring-label-sub{position:absolute;top:50%;left:50%;transform:translate(-50%,14px);font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.ring-meta{font-size:11px;color:var(--muted);text-align:center}
.verdict-right{flex:1;min-width:0}
.verdict-headline{font-family:var(--font-head);font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:.5rem}
.verdict-body{font-size:13px;color:var(--muted2);line-height:1.7}

/* ── SAGE MASCOT ─────────────────────────── */
.sage-wrap{flex-shrink:0;width:96px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:default}
.sage-svg{overflow:visible;width:90px;height:90px}
.sage-asset{display:flex;width:90px;height:90px;overflow:visible}
.sage-mark{align-items:center;justify-content:center;border:1px solid var(--border2);border-radius:50%;background:var(--surface2);color:var(--accent-bright);font-family:var(--font-head);font-size:34px;font-weight:800;letter-spacing:-.12em;line-height:1}
.sage-mark[data-state="win"]{color:var(--green);border-color:rgba(74,222,128,.42)}
.sage-mark[data-state="no"]{color:var(--red);border-color:rgba(248,113,113,.42)}
.sage-mark[data-state="even"]{color:var(--yellow);border-color:rgba(251,191,36,.42)}
.trust-index{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;margin-top:1px;border-top:1px solid var(--accent-bright);color:var(--accent-bright);font-size:10px;font-weight:800;letter-spacing:.08em}
.sage-wrap .sage-asset{animation:sageBobRich 4s ease-in-out infinite;transform-origin:center bottom}
.sage-tag{font-size:10px;font-weight:800;color:var(--accent-bright);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.sage-mouth{display:none}
@keyframes sageBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes sageBounce{0%{transform:translateY(0) scale(1)}20%{transform:translateY(-18px) scale(1.06)}40%{transform:translateY(-5px) scale(1.02)}60%{transform:translateY(-12px) scale(1.04)}80%{transform:translateY(-3px) scale(1.01)}100%{transform:translateY(0) scale(1)}}
@keyframes sageShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
@keyframes sageThink{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-4px) rotate(4deg)}}
@keyframes sageStars{0%{opacity:0;transform:scale(.4)}40%{opacity:1;transform:scale(1.3)}100%{opacity:0;transform:scale(.7)}}
@keyframes sageEyePulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes sagePulseGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.sage-aura{transform-box:fill-box;transform-origin:center;animation:sageAuraPulse 3.8s ease-in-out infinite}
@keyframes sageAuraPulse{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.sage-aura{animation:none}}
@keyframes sageBobRich{0%,100%{transform:translateY(0) rotate(0deg)}20%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(-9px) rotate(0deg)}75%{transform:translateY(-4px) rotate(1.8deg)}}
@keyframes sageEyeGlowPulse{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.7;filter:brightness(1.8) saturate(1.5)}}

/* ── Sage wakes up when the site opens ─────────────────────────────────────
   html.sage-boot = first load this session: Sage blooms in and his eyes open.
   html.sage-idle = later loads: skip the wake, he's already up.
   Both states blink forever after. Scoped to the hero Sage only. */
.hero .sage-hero-eye{transform-box:fill-box;transform-origin:center}
html.sage-boot .hero .sage-hero-svg{
  animation:sageWake 1.3s cubic-bezier(.16,1,.3,1) both,
            sageBobRich 4s ease-in-out 1.5s infinite;
}
@keyframes sageWake{
  0%{opacity:0;transform:translateY(12px) scale(.92)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
html.sage-boot .hero .sage-hero-eye{
  animation:sageEyeOpen .9s cubic-bezier(.16,1,.3,1) .55s both,
            sageEyeGlowPulse 2.8s ease-in-out 1.6s infinite,
            sageBlink 5.6s ease-in-out 2.8s infinite;
}
@keyframes sageEyeOpen{
  0%{opacity:0;transform:scaleY(.05)}
  45%{opacity:1}
  100%{opacity:1;transform:scaleY(1)}
}
html.sage-idle .hero .sage-hero-eye{
  animation:sageEyeGlowPulse 2.8s ease-in-out infinite,
            sageBlink 5.6s ease-in-out 1.8s infinite;
}
/* a quick two-frame shut-and-open every ~5.6s */
@keyframes sageBlink{
  0%,92%{transform:scaleY(1)}
  94.5%{transform:scaleY(.06)}
  97%,100%{transform:scaleY(1)}
}
@media (prefers-reduced-motion:reduce){
  html.sage-boot .hero .sage-hero-svg,
  html.sage-boot .hero .sage-hero-eye,
  html.sage-idle .hero .sage-hero-eye{animation:none}
}
.sage-wrap .sage-svg{animation:sageBobRich 4s ease-in-out infinite;transform-origin:center bottom}
.sage-wrap .sage-mouth-neutral{display:block}
/* Continuous eye glow */
.sage-eye-l,.sage-eye-r{animation:sageEyeGlowPulse 2.8s ease-in-out infinite}
/* Gaze transitions */
.sage-wrap .sage-eye-l,.sage-wrap .sage-eye-r{transition:transform .5s cubic-bezier(.25,.46,.45,.94)}
.sage-wrap.gaze-left .sage-eye-l,.sage-wrap.gaze-left .sage-eye-r{transform:translateX(-4px)}
.sage-wrap.gaze-right .sage-eye-l,.sage-wrap.gaze-right .sage-eye-r{transform:translateX(4px)}
/* Win/reject override gaze with no transition delay */
.sage-wrap.win .sage-eye-l,.sage-wrap.win .sage-eye-r{transform:scaleY(1.7)!important;transform-box:fill-box;transform-origin:center;transition:transform .2s}
.sage-wrap.reject .sage-eye-l,.sage-wrap.reject .sage-eye-r{transform:scaleY(0.35)!important;transform-box:fill-box;transform-origin:center;transition:transform .2s}
/* Hero Sage SVG */
.sage-hero-svg{animation:sageBobRich 4s ease-in-out infinite;transform-origin:center bottom;overflow:visible}
.hero .sage-asset{width:112px;height:99px;animation:sageBobRich 4s ease-in-out infinite;transform-origin:center bottom}
.sage-hero-eye{animation:sageEyeGlowPulse 2.8s ease-in-out infinite}
/* Thinking */
.sage-wrap.thinking .sage-svg{animation:sageThink 1.1s ease-in-out infinite}
.sage-wrap.thinking .sage-asset{animation:sageThink 1.1s ease-in-out infinite}
.sage-wrap.thinking .sage-mouth-neutral{display:none}.sage-wrap.thinking .sage-mouth-think{display:block}
.sage-wrap.thinking .sage-eye-l,.sage-wrap.thinking .sage-eye-r{animation:sageEyePulse 1.1s ease-in-out infinite}
/* Win */
.sage-wrap.win .sage-svg{animation:sageBounce .75s cubic-bezier(.36,.07,.19,.97) forwards,sageBob 3s .75s ease-in-out infinite}
.sage-wrap.win .sage-asset{animation:sageBounce .75s cubic-bezier(.36,.07,.19,.97) forwards,sageBob 3s .75s ease-in-out infinite}
.sage-wrap.win .sage-mouth-neutral{display:none}.sage-wrap.win .sage-mouth-win{display:block}
.sage-wrap.win .sage-eye-l,.sage-wrap.win .sage-eye-r{transform:scaleY(1.7);transform-box:fill-box;transform-origin:center}
.sage-wrap.win .sage-stars{animation:sageStars 1.2s ease-out forwards}
/* Reject */
.sage-wrap.reject .sage-svg{animation:sageShake .55s cubic-bezier(.36,.07,.19,.97) forwards}
.sage-wrap.reject .sage-asset{animation:sageShake .55s cubic-bezier(.36,.07,.19,.97) forwards}
.sage-wrap.reject .sage-mouth-neutral{display:none}.sage-wrap.reject .sage-mouth-reject{display:block}
.sage-wrap.reject .sage-eye-l,.sage-wrap.reject .sage-eye-r{transform:scaleY(0.35);transform-box:fill-box;transform-origin:center}
/* Neutral */
.sage-wrap.neutral .sage-mouth-neutral{display:block}
/* Hero Sage */
/* Roster board trade builder: tap tiles on both rosters, Sleeper-style */
.bb-top{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.bb-top-cell{display:flex;align-items:center}
.bb-top-cell:last-child .opp-select{width:100%}
@media(max-width:700px){ .bb-top{grid-template-columns:1fr} }
.bb-boards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:700px){ .bb-boards{grid-template-columns:1fr} }
.bb-board{background:var(--surface2);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.bb-head{display:flex;align-items:center;justify-content:space-between;padding:8px 11px;
  border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--muted2)}
.bb-head .you-dot,.bb-head .them-dot{margin-right:5px}
.bb-count{font-size:10px;font-weight:600;color:var(--accent-bright)}
.bb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:7px}
@media(max-width:1100px){ .bb-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:700px){ .bb-grid{grid-template-columns:repeat(4,1fr)} }
.bb-empty{grid-column:1/-1;padding:20px 12px;text-align:center;font-size:11.5px;color:var(--muted)}
.bb-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px 6px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  color:var(--text);font:inherit;cursor:pointer;min-width:0;
  transition:border-color .15s ease,background .15s ease,transform .1s ease}
.bb-tile:hover{border-color:var(--bbp,var(--border2))}
.bb-tile:active{transform:scale(.96)}
.bb-tile:focus-visible{outline:2px solid var(--accent-bright);outline-offset:1px}
.bb-tile.on{background:var(--accent-dim);border-color:var(--accent-bright)}
.bb-tick{position:absolute;top:4px;right:4px;width:14px;height:14px;border-radius:5px;
  border:1.5px solid var(--border2);background:var(--surface2);
  display:flex;align-items:center;justify-content:center;transition:all .15s ease}
.bb-tick svg{width:8px;height:8px;opacity:0;transform:scale(.5);transition:all .15s ease}
.bb-tile.on .bb-tick{background:var(--accent-bright);border-color:var(--accent-bright)}
.bb-tile.on .bb-tick svg{opacity:1;transform:scale(1)}
.bb-face{width:44px;height:44px;border-radius:50%;position:relative;flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--bbp,var(--border2));background:var(--surface2)}
.bb-ini{font-size:11px;font-weight:700;color:var(--bbp,var(--muted))}
.bb-ini.bb-pick{font-size:13px;font-weight:800;letter-spacing:-.02em;color:var(--accent-bright)}
.bb-face img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;
  object-fit:cover;object-position:top center;background:var(--surface)}
/* D/ST tiles show the team logo - contain it in the circle, don't crop it */
.bb-face img.bb-def{object-fit:contain;object-position:center;padding:7px;background:transparent}
.bb-nm{font-size:10px;font-weight:600;letter-spacing:-.01em;line-height:1.15;max-width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-meta{display:flex;align-items:center;gap:3px;font-size:8.5px;color:var(--muted);line-height:1}
.bb-meta b{font-weight:700}
.bb-tile.bb-more{justify-content:center;border-style:dashed;color:var(--muted2)}
.bb-more-n{font-size:14px;font-weight:800;color:var(--accent-bright)}

/* Connect-league modal: works from any tab */
#connect-modal{position:fixed;inset:0;z-index:300;display:none;align-items:flex-start;justify-content:center;
  padding:9vh 16px 16px;background:rgba(5,4,12,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cm-card{position:relative;width:100%;max-width:460px;background:var(--surface);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:22px;box-shadow:0 24px 70px rgba(0,0,0,.55);
  animation:cmIn .3s cubic-bezier(.16,1,.3,1)}
@keyframes cmIn{0%{opacity:0;transform:translateY(10px) scale(.97)}100%{opacity:1;transform:none}}
.cm-x{position:absolute;top:10px;right:12px;width:28px;height:28px;background:none;border:none;
  color:var(--muted);font-size:20px;cursor:pointer;border-radius:8px}
.cm-x:hover{background:var(--surface2);color:var(--text)}
.cm-title{font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.015em}
.cm-sub{font-size:12.5px;color:var(--muted2);margin-top:5px;line-height:1.5}
.cm-status{font-size:12px;color:var(--muted);margin-top:9px;min-height:16px}
.cm-leagues{max-height:300px;overflow-y:auto}
.cm-league{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;
  border:1px solid var(--border);border-radius:10px;margin-bottom:7px;cursor:pointer;
  transition:border-color .15s,background .15s}
.cm-league:hover{border-color:var(--accent-bright);background:var(--accent-dim)}
.cm-lname{font-size:13.5px;font-weight:600;letter-spacing:-.01em}
.cm-lmeta{font-size:10.5px;color:var(--muted);margin-top:2px}

/* Sage chat history sidebar */
.sage-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:12px;align-items:start}
.sage-side{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:10px;position:sticky;top:74px;max-height:calc(100vh - 96px);overflow-y:auto}
.sage-side-new{display:flex;align-items:center;gap:7px;width:100%;background:var(--accent-dim);
  border:1px solid rgba(155,114,232,.3);border-radius:9px;padding:8px 11px;font:inherit;font-size:12.5px;
  font-weight:600;color:var(--accent-bright);cursor:pointer;transition:background .2s}
.sage-side-new:hover{background:rgba(155,114,232,.22)}
.sage-side-label{font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--muted);
  text-transform:uppercase;margin:13px 4px 6px}
.sage-side-empty{font-size:11.5px;color:var(--muted);padding:10px 4px;line-height:1.5}
.sage-thread{position:relative;display:block;padding:8px 24px 8px 10px;border-radius:8px;cursor:pointer;
  transition:background .15s}
.sage-thread:hover{background:var(--surface2)}
.sage-thread.active{background:var(--accent-dim)}
.sage-thread-title{display:block;font-size:12px;color:var(--text);letter-spacing:-.01em;line-height:1.35;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sage-thread-ts{display:block;font-size:9.5px;color:var(--muted);margin-top:2px}
.sage-thread-x{position:absolute;top:6px;right:5px;width:18px;height:18px;border:none;background:none;
  color:var(--muted);font-size:14px;line-height:1;cursor:pointer;border-radius:5px;opacity:0;transition:opacity .15s}
.sage-thread:hover .sage-thread-x{opacity:.8}
.sage-thread-x:hover{background:var(--surface3);color:var(--text)}
@media(max-width:820px){
  .sage-layout{grid-template-columns:1fr}
  .sage-side{position:static;max-height:170px;order:2}
}
.sage-hero-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 16px}
.sage-hero-bubble{background:var(--surface);border:1px solid rgba(167,139,250,.3);border-radius:16px;padding:18px 22px;font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.5;text-align:center;max-width:300px;box-shadow:0 0 32px rgba(124,92,191,.18);position:relative}
.sage-hero-bubble::after{content:'';position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);width:0;height:0;border:11px solid transparent;border-top-color:var(--surface);border-bottom:0}
.sage-hero-figure{position:relative;display:inline-flex;align-items:center;justify-content:center;width:176px;height:176px}
/* Ambient glow removed: flat, no pulsing purple aura around the Sage mark. */
.sage-glow-ring{display:none}
.sage-hero-byline{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}
/* Breakdown toggle */
.breakdown-toggle{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:11px 16px;color:var(--muted2);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;transition:all .15s;font-family:var(--font-body)}
.breakdown-toggle:hover{border-color:var(--accent-bright);color:var(--accent-bright)}
#breakdown-detail{display:none}
#breakdown-detail.open{display:block}

.ktc-strip{display:flex;align-items:center;gap:12px;background:var(--surface2);border-radius:var(--radius);padding:.75rem 1rem;margin-top:.875rem;flex-wrap:wrap}
.ktc-strip-label{font-size:11px;color:var(--muted);font-weight:500}
.ktc-strip-val{font-size:16px;font-weight:700;font-family:var(--font-head)}
.ktc-strip-detail{font-size:11px;color:var(--muted);margin-left:auto}

/* BREAKDOWN */
.breakdown-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.bd-card{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:1rem;box-shadow:0 6px 22px -12px rgba(124,92,191,.5);transition:border-color .16s,box-shadow .16s,transform .16s}
.bd-card:hover{transform:translateY(-1px);border-color:rgba(155,114,232,.4);box-shadow:0 9px 28px -10px rgba(124,92,191,.65)}
/* the whole verdict now speaks the "Calculate the read" language: dark galactic
   surface, lilac->cyan gradient accents, a soft purple glow. */
.verdict-panel{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border2);border-radius:14px;box-shadow:0 6px 22px -12px rgba(124,92,191,.5)}
.bd-label{font-size:11px;color:var(--muted);margin-bottom:4px;font-weight:500}
.bd-tooltip{font-size:10px;color:var(--accent-bright);cursor:help;margin-left:4px}
.bd-val{font-family:var(--font-body);font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.15;margin-bottom:5px}
.bd-desc{font-size:11px;color:var(--muted);line-height:1.4}

/* SIGNALS */
.signals-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem;margin-bottom:12px}
.signal-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:.875rem}
.sig-row{margin-bottom:.875rem}
.sig-row:last-child{margin-bottom:0}
.sig-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.sig-name{font-size:12px;font-weight:500;color:var(--text)}
.sig-tooltip{font-size:11px;color:var(--muted);margin-left:4px}
.sig-pct{font-size:12px;font-weight:700;font-family:var(--font-head)}
.sig-bar{height:5px;background:var(--surface2);border-radius:3px;overflow:hidden}
.sig-fill{height:100%;border-radius:3px;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

.result-actions{display:flex;gap:8px;flex-wrap:wrap}
.action-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);color:var(--muted2);font-size:12px;font-weight:500;padding:8px 14px;cursor:pointer;transition:all .15s}
.action-btn:hover{border-color:var(--accent-bright);color:var(--accent-bright)}

/* HISTORY */
.history-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:all .15s}
.history-item:hover{border-color:var(--border2)}
.h-pct{font-family:var(--font-head);font-size:22px;font-weight:700;min-width:48px}
.h-trade{font-size:13px;font-weight:500;color:var(--text)}
.h-meta{font-size:11px;color:var(--muted);margin-top:2px}
.h-time{font-size:11px;color:var(--muted);margin-left:auto;flex-shrink:0}
.empty-state{text-align:center;padding:2rem;font-size:13px;color:var(--muted)}

/* LEADERBOARD */
.lb-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.lb-rank{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--muted);min-width:28px}
.lb-info{flex:1}
.lb-trade{font-size:13px;font-weight:500;color:var(--text)}
.lb-meta{font-size:11px;color:var(--muted);margin-top:2px}
.lb-ktc{font-size:13px;font-weight:700;font-family:var(--font-head);flex-shrink:0}
.lb-win{color:var(--green)}.lb-lose{color:var(--red)}

/* STOCK MARKET */
.mkt-overview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
.mkt-stat{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.mkt-stat-val{font-size:20px;font-weight:700;font-family:var(--font-head);color:var(--text);line-height:1;margin-bottom:2px}
.mkt-stat-lbl{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.mkt-panels{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.mkt-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px}
.mkt-panel-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.mkt-mover{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border)}
.mkt-mover:last-child{border-bottom:none}
.mkt-mover-img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--surface3);flex-shrink:0}
.mkt-mover-name{flex:1;font-size:13px;font-weight:600;color:var(--text);line-height:1.2}
.mkt-mover-pos{font-size:9px;font-weight:700;color:var(--muted);margin-top:1px}
.mkt-mover-pct{font-size:13px;font-weight:700;flex-shrink:0}
.mkt-up{color:#22c55e}.mkt-down{color:#ef4444}
.mkt-chart-area{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px}
.mkt-chart-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}
.mkt-chart-name{font-size:18px;font-weight:700;color:var(--text)}
.mkt-chart-val{font-size:28px;font-weight:700;font-family:var(--font-head);line-height:1}
.mkt-chart-chg{font-size:13px;font-weight:600;margin-top:2px}
.mkt-search-row{display:flex;gap:8px;margin-bottom:14px}
.mkt-empty{text-align:center;padding:48px 0;color:var(--muted);font-size:13px}

/* HOW IT WORKS */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:1.5rem}
.how-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem}
.how-num{font-family:var(--font-head);font-size:48px;font-weight:700;color:var(--border2);line-height:1;margin-bottom:.75rem}
.how-icon{font-size:24px;margin-bottom:.75rem}
.how-title{font-size:15px;font-weight:600;color:var(--text);margin-bottom:.5rem}
.how-desc{font-size:13px;color:var(--muted2);line-height:1.6}

/* TABS */
.tab-bar{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:1.25rem}
.tab{font-size:13px;font-weight:500;padding:8px 16px;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all .15s;margin-bottom:-1px}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent-bright);border-bottom-color:var(--accent-bright)}
.tab-content{display:none}
.tab-content.active{display:block}
.screen{display:none}
.screen.active{display:block}
.screen-nav{cursor:pointer;padding:6px 14px;border-radius:20px;transition:all .15s}
.screen-nav.active{background:var(--accent-dim);color:var(--accent-bright)}
.inner-tab-bar{display:flex;gap:4px;padding:12px 0 4px;border-bottom:1px solid var(--border);margin-bottom:16px;overflow-x:auto}
/* Desktop: the tab bar hugs its tabs and sits left, instead of a segmented pill
   stretched across the whole column with dead space on the right. Mobile keeps
   the full-width scrolling row (handled elsewhere), so this only kicks in wide. */
@media(min-width:768px){.inner-tab-bar{width:-moz-fit-content;width:fit-content;max-width:100%;overflow-x:visible}}
.inner-tab{font-size:13px;font-weight:600;padding:7px 16px;border-radius:100px;cursor:pointer;color:var(--muted2);white-space:nowrap;transition:all .2s;border:1px solid var(--border);background:var(--surface2)}
.inner-tab:hover{color:var(--text);background:rgba(255,255,255,.04)}
.inner-tab.active{background:rgba(155,114,232,.15);color:var(--accent-bright);border-color:rgba(155,114,232,.25);box-shadow:0 0 12px rgba(155,114,232,.1)}

/* PITCH SECTION */
.pitch-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:12px}
.pitch-header{margin-bottom:1rem}
.pitch-title{font-size:15px;font-weight:700;color:var(--text)}
.pitch-sub{font-size:12px;color:var(--muted);margin-top:1px}
.pitch-angle{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);padding:.875rem 1rem;margin-bottom:8px}
.pitch-angle-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:5px;display:flex;align-items:center;gap:6px}
.pitch-angle-label .angle-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pitch-angle-text{font-size:13px;color:var(--muted2);line-height:1.6}
.pitch-angle-text strong{color:var(--text);font-weight:500}
.pitch-avoid{background:var(--red-dim);border:1px solid rgba(239,68,68,.2);border-radius:var(--radius);padding:.875rem 1rem;margin-top:8px}
.pitch-avoid-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.pitch-avoid-text{font-size:13px;color:var(--muted2);line-height:1.6}
.pitch-message{background:var(--surface2);border:1px solid rgba(155,114,232,.25);border-radius:var(--radius);padding:.875rem 1rem;margin-top:12px;position:relative}
.pitch-message-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-bright);margin-bottom:6px}
.pitch-message-text{font-size:13px;color:var(--muted2);line-height:1.7;font-style:italic}
.pitch-copy-btn{position:absolute;top:.75rem;right:.75rem;background:var(--surface3);border:1px solid var(--border2);border-radius:6px;color:var(--muted);font-size:11px;font-weight:500;padding:4px 10px;cursor:pointer;transition:all .15s}
.pitch-copy-btn:hover{color:var(--accent-bright);border-color:var(--accent-bright)}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.7);align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-lg);padding:1.5rem;max-width:460px;width:90%;animation:qslide .2s ease}
.modal-title{font-family:var(--font-head);font-size:20px;font-weight:700;margin-bottom:.75rem}
.modal-url{background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 14px;font-size:11px;color:var(--accent-bright);word-break:break-all;margin-bottom:.875rem;cursor:pointer;line-height:1.6}
.modal-copy-confirm{font-size:12px;color:var(--green);margin-bottom:.875rem;display:none}

/* FOOTER */
/* The footer is one more section, so it takes the section step rather than its
   own 3rem, and its rule goes neutral: a purple hairline was the last tinted
   edge left on the page. */
footer{padding:var(--sp-section) 1.5rem 2.5rem;border-top:1px solid var(--border);text-align:center;margin-top:0;background:none}
.footer-logo{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--text);margin-bottom:.375rem}
.footer-logo span{color:var(--accent-bright)}
.footer-sub{font-size:12px;color:var(--muted)}
.footer-legal{margin-top:16px;font-size:11px;color:var(--muted)}

/* TAB BAR OVERFLOW */
.tab-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.tab-bar::-webkit-scrollbar{display:none}

/* ROSTER GRADE */
.grade-letter{font-family:var(--font-head);font-size:64px;font-weight:700;line-height:1;margin-bottom:4px}
.grade-A{color:#22c55e}.grade-B{color:#fbbf24}.grade-C{color:#f59e0b}.grade-D{color:#ef4444}.grade-F{color:#dc2626}
.pos-grade-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.pos-grade-row:last-child{border-bottom:none}

/* BUY/SELL PILLS */
.signal-pill{display:inline-block;font-size:9.5px;font-weight:800;padding:4px 11px;border-radius:100px;letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent}
.pill-buy{background:rgba(34,197,94,.16);color:var(--green);border-color:rgba(34,197,94,.42)}
.pill-sell{background:rgba(239,68,68,.14);color:var(--red);border-color:rgba(239,68,68,.4)}
.pill-watch{background:rgba(245,158,11,.14);color:var(--yellow);border-color:rgba(245,158,11,.4)}
/* Premium buy/sell rows: each alert is its own subtle card, not a flat list item */
.bs-row{background:var(--surface2);border:1px solid var(--border);border-radius:11px;padding:10px 12px;margin-bottom:7px;transition:border-color .15s,transform .15s}
.bs-row:hover{border-color:rgba(167,139,250,.4);transform:translateY(-1px)}

/* DYNASTY 101 */
.d101-section{margin-bottom:1.5rem}
.d101-term{font-size:14px;font-weight:700;color:var(--accent-bright);margin-bottom:3px}
.d101-def{font-size:13px;color:var(--muted2);line-height:1.6}
.d101-divider{height:1px;background:var(--border);margin:1.25rem 0}


/* LIGHT THEME */
[data-theme="light"]{
  --bg:#f6f6f7;--surface:#ffffff;--surface2:#f1f1f3;--surface3:#e6e6e9;
  --text:#111113;--muted:#6c6c76;--muted2:#45454e;
  --border:rgba(0,0,0,.10);--border2:rgba(0,0,0,.18);
  --accent-dim:rgba(155,114,232,.10);
}
[data-theme="light"] .nav{background:rgba(255,255,255,.92);border-bottom-color:rgba(23,26,46,.08)}
[data-theme="light"] #ticker-bar{background:rgba(255,255,255,.92)}
[data-theme="light"] .hero{background:var(--bg)}
[data-theme="light"] .btn-outline{background:rgba(23,26,46,.04);color:var(--text);border-color:rgba(23,26,46,.15)}
.theme-toggle{background:none;border:1px solid var(--border);border-radius:100px;padding:5px 12px;font-size:11px;font-weight:600;color:var(--muted2);cursor:pointer;margin-left:8px;white-space:nowrap;transition:border-color .18s,color .18s,transform .18s,box-shadow .18s}
.theme-toggle:hover{border-color:rgba(155,114,232,.45);color:var(--text);transform:translateY(-1px);box-shadow:0 0 16px rgba(155,114,232,.14)}
.theme-toggle:active{transform:translateY(0)}
/* icon variant: search / alerts / theme are quiet 30px circles */
.theme-toggle.icon{width:30px;height:30px;padding:0;margin-left:6px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.theme-toggle.icon svg{display:block}
/* nav search: collapsed to the icon until opened */
.nav-search-input{background:var(--surface2);border:1px solid var(--border);border-radius:100px;font-size:12px;color:var(--text);outline:none;width:0;opacity:0;padding:6px 0;border-width:0;margin-left:0;transition:width .28s cubic-bezier(.16,1,.3,1),opacity .2s ease,padding .28s cubic-bezier(.16,1,.3,1)}
#nav-search-wrap.open .nav-search-input{width:168px;opacity:1;padding:6px 14px;border-width:1px;margin-left:6px}
.nav-search-input:focus{border-color:rgba(155,114,232,.4)}

/* The page background is flat. A tinted, animated wash used to sit behind
   every screen at z-index:-1, which is why no surface ever read as the neutral
   grey its token declared. */
/* Plain text wordmark. No gradient, no background-clip:text (which would paint
   the text transparent and leave it invisible once the gradient fill is gone). */
.tm-wordmark{font-family:var(--font-head);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--text)}
@keyframes shimmer{to{background-position:200% center}}
/* Shared loading skeleton. Replaces bare grey "Loading..." text, which read as an
   unfinished screen on phones. A shimmering block with a real min-height holds the
   layout while data arrives. */
.tm-skel{background:linear-gradient(100deg,var(--surface2) 28%,var(--surface3) 48%,var(--surface2) 68%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite;border-radius:10px}
@media(prefers-reduced-motion:reduce){.tm-skel{animation:none}}
.tm-skel-feed{display:flex;flex-direction:column;gap:10px;padding:6px 0;min-height:180px}
.tm-skel-feed .tm-skel{height:92px}
.tm-skel-row{display:flex;gap:10px;padding:6px 0;min-height:160px}
.tm-skel-row .tm-skel{flex:0 0 auto;width:290px;height:150px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.vs-arena{display:flex;align-items:center;justify-content:center;gap:26px;padding:20px 0 26px}
.vs-bubble{position:relative;width:120px;height:120px;border-radius:50%;flex-shrink:0}
.vs-bubble img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--border2);background:var(--surface2)}
.vs-bubble .vs-label{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:700;white-space:nowrap;color:var(--muted)}
.vs-vs{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--muted);letter-spacing:.05em}
.vs-left.fight{animation:lungeL .55s ease-in-out 2}
.vs-right.fight{animation:lungeR .55s ease-in-out 2}
@keyframes lungeL{50%{transform:translateX(26px) rotate(6deg)}}
@keyframes lungeR{50%{transform:translateX(-26px) rotate(-6deg)}}
.vs-bubble.winner img{border-color:var(--green);box-shadow:0 0 34px rgba(34,197,94,.55);animation:winPulse 1.4s ease-in-out 3}
.vs-bubble.loser{animation:loseShake .5s ease-in-out 1 forwards}
.vs-bubble.loser img{border-color:var(--red);filter:grayscale(.85) brightness(.65)}
@keyframes winPulse{50%{box-shadow:0 0 50px rgba(34,197,94,.8)}}
@keyframes loseShake{25%{transform:rotate(-9deg)}75%{transform:rotate(7deg)}100%{transform:rotate(4deg) translateY(6px)}}
.vs-crack{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 55% 40%,transparent 42%,rgba(239,68,68,.35) 46%,transparent 52%);opacity:0}
.vs-bubble.loser .vs-crack{opacity:1}
.vs-flash{position:fixed;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.35),transparent 55%);pointer-events:none;z-index:999;opacity:0;animation:vsflash .4s ease-out forwards}
@keyframes vsflash{0%{opacity:1}100%{opacity:0}}
.vs-shake{animation:vsshake .45s ease-in-out}
@keyframes vsshake{20%{transform:translate(-7px,3px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-2px)}}
.vs-shard{position:absolute;width:12px;height:12px;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.9;animation:shardfly .9s ease-out forwards;pointer-events:none}
@keyframes shardfly{to{transform:translate(var(--sx),var(--sy)) rotate(var(--sr));opacity:0}}
.vs-bubble.winner::before{content:'';position:absolute;top:-26px;left:50%;width:30px;height:22px;transform:translateX(-50%);background:#f5a623;clip-path:polygon(0% 100%,12% 32%,30% 62%,50% 12%,70% 62%,88% 32%,100% 100%);filter:drop-shadow(0 2px 4px rgba(0,0,0,.4));animation:winpop .5s cubic-bezier(.2,2,.4,1) both;z-index:3}
.vs-bubble.winner::after{content:'';position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,210,87,.5);animation:crownRing 1.6s ease-out infinite}
@keyframes crownRing{to{box-shadow:0 0 0 14px rgba(255,210,87,0)}}
@keyframes winpop{0%{transform:translateX(-50%) scale(0)}100%{transform:translateX(-50%) scale(1)}}
.vs-mini{width:64px!important;height:64px!important}
.news-card{display:flex;gap:12px;background:var(--surface2);border:1px solid var(--border);border-radius:12px;overflow:hidden;text-decoration:none;transition:border-color .15s,transform .15s}
.news-card:hover{border-color:rgba(155,114,232,.45);transform:translateY(-2px)}
.news-card img{width:120px;height:82px;object-fit:cover;flex-shrink:0}
.news-card .nc-body{padding:10px 12px 10px 0;min-width:0}
.news-card .nc-h{font-size:13px;font-weight:700;color:var(--text);line-height:1.4;margin-bottom:3px}
.news-card .nc-d{font-size:11px;color:var(--muted);line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}


/* BREAKDOWN TYPOGRAPHY */
#verdict-body{font-size:14px;line-height:1.75;color:var(--muted2)}
#verdict-body strong{color:var(--text)}
.breakdown-row{gap:10px}
.breakdown-row>div{padding:14px!important}
.signal-title{font-family:var(--font-head);font-size:12px!important;font-weight:700;letter-spacing:.06em}
.pitch-angle-text,.pitch-avoid div{font-size:14px!important;line-height:1.75!important}
.pitch-message-text{font-size:14px!important;line-height:1.7!important}
.idea-reason{font-size:13px;line-height:1.7}
.d101-def{font-size:14px;line-height:1.75}
.comm-op-text{font-size:13px}

/* LIFE & POLISH */
.card{transition:border-color .2s,box-shadow .2s,transform .2s}
.card:hover{border-color:rgba(155,114,232,.22);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(155,114,232,.08) inset}
.idea-item,.comm-card,.lb-row{transition:border-color .15s,background .15s}
.lb-row:hover{border-color:rgba(155,114,232,.3)}
.comm-card:hover{border-color:rgba(155,114,232,.3)}
.inner-tab-bar{position:relative}
.btn-sm{transition:all .15s}
.btn-sm:hover{border-color:rgba(155,114,232,.4);color:var(--text)}
.tm-input{transition:border-color .15s,box-shadow .15s}
.tm-input:focus{box-shadow:0 0 0 3px rgba(155,114,232,.12)}
::selection{background:rgba(155,114,232,.35)}

/* RESPONSIVE */
/* Nav collapses to the compact scrollable form below the width the full row
   actually needs (slimmed bar: 7 tabs + icon utilities, ~1120px intrinsic). */
@media(max-width:1200px){
  .nav{padding:0 .75rem;gap:.6rem}
  .nav-logo{font-size:15px}
  .nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:0}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-item-btn{padding:6px 8px;font-size:12px}
  .nav-item-btn .caret{display:none}
}
@media(max-width:768px){
  #nav-search-wrap{display:none}
  .theme-toggle{display:none}
  #ticker-bar{top:60px}
  .vs-bubble{width:84px;height:84px}
  .vs-arena{gap:14px}
  .pm-card{max-width:96vw;max-height:92vh}
  .news-card img{width:90px;height:70px}
  .mkt-panels{grid-template-columns:1fr}
  .mkt-overview{grid-template-columns:1fr 1fr}
  h1{font-size:clamp(30px,9vw,44px)}
  .comm-give-get{grid-template-columns:1fr;gap:4px}
  .comm-arrow{transform:rotate(90deg)}
  .analyzer-grid{grid-template-columns:1fr}
  .breakdown-row{grid-template-columns:1fr 1fr}
  .how-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .q-opts{grid-template-columns:1fr}
  .verdict-top{flex-direction:column}
  .idea-players{grid-template-columns:1fr;gap:8px}
  .idea-arrow{display:none}
  .idea-item{padding:1rem 1rem}
  .trade-sides{grid-template-columns:1fr}
  .trade-divider{flex-direction:row;padding:.75rem 0;gap:10px}
  .trade-divider-line{flex:1;height:1px;width:auto;min-height:auto}
  .hero-layout{grid-template-columns:1fr}
  .hero-players{grid-template-columns:repeat(3,1fr);gap:8px}
  .hero-player-card{padding:10px 6px}
  .hero-player-avatar{width:48px;height:48px}
  .hero-player-name{font-size:10px}
  .stats-bar{flex-wrap:wrap}
  .stats-bar-item{min-width:50%;border-bottom:1px solid var(--border)}
  .feat-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .demo-trade-grid{grid-template-columns:1fr;gap:12px}
  .demo-arrow{display:none}
  .demo-verdict{flex-direction:column;gap:8px;align-items:flex-start}
}

/* Analyst Corner: single column on small screens, contain X embed width */
#analyst-corner .twitter-tweet{margin:0 auto!important;max-width:100%!important}
#analyst-corner iframe{max-width:100%!important}
@media(max-width:640px){#analyst-corner{column-count:1!important}}

/* Smaller crown for the mini bubbles in multi-asset battles */
.vs-bubble.vs-mini.winner::before{width:22px;height:16px;top:-19px}

/* Trade Ideas: never clip the reasoning or player text (grid blowout fix) */
.idea-players>div{min-width:0}
.idea-player-name,.idea-player-sub{overflow-wrap:anywhere}
.idea-reason{overflow-wrap:break-word;white-space:normal}
.idea-item{overflow:visible}

/* Verdict: collapsed Sage detail */
.sage-more-toggle{background:none;border:none;color:var(--accent-bright);font-size:11px;font-weight:700;cursor:pointer;padding:4px 0;margin-top:8px;display:inline-flex;align-items:center;gap:5px;font-family:var(--font-body);letter-spacing:.02em}
.sage-more-toggle:hover{text-decoration:underline}
#sage-more-detail{display:none}
#sage-more-detail.open{display:block}

/* Home page: compact analyst posts strip */
#home-analyst-row{column-count:2;column-gap:10px;margin-top:14px}
@media(max-width:640px){#home-analyst-row{column-count:1}}
#home-analyst-row .twitter-tweet{margin:0 auto!important;max-width:100%!important}
#home-analyst-row iframe{max-width:100%!important}

/* League standings table */
.stand-table{width:100%;border-collapse:collapse;font-size:12px}
.stand-table th{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:6px 10px;border-bottom:1px solid var(--border)}
.stand-table td{padding:8px 10px;border-bottom:1px solid var(--border);color:var(--muted2);white-space:nowrap}
.stand-table tr:last-child td{border-bottom:none}
.stand-table .st-team{color:var(--text);font-weight:600;white-space:normal;min-width:120px}
.stand-table .st-num{font-variant-numeric:tabular-nums}
.stand-wrap{overflow-x:auto;margin-bottom:20px;border:1px solid var(--border);border-radius:var(--radius)}
.stand-table tr.st-me td{background:rgba(155,114,232,.08)}

/* Rank 'Em: green-light flash on the picked card */
.rankem-card:hover{border-color:var(--accent-bright)!important;transform:translateY(-2px)}
.rankem-card.rankem-picked{border-color:#22c55e!important;background:rgba(34,197,94,.10)!important;animation:rankPick .5s ease-out both}
.rankem-card.rankem-picked img{border-color:#22c55e!important;box-shadow:0 0 24px rgba(34,197,94,.55)}
@keyframes rankPick{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}100%{box-shadow:0 0 0 16px rgba(34,197,94,0)}}

/* Sleeper-style mock draft board */
/* Stacked-calibrated board: landscape cells (wider than tall), hairline gaps,
   pick number pinned top-right, flat surfaces. Team columns carry a small
   avatar + name. Density and proportion match the reference; the palette and
   the single-accent rule stay ours. */
.mdb-wrap{overflow:auto;max-height:560px;margin:0 -8px;border:1px solid var(--border);border-radius:12px;background:var(--surface)}
.mdb-grid{display:grid;gap:3px;padding:8px;min-width:0}
.mdb-corner{position:sticky;top:0;z-index:2;background:var(--surface)}
.mdb-head{position:sticky;top:0;z-index:2;background:var(--surface2);font-size:11px;font-weight:700;color:var(--muted2);padding:8px 6px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.mdb-head .mdb-teamname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdb-avatar{flex:none;width:18px;height:18px;border-radius:50%;background:var(--surface3);display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:var(--muted)}
.mdb-head.mdb-me{background:var(--accent-dim);color:var(--accent-bright)}
.mdb-head.mdb-me .mdb-avatar{background:rgba(155,114,232,.25);color:var(--accent-bright)}
.mdb-round{font-size:10px;font-weight:800;color:var(--muted);display:flex;align-items:center;justify-content:center;font-family:var(--font-head)}
.mdb-cell{border-radius:6px;padding:7px 9px 8px;min-height:64px;font-size:11px;position:relative;min-width:0;text-align:left}
.mdb-cell.mdb-empty{background:var(--surface2);opacity:.45;border-left:3px solid transparent}
.mdb-cell.mdb-empty.mdb-mecol{opacity:.7;background:var(--accent-dim)}
.mdb-cell.mdb-onclock{opacity:1;background:var(--accent-dim);border:1px dashed rgba(155,114,232,.6);display:flex;align-items:center;justify-content:center}
.mdb-cell.mdb-onclock span{font-size:8px;font-weight:800;color:var(--accent-bright);letter-spacing:.06em;animation:pulse 1.2s ease-in-out infinite}
.mdb-pickno{position:absolute;top:6px;right:8px;font-size:9px;font-weight:700;color:var(--muted)}
.mdb-name{font-weight:700;color:var(--text);font-size:11.5px;line-height:1.25;white-space:normal;overflow:hidden;max-height:2.5em;padding-right:22px}
.mdb-sub{font-size:9px;font-weight:700;margin-top:3px;display:flex;align-items:center;gap:4px;justify-content:flex-start}
/* Your picks: a quiet outline, not a second accent - the YOU header and the
   on-clock cell already mark the column, and purple stays on the active pick */
.mdb-cell.mdb-minepick{outline:1px solid rgba(155,114,232,.3)}
.mdb-cell.mdb-latest{animation:mdbPop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes mdbPop{0%{transform:scale(.7);opacity:0}100%{transform:scale(1);opacity:1}}
.md-cols{display:block}
@media(max-width:820px){.md-cols{grid-template-columns:1fr}}

/* Bigger, clickable trade-feed chips */
.comm-player-chip.comm-chip-lg{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:100px;background:var(--surface2);border:1px solid var(--border);font-size:12.5px;font-weight:600;color:var(--text);margin:3px;transition:border-color .15s,transform .15s}
.comm-player-chip.comm-chip-lg:hover{border-color:var(--accent-bright);transform:translateY(-1px)}

/* ── LIGHT MODE polish ─────────────────────────────────────────── */
[data-theme="light"]{
  --green-dim:rgba(22,163,74,.25);--red-dim:rgba(220,38,38,.25);
}
[data-theme="light"] .card,[data-theme="light"] .ideas-card,[data-theme="light"] .comm-card,[data-theme="light"] .mkt-panel{box-shadow:0 1px 3px rgba(23,26,46,.06),0 8px 24px rgba(23,26,46,.05)}
[data-theme="light"] .news-card{background:var(--surface);box-shadow:0 1px 3px rgba(23,26,46,.06)}
[data-theme="light"] .btn-sm{border-color:rgba(23,26,46,.16);color:var(--muted2)}
[data-theme="light"] .btn-sm:hover{border-color:rgba(124,92,191,.5);color:var(--text)}
[data-theme="light"] .inner-tab{color:var(--muted2)}
[data-theme="light"] .inner-tab.active{color:#5b21b6}
[data-theme="light"] .q-opt{background:var(--surface2)}
[data-theme="light"] .q-opt:hover{background:#ece9f8}
[data-theme="light"] .verdict-headline{color:var(--text)}
[data-theme="light"] .ticker-item{color:var(--muted2)}
[data-theme="light"] .empty-state{color:var(--muted)}
[data-theme="light"] .mkt-stat{background:var(--surface);border-color:var(--border)}
[data-theme="light"] .stand-table th{background:var(--surface2)}
[data-theme="light"] .mdb-head{background:#ece9f8}
[data-theme="light"] .mdb-cell.mdb-empty{background:#f0f0f8}
[data-theme="light"] .comm-player-chip.comm-chip-lg{background:var(--surface);box-shadow:0 1px 2px rgba(23,26,46,.06)}
[data-theme="light"] .sage-wrap svg ellipse[fill^="rgba(91,33,182"]{opacity:.5}
[data-theme="light"] .hero .verdict-headline,[data-theme="light"] .hero h1{color:var(--text)}
[data-theme="light"] .breakdown-toggle{background:var(--surface)}
[data-theme="light"] .idea-use-btn{box-shadow:0 4px 14px rgba(107,72,196,.28),inset 0 1px 0 rgba(255,255,255,.3)}
[data-theme="light"] .analyst-skel{background:#ece9f8}
[data-theme="light"] .nav-item-btn{color:var(--muted2)}
[data-theme="light"] .nav-item-btn.active{color:#5b21b6;background:rgba(124,92,191,.10)}
[data-theme="light"] .tm-input{background:#fff;border-color:rgba(23,26,46,.16)}
[data-theme="light"] .tm-input:focus{border-color:rgba(124,92,191,.55)}
[data-theme="light"] .opp-select{background:#fff;border-color:rgba(23,26,46,.16);color:var(--text)}

/* Per-side clear button in the trade builder */
.side-clear-btn{background:none;border:1px solid var(--border);border-radius:100px;color:var(--muted);font-size:10px;font-weight:700;padding:2px 10px;cursor:pointer;transition:all .15s;font-family:var(--font-body);text-transform:uppercase;letter-spacing:.05em}
.side-clear-btn:hover{border-color:var(--red);color:var(--red)}

/* Native tweet card: analyst posts with on-site video playback */
.tm-tweet-card{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
[data-theme="light"] .tm-tweet-card{background:var(--surface);box-shadow:0 1px 3px rgba(23,26,46,.06)}

/* Auto-scrolling rails (News + Analyst Corner): drift like the ticker, grabbable by hand */
.auto-rail{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:4px;cursor:grab}
.auto-rail::-webkit-scrollbar{display:none}
.auto-rail.dragging{cursor:grabbing;scroll-behavior:auto}
.auto-rail>*{flex:0 0 auto}
/* Every headline card is an identical fixed box: same width, same height, image
   band on top, body flexes to fill so the source footer always pins to the
   bottom regardless of how long the headline or blurb runs. */
#news-grid.auto-rail .news-card{width:300px;height:298px;flex-direction:column;gap:0}
#news-grid.auto-rail .news-card img,#news-grid.auto-rail .news-card .nc-noimg{width:100%;height:150px;object-fit:cover;flex:0 0 150px}
#news-grid.auto-rail .news-card .nc-body{padding:12px 14px 14px;display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
#news-grid.auto-rail .news-card .nc-h{-webkit-line-clamp:2}
#news-grid.auto-rail .news-card .nc-d{-webkit-line-clamp:3;flex:1 1 auto}
#news-grid.auto-rail .news-card .nc-body>div:last-child{flex:0 0 auto}
#analyst-corner.auto-rail .analyst-slot{width:340px;max-width:85vw;margin-bottom:0}
#analyst-corner.auto-rail .twitter-tweet{margin:0!important}
/* Auto-pulled analyst "take" cards - uniform size so the rail reads as a set */
.analyst-card{display:flex;flex-direction:column;width:300px;max-width:85vw;height:152px;flex:0 0 auto;background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 15px;text-decoration:none;transition:border-color .15s,transform .15s}
.analyst-card:hover{border-color:rgba(155,114,232,.45);transform:translateY(-2px)}
.analyst-card .ac-src{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;margin-bottom:9px}
.analyst-card .ac-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.analyst-card .ac-h{font-size:13.5px;font-weight:700;color:var(--text);line-height:1.38;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.analyst-card .ac-d{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;flex:1}
.analyst-card .ac-f{font-size:10px;font-weight:700;color:var(--muted2);margin-top:10px}
[data-theme="light"] .analyst-card{background:var(--surface);box-shadow:0 1px 3px rgba(23,26,46,.06)}
/* News card placeholder when a story has no image - keeps the grid symmetric */
.nc-noimg{width:100%;height:140px;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff;background:var(--surface3)}
@media(max-width:640px){#news-grid.auto-rail .news-card{width:265px;height:280px}#news-grid.auto-rail .news-card img,#news-grid.auto-rail .news-card .nc-noimg{height:135px;flex-basis:135px}#analyst-corner.auto-rail .analyst-slot{width:300px}.analyst-card{width:265px;height:150px}}

/* Sage AI chat */
.sage-chat-log{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow-y:auto;padding:4px 2px}
.sage-msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:break-word}
.sage-msg.user{align-self:flex-end;background:var(--accent-dim);border:1px solid rgba(155,114,232,.3);color:var(--text);border-bottom-right-radius:4px}
.sage-msg.sage{align-self:flex-start;background:var(--surface2);border:1px solid var(--border);color:var(--muted2);border-bottom-left-radius:4px}
/* Nav chips Sage can drop into a reply to send you to a tool */
.sage-nav-chip{font-size:12.5px;font-weight:600;color:var(--accent-bright);background:rgba(155,114,232,.1);border:1px solid rgba(155,114,232,.32);border-radius:100px;padding:8px 15px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:var(--font-body);white-space:nowrap}
.sage-nav-chip:hover{background:var(--accent-bright);color:#fff;border-color:var(--accent-bright)}
.sage-msg.sage .sage-msg-tag{font-size:9px;font-weight:800;color:var(--accent-bright);text-transform:uppercase;letter-spacing:.08em;display:block;margin-bottom:3px}
.sage-typing{align-self:flex-start;display:inline-flex;gap:4px;padding:12px 16px;background:var(--surface2);border:1px solid var(--border);border-radius:14px;border-bottom-left-radius:4px}
.sage-typing span{width:6px;height:6px;border-radius:50%;background:var(--accent-bright);animation:sageDot 1.2s ease-in-out infinite}
.sage-typing span:nth-child(2){animation-delay:.15s}
.sage-typing span:nth-child(3){animation-delay:.3s}
@keyframes sageDot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* Mock draft position filter chips */
.md-pos-chip{background:var(--surface2);border:1px solid var(--border);border-radius:100px;color:var(--muted);font-size:10px;font-weight:700;padding:5px 11px;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.md-pos-chip.active{background:var(--accent-dim);border-color:rgba(155,114,232,.5);color:var(--accent-bright)}
.md-pos-chip:hover{border-color:var(--accent-bright)}

/* Sage suggestion chips */
.sage-sugg{background:rgba(155,114,232,.13);border:1px solid rgba(155,114,232,.34);border-radius:100px;color:var(--muted2);font-size:11.5px;font-weight:600;padding:8px 15px;cursor:pointer;transition:transform .16s,border-color .16s,box-shadow .16s,color .16s;font-family:var(--font-body)}
.sage-sugg:hover{border-color:var(--accent-bright);color:var(--text);transform:translateY(-1px);box-shadow:0 5px 16px -6px rgba(124,92,191,.6)}
/* Sage page: premium wash behind the greeting + floating avatar glow */
#screen-sage #sage-chat-card{background:var(--surface)}
#sage-greeting svg,.sage-hero-svg{animation:sageFloat 5.5s ease-in-out infinite}
#sage-greeting{position:relative}
/* Ambient glow removed behind the greeting: cleaner, no purple blur halo. */
#sage-greeting::before{content:none}
#sage-greeting>*{position:relative;z-index:1}
@keyframes sageFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){#sage-greeting svg,.sage-hero-svg{animation:none}}
/* Capability chips under the greeting - signal depth, read as premium */
.sage-caps{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.sage-cap{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;color:var(--muted2);background:var(--surface2);border:1px solid var(--border);border-radius:100px;padding:6px 13px 6px 11px}
.sage-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent-bright);flex:none;box-shadow:0 0 6px rgba(167,139,250,.7)}
.sage-cap b{color:var(--text);font-weight:700}
/* Slow aurora drift behind the Sage card + a glowing gradient send button */
#screen-sage #sage-chat-card{position:relative;overflow:hidden}
#screen-sage #sage-chat-card::before{content:"";position:absolute;top:-40%;left:-20%;width:140%;height:120%;background:none;pointer-events:none;z-index:0}
#screen-sage #sage-chat-card>*{position:relative;z-index:1}
@keyframes sageAurora{0%{transform:translate(0,0)}50%{transform:translate(6%,3%)}100%{transform:translate(-4%,5%)}}
.sage-composer{box-shadow:0 8px 30px -14px rgba(124,92,191,.5)}
.sage-composer button:not(:disabled){background:#9b72e8!important;box-shadow:0 4px 14px -4px rgba(107,72,196,.7)}
@media(prefers-reduced-motion:reduce){#screen-sage #sage-chat-card::before{animation:none}}
/* Solo mock draft: premium strategy cards + nicer selects within the setup */
.md-strat-card{cursor:pointer;padding:12px 13px;border-radius:12px;border:1px solid var(--border);background:var(--surface2);transition:transform .15s,border-color .15s,box-shadow .15s}
.md-strat-card:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.45);box-shadow:0 8px 22px -12px rgba(124,92,191,.55)}
.md-strat-card.on{border-color:rgba(167,139,250,.6);background:var(--accent-dim);box-shadow:0 6px 20px -10px rgba(124,92,191,.6)}
#md-setup .opp-select{background:var(--surface);border-color:var(--border2);border-radius:10px;font-weight:600;transition:border-color .15s}
#md-setup .opp-select:focus{border-color:var(--accent-bright)}

/* Trade alerts dropdown */
#alerts-wrap .ac-dropdown{display:none;position:absolute;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border2);border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.4);z-index:200}
#alerts-wrap.open .ac-dropdown{display:block}

/* Post-analysis readability: bigger, clearer verdict text */
.verdict-body{font-size:14.5px!important;line-height:1.7!important}
.verdict-body>div{font-size:13px!important}
#sage-more-detail>div{font-size:13px!important;line-height:1.65!important}
.sage-more-toggle{font-size:12.5px}
#opp-perception-text{font-size:13.5px!important}
#opp-perception>span:first-child{font-size:11px!important}
#balance-label{font-size:13.5px!important;font-weight:700}
#you-give-label,#you-get-label{font-size:12.5px!important}
.ktc-strip-detail{font-size:12.5px!important}
.bd-val{font-size:14px!important}
.bd-desc{font-size:12.5px!important;line-height:1.6!important}
.bd-label{font-size:11px!important}
#scenario-best,#scenario-worst{font-size:13px!important}
.pitch-sub{font-size:13px!important}
#pitch-message-text{font-size:13.5px!important;line-height:1.7!important}
/* Phones: the verdict's multi-column grids stack so cards get room to breathe
   instead of being crushed into 3 narrow columns. */
@media(max-width:640px){
  .fit-grid{grid-template-columns:1fr!important}
  #scenarios-card{grid-template-columns:1fr!important}
  .learn-2col{grid-template-columns:1fr!important;gap:24px!important}
}

/* Claude-style Sage composer */
.sage-composer{display:flex;align-items:flex-end;gap:8px;background:var(--surface2);border:1.5px solid var(--border2);border-radius:18px;padding:12px 12px 12px 18px;transition:border-color .15s,box-shadow .15s}
.sage-composer:focus-within{border-color:var(--accent-bright);box-shadow:0 0 0 3px rgba(155,114,232,.14)}
.sage-composer textarea{flex:1;background:none;border:none;outline:none;resize:none;color:var(--text);font-family:var(--font-body);font-size:14.5px;line-height:1.55;min-height:44px;max-height:220px;padding:2px 0}
.sage-composer textarea::placeholder{color:var(--muted)}
.sage-composer textarea:disabled{color:var(--muted)}
.sage-composer button{width:38px;height:38px;border-radius:12px;border:none;background:var(--accent-bright);color:#fff;font-size:18px;font-weight:800;cursor:pointer;flex-shrink:0;transition:background .15s,transform .1s;display:flex;align-items:center;justify-content:center}
.sage-composer button:hover:not(:disabled){transform:translateY(-1px);background:#b18ff5}
.sage-composer button:disabled{background:var(--surface3);color:var(--muted);cursor:not-allowed}
.sage-chat-log:empty{display:none}

/* Analyze button + streaming status */
.sage-composer button{width:auto;min-width:88px;padding:0 18px;font-size:13px;font-weight:700;border-radius:12px;height:40px}
.sage-status{color:var(--muted);font-style:italic;animation:pulse 1.6s ease-in-out infinite}

/* Above-the-fold pass: the tagline "Drop your trade..." and the CTA must be
   visible on load without scrolling. Same design, tighter rhythm. */
.hero-inner{padding-top:8px}
.hero .sage-hero-svg{width:112px;height:99px}
.hero-sage-stage{margin-bottom:16px}
.hero-sage-stage::before{inset:-34px}
.hero-ring-1{inset:-20px}.hero-ring-2{inset:-36px}.hero-ring-3{inset:-52px}
.hero-badge{margin-bottom:16px}
.hero-inner h1{font-size:clamp(38px,5.4vw,62px);margin-bottom:.75rem}
.hero-tagline{margin-bottom:1.5rem}
@media(max-height:760px){
  .hero .sage-hero-svg{width:92px;height:81px}
  .hero .sage-asset{width:92px;height:81px}
  .hero-sage-stage{margin-bottom:10px}
  .hero-inner h1{font-size:clamp(32px,5vw,52px)}
}

/* Ask Sage fills the screen: wide layout, chat log takes all the height */
#screen-sage .wrap, #screen-sage{max-width:none}
#screen-sage{width:100vw;margin-left:calc(50% - 50vw);padding:0 24px;box-sizing:border-box}
#screen-sage .sage-layout{grid-template-columns:240px minmax(0,1fr);max-width:1360px;margin:0 auto}
#screen-sage #sage-chat-card{display:flex;flex-direction:column;min-height:calc(100vh - 170px)}
#screen-sage .sage-chat-log{flex:1 1 auto;max-height:none;min-height:200px;overflow-y:auto}
#screen-sage .sage-composer{margin-top:auto}
/* Empty "Ask me anything" state: center the greeting + composer as one block so the
   blank space above and below is equal (symmetric). Active chat drops the class so
   the log stays top-aligned and the composer pins to the bottom. */
#screen-sage #sage-chat-card.sage-centered{justify-content:center}
#screen-sage #sage-chat-card.sage-centered .sage-composer{margin-top:0}
@media(max-width:820px){ #screen-sage #sage-chat-card{min-height:calc(100vh - 220px)} }

/* ── iPhone portrait pass: usable one-handed at 390px ─────────────────────── */
@media(max-width:700px){
  /* Sleeper-style board: keep cells readable, scroll sideways instead of squishing */
  .mdb-grid{min-width:760px}
}
@media(max-width:640px){
  /* wide tables (standings, market, compare) scroll inside the card, never the page */
  .card table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}
@media(max-width:480px){
  html,body{overflow-x:hidden}
  .wrap{padding-left:12px;padding-right:12px}
  .nav{padding:0 .5rem}
  .nav-logo{font-size:13px}
  .nav-right{gap:4px}
  /* 16px inputs stop iOS from zooming the whole page on focus */
  .tm-input,.opp-select,.sage-composer textarea,input[type=text],select,textarea{font-size:16px}
  #screen-sage{padding:0 10px}
  .vs-bubble{width:64px;height:64px}
  .vs-arena{gap:8px}
  .bb-grid{grid-template-columns:repeat(3,1fr)}
  .mkt-overview{grid-template-columns:1fr}
  .breakdown-row{grid-template-columns:1fr}
  .stats-bar-item{min-width:100%}
  #tab-compare .card>div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  #md-setup>div[style*="grid-template-columns"]{grid-template-columns:1fr 1fr!important}
  #mp-choose div[style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .pm-card{max-width:100vw;border-radius:12px}
  .cm-card{max-width:94vw}
}

/* ── Phone portrait: reachable nav, no sidescroll, Sleeper-style trade view ── */
#mob-menu{display:none;position:fixed;inset:0;z-index:400;background:rgba(5,4,12,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#mob-menu.open{display:block}
.mob-menu-panel{position:absolute;top:0;right:0;bottom:0;width:min(300px,84vw);background:var(--surface);
  border-left:1px solid var(--border);padding:14px 14px 24px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}
.mob-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mob-menu-item{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);
  font:inherit;font-size:15px;font-weight:600;padding:12px 10px;border-radius:10px;cursor:pointer}
.mob-menu-item:active{background:var(--accent-dim)}
.mob-menu-item.mob-sub{font-size:13px;font-weight:500;color:var(--muted2);padding:9px 10px 9px 24px}
@media(max-width:900px){
  /* accidental sidescroll: the page never pans, wide widgets scroll inside their own box */
  html,body{overflow-x:clip;max-width:100%}
  /* the 100vw full-bleed sections count the scrollbar and slip past the clip on
     phones - constrain them to the real content width so nothing pans sideways. */
  #screen-mock,#screen-sage{width:100%!important;margin-left:0!important;padding-left:14px!important;padding-right:14px!important}
}
@media(max-width:700px){
  /* phone nav: plain flex row - logo left, burger pinned to the far right,
     never colliding with the wordmark */
  .nav{display:flex;justify-content:space-between;gap:8px}
  .nav-links{display:none}
  .nav-right{margin-left:auto;flex:none}
  #nav-burger{display:inline-flex!important}
}
/* Sleeper-style trade builder: both rosters visible side by side on a vertical
   split. Portrait phones only - desktop and landscape keep the tile grid. */
/* Sleeper-look trade cards on portrait phones: position line on top, big name,
   age below, circle checkbox on the right, card outlined in the position color */
.bb-age{display:none}
@media(max-width:700px) and (orientation:portrait){
  /* Default: stacked. Beside a tall empty "You receive", a side-by-side split
     squeezed "You send" names to two lines and left a dead empty column. Once an
     opponent roster loads (.has-opp), flip to the Sleeper-style side-by-side. */
  .bb-boards{grid-template-columns:1fr;gap:8px;align-items:start}
  .bb-boards.has-opp{grid-template-columns:1fr 1fr}
  .bb-grid{grid-template-columns:1fr;gap:7px;padding:7px}
  .bb-boards:not(.has-opp) .bb-grid{grid-template-columns:repeat(2,1fr)}
  .bb-tile{flex-direction:column;align-items:flex-start;gap:2px;padding:9px 36px 9px 11px;
    text-align:left;border:1.5px solid var(--bbp,var(--border2));border-radius:11px;background:var(--surface)}
  .bb-tile.on{background:var(--accent-dim);border-color:var(--accent-bright)}
  .bb-face{display:none}
  .bb-meta{order:-1;font-size:9.5px;letter-spacing:.02em}
  .bb-nm{font-size:13.5px;font-weight:700;white-space:normal;line-height:1.2}
  .bb-age{display:inline;color:var(--muted)}
  .bb-tick{top:50%;transform:translateY(-50%);right:9px;width:21px;height:21px;border-radius:50%;
    border-width:2px;border-color:var(--bbp,var(--border2));background:transparent}
  .bb-tile.on .bb-tick{background:var(--accent-bright);border-color:var(--accent-bright)}
  .bb-empty{padding:14px 8px}
}
/* the close button inside the phone menu must survive the phone icon-hiding rule */
.mob-menu-head .theme-toggle{display:inline-flex!important}

/* ── Draft screen breathes: full viewport width, taller board ─────────────── */
#screen-mock .wrap, #screen-mock{max-width:none}
#screen-mock{width:100vw;margin-left:calc(50% - 50vw);padding:0 24px;box-sizing:border-box}
.mdb-wrap{max-height:72vh}
@media(max-width:700px){ #screen-mock{padding:0 10px} }
/* ── Phone drafting: roomy single-column list, big tap targets, no nested scroll ── */
@media(max-width:700px){
  #md-choices{grid-template-columns:1fr!important;max-height:none!important;overflow:visible!important;gap:9px!important}
  .md-ch-row{padding:12px 12px 12px 11px!important}
  .md-ch-row>img:first-child{width:44px!important;height:44px!important}
  .md-ch-sel{width:42px!important;height:42px!important}
  .md-ch-q{width:34px!important;height:34px!important;font-size:19px!important}
  #md-draftbar{bottom:8px!important;padding:12px!important}
  #md-draftbar .btn-load{padding:13px 20px!important;font-size:15px!important}
  #md-draftbar .btn-sm{padding:11px 14px!important}
}

/* ── Spark cyan, echoed in small doses across the site ───────────────────── */
.hl{color:var(--accent-bright)}
.hero-badge-dot{background:var(--accent-bright);box-shadow:0 0 8px rgba(155,114,232,.5)}

/* ── Yahoo-style list layout: team + feed rail left, players right ────────── */
#md-board.listmode{display:grid;grid-template-columns:330px minmax(0,1fr);gap:16px;align-items:start;grid-auto-flow:row}
#md-board.listmode>*{grid-column:2;min-width:0}
#md-board.listmode>#md-status{grid-column:1/-1}
#md-board.listmode>div:nth-child(2){grid-column:1/-1} /* header controls row */
#md-board.listmode>#md-draftboard{grid-column:1;grid-row:3/span 8;position:sticky;top:74px;
  max-height:calc(100vh - 110px);margin:0;border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow:hidden}
#md-board.listmode .md-rail-scroll{max-height:calc(100vh - 112px);overflow-y:auto;padding-bottom:8px}
#md-board.listmode>#md-foot{grid-column:1/-1}
@media(max-width:900px){
  #md-board.listmode{display:block}
  #md-board.listmode>#md-draftboard{position:static;max-height:none}
  #md-board.listmode .md-rail-scroll{max-height:45vh}
}
/* the draft board must never trigger browser scroll anchoring jumps */
#md-board{overflow-anchor:none}

/* full player names everywhere: cells wrap to two tight lines, never initials */
.mdb-name{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bb-nm{white-space:normal;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ── PHONE FIXES ────────────────────────────────────────────────────────────
   Kept at the end of the file on purpose: these have to beat the component
   rules above, which are more specific than the generic input reset. */

/* iOS Safari zooms the entire page when you focus a field smaller than 16px,
   which throws the layout sideways and does not zoom back out. The rule in the
   480px block only used a bare `textarea` selector, so the comment box
   (.comm-opinion-input textarea), the trade-idea filters and the nav search all
   kept their 12-13px size and still triggered it. Naming them explicitly, and
   at 700px so large phones and landscape are covered too. */
@media(max-width:700px){
  .comm-opinion-input textarea,
  .ideas-filter>input,.ideas-filter-excl input,
  .nav-search-input,#nav-search-wrap.open .nav-search-input,
  .tm-input,#login-panel .tm-input,.opp-select,
  .sage-composer textarea,
  input[type=text],input[type=search],input[type=email],input[type=number],
  select,textarea{font-size:16px}
}

/* 100vh on iOS counts the space behind the address bar, so a 100vh hero is
   taller than the screen and pushes the headline and CTA below the fold - the
   one rule the design is supposed to hold. dvh measures what is actually
   visible. The vh line stays first as the fallback for older browsers. */
body{min-height:100vh;min-height:100dvh}
.hero{min-height:calc(100vh - 60px);min-height:calc(100dvh - 60px)}
#screen-sage #sage-chat-card{min-height:calc(100vh - 170px);min-height:calc(100dvh - 170px)}
@media(max-width:820px){
  #screen-sage #sage-chat-card{min-height:calc(100vh - 220px);min-height:calc(100dvh - 220px)}
}

/* A modal had no height limit and no scroll, so any dialog taller than the
   screen - the manage-subscription panel, the player card, anything in
   landscape - ran off the bottom with its buttons unreachable. Cap it to the
   visible viewport and let the body scroll inside. */
.modal{max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;-webkit-overflow-scrolling:touch}
@media(max-width:700px){
  .modal-overlay{align-items:flex-start;padding:16px 0}
  .modal{width:calc(100% - 24px);max-width:none;padding:1.15rem;max-height:calc(100dvh - 32px)}
}

/* Touch targets. The vote and comment buttons are the main things a person
   taps in the community, and at ~28px tall they were well under the 44px that
   a thumb reliably hits. Desktop keeps its tighter sizing. */
@media(max-width:700px){
  .comm-vote-btn,.comm-opinion-btn{min-height:40px;padding:9px 14px;font-size:13px}
  .comm-vote-btn{gap:6px}
}

/* The four proof points sit in a wrapping flex row with the dots as their own
   spans, so on a phone the row breaks after the third span and leaves a
   separator dangling at the end of the first line. A 2x2 grid gives four
   evenly sized cells and lets alignment do the separating, so the dots are
   not needed at all below this width. */
@media(max-width:700px){
  .hero-proof{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:9px 20px}
  .hero-proof-sep{display:none}
}

/* ── Top bar: two products only ─────────────────────────────────────────────
   Mock Draft and Ask Sage are the whole bar now; everything else lives in the
   menu drawer. A simple centred flex row replaces the old three-zone grid. */
@media(min-width:1201px){
  .nav-links{display:flex;align-items:center;gap:.25rem}
}

/* ── Ask Sage on a phone ────────────────────────────────────────────────────
   A rule at 820px already stacked this layout, but the later, more specific
   `#screen-sage .sage-layout` re-imposed the two columns at every width. The
   result on a 390px phone was a 235px chat squeezed next to a chat-history
   rail, with the heading and the composer wrapping mid-word. The rail belongs
   under the conversation on a phone, not beside it. */
@media(max-width:820px){
  #screen-sage .sage-layout{grid-template-columns:1fr;gap:10px}
  #screen-sage .sage-side{position:static;max-height:150px;order:2}
}

/* The community header packed a title, a badge, a sentence and a Refresh
   button onto one row, so on a phone the sentence wrapped around the button
   and the whole block read as cramped. Stack them and let the button span the
   width, which also makes it a comfortable tap target. */
@media(max-width:560px){
  .comm-head{flex-direction:column;align-items:stretch;gap:10px}
  .comm-head .btn-sm{width:100%;padding:11px 14px}
}

/* ── Phone tab bar ──────────────────────────────────────────────────────────
   Native apps keep primary navigation under the thumb. The burger is retired
   on phones and becomes the "More" tab, so the drawer keeps every secondary
   destination without competing for the same job. */
#tabbar{display:none}
@media(max-width:700px){
  #tabbar{
    display:flex;
    position:fixed;left:0;right:0;bottom:0;
    /* under the phone drawer (400) so "More" covers the bar it came from,
       and well under the modal layer */
    z-index:350;
    background:var(--surface);
    border-top:1px solid var(--border);
    /* inset as padding, not margin, so the bar's surface still bleeds behind
       the iOS home indicator instead of leaving a bare strip */
    padding-bottom:env(safe-area-inset-bottom,0px);
    backdrop-filter:saturate(170%) blur(16px);
    -webkit-backdrop-filter:saturate(170%) blur(16px);
  }
  #tabbar .tabbar-item{
    flex:1 1 0;min-width:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:56px;padding:8px 2px 7px;
    background:none;border:0;border-radius:0;
    color:var(--muted);
    font-family:var(--font-body);font-size:10px;font-weight:600;line-height:1;
    letter-spacing:.005em;
    cursor:pointer;-webkit-tap-highlight-color:transparent;
    transition:color .15s;
  }
  #tabbar .tabbar-item svg{width:22px;height:22px;flex-shrink:0}
  #tabbar .tabbar-item.active{color:var(--accent-bright)}
  #tabbar .tabbar-item:active{background:var(--surface2)}
  /* keep the end of every page clear of the bar */
  body{padding-bottom:calc(57px + env(safe-area-inset-bottom,0px))}
  #nav-burger{display:none!important}
  /* the drawer is now the "More" destination and runs past the fold, so its
     last item must clear the iOS home indicator */
  .mob-menu-panel{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}

  /* Ask Sage is the product, not a peer of the other four destinations, and as
     a fifth grey glyph it read as one. The brand gradient in a raised badge is
     the standard way an app names its primary action, and it keeps the slot so
     the five destinations stay evenly spaced. */
  #tabbar .tabbar-item[data-tab="sage"]{color:var(--accent-bright);font-weight:700}
  #tabbar .tabbar-item[data-tab="sage"] svg{
    width:42px;height:42px;padding:10px;box-sizing:border-box;
    border-radius:50%;
    /* Flat accent fill instead of a gradient; still reads as the primary
       action in the bottom bar, and the dark glyph stays legible on it. */
    background:var(--accent-bright);
    color:#0d0817;
    margin-top:-14px;
    box-shadow:0 6px 18px -4px rgba(155,114,232,.6);
    transition:transform .15s;
  }
  /* the shared press state would paint a grey slab behind the badge */
  #tabbar .tabbar-item[data-tab="sage"]:active{background:none}
  #tabbar .tabbar-item[data-tab="sage"]:active svg{transform:scale(.93)}

  /* Footer on a phone: it ran long and ended in a wall of 11px legal text.
     Tighten the chrome, stack the links as real tap targets, and let the
     legal line breathe instead of splintering into slivers. */
  footer{padding:2rem 1.25rem 1.75rem;margin-top:2rem}
  .footer-sub{font-size:12.5px;line-height:1.6;max-width:34ch;margin:0 auto}
  footer .nav-link{padding:8px 4px;min-height:40px;display:inline-flex;align-items:center}
  .footer-legal{margin-top:18px;font-size:10.5px;line-height:1.7;color:var(--muted);max-width:38ch;margin-left:auto;margin-right:auto}
  #how-mini{margin-bottom:20px!important;padding:14px 16px!important}
}

/* ── Phone touch targets and cramped blocks ─────────────────────────────────
   Measured at 390x844: inner tabs sat at 34.8px, the small buttons at 31px,
   both well under a comfortable thumb. The draft context box also clipped its
   own placeholder (63px box, 81px of text). */
@media(max-width:700px){
  /* Tabs grow to fill the segmented bar instead of hugging the left with a dead
     empty half on 2- and 3-tab bars. min-width:max-content keeps long bars (Learn)
     at content width so they scroll rather than clip. */
  .inner-tab{min-height:42px;display:inline-flex;align-items:center;justify-content:center;
    flex:1 1 auto;min-width:max-content;text-align:center}
  .btn-sm{min-height:40px}
  /* Modal close was a 28px dot - under thumb size. */
  .pm-close{width:40px;height:40px;font-size:16px;top:8px;right:8px}
  #md-context{min-height:88px}
  .sage-side-new,.btn-load{min-height:40px}
  .sage-sugg{min-height:42px;display:flex;align-items:center;justify-content:center}
}
@media(max-width:560px){
  /* four one-line claims stacked into a 130px column of mostly empty space;
     two per row reads as one block instead of a list */
  .sage-caps{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sage-cap{justify-content:center;margin:0}
}

/* ── Where an auto-scroll lands ─────────────────────────────────────────────
   The top bar is fixed at 60px, so any scrollIntoView or anchor jump parked
   its target underneath it: the thing you clicked to reach ended up hidden
   behind the nav. scroll-padding on the scrolling element fixes every call
   site at once, including the ones that ask for block:"start", instead of
   patching fifteen separate scrollIntoView calls.
   On a phone the bottom tab bar covers the last stretch of the page too, so
   reserve that as well. */
html{scroll-padding-top:76px}
@media(max-width:700px){
  html{scroll-padding-top:72px;scroll-padding-bottom:84px}
}

/* ── Phone mock draft ───────────────────────────────────────────────────────
   Measured at 390px: the card's 28px of padding left the board, the player
   list and Sage's writeup 280px to share, so every column inside them was
   being squeezed past readable. Buy the width back first, then fix what is
   still too small to tap. Scoped to #screen-mock so the ID outranks the skin
   rules without needing !important. */
@media(max-width:700px){
  /* the overflow fix above pins these with !important, so matching it is the
     only way to hand the draft back the last few pixels of gutter */
  #screen-mock{padding-left:10px!important;padding-right:10px!important}
  #screen-mock .card{padding:14px 12px}

  /* the player search shipped a hard flex basis of 180px, so on a phone half
     the row sat empty next to a box too narrow to read a name in */
  #md-board .tm-input{flex:1 1 auto!important;max-width:none}

  /* Sage's pros and cons rendered as two 89px columns: four words a line, each
     point running a dozen lines down the phone. The columns are written inline
     by the renderer, so this is the one place !important is the only lever. */
  #md-board .pcwrap>div{grid-template-columns:1fr!important;gap:7px!important}

  /* the primary action was a 196px button at the end of a 996px form */
  #md-setup button{width:100%;min-height:52px;font-size:15px}

  /* Position filters stay on one scrolling line, so they never cost a second
     row of height, but the row has to actually scroll: it was nowrap with
     visible overflow, which is how content escapes its box. */
  #screen-mock div:has(>.md-pos-chip){overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #screen-mock div:has(>.md-pos-chip)::-webkit-scrollbar{display:none}
  #screen-mock .md-pos-chip{min-height:40px;display:inline-flex;align-items:center;justify-content:center;flex:none}

  /* controls that measured 24px to 31px tall */
  #screen-mock .md-view-btn{min-height:40px;display:inline-flex;align-items:center;padding:0 12px}
  #screen-mock .opp-select{min-height:40px}
  #screen-mock .tm-input{min-height:44px}
}

/* The alerts panel is anchored to a button sitting near the right edge, and at
   280px wide it ran off the left of a phone screen with its text cut. Pin it
   to the viewport instead of the button so it always fits, whatever the button
   position ends up being. */
@media(max-width:700px){
  #alerts-dd{position:fixed;left:10px;right:10px;top:64px;min-width:0;width:auto;max-height:min(60vh,420px)}
}

/* ── Phone drawer: one group open at a time ─────────────────────────────────
   The drawer listed all nineteen destinations flat, so Community sat below
   every Research and Draft subsection. Grouping them turns nineteen rows into
   seven, and only the group you opened costs any height. */
.mob-group .mob-subs{display:none}
.mob-group.open .mob-subs{display:block}
.mob-menu-item.mob-parent{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mob-chev{flex:none;opacity:.45;transition:transform .22s,opacity .22s}
.mob-group.open .mob-menu-item.mob-parent{color:var(--accent-bright)}
.mob-group.open .mob-chev{opacity:1;transform:rotate(180deg)}

/* ── Phone: folded tool blurbs ──────────────────────────────────────────────
   Each tool section opens with a sentence or two saying what it does. On a
   desktop that is free; on a 390px phone it pushes the tool itself under the
   fold, and it reads the same on every visit. The JS only builds these below
   701px, so the desktop layout never sees a .ctx-fold at all. */
@media(max-width:700px){
  .ctx-fold{margin:0 0 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface2)}
  .ctx-fold>summary{
    list-style:none;cursor:pointer;
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:42px;padding:0 12px;
    font-family:var(--font-body);font-size:12.5px;font-weight:600;
    color:var(--muted2);-webkit-tap-highlight-color:transparent;
  }
  .ctx-fold>summary::-webkit-details-marker{display:none}
  /* chevron drawn in CSS so the markup stays a plain <summary> */
  .ctx-fold>summary::after{
    content:'';width:7px;height:7px;flex:none;margin-right:2px;
    border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg) translateY(-2px);transition:transform .2s;
  }
  .ctx-fold[open]>summary{color:var(--accent-bright)}
  .ctx-fold[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
  .ctx-fold>:not(summary){padding:0 12px 12px;margin:0}
}

/* ── Drafting on a phone ────────────────────────────────────────────────────
   Measured mid-draft at 390px: the available-player list rendered eighth in
   the column, behind the board (322px), the queue (81px) and Sage's writeup
   (766px). The one surface you actually act on started 1330px below the fold,
   which is why drafting felt like it showed nothing useful. Reordering puts
   the list first and demotes the rest to reference you scroll down to. */
@media(max-width:700px){
  #md-board{display:flex;flex-direction:column}
  #md-status{order:1}
  #md-board>div:not([id]){order:2}
  #md-available{order:3}
  #md-queue-wrap{order:4}
  #md-sage{order:5}
  #md-draftboard{order:6}
  #md-foot{order:7}

  /* whose pick it is has to survive scrolling the list */
  #md-status{
    position:sticky;top:60px;z-index:5;
    background:var(--surface);
    border:1px solid rgba(155,114,232,.45);
    border-radius:10px;
    padding:10px 12px;margin-bottom:8px;
    font-size:13px!important;font-weight:700;
    color:var(--accent-bright);
    box-shadow:0 6px 16px -8px rgba(0,0,0,.6);
  }

  /* Sleeper scans fast because the name is the biggest thing in the row. Ours
     was 12px, smaller than the body copy around it. The row is drawn with
     inline styles, so !important is the only lever here. */
  .md-ch-row{min-height:64px!important}
  .md-ch-row>div:first-of-type>div:first-of-type{font-size:15.5px!important;line-height:1.25!important}
  .md-ch-row>div:first-of-type>div:nth-of-type(2){font-size:11.5px!important;margin-top:3px!important}
}

/* ── The cost block and the founder note ───────────────────────────────────
   Two additions from user feedback. The cost block sits between "how it
   works" and the CTA, where the reader understands the product but has not
   yet been asked to act; naming what going wrong looks like is what turns
   interest into a click. The founder note closes the page on a person, which
   is the one thing a competing calculator cannot copy.
   Deliberately quiet: no gradients, one accent, type doing the work. */
.cost-block{
  border:1px solid var(--border);
  border-left:2px solid var(--accent-bright);
  border-radius:var(--radius);
  background:var(--surface);
  padding:26px 28px;
  text-align:left;
}
.cost-title{
  font-family:var(--font-head);font-size:17px;font-weight:700;
  color:var(--text);margin-bottom:14px;letter-spacing:-.01em;
}
.cost-list{margin:0;padding-left:0;list-style:none}
.cost-list li{
  position:relative;padding-left:20px;margin:9px 0;
  font-size:15px;line-height:1.6;color:var(--muted2);
}
.cost-list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--accent-bright);opacity:.75;
}

.founder-block{
  max-width:660px;
  padding-top:var(--sp-block,64px);
  padding-bottom:var(--sp-block,64px);
  text-align:left;
}
.founder-label{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-bright);margin-bottom:18px;
}
.founder-block p{
  font-size:16px;line-height:1.75;color:var(--muted2);margin:0 0 16px;
}
/* The opening line carries the whole section, so it gets the emphasis. */
.founder-lead{font-size:18px!important;color:var(--text)!important}
.founder-close{
  font-family:var(--font-head);font-size:17px;font-weight:700;
  color:var(--text)!important;margin-top:26px!important;
}
.founder-sign{font-size:13px;color:var(--muted);margin-top:6px}

@media(max-width:700px){
  .cost-block{padding:20px 18px}
  .cost-list li{font-size:14.5px}
  .founder-block p{font-size:15px}
  .founder-lead{font-size:16.5px!important}
}

/* Explains the roster board in one line. Without it the screen reads as a
   proposed trade containing every player shown, which is how a reviewer
   mistook it for a 25-for-25 offer. */
.bb-howto{
  font-size:12.5px;color:var(--muted2);text-align:center;
  padding:9px 12px;margin-bottom:10px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);
}
@media(max-width:700px){.bb-howto{font-size:12px;padding:8px 10px}}

/* ══ HERO: two columns, product on the right ═══════════════════════════════
   The old hero was a 620px centred column inside a 1280px page: ~330px of
   empty background down each side, ~75px above the badge and ~120px below the
   proof line. Nothing filled it, which is what read as "vibecoded". The copy
   now sits on a left edge and a real screenshot of a verdict fills the right
   half, so the same viewport carries content instead of background.
   Appended at the end of the file so it beats the earlier .hero rules; the
   v11/v12 skins re-assert what they own in v12.css. */
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:center;
  gap:clamp(24px,3.4vw,56px);
  max-width:1240px;
  width:100%;
  text-align:left;
  padding:32px 40px 40px;
  box-sizing:border-box;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
/* Sage is inside the screenshot now, so the 150px portrait plus its three
   rings was duplicated weight and pure vertical cost. */
.hero .hero-sage-stage{display:none}
.hero-inner h1{text-align:left;margin-bottom:1rem}
.hero-tagline{text-align:left;max-width:34em;margin-bottom:1.6rem}
.hero-cta{justify-content:flex-start}
  .hero-noaccount{text-align:left}
/* Secondary proof: outlined chips, quiet enough not to compete with the CTA */
.hero-proof{justify-content:flex-start;gap:8px;margin-top:20px}
.hero-chip{
  display:inline-flex;align-items:center;
  padding:6px 12px;border-radius:100px;
  border:1px solid var(--border2);
  background:rgba(255,255,255,.03);
  font-size:12px;color:var(--muted2);font-weight:500;white-space:nowrap;
}

/* The screenshot bleeds past the right edge of the column so the composition
   has no gutter of dead background; the mask dissolves its bottom and right
   edges into the page instead of ending on a hard rectangle. */
.hero-shot{
  position:relative;min-width:0;
  margin-right:calc(-1 * clamp(24px, 6vw, 96px));
  perspective:1600px;
  pointer-events:none;
}
.hero-shot img{
  display:block;width:100%;height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  transform:rotateY(-13deg) rotateX(3deg) rotateZ(1deg) scale(1.06);
  transform-origin:left center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.35) 84%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 52%,rgba(0,0,0,.35) 84%,transparent 100%);
}
@media(prefers-reduced-motion:reduce){.hero-shot img{transform:none}}

/* Below ~1000px the two columns stop fitting: stack, keep the copy first so
   the headline and the CTA stay at the top of the fold, and let the shot sit
   under them flat (the 3D tilt only reads at width). */
@media(max-width:1000px){
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:24px;
    max-width:640px;
    text-align:center;
    padding:20px 22px 32px;
  }
  .hero-copy{align-items:center}
  .hero-inner h1,.hero-tagline,.hero-noaccount{text-align:center}
  .hero-tagline{margin-left:auto;margin-right:auto}
  .hero-cta,.hero-proof{justify-content:center}
  .hero-shot{margin-right:0;perspective:none}
  .hero-shot img{
    transform:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 62%,transparent 100%);
  }
}
@media(max-width:700px){
  .hero-chip{font-size:11px;padding:5px 10px}
  /* The fixed bottom bar is ~56px: nothing in the hero may end under it. */
  .hero-inner{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  /* Shrunk to phone width the whole board becomes unreadable grey noise. Show a
     tight letterbox of the top of the shot instead: the "you are on the clock"
     headline and the first row of the draft board - the parts that read at a
     glance and carry the product's promise. It fades out before the cells turn
     into sub-6px noise. */
  .hero-shot{
    overflow:hidden;max-height:150px;
    border:1px solid rgba(255,255,255,.09);border-radius:12px;
  }
  .hero-shot img{
    width:152%;max-width:none;margin-left:-7%;
    border:0;border-radius:0;box-shadow:none;
    /* Dissolves before the body paragraph so the crop ends on the headline. */
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 72%,transparent 100%);
  }
}

/* The menu button is primary navigation on every width above the phone tab
   bar: it holds every tool beyond the mock and Sage. The generic icon-hiding
   rule at 768px must not take it down. */
@media(min-width:701px){#nav-burger{display:inline-flex!important}}

/* ── War room status pill + the BIG player card ───────────────────────────── */
/* Stacked-style board bar: the drafter status reads as one quiet pill */
#md-status{font-size:12px;font-weight:600;color:var(--muted2);padding:7px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
#md-status:empty{display:none}

/* The player card opens BIG on desktop: a dossier, not a popover. Identity
   rail on the left (photo, name, meta), depth on the right (stats, take,
   narratives, news, Sage) with its own scroll. */
@media(min-width:900px){
  .pm-card{max-width:min(1060px,94vw);display:grid;grid-template-columns:320px minmax(0,1fr);max-height:90vh;overflow:hidden}
  .pm-header{grid-column:1;flex-direction:column;align-items:flex-start;justify-content:flex-start;border-bottom:0;border-right:1px solid var(--border);padding:1.75rem 1.5rem;overflow-y:auto}
  .pm-photo{width:150px;height:150px}
  .pm-team-logo{width:34px;height:34px}
  .pm-name{font-size:26px;margin-top:12px}
  .pm-body{grid-column:2;padding:1.5rem;overflow-y:auto;max-height:90vh}
}
/* On phones the card is the whole screen, stacked, scrolling */
@media(max-width:700px){
  .pm-overlay{padding:0}
  .pm-card{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
}