/*=============== FONTS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Blinker:wght@100;200;300;400;600;700;800;900&display=swap');

@font-face {
    font-family: 'browoodregular';
    src: url('../fonts/browood-regular-webfont.woff2') format('woff2'),
        url('../fonts/browood-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*=============== VARIABLES CSS ===============*/
:root {
    --thm-font: "Blinker", sans-serif;
    --thm-secondary-font: 'browoodregular';
    --thm-white: #ffffff;
    --thm-black: #000000;
    --thm-black-rgb: 0, 0, 0;
    --thm-cream: #FFEEC0;
    --thm-orange: #EA7E26;
    --thm-brown: #6D3917;
    --thm-blue: #1D2E5E;
    --thm-red: #D7292C;
    --thm-yellow: #FCDC47;
    --thm-gray: #71708B;
}

/*=============== BASE ===============*/
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    font-family: var(--thm-font);
    color: var(--thm-text);
    font-size: 16px;
    margin: 0;
    padding: 0;
}

a:active,
a:hover,
a:focus,
a:visited {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font);
    font-weight: 600;
    font-style: normal;
    line-height: 1.4;
    text-shadow: 0 0 1px var(--thm-text);
}

img {
    vertical-align: middle;
    border-style: none;
}

p {
    font-size: 16px;
    line-height: 1.2;
    color: var(--thm-text);
    font-family: var(--thm-font);
    margin-top: 0;
    margin-bottom: 0;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/*=============== REUSABLE CSS CLASSES ===============*/
.text-start {
    text-align: start;
}

.text-center {
    text-align: center;
}

.text-end {
    text-align: end;
}

.d-flex {
    display: flex;
}

.justify-content-sb {
    justify-content: space-between;
}

.mt-0 {
    margin-top: 0rem;
}

.mt-1 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 2rem;
}

.mb-0 {
    margin-bottom: 0;
}

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-3 {
    margin-bottom: 3rem;
}

.text-uppercase {
    text-transform: uppercase;
}

.w-100 {
    width: 100%;
    height: auto;
}

/*=============== CUSTOM CSS STARTS ===============*/

.page-wrapper {
    position: relative;
    margin: 0 auto;
    width: 100%;
    min-width: 300px;
    /* overflow: hidden; */
    background: linear-gradient(180deg, rgba(66, 222, 212, 1) 0%, rgba(33, 112, 232, 1) 100%);
}

.main-wrapper {
    position: relative;
    width: 100%;
    max-width: 576px;
    height: 100dvh;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(66, 222, 212, 1) 0%, rgba(33, 112, 232, 1) 100%);
}

.main-bg {
    width: 100%;
    height: 100dvh;
    object-fit: fill;
    object-position: center;
}

.full-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.top-cloud {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 128px;
    width: 100%;
    height: auto;
    z-index: 1;
}

.container-main {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    height: calc(100% - 48px);
}

.logo-splash-box {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: 2rem;
}

.logo-splash {
    max-width: 80px;
    width: 100%;
    height: auto;
}

.unleash-naruto {
    max-width: 140px;
    width: 100%;
    height: auto;
    margin-bottom: 5px;
}

.top-naruto {
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 1rem;
}

.right-cloud {
    position: absolute;
    top: -24px;
    right: -22px;
    max-width: 50px;
    width: 100%;
    height: auto;
    z-index: 1;
}

.mid-naruto-box {
    position: relative;
    display: inline-block;
}

.naruto {
    max-width: 88%;
    width: 100%;
    position: relative;
    z-index: 1;
}

.lrg-cont .naruto {
    max-width: 250px;
}

/* Left Image */
.mid-naruto-box::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 12px;
    width: 90px;
    height: 90px;
    background: url("../images/blue-biscuit.svg") no-repeat center center;
    background-size: contain;
    display: none;
}

/* Right Image */
.mid-naruto-box::after {
    content: "";
    position: absolute;
    right: -34px;
    top: 12px;
    width: 105px;
    height: 105px;
    background: url("../images/yellow-biscuit.svg") no-repeat center center;
    background-size: contain;
    display: none;
}

.text-bar {
    max-width: 240px;
    width: 100%;
    background-color: #fff2ed;
    border: 2px solid var(--thm-black);
    border-radius: 8px;
    padding: 8px 20px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    margin-top: -27px;

    /* Only bottom + left inset shadow */
    box-shadow:
        inset 0 -3px 0 #c7a397,
        /* bottom shadow */
        inset 3px 0 0 #c7a397;
    /* left shadow */
}

.text-bar img {
    height: auto;
    display: block;
    margin: 0 auto;
}

.text-bar.naruto-treat-bar img {
    width: 96%;
}

.text-bar.register-now-bar img {
    max-width: 114px;
}

.text-bar.verification-bar img {
    max-width: 100px;
}

.text-bar.login-bar img {
    max-width: 47px;
}

.text-bar h2 {
    font-family: var(--thm-secondary-font);
    font-size: 1.28rem;
    font-style: normal;
    line-height: 1.2;
    font-weight: 400;
    margin: 0;

    color: #FCDC47;
    -webkit-text-stroke-width: 1.2px;
    -webkit-text-stroke-color: #312C8D;
}

.text-content {
    max-width: 250px;
    width: 100%;
    padding: 0;
    position: relative;
    padding-bottom: 1rem;
}

.text-content span {
    font-weight: 900;
    /* color: var(--thm-orange); */
    font-size: 14px;
    color: #FDB516;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #312C8D;
}

.coming-cloud {
    position: absolute;
    top: -10px;
    right: -45px;
    max-width: 60px;
    width: 100%;
    height: auto;
    z-index: 1;
}

.text-content h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    font-style: normal;
    font-weight: 400;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: var(--thm-white);
    text-shadow: 1px 2px 0 #312C8D;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
}

.text-content p {
    color: #312C8D;
    text-align: center;
    font-family: var(--thm-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    position: relative;
    z-index: 2;
}

.form-box {
    width: 100%;
    position: relative;
    z-index: 3;
    /* padding-top: 1rem; */
}

.top-cloud-el {
    position: absolute;
    top: -60px;
    left: -22px;
    max-width: 65px;
    width: 100%;
    height: auto;
    z-index: 2;
    opacity: 1;
}

.bottom-cloud-el {
    position: absolute;
    bottom: 86px;
    right: 0px;
    max-width: 60px;
    width: 100%;
    height: auto;
    z-index: -1;
    opacity: 1;
}

.form-box form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    align-self: stretch;
}

/* Base input style */
.form-box form .form-control {
    display: flex;
    height: 42px;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #312C8D;
    background: #FFF;
    box-shadow: 1px 2px 0 0 #0C51A1;
    width: 100%;
    outline: none;
    color: #514F7F;
}

.form-box form .form-control::placeholder {
    color: #71708B;
    font-size: 14px;
    line-height: 1.2;
    font-style: normal;
    opacity: 1;
}

/* Force your focus/hover styles */
.form-box form .form-control:active,
.form-box form .form-control:focus,
.form-box form .form-control:focus-within,
.form-box form .form-control:hover {
    border: 1px solid var(--thm-orange) !important;
    box-shadow: 0 3px 0 0 var(--thm-orange) !important;
    outline: none !important;
}


.phone-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.phone-input .country-code {
    font-size: 14px;
    font-weight: 400;
    color: #171360;
    white-space: nowrap;

    display: flex;
    width: 54px;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;

    border-radius: 8px;
    border: 1px solid #312C8D;
    background: #FFF;
    box-shadow: 1px 2px 0 0 #0C51A1;
}

.referral-txt {
    padding: 0.5rem 0 1rem 0;
    text-align: center;
}

.referral-txt .referral-link {
    color: #312C8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.28px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    cursor: pointer;
}

.btn-main {
    width: 100%;
    color: var(--thm-brown);
    font-family: var(--thm-font);
    font-size: 1rem;
    line-height: 1.2;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.32px;

    display: flex;
    height: 48px;
    padding: 8px 12px 8px 16px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    color: var(--thm-brown);
    text-decoration: none;

    border-radius: 8px;
    border: 1px solid var(--thm-orange);
    background: var(--thm-cream);
    box-shadow: 0 4px 0 0 var(--thm-orange);
    margin-top: 0.8rem;
}

.btn-main:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* SIGN UP PAGE START */
.btn-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    padding-top: 1rem;
    position: relative;
    z-index: 3;
}

.terms-box {
    display: flex;
    align-items: flex-start;
    margin: 0;
}

.terms-label .terms-links {
    display: block;
    margin-top: 2px;
    /* optional spacing */
}

.terms-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    color: #000;
}

.terms-label input[type="checkbox"] {
    -webkit-appearance: none;
    /* Removes default Safari/Chrome checkbox */
    appearance: none;
    /* Removes default browser styles */
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #312C8D;
    background: var(--thm-white);
    box-shadow: 1px 2px 0 0 #0C51A1;
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Optional: add a checkmark when selected */
.terms-label input[type="checkbox"]:checked {
    background-color: var(--thm-white);
}

.terms-label input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 9px;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9' viewBox='0 0 12 9' fill='none'%3E%3Cpath d='M10.3333 0.999969L3.91667 7.41664L1 4.49997' stroke='%231D3A67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
}

.terms-label span {
    color: #1D3A67;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.terms-label span a {
    color: #1D3A67;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.error-field .form-control,
.error-field .country-code {
    border-radius: 8px;
    border: 1px solid #D7292C !important;
    background: var(--thm-white);
    box-shadow: 1px 2px 0 0 #D7292C !important;
}

.form-error-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.form-error {
    color: #D7292C;
    font-family: var(--thm-font);
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.22px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.login-link {
    color: #0C51A1;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.error-icon {
    max-width: 16px;
    width: 100%;
    height: auto;
    margin-right: 4px;
}

/* ===== Referral Popup Styling ===== */
.referral-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(43, 85, 134, 0.75);
    backdrop-filter: blur(3px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.referral-popup-box {
    border-radius: 12px;
    background: #50DCFF;
    padding: 30px 25px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.referral-popup-box h3 {
    color: #312C8D;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 1.5rem;
    margin-bottom: 0.9rem;
}

/* Input + success icon */
.referral-input-wrap {
    position: relative;
    padding-bottom: 0.6rem;
}

.referral-popup-box input {
    width: 100%;
    height: 48px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #312C8D;
    background: #FFF;
    box-shadow: 1px 2px 0 0 #0C51A1;
    color: #312C8D;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.referral-popup-box input:focus {
    border: 1px solid #FF8C00;
    box-shadow: 0 2px 0 0 #FF8C00;
    outline: none;
}

.referral-popup-box input::placeholder {
    color: #71708B;
    font-weight: 400;
}

.referral-popup-box .btn-main {
    max-width: 240px;
    margin: 0 auto;
}

.referral-success {
    position: absolute;
    right: 18px;
    top: 40%;
    transform: translateY(-40%);
    opacity: 0;
    transition: 0.3s ease;
}

.referral-success.active {
    opacity: 1;
}

/* Error message */
.referral-error {
    margin-bottom: 14px;
    opacity: 0;
    transition: 0.3s ease;
    text-align: left;
    color: #D7292C;
    font-size: 11px;
    font-weight: 600;
}

.referral-error.active {
    opacity: 1;
}

/* Close Referral */
.referral-popup-box button.close-referral {
    width: 15px;
    height: 15px;
    position: absolute;
    top: 18px;
    right: 28px;
    background: none;
    border: none;
    cursor: pointer;
}

.referral-popup-box button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.referral-popup-box button:not(:disabled):hover {
    background: #F9E79F;
}

/* Blur background when popup open */
body.referral-active .main-wrapper {
    filter: blur(6px);
    pointer-events: none;
    user-select: none;
}

/* Red border when invalid code */
.referral-popup-box input.error {
    border-color: #D7292C !important;
    box-shadow: 0 2px 0 0 #D7292C !important;
    color: #D7292C;
}

/* Popup slide animation */
@keyframes slideInFromTop {
    0% {
        transform: translateY(-100px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideOutToBottom {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(100px);
        opacity: 0;
    }
}

/* Add transition classes */
.referral-popup-box {
    animation-duration: 0.6s;
    animation-timing-function: ease;
}

.referral-popup-box.show {
    animation-name: slideInFromTop;
}

.referral-popup-box.hide {
    animation-name: slideOutToBottom;
}

/* SIGN UP PAGE END */

/* OTP PAGE START */
.otp-text h3,
.otp-text p {
    color: #1D2E5E;
    text-align: center;
    font-family: var(--thm-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.32px;
    margin-top: 0;
    margin-bottom: 0;
}

.otp-text p a {
    text-decoration: none;
    pointer-events: none;
    color: #1D2E5E;
    text-align: center;
    font-family: var(--thm-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.32px;
    margin-top: 0;
    margin-bottom: 0;
}

.otp-text h3 {
    margin-bottom: 5px;
}

.edit-pen {
    width: 20px;
    height: 20px;
    margin-left: 5px;
}

.form-otp {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.otp-input {
    text-align: center;
    width: 48px !important;
    height: 48px !important;
    padding: 10px !important;
}

.otp-btm-text {
    width: 100%;
    text-align: center;
    padding-top: 0.3rem;
    max-width: 222px;
}

.otp-btm-text h3 {
    color: #1D2E5E;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.28px;
    margin: 0;
}

.otp-btm-text a.resend-otp {
    color: #312C8D;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.28px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.btn-main:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.otp-input.error {
    border: 1px solid #D7292C !important;
    box-shadow: 1px 2px 0 0 #D7292C !important;
}

.otp-width {
    max-width: 222px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* OTP PAGE END */

/* LOGIN PAGE START */
.login-box form {
    min-height: 235px;
    justify-content: space-between;
}

.login-box form .form-error-box {
    padding: 0.6rem 0;
}

/* LOGIN PAGE END */

/* THANKS PAGE START */
.thanks-wrapper {
    position: relative;
    max-width: 335px;
    width: 100%;
    margin: auto;
    /* optional: height if you need predictable placement */
}

.thanks-wrapper .top-cloud-el {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    top: 35px;
    left: -22px;
}

.thanks-wrapper .coming-cloud {
    position: absolute;
    pointer-events: none;
    z-index: 4;
    top: -22px;
    right: -12px;
}

.thanks-box {
    position: relative;
    z-index: 2;
    /* keep it above the cloud images */
    padding: 2rem 1rem;
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 3;
}

.thanks-content h2 {
    color: #FFF;
    text-align: center;
    text-shadow: 1px 2px 0 #312C8D;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.thanks-content h2 span {
    color: #FDB516;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    display: block;
}

.thanks-content {
    width: 90%;
}

.thanks-content p {
    color: #022F65;
    text-align: center;
    font-family: var(--thm-font);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.32px;
}

/* THANKS PAGE END */

/* HOME PAGE START */
.content-container {
    width: 100%;

    position: relative;
    z-index: 2;
}

/* ===================== FULLSCREEN OFFCANVAS ===================== */
.offcanvas-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* Always full device height */
    background: rgba(0, 0, 0, 0.8);
    /* dark overlay behind content */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    z-index: 999;
}

/* When active, fade in */
.offcanvas-menu.active {
    opacity: 1;
    pointer-events: auto;
}

/* Inner sliding panel */
.offcanvas-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #312C8D;
    /* main panel background */
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    /* smooth natural slide */
    padding: 40px 25px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* center content vertically */
    align-items: center;
    overflow: hidden;
    /* Disable scroll */
}

/* When active, slide in */
.offcanvas-menu.active .offcanvas-content {
    transform: translateX(0);
}

/* ===================== OFFCANVAS HEADER ===================== */
.offcanvas-header {
    position: absolute;
    top: 25px;
    left: 25px;
    right: 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.offcanvas-logo {
    max-width: 120px;
    width: 100%;
    height: auto;
}

/* Internal image close icon */
.offcanvas-close {
    width: 20px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0.9;
}

.offcanvas-close:hover {
    transform: rotate(90deg) scale(1.1);
    opacity: 1;
}

/* ===================== MENU LINKS ===================== */
.offcanvas-menu-con {
    padding-top: 60px;
    width: 100%;
}

.offcanvas-menu-con {
    height: calc(100dvh - 115px);
    overflow: hidden;
}

.offcanvas-menu-con .offcanvas-links {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 10px;
}

/* Optional: custom scrollbar */
.offcanvas-menu-con .offcanvas-links::-webkit-scrollbar {
    width: 4px;
}

.offcanvas-menu-con .offcanvas-links::-webkit-scrollbar-track {
    background: #5852BA;
    border-radius: 10px;
}

.offcanvas-menu-con .offcanvas-links::-webkit-scrollbar-thumb {
    background: #9692f0;
    border-radius: 10px;
}

.offcanvas-links {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;

}

.offcanvas-links li {
    margin: 14px 0;
}

.offcanvas-links a {
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    width: 100%;
    border-radius: 12px;
    border: 1px solid #5551A0;
    background: #383399;
    padding: 10px;
    display: block;
}

.offcanvas-links a:hover {
    color: var(--thm-red, #e60000);
    transform: scale(1.05);
}

.offcanvas-links a.profile-cont {
    border-radius: 12px;
    border: 1px solid #5551A0;
    background: #262171;
}

.menu-cont-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.menu-cont-item .left-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.menu-cont-item .left-icon img {
    width: 40px;
    height: 40px;
    display: block;
}

.menu-cont-item .right-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.menu-text-item {
    color: var(--thm-white);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.36px;
}

.offcanvas-social-links {
    width: 100%;
    padding-top: 0.5rem;
    /* position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0; */
}

.offcanvas-social-links ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.offcanvas-social-links ul li {
    display: inline-block;
}

.offcanvas-social-links ul li a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #534FA5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.time-lead-box .timeline-profile-con {
    width: 90%;
    height: 100%;
    background-color: transparent;
    margin-bottom: 30px;
    margin-top: 15px;
    padding-left: 0;
}

.time-lead-box .timeline {
    position: relative;
    width: 100%;
    height: 4px;
    background: #4540A0;
    border-radius: 10px;
    margin: 0;
}

.time-lead-box .timeline::after {
    content: "Start";
    position: absolute;
    bottom: -30px;
    left: -16px;
    display: inline-flex;
    padding: 2px 8px 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #1E1A66;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.time-lead-box .progress {
    position: absolute;
    height: 4px;
    background: #FFDE50;
    border-radius: 10px;
    width: 0%;
}

.time-lead-box .milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    overflow: visible;
    border-radius: 50%;
    border: none;
    background: transparent;
    z-index: 2;
}

.time-lead-box .milestone img {
    width: 24px;
    height: auto;
}

.time-lead-box .milestone-1 {
    left: 50%;
    /* middle */
}

.time-lead-box .milestone-2 {
    right: 6px;
    transform: translate(50%, -50%);
}

.time-lead-box .progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: #FFDE50;
    border-radius: 50%;
    /* border: 2px solid transparent; */
    outline: 1px solid #FFDE50;
    outline-offset: 2px;
}

/* ===================== OPTIONAL THEME COLORS (BRITANNIA STYLE) ===================== */
/*
.offcanvas-content {
    background: linear-gradient(135deg, #ff4b2b, #ff416c);
    color: #fff;
}
.offcanvas-links a {
    color: #fff;
}
.offcanvas-links a:hover {
    color: #ffe16b;
}
.offcanvas-close {
    filter: brightness(0) invert(1);
}
*/

.leaderboard-info {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 5px;
}

.leaderboard-info .lead-info-inner-box {
    border-radius: 12px;
    border: 1px solid #5852BA;
    background: #2B2584;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
}

.lead-info-inner-box.time-lead-box {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lead-info-inner-box .timeline {
    right: 0;
}

.lead-info-inner-box p.number-head {
    color: var(--thm-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    opacity: 0.3;
    align-self: flex-start;
}

.lead-info-inner-box p.number-data {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
}

.col-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 5px;
}

.col-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 5px;
}

.content-container header {
    width: 100%;
    padding: 12px 20px;
    position: relative;
    z-index: 2;
    border-bottom: 1px solid var(--thm-white);
}

.content-container header .header-box {
    gap: 10px;
}

.header-box .logo-header {
    max-width: 110px;
    width: 100%;
    height: auto;
    margin-bottom: -34px;
}

.header-box .right-content {
    width: 85%;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.rank-counter {
    width: 66px;
    height: auto;
    display: flex;
    align-items: center;
    background-image: url("../images/UI-Counter-BG.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 12px;
    position: relative;
}

.rank-icon {
    margin-right: 3px;
    width: 24px;
    height: auto;
}

.rank-counter .rank-txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

    overflow: hidden;
    color: var(--thm-white);
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    text-overflow: ellipsis;
    text-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.80), 0 0.5px 0 #000;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #3B3B3B;
    font-family: var(--thm-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.22px;
    text-transform: uppercase;
    padding: 4px 4px 4px 0;
    width: 100%;
    text-align: center;
}

.naruto-coin {
    width: 58px;
    height: auto;
    display: flex;
    align-items: center;
    background-image: url("../images/UI-Counter-coin-BG.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 12px;
    position: relative;
}

.naruto-coin-icon {
    margin-right: 3px;
    width: 24px;
    height: auto;
}

.naruto-coin-txt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;

    overflow: hidden;
    color: var(--thm-white);
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    text-overflow: ellipsis;
    text-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.80), 0 0.5px 0 #000;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #3B3B3B;
    font-family: var(--thm-font);
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.22px;
    text-transform: uppercase;
    padding: 4px 4px 4px 0;
    width: 100%;
    text-align: center;
}

.content-wrapper {
    padding: 20px;
    width: 100%;
    position: relative;
}

.content-box {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    padding: 1rem;
}

.content-box .main-heading {
    color: #FFFEFC;
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #312C8D;
    letter-spacing: 0.56px;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.56px;
    margin-top: 0;
    margin-bottom: 1rem;
    text-align: center;
}

.content-box .main-heading span {
    color: #FDB516;
}

.nrt-txt-img {
    width: 85px;
    height: auto;
}

.unlock-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
}

.unlock-box .left-side {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.unlock-box .right-side {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
    position: relative;
    overflow: visible;
}

.unlock-box .left-side p {
    color: #022F65;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-bottom: 1rem;
}

.scan-btn {
    color: #022F65;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
    border-radius: 14px;
    background-color: #FFF3DB;
    border: 2px solid #304146;
    box-shadow: 5px -4px 0 0 rgba(240, 128, 88, 0.54) inset;
    padding: 10px 15px;
    text-decoration: none;
    display: inline-block;
}

.scan-btn img {
    margin-left: 4px;
}

.unlock-img {
    /* max-width: 100%; */
    display: block;
    height: auto;

    position: absolute;
    width: 200px;
    z-index: 21;
}

.unlcok-biscuit-img {
    max-width: 90px;
    width: 100%;
    margin-left: -24px;
}

.gameplay-con {
    padding-top: 1rem;
    position: relative;
}

/* First image (before) */
.gameplay-con::before {
    content: "";
    position: absolute;
    top: 50px;
    right: -30px;
    width: 64px;
    height: 50px;
    background: url("../images/coming-soon-cloud.png") no-repeat center / contain;
    z-index: 2;
}

/* Second image (after) */
.gameplay-con::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -32px;
    transform: translateY(-50%);
    width: 64px;
    height: 50px;
    background: url(../images/top-cloud-form.png) no-repeat center / contain;
    z-index: -1;
}

.bottom-gameplay-con {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    overflow: visible;
    height: calc(100dvh - 310px);
}

.game-content-box {
    border-radius: 20px 20px 0 0;
    background: #312C8D;
    padding: 20px 20px 40px 20px;
    height: 100%;
}

.btm-game-box {
    position: relative;
    height: 100%;
}

.btm-game-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -40px;
    width: 100%;
    height: 72px;
    background-image: url("../images/gameplay-element.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

.gameplay-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
}

.gameplay-head h2 {
    font-family: var(--thm-secondary-font);
    color: #FFF3DB;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #312C8D;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
    margin: 0;
}

.game-btn {
    display: inline-flex;
    padding: 6px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #EA7E26;
    color: var(--thm-white);
    text-decoration: none;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.sage-mode-icon {
    width: 54px;
    height: auto;
}

.mode-content h3 {
    color: #6662B6;
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
}

.lock-box {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #9B96E6;
    background: #312C8D;
    box-shadow: 0 2px 0 0 #9B96E6;
}

.lock-icon {
    width: 18px;
    height: auto;
}

.mode-content p {
    color: #A5A4C5;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.gamechallenge-btn {
    display: flex;
    width: 306px;
    padding: 10px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #534FA5;
    margin: 1rem auto;

    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.3px;
    text-decoration: none;
}

.mode-item {
    justify-content: space-between;
    gap: 12px;
    border-radius: 8px;
    background: #262171;
    padding: 1rem;
    margin-bottom: 10px;
}

.mode-item .mode-content {
    width: calc(100% - 90px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sage-gameplay-wrapper .mode-item .mode-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* HOME PAGE END */

/* DIGIT CODE SCAN START */
.scan-container {
    padding-top: 1rem;
}

.scan-container .content-box {
    overflow: hidden;
}

.machine-code-container {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #312C8D;
    padding: 1rem;
    text-align: center;
    position: relative;
    z-index: 3;
}

.machine-head {
    display: inline-flex;
    padding: 4px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: #534FA5;
    position: absolute;
    left: 50%;
    top: -10px;
    transform: translateX(-50%);
    width: 145px;
    text-align: center;
    justify-content: center;
}

.scan-container .content-box .main-heading {
    position: relative;
}

.scan-container .content-box .main-heading::after {
    content: "";
    position: absolute;
    top: 24px;
    right: -20px;
    width: 82px;
    height: 72px;
    background: url("../images/content-box-element-1.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

.machine-head p {
    color: var(--thm-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.machine-code-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.machine-code-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.machine-code-box p {
    color: var(--thm-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    text-align: left;
    position: relative;
    padding-top: 30px;
    padding-left: 5px;
}

.machine-code-box p::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -5px;
    width: 40px;
    height: 40px;
    background: url("../images/machine-text-arrow.svg") no-repeat center;
    background-size: contain;
}

.machine-code-img {
    max-width: 150px;
    width: 100%;
    height: auto;
}

.scan-img {
    height: calc(100dvh - 396px);
    background-image: url("../images/scan-treat.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.tap-scan-img {
    height: calc(100dvh - 396px);
    background-image: url("../images/tap-scan-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: 12px;
    position: relative;
    z-index: 2;
}

.scan-img::after {
    content: "";
    position: absolute;
    bottom: -40px;
    left: -38px;
    width: 82px;
    height: 72px;
    background: url("../images/content-box-element-2.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

.tap-overlay {
    width: 100%;
    height: 100%;
    position: relative;
}

.tap-camera {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgb(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 10px;
}

.tap-camera .camera-icon-box {
    width: 87px;
    height: 87px;
    border-radius: 50%;
    background-color: #4C4C4C;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera-icon-box img {
    width: 40px;
    height: auto;
    display: block;
}

.tap-camera p {
    color: var(--thm-white);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
}

/* DIGIT CODE SCAN PAGE END */

/* CAMERA RECORD PAGE START */
.record-text-box {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #312C8D;
    padding: 1.5rem 2rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.record-text-box h2 {
    color: var(--thm-white);
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.record-text-box h2 span {
    color: #FDB516;
}

/* CAMERA RECORD PAGE END */

/* RECORD PAGE START */
.record-box {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #312C8D;
    flex-shrink: 0;
    padding: 1rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
}

.record-box h2 {
    color: var(--thm-white);
    -webkit-text-stroke-width: 0.2px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0;
    margin-bottom: 0rem;
}

.record-box h2 span {
    color: #FDB516;
}

.counter-no-list {
    list-style: none;
    counter-reset: list;
    padding-left: 10px;
    margin-top: 1rem;
    margin-bottom: 0rem;
    text-align: left;
}

.counter-no-list li {
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-bottom: 1rem;
    position: relative;
    counter-increment: list;
    padding-left: 35px;
}

.counter-no-list li::before {
    content: counter(list);
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: #EA7E26;
    /* number circle color */
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.record-naruto {
    text-align: center;
    height: calc(100dvh - 536px);
    display: flex;
    justify-content: center;
    align-items: end;
}

.record-naruto-img {
    max-width: 170px;
    width: 100%;
    height: auto;
    margin-left: -20px;
}

.record-box::before {
    content: "";
    position: absolute;
    top: -86px;
    left: -38px;
    width: 100px;
    height: 90px;
    background: url("../images/content-box-element-2.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

/* Countdown Timer Styles */
.base-timer {
    position: relative;
    width: 85px;
    height: 85px;
    margin-bottom: 0;
}

.base-timer__svg {
    transform: scaleX(-1);
    background-color: #423CAE;
    /* added background color */
    border-radius: 50%;
    /* optional: makes it a perfect circle */
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: #423CAE;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

.base-timer__path-remaining.green {
    color: rgb(65, 184, 131);
}

.base-timer__path-remaining.orange {
    stroke: #FF8C00;
}

.base-timer__label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--thm-white);
    text-shadow: 1px 1px 2px rgba(40, 28, 14, 0.37);
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #000;
    font-family: var(--thm-secondary-font);
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 4.5px;
    padding: 5px;
}

/* RECORD PAGE END */

/* CAMERA PAGE START */
.scan-your-image {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: calc(100dvh - 144px);
}

/* Background image only */
.background-layer {
    position: absolute;
    inset: 0;
    background-image: url("../images/scan-img.jpg");
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Remove overlay */
.background-layer::before {
    display: none;
}

/* Scan box with soft shadow spreading across the whole area */
.scan-your-image .scan-img {
    height: calc(100dvh - 46px);
    position: relative;
    z-index: 2;
    background: transparent;
    overflow: hidden;

    /* soft black spread shadow creating overlay look */
    box-shadow: 0 0 80px 80px rgba(0, 0, 0, 0.6);
    border-radius: 0;
    width: 90%;
    margin: auto;
    margin-top: 1rem;
}

/* Corner brackets */
.corner {
    position: absolute;
    width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 3;
}

.corner-tl {
    top: 0;
    left: 0;
    background-image: url("../images/white-top-left-elem.svg");
}

.corner-tr {
    top: 0;
    right: 0;
    background-image: url("../images/white-top-right-elem.svg");
}

.corner-bl {
    bottom: 0;
    left: 0;
    background-image: url("../images/white-bottom-left-elem.svg");
}

.corner-br {
    bottom: 0;
    right: 0;
    background-image: url("../images/white-bottom-right-elem.svg");
}

/* Caption text */
.overlay-text {
    position: relative;
    z-index: 3;
    margin-top: 1rem;
    margin-bottom: 1rem;
    color: #ffffff;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.32px;
}

.scan-your-image .scan-img::before,
.scan-your-image .scan-img::after {
    display: none;
}

/* .camera-container .scan-img {
    height: calc(100dvh - 410px);
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;

    background-image:
        url("../images/top-left-camera-element.svg"),
        url("../images/top-right-camera-element.svg"),
        url("../images/bottom-left-camera-element.svg"),
        url("../images/bottom-right-camera-element.svg"),
        url("../images/scan-img.jpg");

    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position:
        top left,
        top right,
        bottom left,
        bottom right,
        center;
    background-size:
        48px 49px,
        48px 49px,
        48px 49px,
        48px 49px,
        cover;
} */

.instruction-box {
    background-color: #FFF3DB;
    border: 2px solid #304146;
    box-shadow: 5px -4px 0 0 rgba(240, 128, 88, 0.54) inset;
    padding: 1rem;
    border-radius: 12px;
}

.instruction-box h2 {
    color: var(--thm-white);
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.instruction-box ul {
    list-style-type: disc;
    padding-left: 20px;
}

.instruction-box ul li {
    color: #2F3E60;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.32px;
}

.instruction-box p {
    color: #312C8D;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.32px;
    margin-top: 1rem;
}

/* Scan 2 Page */
.camera-wrapper-scan {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Outer wrapper */
.scan-wrapper {
    position: relative;
    width: 100%;
    height: calc(100dvh - 146px);
    overflow: hidden;
    border-radius: 26px;
}

/* Camera section */
.scan-camera-box {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Background + overlay */
.background-scan-img {
    position: absolute;
    inset: 0;
    background-image: url(../images/scan-img.jpg);
    background-size: cover;
    background-position: center;
    z-index: 0;
    border-radius: 12px;
}

.background-scan-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 12px;
}

/* Overlay content centered */
.overlay-content-box {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

/* Rectangle box */
.scan-rectangle {
    position: relative;
    background: linear-gradient(90deg,
            rgb(255 255 255 / 0%) 0%,
            rgb(255 255 255 / 50%) 40%,
            rgb(255 255 255 / 0%) 100%);
    border: none;
    width: 90%;
    height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center image INSIDE the rectangle */
.scan-treat-img {
    width: 170px;
    height: 60px;
    background-image: url("../images/scan-biscuit.png");
    /* replace with your image */
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 3;
}

/* Text BELOW rectangle */
.scan-overlay-text {
    margin-top: 1.2rem;
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.32px;
    width: 85%;
}

/* Corner SVGs */
.scan-corner {
    position: absolute;
    width: 15px;
    height: 15px;
    background-repeat: no-repeat;
    background-size: contain;
}

/* Internal SVGs */
.scan-corner-tl {
    top: 0;
    left: 0;
    background-image: url("../images/small-top-left-scan-element.svg");
}

.scan-corner-tr {
    top: 0;
    right: 0;
    background-image: url("../images/small-top-right-scan-element.svg");
}

.scan-corner-bl {
    bottom: 0;
    left: 0;
    background-image: url("../images/small-bottom-left-scan-element.svg");
}

.scan-corner-br {
    bottom: 0;
    right: 0;
    background-image: url("../images/small-bottom-right-scan-element.svg");
}

/* CAMERA PAGE END */

/* CAMERA SCREEN TRY AGAIN PAGE START */
.try-icon-box {
    width: 87px;
    height: 87px;
    border-radius: 50%;
    background-color: #4C4C4C;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.try-icon-box img {
    max-width: 40px;
    width: 100%;
    height: auto;
    display: block;
}

.try-text p {
    color: var(--thm-white);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
    text-align: center;
}

.try-text .red-mark {
    display: inline-flex;
    padding: 8px 12px;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: rgba(215, 41, 44, 0.70);
    margin-top: 2rem;
}

.red-mark img {
    width: 16px;
    height: auto;
    margin-right: 5px;
}

.red-mark p {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.32px;
}

.red-mark p a {
    color: var(--thm-white);
    text-decoration: underline;
}

/* CAMERA SCREEN TRY AGAIN PAGE END */

/* PORTAL POPUP PAGE START */
/* Overlay */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    /* dark transparent bg */
    display: none;
    /* hidden by default */
    justify-content: center;
    align-items: flex-end;
    /* aligns popup at bottom */
    z-index: 19;
    /* under popup */
}

/* Show overlay */
.popup-overlay.active {
    display: flex;
}

/* Popup Box */
.portal-unlocked {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;

    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
    position: relative;
    padding: 2rem 0;
    /* above overlay */
}

.portal-unlocked::before {
    content: "";
    position: absolute;
    right: 15px;
    top: -15px;
    width: 30px;
    height: 24px;
    background-image: url("../images/portal-unlock-element-1.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: -1;
    pointer-events: none;
}

.portal-content-box {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    max-width: 75%;
    position: relative;
}

.portal-naruto {
    max-width: 150px;
    height: auto;
    margin-top: -100px;
}

.portal-txt-box h2 {
    color: var(--thm-white);
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.64px;
    margin-top: 0;
    margin-bottom: 1rem;

    display: inline-block;
    width: 100%;
    padding: 12px 12px 12px 26px;
    justify-content: flex-end;
    align-items: center;
    border-radius: 12px;
    background: #534FA5;
}

.portal-txt-box p {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin-bottom: 1rem;
    position: relative;
}

.portal-txt-box p::before {
    content: "";
    position: absolute;
    top: 0px;
    right: -56px;
    width: 70px;
    height: 55px;
    background: url("../images/portal-unlock-element-3.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

.portal-txt-box {
    position: relative;
}

.portal-txt-box::before {
    content: "";
    position: absolute;
    top: -86px;
    left: -48px;
    width: 70px;
    height: 55px;
    background: url("../images/portal-unlock-element-2.svg") no-repeat center;
    background-size: contain;
    z-index: 1;
}

/* PORTAL POPUP PAGE END */

/* HOME AFTER SCAN PAGE START */
.after-scan-con .right-side .unlcok-biscuit-img {
    max-width: 140px;
    width: 100%;
    height: auto;
    margin: 0;
}

.after-scan-con .unlock-box .left-side {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.after-scan-con .unlock-box .right-side {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    overflow: hidden;
}

.after-scan-con .mode-item {
    margin-bottom: 8px;
}

.after-scan-con .mode-item .mode-content h3 {
    color: #6662B6;
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.after-scan-con .mode-item.active .mode-content h3,
.after-scan-con .mode-item.complete .mode-content h3 {
    color: #FFFFF1;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #885D00;
}

.after-scan-con .mode-content p {
    color: #A5A4C5;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.after-scan-con .mode-item.complete .mode-content p a {
    font-weight: 600;
    color: var(--thm-cream);
}

.mode-item.active .lock-box {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #EA7E26;
    background: #FFEEC0;
    box-shadow: 0 2px 0 0 #EA7E26;
}

.mode-item.complete .lock-box {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #5FBF69;
    background: #D8F1DA;
    box-shadow: 0 2px 0 0 #5FBF69;
}

.timeline-mode-con {
    width: 100%;
    height: 100%;
    background-color: #302C7B;
    padding: 6px 10px;
    border-radius: 8px;
}

.timeline {
    position: relative;
    width: 90%;
    height: 4px;
    background: #4540A0;
    border-radius: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    right: -7px;
}

.progress {
    position: absolute;
    height: 4px;
    background: #FFDE50;
    border-radius: 10px;
    width: 0%;
}

.milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: visible;
    border-radius: 50%;
    border: 0.75px solid #EA7E26;
    background: #FFEEC0;
    z-index: 2;
}

.milestone img {
    max-width: 90%;
    max-height: 90%;
}

.milestone-1 {
    left: 50%;
    /* middle */
}

.milestone-2 {
    right: 6px;
    transform: translate(50%, -50%);
}

.progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    background: #FFDE50;
    border-radius: 50%;
    /* border: 2px solid transparent; */
    outline: 2px solid #FFDE50;
    outline-offset: 2px;
}

.mode-item-box {
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

.after-scan-con .bottom-gameplay-con {
    height: calc(100dvh - 280px);
}

.after-scan-con .lock-box {
    width: 30px;
    height: 30px;
}

.after-scan-con .gamechallenge-btn {
    margin: 10px auto;
}

.jutsu-content-con .timeline::before {
    content: "Play & Win";
    position: absolute;
    top: -28px;
    left: 0;

    display: inline-flex;
    padding: 2px 8px 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #1E1A66;

    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

/* HOME AFTER SCAN PAGE END */

/* JUTSU VIDEOS PAGE START */
.jutsu-mode-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.jutsu-content-con {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #312C8D;
    padding: 10px 14px;
    margin-top: 12px;
    width: 100%;
}

.ninja-mode-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
}

.ninja-mode-box .mode-content {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}

.ninja-mode-box .mode-content h3 {
    color: #FFFFF1;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #885D00;
    font-family: var(--thm-secondary-font);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
}

.ninja-mode-box .mode-content p {
    color: #ffffff;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.jutsu-content-con .milestone {
    width: 40px;
    height: 40px;
    padding: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jutsu-challenge-box {
    background-color: #FFF3DB;
    border: 1px solid #304146;
    box-shadow: 5px -4px 0 0 rgba(240, 128, 88, 0.54) inset;
    padding: 1rem;
    border-radius: 12px;
    min-height: calc(100dvh - 420px);
    align-items: center;
    height: 100%;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.jutsu-challenge-box h2 {
    color: #6D3917;
    font-family: var(--thm-secondary-font);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.36px;
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #E1D8C7;
    width: 100%;
    padding-bottom: 0.5rem;
}

.jutsu-videos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 10px 0 0 0;
    width: 100%;
}

.challenge-video-col {
    -ms-flex: 0 0 82px;
    flex: 0 0 82px;
    max-width: 82px;
    /* padding: 10px; */
}

/* .challenge-video-col {
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 0.5rem;
} */

.challenge-video-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.challenge-video-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
}

.challenge-video-box .number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #EA7E26;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    text-shadow: 0.275px 0.275px 0.549px rgba(40, 28, 14, 0.37);
    -webkit-text-stroke-width: 0.27px;
    -webkit-text-stroke-color: #000000;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.2px;
    position: absolute;
    top: -12px;
    left: -12px;
}

.jutsu-mode-wrapper .gamechallenge-btn {
    margin: 0 auto;
    background-color: #312C8D;
    /* width: 100%; */
}

.video-ready {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.video-ready::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 58px;
    background: url("../images/cloud-ready-to-master.svg") no-repeat center center;
    background-size: contain;
}

.video-ready::before {
    content: "";
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 50px;
    height: 58px;
    background: url("../images/cloud-ready-to-master-bottom.svg") no-repeat center center;
    background-size: contain;
}

.video-ready .main-heading {
    color: #ffffff;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 28px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.56px;
    background-color: transparent;
    padding: 0;
    position: relative;
}

.video-ready .main-heading::before {
    content: "";
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 44px;
    background: url("../images/popup-cloud.svg") no-repeat center center;
    background-size: contain;
}

.video-ready .portal-content-box {
    padding: 50px 0;
}

.video-ready .portal-content-box .close-popup {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: -2rem;
    margin-top: 0.5rem;
}

.video-ready .video-wrapper {
    border-radius: 12px;
    position: relative;
}

.video-ready .video-wrapper video {
    border-radius: 12px;
    margin-bottom: 1rem;
}

.video-ready .portal-txt-box::before {
    display: none;
}

.tips-naruto-img {
    max-width: 225px;
    width: 100%;
    height: auto;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.tips-list-box {
    padding-bottom: 1.5rem;
}

.tips-content-box .main-heading::before {
    content: "";
    position: absolute;
    left: -68px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 44px;
    background: url(../images/popup-cloud.svg) no-repeat center center;
    background-size: contain;
}

.tips-content-box .counter-no-list {
    padding-left: 0px;
}

.tips-content-box .counter-no-list li {
    padding-left: 30px;
}

.tips-link {
    color: var(--thm-white);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.video-ready .video-wrapper .btn-main {
    margin-bottom: 1rem;
}

/* JUTSU VIDEOS PAGE END */

/* VIDEO CAMERA RECORD PAGE START */
.camera-container {
    position: relative;
}

.camera-cloud-el-1 {
    position: absolute;
    width: 46px;
    height: auto;
    top: -17px;
    left: -23px;
    z-index: 2;
}

.camera-cloud-el-2 {
    position: absolute;
    width: 30px;
    height: auto;
    bottom: -20px;
    right: -20px;
    z-index: 2;
}

.camera-frame-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    height: calc(100dvh - 140px);
    padding: 19px;
    z-index: 1;
    /* wrapper base */
}

/* ✅ Add frame overlay on top */
.camera-frame-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    /* full area */
    pointer-events: none;
    /* do not block clicks */
    background-image:
        url("../images/camera-frame-top.png"),
        url("../images/camera-frame-bottom.png"),
        url("../images/camera-frame-left.png"),
        url("../images/camera-frame-right.png");
    background-repeat: no-repeat;
    background-position:
        top center,
        bottom center,
        center left,
        center right;
    background-size:
        100% auto,
        100% auto,
        auto 100%,
        auto 100%;
    z-index: 5;
    /* always above content */
}

/* ✅ Inner recording container stretched fully */
.camera-video-rec-box {
    position: relative;
    height: calc(100% + 38px);
    width: calc(100% + 38px);
    margin: -19px;
    background-image: url("../images/camera-record.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* or 100% 100% */
    z-index: 2;
    /* below frame overlay */
}

/* Optional: Customize center icon */
.camera-frame-wrapper .video-icon-box img {
    max-width: 80px;
    /* Adjust as needed */
    display: block;
    margin: 0 auto;
}

.machine-code-wrapper .video-camera-rec {
    height: calc(100dvh - 340px);
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-image: url(../images/top-left-camera-element.svg),
        /* top-left */
        url(../images/top-right-camera-element.svg),
        /* top-right */
        url(../images/bottom-left-camera-element.svg),
        /* bottom-left */
        url(../images/bottom-right-camera-element.svg),
        /* bottom-right */
        url(../images/camera-record.svg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right, center;
    background-size: 48px 49px, 48px 49px, 48px 49px, 48px 49px, cover;
}

/* .machine-code-wrapper .camera-video-rec-box {
    height: calc(100dvh - 140px);
    border-radius: 18px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    background-image: url(../images/top-left-camera-element.svg),
        url(../images/top-right-camera-element.svg),
        url(../images/bottom-left-camera-element.svg),
        url(../images/bottom-right-camera-element.svg),
        url(../images/camera-record.svg);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right, center;
    background-size: 48px 49px, 48px 49px, 48px 49px, 48px 49px, cover;
} */

.record-secr {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    /* padding: 2.5rem; */
    padding: 19px 15px;
}

.record-secr .upr-cons {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ninja-camera-frame-wrpr .record-secr .upr-cons {
    padding: 10px;
}

.ninja-camera-frame-wrpr .timer-rec {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
}

.timer-rec {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--thm-white);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    padding: 5px 8px;
}

.video-icon-wrapper {
    position: relative;
    width: 64px;
    height: 64px;
}

.video-icon-box {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--thm-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    z-index: 2;
}

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
    /* Start from top */
    z-index: 1;
}

.progress-ring__circle {
    stroke-dasharray: 188.4;
    /* 2πr = 2 * π * 30 */
    stroke-dashoffset: 188.4;
    animation: fillRing 30s linear forwards;
}

@keyframes fillRing {
    to {
        stroke-dashoffset: 0;
    }
}

.boom-popup {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.boom-popup .main-heading {
    color: #FFFFF1;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #276A2E;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    padding: 0;
    background-color: transparent;
}

.boom-popup p {
    color: var(--thm-white);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.score-box h3 {
    color: #FFEEC0;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin: 0;
}

.boom-box {
    display: flex;
    flex-direction: column;
    max-width: 90%;
}

.score-box {
    display: inline-flex;
    padding: 9px 9px 9px 17px;
    justify-content: center;
    align-items: center;
    gap: 9px;
    border-radius: 12px;
    border: 1px solid #FFDFC5;
    background: #EA7E26;
    width: 240px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.score-box .naruto-coin {
    max-width: 90px;
    width: 100%;
    position: relative;
}

.score-box .naruto-coin::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -3px;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-image: url("../images/naruto-coin.svg");
    /* internal image path */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.score-box .naruto-coin-txt {
    overflow: hidden;
    color: #ffffff;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.80), 0 0.5px 0 #000;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #3B3B3B;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    margin-left: 18px;
}

.boom-img {
    max-width: 130px;
    margin: 0 auto;
}

.boom-popup .portal-content-box {
    max-width: 90%;
}

.boom-popup .portal-txt-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.boom-popup .portal-txt-box::before {
    display: none;
}

.boom-popup .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: -10px;
    margin-top: 0.5rem;
}

.boom-popup .portal-content-box {
    padding: 50px 0 20px 0;
}

.boom-popup .portal-txt-box p::before {
    display: none;
}

.boom-popup::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 58px;
    background: url(../images/cloud-ready-to-master.svg) no-repeat center center;
    background-size: contain;
}

.boom-popup::before {
    content: "";
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 50px;
    height: 58px;
    background: url(../images/cloud-ready-to-master-bottom.svg) no-repeat center center;
    background-size: contain;
}

.boom-popup .portal-content-box::before {
    content: "";
    position: absolute;
    left: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 44px;
    background: url(../images/popup-cloud.svg) no-repeat center center;
    background-size: contain;
}

/* VIDEO CAMERA RECORD PAGE END */

/* SELECTED VIDEOS PAGE START */
.challenge-video-box.selected .check {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid #276A2E;
    background: #DAFFDE;
    box-shadow: 0 2px 0 0 #276A2E;
    position: absolute;
    top: -12px;
    left: -12px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.challenge-video-box.selected .retry {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    border: 1px solid #D7292C;
    background: #FFEDED;
    box-shadow: 0 2px 0 0 #D7292C;
    position: absolute;
    top: -12px;
    left: -12px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.claim-box {
    background-image: url("../images/boom-rec-bg.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    padding: 1rem;
    /* margin-bottom: 1rem; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.claim-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 90%;
    padding-inline: 1rem;
    margin: 0 auto;
}

.claim-text-col {
    text-align: left;
}

.claim-img-col img {
    width: 100px;
    height: auto;
    display: block;
}

.claim-text-col p {
    color: #021244;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    text-align: left;
}

.btn-claim {
    color: #EA7E26;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-align: left;
}

.close-missed .portal-content-box {
    width: 100%;
    display: block;
}

.close-missed .main-heading {
    -webkit-text-stroke-color: #F81B1B;
}

.claim-bts {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 0.6rem 0.5rem;
}

.claim-bts .playnxt-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
}

/* SELECTED VIDEOS PAGE END */

/* CONGRATULATIONS COMPLETE PAGE START */
.mode-complete-con {
    background-color: #FFF3DB;
    border: 2px solid #304146;
    box-shadow: 5px -4px 0 0 rgba(240, 128, 88, 0.54) inset;
    padding: 1rem 1rem;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    position: relative;
    min-height: calc(100dvh - 316px);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cong-img-box {
    padding: 1rem 0;
}

.cong-text h2 {
    color: #FDB516;
    text-align: center;
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 2rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.72px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.cong-text p {
    color: #021244;
    text-align: center;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.cong-naruto {
    width: 85%;
    margin: 0 auto;
    height: auto;
    position: relative;
    z-index: 2;
}

.cong-img {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cong-img::before,
.cong-img::after {
    content: "";
    position: absolute;
    width: 55px;
    height: 43px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* Left (before) image */
.cong-img::before {
    top: 0;
    left: -16px;
    background-image: url("../images/cong-cloud-element-1.svg");
}

/* Right (after) image */
.cong-img::after {
    top: 28px;
    right: -10px;
    background-image: url("../images/cong-cloud-element-2.svg");
    z-index: 1;
}

.cong-img-box .btn-main {
    margin-top: -22px;
    position: relative;
    z-index: 3;
}

/* CONGRATULATIONS COMPLETE PAGE END */

/* SAGE SCREEN PAGE START  */
.unlock-box.unlock-box-sage .left-side {
    -ms-flex: 0 0 65%;
    flex: 0 0 65%;
    max-width: 65%;
}

.unlock-box.unlock-box-sage .right-side {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    text-align: right;
}

.sage-biscuit-img {
    max-width: 145px;
    width: 100%;
    margin-top: -40px;
}

.sage-gameplay-wrapper .mode-item.complete .lock-box {
    position: relative;
}

/* image 1 - top-left (outside) */
.sage-gameplay-wrapper .mode-item.complete .lock-box::before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    width: 6px;
    height: 6px;
    background: url("../images/star-icon.svg") no-repeat center / contain;
}

/* image 2 - top-right (outside) */
.sage-gameplay-wrapper .mode-item.complete .lock-box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: url("../images/star-icon.svg") no-repeat center / contain;
}

/* image 3 - bottom-center (outside) */
.sage-gameplay-wrapper .mode-item.complete .lock-box a::before {
    content: "";
    position: absolute;
    bottom: -2px;
    right: -3px;
    width: 4px;
    height: 4px;
    background: url("../images/star-icon.svg") no-repeat center / contain;
}

.jutsu-mode-wrapper.sage .jutsu-content-con {
    border-radius: 12px;
    border: 1px solid #FFD66E;
    background: linear-gradient(180deg, #FF841F 0%, #E86800 100%);
    padding: 14px;
}

.jutsu-mode-wrapper.sage .mode-content h3 {
    font-family: var(--thm-secondary-font);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;

    color: #FFF5EC;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #312C8D;
}

.jutsu-mode-wrapper.sage .game-btn {
    border-radius: 4px;
    background: #312C8D;
}

.sage-hamper-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;

    border-radius: 5px;
    border: 1px solid #FFB579;
    background: #FF8624;
    padding: 10px 14px;
}

.sage-gift-hamper-img {
    width: 36px;
    height: auto;
    display: block;
}

.hamper-text p {
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.jutsu-mode-wrapper.sage .jutsu-challenge-box {
    border-radius: 12px;
    border: 2px solid #EA7E26;
    background: #FDE8CC;
    box-shadow: none;
    min-height: calc(100dvh - 400px);
}

.jutsu-mode-wrapper.sage .jutsu-challenge-box h2 {
    color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.36px;
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-align: center;
    border-bottom: 1px solid #E1D8C7;
    width: 100%;
}

.jutsu-mode-wrapper.sage .jutsu-videos-row {
    padding-bottom: 1rem;
    padding-top: 1rem;
}

.jutsu-mode-wrapper.sage .btn-main {
    margin-bottom: 1rem;
}

/* SAGE SCREEN PAGE END */

/* JUTSU VIDEOS PREVIEW START */
.sage-title-timeline h3 {
    color: var(--thm-white);
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.4px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.sage-timeline {
    position: relative;
    width: 95%;
    height: 4px;
    background: #F6994D;
    /* timeline bar background */
    border-radius: 10px;
    margin: 40px auto;
}

/* Progress fill */
.sage-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: #FFDE50;
    /* fill color */
    border-radius: 10px;
    width: 0%;
    transition: width 0.4s ease;
}

/* Milestones */
.sage-milestone {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    /* border: 0.75px solid #EA7E26; */
    /* background: #FFEEC0; */
    z-index: 4;
}

.sage-milestone .box-card-time-img {
    width: 100%;
    max-width: 46px;
    height: auto;
}

.sage-milestone img {
    width: 100%;
    max-width: 28px;
    height: auto;
}

/* Milestone positions */
.sage-milestone-start {
    left: 0%;
    transform: translate(-10%, -50%);
}

.sage-milestone-mid {
    left: 50%;
    transform: translate(-50%, -50%);
}

.sage-milestone-end {
    right: 0%;
    transform: translate(20%, -50%);
}

/* Handle */
.sage-progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    /* background: #FFDE50; */
    border-radius: 50%;
    /* outline: 2px solid #FFDE50; */
    /* outline-offset: 2px; */
    z-index: 3;
    transition: left 0.4s ease;
}

.sage-video-con {
    border-radius: 12px;
    border: 2px solid #EA7E26;
    background: #FDE8CC;
    padding: 14px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: calc(100dvh - 302px);
    gap: 10px;
    position: relative;
}

/* Responsive video container */
.sage-video-con .video-wrapper {
    position: relative;
    width: 100%;
    /* optional: keeps it from getting too wide */
    aspect-ratio: 9 / 16;
    /* maintains video shape responsively */
    border-radius: 12px;
    overflow: hidden;
}

/* Make video fully responsive */
.sage-video-con .video-wrapper video {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    margin: 0 auto;
}

.sage-video-con .video-wrapper .btn-main {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #EA7E26;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.sage-video-con .video-wrapper .btn-main:hover {
    background: #d46d15;
}

.jutsu-mode-wrapper.sage .sage-video-con .btn-main {
    margin-bottom: 0.3rem;
    padding: 8px 12px 8px 16px;
    min-height: 44px;
}

.record-prev-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
    width: 100%;
    padding: 1rem;
}

.record-prev-box h2 {
    color: var(--thm-white);
    -webkit-text-stroke-width: 1.6px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0;
    margin-bottom: 0.8rem;
    text-align: center;
}

#app {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 0rem;
}

.sage-milestone .time-box-score {
    padding: 5px;
    border-radius: 8px;
    border: 1px solid #DAFFDE;
    background-color: #312C8D;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    max-width: 45px;
    min-height: 60px;
}

.sage-milestone .time-box-score.radial-bg {
    background: radial-gradient(50.15% 50% at 50% 50%, #8580DC 0%, #312C8D 100%);
}

.n-coin-img {
    width: 100%;
    display: flex;
    justify-self: center;
    align-items: center;
    flex-direction: column;
}

.n-coin-img img {
    width: 20px;
    height: auto;
    display: block;
}

.time-score {
    border-radius: 12px;
    background: linear-gradient(to bottom, #6d69b9 40%, #312C8D 60%);
    padding: 3px;
    width: 90%;
}

.time-score p {
    overflow: hidden;
    color: var(--thm-white);
    text-align: center;
    text-overflow: ellipsis;
    text-shadow: 0 0.7px 1px rgba(0, 0, 0, 0.80), 0 0.5px 0 #000;
    -webkit-text-stroke-width: 0.4px;
    -webkit-text-stroke-color: #3B3B3B;
    font-size: 12px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
    text-transform: uppercase;
}

.legendary-green {
    background-color: #276A2E !important;
}

.poor-red {
    background-color: #A10F0F !important;
}

.time-score.number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #312C8D;
    box-shadow: 2px -2px 2px #6d69b9;
}

.leg-sage-img {
    width: 100%;
    height: auto;
    display: block;
}

.tries-box {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #262171;
    position: relative;
    z-index: 2;
}

.try-img {
    width: 100%;
    height: auto;
}

.try-container .main-heading {
    margin-bottom: 1.5rem;
}

.try-container p.try-txt {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.36px;
    margin-top: 1rem;
}

.try-container .portal-content-box::before {
    display: none;
}

.boom-popup.try-container::after {
    z-index: 1;
}

.try-container .portal-content-box .main-heading {
    position: relative;
    width: 100%;
}

.try-container .portal-content-box .main-heading::after {
    content: "";
    position: absolute;
    left: -30px;
    top: 5px;
    width: 50px;
    height: 58px;
    background: url("../images/try-cloud-left-element.svg") no-repeat center center;
    background-size: contain;
}

.boom-popup.try-container .portal-content-box {
    width: 90%;
}

/* JUTSU VIDEOS PREVIEW END */

/* FOOTER SECTION START */
footer {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding: 0;

    z-index: 2;
}

.bottom-cloud {
    position: absolute;
    bottom: 0px;
    left: 0;
    max-width: 50px;
    width: 100%;
    height: auto;
    z-index: 1;
    opacity: 0.8;
}

.footer-box {
    display: flex;
    justify-content: space-between;
    align-items: end;

    background-color: transparent;
    border-radius: 0;
    padding: 12px 20px;
    position: relative;
    z-index: 2;
}

.footer-box .left-col {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;

    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.footer-box .right-col {
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 40%;
}

.footer-box .right-col p {
    text-align: right;
}

.foot-logo {
    max-width: 24px;
    width: 100%;
    height: auto;
    margin-right: 5px;
}

.footer-box ul li,
.footer-box p {
    color: var(--thm-white);
    font-size: 10px;
    line-height: 1.2;
}

/* FOOTER SECTION END */

/* 404 ERROR PAGE PAGE */
.error-wrapper {
    width: 100%;
    height: calc(100dvh - 103px);
    position: relative;
}

.error-wrapper-el-1 {
    position: absolute;
    right: 0;
    top: 2rem;
    width: 60px;
    height: auto;
}

.error-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.error-container-el-1 {
    position: absolute;
    left: 0;
    bottom: 13rem;
    width: 26px;
    height: auto;
}

.error-container-el-2 {
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 26px;
    height: auto;
}

.error-box {
    padding: 20px;
    position: relative;
}

.error-box-el-icon {
    position: absolute;
    top: -3rem;
    left: 0;
    width: 80px;
    height: auto;
}

.error-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.main-error-img {
    max-width: 260px;
    width: 100%;
    height: auto;
    display: block;
}

.error-text p {
    color: #312C8D;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin-bottom: 2rem;
    margin-top: 1rem;
}

.error-text .btn-main {
    height: 48px;

    color: #6D3917;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.2;
}

.error-footer-box {
    position: relative;
}

.error-element-footer-btm {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 135px;
    height: auto;
}

.error-element2-footer-btm {
    position: absolute;
    bottom: 4rem;
    right: 0;
    width: 35px;
    height: auto;
}

/* 404 ERROR PAGE END */

/* CONTACT US POPUP START */

.contact-us-popup {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.contact-us-popup .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.contact-us-popup .contact-content-box {
    padding: 50px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 100% !important;
}

.contact-pop-icon {
    margin-bottom: 1rem;
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
}

.contact-content-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.contactus-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.contactus-con::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.contactus-con::after {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.5rem;
    width: 60px;
    height: 47px;
    background-image: url('../images/contact-pop-ele-2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.contact-box {
    width: 90%;
}

.contact-box h3 {
    color: #FFFFF1;
    text-align: center;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.contact-box p {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin: 1rem 0;
}

.links-btn {
    display: flex;
    padding: 12px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #534FA5;
    color: var(--thm-white);
    text-decoration: none;

    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.contact-btn-txt {
    padding-top: 1rem;
}

.contact-btn-txt p {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin-bottom: 0rem;
    margin-top: 1rem;
}

/* CONTACT US POPUP END */

/* HOW TO PLAY AND WIN START */
.how-to-wrapper {
    background: #312C8D;
    padding: 20px;
    width: 100%;
    min-height: 100dvh;
    position: relative;
}

.how-to-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.how-to-container h1 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
}

.how-to-container h1 span {
    color: #FDB516;
}

.accordion {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.accordion .accordion-item {
    border-radius: 12px;
    border: 1px solid #5551A0;
    background: #383399;
    padding: 0 1rem 0rem 1rem;
    width: 100%;
}

.accordion .accordion-item button[aria-expanded='true'] {
    border-bottom: 0;
}

.accordion button {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: 1em 0;
    color: #7288a2;
    font-size: 1.15rem;
    font-weight: 400;
    border: none;
    background: none;
    outline: none;
}

.accordion button:hover,
.accordion button:focus {
    cursor: pointer;
    color: #03b5d2;
}

.accordion button:hover::after,
.accordion button:focus::after {
    cursor: pointer;
    color: #03b5d2;
    border: 1px solid #03b5d2;
}

.accordion button .accordion-title {
    padding: 0;
    color: var(--thm-white);
    /* -webkit-text-stroke-width: 0.8px; */
    /* -webkit-text-stroke-color: #312C8D; */
    font-family: var(--thm-secondary-font);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.36px;
}

.accordion button .icon {
    display: inline-block;
    position: absolute;
    top: 18px;
    right: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 22px;
}

.accordion button .icon::before {
    display: block;
    position: absolute;
    content: '';
    top: 9px;
    left: 5px;
    width: 10px;
    height: 2px;
    background: var(--thm-white);
}

.accordion button .icon::after {
    display: block;
    position: absolute;
    content: '';
    top: 5px;
    left: 9px;
    width: 2px;
    height: 10px;
    background: var(--thm-white);
}

.accordion button[aria-expanded='true'] {
    color: #03b5d2;
}

.accordion button[aria-expanded='true'] .icon::after {
    width: 0;
}

/* .accordion button[aria-expanded='true']+.accordion-content {
    opacity: 1;
    max-height: 100%;
    transition: all 200ms linear;
    will-change: opacity, max-height;
}

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height;
} */

.accordion button[aria-expanded='true']+.accordion-content {
    opacity: 1;
    max-height: 500px;
    /* set a fixed but large enough value */
    padding-bottom: 1rem;
    transition: all 0.4s ease-in-out;
}

.accordion .accordion-content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
}

.accordion .accordion-content p,
.accordion .accordion-content ul li {
    color: #DADADA;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-bottom: 1rem;
}

.accordion .accordion-content ul li {
    margin-bottom: 0;
}

.accordion .accordion-item:first-child button[aria-expanded='true']+.accordion-content {
    opacity: 1;
    /* max-height: 9em; */
}

.how-to-container .btn-main {
    width: 285px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 100%;
    text-decoration: none;
    line-height: 1.2;
    height: 44px;
    margin-top: 1rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.start-how-ele-icon {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: auto;
}

/* HOW TO PLAY AND WIN END */

/* OTHER TERMS PAGES START */
.main-wrapper-other {
    position: relative;
    width: 100%;
    max-width: 576px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(66, 222, 212, 1) 0%, rgba(33, 112, 232, 1) 100%);
    background-image: url("../images/privacy-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

/* Let the background height grow with content */
.misc-other-overlay {
    position: relative;
    /* change from absolute */
    width: 100%;
    height: auto;
}

.container-full-h {
    height: auto;
}

/* .main-wrapper-other {
    position: relative;
    width: 100%;
    max-width: 576px;
    height: 100%;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(66, 222, 212, 1) 0%, rgba(33, 112, 232, 1) 100%);
} */

/* .misc-other-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
} */

/* .container-full-h {
    height: 100%;
} */

.container-full-h .content-container {
    height: 100%;
}

.main-wrapper-other .main-bg {
    height: 100%;
}

.other-misc-wrapper {
    background: transparent;
    padding: 20px;
    width: 100%;
}

.other-misc-container h1 {
    color: var(--thm-white);
    text-align: center;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-weight: 400;
    font-style: normal;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.misc-content-con {
    display: flex;
    width: 100%;
    padding: 20px 20px 27px 20px;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    position: relative;
    z-index: 9;
}

.misc-content-sec h2 {
    color: #262171;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.misc-content-sec p,
.misc-content-sec ul li {
    color: #262171;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.misc-content-sec p a {
    text-decoration: none;
    text-decoration: underline;
    text-underline-offset: 2px;
    color: #262171;
}

.btm-elements-misc {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* OTHER TERMS PAGES END */

/* PROFILE PAGES START */
.pro-container-main {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    align-items: flex-start;
    height: 100dvh;
}

.pro-container-main header {
    background-image: url("../images/profile-header-bg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

.pro-container-main .content-wrapper {
    background-color: #312C8D;
    width: 100%;
    height: calc(100dvh - 55px);
    padding: 0;
}

.top-profile-box {
    padding: 30px 20px 20px 20px;
    width: 100%;
}

.user-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}

.user-head h3 {
    color: var(--thm-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    margin-top: 0;
    margin-bottom: 0.3rem;
    opacity: 0.3;
}

.user-name-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.user-name-box p {
    color: var(--thm-white);
    /* -webkit-text-stroke-width: 2px; */
    /* -webkit-text-stroke-color: #312C8D; */
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.56px;
}

.pro-info-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.pro-info-col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0 5px;
}

.pro-info-col .game-bal,
.pro-info-col .jutsu-mastered {
    display: inline-flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 9px;
    border-radius: 12px;
    border: 1px solid #5852BA;
    background: #262171;
    width: 100%;
}

.pro-info-col h3,
.profile-time-con h3 {
    color: var(--thm-white);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0.3;
}

.pro-info-col p {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
}

.profile-time-con {
    width: 100%;
    padding: 10px 5px 0px 5px;
}

.profile-time-con .profile-time-box {
    border-radius: 12px 16px 16px 16px;
    border: 1px solid #5852BA;
    background: #262171;
    padding: 12px 12px 20px 12px;
    width: 100%;
}

.profile-time-con .timeline {
    width: 90%;
    margin-bottom: 1.6rem;
}

.profile-time-con .timeline::after {
    content: "Start";
    position: absolute;
    bottom: -26px;
    left: -8px;
    display: inline-flex;
    padding: 2px 8px 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #1E1A66;
    color: #FFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.profile-time-con .timeline .progress-handle {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: #FFDE50;
    border-radius: 50%;
    border: 1px solid transparent;
    outline: 1px solid #FFDE50;
    outline-offset: 2px;
}

/* .profile-time-box .timeline .milestone.active {
    border: none;
    background: transparent;
    outline: 1px solid #FFDE50;
    outline-offset: 0px;
} */

.profile-time-box .timeline .milestone {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    /* position: relative; */
}

.profile-time-box .timeline .milestone-2 {
    right: 14px;
}

.milestone-label {
    position: absolute;
    bottom: -15px;
    /* moves text below the milestone */
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #fff;
    background: transparent;
    padding: 0;
    border-radius: 4px;
    white-space: nowrap;
    font-family: var(--thm-font);
}

.bottom-profile-box {
    border-radius: 20px 20px 0 0;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    width: 100%;
    height: calc(100dvh - 260px);
    padding: 30px 20px;
}

.pro-tab-con {
    width: 100%;
    padding-bottom: 1rem;
}

.pro-tab-box [data-tab-content] {
    display: none;
}

.pro-tab-box .active[data-tab-content] {
    display: block;
}

.pro-tab-box .tabs {
    display: flex;
    justify-content: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 5px;
    margin-bottom: 0.6rem;
    width: 100%;
}

.pro-tab-box .tab {
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #E4D0A7;

    color: #806858;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.28px;
    display: inline-block;
    width: 100%;
    text-align: center;
}

.pro-tab-box .tab.active {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid #EA7E26;
    background: #FFEEC0;

    color: #6D3917;
    font-weight: 600;
}

.pro-tab-box .tab:hover {
    background-color: #FFEEC0;
}

.pro-tab-box .tab-content {
    margin-left: 0px;
    margin-right: 0px;
}

/* .reward-card-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
} */



.reward-card-row {
    max-height: 45dvh;
    overflow-y: auto;
    padding-right: 8px;
    overflow-y: auto;
    width: 100%;
    padding-right: 10px;
    scrollbar-width: thin;
    border-radius: 6px;
    scrollbar-color: #EA7E26 #5551A0;
    /* thumb + track */
}

.reward-card-row::-webkit-scrollbar {
    width: 6px;
    border-radius: 6px;
}

.reward-card-row::-webkit-scrollbar-track {
    background-color: #5551A0;
    border-radius: 12px;
    /* Scrollbar track background */
}

.reward-card-row::-webkit-scrollbar-thumb {
    background-color: #EA7E26;
    /* Scrollbar thumb */
    border-radius: 12px;
}

.rewards-timeline {
    right: -10px;
}

.reward-card {
    background-image: url("../images/your-rewards-bg-card.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 1.6rem 1.6rem;
    margin-bottom: 10px;
}

.reward-img img {
    width: 108px;
    height: auto;
}

.reward-card .reward-text {
    -ms-flex: 0 0 60%;
    flex: 0 0 60%;
    max-width: 60%;
}

.reward-text .date {
    color: #806858;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.reward-text h3 {
    color: #021244;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin: 0.5rem 0;
    max-width: 180px;
    width: 100%;
}

.btm-reward-txt {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.btm-reward-txt.end {
    display: flex;
    justify-content: flex-end;
}

.red-btn {
    color: #EA7E26;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 6%;
    text-underline-offset: 25%;
}

.btm-reward-txt p {
    color: #806858;
    text-align: right;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.bottom-foot-box {
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;

    position: absolute;
    right: 20px;
    bottom: 10px;
}

.bottom-foot-box p {
    color: var(--thm-black);
    font-size: 10px;
    line-height: 1.2;
}

/* Results Popup Start */
.popup-overlay.results-overlay-bg {
    background: rgba(14, 46, 84, 0.75);
}

.results-pop-con {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;

    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #262171;
    min-height: 80dvh;
}

.results-pop-con .results-pop-box {
    padding: 30px 30px 0 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}

.results-pop-box .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.result-pop-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    position: relative;
}

.result-pop-content h2 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.result-scroll-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 65dvh;
    /* adjust based on design */
    overflow-y: auto;
    padding-right: 18px;
    /* space for scrollbar */
}

/* Optional: Hide scrollbar for cleaner look (works for Webkit browsers like Chrome, Edge, Safari) */
.result-scroll-list::-webkit-scrollbar {
    width: 3px;
    background-color: #5551A0;
    border-radius: 6px;
}

.result-scroll-list::-webkit-scrollbar-thumb {
    background-color: #EA7E26;
    border-radius: 12px;
}

.result-scroll-list::-webkit-scrollbar-track {
    background-color: transparent;
}

.result-list-box {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.result-list-box li {
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid #383399;
}

/* Results Popup End */

/* CLAIM POPUP START */

.claim-pro-popup {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.claim-pro-popup .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.claim-pro-popup .claim-pro-content-box {
    padding: 50px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 100% !important;
}

.claim-pro-pop-icon {
    margin-bottom: 1rem;
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
}

.claim-pro-content-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.claim-pro-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    position: relative;
}

.claim-voucher-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 14px;
}

.voucher-text {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
    max-width: 240px;
}

.voucher-text .date {
    color: #B0ACFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    text-align: left;
}

.voucher-text h4 {
    color: var(--thm-white);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.32px;
    text-align: left;
    margin-top: 10px;
    margin-bottom: 1rem;
}

.voucher-img img {
    width: 100px;
    height: auto;
    display: block;
}

.copy-links-btn {
    width: 100%;
    display: inline-flex;
    padding: 12px 16px 10px 16px;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #534FA5;

    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 1.12px;
    text-decoration: none;
}

.btm-voucher-text {
    color: #B0ACFF;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    margin-top: 10px;
    margin-bottom: 1rem;
}

/* CLAIM POPUP END */

/* Share the Fun Tab Start */
.share-treat-box h2 {
    color: #6D3917;
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.share-treat-box p {
    color: #021244;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.share-treat-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.share-treat-con {
    width: 100%;
}

.share-naruto-treat-box {
    padding: 1rem 0;
}

.share-naruto-img img {
    width: 100%;
    max-width: 230px;
    display: block;
    height: auto;
}

.share-naruto-treat-box .copy-links-btn {
    border: 2px solid #304146;
    box-shadow: 5px -4px 0 0 rgba(240, 128, 88, 0.54) inset;
    background-color: #fdede6;
    border-radius: 8px;
    padding: 10px 14px;

    overflow: hidden;
    color: #1A2634;
    text-overflow: ellipsis;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 3.2px;
}

.invite-btn {
    color: #6D3917;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

/* Share the Fun Tab End */

/* Past Scan Tab Start */
.past-scan-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.past-scan-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: 100%;

    padding: 10px;
    border-radius: 12px;
    background: #FFEECB;
}

.col-left,
.col-right {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.col-right {
    text-align: end;
}

.past-scan-box .ref-number {
    color: #6D3917;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.4px;
}

.past-scan-box .numb-times {
    color: #6D3917;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.4px;
}

.past-scan-box .cat-name {
    color: #806858;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.timestamp {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.datetime {
    color: #806858;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.time-icon {
    width: 12px;
    height: 12px;
    display: block;
    margin-right: 5px;
}

.no-data-con {
    width: 100%;
    height: calc(100dvh - 440px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-data-box {
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.no-data-box h3 {
    color: #6D3917;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 10px;
}

.no-data-box p {
    color: #806858;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Past Scan Tab End */
/* PROFILE PAGES END */

/* LOADER PAGE START */
.loader-wrapper {
    width: 100%;
    height: 100dvh;
    position: relative;
}

.loader-wrapper-el-1 {
    position: absolute;
    right: 0;
    top: 2rem;
    width: 60px;
    height: auto;
}

.loader-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.loader-container-el-1 {
    position: absolute;
    left: 0;
    bottom: 13rem;
    width: 26px;
    height: auto;
}

.loader-container-el-2 {
    position: absolute;
    right: 0;
    bottom: 50%;
    width: 26px;
    height: auto;
}

.loader-box {
    padding: 20px;
    position: relative;
}

.loader-box-el-icon {
    position: absolute;
    top: -1.5rem;
    left: 1.5rem;
    width: 80px;
    height: auto;
}

.loader-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.main-loader-img {
    max-width: 200px;
    width: 100%;
    height: auto;
    display: block;
}

.main-bis-img {
    max-width: 260px;
    width: 100%;
    height: auto;
    display: block;
}

.error-footer-box {
    position: relative;
}

.error-element-footer-btm {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 135px;
    height: auto;
}

.error-element2-footer-btm {
    position: absolute;
    bottom: 4rem;
    right: 0;
    width: 35px;
    height: auto;
}

.liquid-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 0px 20px 20px 20px;
    font-family: system-ui, sans-serif;
}

.loader-track {
    position: relative;
    width: 280px;
    height: 16px;
    border-radius: 12px;
    border: 1px solid #FFF;
    background: #31BEDF;
    overflow: hidden;
    /* box-shadow:
        inset 0 2px 4px rgba(0, 0, 0, 0.6),
        0 1px 3px rgba(255, 255, 255, 0.1); */
}

.liquid-fill {
    position: absolute;
    top: 2px;
    left: 2px;
    height: calc(100% - 4px);
    border-radius: 20px;
    background: linear-gradient(106deg, #FFE6D2 2.86%, #EA7E26 58.11%);
    animation:
        fillProgress 4s ease-out infinite;
    box-shadow:
        0 0 12px rgba(124, 58, 237, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

.loading-text {
    color: #021244;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.28px;
    animation: textGlow 1s ease-in-out infinite;
    margin-top: 10px;
    font-family: var(--thm-font);
}

.dot {
    margin-left: 3px;
    animation: blink 1.5s infinite;
}

.dot:nth-of-type(1) {
    animation-delay: 0s;
}

.dot:nth-of-type(2) {
    animation-delay: 0.3s;
}

.dot:nth-of-type(3) {
    animation-delay: 0.6s;
}

@keyframes fillProgress {
    0% {
        width: 4px;
    }

    25% {
        width: 25%;
    }

    50% {
        width: 50%;
    }

    75% {
        width: 75%;
    }

    100% {
        width: calc(100% - 4px);
    }
}

@keyframes textGlow {

    0%,
    100% {
        opacity: 0.7;
        text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
    }

    50% {
        opacity: 1;
        text-shadow: 0 0 16px rgba(139, 92, 246, 0.6);
    }
}

@keyframes blink {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0;
    }
}

/* LOADER PAGE END */

/* OLD LEADERBOARD PAGE START */
.leaderboard-wrapper {
    background: #312C8D;
    padding: 20px;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* place internal image using ::before */
.leaderboard-wrapper::before {
    content: "";
    position: absolute;
    left: -26px;
    top: 20px;
    width: 100px;
    height: 80px;
    background-image: url("../images/leaderboard-top-element-1.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.leaderboard-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.top-head {
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

.leaderboard-container h1 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0rem;
    margin-bottom: 0.6rem;
}

.leaderboard-container h1 span {
    color: #FDB516;
}

.result-date {
    border-radius: 4px;
    border: 1px solid #7670E8;
    background: #262171;

    display: flex;
    width: 185px;
    padding: 8px 16px;
    justify-content: space-between;
    align-items: center;

    color: var(--thm-white);
    font-family: var(--thm-font);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

/* Leaderboard container */
.leaderboard-scoreboard {
    display: block;
    width: 100%;
}

.lead-bars-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

.lead-bars-con::before {
    content: "";
    position: absolute;
    left: -41px;
    bottom: 10px;
    width: 79px;
    height: 62px;
    background-image: url("../images/leaderboard-element-icon-1.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.lead-bars-con::after {
    content: "";
    position: absolute;
    right: -50px;
    top: 18px;
    width: 102px;
    height: 80px;
    background-image: url("../images/leaderboard-element-icon-2.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 2;
}

.lead-bar-box {
    max-width: 245px;
    width: 100%;
    padding-top: 4rem;
}

.leaderboard-podium {
    display: flex;
    align-items: flex-end;
    gap: 0px;
}

/* Podium Base Styles */
.leaderboard-podium .podium {
    width: 130px;
    border-radius: 0px;
    background: linear-gradient(180deg, #b9b1f5 0%, #826ce4 100%);
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 25px;
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

/* 3D Top Shape */
.leaderboard-podium .podium .top {
    position: absolute;
    top: -15px;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(180deg, #d7d3fa 0%, #b1a4f3 100%);
}

.leaderboard-podium .second .top {
    clip-path: polygon(0 100%, 20% 0, 102% 0, 102% 100%);
}

.leaderboard-podium .first .top {
    clip-path: polygon(0 100%, 20% 0, 80% 0, 100% 100%);
}

.leaderboard-podium .third .top {
    clip-path: polygon(0 100%, -2% 0, 80% 0, 100% 100%);
}

/* Different Heights */
.leaderboard-podium .first {
    height: 160px;
    justify-content: flex-start;
}

.leaderboard-podium .second {
    height: 100px;
}

.leaderboard-podium .third {
    height: 80px;
}

/* Username Styling */
.leaderboard-podium .username {
    position: absolute;
    top: -45px;
    white-space: nowrap;

    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
}

/* Number Circle */
.leaderboard-podium .circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #554FC0;
    color: var(--thm-white);
    font-size: 1.5rem;
    line-height: 1.2;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.lead-rank-con {
    width: 100%;
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    padding: 14px 10px;
}

.rank-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 10px 10px 5px 10px;
    /* border-bottom: 2px solid #EA7E26; */
    /* margin-bottom: 8px; */
}

.rank-title,
.username-title {
    font-family: var(--thm-font);
    color: #806858;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
}

.rank-title {
    width: 50px;
    text-align: center;
    padding-right: 10px;
}

.username-title {
    flex: 1;
}

.rank-item {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #E4D0A7;
    padding: 10px 10px;
    transition: all 0.3s ease;
}

.rank-item:last-child {
    border-bottom: none;
}

.rank-item.active {
    background: #FFEFBF;
}

.rank-circle {
    background: #2E2372;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 14px;
    font-family: var(--thm-font);
}

.rank-item .username {
    font-family: var(--thm-secondary-font);
    color: #6D3917;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.32px;
}

/* OLD LEADERBOARD PAGE END */

/* LEADERBOARD PAGE START */
.results-wrapper {
    background: #312C8D;
    padding: 20px;
    width: 100%;
    min-height: 100dvh;
    position: relative;
    overflow: hidden;
}

.results-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.results-container .top-head {
    max-width: 208px;
    width: 100%;
}

.results-container .top-head h1 {
    color: #FDB516;
    text-align: center;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.results-container .top-head p {
    color: var(--thm-white);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.results-list-con {
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 0.6rem 0;
}

.results-list-con .results-cloud-el-1 {
    position: absolute;
    top: -53px;
    right: -22px;
    width: 40px;
    height: auto;
    z-index: 1;
}

.results-list-con .results-cloud-el-2 {
    position: absolute;
    bottom: -38px;
    left: -22px;
    width: 40px;
    height: auto;
    z-index: -1;
}

.results-list .result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.95rem 1rem;
    gap: 10px;
    border-radius: 12px;
    border: 1px solid #5551A0;
    background: #383399;
    margin-bottom: 8px;

    color: var(--thm-white);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.32px;
    text-decoration: none;
}

.results-list .result-item .arrow img {
    width: 12px;
    height: auto;
}

/* LEADERBOARD PAGE END */

/* DESKTOP PAGE START */
.desktop-wrapper {
    background-image: url("../images/desktop-screen-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    height: 100dvh;
    position: relative;
}

.desk-el-icon-1 {
    position: absolute;
    left: 0;
    top: 4rem;
    width: 100px;
    height: auto;
}

.desk-el-icon-2 {
    position: absolute;
    right: 0;
    top: 12rem;
    width: 80px;
    height: auto;
}

.desk-el-icon-3 {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 326px;
    height: auto;
}

.desk-el-icon-4 {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 326px;
    height: auto;
}

.desktop-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    width: 100%;
    height: 100%;
}

.desktop-main {
    padding: 2rem;
}

.head-logo {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 1rem;
}

.desk-logo {
    width: 293px;
    height: auto;
    display: block;
}

.content-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.content-col {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.desktop-content {
    width: 100%;
    position: relative;
}

.desktop-content .main-desk-con {
    width: 716px;
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    padding: 2rem;
    margin: 3rem 0;

    position: relative;
    z-index: 2;
}

.con-desk-icon-1 {
    position: absolute;
    left: -38px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: auto;
    z-index: 1;
}

.con-desk-icon-2 {
    position: absolute;
    right: -64px;
    bottom: -56px;
    width: 106px;
    height: auto;
    z-index: 1;
}

.desk-qr {
    width: 196px;
    height: auto;
    display: block;
    margin-bottom: 1rem;
}

.content-left img {
    width: 100%;
    max-width: 108px;
    height: auto;
    display: block;
    margin-bottom: 0;
}

.content-left h3 {
    color: #6D3917;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.48px;
    margin: 1rem 0;
}

.content-left p {
    color: #6D3917;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.36px;
}

.content-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.content-right p {
    color: #6D3917;
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.32px;
}

/* Default: Desktop view */
.d-block-web {
    display: block;
}

.d-none-web {
    display: none;
}

.d-block-mob {
    display: none;
}

.d-none-mob {
    display: block;
}

/* DESKTOP PAGE END */

/* SCREEN ORIENTAION LANDSCAPE POPUP START */
/* Landscape popup styling */
#landscape-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.80);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.landscape-popup-box {
    border-radius: 12px;
    border: 1px solid #EA7E26;
    background: #FFF3DB;
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    width: 310px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.landscape-popup-box h3 {
    color: #6D3917;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.36px;
    margin: 1rem 0;
}

.landscape-popup-box p {
    font-size: 14px;
    color: #555;
    margin-top: 6px;
}

.ori-rotate-icon {
    width: 100px;
    height: auto;
}

.rotate-error-box {
    display: inline-flex;
    padding: 5px 10px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 4px;
    background: rgba(215, 41, 44, 0.08);
    width: 100%;
    max-width: 204px;
}

.rotate-error-box p {
    color: #D7292C;
    text-align: center;
    font-size: 10px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.2px;
    margin: 0;
}

/* SCREEN ORIENTAION LANDSCAPE POPUP END */

/* UAT SCREENS START */
/* Keep popup visible and on top */
.uat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    /* optional overlay background */
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 99999;
    /* ensures it stays above everything */
    opacity: 1;
    visibility: visible;
}

/* Popup container styling */
.uat-popup-con {
    z-index: 100000;
    /* ensure popup content is above overlay */
}

.uat-popup-con {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 2.6rem 1rem 1rem 1rem;
    min-height: 90dvh;
}

.uat-popup-con::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 74px;
    height: 100vh;
    z-index: -1;
    background-image: url('../images/tell-cloud-element-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.uat-content-box {
    width: 100%;
}

.uat-txt-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.uat-content-box .main-heading {
    color: #FFFFF1;
    text-align: center;
    -webkit-text-stroke-width: 0.8px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    padding: 0;
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 0.8rem;
}

.uat-content-box p {
    color: var(--thm-white);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.tell-us-form {
    width: 100%;
    padding: 1.5rem 0;
    position: relative;
}

.tell-cloud-element-1 {
    position: absolute;
    left: -50px;
    top: 0;
    width: 80px;
    height: 58px;
    z-index: -1;
}

.tell-cloud-element-2 {
    position: absolute;
    right: -40px;
    bottom: 0;
    width: 80px;
    height: 58px;
    z-index: -1;
}

.tell-us-form form {
    width: 100%;
    height: 100%;
}

.form-inner-tell {
    width: 100%;
    min-height: 50dvh;
    /* min-height: 340px; */
}

.input-field-box {
    position: relative;
    width: 100%;
}

.input-field-box::after {
    content: "";
    position: absolute;
    right: -54px;
    bottom: -58px;
    width: 80px;
    height: 58px;
    z-index: -1;
    background-image: url('../images/cloud-ready-to-master.svg');
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.tell-us-form form .form-control {
    display: flex;
    height: 54px;
    padding: 8px 16px;
    align-items: center;
    gap: 4px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #312C8D;
    background: #FFF;
    box-shadow: 1px 2px 0 0 #0C51A1;
    width: 100%;
    outline: none;
    margin-bottom: 1rem;

    overflow: hidden;
    color: #71708B;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    font-family: var(--thm-font);

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.gender-input-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 4px;
    width: 100%;
    height: 64px !important;
}

.gender-input-field label {
    overflow: hidden;
    color: #71708B;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    font-family: var(--thm-font);
}

/* Style the select dropdown */
.gender-input-field select {
    width: 100%;
    padding: 0px;
    /* space on right for arrow */
    border-radius: 8px;
    background: #FFF url('data:image/svg+xml;utf8,<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3396 4.29073L9.4126 0.217484C9.5511 0.0791503 9.72519 0.00831752 9.93485 0.00498394C10.1444 0.00181726 10.3216 0.07265 10.4666 0.217484C10.6114 0.362484 10.6839 0.538151 10.6839 0.744484C10.6839 0.950817 10.6114 1.12648 10.4666 1.27148L5.97235 5.76573C5.87869 5.85923 5.77994 5.92523 5.6761 5.96373C5.57227 6.00223 5.4601 6.02148 5.3396 6.02148C5.2191 6.02148 5.10694 6.00223 5.0031 5.96373C4.89927 5.92523 4.80052 5.85923 4.70685 5.76573L0.212601 1.27148C0.0742681 1.13298 0.00343475 0.958901 0.000101402 0.749235C-0.00306527 0.539735 0.0677681 0.362484 0.212601 0.217484C0.357601 0.0726504 0.533268 0.000234104 0.739602 0.000234095C0.945935 0.000234086 1.1216 0.0726504 1.2666 0.217484L5.3396 4.29073Z" fill="%23312C8D"/></svg>') no-repeat right 12px center;
    background-size: 11px auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: #312C8D;
    cursor: pointer;
    outline: none;
    border: none;
}

/* Style the select dropdown */
.form-group select.form-control {
    width: 100%;
    padding: 8px 16px;
    /* space on right for arrow */
    border-radius: 8px;
    background: #FFF url('data:image/svg+xml;utf8,<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3396 4.29073L9.4126 0.217484C9.5511 0.0791503 9.72519 0.00831752 9.93485 0.00498394C10.1444 0.00181726 10.3216 0.07265 10.4666 0.217484C10.6114 0.362484 10.6839 0.538151 10.6839 0.744484C10.6839 0.950817 10.6114 1.12648 10.4666 1.27148L5.97235 5.76573C5.87869 5.85923 5.77994 5.92523 5.6761 5.96373C5.57227 6.00223 5.4601 6.02148 5.3396 6.02148C5.2191 6.02148 5.10694 6.00223 5.0031 5.96373C4.89927 5.92523 4.80052 5.85923 4.70685 5.76573L0.212601 1.27148C0.0742681 1.13298 0.00343475 0.958901 0.000101402 0.749235C-0.00306527 0.539735 0.0677681 0.362484 0.212601 0.217484C0.357601 0.0726504 0.533268 0.000234104 0.739602 0.000234095C0.945935 0.000234086 1.1216 0.0726504 1.2666 0.217484L5.3396 4.29073Z" fill="%23312C8D"/></svg>') no-repeat right 12px center;
    background-size: 11px auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    outline: none;
    border: none;

    overflow: hidden;
    color: #71708B;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.tell-us-form form button {
    height: 48px;
}

/* UAT SCREENS END */

/* AVATAR PAGE START */

.avatar-top-content {
    border-radius: 12px;
    border: 2px solid #EA7E26;
    background: #FFF3DB;
    padding: 12px 0px 0 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    /* height: calc(100dvh - 295px); */
    margin: 1rem 0;
}

.avt-cloud-el-1 {
    position: absolute;
    left: -10px;
    top: 35%;
    z-index: 1;
    width: 43px;
    height: auto;
}

.avt-cloud-el-2 {
    position: absolute;
    right: 0;
    bottom: 28%;
    z-index: 1;
    width: 43px;
    height: auto;
}

.av-img-temp-box::before {
    content: "";
    position: absolute;
    right: -32px;
    top: -35px;
    width: 76px;
    height: 110px;
    background: url("../images/avatar-naruto.svg") no-repeat center center;
    background-size: contain;
    z-index: 4;

}

.av-logo-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-bottom: 0.8rem;
}

.av-logo-box .av-brit-logo {
    max-width: 70px;
    height: auto;
    margin-bottom: 0.5rem;
}

.av-logo-box .unleash-img-av {
    max-width: 114px;
    height: auto;
}

.av-img-temp-box {
    border-radius: 4px;
    border: 2px solid #EA7E26;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    position: relative;
    z-index: 3;
    height: calc(100dvh - 456px);
}


.av-img-temp-box::after {
    border-radius: 4px;
    border: 2px solid #EA7E26;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 80%;
    content: 'Please wait...';
    position: relative;
    z-index: 3;
    height: calc(100dvh - 456px);
}

.av-foot-temp-box {
    display: flex;
    justify-content: space-between;
    align-items: end;
    background-color: transparent;
    border-radius: 0;
    padding: 0 8px 6px 8px;
    position: relative;
    z-index: 2;
    background: #FFF3DB;
}

.bottom-con-av {
    width: 100%;
    position: relative;
    margin-top: -47px;
    z-index: 3;
}

.bottom-con-av .biscuit-avt-img {
    position: absolute;
    width: 90px;
    height: auto;
    top: -45px;
    left: 10px;
    z-index: 1;
}

.bottom-con-av .btm-avt-img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
}

.avatar-bottom-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.av-foot-temp-box ul li,
.av-foot-temp-box p {
    font-size: 7px;
    line-height: 1.2;
    font-weight: 400;
}

.av-foot-temp-box .left-col {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.av-foot-logo {
    max-width: 16px;
    width: 100%;
    height: auto;
    margin-right: 5px;
}

.avatar-bottom-content h2 {
    color: var(--thm-white);
    text-align: center;
    -webkit-text-stroke-width: 1.8px;
    -webkit-text-stroke-color: #312C8D;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.56px;
    padding: 0;
    background-color: transparent;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.avatar-bottom-content h2 span {
    color: #FDB516;
}

.avatar-bottom-content p {
    color: #021244;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0.28px;
    margin-bottom: 0.2rem;
    max-width: 290px;
    width: 100%;
}

.share-av-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.line-btn {
    color: #312C8D;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    margin-top: 0.9rem;
}

/* AVATAR PAGE END */

/* SIGN WITH MERCH/CASH PAGE START */
.sign-merch-cash-con .logo-splash {
    max-width: 56px;
}

.sign-merch-cash-con .unleash-naruto {
    max-width: 100px;
}

.sign-merch-cash-con {
    height: calc(100% - 285px);
}

.merch-cash-reward-con {
    position: relative;
    z-index: 1;
}

.merch-cash-reward-con .register-clouds {
    width: 100%;
}

.merch-cash-reward-box {
    width: 100%;
    background-color: #312C8D;
    background-image: url("../images/register-celebration.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    padding-top: 10px;

    position: absolute;
    top: 47px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 2;

    border-radius: 20px 20px 0 0;
}

.merch-cash-reward-box h3 {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    letter-spacing: 2%;
}

.merch-cash-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 1rem;
    background-color: #312C8D;
}

.merch-box,
.cash-box {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;

    height: 110px;
    text-align: center;
    background: linear-gradient(180deg, #CE9479 0%, #FFEEC0 100%);
    border: 1px solid #EA7E26;
    border-radius: 8px;
    position: relative;
}

.img-box-ms {
    width: 60%;
}

.text-over {
    color: #66350E;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2%;

    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
}

.sign-merch-cash-con .top-naruto {
    padding-bottom: 6px;
}

.reg-btn-con .btn-main {
    height: 38px;
    min-width: 240px;
    width: 100%;
}

.reg-btn-con .login-text,
.reg-btn-con .login-text a {
    color: #312C8D;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
}

.reg-btn-con .login-text a {
    text-underline-offset: 3px;
}

.merch-cash-reward-box .footer-box {
    background-color: #312C8D;
}

.merch-cash-reward-box footer .bottom-cloud {
    z-index: 1;
    max-width: 40px;
}

.merch-cash-reward-box .foot-logo {
    z-index: 2;
}

.sign-merch-cash-con .naruto {
    max-width: 60%;
}

.sign-merch-cash-con .text-bar.naruto-treat-bar img {
    width: 70%;
}

.sign-merch-cash-con .naruto-treat-bar {
    max-width: 180px;
    margin-top: -16px;
}

.merch-cash-reward-box .footer-box ul li,
.merch-cash-reward-box .footer-box p {
    color: var(--thm-white);
    font-size: 8px;
    line-height: 1.2;
}

/* SIGN WITH MERCH/CASH PAGE END */

/* RESPONSIVE MEDIA QUERIES START */

@media (min-width: 1200px) {
    .d-none-web {
        display: none;
    }

    .d-block-web {
        display: block;
    }
}

@media (min-height: 850px) {
    .text-bar {
        margin-top: -27px;
    }

    .sign-merch-cash-con .naruto {
        max-width: 75%;
    }

    .sign-merch-cash-con .unleash-naruto {
        max-width: 120px;
    }

    .sign-merch-cash-con .text-bar.naruto-treat-bar img {
        width: 90%;
    }

    .sign-merch-cash-con .logo-splash {
        max-width: 70px;
    }

    .reg-btn-con .btn-main {
        height: 38px;
        min-width: 240px;
    }

    .sign-merch-cash-con .naruto-treat-bar {
        max-width: 190px;
        margin-top: -18px;
    }

}

@media (min-height: 750px) {

    /* Home page Start */
    .unlcok-biscuit-img {
        max-width: 150px;
        width: 150px;
    }

    .gamechallenge-btn {
        margin: 1rem auto;
    }

    /* .content-box .main-heading {
        font-size: 1.75rem;
    } */

    .unlock-box .left-side p {
        font-size: 14px;
    }

    .time-content h3 {
        font-size: 1.25rem;
    }

    .time-content p {
        font-size: 14px;
    }

    .btm-game-box::before {
        height: 80px;
    }

    .record-naruto-img {
        max-width: 200px;
    }

    .record-naruto {
        height: calc(100dvh - 542px);
    }

    /* Home page End */
    .after-scan-con .mode-item .mode-content h3 {
        font-size: 1.375rem;
    }

    .after-scan-con .mode-content p {
        font-size: 14px;
    }

    .timeline-mode-con {
        padding: 10px 10px;
    }

    .milestone {
        width: 44px;
        height: 44px;
    }

    .mode-item .lock-box,
    .mode-item.active .lock-box {
        width: 36px;
        height: 36px;
    }

    .after-scan-con .mode-item {
        margin-bottom: 12px;
    }

    .after-scan-con .gamechallenge-btn {
        margin: 20px auto;
    }

    .jutsu-content-con {
        padding: 14px 14px;
        margin-top: 20px;
    }

    .jutsu-content-con .milestone {
        width: 52px;
        height: 52px;
    }

    .ninja-mode-box .mode-content p {
        font-size: 14px;
    }

    .jutsu-challenge-box h2 {
        margin-bottom: 1rem;
        margin-top: 1rem;
        padding-bottom: 1rem;
    }

    .jutsu-mode-wrapper {
        gap: 20px;
    }

    .cong-text h2 {
        font-size: 2.25rem;
    }

    .cong-text p {
        font-size: 14px;
    }

    .naruto {
        max-width: 100%;
    }

    .jutsu-videos-row {
        gap: 0;
    }

    .challenge-video-col {
        -ms-flex: 0 0 33.33%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding: 10px;
    }

    .lrg-cont .naruto {
        max-width: 260px;
        width: 100%;
    }

}

@media (min-height: 700px) {
    .home-sign-login-con .naruto {
        max-width: 100%;
    }

    .home-sign-login-con .text-bar {
        max-width: 260px;
    }

    .home-sign-login-con .logo-splash {
        max-width: 100px;
    }

    .home-sign-login-con .unleash-naruto {
        max-width: 160px;
        margin-bottom: 1rem;
    }

    .home-sign-login-con .btn-main {
        height: 50px;
        margin-top: 0.4rem;
    }

    .sign-merch-cash-con .naruto {
        max-width: 70%;
    }

    .sign-merch-cash-con .unleash-naruto {
        max-width: 110px;
    }

    .sign-merch-cash-con .text-bar.naruto-treat-bar img {
        width: 85%;
    }

    .sign-merch-cash-con .logo-splash {
        max-width: 60px;
    }

    .reg-btn-con .btn-main {
        height: 38px;
        min-width: 240px;
    }

    .sign-merch-cash-con .naruto-treat-bar {
        max-width: 180px;
        margin-top: -20px;
    }

    .merch-box,
    .cash-box {
        height: 120px;
    }

    .img-box-ms {
        width: 60%;
    }
}

@media screen and (max-width: 1350px) and (max-height: 750px) {
    .desk-el-icon-1 {
        width: 60px;
    }

    .desk-el-icon-2 {
        top: 10rem;
        width: 66px;
    }

    .desk-el-icon-3 {
        width: 230px;
    }

    .desk-el-icon-4 {
        width: 230px;
    }

    .con-desk-icon-1 {
        left: -30px;
        width: 60px;
    }

    .con-desk-icon-2 {
        right: -41px;
        bottom: -29px;
        width: 65px;
    }

    .desk-logo {
        width: 180px;
    }

    .desktop-content .main-desk-con {
        margin: 1rem 0;
    }
}

@media screen and (max-width: 1200px) and (max-height: 675px) {
    .desk-el-icon-1 {
        width: 60px;
    }

    .desk-el-icon-2 {
        top: 10rem;
        width: 66px;
    }

    .desk-el-icon-3 {
        width: 230px;
    }

    .desk-el-icon-4 {
        width: 230px;
    }

    .con-desk-icon-2 {
        right: -53px;
        bottom: -37px;
        width: 85px;
    }

    .desk-logo {
        width: 230px;
    }

    .desktop-content .main-desk-con {
        margin: 1rem 0;
    }
}

@media (max-width: 1200px) {
    .d-block-web {
        display: none !important;
    }

    .d-none-web {
        display: block !important;
    }

    .d-block-mob {
        display: block !important;
    }

    .d-none-mob {
        display: none !important;
    }
}

@media (max-height: 950px) {

    /* Home page Start */
    .bottom-gameplay-con {
        height: calc(100dvh - 430px);
    }

    .unlcok-biscuit-img {
        max-width: 136px;
    }

    .unlock-img {
        width: 235px;
        right: -35px;
    }

    .mode-item {
        margin-bottom: 15px;
    }

    .gamechallenge-btn {
        margin: 1.5rem auto;
    }

    /* Home page End */

    .after-scan-con .bottom-gameplay-con {
        height: calc(100dvh - 310px);
    }

    .sage-biscuit-img {
        max-width: 225px;
    }
}

@media (max-height: 800px) {
    .lrg-cont .naruto {
        max-width: 280px;
        width: 100%;
    }

    .form-box form .form-control {
        height: 36px;
    }

    .bottom-gameplay-con {
        height: calc(100dvh - 375px);
    }

    .unlock-img {
        width: 200px;
        right: -35px;
    }

    .offcanvas-content {
        padding: 20px 20px;
    }

    .offcanvas-logo {
        max-width: 90px;
    }

    .offcanvas-close {
        width: 16px;
        height: 16px;
    }

    .lead-info-inner-box p.number-data {
        font-size: 1.1rem;
    }

    .offcanvas-links li {
        margin: 10px 0;
    }

    /* .offcanvas-social-links {
        bottom: 2rem;
    } */

    .offcanvas-links a {
        padding: 6px;
    }

    .menu-text-item {
        font-size: 1rem;
    }

    .menu-cont-item .left-icon img {
        width: 30px;
        height: 30px;
    }

    .challenge-video-box img {
        width: 95%;
    }

    .jutsu-challenge-box h2 {
        margin-top: 0.5rem;
    }

    .how-to-container h1 {
        font-size: 1.2rem;
        margin-top: 0.6rem;
        margin-bottom: 1rem;
    }

    .accordion button {
        padding: 0.6em 0;
    }

    .accordion button .accordion-title {
        font-size: 1rem;
    }

    .accordion button .icon {
        top: 12px;
    }

    .share-naruto-img img {
        max-width: 200px;
    }

    .share-treat-box p {
        font-size: 12px;
    }
}

@media (max-height: 750px) {
    .jutsu-mode-wrapper {
        gap: 12px;
    }

    .sage-video-con {
        height: calc(100dvh - 282px);
    }

}

@media (max-height: 740px) {
    .logo-splash {
        max-width: 70px;
    }

    .unleash-naruto {
        max-width: 110px;
    }

    .mid-naruto-box::before {
        left: -50px;
        top: -8px;
    }

    .mid-naruto-box::after {
        right: -50px;
        top: -8px;
    }

    .text-bar {
        max-width: 210px;
    }

    .text-bar h2 {
        font-size: 1.1rem;
    }

    .text-content h2,
    .thanks-content h2 {
        font-size: 1.5rem;
    }

    .text-content p {
        font-size: 12px;
    }

    .btn-main {
        height: 44px;
        margin-top: 0.4rem;
    }

    .form-otp .form-control {
        height: 48px !important;
    }

    .thanks-content p {
        font-size: 14px;
    }

    /* Home Page Start */
    .unlock-box .left-side p {
        margin-bottom: 10px;
    }

    .unlock-img {
        right: -30px;
        width: 180px;
    }

    .bottom-gameplay-con {
        height: calc(100dvh - 345px);
    }

    .unlcok-biscuit-img {
        max-width: 76px;
    }

    .mode-item {
        padding: 10px;
    }

    .gamechallenge-btn {
        margin: 1rem auto;
    }

    /* Home Page End */

    .lrg-cont .naruto {
        max-width: 230px;
    }

    .sage-biscuit-img {
        max-width: 150px;

    }

    .error-contents .lrg-cont .naruto {
        max-width: 200px;
    }

    .error-contents .logo-splash {
        max-width: 60px;
        height: auto;
    }

    .error-contents .unleash-naruto {
        max-width: 100px;
    }

    .locked-hm-wpr .unlock-img {
        right: -30px;
        width: 150px;
    }

    .locked-hm-wpr .bottom-gameplay-con {
        height: calc(100dvh - 330px);
    }

    /* Profile Page Start */
    .user-name-box p {
        font-size: 1.3rem;
    }

    .pro-info-col p {
        font-size: 1.25rem;
    }

    .reward-img img {
        width: 86px;
        height: auto;
        display: block;
    }

    .reward-card {
        padding: 1.8rem;
    }

    /* Profile Page End */

}

@media (max-height: 700px) {
    .ninja-gm-hm-wrpr .after-scan-con .bottom-gameplay-con {
        height: calc(100dvh - 280px);
    }

    .ninja-gm-hm-wrpr .sage-mode-icon {
        width: 48px;
        height: auto;
    }

    .after-scan-con .right-side .unlcok-biscuit-img {
        max-width: 110px;
        margin-left: 22px;
    }

    .after-scan-con .scan-btn {
        padding: 6px 12px;
    }

    /* Profile Page Start */
    .top-profile-box {
        padding: 20px 20px 10px 20px;
    }

    .bottom-profile-box {
        padding: 20px 20px;
    }

    .user-head {
        padding-bottom: 10px;
    }

    .pro-tab-box .tabs {
        margin-bottom: 10px;
    }

    .pro-info-col .game-bal,
    .pro-info-col .jutsu-mastered {
        padding: 10px;
    }

    .profile-time-con .profile-time-box {
        padding: 10px 10px 18px 10px;
    }

    .reward-card {
        padding: 1.6rem 1.6rem;
    }

    /* Profile Page End */

    /* Share Tab */
    .share-treat-box h2 {
        margin: 0.5rem 0;
    }

    .share-treat-box p {
        font-size: 12px;
    }

    .record-naruto-img {
        max-width: 156px;
    }

    .record-box h2 {
        font-size: 1.2rem;
    }

    .counter-no-list li {
        font-size: 12px;
        margin-bottom: 0.6rem;
    }

    .counter-no-list li::before {
        width: 18px;
        height: 18px;
        font-size: 12px;
    }

    .record-naruto {
        height: calc(100dvh - 488px);
    }

    .counter-no-list {
        margin-top: 0.7rem;
        margin-bottom: 0.4rem;
    }

    .form-inner-tell {
        min-height: 46dvh;
    }

    .avatar-bottom-content h2 {
        font-size: 1.5rem;
    }

    .avatar-bottom-content p {
        font-size: 12px;
        max-width: 100%;
        width: 100%;
    }

    .line-btn {
        font-size: 0.8rem
    }

    .av-img-temp-box {
        height: calc(100dvh - 416px);
    }

    .video-ready .portal-content-box {
        padding: 38px 0;
    }

    .video-ready .main-heading {
        font-size: 24px;
    }

}

@media (max-height: 675px) {

    .logo-splash-box {
        padding-top: 1rem;
    }

    .logo-splash {
        max-width: 65px;
    }

    .mid-naruto-box::before {
        left: -42px;
        top: 12px;
    }

    .mid-naruto-box::after {
        right: -50px;
        top: 10px;
    }

    .text-bar {
        max-width: 190px;
    }

    .naruto-treat-bar {
        max-width: 236px;
    }

    .text-bar h2 {
        font-size: 1rem;
    }

    .terms-label span {
        font-size: 11px;
    }

    .terms-label span a {
        font-size: 11px;
    }

    .after-scan-con .bottom-gameplay-con {
        height: calc(100dvh - 280px);
    }

    .challenge-video-col {
        -ms-flex: 0 0 75px;
        flex: 0 0 75px;
        max-width: 75px;
        /* padding: 10px; */
    }

    .share-naruto-treat-box {
        padding: 0.8rem 0;
    }

}

@media (max-height: 650px) {
    .after-scan-con .mode-item .mode-content h3 {
        font-size: 14px;
    }

    .ninja-gm-hm-wrpr .sage-mode-icon {
        width: 44px;
        height: auto;
    }

    .ninja-gm-hm-wrpr .milestone {
        width: 35px;
        height: 35px;
        padding: 3px;
    }

    .ninja-gm-hm-wrpr .timeline-mode-con {
        padding: 5px 5px;
    }

    .after-scan-con .mode-item {
        margin-bottom: 5px;
    }

    .ninja-gm-hm-wrpr .gameplay-head h2 {
        font-size: 1.15rem;
    }

    .ninja-gm-hm-wrpr .gameplay-head {
        padding-bottom: 0.5rem;
    }

    .after-scan-con .mode-content p {
        line-height: 1.1;
    }

    .after-scan-con .right-side .unlcok-biscuit-img {
        max-width: 100px;
        margin-left: 34px;
    }

    .ninja-gm-hm-wrpr .after-scan-con .bottom-gameplay-con {
        height: calc(100dvh - 274px);
    }

    .jutsu-content-con .milestone {
        width: 35px;
        height: 35px;
        padding: 3px;
    }

    .challenge-video-col {
        -ms-flex: 0 0 70px;
        flex: 0 0 70px;
        max-width: 70px;
        /* padding: 10px; */
    }

    .jutsu-videos-row {
        gap: 25px;
    }

    .pro-tab-box .tab {
        font-size: 12px;
    }

    .av-logo-box .av-brit-logo {
        width: 60px;
    }

    .av-logo-box .unleash-img-av {
        max-width: 100px;
    }

    .bottom-con-av .biscuit-avt-img {
        width: 78px;
        top: -36px;
        left: 10px;
    }

    .av-img-temp-box::before {
        right: -28px;
        top: -28px;
        width: 59px;
        height: 92px;
    }

    .av-img-temp-box {
        height: calc(100dvh - 400px);
    }

    .merch-cash-reward-box h3 {
        font-size: 14px;
        margin-top: 2px;
    }

    .img-box-ms {
        width: 45%;
    }

    .merch-box,
    .cash-box {
        height: 90px;
    }

    .sign-merch-cash-con {
        height: calc(100% - 247px);
    }

}

@media (max-height: 620px) {
    .logo-splash {
        max-width: 60px;
    }

    .unleash-naruto {
        max-width: 100px;
    }

    .form-box form .form-control {
        height: 38px;
    }

    .leaderboard-info .lead-info-inner-box {
        padding: 8px 10px;
    }

    .time-lead-box .timeline-profile-con {
        margin-bottom: 14px;
    }
}

@media screen and (min-height: 600px) and (max-height: 650px) {

    .logo-splash-box .naruto {
        max-width: 65%;
    }

    .reg-container .lrg-cont .naruto {
        max-width: 170px;
        width: 100%;
        height: auto;
    }

    .reg-container .text-bar {
        padding: 8px 18px;
        max-width: 175px;
    }

    .reg-container .form-box form {
        gap: 8px;
    }

    .reg-container .form-box form .form-control {
        height: 34px;
    }

    .reg-container .btn-main {
        height: 38px;
    }

    .content-box .main-heading {
        margin-bottom: 0.5rem;
    }

    .scan-btn {
        font-size: 12px;
        padding: 8px 13px;
        line-height: 1.2;
    }

    .unlock-box .left-side p {
        font-size: 10px;
    }

    .locked-hm-wpr .unlock-img {
        right: -30px;
        width: 128px;
    }

    .game-content-box {
        padding: 15px 20px 40px 20px;
    }

    .mode-item {
        margin-bottom: 8px;
    }

    .gamechallenge-btn {
        margin: 0.5rem auto;
    }

    .sage-mode-icon {
        width: 45px;
        height: auto;
    }

    .lock-box {
        width: 28px;
        height: 28px;
        padding: 5px;
    }

    .gameplay-con {
        padding-top: 0.5rem;
    }

    .locked-hm-wpr .bottom-gameplay-con {
        height: calc(100dvh - 302px);
    }

    .record-naruto-img {
        max-width: 130px;
    }

    .ninja-gm-hm-wrpr .after-scan-con .bottom-gameplay-con {
        height: calc(100dvh - 246px);
    }

    .jutsu-content-con {
        margin-top: 10px;
    }

    .jutsu-mode-wrapper {
        gap: 8px;
    }

    .challenge-video-box img {
        width: 90%;
    }

    .jutsu-challenge-box h2 {
        font-size: 1.1rem;
    }

    .jutsu-challenge-box {
        padding: 0.8rem;
    }

    .jutsu-challenge-box h2 {
        margin-top: 0;
    }

    .scan-your-image {
        min-height: 230px;
    }

    .video-ready .video-wrapper video {
        max-height: 360px;
    }

    .video-ready .main-heading::before {
        left: -50px;
    }

    .boom-popup .main-heading {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
    }

    .boom-popup p {
        font-size: 12px;
    }

    .score-box {
        padding: 6px 6px 6px 9px;
        gap: 9px;
        width: 220px;
        margin-top: 1rem;
        margin-bottom: 0.5rem;
    }

    .boom-popup .portal-content-box {
        padding: 35px 0;
    }

    .cong-text h2 {
        font-size: 1.7rem;
        margin-bottom: 0.5rem;
    }

    .cong-img-box {
        padding: 0.5rem 0;
    }

    .cong-naruto {
        width: 70%;
    }

    .offcanvas-content {
        padding: 10px 20px;
    }

    .offcanvas-links a {
        padding: 6px;
    }

    .menu-cont-item .left-icon img {
        width: 25px;
        height: 25px;
    }

    .offcanvas-social-links {
        width: 100%;
        padding-top: 0.5rem;
    }

    .profile-time-con {
        width: 100%;
        padding: 8px 5px 0px 5px;
    }

    .pro-tab-box .tabs {
        margin-bottom: 8px;
    }

    .pro-info-col p {
        font-size: 1rem;
    }

    .pro-info-col .game-bal,
    .pro-info-col .jutsu-mastered {
        padding: 8px;
    }

    .reward-img img {
        width: 80px;
    }

    .share-naruto-img img {
        max-width: 125px;
    }
}

@media (max-height: 599px) {
    .main-wrapper {
        height: auto;
    }

    .main-bg {
        height: auto;
    }

    .offcanvas-content {
        overflow: auto;
    }

    .record-naruto {
        height: 100%;
        margin-top: 10px;
    }

    .sage-video-con {
        height: calc(100dvh - 252px);
    }

    .machine-code-wrapper .video-camera-rec {
        height: calc(100dvh - 113px);
    }

}

.btn-group {
    width: 100%;
}

/* ✅ Add frame overlay on top */
.camera-frame-wrapper::before {
    content: "";
    position: absolute;
    inset: 0;
    /* full area */
    pointer-events: none;
    /* do not block clicks */
    background-image:
        url("../images/camera-frame-top.png"),
        url("../images/camera-frame-bottom.png"),
        url("../images/camera-frame-left.png"),
        url("../images/camera-frame-right.png");
    background-repeat: no-repeat;
    background-position:
        top center,
        bottom center,
        center left,
        center right;
    background-size:
        100% auto,
        100% auto,
        auto 100%,
        auto 100%;
    z-index: 5;
    /* always above content */
}


/* ✅ Inner recording container stretched fully */
.camera-video-rec-box {
    position: relative;
    height: calc(100% + 38px);
    width: calc(100% + 38px);
    margin: -19px;
    background-image: url("../images/camera-record-image.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* or 100% 100% */
    z-index: 2;
    /* below frame overlay */
}

/* Optional: Customize center icon */
.camera-frame-wrapper .video-icon-box img {
    max-width: 80px;
    /* Adjust as needed */
    display: block;
    margin: 0 auto;
}

.rewards-msg-pop {
    width: 100%;
    border-radius: 4px;
    background: #534FA5;
    padding: 12px 16px;
    text-align: left;
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: 0.28px;
}


/* Page Form Any Popup Start */

.popup-overlay.formy-overlay-bg {
    background: rgba(14, 46, 84, 0.75);
}


.formy-pop-con {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;

    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    min-height: 80dvh;
}

.formy-pop-con .formy-pop-box {
    padding: 30px 18px 18px 18px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
}


.formy-pop-box .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.formy-pop-box .close-popup img {
    width: 16px;
    height: 16px;
}

.formy-pop-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}



.formy-pop-content h2 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

.formy-scroll-reward {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 65dvh;
    /* adjust based on design */
    overflow-y: auto;
    padding-right: 18px;
    /* space for scrollbar */
}

.formy-scroll-reward form {
    width: 100%;
    padding: 1rem 0rem 1rem 0rem;
    position: relative;
}

.formy-field-box .form-group {
    width: 100%;
    margin-bottom: 14px;
}

.formy-field-box .form-control {
    width: 100%;
    display: flex;
    min-height: 54px;
    padding: 8px 16px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-radius: 8px;
    border: 1px solid #534FA5;
    background: #383399;

    overflow: hidden;
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}




.form-group .city-input-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.city-input-field label {
    overflow: hidden;
    color: #71708B;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    font-family: var(--thm-font);
}

.city-input-field select {
    width: 100%;
    padding: 0px 1px;
    border-radius: 8px;
    background: #383399 url('data:image/svg+xml;utf8,<svg width="11" height="7" viewBox="0 0 11 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.3396 4.29073L9.4126 0.217484C9.5511 0.0791503 9.72519 0.00831752 9.93485 0.00498394C10.1444 0.00181726 10.3216 0.07265 10.4666 0.217484C10.6114 0.362484 10.6839 0.538151 10.6839 0.744484C10.6839 0.950817 10.6114 1.12648 10.4666 1.27148L5.97235 5.76573C5.87869 5.85923 5.77994 5.92523 5.6761 5.96373C5.57227 6.00223 5.4601 6.02148 5.3396 6.02148C5.2191 6.02148 5.10694 6.00223 5.0031 5.96373C4.89927 5.92523 4.80052 5.85923 4.70685 5.76573L0.212601 1.27148C0.0742681 1.13298 0.00343475 0.958901 0.000101402 0.749235C-0.00306527 0.539735 0.0677681 0.362484 0.212601 0.217484C0.357601 0.0726504 0.533268 0.000234104 0.739602 0.000234095C0.945935 0.000234086 1.1216 0.0726504 1.2666 0.217484L5.3396 4.29073Z" fill="%23ffffff"/></svg>') no-repeat right 12px center;
    background-size: 11px auto;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--thm-white);
    cursor: pointer;
    outline: none;
    border: none;
}

.formy-field-box .form-control::placeholder {
    overflow: hidden;
    color: #AAA8D2;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
}

.formy-scroll-reward .phone-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    /* background: #383399; */
    /* border: 1px solid #534FA5; */
    border-radius: 8px;
    overflow: hidden;
}


.formy-scroll-reward .country-code {
    background: #383399;
    border-radius: 8px;
    border: 1px solid #534FA5;
    color: #AAA8D2;
    font-size: 14px;
    font-weight: 400;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    height: 48px;
    margin-right: 8px;
}

.formy-scroll-reward .phone-input {
    flex: 1;
    border: none;
    outline: none;
    background: #383399;
    border: 1px solid #534FA5;
    border-radius: 8px;
    color: var(--thm-white);
    font-size: 14px;
    padding: 15px 18px;
    font-weight: 400;
    letter-spacing: 0.28px;
}

.formy-scroll-reward .phone-input::placeholder {
    color: #AAA8D2;
}


.formy-scroll-reward form .btn-main {
    height: 48px;
    color: #6D3917;
    width: 95%;
    margin: 2.5rem auto 0;
}

.formy-scroll-reward::-webkit-scrollbar {
    width: 3px;
    background-color: #5551A0;
    border-radius: 6px;
}

/* Scroll thumb (90% height look) */
.formy-scroll-reward::-webkit-scrollbar-thumb {
    background-color: #EA7E26;
    border-radius: 12px;
    margin: 10% 0;
    /* adds space top & bottom for ~90% visible thumb */
}

/* Scrollbar track */
.formy-scroll-reward::-webkit-scrollbar-track {
    background-color: transparent;
}



.form-top-head {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 285px;
    width: 100%;
    padding-bottom: 12px;
}

.form-top-head h1 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}

.form-top-head h1 span {
    color: #FDB516;
}

.form-top-head p {
    color: var(--thm-white);
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.28px;
}




/* SUCCESSFUL SUBMISSION POPUP START */
.success-submit-popup {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.success-submit-popup .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.success-submit-popup .success-submit-box {
    padding: 50px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 100% !important;
}

.success-submit-pop-icon {
    margin-bottom: 1.5rem;
    max-width: 120px;
    width: 100%;
    height: auto;
    display: block;
}

.success-submit-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.success-submit-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    position: relative;
}

.success-submit-con::before {
    content: "";
    position: absolute;
    top: 2rem;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.success-submit-con::after {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.5rem;
    width: 60px;
    height: 47px;
    background-image: url('../images/contact-pop-ele-2.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.success-submit-box {
    width: 90%;
}

.success-submit-box p {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.32px;
    margin-top: 0.8rem;
    margin-bottom: 1.3rem;
}

.success-submit-box .close-popup img {
    width: 16px;
    height: 16px;
}

.success-submit-box .btn-main {
    height: 48px;
    color: #6D3917;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.2;
}

.success-submit-text-box {
    width: 90%;
}

.success-submit-box h2 {
    color: var(--thm-white);
    font-family: var(--thm-secondary-font);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.48px;
    margin-top: 0rem;
    margin-bottom: 0rem;
}

.success-submit-box h2 span {
    color: #FDB516;
}

/* SUCCESSFUL SUBMISSION POPUP END */


/* Play Button  */

.play-btn-mode-box .play-btn-mode {
    display: flex;
    width: 60px;
    height: 40px;
    padding: 6px 10px 6px 14px;
    justify-content: center;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    border: 1px solid #EA7E26;
    background: #FFEEC0;
    box-shadow: 0 4px 0 0 #EA7E26;

    color: #6D3917;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.32px;
    text-decoration: none;
}

.play-btn-mode-box .play-btn-mode:active {
    box-shadow: none;
    transform: translateY(2px);
}

.play-btn-mode-box .play-btn-mode img {
    width: 6px;
    height: 7px;
}


/* sku success */

.watchbtn {
    color: var(--thm-white);
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    margin-top: 1rem;
}

/* CASHBACK POPUP START */
.cashback-popup {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
}

.cashback-popup .close-popup {
    font-size: 2rem;
    line-height: 1.2;
    color: #ffffff;
    position: absolute;
    top: 0;
    right: 1rem;
    margin-top: 0.5rem;
}

.cashback-popup .cashback-popup-content-box {
    padding: 50px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    max-width: 100% !important;
}

.cashback-popup-content-box::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 70px;
    height: 55px;
    background-image: url('../images/contact-pop-ele-3.svg');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.cashback-popup-con {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    position: relative;
}

.cashback-popup-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-bottom: 1.5rem;
}

.upi-msg {
    color: var(--thm-white);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    text-align: left;
    margin-bottom: 14px;
}

.upi-box {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.upi-input-wrap {
    position: relative;
    padding-bottom: 0.6rem;
}

.upi-input-wrap input {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 54px;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #534FA5;
    outline: none;
    background: #383399;
    color: var(--thm-white);
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* Focus state */
.upi-input-wrap input:focus {
    border-color: var(--thm-white);
}

/* Error state (red border) */
.upi-input-wrap input.error {
    border-color: #F14E51;
    background: #383399;
}

/* Success state (green border) */
.upi-input-wrap input.success {
    border-color: #00BA00;
    background: #383399;
}

.upi-input-wrap input::placeholder {
    overflow: hidden;
    color: #AAA8D2;
    text-overflow: ellipsis;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.28px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex-shrink: 0;
}

.upi-success {
    position: absolute;
    right: 18px;
    top: 45%;
    transform: translateY(-50%) scale(0.7);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.upi-success.active {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.upi-error {
    color: #F14E51;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.22px;
    text-align: left;
    margin-bottom: 0.3rem;
    opacity: 0;
    visibility: hidden;
    min-height: 16px;
    /* keeps space even when hidden */
    transition: opacity 0.25s ease, visibility 0.25s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.upi-error.active {
    opacity: 1;
    visibility: visible;
}

.tc-text {
    color: #B0ACFF;
    font-size: 10px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.2px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/* CASHBACK POPUP END */

/* WINNER POPUP END */
.winnerpop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(8, 31, 58, 0.80);
    backdrop-filter: blur(3px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    z-index: 99999;
    opacity: 1;
    visibility: visible;
}

.winnerpop-content-box {
    width: 100%;
    position: relative;
}

.winnerpop-content-box .close-popup {
    position: absolute;
    top: -1rem;
    right: 0.5rem;
}

.winnerpop-content-box .close-popup img {
    width: 16px;
    height: 16px;
}

.winnerpop-popup-con {
    border-radius: 20px 20px 0 0;
    border-top: 1px solid #EA7E26;
    border-right: 1px solid #EA7E26;
    border-left: 1px solid #EA7E26;
    background: #312C8D;
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding: 3rem 1rem 2.2rem 1rem;
    min-height: 50dvh;
    z-index: 100000;
}

.winnerpop-popup-con::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url('../images/celebrate-bg.png');
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 5;
    pointer-events: none;
}

.winnerpop-txt-box {
    width: 80%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding-bottom: 0.5rem;
}

.winnerpop-content-box .main-heading {
    color: #FDB516;
    font-family: var(--thm-secondary-font);
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.56px;
    margin-top: 0;
    margin-bottom: 1rem;
}

.winnerpop-content-box .sub-heading {
    color: var(--thm-white);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: 0.32px;
}

.reward-winner-box .btm-reward-txt {
    justify-content: end;
    margin-top: 1.5rem;
}

.reward-winner-box .reward-card {
    align-items: flex-start;
}

.reward-head {
    text-align: center;
    position: relative;
    width: 100%;
}

.reward-head h2 {
    color: var(--thm-white);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: 1.92px;
    position: relative;
    display: inline-block;
    padding: 0 10px;
    margin: 1rem 0;
}

/* LEFT FADE LINE */
.reward-head h2::before {
    content: "";
    position: absolute;
    left: -113px;
    /* reduced gap */
    top: 50%;
    width: 112px;
    /* shorter line */
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to left,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0));
}

/* RIGHT FADE LINE */
.reward-head h2::after {
    content: "";
    position: absolute;
    right: -113px;
    /* reduced gap */
    top: 50%;
    width: 112px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.6),
            rgba(255, 255, 255, 0));
}

.reward-winner-box .btn {
    margin-top: 1rem;
}

/* WINNER POPUP END */

/* NEW TIMELINE FOR RECORD SCREEN START */
.btm-rec-btn {
    padding-bottom: 20px;
}

.record-fill-con {
    background-color: #0D0B28C9;
    padding: 20px 16px;
    width: 100%;
}

.progress-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
}

/* Full grey line */
.progress-bg-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #8F88B8;
    transform: translateY(-50%);
    z-index: 1;
}

/* Orange filled line – ONLY till second step */
.progress-fill-line {
    position: absolute;
    top: 50%;
    height: 2px;
    background: #5EBF69;
    transform: translateY(-50%);
    z-index: 2;
    left: 0;
    /* Start from first step */
}

/* Step markers */
.step {
    width: 20px;
    height: 20px;
    background: #7D7AAA;
    border-radius: 50%;
    position: relative;
    z-index: 3;
    padding: 3px;
}

/* Active step */
.step.active {
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 20px;
    border: 1px solid #276A2E;
    background: #DAFFDE;
}

.step.active .check {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--thm-white);
}

.step .check {
    width: 10px;
    height: auto;
}

.step.retry-step {
    display: flex;
    justify-content: center;
    align-items: center;

    border-radius: 20px;
    border: 1px solid #D7292C;
    background: #FFEDED;
}

/* NEW TIMELINE FOR RECORD SCREEN END */

.scan-img.video-camera-rec .video-wrapper {
    position: relative;
    width: 100%;
    /* aspect-ratio: 9 / 16; */
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}

.scan-img.video-camera-rec .video-wrapper video {
    width: auto;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px;
    margin: 0 auto;
}


/* Camera Record Start */
.scan-img.video-camera-rec {
    position: relative;
    display: inline-block;
    /* video decides width */
    height: calc(100dvh - 340px);
    border-radius: 18px;
    overflow: hidden;
    z-index: 2;
    width: fit-content;
    margin: 0 auto;
}

/* ---- VIDEO ---- */
.instructions-camera-box video {
    height: 100%;
    width: auto;
    /* important: width comes from video */
    object-fit: cover;
    display: block;
    z-index: 1;
    position: relative;
}

.instructions-camera-box .camera-frame-overlay {
    position: absolute;
    inset: 0;
    /* full cover */
    z-index: 5;
    pointer-events: none;
    /* UI still works */
}

/* Corner images */
.instructions-camera-box .camera-frame-overlay .corner {
    position: absolute;
    width: 48px;
    height: 49px;
}

/* Position each corner */
.instructions-camera-box .camera-frame-overlay .tl {
    top: 0;
    left: 0;
}

.instructions-camera-box .camera-frame-overlay .tr {
    top: 0;
    right: 0;
}

.instructions-camera-box .camera-frame-overlay .bl {
    bottom: 0;
    left: 0;
}

.instructions-camera-box .camera-frame-overlay .br {
    bottom: 0;
    right: 0;
}

.instructions-camera-box .record-secr {
    position: absolute;
    inset: 0;
    padding: 19px 15px;
    z-index: 10;
    /* highest layer */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

/* Camera Record End */

@media (min-height: 750px) {

    .sign-merch-cash-con .naruto {
        max-width: 75%;
    }

    .sign-merch-cash-con .unleash-naruto {
        max-width: 120px;
    }

    .sign-merch-cash-con .text-bar.naruto-treat-bar img {
        width: 90%;
    }

    .sign-merch-cash-con .logo-splash {
        max-width: 70px;
    }

    .reg-btn-con .btn-main {
        height: 38px;
        min-width: 240px;
    }

    .sign-merch-cash-con .naruto-treat-bar {
        max-width: 190px;
        margin-top: -18px;
    }

}

@media (min-height: 800px) {

    .sign-merch-cash-con .naruto {
        max-width: 80%;
    }

    .sign-merch-cash-con .unleash-naruto {
        max-width: 130px;
    }

    .sign-merch-cash-con .text-bar.naruto-treat-bar img {
        width: 95%;
    }

    .sign-merch-cash-con .logo-splash {
        max-width: 80px;
    }

    .reg-btn-con .btn-main {
        height: 38px;
        min-width: 260px;
    }

    .sign-merch-cash-con .naruto-treat-bar {
        max-width: 200px;
        margin-top: -20px;
    }

}