body {
    font-family: 'Fredoka', sans-serif;
    overflow-x: hidden;
    background-color: #87CEEB; /* Sky Blue */
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 13 13'%3E%3Cg%3E%3Cpath fill='white' d='M6.57 9.48l1.78 1.75c0.7,0.71 0.89,0.23 2.02,-0.89 0.3,-0.3 0.57,-0.56 0.87,-0.86 0.44,-0.43 0.52,-0.65 0.04,-1.13 -0.29,-0.29 -1.65,-1.59 -1.77,-1.8l2.74 -1.56c0.28,-0.17 0.71,-0.31 0.72,-0.71 0,-0.44 -0.45,-0.53 -0.8,-0.64l-9.81 -3.12c-0.48,-0.15 -1.88,-0.76 -2.23,-0.42 -0.28,0.28 -0.04,0.77 0.06,1.11l1.04 3.27c0.47,1.45 0.92,2.9 1.39,4.36l1.04 3.27c0.12,0.38 0.16,0.79 0.6,0.82 0.4,0.02 0.56,-0.42 0.72,-0.69 0.52,-0.85 1.09,-1.96 1.59,-2.76z'/%3E%3Cpath fill='%23202020' d='M6.53 9.05c0.59,0.58 1.17,1.15 1.76,1.75 0.7,0.7 0.47,0.77 1.89,-0.65 1.41,-1.41 1.35,-1.17 0.66,-1.85 -0.27,-0.28 -1.66,-1.61 -1.77,-1.79l3.29 -1.91c0.23,-0.12 0.33,-0.1 0.31,-0.44 -0.25,-0.23 -3.03,-1.02 -3.57,-1.21 -2.65,-0.89 -5.74,-1.74 -8.27,-2.63 -0.4,-0.15 -0.7,-0.15 -0.53,0.37l2.92 9.18c0.19,0.6 0.38,1.24 0.59,1.84 0.06,0.18 0.22,0.78 0.32,0.87 0.31,0.28 0.51,-0.28 0.62,-0.48 0.28,-0.51 0.6,-1.04 0.89,-1.54l0.89 -1.51z'/%3E%3Cpath fill='%23FF263D' d='M4.8 11.01c0.31,-0.44 0.54,-0.92 0.8,-1.37 0.15,-0.24 0.27,-0.45 0.4,-0.69 0.17,-0.32 0.22,-0.54 0.6,-0.59 0.51,-0.29 0.63,-0.18 0.8,0 0.23,0.23 0.42,0.43 0.65,0.65 0.23,0.22 0.41,0.42 0.64,0.64l0.64 0.64c0.2,-0.15 1.29,-1.23 1.38,-1.4 -0.18,-0.26 -1.4,-1.43 -1.78,-1.81 -0.82,-0.8 -0.84,-0.6 1.15,-1.74l1.73 -1.03c-0.61,-0.12 -6.55,-2.09 -7.57,-2.39 -0.49,-0.15 -2.23,-0.79 -2.59,-0.79l-0.08 0.02c0.18,0.15 0.77,2.23 0.84,2.45l2.25 7.11c0.04,0.12 0.06,0.22 0.14,0.3z'/%3E%3Cpath fill='%23E52D43' d='M4.8 11.01c-0.08,-0.08 -0.1,-0.18 -0.14,-0.3l-2.25 -7.11c-0.07,-0.22 -0.66,-2.3 -0.84,-2.45l0.08 -0.02c-0.12,-0.13 -0.57,-0.23 -0.78,-0.29l3.47 10.93c0.12,-0.08 0.44,-0.7 0.46,-0.76z'/%3E%3Cpath fill='white' d='M6.76 7.02c-0.36,0.02 -0.9,0.43 -1.77,-0.11 -0.99,-0.62 -1.12,-2.27 0.01,-3.03 0.73,-0.49 1.11,-0.25 1.85,-0.08 -0.05,-0.19 -0.11,-0.22 -0.43,-0.39 -0.16,-0.09 -0.39,-0.17 -0.58,-0.22 -2.39,-0.53 -3.76,3 -1.46,4.18 0.41,0.22 0.84,0.3 1.35,0.21 0.3,-0.05 0.61,-0.17 0.85,-0.34 0.13,-0.09 0.16,-0.1 0.18,-0.22z'/%3E%3Cpath fill='%23E52D43' d='M6.6 8.36c0.08,0.19 1.72,1.83 2.13,2.2 0.11,0.1 0.06,0.07 0.18,0.13l0.42 -0.4 -0.64 -0.64c-0.23,-0.22 -0.41,-0.42 -0.64,-0.64 -0.23,-0.22 -0.42,-0.42 -0.65,-0.65 -0.17,-0.18 -0.29,-0.29 -0.8,0z'/%3E%3Cpath fill='white' d='M6.8 5.03l-0.67 0.04c0.06,0.3 0.28,0.25 0.38,0.47 0.12,0.27 -0.08,0.47 -0.07,0.75 0.24,-0.06 0.39,-0.28 0.59,-0.29 0.27,-0.01 0.36,0.25 0.63,0.27 -0.02,-0.25 -0.17,-0.49 -0.03,-0.7 0.17,-0.27 0.37,-0.17 0.39,-0.45 -0.52,-0.1 -0.62,0.12 -0.8,-0.45 0,-0.01 -0.04,-0.14 -0.04,-0.15 -0.09,-0.2 0.02,0.04 -0.04,-0.06 -0.05,-0.1 0,-0.03 -0.06,-0.08 -0.14,0.21 -0.15,0.46 -0.28,0.65z'/%3E%3C/g%3E%3C/svg%3E") 16 0, auto;

}

/* ابرهای پس‌زمینه */
.cloud {
    position: fixed;
    z-index: 0;
    opacity: 0.8;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* استایل‌های نقشه */
.map-container {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    border: 8px solid white;
    border-radius: 40px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15), inset 0 0 40px rgba(255,255,255,0.8);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
}

.region-path {
    stroke: white;
    stroke-width: 3;
    stroke-linejoin: round;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.1));
}

.region-path:hover {
    stroke: #FCD34D;
    stroke-width: 6;
    transform: translateY(-5px) scale(1.01);
    filter: drop-shadow(0 10px 10px rgba(0,0,0,0.2));
    z-index: 100;
}

.region-path.active {
    fill: #fbbf24 !important;
    stroke: #fff;
    stroke-width: 5;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.8));
}

/* استایل پاسپورت */
.passport-item {
    transition: all 0.3s ease;
    filter: grayscale(100%) opacity(0.6);
    cursor: pointer;
}
.passport-item:hover {
    transform: translateY(-5px);
    filter: grayscale(0%) opacity(0.8);
}
.passport-item.unlocked {
    filter: grayscale(0%) opacity(1);
    border-color: #FCD34D;
    box-shadow: 0 0 15px #FCD34D;
}

/* استایل سکشن‌ها */
.region-section {
    scroll-margin-top: 180px;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* دکمه‌های کارتونی */
.btn-fun {
    transition: all 0.1s;
    box-shadow: 0 6px 0 rgba(0,0,0,0.2);
}
.btn-fun:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 rgba(0,0,0,0.2);
}

/* لیبل‌های روی نقشه */
.map-label {
    font-family: 'Amatic SC', cursive;
    fill: rgb(0, 0, 0);
    text-shadow: 2px 2px 0 #ffffff;
    font-size: 48px;
    pointer-events: none;
    opacity: 0.9;
}

/* انیمیشن مهر روی نقشه */
.map-stamp-effect {
    position: absolute;
    pointer-events: none;
    z-index: 50;
    transform: translate(-50%, -50%); 
    animation: stamp-bounce 0.6s forwards;
    filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.3));
}

/* انیمیشن رنگین‌کمانی متن */
.rainbow-text {
    background: linear-gradient(
        to right,
        #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3, #ff0000
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: rainbow_move 3s linear infinite;
    display: inline-block;
}

@keyframes rainbow_move {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/* انیمیشن ژله‌ای عکس‌ها */
.blob-mask {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: blob_morph 8s ease-in-out infinite;
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
    border: 6px solid white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    transform: translateZ(0);
    will-change: border-radius;
}

.blob-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes blob_morph {
    0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
    100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

/* گالری */
.gallery-grid img {
    transition: transform 0.3s ease;
}
.gallery-grid img:hover {
    transform: scale(1.05);
}

/* Overlay و Popup */
#welcomeOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.welcome-card {
    background: #ffffff;
    width: 90%;
    max-width: 450px;
    border-radius: 40px;
    border: 8px solid #FCD34D;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    position: relative;
    animation: pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.welcome-logo-container {
    width: 140px;
    height: 140px;
    background: white;
    border-radius: 50%;
    border: 6px solid #FCD34D;
    position: absolute;
    top: -70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    z-index: 10;
}

.welcome-logo-img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
}

.start-adventure-btn {
    background: #22c55e;
    color: white;
    font-family: 'Bangers', cursive;
    font-size: 28px;
    padding: 15px 40px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 0 #15803d;
    transition: all 0.1s;
    letter-spacing: 1px;
    margin-top: 20px;
    width: 100%;
}

.start-adventure-btn:hover {
    background: #4ade80;
    transform: scale(1.02);
}

.start-adventure-btn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #15803d;
}

/* Media Cards */
.media-card-box {
    background-color: #ffffff;
    border-radius: 2.5rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.card-video { border: 6px solid #fbbf24; }
.card-podcast { border: 6px solid #d946ef; }

input[type=range].custom-seek {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: rgba(54, 54, 54, 0.342);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 10px;
}

input[type=range].custom-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #fbbf24;
    border: 3px solid #3f3f3f;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    margin-top: -6px;
}

.btn-play-large {
    width: 70px;
    height: 70px;
    background-color: #fbbf24;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 0 #b45309;
    transition: transform 0.1s, box-shadow 0.1s;
    border: none;
    color: #752500;
}

.btn-play-large:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 #b45309;
}

/* PDF Modal Styling */
#pdfModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.pdf-box {
    background: #525659;
    width: 95%;
    height: 90vh;
    max-width: 1000px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.pdf-scroll-container {
    flex: 1;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

#the-canvas {
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    max-width: 100%;
}

/* Social Icons (مشکی و دایره‌ای) */
.social-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

.social-icon-btn {
    width: 45px;
    height: 45px;
    background-color: #000000;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid white;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    text-decoration: none;
}

.social-icon-btn:hover {
    transform: translateY(-5px);
    background-color: #fbbf24;
    color: #000000;
    border-color: #000000;
}

.social-icon-btn svg, .social-icon-btn i {
    width: 20px;
    height: 20px;
}

/* افکت دنباله موس جادویی */
.magic-particle {
    position: fixed;
    pointer-events: none;
    width: 12px;
    height: 12px;
    background: #fbbf24;
    border-radius: 50%;
    z-index: 10000;
    animation: sparkleAnim 0.8s forwards;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes sparkleAnim {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, 20px) scale(0); opacity: 0; }
}

@media (max-width: 768px) {
    #passport-bar {
        flex-wrap: wrap !important;
        padding: 0.5rem !important;
        gap: 0.25rem !important;
    }
    #passport-bar > div:first-child { order: 1; border: none !important; padding: 0 !important; }
    #passport-bar > div:last-child { order: 2; margin-left: auto !important; border: none !important; padding: 0 !important; }
    #passport-stamps {
        order: 3;
        width: 100% !important;
        flex: none !important;
        justify-content: center !important;
        margin-top: 0.25rem !important;
        padding-top: 0.5rem !important;
        border-top: 1px solid #e5e7eb !important;
        gap: 0.5rem !important;
    }
    .passport-item { width: 2.5rem !important; height: 2.5rem !important; }
    .passport-item svg { width: 1.25rem !important; height: 1.25rem !important; }

    #passport-bar.mobile-scrolled {
        background: rgba(255, 255, 255, 0.95) !important;
        border: none !important;
        border-bottom: 2px solid #FCD34D !important;
        padding: 0.25rem 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
    }
    #passport-bar.mobile-scrolled > div:first-child,
    #passport-bar.mobile-scrolled > div:last-child { display: none !important; }
    #passport-bar.mobile-scrolled #passport-stamps {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0.1rem !important;
    }
}