* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  background: #05020a;
  color: #ffffff;
  min-height: 100vh;
  user-select: none;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed; inset: -20%;
  background:
    radial-gradient(circle at 20% 20%, rgba(184, 51, 255, 0.38), transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(255, 0, 170, 0.30), transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(255, 180, 0, 0.08), transparent 60%);
  pointer-events: none; z-index: 0;
  animation: bgMove 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bgMove {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, -3%) scale(1.08); }
  100% { transform: translate(-3%, 4%) scale(1.02); }
}
body::after {
  content: '';
  position: fixed; inset: 0;
  background-image:
    radial-gradient(1px 1px at 15% 22%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 42% 8%, rgba(255,180,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 78% 32%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 8% 78%, rgba(200,150,255,0.5), transparent),
    radial-gradient(1px 1px at 65% 88%, rgba(255,200,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 88% 65%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1px 1px at 32% 55%, rgba(255,150,255,0.4), transparent),
    radial-gradient(1px 1px at 55% 35%, rgba(255,255,255,0.5), transparent);
  pointer-events: none; z-index: 0;
  animation: starsPulse 5s ease-in-out infinite alternate;
  opacity: 0.7;
}
@keyframes starsPulse {
  from { opacity: 0.4; }
  to   { opacity: 0.9; }
}

main {
  position: relative; z-index: 1;
  max-width: 1200px; margin: 0 auto;
  padding: 1rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 900px) { main { grid-template-columns: 1fr; } }
.panel {
  background: linear-gradient(180deg, #18092a 0%, #0a0412 100%);
  border: 1px solid #5a2570;
  border-radius: 16px; padding: 1rem;
  position: relative; overflow: hidden;
  box-shadow:
    0 0 25px rgba(184, 51, 255, 0.18),
    0 0 70px rgba(255, 0, 170, 0.10),
    0 0 0 1px rgba(255, 0, 170, 0.10) inset,
    0 8px 40px rgba(0, 0, 0, 0.75);
}
.panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 0, 170, 0.8), rgba(255, 180, 0, 0.5), transparent);
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.6);
}
.panel h2 {
  margin: 0 0 0.6rem 0; font-size: 0.95rem;
  color: #e0b3ff; letter-spacing: 1px;
  text-transform: uppercase;
  display: flex; align-items: center;
  gap: 0.5rem; font-weight: 800;
  text-shadow: 0 0 14px rgba(184, 51, 255, 0.7);
}
.panel h2::before {
  content: '';
  width: 3px; height: 14px;
  border-radius: 2px;
  background: #ff00aa;
  box-shadow: 0 0 10px #ff00aa, 0 0 25px rgba(255, 0, 170, 0.9);
  animation: barPulse 2s ease-in-out infinite;
}
@keyframes barPulse {
  0%, 100% { box-shadow: 0 0 10px #ff00aa, 0 0 25px rgba(255, 0, 170, 0.9); }
  50%      { box-shadow: 0 0 15px #ff00aa, 0 0 40px rgba(255, 0, 170, 1); }
}
.panel h2:not(:first-child) { margin-top: 1.2rem; }
button {
  background: #2a1035; color: #f5e6ff;
  border: 1px solid #5a2570;
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem; cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}
button:hover:not(:disabled) {
  background: #3d1748;
  border-color: #ff00aa;
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.6), 0 0 30px rgba(184, 51, 255, 0.35);
}
button:disabled { opacity: 0.35; cursor: not-allowed; }

.top-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.top-stat {
  background: linear-gradient(180deg, #230d33, #12061c);
  border: 1px solid #6a2c85;
  border-radius: 10px;
  padding: 0.45rem 0.55rem;
  text-align: left;
  min-width: 0;
  box-shadow: 0 0 12px rgba(184, 51, 255, 0.22), inset 0 0 12px rgba(255, 0, 170, 0.08);
}
.top-stat .lbl {
  font-size: 0.6rem;
  color: #cbb8dd;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 0.15rem;
  font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-stat .val {
  font-size: 0.95rem; font-weight: 800;
  color: #ffffff;
  text-shadow: 0 0 12px rgba(255, 0, 170, 0.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-stat .val.pink { color: #ff4dbb; text-shadow: 0 0 14px rgba(255, 0, 170, 1); }
.top-stat .val.violet { color: #cc88ff; text-shadow: 0 0 14px rgba(184, 51, 255, 1); }

.barrel-container {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  padding: 0.8rem 0 1rem;
  cursor: pointer;
  transition: transform 0.08s;
  border-radius: 16px;
  margin-bottom: 0.2rem;
}
.barrel-container:active { transform: scale(0.97); }

.flame-wrap {
  position: absolute; width: 320px; height: 340px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0; filter: blur(14px);
}
.flame {
  position: absolute; bottom: 0; left: 50%;
  border-radius: 50% 50% 40% 40% / 70% 70% 30% 30%;
  transform-origin: bottom center;
  mix-blend-mode: screen;
}
.flame-1 {
  width: 180px; height: 280px; margin-left: -90px;
  background: radial-gradient(ellipse at 50% 90%, #f0a0ff 0%, #c266ff 20%, #8a1fff 50%, #5a0a9a 80%, transparent 100%);
  animation: flameWave1 2.4s ease-in-out infinite alternate; opacity: 0.85;
}
.flame-2 {
  width: 120px; height: 220px; margin-left: -60px;
  background: radial-gradient(ellipse at 50% 90%, #ffffff 0%, #f0a0ff 15%, #c266ff 45%, #7a1ae0 80%, transparent 100%);
  animation: flameWave2 1.8s ease-in-out infinite alternate; opacity: 0.95;
}
.flame-3 {
  width: 100px; height: 200px; margin-left: -130px;
  background: radial-gradient(ellipse at 60% 90%, #d48aff 0%, #a850ff 30%, #6a10c0 65%, transparent 100%);
  animation: flameWave3 2.8s ease-in-out infinite alternate;
  opacity: 0.75; transform: skewX(8deg);
}
.flame-4 {
  width: 100px; height: 200px; margin-left: 30px;
  background: radial-gradient(ellipse at 40% 90%, #d48aff 0%, #a850ff 30%, #6a10c0 65%, transparent 100%);
  animation: flameWave4 2.6s ease-in-out infinite alternate;
  opacity: 0.75; transform: skewX(-8deg);
}
.flame-outer {
  position: absolute; width: 300px; height: 300px;
  bottom: -40px; left: 50%; margin-left: -150px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 60%, rgba(184, 51, 255, 0.65) 0%, rgba(122, 26, 224, 0.4) 40%, transparent 75%);
  animation: flameOuter 3.2s ease-in-out infinite alternate;
  filter: blur(20px); mix-blend-mode: screen;
}
.flame-lick {
  position: absolute; width: 40px; height: 90px;
  border-radius: 50% 50% 50% 50% / 80% 80% 20% 20%;
  background: radial-gradient(ellipse at 50% 90%, #ffffff 0%, #f0a0ff 25%, #c266ff 55%, transparent 90%);
  mix-blend-mode: screen; filter: blur(6px);
}
.flame-lick-1 { left: 100px; bottom: 190px; animation: lick1 1.4s ease-in-out infinite alternate; }
.flame-lick-2 { left: 140px; bottom: 200px; width: 30px; height: 80px; animation: lick2 1.7s ease-in-out infinite alternate; animation-delay: 0.3s; }
.flame-lick-3 { left: 170px; bottom: 185px; width: 34px; height: 75px; animation: lick3 1.5s ease-in-out infinite alternate; animation-delay: 0.6s; }

@keyframes flameWave1 { 0% { transform: scale(1, 1) skewX(0deg); opacity: 0.8; } 50% { transform: scale(1.05, 1.08) skewX(2deg); opacity: 0.95; } 100% { transform: scale(0.98, 0.96) skewX(-2deg); opacity: 0.85; } }
@keyframes flameWave2 { 0% { transform: scale(1, 1) skewX(0deg); } 50% { transform: scale(1.1, 1.12) skewX(-2deg); } 100% { transform: scale(0.95, 0.94) skewX(2deg); } }
@keyframes flameWave3 { 0% { transform: skewX(8deg) scaleY(1); } 100% { transform: skewX(15deg) scaleY(1.1); } }
@keyframes flameWave4 { 0% { transform: skewX(-8deg) scaleY(1); } 100% { transform: skewX(-15deg) scaleY(1.1); } }
@keyframes flameOuter { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.15); opacity: 1; } }
@keyframes lick1 { 0% { transform: translateY(0) scale(1, 1); opacity: 0.9; } 100% { transform: translateY(-25px) scale(0.85, 1.3); opacity: 0.4; } }
@keyframes lick2 { 0% { transform: translateY(0) scale(1, 1); opacity: 0.8; } 100% { transform: translateY(-35px) scale(0.8, 1.4); opacity: 0.3; } }
@keyframes lick3 { 0% { transform: translateY(0) scale(1, 1); opacity: 0.85; } 100% { transform: translateY(-28px) scale(0.9, 1.25); opacity: 0.35; } }

.barrel-rays {
  position: absolute; width: 280px; height: 280px;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255, 180, 0, 0.15) 15deg, transparent 30deg,
    transparent 60deg, rgba(255, 0, 170, 0.12) 75deg, transparent 90deg,
    transparent 120deg, rgba(184, 51, 255, 0.15) 135deg, transparent 150deg,
    transparent 180deg, rgba(255, 180, 0, 0.15) 195deg, transparent 210deg,
    transparent 240deg, rgba(255, 0, 170, 0.12) 255deg, transparent 270deg,
    transparent 300deg, rgba(184, 51, 255, 0.15) 315deg, transparent 330deg,
    transparent 360deg);
  filter: blur(8px);
  animation: raysRotate 20s linear infinite;
  opacity: 0.85; z-index: 0;
}
@keyframes raysRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

.barrel-ring {
  position: absolute; width: 200px; height: 200px;
  border-radius: 50%;
  border: 2px solid rgba(255, 180, 0, 0.5);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none;
  animation: ringExpand 3s ease-out infinite;
  box-shadow: 0 0 20px rgba(255, 180, 0, 0.5), inset 0 0 20px rgba(255, 180, 0, 0.3);
  z-index: 1;
}
@keyframes ringExpand {
  0%   { transform: translate(-50%, -50%) scale(0.8); opacity: 0; }
  40%  { opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.barrel-svg {
  width: 180px; height: 220px;
  position: relative; z-index: 2;
  filter:
    drop-shadow(0 0 15px rgba(255, 0, 170, 0.8))
    drop-shadow(0 0 35px rgba(184, 51, 255, 0.6))
    drop-shadow(0 0 60px rgba(255, 180, 0, 0.3));
  animation: barrelFloat 3.5s ease-in-out infinite;
}
@keyframes barrelFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.barrel-container.flash .barrel-svg { animation: barrelShake 0.25s; }
@keyframes barrelShake {
  0%   { transform: scale(1) rotate(0); }
  25%  { transform: scale(0.96) rotate(-2deg); }
  50%  { transform: scale(1.03) rotate(2deg); }
  75%  { transform: scale(0.98) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); }
}

.barrel-label { text-align: center; font-size: 0.8rem; color: #cbb8dd; margin: 0 0 0.5rem; letter-spacing: 0.3px; }
.barrel-label b { color: #ff4dbb; text-shadow: 0 0 12px rgba(255, 0, 170, 1), 0 0 25px rgba(255, 0, 170, 0.6); font-size: 0.95rem; }

.ms-row { display: flex; justify-content: space-between; font-size: 0.7rem; color: #cbb8dd; margin: 0.4rem 0 0.3rem; font-weight: 600; }
.ms-row b { color: #ff4dbb; text-shadow: 0 0 10px rgba(255, 0, 170, 0.9); }
.ms-bar {
  height: 8px; background: #1a0524;
  border-radius: 4px; overflow: hidden;
  border: 1px solid #5a2570; margin-bottom: 0.5rem;
  box-shadow: inset 0 0 10px rgba(255, 0, 170, 0.3);
}
.ms-fill {
  height: 100%; width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #b833ff, #ff00aa, #ffb300);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(255, 0, 170, 1), 0 0 25px rgba(255, 0, 170, 0.6), 0 0 40px rgba(255, 180, 0, 0.4);
  transition: width 0.3s;
  animation: barShimmer 3s linear infinite;
}
@keyframes barShimmer { to { background-position: 200% 0; } }

.buy-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.4rem; margin-bottom: 0.4rem; }
.buy-row button {
  text-align: center;
  background: linear-gradient(135deg, #b833ff, #ff00aa);
  border: none; color: #fff; font-weight: 800;
  font-size: 0.85rem; padding: 0.55rem 0.5rem;
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.7), 0 0 25px rgba(255, 0, 170, 0.5), 0 0 50px rgba(184, 51, 255, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
  position: relative; overflow: hidden;
}
.buy-row button::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: btnShine 3s ease-in-out infinite;
}
@keyframes btnShine { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } }
.buy-row button:hover:not(:disabled) {
  box-shadow: 0 0 15px rgba(255, 0, 170, 1), 0 0 40px rgba(255, 0, 170, 0.8), 0 0 80px rgba(184, 51, 255, 0.5), 0 0 120px rgba(255, 180, 0, 0.3), inset 0 0 25px rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.buy-row button:disabled { background: linear-gradient(135deg, #3d1748, #2a0f35); box-shadow: none; text-shadow: none; }
.buy-row button:disabled::after { display: none; }

small { color: #cbb8dd; font-size: 0.78rem; }
.hint { color: #cbb8dd; font-size: 0.75rem; margin: 0.3rem 0 0 0; line-height: 1.4; }
.hint b { color: #e0b3ff; }

.building-row { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; margin-bottom: 0.35rem; }
.building-buy {
  text-align: left;
  display: flex; justify-content: space-between;
  align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.7rem;
  background: #1a0820; border: 1px solid #4a1f5a;
  position: relative; overflow: hidden;
  transition: all 0.25s;
}
.building-buy::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 180, 0, 0.08), transparent);
  transform: translateX(-100%); transition: transform 0.6s;
}
.building-buy:hover:not(:disabled)::before { transform: translateX(100%); }
.building-buy:hover:not(:disabled) {
  border-color: #ff00aa; background: #2a0f35;
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.6), 0 0 35px rgba(184, 51, 255, 0.3);
}
.building-buy .b-left { flex: 1; min-width: 0; }
.building-buy .b-name { font-weight: 700; display: block; color: #ffffff; font-size: 0.88rem; }
.building-buy .b-sub { font-size: 0.72rem; color: #b8a0c8; display: block; margin-top: 1px; }
.building-buy .b-cost { text-align: right; font-size: 0.8rem; color: #b8a0c8; white-space: nowrap; }
.building-buy .b-cost b { color: #ff4dbb; text-shadow: 0 0 10px rgba(255, 0, 170, 0.9); }
.building-mult {
  min-width: 72px; text-align: center;
  padding: 0.4rem 0.4rem; font-size: 0.82rem; line-height: 1.15;
  background: linear-gradient(135deg, #b833ff, #ff00aa);
  border: none; color: #fff; font-weight: 800;
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.6), 0 0 25px rgba(255, 0, 170, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.building-mult:hover:not(:disabled) {
  box-shadow: 0 0 15px rgba(255, 0, 170, 1), 0 0 40px rgba(255, 0, 170, 0.7), 0 0 80px rgba(184, 51, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.building-mult .mult-name { font-weight: 800; color: #fff; display: block; }
.building-mult small { display: block; color: rgba(255,255,255,0.95); font-size: 0.65rem; }

.upgrade-card {
  background: #1a0820; border: 1px solid #4a1f5a;
  border-radius: 10px; padding: 0.55rem 0.7rem;
  margin-bottom: 0.4rem;
  display: flex; justify-content: space-between;
  align-items: center; gap: 0.5rem;
  transition: all 0.25s;
}
.upgrade-card.can-buy {
  border-color: #ff00aa; background: #2a0f35;
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.5), 0 0 35px rgba(184, 51, 255, 0.2);
  animation: canBuyPulse 2s ease-in-out infinite;
}
@keyframes canBuyPulse {
  0%, 100% { box-shadow: 0 0 15px rgba(255, 0, 170, 0.5), 0 0 35px rgba(184, 51, 255, 0.2); }
  50%      { box-shadow: 0 0 25px rgba(255, 0, 170, 0.8), 0 0 50px rgba(184, 51, 255, 0.4); }
}
.upgrade-card .u-info { flex: 1; min-width: 0; }
.upgrade-card .u-name { font-weight: 700; font-size: 0.88rem; color: #ffffff; }
.upgrade-card .u-desc { font-size: 0.72rem; color: #b8a0c8; display: block; margin-top: 1px; }
.upgrade-card .u-lvl { font-size: 0.72rem; color: #ff4dbb; text-shadow: 0 0 8px rgba(255, 0, 170, 0.7); }
.upgrade-card .u-buy {
  min-width: 92px; text-align: center; font-size: 0.82rem;
  background: linear-gradient(135deg, #b833ff, #ff00aa);
  border: none; color: #fff; font-weight: 800;
  padding: 0.5rem 0.5rem;
  box-shadow: 0 0 10px rgba(255, 0, 170, 0.6), 0 0 25px rgba(255, 0, 170, 0.4), inset 0 0 12px rgba(255, 255, 255, 0.15);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}
.upgrade-card .u-buy:hover:not(:disabled) {
  box-shadow: 0 0 15px rgba(255, 0, 170, 1), 0 0 40px rgba(255, 0, 170, 0.7), 0 0 80px rgba(184, 51, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.25);
}
.upgrade-card .u-buy:disabled { background: linear-gradient(135deg, #3d1748, #2a0f35); box-shadow: none; text-shadow: none; }
.upgrade-card .u-buy .price { font-weight: 800; color: #fff; display: block; }

button.prestige {
  background: linear-gradient(135deg, #ff00aa, #b833ff, #ffb300);
  background-size: 200% 200%;
  color: #fff; border: none; font-weight: 800;
  width: 100%; padding: 0.75rem;
  letter-spacing: 0.5px;
  animation: prestigeShimmer 4s ease infinite;
  box-shadow: 0 0 15px rgba(255, 0, 170, 0.8), 0 0 40px rgba(255, 0, 170, 0.6), 0 0 80px rgba(184, 51, 255, 0.4), 0 0 120px rgba(255, 180, 0, 0.2), inset 0 0 20px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}
@keyframes prestigeShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
button.prestige:hover:not(:disabled) {
  box-shadow: 0 0 25px rgba(255, 0, 170, 1), 0 0 60px rgba(255, 0, 170, 0.9), 0 0 120px rgba(184, 51, 255, 0.6), 0 0 180px rgba(255, 180, 0, 0.4), inset 0 0 25px rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}
button.prestige:disabled { background: linear-gradient(135deg, #3d1748, #2a0f35); box-shadow: none; text-shadow: none; animation: none; }

.toast {
  position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, #b833ff, #ff00aa);
  color: #fff; padding: 0.7rem 1.5rem;
  border-radius: 20px; font-weight: 800;
  z-index: 200;
  box-shadow: 0 0 30px rgba(255, 0, 170, 1), 0 0 60px rgba(184, 51, 255, 0.8), 0 0 100px rgba(255, 180, 0, 0.4), inset 0 0 15px rgba(255, 255, 255, 0.2);
  animation: toastIn 0.3s;
  max-width: 90vw;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
}
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -20px); } to { opacity: 1; transform: translate(-50%, 0); } }

.golden-drop {
  position: fixed; width: 10px; height: 12px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 30% 25%, #fff8d0, #ffd966 45%, #ffb300 70%, #b8860b 100%);
  box-shadow: 0 0 8px #ffd966, 0 0 16px #ffa500, 0 0 30px rgba(255, 180, 0, 0.6), inset -1px -1px 2px rgba(184, 134, 11, 0.6);
  pointer-events: none; z-index: 150;
  will-change: transform, opacity;
  animation: dropFly 1.1s cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
@keyframes dropFly {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }
  30% { transform: translate(calc(-50% + var(--tx) * 0.7), calc(-50% + var(--ty) * 1.4)) scale(1.1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty) + 120px)) scale(0.9); opacity: 0; }
}

.spark {
  position: fixed; width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #ff4dbb 50%, transparent);
  box-shadow: 0 0 8px #ff4dbb, 0 0 16px #ff00aa, 0 0 25px rgba(255, 0, 170, 0.6);
  pointer-events: none; z-index: 150;
  will-change: transform, opacity;
  animation: sparkFly 0.8s ease-out forwards;
}
@keyframes sparkFly {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0.3); opacity: 0; }
}

.ambient-sparkle {
  position: absolute; width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff, #ffd966 50%, transparent);
  box-shadow: 0 0 8px #ffd966, 0 0 16px #ffb300, 0 0 25px rgba(255, 180, 0, 0.7);
  pointer-events: none; z-index: 3;
  animation: sparkleRise var(--dur, 3s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes sparkleRise {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  20% { opacity: 1; transform: translateY(-10px) scale(1.2); }
  80% { opacity: 0.8; }
  100% { transform: translateY(calc(-1 * var(--rise, 100px))) scale(0.3); opacity: 0; }
}

.click-flash {
  position: fixed; width: 60px; height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 216, 100, 0.9), rgba(255, 0, 170, 0.4) 40%, transparent 70%);
  pointer-events: none; z-index: 149;
  transform: translate(-50%, -50%);
  animation: flashBurst 0.4s ease-out forwards;
}
@keyframes flashBurst {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; }
}

.golden-beer {
  position: fixed; font-size: 3rem; cursor: pointer; z-index: 100;
  user-select: none;
  filter: drop-shadow(0 0 20px #ff00aa) drop-shadow(0 0 40px #b833ff) drop-shadow(0 0 70px #ffb300);
  animation: goldenPulse 0.6s infinite alternate;
  transition: transform 0.1s;
}
.golden-beer:hover { transform: scale(1.15); }
@keyframes goldenPulse {
  from { filter: drop-shadow(0 0 15px #ff00aa) drop-shadow(0 0 30px #b833ff) drop-shadow(0 0 50px #ffb300); }
  to   { filter: drop-shadow(0 0 35px #ff00aa) drop-shadow(0 0 70px #b833ff) drop-shadow(0 0 110px #ffb300); }
}

.stats div { font-size: 0.8rem; color: #cbb8dd; margin-bottom: 0.2rem; display: flex; justify-content: space-between; }
.stats b { color: #ff4dbb; text-shadow: 0 0 8px rgba(255, 0, 170, 0.7); }

#saveBtn, #resetBtn {
  width: 100%;
  background: transparent;
  border: 1px solid #5a2570;
  color: #e0b3ff; font-weight: 600; font-size: 0.82rem; letter-spacing: 0.3px;
}
#saveBtn:hover, #resetBtn:hover {
  border-color: #ff00aa; color: #fff;
  box-shadow: 0 0 20px rgba(255, 0, 170, 0.7), 0 0 50px rgba(184, 51, 255, 0.4);
  text-shadow: 0 0 8px rgba(255, 0, 170, 0.9);
}
#saveBtn { margin-bottom: 0.4rem; }

.top-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tap-power-display {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 .15rem; padding: 13px 15px; position: relative; overflow: hidden;
  border: 1px solid rgba(255, 202, 112, .55); border-radius: 15px;
  background: linear-gradient(115deg, rgba(65, 31, 20, .96), rgba(32, 11, 36, .96) 55%, rgba(22, 23, 52, .96));
  box-shadow: 0 0 18px rgba(255, 160, 58, .12), inset 0 1px 0 rgba(255,255,255,.12);
}
.tap-power-display::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: linear-gradient(105deg, transparent 15%, rgba(255, 222, 160, .12) 48%, transparent 70%);
  transform: translateX(-100%); animation: hudSweep 5s ease-in-out infinite;
}
@keyframes hudSweep { 0%, 25% { transform: translateX(-100%); } 65%, 100% { transform: translateX(100%); } }
.tap-power-main, .tap-power-crit { position: relative; z-index: 1; display: flex; flex-direction: column; }
.tap-power-eyebrow { color: #ffcf78; font-size: .66rem; font-weight: 900; letter-spacing: 1.5px; }
.tap-power-number { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; line-height: 1.15; margin: 3px 0 1px; }
.tap-power-number #clickVal { font-size: clamp(1.7rem, 5vw, 2.35rem); font-weight: 950; letter-spacing: -.8px; color: #fff3c4;
  text-shadow: 0 0 8px rgba(255,188,76,.95), 0 0 25px rgba(255,132,39,.5); font-variant-numeric: tabular-nums; }
.tap-power-unit { color: #ffd18a; font-size: .92rem; font-weight: 800; }
.tap-power-caption { color: #cdbbcf; font-size: .7rem; }
.tap-power-crit { min-width: 105px; align-items: flex-end; text-align: right; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(255,218,154,.2); }
.tap-power-crit > span { color: #e7c8f3; font-size: .68rem; font-weight: 700; }
.tap-power-crit strong { color: #ff8fca; font-size: 1.15rem; line-height: 1.3; text-shadow: 0 0 12px rgba(255,52,171,.55); }
.tap-power-crit small { color: #bba5c9; font-size: .65rem; }
.barrel-container { isolation: isolate; min-height: 260px; overflow: visible; }
.barrel-svg { width: 196px; height: 245px; filter: drop-shadow(0 10px 9px rgba(0,0,0,.48)) drop-shadow(0 0 17px rgba(255,145,48,.28)) drop-shadow(0 0 35px rgba(143,57,255,.32)); }
.barrel-container:active { transform: scale(.985); }
.barrel-container.flash .barrel-svg { animation: barrelImpact .32s cubic-bezier(.2,.8,.2,1); }
@keyframes barrelImpact {
  0% { transform: translateY(0) scale(1) rotate(0); filter: brightness(1); }
  25% { transform: translateY(3px) scale(1.055,.94) rotate(-2deg); filter: brightness(1.28); }
  60% { transform: translateY(-5px) scale(.98,1.04) rotate(1.4deg); filter: brightness(1.16); }
  100% { transform: translateY(0) scale(1) rotate(0); filter: brightness(1); }
}
.barrel-container::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 115px; height: 115px; border-radius: 50%;
  border: 2px solid rgba(255,210,125,0); transform: translate(-50%,-50%) scale(.3); opacity: 0; pointer-events: none; z-index: 1;
}
.barrel-container.flash::after { animation: caskShockwave .48s ease-out; }
@keyframes caskShockwave {
  0% { transform: translate(-50%,-50%) scale(.35); border-color: rgba(255,239,177,.95); opacity: 1; box-shadow: 0 0 22px rgba(255,178,63,.55); }
  100% { transform: translate(-50%,-50%) scale(2.45); border-color: rgba(255,124,207,0); opacity: 0; box-shadow: 0 0 45px rgba(143,85,255,0); }
}
.flame-outer {
  background: radial-gradient(ellipse at 50% 62%, rgba(255,169,54,.55) 0%, rgba(255,63,164,.28) 38%, rgba(106,48,255,.22) 58%, transparent 76%);
}
.flame-1 { background: radial-gradient(ellipse at 50% 90%, #fff2b8 0%, #ffae62 15%, #ff4eae 42%, #762dff 70%, transparent 100%); }
.flame-2 { background: radial-gradient(ellipse at 50% 90%, #ffffff 0%, #fff0bb 12%, #ff8baf 35%, #be55ff 67%, transparent 100%); }
.flame-3, .flame-4 { background: radial-gradient(ellipse at 50% 90%, #ffe8a0 0%, #ff6d8e 30%, #7c38f7 65%, transparent 100%); }
.barrel-rays { opacity: .65; filter: blur(5px); }
.spark {
  background: radial-gradient(circle, #fff 0%, var(--spark-color, #ff4dbb) 45%, transparent 76%);
  box-shadow: 0 0 8px var(--spark-color, #ff4dbb), 0 0 18px var(--spark-color, #ff00aa);
}
.float-gain {
  position: fixed; z-index: 160; pointer-events: none; white-space: nowrap;
  color: #fff2bd; font-size: clamp(.9rem, 3vw, 1.25rem); font-weight: 950; letter-spacing: .2px;
  text-shadow: 0 2px 2px rgba(25,7,28,.9), 0 0 10px rgba(255,169,54,.95), 0 0 22px rgba(255,75,177,.65);
  transform: translate(-50%,-50%); animation: gainRise .95s cubic-bezier(.15,.65,.3,1) forwards;
}
.float-gain.critical { color: #ff9cdd; font-size: clamp(1.02rem, 3.4vw, 1.45rem); text-shadow: 0 0 9px #ff36b2, 0 0 24px rgba(180,62,255,.95); }
@keyframes gainRise {
  0% { opacity: 0; transform: translate(-50%,-30%) scale(.65) rotate(-4deg); }
  12% { opacity: 1; transform: translate(-50%,-50%) scale(1.12) rotate(2deg); }
  72% { opacity: 1; transform: translate(-50%,-135%) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%,-190%) scale(.88) rotate(2deg); }
}
.barrel-label { color: #ead8f4; font-weight: 650; }

/* ============ НОВОЕ: настройки + индикатор сейва ============ */
.settings-row {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
#perfModeBtn {
  width: 100%;
  background: transparent;
  border: 1px solid #5a2570;
  color: #e0b3ff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.6rem;
  letter-spacing: 0.3px;
}
#perfModeBtn.active {
  background: linear-gradient(135deg, #b833ff, #ff00aa);
  color: #fff;
  border-color: #ff00aa;
  box-shadow: 0 0 20px rgba(255, 0, 170, 0.7), 0 0 40px rgba(184, 51, 255, 0.4);
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}
.save-status {
  font-size: 0.72rem;
  color: #cbb8dd;
  text-align: center;
  margin: 0.4rem 0 0;
  opacity: 0.75;
  min-height: 1em;
  letter-spacing: 0.2px;
  transition: opacity 0.3s;
}
.save-status.fresh {
  color: #ff4dbb;
  text-shadow: 0 0 10px rgba(255, 0, 170, 0.8);
  opacity: 1;
}

/* ============ РЕЖИМ ПРОИЗВОДИТЕЛЬНОСТИ ============ */
body.perf-mode .ambient-sparkle,
body.perf-mode .golden-drop,
body.perf-mode .spark,
body.perf-mode .click-flash,
body.perf-mode .flame-lick {
  display: none !important;
}
body.perf-mode body::before,
body.perf-mode body::after {
  animation: none !important;
}
body.perf-mode .flame,
body.perf-mode .flame-outer,
body.perf-mode .barrel-rays,
body.perf-mode .barrel-ring,
body.perf-mode .barrel-svg,
body.perf-mode .ms-fill,
body.perf-mode .btn,
body.perf-mode .buy-row button::after {
  animation: none !important;
}
body.perf-mode .tap-power-display::before { animation: none !important; }
body.perf-mode .panel h2::before { animation: none !important; }
body.perf-mode button.prestige { animation: none !important; background: linear-gradient(135deg, #b833ff, #ff00aa); }

@media (max-width: 420px) {
  .tap-power-display { padding: 11px 12px; gap: 8px; }
  .tap-power-crit { min-width: 86px; padding-left: 9px; }
  .tap-power-crit > span { font-size: .62rem; }
  .barrel-svg { width: 184px; height: 230px; }
  .barrel-container { min-height: 245px; }
}
@media (prefers-reduced-motion: reduce) {
  .tap-power-display::before { animation: none; }
  .barrel-svg, .flame, .flame-lick, .flame-outer, .barrel-rays, .barrel-ring, .ambient-sparkle, .ms-fill { animation-duration: 8s !important; }
  .float-gain { animation-duration: .2s; }
}
/* ============ КНОПКА «ЗАЛПОМ» ============ */
.chug-btn {
  display: block;
  width: 100%;
  margin: 0 0 0.8rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #ff6a00, #ff00aa, #b833ff);
  background-size: 200% 200%;
  border: none;
  border-radius: 12px;
  color: #fff;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255,255,255,0.6);
  box-shadow:
    0 0 15px rgba(255, 100, 0, 0.7),
    0 0 35px rgba(255, 0, 170, 0.5),
    inset 0 0 20px rgba(255, 255, 255, 0.2);
  animation: chugShimmer 3s ease infinite;
  transition: transform 0.1s, box-shadow 0.2s;
}
@keyframes chugShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.chug-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 0 25px rgba(255, 100, 0, 1),
    0 0 60px rgba(255, 0, 170, 0.8),
    inset 0 0 25px rgba(255, 255, 255, 0.3);
}
.chug-btn:active:not(:disabled) {
  transform: scale(0.97);
}
.chug-btn:disabled {
  background: linear-gradient(135deg, #2a1035, #1a0820);
  color: #7a6088;
  cursor: not-allowed;
  box-shadow: none;
  animation: none;
  text-shadow: none;
}
/* ============ ОБНОВЛЕНИЕ БОЧОНКА ============ */
/* Убираем яркое свечение, оставляем мягкую тень */
.barrel-svg {
  filter:
    drop-shadow(0 8px 10px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 20px rgba(255, 160, 40, 0.25));
}
/* Лучи и кольцо — тише, чтобы не спорить с бочонком */
.barrel-rays { opacity: 0.35; }
.barrel-ring {
  border-color: rgba(255, 180, 40, 0.35);
  box-shadow: 0 0 15px rgba(255, 160, 40, 0.35), inset 0 0 15px rgba(255, 140, 0, 0.2);
}
/* Убираем вспышку-шоквейв при клике (оставляем только лёгкое качание) */
.barrel-container.flash::after { animation: none; }
/* ============================================================
   КОМБО-ПОЛОСА
   ============================================================ */
.combo-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 0 0.2rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(90deg, rgba(60, 30, 10, 0.7), rgba(30, 16, 40, 0.7));
  border: 1px solid rgba(255, 180, 40, 0.35);
  border-radius: 10px;
  transition: all 0.25s;
}
.combo-wrap.active {
  border-color: #ffb800;
  background: linear-gradient(90deg, rgba(255, 140, 0, 0.25), rgba(140, 40, 220, 0.25));
  box-shadow:
    0 0 15px rgba(255, 160, 40, 0.55),
    0 0 35px rgba(255, 100, 20, 0.35),
    inset 0 0 15px rgba(255, 200, 100, 0.15);
}
.combo-label {
  color: #ffcf78;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  white-space: nowrap;
}
.combo-track {
  flex: 1;
  height: 10px;
  background: #1a1208;
  border-radius: 5px;
  overflow: visible;
  border: 1px solid #5a3810;
  box-shadow: inset 0 0 8px rgba(255, 140, 0, 0.25);
}
.combo-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  background: linear-gradient(90deg, #8a1fff, #ff6a00, #ffb800, #ffd966);
  background-size: 200% 100%;
  box-shadow:
    0 0 10px rgba(255, 160, 40, 0.9),
    0 0 20px rgba(255, 100, 20, 0.6);
  transition: width 0.15s ease-out;
  animation: barShimmer 2s linear infinite;
}
.combo-fill.active {
  background: linear-gradient(90deg, #ffb800, #ffd966, #ffb800);
  animation: comboFire 0.4s linear infinite;
}
@keyframes comboFire {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.4); }
}
.combo-status {
  color: #c9a86a;
  font-size: 0.78rem;
  font-weight: 800;
  min-width: 58px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.combo-status.active {
  color: #ffb800;
  text-shadow: 0 0 10px rgba(255, 160, 40, 1), 0 0 20px rgba(255, 140, 0, 0.7);
  animation: comboFire 0.4s linear infinite;
}

/* ============================================================
   ЕЖЕДНЕВНЫЙ БОНУС
   ============================================================ */
.daily-wrap {
  margin: 0.5rem 0 1rem;
  padding: 0.7rem 0.9rem;
  background: linear-gradient(180deg, #1e1610, #14100c);
  border: 1px solid #5a3810;
  border-radius: 12px;
  transition: all 0.25s;
}
.daily-wrap:has(.daily-btn.ready) {
  border-color: #ffb800;
  box-shadow:
    0 0 18px rgba(255, 160, 40, 0.5),
    0 0 40px rgba(140, 40, 220, 0.25),
    inset 0 0 20px rgba(255, 140, 0, 0.1);
}
.daily-title {
  color: #ffcf78;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  margin-bottom: 0.5rem;
  text-align: center;
}
.daily-dots {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.daily-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a1208;
  border: 1.5px solid #5a3810;
  color: #806050;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.daily-dot.done {
  background: linear-gradient(135deg, #ff8a20, #ffb800);
  border-color: #ffb800;
  color: #1a0e08;
  box-shadow:
    0 0 10px rgba(255, 160, 40, 0.8),
    inset 0 0 6px rgba(255, 255, 200, 0.5);
}
.daily-dot.current {
  border-color: #ffb800;
  color: #ffd97a;
  animation: dotPulse 1.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 160, 40, 0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 16px rgba(255, 160, 40, 1), 0 0 28px rgba(255, 140, 0, 0.6); transform: scale(1.08); }
}
.daily-btn {
  width: 100%;
  padding: 0.65rem 0.8rem;
  background: linear-gradient(135deg, #2a1a1a, #1a1208);
  border: 1px solid #5a3810;
  border-radius: 10px;
  color: #806050;
  font-family: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  cursor: not-allowed;
  transition: all 0.25s;
  letter-spacing: 0.3px;
}
.daily-btn.ready {
  background: linear-gradient(135deg, #8a1fff, #ff6a00, #ffb800);
  background-size: 200% 200%;
  border: none;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(255,255,255,0.7);
  box-shadow:
    0 0 15px rgba(255, 140, 0, 0.75),
    0 0 35px rgba(255, 100, 20, 0.55),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  animation: buyShimmer 3s ease-in-out infinite;
}
.daily-btn.ready:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 25px rgba(255, 180, 40, 1),
    0 0 60px rgba(255, 120, 20, 0.85),
    inset 0 0 22px rgba(255, 255, 255, 0.3);
}
.daily-btn.ready:active { transform: scale(0.97); }
/* ============================================================
   ЛИПКАЯ ПЛАШКА ВВЕРХУ
   ============================================================ */
.top-stats {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0.6rem 1rem;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  background: rgba(20, 16, 15, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122, 80, 16, 0.6);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(255, 160, 40, 0.2);
}

/* Отступ сверху для main, чтобы плашка не перекрывала заголовок */
main {
  padding-top: 6rem;
}

@media (max-width: 900px) {
  main { padding-top: 5.5rem; }
}
/* ============================================================
   КНОПКА MAX У ПИВОВАРНИ
   ============================================================ */
.building-row {
  grid-template-columns: 1fr auto auto;  /* было 1fr auto */
}
.building-max {
  min-width: 58px;
  text-align: center;
  padding: 0.4rem 0.35rem;
  font-size: 0.82rem;
  line-height: 1.15;
  background: linear-gradient(135deg, #ffb800, #ff8a20);
  border: none;
  color: #1a0e08;
  font-weight: 900;
  box-shadow:
    0 0 10px rgba(255, 160, 40, 0.7),
    0 0 25px rgba(255, 140, 0, 0.5),
    inset 0 0 12px rgba(255, 255, 255, 0.3);
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}
.building-max:hover:not(:disabled) {
  box-shadow:
    0 0 15px rgba(255, 180, 40, 1),
    0 0 40px rgba(255, 120, 20, 0.8),
    inset 0 0 20px rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}
.building-max .max-name {
  font-weight: 900;
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
}
.building-max small {
  display: block;
  color: rgba(30, 15, 5, 0.85);
  font-size: 0.6rem;
  font-weight: 800;
}
.building-max:disabled {
  background: linear-gradient(135deg, #2a1a2a, #1a1218);
  color: #806050;
  box-shadow: none;
  text-shadow: none;
}

@media (max-width: 420px) {
  .building-max { min-width: 48px; padding: 0.35rem 0.25rem; font-size: 0.72rem; }
}
/* ============================================================
   ПИВНОЙ БРЕЙКДАНС
   ============================================================ */
.bd-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bdFadeIn 0.25s;
}
.bd-overlay.fade-out { animation: bdFadeOut 0.3s forwards; }
@keyframes bdFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes bdFadeOut { to { opacity: 0; } }

.bd-panel {
  width: min(560px, 94vw);
  max-height: 94vh;
  background: linear-gradient(180deg, #1e1610, #0e0a0c);
  border: 2px solid #ffb800;
  border-radius: 18px;
  padding: 1rem;
  box-shadow:
    0 0 40px rgba(255, 160, 40, 0.6),
    0 0 80px rgba(140, 40, 220, 0.35),
    inset 0 0 30px rgba(140, 40, 220, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
}

.bd-title {
  color: #ffd97a;
  font-weight: 900;
  letter-spacing: 2px;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 0.6rem;
  text-shadow:
    0 0 14px rgba(255, 160, 40, 0.95),
    0 0 30px rgba(140, 40, 220, 0.7);
  animation: bdTitlePulse 0.7s ease-in-out infinite alternate;
}
@keyframes bdTitlePulse {
  from { transform: scale(1); filter: brightness(1); }
  to   { transform: scale(1.04); filter: brightness(1.2); }
}

.bd-timer-track {
  height: 8px;
  background: #1a1208;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  border: 1px solid #5a3810;
  box-shadow: inset 0 0 8px rgba(255, 140, 0, 0.3);
}
.bd-timer-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #ffb800, #ff6a00, #8a1fff);
  box-shadow: 0 0 12px rgba(255, 140, 0, 0.9);
}

.bd-counter {
  color: #ffcf78;
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 0.5rem;
  letter-spacing: 0.5px;
}
.bd-counter b {
  color: #ffb800;
  font-size: 1.15rem;
  text-shadow: 0 0 10px rgba(255, 160, 40, 1);
}

.bd-field {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 220px;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 140, 0, 0.12),
    rgba(140, 40, 220, 0.08) 60%,
    rgba(0, 0, 0, 0.4));
  border-radius: 12px;
  border: 1px solid rgba(122, 80, 16, 0.55);
  overflow: hidden;
}

.bd-btn {
  position: absolute;
  width: 62px;
  height: 62px;
  margin-left: -31px;
  margin-top: -31px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffb800, #ff6a00, #8a1fff);
  background-size: 200% 200%;
  border: 2px solid #fff3c4;
  color: #fff;
  font-size: 1.7rem;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 15px rgba(255, 160, 40, 0.9),
    0 0 35px rgba(255, 100, 20, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.35);
  animation:
    bdBtnIn 0.32s cubic-bezier(.2, 1.4, .4, 1) both,
    bdBtnShimmer 3s ease-in-out infinite;
  transition: filter 0.15s;
  will-change: transform, opacity;
}
@keyframes bdBtnIn {
  0%   { transform: scale(0) rotate(-90deg); opacity: 0; }
  100% { transform: scale(1) rotate(0deg);   opacity: 1; }
}
@keyframes bdBtnShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.bd-btn:hover:not(:disabled) { filter: brightness(1.3); }
.bd-btn:active:not(:disabled) { filter: brightness(1.6); }
.bd-btn.hit {
  pointer-events: none;
  animation: bdBtnHit 0.42s ease-out forwards;
}
@keyframes bdBtnHit {
  0%   { transform: scale(1.25); filter: brightness(2.2); }
  60%  { transform: scale(1.4); opacity: 1; }
  100% { transform: scale(0.2) rotate(45deg); opacity: 0; }
}

.bd-hint {
  color: #c9a86a;
  font-size: 0.74rem;
  text-align: center;
  margin-top: 0.55rem;
  font-style: italic;
}

@media (max-width: 480px) {
  .bd-panel { padding: 0.75rem; }
  .bd-title { font-size: 0.95rem; letter-spacing: 1px; }
  .bd-btn { width: 52px; height: 52px; margin-left: -26px; margin-top: -26px; font-size: 1.4rem; }
  .bd-field { aspect-ratio: 4 / 5; min-height: 300px; }
}

/* Индикатор активного брейкданс-баффа */
.bd-buff-badge {
  position: fixed;
  top: 6.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 998;
  padding: 0.4rem 1rem;
  background: linear-gradient(135deg, #8a1fff, #ff6a00, #ffb800);
  background-size: 200% 200%;
  border-radius: 20px;
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px rgba(255,255,255,0.7);
  box-shadow:
    0 0 20px rgba(255, 140, 0, 0.9),
    0 0 45px rgba(140, 40, 220, 0.6);
  animation: bdBadgeShimmer 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bdBadgeShimmer {
  0%, 100% { background-position: 0% 50%; transform: translateX(-50%) scale(1); }
  50%      { background-position: 100% 50%; transform: translateX(-50%) scale(1.05); }
}

@media (max-width: 900px) {
  .bd-buff-badge { top: 5.6rem; font-size: 0.82rem; padding: 0.35rem 0.85rem; }
}
/* ============================================================
   ЭКСПОРТ / ИМПОРТ СЕЙВА
   ============================================================ */
.save-code-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.save-code-row button {
  width: 100%;
  background: transparent;
  border: 1px solid #7a5010;
  color: #ffd97a;
  font-weight: 700;
  font-size: 0.82rem;
  padding: 0.65rem 0.5rem;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
}
.save-code-row button:hover {
  border-color: #ffb800;
  color: #fff8d0;
  box-shadow:
    0 0 20px rgba(255, 160, 40, 0.6),
    0 0 45px rgba(140, 40, 220, 0.3);
}

.save-code-modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.save-code-modal.show { display: flex; }

.save-code-panel {
  width: min(560px, 96vw);
  max-height: 90vh;
  background: linear-gradient(180deg, #1e1610, #0e0a0c);
  border: 2px solid #ffb800;
  border-radius: 16px;
  padding: 1rem;
  box-shadow:
    0 0 40px rgba(255, 160, 40, 0.6),
    0 0 80px rgba(140, 40, 220, 0.35),
    inset 0 0 30px rgba(140, 40, 220, 0.15);
  display: flex;
  flex-direction: column;
}
.save-code-title {
  color: #ffd97a;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-align: center;
  margin-bottom: 0.7rem;
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(255, 160, 40, 0.9);
}
.save-code-text {
  width: 100%;
  min-height: 160px;
  max-height: 42vh;
  padding: 0.7rem;
  font-family: ui-monospace, SFMono-Regular, 'Courier New', monospace;
  font-size: 0.72rem;
  line-height: 1.4;
  background: #0a0608;
  border: 1px solid #5a3810;
  border-radius: 8px;
  color: #fff8d0;
  resize: vertical;
  word-break: break-all;
  box-sizing: border-box;
  outline: none;
}
.save-code-text:focus {
  border-color: #ffb800;
  box-shadow: 0 0 12px rgba(255, 160, 40, 0.5);
}
.save-code-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.save-code-actions button {
  padding: 0.7rem;
  font-weight: 800;
  border-radius: 10px;
  font-family: inherit;
  cursor: pointer;
  font-size: 0.88rem;
  letter-spacing: 0.3px;
  transition: all 0.2s;
}
#saveCodeActionBtn {
  background: linear-gradient(135deg, #8a1fff, #ff6a00, #ffb800);
  background-size: 200% 200%;
  border: none;
  color: #fff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
  box-shadow:
    0 0 15px rgba(255, 140, 0, 0.7),
    0 0 35px rgba(140, 40, 220, 0.4),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  animation: buyShimmer 3s ease-in-out infinite;
}
#saveCodeActionBtn:hover {
  box-shadow:
    0 0 25px rgba(255, 180, 40, 1),
    0 0 60px rgba(255, 120, 20, 0.85),
    inset 0 0 20px rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
#saveCodeCloseBtn {
  background: #2a1a1a;
  border: 1px solid #7a5010;
  color: #ffd97a;
}
#saveCodeCloseBtn:hover {
  border-color: #ffb800;
  background: #3a2818;
  color: #fff8d0;
  box-shadow: 0 0 18px rgba(255, 160, 40, 0.5);
}

@media (max-width: 480px) {
  .save-code-text { font-size: 0.65rem; min-height: 130px; }
  .save-code-panel { padding: 0.8rem; }
}
/* ============================================================
   ВКЛАДКИ (bottom-tab navigation)
   ============================================================ */

/* Один контейнер вместо двух панелей */
main {
  display: block;
  max-width: 720px;
  padding: 6rem 1rem 90px;
}

/* Скрываем все views, показываем активную */
.view { display: none; }
.view.active {
  display: block;
  animation: viewFadeIn 0.22s ease-out;
}
@keyframes viewFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Внутри views панели растягиваются */
.view .panel { margin: 0; }

/* Нижнее меню */
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 68px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  background: rgba(20, 16, 15, 0.97);
  border-top: 1px solid rgba(122, 80, 16, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  z-index: 950;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.7);
}

.tab-btn {
  background: transparent;
  border: none;
  color: #806050;
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: all 0.2s;
  cursor: pointer;
  padding: 0.4rem 0.2rem;
  letter-spacing: 0.3px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
  margin: 4px 2px;
}
.tab-btn .tab-icon {
  font-size: 1.35rem;
  line-height: 1;
  transition: transform 0.2s;
}
.tab-btn.active {
  color: #ffb800;
  text-shadow: 0 0 12px rgba(255, 160, 40, 0.9);
}
.tab-btn.active .tab-icon {
  transform: scale(1.15) translateY(-1px);
  filter: drop-shadow(0 0 8px rgba(255, 160, 40, 0.9));
}
.tab-btn:hover:not(.active) { color: #c9a86a; }

/* Тост поверх плашки (чтобы не терялся) */
.toast { z-index: 1500; }

/* Плашка сверху сужается под новую ширину */
.top-stats { max-width: 720px; }

@media (max-width: 480px) {
  main { padding: 5.6rem 0.6rem 88px; }
  .tab-btn { font-size: 0.58rem; }
  .tab-btn .tab-icon { font-size: 1.2rem; }
}
/* ============================================================
   ПЕРЕКЛЮЧАТЕЛЬ ФОРМАТА ЧИСЕЛ
   ============================================================ */
.format-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.format-btn {
  padding: 0.7rem;
  border: 1px solid #7a5010;
  background: transparent;
  color: #ffd97a;
  font-weight: 800;
  font-size: 0.95rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}
.format-btn:hover:not(.active) {
  border-color: #ffb800;
  color: #fff8d0;
  box-shadow: 0 0 15px rgba(255, 160, 40, 0.4);
}
.format-btn.active {
  background: linear-gradient(135deg, #8a1fff, #ff6a00, #ffb800);
  color: #fff;
  border-color: #ffb800;
  box-shadow:
    0 0 18px rgba(255, 160, 40, 0.6),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.account-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.account-row button {
  width: 100%;
  padding: 0.7rem;
  border: 1px solid #7a5010;
  background: transparent;
  color: #ffd97a;
  font-weight: 700;
  font-size: 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
}
.account-row button:hover {
  border-color: #ffb800;
  color: #fff8d0;
  box-shadow: 0 0 18px rgba(255, 160, 40, 0.5);
}
/* ============================================================
   ТАБЛИЦА ЛИДЕРОВ
   ============================================================ */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}
.lb-row {
  display: grid;
  .lb-row {
  grid-template-columns: 44px 1fr auto auto;
}
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: #1a120c;
  border: 1px solid #5a3810;
  border-radius: 10px;
}
.lb-row:nth-child(1) { border-color: #ffb800; box-shadow: 0 0 15px rgba(255,180,40,0.4); }
.lb-row:nth-child(2) { border-color: #c8c8d0; }
.lb-row:nth-child(3) { border-color: #b87333; }
.lb-row.lb-me {
  background: linear-gradient(90deg, rgba(255,140,0,0.15), rgba(140,40,220,0.1));
  border-color: #ffb800;
}
.lb-rank { color: #ffb800; font-weight: 900; font-size: 0.9rem; }
.lb-name { color: #ffe8b8; font-weight: 700; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { color: #ffd97a; font-weight: 800; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.lb-empty { color: #806050; text-align: center; padding: 1rem; font-style: italic; }

/* Модалка ника */
.nick-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.nick-modal.show { display: flex; }
.nick-panel {
  width: min(420px, 94vw);
  background: linear-gradient(180deg, #1e1610, #0e0a0c);
  border: 2px solid #ffb800;
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 0 40px rgba(255,160,40,0.6), inset 0 0 30px rgba(140,40,220,0.15);
}
.nick-title {
  color: #ffd97a;
  font-weight: 900;
  text-align: center;
  font-size: 1rem;
  margin-bottom: 1rem;
  text-shadow: 0 0 12px rgba(255,160,40,0.9);
}
.nick-input {
  width: 100%;
  padding: 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  background: #0a0608;
  border: 1px solid #5a3810;
  border-radius: 8px;
  color: #fff8d0;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 0.7rem;
}
.nick-input:focus {
  border-color: #ffb800;
  box-shadow: 0 0 12px rgba(255,160,40,0.5);
}
.nick-actions {
  display: grid;
  grid-template-columns: 40px 1fr auto auto;
  gap: 0.4rem;
}
.nick-actions button {
  padding: 0.7rem;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  border-radius: 10px;
  font-size: 0.9rem;
}
#nickSaveBtn {
  background: linear-gradient(135deg, #8a1fff, #ff6a00, #ffb800);
  border: none;
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
  box-shadow: 0 0 15px rgba(255,140,0,0.7);
}
#nickCancelBtn {
  background: #2a1a1a;
  border: 1px solid #7a5010;
  color: #ffd97a;
}
/* Показатель престижей в рейтинге */
.lb-prestige {
  color: #c88eff;
  font-weight: 800;
  font-size: 0.82rem;
  text-shadow: 0 0 8px rgba(180, 80, 255, 0.7);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 42px;
}