* {
  box-sizing: border-box;

  -webkit-user-select: none;
  user-select: none;

  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  overflow: hidden;
  background: #111;
  font-family: Arial, sans-serif;

  touch-action: manipulation;
}

canvas {
  display: block;
  background: #1c1c1c;

  user-select: none;
  -webkit-user-select: none;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}

/* =========================
   TOP LEFT STATS
========================= */

#stats {
  position: absolute;
  top: 16px;
  left: 16px;

  display: flex;
  gap: 10px;

  background: rgba(15,15,15,0.75);

  padding: 10px 14px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,0.08);
}

.stat {
  color: white;
  font-size: 16px;
  font-weight: bold;

  min-width: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  line-height: 1;
}

.stat .icon {
  width: 18px;
  height: 18px;
}

/* =========================
   BOTTOM UPGRADE BAR
========================= */

#upgradeBar {
  position: absolute;

  bottom: 20px;
  left: 50%;

  transform: translateX(-50%);

  display: flex;
  gap: 12px;

  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  width: max-content;
  max-width: calc(100vw - 30px);

  max-height: 40vh;
  overflow-y: auto;

  background: rgba(15,15,15,0.75);

  padding: 8px 12px;
  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.08);

  pointer-events: auto;
}

/* =========================
   BUTTONS
========================= */

.upgradeBtn {
  border: none;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-width: 110px;
  height: 48px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.04)
    );

  color: white;

  padding: 12px 18px;

  border-radius: 14px;

  font-size: 15px;
  font-weight: bold;

  cursor: pointer;

  transition:
    transform 0.12s,
    background 0.2s,
    border-color 0.2s;

  border: 1px solid rgba(255,255,255,0.06);

  white-space: nowrap;
}

.upgradeBtn:hover {
  transform: translateY(-2px);

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,0.2),
      rgba(255,255,255,0.08)
    );

  border-color: rgba(255,255,255,0.15);
}

.upgradeBtn:active {
  transform: scale(0.96);
}

.healBtn {
  color: #ffb3b3;
}

/* =========================
   ICON BASE
========================= */

.icon {
  width: 18px;
  height: 18px;

  display: inline-block;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  flex-shrink: 0;
}

.stat .icon {
  display: flex;
  align-items: center;
  justify-content: center;

  transform: translateY(1px);
}

/* =========================
   LIGHTNING
========================= */

.lightningIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2366ccff' d='M13 2L4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E");
}

/* =========================
   FIRE
========================= */

.fireIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff9933' d='M13 3s2 3 2 5a3 3 0 11-6 0c0-2 2-5 2-5s-6 4-6 10a8 8 0 0016 0c0-6-6-10-6-10z'/%3E%3C/svg%3E");
}

/* =========================
   RANGE
========================= */

.rangeIcon {
  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='12' r='9' stroke='%23ffffff' stroke-width='2' fill='none'/%3E%3Ccircle cx='12' cy='12' r='4' fill='%23ffffff'/%3E%3Cpath d='M12 2v4M12 18v4M2 12h4M18 12h4' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
}

/* =========================
   HEAL
========================= */

.healIcon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6666' d='M12 21s-7-4.35-9.33-8A5.33 5.33 0 0112 4.67 5.33 5.33 0 0121.33 13C19 16.65 12 21 12 21z'/%3E%3C/svg%3E");
}

/* =========================
   GAME OVER
========================= */

#gameOver {
  position: absolute;
  inset: 0;

  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  background: rgba(0,0,0,0.8);

  color: white;
  font-size: 24px;

  z-index: 20;

  padding: 20px;
  text-align: center;
}

button {
  margin-top: 20px;
  padding: 12px 20px;

  border: none;
  border-radius: 10px;

  cursor: pointer;

  font-size: 16px;
  font-weight: bold;

  transition:
    transform 0.12s,
    opacity 0.2s;
}

button:hover {
  opacity: 0.9;
}

button:active {
  transform: scale(0.96);
}

/* =========================
   DESKTOP BLUR
========================= */

@media (min-width: 701px) {

  #stats,
  #upgradeBar {
    backdrop-filter: blur(10px);
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  #stats {
    top: 10px;
    left: 10px;

    padding: 8px 10px;
    gap: 8px;

    border-radius: 12px;

    flex-wrap: wrap;

    max-width: calc(100vw - 20px);
  }

  .stat {
    font-size: 14px;
    min-width: auto;
  }

  #upgradeBar {
    bottom: 10px;

    gap: 8px;
    padding: 6px 10px;

    width: calc(100vw - 20px);

    border-radius: 16px;
  }

  .upgradeBtn {
    min-width: 90px;

    padding: 10px 12px;

    font-size: 13px;

    height: 44px;
  }

  .icon {
    width: 16px;
    height: 16px;
  }

  #gameOver {
    font-size: 18px;
  }

  #gameOver button {
    width: 100%;
    max-width: 280px;
  }
}

/* =========================================
SKILL MENU
========================================= */

#skillMenu {
  position: absolute;
  inset: 0;

  display: none;

  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.75);

  z-index: 30;

  backdrop-filter: blur(8px);
}

#skillPanel {
  width: 420px;
  max-width: calc(100vw - 30px);

  background: rgba(20,20,20,0.95);

  border-radius: 24px;

  padding: 24px;

  border: 1px solid rgba(255,255,255,0.08);

  color: white;
}

.skillTitle {
  font-size: 32px;
  font-weight: bold;

  margin-bottom: 10px;
}

.skillPoints {
  font-size: 20px;

  color: #ffd54a;

  margin-bottom: 24px;
}

.skillStat {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 16px;

  padding: 14px;

  border-radius: 16px;

  background: rgba(255,255,255,0.04);
}

.skillDesc {
  font-size: 13px;

  opacity: 0.7;

  margin-top: 4px;
}

.skillStat button {
  margin: 0;

  min-width: 90px;

  background: #2c7be5;

  color: white;
}

.skillHint {
  margin-top: 20px;

  opacity: 0.7;

  text-align: center;
}