:root{color-scheme:dark;--mint:#8affd9;--ink:#09151e;--muted:#92a5ac}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:var(--ink);color:#eaf4ec;font-family:Arial,Helvetica,sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;display:block}#world{z-index:0}#hud{pointer-events:none;z-index:2}.grain{position:fixed;inset:0;pointer-events:none;z-index:3;opacity:.06;background:repeating-linear-gradient(transparent 0 3px,#04131b 4px)}[hidden]{display:none!important}button,a,input,select{touch-action:manipulation}button{cursor:pointer;color:#d3e6de;background:#14262d;border:1px solid #36514f;padding:16px 20px;text-align:left;font:700 12px monospace;letter-spacing:1.5px}button:hover,button:focus-visible{background:#24423e;outline:2px solid var(--mint);outline-offset:3px}.primary{background:var(--mint);color:#102e27;border-color:var(--mint)}.primary:hover,.primary:focus-visible{background:#caffeb}.eyebrow,.edition,.topline,.menu-bottom,.district span,.district small{font:11px monospace;letter-spacing:2px}.eyebrow{color:var(--mint)}#loading{position:fixed;inset:0;z-index:15;background:#0c1921;display:flex;flex-direction:column;justify-content:center;padding:8vw}h1{font-size:clamp(60px,8.8vw,140px);font-weight:950;line-height:.78;letter-spacing:-.085em;margin:25px 0 28px;position:relative}h1 em{font-style:normal;color:var(--mint)}#menu{position:fixed;inset:0;z-index:4;background:linear-gradient(90deg,rgba(6,18,26,.95),rgba(6,18,26,.65) 40%,transparent 78%)}.topline{position:absolute;top:30px;left:42px;right:42px;display:flex;justify-content:space-between;align-items:center;color:#99b2b6}.topline a{text-decoration:none;color:#d5e9e4}.status{color:var(--mint)}.menu-body{position:absolute;top:11%;left:6%;}.edition{color:var(--mint);display:flex;gap:20px;align-items:center}.edition span{color:#90a7ac;font-size:10px;border:1px solid #4e6568;padding:7px 10px}.voxel-title-wrap{position:relative;width:min(720px,66vw);height:clamp(160px,23vw,265px);margin:10px 0 8px;filter:drop-shadow(0 0 10px #55e9ff77) drop-shadow(0 0 24px #ff62c944)}#voxel-logo{position:relative;width:100%;height:100%;display:block}.registered{position:absolute;right:1%;top:8%;display:inline-block;font:12px monospace;letter-spacing:0;padding:3px 8px;border:1px solid #9ddfd6;color:#d8fff5;background:#07141bb8;box-shadow:0 0 18px #57ffe833}.tagline{font-size:12px;line-height:1.55;letter-spacing:2px;color:#ccd6d1}.actions{display:grid;gap:8px;width:335px;margin-top:25px}.actions button{display:flex;justify-content:space-between;padding:14px 18px}.brief{font-size:11px;line-height:1.7;color:#a0b0b3}.menu-bottom{position:absolute;bottom:28px;left:42px;right:42px;display:flex;justify-content:space-between;font-size:9px;color:#b0c2c3;border-top:1px solid #456060;padding-top:15px}.district{position:absolute;right:5%;bottom:15%;max-width:240px;text-shadow:0 2px 15px #091821}.district span{color:var(--mint)}.district strong{display:block;font-size:30px;line-height:1.05;letter-spacing:-1px;margin:16px 0}.district small{font-size:8px;line-height:1.7;color:#b6c7cb}.overlay{position:fixed;inset:0;z-index:10;background:rgba(5,15,23,.78);backdrop-filter:blur(9px);display:flex;align-items:center;justify-content:center;padding:22px}.card{background:#0d1c24;border:1px solid #42625c;padding:32px;width:440px;max-height:94vh;overflow:auto;box-shadow:0 20px 120px #0007}.card.wide{width:800px}.card h2{font-size:31px;letter-spacing:-1px;margin:12px 0 22px}.card>button{display:block;width:100%;margin-top:10px}.card p{font-size:12px;line-height:1.8;color:#a0b9bb}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}label{font:12px monospace;color:#b5cbcd;display:flex;flex-direction:column;gap:8px}label small{color:#728f96;font-size:10px}select{padding:9px;background:#172d35;border:1px solid #42615f;color:#ddf0e9}input{accent-color:var(--mint)}label.check{flex-direction:row;align-items:center}.controls{font-size:10px!important}.upgrade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.upgrade-grid button{padding:18px 17px}.upgrade-grid strong,.upgrade-grid span{display:block}.upgrade-grid strong{color:var(--mint);margin:16px 0;font-size:19px}.upgrade-grid b{font-size:10px;color:#97afb3}.upgrade-grid span{font:12px/1.7 Arial;color:#c2d1cd}.upgrade-preview{display:block;width:100%;height:118px;object-fit:cover;object-position:center 68%;margin:12px 0 4px;border:1px solid #38545a;background:#07141b}.upgrade-preview[hidden]{display:none}#toast{position:fixed;top:20%;left:50%;transform:translateX(-50%);z-index:12;pointer-events:none;color:var(--mint);font:12px monospace;letter-spacing:2px;text-align:center;background:#10262ce8;padding:15px 25px;opacity:0;transition:opacity .25s}#toast.show{opacity:1}#debug{position:fixed;right:20px;top:72px;z-index:20;background:#06151ce8;color:#b5ffd9;font:11px/1.5 monospace;padding:15px;pointer-events:none}@media(max-height:720px){.menu-body{top:9%}h1{font-size:90px;margin:19px 0}.voxel-title-wrap{height:145px;width:min(620px,62vw);margin:4px 0}.actions{gap:6px;margin-top:10px}.actions button{padding:11px 16px}.brief{display:none}.topline{top:20px}.menu-bottom{bottom:18px}}@media(max-width:800px){.district,.topline>span:not(.status),.menu-bottom span:last-child{display:none}.topline,.menu-bottom{left:24px;right:24px}.menu-body{left:6%;right:6%;top:11%}.voxel-title-wrap{width:min(88vw,620px);height:clamp(145px,35vw,220px)}.settings-grid{grid-template-columns:1fr 1fr}.upgrade-grid{grid-template-columns:1fr}.upgrade-grid strong{margin:9px 0}.card{padding:24px}}

.touch-ui{display:none;opacity:1;transition:opacity .28s ease}
.touch-setting{display:none}
.touch-capable .touch-setting{display:flex}
.touch-capable{touch-action:none;overscroll-behavior:none}
.touch-capable #world{touch-action:none}
.touch-capable.gameplay-active .touch-ui{display:block}
.touch-capable.gameplay-active.touch-gamepad-active .touch-ui{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.touch-ui{transition:none}}
.touch-stick{
  position:fixed;z-index:7;width:var(--touch-stick-size,88px);height:var(--touch-stick-size,88px);
  border:1px solid #a8ffe09c;border-radius:50%;background:#0b18218c;
  box-shadow:inset 0 0 24px #8affd91c,0 0 18px #0008;touch-action:none;user-select:none;
}
.touch-stick::after{
  content:"";position:absolute;inset:22%;border:1px solid #8affd955;border-radius:50%;pointer-events:none;
}
.touch-stick>span{
  position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  font:700 8px monospace;letter-spacing:1.5px;color:#a8c9c7;pointer-events:none;
}
.touch-knob{
  position:absolute;width:42%;height:42%;left:29%;top:29%;border-radius:50%;
  background:#8affd9c9;border:1px solid #eafff6cc;box-shadow:0 0 18px #8affd955;pointer-events:none;
}
.touch-move{left:max(16px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom))}
.touch-look{right:max(16px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
.touch-action,.touch-menu{
  position:fixed;z-index:8;display:grid;place-items:center;text-align:center;touch-action:none;user-select:none;
  border-radius:50%;padding:0;background:#102a31d9;border:1px solid #9effdd99;
  color:#ddfff3;font:800 10px monospace;letter-spacing:.7px;box-shadow:0 7px 24px #0008;
}
.touch-action.pressed,.touch-action:active,.touch-menu:active{background:#8affd9;color:#102e27;transform:scale(.94)}
.touch-fire{
  width:72px;height:72px;right:max(20px,env(safe-area-inset-right));
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + var(--touch-stick-size,88px) + 34px);
  border-color:#ff7bc3aa;box-shadow:0 0 20px #ff2bc833,0 7px 24px #0008;
}
.touch-aim{
  width:58px;height:58px;right:calc(max(20px,env(safe-area-inset-right)) + 80px);
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + var(--touch-stick-size,88px) + 40px);
  border-color:#9bc6ffaa;box-shadow:0 0 18px #72aaff2e,0 7px 24px #0008;
}
.touch-swap{
  width:50px;height:50px;right:calc(max(20px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 28px);
  bottom:max(20px,env(safe-area-inset-bottom));font-size:22px;
}
.touch-dash{
  width:56px;height:56px;right:calc(max(20px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 24px);
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + 62px);
}
.touch-jump{
  width:56px;height:56px;right:calc(max(20px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 88px);
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + 62px);
  border-color:#8fc7ffaa;box-shadow:0 0 18px #58a8ff2e,0 7px 24px #0008;
}
.touch-reload{
  width:48px;height:48px;right:calc(max(20px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 86px);
  bottom:max(20px,env(safe-area-inset-bottom));
  border-color:#92ffd5aa;box-shadow:0 0 15px #60ffd52a,0 7px 24px #0008;
}
.touch-reload:disabled{opacity:.38}
.touch-grenade{
  display:none;width:52px;height:52px;
  right:calc(max(20px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 150px);
  bottom:calc(max(20px,env(safe-area-inset-bottom)) + 62px);
  border-color:#ffc86faa;box-shadow:0 0 18px #ffb3472e,0 7px 24px #0008;
}
.grenade-unlocked .touch-grenade{display:grid}
.touch-menu{
  width:46px;height:46px;right:max(12px,env(safe-area-inset-right));
  top:max(12px,env(safe-area-inset-top));border-radius:12px;font-size:21px;
}
body[data-touch-layout="mirrored"] .touch-move{left:auto;right:max(16px,env(safe-area-inset-right))}
body[data-touch-layout="mirrored"] .touch-look{right:auto;left:max(16px,env(safe-area-inset-left))}
body[data-touch-layout="mirrored"] .touch-fire{
  right:auto;left:max(20px,env(safe-area-inset-left));
}
body[data-touch-layout="mirrored"] .touch-aim{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + 80px);
}
body[data-touch-layout="mirrored"] .touch-swap{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 28px);
}
body[data-touch-layout="mirrored"] .touch-dash{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 24px);
}
body[data-touch-layout="mirrored"] .touch-jump{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 88px);
}
body[data-touch-layout="mirrored"] .touch-reload{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 86px);
}
body[data-touch-layout="mirrored"] .touch-grenade{
  right:auto;left:calc(max(20px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 150px);
}
body[data-touch-layout="floating"] .touch-stick{opacity:0;pointer-events:none}
body[data-touch-layout="floating"] .touch-stick.active{opacity:1;pointer-events:none}
body[data-touch-layout="compact"] .touch-stick{transform:scale(.82)}
body[data-touch-layout="compact"] .touch-move{transform-origin:left bottom}
body[data-touch-layout="compact"] .touch-look{transform-origin:right bottom}
body[data-orientation="portrait"] .touch-stick{
  bottom:max(24px,env(safe-area-inset-bottom));
}
body[data-orientation="portrait"] .touch-fire{
  width:64px;height:64px;
  bottom:calc(max(24px,env(safe-area-inset-bottom)) + var(--touch-stick-size,88px) + 28px);
}
body[data-orientation="portrait"] .touch-swap{
  width:46px;height:46px;
  right:calc(max(14px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 20px);
  bottom:max(24px,env(safe-area-inset-bottom));
}
body[data-orientation="portrait"] .touch-dash{
  width:50px;height:50px;
  right:calc(max(14px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 18px);
  bottom:calc(max(24px,env(safe-area-inset-bottom)) + 56px);
}
body[data-orientation="portrait"] .touch-jump{
  width:50px;height:50px;
  right:calc(max(14px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 76px);
  bottom:calc(max(24px,env(safe-area-inset-bottom)) + 56px);
}
body[data-orientation="portrait"] .touch-reload{
  width:44px;height:44px;
  right:calc(max(14px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 72px);
  bottom:max(24px,env(safe-area-inset-bottom));
}
body[data-orientation="portrait"] .touch-grenade{
  width:46px;height:46px;
  right:calc(max(14px,env(safe-area-inset-right)) + var(--touch-stick-size,88px) + 132px);
  bottom:calc(max(24px,env(safe-area-inset-bottom)) + 58px);
}
body[data-orientation="portrait"][data-touch-layout="mirrored"] .touch-swap{
  right:auto;left:calc(max(14px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 20px);
}
body[data-orientation="portrait"][data-touch-layout="mirrored"] .touch-dash{
  right:auto;left:calc(max(14px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 18px);
}
body[data-orientation="portrait"][data-touch-layout="mirrored"] .touch-jump{
  right:auto;left:calc(max(14px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 76px);
}
body[data-orientation="portrait"][data-touch-layout="mirrored"] .touch-reload{
  right:auto;left:calc(max(14px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 72px);
}
body[data-orientation="portrait"][data-touch-layout="mirrored"] .touch-grenade{
  right:auto;left:calc(max(14px,env(safe-area-inset-left)) + var(--touch-stick-size,88px) + 132px);
}
body[data-orientation="landscape"] .touch-stick{bottom:max(16px,env(safe-area-inset-bottom))}
body[data-orientation="landscape"] .touch-fire{width:68px;height:68px}
@media(max-width:560px){
  .card.wide{width:96vw}.settings-grid{grid-template-columns:1fr}
  .voxel-title-wrap{width:88vw;height:clamp(130px,38vw,190px);margin:4px 0 2px}.registered{font-size:9px;padding:2px 6px;right:0;top:5%}
  .tagline{font-size:10px}.actions{width:min(335px,88vw);margin-top:16px}
  .touch-menu{width:42px;height:42px;font-size:18px}
}



/* Initial loader intentionally reuses the main title-screen design system. */
#loading.loading-title-screen{
  display:block;
  padding:0;
  overflow:hidden;
  background:linear-gradient(90deg,rgba(6,18,26,.95),rgba(6,18,26,.65) 40%,transparent 78%);
}
#loading.loading-title-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(transparent 49%,rgba(91,241,255,.06) 50%,transparent 51%);
  background-size:100% 7px;
  opacity:.28;
}
#loading .loading-body{z-index:1}
#loading .loading-topline,
#loading .loading-district{z-index:1}
#loading-voxel-logo{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  display:block;
}
#loading .loading-status{
  width:max-content;
  max-width:88vw;
  margin:20px 0 0;
  padding:9px 12px 9px 14px;
  border-left:2px solid var(--mint);
  background:rgba(8,27,34,.66);
  color:var(--mint);
  font:700 10px/1.4 monospace;
  letter-spacing:1.5px;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(93,255,221,.08);
}
#loading .loading-title-wrap{
  filter:drop-shadow(0 0 10px #55e9ff88) drop-shadow(0 0 26px #ff62c955);
}
@media(max-width:800px){
  #loading .loading-body{top:11%;left:6%;right:6%}
  #loading .loading-title-wrap{width:min(88vw,620px);height:clamp(145px,35vw,220px)}
}
@media(max-width:560px){
  #loading .loading-title-wrap{width:88vw;height:clamp(130px,38vw,190px);margin:4px 0 2px}
  #loading .loading-status{margin-top:14px;font-size:9px}
}

.lineage-status{margin:7px 0 0;color:var(--mint);font:700 9px/1.45 monospace;letter-spacing:1.15px;text-transform:uppercase;max-width:335px}
@media(max-width:560px){#menu .lineage-status{font-size:8px;line-height:1.35;letter-spacing:.8px;margin-top:5px}}
.gamepad-nav-active button:focus,.gamepad-nav-active a:focus,.gamepad-nav-active select:focus,.gamepad-nav-active input:focus{outline:2px solid var(--mint)!important;outline-offset:3px;box-shadow:0 0 0 1px #08181d,0 0 22px #67ffd744!important}.gamepad-nav-active select:focus,.gamepad-nav-active input:focus{background:#24423e}.gamepad-nav-active label:focus-within{color:var(--mint)}
