/* Production additions on top of the prototype styles. */
.sandbox{padding:10px 16px;border-radius:12px;background:#FFD23F;color:#14202A;font-size:13.5px;text-align:center}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px;padding-top:8px;border-top:1px solid var(--line)}
.toast{position:fixed;z-index:40;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;font-size:14.5px;font-weight:500;box-shadow:var(--shadow)}
.toast.bad{background:var(--drop);color:#fff}
.mine .minetxt{font-size:14.5px;line-height:1.45}
.mine .ctrls .pbtn{padding:8px 12px;font-size:13px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
.chk input{width:auto;margin:0}
.plrow{display:grid;gap:2px;text-align:left;background:none;border:0;padding:0;width:100%;color:inherit}
.plrow .meta{font-size:12.5px;color:var(--muted)}
.drawer .mtabs{margin-top:-4px}
.drawer h3{font:600 19px/1.15 var(--display)}
.pbtn[disabled]{opacity:.6;cursor:not-allowed}
.hp.me{outline:2px solid var(--t-accent);outline-offset:1px}

/* Wait list rows keep their own columns on phones (the board's mobile rule hides the number
   and squeezes the name), and the two lists stack like the board does. */
.hp.wl{grid-template-columns:20px minmax(0,1fr) auto auto}
@media (max-width:560px){
  .hwl-cols{grid-template-columns:1fr}
  .hp.wl{grid-template-columns:20px minmax(0,1fr) auto auto;padding:8px 10px}
  .hp.wl .no{display:block}
}

/* Sign-up call to action: the month's accent color, big in the header. */
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--t-accent,var(--accent));color:var(--t-ink,var(--accent-ink));font:700 16px/1 var(--display);padding:13px 20px;cursor:pointer;box-shadow:0 10px 28px -8px color-mix(in srgb,var(--t-accent,var(--accent)) 75%,transparent),inset 0 0 0 2px rgba(255,255,255,.35);transition:transform .12s ease,box-shadow .12s ease}
.cta svg{width:19px;height:19px;flex:none}
.cta:hover:not([disabled]){transform:translateY(-1px);box-shadow:0 14px 34px -8px color-mix(in srgb,var(--t-accent,var(--accent)) 85%,transparent),inset 0 0 0 2px rgba(255,255,255,.5)}
.cta[disabled]{background:rgba(255,255,255,.18);color:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);cursor:default}
.herocta{display:grid;justify-items:center;margin-top:4px}
.herocta:empty{display:none}
.cta.big{width:100%;max-width:440px;font-size:21px;padding:19px 26px;animation:ctaPulse 2.6s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{box-shadow:0 10px 28px -8px color-mix(in srgb,var(--t-accent) 75%,transparent),0 0 0 0 color-mix(in srgb,var(--t-accent) 55%,transparent),inset 0 0 0 2px rgba(255,255,255,.35)}50%{box-shadow:0 10px 28px -8px color-mix(in srgb,var(--t-accent) 75%,transparent),0 0 0 10px color-mix(in srgb,var(--t-accent) 0%,transparent),inset 0 0 0 2px rgba(255,255,255,.35)}}
.cta.big[disabled]{animation:none}
@media (prefers-reduced-motion:reduce){.cta{transition:none}.cta.big{animation:none}}

/* Referral button in the "needs players" notice. */
.banner.b-hold{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.sharebtn{display:inline-flex;align-items:center;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 15.5px/1 var(--display);padding:11px 20px;margin-left:6px;cursor:pointer}
.sharebtn:hover{filter:brightness(1.06)}

/* The season strip: this month bright, future months grayed out until sign-up opens. */
.season{display:grid;gap:12px}
.season:empty{display:none}
.sc{position:relative;overflow:hidden;display:grid;align-content:end;min-height:236px;padding:0;border:0;border-radius:18px;color:#FFFFFF;text-align:left;scroll-snap-align:start;cursor:pointer}
.sc img{position:absolute;left:50%;top:6px;height:74%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 10px 12px rgba(0,0,0,.35))}
.sc-txt{position:relative;display:grid;gap:2px;padding:28px 12px 12px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.45) 60%,transparent)}
.sc-m{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.sc b{font:700 17px/1.1 var(--display)}
.sc-d{font-size:13px;opacity:.9}
.sc-s{font-size:12px;font-weight:600;margin-top:4px}
.sc.current{box-shadow:0 0 0 3px var(--accent)}
.sc.current .sc-s{color:var(--accent)}
.sc.past{opacity:.65}

/* Phones: sign-up pinned to the bottom of the screen until you're signed up. */
.stickycta{display:none}
@media (max-width:700px){
  .stickycta:not([hidden]){display:block;position:fixed;z-index:15;left:0;right:0;bottom:0;padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px);background:linear-gradient(to top,rgba(14,10,24,.92),rgba(14,10,24,.6) 70%,transparent)}
  .stickycta .cta.big{width:100%;max-width:none;font-size:18px;padding:16px 20px}
  body:has(.stickycta:not([hidden])){padding-bottom:96px}
}

/* Where tile spans both columns. */
.tiles2 .tile.where{grid-column:1/-1}
.tiles2 .tile.where b{font-size:19px;line-height:1.15}
.tiles2 .tile.where small{font-size:12.5px;opacity:.8}

/* Locked night: everything muted and gray, with a card saying when it unlocks. */
.locked .hero .topbar .nav{visibility:hidden}
.lockov{position:absolute;inset:0;z-index:6;display:grid;justify-items:center;align-content:start;padding:clamp(120px,22vw,220px) 16px 16px;pointer-events:none}
.lockcard{pointer-events:auto;display:grid;justify-items:center;gap:10px;text-align:center;max-width:440px;padding:24px 26px;border-radius:24px;color:#FFFFFF;background:rgba(18,14,30,.72);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.lockcard svg{width:34px;height:34px;opacity:.9}
.lockcard b{font:700 clamp(22px,3vw,28px)/1.15 var(--display);text-wrap:balance}
.lockcard span{font-size:14.5px;opacity:.85}
.lockcard .cta{margin-top:6px}
.sc.upcoming:hover{filter:brightness(1.08)}
.sc-s svg{width:12px;height:12px;vertical-align:-1px;margin-right:4px}
.sc.viewing{box-shadow:0 0 0 3px #FFFFFF;opacity:1}

/* Locked night page: the header turns gray; only the couple's photo keeps its color, dimmed. */
.locked .hero .fig{pointer-events:none}
.locked .banners,.locked #courts{display:none}
@media (max-width:1099px){.lockov{padding-top:min(112vw,470px)}}

/* Locked night: the month's colors stay, softened; the photo is muted but brighter than the page. */
.locked .hero > :not(.lockov):not(.fig):not(.topbar){filter:saturate(.5);opacity:.7;pointer-events:none}
.locked .hero > .topbar{filter:saturate(.5)}
.locked .hero .fig .host{filter:saturate(.5);opacity:.75}
.locked .hero .fig .photo,.locked .hero .fig .player{filter:saturate(.85) drop-shadow(0 26px 30px rgba(0,0,0,.3));opacity:.85}
.locked .hero .list{background:color-mix(in srgb,var(--g2) 70%,#3A3A40);-webkit-backdrop-filter:none;backdrop-filter:none}

/* Season tiles: all ten inside the same width as the header card. */
.season-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:4px 0 8px}
@media (min-width:640px){.season-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (min-width:1180px){.season-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}.sc{min-height:220px}.sc b{font-size:15px}.sc-txt{padding:24px 9px 10px}}
.season{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 48px)}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.seasonbtn{text-decoration:none}
.locked .hero > .listwrap,.locked .hero > .side{position:relative;z-index:3}

/* Desktop: the photo hangs from just under the "Hosted by" chip instead of sitting at the bottom. */
/* Desktop header: the photo sits in normal flow under the "Hosted by" chip, and the title column
   spans down beside the board, so the board starts right under the photo with no dead space. */
@media (min-width:1100px){
  .hero{grid-template-areas:"top top top" "fig radar prof" "list list prof" "list list side";grid-template-rows:auto auto auto 1fr;row-gap:18px}
  .fig{min-height:0;padding-top:50px;place-items:start center;align-self:start}
  .fig .photo,.fig .player{position:static;width:118%;max-width:none;margin-left:-9%;height:auto;left:auto;bottom:auto}
  .fig{margin-bottom:-110px}
  .radar svg{width:min(118%,520px);max-width:none}
  .radar{align-self:center}
  .prof{align-self:start}
}

/* ---------- Phones: tighter layout ---------- */
@media (max-width:700px){
  .hero .nav{display:none}
  .topbar{flex-wrap:nowrap;gap:8px}
  .tb-right{margin-left:auto;gap:6px;flex-wrap:nowrap}
  .tb-right .pbtn{padding:8px 11px;font-size:12.5px}
  .tb-right .pbtn svg{display:none}
  .mark{width:38px;height:38px;flex:none}
  .radar{display:none}
  .zvid{display:none}
  .herocta{display:none}
  .hero{gap:14px}
}
/* Board on phones: keep men left, women right. */
@media (max-width:560px){
  .hc-cols{grid-template-columns:minmax(0,1fr) 2px minmax(0,1fr);gap:6px}
  .hc-net{height:auto;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.4) 0 4px,transparent 4px 8px)}
  .hp{grid-template-columns:minmax(0,1fr) auto 7px;gap:4px;padding:7px 7px}
  .hp .nm{font-size:12.5px}
  .hp .rt{font-size:12px}
  .hc-h small{display:none}
}
/* Season on phones: one swipeable row. */
@media (max-width:639px){
  .season-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:46%;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .sc{min-height:220px}
}
@media (max-width:700px){
  .tb-right{display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:1;max-width:280px}
  .tb-right .pbtn,.tb-right .cta{white-space:nowrap;justify-content:center;padding:8px 8px;font-size:12.5px}
  .tb-right .seasonbtn{display:inline-flex}
  .hero .dc.moon{top:118px !important;left:50% !important}
}
@media (max-width:560px){
  .hc .hp{grid-template-columns:minmax(0,1fr) 7px;grid-template-areas:"nm st" "rt st";row-gap:1px;align-items:center}
  .hc .hp .nm{grid-area:nm;overflow-wrap:break-word;word-break:normal}
  .hc .hp .rt{grid-area:rt;justify-self:start;font-size:11.5px;opacity:.75}
  .hc .hp .st{grid-area:st}
  .hc .hp .sub{grid-column:1/-1}
}
@media (max-width:700px){.drawer .btns .btn.primary{flex:1;padding:13px 16px;font-size:16px}}

/* Top Sign Up button: the month's accent color, same size as the other top buttons. */
.topsignup{padding:9px 16px;font-size:14px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.topsignup[hidden]{display:none !important}

.lockbtns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:6px}
.lockbtns .cta{margin-top:0}
.watching{font-size:14px;font-weight:600;color:#BFF5D2}
@media (min-width:1100px){.radar{padding-top:40px}}

/* Locked months keep October's layout; the sign-up buttons stay usable (they open Get Notified). */
.locked .hero .cta,.locked .hero .pbtn{pointer-events:auto}
.locked .hero .mine{pointer-events:auto}
.locked .hero > .listwrap{opacity:1;filter:saturate(.5) brightness(.92)}
.chk.consent{align-items:flex-start;font-size:12.5px;font-weight:400;line-height:1.45;color:var(--muted)}
.chk.consent input{margin-top:3px}
.chk.consent a{color:inherit}

/* Desktop header: bigger dolls anchored left; the circle chart overlaps them. */
@media (min-width:1100px){
  .fig{justify-items:start}
  .fig .photo,.fig .player{width:138%;margin-left:-3%;justify-self:start}
  .radar{position:relative;z-index:2}
}
@media (max-width:1099px){.fig .photo{width:min(106%,440px)}}
/* Chart legibility over the photo: a dark glass disc, dark halos on the labels, a soft lift. */
.radar svg{overflow:visible}
.radar .lbl,.radar .val{paint-order:stroke fill;stroke:rgba(12,7,22,.7);stroke-width:2.5px;stroke-linejoin:round}
.radar svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}
.chk.terms{color:var(--ink)}
.chk.terms b{color:var(--drop)}
.termsnote{margin-top:6px;font-size:13px;opacity:.9}
.termsnote a{color:inherit}
.pill.p-warn{background:var(--offer-bg);color:var(--offer);border:1px solid var(--offer-line)}
.abtn{display:inline-block;text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:7px 12px;border-radius:7px;font-weight:600;font-size:14px;color:var(--ink)}

/* Preview mode */
.previewbar{position:sticky;top:0;z-index:30;margin-inline:-16px;padding:10px 16px;padding-top:calc(env(safe-area-inset-top,0px) + 10px);background:#14202A;color:#FFFFFF;text-align:center;font-size:14.5px}
.previewbar b{color:#FFD23F}

/* Foursome rows: every name box in a foursome is the same height (the tallest one's),
   and one-line names sit centered vertically. */
.hc .hc-cols{align-items:stretch}
.hc .hc-col{align-content:stretch;grid-template-rows:auto;grid-auto-rows:1fr}
.hc .hc-col .hp{height:100%;align-items:center}

/* The sign-up / Get Notified panel sits above the sneak peek bar. */
.drawer{z-index:35}
.ackbox{border:1px solid var(--offer-line);background:var(--offer-bg);border-radius:12px;padding:14px}
.ackbox .chk.consent{color:var(--ink);font-size:14.5px}
.tplrow{padding:10px 0;border-bottom:1px solid var(--line)}
.tplrow:last-child{border-bottom:0}
.drawer code{font-size:12px;background:var(--sunk);padding:1px 5px;border-radius:4px}
.prefstar{color:#E8A317}