:root{
  color-scheme:dark;
  --red:#c93342;
  --red2:#f0555e;
  --cyan:#68e8ff;
  --gold:#ffd36a;
  --ink:#161a1e;
  --panel:rgba(21,24,26,.74);
  --line:rgba(255,255,255,.18);
  --text:#f5f6f2;
  --muted:#a7aaa6;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#cfd0ca;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text)}
button{font:inherit}
#webglHost,#webglHost canvas{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}
.hidden{display:none!important}

.boot-screen{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#d8d9d3;color:#222;transition:.45s ease}
.boot-screen.done{opacity:0;visibility:hidden}
.boot-robot{position:relative;width:100px;height:82px}
.boot-robot span{position:absolute;inset:0;border-radius:42px 42px 28px 28px;background:linear-gradient(115deg,#f7f7f2 0 33%,#c73342 34% 66%,#f7f7f2 67%);box-shadow:inset -12px -14px 18px rgba(0,0,0,.14),0 24px 55px rgba(0,0,0,.18)}
.boot-robot:after{content:"";position:absolute;left:19px;right:19px;top:39px;height:20px;border-radius:10px;background:#22282c}
.boot-robot i{position:absolute;z-index:2;top:45px;width:21px;height:8px;border-radius:6px;background:#68e8ff;box-shadow:0 0 17px #68e8ff}
.boot-robot i:nth-child(2){left:27px}.boot-robot i:nth-child(3){right:27px}
.boot-screen p{margin:23px 0 11px;font-size:9px;font-weight:900;letter-spacing:.2em}
.boot-track{width:min(370px,70vw);height:4px;background:rgba(0,0,0,.1)}.boot-track b{display:block;width:3%;height:100%;background:linear-gradient(90deg,var(--red),var(--cyan));transition:width .2s ease}

.main-menu{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;background:#14181c}
.main-menu.visible{display:flex}
.banner-image{position:absolute;inset:0;background:url("./reference-banner.png") center/cover no-repeat;filter:saturate(1.08) contrast(1.05)}
.banner-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,18,21,.98) 0%,rgba(15,18,21,.76) 45%,rgba(15,18,21,.16) 75%),linear-gradient(0deg,rgba(14,17,20,.84),transparent 45%)}
.topbar{position:relative;display:flex;align-items:center;justify-content:space-between;padding:23px 34px;border-bottom:1px solid rgba(255,255,255,.16);background:rgba(15,18,20,.32);backdrop-filter:blur(8px)}
.brand{display:grid}.brand span{font-size:7px;font-weight:900;letter-spacing:.22em;color:var(--cyan)}.brand b{font-size:13px;letter-spacing:.08em}
.source-badge{font-size:7px;letter-spacing:.16em;color:rgba(255,255,255,.62)}
.menu-content{position:relative;flex:1;display:grid;grid-template-columns:minmax(520px,1.1fr) minmax(320px,.55fr);align-items:center;gap:50px;width:min(1340px,calc(100% - 68px));margin:auto}
.hero-copy>p,.panel-card>p,.pause-overlay p{margin:0;color:var(--cyan);font-size:8px;font-weight:900;letter-spacing:.2em}
.hero-copy h1{margin:14px 0 18px;font-size:clamp(66px,8vw,132px);line-height:.79;letter-spacing:-.075em;font-weight:950;text-shadow:0 14px 50px rgba(0,0,0,.5)}.hero-copy h1 em{font-style:normal;color:#f0f0ea}
.description{max-width:700px;color:#c1c4c0;line-height:1.65;font-size:13px}
.hero-copy nav{display:grid;width:min(440px,100%);gap:8px;margin-top:27px}
.hero-copy button,.pause-overlay button{display:flex;align-items:center;justify-content:space-between;padding:14px 17px;border:1px solid rgba(255,255,255,.18);background:rgba(18,22,24,.72);color:white;font-size:9px;font-weight:900;letter-spacing:.11em;cursor:pointer;transition:.17s ease}
.hero-copy button:hover,.pause-overlay button:hover{transform:translateX(5px);border-color:var(--cyan)}
button.primary{border:0!important;background:linear-gradient(90deg,#e94a54,#f47b70)!important;color:white!important}
.visual-profile{display:grid;border:1px solid rgba(255,255,255,.17);background:rgba(17,21,23,.66);backdrop-filter:blur(17px)}
.visual-profile>span{padding:13px 16px;border-bottom:1px solid rgba(255,255,255,.1);color:#aeb3af;font-size:7px;letter-spacing:.16em}
.visual-profile article{padding:15px 16px;border-bottom:1px solid rgba(255,255,255,.07)}.visual-profile article:last-child{border:0}.visual-profile b{display:block;font-size:10px}.visual-profile em{display:block;margin-top:4px;color:#999f9b;font-size:8px;font-style:normal}
.main-menu footer{position:relative;display:flex;justify-content:space-between;padding:17px 34px;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.5);font-size:7px;letter-spacing:.15em}

.panel-overlay,.pause-overlay{position:fixed;inset:0;z-index:180;display:none;align-items:center;justify-content:center;background:rgba(14,16,18,.75);backdrop-filter:blur(16px)}
.panel-overlay.visible,.pause-overlay.visible{display:flex}
.panel-card,.pause-overlay article{position:relative;width:min(870px,calc(100% - 28px));max-height:calc(100vh - 28px);overflow:auto;padding:32px;border:1px solid rgba(255,255,255,.17);background:linear-gradient(145deg,rgba(25,29,31,.97),rgba(35,37,37,.94));box-shadow:0 35px 120px rgba(0,0,0,.62)}
.panel-card h2,.pause-overlay h2{margin:8px 0 23px;font-size:clamp(40px,6vw,72px);letter-spacing:-.06em}.panel-card p{color:#b7bbb7;line-height:1.75}
.close{position:absolute;right:18px;top:12px;border:0;background:transparent;color:#ddd;font-size:33px;cursor:pointer}
.controls-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.controls-grid div{display:grid;grid-template-columns:120px 1fr;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.03)}kbd{display:inline-grid;place-items:center;min-height:30px;padding:5px 8px;background:#292d2f;color:var(--cyan);font-weight:900}.controls-grid span{color:#b1b5b1;font-size:10px}

.hud{position:fixed;inset:0;z-index:40;pointer-events:none}
.panel{background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);box-shadow:0 13px 35px rgba(0,0,0,.22)}
.objective{position:absolute;left:20px;top:20px;width:300px;padding:12px 14px}.objective span,.target span,.telemetry span,.vitality span{color:#a1a5a0;font-size:7px;letter-spacing:.15em}.objective b{display:block;margin-top:4px;font-size:11px}.objective i,.target i,.vitality>i,.combo>i{display:block;height:4px;margin-top:8px;background:rgba(255,255,255,.09);overflow:hidden}.objective i u{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--red2),var(--cyan))}
.telemetry{position:absolute;right:20px;top:20px;display:grid;grid-template-columns:repeat(3,76px);padding:11px 10px}.telemetry div{text-align:center;border-right:1px solid rgba(255,255,255,.08)}.telemetry div:last-child{border:0}.telemetry b{display:block;margin-top:4px;font-size:15px}
.vitality{position:absolute;left:20px;bottom:20px;width:295px;padding:12px 14px}.vitality div{display:flex;justify-content:space-between}.vitality b{font-size:9px}.vitality i u{display:block;width:100%;height:100%}.vitality i.health u{background:linear-gradient(90deg,#d94b55,#ff8a72)}.vitality i.energy u{width:0;background:linear-gradient(90deg,#68e8ff,#ffd36a)}
.combo{position:absolute;left:50%;bottom:21px;transform:translateX(-50%);width:210px;text-align:center}.combo span{display:block;color:#9da19d;font-size:7px;letter-spacing:.18em}.combo b{display:block;font-size:48px;line-height:.9}.combo em{font-size:8px;font-weight:900;font-style:normal;letter-spacing:.16em;color:var(--cyan)}.combo>i{width:155px;margin:7px auto}.combo>i u{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--gold))}
.target{position:absolute;right:20px;bottom:20px;width:230px;padding:11px 13px}.target b{display:block;margin:4px 0 8px;font-size:10px}.target i u{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--red2),var(--gold))}
.counter-prompt{position:absolute;left:50%;top:29%;transform:translate(-50%,-50%) scale(.78);opacity:0;padding:11px 18px;border:1px solid rgba(255,211,106,.62);background:rgba(40,33,17,.82);text-align:center;transition:.13s ease}.counter-prompt.visible{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:0 0 50px rgba(255,211,106,.18)}.counter-prompt span{display:block;color:var(--gold);font-size:7px;letter-spacing:.18em}.counter-prompt b{display:block;margin-top:3px;font-size:18px}
.control-line{position:absolute;right:20px;bottom:92px;color:rgba(255,255,255,.34);font-size:7px;letter-spacing:.08em}
.pause-overlay article{width:min(430px,calc(100% - 28px));display:grid;gap:8px}.pause-overlay h2{margin-bottom:17px}.pause-overlay button{width:100%}.pause-overlay #gameOverStats{margin-bottom:15px;color:#b2b6b2}

.wave-banner{position:fixed;left:50%;top:46%;z-index:100;transform:translate(-50%,-50%) scale(.8);opacity:0;text-align:center;pointer-events:none}.wave-banner.visible{animation:wave 2s ease forwards}.wave-banner span{display:block;color:var(--cyan);font-size:9px;letter-spacing:.2em}.wave-banner b{display:block;font-size:100px;line-height:.85}.wave-banner em{color:#a9adaa;font-size:8px;font-style:normal;letter-spacing:.15em}@keyframes wave{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}20%,74%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.08)}}
.toast{position:fixed;left:50%;top:112px;z-index:110;transform:translate(-50%,-15px);opacity:0;padding:9px 13px;border:1px solid rgba(255,255,255,.16);background:rgba(25,28,28,.83);font-size:8px;font-weight:900;letter-spacing:.09em;transition:.18s ease}.toast.visible{opacity:1;transform:translate(-50%,0)}
.damage-flash{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 40%,rgba(206,36,58,.36));transition:.14s}.damage-flash.visible{opacity:1}
.hit-marker{position:fixed;left:50%;top:50%;z-index:71;opacity:0;transform:translate(-50%,-50%);font-size:32px;text-shadow:0 1px 6px #000}.hit-marker.visible{animation:hit .22s ease}@keyframes hit{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}40%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.7)}}
@media(max-width:900px){.menu-content{grid-template-columns:1fr;width:calc(100% - 28px)}.visual-profile{display:none}.hero-copy h1{font-size:73px}.topbar,.main-menu footer{padding-left:15px;padding-right:15px}.controls-grid{grid-template-columns:1fr}.objective{width:220px}.telemetry{grid-template-columns:repeat(3,55px)}.vitality{width:215px}.control-line{display:none}}


/* V3 clear visibility and visual-profile controls */
.visual-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 22px;
}
.visual-options button {
  min-height: 100px;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
  color: white;
  text-align: left;
  cursor: pointer;
  transition: .18s ease;
}
.visual-options button:hover,
.visual-options button.selected {
  transform: translateY(-2px);
  border-color: var(--cyan);
  background: rgba(104,232,255,.10);
  box-shadow: 0 13px 34px rgba(0,0,0,.22);
}
.visual-options b {
  display: block;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: .13em;
}
.visual-options span {
  display: block;
  margin-top: 7px;
  color: #b6bbb7;
  font-size: 9px;
  line-height: 1.55;
}
.camera-status {
  display: grid;
  gap: 5px;
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--cyan);
  background: rgba(104,232,255,.055);
}
.camera-status span {
  color: #929894;
  font-size: 7px;
  letter-spacing: .16em;
}
.camera-status b {
  font-size: 9px;
  letter-spacing: .08em;
}
.visibility-badge {
  position: fixed;
  left: 50%;
  top: 18px;
  z-index: 39;
  transform: translateX(-50%);
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(28,31,31,.66);
  color: rgba(255,255,255,.72);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .13em;
  pointer-events: none;
  backdrop-filter: blur(8px);
}
@media(max-width:700px) {
  .visual-options { grid-template-columns: 1fr; }
  .visibility-badge { display: none; }
}


/* =========================================================
   V5 MOTION-REFORGED BOOT SEQUENCE
   ========================================================= */
.boot-screen {
  overflow: hidden;
  align-items: stretch;
  justify-content: stretch;
  color: #f5f8f4;
  background:
    radial-gradient(circle at 25% 45%, rgba(201,51,66,.16), transparent 28rem),
    radial-gradient(circle at 78% 34%, rgba(104,232,255,.13), transparent 32rem),
    linear-gradient(145deg,#090d12,#12171c 57%,#080b0f);
}
.boot-grid {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center,#000,transparent 78%);
  animation: bootGrid 12s linear infinite;
}
@keyframes bootGrid {
  to { transform: translate3d(46px,46px,0); }
}
.boot-glow {
  position: absolute;
  width: 50vw;
  height: 50vw;
  right: -12vw;
  top: -20vw;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(104,232,255,.15),transparent 65%);
  filter: blur(10px);
  animation: bootGlow 4s ease-in-out infinite alternate;
}
@keyframes bootGlow { to { opacity: .45; transform: scale(1.12); } }
.boot-layout {
  position: relative;
  width: min(1180px,calc(100% - 42px));
  margin: auto;
  display: grid;
  grid-template-columns: .76fr 1.24fr;
  gap: clamp(30px,7vw,110px);
  align-items: center;
}
.boot-visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
}
.boot-visual .boot-robot {
  position: relative;
  width: 176px;
  height: 142px;
  z-index: 4;
  filter: drop-shadow(0 34px 50px rgba(0,0,0,.46));
  animation: bootRobotFloat 2.6s ease-in-out infinite;
}
@keyframes bootRobotFloat {
  50% { transform: translateY(-12px) rotate(-2deg); }
}
.boot-visual .boot-robot span {
  border-radius: 74px 74px 50px 50px;
  background:
    linear-gradient(112deg,#f3f4ed 0 29%,#ca3545 30% 69%,#f3f4ed 70%);
  box-shadow:
    inset -22px -22px 30px rgba(0,0,0,.18),
    inset 16px 11px 24px rgba(255,255,255,.24),
    0 0 55px rgba(201,51,66,.19);
}
.boot-visual .boot-robot:after {
  left: 31px;
  right: 31px;
  top: 68px;
  height: 34px;
  border-radius: 16px;
}
.boot-visual .boot-robot i {
  top: 79px;
  width: 36px;
  height: 12px;
  box-shadow: 0 0 24px #68e8ff;
}
.boot-visual .boot-robot i:nth-child(2) { left: 48px; }
.boot-visual .boot-robot i:nth-child(3) { right: 48px; }
.boot-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 22px rgba(104,232,255,.035);
}
.orbit-a { width: 300px; height: 300px; animation: bootSpin 8s linear infinite; }
.orbit-b { width: 380px; height: 210px; border-color: rgba(201,51,66,.24); animation: bootSpinReverse 6s linear infinite; }
.orbit-c { width: 220px; height: 410px; border-color: rgba(104,232,255,.19); animation: bootSpin 10s linear infinite; }
.boot-orbit:after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #68e8ff;
  box-shadow: 0 0 18px #68e8ff;
}
.orbit-b:after { background: #ef5a65; box-shadow: 0 0 18px #ef5a65; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@keyframes bootSpinReverse { to { transform: rotate(-360deg); } }
.boot-pulse {
  position: absolute;
  width: 172px;
  height: 172px;
  border-radius: 50%;
  border: 1px solid rgba(104,232,255,.55);
  animation: bootPulse 1.7s ease-out infinite;
}
@keyframes bootPulse {
  from { transform: scale(.55); opacity: .8; }
  to { transform: scale(2.5); opacity: 0; }
}
.boot-copy {
  min-width: 0;
}
.boot-kicker {
  color: #68e8ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .23em;
}
.boot-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin: 11px 0 25px;
}
.boot-heading h1 {
  margin: 0;
  color: white;
  font-size: clamp(52px,7vw,100px);
  line-height: .79;
  letter-spacing: -.075em;
  text-align: left;
}
.boot-heading h1 em {
  color: #d8ddd8;
  font-style: normal;
}
.boot-heading strong {
  color: #68e8ff;
  font: 900 clamp(28px,5vw,66px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
  text-shadow: 0 0 28px rgba(104,232,255,.22);
}
.boot-copy > p {
  margin: 0 0 11px;
  color: #e4e9e4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .17em;
}
.boot-copy .boot-track {
  width: 100%;
  height: 5px;
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.boot-copy .boot-track b {
  width: 0;
  background: linear-gradient(90deg,#c93342,#f06b67 42%,#68e8ff);
  box-shadow: 0 0 22px rgba(104,232,255,.35);
}
.boot-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 9px;
  color: #78858f;
  font-size: 8px;
  letter-spacing: .12em;
}
.boot-meta b {
  min-width: 0;
  color: #b8c2c7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.boot-stages {
  display: grid;
  grid-template-columns: repeat(5,1fr);
  gap: 6px;
  margin-top: 25px;
}
.boot-stages span {
  padding: 10px 8px;
  border: 1px solid rgba(255,255,255,.08);
  color: #59656d;
  background: rgba(255,255,255,.018);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .09em;
  transition: .2s ease;
}
.boot-stages span.active {
  color: #f1f8f6;
  border-color: rgba(104,232,255,.36);
  background: rgba(104,232,255,.075);
  box-shadow: inset 0 -2px #68e8ff;
}
.boot-stages span.done {
  color: #8eeeb9;
  border-color: rgba(113,255,176,.24);
}
.boot-tip {
  margin-top: 14px;
  color: #65717a;
  font-size: 7px;
  letter-spacing: .10em;
  line-height: 1.6;
}
.mobility {
  position: absolute;
  left: 330px;
  bottom: 20px;
  width: 165px;
  padding: 10px 12px;
}
.mobility div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobility span {
  color: #a1a5a0;
  font-size: 7px;
  letter-spacing: .13em;
}
.mobility b {
  font-size: 8px;
}
.mobility > i {
  display: block;
  height: 3px;
  margin: 5px 0 8px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
}
.mobility > i u {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,#c93342,#68e8ff);
  transition: width .12s linear;
}
@media(max-width:900px) {
  .boot-layout { grid-template-columns: 1fr; width: calc(100% - 28px); }
  .boot-visual { display: none; }
  .boot-heading h1 { font-size: 64px; }
  .boot-stages { grid-template-columns: 1fr; }
  .boot-stages span { padding: 7px 8px; }
  .mobility { left: 20px; bottom: 143px; width: 215px; }
}