* { margin: 0; padding: 0; box-sizing: border-box; }
    html, body { 
      height: 100%; 
      overflow: hidden; 
      background: #000 url('../img/background/BG01.png') center center / cover no-repeat fixed;
    }
    body { display: flex; justify-content: center; align-items: center; perspective: 1500px; font-family: 'Pridi', serif; }


    @font-face {
      font-family: 'JS Wannaree';
      src: url('../font/JS-Wannaree-Italic.ttf') format('truetype');  /* เพิ่ม ../ */
      font-weight: normal;
      font-style: italic;
      font-display: swap;
    }
    /* ปุ่มควบคุมเสียง */
    .volume-control {
      position: absolute; bottom: 20px; right: 20px; display: flex; align-items: center;
      background: rgba(0,0,0,0.7); padding: 8px 12px; border-radius: 30px;
      backdrop-filter: blur(10px); z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    }
    .volume-btn {
      background: none; border: none; color: #ffdc96; font-size: 1.8rem; cursor: pointer; margin: 0 10px;
      transition: transform 0.2s;
    }
    .volume-btn:hover { transform: scale(1.1); }
    .volume-slider {
      width: 100px; height: 4px; -webkit-appearance: none;
      background: rgba(255,220,100,0.3); outline: none; border-radius: 2px;
    }
    .volume-slider::-webkit-slider-thumb {
      -webkit-appearance: none; width: 16px; height: 16px;
      background: #ffdc96; border-radius: 50%; cursor: pointer; box-shadow: 0 0 10px #ffdc96;
    }


    /* Overlay หน้าต้อนรับ */
    .intro-overlay {
      position: fixed;
      top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.92);
      backdrop-filter: blur(12px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.8s ease, visibility 0.8s ease;
      color: #ffdc96;
      text-align: center;
      padding: 20px;
    }

    .intro-overlay.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .intro-title {
      font-family: 'JS Wannaree', 'Pridi', serif;
      font-style: italic;
      text-shadow: 0 0 20px rgba(255,220,100,0.7);
      line-height: 1.5;
      max-width: 90vw;
      word-wrap: break-word;
    }

    .intro-title-line1 {
      font-size: 2.2rem;
      margin-bottom: -10px;
      animation: glow 2.5s ease-in-out infinite alternate;
    }

    .intro-title-line2 {
      font-size: 1.8rem;
    }

    .title-line2 {
      font-family: 'JS Wannaree', 'Pridi', serif;
      font-style: italic;
      color: #ffdc96;
      text-shadow: 0 0 20px rgba(255,220,100,0.7);
      margin-top: 2px;
      line-height: 1.5;
      max-width: 90vw;
      word-wrap: break-word;
      white-space: nowrap;  /* ✅ เพิ่มบรรทัดนี้ - ห้ามตัดบรรทัด */
      overflow: hidden;     /* ซ่อนส่วนเกิน */
      text-overflow: ellipsis;  /* แสดง ... ถ้ายาวเกิน */
      background: none;  /* ✅ ลบพื้นหลัง */
      padding: 0;  /* ✅ ลบ padding */
    }


    .enter-btn {
      margin-top: 40px;
      padding: 14px 40px;
      font-family: 'Pridi', serif;
      font-size: 1.4rem;
      font-weight: 600;
      color: #000;
      background: linear-gradient(45deg, #ffdc96, #ffd700);
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(255, 220, 100, 0.5);
      transition: all 0.3s ease;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .enter-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 30px rgba(255, 220, 100, 0.7);
      background: linear-gradient(45deg, #ffd700, #ffec8b);
    }

    .enter-btn:active {
      transform: translateY(0);
    }



    /* ไฟสปอตไลต์ */
    .spotlight {
      position: absolute; width: 900px; height: 900px; border-radius: 50%;
      pointer-events: none; filter: blur(110px); opacity: 0.7; z-index: 1;
    }
    .spotlight.left { background: radial-gradient(circle, rgba(255,220,150,0.9) 0%, transparent 60%); top: 5%; left: 10%; }
    .spotlight.right { background: radial-gradient(circle, rgba(255,200,100,0.8) 0%, transparent 60%); top: 5%; right: 10%; }

    /* เวทีโปสเตอร์ (เพิ่ม cursor grab สำหรับ drag) */
    .poster-stage {
      position: relative; width: 600px; height: 300px;
      top: 30%; transform: translateY(-50%);
      transform-style: preserve-3d;
      cursor: grab;
      user-select: none;
    }
    .poster-stage.grabbing {
      cursor: grabbing;
    }

    .poster {
      position: absolute; width: 280px; height: 420px;
      background: #fff; border: 12px solid #f8f8f8; border-radius: 16px;
      box-shadow: 0 30px 60px rgba(0,0,0,0.9); overflow: hidden;
      transition: all 1.4s cubic-bezier(0.25, 0.8, 0.25, 1);
      backface-visibility: hidden; left: 50%; top: 50%;
      transform: translate(-50%, -50%); cursor: zoom-in;
    }
    .poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
    .poster.center:hover img { transform: scale(1.05); }

    /* ตำแหน่ง 5 รูป: far-left, left, center, right, far-right */
    .poster.center {
      transform: translate(-50%, -50%) translateZ(140px) scale(1.3);
      z-index: 10; filter: brightness(1.2) drop-shadow(0 0 50px rgba(255,220,100,0.9));
      box-shadow: 0 40px 80px rgba(0,0,0,0.95), 0 0 60px rgba(255,200,100,0.7);
      /* เดิม 0 0 100px เป็น 0 0 60px - ลดรัศมีแสง */
    }
    .poster.left {
      transform: translate(-50%, -50%) translateX(-350px) translateZ(-50px) scale(0.85) rotateY(25deg);
      z-index: 8; filter: brightness(0.65) blur(2px); opacity: 0.90;
    }
    .poster.right {
      transform: translate(-50%, -50%) translateX(350px) translateZ(-50px) scale(0.85) rotateY(-25deg);
      z-index: 8; filter: brightness(0.65) blur(2px); opacity: 0.90;
    }
    .poster.far-left {
      transform: translate(-50%, -50%) translateX(-650px) translateZ(-150px) scale(0.6) rotateY(40deg);
      z-index: 5; filter: brightness(0.4) blur(6px); opacity: 0.90;
    }
    .poster.far-right {
      transform: translate(-50%, -50%) translateX(650px) translateZ(-150px) scale(0.6) rotateY(-40deg);
      z-index: 5; filter: brightness(0.4) blur(6px); opacity: 0.90;
    }

    /* ข้อความ 2 บรรทัด ด้านบน กลางจอ */
    .title-container {
      position: absolute;
      top: 8vh;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 15;
      pointer-events: none;
      transition: opacity 0.8s ease;
    }

    #main-title[style*="opacity: 1"] {
      opacity: 1 !important;
    }

     {
      font-size: 2.5rem;
      font-weight: 600;
      color: #ffdc96;
      text-shadow: 0 0 30px rgba(255,220,100,0.9);
      animation: glow 2.5s ease-in-out infinite alternate;
    }

    /* ใช้ฟอนต์ JS-Wannaree-Italic */
    .title-line1, .title-line2 {
      font-family: 'JS Wannaree', 'Pridi', serif;
      font-style: italic;
      color: #ffdc96;
      text-shadow: 0 0 20px rgba(255,220,100,0.7);
      margin-top: 2px;
      line-height: 1.5;
      max-width: 90vw;
      word-wrap: break-word;
    }
    .title-line1{
      font-size: 2rem;
      margin-bottom: -12px
    }
    .title-line2{
      font-size: 2.5rem;
    }


    @keyframes glow {
      from { text-shadow: 0 0 20px rgba(255,220,100,0.9); }
      to { text-shadow: 0 0 60px rgba(255,200,100,1); }
    }

    /* Modal ขยายรูป */
    .modal {
      display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.95); justify-content: center; align-items: center;
      z-index: 1000; backdrop-filter: blur(10px);
    }
    .modal img { max-width: 90%; max-height: 90%; border: 8px solid #fff; border-radius: 12px; box-shadow: 0 0 60px rgba(255,220,100,0.6); }
    .modal-close { position: absolute; top: 20px; right: 30px; font-size: 3rem; color: #ffdc96; cursor: pointer; text-shadow: 0 0 20px #ffdc96; }


  /* หน้าจอ 800x600 และ Tablet */
  @media screen and (max-width: 1024px) {
    .poster-stage {
      width: 900px;
      height: 450px;
      top: 45%;
    }
    
    .poster {
      width: 200px;
      height: 300px;
      border: 8px solid #f8f8f8;
    }
    
    .poster.center {
      transform: translate(-50%, -50%) translateZ(100px) scale(1.2);
    }
    
    .poster.left {
      transform: translate(-50%, -50%) translateX(-280px) translateZ(-40px) scale(0.8) rotateY(25deg);
    }
    
    .poster.right {
      transform: translate(-50%, -50%) translateX(280px) translateZ(-40px) scale(0.8) rotateY(-25deg);
    }
    
    .poster.far-left {
      transform: translate(-50%, -50%) translateX(-500px) translateZ(-120px) scale(0.55) rotateY(40deg);
    }
    
    .poster.far-right {
      transform: translate(-50%, -50%) translateX(500px) translateZ(-120px) scale(0.55) rotateY(-40deg);
    }
    
    .title-line1 {
      font-size: 1.4rem;
    }
    
    .title-line2 {
      font-size: 1.8rem;
    }
    
    .intro-title-line1 {
      font-size: 1.8rem;
    }
    
    .intro-title-line2 {
      font-size: 1.4rem;
    }
    
    .spotlight {
      width: 600px;
      height: 600px;
    }
  }

  /* มือถือแนวนอน (Landscape) */
  @media screen and (max-width: 768px) and (orientation: landscape) {
    .poster-stage {
      width: 700px;
      height: 350px;
      top: 50%;
    }
    
    .title-line2 {
      font-size: 0.85rem;  /* เดิม 1rem - ลดเล็กลงอีกนิด */
      white-space: nowrap;
    }

    .poster {
      width: 150px;
      height: 225px;
      border: 6px solid #f8f8f8;
    }
    
    .poster.center {
      transform: translate(-50%, -50%) translateZ(80px) scale(1.15);
    }
    
    .poster.left {
      transform: translate(-50%, -50%) translateX(-220px) translateZ(-30px) scale(0.75) rotateY(25deg);
    }
    
    .poster.right {
      transform: translate(-50%, -50%) translateX(220px) translateZ(-30px) scale(0.75) rotateY(-25deg);
    }
    
    .poster.far-left {
      transform: translate(-50%, -50%) translateX(-400px) translateZ(-100px) scale(0.5) rotateY(40deg);
    }
    
    .poster.far-right {
      transform: translate(-50%, -50%) translateX(400px) translateZ(-100px) scale(0.5) rotateY(-40deg);
    }
    
    .title-container {
      top: 5vh;
    }
    
    .title-line1 {
      font-size: 1.1rem;
      margin-bottom: -8px;
    }
    
    .title-line2 {
      font-size: 1.4rem;
    }
    
    .volume-control {
      bottom: 10px;
      right: 10px;
      padding: 6px 10px;
    }
    
    .volume-btn {
      font-size: 1.4rem;
      margin: 0 6px;
    }
    
    .volume-slider {
      width: 70px;
    }
  }

  /* มือถือแนวตั้ง (Portrait) */
  @media screen and (max-width: 768px) and (orientation: portrait) {
    body {
      perspective: 800px;
    }
    .title-container {
      top: 6vh; 
    }
    
    .title-line1 {
      font-size: 1rem; 
      margin-bottom: -8px;
    }
    .title-line2 {
      font-size: 1rem; 
    }
    
    .intro-title-line1 {
      font-size: 1.4rem; 
    }
    
    .intro-title-line2 {
      font-size: 1.05rem; 
    }

    .poster-stage {
      width: 100%;
      max-width: 500px;
      height: 400px;
      top: 30%; /* ตำแหน่งรูป */
    }
    
    .poster {
      width: 160px; /* เพิ่มจาก 140px */
      height: 240px; /* เพิ่มจาก 210px (อัตราส่วน 2:3) */
      border: 5px solid #f8f8f8;
      border-radius: 10px;
    }
    
    .poster.center {
      transform: translate(-50%, -50%) translateZ(70px) scale(1.5); /* เพิ่ม scale จาก 1.35 เป็น 1.5 */
      box-shadow: 0 20px 40px rgba(0,0,0,0.9), 0 0 60px rgba(255,200,100,0.6);
    }
    .poster.left {
      transform: translate(-50%, -50%) translateX(-170px) translateZ(-30px) scale(0.75) rotateY(25deg);
    }
    
    .poster.right {
      transform: translate(-50%, -50%) translateX(170px) translateZ(-30px) scale(0.75) rotateY(-25deg);
    }
    
    .poster.far-left {
      transform: translate(-50%, -50%) translateX(-310px) translateZ(-80px) scale(0.5) rotateY(45deg);
    }
    
    .poster.far-right {
      transform: translate(-50%, -50%) translateX(310px) translateZ(-80px) scale(0.5) rotateY(-45deg);
    }
    
    .title-container {
      top: 6vh;
      padding: 0 15px;
    }
    
    .title-line1 {
      font-size: 1rem;
      margin-bottom: -8px;
    }
    
    .title-line2 {
      font-size: 1.3rem;
    }
    
    .intro-title-line1 {
      font-size: 1.5rem;
    }
    
    .intro-title-line2 {
      font-size: 1.2rem;
    }
    
    .enter-btn {
      font-size: 1.1rem;
      padding: 12px 30px;
    }
    
    .volume-control {
      bottom: 10px;
      right: 10px;
      padding: 6px 8px;
      flex-direction: column;
      border-radius: 20px;
    }
    
    .volume-btn {
      font-size: 1.3rem;
      margin: 5px 0;
    }
    
    .volume-slider {
      width: 60px;
      transform: rotate(-90deg);
      margin: 25px 0;
    }
    
    .spotlight {
      width: 400px;
      height: 400px;
    }
    
    .spotlight.left {
      left: -10%;
    }
    
    .spotlight.right {
      right: -10%;
    }
    
    .modal img {
      max-width: 95%;
      max-height: 80%;
      border: 4px solid #fff;
    }
    
    .modal-close {
      font-size: 2.5rem;
      top: 10px;
      right: 15px;
    }
  }

  /* มือถือเล็กมาก */
  @media screen and (max-width: 480px) {
    .poster-stage {
      max-width: 380px;
      height: 350px;
    }
    
    .poster {
      width: 100px;
      height: 150px;
    }
    
    .poster.left {
      transform: translate(-50%, -50%) translateX(-130px) translateZ(-25px) scale(0.65) rotateY(28deg);
    }
    
    .poster.right {
      transform: translate(-50%, -50%) translateX(130px) translateZ(-25px) scale(0.65) rotateY(-28deg);
    }
    
    .poster.far-left {
      transform: translate(-50%, -50%) translateX(-240px) translateZ(-70px) scale(0.4) rotateY(50deg);
    }
    
    .poster.far-right {
      transform: translate(-50%, -50%) translateX(240px) translateZ(-70px) scale(0.4) rotateY(-50deg);
    }
    
    .title-line1 {
      font-size: 0.9rem;
    }
    
    .title-line2 {
      font-size: 1.1rem;
    }
    
    .intro-title-line1 {
      font-size: 1.3rem;
    }
    
    .intro-title-line2 {
      font-size: 1rem;
    }
  }