/* The sign-in / welcome screen (#welcome-panel-content, index.php): one job, sign in (Shaun, 2026-10-03). A centered
   hero with the art at the edges, a big yellow "Sign in with Google" button (Google's real button lies invisibly on
   top of it and takes the click), "or continue as a guest" small under it, then the four benefits as cards.
   Loaded after the older welcome rules (lobby-design.css, lobby-sections-v2.css), which it overrides. */

body.redesign-v2 #s2-panel #welcome-panel-content .acct-upsell.wl{display:flex!important;flex-direction:column;align-items:stretch!important;gap:18px;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}

/* hero */
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero{display:flex!important;align-items:center;justify-content:center;padding:36px 24px!important;text-align:center;background-color:#071112;background-image:radial-gradient(ellipse 36% 90% at 50% 50%,#071112eb 0%,#071112cc 45%,#07111240 82%,#07111200 100%),var(--wl-art,url('lobby-art/welcome-seat-v1.webp'))!important;background-size:100% 100%,cover!important;background-position:center,center!important;background-repeat:no-repeat!important;border:1px solid var(--muck-line)!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero-inner{display:flex;flex-direction:column;align-items:center;max-width:620px}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .club-kicker{margin-bottom:10px;color:var(--muck-gold)!important;font:800 11px var(--muck-font)!important;letter-spacing:.18em!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .acct-upsell-badge{align-self:center!important;justify-content:center;margin:0 0 14px!important;position:static!important}
/* No "MUCK POKER" kicker above the badge (Shaun, 2026-10-09: "just kill the muck poker. keep the start playing row. dont change height"). */
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero #welcome-kicker{visibility:hidden!important}   /* desktop: the hero keeps its height */
@media(max-width:719px){body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero #welcome-kicker{display:none!important}}   /* phones: gone */
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .acct-upsell-title{margin:0 0 12px!important;text-align:center!important;font:750 clamp(36px,4.4vw,63.36px)/.99 var(--muck-font)!important;letter-spacing:-2px!important;color:#f7f6f1!important;max-width:none!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .acct-upsell-sub{margin:0 0 26px!important;text-align:center!important;max-width:46ch!important;color:#c9cfcb!important;font-size:15px!important;line-height:1.6!important}

/* the button */
#welcome-panel-content .wl-cta{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
#welcome-panel-content .wl-signin{position:relative;width:min(380px,100%);height:58px;border-radius:12px;transition:transform .15s ease,box-shadow .15s ease}
#welcome-panel-content .wl-signin-face{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;padding:0 22px;border:0;border-radius:12px;background:var(--muck-gold-cta);color:var(--muck-gold-ink);font:800 17px var(--muck-font);letter-spacing:-.1px;box-shadow:0 14px 34px -14px color-mix(in srgb,var(--muck-gold) 70%,transparent);cursor:pointer}
#welcome-panel-content .wl-g{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff}
#welcome-panel-content .wl-signin:hover{transform:translateY(-2px)}
#welcome-panel-content .wl-signin:hover .wl-signin-face{filter:brightness(1.05)}
#welcome-panel-content .wl-signin:focus-within{outline:3px solid var(--muck-gold);outline-offset:4px}
/* Google's button: on top, invisible, stretched over the whole face. GIS draws at most 400 wide and ~44 tall, so it's
   scaled up to cover the 58px-tall face; the overflow is clipped. */
body.redesign-v2 #s2-panel #welcome-panel-content .wl-signin .wl-signin-gis{position:absolute!important;inset:0!important;z-index:2;overflow:hidden;border-radius:12px;opacity:.001;margin:0!important;padding:0!important;width:100%!important;max-width:none!important;height:100%!important;min-width:0!important}
#welcome-panel-content .wl-signin-gis>div{transform:scale(1.45);transform-origin:0 0}
#welcome-panel-content .wl-signin-gis iframe{margin:0!important}

body.redesign-v2 #s2-panel #welcome-panel-content .wl-perk{display:flex!important;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 6px;margin:2px 0 0;padding:0;background:none!important;border:0!important;color:#aeb8b4!important;font:500 12.5px var(--muck-font)!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-perk.hidden{display:none!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-perk .material-symbols-rounded{font-size:16px;color:var(--muck-gold)}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-or-divider{display:none!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-guest{margin-top:2px}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-guest .acct-guest-cta{padding:6px 10px!important;background:none!important;border:0!important;color:#c9cfcb!important;font:600 13px var(--muck-font)!important;text-decoration:underline;text-underline-offset:4px;cursor:pointer;box-shadow:none!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-guest .acct-guest-cta:hover{color:#fff!important}

/* benefits: four cards in a row */
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefits-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin:0!important;padding:0!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefit{display:flex!important;flex-direction:column;align-items:flex-start;gap:6px;padding:18px 18px 20px!important;border:1px solid var(--muck-line)!important;border-radius:var(--muck-radius-lg)!important;background:var(--muck-surface-1)!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefit-icon{margin:0 0 6px!important;width:40px;height:40px;border-radius:11px!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefit-title{font-size:14px!important;font-weight:700;color:var(--muck-text)!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefit-desc{font-size:12.5px!important;color:var(--muck-text-3)!important}
body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-upsell-note{text-align:center!important;border:0!important;padding:4px 0 0!important}

@media(max-width:900px){body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:719px){
  /* Phones: no picture, just the copy on the dark panel (Shaun, 2026-10-17: "on mobile kill the image up top"; it was a
     band across the top) */
  body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero{padding:28px 18px!important;min-height:0!important;background-image:none!important}
  body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .acct-upsell-title{font-size:36px!important;letter-spacing:-1.2px!important}
  body.redesign-v2 #s2-panel #welcome-panel-content .wl-hero .acct-upsell-sub{font-size:13.5px!important}
  body.redesign-v2 #s2-panel #welcome-panel-content .wl .acct-benefit{padding:14px!important}
}
/* Joined with X? Sign in with X (index.php; api/x_login.php): a quiet line under the yellow button */
/* readable on the busy art (Shaun, 2026-11-01: "joined with x is not readable here"): the lines under it's light grey, and a soft shadow */
body.redesign-v2 #s2-panel #welcome-panel-content .wl-x-signin{display:block;margin:12px auto 0;font-size:14px;color:#d6dbd8;text-decoration:none;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.8)}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-x-signin b{color:var(--muck-text);font-weight:700;text-decoration:underline;text-underline-offset:3px}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-x-signin:hover b{color:var(--muck-gold)}
body.redesign-v2 #s2-panel #welcome-panel-content .wl-x-note{margin:8px 0 0;font-size:13px;color:#d6dbd8;text-align:center;text-shadow:0 1px 8px rgba(0,0,0,.9)}