:root {
  --primary: #1363C6;
  --secondary: #15ACE1;
  --bg-light: #F4F7FE;
  --text-dark: #14183E;
  --card-bg: rgb(255 255 255 / 85%);
}

* {
  box-sizing: border-box;
}

html,
body {
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Open Sans", sans-serif;
  color: var(--text-dark);
  background:
    radial-gradient(circle at 20% 20%, rgb(21 172 225 / 22%) 0 30%, transparent 45%),
    radial-gradient(circle at 80% 80%, rgb(19 99 198 / 25%) 0 35%, transparent 50%),
    linear-gradient(145deg, #f8fbff 0%, var(--bg-light) 50%, #e9f1ff 100%);
  transition: filter 220ms ease;
}

button,
a,
input[type="range"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-layout {
  width: min(1180px, 96vw);
  display: grid;
  grid-template-columns: minmax(170px, 220px) minmax(320px, 620px) minmax(220px, 280px);
  align-items: stretch;
  gap: 1rem;
}

.filters-panel,
.store-panel {
  border-radius: 24px;
  padding: 1rem;
  background: var(--card-bg);
  box-shadow: 0 14px 35px rgb(20 24 62 / 13%);
  border: 1px solid rgb(19 99 198 / 11%);
}

.filters-panel h2,
.store-panel h2 {
  margin: 0 0 0.2rem;
  font-family: "Ubuntu", sans-serif;
  text-transform: lowercase;
  color: var(--primary);
}

.panel-copy {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #47648d;
}

.filters-panel.is-locked .filter-controls {
  display: none;
}

.filters-panel.is-locked h2,
.filters-panel.is-locked .panel-copy {
  visibility: hidden;
}

.filter-controls {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.toggle-panel {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.toggle-row {
  display: flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.82rem;
  color: #35507f;
  text-transform: lowercase;
}

.toggle-row input {
  accent-color: var(--primary);
}

.toggle-row.is-hidden {
  display: none;
}

.filter-name {
  margin: 0;
  text-transform: lowercase;
  font-family: "Ubuntu", sans-serif;
  font-size: 1.1rem;
  color: var(--text-dark);
}

#filterSlider {
  width: 100%;
  accent-color: var(--primary);
}

.game-shell {
  position: relative;
  text-align: center;
  border-radius: 28px;
  padding: 1.8rem 1.5rem 2rem;
  background: var(--card-bg);
  box-shadow: 0 18px 45px rgb(20 24 62 / 18%);
  border: 1px solid transparent;
}

.game-shell.has-decor-border {
  border: 2px solid rgb(19 99 198 / 45%);
  box-shadow:
    0 18px 45px rgb(20 24 62 / 20%),
    inset 0 0 0 1px rgb(255 255 255 / 78%),
    0 0 0 3px rgb(21 172 225 / 16%);
}

.game-shell.has-decor-border::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 30px;
  background: conic-gradient(
    from 0deg,
    rgb(19 99 198 / 42%),
    rgb(21 172 225 / 26%),
    rgb(53 93 153 / 32%),
    rgb(19 99 198 / 42%)
  );
  z-index: -1;
  filter: blur(2px);
  opacity: 0.8;
  animation: border-glow 8s linear infinite;
}

.game-shell.border-spin-paused::before {
  animation-play-state: paused;
}

.reset-button {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
  border: 1px solid rgb(170 41 41 / 16%);
  background: rgb(255 237 237 / 68%);
  color: #8f3a3a;
  border-radius: 999px;
  padding: 0.18rem 0.5rem;
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: lowercase;
  cursor: pointer;
  opacity: 0.64;
  transition: opacity 140ms ease, transform 120ms ease, background-color 140ms ease;
}

.reset-button:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  background: rgb(255 228 228 / 90%);
}

h1 {
  margin: 0 0 0.75rem;
  text-transform: lowercase;
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
  font-weight: 700;
  color: var(--primary);
}

.meta-stats {
  margin: 1.45rem 0 0.3rem;
  display: flex;
  justify-content: center;
  gap: 0.78rem;
  font-family: "Ubuntu", sans-serif;
  font-size: 0.74rem;
  color: #456492;
  text-transform: lowercase;
}

.counter-label {
  margin: 0;
  font-family: "Ubuntu", sans-serif;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: #355d99;
}

.counter {
  margin: 0.3rem 0 1.2rem;
  font-family: "Ubuntu", sans-serif;
  font-size: clamp(3.2rem, 8vw, 5.6rem);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
  text-shadow: 0 8px 22px rgb(19 99 198 / 25%);
}

.counter.pop {
  animation: counter-pop 220ms ease-out;
}

.auto-meter {
  --auto-progress: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem 0 0.8rem;
}

.auto-meter.is-hidden {
  display: none;
}

.auto-wheels {
  display: flex;
  align-items: center;
  gap: 0.36rem;
}

.auto-wheel {
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: conic-gradient(
    rgb(21 172 225 / 100%) var(--auto-progress),
    rgb(19 99 198 / 28%) var(--auto-progress) 100%
  );
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 95%), 0 0 0 1px rgb(19 99 198 / 26%);
  opacity: 0.95;
}

.fox-button {
  --fox-size: min(70vw, 300px);
  --aura-intensity: 0;
  --aura-rgb: 255 203 74;
  --sunburst-duration: 3000ms;
  --spark-opacity: 0.12;
  position: relative;
  isolation: isolate;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  border-radius: 24px;
  transition: transform 120ms ease-out, filter 160ms ease, box-shadow 280ms ease;
  box-shadow:
    0 0 0 rgb(255 194 42 / 0%),
    0 0 0 rgb(255 225 125 / 0%);
}

.fox-button::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--fox-size) + 86px);
  height: calc(var(--fox-size) + 86px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgb(var(--aura-rgb) / calc(var(--aura-intensity) * 0.36)) 0%,
    rgb(var(--aura-rgb) / calc(var(--aura-intensity) * 0.24)) 48%,
    rgb(var(--aura-rgb) / 0%) 72%
  );
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity 260ms ease;
}

.fox-button.has-aura {
  box-shadow:
    0 0 0 rgb(255 194 42 / 0%),
    0 0 0 rgb(255 225 125 / 0%);
}

.fox-button.has-aura::before {
  opacity: 1;
}

.fox-button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--fox-size) + 112px);
  height: calc(var(--fox-size) + 112px);
  transform: translate(-50%, -50%) rotate(0deg);
  border-radius: 999px;
  background: repeating-conic-gradient(
    from 0deg,
    rgb(var(--aura-rgb) / 0.28) 0deg 8deg,
    rgb(var(--aura-rgb) / 0) 8deg 22deg
  );
  opacity: 0;
  pointer-events: none;
  z-index: -2;
}

.fox-button.has-sunburst::after {
  animation: aura-sunburst var(--sunburst-duration) ease-in-out infinite;
}

.fox-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aura-spark-layer {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.aura-spark {
  --dx: 10px;
  --dy: -30px;
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgb(var(--aura-rgb) / var(--spark-opacity));
  box-shadow: 0 0 10px rgb(var(--aura-rgb) / calc(var(--spark-opacity) * 0.8));
  transform: translate(-50%, -50%) scale(0.3);
  animation: aura-spark-fly 720ms ease-out forwards;
}

.burst-layer {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.burst-star {
  --dx: 0px;
  --dy: -40px;
  position: absolute;
  width: 18px;
  height: 18px;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  color: #f3b229;
  font-size: 20px;
  line-height: 1;
  animation: star-burst 2300ms cubic-bezier(0.14, 0.7, 0.21, 1) forwards;
  text-shadow: 0 0 18px rgb(255 212 88 / 72%);
}

.burst-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border: 2px solid rgb(255 226 127 / 70%);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.2);
  animation: burst-ring 2000ms ease-out forwards;
}

.fox-break {
  height: 0.42rem;
}

.fox-button img {
  display: block;
  width: var(--fox-size);
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  transform: rotate(var(--spin-deg, 0deg));
  transition: transform 130ms ease-out, filter 160ms ease;
  filter: drop-shadow(0 12px 16px rgb(20 24 62 / 24%));
}

.fox-button:hover {
  transform: translateY(-4px) scale(1.02);
}

.fox-button:active {
  transform: translateY(2px) scale(0.96);
}

.fox-button.clicked,
.store-item.clicked {
  animation: tap-pop 180ms ease-out;
}

@keyframes tap-pop {
  0% {
    transform: scale(1) translateY(0);
  }
  45% {
    transform: scale(0.93) translateY(1px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

@keyframes counter-pop {
  0% {
    transform: translateY(0) scale(1);
  }
  45% {
    transform: translateY(-4px) scale(1.16);
    color: var(--primary);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

.mute-toggle {
  display: block;
  margin-inline: auto;
  margin-top: 0.15rem;
  border: 0;
  border-radius: 999px;
  padding: 0.3rem 0.62rem;
  font-size: 0.68rem;
  text-transform: lowercase;
  background: #e2eeff;
  color: #2f5592;
  cursor: pointer;
}

.mute-toggle.is-hidden {
  display: none;
}

.store-panel {
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
}

.store-tabs {
  display: flex;
  gap: 0.45rem;
}

.store-tab {
  border: 1px solid rgb(19 99 198 / 18%);
  border-radius: 999px;
  padding: 0.28rem 0.74rem;
  font-size: 0.74rem;
  font-family: "Ubuntu", sans-serif;
  color: #295489;
  background: #e8f2ff;
  cursor: pointer;
}

.store-tab.is-active {
  background: #d2e9ff;
  color: #184276;
}

.store-tab.is-hidden,
.store-list.is-hidden {
  display: none;
}

.store-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.store-item {
  position: relative;
  border: 1px solid rgb(19 99 198 / 14%);
  text-align: left;
  border-radius: 18px;
  padding: 0.7rem 0.76rem;
  font-family: "Open Sans", sans-serif;
  font-size: 0.93rem;
  background: #e8f2ff;
  color: #17427d;
  cursor: pointer;
  transition: transform 120ms ease, background-color 140ms ease, opacity 140ms ease, filter 160ms ease;
}

.store-item:hover:enabled {
  transform: translateY(-1px);
  background: #d8ebff;
}

.store-item.insufficient {
  opacity: 0.56;
  cursor: not-allowed;
}

.store-item:disabled {
  opacity: 0.55;
  cursor: default;
}

.store-item.locked {
  opacity: 0.38;
  background: #edf2f9;
  cursor: not-allowed;
}

.store-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  width: min(250px, 78vw);
  border-radius: 10px;
  padding: 0.42rem 0.52rem;
  font-size: 0.73rem;
  line-height: 1.22;
  text-align: left;
  color: #f2f8ff;
  background: rgb(18 31 55 / 90%);
  box-shadow: 0 10px 22px rgb(20 24 62 / 22%);
  z-index: 12;
  pointer-events: none;
}

.store-item.owned {
  background: #c8f2e3;
  color: #1a6346;
}

.return-link {
  position: fixed;
  left: 50%;
  bottom: 0.8rem;
  transform: translateX(-50%);
  font-family: "Ubuntu", sans-serif;
  font-size: 0.9rem;
  color: #2a5f9f;
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 140ms ease, color 140ms ease;
}

.return-link:hover {
  opacity: 1;
  color: #1363c6;
}

.prestige-badge {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  margin: 0;
  padding: 0.55rem 1.32rem;
  border: 2px solid rgb(49 63 90 / 42%);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 94%), rgb(244 248 255 / 90%)),
    repeating-linear-gradient(
      90deg,
      rgb(57 78 116 / 5%) 0 7px,
      rgb(57 78 116 / 0%) 7px 14px
    );
  color: #2a354b;
  font-family: "Times New Roman", "Georgia", serif;
  font-size: 1.13rem;
  letter-spacing: 0.16em;
  box-shadow:
    inset 0 0 0 2px rgb(255 255 255 / 68%),
    inset 0 0 0 6px rgb(58 82 122 / 12%),
    0 10px 28px rgb(20 24 62 / 16%);
  text-transform: uppercase;
  z-index: 200;
}

.prestige-badge.is-hidden {
  display: none;
}

.rain-layer {
  position: fixed;
  inset: -14px 0 0 0;
  pointer-events: none;
  opacity: 0;
  background-image:
    repeating-linear-gradient(
      110deg,
      rgb(48 64 94 / 0%) 0 20px,
      rgb(48 64 94 / 20%) 20px 21px,
      rgb(48 64 94 / 0%) 21px 45px
    ),
    repeating-linear-gradient(
      110deg,
      rgb(30 42 68 / 0%) 0 28px,
      rgb(30 42 68 / 14%) 28px 29px,
      rgb(30 42 68 / 0%) 29px 56px
    );
  background-size: 260px 260px, 320px 320px;
  animation: rain-fall 10s linear infinite;
  transition: opacity 260ms ease;
  filter: blur(0.2px);
}

.rain-layer.is-active {
  opacity: 0.52;
}

.rain-layer.anim-paused {
  animation-play-state: paused;
}

.rain-layer.is-hidden {
  display: none;
}

@keyframes border-glow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes star-burst {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.25) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: translate(calc(-50% + (var(--dx) * 0.7)), calc(-50% + (var(--dy) * 0.7))) scale(1.2) rotate(130deg);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.7) rotate(240deg);
  }
}

@keyframes burst-ring {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(0.2);
  }
  70% {
    opacity: 0.75;
    transform: translate(-50%, -50%) scale(6.8);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(8.8);
  }
}

@keyframes rain-fall {
  from {
    background-position: 0 -280px, 0 -320px;
  }
  to {
    background-position: 0 360px, 0 420px;
  }
}

@keyframes aura-sunburst {
  0% {
    opacity: 0.06;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.92);
  }
  50% {
    opacity: 0.28;
    transform: translate(-50%, -50%) rotate(95deg) scale(1.04);
  }
  100% {
    opacity: 0.06;
    transform: translate(-50%, -50%) rotate(190deg) scale(0.92);
  }
}

@keyframes aura-spark-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.25);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.05);
  }
}


@media (max-width: 980px) {
  .app-layout {
    width: min(640px, 96vw);
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }

  .filters-panel {
    order: 3;
  }

  .store-panel {
    order: 2;
  }
}