:root {
  --gold:   #FFB800;
  --gold2:  #FF8C00;
  --gold3:  #FFF0A0;
  --deep:   #1A0A00;
  --panel:  rgba(255,180,0,0.07);
  --border: rgba(255,180,0,0.25);
  --glow:   0 0 24px rgba(255,180,0,0.45);
  --glow2:  0 0 60px rgba(255,120,0,0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background: var(--deep);
  color: #f0d080;
  min-height: 100vh;
  overflow-x: hidden;
  padding-left: 190px;
  padding-right: 190px;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(255,120,0,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(255,180,0,0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(60,20,0,1) 0%, #0d0500 100%);
  z-index: -2;
}

.embers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.ember {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD700, #FF6A00);
  animation: rise linear infinite;
  opacity: 0;
}

@keyframes rise {
  0%   { transform: translateY(110vh) scale(1);   opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh) scale(0.3); opacity: 0; }
}

#devCredit {
  position: fixed;
  bottom: 10px;
  right: 14px;
  font-size: 11px;
  color: rgba(255,180,0,0.35);
  letter-spacing: 1px;
  z-index: 10;
}

.music-toggle-container {
  position: fixed;
  top: 14px;
  right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 13px;
  color: var(--gold);
  z-index: 100;
  letter-spacing: 1px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
}

.switch input { opacity: 0; width: 0; height: 0; }

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(255,180,0,0.15);
  border: 1px solid var(--border);
  border-radius: 28px;
  transition: 0.3s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background: var(--gold2);
  border-radius: 50%;
  transition: 0.3s;
  box-shadow: 0 0 8px rgba(255,140,0,0.6);
}

input:checked + .slider { background: rgba(255,180,0,0.3); border-color: var(--gold); }
input:checked + .slider:before { transform: translateX(24px); background: var(--gold3); }

header { padding: 28px 20px 10px; text-align: center; }

h1 {
  font-family: 'Cinzel Decorative', serif;
  font-size: clamp(26px, 6vw, 58px);
  font-weight: 900;
  letter-spacing: 4px;
  background: linear-gradient(135deg, #fff0a0, #FFB800, #FF6A00, #FFB800, #fff0a0);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 4s ease infinite;
  filter: drop-shadow(0 0 20px rgba(255,180,0,0.5));
}

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

#statsBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px auto;
  max-width: 860px;
  padding: 0 12px;
}

.stat-pill {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 6px 18px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  backdrop-filter: blur(6px);
  transition: box-shadow 0.3s;
}

.stat-pill:hover { box-shadow: var(--glow); }
.stat-pill span  { color: var(--gold); }

#vexZone { text-align: center; padding: 8px 0; }

#vexWrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#vexWrap.pressed {
  transform: scale(0.88);
  transition: transform 0.08s ease-out;
}

#halo {
  display: none;
  position: absolute;
  width: 72px;
  top: 16px;
  left: 50%;
  margin-left: -36px;
  pointer-events: none;
  animation: haloFloat 2.5s infinite ease-in-out;
  animation-delay: -0.4s;
  filter: drop-shadow(0 0 8px rgba(255,220,60,0.9));
  -webkit-user-drag: none;
  z-index: 5;
}

@keyframes haloFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}

#vex {
  width: 160px;
  height: 160px;
  object-fit: contain;
  display: block;
  -webkit-user-drag: none;
  pointer-events: none;
  filter: drop-shadow(0 0 20px rgba(255,180,0,0.5));
  animation: float 2.5s infinite ease-in-out;
}

@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}


/* fire — subtle glow, slow flicker */
#vex.vfx-fire {
  animation: float 2.5s infinite ease-in-out, vfxFireGlow 2s steps(3, end) infinite;
}
@keyframes vfxFireGlow {
  0%   { filter: drop-shadow(0 4px 5px #bb1100)  drop-shadow(0 0 8px #dd3300)  brightness(1.02); }
  33%  { filter: drop-shadow(0 4px 9px #dd4400)  drop-shadow(0 0 13px #ff6600) brightness(1.07); }
  66%  { filter: drop-shadow(0 4px 6px #cc2200)  drop-shadow(0 0 9px #ee4400)  brightness(1.04); }
  100% { filter: drop-shadow(0 4px 5px #bb1100)  drop-shadow(0 0 8px #dd3300)  brightness(1.02); }
}

/* electric — slow stepped glow flash */
#vex.vfx-electric {
  animation: float 2.5s infinite ease-in-out, vfxElectric 4s steps(4, end) infinite;
}
@keyframes vfxElectric {
  0%   { filter: drop-shadow(0 0 4px #00bbee)  drop-shadow(0 0 8px #0044bb); }
  25%  { filter: drop-shadow(0 0 14px #99eeff) drop-shadow(0 0 22px #0088ee) brightness(1.3); }
  50%  { filter: drop-shadow(0 0 4px #0077cc)  drop-shadow(0 0 8px #0033aa); }
  75%  { filter: drop-shadow(0 0 16px #bbf0ff) drop-shadow(0 0 26px #0099ff) brightness(1.4); }
  100% { filter: drop-shadow(0 0 4px #00bbee)  drop-shadow(0 0 8px #0044bb); }
}

/* rainbow — hue-rotate + colored drop shadow */
#vex.vfx-rainbow {
  animation: float 2.5s infinite ease-in-out, vfxRainbowHue 5s linear infinite;
}
@keyframes vfxRainbowHue {
  from { filter: drop-shadow(0 0 10px hsl(0,100%,65%))   hue-rotate(0deg);   }
  to   { filter: drop-shadow(0 0 10px hsl(360,100%,65%)) hue-rotate(360deg); }
}

/* shadow */
#vex.vfx-shadow {
  animation: float 2.5s infinite ease-in-out, vfxShadow 2s ease-in-out infinite alternate;
}
@keyframes vfxShadow {
  from { filter: brightness(0.25) saturate(0.2) drop-shadow(0 0 14px #6600aa) drop-shadow(0 0 30px #330066); }
  to   { filter: brightness(0.15) saturate(0.1) drop-shadow(0 0 28px #aa00ff) drop-shadow(0 0 50px #660099); }
}

/* divine — soft warm glow breathe */
#vex.vfx-divine {
  animation: float 2.5s infinite ease-in-out, vfxDivine 3s ease-in-out infinite alternate;
}
@keyframes vfxDivine {
  from { filter: brightness(1.18) drop-shadow(0 0 10px #ffffa0) drop-shadow(0 0 20px #ffdd44); }
  to   { filter: brightness(1.45) drop-shadow(0 0 20px #ffffff) drop-shadow(0 0 40px #ffee88); }
}

/* ── Wrapper auras ── */

#vexWrap::before,
#vexWrap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0;
  border-radius: 50%;
}

/* Fire — two bigger flames positioned higher */
#vexWrap.wrap-vfx-fire::before {
  left: 50%; bottom: 14px;
  width: 68px; height: 96px;
  margin-left: -34px;
  background: radial-gradient(ellipse at 50% 100%, #ffee00 0%, #ff6600 35%, #ff2200 65%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  opacity: 1;
  filter: blur(7px);
  animation: flame1 0.55s steps(4, end) infinite;
}
#vexWrap.wrap-vfx-fire::after {
  left: 50%; bottom: 20px;
  width: 42px; height: 68px;
  margin-left: 10px;
  background: radial-gradient(ellipse at 50% 100%, #ffffff 0%, #ffee00 22%, #ff9900 52%, transparent 100%);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  opacity: 1;
  filter: blur(4px);
  animation: flame2 0.46s steps(4, end) infinite 0.14s;
}
@keyframes flame1 {
  0%   { height: 94px;  width: 68px; transform: skewX(0deg);  }
  25%  { height: 114px; width: 58px; transform: skewX(-6deg); }
  50%  { height: 84px;  width: 74px; transform: skewX(4deg);  }
  75%  { height: 108px; width: 61px; transform: skewX(-3deg); }
  100% { height: 94px;  width: 68px; transform: skewX(0deg);  }
}
@keyframes flame2 {
  0%   { height: 66px; width: 40px; transform: skewX(3deg);  }
  25%  { height: 82px; width: 33px; transform: skewX(-7deg); }
  50%  { height: 58px; width: 46px; transform: skewX(5deg);  }
  75%  { height: 76px; width: 35px; transform: skewX(-4deg); }
  100% { height: 66px; width: 40px; transform: skewX(3deg);  }
}


/* Electric — smooth linear rotation */
#vexWrap.wrap-vfx-electric::before {
  inset: -12px;
  border: 2px dashed #00ddff;
  opacity: 0.75;
  box-shadow: 0 0 8px #00aaff;
  animation: spinRing 2s linear infinite;
}
#vexWrap.wrap-vfx-electric::after {
  inset: -24px;
  border: 1.5px dashed rgba(100,220,255,0.4);
  opacity: 0.45;
  animation: spinRing 3s linear infinite reverse;
}
@keyframes spinRing {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* Rainbow — pulsing hue-cycling radial like shadow */
#vexWrap.wrap-vfx-rainbow::before {
  inset: -8px;
  background: radial-gradient(ellipse at center, transparent 38%, hsla(0,100%,60%,0.6) 68%, hsla(0,100%,60%,0.9) 100%);
  opacity: 1;
  animation: rainbowPulse 2s ease-in-out infinite alternate, rainbowHue 4s linear infinite;
}
#vexWrap.wrap-vfx-rainbow::after {
  inset: -20px;
  background: radial-gradient(ellipse at center, transparent 52%, hsla(180,100%,60%,0.3) 78%, transparent 100%);
  opacity: 1;
  animation: rainbowPulse 2s ease-in-out infinite alternate-reverse, rainbowHueRev 4s linear infinite;
}
@keyframes rainbowPulse {
  from { transform: scale(1.0);  opacity: 0.6; }
  to   { transform: scale(1.12); opacity: 1.0; }
}
@keyframes rainbowHue {
  from { filter: hue-rotate(0deg)   blur(4px); }
  to   { filter: hue-rotate(360deg) blur(4px); }
}
@keyframes rainbowHueRev {
  from { filter: hue-rotate(360deg) blur(8px); }
  to   { filter: hue-rotate(0deg)   blur(8px); }
}

/* Shadow — pulsing dark void */
#vexWrap.wrap-vfx-shadow::before {
  inset: -8px;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(80,0,130,0.6) 70%, rgba(20,0,50,0.9) 100%);
  opacity: 1;
  animation: shadowPulse 2s ease-in-out infinite alternate;
}
#vexWrap.wrap-vfx-shadow::after {
  inset: -20px;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(110,0,180,0.3) 80%, transparent 100%);
  opacity: 1;
  animation: shadowPulse 2s ease-in-out infinite alternate-reverse;
}
@keyframes shadowPulse {
  from { transform: scale(1.0);  opacity: 0.6; filter: blur(4px); }
  to   { transform: scale(1.12); opacity: 1.0; filter: blur(8px); }
}

/* Divine — god-rays clipped to circle + gold ring */
#vexWrap.wrap-vfx-divine::before {
  inset: -9px;
  background: conic-gradient(
    transparent 0deg,   rgba(255,220,60,0.6) 9deg,  transparent 18deg,
    transparent 30deg,  rgba(255,220,60,0.6) 39deg, transparent 48deg,
    transparent 60deg,  rgba(255,220,60,0.6) 69deg, transparent 78deg,
    transparent 90deg,  rgba(255,220,60,0.6) 99deg, transparent 108deg,
    transparent 120deg, rgba(255,220,60,0.6) 129deg,transparent 138deg,
    transparent 150deg, rgba(255,220,60,0.6) 159deg,transparent 168deg,
    transparent 180deg, rgba(255,220,60,0.6) 189deg,transparent 198deg,
    transparent 210deg, rgba(255,220,60,0.6) 219deg,transparent 228deg,
    transparent 240deg, rgba(255,220,60,0.6) 249deg,transparent 258deg,
    transparent 270deg, rgba(255,220,60,0.6) 279deg,transparent 288deg,
    transparent 300deg, rgba(255,220,60,0.6) 309deg,transparent 318deg,
    transparent 330deg, rgba(255,220,60,0.6) 339deg,transparent 348deg,
    transparent 360deg
  );
  -webkit-mask: radial-gradient(ellipse at center, black 55%, transparent 80%);
  mask: radial-gradient(ellipse at center, black 55%, transparent 80%);
  filter: blur(2px);
  opacity: 0.9;
  animation: divineSpin 7s linear infinite;
}
#vexWrap.wrap-vfx-divine::after {
  inset: -7px;
  padding: 3px;
  background: conic-gradient(#ffffaa, #ffdd44, #fffaaa, #ffcc22, #ffffaa);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.9;
  animation: divineSpin 3.5s linear infinite reverse;
}
@keyframes divineSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}


/* Electric strike SVGs injected by JS */
.elec-strike-svg {
  position: absolute;
  pointer-events: none;
  overflow: visible;
  z-index: 6;
  animation: elecStrikeFade 0.45s ease-out forwards;
}
@keyframes elecStrikeFade {
  0%   { opacity: 1; }
  50%  { opacity: 0.75; }
  100% { opacity: 0; }
}
  position: absolute;
  pointer-events: none;
  z-index: 10;
  overflow: visible;
  animation: elecStrikeFade 0.42s ease-out forwards;
}

@keyframes elecStrikeFade {
  0%   { opacity: 1; }
  50%  { opacity: 0.85; }
  100% { opacity: 0; }
}

.plusOne {
  position: fixed;
  font-family: 'Cinzel Decorative', serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--gold3);
  text-shadow: 0 0 10px rgba(255,200,0,0.8);
  pointer-events: none;
  animation: floatUp 0.9s ease-out forwards;
  z-index: 999;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(1.2); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0; }
}

.click-ring {
  position: fixed;
  border-radius: 50%;
  border: 2px solid rgba(255,200,0,0.7);
  width: 10px;
  height: 10px;
  pointer-events: none;
  z-index: 998;
  animation: ringOut 0.6s ease-out forwards;
}

@keyframes ringOut {
  from { width: 10px;  height: 10px;  opacity: 1; margin-left: 0;    margin-top: 0; }
  to   { width: 120px; height: 120px; opacity: 0; margin-left: -55px; margin-top: -55px; }
}

.click-fire-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 998;
  animation: fireOut 0.7s ease-out forwards;
}

@keyframes fireOut {
  0%   { opacity: 1; transform: translate(0,0) scale(1); }
  100% { opacity: 0; transform: var(--fire-dir) scale(0.2); }
}

.click-star {
  position: fixed;
  font-size: 18px;
  pointer-events: none;
  z-index: 998;
  animation: starOut 0.8s ease-out forwards;
}

@keyframes starOut {
  0%   { opacity: 1; transform: translate(0,0) scale(1.2) rotate(0deg); }
  100% { opacity: 0; transform: var(--star-dir) scale(0.4) rotate(180deg); }
}

.click-lightning-svg {
  position: fixed;
  pointer-events: none;
  z-index: 998;
  animation: lightningFlash 0.45s ease-out forwards;
  overflow: visible;
}

@keyframes lightningFlash {
  0%   { opacity: 1; transform: scaleY(1.1); }
  30%  { opacity: 0.95; transform: scaleY(1.0); }
  60%  { opacity: 0.6; transform: scaleY(1.05); }
  100% { opacity: 0; transform: scaleY(0.9) translateY(-10px); }
}

.click-coin {
  position: fixed;
  font-size: 18px;
  pointer-events: none;
  z-index: 998;
  animation: coinOut 0.8s ease-in forwards;
}

@keyframes coinOut {
  0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; transform: var(--coin-dir) rotate(360deg); }
}

#shopWrap {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 12px;
}

#tabBar {
  display: flex;
  gap: 4px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--border);
}

.tab-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: rgba(240,208,128,0.45);
  font-family: 'Cinzel Decorative', serif;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 18px;
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.tab-btn:hover {
  color: var(--gold);
  background: var(--panel);
}

.tab-btn.active {
  background: var(--panel);
  border-color: var(--gold);
  color: var(--gold);
}

.tab-panel { display: none; padding-top: 14px; }
.tab-panel.active { display: block; }

.shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 10px;
}

.item {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, opacity 0.3s;
  position: relative;
  overflow: hidden;
}

.item::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,200,0,0.08), transparent);
  transition: left 0.5s;
}

.item:hover::before { left: 140%; }

.item:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow), 0 8px 24px rgba(0,0,0,0.4);
  border-color: var(--gold);
}

.item b { display: block; margin-bottom: 4px; font-size: 14px; color: var(--gold3); letter-spacing: 0.5px; }
.item .gain { color: #aaffd0; font-size: 12px; margin-bottom: 6px; }
.item .cost-line { color: #f0d080; font-size: 12px; margin-bottom: 8px; }

.effects-section-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--gold2);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.effects-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold2), transparent);
}

.effects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.effect-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(6px);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
  position: relative;
  overflow: hidden;
}

.effect-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,200,0,0.08), transparent);
  transition: left 0.5s;
}

.effect-card:hover::before { left: 140%; }

.effect-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--glow), 0 8px 24px rgba(0,0,0,0.4);
  border-color: var(--gold);
}

.effect-card.owned    { border-color: rgba(255,180,0,0.5); }
.effect-card.active-effect { border-color: var(--gold); box-shadow: var(--glow); }

.effect-icon  { font-size: 28px; margin-bottom: 6px; }
.effect-name  { font-size: 14px; color: var(--gold3); font-weight: 700; margin-bottom: 4px; }
.effect-desc  { font-size: 11px; color: rgba(240,208,128,0.6); margin-bottom: 10px; line-height: 1.4; }
.effect-cost  { font-size: 12px; color: #f0d080; margin-bottom: 10px; }

.effect-status          { font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 8px; color: #aaffd0; }
.effect-status.inactive { color: rgba(240,208,128,0.4); }

.effect-toggle-btn {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  background: linear-gradient(135deg, #1a5c1a, #2a8a2a);
  border-color: #3aaa3a;
  color: #aaffaa;
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.effect-toggle-btn:hover {
  filter: brightness(1.15) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 0 10px rgba(0,200,0,0.3) !important;
}

.effect-toggle-btn.enabled {
  background: linear-gradient(135deg, #5c1a1a, #8a2a2a);
  border-color: #aa3a3a;
  color: #ffaaaa;
}

.effect-toggle-btn.enabled:hover {
  box-shadow: 0 0 10px rgba(200,0,0,0.3) !important;
}

button {
  padding: 7px 14px;
  border: 1px solid var(--gold2);
  border-radius: 8px;
  cursor: pointer;
  background: linear-gradient(135deg, #FF8C00, #FFB800);
  color: var(--deep);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
}

button:hover {
  box-shadow: var(--glow);
  transform: translateY(-1px);
  filter: brightness(1.1);
}

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

button.danger {
  background: linear-gradient(135deg, #6b0000, #a00);
  border-color: #c00;
  color: #ffaaaa;
}

button.prestige-btn {
  background: linear-gradient(135deg, #6B008B, #CC44DD);
  border-color: #CC44DD;
  color: white;
  font-size: 14px;
  padding: 10px 20px;
}

#actionPanel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 18px auto 0;
  max-width: 800px;
  padding: 0 12px;
}

#achievements {
  position: fixed;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 180px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 14px 14px 0;
  padding: 14px 12px;
  font-size: 13px;
  backdrop-filter: blur(6px);
  z-index: 50;
}

#achievements::-webkit-scrollbar { width: 4px; }
#achievements::-webkit-scrollbar-track { background: transparent; }
#achievements::-webkit-scrollbar-thumb { background: rgba(255,180,0,0.3); border-radius: 2px; }

#achievements b {
  font-family: 'Cinzel Decorative', serif;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--gold2);
  display: block;
  margin-bottom: 8px;
}

#achList {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#achList li {
  background: linear-gradient(135deg, rgba(255,180,0,0.15), rgba(255,100,0,0.1));
  border: 1px solid rgba(255,180,0,0.3);
  border-radius: 8px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold3);
  line-height: 1.3;
  animation: achPop 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
}

@keyframes achPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Container logic to allow multiple toasts to stack */
.toast-container {
  position: fixed;
  bottom: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse; /* Newest toast appears at bottom, older ones push up */
  gap: 10px;
  pointer-events: none;
}

#toast-left { left: 30px; }
#toast-right { right: 30px; }

/* The actual toast design */
.toast-item {
  background: linear-gradient(135deg, #FF8C00, #FFB800);
  color: #1A0A00; /* Matching your --deep variable */
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  padding: 12px 28px;
  border-radius: 30px;
  box-shadow: 0 0 60px rgba(255,120,0,0.3); /* Matching your --glow2 */
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Animation trigger */
.toast-item.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 480px) {
  .shop         { grid-template-columns: repeat(2, 1fr); }
  .effects-grid { grid-template-columns: repeat(2, 1fr); }
}

#authOverlay {
  position: fixed;
  inset: 0;
  background: rgba(10,4,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(6px);
}

#authOverlay.hidden { display: none; }

#authBox {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
  max-width: 340px;
  width: 90%;
  box-shadow: var(--glow2);
}

#authBox h2 {
  font-family: 'Cinzel Decorative', serif;
  font-size: 22px;
  background: linear-gradient(135deg, #fff0a0, #FFB800, #FF6A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
}

#authBox p {
  color: rgba(240,208,128,0.6);
  font-size: 14px;
  margin-bottom: 28px;
}

#googleSignIn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  background: white;
  color: #333;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  filter: none !important;
  transform: none !important;
  box-shadow: none;
}

#googleSignIn:hover {
  background: #f0f0f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) !important;
}

#guestBtn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: rgba(240,208,128,0.5);
  font-size: 13px;
  padding: 10px;
}

#guestBtn:hover {
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: none !important;
}

#userInfo {
  position: fixed;
  top: 14px;
  left: 200px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  z-index: 100;
  letter-spacing: 0.5px;
}

#userInfo img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gold);
}

#signOutBtn {
  font-size: 11px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid rgba(255,180,0,0.3);
  color: rgba(240,208,128,0.5);
  border-radius: 6px;
  cursor: pointer;
  filter: none !important;
  transform: none !important;
  box-shadow: none !important;
}

#signOutBtn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ── Profile button top-right ── */
#profileBtn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 200;
  cursor: pointer;
}

#profileAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  object-fit: cover;
  display: block;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: #333;
}

#profileBtn:hover #profileAvatar {
  border-color: var(--gold3);
  box-shadow: var(--glow);
}

/* ── Dropdown ── */
#profileDropdown {
  position: absolute;
  top: 50px;
  right: 0;
  width: 220px;
  background: #1f0e00;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), var(--glow2);
  backdrop-filter: blur(10px);
}

#profileDropdown.hidden { display: none; }

#profileDropdownHeader {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 12px;
}

#dropdownAvatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  object-fit: cover;
  background: #333;
  flex-shrink: 0;
}

#dropdownName {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold3);
  letter-spacing: 0.3px;
}

#dropdownStatus {
  font-size: 11px;
  color: rgba(240,208,128,0.45);
  margin-top: 1px;
}

.dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #f0d080;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  letter-spacing: 0.3px;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.dropdown-item:hover {
  background: rgba(255,180,0,0.1);
  color: var(--gold3);
  box-shadow: none !important;
  transform: none !important;
}

.dropdown-item.danger-item {
  color: #ffaaaa;
}

.dropdown-item.danger-item:hover {
  background: rgba(200,0,0,0.12);
  color: #ffcccc;
}

/* ── Settings modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,4,0,0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  backdrop-filter: blur(6px);
}

.modal-overlay.hidden { display: none; }

.modal-box {
  background: #1f0e00;
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 12px 48px rgba(0,0,0,0.7), var(--glow2);
}

.modal-box::-webkit-scrollbar { width: 4px; }
.modal-box::-webkit-scrollbar-thumb { background: rgba(255,180,0,0.3); border-radius: 2px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--gold2);
}

.modal-close {
  background: transparent;
  border: none;
  color: rgba(240,208,128,0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
}

.modal-close:hover { color: var(--gold); background: rgba(255,180,0,0.1); }

#settingsContent { padding: 18px 20px; }

.settings-section {
  margin-bottom: 22px;
}

.settings-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold2);
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--gold2), transparent);
}

.settings-avatar-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

.settings-avatar-preview {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--border);
  object-fit: cover;
  background: #333;
}

.settings-input {
  width: 100%;
  background: rgba(255,180,0,0.06);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  color: #f0d080;
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.2s;
  margin-bottom: 8px;
  user-select: text;
}

.settings-input:focus { border-color: var(--gold); }

.settings-input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-hint {
  font-size: 11px;
  color: rgba(240,208,128,0.4);
  margin-bottom: 10px;
  line-height: 1.4;
}

.settings-btn {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 8px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,180,0,0.08);
  font-size: 13px;
  font-weight: 600;
  color: #f0d080;
}

.settings-row:last-child { border-bottom: none; }

.settings-guest-note {
  background: rgba(255,180,0,0.06);
  border: 1px solid rgba(255,180,0,0.15);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: rgba(240,208,128,0.6);
  line-height: 1.5;
  margin-bottom: 14px;
}