:root {
  --bg-navy: #0a1730;
  --bg-mid: #13284b;
  --panel-glass: rgba(248, 252, 255, 0.16);
  --panel-edge: rgba(212, 240, 255, 0.45);
  --text-main: #ebf8ff;
  --text-soft: #b7d8ea;
  --mint: #5ee0d4;
  --aqua: #67ccff;
  --pink: #ffa5d5;
  --peach: #ffd08a;
}

* {
  font-family: "Sora", "Segoe UI", sans-serif !important;
}

body {
  color: var(--text-main) !important;
  background:
    radial-gradient(1500px 900px at 8% 2%, #2d5f92 0%, transparent 55%),
    radial-gradient(1000px 900px at 95% 12%, #5f427f 0%, transparent 48%),
    linear-gradient(160deg, var(--bg-mid) 0%, var(--bg-navy) 56%, #090f1e 100%) !important;
  overflow: hidden;
}

body::before,
body::after {
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.52;
}

body::before {
  width: 420px;
  height: 420px;
  left: -120px;
  top: -140px;
  background: #74e8ff;
}

body::after {
  width: 470px;
  height: 470px;
  right: -170px;
  bottom: -170px;
  background: #ffabd3;
}

#game-arena,
.dashboard-container,
.side-controls-panel,
.auth-overlay {
  z-index: 4;
}

#game-arena {
  gap: 14px !important;
}

#secret-banner {
  font-family: "Bungee", "Trebuchet MS", sans-serif !important;
  font-size: clamp(1.1rem, 2.4vw, 1.9rem) !important;
  letter-spacing: 0.03em;
}

.duck-wrapper {
  max-width: 360px !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.duck-image {
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.3));
}

.click-counter {
  font-family: "Bungee", "Trebuchet MS", sans-serif !important;
  font-size: clamp(1rem, 2.1vw, 1.35rem) !important;
  color: #ffffff !important;
  background: var(--panel-glass) !important;
  border: 1px solid var(--panel-edge) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32) !important;
  backdrop-filter: blur(14px);
}

.milestone-title {
  color: var(--text-soft) !important;
  text-shadow: none !important;
}

.combo-meter {
  color: #ffe08f !important;
  text-shadow: 0 0 12px rgba(255, 214, 117, 0.58) !important;
}

.save-indicator {
  color: #9de9ce !important;
}

.back-button,
.account-button,
.upgrades-button,
.manual-save-button,
.auth-submit,
.upgrade-btn,
.cosmetic-btn,
.dance-btn,
.auth-logout {
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25) !important;
  transition: transform 180ms ease, filter 180ms ease, box-shadow 180ms ease !important;
}

.back-button,
.account-button,
.upgrades-button,
.manual-save-button {
  backdrop-filter: blur(12px);
}

.back-button:hover,
.account-button:hover,
.upgrades-button:hover,
.manual-save-button:hover,
.auth-submit:hover,
.upgrade-btn:hover,
.cosmetic-btn:hover,
.dance-btn:hover,
.auth-logout:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06);
}

.back-button {
  background: linear-gradient(135deg, var(--aqua), #4395f8) !important;
  color: #ffffff !important;
}

.account-button {
  background: linear-gradient(135deg, #73efd6, #48c8b8) !important;
  color: #083039 !important;
}

.upgrades-button {
  background: linear-gradient(135deg, #ffb4de, #ff78be) !important;
  color: #3c1230 !important;
}

.manual-save-button {
  background: linear-gradient(135deg, #ffe0a1, #ffbd66) !important;
  color: #473100 !important;
}

.auth-overlay {
  background: rgba(7, 14, 30, 0.6) !important;
  backdrop-filter: blur(6px) saturate(120%);
}

.auth-modal,
.upgrades-modal {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06)),
    linear-gradient(160deg, #15345f, #0c2341 56%, #0a1b34) !important;
  border: 1px solid var(--panel-edge) !important;
  border-radius: 22px !important;
  box-shadow: 0 30px 80px rgba(1, 10, 25, 0.6) !important;
}

.auth-modal-title,
.upgrades-modal .auth-modal-title,
.dance-choice-title {
  color: #f4fbff !important;
  text-shadow: none !important;
  font-family: "Bungee", "Trebuchet MS", sans-serif !important;
  letter-spacing: 0.02em;
}

.auth-tabs {
  border-bottom: 1px solid rgba(189, 232, 255, 0.3) !important;
}

.auth-tab {
  color: #b7d4e8 !important;
}

.auth-tab.active,
.upgrades-modal .auth-tab.active {
  color: #ffffff !important;
  border-bottom-color: #86ddff !important;
}

.auth-input {
  background: rgba(236, 249, 255, 0.12) !important;
  color: #f4fcff !important;
  border: 1px solid rgba(196, 234, 255, 0.38) !important;
}

.auth-input::placeholder {
  color: rgba(227, 243, 255, 0.7) !important;
}

.auth-input:focus {
  border-color: #96e4ff !important;
  box-shadow: 0 0 0 3px rgba(122, 216, 255, 0.22) !important;
}

.auth-submit,
.upgrade-btn,
.cosmetic-btn.buy,
.dance-btn {
  background:
    linear-gradient(120deg, #7de6ff 0%, #5b8eff 35%, #d877ff 70%, #ff85c3 100%) !important;
  background-size: 220% 220% !important;
  color: #ffffff !important;
  animation: buttonWave 3.4s ease infinite;
}

.dance-btn.yellow,
.cosmetic-btn.equip {
  background:
    linear-gradient(120deg, #ffd68a 0%, #ffa0c3 48%, #8de4ff 100%) !important;
  color: #44231f !important;
}

.auth-logout,
.cosmetic-btn.unequip {
  background: rgba(248, 252, 255, 0.14) !important;
  color: #ddf1ff !important;
  border-color: rgba(196, 234, 255, 0.54) !important;
}

.upgrade-item,
#panel-cosmetics-list .upgrade-item {
  background: rgba(240, 250, 255, 0.08) !important;
  border: 1px solid rgba(196, 233, 255, 0.3) !important;
  border-radius: 14px !important;
}

.upgrade-name {
  color: #eff9ff !important;
}

.upgrade-desc {
  color: #b9d9eb !important;
}

.upgrade-cost,
.rebirth-cost {
  color: #ffe299 !important;
}

#panel-upgrades-list .farm-item,
#panel-upgrades-list .rebirth-item {
  background: rgba(240, 250, 255, 0.08) !important;
  border: 1px solid rgba(196, 233, 255, 0.3) !important;
}

#panel-upgrades-list .farm-btn,
#panel-upgrades-list .rebirth-btn {
  background:
    linear-gradient(120deg, #7de6ff 0%, #5b8eff 35%, #d877ff 70%, #ff85c3 100%) !important;
  background-size: 220% 220% !important;
  animation: buttonWave 3.4s ease infinite;
}

.volume-controls-panel {
  background: rgba(240, 250, 255, 0.08) !important;
  border: 1px solid rgba(196, 233, 255, 0.35) !important;
  border-radius: 14px !important;
  color: #eef9ff !important;
}

.volume-controls-panel h4 {
  color: #f2fbff !important;
  text-shadow: none !important;
  font-family: "Bungee", "Trebuchet MS", sans-serif !important;
  font-size: 0.95rem !important;
}

.critical-popup {
  color: #9cf5d6 !important;
  text-shadow: 0 0 8px rgba(68, 233, 167, 0.65), 0 0 18px rgba(130, 242, 205, 0.55) !important;
}

@keyframes buttonWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@media (max-width: 767px) {
  .back-button,
  .account-button,
  .upgrades-button,
  .manual-save-button {
    font-size: 0.78rem !important;
  }

  .duck-wrapper {
    max-width: 290px !important;
    padding: 0.7rem !important;
  }
}