@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap");
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#0a0a0f;font-family:"Rajdhani",sans-serif}
canvas{display:block}
#creator-youtube-link{
  position:fixed;
  right:158px;
  bottom:0;
  z-index:1100;
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  max-width:min(238px,calc(100vw - 164px));
  padding:7px 14px 7px 12px;
  border:1px solid rgba(255,255,255,.16);
  border-bottom:none;
  border-radius:12px 12px 0 0;
  background:rgba(8,8,11,.96);
  color:#fff;
  text-decoration:none;
  font-family:Arial,sans-serif;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:0;
  box-shadow:0 10px 26px rgba(0,0,0,.32);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
#creator-youtube-link:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(0,0,0,.38);
  background:rgba(16,16,20,.98);
}
.creator-youtube-icon{
  position:relative;
  flex:0 0 auto;
  width:25px;
  height:18px;
  border-radius:5px;
  background:#ff0033;
}
.creator-youtube-icon::after{
  content:"";
  position:absolute;
  left:10px;
  top:5px;
  width:0;
  height:0;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  border-left:7px solid #fff;
}
.creator-youtube-copy{white-space:nowrap}
.creator-youtube-handle{
  max-width:118px;
  overflow:hidden;
  color:#c9c9c9;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:960px){
  #creator-youtube-link{
    right:158px;
    bottom:0;
    max-width:calc(100vw - 164px);
  }
}
#webgl-error{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(circle at 50% 30%,rgba(53,232,255,.12),transparent 34%),#070b10;color:#d7f4ff}
.webgl-error-panel{width:min(560px,calc(100vw - 32px));padding:26px 28px;background:linear-gradient(180deg,rgba(8,21,38,.88),rgba(5,14,26,.94));border:1px solid rgba(53,232,255,.38);box-shadow:0 0 36px rgba(53,232,255,.12);clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% calc(100% - 16px),calc(100% - 16px) 100%,16px 100%,0 calc(100% - 16px),0 16px)}
.webgl-error-kicker{font-family:"Orbitron",sans-serif;font-size:.72rem;letter-spacing:2px;text-transform:uppercase;color:#f0c74e;margin-bottom:12px}
.webgl-error-panel h1{font-family:"Orbitron",sans-serif;font-size:1.35rem;line-height:1.16;color:#eff7f3;margin-bottom:12px}
.webgl-error-panel p{font-size:1rem;line-height:1.38;color:#b9d6e5;margin-bottom:10px}
.webgl-error-detail{font-family:monospace;font-size:.78rem;color:#7dc7c9;overflow-wrap:anywhere}
#loading-screen{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
  padding:5.4vh 22px 4vh;
  background:
    radial-gradient(circle at 50% 48%,rgba(255,198,119,.58),transparent 18%),
    linear-gradient(180deg,#201178 0%,#4922a4 40%,#a95fd3 62%,#f0a566 100%);
  transition:opacity .8s ease;
}
#loading-screen.hidden{opacity:0;pointer-events:none}
#loading-screen::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(30,12,94,.12),rgba(20,8,52,.62)),
    repeating-linear-gradient(115deg,rgba(45,252,255,.08) 0 1px,transparent 1px 78px);
  opacity:.58;
}
#loading-screen::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  bottom:-2%;
  height:36%;
  background:linear-gradient(180deg,transparent,rgba(18,8,48,.92));
  clip-path:polygon(0 45%,12% 36%,22% 50%,34% 34%,45% 52%,58% 33%,70% 48%,82% 30%,100% 44%,100% 100%,0 100%);
}
.loading-circuit-frame{
  position:absolute;
  top:8.5vh;
  left:13vw;
  right:13vw;
  height:16vh;
  border:2px solid rgba(240,199,78,.82);
  border-bottom-width:3px;
  border-radius:8px;
  clip-path:polygon(0 24px,24px 0,100% 0,100% calc(100% - 24px),calc(100% - 24px) 100%,0 100%);
  opacity:.9;
}
.loading-circuit-frame::before,
.loading-circuit-frame::after{
  content:"";
  position:absolute;
  top:-2px;
  width:26%;
  height:3px;
  background:#2dfcff;
  box-shadow:0 0 16px rgba(45,252,255,.64);
}
.loading-circuit-frame::before{left:31%}
.loading-circuit-frame::after{right:31%}
.loading-mini-bot{
  position:absolute;
  top:2vh;
  left:50%;
  z-index:3;
  width:86px;
  height:86px;
  transform:translateX(-50%);
  animation:loadingBotBob 1.7s ease-in-out infinite;
}
.loading-mini-bot span,.loading-mini-bot i{position:absolute;display:block}
.mini-bot-head{
  left:23px;
  top:8px;
  width:40px;
  height:32px;
  border:2px solid #f0c74e;
  border-radius:8px;
  background:#3a2a8a;
}
.mini-bot-head i{
  top:10px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#2dfcff;
  box-shadow:0 0 10px #2dfcff;
}
.mini-bot-head i:first-child{left:10px}
.mini-bot-head i:last-child{right:10px}
.mini-bot-body{
  left:28px;
  top:43px;
  width:30px;
  height:28px;
  border-radius:6px;
  border:2px solid #f0c74e;
  background:#5f4bcc;
}
.mini-bot-arm{top:42px;width:10px;height:24px;border-radius:7px;background:#f0c74e}
.mini-bot-arm.left{left:15px;transform:rotate(22deg)}
.mini-bot-arm.right{right:15px;transform:rotate(-22deg)}
.loading-brand{
  position:relative;
  z-index:2;
  width:min(1120px,86vw);
  text-align:center;
  margin-top:8.4vh;
}
.loading-brand h1{
  display:flex;
  justify-content:center;
  gap:.04em;
  font-family:"Orbitron",sans-serif;
  font-size:clamp(3.6rem,10vw,8.8rem);
  line-height:.86;
  font-weight:900;
  letter-spacing:0;
  text-shadow:0 18px 40px rgba(25,8,72,.42);
}
.loading-brand h1 span:first-child{color:#fff}
.loading-brand h1 span:last-child{color:#28d1bf}
.loading-tagline{
  margin-top:22px;
  color:#f0c74e;
  font-family:"Orbitron",sans-serif;
  font-size:clamp(1rem,2.2vw,1.9rem);
  letter-spacing:10px;
  font-weight:700;
}
.loading-hero{
  position:absolute;
  left:50%;
  bottom:13.6vh;
  z-index:3;
  width:190px;
  height:330px;
  transform:translateX(-50%);
}
.loading-hero span,.loading-hero i,.loading-hero b{position:absolute;display:block}
.loading-hero-dome{
  left:50%;
  bottom:52px;
  width:360px;
  height:260px;
  transform:translateX(-50%);
  border:2px solid rgba(220,238,255,.24);
  border-radius:50% 50% 14% 14%;
  background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.16),rgba(45,252,255,.08) 42%,transparent 72%);
}
.loading-hero-head{
  left:48px;
  top:18px;
  width:94px;
  height:64px;
  border:6px solid #dadbff;
  border-radius:18px;
  background:#241e51;
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.14);
}
.loading-hero-head i{
  top:21px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#2dfcff;
  box-shadow:0 0 18px #2dfcff;
}
.loading-hero-head i:first-child{left:25px}
.loading-hero-head i:last-child{right:25px}
.loading-hero-ear{
  top:35px;
  width:20px;
  height:40px;
  border-radius:12px;
  background:#3f54a6;
  border:4px solid #1e2251;
}
.loading-hero-ear.left{left:31px}
.loading-hero-ear.right{right:31px}
.loading-hero-body{
  left:43px;
  top:92px;
  width:104px;
  height:116px;
  border:5px solid rgba(236,225,255,.8);
  border-radius:26px 26px 18px 18px;
  background:linear-gradient(135deg,#a078f0,#50419b);
}
.loading-hero-body b{
  left:39px;
  top:34px;
  width:28px;
  height:28px;
  border:7px solid #2dfcff;
  transform:rotate(45deg);
  box-shadow:0 0 20px rgba(45,252,255,.82);
}
.loading-hero-arm{
  top:112px;
  width:28px;
  height:126px;
  border:5px solid #20204a;
  border-radius:16px;
  background:#8e69df;
}
.loading-hero-arm.left{left:10px;transform:rotate(25deg)}
.loading-hero-arm.right{right:10px;transform:rotate(-12deg)}
.loading-hero-leg{
  top:207px;
  width:34px;
  height:118px;
  border:5px solid #20204a;
  border-radius:17px;
  background:#594bb2;
}
.loading-hero-leg.left{left:54px}
.loading-hero-leg.right{right:54px}
.loading-city{
  position:absolute;
  inset:auto 0 0;
  z-index:1;
  height:43vh;
  pointer-events:none;
}
.loading-city span{position:absolute;display:block}
.city-road{
  left:42%;
  right:42%;
  bottom:0;
  height:72%;
  background:linear-gradient(180deg,rgba(25,19,59,.72),#080a22);
  clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);
}
.city-road::before,.city-road::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:3px;
  background:#f0c74e;
  box-shadow:0 0 12px rgba(240,199,78,.6);
}
.city-road::before{left:34%}
.city-road::after{right:34%}
.city-block{
  bottom:4vh;
  background:#e8aa67;
  box-shadow:inset 0 -18px 0 rgba(73,34,99,.2);
}
.city-block.water{
  left:7vw;
  width:88px;
  height:160px;
  background:#1b306d;
}
.city-block.water::before{
  content:"";
  position:absolute;
  left:10px;
  top:-35px;
  width:70px;
  height:46px;
  background:#23c7c6;
  clip-path:polygon(50% 0,100% 24%,100% 100%,0 100%,0 24%);
}
.city-block.shop-left{left:13vw;width:190px;height:116px}
.city-block.shop-right{right:9vw;width:260px;height:154px}
.city-block.shop-left::before,.city-block.shop-right::before{
  content:"";
  position:absolute;
  left:28px;
  right:28px;
  bottom:26px;
  height:30px;
  background:#2dfcff;
  box-shadow:0 0 22px rgba(45,252,255,.72);
}
.loading-progress{
  position:absolute;
  left:50%;
  bottom:9vh;
  z-index:5;
  width:min(620px,72vw);
  transform:translateX(-50%);
  text-align:center;
}
.loading-bar-bg{
  position:relative;
  width:100%;
  height:14px;
  border:1px solid rgba(240,199,78,.68);
  border-radius:999px;
  background:rgba(16,10,48,.76);
  overflow:hidden;
  box-shadow:0 0 22px rgba(45,252,255,.18),inset 0 0 18px rgba(0,0,0,.3);
}
.loading-bar-bg::before{
  content:"";
  position:absolute;
  top:-1px;
  bottom:-1px;
  width:42%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.52),transparent);
  transform:translateX(-120%);
  animation:loadingScan 1.1s linear infinite;
}
.loading-bar-fill{
  position:relative;
  height:100%;
  width:38%;
  border-radius:999px;
  background:linear-gradient(90deg,#2dfcff,#28d1bf,#f0c74e);
  box-shadow:0 0 18px rgba(45,252,255,.62);
  animation:loadPulse 1.35s ease-in-out infinite;
  transition:width .3s;
}
.loading-bar-fill::after{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(120deg,rgba(255,255,255,.28) 0 8px,transparent 8px 18px);
  animation:loadingStripe 1s linear infinite;
}
@keyframes loadPulse{0%,100%{filter:brightness(.88)}50%{filter:brightness(1.25)}}
@keyframes loadingScan{0%{transform:translateX(-120%)}100%{transform:translateX(260%)}}
@keyframes loadingStripe{0%{transform:translateX(-24px)}100%{transform:translateX(24px)}}
@keyframes loadingBotBob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.loading-tip{
  color:#fff;
  font-family:"Orbitron",sans-serif;
  font-size:.72rem;
  margin-top:12px;
  font-weight:700;
  letter-spacing:2px;
  text-shadow:0 2px 14px rgba(0,0,0,.5);
}
.loading-pillars{
  position:absolute;
  left:50%;
  bottom:2.2vh;
  z-index:5;
  width:min(650px,82vw);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  transform:translateX(-50%);
  color:#fff;
  text-align:center;
  font-family:"Orbitron",sans-serif;
  font-size:.7rem;
  letter-spacing:1px;
  text-transform:uppercase;
}
.loading-pillars div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.loading-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid #f0c74e;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  color:#2dfcff;
  background:rgba(30,14,82,.72);
  box-shadow:0 0 16px rgba(240,199,78,.2);
}
.loading-icon.cube::before{content:"";width:18px;height:18px;background:#2dfcff;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.loading-icon.gear::before{content:"";width:20px;height:20px;border:6px solid #2dfcff;border-radius:50%;box-shadow:0 0 0 5px rgba(45,252,255,.18)}
.loading-icon.play::before{content:"";width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:16px solid #2dfcff}
.inline-prompt-key{background:rgba(0,240,255,.15);border:1px solid rgba(0,240,255,.3);border-radius:3px;padding:1px 6px}
#cinematic-intro{position:fixed;inset:0;z-index:920;color:#eff7f3;opacity:0;pointer-events:none;transition:opacity .7s ease;font-family:"Rajdhani",sans-serif;overflow:hidden}
#cinematic-intro.visible{opacity:1;pointer-events:auto}
#cinematic-intro.closing{opacity:0}
.cinematic-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,8,.7),rgba(4,7,8,.18) 48%,rgba(4,7,8,.62)),radial-gradient(circle at 68% 34%,rgba(125,199,201,.12),transparent 38%),radial-gradient(circle at 24% 70%,rgba(216,182,75,.1),transparent 36%)}
.cinematic-grain{position:absolute;inset:-20%;opacity:.16;pointer-events:none;background-image:repeating-radial-gradient(circle at 20% 30%,rgba(255,255,255,.14) 0 1px,transparent 1px 3px);mix-blend-mode:screen;animation:cinematicGrain 1.2s steps(2,end) infinite}
.cinematic-letterbox{position:absolute;left:0;right:0;height:12vh;background:#030505;box-shadow:0 0 28px rgba(0,0,0,.7);z-index:2}
.cinematic-letterbox-top{top:0}
.cinematic-letterbox-bottom{bottom:0}
.cinematic-chapter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;z-index:3;opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease;text-shadow:0 3px 28px rgba(0,0,0,.9)}
.cinematic-chapter.visible{opacity:1;transform:translateY(0)}
.cinematic-kicker{font-family:"Orbitron",sans-serif;font-size:.82rem;letter-spacing:5px;text-transform:uppercase;color:#d8b64b;margin-bottom:18px}
.cinematic-chapter h1{font-family:"Orbitron",sans-serif;font-size:3.2rem;font-weight:900;letter-spacing:4px;color:#eff7f3}
.cinematic-copy{position:absolute;left:6vw;bottom:14vh;z-index:3;width:min(760px,88vw);opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease;text-shadow:0 3px 24px rgba(0,0,0,.9)}
.cinematic-copy.visible{opacity:1;transform:translateY(0)}
.cinematic-copy.text-in{animation:cinematicTextIn .72s cubic-bezier(.16,1,.3,1)}
.cinematic-label{font-family:"Orbitron",sans-serif;color:#7dc7c9;font-size:.78rem;font-weight:700;letter-spacing:4px;text-transform:uppercase;margin-bottom:10px}
.cinematic-copy h2{font-family:"Orbitron",sans-serif;font-size:2.1rem;line-height:1.08;color:#f4f4e9;letter-spacing:1px;margin-bottom:14px;overflow-wrap:anywhere}
.cinematic-body{font-size:1.08rem;line-height:1.38;color:#dbe9e2;max-width:720px}
.cinematic-body p{margin:0 0 10px;overflow-wrap:anywhere}
.cinematic-body p:last-child{margin-bottom:0}
.cinematic-meta{position:absolute;right:28px;bottom:calc(12vh + 16px);z-index:4;display:flex;align-items:center;gap:14px;font-family:"Orbitron",sans-serif;font-size:.68rem;letter-spacing:2px;color:#c7d7d1;text-transform:uppercase}
#cinematic-next,#cinematic-skip{border:1px solid rgba(125,199,201,.44);border-radius:6px;background:rgba(4,7,8,.54);color:#eff7f3;padding:8px 12px;font-family:"Orbitron",sans-serif;font-size:.68rem;letter-spacing:2px;cursor:pointer}
#cinematic-next{background:rgba(216,182,75,.18);border-color:rgba(216,182,75,.56)}
#cinematic-next:hover,#cinematic-next:focus-visible,#cinematic-skip:hover,#cinematic-skip:focus-visible{background:rgba(125,199,201,.18);outline:none}
.cinematic-progress{position:absolute;left:0;right:0;bottom:12vh;height:2px;background:rgba(239,247,243,.12);z-index:4}
.cinematic-progress span{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,#7dc7c9,#d8b64b,#eff7f3);transition:transform .24s ease}
body.cinematic-running #hud,
body.cinematic-running #controls-hint,
body.cinematic-running #minimap,
body.cinematic-running #interact-prompt{opacity:0;pointer-events:none}
@keyframes cinematicTextIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes cinematicGrain{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(2%,1%,0)}100%{transform:translate3d(-1%,-2%,0)}}
@media (max-width:700px){
  #creator-youtube-link{
    right:150px;
    bottom:0;
    max-width:calc(100vw - 150px);
  }
  #loading-screen{padding:5vh 14px 3vh}
  .loading-circuit-frame{left:7vw;right:7vw;top:8vh;height:12vh}
  .loading-mini-bot{top:1.6vh;transform:translateX(-50%) scale(.74);transform-origin:top center}
  .loading-brand{margin-top:11vh;width:94vw}
  .loading-brand h1{font-size:clamp(2.45rem,14vw,4.6rem)}
  .loading-tagline{margin-top:14px;font-size:.85rem;letter-spacing:5px}
  .loading-hero{transform:translateX(-50%) scale(.62);transform-origin:bottom center;bottom:17vh}
  .loading-hero-dome{width:280px;height:210px}
  .city-block.water{left:1vw;transform:scale(.72);transform-origin:bottom left}
  .city-block.shop-left{left:7vw;width:112px;height:78px}
  .city-block.shop-right{right:2vw;width:136px;height:96px}
  .loading-progress{bottom:10.5vh;width:86vw}
  .loading-pillars{bottom:2vh;width:92vw;gap:6px;font-size:.54rem}
  .loading-icon{width:34px;height:34px;border-width:2px}
  .cinematic-letterbox{height:10vh}
  .cinematic-chapter h1{font-size:2rem;letter-spacing:2px}
  .cinematic-kicker{font-size:.7rem;letter-spacing:3px}
  .cinematic-copy{left:18px;right:18px;bottom:11vh;width:auto}
  .cinematic-copy h2{font-size:1.35rem}
  .cinematic-body{font-size:.96rem;line-height:1.3}
  .cinematic-meta{right:18px;bottom:calc(10vh + 12px)}
  #cinematic-shot-count{display:none}
  .cinematic-progress{bottom:10vh}
}

#loading-screen{
  justify-content:center;
  padding:0;
  background:#150b54;
}

#loading-screen::before,
#loading-screen::after{
  content:none;
}

.loading-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.loading-progress{
  bottom:4.8vh;
  z-index:5;
  width:min(560px,68vw);
  padding:12px 14px 10px;
  border:1px solid rgba(240,199,78,.45);
  border-radius:8px;
  background:rgba(10,7,28,.58);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
  backdrop-filter:blur(4px);
}

@media (max-width:700px){
  .loading-art{
    object-fit:cover;
    object-position:center;
  }

  .loading-progress{
    bottom:4.5vh;
    width:86vw;
    padding:10px 12px 9px;
  }
}