*{ 
    box-sizing:border-box; 
}
  :root{

    --tv-w: 80%; --tv-h: 450px;
    --dvd-w: 320px; --dvd-h: 76px;
    --slot-w: 210px; --slot-h: 18px;
    --cd: 120px;
  }

/*putang */
  @media (max-width: 900px)
  {
    :root
    { --tv-w: 100%;
         --tv-h: 500px; 
         --dvd-w: 250px;
          --dvd-h: 60px; 
          --slot-w: 170px; 
          --slot-h: 16px; 
          --cd: 90px; 
        }
  }

  @media (max-width: 600px)
  {
    :root{ 
        --tv-w: 100%; 
        --tv-h: 500px; 
        --dvd-w: 210px; 
        --dvd-h: 52px; 
        --slot-w: 140px; 
        --slot-h: 14px; 
        --cd: 76px; 
    }
  }


  body{
    margin:0;
    min-height:100vh;
    background:#1f1f1f;
    color:#fff; 
    font-family:system-ui, Arial, sans-serif;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    padding:18px;
  }
  .stack{
    display:flex;
     flex-direction:column; 
     align-items:center;
      gap:12px; 
      width: min(92vw, var(--tv-w)); 
    }
  .popup{
    background:#88ff00; 
    padding:10px 16px; 
    border:1.5px solid #3ffc00;
     border-radius:10px; 
     text-align:center;
     color: rgb(0, 0, 0);
    animation:blink 1.2s infinite; 
    font-size:clamp(12px, 2.5vw, 16px);
  }
  @keyframes blink{ 
    50%{ 
        opacity:.6;
    } 
}


  .scene{ 
    perspective: 900px;
 }


  .tv{
    width:var(--tv-w); 
    height:var(--tv-h);
     background:#000; 
     border:8px solid #b5b8b2 ;
      border-radius:10px;
    display:flex; 
    align-items:center; 
    justify-content:center; 
    overflow:hidden; 
    box-shadow:0 18px 40px rgba(65, 64, 64, 0.35);
  }
  .tv video{ 
    width:100%; 
    height:100%;
     display:none;
     }


  .dvd{
    position:relative;
     width:var(--dvd-w);
      height:var(--dvd-h); 
      background:#444; 
      border-radius:8px;
    box-shadow: inset 0 -4px 10px rgba(0,0,0,.45), 0 10px 25px rgba(0,0,0,.35);
  }
  .dvd .slot{
    position:absolute; 
    left:50%; top: 50%; 
    transform:translate(-50%,-50%);
    width:var(--slot-w); 
    height:var(--slot-h); 
    background:#191919;
     border-radius:8px;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.06), inset 0 -2px 3px rgba(0,0,0,.5);
    z-index:3; 
  }

  .dvd .bezel{
    pointer-events:none;
    position:absolute;
     left:50%; top: calc(50% - 1px); 
     transform: translate(-50%,-50%);
    width:calc(var(--slot-w) + 26px); 
    height:calc(var(--slot-h) + 10px);
    border-radius:10px; z-index:4;
    background:linear-gradient(#2d2d2d, #1b1b1b 48%, #0d0d0d 52%, #232323);
    box-shadow: 0 0 0 2px rgba(0,0,0,.25);
  }

  .led{
    position:absolute;
     right:10px;
      top:10px; 
      width:10px; 
      height:10px; 
      border-radius:50%;
    background:#3a3a3a;
     box-shadow:0 0 8px rgba(0,0,0,.6) inset;
  }
  .led.on{ 
    background:#31d158; 
    box-shadow:0 0 10px #31d158;
 }

  
  .cd{
    width:var(--cd);
    height:var(--cd); 
    border-radius:50%;
    background: conic-gradient(
      #ff5858, #ffd057, #63f363, #60e6ff, #7f7bff, #ff6df6, #ff5858);
    position:relative; 
    cursor:pointer; 
    margin-top: 8px;
    animation: spin 5s linear infinite;
    transform-style: preserve-3d;
    will-change: transform, opacity;
    z-index:2; 
  }
  .cd::before{
    content:"";
     position:absolute;
      inset:50% auto auto 50%;
    width: calc(var(--cd) * .2); 
    height: calc(var(--cd) * .2);
    transform: translate(-50%,-50%);
     border-radius:50%; background:#dcdcdc;
    box-shadow: inset 0 0 6px rgba(0,0,0,.35);
  }
  .cd::after{ 
    content:""; 
    position:absolute; 
    inset:8%; border-radius:50%;
    box-shadow: inset 0 0 20px rgba(255,255,255,.35), inset 0 0 6px rgba(0,0,0,.25);
  }

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


  .btn-reset{
    margin-top:8px; 
    background:#2b2b2b; 
    border:1px solid #555;
     border-radius:8px; 
     padding:8px 12px; color:#fff;
    cursor:pointer; font-size:14px;
     display:none;
  }

  .btn-reset:active{
     transform: translateY(1px);
      }