/* The Pixel family only. The card, status line, level buttons and filter toggles this
   file used to own are shared with the other modes and now live in
   styles/board.css. */

#splashWrap {
  position: relative;
  display: block;
  max-width: 1215px;
  margin: 0 auto;
  /* Every champion splash Data Dragon serves is 1215x717, so the frame can hold
     its own height before the picture exists. Without this the box was its 1px
     border and nothing else until the image landed, and the page then jumped
     ~717px — the worst layout shift on the site, and on a slow connection it
     happened under a player already reaching for the guess box.

     Overridden to a square by the icon and item modes below, which is a more
     specific selector and so wins. */
  aspect-ratio: 1215 / 717;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-strong);
}

/* Deliberately untransitioned. filter here is driven by the blur slider, and a
   transition on it makes the image trail the thumb by the length of the
   transition — every input event restarts a 200ms interpolation, so the picture
   is always showing a blur the slider has already moved past. A control the
   player drags has to track 1:1 to feel connected to what it's changing; the
   grayscale checkbox switching instantly is the honest cost of that. */
#splashImg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* Paired with the frame's aspect-ratio above: an image even a pixel taller
     than the box it is now given would spill out of it rather than resize. */
  max-height: 100%;
}

/* ── Square-art modes ───────────────────────────────────────────────────
   The icon and item modes are drawn from square source art rather than a
   1215x717 splash, so the wide frame above would letterbox them into a strip
   of background. A fixed square instead, sized so the PICTURE is 128 — the
   champion icon's own native resolution, shown at 1:1.

   130, not 128, and not a typo. #splashWrap carries a 1px border and base.css
   sets `* { box-sizing: border-box }`, so the border eats into the declared
   width: 128 here would leave a 126px picture. That one pixel each side is
   worth chasing because 768 / 128 is exactly 6, which puts four of the five
   levels' blocks on whole CSS pixels, where 768 / 126 = 6.095 puts none of them
   there and brings back the block-width wobble this file spent two rounds
   removing. (Normal, at 24 blocks, is off either way — 24 does not divide 128 —
   which is the documented cost of not jumping the ladder 16 -> 32.)

   No max-width: a 130px box has nothing left to shrink for. */
body[data-mode="pixelicon"] #splashWrap,
body[data-mode="pixelitem"] #splashWrap {
  width: 130px;
  aspect-ratio: 1;
  margin-inline: auto;
}

/* width AND height, not the max-width the base rule above sets. max-width caps
   but never ENLARGES, so the untouched 64px item icon rendered at 64px in the
   corner of the frame and object-fit had no size to work against — the solved
   view was a postage stamp in an empty box.

   image-rendering on every level here, including the full image: both square
   sources are tiny and are always shown enlarged, so nearest is right for all
   of them. */
body[data-mode="pixelicon"] #splashImg,
body[data-mode="pixelitem"] #splashImg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

/* The splash modes keep their frame and their block sizes, but not the smooth
   downscale: fitting a 1215px image into a narrower card with the browser's
   default filtering softens the very block edges the mode is about. */
body[data-mode="pixelsplash"] #splashImg,
body[data-mode="pixeldefault"] #splashImg {
  image-rendering: pixelated;
}

/* ...except on the solved image, which HERE is the real photographic splash
   rather than an enlarged sprite, and nearest-downscaling a photo aliases it.
   The one place that wants the browser's normal filtering.

   The square modes deliberately do not opt out — their "full" is a 64 or 128px
   icon shown at 2-4x, where nearest is still the better answer. This class is
   an opt-OUT, which is the reverse of what it meant when it was introduced. */
body[data-mode="pixelsplash"] #splashImg.full-art,
body[data-mode="pixeldefault"] #splashImg.full-art {
  image-rendering: auto;
}