/* color palette & vars */
:root{
    
    /* background vars */

    /* acrylic layer vars */
    --acrylic-color: rgba(0, 0, 0, 0.6);

    /* expositor layer */
    --exp-max-width: 650px;
    --exp-border-radius: 15px;
    --exp-padding: 20px;
    --exp-box-shadow-size: 7px;
    --exp-bg-color: rgba(19, 21, 22, 0.0);
    --exp-box-shadow-color: rgba(0, 0, 0, 0.5);
    --exp-font-color: white;

    /* pfp circle options */
    --pfp-width: 120px;
    --pfp-height: 120px;
    --pfp-border-size: 2px;
    --pfp-border-color: rgba(255,255,255, 0.8);
    --pfp-box-shadow-size: 10px;
    --pfp-box-shadow-color:rgba(255, 255, 255, 0.6);
    
    /*name options */
    --name-font-color: white;
    --name-font-size: 16px;
    --name-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --name-text-shadow-color: #ffffffbb;

    /* bio */
    --bio-font-color: #cccccc;
    --bio-font-size: 14px;
    --bio-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --bio-text-shadow-color: #00000088;
    --bio-text-shadow-size: 5px;
    --bio-margin-top: 0px;
    --bio-font-style: italic;


    /* strip options */
    --strip-margin-top: 7px;
    --strip-spacing: 15px;

    /* icon options */
    --icon-size: 32px;
    --icon-color: white;
    --icon-hover-color: white;
    --icon-transition: 0.3s ease;
    --icon-shadow: 0 5px 5px rgba(255, 255, 255, 0.4);
    --icon-shadow-hover: 0 7px 7px rgba(255, 255, 255, 0.4);
    
}

 
/* body attribs */
body {
    overflow: hidden;
    user-select: none;
}


/* background image property */
.bg_image {
    position: fixed;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;

    z-index: 0;
}


/* background video property */
.bg_video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}



/* acrylic/divisor layer */
.acrylic {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    z-index: 1;
    background-color: var(--acrylic-color);
}


/* expositor div attribs */
.expositor {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    max-width: var(--exp-max-width);
    width: 90vw;
    min-height: 100px;
    max-height: 90vh;

    overflow-y: auto;
    background: var(--exp-bg-color);
    border-radius: var(--exp-border-radius);
    padding: var(--exp-padding);
    /* box-shadow: 0 0 var(--exp-box-shadow-size) var(--exp-box-shadow-color); */
    z-index: 10;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    color: var(--exp-font-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    transition: width 0.3s ease, height 0.3s ease;
    padding-bottom: 3rem;
    overflow: hidden;
}


/* pfp attribs */
.pfp {
    width: var(--pfp-width);
    height: var(--pfp-height);

    border-radius: 50%;
    object-fit: cover;
    border: var(--pfp-border-size) solid var(--pfp-border-color);
    box-shadow: 0 0 var(--pfp-box-shadow-size) var(--pfp-box-shadow-color);
    transition: box-shadow 0.3s ease;

    cursor: pointer;
    -webkit-user-drag: none;
    -moz-user-drag: none;
    -ms-user-drag: none;
    user-select: none;
}


/* name attribs */
.name {
    color: var(--name-font-color);
    font-size: var(--name-font-size);

    text-shadow: 0 0 20px #ffffffbb;
}


/* bio attribs */
.bio {
    color: var(--bio-font-color);

    font-size: var(--bio-font-size);
    font-family: var(--bio-font-family);

    text-shadow: 0 0 var(--bio-text-shadow-size) var(--bio-text-shadow-color);
    margin-top: var(--bio-margin-top);    
    user-select: none;

    text-align: center;
    max-width: 80%;
    line-height: 1.4;
    font-style: var(--bio-font-style);
}


/* icons strip attribs */
.strip {
    display: flex;
    gap: var(--strip-spacing);
    justify-content: center; /* center the strip */
    margin-top: var(--strip-margin-top);
}


/* icon link attribs */
.icon-link {
    display: inline-flex;
    width: var(--icon-size);
    height: var(--icon-size);

    color: var(--icon-color);
    transition: color var(--icon-transition);
    cursor: pointer;
    text-decoration: none;
    text-shadow: 0 0 20px #ffffffbb;
}

/* icon link when hovered attribs */
.icon-link:hover {
    color: var(--icon-hover-color);
}


/* icon svg attribs */
.icon-link svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    display: block;
    filter: drop-shadow(var(--icon-shadow));
    transition: filter var(--icon-transition);
}

.icon-link:hover svg {
    filter: drop-shadow(var(--icon-shadow-hover));
}


.views {
    position: absolute;    /* already inside .expositor */
    bottom: -0.3rem;        /* move it 0.5rem above the new bottom padding */
    left: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
    z-index: 10;
}

.views-icon {
    width: 1rem;
    height: auto;
}

.views-text {
    font-size: 0.9rem;
    color: inherit;
}

/* Position your slider wherever you like; e.g. bottom-left */
.volume-control {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
}
  
#volume-slider {
    width: 120px;
    cursor: pointer;
}


/* Overlay covers the entire viewport */
#enter-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    transition: opacity 0.75s ease;
    user-select: none;
}

/* When it's hidden */
#enter-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}


/* overlay text */
.overlay_text {
    color: white;
    font-family: 'Satoshi', sans-serif;
    font-size: 2rem;
    text-align: center;
    text-shadow: 0 0 10px rgba(255,255,255,0.8),
                 0 0 20px rgba(255,255,255,0.6);
    cursor: pointer;
}


.audio {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 9999;
    width: fit-content; /* so it wraps its content */
    height: 60px;
}

.volume-container {
  display: inline-flex;          /* inline flex container */
  align-items: center;
  width: 60px;                   /* narrow width hides slider */
  height: 60px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 15px;
  overflow: hidden;              /* clip the slider */
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
  transition: width 0.3s ease, box-shadow 0.3s ease;
}

.volume-container:hover {
  width: 250px;                  /* expand width to reveal slider */
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.7); /* glowing border */
}

.volume-icon-wrapper {
  width: 60px;
  height: 60px;
  flex-shrink: 0;                /* do not shrink icon */
  display: flex;
  justify-content: center;
  align-items: center;
}

.volume-icon {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: white;
}

.volume-icon svg {
  width: 28px;
  height: 28px;
  color: white;
}

.volume-slider-container {
  flex-grow: 1;
  padding-left: 10px;
  display: flex;
  align-items: center;
}


#volume-slider {
  width: 100%;
  height: 5px;
  appearance: none;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  left: 10px;
  width: 85%;
}

/* Chrome, Safari, Edge thumb */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 8px #ffffffaa;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    border: none;
    position: relative;
    z-index: 2;
}



.tooltip {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 10;
  visibility: hidden;
  font-size: 12px;
}

.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

.tooltip::before {
  content: "";
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #222 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s ease;
  visibility: hidden;
}

.tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}



  
  .user-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .username {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 4px;
  }
  
  .status {
    font-style: italic;
    color: #bbb;
    margin-bottom: 6px;
  }
  
  .status-circle {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
  }
  
  .badges img {
    height: 20px;
    margin: 3px;
  }
  
  .game {
    font-size: 0.95em;
    margin-top: 8px;
  }


  #presence-box {
    background: #202225;
    border: 2px solid #5865F2;
    padding: 20px;
    border-radius: 15px;
    width: 350px;
    box-shadow: 0 0 20px #5865F280;
    transition: 0.3s ease all;
    /* remove z-index -1 if applied */
  }
  
  #presence-box img {
    width: 80px;
    border-radius: 50%;
    border: 2px solid #5865F2;
    flex-shrink: 0;
  }

  #presence-box.hidden {
    opacity: 0;
    pointer-events: none;
  }