/* SHADOW: HORDE PROTOCOL — dark cyberpunk / neon violet / sol-teal */
:root{
  --bg:#04050a; --bg2:#0a0c16; --panel:#0d1020;
  --violet:#7B2FF2; --cyan:#38E8FF; --sol:#14F195;
  --red:#ff3b5c; --amber:#ffc83b;
  --ink:#e8eaf6; --dim:#8b90ad;
  --line:rgba(123,47,242,.35);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
  font-family:'Rajdhani',system-ui,sans-serif;user-select:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.hidden{display:none!important}

#game{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;background:var(--bg)}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column}
.modal{align-items:center;justify-content:center;background:rgba(2,3,8,.82);backdrop-filter:blur(6px);z-index:30}
.panel{background:linear-gradient(160deg,#0e1122,#070912);border:1px solid var(--line);
  border-radius:16px;padding:34px 42px;text-align:center;max-width:min(92vw,560px);
  box-shadow:0 0 60px rgba(123,47,242,.25), inset 0 0 40px rgba(56,232,255,.03)}
.panel h2{font-family:'Orbitron';font-size:1.5rem;letter-spacing:.12em;color:var(--cyan);margin-bottom:14px}

/* ---------- menu ---------- */
#menu{background:
  radial-gradient(1000px 500px at 75% 20%, rgba(123,47,242,.18), transparent 60%),
  radial-gradient(800px 500px at 15% 85%, rgba(20,241,149,.08), transparent 60%),
  var(--bg);
  overflow-y:auto;overflow-x:hidden;padding:0 clamp(16px,4vw,56px)}
.menu-bg-grid{position:fixed;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(123,47,242,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,47,242,.07) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse at 50% 40%,black 30%,transparent 75%)}
.menu-scanline{position:fixed;inset:0;pointer-events:none;opacity:.25;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.35) 3px 4px)}

.menu-top{display:flex;justify-content:space-between;align-items:center;padding:22px 0 8px;position:relative;z-index:2}
.logo-row{display:flex;align-items:center;gap:12px}
.sigil{width:34px;height:34px;filter:drop-shadow(0 0 8px rgba(123,47,242,.8))}
.logo-type{font-family:'Orbitron';font-weight:700;letter-spacing:.18em;font-size:.95rem}
.logo-type em{color:var(--sol);font-style:normal}

.menu-hero{display:flex;gap:clamp(20px,4vw,70px);align-items:center;padding:clamp(10px,3vh,40px) 0;position:relative;z-index:2;flex-wrap:wrap}
.hero-left{flex:1 1 420px;min-width:300px}
.tagline{font-size:.8rem;letter-spacing:.3em;color:var(--sol);margin-bottom:12px;font-weight:600}
.title{font-family:'Orbitron';font-weight:900;font-size:clamp(2.6rem,7vw,5.2rem);line-height:.95;
  background:linear-gradient(100deg,#fff 10%,var(--cyan) 45%,var(--violet) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px rgba(123,47,242,.45));margin-bottom:16px}
.sub{max-width:520px;color:var(--dim);font-size:1.08rem;line-height:1.5;margin-bottom:26px}
.sub b{color:var(--ink)}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:20px}
.play-btn{position:relative;font-family:'Orbitron';font-weight:700;letter-spacing:.14em;font-size:1.05rem;
  padding:16px 38px;color:#04050a;border-radius:10px;
  background:linear-gradient(100deg,var(--cyan),var(--sol));
  box-shadow:0 0 28px rgba(56,232,255,.45),0 0 60px rgba(20,241,149,.2);
  transition:transform .12s,box-shadow .12s}
.play-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 40px rgba(56,232,255,.7)}
.play-btn.small{padding:12px 30px;font-size:.9rem;margin-bottom:12px}
.ghost-btn{font-family:'Orbitron';font-size:.78rem;letter-spacing:.12em;padding:13px 22px;border-radius:10px;
  border:1px solid var(--line);color:var(--dim);transition:all .15s}
.ghost-btn:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 16px rgba(56,232,255,.25)}

.controls-hint{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--dim)}
.controls-hint b{color:var(--cyan);font-family:'Orbitron';font-size:.72rem}

.hero-right{flex:0 1 380px;min-width:260px;display:flex;justify-content:center}
.hero-frame{position:relative;width:min(480px,84vw)}
.hero-img{width:100%;display:block;border-radius:16px;border:1px solid var(--line);
  box-shadow:0 0 50px rgba(123,47,242,.35)}
.hero-stat-chip{position:absolute;font-family:'Orbitron';font-size:.62rem;letter-spacing:.15em;
  padding:7px 12px;border-radius:7px;background:rgba(6,8,16,.85);border:1px solid var(--line);backdrop-filter:blur(4px)}
.chip-a{top:14px;left:-18px;color:var(--sol);border-color:rgba(20,241,149,.4);animation:float 4s ease-in-out infinite}
.chip-b{bottom:60px;right:-14px;color:var(--red);border-color:rgba(255,59,92,.4);animation:float 5s ease-in-out infinite reverse}
@keyframes float{50%{transform:translateY(-8px)}}

/* selector strip */
.select-strip{position:relative;z-index:2;display:flex;flex-direction:column;gap:20px;padding-bottom:22px}
.select-label{font-family:'Orbitron';font-size:.7rem;letter-spacing:.25em;color:var(--dim);margin-bottom:8px}
.mini-note{color:var(--sol);letter-spacing:.05em;text-transform:none;font-family:'Rajdhani';font-size:.75rem}
.cards{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.sel-card{flex:0 0 auto;position:relative;min-width:170px;text-align:left;padding:14px 64px 14px 16px;border-radius:12px;
  background:var(--panel);border:1px solid rgba(139,144,173,.15);display:flex;flex-direction:column;gap:3px;
  cursor:pointer;transition:transform .12s,border-color .12s,box-shadow .12s}
.sel-card:not(.locked):hover{transform:translateY(-3px);border-color:rgba(56,232,255,.5)}
.sel-card b{font-family:'Orbitron';font-size:.72rem;letter-spacing:.1em}
.sel-card i{font-style:normal;font-size:.8rem;color:var(--dim)}
.sel-card u{text-decoration:none;position:absolute;top:10px;right:10px;font-family:'Orbitron';font-size:.55rem;letter-spacing:.1em;
  padding:3px 7px;border-radius:5px}
.sel-card.live u{color:var(--sol);background:rgba(20,241,149,.1);border:1px solid rgba(20,241,149,.35)}
.sel-card.locked{opacity:.45;filter:saturate(.4)}
.sel-card.locked u{color:var(--dim);background:rgba(139,144,173,.08);border:1px solid rgba(139,144,173,.2)}
.sel-card.selected{border-color:var(--cyan);box-shadow:0 0 18px rgba(56,232,255,.25)}
.sel-card.skin{align-items:center;text-align:center;min-width:132px;padding:12px 12px 30px}
.sel-card.skin b,.sel-card.skin i{text-align:center;width:100%}
.sel-card.skin u{top:auto;bottom:8px;right:50%;transform:translateX(50%);white-space:nowrap;
  color:var(--cyan);background:rgba(56,232,255,.1);border:1px solid rgba(56,232,255,.3)}
.sel-card.skin.selected u{color:var(--sol);background:rgba(20,241,149,.14);border-color:rgba(20,241,149,.45)}
.sel-card.skin{min-width:150px;padding-bottom:46px}
.sel-card.skin canvas{width:104px;height:104px;border-radius:8px;margin-bottom:6px;background:#080a14;
  border:1px solid rgba(139,144,173,.14)}
.sel-card.skin .c-role{font-size:.66rem;color:var(--dim);letter-spacing:.04em;margin-top:-2px}
.sel-card.skin .c-weap{font-family:'Orbitron';font-size:.56rem;letter-spacing:.06em;margin-top:5px;font-weight:700}
.sel-card.skin .c-perk{font-size:.66rem;color:var(--sol);letter-spacing:.02em;margin-top:2px}
.menu-foot{position:relative;z-index:2;padding:8px 0 26px;font-size:.75rem;color:var(--dim);letter-spacing:.04em}

/* ---------- leaderboard ---------- */
.lb-tabs{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.lb-tab{font-family:'Orbitron';font-size:.62rem;letter-spacing:.15em;padding:6px 12px;border-radius:6px}
.lb-tab.on{color:var(--sol);border:1px solid rgba(20,241,149,.4)}
.lb-tab.off{color:var(--dim);border:1px solid rgba(139,144,173,.2)}
.lb-list{list-style:none;margin:0 0 18px;min-width:300px;text-align:left}
.lb-list li{display:flex;justify-content:space-between;padding:7px 10px;border-bottom:1px solid rgba(139,144,173,.12);font-size:1rem}
.lb-list li b{color:var(--cyan);font-family:'Orbitron';font-size:.8rem}
.lb-list li.empty{justify-content:center;color:var(--dim)}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;height:100vh;height:100dvh;z-index:15;pointer-events:none;font-family:'Orbitron'}
/* Inset the top HUD below any notch / mobile browser bar so the HP/XP bars are
   never occluded when the game can't take true fullscreen (esp. iOS Safari). */
.hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding-top:max(14px,env(safe-area-inset-top));
  padding-right:max(18px,env(safe-area-inset-right));
  padding-bottom:14px;
  padding-left:max(18px,env(safe-area-inset-left))}
.hud-left{width:min(300px,34vw)}
.bar{position:relative;height:16px;border-radius:8px;background:rgba(10,12,24,.75);border:1px solid var(--line);
  overflow:hidden;margin-bottom:6px}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:.58rem;letter-spacing:.12em;color:#fff;text-shadow:0 0 4px #000}
#hpFill{height:100%;width:100%;background:linear-gradient(90deg,#ff3b5c,#ff7a3b);transition:width .15s;
  box-shadow:0 0 12px rgba(255,59,92,.6)}
.xp-bar{height:10px}
#xpFill{height:100%;width:0%;background:linear-gradient(90deg,var(--violet),var(--cyan));transition:width .2s;
  box-shadow:0 0 10px rgba(123,47,242,.7)}
.hud-center{text-align:center}
#waveBig{font-size:1.15rem;font-weight:700;letter-spacing:.2em;color:var(--cyan);text-shadow:0 0 14px rgba(56,232,255,.7)}
#waveSub{font-size:.62rem;letter-spacing:.18em;color:var(--dim);margin-top:3px}
.hud-right{text-align:right}
.score-line{font-size:.72rem;letter-spacing:.12em}
.score-line b{color:var(--sol);font-size:.95rem}
.score-line.dim{color:var(--dim);margin-top:4px;font-size:.62rem}

.hud-abilities{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:12px}
.ab{position:relative;width:52px;height:52px;border-radius:12px;background:rgba(10,12,24,.8);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.ab svg{width:26px;height:26px;color:var(--cyan);filter:drop-shadow(0 0 4px rgba(56,232,255,.5))}
.ab em{font-style:normal;font-size:.5rem;letter-spacing:.1em;color:var(--dim);margin-top:2px}
.ab .cd{position:absolute;left:0;bottom:0;width:100%;height:0%;background:rgba(123,47,242,.45)}
.ab.ready{box-shadow:0 0 14px rgba(56,232,255,.35)}

#weaponHud{position:fixed;bottom:20px;left:20px;display:flex;flex-direction:column;gap:1px;
  padding:8px 14px;border-radius:10px;background:rgba(10,12,24,.82);border:1px solid var(--line);min-width:132px}
#weaponHud .w-cat{font-size:.5rem;letter-spacing:.28em;color:var(--dim);font-family:'Orbitron'}
#weaponHud b{font-family:'Orbitron';font-size:.74rem;letter-spacing:.06em;color:var(--cyan);line-height:1.2}
#weaponHud #weapAmmo{font-family:'Orbitron';font-size:.9rem;font-weight:700;letter-spacing:.05em}
#weaponHud #weapAmmo.low{animation:ammo-blink .5s steps(2) infinite}
@keyframes ammo-blink{50%{opacity:.35}}
#weaponHud .w-alt{font-family:'Orbitron';font-size:.52rem;letter-spacing:.08em;margin-top:3px;
  padding-top:3px;border-top:1px solid rgba(139,144,173,.18);opacity:.85}

#announce{position:fixed;top:26vh;left:0;right:0;text-align:center;font-size:clamp(1.4rem,4vw,2.4rem);
  font-weight:900;letter-spacing:.25em;color:var(--violet);text-shadow:0 0 30px rgba(123,47,242,.9);
  opacity:0;transition:opacity .3s;pointer-events:none}
#announce.show{opacity:1}
#announce small{display:block;font-size:.9rem;color:var(--cyan);letter-spacing:.3em;margin-top:8px}

/* ---------- level up ---------- */
.lvl-title{color:var(--sol)!important}
.lvl-sub{color:var(--dim);margin-bottom:20px;font-size:.95rem}
.upg-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.upg-card{width:150px;padding:18px 14px;border-radius:12px;background:var(--panel);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:8px;transition:all .13s}
.upg-card:hover{transform:translateY(-4px);border-color:var(--sol);box-shadow:0 0 22px rgba(20,241,149,.3)}
.upg-card canvas{width:56px;height:56px;margin-bottom:4px;filter:drop-shadow(0 0 8px rgba(56,232,255,.35))}
.upg-card b{font-family:'Orbitron';font-size:.68rem;letter-spacing:.1em;color:var(--cyan)}
.upg-card span{font-size:.82rem;color:var(--dim);line-height:1.3}

/* ---------- game over ---------- */
.go-panel{min-width:min(92vw,460px)}
.go-title{color:var(--red)!important;font-size:1.9rem!important;text-shadow:0 0 24px rgba(255,59,92,.6)}
.go-flavor{color:var(--dim);margin-bottom:22px}
.go-stats{display:flex;justify-content:center;gap:26px;margin-bottom:16px;flex-wrap:wrap}
.go-stats div{display:flex;flex-direction:column}
.go-stats b{font-family:'Orbitron';font-size:1.5rem;color:var(--cyan)}
.go-stats span{font-size:.62rem;letter-spacing:.2em;color:var(--dim);font-family:'Orbitron'}
.go-best{color:var(--sol);font-family:'Orbitron';font-size:.72rem;letter-spacing:.15em;margin-bottom:20px;min-height:1em}
#gameOver .ghost-btn{margin-top:10px}
#restartBtn{margin-top:4px}

/* ---------- touch ---------- */
#touchUI{position:fixed;inset:0;height:100vh;height:100dvh;z-index:20;pointer-events:none}
/* Floating pads: repositioned under the thumb by JS. At rest they sit in the
   corners as a hint (dim); they brighten when live. pointer-events:none — all
   touch handling is global so you can grab the pad anywhere on your half. */
.stick{position:absolute;bottom:clamp(52px,10vh,70px);width:clamp(84px,18vh,124px);height:clamp(84px,18vh,124px);border-radius:50%;
  border:1px solid var(--line);background:rgba(10,12,24,.28);pointer-events:none;opacity:.45;transition:opacity .12s}
.stick.live{opacity:.95;border-color:var(--cyan);box-shadow:0 0 18px rgba(56,232,255,.3)}
#stickL{left:clamp(16px,3vw,26px)}#stickR{right:clamp(16px,3vw,26px)}
.stick .nub{position:absolute;left:50%;top:50%;width:clamp(36px,9vh,52px);height:clamp(36px,9vh,52px);border-radius:50%;
  transform:translate(-50%,-50%);background:rgba(56,232,255,.25);border:1px solid var(--cyan)}
.t-btn{position:absolute;pointer-events:auto;width:clamp(42px,10vh,54px);height:clamp(42px,10vh,54px);border-radius:50%;
  background:rgba(10,12,24,.6);border:1px solid var(--line);color:var(--cyan);display:flex;align-items:center;justify-content:center}
.t-btn svg{width:clamp(22px,5.5vh,28px);height:clamp(22px,5.5vh,28px);filter:drop-shadow(0 0 5px rgba(56,232,255,.45))}
#tDash{right:clamp(110px,20vh,160px);bottom:clamp(54px,10vh,78px)}
#tShield{right:clamp(86px,16vh,120px);bottom:clamp(110px,18vh,150px)}
#tScan{right:clamp(24px,5vw,40px);bottom:clamp(150px,24vh,200px)}
#tSwap{right:clamp(110px,19vh,150px);bottom:clamp(180px,25vh,220px)}
#tFullscreen{right:calc(clamp(14px,3vw,22px) + env(safe-area-inset-right));top:calc(clamp(14px,3vh,22px) + env(safe-area-inset-top));bottom:auto;width:clamp(36px,8vh,46px);height:clamp(36px,8vh,46px)}
#tFullscreen svg{width:clamp(18px,4.5vh,24px);height:clamp(18px,4.5vh,24px)}

/* ---------- rotate to landscape ---------- */
#rotateHint{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:#04050a;text-align:center;padding:24px}
#rotateHint .rotate-icon{font-size:6rem;color:var(--cyan);animation:rotatePulse 1.6s ease-in-out infinite;
  text-shadow:0 0 30px rgba(56,232,255,.6)}
#rotateHint .rotate-text{font-family:'Orbitron';font-size:1.4rem;letter-spacing:.22em;color:#fff;margin-top:18px}
#rotateHint .rotate-sub{color:var(--dim);font-size:.95rem;margin-top:10px;max-width:260px;line-height:1.4}
@keyframes rotatePulse{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.12)}}

@media (max-width:760px){
  .menu-hero{flex-direction:column-reverse;text-align:center}
  .cta-row,.controls-hint{justify-content:center}
  .hud-abilities{display:none}
  .hero-frame{width:min(240px,60vw)}
  .panel{padding:26px 20px}
}