/* Leviathan — Minecraft texture faces.
 *
 * Crops a region out of a skin or cape sheet using RATIOS rather than pixels,
 * so the same rule is correct for a 64x32 cape, a 512x256 one, or anything else
 * with that aspect. The previous approach hardcoded `width:512px; left:-8px`,
 * which silently produced a flat block of colour the moment a texture arrived
 * at a different resolution — and would break again on OptiFine capes (46x22).
 *
 * How the numbers are derived, for a WxH region at (x,y) in a sheet of SWxSH:
 *   background-size:      SW/W * 100%   by   SH/H * 100%
 *   background-position:  x/(SW-W) * 100%   by   y/(SH-H) * 100%
 *
 * Percentage background-position aligns that fraction of the IMAGE with the
 * same fraction of the BOX, which is why the divisor is (sheet - region).
 */

.mc-face {
  position: relative;
  overflow: hidden;
  background-image: var(--tex);
  background-repeat: no-repeat;
  image-rendering: pixelated;
  /* Chrome/Safari still want the vendor spelling for nearest-neighbour. */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* ---- skin head: 8x8 at (8,8) of a 64x64 sheet ------------------------- */
/*   size 64/8 = 800%        position 8/(64-8) = 14.2857%                  */
.mc-face--skin {
  aspect-ratio: 1;
  background-size: 800% 800%;
  background-position: 14.2857% 14.2857%;
}

/* The hat/overlay layer at (40,8). Minecraft composites this over the head,
 * and NameMC shows it — without it, skins whose face lives entirely in the
 * overlay render blank. */
.mc-face--skin::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-repeat: no-repeat;
  background-size: 800% 800%;
  background-position: 71.4286% 14.2857%;   /* 40/(64-8) */
  image-rendering: pixelated;
}

/* Legacy 64x32 skins: head is at the same (8,8) but the sheet is half as tall.
 * Applied by mc-texture.js after measuring the image. */
.mc-face--legacy { background-size: 800% 400%; background-position: 14.2857% 33.3333%; }
.mc-face--legacy::after { background-size: 800% 400%; background-position: 71.4286% 33.3333%; }

/* ---- cape front face: 10x16 at (1,1) of a 64x32 sheet ------------------ */
/*   size 64/10 = 640% by 32/16 = 200%                                      */
/*   position 1/(64-10) = 1.8519%  by  1/(32-16) = 6.25%                    */
.mc-face--cape {
  aspect-ratio: 10 / 16;
  background-size: 640% 200%;
  background-position: 1.8519% 6.25%;
}

/* ---- placement --------------------------------------------------------- */

/* Profile skin grid. Sized by the column rather than a fixed px width, so a
 * narrow sidebar shrinks the thumbnails instead of overflowing them. */
.pc-texture > .mc-face--skin {
  width: 100%;
  max-width: 88px;
  margin: 0 auto;
  border-radius: 6px;
  background-color: #02090e;
}

/* Profile cape grid. The old rule pinned 80x128 with !important, which made two
 * capes collide in the narrow profile column. */
.pc-cape-face,
.pc-current-cape-face {
  width: 100% !important;
  max-width: 80px !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 10 / 16;
  margin: 0 auto;
  background-size: 640% 200% !important;
  background-position: 1.8519% 6.25% !important;
  background-repeat: no-repeat;
  background-color: #02070b !important;
}
.pc-current-cape-face { max-width: 100px !important; }

/* The old markup nested an <img> inside the face and positioned it by hand.
 * The face is now the image, so any leftover child must not paint over it. */
.pc-cape-face > img,
.pc-current-cape-face > img { display: none !important; }

/* Directory grids (/skins/, /capes/). */
.texture-art > .mc-face {
  width: auto;
  height: 100%;
  max-height: 165px;
  border-radius: 8px;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .48));
}
.texture-art > .mc-face--skin { aspect-ratio: 1; }

@media (max-width: 760px) {
  .pc-texture > .mc-face--skin { max-width: 72px; }
  .pc-cape-face { max-width: 68px !important; }
}