/* ─── Global ──────────────────────────────── */
* { box-sizing: border-box; }

body {
  background-image:
    linear-gradient(rgba(0,0,0,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.08) 1px, transparent 1px),
    url('../bg.png?v=7');
  background-size: 6px 6px, 6px 6px, cover;
  background-position: 0 0, 0 0, center;
  background-attachment: scroll, scroll, scroll;
  background-repeat: repeat, repeat, no-repeat;
}

/* ─── Content above pixel grid ──────────── */
nav, section, footer { position: relative; z-index: 1; }

/* ─── Pixel Art Display ──────────────────── */
.pixel-art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ─── Style Buttons ──────────────────────── */
.char-style-btn,
.pet-style-btn,
.rpg-style-btn {
  cursor: pointer;
  user-select: none;
}
.char-style-btn.active {
  border-color: rgb(244 114 182 / 0.6);
  background: rgb(244 114 182 / 0.15);
  box-shadow: 0 0 20px rgb(244 114 182 / 0.15);
}
.char-style-btn:not(.active),
.pet-style-btn:not(.active),
.rpg-style-btn:not(.active) {
  border-color: rgb(255 255 255 / 0.1);
}
.char-style-btn:not(.active):hover,
.pet-style-btn:not(.active):hover,
.rpg-style-btn:not(.active):hover {
  border-color: rgb(255 255 255 / 0.25);
}
.pet-style-btn.active {
  border-color: rgb(251 191 36 / 0.6);
  background: rgb(251 191 36 / 0.15);
  box-shadow: 0 0 20px rgb(251 191 36 / 0.15);
}
.rpg-style-btn.active {
  border-color: rgb(34 211 238 / 0.6);
  background: rgb(34 211 238 / 0.15);
  box-shadow: 0 0 20px rgb(34 211 238 / 0.15);
}

/* ─── Loading Animation ──────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* ─── Range Input ────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgb(255 255 255 / 0.1);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgb(192 132 252);
  cursor: pointer;
  border: 2px solid white;
}