@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    text-rendering: geometricPrecision;
}

@font-face {
    font-family: 'Raleway';
    src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    text-rendering: geometricPrecision;
}

@font-face {
    font-family: 'Lilita One';
    src: url('fonts/LilitaOne-Regular.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    text-rendering: geometricPrecision;
}


html{ -webkit-user-select: none; -ms-user-select: none; user-select: none; background:#000;}
body {overflow: hidden; font-family: 'Raleway', Arial, sans-serif;}


* {
    font-family: 'Raleway', Arial, sans-serif !important;
}

#mainLoader{position:absolute;z-index:5; display:none; font-size:80px; line-height:50px; color:#FFF; text-align:center; width:100%; font-family:'Raleway', sans-serif;}
 
#mainHolder{position:absolute; width:100%;height:100%;}
 
#notSupportHolder{ width:90%; margin:5% auto; position:relative; color:#FFF; text-align:center; font-size:40px; font-family:'Raleway', sans-serif; display:none;}
.notSupport{margin-top:200px;}
 


/*-- Register Input Fields -- */
#registerInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.register-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.register-input::placeholder {
    color: black;
}

.register-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Remove autofill background color */
.register-input:-webkit-autofill,
.register-input:-webkit-autofill:hover,
.register-input:-webkit-autofill:focus,
.register-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #333 !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.register-input:-moz-autofill {
    background-color: transparent !important;
    background: transparent !important;
}

.register-input:autofill {
    background-color: transparent !important;
    background: transparent !important;
}

/* Fix for date input alignment on mobile */
.register-input[type="date"] {
    text-align: left !important;
    -webkit-text-align-last: left !important;
    text-align-last: left !important;
}

/* Additional mobile-specific fixes for date inputs */
@media screen and (max-width: 768px) {
    .register-input[type="date"] {
        text-align: left !important;
        -webkit-text-align-last: left !important;
        text-align-last: left !important;
        padding-left: 15px !important;
    }

    /* Ensure date input placeholder and value align left */
    .register-input[type="date"]::-webkit-datetime-edit {
        text-align: left !important;
    }

    .register-input[type="date"]::-webkit-datetime-edit-text {
        text-align: left !important;
    }

    .register-input[type="date"]::-webkit-datetime-edit-month-field {
        text-align: left !important;
    }

    .register-input[type="date"]::-webkit-datetime-edit-day-field {
        text-align: left !important;
    }

    .register-input[type="date"]::-webkit-datetime-edit-year-field {
        text-align: left !important;
    }
}

/* Safari-compatible positioning using absolute with calculated positions */
#signInLink {
    top: 68%;
    left: calc(50% - 20px);
    width: 200px;
    margin-left: -80px;
    pointer-events: auto;
}
#signInLinkMsg {
    top: 66%;
    left: calc(50% - 20px);
    width: 200px;
    margin-left: -80px;
    pointer-events: auto;
}

#registerName {
    top: 37%;
    left: 48%;
    width: 240px;
    margin-left: -100px;
}

#registerEmail {
    top: 45%;
    left: 48%;
    width: 240px;
    margin-left: -100px;
}

#registerBirthday {
    top: 53%;
    left: 48%;
    width: 240px;
    margin-left: -100px;
}

#registerPhone {
    top: 61%;
    left: 48%;
    width: 240px;
    margin-left: -100px;
}

/*-- Login Input Fields -- */
#loginInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.login-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.login-input::placeholder {
    color: black;
}

.login-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Remove autofill background color */
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus,
.login-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #333 !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.login-input:-moz-autofill {
    background-color: transparent !important;
    background: transparent !important;
}

.login-input:autofill {
    background-color: transparent !important;
    background: transparent !important;
}

/* Login page positioning */
#registerHereLinkMsg {
    top: 66%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    pointer-events: auto;
}
#registerHereLink {
    top: 68%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
    pointer-events: auto;
}

#loginMobile {
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

/*-- OTP Input Fields -- */
#otpInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.otp-input {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    padding: 10px 15px;
    pointer-events: auto;
    box-sizing: border-box;
    text-align: center;
    /* Safari-specific fixes */
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: text;
    user-select: text;
}

.otp-input::placeholder {
    color: black;
}

.otp-input:focus {
    background: rgba(255, 255, 255, 0.1);
}

/* Remove autofill background color */
.otp-input:-webkit-autofill,
.otp-input:-webkit-autofill:hover,
.otp-input:-webkit-autofill:focus,
.otp-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #333 !important;
    background-color: transparent !important;
    background: transparent !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.otp-input:-moz-autofill {
    background-color: transparent !important;
    background: transparent !important;
}

.otp-input:autofill {
    background-color: transparent !important;
    background: transparent !important;
}

/* OTP page positioning */
#otpCode {
    top: 50%;
    left: 50%;
    width: 200px;
    margin-left: -100px;
}

/*-- Consent Privacy Link -- */
#consentInputs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.privacy-link {
    position: absolute;
    background: transparent;
    border: none;
    outline: none;
    color: #333;
    font-size: 16px;
    font-family: 'Raleway', Arial, sans-serif;
    text-decoration: underline;
    pointer-events: auto;
    cursor: pointer;
}

.privacy-link:hover {
    color: #555;
}

/* Privacy link positioning */
#privacyNoticeLink {
    top: 70%;
    left: 50%;
    width: 250px;
    margin-left: -125px;
}

/*-- Canvas Wrapper -- */
#canvasHolder{
    display:none;
    width:100%;
    max-width:1024px;
    height:100%;
    margin:auto;
    position:relative;
}

/* Support for iOS 16 with 1024x768 resolution */
@supports (-webkit-touch-callout: none) {
    #canvasHolder {
        max-width: 1024px;
        max-height: 768px;
    }
}

canvas{
    position:fixed;
}