/* ============================================================
   TOWER ATTACKER — style.css
   Author: Myraa (Graphics Designer)
   Audience: middle-school kids; visuals must feel ALIVE.
   Style: cartoony medieval, bold, soft shadows, slight bounce.
   No external assets — gradients, box-shadow, pseudo-elements, emoji.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Sky gradient stops (animated) */
  --sky-1: #2a1b54;   /* dawn purple   */
  --sky-2: #6d3aa3;   /* royal violet  */
  --sky-3: #ff7ab6;   /* dusk pink     */
  --sky-4: #ffb86b;   /* sunset peach  */

  /* Stone & structure */
  --stone-light: #d8d2c6;
  --stone-mid:   #a89c84;
  --stone-dark:  #6b614c;
  --stone-shadow: rgba(0, 0, 0, 0.35);

  /* Boss palette */
  --boss-stone-light: #5a4e62;
  --boss-stone-dark:  #2a212f;
  --boss-eye:         #ff2a2a;

  /* Status colours */
  --hp-green:  #3ddc6e;
  --hp-yellow: #ffd23f;
  --hp-red:    #ff4d57;

  /* Difficulty */
  --diff-easy:   #4ad06a;
  --diff-medium: #ff9628;
  --diff-hard:   #ff3d52;

  /* UI */
  --hud-bg: rgba(20, 12, 40, 0.55);
  --hud-border: rgba(255, 255, 255, 0.18);
  --text-main: #fff7e6;
  --text-shadow-soft: 0 2px 0 rgba(0, 0, 0, 0.35);

  /* Accents */
  --gold:   #ffd35b;
  --flame:  #ff7a1a;
  --magic:  #6cf0ff;

  /* Motion */
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Reset-ish ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: "Baloo 2", "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif;
  color: var(--text-main);
  user-select: none;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

/* ============================================================
   1. SKY — animated gradient background, 30s loop
   ============================================================ */
body {
  background: linear-gradient(
    180deg,
    var(--sky-1) 0%,
    var(--sky-2) 35%,
    var(--sky-3) 75%,
    var(--sky-4) 100%
  );
  background-size: 100% 300%;
  animation: sky 30s ease-in-out infinite alternate;
  position: relative;
}

/* Twinkly star layer for night portion */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 28% 9%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 55% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 73% 12%, #fff 50%, transparent 51%),
    radial-gradient(2px 2px at 88% 25%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 30%, #fff 50%, transparent 51%);
  opacity: 0.6;
  animation: twinkle 4s ease-in-out infinite alternate;
}

/* Soft moon/sun crescent that drifts */
body::after {
  content: "";
  position: fixed;
  top: 12%;
  right: 14%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8d6 0%, #ffd987 60%, transparent 70%);
  box-shadow: 0 0 60px 20px rgba(255, 217, 135, 0.45);
  pointer-events: none;
  animation: float-moon 12s ease-in-out infinite alternate;
}

@keyframes sky {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
@keyframes twinkle {
  0%   { opacity: 0.25; }
  100% { opacity: 0.85; }
}
@keyframes float-moon {
  0%   { transform: translateY(0) translateX(0); }
  100% { transform: translateY(-14px) translateX(-22px); }
}

/* ============================================================
   2. GAME CONTAINER
   ============================================================ */
#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   3. HUD — top bar
   ============================================================ */
#hud {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 12px 18px;
  margin: 14px auto 0;
  background: var(--hud-bg);
  border: 2px solid var(--hud-border);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-shadow: var(--text-shadow-soft);
  z-index: 20;
}

#hud > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.18);
  position: relative;
  transition: transform 0.2s var(--ease-pop);
}

#hud > span:hover { transform: translateY(-2px) scale(1.04); }

/* Streak fire aura — class added at streak ≥ 3 */
.streak-fire {
  position: relative;
  color: var(--flame);
  text-shadow:
    0 0 6px var(--flame),
    0 0 14px #ffb46c,
    0 2px 0 rgba(0, 0, 0, 0.35);
  animation: streak-flame 0.6s ease-in-out infinite alternate;
}
.streak-fire::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
  border-radius: 16px;
  background: radial-gradient(closest-side, rgba(255, 122, 26, 0.45), transparent 70%);
  filter: blur(4px);
  z-index: -1;
  animation: streak-flame 0.45s ease-in-out infinite alternate;
}

@keyframes streak-flame {
  0%   { filter: brightness(1)   saturate(1.1); transform: translateY(0) scale(1);    }
  100% { filter: brightness(1.3) saturate(1.5); transform: translateY(-2px) scale(1.04); }
}

/* ============================================================
   4. MAP & GROUND
   ============================================================ */
#map {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 4vw 6vh;
  gap: 2vw;
  position: relative;
  z-index: 5;
}

/* Stylized ground line */
#map::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4vh;
  height: 14vh;
  background:
    linear-gradient(180deg, #4f7a3a 0%, #2e4a22 60%, #1c2e15 100%);
  border-top: 4px solid #6fa54c;
  box-shadow: 0 -8px 22px rgba(0, 0, 0, 0.35) inset;
  z-index: -1;
}

/* Grass blades along the top of the ground */
#map::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(4vh + 14vh - 2px);
  height: 14px;
  background:
    radial-gradient(8px 14px at 8px 14px, #6fa54c 50%, transparent 51%) repeat-x,
    radial-gradient(6px 10px at 18px 10px, #87c062 50%, transparent 51%) repeat-x;
  background-size: 24px 14px, 36px 10px;
  z-index: -1;
  opacity: 0.9;
}

/* ============================================================
   5. TOWER
   ============================================================ */
.tower {
  position: relative;
  width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease-pop), filter 0.25s ease;
  margin-bottom: 4vh; /* sits on ground */
}
.tower:hover { transform: translateY(-4px) scale(1.04); filter: brightness(1.1); }
.tower:active { transform: translateY(-2px) scale(0.98); }

/* Name label above tower — sits clear of the battlements */
.tower__name {
  font-size: 0.95rem;
  font-weight: 800;
  margin-bottom: 18px;       /* extra space so battlements/crenellations don't overlap */
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.65);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  text-shadow: var(--text-shadow-soft);
  white-space: nowrap;
  letter-spacing: 0.3px;
  position: relative;
  z-index: 4;
}

/* The CSS-drawn castle body */
.tower__body {
  position: relative;
  width: 92px;
  height: 150px;
  background:
    /* horizontal mortar lines */
    repeating-linear-gradient(
      0deg,
      transparent 0 22px,
      rgba(0, 0, 0, 0.18) 22px 24px
    ),
    /* vertical mortar lines (offset alternation handled visually) */
    repeating-linear-gradient(
      90deg,
      transparent 0 22px,
      rgba(0, 0, 0, 0.12) 22px 24px
    ),
    linear-gradient(180deg, var(--stone-light) 0%, var(--stone-mid) 60%, var(--stone-dark) 100%);
  border-radius: 8px 8px 4px 4px;
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.18),
    inset 6px 0 0 rgba(255, 255, 255, 0.06),
    inset -6px 0 0 rgba(0, 0, 0, 0.12),
    0 8px 14px var(--stone-shadow);
}

/* Battlement crenellations on top of the tower (notched edge) */
.tower__body::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -4px;
  right: -4px;
  height: 16px;
  background:
    linear-gradient(180deg, var(--stone-light), var(--stone-mid));
  /* Notched skyline using mask / repeating linear-gradient */
  -webkit-mask: repeating-linear-gradient(
    90deg,
    #000 0 12px,
    transparent 12px 22px
  );
          mask: repeating-linear-gradient(
    90deg,
    #000 0 12px,
    transparent 12px 22px
  );
  filter: drop-shadow(0 2px 0 var(--stone-dark));
}

/* A wooden door at the base */
.tower__body::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 42px;
  background: linear-gradient(180deg, #8a5a2b 0%, #5a3818 100%);
  border-radius: 16px 16px 4px 4px;
  box-shadow:
    inset 0 0 0 2px #3d2510,
    inset 4px 0 0 rgba(255, 255, 255, 0.08),
    0 2px 0 rgba(0, 0, 0, 0.4);
}

/* Flag pole + flag, sits above the battlements */
.tower__flag {
  position: absolute;
  top: -54px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  pointer-events: none;
}
.tower__flag::before {
  /* pole */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 3px;
  height: 38px;
  background: #2a2118;
  border-radius: 2px;
}
.tower__flag::after {
  /* triangular flag */
  content: "";
  position: absolute;
  top: 0;
  left: calc(50% + 2px);
  width: 22px;
  height: 14px;
  background: linear-gradient(180deg, #ff5e7a, #c8284a);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: 0% 50%;
  animation: flag-wave 2.4s ease-in-out infinite;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}

@keyframes flag-wave {
  0%, 100% { transform: skewY(-4deg) scaleX(1);    }
  50%      { transform: skewY(4deg)  scaleX(0.92); }
}

/* HP bar below the tower */
.tower__hp {
  width: 100px;
  height: 12px;
  margin-top: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.tower__hp > .tower__hp-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    90deg,
    var(--hp-red) 0%,
    var(--hp-yellow) 50%,
    var(--hp-green) 100%
  );
  /* The fill width is set by JS; we use right-anchored clipping via background-position
     so colour shifts as health drops. Trick: put gradient at fixed size, shift on width. */
  background-size: 100px 100%;
  background-position: right center;
  transition: width 0.45s var(--ease-pop);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

/* Speech-bubble taunt — hidden by default */
.tower__taunt {
  position: absolute;
  top: -86px;
  left: 110%;
  transform: translateY(8px) scale(0.85);
  opacity: 0;
  pointer-events: none;
  background: #fffbe8;
  color: #2a1c08;
  padding: 6px 12px;
  border-radius: 14px;
  border: 2px solid #2a1c08;
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  max-width: 220px;
  box-shadow: 3px 3px 0 #2a1c08;
  transition: transform 0.3s var(--ease-pop), opacity 0.3s ease;
  z-index: 10;
}
.tower__taunt::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 16px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top-color: #2a1c08;
}
.tower__taunt::before {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 18px;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fffbe8;
  z-index: 1;
}
.tower__taunt.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------- Targeted state ---------- */
.tower--targeted {
  animation: pulse-target 0.9s ease-in-out infinite;
}
@keyframes pulse-target {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 211, 91, 0));
    transform: translateY(-2px) scale(1.02);
  }
  50% {
    filter: drop-shadow(0 0 18px rgba(255, 211, 91, 0.95));
    transform: translateY(-6px) scale(1.06);
  }
}

/* ---------- Dead state — building stays visible, just dark ---------- */
.tower--dead {
  /* short shake on death, but stays standing */
  animation: tower-death-shake 0.7s ease-out;
  pointer-events: none;
  position: relative;
}
.tower--dead::after {
  /* brief dust puff at the base */
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 140px;
  height: 60px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(180, 160, 130, 0.85), transparent 75%);
  filter: blur(2px);
  animation: dust-puff 0.9s ease-out forwards;
  pointer-events: none;
}
@keyframes tower-death-shake {
  0%   { transform: translateX(0); }
  20%  { transform: translateX(-6px) rotate(-2deg); }
  40%  { transform: translateX(5px)  rotate(2deg); }
  60%  { transform: translateX(-3px) rotate(-1deg); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@keyframes dust-puff {
  0%   { opacity: 0;   transform: translateX(-50%) scale(0.4); }
  40%  { opacity: 0.9; transform: translateX(-50%) scale(1);   }
  100% { opacity: 0;   transform: translateX(-50%) scale(1.6); }
}

/* ============================================================
   6. BOSS TOWER
   ============================================================ */
.tower--boss {
  width: 150px;
}
.tower--boss .tower__body {
  width: 130px;
  height: 220px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 26px,
      rgba(0, 0, 0, 0.35) 26px 28px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 26px,
      rgba(0, 0, 0, 0.22) 26px 28px
    ),
    linear-gradient(180deg, var(--boss-stone-light) 0%, var(--boss-stone-dark) 100%);
  box-shadow:
    inset 0 -10px 0 rgba(0, 0, 0, 0.4),
    inset 6px 0 0 rgba(255, 255, 255, 0.04),
    inset -6px 0 0 rgba(0, 0, 0, 0.25),
    0 12px 28px rgba(60, 0, 80, 0.55),
    0 0 40px rgba(255, 42, 42, 0.18);
}
.tower--boss .tower__body::before {
  background: linear-gradient(180deg, var(--boss-stone-light), var(--boss-stone-dark));
  filter: drop-shadow(0 2px 0 #14080f);
}
.tower--boss .tower__body::after {
  background: linear-gradient(180deg, #4a2a14 0%, #1d0f06 100%);
  box-shadow: inset 0 0 0 2px #0a0504;
}

/* Glowing red eye on the boss */
.tower--boss .tower__body {
  /* layering an eye via an extra pseudo would conflict with door; instead we
     append .tower__eye element from JS, but also provide a fallback via box-shadow */
}
.tower__eye {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff 0%, var(--boss-eye) 35%, #4a0000 100%);
  box-shadow:
    0 0 18px var(--boss-eye),
    0 0 36px rgba(255, 42, 42, 0.6),
    inset 0 0 6px #2a0000;
  animation: boss-eye 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes boss-eye {
  0%, 100% { transform: translateX(-50%) scale(1);    filter: brightness(1);   }
  50%      { transform: translateX(-50%) scale(1.15); filter: brightness(1.4); }
}

/* Crown on top — replaces flag on boss */
.tower--boss .tower__flag { display: none; }
.tower--boss .tower__crown {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 36px;
  background:
    linear-gradient(180deg, #ffe27a 0%, var(--gold) 60%, #b88a1f 100%);
  clip-path: polygon(
    0% 100%, 0% 40%,
    15% 60%, 25% 0%,
    40% 50%, 50% 5%,
    60% 50%, 75% 0%,
    85% 60%, 100% 40%,
    100% 100%
  );
  filter: drop-shadow(0 3px 0 #6b4c10) drop-shadow(0 0 10px rgba(255, 211, 91, 0.55));
}
.tower--boss .tower__crown::after {
  /* gem */
  content: "";
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 30% 30%, #ff9bd6, #d33c8a);
  border-radius: 50%;
  box-shadow: 0 0 8px #ff7ac4;
}

.tower--boss .tower__name {
  background: #4a0000;
  border-color: #ff8080;
  color: #ffd0d0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================================
   7. QUESTION MODAL
   ============================================================ */
#question-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 25, 0);
  pointer-events: none;
  opacity: 0;
  transition: background 0.25s ease, opacity 0.25s ease;
  z-index: 50;
}
#question-modal.is-open {
  background: rgba(10, 5, 25, 0.6);
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.question-card {
  width: min(720px, 94vw);
  background: linear-gradient(180deg, #fffaee 0%, #f4dfb1 100%);
  color: #2a1c08;
  border: 4px solid #2a1c08;
  border-radius: 22px;
  padding: 26px 24px 22px;
  box-shadow:
    8px 8px 0 #2a1c08,
    0 20px 60px rgba(0, 0, 0, 0.55);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.35s var(--ease-pop);
  position: relative;
  text-align: center;
}
#question-modal.is-open .question-card {
  transform: scale(1) translateY(0);
}

.difficulty-badge {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 3px solid #2a1c08;
  background: var(--diff-easy);
  color: #1a3a0e;
  box-shadow: 3px 3px 0 #2a1c08;
}
.difficulty-badge[data-level="2"] { background: var(--diff-medium); color: #3a1a05; }
.difficulty-badge[data-level="3"] { background: var(--diff-hard);   color: #3a050a; }

.question-text {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 12px 0 18px;
  line-height: 1.2;
}

.answer-input {
  width: 100%;
  font-size: 1.4rem;
  font-weight: 700;
  padding: 12px 14px;
  border-radius: 12px;
  border: 3px solid #2a1c08;
  background: #fff;
  color: #2a1c08;
  text-align: center;
  outline: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.answer-input:focus {
  transform: scale(1.02);
  box-shadow: 0 0 0 4px rgba(108, 240, 255, 0.55);
}

.submit-btn {
  margin-top: 14px;
  padding: 12px 22px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 3px solid #2a1c08;
  border-radius: 14px;
  background: linear-gradient(180deg, #6cf0ff 0%, #2db4d6 100%);
  color: #062028;
  cursor: pointer;
  box-shadow: 0 5px 0 #1c5566;
  transition: transform 0.15s var(--ease-pop), box-shadow 0.15s ease;
}
.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 0 #1c5566;
}
.submit-btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1c5566;
}

/* ============================================================
   8. DIFFICULTY PICKER (modal overlay — same pattern as question-modal)
   ============================================================ */
#difficulty-picker {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 25, 0);
  pointer-events: none;
  opacity: 0;
  transition: background 0.25s ease, opacity 0.25s ease;
  z-index: 60;
}
#difficulty-picker.is-open {
  background: rgba(10, 5, 25, 0.55);
  pointer-events: auto;
  opacity: 1;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.picker-card {
  width: min(560px, 92vw);
  background: linear-gradient(180deg, #fffaee 0%, #f4dfb1 100%);
  color: #2a1c08;
  border: 4px solid #2a1c08;
  border-radius: 22px;
  padding: 22px 26px 26px;
  box-shadow: 8px 8px 0 #2a1c08, 0 20px 60px rgba(0,0,0,0.55);
  text-align: center;
  transform: scale(0.85) translateY(20px);
  transition: transform 0.35s var(--ease-pop);
}
#difficulty-picker.is-open .picker-card {
  transform: scale(1) translateY(0);
}
.picker-card h2 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  letter-spacing: 0.5px;
}
.picker-tower-name {
  margin: 0 0 18px;
  font-weight: 700;
  color: #6a3a05;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
}
.diff-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.diff-damage {
  display: block;
  font-size: 1.6rem;
  line-height: 1;
}
.diff-label {
  display: block;
  margin-top: 4px;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.8;
}

#difficulty-picker .diff-btn,
#difficulty-picker > button {
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.5px;
  padding: 12px 18px;
  border: 3px solid #2a1c08;
  border-radius: 14px;
  cursor: pointer;
  color: #1a1a1a;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.15s var(--ease-pop), box-shadow 0.15s ease, filter 0.2s ease;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.diff-btn--1 { background: linear-gradient(180deg, #8df09e, var(--diff-easy));   }
.diff-btn--2 { background: linear-gradient(180deg, #ffc06a, var(--diff-medium)); }
.diff-btn--3 {
  background: linear-gradient(180deg, #ff7080, var(--diff-hard));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  letter-spacing: 1px;
}

.diff-btn--1:hover,
.diff-btn--2:hover,
.diff-btn--3:hover {
  transform: translateY(-3px) scale(1.05);
  filter: brightness(1.1) drop-shadow(0 0 12px currentColor);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.45);
}
.diff-btn--3:hover {
  filter: brightness(1.15) drop-shadow(0 0 16px var(--diff-hard));
}

.diff-btn--1:active,
.diff-btn--2:active,
.diff-btn--3:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}

/* ============================================================
   9. PROJECTILE — flying star/orb
   The endpoint is set by JS via CSS variables --tx / --ty (px offsets).
   ============================================================ */
.attack-projectile {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 40;
  --tx: 0px;
  --ty: -60vh;
  background: radial-gradient(circle at 35% 35%, #ffffff 0%, var(--gold) 40%, #ff9b1a 100%);
  border-radius: 50%;
  box-shadow:
    0 0 14px var(--gold),
    0 0 30px #ff9b1a,
    0 0 60px rgba(255, 155, 26, 0.5);
  animation: projectile-arc 0.55s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* Sparkly tail */
.attack-projectile::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 211, 91, 0.6), transparent 70%);
  filter: blur(6px);
  z-index: -1;
}

@keyframes projectile-arc {
  0%   { transform: translate(0, 0)            scale(0.6) rotate(0);     opacity: 0.2; }
  20%  {                                                                  opacity: 1;   }
  60%  { transform: translate(calc(var(--tx) * 0.6), calc(var(--ty) * 0.45)) scale(1.1) rotate(180deg); }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.4) rotate(360deg); opacity: 0; }
}

/* ============================================================
   10. DAMAGE POPUP
   ============================================================ */
.damage-popup {
  position: absolute;
  font-family: inherit;
  font-weight: 900;
  font-size: 1.6rem;
  color: #fff;
  text-shadow:
    -2px -2px 0 #2a1c08,
     2px -2px 0 #2a1c08,
    -2px  2px 0 #2a1c08,
     2px  2px 0 #2a1c08,
     0 4px 0 rgba(0, 0, 0, 0.5);
  pointer-events: none;
  animation: float-up 0.9s ease-out forwards;
  z-index: 30;
  white-space: nowrap;
}
.damage-popup.is-crit {
  font-size: 2.4rem;
  color: var(--gold);
  text-shadow:
    -3px -3px 0 #2a1c08,
     3px -3px 0 #2a1c08,
    -3px  3px 0 #2a1c08,
     3px  3px 0 #2a1c08,
     0 0 18px var(--gold);
  animation: float-up 1.1s ease-out forwards, crit-wobble 0.4s ease-out;
}
.damage-popup.is-multiplier {
  color: var(--magic);
  text-shadow:
    -2px -2px 0 #062028,
     2px -2px 0 #062028,
    -2px  2px 0 #062028,
     2px  2px 0 #062028,
     0 0 14px var(--magic);
}

@keyframes float-up {
  0%   { transform: translateY(0)    scale(0.6); opacity: 0; }
  20%  { transform: translateY(-10px) scale(1.15); opacity: 1; }
  100% { transform: translateY(-60px) scale(1);    opacity: 0; }
}
@keyframes crit-wobble {
  0%, 100% { letter-spacing: 0;   }
  50%      { letter-spacing: 4px; }
}

/* ============================================================
   11. SCREEN SHAKE
   ============================================================ */
.shake { animation: shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px);  }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60%      { transform: translateX(8px);  }
}

/* ============================================================
   12. CONFETTI
   JS spawns ~30 .confetti elements with random --c (color),
   --x (drift), --r (rotation), --d (delay). They fall + fade.
   ============================================================ */
.confetti {
  position: absolute;
  width: 10px;
  height: 14px;
  background: var(--c, var(--gold));
  top: 0;
  left: 50%;
  border-radius: 2px;
  pointer-events: none;
  --x: 0px;
  --r: 360deg;
  --d: 0s;
  animation: confetti-fall 1.4s var(--d) cubic-bezier(0.3, 0.7, 0.5, 1) forwards;
  z-index: 25;
}
@keyframes confetti-fall {
  0%   { transform: translate(0, 0) rotate(0);   opacity: 1; }
  100% { transform: translate(var(--x), 240px) rotate(var(--r)); opacity: 0; }
}

/* ============================================================
   13. POWERUP TRAY
   ============================================================ */
#powerup-tray {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 30;
}

.powerup-card {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(180deg, #fff 0%, #cfe9ff 100%);
  border: 3px solid #1a3a5a;
  border-radius: 16px;
  box-shadow:
    0 6px 0 #1a3a5a,
    0 0 22px rgba(108, 240, 255, 0.55);
  cursor: pointer;
  transition: transform 0.2s var(--ease-pop), box-shadow 0.2s ease, filter 0.2s ease;
  position: relative;
}
.powerup-card:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 0 #1a3a5a, 0 0 30px rgba(108, 240, 255, 0.85);
  filter: brightness(1.1);
}
.powerup-card:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1a3a5a;
}
/* Subtle continuous shimmer */
.powerup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: shimmer 2.4s linear infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}
@keyframes shimmer {
  0%   { background-position: 250% 0; }
  100% { background-position: -50% 0; }
}

/* ============================================================
   14. TOAST
   ============================================================ */
.toast {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  padding: 12px 22px;
  background: linear-gradient(180deg, #ffe27a, var(--gold));
  color: #2a1c08;
  font-weight: 800;
  font-size: 1.05rem;
  border: 3px solid #2a1c08;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #2a1c08, 0 0 28px rgba(255, 211, 91, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 60;
  animation: toast-pop 2.4s ease forwards;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
@keyframes toast-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(-30px) scale(0.7); }
  15%  { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1.06); }
  25%  {              transform: translateX(-50%) translateY(0)     scale(1);    }
  85%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
}

/* ============================================================
   15. COMBO FLASH — full-screen tint on critical hit
   ============================================================ */
.combo-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255, 211, 91, 0.55), rgba(255, 122, 26, 0.25) 40%, transparent 70%);
  z-index: 45;
  animation: combo-flash 0.5s ease-out forwards;
  mix-blend-mode: screen;
}
@keyframes combo-flash {
  0%   { opacity: 0;   }
  20%  { opacity: 1;   }
  100% { opacity: 0;   }
}

/* ============================================================
   16. ACCESSIBILITY — reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body,
  body::before,
  body::after,
  .tower--targeted,
  .tower__flag::after,
  .streak-fire,
  .streak-fire::after,
  .powerup-card::after,
  .tower__eye,
  .attack-projectile {
    animation: none !important;
  }
  /* Keep static state of fills, hide moving sparkle */
  .tower--targeted {
    outline: 4px solid var(--gold);
    outline-offset: 4px;
  }
  .damage-popup,
  .toast,
  .confetti,
  .combo-flash,
  .tower--dead {
    animation-duration: 0.2s !important;
  }
}

/* ============================================================
   17. RESPONSIVE — small screens (kids on Chromebooks)
   ============================================================ */
@media (max-width: 720px) {
  #map { gap: 1vw; padding: 0 2vw 6vh; }
  .tower { width: 84px; }
  .tower__body { width: 70px; height: 120px; }
  .tower--boss { width: 110px; }
  .tower--boss .tower__body { width: 100px; height: 170px; }
  .question-text { font-size: 1.3rem; }
  #hud { font-size: 1rem; gap: 10px; padding: 10px 12px; }
}

/* ============================================================
   18. SOLUTION MODAL — shown on wrong answers (learning moment)
   ============================================================ */
.solution-modal {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(20,15,40,0.86), rgba(5,3,15,0.96));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  transition: opacity 250ms ease;
  padding: 24px;
}
.solution-modal.is-open { opacity: 1; }

.solution-card {
  background: linear-gradient(160deg, #fffaf2 0%, #fff2dc 100%);
  border: 4px solid #ffb84a;
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 0 0 6px rgba(255,184,74,0.25);
  width: min(640px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px;
  color: #2b1d05;
  animation: solution-pop 380ms cubic-bezier(.2,1.4,.4,1);
}

@keyframes solution-pop {
  from { transform: scale(0.7) translateY(20px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.solution-header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px dashed #f0c878;
}
.solution-icon { font-size: 1.8rem; }
.solution-title {
  font-weight: 800;
  font-size: 1.25rem;
  color: #8b3a00;
  letter-spacing: 0.4px;
}

.solution-question {
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.45;
  border-left: 5px solid #6a4cff;
  color: #221e3a;
}
.solution-question img { max-width: 100%; vertical-align: middle; }

.solution-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.solution-row__item {
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
}
.solution-row__item--wrong {
  background: linear-gradient(135deg, #ffd9d9, #ffb1b1);
  border: 2px solid #e64a4a;
}
.solution-row__item--right {
  background: linear-gradient(135deg, #d6f5d0, #a8eb98);
  border: 2px solid #2e9c2e;
}
.solution-row__label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  opacity: 0.75;
  margin-bottom: 2px;
}
.solution-row__value {
  font-size: 1.3rem;
  font-weight: 800;
  font-family: 'Courier New', monospace;
}

.solution-body-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: #6a4cff;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.solution-body {
  background: #fdf6e3;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #2b1d05;
  border: 1px solid #e8d5a0;
  margin-bottom: 18px;
}
.solution-body img { max-width: 100%; vertical-align: middle; }
.solution-body p { margin: 0 0 8px; }
.solution-body p:last-child { margin-bottom: 0; }

.solution-dismiss-btn {
  display: block;
  width: 100%;
  padding: 14px;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  color: #fff;
  background: linear-gradient(135deg, #6a4cff 0%, #9c5cff 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 0 #4a2dcf, 0 12px 24px rgba(106,76,255,0.45);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.solution-dismiss-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #4a2dcf, 0 16px 32px rgba(106,76,255,0.55);
}
.solution-dismiss-btn:active {
  transform: translateY(2px);
  box-shadow: 0 4px 0 #4a2dcf, 0 6px 12px rgba(106,76,255,0.35);
}

@media (max-width: 720px) {
  .solution-card { padding: 18px 16px; }
  .solution-row { grid-template-columns: 1fr; }
  .solution-title { font-size: 1.05rem; }
}

/* ============================================================
   19. PICKER CANCEL BUTTON
   ============================================================ */
.picker-cancel {
  margin-top: 16px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
  color: #6a3a05;
  border: 2px solid #c89b4a;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.picker-cancel:hover {
  background: #6a3a05;
  color: #fffaee;
}

/* ============================================================
   20. VICTORY OVERLAY — fullscreen win screen
   ============================================================ */
#victory-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(70,20,120,0.9), rgba(8,3,30,0.97));
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 300;
  padding: 24px;
}
#victory-overlay.is-open {
  pointer-events: auto;
  opacity: 1;
}
.victory-card {
  background: linear-gradient(160deg, #fff5d4 0%, #ffd86b 100%);
  border: 5px solid #ffb84a;
  border-radius: 24px;
  padding: 36px 40px;
  text-align: center;
  width: min(560px, 92vw);
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 8px rgba(255,184,74,0.25);
  transform: scale(0.7) translateY(40px);
  transition: transform 0.5s var(--ease-pop);
  color: #3a1d05;
}
#victory-overlay.is-open .victory-card {
  transform: scale(1) translateY(0);
}
.victory-card h1 {
  margin: 0 0 12px;
  font-size: 3rem;
  letter-spacing: 2px;
  color: #8b3a00;
  text-shadow: 3px 3px 0 #ffe9a0, 6px 6px 0 rgba(0,0,0,0.15);
  animation: victory-bounce 1.6s ease-in-out infinite;
}
.victory-card p {
  font-size: 1.1rem;
  margin: 0 0 18px;
  font-weight: 600;
}
.victory-stats {
  background: rgba(255,255,255,0.55);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 1rem;
  line-height: 1.7;
  color: #3a1d05;
  font-weight: 600;
}
.victory-stats strong { color: #8b3a00; }
.victory-restart {
  padding: 14px 28px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #6a4cff 0%, #9c5cff 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 0 #4a2dcf, 0 12px 24px rgba(106,76,255,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.victory-restart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #4a2dcf, 0 16px 32px rgba(106,76,255,0.55);
}
.victory-restart:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 #4a2dcf;
}

@keyframes victory-bounce {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.06) rotate(2deg); }
}

/* ============================================================
   21. PER-TOWER SCALING + RESPONSIVE WIDTH
   Driven by inline --tower-scale (set in game.js renderTowers).
   Sizes use clamp(min, vw-based, max) so 8 buildings fit any viewport.
   ============================================================ */
:root {
  /* Tower body unit — scales with viewport width, min 36px max 90px */
  --tower-unit-w: clamp(36px, 6.4vw, 90px);
  --tower-unit-h: clamp(60px, 11vw, 150px);
  --tower-pad-w: clamp(44px, 8vw, 110px);
}
.tower__body {
  width:  calc(var(--tower-unit-w) * var(--tower-scale, 1));
  height: calc(var(--tower-unit-h) * var(--tower-scale, 1));
}
.tower--boss .tower__body {
  width:  calc(var(--tower-unit-w) * 1.25 * var(--tower-scale, 1.25) / 1.25);
  height: calc(var(--tower-unit-h) * 1.30 * var(--tower-scale, 1.25) / 1.25);
}
.tower {
  width: calc(var(--tower-pad-w) * var(--tower-scale, 1));
}
/* Smooth color transitions as towers darken with damage */
.tower {
  transition: filter 600ms ease, transform 0.25s var(--ease-pop);
}
/* Map gap also scales with viewport so spacing keeps proportions */
#map {
  gap: clamp(0.4vw, 1.2vw, 2vw) !important;
  padding: 0 clamp(8px, 2vw, 32px) 6vh !important;
}

/* ============================================================
   22. QUESTION TIMER — 2-min countdown displayed on question card
   ============================================================ */
.question-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
  min-height: 32px;
}
.question-card-header .difficulty-badge {
  position: relative;
  top: 0;
  left: 0;
  transform: none;
}
.question-timer {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #2a1c08;
  color: #ffd86b;
  border: 2px solid #ffd86b;
  box-shadow: 0 3px 0 rgba(0,0,0,0.35);
  font-variant-numeric: tabular-nums;
  transition: background 0.25s, color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.question-timer--low {
  background: #6a3a05;
  color: #ffe066;
  animation: timer-pulse 1.2s ease-in-out infinite;
}
.question-timer--critical {
  background: #b3001b;
  color: #fff;
  border-color: #fff;
  animation: timer-pulse 0.5s ease-in-out infinite;
}
@keyframes timer-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* ============================================================
   23. FIREWORKS — celebrate every correct answer
   ============================================================ */
.firework-spark {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 150;
  box-shadow: 0 0 12px currentColor, 0 0 22px currentColor;
  animation: firework-burst 1100ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
  will-change: transform, opacity;
}
@keyframes firework-burst {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 1; }
  20%  { transform: translate(calc(var(--dx) * 0.35), calc(var(--dy) * 0.35)) scale(1.3); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 60px)) scale(0.4); opacity: 0; }
}

/* ============================================================
   24. KID-FRIENDLY QUESTION TEXT — large, readable
   ============================================================ */
.question-text {
  font-size: 1.25rem;    /* readable, not shouting */
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.2px;
  margin: 14px 0 16px;
  color: #2a1c08;
  text-align: left;
}
.question-text em {
  display: block;
  margin-top: 10px;
  font-size: 0.85rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #6a3a05;
  opacity: 0.8;
}
/* LaTeX images: native AoPS rendering for full math expressions / fractions
   (which are already designed at correct inline proportions), but enlarge
   ONLY the tiny single-character glyphs (which native-render at ~14px and
   look squashed in our 20px text). The .latex--small class is added in JS
   based on natural image height < 20px. */
.question-text img.latex,
.solution-question img.latex,
.solution-body img.latex {
  vertical-align: middle;
  margin: 0 2px;
}
.question-text img.latex--small,
.solution-question img.latex--small,
.solution-body img.latex--small {
  height: 1.25em;
  width: auto;
}
/* Comfortable line-height so tall stacked expressions don't collide */
.question-text,
.solution-question,
.solution-body {
  line-height: 1.7;
}

/* ============================================================
   25. DEAD TOWER — stays visible, dark, with broken marks
   ============================================================ */
.tower--dead .tower__hp { display: none; }
.tower--dead .tower__taunt { display: none; }
.tower--dead .tower__name { opacity: 0.55; }

/* Permanent lean for that "wrecked" look + jagged silhouette = chunks missing */
.tower--dead .tower__body {
  transform: rotate(-3deg);
  transform-origin: bottom center;
  position: relative;
  /* Top edge is broken (jagged) and one corner is gone — like a smashed building */
  clip-path: polygon(
    0% 14%, 6% 4%, 14% 18%, 22% 6%, 32% 14%, 42% 2%, 52% 16%,
    62% 6%, 72% 22%, 82% 8%, 90% 18%, 100% 6%,
    100% 88%, 96% 100%, 4% 100%, 0% 92%
  );
}

/* Bold crack overlay — three thick diagonal lines */
.tower--dead .tower__body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg,
      transparent 25%, rgba(0,0,0,0.9) 25.5%, rgba(0,0,0,0.9) 27.5%, transparent 28%,
      transparent 48%, rgba(0,0,0,0.9) 48.6%, rgba(0,0,0,0.9) 50.8%, transparent 51.4%,
      transparent 70%, rgba(0,0,0,0.9) 70.6%, rgba(0,0,0,0.9) 72.4%, transparent 73%),
    linear-gradient(-30deg,
      transparent 32%, rgba(0,0,0,0.75) 32.5%, rgba(0,0,0,0.75) 34.2%, transparent 34.8%,
      transparent 60%, rgba(0,0,0,0.75) 60.3%, rgba(0,0,0,0.75) 62.0%, transparent 62.6%);
  mix-blend-mode: multiply;
  z-index: 3;
}

/* Black "burnt holes" — three round dark patches */
.tower--dead .tower__body::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 9px at 30% 35%, #050505 60%, transparent 70%),
    radial-gradient(circle 7px at 70% 55%, #050505 60%, transparent 70%),
    radial-gradient(circle 11px at 45% 75%, #050505 60%, transparent 70%);
  z-index: 2;
}

/* Smoke wisp drifting up from the wreck */
.tower--dead::before {
  content: "";
  position: absolute;
  bottom: 60%;
  left: 50%;
  width: 60px;
  height: 80px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
    rgba(80, 80, 80, 0.55) 0%,
    rgba(80, 80, 80, 0.25) 40%,
    transparent 75%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1;
  animation: smoke-rise 4s ease-in-out infinite;
}

@keyframes smoke-rise {
  0%   { transform: translate(-50%, 0)    scale(0.8); opacity: 0.7; }
  50%  { transform: translate(-45%, -18px) scale(1.1); opacity: 0.55; }
  100% { transform: translate(-55%, -34px) scale(1.3); opacity: 0;    }
}

/* ============================================================
   26. CKSTEM BRAND MARK — top-left ROUND logo
   ============================================================ */
.brand-mark {
  /* Top-right, beside the moon (which sits at top:12% right:14%) */
  position: fixed;
  top: 4%;
  right: 8%;
  z-index: 30;
  display: block;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4),
              0 0 0 4px rgba(255, 255, 255, 0.2),
              0 0 32px 6px rgba(255, 217, 135, 0.35);  /* warm moonlight glow */
  overflow: hidden;
  transition: transform 0.2s var(--ease-pop), box-shadow 0.2s ease;
}
.brand-mark:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5), 0 0 0 6px rgba(255, 255, 255, 0.28);
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 720px) {
  .brand-mark { top: 8px; left: 8px; width: 48px; height: 48px; }
}

/* ============================================================
   27. CKSTEM TOWER — tallest, indestructible, logo on roof
   ============================================================ */
.tower--ckstem {
  cursor: help;
}
/* Override any death styling — CKSTEM tower never dies */
.tower--ckstem.tower--dead .tower__body { transform: none; clip-path: none; }
.tower--ckstem .tower__body::before,
.tower--ckstem .tower__body::after { display: none; }
.tower--ckstem::before { display: none; }

/* The rectangular CKSTEM logo billboard mounted on the roof —
   width matches the building body so it looks like a sign on the roof. */
.tower__roof-sign {
  display: block;
  width: calc(90px * var(--tower-scale, 1.65));
  height: auto;
  margin: 0 auto 4px;
  background: #fff;
  border: 3px solid #2a1c08;
  border-radius: 8px;
  padding: 3px 5px;
  object-fit: contain;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45),
              0 0 0 3px rgba(255, 255, 255, 0.35),
              0 0 22px 6px rgba(255, 217, 135, 0.5);
  animation: ckstem-glow 3s ease-in-out infinite alternate;
}
@keyframes ckstem-glow {
  0%   { box-shadow: 0 6px 18px rgba(0,0,0,0.45),
                     0 0 0 4px rgba(255, 255, 255, 0.35),
                     0 0 24px 4px rgba(255, 217, 135, 0.4); }
  100% { box-shadow: 0 6px 18px rgba(0,0,0,0.45),
                     0 0 0 4px rgba(255, 255, 255, 0.5),
                     0 0 40px 12px rgba(255, 217, 135, 0.7); }
}

/* CKSTEM taunt sits below the logo — clean pill, no speech-bubble tail */
.tower__taunt--ckstem {
  display: block;
  position: static;
  margin: 0 auto 6px;
  background: rgba(42, 28, 8, 0.9);
  color: #ffd86b;
  padding: 5px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  white-space: nowrap;
  border: 2px solid #ffd86b;
  width: max-content;
  max-width: none;
  text-align: center;
  pointer-events: none;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
/* Kill the speech-bubble triangle that the regular taunt uses */
.tower__taunt--ckstem::before,
.tower__taunt--ckstem::after { display: none !important; content: none !important; }

/* Make the body itself look "stately" — gold gradient, no broken effects */
.tower--ckstem .tower__body {
  border-color: #6a3a05;
  box-shadow: 0 0 0 3px #ffd54f, 0 12px 32px rgba(255, 213, 79, 0.4);
}

/* On hover, gentle lift + brighter glow (signals "click me!") */
.tower--ckstem:hover {
  transform: translateY(-6px) scale(1.04);
}

/* ============================================================
   28. CKSTEM INVITE MODAL — shown when kid clicks the tallest building
   ============================================================ */
.ckstem-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(70,30,140,0.85), rgba(8,3,30,0.97));
  z-index: 250;
  opacity: 0;
  transition: opacity 0.3s ease;
  padding: 24px;
}
.ckstem-modal.is-open { opacity: 1; }

.ckstem-card {
  background: linear-gradient(160deg, #fff8e1 0%, #ffd54f 100%);
  border: 5px solid #6a4cff;
  border-radius: 22px;
  padding: 28px 32px 24px;
  width: min(560px, 92vw);
  text-align: center;
  color: #2b1d05;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6),
              0 0 0 8px rgba(255, 184, 74, 0.25),
              0 0 60px 12px rgba(106, 76, 255, 0.45);
  animation: ckstem-pop 0.5s var(--ease-pop);
}
@keyframes ckstem-pop {
  from { transform: scale(0.7) translateY(30px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);    opacity: 1; }
}

.ckstem-card__logo {
  display: block;
  width: min(280px, 70%);
  height: auto;
  margin: 0 auto 14px;
}
.ckstem-card__title {
  margin: 0 0 8px;
  font-size: 1.9rem;
  color: #4a2dcf;
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 #fffaee;
}
.ckstem-card__lede {
  margin: 0 0 18px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
}
.ckstem-card__pillars {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.ckstem-card__pillars > div {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ckstem-pill {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 1px;
  color: #4a2dcf;
  background: #fffaee;
  padding: 4px 8px;
  border-radius: 999px;
  border: 2px solid #4a2dcf;
}
.ckstem-card__pillars small {
  font-size: 0.78rem;
  font-weight: 600;
  color: #3a1d05;
  text-align: center;
  line-height: 1.25;
}
.ckstem-card__cta-text {
  margin: 0 0 14px;
  font-size: 1rem;
  font-weight: 700;
  color: #4a2dcf;
}
.ckstem-card__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.ckstem-btn {
  display: inline-block;
  padding: 12px 22px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.8px;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: inherit;
}
.ckstem-btn--primary {
  background: linear-gradient(135deg, #6a4cff 0%, #9c5cff 100%);
  color: #fff;
  box-shadow: 0 6px 0 #4a2dcf, 0 12px 24px rgba(106,76,255,0.45);
}
.ckstem-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #4a2dcf, 0 16px 32px rgba(106,76,255,0.55);
}
.ckstem-btn--ghost {
  background: transparent;
  color: #4a2dcf;
  border: 2px solid #4a2dcf;
}
.ckstem-btn--ghost:hover {
  background: #4a2dcf;
  color: #fff;
}

@media (max-width: 720px) {
  .ckstem-card__pillars { grid-template-columns: 1fr; }
}

/* Hide the legacy round brand-mark — logo lives on the building now */
.brand-mark { display: none !important; }

/* ============================================================
   29. CKSTEM bar — different style from HP bar (gold/rainbow shimmer)
   ============================================================ */
.tower__hp--ckstem {
  /* Override the standard HP bar look */
  background: linear-gradient(90deg, #ffd54f, #ffb300, #ffd54f, #ffe082, #ffd54f);
  background-size: 200% 100%;
  border: 2px solid #4a2dcf;
  border-radius: 8px;
  padding: 3px 8px;
  height: auto;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(255, 213, 79, 0.45),
              0 4px 10px rgba(0, 0, 0, 0.35);
  animation: ckstem-bar-shimmer 3s linear infinite;
  display: flex !important;       /* override the .tower--dead .tower__hp{display:none} just in case */
  justify-content: center;
  align-items: center;
}
.tower__hp--ckstem .tower__hp-text {
  position: static;
  color: #4a2dcf;
  font-weight: 900;
  font-size: 0.7rem;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.tower__hp--ckstem .tower__hp-fill { display: none; }
@keyframes ckstem-bar-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   30. SKY BIRDS — realistic black silhouettes (high contrast vs pink sky)
   Each frame is a full bird (body + head + two wings) drawn as filled SVG
   so it reads as a real bird, not a hairline arc. 4-frame wing-flap loop.
   ============================================================ */
.sky-birds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.bird {
  position: absolute;
  left: -80px;
  width: 42px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
  animation:
    bird-fly  var(--speed, 40s) linear infinite,
    bird-bob  3.6s ease-in-out infinite alternate,
    bird-flap 0.5s steps(1, end) infinite;
  animation-delay: var(--delay, 0s), var(--delay, 0s), 0s;
}
/* Distant flock — smaller and fainter */
.bird:nth-child(even) {
  width: 28px;
  height: 16px;
  opacity: 0.7;
}
@keyframes bird-fly {
  0%   { transform: translateX(-80px); }
  100% { transform: translateX(calc(100vw + 80px)); }
}
@keyframes bird-bob {
  0%   { margin-top: 0; }
  100% { margin-top: var(--bob, 14px); }
}
/* Side-view bird silhouette: body + head + beak + tail + wing.
   3-frame wing flap: HIGH → MID → LOW → MID — feels alive without strobing. */
@keyframes bird-flap {
  0%, 24% {
    /* Wing HIGH (upstroke peak) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='%23000'><ellipse cx='30' cy='20' rx='9' ry='3'/><circle cx='39' cy='18' r='2.6'/><path d='M41.2 17.6 L 45 18.2 L 41.2 18.8 Z'/><path d='M22 20 L 14 16 L 16 20 L 14 24 Z'/><path d='M30 18 Q 26 1 14 0 Q 20 8 28 19 Z'/></svg>");
  }
  25%, 49% {
    /* Wing MID (level) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='%23000'><ellipse cx='30' cy='20' rx='9' ry='3'/><circle cx='39' cy='18' r='2.6'/><path d='M41.2 17.6 L 45 18.2 L 41.2 18.8 Z'/><path d='M22 20 L 14 16 L 16 20 L 14 24 Z'/><path d='M30 19 Q 22 13 8 12 Q 18 18 28 20 Z'/></svg>");
  }
  50%, 74% {
    /* Wing LOW (downstroke peak) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='%23000'><ellipse cx='30' cy='20' rx='9' ry='3'/><circle cx='39' cy='18' r='2.6'/><path d='M41.2 17.6 L 45 18.2 L 41.2 18.8 Z'/><path d='M22 20 L 14 16 L 16 20 L 14 24 Z'/><path d='M30 21 Q 26 30 14 30 Q 20 26 28 21 Z'/></svg>");
  }
  75%, 100% {
    /* Wing MID (returning) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30' fill='%23000'><ellipse cx='30' cy='20' rx='9' ry='3'/><circle cx='39' cy='18' r='2.6'/><path d='M41.2 17.6 L 45 18.2 L 41.2 18.8 Z'/><path d='M22 20 L 14 16 L 16 20 L 14 24 Z'/><path d='M30 19 Q 22 13 8 12 Q 18 18 28 20 Z'/></svg>");
  }
}
@media (prefers-reduced-motion: reduce) {
  .bird { animation: bird-fly var(--speed, 40s) linear infinite; }
}

/* ============================================================
   31. INTEGRATED HUD — title + stats + powerups in one banner
   ============================================================ */
#hud {
  /* Override the centered-pill default — banner spans more, left-aligned title */
  display: flex !important;
  align-items: center;
  gap: 18px;
  padding: 8px 18px 8px 14px;
  margin: 14px 24px 0;
  width: auto;
  max-width: calc(100vw - 48px);
  justify-content: flex-start;
}

/* Title block on the left — medieval gold treatment */
.hud-title {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 6px;
}
.hud-title__crest {
  font-size: 1.6rem;
  filter: drop-shadow(0 0 6px rgba(255, 213, 79, 0.6));
}
.hud-title__lines {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.hud-title__main {
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--gold);
  text-shadow: 0 2px 0 rgba(0,0,0,0.5),
               0 0 10px rgba(255, 213, 79, 0.45);
}
.hud-title__sub {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 247, 230, 0.65);
  margin-top: 4px;
}

/* Vertical divider between title and stats — gold line, soft glow */
.hud-divider {
  width: 2px;
  align-self: stretch;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 213, 79, 0.55) 25%,
    rgba(255, 213, 79, 0.55) 75%,
    transparent 100%);
  margin: 4px 4px;
}

/* Stats group keeps its existing pill look */
.hud-stats {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 1rem;
  font-weight: 700;
}
.hud-power, .hud-streak {
  background: rgba(0, 0, 0, 0.22);
  padding: 4px 12px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Powerups push to the far right */
.hud-powerups {
  margin-left: auto;
  display: flex;
}

@media (max-width: 720px) {
  .hud-title__sub { display: none; }
  .hud-title__main { font-size: 1rem; letter-spacing: 0.5px; }
  #hud { gap: 10px; padding: 6px 10px; }
}

/* ============================================================
   32. HUD STAT CHIPS — Score / Conquered / Accuracy / Power / Streak
   ============================================================ */
.hud-stats {
  flex-wrap: wrap;
}
.hud-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 213, 79, 0.18);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  transition: transform 0.18s var(--ease-pop), box-shadow 0.18s ease;
}
.hud-stat:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.hud-stat__icon {
  font-size: 1rem;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.hud-stat__label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 247, 230, 0.7);
}
.hud-stat__value {
  font-size: 1rem;
  font-weight: 900;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  min-width: 1.6em;
  text-align: right;
}
.hud-stat.hud-power .hud-stat__value { color: var(--magic); }
.hud-stat.hud-streak .hud-stat__value { color: var(--flame); }
.hud-stat.hud-accuracy .hud-stat__value { color: #6affc6; }

@media (max-width: 920px) {
  .hud-stat__label { display: none; }   /* compact: icon + value only */
}

/* ============================================================
   33. CN TOWER VARIANT — boss tower drawn in iconic CN Tower shape
   (antenna + SkyPod + tapered shaft + flared base)
   ============================================================ */
.tower--cn .tower__body {
  width: calc(var(--tower-unit-w) * 1.22 * var(--tower-scale, 1.3) / 1.3);
  height: calc(var(--tower-unit-h) * 1.87 * var(--tower-scale, 1.3) / 1.3);
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 280' preserveAspectRatio='xMidYEnd meet'><defs><linearGradient id='g' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%237a7060'/><stop offset='0.18' stop-color='%23dad6c5'/><stop offset='0.5' stop-color='%23f0ecdb'/><stop offset='0.82' stop-color='%23dad6c5'/><stop offset='1' stop-color='%237a7060'/></linearGradient><linearGradient id='r' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23862317'/><stop offset='0.5' stop-color='%23e74c3c'/><stop offset='1' stop-color='%23862317'/></linearGradient></defs><rect x='49.4' y='0' width='1.2' height='10' fill='%23222'/><rect x='48.6' y='10' width='2.8' height='14' fill='url(%23r)'/><rect x='48.6' y='24' width='2.8' height='10' fill='%23ecebe6' stroke='%23999' stroke-width='0.3'/><rect x='48.6' y='34' width='2.8' height='14' fill='url(%23r)'/><rect x='48' y='48' width='4' height='32' fill='url(%23g)' stroke='%23443' stroke-width='0.5'/><rect x='46' y='78' width='8' height='4' fill='%237a7060' stroke='%23443' stroke-width='0.6'/><ellipse cx='50' cy='90' rx='22' ry='4' fill='%237a7060' stroke='%23443' stroke-width='1'/><ellipse cx='50' cy='88' rx='22' ry='9' fill='url(%23g)' stroke='%23443' stroke-width='1.5'/><rect x='30' y='84' width='40' height='3.5' fill='%232d3b56' opacity='0.9'/><rect x='30' y='88.5' width='40' height='2.5' fill='%231e2840' opacity='0.85'/><ellipse cx='50' cy='99' rx='17' ry='3' fill='%23a9a290' stroke='%23443' stroke-width='0.8'/><rect x='44' y='102' width='12' height='10' fill='url(%23g)' stroke='%23443' stroke-width='1'/><polygon points='42,112 58,112 60,255 40,255' fill='url(%23g)' stroke='%23443' stroke-width='1.4'/><line x1='46' y1='112' x2='44' y2='255' stroke='%237a7060' stroke-width='0.8' opacity='0.55'/><line x1='54' y1='112' x2='56' y2='255' stroke='%237a7060' stroke-width='0.8' opacity='0.55'/><polygon points='28,278 40,255 60,255 72,278' fill='%237a7060' stroke='%23443' stroke-width='1.2'/><polygon points='40,255 46,265 54,265 60,255' fill='%23a9a290' stroke='%23443' stroke-width='0.8'/><polygon points='44,278 46,265 54,265 56,278' fill='url(%23g)' stroke='%23443' stroke-width='0.8'/><ellipse cx='50' cy='278' rx='24' ry='2' fill='%235a5040' opacity='0.5'/></svg>") !important;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
}
/* Hide all the boss/normal-tower decorations that don't belong on a CN Tower */
.tower--cn .tower__body::before,
.tower--cn .tower__body::after,
.tower--cn .tower__crown,
.tower--cn .tower__eye,
.tower--cn .tower__flag,
.tower--cn .tower__door { display: none !important; }

/* Name label sits well above the antenna tip */
.tower--cn .tower__name { margin-bottom: 28px; }

/* ============================================================
   34. RESPONSIVE — fit on smaller viewports
   ============================================================ */
.tower__name {
  font-size: clamp(0.55rem, 1vw, 0.95rem) !important;
  margin-bottom: clamp(8px, 1.5vw, 18px) !important;
  padding: 2px 8px !important;
}
.tower__hp {
  font-size: clamp(0.55rem, 0.9vw, 0.85rem);
}
.tower__taunt {
  font-size: clamp(0.55rem, 0.9vw, 0.85rem) !important;
}
.tower__hp--ckstem .tower__hp-text {
  font-size: clamp(0.5rem, 0.85vw, 0.7rem) !important;
}
.tower__taunt--ckstem {
  font-size: clamp(0.45rem, 0.85vw, 0.7rem) !important;
  padding: 3px 10px !important;
}
.tower__roof-sign {
  width: calc(var(--tower-unit-w) * var(--tower-scale, 1.65)) !important;
}

/* HUD wraps elegantly on narrow screens */
@media (max-width: 1100px) {
  #hud { flex-wrap: wrap; gap: 10px; padding: 6px 10px; }
  .hud-title__sub { display: none; }
  .hud-stat { padding: 3px 8px; font-size: 0.8rem; }
  .hud-stat__label { display: none; }
  .hud-divider { display: none; }
}
@media (max-width: 720px) {
  .hud-title__main { font-size: 1rem; letter-spacing: 0.5px; }
  .hud-stat { font-size: 0.75rem; }
}


/* ============================================================
   35. ICONIC CANADIAN LANDMARK SILHOUETTES
   Each destroyable building uses an SVG silhouette of a famous
   Canadian landmark. Shared base + per-slug background-image.
   ============================================================ */
.tower--real .tower__body {
  background-color: transparent !important;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
}
.tower--real .tower__body::before,
.tower--real .tower__body::after,
.tower--real .tower__crown,
.tower--real .tower__eye,
.tower--real .tower__flag,
.tower--real .tower__door { display: none !important; }

/* Peace Tower (Ottawa) — sandstone Gothic clock tower with green copper spire + flag */
.tower--peace .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><line x1='30' y1='2' x2='30' y2='14' stroke='%23553' stroke-width='1'/><path d='M30,3 L40,5 L30,9 Z' fill='%23c0392b'/><polygon points='22,30 30,12 38,30 34,32 30,18 26,32' fill='%234a7c59' stroke='%232c4a36' stroke-width='1'/><polygon points='22,30 38,30 34,32 26,32' fill='%232c4a36'/><circle cx='30' cy='42' r='6.5' fill='%23fff' stroke='%23443' stroke-width='1'/><line x1='30' y1='42' x2='30' y2='37' stroke='%23443' stroke-width='1.4'/><line x1='30' y1='42' x2='34' y2='42' stroke='%23443' stroke-width='1.4'/><rect x='14' y='32' width='32' height='68' fill='%23dcc89c' stroke='%237a5e30' stroke-width='1.2'/><g fill='%23dcc89c' stroke='%237a5e30' stroke-width='0.4'><rect x='14' y='32' width='4' height='3'/><rect x='22' y='32' width='4' height='3'/><rect x='34' y='32' width='4' height='3'/><rect x='42' y='32' width='4' height='3'/></g><line x1='14' y1='52' x2='46' y2='52' stroke='%237a5e30' stroke-width='0.5'/><line x1='14' y1='75' x2='46' y2='75' stroke='%237a5e30' stroke-width='0.5'/><path d='M17,68 Q17,60 21,60 Q25,60 25,68 L25,72 L17,72 Z' fill='%232d3b56'/><path d='M35,68 Q35,60 39,60 Q43,60 43,68 L43,72 L35,72 Z' fill='%232d3b56'/><path d='M 25 100 L 25 88 Q 30 80 35 88 L 35 100 Z' fill='%235a3010'/></svg>") !important;
}

/* Casa Loma (Toronto) — fairy-tale castle with conical turrets */
.tower--casa .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><polygon points='4,40 18,40 11,22' fill='%235a3010' stroke='%23443' stroke-width='0.8'/><line x1='11' y1='22' x2='11' y2='15' stroke='%23553' stroke-width='0.8'/><path d='M11,16 L17,18 L11,21 Z' fill='%23c0392b'/><polygon points='42,40 56,40 49,22' fill='%235a3010' stroke='%23443' stroke-width='0.8'/><line x1='49' y1='22' x2='49' y2='15' stroke='%23553' stroke-width='0.8'/><path d='M49,16 L55,18 L49,21 Z' fill='%23c0392b'/><rect x='4' y='40' width='14' height='60' fill='%23dcc89c' stroke='%237a5e30' stroke-width='1'/><rect x='42' y='40' width='14' height='60' fill='%23dcc89c' stroke='%237a5e30' stroke-width='1'/><polygon points='18,30 42,30 30,12' fill='%235a3010' stroke='%23443' stroke-width='1'/><line x1='30' y1='12' x2='30' y2='4' stroke='%23553' stroke-width='1'/><path d='M30,5 L38,7 L30,11 Z' fill='%23c0392b'/><rect x='18' y='30' width='24' height='70' fill='%23e8d4a8' stroke='%237a5e30' stroke-width='1.2'/><g fill='%23e8d4a8' stroke='%237a5e30' stroke-width='0.4'><rect x='18' y='30' width='3' height='3'/><rect x='24' y='30' width='3' height='3'/><rect x='30' y='30' width='3' height='3'/><rect x='36' y='30' width='3' height='3'/></g><rect x='6' y='44' width='4' height='5' fill='%232d3b56'/><rect x='12' y='44' width='4' height='5' fill='%232d3b56'/><rect x='6' y='56' width='4' height='5' fill='%232d3b56'/><rect x='12' y='56' width='4' height='5' fill='%232d3b56'/><rect x='44' y='44' width='4' height='5' fill='%232d3b56'/><rect x='50' y='44' width='4' height='5' fill='%232d3b56'/><rect x='44' y='56' width='4' height='5' fill='%232d3b56'/><rect x='50' y='56' width='4' height='5' fill='%232d3b56'/><rect x='22' y='42' width='5' height='7' fill='%232d3b56'/><rect x='33' y='42' width='5' height='7' fill='%232d3b56'/><rect x='22' y='58' width='5' height='7' fill='%232d3b56'/><rect x='33' y='58' width='5' height='7' fill='%232d3b56'/><path d='M 25 100 L 25 86 Q 30 78 35 86 L 35 100 Z' fill='%235a3010'/></svg>") !important;
}

/* Habitat 67 (Montreal) — stacked modular cubes (Moshe Safdie's iconic geometry) */
.tower--habitat .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><g stroke='%237a7060' stroke-width='1' fill='%23cdc4ac'><rect x='14' y='12' width='12' height='14'/><rect x='28' y='12' width='12' height='14'/><rect x='4' y='28' width='12' height='14'/><rect x='18' y='28' width='12' height='14'/><rect x='32' y='28' width='12' height='14'/><rect x='46' y='28' width='10' height='14'/><rect x='8' y='44' width='12' height='14'/><rect x='22' y='44' width='12' height='14'/><rect x='36' y='44' width='12' height='14'/><rect x='2' y='60' width='12' height='14'/><rect x='16' y='60' width='12' height='14'/><rect x='30' y='60' width='12' height='14'/><rect x='44' y='60' width='12' height='14'/><rect x='6' y='76' width='12' height='14'/><rect x='20' y='76' width='12' height='14'/><rect x='34' y='76' width='12' height='14'/><rect x='48' y='76' width='10' height='14'/><rect x='14' y='90' width='14' height='10'/><rect x='30' y='90' width='14' height='10'/></g><g fill='%237a7060'><rect x='17' y='15' width='3' height='3'/><rect x='32' y='15' width='3' height='3'/><rect x='7' y='31' width='3' height='3'/><rect x='21' y='31' width='3' height='3'/><rect x='35' y='31' width='3' height='3'/><rect x='49' y='31' width='3' height='3'/><rect x='11' y='47' width='3' height='3'/><rect x='25' y='47' width='3' height='3'/><rect x='39' y='47' width='3' height='3'/><rect x='5' y='63' width='3' height='3'/><rect x='19' y='63' width='3' height='3'/><rect x='33' y='63' width='3' height='3'/><rect x='47' y='63' width='3' height='3'/><rect x='9' y='79' width='3' height='3'/><rect x='23' y='79' width='3' height='3'/><rect x='37' y='79' width='3' height='3'/><rect x='51' y='79' width='3' height='3'/></g></svg>") !important;
}

/* Saddledome (Calgary) — iconic hyperbolic-paraboloid saddle roof arena */
.tower--saddle .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><path d='M 4 70 Q 30 30 56 70 Q 30 50 4 70 Z' fill='%23dcdcdc' stroke='%23555' stroke-width='1.4'/><path d='M 4 70 Q 30 50 56 70' fill='none' stroke='%23888' stroke-width='1'/><path d='M 12 50 Q 30 35 48 50' fill='none' stroke='%23999' stroke-width='0.8'/><line x1='10' y1='60' x2='10' y2='90' stroke='%23555' stroke-width='1.5'/><line x1='30' y1='44' x2='30' y2='90' stroke='%23555' stroke-width='1.2'/><line x1='50' y1='60' x2='50' y2='90' stroke='%23555' stroke-width='1.5'/><rect x='4' y='90' width='52' height='10' fill='%23bbb' stroke='%23555' stroke-width='1'/><g fill='%23555'><rect x='8' y='92' width='4' height='4'/><rect x='16' y='92' width='4' height='4'/><rect x='24' y='92' width='4' height='4'/><rect x='32' y='92' width='4' height='4'/><rect x='40' y='92' width='4' height='4'/><rect x='48' y='92' width='4' height='4'/></g></svg>") !important;
}

/* Château Frontenac (Quebec City) — fairy-tale castle hotel with steep green-copper roof */
.tower--chateau .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><line x1='30' y1='2' x2='30' y2='10' stroke='%23553' stroke-width='1'/><path d='M30,3 L38,5 L30,8 Z' fill='%23c0392b'/><polygon points='22,28 30,8 38,28' fill='%234a7c59' stroke='%232c4a36' stroke-width='1'/><polygon points='4,38 14,38 9,24' fill='%234a7c59' stroke='%232c4a36' stroke-width='0.8'/><polygon points='46,38 56,38 51,24' fill='%234a7c59' stroke='%232c4a36' stroke-width='0.8'/><polygon points='14,38 22,38 18,28' fill='%234a7c59' stroke='%232c4a36' stroke-width='0.8'/><polygon points='38,38 46,38 42,28' fill='%234a7c59' stroke='%232c4a36' stroke-width='0.8'/><rect x='4' y='38' width='52' height='62' fill='%23e8d4a8' stroke='%237a5e30' stroke-width='1.2'/><g fill='%232d3b56'><rect x='8' y='44' width='3' height='5'/><rect x='14' y='44' width='3' height='5'/><rect x='20' y='44' width='3' height='5'/><rect x='26' y='44' width='3' height='5'/><rect x='32' y='44' width='3' height='5'/><rect x='38' y='44' width='3' height='5'/><rect x='44' y='44' width='3' height='5'/><rect x='50' y='44' width='3' height='5'/><rect x='8' y='56' width='3' height='5'/><rect x='14' y='56' width='3' height='5'/><rect x='20' y='56' width='3' height='5'/><rect x='26' y='56' width='3' height='5'/><rect x='32' y='56' width='3' height='5'/><rect x='38' y='56' width='3' height='5'/><rect x='44' y='56' width='3' height='5'/><rect x='50' y='56' width='3' height='5'/><rect x='8' y='68' width='3' height='5'/><rect x='14' y='68' width='3' height='5'/><rect x='20' y='68' width='3' height='5'/><rect x='26' y='68' width='3' height='5'/><rect x='32' y='68' width='3' height='5'/><rect x='38' y='68' width='3' height='5'/><rect x='44' y='68' width='3' height='5'/><rect x='50' y='68' width='3' height='5'/></g><line x1='4' y1='80' x2='56' y2='80' stroke='%237a5e30' stroke-width='0.5'/><path d='M 25 100 L 25 88 Q 30 80 35 88 L 35 100 Z' fill='%235a3010'/></svg>") !important;
}

/* Notre-Dame Basilica (Montreal) — twin Gothic spires */
.tower--notre .tower__body {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><line x1='13' y1='4' x2='13' y2='10' stroke='%23553' stroke-width='1'/><polygon points='6,30 13,8 20,30' fill='%23dad6c5' stroke='%237a7060' stroke-width='1'/><line x1='47' y1='4' x2='47' y2='10' stroke='%23553' stroke-width='1'/><polygon points='40,30 47,8 54,30' fill='%23dad6c5' stroke='%237a7060' stroke-width='1'/><rect x='6' y='30' width='14' height='70' fill='%23dad6c5' stroke='%237a7060' stroke-width='1'/><rect x='40' y='30' width='14' height='70' fill='%23dad6c5' stroke='%237a7060' stroke-width='1'/><rect x='20' y='40' width='20' height='60' fill='%23c4baa0' stroke='%237a7060' stroke-width='1.2'/><polygon points='18,40 42,40 30,28' fill='%23a89580' stroke='%237a7060' stroke-width='0.8'/><circle cx='30' cy='52' r='6' fill='%232d3b56' stroke='%23443' stroke-width='1'/><circle cx='30' cy='52' r='2' fill='%23ffd54f'/><line x1='24' y1='52' x2='36' y2='52' stroke='%23443' stroke-width='0.6'/><line x1='30' y1='46' x2='30' y2='58' stroke='%23443' stroke-width='0.6'/><path d='M9,42 Q9,38 13,38 Q17,38 17,42 L17,52 L9,52 Z' fill='%232d3b56'/><path d='M43,42 Q43,38 47,38 Q51,38 51,42 L51,52 L43,52 Z' fill='%232d3b56'/><path d='M9,60 Q9,56 13,56 Q17,56 17,60 L17,72 L9,72 Z' fill='%232d3b56'/><path d='M43,60 Q43,56 47,56 Q51,56 51,60 L51,72 L43,72 Z' fill='%232d3b56'/><path d='M22,68 Q22,64 26,64 Q30,64 30,68 L30,80 L22,80 Z' fill='%232d3b56'/><path d='M30,68 Q30,64 34,64 Q38,64 38,68 L38,80 L30,80 Z' fill='%232d3b56'/><path d='M 24 100 L 24 86 Q 30 78 36 86 L 36 100 Z' fill='%235a3010'/></svg>") !important;
}

/* CKSTEM Tower — palatial gold tower with central dome, side spires, and rose window */
.tower--ckstem .tower__body {
  background-color: transparent !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100' preserveAspectRatio='xMidYEnd meet'><defs><linearGradient id='gold' x1='0' x2='1' y1='0' y2='0'><stop offset='0' stop-color='%23bf8f00'/><stop offset='0.5' stop-color='%23ffd54f'/><stop offset='1' stop-color='%23bf8f00'/></linearGradient><radialGradient id='dome' cx='0.5' cy='0.5' r='0.5'><stop offset='0' stop-color='%23fff9c4'/><stop offset='1' stop-color='%23bf8f00'/></radialGradient></defs><line x1='8' y1='4' x2='8' y2='14' stroke='%23553' stroke-width='0.8'/><polygon points='4,28 12,8 20,28' fill='url(%23gold)' stroke='%23a37800' stroke-width='1'/><line x1='52' y1='4' x2='52' y2='14' stroke='%23553' stroke-width='0.8'/><polygon points='44,28 52,8 60,28' fill='url(%23gold)' stroke='%23a37800' stroke-width='1'/><rect x='4' y='28' width='16' height='72' fill='url(%23gold)' stroke='%23a37800' stroke-width='1'/><rect x='44' y='28' width='16' height='72' fill='url(%23gold)' stroke='%23a37800' stroke-width='1'/><line x1='30' y1='1' x2='30' y2='8' stroke='%23553' stroke-width='1.2'/><polygon points='27,8 30,3 33,8' fill='%23c0392b'/><circle cx='30' cy='14' r='5' fill='url(%23dome)' stroke='%23a37800' stroke-width='1'/><polygon points='25,18 35,18 30,14' fill='url(%23gold)'/><rect x='20' y='18' width='20' height='82' fill='url(%23gold)' stroke='%23a37800' stroke-width='1.2'/><circle cx='30' cy='40' r='9' fill='%237a4cff' stroke='%23a37800' stroke-width='1.4'/><circle cx='30' cy='40' r='7.6' fill='%23fff' stroke='%23a37800' stroke-width='0.6'/><g fill='%23a37800'><rect x='6' y='35' width='3' height='6'/><rect x='15' y='35' width='3' height='6'/><rect x='6' y='50' width='3' height='6'/><rect x='15' y='50' width='3' height='6'/><rect x='6' y='65' width='3' height='6'/><rect x='15' y='65' width='3' height='6'/><rect x='46' y='35' width='3' height='6'/><rect x='55' y='35' width='3' height='6'/><rect x='46' y='50' width='3' height='6'/><rect x='55' y='50' width='3' height='6'/><rect x='46' y='65' width='3' height='6'/><rect x='55' y='65' width='3' height='6'/></g><polygon points='22,60 38,60 30,52' fill='%23a37800'/><rect x='22' y='60' width='16' height='30' fill='%23a37800' stroke='%23553' stroke-width='0.5'/><g fill='%23ffd54f'><rect x='24' y='65' width='4' height='5'/><rect x='32' y='65' width='4' height='5'/><rect x='24' y='75' width='4' height='5'/><rect x='32' y='75' width='4' height='5'/></g><path d='M 25 100 L 25 88 Q 30 78 35 88 L 35 100 Z' fill='%23a37800'/><circle cx='30' cy='90' r='1' fill='%23ffd54f'/></svg>") !important;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: contain;
  border: none !important;
  box-shadow: none !important;
  overflow: visible;
}
.tower--ckstem .tower__body::before,
.tower--ckstem .tower__body::after { display: none !important; }

/* CKSTEM round-logo medallion sits over the rose-window slot in the SVG.
   Body becomes positioning context; logo is centered horizontally and
   placed at ~40% from the top (matches the SVG circle at cy=40 in 0..100). */
.tower--ckstem .tower__body { position: relative; }
.tower__rose-logo {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  /* subtle glow ring */
  box-shadow: 0 0 0 1.5px #a37800,
              0 0 8px 1px rgba(255, 213, 79, 0.55);
}