/* Sign-in art: "The Tower to the Moon". Fixed-size stage; motion is transform/opacity only (driven by tower-art.js). */
.login .tower-stage { position: relative; height: clamp(220px, 34vh, 290px); flex: none; width: 100%; max-width: 460px; }
.ta-scene { position: absolute; inset: 0; }

/* Moon: the one accent. Crescent from an inset shadow; soft glow behind it. */
.ta-moon { position: absolute; top: 6px; width: 38px; height: 38px; }
.ta-moon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 10px -5px 0 0 #ffeca9; transform: rotate(-18deg); }
.ta-glow { position: absolute; top: -35px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 236, 169, .15), rgba(255, 236, 169, .06) 45%, rgba(255, 236, 169, .015) 75%, rgba(255, 236, 169, 0)); opacity: .55; pointer-events: none; }

/* Stars: static, barely there. */
.ta-star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #c9d2ff; }

/* Ground + podium */
.ta-ground { position: absolute; left: 0; right: 0; bottom: 34px; height: 1px; background: linear-gradient(90deg, rgba(157, 176, 255, 0), rgba(157, 176, 255, .22) 18%, rgba(157, 176, 255, .22) 70%, rgba(157, 176, 255, 0)); }
.ta-podium { position: absolute; bottom: 35px; height: 7px; border-radius: 2px 2px 0 0; background: #1c2346; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Floors */
.ta-floor { position: absolute; height: 14px; border-radius: 2px; display: flex; align-items: center; justify-content: space-evenly; padding: 0 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); opacity: 0; will-change: transform, opacity; }
.ta-win { width: 3px; height: 4px; border-radius: 1px; background: rgba(10, 14, 34, .45); }
.ta-win.on { background: #ffeca9; opacity: .78; }
.ta-antenna { position: absolute; width: 1px; height: 18px; background: linear-gradient(#9db0ff, rgba(157, 176, 255, .2)); transform-origin: 50% 100%; opacity: 0; }
.ta-antenna::before { content: ""; position: absolute; left: -1.5px; top: -3px; width: 4px; height: 4px; border-radius: 50%; background: #ffeca9; }

/* Label chip that follows the build head */
.ta-chip { position: absolute; left: 0; bottom: 0; display: flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 7px; border-radius: 99px; background: rgba(23, 29, 58, .92); border: 1px solid rgba(157, 176, 255, .16); color: #c7cee6; font-size: 11.5px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; will-change: transform, opacity; }
.ta-chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #ffeca9; }
.ta-chip b { color: #fff; font-weight: 600; }
.ta-chip .ta-chip-t { display: inline-block; }
.ta-lead { position: absolute; left: 0; bottom: 0; height: 1px; width: 12px; background: rgba(157, 176, 255, .28); transform-origin: 0 50%; opacity: 0; }

/* Counter plaque under the ground line */
.ta-count { position: absolute; left: 0; bottom: 0; display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: #6c7390; font-variant-numeric: tabular-nums; }
.ta-count b { color: #fff; font-size: 15px; margin-right: 1px; font-weight: 700; letter-spacing: -.01em; }
.ta-count .ta-sep { width: 3px; height: 3px; border-radius: 50%; background: #3a4266; align-self: center; }

@media (prefers-reduced-motion: reduce) {
  .ta-floor, .ta-antenna { opacity: 1; will-change: auto; }
  .ta-chip, .ta-lead { display: none; }
}