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

/* Consolidated Page Styles */
html, body { 
  height: 100%; 
  margin: 0; 
  font-family: "Inter", sans-serif;
  background-color: #f2d3e4;
  overflow-x: hidden;
}

:root { --about-height: 140px; }

/* 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);
    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; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 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;
}

/* 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: row;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: stretch;
  justify-content: 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: folder-style layout */
.tabs {
  display: flex;
  flex-direction: column;
}
.tabs > menu[role="tablist"] {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin: 0 0 -1px 0;
  padding: 0 4px;
  border-bottom: 1px solid #888;
  width: 100%;
  list-style: none;
}
.tabs > menu[role="tablist"] > button {
  flex: 0 0 auto;
  width: auto;
  background: #d4d4d4;
  border: 1px solid #888;
  border-bottom: 1px solid #888;
  border-radius: 4px 4px 0 0;
  padding: 6px 14px;
  cursor: pointer;
  position: relative;
}
.tabs > menu[role="tablist"] > button:hover {
  background-color: #e8e8e8;
}
.tabs > menu[role="tablist"] > button[aria-selected="true"] {
  background-color: #fff;
  border-bottom-color: transparent;
  z-index: 5;
  font-weight: bold;
}
.tabs > article[role="tabpanel"] {
  background: #fff;
  border: 1px solid #888;
  padding: 1rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* minimal window/background helpers (keeps windows above background) */
.background {
  position: relative;
  margin: .75rem;
  display: flex;
  flex-direction: column;
  width: fit-content; 
  max-width: 100%;
}
.window { max-width: 100%; flex-grow: 0; display: flex; flex-direction: column; }
.window-body { flex-grow: 1; }

/* WEBRINGS: Clean Layout Logic */
.webrings-row {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 5px;
  width: auto;
}

/* Container defines the actual space in the window */
#dsring,
#cdr,
#the-last-cult {
  width: 100px;  /* Visual width */
  height: 60px;  /* Visual height */
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  overflow: visible;
}

/* Target the widget tables/content directly for scaling */
#dsring > *, #cdr > *, #the-last-cult > * {
  transform: scale(0.5);
  transform-origin: center;
  flex-shrink: 0;
}

@media (max-width: 820px) {
  .webrings-row { gap: 2px; }
  #dsring, #cdr, #the-last-cult { width: 85px; height: 50px; }
  #dsring > *, #cdr > *, #the-last-cult > * { transform: scale(0.4); }
}

@media (max-width: 520px) {
  #dsring, #cdr, #the-last-cult { width: 120px; height: 70px; }
  #dsring > *, #cdr > *, #the-last-cult > * { transform: scale(0.6); }
}