/* landing.css -- the public landing page only.
   Extends the existing "Keycap & Switch" language (arcade.css's amber-glow
   tile is the template for .game-card) rather than inventing a second visual
   system. No raw hex here -- every colour is a var(--token) from tokens.css,
   same rule the rest of the app follows. */

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

.game-hero {
  position: relative;
  overflow: hidden;
  margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) var(--s-12);
  padding: var(--s-16) var(--s-8) var(--s-12);
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% -10%, rgb(242 179 61 / 0.12), transparent 60%),
    var(--housing);
  border-bottom: 1px solid var(--plate-hi);
}

/* A faint keycap grid drifting downward -- cheap (one repeating gradient,
   one transform), and it's the one purely decorative animation on the page,
   so it's also the one switched off for prefers-reduced-motion below. */
.game-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background-image:
    linear-gradient(rgb(239 234 224 / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(239 234 224 / 0.035) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: game-hero-drift 18s linear infinite;
  pointer-events: none;
}

@keyframes game-hero-drift {
  from { transform: translateY(0); }
  to { transform: translateY(42px); }
}

.game-hero__content {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}

.game-hero__content h1 {
  font-family: var(--f-display);
  font-size: var(--t-hero);
  color: var(--legend);
  line-height: 1.08;
  margin: var(--s-4) 0;
}

.game-hero__lead {
  color: var(--muted);
  font-size: var(--t-lg);
  max-width: 620px;
  margin: 0 auto var(--s-8);
}

.game-hero__actions {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--s-8);
}

.game-hero__actions .btn {
  font-size: var(--t-md);
  padding: var(--s-4) var(--s-8);
}

/* Small trust strip -- real, DB-backed numbers passed in from
   PublicController::landing(), not decoration. */
.game-hero__stats {
  display: flex;
  gap: var(--s-8);
  justify-content: center;
  flex-wrap: wrap;
}

.game-hero__stat {
  text-align: center;
}
.game-hero__stat strong {
  display: block;
  font-family: var(--f-display);
  font-size: var(--t-xl);
  color: var(--hit);
}
.game-hero__stat span {
  font-size: var(--t-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ---------- game showcase ---------- */

.game-showcase {
  margin-bottom: var(--s-16);
}

.game-showcase__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--s-8);
}
.game-showcase__head h2 {
  font-family: var(--f-display);
  color: var(--legend);
  margin: var(--s-2) 0;
}
.game-showcase__head p {
  color: var(--muted);
}

.game-showcase__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s-6);
  max-width: 960px;
  margin: 0 auto;
}

.game-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--plate);
  border: 1px solid rgb(242 179 61 / 0.30);
  box-shadow: var(--e-1);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: rgb(242 179 61 / 0.55);
}

/* Fixed aspect box so the layout never jumps between "canvas not mounted
   yet" and "canvas mounted" -- ui/landing-preview.js only ever draws INSIDE
   this box, it never resizes the box itself. */
.game-card__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--housing);
}
.game-card__preview canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.game-card__badge {
  position: absolute;
  top: var(--s-3);
  left: var(--s-3);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--legend);
  background: rgb(16 20 26 / 0.55);
  padding: var(--s-1) var(--s-3);
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}
.game-card__badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hit);
  box-shadow: 0 0 6px var(--hit);
  animation: game-badge-pulse 1.6s ease-in-out infinite;
}
@keyframes game-badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.game-card__body {
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
}
.game-card__body h3 {
  font-family: var(--f-display);
  color: var(--legend);
  margin: 0;
  font-size: var(--t-lg);
}
.game-card__body p {
  color: var(--muted);
  font-size: var(--t-sm);
  flex: 1;
  margin: 0 0 var(--s-4);
}
.game-card__body .btn { align-self: flex-start; }

/* Cards with more than one CTA (e.g. Zombie Defense + Survival share a card;
   Lessons/Duel have no live preview to fill the space, so their body is
   taller and the actions need their own row rather than stacking raw). */
.game-card__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.game-card__actions .btn { align-self: auto; }

/* ---------- feature band (the substantive "why" content) ---------- */

.feature-band {
  max-width: 860px;
  margin: 0 auto var(--s-16);
}
.feature-band__head {
  text-align: center;
  margin-bottom: var(--s-8);
}
.feature-band__head h2 {
  font-family: var(--f-display);
  color: var(--legend);
}

.feature-card {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-6);
  margin-bottom: var(--s-4);
  background: var(--plate);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--pace);
}
.feature-card__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: rgb(94 224 192 / 0.12);
  color: var(--pace);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: var(--t-lg);
}
.feature-card h3 {
  font-family: var(--f-display);
  color: var(--legend);
  margin: 0 0 var(--s-2);
  font-size: var(--t-md);
}
.feature-card p {
  color: var(--muted);
  margin: 0;
  line-height: 1.7;
}
.feature-card p + p { margin-top: var(--s-3); }

/* ---------- closing CTA band ---------- */

.cta-band {
  text-align: center;
  padding: var(--s-12) var(--s-6);
  border-radius: var(--r-lg);
  background:
    radial-gradient(140% 140% at 50% 0%, rgb(242 179 61 / 0.10), transparent 65%),
    var(--plate);
  border: 1px solid var(--plate-hi);
  margin-bottom: var(--s-8);
}
.cta-band h2 {
  font-family: var(--f-display);
  color: var(--legend);
  margin: 0 0 var(--s-2);
}
.cta-band p {
  color: var(--muted);
  margin: 0 0 var(--s-6);
}
.cta-band__actions {
  display: flex;
  gap: var(--s-4);
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .game-hero {
    margin: calc(-1 * var(--s-4)) calc(-1 * var(--s-4)) var(--s-8);
    padding: var(--s-12) var(--s-4) var(--s-8);
  }
  .feature-card { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .game-hero::before { animation: none; }
  .game-card__badge::before { animation: none; }
  .game-card:hover { transform: none; }
}