/* assets */
@layer base, components, utilities;

@layer components {
    @font-face {
        font-family: kalamehRegular;
        src: url(../fonts/KalamehWebFaNum-Regular.woff2) format("woff2"),
            url(../fonts/KalamehWebFaNum-Regular.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehMedium;
        src: url(../fonts/KalamehWebFaNum-Medium.woff2) format("woff2"),
            url(../fonts/KalamehWebFaNum-Medium.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehMediumEn;
        src: url(../fonts/KalamehWeb-Medium.woff2) format("woff2"),
            url(../fonts/KalamehWeb-Medium.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehSemi;
        src: url(../fonts/KalamehWebFaNum-SemiBold.woff2) format("woff2"),
            url(../fonts/KalamehWebFaNum-SemiBold.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehBold;
        src: url(../fonts/KalamehWebFaNum-Bold.woff2) format("woff2"),
            url(../fonts/KalamehWebFaNum-Bold.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehBoldEn;
        src: url(../fonts/KalamehWeb-Bold.woff2) format("woff2"),
            url(../fonts/KalamehWeb-Bold.woff) format("woff");
        font-display: swap;
    }

    @font-face {
        font-family: kalamehBlack;
        src: url(../fonts/KalamehWebFaNum-Black.woff2) format("woff2"),
            url(../fonts/KalamehWebFaNum-Black.woff) format("woff");
        font-display: swap;
    }

    /* Preset A: On in first section, off in second and third sections */

    @keyframes lampA {
        0% {
            opacity: 1;
        }

        33.33% {
            opacity: 1;
        }

        33.34% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    /* Preset B: more “nervous” early flicker, then stable */
    @keyframes lampB {
        0% {
            opacity: 0;
        }

        33.33% {
            opacity: 0;
        }

        33.34% {
            opacity: 1;
        }

        66.66% {
            opacity: 1;
        }

        66.67% {
            opacity: 0;
        }

        100% {
            opacity: 0;
        }
    }

    /* Preset C: Off in first and second sections, on in third section */
    @keyframes lampC {
        0% {
            opacity: 0;
        }

        66.66% {
            opacity: 0;
        }

        66.67% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes lampD {
        0% {
            opacity: 0;
        }

        49.95% {
            opacity: 0;
        }

        50% {
            opacity: 1;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes pushMore {
        0% {
            height: 52.5vh;
        }

        /* 70% {
        height: 55vh;
    } */

        100% {
            height: 130vh;
        }
    }

    @keyframes pushLess {
        0% {
            height: 130vh;
        }

        /* 30% {
        height: 55vh;
    } */

        100% {
            height: 52.5vh;
        }
    }

    @keyframes pushMoreSign {
        0% {
            height: 55vh;
        }

        /* 70% {
        height: 55vh;
    } */

        100% {
            height: 117.5vh;
        }
    }

    @keyframes pushLessSign {
        0% {
            height: 117.5vh;
        }

        /* 30% {
        height: 55vh;
    } */

        100% {
            height: 55vh;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes move {
        0% {
            opacity: 1;
        }

        2% {
            opacity: 0;
        }

        99% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes openMenu {
        0% {
            height: 0vh;
        }

        100% {
            height: 29.5vh;
        }
    }

    @keyframes closeMenu {
        0% {
            height: 29.5vh;
            padding: 2.5vh 10vw 1vh;
        }

        100% {
            padding: 0 10vw;
            height: 0vh;
        }
    }

    @keyframes lightboxZoom {
        from {
            transform: scale(0.8);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes moveDown {
        from {
            margin-top: 2.5vh;
        }

        to {
            margin-top: 17.5vh;
        }
    }

    @keyframes moveUp {
        from {
            margin-top: 17.5vh;
        }

        to {
            margin-top: 2.5vh;
        }
    }

    /* @keyframes moveDownSign {
        from {
            margin-top: 5vh;
        }

        to {
            margin-top: 7.5vh;
        }
    } */

    /* @keyframes moveUpSign {
        from {
            margin-top: 7.5vh;
        }

        to {
            margin-top: 5vh;
        }
    } */

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        75% {
            transform: rotate(360deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    @keyframes shake {
        0% {
            margin-right: -1vw;
        }

        50% {
            margin-right: 1vw;
        }

        100% {
            margin-right: 0;
        }
    }

    @keyframes slideUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    :root {
        --text-size-extra: 5vw;
        --text-size-large: 2vw;
        --text-size-medium: 1.75vw;
        --text-size-regular: 1.25vw;
        --text-size-small: 1vw;

        --carousel-item-width: 16vw;
        --carousel-item-height: 16vw;
        --carousel-gap: 1.5vw;
        /* --carousel-visible-items: 5; */

        /* Carousel 2 (icons row): ~65vw container, ~30vw item, ~15vh height */
        --carousel-2-container-width: 65vw;
        --carousel-2-item-width: 30vw;
        --carousel-2-item-height: 10vw;
        --carousel-2-gap: 5vw;
        --carousel-2-visible: 2;

        --carousel-animation-duration: 600ms;
        --carousel-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --carousel-hover-scale: 1.05;

        --carousel-nav-size: 5vw;
        /* --carousel-nav-bg: rgba(0, 0, 0, 0.1); */
        /* --carousel-nav-bg-hover: rgba(0, 0, 0, 0.2); */
        /* --carousel-nav-color: #333; */
        --carousel-nav-offset: 1vw;

        --carousel-dot-size: 0.8vw;
        --carousel-dot-gap: 0.8vw;
        --carousel-dot-color: #ccc;
        --carousel-dot-active-color: #333;
        --carousel-dot-bottom-offset: -3vh;

        --lightbox-bg: rgba(0, 0, 0, 0.95);
        --lightbox-close-size: 40px;
        --lightbox-close-offset: 20px;

        --z-nav: 10;
        --z-dots: 5;
        --z-lightbox: 1000;

        --transition-fast: 200ms ease;
        --transition-normal: 300ms ease;
        --transition-slow: 400ms ease;
    }

    /* ===== Cross-browser reset & WebKit foundation ===== */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    /* Disable iOS Safari default text scaling for consistent typography */
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Consistent font rendering across browsers (WebKit-only prefix; standard not widely supported) */
    * {
        font-family: kalamehMedium;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        margin: 0;
        padding: 0;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        /* min-height: 250vh; */
    }

    a {
        text-decoration: none;
        color: #b9b0a5;
    }
    
    p, span, a {
        direction: rtl;
        unicode-bidi: plaintext;
    }

    /* WebKit: reduce tap highlight on touch devices for cleaner UX */
    a,
    button,
    [role="button"] {
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
    }

    .p-start {
        line-height: 3vh;
    }

    .p-between {
        line-height: 2vh;
    }

    .worm-border {
        --worm-color: #ffd400;
        --worm-speed: 3;
        /* seconds — plain number, no unit */
        --worm-stroke: 3.5;
        /* px — plain number               */
        --worm-segment: 0.20;
        /* fraction of perimeter           */

        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 75vw;
        max-width: 640px;
        height: 12.5vh;
        min-height: 52px;

        border-radius: 50px;
        border: 4px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(14px) saturate(1.5);
        -webkit-backdrop-filter: blur(14px) saturate(1.5);
        /* box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 6px 32px rgba(0,0,0,0.2); */

        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;

        color: #fff;
        font-size: clamp(.8rem, 2vw, 1rem);
        font-weight: 500;
        letter-spacing: .14em;
        text-transform: uppercase;
    }

    .worm-border:focus-visible {
        outline: 4px solid var(--worm-color);
        outline-offset: 5px;
    }

    /* Canvas bleeds outside the element so the head glow is never clipped */
    .worm-canvas {
        position: absolute;
        /* inset: -12px; */
        /* expand 12px on every side          */
        width: calc(100% + 24px);
        height: calc(100% + 24px);
        pointer-events: none;
        overflow: visible;
    }

    .old-browser-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        /* پس‌زمینه تیره */
        backdrop-filter: blur(8px);
        /* افکت بلور برای پس‌زمینه */
        -webkit-backdrop-filter: blur(8px);
        /* پشتیبانی از سافاری */
        z-index: 99999;
        /* بالاترین لایه */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
        font-family: inherit;
        /* استفاده از فونت سایت شما */
    }

    .old-browser-content {
        background-color: #ffffff;
        padding: 40px;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        text-align: center;
        max-width: 400px;
        width: 100%;
        animation: slideUp 0.4s ease-out;
    }

    .icon-container {
        color: #ef4444;
        /* رنگ قرمز برای آیکون */
        margin-bottom: 20px;
        display: flex;
        justify-content: center;
    }

    .modal-title {
        margin: 0 0 15px 0;
        font-size: 1.5rem;
        color: #1f2937;
        /* رنگ تیره برای تیتر */
    }

    .modal-text {
        margin: 0 0 25px 0;
        font-size: 1rem;
        color: #4b5563;
        /* رنگ خاکستری برای متن */
        line-height: 1.6;
    }

    .modal-btn {
        background-color: #cf7bff;
        /* رنگ آبی برای دکمه */
        color: white;
        border: none;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: background-color 0.3s;
        font-family: inherit;
    }

    .modal-btn:hover {
        background-color: #a14ed1;
    }


    /* WebKit: remove default Apple styling (rounded corners/gradients) from button-like nav controls */
    .carousel-nav,
    .carousel-dot,
    .lightbox-close-btn {
        -webkit-appearance: none;
        appearance: none;
    }

    .hidden {
        display: none !important;
    }

    .bold {
        font-family: kalamehBold;
    }

    .menu {
        position: fixed;
        top: 0;
        width: 90vw;
        display: flex;
        justify-content: space-between;
        height: 6vh;
        padding: 4vh 5vw 3vh;
        box-shadow: inset 0 -7.5vh 5vh rgba(255, 255, 255, 0.7);
        z-index: 20;
        background-color: rgba(255, 255, 255, 0.7);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-sizing: unset;
        font-size: var(--text-size-regular);
    }

    .right-bar {
        position: relative;
        display: flex;
        align-items: center;
        color: #b9b0a5;
        padding: 1vw;
    }

    .left-bar {
        position: relative;
        display: flex;
        align-items: center;
        padding: 1vw;
    }

    /* gap with fallback for older Safari (pre-14.1): margin on children, zeroed when gap supported */
    .menu div {
        gap: 0 1vw;
    }

    .menu div>* {
        margin-left: 0.5vw;
        margin-right: 0.5vw;
    }

    @supports (gap: 1vw) {
        .menu div>* {
            margin-left: 0;
            margin-right: 0;
        }
    }

    /* Prevent Safari inline image bottom-margin bug */
    .right-bar img {
        height: 7vh;
        max-width: 100%;
        display: block;
    }

    .right-bar span:hover{
        color: #4e4b47;
    }
    #ideasJourchin:hover .city-green{
        color: #638d28;
    }

    .yellow {
        color: #ffcc50;
    }

    .green {
        color: #99cc52;
    }

    .red {
        color: #fd0000;
    }

    .purple {
        color: #cf7bff;
    }

    .hover-purple:hover {
        color: #c1a8ea;
    }

    .menu div *:hover {
        cursor: pointer;
    }

    .left-bar span {
        padding: 1.5vh 1.5vw;
        border-radius: 10vw;
        background-color: #ffcc50;
        color: #ffffff;
    }

    .left-bar #ideaSubmit:hover{
        background-color: #f0cb6d;
    }

    .left-bar #flowerButton:hover{
        background-color: #c1a8ea;
    }
    
    .left-bar #flowerButton {
        background-color: #cf7bff;
    }

    #hamburgarMenu {
        padding: 0;
    }

    .menuDiv {
        width: 50vw;
        height: 29.5vh;
        padding: 2.5vh 10vw 1vh;
        margin: 0 50vw 0 0;
        border-bottom-right-radius: 25px;
        background-color: rgba(255, 255, 255, 0.75);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        /* box-shadow: 0px 0px 0px 3px #b9b0a524; */
        position: fixed;
        display: flex;
        flex-direction: column;
        z-index: 12;
        overflow: hidden;
        color: #b9b0a5;
    }

    .menuDiv * {
        width: 45vw;
        margin: 0.5vh 0;
        padding: 0.5vh 0;
        font-size: var(--text-size-large);
        cursor: pointer;
    }

    .menuDiv #arvanehSignHamburgar {
        color: #ffcc50;
    }

    .menuDiv #arvanehRech {
        color: #cf7bff;
    }


    .banner {
        margin: 13vh 0 30vh;
        display: flex;
        flex-direction: column;
    }

    .topBanner {
        display: flex;
        width: 65vw;
        height: fit-content;
        margin: 7.5vh auto 5vh;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        gap: 10vh 0;
    }

    #verticalLine {
        height: 37.5vh;
        width: 0.5vw;
    }

    #verticalLineM {
        display: none;
        height: 0.5vh;
        width: 50vw;
    }

    #arvanehLogo {
        height: 35vh;
    }

    #arvanehShape {
        position: fixed;
        right: 38.75%;
        width: 22.5%;
        z-index: -5;
        margin-top: 5vh;
    }

    .carousel {
        position: relative;
        width: 85vw;
        height: calc(var(--carousel-item-height) + 5vh);
        margin: auto;
        overflow: hidden;
        display: flex;
        align-items: center;
        direction: ltr;
    }

    .carousel-2 {
        position: relative;
        width: 85vw;
        height: calc(var(--carousel-2-item-height) + 5vh);
        margin: 5vh auto 10vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        direction: ltr;
    }

    .carousel-track-container {
        width: 65vw;
        height: 100%;
        overflow: hidden;
        position: relative;
        margin: 0 auto;
        padding: 0 0.9vw;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 1%, black 99%, transparent 100%);
        display: flex;
        align-items: center;
    }

    .carousel-2 .carousel-track-container {
        width: var(--carousel-2-container-width);
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-2 .carousel-track {
        gap: var(--carousel-2-gap);
        height: var(--carousel-2-item-height);
    }

    .carousel-2 .carousel-item {
        padding-left: 0;
        padding-right: 0;
    }

    .carousel-2 .carousel-item img {
        height: var(--carousel-2-item-height);
        max-width: 100%;
        object-fit: contain;
        border-radius: 999px;
        -webkit-border-radius: 999px;
    }

    /* flex-basis prevents WebKit layout collapse; gap fallback via margin on .carousel-item */
    .carousel-track {
        display: flex;
        align-items: center;
        position: absolute;
        height: var(--carousel-item-height);
        padding: 2.5vh 0;
        gap: var(--carousel-gap);
        will-change: transform;
    }

    .carousel-item {
        flex: 0 0 auto;
        flex-basis: auto;
        /* explicit for WebKit layout integrity */
        height: 100%;
        min-width: 0;
        /* allow shrink in overflow; prevent flex blowout */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        padding: 0 1vw;
        margin-right: var(--carousel-gap);
        /* gap fallback for older Safari */
        box-sizing: border-box;
    }

    @supports (gap: 1vw) {
        .carousel-item {
            margin-right: 0;
        }
    }

    .carousel-item img {
        /* width: 100%; */
        height: 15vh;
        /* border-radius: 5vw; */
        object-fit: contain;
        cursor: pointer;
        user-select: none;
        -webkit-user-drag: none;
        transition: transform var(--transition-normal);
        will-change: transform;
    }

    .carousel-item img:hover {
        transform: scale(var(--carousel-hover-scale));
    }

    .carousel-item img:focus {
        outline: 2px solid var(--carousel-dot-active-color);
        outline-offset: 4px;
    }

    .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4vw;
        height: auto;
        height: fit-content;
        background: none;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        z-index: var(--z-nav);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--transition-normal);
        /* color: var(--carousel-nav-color); */
        padding: 0;
    }

    .carousel-nav:hover:not(:disabled) {
        /* background: var(--carousel-nav-bg-hover); */
        transform: translateY(-50%) scale(1.1);
    }

    .carousel-nav:focus {
        /* outline: 2px solid var(--carousel-dot-active-color); */
        outline-offset: 2px;
    }

    .carousel-nav:disabled {
        opacity: 0.3;
        cursor: not-allowed;
    }

    .carousel-nav:active:not(:disabled) {
        transform: translateY(-50%) scale(0.95);
    }

    .carousel-prev {
        left: 0;
    }

    .carousel-next {
        right: 0;
    }

    .carousel-nav .nav-icon {
        width: 60%;
        height: 60%;
        display: block;
        object-fit: contain;
        pointer-events: none;
    }

    @supports (gap: 1vw) {
        .carousel-dots .carousel-dot:not(:last-child) {
            margin-right: 0;
        }
    }


    .visually-hidden,
    .carousel-status {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .carousel *:focus-visible,
    .carousel-2 *:focus-visible {
        outline: 2px solid var(--carousel-dot-active-color);
        outline-offset: 2px;
    }

    /* height: 100dvh — Dynamic Viewport Height for iOS Safari; 100vh fallback for Safari < 15.4 */
    .lightbox-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 100vh;
        height: 100vh;
        height: 100dvh;
        background: var(--lightbox-bg);
        z-index: var(--z-lightbox);
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity var(--transition-normal);
    }

    .lightbox-overlay.active {
        display: flex;
        opacity: 1;
    }

    /* 90dvh for iOS Safari viewport consistency when address bar shows/hides */
    .lightbox-container {
        position: relative;
        width: 97.5vw;
        height: 97.5vh;
        min-height: 90vh;
        height: 97.5dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: lightboxZoom 0.3s ease;
    }

    .lightbox-image {
        max-width: 100%;
        max-height: 90vh;
        max-height: 90dvh;
        object-fit: contain;
        display: block;
        border-radius: 15px;
    }

    .lightbox-close-btn {
        position: absolute;
        top: 0;
        right: 0;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        padding: 5px;
        width: var(--lightbox-close-size);
        height: var(--lightbox-close-size);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--transition-fast);
    }

    .lightbox-close-btn:hover {
        /* transform: rotate(90deg) scale(1.1); */
    }

    .lightbox-close-btn:focus {
        outline: none;
        /* outline-offset: 2px; */
    }

    .lightbox-close-btn svg {
        width: 100%;
        height: 100%;
        stroke-width: 2;
    }

    .carousel-track,
    .carousel-item img {
        transform: translateZ(0);
        backface-visibility: hidden;
        perspective: 1000px;
    }

    .carousel-item img {
        display: block;
    }

    /* Slight padding for generic .item images */
    .item {
        padding: 0.25rem;
        box-sizing: border-box;
    }

    .carousel-nav,
    .carousel-dot {
        contain: layout style paint;
    }

    .card {
        border-radius: 50px;
        width: 85vw;
        margin: 10vh auto;
        display: flex;
        /* justify-content: space-around; */
        /* flex-direction: row-reverse; */
        align-items: flex-start;
        padding: 10vh 8.5vh;
        font-size: calc(var(--text-size-small) * 1.5);
        text-align: justify;
        direction: rtl;
    }

    .yellow-card {
        background-color: #f0cb6d;
    }

    .flower-card {
        background-color: #c1a8ea;
    }

    #explain {
        flex-direction: column;
        gap: 0;
    }

    .two-lang {
        flex-direction: row;
        justify-content: space-between;
    }

    #right {
        width: 45%;
    }

    #left {
        font-family: kalamehMediumEn;
        text-align: justify;
        direction: ltr;
        width: 46%;
    }

    #left .bold {
        font-family: kalamehBoldEn;
    }

    #prize,
    #prizeSign {
        border-radius: 50px;
        height: 52.5vh;
        overflow: hidden;
        padding: 0 8.5vh;
        flex-direction: row;
        /* display: flex;
    justify-content: space-around; */
    }

    #prizeSign {
        flex-direction: row-reverse;
        height: 60vh;
        justify-content: space-between;
    }

    #prizeImage {
        margin-top: 2.5vh;
        margin-right: -12.5vh;
        max-width: 45vw;
        max-height: 95vh;
        display: block;
    }

    #prizeImageSign {
        margin-top: 7.5vh;
        max-width: 50%;
        max-height: 90vh;
        display: block;
    }

    #prizeExplain,
    #prizeExplainSign {
        /* width: 60%; */
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: justify;
        direction: rtl;
        padding: 10vh 0 5vh;
        /* gap: 2.5vh 0; */
        /* margin: 5vh 5vw 0; */
    }

    #prizeExplainText,
    #prizeExplainTextSign {
        font-size: calc(var(--text-size-small) * 1.5);
    }

    #moreBtn,
    #moreBtnSign {
        color: #ffffff;
        display: flex;
        align-items: center;
        margin-right: 1.5vw;
        cursor: pointer;
        font-size: var(--text-size-large);
    }

    #moreBtnSign {
        justify-content: flex-end;
        padding-left: 15%;
    }

    #prizeExplain img,
    #prizeExplainSign img {
        width: 3vw;
        margin-right: 0.5vw;
    }

    #footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        margin: 10vh auto 5vh;
    }

    #footer span {
        color: #53514e;
        font-size: var(--text-size-small);
        text-align: center;
        margin: 5vh auto;
    }

    .eghbal-stage {
        position: relative;
        width: 90vw;
        margin: 0 auto;
    }

    #shapes {
        position: absolute;
        /* Converted from viewport units to parent-relative percentages */
        right: 43.25%;
        top: 36.7%;
        width: 11.9%;
        /* JS sets the animation after a 2s delay (and when visible) */
        z-index: 10;
        margin-right: 1vw;
    }

    /* We "animate parts of a PNG" by duplicating the same PNG into multiple clipped layers. */
    #shapes .shape-sizer {
        display: block;
        width: 100%;
        height: auto;
        opacity: 0;
        /* only to reserve space (keep layout), not visible */
        pointer-events: none;
        user-select: none;
    }

    #shapes .shape-layer {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 1;
        /* visible during the initial 2s delay */
        will-change: opacity;
        pointer-events: none;
        user-select: none;
    }

    /* Split to 3 vertical parts (top/middle/bottom). Adjust insets if you want different regions. */
    #shapes .layer-top {
        -webkit-clip-path: inset(0 0 66% 0);
        clip-path: inset(0 0 66% 0);
        animation: lampC 1.5s infinite;
    }

    #shapes .layer-mid {
        -webkit-clip-path: inset(33% 0 35% 0);
        clip-path: inset(33% 0 35% 0);
        animation: lampB 1.5s infinite;
    }

    #shapes .layer-bot {
        -webkit-clip-path: inset(65% 25% 0 25%);
        clip-path: inset(65% 25% 0 25%);
        animation: lampA 1.5s infinite;
    }

    #shapes .layer-right {
        -webkit-clip-path: inset(65% 0 0 75%);
        clip-path: inset(65% 0 0 75%);
        animation: lampD 1s infinite;
    }

    #shapes .layer-left {
        -webkit-clip-path: inset(65% 75% 0 0);
        clip-path: inset(65% 75% 0 0);
        animation: lampD 1s infinite;
    }

    #eghbal {
        width: 90vw;
        max-width: 100%;
        margin: 0 1vw 0 0;
        display: block;
        box-shadow: 0 0px 35px 35px white;
    }

    #upIcon {
        width: 4vw;
        max-width: 100%;
        display: block;
        cursor: pointer;
    }

    #medalPic {
        z-index: 1;
        position: absolute;
        width: 16vw;
        right: 14vw;
        top: 53vh;
        animation: rotation 3s infinite;
    }
}