/* Planet Chaser — one continuous night sky; sections drift in over a parallax starfield.
   Single dark look by design (deep space). Animations use transform/opacity only. */
:root{
  --void:#050819;
  --void-2:#0a1030;
  --hull:#0e1538;
  --hull-2:#16204d;
  --line:#25336d;
  --ink:#f1f4ff;
  --dim:#a9b3d9;
  --lime:#a6e22e;
  --lime-deep:#4f7d0b;
  --sun:#ffd23f;
  --suit:#ff7a1f;
  --ice:#5fd3ff;
  --mars:#e0452b;
  --paper:#f3f6e8;
  --paper-ink:#13172b;
  --f-display:"Russo One","Arial Black",Impact,sans-serif;
  --f-body:"Nunito","Trebuchet MS",system-ui,sans-serif;
  --f-glyph:"Noto Sans Tifinagh","Segoe UI Symbol",serif;
  --r:18px;
  --ease:cubic-bezier(.22,.8,.24,1);
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--void);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--void);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--void)}
img{max-width:100%;display:block}
a{color:var(--lime)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;text-wrap:balance;margin:0}
h2{font-size:clamp(32px,5.2vw,58px)}
h3{font-size:22px}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.eyebrow{font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:13px;color:var(--sun)}
.lead{color:var(--dim);max-width:60ch;font-size:clamp(16px,1.6vw,19px)}
.glyph{font-family:var(--f-glyph)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- SKY (fixed, composite-only layers) ---------- */
.sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.sky .layer{position:absolute;left:-60px;right:-60px;top:0;background-repeat:repeat;will-change:transform}
.sky .twinkle{animation:twinkle 5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.25}to{opacity:1}}
.sky .glow{position:absolute;border-radius:50%;filter:blur(0);will-change:transform}
.sky .nebula-a{width:70vmax;height:70vmax;left:-25vmax;top:30vh;background:radial-gradient(closest-side,rgba(110,60,200,.20),transparent)}
.sky .nebula-b{width:60vmax;height:60vmax;right:-20vmax;top:120vh;background:radial-gradient(closest-side,rgba(40,140,220,.16),transparent)}
.shoot{position:absolute;top:0;left:0;width:160px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(166,226,46,0),rgba(200,255,120,.95));transform-origin:right center;opacity:0}
.shoot.go{animation:shoot 1.1s var(--ease) forwards}
@keyframes shoot{0%{opacity:0;transform:translate3d(var(--x),var(--y),0) rotate(22deg) scaleX(.2)}15%{opacity:1}100%{opacity:0;transform:translate3d(calc(var(--x) + 420px),calc(var(--y) + 170px),0) rotate(22deg) scaleX(1)}}

header,main,footer{position:relative;z-index:1}

/* ---------- NAV ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.nav.solid{background:rgba(5,8,25,.92);box-shadow:0 1px 0 var(--line),0 12px 30px -18px #000}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px;transition:height .35s var(--ease)}
.nav.solid .wrap{height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:42px;height:42px;border-radius:50%;border:2px solid var(--lime)}
.brand b{font-family:var(--f-display);font-weight:400;font-size:19px;letter-spacing:.02em;line-height:1}
.brand b span{color:var(--lime)}
.brand small{display:block;font-size:10px;letter-spacing:.16em;color:var(--sun);font-weight:800;line-height:1.4}
.links{display:flex;gap:2px;align-items:center;list-style:none;margin:0;padding:0}
.links a{position:relative;display:block;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:800;font-size:15px;transition:color .25s}
.links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.links a:hover,.links a.active{color:var(--lime)}
.links a:hover::after,.links a.active::after{transform:scaleX(1)}
.links .shop{background:var(--suit);color:#1d0c00;margin-left:6px}
.links .shop::after{display:none}
.links .shop:hover{background:var(--sun);color:var(--void)}
.progress-top{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--lime),var(--sun));transform:scaleX(0);transform-origin:left;will-change:transform}
.burger{display:none;position:relative;width:46px;height:46px;border-radius:12px;border:2px solid var(--line);background:transparent;cursor:pointer}
.burger i,.burger i::before,.burger i::after{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);content:"";transition:transform .3s var(--ease),opacity .2s}
.burger i{top:21px}.burger i::before{left:0;right:0;top:-7px}.burger i::after{left:0;right:0;top:7px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:960px){
  .burger{display:block}
  .links{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:4px;background:rgba(10,16,48,.98);border-bottom:1px solid var(--line);padding:12px var(--gutter-r) 18px var(--gutter-l);transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s .3s}
  .links.open{transform:none;opacity:1;visibility:visible;transition:transform .3s var(--ease),opacity .3s var(--ease)}
  .links a{padding:14px 16px;font-size:17px}
  .links a::after{display:none}
  .links .shop{margin:6px 0 0;text-align:center}
}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;font-family:var(--f-display);font-size:17px;letter-spacing:.03em;padding:12px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .25s,color .25s,border-color .25s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-lime{background:var(--lime);color:var(--void);box-shadow:0 10px 30px -12px rgba(166,226,46,.8)}
.btn-lime:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(166,226,46,.9)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--ink);border:2px solid var(--line)}
.btn-ghost:hover{border-color:var(--lime);color:var(--lime)}
.btn-sun{background:var(--sun);color:var(--void)}
.btn-sun:hover{transform:translateY(-2px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.chip{all:unset;cursor:pointer;font-size:13px;font-weight:900;color:var(--lime);border:1px solid var(--line);border-radius:999px;padding:6px 12px;transition:border-color .25s,background-color .25s}
.chip:hover{border-color:var(--lime);background:rgba(166,226,46,.08)}
.chip:focus-visible{outline:3px solid var(--sun)}

/* ---------- HERO ---------- */
.hero{position:relative;padding-top:clamp(10px,3vw,30px);overflow:clip}
.hero-stage{position:relative;max-width:1320px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr);align-items:end;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.hero-copy{position:relative;z-index:3;text-align:center;padding-bottom:clamp(40px,5vw,70px)}
.tagline{font-family:var(--f-display);font-size:clamp(14px,1.8vw,21px);letter-spacing:.07em}
.tagline em{font-style:normal;color:var(--sun)}
.logo-type{margin-top:6px;line-height:.86}
.logo-type span{display:block;font-size:clamp(58px,9.6vw,136px);letter-spacing:.015em}
.logo-type .planet{background:linear-gradient(180deg,#fff 0%,#dfe4f5 42%,#8e98bd 52%,#eef1ff 70%,#b8c0dd 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 5px 0 #18204a)}
.logo-type .chaser{color:var(--lime);text-shadow:0 5px 0 var(--lime-deep),0 0 50px rgba(166,226,46,.35)}
.join-strip{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;font-family:var(--f-display);color:var(--sun);font-size:clamp(16px,2.1vw,25px)}
.join-strip::before,.join-strip::after{content:"";height:3px;width:min(64px,9vw);border-radius:2px;background:var(--lime)}
.pillars{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px;margin-top:8px;font-weight:900;letter-spacing:.1em;font-size:clamp(12px,1.3vw,15px)}
.pillars span+span::before{content:"•";color:var(--lime);margin-right:14px}
.hello{margin-top:18px}
.hello b{display:block;font-family:var(--f-display);font-weight:400;font-size:clamp(22px,3.2vw,38px)}
.hello i{font-style:normal;color:var(--lime);font-weight:900;letter-spacing:.12em;font-size:clamp(13px,1.3vw,16px)}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:22px}

.char{position:relative;z-index:2;isolation:isolate;display:flex;justify-content:center;align-items:flex-end;align-self:end}
.char .float{will-change:transform}
.char button{all:unset;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent;border-radius:30px}
.char button:focus-visible{outline:3px solid var(--sun);outline-offset:-6px}
.char img{width:100%;height:auto;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);mask-image:linear-gradient(to bottom,#000 78%,transparent 99%);transition:transform .5s var(--ease);transform-origin:50% 90%}
.char button:hover img{transform:scale(1.03) rotate(-1deg)}
.char.martin .float{width:min(400px,100%);animation:bob 6s ease-in-out infinite}
.char.zak .float{width:min(330px,90%);animation:bob 6s ease-in-out -3s infinite}
.char .float::before{content:"";position:absolute;z-index:-1;left:8%;right:8%;top:6%;height:62%;border-radius:50%;opacity:.55}
.char.martin .float::before{background:radial-gradient(closest-side,rgba(255,122,31,.45),transparent)}
.char.zak .float::before{background:radial-gradient(closest-side,rgba(95,211,255,.4),transparent)}
.char .float{position:relative}
@keyframes bob{50%{transform:translate3d(0,-10px,0)}}
.name-tag{position:absolute;left:50%;bottom:clamp(70px,9vw,110px);transform:translateX(-50%);z-index:4;background:var(--void);border:2px solid currentColor;border-radius:999px;padding:4px 16px;font-family:var(--f-display);font-size:14px;letter-spacing:.06em;white-space:nowrap}
.martin .name-tag{color:var(--suit)}.zak .name-tag{color:var(--ice)}
.bubble{position:absolute;left:50%;top:4%;z-index:5;width:min(240px,92%);background:var(--ink);color:var(--paper-ink);padding:12px 16px;border-radius:16px;font-weight:800;font-size:14px;line-height:1.4;opacity:0;transform:translate3d(-50%,8px,0) scale(.96);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.bubble::after{content:"";position:absolute;bottom:-8px;left:50%;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:var(--ink)}
.bubble.show{opacity:1;transform:translate3d(-50%,-6px,0) scale(1)}

.planet-btn{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;color:var(--ink);font-family:var(--f-display);font-size:13px;letter-spacing:.14em;padding:8px;-webkit-tap-highlight-color:transparent}
.planet-btn .orb{border-radius:50%;transition:transform .5s var(--ease)}
.planet-btn:hover .orb{transform:scale(1.08)}
.planet-btn.sun{left:var(--gutter-l);top:4px}
.planet-btn.sun .orb{width:64px;height:64px;background:radial-gradient(circle at 36% 34%,#fff3b0,#ffb02e 45%,#e2560f 80%);box-shadow:0 0 50px 8px rgba(255,140,30,.45)}
.planet-btn.antares{right:var(--gutter-r);top:4px;flex-direction:row-reverse}
.planet-btn.antares .orb{width:72px;height:72px;background:radial-gradient(circle at 34% 30%,#9fe0ff,#2f6fd0 40%,#0d2a66 75%);box-shadow:inset -14px -10px 24px rgba(0,0,0,.55),0 0 40px rgba(95,211,255,.35)}
.sky-pop{position:absolute;z-index:6;top:86px;width:min(280px,calc(100% - 32px));background:var(--hull);border:1px solid var(--line);border-radius:16px;padding:14px 16px;font-size:14px;line-height:1.5;box-shadow:0 24px 50px -16px #000;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.sky-pop.show{opacity:1;transform:none;pointer-events:auto}
.sky-pop b{display:block;color:var(--sun);font-family:var(--f-display);font-weight:400;font-size:16px;margin-bottom:4px}

.ufo-wrap{position:relative;z-index:3;width:clamp(170px,20vw,270px);margin:26px auto 0}
#ufo{width:100%;height:auto;display:block;cursor:pointer;overflow:visible;-webkit-tap-highlight-color:transparent;transition:transform 1.1s cubic-bezier(.55,-.35,.4,1.3)}
#ufo .hover{animation:ufoBob 4s ease-in-out infinite;transform-box:fill-box}
@keyframes ufoBob{50%{transform:translateY(-8px)}}
#ufo .beam{opacity:0;transition:opacity .4s var(--ease)}
#ufo:hover .beam,#ufo.beaming .beam{opacity:.7}
#ufo.flying{transform:translate3d(0,-70vh,0) scale(.35) rotate(-14deg)}
#ufo .light{animation:blink 1.4s steps(1) infinite}
#ufo .light:nth-of-type(2){animation-delay:.35s}#ufo .light:nth-of-type(3){animation-delay:.7s}#ufo .light:nth-of-type(4){animation-delay:1.05s}
@keyframes blink{50%{fill:var(--sun)}}

.ground{position:absolute;left:0;right:0;bottom:-1px;z-index:1;height:clamp(110px,13vw,180px);pointer-events:none}
.ground svg{width:100%;height:100%;display:block}

@media (max-width:900px){
  .hero-stage{grid-template-columns:1fr 1fr;padding-top:70px}
  .hero-copy{grid-column:1/-1;order:-1;padding-bottom:0}
  .char{margin-top:-30px}
  .char.zak{align-self:end}
  .char.martin .float{width:min(260px,100%)}
  .char.zak .float{width:min(220px,92%)}
  .name-tag{bottom:clamp(56px,14vw,90px)}
  .ufo-wrap{width:clamp(140px,40vw,210px);margin-top:20px}
  .planet-btn .orb{transform:scale(.8)}
  .planet-btn.sun .orb,.planet-btn.antares .orb{width:52px;height:52px}
}
@media (max-width:520px){
  .planet-btn span.lbl{display:none}
  .hero-stage{padding-top:56px}
  .hero-cta .btn{flex:1 1 100%}
}

/* ---------- SECTIONS ---------- */
section.deck{position:relative;padding-block:clamp(48px,6vw,84px);scroll-margin-top:56px}
section.deck+section.deck::before{content:"";position:absolute;top:0;left:50%;width:min(1100px,calc(100% - 32px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(166,226,46,.25),transparent)}
.deck-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,44px)}
.deck-head.center{text-align:center;justify-items:center}
.panel{background:linear-gradient(180deg,rgba(22,32,77,.72),rgba(14,21,56,.72));border:1px solid var(--line);border-radius:var(--r)}
.below{content-visibility:auto;contain-intrinsic-size:auto 900px}

/* reveal: only applied by JS to elements that start below the fold */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.rv.pre{opacity:0;transform:translate3d(0,28px,0)}

/* ---------- DAY ---------- */
.day{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.day button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:10px;align-content:start;padding:22px;border-radius:var(--r);background:linear-gradient(180deg,rgba(22,32,77,.7),rgba(14,21,56,.7));border:1px solid var(--line);transition:transform .4s var(--ease),border-color .3s,background-color .3s;-webkit-tap-highlight-color:transparent}
.day button:hover{transform:translate3d(0,-4px,0);border-color:#3a4a90}
.day button[aria-pressed="true"]{border-color:var(--lime);background:linear-gradient(180deg,rgba(166,226,46,.14),rgba(14,21,56,.7))}
.day button:focus-visible{outline:3px solid var(--sun)}
.day svg{width:46px;height:46px}
.day b{font-family:var(--f-display);font-weight:400;font-size:21px}
.day small{color:var(--dim);font-size:14px}
.day-out{margin-top:16px;padding:22px 24px;display:flex;gap:18px;align-items:center;min-height:100px}
.day-out .g{font-family:var(--f-glyph);font-size:34px;color:var(--lime);flex:none;width:44px;text-align:center}
.day-out p{transition:opacity .35s var(--ease),transform .35s var(--ease)}
.day-out p.swap{opacity:0;transform:translate3d(8px,0,0)}
@media (max-width:820px){.day{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- CREW ---------- */
.crew-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.card-crew{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;padding:22px;align-items:center;overflow:hidden}
.card-crew .por{width:150px;height:170px;border-radius:16px;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.card-crew.m .por{background:radial-gradient(circle at 50% 30%,rgba(255,122,31,.45),rgba(255,122,31,.05) 70%)}
.card-crew.z .por{background:radial-gradient(circle at 50% 30%,rgba(95,211,255,.4),rgba(95,211,255,.05) 70%)}
.card-crew .por img{width:120%;max-width:none;height:auto;transform:translateY(8%)}
.card-crew p{color:var(--dim);font-size:15px;margin-top:8px}
.card-crew dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:12px 0 0;font-size:15px}
.card-crew dt{color:var(--dim);font-weight:700}
.card-crew dd{margin:0;font-weight:800}
@media (max-width:820px){.crew-cards{grid-template-columns:1fr}}
@media (max-width:480px){.card-crew{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px;align-items:start}.card-crew .por{width:96px;height:116px}}

/* ---------- DECODER ---------- */
.code-title{font-family:var(--f-glyph);font-size:clamp(24px,4vw,40px);color:var(--lime);letter-spacing:.14em}
.decoder{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:20px;align-items:start}
.decoder .panel{padding:22px}
.keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.key{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:1;max-width:100%;position:relative;display:grid;place-items:center;border-radius:12px;background:var(--hull-2);border:1px solid var(--line);transition:transform .25s var(--ease),border-color .25s,background-color .4s;-webkit-tap-highlight-color:transparent}
.key:hover{transform:translate3d(0,-2px,0);border-color:var(--lime)}
.key:focus-visible{outline:3px solid var(--sun)}
.key .g{font-family:var(--f-glyph);font-size:24px;line-height:1}
.key .l{position:absolute;right:6px;bottom:3px;font-size:11px;font-weight:900;color:var(--lime);opacity:0;transform:translateY(3px);transition:opacity .3s,transform .3s var(--ease)}
.key.known{background:#1c2c3c;border-color:#3c5a2a}
.key.known .l{opacity:1;transform:none}
.key.pop{animation:pop .45s var(--ease)}
@keyframes pop{40%{transform:scale(1.14)}}
.bar{height:8px;border-radius:99px;background:var(--hull-2);overflow:hidden;margin-top:16px}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--lime),var(--sun));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.meta{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--dim);font-weight:700;margin-top:10px}
.tabs{position:relative;display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--void-2);border:1px solid var(--line);margin-bottom:16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .ind{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:var(--lime);transition:transform .4s var(--ease),width .4s var(--ease);will-change:transform}
.tabs button{all:unset;position:relative;z-index:1;cursor:pointer;padding:9px 16px;border-radius:999px;font-weight:900;font-size:14px;color:var(--dim);white-space:nowrap;transition:color .3s}
.tabs button[aria-selected="true"]{color:var(--void)}
.tabs button:focus-visible{outline:3px solid var(--sun)}
.tabpanel{animation:fadeUp .45s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translate3d(0,10px,0)}}
.screen{background:var(--paper);color:var(--paper-ink);border-radius:14px;border:4px solid var(--lime);padding:18px 20px;font-size:21px;line-height:1.75;letter-spacing:.05em;min-height:160px;overflow-wrap:anywhere}
.screen .glyph{font-size:20px}
.screen .ok{color:#3d6b00;font-weight:900;animation:inkIn .5s var(--ease)}
@keyframes inkIn{from{opacity:0;filter:blur(3px)}}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
label.lab{display:block;font-weight:800;font-size:14px;color:var(--dim);margin-bottom:6px}
textarea,input,select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--void-2);border:2px solid var(--line);border-radius:14px;padding:13px 15px;transition:border-color .25s,box-shadow .25s}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 4px rgba(166,226,46,.15)}
textarea{resize:vertical;min-height:96px}
.out{font-family:var(--f-glyph);font-size:24px;letter-spacing:.08em;min-height:66px;padding:12px 15px;border-radius:14px;background:var(--paper);color:var(--paper-ink);overflow-wrap:anywhere}
.out.en{font-family:var(--f-body);font-weight:800;letter-spacing:.02em;font-size:19px}
.challenge{font-family:var(--f-glyph);font-size:clamp(34px,6vw,52px);letter-spacing:.22em;text-align:center;padding:20px;border-radius:14px;background:var(--paper);color:var(--paper-ink);overflow-wrap:anywhere}
.challenge.new{animation:inkIn .5s var(--ease)}
.score{font-family:var(--f-display);color:var(--sun);font-size:22px;font-variant-numeric:tabular-nums}
.fb{font-weight:900;min-height:1.6em}
.fb.ok{color:var(--lime)}.fb.no{color:var(--suit)}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (max-width:920px){.decoder{grid-template-columns:1fr}}

/* ---------- ADVENTURES ---------- */
.eps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ep{overflow:hidden;display:flex;flex-direction:column;transition:transform .45s var(--ease),border-color .3s}
.ep:hover{transform:translate3d(0,-6px,0);border-color:#3a4a90}
.ep .art{position:relative;aspect-ratio:16/9;max-width:100%;overflow:hidden}
.ep .art canvas{position:absolute;inset:0;width:100%;height:100%;transition:transform .8s var(--ease)}
.ep:hover .art canvas{transform:scale(1.05)}
.ep .badge{position:absolute;left:14px;top:14px;z-index:1;font-family:var(--f-display);font-size:12px;letter-spacing:.14em;background:rgba(5,8,25,.85);padding:6px 12px;border-radius:999px}
.ep.locked .art::after{content:"";position:absolute;inset:0;background:rgba(5,8,25,.55)}
.ep .lock{position:absolute;inset:0;z-index:1;display:grid;place-items:center}
.ep .lock svg{width:44px;height:44px}
.ep .body{padding:20px 22px 22px;display:grid;gap:8px;align-content:start;flex:1}
.ep .when{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.ep p{color:var(--dim);font-size:15px}
.ep .btn{justify-self:start;margin-top:8px;min-height:44px;padding:10px 18px;font-size:15px}
.cd{display:flex;gap:8px;margin-top:6px}
.cd div{background:var(--void-2);border:1px solid var(--line);border-radius:12px;padding:6px 8px;text-align:center;min-width:58px}
.cd b{display:block;font-family:var(--f-display);font-weight:400;font-size:22px;color:var(--sun);font-variant-numeric:tabular-nums;line-height:1.2}
.cd small{font-size:10px;color:var(--dim);font-weight:900;letter-spacing:.1em}
@media (max-width:920px){.eps{grid-template-columns:1fr}.ep .art{aspect-ratio:21/9}}

/* ---------- SHOP ---------- */
.shop-band{position:relative;overflow:hidden;border-radius:28px;padding:clamp(26px,4.5vw,52px);border:1px solid rgba(255,122,31,.35);background:radial-gradient(120% 140% at 100% 0%,rgba(255,122,31,.28),transparent 55%),linear-gradient(180deg,#141c48,#0c1336);display:grid;gap:28px}
.shop-top{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.prods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.prod{display:grid;gap:6px;text-decoration:none;color:var(--ink);background:rgba(5,8,25,.6);border:1px solid var(--line);border-radius:18px;padding:14px;transition:transform .45s var(--ease),border-color .3s}
.prod:hover{transform:translate3d(0,-6px,0);border-color:var(--suit)}
.prod .pic{aspect-ratio:1;max-width:100%;border-radius:12px;background:var(--hull-2);display:grid;place-items:center;margin-bottom:6px;overflow:hidden}
.prod .pic svg{width:60%;height:60%;transition:transform .6s var(--ease)}
.prod:hover .pic svg{transform:scale(1.08) rotate(-3deg)}
.prod b{font-weight:900}
.prod span{color:var(--dim);font-size:14px}
.prod .go{color:var(--suit);font-weight:900;font-size:14px}
@media (max-width:920px){.prods{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- CLUB ---------- */
.join{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;align-items:start}
form.panel{padding:clamp(18px,3vw,28px);display:grid;gap:16px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field label{display:block;font-weight:800;font-size:14px;margin-bottom:6px}
.hint{font-size:13px;color:var(--dim);margin-top:4px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--dim);cursor:pointer}
.check input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--lime);padding:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{font-weight:800;font-size:15px;min-height:1.5em}
.msg.ok{color:var(--lime)}.msg.err{color:var(--suit)}
.badge-card{padding:28px;display:grid;justify-items:center;text-align:center;gap:12px;background:radial-gradient(circle at 50% 0%,rgba(166,226,46,.2),transparent 65%),linear-gradient(180deg,rgba(22,32,77,.72),rgba(14,21,56,.72))}
.ring{position:relative;width:160px;height:160px;display:grid;place-items:center}
.ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:6px dashed var(--lime);animation:spin 40s linear infinite}
.ring img{width:104px;height:104px;border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.who{font-family:var(--f-display);font-size:26px}
.bcode{font-family:var(--f-glyph);font-size:24px;color:var(--lime);letter-spacing:.14em;min-height:1.4em}
.bid{font-size:13px;color:var(--dim);font-weight:900;letter-spacing:.1em;font-variant-numeric:tabular-nums}
.perks{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px}
.perks li{display:flex;gap:12px;color:var(--dim)}
.perks b{color:var(--ink)}
.perks svg{flex:none;width:22px;height:22px;margin-top:3px}
@media (max-width:920px){.join{grid-template-columns:1fr}}
@media (max-width:560px){.f2{grid-template-columns:1fr}}

/* ---------- CONTACT ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:start}
.info{padding:clamp(18px,3vw,28px);display:grid;gap:22px}
.info dl{margin:0;display:grid;gap:18px}
.info dt{font-weight:900;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--sun)}
.info dd{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-weight:800;overflow-wrap:anywhere}
.faq details{border-top:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px;padding:14px 0;font-weight:900}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime);font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{color:var(--dim);font-size:15px;padding-bottom:14px}
@media (max-width:920px){.contact{grid-template-columns:1fr}}

/* ---------- FOOTER ---------- */
footer{padding-block:20px 36px}
.cta-bar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);gap:14px}
.cta-bar a{display:grid;align-content:center;text-align:center;gap:2px;min-height:96px;padding:16px;border-radius:var(--r);border:2px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .4s var(--ease),background-color .3s,color .3s}
.cta-bar a:hover{border-color:var(--lime);transform:translate3d(0,-3px,0)}
.cta-bar .l1{font-weight:900;color:var(--sun);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.cta-bar .l2{font-family:var(--f-display);font-size:20px}
.cta-bar .domain{border-color:var(--sun);color:var(--sun);font-family:var(--f-display);font-size:clamp(24px,3.6vw,42px)}
.cta-bar .domain:hover{background:var(--sun);color:var(--void);border-color:var(--sun)}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:28px;color:var(--dim);font-size:14px}
.flag{display:flex;align-items:center;gap:10px}
.flag svg{width:46px;height:32px;border-radius:4px;flex:none}
@media (max-width:760px){.cta-bar{grid-template-columns:1fr}}

.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:80;max-width:calc(100% - 32px);background:var(--lime);color:var(--void);font-weight:900;padding:13px 22px;border-radius:999px;text-align:center;transform:translate3d(-50%,calc(100% + 40px),0);visibility:hidden;transition:transform .45s var(--ease),visibility 0s .45s;box-shadow:0 16px 40px -12px rgba(0,0,0,.7)}
.toast.show{transform:translate3d(-50%,0,0);visibility:visible;transition:transform .45s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .rv.pre{opacity:1;transform:none}
}