@font-face{font-family:Archivo;src:url(../assets/fonts/archivo-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:ArchivoBlack;src:url(../assets/fonts/archivo-black-latin.woff2) format("woff2");font-display:swap}
:root{--black:#030202;--bone:#eee5dc;--ash:#9e8d82;--red:#ff300f;--ember:#ff6a19;--line:rgba(255,93,32,.21);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--black);color:var(--bone);font-family:Archivo,Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}::selection{background:var(--red);color:#fff}
.worlds-circuit,.worlds-heat{position:fixed;inset:0;pointer-events:none}.worlds-circuit{z-index:0;width:100%;height:100%;opacity:.42}.worlds-heat{z-index:1;background:radial-gradient(circle at var(--world-x,50%) var(--world-y,48%),rgba(255,45,9,.14),transparent 27%),repeating-linear-gradient(0deg,transparent 0 4px,rgba(255,255,255,.012) 5px)}
.worlds-header{position:fixed;z-index:20;left:0;right:0;top:0;height:70px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(20px,4vw,64px);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(#050303e8,#05030370,transparent);backdrop-filter:blur(7px)}.worlds-header>a{font-size:.71rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}.worlds-header>a:last-child{text-align:right;color:var(--ember)}.worlds-header p{margin:0;color:var(--ash);font-size:.6rem;letter-spacing:.22em}.worlds-brand{font-family:ArchivoBlack,Archivo,sans-serif;color:#fff}
main{position:relative;z-index:2}.worlds-intro{height:min(880px,100svh);min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:110px 24px 80px;position:relative}.worlds-intro:before{content:"";position:absolute;width:min(54vw,650px);aspect-ratio:1;border:1px solid rgba(255,70,18,.22);border-radius:50%;box-shadow:0 0 70px rgba(255,35,4,.12),inset 0 0 90px rgba(255,58,5,.07);animation:worldBreath 5.8s ease-in-out infinite}.worlds-intro:after{content:"";position:absolute;width:min(29vw,350px);aspect-ratio:1;border:2px solid rgba(255,95,30,.36);border-radius:50%;box-shadow:0 0 18px var(--red),inset 0 0 45px rgba(255,39,4,.22);animation:worldSpin 18s linear infinite}.worlds-intro>p:first-child{position:relative;z-index:2;margin:0 0 18px;color:var(--ember);font-size:.66rem;letter-spacing:.39em}.worlds-intro h1{position:relative;z-index:2;margin:0;font-family:ArchivoBlack,Archivo,sans-serif;font-size:clamp(3.5rem,11vw,10.5rem);line-height:.77;letter-spacing:-.07em;text-shadow:0 0 40px rgba(255,34,5,.28)}.worlds-intro h1 span{display:block;font-size:.23em;letter-spacing:.7em;margin:0 0 21px;color:var(--red)}.worlds-intro>p:nth-of-type(2){position:relative;z-index:2;max-width:510px;margin:36px 0 32px;color:var(--ash);font-size:clamp(.9rem,1.5vw,1.05rem);line-height:1.65}.worlds-first{position:relative;z-index:3;display:flex;align-items:center;gap:13px;padding:15px 20px;border:1px solid rgba(255,83,24,.47);font-size:.64rem;font-weight:700;letter-spacing:.24em}.worlds-first i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 13px var(--red);animation:worldPulse 1.5s ease-in-out infinite}

/* ============ GALAXY MAP // 3D ORBITAL SPACE ============ */
main{position:relative;z-index:2}
.worlds-galaxy{position:relative;padding:26px clamp(16px,4vw,60px) 30px}

.space{position:relative;width:min(1240px,96vw);height:min(760px,78svh);min-height:460px;margin:0 auto;perspective:1300px;perspective-origin:50% 50%;touch-action:none;cursor:grab;overflow:hidden}
.space.is-dragging{cursor:grabbing}
.space.is-engaged{box-shadow:inset 0 0 0 1px rgba(255,106,25,.18)}
.space:focus-visible{outline:1px solid rgba(255,120,50,.6);outline-offset:6px}

.stage3d{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:translateZ(var(--dolly,0px)) rotateX(var(--pitch,64deg)) rotateY(var(--yaw,0deg));will-change:transform}

/* the star at the middle of the system */
.galaxy-core{position:absolute;left:50%;top:50%;width:clamp(74px,9vmin,124px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%) rotateY(calc(var(--yaw,0deg) * -1)) rotateX(calc(var(--pitch,64deg) * -1));transform-style:preserve-3d;border-radius:50%;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at 44% 38%,#ffe0bb 0,#ff7a2a 20%,#c22c05 46%,#3d0c02 72%,#0a0302 100%);box-shadow:0 0 40px rgba(255,86,20,.55),0 0 120px rgba(255,50,8,.3),0 0 240px rgba(255,40,4,.16)}
.galaxy-core:before{content:"";position:absolute;inset:-30%;border-radius:50%;background:radial-gradient(circle,rgba(255,104,32,.22),transparent 62%);animation:coreBreath 6.5s ease-in-out infinite}
.galaxy-core b{position:relative;font-family:ArchivoBlack,Archivo,sans-serif;font-size:clamp(1.2rem,2.7vmin,1.9rem);color:#fff4e8;text-shadow:0 0 18px rgba(255,120,40,.85),0 2px 6px rgba(60,10,0,.7)}
.galaxy-core span{display:none}

/* an orbital plane: tilted and swung so the rings tangle in depth */
.plane{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(var(--n)) rotateX(var(--i))}
.ring{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2vmin);height:calc(var(--r) * 2vmin);margin:calc(var(--r) * -1vmin) 0 0 calc(var(--r) * -1vmin);border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotateX(90deg);pointer-events:none}
.plane:nth-of-type(odd) .ring{border-color:rgba(255,106,25,.13)}

/* carrier swings the planet around the plane */
.carrier{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;animation:carrierRun var(--dur) linear infinite;animation-delay:calc(var(--dur) * var(--phase) * -1)}
.carrier-out{position:absolute;transform-style:preserve-3d;transform:translateZ(calc(var(--r) * 1vmin))}
/* three nested counters rebuild the inverse rotation so the planet always faces us */
.face-a{position:absolute;transform-style:preserve-3d;animation:faceRun var(--dur) linear infinite;animation-delay:calc(var(--dur) * var(--phase) * -1)}
.face-i{position:absolute;transform-style:preserve-3d;transform:rotateX(calc(var(--i) * -1)) rotateZ(calc(var(--n) * -1))}
.face-v{position:absolute;transform-style:preserve-3d;transform:rotateY(calc(var(--yaw,0deg) * -1)) rotateX(calc(var(--pitch,64deg) * -1))}

.planet{position:absolute;left:0;top:0;display:grid;justify-items:center;gap:8px;width:max-content;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;outline:0}
.planet-body{position:relative;width:var(--size);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#050202;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 26px rgba(var(--glow),.3),0 14px 34px rgba(0,0,0,.6);transition:box-shadow .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.planet-body img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.14) brightness(.76);transition:filter .4s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.planet-body:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 32% 30%,rgba(255,222,190,.28),rgba(255,150,80,.06) 34%,transparent 52%),radial-gradient(circle at 74% 76%,rgba(0,0,0,.8),rgba(0,0,0,.3) 44%,transparent 68%);mix-blend-mode:multiply;opacity:.85}
.planet-body:before{content:"";position:absolute;z-index:2;inset:-2px;border-radius:50%;box-shadow:inset 0 0 18px rgba(var(--glow),.42);pointer-events:none}
.planet-atmos{position:absolute;z-index:3;inset:-16%;border-radius:50%;background:radial-gradient(circle,transparent 55%,rgba(var(--glow),.18) 70%,transparent 79%);pointer-events:none}
.planet-ring{position:absolute;z-index:1;left:50%;top:50%;width:196%;height:54%;margin:-27% 0 0 -98%;border:2px solid rgba(var(--glow),.36);border-radius:50%;transform:rotate(-19deg);box-shadow:0 0 16px rgba(var(--glow),.18);pointer-events:none}
.planet-name{position:relative;color:#efe4db;font-size:.52rem;font-weight:700;letter-spacing:.19em;text-align:center;white-space:nowrap;text-shadow:0 2px 10px #000,0 0 22px rgba(0,0,0,.95);transition:color .3s,opacity .3s}
.planet-name i{display:block;margin-bottom:3px;color:var(--ember);font-size:.43rem;font-style:normal;letter-spacing:.24em;opacity:.75}

.planet:hover .planet-body,.planet:focus-visible .planet-body,.planet.is-active .planet-body{transform:scale(1.16);box-shadow:0 0 0 1px rgba(var(--glow),.85),0 0 46px rgba(var(--glow),.55),0 20px 48px rgba(0,0,0,.7)}
.planet:hover .planet-body img,.planet:focus-visible .planet-body img,.planet.is-active .planet-body img{filter:saturate(1.06) contrast(1.1) brightness(.97);transform:scale(1.07)}
.planet:hover .planet-name,.planet:focus-visible .planet-name,.planet.is-active .planet-name{color:#fff}
.planet:focus-visible .planet-body{outline:2px solid rgba(255,140,70,.9);outline-offset:6px}
.planet.was-entered .planet-name i:after{content:" // VISITED";opacity:.8}

/* flight deck controls */
.deck{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:900px;margin:16px auto 0}
.deck-group{display:flex;align-items:center;gap:7px;padding:8px 11px;border:1px solid rgba(224,207,196,.13);background:linear-gradient(145deg,rgba(19,11,8,.92),rgba(5,3,2,.95))}
.deck-group>span{color:#6f5b52;font-size:.46rem;font-weight:800;letter-spacing:.2em}
.deck button{padding:7px 11px;border:1px solid rgba(224,207,196,.14);background:rgba(11,6,5,.9);color:#b3a49a;font-family:inherit;font-size:.5rem;font-weight:800;letter-spacing:.14em;cursor:pointer;transition:border-color .22s,color .22s,box-shadow .22s}
.deck button:hover{border-color:rgba(255,106,25,.5);color:#f0e5dd}
.deck button[aria-pressed=true]{border-color:#ff5f22;color:#fff;box-shadow:0 0 16px rgba(255,70,20,.22)}
.deck-tip{width:100%;margin:2px 0 0;text-align:center;color:#7d6b62;font-size:.53rem;letter-spacing:.13em}

.galaxy-readout{position:relative;z-index:6;max-width:620px;margin:22px auto 0;padding:20px 24px 22px;border:1px solid rgba(224,207,196,.14);background:linear-gradient(145deg,rgba(20,11,8,.94),rgba(5,3,2,.96));box-shadow:0 22px 60px rgba(0,0,0,.55),inset 0 0 0 2px rgba(2,1,1,.6);clip-path:polygon(0 0,96% 0,100% 13%,100% 100%,4% 100%,0 87%)}
.galaxy-readout:before{content:"";position:absolute;left:11px;top:11px;width:5px;height:5px;border-radius:50%;background:#ed4e31;box-shadow:0 0 9px #f04a2a}
.galaxy-readout p:first-child{margin:0 0 9px 16px;color:#6f5b52;font-size:.5rem;font-weight:800;letter-spacing:.22em}
.galaxy-readout h2{margin:0 0 8px;font-family:ArchivoBlack,Archivo,sans-serif;font-size:clamp(1.3rem,3.4vw,2rem);line-height:.95;letter-spacing:-.03em;color:#f3e8e0}
.galaxy-readout .readout-copy{margin:0 0 14px;min-height:2.9em;color:#b3a49a;font-size:.78rem;line-height:1.6}
.galaxy-readout .readout-go{display:inline-flex;align-items:center;gap:11px;color:var(--ember);font-size:.58rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}
.galaxy-readout .readout-go[hidden]{display:none}
.galaxy-readout .readout-go i{width:34px;height:2px;background:linear-gradient(90deg,rgba(255,106,25,.15),var(--ember))}

.worlds-last{position:relative;z-index:4;max-width:700px;margin:34px auto 110px;padding:23px 28px;border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px;background:#090403}
.worlds-last[hidden]{display:none}
.worlds-last span{color:var(--ash);font-size:.59rem;letter-spacing:.22em}
.worlds-last a{color:var(--ember);font-size:.68rem;font-weight:700;letter-spacing:.16em}

footer{position:relative;z-index:4;display:flex;justify-content:space-between;gap:20px;padding:42px clamp(20px,5vw,70px) 100px;border-top:1px solid rgba(255,255,255,.07);color:var(--ash);font-size:.61rem;letter-spacing:.15em;text-transform:uppercase}
footer a{color:var(--bone)}
.worlds-page .thermal-weather-layer,.worlds-page .thermal-glass{display:none!important}

@keyframes carrierRun{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}
@keyframes faceRun{from{transform:rotateY(0)}to{transform:rotateY(-360deg)}}
@keyframes coreBreath{50%{transform:scale(1.09);opacity:.72}}
@keyframes worldSpin{to{transform:rotate(360deg)}}
@keyframes worldBreath{50%{transform:scale(1.05);opacity:.68}}
@keyframes worldPulse{50%{opacity:.25;transform:scale(.75)}}

.space.is-held .carrier,.space.is-held .face-a{animation-play-state:paused}

/* ---- phones: 3D drag fights page scroll, so the system flattens to a list ---- */
@media(max-width:820px){
  .worlds-galaxy{padding:22px 16px 10px}
  .space{width:100%;height:auto;min-height:0;perspective:none;touch-action:auto;cursor:default;overflow:visible}
  .stage3d{position:relative;left:auto;top:auto;width:auto;height:auto;transform:none!important;transform-style:flat;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:26px 14px;padding:20px 0 6px;place-items:start center}
  .galaxy-core{position:relative;left:auto;top:auto;transform:none!important;grid-column:1/-1;width:clamp(104px,32vw,142px);margin-bottom:32px}
  .plane{position:relative;display:contents;transform:none!important}
  .ring{display:none}
  .carrier,.carrier-out,.face-a,.face-i,.face-v{position:relative;left:auto;top:auto;transform:none!important;animation:none!important;transform-style:flat;display:block}
  .planet{position:relative;transform:none;justify-items:center}
  .planet-body{width:clamp(84px,25vw,116px)}
  .planet-name{font-size:.5rem;letter-spacing:.13em;white-space:normal;max-width:15ch;line-height:1.5}
  .deck{display:none}
  .galaxy-readout{margin-top:24px}
  .galaxy-readout .readout-copy{min-height:0}
  .worlds-last{margin:24px 16px 80px;align-items:flex-start;flex-direction:column}
  .worlds-last a{line-height:1.5}
  footer{padding-bottom:130px;flex-direction:column;line-height:1.7}
  .worlds-header{height:60px;padding:0 17px;display:flex}
  .worlds-header p,.worlds-header>a:last-child{display:none}
  .worlds-intro{height:88svh;min-height:610px;padding-top:90px}
  .worlds-intro:before{width:82vw}
  .worlds-intro:after{width:51vw}
  .worlds-intro h1{font-size:18vw}
  .worlds-intro h1 span{letter-spacing:.48em}
  .worlds-intro>p:nth-of-type(2){max-width:310px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .worlds-intro:before,.worlds-intro:after,.worlds-first i,.galaxy-core:before{animation:none}
  .carrier,.face-a{animation-play-state:paused}
  .planet-body,.planet-body img{transition:none}
}