html {
    box-sizing: border-box;
    --bgColorMenu : #1d1d27;
    --duration: .7s;    
    font-size: 16px;
}

html *,
html *::before,
html *::after {
    box-sizing: inherit;
}

.introContainer {
    width: 100%;
    height: 100%;
    display: flex; /* Enable Flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: flex-start; /* Align content to the top vertically */
    align-items: center; /* Align content to the left horizontally */
}

.mainDisplayHeading {
    position: relative;
    margin-top: 6.5%;
    text-align: center;
    font-size: 2rem;
    color: black;
    font-family: sans-serif;
    height: auto;
    width: 100%;
}

#animation-container {
    width: 90%; 
    height: 90%; 
    margin: 0 auto; 
    left: 0.6%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
    visibility: visible;
    opacity: 1;
    position: relative;
    bottom: 0%;
    top: 0%;
}

.logos {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-self: center;
    gap: 30px;
}

.logos img {
    width: auto;
    height: 4.2%;
}

#WelcomeLogo {
    width: auto;
    margin-top: 3%;
    height: 3%;
}

#ImperialLogo {
    width: auto;
    margin-top: 7%;
    height: 1%;
}

.logosMainDisplay {
    position: absolute;
    top: 3.2%;
    z-index: 10;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    left: 50%;
    transform: translateX(-50%);
}

#ImperialLogo2 {
    width: auto !important;
    height: 2vh !important;
    position: absolute;
    left: 4%;
    min-height: 20px;
    margin-top: 0;
    top: 0;
}

#WelcomeLogo2 {
    width: auto !important;
    height: 5vh !important;
    position: absolute !important;
    min-height: 50px;
    margin-top: -12.5px;
    left: 22.5%;
}

#HamlynLogo {
    width: auto !important;
    height: 10.5vh !important;
    position: absolute !important;
    min-height: 100px;
    margin-top: 0;
    transition: transform 0.2s ease;
    left: 16% !important;
    vertical-align: top;
    transform: translateY(-40px);
    margin-top: 0;
    top: 0;
}

#HamlynLogo.clicked {
    animation: logoClick 0.3s ease-in-out;
}

#HamlynLogo.autoplay-active {
    animation: autoplayPulse 2s ease-in-out infinite;
}

@keyframes logoClick {
    0% { transform: translateY(-40px) scale(1); }
    50% { transform: translateY(-40px) scale(0.95); }
    100% { transform: translateY(-40px) scale(1); }
}

@keyframes autoplayPulse {
    0% {
        transform: translateY(-40px) scale(1) rotate(0deg);
    }
    25% {
        transform: translateY(-40px) scale(1.05) rotate(-2deg);
    }
    50% {
        transform: translateY(-40px) scale(1) rotate(0deg);
    }
    75% {
        transform: translateY(-40px) scale(1.05) rotate(2deg);
    }
    100% {
        transform: translateY(-40px) scale(1) rotate(0deg);
    }
}

#arrow {
    position: absolute;
    left: 99.4%;
    background-color: transparent;
} 

.arrows {
	width: 32px;
	height: 3vh;
	position: absolute;
    margin-left: 5px;
    cursor: pointer;
    min-height: 40px;
    z-index: 10000; /* Ensure it stays above the game */
    pointer-events: auto !important; /* Force the arrows button to be clickable */
}

#GameText, .arrows {
    z-index: 10010 !important;
    pointer-events: auto !important;
}

#GameText {
    position: absolute;
    top: 3%;
    right: 7%;
}

#GameText2 {
    margin-top: 2px;
    color: black;
    font-weight: 50;
    font-style: italic;
    font-size: 0.9em;
}

#checkbox {
    display: none;
}
  
.switch {
    position: relative;
    width: 70px;
    height: 70px;
    background-color: rgb(99, 99, 99);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(126, 126, 126);
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 0px 8px rgba(0, 0, 0, 0.2) inset;
    transition: 0.5s;
    
    margin-top: 40px;
    margin-bottom: 2%;
}

.switch svg {
    width: 1.2em;
  }

.switch svg path {
    fill: rgb(48, 48, 48);
  }

#checkbox:checked + .switch {
    box-shadow:
      0px 0px 1px rgb(151, 243, 255) inset,
      0px 0px 2px rgb(151, 243, 255) inset,
      0px 0px 10px rgb(151, 243, 255) inset,
      0px 0px 40px rgb(151, 243, 255),
      0px 0px 100px rgb(151, 243, 255),
      0px 0px 5px rgb(151, 243, 255);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(146, 180, 184);
  }

#checkbox:checked + .switch svg {
    filter: drop-shadow(0px 0px 5px rgb(151, 243, 255));
}

#checkbox:checked + .switch svg path {
    fill: rgb(255, 255, 255);
  }

#checkbox:active + .switch {
    transform: translate(0em, 0.1em);
    box-shadow:
      0px 0px 0.1px rgb(151, 243, 255) inset,
      0px 0px 0.2px rgb(151, 243, 255) inset,
      0px 0px 1px rgb(151, 243, 255) inset,
      0px 0px 10px rgb(151, 243, 255),
      0px 0px 50px rgb(151, 243, 255);
    border: 2px solid rgb(255, 255, 255);
    background-color: rgb(146, 180, 184);
  }

#checkbox:active + .switch svg path {
    box-shadow: 0.2em 0.2em 0.3em rgba(0, 0, 0, 0.3);
    transform: translate(0em, 0.1em);
}
  

/* Preloader animation */
#preloader.active .icon {
    animation: strok 1.5s reverse;
}

/* Ensure elements start with opacity 0 */
.rightDisplay, .leftDisplay, .mainDisplayHeading, .switch, .menu, .logos, .logosMainDisplay, #GameText{
    opacity: 0;
    transition: opacity 1s ease-in; /* Fade in transition */
    pointer-events: none; 
}

/* Ensure elements start hidden */
.rightDisplay, .leftDisplay, .menu{
    visibility: hidden;
}

/* Fade-in effect */
.fade-in {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1s ease-in-out;
    pointer-events: auto;
}

/* Fade-out effect */
.fade-out {
    opacity: 0 !important;
    transition: opacity 1s ease-in; /* Only transition opacity */
    pointer-events: none;
}

/* Hide elements after fade-out completes */
.fade-out-hidden {
    visibility: hidden !important;
}

.fade-out-text {
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}
  
.fade-in-text {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

    /* Ensure the arrows button is always clickable */
.arrows {
    pointer-events: auto !important; /* Force the arrows button to be clickable */
    z-index: 10;
}
  

.icon {
    width: 25%;
    height: auto;
    margin-top: 13px;
    margin-bottom: 13px;
    stroke: white !important;
    fill: transparent;
    stroke-width: 0.8pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    transition: fill 2.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
    position: relative;
    justify-content: center;
}

.icon.active {
    stroke: black !important;
    fill: white !important;
}

.menu {
    position: relative;
}

.menuContainer {
    width: 100vw;
    height: 10vh;
    position: relative;
    bottom: -43.5%;
}

.menu__item {
    all: unset;
    flex-grow: 1;
    z-index: 100;
    display: flex;
    flex-direction: column; 
    align-items: center;   
    justify-content: center;
    cursor: pointer;
    position: relative;
    border-radius: 50%;
    padding: 0.85em 0 1.15em;
    margin-top: -0.3em;
    margin-bottom: -0.3em;
    will-change: transform;
    transition: transform var(--timeOut, var(--duration)), border-color 0.5s ease;
    border: 2px solid transparent;
}

.menu__item::before{
    content: "";
    z-index: -1;
    width: 4.6vw;
    height: 4.6vw;
    border-radius: 50%;
    position: absolute;
    transform: scale(0);
    transition: transform var(--duration);
}

.menu__item.active {
    transform: translate3d(0, -.6vw , 0);
    border-color: var(--highlight-color);
    color: black;
    background-color: black;
}

.menu__item.active::before{
    transform: scale(1);
}

.menu__item.active .icon {
    stroke: black !important;
    fill: white !important;
}

#menu1 {
    margin: 10;
    display: flex;
    width: 9.3vw; /* Adjusted width to fit on the left */
    height: auto;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 1.8vw;
    padding-right: 1.8vw;
    position: absolute;
    bottom: 1%;
    left: 2%; /* Align to the left side */
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    border-radius: 10px;

    z-index: 999;
}

 #menu2 {
    margin: 10;
    display: flex;
    width: 20.9vw; 
    height: auto;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-left: 1.5vw;
    padding-right: 1.5vw;
    position: absolute;
    bottom: 1%;
    left: 12.3%; 
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    border-radius: 10px;

    z-index: 999;
}

#menu3 {
    margin: 10;
    display: flex;
    width: 31.5vw;
    height: auto;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-left: 1.8vw;
    padding-right: 1.8vw;
    position: absolute;
    bottom: 1%;
    left: 34.3%; 
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    border-radius: 10px;

    z-index: 999;
}

#menu4 {
    margin: 10;
    display: flex;
    width: 20.9vw; 
    height: auto;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-left: 1.8vw;
    padding-right: 1.8vw;
    position: absolute;
    bottom: 1%;
    right: 12.3%;
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    border-radius: 10px;

    z-index: 999;
}

#menu5 {
    margin: 10;
    display: flex;
    width: 9.3vw; 
    height: auto;
    font-size: 1.2rem;
    padding-top: 5px;
    padding-left: 1.8vw;
    padding-right: 1.8vw;
    position: absolute;
    bottom: 1%;
    right: 2%; 
    align-items: center;
    justify-content: center;
    background-color: var(--bgColorMenu);
    border-radius: 10px;
    z-index: 999;
} 

/* AllText */
.text {
    font-family: sans-serif;
    color: whitesmoke;
    text-align: center;
    font-size: 1.3rem;
}

#title {
    text-align: center;
    font-size: 1.8rem;
    font-weight: bolder;
    margin: 0;
    padding: 0;
}

#titleLeftDisplay {
    text-align: center;
    font-size: 1.5rem;
    font-weight: bolder;
    margin-top: 10px;
    width: auto;  /* Adjust width as needed */
    margin-left: auto;
    margin-right: auto;
    display: block;  /* Ensures centering works */
}


#extratitles {
    font-size: 1.6rem;
}

#heading {
    font-size: 1.6rem;
    font-weight: bold;
    margin-right: 20px;
    margin-top: 4%;
    display: none;
}

#sub-heading {
    font-size: 1.3rem;
    margin-right: 20px;
    line-height: 1.4;
    margin-top: 7px;
}

#sub-heading2 {
    font-size: 1.2rem;
}

#sub-heading3 {
    font-size: 1.3rem;
    margin-right: 20px;
    line-height: 1.4;
}

#title, #heading, #sub-heading, #border, .rightdisplayText4 {
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    opacity: 1; /* Ensure default visibility */
}

#border {
    border-bottom: 3px solid white !important;
    margin-top: 4%;
    margin-bottom: 4%;
    width: 100%;
    align-self: flex-start;
    margin-left: -1%;
}

body{
    overflow: hidden;
    margin: 0;
    display: flex;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;

    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--duration);
    
    /* Background color */
    /* background: var(--highlight-color2); */
    background: rgba(240, 240, 240, 0.5);

    overscroll-behavior: contain;
    overflow-y: auto;
}

.reverse-animation {
    animation: strok 1.5s reverse forwards;
}

.reverse-animation .icon {
    animation: strok 1.5s forwards reverse;
}

.icon {
    transition: transform 3s ease-in;
}

.icon.animate {
    animation: strok 2.8s reverse;
}


@keyframes strok {
    100% {
        stroke-dashoffset: 400;
    }
    0% {
        stroke-dashoffset: 0;
    }
}

/* Main Containers */
.containerTest {
    margin: 0;
    width: 100vw;
    height: 100vh;
    min-height: 760px;
    top: 2%;
    bottom: 2%;
    display: flex;
    font-size: 1.5em;
    padding: 0 2.85em;
    position: fixed;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: background-color var(--duration);
    filter: blur(100);
    color: white;
    font-family: sans-serif;
    border-radius: 20px;
    z-index: 0;

    max-height: 100vh;
    overscroll-behavior: contain;
}

.rightDisplay {
    padding: 1.8%;
    padding-right: 1.9%;
    width: 30vw;
    height: 74vh;
    min-height: 560px;
    top: 10%;
    right: 2%;
    display: flex;
    font-size: 1rem;
    position: absolute;
    flex-direction: column;
    color: white;
    font-family: sans-serif;
    border-radius: 10px;
    border: 4px solid black;
    text-align: left;
    overscroll-behavior: contain;
    overflow-y: auto;
    background: linear-gradient(to bottom, gray, black);
    transition: all 1s ease-in-out;
    opacity: 0;
    visibility: hidden;
}

.rightDisplay.fade-in {
    opacity: 1;
    visibility: visible;
}

.rightDisplay.fade-out {
    opacity: 0;
    visibility: hidden;
}

/* Customizing the scrollbar itself */
::-webkit-scrollbar {
    width: 9px; /* Width of vertical scrollbar */
    height: 10px; /* Height of horizontal scrollbar */
}

/* Customizing the scrollbar track */
::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Light background color */
    border-radius: 20px;
}

/* Customizing the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgb(0, 0, 0), rgb(100, 100, 100));
    border-radius: 20px;
}

/* Thumb hover effect */
::-webkit-scrollbar-thumb:hover {
    background-color: #555; /* Darker thumb color on hover */
}

/* Apply to parent container */
.custom-scroll-container {
    width: 300px;
    height: 200px;
    overflow: auto; /* Enable scrolling */
    border: 10px solid #ccc; /* Border width of the parent */
    padding: 10px; /* Padding inside the container */
    box-sizing: border-box; /* Include border and padding in the element's size */
    position: relative; /* For positioning */
}



.rightDisplay .content {
    max-height: 70vh;  
    overflow-y: auto;  
    padding-right: 10px;
}

.leftDisplay {
    width: 65%;
    height: 74vh;
    min-height: 560px;
    top: 10%;
    bottom: 2%;
    left: 2%;
    font-size: 1.5em;
    position: absolute;
    border: 3px solid black;
    font-family: sans-serif;
    border-radius: 14px;
    z-index: 1;
    background: linear-gradient(to bottom, rgb(70, 70, 70), rgba(0, 0, 0, 0.535));

    display: flex;
    flex-direction: row; 
    align-items: flex-end;
    justify-content: flex-start; 
    padding: 10px; 
    padding-bottom: 0px;

    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth; /* Smooth scroll for better UX */
}


.leftDisplay::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Edge */
}

.categoryHeadingsContainer {
    position: absolute; /* Make it stick to the parent */
    top: -6.3%;  /* Aligns it at the very top */
    left: 0%;
    
    display: flex;
    flex-direction: row;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Align content vertically */
    line-break: strict;

    width: 100%;
    height: 0%;
}


.categoryHeadings {
    font-size: 1.5rem;
    font-weight: bolder;
    color: white;
    /* background: linear-gradient(to bottom, whitesmoke, white);
    background-size: 200%; */
    opacity: 1 !important;
    
    width: auto; /* Let the content decide width */
    padding: 0.3vw 20%; /* Add some padding instead of forcing width */
    
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    white-space: nowrap;

    /* Borders */
    /* border-left: 0.2vw dashed white;
    border-right: 0.2vw dashed white; */
}


.headingsDivider {
    position: absolute;
    height: 130%;
    
    border-left: 3px solid black; /* Ensures only left border appears */
    border-top: none;
    border-right: none;
    border-bottom: none;
    z-index: -2;
    opacity: 1;
    top: -15%;
    left: -8.5px;
}

#extraMarginRight {
    margin-right: 14px;
}    

.subCategory {
    width: 10vw; 
    height: 90%; 
    min-width: 200px;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 2;
    text-align: center;
    opacity: 0.9;
    position: relative;
    cursor: pointer;
    transition: border-color 0.6s ease, transform 0.6s ease, box-shadow 0.6s ease;
    background: linear-gradient(to bottom, gray, black);
    background-size: 200% 200%;
    margin-right: 7px;
    margin-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;
    align-items: center;
    padding-top: 10px; 
    padding-bottom: 0px;
}

.subCategory.highlight {
    transform: scale(1.0);
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
    opacity: 1;
    border: 3px solid var(--highlight-color);
}

#FullHeight {
    height: 100%;
    margin-top: 7px;
    width: 100%;
    /* left: 7px; */
    bottom: 0px;
    display: flex; 
    flex-direction: column;
    justify-content: flex-end; 
    align-items: flex-start; 
    position: relative;
}


.subCategory:hover {
    transform: scale(1); /* Slight zoom */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow */
    opacity: 1;
}

.end-spacer {
    flex-shrink: 0; 
    width: 70vw; 
    height: 1px;
  }

#categoryVideo {
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 1000px;

    position: relative !important; 
    top: 0% !important; 
    left: 50%;
    transform: translateX(-50%);
    margin-top: 5px;
    margin-bottom: 5%;
    border: 3px solid black;

    opacity: 0;
    transition: opacity 1s ease;
}
  
.subCategoryPart {
    width: 100%; 
    height: auto;
    border: 3px solid black;
    border-radius: 6px;
    z-index: 3;
    background-color: white;
    cursor: pointer;
    display: inline-flex; 
    flex-direction: row; 
    justify-content: center;
    align-items: center; 
    padding: 15px; 
    margin-bottom: 7px;
    margin-left: 7px;
    margin-right: 7px;
    color: black !important;
    
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.subCategoryPart:hover {
    font-weight: bolder;

    border: 4px solid black;
    transform: scale(1.02); /* Slight zoom */
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.subCategoryPart.active {
    background: linear-gradient(120deg, var(--highlight-color) 60%, rgba(255,255,255,0.35) 100%) !important;
    color: #fff !important;
    font-weight: bold;
    border-color: #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10), 0 1.5px 8px rgba(0,0,0,0.08) !important;
    opacity: 1 !important;
    transition: opacity 0.4s ease, color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(1.5px);
    border: 1.5px solid rgba(255,255,255,0.5);
}

.ph-arrow-u-up-left {
    position: relative;
    scale: 200%;
}

#whiteonhover.subCategoryPart.active{
    color: white;
}

#italic{
    font-style: italic;
    font-size: large;
    font-weight: lighter;
}

.subCategoryPartContinuous {
    width: 1005%;
    height: auto;
    max-height: fit-content;
    border: 3px solid black;
    border-radius: 6px;
    z-index: 10;  
    background-color: rgba(255, 255, 255, 1);
    opacity: 0.5 !important;
    cursor: pointer;

    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: flex-start; 
    padding: 15px;
    max-height: 80px;
    margin-bottom: 7px;
    color: black;

    transition: opacity 0.3s ease;
}

@media screen and (max-height: 55em) {
    .subCategoryPartContinuous{
        padding: 3%;
    }
    .subCategory{
        min-height: fit-content;
    }
    #FullHeight {
        height: auto;
    }
    .text{
        font-size: 1.1rem;
    }
    #title{
        font-size: 1.4rem;
    }
    #extratitles{
        font-size: 1.4rem;
    }
    #heading{
        font-size: 1.2rem;
    }
    #sub-heading{
        font-size: 1.1rem;
    }
    #sub-heading2{
        font-size: 1rem;
    }
    #sub-heading3{
        font-size: 1.1rem;
    }
}


.subCategoryPartContinuous:hover {
    font-weight: bolder;
    opacity: 0.8 !important;
    transition: opacity 0.3s ease;

    border: 4px solid black;
    transform: scale(1.001); /* Slight zoom */
    transition: transform 0.4s ease, border-color 0.3s ease;
}

.subCategoryPartContinuous.active {
    background: linear-gradient(120deg, var(--highlight-color) 60%, rgba(255,255,255,0.35) 100%) !important;
    color: #fff !important;
    font-weight: bold;
    border-color: #e0e0e0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.10), 0 1.5px 8px rgba(0,0,0,0.08) !important;
    opacity: 1 !important;
    transition: opacity 0.4s ease, color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
    backdrop-filter: blur(1.5px);
    border: 1.5px solid rgba(255,255,255,0.5);
}

#QMS {
    z-index: 900;
}

.menu__border{
    left: 0.2%;
    bottom: 99%;
    width: 9vw;
    height: 2.5vw;
    position: absolute;
    clip-path: url(#menu);
    will-change: transform;
    background-color: var(--bgColorMenu);
    transition: transform var(--timeOut , var(--duration));
    
}

.svg-container {
    width: 0;
    height: 0;
}

/* 12 */
.btn-12 {
        position: relative;
        top: 21%;
        left: 0%;
        right: 20px;
        bottom: 20px;

        width: 130px;
        height: 40px;

        font-size: 1rem;
        color: white;
        cursor: pointer;
        z-index: 999;

        border:none;
        box-shadow: none;
        line-height: 42px;

        -webkit-perspective: 230px;
        perspective: 230px;
  }

.btn-12 span {
    background: rgb(0,172,238);
    background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
    display: block;
    position: absolute;
    width: 130px;
    height: 40px;
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    border-radius: 5px;
    margin:0;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.btn-12 span:nth-child(1) {
    box-shadow:
        -7px -7px 20px 0px #fff9,
        -4px -4px 5px 0px #fff9,
        7px 7px 20px 0px #0002,
        4px 4px 5px 0px #0001;
    -webkit-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}

.btn-12 span:nth-child(2) {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    -webkit-transform-origin: 50% 50% -20px;
    -moz-transform-origin: 50% 50% -20px;
    transform-origin: 50% 50% -20px;
}

.btn-12:hover span:nth-child(1) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.btn-12:hover span:nth-child(2) {
    box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
        7px 7px 20px 0px rgba(0,0,0,.1),
        4px 4px 5px 0px rgba(0,0,0,.1);
    color: transparent;
    -webkit-transform: rotateX(-90deg);
    -moz-transform: rotateX(-90deg);
    transform: rotateX(-90deg);
}


@media screen and (max-width: 110em) {
    .text{
        font-size: 1.1rem;
    }
    #title{
        font-size: 1.4rem;
    }
    #extratitles{
        font-size: 1.4rem;
    }
    #heading{
        font-size: 1.2rem;
    }
    #sub-heading{
        font-size: 1.1rem;
    }
    #sub-heading2{
        font-size: 1rem;
    }
    #sub-heading3{
        font-size: 1.1rem;
    }
}

@media screen and (max-width: 90em) {
    .leftDisplay{
        width: 53vw;
    }
    .rightDisplay{
        width: 42vw;
        padding: 2%;
    }
}

@media screen and (max-width: 72em) {
    .text{
        font-size: .9rem;
    }

    .leftDisplay{
        width: 45vw;
    }
    .rightDisplay{
        width: 50vw;
        padding: 3%;
    }
}

@media screen and (max-height: 20em) {
    body{
        display: none !important;
    }
}

@media screen and (max-width: 62em) {
    body{
        display: none !important;
    }
}

/* .context {
    width: 100%;
    position: absolute;
    top: 50vh;

} */

.context h1{
    text-align: center;
    color: #fff;
    font-size: 50px;
}

/* .area{
    position: absolute;
    width: 100vw;
    height: 100vw;
} */

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    transition: background-color var(--duration);
    background: var(--highlight-color2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    z-index: -1;
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}

@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.arrows path {
    stroke: #2994D1;
    fill: transparent;
    stroke-width: 2px;  
    animation: arrow 2s infinite;
    -webkit-animation: arrow 2s infinite; 
}

@keyframes arrow
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

@-webkit-keyframes arrow /*Safari and Chrome*/
{
0% {opacity:0}
40% {opacity:1}
80% {opacity:0}
100% {opacity:0}
}

.arrows path.a1 {
    animation-delay:-1s;
    -webkit-animation-delay:-1s; /* Safari 和 Chrome */
}

.arrows path.a2 {
    animation-delay:-0.5s;
    -webkit-animation-delay:-0.5s; /* Safari 和 Chrome */
}

.arrows path.a3 {   
    animation-delay:0s;
    -webkit-animation-delay:0s; /* Safari 和 Chrome */
}

.rightDisplayHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  margin-top: 0px;
  margin-bottom: 1%;
}

#rightDisplayIcon {
    width: 3.5em;
    height: 3.5em;
    opacity: 1;
    stroke: white !important;
    stroke-width: 1;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: strok 2.8s reverse forwards;
}

#rightDisplayIcon.active {
    stroke: var(--highlight-color);
    animation: continuousDraw 10s linear infinite;
}

#rightDisplayIcon.active path {
    stroke: var(--highlight-color);
    fill: white;
    animation: fillTransition 0.5s ease-in-out forwards;
}

@keyframes continuousDraw {
    0% {
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
    }
    50% {
        stroke-dasharray: 400;
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dasharray: 400;
        stroke-dashoffset: 400;
    }
}

@keyframes fillTransition {
  0% {
    fill: transparent;
  }
  100% {
    fill: white;
  }
}

#menu1 .menu__item.active {
    border-color: white !important;
}

#menu5 .menu__item.active {
    border-color: white !important;
}

.subCategory .icon {
    width: 25%;
    height: auto;
    margin-top: 13px;
    margin-bottom: 13px;
    stroke: white !important;
    fill: transparent;
    stroke-width: 0.8pt;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 400;
    transition: fill 2.5s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s ease;
}

.subCategory .icon.active,
.subCategory.highlight .icon {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: strok 2.8s reverse forwards;
    stroke: black !important;
    fill: white !important;
}

.subCategory.highlight .icon.active {
    stroke: var(--highlight-color);
    animation: continuousDraw 14s linear infinite;
    stroke: black !important;
    fill: white !important;
}

.control-icon {
    width: 48px;
    height: 48px;
    margin-top: -10px;
    cursor: pointer;
    fill: #333;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 5px 5px 10px #d9d9d9,
                -5px -5px 10px #ffffff;
}

.control-icon:hover {
    transform: translateY(-2px);
    box-shadow: 6px 6px 12px #d9d9d9,
                -6px -6px 12px #ffffff;
    border-color: #0390b7;
    fill: #0390b7;
}

.control-icon:active {
    transform: translateY(0);
    box-shadow: inset 5px 5px 10px #d9d9d9,
                inset -5px -5px 10px #ffffff;
}

.control-icon.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#playIcon {
    margin-right: 2px;
}

#pauseIcon {
    margin-left: 2px;
}

#playIcon.active, #pauseIcon.active {
    border-color: #0390b7;
    fill: #0390b7;
}

#autoplayIcon.active {
    animation: rotate 12s linear infinite;
    border-color: #0390b7;
    fill: #0390b7;
}

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

#container {
    position: fixed !important;
    top: 70px !important;
    left: 0 !important;
    width: 100vw !important;
    height: calc(100vh - 70px) !important;
    transition: opacity 1s ease-in-out !important;
}

#container.visible {
    opacity: 1;
}

#container #game {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: none !important;
    top: 0 !important;
    height: 100vh !important;
    transition: opacity 1s ease-in-out !important;
}

/* Override fade-out for arrows and GameText */
.arrows.fade-out,
#GameText.fade-out {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

#score {
    position: absolute;
    top: 1.4% !important;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5em;
    color: #333;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    opacity: 1;
    z-index: 100;
    text-align: center;
}

#instructions {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    padding: 18px 40px;
    border-radius: 24px;
    color: #333;
    text-align: center;
    opacity: 1;
    z-index: 100;
    max-width: 900px;
    width: auto;
    min-width: 200px;
    word-break: break-word;
    font-size: 1em;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 1.5px 8px rgba(0,0,0,0.18);
}

.back-arrow-click-area {
    position: fixed;
    top: 0;
    right: 0;
    width: 220px;
    height: 100px;
    pointer-events: none;
    z-index: 10009;
}

#game, .drop-zones-container, .regulatory-card {
    z-index: 1 !important;
}

.game-over {
    transition: opacity 1s ease-in-out !important;
}

.drop-zones-container {
    margin-top: 45px !important;
    transition: opacity 1s ease-in-out !important;
}

/* Scale down interface for smaller screens */
@media screen and (max-height: 750px) {
    html {
        font-size: 15px;
    }
    .containerTest {
        transform: scale(0.9);
        transform-origin: top center;
        
    }
    
    .leftDisplay, .rightDisplay {
        top: 12%;
        transform: scale(0.9);
        transform-origin: top center;
    }
    .rightDisplay {
        width: 34%;
    }
    .menuContainer {
        bottom: -40%;
    }
    
    .drop-zones-container {
        margin-top: 30px;
    }
    
    #score {
        top: 10px !important;
    }
    
    #instructions {
        bottom: 30px;
    }
    
    .menu__border {
        display: none !important;
    }
}

/* Even smaller screens */
@media screen and (max-height: 650px) {

    .drop-zones-container {
        margin-top: 20px;
    }
    .menuContainer {
        bottom: -38%;
    }
}

/* Large screens (1440px and up) */
@media screen and (min-width: 90em) {
    .containerTest {
        padding: 0 2.85em;
    }
}

/* Medium screens (1024px to 1439px) */
@media screen and (max-width: 89.9375em) {
    html {
        font-size: 15px;
    }
    
    .containerTest {
        padding: 0 2em;
    }
    
    .leftDisplay {
        width: 54%;
    }
    
    .rightDisplay {
        width: 40%;
    }
}

/* Small screens (768px to 1023px) */
@media screen and (max-width: 63.9375em) {
    html {
        font-size: 14px;
    }
    
    .containerTest {
        padding: 0 1.5em;
    }

    .leftDisplay, .rightDisplay {
        top: 12%;
        transform: scale(0.9);
        transform-origin: top center;
    }
    
    .leftDisplay {
        width: 52%;
    }
    
    .rightDisplay {
        width: 42%;
    }
    
    .menuContainer {
        bottom: -38%;
    }
}

/* Hide interface for very small screens */
@media screen and (max-width: 47.9375em) and (max-height: 500px) {
    body {
        display: none !important;
    }
}

@media screen and (max-width: 1420px) {
  #HamlynLogo {
    display: none;
  }
  #WelcomeLogo2 {
    display: none;
  }
}

/* Quiz modal */
.quiz-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.quiz-content {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    z-index: 10000;
    position: relative;
    border: 2px solid #e0e0e0;
    box-shadow: 8px 8px 16px #d9d9d9,
                -8px -8px 16px #ffffff;
}

.quiz-content h3 {
    color: #333;
    font-size: 1.2em;
    margin-bottom: 25px;
    line-height: 1.4;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
}

.quiz-btn {
    background: #fff !important;
    color: #333 !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 12px !important;
    box-shadow: 5px 5px 12px #e9e9e9, -5px -5px 12px #fff !important;
    padding: 15px 20px !important;
    margin-bottom: 8px !important;
    outline: none !important;
    font-weight: 500 !important;
    font-size: 1em !important;
    text-align: left !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(.4,0,.2,1) !important;
}

.quiz-btn:hover, .quiz-btn:focus {
    border-color: #0390b7 !important;
    color: #0390b7 !important;
    background: #fafdff !important;
    box-shadow: 0 0 0 2px #e0f4ff, 5px 5px 12px #e9e9e9, -5px -5px 12px #fff !important;
}

.quiz-btn:active {
    border-color: #0390b7 !important;
    color: #0390b7 !important;
    background: #fafdff !important;
    box-shadow: inset 2px 2px 6px #e0e0e0 !important;
}

.quiz-btn.correct {
    background: linear-gradient(145deg, #e6fff6, #ccfff0);
    border-color: #4CAF50;
    color: #2E7D32;
    box-shadow: 0 0 0 2px #d6ffe6, 5px 5px 12px #e9e9e9, -5px -5px 12px #fff;
}

.quiz-btn.incorrect {
    background: linear-gradient(145deg, #ffe6e6, #ffcccc);
    border-color: #f44336;
    color: #c62828;
    box-shadow: 0 0 0 2px #ffe6e6, 5px 5px 12px #e9e9e9, -5px -5px 12px #fff;
}