* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    font-family: "Inter", serif;
    background-color: #f2d3e4;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* player styles (existing) */
#miniplay {
    width: 19em;
    height: 9em;
    font-family: "Inter", serif;
    background: #f5f5f5;
    border: 1px solid #d6d6d6;
    border-radius: 0.625rem;
    box-shadow: inset 10px 0px 6px -10px #ccc, inset -10px 0px 6px -10px #ccc,
        inset 0px 10px 6px -10px #fff, inset 0px -10px 6px -10px #ccc;
    padding: 12px;
    cursor: move;
}

.stats { display:flex; align-items:center; }
.track-art { width:3.5em; height:3.5em; object-fit:cover; border-radius:4px; background-size:cover; background-position:center; -webkit-filter:drop-shadow(0px 0px 1px #aaa); }
.slider_container { display:flex; justify-content:center; align-items:center; margin-top:12px; }
.current-time, .total-duration { color:#666; font-family:"Inter", serif; font-size:12px; padding:4px; }

.seek_slider, .volume_slider { width:100%; height:3px; background:#bbb; -webkit-appearance:none; appearance:none; }
.seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb { cursor:pointer; }
.seek_slider::-webkit-slider-thumb { -webkit-appearance:none; width:6px; height:16px; background:#666; border:2px solid #f5f5f5; border-radius:10px; }

.now-playing, .track-name, .track-artist { color:#555; font-size:13px; font-weight:500; line-height:1.3; }
.now-playing { display:none; }

.bttn { display:flex; gap:14px; align-items:center; justify-content:center; }
.playpause-track, .prev-track, .next-track { opacity:0.5; color:#000; transition:opacity .2s; }
.playpause-track:hover, .prev-track:hover, .next-track:hover { opacity:0.8; }
i.fa-play, i.fa-pause, .prev-track, .next-track { cursor:pointer; }

/* moved page/background & content styles */
html, body { height: 100%; margin: 0; }
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: transparent;
}

/* full-viewport background layer (update path if needed) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('images/background.jpeg');
}

/* ensure page content sits above the background */
.content {
  position: relative;
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

/* default fallback height for the top GIF (will be overwritten by JS) */
:root { --about-height: 140px; }

/* keep the about GIF pinned to the very top, centered horizontally */
.content.top-fixed {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  margin: 0;
  width: 100%;
  pointer-events: none; /* let clicks through to content if desired; remove if not wanted */
}

/* ensure the actual image can receive pointer events while container doesn't block layout */
.content.top-fixed img {
  pointer-events: auto;
  display: block;
  height: auto;
  max-width: 100%;
}

/* make the main stack aware of the fixed gif: push it down by the gif height */
.windows-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  width: 100%;
  box-sizing: border-box;

  /* space to sit below the fixed gif; JS sets --about-height to the real image height */
  margin-top: calc(var(--about-height) + 1rem);
}

/* button styles moved from inline */
.btn:hover {
  background-image: linear-gradient(to bottom, #dce0df, #87b096);
}
.btn {
  background-color: #c687df;
  color: #000;
  background-image: linear-gradient(180deg,#ffffff 0%, rgba(238,238,238,0.008) 100%);
  display: inline-block;
  text-decoration: none;
  padding: 5px;
  line-height: 1;
  border: 1px solid #878787;
  border-radius: .5em;
  box-shadow: inset 0 0 6px -10px rgba(66,66,66,.56),
              inset -13px 0 6px -10px rgba(66,66,66,.56),
              inset 0 13px 6px -10px #fff,
              inset 0 -13px 6px -10px rgba(66,66,66,.38);
}

/* tabs: grid layout (first two top, next two bottom) */
.tabs > menu[role="tablist"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  justify-items: center;
  align-items: center;
  width: 100%;
  max-width: 720px;
  margin: .5rem auto;
  padding: 0;
  list-style: none;
}
.tabs > menu[role="tablist"] > button {
  width: 100%;
  box-sizing: border-box;
  padding: .5rem .75rem;
}

/* minimal window/background helpers (keeps windows above background) */
.background { position:relative; z-index:1001; margin: .75rem; }
.window { max-width: 100%; }

/* make webring widgets smaller and lay them out inline */
.webrings-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap; /* allow wrapping on narrow screens */
  width: 100%;
  max-width: 980px;
  margin: 0.4rem auto;
  box-sizing: border-box;
}

/* each widget keeps its scale but becomes a flex item */
#dsring,
#cdr,
#the-last-cult {
  transform: scale(0.72);
  transform-origin: top center;
  width: 320px;
  max-width: 33%;
  margin: 0;
  display: block;
  flex: 0 0 auto;
  font-size: 0.9rem;
  line-height: 1;
  box-sizing: border-box;
  pointer-events: auto;
}

/* ensure internal content fits the reduced width */
#dsring iframe,
#cdr iframe,
#the-last-cult iframe,
#dsring > * ,
#cdr > * ,
#the-last-cult > * {
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box;
}

/* responsive: stack two per row on small screens, single column on very small */
@media (max-width: 820px) {
  #dsring,
  #cdr,
  #the-last-cult {
    max-width: 45%;
  }
  #dsring, #cdr, #the-last-cult { transform: scale(0.68); }
}

@media (max-width: 520px) {
  .webrings-row { gap: 0.4rem; }
  #dsring,
  #cdr,
  #the-last-cult {
    max-width: 100%;
    transform: scale(0.9);
  }
}