* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0a0f1e;
  color: #e2e8f0;
  font-family: 'Courier New', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 14px;
  user-select: none;
}
h1 {
  color: #22c55e;
  font-size: 1.25rem;
  letter-spacing: 4px;
  margin-bottom: 12px;
  text-transform: uppercase;
}
h1 span { color: #64748b; font-size: 0.75rem; letter-spacing: 2px; margin-left: 12px; }
#game-wrapper { display: flex; gap: 10px; align-items: flex-start; }

kbd {
  float: right;
  font-family: inherit;
  font-size: 0.55rem;
  color: #64748b;
  border: 1px solid #1e293b;
  border-radius: 3px;
  padding: 0 4px;
}

button { touch-action: manipulation; }
.tri-short { display: none; }

#mobile-hud { display: none; }
@media (max-width: 640px) {
  #mobile-hud {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    align-items: center;
    gap: 12px;
    padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
    background: #0d1526;
    border-top: 1px solid #1e293b;
    z-index: 80;
    font-size: 0.82rem;
  }
  .mh-stat { display: flex; gap: 4px; align-items: baseline; }
  .mh-l { color: #94a3b8; font-size: 0.68rem; }
  #mh-budget { color: #fbbf24; font-weight: bold; }
  #mh-lives { color: #ef4444; font-weight: bold; }
  #mh-wave { color: #e2e8f0; font-weight: bold; }
  #mh-wave-btn {
    margin-left: auto;
    background: #166534; border: 1px solid #16a34a; color: #bbf7d0;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem; letter-spacing: 1px; font-weight: bold;
    padding: 12px 18px; border-radius: 6px; cursor: pointer;
  }
  #mh-wave-btn:disabled { background: #1f2937; border-color: #374151; color: #4b5563; }
}

@media (max-width: 1200px) {
  body { align-items: flex-start; }
  #game-wrapper {
    display: grid;
    grid-template-areas: "canvas canvas" "shop stats";
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }
  #canvas-wrapper { grid-area: canvas; min-width: 0; }
  #canvas-wrapper canvas { width: 100%; height: auto; display: block; }
  #msg-bar { width: 100% !important; max-width: none !important; }
  #shop-panel { grid-area: shop; width: auto !important; }
  #stats-panel { grid-area: stats; width: auto !important; }
  .panel { width: auto !important; }
}
@media (max-width: 640px) {
  body { padding: 8px; padding-bottom: 92px; }
  h1 { font-size: 0.95rem; letter-spacing: 2px; margin-bottom: 8px; }
  h1 span { display: none; }
  #game-wrapper {
    grid-template-areas: "canvas" "shop" "stats";
    grid-template-columns: 1fr;
  }
  .mobile-hide { display: none !important; }
  .btn-desc { display: none; }
  kbd { display: none; }

  /* shop becomes a horizontal swipe strip of icon tiles */
  #shop-panel {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    padding: 8px;
    align-items: stretch;
  }
  #shop-panel > h3,
  #shop-panel > .shop-section-label,
  #shop-panel > .divider,
  #shop-panel > .shop-note { display: none; }
  #shop-panel > .tower-btn {
    flex: 0 0 auto;
    width: 68px;
    margin-bottom: 0;
    padding: 8px 4px;
    text-align: center;
  }
  .t-ico { display: block; line-height: 0; padding: 3px 0; }
  .t-ico svg { width: 22px; height: 22px; vertical-align: baseline; }
  .t-name { display: none; }
  .cost-rest { display: none; }
  .btn-cost { font-size: 0.66rem; margin-top: 3px; }
  #triage-btn {
    flex: 0 0 auto;
    width: 68px;
    margin: 0;
    padding: 8px 4px;
    font-size: 0.62rem;
    line-height: 1.4;
  }
  .tri-full { display: none; }
  .tri-short { display: inline; }

  /* tower inspector floats above the HUD as a bottom sheet */
  #tower-info {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    background: #111827;
    border: 1px solid #334155;
    border-radius: 8px;
    padding: 10px 12px;
    z-index: 90;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.55);
  }
  #tower-info h3 { display: none; }
  .ti-actions { display: flex; gap: 6px; }
  .ti-actions button { width: auto; flex: 1; margin: 0; padding: 10px 4px; }

  #wave-btn { padding: 13px; font-size: 0.8rem; }
  .stat-row { font-size: 0.78rem; }
  .tb-btn { flex: 1; padding: 11px 4px; }

}

canvas { border: 1px solid #1e293b; cursor: crosshair; display: block; }
#canvas-wrapper { min-width: 0; }
#canvas-wrapper canvas {
  width: 100%;
  height: auto;
  touch-action: none;
}

.t-ico svg { width: 13px; height: 13px; vertical-align: -2px; }
.si-ico svg { display: block; }

#shop-info {
  display: none;
  align-items: center;
  gap: 12px;
  background: #111827;
  border: 1px solid #334155;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 6px;
}
.si-ico { line-height: 0; flex-shrink: 0; }
.si-body { min-width: 0; }
.si-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 2px; }
#si-name { font-weight: bold; font-size: 0.78rem; letter-spacing: 1px; }
#si-cost { color: #fbbf24; font-size: 0.7rem; font-weight: bold; }
#si-desc { color: #cbd5e1; font-size: 0.64rem; margin-bottom: 2px; }
#si-stats { color: #94a3b8; font-size: 0.6rem; line-height: 1.5; }

#toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.tb-btn {
  background: #111827;
  border: 1px solid #334155;
  color: #cbd5e1;
  font-family: 'Courier New', monospace;
  font-size: 0.62rem;
  letter-spacing: 1px;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: border-color 0.12s, color 0.12s;
}
.tb-btn:hover { border-color: #475569; color: #e2e8f0; }
.tb-btn.tb-on { border-color: #22c55e; color: #86efac; }

.panel {
  background: #111827;
  border: 1px solid #1e293b;
  border-radius: 6px;
  padding: 10px;
  width: 172px;
}
.panel h3 {
  color: #94a3b8;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
  border-bottom: 1px solid #1e293b;
  padding-bottom: 5px;
}
.shop-section-label {
  color: #64748b;
  font-size: 0.55rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 8px 0 4px;
}
.tower-btn {
  width: 100%;
  background: #0a0f1e;
  border: 1px solid #1e293b;
  color: #e2e8f0;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
  padding: 7px 9px;
  margin-bottom: 7px;
  cursor: pointer;
  border-radius: 4px;
  text-align: left;
  transition: border-color 0.12s;
}
.tower-btn:hover:not(.cant-afford) { border-color: #334155; }
.tower-btn.selected { border-color: #22c55e; box-shadow: 0 0 6px rgba(34,197,94,0.25); }
.tower-btn.cant-afford { opacity: 0.38; cursor: not-allowed; }
.btn-cost { color: #fbbf24; font-size: 0.6rem; margin-top: 1px; }
.btn-desc { color: #94a3b8; font-size: 0.58rem; margin-top: 1px; }
.stat-row { display: flex; justify-content: space-between; font-size: 0.72rem; margin-bottom: 7px; }
.stat-label { color: #94a3b8; }
.sv { font-weight: bold; }
.sv.g { color: #22c55e; }
.sv.r { color: #ef4444; }
.sv.y { color: #fbbf24; }
.sv.p { color: #a855f7; }
#wave-btn {
  width: 100%;
  background: #166534;
  border: 1px solid #16a34a;
  color: #bbf7d0;
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  padding: 9px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 6px;
  margin-bottom: 8px;
  letter-spacing: 1px;
  transition: background 0.12s;
}
#wave-btn:hover:not(:disabled) { background: #15803d; }
#wave-btn:disabled { background: #1f2937; border-color: #374151; color: #4b5563; cursor: not-allowed; }
#triage-btn {
  width: 100%;
  background: #2e1065;
  border: 1px solid #7c3aed;
  color: #d8b4fe;
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  padding: 8px;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 6px;
  letter-spacing: 1px;
  transition: background 0.12s;
}
#triage-btn:hover:not(:disabled) { background: #4c1d95; }
#triage-btn:disabled { background: #1f2937; border-color: #374151; color: #4b5563; cursor: not-allowed; }
#triage-btn kbd { float: none; margin-left: 4px; }
.divider { border: none; border-top: 1px solid #1e293b; margin: 10px 0; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 0.58rem; color: #94a3b8; margin-bottom: 3px; }
.ldot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.info-text { font-size: 0.6rem; color: #94a3b8; line-height: 1.6; }
.info-text span { display: block; }

#wave-preview { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.pv-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #0a0f1e;
  border: 1px solid #1e293b;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 0.58rem;
  color: #cbd5e1;
}
.pv-chip i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.pv-none { color: #64748b; font-size: 0.65rem; }

#msg-bar {
  margin-top: 8px;
  font-size: 0.7rem;
  color: #cbd5e1;
  min-height: 20px;
  width: 100%;
}

#overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.94);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow-y: auto;
  padding: 20px;
}
#overlay.show { display: flex; }
#overlay h2 { font-size: 1.8rem; margin-bottom: 12px; }
#overlay .final-score { color: #cbd5e1; font-size: 0.9rem; margin-bottom: 6px; }
#overlay .final-detail { color: #94a3b8; font-size: 0.75rem; margin-bottom: 18px; }
#o-name-row { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
#o-name {
  background: #1e293b; border: 1px solid #334155; color: #e2e8f0;
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  padding: 8px 12px; border-radius: 4px; outline: none;
}
#o-name:focus { border-color: #3b82f6; }
#o-save-btn {
  background: #1e3a8a; border: 1px solid #3b82f6; color: #93c5fd;
  font-family: 'Courier New', monospace; font-size: 0.8rem;
  padding: 8px 14px; cursor: pointer; border-radius: 4px; transition: background 0.12s;
}
#o-save-btn:hover:not(:disabled) { background: #1d4ed8; }
#o-save-btn:disabled { background: #1f2937; border-color: #374151; color: #4b5563; cursor: not-allowed; }
#o-leaderboard {
  margin-bottom: 18px; min-width: 340px;
  max-height: 220px; overflow-y: auto;
}
#o-leaderboard table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
#o-leaderboard th {
  color: #94a3b8; border-bottom: 1px solid #1e293b;
  padding: 5px 10px; text-align: left;
  font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase;
}
#o-leaderboard td { color: #cbd5e1; padding: 4px 10px; border-bottom: 1px solid #0f172a; }
.lb-highlight td { color: #fbbf24 !important; }
.overlay-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
#restart-btn {
  background: #22c55e; border: none; color: #0a0f1e;
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  padding: 10px 24px; cursor: pointer; border-radius: 4px; font-weight: bold;
}
#restart-btn:hover { background: #16a34a; }
#endless-btn {
  background: #0a0f1e; border: 1px solid #22c55e; color: #86efac;
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  padding: 10px 24px; cursor: pointer; border-radius: 4px; font-weight: bold;
  box-shadow: 0 0 10px rgba(34,197,94,0.25);
}
#endless-btn:hover { background: #14532d; }
#choose-level-btn, #home-btn {
  background: #1e293b; border: 1px solid #475569; color: #cbd5e1;
  font-family: 'Courier New', monospace; font-size: 0.85rem;
  padding: 10px 24px; cursor: pointer; border-radius: 4px;
}
#choose-level-btn:hover, #home-btn:hover { background: #334155; }

.btn-target {
  width: 100%; background: #1a2e05; border: 1px solid #65a30d; color: #bef264;
  font-family: 'Courier New', monospace; font-size: 0.63rem; padding: 6px;
  cursor: pointer; border-radius: 4px; margin-bottom: 5px; transition: background 0.12s;
  letter-spacing: 0.5px;
}
.btn-target:hover { background: #365314; }
.btn-upgrade {
  width: 100%; background: #0d1f35; border: 1px solid #3b82f6; color: #93c5fd;
  font-family: 'Courier New', monospace; font-size: 0.63rem; padding: 6px;
  cursor: pointer; border-radius: 4px; margin-bottom: 5px; transition: background 0.12s;
  letter-spacing: 0.5px;
}
.btn-upgrade:hover:not(:disabled) { background: #1e3a8a; }
.btn-upgrade:disabled { background: #1f2937; border-color: #374151; color: #4b5563; cursor: not-allowed; }
.btn-sell {
  width: 100%; background: #2d0a0a; border: 1px solid #ef4444; color: #fca5a5;
  font-family: 'Courier New', monospace; font-size: 0.63rem; padding: 6px;
  cursor: pointer; border-radius: 4px; transition: background 0.12s; letter-spacing: 0.5px;
}
.btn-sell:hover { background: #7f1d1d; }

#level-select {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  align-items: center; justify-content: center; flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  padding: 20px;
}
#level-select.show { display: flex; }
#level-select h2 { color: #22c55e; font-size: 1.4rem; letter-spacing: 3px; margin-bottom: 6px; }
.ls-sub { color: #94a3b8; font-size: 0.7rem; margin-bottom: 28px; letter-spacing: 1px; }
.level-cards { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.level-card {
  background: #111827; border: 2px solid #1e293b;
  border-radius: 8px; padding: 22px 20px; width: 200px;
  cursor: pointer; text-align: center;
  transition: border-color 0.15s, transform 0.15s;
}
.level-card:hover { transform: translateY(-3px); }
.lc-head { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 6px; }
.lc-name { font-size: 1rem; font-weight: bold; letter-spacing: 2px; }
.lc-diff {
  font-size: 0.55rem; letter-spacing: 1px;
  border: 1px solid; border-radius: 3px; padding: 1px 6px;
}
.lc-sub { font-size: 0.6rem; color: #94a3b8; line-height: 1.5; margin-bottom: 14px; }
.lc-stats { font-size: 0.62rem; color: #94a3b8; line-height: 1.8; }
.lc-stats span { display: inline-block; white-space: nowrap; }
.lc-stats span:not(:last-child)::after { content: '\00b7'; color: #64748b; margin: 0 5px; }
.lc-best { font-size: 0.6rem; color: #fbbf24; margin-top: 12px; padding-top: 10px; border-top: 1px solid #1e293b; }
.lc-won { color: #22c55e; }
#ls-scores-btn {
  margin-top: 28px;
  background: #111827; border: 1px solid #eab308; color: #fde047;
  font-family: 'Courier New', monospace; font-size: 0.75rem; letter-spacing: 2px;
  padding: 10px 26px; cursor: pointer; border-radius: 4px;
  transition: background 0.12s;
}
#ls-scores-btn:hover { background: #422006; }

#scores-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  align-items: center; justify-content: center;
  z-index: 300;
  padding: 20px;
}
#scores-modal.show { display: flex; }
.sm-box {
  background: #111827; border: 1px solid #334155; border-radius: 8px;
  padding: 24px 28px; max-width: 480px; width: 100%;
  max-height: 80vh; display: flex; flex-direction: column;
}
.sm-box h2 {
  color: #fde047; font-size: 1.1rem; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 4px; text-align: center;
}
.sm-sub { color: #94a3b8; font-size: 0.62rem; text-align: center; margin-bottom: 14px; letter-spacing: 1px; }
#hs-list { overflow-y: auto; margin-bottom: 16px; min-height: 60px; }
#hs-list table { width: 100%; border-collapse: collapse; font-size: 0.72rem; }
#hs-list th {
  color: #94a3b8; border-bottom: 1px solid #1e293b;
  padding: 5px 10px; text-align: left;
  font-size: 0.65rem; letter-spacing: 1px; text-transform: uppercase;
}
#hs-list td { color: #cbd5e1; padding: 4px 10px; border-bottom: 1px solid #0f172a; }
#hs-close-btn {
  background: #1e293b; border: 1px solid #475569; color: #cbd5e1;
  font-family: 'Courier New', monospace; font-size: 0.75rem;
  padding: 9px; cursor: pointer; border-radius: 4px; width: 100%;
}
#hs-close-btn:hover { background: #334155; }

/* level select becomes a compact list on phones: all levels on one screen.
   Kept after the base level-select rules so these overrides win the cascade. */
@media (max-width: 640px) {
  #level-select { justify-content: flex-start; padding: 26px 14px; }
  #level-select h2 { font-size: 1.15rem; }
  .ls-sub { margin-bottom: 14px; }
  .level-cards { gap: 8px; width: 100%; max-width: 420px; flex-direction: column; flex-wrap: nowrap; }
  .level-card { width: 100%; padding: 12px 14px; text-align: left; }
  .level-card:hover { transform: none; }
  .lc-head { justify-content: space-between; margin-bottom: 4px; }
  .lc-name { font-size: 0.85rem; }
  .lc-sub { display: none; }
  .lc-stats { font-size: 0.62rem; line-height: 1.5; }
  .lc-best { margin-top: 6px; padding-top: 6px; font-size: 0.6rem; }
  #ls-scores-btn { margin-top: 14px; width: 100%; max-width: 420px; padding: 13px; }
  .sm-box { padding: 18px 14px; }

  /* shop details float above the HUD as a bottom sheet, like the inspector */
  #shop-info {
    position: fixed;
    left: 8px; right: 8px;
    bottom: calc(66px + env(safe-area-inset-bottom));
    z-index: 90;
    margin-top: 0;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.55);
  }
}

@media (min-width: 1201px) {
  body { padding: 18px 24px; }
  h1 { font-size: 1.6rem; letter-spacing: 5px; margin-bottom: 14px; }
  h1 span { font-size: 0.85rem; letter-spacing: 2px; }
  #game-wrapper { gap: 16px; width: 100%; max-width: 1800px; justify-content: center; }
  #canvas-wrapper { flex: 1 1 auto; }
  /* fill the space between the panels, but never taller than the viewport */
  #canvas-wrapper canvas {
    max-width: calc((100vh - 220px) * 1.4);
    max-width: calc((100dvh - 220px) * 1.4);
    margin: 0 auto;
  }
  #toolbar { justify-content: center; }
  #msg-bar { text-align: center; }
  .panel { width: 270px; flex: 0 0 270px; padding: 17px 16px; }
  .panel h3 { font-size: 0.86rem; margin-bottom: 11px; padding-bottom: 7px; }
  .shop-section-label { font-size: 0.72rem; margin: 11px 0 6px; }
  .tower-btn { font-size: 0.9rem; padding: 11px 13px; margin-bottom: 9px; }
  .btn-cost { font-size: 0.78rem; margin-top: 2px; }
  .btn-desc { font-size: 0.76rem; margin-top: 3px; }
  kbd { font-size: 0.66rem; }
  .stat-row { font-size: 1rem; margin-bottom: 11px; }
  .legend-item { font-size: 0.78rem; margin-bottom: 6px; }
  .ldot { width: 10px; height: 10px; }
  .info-text { font-size: 0.8rem; line-height: 1.7; }
  #wave-btn { font-size: 0.95rem; padding: 13px; margin-top: 8px; }
  #triage-btn { font-size: 0.84rem; padding: 11px; margin-top: 8px; }
  .shop-note { font-size: 0.72rem !important; }
  #msg-bar { font-size: 0.95rem; min-height: 26px; margin-top: 10px; }
  .tb-btn { font-size: 0.82rem; padding: 9px 18px; }
  .pv-chip { font-size: 0.76rem; padding: 4px 8px; }
  .pv-chip i { width: 9px; height: 9px; }
  .t-ico svg { width: 19px; height: 19px; }
  #si-name { font-size: 1rem; }
  #si-cost { font-size: 0.88rem; }
  #si-desc { font-size: 0.85rem; }
  #si-stats { font-size: 0.78rem; }
  #ti-name { font-size: 0.95rem !important; }
  #ti-level { font-size: 0.78rem !important; }
  #ti-stats { font-size: 0.78rem !important; }
  .btn-target, .btn-upgrade, .btn-sell { font-size: 0.78rem; padding: 9px; }
  canvas { border: 1px solid #334155; box-shadow: 0 0 24px rgba(34,197,94,0.06); }
  .level-card { width: 230px; padding: 28px 24px; }
  .lc-name { font-size: 1.1rem; }
  .lc-sub { font-size: 0.68rem; margin-bottom: 16px; }
  .lc-stats { font-size: 0.68rem; }
  .lc-best { font-size: 0.66rem; }
  #level-select h2 { font-size: 1.7rem; }
  .ls-sub { font-size: 0.78rem; margin-bottom: 32px; }
}