/* Dedicated music pages already provide their own full-size player. */
body:has(#anMusic-page) .global-music-player .aplayer,
body:has(.music-old-player) .global-music-player .aplayer {
  display: none;
}

/* Keep the global player compact; its lyrics otherwise cover page footers. */
.global-music-player .aplayer-lrc {
  display: none !important;
}

body:has(#anMusic-page) #oml2d-stage,
body:has(.music-old-player) #oml2d-stage,
body:has(#anMusic-page) #rightside {
  display: none !important;
}

/* Map the friend-circle theme tokens to Butterfly's active color scheme. */
.fcircle_page {
  --anzhiyu-background: var(--global-bg);
  --anzhiyu-card-bg: var(--card-bg);
  --anzhiyu-fontcolor: var(--font-color);
  --anzhiyu-hovertext: var(--default-bg-color);
  --anzhiyu-lighttext: var(--default-bg-color);
  --anzhiyu-main: var(--default-bg-color);
  --anzhiyu-none: transparent;
  --anzhiyu-secondtext: var(--card-meta);
  --anzhiyu-shadow-border: var(--card-box-shadow);
  --anzhiyu-shadow-main: 0 8px 24px rgba(73, 177, 245, 0.24);
  --anzhiyu-theme: var(--default-bg-color);
  --anzhiyu-white: #fff;
  --style-border: 1px solid rgba(127, 127, 127, 0.18);
  --style-border-always: 1px solid rgba(127, 127, 127, 0.18);
  --style-border-hover: 1px solid var(--default-bg-color);
}

.fcircle_page .author-content-item-tips,
.fcircle_page .author-content-item-title,
.fcircle_page .content-bottom {
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.68);
}

/* Let the site background show through cards without sacrificing readability. */
:root {
  --card-bg: rgba(255, 255, 255, 0.8);
  --footer-glass-bg: rgba(255, 255, 255, 0.72);
  --footer-glass-border: rgba(255, 255, 255, 0.42);
  --footer-glass-color: rgba(40, 48, 57, 0.82);
}

[data-theme='dark'] {
  --card-bg: rgba(18, 18, 18, 0.82);
  --footer-glass-bg: rgba(18, 18, 18, 0.76);
  --footer-glass-border: rgba(255, 255, 255, 0.12);
  --footer-glass-color: rgba(255, 255, 255, 0.78);
}

#recent-posts .recent-post-item,
#aside-content .card-widget,
.layout > div:first-child:not(#recent-posts):not(.nc) {
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
}

/* Fade the banner into the fixed site background instead of ending at a hard edge. */
#page-header.full_page {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 140px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 140px), transparent 100%);
}

/* Fade article covers too, while keeping their title and metadata above the fade. */
#page-header.post-bg {
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 72px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 72px), transparent 100%);
}

#page-header.post-bg #post-info {
  bottom: 76px;
}

/* Continue the glass surface through the footer in both color schemes. */
#footer {
  border-top: 1px solid var(--footer-glass-border);
  background: var(--footer-glass-bg);
  box-shadow: 0 -8px 24px rgba(7, 17, 27, 0.08);
  -webkit-backdrop-filter: blur(12px) saturate(125%);
  backdrop-filter: blur(12px) saturate(125%);
}

#footer > *,
#footer a {
  color: var(--footer-glass-color);
}

#footer a:hover {
  color: var(--btn-bg);
}

@media screen and (max-width: 768px) {
  :root {
    --card-bg: rgba(255, 255, 255, 0.86);
  }

  [data-theme='dark'] {
    --card-bg: rgba(18, 18, 18, 0.88);
  }

  #recent-posts .recent-post-item,
  #aside-content .card-widget,
  .layout > div:first-child:not(#recent-posts):not(.nc) {
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    backdrop-filter: blur(6px) saturate(115%);
  }

  #footer {
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
  }
}

/* Keep Butterfly's controls beside the Live2D stage instead of underneath it. */
@media screen and (min-width: 769px) {
  #rightside.rightside-show {
    transform: translate(-278px, 0);
  }
}

@media screen and (max-width: 768px) {
  #oml2d-stage {
    display: none !important;
  }

  #rightside.rightside-show {
    transform: translate(-58px, 0);
  }
}