/* ============================================================
   X-WING · STELLAR ASSAULT  —  HUD styling
   ============================================================ */
:root{
  --cyan:#5ff0ff;
  --cyan-d:#0b3c47;
  --amber:#ffb347;
  --red:#ff4550;
  --green:#57ff9a;
  --violet:#b98cff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;overflow:hidden;background:#000;color:#dff;
  font-family:'Orbitron',ui-monospace,Menlo,Consolas,monospace;
  -webkit-font-smoothing:antialiased;
  cursor:default;
}
canvas{display:block}
#app{position:fixed;inset:0}

.hidden{display:none !important}

/* ---------------- HUD frame ---------------- */
#hud{position:fixed;inset:0;pointer-events:none;user-select:none;z-index:10}
#hud .label{font-size:9px;letter-spacing:2.5px;color:#7fd0de;text-shadow:0 0 8px rgba(0,0,0,.9)}
#hud .value{font-size:20px;font-weight:700;color:var(--cyan);text-shadow:0 0 12px rgba(95,240,255,.65)}
#hud .value.dim{color:#9fd6de;font-size:16px;text-shadow:none}
#hud .tag{font-size:10px;letter-spacing:2px;color:var(--amber);margin-left:2px}

#topbar{
  position:absolute;top:14px;left:18px;right:18px;
  display:flex;gap:26px;align-items:flex-end;flex-wrap:wrap;
}
#topbar .stat{display:flex;flex-direction:column;line-height:1.05}
#topbar .stat::before{
  content:'';position:absolute;width:0;height:0;
}

/* ---------------- Boss bar ---------------- */
#bossWrap{
  position:absolute;top:52px;left:50%;transform:translateX(-50%);
  width:min(720px,64vw);text-align:center;
}
#bossName{
  font-size:12px;letter-spacing:5px;color:#ffd0d4;
  text-shadow:0 0 14px rgba(255,69,80,.9);margin-bottom:5px;
}
#bossBar{
  position:relative;height:13px;background:rgba(40,0,6,.66);
  border:1px solid rgba(255,69,80,.75);
  box-shadow:0 0 18px rgba(255,69,80,.4) inset,0 0 12px rgba(255,69,80,.28);
  overflow:hidden;
}
#bossFill{
  height:100%;width:100%;
  background:linear-gradient(90deg,#ff2d3a,#ff8a5c 60%,#ffd28a);
  box-shadow:0 0 16px rgba(255,90,90,.85);
  transition:width .12s linear;
}
#bossPhase{
  position:absolute;top:0;bottom:0;left:0;right:0;
  background:repeating-linear-gradient(90deg,transparent 0 24px,rgba(0,0,0,.55) 24px 25px);
  pointer-events:none;
}

/* ---------------- Center banner ---------------- */
#banner{
  position:absolute;top:33%;left:0;right:0;text-align:center;
  opacity:0;transition:opacity .35s ease, transform .35s ease;transform:translateY(10px)
}
#banner.show{opacity:1;transform:translateY(0)}
#bigmsg{
  font-size:clamp(26px,5.4vw,58px);font-weight:900;letter-spacing:8px;
  color:#eafcff;text-shadow:0 0 12px var(--cyan),0 0 42px rgba(95,240,255,.55);
}
#bigmsg.warn{color:#ffdada;text-shadow:0 0 14px var(--red),0 0 46px rgba(255,69,80,.6)}
#bigmsg.gold{color:#fff2cf;text-shadow:0 0 14px var(--amber),0 0 46px rgba(255,179,71,.55)}
#bigmsg.small{font-size:clamp(17px,2.6vw,28px);letter-spacing:5px}
#banner.small #submsg{font-size:clamp(9px,1.1vw,12px);letter-spacing:3px}
#submsg{
  margin-top:6px;font-size:clamp(11px,1.6vw,17px);letter-spacing:5px;color:#a9e9f3;
  text-shadow:0 0 10px rgba(95,240,255,.5)
}

/* ---------------- Bottom panels ---------------- */
#bottom{position:absolute;bottom:14px;left:18px;right:18px;display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
#bottom .panel{
  border:1px solid rgba(95,240,255,.28);background:linear-gradient(180deg,rgba(4,26,34,.72),rgba(2,12,18,.72));
  padding:8px 12px;backdrop-filter:blur(3px);min-width:238px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
#bottom .panel.mid{min-width:210px}
#bottom .panel.right{margin-left:auto;border-color:rgba(95,240,255,.16);text-align:right;background:none}
.row{display:flex;align-items:center;gap:9px;margin:3px 0}
.bl{font-size:9px;letter-spacing:2px;color:#4d8f9b;width:56px}
.bar{position:relative;flex:1;height:12px;background:rgba(0,0,0,.6);border:1px solid rgba(95,240,255,.35);overflow:hidden}
.bar i{display:block;height:100%;width:100%;transition:width .16s ease}
#hpFill{background:linear-gradient(90deg,#39ff9b,#c8ff5a)}
#shFill{background:linear-gradient(90deg,#2fa8ff,#8fe6ff)}
.bar.sh i{width:0}
.num{font-size:12px;color:#bfeef6;min-width:44px;text-align:right}
.num.small{font-size:10px;letter-spacing:1px;min-width:auto;color:#8fd8e4}
.wp{display:flex;align-items:center;gap:8px}
.pips{display:inline-flex;gap:4px;flex:1}
.pips b{width:16px;height:11px;background:rgba(255,255,255,.1);border:1px solid rgba(95,240,255,.3);display:block}
.pips b.on{background:linear-gradient(180deg,#ffd27a,#ff7a2f);box-shadow:0 0 10px rgba(255,150,60,.8);border-color:#ffc06a}
.hint{font-size:10px;letter-spacing:1.4px;color:#63a7b3;line-height:1.7}
.hint b{color:#a9e9f3}

/* ---------------- Crosshair / effects ---------------- */
#crosshair{
  position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;opacity:0;
  transition:opacity .2s ease;
}
#crosshair.on{opacity:.85}
#crosshair::before,#crosshair::after{
  content:'';position:absolute;background:rgba(95,240,255,.85);box-shadow:0 0 8px var(--cyan)
}
#crosshair::before{left:50%;top:0;width:1px;height:11px;margin-left:-.5px;box-shadow:0 0 8px var(--cyan),0 0 0 0 transparent}
#crosshair::after{left:50%;bottom:0;width:1px;height:11px;margin-left:-.5px}
#crosshair i{
  position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border:1px solid rgba(95,240,255,.55);border-radius:50%
}
#crosshair i::before,#crosshair i::after{
  content:'';position:absolute;top:50%;width:9px;height:1px;background:rgba(95,240,255,.85)
}
#crosshair i::before{left:-11px}
#crosshair i::after{right:-11px}

#dmgVig{
  position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:radial-gradient(ellipse at 50% 55%,transparent 42%,rgba(255,20,40,.62) 100%)
}
#flash{
  position:absolute;inset:0;pointer-events:none;background:#fff;opacity:0;
}
#flash.hit{animation:fhit .32s ease-out}
@keyframes fhit{0%{opacity:.5;background:#ff3b4e}100%{opacity:0;background:#ff3b4e}}
#flash.boom{animation:fboom .5s ease-out}
@keyframes fboom{0%{opacity:.75;background:#ffe6b0}100%{opacity:0;background:#ffb347}}

#scan{
  position:absolute;inset:0;pointer-events:none;opacity:.055;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.9) 0 1px,transparent 1px 3px)
}

/* ---------------- Overlay ---------------- */
#overlay{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 45%,rgba(2,18,26,.62),rgba(0,0,0,.88));
  backdrop-filter:blur(4px);
}
#card{
  width:min(760px,92vw);max-height:92vh;overflow:auto;padding:30px 34px;text-align:center;
  border:1px solid rgba(95,240,255,.35);
  background:linear-gradient(180deg,rgba(5,28,38,.9),rgba(2,10,16,.94));
  box-shadow:0 0 60px rgba(0,180,220,.18),0 0 120px rgba(0,0,0,.9) inset;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
/* menu: card on the left, orbiting X-wing visible on the right */
#overlay.menu{justify-content:flex-start;padding-left:4vw;
  background:linear-gradient(90deg,rgba(2,10,16,.88) 0%,rgba(2,10,16,.55) 42%,rgba(0,0,0,.2) 100%)}
#card.menu{width:min(560px,46vw);text-align:left}
#card.menu h1{font-size:clamp(26px,3.6vw,46px);letter-spacing:7px}
#card.menu .keys{grid-template-columns:1fr}
@media (max-width:1000px){
  #overlay.menu{justify-content:center;padding-left:0;
    background:radial-gradient(ellipse at 50% 45%,rgba(2,18,26,.62),rgba(0,0,0,.88))}
  #card.menu{width:min(760px,92vw);text-align:center}
  #card.menu .keys{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
}
#card h1{
  margin:0 0 2px;font-size:clamp(30px,6.2vw,62px);font-weight:900;letter-spacing:10px;
  color:#fff;text-shadow:0 0 14px var(--cyan),0 0 60px rgba(95,240,255,.55)
}
#card h1 small{display:block;font-size:clamp(11px,1.7vw,16px);letter-spacing:8px;color:var(--amber);margin-top:10px;text-shadow:0 0 12px rgba(255,179,71,.6)}
#card h2{margin:0 0 8px;font-size:clamp(22px,4.5vw,40px);letter-spacing:6px;color:#fff;text-shadow:0 0 18px rgba(255,69,80,.75)}
#card h2.win{text-shadow:0 0 18px rgba(87,255,154,.75)}
#card p{font-size:12px;line-height:2;letter-spacing:1.6px;color:#93cdd8;margin:14px 0}
#card .keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px 18px;text-align:left;margin:18px 0 6px}
#card .keys div{font-size:11px;letter-spacing:1.2px;color:#8fd8e4;border-left:2px solid rgba(95,240,255,.35);padding-left:9px}
#card .keys b{color:#fff}
#card .stats{display:flex;justify-content:center;gap:32px;margin:16px 0 4px;flex-wrap:wrap}
#card .stats div{font-size:11px;letter-spacing:2px;color:#4d8f9b}
#card .stats span{display:block;font-size:24px;font-weight:700;color:var(--cyan);text-shadow:0 0 14px rgba(95,240,255,.6);margin-top:4px}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:20px}
button{
  font-family:inherit;font-size:12px;letter-spacing:3px;font-weight:700;color:#d6fbff;cursor:pointer;
  padding:13px 26px;background:linear-gradient(180deg,rgba(10,60,74,.9),rgba(4,24,32,.9));
  border:1px solid rgba(95,240,255,.5);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease;
}
button:hover{background:linear-gradient(180deg,rgba(20,110,132,.95),rgba(6,40,52,.95));box-shadow:0 0 22px rgba(95,240,255,.45);transform:translateY(-2px)}
button:active{transform:translateY(0)}
button.amber{border-color:rgba(255,179,71,.6);color:#ffe6bf}
button.amber:hover{box-shadow:0 0 22px rgba(255,179,71,.45);background:linear-gradient(180deg,rgba(120,70,10,.95),rgba(40,22,4,.95))}
button.sel{box-shadow:0 0 0 1px var(--amber),0 0 22px rgba(255,179,71,.55);color:#fff3dc;background:linear-gradient(180deg,rgba(120,70,10,.95),rgba(40,22,4,.95))}
.legend{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:16px;font-size:10px;letter-spacing:1.4px;color:#8fd8e4}
.legend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;border-radius:2px}

/* ---------------- Misc ---------------- */
#loader{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:#000;transition:opacity .5s ease
}
#loader.gone{opacity:0;pointer-events:none}
.ldrTitle{font-size:40px;letter-spacing:14px;font-weight:900;color:#fff;text-shadow:0 0 20px var(--cyan)}
.ldrSub{font-size:11px;letter-spacing:6px;color:var(--cyan);margin-top:12px;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
#errbox{
  position:fixed;left:0;right:0;bottom:0;z-index:40;padding:9px 14px;font-size:12px;
  background:rgba(120,0,10,.92);color:#ffd9dc;border-top:1px solid #ff4550;font-family:monospace
}
@media (max-width:820px){
  #bottom .panel.right{display:none}
  #topbar{gap:16px}
  #hud .value{font-size:15px}
  #topbar .stat:nth-child(3){display:none}
}