/* links.ripperwing.com — LEVELS skin (2026-10-22), loaded only on /levels (games[i].skin = "levels").
   Images: LEVELS web UI kit v2 (img/levels-ui/), all @2x: 9-slice border 32 image px = 16 CSS px, centre repeats
   ("round") so the pixel noise keeps its size. Reference CSS from the kit: design/levels-web-ui-kit-v3.css (v2 kept for history). */

html {
  background: #a09a5e url("/img/levels-ui/bg-wallpaper-tile-1024.webp") 0 0 / 512px 512px repeat;
}

body.skin-levels {
  background: transparent;
}

/* Text on the light wallpaper: in-game label colour + shadow (+1,+1 GUI px) */
.skin-levels .title,
.skin-levels .hook,
.skin-levels .note,
.skin-levels .back,
.skin-levels .foot,
.skin-levels .foot__link {
  color: #fffff2;
  text-shadow: 2px 2px 0 #383838;
}

/* Legal name in the footer: quieter than the rest */
.skin-levels .foot {
  opacity: 0.55;
}

/* Screenshots: in-game frame drawn over the edges */
.skin-levels .shots {
  position: relative;
  isolation: isolate;
  border-radius: 0;
  box-shadow: none;
}

/* The sliding track is promoted to its own layer while it moves (transform); without an explicit order the browser
   can paint it over the frame mid-slide. Track at 0, frame at 1. */
.skin-levels .shots__track {
  position: relative;
  z-index: 0;
}

.skin-levels .shots::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 0 solid transparent;
  border-image: url("/img/levels-ui/frame-16x9.png") 32 / 16px round;
  pointer-events: none;
}

/* Stone buttons */
.skin-levels .link,
.skin-levels .link--plain {
  height: 56px;
  min-height: 56px;
  padding: 0 56px;
  border: 0 solid transparent;
  border-radius: 0;
  border-image: url("/img/levels-ui/button.png") 32 fill / 16px round;
  background: none;
  box-shadow: none;
  color: #fff;
  font-weight: 400;
}

.skin-levels .link:hover,
.skin-levels .link:focus-visible {
  border-image-source: url("/img/levels-ui/button-hover.png");
  background: none;
  box-shadow: none;
  outline: none;
}

.skin-levels .link--primary {
  border-image-source: url("/img/levels-ui/button-wishlist.png");
  opacity: 1;
}

.skin-levels .link--primary:hover,
.skin-levels .link--primary:focus-visible {
  border-image-source: url("/img/levels-ui/button-wishlist-hover.png");
  opacity: 1;
}

/* Pixel icons from the kit instead of the vector ones. top: 16px keeps the icon's scanlines on the button's. */
.skin-levels .link .icon {
  display: none;
}

.skin-levels .link[data-link]::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 16px;
  width: 22px;
  height: 22px;
  background: 0 0 / 22px 22px no-repeat;
}

.skin-levels .link[data-link="steam"]::before { background-image: url("/img/levels-ui/btn-icon-steam.png"); }
.skin-levels .link[data-link="discord"]::before { background-image: url("/img/levels-ui/btn-icon-discord.png"); }
.skin-levels .link[data-link="creators"]::before { background-image: url("/img/levels-ui/btn-icon-creator.png"); }

/* Label with the kit's CRT scanlines (1 px bright, 1 px dark from the button top); plain white where unsupported */
.skin-levels .link__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 44px;              /* icon ends at 40 px; Minecraftia is wide, so less side space than the kit's 56 px */
  font-size: 16px;              /* Minecraftia is an 8 px grid: 16 px = 1 font pixel per 2 CSS px, like the kit (15 px blurs) */
  white-space: nowrap;
  text-shadow: 2px 2px 0 #383838;
}

/* "Get Content Creator Access" is the longest label: on a phone the icon stays and the letter gaps go from 2 to 1 CSS px
   (still whole pixels, so crisp), which fits the label between the 44 px sides, centred. */
@media (max-width: 479px) {
  .skin-levels .link[data-link="creators"] .link__label {
    letter-spacing: -1px;
  }
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .skin-levels .link__label {
    color: transparent;
    background: repeating-linear-gradient(to bottom, #fffff2 0 1px, #a19e95 1px 2px);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(2px 2px 0 #383838);
  }
}

/* Social boxes: icon baked in (kit v3 adds TikTok), hover = white outline. Empty box + vector icon only as a fallback. */
.skin-levels .social {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: 0 0 / 44px 44px no-repeat url("/img/levels-ui/social-box.png");
  color: #e9e7dd;
}

.skin-levels .social:hover {
  background-color: transparent;
  background-image: url("/img/levels-ui/social-box-hover.png");
  color: #fff;
}

.skin-levels .social .icon {
  width: 20px;
  height: 20px;
  filter: drop-shadow(2px 2px 0 #383838);
}

.skin-levels .social[data-social="instagram"] { background-image: url("/img/levels-ui/social-instagram.png"); }
.skin-levels .social[data-social="youtube"] { background-image: url("/img/levels-ui/social-youtube.png"); }
.skin-levels .social[data-social="x"] { background-image: url("/img/levels-ui/social-x.png"); }
.skin-levels .social[data-social="tiktok"] { background-image: url("/img/levels-ui/social-tiktok.png"); }
.skin-levels .social[data-social="instagram"]:hover { background-image: url("/img/levels-ui/social-instagram-hover.png"); }
.skin-levels .social[data-social="youtube"]:hover { background-image: url("/img/levels-ui/social-youtube-hover.png"); }
.skin-levels .social[data-social="x"]:hover { background-image: url("/img/levels-ui/social-x-hover.png"); }
.skin-levels .social[data-social="tiktok"]:hover { background-image: url("/img/levels-ui/social-tiktok-hover.png"); }

.skin-levels .social[data-social="instagram"] .icon,
.skin-levels .social[data-social="youtube"] .icon,
.skin-levels .social[data-social="x"] .icon,
.skin-levels .social[data-social="tiktok"] .icon {
  display: none;
}