@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800&family=Barlow:wght@400;500;600;700&display=swap');
/* Fantasy Zone - one look everywhere (31 Oct 2026).
   Loaded LAST on every page (website, NBA app, AFL app, owner dashboard) so the whole build matches the
   "broadcast" front page: Barlow / Barlow Condensed, condensed italic caps headings, flat teal + pink plates,
   square-ish 3-4px corners, no glows, no rainbow gradients. Works with both dark and light (uses each page's
   own colour variables). */
:root{--fz-cond:'Barlow Condensed','Arial Narrow',sans-serif;--fz-body:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif}

/* ---------- type ---------- */
body{font-family:var(--fz-body)!important}
h1,h2,h3,.big{font-family:var(--fz-cond)!important;letter-spacing:0!important}
h1{font-weight:800!important;font-style:italic;text-transform:uppercase;line-height:1}
h2{font-weight:800!important}
h3{font-weight:700!important}
header h1{font-style:normal}
*,*::before,*::after{text-shadow:none!important}

/* rainbow / glowing text -> solid colour */
.fxBig,.fxHero h1 span,.hero h1 span,.hero2 h1 span,.lhWord span,.clCode{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--aqua,#2fd3df)!important;animation:none!important}
.fxBig,.clCode,.lhWord{font-family:var(--fz-cond)!important;font-style:italic}

/* ---------- buttons: flat plates ---------- */
button:not(.fzThemeBtn):not(.lsItem),.btn,a.btn,.fxGo,.fxStart,.aflBtnLink,.wlGo{border-radius:3px!important;box-shadow:none!important;background-image:none!important;filter:none!important}
button:not(.fzThemeBtn):not(.lsItem):not(.secondary):not(.ghost):not(.danger):not(.tabs button):not(nav button),.btn,.fxGo,.fxStart,.aflBtnLink,.wlGo{font-family:var(--fz-cond)!important;font-weight:700!important;letter-spacing:.02em!important;font-size:max(15px,1em)}
.aflBtnLink{background:var(--aqua,#2fd3df)!important;color:var(--aqua-ink,#06262a)!important}
.tabs button,#tabRow button,nav button{border-radius:3px!important}
.tabs button.active,nav button.on{box-shadow:inset 3px 0 0 var(--pink,#ff4d8d)!important}
@media (max-width:1099px){.tabs button.active{box-shadow:inset 0 -3px 0 var(--pink,#ff4d8d)!important}}
.seg.on,.mxPick.on{box-shadow:inset 0 -3px 0 var(--pink,#ff4d8d)!important}
button.secondary:hover,button.secondary:focus-visible{box-shadow:none!important}

/* ---------- panels: flat cards, square edges, one coloured top rule ---------- */
.card,.fxPod,.fxMockBox,.fxCta,.fxAvail,.wlCard,.momCard,.trophy,.cta,.newsIn,.fxMockBand,.nbGame,.aflCard,.lsItem,.plTiles div{border-radius:4px!important;box-shadow:none!important}
.card:not(.tabs){border-top:3px solid var(--pink,#ff4d8d)!important}
.scoreRow,.brTeam,.hmRow,.mxP,.fxRoster span,input,select,textarea{border-radius:3px!important}
.scoreRow.mine,.brTeam.mine,.hmRow.mine{box-shadow:inset 4px 0 0 var(--pink,#ff4d8d)!important;background:var(--raised)!important}
header{box-shadow:none!important;background-image:none!important}
.sectionHead{box-shadow:none!important}
.badge::before{box-shadow:none!important}

/* ---------- gradients -> flat colour ---------- */
#draftDoneBanner{background:var(--panel)!important}
.mxP.isLive,.mxP.r.isLive{background:none!important}
.trophy{background:var(--raised)!important}
.momCard{background:var(--raised)!important}
#fzNotice{background:var(--pink,#ff4d8d)!important;color:#fff!important}
#fzNotice a,#fzNotice button{color:#fff!important}
.oddsBar i{background:var(--aqua,#2fd3df)!important}
.pxSpark i{background:var(--aqua,#2fd3df)!important;border-radius:1px 1px 0 0!important}
.plBar i{background:var(--aqua,#2fd3df)!important;border-radius:1px!important}
.plTiles div:first-child{background:var(--raised)!important}
.mxDigits b{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;font-style:italic}
.cta,.newsIn{background:var(--panel)!important;border-top:4px solid var(--aqua,#2fd3df)!important}
.fxMockBand{background:#0d1b2e!important}
.fxPromo,.fxClock,.fxTickLabel,.fxGrade{background:#0d1b2e!important;animation:none!important}
.fxTickLabel{background:var(--pink,#ff4d8d)!important;font-family:var(--fz-cond)!important;font-style:italic}
.fxClock{border-radius:3px!important;font-family:var(--fz-cond)}
.fxGrade{border-radius:4px!important;font-family:var(--fz-cond)!important;font-style:italic}
.fxFace{background:var(--raised)!important;color:var(--text)!important}
.fxPod{background:var(--panel)!important}
.fxPod:before{background:#0d1b2e!important;height:6px!important}
.fxPod.p1:before{background:var(--aqua,#2fd3df)!important}
.nbGame.in{box-shadow:none!important}.nbGame.in:before{background:var(--pink,#ff4d8d)!important}
.fxHero:before,.fxPageHead:before,.plHero:before{display:none!important}

/* ---------- app login screen: no neon haze ---------- */
body:has(#joinCard:not(.hidden)),body:has(#adminJoinCard:not(.hidden)),body:has(#createCard:not(.hidden)){background:var(--bg)!important}
.lhGlow{display:none!important}
.lhLogo{filter:none!important;animation:none!important}
.lhWord{font-weight:800!important;letter-spacing:0!important}
.lhSub{color:var(--muted)!important;letter-spacing:.06em!important}
body:has(#loginHero) #joinCard,body:has(#loginHero) #adminJoinCard{box-shadow:none!important;border-radius:4px!important;border-top:6px solid var(--aqua,#2fd3df)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}

/* the sun/moon switch stays a quiet round outline button on every page */
.fzThemeBtn{background:transparent!important;color:var(--text,#eceff3)!important;border:1px solid var(--line,#333842)!important;border-radius:50%!important;box-shadow:none!important}
.fzThemeBtn:hover{border-color:var(--aqua,#2fd3df)!important;background:transparent!important}
/* plain links match the brand colour */
body:has(.ow-top) a:not([class]){color:var(--aqua,#2fd3df)}
.top .fzThemeBtn{color:inherit!important}

/* app login screen in light mode: clean icon, dark wordmark, white card */
html[data-theme="light"] .lhLogo{-webkit-mask-image:none!important;mask-image:none!important;border-radius:22%;width:62%!important;height:62%!important;margin:19% auto 0}
html[data-theme="light"] .lhWord{color:var(--text)!important}
html[data-theme="light"] body:has(#loginHero) #joinCard,html[data-theme="light"] body:has(#loginHero) #adminJoinCard{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-top:6px solid var(--aqua)!important}
html[data-theme="light"] body:has(#loginHero) :is(#joinCard,#adminJoinCard) :is(label,h2,h3,p){color:var(--text)!important}

/* ---------- audit 31 Oct: same square corners on every panel, tab bar and AFL box ---------- */
:root,html[data-theme]{--radius:4px!important;--radius-sm:3px!important}
.tabs,.tabs.card{border-radius:4px!important}
.aflHeadBtn,.aflSteps>div,.aflChip,.aflToast,.clSport button,.aflSelBar,.aflMuHead,.aflGames span,.aflHomeMu,.aflTrade,.aflTrPick label,.aflCapBar,.aflCapNote,.aflSell,.aflPos,.aflYou{border-radius:4px!important}
/* menu: quiet hover, the teal fill is only for real buttons */
.tabs button:not(.active):not(:disabled):hover,#aflTabs button:not(.active):hover{background:var(--raised)!important;color:var(--text)!important}

/* NBA app: dark/light switch sits at the end of the menu, styled like a menu item */
.tabs .fzThemeBtn.fzThemeTab{width:auto!important;height:auto!important;border-radius:3px!important;border:0!important;gap:12px;justify-content:flex-start!important;padding:8px 15px!important;color:var(--text2)!important;font-weight:600}
.tabs .fzThemeBtn.fzThemeTab:hover{background:var(--raised)!important;color:var(--text)!important}
@media (min-width:1100px){.tabs .fzThemeBtn.fzThemeTab{width:100%!important;margin-top:6px}}
.tabs .fzThemeBtn.fzThemeTab{order:25}

/* create-league card: follows light/dark like the rest of the app (was always dark, so labels vanished in light mode) */
#createCard{background:var(--panel)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-top:4px solid var(--aqua,#2fd3df)!important;border-radius:4px!important}
#createCard label,#createCard h2,#createCard h3,#createCard b{color:var(--text)!important}
#createCard .muted,#createCard small,#createCard p{color:var(--muted)!important}
#createCard .clSport button,#createCard .clSteps span{background:var(--raised)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:4px!important}
#createCard .clSport button.on{border-color:var(--aqua,#2fd3df)!important;box-shadow:inset 0 0 0 1px var(--aqua,#2fd3df)!important}
#createCard .clSteps span.on{border-color:var(--aqua,#2fd3df)!important;color:var(--aqua,#2fd3df)!important}
#createCard input,#createCard select{background:var(--raised)!important;color:var(--text)!important;border:1px solid var(--line)!important}

/* NBA app, computer sidebar: the name was cut to "FANT…" by the league name and the two round buttons.
   The league name already shows in the league box just below, so the header keeps the logo + full
   "FANTASY ZONE" wordmark (stacked on two lines) and smaller buttons. */
@media (min-width:1100px){
  header .headerRow{gap:8px!important}
  header .logoMark{width:34px!important;height:34px!important}
  header .headerText #headerTag{display:none!important}
  header .headerText h1{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;font-size:20px!important;line-height:.95!important;font-style:italic!important;letter-spacing:.01em!important}
  header #pushBtn,header #acctBtn{width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;font-size:14px!important;display:inline-flex;align-items:center;justify-content:center}
  header #pushBtn.hidden,header #acctBtn.hidden{display:none!important}
}