/* 30PICK'EM — Premium System v1 (0.9.43, presentation only)
   One small shared visual system laid over the existing screen layers
   (premium-shell-v2, home-v3, picks-v3, standings-v3, profile-v3,
   admin-menu-v3, legacy stack). Loaded last. It does not restyle anything
   from scratch: it re-points each layer's own tokens at the shared ones and
   calms the few rules that bypass those tokens.

   Principle: calm neutral structure; strong colour only where it means
   something.
     cyan  — selected state, active navigation, focus, current league/screen,
             live/interactive emphasis
     gold  — commissioner / premium identity, winner, money pool, the one
             primary action per surface
     red   — destructive or live-danger only
   The Game of the Week card (.p2GotwBoard and the .pv3Tb tiebreaker) is not
   matched by any selector in this file. */

:root{
  /* surfaces */
  --ps-bg:#050a13;
  --ps-panel:linear-gradient(180deg,rgba(13,24,40,.96) 0%,rgba(8,15,27,.98) 100%);
  --ps-panel-2:rgba(9,17,30,.86);
  --ps-tile:rgba(255,255,255,.035);
  /* lines */
  --ps-hair:rgba(148,178,214,.12);
  --ps-line:rgba(148,178,214,.19);
  --ps-line-strong:rgba(148,178,214,.28);
  /* accents */
  --ps-cyan:#4cc3ff;
  --ps-cyan-text:#8fd6ff;
  --ps-cyan-line:rgba(76,195,255,.55);
  --ps-cyan-tint:rgba(40,150,255,.10);
  --ps-gold:#e9c264;
  --ps-gold-2:#ffe29a;
  --ps-gold-line:rgba(233,194,100,.42);
  /* text + status */
  --ps-text:#f4f8fc;
  --ps-text-2:#dbe5f1;
  --ps-muted:#93a4b8;
  --ps-danger:#ff6b7d;
  --ps-success:#3ee08f;
  /* elevation: depth, not glow */
  --ps-shadow:0 10px 26px rgba(0,0,0,.30),inset 0 1px 0 rgba(255,255,255,.035);
  /* motion */
  --ps-dur:150ms;
  --ps-ease:cubic-bezier(.2,.7,.2,1);
}

/* Shared presentation concepts, for new markup. Existing screens map onto
   the same values through their own tokens below. */
.psKicker{font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ps-gold)}
.psTitle{font-family:'Oswald','Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1.02;text-transform:uppercase;color:var(--ps-text)}
.psSub{font-size:12.5px;line-height:1.4;font-weight:600;color:var(--ps-muted)}
.psPanel{border:1px solid var(--ps-line);border-radius:14px;background:var(--ps-panel);box-shadow:var(--ps-shadow)}
.psPanel2{border:1px solid var(--ps-hair);border-radius:12px;background:var(--ps-panel-2)}
.psChip{display:inline-flex;align-items:center;min-height:22px;padding:2px 8px;border-radius:6px;background:rgba(255,255,255,.06);color:#b9c7d8;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* ======================================================================
   1. Screen tokens → shared tokens
   ====================================================================== */
html body :is(#league,#more,#modalSheet){
  --amv3-line:var(--ps-line);
  --amv3-line-soft:var(--ps-hair);
  --amv3-card:var(--ps-panel);
}
html body :is(#account,#modalSheet){
  --prv3-line:var(--ps-line);
  --prv3-line-soft:var(--ps-hair);
  --prv3-card:var(--ps-panel);
  --prv3-hot:radial-gradient(80% 70% at 50% 0%,rgba(0,210,255,.10),rgba(0,210,255,0) 100%);
}
html body #standings{
  --sv3-line:var(--ps-line);
  --sv3-line-soft:var(--ps-hair);
}

/* ======================================================================
   2. Bottom navigation — one icon family, calm active state
   ====================================================================== */
html body .footer .nav{
  gap:4px!important;
  color:#7f8b9b!important;
  font-size:10.5px!important;
  font-weight:600!important;
  letter-spacing:.02em!important;
  line-height:1.1!important;
  text-shadow:none!important;
  background:transparent!important;
  transition:color var(--ps-dur) var(--ps-ease),opacity var(--ps-dur) var(--ps-ease);
  -webkit-tap-highlight-color:transparent;
}
html body .footer .nav b{
  display:grid!important;place-items:center!important;
  width:26px!important;height:24px!important;margin:0 auto 1px!important;flex:0 0 auto!important;
  font-size:0!important;line-height:0!important;
  color:inherit!important;text-shadow:none!important;
  opacity:.78;
  transition:transform var(--ps-dur) var(--ps-ease),opacity var(--ps-dur) var(--ps-ease);
}
html body .footer .nav b svg{
  width:23px;height:23px;display:block;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
html body .footer .nav b svg text{fill:currentColor;stroke:none;font-family:'Oswald','Barlow Condensed',Inter,sans-serif;font-weight:700;font-size:9px;letter-spacing:-.2px}
html body .footer .nav.active{color:#eef7ff!important;text-shadow:none!important;background:transparent!important}
html body .footer .nav.active b{color:var(--ps-cyan)!important;opacity:1}
html body .footer .nav.active:before{
  left:calc(50% - 14px)!important;right:auto!important;width:28px!important;
  top:0!important;height:2px!important;border-radius:0 0 2px 2px!important;
  background:var(--ps-cyan)!important;box-shadow:none!important;opacity:1!important;
}
html body .footer .nav:active b{transform:scale(.92)}
@media(max-width:899px){
  html body>.footer{border-top:1px solid var(--ps-hair)!important}
}
/* Desktop rail: icon sits beside the label. */
@media(min-width:900px){
  html body .footer .nav:not(.mobileMoreNav){display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;font-size:14px!important;gap:10px!important}
  html body .footer .nav b{margin:0!important}
  html body .footer .nav.active{border-color:rgba(76,195,255,.32)!important;background:rgba(76,195,255,.06)!important;box-shadow:none!important}
}

/* ======================================================================
   3. Commissioner Control Room / League Management (admin-menu-v3)
   ====================================================================== */
/* Sections: neutral hairline + depth instead of a cyan glow. */
html body :is(#league,#more) .amv3Sec,
html body :is(#league,#more,#modalSheet) .amv3Card{box-shadow:var(--ps-shadow)}
html body :is(#league,#more) .amv3Sec.gold{border-color:var(--ps-gold-line);box-shadow:var(--ps-shadow)}
html body :is(#league,#more) .amv3SecHead{color:var(--ps-cyan-text)}
html body :is(#league,#more) .amv3Sec.gold .amv3SecHead{color:var(--amv3-gold)}
/* Back + icon tiles: one neutral tile; the glyph carries the colour. */
html body :is(#league,#more,#modalSheet) .amv3Back{border:1px solid var(--ps-line-strong);background:rgba(10,20,35,.9);color:var(--ps-cyan-text);box-shadow:none}
html body :is(#league,#more,#modalSheet) .amv3RowIco{border-color:var(--ps-line);background:var(--ps-tile);color:var(--ps-cyan-text)}
html body :is(#league,#more) .amv3Row.gold .amv3RowIco{border-color:rgba(255,210,74,.45);background:rgba(34,24,4,.7)}
html body :is(#league,#more) .amv3Row.danger .amv3RowIco,
html body #more .amv3Row.final .amv3RowIco{border-color:rgba(255,107,125,.35)}
html body #more .amv3RowIco.flame{border-color:rgba(255,150,60,.45)}
html body :is(#league,#more,#modalSheet) .amv3Row{min-height:60px}
html body :is(#league,#more,#modalSheet) .amv3Chev{color:#7f8fa3;opacity:1}
/* Status chips: informational, not buttons — no outline unless it means something. */
html body :is(#league,#more,#modalSheet) .amv3Chip{border-color:transparent;background:rgba(255,255,255,.06);color:#b9c7d8}
html body :is(#league,#more,#modalSheet) .amv3Chip.count{border-color:transparent;background:rgba(76,195,255,.10);color:var(--ps-cyan-text)}
html body :is(#league,#more,#modalSheet) .amv3Chip.gold{border-color:rgba(255,210,74,.38);background:rgba(34,24,4,.7)}
html body :is(#league,#more,#modalSheet) .amv3Chip.ok{border-color:rgba(62,224,143,.32)}
html body :is(#league,#more,#modalSheet) .amv3Chip.warn{border-color:rgba(255,181,71,.34)}
html body :is(#league,#more,#modalSheet) .amv3Chip.red{border-color:rgba(255,107,125,.38)}
html body :is(#league,#more) .amv3SecCount{border-color:transparent;background:rgba(76,195,255,.10)}
/* League hero: photo, crest, crown and every value preserved; one strong status. */
html body :is(#league,#more) .amv3Active{border:1px solid var(--ps-line-strong);box-shadow:0 14px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(223,249,255,.10)}
html body :is(#league,#more) .amv3Active.comm{border-color:var(--ps-gold-line);box-shadow:0 14px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,231,160,.12)}
html body :is(#league,#more) .amv3Active .amv3Chips{gap:5px}
html body :is(#league,#more) .amv3Active .amv3Chip{background:rgba(3,10,22,.55);color:#aebdd0;font-size:12px;letter-spacing:.7px}
html body :is(#league,#more) .amv3Active .amv3Chip.cyan{background:var(--amv3-cyan-lt);color:#062033;font-size:12.5px;letter-spacing:.8px}
html body :is(#league,#more) .amv3Active .amv3Chip.gold{background:rgba(34,24,4,.75);color:var(--amv3-gold)}
html body :is(#league,#more) .amv3Active .amv3Chip.ok{background:rgba(10,48,30,.6);color:#9ff5c6}
html body :is(#league,#more) .amv3Code{border:1px solid var(--ps-line);background:rgba(3,10,22,.62)}
html body #more .amv3Art{border-color:var(--ps-line)}
html body #more .amv3ArtIco{border-color:var(--ps-line)}
/* League lists: the current league stays cyan, the rest are neutral. */
html body #league .amv3Lg{border-color:var(--ps-hair)}
html body #league .amv3Lg.active{border-color:rgba(76,195,255,.45)}
html body #league .amv3Switch{border:1px solid var(--ps-line-strong);background:rgba(10,20,35,.9)}
html body :is(#league,#more) .amv3Crest:not(.comm){border-color:rgba(143,220,255,.45)}
/* Buttons: default = secondary (dark + neutral line); gold stays primary. */
html body :is(#league,#more,#modalSheet) .amv3Btn:not(.gold):not(.warn){border:1px solid var(--ps-line-strong);background:rgba(12,22,38,.92);color:var(--ps-text-2);box-shadow:none}
html body :is(#league,#more,#modalSheet) .amv3Btn:not(.gold):not(.warn) .amv3Ico{color:var(--ps-cyan-text)}
html body :is(#league,#more,#modalSheet) .amv3Btn.gold{box-shadow:0 6px 16px rgba(0,0,0,.3)}
/* Menu sheet */
html body #modalSheet .amv3Id{border:1px solid var(--ps-line-strong);box-shadow:0 12px 26px rgba(0,0,0,.34),inset 0 1px 0 rgba(223,249,255,.10)}
html body #modalSheet .amv3Nav{box-shadow:var(--ps-shadow)}
html body #modalSheet .amv3NavIco{border-color:var(--ps-line);background:var(--ps-tile);color:var(--ps-cyan-text)}
html body #modalSheet .amv3Nav:is(.gold,.goldSoft) .amv3NavIco{border-color:rgba(255,210,74,.5)}
html body #modalSheet .amv3Nav.gold{box-shadow:0 8px 20px rgba(0,0,0,.3)}
html body #modalSheet .amv3Av{box-shadow:0 0 10px 1px rgba(0,102,255,.18)}

/* ======================================================================
   4. Profile (profile-v3)
   ====================================================================== */
html body #account .prv3Card{box-shadow:var(--ps-shadow)}
html body #account .prv3Hero{border:1px solid var(--ps-line-strong);box-shadow:0 14px 30px rgba(0,0,0,.36),inset 0 1px 0 rgba(223,249,255,.12)}
html body #account .prv3Hero:before,html body #account .prv3Hero:after{filter:none;opacity:.85}
html body #account .prv3Avatar{box-shadow:0 0 12px 2px rgba(0,102,255,.20)}
html body #account .prv3Stat:not(.gold){border-color:var(--ps-line)}
html body #account .prv3Stat:not(.gold) .prv3StatLabel{color:var(--ps-cyan-text)}
html body #account .prv3Stat.gold{box-shadow:none}
html body #account .prv3SecIco.cyan{border:1px solid var(--ps-line);background:var(--ps-tile);color:var(--ps-cyan-text)}
html body #account .prv3SecIco:not(.cyan):not(.heart){border-width:1px;border-color:rgba(255,210,74,.45)}
html body #account .prv3SecIco.heart{border-width:1px;border-color:rgba(255,120,140,.4)}
html body #account .prv3RowIco:not(.gold){border-color:var(--ps-line);background:var(--ps-tile)}
html body #account .prv3Lg{border-color:var(--ps-hair)}
html body #account .prv3Lg.active{border-color:rgba(76,195,255,.45)}
html body #account .prv3Crest:not(.comm){border-color:rgba(143,220,255,.45)}
html body #account .prv3Row.tools{border-color:rgba(255,210,74,.40)}
html body #account .prv3AddRing{border-color:rgba(95,227,255,.42)}
/* Buttons: cyan-outlined buttons become secondary; gold stays primary. */
html body #account .prv3Btn:not(.gold),
html body #modalSheet .prv3Btn:not(.gold):not(.danger){border:1px solid var(--ps-line-strong);background:rgba(12,22,38,.92);color:var(--ps-text-2);box-shadow:none}
html body #account .prv3Btn:not(.gold) .prv3Ico{color:var(--ps-cyan-text)}
html body #account .prv3Btn.gold{box-shadow:0 6px 16px rgba(0,0,0,.3)}
html body #account .prv3Pill,
html body #account .prv3Mini:not(.gold):not(.quiet){border:1px solid var(--ps-line-strong);background:rgba(12,22,38,.92);color:var(--ps-cyan-text)}
html body #account .prv3Mini.gold{border-color:rgba(255,210,74,.5)}
html body #account .prv3Status{border-color:var(--ps-line)}

/* ======================================================================
   5. Standings (standings-v3) — medals lead, "you" is marked, not lit
   ====================================================================== */
html body #standings #lockedPicksBtn.sv3LockedBtn{border:1px solid var(--ps-line-strong)!important;background:rgba(12,22,38,.92)!important;box-shadow:none!important}
html body #standings #standingsTabs.sv3Tabs .standingTab:not(.active){border-color:var(--ps-hair)!important;background:rgba(12,22,38,.7)!important}
html body #standings #standingsTabs.sv3Tabs .standingTab.active{box-shadow:inset 0 0 0 1px rgba(233,194,100,.25)!important}
html body #standings .sv3Board{box-shadow:0 10px 24px rgba(0,0,0,.26)}
html body #standings .sv3Leader{box-shadow:none}
html body #standings .sv3Row.me{
  background:linear-gradient(90deg,rgba(40,150,255,.13),rgba(40,150,255,.04))!important;
  box-shadow:inset 0 0 0 1px rgba(92,200,255,.34),inset 3px 0 0 var(--ps-cyan);
}
/* On a podium row the medal colour keeps the left rail; "you" is a thin ring. */
html body #standings .sv3Row.me.sv3Medal1{background:linear-gradient(90deg,rgba(233,194,100,.18),rgba(233,194,100,0) 70%),linear-gradient(90deg,rgba(40,150,255,.06),rgba(40,150,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(92,200,255,.34)}
html body #standings .sv3Row.me.sv3Medal2{background:linear-gradient(90deg,rgba(185,203,224,.12),rgba(185,203,224,0) 70%),linear-gradient(90deg,rgba(40,150,255,.06),rgba(40,150,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(92,200,255,.34)}
html body #standings .sv3Row.me.sv3Medal3{background:linear-gradient(90deg,rgba(213,138,82,.14),rgba(213,138,82,0) 70%),linear-gradient(90deg,rgba(40,150,255,.06),rgba(40,150,255,.03))!important;box-shadow:inset 0 0 0 1px rgba(92,200,255,.34)}
html body #standings .sv3Row.me.sv3Medal1 .sv3Rank b,html body #standings .sv3Row.me.sv3Medal1 .sv3Primary{color:var(--sv3-gold-2)}
html body #standings .sv3Pod.me{box-shadow:0 0 0 1px rgba(92,200,255,.5) inset}
html body #standings .sv3Sport .sportBreakdownRow.me{background:linear-gradient(90deg,rgba(40,150,255,.13),rgba(40,150,255,.04))!important;box-shadow:inset 0 0 0 1px rgba(92,200,255,.34),inset 3px 0 0 var(--ps-cyan)!important}
html body #standings .sv3WeekPicker,
html body #standings .sportBreakdownTab:not(.active){border-color:var(--ps-line)!important}

/* ======================================================================
   6. Home (home-v3) — one primary action
   ====================================================================== */
html body #home .hv3Live{border-color:var(--ps-line)}
html body #home .hv3Schedule{border:1px solid var(--ps-line-strong);background:rgba(12,22,38,.92);box-shadow:none;color:var(--ps-text-2)}
html body #home .hv3Schedule svg{color:var(--ps-gold)}

/* ======================================================================
   7. 30 Hub — neutral structure, one primary
   ====================================================================== */
html body #app #hub{--hub-line:var(--ps-line);--hub-line-soft:var(--ps-hair)}
html body #app #hub .hubPageHero.hubHero0535,html body #app #hub .hubPageHero{border-color:var(--ps-line-strong)!important;box-shadow:0 14px 30px rgba(0,0,0,.34),inset 0 1px 0 rgba(223,249,255,.08)!important}
html body #app #hub:not(.hubPlayerCardActive) .hubPageTab:not(.active){border-color:var(--ps-hair)!important}
html body #app #hub:not(.hubPlayerCardActive) .hubPageTab.active{box-shadow:inset 0 0 0 1px rgba(233,194,100,.25)!important}
html body #app #hub .hubWeekFeature{box-shadow:var(--ps-shadow)!important}
html body #app #hub .hubWeekMetrics>div,html body #app #hub .todaySportsQuickStats>*{border-color:var(--ps-hair)!important}
html body #app #hub .hubWeekSports>span,html body #app #hub .todaySportsTab:not(.active),html body #app #hub .newsTab:not(.active){border-color:var(--ps-line)!important}
html body #app #hub .hubSpotlight{border-color:var(--ps-line)!important}
html body #app #hub .newsStory{box-shadow:none!important}
html body #app #hub .todaySportsTab.active,html body #app #hub .newsTab.active{box-shadow:none!important}
html body #app #hub .hubWeekActions .btn:not(.primary),html body #app #hub .hubSectionHead .btn,html body #app #hub .newsHeader .btn,html body #app #hub .todaySportsEmpty .btn{border:1px solid var(--ps-line-strong)!important;background:rgba(12,22,38,.92)!important;color:var(--ps-text-2)!important;box-shadow:none!important}

/* ======================================================================
   8. Picks — ordinary board chrome only (GOTW untouched)
   ====================================================================== */
html body #picks .pv3Chrome{border-bottom-color:var(--ps-hair)}
html body #picks .pv3DayBtn:not(.active){border-color:var(--ps-line)}
html body #picks .pv3Filter:not(.active){border-color:var(--ps-line)}
/* Ordinary game cards: the frame is neutral whether or not it's picked, so
   the selected side (cyan), live (red rail) and graded (green/red) states
   are the only colour on the card. */
html body #picks .pv3Card{--pv3-line:rgba(148,178,214,.20);--pv3-line-soft:var(--ps-hair)}
html body #picks .pv3Card.is-picked:not(.is-live):not(.is-correct):not(.is-incorrect){border-color:rgba(148,178,214,.20)}
html body #picks .pv3Team.selected:not(.correct):not(.incorrect) .logoShell-pv3{box-shadow:0 0 0 1.5px rgba(99,190,255,.7),0 3px 7px rgba(0,0,0,.45)}

/* ======================================================================
   9. Interaction — 120–180ms, small, no bounce
   ====================================================================== */
html body :is(
  #league .amv3Row,#more .amv3Row,#modalSheet .amv3Row,#modalSheet .amv3Nav,
  #league .amv3Btn,#more .amv3Btn,#modalSheet .amv3Btn,#league .amv3Lg,#league .amv3Switch,
  #account .prv3Btn,#modalSheet .prv3Btn,#account .prv3Row,#account .prv3Mini,#account .prv3Pill,#account .prv3Lg,#account .prv3Cta,#account .prv3Week,
  #home .hv3Cta,#home .hv3Schedule,#home .hv3Up,#home .hv3Live,#home .hv3Story,
  #hub .hubPageTab,#hub .hubWeekActions .btn,
  #standings .standingTab,#standings .sportBreakdownTab,#standings #lockedPicksBtn,
  #picks .pv3DayBtn,#picks .pv3Filter,#picks .pv3Card .pv3Team
){
  transition:transform var(--ps-dur) var(--ps-ease),filter var(--ps-dur) var(--ps-ease),border-color var(--ps-dur) var(--ps-ease),background-color var(--ps-dur) var(--ps-ease),opacity var(--ps-dur) var(--ps-ease);
}
html body :is(
  #league .amv3Btn,#more .amv3Btn,#modalSheet .amv3Btn,#league .amv3Switch,
  #account .prv3Btn,#modalSheet .prv3Btn,#account .prv3Mini,#account .prv3Pill,
  #home .hv3Cta,#home .hv3Schedule,#hub .hubWeekActions .btn,#hub .hubPageTab,
  #standings .standingTab,#standings .sportBreakdownTab,#standings #lockedPicksBtn,
  #picks .pv3DayBtn,#picks .pv3Filter
):active:not(:disabled){transform:scale(.97)!important;filter:brightness(1.08)}
html body :is(
  #league .amv3Row,#more .amv3Row,#modalSheet .amv3Row,#modalSheet .amv3Nav,#league .amv3Lg,
  #account .prv3Row,#account .prv3Lg,#account .prv3Cta,#account .prv3Week,
  #home .hv3Up,#home .hv3Live,#home .hv3Story,#picks .pv3Card .pv3Team
):active:not(:disabled){filter:brightness(1.12)}
html body :is(#league,#more) button.amv3CrestEdit,
html body #account .prv3Avatar{transition:transform var(--ps-dur) var(--ps-ease),box-shadow var(--ps-dur) var(--ps-ease)}
html body #account .prv3Avatar:active{transform:scale(.97)}
@media (hover:hover){
  html body :is(#league .amv3Row,#more .amv3Row,#modalSheet .amv3Nav,#account .prv3Row,#home .hv3Up):hover{filter:brightness(1.08)}
}
/* Focus: cyan is the focus colour everywhere. */
html body :is(#home,#hub,#standings,#picks) :is(button,a,select):focus-visible{outline:2px solid var(--ps-cyan-text);outline-offset:2px}
/* Sheet entrance: short fade + 10px rise; no fill, so nothing stays transformed. */
@keyframes psSheetIn{from{opacity:.001;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes psFadeIn{from{opacity:.001}to{opacity:1}}
html body #modal:not(.hidden){animation:psFadeIn 160ms var(--ps-ease)}
html body #modal:not(.hidden)>#modalSheet{animation:psSheetIn 180ms var(--ps-ease)}

@media (prefers-reduced-motion:reduce){
  html body #modal:not(.hidden),html body #modal:not(.hidden)>#modalSheet{animation:none}
  html body .footer .nav,html body .footer .nav b,
  html body :is(#league,#more,#modalSheet,#account,#home,#hub,#standings,#picks) :is(button,.amv3Lg,.prv3Lg,.prv3Week){transition:none!important}
  html body .footer .nav:active b,
  html body :is(#league,#more,#modalSheet,#account,#home,#hub,#standings,#picks) :is(button,.amv3Lg,.prv3Lg,.prv3Week):active{transform:none!important}
}