/* Landing page: one screen, no scrolling. A big gold wordmark and a Play
   button on one side; the board, tilted like it's lying on a table with
   cards floating around it, on the other. Card suits drift up behind. */

html,
body.landing { height: 100%; }

body.landing {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 45% 65% at 72% 58%, rgba(139, 92, 246, 0.5), transparent 70%),
    radial-gradient(ellipse 40% 50% at 0% 0%, rgba(255, 79, 163, 0.22), transparent 70%),
    radial-gradient(ellipse 40% 40% at 100% 100%, rgba(63, 162, 255, 0.18), transparent 70%),
    var(--suits),
    var(--bg);
}

.landing .topbar { position: relative; z-index: 3; }

/* --- Drifting suits --- */
.drift { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.drift span {
  position: absolute;
  bottom: -120px;
  font-size: 70px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  animation: drift 22s linear infinite;
}
.drift span:nth-child(even) { color: rgba(255, 95, 162, 0.07); }
.drift span:nth-child(1) { left: 4%;  font-size: 90px; animation-delay: -2s; }
.drift span:nth-child(2) { left: 16%; font-size: 54px; animation-delay: -11s; animation-duration: 26s; }
.drift span:nth-child(3) { left: 30%; font-size: 76px; animation-delay: -6s; }
.drift span:nth-child(4) { left: 44%; font-size: 48px; animation-delay: -17s; animation-duration: 30s; }
.drift span:nth-child(5) { left: 58%; font-size: 84px; animation-delay: -9s; animation-duration: 24s; }
.drift span:nth-child(6) { left: 70%; font-size: 60px; animation-delay: -1s; }
.drift span:nth-child(7) { left: 82%; font-size: 96px; animation-delay: -14s; animation-duration: 28s; }
.drift span:nth-child(8) { left: 93%; font-size: 52px; animation-delay: -20s; }
@keyframes drift {
  from { transform: translateY(0) rotate(0deg); }
  to   { transform: translateY(-120vh) rotate(200deg); }
}

/* --- Layout --- */
.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding: clamp(12px, 3vh, 40px) 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}

/* --- Wordmark --- */
.wordmark { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.wm-main {
  font: 800 clamp(54px, min(10vw, 15vh), 136px)/0.95 var(--font-display);
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff7d1 0%, #ffd34d 45%, #ff9a1f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 5px 0 #8a3d00) drop-shadow(0 12px 18px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 28px rgba(255, 179, 71, 0.35));
}
.wm-sub {
  padding: 3px 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5fa2, #8b5cf6);
  box-shadow: 0 4px 0 #46118f, 0 0 24px rgba(178, 60, 255, 0.45);
  font: 800 clamp(15px, 2.4vh, 22px)/1.35 var(--font-display);
  letter-spacing: 7px;
  color: #fff;
}
[dir="rtl"] .wm-main,
[dir="rtl"] .wm-sub { letter-spacing: 0; }

.lead {
  margin-top: clamp(14px, 2.6vh, 24px);
  max-width: 34ch;
  font-size: clamp(16px, 2.3vh, 20px);
  color: var(--muted);
}

.hero-cta { display: flex; margin-top: clamp(18px, 4vh, 36px); }
.btn-play-now {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: clamp(14px, 2.2vh, 18px) clamp(30px, 4vw, 46px);
  font-size: clamp(20px, 2.8vh, 26px);
  letter-spacing: 0.5px;
  animation: cta-pulse 2.2s ease-out infinite;
}
.btn-play-now svg { width: 1.1em; height: 1.1em; }
@keyframes cta-pulse {
  0%   { box-shadow: 0 6px 0 var(--gold-dark), 0 0 0 0 rgba(255, 197, 61, 0.55); }
  70%  { box-shadow: 0 6px 0 var(--gold-dark), 0 0 0 18px rgba(255, 197, 61, 0); }
  100% { box-shadow: 0 6px 0 var(--gold-dark), 0 0 0 0 rgba(255, 197, 61, 0); }
}

/* --- Board on a tilted table --- */
.hero-art {
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stage {
  position: relative;
  width: min(100%, 76vh);
  aspect-ratio: 1;
  perspective: 1400px;
}
.stage-glow {
  position: absolute;
  inset: 22% 6% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(178, 60, 255, 0.55), rgba(139, 92, 246, 0.2) 60%, transparent);
  filter: blur(26px);
  transform: translateY(14%) scaleY(0.55);
}
.tilt {
  position: absolute;
  inset: 4%;
  transform: rotateX(22deg) rotateZ(-5deg);
  transform-style: preserve-3d;
  animation: hover 6s ease-in-out infinite;
}
@keyframes hover { 50% { transform: rotateX(22deg) rotateZ(-5deg) translateY(-10px); } }
.board {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 40px rgba(139, 92, 246, 0.35));
}

.float-card {
  position: absolute;
  width: 17%;
  border-radius: 6%;
  filter: drop-shadow(0 12px 16px rgba(0, 0, 0, 0.5));
  animation: card-float 5s ease-in-out infinite;
}
.fc1 { top: 2%;     left: -3%;  --r: -18deg; }
.fc2 { top: 8%;     right: -4%; --r: 16deg;  animation-delay: -1.7s; }
.fc3 { bottom: 4%;  left: 6%;   --r: 10deg;  animation-delay: -3.2s; width: 15%; }
@keyframes card-float {
  0%, 100% { transform: rotate(var(--r)) translateY(0); }
  50%      { transform: rotate(calc(var(--r) * 0.6)) translateY(-14px); }
}

.board .marble { transition: transform 0.17s ease-out, opacity 0.3s ease; }
.board .played {
  opacity: 0;
  transform: translateY(40px) scale(0.7);
  transform-box: view-box;
  transform-origin: 200px 200px;
  transition: opacity 0.2s ease, transform 0.35s cubic-bezier(0.3, 1.4, 0.6, 1);
}
.board .played.show { opacity: 1; transform: none; }

/* --- Phones (portrait): wordmark and button on top, board below --- */
@media (max-width: 860px) and (orientation: portrait) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(8px, 2vh, 24px);
    text-align: center;
  }
  .wordmark { align-items: center; }
  .wm-main { font-size: clamp(50px, min(17vw, 10vh), 96px); }
  .lead { margin-inline: auto; font-size: clamp(15px, 2.1vh, 18px); }
  .hero-cta { justify-content: center; }
  .stage { width: min(100%, 50vh); }
}

/* Very short screens (phones in landscape): drop the extras. */
@media (max-height: 560px) {
  .lead { display: none; }
  .float-card { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .drift span, .tilt, .float-card, .btn-play-now { animation: none; }
}

/* The logo above the wordmark */
.hero-logo {
  display: block;
  width: clamp(72px, 13vh, 128px);
  height: auto;
  margin-bottom: clamp(6px, 1.5vh, 14px);
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(178, 60, 255, 0.45));
  animation: logo-in 0.6s cubic-bezier(0.3, 1.5, 0.6, 1);
}
@keyframes logo-in { from { transform: scale(0.6) rotate(-12deg); opacity: 0; } }
@media (max-width: 860px) and (orientation: portrait) {
  .hero-logo { margin-inline: auto; width: clamp(60px, 9vh, 96px); }
}
@media (max-height: 560px) { .hero-logo { display: none; } }