*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
    font-family: "Press Start 2P", monospace, ui-sans-serif;
    z-index: 10;
 }


html, body {
  margin: 0;
  padding: 0;
  width: 100dvw;
  height: 100dvh;
  overflow: auto; /* ป้องกัน scroll bar */
}

 
body {
    margin: 0;
    background: #010715;
    color: #38bdf8;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    perspective: 800px;  
}


#bg {
  width: 100dvw;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
}



    .menu {
      margin-left: 40px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

.menu h1 {
    font-size: 40px;
    color: #fff;
    margin-bottom: 10px;
}

.menu p {
    font-size: 12px;
    line-height: 1.5;
    color: #94a3b8;
    max-width: 480px;
    margin-bottom: 0px;
}

a.btn {
    font-family: inherit;
    font-size: 14px;
    padding: 16px 30px;
    text-align: left;
    background: #000000;
    border: 2px solid #38bdf8;
    color: #38bdf8;
    text-decoration: none;
    display: inline-block;
    transition: all 0.5s ease;
   /*  backdrop-filter: brightness(1) blur(50px); */
    border-radius: 0px 0px 0px 0px;
}
    a.btn:hover {
       border: 2px solid #fab432ff;
      background: #fab432ff;
      color: #0b1220;
      box-shadow: 0 0 12px #fab432ff;
       transition: all 0.1s ease;
    }

      canvas {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 0; 
     
  }

.bg_glow {
    width: 100vw;
    height: 100vh;
    position: fixed;
    background: none;
    pointer-events: none;
    box-shadow: 0px 0px 2000px 1px #00b1ff75 inset;
    z-index: 1;
}

.sp{
/*   height: 2000px; */
}

.bg-text {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 3vw;  /* ขนาดตัวอักษรปรับตามจอ */
  color: rgba(255, 255, 255, 0.08); /* สีจาง */
  white-space: nowrap;
  z-index: 0; /* อยู่ล่างกว่าเมนู */
  pointer-events: none; /* คลิกทะลุได้ */
}


p {
    background: #00000087;
    padding: 10px;
    border: 2px solid #94a3b8;
    backdrop-filter: blur(0px) blur(30px);
    font-size: 16px !important;
    transform: rotate(10);
}




#debug-panel {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  color: #38bdf8;
  border: 1px solid #38bdf8;
  border-radius: 5px;
  z-index: 9999;
}
#debug-panel label {
  display: block;
  margin: 4px 0;
}
#debug-panel input {
  width: 120px;
}



.title_text{
  position: relative;
  height: 80px;
  display:flex; align-items:center; justify-content:center;
  perspective: 800px;                /* มุมมอง 3D */
  perspective-origin: 50% 50%;

}

/* ชั้นนอก: ขยับขึ้นลง 5วิ (world space) */
.bob{
  animation: bob 5s ease-in-out infinite;
  will-change: transform;
}

/* ชั้นใน: หมุน 8วิ */
.rotor{
  transform-style: preserve-3d;
  animation: spin 3s ease-in-out infinite;
  will-change: transform;
}

/* แพนเนล 2 หน้า */
.space-text3d{
  position: relative;
  transform-style: preserve-3d;
}

.face{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:3em; font-weight:800; letter-spacing:.04em;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
/*   text-shadow:0 0 10px #0ff, 0 0 20px #0ff;*/
   color: aliceblue;
   padding: 10px;
  backdrop-filter: blur(30px);
}

/* หน้า */
.face.front{
  transform:translate(-50%,-50%) translateZ(0.1px);
}
/* หลัง (หมุนกลับ 180° จะอ่านได้ปกติ) */
.face.back{
  transform:translate(-50%,-50%) rotateY(180deg) translateZ(0.1px);
/* text-shadow:0 0 10px #0ff, 0 0 20px #0ff;*/
      color: aliceblue;
  
}

/* หมุนรอบแกน Y + เอียง X นิดๆ ให้ดูมีมิติ */
@keyframes spin{
  0%   {  transform:rotate(2deg); }
  50% { transform: rotate(-2deg); }
  100%   { transform: rotate(2deg); }
}

/* ลอยขึ้นลง 20px ใช้ ease-in-out */
@keyframes bob{
  0%,100% { transform: translateY(-10px); }
  50%     { transform: translateY(10px); }
}



input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 5px;
    background: #000000;
    box-shadow: 0 0 1px 1px #54befa;
}


input[type="range"]::-webkit-slider-runnable-track {
    background: #00000000;
}

input[type="range"]::-moz-range-track {
     background: #00000000;
}




/* ทางเลือก: เคารพผู้ใช้ที่ลด motion */
@media (prefers-reduced-motion: reduce){
  .bob, .rotor{ animation: none; }
}


input[type="range"]::-webkit-slider-thumb { /* Chrome, Safari */
  -webkit-appearance: none; /* Reset thumb appearance */
  background: #007bff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin-top: -6px; /* Adjust to vertically center the thumb on the track */
}

input[type="range"]::-webkit-slider-thumb {
    background: #000;
    border-radius: 1px;
    width: 10px;
     box-shadow: 0 0 6px 3px #54befa;
}









/* =========================
   Responsive Design
   ========================= */
@media (max-width: 768px) {
  body {
    justify-content: center; /* จัดให้อยู่กลางจอในแนวตั้ง */
    padding: 20px;
  }

  .title_text {
    transform: scale(0.5);
  }


    .menu {
        margin-left: 0;
        align-items: center;
        text-align: center;
        gap: 16px;
        padding-top: 30px;
        padding-bottom: 30px;
        height: calc(90vh - 100px);
        overflow: auto;
        display: flex
;
        justify-content: flex-start;
    }




  .menu h1 {
    font-size: 18px;
  }

  .menu p {
    font-size: 10px;
    max-width: 90%;
    margin-bottom: 20px;
  }

  a.btn {
    font-size: 12px;
    padding: 12px 20px;
    width: 100%;
    text-align: left;
 
  }

  .bg-text {
    font-size: 6vw; /* ให้ใหญ่ตามจอเล็ก */
    top: 20%;
  }
}

@media (max-width: 480px) {
  .menu h1 {
    font-size: 16px;
  }

  .menu p {
    font-size: 9px;
    line-height: 1.4;
  }

  a.btn {
    font-size: 11px;
    padding: 10px 16px;
  }

  .bg-text {
    font-size: 8vw;
    top: 25%;
  }

#volumeBar{
    display: none;
}

#togglePlaylist{
    display: none;
}

}