:root{
  --ink:#f3f0f7;--muted:#b9b3c4;--night:#07060a;--violet:#2a2236;
  --amber:#ffb45e;--cyan:#5fd8ff;
  --metal-hi:#8d8a93;--metal-lo:#2b292f;--well:#141317;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:pan-y}
body{margin:0;background:radial-gradient(ellipse at 60% 40%,#15111c 0%,var(--night) 70%);background-attachment:fixed;color:var(--ink);
  font:400 16px/1.6 'Manrope','DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

#sand{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0}
.fallback-house{display:none}
.no-webgl #sand{display:none}
.no-webgl .fallback-house{display:block;position:fixed;right:-5%;top:10%;width:min(70vw,760px);opacity:.25;filter:grayscale(1);
  mask-image:radial-gradient(ellipse,#000 30%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse,#000 30%,transparent 70%);z-index:0}

.story{position:relative;z-index:1}
.scene{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:96px clamp(22px,7vw,110px);max-width:640px}
.scene--final{min-height:110vh;max-width:none;justify-content:flex-end;padding-bottom:14vh}
.scene>*{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s ease}
.scene.is-in>*{opacity:1;transform:none}
.scene.is-in>*:nth-child(2){transition-delay:.12s}.scene.is-in>*:nth-child(3){transition-delay:.24s}.scene.is-in>*:nth-child(4){transition-delay:.36s}
.kicker{margin:0;text-transform:uppercase;letter-spacing:.26em;font-size:11px;font-weight:800;color:var(--amber)}
h1,h2{margin:14px 0 0;font-weight:800;letter-spacing:-.045em;line-height:1.04;text-shadow:0 2px 24px #000c}
h1{font-size:clamp(40px,6.4vw,82px)}
h2{font-size:clamp(36px,5.4vw,70px)}
.sub{margin:16px 0 0;color:var(--muted);font-size:clamp(16px,1.6vw,19px);max-width:40ch;text-shadow:0 1px 12px #000}
.scroll-cue{margin-top:38px;width:26px;height:42px;border:2px solid #ffffff55;border-radius:14px;position:relative}
.scroll-cue::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--amber);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* Uniform button family: dark machined metal ring, sunken well, light rim on hover (ref: joystick + metal OK button) */
.metal-btn{--ring:conic-gradient(from 210deg,#cfcdd4,#5a5860 22%,#a9a6ae 40%,#3a383e 62%,#bdbac2 82%,#cfcdd4);
  position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:58px;padding:0 28px;border-radius:999px;
  text-decoration:none;font-weight:800;font-size:15px;letter-spacing:.01em;color:#eef6ff;isolation:isolate;
  background:var(--ring);box-shadow:0 10px 22px #000a,0 2px 0 #000,inset 0 1px 0 #fff6;transition:transform .16s ease,box-shadow .16s ease}
.metal-btn::before{content:'';position:absolute;inset:4px;border-radius:inherit;z-index:-1;
  background:radial-gradient(ellipse at 50% 18%,#3a3842 0%,var(--well) 62%);
  box-shadow:inset 0 3px 7px #000e,inset 0 -1px 0 #ffffff1f}
.metal-btn::after{content:'';position:absolute;inset:-6px;border-radius:inherit;z-index:-2;border:1px solid #ffffff14;
  box-shadow:0 0 0 0 transparent;transition:box-shadow .25s ease,border-color .25s ease}
.metal-btn:hover{transform:translateY(-2px)}
.metal-btn{--led:#5fd8ff;gap:10px}
.led{width:9px;height:9px;border-radius:50%;flex:none;background:var(--led);box-shadow:0 0 6px var(--led),0 0 14px var(--led),inset 0 -1px 2px #0006}
.metal-btn:hover::after,.metal-btn:focus-visible::after,.metal-btn:active::after{border-color:color-mix(in srgb,var(--led) 70%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--led) 45%,transparent)}
.metal-btn:hover,.metal-btn:focus-visible{color:#fff;text-shadow:0 0 10px color-mix(in srgb,var(--led) 60%,transparent)}
.legend{margin:18px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#8d86a0}
.metal-btn:active{transform:translateY(2px) scale(.985);box-shadow:0 4px 10px #000a,inset 0 1px 0 #fff4}
.metal-btn:active::before{box-shadow:inset 0 5px 10px #000,inset 0 -1px 0 #ffffff12}
.metal-btn--glow{color:#1a1205;background:var(--ring)}
.metal-btn--glow::before{background:radial-gradient(ellipse at 50% 20%,#ffd9a0 0%,#ffae52 55%,#e2872e 100%);box-shadow:inset 0 2px 4px #fff8,inset 0 -3px 6px #a0541d}
.metal-btn--small{min-height:42px;padding:0 18px;font-size:13px}

.skip-intro{position:fixed;top:16px;right:16px;z-index:5}
.moves{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:16px;margin-top:30px;opacity:0}
.scene.is-in .moves{opacity:1}

@media (max-width:760px){
  .scene{justify-content:flex-end;padding:88px 22px 15vh;max-width:none}
  .scene--final{justify-content:flex-end;padding-bottom:10vh}
  .moves{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .scene--final h2{font-size:38px}
  .scene--final .sub{font-size:15px}
  .metal-btn{min-height:54px;padding:0 14px;font-size:14px}
  .skip-intro{top:12px;right:12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scene>*{transition:none;opacity:1;transform:none}
  .scroll-cue::after{animation:none}
}