:root {
    --gold: #D4AF37;
    --gold-bright: #FFD700;
    --sand: #C2B280;
    --night: #0B0E14;
    --white: #FFFFFF;
    --glass: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.12);
    --transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--night);
    color: var(--white);
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

/* Loader */
.loader-overlay {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at center, #1e2533, #0b0e14);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 5000;
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader-content {
    text-align: center;
    animation: loaderPulse 3s infinite ease-in-out;
}

.sparkles {
    font-size: 2.5rem;
    margin-bottom: 20px;
    animation: rotateSparkle 4s infinite linear;
    display: inline-block;
}

.loader-content h1 {
    font-size: clamp(2rem, 8vw, 4.5rem);
    color: var(--gold);
    letter-spacing: 12px;
    margin-bottom: 15px;
    font-weight: 800;
    text-shadow: 0 0 30px rgba(212, 175, 55, 0.6);
}

.loader-content p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.progress-bar-container {
    width: 350px;
    height: 3px;
    background: rgba(255, 255, 255, 0.03);
    margin-top: 40px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #b8860b, var(--gold), #ffdf00);
    box-shadow: 0 0 20px var(--gold);
    transition: width 0.4s cubic-bezier(0.1, 0.7, 0.1, 1);
}

@keyframes loaderPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.02); opacity: 1; }
}

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

/* Game Container */
#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
}

#map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #0b0e14;
    cursor: grab;
}

#map-wrapper:active {
    cursor: grabbing;
}

#map {
    position: absolute;
    width: 1920px;
    height: 1080px;
    transform-origin: 0 0;
    will-change: transform;
    z-index: 1;
}

#map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@keyframes mapZoomIn {
    to {
        transform: scale(3.5) translate(-21.5%, -85.5%);
        opacity: 0;
    }
}

.map-zooming {
    animation: mapZoomIn 2s forwards cubic-bezier(0.7, 0, 0.3, 1);
}

/* Animated Map Elements (Ships & Birds) */
.map-element {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 5;
}

.map-element img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Foreground Main Ship */
.map-ship-main {
    left: 9.8%;
    top: 41.5%;
    width: 140px;
    height: 125px;
    filter: drop-shadow(0 8px 14px rgba(0, 20, 50, 0.4));
    animation: shipSailMain 7s ease-in-out infinite;
    transform-origin: 50% 85%;
}

@keyframes shipSailMain {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    25% {
        transform: translate(4px, -3px) rotate(1.8deg);
    }
    50% {
        transform: translate(7px, 2px) rotate(-1.4deg);
    }
    75% {
        transform: translate(3px, 4px) rotate(1deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Distant Ship (Perspective) */
.map-ship-distant {
    left: 19%;
    top: 22%;
    width: 68px;
    height: 61px;
    opacity: 0.92;
    filter: drop-shadow(0 4px 8px rgba(0, 20, 50, 0.25)) brightness(0.97);
    animation: shipSailDistant 8.5s ease-in-out infinite;
    transform-origin: 50% 85%;
}

@keyframes shipSailDistant {
    0% {
        transform: translate(0px, 0px) rotate(0deg);
    }
    30% {
        transform: translate(4px, -3px) rotate(1.4deg);
    }
    60% {
        transform: translate(8px, 1px) rotate(-1deg);
    }
    85% {
        transform: translate(3px, 3px) rotate(0.8deg);
    }
    100% {
        transform: translate(0px, 0px) rotate(0deg);
    }
}

/* Flock of Birds */
.map-birds {
    left: 4.5%;
    top: 10%;
    width: 220px;
    height: 273px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.2));
    animation: birdsFloat 4.5s ease-in-out infinite;
}

@keyframes birdsFloat {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-12px);
    }
}

/* Sevr Cave Spiderweb on Map */
.map-cave-web {
    left: 32.0%;
    top: 64.15%;
    width: 59px;
    height: 59px;
    z-index: 6;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.5));
    animation: caveWebFadeLoop 10s ease-in-out infinite;
}

@keyframes caveWebFadeLoop {
    0% {
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    65% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Soaring Eagles */
.map-eagle {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 7;
}

.map-eagle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

/* Eagle 1: Following user's red line from left to right */
.map-eagle-1 {
    left: -120px;
    top: 56%;
    width: 95px;
    height: 95px;
    filter: drop-shadow(0 15px 10px rgba(0, 0, 0, 0.25));
    animation: eagleFlight1 18s linear infinite;
}

@keyframes eagleFlight1 {
    0% {
        transform: translate(0px, 0px) rotate(-1deg);
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    97% {
        opacity: 1;
    }
    100% {
        transform: translate(2150px, -237px) rotate(-1deg);
        opacity: 0;
    }
}

/* Eagle 2: High altitude, flying right to left across north mountains */
.map-eagle-2 {
    left: 2000px;
    top: 13%;
    width: 65px;
    height: 65px;
    opacity: 0.92;
    filter: drop-shadow(0 12px 8px rgba(0, 0, 0, 0.2));
    animation: eagleFlight2 26s linear infinite;
    animation-delay: 5s;
}

@keyframes eagleFlight2 {
    0% {
        transform: translate(0px, 0px) scaleX(-1) rotate(1deg);
        opacity: 0;
    }
    4% {
        opacity: 0.92;
    }
    96% {
        opacity: 0.92;
    }
    100% {
        transform: translate(-2200px, 120px) scaleX(-1) rotate(1deg);
        opacity: 0;
    }
}

/* Eagle 3: Lower desert dunes, sweeping left to right */
.map-eagle-3 {
    left: -110px;
    top: 74%;
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.25));
    animation: eagleFlight3 22s linear infinite;
    animation-delay: 11s;
}

@keyframes eagleFlight3 {
    0% {
        transform: translate(0px, 0px) rotate(-3deg);
        opacity: 0;
    }
    3% {
        opacity: 1;
    }
    97% {
        opacity: 1;
    }
    100% {
        transform: translate(2150px, -130px) rotate(-3deg);
        opacity: 0;
    }
}

/* Rolling Tumbleweeds (Çalılar) */
.map-tumbleweed {
    position: absolute;
    pointer-events: none;
    user-select: none;
    z-index: 4;
}

.map-tumbleweed img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    transform-origin: 50% 50%;
}

/* Tumbleweed 1: Along the red path between Stop 3 and Palm Trees */
.map-tumbleweed-1 {
    left: 40%;
    top: 51.5%;
    width: 54px;
    height: 54px;
    filter: drop-shadow(0 4px 5px rgba(60, 40, 10, 0.32));
    animation: tumbleMove1 12s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

.map-tumbleweed-1 img {
    animation: tumbleSpin1 12s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}

@keyframes tumbleMove1 {
    0% {
        opacity: 0;
        transform: translate(0px, 0px);
    }
    6% {
        opacity: 0.85;
        transform: translate(25px, -3px);
    }
    16% {
        opacity: 0.85;
        transform: translate(85px, 2px);
    }
    26% {
        opacity: 0.85;
        transform: translate(155px, -4px);
    }
    33% {
        opacity: 0.85;
        transform: translate(195px, 1px);
    }
    39% {
        /* Kısa duraklama: kum tepesinde durup bekler */
        opacity: 0.85;
        transform: translate(197px, 2px);
    }
    46% {
        /* Rüzgar tekrar hızlandırır ve devam eder */
        opacity: 0.85;
        transform: translate(245px, -5px);
    }
    58% {
        opacity: 0.85;
        transform: translate(355px, 2px);
    }
    68% {
        opacity: 0.85;
        transform: translate(430px, -2px);
    }
    76% {
        opacity: 0;
        transform: translate(480px, 1px);
    }
    100% {
        opacity: 0;
        transform: translate(480px, 1px);
    }
}

@keyframes tumbleSpin1 {
    0% {
        transform: rotate(0deg);
    }
    6% {
        transform: rotate(65deg);
    }
    16% {
        transform: rotate(220deg);
    }
    26% {
        transform: rotate(390deg);
    }
    33% {
        transform: rotate(480deg);
    }
    39% {
        /* Dönüş durur */
        transform: rotate(484deg);
    }
    46% {
        /* Tekrar dönmeye başlar */
        transform: rotate(580deg);
    }
    58% {
        transform: rotate(820deg);
    }
    68% {
        transform: rotate(980deg);
    }
    76% {
        transform: rotate(1080deg);
    }
    100% {
        transform: rotate(1080deg);
    }
}

/* Tumbleweed 2: Lower uninhabited desert dunes (below camels) */
.map-tumbleweed-2 {
    left: 54%;
    top: 81%;
    width: 44px;
    height: 44px;
    opacity: 0;
    filter: drop-shadow(0 3px 5px rgba(60, 40, 10, 0.3));
    animation: tumbleMove2 13s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    animation-delay: 6s;
}

.map-tumbleweed-2 img {
    animation: tumbleSpin2 13s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
    animation-delay: 6s;
}

@keyframes tumbleMove2 {
    0% {
        opacity: 0;
        transform: translate(0px, 0px);
    }
    7% {
        opacity: 0.85;
        transform: translate(30px, -2px);
    }
    18% {
        opacity: 0.85;
        transform: translate(90px, 2px);
    }
    27% {
        opacity: 0.85;
        transform: translate(145px, 0px);
    }
    35% {
        /* Kısa duraklama */
        opacity: 0.85;
        transform: translate(147px, 1px);
    }
    43% {
        opacity: 0.85;
        transform: translate(195px, -4px);
    }
    56% {
        opacity: 0.85;
        transform: translate(280px, 2px);
    }
    68% {
        opacity: 0;
        transform: translate(350px, -1px);
    }
    100% {
        opacity: 0;
        transform: translate(350px, -1px);
    }
}

@keyframes tumbleSpin2 {
    0% {
        transform: rotate(0deg);
    }
    7% {
        transform: rotate(70deg);
    }
    18% {
        transform: rotate(220deg);
    }
    27% {
        transform: rotate(350deg);
    }
    35% {
        transform: rotate(354deg);
    }
    43% {
        transform: rotate(460deg);
    }
    56% {
        transform: rotate(660deg);
    }
    68% {
        transform: rotate(800deg);
    }
    100% {
        transform: rotate(800deg);
    }
}

/* Markers */
.marker {
    position: absolute;
    width: 54px;
    height: 54px;
    background: #2D5A27;
    color: white;
    border: 3px solid #FFD700;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10;
    transform: translate(-50%, -50%);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
}

.marker.locked {
    background: rgba(26, 34, 56, 0.9);
    opacity: 0.85;
    filter: grayscale(0.4);
}

.marker.active {
    animation: goldGlow 2s infinite;
    background: #3a7532;
    z-index: 15;
}

.marker-label {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(45, 90, 39, 0.95);
    color: white;
    padding: 5px 15px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid #FFD700;
    pointer-events: none;
}

@keyframes goldGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
    }

    70% {
        box-shadow: 0 0 0 25px rgba(255, 215, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

/* UI Components */
.game-header {
    position: fixed;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    min-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2000;
    pointer-events: none;
}

.stop-info {
    pointer-events: auto;
    background: var(--glass);
    backdrop-filter: blur(15px);
    padding: 12px 30px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
}

.glass-badge {
    background: var(--glass);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    padding: 10px 20px;
    border-radius: 12px;
}

.progress-track-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    z-index: 150;
}

.progress-line {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.05);
}

.progress-fill {
    height: 100%;
    background: var(--gold);
    width: 0%;
    transition: width 1s;
}

/* Story Overlay Scene */
.story-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #000;
    overflow-y: auto;
    /* Enable scroll */
    padding: 60px 0;
    /* Space for scroll */
}

.story-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

@media (max-width: 1024px) {
    .story-bg {
        position: fixed;
        /* Keep background fixed while content scrolls on mobile */
    }
}

.story-content-box {
    position: relative;
    z-index: 10;
    max-width: 1000px;
    width: 90%;
    padding: clamp(30px, 5vw, 50px);
    text-align: center;
    animation: fadeInScale 1.5s ease-out;
    background: transparent;
    /* Clean by default */
    backdrop-filter: none;
    border: none;
    transition: all 0.5s;
}

.story-content-box.desert-theme {
    background: rgba(0, 0, 0, 0.6) !important;
    /* Semi-transparent black */
    backdrop-filter: none !important;
    /* No blur as requested */
    border-radius: 32px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

#story-title {
    font-size: clamp(1.5rem, 4vw, 2.4rem);
    /* Slightly smaller */
    font-weight: 800;
    color: var(--gold);
    letter-spacing: 4px;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
    margin-bottom: 0;
    white-space: nowrap;
}

@media (max-width: 932px) {
    #story-title {
        font-size: clamp(1.1rem, 4vw, 1.8rem);
        /* More conservative sizing */
        letter-spacing: 2px;
        white-space: normal;
        line-height: 1.2;
    }

    .story-header {
        gap: 10px;
        flex-direction: row;
        /* Keep it horizontal but smaller gap */
        flex-wrap: wrap;
        justify-content: center;
    }

    .story-content-box {
        padding: clamp(15px, 3vw, 30px);
        width: 95%;
    }

    .story-text {
        line-height: 1.4;
    }
}

@media (max-height: 500px) and (orientation: landscape) {
    .story-overlay {
        padding: 20px 0;
    }

    #story-title {
        font-size: 1.2rem;
        margin-bottom: 5px;
    }

    .story-text p {
        margin-bottom: 8px;
    }
}

.story-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px;
    text-align: center;
}

.header-audio-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audio-label {
    color: var(--gold);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.read-btn {
    background: var(--gold);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--night);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.read-btn svg {
    width: 28px;
    height: 28px;
}

.read-btn:hover {
    transform: scale(1.15);
    background: white;
}

.read-btn.playing {
    background: #ff4757;
    color: white;
    box-shadow: 0 0 30px rgba(255, 71, 87, 0.5);
}

.story-text {
    font-size: clamp(1rem, 1.8vw, 1.3rem);
    /* Slightly smaller */
    line-height: 1.5;
    /* Reduced from 1.8 */
    color: #ddd;
    margin-bottom: 40px;
    font-weight: 400;
    text-align: center;
}

.story-text p {
    margin-bottom: 12px;
    /* Reduced from 20px */
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 500;
}

.modal-content {
    width: 90%;
    max-width: 600px;
    padding: clamp(20px, 4vh, 40px) clamp(20px, 5vw, 50px);
    border-radius: 30px;
    background: var(--night);
    border: 1px solid var(--glass-border);
    text-align: center;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content .modal-badge {
    margin-bottom: 5px;
}

.modal-content h2 {
    font-size: clamp(1.2rem, 5vh, 2rem);
    color: var(--gold);
    margin-bottom: 10px;
}

.modal-content p {
    font-size: clamp(0.85rem, 3.5vh, 1.1rem);
    line-height: 1.4;
    margin-bottom: 20px;
    color: #ccc;
}

.gold-btn {
    background: var(--gold);
    color: var(--night);
    border: none;
    padding: clamp(10px, 3vh, 16px) clamp(25px, 5vw, 40px);
    border-radius: 12px;
    font-weight: 800;
    cursor: pointer;
    font-size: clamp(0.85rem, 3vh, 1rem);
    transition: 0.3s;
}

@media (max-width: 768px) {
    .modal-content {
        width: 80%;
        padding: 20px 15px;
    }

    .modal-content h2 {
        margin-bottom: 8px;
    }

    .modal-content p {
        margin-bottom: 15px;
    }
}

.game-controls {
    position: absolute;
    bottom: 40px;
    right: 40px;
    display: flex;
    gap: 20px;
    z-index: 100;
}

.nav-btn {
    width: 60px;
    height: 60px;
    background: var(--glass);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    color: white;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Mini Game Styles */
.minigame-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: #000;
    display: flex;
    flex-direction: row;
    /* Sidebar on left, scene on right */
}

.minigame-sidebar {
    width: 25vw;
    min-width: 220px;
    height: 100%;
    background: #412507;
    border-right: 2px solid var(--gold);
    display: flex;
    flex-direction: column;
    z-index: 10;
    overflow-y: auto;
}

@media (max-width: 1024px) {
    .minigame-sidebar {
        width: 30vw;
        min-width: 180px;
    }
}

.sidebar-content {
    padding: clamp(20px, 4vw, 60px) clamp(15px, 3vw, 40px);
}

.minigame-sidebar h3 {
    color: var(--gold);
    font-size: clamp(1.1rem, 2.2vw, 1.8rem);
    margin-bottom: 10px;
    letter-spacing: 1px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.sidebar-desc {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.4;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
}

.item-list {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 2vw, 25px);
}

.item-check {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    opacity: 0.4;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.item-check.found {
    opacity: 1;
    color: var(--gold);
    transform: translateX(10px);
}

.item-check .status {
    width: clamp(18px, 2vw, 24px);
    height: clamp(18px, 2vw, 24px);
    border: 2px solid #555;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.item-check.found .status {
    background: #4CAF50;
    border-color: #4CAF50;
    color: white;
}

/* Sevr Mini Game Styles */
.sevr-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #000;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
}

.game-info-bar {
    background: var(--glass);
    backdrop-filter: blur(15px);
    padding: clamp(15px, 3vw, 25px);
    text-align: center;
    border-bottom: 1px solid var(--gold);
}

.game-info-bar h2,
.game-info-bar h3 {
    color: var(--gold);
    font-size: clamp(1rem, 2.5vw, 1.7rem);
    font-weight: 800;
    margin-bottom: 5px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.game-info-bar p {
    color: #eee;
    font-size: clamp(0.8rem, 1.5vw, 1.1rem);
    opacity: 0.9;
}

.sevr-game-scene {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

#sevr-game-bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* CRITICAL: Matches coordinates to image features regardless of aspect ratio */
    pointer-events: none;
    display: block;
}

.dot {
    position: absolute;
    width: clamp(25px, 4vw, 40px);
    height: clamp(25px, 4vw, 40px);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
    transition: all 0.3s;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #000;
    user-select: none;
    -webkit-user-select: none;
}

#map-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-drag: none;
    -webkit-user-drag: none;
}

.minigame-scene {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

#minigame-bg,
.game-bg {
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* CRITICAL: Prevents misaligned interactive items on mobile */
    display: block;
}

.clickable-item {
    position: absolute;
    cursor: pointer;
    z-index: 5;
    transition: 0.3s;
}

.web-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

.web-line {
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 4;
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px white);
}

.temp-line {
    stroke: rgba(255, 255, 255, 0.5);
    stroke-dasharray: 8, 4;
    animation: dashMove 0.5s linear infinite;
}

@keyframes dashMove {
    to {
        stroke-dashoffset: -12;
    }
}

.dot {
    position: absolute;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 20;
    transition: 0.3s;
}

.dot.active {
    background: white;
    border-color: var(--gold);
    box-shadow: 0 0 20px white;
    transform: translate(-50%, -50%) scale(1.2);
}

.dot.start-dot {
    border-color: #4CAF50;
    box-shadow: 0 0 25px #4CAF50;
}

.dot.next-target {
    transform: translate(-50%, -50%) scale(1.4);
    border-color: var(--gold);
    background: var(--gold);
    box-shadow: 0 0 30px var(--gold);
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 10px var(--gold);
    }

    50% {
        box-shadow: 0 0 40px var(--gold);
    }

    100% {
        box-shadow: 0 0 10px var(--gold);
    }
}

.dot.end-dot {
    border-color: #ff4757;
    box-shadow: 0 0 25px #ff4757;
}

.dot::after {
    content: attr(data-label);
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    font-weight: 800;
    color: white;
    text-shadow: 0 0 10px black;
    white-space: nowrap;
}

.dot.completed {
    width: 10px;
    height: 10px;
    background: var(--gold);
    border: none;
    opacity: 0.8;
}

#final-web {
    position: absolute;
    top: 55%;
    left: 60%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 35%;
    height: auto;
    z-index: 8;
    opacity: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
    filter: drop-shadow(0 0 20px var(--gold));
}

#final-web.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.object-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 1;
    /* Always visible */
    transition: filter 0.4s ease-out, transform 0.3s ease-out;
}

.clickable-item:hover .object-img {
    transform: scale(1.05);
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0.5));
}

.clickable-item.found-visual .object-img {
    filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 0 20px var(--gold));
    transform: scale(1.1);
}

.clickable-item.found-visual {
    pointer-events: none;
}

/* Professional Notification Pop-up */
.notification-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.4s ease-out;
}

.notification-content {
    width: 90%;
    max-width: 450px;
    padding: 40px;
    border-radius: 30px;
    text-align: center;
    background: rgba(11, 14, 20, 0.95);
    border: 1px solid var(--gold);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.notification-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

#notification-title {
    color: var(--gold);
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: 2px;
}

#notification-message {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }

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

/* Music Toggle Button */
.music-toggle-btn {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 54px;
    height: 54px;
    background: var(--glass);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: white;
    cursor: pointer;
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.music-toggle-btn:hover {
    transform: scale(1.1);
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--gold);
}

/* Desert Mini Game Styles */
.desert-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #000;
}

/* Ummu Mabed Game Overlay */
.ummu-mabed-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    /* Above logo and map */
    background: #000;
}

.ummu-mabed-scene {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preparation-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #000;
    display: flex;
    flex-direction: column;
    user-select: none;
    -webkit-user-select: none;
}

.desert-game-scene {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #000;
}

.game-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Desert Mini Game - Path Clearing Premium Styles */
.obstacles-container {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.obstacle-wrapper {
    transition: opacity 0.5s ease-in-out;
    cursor: pointer;
}

.obstacle-anim {
    animation: floating 3s ease-in-out infinite;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.obstacle-anim img {
    width: auto;
    height: auto;
    max-width: 20vw;
    /* Limit based on screen width */
    max-height: 32vh;
    /* Limit based on screen height */
    display: block;
    pointer-events: none;
    object-fit: contain;
}

.obstacle-wrapper:hover .obstacle-anim {
    transform: scale(1.1);
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
}

.obstacle-wrapper.clearing .obstacle-anim {
    animation: poof 0.4s forwards;
    pointer-events: none;
}

.game-progress-overlay {
    position: absolute;
    top: 20px;
    /* Adjusted for better visibility */
    right: 30px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(12px);
    padding: 12px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 215, 0, 0.4);
    color: var(--gold);
    font-weight: 800;
    font-size: 1rem;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #d2b48c;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1000;
}

/* Animations */
@keyframes floating {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes poof {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
        filter: blur(8px);
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-4px, 4px);
    }

    50% {
        transform: translate(4px, -4px);
    }

    75% {
        transform: translate(-4px, -4px);
    }
}

/* Ummu Mabed Mini Game - Milking Miracle Premium Styles */
/* Ummu Mabed Mini Game - New Multi-Stage Styles */
.game-instruction-box {
    position: absolute;
    top: clamp(15px, 5vh, 40px);
    left: 50%;
    transform: translateX(-50%);
    padding: clamp(8px, 2vh, 15px) clamp(20px, 5vw, 40px);
    border-radius: 100px;
    z-index: 1000;
    color: white;
    font-size: clamp(0.9rem, 3.5vh, 1.5rem);
    font-weight: 800;
    border: 2px solid var(--gold);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    white-space: nowrap;
    /* Keep it on one line */
    width: auto;
    max-width: 90vw;
}

.ummu-goat-container {
    position: absolute;
    bottom: 12%;
    left: 50%;
    width: 65vh;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
}

.entrance-anim {
    animation: goat-entrance 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes goat-entrance {
    0% {
        transform: translate(-150%, 0);
        opacity: 0;
    }

    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.miracle-goat {
    width: 100%;
    height: auto;
    display: block;
}

.target-zone {
    position: absolute;
    /* DEBUG: border: 2px dashed red; */
}

#goat-mouth-zone {
    top: 15%;
    right: 0%;
    width: 35%;
    height: 35%;
}

#goat-udder-zone {
    bottom: 5%;
    left: 20%;
    width: 35%;
    height: 35%;
}

.drag-item-ummu {
    position: absolute;
    cursor: grab;
    z-index: 100;
    transition: transform 0.2s;
}

.drag-item-ummu:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.drag-item-ummu img {
    height: 10vh;
    /* Even smaller bowl/saman */
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    transition: transform 0.2s;
}

.drag-item-ummu.dragging {
    pointer-events: none;
    z-index: 9999;
    transform: scale(1.1);
}

#ummu-saman {
    bottom: 10%;
    left: 10%;
}

#ummu-bowl {
    bottom: 10%;
    right: 10%;
}

.guide-arrow {
    position: absolute;
    width: 40px;
    /* Smaller and more elegant */
    height: auto;
    z-index: 2000;
    animation: arrow-bounce 1s infinite;
    pointer-events: none;
    filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.5));
}

@keyframes arrow-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

.milk-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    /* Starts empty */
    pointer-events: none;
    z-index: 5;
}

.bowl-main-img {
    width: 100%;
    height: auto;
    display: block;
    z-index: 10;
}

.milk-stream {
    position: absolute;
    width: 6px;
    background: white;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
    z-index: 2000;
    border-radius: 3px;
}

.shake-scene {
    animation: shake 0.15s ease-in-out 2;
}

.music-toggle-btn svg {
    width: 28px;
    height: 28px;
}

.music-toggle-btn .music-off {
    color: #ff4757;
}

.hidden {
    display: none !important;
}



/* Kuba Mini Game Styles - Puzzle Logic */
.kuba-game-overlay {
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: #000;
}

.kuba-scene {
    width: 100%;
    height: 100%;
    position: relative;
    background: #1a1a1a;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kuba-mosque-container {
    height: 70vh;
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: url('assets/kuba/mosque_bg.jpg') center center / cover no-repeat;
}

.kuba-main-bg {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

#kuba-slots-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.stone-slot {
    position: absolute;
    /* Dimensions and positions are set via JS data */
}

.stone-slot.filled {
    opacity: 0.8;
}

#kuba-stones-dock {
    height: 30vh;
    background: #8b5e3c;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    gap: 15px;
    padding: 10px 20px;
    border-top: 4px solid #5d3e28;
    z-index: 10;
    overflow-y: auto;
}

.drag-stone {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* Ensures stones never squish in dock */
}

.drag-stone img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.drag-stone.dragging {
    cursor: grabbing;
    z-index: 9999;
    pointer-events: none;
    position: fixed;
    /* During active drag */
}

.drag-stone.placed {
    pointer-events: none;
    transform: scale(1) !important;
    filter: none;
}

/* Orientation Overlay */
.orientation-overlay {
    position: fixed;
    inset: 0;
    background: #1a1a1a;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(15px);
}

@media (orientation: portrait) and (max-width: 1024px) {
    .orientation-overlay {
        display: flex;
    }
}

.orientation-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 100%;
}

.orientation-content .phone-icon {
    width: 50px;
    height: 90px;
    border: 3px solid var(--gold);
    border-radius: 8px;
    position: relative;
    animation: rotatePhone 2.5s ease-in-out infinite;
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

.orientation-content .phone-icon::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
}

.orientation-content p {
    font-size: 1.2rem;
    max-width: 280px;
    line-height: 1.6;
    font-weight: 600;
    color: #eee;
}

@keyframes rotatePhone {

    0%,
    10% {
        transform: rotate(0deg);
    }

    40%,
    60% {
        transform: rotate(90deg);
    }

    90%,
    100% {
        transform: rotate(0deg);
    }
}

/* Main Logo */
.main-logo {
    position: fixed;
    top: 25px;
    left: 25px;
    z-index: 100;
    /* Behind overlays but above the map */
    pointer-events: none;
}

.main-logo img {
    height: clamp(60px, 12vh, 100px);
    width: auto;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.4));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* External Logo Link */
.external-logo-link {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    opacity: 0.6;
    transition: opacity 0.3s, transform 0.3s;
}

.external-logo-link:hover {
    opacity: 1;
    transform: scale(1.05);
}

.external-logo-link img {
    height: 40px;
    /* Small size */
    width: auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.game-info-bar {
    background: var(--glass);
    backdrop-filter: blur(15px);
    padding: clamp(8px, 1.5vw, 15px);
    text-align: center;
    border-bottom: 1px solid var(--gold);
    flex-shrink: 0;
}

.game-info-bar h2,
.game-info-bar h3 {
    color: var(--gold);
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    font-weight: 800;
    margin-bottom: 2px;
    letter-spacing: 2px;
    white-space: nowrap;
}

.game-info-bar p {
    color: #eee;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    opacity: 0.9;
}

/* Header Controls */
.header-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 5000;
    display: flex;
    gap: 12px;
}

.header-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--gold);
    color: var(--gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(5px);
    padding: 0;
}

.header-btn svg {
    width: 22px;
    height: 22px;
    display: block;
}

.header-btn:hover {
    background: var(--gold);
    color: black;
    transform: scale(1.1);
}

.final-celebration-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.celebration-container {
    position: relative;

    width: 100%;
    height: 100%;
    overflow: hidden;
}

.vibrant-medine-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vibrant-medine-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#scratch-canvas,
#particle-canvas {
    position: absolute;
    inset: 0;
    z-index: 2;
    cursor: none;
    /* Hide real cursor */
}

.scratch-cursor {
    position: absolute;
    width: 80px;
    /* Adjust size as requested */
    height: auto;
    pointer-events: none;
    z-index: 100;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.5));
    transition: transform 0.1s ease-out;
}

#particle-canvas {
    z-index: 3;
    pointer-events: none;
    /* Let clicks pass through to scratch-canvas */
}

/* Animations for the "Alive" city */
.sun-flare {
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 200, 0.8) 0%, rgba(255, 215, 0, 0.3) 40%, transparent 70%);
    border-radius: 50%;
    z-index: 2;
    animation: sunPulse 4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sunPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.9;
    }
}

.final-birds .bird {
    position: absolute;
    width: 20px;
    height: 10px;
    background: #000;
    clip-path: polygon(0% 100%, 50% 0%, 100% 100%, 50% 80%);
    animation: fly 15s linear infinite, wingFlap 0.4s ease-in-out infinite;
    z-index: 3;
    opacity: 0.6;
}

.bird.b1 {
    top: 15%;
    animation-duration: 25s, 0.4s;
}

.bird.b2 {
    top: 25%;
    animation-duration: 20s, 0.5s;
    animation-delay: 2s;
}

.bird.b3 {
    top: 20%;
    animation-duration: 30s, 0.3s;
    animation-delay: 5s;
}

@keyframes fly {
    from {
        left: -50px;
    }

    to {
        left: 110%;
    }
}

@keyframes wingFlap {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(0.3);
    }
}

.final-butterflies .butterfly {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ff69b4;
    border-radius: 50%;
    z-index: 4;
    animation: flutter 10s ease-in-out infinite;
}

.butterfly.bf1 {
    top: 60%;
    animation-duration: 12s;
}

.butterfly.bf2 {
    top: 75%;
    animation-duration: 15s;
    animation-delay: 3s;
}

@keyframes flutter {
    0% {
        transform: translate(-100px, 0) scale(1);
        background: #ff69b4;
    }

    25% {
        transform: translate(25vw, -50px) scale(1.2);
        background: #00ffff;
    }

    50% {
        transform: translate(50vw, 0) scale(1);
        background: #ffff00;
    }

    75% {
        transform: translate(75vw, 50px) scale(1.2);
        background: #ff4500;
    }

    100% {
        transform: translate(110vw, 0) scale(1);
    }
}

.final-clouds {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.cloud {
    position: absolute;
    width: 300px;
    height: 100px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    filter: blur(40px);
    animation: drift linear infinite;
}

.cloud.c1 {
    top: 5%;
    left: -300px;
    animation-duration: 50s;
}

.cloud.c2 {
    top: 15%;
    left: -300px;
    animation-duration: 80s;
    animation-delay: 15s;
}

.cloud.c3 {
    top: 10%;
    left: -300px;
    animation-duration: 70s;
    animation-delay: 5s;
    opacity: 0.4;
}

.cloud.c4 {
    top: 25%;
    left: -300px;
    animation-duration: 100s;
    animation-delay: 20s;
}

@keyframes drift {
    from {
        left: -350px;
    }

    to {
        left: 110%;
    }
}

.final-congrats {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
    padding: 40px 60px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 2px solid var(--gold);
    animation: finalFadeInScale 1s ease-out;
}

.final-congrats h1 {
    font-size: clamp(2rem, 7vw, 4rem);
    color: var(--gold);
    margin-bottom: 20px;
    letter-spacing: 2px;
    text-shadow: 0 0 20px var(--gold);
    white-space: nowrap;
}

.final-congrats p {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 30px;
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

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

@keyframes finalFadeInScale {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}