/* Signal Defender · tower-defense layer.
   Styles the classes injected by tower-defense.js. Everything is scoped to the
   .tower-defense- namespace (or nested under .signal-game) so it can't leak
   into the arcade/office UI defined in base.css and game.css. */

/* ------------------------------------------------------------------ *
 * HUD tiles (appended into .signal-game-hud)                          *
 * ------------------------------------------------------------------ */
.signal-game-hud .tower-defense-hud {
  min-width: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid rgba(84, 233, 255, .22);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(84, 233, 255, .08), rgba(2, 10, 17, .55));
}
.signal-game-hud .tower-defense-hud span {
  color: #7096a8;
  font-size: 7px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.signal-game-hud .tower-defense-hud strong {
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signal-game-hud .tower-defense-hud-credits strong { color: #ffe08a; text-shadow: 0 0 12px rgba(255, 200, 87, .45); }
.signal-game-hud .tower-defense-hud-act strong { color: #8ff4ff; }

/* The campaign replaces the legacy XDR/Office tiles with Credits/Company Act,
   keeping the original eight-column header compact. */
.signal-game.tower-defense-active .signal-game-hud > div:nth-child(7),
.signal-game.tower-defense-active .signal-game-hud > div:nth-child(8) { display: none; }

/* ------------------------------------------------------------------ *
 * BASE status overlay (aside appended to #signalGame)                 *
 * ------------------------------------------------------------------ */
.tower-defense-base-status {
  position: absolute;
  z-index: 3;
  left: 18px;
  top: 92px;
  width: min(232px, calc(100vw - 36px));
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid rgba(84, 233, 255, .2);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(7, 20, 31, .9), rgba(4, 13, 22, .8));
  box-shadow: 0 15px 42px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .03);
  backdrop-filter: none;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
/* Only reveal the base panel while the tower-defense campaign is running. */
.signal-game.tower-defense-active .tower-defense-base-status { opacity: 1; transform: none; }

.tower-defense-base-title {
  display: grid;
  gap: 2px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}
.tower-defense-base-title span {
  color: var(--accent-2);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tower-defense-base-title strong { font-size: 14px; letter-spacing: -.01em; }
.tower-defense-base-title small { color: var(--muted); font-family: var(--mono); font-size: 9px; }

.tower-defense-cirt {
  display: grid;
  gap: 3px;
  padding: 7px 8px;
  border: 1px solid rgba(244, 211, 94, .3);
  border-radius: 8px;
  background: rgba(244, 211, 94, .06);
}
.tower-defense-cirt span {
  color: #f4d35e;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
}
.tower-defense-cirt strong {
  color: #f8edb3;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1.35;
}

.tower-defense-zone-meters { display: grid; gap: 6px; }
.tower-defense-zone-meter {
  display: grid;
  grid-template-columns: 58px 1fr 30px;
  align-items: center;
  gap: 7px;
}
.tower-defense-zone-meter > span {
  color: #7f9fb0;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tower-defense-zone-meter > i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: rgba(2, 10, 17, .7);
  box-shadow: inset 0 0 0 1px rgba(120, 177, 207, .16);
  overflow: hidden;
}
.tower-defense-zone-meter > i em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), #59f1a8);
  box-shadow: 0 0 10px rgba(89, 241, 168, .5);
  transition: width .35s ease;
}
.tower-defense-zone-meter > strong {
  color: #dff9ff;
  font-family: var(--mono);
  font-size: 9px;
  text-align: right;
}

.tower-defense-lanes {
  display: flex;
  gap: 5px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.tower-defense-lanes span {
  flex: 1;
  padding: 4px 0;
  border: 1px solid rgba(120, 177, 207, .2);
  border-radius: 7px;
  background: rgba(2, 10, 17, .5);
  color: #9fc3d4;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
}
.tower-defense-lanes .lane-email { border-color: rgba(255, 200, 87, .4); color: #ffdd94; }
.tower-defense-lanes .lane-network { border-color: rgba(84, 233, 255, .4); color: #9fefff; }
.tower-defense-lanes .lane-endpoint { border-color: rgba(169, 112, 255, .4); color: #cbb0ff; }

/* ------------------------------------------------------------------ *
 * Build / shop section (inside .signal-game-panel dialog)             *
 * ------------------------------------------------------------------ */
.tower-defense-build {
  display: grid;
  gap: 8px;
  margin: 2px 0 10px;
  text-align: left;
}
.tower-defense-build.hidden { display: none; }

.signal-game.tower-defense-active .signal-game-panel {
  width: min(1420px, calc(100vw - 20px));
  max-height: calc(100dvh - 18px);
  padding: 15px 18px;
}
.signal-game.tower-defense-active .signal-game-panel h2 { margin: 1px 0 4px; font-size: 26px; }
.signal-game.tower-defense-active .signal-game-panel > .page-eyebrow { display: none; }
.signal-game.tower-defense-active .signal-game-panel > p { margin-bottom: 7px; line-height: 1.3; }
.signal-game.tower-defense-active .signal-game-object-meta { margin-bottom: 7px; padding: 6px; }
.signal-game.tower-defense-active .signal-game-object-meta.is-shop-hidden { display: none; }
.signal-game.tower-defense-active .signal-game-panel.is-security-result-panel {
  width: min(1080px, calc(100vw - 20px));
  padding: 24px;
}
.signal-game.tower-defense-active .signal-game-panel.is-security-result-panel > p {
  max-width: 850px;
  margin-bottom: 14px;
  color: #b7ccd6;
  font-size: 13px;
  white-space: normal;
}
.signal-game-object-meta.is-security-result {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border-color: rgba(84, 233, 255, .25);
}
.signal-security-result-metric {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
  padding: 10px 8px;
  border: 1px solid rgba(120, 177, 207, .16);
  border-radius: 9px;
  background: rgba(8, 25, 37, .72);
}
.signal-security-result-metric small {
  overflow: hidden;
  color: #759bab;
  font-family: var(--sans);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .09em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.signal-security-result-metric strong { color: #dff9ff; font-size: 16px; }
.signal-security-result-metric.is-primary {
  border-color: rgba(84, 233, 255, .34);
  background: linear-gradient(145deg, rgba(84, 233, 255, .13), rgba(92, 124, 255, .08));
}
.signal-security-result-metric.is-primary strong { color: #8ff4ff; }
.signal-game-object-meta.is-security-result[data-grade="critical"] .signal-security-result-metric:nth-child(2) strong,
.signal-game-object-meta.is-security-result[data-grade="exposed"] .signal-security-result-metric:nth-child(2) strong { color: #ff8a65; }
.signal-game-object-meta.is-security-result[data-grade="managed"] .signal-security-result-metric:nth-child(2) strong { color: #ffc857; }
.signal-game-object-meta.is-security-result[data-grade="hardened"] .signal-security-result-metric:nth-child(2) strong,
.signal-game-object-meta.is-security-result[data-grade="resilient"] .signal-security-result-metric:nth-child(2) strong { color: #59f1a8; }
.signal-security-result-context {
  grid-column: 1 / -1;
  padding: 4px 6px 1px;
  color: #77d9e9;
  font-size: 8px;
  line-height: 1.45;
}
.signal-game.tower-defense-active .signal-game-controls {
  left: auto;
  right: 18px;
  top: 78px;
  bottom: auto;
  transform: none;
  padding: 5px 9px;
  backdrop-filter: none;
  background: rgba(3, 12, 20, .9);
}

.tower-defense-build-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.tower-defense-build-summary > div {
  display: grid;
  gap: 2px;
  padding: 6px 9px;
  border: 1px solid rgba(84, 233, 255, .16);
  border-radius: 12px;
  background: radial-gradient(circle at 80% 0, rgba(92, 124, 255, .12), transparent 60%), rgba(2, 10, 17, .5);
}
.tower-defense-build-summary span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.tower-defense-build-summary strong { font-family: var(--mono); font-size: 15px; letter-spacing: -.01em; }
.tower-defense-build-summary > div:nth-child(1) strong { color: #ffe08a; }
.tower-defense-build-summary > div:nth-child(2) strong { color: #8ff4ff; }
.tower-defense-build-summary > div:nth-child(3) strong { color: #59f1a8; }

/* Company act progression track */
.tower-defense-act-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 7px;
}
.tower-defense-act-step {
  --act-color: var(--accent-2);
  position: relative;
  display: grid;
  justify-items: center;
  grid-template-columns: auto 1fr;
  align-items: center;
  justify-items: start;
  gap: 2px 6px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(2, 10, 17, .42);
  text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.tower-defense-act-step i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: rgba(120, 177, 207, .12);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}
.tower-defense-act-step span { font-size: 8.5px; font-weight: 700; line-height: 1.1; }
.tower-defense-act-step small { color: var(--muted-2); font-family: var(--mono); font-size: 8px; }
.tower-defense-act-step.is-complete {
  border-color: rgba(89, 241, 168, .3);
  background: rgba(89, 241, 168, .06);
}
.tower-defense-act-step.is-complete i { background: rgba(89, 241, 168, .18); color: #59f1a8; }
.tower-defense-act-step.is-active {
  border-color: var(--act-color);
  background: color-mix(in srgb, var(--act-color) 12%, rgba(2, 10, 17, .6));
  box-shadow: 0 0 0 1px var(--act-color), 0 10px 26px rgba(0, 0, 0, .35);
  transform: translateY(-2px);
}
.tower-defense-act-step.is-active i {
  background: var(--act-color);
  color: #041018;
  box-shadow: 0 0 16px var(--act-color);
}
.tower-defense-act-step.is-active span { color: #eef7fb; }

/* License review / enablement banner */
.tower-defense-license-banner {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid rgba(89, 241, 168, .32);
  border-left-width: 3px;
  border-radius: 10px;
  background: rgba(89, 241, 168, .07);
}
.tower-defense-license-banner strong {
  color: #59f1a8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tower-defense-license-banner span { color: #bcd7e2; font-size: 9px; line-height: 1.25; }
.tower-defense-license-banner.has-gaps {
  border-color: rgba(255, 159, 67, .45);
  background: rgba(255, 159, 67, .09);
  animation: td-banner-pulse 2.4s ease-in-out infinite;
}
.tower-defense-license-banner.has-gaps strong { color: #ffb15b; }
@keyframes td-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 159, 67, 0); }
  50% { box-shadow: 0 0 0 3px rgba(255, 159, 67, .12); }
}

/* Two-step protection catalog: choose category/vendor, then inspect products. */
.tower-defense-catalog {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  height: clamp(310px, 47dvh, 430px);
  overflow: hidden;
  border: 1px solid rgba(84,233,255,.22);
  border-radius: 15px;
  background: rgba(2,10,17,.52);
}
.tower-defense-catalog.hidden { display: none; }
.tower-defense-catalog-sidebar {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 12px 10px;
  border-right: 1px solid rgba(84,233,255,.16);
  background: linear-gradient(180deg, rgba(10,30,44,.94), rgba(3,13,21,.96));
}
.tower-defense-catalog-kicker { color: var(--accent-2); font: 900 9px var(--mono); letter-spacing: .16em; }
.tower-defense-catalog-mode { display: grid; gap: 6px; }
.tower-defense-catalog-mode > span { color: #d8eef6; font-size: 11px; font-weight: 800; }
.tower-defense-catalog-mode > div { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.tower-defense-catalog-mode button {
  min-height: 34px;
  padding: 6px 7px;
  border: 1px solid var(--line-2);
  border-radius: 9px;
  background: rgba(2,10,17,.62);
  color: #88aaba;
  font-size: 9.5px;
  font-weight: 800;
  cursor: pointer;
}
.tower-defense-catalog-mode button.is-active { border-color: var(--accent-2); background: rgba(84,233,255,.15); color: #efffff; box-shadow: inset 0 0 0 1px rgba(84,233,255,.15); }
.tower-defense-categories,
.tower-defense-vendors { display: flex; min-height: 0; flex-direction: column; gap: 6px; padding: 1px 6px 4px 0; overflow-y: scroll; scrollbar-color: rgba(84,233,255,.72) rgba(2,10,17,.65); scrollbar-width: auto; }
.tower-defense-categories::-webkit-scrollbar,
.tower-defense-vendors::-webkit-scrollbar { width: 9px; }
.tower-defense-categories::-webkit-scrollbar-track,
.tower-defense-vendors::-webkit-scrollbar-track { border-radius: 999px; background: rgba(2,10,17,.68); }
.tower-defense-categories::-webkit-scrollbar-thumb,
.tower-defense-vendors::-webkit-scrollbar-thumb { border: 2px solid rgba(2,10,17,.68); border-radius: 999px; background: rgba(84,233,255,.72); }
.tower-defense-categories.hidden,
.tower-defense-vendors.hidden { display: none; }
.tower-defense-category {
  --category-color: var(--accent-2);
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 9px;
  min-height: 51px;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--category-color) 22%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--category-color) 5%, rgba(2,10,17,.75));
  color: #cce4ed;
  text-align: left;
  cursor: pointer;
}
.tower-defense-category:hover,
.tower-defense-category.is-active { border-color: var(--category-color); background: color-mix(in srgb, var(--category-color) 14%, rgba(2,10,17,.82)); }
.tower-defense-category.is-active { box-shadow: inset 3px 0 0 var(--category-color), 0 8px 18px rgba(0,0,0,.2); }
.tower-defense-category > i {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--category-color) 18%, rgba(2,10,17,.8));
  color: var(--category-color);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.tower-defense-category > span { display: grid; gap: 3px; min-width: 0; }
.tower-defense-category > span b { overflow: hidden; color: #e5f4f8; font-size: 10.5px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-category > span small { display: flex; align-items: center; gap: 5px; overflow: hidden; color: #91b4c2; font: 800 8px var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-category > span small strong {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 22px;
  padding: 2px 6px;
  border: 1px solid color-mix(in srgb, var(--category-color) 58%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--category-color) 19%, rgba(2,10,17,.82));
  color: var(--category-color);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .02em;
  box-shadow: 0 0 12px color-mix(in srgb, var(--category-color) 14%, transparent);
}
.tower-defense-category > span small span { overflow: hidden; text-overflow: ellipsis; }
.tower-defense-category > strong,
.tower-defense-vendor > b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 999px; background: color-mix(in srgb, var(--category-color) 16%, rgba(2,10,17,.8)); color: var(--category-color); font: 800 8px var(--mono); }
.tower-defense-vendor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-height: 47px; padding: 7px 9px; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(2,10,17,.64); color: #b6d1dc; text-align: left; cursor: pointer; }
.tower-defense-vendor.is-active { border-color: var(--accent-2); background: rgba(84,233,255,.12); color: #fff; box-shadow: inset 3px 0 0 var(--accent-2); }
.tower-defense-vendor > span { display: grid; gap: 3px; min-width: 0; }
.tower-defense-vendor strong { overflow: hidden; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-vendor small { color: #789ead; font: 700 7.5px var(--mono); }
.tower-defense-vendor > b { --category-color: var(--accent-2); }
.tower-defense-catalog-scroll {
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid rgba(84,233,255,.42);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(84,233,255,.16), rgba(84,233,255,.07));
  color: #dffbff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 -12px 24px rgba(2,10,17,.82), 0 0 16px rgba(84,233,255,.08);
}
.tower-defense-catalog-scroll:hover { border-color: var(--accent-2); background: rgba(84,233,255,.2); }
.tower-defense-catalog-scroll.hidden { display: none; }
.tower-defense-catalog-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; min-height: 0; }
.tower-defense-catalog-header {
  --catalog-color: var(--accent-2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 83px;
  padding: 11px 15px;
  border-bottom: 1px solid rgba(84,233,255,.14);
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--catalog-color) 13%, transparent), transparent 52%);
}
.tower-defense-catalog-header > div:first-child { display: grid; gap: 3px; min-width: 0; }
.tower-defense-catalog-header > div:first-child > span { color: var(--catalog-color); font: 900 8px var(--mono); letter-spacing: .12em; }
.tower-defense-catalog-header strong { display: flex; align-items: center; gap: 8px; color: #effaff; font-size: 17px; }
.tower-defense-catalog-header strong i { padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb, var(--catalog-color) 18%, rgba(2,10,17,.7)); color: var(--catalog-color); font: 900 8px var(--mono); font-style: normal; }
.tower-defense-catalog-header p { max-width: none !important; margin: 0 !important; color: #91b1bf !important; font-size: 10.5px !important; line-height: 1.35 !important; }
.tower-defense-catalog-tags { display: flex; max-width: 420px; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.tower-defense-catalog-tags > span { flex-basis: 100%; color: #789caa; font: 800 7.5px var(--mono); letter-spacing: .08em; text-align: right; }
.tower-defense-catalog-tags i { padding: 4px 7px; border: 1px solid color-mix(in srgb, var(--catalog-color) 34%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--catalog-color) 9%, rgba(2,10,17,.55)); color: var(--catalog-color); font: 800 7px var(--mono); font-style: normal; }
.tower-defense-shop-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; border-bottom: 1px solid rgba(84,233,255,.12); background: rgba(3,14,23,.76); }
.tower-defense-shop-toolbar.hidden { display: none; }
.tower-defense-strategy-copy { display: grid; gap: 2px; min-width: 0; text-align: left; }
.tower-defense-strategy-copy span { color: #d8edf4; font-size: 9px; font-weight: 900; letter-spacing: .11em; }
.tower-defense-strategy-copy small { overflow: hidden; color: #7193a2; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-strategy-actions { display: flex; gap: 5px; flex: 0 0 auto; }
.tower-defense-shop-toolbar button { min-height: 31px; padding: 5px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: rgba(6,21,32,.8); color: #9dbdca; font-size: 9px; font-weight: 800; cursor: pointer; }
.tower-defense-shop-toolbar button.is-active { border-color: var(--accent-2); background: rgba(84,233,255,.13); color: #eaffff; }

/* Product shop grid */
.tower-defense-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 9px 11px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tower-defense-shop.hidden,
.tower-defense-activities.hidden { display: none; }
.tower-defense-product-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 1px; color: #59f1a8; }
.tower-defense-product-group::after { content: ""; height: 1px; flex: 1; background: currentColor; opacity: .16; }
.tower-defense-product-group span { font: 900 8px var(--mono); letter-spacing: .14em; }
.tower-defense-product-group strong { order: 2; display: grid; place-items: center; min-width: 21px; height: 21px; border-radius: 999px; background: rgba(89,241,168,.11); font: 800 8px var(--mono); }
.tower-defense-product-group.is-future { margin-top: 5px; color: #7997a5; }

.tower-defense-activities {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
}
.tower-defense-activity-card {
  --activity-color: var(--accent-2);
  display: grid;
  gap: 7px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--activity-color) 25%, var(--line));
  border-radius: 11px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--activity-color) 9%, rgba(9, 25, 37, .92)), rgba(3, 12, 20, .95));
}
.tower-defense-activity-card.is-locked { opacity: .43; }
.tower-defense-activity-card.is-current { border-color: rgba(89, 241, 168, .34); }
.tower-defense-activity-card.is-due { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--activity-color) 34%, transparent); }
.tower-defense-activity-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.tower-defense-activity-head i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--activity-color) 20%, rgba(2, 10, 17, .8));
  color: var(--activity-color);
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}
.tower-defense-activity-head > div { display: grid; gap: 1px; min-width: 0; }
.tower-defense-activity-head span { color: var(--activity-color); font-size: 6.5px; font-weight: 900; letter-spacing: .08em; }
.tower-defense-activity-head strong { overflow: hidden; font-size: 10px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-activity-head b {
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--activity-color) 30%, transparent);
  border-radius: 999px;
  color: #ffe08a;
  font-family: var(--mono);
  font-size: 8px;
  white-space: nowrap;
}
.tower-defense-activity-card.is-current .tower-defense-activity-head b { color: #59f1a8; }
.tower-defense-activity-meta { display: flex; justify-content: space-between; gap: 6px; font-family: var(--mono); font-size: 7.5px; }
.tower-defense-activity-meta span { color: var(--muted); }
.tower-defense-activity-meta strong { color: var(--activity-color); }
.tower-defense-activity-run {
  min-height: 27px;
  padding: 5px 7px;
  border: 1px solid color-mix(in srgb, var(--activity-color) 48%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--activity-color) 18%, rgba(19, 41, 61, .75));
  color: #eef8ff;
  font-size: 8.5px;
  font-weight: 800;
  cursor: pointer;
}
.tower-defense-activity-run:disabled { border-color: var(--line); background: rgba(2, 10, 17, .5); color: var(--muted); cursor: not-allowed; }

.tower-defense-product-card {
  --product-color: var(--accent-2);
  position: relative;
  display: grid;
  gap: 5px;
  min-height: 128px;
  padding: 9px 10px;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--product-color) 14%, transparent), transparent 55%),
    linear-gradient(160deg, rgba(10, 26, 38, .85), rgba(3, 12, 20, .92));
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.tower-defense-product-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 11px 0 0 11px;
  background: var(--product-color);
  opacity: .55;
}
.tower-defense-product-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--product-color) 55%, transparent); }
.tower-defense-product-card.is-owned {
  border-color: color-mix(in srgb, var(--product-color) 45%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--product-color) 18%, transparent);
}
.tower-defense-product-card.is-locked { opacity: .68; filter: saturate(.48); background: rgba(4,14,22,.78); }
.tower-defense-product-card.is-locked:hover { transform: none; }
.tower-defense-product-card.is-unaffordable:not(.is-locked) { opacity: .82; }
.tower-defense-product-card.is-maxed {
  border-color: rgba(89, 241, 168, .5);
  box-shadow: inset 0 0 0 1px rgba(89, 241, 168, .22), 0 0 24px rgba(89, 241, 168, .1);
}
.tower-defense-product-card.is-strategy-locked { opacity: .62; filter: saturate(.42); }

.tower-defense-product-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
}
.tower-defense-product-head i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--product-color) 20%, rgba(2, 10, 17, .8));
  color: var(--product-color);
  font-size: 8.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--product-color) 70%, transparent);
}
.tower-defense-product-head > div { display: grid; gap: 1px; min-width: 0; }
.tower-defense-product-head span {
  color: var(--product-color);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tower-defense-product-head strong {
  font-size: 13.5px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tower-defense-product-head b {
  padding: 3px 6px;
  border: 1px solid rgba(84, 233, 255, .2);
  border-radius: 999px;
  background: rgba(2, 10, 17, .6);
  color: #ffe08a;
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  white-space: nowrap;
}
.tower-defense-product-card.is-locked .tower-defense-product-head b { color: var(--muted); }
.tower-defense-product-card.is-maxed .tower-defense-product-head b { color: #59f1a8; border-color: rgba(89, 241, 168, .35); }

.tower-defense-product-card > p {
  display: block;
  min-height: 14px;
  margin: 0;
  overflow: hidden;
  color: #a9c5d0;
  font-size: 10px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.tower-defense-efficacy {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 3px 7px;
}
.tower-defense-efficacy > span { overflow: hidden; color: var(--muted); font-size: 7.5px; font-weight: 800; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-efficacy > span b { color: var(--product-color); font-family: var(--mono); font-size: 6.5px; }
.tower-defense-efficacy > strong { color: var(--product-color); font-family: var(--mono); font-size: 9.5px; }
.tower-defense-efficacy > i {
  grid-column: 1 / -1;
  display: block;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(2, 10, 17, .72);
}
.tower-defense-efficacy > i em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--product-color);
}

/* Coverage meter inside a card */
.tower-defense-coverage {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 8px;
}
.tower-defense-coverage > span { overflow: hidden; color: var(--muted); font-family: var(--mono); font-size: 7.5px; text-overflow: ellipsis; white-space: nowrap; }
.tower-defense-coverage > span b { color: #dff9ff; font-weight: 700; }
.tower-defense-coverage > strong {
  color: var(--product-color);
  font-family: var(--mono);
  font-size: 8.5px;
  text-align: right;
}
.tower-defense-coverage > i {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: rgba(2, 10, 17, .72);
  box-shadow: inset 0 0 0 1px rgba(120, 177, 207, .16);
  overflow: hidden;
}
.tower-defense-coverage > i em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--product-color) 55%, #041018), var(--product-color));
  box-shadow: 0 0 10px color-mix(in srgb, var(--product-color) 65%, transparent);
  transition: width .35s ease;
}

.tower-defense-product-meta {
  display: none;
  justify-content: space-between;
  gap: 8px;
}
.tower-defense-product-meta span {
  color: var(--muted-2);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tower-defense-product-card.is-owned .tower-defense-product-meta span:first-child { color: var(--product-color); }

/* Buy / action button */
.tower-defense-buy {
  min-height: 29px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--product-color) 50%, transparent);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--product-color) 26%, transparent), rgba(92, 124, 255, .28));
  color: #eef8ff;
  font-weight: 800;
  font-size: 9.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: filter .16s ease, transform .16s ease;
}
.tower-defense-buy:hover:not(:disabled) { filter: brightness(1.14); transform: translateY(-1px); }
.tower-defense-buy:active:not(:disabled) { transform: translateY(0); }
.tower-defense-buy:disabled {
  border-color: var(--line);
  background: rgba(2, 10, 17, .5);
  color: var(--muted);
  cursor: not-allowed;
}
.tower-defense-product-card.is-maxed .tower-defense-buy:disabled { color: #59f1a8; border-color: rgba(89, 241, 168, .3); }

/* ------------------------------------------------------------------ *
 * Owned protection strip                                              *
 * ------------------------------------------------------------------ */
.tower-defense-owned-wrap {
  display: none;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.tower-defense-owned-wrap > span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.tower-defense-owned { display: flex; flex-wrap: wrap; gap: 8px; }
.tower-defense-empty {
  color: var(--muted-2);
  font-size: 10.5px;
  font-style: italic;
}
.tower-defense-owned-badge {
  --product-color: var(--accent-2);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 2px 9px;
  padding: 7px 12px 7px 8px;
  border: 1px solid color-mix(in srgb, var(--product-color) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--product-color) 10%, rgba(2, 10, 17, .6));
}
.tower-defense-owned-badge i {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--product-color) 22%, rgba(2, 10, 17, .85));
  color: var(--product-color);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  text-shadow: 0 0 10px color-mix(in srgb, var(--product-color) 65%, transparent);
}
.tower-defense-owned-badge b { font-size: 11px; font-weight: 700; }
.tower-defense-owned-badge small { color: var(--muted); font-family: var(--mono); font-size: 8.5px; }

/* ------------------------------------------------------------------ *
 * Responsive behaviour                                                *
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* The canvas already draws the base + zone info; free the viewport on tablets. */
  .tower-defense-base-status { display: none; }
  .tower-defense-catalog { grid-template-columns: 205px minmax(0, 1fr); }
  .tower-defense-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tower-defense-activities { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .signal-game.tower-defense-active .signal-game-controls { top: 82px; right: 8px; }
  .tower-defense-build:not(.hidden) { padding-bottom: 62px; }
  .tower-defense-build:not(.hidden) ~ #signalGamePanelButton {
    position: fixed;
    z-index: 12;
    left: 50%;
    bottom: max(10px, env(safe-area-inset-bottom));
    min-width: min(290px, calc(100vw - 28px));
    transform: translateX(-50%);
    box-shadow: 0 10px 35px rgba(0,0,0,.78), 0 0 22px rgba(84,233,255,.2);
  }
}

@media (max-width: 700px) {
  .tower-defense-catalog { display: grid; grid-template-columns: 1fr; height: min(600px, 65dvh); overflow-y: auto; }
  .tower-defense-catalog-sidebar { grid-template-rows: auto auto auto; border-right: 0; border-bottom: 1px solid rgba(84,233,255,.16); }
  .tower-defense-categories, .tower-defense-vendors { max-height: 190px; }
  .tower-defense-catalog-header { grid-template-columns: 1fr; }
  .tower-defense-catalog-tags { justify-content: flex-start; }
  .tower-defense-catalog-tags > span { text-align: left; }
  .tower-defense-shop-toolbar { display: grid; }
  .tower-defense-strategy-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .tower-defense-build-summary { grid-template-columns: 1fr; }
  .tower-defense-build-summary strong { font-size: 18px; }
  .tower-defense-act-track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
  }
  .tower-defense-shop { grid-template-columns: 1fr; }
  .tower-defense-activities { grid-template-columns: 1fr; }
  .tower-defense-owned { gap: 6px; }
  .tower-defense-owned-badge { flex: 1 1 100%; }
  .signal-game.tower-defense-active .signal-game-controls { display: none; }
}

@media (max-height: 620px) and (orientation: landscape) and (pointer: coarse) {
  .tower-defense-catalog { height: min(410px, 66dvh); }
  .tower-defense-categories, .tower-defense-vendors { max-height: 130px; }
  .tower-defense-product-card { min-height: 116px; }
  .tower-defense-act-track, .tower-defense-license-banner { display: none; }
}

/* Respect reduced-motion preferences for the pulsing gap banner. */
@media (prefers-reduced-motion: reduce) {
  .tower-defense-license-banner.has-gaps { animation: none; }
  .tower-defense-base-status,
  .tower-defense-zone-meter > i em,
  .tower-defense-coverage > i em { transition: none; }
}

/* ------------------------------------------------------------------ *
 * Unified screen-flow catalog (mobile, tablet and desktop)            *
 * One screen chooses a category; the next screen contains paged items.*
 * ------------------------------------------------------------------ */
.tower-defense-catalog,
.tower-defense-activities {
  display: block;
  height: clamp(330px, 50dvh, 470px);
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(84,233,255,.22);
  border-radius: 15px;
  background: rgba(2,10,17,.52);
}
.tower-defense-catalog.hidden,
.tower-defense-activities.hidden,
.tower-defense-picker-screen.hidden,
.tower-defense-detail-screen.hidden { display: none; }

.tower-defense-picker-screen {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  padding: 14px;
  background: radial-gradient(circle at 50% 0, rgba(84,233,255,.08), transparent 42%);
}
.tower-defense-picker-heading {
  display: grid;
  gap: 3px;
  text-align: left;
}
.tower-defense-picker-heading span { color: var(--accent-2); font: 900 8px var(--mono); letter-spacing: .16em; }
.tower-defense-picker-heading strong { color: #edfaff; font-size: 18px; letter-spacing: -.02em; }
.tower-defense-picker-heading small { color: #82a6b5; font-size: 10px; }

.tower-defense-picker-grid,
.tower-defense-categories,
.tower-defense-vendors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: 9px;
  min-height: 0;
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.tower-defense-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tower-defense-category {
  grid-template-columns: 42px minmax(0,1fr) 26px 14px;
  gap: 9px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding: 10px;
  touch-action: manipulation;
}
.tower-defense-category > i { width: 42px; height: 42px; }
.tower-defense-category > span b { font-size: 11px; white-space: normal; }
.tower-defense-category > span small { font-size: 8px; }
.tower-defense-category > em { color: var(--category-color); font-size: 15px; font-style: normal; opacity: .75; }
.tower-defense-category > strong.has-due { background: #ff7043; color: #07121a; box-shadow: 0 0 13px rgba(255,112,67,.45); }
.tower-defense-service-category { min-height: 80px; }

.tower-defense-detail-screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.tower-defense-activities .tower-defense-detail-screen { grid-template-rows: auto minmax(0,1fr) auto; }
.tower-defense-catalog-header,
.tower-defense-detail-header {
  --catalog-color: var(--accent-2);
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 13px;
  min-height: 74px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(84,233,255,.14);
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--catalog-color) 13%, transparent), transparent 52%);
  text-align: left;
}
.tower-defense-catalog-header.is-without-back,
.tower-defense-detail-header.is-without-back { grid-template-columns: minmax(0,1fr) auto; }
.tower-defense-screen-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  min-height: 44px;
  margin-right: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(84,233,255,.42);
  border-radius: 10px;
  background: rgba(84,233,255,.08);
  color: #dffbff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.tower-defense-screen-back:hover { border-color: var(--accent-2); background: rgba(84,233,255,.15); }
.tower-defense-screen-back.hidden { display: none; }
.tower-defense-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 78px;
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--catalog-color) 48%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--catalog-color) 10%, rgba(2,10,17,.75));
  color: #e9fbff;
  font-size: 10px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.tower-defense-catalog-header > div,
.tower-defense-detail-header > div { display: grid; gap: 2px; min-width: 0; }
.tower-defense-catalog-header > div > span,
.tower-defense-detail-header > div > span { color: var(--catalog-color); font: 900 7.5px var(--mono); letter-spacing: .12em; }
.tower-defense-catalog-header strong,
.tower-defense-detail-header strong { display: flex; align-items: center; gap: 7px; color: #effaff; font-size: 16px; }
.tower-defense-catalog-header strong i,
.tower-defense-detail-header strong i { padding: 4px 6px; border-radius: 7px; background: color-mix(in srgb, var(--catalog-color) 18%, rgba(2,10,17,.7)); color: var(--catalog-color); font: 900 8px var(--mono); font-style: normal; }
.tower-defense-catalog-header p,
.tower-defense-detail-header p { max-width: none !important; margin: 0 !important; color: #91b1bf !important; font-size: 9.5px !important; line-height: 1.25 !important; }
.tower-defense-catalog-tags { display: flex; max-width: 330px; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.tower-defense-catalog-tags > span { flex-basis: 100%; text-align: right; }

.tower-defense-shop-toolbar { min-height: 42px; padding: 5px 12px; }
.tower-defense-shop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  grid-auto-rows: minmax(0, 1fr);
  align-content: stretch;
  gap: 7px;
  min-height: 0;
  padding: 7px 9px;
  overflow: hidden;
}
.tower-defense-product-card { min-height: 0; height: 100%; overflow: hidden; }
.tower-defense-activity-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  grid-auto-rows: minmax(0,1fr);
  gap: 8px;
  min-height: 0;
  padding: 9px;
  overflow: hidden;
}
.tower-defense-activity-card { min-width: 0; min-height: 0; height: 100%; overflow: hidden; }

.tower-defense-pager {
  display: grid;
  grid-template-columns: minmax(96px,1fr) auto minmax(96px,1fr);
  align-items: center;
  gap: 8px;
  min-height: 43px;
  padding: 5px 9px;
  border-top: 1px solid rgba(84,233,255,.14);
  background: rgba(3,14,23,.82);
}
.tower-defense-page-button {
  min-height: 33px;
  padding: 5px 10px;
  border: 1px solid rgba(84,233,255,.35);
  border-radius: 9px;
  background: rgba(84,233,255,.1);
  color: #e9fbff;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  touch-action: manipulation;
}
.tower-defense-page-button:last-child { justify-self: end; }
.tower-defense-page-button:disabled { opacity: .25; cursor: default; }
.tower-defense-page-status { color: #9fc3d2; font: 800 8.5px var(--mono); white-space: nowrap; }
.tower-defense-pager.is-single .tower-defense-page-status { color: #6e92a2; }
.tower-defense-buy,
.tower-defense-activity-run,
.tower-defense-shop-toolbar button { min-height: 44px; touch-action: manipulation; }
.tower-defense-product-card > p {
  display: -webkit-box;
  min-height: 27px;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

@media (max-width: 900px) {
  .signal-game-object-meta.is-security-result { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .signal-game.tower-defense-active .signal-game-panel.is-security-result-panel { overflow: auto; }
  .signal-game.tower-defense-active .signal-game-panel { overflow: hidden; }
  .tower-defense-catalog,
  .tower-defense-activities { height: min(470px, calc(100dvh - 230px)); min-height: 310px; }
  .tower-defense-picker-grid,
  .tower-defense-categories { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .tower-defense-service-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tower-defense-shop { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tower-defense-activity-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tower-defense-build-summary { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .tower-defense-build-summary strong { font-size: 13px; }
  .signal-game-hud .tower-defense-hud { min-width: 0; padding-inline: 4px; }
  .signal-game-hud .tower-defense-hud strong { font-size: 9px; }
  .tower-defense-build:not(.hidden) ~ .tower-defense-screen-back:not(.hidden) {
    position: fixed;
    z-index: 13;
    left: max(10px, env(safe-area-inset-left));
    bottom: max(10px, env(safe-area-inset-bottom));
    width: 96px;
    min-width: 96px;
    margin: 0;
    box-shadow: 0 10px 35px rgba(0,0,0,.72);
  }
  .tower-defense-screen-back:not(.hidden) + #signalGamePanelButton {
    left: 114px;
    right: max(10px, env(safe-area-inset-right));
    min-width: 0;
    width: auto;
    transform: none;
  }
}

@media (max-width: 560px) {
  .signal-game.tower-defense-active .signal-game-panel.is-security-result-panel { padding: 14px 10px; }
  .signal-game.tower-defense-active .signal-game-panel.is-security-result-panel > p {
    display: block;
    margin-bottom: 8px;
    font-size: 10px;
    line-height: 1.45;
    text-overflow: clip;
    white-space: normal;
  }
  .signal-game-object-meta.is-security-result { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .signal-security-result-metric { padding: 7px 6px; }
  .signal-security-result-metric strong { font-size: 13px; }
  .signal-security-result-context { font-size: 7px; }
  .signal-game.tower-defense-active .signal-game-panel { width: calc(100vw - 10px); max-height: calc(100dvh - 8px); padding: 9px; }
  .signal-game.tower-defense-active .signal-game-panel h2 { font-size: 20px; }
  .signal-game.tower-defense-active .signal-game-panel > p { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
  .tower-defense-build { gap: 6px; }
  .tower-defense-build-summary { gap: 5px; }
  .tower-defense-build-summary > div { padding: 4px 6px; border-radius: 8px; }
  .tower-defense-build-summary span { font-size: 6px; }
  .tower-defense-build-summary strong { font-size: 11px; }
  .tower-defense-act-track { display: none; }
  .tower-defense-license-banner { min-height: 32px; padding: 4px 6px; }
  .tower-defense-license-banner strong { font-size: 7px; }
  .tower-defense-license-banner span { overflow: hidden; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
  .tower-defense-catalog,
  .tower-defense-activities { height: calc(100dvh - 236px); min-height: 300px; }
  .tower-defense-picker-screen { gap: 6px; padding: 8px; }
  .tower-defense-picker-heading { gap: 1px; }
  .tower-defense-picker-heading span { font-size: 6.5px; }
  .tower-defense-picker-heading strong { font-size: 14px; }
  .tower-defense-picker-heading small { font-size: 8px; }
  .tower-defense-picker-grid,
  .tower-defense-categories { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .tower-defense-service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tower-defense-service-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tower-defense-category { grid-template-columns: 30px minmax(0,1fr); gap: 5px; padding: 6px; }
  .tower-defense-category > i { width: 30px; height: 30px; font-size: 6.5px; }
  .tower-defense-category > span b { font-size: 8px; }
  .tower-defense-category > span small { gap: 3px; font-size: 6.5px; }
  .tower-defense-category > span small strong { min-width: 29px; min-height: 19px; padding: 1px 4px; font-size: 8px; }
  .tower-defense-category > strong { display: none; }
  .tower-defense-category > em { display: none; }
  .tower-defense-service-category { min-height: 0; }
  .tower-defense-catalog-header,
  .tower-defense-detail-header { grid-template-columns: minmax(0,1fr); min-height: 62px; gap: 7px; padding: 6px; }
  .tower-defense-catalog-header.is-without-back,
  .tower-defense-detail-header.is-without-back { grid-template-columns: minmax(0,1fr); }
  .tower-defense-back { min-width: 44px; min-height: 44px; padding: 5px; }
  .tower-defense-back span { display: none; }
  .tower-defense-catalog-header strong,
  .tower-defense-detail-header strong { font-size: 12px; }
  .tower-defense-catalog-header p,
  .tower-defense-detail-header p { overflow: hidden; font-size: 7.5px !important; text-overflow: ellipsis; white-space: nowrap; }
  .tower-defense-catalog-tags { display: none; }
  .tower-defense-shop-toolbar { min-height: 36px; padding: 4px 6px; }
  .tower-defense-strategy-copy small { display: none; }
  .tower-defense-shop-toolbar button { min-height: 44px; padding: 4px 6px; font-size: 7px; }
  .tower-defense-shop { grid-template-columns: 1fr; gap: 5px; padding: 5px; }
  .tower-defense-product-card { gap: 3px; padding: 6px 7px; }
  .tower-defense-product-head i { width: 29px; height: 29px; }
  .tower-defense-product-head strong { font-size: 11px; }
  .tower-defense-product-card > p { min-height: 20px; font-size: 8px; }
  .tower-defense-product-stats { gap: 7px; }
  .tower-defense-buy { min-height: 44px; }
  .tower-defense-activity-cards { grid-template-columns: 1fr; gap: 5px; padding: 5px; }
  .tower-defense-activity-card { gap: 4px; padding: 7px; }
  .tower-defense-activity-run { min-height: 44px; }
  .tower-defense-pager { min-height: 39px; padding: 3px 5px; }
  .tower-defense-page-button { min-height: 33px; }
  .signal-game-hud .tower-defense-hud-act strong { font-size: 8px; letter-spacing: -.02em; }
  .tower-defense-screen-back:not(.hidden) + #signalGamePanelButton { left: 112px; }
}

@media (max-height: 620px) and (orientation: landscape) and (pointer: coarse) {
  .signal-game.tower-defense-active .signal-game-panel {
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;
    padding: 7px;
    border-radius: 0;
    transform: none;
  }
  .signal-game.tower-defense-active .signal-game-panel h2,
  .signal-game.tower-defense-active .signal-game-panel > p,
  .tower-defense-build-summary,
  .tower-defense-license-banner { display: none; }
  .tower-defense-build { gap: 0; padding-bottom: 54px; }
  .tower-defense-catalog,
  .tower-defense-activities { height: calc(100dvh - 66px); min-height: 230px; }
  .tower-defense-picker-screen { padding: 7px; }
  .tower-defense-picker-heading small { display: none; }
  .tower-defense-picker-grid,
  .tower-defense-categories { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .tower-defense-service-grid { grid-template-columns: repeat(5, minmax(0,1fr)); }
  .tower-defense-service-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .tower-defense-shop,
  .tower-defense-activity-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .tower-defense-catalog-header,
  .tower-defense-detail-header { min-height: 50px; }
  .tower-defense-catalog-header p,
  .tower-defense-detail-header p { display: none; }
}