:root {
    --blue-1: #365b96;
    --blue-2: #264372;
    --blue-3: #172b52;
    --gold: #f9d838;
    --gold-2: #d4af37;
    --green-1: #10b981;
    --green-2: #059669;
    --app-height: 100dvh;
    --ui-scale: 1;
}

@font-face {
    font-family: "Cairo";
    src: url("../../fonts/cairo-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../../fonts/cairo-semibold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Cairo";
    src: url("../../fonts/cairo-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #fff;
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    background: #172b52;
}

body {
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

form,
#form1 {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.start-page {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: var(--app-height);
    min-height: var(--app-height);
    overflow: hidden;
    padding: calc(10px + env(safe-area-inset-top, 0px)) clamp(10px, 3vw, 18px) calc(10px + env(safe-area-inset-bottom, 0px));
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 18% 22%, rgba(14, 165, 233, .16), transparent 32%), radial-gradient(circle at 86% 78%, rgba(16, 185, 129, .15), transparent 36%), radial-gradient(circle at 50% -8%, rgba(249, 216, 56, .20), transparent 34%), linear-gradient(180deg, var(--blue-1) 0%, var(--blue-2) 46%, var(--blue-3) 100%);
}

    .start-page::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: .52;
        background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .10) 18%, transparent 38%), linear-gradient(240deg, transparent 0%, rgba(255, 255, 255, .06) 22%, transparent 45%);
    }

.start-shell {
    position: relative;
    z-index: 2;
    width: min(100%, 430px);
    height: 100%;
    max-height: 820px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: calc(8px * var(--ui-scale));
}

.start-header,
.start-main,
.start-action,
.start-footer {
    position: relative;
    z-index: 2;
}

.bg-orb {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    pointer-events: none;
    opacity: .55;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    animation-name: orbFloat;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.orb-1 {
    width: clamp(150px, 44vw, 240px);
    height: clamp(150px, 44vw, 240px);
    right: -88px;
    top: 70px;
    background: rgba(249, 216, 56, .12);
    border: 1px solid rgba(249, 216, 56, .12);
    animation-duration: 8s;
}

.orb-2 {
    width: clamp(150px, 42vw, 220px);
    height: clamp(150px, 42vw, 220px);
    left: -96px;
    top: 44%;
    background: rgba(14, 165, 233, .15);
    border: 1px solid rgba(14, 165, 233, .12);
    animation-duration: 10s;
    animation-delay: -3s;
}

.orb-3 {
    width: clamp(210px, 64vw, 310px);
    height: clamp(210px, 64vw, 310px);
    right: -126px;
    bottom: -100px;
    background: rgba(16, 185, 129, .13);
    border: 1px solid rgba(16, 185, 129, .10);
    animation-duration: 12s;
    animation-delay: -6s;
}

@keyframes orbFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(22px, -28px, 0) scale(1.07);
    }

    100% {
        transform: translate3d(-20px, 24px, 0) scale(1.10);
    }
}

.start-header {
    width: 100%;
    min-height: calc(50px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(10px * var(--ui-scale));
}

.brand {
    display: flex;
    align-items: center;
    gap: calc(9px * var(--ui-scale));
    min-width: 0;
}

.brand-logo {
    width: calc(46px * var(--ui-scale));
    height: calc(46px * var(--ui-scale));
    min-width: 34px;
    min-height: 34px;
    border-radius: calc(15px * var(--ui-scale));
    overflow: hidden;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .14);
}

    .brand-logo img,
    .main-logo-box img {
        display: block;
        pointer-events: none;
    }

    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.brand-text {
    min-width: 0;
}

.brand-title {
    display: block;
    color: #fff;
    font-size: calc(15px * var(--ui-scale));
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.brand-subtitle {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, .76);
    font-size: calc(11px * var(--ui-scale));
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(8px * var(--ui-scale));
    flex: 0 0 auto;
}

.sound-toggle-btn {
    width: calc(38px * var(--ui-scale));
    height: calc(38px * var(--ui-scale));
    min-width: 31px;
    min-height: 31px;
    border: 1px solid rgba(249, 216, 56, .25);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    font-size: calc(15px * var(--ui-scale));
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 18px rgba(0, 0, 0, .12);
    transition: transform .12s ease, filter .12s ease, background .12s ease, color .12s ease;
}

    .sound-toggle-btn:active {
        transform: scale(.94);
        filter: brightness(.96);
    }

    .sound-toggle-btn.is-muted {
        color: rgba(255, 255, 255, .65);
        background: rgba(255, 255, 255, .09);
        border-color: rgba(255, 255, 255, .16);
    }

.home-back-btn {
    height: calc(38px * var(--ui-scale));
    min-height: 31px;
    padding: 0 calc(12px * var(--ui-scale));
    border: 1px solid rgba(249, 216, 56, .28);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: calc(6px * var(--ui-scale));
    color: var(--gold);
    font-size: calc(14px * var(--ui-scale));
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px rgba(0, 0, 0, .14);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .12s ease, filter .12s ease, background .12s ease;
}

    .home-back-btn:active {
        transform: scale(.94);
        filter: brightness(.96);
    }

    .home-back-btn i,
    .home-back-btn span {
        pointer-events: none;
    }
    .home-back-btn.is-submitting {
        pointer-events: none;
        opacity: .78;
        filter: saturate(.9)
    }
.start-main {
    width: 100%;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(8px * var(--ui-scale)) 0;
}

.main-logo-box {
    width: calc(112px * var(--ui-scale));
    height: calc(112px * var(--ui-scale));
    min-width: 62px;
    min-height: 62px;
    margin: 0 auto calc(14px * var(--ui-scale));
    border-radius: calc(31px * var(--ui-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 14px 26px rgba(0, 0, 0, .15), 0 0 0 calc(7px * var(--ui-scale)) rgba(255, 255, 255, .07);
}

    .main-logo-box img {
        max-width: 78%;
        max-height: 78%;
        object-fit: contain;
    }

.start-badge {
    width: max-content;
    max-width: min(330px, 94%);
    margin: 0 auto calc(10px * var(--ui-scale));
    padding: calc(7px * var(--ui-scale)) calc(14px * var(--ui-scale));
    border-radius: 999px;
    color: var(--gold);
    font-size: calc(13px * var(--ui-scale));
    font-weight: 700;
    line-height: 1.2;
    background: rgba(249, 216, 56, .14);
    border: 1px solid rgba(249, 216, 56, .24);
}

    .start-badge i {
        margin-left: calc(6px * var(--ui-scale));
    }

.main-title {
    margin: 0;
    color: #fff;
    font-size: calc(43px * var(--ui-scale));
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -.35px;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .20);
}

.sub-title {
    margin: calc(8px * var(--ui-scale)) 0 0;
    color: rgba(255, 255, 255, .94);
    font-size: calc(19px * var(--ui-scale));
    font-weight: 600;
    line-height: 1.4;
}

.mini-text {
    width: min(355px, 94%);
    margin: calc(12px * var(--ui-scale)) auto 0;
    color: rgba(255, 255, 255, .84);
    font-size: calc(14px * var(--ui-scale));
    font-weight: 600;
    line-height: 1.65;
}

.info-row {
    width: min(355px, 94%);
    margin-top: calc(18px * var(--ui-scale));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: calc(10px * var(--ui-scale));
}

.info-box {
    position: relative;
    z-index: 3;
    min-height: calc(66px * var(--ui-scale));
    border-radius: calc(20px * var(--ui-scale));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(180deg, rgba(74, 101, 145, .98), rgba(48, 72, 113, .98));
    border: 1px solid rgba(255, 255, 255, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
}

    .info-box strong {
        color: #fff;
        font-size: calc(25px * var(--ui-scale));
        font-weight: 700;
        line-height: 1;
    }

    .info-box span {
        margin-top: calc(5px * var(--ui-scale));
        color: rgba(255, 255, 255, .74);
        font-size: calc(12px * var(--ui-scale));
        font-weight: 600;
        line-height: 1.2;
    }

.help-list {
    width: min(355px, 94%);
    margin-top: calc(15px * var(--ui-scale));
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(9px * var(--ui-scale));
}

.help-card {
    position: relative;
    z-index: 3;
    min-height: calc(53px * var(--ui-scale));
    padding: 0 calc(14px * var(--ui-scale));
    border-radius: calc(21px * var(--ui-scale));
    display: flex;
    align-items: center;
    gap: calc(10px * var(--ui-scale));
    background: linear-gradient(180deg, rgba(65, 90, 133, .98), rgba(43, 67, 108, .98));
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 9px 18px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.help-icon {
    width: calc(38px * var(--ui-scale));
    height: calc(38px * var(--ui-scale));
    flex: 0 0 calc(38px * var(--ui-scale));
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-3);
    background: #fff;
    box-shadow: 0 8px 16px rgba(0, 0, 0, .12);
    font-size: calc(15px * var(--ui-scale));
}

.help-card.gold .help-icon {
    background: var(--gold);
    color: #473b00;
}

.help-card.green .help-icon {
    background: #6ee7b7;
    color: #064e3b;
}

.help-text {
    min-width: 0;
    text-align: right;
}

    .help-text strong {
        display: block;
        color: #fff;
        font-size: calc(14px * var(--ui-scale));
        font-weight: 700;
        line-height: 1.35;
    }

    .help-text span {
        display: block;
        margin-top: 1px;
        color: rgba(255, 255, 255, .75);
        font-size: calc(11.5px * var(--ui-scale));
        font-weight: 400;
        line-height: 1.35;
    }

.start-action {
    width: 100%;
    margin: 0 auto;
    padding-top: 0;
    flex-shrink: 0;
}

.start-button {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(60px * var(--ui-scale));
    min-height: 43px;
    padding: 0;
    border: 0;
    border-radius: calc(22px * var(--ui-scale));
    cursor: pointer;
    color: #fff;
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    font-size: calc(20px * var(--ui-scale));
    font-weight: 700;
    line-height: calc(60px * var(--ui-scale));
    text-align: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent 42%), linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
    box-shadow: 0 13px 22px rgba(5, 150, 105, .26), 0 8px 18px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .25);
    text-shadow: 0 2px 4px rgba(0, 0, 0, .22);
    -webkit-appearance: none;
    appearance: none;
    transition: transform .12s ease, filter .12s ease, opacity .12s ease;
}

    .start-button:active {
        transform: scale(.975);
        filter: brightness(.97);
    }

    .start-button.is-submitting {
        pointer-events: none;
        opacity: .86;
        filter: saturate(.9);
    }

    .start-button::before {
        content: "";
        position: absolute;
        top: 0;
        left: -42%;
        width: 34%;
        height: 100%;
        transform: skewX(-24deg);
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .30), transparent);
        pointer-events: none;
        animation: startButtonShine 2.8s ease-in-out infinite;
    }

    .start-button:not(.is-submitting) {
        animation: startButtonPulse 2.4s ease-in-out infinite;
    }

@keyframes startButtonShine {
    0%, 55% {
        left: -42%;
        opacity: 0;
    }

    70% {
        opacity: .95;
    }

    100% {
        left: 125%;
        opacity: 0;
    }
}

@keyframes startButtonPulse {
    0%, 100% {
        box-shadow: 0 13px 22px rgba(5, 150, 105, .26), 0 8px 18px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .25);
    }

    50% {
        box-shadow: 0 16px 28px rgba(5, 150, 105, .34), 0 10px 24px rgba(0, 0, 0, .18), 0 0 0 6px rgba(16, 185, 129, .08), inset 0 1px 0 rgba(255, 255, 255, .25);
    }
}

.start-footer {
    width: 100%;
    margin: calc(7px * var(--ui-scale)) auto 0;
    text-align: center;
    color: rgba(255, 255, 255, .70);
    font-size: calc(10.5px * var(--ui-scale));
    font-weight: 600;
    line-height: 1.45;
}

    .start-footer span {
        color: var(--gold);
    }

.global-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 13px;
    background: radial-gradient(circle at 50% 35%, rgba(249, 216, 56, .13), transparent 34%), radial-gradient(circle at 22% 25%, rgba(14, 165, 233, .18), transparent 32%), rgba(26, 48, 91, .82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

    .global-loader.active {
        display: flex;
    }

.spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(255, 255, 255, .24);
    border-top-color: #fff;
    animation: spinLoader .75s linear infinite;
}

.loader-text {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
}

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

.welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 43, 82, .48);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
}

    .welcome-modal.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.welcome-modal-box {
    width: min(92%, 330px);
    padding: 24px 20px 20px;
    border-radius: 26px;
    text-align: center;
    contain: layout paint;
    background: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08)), linear-gradient(145deg, var(--blue-1) 0%, var(--blue-2) 55%, var(--blue-3) 100%);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 24px 55px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .20);
    transform: translateY(12px) scale(.96);
    transition: transform .22s ease;
}

.welcome-modal.active .welcome-modal-box {
    transform: translateY(0) scale(1);
}

.welcome-modal-logo {
    width: 94px;
    height: 94px;
    margin: 0 auto 14px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18), 0 0 0 6px rgba(255, 255, 255, .08);
    overflow: hidden;
}

    .welcome-modal-logo img {
        width: 78%;
        height: 78%;
        object-fit: contain;
        display: block;
        pointer-events: none;
    }

.welcome-modal-title {
    margin-bottom: 18px;
    color: #fff;
    font-size: clamp(19px, 5vw, 24px);
    font-weight: 700;
    line-height: 1.7;
    text-shadow: 0 3px 10px rgba(0, 0, 0, .20);
}

.welcome-modal-btn {
    width: 100%;
    height: 50px;
    border: 0;
    border-radius: 18px;
    cursor: pointer;
    color: #fff;
    font-family: "Cairo", Tahoma, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255, 255, 255, .24), transparent 42%), linear-gradient(135deg, var(--green-1) 0%, var(--green-2) 100%);
    box-shadow: 0 10px 20px rgba(5, 150, 105, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .12s ease, filter .12s ease;
}

    .welcome-modal-btn:active {
        transform: scale(.975);
        filter: brightness(.96);
    }

.falling-petals {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

    .falling-petals .petal {
        position: absolute;
        top: -12%;
        width: 14px;
        height: 20px;
        border-radius: 70% 0 70% 0;
        opacity: 0;
        will-change: transform, opacity;
        box-shadow: 0 0 10px rgba(255, 255, 255, .12);
        animation-name: petalFall;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

        .falling-petals .petal:nth-child(3n + 1) {
            background: linear-gradient(180deg, rgba(255, 248, 220, .98), rgba(249, 216, 56, .72));
        }

        .falling-petals .petal:nth-child(3n + 2) {
            background: linear-gradient(180deg, rgba(255, 240, 246, .98), rgba(255, 182, 193, .72));
        }

        .falling-petals .petal:nth-child(3n) {
            background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(110, 231, 183, .72));
        }

        .falling-petals .petal::after {
            content: "";
            position: absolute;
            width: 38%;
            height: 38%;
            top: 14%;
            left: 16%;
            border-radius: 50%;
            background: rgba(255, 255, 255, .35);
            filter: blur(.4px);
        }

        .falling-petals .petal:nth-child(1) {
            left: 4%;
            animation-duration: 11s;
            animation-delay: -2s;
        }

        .falling-petals .petal:nth-child(2) {
            left: 11%;
            width: 12px;
            height: 18px;
            animation-duration: 9s;
            animation-delay: -5s;
        }

        .falling-petals .petal:nth-child(3) {
            left: 19%;
            width: 16px;
            height: 22px;
            animation-duration: 13s;
            animation-delay: -7s;
        }

        .falling-petals .petal:nth-child(4) {
            left: 27%;
            animation-duration: 10s;
            animation-delay: -1s;
        }

        .falling-petals .petal:nth-child(5) {
            left: 35%;
            width: 13px;
            height: 19px;
            animation-duration: 12s;
            animation-delay: -4s;
        }

        .falling-petals .petal:nth-child(6) {
            left: 44%;
            width: 17px;
            height: 23px;
            animation-duration: 14s;
            animation-delay: -8s;
        }

        .falling-petals .petal:nth-child(7) {
            left: 53%;
            animation-duration: 9.5s;
            animation-delay: -3s;
        }

        .falling-petals .petal:nth-child(8) {
            left: 62%;
            width: 12px;
            height: 18px;
            animation-duration: 11.5s;
            animation-delay: -6s;
        }

        .falling-petals .petal:nth-child(9) {
            left: 71%;
            width: 16px;
            height: 22px;
            animation-duration: 13.5s;
            animation-delay: -9s;
        }

        .falling-petals .petal:nth-child(10) {
            left: 79%;
            animation-duration: 10.5s;
            animation-delay: -2.5s;
        }

        .falling-petals .petal:nth-child(11) {
            left: 87%;
            width: 13px;
            height: 19px;
            animation-duration: 12.5s;
            animation-delay: -5.5s;
        }

        .falling-petals .petal:nth-child(12) {
            left: 94%;
            width: 15px;
            height: 21px;
            animation-duration: 9.8s;
            animation-delay: -7.5s;
        }

@keyframes petalFall {
    0% {
        opacity: 0;
        transform: translate3d(0, -8vh, 0) rotate(0deg) scale(.9);
    }

    10% {
        opacity: .92;
    }

    25% {
        transform: translate3d(18px, 22vh, 0) rotate(85deg) scale(1);
    }

    50% {
        transform: translate3d(-14px, 50vh, 0) rotate(170deg) scale(1.04);
    }

    75% {
        transform: translate3d(18px, 78vh, 0) rotate(255deg) scale(.98);
    }

    100% {
        opacity: 0;
        transform: translate3d(-12px, 112vh, 0) rotate(360deg) scale(.92);
    }
}

@media (max-width: 360px) {
    .brand-title {
        font-size: calc(13.5px * var(--ui-scale));
    }

    .brand-subtitle {
        font-size: calc(10px * var(--ui-scale));
    }

    .home-back-btn span {
        display: none;
    }

    .home-back-btn {
        width: calc(38px * var(--ui-scale));
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    .bg-orb,
    .falling-petals .petal,
    .start-button,
    .start-button::before {
        animation: none !important;
        transform: none !important;
    }
}