:root{
  --bg:#02050d;
  --panel:rgba(5,12,25,.62);
  --panel2:rgba(10,20,38,.74);
  --line:rgba(147,231,255,.22);
  --cyan:#00d5ff;
  --cyan2:#7df5ff;
  --orange:#ff9b42;
  --gold:#ffd36f;
  --text:#eff8ff;
  --muted:#a9bbd8;
  --danger:#ff4d6d;
  --green:#36f09f;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:Inter,"JetBrains Mono",system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{touch-action:none;overscroll-behavior:none}
button,a,input{font:inherit}
.cs-root{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 70% 10%,rgba(0,213,255,.16),transparent 28%),linear-gradient(180deg,#02050d,#06101d 48%,#02040a);isolation:isolate}
.cs-root:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 22%,rgba(0,0,0,.42)),repeating-linear-gradient(0deg,rgba(255,255,255,.016) 0 1px,transparent 1px 7px),radial-gradient(ellipse at 50% 82%,rgba(0,213,255,.12),transparent 42%);mix-blend-mode:screen}
.cs-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:block;background:transparent}

/* World fallback behind the canvas (shows even if Pixi fails) */
.cs-fallback-world{position:absolute;inset:0;z-index:1;overflow:hidden}
.cs-fallback-world .far,.cs-fallback-world .mid,.cs-fallback-world .floor,.cs-fallback-world .lander,.cs-fallback-world .avatar,.cs-fallback-world .drone{position:absolute;display:block}
.cs-fallback-world .far{inset:-8% -4% 38%;background:url('/assets/environment/sky_spires_far.png') center/cover no-repeat;opacity:.42;animation:csDrift 24s ease-in-out infinite alternate}
.cs-fallback-world .mid{inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.58)),url('/assets/environment/command_hangar_mid.png') center/cover no-repeat;opacity:.96}
.cs-fallback-world .floor{left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.72)),url('/assets/environment/hangar_floor_front.png') center bottom/cover no-repeat}
.cs-fallback-world .lander{right:5%;bottom:18%;width:min(460px,40vw);aspect-ratio:1.6;background:url('/assets/lander/sovereign_lander_clean.png') center/contain no-repeat;filter:drop-shadow(0 28px 44px rgba(0,0,0,.7)) drop-shadow(0 0 36px rgba(0,213,255,.2));animation:csHover 4s ease-in-out infinite}
.cs-fallback-world .avatar{left:46%;bottom:13%;width:120px;height:160px;background:url('/assets/character/rendered/avatar_body_clean.png') center/contain no-repeat;filter:drop-shadow(0 22px 18px rgba(0,0,0,.68)) drop-shadow(0 0 30px rgba(0,213,255,.5));animation:csBob 1.2s ease-in-out infinite}
.cs-fallback-world .avatar:after{content:"";position:absolute;left:47%;top:54%;width:20px;height:20px;border-radius:50%;background:#dfffff;box-shadow:0 0 16px #fff,0 0 34px var(--cyan),0 0 70px rgba(0,213,255,.75);animation:csPulse 1s ease-in-out infinite}
.cs-fallback-world .drone{left:56%;bottom:39%;width:84px;height:62px;background:url('/assets/character/rendered/tactical_drone_clean.png') center/contain no-repeat;filter:drop-shadow(0 0 20px rgba(0,213,255,.7));animation:csDrone 3.2s ease-in-out infinite}

@keyframes csDrift{to{transform:translateX(-28px) scale(1.03)}}
@keyframes csHover{50%{transform:translateY(-12px)}}
@keyframes csBob{50%{transform:translateY(-7px)}}
@keyframes csPulse{50%{transform:scale(1.25);opacity:.72}}
@keyframes csDrone{50%{transform:translate(20px,-16px)}}

.cs-topbar{position:absolute;left:18px;right:18px;top:14px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px;border:1px solid var(--line);border-radius:24px;background:rgba(3,8,18,.58);backdrop-filter:blur(18px) saturate(1.22);box-shadow:0 18px 70px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.08)}
.cs-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:950;letter-spacing:-.04em;white-space:nowrap;min-width:230px}
.cs-brand img{width:42px;height:42px;filter:drop-shadow(0 0 18px rgba(0,213,255,.45))}
.cs-brand small{color:var(--muted);font-weight:750;margin-left:4px}
.cs-nav{display:flex;align-items:center;gap:6px}
.cs-navbtn{border:1px solid rgba(255,255,255,.12);color:var(--text);background:rgba(255,255,255,.055);border-radius:999px;padding:9px 12px;cursor:pointer;font-weight:850}
.cs-top-actions{display:flex;gap:10px;align-items:center}
.cs-btn{border:1px solid rgba(255,255,255,.12);color:var(--text);background:rgba(255,255,255,.055);border-radius:999px;padding:9px 12px;cursor:pointer;font-weight:900}
.cs-btn-primary{background:linear-gradient(135deg,var(--cyan),#8af6ff)!important;color:#001725!important;border-color:transparent;box-shadow:0 0 28px rgba(0,213,255,.28),inset 0 1px rgba(255,255,255,.28)}
.cs-btn-ghost{background:transparent;color:#bfefff}
.cs-hud{position:absolute;z-index:15;border:1px solid var(--line);background:var(--panel);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 24px 90px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.08);border-radius:24px;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease}
.cs-hud:before,.cs-panel:before,.cs-access-card:before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),var(--orange),transparent);opacity:.72}
.cs-hud-left{left:22px;bottom:24px;width:min(340px,calc(100% - 44px));padding:16px;display:grid;gap:12px}
.cs-chip{display:flex;align-items:center;justify-content:space-between;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:.75rem}
.cs-chip b{color:#fff;font-size:1rem;text-transform:none;letter-spacing:0;text-shadow:0 0 18px rgba(0,213,255,.5)}
.cs-meter span{display:block;color:#aebfdb;font-size:.78rem;font-weight:850;margin-bottom:7px}
.cs-meter i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.09)}
.cs-meter b{display:block;height:100%;width:50%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),#e7ffff);box-shadow:0 0 18px rgba(0,213,255,.6)}
.cs-meter b.o{width:86%;background:linear-gradient(90deg,var(--orange),var(--gold));box-shadow:0 0 18px rgba(255,155,66,.5)}
.cs-prompt{padding:12px;border-radius:16px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.08);color:#d8e7ff;font-weight:800}

.cs-panel{position:absolute;right:22px;top:98px;z-index:15;width:min(380px,calc(100% - 44px));max-height:calc(100vh - 158px);padding:16px;display:none;border:1px solid var(--line);background:var(--panel2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 24px 90px rgba(0,0,0,.54),inset 0 1px rgba(255,255,255,.08);border-radius:24px;transform:perspective(900px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease}
.cs-panel.active{display:block}
.cs-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.cs-panel-head b{text-transform:uppercase;letter-spacing:.09em}
.cs-x{width:34px;height:34px;padding:0;display:grid;place-items:center}
.cs-panel-body{display:grid;gap:10px;max-height:calc(100vh - 230px);overflow:auto;padding-right:4px}
.cs-card{padding:13px;border-radius:17px;background:linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.09);transform:perspective(700px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease,border-color .18s ease}
.cs-card:hover{border-color:rgba(0,213,255,.32)}
.cs-card b{display:block;color:#fff;margin-bottom:4px}
.cs-card span,.cs-card small{color:var(--muted);line-height:1.45}
.cs-card button{margin-top:10px;border:1px solid rgba(0,213,255,.28);background:rgba(0,213,255,.10);color:#dffbff;border-radius:12px;padding:8px 10px;font-weight:850;cursor:pointer}

.cs-controls{position:absolute;z-index:16;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:8px;padding:8px;border:1px solid var(--line);border-radius:999px;background:rgba(3,8,18,.58);backdrop-filter:blur(18px);box-shadow:0 22px 80px rgba(0,0,0,.54)}

.cs-loading{position:absolute;inset:0;z-index:60;display:grid;place-items:center;background:radial-gradient(circle at 50% 48%,rgba(0,213,255,.18),transparent 34%),rgba(0,0,0,.72);backdrop-filter:blur(14px);transition:opacity .5s ease,visibility .5s ease}
.cs-loading.done{opacity:0;visibility:hidden;pointer-events:none}
.cs-loading-card{width:min(440px,90vw);padding:28px;border-radius:30px;border:1px solid rgba(147,231,255,.24);background:rgba(5,12,25,.78);box-shadow:0 36px 120px rgba(0,0,0,.7),inset 0 1px rgba(255,255,255,.08);text-align:center}
.cs-loading-card img{width:72px;height:72px;filter:drop-shadow(0 0 24px rgba(0,213,255,.55))}
.cs-loading-card b{display:block;font-size:1.3rem;margin:14px 0 7px}.cs-loading-card span{display:block;color:var(--muted);line-height:1.5}
.cs-loading-card i{display:block;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:18px}.cs-loading-card em{display:block;height:100%;width:48%;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--orange));animation:loadSweep 1.1s ease-in-out infinite}
@keyframes loadSweep{50%{transform:translateX(110%);width:68%}}

.cs-launcher{position:absolute;inset:0;z-index:35;display:none;align-items:flex-start;justify-content:flex-end;padding:92px 22px 0;background:rgba(0,0,0,.18);pointer-events:none}
.cs-launcher.active{display:flex}
.cs-launcher-card{pointer-events:auto;width:min(310px,90vw);display:grid;gap:10px;padding:18px;border-radius:24px;border:1px solid rgba(147,231,255,.24);background:rgba(5,12,25,.78);backdrop-filter:blur(18px);box-shadow:0 30px 100px rgba(0,0,0,.58);transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease}
.cs-launcher-card strong{text-transform:uppercase;letter-spacing:.12em}.cs-launcher-card button{border:1px solid rgba(0,213,255,.22);background:rgba(0,213,255,.09);color:#eaffff;border-radius:14px;padding:10px 12px;font-weight:900;cursor:pointer;text-align:left}
.cs-launcher-card label{display:flex;gap:10px;align-items:center;color:#d9e9ff;font-weight:800}.cs-launcher-card small{color:var(--muted)}
.cs-joystick{position:absolute;z-index:32;width:112px;height:112px;margin:-56px 0 0 -56px;border-radius:50%;display:none;border:1px solid rgba(0,213,255,.28);background:rgba(0,0,0,.25);backdrop-filter:blur(10px);pointer-events:none}
.cs-joystick.active{display:block}.cs-joystick span{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle,#eaffff,#00d5ff);box-shadow:0 0 25px rgba(0,213,255,.65)}

.cs-access{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(0,213,255,.14),transparent 34%),rgba(0,0,0,.45);backdrop-filter:blur(10px)}
.cs-access.hidden{display:none}
.cs-access-card{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:0;width:min(980px,94vw);overflow:hidden;border-radius:34px;border:1px solid rgba(255,255,255,.14);background:rgba(5,12,25,.74);box-shadow:0 40px 160px rgba(0,0,0,.72)}
.cs-access-art{min-height:430px;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.52)),url('/assets/lander/sovereign_lander_clean.png') center/78% no-repeat, url('/assets/environment/sky_spires_far.png') center/cover no-repeat}
.cs-access-form{padding:34px;display:grid;gap:11px;align-content:center}
.cs-access-form h2{font-size:clamp(2.4rem,5vw,4.6rem);line-height:.86;letter-spacing:-.06em;margin:0;background:linear-gradient(90deg,#fff,var(--cyan2),var(--orange));-webkit-background-clip:text;background-clip:text;color:transparent}
.cs-access-form p{color:#d4e5ff;margin:0 0 6px;line-height:1.55}
.cs-access-form label{font-weight:900;color:#fff;margin-top:6px}
.cs-row{display:flex;gap:10px;align-items:center}
.cs-row input{flex:1;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(0,0,0,.25);color:#fff;padding:13px 14px}
.cs-access-form small{color:var(--muted)}

.cs-cinematic{position:absolute;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:#000;overflow:hidden}
.cs-cinematic[hidden]{display:none!important}
.cs-cinematic .scan{position:absolute;inset:-20%;background:linear-gradient(180deg,transparent,rgba(0,213,255,.18),transparent),url('/assets/lander/sovereign_lander_clean.png') center/48% no-repeat;filter:drop-shadow(0 0 46px rgba(0,213,255,.36));animation:csDescend 3.6s ease-in-out forwards}
.cs-cinematic h2,.cs-cinematic p{position:relative;z-index:2;text-shadow:0 0 32px rgba(0,213,255,.55)}
.cs-cinematic h2{font-size:clamp(2.8rem,7vw,7rem);letter-spacing:-.07em;margin:0}
.cs-cinematic p{margin-top:120px;color:#d8e9ff}

@keyframes csDescend{0%{transform:translateY(-36%) scale(1.8);opacity:0}20%{opacity:1}72%{transform:translateY(8%) scale(1)}100%{transform:translateY(0) scale(1);opacity:.22}}
@media(max-width:980px){
  .cs-topbar{left:10px;right:10px;top:10px}
  .cs-nav{display:none}
  .cs-panel{left:14px;right:14px;top:auto;bottom:92px;width:auto;max-height:42vh}
  .cs-hud-left{display:none}
  .cs-controls{left:12px;right:12px;bottom:12px;transform:none;overflow:auto;justify-content:flex-start}
  .cs-controls .cs-btn{white-space:nowrap}
  .cs-access-card{grid-template-columns:1fr}
  .cs-access-art{min-height:260px}
}
body.low-graphics .cs-root:after{display:none}
body.low-graphics .cs-fallback-world .far,body.low-graphics .cs-fallback-world .lander,body.low-graphics .cs-fallback-world .drone{animation:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}