/* Homepage hover polish, desktop only (Shaun, 2026-10-05: "add a bit of polish/pzazz to the button states on homepage
   for desktop, so like highlighting shit is dazzling a bit more ... hovering stuff i mean").
   Gold is the only accent (docs/STYLE-GUIDE.md). Loaded after the other lobby sheets; phones and touch screens are
   untouched (hover: hover). Motion is skipped for prefers-reduced-motion, the glow stays. */

@media (hover: hover) and (min-width: 1024px) {
  body.home-v3 #lobby {
    --hh-glow: 0 0 0 0 transparent;   /* no gold glow (Shaun, 2026-10-05: "kill all the yellow shadows") */
    --hh-lift: 0 18px 40px -14px #000c;
    --hh-ease: cubic-bezier(.2, .8, .2, 1);
  }

  /* ── Play Now: lift, gold halo, a shine that sweeps across ── */
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease), filter .25s !important; }
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn::after {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, #fff9 48%, transparent 66%);
    transform: translateX(-120%);
  }
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn:not(:disabled):hover {
    transform: translateY(-2px) scale(1.02) !important;
    box-shadow: none !important;
    filter: brightness(1.06) saturate(1.1);
  }
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn:not(:disabled):hover::after { transform: translateX(120%); transition: transform .7s var(--hh-ease); }
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn .material-symbols-rounded { transition: transform .25s var(--hh-ease); }
  body.redesign-v2.home-v3 #lobby .ls-hero-play-btn:hover .material-symbols-rounded { transform: translateX(2px) scale(1.15); }

  /* ── Play with friends: the outline lights up gold ── */
  body.redesign-v2.home-v3 #lobby .ls-hero-link-btn { transition: transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease), border-color .2s, color .2s, background .2s !important; }
  body.redesign-v2.home-v3 #lobby .ls-hero-link-btn:hover {
    transform: translateY(-2px) !important;
    border-color: var(--muck-gold) !important;
    color: var(--muck-gold) !important;
    background: color-mix(in srgb, var(--muck-gold) 8%, #121412) !important;
    box-shadow: var(--hh-glow) !important;
  }
  body.redesign-v2.home-v3 #lobby .ls-hero-link-btn:hover * { color: inherit !important; }

  /* ── Sunday Freeroll / RoboLarry cards: lift, glow, the art drifts in ── */
  body.home-v3 #lobby .wc-home-card { transition: transform .3s var(--hh-ease), box-shadow .3s var(--hh-ease), border-color .2s !important; }
  body.home-v3 #lobby .wc-home-card > img { transition: transform .6s var(--hh-ease), filter .4s; }
  body.home-v3 #lobby .wc-home-card:hover { transform: translateY(-4px); border-color: var(--muck-gold); box-shadow: var(--hh-glow), var(--hh-lift); }
  body.home-v3 #lobby .wc-home-card:hover > img { transform: scale(1.05); filter: brightness(1.08) saturate(1.08); }
  body.home-v3 #lobby .wc-home-card .wc-primary { transition: transform .25s var(--hh-ease), box-shadow .25s, filter .25s; }
  body.home-v3 #lobby .wc-home-card:hover .wc-primary { transform: translateX(4px); filter: brightness(1.06); }

  /* ── Streak / bonus / tournaments / cash row ── */
  body.home-v3 #lobby :is(.lp-card, .home-status-link) { transition: transform .25s var(--hh-ease), box-shadow .25s var(--hh-ease), border-color .2s, background .2s !important; }
  body.home-v3 #lobby :is(.lp-card, .home-status-link):hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--muck-gold) 75%, transparent);
    background-color: color-mix(in srgb, var(--muck-gold) 5%, transparent);
    box-shadow: var(--hh-glow);
    filter: none;
  }
  body.home-v3 #lobby :is(.lp-card, .home-status-link) .material-symbols-rounded { transition: transform .3s var(--hh-ease), color .2s, text-shadow .3s; }
  body.home-v3 #lobby :is(.lp-card, .home-status-link):hover .material-symbols-rounded:first-child {
    transform: scale(1.18) rotate(-8deg);
    color: var(--muck-gold) !important;
  }

  /* ── Get Good / Do Stuff / Play Bad: add the glow to the existing lift, the button wakes up ── */
  body.redesign-v2.home-v3 #lobby .ls-promo-card.is-clickable:is(:hover, :focus-within) { box-shadow: var(--hh-glow), var(--hh-lift); border-color: var(--muck-gold); }
  body.redesign-v2.home-v3 #lobby .ls-promo-card.is-clickable .ls-promo-card-img { transition: transform .6s var(--hh-ease), filter .4s !important; }
  body.redesign-v2.home-v3 #lobby .ls-promo-card.is-clickable:is(:hover, :focus-within) .ls-promo-card-img { transform: scale(1.06) !important; filter: brightness(1.08) saturate(1.08); }
  body.redesign-v2.home-v3 #lobby .ls-promo-card-btn { transition: transform .25s var(--hh-ease), box-shadow .25s, filter .25s !important; }

  /* ── Top nav ── The gold underline that grew from the middle is gone: hover became the pill below, so it never grew,
     and its zero-width bar showed as a gold dot under items with an odd pixel width (Shaun, 2026-10-30: "theres a
     yellow dot below muck club"). */
  body.redesign-v2.home-v3 .lp-top-nav > :is(a, button) { position: relative; transition: color .2s, background .2s; }
  /* Hover: the selected tab's dark gold pill, no underline (Shaun, 2026-10-17: "make the fills for the hover states more like this") */
  body.redesign-v2.home-v3 .lp-top-nav > :is(a, button):hover { color: #d8bd84 !important; background: #2c281e !important; border-color: #5c4e30 !important; }

  /* Pressed: a little give. */
  body.home-v3 #lobby :is(.ls-hero-play-btn, .ls-hero-link-btn, .ls-promo-card-btn):active { transform: translateY(0) scale(.98) !important; transition-duration: .08s !important; }
}

/* Keyboard focus gets the same gold ring at any size. */
body.home-v3 #lobby :is(.ls-hero-play-btn, .ls-hero-link-btn, .lp-card, .home-status-link, .wc-home-card, .ls-promo-card-btn):focus-visible {
  outline: 2px solid var(--muck-gold); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  body.home-v3 #lobby *, body.home-v3 .lp-top-nav > * { transition: none !important; }
  body.home-v3 #lobby :is(.ls-hero-play-btn, .ls-hero-link-btn, .lp-card, .home-status-link, .wc-home-card):hover,
  body.home-v3 #lobby :is(.wc-home-card, .ls-promo-card) :is(img, .ls-promo-card-img) { transform: none !important; }
  body.home-v3 #lobby .ls-hero-play-btn::after { display: none; }
}

/* ── Header: Get Muck Bucks (opens the store), next to the cog ── */
.lmh-get-bucks-btn {
  /* Same grey as the cog pill (lobby-sections-v2.css), no shadow (Shaun, 2026-10-05: "make it the grey as the cog
     wheel, so its not standing out as much and no shadow"). */
  display: inline-flex; align-items: center; gap: 8px; height: 42px; box-sizing: border-box; padding: 0 16px; margin-right: 4px;
  border: 1px solid #383b39; border-radius: 10px; background: #1d1f1f; box-shadow: none;
  color: var(--muck-text, #f4f1e9); font: 700 14px/1 var(--muck-font, Inter, system-ui, sans-serif); white-space: nowrap; cursor: pointer;
  transition: background .2s, color .2s;
}
.lmh-get-bucks-btn .material-symbols-rounded { font-size: 22px; color: var(--muck-gold); font-variation-settings: 'FILL' 1; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.lmh-get-bucks-btn:focus-visible { outline: 2px solid var(--muck-gold); outline-offset: 3px; }
@media (hover: hover) {
  .lmh-get-bucks-btn:hover { background: #292b31; color: #cdb47e; }   /* the cog's own hover */
  .lmh-get-bucks-btn:hover .material-symbols-rounded { transform: rotate(-20deg) scale(1.1); }
}
/* Signed-out header: Sign In and Join Free in the site's font, set like the Join Free on the bonus card below (Shaun,
   2026-10-08: "why is the top button text diff than the join free text button below?"). Buttons don't inherit the page
   font, so these were Arial, and lobby-redesign-v2.css shrank Join Free to 11px. */
body.redesign-v2 #lobby :is(#lmh-guest-play-btn, #lmh-signin-btn) { font-family: var(--muck-font, Inter, system-ui, sans-serif) !important; font-size: 13px !important; letter-spacing: 0 !important; }
body.redesign-v2 #lobby #lmh-guest-play-btn { font-weight: 750 !important; }
body.redesign-v2 #lobby #lmh-signin-btn { font-weight: 650 !important; }
/* On the homepage Join Free is the same ghost button as Sign In (Shaun, 2026-10-08: "on the homepage only, make the join
   free the same ghost button as the sign in"); the hero's Learn button is the one yellow call to action there. In Cash
   Games, Tournaments (body.game-section-page) and every panel (body.s2-panel-active) it stays yellow. While invite-only it reads
   Request Early Access, the same buttons (Shaun, 2026-11-01: "on the HP keep request early access in the header a ghost button,
   yellow on any other pages"). */
body.redesign-v2:not(.game-section-page):not(.s2-panel-active) #lobby #lmh-guest-play-btn:not(:hover) {
  background: none !important; border: 1px solid #363941 !important; color: #b4b4b4 !important; box-shadow: none !important;
}
/* (Its own padding and weight are gone, 2026-10-29: it takes the yellow one's size, so Sign In doesn't move between the
   homepage and Cash Games; Shaun: "the header seems to be jumping around a hair".) */
/* Hover fills it yellow (lobby-redesign-v2.css); the text goes dark with it, not the ghost's grey (Shaun, 2026-10-09). */
body.redesign-v2:not(.game-section-page):not(.s2-panel-active) #lobby #lmh-guest-play-btn:hover {
  color: var(--muck-gold-ink, #211805) !important; border-color: transparent !important; transform: none !important;
}
/* Phones: the header is full already; the store is in the cog menu (Add Muck Bucks). */
@media (max-width: 720px) { .lmh-get-bucks-btn { display: none; } }

/* Shop lives inside the cog's pill (index.php): no border or radius of its own, a short line before the cog. */
body #lobby-av-wrap .lobby-icon-pill { display: flex; align-items: stretch; overflow: hidden; }
/* Signed-out visitors have nothing in the pill (no Shop, no cog); the rule above outranked style.css's guest hide, so an
   empty bordered pill showed as a line right of Join Free (Shaun, 2026-10-07: "kill the vertical line"). */
body.costanza-guest #lobby-av-wrap .lobby-icon-pill { display: none; }
body #lobby-av-wrap .lobby-icon-pill .lmh-get-bucks-btn { height: auto; margin: 0; border: 0; border-radius: 0; background: transparent; }
body.redesign-v2 #lobby-av-wrap .lobby-icon-pill .lmh-get-bucks-btn + #lobby-av-btn { position: relative; border-left: 0 !important; box-shadow: none !important; }
@media (min-width: 721px) {
  body #lobby-av-wrap .lobby-icon-pill .lmh-get-bucks-btn + #lobby-av-btn::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 1px; background: #383b39; }
}

/* Learn in 2 minutes (first visit): never moves, hover is a touch brighter gold, and a soft sheen crosses it every few
   seconds to invite the click (Shaun, 2026-10-08: "the text and button jump around, and i dont like the highlight
   color", "have this button subtly animate/shimmer"). The selector carries "a" and both classes so it outranks the Play
   button's desktop lift (.ls-hero-play-btn:not(:disabled):hover, scale 1.02) and the old peach hover in
   lobby-redesign-v2.css, which is what made it jump and change colour. */
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(#ffdf72, #ffd34f) !important; border-color: #ffd34f !important; color: #111 !important;
  transform: none !important; filter: none !important; box-shadow: none !important;
  transition: background .2s ease, border-color .2s ease !important;
}
/* Its two lines wrap on narrow phones instead of running off the button (Shaun, 2026-10-12: "yes fix it", the 10,000
   Muck Bucks line was cut at 339 px). The hero buttons inherit nowrap from style.css's .ls-hero-play-btn. */
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn .ls-hero-play-text { white-space: normal; min-width: 0; flex: 1 1 auto; line-height: 1.25; }
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn:hover {
  background: linear-gradient(#ffe68f, #ffda62) !important; border-color: #ffda62 !important;
  transform: none !important; filter: none !important; box-shadow: none !important;
}
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn:active { transform: none !important; background: linear-gradient(#ffd85e, #f5c93f) !important; }
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn :is(.material-symbols-rounded, .ls-hero-play-text),
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn:hover :is(.material-symbols-rounded, .ls-hero-play-text) { transform: none !important; transition: none !important; }
/* the sheen: a soft light band slides across, then rests; it sits under the text (isolation + z-index -1) */
body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn::after {
  content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, rgba(255, 255, 255, .5) 44%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, .5) 56%, transparent 64%);
  transform: translateX(-120%); animation: learn-sheen 4.5s cubic-bezier(.4, 0, .2, 1) 1.2s infinite !important;
}
@keyframes learn-sheen { 0% { transform: translateX(-120%); } 32%, 100% { transform: translateX(120%); } }
/* Reduce motion on (Shaun saw no sheen at all, 2026-10-08; this was switched off for it): the sheen stays, since it moves nothing on the
   page, but slower, softer and less often. */
@media (prefers-reduced-motion: reduce) { body.redesign-v2.home-v3 #lobby a.ls-hero-play-btn.ls-hero-learn-btn::after { opacity: .7; animation-duration: 7s !important; } }

/* Play Now and Play with friends stay put on hover and press too: colour changes only, nothing lifts, grows or
   nudges (Shaun, 2026-10-08: "this text wiggles on hover too, keep the placement of the elements on the button the
   same"). Same as the Learn button above; the selector outranks the desktop lift rules earlier in this file. */
body.redesign-v2.home-v3 #lobby :is(button, a):is(.ls-hero-play-btn, .ls-hero-link-btn):not(:disabled):is(:hover, :active),
body.redesign-v2.home-v3 #lobby :is(button, a):is(.ls-hero-play-btn, .ls-hero-link-btn):not(:disabled):is(:hover, :active) :is(.material-symbols-rounded, .ls-hero-play-text, .ls-hero-play-icon) {
  transform: none !important; translate: none !important; scale: none !important;
}