/* ------------------------------------------------------------------
   Landing-page-only styles. The shared header (.banner) and panel
   (.parchment) come from /style.css so this page reads as part of
   the same app. Anything in here is purely marketing-page layout.
   ------------------------------------------------------------------ */

/* The shared .banner is sticky in-game; on the landing we want the
   hero to be the first thing the eye lands on, so let it scroll. */
body.landing-body .banner { position: static; padding: 28px 10px 22px; }
@media (max-width: 480px) {
  body.landing-body .banner { padding: 22px 10px 16px; }
}

/* The shared landing nav (.landing-nav) lives in /style.css now —
   it's used on /me as well, so it can't live in this page's <style>. */

/* ------------------------------------------------------------------
   Page wrapper
   ------------------------------------------------------------------ */
.landing {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
  padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}

/* All marketing panels extend the canonical .parchment style. They
   sit on the dark page background, share the deep inset frame, the
   dashed inner border, and the soft corner shadows from style.css. */
.panel {
  max-width: 980px;          /* override .parchment 720px cap for marketing layouts */
  margin: 22px auto;
  padding: 28px 28px 32px;
}
@media (max-width: 480px) {
  .panel { margin: 14px auto; padding: 20px 18px 24px; border-radius: 0; }
}

/* Suppress the global h2 fleurons on this page — they decorate
   in-game section headers, but on the landing they crowd the
   marketing copy and the small-caps section titles. */
.panel h2::before, .panel h2::after,
.section-title::before, .section-title::after { content: ""; }

/* ------------------------------------------------------------------
   Hero — CTA above the fold. Pitch + buttons sit above the
   illustration so the primary action is visible on first paint.
   ------------------------------------------------------------------ */
.hero {
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
}
.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #8c4a08;
  margin-bottom: 0.7rem;
  text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.hero .kicker .rule {
  display: inline-block;
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8b6020 50%, transparent);
}
.hero h1 {
  font-family: 'Cinzel', serif;
  font-weight: 900;
  font-size: clamp(1.85rem, 5.2vw, 2.9rem);
  line-height: 1.15;
  margin: 0 0 0.7rem;
  letter-spacing: 1.5px;
  color: #3a230d;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}
.hero .pitch {
  max-width: 38rem;
  margin: 0 auto 1.4rem;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.55;
  color: #3a230d;
}
.hero .pitch em { color: #6e3d05; font-style: italic; }
.hero .pitch strong { color: #2a1c0e; font-weight: 600; }
.hero .cta-row {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin: 0 auto 1.6rem;
}
.hero .cta-row a { text-decoration: none; display: inline-block; }
.hero-illustration {
  display: block;
  width: 100%;
  max-width: 100%;        /* fill the panel width — no awkward parchment gutters */
  aspect-ratio: 16 / 7;
  object-fit: cover;
  margin: 0.6rem auto 0;
  border-radius: 6px;
  border: 1px solid #8c6a2c;
  box-shadow:
    0 0 0 3px #2b1b08,
    0 0 0 4px #5d3f17,
    0 14px 30px rgba(0,0,0,0.55);
}
@media (max-width: 480px) {
  /* On phones the hero image dominates; cap its height so CTAs
     remain quickly reachable on first scroll. */
  .hero-illustration { aspect-ratio: 16 / 9; max-height: 220px; object-position: center 40%; }
}

/* Buttons (.btn-primary / .btn-secondary) live in /style.css now —
   they're shared with the .me-card sign-in CTA. */

/* ------------------------------------------------------------------
   Section titles (live BETWEEN panels, on the dark page bg)
   ------------------------------------------------------------------ */
.section-title {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  color: #f1d699;
  font-size: 1.05rem;
  margin: 1.8rem 0 0.4rem;
  text-shadow: 0 0 14px rgba(255, 175, 70, 0.25);
}
/* Reclaim a touch more breathing room when a section-title directly
   follows a panel (which is the common case). */
.panel + .section-title { margin-top: 2.2rem; }
.section-sub {
  text-align: center;
  color: #c9a76d;
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.02rem;
  max-width: 36rem;
  margin: 0 auto 1.2rem;
}

/* ------------------------------------------------------------------
   Why-play grid: 4 medallion cards, 4-across at desktop.
   ------------------------------------------------------------------ */
.pitch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding-top: 18px;
  padding-bottom: 22px;
}
.pitch-card {
  text-align: center;
  padding: 0.4rem 0.4rem 0.6rem;
  opacity: 0;
  animation: fadeUp 0.65s ease-out forwards;
}
.pitch-card:nth-child(1) { animation-delay: 0.05s; }
.pitch-card:nth-child(2) { animation-delay: 0.15s; }
.pitch-card:nth-child(3) { animation-delay: 0.25s; }
.pitch-card:nth-child(4) { animation-delay: 0.35s; }

/* Icons are now medallions — circular clip with a thin amber ring,
   inset shadow for engraved depth. The cream-jpg background becomes
   the medallion face instead of needing to disappear. */
.pitch-card .gfx-icon-wrap {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 0.2rem auto 0.9rem;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #fbecc7 0%, #e7cf99 80%);
  box-shadow:
    0 0 0 1px #4f3308,
    inset 0 0 0 2px rgba(244, 224, 188, 0.6),
    inset 0 -3px 8px rgba(70, 40, 10, 0.35),
    0 4px 10px rgba(0,0,0,0.35);
}
.pitch-card .gfx-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Soft multiply so the icon's cream backdrop melts into the
     medallion face instead of forming a visible square. */
  mix-blend-mode: multiply;
}
.pitch-card h3 {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  font-size: 1rem;
  text-transform: uppercase;
  color: #3a230d;
  margin: 0 0 0.45rem;
  border: none;
  padding: 0;
}
.pitch-card p {
  color: #3a230d;
  margin: 0;
  line-height: 1.5;
  font-size: 0.96rem;
}

/* ------------------------------------------------------------------
   How it works: image LEFT, numbered steps RIGHT. At desktop the
   illustration breaks slightly outside the panel's inset frame, so
   this section deliberately disrupts the otherwise-symmetric flow.
   ------------------------------------------------------------------ */
.how-panel { padding: 24px 28px 28px; overflow: visible; }
.how-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
  align-items: center;
}
@media (min-width: 720px) {
  .how-row { grid-template-columns: 1.1fr 1fr; gap: 1.8rem; }
  /* Break the image out past the panel's left inset frame for a
     single asymmetric moment — the rest of the page is dead-centered,
     so one rule-breaking image earns the visual rhythm. */
  .how-panel .how-illustration { margin-left: -38px; }
}
.how-illustration {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #8c6a2c;
  box-shadow:
    0 0 0 2px #2b1b08,
    0 0 0 3px #5d3f17,
    0 12px 26px rgba(0,0,0,0.55);
}
.how-list {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  color: #3a230d;
  line-height: 1.55;
}
.how-list li {
  position: relative;
  counter-increment: step;
  padding: 0.4rem 0 1rem 3.4rem;
  border-bottom: 1px solid rgba(110, 75, 30, 0.28);
}
.how-list li:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.how-list li::before {
  content: counter(step, upper-roman) ".";
  position: absolute;
  left: 0;
  top: 0.35rem;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1px;
  color: #8c4a08;
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
  width: 2.6rem;
  text-align: left;
}
.how-list li strong {
  display: block;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #3a230d;
  margin: 0 0 0.25rem;
}
.how-list li span {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1rem;
  color: #3a230d;
}

/* ------------------------------------------------------------------
   Donate panel — single h2 lives in the .section-title above; this
   panel leads with its coin + body copy + CTA.
   ------------------------------------------------------------------ */
.donate-panel { text-align: center; }
.donate-panel .gfx-coin-wrap {
  position: relative;
  width: 116px;
  height: 116px;
  margin: 0.4rem auto 1rem;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #f8dd8a 0%, #b8801e 75%, #6e4a12 100%);
  box-shadow:
    0 0 0 1px #4f3308,
    inset 0 0 0 2px rgba(255, 220, 140, 0.4),
    inset 0 -4px 10px rgba(50,30,10,0.45),
    0 6px 14px rgba(0,0,0,0.4);
}
.donate-panel .gfx-coin {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.donate-panel .lead {
  max-width: 36rem;
  margin: 0 auto 1.2rem;
  font-family: 'IM Fell English', Georgia, serif;
  color: #3a230d;
  line-height: 1.55;
  font-size: 1.05rem;
}
.donate-panel .fine-print {
  font-size: 0.85rem;
  color: #6e5128;
  margin: 1rem auto 0;
  font-style: italic;
}

/* ------------------------------------------------------------------
   Feedback panel — single h2 lives in the .section-title above.
   ------------------------------------------------------------------ */
.feedback-panel .lead {
  text-align: center;
  color: #3a230d;
  max-width: 34rem;
  margin: 0.2rem auto 1.2rem;
  line-height: 1.5;
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1.05rem;
}
.feedback-panel form {
  max-width: 36rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.feedback-panel label {
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #4a2e10;
}
.feedback-panel input[type="text"],
.feedback-panel textarea {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1rem;
  width: 100%;
  padding: 0.65rem 0.75rem;
  background: #fdf3d6;
  border: 1px solid #8b6020;
  border-radius: 3px;
  color: var(--ink);
  box-shadow: inset 0 2px 4px rgba(50,30,10,0.15);
  resize: vertical;
}
.feedback-panel textarea { min-height: 7rem; }
.feedback-panel input[type="text"]:focus,
.feedback-panel textarea:focus {
  outline: none;
  border-color: #b07a1a;
  box-shadow: inset 0 2px 4px rgba(50,30,10,0.15), 0 0 0 3px rgba(255, 200, 90, 0.35);
}
.feedback-panel .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.feedback-panel .row .alt {
  font-size: 0.85rem;
  color: #5b3f25;
  font-style: italic;
}
.feedback-panel button.btn-primary {
  margin: 0;
  font-size: 0.95rem;
  padding: 0.75rem 1.5rem;
}
#fb-status {
  text-align: center;
  color: #6e3d05;
  font-style: italic;
  min-height: 1.2em;
  margin: 0.4rem 0 0;
}

/* ------------------------------------------------------------------
   Village wishes modal — curated player feedback rendered as
   voteable parchment cards inside the shared .updates-modal shell.
   ------------------------------------------------------------------ */
.wishes-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.wishes-empty { text-align: center; color: #6e3d05; font-style: italic; padding: 1rem 0; }
.wish {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  background: rgba(253, 243, 214, 0.55);
  border: 1px solid #c19850;
  border-radius: 4px;
}
.wish-body { flex: 1; min-width: 0; }
.wish-title { font-family: 'Cinzel', serif; font-weight: 700; color: #3a230d; font-size: 0.95rem; margin: 0 0 0.25rem; letter-spacing: 0.5px; }
.wish-text { font-family: 'IM Fell English', Georgia, serif; color: #4a2e10; font-size: 0.95rem; margin: 0; white-space: pre-wrap; line-height: 1.45; }
.wish-vote {
  flex: 0 0 auto;
  min-width: 4.5rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(180deg, #f1cc6e 0%, #b8801e 100%);
  border: 1px solid #4f3308;
  border-radius: 3px;
  color: #2a1c0e;
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
}
.wish-vote:hover { filter: brightness(1.06); }
.wish-vote[disabled] { cursor: not-allowed; opacity: 0.7; }
.wish-vote .wish-vote-count { font-size: 1.15rem; font-weight: 900; line-height: 1; }
.wish-vote .wish-vote-label { font-size: 0.65rem; letter-spacing: 1.5px; }
.wish-vote.is-voted {
  background: linear-gradient(180deg, #c8e6a5 0%, #5e8b30 100%);
  border-color: #2a4a08;
  color: #1a2a08;
}
.wish-vote.is-locked {
  background: linear-gradient(180deg, #d8c9a0 0%, #8f7a48 100%);
  border-color: #4a3b1c;
}
@media (max-width: 480px) {
  .wish { padding: 0.7rem 0.8rem; gap: 0.6rem; }
  .wish-vote { min-width: 3.6rem; padding: 0.45rem 0.5rem; }
}

/* ------------------------------------------------------------------
   Motion — pitch-card staggered reveal. Subtle.
   ------------------------------------------------------------------ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------------
   Mobile overrides
   ------------------------------------------------------------------ */
@media (max-width: 480px) {
  .hero { padding-top: 22px; padding-bottom: 24px; }
  .hero h1 { letter-spacing: 1px; }
  .pitch-card .gfx-icon-wrap { width: 88px; height: 88px; }
  .donate-panel .gfx-coin-wrap { width: 96px; height: 96px; }
  .how-illustration { aspect-ratio: 16 / 10; }
  /* No image break-out on mobile — keep things tidy in the narrow
     column. */
  .how-panel .how-illustration { margin-left: 0; }
  .how-list li { padding-left: 2.8rem; }
  .how-list li::before { font-size: 1.4rem; }
}