/* -------- Global -------- */
:root {
  --primary-color: #4CAF50;
  --secondary-color: #008CBA;
  --danger-color: #f44336;
  --warning-color: #ff9800;
  --info-color: #2196F3;
}



body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-image: url(images/bg.png);
  background-size: contain;
  background-attachment: fixed;
  color: #fff;
  width: 100%;
  overflow-x: hidden;
}

.bodyWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: radial-gradient(#000d7e6c, 25%, #000);
}

.bodyImg {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-image: url("images/backgrounds/knight1.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: auto 60%;
  background-attachment: fixed;
}

/* Universal fade animation */
.fade-out {
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* -------- Overlay Screens -------- */
.screen {
  width: 100%;
  height: 100%;
  display: flex; 
  align-items: start;
  justify-content: center;
}

/* Boxes (Age + Season) */
.age-box, 
.season-box {
  background: #222;
  padding: 2rem;
  width: 320px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  align-self: center;
  justify-self: center;
}

#ageGate,
#seasonScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;

}

/* -------- Dropdowns -------- */
.dob-container {
  display: flex;
  gap: 10px;
  margin: 1rem auto;
  justify-content: center;
}

select {
  padding: 0.5rem;
  border-radius: 6px;
  border: 1px solid #555;
  background: #333;
  color: #fff;
  cursor: pointer;
  width: 100%;
}

#seasonSelect {
  width: 100%;
  margin: 1rem 0;
}

/* -------- Season Visual -------- */
.season-visual {
  width: 100%;
  height: 130px;
  border-radius: 8px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin-bottom: 1rem;
  transition: background-image 0.3s ease-in-out;
}

/* Disabled restricted items */
.restricted-disabled {
  opacity: 0.4;
  pointer-events: none;
}



/* ------------------------ */
/* -------- Footer -------- */
/* ------------------------ */

#footer {
  position: relative;
  bottom: 0;
  width: 100%;
  filter: drop-shadow(0 0 5px darkblue);
}

#footerTopWrapper {
  position: relative;
  width: 100%;
  height: 175px;           /* << SET THE REAL HEIGHT HERE */
  overflow: hidden;
}

/* ---------------- Music Player Container ---------------- */
#musicPlayerWrapper {
  bottom: 0;                     /* attached to footer bottom */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  isolation: isolate;            /* ⬅ locks stacking context */
}

/* ---------------- Clickable Header ---------------- */
#musicPlayer h3 {
  margin: 0;
  padding: 8px 0;
  min-height: 36px;
  line-height: 36px;

  text-align: center;
  font-size: 16px;
  cursor: pointer;
  user-select: none;

  background: linear-gradient(#000, #111, #000);
}

#footerTop {
  background: radial-gradient(#000, #111, #000);
  clip-path: polygon(
    0% 0%,       
    50% 99%,     
    100% 0%,     
    100% 40%,    
    50% 100%,    
    0% 40%       
  );
  box-shadow: 0 -20px 40px #000 inset;
  z-index: 4;
}

#footerGradientTop {
  background: radial-gradient(#000, #151515, #000);
  clip-path: polygon(
    0% 30%,        
    50% 99%,      
    100% 30%,      
    100% 60%,    
    50% 100%,      
    0% 60%       
  );
  z-index: 3;
}

#footerGradientMid {
  background: radial-gradient(#050505, #0a0a0a, #050505);
  clip-path: polygon(
    0% 50%,
    50% 99%,
    100% 50%,
    100% 80%,
    50% 100%,
    0% 80%
  );
  z-index: 2;
}

#footerGradientBottom {
  background: radial-gradient(#010101, #000);
  clip-path: polygon(
    0% 70%,
    50% 99%,
    100% 70%,
    100% 100%,
    0% 100%
  );
  z-index: 1;
}

#footerTop, 
#footerGradientTop,
#footerGradientMid,
#footerGradientBottom,
#musicPlayer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;   /* matches wrapper height */
}

#footerContentWrapper {
  background: radial-gradient(#111, #000);
}

#footerContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px;
  width: 100%;
  box-shadow: 0 -2px 10px #000;
}

#footerBottom {
  text-align: center;
  padding: 5px;
  width: 100%;
}

#contentAreaWrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  justify-content: center;
  align-items: center;
}

#contentArea {
  display: flex;
  flex-direction: column;
  width: fit-content;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#008CBA11, #00000017, #008CBA11);
  padding: 60px 20px 140px 20px;
  margin-bottom: -140px; /* to offset footer height */
  border: darkblue 1px solid;
}

.contentInner {
  width: 70vw;
  min-height: 60vh;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: radial-gradient(#02020ada, #0b111fda, #02020ada);
  border: darkblue 2px solid;
  border-radius: 8px;
  box-shadow: 0 0 40px darkblue;
  overflow: auto;
  padding: 0%;
}

.contentSpanWrapper {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: linear-gradient(#000, #111, #000);
  height: fit-content;
}

#contentBackBtn,
#contentCloseBtn {
  background: linear-gradient(#000, #222, #000);
  color: white;
  border: 1px solid #111;
  padding: 8px 14px;
  border-radius: 2px;
  cursor: pointer;
  transition: 0.2s ease;
  font-size: 12px;
}


.contentSpanWrapper span {
  display: block;
  background: linear-gradient(#02020a, #0b111f, #02020a);
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  padding: 12px 20px;
  clip-path: polygon(
    0% 0%,     
    100% 0%,   
    75% 100%,  
    25% 100%   
  );
  width: 85%;
}


.contentInner::-webkit-scrollbar {
  width: 8px;
}

.widget {
  max-height: 150px;
  min-width: 225px;
  max-width: 33%;
  width: fit-content;
  border: #000 2px solid;
  box-shadow: 0 0 10px darkblue;
  display: flex;
  flex-direction: column;
}

.widgetTitle {
  display: flex;
  flex-direction: row;
  background: linear-gradient(#000, #111, #000);
  padding: 5px 3px 3px 5px;
  font-size: 14px;
  box-shadow: #000 0 2px 5px;
  justify-content: center;
  text-align: left;
}

.widgetTitle p {
  margin: 0;
  font-weight: bold;
  width: 100%;
  text-align: start;
  text-shadow: #0d6efd 0 0 4px, #0d6efd 0 0 6px;
}

.widget ul {
  margin: 0;
  padding: 5px;
  list-style-type: none;
  background: radial-gradient(#02020ada, #0b111fda, #02020ada);
  overflow-y: auto;          /* vertical scrolling */
  max-height: 120px;         /* set a height for scrolling */
  flex-grow: 1;               /* fill remaining space in widget */
}

.widget ul li {
  padding: 5px 10px;
  border-bottom: 1px solid #222;
  font-size: 14px;
}

.widget ul li a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0d6efd;
  text-decoration: none;
  transition: all 0.2s ease;
}

.widget ul li a:hover {
  color: white;
  text-shadow: 0 0 8px #0d6efd, 0 0 12px #0d6efd;
}

/* Optional: style the scrollbar */
.widget ul::-webkit-scrollbar {
  width: 8px;
}

.widget ul::-webkit-scrollbar-thumb {
  background: darkblue;
  border-radius: 4px;
}

#newestMemberContent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.newestMemberAvatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}

.newestMemberText {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.newestMemberJoined {
  font-size: 0.8rem;
  opacity: 0.7;
}



#affiliateSlider {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: radial-gradient(#02020ada, #0b111fda, #02020ada);
  overflow: hidden;
  position: relative;
  height: 100%;
}

#affiliateSlider button {
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.35);
  border: none;
  color: rgba(255, 255, 255, 0.6);
  padding: 0 12px;           /* only horizontal padding */
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: all 0.2s ease;
  display: flex;
  align-self: center;
  justify-self: center;
  height: 100%;              /* now matches slider height */
  font-size: 16px;
}

/* reveal when hovering the slider wrapper */
#affiliateSlider:hover button {
  opacity: 1;
  pointer-events: auto;
}

#affiliateSlider button:hover {
  background: rgba(0, 0, 0, 0.55);
  color: white;
}

#affiliateSlider button:active {
  transform: scale(0.92);
}



/* Slider strip */
.affiliateSlider {
  display: flex;
  flex-direction: row;
  gap: 20px;             /* space between slides */
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding: 10px 0;
}

/* Each affiliate link acts as a single slide */
.affiliateSlider a {
  display: block;        /* make anchor a block element */
  flex: 0 0 auto;        /* prevents stretching/shrinking */
  height: 80px;          /* height of banner */
}

/* Image inside link */
.affiliateSlider a img {
  display: block;        /* removes inline spacing */
  height: 100%;          /* fill the height of the anchor */
  width: auto;           /* maintain aspect ratio */
  border-radius: 4px;
  filter: drop-shadow(0 0 5px darkblue);
}

.socialIcon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

#dashboard {
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
  width: 100%;
}

/* ===============================
   Screens
================================ */
#homeScreen,
#communityScreen,
#forumsScreen,
#sanctuaryScreen,
#shopScreen,
#tvScreen,
#botDashboard,
#staffDashboard {
  flex-grow: 1;
  display: none;
  width: 100%;
}

/* ===============================
   Home Layout
================================ */
#homeScreenInner {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  height: 60vh;
  box-sizing: border-box;
}

/* ===============================
   Slider
================================ */
#homeSlider {
  flex: 4;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Main preview area */
.sliderPreview {
  position: relative;
  flex: 1;
  display: flex;
  overflow: hidden;
  background: #00000088;
  border-radius: 6px;
}

/* Slider images */
.sliderImage {
  min-width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* Prev / Next buttons */
#prevSlide,
#nextSlide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  z-index: 10;
}

#prevSlide { left: 10px; }
#nextSlide { right: 10px; }

#prevSlide:hover,
#nextSlide:hover {
  background: rgba(0,0,0,0.85);
}

/* Thumbnails */
.sliderThumbnails {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.sliderThumbnails .thumbnail {
  width: 60px;
  height: 40px;
  background-size: cover;
  background-position: center;
  opacity: 0.6;
  cursor: pointer;
  border-radius: 4px;
  border: red 2px solid;
}

.sliderThumbnails .thumbnail:hover {
  opacity: 1;
}

/* ===============================
   News Feed
================================ */
#newsFeed {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  background: #00000088;
  overflow-y: auto;
  border-radius: 6px;
  width: fit-content;
  align-items: center;
}

/* Widget title */
.widgetTitle p {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
}

/* Widget content */
.widgetContent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: #fff;
}

/* Avatar thumbnails */
.widgetContent .thumbnail {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}


/* ===============================
   Music Player Wrapper
================================ */
#musicPlayerWrapper {
  position: fixed; 
  top: 29%;
  bottom: 57%;
  width: 40%;
  min-width: 300px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  clip-path: polygon(
    0% 0%,      /* top-left */
    100% 0%,    /* top-right */
    50% 100%,   /* bottom-center */
  );
}

/* Expanded state — adjust as needed */
#musicPlayerWrapper.expanded {
  top: -300px;
  background: radial-gradient(#000, #111, #000);
  box-shadow: darkblue 0 0 20px;
  clip-path: polygon(
    0% 0%,      /* top-left */
    100% 0%,    /* top-right */
    100% 85%,   /* bottom-right control area */
    50% 100%,   /* bottom-center */
    0% 85%      /* bottom-left control area */
  );
}


/* ===============================
   Main Player Container
================================ */
#musicPlayer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden; /* required for collapsible area */
}   

#musicPlayerInner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-evenly;
  padding: 1rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
}

#musicPlayerInner.expanded {
  max-height: 100%;
  height: 80%;
  opacity: 1;
}

/* ===============================
   Toggle Header
================================ */
#musicPlayerToggle {
  margin: 0;
  padding: 5px;
  cursor: pointer;
  user-select: none;
  text-align: center;

  color: #fff;
  background: linear-gradient(#000, #111, #000);

  clip-path: polygon(
    10% 0%,
    90% 0%,
    50% 100%
  );
}

#musicPlayerToggle.expanded {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    0% 100%
  );
}

/* ===============================
   Visualizer
================================ */
#musicPlayerVisualizer {
  width: 100%;
  flex-grow: 1;
  background: linear-gradient(
    to right,
    rgba(0,180,186,0.25),
    rgba(0,180,186,0.05)
  );
  border-bottom: 1px solid #111;
}

/* ===============================
   Progress Bar
================================ */
#musicPlayerProgressBar {
  width: 100%;
  height: 6px;
  background: #111;
  cursor: pointer;
  position: relative;
}

#musicPlayerProgress {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #00b4ba, #0080ff);
  transition: width 0.15s linear;
}

/* ===============================
   Track Info
================================ */
#trackInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  padding: 6px 10px;

  color: #ccc;
  text-shadow: 0 0 6px rgba(0,180,186,0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#trackTitle {
  font-weight: bold;
  color: #fff;
}

#trackArtist {
  opacity: 0.8;
}

/* ===============================
   Controls (Collapsible)
================================ */
.musicControls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  overflow: hidden;
  padding: 0 10px;
  transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
}

/* ===============================
   Control Buttons
================================ */
.musicControls button {
  background: none;
  border: 1px solid #333;
  color: #fff;
  font-size: 14px;
  padding: 8px 14px;
  cursor: pointer;
}

.musicControls button:hover {
  background: #333;
}

/* ===============================
   Progress Bar Container
================================ */
#musicPlayerProgressBar {
  width: 100%;
  height: 8px;
  position: relative;

  background: linear-gradient(#0a0a0a, #111);
  border-top: 1px solid #000;
  border-bottom: 1px solid #222;

  cursor: pointer;
  overflow: hidden;
}

/* ===============================
   Progress Fill
================================ */
#musicPlayerProgress {
  height: 100%;
  width: 50%;

  background: linear-gradient(
    to right,
    #00b4ba,
    #0080ff
  );

  box-shadow:
    0 0 6px rgba(0,180,186,0.8),
    inset 0 0 4px rgba(255,255,255,0.15);

  transition: width 0.12s linear;
}

/* ===============================
   Hover / Interaction Feedback
================================ */
#musicPlayerProgressBar:hover #musicPlayerProgress {
  filter: brightness(1.15);
}

/* ===============================
   Optional Scrub Handle (Hidden by default)
================================ */
#musicPlayerProgress::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%);

  width: 12px;
  height: 12px;
  border-radius: 50%;

  background: #00b4ba;
  box-shadow: 0 0 8px rgba(0,180,186,0.9);

  opacity: 0;
  transition: opacity 0.2s ease;
}

#musicPlayerProgressBar:hover #musicPlayerProgress::after {
  opacity: 1;
}

#volumeControl {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0;
  width: 30%;
  align-self: center;
}

#volumeSlider {
  width: 80%;
  cursor: pointer;
}

.loader {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255,255,255,0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ---------- TV Screen ---------- */
#tvScreen {
  position: relative;
  width: 1280px;
  margin: 0 auto;
  flex-direction: column;
  align-items: center;
}

/* ---------- Creator Card ---------- */
#creatorCard {
  position: relative;
  display: inline-block;
  text-align: center;
}

/* ---------- Creator Name ---------- */
#creatorNameContainer {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 5px 15px;
  border-radius: 5px;
  opacity: 1;
  transition: opacity 0.3s;
  z-index: 20;
}

/* Fade back in on hover */
#creatorCard:hover #creatorNameContainer {
  opacity: 1 !important;
}

/* ---------- Overlays (Socials, Donations, Exclusive) ---------- */
.overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
  z-index: 20;
}

#creatorCard:hover .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* Overlay positions */
.top-right { top: 1rem; right: 1rem; }
.top-left { top: 1rem; left: 1rem; }
.bottom { bottom: 1rem; right: 50%; transform: translateX(50%); flex-direction: row; }

/* Overlay icons */
.overlay img {
  width: 24px;
  height: 24px;
  cursor: pointer;
}

/* Social link styling */
.overlay a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  border-radius: 4px;
  padding: 5px;
  text-decoration: none;
  transition: background 0.2s;
}

.overlay a:hover {
  background: rgba(255,255,255,0.8);
}

/* ---------- Navigation Arrows ---------- */
.navArrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 15;
  opacity: 0.5;
  transition: opacity 0.3s;
}

#creatorCard:hover ~ .navArrow,
.navArrow:hover {
  opacity: 1;
}

#prevCreator { left: 10px; }
#nextCreator { right: 10px; }

/* ---------- Platform Tabs ---------- */
#platformTabs {
  display: flex;
  gap: 5px;
  margin: 10px 0;
}

#platformTabs button {
  flex: 1;
  padding: 5px 0;
  cursor: pointer;
  text-align: center;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 5px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

#platformTabs button:hover {
  background: #555;
}

#platformTabs button img {
  width: 20px;
  height: 20px;
}

/* ---------- Embed ---------- */
.embedContainer iframe {
  width: 1280px;
  height: 720px;
  border: none;
  display: block;
}

/* ---------- Thumbnails ---------- */
#creatorThumbnails {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

#creatorThumbnails img {
  width: 100px;
  height: 60px;
  object-fit: cover;
  margin: 0 5px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s;
}

#creatorThumbnails img:hover {
  border: 2px solid #00f;
}

#communityDashboard,
#forumsCategories {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px;
  width: 100%;
  border:red 2px solid;
}

/* Dashboard cards */
.dashboardItem {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  padding: 16px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: radial-gradient(
    circle at top,
    rgba(20, 30, 70, 0.9),
    rgba(5, 8, 20, 0.95)
  );

  border: 1px solid rgba(100, 140, 255, 0.2);
  box-shadow:
    0 0 12px rgba(0, 80, 255, 0.25),
    inset 0 0 12px rgba(0, 0, 0, 0.6);

  color: #e6ecff;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;

  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

/* Hover effect */
.dashboardItem:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(120, 170, 255, 0.6);
  box-shadow:
    0 0 25px rgba(0, 120, 255, 0.6),
    inset 0 0 14px rgba(255, 255, 255, 0.05);
}

/* Optional subtle glow pulse */
.dashboardItem::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 30px rgba(80, 140, 255, 0.15);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.dashboardItem:hover::after {
  opacity: 1;
}

#discordInviteScreen,
#creatorsDashboardScreen,
#leaderboardScreen,
#upcomingEventsScreen,
#communityHighlightsScreen,
#memberSpotlightScreen,
#memberListScreen,
#communityRulesScreen,
#communityFeedbackScreen,
#communityResourcesScreen,
#communityAchievementsScreen {
  flex-direction: column;
  flex-grow: 1;
  display: none;
  width: 100%;
  align-self: start;
  justify-content: start;
  max-height: 60vh;
}

#leaderboardList {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  height: 55vh;
  overflow-y: auto;
  overflow-x: hidden;
}

#leaderboardList div:nth-child(1) {
  border: 2px solid #00aaff;
}

.leaderboardHeader,
.leaderboardRow {
  display: grid;
  grid-template-columns: 1fr 4fr 2fr 2fr 2fr 2fr 1fr; /* 7 columns */
  align-items: center;
  padding: 10px 14px;
  width: 100%;      /* make row full width */
  box-sizing: border-box; /* include padding in width */
  column-gap: 1rem; /* space between columns */
}


.leaderboardHeader {
  font-weight: bold;
  background: rgba(0,0,0,0.6);
  border-bottom: 2px solid #00aaff;
  text-align: center;
}

.leaderboardHeader span:nth-child(2) {
  text-align: left;
}

.leaderboardRow {
  background: rgba(5,10,30,0.8);
  border-radius: 6px;
  transition: transform 0.15s, background 0.15s;
  margin: 0; /* reset margin */
}


.leaderboardRow:hover {
  transform: scale(1.01);
  background: rgba(15,30,80,0.9);
}

.leaderboardRow span {
  text-align: center;
}

.leaderboardRow .user {
  display: flex;
  flex-direction: row;
  text-align: left;
  font-weight: 600;
  align-items: center;
}

.leaderboardRow.isMe {
  border: 1px solid #0084ff;
  background: rgba(0, 80, 160, 0.637);
}

.user .avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  margin-right: 1rem;
}

.rankBadge {
  color: #00ccff;
  margin-right: 6px;
}

#sanctuaryDashboard {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex-grow: 1;
  padding: 1rem;
  height: 60vh;
}

.sanctuaryDashboardInner {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  height: 60%
}

#sanctuaryDashboard .sanctuaryUser {
  background: rgba(10,20,50,0.8);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 10px darkblue;
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.sanctuaryStats {
  display: flex;
  flex-direction: column;
  background: rgba(10,20,50,0.8);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  box-shadow: 0 0 10px darkblue;
  flex-grow: 1;
  gap: .5rem;
  max-height: calc(100% - 1rem);
  overflow-y: auto;
}

.avatarWrapper {
  position: relative;
  width: 120px;
  height: 120px;
}

.avatarWrapper img.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 10px;
  left: 10px;
}

.xpCircle {
  width: 120px;
  height: 120px;
  transform: rotate(90deg);
}

.xpCircle circle {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.xpCircle circle.bg {
  stroke: #222222;
}

.xpCircle circle.progress {
  stroke: darkblue; /* XP color */
  stroke-dasharray: 339.292; /* 2πr for r=54 */
  stroke-dashoffset: 339.292; /* start empty */
  transition: stroke-dashoffset 0.5s ease;
}


.sanctuaryUserStats {
  display: flex;
  flex-direction: column;
  width: 80%;
  gap: .5rem;
}

.sanctuaryUserStats button {
  width: fit-content;
  background: #333;
  color: #fff;
  border: none;
  padding: 10px 10px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  transition: background 0.2s;
}

.sanctuaryUserStats button img {
  width: 1rem;
  height: 1rem;
  padding: 0;
}

.sanctuaryStats .stat,
.sanctuaryUserStats .stat {
  background: rgba(10,20,50,0.8);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 0 10px darkblue;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.eventItem { 
  margin-bottom: 1rem; 
}

.eventCard { 
  padding: 1rem; 
  border-radius: 12px; 
  background: #111; 
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

.hostEvent { 
  outline: 2px solid #5865F2; 
}

.eventHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eventManagerCard {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.eventManagerCard img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}

.countdown {
  font-weight: 600;
  opacity: 0.9;
}

.repeatTag {
  font-size: 0.8rem;
  opacity: 0.7;
}

.eventTiming {
  display: flex;
  gap: 12px;
  align-items: center;
}

.dateRange {
  font-size: 0.85rem;
  opacity: 0.8;
}

.hostBadge {
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 0.7rem;
  background: #7cff9b;
  color: #000;
  border-radius: 6px;
}

.eventMeta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.8rem;
  opacity: 0.85;
}

#constructionMessage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
  height: 60vh;
  justify-content: center;
  align-self: center;
  justify-self: center;
}

#constructionImage {
  max-width: 160px;
  opacity: 0.9;
}

#constructionText {
  font-size: 1.2rem;
  opacity: 0.85;
}

/* Main dashboard layout */
#dashboardLayout {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 100%;
}

#botDashboard {
  flex-grow: 1;
  width: 100%;
  height: 100%;
  gap: 1rem;
}

/* LEFT COLUMN — dynamic content */
#serverSelectionScreen,
#botDashboardMainContent {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Server picker visible by default */
#serverSelectionScreen {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: space-around;
  flex: 1;
  padding: 1rem;
  background: #00000055;
}


/* Dashboard hidden initially */
#botDashboardMainContent {
  display: none;
  flex-direction: column;
}

/* When a server is selected */
#botDashboardMainContent.active {
  display: flex;
  gap: 1rem;
}

/* RIGHT COLUMN — info panel */
.infoWrapper {
  width: 300px;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: #00000055;
  height: 100%;
  padding: 1rem;
  border-radius: 5px;
}

/* Server cards */
.serverCard {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, background 0.15s;
  height: 6rem;
  aspect-ratio: 21 / 9;
}

.serverCard:hover {
  transform: scale(1.05);
  background: rgba(30, 60, 120, 0.9);
}

.serverIcon {
  width: 5rem;
  height: 5rem;
  border-radius: 16px;
  margin-bottom: 0.5rem;
}

.serverName {
  font-weight: 600;
  text-align: center;
}

.statusIndicator {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: red;
  filter: drop-shadow(0 0 10px darkblue);
  box-shadow: 0 0 10px darkblue;
  align-self: flex-start;
  flex-shrink: 0;
}

.statusIndicator.online {
  background: #00cc44;
}


.serverCardBody {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.dashboardBody {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.dashboardBody h4 {
  margin: 0;
  border-bottom: white 1px solid;
}

#dashboardSideBar {
  width: fit-content;
  background: rgba(10, 20, 50, 0.8);
  display: flex;
  flex-direction: column;
  border-right: 2px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  gap: .5rem;
}

#dashboardContent {
  flex: 1;
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem;
}


.navItem {
  border: none;
  display: flex;
  flex-direction: row;
  background: #00000044;
  color: white;
  padding: .5rem;
}

.pollsHeader {
  margin-bottom: 1rem;
}

.pollsHeader p {
  opacity: 0.7;
  margin-top: 0.25rem;
}

.pollsWrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card,
#pollUsageBanner {
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.formGroup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
}

.formGroup label {
  font-size: 0.85rem;
  opacity: 0.8;
}

input,
select {
  background: #00000066;
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  padding: 0.5rem;
  border-radius: 4px;
}

.pollOptions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.pollSettings {
  background: rgba(255,255,255,0.05);
  padding: 0.5rem;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}

.pollSettings h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  opacity: 0.85;
}

.pollSettings label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.primaryBtn {
  background: #5865F2; /* Discord blurple */
  border: none;
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  cursor: pointer;
}

.primaryBtn:hover {
  opacity: 0.9;
}

.secondaryBtn {
  background: transparent;
  border: 1px dashed rgba(255,255,255,0.25);
  color: white;
  padding: 0.4rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}

.actionRow {
  display: flex;
  justify-content: flex-end;
}

.pollList {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pollItem {
  background: rgba(255,255,255,0.05);
  padding: 0.5rem;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.pollItem button {
  background: #5865F2;
  border: none;
  color: white;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
}

.pollHeader{
  display: flex;
  flex-direction: row;
  flex: 1;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.pollButtons {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: end;
  gap: .5rem;
}

.pollButtons,
.pollIDWrapper {
  width: 25%;
}

.pollToggle {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  font-size: 1rem;
}

.pollResults {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.pollResults.hidden {
  display: none;
}

.pollResultRow {
  display: grid;
  grid-template-columns: 1fr 4fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.4rem;
}

.pollBar {
  background: rgba(255,255,255,0.1);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.pollBarFill {
  background: #5865F2;
  height: 100%;
  border-radius: 4px;
}

.pollVotes {
  font-size: 0.8rem;
  opacity: 0.7;
}

.dashItem {
  padding: 2rem;
  background: #00000044;
  border-radius: .5rem;
  border: #00000088 1px groove;
  color: white;
  aspect-ratio: 16/9;
}

#deletePollBtn {
  background: red !important;
}

#pollUsageBanner {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 1rem;
}

.upgradeBtn {
  background: linear-gradient(135deg, gold, orange);
  color: white;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: fit-content;
  font-style: inline;
}

.upgradeBtn:hover {
  filter: brightness(1.1);
}

.pollsWrapper {
  gap: 0rem;
}