:root{--bg:#050713;--panel:#081027;--cyan:#21e9ff;--pink:#ff2bab;--yellow:#ffd52d;--violet:#8a65ff;--green:#3dff99;--white:#f5f7ff;--muted:#8293bb;--line:rgba(65,111,177,.5);--pixel:"Press Start 2P",monospace;--display:"Chakra Petch",sans-serif;--mono:"Share Tech Mono",monospace}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;color:var(--white);font-family:var(--display);background:radial-gradient(circle at 35% 28%,rgba(38,54,157,.23),transparent 34%),#050713;overflow-x:hidden}body::after{content:"";position:fixed;z-index:30;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0,rgba(255,255,255,.018) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}.page-noise{position:fixed;inset:0;z-index:29;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}a,button{color:inherit;font:inherit}.defender-header{position:relative;z-index:20;height:68px;padding:0 3vw;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line);background:rgba(4,7,18,.95)}.defender-header::after{content:"";position:absolute;left:3%;right:3%;bottom:-3px;height:2px;background:linear-gradient(90deg,var(--pink) 0 15%,transparent 15% 73%,var(--cyan) 73% 94%,transparent 94%)}.arcade-brand{display:flex;align-items:center;gap:12px;width:max-content;text-decoration:none}.arcade-brand>span:last-child{display:flex;align-items:baseline;gap:7px}.arcade-brand b{font:12px var(--pixel);text-shadow:2px 0 var(--pink),-1px 0 var(--cyan)}.arcade-brand small{color:var(--cyan);font:14px var(--mono)}.brand-mark{position:relative;width:29px;height:29px;border:2px solid var(--cyan);transform:rotate(45deg);box-shadow:0 0 14px rgba(33,233,255,.38)}.brand-mark::before,.brand-mark::after{content:"";position:absolute;width:7px;height:7px}.brand-mark::before{left:5px;top:5px;background:var(--pink)}.brand-mark::after{right:4px;bottom:4px;background:var(--yellow)}.defender-header nav{display:flex;gap:36px}.defender-header nav a{position:relative;color:#9aa8c6;text-decoration:none;font:13px var(--mono);letter-spacing:1px}.defender-header nav a:hover,.defender-header nav a.active{color:#fff}.defender-header nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-24px;height:3px;background:var(--pink);box-shadow:0 0 10px var(--pink)}.online{justify-self:end;color:var(--green);font:13px var(--mono);letter-spacing:1px}.online i,.signal-chip i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.5s steps(2) infinite}
.defender-shell{padding:15px 1.3vw 24px}.title-row{height:72px;display:flex;align-items:center;gap:18px;position:relative}.unit-label{position:absolute;left:4px;top:1px;color:var(--cyan);font:8px var(--pixel)}.title-row h1{margin:14px 0 0 1.4vw;font:clamp(27px,3.3vw,48px) var(--pixel);text-shadow:4px 0 rgba(33,233,255,.75),-3px 3px rgba(255,43,171,.6)}.title-glitch{display:flex;gap:5px;margin-top:14px}.title-glitch i{display:block;width:35px;height:3px;background:var(--cyan);box-shadow:19px 8px var(--pink)}.title-glitch i:nth-child(2){width:16px}.title-glitch i:nth-child(3){width:7px}.defender-layout{display:grid;grid-template-columns:minmax(720px,2fr) minmax(390px,.98fr);gap:15px}.battle-panel{min-width:0;border:4px solid var(--pink);background:#080b22;box-shadow:0 0 22px rgba(255,43,171,.22),inset 0 0 25px rgba(33,233,255,.07)}.battle-hud{height:62px;padding:7px 14px;display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:center;gap:16px;background:#071027}.top-hud>div{height:45px;padding:9px 16px;display:flex;align-items:center;justify-content:space-between;border:2px solid var(--cyan);clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);font:11px var(--pixel)}.top-hud>div:nth-child(2){justify-content:center;gap:12px}.top-hud b{color:var(--yellow)}.top-hud em{color:var(--cyan);font-style:normal}.battlefield{position:relative;height:calc(100vh - 237px);min-height:535px;max-height:700px;overflow:hidden;border-top:1px solid rgba(33,233,255,.4);border-bottom:1px solid rgba(33,233,255,.4);background:#050919}.battlefield canvas{position:absolute;inset:0;width:100%;height:100%}.battle-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(33,233,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(33,233,255,.09) 1px,transparent 1px);background-size:58px 58px}.battle-scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.14) 4px 5px)}.game-message{position:absolute;z-index:5;left:50%;top:55%;min-width:310px;padding:15px 20px;transform:translate(-50%,-50%);text-align:center;border:2px solid var(--cyan);background:rgba(4,8,25,.92);box-shadow:5px 5px 0 var(--pink);transition:.25s}.game-message.hidden{opacity:0;transform:translate(-50%,-35%);pointer-events:none}.game-message b,.game-message span{display:block}.game-message b{font:12px var(--pixel)}.game-message span{margin-top:9px;color:var(--cyan);font:13px var(--mono)}.bottom-hud{grid-template-columns:1fr 2fr 1fr;height:58px;padding:7px 13px}.bottom-hud>div{height:42px;display:flex;align-items:center;padding:0 15px;border:2px solid var(--cyan);clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);font:10px var(--pixel)}.life-hud{gap:14px}.life-hud>div{display:flex;gap:7px}.life-hud i{position:relative;width:18px;height:16px;background:var(--pink);transform:rotate(45deg);box-shadow:0 0 7px var(--pink)}.life-hud i::before,.life-hud i::after{content:"";position:absolute;width:18px;height:16px;border-radius:50%;background:var(--pink)}.life-hud i::before{left:-9px}.life-hud i::after{top:-9px}.life-hud i.lost{filter:grayscale(1);opacity:.2;box-shadow:none}.charge-hud{gap:13px}.charge-hud span{white-space:nowrap}.charge-hud span b{color:var(--yellow)}.charge-hud>div{flex:1;height:18px;border:2px solid #59678c;background:#090b20}.charge-hud i{display:block;width:0;height:100%;background:repeating-linear-gradient(110deg,var(--cyan) 0 15px,#071832 15px 20px);box-shadow:0 0 9px var(--cyan);transition:width .15s}.combo-hud{justify-content:space-between}.combo-hud b{color:var(--yellow);font-size:14px}
.control-panel{min-width:0}.neon-panel{height:100%;min-height:690px;padding:10px 12px;border:2px solid var(--cyan);background:linear-gradient(145deg,rgba(9,17,42,.98),rgba(5,8,23,.99));box-shadow:0 0 18px rgba(33,233,255,.1)}.panel-heading{display:flex;gap:10px;align-items:center;padding:1px 5px 10px;border-bottom:2px solid var(--cyan)}.panel-heading span,.panel-heading b{white-space:nowrap;font:clamp(9px,1vw,15px) var(--pixel)}.panel-heading b{color:var(--cyan)}.camera-view{position:relative;height:245px;margin-top:9px;overflow:hidden;border:2px solid var(--cyan);background:#03050e}.camera-view video,.camera-view canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-view video{filter:saturate(.72) contrast(1.1) brightness(.8)}.camera-view canvas{z-index:4}.camera-grid{position:absolute;z-index:3;inset:0;background-image:linear-gradient(rgba(33,233,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(33,233,255,.11) 1px,transparent 1px);background-size:30px 30px}.camera-placeholder{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(31,44,91,.9),#050711 70%);text-align:center}.camera-placeholder.hidden{display:none}.camera-placeholder>span{font-size:52px}.camera-placeholder b{margin:8px 0;color:var(--cyan);font:9px var(--pixel)}.camera-placeholder small{color:var(--muted);font:11px var(--mono)}.corner{position:absolute;z-index:7;width:28px;height:28px;border-style:solid;border-color:var(--pink)}.corner.tl{left:12px;top:12px;border-width:4px 0 0 4px}.corner.tr{right:12px;top:12px;border-width:4px 4px 0 0}.corner.bl{left:12px;bottom:12px;border-width:0 0 4px 4px}.corner.br{right:12px;bottom:12px;border-width:0 4px 4px 0}.signal-chip{position:absolute;z-index:8;left:16px;top:14px;padding:6px 10px;border:1px solid var(--green);color:var(--green);background:rgba(4,18,25,.9);font:8px var(--pixel)}.signal-chip.error{border-color:var(--pink);color:var(--pink)}.signal-chip.error i{background:var(--pink);box-shadow:0 0 8px var(--pink)}.detected-bar{height:37px;margin-top:8px;padding-left:10px;display:flex;align-items:center;justify-content:space-between;background:#050819;border-left:3px solid var(--cyan)}.detected-bar span{color:#9aa8c5;font:9px var(--pixel)}.detected-bar b{align-self:stretch;min-width:180px;padding:11px 16px;text-align:center;color:var(--white);background:linear-gradient(120deg,#5d104e,var(--pink));clip-path:polygon(15px 0,100% 0,calc(100% - 15px) 100%,0 100%);font:9px var(--pixel)}.gesture-list{margin-top:9px;border:1px solid #314a77}.gesture-list>div{height:51px;padding:0 12px;display:grid;grid-template-columns:55px 1fr 105px;align-items:center;border-bottom:1px solid #314a77;color:#a4b1cf;transition:.18s}.gesture-list>div:last-child{border:0}.gesture-list>div.active{color:#fff;border:2px solid var(--pink);background:rgba(102,14,82,.35);box-shadow:inset 0 0 14px rgba(255,43,171,.18),0 0 8px rgba(255,43,171,.3)}.gesture-list i{color:var(--cyan);font:28px var(--display);font-style:normal}.gesture-list span{font:9px var(--pixel)}.gesture-list em{justify-self:end;color:var(--green);font:9px var(--pixel);font-style:normal}.gesture-list>div.active em::after{content:"ACTIVE"}.meter{display:flex!important;gap:4px}.meter b{display:block;width:14px;height:8px;transform:skew(-15deg);background:#26355a}.meter b.on{background:var(--cyan);box-shadow:0 0 5px var(--cyan)}.bomb-meter b.on{background:var(--yellow);box-shadow:0 0 5px var(--yellow)}.how-play{margin-top:10px}.how-play h2{margin:0;padding:8px 10px;border-bottom:2px solid var(--cyan);color:var(--cyan);font:10px var(--pixel)}.how-play ol{margin:7px 0 0;padding:0 0 0 27px}.how-play li{margin:7px 0;color:#aab5ce;font:12px var(--mono)}.how-play li b{color:var(--white)}.control-actions{display:grid;grid-template-columns:1fr 95px;gap:8px;margin-top:12px}.control-actions button{height:39px;border:1px solid var(--line);color:var(--pink);background:#081027;font:8px var(--pixel);cursor:pointer}.control-actions button:hover{border-color:var(--cyan);color:var(--cyan)}
.toast{position:fixed;z-index:50;left:50%;bottom:22px;min-width:330px;padding:13px 20px;transform:translate(-50%,140%);opacity:0;text-align:center;border:2px solid var(--cyan);background:rgba(5,7,19,.96);box-shadow:5px 5px 0 var(--pink);font:9px var(--pixel);transition:.25s}.toast.show{transform:translate(-50%,0);opacity:1}.game-over{position:fixed;z-index:60;inset:0;display:none;place-items:center}.game-over.open{display:grid}.game-over .backdrop{position:absolute;inset:0;background:rgba(2,3,12,.85);backdrop-filter:blur(5px)}.game-over section{position:relative;width:min(440px,90vw);padding:32px;text-align:center;border:3px solid var(--pink);background:linear-gradient(145deg,#111a3d,#080b1e);box-shadow:8px 8px 0 var(--cyan),0 0 55px rgba(255,43,171,.28)}.game-over section>span{color:var(--cyan);font:9px var(--pixel)}.game-over h2{margin:18px 0;font:20px var(--pixel)}.game-over section>div{display:grid;grid-template-columns:1fr 1fr;gap:10px}.game-over p{padding:12px;border:1px solid var(--line);color:var(--muted);font:11px var(--mono)}.game-over p b{display:block;margin-top:10px;color:var(--yellow);font:15px var(--pixel)}.game-over button,.game-over a{display:block;width:100%;padding:14px;margin-top:10px;border:2px solid var(--cyan);color:#fff;background:#0b3152;text-decoration:none;font:9px var(--pixel);cursor:pointer}.game-over a{border-color:#3b496d;background:#080c20}
@keyframes blink{50%{opacity:.35}}@media(max-width:1220px){.defender-layout{grid-template-columns:minmax(630px,1.5fr) minmax(390px,.9fr)}.battlefield{min-height:500px}.top-hud>div{font-size:8px;padding:8px}.gesture-list>div{grid-template-columns:45px 1fr 82px}.gesture-list span{font-size:7px}}@media(max-width:980px){.defender-header{grid-template-columns:1fr 1fr}.defender-header nav{display:none}.defender-layout{grid-template-columns:1fr}.battlefield{height:620px;max-height:none}.control-panel{min-height:0}.camera-view{height:310px}}@media(max-width:650px){.defender-header{padding:0 16px}.arcade-brand b{font-size:9px}.arcade-brand small,.online{display:none}.defender-shell{padding:10px}.title-row{height:65px}.title-row h1{margin-left:0;font-size:22px}.title-glitch{display:none}.battle-panel{border-width:2px}.battle-hud{gap:5px;padding:6px;height:55px}.top-hud>div{height:40px;padding:5px;font-size:6px}.top-hud>div:nth-child(2) em{display:none}.battlefield{height:520px;min-height:0}.bottom-hud{grid-template-columns:1fr 1.6fr 1fr}.bottom-hud>div{padding:0 6px;font-size:6px}.life-hud{gap:7px}.life-hud i{width:11px;height:10px}.life-hud i::before,.life-hud i::after{width:11px;height:10px}.life-hud i::before{left:-5px}.life-hud i::after{top:-5px}.combo-hud b{font-size:8px}.camera-view{height:235px}.panel-heading span,.panel-heading b{font-size:8px}.detected-bar b{min-width:140px;font-size:7px}.gesture-list>div{grid-template-columns:40px 1fr 70px}.gesture-list span{font-size:6px}.how-play li{font-size:11px}.control-actions{grid-template-columns:1fr}.toast{width:calc(100% - 30px);min-width:0;font-size:7px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

/* Integrated final visual refinements. */
.battle-grid {
  opacity: .45;
  background-image: linear-gradient(90deg, rgba(33, 233, 255, .09) 1px, transparent 1px);
  background-size: 96px 100%;
}

.life-hud i {
  display: block;
  width: 22px;
  height: 20px;
  background: var(--pink);
  clip-path: polygon(50% 100%, 5% 52%, 5% 26%, 18% 8%, 39% 8%, 50% 22%, 61% 8%, 82% 8%, 95% 26%, 95% 52%);
  transform: none;
  box-shadow: 0 0 7px var(--pink);
}

.life-hud i::before,
.life-hud i::after {
  display: none;
}

.gesture-list i {
  font-family: "Segoe UI Symbol", var(--display);
  filter: grayscale(1) brightness(1.7);
}

.battle-panel {
  background: #050716;
}

.battlefield {
  height: calc(100vh - 300px);
  min-height: 520px;
  max-height: 635px;
}

.battlefield::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 55px rgba(1, 3, 15, .65);
}

@media (max-width: 650px) {
  .battlefield { height: 520px; min-height: 0; }
  .life-hud > div { gap: 3px; }
  .life-hud i { width: 10px; height: 10px; }
}

@media (min-width: 651px) and (max-width: 980px) {
  .battlefield { height: 620px; max-height: none; }
}

/* Keep the 960 × 690 game canvas undistorted on narrow screens. */
@media (max-width:650px) {
  .defender-shell{padding-inline:8px}
  .defender-layout,.battle-panel,.control-panel{min-width:0}
  .battlefield{width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:960/690}
  .battle-hud{min-width:0;gap:3px;padding-inline:3px}
  .battle-hud > div{min-width:0;overflow:hidden}
  .top-hud > div{padding-inline:4px}
  .top-hud > div{flex-direction:column;justify-content:center;gap:3px;text-align:center}
  .top-hud > div:nth-child(2){gap:3px}
  .bottom-hud{grid-template-columns:1.15fr 1.35fr .85fr}
  .bottom-hud > div{min-width:0}
  .life-hud,.charge-hud{gap:4px}
  .charge-hud span{font-size:0}
  .charge-hud span b{font-size:6px}
  .combo-hud{justify-content:center}
  .combo-hud span{display:none}
  .game-message{min-width:0;width:min(280px,82%);padding:10px 8px}
  .game-message b{font-size:9px}
  .game-message span{font-size:10px}
  .camera-view{height:auto;aspect-ratio:4/3}
  .game-over section{padding:24px 18px}
}