/* Lobby: a bold headline, then a bento of game cards (Crash is the big one, the five newest are compact), then the shared live tables. */
.page-lobby { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.lobby-hero { display: grid; gap: 10px; padding: 18px 4px 4px; max-width: 760px; }
.lobby-hero .kicker {
  justify-self: start; padding: 5px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold); background: rgba(255, 201, 64, 0.1); box-shadow: 0 0 0 1px rgba(255, 201, 64, 0.35) inset;
}
.lobby-hero h1 { font-size: clamp(30px, 4.4vw, 58px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; }
.lobby-hero .muted { font-size: var(--step-1); max-width: 56ch; }

.lobby-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); gap: 16px; }
.gcard {
  --hue: 265; position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center;
  padding: 18px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, hsl(var(--hue) 60% 22% / 0.95), rgba(22, 19, 49, 0.96) 60%);
  box-shadow: var(--shadow), 0 0 0 1px hsl(var(--hue) 80% 70% / 0.18) inset;
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.gcard::before {
  content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; left: -70px; top: -80px; border-radius: 50%;
  background: radial-gradient(closest-side, hsl(var(--hue) 90% 62% / 0.45), transparent);
}
.gcard:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px hsl(var(--hue) 90% 50% / 0.8), 0 0 0 1px hsl(var(--hue) 90% 72% / 0.45) inset; }
.gcard:hover .gcard-art .gi { transform: rotate(-8deg) scale(1.06); }
.gcard:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gcard-art {
  display: grid; place-items: center; width: 112px; height: 112px; border-radius: 28px;
  background: radial-gradient(circle at 35% 30%, hsl(var(--hue) 80% 40% / 0.6), hsl(var(--hue) 60% 12% / 0.9));
  box-shadow: 0 0 0 1px hsl(var(--hue) 80% 70% / 0.25) inset, 0 16px 30px -16px hsl(var(--hue) 90% 50% / 0.9);
}
.gcard-art .gi { width: 70px; height: 70px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); transition: transform 300ms var(--ease); }
.gcard-body { display: grid; gap: 6px; min-width: 0; }
.gcard-title { font: 800 clamp(20px, 2vw, 26px)/1.1 var(--display); letter-spacing: -0.01em; }
.gcard-desc { color: var(--mute); font-size: var(--step--1); max-width: 40ch; }
.gcard-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.chip { padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; }
.chip-rtp { color: var(--win); background: rgba(31, 224, 138, 0.1); box-shadow: 0 0 0 1px rgba(31, 224, 138, 0.3) inset; }
.chip-off { color: #fff; background: var(--lose); }
.gcard-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: hsl(var(--hue) 95% 78%); }
.gcard-cta::after { content: "→"; transition: transform 200ms var(--ease); }
.gcard:hover .gcard-cta::after { transform: translateX(4px); }
.gcard.is-off { filter: grayscale(0.7); opacity: 0.7; }

.gcard-dice { --hue: 262; grid-column: span 5; }
.gcard-crash { --hue: 345; order: -1; grid-column: span 7; grid-row: span 2; grid-template-columns: minmax(0, 1fr); align-content: end; padding: 26px; }
.gcard-crash .gcard-art { position: absolute; right: 22px; top: 22px; width: 220px; height: 220px; border-radius: 50%; }
.gcard-crash .gcard-art .gi { width: 130px; height: 130px; }
.gcard-crash .gcard-title { font-size: clamp(30px, 3.4vw, 44px); }
.gcard-crash .gcard-desc { font-size: var(--step-0); }
.gcard-mines { --hue: 152; grid-column: span 5; }
.gcard-plinko { --hue: 278; grid-column: span 6; }
.gcard-wheel { --hue: 32; grid-column: span 6; }
.gcard-limbo { --hue: 190; grid-column: span 4; }
.gcard-coinflip { --hue: 45; grid-column: span 4; }
.gcard-keno { --hue: 205; grid-column: span 4; }
.gcard-hilo { --hue: 12; grid-column: span 6; }
.gcard-tower { --hue: 85; grid-column: span 6; }
.gcard-limbo, .gcard-coinflip, .gcard-keno { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.gcard-limbo .gcard-art, .gcard-coinflip .gcard-art, .gcard-keno .gcard-art { width: 84px; height: 84px; border-radius: 22px; }
.gcard-limbo .gcard-art .gi, .gcard-coinflip .gcard-art .gi, .gcard-keno .gcard-art .gi { width: 54px; height: 54px; }
.page-lobby .tables { grid-column: 1 / -1; }

@media (max-width: 1100px) {
  .gcard-dice, .gcard-mines, .gcard-plinko, .gcard-wheel, .gcard-limbo, .gcard-coinflip, .gcard-keno, .gcard-hilo, .gcard-tower { grid-column: span 6; }
  .gcard-crash { grid-column: 1 / -1; grid-row: auto; min-height: 260px; }
}
@media (max-width: 640px) {
  .lobby-grid { gap: 12px; }
  .gcard-dice, .gcard-mines, .gcard-plinko, .gcard-wheel, .gcard-limbo, .gcard-coinflip, .gcard-keno, .gcard-hilo, .gcard-tower { grid-column: 1 / -1; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .gcard-limbo .gcard-art, .gcard-coinflip .gcard-art, .gcard-keno .gcard-art { width: 76px; height: 76px; border-radius: 20px; }
  .gcard-limbo .gcard-art .gi, .gcard-coinflip .gcard-art .gi, .gcard-keno .gcard-art .gi { width: 48px; height: 48px; }
  .gcard-art { width: 76px; height: 76px; border-radius: 20px; }
  .gcard-art .gi { width: 48px; height: 48px; }
  .gcard-crash { min-height: 250px; padding: 18px; }
  .gcard-crash .gcard-art { width: 112px; height: 112px; right: 14px; top: 14px; }
  .gcard-crash .gcard-art .gi { width: 66px; height: 66px; }
  .gcard-crash .gcard-desc { max-width: 30ch; }
  .lobby-hero { padding-top: 6px; }
}

/* contest banner above the game cards */
.c-banner {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--r-lg); text-decoration: none; color: var(--ink);
  background: linear-gradient(135deg, rgba(255, 201, 64, 0.18), rgba(255, 61, 110, 0.12) 60%, rgba(139, 92, 255, 0.16));
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 201, 64, 0.35) inset; transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.c-banner:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -24px rgba(255, 201, 64, 0.7), 0 0 0 1px rgba(255, 201, 64, 0.6) inset; }
.c-banner-cup { font-size: 1.6rem; filter: drop-shadow(0 4px 10px rgba(255, 201, 64, 0.5)); }
.c-banner-text { flex: 1; font: 800 var(--step-1)/1.2 var(--display); letter-spacing: -0.01em; }
.c-banner-cta { padding: 8px 16px; border-radius: 999px; font-weight: 800; color: #1d1300; background: var(--gold); white-space: nowrap; }
@media (max-width: 640px) { .c-banner-text { font-size: var(--step-0); } }