/* ============================================================================
 * auth-lucky-jack.css — Screen 01 (landing) ONLY.
 *
 * Loaded AFTER auth-felt.css. Every rule is scoped under `.lj-landing` so it
 * cannot touch screens 02-23 (which keep the felt theme). Renaming the landing
 * root class from `.bja-landing` to `.lj-landing` intentionally drops the felt
 * landing rules (auth-felt.css:726+) for this screen.
 *
 * Design source: Claude Design "Lucky Jack Auth.html" (casino-noir). Rebuilt as
 * a responsive flex column (NOT the mockup's scale-to-fit fixed canvas) because
 * the codebase already abandoned absolute-canvas positioning for the landing
 * (it collided on short screens — see auth-felt.css:737-739).
 * ==========================================================================*/

:root {
  --lj-gold:     #e7c877;
  --lj-gold-hi:  #f7e7b6;
  --lj-gold-lo:  #a9812f;
  --lj-bone:     #f4ecd8;
}

/* --- Display gate ---------------------------------------------------------
 * MUST stay at specificity (0,3,1) to beat auth-felt.css:105
 * `section[data-screen][data-active="true"]{display:block}` (0,2,1), which
 * loads first. `[data-active="true"]` in the selector is load-bearing: it lets
 * an inactive landing fall through to felt.css:104 `display:none`. */
section.lj-landing[data-screen="01-landing"][data-active="true"] { display: flex; }

.lj-landing {
  position: relative;
  z-index: 1;                 /* above the shared .bja-felt (z-index:0) */
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  /* Opaque casino-noir backdrop, painted on the section itself so it is
     naturally gated by the section's display:none when another screen is
     active (a body-level fixed layer would cover the felt on all 17 screens).
     No transform/filter on this element — it must remain the fixed containing
     block / a clean stacking context. */
  background:
    radial-gradient(130% 88% at 50% 6%,
      #5a2b82 0%, #3a1860 30%, #23103d 58%, #150a26 80%, #0d0619 100%),
    #0a0409;
  /* clip (not scroll): a wide fan box overflows horizontally but must never add
     a scrollbar. overflow-y stays visible so the page grows vertically and the
     buttons are never clipped on short screens. body{overflow-x:hidden} is the
     pre-Safari-16 fallback. */
  overflow-x: clip;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px max(24px, env(safe-area-inset-bottom));
  font-family: 'JetBrains Mono', monospace;
  color: var(--lj-bone);
  text-align: center;
  isolation: isolate;
}
/* Short viewports: stop centering so tall content can't push the buttons off
   the top/bottom; top-align and let the page scroll instead. */
@media (max-height: 780px) {
  .lj-landing { justify-content: flex-start; }
}

/* --- Decorative overlays (absolute, out of the flex flow) ----------------- */
.lj-landing .lj-grain,
.lj-landing .lj-toplight,
.lj-landing .lj-vign {
  position: absolute;
  pointer-events: none;
}
.lj-landing .lj-grain {
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .4;
  mix-blend-mode: overlay;
}
.lj-landing .lj-toplight {
  left: 50%; top: -140px;
  width: min(1000px, 120vw); height: 560px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(200,110,255,.28), transparent 62%);
  filter: blur(8px);
}
.lj-landing .lj-vign {
  inset: 0;
  background: radial-gradient(120% 80% at 50% 42%, transparent 40%, rgba(8,3,14,.55) 100%);
}

/* --- Brand ---------------------------------------------------------------- */
.lj-landing .lj-brand {
  position: relative; z-index: 2;
  margin-top: 8px;
}
.lj-landing .lj-wordmark {
  margin: 0;
  line-height: 0;
}
.lj-landing .lj-wordmark img {
  width: min(600px, 82vw);
  height: auto;
  display: block;
  margin: 0 auto;
  filter: drop-shadow(0 6px 30px rgba(220,150,255,.3));
}
.lj-landing .lj-tag {
  margin: 6px 0 0;
  font-size: clamp(13px, 3.4vw, 22px);
  font-weight: 600;
  letter-spacing: .3em;
  line-height: 1.6;
  color: var(--lj-gold-hi);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

/* --- Action-card fan ------------------------------------------------------
 * One responsive knob: --k scales card size AND the arc's translate offsets
 * together, so the mockup's overlap ratio is preserved at every breakpoint.
 * Cards are absolute (no layout width) → the fan never widens the column; only
 * its fixed height reserves vertical space. flex-shrink:0 stops a short
 * viewport from squashing the arc. */
.lj-landing .lj-fan {
  --k: 1;
  position: relative;
  z-index: 3;
  width: 100%;
  /* Cards anchor to the box bottom (bottom:0). The outer cards translateY down
     ~32px then rotate ~27deg, so their bottom corners dip ~80px BELOW the box
     baseline — the bottom margin must clear that dip (plus a small visual gap)
     or they overlap the buttons. Height ~= a centre card so the top gap to the
     tagline stays tight. Both scale with --k so clearance tracks card size. */
  height: calc(300px * var(--k));
  margin: calc(12px * var(--k)) 0 calc(100px * var(--k));
  flex-shrink: 0;
  pointer-events: none;
}
.lj-landing .lj-acard {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: calc(214px * var(--k));
  margin-left: calc(-107px * var(--k));
  transform-origin: bottom center;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.55));
}
.lj-landing .lj-acard img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
/* --k per breakpoint (mockup arc = k:1). */
@media (max-width: 960px) { .lj-landing .lj-fan { --k: .82; } }
@media (max-width: 720px) { .lj-landing .lj-fan { --k: .64; } }
@media (max-width: 520px) { .lj-landing .lj-fan { --k: .5;  } }
@media (max-width: 380px) { .lj-landing .lj-fan { --k: .42; } }

/* --- Auth buttons --------------------------------------------------------- */
.lj-landing .lj-auth {
  position: relative; z-index: 4;
  width: min(648px, 92vw);
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2.4vw, 22px);
  flex-shrink: 0;
}
.lj-landing .lj-abtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: clamp(58px, 11vw, 82px);
  padding: 0 clamp(18px, 4vw, 30px);
  border-radius: 16px;
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
}
.lj-landing .lj-abtn:hover { transform: translateY(-2px); }
.lj-landing .lj-abtn:active { transform: translateY(0); }
.lj-landing .lj-abtn:focus-visible {
  outline: 2px solid var(--lj-gold-hi);
  outline-offset: 4px;
}
.lj-landing .lj-abtn .lj-ic {
  flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
}
.lj-landing .lj-abtn .lj-ic svg {
  width: clamp(24px, 5vw, 30px);
  height: clamp(24px, 5vw, 30px);
}
.lj-landing .lj-abtn .lj-txt {
  flex: 1;
  text-align: center;
  font-size: clamp(17px, 4vw, 26px);
  font-weight: 700;
  letter-spacing: .02em;
  transform: translateX(-17px);  /* optically centre despite the left icon */
}

.lj-landing .lj-abtn--prime {
  background: linear-gradient(180deg, #fbf4e2, #efe4c8);
  color: #1a0b2e;
  border: 2px solid var(--lj-gold-hi);
  box-shadow:
    0 0 0 4px rgba(231,200,119,.22),
    0 16px 34px rgba(0,0,0,.5),
    0 0 40px rgba(231,200,119,.28);
}
.lj-landing .lj-abtn--prime:hover {
  box-shadow:
    0 0 0 4px rgba(231,200,119,.35),
    0 18px 40px rgba(0,0,0,.55),
    0 0 60px rgba(231,200,119,.4);
}
.lj-landing .lj-abtn--prime .lj-ic { color: #5f2597; }

.lj-landing .lj-abtn--ghost {
  background: linear-gradient(180deg, rgba(58,26,86,.55), rgba(30,14,48,.75));
  color: var(--lj-bone);
  border: 1.5px solid rgba(231,200,119,.4);
  box-shadow:
    inset 0 0 24px rgba(120,50,180,.25),
    0 10px 26px rgba(0,0,0,.45);
}
.lj-landing .lj-abtn--ghost:hover {
  border-color: var(--lj-gold);
  box-shadow:
    inset 0 0 26px rgba(150,70,220,.35),
    0 12px 30px rgba(0,0,0,.5);
}
.lj-landing .lj-abtn--ghost .lj-ic { color: var(--lj-gold); }

/* --- Footer --------------------------------------------------------------- */
.lj-landing .lj-foot {
  position: relative; z-index: 4;
  margin-top: clamp(20px, 4vw, 34px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(10px, 2.4vw, 22px);
  font-size: clamp(11px, 2.6vw, 18px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lj-gold-lo);
  flex-shrink: 0;
}
.lj-landing .lj-foot .lj-dot {
  width: 5px; height: 5px;
  background: var(--lj-gold-lo);
  border-radius: 1px;
  transform: rotate(45deg);
}
.lj-landing .lj-foot a {
  color: var(--lj-gold-lo);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(169,129,47,.5);
}
.lj-landing .lj-foot a:hover,
.lj-landing .lj-foot a:focus-visible { color: var(--lj-gold-hi); }
.lj-landing .lj-foot .lj-age { color: #9a86bd; }

/* --- Reduced motion (no felt pattern to mirror; standalone) --------------- */
@media (prefers-reduced-motion: reduce) {
  .lj-landing .lj-abtn { transition: none; }
  .lj-landing .lj-abtn:hover { transform: none; }
}

/* --- Landing toast (one-shot, screen-17 bounce) --------------------------- */
/* Reuses .bja-banner from auth-felt.css so its `[hidden] { display: none }`
   override applies — a bespoke class setting its own `display` would show a
   permanent error banner to every visitor. Only palette and layout are
   re-scoped here.
   Three things this must fix that the felt sheet doesn't cover:
   1. .lj-landing sets `isolation: isolate` and paints .lj-grain / .lj-toplight
      / .lj-vign as absolute overlays, so content opts out with z-index:2
      (see .lj-brand). Without it the banner renders UNDER the grain — wrong
      rather than invisible, so it passes functional tests and fails visually.
   2. .lj-landing is flex-column + align-items:center, so the banner would
      shrink-wrap to its text instead of spanning like every sibling banner.
   3. .lj-landing sets `overflow-x: clip`, so an over-wide banner would be
      silently cut at the viewport edge with no scrollbar — unacceptable for
      the one message that exists to be read. */
.lj-landing .bja-banner {
  position: relative;
  z-index: 2;
  width: min(560px, calc(100% - 32px));
  align-self: center;
  margin: 0 0 18px;
  text-align: left;
  /* Casino-noir palette — the .lj- rename deliberately dropped felt. */
  background: rgba(28, 18, 40, .62);
  border: 1px solid #4a3866;
  border-top: 1px solid #b08cf0;
  color: #e6dcf5;
}
.lj-landing .bja-banner .bja-banner-title { color: #c9aaff; }
/* .bja-banner::before paints a felt-crimson dot (auth-felt.css). Overriding
   background/border/color alone leaves a red bullet on a purple card — wrong
   rather than invisible, so it passes functional tests and fails visually. */
.lj-landing .bja-banner::before { background: #b08cf0; }