:root {
  --accent: #c97b3a;
  --accent2: #8b5e3c;
  --gold: #d4962a;
  --bg-deep: #0f0800;
  --bg-mid: #1a0e00;
  --panel-bg: rgba(255 255 255/0.05);
  --panel-bg2: rgba(255 255 255/0.09);
  --border: rgba(255 255 255/0.12);
  --text: #f0e6ff;
  --text-soft: rgba(240 230 255/0.55);
  --glow: rgba(201 123 58/0.4);
  --radius: 18px;
  --trans: 0.25s ease;
}
body.theme-leuz {
  --accent: #ff6eb4;
  --accent2: #f472b6;
  --gold: #ff3399;
  --glow: rgba(255 110 180/0.45);
  --bg-deep: #150010;
  --bg-mid: #220018;
}
body.theme-mela {
  --accent: #a78bfa;
  --accent2: #818cf8;
  --gold: #c4b5fd;
  --glow: rgba(167 139 250/0.4);
  --bg-deep: #03000f;
  --bg-mid: #08001a;
}
body.theme-golden {
  --accent: #fbbf24;
  --accent2: #f59e0b;
  --gold: #fff176;
  --glow: rgba(251 191 36/0.5);
  --bg-deep: #0d0800;
  --bg-mid: #1a1000;
}
body.theme-goldensparkle {
  --accent: #ffe066;
  --accent2: #ffd700;
  --gold: #fffacd;
  --glow: rgba(255 224 0/0.6);
  --bg-deep: #0a0700;
  --bg-mid: #181000;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Nunito", sans-serif;
  background: var(--bg-deep);
  color: var(--text);
  height: 100dvh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 58px 1fr 62px;
  transition: background 1s ease;
}
#bg-canvas,
#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#bg-canvas {
  z-index: 0;
}
#particles {
  z-index: 5;
  overflow: hidden;
}
#topbar {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 18px;
  background: rgba(0 0 0/0.45);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}
.logo-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.logo-text {
  font-size: 1.3rem;
  font-weight: 900;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  pointer-events: none;
}
.top-stats .stat-bubble {
  pointer-events: all;
}
#topbar > #pause-btn {
  justify-self: end;
}
.logo-text img {
  vertical-align: middle;
  width: auto !important;
  height: 1.6em !important;
  display: inline-block;
}
.stat-bubble {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 5px 14px 5px 10px;
  transition: var(--trans);
}
.stat-bubble:hover {
  border-color: var(--accent);
}
.stat-icon {
  font-size: 1rem;
}
.stat-num {
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--gold);
  line-height: 1.1;
}
.stat-lbl {
  font-size: 0.6rem;
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.gem-bubble {
  border-color: var(--accent2);
}
.icon-btn {
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
  flex-shrink: 0;
}
.icon-btn:hover,
.player-btn:hover,
.modal-btn:hover,
.tab-btn.active,
.tab-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
}
.icon-btn:hover,
.player-btn:hover {
  color: var(--text);
}
#app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  overflow: hidden;
}
.panel {
  background: rgba(0 0 0/0.3);
  backdrop-filter: blur(10px);
  padding: 14px 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
}
#left-panel {
  border-right: 1px solid var(--border);
}
#right-panel {
  border-left: 1px solid var(--border);
}
.panel::-webkit-scrollbar {
  width: 3px;
}
.panel::-webkit-scrollbar-track {
  background: transparent;
}
.panel::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 10px;
}
.panel-heading {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.info-card {
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  font-size: 0.78rem;
  line-height: 1.85;
  color: var(--text-soft);
}
.info-row strong {
  color: var(--text);
  font-weight: 800;
}
.card-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.upg-card,
.perma-card {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 11px 13px;
  cursor: pointer;
  transition: var(--trans);
}
.upg-card:hover:not(.cant-buy) {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0 0 0/0.3);
  background: var(--panel-bg2);
}
.upg-card.cant-buy,
.perma-card.cant-buy {
  opacity: 0.38;
  cursor: not-allowed;
}
.upg-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 3px;
}
.upg-name {
  font-size: 0.82rem;
  font-weight: 800;
}
.upg-badge {
  font-size: 0.68rem;
  font-weight: 800;
  background: var(--accent);
  color: #fff;
  padding: 1px 7px;
  border-radius: 20px;
}
.upg-desc {
  font-size: 0.7rem;
  color: var(--text-soft);
  margin-bottom: 5px;
  line-height: 1.4;
}
.upg-cost,
.perma-gem-cost {
  font-size: 0.78rem;
  font-weight: 800;
}
.upg-cost {
  color: var(--gold);
}
.perma-gem-cost {
  color: var(--accent2);
}
.upg-section-header {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 4px 3px;
  margin-top: 4px;
  border-bottom: 1px solid var(--border);
}
#center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  position: relative;
}
#prestige-display {
  text-align: center;
  width: 100%;
  max-width: 320px;
}
.prestige-name {
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 6px;
}
.prestige-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(255 255 255/0.1);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 6px;
}
.prestige-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 10px;
  transition: width 0.4s ease;
}
.prestige-label {
  font-size: 0.7rem;
  color: var(--text-soft);
}
#axo-wrap {
  position: relative;
  width: 300px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
#axo-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
  animation: glow-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes glow-pulse {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}
@keyframes axo-idle-float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  30% {
    transform: translateY(-7px) rotate(0.8deg) scale(1.02);
  }
  65% {
    transform: translateY(-4px) rotate(-0.6deg) scale(0.99);
  }
}
#axo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 25px var(--glow));
  transition: filter 0.15s ease;
  transform-origin: center bottom;
  will-change: transform;
}
#axo-img.axo-idle {
  animation: axo-idle-float 3.5s ease-in-out infinite;
}
@keyframes axo-wobble {
  0% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(0.83) rotate(-4deg);
  }
  50% {
    transform: scale(1.09) rotate(3deg);
  }
  75% {
    transform: scale(0.97) rotate(-1.5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
#axo-img.clicking {
  animation: axo-wobble 0.38s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}
.prestige-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #fff;
  padding: 12px 30px;
  border-radius: 50px;
  font-family: "Nunito", sans-serif;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 24px var(--glow);
  transition: var(--trans);
  animation: prestige-btn-pulse 1.5s ease-in-out infinite;
}
@keyframes prestige-btn-pulse {
  0%,
  100% {
    box-shadow: 0 4px 24px var(--glow);
  }
  50% {
    box-shadow:
      0 6px 36px var(--glow),
      0 0 60px var(--glow);
  }
}
.prestige-btn:hover {
  transform: scale(1.06) translateY(-3px);
}
.fx-number {
  position: fixed;
  pointer-events: none;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 10px var(--accent);
  font-size: 1.3rem;
  z-index: 100;
  animation: fx-float 0.85s ease-out forwards;
}
@keyframes fx-float {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, calc(-50% - 75px)) scale(0.7);
  }
}
.fx-emoji {
  position: fixed;
  pointer-events: none;
  font-size: 1.1rem;
  z-index: 100;
  animation: fx-scatter 0.9s ease-out forwards;
}
@keyframes fx-scatter {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.4);
  }
}
.tab-row {
  display: flex;
  gap: 6px;
}
.tab-btn {
  flex: 1;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  color: var(--text-soft);
  padding: 7px 4px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  transition: var(--trans);
}
.tab-btn.active,
.tab-btn:hover {
  color: #fff;
}
.tab-pane {
  display: none;
  flex-direction: column;
  gap: 8px;
}
.tab-pane.active {
  display: flex;
}
.perma-card:hover:not(.cant-buy):not(.purchased) {
  border-color: var(--gold);
  transform: translateY(-2px);
  background: var(--panel-bg2);
}
.perma-card.purchased {
  border-color: var(--gold);
  background: rgba(255 215 0/0.05);
  cursor: default;
}
#music-player {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  background: rgba(0 0 0/0.5);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
}
.player-left {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.player-center {
  flex: 1;
  min-width: 0;
}
.player-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.player-btn {
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--trans);
}
.play-btn {
  width: 40px;
  height: 40px;
  font-size: 1rem;
  background: var(--accent);
  border-color: var(--accent);
}
#track-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.player-progress-wrap {
  height: 4px;
  background: rgba(255 255 255/0.12);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
}
.player-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 10px;
  pointer-events: none;
  transition: width 0.3s linear;
}
.vol-icon {
  font-size: 0.9rem;
}
#vol-music-footer {
  width: 80px;
  height: 4px;
  appearance: none;
  background: rgba(255 255 255/0.15);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
#vol-music-footer::-webkit-slider-thumb,
.vol-row input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
#vol-music-footer::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}
.vol-row input[type="range"]::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
}
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0 0 0/0.7);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal {
  background: linear-gradient(160deg, #1a0e2e, #0d0820);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 30px;
  width: 400px;
  max-width: 95vw;
  max-height: 92dvh;
  overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0 0 0/0.5);
  animation: modal-pop 0.3s ease;
}
@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(16px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal h2,
.logo-text,
.pa-title-txt {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.modal h2 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 20px;
}
.modal-section {
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 10px;
}
.modal-section h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 12px;
}
.vol-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.82rem;
}
.vol-row label {
  min-width: 90px;
  color: var(--text-soft);
  font-size: 0.78rem;
}
.vol-row input[type="range"] {
  flex: 1;
  height: 4px;
  appearance: none;
  background: rgba(255 255 255/0.15);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
}
.vol-row span {
  min-width: 34px;
  text-align: right;
  font-weight: 700;
  font-size: 0.78rem;
}
.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.modal-btn {
  flex: 1;
  background: var(--panel-bg2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  transition: var(--trans);
  min-width: 70px;
}
.modal-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
}
.modal-btn.primary:hover {
  filter: brightness(1.15);
}
.modal-btn.danger:hover {
  background: #ef4444;
  border-color: #ef4444;
}
.modal-btn.full {
  width: 100%;
  margin-top: 10px;
}
.modal-footer {
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-soft);
  padding: 10px 0 4px;
}
.prestige-anim {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pa-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.pa-flash.evo-flash-active {
  animation: evo-flash 0.55s ease-out forwards;
}
@keyframes evo-flash {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.pa-rays {
  position: absolute;
  width: 800px;
  height: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(0deg);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-conic-gradient(
    transparent 0deg,
    rgba(255, 230, 100, 0.8) 9deg,
    transparent 18deg,
    transparent 30deg
  );
}
.pa-rays.evo-rays-active {
  animation: evo-rays 2.2s ease-out forwards;
}
@keyframes evo-rays {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.3) rotate(0deg);
  }
  15% {
    opacity: 0.9;
  }
  55% {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1.5) rotate(50deg);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.2) rotate(90deg);
  }
}
.pa-content {
  position: relative;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.pa-img-container {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-evo-img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.pa-evo-old {
  transition:
    filter 0.55s ease,
    opacity 0.1s ease;
}
.pa-evo-old.evo-turning-white {
  filter: brightness(80) saturate(0);
}
.pa-evo-new {
  opacity: 0;
}
.pa-evo-new.evo-silhouette {
  opacity: 1;
  filter: brightness(80) saturate(0) contrast(5);
  transition: opacity 0.1s;
}
.pa-evo-new.evo-reveal {
  opacity: 1;
  animation: evo-color-reveal 1s ease forwards;
}
@keyframes evo-color-reveal {
  0% {
    filter: brightness(20) saturate(0);
    transform: scale(0.85);
  }
  25% {
    filter: brightness(8) saturate(0.2);
    transform: scale(1.18);
  }
  55% {
    filter: brightness(3) saturate(0.6);
    transform: scale(1.06);
  }
  80% {
    filter: brightness(1.4) saturate(0.9);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}
.pa-title-txt {
  font-size: 2.2rem;
  font-weight: 900;
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}
.pa-title-txt.evo-text-in {
  animation: evo-text-pop 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.pa-sub-txt {
  font-size: 1rem;
  color: var(--text-soft);
  opacity: 0;
  transform: translateY(14px);
  transition: none;
}
.pa-sub-txt.evo-text-in {
  animation: evo-text-pop 0.6s 0.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes evo-text-pop {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.prestige-anim.evo-fade-out {
  animation: evo-screen-out 0.6s ease forwards;
}
@keyframes evo-screen-out {
  to {
    opacity: 0;
  }
}
#toasts {
  position: fixed;
  bottom: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.toast {
  background: rgba(20 10 40/0.9);
  border: 1px solid var(--accent);
  color: var(--text);
  padding: 9px 22px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  animation:
    toast-in 0.3s ease,
    toast-out 0.35s 2.65s ease forwards;
  white-space: nowrap;
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes toast-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.hidden {
  display: none !important;
}
@media (max-width: 860px) {
  body {
    grid-template-rows: 58px 1fr auto 62px;
    overflow-y: auto;
    height: auto;
  }
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow: visible;
  }
  #left-panel {
    border-right: none;
    border-bottom: 1px solid var(--border);
    max-height: 260px;
    order: 2;
  }
  #right-panel {
    border-left: none;
    border-top: 1px solid var(--border);
    max-height: 300px;
    order: 3;
  }
  #center {
    order: 1;
    padding: 20px 10px;
    min-height: 360px;
  }
  #axo-wrap {
    width: 240px;
    height: 210px;
  }
  .top-stats {
    gap: 5px;
  }
  .stat-bubble {
    padding: 4px 10px 4px 8px;
  }
  #vol-music-footer {
    width: 60px;
  }
}
@media (max-width: 480px) {
  .top-stats .stat-bubble:nth-child(n + 3) {
    display: none;
  }
}
.orbit-wrapper {
  position: fixed;
  pointer-events: none;
  z-index: 800;
  transform: translate(-50%, -50%);
}
.orbit-inner {
  font-size: 1.65rem;
  display: block;
  line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
}
@keyframes orbit-lunge {
  0% {
    transform: rotate(var(--face-angle, 0deg)) translateY(0) scale(1);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  }
  28% {
    transform: rotate(var(--face-angle, 0deg)) translateY(-65px) scale(1.35);
    filter: drop-shadow(0 0 16px rgba(255, 190, 255, 0.95)) brightness(1.55);
  }
  60% {
    transform: rotate(var(--face-angle, 0deg)) translateY(-28px) scale(0.87);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  }
  100% {
    transform: rotate(var(--face-angle, 0deg)) translateY(0) scale(1);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7));
  }
}
.orbit-inner.orbit-clicking {
  animation: orbit-lunge 0.38s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes auto-wobble {
  0% {
    transform: scale(1) rotate(0deg);
  }
  20% {
    transform: scale(1.04) rotate(-1.5deg);
  }
  50% {
    transform: scale(0.97) rotate(1.5deg);
  }
  80% {
    transform: scale(1.02) rotate(-0.5deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
#axo-img.auto-wobble {
  animation: auto-wobble 0.4s ease-in-out;
}
.beat-ring {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 3px solid var(--accent);
  opacity: 0;
  pointer-events: none;
}
.beat-ring.pulse {
  animation: ring-pulse 0.55s ease-out forwards;
}
@keyframes ring-pulse {
  0% {
    opacity: 0.95;
    transform: scale(0.65);
    border-width: 5px;
    border-color: rgba(255, 180, 255, 1);
  }
  35% {
    opacity: 0.7;
    transform: scale(1.25);
    border-width: 3px;
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
    border-width: 1px;
  }
}
.ambient-particle {
  position: fixed;
  pointer-events: none;
  z-index: 100;
  animation: ambient-drift linear forwards;
}
@keyframes ambient-drift {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: var(--ao, 0.5);
  }
  50% {
    transform: translate(calc(var(--atx, 0) * 0.4), calc(var(--aty, 0) * 0.4))
      scale(1.15) rotate(15deg);
    opacity: calc(var(--ao, 0.5) * 1.3);
  }
  100% {
    transform: translate(var(--atx, 0), var(--aty, 0)) scale(0.6) rotate(30deg);
    opacity: 0;
  }
}
.golden-lotl {
  position: fixed;
  width: 90px;
  height: 90px;
  cursor: pointer;
  z-index: 1500;
  pointer-events: all;
  animation: golden-dance 10s linear forwards;
  user-select: none;
}
.golden-lotl img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  display: block;
  filter: drop-shadow(0 0 18px gold)
    drop-shadow(0 0 35px rgba(255, 200, 0, 0.8)) brightness(1.35) saturate(1.2);
  transition: filter 0.2s ease;
}
@keyframes golden-dance {
  0% {
    transform: translateX(calc(var(--gl-dir, 1) * 0px)) translateY(0)
      rotate(0deg) scale(1);
  }
  5% {
    transform: translateX(calc(var(--gl-dir, 1) * 80px)) translateY(-30px)
      rotate(10deg) scale(1.2);
  }
  10% {
    transform: translateX(calc(var(--gl-dir, 1) * 160px)) translateY(0)
      rotate(-8deg) scale(0.9);
  }
  15% {
    transform: translateX(calc(var(--gl-dir, 1) * 240px)) translateY(-40px)
      rotate(12deg) scale(1.25);
  }
  20% {
    transform: translateX(calc(var(--gl-dir, 1) * 330px)) translateY(5px)
      rotate(-5deg) scale(1);
  }
  25% {
    transform: translateX(calc(var(--gl-dir, 1) * 410px)) translateY(-25px)
      rotate(8deg) scale(1.15);
  }
  30% {
    transform: translateX(calc(var(--gl-dir, 1) * 490px)) translateY(0)
      rotate(-10deg) scale(0.95);
  }
  35% {
    transform: translateX(calc(var(--gl-dir, 1) * 570px)) translateY(-35px)
      rotate(15deg) scale(1.3);
  }
  40% {
    transform: translateX(calc(var(--gl-dir, 1) * 660px)) translateY(0)
      rotate(-8deg) scale(1);
  }
  50% {
    transform: translateX(calc(var(--gl-dir, 1) * 750px)) translateY(-20px)
      rotate(10deg) scale(1.1);
  }
  60% {
    transform: translateX(calc(var(--gl-dir, 1) * 840px)) translateY(0)
      rotate(-5deg) scale(1);
  }
  70% {
    transform: translateX(calc(var(--gl-dir, 1) * 930px)) translateY(-30px)
      rotate(12deg) scale(1.2);
  }
  80% {
    transform: translateX(calc(var(--gl-dir, 1) * 1020px)) translateY(0)
      rotate(-8deg) scale(0.9);
  }
  90% {
    transform: translateX(calc(var(--gl-dir, 1) * 1110px)) translateY(-20px)
      rotate(10deg) scale(1.1);
  }
  100% {
    transform: translateX(calc(var(--gl-dir, 1) * 1200px)) translateY(0)
      rotate(0deg) scale(1);
  }
}
.golden-lotl:hover img {
  filter: drop-shadow(0 0 30px gold) drop-shadow(0 0 60px rgba(255, 220, 0, 1))
    brightness(1.8) saturate(1.6);
}
.golden-leaving {
  animation: golden-fade-out 0.8s forwards;
}
@keyframes golden-fade-out {
  to {
    opacity: 0;
    transform: scale(0.2) rotate(720deg);
  }
}
.rain-lotl {
  position: fixed;
  top: -60px;
  pointer-events: none;
  z-index: 1400;
  animation: rain-fall linear forwards;
  filter: drop-shadow(0 0 8px rgba(255, 200, 0, 0.6));
}
@keyframes rain-fall {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translateY(110vh) rotate(360deg) scale(0.7);
    opacity: 0;
  }
}
.bonus-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(
    135deg,
    rgba(255, 180, 0, 0.95),
    rgba(255, 100, 0, 0.9)
  );
  color: #fff;
  font-weight: 900;
  font-size: 1.05rem;
  padding: 8px 24px;
  border-radius: 50px;
  z-index: 2000;
  box-shadow:
    0 0 30px rgba(255, 160, 0, 0.8),
    0 4px 20px rgba(0, 0, 0, 0.4);
  animation: bonus-pulse 1s ease-in-out infinite;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes bonus-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 160, 0, 0.6);
    transform: translateX(-50%) scale(1);
  }
  50% {
    box-shadow: 0 0 45px rgba(255, 200, 0, 1);
    transform: translateX(-50%) scale(1.04);
  }
}