/* Fantasy Zone — login screen (28 Oct 2026)
   The logo is the hero: big, glowing, gently floating, with the sign-in card tucked underneath.
   Only applies while a login card is showing; the rest of the app is unchanged. */

#loginHero{display:none}

/* While logging in: hide the app header + score ticker so the logo owns the screen */
body:has(#joinCard:not(.hidden)) header,
body:has(#adminJoinCard:not(.hidden)) header{display:none!important}
/* no sidebar on the login screen, so centre the page */
body:has(#joinCard:not(.hidden)) .wrap,
body:has(#adminJoinCard:not(.hidden)) .wrap{margin-left:auto!important;margin-right:auto!important;padding-top:8px!important}

body:has(#joinCard:not(.hidden)),
body:has(#adminJoinCard:not(.hidden)){
  background:
    radial-gradient(120% 70% at 50% 0%, #0d2a5c 0%, #071233 45%, #030817 100%) fixed!important;
}

body:has(#joinCard:not(.hidden)) #loginHero,
body:has(#adminJoinCard:not(.hidden)) #loginHero{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:calc(env(safe-area-inset-top,0px) + 28px) 16px 4px;
}

/* ---- The logo ---- */
.lhStage{position:relative;width:min(78vw,440px,52vh);aspect-ratio:1;margin:0 auto}
.lhGlow{position:absolute;inset:-14%;border-radius:50%;
  background:radial-gradient(circle, rgba(34,240,255,.38) 0%, rgba(34,240,255,.12) 38%, transparent 68%);
  filter:blur(18px);animation:lhPulse 4.5s ease-in-out infinite}
.lhLogo{position:relative;display:block;width:100%;height:100%;
  /* fade the square icon background into the page so only the ball + spotlight show */
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 50%, #000 46%, transparent 70%);
  filter:drop-shadow(0 0 24px rgba(34,240,255,.35));
  animation:lhFloat 6s ease-in-out infinite}

@keyframes lhFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes lhPulse{0%,100%{opacity:.75;transform:scale(.97)}50%{opacity:1;transform:scale(1.03)}}
@media (prefers-reduced-motion:reduce){.lhLogo,.lhGlow{animation:none}}

/* ---- Wordmark ---- */
.lhWord{margin:-6px 0 0;font-family:var(--font-cond,'Barlow Condensed',sans-serif);font-weight:700;
  font-size:clamp(40px,11vw,68px);line-height:.95;letter-spacing:2px;text-transform:uppercase;color:#fff;
  text-shadow:0 0 18px rgba(34,240,255,.35)}
.lhWord span{color:#22f0ff;text-shadow:0 0 12px rgba(34,240,255,.9),0 0 34px rgba(34,240,255,.55)}
.lhSub{margin:8px 0 0;color:#9fb3d6;font-size:14px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase}

/* ---- Sign-in card: glassy, narrow, centred under the logo ---- */
body:has(#loginHero) #joinCard,
body:has(#loginHero) #adminJoinCard{
  max-width:420px;margin:22px auto 32px;padding:20px 18px 14px;
  background:rgba(10,22,54,.62)!important;border:1px solid rgba(34,240,255,.28)!important;
  border-radius:18px!important;box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
#joinCard h2,#adminJoinCard h2{text-align:center;font-size:20px;letter-spacing:1px;text-transform:uppercase;color:#dff9ff}
#joinCard .grid,#adminJoinCard .grid{grid-template-columns:1fr!important}
#joinCard input,#joinCard select,#adminJoinCard input{
  background:rgba(3,10,32,.7)!important;border:1px solid rgba(120,170,255,.22)!important;color:#fff!important;
  height:46px;border-radius:10px!important;font-size:16px}
#joinCard input:focus,#joinCard select:focus,#adminJoinCard input:focus{
  outline:none;border-color:#22f0ff!important;box-shadow:0 0 0 3px rgba(34,240,255,.2)}
#joinCard .row,#adminJoinCard .row{display:flex;gap:10px}
#joinCard .row button,#adminJoinCard .row button{flex:1;height:46px;border-radius:10px;font-size:15px;font-weight:700;letter-spacing:.5px}
#joinBtn{background:#22f0ff!important;color:#04202a!important;box-shadow:0 0 18px rgba(34,240,255,.45)}
#findBtn{background:transparent!important;color:#22f0ff!important;border:1px solid rgba(34,240,255,.55)!important}
#joinCard p,#adminJoinCard p{text-align:center}
#joinStatus,#adminJoinStatus{min-height:1em}

/* ---- Roster-over-the-limit prompt (roster-limit.js) ---- */
#overLimitBox{border:1px solid rgba(255,84,104,.55)!important;background:rgba(255,84,104,.08)!important;margin:0 0 14px}
.olHead{font-weight:700;margin-bottom:8px;color:#ffd5db}
.olRow{display:flex;align-items:center;gap:10px;padding:6px 0}
.olName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.olSlot{font-size:12px;color:var(--muted,#959dab);min-width:52px;text-align:right}
.olNoSlot{color:var(--gold,#e6b74a);font-weight:700}
.olBtn{width:auto!important;flex:none;padding:6px 14px}
.olTeam{border:1px solid var(--line,#333842);border-radius:10px;padding:8px 10px;margin-bottom:8px}
.olTeam summary{cursor:pointer;display:flex;align-items:center;gap:8px}

/* ---- Admin: Email the league + Invite links (league-tools.js) ---- */
#lmMessage{resize:vertical;min-height:120px;line-height:1.45}
.lmTo{margin:10px 0 4px;border:1px solid var(--line,#333842);border-radius:10px;padding:8px 10px}
.lmTo summary{cursor:pointer;font-size:14px}
.lmCheck{display:flex!important;align-items:center;gap:8px;font-weight:500!important;margin:8px 0 0!important;font-size:14px}
.lmCheck input{width:18px!important;height:18px;flex:none;margin:0}
.lmCheck .muted{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmBtns button{flex:1}
.lmHist{padding:6px 0;border-bottom:1px solid var(--line-soft,#2a2e36);font-size:14px}
.ilRow{display:flex;align-items:center;gap:8px;padding:6px 0;flex-wrap:wrap}
.ilName{flex:1;min-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ilBtn{width:auto!important;flex:none;padding:6px 12px!important;font-size:13px}
.ilNew{opacity:.75}
.ilLeague{border-top:1px solid var(--line-soft,#2a2e36);margin-top:4px;padding-top:10px}

/* ---- Divisions (divisions.js) ---- */
.divBlock{margin:0 0 18px}
.divHead{margin:6px 0 8px!important;font-family:var(--font-cond)!important;font-size:20px!important;letter-spacing:1.5px;text-transform:uppercase;
  padding-left:10px;border-left:3px solid var(--aqua,#2fd3df)}
.divBlock:nth-child(2) .divHead{border-left-color:var(--pink,#ff2d95)}
.divTable{width:100%;border-collapse:collapse}
.divTable th,.divTable td{padding:8px 6px;text-align:center;white-space:nowrap}
.divTable th.l,.divTable td.l{text-align:left;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.divTable tr.mine td{background:var(--pink-tint)!important}
.divTable tr.mine td:first-child{box-shadow:inset 3px 0 0 var(--pink)}
.divTable tr.divLead td{font-weight:700}
.divTag{display:inline-block;margin-left:6px;font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#04202a;background:var(--aqua,#2fd3df);border-radius:5px;padding:1px 6px;vertical-align:1px}
.divBlock:nth-child(2) .divTag{background:var(--pink,#ff2d95);color:#fff}
.dvRow{display:flex;align-items:center;gap:8px;padding:5px 0}
.dvName{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dvRow select{width:auto!important;min-width:110px;flex:none}
@media(max-width:640px){.divTable th:nth-child(6),.divTable td:nth-child(6){display:none}}
.hmDiv{font-family:var(--font-cond);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--aqua,#2fd3df);margin:10px 0 2px;padding-left:8px;border-left:3px solid var(--aqua,#2fd3df)}
.hmDiv~.hmDiv{color:var(--pink,#ff2d95);border-left-color:var(--pink,#ff2d95)}