@font-face {
  font-family: "Satoshi";
  src: url("/assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
}

/* ==========================================================================
   Sunalytiq Games — lobby

   The entry point ahead of any single table: a hero, then one row of large
   game cards. Blackjack is real and clickable; everything else is styled as
   intentionally unreleased rather than broken. Tokens below mirror the
   blackjack table's own palette (egg.css) so the two pages read as one
   product, without pulling in any of that file's table-specific rules.
   ========================================================================== */

:root {
  color-scheme: dark;

  --room: #08090a;
  --room-2: #101213;
  --edge: rgba(255, 255, 255, .07);
  --edge-2: rgba(255, 255, 255, .13);

  --ink: #eceef0;
  --ink-2: #a9b0b8;
  --ink-3: #737b84;

  --brass: #c69a4c;
  --brass-hi: #e6bf74;
  --brass-lo: #8a6829;

  --wine: #b3495a;
  --wine-hi: #d97181;

  --swift: cubic-bezier(.2, .9, .25, 1);
  --settle: cubic-bezier(.16, 1, .3, 1);
}

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

html { background: var(--room); }

body {
  min-height: 100svh;
  margin: 0;
  color: var(--ink);
  font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse 62% 40% at 50% 0%, rgba(198, 154, 76, .07), transparent 68%),
    radial-gradient(ellipse 70% 46% at 84% 82%, rgba(179, 73, 90, .05), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 30%, #121415, var(--room) 72%);
  -webkit-font-smoothing: antialiased;
}

/* Faint diagonal weave, the same device the table felt uses — here it just
   keeps the background from reading as flat black. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background-image:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(25deg, rgba(255, 255, 255, .01) 0 1px, transparent 1px 34px);
}

/* ---------------------------------------------------------------- header */

.hdr {
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--edge);
  background: rgba(8, 9, 10, .6);
  backdrop-filter: blur(10px);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(calc(100% - 32px), 1180px);
  min-height: 60px;
  margin: 0 auto;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.brand img { display: block; }

.brand__rule { width: 1px; height: 18px; background: var(--edge-2); }

.brand__word {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.hdr__note {
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: .06em;
}

/* ------------------------------------------------------------------ hero */

.lobby {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) 0 clamp(56px, 9vh, 108px);
}

.hero {
  max-width: 640px;
  margin: 0 0 clamp(44px, 6vh, 72px);
}

.hero__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--brass-hi);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.hero__title {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(34px, 4.4vw, 54px);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: -.01em;
}

.hero__lede {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-2);
  font-size: clamp(14.5px, 1.1vw, 16.5px);
  line-height: 1.6;
}

/* ------------------------------------------------------------- game grid */

.games {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}

.card {
  position: relative;
  display: flex;
  overflow: hidden;
  aspect-ratio: 3 / 4.05;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px 20px 22px;
  text-align: left;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  appearance: none;
  font: inherit;
  border: 1px solid var(--edge-2);
  border-radius: 16px;
  background: linear-gradient(165deg, #17191b 0%, #0d0e10 62%, #0a0b0c 100%);
  box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .7);
  transition: transform .28s var(--settle), border-color .28s ease, box-shadow .28s ease;
}

.card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--room), 0 0 0 4px rgba(226, 188, 118, .55), 0 18px 34px -18px rgba(0, 0, 0, .7);
}

/* Large, mostly-hidden motif per game — discovered on a look, not a sticker. */
.card__motif {
  position: absolute;
  z-index: 0;
  right: -6%;
  bottom: -10%;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(150px, 20vw, 230px);
  line-height: 1;
  opacity: .07;
  transition: transform .5s var(--settle), opacity .35s ease;
}

.card__glow {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .8;
  transition: opacity .3s ease;
}

.card__eyebrow {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 5px 11px;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  background: rgba(0, 0, 0, .32);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.card__eyebrow::before {
  width: 5px;
  height: 5px;
  content: "";
  border-radius: 50%;
  background: var(--ink-3);
}

.card__body {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
}

.card__title {
  color: #fff;
  font-size: clamp(19px, 1.8vw, 23px);
  font-weight: 760;
  letter-spacing: -.01em;
}

.card__subtitle {
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 600;
}

.card__cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  color: var(--brass-hi);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
}

.card__cta svg { width: 13px; height: 13px; transition: transform .25s var(--settle); }

/* -------------------------------------------------------- blackjack, live */

.card--blackjack .card__motif { color: var(--brass-hi); }
.card--blackjack .card__glow { background: radial-gradient(ellipse 80% 55% at 78% 100%, rgba(198, 154, 76, .16), transparent 70%); }
.card--blackjack .card__eyebrow { border-color: rgba(198, 154, 76, .4); background: rgba(198, 154, 76, .1); color: var(--brass-hi); }
.card--blackjack .card__eyebrow::before { background: var(--brass-hi); box-shadow: 0 0 6px 1px rgba(230, 191, 116, .7); }

.card--blackjack:hover,
.card--blackjack:focus-visible {
  transform: translateY(-7px);
  border-color: rgba(198, 154, 76, .48);
  box-shadow: 0 26px 46px -20px rgba(0, 0, 0, .78), 0 0 0 1px rgba(198, 154, 76, .16);
}

.card--blackjack:hover .card__motif,
.card--blackjack:focus-visible .card__motif { opacity: .11; transform: translateY(-6px) scale(1.03); }
.card--blackjack:hover .card__cta,
.card--blackjack:focus-visible .card__cta { opacity: 1; transform: translateY(0); }
.card--blackjack:hover .card__cta svg,
.card--blackjack:focus-visible .card__cta svg { transform: translateX(3px); }

/* ------------------------------------------------------- locked / coming soon */

.card.is-soon {
  cursor: default;
  color: var(--ink-2);
  border-color: var(--edge);
  background: linear-gradient(165deg, #131415 0%, #0b0c0d 62%, #0a0a0b 100%);
}

.card.is-soon .card__title { color: rgba(255, 255, 255, .68); }
.card.is-soon .card__eyebrow { color: var(--ink-3); }
.card.is-soon:disabled,
.card.is-soon[aria-disabled="true"] { opacity: 1; }
.card.is-soon:hover { border-color: rgba(255, 255, 255, .16); }
.card.is-soon:hover .card__motif { opacity: .09; }

.card--poker .card__motif { color: var(--wine-hi); }
.card--poker .card__glow { background: radial-gradient(ellipse 80% 55% at 78% 100%, rgba(179, 73, 90, .14), transparent 70%); }

.card--roulette .card__motif {
  right: 4%;
  bottom: 6%;
  width: 190px;
  height: 190px;
  font-size: 0;
  opacity: .1;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(200, 90, 90, .5) 0deg 14deg, rgba(255, 255, 255, .12) 14deg 28deg);
  mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%);
  -webkit-mask: radial-gradient(circle, transparent 38%, #000 40%, #000 62%, transparent 64%);
}
.card--roulette .card__glow { background: radial-gradient(ellipse 80% 55% at 78% 100%, rgba(198, 90, 90, .12), transparent 70%); }
.card--roulette:hover .card__motif { opacity: .16; }

.card--maty .card__motif {
  right: 12%;
  bottom: 12%;
  width: 150px;
  height: 150px;
  font-size: 0;
  opacity: .09;
  border: 2px solid rgba(180, 160, 210, .55);
  border-radius: 14px;
  transform: rotate(45deg);
}
.card--maty .card__glow { background: radial-gradient(ellipse 80% 55% at 78% 100%, rgba(150, 120, 190, .1), transparent 70%); }
.card--maty:hover .card__motif { opacity: .15; transform: rotate(45deg) scale(1.05); }

/* -------------------------------------------------------------- footnote */

.note {
  margin: clamp(36px, 5vh, 56px) 0 0;
  color: var(--ink-3);
  font-size: 12.5px;
  letter-spacing: .02em;
  text-align: center;
}

/* --------------------------------------------------------------- layout */

@media (max-width: 1050px) {
  .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { aspect-ratio: 3 / 3.4; }
}

@media (max-width: 620px) {
  .games { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { aspect-ratio: auto; min-height: 220px; }
  .hdr__note { display: none; }
}