/* Shared by every page tree that shows pixel art or the Visual Style switch (main page, wiki and
   press kit). */

/* Pixel art: hard edges only where the device scale is a whole number. Fixed-size pixel images are
   served as native x k files through srcset, so at DPR 1, 2 and 3 every art pixel is a whole number
   of device pixels. At a fractional devicePixelRatio the browser takes the next larger file and
   shrinks it smoothly: the web version of the game's sharp bilinear fallback. (Art that js/pixel.js
   sizes in device pixels is pixelated at every DPR, in styles.css.) No filter, opacity, blur,
   gradient, rotation or scale transform on .px elements. */
@media (resolution: 1dppx), (resolution: 2dppx), (resolution: 3dppx) {
  .px { image-rendering: pixelated; }
}

/* Per-style content: anything that differs between the looks carries one of these classes.
   <html data-style> is set before first paint, so the hidden style never flashes and lazy
   images of the hidden style are never fetched. */
[data-style="pixel"] .only-classic,
[data-style="classic"] .only-pixel {
  display: none !important;
}

/* Visual Style switch (js/style.js): Pixel | Classic, the game's own labels, Pixel first as in the
   Two Looks pictures */
.style-switch {
  display: inline-flex;
  border: 1px solid var(--border-subtle, rgba(77, 77, 128, 0.25));
  border-radius: var(--radius-sm, 3px);
  overflow: hidden;
  font-family: 'Oswald', sans-serif;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.style-switch__opt {
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted, #9A968E);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.style-switch__opt + .style-switch__opt {
  border-left: 1px solid var(--border-subtle, rgba(77, 77, 128, 0.25));
}

.style-switch__opt:hover {
  color: var(--text-primary, #D9D5CC);
}

.style-switch__opt[aria-pressed="true"] {
  background: var(--red-deep, #4D0A0A);
  color: var(--text-bright, #F0EDE6);
  cursor: default;
}

.style-switch__opt:focus-visible {
  outline: 2px solid var(--gold-muted, #C9A84C);
  outline-offset: -2px;
}