/* WILDLANDS: LAST VILLAGE — Official Site
   Palette derived from the game's own code:
   bg #101812 · text #e8dcc0 · gold #e2a13b · torch #ffe9b0 */
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');
@font-face{font-family:'MedievalSharp';src:url('assets/fonts/MedievalSharp.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}

:root{
  --wild:#101812; --undergrowth:#17241a; --panel:#1c2c1f;
  --parchment:#e8dcc0; --parchment-dim:#b8ad93;
  --ember:#e2a13b; --torch:#ffe9b0; --blood:#a33b2e;
  --line:rgba(226,161,59,.25);
  --display:'MedievalSharp',serif;
  --body:'Alegreya Sans',system-ui,sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--wild);color:var(--parchment);font:400 18px/1.65 var(--body)}
img{max-width:100%;display:block}
a{color:var(--ember)}
a:focus-visible,button:focus-visible{outline:3px solid var(--torch);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.1;color:var(--torch);margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.4rem,7vw,4.4rem)}
h2{font-size:clamp(1.7rem,4vw,2.5rem)}
h3{font-size:1.35rem;color:var(--ember)}
p{margin:0 0 1.1em}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}

/* Nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(16,24,18,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:18px;padding-top:10px;padding-bottom:10px}
.brand{font-family:var(--display);font-weight:400;font-size:1.25rem;color:var(--torch);text-decoration:none;letter-spacing:.03em}
.nav a.link{color:var(--parchment);text-decoration:none;font-weight:500;font-size:.95rem}
.nav a.link:hover,.nav a.link[aria-current="page"]{color:var(--ember)}
.nav .spacer{flex:1}
.btn{display:inline-block;background:var(--ember);color:#1a1206;font-family:var(--body);font-weight:700;text-decoration:none;padding:.55em 1.3em;border-radius:6px;border:0;cursor:pointer;font-size:1rem}
.btn:hover{background:var(--torch)}
.btn.big{font-size:1.2rem;padding:.75em 2em}

/* Hero */
.hero{position:relative;min-height:72vh;display:flex;align-items:center;text-align:center;
  background:linear-gradient(rgba(16,24,18,.55),rgba(16,24,18,.92)),url('assets/banner.png') center/cover no-repeat}
.hero .wrap{width:100%}
.hero p.sub{font-size:1.2rem;color:var(--parchment);max-width:34em;margin:0 auto 1.6em}
.hero .btn.big{margin-bottom:.8em}
.hero small{display:block;color:var(--parchment-dim)}

/* Wave-tracker divider: 15 waves, every 3rd is a boss */
.waves{display:flex;justify-content:center;gap:10px;margin:56px auto;padding:0;list-style:none}
.waves span{width:7px;height:18px;background:var(--line);border-radius:2px}
.waves span.boss{background:var(--ember);height:26px;width:9px;transform:translateY(-4px)}

/* Sections & cards */
section{padding:8px 0 32px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:24px 0}
.card{background:var(--undergrowth);border:1px solid var(--line);border-radius:10px;padding:22px}
.card h3{margin-top:0}
.card p{margin-bottom:0;color:var(--parchment-dim)}
.kicker{font-family:var(--mono);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ember)}

/* Updates feed */
.post{border-left:3px solid var(--ember);padding:4px 0 4px 22px;margin:34px 0}
.post time{font-family:var(--mono);font-size:.85rem;color:var(--parchment-dim)}
.post ul{color:var(--parchment);padding-left:1.2em}

/* Play page */
.playframe{width:100%;aspect-ratio:16/9;max-height:82vh;border:1px solid var(--line);border-radius:8px;background:#000}
.playbar{display:flex;align-items:center;gap:14px;margin:14px 0 6px;flex-wrap:wrap}
.controls{font-family:var(--mono);font-size:.9rem;color:var(--parchment-dim)}
@media(max-width:700px){
  .wrap.playwrap{padding:0}
  .playframe{border-radius:0;border-left:0;border-right:0;aspect-ratio:auto;height:78vh}
}

/* Reserved ad positions — inactive until AdSense activation. Do not remove. */
.ad-slot{display:none}

/* Footer */
footer{border-top:1px solid var(--line);margin-top:64px;padding:28px 0 40px;color:var(--parchment-dim);font-size:.9rem}
footer a{color:var(--parchment-dim)}
footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}

/* Prose pages */
.prose{max-width:44em}
.prose h2{margin-top:1.6em}
table.legal{border-collapse:collapse}

/* ===== V2: LIVING WILDLANDS LAYER — ornate game-world styling ===== */
body{background:
  radial-gradient(1200px 600px at 80% -100px, rgba(226,161,59,.07), transparent 60%),
  radial-gradient(900px 500px at 10% 30%, rgba(30,60,40,.5), transparent 70%),
  var(--wild)}

/* Ornate gold-framed panel (RuneScape-style plaque) */
.plaque{position:relative;background:linear-gradient(180deg,#1d2e20,#141f16);border:2px solid #6e5320;border-radius:12px;box-shadow:0 0 0 1px #2a1f0c, inset 0 0 0 1px rgba(255,233,176,.15), 0 8px 30px rgba(0,0,0,.5);padding:26px}
.plaque::before,.plaque::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--ember);border-radius:2px;transform:rotate(45deg);background:var(--wild)}
.plaque::before{top:-8px;left:50%;margin-left:-7px}
.plaque::after{bottom:-8px;left:50%;margin-left:-7px}

/* Framed art images */
.framed{border:3px solid #6e5320;border-radius:10px;box-shadow:0 0 0 2px #241a09, inset 0 0 0 2px rgba(255,233,176,.12), 0 10px 34px rgba(0,0,0,.55)}
a .framed{transition:transform .25s ease, box-shadow .25s ease}
a:hover .framed{transform:translateY(-4px);box-shadow:0 0 0 2px #241a09, inset 0 0 0 2px rgba(255,233,176,.2), 0 16px 44px rgba(0,0,0,.65), 0 0 24px rgba(226,161,59,.35)}

/* Glowing pulse on primary CTAs */
.btn.big{position:relative;animation:emberpulse 2.6s ease-in-out infinite}
@keyframes emberpulse{0%,100%{box-shadow:0 0 0 0 rgba(226,161,59,.55)}50%{box-shadow:0 0 26px 6px rgba(226,161,59,.25)}}

/* Hero v2: full art background with slow drift */
.hero{background:linear-gradient(rgba(16,24,18,.5),rgba(16,24,18,.94)),url('assets/hero-bg.jpg') center 30%/cover no-repeat;min-height:78vh;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .hero{animation:herodrift 26s ease-in-out infinite alternate}
  @keyframes herodrift{from{background-position:center 25%}to{background-position:center 40%}}
}
.hero h1{text-shadow:0 3px 18px rgba(0,0,0,.8), 0 0 40px rgba(226,161,59,.25)}

/* Trailer video */
.trailer{width:100%;display:block;border-radius:10px}

/* Two-column media rows */
.mediarow{display:grid;gap:28px;align-items:center;grid-template-columns:1fr 1fr;margin:14px 0}
@media(max-width:820px){.mediarow{grid-template-columns:1fr}}

/* CTA banner strip */
.ctastrip{display:block;margin:40px 0}
.ctastrip img{width:100%}

/* Card hover life */
.card{transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease}
.card:hover{transform:translateY(-4px);border-color:var(--ember);box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 18px rgba(226,161,59,.25)}

/* Brand shield mark */
.brand{display:flex;align-items:center;gap:9px}
.brand img{width:26px;height:26px;border-radius:6px}

/* Glowing eyes ambience along section edges */
.post img{margin:14px 0}