/* ==========================================================================
   PetSimulator – Shared Styles
   Pixel-art dark theme with neon rarity accents.
   ========================================================================== */

@font-face {
  font-family: 'Pixel';
  src: local('Press Start 2P');
}

:root {
  --bg-void:      #0c0e1a;
  --bg-panel:     #151827;
  --bg-panel-2:   #1d2138;
  --border-soft:  #2c3152;
  --text-main:    #eef0ff;
  --text-dim:     #8d92b8;
  --accent:       #6ee7ff;
  --accent-2:     #ff7ad1;
  --coin:         #ffd166;
  --success:      #5be37a;
  --danger:       #ff5c72;

  --r-common:     #9aa0c2;
  --r-uncommon:   #5be37a;
  --r-rare:       #6ee7ff;
  --r-epic:       #b76bff;
  --r-legendary:  #ffd166;

  --font-display: 'Segoe UI', 'Trebuchet MS', sans-serif;
  --font-pixel: 'Pixel', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: radial-gradient(ellipse at top, #171b30 0%, var(--bg-void) 65%);
  color: var(--text-main);
  font-family: var(--font-display);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.5) 0, transparent 60%),
    radial-gradient(1px 1px at 80% 10%, rgba(255,255,255,.35) 0, transparent 60%),
    radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1px 1px at 30% 85%, rgba(255,255,255,.3) 0, transparent 60%),
    radial-gradient(1px 1px at 90% 60%, rgba(255,255,255,.3) 0, transparent 60%);
  opacity: .6;
  z-index: 0;
}

button { font-family: inherit; }

a { color: var(--accent); }

.pixel-border {
  border: 3px solid var(--border-soft);
  box-shadow:
    0 0 0 3px var(--bg-void),
    0 0 0 6px var(--border-soft);
  image-rendering: pixelated;
}

.hidden { display: none !important; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-void); }
::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 6px; }

/* ---------- Rarity chips ---------- */
.rarity {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 20px;
  text-transform: uppercase;
  font-weight: 700;
}
.rarity.common     { color: var(--r-common);    background: rgba(154,160,194,.12); }
.rarity.uncommon   { color: var(--r-uncommon);  background: rgba(91,227,122,.12); }
.rarity.rare       { color: var(--r-rare);      background: rgba(110,231,255,.12); }
.rarity.epic       { color: var(--r-epic);      background: rgba(183,107,255,.12); }
.rarity.legendary  { color: var(--r-legendary); background: rgba(255,209,102,.15); }

/* ---------- Buttons ---------- */
.btn {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 12px 22px;
  font-weight: 700;
  font-size: 15px;
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  color: var(--bg-void);
  background: var(--accent);
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(0); filter: brightness(.95); }
.btn:disabled {
  cursor: not-allowed;
  filter: grayscale(1) brightness(.55);
  transform: none;
}
.btn.ghost {
  background: transparent;
  color: var(--text-main);
  border: 2px solid var(--border-soft);
}