/* Fantasy Zone - phone login screen in the website's light look (31 Oct 2026).
   Only on phones (html.fzPhone) and only while the login card is showing. Desktop and the app itself are unchanged. */
.lhKicker,.lhHead,.lhBar{display:none}

html.fzPhone body:has(#joinCard:not(.hidden)){
  --ll-bg:#eef2f8;--ll-panel:#fff;--ll-raised:#f3f6fb;--ll-line:#d3dbe8;--ll-text:#101b33;--ll-text2:#33425e;--ll-muted:#5b6880;--ll-aqua:#0a8b9c;--ll-pink:#d81b6e;
  background:
    radial-gradient(60% 34% at 8% 6%,rgba(47,211,223,.30),transparent 70%),
    radial-gradient(55% 30% at 95% 10%,rgba(255,77,141,.24),transparent 70%),
    radial-gradient(50% 26% at 60% 30%,rgba(123,92,255,.16),transparent 70%),
    var(--ll-bg)!important;
  background-attachment:scroll!important;color:var(--ll-text)!important}
html.fzPhone:has(body #joinCard:not(.hidden)){background:#eef2f8!important;color-scheme:light}

/* ---- top bar + hero, like the website front page ---- */
html.fzPhone body:has(#joinCard:not(.hidden)) #loginHero{align-items:stretch;text-align:left;padding:0 0 4px}
html.fzPhone body:has(#joinCard:not(.hidden)) .lhStage,
html.fzPhone body:has(#joinCard:not(.hidden)) .lhWord,
html.fzPhone body:has(#joinCard:not(.hidden)) .lhSub{display:none}
html.fzPhone body:has(#joinCard:not(.hidden)) .lhBar{display:flex;align-items:center;gap:10px;margin:0 -16px;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 18px 12px;background:var(--ll-panel);border-bottom:1px solid var(--ll-line)}
.lhBar img{width:36px;height:36px;border-radius:8px}
.lhBar b{font-size:17px;letter-spacing:.08em;color:var(--ll-text,#101b33)}.lhBar b span{color:var(--ll-aqua,#0a8b9c)}
html.fzPhone body:has(#joinCard:not(.hidden)) .lhKicker{display:block;margin:26px 2px 6px;color:var(--ll-pink);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
html.fzPhone body:has(#joinCard:not(.hidden)) .lhHead{display:block;margin:0 2px;font-size:clamp(30px,8.6vw,40px);line-height:1.08;font-weight:800;color:var(--ll-text);letter-spacing:-.01em}
.lhHead em{font-style:normal;background:linear-gradient(90deg,#d81b6e,#2fd3df);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- the card ---- */
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard{
  margin:20px auto 28px;padding:20px 18px 14px;background:var(--ll-panel)!important;border:1px solid var(--ll-line)!important;
  border-top:3px solid var(--ll-aqua)!important;border-radius:18px!important;box-shadow:0 20px 50px rgba(16,27,51,.14)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none;color:var(--ll-text)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard h2{color:var(--ll-text)!important;text-shadow:none!important;text-align:left;text-transform:none;letter-spacing:0;font-size:20px;font-family:inherit}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard label{color:var(--ll-text2)!important;font-weight:700}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard input,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard select{background:var(--ll-raised)!important;border:1px solid var(--ll-line)!important;color:var(--ll-text)!important;box-shadow:none!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard input::placeholder{color:#8a96ab!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard input:focus,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard select:focus{border-color:var(--ll-aqua)!important;box-shadow:0 0 0 3px rgba(10,139,156,.18)!important}
/* main buttons: solid teal like "Create a free league" on the website */
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .fzSportRow button[type=submit],
html.fzPhone body:has(#joinCard:not(.hidden)) #joinBtn,
html.fzPhone body:has(#joinCard:not(.hidden)) #elCodeGo{background:var(--ll-aqua)!important;color:#fff!important;border:0!important;box-shadow:none!important;text-shadow:none!important;border-radius:10px!important;height:48px;font-weight:800}
/* create buttons: white with a border like "I'm in a league" */
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .clStart,
html.fzPhone body:has(#joinCard:not(.hidden)) #findBtn{background:var(--ll-panel)!important;color:var(--ll-text)!important;border:1px solid var(--ll-line)!important;box-shadow:0 1px 2px rgba(16,27,51,.06)!important;font-weight:800}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .clStart{color:var(--ll-pink)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .linkBtn{color:var(--ll-aqua)!important;text-shadow:none!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .muted,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .clDivider,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .mlHead{color:var(--ll-muted)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .clDivider::before,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .clDivider::after{background:var(--ll-line)}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elHelp{background:#fdf0f6;border-color:#f4c4da;color:var(--ll-text2)}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elCodeBox{background:#eefafb;border-color:#b9e3e8}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .mlChip,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elChoice{background:var(--ll-raised)!important;border:1px solid var(--ll-line)!important;color:var(--ll-text)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .mlChip span,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elChoice small{color:var(--ll-muted)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elChoice i{color:var(--ll-aqua)}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .fzLegal,
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .fzLegal a{color:var(--ll-muted)!important}
html.fzPhone body:has(#joinCard:not(.hidden)) #joinCard .elBad{color:var(--ll-pink)!important}