@font-face {
  font-family: 'Black Ops One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/BlackOpsOne.woff2') format('woff2');
  font-display: swap;
}

:root {
  --steel: #6d87a8;
  --steel-dark: #3d5470;
  --navy: #0b1626;
  --navy-2: #12233c;
  --hydro: #35e0ff;
  --hydro-dim: #1a8fae;
  --hazard: #ffd23f;
  --danger: #ff4d4d;
  --font-stencil: 'Black Ops One', 'Arial Black', sans-serif;
  --font-body: 'Courier New', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--navy);
  font-family: var(--font-stencil);
  color: var(--steel);
  user-select: none;
  -webkit-user-select: none;
}

#app { position: fixed; inset: 0; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

#hud-top {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 18px;
}
.hud-block {
  background: linear-gradient(180deg, rgba(18,35,60,.92), rgba(11,22,38,.92));
  border: 2px solid var(--steel-dark);
  border-top: 3px solid var(--hydro-dim);
  padding: 6px 18px 8px;
  text-align: center;
  min-width: 110px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hud-label { font-size: 10px; letter-spacing: 3px; color: var(--steel); }
.hud-value { font-size: 26px; color: var(--hydro); text-shadow: 0 0 12px rgba(53,224,255,.6); }
.hud-sub { font-size: 13px; color: var(--steel); }

#hud-bottom {
  position: absolute; bottom: 46px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 22px; width: min(720px, 86vw);
}
.gauge { flex: 1; }
.gauge-label { font-size: 11px; letter-spacing: 2px; margin-bottom: 4px; color: var(--steel); text-shadow: 0 1px 2px #000; }
.gauge-label span { color: var(--hydro); float: right; }
.gauge-track {
  position: relative; height: 18px;
  background: rgba(11,22,38,.85);
  border: 2px solid var(--steel-dark);
  overflow: hidden;
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
.gauge-fill { position: absolute; inset: 0; transform-origin: left; transition: transform .12s linear, background .3s; }
.gauge-fill.pressure { background: linear-gradient(90deg, #157a99, var(--hydro)); box-shadow: 0 0 14px rgba(53,224,255,.5); }
.gauge-fill.hull { background: linear-gradient(90deg, #7c2020, #ff7a4d); }
.gauge-hazard {
  position: absolute; inset: 0; pointer-events: none; opacity: .25;
  background: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(0,0,0,.7) 14px 20px);
}

#charge-wrap {
  position: absolute; bottom: 118px; left: 50%; transform: translateX(-50%);
  width: 260px; text-align: center;
}
#charge-label { font-size: 11px; letter-spacing: 3px; color: var(--hydro); text-shadow: 0 0 8px rgba(53,224,255,.8); margin-bottom: 3px; }
#charge-track { height: 10px; background: rgba(11,22,38,.85); border: 2px solid var(--hydro-dim);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); overflow: hidden; }
#charge-fill { height: 100%; background: linear-gradient(90deg, var(--hydro-dim), #fff); transform-origin: left; }

#hunker-overlay {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(4,10,18,.55) 0%, rgba(4,10,18,.93) 78%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.hunker-text { font-size: 22px; letter-spacing: 5px; color: var(--steel); }
.hunker-sub { font-family: var(--font-body); font-size: 12px; color: var(--hydro-dim); letter-spacing: 1px; }

#damage-vignette {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(255,40,40,.45) 100%);
  transition: opacity .15s;
}

#hint-bar {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  font-family: var(--font-body); font-size: 10px; color: rgba(109,135,168,.75);
  max-width: 96vw;
}
.hint b { color: var(--hydro-dim); }

/* ---------- Banners ---------- */
#wave-banner, #boss-alert {
  position: absolute; top: 26%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; z-index: 8; pointer-events: none;
  animation: bannerIn .45s cubic-bezier(.2,1.4,.4,1);
}
#banner-title { font-size: 56px; letter-spacing: 10px; color: #fff; text-shadow: 0 0 24px rgba(53,224,255,.8), 0 4px 0 #06101d; }
#banner-sub { font-size: 15px; letter-spacing: 6px; color: var(--hydro); margin-top: 4px; }
#boss-title { font-size: 46px; letter-spacing: 8px; color: var(--danger); text-shadow: 0 0 24px rgba(255,77,77,.8), 0 4px 0 #1d0606; animation: bossFlash .5s steps(2) infinite; }
#boss-sub { font-size: 14px; letter-spacing: 5px; color: var(--hazard); margin-top: 4px; }
@keyframes bossFlash { 50% { opacity: .55; } }
@keyframes bannerIn { 0% { transform: translate(-50%,-50%) scale(1.6); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }

.banner-stripes {
  height: 10px; width: 420px; max-width: 80vw; margin: 8px auto;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 14px, #141414 14px 28px);
  border: 1px solid #000;
}
#boss-alert .banner-stripes { background: repeating-linear-gradient(-45deg, var(--danger) 0 14px, #141414 14px 28px); }

/* ---------- Upgrades ---------- */
#upgrade-screen {
  position: absolute; inset: 0; z-index: 9;
  background: rgba(6,13,24,.78);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px;
}
.upgrade-head { text-align: center; }
.upgrade-title { font-size: 34px; letter-spacing: 6px; color: #fff; text-shadow: 0 0 18px rgba(53,224,255,.7); }
.upgrade-sub { font-family: var(--font-body); font-size: 13px; color: var(--steel); margin-top: 6px; }
.upgrade-sub b { color: var(--hydro); }
#upgrade-cards { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; padding: 0 16px; }
.upgrade-card {
  width: 230px; padding: 18px 16px 14px; cursor: pointer; pointer-events: auto;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 2px solid var(--steel-dark); border-top: 5px solid var(--hydro-dim);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform .12s, border-color .12s, box-shadow .12s;
  text-align: left;
}
.upgrade-card:hover, .upgrade-card.kb-focus {
  transform: translateY(-6px) scale(1.03);
  border-color: var(--hydro);
  box-shadow: 0 10px 30px rgba(53,224,255,.25);
}
.upgrade-key { font-size: 11px; color: var(--hazard); letter-spacing: 2px; }
.upgrade-name { font-size: 18px; color: #fff; margin: 6px 0 8px; letter-spacing: 1px; }
.upgrade-desc { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--steel); }
.upgrade-tag { display: inline-block; margin-top: 10px; font-size: 9px; letter-spacing: 2px; color: var(--navy);
  background: var(--hazard); padding: 2px 8px; }
.upgrade-tag.special { background: var(--hydro); }

/* ---------- Menus ---------- */
#menu-screen, #pause-screen, #victory-screen, #defeat-screen {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,13,24,.72);
  backdrop-filter: blur(2px);
}
#menu-screen { background: linear-gradient(180deg, rgba(6,13,24,.45), rgba(6,13,24,.85)); }
.menu-panel {
  width: min(620px, 92vw); max-height: 92vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border: 2px solid var(--steel-dark);
  padding: 0 34px 26px;
  text-align: center;
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.menu-panel.small { width: min(440px, 92vw); }
.menu-stripes { height: 12px; margin: 0 -34px 18px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 16px, #101418 16px 32px); }
.menu-stripes:last-child { margin: 22px -34px 0; }
.menu-eyebrow { font-family: var(--font-body); font-size: 11px; letter-spacing: 4px; color: var(--hydro-dim); }
.menu-title { font-size: clamp(40px, 8vw, 64px); letter-spacing: 8px; color: #fff; margin: 6px 0 2px;
  text-shadow: 0 0 26px rgba(53,224,255,.55), 0 5px 0 #06101d; }
.menu-sub { font-size: 15px; letter-spacing: 6px; color: var(--hydro); margin-bottom: 16px; }
.menu-controls {
  font-family: var(--font-body); font-size: 12.5px; line-height: 1.9; color: var(--steel);
  border-top: 1px solid var(--steel-dark); border-bottom: 1px solid var(--steel-dark);
  padding: 10px 0; margin-bottom: 14px;
}
.menu-controls b { color: var(--hydro); }
.menu-brief { font-family: var(--font-body); font-size: 12.5px; line-height: 1.6; color: var(--steel); margin-bottom: 20px; }
.menu-brief b { color: var(--hazard); }
.panel-title { font-size: clamp(34px, 6vw, 52px); letter-spacing: 8px; color: #fff; margin: 4px 0;
  text-shadow: 0 0 22px rgba(53,224,255,.6), 0 4px 0 #06101d; }
.panel-title.victory { color: var(--hydro); }
.panel-title.defeat { color: var(--danger); text-shadow: 0 0 22px rgba(255,77,77,.6), 0 4px 0 #1d0606; }
.end-stats { font-family: var(--font-body); font-size: 13px; line-height: 2; color: var(--steel); margin: 10px 0 18px; }
.end-stats b { color: var(--hydro); }

.big-btn {
  font-family: var(--font-stencil); font-size: 19px; letter-spacing: 3px;
  color: var(--navy); background: var(--hydro);
  border: none; padding: 14px 30px; cursor: pointer;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: transform .1s, box-shadow .1s, background .1s;
}
.big-btn:hover { transform: scale(1.05); box-shadow: 0 0 26px rgba(53,224,255,.7); background: #7df0ff; }
.ghost-btn {
  display: block; margin: 12px auto 0; font-family: var(--font-stencil); font-size: 13px; letter-spacing: 2px;
  color: var(--steel); background: none; border: 2px solid var(--steel-dark); padding: 9px 22px; cursor: pointer;
}
.ghost-btn:hover { color: var(--hydro); border-color: var(--hydro); }

#mute-note {
  position: absolute; top: 14px; right: 16px; z-index: 11;
  font-size: 12px; letter-spacing: 2px; color: var(--hazard);
  background: rgba(11,22,38,.9); border: 1px solid var(--steel-dark); padding: 5px 12px;
}

#fatal {
  position: absolute; inset: 0; z-index: 99; display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: var(--danger); font-family: var(--font-body); font-size: 14px;
  padding: 40px; text-align: center; white-space: pre-wrap;
}

@media (max-width: 700px) {
  .hud-block { min-width: 78px; padding: 4px 10px 6px; }
  .hud-value { font-size: 19px; }
  #hud-bottom { bottom: 60px; flex-direction: column; gap: 8px; width: 82vw; }
  #banner-title { font-size: 34px; letter-spacing: 5px; }
  #hint-bar { display: none; }
  .menu-panel { padding: 0 18px 20px; }
  .menu-stripes { margin: 0 -18px 14px; }
  .menu-stripes:last-child { margin: 18px -18px 0; }
  .upgrade-card { width: min(300px, 84vw); }
}