@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,500;1,600&family=DM+Mono&family=Oswald:wght@400;500;600;700&display=swap');

:root { --ink:#070b0d; --paper:#ebe7da; --gold:#d1a664; --gold-bright:#efd59d; --crimson:#941f1c; --crimson-bright:#df4a35; --serif:'Cormorant Garamond',Georgia,serif; --sans:'Oswald',Impact,sans-serif; --display:'Bebas Neue','Oswald',Impact,sans-serif; --mono:'DM Mono',Consolas,monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--ink); } body { margin:0; background:var(--ink); color:var(--paper); font-family:var(--serif); font-size:1.125rem; line-height:1.45; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.grain { pointer-events:none; position:fixed; z-index:40; inset:0; opacity:.075; mix-blend-mode:screen; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }
.site-header { position:absolute; z-index:20; inset:0 0 auto; height:7rem; padding:0 5.2vw; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(239,226,196,.14); transition:height .25s ease,background .25s ease; } .site-header.is-scrolled { position:fixed; height:5.1rem; background:rgba(5,10,12,.95); backdrop-filter:blur(14px); }
.brand { min-width:12rem; display:inline-flex; align-items:center; gap:.55rem; color:var(--gold-bright); } .brand-mark { position:relative; display:inline-block; width:1.55rem; height:2.45rem; border-left:3px solid currentColor; transform:skewY(-9deg); } .brand-mark i { position:absolute; display:block; left:-7px; width:1.35rem; height:2px; background:currentColor; transform:skewY(9deg); } .brand-mark i:nth-child(1){top:.25rem}.brand-mark i:nth-child(2){top:1.08rem;width:1.95rem}.brand-mark i:nth-child(3){top:1.87rem;width:.95rem}.brand-name { font:500 1.25rem/.9 var(--sans); letter-spacing:-.02em; }
.primary-nav { display:flex; align-items:center; gap:clamp(1.7rem,3vw,3.5rem); margin-left:auto; margin-right:clamp(2rem,5vw,6rem); } .primary-nav a,.header-cta,.back-top { font:.7rem var(--mono); letter-spacing:.1em; text-transform:uppercase; } .primary-nav a { position:relative; padding:.6rem 0; color:rgba(244,241,229,.92); } .primary-nav a::after { content:''; position:absolute; left:0; bottom:.25rem; width:0; height:1px; background:var(--crimson-bright); transition:width .25s ease; } .primary-nav a:hover::after,.primary-nav a:focus-visible::after{width:100%}.header-cta { padding:.85rem 1.1rem; color:#f5e6de; border:1px solid var(--crimson-bright); transition:background .25s ease,color .25s ease; }.header-cta:hover,.header-cta:focus-visible{color:#fff;background:var(--crimson)}.menu-toggle{display:none}
.hero { position:relative; isolation:isolate; display:grid; min-height:max(48rem,100svh); place-items:center; overflow:hidden; padding:8.5rem 1.5rem 5.5rem; text-align:center; }.hero-image{position:absolute;z-index:-3;inset:0;background:url('assets/blood-moon.jpg') center/cover no-repeat;animation:drift 15s ease-in-out infinite alternate}.hero-wash{position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 53% 86%,rgba(169,33,25,.48),transparent 36%),linear-gradient(90deg,rgba(0,3,6,.89),rgba(0,5,8,.1) 45%,rgba(0,4,6,.74)),linear-gradient(180deg,rgba(3,7,9,.76),rgba(3,7,9,.03) 38%,#070b0d 100%)}.hero::after{content:'';position:absolute;z-index:-1;bottom:0;left:0;right:0;height:28%;background:linear-gradient(transparent,var(--ink))}.hero-content{max-width:62rem;margin-top:-5rem}.eyebrow,.overline{margin:0;color:var(--gold-bright);font:.68rem var(--mono);letter-spacing:.18em;text-transform:uppercase}.eyebrow{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1.3rem}.eyebrow span{width:2.4rem;height:1px;background:var(--crimson-bright)}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:500}h1{margin:0;color:#fffaf0;font:600 clamp(4rem,7.6vw,8rem)/.93 var(--sans);letter-spacing:-.035em;text-shadow:0 4px 25px rgba(0,0,0,.56)}.hero-copy{max-width:44rem;margin:1.65rem auto 2.1rem;color:#eee9de;font-size:clamp(1.17rem,1.7vw,1.5rem);line-height:1.32;text-shadow:0 2px 9px rgba(0,0,0,.45)}.hero-copy strong{color:#ffc7ad;font-weight:600}.button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:3.55rem;padding:.8rem 1.45rem;border:1px solid;font-size:1.03rem;transition:transform .2s ease,background .2s ease,color .2s ease}.button:hover,.button:focus-visible{transform:translateY(-3px)}.button-primary{color:#fff;border-color:#e3624d;background:linear-gradient(135deg,#ca4937,#68110e);box-shadow:0 8px 28px rgba(0,0,0,.43)}.button-primary:hover,.button-primary:focus-visible{background:#e25842}.button svg{width:1.15rem;height:1.15rem;fill:currentColor}.scroll-cue{position:absolute;z-index:2;bottom:2rem;left:50%;display:flex;align-items:center;gap:.75rem;transform:translateX(-50%);color:rgba(237,233,216,.75);font:.62rem var(--mono);letter-spacing:.13em;text-transform:uppercase}.scroll-cue i{width:1px;height:2.6rem;background:linear-gradient(var(--crimson-bright),transparent)}.hero-ornament{position:absolute;top:56%;display:grid;gap:.25rem;width:1.2rem;height:5.5rem;opacity:.75;transform:translateY(-50%)}.hero-ornament.left{left:3.8vw}.hero-ornament.right{right:3.8vw}.hero-ornament span{width:.76rem;height:.76rem;border:1px solid var(--crimson-bright);transform:rotate(45deg)}
.section{position:relative}.world{overflow:hidden;padding:clamp(6rem,12vw,11rem) 8vw;background:#070b0d}.world::before{content:'風';position:absolute;top:0;right:4vw;color:rgba(209,166,100,.05);font:32rem/.8 serif;pointer-events:none}.section-number{display:flex;align-items:center;gap:.85rem;margin-bottom:clamp(4rem,8vw,7.5rem);color:#94a09c;font:.67rem var(--mono);letter-spacing:.12em;text-transform:uppercase}.section-number span{color:var(--gold);font-size:.72rem}.world-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(17rem,.72fr);align-items:end;gap:clamp(3rem,11vw,12rem);max-width:87rem;margin:auto}.overline{margin-bottom:.9rem;color:var(--gold)}h2{margin-bottom:1.35rem;color:#e9e5d7;font:500 clamp(3.2rem,5.3vw,5.7rem)/.96 var(--sans);letter-spacing:-.027em}h2 em{color:var(--gold-bright);font-family:var(--serif);font-weight:500;letter-spacing:-.04em}.world-detail{position:relative;padding:2rem 0 0 2.2rem;border-top:1px solid rgba(227,210,168,.35)}.world-detail p{max-width:26rem;color:#bec6c1;font-size:1.28rem;line-height:1.42}.detail-rune{position:absolute;top:-4.6rem;left:0;color:var(--gold);font:4.4rem/.8 serif}.text-link{display:inline-flex;align-items:baseline;gap:.65rem;margin-top:1.1rem;color:var(--gold-bright);font:.73rem var(--mono);letter-spacing:.11em;text-transform:uppercase}.text-link span{font-size:1rem;transition:transform .2s ease}.text-link:hover span{transform:translate(3px,3px)}
.rewards{overflow:hidden;padding:clamp(6rem,11vw,10rem) 8vw;background:linear-gradient(140deg,#121a1c,#070b0d 70%)}.rewards::before{content:'';position:absolute;top:-20rem;right:-16rem;width:52rem;height:52rem;border:1px solid rgba(216,174,102,.16);border-radius:50%;box-shadow:0 0 0 5rem rgba(216,174,102,.025),0 0 0 12rem rgba(216,174,102,.015)}.rewards-inner{position:relative;max-width:87rem;margin:auto}.reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(3rem,7vw,6.7rem);border-top:1px solid rgba(225,205,156,.4)}.reward{min-height:21rem;padding:2.2rem clamp(1.2rem,4vw,4rem);border-left:1px solid rgba(225,205,156,.4)}.reward:last-child{border-right:1px solid rgba(225,205,156,.4)}.reward-value{margin-bottom:.25rem;color:var(--gold-bright);font:500 clamp(6.5rem,13vw,12rem)/.75 var(--sans);letter-spacing:-.06em}.reward h3{margin:1.3rem 0 .6rem;color:#f0eadc;font:500 2rem/.95 var(--sans);text-transform:uppercase}.reward p:last-child{max-width:21rem;color:#aeb7b1;font-size:1.15rem;line-height:1.32}
.play{display:grid;min-height:42rem;place-items:center;padding:7rem 1.5rem;overflow:hidden;background:#0a1112;text-align:center;isolation:isolate}.play::before{content:'';position:absolute;z-index:-1;width:min(75vw,58rem);aspect-ratio:1;border:1px solid rgba(221,188,120,.28);border-radius:50%;box-shadow:0 0 0 4rem rgba(221,188,120,.025),0 0 0 10rem rgba(221,188,120,.012)}.play-frame{max-width:54rem}.play h2{margin-bottom:1rem;font-size:clamp(3.8rem,7vw,7.2rem)}.play-frame>p:not(.overline){max-width:31rem;margin:0 auto 2.1rem;color:#c4c9c3;font-size:1.3rem}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:2.6rem 5.2vw;border-top:1px solid rgba(215,198,153,.18);background:#05090a}.footer-brand{min-width:auto;transform:scale(.8);transform-origin:left center}.site-footer p{margin:0;color:#8d9691;font-size:.95rem}.back-top{color:var(--gold-bright)}.reveal{opacity:0;transform:translateY(1.7rem);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}@keyframes drift{to{transform:scale(1.055) translate(-.35%,-.45%)}}
@media (max-width:780px){.site-header{height:5.5rem;padding:0 1.25rem}.site-header.is-scrolled{height:4.75rem}.brand{min-width:auto}.brand-name{font-size:1.05rem}.brand-mark{transform:scale(.84) skewY(-9deg);transform-origin:left center}.header-cta{display:none}.menu-toggle{position:relative;z-index:21;display:grid;gap:.38rem;padding:.6rem 0 .6rem .8rem;border:0;background:transparent;color:var(--paper);cursor:pointer}.menu-toggle span:not(.sr-only){display:block;width:1.5rem;height:1px;background:currentColor;transition:transform .2s ease}.menu-toggle[aria-expanded='true'] span:nth-child(2){transform:translateY(3px) rotate(45deg)}.menu-toggle[aria-expanded='true'] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}.primary-nav{position:fixed;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1.75rem;margin:0;padding:6rem 2rem;background:rgba(6,13,14,.98);transform:translateX(100%);transition:transform .35s ease}.primary-nav.open{transform:translateX(0)}.primary-nav a{font:2.2rem var(--sans);letter-spacing:0}.hero{min-height:46rem;padding-top:7rem}.hero-image{background-position:43% center}.hero-content{margin-top:0}h1{font-size:clamp(3.6rem,14.2vw,5.4rem)}.hero-copy{max-width:29rem;margin-top:1.25rem;font-size:1.2rem}.button{width:min(100%,20rem)}.scroll-cue{bottom:1.1rem}.scroll-cue span{display:none}.hero-ornament{display:none}.world{padding:5.5rem 1.35rem}.section-number{margin-bottom:3.4rem}.world-grid{grid-template-columns:1fr;gap:4.4rem}h2{font-size:clamp(3.25rem,12vw,4.7rem)}.world-detail{padding-left:1.1rem}.world-detail p{font-size:1.2rem}.rewards{padding:5.5rem 1.35rem}.reward-grid{grid-template-columns:1fr}.reward{min-height:17.5rem;padding:2rem 1.3rem;border-right:1px solid rgba(225,205,156,.4)}.reward-value{font-size:8.4rem}.reward p:last-child{font-size:1.1rem}.play{min-height:38rem}.play::before{width:31rem}.play h2{font-size:clamp(3.8rem,14vw,5.3rem)}.play-frame>p:not(.overline){font-size:1.2rem}.site-footer{flex-wrap:wrap;padding:2rem 1.35rem}.site-footer p{order:3;width:100%}.back-top{margin-left:auto}}
@media (min-width:781px){.site-header{justify-content:center}.primary-nav{margin:0}.header-cta{position:absolute;right:5.2vw}.hero-image{background-size:115%;background-position:58% center}}
@media (max-width:780px){.menu-toggle{position:absolute;right:1.25rem}}
body{overflow:hidden}.grain{opacity:.04}.hero{height:100svh;min-height:100svh;padding:3rem 1.5rem}.hero-image{filter:brightness(1.14) contrast(1.18) saturate(1.16);animation:none}.hero-wash{background:radial-gradient(ellipse at 50% 52%,rgba(3,7,9,.04),rgba(3,7,9,.3) 100%)}.hero::after{display:none}.hero-content{margin-top:0}
@media (max-width:780px){.hero{height:100svh;min-height:100svh;padding:2rem 1.25rem}.hero-image{background-position:43% center}}
.game-logo{position:absolute;z-index:2;top:clamp(1.25rem,4vw,3.75rem);left:clamp(1.25rem,5vw,5rem);width:clamp(10.5rem,15vw,15.5rem);height:auto;filter:drop-shadow(0 3px 9px rgba(0,0,0,.55))}.hero-content{transform:translateY(1rem)}h1{font:400 clamp(3.2rem,7vw,8rem)/.85 var(--display);letter-spacing:.018em;text-shadow:0 5px 23px rgba(0,0,0,.6)}.button-primary{position:relative;isolation:isolate;min-height:4.3rem;padding:1rem 1.9rem;border-color:#ffb061;background:linear-gradient(135deg,#ff754d,#be241b 58%,#75100e);box-shadow:0 12px 36px rgba(108,15,10,.58),inset 0 1px 0 rgba(255,255,255,.45);font-family:var(--sans);font-weight:600;letter-spacing:.04em;overflow:hidden}.button-primary::before{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.3) 48%,transparent 72%);transform:translateX(-115%);transition:transform .55s ease}.button-primary:hover::before,.button-primary:focus-visible::before{transform:translateX(115%)}.button-primary:hover,.button-primary:focus-visible{color:#fff;background:linear-gradient(135deg,#ff8f62,#df3327 58%,#94130e);box-shadow:0 15px 42px rgba(191,42,27,.68),inset 0 1px 0 rgba(255,255,255,.52)}.button-primary svg{width:1.3rem;height:1.3rem}
@media (max-width:780px){.game-logo{width:10rem}.hero-content{transform:none}h1{font-size:clamp(3rem,10.2vw,4.5rem)}.button-primary{min-height:4rem;padding:.9rem 1.35rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}