:root{
  --iw-wallpaper-light: url('/assets/img/outside.png');
  --iw-wallpaper-dark:  url('/assets/img/underwater.png');
  --iw-wallpaper-size: cover;
}
body{
  background-image: var(--iw-wallpaper-light);
  background-size: var(--iw-wallpaper-size);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center top;
}
html[data-theme="dark"] body,
body[data-theme="dark"],
.theme-dark body{
  background-image: var(--iw-wallpaper-dark);
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) body{
    background-image: var(--iw-wallpaper-dark);
  }
}

/* bottom hero wrapper (cropped) */
.hero-wrap{ position:relative; height:180px; overflow:hidden; }
#hero-wubbzy{
  position:absolute;
  left:1rem;
  bottom:-14px;
  right:auto;
  width:min(28vw, 280px);
  pointer-events:none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
  z-index:2;
}
@media (max-width: 700px){
  .hero-wrap{ height:140px; }
  #hero-wubbzy{ width:min(50vw, 260px); left:.5rem; bottom:-10px; }
}

/* hide subtitle */
.header .brand .brand-title, .header .brand small { display:none !important; }

/* BRAND subtitle align */
.header .brand{display:flex;align-items:center;gap:.6rem}
.header .brand img, .header .brand a.logo img{display:block;height:44px}
.header .brand .brand-title{display:none !important}
.header .brand small, .header .brand .brand-subtitle{display:inline-block;line-height:1;margin:0;padding:0}

/* HERO position */
.hero-wrap{position:relative;height:160px;overflow:hidden}
#hero-wubbzy{position:absolute;left:1rem;bottom:-12px;width:min(24vw,240px);pointer-events:none;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));z-index:2}
@media (max-width:700px){.hero-wrap{height:130px}#hero-wubbzy{width:min(52vw,220px);left:.5rem;bottom:-10px}}

/* Fanart Spotlight size */
#fanart-spotlight img{width:clamp(220px,42vw,420px);height:auto;display:block;margin:0 auto;border-radius:10px}
#fanart-spotlight small{display:block;text-align:center;margin-top:.5rem}

/* Footer unify */
footer, .site-footer, footer .footer-inner, .site-footer .footer-inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
footer, .site-footer{color:#000 !important}
footer a, .site-footer a{color:#000 !important;text-decoration:underline}
footer .credits{margin:0}
@media (max-width:700px){footer, .site-footer, footer .footer-inner, .site-footer .footer-inner{justify-content:center;gap:.5rem}}