body {
  margin: 0;
  padding: 0;
  /* Troque pela imagem de fundo desejada */
  background: url('space-bg.jpg') center center/cover no-repeat fixed;
  font-family: 'Press Start 2P', 'Orbitron', Arial, sans-serif;
  color: #f2f9ff;
  min-height: 100vh;
  cursor: url('y2k-gothic-cursor.cur'), auto;
  letter-spacing: 0.03em;
}

.bg-y2k-gothic {
  background: none;
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -2;
  pointer-events: none;
}

/* CRT effect overlay */
.crt-effect {
  pointer-events: none;
  position: fixed;
  z-index: 1000;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.045) 0px,
    rgba(255,255,255,0.045) 1.3px,
    transparent 1.3px,
    transparent 4px
  ), rgba(0,0,0,0.08);
  mix-blend-mode: screen;
  opacity: 0.53;
  pointer-events: none;
  animation: crt-flicker 1.4s infinite linear;
}
@keyframes crt-flicker {
  0%, 100% { opacity: 0.60; }
  50% { opacity: 0.47; }
}

/* CRT header overlay & scanlines */
.crt-header-bg {
  /* Imagem de fundo do header */
  background: url('header-top-bg.jpg') center center/cover, #191927 linear-gradient(90deg,#252535,#191927 70%,#38384a 100%);
  position: relative;
  overflow: visible;
}
.crt-scanline {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.07) 0px,
    rgba(255,255,255,0.09) 2px,
    transparent 2px,
    transparent 6px
  );
  opacity: 0.38;
  z-index: 11;
}
.crt-glow {
  pointer-events: none;
  position: absolute;
  left: 0; top: 0; width: 100%; height: 100%;
  box-shadow: 0 0 42px 22px #aee4ff33, 0 0 30px 21px #c7bfff77;
  opacity: 0.27;
  z-index: 12;
}

.player-bar {
  display: none;
}

.y2k-frame {
  max-width: 1150px;
  margin: 16px auto 0 auto;
  border: 7px double #a5acbe;
  border-radius: 32px;
  background: linear-gradient(135deg,#191927 70%, #2c2c3b 100%);
  box-shadow:
    0 0 0 12px #48486b,
    0 0 0 22px #beb6e6,
    0 0 45px #c7bfffcc;
  position: relative;
  padding-bottom: 40px;
}

.y2k-header {
  position: relative;
  border: 5px solid #a7a7c7;
  border-radius: 26px 26px 0 0;
  color: #faf8ff;
  text-shadow: 2px 2px 0 #0c0c11, 0 0 12px #a7a7c7;
  margin-bottom: 18px;
  padding: 38px 30px 28px 130px;
  min-height: 110px;
  box-shadow: 0 3px 18px #8e8eb988, 0 0 0 10px #b6b6f7 inset;
  overflow: visible;
}
.corner-y2k {
  position: absolute;
  left: -31px; top: -24px;
  width: 120px;
  z-index: 2;
  filter: drop-shadow(0 0 19px #fff);
  pointer-events: none;
}
.header-title-img {
  height: 60px;
  display: block;
  position: absolute;
  left: 95px;
  top: 27px;
  z-index: 4;
  filter: drop-shadow(0 0 9px #c7bfff) drop-shadow(0 2px 0 #fff);
}
.header-character-img {
  position: absolute;
  right: 25px; top: 0px;
  width: 110px;
  z-index: 5;
  filter: drop-shadow(0 0 18px #191927) drop-shadow(0 0 12px #c7bfff);
  pointer-events: none;
}
.y2k-desc {
  display: block;
  font-size: 1.1em;
  margin-top: 65px;
  margin-left: 4px;
  font-family: 'Press Start 2P', 'UnifrakturCook', Arial, sans-serif;
  letter-spacing: 0.07em;
  color: #e6e9ff;
  text-shadow: 1px 1px 2px #191927, 0 0 14px #fff8;
  z-index: 7;
  position: relative;
}

/* GRID: Sidebar esquerda, meio (main), direita */
.y2k-main-grid {
  display: grid;
  grid-template-columns: 180px 1fr 220px;
  gap: 18px;
}

/* Sidebar esquerda: botões + updates */
.sidebar-left-y2k {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 150px;
  gap: 16px;
  margin-top: 0;
  padding-top: 40px;
}

.updates-panel-quad {
  background: linear-gradient(135deg,#20223a 85%, #3e3e5c 100%);
  border: 2.5px solid #b2d2ef;
  border-radius: 15px;
  box-shadow: 0 0 10px #b2d2ef33 inset;
  margin-bottom: 8px;
  padding: 11px 10px 13px 14px;
}
.updates-title {
  font-family: 'UnifrakturCook', 'Orbitron', serif;
  font-size: 1em;
  color: #c7bfff;
  margin-bottom: 4px;
  text-shadow: 1px 1px 4px #23233a, 0 0 8px #fff7;
  letter-spacing: 0.04em;
}
.updates-list {
  list-style: disc inside;
  padding-left: 0;
  font-size: 0.95em;
  color: #e2e7ff;
  margin: 0;
}

/* Botões Y2K na sidebar esquerda */
.nav-y2k-sections {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
  margin: 0;
}
.y2k-btn-section {
  font-family: 'Orbitron', 'Press Start 2P', Arial, sans-serif;
  font-size: 1.05em;
  background: linear-gradient(90deg, #23233a 60%, #35355c 100%);
  color: #e1e4ff;
  border: 2.5px solid #b2d2ef;
  border-radius: 13px;
  padding: 13px 0 13px 16px;
  margin: 0 8px 0 0;
  box-shadow:
    0 0 0 2.5px #b2d2ef inset,
    2px 2px 0 #b2d2ef,
    0 0 22px #7c7c96;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, box-shadow 0.18s;
  text-shadow: 1px 1px 2px #09091e, 0 0 8px #fff7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 130px;
}
.y2k-btn-section .btn-label {
  flex: 1;
  text-align: left;
}
.y2k-btn-section .btn-icon {
  width: 32px;
  height: 32px;
  display: block;
  margin-left: 12px;
  filter: drop-shadow(0 0 10px #b2d2efbb) drop-shadow(0 1px 0 #23233a);
}
.y2k-btn-section:hover {
  background: #c7bfff;
  color: #191927;
  box-shadow: 0 0 22px #b2d2ef, 2px 2px 0 #35355c;
}

/* Sidebar direita: profile quadrado, status, info */
.sidebar-right-y2k {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 180px;
  gap: 20px;
  margin-top: 40px;
}

.perfil-panel-quad, .info-panel-quad {
  background: linear-gradient(135deg,#181a25 70%, #38384a 100%);
  border: 3.5px solid #b2d2ef;
  border-radius: 15px;
  box-shadow: 0 0 14px #b2d2ef33 inset, 0 2px 12px #23233a99;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
  min-height: 100px;
}
.perfil-pic-quad {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 3.5px solid #b2d2ef;
  background: #fff;
  box-shadow: 0 0 10px #b2d2ef, 0 2px 0 #23233a;
}
.info-panel-quad {
  flex-direction: column;
  align-items: flex-start;
  padding: 14px 9px;
  min-height: 80px;
}
.info-title {
  font-family: 'UnifrakturCook', 'Orbitron', serif;
  font-size: 1em;
  color: #c7bfff;
  margin-bottom: 4px;
  text-shadow: 1px 1px 4px #23233a, 0 0 8px #fff7;
  letter-spacing: 0.04em;
}
.info-text {
  font-size: 0.97em;
  color: #e6e9ff;
  word-break: break-word;
}

.status-panel-quad {
  background: linear-gradient(135deg,#23233a 80%, #35355c 100%);
  border: 2.5px solid #b2d2ef;
  border-radius: 13px;
  box-shadow: 0 0 10px #b2d2ef33 inset;
  margin: 0 0 12px 0;
  padding: 10px 10px 10px 16px;
}
.status-title {
  font-family: 'UnifrakturCook', 'Orbitron', serif;
  font-size: 1em;
  color: #c7bfff;
  margin-bottom: 4px;
  text-shadow: 1px 1px 4px #23233a, 0 0 8px #fff7;
}
.status-text {
  font-size: 0.97em;
  color: #e6e9ff;
  word-break: break-word;
}

/* Painéis principais */
.y2k-content {
  padding: 10px 2px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.y2k-panel {
  background: linear-gradient(134deg,#191927 60%, #23233a 100%);
  border: 6px double #b2d2ef;
  border-radius: 22px;
  box-shadow:
    0 0 0 8px #48486b,
    0 0 0 16px #beb6e6,
    0 4px 34px #a7a7c7;
  padding: 0;
  position: relative;
  overflow: visible;
}
.inner-y2k {
  border: 2.5px solid #c7bfff;
  border-radius: 13px;
  margin: 16px;
  background: linear-gradient(135deg,#23233a 68%, #35355c 100%);
  box-shadow: 0 0 14px #a7a7c744 inset;
  padding: 18px;
  position: relative;
}

.flex-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
}
.welcome-left, .about-left {
  flex: 0 0 170px;
}
.welcome-center, .about-text {
  flex: 1;
  padding: 0 30px;
}
.welcome-right, .about-right {
  flex: 0 0 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-right img, .welcome-left img {
  width: 120px;
  height: auto;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: none !important;
}

/* Welcome chibi */
.welcome-chibi {
  width: 80px;
  height: auto;
  filter: drop-shadow(0 0 7px #b6b6f7);
}
.y2k-panel p { font-size: 1.11em; color: #e2e7ff; text-shadow: 1px 1px 2px #191927, 0 0 8px #fff7;}
.y2k-glow, .gothic-glow {
  color: #c0bcff;
  text-shadow:
    0 0 14px #fff,
    0 0 22px #b6b6f7,
    0 0 32px #191927;
  font-family: 'Orbitron', Arial, sans-serif;
  font-size: 1.09em;
  letter-spacing: 0.06em;
}
.gothic-font { font-family: 'UnifrakturCook', 'Orbitron', serif !important; }
.gothic-title {
  font-family: 'UnifrakturCook', 'Orbitron', serif;
  font-size: 1.4em;
  color: #b9b9ea;
  letter-spacing: 0.05em;
  text-shadow: 2px 2px 0 #09091e, 0 0 8px #fff7;
  background: #23233a;
  border-color: #a7a7c7;
  border-radius: 8px;
  padding: 7px 18px;
  display: inline-block;
  margin-bottom: 12px;
  border: 2.5px solid #b2d2ef;
}

/* Carousel */
.carousel-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 8px;
}
.carousel-view {
  width: 220px;
  height: 140px;
  border-radius: 15px;
  overflow: hidden;
  border: 2.5px solid #b2d2ef;
  background: #181825;
  box-shadow: 0 0 0 4px #a7a7c7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-btn {
  font-family: 'Orbitron', 'VT323', monospace;
  font-size: 2.1em;
  background: linear-gradient(135deg,#23233a 70%, #35355c 100%);
  color: #b2d2ef;
  border: 2.5px solid #c7bfff;
  border-radius: 8px;
  box-shadow: 0 0 10px #b2d2ef88;
  cursor: pointer;
  padding: 0 13px;
  transition: background 0.16s, color 0.16s;
}
.carousel-btn:hover {
  background: #b2d2ef;
  color: #23233a;
}

/* Footer CRT REMOVIDO */
.footer-tv-y2k {
  margin: 42px auto 0 auto;
  text-align: center;
  position: relative;
}
.footer-credit {
  font-family: 'UnifrakturCook', 'Orbitron', serif;
  color: #e3e5ff;
  background: #191927;
  margin-top: 16px;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 14px;
  box-shadow: 0 2px 14px #b2d2ef88;
  font-size: 1.18em;
  letter-spacing: 0.09em;
  text-shadow: 1px 1px 0 #7c7c96, 0 0 12px #fff6;
}
/* black theme */

#musicplayer{ 
  font-family: 'basiic';
  font-weight:bold;
  height:30px;
  width:100%;
  left:0;
  top:0;
  position:fixed;
  margin-bottom:20px;  
  display:flex;
    background: linear-gradient(180deg,black 0%, lightgray 45%, black 47%, black 60%, gray 100%);  
  border:ridge 2px gray;/* border around player */
  outline: solid 2px black;  
  box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .songtitle{ 
    display:block;
    padding:2px; /* padding around song title */
    font-family: 'pixel';
    margin-top:4px;
    margin-right: 5px; 
    font-size:15px;
    color:black;
    letter-spacing: 1px; 

    background: white;/* background of song title */
    border: gray inset 1px;
       border-radius:6px;
       box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
    }
 
    .controls{
      font-size:12px; /* size of controls */
      text-align:center;
      width:100px;
      height:20px;
      text-decortation:none;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
 
    .controls td{
       padding-top:5px; /* padding around controls */
    }
 
    .seeking{
      width:75%;
      background: transparent;/* background color of seeking bar */
      display:flex;
      justify-content: space-evenly;
      padding:7px; /* padding around seeking bar */
       
    }
 
    .current-time{  
      padding-right:5px;
      margin-right: 3px; 
     filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
       
    }
 
    .total-duration{
      padding-left:5px;
      filter: drop-shadow(2px 0 0 white) drop-shadow(0 2px 0 white) drop-shadow(-2px 0 0 white) drop-shadow(0 -2px 0 white)  drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);
    }
  .ctrlimg {
   height:16px;
   width:16px;
   }
    .ctrlimg:hover{
        cursor:help;
    }
    
    input[type=range] {
        -webkit-appearance: none;
        width: 100%;
      background: transparent;
    }
    
    input[type=range]:focus {
        outline: none;
    }
    
    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 6px; /* thickness of seeking track */
        cursor: help;
        border-radius: 6px;
        background: black; /* color of seeking track */
        border: 1px white solid;
    }

    input[type=range]::-webkit-slider-thumb {
      
        height: 30px; /* height of seeking square */
        width: 20px; /* width of seeking square */
        background-image:  url('https://file.garden/Zztv0a9yEhr5pmEq/tumblr_40786d3985453eb5412348aad980ac51_3a9a1088_1280%20(1).gif'); /* image of  seeking square */
        background-size: 25px;
        -webkit-appearance: none;
        margin-top: -10px;
        
    }
    
input[type=range].volume_slider::-webkit-slider-runnable-track { 
    background: white; /* color of volume seeking track */
     filter:drop-shadow(-0.5px 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0 black) drop-shadow(0 0.5px 0.5px black) drop-shadow(0 0.5px black) drop-shadow(0.5px 0.5px 0 black) drop-shadow(0.5px 0.5px 0 black);  /* outline of volume seeking track */ 
    }
    
 input[type=range].volume_slider::-webkit-slider-thumb {
    background-image: url(https://file.garden/Zztv0a9yEhr5pmEq/798d7d72_original.png);/* image of volume seeking square */
    background-size: 20px;
    height: 20px; /* height of volume seeking square */
    width: 20px; 
    margin-top: -8px;
   }
 
 
.slider_container {  
  width: 15%;       /* width of volume seeker */
  display: flex;
  justify-content: center;
  align-items: center;
}    


/* Scrollbar Y2K Gothic */
::-webkit-scrollbar { width: 13px; background: #23233a; }
::-webkit-scrollbar-thumb { background: #b2d2ef; border-radius: 9px; }