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

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

@font-face {
    font-family: "QuizCalibri";
    src: url("../../fonts/calibri-ali.woff2?v=3") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: "NotoNaskhArabicLocal";
    src: url("../../fonts/noto-naskh-arabic-bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

:root {
    --stage-w: 430px;
    --stage-h: 932px;
    --ink: #21362a;
    --muted: #6c756b;
    --green: #3f7f4f;
    --green-dark: #2f6c43;
    --gold: #c59b36;
    --gold-soft: #ead79f;
    --sky: #cdeef1;
    --paper: #fbf6e9;
    --paper-2: #f2e5c8;
    --line: rgba(99,76,40,.18);
    --shadow: 0 18px 44px rgba(61,45,23,.20)
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow: hidden
}

    body.prophets-page {
        overflow: hidden;
        background: radial-gradient(circle at 18% 12%,rgba(82,137,91,.14),transparent 28%),radial-gradient(circle at 88% 26%,rgba(60,134,147,.13),transparent 30%),linear-gradient(135deg,#efe8d8 0%,#dfeee8 100%);
        color: var(--ink);
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        letter-spacing: 0
    }

        body.prophets-page form {
            width: 100%;
            height: 100%;
            margin: 0
        }

button, a, input {
    font-family: inherit
}

#viewportShell {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: radial-gradient(circle at 18% 12%,rgba(82,137,91,.14),transparent 28%),radial-gradient(circle at 88% 26%,rgba(60,134,147,.13),transparent 30%),linear-gradient(135deg,#efe8d8 0%,#dfeee8 100%)
}

.prophets-stage {
    position: absolute;
    width: var(--stage-w);
    height: var(--stage-h);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(1);
    transform-origin: center center;
    overflow: hidden;
    background: radial-gradient(circle at 72px 92px,rgba(255,255,255,.95),transparent 92px),linear-gradient(180deg,#f8f2e5 0%,#eef7f4 52%,#bddba0 100%);
    border-radius: 0;
    box-shadow: none;
    isolation: isolate
}

    .prophets-stage::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg,rgba(255,255,255,.45),transparent 18%,transparent 82%,rgba(70,52,24,.08)),radial-gradient(circle at 95% 0%,rgba(194,151,62,.18),transparent 28%);
        z-index: 0
    }

.screen-home.screen-home-bg {
    background-color: #f5ecd9;
    background-image: linear-gradient(180deg,rgba(255,251,239,.58) 0%,rgba(255,251,239,.18) 42%,rgba(255,251,239,.46) 100%),radial-gradient(circle at 50% 32%,rgba(202,169,94,.20),transparent 34%),linear-gradient(180deg,#fbf4e3 0%,#efe1bf 56%,#f6ecd6 100%);
    background-position: center;
    background-repeat: no-repeat;
    background-size: auto,auto,cover
}

    .screen-home.screen-home-bg.home-bg-loaded {
        background-image: linear-gradient(180deg,rgba(255,251,239,.14) 0%,rgba(255,251,239,.02) 42%,rgba(255,251,239,.22) 100%),url("../images/home-bg2.webp"),radial-gradient(circle at 50% 32%,rgba(202,169,94,.20),transparent 34%),linear-gradient(180deg,#fbf4e3 0%,#efe1bf 56%,#f6ecd6 100%);
        background-position: center;
        background-repeat: no-repeat;
        background-size: auto,100% 100%,auto,cover
    }

.screen-home.screen-home-bg::before {
        background: linear-gradient(180deg,rgba(255,252,244,.38) 0%,rgba(255,252,244,0) 34%,rgba(255,252,244,.18) 100%)
    }

.home-sound-toggle {
    position: absolute;
    top: max(18px,calc(env(safe-area-inset-top,0) + 12px));
    left: 18px;
    right: auto;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(197,155,54,.36);
    border-radius: 17px;
    color: #24543b;
    background: #fbf2de;
    box-shadow: 0 12px 24px rgba(72,52,22,.13),inset 0 1px 0 rgba(255,255,255,.82);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease,filter .18s ease,box-shadow .18s ease
}

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

    .home-sound-toggle::before {
        content: "";
        width: 21px;
        height: 20px;
        clip-path: polygon(0 34%,34% 34%,72% 5%,72% 95%,34% 66%,0 66%);
        background: currentColor;
        filter: drop-shadow(0 1px 0 rgba(255,255,255,.62))
    }

    .home-sound-toggle .sound-wave {
        position: absolute;
        right: 9px;
        width: 16px;
        height: 24px;
        border: 3px solid currentColor;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        opacity: .86
    }

    .home-sound-toggle .sound-wave::after {
        content: "";
        position: absolute;
        top: 4px;
        right: 5px;
        width: 8px;
        height: 12px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-radius: 50%;
        opacity: .76
    }

    .home-sound-toggle .sound-slash {
        position: absolute;
        width: 30px;
        height: 3px;
        border-radius: 999px;
        background: #a54a33;
        box-shadow: 0 1px 0 rgba(255,255,255,.72);
        transform: rotate(-42deg) scaleX(0);
        opacity: 0;
        transition: transform .16s ease,opacity .16s ease
    }

    .home-sound-toggle.is-muted {
        color: #7a6745;
        background: linear-gradient(180deg,rgba(255,250,236,.94),rgba(234,222,190,.88))
    }

        .home-sound-toggle.is-muted .sound-wave {
            opacity: .18
        }

        .home-sound-toggle.is-muted .sound-slash {
            opacity: 1;
            transform: rotate(-42deg) scaleX(1)
        }

.home-help-toggle {
    position: absolute;
    top: max(18px,calc(env(safe-area-inset-top,0) + 12px));
    right: 18px;
    z-index: 4;
    min-width: 112px;
    height: 48px;
    display: inline-grid;
    place-items: center;
    padding: 0 16px 2px;
    border: 1px solid rgba(197,155,54,.38);
    border-radius: 17px;
    color: #24543b;
    font-family: "CairoLocal",Tahoma,Arial,sans-serif;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,235,205,.90));
    box-shadow: 0 12px 24px rgba(72,52,22,.13),inset 0 1px 0 rgba(255,255,255,.84),inset 0 -4px 0 rgba(197,155,54,.08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease,filter .18s ease,box-shadow .18s ease
}

    .home-help-toggle::before {
        content: "";
        position: absolute;
        inset: 6px;
        border-radius: 13px;
        border: 1px solid rgba(255,255,255,.64);
        pointer-events: none
    }

    .home-help-toggle:active {
        transform: scale(.97);
        filter: brightness(.97)
    }

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

    .home-falling-particles span {
        position: absolute;
        top: -56px;
        width: 15px;
        height: 22px;
        border-radius: 70% 0 70% 0;
        background: linear-gradient(135deg,rgba(203,165,82,.82),rgba(108,139,84,.58));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.45),0 7px 14px rgba(80,60,26,.08);
        opacity: .42;
        transform: rotate(26deg);
        animation: home-leaf-fall 13s linear infinite
    }

        .home-falling-particles span::before {
            content: "";
            position: absolute;
            top: 2px;
            right: 7px;
            width: 1px;
            height: 18px;
            border-radius: 999px;
            background: rgba(83,86,47,.28);
            transform: rotate(18deg)
        }

        .home-falling-particles span:nth-child(2n) {
            width: 9px;
            height: 18px;
            border-radius: 999px 999px 999px 3px;
            background: linear-gradient(180deg,rgba(132,184,185,.36),rgba(233,211,153,.52));
            opacity: .36;
            animation-name: home-drop-fall
        }

        .home-falling-particles span:nth-child(1) { right: 7%; animation-delay: -1s; animation-duration: 14s }
        .home-falling-particles span:nth-child(2) { right: 18%; animation-delay: -6s; animation-duration: 12s }
        .home-falling-particles span:nth-child(3) { right: 29%; animation-delay: -3s; animation-duration: 15s }
        .home-falling-particles span:nth-child(4) { right: 41%; animation-delay: -9s; animation-duration: 13s }
        .home-falling-particles span:nth-child(5) { right: 54%; animation-delay: -4s; animation-duration: 16s }
        .home-falling-particles span:nth-child(6) { right: 66%; animation-delay: -11s; animation-duration: 12.5s }
        .home-falling-particles span:nth-child(7) { right: 79%; animation-delay: -7s; animation-duration: 14.5s }
        .home-falling-particles span:nth-child(8) { right: 90%; animation-delay: -2s; animation-duration: 13.5s }
        .home-falling-particles span:nth-child(9) { right: 12%; animation-delay: -10s; animation-duration: 17s }
        .home-falling-particles span:nth-child(10) { right: 36%; animation-delay: -5s; animation-duration: 15.5s }
        .home-falling-particles span:nth-child(11) { right: 61%; animation-delay: -12s; animation-duration: 14s }
        .home-falling-particles span:nth-child(12) { right: 84%; animation-delay: -8s; animation-duration: 16.5s }
        .home-falling-particles span:nth-child(13) { right: 4%; animation-delay: -13s; animation-duration: 18s }
        .home-falling-particles span:nth-child(14) { right: 23%; animation-delay: -15s; animation-duration: 14.8s }
        .home-falling-particles span:nth-child(15) { right: 33%; animation-delay: -12.5s; animation-duration: 17.5s }
        .home-falling-particles span:nth-child(16) { right: 47%; animation-delay: -16s; animation-duration: 15s }
        .home-falling-particles span:nth-child(17) { right: 57%; animation-delay: -14s; animation-duration: 18.5s }
        .home-falling-particles span:nth-child(18) { right: 72%; animation-delay: -17s; animation-duration: 13.8s }
        .home-falling-particles span:nth-child(19) { right: 93%; animation-delay: -13.5s; animation-duration: 16s }
        .home-falling-particles span:nth-child(20) { right: 15%; animation-delay: -18s; animation-duration: 19s }
        .home-falling-particles span:nth-child(21) { right: 39%; animation-delay: -16.5s; animation-duration: 17s }
        .home-falling-particles span:nth-child(22) { right: 51%; animation-delay: -15.5s; animation-duration: 14.2s }
        .home-falling-particles span:nth-child(23) { right: 69%; animation-delay: -18.5s; animation-duration: 18.2s }
        .home-falling-particles span:nth-child(24) { right: 81%; animation-delay: -14.5s; animation-duration: 15.8s }

.home-info-modal {
    position: absolute;
    inset: 0;
    z-index: 74;
    display: none;
    place-items: center;
    padding: max(24px,env(safe-area-inset-top,0)) 24px max(24px,env(safe-area-inset-bottom,0))
}

    .home-info-modal.is-visible {
        display: grid
    }

.home-info-backdrop {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,rgba(38,49,34,.36),rgba(31,42,30,.46));
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px)
}

.home-info-card {
    position: relative;
    z-index: 1;
    width: min(344px,100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px 24px 24px;
    overflow: hidden;
    border: 1px solid rgba(197,155,54,.38);
    border-radius: 28px;
    background: radial-gradient(circle at 50% -30px,rgba(217,181,103,.24),transparent 132px),linear-gradient(135deg,rgba(255,255,255,.75),transparent 36%),repeating-linear-gradient(0deg,rgba(145,104,42,.026) 0 1px,transparent 1px 12px),rgba(255,250,235,.98);
    box-shadow: 0 28px 62px rgba(35,31,20,.28),inset 0 1px 0 rgba(255,255,255,.80);
    animation: language-card-in .28s ease-out both
}

    .home-info-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(155,110,52,.16);
        border-radius: 22px;
        pointer-events: none
    }

.home-info-close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(197,155,54,.30);
    border-radius: 14px;
    color: #7b5c25;
    background: rgba(255,253,246,.86);
    font-size: 26px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer
}

.home-info-mark {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 24px;
    background: linear-gradient(180deg,rgba(255,253,246,.92),rgba(231,218,183,.76));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.82),0 12px 22px rgba(72,52,22,.12)
}

    .home-info-mark img {
        width: 64px;
        height: 64px;
        object-fit: contain
    }

.home-info-card h1, .home-info-text, .home-info-divider, .home-info-credit {
    position: relative;
    z-index: 1
}

.home-info-card h1 {
    margin: 0;
    color: #25533b;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.35
}

.home-info-text {
    width: min(265px,100%);
    margin: 0;
    color: #344538;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.75;
    text-align: center
}

.home-info-divider {
    width: 218px;
    height: 8px;
    margin: 2px 0;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%,#2f6c43 0 3px,transparent 4px),linear-gradient(90deg,transparent,rgba(197,155,54,.74) 24%,rgba(47,108,67,.68) 50%,rgba(197,155,54,.74) 76%,transparent);
    box-shadow: 0 1px 0 rgba(255,255,255,.86)
}

.home-info-credit {
    margin: 0;
    color: #7b6230;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.6;
    text-align: center
}

    .screen-home.screen-home-bg .home-hero::before, .screen-home.screen-home-bg .home-hero::after {
        content: none
    }

    .screen-home.screen-home-bg .home-crescent, .screen-home.screen-home-bg .home-stars {
        display: none
    }

    .screen-home.screen-home-bg .home-hero {
        position: static;
        padding-top: 0
    }

        .screen-home.screen-home-bg .home-hero p {
            position: absolute;
            z-index: 2;
            top: clamp(134px,18.8%,178px);
            left: 50%;
            width: min(315px,calc(100% - 64px));
            margin: 0;
            padding: 0;
            color: #31513d;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.85;
            transform: translateX(-50%);
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            text-shadow: 0 2px 9px rgba(255,252,241,.96),0 1px 0 rgba(255,252,241,.74)
        }

.home-language-gate {
    position: absolute;
    inset: 0;
    z-index: 72;
    display: none;
    place-items: center;
    padding: max(22px,env(safe-area-inset-top,0)) 26px max(22px,env(safe-area-inset-bottom,0))
}

    .home-language-gate.is-visible {
        display: grid
    }

    .home-language-gate.is-closing {
        pointer-events: none
    }

.home-language-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 30%,rgba(255,246,214,.28),transparent 182px),linear-gradient(180deg,rgba(45,66,47,.40),rgba(31,42,31,.54));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px)
}

.home-language-card {
    position: relative;
    z-index: 2;
    width: min(342px,100%);
    display: grid;
    justify-items: center;
    gap: 12px;
    padding: 28px 22px 22px;
    overflow: hidden;
    color: #284637;
    text-align: center;
    border-radius: 28px;
    border: 1px solid rgba(197,155,54,.38);
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 36%),repeating-linear-gradient(0deg,rgba(145,104,42,.028) 0 1px,transparent 1px 12px),rgba(255,250,235,.98);
    box-shadow: 0 28px 62px rgba(35,31,20,.30),inset 0 1px 0 rgba(255,255,255,.78);
    animation: language-card-in .34s ease-out both
}

    .home-language-card::before {
        content: "";
        position: absolute;
        inset: 10px;
        border: 1px solid rgba(155,110,52,.16);
        border-radius: 22px;
        pointer-events: none
    }

    .home-language-card::after {
        content: "";
        position: absolute;
        top: -92px;
        width: 210px;
        height: 210px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(197,155,54,.20),transparent 66%);
        pointer-events: none
    }

.home-language-mark {
    position: relative;
    width: min(292px,100%);
    height: 86px;
    display: grid;
    place-items: center;
    margin: -2px auto 0
}

    .home-language-mark img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 86px;
        object-fit: contain;
        filter: drop-shadow(0 12px 18px rgba(99,67,20,.18));
        user-select: none;
        -webkit-user-drag: none
    }

.home-language-kicker, .home-language-card h1, .home-language-card p, .home-language-actions {
    position: relative;
    z-index: 1
}

.home-language-kicker {
    color: #a57927;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4
}

.home-language-card h1 {
    margin: -2px 0 0;
    color: #25533b;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.35
}

.home-language-card p {
    width: min(250px,100%);
    margin: 0;
    color: #667064;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.8
}

.home-language-actions {
    width: 100%;
    display: grid;
    gap: 12px;
    margin-top: 6px
}

.home-language-btn {
    width: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    border: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease,filter .16s ease,box-shadow .16s ease
}

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

    .home-language-btn.primary {
        color: #fff;
        background: linear-gradient(90deg,#2f6c43,#3f8b55);
        box-shadow: 0 14px 24px rgba(47,108,67,.26)
    }

    .home-language-btn.secondary {
        color: #36523f;
        background: linear-gradient(180deg,rgba(255,255,255,.95),rgba(244,234,207,.92));
        border: 1px solid rgba(197,155,54,.30);
        box-shadow: 0 12px 20px rgba(96,70,32,.10)
    }

    .home-language-btn small {
        min-width: 48px;
        padding: 4px 9px;
        border-radius: 999px;
        color: #8a6a24;
        background: rgba(197,155,54,.14);
        font-size: 11px;
        font-weight: 700
    }

.home-language-gate.is-closing .home-language-card {
    animation: language-card-out .18s ease-in both
}

.home-language-gate.is-closing .home-language-backdrop {
    opacity: 0;
    transition: opacity .18s ease
}

.home-hero {
    position: relative;
    z-index: 1;
    height: 650px;
    padding: 98px 42px 0;
    text-align: center
}

    .home-hero::before, .home-hero::after {
        content: "";
        position: absolute;
        bottom: 8px;
        width: 170px;
        height: 128px;
        background: linear-gradient(135deg,rgba(190,155,93,.75),rgba(229,204,145,.76));
        clip-path: polygon(0 100%,28% 30%,46% 58%,68% 10%,100% 100%);
        z-index: -1
    }

    .home-hero::before {
        right: -18px
    }

    .home-hero::after {
        left: -18px;
        transform: scaleX(-1)
    }

.home-crescent {
    position: absolute;
    top: 120px;
    right: 88px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gold)
}

    .home-crescent::after {
        content: "";
        position: absolute;
        top: -5px;
        right: -16px;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: #fbf7ed
    }

.home-stars span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .75
}

    .home-stars span:nth-child(1) {
        top: 182px;
        left: 82px
    }

    .home-stars span:nth-child(2) {
        top: 144px;
        left: 188px
    }

    .home-stars span:nth-child(3) {
        top: 246px;
        right: 80px
    }

    .home-stars span:nth-child(4) {
        top: 306px;
        left: 112px
    }

.home-title {
    margin-top: 172px;
    color: var(--green-dark);
    font-weight: 700;
    line-height: 1.05
}

    .home-title span, .home-title strong {
        display: block;
        font-size: 62px
    }

.home-hero p {
    width: 270px;
    margin: 24px auto 0;
    color: #49624f;
    font-size: 18px;
    line-height: 1.8
}

.home-actions, .stage-actions {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 14px;
    width: 300px;
    margin: 0 auto
}

.screen-home.screen-home-bg .home-actions {
    position: absolute;
    right: auto;
    bottom: clamp(98px,12.8%,128px);
    left: 50%;
    margin: 0;
    transform: translateX(-50%)
}

.home-credit {
    position: absolute;
    right: 24px;
    bottom: clamp(38px,5.2%,52px);
    left: 24px;
    z-index: 2;
    margin: 0;
    color: rgba(63,74,55,.82);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,252,241,.88),0 3px 10px rgba(255,252,241,.60)
}

.primary-btn, .secondary-btn, .text-link {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 56px;
    border: 0;
    border-radius: 28px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer
}

.primary-btn {
    color: #fff;
    background: linear-gradient(90deg,var(--green-dark),var(--green));
    box-shadow: 0 12px 24px rgba(41,98,59,.24)
}

.secondary-btn {
    color: #2f3d33;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(82,99,72,.18)
}

.home-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #31513d;
    background: linear-gradient(180deg,rgba(255,253,246,.94),rgba(244,233,205,.88)),linear-gradient(90deg,rgba(197,155,54,.18),rgba(47,108,67,.14));
    border: 1px solid rgba(197,155,54,.36);
    box-shadow: 0 12px 24px rgba(70,47,20,.12),inset 0 1px 0 rgba(255,255,255,.78)
}

    .home-back-btn::before {
        content: "";
        width: 10px;
        height: 10px;
        margin-left: 9px;
        border-top: 3px solid currentColor;
        border-right: 3px solid currentColor;
        transform: rotate(45deg)
    }

.text-link {
    min-height: 34px;
    color: rgba(41,55,43,.72);
    font-size: 15px;
    font-weight: 700
}

.top-bar {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: center;
    gap: 12px;
    padding: 28px 22px 12px
}

    .top-bar h1 {
        margin: 0;
        color: var(--ink);
        font-size: 22px;
        font-weight: 700;
        text-align: center
    }

.round-btn {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.85);
    color: var(--green-dark);
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    border: 1px solid rgba(77,93,67,.12)
}

    .round-btn.muted {
        color: #9a875f
    }

.map-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 760px;
    margin-top: 4px;
    background: radial-gradient(circle at 25% 24%,rgba(105,164,106,.18),transparent 40px),radial-gradient(circle at 70% 34%,rgba(36,153,164,.18),transparent 46px),linear-gradient(180deg,#d5eef2 0%,#fae2a8 35%,#efd19b 100%)
}

    .map-panel::before, .map-panel::after {
        content: "";
        position: absolute;
        width: 170px;
        height: 120px;
        background: rgba(184,130,58,.26);
        clip-path: polygon(0 100%,28% 32%,46% 58%,70% 12%,100% 100%)
    }

    .map-panel::before {
        right: -10px;
        top: 64px
    }

    .map-panel::after {
        left: -22px;
        bottom: 86px;
        transform: scaleX(-1)
    }

.map-road {
    position: absolute;
    inset: 10px 0 auto;
    width: 100%;
    height: 690px;
    fill: none;
    stroke: rgba(135,93,42,.42);
    stroke-width: 18;
    stroke-linecap: round;
    stroke-dasharray: 1 0
}

.map-node {
    position: absolute;
    z-index: 3;
    width: 118px;
    min-height: 78px;
    transform: translate(-50%,-50%);
    display: grid;
    place-items: center;
    gap: 3px;
    padding: 8px;
    border: 0;
    border-radius: 20px;
    background: rgba(255,253,245,.88);
    color: var(--ink);
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(79,61,29,.18)
}

    .map-node.locked {
        filter: grayscale(.9);
        opacity: .7
    }

    .map-node.completed {
        border: 2px solid rgba(63,127,79,.46)
    }

.map-emblem {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7fc27b,#2f7e4e);
    position: relative
}

    .map-emblem.theme-nuh {
        background: linear-gradient(135deg,#8ec8d7,#3d7995)
    }

    .map-emblem::after {
        content: "";
        position: absolute;
        inset: 10px 16px 6px;
        border-radius: 12px;
        background: rgba(80,50,20,.55)
    }

    .map-emblem.theme-nuh::after {
        inset: 16px 7px 8px;
        border-radius: 2px 2px 12px 12px;
        background: rgba(80,64,42,.72)
    }

.map-name {
    color: var(--ink);
    font-size: 18px;
    font-weight: 700
}

.map-state {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700
}

.bottom-nav {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    height: 86px;
    padding: 10px 22px 16px;
    background: rgba(255,252,244,.93);
    border-top: 1px solid var(--line)
}

    .bottom-nav a {
        display: grid;
        place-items: center;
        gap: 4px;
        color: #7a725f;
        text-decoration: none;
        font-size: 13px;
        font-weight: 700
    }

        .bottom-nav a span {
            font-size: 21px
        }

        .bottom-nav a.active {
            color: var(--green-dark)
        }

.screen-station {
    background: linear-gradient(180deg,rgba(255,252,242,.96) 0%,rgba(247,236,206,.82) 34%,rgba(223,240,221,.92) 100%),repeating-linear-gradient(135deg,rgba(142,100,42,.045) 0 1px,transparent 1px 14px),linear-gradient(180deg,#fbf3df 0%,#e9d7ad 45%,#cfe6c5 100%)
}

    .screen-station::before {
        background: linear-gradient(90deg,rgba(119,82,36,.10),transparent 18%,transparent 82%,rgba(119,82,36,.10)),linear-gradient(180deg,rgba(255,255,255,.56),transparent 30%,transparent 78%,rgba(69,125,83,.12)),repeating-linear-gradient(90deg,transparent 0 27px,rgba(184,145,73,.055) 27px 28px)
    }

    .screen-station::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        top: 72px;
        right: 34px;
        left: 34px;
        height: 560px;
        border: 1px solid rgba(173,129,52,.18);
        border-bottom: 0;
        border-radius: 210px 210px 34px 34px / 190px 190px 34px 34px;
        background: linear-gradient(180deg,rgba(255,250,235,.32),transparent 42%),repeating-linear-gradient(45deg,transparent 0 22px,rgba(63,127,79,.045) 22px 23px),repeating-linear-gradient(-45deg,transparent 0 24px,rgba(197,155,54,.035) 24px 25px);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.68);
        opacity: .92
    }

    .screen-station .top-bar, .screen-station .station-illustration, .screen-station .station-name-badge, .screen-station .station-card, .screen-station .stage-actions {
        position: relative
    }

    .screen-station .top-bar {
        position: absolute;
        top: max(12px,calc(env(safe-area-inset-top,0) + 8px));
        right: 16px;
        left: 22px;
        z-index: 6;
        grid-template-columns: 54px minmax(0,1fr);
        padding: 0;
        pointer-events: none
    }

        .screen-station .top-bar .round-btn {
            pointer-events: auto;
            background: rgba(255,253,246,.86);
            border-color: rgba(177,131,48,.22);
            box-shadow: 0 10px 20px rgba(48,42,24,.13),inset 0 1px 0 rgba(255,255,255,.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px)
        }

        .screen-station .top-bar .station-map-return {
            position: relative;
            width: 54px;
            height: 54px;
            overflow: hidden;
            color: #1e6f49;
            border: 1px solid rgba(164,122,43,.32);
            background: radial-gradient(circle at 30% 20%,rgba(255,255,255,.98) 0 8px,transparent 9px),linear-gradient(180deg,rgba(255,253,245,.98),rgba(239,225,188,.94));
            box-shadow: 0 13px 22px rgba(39,68,47,.20),0 0 0 5px rgba(255,250,232,.38),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -9px 15px rgba(197,155,54,.10)
        }

            .screen-station .top-bar .station-map-return::before {
                content: "";
                position: absolute;
                inset: 6px;
                border-radius: 50%;
                border: 1px solid rgba(197,155,54,.34);
                background: linear-gradient(180deg,rgba(255,253,246,.54),rgba(212,232,210,.20))
            }

        .screen-station .top-bar .station-map-return-icon {
            position: relative;
            z-index: 1;
            display: block;
            width: 30px;
            height: 30px;
            color: #fff8d7;
            filter: drop-shadow(0 2px 4px rgba(19,82,52,.20))
        }

            .screen-station .top-bar .station-map-return-icon path {
                fill: none;
                stroke: #1e6f49;
                stroke-width: 2.15;
                stroke-linecap: round;
                stroke-linejoin: round
            }

.station-name-badge {
    z-index: 4;
    width: 366px;
    margin: -25px auto 0
}

.screen-station .station-name-badge h1 {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 48px;
    margin: 0;
    padding: 5px 44px 7px;
    overflow: hidden;
    color: #254232;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    border-radius: 999px;
    background: linear-gradient(180deg,rgba(255,254,249,.98),rgba(244,235,211,.94)),linear-gradient(90deg,rgba(197,155,54,.16),rgba(63,127,79,.12));
    border: 1px solid rgba(177,131,48,.28);
    box-shadow: 0 12px 24px rgba(68,51,22,.12),inset 0 1px 0 rgba(255,255,255,.82);
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.76)
}

    .screen-station .station-name-badge h1::before, .screen-station .station-name-badge h1::after {
        content: "";
        position: absolute;
        top: 50%;
        display: block;
        width: 28px;
        height: 10px;
        border-radius: 999px;
        border: 0;
        background: radial-gradient(circle at 6px 50%,rgba(197,155,54,.86) 0 2px,transparent 2.7px),radial-gradient(circle at 18px 50%,rgba(63,127,79,.55) 0 2px,transparent 2.7px),linear-gradient(90deg,transparent,rgba(197,155,54,.56) 42%,transparent);
        transform: translateY(-50%)
    }

    .screen-station .station-name-badge h1::before {
        right: 12px
    }

    .screen-station .station-name-badge h1::after {
        left: 12px;
        transform: translateY(-50%) scaleX(-1)
    }

.screen-station .station-illustration {
    width: 100%;
    height: 296px;
    margin: 0;
    border-radius: 0 0 24px 24px;
    border: 1px solid rgba(185,142,64,.26);
    border-top: 0;
    border-right: 0;
    border-left: 0;
    box-shadow: 0 16px 30px rgba(62,52,27,.13),inset 0 0 0 1px rgba(255,255,255,.52)
}

.screen-station .station-card {
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    height: 420px;
    min-height: 420px;
    max-height: 420px;
    overflow: hidden;
    background: linear-gradient(180deg,rgba(255,253,247,.97),rgba(249,242,224,.94)),rgba(255,253,247,.94);
    border: 1px solid rgba(173,129,52,.20);
    box-shadow: 0 18px 34px rgba(62,52,27,.15),inset 0 1px 0 rgba(255,255,255,.78)
}

.screen-station .stage-actions {
    position: relative;
    right: auto;
    bottom: auto;
    width: 322px;
    margin: 14px auto 0
}

    .screen-station .stage-actions .primary-btn {
        min-height: 58px;
        border: 1px solid rgba(255,255,255,.32);
        background: linear-gradient(90deg,#176b45 0%,#2e915d 52%,#176b45 100%);
        box-shadow: 0 16px 26px rgba(22,93,58,.26),0 0 0 4px rgba(255,250,232,.36),inset 0 1px 0 rgba(255,255,255,.25)
    }

.screen-station .station-card::before {
    content: "";
    position: absolute;
    right: 18px;
    left: 18px;
    top: 12px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,transparent,rgba(197,155,54,.38),rgba(63,127,79,.28),transparent)
}

.screen-station .station-card h2 {
    width: 100%;
    color: #203a2c;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.34;
    text-align: center
}

.station-title-separator {
    display: block;
    width: 168px;
    height: 8px;
    margin: 8px auto 11px;
    border-radius: 999px;
    background: radial-gradient(circle at 50% 50%,#c59b36 0 3px,transparent 3.7px),linear-gradient(90deg,transparent 0%,rgba(197,155,54,.78) 24%,rgba(47,108,67,.68) 50%,rgba(197,155,54,.78) 76%,transparent 100%);
    box-shadow: 0 1px 0 rgba(255,255,255,.70)
}

.station-summary-scroll {
    direction: rtl;
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow: hidden auto;
    padding: 18px 18px;
    border-radius: 17px;
    background: linear-gradient(180deg,rgba(255,252,242,.82),rgba(246,237,215,.58)),repeating-linear-gradient(0deg,rgba(137,102,49,.045) 0 1px,transparent 1px 13px);
    border: 1px solid rgba(177,131,48,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72),inset 0 -12px 24px rgba(197,155,54,.04);
    scrollbar-width: thin;
    scrollbar-color: rgba(63,127,79,.42) transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain
}

    .station-summary-scroll::-webkit-scrollbar {
        width: 6px
    }

    .station-summary-scroll::-webkit-scrollbar-track {
        background: transparent
    }

    .station-summary-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(63,127,79,.42)
    }

.screen-station .station-card p {
    margin: 0;
    color: #3f5144;
    direction: rtl;
    font-size: 18px;
    font-weight: 700;
    line-height: 2.05;
    text-align: justify;
    text-align-last: center;
    text-justify: inter-word;
    overflow-wrap: break-word;
    word-spacing: 1px;
    unicode-bidi: plaintext;
    text-shadow: 0 1px 0 rgba(255,255,255,.56)
}

.station-illustration {
    position: relative;
    z-index: 1;
    width: 366px;
    height: 290px;
    margin: 12px auto 0;
    overflow: hidden;
    border-radius: 22px;
    background: radial-gradient(circle at 30% 34%,rgba(255,255,255,.8),transparent 48px),linear-gradient(180deg,#bfe8ec 0%,#e2f4d9 60%,#94bf72 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55),0 14px 28px rgba(65,74,44,.16)
}

.station-prophet-image {
    position: absolute;
    z-index: 2;
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    object-position: center;
    box-shadow: none
}

.theme-orb {
    position: absolute;
    z-index: 2;
    top: 66px;
    right: 140px;
    width: 112px;
    height: 112px;
    border-radius: 50% 50% 46% 46%;
    background: linear-gradient(180deg,#8ecf7e,#4c8e58);
    box-shadow: 0 0 0 12px rgba(255,255,255,.22)
}

    .theme-orb.theme-nuh {
        width: 138px;
        height: 76px;
        top: 116px;
        right: 116px;
        border-radius: 12px 12px 48px 48px;
        background: linear-gradient(180deg,#b9824b,#5b3c22)
    }

    .theme-orb::after {
        content: "";
        position: absolute;
        bottom: -44px;
        right: 48px;
        width: 18px;
        height: 58px;
        border-radius: 12px;
        background: #6d4a2b
    }

    .theme-orb.theme-nuh::after {
        right: 18px;
        bottom: -18px;
        width: 102px;
        height: 20px;
        border-radius: 50%;
        background: rgba(73,128,151,.62)
    }

.scene-ground {
    position: absolute;
    z-index: 1;
    right: -40px;
    left: -40px;
    bottom: -70px;
    height: 158px;
    border-radius: 50%;
    background: rgba(80,140,67,.46)
}

.station-card, .question-card, .summary-card {
    position: relative;
    z-index: 2;
    width: 366px;
    margin: 18px auto 0;
    padding: 24px;
    border-radius: 22px;
    background: rgba(255,253,247,.94);
    box-shadow: 0 16px 34px rgba(60,47,26,.16);
    border: 1px solid rgba(120,93,45,.11)
}

    .station-card h2, .question-card h2, .complete-wrap h2 {
        margin: 0;
        color: var(--ink);
        font-size: 25px;
        font-weight: 700;
        line-height: 1.45
    }

    .station-card p, .complete-wrap p {
        margin: 12px 0 0;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8
    }

.mini-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 20px;
    background: var(--line)
}

    .mini-stats div {
        display: grid;
        gap: 4px;
        place-items: center;
        min-height: 74px;
        background: #fffdf7
    }

    .mini-stats strong {
        font-size: 24px;
        color: var(--green-dark)
    }

    .mini-stats span {
        font-size: 14px;
        color: var(--muted)
    }

.screen-question .stage-actions, .screen-end .stage-actions {
    position: absolute;
    right: 65px;
    bottom: 42px
}

.question-head {
    display: grid;
    place-items: center;
    gap: 2px
}

.screen-question .question-card {
    min-height: 206px;
    height: 206px;
    margin-top: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden auto;
    text-align: center;
    color: #244934;
    border: 1px solid rgba(125,95,44,.16);
    border-radius: 22px;
    background: linear-gradient(90deg,rgba(205,148,88,.04),rgba(255,255,255,.18),rgba(205,148,88,.04)),radial-gradient(circle at 50% -18px,rgba(219,178,102,.20),transparent 82px),rgba(255,253,247,.96);
    box-shadow: 0 16px 34px rgba(60,47,26,.16),inset 0 1px 0 rgba(255,255,255,.72),inset 0 0 0 1px rgba(255,255,255,.42);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    animation: question-card-in .42s ease-out both
}

    .screen-question .question-card::before {
        content: "";
        position: absolute;
        left: 34px;
        right: 34px;
        top: -48px;
        height: 88px;
        border-radius: 14px;
        background: rgba(205,148,88,.14);
        filter: blur(20px);
        pointer-events: none
    }

    .screen-question .question-card h2 {
        position: relative;
        z-index: 1;
        width: 100%;
        color: inherit;
        font-family: "QuizCalibri","CairoLocal",Tahoma,Arial,sans-serif;
        font-size: clamp(26px,5vw,28px);
        font-weight: 700;
        line-height: 1.68;
        text-shadow: 0 1px 0 rgba(255,255,255,.64);
        overflow-wrap: anywhere
    }

.option-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    width: 366px;
    margin: 16px auto 0
}

.option-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 72px;
    padding: 12px 60px;
    border-radius: 18px;
    background: linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,244,230,.96));
    border: 1px solid rgba(89,116,80,.17);
    color: #244934;
    text-decoration: none;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 9px 18px rgba(72,58,30,.10),inset 0 1px 0 rgba(255,255,255,.82);
    transition: transform .16s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,opacity .2s ease;
    animation: question-option-in .72s cubic-bezier(.18,.84,.22,1) both
}

.option-grid .option-btn:nth-child(1) {
    animation-delay: .18s
}

.option-grid .option-btn:nth-child(2) {
    animation-delay: .38s
}

.option-grid .option-btn:nth-child(3) {
    animation-delay: .58s
}

.option-grid .option-btn:nth-child(4) {
    animation-delay: .78s
}

.option-btn:active {
    transform: scale(.985)
}

.option-btn:disabled {
    cursor: default
}

.option-btn span:last-child {
    width: 100%
}

.option-btn.is-correct {
    color: #184b28;
    background: linear-gradient(180deg,rgba(235,250,237,.98),rgba(211,241,217,.98));
    border-color: rgba(38,139,66,.44);
    box-shadow: 0 10px 20px rgba(38,139,66,.16),inset 0 1px 0 rgba(255,255,255,.72);
    animation: answer-correct-pop .48s cubic-bezier(.18,.84,.22,1) both;
    animation-delay: 0s
}

.option-btn.is-wrong {
    color: #6f4c17;
    background: linear-gradient(180deg,rgba(255,248,226,.98),rgba(244,224,166,.98));
    border-color: rgba(197,155,54,.48);
    box-shadow: 0 10px 20px rgba(150,105,31,.14),inset 0 1px 0 rgba(255,255,255,.72)
}

    .option-btn.is-wrong.is-selected {
        animation: answer-wrong-shake .42s ease both;
        animation-delay: 0s
    }

.option-btn.is-dimmed {
    opacity: .62
}

.option-btn.is-selected:not(.is-correct):not(.is-wrong) {
    border-color: rgba(197,155,54,.52);
    background: linear-gradient(180deg,rgba(253,242,210,.98),rgba(239,219,160,.98));
    box-shadow: 0 0 0 4px rgba(197,155,54,.10),0 10px 20px rgba(72,58,30,.12)
}

.option-btn.is-correct .option-letter {
    color: #fff;
    background: linear-gradient(180deg,#62b970,#2f8b4d);
    border-color: rgba(255,255,255,.72)
}

.option-btn.is-wrong .option-letter {
    color: #fff7d9;
    background: linear-gradient(180deg,#d9ae4a,#8f6323);
    border-color: rgba(255,255,255,.72)
}

.option-letter {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #3b2503;
    background: linear-gradient(180deg,#fff0a7,#d9ab43 48%,#9b6a21);
    border: 1px solid #ffe783;
    font-size: 20px;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(197,155,54,.28),inset 0 2px 0 rgba(255,255,255,.45)
}

@keyframes question-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.985);
        filter: blur(2px)
    }

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

@keyframes question-option-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96)
    }

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

@keyframes answer-correct-pop {
    0% {
        transform: scale(1)
    }

    42% {
        transform: scale(1.028)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes answer-wrong-shake {
    0%,100% {
        transform: translateX(0)
    }

    22%,66% {
        transform: translateX(-6px)
    }

    44%,88% {
        transform: translateX(6px)
    }
}

.answer-modal {
    position: absolute;
    inset: 0;
    z-index: 40;
    display: none;
    place-items: center;
    padding: max(18px,env(safe-area-inset-top,0)) 26px max(18px,env(safe-area-inset-bottom,0))
}

    .answer-modal.is-visible {
        display: grid
    }

.answer-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(24,32,25,.38)
}

.answer-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 354px;
    max-height: min(820px,calc(100% - 24px));
    display: grid;
    grid-template-rows: auto auto auto minmax(0,1fr) auto;
    justify-items: center;
    gap: 12px;
    padding: 28px 22px 22px;
    border-radius: 24px;
    background: rgba(255,253,247,.98);
    border: 1px solid rgba(120,93,45,.14);
    box-shadow: 0 22px 48px rgba(35,30,19,.28);
    text-align: center;
    overflow: hidden
}

.answer-modal.is-visible .answer-dialog {
    animation: answer-dialog-in .28s ease-out both
}

.answer-symbol {
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    color: #fff;
    font-size: 64px;
    font-weight: 700
}

.answer-correct .answer-symbol {
    background: linear-gradient(145deg,#51b968,#2f7f48)
}

.answer-wrong .answer-symbol {
    color: #fff7d9;
    background: radial-gradient(circle at 34% 25%,rgba(255,255,255,.34),transparent 34px),linear-gradient(145deg,#d8aa42,#8f6323);
    box-shadow: 0 12px 24px rgba(116,82,31,.24),inset 0 2px 0 rgba(255,255,255,.34)
}

.answer-wrong .answer-dialog {
    border-color: rgba(197,155,54,.24);
    background: radial-gradient(circle at 50% -24px,rgba(234,215,159,.38),transparent 120px),rgba(255,253,247,.98)
}

    .answer-wrong .answer-dialog h2 {
        color: #7d551d
    }

.answer-dialog h2 {
    margin: 4px 0 0;
    color: var(--ink);
    font-size: 28px;
    line-height: 1.35
}

.answer-dialog p {
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7
}

.answer-correct-box, .answer-explain {
    width: 100%;
    margin: 8px 0 4px;
    padding: 16px;
    border-radius: 18px;
    border: 1px solid rgba(125,93,45,.13)
}

.answer-correct-box {
    background: rgba(228,244,232,.88);
    border-color: rgba(47,127,72,.18)
}

.answer-explain {
    background: rgba(244,237,219,.82);
    min-height: 150px;
    max-height: clamp(210px,34vh,330px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(126,100,42,.46) rgba(235,222,189,.7);
    direction: rtl;
    unicode-bidi: plaintext;
    text-align: justify;
    text-align-last: center
}

    .answer-explain::-webkit-scrollbar {
        width: 6px
    }

    .answer-explain::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(235,222,189,.7)
    }

    .answer-explain::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(126,100,42,.46)
    }

    .answer-correct-box span, .answer-explain span {
        display: block;
        margin-bottom: 6px;
        font-size: 13px;
        font-weight: 700
    }

.answer-correct-box span {
    color: var(--green-dark)
}

.answer-explain span {
    color: #80642a
}

.answer-correct-box strong, .answer-explain strong {
    display: block;
    color: var(--ink);
    font-weight: 700;
    white-space: pre-line;
    overflow-wrap: anywhere;
    letter-spacing: 0;
    text-shadow: 0 1px 0 rgba(255,255,255,.62)
}

.answer-explain strong {
    font-family: "NotoNaskhArabicLocal","QuizCalibri","CairoLocal",Tahoma,Arial,sans-serif;
    font-size: 22px;
    line-height: 1.95
}

.answer-correct-box strong {
    color: #184b28;
    font-family: "CairoLocal",Tahoma,Arial,sans-serif;
    font-size: 19px;
    line-height: 1.6;
    text-align: center
}

.answer-dialog .primary-btn {
    width: 100%;
    flex: none
}

.level-unlock-panel {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: grid;
    place-items: center;
    padding: max(24px,env(safe-area-inset-top,0)) 24px max(28px,env(safe-area-inset-bottom,0));
    background: linear-gradient(180deg,rgba(255,253,244,.42),rgba(232,243,226,.78)),radial-gradient(ellipse at 50% 100%,rgba(63,127,79,.18),transparent 280px)
}

.level-unlock-card {
    position: relative;
    width: 366px;
    max-width: 100%;
    min-height: 540px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding: 34px 24px 26px;
    overflow: hidden;
    border: 1px solid rgba(155,114,43,.24);
    border-radius: 26px;
    color: #203a2d;
    text-align: center;
    background: linear-gradient(90deg,rgba(188,140,62,.10),transparent 18%,transparent 82%,rgba(188,140,62,.10)),linear-gradient(180deg,rgba(255,254,247,.98),rgba(245,236,211,.96));
    box-shadow: 0 22px 44px rgba(61,48,28,.22),inset 0 1px 0 rgba(255,255,255,.82),inset 0 0 0 6px rgba(255,250,230,.52);
    animation: level-unlock-in .36s ease-out both
}

    .level-unlock-card::before, .level-unlock-card::after {
        content: "";
        position: absolute;
        left: 34px;
        right: 34px;
        height: 1px;
        background: linear-gradient(90deg,transparent,rgba(197,155,54,.58),transparent)
    }

    .level-unlock-card::before {
        top: 24px
    }

    .level-unlock-card::after {
        bottom: 24px
    }

.unlock-glow {
    position: relative;
    width: 96px;
    height: 118px;
    display: grid;
    place-items: center;
    margin-bottom: 2px;
    border: 2px solid rgba(197,155,54,.50);
    border-bottom-width: 7px;
    border-radius: 48px 48px 18px 18px;
    background: linear-gradient(180deg,rgba(255,253,238,.98),rgba(221,237,213,.86)),repeating-linear-gradient(90deg,transparent 0 14px,rgba(197,155,54,.05) 14px 15px);
    box-shadow: 0 14px 22px rgba(53,92,58,.18),inset 0 0 0 6px rgba(255,255,255,.38)
}

    .unlock-glow::before {
        content: "";
        position: absolute;
        top: 14px;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 8px solid #2d865c;
        border-left-color: transparent;
        transform: rotate(-18deg)
    }

    .unlock-glow span {
        position: absolute;
        bottom: 18px;
        width: 48px;
        height: 28px;
        border-radius: 7px 7px 4px 4px;
        background: linear-gradient(90deg,rgba(255,255,255,.44),transparent 48%,rgba(116,83,28,.12) 50%,transparent 52%,rgba(255,255,255,.38)),linear-gradient(180deg,#f3df9a,#c99b35);
        box-shadow: 0 7px 12px rgba(111,77,24,.16)
    }

.unlock-kicker {
    display: inline-grid;
    place-items: center;
    min-height: 32px;
    padding: 5px 16px 6px;
    border: 1px solid rgba(197,155,54,.34);
    border-radius: 999px;
    color: #7c5b1c;
    background: rgba(255,247,220,.72);
    font-size: 13px;
    font-weight: 800
}

.level-unlock-card h2 {
    margin: 0;
    color: #1f6b49;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.35
}

.level-unlock-card > strong {
    display: block;
    color: #193b2d;
    font-family: "QuizCalibri","CairoLocal",Tahoma,Arial,sans-serif;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.2
}

.level-unlock-card p {
    width: 100%;
    margin: 0;
    color: rgba(40,58,43,.78);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.9
}

.unlock-actions {
    width: 100%;
    display: grid;
    gap: 12px;
    margin-top: 6px
}

    .unlock-actions .primary-btn, .unlock-actions .secondary-btn {
        width: 100%
    }

@keyframes level-unlock-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.965)
    }

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

@keyframes home-leaf-fall {
    0% {
        transform: translate3d(0,-60px,0) rotate(18deg);
        opacity: 0
    }

    12% {
        opacity: .42
    }

    50% {
        transform: translate3d(-20px,470px,0) rotate(164deg)
    }

    100% {
        transform: translate3d(24px,990px,0) rotate(318deg);
        opacity: 0
    }
}

@keyframes home-drop-fall {
    0% {
        transform: translate3d(0,-52px,0) rotate(12deg);
        opacity: 0
    }

    16% {
        opacity: .34
    }

    100% {
        transform: translate3d(-12px,990px,0) rotate(28deg);
        opacity: 0
    }
}

@keyframes answer-dialog-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96)
    }

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

.screen-end {
    background: radial-gradient(circle at 50% 12%,rgba(197,155,54,.18),transparent 110px),linear-gradient(180deg,#fff8e9 0%,#f4ead1 58%,#d8eadc 100%)
}

.complete-wrap {
    position: relative;
    z-index: 2;
    width: 360px;
    margin: 80px auto 0;
    text-align: center
}

.complete-mark {
    display: grid;
    place-items: center;
    width: 140px;
    height: 140px;
    margin: 0 auto 28px;
    border-radius: 50%;
    color: #fff7d7;
    background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.65),transparent 18px),linear-gradient(145deg,#dcb85a,#8e641d);
    font-size: 34px;
    font-weight: 700;
    box-shadow: 0 18px 30px rgba(117,83,29,.26)
}

.summary-card {
    display: grid;
    gap: 12px;
    margin-top: 38px
}

    .summary-card div {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-height: 46px;
        padding: 0 8px;
        border-bottom: 1px solid var(--line)
    }

        .summary-card div:last-child {
            border-bottom: 0
        }

    .summary-card span {
        color: var(--muted);
        font-size: 16px
    }

    .summary-card strong {
        color: var(--green-dark);
        font-size: 22px
    }

.structure-screen {
    position: relative;
    z-index: 2;
    height: calc(100% - 92px);
    padding: 18px 24px 118px;
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch
}

.structure-center {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
    gap: 18px
}

.structure-mark {
    display: grid;
    place-items: center;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    color: #fff6d8;
    background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.58),transparent 18px),linear-gradient(145deg,#d7b75d,#3f7f4f);
    font-size: 42px;
    font-weight: 700;
    box-shadow: 0 18px 34px rgba(72,58,30,.22)
}

.structure-card {
    width: 100%;
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,253,247,.94);
    border: 1px solid rgba(120,93,45,.11);
    box-shadow: 0 16px 34px rgba(60,47,26,.14)
}

    .structure-card h2 {
        margin: 0;
        color: var(--ink);
        font-size: 24px;
        line-height: 1.45
    }

    .structure-card p {
        margin: 10px 0 0;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8
    }

.structure-list {
    display: grid;
    gap: 10px;
    width: 100%
}

.structure-item {
    display: grid;
    gap: 4px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(91,112,84,.13);
    text-align: right
}

    .structure-item strong {
        color: var(--ink);
        font-size: 16px
    }

    .structure-item span, .structure-item p {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.65
    }

.profile-field {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid rgba(91,112,84,.18);
    border-radius: 18px;
    color: var(--ink);
    background: rgba(255,255,255,.92);
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    outline: none
}

.profile-error {
    min-height: 22px;
    color: #9b3d2f;
    font-size: 13px;
    font-weight: 700
}

.avatar-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 14px
}

.avatar-choice {
    display: grid;
    place-items: center;
    min-height: 58px;
    border-radius: 18px;
    border: 1px solid rgba(91,112,84,.16);
    background: rgba(255,255,255,.78);
    color: var(--green-dark);
    font-size: 24px
}

.stats-grid-mini {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 10px;
    width: 100%
}

    .stats-grid-mini .structure-item {
        text-align: center;
        place-items: center
    }

    .stats-grid-mini strong {
        color: var(--green-dark);
        font-size: 24px
    }

.certificate-box {
    min-height: 380px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 16px;
    text-align: center;
    border: 2px solid rgba(197,155,54,.36);
    background: linear-gradient(90deg,rgba(165,124,66,.12),transparent 16%,transparent 84%,rgba(165,124,66,.12)),#fff9ea
}

.certificate-code {
    color: #8a6a24;
    font-size: 13px;
    font-weight: 700
}

.busy-overlay {
    position: absolute;
    inset: 0;
    z-index: 80;
    display: none;
    place-items: center;
    padding: 24px;
    background: radial-gradient(circle at 50% 38%,rgba(255,241,198,.28),transparent 168px),linear-gradient(180deg,rgba(35,48,37,.58),rgba(25,33,27,.66));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

    .busy-overlay.is-visible {
        display: grid
    }

.busy-card {
    position: relative;
    width: min(286px,100%);
    min-height: 226px;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 10px;
    padding: 24px 22px 22px;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 0%,rgba(255,255,255,.82),transparent 86px),linear-gradient(135deg,rgba(255,255,255,.58),transparent 42%),linear-gradient(180deg,rgba(255,251,238,.98),rgba(246,235,205,.98));
    border: 1px solid rgba(197,155,54,.42);
    color: var(--green-dark);
    font-weight: 700;
    text-align: center;
    box-shadow: 0 24px 54px rgba(27,31,22,.34),inset 0 1px 0 rgba(255,255,255,.78);
    animation: loader-card-in .18s ease-out both
}

    .busy-card::before {
        content: "";
        position: absolute;
        inset: 9px;
        border: 1px solid rgba(155,110,52,.14);
        border-radius: 19px;
        pointer-events: none
    }

.loader-heritage-scene {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center
}

    .loader-heritage-scene::before {
        content: "";
        position: absolute;
        inset: 11px;
        border-radius: 50%;
        background: radial-gradient(circle,rgba(197,155,54,.20),transparent 66%)
    }

.loader-ring {
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 3px solid rgba(210,183,112,.34);
    border-top-color: #2f7a4a;
    border-left-color: rgba(47,122,74,.58);
    animation: loader-spin 1s linear infinite
}

.loader-emblem {
    position: relative;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    border: 1px solid rgba(167,123,44,.46);
    background: radial-gradient(circle at 38% 24%,rgba(255,255,255,.88),transparent 28px),linear-gradient(145deg,#fff7dc 0%,#e8cf83 52%,#b9872d 100%);
    box-shadow: 0 12px 22px rgba(112,82,31,.22),inset 0 1px 0 rgba(255,255,255,.82);
    animation: loader-breathe 1.35s ease-in-out infinite
}

    .loader-emblem::before {
        content: "";
        position: absolute;
        inset: 16px 22px 20px;
        border: 4px solid #2f6c43;
        border-bottom: 0;
        border-radius: 28px 28px 6px 6px;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.48)
    }

    .loader-emblem::after {
        content: "";
        position: absolute;
        right: 22px;
        bottom: 19px;
        width: 30px;
        height: 5px;
        border-radius: 999px;
        background: rgba(47,108,67,.78)
    }

.loader-spark {
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c59b36;
    box-shadow: 0 0 0 4px rgba(197,155,54,.10);
    animation: loader-spark 1.45s ease-in-out infinite
}

    .loader-spark.spark-one {
        top: 13px;
        right: 17px
    }

    .loader-spark.spark-two {
        bottom: 24px;
        right: 6px;
        animation-delay: .2s
    }

    .loader-spark.spark-three {
        bottom: 17px;
        left: 14px;
        animation-delay: .4s
    }

.loader-steps {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 78px;
    height: 18px;
    margin: 1px 0 0
}

    .loader-steps span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #2f7a4a;
        opacity: .36;
        animation: loader-step 1.05s ease-in-out infinite
    }

        .loader-steps span:nth-child(2) {
            animation-delay: .16s
        }

        .loader-steps span:nth-child(3) {
            animation-delay: .32s
        }

.loader-title {
    position: relative;
    z-index: 1;
    color: var(--green-dark);
    font-size: 23px;
    line-height: 1.35;
    font-weight: 700
}

.loader-text {
    position: relative;
    z-index: 1;
    color: #6a604c;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 700
}

.busy-spinner {
    display: none
}

@keyframes loader-card-in {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }

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

@keyframes loader-spin {
    to {
        transform: rotate(360deg)
    }
}

@keyframes loader-breathe {
    0%,100% {
        transform: scale(.96)
    }

    50% {
        transform: scale(1)
    }
}

@keyframes loader-step {
    0%,100% {
        opacity: .32;
        transform: translateY(0)
    }

    45% {
        opacity: 1;
        transform: translateY(-4px)
    }
}

@keyframes loader-spark {
    0%,100% {
        opacity: .28;
        transform: scale(.82)
    }

    50% {
        opacity: .92;
        transform: scale(1.08)
    }
}

@keyframes language-card-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(.96)
    }

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

@keyframes language-card-out {
    to {
        opacity: 0;
        transform: translateY(10px) scale(.98)
    }
}

.stage-phone-fill {
    border-radius: 0;
    box-shadow: none
}

    .stage-phone-fill .home-hero {
        height: max(460px,calc(var(--stage-runtime-h) - 282px))
    }

    .stage-phone-fill .map-panel {
        height: max(520px,calc(var(--stage-runtime-h) - 172px))
    }

    .stage-phone-fill .map-road {
        height: max(450px,calc(var(--stage-runtime-h) - 242px))
    }

    .stage-phone-fill .bottom-nav {
        bottom: 0
    }

    .stage-phone-fill.screen-question .stage-actions, .stage-phone-fill.screen-end .stage-actions {
        bottom: max(24px,calc(env(safe-area-inset-bottom,0) + 24px))
    }

.stage-condensed-screen .top-bar {
    padding-top: 20px;
    padding-bottom: 8px
}

.stage-condensed-screen.screen-station .top-bar {
    top: max(10px,calc(env(safe-area-inset-top,0) + 7px));
    padding: 0
}

.stage-condensed-screen .station-illustration {
    height: 245px
}

.stage-condensed-screen.screen-station .station-illustration {
    height: 264px;
    margin-top: 0
}

.stage-condensed-screen.screen-station .station-name-badge {
    width: 366px;
    margin-top: -24px
}

.stage-condensed-screen .station-card, .stage-condensed-screen .question-card, .stage-condensed-screen .summary-card {
    margin-top: 14px;
    padding: 20px
}

.stage-condensed-screen.screen-station .station-card {
    height: 376px;
    min-height: 376px;
    max-height: 376px
}

.stage-condensed-screen.screen-station .station-summary-scroll {
    min-height: 0;
    max-height: none
}

.stage-condensed-screen.screen-question .question-card {
    min-height: 190px;
    height: 190px;
    margin-top: 10px;
    padding: 14px 12px
}

    .stage-condensed-screen.screen-question .question-card h2 {
        font-size: 26px;
        line-height: 1.58
    }

.stage-condensed-screen.screen-question .option-grid {
    gap: 11px;
    margin-top: 12px
}

.stage-condensed-screen.screen-question .option-btn {
    min-height: 68px;
    padding: 10px 58px;
    font-size: 18px
}

.stage-condensed-screen.screen-question .option-letter {
    width: 50px;
    height: 50px;
    font-size: 18px
}

.stage-tiny-screen .home-hero {
    height: max(390px,calc(var(--stage-runtime-h) - 230px));
    padding-top: 70px
}

.stage-tiny-screen .home-title {
    margin-top: 135px
}

    .stage-tiny-screen .home-title span, .stage-tiny-screen .home-title strong {
        font-size: 54px
    }

.stage-tiny-screen .home-hero p {
    margin-top: 16px;
    font-size: 16px
}

.stage-tiny-screen .home-actions, .stage-tiny-screen .stage-actions {
    gap: 10px
}

.stage-tiny-screen.screen-station .top-bar {
    top: max(8px,calc(env(safe-area-inset-top,0) + 6px));
    padding: 0
}

.stage-tiny-screen .primary-btn, .stage-tiny-screen .secondary-btn {
    min-height: 50px;
    font-size: 16px
}

.stage-tiny-screen .map-node {
    width: 108px;
    min-height: 72px
}

.stage-tiny-screen .map-emblem {
    width: 32px;
    height: 32px
}

.stage-tiny-screen .map-name {
    font-size: 16px
}

.stage-tiny-screen .station-illustration {
    height: 205px
}

.stage-tiny-screen.screen-station .station-illustration {
    height: 228px;
    margin-top: 0
}

.stage-tiny-screen.screen-station .station-name-badge {
    width: 366px;
    margin-top: -22px
}

    .stage-tiny-screen.screen-station .station-name-badge h1 {
        min-height: 42px;
        padding: 4px 36px 6px;
        font-size: 18px;
        border-radius: 999px
    }

        .stage-tiny-screen.screen-station .station-name-badge h1::before, .stage-tiny-screen.screen-station .station-name-badge h1::after {
            width: 22px
        }

.stage-tiny-screen .station-card, .stage-tiny-screen .question-card, .stage-tiny-screen .summary-card {
    padding: 18px
}

.stage-tiny-screen.screen-station .station-card {
    margin-top: 10px;
    height: 340px;
    min-height: 340px;
    max-height: 340px
}

    .stage-tiny-screen.screen-station .station-card h2 {
        font-size: 24px
    }

.stage-tiny-screen.screen-station .station-title-separator {
    margin-top: 8px;
    margin-bottom: 10px
}

.stage-tiny-screen.screen-station .station-summary-scroll {
    min-height: 0;
    max-height: none;
    padding: 16px 15px
}

.stage-tiny-screen.screen-station .station-card p {
    font-size: 16px;
    line-height: 1.95
}

.stage-tiny-screen.screen-question .question-card {
    min-height: 178px;
    height: 178px;
    margin-top: 8px;
    padding: 12px
}

    .stage-tiny-screen.screen-question .question-card h2 {
        font-size: 24px;
        line-height: 1.5
    }

.stage-tiny-screen.screen-question .option-grid {
    gap: 10px;
    margin-top: 10px
}

.stage-tiny-screen.screen-question .option-btn {
    min-height: 62px;
    padding: 9px 54px;
    font-size: 17px
}

.stage-tiny-screen.screen-question .option-letter {
    width: 38px;
    height: 38px;
    right: 12px;
    font-size: 17px
}

.stage-tiny-screen.screen-end .complete-wrap {
    margin-top: 42px
}

.stage-tiny-screen.screen-end .complete-mark {
    width: 112px;
    height: 112px;
    margin-bottom: 18px;
    font-size: 28px
}

.stage-tiny-screen.screen-end .summary-card {
    margin-top: 20px
}

.stage-tiny-screen.screen-end .stage-actions {
    gap: 8px
}

@media (prefers-reduced-motion:reduce) {
    .busy-spinner, .busy-card, .loader-ring, .loader-emblem, .loader-spark, .loader-steps span, .screen-question .question-card, .option-btn, .option-btn.is-correct, .option-btn.is-wrong.is-selected, .answer-modal.is-visible .answer-dialog, .level-unlock-card, .route-highlight, .home-falling-particles span, .home-info-card {
        animation: none
    }
}

.screen-map {
    background: radial-gradient(circle at 50% 10%,rgba(255,255,255,.86),transparent 118px),linear-gradient(180deg,#fbf4df 0%,#efe2bd 48%,#dbc58f 78%,#dfeadc 100%)
}

    .screen-map .top-bar {
        width: 390px;
        grid-template-columns: 44px minmax(0,1fr) 44px;
        padding: 20px 20px 8px;
        margin: 0 auto
    }

        .screen-map .top-bar h1 {
            color: #183428;
            font-size: 24px;
            min-width: 0
        }

.map-intro {
    position: relative;
    z-index: 2;
    width: 382px;
    margin: 2px auto 0;
    padding: 13px 16px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg,rgba(255,255,255,.66),transparent 42%),linear-gradient(180deg,rgba(255,252,242,.86),rgba(248,235,202,.72));
    border: 1px solid rgba(169,128,53,.24);
    box-shadow: 0 12px 25px rgba(86,62,24,.11),inset 0 1px 0 rgba(255,255,255,.68);
    text-align: center;
    overflow: hidden
}

    .map-intro h2 {
        margin: 0;
        color: #173b2b;
        font-size: 19px;
        line-height: 1.45;
        font-weight: 700;
        white-space: normal;
        overflow-wrap: anywhere
    }

    .map-intro p {
        max-width: 330px;
        margin: 4px auto 10px;
        color: #6e634f;
        font-size: 12px;
        line-height: 1.75;
        font-weight: 700;
        overflow-wrap: anywhere
    }

.map-progress-card {
    display: grid;
    gap: 8px
}

    .map-progress-card > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px
    }

    .map-progress-card span {
        color: #857147;
        font-size: 12px;
        font-weight: 700
    }

    .map-progress-card strong {
        color: var(--green-dark);
        font-size: 15px;
        font-weight: 700
    }

.map-progress-bar {
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(97,78,42,.14)
}

    .map-progress-bar span {
        display: block;
        width: 0;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg,#2f6c43,#c59b36)
    }

.screen-map .map-panel {
    position: relative;
    z-index: 1;
    width: 394px;
    height: calc(var(--stage-runtime-h,932px) - 366px);
    min-height: 500px;
    margin: 10px auto 0;
    overflow: hidden;
    border-radius: 22px;
    background: radial-gradient(circle at 50% -7%,rgba(255,255,247,.92),transparent 150px),radial-gradient(circle at 12% 18%,rgba(67,123,79,.11),transparent 116px),radial-gradient(circle at 88% 42%,rgba(78,145,153,.09),transparent 130px),radial-gradient(circle at 18% 72%,rgba(77,135,84,.10),transparent 132px),linear-gradient(180deg,#f4ead2 0%,#ead6a8 42%,#d9ba78 78%,#caa35e 100%);
    border: 1px solid rgba(146,97,35,.26);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.56),inset 0 24px 70px rgba(255,249,223,.38),0 18px 34px rgba(72,52,22,.16)
}

    .screen-map .map-panel::before, .screen-map .map-panel::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(ellipse,rgba(62,111,74,.14),transparent 67%);
        filter: blur(.4px)
    }

    .screen-map .map-panel::before {
        width: 220px;
        height: 420px;
        right: -130px;
        top: 72px
    }

    .screen-map .map-panel::after {
        width: 230px;
        height: 460px;
        left: -145px;
        bottom: 28px;
        background: radial-gradient(ellipse,rgba(91,133,141,.15),transparent 67%)
    }

.map-scroll {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
}

    .map-scroll::-webkit-scrollbar {
        width: 0;
        height: 0
    }

.journey-map {
    position: relative;
    min-height: 2700px;
    padding: 34px 15px 66px;
    isolation: isolate;
    overflow: hidden;
    background-image: radial-gradient(ellipse at 50% 0%,rgba(255,255,247,.60) 0 118px,transparent 244px),radial-gradient(circle at 17% 9%,rgba(59,122,81,.14),transparent 58px),radial-gradient(circle at 85% 20%,rgba(182,136,66,.12),transparent 64px),radial-gradient(circle at 15% 39%,rgba(75,139,94,.10),transparent 78px),radial-gradient(circle at 86% 60%,rgba(71,136,148,.10),transparent 86px),radial-gradient(circle at 18% 82%,rgba(70,126,82,.10),transparent 92px),repeating-linear-gradient(0deg,rgba(106,77,36,.018) 0 1px,transparent 1px 12px),repeating-linear-gradient(24deg,transparent 0 108px,rgba(255,246,216,.13) 108px 112px,transparent 112px 218px),linear-gradient(180deg,#f7efd9 0%,#ead7aa 34%,#d9bd7d 69%,#cda762 100%)
}

    .journey-map::before, .journey-map::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none
    }

    .journey-map::before {
        background: radial-gradient(ellipse at 50% 9%,rgba(186,137,63,.13) 0 44px,transparent 46px),radial-gradient(ellipse at 12% 18%,rgba(63,111,70,.16) 0 34px,transparent 36px),radial-gradient(ellipse at 88% 31%,rgba(91,129,142,.14) 0 40px,transparent 42px),radial-gradient(ellipse at 13% 52%,rgba(150,103,47,.11) 0 42px,transparent 44px),radial-gradient(ellipse at 86% 78%,rgba(63,111,70,.14) 0 45px,transparent 47px),linear-gradient(180deg,rgba(255,251,236,.30),transparent 18%,transparent 76%,rgba(55,41,23,.13))
    }

    .journey-map::after {
        opacity: .62;
        background: radial-gradient(circle at 50% 7%,rgba(195,151,71,.22) 0 4px,transparent 5px),radial-gradient(circle at 22% 16%,rgba(63,111,70,.18) 0 6px,transparent 7px),radial-gradient(circle at 78% 29%,rgba(87,124,135,.16) 0 7px,transparent 8px),radial-gradient(circle at 20% 47%,rgba(151,103,45,.15) 0 7px,transparent 8px),radial-gradient(circle at 82% 72%,rgba(63,111,70,.15) 0 7px,transparent 8px),repeating-linear-gradient(17deg,transparent 0 94px,rgba(255,244,210,.13) 94px 97px,transparent 97px 186px)
    }

@keyframes routeLight {
    from {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: -100
    }
}

@keyframes riverFlow {
    from {
        stroke-dashoffset: 0
    }

    to {
        stroke-dashoffset: -160
    }
}

.journey-route {
    position: absolute;
    z-index: 1;
    top: 20px;
    right: 0;
    width: 100%;
    height: calc(100% - 40px);
    fill: none;
    pointer-events: none
}

    .journey-route path {
        stroke-linecap: round;
        stroke-linejoin: round
    }

#mapPalm path, #mapDome path, #mapMountain path, #mapRocks path {
    vector-effect: non-scaling-stroke
}

#mapPalm path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round
}

#mapDome path {
    fill: rgba(255,244,210,.72);
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round
}

#mapMountain path {
    fill: rgba(163,121,66,.18);
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round
}

#mapRocks path {
    fill: rgba(132,103,64,.18);
    stroke: currentColor;
    stroke-width: 3;
    stroke-linejoin: round
}

.journey-route .scenery {
    pointer-events: none
}

.journey-route .scenery-depth {
    color: rgba(122,95,55,.42)
}

.journey-route .scenery-front {
    color: rgba(50,104,65,.52);
    opacity: .86
}

.journey-route .map-valley {
    fill: rgba(88,138,82,.15);
    stroke: none
}

.journey-route .valley-two {
    fill: rgba(71,132,91,.12)
}

.journey-route .valley-three {
    fill: rgba(67,126,85,.14)
}

.journey-route .river-shadow {
    fill: none;
    stroke: rgba(69,50,24,.13);
    stroke-width: 56;
    filter: drop-shadow(0 15px 18px rgba(76,55,25,.15))
}

.journey-route .river-bank {
    fill: none;
    stroke: url(#riverBank);
    stroke-width: 46;
    opacity: .96
}

.journey-route .river-water {
    fill: none;
    stroke: url(#riverWater);
    stroke-width: 27;
    filter: drop-shadow(0 5px 9px rgba(35,93,102,.13))
}

.journey-route .river-shine {
    fill: none;
    stroke: rgba(244,255,246,.72);
    stroke-width: 4;
    stroke-dasharray: 18 30;
    animation: riverFlow 13s linear infinite
}

.journey-stop {
    position: relative;
    z-index: 3;
    width: 142px;
    min-height: 106px;
    margin-bottom: 5px;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    gap: 4px;
    padding: 0;
    border-radius: 0;
    color: var(--ink);
    text-decoration: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    transition: transform .16s ease,filter .16s ease,box-shadow .16s ease;
    direction: ltr
}

    .journey-stop::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 35px;
        width: 42px;
        height: 12px;
        border-top: 3px solid rgba(108,165,157,.42);
        opacity: .88
    }

    .journey-stop.side-right {
        margin-right: 22px;
        margin-left: auto
    }

    .journey-stop.side-left {
        margin-right: auto;
        margin-left: 22px
    }

    .journey-stop.side-right::before {
        left: 4px;
        transform: rotate(-10deg)
    }

    .journey-stop.side-left::before {
        right: 4px;
        transform: rotate(10deg)
    }

    .journey-stop.side-right {
        grid-template-columns: 1fr
    }

        .journey-stop.side-right .stop-icon {
            grid-column: 1
        }

        .journey-stop.side-right .stop-copy {
            grid-column: 1;
            text-align: center
        }

    .journey-stop.side-left .stop-icon {
        grid-column: 1
    }

    .journey-stop.side-left .stop-copy {
        grid-column: 1;
        text-align: center
    }

    .journey-stop.open:active, .journey-stop.completed:active, .journey-stop.future:active {
        transform: scale(.97)
    }

    .journey-stop.open, .journey-stop.completed {
        filter: saturate(1.05)
    }

        .journey-stop.open .stop-icon {
            border-color: rgba(205,158,54,.64);
            box-shadow: 0 0 0 6px rgba(214,173,79,.18),0 0 28px rgba(214,173,79,.28),0 14px 22px rgba(75,47,17,.16),inset 0 1px 0 rgba(255,255,255,.82)
        }

        .journey-stop.completed .stop-icon {
            color: #fff8e0;
            background: radial-gradient(circle at 36% 24%,rgba(255,255,255,.34),transparent 30%),linear-gradient(145deg,#4f9f67,#2f6c43)
        }

    .journey-stop.locked, .journey-stop.future {
        filter: saturate(.64);
        opacity: .76
    }

    .journey-stop.future {
        opacity: .72
    }

.stop-number {
    position: absolute;
    z-index: 3;
    top: -5px;
    right: 19px;
    left: auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff9e6;
    background: linear-gradient(145deg,#cfa64a,#846026);
    border: 1px solid rgba(255,240,184,.62);
    box-shadow: 0 6px 12px rgba(73,47,17,.16);
    font-size: 12px;
    font-weight: 700
}

.journey-stop.side-right .stop-number {
    right: 19px;
    left: auto
}

.stop-icon {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: #2f6c43;
    background: radial-gradient(circle at 35% 26%,rgba(255,255,255,.86),transparent 34%),linear-gradient(145deg,#fff2c5,#d7b263);
    border: 2px solid rgba(157,111,38,.34);
    box-shadow: 0 11px 18px rgba(84,55,21,.15),inset 0 1px 0 rgba(255,255,255,.70)
}

.journey-stop.locked .stop-icon, .journey-stop.future .stop-icon {
    color: #736953;
    background: radial-gradient(circle at 35% 26%,rgba(255,255,255,.72),transparent 34%),linear-gradient(145deg,#efe6d0,#c6b894)
}

    .journey-stop.locked .stop-icon::after, .journey-stop.future .stop-icon::after {
        content: "";
        position: absolute;
        left: 7px;
        bottom: 6px;
        width: 14px;
        height: 11px;
        border-radius: 4px;
        background: rgba(93,77,47,.72);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.26)
    }

    .journey-stop.locked .stop-icon::before, .journey-stop.future .stop-icon::before {
        content: "";
        position: absolute;
        left: 10px;
        bottom: 16px;
        width: 8px;
        height: 8px;
        border: 3px solid rgba(93,77,47,.72);
        border-bottom: 0;
        border-radius: 9px 9px 0 0
    }

.journey-stop.completed .stop-icon::after {
    content: "✓";
    position: absolute;
    left: 4px;
    bottom: 3px;
    display: grid;
    place-items: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    color: #2d6b42;
    background: #fff4c8;
    border: 1px solid rgba(71,121,75,.22);
    font-size: 14px;
    font-weight: 700
}

.icon-svg {
    width: 50px;
    height: 50px
}

    .icon-svg path, .icon-svg circle, .icon-svg ellipse, .icon-svg rect, .icon-svg polygon {
        fill: none;
        stroke: currentColor;
        stroke-width: 4;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.stop-copy {
    min-width: 0;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 1px;
    width: 118px;
    min-height: 44px;
    place-items: center;
    padding: 7px 10px 6px;
    border-radius: 999px;
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 45%),rgba(255,248,229,.84);
    border: 1px solid rgba(148,103,44,.20);
    box-shadow: 0 9px 18px rgba(73,49,20,.12),inset 0 1px 0 rgba(255,255,255,.66);
    backdrop-filter: blur(2px);
    direction: rtl
}

.journey-stop .map-name {
    color: #22392c;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap
}

.journey-stop .map-state {
    color: #7b6c50;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.35
}

.journey-stop.open .map-state, .journey-stop.completed .map-state {
    color: var(--green-dark)
}

.journey-map {
    min-height: 3580px;
    padding: 48px 15px 92px;
    background-image: radial-gradient(circle at 8% 5%,rgba(72,118,82,.11),transparent 68px),radial-gradient(circle at 90% 13%,rgba(144,103,54,.11),transparent 76px),radial-gradient(circle at 11% 42%,rgba(78,133,96,.10),transparent 84px),radial-gradient(circle at 88% 70%,rgba(90,139,143,.09),transparent 88px),repeating-linear-gradient(0deg,rgba(105,77,38,.018) 0 1px,transparent 1px 12px),repeating-linear-gradient(45deg,transparent 0 116px,rgba(122,88,42,.035) 116px 118px,transparent 118px 230px),linear-gradient(180deg,#f7eed8 0%,#ead9b1 44%,#d8bb7c 100%)
}

    .journey-map::before {
        background: radial-gradient(circle at 23% 12%,rgba(61,101,73,.12) 0 3px,transparent 4px),radial-gradient(circle at 77% 19%,rgba(168,123,56,.13) 0 4px,transparent 5px),radial-gradient(circle at 19% 35%,rgba(99,132,133,.11) 0 5px,transparent 6px),radial-gradient(circle at 81% 49%,rgba(61,101,73,.12) 0 4px,transparent 5px),radial-gradient(circle at 22% 73%,rgba(168,123,56,.12) 0 5px,transparent 6px),linear-gradient(180deg,rgba(255,252,239,.34),transparent 28%,transparent 74%,rgba(78,58,26,.12))
    }

    .journey-map::after {
        opacity: .28;
        background: linear-gradient(90deg,transparent 0 26px,rgba(72,48,20,.10) 26px 27px,transparent 27px calc(100% - 27px),rgba(72,48,20,.10) calc(100% - 27px) calc(100% - 26px),transparent calc(100% - 26px)),repeating-linear-gradient(90deg,transparent 0 32px,rgba(255,250,228,.19) 32px 34px,transparent 34px 88px)
    }

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

.ornament {
    position: absolute;
    opacity: .32;
    color: #7d6b48
}

    .ornament.palm {
        width: 54px;
        height: 76px
    }

        .ornament.palm::before {
            content: "";
            position: absolute;
            left: 24px;
            bottom: 4px;
            width: 8px;
            height: 44px;
            border-radius: 999px;
            background: linear-gradient(180deg,#7d6b48,#9d7a42);
            transform: rotate(9deg)
        }

        .ornament.palm::after {
            content: "";
            position: absolute;
            left: 8px;
            top: 6px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: radial-gradient(ellipse at 50% 100%,transparent 0 33%,currentColor 34% 38%,transparent 39%),radial-gradient(ellipse at 100% 50%,transparent 0 33%,currentColor 34% 38%,transparent 39%),radial-gradient(ellipse at 0 50%,transparent 0 33%,currentColor 34% 38%,transparent 39%),radial-gradient(ellipse at 50% 0,transparent 0 33%,currentColor 34% 38%,transparent 39%);
            transform: rotate(-14deg)
        }

    .ornament.dome {
        width: 76px;
        height: 58px;
        border: 3px solid currentColor;
        border-top: 0;
        border-radius: 0 0 10px 10px
    }

        .ornament.dome::before {
            content: "";
            position: absolute;
            left: 10px;
            right: 10px;
            top: -26px;
            height: 48px;
            border: 3px solid currentColor;
            border-bottom: 0;
            border-radius: 999px 999px 0 0
        }

        .ornament.dome::after {
            content: "";
            position: absolute;
            left: 35px;
            top: -43px;
            width: 4px;
            height: 18px;
            border-radius: 999px;
            background: currentColor
        }

    .ornament.mountain {
        width: 96px;
        height: 76px;
        background: linear-gradient(135deg,transparent 50%,currentColor 51%) left bottom / 56px 62px no-repeat,linear-gradient(225deg,transparent 50%,currentColor 51%) right bottom / 66px 76px no-repeat;
        opacity: .20
    }

    .ornament.book {
        width: 10px;
        height: 44px;
        border: 3px solid currentColor;
        border-radius: 9px;
        transform: rotate(-12deg)
    }

        .ornament.book::before {
            content: "";
            position: absolute;
            top: 6px;
            bottom: 6px;
            left: 50%;
            border-left: 2px solid currentColor
        }

    .ornament.star {
        width: 28px;
        height: 28px;
        background: currentColor;
        clip-path: polygon(50% 0,60% 36%,98% 50%,60% 64%,50% 100%,40% 64%,2% 50%,40% 36%);
        color: #b89144
    }

    .ornament.p1 {
        right: 20px;
        top: 410px
    }

    .ornament.p2 {
        left: 16px;
        top: 2050px;
        transform: scale(.9)
    }

    .ornament.d1 {
        left: 14px;
        top: 690px
    }

    .ornament.d2 {
        right: 16px;
        top: 1690px;
        transform: scale(.86)
    }

    .ornament.m1 {
        right: -14px;
        top: 1160px
    }

    .ornament.m2 {
        left: -20px;
        top: 2660px;
        transform: scale(1.05)
    }

    .ornament.b1 {
        right: 21px;
        top: 2380px
    }

    .ornament.s1 {
        left: 54px;
        top: 1510px
    }

.journey-route {
    position: absolute;
    z-index: 2;
    top: 52px;
    bottom: 92px;
    left: 50%;
    right: auto;
    width: 10px;
    height: auto;
    transform: translateX(-50%);
    border-radius: 999px;
    background: linear-gradient(90deg,rgba(220,178,82,.88) 0 2px,rgba(17,96,78,.98) 2px 8px,rgba(220,178,82,.88) 8px 10px),linear-gradient(180deg,#e4bd64,#1a6f5b 7%,#135244 50%,#1a6f5b 93%,#e4bd64);
    border: 0;
    box-shadow: 0 8px 14px rgba(74,53,24,.12),0 0 0 1px rgba(137,96,37,.14);
    fill: none;
    pointer-events: none
}

    .journey-route::before {
        content: "";
        position: absolute;
        inset: 18px auto 18px 50%;
        width: 2px;
        transform: translateX(-50%);
        border-radius: 999px;
        border: 0;
        background: repeating-linear-gradient(0deg,rgba(255,238,176,.82) 0 5px,transparent 5px 34px)
    }

    .journey-route::after {
        content: "";
        position: absolute;
        top: 20px;
        bottom: 20px;
        left: 50%;
        width: 1px;
        transform: translateX(-50%);
        border-radius: 999px;
        background: linear-gradient(180deg,rgba(250,227,157,.42),rgba(255,248,204,.78),rgba(250,227,157,.42));
        opacity: .46
    }

.route-cap {
    position: absolute;
    left: 50%;
    z-index: 2;
    width: 16px;
    height: 16px;
    transform: translateX(-50%) rotate(45deg);
    background: linear-gradient(145deg,#1d6e59,#102f2b);
    border: 2px solid rgba(230,194,112,.82);
    box-shadow: 0 7px 13px rgba(70,48,18,.16)
}

.route-cap-top {
    top: -8px
}

.route-cap-bottom {
    bottom: -8px
}

.journey-stop {
    width: 100%;
    min-height: 138px;
    margin: 0 0 10px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 64px minmax(0,1fr);
    align-items: center;
    justify-items: center;
    gap: 0;
    direction: ltr
}

    .journey-stop.side-right, .journey-stop.side-left {
        margin-right: 0;
        margin-left: 0
    }

    .journey-stop::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 12px;
        bottom: 12px;
        width: 142px;
        height: auto;
        border-radius: 20px;
        background: linear-gradient(135deg,rgba(255,255,255,.78),transparent 38%),linear-gradient(180deg,rgba(255,252,238,.96),rgba(245,232,196,.92));
        border: 1px solid rgba(147,105,48,.26);
        box-shadow: 0 14px 22px rgba(76,53,22,.14),inset 0 1px 0 rgba(255,255,255,.78)
    }

    .journey-stop::after {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 32px;
        height: 2px;
        border-radius: 999px;
        background: linear-gradient(90deg,rgba(202,164,84,.18),rgba(202,164,84,.74))
    }

    .journey-stop.side-right::before {
        right: 7px;
        left: auto;
        transform: none
    }

    .journey-stop.side-left::before {
        left: 7px;
        right: auto;
        transform: none
    }

    .journey-stop.side-right::after {
        left: calc(50% + 26px)
    }

    .journey-stop.side-left::after {
        right: calc(50% + 26px);
        transform: scaleX(-1)
    }

    .journey-stop.side-right .stop-number, .journey-stop.side-left .stop-number {
        position: relative;
        top: auto;
        right: auto;
        left: auto;
        grid-column: 2;
        grid-row: 1;
        z-index: 4;
        width: 44px;
        height: 44px;
        color: #fff7df;
        background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.34),transparent 32%),linear-gradient(145deg,#1d7560,#123b33);
        border: 2px solid rgba(227,190,106,.82);
        box-shadow: 0 0 0 5px rgba(247,220,150,.20),0 9px 15px rgba(45,37,19,.22);
        font-size: 21px;
        line-height: 1
    }

    .journey-stop .stop-number::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 59px;
        width: 31px;
        height: 31px;
        transform: translateX(-50%);
        opacity: .76;
        background: center / contain no-repeat;
        filter: drop-shadow(0 5px 6px rgba(77,55,26,.12));
        pointer-events: none
    }

    .journey-stop:last-of-type .stop-number::before {
        display: none
    }

    .journey-stop:nth-of-type(3n+1) .stop-number::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23728b55' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 42c0-11 1-20 4-31'/%3E%3Cpath d='M28 12C17 5 8 8 4 18'/%3E%3Cpath d='M28 12c-2-13 11-12 12-2'/%3E%3Cpath d='M28 12c11-5 16 2 11 10'/%3E%3Cpath d='M28 13c9 4 10 13 1 16'/%3E%3C/svg%3E")
    }

    .journey-stop:nth-of-type(3n+2) .stop-number::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23937a47' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 38 17 15l10 23'/%3E%3Cpath d='M20 38 33 10l11 28'/%3E%3Cpath d='M26 24 33 10l5 14'/%3E%3C/svg%3E")
    }

    .journey-stop:nth-of-type(3n) .stop-number::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%237b6b49' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 39h30V25c0-8-7-15-15-15S9 17 9 25v14Z'/%3E%3Cpath d='M24 10V5'/%3E%3Cpath d='M19 5h10'/%3E%3Cpath d='M16 39V28h16v11'/%3E%3C/svg%3E")
    }

    .journey-stop.locked .stop-number::before, .journey-stop.future .stop-number::before {
        opacity: .43
    }

    .journey-stop.open .stop-number {
        background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.38),transparent 32%),linear-gradient(145deg,#c69935,#7a5520)
    }

    .journey-stop.completed .stop-number {
        background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.32),transparent 32%),linear-gradient(145deg,#3f9a61,#1f6543)
    }

    .journey-stop.side-right .stop-icon, .journey-stop.side-right .stop-copy {
        grid-column: 3;
        grid-row: 1
    }

    .journey-stop.side-left .stop-icon, .journey-stop.side-left .stop-copy {
        grid-column: 1;
        grid-row: 1
    }

.stop-icon {
    z-index: 3;
    align-self: start;
    justify-self: center;
    width: 61px;
    height: 61px;
    margin-top: 4px;
    color: #1f6d55;
    background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.92),transparent 34%),linear-gradient(145deg,#fff7d8,#d8ad55);
    border: 2px solid rgba(141,99,38,.34)
}

.stop-copy {
    z-index: 2;
    align-self: stretch;
    justify-self: center;
    width: 142px;
    min-height: 114px;
    padding: 69px 9px 10px;
    place-items: center;
    align-content: end;
    gap: 1px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none
}

.journey-stop .map-name {
    color: #172d25;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    text-shadow: 0 1px 0 rgba(255,255,255,.70)
}

.journey-stop .map-state {
    color: #766949;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25
}

.journey-stop.locked, .journey-stop.future {
    opacity: .67
}

    .journey-stop.locked::before, .journey-stop.future::before {
        background: linear-gradient(135deg,rgba(255,255,255,.55),transparent 38%),linear-gradient(180deg,rgba(241,232,209,.90),rgba(219,207,179,.86))
    }

.map-notice {
    position: absolute;
    right: 18px;
    left: 18px;
    bottom: 14px;
    z-index: 8;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding: 8px 12px;
    border-radius: 16px;
    color: #fff8e1;
    background: rgba(32,49,39,.90);
    border: 1px solid rgba(234,215,159,.32);
    box-shadow: 0 12px 24px rgba(22,32,26,.20);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease,transform .18s ease
}

    .map-notice.is-visible {
        opacity: 1;
        transform: translateY(0)
    }

.stage-phone-fill.screen-map .map-panel {
    height: calc(var(--stage-runtime-h,932px) - 366px)
}

.stage-condensed-screen.screen-map .map-intro {
    padding-top: 10px;
    padding-bottom: 10px
}

.stage-condensed-screen.screen-map .map-panel {
    height: calc(var(--stage-runtime-h,840px) - 340px)
}

.stage-tiny-screen.screen-map .top-bar {
    padding-top: 14px;
    width: 386px
}

.stage-tiny-screen.screen-map .map-intro {
    width: 384px;
    padding: 9px 14px
}

    .stage-tiny-screen.screen-map .map-intro h2 {
        font-size: 18px
    }

    .stage-tiny-screen.screen-map .map-intro p {
        display: none
    }

.stage-tiny-screen.screen-map .map-panel {
    min-height: 430px;
    height: calc(var(--stage-runtime-h,760px) - 288px)
}

.stage-tiny-screen.screen-map .journey-stop {
    width: 100%;
    grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr);
    min-height: 126px
}

    .stage-tiny-screen.screen-map .journey-stop.side-right, .stage-tiny-screen.screen-map .journey-stop.side-left {
        grid-template-columns: minmax(0,1fr) 58px minmax(0,1fr)
    }

.stage-tiny-screen.screen-map .stop-icon {
    width: 58px;
    height: 58px
}

.stage-tiny-screen.screen-map .icon-svg {
    width: 34px;
    height: 34px
}

.stage-tiny-screen.screen-map .stop-copy {
    width: 140px;
    min-height: 104px;
    padding-top: 63px
}

.stage-tiny-screen.screen-map .journey-stop::before {
    width: 142px
}

.stage-tiny-screen.screen-map .journey-stop.side-right .stop-number, .stage-tiny-screen.screen-map .journey-stop.side-left .stop-number {
    width: 42px;
    height: 42px;
    font-size: 20px
}

.screen-map {
    background: radial-gradient(circle at 50% 9%,rgba(62,128,112,.26),transparent 132px),radial-gradient(circle at 14% 84%,rgba(198,160,60,.14),transparent 118px),linear-gradient(180deg,#102436 0%,#071523 52%,#091c1f 100%)
}

    .screen-map .top-bar h1 {
        color: #f7edc9;
        text-shadow: 0 2px 8px rgba(0,0,0,.32)
    }

    .screen-map .round-btn {
        background: rgba(255,251,229,.94);
        box-shadow: 0 10px 18px rgba(0,0,0,.18)
    }

.map-intro {
    background: linear-gradient(135deg,rgba(255,255,255,.10),transparent 48%),rgba(8,24,36,.76);
    border-color: rgba(224,190,95,.35);
    box-shadow: 0 14px 26px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.18)
}

    .map-intro h2, .map-progress-card strong {
        color: #fff3bd
    }

.map-progress-card span {
    color: rgba(255,245,210,.76)
}

.map-progress-bar {
    background: rgba(255,241,185,.16)
}

    .map-progress-bar span {
        background: linear-gradient(90deg,#f4cf58,#48ac74)
    }

.screen-map .map-panel {
    background: radial-gradient(circle at 46% 10%,rgba(252,221,109,.13),transparent 94px),radial-gradient(circle at 22% 28%,rgba(255,255,255,.07) 0 1px,transparent 2px),radial-gradient(circle at 77% 42%,rgba(255,255,255,.06) 0 1px,transparent 2px),radial-gradient(circle at 34% 62%,rgba(255,255,255,.06) 0 1px,transparent 2px),radial-gradient(circle at 84% 78%,rgba(255,255,255,.07) 0 1px,transparent 2px),linear-gradient(180deg,#0b2032 0%,#061422 58%,#071c1f 100%);
    border-color: rgba(230,201,116,.44);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08),inset 0 0 56px rgba(18,70,69,.28),0 20px 34px rgba(0,0,0,.30)
}

    .screen-map .map-panel::before, .screen-map .map-panel::after {
        display: none
    }

.journey-map {
    min-height: 3440px;
    padding: 36px 18px 94px;
    background: radial-gradient(circle at 24% 8%,rgba(255,255,255,.09) 0 1px,transparent 2px),radial-gradient(circle at 70% 16%,rgba(255,255,255,.08) 0 1px,transparent 2px),radial-gradient(circle at 18% 34%,rgba(255,255,255,.08) 0 1px,transparent 2px),radial-gradient(circle at 82% 54%,rgba(255,255,255,.08) 0 1px,transparent 2px),radial-gradient(circle at 28% 78%,rgba(255,255,255,.08) 0 1px,transparent 2px),linear-gradient(180deg,#0a1e30 0%,#061421 54%,#071b1f 100%)
}

    .journey-map::before {
        opacity: .54;
        background: radial-gradient(circle at 50% 6%,rgba(255,224,105,.16),transparent 74px),radial-gradient(circle at 18% 42%,rgba(69,171,113,.12),transparent 86px),radial-gradient(circle at 83% 70%,rgba(77,165,154,.11),transparent 92px)
    }

    .journey-map::after {
        opacity: .22;
        background: repeating-linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.035) 48px 49px,transparent 49px 96px),repeating-linear-gradient(0deg,transparent 0 52px,rgba(255,255,255,.032) 52px 53px,transparent 53px 104px)
    }

.journey-route.game-route {
    position: absolute;
    z-index: 2;
    top: 24px;
    right: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 84px);
    transform: none;
    border: 0;
    background: none;
    box-shadow: none;
    fill: none;
    overflow: visible
}

    .journey-route.game-route::before, .journey-route.game-route::after, .route-cap {
        display: none
    }

.game-route-halo {
    stroke: rgba(255,236,140,.24);
    stroke-width: 32;
    filter: url(#routeGlow)
}

.game-route-main {
    stroke: rgba(242,215,117,.74);
    stroke-width: 18;
    filter: url(#routeGlow)
}

.game-route-dash {
    stroke: #fff3ba;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 22 20;
    animation: routeLight 12s linear infinite
}

.map-prop {
    position: absolute;
    z-index: 3;
    width: 42px;
    height: 48px;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 5px 8px rgba(0,0,0,.26));
    pointer-events: none
}

    .map-prop .trunk, .map-prop .pole {
        stroke: #c48a53;
        stroke-width: 7
    }

    .map-prop .leaf {
        stroke: #62ba6e;
        stroke-width: 7
    }

.prop-book {
    stroke: #b8d7ff;
    stroke-width: 5
}

.prop-flag .flag {
    fill: #e54f59;
    stroke: #f1d86e;
    stroke-width: 4
}

.journey-ornaments .p1 {
    right: 28px;
    top: 280px
}

.journey-ornaments .p2 {
    left: 28px;
    top: 980px;
    transform: scale(.92)
}

.journey-ornaments .b1 {
    left: 36px;
    top: 530px;
    transform: rotate(-12deg)
}

.journey-ornaments .b2 {
    right: 40px;
    top: 1320px;
    transform: rotate(10deg) scale(.9)
}

.journey-ornaments .f1 {
    right: 48px;
    top: 106px
}

.journey-ornaments .f2 {
    left: 52px;
    top: 1720px;
    transform: scale(.9)
}

.map-spark {
    position: absolute;
    z-index: 3;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffe67d;
    box-shadow: 0 0 12px rgba(255,224,112,.84);
    opacity: .78
}

    .map-spark.s1 {
        right: 104px;
        top: 458px
    }

    .map-spark.s2 {
        left: 96px;
        top: 1180px
    }

    .map-spark.s3 {
        right: 112px;
        top: 2090px
    }

.prophet-map-sign {
    position: absolute;
    z-index: 4;
    min-width: 84px;
    min-height: 31px;
    display: grid;
    place-items: center;
    padding: 4px 11px 5px;
    border-radius: 13px;
    color: #4d3408;
    background: linear-gradient(180deg,#fff4bf,#e6b13a 62%,#b67b18);
    border: 2px solid rgba(255,243,184,.88);
    box-shadow: 0 9px 16px rgba(102,73,27,.16),inset 0 2px 0 rgba(255,255,255,.55);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    transform: rotate(-4deg)
}

    .prophet-map-sign.sign-start {
        left: 28px;
        top: 82px
    }

    .prophet-map-sign.sign-middle {
        right: 26px;
        top: 1580px;
        transform: rotate(5deg)
    }

    .prophet-map-sign.sign-end {
        left: 32px;
        top: 3100px;
        transform: rotate(-3deg)
    }

.journey-stop {
    width: 100%;
    min-height: 136px;
    margin: 0;
    display: grid;
    grid-template-columns: 136px 64px 136px;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 0;
    direction: ltr;
    z-index: 5
}

    .journey-stop::before {
        display: none
    }

    .journey-stop::after {
        content: "";
        position: absolute;
        z-index: 2;
        top: 57px;
        width: 38px;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg,rgba(255,237,162,.15),rgba(255,237,162,.72));
        box-shadow: 0 0 10px rgba(255,232,132,.24)
    }

    .journey-stop.side-right, .journey-stop.side-left {
        margin: 0
    }

        .journey-stop.side-right::after {
            left: calc(50% + 17px)
        }

        .journey-stop.side-left::after {
            right: calc(50% + 17px);
            transform: scaleX(-1)
        }

        .journey-stop.side-right .stop-icon, .journey-stop.side-right .stop-number, .journey-stop.side-right .stop-copy {
            grid-column: 3
        }

        .journey-stop.side-left .stop-icon, .journey-stop.side-left .stop-number, .journey-stop.side-left .stop-copy {
            grid-column: 1
        }

    .journey-stop .stop-icon {
        grid-row: 1;
        width: 76px;
        height: 76px;
        margin: 0 0 20px;
        color: rgba(255,255,255,.42);
        background: radial-gradient(circle at 34% 24%,rgba(255,255,255,.32),transparent 30%),linear-gradient(145deg,#47515d,#1d2530 58%,#0d1118);
        border: 1px solid rgba(255,255,255,.12);
        box-shadow: 0 15px 24px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.18)
    }

    .journey-stop .icon-svg {
        width: 42px;
        height: 42px;
        opacity: .26
    }

    .journey-stop .stop-number {
        grid-row: 1;
        position: relative;
        inset: auto;
        z-index: 6;
        width: auto;
        height: auto;
        margin-bottom: 20px;
        color: rgba(255,255,255,.84);
        background: transparent;
        border: 0;
        box-shadow: none;
        font-size: 31px;
        font-weight: 800;
        line-height: 1;
        text-shadow: 0 3px 8px rgba(0,0,0,.30)
    }

        .journey-stop .stop-number::before {
            display: none
        }

    .journey-stop .stop-copy {
        grid-row: 1;
        align-self: end;
        width: 112px;
        min-height: 32px;
        margin-top: 72px;
        padding: 5px 12px 6px;
        place-items: center;
        align-content: center;
        gap: 0;
        border-radius: 11px 11px 13px 13px;
        background: linear-gradient(180deg,rgba(39,48,63,.96),rgba(17,23,32,.96));
        border: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 9px 16px rgba(0,0,0,.24);
        direction: rtl
    }

    .journey-stop .map-name {
        color: #f9f1cf;
        font-size: 13px;
        font-weight: 800;
        line-height: 1.15;
        text-shadow: none;
        white-space: nowrap
    }

    .journey-stop .map-state {
        color: rgba(246,235,195,.72);
        font-size: 9px;
        font-weight: 800;
        line-height: 1.2
    }

    .journey-stop.open .stop-icon {
        color: #fff4d0;
        background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.78),transparent 31%),radial-gradient(circle at 54% 64%,rgba(255,242,166,.72),transparent 36%),linear-gradient(145deg,#fff6c4,#e8b42f 56%,#a86d17);
        border-color: rgba(255,239,164,.78);
        box-shadow: 0 0 0 5px rgba(255,221,90,.20),0 0 30px rgba(255,217,86,.50),0 16px 26px rgba(0,0,0,.32)
    }

    .journey-stop.open .stop-copy {
        background: linear-gradient(180deg,#f9db6b,#d99c28);
        border-color: rgba(255,241,170,.66)
    }

    .journey-stop.open .map-name, .journey-stop.open .map-state {
        color: #34250e
    }

    .journey-stop.completed .stop-icon {
        color: #eaffd6;
        background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.38),transparent 32%),linear-gradient(145deg,#4ead75,#24694e 62%,#102f29);
        border-color: rgba(197,235,165,.54)
    }

    .journey-stop.completed .stop-copy {
        background: linear-gradient(180deg,#4d9666,#266046)
    }

    .journey-stop.future, .journey-stop.locked {
        opacity: .78;
        filter: saturate(.72)
    }

        .journey-stop.locked .stop-icon::before, .journey-stop.future .stop-icon::before {
            left: auto;
            right: 10px;
            bottom: 13px;
            width: 10px;
            height: 9px;
            border-width: 3px;
            border-color: rgba(248,231,180,.52)
        }

        .journey-stop.locked .stop-icon::after, .journey-stop.future .stop-icon::after {
            left: auto;
            right: 7px;
            bottom: 4px;
            width: 16px;
            height: 13px;
            background: rgba(248,231,180,.56)
        }

    .journey-stop.completed .stop-icon::after {
        left: 5px;
        bottom: 5px
    }

.stage-tiny-screen.screen-map .journey-stop, .stage-tiny-screen.screen-map .journey-stop.side-right, .stage-tiny-screen.screen-map .journey-stop.side-left {
    grid-template-columns: 132px 54px 132px;
    min-height: 126px
}

    .stage-tiny-screen.screen-map .journey-stop .stop-icon {
        width: 72px;
        height: 72px
    }

    .stage-tiny-screen.screen-map .journey-stop .stop-number {
        font-size: 29px
    }

    .stage-tiny-screen.screen-map .journey-stop .stop-copy {
        width: 108px;
        min-height: 31px;
        margin-top: 68px;
        padding: 5px 10px
    }

.screen-map {
    background: radial-gradient(circle at 50% 8%,rgba(255,255,255,.76),transparent 128px),radial-gradient(circle at 13% 78%,rgba(96,145,83,.17),transparent 136px),radial-gradient(circle at 86% 40%,rgba(96,151,164,.13),transparent 116px),linear-gradient(180deg,#fbf2dc 0%,#ecd7a8 48%,#d7edcf 100%)
}

    .screen-map .top-bar h1 {
        color: #17382b;
        text-shadow: 0 1px 0 rgba(255,255,255,.82)
    }

    .screen-map .round-btn {
        color: #1f6d50;
        background: rgba(255,251,235,.96);
        box-shadow: 0 9px 18px rgba(101,74,32,.14)
    }

.map-intro {
    background: linear-gradient(135deg,rgba(255,255,255,.78),transparent 48%),linear-gradient(180deg,rgba(255,252,238,.92),rgba(245,232,196,.84));
    border-color: rgba(177,132,55,.27);
    box-shadow: 0 12px 24px rgba(108,78,34,.12),inset 0 1px 0 rgba(255,255,255,.72)
}

    .map-intro h2, .map-progress-card strong {
        color: #17382b
    }

.map-progress-card span {
    color: #877143
}

.map-progress-bar {
    background: rgba(124,95,45,.15)
}

    .map-progress-bar span {
        background: linear-gradient(90deg,#2f8556,#d2a43a)
    }

.screen-map .map-panel {
    background: radial-gradient(circle at 50% 6%,rgba(255,255,255,.74),transparent 132px),radial-gradient(circle at 14% 28%,rgba(93,143,86,.13),transparent 112px),radial-gradient(circle at 86% 55%,rgba(92,151,162,.13),transparent 124px),linear-gradient(180deg,#f7edd7 0%,#ead4a2 54%,#d7edce 100%);
    border-color: rgba(158,108,36,.32);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.60),inset 0 22px 58px rgba(255,252,225,.35),0 18px 30px rgba(95,68,27,.15)
}

    .screen-map .map-panel::before, .screen-map .map-panel::after {
        display: block
    }

.journey-map {
    background: linear-gradient(180deg,rgba(255,251,232,.12),rgba(255,245,210,.04) 48%,rgba(208,232,196,.12)),linear-gradient(180deg,#f7efd9 0%,#ead5a4 50%,#d6eecf 100%)
}

    .journey-map::before {
        opacity: .20;
        background: radial-gradient(circle at 47% 8%,rgba(255,225,116,.22),transparent 74px),linear-gradient(90deg,rgba(255,255,255,.18),transparent 20%,transparent 80%,rgba(120,82,34,.08))
    }

    .journey-map::after {
        opacity: .18;
        background: repeating-linear-gradient(90deg,transparent 0 48px,rgba(134,95,39,.055) 48px 49px,transparent 49px 96px),repeating-linear-gradient(0deg,transparent 0 52px,rgba(134,95,39,.040) 52px 53px,transparent 53px 104px)
    }

.game-route-halo {
    stroke: rgba(190,145,52,.23);
    stroke-width: 34;
    filter: url(#routeGlow)
}

.game-route-main {
    stroke: rgba(211,164,63,.64);
    stroke-width: 20;
    filter: url(#routeGlow)
}

.game-route-dash {
    stroke: #fff3ba;
    stroke-width: 6;
    stroke-dasharray: 22 16;
    filter: drop-shadow(0 0 8px rgba(212,163,62,.58))
}

.map-prop {
    opacity: .82;
    filter: drop-shadow(0 8px 10px rgba(105,75,29,.18))
}

    .map-prop .trunk, .map-prop .pole {
        stroke: #b67642
    }

    .map-prop .leaf {
        stroke: #4ca763
    }

.prop-book {
    stroke: #4f8fa4
}

.prop-flag .flag {
    fill: #2f8c63;
    stroke: #f2d37a
}

.map-spark {
    background: #e9bd4a;
    box-shadow: 0 0 13px rgba(216,165,58,.66)
}

.journey-stop .stop-icon {
    color: #6f644f;
    background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.72),transparent 32%),linear-gradient(145deg,#f4eddb,#cfc2a0 60%,#a99567);
    border-color: rgba(125,101,63,.20);
    box-shadow: 0 14px 23px rgba(93,70,34,.17),inset 0 1px 0 rgba(255,255,255,.64)
}

.journey-stop .icon-svg {
    opacity: .55
}

.journey-stop .stop-number {
    color: rgba(45,66,55,.82);
    text-shadow: 0 1px 0 rgba(255,255,255,.65)
}

.journey-stop .stop-copy {
    background: linear-gradient(180deg,rgba(255,252,239,.96),rgba(244,229,193,.94));
    border-color: rgba(151,108,46,.22);
    box-shadow: 0 9px 16px rgba(97,70,31,.13),inset 0 1px 0 rgba(255,255,255,.72)
}

.journey-stop .map-name {
    color: #243b2d
}

.journey-stop .map-state {
    color: #806d48
}

.journey-stop.open .stop-icon {
    color: #fff9dc;
    background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.82),transparent 31%),radial-gradient(circle at 54% 64%,rgba(255,244,177,.72),transparent 36%),linear-gradient(145deg,#fff8cb,#e8b42f 56%,#a86d17);
    border-color: rgba(255,239,164,.90);
    box-shadow: 0 0 0 5px rgba(225,177,55,.15),0 0 30px rgba(225,177,55,.34),0 16px 25px rgba(98,71,29,.18)
}

.journey-stop.open .stop-copy {
    background: linear-gradient(180deg,#fff3bd,#e0ad32);
    border-color: rgba(255,241,170,.76)
}

.journey-stop.open .map-name, .journey-stop.open .map-state {
    color: #34250e
}

.journey-stop.completed .stop-icon {
    color: #f0ffe1;
    background: radial-gradient(circle at 35% 24%,rgba(255,255,255,.38),transparent 32%),linear-gradient(145deg,#4ead75,#286c4d 62%,#153f32);
    border-color: rgba(197,235,165,.54)
}

.journey-stop.completed .stop-copy {
    background: linear-gradient(180deg,#5fae73,#2d7450)
}

.journey-stop.completed .map-name, .journey-stop.completed .map-state {
    color: #f4ffe8
}

.journey-stop.locked .stop-icon::before, .journey-stop.future .stop-icon::before {
    border-color: rgba(97,78,50,.58)
}

.journey-stop.locked .stop-icon::after, .journey-stop.future .stop-icon::after {
    background: rgba(97,78,50,.58)
}

.journey-stop, .stage-tiny-screen.screen-map .journey-stop, .stage-tiny-screen.screen-map .journey-stop.side-right, .stage-tiny-screen.screen-map .journey-stop.side-left {
    min-height: 112px;
    grid-template-columns: 110px 48px 110px
}

    .journey-stop .stop-icon, .journey-stop.open .stop-icon, .journey-stop.completed .stop-icon, .journey-stop.locked .stop-icon, .journey-stop.future .stop-icon, .stage-tiny-screen.screen-map .journey-stop .stop-icon {
        display: none !important
    }

    .journey-stop.side-right .stop-number, .journey-stop.side-right .stop-copy {
        grid-column: 3
    }

    .journey-stop.side-left .stop-number, .journey-stop.side-left .stop-copy {
        grid-column: 1
    }

    .journey-stop .stop-number, .stage-tiny-screen.screen-map .journey-stop .stop-number {
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 28px;
        height: 28px;
        margin: 0 0 38px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff9df;
        background: linear-gradient(145deg,#c99a33,#7c5b23);
        border: 1px solid rgba(255,242,182,.78);
        box-shadow: 0 6px 12px rgba(92,65,25,.20);
        font-size: 14px;
        font-weight: 900;
        line-height: 1;
        text-shadow: none
    }

    .journey-stop .stop-copy, .stage-tiny-screen.screen-map .journey-stop .stop-copy {
        grid-row: 1;
        align-self: center;
        justify-self: center;
        width: 104px;
        min-height: 39px;
        margin: 26px 0 0;
        padding: 6px 10px 7px;
        border-radius: 14px;
        background: linear-gradient(180deg,rgba(255,252,239,.97),rgba(244,230,194,.94));
        border: 1px solid rgba(151,108,46,.24);
        box-shadow: 0 8px 14px rgba(97,70,31,.12),inset 0 1px 0 rgba(255,255,255,.72)
    }

    .journey-stop.side-right::after {
        left: calc(50% + 8px)
    }

    .journey-stop.side-left::after {
        right: calc(50% + 8px)
    }

    .journey-stop .map-name {
        font-size: 14px;
        line-height: 1.12
    }

    .journey-stop .map-state {
        font-size: 9px
    }

    .journey-stop, .stage-tiny-screen.screen-map .journey-stop, .stage-tiny-screen.screen-map .journey-stop.side-right, .stage-tiny-screen.screen-map .journey-stop.side-left {
        min-height: 106px;
        grid-template-columns: 92px 34px 92px
    }

        .journey-stop.side-right .stop-copy, .stage-tiny-screen.screen-map .journey-stop.side-right .stop-copy {
            justify-self: start
        }

        .journey-stop.side-left .stop-copy, .stage-tiny-screen.screen-map .journey-stop.side-left .stop-copy {
            justify-self: end
        }

        .journey-stop .stop-copy, .stage-tiny-screen.screen-map .journey-stop .stop-copy {
            width: 98px;
            min-height: 40px;
            margin-top: 24px;
            padding: 6px 9px 7px
        }

        .journey-stop .stop-number, .stage-tiny-screen.screen-map .journey-stop .stop-number {
            width: 27px;
            height: 27px;
            margin-bottom: 36px;
            font-size: 13px
        }

        .journey-stop.side-right .stop-number, .stage-tiny-screen.screen-map .journey-stop.side-right .stop-number {
            justify-self: start;
            margin-left: 8px
        }

        .journey-stop.side-left .stop-number, .stage-tiny-screen.screen-map .journey-stop.side-left .stop-number {
            justify-self: end;
            margin-right: 8px
        }

        .journey-stop.side-right::after {
            left: calc(50% + 3px);
            width: 26px
        }

        .journey-stop.side-left::after {
            right: calc(50% + 3px);
            width: 26px
        }

        .journey-stop.side-right .stop-copy, .journey-stop.side-right .stop-number, .stage-tiny-screen.screen-map .journey-stop.side-right .stop-copy, .stage-tiny-screen.screen-map .journey-stop.side-right .stop-number {
            transform: translateX(-34px)
        }

.screen-map .prophets-cards-panel {
    width: 378px;
    height: calc(var(--stage-runtime-h,932px) - 280px);
    min-height: 620px;
    margin: 10px auto 0;
    overflow: hidden;
    border-radius: 24px;
    background: radial-gradient(circle at 50% -5%,rgba(255,255,255,.80),transparent 132px),radial-gradient(circle at 12% 30%,rgba(72,131,81,.12),transparent 92px),radial-gradient(circle at 88% 76%,rgba(83,145,149,.12),transparent 100px),linear-gradient(180deg,#fbf4e4 0%,#ecdcb5 100%);
    border: 1px solid rgba(147,105,48,.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.62),0 18px 30px rgba(90,65,29,.14)
}

.stage-phone-fill.screen-map .prophets-cards-panel, .stage-condensed-screen.screen-map .prophets-cards-panel, .stage-tiny-screen.screen-map .prophets-cards-panel {
    height: calc(var(--stage-runtime-h,932px) - 280px) !important;
    min-height: 520px
}

.screen-map .prophets-cards-panel::before, .screen-map .prophets-cards-panel::after {
    display: none
}

.screen-map .prophets-cards-panel .map-scroll {
    height: 100%;
    overflow: hidden auto;
    background: transparent
}

.prophet-card-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px 14px 86px
}

.screen-map .prophet-card-list .prophet-card.journey-stop, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.journey-stop, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.journey-stop.side-left {
    position: relative;
    width: 100%;
    min-height: 104px;
    margin: 0;
    padding: 12px;
    display: grid;
    grid-template-columns: 70px minmax(0,1fr) 62px;
    gap: 12px;
    align-items: center;
    justify-items: stretch;
    direction: rtl;
    text-decoration: none;
    border-radius: 20px;
    color: #1b3328;
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 44%),linear-gradient(180deg,rgba(255,252,240,.98),rgba(244,229,193,.96));
    border: 1px solid rgba(151,108,46,.24);
    box-shadow: 0 10px 18px rgba(92,66,30,.12),inset 0 1px 0 rgba(255,255,255,.82);
    transform: none !important;
    opacity: 1;
    filter: none
}

    .screen-map .prophet-card-list .prophet-card.journey-stop::before, .screen-map .prophet-card-list .prophet-card.journey-stop::after {
        display: none
    }

.screen-map .prophet-card-list .card-order {
    grid-column: 3;
    display: grid;
    grid-template-rows: auto auto;
    place-items: center;
    width: 58px;
    height: 64px;
    border-radius: 18px;
    color: #fff7df;
    background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.34),transparent 32%),linear-gradient(145deg,#c99a33,#7c5b23);
    border: 1px solid rgba(255,242,182,.72);
    box-shadow: 0 9px 14px rgba(91,62,23,.16)
}

.screen-map .prophet-card-list .card-order-label {
    order: 1;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    opacity: .90
}

.screen-map .prophet-card-list .prophet-card .stop-number, .screen-map .prophet-card-list .prophet-card.side-right .stop-number, .screen-map .prophet-card-list .prophet-card.side-left .stop-number, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card .stop-number, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-right .stop-number, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-left .stop-number {
    position: static;
    order: 2;
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
    inset: auto;
    display: block;
    width: auto;
    height: auto;
    margin: 2px 0 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
    text-shadow: none;
    transform: none !important
}

.screen-map .prophet-card-list .stop-number::before, .screen-map .prophet-card-list .stop-number::after {
    display: none !important
}

.screen-map .prophet-card-list .prophet-card .stop-copy, .screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .screen-map .prophet-card-list .prophet-card.side-left .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-left .stop-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: stretch;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    display: grid;
    place-items: start;
    gap: 5px;
    text-align: right;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transform: none !important
}

.screen-map .prophet-card-list .map-name {
    color: #193428;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.18;
    text-shadow: 0 1px 0 rgba(255,255,255,.74)
}

.screen-map .prophet-card-list .map-state {
    color: #78694b;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2
}

.screen-map .prophet-card-list .card-action {
    grid-column: 1;
    justify-self: stretch;
    min-width: 56px;
    padding: 9px 8px;
    border-radius: 999px;
    color: #fff9df;
    background: linear-gradient(180deg,#328b5e,#25764f);
    box-shadow: 0 8px 13px rgba(39,101,70,.16);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-align: center
}

.screen-map .prophet-card-list .prophet-card.open {
    border-color: rgba(206,160,56,.45);
    box-shadow: 0 0 0 4px rgba(218,174,63,.10),0 12px 20px rgba(99,70,28,.14),inset 0 1px 0 rgba(255,255,255,.84)
}

    .screen-map .prophet-card-list .prophet-card.open .card-order {
        background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.38),transparent 32%),linear-gradient(145deg,#d9ab3e,#8a621f)
    }

.screen-map .prophet-card-list .prophet-card.completed {
    background: linear-gradient(135deg,rgba(255,255,255,.30),transparent 44%),linear-gradient(180deg,#e9f7df,#d3eabd);
    border-color: rgba(63,135,79,.32)
}

    .screen-map .prophet-card-list .prophet-card.completed .card-order, .screen-map .prophet-card-list .prophet-card.completed .card-action {
        background: linear-gradient(145deg,#4eaa6d,#236744)
    }

.screen-map .prophet-card-list .prophet-card.locked, .screen-map .prophet-card-list .prophet-card.future {
    opacity: .70;
    background: linear-gradient(135deg,rgba(255,255,255,.54),transparent 44%),linear-gradient(180deg,rgba(243,236,217,.96),rgba(222,211,184,.92))
}

    .screen-map .prophet-card-list .prophet-card.locked .card-order, .screen-map .prophet-card-list .prophet-card.future .card-order, .screen-map .prophet-card-list .prophet-card.locked .card-action, .screen-map .prophet-card-list .prophet-card.future .card-action {
        background: linear-gradient(145deg,#b9aa87,#7c705a)
    }

@media (max-width:360px) {
    .screen-map .prophets-cards-panel {
        width: 360px
    }

    .screen-map .prophet-card-list .prophet-card.journey-stop {
        grid-template-columns: 64px minmax(0,1fr) 56px;
        gap: 9px;
        min-height: 98px
    }

    .screen-map .prophet-card-list .map-name {
        font-size: 20px
    }
}

.screen-map {
    background: radial-gradient(circle at 50% 5%,rgba(255,255,255,.76),transparent 126px),radial-gradient(circle at 14% 76%,rgba(73,137,85,.14),transparent 138px),radial-gradient(circle at 86% 34%,rgba(92,151,160,.12),transparent 126px),linear-gradient(180deg,#fbf1da 0%,#ecd5a4 50%,#d6ebcf 100%)
}

    .screen-map::before {
        background: linear-gradient(90deg,rgba(255,255,255,.34),transparent 20%,transparent 80%,rgba(107,74,27,.08)),radial-gradient(circle at 50% 0%,rgba(211,164,67,.16),transparent 32%)
    }

    .screen-map .top-bar {
        width: 378px;
        padding-top: 22px
    }

        .screen-map .top-bar h1 {
            color: #17392d;
            font-size: 25px;
            font-weight: 900;
            letter-spacing: 0;
            text-shadow: 0 1px 0 rgba(255,255,255,.86)
        }

    .screen-map .round-btn {
        width: 46px;
        height: 46px;
        color: #1c7553;
        background: radial-gradient(circle at 35% 25%,rgba(255,255,255,.94),transparent 34%),linear-gradient(180deg,#fffaf0,#f2e4bf);
        border: 1px solid rgba(144,102,39,.18);
        box-shadow: 0 10px 18px rgba(90,65,29,.12),inset 0 1px 0 rgba(255,255,255,.80)
    }

        .screen-map .round-btn.muted {
            color: #197554;
            font-size: 22px
        }

    .screen-map .map-intro {
        width: 378px;
        margin: 10px auto 0;
        padding: 16px 18px 14px;
        border-radius: 24px;
        background: linear-gradient(135deg,rgba(255,255,255,.74),transparent 42%),linear-gradient(180deg,rgba(255,253,244,.96),rgba(247,236,206,.94));
        border: 1px solid rgba(151,108,46,.22);
        box-shadow: 0 14px 24px rgba(89,63,27,.10),inset 0 1px 0 rgba(255,255,255,.78)
    }

        .screen-map .map-intro h2 {
            margin: 0 0 12px;
            color: #17392d;
            font-size: 20px;
            font-weight: 900;
            line-height: 1.35
        }

    .screen-map .map-progress-card {
        gap: 10px
    }

        .screen-map .map-progress-card span {
            color: #8a7650;
            font-size: 11px;
            font-weight: 800
        }

        .screen-map .map-progress-card strong {
            color: #17392d;
            font-size: 15px;
            font-weight: 900
        }

    .screen-map .map-progress-bar {
        height: 9px;
        border-radius: 999px;
        background: rgba(128,100,55,.16);
        box-shadow: inset 0 1px 2px rgba(95,68,27,.08)
    }

        .screen-map .map-progress-bar span {
            background: linear-gradient(90deg,#21764f,#d4a431);
            box-shadow: 0 0 10px rgba(49,128,88,.22)
        }

    .screen-map .prophets-cards-panel {
        margin-top: 12px;
        background: radial-gradient(circle at 50% -3%,rgba(255,255,255,.86),transparent 136px),radial-gradient(circle at 12% 30%,rgba(74,128,83,.12),transparent 94px),radial-gradient(circle at 88% 76%,rgba(86,142,149,.11),transparent 100px),linear-gradient(180deg,#fbf5e6 0%,#eedfba 100%);
        border-color: rgba(143,103,45,.26);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.66),0 18px 32px rgba(90,65,29,.16)
    }

.prophet-card-list {
    gap: 11px;
    padding: 14px 14px 92px
}

.screen-map .prophet-card-list .prophet-card.journey-stop, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left {
    min-height: 100px;
    padding: 11px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 38%),radial-gradient(circle at 14% 20%,rgba(211,164,67,.08),transparent 72px),linear-gradient(180deg,#fffaf0,#f3e8c9);
    border-color: rgba(151,108,46,.22);
    box-shadow: 0 9px 17px rgba(88,63,29,.11),inset 0 1px 0 rgba(255,255,255,.84)
}

    .screen-map .prophet-card-list .prophet-card.journey-stop::before {
        display: block;
        content: "";
        position: absolute;
        inset: 13px auto 13px 10px;
        width: 4px;
        border-radius: 999px;
        background: linear-gradient(180deg,rgba(213,167,67,.90),rgba(36,122,82,.70));
        opacity: .62
    }

.screen-map .prophet-card-list .card-order {
    width: 60px;
    height: 66px;
    border-radius: 17px;
    background: radial-gradient(circle at 34% 23%,rgba(255,255,255,.40),transparent 34%),linear-gradient(145deg,#d5a53b,#8a621f);
    box-shadow: 0 10px 16px rgba(91,62,23,.18)
}

.screen-map .prophet-card-list .card-order-label {
    color: rgba(255,250,226,.92);
    font-size: 10px
}

.screen-map .prophet-card-list .map-name {
    color: #14372b;
    font-size: 22px;
    line-height: 1.12
}

.screen-map .prophet-card-list .map-state {
    color: #83704c;
    font-size: 12px
}

.screen-map .prophet-card-list .card-action {
    align-self: center;
    padding: 10px 9px;
    background: linear-gradient(180deg,#2f8b5e,#22724c);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 13px rgba(39,101,70,.17),inset 0 1px 0 rgba(255,255,255,.18)
}

.screen-map .prophet-card-list .prophet-card.open {
    background: linear-gradient(135deg,rgba(255,255,255,.76),transparent 38%),radial-gradient(circle at 82% 12%,rgba(212,164,49,.14),transparent 78px),linear-gradient(180deg,#fff7dd,#f2dfab)
}

.screen-map .prophet-card-list .prophet-card.completed {
    background: linear-gradient(135deg,rgba(255,255,255,.62),transparent 38%),linear-gradient(180deg,#effbe7,#d7edc4)
}

.screen-map .prophet-card-list .prophet-card.locked, .screen-map .prophet-card-list .prophet-card.future {
    opacity: .74
}

    .screen-map .prophet-card-list .prophet-card.locked .map-name, .screen-map .prophet-card-list .prophet-card.future .map-name {
        color: #3e4b42
    }

.screen-map .bottom-nav {
    background: linear-gradient(180deg,rgba(255,255,255,.90),rgba(250,243,226,.97));
    border-top: 1px solid rgba(139,99,44,.16);
    box-shadow: 0 -12px 22px rgba(84,62,30,.08)
}

    .screen-map .bottom-nav a {
        color: #75694f;
        font-weight: 800
    }

        .screen-map .bottom-nav a.active {
            color: #1e7554
        }

            .screen-map .bottom-nav a.active::after {
                background: #1e7554
            }

.screen-map .prophets-cards-panel {
    background: radial-gradient(circle at 50% -4%,rgba(255,255,255,.88),transparent 138px),linear-gradient(90deg,rgba(42,112,78,.10) 0 46px,transparent 47px),radial-gradient(circle at 90% 76%,rgba(86,142,149,.10),transparent 98px),linear-gradient(180deg,#fbf5e6 0%,#eedfba 100%)
}

    .screen-map .prophets-cards-panel .map-scroll {
        padding: 0
    }

.screen-map .prophet-card-list {
    position: relative;
    gap: 12px;
    padding: 16px 14px 96px 54px
}

    .screen-map .prophet-card-list::before {
        content: "";
        position: absolute;
        z-index: 0;
        top: 42px;
        bottom: 104px;
        left: 28px;
        width: 3px;
        border-radius: 999px;
        background: linear-gradient(180deg,#284235,#caa24a 48%,#2a7a55);
        box-shadow: 0 0 0 3px rgba(255,248,226,.56),0 8px 18px rgba(77,55,25,.16);
        opacity: .78
    }

    .screen-map .prophet-card-list .prophet-card.journey-stop, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left {
        z-index: 1;
        min-height: 96px;
        grid-template-columns: 60px minmax(0,1fr) 62px;
        border-radius: 17px;
        background: linear-gradient(135deg,rgba(255,255,255,.76),transparent 38%),radial-gradient(circle at 10% 20%,rgba(211,164,67,.10),transparent 68px),linear-gradient(180deg,#fffaf0,#f2e4bd)
    }

        .screen-map .prophet-card-list .prophet-card.journey-stop::before {
            display: block;
            content: "";
            position: absolute;
            z-index: 0;
            top: 50%;
            left: -24px;
            width: 24px;
            height: 3px;
            transform: translateY(-50%);
            border-radius: 999px;
            background: linear-gradient(90deg,rgba(42,66,53,.74),rgba(212,164,58,.46));
            box-shadow: 0 2px 5px rgba(80,58,25,.12)
        }

        .screen-map .prophet-card-list .prophet-card.journey-stop::after {
            display: block;
            content: "";
            position: absolute;
            z-index: 3;
            top: 50%;
            left: -34px;
            width: 17px;
            height: 17px;
            transform: translateY(-50%);
            border-radius: 50%;
            background: #17392d;
            border: 3px solid #fff5d9;
            box-shadow: 0 0 0 2px rgba(203,162,77,.42),0 7px 13px rgba(70,50,22,.18)
        }

    .screen-map .prophet-card-list .prophet-card.open::after {
        background: linear-gradient(145deg,#2f8b5e,#1e6848);
        box-shadow: 0 0 0 2px rgba(208,162,56,.52),0 0 18px rgba(47,139,94,.22),0 7px 13px rgba(70,50,22,.18)
    }

    .screen-map .prophet-card-list .prophet-card.completed::after {
        background: linear-gradient(145deg,#d5a63d,#2f8b5e)
    }

    .screen-map .prophet-card-list .prophet-card.locked::after, .screen-map .prophet-card-list .prophet-card.future::after {
        background: #6e6651;
        opacity: .72
    }

    .screen-map .prophet-card-list .card-order {
        width: 58px;
        height: 62px;
        border-radius: 16px
    }

    .screen-map .prophet-card-list .prophet-card .stop-number, .screen-map .prophet-card-list .prophet-card.side-right .stop-number, .screen-map .prophet-card-list .prophet-card.side-left .stop-number {
        font-size: 23px
    }

    .screen-map .prophet-card-list .map-name {
        font-size: 21px
    }

    .screen-map .prophet-card-list .card-action {
        min-width: 58px
    }

    .screen-map .prophet-card-list .prophet-card.journey-stop::after, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right::after, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left::after, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.journey-stop.side-right::after, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.journey-stop.side-left::after {
        left: -34px !important;
        right: auto !important;
        top: 50% !important;
        width: 17px !important;
        height: 17px !important;
        transform: translateY(-50%) !important
    }

    .screen-map .prophet-card-list .prophet-card .stop-number::before, .screen-map .prophet-card-list .prophet-card .stop-number::after, .screen-map .prophet-card-list .prophet-card.side-right .stop-number::before, .screen-map .prophet-card-list .prophet-card.side-right .stop-number::after, .screen-map .prophet-card-list .prophet-card.side-left .stop-number::before, .screen-map .prophet-card-list .prophet-card.side-left .stop-number::after {
        content: none !important;
        display: none !important;
        background: none !important
    }

.screen-map .prophet-card-list {
    padding-left: 54px
}

    .screen-map .prophet-card-list .prophet-card.journey-stop, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left {
        grid-template-columns: 62px minmax(0,1fr)
    }

        .screen-map .prophet-card-list .prophet-card.journey-stop::after, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right::after, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left::after {
            display: none !important
        }

    .screen-map .prophet-card-list .prophet-card .card-order, .screen-map .prophet-card-list .prophet-card.side-right .card-order, .screen-map .prophet-card-list .prophet-card.side-left .card-order {
        position: absolute;
        z-index: 4;
        left: -43px;
        top: 50%;
        width: 34px;
        height: 34px;
        margin: 0;
        display: grid;
        place-items: center;
        border-radius: 50%;
        transform: translateY(-50%);
        color: #fff8df;
        background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.46),transparent 32%),linear-gradient(145deg,#d6a63d,#7c5b22);
        border: 3px solid #fff4d6;
        box-shadow: 0 0 0 2px rgba(203,162,77,.42),0 7px 13px rgba(70,50,22,.18)
    }

    .screen-map .prophet-card-list .prophet-card.open .card-order {
        background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.46),transparent 32%),linear-gradient(145deg,#3a9a68,#1f724e)
    }

    .screen-map .prophet-card-list .prophet-card.completed .card-order {
        background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.42),transparent 32%),linear-gradient(145deg,#d6a63d,#2d8a5b)
    }

    .screen-map .prophet-card-list .prophet-card.locked .card-order, .screen-map .prophet-card-list .prophet-card.future .card-order {
        background: radial-gradient(circle at 34% 22%,rgba(255,255,255,.36),transparent 32%),linear-gradient(145deg,#a79b7d,#6f6651);
        opacity: .88
    }

    .screen-map .prophet-card-list .prophet-card .card-order-label {
        display: none
    }

    .screen-map .prophet-card-list .prophet-card .card-order .stop-number, .screen-map .prophet-card-list .prophet-card.side-right .card-order .stop-number, .screen-map .prophet-card-list .prophet-card.side-left .card-order .stop-number, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card .card-order .stop-number {
        position: static;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        color: inherit;
        background: transparent;
        border: 0;
        box-shadow: none;
        font-size: 18px;
        font-weight: 900;
        line-height: 1;
        transform: none !important
    }

    .screen-map .prophet-card-list .prophet-card .stop-copy, .screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .screen-map .prophet-card-list .prophet-card.side-left .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-left .stop-copy {
        grid-column: 2
    }

    .screen-map .prophet-card-list .card-action {
        grid-column: 1
    }

.screen-map .prophets-cards-panel {
    background: radial-gradient(circle at 52% -4%,rgba(255,255,255,.88),transparent 136px),radial-gradient(circle at 12% 35%,rgba(49,121,84,.08),transparent 108px),radial-gradient(circle at 90% 78%,rgba(86,142,149,.09),transparent 104px),linear-gradient(180deg,#fbf5e6 0%,#f4e8c8 48%,#eedfba 100%)
}

.screen-map .prophet-card-list::before {
    left: 29px;
    width: 4px;
    background: linear-gradient(180deg,rgba(33,92,67,.70),rgba(202,162,74,.76) 50%,rgba(33,92,67,.70));
    box-shadow: 0 0 0 4px rgba(255,249,231,.62),0 8px 18px rgba(77,55,25,.13)
}

.screen-map .prophet-card-list .prophet-card.journey-stop, .screen-map .prophet-card-list .prophet-card.journey-stop.side-right, .screen-map .prophet-card-list .prophet-card.journey-stop.side-left {
    background: linear-gradient(135deg,rgba(255,255,255,.72),transparent 38%),radial-gradient(circle at 8% 24%,rgba(45,119,82,.055),transparent 74px),linear-gradient(180deg,rgba(255,250,239,.90),rgba(244,232,199,.88));
    border-color: rgba(148,108,51,.20);
    box-shadow: 0 9px 17px rgba(88,63,29,.10),inset 0 1px 0 rgba(255,255,255,.72)
}

    .screen-map .prophet-card-list .prophet-card.journey-stop::before {
        left: -23px;
        width: 23px;
        background: linear-gradient(90deg,rgba(45,91,68,.42),rgba(203,162,74,.34))
    }

.screen-map .prophet-card-list .prophet-card .card-order, .screen-map .prophet-card-list .prophet-card.side-right .card-order, .screen-map .prophet-card-list .prophet-card.side-left .card-order {
    left: -45px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-align: center;
    line-height: 0;
    color: #fff8df;
    background: radial-gradient(circle at 31% 21%,rgba(255,255,255,.48),transparent 31%),linear-gradient(145deg,#d9ab3e,#806023);
    border: 3px solid #fff5d9;
    box-shadow: 0 0 0 2px rgba(203,162,77,.40),0 8px 15px rgba(72,50,21,.18),inset 0 1px 0 rgba(255,255,255,.22)
}

.screen-map .prophet-card-list .prophet-card.open .card-order {
    background: radial-gradient(circle at 31% 21%,rgba(255,255,255,.50),transparent 31%),linear-gradient(145deg,#45a572,#1f7450)
}

.screen-map .prophet-card-list .prophet-card.completed .card-order {
    background: radial-gradient(circle at 31% 21%,rgba(255,255,255,.45),transparent 31%),linear-gradient(145deg,#d9ab3e,#2b895b)
}

.screen-map .prophet-card-list .prophet-card.locked .card-order, .screen-map .prophet-card-list .prophet-card.future .card-order {
    background: radial-gradient(circle at 31% 21%,rgba(255,255,255,.38),transparent 31%),linear-gradient(145deg,#aa9d7c,#6f6651)
}

.screen-map .prophet-card-list .prophet-card .card-order .stop-number, .screen-map .prophet-card-list .prophet-card.side-right .card-order .stop-number, .screen-map .prophet-card-list .prophet-card.side-left .card-order .stop-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 18px;
    line-height: 1;
    text-align: center;
    transform: translateY(1px) !important
}

.screen-map .prophet-card-list .card-symbol {
    position: absolute;
    z-index: 2;
    left: 14px;
    top: 50%;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 0;
    transform: translateY(-50%);
    color: #216f51;
    background: transparent;
    border: 0;
    box-shadow: none
}

    .screen-map .prophet-card-list .card-symbol::before {
        content: none
    }

    .screen-map .prophet-card-list .card-symbol .icon-svg {
        width: 50px;
        height: 50px;
        opacity: .86;
        fill: none;
        stroke: currentColor;
        stroke-width: 3.4;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.screen-map .prophet-card-list .card-symbol-img {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    display: block;
    object-fit: contain
}

.screen-map .prophet-card-list .prophet-card.open .card-symbol {
    color: #1d7652;
    background: transparent;
    border-color: transparent;
    box-shadow: none
}

.screen-map .prophet-card-list .prophet-card.completed .card-symbol {
    color: #1d7652;
    background: transparent;
    border-color: transparent;
    box-shadow: none
}

.screen-map .prophet-card-list .prophet-card.locked .card-symbol, .screen-map .prophet-card-list .prophet-card.future .card-symbol {
    color: #7a7158;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    opacity: .78
}

.screen-map .prophet-card-list .prophet-card .stop-copy, .screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .screen-map .prophet-card-list .prophet-card.side-left .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-right .stop-copy, .stage-tiny-screen.screen-map .prophet-card-list .prophet-card.side-left .stop-copy {
    padding-left: 54px
}

.screen-question {
    background: linear-gradient(180deg,rgba(255,253,246,.92) 0%,rgba(241,232,203,.88) 38%,rgba(214,235,211,.94) 100%),repeating-linear-gradient(135deg,rgba(118,89,44,.035) 0 1px,transparent 1px 18px),linear-gradient(180deg,#fbf5e6 0%,#f2e2bd 48%,#d7ead2 100%)
}

    .screen-question::before {
        background: linear-gradient(90deg,rgba(255,255,255,.46),transparent 18%,transparent 82%,rgba(76,55,25,.08)),repeating-linear-gradient(0deg,transparent 0 32px,rgba(130,93,38,.028) 32px 33px)
    }

    .screen-question::after {
        content: "";
        position: absolute;
        z-index: 0;
        inset: 104px 22px 28px;
        border: 1px solid rgba(157,118,52,.14);
        border-radius: 28px;
        background: transparent;
        box-shadow: none;
        pointer-events: none
    }

    .screen-question .top-bar {
        grid-template-columns: 46px 1fr 46px;
        padding: max(22px,calc(env(safe-area-inset-top,0) + 14px)) 22px 10px;
        gap: 10px
    }

        .screen-question .top-bar::after {
            content: none
        }

    .screen-question .question-head {
        min-height: 46px;
        padding: 4px 12px 6px;
        border-radius: 18px;
        background: linear-gradient(180deg,rgba(255,253,246,.94),rgba(244,233,205,.88));
        border: 1px solid rgba(197,155,54,.24);
        box-shadow: 0 10px 20px rgba(68,52,24,.10),inset 0 1px 0 rgba(255,255,255,.82)
    }

        .screen-question .question-head h1 {
            color: #1f6546;
            font-family: "QuizCalibri","CairoLocal",Tahoma,Arial,sans-serif;
            font-size: 26px;
            font-weight: 700;
            line-height: 1.18;
            text-shadow: 0 1px 0 rgba(255,255,255,.70)
        }

    .screen-question .round-btn {
        position: relative;
        width: 46px;
        height: 46px;
        overflow: hidden;
        color: #1f6b49;
        background: radial-gradient(circle at 32% 22%,rgba(255,255,255,.98) 0 8px,transparent 9px),linear-gradient(180deg,rgba(255,253,246,.98),rgba(240,228,196,.94));
        border: 1px solid rgba(178,132,48,.34);
        border-radius: 16px;
        box-shadow: 0 12px 20px rgba(70,51,22,.14),0 0 0 4px rgba(255,250,232,.36),inset 0 1px 0 rgba(255,255,255,.88),inset 0 -3px 0 rgba(197,155,54,.10);
        transition: transform .16s ease,box-shadow .18s ease
    }

        .screen-question .round-btn::before {
            content: "";
            position: absolute;
            inset: 5px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.68);
            pointer-events: none
        }

        .screen-question .round-btn:not(.muted)::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 16px;
            width: 12px;
            height: 12px;
            border-top: 3px solid currentColor;
            border-right: 3px solid currentColor;
            border-radius: 1px;
            transform: translateY(-50%) rotate(45deg)
        }

        .screen-question .round-btn:not(.muted)::before {
            box-shadow: inset 0 0 0 1px rgba(197,155,54,.08),inset -13px 0 20px rgba(47,108,67,.045)
        }

        .screen-question .round-btn:not(.muted) {
            font-size: 0
        }

            .screen-question .round-btn:not(.muted):active {
                transform: translateY(1px) scale(.985)
            }

    .screen-question .home-shortcut::after {
        content: none
    }

    .screen-question .home-shortcut-icon {
        position: relative;
        z-index: 1;
        width: 23px;
        height: 23px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.35;
        stroke-linecap: round;
        stroke-linejoin: round
    }

    .screen-question .round-btn.muted {
        color: #8b6b2e;
        font-size: 21px
    }

    .screen-question .question-card {
        width: 374px;
        min-height: 222px;
        height: 222px;
        margin-top: 12px;
        padding: 22px 22px 24px;
        border-radius: 26px;
        border: 1px solid rgba(153,112,48,.22);
        background: linear-gradient(90deg,rgba(196,148,62,.08),transparent 18%,transparent 82%,rgba(196,148,62,.08)),linear-gradient(180deg,rgba(255,254,248,.98),rgba(249,241,221,.96));
        box-shadow: 0 18px 34px rgba(61,45,23,.15),inset 0 1px 0 rgba(255,255,255,.88),inset 0 0 0 7px rgba(255,250,231,.46)
    }

        .screen-question .question-card::before, .screen-question .question-card::after {
            content: "";
            position: absolute;
            left: 46px;
            right: 46px;
            height: 7px;
            border-radius: 999px;
            background: linear-gradient(90deg,transparent,rgba(197,155,54,.62) 32%,rgba(47,108,67,.55) 50%,rgba(197,155,54,.62) 68%,transparent);
            filter: none;
            pointer-events: none
        }

        .screen-question .question-card::before {
            top: 13px
        }

        .screen-question .question-card::after {
            bottom: 13px
        }

        .screen-question .question-card h2 {
            color: #213f31;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.72;
            text-align: center;
            text-wrap: balance
        }

    .screen-question .option-grid {
        width: 374px;
        gap: 13px;
        margin-top: 15px
    }

    .screen-question .option-btn {
        min-height: 74px;
        padding: 12px 68px 12px 20px;
        border-radius: 20px;
        border: 1px solid rgba(60,110,75,.20);
        color: #213f31;
        background: linear-gradient(90deg,rgba(47,108,67,.045),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.98),rgba(249,241,221,.97));
        box-shadow: 0 10px 18px rgba(70,52,24,.11),inset 0 1px 0 rgba(255,255,255,.88)
    }

        .screen-question .option-btn::after {
            content: "";
            position: absolute;
            inset: 6px;
            border-radius: 16px;
            border: 1px solid rgba(255,255,255,.62);
            pointer-events: none
        }

        .screen-question .option-btn:active {
            transform: translateY(1px) scale(.988)
        }

        .screen-question .option-btn span:last-child {
            direction: rtl;
            unicode-bidi: plaintext;
            overflow-wrap: anywhere
        }

    .screen-question .option-letter {
        right: 13px;
        width: 44px;
        height: 44px;
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #1f6546;
        background: linear-gradient(180deg,rgba(255,253,246,.98),rgba(238,224,188,.96));
        border: 1px solid rgba(197,155,54,.38);
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 0;
        font-weight: 800;
        line-height: 1;
        box-shadow: 0 7px 13px rgba(85,59,24,.13),inset 0 1px 0 rgba(255,255,255,.86),inset 0 -2px 0 rgba(197,155,54,.10)
    }

        .screen-question .option-letter::before {
            content: "";
            display: block;
            color: inherit;
            font-family: "CairoLocal",Tahoma,Arial,sans-serif;
            font-size: 20px;
            font-weight: 800;
            line-height: 1
        }

    .screen-question .option-grid .option-btn:nth-child(1) .option-letter::before {
        content: "أ";
        transform: translateY(-1px)
    }

    .screen-question .option-grid .option-btn:nth-child(2) .option-letter::before {
        content: "ب";
        transform: translateY(-2px)
    }

    .screen-question .option-grid .option-btn:nth-child(3) .option-letter::before {
        content: "ج";
        transform: translateY(-1px)
    }

    .screen-question .option-grid .option-btn:nth-child(4) .option-letter::before {
        content: "د";
        transform: translateY(-1px)
    }

    .screen-question .option-btn.is-correct .option-letter {
        color: #fff;
        background: linear-gradient(180deg,#4ca86c,#237749);
        border-color: rgba(255,255,255,.74)
    }

    .screen-question .option-btn.is-wrong .option-letter {
        color: #fff8df;
        background: linear-gradient(180deg,#cda24a,#8a6127);
        border-color: rgba(255,255,255,.70)
    }

    .screen-question .option-btn.is-selected:not(.is-correct):not(.is-wrong) {
        border-color: rgba(197,155,54,.62);
        box-shadow: 0 0 0 4px rgba(197,155,54,.13),0 12px 22px rgba(72,58,30,.13),inset 0 1px 0 rgba(255,255,255,.82)
    }

    .screen-question .option-btn.is-correct {
        border-color: rgba(33,133,72,.52);
        background: linear-gradient(90deg,rgba(47,127,72,.09),transparent 32%),linear-gradient(180deg,rgba(237,251,239,.98),rgba(211,241,217,.98))
    }

    .screen-question .option-btn.is-wrong {
        border-color: rgba(197,155,54,.58);
        background: linear-gradient(90deg,rgba(197,155,54,.10),transparent 32%),linear-gradient(180deg,rgba(255,249,229,.98),rgba(244,225,170,.98))
    }

    .screen-question .answer-modal {
        padding: max(18px,env(safe-area-inset-top,0)) 24px max(18px,env(safe-area-inset-bottom,0))
    }

    .screen-question .answer-modal-backdrop {
        background: linear-gradient(180deg,rgba(24,35,27,.48),rgba(24,35,27,.40))
    }

    .screen-question .answer-dialog {
        max-width: 366px;
        gap: 13px;
        padding: 28px 22px 22px;
        border-radius: 28px;
        border: 1px solid rgba(153,112,48,.24);
        background: linear-gradient(90deg,rgba(197,155,54,.08),transparent 20%,transparent 80%,rgba(197,155,54,.08)),linear-gradient(180deg,rgba(255,254,248,.99),rgba(247,238,215,.98));
        box-shadow: 0 24px 48px rgba(35,29,18,.30),inset 0 1px 0 rgba(255,255,255,.84),inset 0 0 0 7px rgba(255,250,231,.44)
    }

        .screen-question .answer-dialog::before, .screen-question .answer-dialog::after {
            content: "";
            position: absolute;
            left: 40px;
            right: 40px;
            height: 1px;
            background: linear-gradient(90deg,transparent,rgba(197,155,54,.62),transparent)
        }

        .screen-question .answer-dialog::before {
            top: 17px
        }

        .screen-question .answer-dialog::after {
            bottom: 17px
        }

    .screen-question .answer-symbol {
        position: relative;
        width: 92px;
        height: 92px;
        overflow: hidden;
        border: 4px solid rgba(255,249,229,.76);
        font-size: 0;
        box-shadow: 0 13px 24px rgba(47,75,50,.18),inset 0 2px 0 rgba(255,255,255,.30)
    }

        .screen-question .answer-symbol::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            display: block
        }

    .screen-question .answer-correct .answer-symbol::before {
        width: 29px;
        height: 49px;
        border-right: 8px solid #fff;
        border-bottom: 8px solid #fff;
        border-radius: 5px;
        transform: translate(-50%,-58%) rotate(42deg);
        filter: drop-shadow(0 2px 0 rgba(27,94,56,.18))
    }

    .screen-question .answer-wrong .answer-symbol::before {
        content: "؟";
        color: #fff8df;
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 58px;
        font-weight: 900;
        line-height: 1;
        transform: translate(-50%,-55%);
        text-shadow: 0 2px 0 rgba(97,67,22,.18)
    }

    .screen-question .answer-dialog h2 {
        color: #1f6546;
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 29px;
        font-weight: 800
    }

        .screen-question .answer-dialog h2::after {
            content: "";
            display: block;
            width: 168px;
            height: 7px;
            margin: 12px auto 0;
            border-radius: 999px;
            background: radial-gradient(circle at 50% 50%,#c59b36 0 3px,transparent 3.7px),linear-gradient(90deg,transparent,rgba(197,155,54,.76) 24%,rgba(47,108,67,.68) 50%,rgba(197,155,54,.76) 76%,transparent);
            box-shadow: 0 1px 0 rgba(255,255,255,.78)
        }

    .screen-question .answer-correct-box, .screen-question .answer-explain {
        border-radius: 20px;
        padding: 16px 17px
    }

    .screen-question .answer-correct-box {
        background: linear-gradient(180deg,rgba(235,249,238,.94),rgba(218,241,222,.90))
    }

    .screen-question .answer-explain {
        min-height: 174px;
        max-height: clamp(240px,38vh,350px);
        background: linear-gradient(180deg,rgba(255,251,238,.94),rgba(242,232,204,.88));
        border-color: rgba(153,112,48,.20)
    }

    .screen-question .answer-correct .answer-correct-box {
        display: none
    }

    .screen-question .answer-correct .answer-dialog {
        grid-template-rows: auto auto minmax(0,1fr) auto
    }

    .screen-question .answer-correct .answer-explain {
        min-height: 270px;
        max-height: clamp(330px,52vh,470px)
    }

    .screen-question .answer-wrong .answer-explain {
        display: none
    }

    .screen-question .answer-explain span {
        margin-bottom: 10px;
        color: #1f6546;
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 16px;
        font-weight: 800;
        text-align: center
    }

    .screen-question .answer-explain strong {
        color: #263f31;
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 19px;
        line-height: 1.9
    }

    .screen-question .answer-correct-box strong {
        font-family: "CairoLocal",Tahoma,Arial,sans-serif;
        font-size: 22px;
        font-weight: 800;
        line-height: 1.7
    }

    .screen-question .answer-dialog .primary-btn {
        min-height: 58px;
        border-radius: 18px
    }

    .screen-question .level-unlock-panel {
        background: linear-gradient(180deg,rgba(255,253,244,.55),rgba(224,240,218,.86)),repeating-linear-gradient(135deg,rgba(118,89,44,.030) 0 1px,transparent 1px 18px)
    }

.stage-condensed-screen.screen-question .top-bar {
    padding-top: max(18px,calc(env(safe-area-inset-top,0) + 12px))
}

.stage-condensed-screen.screen-question .question-card {
    min-height: 198px;
    height: 198px;
    margin-top: 9px;
    padding: 19px 18px 21px
}

    .stage-condensed-screen.screen-question .question-card h2 {
        font-size: 26px;
        line-height: 1.62
    }

.stage-condensed-screen.screen-question .option-grid {
    gap: 11px;
    margin-top: 12px
}

.stage-condensed-screen.screen-question .option-btn {
    min-height: 68px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 18px
}

.stage-tiny-screen.screen-question .top-bar {
    padding-top: max(14px,calc(env(safe-area-inset-top,0) + 9px));
    padding-bottom: 7px
}

.stage-tiny-screen.screen-question .question-head {
    min-height: 42px
}

    .stage-tiny-screen.screen-question .question-head h1 {
        font-size: 23px
    }

.stage-tiny-screen.screen-question .question-card {
    width: 366px;
    min-height: 176px;
    height: 176px;
    margin-top: 7px;
    padding: 17px 16px 19px
}

    .stage-tiny-screen.screen-question .question-card h2 {
        font-size: 24px;
        line-height: 1.52
    }

.stage-tiny-screen.screen-question .option-grid {
    width: 366px;
    gap: 9px;
    margin-top: 10px
}

.stage-tiny-screen.screen-question .option-btn {
    min-height: 61px;
    padding: 8px 59px 8px 14px;
    font-size: 17px;
    line-height: 1.45
}

.stage-tiny-screen.screen-question .option-letter {
    width: 40px;
    height: 40px;
    right: 12px;
    border-radius: 13px;
    font-size: 0
}

    .stage-tiny-screen.screen-question .option-letter::before {
        font-size: 18px
    }

.stage-tiny-screen.screen-question .answer-dialog {
    max-width: 360px;
    gap: 10px;
    padding: 24px 18px 20px
}

.stage-tiny-screen.screen-question .answer-symbol {
    width: 80px;
    height: 80px;
    font-size: 0
}

.stage-tiny-screen.screen-question .answer-correct .answer-symbol::before {
    width: 25px;
    height: 42px;
    border-right-width: 7px;
    border-bottom-width: 7px
}

.stage-tiny-screen.screen-question .answer-wrong .answer-symbol::before {
    font-size: 50px
}

.stage-tiny-screen.screen-question .answer-dialog h2 {
    font-size: 25px
}

.stage-tiny-screen.screen-question .answer-explain strong {
    font-size: 18px;
    line-height: 1.82
}

.stage-tiny-screen.screen-question .answer-explain {
    min-height: 142px;
    max-height: 260px
}

.stage-tiny-screen.screen-question .answer-correct .answer-explain {
    min-height: 230px;
    max-height: 390px
}
.home-about-toggle {
    position: absolute;
    top: max(18px, calc(env(safe-area-inset-top,0) + 12px));
    right: 18px;
    z-index: 4;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(197,155,54,.36);
    border-radius: 17px;
    color: #24543b;
    background: #fbf2de;
    box-shadow: 0 12px 24px rgba(72,52,22,.13), inset 0 1px 0 rgba(255,255,255,.82);
    cursor: pointer;
}

    .home-about-toggle span {
        font-size: 27px;
        font-weight: 800;
        line-height: 1;
    }