/* Keep the selected site wallpaper as the single background across routes. */
@layer skin-site-background {
  html[data-skin] {
    min-height:100%;
    isolation:isolate;
    background-color:#fcf7ee !important;
    background-image:none !important;
  }
  html[data-skin]::before {
    position:fixed;
    z-index:-1;
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:100vh;
    height:100lvh;
    content:"";
    pointer-events:none;
    background-color:#fcf7ee;
    background-image:var(--skin-background-mobile, url("https://img.allforjunming.com/img/dream-background.webp"));
    background-position:center top;
    background-size:cover;
    background-repeat:no-repeat;
  }
  html[data-skin] body {
    background:transparent !important;
  }
  @media (min-width:768px) {
    html[data-skin] {
      background-image:none !important;
    }
    html[data-skin]::before {
      background-image:var(--skin-background-desktop, url("https://img.allforjunming.com/img/dream-background.webp"));
    }
  }
}

.skin-top-character { position:absolute; top:12px; right:max(70px,calc((100vw - 1160px)/2)); z-index:0; width:clamp(130px,13vw,185px); height:clamp(130px,13vw,185px); object-fit:contain; pointer-events:none; user-select:none; }
.skin-top-character[hidden] { display:none; }
html[data-skin]:not([data-skin="default"]) body { background-color:transparent; }
html[data-skin]:not([data-skin="default"]) .profile-identity-card { border-color:transparent; background-color:transparent; background-image:var(--skin-profile-background); background-position:center; background-size:auto 130%; background-repeat:no-repeat; box-shadow:none; }
html[data-skin="white-rabbit"] .profile-identity-card { background-size:auto 112%; }
html[data-skin]:not([data-skin="default"]) .profile-page .profile-stat { background:transparent; }
html[data-skin]:not([data-skin="default"]) .profile-identity-card::before,
html[data-skin]:not([data-skin="default"]) .profile-identity-card::after { opacity:0; }
html[data-skin]:not([data-skin="default"]) .profile-emblem-art { border:5px solid #fff; background:var(--skin-avatar-background); }
html[data-skin]:not([data-skin="default"]) [data-profile-skin-avatar] { width:100%; height:100%; margin:0; border:0; border-radius:inherit; object-fit:cover; background:transparent; }
.skin-option[data-skin-key="white-rabbit"] img { clip-path:inset(20% 0 round 11px); }
html[data-skin="white-rabbit"] .profile-skin-feature img { clip-path:inset(20% 0 round 9px); }
@media (max-width:767px) { .skin-top-character { top:6px; right:50px; width:110px; height:110px; opacity:.9; } }
@media (min-width:768px) {
  html[data-skin]:not([data-skin="default"]) .profile-identity-card { background-size:130% auto; }
  html[data-skin="white-rabbit"] .profile-identity-card { background-size:112% auto; }
}