:root {
  --bg-main: linear-gradient(135deg, #050505, #12122f 58%, #1e1035);
  --panel: rgba(8, 8, 18, 0.74);
  --panel-strong: rgba(8, 8, 18, 0.9);
  --text: #fff;
  --muted: #b4b4c8;
  --accent: #8b0000;
  --accent-bright: #ff2d2d;
  --accent-soft: rgba(255, 45, 45, 0.2);
  --line: rgba(255,255,255,.12);
  --gold: #ffd166;
  --cyan: #79f2ff;
  --green: #89ffb4;
  --danger: #ff7b7b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  font-family: 'Montserrat', sans-serif;
  background: var(--bg-main);
  color: var(--text);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 35, 35, .11), transparent 20%),
    radial-gradient(circle at 85% 15%, rgba(121, 242, 255, .08), transparent 18%),
    radial-gradient(circle at 50% 85%, rgba(255, 209, 102, .06), transparent 18%);
  pointer-events: none;
}

#game-shell {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  z-index: 1;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  padding: 16px 18px 10px;
  pointer-events: none;
}

.brand,
.stats,
.wave-banner,
.upgrade-modal,
.intro,
.gameover,
.mobile-controls {
  backdrop-filter: blur(12px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(18,18,34,.82), rgba(8,8,18,.9));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 18px 48px rgba(0,0,0,.42),
    0 0 40px rgba(255, 45, 45, .06);
}

.brand {
  pointer-events: auto;
  padding: 12px 14px;
  border-radius: 18px;
  min-width: 230px;
}

.brand h1 {
  margin: 0;
  font-size: clamp(.95rem, 1.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: .03em;
  color: #d9d9e6;
}

.brand p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}

.brand-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
}

.brand-mark { color: #ff4141; }
.brand-separator { opacity: .55; }
.brand-status { color: var(--gold); }

.footer-meta {
  position: fixed;
  right: 22px;
  bottom: 18px;
  z-index: 3;
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  letter-spacing: .04em;
  pointer-events: none;
  text-align: right;
}

.stats {
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  width: 100%;
  min-width: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    linear-gradient(135deg, rgba(14,16,30,.86), rgba(7,8,18,.92));
}

.stat {
  min-width: 0;
  padding: 11px 12px 10px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.16);
  position: relative;
  overflow: hidden;
}

.stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0));
  opacity: .35;
}

.stat .label {
  display: block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  margin-bottom: 5px;
}

.stat .value {
  font-weight: 800;
  font-size: 1.12rem;
  color: #fff;
  line-height: 1.1;
}

.stat.crystal-stat {
  background:
    radial-gradient(circle at top right, rgba(178,108,255,.16), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.18);
  border-color: rgba(178,108,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.16),
    0 0 0 1px rgba(178,108,255,.10),
    0 0 18px rgba(178,108,255,.10);
}

.stat.crystal-stat::before {
  background: linear-gradient(180deg, rgba(178,108,255,.95), rgba(178,108,255,.18));
  opacity: .95;
}

.stat.crystal-stat .label { color: #d7b8ff; }
.stat.crystal-stat .value { text-shadow: 0 0 12px rgba(178,108,255,.18); }

.stat.hp-stat {
  background:
    radial-gradient(circle at top right, rgba(255,77,109,.15), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.18);
  border-color: rgba(255,77,109,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,77,109,.10),
    0 0 18px rgba(255,77,109,.08);
}

.stat.hp-stat::before {
  background: linear-gradient(180deg, rgba(255,77,109,.95), rgba(255,77,109,.18));
  opacity: .95;
}

.stat.hp-stat .label { color: #ffb6c4; }
.stat.hp-stat .value { text-shadow: 0 0 12px rgba(255,77,109,.18); }

.stat.shield-stat {
  background:
    radial-gradient(circle at top right, rgba(121,242,255,.15), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.18);
  border-color: rgba(121,242,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.16),
    0 0 0 1px rgba(121,242,255,.10),
    0 0 18px rgba(121,242,255,.08);
}

.stat.shield-stat::before {
  background: linear-gradient(180deg, rgba(121,242,255,.95), rgba(121,242,255,.18));
  opacity: .95;
}

.stat.shield-stat .label { color: #bff8ff; }
.stat.shield-stat .value { text-shadow: 0 0 12px rgba(121,242,255,.18); }

.stat.score-stat::before {
  background: linear-gradient(180deg, rgba(255,209,102,.9), rgba(255,209,102,.12));
  opacity: .8;
}

.stat.wave-stat::before {
  background: linear-gradient(180deg, rgba(255,140,90,.9), rgba(255,140,90,.12));
  opacity: .8;
}

.stat.boss-stat::before {
  background: linear-gradient(180deg, rgba(255,94,94,.9), rgba(255,94,94,.12));
  opacity: .8;
}

.stat.best-stat::before {
  background: linear-gradient(180deg, rgba(255,209,102,.95), rgba(255,209,102,.18));
  opacity: .9;
}

#arena-wrap {
  position: relative;
  padding: 6px 18px 18px;
  min-height: 0;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 28%),
    linear-gradient(135deg, rgba(139,0,0,.16), rgba(15,15,35,.2));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 24px 60px rgba(0,0,0,.46),
    0 0 50px rgba(255, 45, 45, .05);
}

.bottom-help {
  display: grid;
  place-items: center;
  padding: 0 18px 16px;
  pointer-events: none;
  position: relative;
}

.wave-banner {
  pointer-events: auto;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--muted);
  text-align: center;
  max-width: min(100%, 760px);
  width: fit-content;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 26px rgba(0,0,0,.18);
}

.helper-mobile-line {
  display: block;
  margin-top: 4px;
}

#arena-wrap,
.topbar,
.bottom-help,
.stats,
.wave-banner,
.brand {
  min-width: 0;
}

.accent { color: #fff; font-weight: 800; }
.danger { color: var(--danger); }
.gold { color: var(--gold); }
.cyan { color: var(--cyan); }
.green { color: var(--green); }

.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  z-index: 5;
  background: rgba(2, 2, 10, .45);
  overflow: auto;
}

.intro,
.enemy-guide-modal,
.upgrades-menu-modal {
  width: min(1320px, 100%);
  height: min(880px, calc(100vh - 36px));
  min-height: 0;
  border-radius: 34px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.intro::before,
.gameover::before,
.upgrade-modal::before,
.enemy-guide-modal::before,
.upgrades-menu-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 45, 45, .12), transparent 24%),
    radial-gradient(circle at 84% 16%, rgba(121, 242, 255, .09), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255, 209, 102, .06), transparent 28%);
}

.gameover,
.upgrade-modal {
  width: min(920px, 100%);
  border-radius: 30px;
  padding: 28px;
}

.menu-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
  height: 100%;
}

.menu-header {
  display: grid;
  grid-template-rows: auto auto minmax(88px, auto);
  gap: 12px;
  flex: 0 0 auto;
  align-content: start;
}

.menu-header .lead {
  min-height: 88px;
}

.menu-tabs {
  display: flex;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

.intro-main-actions {
  margin: 0;
  display: block;
  width: 100%;
}

.intro-tab-shell {
  margin: 0 !important;
}

.intro-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin: 0;
}

.intro-tab-row > * {
  flex: 0 0 auto;
}

.menu-body {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 24px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.menu-main,
.menu-sidebar {
  min-width: 0;
}

.menu-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.menu-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 45, 45, .14);
  color: #ffd2d2;
  border: 1px solid rgba(255, 45, 45, .35);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  margin: 0;
  width: fit-content;
}

.enemy-guide-modal .eyebrow,
.upgrades-menu-modal .eyebrow,
.intro .eyebrow {
  margin-bottom: 18px;
}

.menu-header h1,
.menu-header h2,
.intro h2,
.enemy-guide-modal h2,
.upgrades-menu-modal h2 {
  margin: 0;
  font-size: clamp(2.25rem, 4vw, 4rem);
  line-height: .95;
  letter-spacing: -.03em;
  max-width: 14ch;
}

.lead {
  color: #c7c7d8;
  font-size: 1.04rem;
  line-height: 1.75;
  max-width: 72ch;
  margin: 0;
}

.hero-panel,
.side-card,
.info-panel,
.enemy-guide-card,
.upgrades-menu-card,
.intro-controls-panel {
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015)),
    rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16);
}

.hero-panel {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.hero-panel::after {
  content: "";
  position: absolute;
  inset: auto -60px -60px auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(255,45,45,.16), rgba(255,45,45,0) 70%);
  pointer-events: none;
}

.hero-panel-top {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.intro-play-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.play-hero-btn {
  min-width: 340px;
  min-height: 76px;
  padding: 20px 30px;
  font-size: 1.08rem;
  letter-spacing: .06em;
  box-shadow:
    0 18px 38px rgba(255, 45, 45, .28),
    0 0 42px rgba(255, 45, 45, .18),
    inset 0 1px 0 rgba(255,255,255,.24);
  animation: playPulse 2.4s ease-in-out infinite;
}

.play-hero-btn .play-icon {
  display: inline-block;
  margin-right: 10px;
  font-size: 1.05em;
  transform: translateY(1px);
}

@keyframes playPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      0 18px 38px rgba(255, 45, 45, .24),
      0 0 36px rgba(255, 45, 45, .14),
      inset 0 1px 0 rgba(255,255,255,.24);
  }
  50% {
    transform: translateY(-1px);
    box-shadow:
      0 22px 42px rgba(255, 45, 45, .30),
      0 0 48px rgba(255, 45, 45, .20),
      inset 0 1px 0 rgba(255,255,255,.26);
  }
}

.intro-controls-panel {
  max-width: 100%;
  padding: 18px 20px;
}

.intro-controls-label {
  display: block;
  margin-bottom: 8px;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  font-weight: 800;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.control-chip {
  border-radius: 16px;
  padding: 12px 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.control-chip span {
  display: block;
  color: rgba(255,255,255,.66);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: 6px;
  font-weight: 800;
}

.control-chip strong {
  display: block;
  color: #fff;
  font-size: .9rem;
  line-height: 1.3;
}

.quick-stats-grid,
.compact-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.info-panel {
  padding: 18px;
}

.info-panel-label {
  display: block;
  margin-bottom: 6px;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
}

.info-panel strong {
  display: block;
  font-size: 1rem;
  color: #fff;
}

.info-panel span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
  font-size: .92rem;
}

.side-card {
  padding: 28px;
  display: grid;
  gap: 18px;
  align-content: start;
}

.side-card h3 {
  margin: 0;
  font-size: 1.02rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f2f2fb;
}

.mini-list {
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.65;
}

.pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.pill {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(0,0,0,.18));
  border: 1px solid rgba(255,255,255,.09);
  color: #cfcfe0;
  font-size: .92rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.intro-tab-btn {
  appearance: none;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: #f3f3fb;
  border-radius: 999px;
  min-height: 48px;
  padding: 12px 18px;
  font: inherit;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    transform .16s ease,
    box-shadow .22s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 18px rgba(0,0,0,.16);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intro-tab-btn:hover {
  transform: translateY(-2px);
}

.intro-tab-btn.is-active {
  color: white;
  border-color: rgba(255,45,45,.5);
  background:
    linear-gradient(180deg, rgba(255,45,45,.24), rgba(255,45,45,.10)),
    rgba(255,255,255,.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(255,45,45,.12);
}

button,
.button-link {
  appearance: none;
  border: none;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  padding: 14px 20px;
  font-weight: 800;
  letter-spacing: .01em;
  transition:
    transform .16s ease,
    box-shadow .22s ease,
    background .25s ease,
    border-color .25s ease,
    opacity .2s ease;
}

button:hover,
.button-link:hover {
  transform: translateY(-2px) scale(1.01);
}

.button-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.primary {
  background: linear-gradient(90deg, #7f0000, #ff2d2d);
  color: white;
  box-shadow:
    0 10px 24px rgba(255, 45, 45, .22),
    0 0 24px rgba(255, 45, 45, .18),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.secondary,
.pause-exit-link {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: white;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.18);
}

.exit-link-muted {
  background: linear-gradient(180deg, rgba(255,123,123,.10), rgba(255,123,123,.04));
  color: #ffd4d4;
  border: 1px solid rgba(255,123,123,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.16);
}

.exit-link-muted:hover {
  border-color: rgba(255,123,123,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 12px 24px rgba(0,0,0,.20),
    0 0 18px rgba(255,123,123,.10);
}


.support-link-muted {
  gap: 7px;
  background: linear-gradient(180deg, rgba(255,79,100,.08), rgba(255,79,100,.025));
  color: #ffd8df;
  border: 1px solid rgba(255,79,100,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 18px rgba(0,0,0,.14);
}

.support-link-muted span[aria-hidden="true"] { color: #ff7f95; }

.support-link-muted:hover,
.support-link-muted:focus-visible {
  border-color: rgba(255,79,100,.34);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 24px rgba(0,0,0,.18);
}

.upgrade-modal h3,
.gameover h3 {
  margin: 0 0 10px;
  font-size: 1.7rem;
}

.upgrade-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.upgrade-card {
  text-align: left;
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  color: white;
  min-height: 185px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: space-between;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.18);
}

.upgrade-card:hover {
  border-color: rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 18px 34px rgba(0,0,0,.24),
    0 0 24px rgba(255,255,255,.05);
}

.upgrade-card.legendary-card {
  animation: legendaryPulse 2.2s ease-in-out infinite;
}

@keyframes legendaryPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.05),
      0 12px 28px rgba(0,0,0,.18),
      0 0 22px rgba(255, 209, 102, .16);
  }
  50% {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 16px 34px rgba(0,0,0,.22),
      0 0 34px rgba(255, 209, 102, .28);
  }
}

.upgrade-card small {
  display: block;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 2px;
}

.upgrade-card strong {
  display: block;
  font-size: 1.08rem;
  line-height: 1.35;
}

.enemy-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.enemy-guide-card {
  padding: 24px;
  min-height: 188px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    transform .18s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.enemy-guide-card:hover {
  transform: translateY(-2px);
}

.enemy-guide-card.drone-card {
  border-color: rgba(255,139,139,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,139,139,.10),
    0 0 24px rgba(255,139,139,.10);
}

.enemy-guide-card.tank-card {
  border-color: rgba(255,209,102,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,209,102,.10),
    0 0 24px rgba(255,209,102,.10);
}

.enemy-guide-card.sniper-card {
  border-color: rgba(121,242,255,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(121,242,255,.10),
    0 0 24px rgba(121,242,255,.12);
}

.enemy-guide-card.boss-card {
  border-color: rgba(255,77,77,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 12px 28px rgba(0,0,0,.16),
    0 0 0 1px rgba(255,77,77,.12),
    0 0 28px rgba(255,77,77,.14);
}

.enemy-guide-card h3 {
  margin: 12px 0 8px;
  font-size: 1.08rem;
  letter-spacing: .01em;
}

.enemy-guide-card p {
  margin: 0;
  color: #c3c3d3;
  line-height: 1.65;
}

.enemy-icon {
  width: 54px;
  height: 54px;
}

.drone-icon,
.tank-icon,
.sniper-icon,
.boss-icon {
  border: 1px solid rgba(255,255,255,.18);
}

.drone-icon {
  background: #ff8b8b;
  clip-path: polygon(50% 0%, 82% 70%, 50% 48%, 18% 70%);
  box-shadow:
    0 0 22px rgba(255, 139, 139, .45),
    inset 0 0 18px rgba(255,255,255,.18);
}

.tank-icon {
  border-radius: 10px;
  background: #ffd166;
  clip-path: polygon(14% 18%, 86% 18%, 100% 50%, 86% 82%, 14% 82%, 0% 50%);
  box-shadow:
    0 0 22px rgba(255, 209, 102, .42),
    inset 0 0 18px rgba(255,255,255,.16);
}

.sniper-icon {
  background: #79f2ff;
  clip-path: polygon(50% 0%, 78% 50%, 50% 100%, 22% 50%);
  box-shadow:
    0 0 22px rgba(121, 242, 255, .42),
    inset 0 0 18px rgba(255,255,255,.16);
}

.boss-icon {
  background: #ff4d4d;
  clip-path: polygon(50% 0%, 100% 25%, 82% 100%, 18% 100%, 0% 25%);
  box-shadow:
    0 0 26px rgba(255, 77, 77, .45),
    inset 0 0 18px rgba(255,255,255,.14);
}

.upgrades-menu-modal .menu-body,
.enemy-guide-modal .menu-body {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
}

.upgrades-menu-scroll {
  min-height: 0;
  flex: 1;
  height: 100%;
  overflow: auto;
  padding-right: 8px;
}

.upgrades-menu-scroll::-webkit-scrollbar {
  width: 10px;
}

.upgrades-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14);
  border-radius: 999px;
}

.upgrade-tier-block + .upgrade-tier-block {
  margin-top: 24px;
}

.upgrade-tier-title {
  margin: 0 0 12px;
  font-size: .84rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}

.upgrades-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.upgrades-menu-card {
  padding: 16px;
  min-height: 148px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: flex-start;
}

.upgrades-menu-card .upgrade-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.upgrades-menu-card .upgrade-icon-box {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  font-size: 1rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.upgrades-menu-card h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: .01em;
}

.upgrades-menu-card p {
  margin: 0;
  color: #c3c3d3;
  line-height: 1.55;
  font-size: .92rem;
}

.gameover {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gameover .score-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.score-box {
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  padding: 14px;
}

.score-box span {
  display: block;
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.score-box strong {
  font-size: 1.2rem;
}

.pause-panel {
  max-width: 560px;
  padding: 34px 30px 30px;
}

.pause-panel h3 {
  margin-bottom: 12px;
}

.pause-subtext {
  margin-bottom: 20px;
  color: #c9c9d8;
}

.pause-build-wrap {
  margin: 10px 0 20px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
}

.cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.pause-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

.pause-actions > * {
  width: 100%;
  min-width: 0;
}

.build-inline,
.muted-build {
  color: var(--muted);
  font-weight: 700;
}

.build-icon-label {
  color: var(--muted);
  font-weight: 700;
  display: block;
  margin-bottom: 8px;
}

.build-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.build-icon-chip {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 1px rgba(255,255,255,.03),
    0 0 14px rgba(255,255,255,.06);
  font-weight: 800;
  font-size: 1rem;
  cursor: default;
}

.hidden { display: none !important; }

.mobile-controls {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 14px;
  border-radius: 24px;
  padding: 12px;
  display: none;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  z-index: 4;
  background: rgba(8, 8, 18, .55);
}

.stick {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  touch-action: none;
}

.stick-knob {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.2), rgba(255,45,45,.2));
  border: 1px solid rgba(255,255,255,.2);
  position: absolute;
  left: 35px;
  top: 35px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

.action-stack {
  display: grid;
  gap: 10px;
}

.touch-btn {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  font-size: .95rem;
  background: rgba(255,255,255,.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
}

.touch-btn.primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}


@media (max-width: 1200px) {
  .upgrades-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  .topbar {
    grid-template-columns: 1fr;
  }

  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .menu-body {
    grid-template-columns: 1fr;
  }

  .compact-stats-grid {
    grid-template-columns: 1fr;
  }

  .controls-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .enemy-guide-grid {
    grid-template-columns: 1fr;
  }

  .upgrade-grid,
  .gameover .score-grid {
    grid-template-columns: 1fr;
  }

  .upgrades-menu-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .bottom-help {
    padding-bottom: 16px;
  }

  .enemy-guide-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  html,
  body {
    overflow: hidden;
  }

  .overlay {
    padding: 12px;
    place-items: start stretch;
    overflow: auto;
  }

  .brand p {
    display: none;
  }

  .intro,
  .enemy-guide-modal,
  .upgrades-menu-modal,
  .gameover,
  .upgrade-modal {
    width: 100%;
    height: auto;
    min-height: calc(100vh - 24px);
    border-radius: 24px;
    padding: 20px;
  }

  .menu-shell {
    height: auto;
    min-height: 100%;
    gap: 18px;
  }

  .menu-header {
    grid-template-rows: auto auto minmax(72px, auto);
  }

  .menu-header .lead {
    min-height: 72px;
  }

  .menu-header h1,
  .menu-header h2,
  .intro h2,
  .enemy-guide-modal h2,
  .upgrades-menu-modal h2 {
    max-width: none;
    font-size: clamp(1.9rem, 10vw, 2.7rem);
  }

  .lead {
    font-size: .96rem;
    line-height: 1.65;
  }

  .intro-tab-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .intro-tab-row > *:last-child {
    grid-column: 1 / -1;
  }

  .intro-tab-btn {
    width: 100%;
    min-width: 0;
    padding: 12px 14px;
    font-size: .84rem;
    letter-spacing: .03em;
  }

  .hero-panel,
  .side-card,
  .enemy-guide-card,
  .info-panel,
  .intro-controls-panel {
    padding: 18px;
    border-radius: 20px;
  }

  .play-hero-btn {
    width: 100%;
    min-width: 0;
    min-height: 66px;
    padding: 18px 18px;
    font-size: .98rem;
  }

  .controls-grid,
  .compact-stats-grid,
  .upgrades-menu-grid {
    grid-template-columns: 1fr;
  }

  .enemy-icon {
    width: 48px;
    height: 48px;
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wave-banner {
    border-radius: 20px;
  }

  canvas {
    border-radius: 20px;
  }

  .footer-meta {
    right: 16px;
    bottom: 12px;
    font-size: .72rem;
  }
}

@media (max-width: 640px) {
  .upgrades-menu-grid {
    grid-template-columns: 1fr;
  }
}