* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #0a0f0b;
  color: #e8f3ea;
  -webkit-user-select: none; user-select: none;
  overflow: hidden;
}

/* full-viewport app: fixed top bar + (fixed sidebar | scrollable field) */
#app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

#topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: #0c150e;
  border-bottom: 1px solid #1d3122;
}
.brand { font-size: 17px; font-weight: 700; white-space: nowrap; }
#topbar .stat { font-variant-numeric: tabular-nums; font-size: 14px; color: #c7e0cb; white-space: nowrap; }
#topbar .spacer { flex: 1 1 auto; }
/* Timer IS the product — it owns the topbar */
.timer {
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: -0.025em;
  text-shadow: 0 0 16px rgba(74,222,128,.28);
  padding: 3px 10px;
  background: #050e07;
  border: 1px solid #1a3422;
  border-radius: 8px;
}
.pb { font-variant-numeric: tabular-nums; color: #4d6b53; font-size: 12px; letter-spacing: 0.01em; }

/* stats as quiet pills; gold + lives carry semantic color */
#topbar .stat {
  padding: 3px 9px; border-radius: 999px; background: #0f1b13;
  border: 1px solid #1d3122; line-height: 1.4;
}
#topbar #gold { color: #fcd34d; }
#topbar #lives { color: #fca5a5; transition: color .15s, background .15s, border-color .15s; }
#topbar #lives.low {
  color: #fecaca; background: #2a0f12; border-color: #7f1d1d;
  animation: lifepulse 1.1s ease-in-out infinite;
}
@keyframes lifepulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); } 50% { box-shadow: 0 0 0 3px rgba(248,113,113,.18); } }

#topbar .controls { display: flex; align-items: center; gap: 8px; }

/* segmented speed control — three states visible at once (clear affordance) */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: #0f1b13; border: 1px solid #294a33; border-radius: 9px; }
.seg-btn {
  padding: 4px 9px; border: 0; border-radius: 6px; background: transparent;
  color: #9db8a4; font-size: 12px; font-weight: 700; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .12s, color .12s;
}
.seg-btn:hover { color: #e8f3ea; }
.seg-btn.on { background: #4ade80; color: #031a09; font-weight: 800; }

.ctrlbtn {
  padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid #294a33; background: #16271b; color: #e8f3ea;
  cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: background .12s, border-color .12s;
}
.ctrlbtn:hover { border-color: #3a6b4b; background: #1b3022; }
.ctrlbtn.active { border-color: #fbbf24; color: #fde047; background: #2a2410; }

/* keyboard focus visibility (a11y) */
.gbtn:focus-visible, .ctrlbtn:focus-visible, .seg-btn:focus-visible,
button.primary:focus-visible, .overlay button:focus-visible, .ibtn:focus-visible {
  outline: 2px solid #4ade80; outline-offset: 2px;
}

/* hotkey chips on tower buttons */
.gbtn .nm kbd {
  display: inline-block; min-width: 15px; margin-right: 6px; padding: 0 4px;
  font: inherit; font-size: 10px; font-weight: 700; text-align: center;
  color: #c7e0cb; background: #0c150e; border: 1px solid #2c4a36;
  border-radius: 4px; vertical-align: 1px;
}

#main { flex: 1 1 auto; display: flex; min-height: 0; }

#sidebar {
  flex: 0 0 220px;
  display: flex; flex-direction: column; gap: 10px;
  padding: 10px;
  background: #0c150e;
  border-right: 1px solid #1d3122;
  overflow-y: auto;
}
.panel { background: #101a13; border: 1px solid #1d3122; border-radius: 10px; padding: 10px; }
.panel h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; }
.hint { color: #7d977f; font-size: 11px; line-height: 1.45; margin: 6px 0 0; }
.help ul { margin: 0; padding-left: 16px; }
.help li { font-size: 11px; line-height: 1.7; color: #aec5b3; }

.towerlist { display: flex; flex-direction: column; gap: 6px; }
.gbtn {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 8px;
  border: 1px solid #294a33; background: #16271b; color: #e8f3ea;
  cursor: pointer; text-align: left; font-size: 12px;
}
.gbtn .dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; }
.gbtn .nm { flex: 1 1 auto; font-weight: 700; }
.gbtn .ds { display: block; color: #8fae97; font-size: 10px; font-weight: 400; }
.gbtn .ct { flex: 0 0 auto; color: #fde047; font-variant-numeric: tabular-nums; }
.gbtn:hover { border-color: #3a6b4b; background: #1b3022; }
.gbtn.selected { border-color: #4ade80; background: #1d3a26; box-shadow: inset 0 0 0 1px rgba(74,222,128,.2); }
.gbtn:disabled { opacity: .45; cursor: not-allowed; }

/* tower inspect / upgrade panel */
.inspector.hidden { display: none; }
.inspector h3 { display: flex; align-items: center; gap: 7px; }
.inspector .idot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.inspector .lvtag { margin-left: auto; font-size: 11px; font-weight: 700; color: #07120a; background: #86efac; padding: 1px 7px; border-radius: 999px; }
.inspstats { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-bottom: 9px; }
.inspstats > div { display: flex; justify-content: space-between; font-size: 11px; color: #8fae97; }
.inspstats b { color: #e8f3ea; font-variant-numeric: tabular-nums; }
.inspactions { display: flex; flex-direction: column; gap: 6px; }
.ibtn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid #2c6b45; background: #16331f; color: #e8f3ea; font-size: 12px; font-weight: 700;
  transition: background .12s, border-color .12s;
}
.ibtn:hover:not(:disabled) { background: #1d4429; border-color: #3a8a59; }
.ibtn .isub { display: block; font-size: 10px; font-weight: 400; color: #8fae97; }
.ibtn .icost { flex: 0 0 auto; color: #fde047; font-variant-numeric: tabular-nums; }
.ibtn:disabled { opacity: .45; cursor: not-allowed; }
.ibtn.sell { border-color: #6b3030; background: #2a1717; }
.ibtn.sell:hover:not(:disabled) { background: #3a1f1f; border-color: #8a4a4a; }
.ibtn.sell .icost { color: #fca5a5; }
.imax { font-size: 11px; color: #8fae97; text-align: center; padding: 4px; }

/* incoming armor type pills — shown while a wave is in flight */
.armor-pill { display: flex; flex-wrap: wrap; gap: 4px; margin: 5px 0 4px; }
.armor-pill.hidden { display: none; }
.apill { padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; border: 1px solid; line-height: 1.5; }

/* Boss wave — the wave panel signals danger */
@keyframes bosswarn {
  0%, 100% { border-color: #7f1d1d; }
  50% { border-color: #dc2626; box-shadow: 0 0 10px rgba(220,38,38,.15); }
}
#wavePanel.boss-wave {
  animation: bosswarn 1.4s ease-in-out infinite;
}
#wavePanel.boss-wave #waveName { color: #fca5a5; font-weight: 800; }

/* Primary CTA — the wave-send button is the most-pressed button in the game */
@keyframes waveavail {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
  55% { box-shadow: 0 0 10px 3px rgba(74,222,128,.16); }
}
button.primary {
  width: 100%; padding: 11px; font-size: 13px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #031a09; background: #4ade80;
  border: 0; border-radius: 9px; cursor: pointer;
  transition: background .12s, box-shadow .14s, transform .07s;
}
button.primary:not(:disabled) { animation: waveavail 2.6s ease-in-out infinite; }
button.primary:hover:not(:disabled) { background: #22c55e; box-shadow: 0 0 20px rgba(74,222,128,.28); }
button.primary:active:not(:disabled) { transform: translateY(1px); }
button.primary:disabled { opacity: .45; cursor: not-allowed; }

/* the play field: fills the rest, the canvas is the scrollable world */
#stage { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; }
#gameCanvas { display: block; width: 100%; height: 100%; background: #0c130d; cursor: crosshair; touch-action: none; }
#gameCanvas.panning { cursor: grabbing; }

.overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center;
  background: rgba(6,10,7,.74); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  padding: 24px; animation: overlayIn .2s ease-out;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.overlay.hidden { display: none; }
.overlay h2 { margin: 0; font-size: 46px; font-weight: 900; letter-spacing: -0.03em; text-wrap: balance; line-height: 1.05; }
.overlay p { margin: 0; color: #b2ccb8; max-width: 460px; line-height: 1.58; text-wrap: pretty; font-size: 15px; }
.overlay button {
  margin-top: 10px; padding: 14px 32px; font-size: 16px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #031a09; background: #4ade80; border: 0; border-radius: 10px; cursor: pointer;
  transition: background .12s, box-shadow .14s, transform .08s;
}
.overlay button:hover { background: #22c55e; box-shadow: 0 0 22px rgba(74,222,128,.3); }
.overlay button:active { transform: translateY(1px); }
/* State-specific overlay tints */
.overlay.state-won h2 { color: #4ade80; text-shadow: 0 0 32px rgba(74,222,128,.25); }
.overlay.state-lost h2 { color: #fca5a5; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Player count selector (start overlay) */
.prow { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.phint { font-size: 13px; color: #7d977f; }
.pbtns { display: flex; gap: 6px; }
.psb { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; border: 1px solid #2c4a36; background: #16271b; color: #e8f3ea; cursor: pointer; transition: background .12s, border-color .12s; }
.psb:hover { border-color: #3a6b4b; background: #1b3022; }
.psb.psel { border-color: #4ade80; background: #1d3a26; color: #4ade80; }

/* Co-op player panel */
#playerPanel { padding: 10px; }
#playerPanel h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .02em; }
#playerGolds { display: flex; flex-direction: column; gap: 5px; }
.pgrow { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 7px; border: 1px solid #1d3122; font-size: 12px; transition: background .12s, border-color .12s; }
.pgrow.pgactive { border-color: #4ade80; background: #1a3322; }
.pgdot { flex: 0 0 10px; height: 10px; border-radius: 50%; }
.pgname { flex: 1 1 auto; font-weight: 700; color: #c7e0cb; }
.pgcoin { flex: 0 0 auto; color: #fde047; font-variant-numeric: tabular-nums; }

/* ---- mobile / narrow: field on top (full width), towers in a bottom bar ---- */
@media (max-width: 760px) {
  #main { flex-direction: column; }
  #stage { order: 0; flex: 1 1 auto; min-height: 0; }
  #sidebar {
    order: 1; flex: 0 0 auto;
    flex-direction: row; align-items: stretch; gap: 8px;
    max-height: 40vh; overflow-x: auto; overflow-y: hidden;
    border-right: none; border-top: 1px solid #1d3122; padding: 8px;
    -webkit-overflow-scrolling: touch;
  }
  #sidebar .panel { flex: 0 0 auto; padding: 8px; }
  #sidebar .panel:nth-child(2) { order: 0; } /* wave + start button first */
  #sidebar .panel:nth-child(1) { order: 1; } /* tower palette scrolls after */
  .panel.help { display: none; }
  .towerlist { flex-direction: row; gap: 6px; }
  .gbtn { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 96px; }
  button.primary { width: auto; white-space: nowrap; padding: 8px 16px; }
  #topbar { gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
  .brand { font-size: 14px; }
  #topbar .stat { font-size: 12px; }
  .timer { font-size: 16px; }
  .ctrlbtn { padding: 4px 8px; font-size: 11px; }
}

/* ---- Online multiplayer lobby ---- */
.nonline {
  background: #16271b !important; border: 1px solid #2c4a36 !important; color: #c7e0cb !important;
  font-size: 14px !important; box-shadow: none !important;
}
.nonline:hover { border-color: #4ade80 !important; color: #4ade80 !important; background: #1b3022 !important; }
.ninput {
  background: #101c14; border: 1px solid #2c4a36; border-radius: 9px; color: #e8f3ea;
  padding: 11px 14px; font-size: 15px; font-weight: 600; width: 240px; max-width: 76vw; text-align: center;
}
.ninput:focus { outline: none; border-color: #4ade80; }
.ncodein { width: 96px; letter-spacing: .35em; text-transform: uppercase; font-weight: 800; }
.nbtns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.njoin { display: flex; gap: 8px; align-items: center; }
.nghost {
  background: transparent !important; border: none !important; color: #7fa388 !important;
  font-size: 13px !important; box-shadow: none !important; padding: 6px 10px !important;
}
.nghost:hover { color: #c7e0cb !important; }
.nerr { color: #fca5a5; font-size: 13.5px; font-weight: 700; }
.ncode { color: #4ade80; letter-spacing: .18em; font-family: ui-monospace, monospace; }
.nplayers { display: flex; flex-direction: column; gap: 7px; min-width: 250px; }
.nprow {
  display: flex; align-items: center; gap: 9px; background: #101c14;
  border: 1px solid #21392a; border-radius: 9px; padding: 9px 13px; font-size: 14px;
}
.nstat { margin-left: auto; font-size: 11.5px; color: #7fa388; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.nwait { color: #7fa388; font-size: 13.5px; }