@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --void:#0a0c18;
  --nebula:#171b36;
  --ink:#e9ecf6;
  --amber:#ffb454;
  --cyan:#4fd8ea;
  --coral:#ff5d6c;
  --border:#2c3060;
  --text-scale:1;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
}

*{box-sizing:border-box;}

html,body{
  width:100%;
  height:100%;
  margin:0;
  font-size:calc(100% * var(--text-scale));
  background:radial-gradient(ellipse at 50% 20%, var(--nebula) 0%, var(--void) 65%);
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
@supports (height:100dvh){
  html,body{height:100dvh;}
}

#arena{
  position:relative;
  width:min(900px, 94vw, calc((100vh - 24px) * 4 / 3));
  aspect-ratio:4/3;
  background:var(--void);
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 0 60px rgba(79,216,234,0.07), inset 0 0 80px rgba(0,0,0,0.6);
}

@media (max-width:480px){
  #arena{
    aspect-ratio:3/4;
    width:min(94vw, calc((100vh - 24px) * 3 / 4));
  }
}

/* Touch devices (see js/game.js's `hover:none`+`pointer:coarse` check): the
   arena gives up its fixed aspect ratio and fills whatever space is left
   above the on-screen keyboard instead — gameplay already renders relative
   to state.W/H, so it doesn't need a locked ratio to work. */
body.touch-input{
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
}
body.touch-input #arena{
  width:100%;
  max-width:none;
  aspect-ratio:auto;
  flex:1 1 auto;
  min-height:0;
  border-radius:0;
  border-left:none;
  border-right:none;
}

#arena::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px);
  mix-blend-mode:overlay;
}

canvas{
  position:absolute;
  inset:0;
  display:block;
}

#flashOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(circle at 50% 55%, transparent 35%, var(--coral) 160%);
}

#freezeOverlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  z-index:3;
  background:radial-gradient(circle at 50% 55%, transparent 30%, rgba(143,217,255,0.9) 145%);
}

.hidden{display:none;}

@keyframes popIn{
  from{ opacity:0; transform:scale(0.8) translateY(-3px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes scorePop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35); color:var(--amber); }
  100%{ transform:scale(1); }
}
@keyframes shakeX{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-4px); }
  40%{ transform:translateX(4px); }
  60%{ transform:translateX(-3px); }
  80%{ transform:translateX(3px); }
}

#hud{
  position:absolute;
  top:0; left:0; right:0;
  display:flex;
  justify-content:space-between;
  padding:0.7em 1em;
  font-family:'JetBrains Mono',monospace;
  font-size:0.72rem;
  letter-spacing:0.06em;
  color:var(--ink);
  border-bottom:1px solid rgba(79,216,234,0.15);
  background:linear-gradient(to bottom, rgba(10,12,24,0.7), transparent);
  z-index:5;
}
#hud.shake{animation:shakeX .35s ease;}

.hud-stat{display:flex;gap:0.5em;align-items:baseline;opacity:0.85;animation:popIn .3s ease;}
.hud-stat.hidden{display:none;}
#scoreVal.pop{display:inline-block;animation:scorePop .35s ease;}
#hudStats{display:flex;gap:1.2em;}
.hud-label{color:var(--cyan);text-transform:uppercase;font-size:0.66rem;letter-spacing:0.1em;}

.icon{
  width:1em;
  height:1em;
  vertical-align:-0.125em;
  display:inline-block;
}
#livesVal{color:var(--coral);letter-spacing:0.15em;}
#scoreVal, #levelVal{color:var(--ink);}

#pauseBtn{
  background:transparent;
  border:1px solid rgba(79,216,234,0.35);
  color:var(--cyan);
  font-size:0.65rem;
  line-height:1;
  padding:0.4em 0.55em;
  border-radius:3px;
  cursor:pointer;
  letter-spacing:0.05em;
  pointer-events:auto;
  transition:background .15s ease, transform .1s ease;
}
#pauseBtn:hover{background:rgba(79,216,234,0.15);}
#pauseBtn:active{transform:scale(0.9);}
#pauseBtn:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}

#comboPopup{
  position:absolute;
  top:2.6em; left:50%;
  transform:translate(-50%,-6px) scale(0.85);
  font-family:'JetBrains Mono',monospace;
  font-size:0.85rem;
  font-weight:700;
  color:var(--amber);
  letter-spacing:0.08em;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
  z-index:5;
}
#comboPopup.show{opacity:1;transform:translate(-50%,0) scale(1);}

@keyframes blink{50%{opacity:0;}}

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2em;
  background:rgba(8,9,18,0.72);
  backdrop-filter:blur(2px);
  z-index:10;
  gap:1em;
  opacity:1;
  visibility:visible;
  transform:scale(1);
  pointer-events:auto;
  transition:opacity .3s ease, transform .3s ease;
  overflow-y:auto;
}
.overlay.hidden{
  opacity:0;
  visibility:hidden;
  transform:scale(0.96);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}

#startScreen{
  display:grid;
  grid-template-columns:minmax(280px,480px) 1fr;
  align-items:center;
  justify-items:start;
  text-align:left;
  padding:2em 4vw;
  background:
    linear-gradient(to right, rgba(8,9,18,0.92) 0%, rgba(8,9,18,0.92) 40%, rgba(8,9,18,0.55) 58%, rgba(8,9,18,0.12) 78%, transparent 96%),
    radial-gradient(ellipse 55% 65% at 76% 52%, rgba(79,216,234,0.16), transparent 72%);
  backdrop-filter:blur(1px);
}
.start-content{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1em;
  max-width:480px;
}
.menu-kicker{
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.35em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:0.75;
}

.overlay h1{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(1.6rem, 6vw, 2.6rem);
  letter-spacing:0.03em;
  margin:0;
  min-height:1.3em;
}
.overlay h1 .cursor2{color:var(--amber);animation:blink 1s steps(1) infinite;}

#startScreen h1{
  font-size:clamp(2rem, 8vw, 3.6rem);
  text-shadow:0 0 18px rgba(79,216,234,0.55), 0 0 42px rgba(255,180,84,0.22);
}
@keyframes ignite{
  0%{ filter:brightness(1); }
  35%{ filter:brightness(1.7); text-shadow:0 0 34px rgba(79,216,234,0.95), 0 0 60px rgba(255,180,84,0.55); }
  100%{ filter:brightness(1); }
}
#startScreen h1.title-ignite{ animation:ignite .7s ease-out; }

.tagline{
  margin:0;
  max-width:32ch;
  line-height:1.5;
  color:rgba(233,236,246,0.75);
  font-size:0.95rem;
}

.keys{
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:0.68rem;
  letter-spacing:0.03em;
  color:rgba(233,236,246,0.4);
}

#finalScore{
  font-family:'JetBrains Mono',monospace;
  color:var(--cyan);
  font-size:1.1rem;
}

.btn{
  font-family:'Space Grotesk',sans-serif;
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.05em;
  background:transparent;
  color:var(--cyan);
  border:1px solid var(--cyan);
  padding:0.75em 1.8em;
  cursor:pointer;
  transition:background .2s ease, color .2s ease, letter-spacing .2s ease, transform .15s ease;
  margin-top:0.4em;
}
.btn:hover{background:var(--cyan);color:var(--void);letter-spacing:0.09em;transform:translateY(-1px);}
.btn:active{transform:scale(0.95);}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}

.btn-primary{
  background:var(--cyan);
  color:var(--void);
  font-size:1.05rem;
  font-weight:700;
  padding:0.85em 2.6em;
  box-shadow:0 0 24px rgba(79,216,234,0.4);
}
.btn-primary:hover{background:var(--amber);border-color:var(--amber);color:var(--void);transform:translateY(-1px);box-shadow:0 0 28px rgba(255,180,84,0.5);}
.btn-primary:active{transform:scale(0.95);}

.btn.active{border-color:var(--amber);color:var(--amber);box-shadow:0 0 10px rgba(255,180,84,0.4);}

#recoveryCountdown{
  font-family:'JetBrains Mono',monospace;
  font-variant-numeric:tabular-nums;
  font-size:3rem;
  color:var(--cyan);
  text-shadow:0 0 18px rgba(79,216,234,0.5);
}

#bossPanel{
  position:absolute;
  top:3.6em;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.35em;
  padding:0.5em 1.1em;
  background:rgba(10,12,24,0.72);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:3;
  max-width:min(90vw, 42em);
  text-align:center;
}
#bossPanel.hidden{ display:none; }

#bossReadingStrip{
  font-family:'JetBrains Mono',monospace;
  font-size:1.1rem;
  letter-spacing:0.02em;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.55em;
}
.boss-typed{ color:rgba(233,236,246,0.4); }
.boss-next-char{ color:var(--amber); text-shadow:0 0 8px rgba(255,180,84,0.6); }
.boss-upcoming-word{ color:rgba(233,236,246,0.55); }

@media (max-width:820px){
  .boss-word-compact-hide{ display:none; }
}

.mode-buttons{
  display:flex;
  gap:1em;
  flex-wrap:wrap;
  justify-content:center;
}

.volume-control{
  display:flex;
  align-items:center;
  gap:0.6em;
  font-family:'Space Grotesk',sans-serif;
  color:var(--ink);
  font-size:0.85rem;
}
.volume-control input[type="range"]{
  accent-color:var(--cyan);
}

@media (min-width:821px){
  #startScreen .mode-buttons{ justify-content:flex-start; }
}

.best-score{
  margin:0;
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  color:var(--amber);
  letter-spacing:0.03em;
}

#banner{
  position:absolute;
  top:32%;
  left:50%;
  transform:translate(-50%,-50%) scale(0.9);
  text-align:center;
  opacity:0;
  transition:opacity .4s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  z-index:6;
}
#banner.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
#bannerTitle{
  font-family:'JetBrains Mono',monospace;
  font-size:1.1rem;
  color:var(--amber);
  text-shadow:0 0 16px rgba(255,180,84,0.6);
  letter-spacing:0.04em;
}
#bannerBrief{
  margin-top:0.3em;
  font-size:0.8rem;
  color:rgba(233,236,246,0.75);
}

#missionList{
  display:flex;
  flex-direction:column;
  gap:0.5em;
  width:min(28em,80vw);
  max-height:40vh;
  overflow-y:auto;
}
.mission-item{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:0.15em;
  text-align:left;
  font-family:'Space Grotesk',sans-serif;
  background:rgba(23,27,54,0.5);
  border:1px solid var(--border);
  border-radius:4px;
  padding:0.6em 0.9em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
  animation:popIn .3s ease backwards;
}
.mission-item:active:not(:disabled){transform:scale(0.98);}
.mission-item:hover:not(:disabled){border-color:var(--cyan);background:rgba(23,27,54,0.85);}
.mission-item:disabled{opacity:0.4;cursor:not-allowed;}
.mission-item.done{border-color:var(--amber);}
.mission-name{font-weight:700;font-size:0.85rem;}
.mission-brief{font-size:0.72rem;color:rgba(233,236,246,0.65);}
.mission-status{font-family:'JetBrains Mono',monospace;font-size:0.66rem;color:var(--cyan);letter-spacing:0.04em;}
.mission-item.done .mission-status{color:var(--amber);}

.shop-section{width:min(26em,84vw);}

.shop-row{
  display:flex;
  gap:0.6em;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:0.4em;
}
.shop-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.3em;
  width:5.4em;
  padding:0.55em 0.3em;
  border:1px solid var(--border);
  border-radius:4px;
  background:rgba(23,27,54,0.5);
  cursor:pointer;
  color:var(--ink);
  font-family:'Space Grotesk',sans-serif;
  transition:border-color .15s ease, transform .1s ease;
  animation:popIn .3s ease backwards;
}
.shop-item:active:not(:disabled){transform:scale(0.94);}
.shop-item:hover:not(:disabled){border-color:var(--cyan);}
.shop-item.equipped{border-color:var(--amber);box-shadow:0 0 10px rgba(255,180,84,0.4);}
.shop-item:disabled{opacity:0.4;cursor:not-allowed;}
.shop-item .swatch{width:26px;height:26px;border-radius:50%;}
.shop-item .name{font-size:0.64rem;font-weight:700;text-align:center;}
.shop-item .price{font-family:'JetBrains Mono',monospace;font-size:0.6rem;color:var(--amber);}

.shop-list{
  display:flex;
  flex-direction:column;
  gap:0.5em;
  width:min(26em,84vw);
  margin-top:0.4em;
}
.shop-upgrade{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:0.8em;
  border:1px solid var(--border);
  border-radius:4px;
  padding:0.6em 0.9em;
  background:rgba(23,27,54,0.5);
  text-align:left;
  animation:popIn .3s ease backwards;
}
.shop-upgrade .info{display:flex;flex-direction:column;gap:0.15em;}
.shop-upgrade .name{font-size:0.8rem;font-weight:700;}
.shop-upgrade .desc{font-size:0.66rem;color:rgba(233,236,246,0.6);}

.btn-small{padding:0.4em 1em;font-size:0.72rem;margin-top:0;flex-shrink:0;}

@media (max-width:820px){
  #startScreen{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:2em;
    background:rgba(8,10,20,0.5);
  }
  .start-content{ align-items:center; max-width:none; }
}

@media (max-width:480px){
  #missionList{ width:88vw; }
}

@media (prefers-reduced-motion:reduce){
  .cursor2{animation:none;}
  .btn{transition:none;}
  #startScreen h1.title-ignite{animation:none;}
  .hud-stat, .mission-item, .shop-item, .shop-upgrade{animation:none;}
  #scoreVal.pop{animation:none;}
  #hud.shake{animation:none;}
  .overlay{transition:opacity .15s linear;}
  .overlay.hidden{transition:opacity .15s linear, visibility 0s linear .15s;transform:none;}
}

/* ---------- On-screen keyboard (touch devices) ---------- */

#mobileKeyboard{ display:none; }

body.touch-input #mobileKeyboard:not(.hidden){
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  gap:0.3em;
  padding:0.4em 0.4em calc(0.4em + env(safe-area-inset-bottom, 0px));
  background:linear-gradient(to bottom, rgba(23,27,54,0.95), rgba(10,12,24,0.98));
  border-top:1px solid var(--border);
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
  z-index:20;
}

.kb-row{
  display:flex;
  gap:0.25em;
  justify-content:center;
}

.kb-key{
  flex:1 1 0;
  max-width:calc(2.6em * var(--kb-scale, 1));
  min-width:0;
  padding:calc(0.7em * var(--kb-scale, 1)) 0;
  font-family:'JetBrains Mono',monospace;
  font-size:calc(0.85rem * var(--kb-scale, 1));
  text-transform:uppercase;
  background:rgba(79,216,234,0.08);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:4px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.kb-key:active{background:rgba(79,216,234,0.3);transform:scale(0.94);}

.kb-key.kb-wide{
  flex:1.7 1 0;
  max-width:calc(4em * var(--kb-scale, 1));
  color:var(--coral);
  font-size:calc(0.75rem * var(--kb-scale, 1));
}

.kb-key.kb-space{
  flex:6 1 0;
  max-width:none;
  color:var(--ink);
}

body:not(.touch-input) .touch-only{ display:none; }