:root {
  --color-bg: #B8D8E8;
  --color-grass: #8BC34A;
  --color-grass-light: #A8D965;
  --color-grass-dark: #6B9A30;
  --color-path: #E8C864;
  --color-path-light: #F2DD8A;
  --color-path-dark: #C4A642;
}
@keyframes spirit-float {
  0% {
    transform: translateX(-50%) translateY(0) scale(1, 1);
  }
  50% {
    transform: translateX(-50%) translateY(-4px) scale(1.02, 0.98);
  }
  100% {
    transform: translateX(-50%) translateY(0) scale(1, 1);
  }
}
@keyframes health-critical-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes spirit-flicker {
  0%,
  100% {
    opacity: 0.6;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.4;
  }
}
@keyframes mana-rotate {
  from {
    transform: translateX(-50%) rotate(0deg);
  }
  to {
    transform: translateX(-50%) rotate(360deg);
  }
}
@keyframes jade-sweep {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes enrage-pulse {
  0%,
  100% {
    filter: hue-rotate(0deg) brightness(1.2);
  }
  50% {
    filter: hue-rotate(15deg) brightness(1.5);
  }
}
@keyframes damage-number-float {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(0.8);
  }
  20% {
    opacity: 1;
    transform: translateX(-50%) translateY(-8px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-35px) scale(0.9);
  }
}
@keyframes death-burst-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--burst-x, 20px), var(--burst-y, -20px)) scale(0.3);
  }
}
@keyframes shake-light {
  0%,
  100% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(-2px, 1px);
  }
  30% {
    transform: translate(2px, -1px);
  }
  45% {
    transform: translate(-1px, 2px);
  }
  60% {
    transform: translate(1px, -1px);
  }
  75% {
    transform: translate(-1px, 0);
  }
}
@keyframes shake-heavy {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-4px, 2px);
  }
  20% {
    transform: translate(4px, -3px);
  }
  30% {
    transform: translate(-3px, 4px);
  }
  40% {
    transform: translate(3px, -2px);
  }
  50% {
    transform: translate(-2px, 3px);
  }
  60% {
    transform: translate(2px, -2px);
  }
  70% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(1px, -1px);
  }
}
@keyframes arrow-turret-recoil {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  30% {
    transform: translateX(-50%) translateY(3px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes cannon-barrel-kickback {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  20% {
    transform: translateX(-50%) translateY(6px) scaleY(0.92);
  }
  100% {
    transform: translateX(-50%) translateY(0) scaleY(1);
  }
}
@keyframes ice-crystal-pulse {
  0% {
    filter: brightness(1) drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
  }
  30% {
    filter: brightness(1.6) drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614) drop-shadow(0 0 8px #1E90FF);
  }
  100% {
    filter: brightness(1) drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
  }
}
@keyframes magic-orb-flare {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 4px 4px 0 #1A1614, 0 0 8px rgba(155, 123, 184, 0.5);
  }
  30% {
    transform: translateX(-50%) scale(1.3);
    box-shadow: 4px 4px 0 #1A1614, 0 0 20px #9B7BB8, 0 0 40px rgba(155, 123, 184, 0.4);
  }
  100% {
    transform: translateX(-50%) scale(1);
    box-shadow: 4px 4px 0 #1A1614, 0 0 8px rgba(155, 123, 184, 0.5);
  }
}
@keyframes tesla-coil-discharge {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
    box-shadow: 0 0 10px #708090;
  }
  20% {
    transform: translateX(-50%) scale(1.4);
    opacity: 1;
    box-shadow: 0 0 25px #708090, 0 0 50px rgba(112, 128, 144, 0.5);
  }
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
    box-shadow: 0 0 10px #708090;
  }
}
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(from 0deg, #2D8A8A 0deg 15deg, #3cb8b8 15deg 30deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 100000;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  overflow: hidden;
}
.loading-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 248, 240, 0.15) 3px, transparent 3px);
  background-size: 12px 12px;
  background-position: 0 0;
  pointer-events: none;
}
.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}
.loading-bg::before {
  content: 'Kia Ora!';
  position: absolute;
  top: 15%;
  left: 5%;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2.2rem;
  color: #F2D864;
  -webkit-text-stroke: 3px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  transform: rotate(-15deg);
  animation: float-decoration 3s ease-in-out infinite;
}
.loading-bg::after {
  content: 'Haere Mai!';
  position: absolute;
  bottom: 20%;
  right: 5%;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2.2rem;
  color: #3CB371;
  -webkit-text-stroke: 3px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  transform: rotate(10deg);
  animation: float-decoration 3s ease-in-out infinite reverse;
}
@keyframes float-decoration {
  0%,
  100% {
    transform: rotate(-15deg) translateY(0);
  }
  50% {
    transform: rotate(-15deg) translateY(-15px);
  }
}
.loading-logo {
  width: 120px;
  height: 120px;
  z-index: 2;
  filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.5));
  animation: logo-float 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes logo-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
.loading-title-area {
  text-align: center;
  margin-bottom: 10px;
  z-index: 2;
}
.loading-game-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 5rem;
  color: #F2D864;
  -webkit-text-stroke: 4px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  margin: 0;
  line-height: 1;
  animation: title-wobble 2s infinite ease-in-out;
  letter-spacing: 4px;
}
.loading-subtitle {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  color: #FFF8F0;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  margin: 8px 0 0 0;
  letter-spacing: 2px;
}
@keyframes title-wobble {
  0%,
  100% {
    transform: rotate(-2deg) scale(1);
  }
  50% {
    transform: rotate(1deg) scale(1.02);
  }
}
.loading-text {
  display: none;
}
.loading-screen::after {
  display: none;
}
.loading-dots {
  display: flex;
  gap: 15px;
  margin: 15px 0;
  z-index: 2;
}
.ready .loading-dots {
  display: none;
}
.loading-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #1A1614;
  animation: dot-bounce 1s ease-in-out infinite;
}
.loading-dot:nth-child(1) {
  background: #E8635A;
  animation-delay: 0s;
}
.loading-dot:nth-child(2) {
  background: #F2D864;
  animation-delay: 0.2s;
}
.loading-dot:nth-child(3) {
  background: #5EA65E;
  animation-delay: 0.4s;
}
@keyframes dot-bounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-15px) scale(1.2);
  }
}
.loading-progress {
  width: 300px;
  height: 25px;
  background: #FFF8F0;
  border: 3px solid #1A1614;
  box-shadow: 4px 4px 0 #1A1614;
  overflow: hidden;
  position: relative;
  z-index: 2;
}
.ready .loading-progress {
  display: none;
}
.loading-progress-fill {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(45deg, #5EA65E 0px, #5EA65E 10px, #8fc18f 10px, #8fc18f 20px);
  animation: progress-fill 2s ease-out forwards;
  position: relative;
}
.loading-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, transparent 100%);
}
@keyframes progress-fill {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.loading-main-row {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  z-index: 2;
  opacity: 0;
  animation: button-appear 0.5s ease forwards;
  animation-delay: 2s;
}
.ready .loading-main-row {
  opacity: 1;
  animation: none;
}
.difficulty-dropdown {
  position: relative;
  z-index: 10;
}
.difficulty-toggle {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.2rem;
  padding: 10px 20px;
  background: #FFF8F0;
  color: #1A1614;
  border: none;
  border: 3px solid #1A1614;
  box-shadow: 4px 4px 0 #1A1614;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.1s;
}
.difficulty-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1A1614;
}
.difficulty-toggle .dropdown-arrow {
  font-size: 0.8em;
  transition: transform 0.2s;
}
.difficulty-toggle.open .dropdown-arrow {
  transform: rotate(180deg);
}
.difficulty-options {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  margin-bottom: 5px;
  background: #FFF8F0;
  border: 2px solid #1A1614;
  box-shadow: 3px -3px 0 #1A1614;
  border-radius: 4px;
  overflow: hidden;
}
.difficulty-options.hidden {
  display: none;
}
.difficulty-options button {
  display: block;
  width: 100%;
  padding: 10px 15px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  background: #FFF8F0;
  color: #1A1614;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}
.difficulty-options button:hover {
  background: rgba(45, 138, 138, 0.2);
}
.difficulty-options button.selected {
  background: #F2D864;
}
.difficulty-options button[data-difficulty="hard"].selected {
  background: #D4738A;
  color: #FFF8F0;
}
.difficulty-options button[data-difficulty="expert"].selected {
  background: #E8635A;
  color: #FFF8F0;
}
.difficulty-options button small {
  display: block;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 0.75rem;
  opacity: 0.7;
  margin-top: 2px;
}
.loading-start {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  padding: 15px 50px;
  border: none;
  background: #F2D864;
  color: #1A1614;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  z-index: 2;
  border: 3px solid #1A1614;
  box-shadow: 8px 8px 0 #1A1614;
  transition: all 0.1s;
}
.loading-start:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 #1A1614;
  background: #f6e493;
}
.loading-start:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 #1A1614;
}
.ready .loading-start {
  animation: button-pulse 1s ease-in-out infinite;
}
@keyframes button-appear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes button-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}
.more-options-container {
  position: relative;
  margin-top: 15px;
  z-index: 5;
  opacity: 0;
  animation: button-appear 0.5s ease forwards;
  animation-delay: 2.2s;
}
.ready .more-options-container {
  opacity: 1;
  animation: none;
}
.more-options-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  padding: 8px 20px;
  background: rgba(26, 22, 20, 0.7);
  color: #FFF8F0;
  border: 2px solid rgba(255, 248, 240, 0.4);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.more-options-btn .menu-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.more-options-btn:hover {
  background: rgba(26, 22, 20, 0.85);
  border-color: #2D8A8A;
  transform: translateY(-2px);
}
.more-options-btn.open {
  background: #1A1614;
  border-color: #2D8A8A;
}
.more-options-menu {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 8px;
  background: #1A1614;
  border: 2px solid #2D8A8A;
  border-radius: 6px;
  overflow: hidden;
  min-width: 180px;
}
.more-options-menu.hidden {
  display: none;
}
.more-options-menu button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 18px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.95rem;
  background: transparent;
  color: #FFF8F0;
  border: none;
  border-bottom: 1px solid rgba(255, 248, 240, 0.15);
  cursor: pointer;
  text-align: left;
  transition: all 0.1s;
}
.more-options-menu button:last-child {
  border-bottom: none;
}
.more-options-menu button:hover {
  background: rgba(45, 138, 138, 0.3);
}
.more-options-menu button.hidden {
  display: none;
}
.more-options-menu button .menu-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dev-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 22, 20, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100001;
  backdrop-filter: blur(4px);
}
.dev-modal.hidden {
  display: none;
}
.dev-modal-content {
  background: linear-gradient(135deg, #1a2a3a 0%, #1A1614 100%);
  border: 3px solid #2D8A8A;
  border-radius: 12px;
  padding: 30px;
  width: 380px;
  max-width: 90vw;
  position: relative;
  box-shadow: 8px 8px 0 #1A1614;
  animation: modal-appear 0.3s ease;
}
@keyframes modal-appear {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.dev-modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  color: rgba(255, 248, 240, 0.6);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.dev-modal-close:hover {
  color: #FFF8F0;
}
.dev-modal-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 248, 240, 0.15);
}
.dev-modal-logo {
  width: 60px;
  height: 60px;
  filter: invert(1);
  transition: transform 0.3s;
}
.dev-modal-logo:hover {
  transform: rotate(-5deg) scale(1.05);
}
.dev-modal-title h2 {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.8rem;
  color: #F2D864;
  margin: 0;
  letter-spacing: 1px;
}
.dev-modal-title p {
  font-family: 'Comic Neue', cursive;
  font-size: 0.9rem;
  color: #2D8A8A;
  margin: 4px 0 0 0;
}
.dev-modal-body {
  text-align: center;
}
.dev-modal-cta {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.1rem;
  color: #FFF8F0;
  margin: 0 0 10px 0;
}
.dev-modal-desc {
  font-family: 'Comic Neue', cursive;
  font-size: 0.85rem;
  color: rgba(255, 248, 240, 0.7);
  margin: 0 0 20px 0;
  line-height: 1.5;
}
.dev-modal-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dev-modal-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  color: #FFF8F0;
  background: rgba(255, 248, 240, 0.1);
  border: 2px solid rgba(255, 248, 240, 0.2);
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.15s;
}
.dev-modal-link svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.dev-modal-link:hover {
  background: rgba(45, 138, 138, 0.2);
  border-color: #2D8A8A;
  transform: translateY(-2px);
}
.dev-modal-link.dev-modal-link-primary {
  background: #2D8A8A;
  border-color: #2D8A8A;
  color: #FFF8F0;
}
.dev-modal-link.dev-modal-link-primary:hover {
  background: #3ab0b0;
  border-color: #3ab0b0;
}
@media (max-width: 400px) {
  .dev-modal-content {
    padding: 20px;
  }
  .dev-modal-header {
    flex-direction: column;
    text-align: center;
  }
  .dev-modal-logo {
    width: 50px;
    height: 50px;
  }
  .dev-modal-title h2 {
    font-size: 1.5rem;
  }
}
.difficulty-select {
  display: none;
}
.difficulty-label {
  display: none;
}
.difficulty-btn {
  display: none;
}
.start-menu-row {
  display: none;
}
.start-menu-btn {
  display: none;
}
@media (max-width: 600px) {
  .loading-logo {
    width: 90px;
    height: 90px;
  }
  .loading-game-title {
    font-size: 3.5rem;
  }
  .loading-subtitle {
    font-size: 1.2rem;
  }
  .loading-start {
    font-size: 1.5rem;
    padding: 12px 35px;
  }
  .loading-progress {
    width: 250px;
  }
  .loading-bg::before,
  .loading-bg::after {
    font-size: 1.5rem;
  }
  .loading-main-row {
    flex-direction: column;
    gap: 10px;
  }
}
@media (max-width: 400px) {
  .loading-logo {
    width: 70px;
    height: 70px;
  }
  .loading-game-title {
    font-size: 2.5rem;
  }
  .loading-subtitle {
    font-size: 1rem;
  }
  .loading-bg::before,
  .loading-bg::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loading-logo,
  .loading-dot,
  .loading-game-title {
    animation: none !important;
  }
  .loading-start {
    animation: none !important;
  }
  .loading-progress-fill {
    animation: none !important;
    width: 100%;
  }
  .loading-main-row,
  .more-options-container {
    opacity: 1;
    animation: none !important;
  }
}
.start-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-conic-gradient(from 0deg, #2D8A8A 0deg 15deg, #3ab0b0 15deg 30deg);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 1000;
}
.start-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 248, 240, 0.3) 3px, transparent 3px);
  background-size: 12px 12px;
  background-position: 0 0;
  pointer-events: none;
}
.start-screen.hidden {
  display: none;
}
.title-container {
  text-align: center;
  margin-bottom: 50px;
  z-index: 1;
  transform: rotate(-3deg);
}
.game-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 6rem;
  color: #F2D864;
  margin: 0;
  line-height: 1;
  text-transform: uppercase;
  -webkit-text-stroke: 4px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  box-shadow: 10px 10px 0 #1A1614;
  animation: title-wobble 2s infinite ease-in-out;
}
@keyframes title-wobble {
  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.05) rotate(2deg);
  }
}
.subtitle {
  font-family: 'Comic Neue', cursive;
  font-size: 2rem;
  color: #FFF8F0;
  background: #D4738A;
  padding: 5px 15px;
  margin-top: 15px;
  display: inline-block;
  transform: rotate(2deg);
  border: 3px solid #1A1614;
  box-shadow: 5px 5px 0 #1A1614;
}
.start-btn,
.restart-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  padding: 15px 50px;
  border: none;
  background: #F2D864;
  color: #1A1614;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
  border: 3px solid #1A1614;
  box-shadow: 8px 8px 0 #1A1614;
  transition: all 0.1s;
}
.start-btn:hover,
.restart-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 10px 10px 0 #1A1614;
}
.start-btn:active,
.restart-btn:active {
  transform: translate(4px, 4px);
  box-shadow: 2px 2px 0 #1A1614;
}
.game-over-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 22, 20, 0.85);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.game-over-screen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(rgba(255, 248, 240, 0.08) 3px, transparent 3px);
  background-size: 12px 12px;
  background-position: 0 0;
  pointer-events: none;
}
.game-over-screen.hidden {
  display: none;
}
.game-over-logo {
  width: 80px;
  height: 80px;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, 0.5));
  z-index: 1;
  margin-bottom: 10px;
}
.game-over-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 5rem;
  color: #F2D864;
  margin: 0 0 20px;
  -webkit-text-stroke: 4px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  transform: rotate(-3deg);
  z-index: 1;
}
.final-score {
  font-family: 'Comic Neue', cursive;
  font-size: 2rem;
  color: #FFF8F0;
  background: #D4738A;
  padding: 10px 30px;
  margin-bottom: 30px;
  border: 3px solid #1A1614;
  box-shadow: 5px 5px 0 #1A1614;
  transform: rotate(1deg);
  z-index: 1;
}
.instructions {
  margin-top: 40px;
  position: relative;
  z-index: 1;
  background: #FFF8F0;
  padding: 20px;
  border: 3px solid #1A1614;
  box-shadow: 8px 8px 0 #1A1614;
  transform: rotate(1deg);
}
.instructions p {
  margin: 5px 0;
  font-family: 'Comic Neue', cursive;
  font-size: 1.2rem;
  color: #1A1614;
}
.game-ui {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}
.game-ui.hidden {
  display: none;
}
.top-bar {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  height: auto;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4px 20px;
  pointer-events: auto;
}
.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 1.1rem;
  color: #FFF8F0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.5);
}
.stat .stat-value {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.4rem;
  color: #F2D864;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.4);
}
.stat .stat-value.changed {
  animation: pop-scale 0.2s;
}
@keyframes pop-scale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
    color: #E8635A;
  }
  100% {
    transform: scale(1);
  }
}
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.stat-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.shop-panel {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(1deg);
  background: #FFF8F0;
  padding: 15px;
  border: 3px solid #1A1614;
  box-shadow: 5px 5px 0 #1A1614;
  pointer-events: auto;
}
.shop-panel .shop-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 10px;
  background: #2D8A8A;
  color: #1A1614;
  border: 2px solid #1A1614;
  transform: rotate(-2deg);
}
.tower-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tower-option {
  display: flex;
  align-items: center;
  padding: 8px;
  background: #eee;
  border: 2px solid #1A1614;
  cursor: pointer;
  transition: all 0.1s;
}
.tower-option:hover:not(.disabled) {
  background: #F2D864;
  transform: translateX(-5px);
  box-shadow: 5px 5px 0 #1A1614;
}
.tower-option.selected {
  background: #F2D864;
  box-shadow: inset 3px 3px 0 rgba(0, 0, 0, 0.1);
}
.tower-option.disabled {
  opacity: 0.5;
  background: #ccc;
  cursor: not-allowed;
}
.tower-preview {
  width: 40px;
  height: 40px;
  border: 2px solid #1A1614;
  margin-right: 10px;
  background: #FFF8F0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.tower-arrow-preview {
  background: #8B4513;
  position: relative;
}
.tower-arrow-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 20 C5 14 10 10 14 10' fill='none' stroke='%231A1614' stroke-width='2.5' stroke-linecap='round'/%3E%3Cpath d='M2 20 C5 17 6 14 10 14' fill='none' stroke='%231A1614' stroke-width='2.5' stroke-linecap='round'/%3E%3Cline x1='6' y1='10' x2='22' y2='2' stroke='%231A1614' stroke-width='2' stroke-linecap='round'/%3E%3Cpolygon points='22,2 16,3 17.5,0.5' fill='%231A1614'/%3E%3Cline x1='6.5' y1='10.5' x2='4' y2='13' stroke='%231A1614' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tower-cannon-preview {
  background: #3CB371;
  position: relative;
}
.tower-cannon-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='14' r='7' fill='%231A1614' stroke='%23FFF8F0' stroke-width='1'/%3E%3Ccircle cx='12' cy='14' r='4.5' fill='%234A4A4A' stroke='%23FFF8F0' stroke-width='0.5'/%3E%3Cellipse cx='10' cy='12' rx='2' ry='2.5' fill='rgba(255,255,255,0.15)' transform='rotate(-20 10 12)'/%3E%3Cline x1='12' y1='6' x2='12' y2='3' stroke='%23F2D864' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='2.5' r='1.5' fill='%23E8635A'/%3E%3Ccircle cx='12' cy='2' r='0.8' fill='%23F2D864'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tower-ice-preview {
  background: #1E90FF;
  position: relative;
}
.tower-ice-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cline x1='12' y1='2' x2='12' y2='22' stroke='%23FFF8F0' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='21' y2='17' stroke='%23FFF8F0' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='3' y1='17' x2='21' y2='7' stroke='%23FFF8F0' stroke-width='2' stroke-linecap='round'/%3E%3Cline x1='12' y1='2' x2='9' y2='5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='2' x2='15' y2='5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='22' x2='9' y2='19' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='22' x2='15' y2='19' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='5' y2='10' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='7' x2='6' y2='5.5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='17' x2='19' y2='14' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='17' x2='18' y2='18.5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='17' x2='6' y2='18.5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='3' y1='17' x2='5' y2='14' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='7' x2='18' y2='5.5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='21' y1='7' x2='19' y2='10' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='%23FFF8F0' opacity='0.5'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tower-magic-preview {
  background: #4B0082;
  position: relative;
}
.tower-magic-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CradialGradient id='orb' cx='40%25' cy='40%25'%3E%3Cstop offset='0%25' stop-color='%23FFF8F0'/%3E%3Cstop offset='50%25' stop-color='%23D4A8E8'/%3E%3Cstop offset='100%25' stop-color='%239B59B6'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='6' fill='url(%23orb)' stroke='%23FFF8F0' stroke-width='1'/%3E%3Cline x1='12' y1='2' x2='12' y2='5' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='12' y1='19' x2='12' y2='22' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='2' y1='12' x2='5' y2='12' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='19' y1='12' x2='22' y2='12' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='5' y1='5' x2='7' y2='7' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='17' y1='17' x2='19' y2='19' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='19' y1='5' x2='17' y2='7' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='5' y1='19' x2='7' y2='17' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tower-info {
  flex: 1;
}
.tower-info .tower-name {
  display: block;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
}
.tower-info .tower-cost {
  display: block;
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  color: #4a874a;
}
.wave-control {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}
.wave-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  padding: 10px 40px;
  background: #5EA65E;
  color: #FFF8F0;
  border: none;
  border: 3px solid #1A1614;
  box-shadow: 8px 8px 0 #1A1614;
  cursor: pointer;
}
.wave-btn:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: 6px 6px 0 #1A1614;
}
.tower-tooltip {
  position: absolute;
  right: 110%;
  top: 0;
  min-width: 150px;
  background: #FFF8F0;
  padding: 10px;
  border: 3px solid #1A1614;
  box-shadow: 4px 4px 0 #1A1614;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.1s;
}
.tower-tooltip .tooltip-name {
  font-family: 'Bangers', 'Impact', cursive;
  border-bottom: 2px solid #1A1614;
}
.tower-tooltip .tooltip-stats {
  font-family: 'Comic Neue', cursive;
  font-size: 0.9rem;
}
.tower-tooltip .tooltip-desc {
  font-style: italic;
  font-size: 0.8rem;
}
.tower-option:hover .tower-tooltip {
  opacity: 1;
}
.game-message {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  padding: 12px 30px;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  color: #FFF8F0;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  z-index: 2000;
  opacity: 0;
  transition: opacity 0.2s;
}
.game-message.show {
  opacity: 1;
  animation: message-pop 0.3s ease-out;
}
@keyframes message-pop {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
.floating-number {
  position: absolute;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  pointer-events: none;
  z-index: 500;
  animation: float-up 1s forwards;
}
.floating-number.gold-gain {
  color: #F2D864;
}
.floating-number.gold-gain::before {
  content: '+';
}
.floating-number.gold-loss {
  color: #E8635A;
}
.floating-number.gold-loss::before {
  content: '-';
}
.floating-number.damage {
  color: #FFF8F0;
  font-size: 1.2rem;
}
@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50px) scale(1.5);
    opacity: 0;
  }
}
.tech-control {
  position: absolute;
  bottom: 30px;
  left: 20px;
  pointer-events: auto;
}
.tech-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.2rem;
  padding: 10px 20px;
  background: #2D8A8A;
  color: #1A1614;
  border: none;
  border: 3px solid #1A1614;
  box-shadow: 5px 5px 0 #1A1614;
  cursor: pointer;
}
.tech-btn:hover {
  transform: translateY(-3px);
}
.tech-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tech-modal.hidden {
  display: none;
}
.tech-content {
  background: #1A1614;
  padding: 30px;
  width: 600px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
  border: 3px solid #2D8A8A;
  border-radius: 8px;
  position: relative;
  box-shadow: 8px 8px 0 #1A1614;
  text-align: center;
  box-sizing: border-box;
}
.tech-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 3rem;
  margin: 0 0 20px;
  color: #F2D864;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.tech-stats {
  display: flex;
  justify-content: space-around;
  font-family: 'Comic Neue', cursive;
  font-size: 1.5rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: #FFF8F0;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}
.tech-card {
  background: #2A2420;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.tech-card:hover {
  transform: scale(1.05);
  background: #473d36;
  border-color: #2D8A8A;
}
.tech-card.maxed {
  background: #5EA65E;
  cursor: default;
}
.tech-card.unavailable {
  opacity: 0.6;
  background: #1A1614;
}
.tech-card h3 {
  font-family: 'Bangers', 'Impact', cursive;
  margin: 5px 0;
  color: #F2D864;
}
.tech-card p {
  font-size: 0.9rem;
  margin: 5px 0;
  font-family: 'Comic Neue', cursive;
  color: #888;
}
.tech-card .tech-cost {
  font-weight: bold;
  color: #E8635A;
}
.close-tech-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.close-tech-btn:hover {
  color: #FFF8F0;
}
.tower-tesla-preview {
  background: #708090;
  position: relative;
}
.tower-tesla-preview::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='20' rx='6' ry='2' fill='%231A1614' opacity='0.3'/%3E%3Crect x='10' y='10' width='4' height='12' rx='2' fill='%231A1614'/%3E%3Crect x='9' y='6' width='6' height='6' rx='1' fill='%231A1614'/%3E%3Cellipse cx='12' cy='6' rx='5' ry='2' fill='%231A1614' stroke='%23FFF8F0' stroke-width='0.5'/%3E%3Cpath d='M6 4 Q8 2 12 1.5 Q16 2 18 4' fill='none' stroke='%23FFF8F0' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M4 5 Q3 3 5 1' fill='none' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3Cpath d='M20 5 Q21 3 19 1' fill='none' stroke='%23FFF8F0' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='3' r='0.8' fill='%23FFF8F0'/%3E%3Ccircle cx='16' cy='2.5' r='0.6' fill='%23FFF8F0'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.tower-flame-preview {
  background: #B22222;
  position: relative;
}
.tower-flame-preview::after {
  content: '';
  width: 14px;
  height: 18px;
  background: radial-gradient(ellipse at bottom, #FFF8E8 0%, #F2D864 30%, #E88A42 60%, #D4512A 100%);
  border-radius: 50% 50% 20% 50%;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
}
.announcement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1500;
  pointer-events: none;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.announcement-overlay.visible {
  opacity: 1;
}
.announcement-content {
  text-align: center;
  transform: scale(0.8);
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.visible .announcement-content {
  transform: scale(1);
}
.announcement-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 5rem;
  color: #F2D864;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
  -webkit-text-stroke: 5px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  animation: announcement-pulse 0.5s ease-out;
  transform: rotate(-3deg);
}
.announcement-subtitle {
  font-family: 'Comic Neue', cursive;
  font-size: 2rem;
  color: #FFF8F0;
  background: #D4738A;
  padding: 10px 30px;
  margin-top: 15px;
  display: inline-block;
  transform: rotate(2deg);
  border: 3px solid #1A1614;
  animation: announcement-slide 0.4s ease-out 0.1s backwards;
}
@keyframes announcement-pulse {
  0% {
    transform: rotate(-3deg) scale(0);
    opacity: 0;
  }
  60% {
    transform: rotate(-3deg) scale(1.2);
  }
  100% {
    transform: rotate(-3deg) scale(1);
    opacity: 1;
  }
}
@keyframes announcement-slide {
  0% {
    transform: rotate(2deg) translateY(30px);
    opacity: 0;
  }
  100% {
    transform: rotate(2deg) translateY(0);
    opacity: 1;
  }
}
.enemy-boss.shielded::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 4px solid #2D8A8A;
  border-radius: 50%;
  animation: shield-pulse 1s infinite;
  pointer-events: none;
}
.enemy-boss.enraged {
  filter: hue-rotate(-30deg) saturate(1.5);
  animation: boss-rage 0.2s infinite alternate !important;
}
.enemy-boss.enraged .enemy-body {
  background: #e2392d !important;
}
.enemy-boss.summoning::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(212, 115, 138, 0.6) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: summon-pulse 0.5s ease-out;
}
@keyframes shield-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes boss-rage {
  0% {
    transform: translate(-50%, -100%) rotateX(-55deg) translateX(-2px);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-55deg) translateX(2px);
  }
}
@keyframes summon-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.range-indicator {
  position: absolute;
  border-radius: 50%;
  border: 3px dashed rgba(45, 138, 138, 0.6);
  background: radial-gradient(circle, rgba(45, 138, 138, 0.1) 0%, transparent 70%);
  pointer-events: none;
  animation: range-fade-in 0.2s ease-out forwards;
}
.range-indicator.range-arrow {
  border-color: rgba(139, 69, 19, 0.6);
  background: radial-gradient(circle, rgba(139, 69, 19, 0.1) 0%, transparent 70%);
}
.range-indicator.range-cannon {
  border-color: rgba(60, 179, 113, 0.6);
  background: radial-gradient(circle, rgba(60, 179, 113, 0.1) 0%, transparent 70%);
}
.range-indicator.range-ice {
  border-color: rgba(30, 144, 255, 0.6);
  background: radial-gradient(circle, rgba(30, 144, 255, 0.1) 0%, transparent 70%);
}
.range-indicator.range-magic {
  border-color: rgba(75, 0, 130, 0.6);
  background: radial-gradient(circle, rgba(75, 0, 130, 0.1) 0%, transparent 70%);
}
.range-indicator.range-tesla {
  border-color: rgba(112, 128, 144, 0.6);
  background: radial-gradient(circle, rgba(112, 128, 144, 0.1) 0%, transparent 70%);
}
.range-indicator.range-flame {
  border-color: rgba(178, 34, 34, 0.6);
  background: radial-gradient(circle, rgba(178, 34, 34, 0.1) 0%, transparent 70%);
}
@keyframes range-fade-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.placement-range {
  animation: placement-pulse 1s infinite ease-in-out !important;
}
@keyframes placement-pulse {
  0%,
  100% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.9;
  }
}
body.blood-moon .scene {
  background: linear-gradient(to bottom, #4a0000 0%, #8b0000 50%, #2d0000 100%) !important;
  filter: sepia(0.3) hue-rotate(-20deg) saturate(1.5);
}
body.blood-moon .scene::before {
  background: repeating-conic-gradient(from 0deg, rgba(139, 0, 0, 0.3) 0deg 10deg, transparent 10deg 20deg);
}
body.blood-moon .sky-cycle {
  background: linear-gradient(to bottom, #4a0000 0%, #8b0000 50%, #2d0000 100%) !important;
}
.loot-drop {
  font-family: 'Bangers', 'Impact', cursive;
  pointer-events: none;
  white-space: nowrap;
  z-index: 1000;
}
@keyframes loot-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-40px) scale(1.2);
  }
}
.tower-prefix {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Comic Neue', cursive;
  font-size: 0.7rem;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 1px 1px 0 #1A1614;
  z-index: 10;
}
.tower.prefix-rare {
  filter: drop-shadow(0 0 3px #0088FF);
}
.tower.prefix-epic {
  filter: drop-shadow(0 0 5px #AA00FF);
}
.tower.prefix-legendary {
  filter: drop-shadow(0 0 8px #FF8800);
  animation: legendary-glow 2s infinite ease-in-out;
}
@keyframes legendary-glow {
  0%,
  100% {
    filter: drop-shadow(0 0 8px #FF8800);
  }
  50% {
    filter: drop-shadow(0 0 15px #FFAA00);
  }
}
.combo-display {
  position: fixed;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 1500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
}
.combo-display.active {
  opacity: 1;
}
.combo-count {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 4rem;
  color: #F2D864;
  -webkit-text-stroke: 4px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  animation: combo-pulse 0.3s ease-out;
}
.combo-label {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  color: #D4738A;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  margin-top: -10px;
}
.combo-bonus {
  font-family: 'Comic Neue', cursive;
  font-size: 1.2rem;
  color: #5EA65E;
  font-weight: bold;
  margin-top: 5px;
}
@keyframes combo-pulse {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.achievement-notification {
  position: fixed;
  top: 100px;
  right: -400px;
  display: flex;
  align-items: center;
  gap: 15px;
  background: #FFF8F0;
  padding: 15px 25px;
  border: 3px solid #1A1614;
  box-shadow: 6px 6px 0 #1A1614;
  z-index: 2000;
  transition: right 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.achievement-notification.show {
  right: 20px;
  animation: achievement-glow 1s ease-in-out 0.5s;
}
@keyframes achievement-glow {
  0%,
  100% {
    box-shadow: 4px 4px 0 #1A1614;
  }
  50% {
    box-shadow: 4px 4px 0 #1A1614, 0 0 20px rgba(242, 216, 100, 0.6);
  }
}
.achievement-icon {
  font-size: 2.5rem;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2D864;
  border: 2px solid #1A1614;
  border-radius: 50%;
}
.achievement-info {
  text-align: left;
}
.achievement-title {
  font-family: 'Comic Neue', cursive;
  font-size: 0.9rem;
  color: #1A1614;
}
.achievement-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  color: #D4738A;
}
.achievement-reward {
  font-family: 'Comic Neue', cursive;
  font-size: 1rem;
  color: #5EA65E;
  font-weight: bold;
}
.env-bar {
  position: absolute;
  top: 44px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  pointer-events: auto;
  z-index: 101;
}
.env-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  font-family: 'Comic Neue', cursive;
  font-size: 0.75rem;
  font-weight: bold;
  color: #FFF8F0;
  background: none;
  border: none;
  white-space: nowrap;
}
.env-pill.hidden {
  display: none;
}
.env-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.env-label {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.game-over-stats {
  z-index: 1;
  margin-bottom: 20px;
}
.game-over-stats.hidden {
  display: none;
}
.post-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 400px;
  margin: 0 auto;
}
.post-stat {
  background: rgba(255, 248, 240, 0.1);
  padding: 8px 12px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid rgba(255, 248, 240, 0.15);
}
.post-label {
  display: block;
  font-family: 'Comic Neue', cursive;
  font-size: 0.75rem;
  color: rgba(255, 248, 240, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.post-value {
  display: block;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  color: #F2D864;
  margin-top: 2px;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}
.stat-card {
  background: #2A2420;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
}
.stat-card-label {
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  color: #888;
  text-transform: uppercase;
}
.stat-card-value {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  color: #F2D864;
}
.ach-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  justify-content: center;
}
.ach-tab {
  background: rgba(26, 22, 20, 0.6);
  color: #FFF8F0;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Comic Neue', cursive;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.ach-tab:hover {
  border-color: #F2D864;
}
.ach-tab.active {
  background: #F2D864;
  color: #1A1614;
  border-color: #F2D864;
  font-weight: bold;
}
.ach-content {
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
}
.ach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}
.ach-card {
  background: #2A2420;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 4px;
  text-align: center;
  transition: transform 0.1s;
}
.ach-card:hover {
  transform: scale(1.03);
  border-color: #2D8A8A;
}
.ach-locked {
  opacity: 0.4;
  filter: grayscale(1);
}
.ach-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 6px;
  background: #F2D864;
  border: 2px solid #1A1614;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ach-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.1rem;
  color: #D4738A;
}
.ach-desc {
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  color: #888;
  margin: 4px 0;
}
.ach-reward {
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 0.85rem;
  color: #5EA65E;
}
.ach-global {
  font-family: 'Comic Neue', cursive;
  font-size: 0.7rem;
  color: #2D8A8A;
  margin-top: 4px;
}
.profile-card {
  text-align: center;
}
.profile-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  color: #F2D864;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  margin-bottom: 15px;
}
.craft-content {
  max-width: 550px;
  max-height: 85vh;
  overflow-y: auto;
}
.craft-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 15px;
}
.craft-card {
  background: #2A2420;
  padding: 12px;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.1s;
}
.craft-card:hover:not(.craft-disabled) {
  background: #473d36;
  border-color: #2D8A8A;
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 #1A1614;
}
.craft-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.craft-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  color: #D4738A;
}
.craft-effect {
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  color: #888;
  margin: 4px 0;
}
.craft-cost {
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 0.8rem;
  color: #FFF8F0;
}
.craft-cost .mat-scrap {
  color: #888;
}
.craft-cost .mat-core {
  color: #0088FF;
}
.craft-cost .mat-crystal {
  color: #AA00FF;
}
.active-buffs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.buff-pill {
  font-family: 'Comic Neue', cursive;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
  background: #2D8A8A;
  color: #1A1614;
  border: 1px solid #1A1614;
}
.challenge-modal-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.5rem;
  color: #D4738A;
  text-align: center;
  margin-bottom: 6px;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.challenge-modal-desc {
  font-family: 'Comic Neue', cursive;
  font-size: 0.9rem;
  color: #FFF8F0;
  text-align: center;
  margin-bottom: 12px;
}
.challenge-lb-section {
  margin-bottom: 12px;
}
.challenge-modal-status {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.85rem;
  color: #F2D864;
  text-align: center;
  margin-bottom: 8px;
}
.challenge-modal-actions {
  text-align: center;
}
.challenge-play-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  padding: 8px 24px;
  background: #2D8A8A;
  color: #FFF8F0;
  border: none;
  border: 2px solid #1A1614;
  cursor: pointer;
}
.challenge-play-btn:hover {
  transform: translateY(-2px);
}
.challenge-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.9rem;
  color: #F2D864;
  background: rgba(0, 0, 0, 0.7);
  padding: 4px 16px;
  border-radius: 4px;
  z-index: 150;
  pointer-events: none;
}
.challenge-details {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.challenge-category {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.8rem;
  padding: 2px 10px;
  border-radius: 10px;
  color: #1A1614;
  text-transform: uppercase;
  border: 1px solid #1A1614;
}
.challenge-waves,
.challenge-time-limit,
.challenge-multiplier {
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 2px 10px;
  border-radius: 10px;
  background: rgba(255, 248, 240, 0.15);
  color: #FFF8F0;
  border: 1px solid rgba(255, 248, 240, 0.25);
}
.challenge-multiplier {
  color: #F2D864;
}
.challenge-timer {
  position: fixed;
  top: 90px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.8rem;
  color: #FFF8F0;
  background: rgba(0, 0, 0, 0.8);
  padding: 4px 20px;
  border-radius: 6px;
  z-index: 160;
  pointer-events: none;
  border: 2px solid #1A1614;
}
.challenge-timer.timer-warning {
  color: #E8635A;
  animation: timer-pulse 0.5s infinite alternate;
}
@keyframes timer-pulse {
  0% {
    transform: translateX(-50%) scale(1);
  }
  100% {
    transform: translateX(-50%) scale(1.1);
  }
}
.toast {
  position: fixed;
  right: -300px;
  top: 80px;
  padding: 10px 20px;
  border-radius: 4px;
  background: #1A1614;
  color: #FFF8F0;
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 0.85rem;
  z-index: 9999;
  opacity: 0;
  transition: right 0.3s cubic-bezier(0.68, -0.15, 0.265, 1.15), opacity 0.3s ease, top 0.2s ease;
  border: 2px solid #1A1614;
  box-shadow: 3px 3px 0 #1A1614;
  max-width: 260px;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  right: 20px;
}
.toast-info {
  background: #2D8A8A;
  color: #1A1614;
}
.toast-success {
  background: #5EA65E;
  color: #FFF8F0;
}
.toast-warning {
  background: #F2D864;
  color: #1A1614;
}
.toast-error {
  background: #E8635A;
  color: #FFF8F0;
}
.pause-menu-content {
  width: 320px;
  text-align: center;
}
.pause-menu-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.pause-menu-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1.3rem;
  padding: 12px 24px;
  background: #F2D864;
  color: #1A1614;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  border: 2px solid #1A1614;
  box-shadow: 5px 5px 0 #1A1614;
  transition: all 0.1s;
}
.pause-menu-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 #1A1614;
}
.pause-menu-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #1A1614;
}
.pause-menu-btn-danger {
  background: #E8635A;
  color: #FFF8F0;
}
.settings-content {
  width: 360px;
  text-align: center;
}
.settings-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
}
.settings-label {
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 0.9rem;
  color: #FFF8F0;
  width: 100px;
  text-align: right;
  flex-shrink: 0;
}
.settings-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 8px;
  background: #2A2420;
  border-radius: 4px;
  border: 2px solid #1A1614;
  outline: none;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #F2D864;
  border: 2px solid #1A1614;
  border-radius: 50%;
  cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #F2D864;
  border: 2px solid #1A1614;
  border-radius: 50%;
  cursor: pointer;
}
.settings-value {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  color: #F2D864;
  width: 40px;
  text-align: left;
  flex-shrink: 0;
}
.settings-mute-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  padding: 8px 20px;
  background: #2D8A8A;
  color: #1A1614;
  border: none;
  cursor: pointer;
  border: 2px solid #1A1614;
  margin: 12px auto;
  display: block;
  transition: all 0.1s;
}
.settings-mute-btn:hover {
  transform: translateY(-2px);
}
.settings-mute-btn.muted {
  background: #E8635A;
  color: #FFF8F0;
}
.quit-confirm-content {
  width: 300px;
  text-align: center;
}
.quit-confirm-text {
  font-family: 'Comic Neue', cursive;
  font-size: 1rem;
  color: #FFF8F0;
  margin-bottom: 20px;
}
.quit-confirm-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.return-menu-btn {
  background: #FFF8F0;
  color: #1A1614;
  font-size: 1.3rem;
  padding: 10px 30px;
  margin-top: 10px;
}
.auto-pause-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 22, 20, 0.6);
  z-index: 1800;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  animation: pause-fade-in 0.2s ease-out;
}
.auto-pause-text {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 6rem;
  color: #FFF8F0;
  -webkit-text-stroke: 5px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  animation: pause-pulse 2s infinite ease-in-out;
  pointer-events: none;
}
@keyframes pause-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pause-pulse {
  0%,
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.battle-dashboard {
  position: absolute;
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: auto;
  z-index: 101;
  background: rgba(26, 22, 20, 0.6);
  padding: 3px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 248, 240, 0.1);
}
.dash-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  cursor: default;
}
.dash-label {
  font-family: 'Comic Neue', cursive;
  font-size: 0.65rem;
  font-weight: bold;
  color: rgba(255, 248, 240, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-value {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.85rem;
  color: #F2D864;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.mana-bar-container {
  position: absolute;
  bottom: 30px;
  right: 20px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  z-index: 110;
}
.mana-bar-track {
  width: 180px;
  height: 16px;
  background: rgba(26, 22, 20, 0.7);
  border: 2px solid #1A1614;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.mana-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #3A6FC4, #6AC4F2);
  border-radius: 6px;
  transition: width 0.3s ease;
}
.mana-bar-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Comic Neue', cursive;
  font-size: 0.6rem;
  font-weight: bold;
  color: #FFF8F0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}
.mana-abilities {
  display: flex;
  gap: 6px;
}
.mana-ability-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 8px;
  background: rgba(26, 22, 20, 0.8);
  color: #FFF8F0;
  border: none;
  border: 2px solid #1A1614;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 60px;
}
.mana-ability-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  background: rgba(58, 111, 196, 0.6);
  box-shadow: 3px 3px 0 #1A1614;
}
.mana-ability-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.mana-ability-btn.on-cooldown {
  background: rgba(80, 60, 60, 0.7);
  overflow: hidden;
}
.mana-ability-btn.on-cooldown::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  clip-path: inset(calc(100% - var(--cd-pct, 0%)) 0 0 0);
  z-index: 1;
  pointer-events: none;
}
.mana-ability-btn.no-mana {
  background: rgba(60, 50, 50, 0.7);
}
.ability-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.ability-name {
  font-family: 'Comic Neue', cursive;
  font-size: 0.55rem;
  font-weight: bold;
  white-space: nowrap;
}
.ability-cost {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.6rem;
  color: #6AC4F2;
}
.ability-cd {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 0.8rem;
  color: #E8635A;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.endless-btn {
  background: #D4738A;
  color: #FFF8F0;
}
.endless-btn.hidden {
  display: none;
}
.endless-choice-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(26, 22, 20, 0.85);
  z-index: 2500;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: pause-fade-in 0.3s ease-out;
}
.endless-choice-content {
  text-align: center;
  max-width: 500px;
}
.endless-choice-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 3rem;
  color: #F2D864;
  margin: 0 0 5px;
  -webkit-text-stroke: 3px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.endless-choice-sub {
  font-family: 'Comic Neue', cursive;
  font-size: 1rem;
  color: #FFF8F0;
  margin-bottom: 20px;
  opacity: 0.7;
}
.endless-choice-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.endless-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 15px 20px;
  background: #1A1614;
  border: none;
  border: 2px solid #1A1614;
  box-shadow: 4px 4px 0 #1A1614;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 120px;
  color: #FFF8F0;
}
.endless-choice-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #1A1614;
  background: #372e2a;
  border-color: #2D8A8A;
}
.endless-choice-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #1A1614;
}
.choice-icon {
  font-size: 2rem;
}
.choice-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  color: #F2D864;
}
.choice-desc {
  font-family: 'Comic Neue', cursive;
  font-size: 0.7rem;
  color: rgba(255, 248, 240, 0.6);
}
.buff-bar {
  display: flex;
  gap: 6px;
  padding: 4px 0;
  flex-wrap: wrap;
}
.buff-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(26, 22, 20, 0.8);
  border: 1px solid #F2D864;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  color: #FFF8F0;
}
.buff-icon .buff-name {
  text-transform: capitalize;
}
.buff-icon .buff-timer {
  color: #F2D864;
  font-weight: bold;
}
.buff-icon.buff-mana {
  border-color: #2D8A8A;
}
.buff-icon.buff-craft {
  border-color: #D4738A;
}
.tutorial-spotlight {
  position: fixed;
  z-index: 900;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
  transition: top 0.3s ease, left 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.tutorial-highlight {
  position: relative;
  z-index: 901;
  pointer-events: auto;
  box-shadow: 0 0 0 4px #F2D864, 0 0 20px rgba(242, 216, 100, 0.5);
  animation: tutorial-pulse 1.5s infinite;
}
.tutorial-tooltip {
  position: fixed;
  z-index: 902;
  background: #1A1614;
  color: #FFF8F0;
  font-family: 'Comic Neue', cursive;
  font-size: 1.1rem;
  padding: 12px 20px;
  border-radius: 8px;
  border: 2px solid #F2D864;
  box-shadow: 4px 4px 0 #1A1614;
  pointer-events: auto;
  max-width: 320px;
  text-align: center;
  transition: top 0.3s ease, left 0.3s ease, opacity 0.3s ease;
}
.tutorial-tooltip p {
  margin: 0 0 8px;
}
.tutorial-tooltip .tutorial-skip {
  background: none;
  border: 1px solid #FFF8F0;
  color: #FFF8F0;
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Comic Neue', cursive;
  font-size: 0.9rem;
  transition: background 0.2s;
}
.tutorial-tooltip .tutorial-skip:hover {
  background: rgba(255, 248, 240, 0.15);
}
@keyframes tutorial-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px #F2D864, 0 0 20px rgba(242, 216, 100, 0.5);
  }
  50% {
    box-shadow: 0 0 0 6px #F2D864, 0 0 30px rgba(242, 216, 100, 0.7);
  }
}
.key-hint {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(26, 22, 20, 0.9);
  color: #FFF8F0;
  font-family: 'Comic Neue', cursive;
  font-size: 0.95rem;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #F2D864;
  z-index: 800;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.key-hint.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.scene {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: 1200px;
  overflow: hidden;
  background: var(--color-bg);
  background-image: radial-gradient(rgba(26, 22, 20, 0.05) 2px, transparent 2px);
  background-size: 8px 8px;
  background-position: 0 0;
  transition: background-color 2s ease;
}
.scene::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  background: repeating-conic-gradient(from 0deg, #FFF8F0 0deg 10deg, transparent 10deg 20deg);
  transform: translate(-50%, -50%);
  z-index: -2;
  opacity: 0.1;
  animation: spin-slow 60s linear infinite;
}
.scene.day {
  background-color: var(--color-bg);
}
.scene.night {
  background-color: #1A2A3A;
}
.scene.night::before {
  opacity: 0.05;
}
.sky-cycle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80%;
  height: 80%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: -1;
}
.sky-body-container {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 3s ease-in-out;
}
.sun {
  position: absolute;
  top: -40px;
  left: 50%;
  width: 80px;
  height: 80px;
  background: #F2D864;
  border-radius: 50%;
  border: 4px solid #1A1614;
  box-shadow: 10px 10px 0 orange;
  transform: translateX(-50%);
}
.sun::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  background: repeating-conic-gradient(from 0deg, orange 0deg 10deg, transparent 10deg 20deg);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: spin 10s linear infinite;
}
.moon-comic {
  position: absolute;
  bottom: -40px;
  left: 50%;
  width: 60px;
  height: 60px;
  background: #FFF8F0;
  border-radius: 50%;
  border: 3px solid #1A1614;
  box-shadow: 8px 8px 0 gray;
  transform: translateX(-50%) rotate(180deg);
}
.moon-comic::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  width: 10px;
  height: 10px;
  background: #e0e0e0;
  border-radius: 50%;
  box-shadow: 20px 10px 0 #e0e0e0;
}
.weather-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.rain-container {
  width: 100%;
  height: 100%;
}
.rain-container.hidden {
  display: none;
}
.rain-drop {
  position: absolute;
  top: -10%;
  width: 2px;
  height: 30px;
  background: #4A90C4;
  opacity: 0.8;
  animation: rain-fall linear infinite;
}
@keyframes rain-fall {
  to {
    transform: translateY(110vh);
  }
}
.scene.weather-rain {
  filter: saturate(0.8) brightness(0.9);
}
.snow-container {
  width: 100%;
  height: 100%;
}
.snow-container.hidden {
  display: none;
}
.snow-flake {
  position: absolute;
  top: -5%;
  width: 6px;
  height: 6px;
  background: #FFF8F0;
  border-radius: 50%;
  border: 1px solid #1A1614;
  animation: snow-fall linear infinite;
}
@keyframes snow-fall {
  to {
    transform: translateY(110vh) translateX(20px);
  }
}
.scene.weather-snow {
  filter: brightness(1.1);
}
.scene.aurora-active {
  background: linear-gradient(180deg, #0a1628 0%, #1a2a4a 30%, #2a3a5a 60%, var(--color-bg) 100%);
}
.scene.aurora-active .aurora-sky {
  display: block;
}
.scene.aurora-active .aurora-particles {
  display: block;
}
.scene.aurora-active::before {
  opacity: 0.03;
}
.scene.aurora-active.night {
  background: linear-gradient(180deg, #050a14 0%, #0a1428 30%, #152238 60%, #000000 100%);
}
.aurora-sky,
.aurora-particles {
  display: none;
}
.wind-container {
  width: 100%;
  height: 100%;
}
.wind-container.hidden {
  display: none;
}
.wind-line {
  position: absolute;
  left: -10%;
  width: 100px;
  height: 2px;
  background: rgba(255, 255, 255, 0.5);
  animation: wind-blow linear infinite;
}
.wind-line::before {
  content: '〰';
  position: absolute;
  right: 0;
  top: -10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 20px;
}
@keyframes wind-blow {
  to {
    transform: translateX(120vw);
  }
}
.map {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 720px;
  height: 480px;
  transform: translate(-50%, -50%) rotateX(45deg);
  transform-style: preserve-3d;
  user-select: none;
  -webkit-user-select: none;
  background: #1A1614;
  border: 4px solid #1A1614;
  box-shadow: 15px 15px 0 rgba(0, 0, 0, 0.3);
}
.map::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF8F0;
  transform: translate(10px, 10px);
  z-index: -1;
  border: 4px solid #1A1614;
}
.cell {
  position: absolute;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  transition: all 0.2s;
  transform-style: preserve-3d;
  border: 1px solid #1A1614;
}
.cell.grass {
  background: var(--color-grass);
  background-image: radial-gradient(var(--color-grass-light) 20%, transparent 20%);
  background-size: 10px 10px;
}
.cell.path {
  background: var(--color-path);
  border: 2px solid #1A1614;
  background-image: repeating-linear-gradient(45deg, translate(transparent, 10px), transparent 10px, rgba(255, 248, 240, 0.3) 10px, rgba(255, 248, 240, 0.3) 20px);
}
.cell.buildable {
  cursor: pointer;
}
.cell.buildable:hover {
  transform: translateZ(10px);
  background: #2D8A8A;
  border: 2px solid #1A1614;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.cell.buildable.valid-placement {
  background: #5EA65E;
}
.cell.buildable.valid-placement::after {
  content: 'OK!';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  color: #FFF8F0;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.cell.buildable.invalid-placement {
  background: #E8635A;
}
.cell.buildable.invalid-placement::after {
  content: 'NO!';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  color: #FFF8F0;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.cell.start {
  background: #4A90C4;
}
.cell.start::after {
  content: 'START';
  font-family: 'Bangers', 'Impact', cursive;
  color: #FFF8F0;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  font-size: 0.8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cell.end {
  background: #E8635A;
}
.cell.end::after {
  content: 'END';
  font-family: 'Bangers', 'Impact', cursive;
  color: #FFF8F0;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  font-size: 0.8rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cell.center-island {
  background: linear-gradient(135deg, #2fa76f 0%, #3fc989 100%);
  border: 1px solid rgba(30, 107, 71, 0.4);
  box-shadow: inset 0 0 8px rgba(30, 107, 71, 0.3);
}
.cell.center-island::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #2D8A8A;
  border-radius: 50%;
  opacity: 0.6;
  box-shadow: 0 0 4px #2D8A8A;
}
.range-indicator {
  position: absolute;
  border-radius: 50%;
  border: 3px dashed #1A1614;
  background: rgba(45, 138, 138, 0.3);
  pointer-events: none;
  transform: rotateX(-45deg);
  animation: rotate-range 4s linear infinite;
}
@keyframes rotate-range {
  from {
    transform: rotateX(-45deg) rotate(0deg);
  }
  to {
    transform: rotateX(-45deg) rotate(360deg);
  }
}
.particles {
  display: none;
}
.comic-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #1A1614;
  animation: comic-float 2s infinite;
}
@keyframes comic-float {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(20deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}
.ground-shadow {
  display: none;
}
.enemies,
.towers,
.projectiles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 10;
}
.tower {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  pointer-events: none;
  transform: translate(-50%, -100%) rotateX(-45deg) translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tower:not(.firing):not(.targeting) {
  animation: comic-idle 1s infinite alternate;
}
.tower.targeting {
  animation: tower-targeting 0.5s ease-in-out infinite alternate;
}
.tower.targeting::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 0, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: target-glow 0.8s ease-in-out infinite alternate;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tower.firing {
  animation: tower-recoil 0.15s ease-out;
}
.tower.tower-arrow.firing .tower-turret {
  animation: arrow-turret-recoil 0.15s ease-out;
}
.tower.tower-cannon.firing .tower-barrel {
  animation: cannon-barrel-kickback 0.2s ease-out;
}
.tower.tower-ice.firing .tower-crystal {
  animation: ice-crystal-pulse 0.25s ease-out;
}
.tower.tower-magic.firing .tower-orb {
  animation: magic-orb-flare 0.25s ease-out;
}
.tower.tower-tesla.firing .tower-spark {
  animation: tesla-coil-discharge 0.15s ease-out;
}
@keyframes tower-targeting {
  0% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.02);
  }
}
@keyframes target-glow {
  0% {
    opacity: 0.3;
    transform: scale(0.9);
  }
  100% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}
@keyframes tower-recoil {
  0% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1);
  }
  30% {
    transform: translate(-50%, -98%) rotateX(-45deg) scale(0.95);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1);
  }
}
@keyframes comic-idle {
  from {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1) rotate(0deg);
  }
  to {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.03) rotate(1.5deg);
  }
}
.tower-arrow .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 10px;
  background: #8B4513;
  transform: translateX(-50%) rotateX(-90deg);
  border: 3px solid #1A1614;
}
.tower-arrow .tower-body {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 28px;
  height: 50px;
  background: #b85b19;
  transform: translateX(-50%);
  border: 3px solid #1A1614;
  background-image: linear-gradient(0deg, #ce661c 0%, #af5718 20%, #c1601a 40%, #a65217 60%, #ca641c 80%, #b85b19 100%);
  clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%);
  border: none;
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
}
.tower-arrow .tower-body::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid #C4763A;
  border-radius: 50% 0 50% 50%;
  border-right-color: transparent;
  transform: translateX(-50%) rotate(45deg);
}
.tower-arrow .tower-top {
  position: absolute;
  bottom: 60px;
  left: 50%;
  width: 44px;
  height: 12px;
  background: #8B4513;
  transform: translateX(-50%);
  border: 3px solid #1A1614;
}
.tower-arrow .tower-turret {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 20px;
  height: 40px;
}
.tower-arrow .tower-turret::after {
  content: '';
  position: absolute;
  top: -22px;
  left: 50%;
  width: 8px;
  height: 20px;
  background: #8B4513;
  transform: translateX(-50%);
  clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%);
  filter: drop-shadow(1px 0 0 #1A1614) drop-shadow(-1px 0 0 #1A1614) drop-shadow(0 -1px 0 #1A1614);
}
.tower-arrow .tower-turret::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  width: 24px;
  height: 3px;
  background: #1A1614;
  transform: translateX(-50%);
}
.tower-arrow.level-2 .tower-body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 2C6 2 4 5 4 8s2 4 4 5c-1-1-2-2-2-4s1-4 4-4' fill='none' stroke='%23C4763A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center 30%, linear-gradient(0deg, #ce661c 0%, #af5718 20%, #c1601a 40%, #a65217 60%, #ca641c 80%, #b85b19 100%);
}
.tower-arrow.level-2 .tower-top {
  background-image: repeating-linear-gradient(45deg, #8B4513 0px, #8B4513 4px, #48240a 4px, #48240a 8px);
}
.tower-arrow.level-2 .tower-turret::after {
  box-shadow: 0 8px 0 0 #1E6B47;
}
.tower-arrow.level-3 .tower-body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='40'%3E%3Cpath d='M12 4C8 4 6 7 6 10s2 5 5 6c-2-1-3-3-3-5s2-5 4-5M12 18c-3 0-5 2-5 5s1 4 3 5c-1-1-1-2-1-4s1-4 3-4' fill='none' stroke='%23C4763A' stroke-width='1.5'/%3E%3Cpath d='M8 14h8M6 16h12' stroke='%23C4763A' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center center / 90% 90%, linear-gradient(0deg, #ce661c 0%, #a65217 50%, #ca641c 100%);
}
.tower-arrow.level-3 .tower-top {
  background-image: repeating-linear-gradient(45deg, #C4763A 0px, #C4763A 3px, #DAA520 3px, #DAA520 6px);
  box-shadow: 0 0 6px rgba(196, 118, 58, 0.4);
}
.tower-arrow.level-3 .tower-turret::after {
  height: 26px;
  background: linear-gradient(to top, #8B4513 40%, #1E6B47 60%);
  box-shadow: 0 0 6px rgba(30, 107, 71, 0.5);
}
.tower-cannon .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 50px;
  height: 50px;
  background: #226741;
  border-radius: 50%;
  transform: translateX(-50%) rotateX(-90deg);
  border: 3px solid #1A1614;
}
.tower-cannon .tower-body {
  position: absolute;
  bottom: 5px;
  left: 50%;
  width: 45px;
  height: 30px;
  background: linear-gradient(135deg, #6dce98 0%, #3CB371 30%, #2f8d59 60%, #3CB371 80%, #5ac88b 100%);
  transform: translateX(-50%);
  border: 3px solid #1A1614;
  border-radius: 8px;
}
.tower-cannon .tower-body::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 8px;
  width: 6px;
  height: 20px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 3px;
  transform: skewX(-5deg);
}
.tower-cannon .tower-barrel {
  position: absolute;
  bottom: 25px;
  left: 50%;
  width: 18px;
  height: 45px;
  background: #297a4d;
  transform-origin: center bottom;
  transform: translateX(-50%);
  border-radius: 6px 6px 3px 3px;
  border: 2px solid #1A1614;
  box-shadow: inset -3px 0 0 rgba(0, 0, 0, 0.2);
}
.tower-cannon .tower-barrel::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 5px;
  width: 4px;
  height: 25px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
}
.tower-cannon.level-2 .tower-body {
  background-image: linear-gradient(0deg, transparent 0%, transparent 8px, rgba(0, 0, 0, 0.15) 8px, rgba(0, 0, 0, 0.15) 9px, transparent 9px, transparent 18px, rgba(0, 0, 0, 0.15) 18px, rgba(0, 0, 0, 0.15) 19px, transparent 19px);
  box-shadow: 0 0 8px rgba(60, 179, 113, 0.4);
}
.tower-cannon.level-2 .tower-barrel::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: #DAA520;
  border-radius: 3px;
  border: 1px solid #1A1614;
}
.tower-cannon.level-3 .tower-body {
  background: linear-gradient(135deg, rgba(60, 179, 113, 0.9) 0%, rgba(30, 107, 71, 0.95) 30%, rgba(60, 179, 113, 0.85) 50%, rgba(30, 107, 71, 0.9) 70%, rgba(60, 179, 113, 0.95) 100%);
  box-shadow: 0 0 12px rgba(60, 179, 113, 0.5), inset 0 0 8px rgba(255, 255, 255, 0.1);
}
.tower-cannon.level-3 .tower-body::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cellipse cx='6' cy='7' rx='3' ry='4' fill='none' stroke='%23F5E6C8' stroke-width='1.2'/%3E%3Cellipse cx='14' cy='7' rx='3' ry='4' fill='none' stroke='%23F5E6C8' stroke-width='1.2'/%3E%3Cpath d='M5 14h10M7 16h6' stroke='%23F5E6C8' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
}
.tower-cannon.level-3 .tower-barrel::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -2px;
  right: -2px;
  height: 6px;
  background: #DAA520;
  border-radius: 3px;
  border: 1px solid #1A1614;
  box-shadow: 0 15px 0 0 #DAA520, 0 30px 0 0 #DAA520;
}
.tower-cannon.level-3 .tower-base {
  box-shadow: 0 0 10px rgba(60, 179, 113, 0.5);
}
.tower-ice .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, #84c2ff 0%, #1E90FF 60%, #0077ea 100%);
  transform: translateX(-50%) rotateX(-90deg);
  border: 3px solid #1A1614;
  border-radius: 50%;
}
.tower-ice .tower-crystal {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 65px;
  background: linear-gradient(180deg, #84c2ff 0%, #1E90FF 30%, #006ad1 70%, #005db7 100%);
  transform: translateX(-50%);
  clip-path: polygon(30% 0%, 70% 0%, 85% 15%, 80% 40%, 90% 60%, 85% 80%, 100% 100%, 0% 100%, 15% 80%, 10% 60%, 20% 40%, 15% 15%);
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
}
.tower-ice .tower-crystal::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 5px;
  right: 5px;
  bottom: 10px;
  background: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(255, 255, 255, 0.2) 8px, rgba(255, 255, 255, 0.2) 10px);
}
.tower-ice .tower-glow {
  display: none;
}
.tower-ice.level-2 .tower-crystal {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M4 12c4-6 8-6 12 0s8 6 12 0' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size: 24px 24px;
}
.tower-ice.level-2 .tower-base {
  box-shadow: 0 0 8px rgba(30, 144, 255, 0.4);
}
.tower-ice.level-2 .ice-particles {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  pointer-events: none;
}
.tower-ice.level-2 .ice-particles::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  background: #b7dbff;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: water-orbit 2s linear infinite;
  box-shadow: 0 0 4px #84c2ff;
}
.tower-ice.level-3 .tower-crystal {
  background: linear-gradient(180deg, rgba(135, 206, 235, 0.85) 0%, rgba(30, 144, 255, 0.7) 30%, rgba(30, 144, 255, 0.9) 70%, rgba(10, 80, 180, 0.95) 100%);
}
.tower-ice.level-3 .tower-crystal::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  width: 18px;
  height: 22px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='22'%3E%3Cellipse cx='5' cy='8' rx='2.5' ry='3' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.2'/%3E%3Cellipse cx='13' cy='8' rx='2.5' ry='3' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.2'/%3E%3Cpath d='M3 4c3-3 9-3 12 0' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.5'/%3E%3Cpath d='M5 16h8M6 18h6' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
  z-index: 2;
}
.tower-ice.level-3 .tower-base {
  box-shadow: 0 0 12px #1E90FF;
  animation: tide-pulse 3s ease-in-out infinite;
}
.tower-ice.level-3 .ice-particles {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: 50px;
  height: 50px;
  transform: translateX(-50%);
  pointer-events: none;
}
.tower-ice.level-3 .ice-particles::before,
.tower-ice.level-3 .ice-particles::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  background: #b7dbff;
  border-radius: 50%;
  box-shadow: 0 0 6px #84c2ff;
}
.tower-ice.level-3 .ice-particles::before {
  animation: water-orbit 2s linear infinite;
}
.tower-ice.level-3 .ice-particles::after {
  animation: water-orbit 2s linear infinite reverse;
}
@keyframes water-orbit {
  0% {
    transform: rotate(0deg) translateX(20px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(20px) rotate(-360deg);
  }
}
@keyframes tide-pulse {
  0%,
  100% {
    box-shadow: 0 0 8px rgba(30, 144, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 16px #1E90FF;
  }
}
.tower-magic .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 60px;
  background: #4B0082;
  transform: translateX(-50%);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border: none;
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 -2px 0 #1A1614) drop-shadow(0 2px 0 #1A1614);
}
.tower-magic .tower-base::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 50%;
  width: 14px;
  height: 30px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 6px, rgba(255, 255, 255, 0.15) 6px, rgba(255, 255, 255, 0.15) 8px);
}
.tower-magic .tower-orb {
  position: absolute;
  bottom: 65px;
  left: 50%;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 40% 35%, #FFF8F0 0%, #9f1cff 30%, #4B0082 70%);
  border-radius: 50%;
  transform: translateX(-50%);
  border: 3px solid #4B0082;
  box-shadow: 4px 4px 0 #1A1614, 0 0 8px rgba(155, 123, 184, 0.5);
  animation: orb-hop 0.5s infinite alternate;
}
.tower-magic .tower-ring {
  position: absolute;
  bottom: 70px;
  left: 50%;
  width: 60px;
  height: 10px;
  border: 3px solid #D4738A;
  border-radius: 50%;
  transform: translateX(-50%);
  animation: spin-flat 2s linear infinite;
}
.tower-magic .magic-energy {
  display: none;
}
.tower-magic.level-2 .tower-base {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40'%3E%3Cpath d='M10 5C6 5 5 9 5 12s2 5 4 6M10 20c-3 0-4 3-4 5s1 4 3 5' fill='none' stroke='%239B7BB8' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
}
.tower-magic.level-2 .tower-orb {
  background: conic-gradient(from 0deg, #FFF8F0, #9f1cff, #FFF8F0, #8600e8, #FFF8F0);
  animation: orb-hop 0.5s infinite alternate, orb-energy-spin 3s linear infinite;
}
.tower-magic.level-2 .magic-energy {
  display: block;
  position: absolute;
  bottom: 72px;
  left: 50%;
  width: 40px;
  height: 8px;
  border: 2px solid rgba(155, 123, 184, 0.6);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: spin-flat 1.5s linear infinite reverse;
  pointer-events: none;
}
.tower-magic.level-3 .tower-base {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='50'%3E%3Cpath d='M12 5C8 5 6 8 6 11s2 5 5 6c-2-1-3-3-3-5s2-5 4-5M12 22c-3 0-5 3-5 6s2 5 4 6c-1-1-2-3-2-5s1-5 3-5' fill='none' stroke='%239B7BB8' stroke-width='1.5'/%3E%3Cpath d='M8 18h8M6 20h12M8 36h8' stroke='%239B7BB8' stroke-width='0.8'/%3E%3Cellipse cx='12' cy='42' rx='3' ry='3' fill='none' stroke='%239B7BB8' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90% 90%;
  box-shadow: 0 0 8px rgba(75, 0, 130, 0.4);
}
.tower-magic.level-3 .tower-orb {
  width: 32px;
  height: 32px;
  background: radial-gradient(circle at 40% 35%, #FFF8F0 0%, #E8D0FF 20%, #9f1cff 50%, #4B0082 80%);
  box-shadow: 4px 4px 0 #1A1614, 0 0 15px #9B7BB8, 0 0 30px rgba(155, 123, 184, 0.3);
  animation: orb-hop 0.5s infinite alternate, orb-energy-spin 2s linear infinite;
}
.tower-magic.level-3 .tower-ring {
  border-color: #9B7BB8;
  box-shadow: 0 0 6px rgba(155, 123, 184, 0.4);
}
.tower-magic.level-3 .magic-energy {
  display: block;
  position: absolute;
  bottom: 68px;
  left: 50%;
  width: 75px;
  height: 12px;
  border: 2px solid rgba(212, 115, 138, 0.4);
  border-radius: 50%;
  transform: translateX(-50%);
  animation: spin-flat 4s linear infinite;
  pointer-events: none;
}
@keyframes orb-energy-spin {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.tower-tesla .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 45px;
  height: 15px;
  background: #555;
  transform: translateX(-50%) rotateX(-90deg);
  border: 3px solid #1A1614;
}
.tower-tesla .tower-coil {
  position: absolute;
  bottom: 15px;
  left: 50%;
  width: 22px;
  height: 42px;
  background: linear-gradient(0deg, #4e5a65 0%, #708090 25%, #8d9aa6 50%, #708090 75%, #5a6673 100%);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 0, 0, 0.3) 4px, rgba(0, 0, 0, 0.3) 6px);
  transform: translateX(-50%);
  border: 2px solid #1A1614;
}
.tower-tesla .tower-spark {
  position: absolute;
  bottom: 60px;
  left: 50%;
  width: 30px;
  height: 30px;
  background: #FFF8F0;
  border-radius: 50%;
  transform: translateX(-50%);
  border: 2px solid #708090;
  box-shadow: 0 0 10px #708090;
  animation: spark-pulse 0.1s infinite alternate;
}
.tower-tesla .tower-spark::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 18px;
  background: #708090;
  clip-path: polygon(40% 0%, 100% 40%, 55% 45%, 70% 100%, 0% 55%, 45% 50%);
  transform: translate(-50%, -50%);
}
.tesla-arc {
  position: absolute;
  bottom: 55px;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translateX(-50%);
  pointer-events: none;
}
.tesla-arc::before,
.tesla-arc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 2px;
  background: #708090;
  box-shadow: 0 0 4px #708090, 0 0 8px #FFF8F0;
  opacity: 0;
  animation: tesla-arc-flash 0.5s ease-out infinite;
}
.tesla-arc::before {
  transform: translate(-50%, -50%) rotate(30deg);
  animation-delay: 0.2s;
}
.tesla-arc::after {
  transform: translate(-50%, -50%) rotate(-30deg);
  animation-delay: 0.4s;
}
@keyframes spark-pulse {
  from {
    transform: translateX(-50%) scale(1);
    opacity: 0.8;
  }
  to {
    transform: translateX(-50%) scale(1.2);
    opacity: 1;
  }
}
@keyframes tesla-arc-flash {
  0%,
  80%,
  100% {
    opacity: 0;
  }
  10%,
  30% {
    opacity: 1;
  }
}
.tower-tesla.level-2 .tower-coil {
  background: conic-gradient(from 0deg, #4e5a65, #9ba6b1, #5a6673, #8d9aa6, #4e5a65);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 4px, rgba(0, 0, 0, 0.25) 4px, rgba(0, 0, 0, 0.25) 6px);
}
.tower-tesla.level-2 .tower-spark {
  box-shadow: 0 0 14px #708090, 0 0 4px #FFF8F0;
}
.tower-tesla.level-2 .tesla-arc::before {
  width: 35px;
}
.tower-tesla.level-2 .tesla-arc::after {
  width: 35px;
}
.tower-tesla.level-3 .tower-coil {
  background: conic-gradient(from 0deg, #434d57, #a9b3bd, #FFF8F0, #9ba6b1, #434d57);
  animation: storm-vortex 3s linear infinite;
}
.tower-tesla.level-3 .tower-spark {
  width: 35px;
  height: 35px;
  box-shadow: 0 0 20px #708090, 0 0 8px #FFF8F0;
  animation: spark-pulse 0.08s infinite alternate;
}
.tower-tesla.level-3 .tower-spark::after {
  width: 16px;
  height: 20px;
}
.tower-tesla.level-3 .tesla-arc::before,
.tower-tesla.level-3 .tesla-arc::after {
  width: 40px;
  height: 3px;
  box-shadow: 0 0 6px #708090, 0 0 12px #FFF8F0;
  animation: tesla-arc-flash 0.3s ease-out infinite;
}
.tower-tesla.level-3 .tower-base {
  box-shadow: 0 0 8px rgba(112, 128, 144, 0.4);
}
@keyframes storm-vortex {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
.tower-flame .tower-base {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 10px;
  background: #333;
  transform: translateX(-50%) rotateX(-90deg);
  border: 3px solid #1A1614;
}
.tower-flame .tower-tank {
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 30px;
  height: 40px;
  background: #B22222;
  border-radius: 10px;
  transform: translateX(-50%);
  border: 3px solid #1A1614;
  background-image: repeating-linear-gradient(0deg, transparent 0px, transparent 7px, rgba(255, 200, 50, 0.2) 7px, rgba(255, 200, 50, 0.2) 9px);
}
.tower-flame .tower-tank::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 50%;
  width: 16px;
  height: 25px;
  transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='25'%3E%3Cpath d='M2 25L5 20L8 25L11 20L14 25M2 18L5 13L8 18L11 13L14 18M2 11L5 6L8 11L11 6L14 11' fill='none' stroke='rgba(255,200,50,0.3)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
}
.tower-flame .tower-nozzle {
  position: absolute;
  bottom: 25px;
  left: 50%;
  width: 10px;
  height: 30px;
  background: #444;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: bottom center;
  border: 2px solid #1A1614;
}
.tower-flame .tower-nozzle::after {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  width: 12px;
  height: 18px;
  transform: translateX(-50%) rotate(-45deg);
  background: radial-gradient(ellipse at bottom, #FFF8E8 0%, #F2D864 30%, #E88A42 60%, #D4512A 80%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: nozzle-flame 0.15s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 3px #E88A42);
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tower-flame.firing .tower-nozzle::after {
  width: 20px;
  height: 30px;
  animation: nozzle-flame-burst 0.2s ease-out;
}
@keyframes nozzle-flame {
  0% {
    transform: translateX(-50%) rotate(-45deg) scaleY(1) scaleX(1);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-48%) rotate(-45deg) scaleY(1.15) scaleX(0.85);
    opacity: 1;
  }
}
@keyframes nozzle-flame-burst {
  0% {
    transform: translateX(-50%) rotate(-45deg) scale(1);
    filter: drop-shadow(0 0 3px #E88A42);
  }
  50% {
    transform: translateX(-50%) rotate(-45deg) scale(1.8);
    filter: drop-shadow(0 0 10px #D4512A) drop-shadow(0 0 20px #E88A42);
  }
  100% {
    transform: translateX(-50%) rotate(-45deg) scale(1);
    filter: drop-shadow(0 0 3px #E88A42);
  }
}
.flame-particles {
  position: absolute;
  bottom: 40px;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translateX(-50%);
  pointer-events: none;
}
.flame-particles::before,
.flame-particles::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  background: #F2D864;
  border-radius: 50%;
  opacity: 0;
  animation: flame-particle-rise 1s ease-out infinite;
}
.flame-particles::before {
  left: 30%;
  animation-delay: 0s;
}
.flame-particles::after {
  left: 60%;
  animation-delay: 0.5s;
}
@keyframes flame-particle-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-20px) scale(0.5);
    opacity: 0;
  }
}
.tower-flame.level-2 .tower-tank {
  box-shadow: 0 0 6px rgba(212, 81, 42, 0.4);
}
.tower-flame.level-2 .tower-tank::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='25'%3E%3Cpath d='M8 2c-3 4-5 8-5 12s3 6 5 7c2-1 5-3 5-7s-2-8-5-12' fill='none' stroke='rgba(255,200,50,0.4)' stroke-width='1.5'/%3E%3Cpath d='M8 8c-1 2-2 4-2 6s1 3 2 4c1-1 2-2 2-4s-1-4-2-6' fill='none' stroke='rgba(255,150,30,0.5)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
}
.tower-flame.level-2 .tower-nozzle::after {
  width: 15px;
  height: 22px;
}
.tower-flame.level-2 .tower-base {
  box-shadow: 0 0 6px rgba(232, 138, 66, 0.3);
}
.tower-flame.level-3 .tower-tank {
  background: linear-gradient(180deg, #2A1A10 0%, #5c1212 40%, #B22222 80%, #E88A42 100%);
  box-shadow: 0 0 12px rgba(212, 81, 42, 0.5), inset 0 0 6px rgba(232, 138, 66, 0.3);
}
.tower-flame.level-3 .tower-tank::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28'%3E%3Cpath d='M9 2c-4 5-7 10-7 16s4 7 7 8c3-1 7-4 7-8s-3-11-7-16' fill='none' stroke='%23C4A035' stroke-width='1.5'/%3E%3Cpath d='M9 8c-2 3-3 6-3 9s2 4 3 5c1-1 3-2 3-5s-1-6-3-9' fill='none' stroke='%23C4A035' stroke-width='1'/%3E%3Ccircle cx='9' cy='18' r='2' fill='%23C4A035' opacity='0.6'/%3E%3C/svg%3E") no-repeat center;
}
.tower-flame.level-3 .tower-nozzle {
  width: 8px;
  border-radius: 4px 4px 0 0;
}
.tower-flame.level-3 .tower-nozzle::after {
  width: 18px;
  height: 26px;
  filter: drop-shadow(0 0 6px #E88A42) drop-shadow(0 0 12px #D4512A);
}
.tower-flame.level-3 .tower-base {
  background: #2A1A10;
  box-shadow: 0 0 10px rgba(212, 81, 42, 0.4);
}
.tower-flame.level-3 .flame-particles::before,
.tower-flame.level-3 .flame-particles::after {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 4px #F2D864;
}
.tower-level {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}
.tower-level .level-star {
  width: 12px;
  height: 12px;
  background: #F2D864;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(1px 1px 0 #1A1614);
}
.tower.level-2 {
  filter: brightness(1.05);
}
.tower.level-3 {
  filter: brightness(1.1) drop-shadow(0 0 4px rgba(242, 216, 100, 0.4));
}
.tower.upgrading {
  animation: upgrade-pulse 0.6s ease-out;
}
@keyframes upgrade-pulse {
  0% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1);
    filter: brightness(1);
  }
  30% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.3);
    filter: brightness(2);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1);
    filter: brightness(1);
  }
}
.upgrade-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.upgrade-particles::before,
.upgrade-particles::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #F2D864 0%, transparent 70%);
  animation: upgrade-particles-expand 0.6s ease-out forwards;
}
.upgrade-particles::after {
  animation-delay: 0.1s;
}
@keyframes upgrade-particles-expand {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes orb-hop {
  from {
    transform: translateX(-50%) translateY(0);
  }
  to {
    transform: translateX(-50%) translateY(-10px);
  }
}
@keyframes spin-flat {
  from {
    transform: translateX(-50%) scaleY(0.3) rotate(0deg);
  }
  to {
    transform: translateX(-50%) scaleY(0.3) rotate(360deg);
  }
}
.tower-status {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  pointer-events: none;
  z-index: 20;
  animation: status-float 2s infinite ease-in-out;
}
.status-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.status-upgrade {
  background: #5EA65E;
  color: #FFF8F0;
}
.status-upgrade::after {
  content: '\2191';
  font-weight: bold;
}
.status-buff {
  background: #2D8A8A;
  color: #1A1614;
}
.status-buff::after {
  content: '\2B06';
  font-size: 8px;
}
.status-debuff {
  background: #E8635A;
  color: #FFF8F0;
}
.status-debuff::after {
  content: '\2B07';
  font-size: 8px;
}
.status-synergy {
  background: #D4738A;
  color: #FFF8F0;
}
.status-synergy::after {
  content: '\2726';
  font-size: 9px;
}
.tower.stunned {
  filter: grayscale(70%) brightness(0.7);
  animation: tower-stun-shake 0.15s infinite alternate;
}
.tower.stunned::after {
  content: '\2606';
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #F2D864;
  text-shadow: 0 0 4px #F2D864;
  animation: stun-stars 0.4s linear infinite;
  z-index: 25;
}
@keyframes tower-stun-shake {
  0% {
    transform: translateX(-1px);
  }
  100% {
    transform: translateX(1px);
  }
}
@keyframes stun-stars {
  0% {
    transform: translateX(-50%) rotate(0deg);
  }
  100% {
    transform: translateX(-50%) rotate(360deg);
  }
}
@keyframes status-float {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}
.enemy {
  position: absolute;
  transform-style: preserve-3d;
  transform-origin: center bottom;
  transform: translate(-50%, -100%) rotateX(-45deg);
  transition: all 0.2s;
}
.enemy.hit {
  filter: brightness(2) contrast(200%) grayscale(100%);
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.1);
}
.health-bar {
  position: absolute;
  top: -20px;
  left: 50%;
  width: 40px;
  height: 10px;
  background: #FFF8F0;
  border: 2px solid #1A1614;
  transform: translateX(-50%);
}
.health-bar .health-fill {
  height: 100%;
  background: #5EA65E;
  border-right: 2px solid #1A1614;
  transition: background-color 0.3s;
}
.health-bar .health-fill.health-medium {
  background: #F2D864;
}
.health-bar .health-fill.health-low {
  background: #E8635A;
}
.health-bar .health-fill.health-critical {
  background: #D4512A;
  animation: health-critical-pulse 0.5s infinite;
}
.enemy-slime > .health-bar {
  top: -40px;
}
.enemy-goblin > .health-bar {
  top: -52px;
}
.enemy-knight > .health-bar {
  top: -54px;
}
.enemy-boss > .health-bar {
  top: -80px;
  width: 60px;
  height: 14px;
  border-color: #1E6B47;
  box-shadow: 0 0 6px rgba(30, 107, 71, 0.5);
}
.enemy-slime .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 32px;
  background: radial-gradient(ellipse at 50% 40%, rgba(200, 232, 200, 0.85) 0%, rgba(200, 232, 200, 0.5) 50%, rgba(200, 232, 200, 0.15) 80%, transparent 100%);
  transform: translateX(-50%);
  border-radius: 40% 40% 20% 20%;
  border: 2px solid rgba(200, 232, 200, 0.6);
  box-shadow: 0 0 8px rgba(200, 232, 200, 0.5);
  animation: spirit-float 1.2s ease-in-out infinite;
}
.enemy-slime .enemy-body::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: radial-gradient(ellipse at top, rgba(200, 232, 200, 0.5) 0%, transparent 70%);
  transform: translateX(-50%);
  border-radius: 0 0 50% 50%;
  animation: wisp-trail 1.5s ease-in-out infinite;
}
.enemy-slime .enemy-face {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  display: flex;
  justify-content: space-between;
}
.enemy-slime .enemy-face::before,
.enemy-slime .enemy-face::after {
  content: '';
  width: 7px;
  height: 7px;
  background: transparent;
  border: 2px solid #1A1614;
  border-radius: 50%;
}
.enemy-slime .tentacles {
  display: none;
}
.enemy-slime.low-health .enemy-body {
  animation: spirit-flicker 0.8s infinite;
  filter: saturate(0.5);
  box-shadow: 0 0 4px rgba(180, 180, 180, 0.3);
}
@keyframes wisp-trail {
  0%,
  100% {
    opacity: 0.6;
    transform: translateX(-50%) scaleY(1);
  }
  50% {
    opacity: 0.3;
    transform: translateX(-50%) scaleY(1.3);
  }
}
.enemy-goblin .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 26px;
  height: 38px;
  background: #A8D8F0;
  transform: translateX(-50%);
  clip-path: polygon(20% 0%, 80% 0%, 90% 25%, 85% 100%, 15% 100%, 10% 25%);
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
  animation: hop 0.4s ease-in-out infinite;
}
.enemy-goblin .enemy-body::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 18px;
  height: 10px;
  background: #8B5A3A;
  transform: translateX(-50%);
  border-radius: 50% 50% 20% 20%;
  clip-path: polygon(10% 100%, 0% 30%, 20% 0%, 40% 20%, 50% 0%, 60% 20%, 80% 0%, 100% 30%, 90% 100%);
}
.enemy-goblin .enemy-body::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 40px;
  height: 25px;
  background: radial-gradient(ellipse at center, rgba(168, 216, 240, 0.3) 0%, transparent 70%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}
.enemy-goblin .enemy-face {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.enemy-goblin .enemy-face::before,
.enemy-goblin .enemy-face::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 0;
  height: 0;
  border-bottom: 10px solid #A8D8F0;
}
.enemy-goblin .enemy-face::before {
  left: -6px;
  border-left: 8px solid transparent;
  border-right: 2px solid transparent;
  transform: rotate(-15deg);
}
.enemy-goblin .enemy-face::after {
  right: -6px;
  border-left: 2px solid transparent;
  border-right: 8px solid transparent;
  transform: rotate(15deg);
}
.enemy-goblin .enemy-eyes {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  display: flex;
  justify-content: space-between;
}
.enemy-goblin .enemy-eyes::before,
.enemy-goblin .enemy-eyes::after {
  content: '';
  width: 4px;
  height: 4px;
  background: #7BFF7B;
  border-radius: 50%;
  box-shadow: 0 0 3px #7BFF7B;
}
.enemy-goblin .arms {
  display: none;
}
.enemy-goblin.low-health .enemy-body::after {
  opacity: 0;
}
.enemy-goblin.low-health .enemy-body {
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614) saturate(0.5) brightness(0.8);
}
.enemy-goblin.low-health .enemy-body {
  animation-duration: 0.6s;
}
@keyframes hop {
  0% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-8px) scaleX(0.95);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}
.enemy-knight .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 36px;
  height: 46px;
  background: #8B4513;
  transform: translateX(-50%);
  clip-path: polygon(25% 0%, 75% 0%, 85% 30%, 80% 100%, 20% 100%, 15% 30%);
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614);
}
.enemy-knight .enemy-body::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 16px;
  height: 14px;
  transform: translateX(-50%);
  background: linear-gradient(#1A1614, #1A1614) no-repeat center 0 / 2px 12px, linear-gradient(#1A1614, #1A1614) no-repeat 2px 2px / 2px 10px, linear-gradient(#1A1614, #1A1614) no-repeat calc(100% - 2px) 2px / 2px 10px;
}
.enemy-knight .enemy-body::after {
  content: '';
  position: absolute;
  top: 22px;
  left: 50%;
  width: 8px;
  height: 10px;
  background: #1E6B47;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 4px rgba(30, 107, 71, 0.5);
}
.enemy-knight .cape {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 18px;
  background: repeating-linear-gradient(90deg, #DAA520 0px, #DAA520 3px, #977316 3px, #977316 5px);
  transform: translateX(-50%) translateZ(-1px);
  border: 2px solid #1A1614;
  border-top: none;
  z-index: -1;
  animation: piupiu-sway 0.6s infinite alternate;
  border-radius: 0 0 3px 3px;
}
.enemy-knight .enemy-face {
  display: none;
}
.enemy-knight .sword {
  position: absolute;
  top: 10px;
  right: -8px;
  width: 4px;
  height: 30px;
  background: #2A1A10;
  transform: rotate(25deg);
  border-radius: 2px;
  border: 1px solid #1A1614;
}
.enemy-knight .sword::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 8px solid #2A1A10;
  transform: translateX(-50%);
}
.enemy-knight.low-health {
  animation: stagger 0.3s ease-in-out infinite;
}
.enemy-knight.low-health .enemy-body {
  filter: drop-shadow(2px 0 0 #1A1614) drop-shadow(-2px 0 0 #1A1614) drop-shadow(0 2px 0 #1A1614) drop-shadow(0 -2px 0 #1A1614) brightness(0.7);
}
.enemy-knight.low-health .cape {
  clip-path: polygon(0 0, 15% 100%, 30% 60%, 50% 100%, 70% 70%, 85% 100%, 100% 0);
}
@keyframes piupiu-sway {
  from {
    transform: translateX(-50%) translateZ(-1px) rotate(2deg);
  }
  to {
    transform: translateX(-50%) translateZ(-1px) rotate(-2deg);
  }
}
@keyframes stagger {
  0%,
  100% {
    transform: translate(-50%, -100%) rotateX(-45deg) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -100%) rotateX(-45deg) rotate(3deg);
  }
}
.enemy-boss {
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.5);
}
.enemy-boss .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 60px;
  height: 70px;
  background: #1A5276;
  transform: translateX(-50%);
  clip-path: polygon(20% 0%, 80% 0%, 95% 20%, 90% 50%, 85% 100%, 15% 100%, 10% 50%, 5% 20%);
  filter: drop-shadow(3px 0 0 #1A1614) drop-shadow(-3px 0 0 #1A1614) drop-shadow(0 3px 0 #1A1614) drop-shadow(0 -3px 0 #1A1614);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 6px 6px;
}
.enemy-boss .enemy-body::before {
  content: '';
  position: absolute;
  top: 14px;
  left: 8px;
  right: 8px;
  height: 10px;
  background: #1A1614;
  clip-path: polygon(0% 50%, 5% 0%, 15% 30%, 25% 0%, 35% 20%, 50% 40%, 65% 20%, 75% 0%, 85% 30%, 95% 0%, 100% 50%, 90% 100%, 10% 100%);
}
.enemy-boss .enemy-body::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 50%;
  width: 30px;
  height: 10px;
  background: #F5E6D3;
  transform: translateX(-50%);
  clip-path: polygon(0 0, 15% 100%, 30% 0, 45% 100%, 60% 0, 75% 100%, 90% 0, 100% 100%, 100% 0);
}
.enemy-boss .enemy-face {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  display: flex;
  justify-content: space-between;
}
.enemy-boss .enemy-face::before,
.enemy-boss .enemy-face::after {
  content: '';
  width: 10px;
  height: 8px;
  background: #E8635A;
  border-radius: 50%;
  border: 2px solid #c1251b;
  box-shadow: 0 0 8px #E8635A;
}
.enemy-boss .energy-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  border: 3px solid #1E90FF;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: spin-slow 8s linear infinite;
  pointer-events: none;
  box-shadow: 0 0 6px rgba(30, 144, 255, 0.4);
}
.enemy-boss .spikes {
  position: absolute;
  top: 0;
  left: 50%;
  width: 70px;
  transform: translateX(-50%);
}
.enemy-boss .spikes .spike {
  position: absolute;
  top: -5px;
  width: 0;
  height: 0;
}
.enemy-boss .spikes .spike.left {
  left: 0;
  border-left: 5px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 18px solid #11354c;
  transform: rotate(-15deg);
}
.enemy-boss .spikes .spike.right {
  right: 0;
  border-left: 8px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 18px solid #11354c;
  transform: rotate(15deg);
}
.enemy-boss .enemy-eyes {
  display: none;
}
.enemy-boss.enraged .enemy-body {
  animation: enrage-pulse 0.8s infinite;
  background-color: #154361;
}
.enemy-boss.enraged .enemy-face::before,
.enemy-boss.enraged .enemy-face::after {
  background: #FF3333;
  box-shadow: 0 0 12px #FF3333, 0 0 20px rgba(255, 50, 50, 0.5);
}
.enemy-boss.enraged .energy-rings {
  border-color: #E8635A;
  box-shadow: 0 0 10px rgba(232, 99, 90, 0.6);
  animation: spin-slow 3s linear infinite;
}
.enemy-boss.shielded .energy-rings {
  border-width: 5px;
  border-color: #1E90FF;
  box-shadow: 0 0 15px #1E90FF, inset 0 0 10px rgba(30, 144, 255, 0.3);
}
.enemy-boss.summoning .enemy-face::before,
.enemy-boss.summoning .enemy-face::after {
  animation: boss-eye-flash 0.3s ease-out;
}
.enemy-boss.low-health:not(.enraged) .enemy-body {
  filter: drop-shadow(3px 0 0 #1A1614) drop-shadow(-3px 0 0 #1A1614) drop-shadow(0 3px 0 #1A1614) drop-shadow(0 -3px 0 #1A1614) brightness(0.8);
}
@keyframes spin-slow {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes boss-eye-flash {
  0% {
    transform: scale(1);
    box-shadow: 0 0 8px #E8635A;
  }
  50% {
    transform: scale(2);
    box-shadow: 0 0 20px #FFF8F0;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px #E8635A;
  }
}
.enemy-ghost .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 34px;
  height: 38px;
  background: radial-gradient(ellipse at 50% 30%, rgba(180, 200, 255, 0.7) 0%, rgba(140, 170, 230, 0.4) 50%, rgba(100, 140, 200, 0.1) 80%, transparent 100%);
  transform: translateX(-50%);
  border-radius: 50% 50% 30% 30%;
  border: 2px solid rgba(150, 180, 240, 0.5);
  box-shadow: 0 0 12px rgba(150, 180, 240, 0.4);
  animation: ghost-hover 1.5s ease-in-out infinite;
}
.enemy-ghost .enemy-face {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  display: flex;
  justify-content: space-between;
}
.enemy-ghost .enemy-face::before,
.enemy-ghost .enemy-face::after {
  content: '';
  width: 6px;
  height: 8px;
  background: rgba(200, 220, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(200, 220, 255, 0.8);
}
.enemy-ghost .ghost-wisps {
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
}
.enemy-ghost .ghost-wisps .wisp {
  position: absolute;
  bottom: 0;
  width: 8px;
  height: 14px;
  background: linear-gradient(to bottom, rgba(150, 180, 240, 0.4) 0%, transparent 100%);
  border-radius: 0 0 50% 50%;
}
.enemy-ghost .ghost-wisps .wisp.w1 {
  left: 2px;
  animation: wisp-sway 1.2s ease-in-out infinite;
}
.enemy-ghost .ghost-wisps .wisp.w2 {
  left: 11px;
  animation: wisp-sway 1.4s ease-in-out infinite 0.3s;
}
.enemy-ghost .ghost-wisps .wisp.w3 {
  left: 20px;
  animation: wisp-sway 1.1s ease-in-out infinite 0.6s;
}
.enemy-ghost.stealthed .enemy-body {
  opacity: 0.15;
  box-shadow: none;
  border-color: transparent;
}
.enemy-ghost.stealthed .enemy-face::before,
.enemy-ghost.stealthed .enemy-face::after {
  opacity: 0.2;
  box-shadow: none;
}
.enemy-ghost.stealthed .ghost-wisps .wisp {
  opacity: 0.1;
}
.enemy-ghost.stealthed .health-bar {
  opacity: 0.2;
}
.enemy-ghost.low-health .enemy-body {
  animation: ghost-flicker 0.6s infinite;
  filter: saturate(0.4);
}
.enemy-ghost > .health-bar {
  top: -46px;
}
@keyframes ghost-hover {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-6px);
  }
}
@keyframes ghost-flicker {
  0%,
  100% {
    opacity: 0.8;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
  75% {
    opacity: 0.2;
  }
}
@keyframes wisp-sway {
  0%,
  100% {
    transform: translateX(0) scaleY(1);
  }
  50% {
    transform: translateX(3px) scaleY(1.2);
  }
}
.enemy-giant {
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.3);
}
.enemy-giant .enemy-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 44px;
  height: 56px;
  background: #2A1A10;
  transform: translateX(-50%);
  clip-path: polygon(25% 0%, 75% 0%, 90% 15%, 85% 50%, 80% 100%, 20% 100%, 15% 50%, 10% 15%);
  filter: drop-shadow(3px 0 0 #1A1614) drop-shadow(-3px 0 0 #1A1614) drop-shadow(0 3px 0 #1A1614) drop-shadow(0 -3px 0 #1A1614);
  background-image: radial-gradient(circle, rgba(120, 100, 80, 0.3) 1px, transparent 1px);
  background-size: 5px 5px;
}
.enemy-giant .enemy-body::after {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  width: 12px;
  height: 12px;
  background: #E8635A;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 8px #E8635A, 0 0 16px rgba(232, 99, 90, 0.4);
  animation: rune-pulse 2s ease-in-out infinite;
}
.enemy-giant .enemy-face {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  display: flex;
  justify-content: space-between;
}
.enemy-giant .enemy-face::before,
.enemy-giant .enemy-face::after {
  content: '';
  width: 5px;
  height: 3px;
  background: #E8635A;
  box-shadow: 0 0 4px #E8635A;
}
.enemy-giant .giant-club {
  position: absolute;
  top: 12px;
  right: -10px;
  width: 6px;
  height: 36px;
  background: #050302;
  border: 1px solid #1A1614;
  border-radius: 2px;
  transform: rotate(20deg);
}
.enemy-giant .giant-club::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 12px;
  height: 14px;
  background: #180f09;
  border: 2px solid #1A1614;
  border-radius: 3px;
  transform: translateX(-50%);
}
.enemy-giant .trample-fx {
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
}
.enemy-giant.trampling {
  animation: giant-stomp 0.3s ease-out;
}
.enemy-giant.trampling .trample-fx {
  width: 50px;
  height: 20px;
  background: radial-gradient(ellipse at center, rgba(180, 150, 100, 0.5) 0%, rgba(180, 150, 100, 0.2) 50%, transparent 70%);
  opacity: 1;
  animation: trample-crack 0.3s ease-out;
}
.enemy-giant.low-health .enemy-body {
  filter: drop-shadow(3px 0 0 #1A1614) drop-shadow(-3px 0 0 #1A1614) drop-shadow(0 3px 0 #1A1614) drop-shadow(0 -3px 0 #1A1614) brightness(0.7);
}
.enemy-giant.low-health .enemy-body::after {
  box-shadow: 0 0 12px #E8635A, 0 0 24px rgba(232, 99, 90, 0.6);
}
.enemy-giant > .health-bar {
  top: -64px;
  width: 50px;
  height: 12px;
}
@keyframes rune-pulse {
  0%,
  100% {
    opacity: 0.7;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.1);
  }
}
@keyframes giant-stomp {
  0% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.3);
  }
  50% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.35) translateY(3px);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-45deg) scale(1.3);
  }
}
@keyframes trample-crack {
  0% {
    width: 0;
    opacity: 0;
  }
  50% {
    width: 50px;
    opacity: 1;
  }
  100% {
    width: 60px;
    opacity: 0;
  }
}
.enemy.elite {
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.15);
  filter: brightness(1.1);
}
.enemy.elite::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 16px;
  height: 10px;
  background: #DAA520;
  transform: translateX(-50%);
  clip-path: polygon(20% 100%, 0% 30%, 30% 0%, 50% 40%, 70% 0%, 100% 30%, 80% 100%);
  filter: drop-shadow(1px 1px 0 #1A1614);
  z-index: 10;
}
.enemy-boss.elite {
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.5);
}
.enemy-slime.elite .enemy-body {
  box-shadow: 0 0 12px rgba(196, 160, 53, 0.5);
  border-color: #DAA520;
}
.enemy-knight.elite .cape {
  background: repeating-linear-gradient(90deg, #DAA520 0px, #DAA520 3px, #ae8319 3px, #ae8319 5px);
}
.enemy.armored .enemy-body {
  border: 4px solid #2A1A10 !important;
}
.enemy.armored::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(80, 70, 60, 0.25) 0%, rgba(200, 200, 200, 0.15) 50%, rgba(80, 70, 60, 0.25) 100%);
  pointer-events: none;
  z-index: 5;
}
.enemy-slime.armored .enemy-body {
  filter: drop-shadow(2px 0 0 #2A1A10) drop-shadow(-2px 0 0 #2A1A10);
}
.enemy-knight.armored .enemy-body {
  background: #48240a;
}
.enemy.speedy {
  transform: translate(-50%, -100%) rotateX(-45deg) scaleX(0.85);
}
.enemy.speedy::after {
  content: '';
  position: absolute;
  top: 10%;
  left: -20px;
  width: 25px;
  height: 80%;
  background: linear-gradient(to right, transparent 0%, rgba(200, 200, 255, 0.2) 50%, rgba(200, 200, 255, 0.3) 100%);
  pointer-events: none;
  z-index: -1;
}
.enemy.speedy .enemy-body {
  animation-duration: 0.2s !important;
}
.enemy-boss.speedy {
  transform: translate(-50%, -100%) rotateX(-45deg) scale(1.5) scaleX(0.85);
}
.enemy.toxic {
  filter: hue-rotate(40deg);
}
.enemy.toxic::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 50px;
  height: 30px;
  background: radial-gradient(ellipse at center, rgba(120, 200, 50, 0.35) 0%, rgba(120, 200, 50, 0.1) 60%, transparent 80%);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}
.enemy-slime.toxic .enemy-face::before,
.enemy-slime.toxic .enemy-face::after {
  border-color: #E8635A;
  background: rgba(255, 50, 50, 0.3);
}
.enemy-knight.toxic .enemy-body::after {
  background: #E8635A;
  box-shadow: 0 0 4px #E8635A;
}
.enemy.slowed {
  filter: hue-rotate(180deg) brightness(1.2);
}
.enemy.slowed::after {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, rgba(30, 144, 255, 0.6) 0%, transparent 70%);
  transform: translateX(-50%);
  animation: slow-pulse 0.5s infinite;
  pointer-events: none;
}
.enemy.burning {
  animation: burn-shake 0.1s infinite alternate;
}
.enemy.burning::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30px;
  height: 40px;
  background: linear-gradient(to top, #FF6600, #FF9900, transparent);
  transform: translateX(-50%);
  animation: burn-flicker 0.15s infinite alternate;
  opacity: 0.8;
  pointer-events: none;
  z-index: 10;
}
@keyframes slow-pulse {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.2);
  }
}
@keyframes burn-shake {
  0% {
    transform: translate(-50%, -100%) rotateX(-55deg) translateX(-1px);
  }
  100% {
    transform: translate(-50%, -100%) rotateX(-55deg) translateX(1px);
  }
}
@keyframes burn-flicker {
  0% {
    opacity: 0.6;
    height: 35px;
  }
  100% {
    opacity: 1;
    height: 45px;
  }
}
.projectile {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
  z-index: 100;
}
.projectile-arrow {
  width: 20px;
  height: 6px;
  background: #8B4513;
  border: 2px solid #1A1614;
}
.projectile-arrow::after {
  content: '';
  position: absolute;
  left: -10px;
  top: 2px;
  width: 15px;
  height: 2px;
  background: #1A1614;
}
.projectile-cannon {
  width: 14px;
  height: 14px;
  background: #1A1614;
  border-radius: 50%;
}
.projectile-cannon::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 4px;
  height: 4px;
  background: #FFF8F0;
  border-radius: 50%;
}
.projectile-ice {
  width: 15px;
  height: 15px;
  background: #1E90FF;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(2px 2px 0 #1A1614);
}
.projectile-magic {
  width: 16px;
  height: 16px;
  background: #FFF8F0;
  border-radius: 50%;
  border: 4px solid #4B0082;
  box-shadow: 2px 2px 0 #1A1614;
}
.projectile-tesla {
  width: 40px;
  height: 4px;
  background: #708090;
  transform-origin: center;
  clip-path: polygon(0% 40%, 30% 0%, 60% 80%, 100% 40%, 100% 60%, 70% 100%, 40% 20%, 0% 60%);
  box-shadow: 0 0 5px #FFF8F0;
  animation: zap-flash 0.1s infinite;
}
@keyframes zap-flash {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.projectile-flame {
  width: 16px;
  height: 16px;
  background: radial-gradient(ellipse at 70% 70%, #FFF8E8 0%, #F2D864 25%, #E88A42 50%, #D4512A 75%, transparent 100%);
  border-radius: 50% 50% 20% 50%;
  transform: rotate(45deg);
  box-shadow: 0 0 8px #F2D864, 0 0 15px #E88A42, 0 0 25px rgba(255, 102, 0, 0.5);
  animation: flame-projectile-flicker 0.1s ease-in-out infinite alternate;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.projectile-flame::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 100%;
  width: 25px;
  height: 8px;
  transform: translateY(-50%) rotate(-45deg);
  background: linear-gradient(90deg, transparent 0%, #D4512A 30%, #E88A42 60%, #F2D864 90%, #FFF8E8 100%);
  border-radius: 50% 0 0 50%;
  filter: blur(2px);
  opacity: 0.8;
}
.projectile-flame::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 30%;
  width: 40%;
  height: 40%;
  background: #FFF8E8;
  border-radius: 50%;
  filter: blur(1px);
  animation: flame-core-pulse 0.08s ease-in-out infinite alternate;
}
@keyframes flame-projectile-flicker {
  0% {
    transform: rotate(45deg) scale(1);
    filter: brightness(1);
  }
  100% {
    transform: rotate(47deg) scale(1.05);
    filter: brightness(1.1);
  }
}
@keyframes flame-core-pulse {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.impact {
  position: absolute;
  pointer-events: none;
  z-index: 200;
  transform: translate(-50%, -50%);
}
.impact-arrow,
.impact-cannon,
.impact-ice,
.impact-magic,
.impact-tesla,
.impact-flame {
  animation: impact-pop 0.3s ease-out forwards;
}
.impact-tesla::after {
  content: 'ZZZT!';
  font-family: 'Bangers', 'Impact', cursive;
  color: #708090;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  font-size: 1.5rem;
}
.impact-flame::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFF8E8 0%, #F2D864 20%, #E88A42 40%, #D4512A 60%, transparent 80%);
  border-radius: 50%;
  animation: flame-impact-burst 0.4s ease-out forwards;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.impact-flame::after {
  content: 'HOT!';
  font-family: 'Bangers', 'Impact', cursive;
  color: #F2D864;
  font-size: 1.2rem;
  transform: rotate(10deg);
  text-shadow: 0 0 10px #E88A42, 2px 2px 0 #1A1614;
  animation: impact-text-float 0.4s ease-out forwards;
}
@keyframes flame-impact-burst {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
@keyframes impact-text-float {
  0% {
    transform: rotate(10deg) translateY(0);
    opacity: 1;
  }
  100% {
    transform: rotate(10deg) translateY(-20px);
    opacity: 0;
  }
}
.impact-arrow::after {
  content: 'POW!';
  font-family: 'Comic Neue', cursive;
  font-weight: bold;
  font-size: 1.2rem;
  color: #F2D864;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  transform: rotate(-15deg);
}
.impact-cannon::after {
  content: 'BOOM!';
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 2rem;
  color: #E8635A;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  background: #FFF8F0;
  padding: 2px 5px;
  border: 3px solid #1A1614;
  transform: rotate(5deg);
}
.impact-ice::after {
  content: 'CRACK!';
  font-family: 'Comic Neue', cursive;
  color: #2D8A8A;
  font-style: italic;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.impact-magic::after {
  content: 'ZAP!';
  font-family: 'Bangers', 'Impact', cursive;
  color: #D4738A;
  -webkit-text-stroke: 1px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  transform: skew(-10deg);
}
@keyframes impact-pop {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0;
  }
}
.impact-electric-arc {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #708090 0%, rgba(100, 200, 255, 0.6) 30%, transparent 60%);
  border-radius: 50%;
  animation: electric-arc-pulse 0.3s ease-out forwards;
}
.impact-electric-arc::before,
.impact-electric-arc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 2px;
  background: #708090;
  box-shadow: 0 0 5px #708090, 0 0 10px #FFF8F0;
}
.impact-electric-arc::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.impact-electric-arc::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.impact-spark-burst {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.impact-spark-burst::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background: #FFF8F0;
  border-radius: 50%;
  box-shadow: 10px 0 0 #708090, -10px 0 0 #708090, 0 10px 0 #708090, 0 -10px 0 #708090, 7px 7px 0 #FFF8F0, -7px -7px 0 #FFF8F0, 7px -7px 0 #FFF8F0, -7px 7px 0 #FFF8F0;
  animation: spark-burst-expand 0.3s ease-out forwards;
}
@keyframes electric-arc-pulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0;
  }
}
@keyframes spark-burst-expand {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}
.impact-flame-burst {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFF8E8 0%, #F2D864 30%, #E88A42 50%, #D4512A 70%, transparent 90%);
  border-radius: 50%;
  animation: flame-impact-burst 0.4s ease-out forwards;
  filter: blur(1px);
}
.impact-smoke {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(60, 50, 45, 0.5) 0%, rgba(50, 50, 50, 0.3) 50%, transparent 80%);
  border-radius: 50%;
  animation: smoke-rise 0.6s ease-out forwards;
}
@keyframes smoke-rise {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.7;
  }
  100% {
    transform: translate(-50%, -100%) scale(1.5);
    opacity: 0;
  }
}
.scene.screen-shake {
  animation: shake-hard 0.2s;
}
.scene.screen-shake-heavy {
  animation: shake-heavy 0.3s;
}
@keyframes shake-heavy {
  0%,
  100% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(0) translateY(0);
  }
  10% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(-4px) translateY(2px);
  }
  20% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(4px) translateY(-2px);
  }
  30% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(-3px) translateY(3px);
  }
  40% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(3px) translateY(-3px);
  }
  50% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(-2px) translateY(2px);
  }
  60% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(2px) translateY(-2px);
  }
  70% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(-1px) translateY(1px);
  }
  80% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(1px) translateY(-1px);
  }
  90% {
    transform: rotateX(55deg) rotateZ(0deg) translateX(0) translateY(0);
  }
}
@keyframes flame-core {
  0% {
    transform: translateX(-50%) scaleY(1) scaleX(1);
    opacity: 1;
  }
  50% {
    transform: translateX(-48%) scaleY(1.1) scaleX(0.9);
    opacity: 0.9;
  }
  100% {
    transform: translateX(-52%) scaleY(0.9) scaleX(1.1);
    opacity: 1;
  }
}
@keyframes flame-outer {
  0% {
    transform: translateX(-50%) scaleY(1) scaleX(1);
    filter: blur(2px);
  }
  33% {
    transform: translateX(-48%) scaleY(1.15) scaleX(0.85);
    filter: blur(3px);
  }
  66% {
    transform: translateX(-52%) scaleY(0.9) scaleX(1.1);
    filter: blur(2px);
  }
  100% {
    transform: translateX(-50%) scaleY(1.05) scaleX(0.95);
    filter: blur(3px);
  }
}
@keyframes smoke-rise {
  0% {
    transform: translateY(0) scale(0.5);
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-40px) translateX(10px) scale(1.5);
    opacity: 0;
  }
}
.flame-trail {
  position: absolute;
  width: 20px;
  height: 8px;
  background: linear-gradient(90deg, transparent 0%, #D4512A 20%, #E88A42 50%, #F2D864 80%, #FFF8E8 100%);
  border-radius: 50% 0 0 50%;
  filter: blur(1px);
  animation: flame-trail-pulse 0.1s ease-in-out infinite alternate;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.flame-trail::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(circle, #FFF8E8 0%, #F2D864 40%, #E88A42 70%, transparent 100%);
  transform: translateY(-50%);
  border-radius: 50%;
}
@keyframes flame-trail-pulse {
  from {
    opacity: 0.8;
    transform: scaleX(1);
  }
  to {
    opacity: 1;
    transform: scaleX(1.1);
  }
}
.impact-flame-burst {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.impact-flame-burst::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, #FFF8E8 0%, #F2D864 20%, #E88A42 40%, #D4512A 60%, transparent 80%);
  border-radius: 50%;
  animation: flame-burst 0.4s ease-out forwards;
}
.impact-flame-burst::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  top: 20%;
  left: 20%;
  background: radial-gradient(circle, #FFF8E8 0%, #F2D864 50%, transparent 100%);
  border-radius: 50%;
  animation: flame-burst-core 0.3s ease-out forwards;
}
@keyframes flame-burst {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes flame-burst-core {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.burning {
  animation: burning-pulse 0.3s ease-in-out infinite alternate;
}
.burning::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  width: 15px;
  height: 20px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom, #F2D864 0%, #E88A42 40%, #D4512A 70%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: enemy-flame 0.2s ease-in-out infinite alternate;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@keyframes burning-pulse {
  from {
    filter: brightness(1) drop-shadow(0 0 3px #D4512A);
  }
  to {
    filter: brightness(1.2) drop-shadow(0 0 8px #E88A42);
  }
}
@keyframes enemy-flame {
  0% {
    transform: translateX(-50%) scaleY(1) scaleX(1);
  }
  100% {
    transform: translateX(-48%) scaleY(1.2) scaleX(0.8);
  }
}
.tower-flame-idle {
  position: relative;
}
.tower-flame-idle::before,
.tower-flame-idle::after {
  content: '';
  position: absolute;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.tower-flame-idle::before {
  width: 10px;
  height: 15px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom, #FFF8E8 0%, #F2D864 30%, #E88A42 60%, transparent 100%);
  animation: flame-core 0.15s ease-in-out infinite alternate;
  z-index: 2;
}
.tower-flame-idle::after {
  width: 20px;
  height: 25px;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at bottom, #E88A42 0%, #D4512A 40%, #3A1A10 70%, transparent 100%);
  animation: flame-outer 0.2s ease-in-out infinite alternate;
  filter: blur(2px);
  z-index: 1;
}
.aurora-sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout style paint;
}
.aurora-sky::before,
.aurora-sky::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 100%;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.aurora-sky::before {
  top: 10%;
  left: -50%;
  background: linear-gradient(180deg, transparent 0%, rgba(94, 166, 94, 0.5) 20%, rgba(126, 200, 217, 0.4) 50%, transparent 80%);
  mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%);
  animation: aurora-wave-1 8s ease-in-out infinite;
  filter: blur(20px);
  opacity: 0.7;
}
.aurora-sky::after {
  top: 15%;
  left: -30%;
  background: linear-gradient(180deg, transparent 0%, rgba(155, 89, 182, 0.35) 30%, rgba(126, 200, 217, 0.4) 60%, transparent 90%);
  mask-image: linear-gradient(90deg, transparent 10%, black 30%, black 70%, transparent 90%);
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, black 30%, black 70%, transparent 90%);
  animation: aurora-wave-2 12s ease-in-out infinite;
  filter: blur(25px);
  opacity: 0.5;
}
@keyframes aurora-wave-1 {
  0% {
    transform: translateX(0) scaleY(1);
    opacity: 0.6;
  }
  25% {
    transform: translateX(5%) scaleY(1.1);
    opacity: 0.8;
  }
  50% {
    transform: translateX(10%) scaleY(0.9);
    opacity: 0.7;
  }
  75% {
    transform: translateX(5%) scaleY(1.05);
    opacity: 0.6;
  }
  100% {
    transform: translateX(0) scaleY(1);
    opacity: 0.6;
  }
}
@keyframes aurora-wave-2 {
  0% {
    transform: translateX(0) scaleY(1) skewX(0deg);
    opacity: 0.4;
  }
  33% {
    transform: translateX(-5%) scaleY(1.15) skewX(2deg);
    opacity: 0.6;
  }
  66% {
    transform: translateX(5%) scaleY(0.85) skewX(-2deg);
    opacity: 0.5;
  }
  100% {
    transform: translateX(0) scaleY(1) skewX(0deg);
    opacity: 0.4;
  }
}
.aurora-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.aurora-particles::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  background: #FFF8F0;
  border-radius: 50%;
  box-shadow: 100px 50px 0 rgba(255, 255, 255, 0.8), 200px 80px 0 rgba(200, 255, 220, 0.6), 350px 40px 0 rgba(150, 255, 200, 0.7), 500px 100px 0 rgba(100, 200, 255, 0.5), 650px 60px 0 rgba(180, 150, 255, 0.6), 800px 90px 0 rgba(255, 255, 255, 0.7), 950px 45px 0 rgba(150, 255, 230, 0.5), 1100px 85px 0 rgba(200, 200, 255, 0.6);
  animation: aurora-sparkle 4s ease-in-out infinite;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
@keyframes aurora-sparkle {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.5);
  }
}
.winter-stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -2;
}
.winter-stars::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(1px 1px at 20% 30%, white 50%, transparent 100%), radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.8) 50%, transparent 100%), radial-gradient(1px 1px at 50% 20%, rgba(200, 230, 255, 0.9) 50%, transparent 100%), radial-gradient(1px 1px at 60% 50%, white 50%, transparent 100%), radial-gradient(2px 2px at 70% 80%, rgba(255, 255, 255, 0.7) 50%, transparent 100%), radial-gradient(1px 1px at 80% 10%, rgba(200, 200, 255, 0.8) 50%, transparent 100%), radial-gradient(1px 1px at 90% 40%, white 50%, transparent 100%), radial-gradient(1px 1px at 10% 60%, rgba(255, 255, 255, 0.6) 50%, transparent 100%), radial-gradient(2px 2px at 30% 90%, rgba(200, 220, 255, 0.7) 50%, transparent 100%);
  background-size: 200px 200px;
  animation: star-twinkle 5s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.palette-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.palette-aura::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, #D4738A, #2D8A8A, #4B0082, #D4738A);
  border-radius: 50%;
  filter: blur(15px);
  opacity: 0.4;
  animation: aura-rotate 4s linear infinite;
}
@keyframes aura-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.starfield-warp {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  background: radial-gradient(circle at center, transparent 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.8) 100%);
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.starfield-warp::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(2px 100px, white, transparent), radial-gradient(2px 100px, rgba(255, 255, 255, 0.8), transparent), radial-gradient(2px 100px, rgba(200, 220, 255, 0.6), transparent);
  background-size: 100px 100px, 150px 150px, 200px 200px;
  background-position: center;
  animation: warp-speed 0.5s ease-in forwards;
}
@keyframes warp-speed {
  0% {
    transform: scale(1);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}
.boss-entrance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 500;
  perspective: 800px;
  overflow: hidden;
  opacity: 0;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.boss-entrance-overlay.active {
  animation: boss-overlay-fade 3s ease-out forwards;
}
.boss-entrance-overlay::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -50%;
  width: 200%;
  height: 60%;
  background: linear-gradient(90deg, transparent 49.5%, #7B2D8E 49.5%, #7B2D8E 50.5%, transparent 50.5%), linear-gradient(0deg, transparent 49.5%, #2D8A8A 49.5%, #2D8A8A 50.5%, transparent 50.5%);
  background-size: 60px 60px;
  transform: rotateX(75deg);
  transform-origin: center bottom;
  animation: boss-grid-approach 3s ease-out forwards;
  filter: drop-shadow(0 0 10px #7B2D8E);
}
.boss-entrance-overlay::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 50%;
  width: 300px;
  height: 300px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(123, 45, 142, 0.7) 0%, rgba(255, 0, 255, 0.4) 30%, transparent 70%);
  animation: boss-glow-pulse 0.5s ease-in-out infinite alternate;
  filter: blur(20px);
}
@keyframes boss-overlay-fade {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes boss-grid-approach {
  0% {
    background-size: 200px 200px;
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    background-size: 60px 60px;
    opacity: 0;
  }
}
@keyframes boss-glow-pulse {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  to {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}
.boss-warning-text {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 5rem;
  color: #7B2D8E;
  text-shadow: 0 0 20px #7B2D8E, 0 0 40px #2D8A8A;
  z-index: 501;
  pointer-events: none;
  opacity: 0;
}
.boss-warning-text.active {
  animation: boss-text-appear 3s ease-out forwards;
}
@keyframes boss-text-appear {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    letter-spacing: 20px;
  }
  30% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
    letter-spacing: 5px;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}
.enemy-portal {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.enemy-portal::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: conic-gradient(from 0deg, #1A5276 0deg, #D4738A 90deg, #1A5276 180deg, #D4738A 270deg, #1A5276 360deg);
  border-radius: 50%;
  animation: portal-spin 2s linear infinite;
  mask-image: radial-gradient(circle, transparent 20%, black 25%, black 45%, transparent 50%, black 55%, black 75%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle, transparent 20%, black 25%, black 45%, transparent 50%, black 55%, black 75%, transparent 80%);
}
.enemy-portal::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #FFF8F0 0%, #D4738A 50%, transparent 100%);
  border-radius: 50%;
  animation: portal-core-pulse 1s ease-in-out infinite alternate;
}
@keyframes portal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes portal-core-pulse {
  from {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  to {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 1;
  }
}
.boss-shield {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 120%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(200, 200, 220, 0.3) 0%, rgba(150, 150, 180, 0.5) 25%, rgba(100, 100, 140, 0.4) 50%, rgba(150, 150, 180, 0.5) 75%, rgba(200, 200, 220, 0.3) 100%);
  filter: blur(2px);
  animation: shield-morph 3s ease-in-out infinite;
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.boss-shield::before {
  content: '';
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  height: 20%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  filter: blur(5px);
  animation: shield-highlight 2s ease-in-out infinite alternate;
}
@keyframes shield-morph {
  0%,
  100% {
    border-radius: 50% 45% 55% 50% / 50% 55% 45% 50%;
    transform: translate(-50%, -50%) scale(1);
  }
  33% {
    border-radius: 45% 50% 50% 55% / 55% 50% 50% 45%;
    transform: translate(-50%, -50%) scale(1.02);
  }
  66% {
    border-radius: 55% 50% 45% 50% / 50% 45% 55% 50%;
    transform: translate(-50%, -50%) scale(0.98);
  }
}
@keyframes shield-highlight {
  from {
    transform: translateX(0) translateY(0);
    opacity: 0.4;
  }
  to {
    transform: translateX(10px) translateY(5px);
    opacity: 0.7;
  }
}
.damage-number {
  position: absolute;
  pointer-events: none;
  z-index: 50;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 1rem;
  color: #FFF8F0;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
  animation: damage-number-float 0.8s ease-out forwards;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.damage-number.dmg-boss {
  font-size: 1.4rem;
  color: #E8635A;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.damage-number.dmg-crit {
  font-size: 1.4rem;
  color: #F2D864;
  -webkit-text-stroke: 2px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.death-burst {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 40;
  background: #FFF8F0;
  animation: death-burst-fly 0.6s ease-out forwards;
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.death-burst.burst-slime {
  background: #C8E8C8;
}
.death-burst.burst-goblin {
  background: #A8D8F0;
}
.death-burst.burst-knight {
  background: #8B4513;
}
.death-burst.burst-boss,
.death-burst.burst-taniwha {
  background: #1A5276;
}
.shake-light {
  animation: shake-light 0.25s ease-out !important;
}
.shake-heavy {
  animation: shake-heavy 0.4s ease-out !important;
}
.performance-medium .ice-particles::before,
.performance-medium .magic-energy::before,
.performance-medium .flame-particles::before,
.performance-medium .tesla-arc::before,
.performance-medium .ice-particles::after,
.performance-medium .magic-energy::after,
.performance-medium .flame-particles::after,
.performance-medium .tesla-arc::after {
  animation: none !important;
}
.performance-medium .tower.level-3 .tower-base {
  animation: none !important;
}
.performance-medium .enemy.elite::before {
  display: none !important;
}
.performance-medium .enemy.armored::after {
  display: none !important;
}
.performance-medium .enemy.speedy::after {
  display: none !important;
}
.performance-medium .enemy.toxic::after {
  display: none !important;
}
.performance-medium .enemy-ghost .ghost-wisps .wisp {
  animation: none !important;
}
.performance-medium .enemy-giant .enemy-body::after {
  animation: none !important;
}
.performance-low .damage-number,
.performance-low .death-burst {
  display: none !important;
}
.performance-low .aurora-sky,
.performance-low .aurora-particles,
.performance-low .palette-aura,
.performance-low .boss-shield {
  display: none !important;
}
.performance-low .flame-effect::before,
.performance-low .smoke-effect::before,
.performance-low .flame-effect::after,
.performance-low .smoke-effect::after {
  animation: none !important;
}
.performance-low .boss-entrance-overlay::before {
  animation: none !important;
  opacity: 0.5;
}
.performance-low .burning {
  animation: none !important;
  filter: drop-shadow(0 0 5px #D4512A);
}
.performance-low .burning::after {
  display: none;
}
.performance-low .tower:not(.firing):not(.targeting) {
  animation: none !important;
}
.performance-low .tower .tower-orb {
  animation: none !important;
}
.performance-low .tower .tower-ring {
  animation: none !important;
}
.performance-low .tower .tower-spark {
  animation: none !important;
}
.performance-low .tesla-arc,
.performance-low .flame-particles,
.performance-low .ice-particles,
.performance-low .magic-energy {
  display: none !important;
}
.performance-low .enemy-slime .enemy-body {
  animation: none !important;
  box-shadow: none !important;
}
.performance-low .enemy-goblin .enemy-body::after {
  display: none !important;
}
.performance-low .enemy-boss .energy-rings {
  animation: none !important;
}
.performance-low .enemy.elite::before,
.performance-low .enemy.armored::after,
.performance-low .enemy.speedy::after,
.performance-low .enemy.toxic::after {
  display: none !important;
}
.performance-low .tower-arrow.level-2 .tower-body,
.performance-low .tower-arrow.level-3 .tower-body,
.performance-low .tower-cannon.level-3 .tower-body::before,
.performance-low .tower-ice.level-2 .tower-crystal,
.performance-low .tower-ice.level-3 .tower-crystal::before,
.performance-low .tower-magic.level-2 .tower-base,
.performance-low .tower-magic.level-3 .tower-base,
.performance-low .tower-flame.level-2 .tower-tank::before,
.performance-low .tower-flame.level-3 .tower-tank::before {
  background-image: none !important;
}
.performance-low .perfect-particle {
  display: none !important;
}
.boss-kill-slowmo .enemy,
.boss-kill-slowmo .projectile,
.boss-kill-slowmo .impact,
.boss-kill-slowmo .death-particles,
.boss-kill-slowmo .death-burst {
  animation-duration: 3s !important;
}
.boss-kill-zoom {
  transition: transform 0.3s ease-out;
  transform: scale(1.05);
}
.perfect-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #F2D864;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1001;
  animation: confetti-fall 1.5s ease-in forwards;
}
@keyframes confetti-fall {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) rotate(720deg);
  }
}
.damage-number.dmg-crit {
  color: #F2D864;
  font-size: 18px;
  font-weight: bold;
  -webkit-text-stroke: 2px #000;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}
@media (prefers-reduced-motion: reduce) {
  .damage-number,
  .death-burst {
    animation: none !important;
    display: none !important;
  }
  .shake-light,
  .shake-heavy {
    animation: none !important;
  }
  .aurora-sky,
  .aurora-particles,
  .boss-entrance-overlay,
  .enemy-portal,
  .boss-shield,
  .palette-aura,
  .starfield-warp,
  .aurora-sky::before,
  .aurora-particles::before,
  .boss-entrance-overlay::before,
  .enemy-portal::before,
  .boss-shield::before,
  .palette-aura::before,
  .starfield-warp::before,
  .aurora-sky::after,
  .aurora-particles::after,
  .boss-entrance-overlay::after,
  .enemy-portal::after,
  .boss-shield::after,
  .palette-aura::after,
  .starfield-warp::after {
    animation: none !important;
  }
  .flame-effect::before,
  .flame-effect::after {
    animation: none !important;
  }
  .burning {
    animation: none !important;
  }
  .burning::after {
    animation: none !important;
  }
  .boss-entrance-overlay.active {
    opacity: 0.8;
    animation: none !important;
  }
  .boss-entrance-overlay.active::before {
    animation: none !important;
    background-size: 60px 60px;
    opacity: 0.5;
  }
  .boss-warning-text.active {
    animation: none !important;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .tower,
  .tower .tower-orb,
  .tower .tower-ring,
  .tower .tower-spark,
  .tower .tower-coil,
  .tower .tower-base {
    animation: none !important;
  }
  .tesla-arc,
  .flame-particles,
  .ice-particles,
  .magic-energy,
  .tesla-arc::before,
  .flame-particles::before,
  .ice-particles::before,
  .magic-energy::before,
  .tesla-arc::after,
  .flame-particles::after,
  .ice-particles::after,
  .magic-energy::after {
    animation: none !important;
  }
  .enemy,
  .enemy .enemy-body,
  .enemy .cape,
  .enemy .energy-rings {
    animation: none !important;
  }
}
.screen-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
}
.screen-flash.flash-damage {
  background: #E8635A;
  animation: screen-flash-anim 0.2s ease-out;
}
.screen-flash.flash-gold {
  background: #F2D864;
  animation: screen-flash-anim 0.3s ease-out;
}
.screen-flash.flash-heal {
  background: #5EA65E;
  animation: screen-flash-anim 0.25s ease-out;
}
@keyframes screen-flash-anim {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}
.screen-flash.flash-combo {
  background: #F2D864;
  animation: screen-flash-anim 0.4s ease-out;
}
.combo-milestone {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 3rem;
  font-weight: bold;
  pointer-events: none;
  z-index: 600;
  animation: combo-text-pop 1.5s ease-out forwards;
  -webkit-text-stroke: 3px #1A1614;
  text-shadow: 1px 1px 0 #1A1614, -1px -1px 0 #1A1614, 1px -1px 0 #1A1614, -1px 1px 0 #1A1614;
}
.combo-milestone.combo-nice {
  color: #F2D864;
  font-size: 2.5rem;
}
.combo-milestone.combo-great {
  color: #E87C3A;
  font-size: 3rem;
}
.combo-milestone.combo-epic {
  color: #D4738A;
  font-size: 3.5rem;
  text-shadow: 0 0 20px #D4738A, 0 0 40px rgba(212, 115, 138, 0.5);
}
.combo-milestone.combo-legendary {
  color: #2D8A8A;
  font-size: 4rem;
  text-shadow: 0 0 30px #2D8A8A, 0 0 60px rgba(45, 138, 138, 0.5);
}
@keyframes combo-text-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
  40% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) translateY(-20px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1) translateY(-40px);
  }
}
.boss-rage-pulse {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 499;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(200, 0, 0, 0.3) 80%, rgba(200, 0, 0, 0.5) 100%);
}
.boss-rage-pulse.active {
  animation: boss-rage-anim 3s ease-out forwards;
}
@keyframes boss-rage-anim {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  20% {
    opacity: 0.6;
  }
  30% {
    opacity: 1;
  }
  40% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
  }
}
.synergy-flash-line {
  position: absolute;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #D4738A 20%, #2D8A8A 50%, #D4738A 80%, transparent 100%);
  transform-origin: 0 50%;
  pointer-events: none;
  z-index: 15;
  animation: synergy-line-flash 0.6s ease-out forwards;
  box-shadow: 0 0 6px #D4738A, 0 0 12px rgba(45, 138, 138, 0.4);
}
@keyframes synergy-line-flash {
  0% {
    opacity: 0;
    transform: rotate(var(--angle, 0deg)) scaleX(0);
  }
  30% {
    opacity: 1;
    transform: rotate(var(--angle, 0deg)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: rotate(var(--angle, 0deg)) scaleX(1);
  }
}
.auth-container {
  position: absolute;
  top: 15px;
  right: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 20;
}
.auth-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  padding: 6px 16px;
  background: #2D8A8A;
  color: #FFF8F0;
  border: 2px solid #1A1614;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 8px 8px 0 #1A1614;
}
.auth-btn:hover {
  background: #3ab0b0;
}
.auth-btn.auth-btn-small {
  font-size: 13px;
  padding: 4px 10px;
  background: #E8635A;
}
.auth-btn.auth-btn-small:hover {
  background: #ee8d87;
}
.auth-user {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  color: #F2D864;
  text-shadow: 1px 1px 0 #1A1614;
}
.auth-verify-badge {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 11px;
  padding: 2px 6px;
  background: #E8635A;
  color: #FFF8F0;
  border-radius: 3px;
  cursor: pointer;
  animation: pulse 2s infinite;
}
.auth-verify-badge:hover {
  background: #ee8d87;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
.auth-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100001;
}
.auth-modal-content {
  background: #1A1614;
  border: 3px solid #2D8A8A;
  border-radius: 8px;
  padding: 30px;
  width: 360px;
  max-width: 90vw;
  position: relative;
  box-shadow: 8px 8px 0 #1A1614;
}
.auth-modal-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 28px;
  color: #F2D864;
  text-align: center;
  margin-bottom: 20px;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}
.auth-error {
  background: rgba(232, 99, 90, 0.2);
  border: 1px solid #E8635A;
  color: #E8635A;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  margin-bottom: 15px;
}
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-field label {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 14px;
  color: #FFF8F0;
}
.auth-field input {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 15px;
  padding: 8px 12px;
  background: #2A2420;
  color: #FFF8F0;
  border: 2px solid #444;
  border-radius: 4px;
  outline: none;
  transition: border-color 0.2s;
}
.auth-field input:focus {
  border-color: #2D8A8A;
}
.auth-field input::placeholder {
  color: #666;
}
.auth-submit {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 18px;
  padding: 10px;
  margin-top: 8px;
  background: #2D8A8A;
  color: #FFF8F0;
  border: 2px solid #1A1614;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: 8px 8px 0 #1A1614;
}
.auth-submit:hover {
  background: #3ab0b0;
}
.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.auth-switch {
  text-align: center;
  margin-top: 15px;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 13px;
  color: #888;
}
.auth-switch a {
  color: #2D8A8A;
  text-decoration: none;
  font-weight: bold;
}
.auth-switch a:hover {
  text-decoration: underline;
}
.auth-close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  color: #888;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.auth-close:hover {
  color: #FFF8F0;
}
.auth-divider {
  display: flex;
  align-items: center;
  margin: 15px 0;
  color: #666;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #444;
}
.auth-divider span {
  padding: 0 12px;
}
.auth-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 14px;
  padding: 10px;
  background: #FFF8F0;
  color: #333;
  border: 2px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.auth-google-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}
.auth-google-btn svg {
  flex-shrink: 0;
}
.auth-verify-pending {
  text-align: center;
  padding: 10px 0;
}
.auth-verify-icon {
  font-size: 48px;
  margin-bottom: 15px;
  color: #2D8A8A;
}
.auth-verify-pending p {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 14px;
  color: #FFF8F0;
  margin-bottom: 10px;
}
.auth-verify-email {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 13px;
  color: #2D8A8A;
  word-break: break-all;
}
.auth-verify-hint {
  font-size: 12px !important;
  color: #888 !important;
  margin-top: 15px !important;
}
.auth-verify-hint a {
  color: #2D8A8A;
  text-decoration: none;
}
.auth-verify-hint a:hover {
  text-decoration: underline;
}
.leaderboard-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 18px;
  color: #F2D864;
  text-align: center;
  margin-bottom: 8px;
}
.leaderboard-list {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 13px;
  color: #FFF8F0;
  max-height: 140px;
  overflow-y: auto;
}
.leaderboard-loading {
  text-align: center;
  color: #888;
  padding: 10px;
}
.leaderboard-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.leaderboard-row:last-child {
  border-bottom: none;
}
.leaderboard-row.my-row,
.leaderboard-row.leaderboard-row-self {
  background: rgba(45, 138, 138, 0.2);
  font-weight: bold;
  border-left: 3px solid #2D8A8A;
}
.leaderboard-rank {
  width: 30px;
  color: #F2D864;
}
.leaderboard-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leaderboard-score {
  width: 60px;
  text-align: right;
  color: #F2D864;
}
.lb-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}
.lb-tab {
  flex: 1;
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 12px;
  padding: 6px 4px;
  background: #2A2420;
  color: #888;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.lb-tab.selected {
  background: #2D8A8A;
  color: #FFF8F0;
  border-color: #2D8A8A;
}
.lb-tab:hover:not(.selected) {
  border-color: #2D8A8A;
  color: #FFF8F0;
}
.lb-period-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  justify-content: center;
}
.lb-period-tab {
  font-family: 'Comic Neue', cursive;
  font-size: 0.8rem;
  padding: 3px 10px;
  background: rgba(26, 22, 20, 0.6);
  color: #888;
  border: 1px solid #444;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.lb-period-tab:hover {
  border-color: #F2D864;
  color: #FFF8F0;
}
.lb-period-tab.active {
  background: #F2D864;
  color: #1A1614;
  border-color: #F2D864;
  font-weight: bold;
}
.lb-full-list {
  max-height: 300px;
  overflow-y: auto;
}
.lb-my-rank {
  margin-top: 10px;
  text-align: center;
}
.lb-my-rank-text {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  color: #FFF8F0;
}
.lb-my-rank-text strong {
  color: #F2D864;
}
.lb-date-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.lb-date-arrow {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  background: #2A2420;
  border: 2px solid #444;
  border-radius: 3px;
  color: #F2D864;
  cursor: pointer;
  padding: 2px 8px;
  transition: border-color 0.2s;
}
.lb-date-arrow:hover:not(.disabled) {
  border-color: #F2D864;
}
.lb-date-arrow.disabled {
  opacity: 0.3;
  cursor: default;
}
.lb-date-label {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 14px;
  color: #FFF8F0;
  min-width: 80px;
  text-align: center;
}
.lb-challenge-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.lb-challenge-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 14px;
  color: #F2D864;
}
.lb-challenge-desc {
  font-size: 11px;
  color: #999;
  width: 100%;
}
.leaderboard-duration {
  width: 45px;
  text-align: right;
  color: #aaa;
  font-size: 11px;
}
.lb-my-streak {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 13px;
  color: #E88A42;
  margin-top: 4px;
}
.save-load-content {
  width: 420px;
}
.save-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.save-slot {
  background: #2A2420;
  border: 2px solid #444;
  border-radius: 4px;
  padding: 12px;
  transition: border-color 0.2s;
}
.save-slot:hover {
  border-color: #2D8A8A;
}
.save-slot.save-slot-empty {
  opacity: 0.5;
  border-style: dashed;
}
.save-slot.save-slot-empty:hover {
  border-color: #444;
}
.save-slot-name {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  color: #F2D864;
  margin-bottom: 4px;
}
.save-slot-info {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 12px;
  color: #888;
  margin-bottom: 8px;
}
.save-slot-actions {
  display: flex;
  gap: 8px;
}
.save-slot-btn {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 13px;
  padding: 4px 12px;
  border: 1px solid #444;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}
.save-slot-btn.load-btn {
  background: #2D8A8A;
  color: #FFF8F0;
}
.save-slot-btn.load-btn:hover {
  background: #3ab0b0;
}
.save-slot-btn.delete-btn {
  background: transparent;
  color: #E8635A;
  border-color: #E8635A;
}
.save-slot-btn.delete-btn:hover {
  background: rgba(232, 99, 90, 0.2);
}
.save-slot-loading {
  text-align: center;
  color: #888;
  padding: 20px;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
}
.save-game-btn {
  margin-left: 8px;
  font-size: 13px !important;
  padding: 4px 10px !important;
}
.game-over-stats {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 14px;
  color: #FFF8F0;
  margin-bottom: 10px;
}
.game-over-rank {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 18px;
  color: #F2D864;
}
.stats-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #1A1614;
  border: 3px solid #2D8A8A;
  border-radius: 8px;
  padding: 30px;
  width: 500px;
  max-width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 8px 8px 0 #1A1614;
}
.stats-title {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 28px;
  color: #F2D864;
  text-align: center;
  margin-bottom: 20px;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: #2A2420;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 12px;
  text-align: center;
}
.stat-card-label {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 11px;
  color: #888;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stat-card-value {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 22px;
  color: #F2D864;
}
.verify-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100002;
}
.verify-modal-content {
  background: #1A1614;
  border: 3px solid #F2D864;
  border-radius: 8px;
  padding: 30px;
  width: 400px;
  max-width: 90vw;
  text-align: center;
  box-shadow: 8px 8px 0 #1A1614;
}
.verify-modal-content h3 {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 24px;
  color: #F2D864;
  margin: 0 0 15px;
}
.verify-modal-content p {
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  font-size: 14px;
  color: #FFF8F0;
  margin: 0 0 12px;
  line-height: 1.5;
}
.verify-modal-content .verify-email-hint {
  color: #2D8A8A;
  font-weight: bold;
}
.verify-modal-content .verify-note {
  font-size: 12px;
  color: #888;
  margin-top: 15px;
}
.verify-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}
.verify-buttons button {
  font-family: 'Bangers', 'Impact', cursive;
  font-size: 16px;
  padding: 10px 20px;
  border: 2px solid #1A1614;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 8px 8px 0 #1A1614;
}
.verify-buttons button.btn-primary {
  background: #2D8A8A;
  color: #FFF8F0;
}
.verify-buttons button.btn-primary:hover {
  background: #3ab0b0;
}
.verify-buttons button.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.verify-buttons button.btn-secondary {
  background: #444;
  color: #FFF8F0;
}
.verify-buttons button.btn-secondary:hover {
  background: #555;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Comic Neue', 'Comic Sans MS', sans-serif;
  background: #000;
}
.hidden {
  display: none !important;
}
.templates {
  display: none !important;
}