body {
     margin: 0;
     background: #050505;
     color: white;
     font-family: Arial, sans-serif;
     height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     overflow: hidden;
 }

 .container {
     width: 85%;
 }

 h1 {
     animation: glowTitle 2s infinite alternate;
     color: #ff7900;
     font-size: 82px;
     margin-bottom: 10px;
 }

 @keyframes glowTitle {
    from {
        text-shadow: 0 0 20px rgba(255,121,0,.4);
    }
    to {
        text-shadow: 0 0 60px rgba(255,121,0,1);
    }
}

 .subtitle {
     font-size: 30px;
     color: #ccc;
     margin-bottom: 40px;
 }

 .mic {
     width: 180px;
     height: 180px;
     border-radius: 50%;
     border: 4px solid #ff7900;
     background: #111;
     color: #ff7900;
     font-size: 70px;
     cursor: pointer;
     box-shadow: 0 0 40px rgba(255, 121, 0, 0.5);
 }

 .mic.listening {
     background: #ff7900;
     color: #fff;
     animation: pulse 1s infinite;
 }

 @keyframes pulse {
     0% {
         transform: scale(1);
         box-shadow: 0 0 30px rgba(255, 121, 0, .5);
     }

     50% {
         transform: scale(1.08);
         box-shadow: 0 0 80px rgba(255, 121, 0, .9);
     }

     100% {
         transform: scale(1);
         box-shadow: 0 0 30px rgba(255, 121, 0, .5);
     }

 

 }

 .question {
     margin-top: 40px;
     font-size: 36px;
     color: #ff7900;
     min-height: 55px;
     direction: rtl;
 }

 .answer {
     margin-top: 30px;
     font-size: 38px;
     line-height: 1.6;
     min-height: 160px;
     direction: rtl;
 }

 .hint {
     margin-top: 35px;
     font-size: 26px;
     color: #aaa;
     animation: fadeHint 3s infinite;

 }

 @keyframes fadeHint {
     0% {
         opacity: .4;
     }

     50% {
         opacity: 1;
     }

     100% {
         opacity: .4;
     }
 }

 .reset {
     margin-top: 20px;
     padding: 15px 35px;
     font-size: 24px;
     border: 2px solid #ff7900;
     border-radius: 12px;
     background: transparent;
     color: #ff7900;
     cursor: pointer;
 }

 #experienceCard {
     display: none;
     margin-top: 30px;
     padding: 30px;
     border: 3px solid #ff7900;
     border-radius: 20px;
     background: #111;
 }

 #experienceCard h2 {
     color: #ff7900;
     font-size: 50px;
     margin-bottom: 10px;
 }

 #experienceCard p {
     font-size: 28px;
 }

 .startVR {
     margin-top: 20px;
     padding: 15px 40px;
     font-size: 24px;
     background: #ff7900;
     color: white;
     border: none;
     border-radius: 12px;
     cursor: pointer;
 }


 .avatar-frame {
  width: 900px;
  max-width: 90vw;
  aspect-ratio: 16 / 9;
  margin: 25px auto;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 35px rgba(255, 121, 0, 0.45);
  background: #000;
}

.avatar-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}


#avatarVideo{
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100vh;
    object-fit:cover;
    z-index:1;
    background:black;
}

#startAvatarBtn{
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 999999 !important;
  display: block !important;
  background: #ff7900 !important;
  color: #000 !important;
  font-size: 42px !important;
  padding: 28px 75px !important;
  border: none !important;
  border-radius: 60px !important;
}

#startAvatarBtn.is-hidden{
  display: none !important;
}

video {
  pointer-events: none !important;
}

.a-enter-vr,
.a-orientation-modal {
  display: none !important;
}


video,
canvas,
.a-canvas {
  pointer-events: none !important;
  touch-action: none !important;
  user-select: none !important;
}

video,
canvas,
.a-canvas,
a-scene {
  pointer-events: none !important;
  touch-action: none !important;
}


#touchBlocker{
  position: fixed;
  inset: 0;
  z-index: 998;
  background: transparent;
  display: none;
  pointer-events: auto;
  touch-action: none;
}