html,
body {
  height: 100%;
  margin: 0;
}

body {
  font-family: Arial, Verdana, sans-serif;
  cursor: grab;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  background-color: #1e1a33;
}


div,
i {
  user-select: none;
  pointer-events: none;
}

i {
  position: fixed;
  color: white;
  top: -10%;
  z-index: 9999;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}

@keyframes snowflakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}

@keyframes snowflakes-shake {
  0% {
    transform: translateX(0px);
  }
  50% {
    transform: translateX(80px);
  }
  100% {
    transform: translateX(0px);
  }
}

/* Audio Control Button */
.audio-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 5px solid white;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
  user-select: none;
}

.audio-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.audio-btn:active {
  transform: scale(0.95);
}

.audio-icon {
  width: 24px;
  height: 24px;
  fill: white;
  pointer-events: none;
}

/* Instructions Button */
.instructions-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.2);
  border: 5px solid white;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
  user-select: none;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.instructions-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.instructions-btn:active {
  transform: scale(0.95);
}

/* Instructions Modal */
.instructions-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 10001;
  
/* merged scroll and padding in single block */
  
   display: none; 
   align-items: center; 
   justify-content: center; 
   pointer-events: auto; 
   overflow-y: auto; /* Add scroll to modal */ 
   padding:20px 0; /* Add padding for mobile */ 
}

.instructions-modal.active {
  display:flex;
}

.instructions-content {
  background-color:#0d7154; 
border:3px solid white; 
border-radius:20px; 
padding:10px; 
margin:10px; 
max-width:90%; 
width:400px; 
max-height:85vh; /* Limit height */
overflow-y:auto; /* Add scroll to content */
color:white; 
position:relative; 
pointer-events:auto; 
user-select:text; 
}

.instructions-content::-webkit-scrollbar {
    width:8px; 
}

.instructions-content::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.1); 
    border-radius:10px; 
}

.instructions-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.5); 
    border-radius:10px; 
}

.instructions-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.7); 
}

.instructions-content h2 {
    margin-top:0; 
    text-align:center; 
    font-size:2em; 
    color:#fff; 
}

.instructions-content p {
    line-height:1.6; 
    margin:15px 0; 
    font-size:1.6em; 
}

.instructions-content ul {
    list-style:none; 
    padding:0; 
    margin:20px 0; 
}

.instructions-content li {
    margin:10px 0; 
    padding-left:25px; 
    position:relative; 
    line-height:1.5; /* added line-height from last block */
}

.instructions-content li::before {
    content:"🎅"; 
    position:absolute; 
    left:0; 
}

/* Tamil text styling */
.tamil-text {
    font-family:'Anek Tamil', sans-serif; 
    font-size:1.1em; 
    line-height:1.8; 
}

.tamil-text h2,
.tamil-text li,
.tamil-text p {
    font-family:'Anek Tamil', sans-serif; 
}

/* Language toggle button */
.lang-toggle {
    position:absolute; 
    top:15px; 
    left:50px; 
    background-color:rgba(255,255,255,0.2); 
    border:2px solid white; 
    border-radius:20px; 
    padding:5px 15px; 
    color:white; 
    cursor:pointer; 
    font-weight:bold; 
    font-size:14px; 
    transition:all .3s ease; 
    pointer-events:auto; 
}

.lang-toggle:hover {
    background-color:rgba(255,255,255,0.4); 
    transform:scale(1.05); 
}

.close-btn {
    position:absolute; 
    top:10px; 
    right:15px; 
    font-size:30px; 
    cursor:pointer; 
    color:white; 
    background:none; 
    border:none; 
    pointer-events:auto; 
}

.close-btn:hover {
    color:#CC231E; 
}

/* Hide language sections */
.lang-section {
    display:none; 
}

.lang-section.active {
    display:block; 
}

/* Globe Button (below audio button) */
.globe-btn {
   position : fixed ;
   top :100px ;
   left :20px ;
   width :60px ;
   height :60px ;
   background-color :rgba(255,255,255,0.2) ;
   border :5px solid white ;
   border-radius :50% ;
   cursor :pointer ;
   z-index :10000 ;
   display :flex ;
   align-items :center ;
   justify-content :center ;
   transition :all .3s ease ;
   pointer-events :auto ;
   user-select :none ;
}

.globe-btn:hover {
   background-color :rgba(255,255,255,0.3) ;
   transform :scale(1.1) ;
}

.globe-btn:active {
   transform :scale(0.95) ;
}

.globe-icon {
   width :24px ;
   height :24px ;
   fill :white ;
   pointer-events :none ;
}

/* Book Button (below instructions button) */
.book-btn {
   position : fixed ;
   top :100px ;
   right :20px ;
   width :60px ;
   height :60px ;
   background-color :rgba(255,255,255,0.2) ;
   border :5px solid white ;
   border-radius :50% ;
   cursor :pointer ;
   z-index :10000 ;
   display :flex ;
   align-items :center ;
   justify-content :center ;
   transition :all .3s ease ;
   pointer-events :auto ;
   user-select :none ;
}

.book-btn:hover {
   background-color :rgba(255,255,255,0.3) ;
   transform :scale(1.1) ;
}

.book-btn:active {
   transform :scale(0.95) ;
}

.book-icon {
   width :24px ;
   height :24px ;
   fill :white ;
   pointer-events :none ;
}

/* Combined media query for max-width=768px */
@media (max-width:768px) {
  
.audio-btn,
.instructions-btn,
.globe-btn,
.book-btn {
    width :60px ;
    height :60px ;
}

/* Positions for left side buttons */
.audio-btn,
.globe-btn {
    left :15px ;
}

/* Positions for right side buttons */
.instructions-btn,
.book-btn {
    right :15px ;
}

/* Top positions combined */
.audio-btn,
.instructions-btn {
    top :15px ;
}
.globe-btn {
    top :95px ;
}
.book-btn {
    top :95px ;
}

/* Icons size */
.audio-icon,
.globe-icon,
.book-icon {
    width :24px ;
    height :24px ;
}

/* Instructions button font size */
.instructions-btn {
    font-size :24px ;
}

/* Instructions content responsive adjustments */
.instructions-content {
    padding :10px ;
    width :90% ;
    max-height :80vh ; /* merged max-height from multiple blocks */
}

/* Instructions content text sizes */
.instructions-content h2 {
    font-size :1.5em ;
}

.instructions-content p,
.instructions-content li {
    font-size :0.9em ;
}

/* Language toggle adjustments */
.lang-toggle {
    top :12px ;
    left :45px ;
    padding :4px 10px ;
    font-size :12px ;
}
}