/* Landing page: the night city loop behind one clear action. Game UI language: chamfered shapes, Tektur, night palette. */
body.land { margin: 0; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--ink); color: var(--text); font-family: var(--ui); }

.land-bg { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; z-index: 0; }
.land-shade { position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 44%, rgba(7,6,21,.62) 0%, rgba(7,6,21,.25) 55%, rgba(7,6,21,0) 75%),
    linear-gradient(180deg, rgba(7,6,21,.55) 0%, rgba(7,6,21,0) 28%, rgba(7,6,21,0) 62%, rgba(7,6,21,.8) 100%); }

.land-hero { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: max(32px, env(safe-area-inset-top)) var(--gutter) max(40px, env(safe-area-inset-bottom)); }

.land-mark { margin-bottom: 22px; filter: drop-shadow(0 0 18px rgba(255,191,102,.35)); animation: land-in .9s .1s both; }
.land-word { margin: 0; font: 700 clamp(40px, 8.4vw, 112px)/.95 var(--display); letter-spacing: .12em; padding-left: .12em;
  text-shadow: 0 0 40px rgba(150,200,255,.35), 0 4px 30px rgba(0,0,0,.6); animation: land-in 1s .2s both; }
.land-tag { margin: 18px 0 38px; font: 500 clamp(16px, 1.7vw, 21px)/1.4 var(--ui); color: var(--text-2);
  text-shadow: 0 2px 16px rgba(0,0,0,.7); animation: land-in 1s .35s both; }

/* Actions: the game's kit buttons (css/kit.css), primary + secondary side by side */
.land-actions { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; animation: land-in 1s .5s both; }
.land-cta { height: 60px; padding: 0 34px; font-size: 17px; }
.mg-btn.sec.land-wl { height: 60px; padding: 0 30px; font: 700 15px/1 var(--display); letter-spacing: .14em; color: var(--text100); }
.mg-btn.sec.land-wl::after { background: rgba(10,12,28,.82); }

@keyframes land-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 560px) {
  .land-actions { flex-direction: column; align-items: stretch; width: min(320px, 100%); }

}
@media (prefers-reduced-motion: reduce) {
  .land-word, .land-tag, .land-actions { animation: none; }
}