/* ===========================================================================
   BetJordan Login Portal — combined stylesheet
   Single-file merge of tokens, base, components, and per-page styles.
   Sections below are kept in their original file order; selectors are
   namespaced per page (home-*, casino-*, login-*) so there is no
   cross-page collision despite living in one file.
   =========================================================================== */

/* --- tokens.css --- */
/* ==========================================================================
   BetJordan Login Portal — Design tokens
   Palette is inherited from betjordan-casino.com. Do not invent new hues;
   add a token here if a new value is genuinely needed.
   ========================================================================== */

:root {
  /* --- Surfaces ------------------------------------------------------- */
  --bj-void: #0d0d10;        /* page background */
  --bj-surface: #111015;     /* raised sections */
  --bj-elevated: #16161a;    /* cards, tiles, inputs */
  --bj-overlay: rgba(13, 13, 16, 0.88);

  /* --- Ink ------------------------------------------------------------ */
  /* Alpha values are pinned to measured contrast against the three surfaces:
     0.52 clears 4.5:1 with margin, 0.45 is the floor. Don't go lower. */
  --bj-white: #ffffff;                        /* 19.4:1 on void */
  --bj-muted: rgba(255, 255, 255, 0.65);      /*  8.4:1 — body copy */
  --bj-faint: rgba(255, 255, 255, 0.52);      /*  5.7:1 — secondary text */
  --bj-ghost: rgba(255, 255, 255, 0.45);      /*  4.5:1 — placeholders only */

  /* --- Accents -------------------------------------------------------- */
  --bj-lime: #cef135;        /* primary action — the only hot colour */
  --bj-lime-dim: #b5d726;
  --bj-lime-wash: rgba(206, 241, 53, 0.12);
  /* Brand red is 4.0:1 on void — fine as a fill or dot, but it must never
     carry small text. Use --bj-red-ink for anything readable. */
  --bj-red: #e5002d;
  --bj-red-wash: rgba(229, 0, 45, 0.14);
  --bj-red-ink: #ff6b85;     /* 6.6:1 — error copy, live labels */

  /* --- Lines ---------------------------------------------------------- */
  --bj-line: rgba(255, 255, 255, 0.10);
  --bj-line-strong: rgba(255, 255, 255, 0.20);

  /* --- Type ----------------------------------------------------------- */
  --bj-font-display: "Big Shoulders Display", "Big Shoulders", "Inter", sans-serif;
  --bj-font-body: "Inter", system-ui, -apple-system, sans-serif;
  --bj-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Fluid display scale — clamps so headlines never break the viewport */
  --bj-text-hero: clamp(3.25rem, 9vw, 7rem);
  --bj-text-d1: clamp(2.5rem, 5.5vw, 4.5rem);
  --bj-text-d2: clamp(2rem, 4vw, 3rem);
  --bj-text-d3: clamp(1.5rem, 2.5vw, 2rem);

  --bj-text-lg: 1.125rem;
  --bj-text-base: 1rem;
  --bj-text-sm: 0.875rem;
  --bj-text-xs: 0.75rem;

  --bj-tracking-display: -0.02em;
  --bj-tracking-eyebrow: 0.18em;

  /* --- Space ---------------------------------------------------------- */
  --bj-space-1: 0.25rem;
  --bj-space-2: 0.5rem;
  --bj-space-3: 0.75rem;
  --bj-space-4: 1rem;
  --bj-space-5: 1.5rem;
  --bj-space-6: 2rem;
  --bj-space-7: 3rem;
  --bj-space-8: 4rem;
  --bj-space-9: 6rem;
  --bj-space-10: 8rem;

  /* --- Geometry ------------------------------------------------------- */
  --bj-radius-pill: 999px;   /* brand signature — buttons are always pills */
  --bj-radius-card: 14px;
  --bj-radius-input: 10px;

  --bj-container: 1280px;
  --bj-container-narrow: 780px;
  --bj-gutter: clamp(1.25rem, 4vw, 3rem);

  /* Height an eyebrow occupies plus the gap under it. Lets a second column
     start level with the H2 rather than with the eyebrow above it. */
  --bj-eyebrow-offset: calc(var(--bj-text-xs) * 1.6 + var(--bj-space-4));

  /* Shear angle for the door panels — the page's signature geometry */
  --bj-shear: 4.5rem;
  --bj-shear-mobile: 1.5rem;

  /* --- Motion --------------------------------------------------------- */
  --bj-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bj-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --bj-speed-fast: 140ms;
  --bj-speed: 260ms;
  --bj-speed-slow: 620ms;

  /* --- Elevation ------------------------------------------------------ */
  --bj-shadow-card: 0 18px 40px rgba(0, 0, 0, 0.45);
  --bj-shadow-lift: 0 26px 60px rgba(0, 0, 0, 0.6);
  --bj-glow-lime: 0 0 0 1px var(--bj-lime), 0 12px 36px rgba(206, 241, 53, 0.22);

  /* --- Layering ------------------------------------------------------- */
  --bj-z-base: 1;
  --bj-z-sticky: 100;
  --bj-z-header: 200;
  --bj-z-modal: 300;
}

/* The shear is padding as well as geometry, so on a narrower panel it eats a
   disproportionate share of the width and squeezes the headline. Step it down
   rather than letting the copy pay for it. */
@media (max-width: 1400px) {
  :root { --bj-shear: 3rem; }
}

/* --- base.css --- */
/* ==========================================================================
   BetJordan Login Portal — Reset, typography, layout primitives
   Requires tokens.css.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bj-void);
  color: var(--bj-white);
  font-family: var(--bj-font-body);
  font-size: var(--bj-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration-color: var(--bj-line-strong);
  text-underline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--bj-font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: var(--bj-tracking-display);
  text-transform: uppercase;
}

p {
  margin: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}

/* --- Focus -------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--bj-lime);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Type roles ---------------------------------------------------------
   These carry the full display treatment rather than inheriting it from the
   element, so they work on a <span> inside a link as well as on a heading. */
.bj-display,
.bj-hero-title,
.bj-d1,
.bj-d2,
.bj-d3 {
  font-family: var(--bj-font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: var(--bj-tracking-display);
  text-transform: uppercase;
}

.bj-hero-title { font-size: var(--bj-text-hero); }
.bj-d1 { font-size: var(--bj-text-d1); }
.bj-d2 { font-size: var(--bj-text-d2); }
.bj-d3 { font-size: var(--bj-text-d3); }

/* Mono eyebrow — the bet-slip register. Labels a section, never decorates. */
.bj-eyebrow {
  display: inline-block;
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  letter-spacing: var(--bj-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bj-lime);
}

.bj-eyebrow--muted { color: var(--bj-faint); }

.bj-lead {
  font-size: var(--bj-text-lg);
  line-height: 1.65;
  color: var(--bj-muted);
}

.bj-body { color: var(--bj-muted); }
.bj-body + .bj-body { margin-top: var(--bj-space-4); }

.bj-fine {
  font-size: var(--bj-text-sm);
  line-height: 1.6;
  color: var(--bj-faint);
}

.bj-mono {
  font-family: var(--bj-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Layout ------------------------------------------------------------- */
.bj-container {
  width: 100%;
  max-width: var(--bj-container);
  margin-inline: auto;
  padding-inline: var(--bj-gutter);
}

.bj-container--narrow { max-width: var(--bj-container-narrow); }

.bj-section {
  padding-block: clamp(var(--bj-space-8), 10vw, var(--bj-space-10));
}

.bj-section--surface { background: var(--bj-surface); }
.bj-section--tight { padding-block: var(--bj-space-8); }

/* Section header: eyebrow + title + optional lead, on a consistent rhythm */
.bj-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-4);
  max-width: 62ch;
  margin-bottom: var(--bj-space-7);
}

.bj-section-head--centre {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

.bj-grid {
  display: grid;
  gap: var(--bj-space-5);
}

.bj-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bj-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .bj-grid--3,
  .bj-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .bj-grid--2,
  .bj-grid--3,
  .bj-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

.bj-stack { display: flex; flex-direction: column; gap: var(--bj-space-4); }
.bj-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bj-space-3);
}

/* --- Utilities ---------------------------------------------------------- */
.bj-hairline {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--bj-line);
}

.bj-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.bj-skip-link {
  position: absolute;
  top: var(--bj-space-3);
  left: var(--bj-space-3);
  z-index: var(--bj-z-modal);
  padding: var(--bj-space-3) var(--bj-space-5);
  background: var(--bj-lime);
  color: var(--bj-void);
  border-radius: var(--bj-radius-pill);
  font-weight: 600;
  transform: translateY(-200%);
}

.bj-skip-link:focus-visible { transform: translateY(0); }

/* --- Motion preference -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- components.css --- */
/* ==========================================================================
   BetJordan Login Portal — Components
   Requires tokens.css + base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons — always pills, per the brand's 999px radius
   -------------------------------------------------------------------------- */
.bj-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bj-space-2);
  padding: 0.85rem 1.75rem;
  border: 1px solid transparent;
  border-radius: var(--bj-radius-pill);
  font-family: var(--bj-font-body);
  font-size: var(--bj-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--bj-speed-fast) var(--bj-ease),
              color var(--bj-speed-fast) var(--bj-ease),
              border-color var(--bj-speed-fast) var(--bj-ease),
              transform var(--bj-speed-fast) var(--bj-ease);
}

.bj-btn:hover { transform: translateY(-1px); }
.bj-btn:active { transform: translateY(0); }

.bj-btn--primary {
  background: var(--bj-lime);
  color: var(--bj-void);
}

.bj-btn--primary:hover { background: var(--bj-lime-dim); }

.bj-btn--secondary {
  background: transparent;
  color: var(--bj-white);
  border-color: var(--bj-line-strong);
}

.bj-btn--secondary:hover {
  border-color: var(--bj-white);
  background: rgba(255, 255, 255, 0.06);
}

.bj-btn--ghost {
  background: transparent;
  color: var(--bj-muted);
  padding-inline: var(--bj-space-3);
}

.bj-btn--ghost:hover { color: var(--bj-white); }

.bj-btn--lg { padding: 1.1rem 2.5rem; font-size: var(--bj-text-base); }
.bj-btn--sm { padding: 0.55rem 1.15rem; font-size: var(--bj-text-xs); }
.bj-btn--block { display: flex; width: 100%; }

/* nowrap keeps labels tidy on a wide screen, but a long one like "Create your
   BetJordan account" is wider than a phone and forces the page to scroll
   sideways. Let it wrap and tighten the padding instead. */
@media (max-width: 560px) {
  .bj-btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  .bj-btn--lg { padding-inline: 1.5rem; }
}

.bj-btn[aria-disabled="true"],
.bj-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.bj-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bj-space-2);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-pill);
  background: rgba(255, 255, 255, 0.05);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bj-muted);
}

.bj-badge--lime {
  background: var(--bj-lime-wash);
  border-color: rgba(206, 241, 53, 0.35);
  color: var(--bj-lime);
}

.bj-badge--live {
  background: var(--bj-red-wash);
  border-color: rgba(229, 0, 45, 0.4);
  color: var(--bj-red-ink);
}

.bj-badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bj-red);
  animation: bj-pulse 1.8s var(--bj-ease) infinite;
}

@keyframes bj-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.bj-header {
  position: sticky;
  top: 0;
  z-index: var(--bj-z-header);
  background: var(--bj-overlay);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bj-line);
}

.bj-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bj-space-6);
  min-width: 0;
  min-height: 72px;
}

.bj-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-block: 3px;
  text-decoration: none;
}

/* Supplied wordmark is white + red, already built for dark grounds. */
.bj-logo {
  display: block;
  width: auto;
  height: 26px;
}

.bj-logo--footer { height: 22px; }

.bj-header__nav {
  display: flex;
  gap: var(--bj-space-5);
  margin-right: auto;
  list-style: none;
}

.bj-header__link {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bj-muted);
  text-decoration: none;
  transition: color var(--bj-speed-fast) var(--bj-ease);
}

.bj-header__link:hover,
.bj-header__link[aria-current="page"] { color: var(--bj-white); }

.bj-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bj-space-3);
}

.bj-header__toggle {
  display: none;
  padding: var(--bj-space-2);
  background: transparent;
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-input);
  cursor: pointer;
}

/* Sign up lives in the header bar on wider screens and inside the menu on
   narrow ones — see the 560px block below. */
.bj-header__nav-cta { display: none; }

@media (max-width: 860px) {
  .bj-header__inner { gap: var(--bj-space-4); }
  .bj-header__nav { display: none; }
  .bj-header__toggle { display: inline-flex; }
  /* The nav carries margin-right:auto, and display:none takes it out of the
     layout with it — so the actions need their own push to stay flush right. */
  .bj-header__actions { margin-left: auto; }
  .bj-header__nav.is-open {
    position: absolute;
    inset: 72px 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--bj-space-4);
    padding: var(--bj-space-5) var(--bj-gutter);
    background: var(--bj-surface);
    border-bottom: 1px solid var(--bj-line);
  }
}

/* On a phone the bar carries the logo and the toggle, nothing else. Both
   account buttons move into the menu, which leaves the header uncluttered
   and the toggle unmistakably in the top-right corner. */
@media (max-width: 560px) {
  .bj-logo { height: 22px; }
  .bj-header__actions > .bj-btn { display: none; }
  .bj-header__nav.is-open .bj-header__nav-cta { display: block; }

  /* Separate the account actions from the section links above them */
  .bj-header__nav.is-open li:not(.bj-header__nav-cta) + .bj-header__nav-cta {
    margin-top: var(--bj-space-2);
    padding-top: var(--bj-space-4);
    border-top: 1px solid var(--bj-line);
  }
}

/* --------------------------------------------------------------------------
   Doors — the signature. Three sheared panels, like cards fanned on a table.
   Hover or focus expands a door and brings its art up to full colour.
   -------------------------------------------------------------------------- */
.bj-doors {
  display: flex;
  width: 100%;
  min-height: 78vh;
  isolation: isolate;
}

.bj-door {
  position: relative;
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  min-width: 0;
  margin-left: calc(var(--bj-shear) * -1);
  padding: var(--bj-space-7) calc(var(--bj-shear) + var(--bj-space-5));
  overflow: hidden;
  text-decoration: none;
  clip-path: polygon(var(--bj-shear) 0, 100% 0, calc(100% - var(--bj-shear)) 100%, 0 100%);
  transition: flex-grow var(--bj-speed-slow) var(--bj-ease-out);
}

.bj-door:first-child {
  margin-left: 0;
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--bj-shear)) 100%, 0 100%);
}

.bj-door:last-child {
  clip-path: polygon(var(--bj-shear) 0, 100% 0, 100% 100%, 0 100%);
}

.bj-door:hover,
.bj-door:focus-within { flex-grow: 1.85; }

/* Art layer — set --bj-door-art per door */
.bj-door__art {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--bj-door-art, linear-gradient(160deg, #1c1c22, #0d0d10));
  background-size: cover;
  background-position: center;
  filter: saturate(0.35) brightness(0.55);
  transform: scale(1.04);
  transition: filter var(--bj-speed-slow) var(--bj-ease-out),
              transform var(--bj-speed-slow) var(--bj-ease-out);
}

.bj-door:hover .bj-door__art,
.bj-door:focus-within .bj-door__art {
  filter: saturate(1) brightness(0.85);
  transform: scale(1);
}

.bj-door__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
    rgba(13, 13, 16, 0.95) 0%,
    rgba(13, 13, 16, 0.55) 45%,
    rgba(13, 13, 16, 0.15) 100%);
}

/* The headline's type is sized from this box, because this — not the panel —
   is the measure it actually gets: the panel is a third of the viewport and
   this is further capped at 34ch. Sizing from the viewport let a line outgrow
   its own column. */
.bj-door__body {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-3);
  width: 100%;
  max-width: 34ch;
}

/* Panels are bottom-aligned, so a headline that happens to fit on one line at
   a given width would lift its eyebrow out of line with the others — and copy
   cannot fix that, since the three headlines break at different widths anyway.
   Reserving two lines keeps every block the same height. The spare line falls
   below the headline, where nothing is showing at rest, rather than above it
   between the eyebrow and the headline. */
.bj-door__title {
  min-height: 1.88em; /* two lines at the 0.94 line-height above */
  font-family: var(--bj-font-display);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: var(--bj-tracking-display);
  text-transform: uppercase;
  /* cqw is 1% of the panel's content box — exactly the space the headline
     has. "Follow the action." measures 6.39x its font size, so 14cqw puts the
     longest forced line at ~90% of the measure: it can never wrap before the
     break, at any panel width. */
  font-size: clamp(1.75rem, 14cqw, 3.5rem);
  color: var(--bj-white);
}

/* Description and actions are visible by default. They only hide-until-chosen
   where there is a pointer to choose with — keying this to hover capability
   rather than viewport width means a touch tablet gets the readable version
   too, and it cannot be undone by a later width-based rule. */
.bj-door__reveal {
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-4);
}

@media (hover: hover) and (pointer: fine) {
  .bj-door__reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--bj-speed) var(--bj-ease),
                transform var(--bj-speed) var(--bj-ease);
  }

  .bj-door:hover .bj-door__reveal,
  .bj-door:focus-within .bj-door__reveal {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The lime edge-light that marks the chosen door */
.bj-door__edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--bj-lime);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--bj-speed) var(--bj-ease-out);
}

.bj-door:hover .bj-door__edge,
.bj-door:focus-within .bj-door__edge { transform: scaleX(1); }

/* Below this a third of the viewport is too narrow to set a headline in two
   lines beside the shear, so the panels stack instead of squeezing. */
@media (max-width: 1000px) {
  .bj-doors {
    flex-direction: column;
    min-height: 0;
  }

  .bj-door {
    flex: 1 1 auto;
    min-height: 46vh;
    margin-left: 0;
    margin-top: calc(var(--bj-shear-mobile) * -1);
    padding: var(--bj-space-6) var(--bj-gutter) var(--bj-space-7);
    clip-path: polygon(0 0, 100% var(--bj-shear-mobile), 100% 100%, 0 calc(100% - var(--bj-shear-mobile)));
  }

  .bj-door:first-child {
    margin-top: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--bj-shear-mobile)));
  }

  .bj-door:last-child {
    clip-path: polygon(0 0, 100% var(--bj-shear-mobile), 100% 100%, 0 100%);
  }

  .bj-door__art { filter: saturate(0.9) brightness(0.7); }

  /* Stacked panels have a sloped bottom edge, so a flat bar gets clipped down
     to a stub at the right. Run the marker along the slope instead. The last
     panel's bottom is straight, so it keeps the flat bar. */
  .bj-door:not(:last-child) .bj-door__edge {
    height: calc(var(--bj-shear-mobile) + 3px);
    clip-path: polygon(0 0,
                       100% var(--bj-shear-mobile),
                       100% calc(var(--bj-shear-mobile) + 3px),
                       0 3px);
  }

  /* Stacked panels are full-width, so panel-relative sizing would balloon the
     headline. Back to viewport sizing here, unchanged from before. */
  .bj-door__title { font-size: clamp(2rem, 6vw, 2.75rem); }
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.bj-card {
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-3);
  padding: var(--bj-space-6);
  background: var(--bj-elevated);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
}

.bj-card__title { font-size: var(--bj-text-d3); }

.bj-card--link {
  text-decoration: none;
  transition: border-color var(--bj-speed-fast) var(--bj-ease),
              transform var(--bj-speed-fast) var(--bj-ease),
              box-shadow var(--bj-speed-fast) var(--bj-ease);
}

.bj-card--link:hover {
  border-color: var(--bj-line-strong);
  transform: translateY(-3px);
  box-shadow: var(--bj-shadow-card);
}

/* --------------------------------------------------------------------------
   Feature list — ticks, used for "Our casino allows you to" style lists
   -------------------------------------------------------------------------- */
.bj-features { list-style: none; display: grid; gap: var(--bj-space-3); }

/* Marker is positioned rather than a grid child, so items can hold arbitrary
   inline content (<strong>, links, multiple text nodes) without reflowing. */
.bj-features__item {
  position: relative;
  padding-left: calc(8px + var(--bj-space-3));
  color: var(--bj-muted);
}

.bj-features__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bj-lime);
}

.bj-features__item strong {
  font-weight: 600;
  color: var(--bj-white);
}

/* --------------------------------------------------------------------------
   Game tile
   -------------------------------------------------------------------------- */
.bj-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bj-elevated);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
  text-decoration: none;
  transition: border-color var(--bj-speed-fast) var(--bj-ease),
              transform var(--bj-speed-fast) var(--bj-ease);
}

.bj-tile:hover {
  border-color: var(--bj-line-strong);
  transform: translateY(-3px);
}

.bj-tile__art {
  aspect-ratio: 4 / 3;
  background: var(--bj-tile-art, linear-gradient(145deg, #23232b, #14141a));
  background-size: cover;
  background-position: center;
}

.bj-tile__badges {
  position: absolute;
  top: var(--bj-space-3);
  left: var(--bj-space-3);
  display: flex;
  gap: var(--bj-space-2);
}

.bj-tile__body {
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-1);
  padding: var(--bj-space-4);
}

.bj-tile__name {
  font-family: var(--bj-font-body);
  font-size: var(--bj-text-base);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

.bj-tile__meta {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bj-faint);
}

/* Shown when the game needs an account */
.bj-tile__lock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--bj-space-3);
  padding: var(--bj-space-4);
  background: var(--bj-overlay);
  text-align: center;
  opacity: 0;
  transition: opacity var(--bj-speed) var(--bj-ease);
}

.bj-tile:hover .bj-tile__lock,
.bj-tile:focus-within .bj-tile__lock { opacity: 1; }

/* --------------------------------------------------------------------------
   Lobby toolbar
   -------------------------------------------------------------------------- */
.bj-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bj-space-3);
  margin-bottom: var(--bj-space-6);
}

.bj-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
}

.bj-search__input {
  width: 100%;
  padding: 0.75rem 1rem 0.75rem 2.75rem;
  background: var(--bj-elevated);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-pill);
  color: var(--bj-white);
}

.bj-search__input::placeholder { color: var(--bj-ghost); }
.bj-search__input:focus { border-color: var(--bj-line-strong); outline-offset: 1px; }

.bj-search__icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--bj-faint);
  pointer-events: none;
}

.bj-chips { display: flex; flex-wrap: wrap; gap: var(--bj-space-2); list-style: none; }

.bj-chip {
  padding: 0.5rem 1.1rem;
  background: transparent;
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-pill);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bj-muted);
  cursor: pointer;
  transition: all var(--bj-speed-fast) var(--bj-ease);
}

.bj-chip:hover { border-color: var(--bj-line-strong); color: var(--bj-white); }

.bj-chip[aria-pressed="true"] {
  background: var(--bj-lime);
  border-color: var(--bj-lime);
  color: var(--bj-void);
}

/* --------------------------------------------------------------------------
   Steps — a real sequence, so numbering earns its place here
   -------------------------------------------------------------------------- */
.bj-steps {
  display: grid;
  gap: var(--bj-space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  list-style: none;
  counter-reset: bj-step;
}

@media (max-width: 780px) { .bj-steps { grid-template-columns: minmax(0, 1fr); } }

.bj-steps__item {
  counter-increment: bj-step;
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-2);
  padding-top: var(--bj-space-5);
  border-top: 2px solid var(--bj-line);
}

.bj-steps__item::before {
  content: counter(bj-step, decimal-leading-zero);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-sm);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--bj-lime);
}

.bj-steps__title { font-size: var(--bj-text-d3); }

/* --------------------------------------------------------------------------
   FAQ accordion — native <details>, no JS required
   -------------------------------------------------------------------------- */
.bj-faq { border-top: 1px solid var(--bj-line); }

.bj-faq__item { border-bottom: 1px solid var(--bj-line); }

.bj-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bj-space-4);
  padding: var(--bj-space-5) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.bj-faq__q::-webkit-details-marker { display: none; }

.bj-faq__q::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--bj-font-mono);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bj-lime);
  transition: transform var(--bj-speed) var(--bj-ease);
}

.bj-faq__item[open] .bj-faq__q::after { content: "\2212"; }

.bj-faq__a {
  padding-bottom: var(--bj-space-5);
  max-width: 72ch;
  color: var(--bj-muted);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.bj-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bj-space-5);
  padding: clamp(var(--bj-space-7), 8vw, var(--bj-space-9)) var(--bj-space-6);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(206, 241, 53, 0.10), transparent 60%),
    var(--bj-surface);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
  text-align: center;
}

.bj-cta__title { font-size: var(--bj-text-d2); }

/* --------------------------------------------------------------------------
   Auth card + form fields
   -------------------------------------------------------------------------- */
.bj-auth {
  width: 100%;
  max-width: 460px;
  padding: clamp(var(--bj-space-6), 5vw, var(--bj-space-8));
  background: var(--bj-elevated);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
  box-shadow: var(--bj-shadow-lift);
}

.bj-field { display: flex; flex-direction: column; gap: var(--bj-space-2); }
.bj-field + .bj-field { margin-top: var(--bj-space-5); }

.bj-label {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-muted);
}

.bj-input {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--bj-surface);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-input);
  color: var(--bj-white);
  transition: border-color var(--bj-speed-fast) var(--bj-ease);
}

.bj-input::placeholder { color: var(--bj-ghost); }
.bj-input:hover { border-color: var(--bj-line-strong); }
.bj-input:focus { border-color: var(--bj-lime); outline: none; box-shadow: 0 0 0 3px var(--bj-lime-wash); }

.bj-input[aria-invalid="true"] { border-color: var(--bj-red); }
.bj-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bj-red-wash); }

/* Password field with a reveal control */
.bj-input-group { position: relative; display: flex; }
.bj-input-group .bj-input { padding-right: 5.5rem; }

.bj-input-group__action {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.4rem 0.8rem;
  background: transparent;
  border: 0;
  border-radius: var(--bj-radius-pill);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bj-muted);
  cursor: pointer;
}

.bj-input-group__action:hover { color: var(--bj-lime); }

.bj-error {
  display: flex;
  align-items: center;
  gap: var(--bj-space-2);
  font-size: var(--bj-text-sm);
  color: var(--bj-red-ink);
}

.bj-error:empty { display: none; }

.bj-checkbox {
  display: flex;
  align-items: center;
  gap: var(--bj-space-3);
  min-height: 24px;
  font-size: var(--bj-text-sm);
  color: var(--bj-muted);
  cursor: pointer;
}

.bj-checkbox input {
  width: 20px;
  height: 20px;
  margin: 2px;
  accent-color: var(--bj-lime);
  cursor: pointer;
}

.bj-form-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--bj-space-3);
  margin-top: var(--bj-space-5);
}

.bj-link {
  color: var(--bj-lime);
  font-size: var(--bj-text-sm);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* Vertical padding on an inline element grows the hit area to clear the
     24px minimum without affecting the line box, so wrapping is unchanged. */
  padding-block: 4px;
  transition: border-color var(--bj-speed-fast) var(--bj-ease);
}

.bj-link:hover { border-bottom-color: var(--bj-lime); }

/* Banner used to mark the sign-off mockup as non-functional */
.bj-notice {
  display: flex;
  gap: var(--bj-space-3);
  padding: var(--bj-space-4);
  margin-bottom: var(--bj-space-6);
  background: var(--bj-lime-wash);
  border: 1px solid rgba(206, 241, 53, 0.3);
  border-radius: var(--bj-radius-input);
  font-size: var(--bj-text-sm);
  color: var(--bj-white);
}

/* --------------------------------------------------------------------------
   Partnership band — AS Monaco FC
   The supplied artwork puts the players and the co-brand lockup in the right
   two-thirds and leaves a dark gradient on the left, so the copy sits in the
   space the image already left for it. Below 860px there is no room to overlay
   type, so the image becomes a block and the copy moves beneath it.
   -------------------------------------------------------------------------- */
.bj-partner {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(340px, 30vw, 560px);
  overflow: hidden;
  /* Sampled from the artwork's own left edge, which is flat at every height.
     The image sits on this rather than being stretched over it, so the join
     is invisible. */
  background: #060407;
  isolation: isolate;
}

.bj-partner__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* Anchored right at its natural aspect rather than stretched to cover.
   Stretching to cover a very wide band forces a vertical crop, and the
   co-brand lockup sits low in the frame — it was the first thing lost on
   wide monitors. Overflow now spills left, where the artwork is empty. */
.bj-partner__media img {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

.bj-partner__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right,
    rgba(6, 4, 7, 0.96) 0%,
    rgba(6, 4, 7, 0.86) 30%,
    rgba(6, 4, 7, 0.30) 55%,
    rgba(6, 4, 7, 0) 72%);
}

.bj-partner__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bj-space-4);
  max-width: 44ch;
  padding-block: var(--bj-space-7);
}

.bj-partner__title { font-size: var(--bj-text-d2); }

/* Overlaying type on the artwork needs real width — below this the copy would
   land on the players. Keep in step with the <source media> on the picture. */
@media (max-width: 1100px) {
  .bj-partner {
    display: block;
    min-height: 0;
    background: var(--bj-surface);
  }

  .bj-partner__media { position: static; z-index: auto; }

  .bj-partner__media img {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 900 / 556;
    object-fit: cover;
  }

  .bj-partner__scrim { display: none; }

  .bj-partner__body {
    max-width: none;
    padding-block: var(--bj-space-6);
  }
}

/* Compact form of the same claim, for the hero and the login page */
.bj-partner-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bj-space-3);
  padding: 0.5rem 1.1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-pill);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bj-faint);
}

.bj-partner-badge strong {
  font-weight: 500;
  color: var(--bj-white);
}

.bj-partner-badge::before {
  content: "";
  width: 5px;
  height: 16px;
  border-radius: 1px;
  background: linear-gradient(to bottom, var(--bj-red) 50%, var(--bj-white) 50%);
}

/* --------------------------------------------------------------------------
   Responsible gaming strip
   -------------------------------------------------------------------------- */
.bj-responsible {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bj-space-5);
  padding: var(--bj-space-5) var(--bj-space-6);
  background: var(--bj-surface);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
}

.bj-responsible__age {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 2px solid var(--bj-white);
  border-radius: 50%;
  font-family: var(--bj-font-display);
  font-size: 1.1rem;
  font-weight: 700;
}

.bj-linklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bj-space-2) var(--bj-space-5);
  list-style: none;
}

.bj-linklist a {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--bj-text-sm);
  color: var(--bj-muted);
  text-decoration: none;
}

.bj-linklist a:hover { color: var(--bj-white); text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bj-footer {
  padding-block: var(--bj-space-8) var(--bj-space-6);
  background: var(--bj-surface);
  border-top: 1px solid var(--bj-line);
}

.bj-footer__grid {
  display: grid;
  gap: var(--bj-space-6);
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding-bottom: var(--bj-space-7);
}

@media (max-width: 860px) {
  .bj-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .bj-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.bj-footer__heading {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  letter-spacing: var(--bj-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--bj-faint);
  margin-bottom: var(--bj-space-3);
}

.bj-footer__list { list-style: none; display: grid; gap: var(--bj-space-2); }

.bj-footer__list a {
  display: inline-block;
  padding-block: 4px;
  font-size: var(--bj-text-sm);
  color: var(--bj-muted);
  text-decoration: none;
}

.bj-footer__list a:hover { color: var(--bj-white); }

.bj-footer__legal {
  padding-top: var(--bj-space-6);
  border-top: 1px solid var(--bj-line);
  font-size: var(--bj-text-xs);
  line-height: 1.7;
  color: var(--bj-ghost);
}

.bj-footer__legal p + p { margin-top: var(--bj-space-3); }

/* --- home.css (index.html) --- */
/* ==========================================================================
   / — homepage
   Requires tokens.css + base.css + components.css.
   ========================================================================== */

/* The hero is the chooser. Intro copy sits above three doors that fill the
   rest of the first screen — but deliberately stop short of the fold, so the
   next section peeks and the page reads as scrollable rather than as a
   full-screen splash. */
.home-hero {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 72px - 3.5rem);
  min-height: calc(100svh - 72px - 3.5rem);
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(206, 241, 53, 0.08), transparent 65%),
    var(--bj-void);
}

/* Kept deliberately compact: every pixel the intro takes is a pixel of the
   chooser pushed below the fold, and the chooser is the point of the page. */
.home-hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bj-space-3);
  max-width: 70ch;
  margin-inline: auto;
  padding-block: clamp(var(--bj-space-5), 3vw, var(--bj-space-6));
  text-align: center;
}

/* Sized so the brief's long H1 sets on two lines rather than three */
.home-hero__title { font-size: clamp(1.8rem, 2.9vw, 2.6rem); }

.home-hero__intro .bj-lead { max-width: 58ch; }

.home-hero__trust {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bj-faint);
}

.home-hero .bj-doors {
  flex: 1 1 auto;
  min-height: 17rem;
}

/* Slightly tighter than the standalone component, to buy back fold space */
.home-hero .bj-door {
  padding-block: var(--bj-space-6);
}

/* Matches the breakpoint where the panels stack in components.css */
@media (max-width: 1000px) {
  .home-hero { min-height: 0; }
  .home-hero .bj-doors { min-height: 0; }
}

/* --------------------------------------------------------------------------
  Door artwork
  Placeholder gradients, colour-matched to the casino lobby tiles so the two
  pages agree. Real photography replaces these by setting --bj-door-art.
  .home-door--casino { --bj-door-art: radial-gradient(110% 80% at 35% 12%, #573a14, transparent 62%), linear-gradient(158deg, #2e2010, #12100c); }
  .home-door--live   { --bj-door-art: radial-gradient(110% 80% at 50% 12%, #5c1428, transparent 62%), linear-gradient(158deg, #37111a, #130d0f); }
  .home-door--sports { --bj-door-art: radial-gradient(110% 80% at 65% 12%, #17492e, transparent 62%), linear-gradient(158deg, #0f2e1f, #0b110d); }
   -------------------------------------------------------------------------- */
/* Small file first, so a phone never requests the large one. */
.home-door--casino { --bj-door-art: url(../assets/img/door-casino-sm.webp); }
.home-door--live   { --bj-door-art: url(../assets/img/door-live-sm.webp); }
.home-door--sports { --bj-door-art: url(../assets/img/door-sports-sm.webp); }

/* Matches the breakpoint where the panels split into thirds */
@media (min-width: 1001px) {
  .home-door--casino { --bj-door-art: url(../assets/img/door-casino.webp); }
  .home-door--live   { --bj-door-art: url(../assets/img/door-live.webp); }
  .home-door--sports { --bj-door-art: url(../assets/img/door-sports.webp); }
}

/* A panel is 4:3 at rest but stretches past 2:1 when it expands, and a
   stacked panel is a wide letterbox on a tablet — both crop vertically.
   These hold each subject in frame: the man's face, the wheel, the fans. */
.home-door--casino .bj-door__art { background-position: 50% 34%; }
.home-door--live   .bj-door__art { background-position: 50% 62%; }
.home-door--sports .bj-door__art { background-position: 50% 38%; }

/* The resting filter in components.css is tuned for flat gradients and buries
   photography. Lifted here, still dark enough for the headline to sit on. */
.home-hero .bj-door__art { filter: saturate(0.72) brightness(0.5); }

.home-hero .bj-door:hover .bj-door__art,
.home-hero .bj-door:focus-within .bj-door__art { filter: saturate(1) brightness(0.82); }

/* --------------------------------------------------------------------------
   Pillar sections — casino, live casino, sports
   -------------------------------------------------------------------------- */
.home-pillar__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* The second column has no eyebrow, so its subhead would otherwise start
   level with the eyebrow in the first column. Drop it by the eyebrow's
   height so it starts level with the H2 instead. */
.home-pillar__grid > * + * {
  margin-top: var(--bj-eyebrow-offset);
}

@media (max-width: 860px) {
  .home-pillar__grid { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, there is no column to line up with */
  .home-pillar__grid > * + * { margin-top: 0; }
}

.home-pillar__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bj-space-4);
}

/* --------------------------------------------------------------------------
   Account block — the second, quieter route to logging in
   -------------------------------------------------------------------------- */
.home-account {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(var(--bj-space-6), 5vw, var(--bj-space-8));
  background: var(--bj-elevated);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
}

@media (max-width: 860px) {
  .home-account { grid-template-columns: minmax(0, 1fr); }
}

.home-account__links {
  display: grid;
  gap: var(--bj-space-3);
  list-style: none;
}

/* --- casino.css (casino.html) --- */
/* ==========================================================================
   /casino — page layout
   Requires tokens.css + base.css + components.css.
   ========================================================================== */

.casino-hero {
  position: relative;
  padding-block: clamp(var(--bj-space-8), 9vw, var(--bj-space-10));
  background:
    radial-gradient(80% 70% at 20% 0%, rgba(206, 241, 53, 0.08), transparent 62%),
    var(--bj-void);
  border-bottom: 1px solid var(--bj-line);
}

.casino-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bj-space-5);
  max-width: 60ch;
}

.casino-hero__title { font-size: var(--bj-text-d1); }

/* --------------------------------------------------------------------------
   Lobby
   -------------------------------------------------------------------------- */
.lobby__count {
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bj-faint);
  margin-left: auto;
}

@media (max-width: 720px) {
  .lobby__count { margin-left: 0; }
}

/* [hidden] is a UA rule and loses to .bj-tile's display, so state it here. */
.bj-tile[hidden] { display: none; }

/* Empty state — says what to do next rather than just reporting nothing. */
.lobby-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bj-space-4);
  padding: var(--bj-space-8) var(--bj-space-5);
  border: 1px dashed var(--bj-line);
  border-radius: var(--bj-radius-card);
  text-align: center;
}

.lobby-empty[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Placeholder tile art
   Until real thumbnails arrive the art panel is coloured by category, so it
   carries information rather than just filling a hole. A game with real art
   sets --bj-tile-art inline and overrides all of this.
   -------------------------------------------------------------------------- */
.bj-tile--slots    { --bj-tile-art: radial-gradient(120% 90% at 30% 15%, #4a3312, transparent 62%), linear-gradient(155deg, #2c1f0e, #14110c); }
.bj-tile--table    { --bj-tile-art: radial-gradient(120% 90% at 30% 15%, #15412a, transparent 62%), linear-gradient(155deg, #0f2a1c, #0b120e); }
.bj-tile--live     { --bj-tile-art: radial-gradient(120% 90% at 30% 15%, #4d1224, transparent 62%), linear-gradient(155deg, #331018, #150d10); }
.bj-tile--gameshow { --bj-tile-art: radial-gradient(120% 90% at 30% 15%, #33265c, transparent 62%), linear-gradient(155deg, #221c3a, #111018); }

/* Square art suits a mixed library — the supplied slot thumbnail is portrait
   and the live-dealer stills are landscape, and both cover-crop to a square
   acceptably. Change this one value if their real library is consistent. */
.bj-tile__art { aspect-ratio: 1 / 1; }

/* --- login.css (login.html) --- */
/* ==========================================================================
   /login — page layout
   Requires tokens.css + base.css + components.css.
   ========================================================================== */

/* A single lime wash behind the form, so the eye lands on the card first. */
.login-main {
  position: relative;
  background:
    radial-gradient(90% 60% at 78% 0%, rgba(206, 241, 53, 0.07), transparent 60%),
    var(--bj-void);
}

.login-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
  padding-block: clamp(var(--bj-space-7), 7vw, var(--bj-space-9));
}

@media (max-width: 980px) {
  .login-layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }
}

/* --- Left column: what logging in gets you --------------------------- */
.login-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bj-space-5);
  max-width: 56ch;
}

.login-intro__title { font-size: var(--bj-text-d1); }

/* --- Right column: the card and everything hanging off it ------------ */
.login-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bj-space-5);
  position: sticky;
  top: calc(72px + var(--bj-space-5));
}

@media (max-width: 980px) {
  .login-panel { position: static; }
}

/* --- Help block ------------------------------------------------------- */
.login-help {
  width: 100%;
  max-width: 440px;
  padding: var(--bj-space-5);
  background: var(--bj-surface);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-card);
}

.login-help__title {
  font-size: 1.05rem;
  margin-bottom: var(--bj-space-2);
}

.login-help__links {
  display: flex;
  flex-direction: column;
  gap: var(--bj-space-2);
  margin-top: var(--bj-space-4);
  list-style: none;
}

/* --- login-alt.css (login.html) --- */
/* ==========================================================================
   /login — doorway panel
   Extends the /login layout above. Only the right-hand panel differs: there is
   no form, so the card becomes a handoff to the operator's own sign-in.
   ========================================================================== */

.login-doorway {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--bj-space-4);
}

.login-doorway__title { font-size: var(--bj-text-d3); }

/* Says plainly where the password is entered. On a domain called
   betjordanlogin.com that is worth stating rather than implying. */
.login-doorway__assurance {
  display: flex;
  gap: var(--bj-space-3);
  width: 100%;
  padding: var(--bj-space-4);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--bj-line);
  border-radius: var(--bj-radius-input);
  font-size: var(--bj-text-sm);
  line-height: 1.6;
  color: var(--bj-muted);
}

.login-doorway__assurance::before {
  content: "";
  flex-shrink: 0;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--bj-lime);
}

.login-doorway__steps {
  display: grid;
  gap: var(--bj-space-3);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bj-doorstep;
}

.login-doorway__steps li {
  counter-increment: bj-doorstep;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--bj-space-3);
  align-items: baseline;
  font-size: var(--bj-text-sm);
  color: var(--bj-muted);
}

.login-doorway__steps li::before {
  content: counter(bj-doorstep);
  font-family: var(--bj-font-mono);
  font-size: var(--bj-text-xs);
  font-weight: 500;
  color: var(--bj-lime);
}