/* ==========================================================================
   defense.css — Watershed Defense
   ========================================================================== */

/* A clear sky around the site, one step lighter than the playfield so the
   green site is the thing your eye lands on. */
body.gamepage { background: linear-gradient(180deg, #bae6fd 0%, #dcfce7 100%); }
#stage { background: radial-gradient(120% 90% at 50% 0%, #bfdbfe 0%, #7dd3fc 72%); }

/* --------------------------------------------------------------------------
   Build palette along the bottom edge
   -------------------------------------------------------------------------- */
#palette {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 7px 7px calc(7px + env(safe-area-inset-bottom));
  background: linear-gradient(transparent, rgba(255, 255, 255, .96) 45%);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#palette::-webkit-scrollbar { display: none; }

.tw {
  flex: 1 0 118px;
  min-width: 118px;
  max-width: 190px;
  min-height: 56px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--sh-soft);
  touch-action: manipulation;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
.tw:active { transform: scale(.96); }
.tw .ic { flex: 0 0 40px; width: 40px; height: 40px; display: block; }
.tw .col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: left; }
.tw .nm {
  color: #111726;
  font-size: 12.5px; font-weight: 800; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tw .cs { font-size: 13px; font-weight: 800; color: var(--good2); }
.tw.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tw.on .nm, .tw.on .cs { color: #fff; }
.tw.poor { opacity: .85; }
.tw.poor .cs { color: var(--bad2); }
@media (min-width: 860px) {
  .tw .ic { flex-basis: 46px; width: 46px; height: 46px; }
  .tw .nm { font-size: 13.5px; }
  .tw .cs { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Selected unit panel: two upgrade paths, Bloons style
   -------------------------------------------------------------------------- */
#twpanel {
  position: absolute;
  left: 8px; right: 8px;
  bottom: calc(var(--paletteH, 82px) + 54px);
  z-index: 6;
  padding: 8px 10px 9px;
  border: 1px solid var(--line2);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--sh-card);
  max-width: 520px;
  margin: 0 auto;
}
@media (min-width: 860px) { #twpanel { left: auto; right: 12px; width: 380px; } }

.tphead { display: flex; align-items: center; gap: 9px; margin: 0 0 7px; }
.tpicon { flex: 0 0 34px; width: 34px; height: 34px; }
.tpinfo { flex: 1 1 auto; min-width: 0; }
.tphead .nm { font-size: 13.5px; font-weight: 800; color: var(--text); line-height: 1.2; }
.tphead .dt {
  font-size: 10.5px; line-height: 1.35; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tpsell {
  flex: 0 0 auto; min-height: 32px; padding: 6px 11px;
  border: 1px solid var(--line2); border-radius: 9px;
  background: var(--surface2); color: var(--text);
  font-size: 11.5px; font-weight: 700; cursor: pointer;
}
.tpclose {
  flex: 0 0 auto; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: none;
  color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer;
}
.tpclose:active { background: var(--surface3); }

.pth { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; }
.pmeta { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; width: 40%; min-width: 0; }
.ptag {
  flex: 0 0 auto; width: 17px; height: 17px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: 9.5px; font-weight: 800; color: #fff;
}
.ptag.a { background: var(--accent); }
.ptag.b { background: var(--gold); }
.pname {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px; font-weight: 700; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pips { flex: 0 0 auto; display: flex; gap: 3px; }
.pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); }
.pips i.on.a { background: var(--accent); }
.pips i.on.b { background: var(--gold); }

.pbuy {
  flex: 1 1 auto; min-width: 0; min-height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--line2); border-radius: 10px;
  background: rgba(18, 161, 80, .14);
  color: var(--text); font-size: 11.5px; font-weight: 700;
  text-align: left; cursor: pointer; touch-action: manipulation;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s ease, border-color .12s ease;
}
.pbuy b { float: right; margin-left: 8px; color: var(--good2); font-weight: 800; }
.pbuy:hover:not(:disabled) { background: rgba(18, 161, 80, .26); border-color: var(--action); }
.pbuy.poor { background: var(--surface2); }
.pbuy.poor b { color: var(--bad2); }
.pbuy.locked, .pbuy.done {
  background: var(--surface2);
  color: var(--muted2); font-weight: 600; font-style: italic;
}
.pbuy:disabled { cursor: default; }

.tpdsc {
  margin: 6px 0 0;
  font-size: 10.5px; line-height: 1.45; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Wave controls
   -------------------------------------------------------------------------- */
#wavebar {
  position: absolute;
  left: 8px;
  bottom: calc(var(--paletteH, 82px) + 8px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
}
.wbtn {
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid var(--line2);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .95);
  color: var(--text);
  font-size: 13px;
  box-shadow: var(--sh-soft);
  font-weight: 800;
  cursor: pointer;
  touch-action: manipulation;
}
.wbtn.go { background: var(--action); border-color: var(--action); color: #eafff5; }
.wbtn.on { background: var(--gold); border-color: var(--gold); color: #21160a; }
.wbtn:disabled {
  background: rgba(255, 255, 255, .8);
  border-color: var(--line);
  color: var(--muted);
  cursor: default;
}

.wq { min-width: 96px; }

/* --------------------------------------------------------------------------
   Legend and briefing lines on the overlay cards
   -------------------------------------------------------------------------- */
.legend { display: grid; gap: 6px; margin: 0 0 14px; }
.lgrow {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
.lgrow b { color: var(--text); font-weight: 700; }
.lgdot { flex: 0 0 14px; height: 14px; border-radius: 50%; }

.alertline {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid rgba(242, 176, 30, .35);
  border-radius: var(--r-md);
  background: rgba(242, 176, 30, .12);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
.alertline b { color: var(--text); }