@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');
:root{--gold:#e3c18a;--gold-bright:#f6d69e;--cream:#fff4df;--ink:#04060f;--glass:#070a17d9}
*{box-sizing:border-box}
html,body,#app,.app-shell{height:100%;width:100%;margin:0;overflow:hidden}
html{background:#02040d}
body{font-family:Montserrat,system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid #f7d38d;outline-offset:4px}
.phase,.cosmic-stage{position:absolute;inset:0;min-height:100%;min-height:100dvh;overflow:hidden}
/* Stage I: official identity preloader */
.preloader{display:grid;place-items:center;background:radial-gradient(circle at 50% 52%,#191420 0%,#090a15 36%,#000107 73%)}
.preloader-light{position:absolute;inset:0;opacity:.5;background:radial-gradient(circle at 49% 51%,#cb913219,transparent 38%)}
.preloader-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:28px;max-width:92vw}
.preloader-logo{width:min(480px,75vw);height:auto;object-fit:contain;filter:drop-shadow(0 0 30px #d7a35a27);animation:logo-breathe 2.1s ease-in-out infinite alternate}
.preloader-track{width:min(210px,56vw);height:1px;background:#e7c4893b;position:relative;overflow:hidden}
.preloader-progress{position:absolute;inset:0;width:36%;background:linear-gradient(90deg,transparent,#ffe2ad,transparent);animation:loading-sweep 1.45s ease-in-out infinite}
.preloader-hint{font:500 9px Montserrat,sans-serif;letter-spacing:.38em;color:#b7a98f}
/* Stage II: real supplied intro file */
.intro{background:#03040b}
.intro-video{position:absolute;width:100%;height:100%;inset:0;object-fit:cover}
.intro-shade{position:absolute;inset:0;background:linear-gradient(180deg,#02030a73 0%,transparent 24%,transparent 66%,#02030a9a 100%);pointer-events:none}
.intro-logo{position:absolute;left:clamp(20px,4vw,66px);top:clamp(20px,3.5vw,46px);width:clamp(150px,17vw,242px);height:auto;filter:drop-shadow(0 3px 18px black)}
.intro-controls{position:absolute;right:clamp(18px,4vw,64px);bottom:clamp(24px,5vh,52px);display:flex;gap:10px;z-index:2}
.intro-button{background:#070a17c7;color:#efe2d2;border:1px solid #c9ab7775;border-radius:100px;padding:13px 19px;font-size:10px;letter-spacing:.18em;backdrop-filter:blur(8px)}
.intro-button.primary{border-color:#d8ad6d;color:var(--gold-bright)}
.intro-button:hover{background:#4e381c77}
.intro-play{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);min-width:220px;border:1px solid var(--gold);color:var(--gold);background:#0b0b18e8;padding:17px 21px;border-radius:80px;font-size:12px;letter-spacing:.12em}
.intro-failed{position:absolute;left:50%;top:57%;transform:translateX(-50%);color:#e7d8c1;background:#030714cf;padding:15px;max-width:90vw;text-align:center;font-size:12px}
/* Stage III: real WebGL universe */
.cosmic-stage{background:radial-gradient(circle,#0c1021 0%,#02030b 76%);isolation:isolate}
.cosmic-bg{position:absolute;inset:-3%;z-index:0;background-image:url('../assets/cosmic-nebula.webp');background-size:cover;background-position:center;transform:scale(1.07);animation:nebula-move 90s ease-in-out infinite alternate;filter:saturate(1.18) brightness(.89)}
.cosmic-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#03071324 0%,#03071310 26%,#01030a38 90%)}
.cosmic-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#02030dcc 0%,transparent 15%,transparent 75%,#02030ad2 100%),radial-gradient(ellipse at 50% 47%,transparent 35%,#03020c55 100%)}
.cosmic-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:3;touch-action:none;cursor:grab}
.cosmic-canvas:active{cursor:grabbing}
.meteor-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.sun-aura{position:absolute;z-index:2;left:50%;top:50%;width:460px;height:460px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffefb955 1%,#ffcd4766 14%,#ff8d2536 26%,#ff540b22 39%,#ff640a0e 58%,transparent 76%);filter:blur(15px);mix-blend-mode:screen;animation:sun-breathe 6s ease-in-out infinite alternate}
.sun-halo{position:absolute;z-index:5;left:50%;top:50%;width:250px;height:250px;border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);background:radial-gradient(circle,transparent 40%,#ffbd2d0e 54%,#ff9d0916 70%,transparent 76%);box-shadow:0 0 130px 12px #fc851017,0 0 50px #ffb73d14;mix-blend-mode:screen}
/* Top navigation */
.site-header{position:absolute;z-index:40;top:0;left:0;right:0;padding:clamp(20px,3vw,42px) clamp(25px,4vw,66px);display:flex;align-items:flex-start;justify-content:space-between;gap:20px;pointer-events:none}
.site-header>*{pointer-events:auto}
.header-logo{width:clamp(176px,17vw,244px);height:auto;display:block;filter:drop-shadow(0 3px 16px #000)}
.header-actions{display:flex;align-items:center;gap:22px}
.header-dash{width:1px;height:22px;background:linear-gradient(transparent,#bc965e,transparent)}
.cosmos-menu-button{display:flex;align-items:center;gap:28px;justify-content:space-between;background:#05050f99;border:1px solid #ddb877ce;padding:12px 24px 13px 27px;color:#f2dcc0;border-radius:100px;font:500 21px/1 'Cormorant Garamond',Georgia,serif;box-shadow:0 0 19px #d4a1530d,inset 0 0 18px #c8923012;backdrop-filter:blur(12px);transition:border-color .2s,background .2s;min-width:235px}
.cosmos-menu-button:hover{border-color:#f4d6a7;background:#151018d9}
.chevron{font-size:24px;line-height:.5;font-family:Arial,sans-serif;color:var(--gold)}
.menu-icon-button{border:0;background:transparent;width:28px;height:40px;padding:9px 0;display:flex;flex-direction:column;align-items:flex-end;justify-content:space-around}
.menu-icon-button span{display:block;height:1px;width:25px;background:#f3dbaa;box-shadow:0 0 6px #dfa64c40}
.menu-icon-button span:nth-child(2){width:17px}
/* Large labels follow moving projected planets */
.planet-hotspot{position:absolute;z-index:12;display:block;transform:translate(-50%,-50%);border-radius:50%;outline-offset:7px;transition:opacity .14s;touch-action:manipulation}
.planet-hotspot.inactive{display:none}
.planet-target{position:absolute;inset:0;border-radius:50%;border:1px solid transparent;transition:background .25s,box-shadow .25s}
.planet-hotspot:hover .planet-target,.planet-hotspot:focus-visible .planet-target{border-color:#ffe4aa8f;background:#ffe8ba0f;box-shadow:0 0 19px #ffe6aa28,inset 0 0 15px #ffe6aa18}
.planet-label{position:absolute;left:50%;top:calc(50% + var(--planet-radius) + 7px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap;gap:2px;text-shadow:0 3px 10px #000,0 0 12px #000,0 0 25px #000;pointer-events:auto}
.planet-label:before{content:'';width:1px;height:11px;background:linear-gradient(#b69b7144,#ffdaa1d9);margin-bottom:3px}
.planet-label strong{font:500 clamp(17px,1.28vw,23px)/1.02 'Cormorant Garamond',Georgia,serif;color:#ffe0a1;letter-spacing:.012em;text-shadow:0 0 8px #000,0 2px 9px #000}
.planet-label small{font:500 8px/1.6 Montserrat,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#f0e6d7;opacity:.85}
.planet-hotspot:hover .planet-label strong{color:#fff5ce;text-shadow:0 0 15px #ffc77680}
/* Bottom copy and interaction controls */
.bottom-left{position:absolute;z-index:20;bottom:clamp(34px,6vh,64px);left:clamp(25px,4vw,66px);display:flex;align-items:center;gap:22px;pointer-events:none;max-width:50vw}
.compass-icon{color:#e3b55f;line-height:1;font:normal 37px Georgia,serif;text-shadow:0 0 17px #f5b84969}
.bottom-title{font:italic 500 22px 'Cormorant Garamond',Georgia,serif;color:#ebcf9b;white-space:nowrap}
.bottom-help{font-size:8px;letter-spacing:.23em;margin-top:8px;color:#aaacc2}
.scene-controls{position:absolute;z-index:21;right:clamp(27px,4vw,66px);bottom:clamp(100px,14vh,140px);display:flex;flex-direction:column;gap:9px}
.circle-control{background:#050716b9;border:1px solid #be985c79;color:#f5d59c;width:37px;height:37px;border-radius:50%;font:400 19px Georgia,serif;display:grid;place-items:center;backdrop-filter:blur(8px);transition:background .2s,transform .2s}
.circle-control:hover{background:#372315b5;transform:scale(1.07)}
.site-footer{position:absolute;z-index:21;bottom:clamp(23px,3.4vh,38px);right:clamp(25px,4vw,66px);display:flex;gap:28px;align-items:center;color:#ddd0c5;font:500 9px Montserrat,sans-serif;letter-spacing:.17em;text-align:right;text-shadow:0 2px 10px #000}
.socials{display:flex;align-items:center;gap:16px;color:#f3c982}
.socials a{font-size:19px;line-height:1}
.mobile-world-nav{display:none}
/* Navigation: category links remain functional when WebGL is unavailable */
.menu-layer{position:fixed;inset:0;z-index:70}
.menu-backdrop{position:absolute;inset:0;background:#02030b82;backdrop-filter:blur(4px)}
.menu-panel{position:absolute;right:clamp(15px,4vw,66px);top:clamp(78px,8vw,120px);width:min(425px,calc(100vw - 30px));max-height:min(76dvh,700px);overflow-y:auto;background:linear-gradient(160deg,#101321f5,#050710f8);border:1px solid #bd986b78;box-shadow:0 24px 100px #000c,0 0 40px #7f4f1d19;padding:28px 31px 22px;animation:menu-slide .22s ease-out}
.menu-top{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#bfa880;font-size:9px;letter-spacing:.22em}
.menu-close{font:400 31px/1 Georgia,serif;background:none;border:0;color:#e7d2b2;padding:0}
.menu-panel h2{font:500 40px/1.1 'Cormorant Garamond',Georgia,serif;margin:18px 0 4px;color:var(--cream)}
.menu-subline{font:italic 17px 'Cormorant Garamond',Georgia,serif;margin:0 0 20px;color:#a7958a}
.menu-row{display:flex;align-items:center;gap:16px;padding:12px 1px;border-top:1px solid #b39b7842;transition:background .2s,color .2s}
.menu-row:hover{background:#ffdc9211;color:#ffdda1}
.menu-count{font-size:9px;color:#a99070;letter-spacing:.1em;min-width:20px}
.menu-planet-dot{width:28px;height:28px;min-width:28px;border-radius:50%;box-shadow:inset -8px -5px 9px #030713aa,0 0 14px #ffe7c021}
.menu-name{display:flex;flex:1;flex-direction:column;gap:2px;font:500 19px/1 'Cormorant Garamond',Georgia,serif;color:#f6e4cd}
.menu-name small{font:500 9px Montserrat,sans-serif;letter-spacing:.17em;text-transform:uppercase;color:#9a97a7}
.menu-arrow{font-size:19px;color:#d9b579}
.menu-end{margin-top:17px;padding-top:17px;border-top:1px solid #aa8f5d52;font-size:9px;letter-spacing:.22em;color:#928b91}
.webgl-error{position:absolute;z-index:35;left:50%;top:42%;transform:translate(-50%,-50%);max-width:390px;width:90%;padding:29px;text-align:center;background:#0a0d18ea;border:1px solid #aa875c}
.webgl-error h2{color:#f4e3c3;font:30px 'Cormorant Garamond',Georgia,serif;margin:0 0 8px}
.webgl-error p{font-size:13px;line-height:1.6;color:#c5b8a3}
@keyframes loading-sweep{from{transform:translateX(-110%)}to{transform:translateX(390%)}}
@keyframes logo-breathe{to{opacity:.82;filter:drop-shadow(0 0 25px #e4aa6b66)}}
@keyframes nebula-move{to{transform:scale(1.17) translate(-1%,.6%)}}
@keyframes sun-breathe{to{opacity:.76;filter:blur(21px)}}
@keyframes menu-slide{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
/* Mobile: cinematic planet focus + an always-visible, usable 9-world explorer */
@media(max-width:760px){
 .cosmic-bg{inset:-3%;background-position:46% center;filter:saturate(1.17) brightness(.81)}
 .cosmic-vignette{background:linear-gradient(180deg,#02030af0,transparent 22%,transparent 62%,#010209ec 100%),radial-gradient(ellipse at 50% 44%,transparent 30%,#02030a53 100%)}
 .site-header{padding:21px 17px;align-items:flex-start;gap:8px}
 .header-logo{width:clamp(131px,34vw,172px)}
 .header-actions{gap:9px;align-items:center}
 .header-dash{display:none}
 .cosmos-menu-button{font-size:17px;padding:11px 13px 11px 16px;min-width:auto;gap:12px;white-space:nowrap}
 .chevron{font-size:19px}
 .menu-icon-button{width:24px;height:35px;padding:7px 0}
 .menu-icon-button span{width:20px}.menu-icon-button span:nth-child(2){width:13px}
 .planet-label{display:none}
 .planet-hotspot.is-selected .planet-label{display:flex;top:calc(50% + var(--planet-radius) + 3px)}
 .planet-hotspot.is-selected .planet-label strong{font-size:19px}
 .planet-hotspot.is-selected .planet-label small{font-size:8px}
 .bottom-left{left:18px;bottom:calc(236px + env(safe-area-inset-bottom));gap:10px;max-width:calc(100% - 95px)}
 .compass-icon{font-size:27px}
 .bottom-title{font-size:17px;white-space:normal;max-width:265px;line-height:1.15}
 .bottom-help{font-size:7px;letter-spacing:.04em;line-height:1.5;margin-top:5px}
 .scene-controls{right:17px;bottom:calc(243px + env(safe-area-inset-bottom));gap:6px}
 .circle-control{width:31px;height:31px;font-size:16px}
 .mobile-world-nav{display:block;position:absolute;z-index:25;left:0;right:0;bottom:calc(43px + env(safe-area-inset-bottom));padding:14px 16px 13px;background:linear-gradient(180deg,#030612c8,#070a18f2);border-top:1px solid #d8af7255;backdrop-filter:blur(18px);box-shadow:0 -11px 25px #0007}
 .mobile-world-heading{font:500 10px Montserrat,sans-serif;letter-spacing:.19em;color:#efcf94;display:flex;justify-content:space-between;align-items:center;gap:8px}
 .mobile-world-heading span{font-size:8px;letter-spacing:.05em;color:#9997a6}
 .world-pills{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:14px 2px 13px;scrollbar-width:thin;scrollbar-color:#8e6e42 #10121e}
 .world-pill{display:inline-flex;align-items:center;gap:7px;flex-shrink:0;min-width:max-content;padding:7px 12px;border-radius:40px;background:#131425bf;border:1px solid #bd9a655c;color:#e1d9d4;font:500 10px Montserrat,sans-serif;letter-spacing:.025em}
 .world-pill.selected{border-color:#ffc978;background:#392817ac;color:#ffdb9c}
 .world-dot{width:17px;height:17px;border-radius:50%;box-shadow:inset -4px -3px 6px #03030b8c}
 .world-enter{display:inline-flex;align-items:center;justify-content:center;min-height:32px;font-size:10px;letter-spacing:.14em;border:1px solid #eac28a8c;background:#b68d401a;color:#ffe1b1;padding:8px 13px;border-radius:50px;max-width:75%}
 .world-overview{font-size:9px;letter-spacing:.12em;float:right;border:0;background:transparent;color:#bba98f;padding:9px 1px 9px 12px}
 .site-footer{left:16px;right:16px;bottom:calc(13px + env(safe-area-inset-bottom));text-align:center;font-size:8px;line-height:1.5;justify-content:center;letter-spacing:.09em}
 .socials{gap:10px}.socials a{font-size:16px}
 .menu-panel{top:80px;right:15px;max-height:calc(100dvh - 100px);padding:21px 22px}
 .menu-panel h2{font-size:34px}
 .menu-row{padding:9px 1px}
 .menu-planet-dot{width:23px;height:23px;min-width:23px}
 .intro-logo{left:20px;top:25px;width:145px}
 .intro-video{object-position:center}
 .intro-controls{left:17px;right:17px;bottom:25px;justify-content:space-between;gap:8px}
 .intro-button{font-size:9px;letter-spacing:.07em;padding:12px 12px}
}
@media(max-width:365px){.site-header{padding:18px 12px}.header-logo{width:115px}.cosmos-menu-button{font-size:15px;padding:9px 10px}.header-actions{gap:6px}.menu-icon-button{width:20px}.menu-icon-button span{width:17px}.bottom-left{bottom:calc(229px + env(safe-area-inset-bottom))}.bottom-title{font-size:15px}.mobile-world-nav{padding:13px 12px}.site-footer{font-size:7px}}
@media(max-height:665px) and (max-width:760px){.mobile-world-nav{padding-top:9px;padding-bottom:9px;bottom:calc(37px + env(safe-area-inset-bottom))}.world-pills{padding:8px 2px}.bottom-left{bottom:calc(188px + env(safe-area-inset-bottom))}.scene-controls{bottom:calc(190px + env(safe-area-inset-bottom))}.site-footer{bottom:calc(8px + env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.preloader-logo,.preloader-progress,.cosmic-bg,.sun-aura{animation:none}}