/* Prop Streak Lab — shared "app" design for the four sport boards (nfl/nba/nhl/mlb.html).
   Loaded after each page's own <style>; every rule below is scoped to .app (the page's
   .wrap) or to the shared header, so it wins over the older inline theme without
   touching the page JS. Colors and type match the home page (index.html). */
:root{
  --ps-bg:#0a1628; --ps-surface:#0f2038; --ps-surface-2:#142743; --ps-line:#22354f; --ps-line-soft:rgba(255,255,255,.07);
  --ps-text:#fff; --ps-soft:#dfe6ef; --ps-muted:#b8c5d6;
  --ps-green:#22d07f; --ps-green-2:#22d07f; --ps-green-ink:#06210b; --ps-red:#eb6f7d;
  --ps-display:"Archivo","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* headlines */
  --ps-num:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;                  /* big numbers: even-width digits */
  --ps-cond:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* labels: Inter (was Barlow Condensed, hard to read small) */
  --dispers:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;   /* the boards' older label styles */
  --ps-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ps-gold:#e8b54a;   /* official badges: graded record, tracked-since */
  /* the boards' own older styles read these: numbers, body and labels all in Inter */
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ps-card:linear-gradient(180deg,rgba(20,39,67,.80),rgba(12,26,48,.88));
  --ps-r:20px;
}
body{margin:0;background:var(--ps-bg);color:var(--ps-text);font-family:var(--ps-body);font-variant-numeric:lining-nums;
  background-image:
    linear-gradient(rgba(34,208,127,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(34,208,127,.035) 1px,transparent 1px),
    radial-gradient(1100px 700px at 12% -10%,rgba(34,208,127,.10),transparent 60%),
    radial-gradient(900px 600px at 100% 30%,rgba(34,208,127,.05),transparent 60%),
    linear-gradient(180deg,#0b1a32,#0a1628 45%,#081120);
  background-size:58px 58px,58px 58px,100% 100%,100% 100%,100% 100%;background-attachment:fixed}
[hidden]{display:none!important}

/* ---------- top bar: logo, sport switcher, referral CTA ---------- */
.apptop{position:sticky;top:0;z-index:60;background:rgba(10,22,40,.80);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--ps-line-soft)}
.apptop-in{max-width:1160px;margin:0 auto;padding:0 16px;height:62px;display:flex;align-items:center;gap:14px}
.apptop .brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;flex:none;white-space:nowrap}
.apptop .brand svg{width:30px;height:30px;min-width:0;display:block;flex:none}   /* pages size chart SVGs to 100% / 520px+ */
.apptop .brand b{font-family:var(--ps-display);font-weight:800;font-size:19px;line-height:1;letter-spacing:-.01em}
.apptop .brand b i{color:var(--ps-green);font-weight:600}
.sportnav{display:flex;gap:6px;margin-left:auto;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.sportnav::-webkit-scrollbar{display:none}
.sportnav a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;white-space:nowrap;text-decoration:none;
  background:rgba(255,255,255,.04);border:1px solid var(--ps-line-soft);color:var(--ps-soft);
  font-family:var(--ps-cond);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:14px;transition:border-color .15s,color .15s}
.sportnav a:hover{border-color:rgba(34,208,127,.5);color:#fff}
.sportnav a[aria-current=page]{background:var(--ps-green);border-color:var(--ps-green);color:var(--ps-green-ink)}
.appcta{flex:none;display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:999px;text-decoration:none;
  background:var(--ps-green);color:var(--ps-green-ink);font-family:var(--ps-body);font-weight:700;letter-spacing:0;text-transform:none;font-size:14px;
  box-shadow:0 6px 16px rgba(34,208,127,0.14)}
.appcta:hover{box-shadow:0 8px 20px rgba(34,208,127,0.21)}
/* Both exchanges' sign-up links, side by side (stacked on phones) */
.appctas{flex:none;display:flex;gap:8px}
.appcta small{font-size:.82em;font-weight:600;opacity:.85}
.appcta.pm{background:#2d6bff;color:#fff;box-shadow:0 6px 16px rgba(45,107,255,0.18)}
.appcta.pm:hover{box-shadow:0 8px 20px rgba(45,107,255,0.28)}
@media(max-width:760px){
  .apptop-in{height:auto;flex-wrap:wrap;padding:10px 12px 8px;gap:8px 10px}
  .apptop .brand b{font-size:20px}
  .appcta{margin-left:auto;padding:7px 13px;font-size:13px}
  .appctas{margin-left:auto;flex-direction:column;gap:4px}
  .appctas .appcta{margin:0;justify-content:space-between;gap:6px;padding:3px 10px;font-size:11.5px;line-height:1.35}
  .sportnav{order:3;width:100%;margin:0}
  .sportnav a{flex:1;justify-content:center;padding:7px 8px;font-size:13px}
}

/* ---------- page shell ---------- */
.app.wrap{max-width:1160px;padding:0 16px 70px}
.app .apphero{padding:34px 2px 6px}
.app .eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;font-weight:700;color:var(--ps-green);background:rgba(34,208,127,.08);border:1px solid rgba(34,208,127,.3);padding:6px 14px;border-radius:999px}
.app .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--ps-green);animation:psping 2s infinite}
@keyframes psping{0%{box-shadow:0 0 0 0 rgba(34,208,127,.6)}80%,100%{box-shadow:0 0 0 10px rgba(34,208,127,0)}}
.app .apphero h1{font-family:var(--ps-display);font-weight:800;font-size:clamp(34px,4.8vw,56px);line-height:1.02;letter-spacing:-.025em;margin:16px 0 12px}
.app .apphero h1 i{color:var(--ps-green);font-weight:800}
.app .apphero .lede{color:var(--ps-soft);font-size:clamp(16px,1.5vw,18px);max-width:40em;margin:0 0 20px;line-height:1.55}
.app .herostats{display:flex;flex-wrap:wrap;gap:10px}
.app .herostats>div{background:var(--ps-card);border:1px solid var(--ps-line);border-radius:16px;padding:10px 16px 11px;min-width:128px}
.app .herostats b{display:block;font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:28px;line-height:1.05;color:#fff}
.app .herostats span{font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ps-muted)}
.app .promo{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 4px}
.app .refbanner{display:inline-flex;width:auto;max-width:100%;margin:0;padding:10px 18px;border-radius:999px;border:1px solid var(--ps-green);
  background:var(--ps-green);color:var(--ps-green-ink);font-family:var(--ps-body);font-weight:700;letter-spacing:0;text-transform:none;font-size:14.5px;
  line-height:1.3;text-align:left;box-shadow:0 6px 16px rgba(34,208,127,0.11)}
.app .refbanner:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,208,127,0.18)}
.app .refbanner.group{background:transparent;color:var(--ps-green);border-color:rgba(34,208,127,.5);box-shadow:none}
.app .refbanner.group:hover{background:rgba(34,208,127,.08)}

/* Value spots banner */
.app .vwbar{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-start;gap:4px 14px;margin:16px 0 4px;padding:14px 18px;
  background:var(--ps-card);border:1px solid rgba(34,208,127,.35);border-left:1px solid rgba(34,208,127,.35);border-radius:var(--ps-r);
  box-shadow:0 18px 44px rgba(0,0,0,.3);text-align:left}
.app .vwbar.down{border-color:rgba(224,122,134,.45)}
.app .vwbar .lbl{font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--ps-muted)}
.app .vwbar .big{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:clamp(26px,4vw,34px);color:var(--ps-green)}
.app .vwbar.down .big{color:var(--ps-red)}
.app .vwbar .sub{width:100%;text-align:left;color:var(--ps-soft);font-size:13.5px}

/* tabs: one segmented pill control */
.app .tabs{display:flex;flex-wrap:nowrap;gap:4px;justify-content:flex-start;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none;
  margin:18px 0 18px;padding:5px;background:rgba(15,32,56,.88);border:1px solid var(--ps-line);border-radius:999px}
.app .tabs::-webkit-scrollbar{display:none}
.app .tab{border:0;background:transparent;color:var(--ps-soft);border-radius:999px;padding:9px 18px;box-shadow:none;white-space:nowrap;
  font-family:var(--ps-body);font-weight:600;text-transform:none;letter-spacing:0;font-size:14.5px}
.app .tab:hover{color:#fff;background:rgba(255,255,255,.05);transform:none}
.app .tab[aria-selected=true]{background:var(--ps-green);color:var(--ps-green-ink)}
@media(min-width:761px){.app .tabs{position:sticky;top:72px;z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
@media(max-width:760px){.app .tabs{width:100%}.app .tab{flex:1;padding:9px 6px;font-size:13px;letter-spacing:0}}

/* ---------- cards ---------- */
.app .panel{background:var(--ps-card);border:1px solid var(--ps-line);border-radius:var(--ps-r);box-shadow:0 18px 50px rgba(0,0,0,.34);
  padding:20px 20px 18px;margin-bottom:18px}
.app .panel>h2,.app .mkthead h2{font-family:var(--ps-display);font-weight:700;text-transform:none;letter-spacing:-.01em;font-size:20px;
  color:#fff;border-left:0;padding-left:0;margin:0}
.app .mkthead{gap:8px 14px;margin-bottom:12px}
.app .mktnote{color:var(--ps-soft);font-size:14px;line-height:1.6}
.app .mktnote b{color:#fff}
.app .mktmuted,.app .bmeta,.app .pmeta,.app .hint,.app .panel .hint{color:var(--ps-muted)}
.app .mktmuted,.app .hint,.app .panel .hint{font-size:14px}
.app .panel.collapsible .chev{color:var(--ps-muted)}
.app .valrules{border-radius:16px;background:rgba(34,208,127,.05)}
@media(max-width:760px){.app .panel{padding:16px 14px 14px;border-radius:18px}.app .panel>h2,.app .mkthead h2{font-size:18px}}

/* buttons, chips, controls */
.app .btn{background:var(--ps-green);color:var(--ps-green-ink);border:0;border-radius:999px;padding:9px 18px;box-shadow:0 6px 16px rgba(34,208,127,0.12);
  font-family:var(--ps-body);font-weight:700;text-transform:none;letter-spacing:0;font-size:14px}
.app .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(34,208,127,0.19)}
.app .btn.ghost{background:rgba(255,255,255,.04);color:#fff;border:1px solid rgba(255,255,255,.18);box-shadow:none}
.app .btn.ghost:hover{border-color:var(--ps-green);color:var(--ps-green)}
.app .chip{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--ps-soft);border-radius:999px;padding:7px 14px;font-weight:600}
.app .chip:hover{border-color:rgba(34,208,127,.5);color:#fff;background:rgba(255,255,255,.05)}
.app .chip[aria-pressed=true]{background:var(--ps-green);border-color:var(--ps-green);color:var(--ps-green-ink)}
.app .linectl button,.app .linectl input,.app .oubtns button{border:1px solid var(--ps-line);background:rgba(255,255,255,.04);color:#fff;border-radius:12px;box-shadow:none}
.app .oubtns button[aria-pressed=true]{background:var(--ps-green);border-color:var(--ps-green);color:var(--ps-green-ink)}
.app input[type=text],.app input[type=search],.app select,.app textarea{border:1px solid var(--ps-line)!important;border-radius:14px!important;
  background:rgba(255,255,255,.04)!important;color:#fff!important}
.app input[type=text]:focus,.app select:focus,.app textarea:focus{outline:none;border-color:var(--ps-green)!important;box-shadow:0 0 0 3px rgba(34,208,127,.18)}
/* The opened list of a dropdown: Chrome and Edge on Windows draw it on their own white
   background with the select's white text, so the options get a solid dark one. */
select option,select optgroup,.app select option,.app select optgroup{background-color:#142743!important;color:#fff!important}
select option:checked,.app select option:checked{background-color:#22d07f!important;color:#06210b!important}
.app .acbox{border-radius:14px;overflow:hidden}
.app .weekstrip{background:rgba(255,255,255,.04);border:1px solid var(--ps-line);border-radius:16px}
.app .tile{background:var(--ps-card);border:1px solid var(--ps-line);border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.3)}
.app .tile.model{border-color:rgba(34,208,127,.45)}
.app .boardrow{border-radius:14px}
.app .lbrow{border-bottom:1px solid var(--ps-line-soft)}

/* ---------- pick tables ---------- */
.app .edgetbl{border-collapse:separate;border-spacing:0;font-size:14px}
.app .edgetbl th{color:var(--ps-muted);font-family:var(--ps-cond);font-weight:700;font-size:12px;letter-spacing:.12em;border-bottom:1px solid var(--ps-line);padding:8px 10px}
.app .edgetbl td{color:#fff;border-bottom:1px solid var(--ps-line-soft);padding:10px}
.app .edgetbl tr:last-child td{border-bottom:0}
.app .edgetbl tr:hover td{background:rgba(255,255,255,.03)}
.app .edgetbl td:first-child{font-weight:600}
.app .edgeval{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:19px;color:#fff}
.app .edgeval.pos{color:var(--ps-green-2)} .app .edgeval.neg{color:var(--ps-red)}
.app .rng{color:var(--ps-muted);font-size:11.5px}
.app .leantag{display:inline-block;border:0;border-radius:999px;padding:3px 10px;font-family:var(--ps-cond);font-weight:700;font-size:12px;letter-spacing:.1em}
.app .leantag.over{background:rgba(53,196,107,.16);color:#86e6b6} .app .leantag.under{background:rgba(224,122,134,.16);color:#f3a4ae}
.app .edgeload{border-radius:999px;border:1px solid rgba(34,208,127,.45);background:transparent;color:var(--ps-green);padding:5px 13px}
.app .edgeload:hover{background:var(--ps-green);color:var(--ps-green-ink)}
.app .av{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;margin-right:10px;vertical-align:middle;flex:none;
  background:#1d3456;border:1px solid var(--ps-line);color:var(--ps-soft);font-family:var(--ps-cond);font-weight:700;font-size:12px;letter-spacing:.04em}
/* On phones each pick becomes a card: name + chance on top, the bet and price in the middle, game + Load below. */
@media(max-width:760px){
  .app .picktbl thead{display:none}
  .app .picktbl,.app .picktbl tbody{display:block;width:100%}
  .app .chartwrap:has(.picktbl){overflow:visible}
  .app .picktbl tr{display:grid;grid-template-columns:auto auto auto minmax(0,1fr) auto;
    grid-template-areas:"name name name name model" "prop line bet . price" "game game game game load";
    gap:6px 8px;align-items:center;margin-bottom:10px;padding:12px 14px;
    background:rgba(255,255,255,.035);border:1px solid var(--ps-line-soft);border-radius:16px}
  .app .picktbl td{border:0!important;padding:0;background:none!important;text-align:left;white-space:normal}
  .app .picktbl td:nth-child(1){grid-area:name;font-size:15px;display:flex;align-items:center;min-width:0}
  .app .picktbl td:nth-child(2){grid-area:game;font-size:12.5px}
  .app .picktbl td:nth-child(3){grid-area:prop;font-weight:600}
  .app .picktbl td:nth-child(4){grid-area:line}
  .app .picktbl td:nth-child(5){grid-area:bet}
  .app .picktbl td:nth-child(6){grid-area:model;text-align:right}
  .app .picktbl td:nth-child(6) .edgeval{font-size:24px}
  .app .picktbl td:nth-child(6) .rng{display:block}
  .app .picktbl td:nth-child(7){grid-area:price;text-align:right;font-size:13px}
  .app .picktbl td:nth-child(8){grid-area:load;text-align:right}
}

/* ---------- pick cards (Top 25 Surest / Value spots) ---------- */
.app .sortbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:4px 0 14px}
.app .sortlab{font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:var(--ps-muted);margin-right:4px}
.app .sortpill{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);color:var(--ps-soft);border-radius:999px;padding:6px 13px;cursor:pointer;
  font-family:var(--ps-body);font-weight:600;text-transform:none;letter-spacing:0;font-size:13px}
.app .sortpill:hover{border-color:rgba(34,208,127,.5);color:#fff}
.app .sortpill[aria-pressed=true]{background:rgba(34,208,127,.14);border-color:rgba(34,208,127,.6);color:var(--ps-green)}
.app .pickgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.app .pickcard{display:flex;flex-direction:column;background:linear-gradient(180deg,#15294a,#10213d);border:1px solid var(--ps-line);border-radius:18px;
  padding:14px 16px 12px;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.app .pickcard:hover{transform:translateY(-2px);border-color:rgba(34,208,127,.45);box-shadow:0 16px 36px rgba(0,0,0,.35)}
.app .pc-top{display:flex;align-items:center;gap:12px}
.app .pickcard .av{width:42px;height:42px;margin:0;font-size:14px;background:#1f3a62;color:#fff}
.app .pc-who{min-width:0;flex:1}
.app .pc-who b{display:block;font-size:16px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .pc-who span{display:block;font-size:12.5px;color:var(--ps-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app .pc-prob{text-align:right;flex:none}
.app .pc-prob b{display:block;font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:32px;line-height:1;color:#fff}
.app .pickcard.hi .pc-prob b{color:var(--ps-green)} .app .pickcard.mid .pc-prob b{color:#86e6b6}
.app .pc-prob span{font-size:11px;color:var(--ps-muted)}
.app .pc-bet{display:flex;align-items:baseline;gap:8px;margin:12px 0;font-size:15px;color:var(--ps-soft)}
.app .pc-bet b{font-family:var(--ps-cond);font-size:22px;font-weight:700;color:#fff;letter-spacing:.02em}
.app .pc-bet .leantag{align-self:center}
.app .pc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px;border-top:1px solid var(--ps-line-soft)}
.app .pc-price{font-size:13px;min-width:0}
.app .pc-model{font-size:13px;color:var(--ps-soft);white-space:nowrap}
.app .pc-model b{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;font-size:19px;color:var(--ps-green)}
.app .pc-price .pmpx{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;font-size:19px}
/* opening vs current Polymarket price on a pick (app.js pxMove): up = the market moved toward it */
.pxmove{display:block;margin-top:2px;font-size:11.5px;color:var(--ps-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pxmove.inl{display:inline;margin:0}
.pxmove b{font-weight:700} .pxmove.up b{color:var(--ps-green)} .pxmove.dn b{color:var(--ps-red)}
@media(max-width:760px){.app .pickgrid{grid-template-columns:1fr}.app .pc-prob b{font-size:30px}
  .app .sortbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.app .sortbar::-webkit-scrollbar{display:none}.app .sortpill{flex:none}}

/* hit-streak leaderboard as a grid of small cards */
.app #lbbody{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.app #lbbody .mktnote,.app #lbbody > .pickgrid{grid-column:1/-1}
.app .lbrow{align-items:center;padding:12px 14px;border:1px solid var(--ps-line);border-radius:16px;background:linear-gradient(180deg,#15294a,#10213d)}
.app .lbrow .lbn{font-size:14px;color:var(--ps-soft);line-height:1.4}
.app .lbrow .lbn b{display:block;color:#fff;font-size:15px}
.app .lbstreak{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:28px;color:var(--ps-green);white-space:nowrap}

/* ---------- footer + socials ---------- */
.app .socialbar{justify-content:flex-start;gap:8px;margin:34px 0 0;max-width:none}
.app .socialtag{width:auto;text-align:left;font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:14px;color:var(--ps-muted);margin:0 6px 0 0}
.app .sociallink{padding:8px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);color:#fff;
  font-size:14px;box-shadow:none;font-family:var(--ps-cond);letter-spacing:.08em}
.app .sociallink:hover{border-color:var(--ps-green);color:var(--ps-green);transform:none;box-shadow:none}
.app footer{margin-top:18px;border-top:1px solid var(--ps-line-soft);padding-top:18px;color:var(--ps-muted);text-align:left!important}
.app footer a{color:var(--ps-soft)}

/* ================= wow layer: team colors, chance rings, ticker, shimmer, sport art ================= */

/* team-colored pick cards: a stripe down the left edge, a glow in the corner, colored initials + badge
   (--tc1/--tc2/--tcfg come from PS.teamVars() in app.js) */
.app .pickcard{position:relative;overflow:hidden;
  background:radial-gradient(300px 150px at 100% 0%,color-mix(in srgb,var(--tc1,#1f3a62) 34%,transparent),transparent 70%),
             radial-gradient(260px 130px at 0% 100%,color-mix(in srgb,var(--tc2,#3d5a86) 14%,transparent),transparent 70%),
             linear-gradient(180deg,#15294a,#10213d)}
.app .pickcard>*{position:relative;z-index:1}
.app .pickcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:1;background:linear-gradient(180deg,var(--tc1,#22d07f),var(--tc2,#22d07f))}
.app .pickcard::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .2s ease;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tc2,#22d07f) 18%,transparent),transparent 65%)}
.app .pickcard:hover::after{opacity:1}
.app .pickcard:hover{border-color:color-mix(in srgb,var(--tc2,#22d07f) 65%,transparent);box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 0 1px color-mix(in srgb,var(--tc2,#22d07f) 30%,transparent)}
.app .pickcard .av{background:var(--tc1,#1f3a62);color:var(--tcfg,#fff);box-shadow:0 0 0 2px var(--tc2,#3d5a86);border:0}
.app .pc-who .tbadge{display:inline-block;width:auto;overflow:visible;padding:0 7px;margin-right:5px;border-radius:6px;line-height:18px;background:var(--tc1,#1f3a62);color:var(--tcfg,#fff);
  border:1px solid color-mix(in srgb,var(--tc2,#3d5a86) 70%,transparent);font-family:var(--ps-cond);font-weight:700;font-size:12px;letter-spacing:.06em}

/* animated chance ring: fills from 0 to the model's chance when the card scrolls into view */
@property --pp{syntax:'<number>';inherits:false;initial-value:0}
.app .pc-prob{display:flex;flex-direction:column;align-items:center;gap:3px}
.app .ring{--pp:var(--p);position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;flex:none;
  background:conic-gradient(var(--ring,#22d07f) calc(var(--pp)*1%),rgba(255,255,255,.09) 0)}
.app .ring.on{--pp:var(--p)}
.app .ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#12264a}
.app .pickcard .pc-prob .ring b{position:relative;font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:23px;line-height:1;color:#fff}
.app .ring b small{font-size:.55em;margin-left:1px;color:var(--ps-soft)}
.app .pickcard.hi .ring{--ring:#22d07f;box-shadow:0 0 12px rgba(34,208,127,0.11)}
.app .pickcard.mid .ring{--ring:#86e6b6} .app .pickcard.lo .ring{--ring:#9fb0c6}

/* live ticker under the header (sports-TV style; pauses on hover) */
.ticker{display:flex;align-items:center;height:38px;overflow:hidden;background:rgba(6,16,30,.88);border-bottom:1px solid rgba(34,208,127,.16);
  color:#dfe6ef;font-size:13.5px;font-family:"Inter",system-ui,sans-serif}
.tk-live{flex:none;display:flex;align-items:center;gap:7px;height:100%;padding:0 14px;background:#22d07f;color:#06210b;
  font-family:var(--ps-cond);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:13px}
.tk-dot{width:7px;height:7px;border-radius:50%;background:#06210b;animation:tkblink 1.4s ease-in-out infinite}
@keyframes tkblink{50%{opacity:.25}}
.tk-view{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,transparent,#000 36px,#000 calc(100% - 36px),transparent)}
.tk-track{display:inline-flex;white-space:nowrap;animation:tkscroll var(--tkdur,60s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tkscroll{to{transform:translateX(-50%)}}
.tk-seq{display:inline-flex;align-items:center;gap:18px;padding:0 18px}
.tk-item{display:inline-flex;align-items:center;gap:7px}
.tk-item b{color:#fff;font-weight:600}
.tk-item.up b{color:#86e6b6}
.tk-ic{font-size:14px}
.tk-sep{color:rgba(34,208,127,.6)}
@media(prefers-reduced-motion:reduce){.tk-track{animation:none}.tk-view{overflow-x:auto}}

/* loading shimmer: placeholder cards while picks load */
.app .pickcard.skel{pointer-events:none;min-height:150px}
.app .pickcard.skel::before{background:rgba(255,255,255,.08)}
.app .sk{display:block;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.13) 37%,rgba(255,255,255,.05) 63%);
  background-size:400% 100%;animation:skshine 1.4s ease infinite}
@keyframes skshine{0%{background-position:100% 50%}100%{background-position:0 50%}}
.app .sk-av{width:42px;height:42px;border-radius:50%;flex:none} .app .sk-ring{width:64px;height:64px;border-radius:50%;flex:none}
.app .sk-l1{height:14px;width:62%;margin-bottom:8px} .app .sk-l2{height:10px;width:40%}
.app .sk-l3{height:18px;width:72%;margin-top:14px} .app .sk-l4{height:12px;width:46%;margin-top:14px}

/* hover + shine */
.appcta{position:relative;overflow:hidden}
.appcta::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-20deg);display:none}
@keyframes ctashine{0%,72%{left:-60%}100%{left:130%}}
.sportnav a:hover{box-shadow:0 0 0 3px rgba(34,208,127,.12)}
.app .btn,.app .refbanner{position:relative;overflow:hidden}
.app .btn::after,.app .refbanner::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .55s ease}
.app .btn:hover::after,.app .refbanner:hover::after{left:130%}
.app .tab{transition:background .15s ease,color .15s ease}
.app .edgeload{transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.app .edgeload:hover{box-shadow:0 0 0 3px rgba(34,208,127,.15)}
@media(prefers-reduced-motion:reduce){.appcta::after{animation:none;display:none}}

/* sport-themed background art: faint line drawings of a diamond / court / rink / field */
.sportbg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.075;background-repeat:no-repeat}
.sportbg-mlb{background-size:min(1050px,115vw) auto;background-position:right -8vw bottom -6vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M500 930L110 540A552 552 0 0 1 890 540Z'/%3E%3Cpath d='M330 760A180 180 0 0 1 670 760'/%3E%3Cpath d='M500 930L620 810L500 690L380 810Z'/%3E%3Cpath d='M620 798L632 810L620 822L608 810ZM500 678L512 690L500 702L488 690ZM380 798L392 810L380 822L368 810ZM492 924H508V932L500 940L492 932Z' fill='white'/%3E%3Ccircle cx='500' cy='818' r='16'/%3E%3C/svg%3E")}
.sportbg-nba{background-size:min(900px,110vw) auto;background-position:right -4vw bottom -12vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='60' y='60' width='880' height='880'/%3E%3Crect x='380' y='560' width='240' height='380'/%3E%3Ccircle cx='500' cy='560' r='120'/%3E%3Cpath d='M110 940V790A400 400 0 0 1 890 790V940'/%3E%3Ccircle cx='500' cy='880' r='15'/%3E%3Cpath d='M455 905H545M445 880A55 55 0 0 1 555 880M380 60A120 120 0 0 0 620 60'/%3E%3C/svg%3E")}
.sportbg-nhl{background-size:min(1300px,140vw) auto;background-position:center bottom -4vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='20' y='20' width='1360' height='660' rx='190'/%3E%3Cpath d='M120 60V640M1280 60V640'/%3E%3Cpath d='M480 20V680M920 20V680' stroke-width='9'/%3E%3Cpath d='M700 20V680' stroke-width='6'/%3E%3Ccircle cx='700' cy='350' r='90'/%3E%3Ccircle cx='270' cy='190' r='90'/%3E%3Ccircle cx='270' cy='510' r='90'/%3E%3Ccircle cx='1130' cy='190' r='90'/%3E%3Ccircle cx='1130' cy='510' r='90'/%3E%3Cpath d='M120 305A45 45 0 0 1 120 395M1280 305A45 45 0 0 0 1280 395'/%3E%3C/svg%3E")}
.sportbg-nfl{background-size:min(1400px,160vw) auto;background-position:center bottom -2vh;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none' stroke='white' stroke-width='3'%3E%3Crect x='20' y='60' width='1360' height='580'/%3E%3Cpath d='M130 60V640M1270 60V640' stroke-width='6'/%3E%3Cpath d='M187 60V640' stroke-width='3'/%3E%3Cpath d='M244 60V640' stroke-width='5'/%3E%3Cpath d='M301 60V640' stroke-width='3'/%3E%3Cpath d='M358 60V640' stroke-width='5'/%3E%3Cpath d='M415 60V640' stroke-width='3'/%3E%3Cpath d='M472 60V640' stroke-width='5'/%3E%3Cpath d='M529 60V640' stroke-width='3'/%3E%3Cpath d='M586 60V640' stroke-width='5'/%3E%3Cpath d='M643 60V640' stroke-width='3'/%3E%3Cpath d='M700 60V640' stroke-width='5'/%3E%3Cpath d='M757 60V640' stroke-width='3'/%3E%3Cpath d='M814 60V640' stroke-width='5'/%3E%3Cpath d='M871 60V640' stroke-width='3'/%3E%3Cpath d='M928 60V640' stroke-width='5'/%3E%3Cpath d='M985 60V640' stroke-width='3'/%3E%3Cpath d='M1042 60V640' stroke-width='5'/%3E%3Cpath d='M1099 60V640' stroke-width='3'/%3E%3Cpath d='M1156 60V640' stroke-width='5'/%3E%3Cpath d='M1213 60V640' stroke-width='3'/%3E%3Cg fill='white' stroke='none' font-family='Arial,sans-serif' font-size='44' font-weight='700' text-anchor='middle'%3E%3Ctext x='244' y='600'%3E10%3C/text%3E%3Ctext x='358' y='600'%3E20%3C/text%3E%3Ctext x='472' y='600'%3E30%3C/text%3E%3Ctext x='586' y='600'%3E40%3C/text%3E%3Ctext x='700' y='600'%3E50%3C/text%3E%3Ctext x='814' y='600'%3E40%3C/text%3E%3Ctext x='928' y='600'%3E30%3C/text%3E%3Ctext x='1042' y='600'%3E20%3C/text%3E%3Ctext x='1156' y='600'%3E10%3C/text%3E%3C/g%3E%3C/svg%3E")}
@media(max-width:760px){.sportbg{opacity:.06}.sportbg-mlb,.sportbg-nba{background-position:center bottom -4vh}}

/* ================= phones: get to the picks on the first screen ================= */
/* The hero, promo row and value banner used to fill the whole first screen on a phone, so
   no pick showed until a long scroll. Here they shrink to a headline and one row each. */
@media(max-width:760px){
  .app .apphero{padding:14px 2px 0}
  .app .eyebrow{font-size:11px;letter-spacing:.12em;padding:5px 11px;gap:8px}
  .app .apphero h1{font-size:31px;margin:10px 0 10px}
  .app .apphero .lede{display:none}
  .app .herostats{flex-wrap:nowrap;gap:6px}
  .app .herostats>div{flex:1 1 0;min-width:0;padding:7px 10px 8px;border-radius:12px}
  .app .herostats b{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app .herostats span{display:block;font-size:10px;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app .herostats>div:nth-child(2):has(~ div:not([hidden])){display:none}   /* three don't fit: "on deck" beats "data through" */
  .app .promo{margin:10px 0 0;gap:6px}
  .app .refbanner{display:block;width:100%;padding:8px 14px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .app .vwbar{margin:10px 0 0;padding:9px 14px;gap:2px 10px}
  .app .vwbar .lbl{font-size:12px}
  .app .vwbar .big{font-size:24px}
  .app .vwbar .sub{display:none}
  .app .tabs{margin:12px 0 14px}
  /* Value spots: the picks first, the two-rule explainer under them. */
  .app #valuepanel:not([hidden]){display:flex;flex-direction:column}
  .app #valuepanel .valrules{order:2;margin:14px 0 0}
}

/* "Link copied" toast for the share button */
.pstoast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,16px);opacity:0;pointer-events:none;
  padding:10px 18px;border-radius:999px;background:#22d07f;color:#06210b;font-family:"Inter",system-ui,sans-serif;font-weight:700;font-size:14px;
  box-shadow:0 14px 34px rgba(0,0,0,.4);transition:opacity .2s ease,transform .2s ease}
.pstoast.on{opacity:1;transform:translate(-50%,0)}

/* phones: Top 25 Surest shows 10 cards until "Show all" (app.js adds the button) */
.app .showall{display:none}
@media(max-width:760px){
  .app #edgebody .pickgrid:not(.all)>.pickcard:nth-child(n+11){display:none}
  .app .showall{display:block;width:100%;margin:12px 0 4px}
}

/* plain-English explainers: "How to read a card" legend, header "?" buttons, and the popover */
.pslegend{margin:0 0 12px}
.pslegend[open]{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pslegend summary{cursor:pointer}
.pslegend .lg-lab{font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:12px;color:#9fb0c6;margin-right:4px}
.qhelp{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;border-radius:999px;cursor:pointer;
  border:1px dashed rgba(34,208,127,.45);background:rgba(34,208,127,.06);color:#dfe6ef;font:600 13px/1.2 "Inter",system-ui,sans-serif}
.qhelp:hover,.qhelp[aria-expanded="true"]{border-style:solid;border-color:#22d07f;color:#fff}
.qhelp .qi{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:rgba(34,208,127,.18);color:#22d07f;font-size:11px;font-weight:700}
.qhelp.hq{padding:0;border:0;background:none;vertical-align:middle;margin-left:6px}   /* the lone "?" next to a heading */
.qhelp.hq .qi{width:20px;height:20px;font-size:12px}
.pshelp{position:absolute;z-index:300;padding:12px 14px;border-radius:14px;background:#0f2038;border:1px solid rgba(34,208,127,.5);
  box-shadow:0 18px 44px rgba(0,0,0,.5);color:#dfe6ef;font:14px/1.5 "Inter",system-ui,sans-serif}
.pshelp b{display:block;margin-bottom:3px;color:#22d07f;font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.1em;font-size:13px}

/* Jumping to a pick (Load, a shared link, search) lands the headline below the sticky
   top bar and tabs instead of underneath them. */
#headline{scroll-margin-top:136px}
@media(max-width:760px){#headline{scroll-margin-top:108px}}

/* ================= mini "last 10" chart on pick cards ================= */
.spark{display:inline-flex;align-items:flex-end;gap:6px;margin-left:auto;flex:none;align-self:center}
.sp-bars{position:relative;display:inline-flex;align-items:flex-end;gap:2px;height:26px;padding:0 2px}
.sp-bars i{display:block;width:5px;border-radius:2px 2px 0 0;background:#eb6f7d}
.sp-bars i.hit{background:#22d07f} .sp-bars i.push{background:#9fb0c6}
.sp-bars em{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.6)}
.sp-n{font-family:var(--ps-cond);font-weight:700;font-size:12.5px;letter-spacing:.04em;color:#9fb0c6;line-height:1}

/* ================= Player tab: the verdict card ================= */
.app .verdict{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 22px;margin:4px 0 18px;padding:20px 22px;
  border-radius:22px;border:1px solid var(--ps-line);box-shadow:0 18px 50px rgba(0,0,0,.34);
  background:radial-gradient(520px 220px at 0% 0%,rgba(34,208,127,.13),transparent 70%),var(--ps-card)}
.app .verdict .ring{width:112px;height:112px}
.app .verdict .ring::before{inset:8px}
.app .verdict .ring b{position:relative;font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:40px;line-height:1;color:#fff}
.app .verdict.t-hi .ring{--ring:#22d07f;box-shadow:0 0 16px rgba(34,208,127,0.12)} .app .verdict.t-mid .ring{--ring:#86e6b6} .app .verdict.t-lo .ring{--ring:#9fb0c6}
.app .verdict.v-value .ring{--ring:#22d07f;box-shadow:0 0 16px rgba(34,208,127,0.12)}   /* a value pick glows green whatever its chance */
.app .vd-main{min-width:0}
.app .vd-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.app .vd-chip{padding:5px 12px;border-radius:999px;font-family:var(--ps-cond);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;
  background:rgba(159,176,198,.16);color:#dfe6ef;border:1px solid rgba(159,176,198,.35)}
.app .verdict.v-value .vd-chip{background:var(--ps-green);color:var(--ps-green-ink);border-color:var(--ps-green);box-shadow:0 5px 13px rgba(34,208,127,0.15)}
.app .verdict.v-fair .vd-chip{background:rgba(126,226,160,.14);color:#86e6b6;border-color:rgba(126,226,160,.4)}
.app .verdict.v-skip .vd-chip{background:rgba(224,122,134,.16);color:#f3a4ae;border-color:rgba(224,122,134,.45)}
.app .verdict.v-value{border-color:rgba(34,208,127,.5)}
.app .vd-cap{font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.06em;font-size:12.5px;color:var(--ps-muted)}
.app .vd-bet{display:flex;align-items:baseline;gap:9px;margin:8px 0 4px;font-size:17px;color:var(--ps-soft)}
.app .vd-bet b{font-family:var(--ps-cond);font-size:30px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1}
.app .vd-bet .leantag{align-self:center}
.app .vd-stats{display:flex;flex-wrap:wrap;gap:6px 22px;margin:8px 0 2px}
.app .vd-stats>span{display:flex;flex-direction:column;font-family:var(--ps-cond);text-transform:uppercase;letter-spacing:.1em;font-size:11.5px;color:var(--ps-muted)}
.app .vd-stats b{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;font-size:26px;line-height:1.05;color:#fff;letter-spacing:0;text-transform:none}
.app .vd-stats b.pos{color:var(--ps-green-2)} .app .vd-stats b.neg{color:var(--ps-red)}
.app .vd-stats .vd-note{flex-direction:row;display:block;font-family:var(--ps-body);text-transform:none;letter-spacing:0;font-size:14px;color:var(--ps-soft)}
.app .vd-stats .vd-note b{font-family:inherit;font-size:inherit}
.app .vd-live{font-style:normal;color:var(--ps-green)}
.app .vd-say{margin:8px 0 0;color:var(--ps-soft);font-size:14.5px;line-height:1.5;max-width:62ch}
@media(max-width:760px){
  .app .verdict{grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:16px}
  .app .verdict .ring{width:88px;height:88px}
  .app .verdict .ring b{font-size:31px}
  .app .vd-bet b{font-size:25px}
  .app .vd-stats{gap:6px 16px}
  .app .vd-stats b{font-size:22px}
  .app .vd-say,.app .vd-share{grid-column:1/-1}
  .app .vd-say{margin-top:10px}
  .app .vd-stats{grid-column:1/-1}
}

/* Phones: the stat buttons on the Player tab sit in one swipeable row instead of a
   screen-tall block, so the answer shows sooner. */
@media(max-width:760px){
  .app #chips{display:flex;flex-wrap:nowrap;gap:16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:-14px;margin-right:-14px;padding:2px 14px 6px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .app #chips::-webkit-scrollbar{display:none}
  .app #chips .chipgrp{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;flex:none;margin:0}
  .app #chips .chip{flex:none;white-space:nowrap}
  /* NFL's controls are grids, whose cells grow to fit a no-wrap row: let them shrink so
     the row scrolls inside its box instead of widening the page */
  .app .controls,.app .controls .row,.app .controls .field{min-width:0}
  .app #chips{max-width:100%}
}

/* ================= type: Archivo headlines, Inter numbers (see :root) ================= */
.app .headline .who{font-family:var(--ps-display);font-weight:800;letter-spacing:-.02em}
.app .tile .pct{font-family:var(--ps-num);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.app .tnum,.app .edgetbl td,.app .pmpx{font-variant-numeric:tabular-nums}

/* ================= icons (app.js swaps emoji for these) ================= */
.ic{display:inline-block;width:1.05em;height:1.05em;min-width:0;max-width:none;vertical-align:-.16em;flex:none;stroke-width:2}   /* min-width: the boards size every svg for charts */
.ic.sp{margin-right:.4em}   /* the space after an emoji, kept even inside flex boxes */
.psgate-logo{min-width:0!important;height:48px!important}
.app .mkthead h2 .ic,.app .panel>h2 .ic{color:var(--ps-green);width:.95em;height:.95em}
.app .tab .ic{width:1.05em;height:1.05em;opacity:.9}
.sportnav a .ic{width:1.1em;height:1.1em}
.tk-ic .ic{color:var(--ps-green)}
.tk-item.up .tk-ic .ic{color:#86e6b6}

/* ================= pop-ups: pick details sheet, 18+ check, slim storage notice ================= */
html.ps-lock{overflow:hidden}
.pssheet{position:fixed;inset:0;z-index:250;display:grid;place-items:center;padding:20px}
.pssheet .ps-back{position:absolute;inset:0;background:rgba(4,10,20,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:psfade .18s ease}
.pssheet .ps-card{position:relative;width:min(640px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:22px 22px 18px;border-radius:22px;
  background:#0f2038;border:1px solid var(--ps-line);box-shadow:0 30px 80px rgba(0,0,0,.55);animation:psup .22s cubic-bezier(.2,.8,.2,1)}
@keyframes psfade{from{opacity:0}} @keyframes psup{from{transform:translateY(24px);opacity:0}}
.pssheet .ps-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;border:1px solid var(--ps-line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;font-size:14px}
.pssheet .ps-x:hover{border-color:var(--ps-green)}
.pssheet .ps-head{display:flex;align-items:center;gap:12px;margin:0 44px 14px 0}
.pssheet .ps-head .av{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none;font-family:var(--ps-cond);font-weight:700;font-size:15px;
  background:var(--tc1,#1f3a62);color:var(--tcfg,#fff);box-shadow:0 0 0 2px var(--tc2,#3d5a86)}
.pssheet .ps-head b{display:block;font-family:var(--ps-display);font-weight:800;font-size:20px;letter-spacing:-.01em;color:#fff}
.pssheet .ps-head span{font-size:13px;color:var(--ps-muted)}
.pssheet .ps-head .tbadge{display:inline-block;padding:0 7px;margin-right:6px;border-radius:6px;line-height:18px;background:var(--tc1,#1f3a62);color:var(--tcfg,#fff);
  font-family:var(--ps-cond);font-weight:700;font-size:12px;letter-spacing:.06em}
.pssheet .verdict{margin:0 0 14px;box-shadow:none;grid-template-columns:auto minmax(0,1fr)}
.pssheet .verdict .vd-share{grid-column:1/-1;justify-self:start}
.pssheet .ps-sub{font-size:13px;color:var(--ps-muted);margin:0 0 8px}
.pssheet .ps-sub b{color:#fff}
.pssheet .ps-bars{position:relative;display:flex;align-items:flex-end;gap:6px;height:calc(var(--h) + 20px);padding:0 2px}
.pssheet .ps-bars span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-width:0}
.pssheet .ps-bars i{display:block;width:100%;max-width:34px;border-radius:5px 5px 2px 2px;background:var(--ps-red)}
.pssheet .ps-bars .hit i{background:var(--ps-green)} .pssheet .ps-bars .push i{background:#9fb0c6}
.pssheet .ps-bars em{font-style:normal;font-size:11.5px;color:var(--ps-muted);font-variant-numeric:tabular-nums;height:16px;line-height:16px}
.pssheet .ps-line{position:absolute;left:0;right:0;border-top:1.5px dashed rgba(255,255,255,.6);pointer-events:none}
.pssheet .ps-line small{position:absolute;right:0;top:-17px;font-size:11px;color:var(--ps-soft)}
.pssheet .ps-actions{display:flex;gap:10px;margin-top:16px}
.pssheet .ps-actions .btn{flex:1;justify-content:center;padding:12px 18px}
.pssheet .ps-promo{display:grid;gap:6px;margin-top:14px;padding:12px;border-radius:14px;border:1px solid rgba(34,208,127,.35);background:rgba(34,208,127,.07)}
.pssheet .ps-ref{display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:10px;background:var(--ps-green);color:var(--ps-green-ink);font:700 14.5px var(--ps-body);text-decoration:none;text-align:center}
.pssheet .ps-ref b{font-weight:800}
.pssheet .ps-ref .ic{flex:none}
.pssheet .ps-ref2{justify-self:center;color:#86e6b6;font:600 13.5px var(--ps-body);text-decoration:none}
.pssheet .ps-ref2:hover{text-decoration:underline}
.pssheet .ps-ref:focus-visible,.pssheet .ps-ref2:focus-visible{outline:2px solid #fff;outline-offset:2px}
.pssheet .ps-fine{margin:0;text-align:center;font-size:11.5px;color:var(--ps-muted)}
.pssheet .ps-more{display:grid;gap:6px;margin-top:18px}
.pssheet .ps-more .ps-sub{margin:0 0 2px}
.pssheet .ps-mi{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:1px solid var(--ps-line);background:var(--ps-surface-2);color:var(--ps-soft);font:500 14px var(--ps-body);cursor:pointer}
.pssheet .ps-mi:hover{border-color:var(--ps-green)}
.pssheet .ps-mi:focus-visible{outline:2px solid var(--ps-green);outline-offset:2px}
.pssheet .ps-mi .ps-mt{min-width:0}
.pssheet .ps-mi b{color:#fff}
.pssheet .ps-mp{flex:none;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
@media(max-width:760px){
  .pssheet{place-items:end stretch;padding:0}
  .pssheet .ps-card{width:100%;max-height:88vh;border-radius:22px 22px 0 0;padding:20px 16px calc(16px + env(safe-area-inset-bottom))}
  @keyframes psup{from{transform:translateY(100%)}}
}
.app .pickcard.tappable{cursor:pointer}

.psgate{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:20px;background:rgba(4,10,20,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.psgate-card{width:min(460px,100%);padding:26px 24px 20px;border-radius:22px;background:#0f2038;border:1px solid #22354f;box-shadow:0 30px 80px rgba(0,0,0,.55);text-align:center;
  font-family:"Inter",system-ui,sans-serif;color:#dfe6ef}
.psgate-logo{width:48px;height:48px;margin:0 auto 12px;display:block}
.psgate-card h2{margin:0 0 8px;font-family:"Archivo","Inter",system-ui,sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;color:#fff}
.psgate-card p{margin:0 0 16px;font-size:14.5px;line-height:1.55}
.psgate-btns{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.psgate-btns .btn{display:flex;justify-content:center;align-items:center;padding:13px 18px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;
  background:#22d07f;color:#06210b;font:700 15px/1 "Inter",system-ui,sans-serif}
.psgate-btns .btn{text-transform:none!important;letter-spacing:0!important;box-shadow:none}
.psgate-btns .btn.ghost{background:transparent;color:#dfe6ef;border:1px solid rgba(255,255,255,.2)}
.psgate-card .psgate-fine{margin:0;font-size:12px;line-height:1.5;color:#9fb0c6}
.psgate-card a{color:#86e6b6}

/* the storage notice as a slim corner bar (its own styles load later, hence the extra specificity) */
html body .pslcookie{left:auto;right:14px;bottom:14px;max-width:540px;border-radius:14px}
html body .pslcookie-in{padding:8px 8px 8px 14px;gap:10px;flex-wrap:nowrap}
html body .pslcookie p{font-size:12px;line-height:1.4;min-width:0}
html body .pslcookie button{padding:7px 14px;font-size:13px;border-radius:999px;flex:none}
@media(max-width:760px){html body .pslcookie{left:8px;right:8px;bottom:8px}}

/* trust line under the hero: updated-ago, graded-in-public (gold), and the methodology link */
.pstrust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;font-family:"Inter",system-ui,sans-serif;font-size:13px;color:#9fb0c6}
.pstrust b{color:#fff;font-weight:600}
.pstrust .tr-upd{display:inline-flex;align-items:center;gap:7px}
.pstrust .tr-dot{width:7px;height:7px;border-radius:50%;background:#22d07f;box-shadow:0 0 0 3px rgba(34,208,127,.18)}
.pstrust .tr-grd{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;border:1px solid rgba(232,181,74,.45);background:rgba(232,181,74,.08);color:#e8b54a}
.pstrust .tr-grd b{color:#f3cd7a}
.pstrust .tr-grd .ic{color:#e8b54a}
.pstrust .tr-how{color:#86e6b6;text-decoration:none;font-weight:600}
.pstrust .tr-how:hover{text-decoration:underline}
.pstrust .tr-res{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 6px;padding:4px 11px;border-radius:999px;border:1px solid rgba(34,208,127,.4);background:rgba(34,208,127,.08);color:#cfeedd}
.pstrust .tr-res .ic{color:#22d07f}
.pstrust .tr-res a{color:#86e6b6;text-decoration:none;font-weight:600}
.pstrust .tr-res a:hover{text-decoration:underline}
@media(max-width:760px){.pstrust{font-size:12px;gap:6px 12px;margin-top:10px}}

/* ================= My bets ================= */
.app .vd-btns{display:flex;flex-direction:column;gap:8px;align-self:center}
.app .vd-track{white-space:nowrap}
.app .vd-track.on{background:rgba(34,208,127,.14);color:var(--ps-green);border:1px solid rgba(34,208,127,.5);box-shadow:none}
@media(max-width:760px){.app .vd-btns{grid-column:1/-1;flex-direction:row}.app .vd-btns .btn{flex:1;justify-content:center}}
.pssheet .verdict .vd-btns{grid-column:1/-1;flex-direction:row;justify-self:start}
.app .betsum{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 12px;padding:12px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--ps-line-soft);color:var(--ps-muted);font-size:13.5px}
.app .betsum b{font-family:var(--ps-num);font-weight:700;font-size:19px;color:#fff;font-variant-numeric:tabular-nums;margin-right:4px}
.app .betsum b.pos{color:var(--ps-green)} .app .betsum b.neg{color:var(--ps-red)}
.app .betrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-bottom:1px solid var(--ps-line-soft);border-left:3px solid #9fb0c6}
.app .betrow.r-hit{border-left-color:var(--ps-green)} .app .betrow.r-miss{border-left-color:var(--ps-red)} .app .betrow.r-pend{border-left-color:var(--ps-gold)}
.app .br-main{flex:1;min-width:0;color:var(--ps-soft);font-size:14.5px}
.app .br-main b{color:#fff}
.app .br-sub{display:block;font-size:12.5px;color:var(--ps-muted);margin-top:2px}
.app .br-res{font-family:var(--ps-cond);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:13px;white-space:nowrap;color:#dfe6ef}
.app .r-hit .br-res{color:var(--ps-green)} .app .r-miss .br-res{color:var(--ps-red)} .app .r-pend .br-res{color:var(--ps-gold)}
.app .br-x{border:0;background:none;color:var(--ps-muted);cursor:pointer;font-size:14px;padding:4px 6px}
.app .br-x:hover{color:#fff}
.app .vd-fair b{color:#f3cd7a}
.app .vd-fair>span{display:inline-flex;align-items:center;gap:4px}
.app .vd-fair .qhelp.hq{margin-left:0}
.app .vd-fair .qhelp.hq .qi{width:16px;height:16px;font-size:10px}
/* Locked pick (PS.lockBadge): its game starts within 20 minutes, so it's final */
.lockbadge{display:inline-flex;align-items:center;gap:3px;padding:2px 9px;border:1.5px solid #f5b942;border-radius:999px;color:#1d1300;background:#f5b942;font-weight:800;font-size:12px;line-height:1.6;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:help}
.lockbadge .ic{width:1.1em;height:1.1em}
.app .pickcard.locked{outline:2px solid #f5b942;outline-offset:-2px}
.app .pickcard.locked .pc-price,.app .pickcard.locked .livecell{opacity:.85}
.lockribbon{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-1px -1px 10px;padding:7px 14px;
  background:#f5b942;color:#1d1300;font-size:13px;line-height:1.3;border-radius:16px 16px 0 0}
.lockribbon b{font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.lockribbon span{font-weight:600}
.app .pc-who .lockbadge{display:inline-flex;width:auto;overflow:visible;margin-top:4px;color:#1d1300;font-size:12px}   /* beats .app .pc-who span */
.locknote{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.locknote{display:block} .locknote summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none} .locknote summary::-webkit-details-marker{display:none}
.locknote summary u{text-underline-offset:2px} .locknote[open] summary u{display:none} .locknote>div{margin:8px 0 0}
.locknote p{margin:0 0 4px} .locknote p:last-child{margin:0} .locknote a{color:inherit;text-decoration:underline}
.locknote .lockbadge{flex:none;margin-top:1px}
/* Polymarket and Kalshi side by side (PS.venues): the cheaper one, highlighted, is the price the pick is judged on */
.venues{display:flex;flex-wrap:wrap;gap:3px 5px;margin-top:4px;font-size:11px;line-height:1.6;color:var(--ps-muted);white-space:nowrap}
.venues .vq{padding:0 6px;border:1px solid var(--ps-line-soft);border-radius:999px}
.venues .vq b{font-weight:700;font-variant-numeric:tabular-nums}
.venues .vq.best{color:var(--ps-green);border-color:currentColor}
.venues .vq.thin{opacity:.7;border-style:dashed}
.venues .vq i{font-style:normal;font-weight:700;color:#e8b04b}
.vtag{display:inline-block;padding:0 5px;border:1px solid var(--ps-line-soft);border-radius:999px;font-size:10.5px;line-height:1.5;color:var(--ps-muted);white-space:nowrap}
.vtag.k{color:var(--ps-green);border-color:currentColor}

/* ---------- bottom card: welcome back, home-screen tip (app.js note()) ---------- */
.psnote{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;max-width:520px;margin:0 auto;
  background:#0f2038;border:1px solid #22354f;border-radius:16px;padding:14px 44px 14px 16px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  font:14px/1.45 "Inter",system-ui,sans-serif;color:#dfe6ef;display:grid;gap:10px}
.psnote p{margin:0}
.psnote b{color:#fff;font-weight:600}
.psnote .psn-x{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;border-radius:8px;background:none;color:#9fb0c6;font-size:15px;cursor:pointer}
.psnote .psn-x:hover{color:#fff;background:rgba(255,255,255,.06)}
.psnote .psn-acts{display:flex;flex-wrap:wrap;gap:8px}
.psnote .psn-b{display:inline-flex;align-items:center;border:1px solid #22354f;border-radius:10px;padding:8px 14px;background:none;color:#dfe6ef;
  font:600 14px "Inter",system-ui,sans-serif;text-decoration:none;cursor:pointer}
.psnote .psn-b.go{background:#22d07f;border-color:#22d07f;color:#06210b}
.psnote button:focus-visible,.psnote a:focus-visible{outline:2px solid #22d07f;outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.psnote{animation:psnote-in .25s ease-out}@keyframes psnote-in{from{transform:translateY(12px);opacity:0}}}
/* pick sheet: the price moved 10c+ in the last hour (app.js fastHtml) */
.ps-fast{margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(232,181,74,.45);background:rgba(232,181,74,.08);font-size:13.5px;line-height:1.45}
.ps-fast b{color:#e8b54a}
/* pick sheet: plain-English reasons (app.js reasonHtml) */
.ps-why{margin:10px 0 0;padding:10px 12px;border-radius:12px;border:1px solid var(--line, #22354f);background:rgba(255,255,255,.03);font-size:13.5px;line-height:1.45}
.ps-why>b{display:block;font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-bottom:4px}
.ps-why ul{margin:0;padding-left:18px;display:grid;gap:3px}

/* "New here?" key above the board tabs (app.js newHere) */
.psnew{border:1px solid rgba(34,208,127,.35);background:rgba(34,208,127,.06);border-radius:14px;padding:14px 16px;margin:0 0 16px}
.psnew-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.psnew-h b{font-size:16px}
.psnew-x{flex:none;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.psnew-x:hover{border-color:#22d07f;color:#22d07f}
.psnew ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.psnew li{font-size:14.5px;line-height:1.45;color:#c9d6e6}
.psnew li .k{display:inline-block;min-width:8.2em;color:#fff}
@media (max-width:620px){.psnew li .k{display:block;min-width:0}}
.psnew-f{margin:8px 0 0;font-size:13px;color:#9fb0c6}

/* ================= Simple / Pro (app.js: <html data-view>, the header toggle, the first-visit question) =================
   Simple, the default, keeps who, the line, the chance, the price and the last 10 on each card, one line
   per list header and three tabs. Pro is the full board. Both views: a shorter top on phones, the tab bar
   stays under the header, and the exchange buttons leave the phone header (each pick links to both). */
html[data-view="simple"] .pro-only, html[data-view="pro"] .simple-only{display:none!important}
.psview{flex:none;display:inline-flex;padding:3px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04)}
.psview button{border:0;background:transparent;color:#9fb0c6;font:600 13px "Inter",system-ui,sans-serif;padding:6px 13px;border-radius:999px;cursor:pointer;line-height:1}
.psview button[aria-pressed="true"]{background:#22d07f;color:#06210b}
.psview button:focus-visible{outline:2px solid #fff;outline-offset:1px}
.apptop .psview{margin-left:4px}
@media(max-width:760px){
  .apptop .appctas{display:none}
  .apptop .psview{margin-left:auto}
  .app .apphero .lede{display:none}
  .app .tabs{position:sticky;top:var(--ps-toph,104px);z-index:40;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media(min-width:761px){.app .tabs{top:var(--ps-toph,62px)}}
.tabs-mark{height:0}

/* the first-visit question */
.psgate-views{display:grid;gap:10px;margin:4px 0 14px}
.psgate-view{display:grid;gap:4px;text-align:left;padding:14px 16px;border-radius:16px;border:1px solid #2a4163;background:#13284a;color:#c9d6e6;cursor:pointer;font:14px/1.45 "Inter",system-ui,sans-serif}
.psgate-view b{display:flex;align-items:center;gap:8px;color:#fff;font:800 18px "Archivo","Inter",system-ui,sans-serif}
.psgate-view small{font:700 11px "Inter",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:#06210b;background:#22d07f;border-radius:999px;padding:3px 8px}
.psgate-view:hover,.psgate-view:focus-visible{border-color:#22d07f;outline:none}
.psgate-later{border:0;background:none;padding:0;color:#86e6b6;font:inherit;text-decoration:underline;cursor:pointer}

/* "New here?" in Simple: one line */
.psnew-line{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;font-size:14px;line-height:1.45;color:#c9d6e6}
.psnew-line b{color:#fff}
.psnew:has(.psnew-line){padding:10px 14px}
html[data-view="pro"] .psnew:has(.psnew-line){padding:14px 16px}

/* pick cards: the bet line wraps instead of cutting off the "7/10" count */
.app .pc-bet{flex-wrap:wrap;row-gap:6px}
.app .pc-bet > span:not(.leantag):not(.spark){min-width:0}

/* Simple: the trust line, the season record and the list headers on one line each */
html[data-view="simple"] .pstrust .tr-res{display:none}
html[data-view="simple"] .pstrust .tr-grd{padding:0;border:0;background:none}
html[data-view="simple"] .app .vwbar{display:inline-flex;gap:2px 8px;margin:8px 0 0;padding:0;border:0;background:none;box-shadow:none}
html[data-view="simple"] .app .vwbar .lbl{font-size:12px}
html[data-view="simple"] .app .vwbar .big{font-size:15px}
html[data-view="simple"] .app .vwbar .sub{display:none}
html[data-view="simple"] .app .mkthead > .mktmuted:not([id^="rec"]),
html[data-view="simple"] .app #edgescan, html[data-view="simple"] .app #edgestatus,
html[data-view="simple"] .app .clvbit,
html[data-view="simple"] .app details.valrules,
html[data-view="simple"] .app .pslegend,
html[data-view="simple"] .app .sortbar,
html[data-view="simple"] .app .pickgrid ~ .mktnote{display:none}
html[data-view="simple"]:not(.has-bets) .app .tab[data-tab="tools"]:not([aria-selected="true"]){display:none}
/* Simple cards: no edge, no opening price, no global-book price (the pick's details have them all).
   Both exchanges' prices stay, Polymarket and Kalshi side by side. */
html[data-view="simple"] .app .pickcard .edgebit,
html[data-view="simple"] .app .pickcard .pxmove,
html[data-view="simple"] .app .pickcard .board{display:none}

/* game start on pick cards (PS.gameTime): local time plus a countdown */
.app .pc-who .pc-when{color:var(--ps-soft);font-weight:600;margin-top:2px}
.app .pc-who .pc-when i{font-style:normal;font-weight:500;color:var(--ps-muted)}