@font-face{font-family:'Rajdhani';src:url('assets/rajdhani-bold.woff') format('woff');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Loot Terminal';src:url('assets/loot-terminal.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#0e0e0e;color:#eef7ff;font-synthesis:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;width:100%;min-height:100%;overflow-x:hidden}
body{overscroll-behavior:none}
button{font:inherit;-webkit-tap-highlight-color:transparent}
.universe{--header-height:56px;--logo-width:clamp(320px,30vw,420px);--hero-center:50%;--caption-gap:10px;height:100vh;height:100svh;min-height:320px;width:100%;position:relative;overflow:hidden;isolation:isolate;background:#0e0e0e;touch-action:pan-y}
.fallback-sky{position:absolute;inset:-28px;background:url('assets/galaxy-centered.png') center/cover no-repeat;image-rendering:pixelated;transition:opacity .15s linear}
#galaxy{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}
#flight{display:block;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.ready #galaxy{opacity:1}
.ready .fallback-sky{opacity:0}
.territories{position:absolute;inset:0;z-index:1;overflow:hidden}
.territory{position:absolute;border:0;padding:0;margin:0;outline:0;background:transparent;cursor:crosshair;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);-webkit-tap-highlight-color:transparent;transform-origin:0 0}
.territory:focus-visible{background:rgba(55,207,255,.025)}
.edge-shade{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,rgba(3,9,19,.32),transparent 16%,transparent 80%,rgba(3,9,19,.56))}
.brand-shade{position:absolute;pointer-events:none;z-index:2;left:50%;top:var(--hero-center);transform:translate(-50%,-50%);width:min(860px,80vw);height:min(710px,95vh);background:radial-gradient(ellipse,rgba(3,10,24,.76) 0%,rgba(3,10,24,.61) 30%,rgba(3,10,24,.24) 53%,transparent 72%)}
.brand{position:absolute;z-index:3;left:50%;top:calc(var(--header-height) + 12px);bottom:calc(var(--header-height) + 12px);height:max-content;margin-block:auto;transform:translateX(-50%);width:var(--logo-width);display:flex;flex-direction:column;align-items:center;text-align:center;user-select:none}
/* Equal top/bottom insets center the group; short screens clamp it below the header. */
/* Exclude the transparent top/bottom margins from the centered artwork group. */
.logo-wrap{width:100%;flex:none;padding:0;margin:calc(var(--logo-width)*-.11) 0 calc(var(--logo-width)*-.08);line-height:0;display:block}
.logo-button{position:relative;isolation:isolate;display:block;width:100%;border:0;padding:0;background:transparent;line-height:0;transform:scale(1);transition:transform .2s ease;touch-action:manipulation}
.logo-button::before{content:'';position:absolute;inset:10% 3% 5%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(68,194,255,.31) 0%,rgba(35,162,230,.18) 28%,rgba(11,110,189,.06) 53%,transparent 72%);filter:blur(12px);opacity:.72;transform:scale(.96);transition:opacity .22s ease,transform .22s ease}
@media(hover:hover){.logo-button:hover{transform:scale(1.025)}.logo-button:hover::before{opacity:1;transform:scale(1.1)}.logo-button:hover .logo{filter:brightness(1.055) drop-shadow(0 0 11px rgba(82,215,255,.38))}}
.logo-button:focus-visible::before{opacity:1;transform:scale(1.1)}
.logo-button:active{transform:scale(.99)}
.logo-button:focus-visible{outline:2px solid #97ecff;outline-offset:6px;border-radius:6px}
.logo{position:relative;display:block;width:100%;height:auto;image-rendering:pixelated;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 0 7px rgba(64,185,242,.19));transition:filter .22s ease}
.logo-poster{display:block;width:100%;height:auto}
.logo-video,.logo-animated-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none;opacity:0}
.logo[data-playing=true] .logo-poster{opacity:0}
.logo[data-playing=true][data-format=video] .logo-video,.logo[data-playing=true][data-format=image] .logo-animated-image{opacity:1}
/* Keep the complete logo, caption and button in the vertical centering calculation. */
.brand-caption{position:relative;flex:none;margin-top:var(--caption-gap);display:flex;flex-direction:column;align-items:center;gap:32px;width:max-content;max-width:calc(100vw - 32px)}
.coming-soon{display:flex;align-items:center;justify-content:center;flex:none;width:clamp(212px,20.24vw,276px);max-width:calc(100vw - 48px);height:54px;padding:0 18px;border:2px solid #466356;border-radius:6px;background:linear-gradient(105deg,#29473d 0%,#263f35 58%,#24392f 100%);box-shadow:inset 0 1px 0 rgba(184,203,192,.06);color:#96a69d;-webkit-text-fill-color:#96a69d;font-family:'Loot Terminal',monospace;font-weight:400;font-size:clamp(25px,2.2vw,31px);line-height:1;letter-spacing:.05em;text-transform:uppercase;text-shadow:none;opacity:1;cursor:default}
/* Center the visible pixels: half the .085em final sidebearing + .05em tracking. */
.coming-soon>span{display:block;white-space:nowrap;transform:translateX(.0675em)}
.tagline{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:7px 16px 6px;color:#81e5f2;font-family:'Loot Terminal',monospace;font-size:clamp(20px,1.4vw,23px);line-height:1.5;letter-spacing:.04em;font-weight:400;text-transform:uppercase;text-shadow:0 0 4px rgba(31,221,255,.5);background:radial-gradient(ellipse at center,rgba(8,37,52,.98),rgba(6,22,38,.98));background-clip:padding-box;border:18px solid transparent;border-image:url('assets/tagline-frame.png') 18 / 18px / 0 stretch;filter:drop-shadow(0 0 5px rgba(43,212,243,.2))}
.tagline span{white-space:nowrap;flex-shrink:0}
.tagline span+span{margin-left:0}
.tagline>span{color:#adf5ff;text-shadow:0 0 1px rgba(208,252,255,.85),0 0 5px rgba(56,225,255,.56),0 0 12px rgba(32,186,245,.24)}
.holo-letter{font-style:normal;animation:holo-flicker var(--cycle,19s) linear infinite;animation-delay:var(--offset,0s)}
@keyframes holo-flicker{0%,75%,77%,100%{opacity:1}75.3%,75.75%{opacity:.38}76.15%{opacity:1}76.45%{opacity:.65}76.8%{opacity:1}}
.universe[data-motion=off] .holo-letter{animation:none;opacity:1}
.site-header{position:absolute;inset:0 0 auto;height:var(--header-height);z-index:6;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,env(safe-area-inset-right)) 0 max(32px,env(safe-area-inset-left));background:rgba(3,12,23,.66);border-bottom:1px solid rgba(65,139,170,.18)}
.header-icon{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:12px;border:0;border-radius:3px;background:transparent;color:#91acb9;text-decoration:none;cursor:pointer;transition:color .16s ease,background .16s ease}
.header-icon svg{display:block;flex:none}
.header-icon:focus-visible{outline:2px solid #a7e6f5;outline-offset:1px;color:#d7f4fc}
.header-icon::after{content:attr(data-tooltip);position:absolute;top:calc(100% + 7px);left:0;z-index:1;width:max-content;max-width:220px;padding:7px 10px;border:1px solid rgba(87,159,186,.25);border-radius:3px;background:#071523;color:#c1d6df;font:11px/1.4 Arial,sans-serif;letter-spacing:.02em;pointer-events:none;opacity:0;transform:translateY(-3px);transition:opacity .15s ease,transform .15s ease}
.sound-button::after{left:auto;right:0}
.header-icon:focus-visible::after{opacity:1;transform:translateY(0)}
@media(hover:hover){.header-icon:hover{color:#d7f4fc;background:rgba(95,167,193,.06)}.header-icon:hover::after{opacity:1;transform:translateY(0)}}
.sound-waves{display:none}
.sound-button[aria-pressed=true] .sound-waves{display:block}
.sound-button[aria-pressed=true] .sound-cross{display:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.noscript{position:absolute;bottom:90px;left:0;right:0;text-align:center;font-size:13px;color:#b9cfe2}
@media(min-width:1700px){.universe{--logo-width:420px}.tagline{font-size:23px}}
@media(max-height:680px) and (min-width:761px){.universe{--logo-width:280px}.tagline{font-size:20px;padding:5px 14px 4px}}
@media(max-width:760px){.universe{--header-height:48px;--logo-width:min(66vw,320px)}.site-header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.brand-shade{width:120vw;height:80vh;background:radial-gradient(ellipse,rgba(3,10,24,.80) 0%,rgba(3,10,24,.48) 36%,transparent 70%)}.brand-caption{gap:28px}.tagline{width:max-content;flex-direction:row;flex-wrap:nowrap;gap:.6em;font-size:min(20px,calc((100vw - 88px)/25.3));line-height:1.5;letter-spacing:.04em;padding:8px 10px 7px}.tagline span{display:block}.tagline span+span{margin-left:0}}
@media(pointer:coarse){.territory{cursor:default}}
@media(max-height:470px){.universe{--logo-width:196px;--caption-gap:6px;min-height:370px}.brand-caption{gap:20px}.coming-soon{height:40px;font-size:25px}.tagline{font-size:18px;padding:4px 12px 3px;line-height:1.4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Native cursor keeps the pointed tip aligned with the actual click position. */
@media (any-hover: hover) and (any-pointer: fine) {
  html, body, .universe, .universe * {
    cursor: url('assets/loot-planets-cursor.png?v=2') 1 1, auto;
  }
}

@media(max-height:470px) and (max-width:760px){.universe{--logo-width:150px}.tagline{font-size:min(18px,calc((100vw - 88px)/25.3));line-height:1.4;padding:4px 10px 3px}}