/* Landing page only */
body.home .site-header{position:absolute;inset:0 0 auto 0;background:linear-gradient(#050a0ccc,#050a0c00);border:0;box-shadow:none}
body.home .site-header nav a{text-shadow:0 2px 0 #000}
body.home main{overflow-x:clip}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:620px;max-height:1100px;overflow:hidden;isolation:isolate;background:#05090b}
.hero-scene{position:absolute;inset:-24px;z-index:0}
.hero-drift{position:absolute;inset:0;animation:drift 38s ease-in-out infinite alternate;transform-origin:50% 40%}
.hero-bg,.hero-fx{position:absolute;inset:0;width:100%;height:100%}
.hero-bg{object-fit:cover;object-position:50% 50%}
.hero-scene.is-flash .hero-bg{filter:brightness(1.35) saturate(1.1)}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.09) translateY(-1%)}}
.hero-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 38%,#050a0c99 0%,#050a0c00 70%),
    linear-gradient(180deg,#050a0c55 0%,#050a0c00 25%,#050a0c00 62%,#0b1316 100%)}
.hero-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:clamp(76px,11vh,130px) 16px 0}
@media(max-width:700px){.hero-content{padding-top:128px}}
.logo{margin:0;line-height:0}
.logo-wrap{position:relative;display:inline-block;animation:rise 1.4s cubic-bezier(.2,.8,.2,1) both,float 6s ease-in-out 1.4s infinite}
.logo img{width:clamp(240px,min(30vw,42vh),420px);height:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 28px #e8b04a40)}
.logo-shine{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(../img/logo.png) center/100% 100% no-repeat;mask:url(../img/logo.png) center/100% 100% no-repeat;
  background:linear-gradient(105deg,transparent 40%,#fff6d6cc 50%,transparent 60%) no-repeat;background-size:250% 100%;background-position:150% 0;
  mix-blend-mode:screen;animation:shine 7s ease-in-out 2s infinite}
@keyframes rise{from{opacity:0;transform:translateY(40px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes float{50%{transform:translateY(-8px)}}
@keyframes shine{0%,62%{background-position:150% 0}85%,100%{background-position:-60% 0}}
.spark{position:absolute;width:12px;height:12px;pointer-events:none;opacity:0;
  background:
    linear-gradient(#fff3c4,#fff3c4) center/2px 100% no-repeat,
    linear-gradient(#fff3c4,#fff3c4) center/100% 2px no-repeat;
  animation:twinkle 3.2s steps(1) infinite}
.spark::after{content:"";position:absolute;inset:4px;background:#fff}
.s1{left:57%;top:66%;animation-delay:2.2s}
.s2{left:68%;top:74%;animation-delay:3.3s;transform:scale(.7)}
.s3{left:50%;top:79%;animation-delay:4.4s;transform:scale(.8)}
@keyframes twinkle{0%{opacity:0}6%{opacity:.6}12%{opacity:1}18%{opacity:.5}24%{opacity:0}}
.tagline{font:clamp(13px,1.6vw,18px)/1.6 var(--px);color:var(--gold);letter-spacing:.08em;margin:18px 0 6px;text-shadow:0 3px 0 #000;animation:fade 1s .9s both}
.hero-sub{max-width:34rem;margin:0 auto;color:#d5e1dd;font-size:clamp(.98rem,1.3vw,1.1rem);text-shadow:0 2px 8px #000,0 1px 0 #000;animation:fade 1s 1.2s both}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:24px;animation:fade 1s 1.5s both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.btn.ghost{background:#0b1316cc;color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold-d),4px 4px 0 #000}
.btn.ghost:hover{background:#142328;color:#ffd27d}
.hero .btn.disabled{background:#0f1c20e6}

/* The Captain, in his real in-game idle animation */
.captain{position:absolute;left:50%;bottom:0;z-index:3;width:0;height:0;pointer-events:none}
.captain-sprite{position:absolute;left:-64px;bottom:-34px;width:128px;height:128px;
  background:url(../img/captain-idle.png) 0 0/896px 128px no-repeat;image-rendering:pixelated;
  transform:scale(var(--cs,3));transform-origin:50% 100%;filter:drop-shadow(0 0 1px #000);animation:arrive 1.6s .3s cubic-bezier(.2,.8,.2,1) both}
@keyframes arrive{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
.captain::before{content:"";position:absolute;left:-190px;bottom:-40px;width:380px;height:90px;border-radius:50%;background:radial-gradient(#000c,#0000 70%)}
@media (max-height:999px){.captain-sprite{--cs:2.5}}
@media (max-height:800px){.captain-sprite{--cs:2}}
@media (max-width:700px){.captain-sprite{--cs:2;bottom:-22px}.captain::before{left:-130px;width:260px}.hero-cta .ghost{display:none}.hero .btn{font-size:10px;padding:14px 16px}}
@media (max-width:700px) and (max-height:740px){.hero-sub{display:none}.captain-sprite{--cs:1.75}}
@media (max-height:640px) and (orientation:landscape){.captain{display:none}}

.scroll-hint{position:absolute;right:24px;bottom:22px;z-index:4;width:28px;height:44px;border:3px solid #d9e2de99;border-radius:14px}
.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(14px)}}
@media (max-width:700px){.scroll-hint{display:none}}

/* ---------- LOOT ---------- */
.kicker{font:10px/1.7 var(--px);color:var(--teal);margin:0 0 .4em;letter-spacing:.04em}
.block h2{margin-top:.3em}
.loot{display:grid;gap:32px;align-items:center;padding-top:56px}
@media(min-width:980px){.loot{grid-template-columns:1fr 1.25fr}}
.loot-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:600px){.loot-cards{grid-template-columns:1fr;max-width:340px;margin:auto}}
.lootcard{--rc:#8f9a94;position:relative;background:linear-gradient(#17282e,#101c20);border:4px solid #000;box-shadow:inset 0 0 0 2px var(--rc),0 0 24px -6px var(--rc);
  padding:20px 14px 16px;text-align:center;animation:bob 4s ease-in-out infinite}
.lootcard:nth-child(2){animation-delay:-1.3s}.lootcard:nth-child(3){animation-delay:-2.6s}
.lootcard img{width:96px;height:96px;margin:6px auto 10px;image-rendering:pixelated;filter:drop-shadow(0 0 10px var(--rc)) drop-shadow(0 4px 0 #000);animation:glint 4s ease-in-out infinite}
.lootcard h3{color:var(--rc);margin:.2em 0 .5em;font-size:.72rem}
.lootcard p{margin:0;font-size:.9rem;color:#bfcdc9;font-style:italic}
.rarity{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font:8px/1 var(--px);color:#000;background:var(--rc);padding:5px 8px;border:2px solid #000;white-space:nowrap}
.r-uncommon{--rc:#5fbf5a}.r-rare{--rc:#4f93dc}.r-legendary{--rc:#e8b04a}
.r-legendary{transform-origin:center}
@media(min-width:601px){.r-legendary{margin-top:-14px}}
@keyframes bob{50%{translate:0 -8px}}
@keyframes glint{50%{filter:drop-shadow(0 0 18px var(--rc)) drop-shadow(0 4px 0 #000)}}
.lootcard:hover{box-shadow:inset 0 0 0 2px var(--rc),0 0 40px -2px var(--rc)}

.pillars{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:10px}
.pillar{background:var(--panel);border:4px solid #000;box-shadow:inset 0 0 0 2px var(--line);padding:16px 18px}
.pillar img{width:32px;height:32px;image-rendering:pixelated;float:left;margin:2px 12px 4px 0}
.pillar h3{margin:.2em 0 .6em;font-size:.66rem;color:var(--gold)}
.pillar p{margin:0;font-size:.93rem;color:#c3d0cc;clear:left}

/* ---------- RESIDENTS ---------- */
.residents-wrap{margin-top:40px;background:linear-gradient(#0b1316,#0e1b1f 30%,#0e1b1f 70%,#0b1316);border-block:4px solid #000;position:relative;overflow:hidden}
.residents-wrap::before{content:"";position:absolute;inset:auto -50% 0 -50%;height:45%;pointer-events:none;
  background:radial-gradient(ellipse at 30% 100%,#4fa6a018,transparent 60%),radial-gradient(ellipse at 75% 100%,#4fa6a014,transparent 60%);animation:fog 22s linear infinite alternate}
@keyframes fog{to{transform:translateX(18%)}}
.residents{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.resident{margin:0;position:relative}
.resident .frame{border:4px solid #000;box-shadow:inset 0 0 0 2px var(--line),0 12px 30px #000a;overflow:hidden;background:#000;aspect-ratio:270/390}
.resident img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.resident:hover img{transform:scale(1.05);filter:brightness(1.12)}
.resident figcaption{padding:14px 4px 0;color:#c3d0cc;font:.95rem/1.6 var(--body);text-align:left}
.resident strong{display:block;font:12px/1.5 var(--px);color:var(--gold);margin:.3em 0 .5em}
.floor{font:8px/1 var(--px);color:var(--red)}

/* ---------- STORY ---------- */
.story{display:grid;gap:32px;align-items:center;padding-top:60px}
@media(min-width:980px){.story{grid-template-columns:1.1fr 1fr}}
.story-art{position:relative;border:4px solid #000;box-shadow:0 0 0 4px var(--line),0 20px 50px #000b;overflow:hidden;line-height:0}
.story-art img{width:100%}
.story-lantern{position:absolute;left:27%;top:75%;width:30%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(#ffb85a55,#ffb85a00 60%);mix-blend-mode:screen;animation:lantern 2.4s ease-in-out infinite}
@keyframes lantern{25%{opacity:.7}50%{opacity:1;transform:scale(1.05)}70%{opacity:.8}}
.story-flash{position:absolute;inset:0;background:radial-gradient(ellipse 40% 60% at 68% 28%,#d6efff,#d6efff00 70%);mix-blend-mode:screen;opacity:0;animation:strike 9s linear infinite}
@keyframes strike{0%,88%{opacity:0}89%{opacity:.75}90%{opacity:.1}91.5%{opacity:.55}94%,100%{opacity:0}}

/* ---------- SCREENS ---------- */
.screens{display:grid;gap:32px;align-items:center;padding-top:60px}
@media(min-width:980px){.screens{grid-template-columns:1fr 1.1fr}}
.phones{display:flex;justify-content:center;gap:18px}
.phones img{width:min(46%,250px);border:6px solid #000;border-radius:18px;box-shadow:0 0 0 3px var(--line),0 24px 50px #000c}
.phones img:nth-child(1){rotate:-3deg;translate:0 10px}
.phones img:nth-child(2){rotate:3deg}

/* ---------- FINALE ---------- */
.finale{position:relative;margin-top:70px;border-block:4px solid #000;overflow:hidden;background:#05090b;line-height:0}
.finale-art{position:relative}
.finale-bg{width:100%;min-height:340px;object-fit:cover;object-position:50% 50%}
.crown-glow{position:absolute;left:50%;top:65%;width:22%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(#ffcf6e66,#ffcf6e00 62%);mix-blend-mode:screen;animation:crown 3.6s ease-in-out infinite}
@keyframes crown{50%{transform:scale(1.18);opacity:.75}}
.motes{position:absolute;left:44%;top:6%;width:16%;height:58%;pointer-events:none}
.motes i{position:absolute;bottom:0;width:3px;height:3px;background:#e9f6ff;opacity:0;animation:mote 9s linear infinite}
.motes i:nth-child(1){left:10%;animation-delay:0s}.motes i:nth-child(2){left:28%;animation-delay:-1.1s;animation-duration:11s}
.motes i:nth-child(3){left:44%;animation-delay:-2.6s}.motes i:nth-child(4){left:61%;animation-delay:-3.4s;animation-duration:12s}
.motes i:nth-child(5){left:76%;animation-delay:-4.9s}.motes i:nth-child(6){left:18%;animation-delay:-5.7s;animation-duration:10s}
.motes i:nth-child(7){left:52%;animation-delay:-6.8s;width:2px;height:2px}.motes i:nth-child(8){left:86%;animation-delay:-7.5s;animation-duration:13s}
.motes i:nth-child(9){left:36%;animation-delay:-8.2s;width:2px;height:2px}.motes i:nth-child(10){left:68%;animation-delay:-2s;animation-duration:14s}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.8}50%{transform:translate(8px,-45%)}85%{opacity:.6}100%{opacity:0;transform:translate(-6px,-95%)}}
.finale-copy{line-height:1.65;position:absolute;left:0;top:0;bottom:0;width:auto;display:flex;flex-direction:column;justify-content:center;
  padding:24px 4vw 24px max(24px,calc((100vw - 1080px)/2));background:linear-gradient(90deg,#05090bf0 0%,#05090bcc 60%,#05090b00)}
.finale-copy h2{margin:0 0 .6em}
.finale-copy>*{max-width:30rem}
.finale-copy p{color:#cfdbd7;margin:0 0 .6em}
@media(max-width:1100px){
  .finale-copy{position:relative;width:auto;padding:28px 16px 36px;background:#05090b}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .logo-wrap,.tagline,.hero-sub,.hero-cta,.captain-sprite{opacity:1}
}

.btn{white-space:nowrap}