/* ================================================================
   SPACETYPE :: STYLE
   Design language: fighter-cockpit HUD. Angular clipped panels,
   scanlines, a mono targeting font for words, a display face for
   numbers/titles. Cyan = systems, gold = score/rank, magenta/red =
   threat, green = confirmed kill.
   ================================================================ */

:root{
  --bg-0:#03040a;
  --bg-1:#070b16;
  --panel:rgba(9,16,30,.86);
  --panel-edge:rgba(120,200,255,.28);
  --cyan:#4ee1ff;
  --cyan-dim:#1f6f8a;
  --gold:#ffd166;
  --magenta:#ff4fa3;
  --green:#3dffa0;
  --red:#ff3b5c;
  --text:#dcecff;
  --text-dim:#7d92b8;
  --font-display:'Orbitron', sans-serif;
  --font-mono:'Share Tech Mono', monospace;
}

*{ box-sizing:border-box; }
html,body{
  margin:0; height:100%; background:var(--bg-0);
  color:var(--text); font-family:var(--font-mono);
  overflow:hidden; -webkit-tap-highlight-color:transparent;
  touch-action:none; overscroll-behavior:none;
}

#app{
  position:relative; width:100vw; height:100vh; height:100dvh;
  background:radial-gradient(ellipse at 50% 20%, #0c1730 0%, #03040a 60%);
}

canvas#scene{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* scanline / vignette overlay for that cockpit-glass feel */
#glass{
  position:absolute; inset:0; pointer-events:none; z-index:5;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,.06) 3px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:normal;
}

/* corner HUD brackets around the whole viewport */
.bracket{ position:absolute; width:38px; height:38px; z-index:6; opacity:.85; pointer-events:none; }
.bracket::before,.bracket::after{ content:""; position:absolute; background:var(--cyan); }
.bracket.tl{ top:10px; left:10px; }
.bracket.tr{ top:10px; right:10px; transform:scaleX(-1); }
.bracket.bl{ bottom:10px; left:10px; transform:scaleY(-1); }
.bracket.br{ bottom:10px; right:10px; transform:scale(-1,-1); }
.bracket::before{ width:100%; height:2px; top:0; left:0; box-shadow:0 0 6px var(--cyan); }
.bracket::after{ width:2px; height:100%; top:0; left:0; box-shadow:0 0 6px var(--cyan); }

/* ---------------- HUD (top bar) ---------------- */
#hud{
  position:absolute; top:0; left:0; right:0; z-index:7;
  display:flex; justify-content:space-between; align-items:flex-start;
  padding:18px 26px; pointer-events:none;
}
.hud-panel{
  pointer-events:auto;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  padding:10px 18px;
  min-width:150px;
  backdrop-filter:blur(3px);
}
.hud-label{ font-size:10px; letter-spacing:.18em; color:var(--text-dim); text-transform:uppercase; }
.hud-value{ font-family:var(--font-display); font-size:22px; color:var(--gold); letter-spacing:.03em; }
.hud-value.cyan{ color:var(--cyan); }

#hud-lives{ display:flex; gap:6px; margin-top:4px; }
.life-icon{ width:16px; height:16px; }
.life-icon svg{ width:100%; height:100%; }

#hud-center{ display:flex; flex-direction:column; align-items:center; gap:8px; }
#level-tag{
  font-family:var(--font-display); font-size:13px; letter-spacing:.25em;
  color:var(--cyan); text-transform:uppercase; text-shadow:0 0 10px rgba(78,225,255,.6);
}
#combo-wrap{ display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); min-height:16px; }
#combo-wrap.hot{ color:var(--magenta); text-shadow:0 0 8px rgba(255,79,163,.7); }

#sublevel-progress{
  width:150px; height:5px; background:rgba(255,255,255,.08);
  border:1px solid var(--panel-edge); overflow:hidden;
}
#sublevel-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
  transition:width .25s ease;
}

#levelup-banner{
  position:absolute; top:38%; left:50%; z-index:9;
  transform:translate(-50%,-50%) scale(.7); text-align:center; pointer-events:none; opacity:0;
}
#levelup-banner.show{ animation:bannerPop 1.7s ease forwards; }
.lu-eyebrow{
  font-family:var(--font-mono); font-size:12px; color:var(--cyan);
  letter-spacing:.3em; text-transform:uppercase; text-shadow:0 0 10px rgba(78,225,255,.6);
}
.lu-title{
  font-family:var(--font-display); font-size:clamp(28px,5.5vw,48px);
  color:var(--gold); text-shadow:0 0 26px rgba(255,209,102,.6);
  letter-spacing:.05em; margin-top:4px;
}
@keyframes bannerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.7); }
  14%{ opacity:1; transform:translate(-50%,-50%) scale(1.04); }
  22%{ transform:translate(-50%,-50%) scale(1); }
  78%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.03); }
}

/* ---------------- bottom controls ---------------- */
#controls{
  position:absolute; top:96px; right:18px; z-index:9;
  display:flex; flex-direction:column; gap:8px; pointer-events:auto;
}
.icon-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--panel); border:1px solid var(--panel-edge);
  color:var(--text); font-size:15px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s, transform .1s;
}
.icon-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
.icon-btn:active{ transform:scale(.92); }
.icon-btn.off{ color:var(--red); border-color:rgba(255,59,92,.4); }

/* ---------------- virtual keyboard (mobile) ---------------- */
.vkb{
  position:absolute; left:0; right:0; bottom:0; z-index:8;
  padding:8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(180deg, rgba(6,10,20,0) 0%, rgba(6,10,20,.85) 22%, rgba(4,7,15,.96) 100%);
  border-top:1px solid var(--panel-edge);
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
}
.vkb.hidden{ display:none; }
.vkb-hint{
  text-align:center; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-dim); margin-bottom:6px; opacity:.8;
}
.vkb-rows{ display:flex; flex-direction:column; gap:6px; max-width:640px; margin:0 auto; }
.vkb-row{ display:flex; justify-content:center; gap:5px; }
.vkb-row[data-row="2"]{ padding:0 14px; }
.vkb-row[data-row="3"]{ padding:0 30px; }

.vkey{
  flex:1; max-width:40px; aspect-ratio:1/1;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--panel-edge);
  color:var(--text);
  font-family:var(--font-mono); font-size:15px; font-weight:bold;
  clip-path:polygon(0 0,calc(100% - 6px) 0,100% 6px,100% 100%,6px 100%,0 calc(100% - 6px));
  -webkit-tap-highlight-color:transparent;
  transition:transform .08s, border-color .12s, box-shadow .12s, background .12s;
}
.vkey:active,
.vkey.pressed{
  transform:scale(.88);
  background:rgba(78,225,255,.22);
  border-color:var(--cyan);
}
.vkey.active-target{
  border-color:var(--cyan);
  box-shadow:0 0 10px rgba(78,225,255,.5);
  color:#eaf8ff;
}
.vkey.locked-target{
  border-color:var(--gold);
  background:rgba(255,209,102,.14);
  box-shadow:0 0 16px rgba(255,209,102,.75);
  color:#fff6de;
  animation:vkeyPulse 0.9s ease-in-out infinite;
}
@keyframes vkeyPulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.1); }
}

@media (max-width:420px){
  .vkey{ font-size:13px; }
  .vkb-row[data-row="2"]{ padding:0 8px; }
  .vkb-row[data-row="3"]{ padding:0 20px; }
}

/* ---------------- typed-word banner (current target) ---------------- */
#target-banner{
  position:absolute; left:50%; bottom:70px; transform:translateX(-50%);
  z-index:7; pointer-events:none; text-align:center;
  font-family:var(--font-mono); font-size:15px; letter-spacing:.05em;
  color:var(--text-dim); opacity:0; transition:opacity .2s;
}
#target-banner.show{ opacity:1; }

/* ---------------- overlays (menu / pause / game over) ---------------- */
.overlay{
  position:absolute; inset:0; z-index:20;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,10,.72); backdrop-filter:blur(4px);
}
.overlay.hidden{ display:none; }

.panel{
  width:min(680px, 92vw); max-height:88vh; overflow:auto;
  touch-action:pan-y;
  background:linear-gradient(180deg, rgba(12,20,38,.96), rgba(6,10,20,.96));
  border:1px solid var(--panel-edge);
  box-shadow:0 0 60px rgba(78,225,255,.08), inset 0 0 40px rgba(78,225,255,.03);
  clip-path:polygon(0 18px,18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px));
  padding:34px 38px;
}

.eyebrow{
  font-size:11px; letter-spacing:.35em; color:var(--cyan); text-transform:uppercase;
  margin:0 0 6px;
}
h1.title{
  font-family:var(--font-display); font-size:clamp(28px,5vw,42px);
  margin:0 0 4px; color:var(--text); letter-spacing:.04em;
  text-shadow:0 0 24px rgba(78,225,255,.35);
}
.subtitle{ color:var(--text-dim); font-size:13.5px; line-height:1.7; margin:0 0 26px; max-width:56ch; }

.level-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:22px; }
@media (max-width:640px){ .level-grid{ grid-template-columns:1fr; } }

.level-card{
  position:relative; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.02);
  border:1px solid var(--panel-edge);
  padding:16px 16px 18px;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  transition:transform .15s, border-color .15s, background .15s;
  font-family:var(--font-mono); color:var(--text);
}
.level-card:hover{ transform:translateY(-3px); background:rgba(255,255,255,.045); }
.level-card[data-lv="easy"]{ border-color:rgba(78,225,255,.35); }
.level-card[data-lv="medium"]{ border-color:rgba(255,209,102,.4); }
.level-card[data-lv="advanced"]{ border-color:rgba(255,79,163,.45); }
.level-card .lv-name{ font-family:var(--font-display); font-size:17px; letter-spacing:.06em; margin-bottom:6px; }
.level-card[data-lv="easy"] .lv-name{ color:var(--cyan); }
.level-card[data-lv="medium"] .lv-name{ color:var(--gold); }
.level-card[data-lv="advanced"] .lv-name{ color:var(--magenta); }
.level-card .lv-desc{ font-size:11.5px; color:var(--text-dim); line-height:1.55; margin-bottom:10px; }
.level-card .lv-best{ font-size:11px; color:var(--text-dim); border-top:1px solid rgba(255,255,255,.08); padding-top:8px; }
.level-card .lv-best b{ color:var(--text); }

.btn{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  background:transparent; border:1px solid var(--cyan); color:var(--cyan);
  padding:11px 22px; cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .15s, color .15s;
}
.btn:hover{ background:rgba(78,225,255,.12); }
.btn.primary{ border-color:var(--gold); color:var(--gold); }
.btn.primary:hover{ background:rgba(255,209,102,.14); }
.btn.ghost{ border-color:var(--text-dim); color:var(--text-dim); }
.btn.ghost:hover{ color:var(--text); border-color:var(--text); }
.btn-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }

.howto{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:6px 0 24px;
  font-size:11.5px; color:var(--text-dim); line-height:1.6;
}
@media (max-width:640px){ .howto{ grid-template-columns:1fr; } }
.howto div{ border-left:2px solid var(--panel-edge); padding-left:10px; }
.howto b{ color:var(--text); display:block; font-family:var(--font-display); font-size:11px; letter-spacing:.08em; margin-bottom:3px; }

/* stat rows for game-over screen */
.stats-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:10px; margin:18px 0 22px; }
.stat-box{ background:rgba(255,255,255,.02); border:1px solid var(--panel-edge); padding:12px; text-align:center; }
.stat-box .n{ font-family:var(--font-display); font-size:22px; color:var(--gold); }
.stat-box .l{ font-size:10px; color:var(--text-dim); letter-spacing:.12em; text-transform:uppercase; margin-top:4px; }
#go-newbest{ color:var(--green); font-size:12px; letter-spacing:.1em; margin:-10px 0 16px; display:none; }
#go-newbest.show{ display:block; }

.lb-form{ display:flex; gap:8px; margin-bottom:16px; }
.lb-form input{
  flex:1; background:rgba(255,255,255,.03); border:1px solid var(--panel-edge); color:var(--text);
  font-family:var(--font-mono); padding:10px 12px; outline:none;
}
.lb-form input:focus{ border-color:var(--cyan); }
#lb-list{ list-style:none; margin:0; padding:0; font-size:12.5px; }
#lb-list li{
  display:flex; justify-content:space-between; padding:7px 4px;
  border-bottom:1px solid rgba(255,255,255,.06); color:var(--text-dim);
}
#lb-list li b{ color:var(--text); font-weight:normal; }
#lb-list li .lb-score{ color:var(--gold); font-family:var(--font-display); }
#lb-status{ font-size:11px; color:var(--text-dim); margin-top:6px; }

/* pause overlay reuses .panel but simpler */
#pause-overlay .panel{ text-align:center; width:min(420px,90vw); }

/* screen flash for damage feedback */
#flash{
  position:absolute; inset:0; z-index:15; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(255,59,92,.35), rgba(255,59,92,0) 70%);
  opacity:0;
}
#flash.hit{ animation:flashHit .35s ease-out; }
@keyframes flashHit{ 0%{opacity:1;} 100%{opacity:0;} }

#shake{ position:absolute; inset:0; }
.shaking{ animation:shakeAnim .32s ease-in-out; }
@keyframes shakeAnim{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-6px,3px); }
  40%{ transform:translate(5px,-4px); }
  60%{ transform:translate(-4px,-2px); }
  80%{ transform:translate(4px,3px); }
}

.small-note{ font-size:10.5px; color:var(--text-dim); margin-top:10px; }

::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-thumb{ background:rgba(78,225,255,.25); }