:root{
  --bg:#090b10;--bg2:#0e1219;--panel:#141a23;--panel2:#1a202b;
  --text:#f5f0e7;--muted:#b1aea6;--gold:#d9ad55;--gold2:#f5d98b;
  --line:rgba(255,255,255,.11);--shadow:0 25px 70px rgba(0,0,0,.5)
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,sans-serif;line-height:1.7;overflow-x:hidden}
html[lang="ja"] body{font-family:"Noto Sans JP",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit}
#particles{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:0 4vw;border-bottom:1px solid transparent;transition:.3s}
.site-header.scrolled{background:rgba(8,10,14,.9);backdrop-filter:blur(18px);border-color:var(--line)}
.brand{display:flex;align-items:center;gap:.8rem;flex-shrink:0}
.brand-rune{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--gold);color:var(--gold2);font-family:Cinzel,serif;transform:rotate(45deg);font-size:0}
.brand-rune::after{content:"WL";font-size:.75rem;transform:rotate(-45deg)}
.brand-name{font-family:Cinzel,serif;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.main-nav{display:flex;gap:1.1rem;font-size:.82rem}
.main-nav a{color:#d6d2c9;white-space:nowrap}
.main-nav a:hover{color:var(--gold2)}
.lang-switch{display:flex;gap:.2rem;padding:.2rem;border:1px solid var(--line);background:rgba(255,255,255,.025)}
.lang-switch button{border:0;background:transparent;color:var(--muted);padding:.42rem .58rem;cursor:pointer;font-size:.75rem}
.lang-switch button.active{background:var(--gold);color:#17120a;font-weight:700}
.menu-toggle{display:none;border:0;background:transparent}
.menu-toggle span{display:block;width:28px;height:2px;background:white;margin:6px}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:150px 7vw 90px;overflow:hidden;isolation:isolate}
.hero-image{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;z-index:-4;transform:scale(1.04);animation:heroZoom 18s ease-in-out infinite alternate}
@keyframes heroZoom{to{transform:scale(1.09) translateY(-1%)}}
.hero-vignette{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(4,6,9,.92) 0%,rgba(4,6,9,.55) 47%,rgba(4,6,9,.25) 70%,rgba(4,6,9,.72) 100%),linear-gradient(0deg,rgba(6,8,12,.92),transparent 45%,rgba(5,7,10,.35))}
.hero-fog{position:absolute;z-index:-2;width:70vw;height:18vw;filter:blur(28px);opacity:.16;background:radial-gradient(ellipse,white,transparent 68%);animation:fog 24s linear infinite}
.fog-one{left:-30%;bottom:10%}.fog-two{right:-30%;top:18%;animation-direction:reverse;animation-duration:32s}
@keyframes fog{to{transform:translateX(70vw)}}
.hero-content{max-width:760px;position:relative;z-index:3}
.eyebrow{margin:0 0 1rem;color:var(--gold2);font-size:.74rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase}
h1,h2,h3{font-family:Cinzel,serif;line-height:1.14}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3,html[lang="ja"] .brand-name{font-family:"Noto Sans JP",sans-serif;letter-spacing:.02em}
h1{margin:0;font-size:clamp(3.1rem,7vw,7rem);text-transform:uppercase;letter-spacing:-.04em;text-shadow:0 4px 30px rgba(0,0,0,.65)}
h1 span,h1 strong{display:block}
h1 strong{color:transparent;-webkit-text-stroke:1px var(--gold2)}
.hero-description{font-size:1.08rem;color:#ddd7cc;max-width:680px;margin:1.8rem 0}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 1.4rem;border:1px solid var(--gold);font-weight:700;transition:.25s}
.btn-primary{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#17120b}
.btn-ghost{background:rgba(8,10,14,.35);backdrop-filter:blur(8px)}
.btn:hover{transform:translateY(-3px);box-shadow:0 13px 30px rgba(217,173,85,.2)}
.hero-tags{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:1.6rem;color:#c6c1b8;font-size:.8rem}
.hero-tags span::before{content:"✦";color:var(--gold);margin-right:.45rem}
.scroll-indicator{position:absolute;left:7vw;bottom:24px;z-index:3;display:flex;align-items:center;gap:.7rem;color:#c1bdb4;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase}
.scroll-indicator i{display:block;width:36px;height:1px;background:var(--gold)}
.section{position:relative;z-index:3;padding:110px 7vw}
.section-heading,.section-copy{max-width:820px}
.section-heading.centered{text-align:center;margin:0 auto 3.5rem}
.section-heading h2,.section-copy h2,.community-panel h2{font-size:clamp(2.2rem,4vw,4.2rem);margin:0 0 1rem}
.section-heading p,.section-copy p,.info-card p,.class-card p,.world-card p,.devlog-card p,.community-panel p,footer p{color:var(--muted)}
.story{display:grid;grid-template-columns:1.15fr .85fr;gap:5rem;align-items:center;background:linear-gradient(180deg,#0d1118,#090b10)}
.lead{font-size:1.25rem!important;color:var(--text)!important}
blockquote{margin:2rem 0 0;padding:1.3rem 1.5rem;border-left:3px solid var(--gold);background:rgba(255,255,255,.025);color:var(--gold2);font-family:Cinzel,serif}
.void-card{min-height:430px;display:grid;place-items:center;text-align:center;border:1px solid var(--line);background:radial-gradient(circle at center,rgba(130,95,45,.16),transparent 45%),#121720;box-shadow:var(--shadow)}
.void-silhouette{position:relative;width:170px;height:250px}
.void-hood{position:absolute;left:41px;width:90px;height:100px;background:#0b0d11;clip-path:polygon(50% 0,92% 28%,82% 100%,18% 100%,8% 28%)}
.void-hood::after{content:"";position:absolute;inset:28px 20px 12px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(218,174,85,.18),#000 65%)}
.void-cloak{position:absolute;top:78px;left:10px;width:150px;height:170px;background:linear-gradient(90deg,#090b0f,#191d25,#090b0f);clip-path:polygon(32% 0,68% 0,100% 100%,0 100%)}
.caravan-section{background:#0b0f15}
.caravan-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.caravan-art{min-height:480px;display:grid;place-items:center;border:1px solid var(--line);background:radial-gradient(circle,rgba(217,173,85,.16),transparent 48%),#10151d;overflow:hidden}
.wagon{position:relative;width:430px;height:290px}
.wagon-body{position:absolute;left:50px;bottom:65px;width:330px;height:155px;background:linear-gradient(#765234,#46301e);border:6px solid #22170e}
.wagon-roof{position:absolute;left:35px;bottom:205px;width:360px;height:100px;background:#2a241f;border:6px solid #15110d;border-radius:55% 55% 8% 8%}
.wagon-window{position:absolute;left:92px;bottom:135px;width:58px;height:48px;background:#d8b459;border:5px solid #2a1d12;box-shadow:0 0 28px rgba(216,180,89,.5)}
.wagon-door{position:absolute;left:190px;bottom:68px;width:62px;height:112px;background:#2d1e13;border:4px solid #1b120b}
.wagon-wheel{position:absolute;bottom:0;width:105px;height:105px;border-radius:50%;border:10px solid #27190f;background:radial-gradient(circle,#553a25 0 10%,transparent 11%);box-shadow:inset 0 0 0 6px #8f663d}
.wheel-a{left:70px}.wheel-b{right:30px}
.wagon-lantern{position:absolute;right:54px;bottom:145px;width:18px;height:30px;background:#f6cb68;box-shadow:0 0 28px rgba(246,203,104,.7)}
.caravan-features{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.info-card,.class-card,.world-card,.devlog-card,.race-card{padding:1.6rem;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));transition:.3s}
.info-card:hover,.class-card:hover,.world-card:hover,.devlog-card:hover,.race-card:hover{transform:translateY(-7px);border-color:rgba(217,173,85,.48)}
.info-card span,.world-card span,.devlog-card span{color:var(--gold);font-size:.72rem;font-weight:700;letter-spacing:.18em}
.classes-section{background:#0e1218}
.class-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.class-symbol{font-size:2.4rem;color:var(--gold2);margin-bottom:1.3rem}
.evolution-system{margin-top:2rem;padding:2rem;border:1px solid rgba(217,173,85,.3);background:#111720}
.evolution-system{display:grid;grid-template-columns:.8fr 1.2fr;gap:2rem}
.evolution-title h3{margin:0}
.evolution-paths{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.evolution-paths div{padding:1rem;background:rgba(255,255,255,.025)}
.evolution-paths b,.evolution-paths span,.evolution-paths em{display:block}
.evolution-paths span{color:var(--gold);font-size:1.5rem}.evolution-paths em{color:var(--gold2);font-style:normal;font-family:Cinzel,serif}
.races-section{background:#090c11}
.race-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
.race-card{text-align:center}
.race-icon{font-size:2.5rem;color:var(--gold2);margin-bottom:1rem}
.world-section{background:radial-gradient(circle at 80% 20%,rgba(92,68,37,.16),transparent 30rem),#0d1117}
.world-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.party-section{display:grid;grid-template-columns:.75fr 1.25fr;gap:3rem;align-items:center;background:#0a0d12}
.party-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.party-slot{min-height:200px;position:relative;display:flex;align-items:flex-end;padding:1rem;border:1px solid var(--line);background:linear-gradient(180deg,rgba(217,173,85,.07),rgba(255,255,255,.02));overflow:hidden}
.party-slot::before{content:"";position:absolute;left:50%;bottom:38px;transform:translateX(-50%);width:72px;height:125px;border-radius:45% 45% 10% 10%;background:#181d25}
.party-slot.main::before{background:#2c261d}
.party-slot span{position:relative;z-index:2;color:var(--gold2);font-size:.8rem}
.roadmap-section{background:#0e1218}
.timeline{max-width:960px;margin:auto;position:relative}
.timeline::before{content:"";position:absolute;left:18px;top:0;bottom:0;width:1px;background:var(--line)}
.timeline-item{position:relative;padding:0 0 2.5rem 70px}
.timeline-dot{position:absolute;left:8px;top:8px;width:21px;height:21px;border-radius:50%;border:3px solid #4a4f57;background:#11161e}
.timeline-item.done .timeline-dot{background:var(--gold)}.timeline-item.current .timeline-dot{background:var(--gold2);box-shadow:0 0 22px rgba(245,217,139,.6)}
.timeline-item small{color:var(--gold);letter-spacing:.18em}.timeline-item h3{margin:.35rem 0}.timeline-item p{color:var(--muted)}
.devlog-section{background:#090b10}
.devlog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.devlog-card h3{min-height:62px}.devlog-card a{display:inline-block;margin-top:1rem;color:var(--gold2);font-weight:700}
.community-section{position:relative;z-index:3;padding:110px 7vw;background:radial-gradient(circle at 50% 50%,rgba(217,173,85,.16),transparent 34rem),#0c1016}
.community-panel{max-width:1050px;margin:auto;text-align:center;padding:clamp(2rem,6vw,5rem);border:1px solid rgba(217,173,85,.32);background:rgba(15,18,24,.86);box-shadow:var(--shadow)}
.community-panel .hero-actions{justify-content:center}
footer{position:relative;z-index:3;padding:3rem 7vw;display:grid;grid-template-columns:1fr auto;gap:1rem;border-top:1px solid var(--line);background:#07090c}
footer strong{font-family:Cinzel,serif;letter-spacing:.15em}.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap}footer>p{grid-column:1/-1;font-size:.8rem}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .75s ease,transform .75s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1120px){
  .main-nav{display:none}.menu-toggle{display:block;order:3}.lang-switch{margin-left:auto}
  .main-nav.open{display:flex;position:fixed;inset:78px 0 auto;flex-direction:column;padding:2rem;background:rgba(8,10,14,.98);border-bottom:1px solid var(--line)}
  .story,.caravan-grid,.party-section,.evolution-system{grid-template-columns:1fr}
  .class-cards{grid-template-columns:repeat(3,1fr)}.race-grid{grid-template-columns:repeat(3,1fr)}.world-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .site-header{min-height:70px}.brand-name{display:none}.hero{padding:120px 6vw 85px;align-items:flex-end}.hero-image{object-position:45% center}
  .section,.community-section{padding:85px 6vw}.caravan-features,.class-cards,.race-grid,.world-grid,.devlog-grid,.evolution-paths{grid-template-columns:1fr}
  .party-grid{grid-template-columns:repeat(2,1fr)}.wagon{transform:scale(.72)}.caravan-art{min-height:360px}
  footer{grid-template-columns:1fr}.footer-links{margin-top:.5rem}
}