/* ===========================================================================
   Yugara front page (css/frontpage.css)

   The scroll-down marketing page that lives BELOW the cinematic hero, inside
   #landing. Vision / Roadmap / Support / Community / Terms / Privacy.

   Reuses the game's design system so it reads as native Yugara:
     - tokens from ui-theme.css :root (--gold, --gold-2, --text-*, fonts)
     - the ornate 9-slice frame img/ui/panel3.png (via .ui-panel)
     - the gold / dark button frames img/ui/btn-gold3.png, btn-dark3.png
     - Alagard display font, the ember + cyan-glow palette from landing.css

   Everything is scoped under #landing so it never touches the in-game UI, and
   body.started #landing{display:none} (landing.css) removes the whole page in
   game. Loaded AFTER landing.css.
   =========================================================================== */

/* --- #landing becomes the scroll container; the hero is the first screen ----- */
/* (position/overflow of #landing itself are set in landing.css) */
#lp-hero {
    position:relative; min-height:100vh; overflow:hidden;
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
}

/* in-hero top nav (jumps down to a section) */
#lp-nav {
    position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:6;
    display:flex; gap:16px; align-items:center; max-width:96vw; flex-wrap:wrap; justify-content:center;
}
.lp-navlink {
    color:#cbb489; font-family:var(--pixel-font,'Alagard'); font-size:15px; letter-spacing:2px;
    text-transform:uppercase; cursor:pointer; text-decoration:none;
    text-shadow:0 1px 3px rgba(0,0,0,.9); transition:color .15s, text-shadow .15s;
}
.lp-navlink:hover { color:#ffe9bf; text-shadow:0 0 12px rgba(255,210,130,.7); }

/* bouncing "scroll" cue tucked under the title menu */
#lp-scrollcue {
    margin-top:14px; color:#9c8560; font-family:var(--pixel-font,'Alagard');
    font-size:22px; line-height:1; cursor:pointer; user-select:none;
    text-shadow:0 0 10px rgba(120,200,255,.4); animation:lp-bob 1.8s ease-in-out infinite;
}
#lp-scrollcue:hover { color:#ffe9bf; }
@keyframes lp-bob { 0%,100%{ transform:translateY(0); opacity:.65; } 50%{ transform:translateY(6px); opacity:1; } }

/* hero value-prop line, just above the Start button (inside #landing-menu so it
   hides in backdrop/login mode with the rest of the menu) */
.lp-tagline {
    font-family:var(--pixel-font,'Alagard'); color:#ecdcb4; font-size:18px; letter-spacing:2px;
    text-align:center; max-width:520px; margin:0 6px 2px; line-height:1.4;
    text-shadow:0 2px 4px rgba(0,0,0,.9), 0 0 16px rgba(201,162,75,.3);
}
@media (max-width:560px) { .lp-tagline { font-size:15px; letter-spacing:1px; max-width:88vw; } }

/* --- content column below the hero ------------------------------------------ */
#lp-content {
    position:relative; z-index:3;
    /* warm dark stone under every section, so the title video is the hero only */
    background:
      radial-gradient(120% 60% at 50% 0%, rgba(30,22,12,.55) 0%, rgba(8,7,10,0) 60%),
      linear-gradient(180deg, #0a0a0f 0%, #0b0906 40%, #08070a 100%);
    border-top:2px solid rgba(201,162,75,.28);
    box-shadow:0 -18px 50px rgba(0,0,0,.7);
}

.lp-section { position:relative; padding:74px 22px 66px; }
.lp-inner { max-width:1000px; margin:0 auto; }
/* faint hairline between sections */
.lp-section + .lp-section::before {
    content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
    width:min(88%, 900px); height:22px;
    background:url(../img/ui/divider3.png) center/contain no-repeat; opacity:.6;
}

/* section heading: Alagard, gold, ◆ framed, on a divider flourish */
.lp-title {
    font-family:var(--pixel-font,'Alagard'); color:var(--gold-2,#e3c77f);
    font-size:34px; letter-spacing:3px; text-align:center; margin:0 0 8px;
    text-shadow:0 3px 0 #000, 0 0 22px rgba(201,162,75,.35);
}
.lp-title .d { color:var(--gold,#cfa348); font-size:.7em; vertical-align:2px; margin:0 12px; opacity:.9; }
.lp-sub {
    font-family:var(--pixel-font,'Alagard'); color:#b9a988; font-size:16px; letter-spacing:1.5px;
    text-align:center; text-transform:uppercase; margin:0 0 30px; opacity:.85;
}

/* readable body copy: the game's crisp pixel dialog font */
.lp-body, .lp-node p, .lp-pillar p, .lp-legal p, .lp-community-lede {
    font-family:var(--body-font,'m5x7'); color:#d9d2c4; font-size:19px; line-height:1.7;
}
.lp-lede {
    font-family:var(--body-font,'m5x7'); color:#efe7d5; font-size:22px; line-height:1.65;
    text-align:center; max-width:760px; margin:0 auto;
}
.lp-lede + .lp-lede { margin-top:18px; }
.lp-body b, .lp-lede b, .lp-node b { color:var(--gold-2,#e3c77f); font-weight:normal; }

/* ============================ ROADMAP timeline ============================= */
.lp-timeline { position:relative; max-width:840px; margin:8px auto 0; padding-left:38px; }
/* the glowing spine */
.lp-timeline::before {
    content:''; position:absolute; left:11px; top:8px; bottom:8px; width:3px;
    background:linear-gradient(180deg, rgba(201,162,75,.15), rgba(201,162,75,.7), rgba(120,200,255,.35));
    box-shadow:0 0 10px rgba(201,162,75,.4);
}
.lp-node { position:relative; margin:0 0 24px; padding:20px 24px; }
.lp-node::before { /* ◆ node marker on the spine */
    content:'\25C6'; position:absolute; left:-38px; top:20px; width:26px; text-align:center;
    color:var(--gold-2,#e3c77f); font-size:20px; text-shadow:0 0 12px rgba(201,162,75,.8);
    background:#0b0906; padding:2px 0;
}
.lp-phase {
    display:inline-block; font-family:var(--pixel-font,'Alagard'); font-size:15px; letter-spacing:3px;
    text-transform:uppercase; color:#12100a; padding:4px 16px; margin-bottom:10px;
    border:11px solid transparent; border-image:url(../img/ui/btn-gold3.png) 20 fill / 11px stretch;
}
.lp-node.soon .lp-phase, .lp-node.dream .lp-phase {
    color:#e8d8b8; border-image:url(../img/ui/btn-dark3.png) 20 fill / 11px stretch;
}
.lp-node h3 {
    font-family:var(--pixel-font,'Alagard'); color:#f0e6d2; font-size:22px; letter-spacing:1px;
    margin:0 0 8px; text-shadow:0 2px 0 #000;
}
.lp-node ul { margin:0; padding:0; list-style:none; }
.lp-node li { position:relative; padding:3px 0 3px 20px; font-family:var(--body-font,'m5x7');
    font-size:18px; line-height:1.55; color:#d3ccbe; }
.lp-node li::before { content:'\25C6'; position:absolute; left:0; color:var(--gold-dim,rgba(207,163,72,.5)); font-size:11px; top:7px; }

/* ============================ EARN pillars ================================= */
.lp-promise {
    text-align:center; font-family:var(--pixel-font,'Alagard'); font-size:22px; letter-spacing:1px;
    color:#efe0bd; margin:0 auto 34px; max-width:820px; padding:16px 26px;
    border-top:2px solid rgba(201,162,75,.3); border-bottom:2px solid rgba(201,162,75,.3);
    text-shadow:0 0 18px rgba(201,162,75,.25);
}
.lp-pillars { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.lp-pillar { padding:26px 24px 28px; text-align:left; }
.lp-pillar .lp-emblem {
    font-size:30px; line-height:1; color:var(--gold-2,#e3c77f); margin-bottom:12px;
    text-shadow:0 0 14px rgba(201,162,75,.55);
}
.lp-pillar h3 {
    font-family:var(--pixel-font,'Alagard'); color:#f0e6d2; font-size:21px; letter-spacing:1px;
    margin:0 0 10px; text-shadow:0 2px 0 #000;
}
.lp-pillar p { font-size:17px; }
.lp-pillar .tag {
    display:inline-block; margin-top:14px; font-family:var(--pixel-font,'Alagard'); font-size:12px;
    letter-spacing:2px; text-transform:uppercase; color:var(--gold,#cfa348); opacity:.85;
}

/* ============================ COMMUNITY =================================== */
#lp-community .lp-inner { text-align:center; }
.lp-community-lede { max-width:640px; margin:0 auto 30px; font-size:20px; text-align:center; color:#e6ddca; }
.lp-cta-row { display:flex; gap:18px; justify-content:center; align-items:center; flex-wrap:wrap; }
.lp-btn {
    display:inline-flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none;
    font-family:var(--pixel-font,'Alagard'); letter-spacing:2px; text-transform:uppercase;
    padding:12px 30px; font-size:18px; image-rendering:auto; transition:filter .15s, transform .12s;
}
.lp-btn:active { transform:translateY(1px); }
.lp-btn-primary {
    color:#1a1206; border:14px solid transparent;
    border-image:url(../img/ui/btn-gold3.png) 20 fill / 14px stretch;
    box-shadow:0 0 26px rgba(120,200,255,.28), 0 6px 16px rgba(0,0,0,.6);
    animation:lp-cta-glow 3.2s ease-in-out infinite;
}
@keyframes lp-cta-glow { 0%,100%{ box-shadow:0 0 22px rgba(120,200,255,.22),0 6px 16px rgba(0,0,0,.6);} 50%{ box-shadow:0 0 40px rgba(120,200,255,.5),0 6px 16px rgba(0,0,0,.6);} }
.lp-btn-secondary {
    color:#e8d8b8; border:13px solid transparent;
    border-image:url(../img/ui/btn-dark3.png) 20 fill / 13px stretch;
}
.lp-btn:hover { filter:brightness(1.1); }
.lp-btn .ico { font-size:20px; }
.lp-soon { font-family:var(--body-font,'m5x7'); color:#8b8168; font-size:15px; margin-top:8px; }

/* ============================ LEGAL (Terms / Privacy) ===================== */
.lp-legal { padding-top:56px; padding-bottom:52px; }
.lp-legal .lp-inner { max-width:760px; }
.lp-legal .lp-title { font-size:28px; }
.lp-draft {
    display:inline-block; margin:-2px 0 18px; font-family:var(--pixel-font,'Alagard');
    font-size:12px; letter-spacing:2px; text-transform:uppercase; color:#8b8168;
    border:1px solid rgba(201,162,75,.3); padding:3px 10px;
}
.lp-legal ul { margin:14px 0 0; padding:0; list-style:none; }
.lp-legal li { position:relative; padding:7px 0 7px 22px; font-family:var(--body-font,'m5x7');
    font-size:18px; line-height:1.6; color:#cfc8ba; }
.lp-legal li::before { content:'\25C6'; position:absolute; left:0; top:9px; color:var(--gold-dim,rgba(207,163,72,.5)); font-size:11px; }
.lp-contact { margin-top:20px; font-family:var(--body-font,'m5x7'); color:#9c937c; font-size:16px; }
.lp-contact a, .lp-legal a { color:var(--gold-2,#e3c77f); }

/* ============================ FOOTER ====================================== */
#lp-foot {
    /* reset the global game footer rule (main.css: footer{position:absolute;bottom:5%}
       + the mobile footer{display:none;position:absolute;top:290px;z-index:9000}) so
       this page footer sits in normal flow after the last section instead of floating
       over it. #lp-foot (ID) outranks those `footer` selectors. */
    position:static; inset:auto; top:auto; bottom:auto; left:auto; width:auto;
    z-index:auto; display:block; opacity:1;
    text-align:center; padding:34px 22px 44px; border-top:2px solid rgba(201,162,75,.22);
    font-family:var(--body-font,'m5x7'); color:#7d735c; font-size:15px; line-height:1.8;
}
#lp-foot a { color:#a9946a; text-decoration:none; }
#lp-foot a:hover { color:#ffe9bf; }
#lp-foot .lp-foot-sep { color:#4d432c; margin:0 8px; }

/* backdrop mode (Start Game -> login over the video): hide the whole page,
   keep only the video + vignette behind the parchment, lock the scroll. */
#landing.landing-backdrop { overflow:hidden !important; }
#landing.landing-backdrop #lp-content,
#landing.landing-backdrop #lp-nav,
#landing.landing-backdrop #lp-scrollcue { display:none !important; }

/* --------------------------- responsive ----------------------------------- */
@media (max-width:900px) {
    .lp-pillars { grid-template-columns:1fr; }
}
@media (max-width:640px) {
    .lp-section { padding:54px 16px 46px; }
    .lp-title { font-size:26px; letter-spacing:2px; }
    .lp-lede { font-size:19px; }
    .lp-node { padding:16px 16px 16px 18px; }
    .lp-timeline { padding-left:30px; }
    .lp-node::before { left:-30px; }
    /* keep the nav to ONE line (no wrap over the logo) and drop the logo lower */
    #lp-nav { top:12px; gap:7px; font-size:11px; letter-spacing:.5px; flex-wrap:nowrap; max-width:100vw; }
    #lp-nav .landing-sep { font-size:8px; }
    #landing-logo { top:8.5%; }
    .lp-btn { padding:11px 22px; font-size:16px; }
}