body {
            margin: 0;
            background: #1a1a1a;
            color: #fff;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }


        canvas {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -1;
        }
        #story {
            position: absolute;
            top: 100px;
            left: 12px;
            width: calc(60% - 40px);
            max-height: calc(100vh - 100px - 40px);
            overflow-y: auto;
            background: rgba(0, 0, 0, 0.7);
            padding: 20px;
            border-radius: 8px;
            line-height: 1.5;
            box-sizing: border-box;
 
            border: 2px solid gold;
        }
       
#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(+21.3%, -44.3%);
    background: #1a1a1a;
    padding: 15px;
    border: 2px solid #FF4500;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
    z-index: 1000;
display: none;

width: calc(41% - 40px);
 max-height: calc(100vh - 50px - 40px);

font-size: 1rem;
}

#popup-image, #popup-video {
    max-width: 400px;   
    display: none;
    margin: 10px auto;
}

#close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    color: #FF4500;
    font-weight: bold;
}

        .character {
            color: #FFD700;
            font-weight: bold;
        }
        .highlight {
            color: #FF4500;
            font-style: italic;
            text-decoration: none;
        }
        .highlight:hover {
            color: #FFA500;
        }
        .highlight-active {
            background: #FFFF00;
            color: #FF4500;
        }
        .counter {
            color: #00CED1;
        }
      





        @media (orientation: portrait) {
            #story {
                width: calc(100% - 40px);
                left: 20px;
                top: 120px; /* Adjust here if needed */
                max-height: calc(100vh - 120px - 40px);
            }


#popup-image, #popup-video {
    width: 280px;   
   
}

#popup {
   
    transform: translate(-50%, -30%);
    
    max-width: 80%;
    max-height: 50%;
    overflow: auto;
    z-index: 1000;
    display: none;
    width: calc(80%);
    max-height: calc(70vh);

}        

        }






        @media (orientation: landscape) and (max-height: 600px) {
            #story {
                width: 50%;
                left: 20px;
                top: 100px;
                max-height: calc(100vh - 100px - 40px);
            }

    #popup-image, #popup-video {
    height: 180px; 
    margin: 0px auto    
}


#popup {
   
    
    transform: translate(+8%, -45%);
    max-width: 40%;
    max-height: 90%;
    overflow: auto;
    z-index: 1000;
    display: none;
    width: calc(40%);
    max-height: calc(90vh);
    font-size: 0.8rem;
}

}







        #popup-video[loaded] {
            visibility: visible;
        }
        #popup-video::after {
            content: none;
        }
        #popup-audio {
            display: none;
        }

 

#panel-state {
    background: #333; /* Dark background for dropdown, matches #right-panel buttons */
    color: white; /* White text for readability */
    border: 2px solid #FF4500; /* Orange border to match Cartpolix theme */
    border-radius: 4px; /* Consistent with buttons */
    padding: 10px; /* Comfortable padding */
    cursor: pointer; /* Indicates interactivity */

 background-image: url('tutorial.jpg'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */ 
color: white; 

margin-bottom:10px;

font-size: 0.9rem;


}

#panel-state option {
    background: #333; /* Dark background for all options */
    color: white; /* White text for readability */
}

#panel-state option[selected] {
    background: #FF4500; /* Orange for selected option */
    color: white; /* White text */
}

#panel-state:hover, #panel-state:focus {
    background: #FF4500; /* Darker orange for hover/tap on select */
    outline: none; /* Remove default browser outline */
}

#panel-state option:hover {
    background: #FFA500; /* Brighter orange (OrangeRed) for option hover */
    color: black; /* Black text for contrast */
}




        #right-panel {

    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(+21.3%, -44.3%);
     background: rgba(26, 60, 110, 1);
    padding: 15px;
    border: 2px solid gray;
    border-radius: 10px;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;  
    display: none;
    width: calc(41% - 40px);
    max-height: calc(100vh - 50px - 40px);
    z-index: 900; 

 color: white;


 min-height: 40%;

 background-image: url('tutorial.png'); /* Replace with your image path */
    background-size: cover; /* Ensures the image covers the entire background */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */ 

        }




        #right-panel h3 {
            margin-top: 0;
        }

        #right-panel button {
            display: block;
            margin: 10px 0;
            padding: 10px;
            width: 100%;
            background: #333;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        #right-panel button:hover {
            background: green;
        }

#popup-try-it {
    display: block;
    margin: 10px auto;
    padding: 10px;
    width: 50%;
    background: green;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
}

#popup-try-it:hover {
    background: gold;
    color: green;
}

        #close-right-panel {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            color: #FF4500;
background: navy;
            font-weight: bold;
            display: none; /* Hidden by default, shown in portrait */
        }



 footer {
            background: linear-gradient(90deg, #333, #555, #333);
            color: #66e0ff;
            padding: 0.1rem;
            text-align: center;
            width: 100%;
            box-sizing: border-box;
            border: 0px solid #66e0ff;
 position: relative;

  position: fixed;
      bottom: 0;
      left: 0;        
     
      justify-content: center;
      align-items: center;

font-size: 0.9rem;

        }
        footer a {
            color: #1DA1F2;
            text-decoration: none;
            margin: 0 5px;
        }
        footer a:hover {
            color: #FFD700;
        }
        .view-counter {
            margin-top: 20px;
            color: #a0a0a0;
            font-size: 0.95em;
        }


       

        @media (orientation: landscape) {
            #right-panel {
                display: block;
            }

            #close-right-panel {
                display: none; /* No close button in landscape */
            }

        }


        @media (orientation: portrait) {
            #right-panel {
                left: 50%;
                transform: translate(-50%, -30%);
                width: calc(80%);
                max-height: calc(70vh);
            }
            #close-right-panel {
                display: block; /* Show close button in portrait */
            }
        }


        @media  (orientation: landscape)  and (max-height: 600px) {

            #right-panel {                
     
    transform: translate(+8%, -40%);

 max-width: 42%;
    max-height: 90%; 
  width: calc(42%);
    max-height: calc(90vh);  
   
    overflow: auto;  

min-height: 70%;   

padding: 5px;  

            }


footer {
font-size: 0.7rem;

}


        }




h4
{

color: white;
background-color: navy;
 background: linear-gradient(90deg, blue, green, red);
}

p2
{
background-color: rgba(0, 50, 255, 0.3);
}




  #toggle-right-panel {
            position: fixed;
            top: 10px;
            right: 10px;
            padding: 10px 20px;
            background-color: #FF4500;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            z-index: 1000;
        }
        #toggle-right-panel:hover {
            background-color: #e03e00;
        }