/* The landing page: a lantern-lit field guide to the ghosts of your street. A night sky over rooftops with the radar
   and a ghost; the hunt in its three real steps; the ghosts as specimen plates, most of them still shadows, as the
   game keeps them until caught; the kit in a velvet-lined case; Halloween Night in pumpkin light. One dark look, like
   the game, in its own colours (tokens.uss), fonts and models. Loaded after style.css, on this page only. */
:root {
  --night: #070E1B; --night-top: #0D1A33; --surface: #10192A; --surface-2: #1C283C; --line: #303D55; --line-strong: #465671;
  --parchment: #F4ECDB; --muted: #BDB3A2; --teal: #77E8DB; --amber: #F9BE73;
  --brass: #D2AC66; --brass-dark: #6E5029; --brass-light: #F2D69A;
  --horizon: #1A2F52;
  --velvet: #0F2E33; --velvet-deep: #061517; --dusk: #1E1027; --pumpkin: #F08A3C; --moon: #FFF6DD;
  --rarity-common: #8596A7; --rarity-uncommon: #54BB97; --rarity-rare: #96B8F5; --rarity-epic: #E5BDF2; --rarity-legendary: #FFE891;
  --display: "IM Fell English", "Iowan Old Style", Georgia, serif;
  --body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wide: 72rem;
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
}

body { padding: 0; background: var(--night); font-family: var(--body) }
.site { position: relative; overflow-x: clip }
.bar, main { max-width: var(--wide); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r) }
header.top.bar { position: absolute; inset: 0 0 auto; z-index: 3; padding-block: 18px 0 }
.top nav a { color: var(--parchment); opacity: .78 }
.top nav a:hover { opacity: 1 }

.eyebrow { margin: 0 0 12px; font: 700 13px/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--brass) }
h2 { font: 400 clamp(32px, 5vw, 48px)/1.08 var(--display); color: var(--parchment); margin: 0 0 14px; text-wrap: balance }
h3 { font: 400 25px/1.15 var(--display); color: var(--parchment); margin: 0 0 6px }
section ul, section ol { list-style: none; padding: 0; margin: 0 }

/* ---------- The night over the rooftops ---------- */
.front { position: relative; isolation: isolate; padding-top: clamp(96px, 12vw, 128px);
  background: linear-gradient(180deg, var(--night) 0%, var(--night-top) 58%, var(--horizon) 100%) }
.sky, .sky::after { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.sky {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(244,236,219,.85), transparent 60%),
    radial-gradient(1px 1px at 27% 42%, rgba(244,236,219,.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 12%, rgba(244,236,219,.75), transparent 60%),
    radial-gradient(1px 1px at 56% 31%, rgba(244,236,219,.5), transparent 60%),
    radial-gradient(1.6px 1.6px at 68% 9%, rgba(244,236,219,.9), transparent 60%),
    radial-gradient(1px 1px at 79% 37%, rgba(244,236,219,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 91% 22%, rgba(244,236,219,.7), transparent 60%),
    radial-gradient(1px 1px at 6% 55%, rgba(244,236,219,.45), transparent 60%),
    radial-gradient(1px 1px at 34% 66%, rgba(244,236,219,.4), transparent 60%),
    radial-gradient(1.2px 1.2px at 87% 58%, rgba(244,236,219,.5), transparent 60%);
  background-size: 397px 283px;
}
.sky::after {
  content: "";
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(119,232,219,.8), transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 52%, rgba(244,236,219,.8), transparent 60%),
    radial-gradient(1.8px 1.8px at 82% 14%, rgba(249,190,115,.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 44% 80%, rgba(244,236,219,.6), transparent 60%);
  background-size: 613px 431px;
  animation: twinkle 5.5s ease-in-out infinite alternate;
}
.front::before { content: ""; position: absolute; z-index: -1; width: min(900px, 120vw); aspect-ratio: 1; right: -12%; top: 4%;
  background: radial-gradient(circle, rgba(119,232,219,.16), rgba(119,232,219,.05) 40%, transparent 68%); pointer-events: none }

.front-in { max-width: var(--wide); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 32px }
.wordmark { margin: 0; font: 400 clamp(68px, 11.5vw, 140px)/.9 var(--display); letter-spacing: -.01em; color: var(--parchment);
  text-shadow: 0 0 42px rgba(119,232,219,.28) }
.tagline { margin: 14px 0 0; font: 400 clamp(24px, 3vw, 32px)/1.2 var(--display); color: var(--brass-light) }
.front-lede { margin: 18px 0 0; max-width: 34rem; font-size: 19px; color: var(--parchment); opacity: .9 }
.stores { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px }
.store { display: inline-flex; flex-direction: column; justify-content: center; min-width: 168px; padding: 10px 20px 11px;
  border: 1px solid var(--brass); border-radius: 14px; background: rgba(16,25,42,.72); color: var(--parchment);
  font: 600 20px/1.1 var(--body); text-decoration: none; transition: border-color .2s, transform .2s, background .2s }
.store small { font: 400 12px/1.3 var(--body); color: var(--muted); letter-spacing: .02em }
a.store:hover { border-color: var(--brass-light); background: rgba(28,40,60,.85); transform: translateY(-1px) }
.store.soon { border-style: dashed; border-color: var(--line-strong) }
/* The .stores box says per store whether it's "soon" or "live", and only that button shows. */
.stores[data-app-store="soon"] a.app-store, .stores[data-app-store="live"] .soon.app-store,
.stores[data-google-play="soon"] a.google-play, .stores[data-google-play="live"] .soon.google-play { display: none }
.facts { margin: 16px 0 0; font-size: 14px; color: var(--muted) }

.front-art { position: relative; margin: 0; justify-self: center; padding-bottom: 8px }
.phone { width: clamp(232px, 25vw, 300px); padding: 9px; border-radius: 46px;
  background: linear-gradient(150deg, #4A3720 0%, #15100A 34%, #0B0805 66%, #3A2B17 100%);
  box-shadow: 0 0 0 1px rgba(210,172,102,.5), 0 30px 80px rgba(0,0,0,.6), 0 0 120px rgba(119,232,219,.16) }
.phone img { display: block; width: 100%; height: auto; border-radius: 38px }
.float { position: absolute; pointer-events: none; animation: float 7s ease-in-out infinite }
.drifter { width: clamp(130px, 15vw, 200px); height: auto; right: -52%; top: -6%;
  filter: drop-shadow(0 0 28px rgba(244,236,219,.35)) }
.roofs { display: block; width: 100%; height: clamp(56px, 8vw, 112px); margin-top: clamp(-24px, -2vw, -8px); fill: var(--night) }
.roofs rect { fill: var(--amber); opacity: .7 }

/* ---------- The hunt, in its three steps ---------- */
.steps { padding-block: clamp(56px, 8vw, 96px) 24px; text-align: center }
.steps-list { counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; position: relative }
.steps-list::before { content: ""; position: absolute; top: 96px; left: 18%; right: 18%; border-top: 1px dashed var(--brass-dark) }
.steps-list li { counter-increment: step; position: relative; display: grid; justify-items: center; align-content: start }
.steps-list img { width: 190px; height: 190px; object-fit: contain; filter: drop-shadow(0 16px 24px rgba(0,0,0,.55)); position: relative }
.steps-list h3::before { content: counter(step); display: grid; place-items: center; width: 32px; height: 32px; margin: 14px auto 12px;
  border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-light); font: 700 15px/1 var(--body);
  background: radial-gradient(circle at 35% 30%, #3A2B17, #120D07) }
.steps-list p { max-width: 20rem; color: var(--muted) }

/* ---------- The ghosts, as specimen plates ---------- */
.ghosts { padding-block: clamp(56px, 8vw, 96px) 24px }
.ghosts > .eyebrow, .ghosts > h2, .ghosts > .intro { text-align: center }
.intro { max-width: 36rem; margin: 0 auto 32px; color: var(--muted) }
.plates { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px }
.plate { position: relative; padding: 12px 12px 18px; text-align: center; border: 1px solid var(--line);
  border-radius: 999px 999px 16px 16px; background: linear-gradient(180deg, var(--surface), #0A1220) }
.window { aspect-ratio: 1; display: grid; place-items: center; border-radius: 999px 999px 12px 12px; overflow: hidden;
  background: radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--rarity) 26%, transparent), transparent 70%),
              radial-gradient(circle at 50% 100%, rgba(244,236,219,.06), transparent 60%) }
.window img { width: 94%; height: auto; transition: transform .5s ease }
.plate:hover .window img { transform: translateY(-6px) }
.chip { display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 8px; padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--rarity) 50%, transparent); border-radius: 999px;
  font: 700 11px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--rarity) }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--rarity) }
.plate h3 { font-size: 24px }
.plate p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--muted) }
.plate.unknown { background: linear-gradient(180deg, #0D1524, #080F1B); border-style: dashed }
.plate.unknown h3 { color: var(--muted); letter-spacing: .08em }
.plate.unknown .window img { width: 78%; opacity: .92 }

.pouch { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 64px);
  max-width: 54rem; margin: clamp(48px, 7vw, 80px) auto 0 }
.phone.small { width: clamp(200px, 22vw, 250px); border-radius: 40px }
.phone.small img { border-radius: 32px }
.pouch-copy h3 { font-size: clamp(28px, 3.4vw, 36px); margin-bottom: 12px }
.pouch-copy p { color: var(--parchment); opacity: .88 }

/* ---------- The kit, in a velvet-lined case ---------- */
.kit { padding-block: clamp(56px, 8vw, 96px) clamp(56px, 8vw, 96px); text-align: center }
.case { margin-top: 28px; padding: clamp(14px, 3vw, 28px); border-radius: 26px; border: 2px solid var(--brass-dark); text-align: left;
  background: radial-gradient(ellipse at 50% 0%, #17434A, var(--velvet) 45%, var(--velvet-deep));
  box-shadow: inset 0 0 0 1px rgba(242,214,154,.22), inset 0 0 70px rgba(0,0,0,.55), 0 30px 60px rgba(0,0,0,.4) }
.slots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px }
.slot { grid-column: span 2; display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; gap: 14px; padding: 14px;
  border-radius: 16px; background: rgba(3,11,13,.42); box-shadow: inset 0 3px 12px rgba(0,0,0,.6), inset 0 -1px 0 rgba(242,214,154,.08) }
.slot.wide { grid-column: span 3; grid-template-columns: 150px minmax(0, 1fr) }
.slot img { width: 100%; height: auto; filter: drop-shadow(0 12px 14px rgba(0,0,0,.55)) }
.slot h3 { font-size: 23px }
.slot p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted) }
.case-note { margin: 16px 0 2px; text-align: center; font-size: 14px; color: var(--muted) }

/* ---------- Halloween Night ---------- */
.halloween { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 9vw, 120px);
  background: radial-gradient(ellipse at 28% 62%, rgba(240,138,60,.3), transparent 58%),
              linear-gradient(180deg, var(--night) 0%, var(--dusk) 26%, var(--dusk) 74%, var(--night) 100%) }
.moon { position: absolute; z-index: -1; right: 8%; top: 14%; width: clamp(72px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, var(--moon), var(--brass-light) 56%, var(--brass) 100%);
  box-shadow: 0 0 90px rgba(255,232,170,.32); opacity: .88 }
.halloween-in { max-width: var(--wide); margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r);
  display: grid; grid-template-columns: minmax(200px, 420px) minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 64px) }
.allhallow { width: 100%; height: auto; filter: drop-shadow(0 0 54px rgba(240,138,60,.5)); animation: float 8s ease-in-out infinite }
.halloween .eyebrow { color: var(--amber) }
.halloween h2 { font-size: clamp(42px, 6.5vw, 68px) }
.halloween p { max-width: 34rem; font-size: 18px }

/* ---------- Fair play and safety ---------- */
.closing { padding-block: clamp(48px, 7vw, 80px) 8px }
.fair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px) }
.fair h2 { font-size: clamp(28px, 3.6vw, 36px) }
.fair li { position: relative; padding-left: 22px; margin-bottom: 10px }
.fair li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--brass) }
.needs { color: var(--muted); font-size: 15px }

footer.bar { margin-top: 40px; padding-block: 22px 44px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 22px;
  color: var(--muted); font-size: 14px }
footer.bar span { margin-right: auto }
footer .company { flex-basis: 100%; order: 1; margin: 0; font-size: 13px }

@keyframes float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-12px) } }
@keyframes twinkle { from { opacity: .35 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .float, .allhallow, .sky::after { animation: none } .window img { transition: none } }

/* ---------- Narrow screens ---------- */
@media (max-width: 900px) {
  .plates { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .slot, .slot.wide { grid-column: span 3 }
}
@media (max-width: 760px) {
  .front { padding-top: 112px }
  .top nav { gap: 12px; font-size: 14px }
  .brand { font-size: 21px }
  .brand img { width: 34px; height: 34px }
  .front-in { grid-template-columns: 1fr; text-align: left }
  .front-art { margin-top: 12px; justify-self: start; padding-left: 6% }
  .drifter { right: -30%; top: -8%; width: 120px }
  .steps-list { grid-template-columns: 1fr; gap: 40px }
  .steps-list::before { display: none }
  .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px }
  .pouch { grid-template-columns: 1fr; justify-items: center; text-align: center }
  .slots { grid-template-columns: 1fr }
  .slot, .slot.wide { grid-column: auto; grid-template-columns: 96px minmax(0, 1fr) }
  .halloween-in { grid-template-columns: 1fr; justify-items: center; text-align: center }
  .allhallow { max-width: 300px }
  .halloween p { margin-inline: auto }
  .fair { grid-template-columns: 1fr }
  footer.bar span { width: 100% }
}