@import url('./tokens/colors.css');
@import url('./tokens/effects.css');
@import url('./tokens/spacing.css');
@import url('./tokens/typography.css');

html { background: var(--bg-page); }
body { min-width: 320px; }
img { image-rendering: pixelated; }

.brand-logo {
  display: block;
  width: auto;
  height: 56px;
  padding: 6px 0;
  object-fit: contain;
  image-rendering: auto;
}

img[src*="/Graphics/Items/"] {
  display: block;
  width: auto;
  height: auto;
  max-width: none;
  padding: 0;
  object-fit: none;
}

.item-sprite-circle {
  display: inline-grid;
  flex: 0 0 auto;
  padding: 8px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.game-type {
  display: inline-block;
  flex: 0 0 auto;
  width: 64px;
  height: 20px;
  overflow: hidden;
  background-image: url("/wiki/game/Graphics/UI/types.png");
  background-position: 0 var(--type-y);
  background-repeat: no-repeat;
  background-size: 64px 380px;
  image-rendering: pixelated;
}

.game-type.normal   { --type-y: 0; }
.game-type.fighting { --type-y: -20px; }
.game-type.flying   { --type-y: -40px; }
.game-type.poison   { --type-y: -60px; }
.game-type.ground   { --type-y: -80px; }
.game-type.rock     { --type-y: -100px; }
.game-type.bug      { --type-y: -120px; }
.game-type.ghost    { --type-y: -140px; }
.game-type.steel    { --type-y: -160px; }
.game-type.unknown  { --type-y: -180px; }
.game-type.fire     { --type-y: -200px; }
.game-type.water    { --type-y: -220px; }
.game-type.grass    { --type-y: -240px; }
.game-type.electric { --type-y: -260px; }
.game-type.psychic  { --type-y: -280px; }
.game-type.ice      { --type-y: -300px; }
.game-type.dragon   { --type-y: -320px; }
.game-type.dark     { --type-y: -340px; }
.game-type.fairy    { --type-y: -360px; }

.area-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid var(--area-pill-border);
  border-radius: var(--radius-pill);
  color: var(--area-pill-text);
  background: var(--area-pill-bg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.area-archipelago {
  --area-pill-border: #3f8079;
  --area-pill-text: #83d6cd;
  --area-pill-bg: rgba(63, 128, 121, .2);
}

.area-coastlands {
  --area-pill-border: #b58b42;
  --area-pill-text: #e8c979;
  --area-pill-bg: rgba(181, 139, 66, .2);
}

.area-wetlands {
  --area-pill-border: #6b8f57;
  --area-pill-text: #a9d18f;
  --area-pill-bg: rgba(107, 143, 87, .2);
}

.area-bayou {
  --area-pill-border: #8864a3;
  --area-pill-text: #c9a7e4;
  --area-pill-bg: rgba(136, 100, 163, .2);
}

.area-sky {
  --area-pill-border: #5785ad;
  --area-pill-text: #9cc8eb;
  --area-pill-bg: rgba(87, 133, 173, .2);
}

.spoiler-protected {
  filter: blur(10px);
  cursor: pointer;
  user-select: none;
  transition: filter var(--duration-fast) var(--ease-standard);
}

.spoiler-protected.spoiler-revealed {
  filter: none;
  cursor: inherit;
  user-select: auto;
}

@media (prefers-reduced-motion: reduce) {
  .spoiler-protected { transition: none; }
}