:root{color-scheme:dark;--ink:#e9efff;--muted:#8c9ab7;--pink:#ff69c7;--blue:#64e8ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:#030510;color:var(--ink);font-family:'Space Grotesk','Kanit',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}#space{position:fixed;inset:0;width:100%;height:100%;z-index:-3}.veil{position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 65% 55% at 50% 54%,transparent 35%,#030510c4 100%),linear-gradient(135deg,#08112b35,transparent 50%,#18092650)}.grain{position:fixed;inset:0;pointer-events:none;opacity:.15;z-index:9;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E")}
header{width:min(1440px,100%);margin:auto;padding:30px clamp(24px,5vw,80px);display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:5}.brand{font-size:21px;letter-spacing:-1.2px;font-weight:700}.brand span{color:var(--pink)}.head-right{display:flex;align-items:center;gap:30px;font-size:10px;font-weight:700;letter-spacing:2px;color:#aebbd7}.live{display:flex;align-items:center;gap:9px}.live:before{content:'';width:7px;height:7px;border-radius:50%;background:#9bffcf;box-shadow:0 0 15px #9bffcf}.outline{border:1px solid #8da5c94b;padding:12px 18px;border-radius:100px;transition:.3s}.outline:hover{border-color:#d5e2ff;background:#ffffff11}
main{min-height:calc(100vh - 100px);max-width:1500px;margin:auto;padding:15px 24px 40px;position:relative;display:flex;flex-direction:column;align-items:center}.eyebrow{margin:26px 0 14px;letter-spacing:5px;text-transform:uppercase;font-size:10px;color:#93a4cf;font-weight:700}.headline{text-align:center;position:relative;z-index:3}.headline h1{font-size:clamp(46px,6.3vw,100px);font-weight:600;letter-spacing:-5px;line-height:1.1;margin:0;text-shadow:0 0 80px #72a7fc3c}.headline h1 em{font-style:normal;background:linear-gradient(95deg,#a5daff 10%,#ff92d8 92%);background-clip:text;-webkit-text-fill-color:transparent}.subtitle{font-family:'Kanit',sans-serif;font-weight:300;color:#9baac7;font-size:clamp(13px,1.4vw,17px);margin:15px 0 0}.scene{position:relative;width:min(1250px,100%);flex:1;min-height:460px;display:flex;justify-content:space-around;align-items:center;gap:10px;isolation:isolate}.scene:before{content:'';position:absolute;left:10%;right:10%;top:50%;height:1px;background:linear-gradient(90deg,transparent,#91a7ff3d,transparent);transform:rotate(-10deg);z-index:-1}.orbit{width:460px;height:320px;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-20deg);border-radius:50%;border:1px solid #b3c3ff1a;box-shadow:0 0 1px #b3c3ff40;pointer-events:none}.orbit.two{width:min(810px,75vw);height:420px;transform:translate(-50%,-50%) rotate(15deg);border-color:#bacbff10}.center-star{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:5px;height:5px;background:white;border-radius:50%;box-shadow:0 0 18px 6px #cbdeff,0 0 110px 35px #607aff70;pointer-events:none}.planet-link{--c:255,105,199;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;z-index:2;width:46%;min-height:405px;cursor:pointer;outline:none;transition:transform .5s cubic-bezier(.2,.8,.2,1)}.planet-link:hover,.planet-link:focus-visible{transform:translateY(-13px)}.planet-link.blue{--c:76,217,255}.planet-wrap{position:relative;width:clamp(170px,20vw,270px);aspect-ratio:1;display:grid;place-items:center;animation:bob 7s ease-in-out infinite}.blue .planet-wrap{animation-delay:-3.5s}.planet-wrap:before{content:'';position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(circle,rgba(var(--c),.2),transparent 64%);filter:blur(18px);transition:.45s}.planet-link:hover .planet-wrap:before{transform:scale(1.25);opacity:1.5}.planet{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;box-shadow:inset -28px -24px 55px #040516c7,inset 16px 12px 28px #ffffff48,0 0 48px rgba(var(--c),.35),0 0 95px rgba(var(--c),.15);transition:transform .65s,box-shadow .65s}.pink .planet{background:radial-gradient(circle at 28% 23%,#ffe3f4 0%,#fc89cb 16%,#ad4aab 39%,#5b2f80 68%,#120d38 95%)}.blue .planet{background:radial-gradient(circle at 27% 20%,#e2ffff 0%,#66e3fc 17%,#3e8cca 40%,#1a427f 65%,#070e32 97%)}.planet:after{content:'';position:absolute;inset:-20%;opacity:.72;background:repeating-linear-gradient(165deg,transparent 0 18px,#ffffff1a 22px 26px,transparent 31px 47px);filter:blur(7px);transform:rotate(-10deg)}.planet-link:hover .planet{transform:scale(1.08) rotate(8deg);box-shadow:inset -24px -24px 55px #030411bd,inset 16px 12px 28px #ffffff55,0 0 80px rgba(var(--c),.6),0 0 155px rgba(var(--c),.22)}.ring{position:absolute;width:140%;height:40%;border:clamp(9px,1.25vw,18px) solid rgba(var(--c),.65);border-left-color:rgba(var(--c),.2);border-right-color:#ffffffa8;border-radius:50%;transform:rotate(-26deg);box-shadow:0 0 16px rgba(var(--c),.5),inset 0 0 18px rgba(var(--c),.35);pointer-events:none}.blue .ring{transform:rotate(26deg);border-left-color:#fff9;border-right-color:rgba(var(--c),.15)}.planet-meta{text-align:center;margin-top:26px;position:relative}.count{font-size:10px;font-weight:700;color:rgba(var(--c),1);letter-spacing:4px}.planet-meta h2{font-family:'Kanit',sans-serif;font-size:clamp(23px,2.5vw,34px);font-weight:500;margin:8px 0 4px}.planet-meta p{color:#97a7c7;margin:0 0 14px;font-size:12px}.enter{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(var(--c),.55);border-radius:100px;padding:8px 17px;color:rgb(var(--c));font-size:11px;font-weight:700;letter-spacing:1px;transition:.3s}.planet-link:hover .enter{background:rgba(var(--c),.16);box-shadow:0 0 30px rgba(var(--c),.13)}.spark{position:absolute;border-radius:50%;background:white;box-shadow:0 0 10px 3px #a5c8ff;animation:blink 4s infinite}.s1{top:15%;left:18%;width:3px;height:3px}.s2{top:30%;right:21%;width:2px;height:2px;animation-delay:1s}.s3{bottom:24%;left:45%;width:3px;height:3px;animation-delay:2s}.bottom{width:min(1150px,100%);margin:auto;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #b3c3ff1e;padding:18px 8px;color:#7c8bab;font-size:10px;letter-spacing:1.5px;position:relative;z-index:3}.bottom strong{font-weight:500;color:#b0c2df}.hint{display:flex;gap:10px;align-items:center}.mouse{border:1px solid #7588ae;border-radius:12px;width:17px;height:25px;position:relative}.mouse:before{content:'';position:absolute;top:5px;left:7px;background:#c6d2ec;width:2px;height:5px;border-radius:2px;animation:scroll 1.8s infinite}.shoot{position:fixed;pointer-events:none;background:linear-gradient(90deg,transparent,#d4e7ff);width:130px;height:1px;transform:rotate(-25deg);animation:shoot 1.1s linear forwards;z-index:-1}.enter-flash{position:fixed;inset:0;background:radial-gradient(circle,#e8f9ff,#5647a0 40%,#080614 85%);z-index:100;pointer-events:none;opacity:0;transition:opacity .7s}.enter-flash.active{opacity:1}
@keyframes bob{0%,100%{transform:translateY(-8px)}50%{transform:translateY(13px)}}@keyframes blink{50%{opacity:.2;transform:scale(.6)}}@keyframes scroll{to{transform:translateY(7px);opacity:0}}@keyframes shoot{to{transform:translate(-380px,170px);opacity:0}}@media(max-width:730px){header{padding:22px}.head-right .live{display:none}main{padding:10px 14px 20px}.eyebrow{font-size:9px;letter-spacing:3px}.headline h1{letter-spacing:-2.5px}.scene{min-height:790px;flex-direction:column;gap:0;padding:10px 0 30px}.planet-link{width:100%;min-height:380px}.planet-wrap{width:180px}.planet-meta{margin-top:13px}.planet-meta h2{font-size:24px}.orbit{display:none}.bottom{font-size:9px}.bottom .hint{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Production additions: uploaded card art inside the planet, extra pages, no layout jump. */
.admin-entry{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #c4b5fd66;border-radius:100px;background:#aa8aff12;color:#ede5ff;font-family:'Kanit',sans-serif;font-size:13px;font-weight:400;letter-spacing:.2px;white-space:nowrap}
.admin-entry:hover,.admin-entry:focus-visible{background:#aa8aff26;border-color:#c4b5fd;box-shadow:0 0 22px #aa8aff26}
.admin-entry[hidden]{display:none}
.planet.photo{background-size:cover;background-position:center}.planet.photo:after{opacity:.35}
.planet-link{width:calc(92% / var(--worlds, 2))}.planet-link[hidden]{display:none}
.live time{font-variant-numeric:tabular-nums}
@media(max-width:730px){.scene{min-height:0}.planet-link{width:100%}}

.subtitle,.planet-meta p{text-wrap:balance}
@media(max-width:730px){.bottom{flex-direction:column;align-items:flex-start;gap:6px}}

@media(max-width:730px){.planet-meta{margin-top:34px}}
/* 3D canvas appears after its first textured frame. */
.planet-stage{position:absolute;inset:-35%;opacity:0;transition:opacity .8s;cursor:grab;touch-action:pan-y}
.planet-stage.ready{opacity:1}.planet-stage:active{cursor:grabbing}
.planet-stage canvas{display:block;width:100%;height:100%}
.planet-link.has-3d .planet-wrap:before{opacity:.6}
/* Genre tags under each world. */
.genres{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:330px;margin:0 auto 16px;padding:0}
.genres li{font-family:'Kanit',sans-serif;font-size:11px;font-weight:400;letter-spacing:.3px;color:rgba(var(--c),.95);background:rgba(var(--c),.08);border:1px solid rgba(var(--c),.28);border-radius:100px;padding:3px 11px;transition:.3s}
.planet-link:hover .genres li{background:rgba(var(--c),.16);border-color:rgba(var(--c),.5)}
.genres[hidden]{display:none}
.planet-meta{max-width:100%;overflow-wrap:anywhere}.genres li{max-width:100%}
.scene{overflow-x:clip}
/* Plain fallback while 3D loads; no painted mockup images. */
.planet-wrap>.planet[hidden],.planet-wrap>.ring[hidden]{display:none}

/* Loading first; the image is requested only if 3D fails. */
.planet-loading{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:'Kanit',sans-serif;font-size:12px;color:rgba(var(--c),.85)}
.planet-spinner{width:32px;height:32px;border:2px solid rgba(var(--c),.18);border-top-color:rgb(var(--c));border-radius:50%;animation:planet-load 1s linear infinite}
.planet-loading.failed .planet-spinner{display:none}
.planet-art{position:relative;width:150%;max-width:none;height:auto;margin:-25%;pointer-events:none;user-select:none;filter:drop-shadow(0 0 28px rgba(var(--c),.35))}
.planet-loading[hidden],.planet-art[hidden],.planet-stage[hidden]{display:none}
@keyframes planet-load{to{transform:rotate(360deg)}}

/* Added worlds: the drawn planet shows until the 3D surface renders, and again if WebGL fails. */
.planet-wrap:has(> .planet-stage.ready)>.planet,.planet-wrap:has(> .planet-stage.ready)>.ring{display:none}
.planet-wrap[data-planet-state="failed"]>.planet-stage{display:none}

/* Worlds shrink to fit one row (3D rings reach 35% past the planet); portal.js zooms the one near the mouse. */
@media(min-width:731px){.planet-wrap{width:clamp(110px,calc(44vw / var(--worlds, 2)),270px);scale:var(--zoom, 1);transition:scale .25s ease-out}
.planet-meta h2{font-size:clamp(20px,calc(7vw / var(--worlds, 2)),34px)}
.planet-link{justify-content:flex-start}}

/* Desktop solar layout (portal.js sets each world's place and size). */
@media(min-width:731px){.scene.solar{display:block;flex:none;min-height:0;overflow:visible}
.scene.solar>.orbit,.scene.solar>.center-star,.scene.solar:before{display:none}
.scene.solar .planet-link{position:absolute;width:260px;min-height:0;margin-left:-130px}
.solar-orbits{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;z-index:-1;pointer-events:none}
.solar-orbits ellipse{fill:none;stroke:#b9c8ff2e;stroke-width:2}
.solar-sun{position:absolute;width:420px;height:210px;margin:-210px 0 0 -210px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle 210px at 50% 100%,#fff3c4 0%,#ffb347 22%,#ff7a1a 38%,#ff5a0033 55%,transparent 100%);opacity:.85}}
/* Worlds without a ring (Admin "ทรงดาว") also drop the drawn ring shown before WebGL loads. */
.planet-link[data-shape="plain"] .ring,.planet-link[data-shape="moon"] .ring,.planet-link[data-shape="dust"] .ring{display:none}