/* Prism Keeper — moonlit lighthouse landing page. Single night look on purpose: it matches the game. */
:root{
  --night:#0B1426; --night2:#13213F; --glass:rgba(16,28,52,.68); --border:rgba(180,205,255,.2);
  --text:#E9EEFB; --title:#F3E7CC; --muted:#9FB0D3; --soft:#B8C6E6; --gold:#F4BD5C; --gold-l:#FFE0A1; --gold-d:#D99A36; --ink:#2A1A05;
  --red:#FF4236; --green:#2BE36F; --blue:#3B6CFF; --amber:#FFB400; --slate:#2A3142; --slate2:#232937;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}html,body{margin:0}
body{background:var(--night);color:var(--text);font:600 17px/1.6 Figtree,system-ui,-apple-system,sans-serif;overflow-x:hidden;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
a{color:var(--gold)}a:hover{color:var(--gold-l)}
img,video{max-width:100%}
h1,h2,h3{font-family:Marcellus,Georgia,serif;font-weight:400;color:var(--title);letter-spacing:.02em;line-height:1.1;margin:0;text-wrap:balance}
h2{font-size:clamp(30px,4.6vw,46px);text-align:center}
.sub{color:var(--muted);text-align:center;max-width:620px;margin:12px auto 0}
.eyebrow{font-weight:800;font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
section{max-width:1120px;margin:0 auto;padding:72px 20px;position:relative}

/* night sky behind everything */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff9 50%,transparent 51%),radial-gradient(1.2px 1.2px at 78% 9%,#fff8 50%,transparent 51%),
    radial-gradient(1.6px 1.6px at 64% 27%,#fff7 50%,transparent 51%),radial-gradient(1px 1px at 33% 6%,#fff9 50%,transparent 51%),
    radial-gradient(1.2px 1.2px at 90% 33%,#fff6 50%,transparent 51%),radial-gradient(1px 1px at 22% 37%,#fff6 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 48% 14%,#fff8 50%,transparent 51%),radial-gradient(1px 1px at 5% 30%,#fff7 50%,transparent 51%),
    radial-gradient(120% 70% at 50% 0%,#24396B 0%,var(--night2) 45%,var(--night) 100%)}
.moon{position:absolute;right:4%;top:15%;width:54px;height:54px;opacity:.8;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#FFFDF3,#E8E6DA 55%,#C9CBC6);box-shadow:0 0 60px 20px rgba(200,215,255,.22),0 0 160px 80px rgba(120,150,230,.12)}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 20px;
  padding-top:calc(12px + env(safe-area-inset-top,0px));background:rgba(11,20,38,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--title);font:400 22px Marcellus,serif;letter-spacing:.04em}
.brand img{border-radius:10px}
.links{display:flex;gap:26px}.links a{color:var(--soft);text-decoration:none;font-weight:700;font-size:15px}.links a:hover{color:var(--gold)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font:800 17px Figtree,sans-serif;color:var(--ink);cursor:pointer;border:0;
  background:linear-gradient(var(--gold-l),var(--gold) 60%,var(--gold-d));box-shadow:inset 0 1px 0 #FFF6DC,0 0 24px rgba(244,189,92,.35),0 5px 0 #8F5F1C;
  border-radius:16px;padding:14px 24px;transition:transform .12s,filter .12s}
.btn:hover{color:var(--ink);filter:brightness(1.06)}.btn:active{transform:translateY(3px);box-shadow:inset 0 1px 0 #FFF6DC,0 2px 0 #8F5F1C}
.btn-small{padding:9px 16px;font-size:15px;border-radius:12px;box-shadow:inset 0 1px 0 #FFF6DC,0 3px 0 #8F5F1C}
.btn-ghost{background:var(--glass);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn-ghost:hover{color:var(--text);border-color:rgba(244,189,92,.55)}
.store{display:inline-flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;border-radius:14px;background:#000;color:#fff;text-decoration:none;border:1px solid #3A3F55}
.store svg{width:28px;height:28px;fill:#fff}
.store span{display:flex;flex-direction:column;line-height:1.1;font-weight:800;font-size:20px}
.store small{font-size:10px;letter-spacing:.08em;font-weight:700;color:#C9CDDA}
.store.soon{cursor:default}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;max-width:1180px;padding-top:64px}
.hero h1{font-size:clamp(42px,6.6vw,76px);margin:16px 0 18px}
.hero h1 span{color:var(--gold);text-shadow:0 0 40px rgba(244,189,92,.35)}
.lead{color:var(--soft);font-size:19px;max-width:560px;margin:0 0 28px}
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:26px 0 0}
.chips li{padding:6px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--border);font-size:14px;font-weight:800;color:var(--soft)}
.hero-phone{justify-self:center;width:100%;max-width:330px}
.phone{position:relative;aspect-ratio:9/19.5;border-radius:40px;padding:10px;background:linear-gradient(160deg,#2A3557,#0D1328);
  box-shadow:0 0 0 2px rgba(244,189,92,.45),0 40px 90px -20px rgba(0,0,0,.85),0 0 90px rgba(120,160,255,.2)}
.phone video{display:block;width:100%;height:100%;object-fit:cover;border-radius:31px;background:#000}
.phone.sm{max-width:260px;border-radius:32px;padding:8px}.phone.sm video{border-radius:25px}

/* try it */
.try{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.try h2{text-align:left;margin:10px 0 14px}
.try-copy p{color:var(--soft);margin:0}
.hud{display:flex;gap:12px;margin:26px 0 18px;flex-wrap:wrap}
.hud div{background:var(--glass);border:1px solid var(--border);border-radius:16px;padding:10px 16px;min-width:96px}
.hud small{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.hud b{font-size:26px;font-weight:800}.hud span{color:var(--muted);font-weight:800;margin-left:4px}
.boardwrap{position:relative;justify-self:center;width:100%;max-width:480px}
#board{display:block;width:100%;height:auto;border-radius:26px;background:radial-gradient(circle at 50% 45%,#2A3550,#121A2E 75%);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.05);touch-action:manipulation;user-select:none;-webkit-user-select:none}
#board .mirror{cursor:pointer}
#board .mirror .pane{transition:transform .32s cubic-bezier(.2,1.5,.4,1);transform-box:fill-box;transform-origin:center}
#board .mirror:hover .base{fill:#E2B46A}
#board .mirror:focus{outline:none}#board .mirror:focus-visible .base{stroke:var(--gold);stroke-width:4}
.beam{fill:none;stroke-linecap:round;stroke-linejoin:round}
.tip{text-align:center;color:var(--muted);font-size:15px;margin:14px 0 0;min-height:24px}
.win{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:10px;text-align:center;background:rgba(11,20,38,.8);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:26px;padding:20px;animation:fade .35s}
.win h3{font-size:44px}.win p{margin:0 0 10px;color:var(--soft)}
.stars{display:flex;gap:6px;font-size:42px;line-height:1}.stars .on{color:var(--gold);text-shadow:0 0 18px rgba(244,189,92,.6)}.stars .off{color:#2E3B5C}
.stars span{display:inline-block;animation:pop .45s cubic-bezier(.2,1.6,.4,1) backwards}.stars span:nth-child(2){animation-delay:.12s;font-size:54px}.stars span:nth-child(3){animation-delay:.24s}
@keyframes pop{from{transform:scale(0)}}@keyframes fade{from{opacity:0}}

/* light */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:40px}
.card{background:var(--glass);border:1px solid var(--border);border-radius:24px;padding:24px}
.card h3{font-size:22px;margin:16px 0 6px}.card p{margin:0;color:var(--soft);font-size:16px}
.glyph{width:64px;height:64px;border-radius:18px;background:#141C30;border:1px solid var(--border);position:relative;overflow:hidden}
.glyph::before,.glyph::after{content:"";position:absolute}
.glyph.mirror::before{left:0;top:30px;width:32px;height:4px;background:#FFE8B8;box-shadow:0 0 10px #FFD27A}
.glyph.mirror::after{left:30px;top:0;width:4px;height:32px;background:#FFE8B8;box-shadow:0 0 10px #FFD27A}
.glyph.split::before{left:0;top:30px;width:64px;height:4px;background:#BFD4FF;box-shadow:0 0 10px #7FA6FF}
.glyph.split::after{left:30px;top:30px;width:4px;height:34px;background:#BFD4FF;box-shadow:0 0 10px #7FA6FF}
.glyph.prism{background:linear-gradient(#141C30,#141C30)}
.glyph.prism::before{left:16px;top:14px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:28px solid rgba(220,235,255,.55)}
.glyph.prism::after{left:32px;top:36px;width:32px;height:12px;background:linear-gradient(var(--red) 0 33%,var(--green) 33% 66%,var(--blue) 66%);filter:drop-shadow(0 0 6px #fff6)}
.glyph.mix::before{left:10px;top:12px;width:30px;height:30px;border-radius:50%;background:var(--red);mix-blend-mode:screen;box-shadow:0 0 12px var(--red)}
.glyph.mix::after{left:24px;top:22px;width:30px;height:30px;border-radius:50%;background:var(--green);mix-blend-mode:screen;box-shadow:0 0 12px var(--green)}
.clip{display:flex;gap:40px;align-items:center;justify-content:center;margin-top:56px;flex-wrap:wrap}
.clip .phone{flex:0 0 240px}
.clip-copy{max-width:420px;min-width:0}.clip-copy h3{font-size:30px;margin:10px 0}.clip-copy p{color:var(--soft);margin:0}

/* islands */
.isle-list{list-style:none;padding:16px 0 0;margin:36px auto 0;max-width:860px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:3px solid rgba(244,189,92,.6)}
.isle-list li{display:flex;flex-direction:column;gap:2px}
.isle-list b{font:400 22px Marcellus,serif;color:var(--title)}.isle-list span{color:var(--gold);font-weight:800;font-size:14px}.isle-list small{color:var(--muted);font-size:14px}
.rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:40px 4px 20px;scrollbar-width:thin}
.rail figure{flex:0 0 min(250px,70vw);margin:0;scroll-snap-align:center}
.rail img{display:block;width:100%;height:auto;border-radius:24px;border:1px solid var(--border);box-shadow:0 24px 50px -24px #000}

/* promises */
.promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.p-card{border-radius:24px;padding:26px;background:linear-gradient(160deg,rgba(244,189,92,.12),rgba(16,28,52,.65));border:1px solid var(--border)}
.p-card h3{font-size:24px;margin-bottom:8px}.p-card p{margin:0;color:var(--soft)}

/* faq */
.faq{max-width:780px}.faq h2{margin-bottom:28px}
details{background:var(--glass);border:1px solid var(--border);border-radius:18px;padding:4px 22px;margin:10px 0}
summary{cursor:pointer;font-weight:800;font-size:18px;padding:14px 0;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--gold);font-weight:800}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px;color:var(--soft)}

.final{text-align:center;display:grid;justify-items:center;gap:28px;padding-bottom:96px}
.foot{border-top:1px solid var(--border);padding:30px 20px calc(36px + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;max-width:1120px;margin:0 auto;color:var(--muted);font-size:15px}
.foot-brand{display:flex;align-items:center;gap:10px;font:400 19px Marcellus,serif;color:var(--title)}.foot-brand img{border-radius:8px}
.foot nav{display:flex;flex-wrap:wrap;gap:20px}.foot p{margin:0;width:100%}

/* legal pages */
.legal{max-width:760px;padding-top:40px}
.legal h1{font-size:clamp(34px,5vw,46px);margin-bottom:6px}.legal h2{font-size:24px;text-align:left;margin:34px 0 8px}
.legal p{color:var(--soft)}.legal .updated,.muted{color:var(--muted)}
.legal .card{margin:20px 0}

.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s,transform .6s}.reveal.in{opacity:1;transform:none}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .hero,.try{grid-template-columns:1fr;gap:36px}
  .hero{text-align:center;padding-top:40px}.lead{margin-left:auto;margin-right:auto}.stores,.chips{justify-content:center}
  .try h2,.try-copy{text-align:center}.hud{justify-content:center}
  .promise{grid-template-columns:1fr}.isle-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .links{display:none}.moon{display:none}
}
@media (max-width:560px){section{padding:56px 16px}.cards{grid-template-columns:1fr}.nav{padding-left:16px;padding-right:16px}.clip .phone{flex-basis:220px}}