:root {
            --bg: #040812;
            --bg2: #09101d;
            --panel: rgba(10, 15, 28, .78);
            --panel-2: rgba(255, 255, 255, .05);
            --gold: #d4a843;
            --gold-2: #f5d96a;
            --gold-3: #8a6010;
            --emerald: #10b981;
            --violet: #9b59b6;
            --red: #ef4444;
            --blue: #60a5fa;
            --text: #ffffff;
            --muted: rgba(255, 255, 255, .74);
            --dim: rgba(255, 255, 255, .34);
            --line: rgba(212, 168, 67, .18);
            --line-strong: rgba(212, 168, 67, .42);
            --shadow: 0 18px 60px rgba(0, 0, 0, .42);
            --radius: 24px;
            --ff: 'Cairo', sans-serif;
            --fd: 'Amiri', serif;
            --fe: 'Nunito', sans-serif;
        }

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

        html {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
            background: radial-gradient(circle at top, #0d1a34 0%, #040812 45%, #02050c 100%);
            color: var(--text);
            font-family: var(--ff);
            -webkit-tap-highlight-color: transparent;
            user-select: none;
            direction: ltr
        }

        body {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: hidden;
            direction: ltr
        }

        * {
            scrollbar-width: thin;
            scrollbar-color: rgba(212, 168, 67, .42) transparent
        }

        *::-webkit-scrollbar {
            width: 10px;
            height: 10px
        }

        *::-webkit-scrollbar-track {
            background: transparent
        }

        *::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, rgba(212, 168, 67, .75), rgba(169, 112, 10, .8));
            border-radius: 999px
        }

        button {
            font: inherit
        }

        #bg,
        #fx {
            position: fixed;
            inset: 0;
            display: block
        }

        #bg {
            z-index: 0
        }

        #fx {
            z-index: 30;
            pointer-events: none
        }

        .screen {
            position: fixed;
            inset: 0;
            z-index: 10;
            display: flex;
            flex-direction: column;
            opacity: 0;
            pointer-events: none;
            transition: opacity .35s ease;
            overflow-x: hidden;
            overflow-y: hidden;
            direction: ltr
        }

        .screen>* {
            direction: rtl
        }

        html.en .screen>* {
            direction: ltr
        }

        .screen.on {
            opacity: 1;
            pointer-events: auto;
            overflow-y: auto
        }

        .glass {
            background: var(--panel);
            backdrop-filter: blur(16px);
            border: 1px solid var(--line);
            box-shadow: var(--shadow)
        }

        .hidden {
            display: none !important
        }

        @keyframes floatY {

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

            50% {
                transform: translateY(-10px)
            }
        }

        @keyframes glowPulse {

            0%,
            100% {
                box-shadow: 0 0 18px rgba(212, 168, 67, .24), 0 0 42px rgba(212, 168, 67, .08)
            }

            50% {
                box-shadow: 0 0 28px rgba(212, 168, 67, .48), 0 0 80px rgba(212, 168, 67, .14)
            }
        }

        @keyframes rise {
            from {
                transform: translateY(14px);
                opacity: 0
            }

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

        @keyframes pop {
            0% {
                transform: scale(.8);
                opacity: 0
            }

            70% {
                transform: scale(1.05);
                opacity: 1
            }

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

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0)
            }

            20% {
                transform: translateX(-5px)
            }

            40% {
                transform: translateX(5px)
            }

            60% {
                transform: translateX(-4px)
            }

            80% {
                transform: translateX(4px)
            }
        }

        @keyframes shimmer {
            0% {
                background-position: -200% center
            }

            100% {
                background-position: 200% center
            }
        }

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

            50% {
                transform: translate3d(-.6%, .6%, 0) scale(1.01)
            }

            100% {
                transform: translate3d(0, 0, 0) scale(1)
            }
        }

        @keyframes lanternCorePulse {

            0%,
            100% {
                opacity: .88;
                box-shadow:
                    inset 0 0 24px rgba(255, 224, 148, .52),
                    0 0 22px rgba(242, 195, 86, .26)
            }

            50% {
                opacity: 1;
                box-shadow:
                    inset 0 0 34px rgba(255, 228, 155, .7),
                    0 0 34px rgba(242, 195, 86, .38)
            }
        }

        .top-controls {
            position: fixed;
            top: 14px;
            left: 50%;
            right: auto;
            width: calc(100% - 14px);
            max-width: none;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            gap: 12px;
            pointer-events: none
        }

        .top-controls>* {
            pointer-events: auto
        }

        .nq-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1
        }

        .inline-fa {
            margin-inline-end: 7px;
            font-size: .95em
        }

        .icon-gold {
            color: var(--gold-2)
        }

        .icon-emerald {
            color: #6ee7b7
        }

        .icon-sky {
            color: #7dd3fc
        }

        .icon-rose {
            color: #fb7185
        }

        .icon-orange {
            color: #fb923c
        }

        .icon-flask {
            color: #93c5fd
        }

        .icon-violet {
            color: #c4b5fd
        }

        .icon-dim {
            color: var(--muted)
        }

        .icon-soft-light {
            color: #d2ffe6
        }

        .top-actions {
            display: flex;
            gap: 8px
        }

        .langbar,
        .backbtn,
        .startbtn {
            display: flex;
            align-items: center;
            gap: 6px;
            background: rgba(0, 0, 0, .42);
            backdrop-filter: blur(12px);
            border: 1px solid var(--line);
            border-radius: 999px;
            padding: 6px
        }

        .langbar button,
        .backbtn button,
        .startbtn button {
            border: none;
            background: none;
            color: var(--muted);
            padding: 8px 13px;
            border-radius: 999px;
            cursor: pointer;
            font-weight: 800;
            font-size: 12px;
            transition: .2s;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        .langbar button.active {
            background: linear-gradient(135deg, var(--gold), #a9700a);
            color: #071019
        }

        .startbtn button {
            background: linear-gradient(135deg, var(--gold), #a9700a);
            color: #071019;
            font-weight: 900
        }

        #title {
            align-items: stretch;
            justify-content: flex-start;
            padding: 84px 20px 28px
        }

        .home-shell {
            width: min(1120px, 100%);
            margin: 0 auto;
            display: grid;
            gap: 18px
        }

        .home-section {
            width: 100%
        }

        .home-hero {
            position: relative;
            min-height: calc(100vh - 120px);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            border-radius: 28px;
            overflow: hidden
        }

        .home-hero::before,
        .home-hero::after {
            content: "";
            position: absolute;
            pointer-events: none
        }

        .home-hero::before {
            inset: 0;
            background:
                radial-gradient(circle at 50% 30%, rgba(212, 168, 67, .12), transparent 56%),
                radial-gradient(circle at 18% 76%, rgba(96, 165, 250, .11), transparent 52%),
                radial-gradient(circle at 82% 80%, rgba(16, 185, 129, .09), transparent 54%)
        }

        .home-hero::after {
            inset: 14px;
            border-radius: 24px;
            border: 1px solid rgba(212, 168, 67, .12)
        }

        .hero {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 980px;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            animation: rise .7s ease
        }

        .purpose-section {
            position: relative;
            border-radius: 24px;
            padding: 22px;
            display: grid;
            gap: 12px;
            text-align: center;
            overflow: hidden
        }

        .purpose-section::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                linear-gradient(130deg, rgba(255, 236, 179, .08), transparent 45%),
                radial-gradient(circle at 12% 18%, rgba(212, 168, 67, .14), transparent 46%)
        }

        .purpose-section::after {
            content: "";
            position: absolute;
            inset: 10px;
            border-radius: 18px;
            border: 1px solid rgba(212, 168, 67, .14)
        }

        .purpose-kicker,
        .purpose-title,
        .purpose-section .mission-card {
            position: relative;
            z-index: 1
        }

        .purpose-kicker {
            color: rgba(255, 223, 146, .92);
            letter-spacing: .22em;
            text-transform: uppercase;
            font-size: 11px;
            font-weight: 800
        }

        .purpose-title {
            font-size: 30px;
            font-weight: 900;
            line-height: 1.2
        }

        .lantern-wrap {
            position: relative;
            width: 210px;
            height: 270px;
            animation: floatY 6s ease-in-out infinite
        }

        .lantern-wrap::before,
        .lantern-wrap::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none
        }

        .lantern-wrap::before {
            inset: 22px -20px 6px;
            border: 1px solid rgba(212, 168, 67, .16)
        }

        .lantern-wrap::after {
            inset: 6px -38px -12px;
            border: 1px solid rgba(212, 168, 67, .1)
        }

        .lantern-handle {
            position: absolute;
            top: -2px;
            left: 50%;
            width: 96px;
            height: 56px;
            transform: translateX(-50%);
            border: 3px solid rgba(247, 223, 161, .94);
            border-bottom: none;
            border-radius: 76px 76px 0 0;
            background: linear-gradient(180deg, rgba(255, 242, 199, .14), rgba(147, 100, 17, .18));
            box-shadow:
                inset 0 0 0 1px rgba(123, 85, 24, .46),
                0 8px 18px rgba(212, 168, 67, .24)
        }

        .lantern-handle::before,
        .lantern-handle::after {
            content: "";
            position: absolute
        }

        .lantern-handle::before {
            top: 8px;
            left: 50%;
            width: 60px;
            height: 34px;
            transform: translateX(-50%);
            border: 2px solid rgba(255, 231, 170, .55);
            border-bottom: none;
            border-radius: 56px 56px 0 0
        }

        .lantern-handle::after {
            top: -8px;
            left: 50%;
            width: 24px;
            height: 12px;
            transform: translateX(-50%);
            border-radius: 999px;
            border: 1px solid rgba(255, 229, 166, .7);
            background: linear-gradient(180deg, rgba(250, 229, 168, .96), rgba(171, 121, 28, .88));
            box-shadow: 0 4px 10px rgba(212, 168, 67, .32)
        }

        .lantern-neck {
            position: absolute;
            top: 45px;
            left: 50%;
            width: 84px;
            height: 22px;
            transform: translateX(-50%);
            border-radius: 999px;
            background:
                linear-gradient(180deg, rgba(247, 226, 168, .9), rgba(160, 112, 17, .84));
            border: 2px solid rgba(250, 223, 156, .72);
            box-shadow:
                0 5px 14px rgba(212, 168, 67, .24),
                inset 0 1px 2px rgba(255, 237, 194, .5)
        }

        .lantern-neck::before,
        .lantern-neck::after {
            content: "";
            position: absolute;
            top: -16px;
            width: 8px;
            height: 18px;
            border-radius: 6px;
            border: 1px solid rgba(255, 227, 162, .66);
            background: linear-gradient(180deg, rgba(247, 224, 163, .92), rgba(162, 113, 20, .88))
        }

        .lantern-neck::before {
            left: 12px
        }

        .lantern-neck::after {
            right: 12px
        }

        .lantern-frame {
            position: absolute;
            top: 56px;
            left: 50%;
            width: 152px;
            height: 198px;
            transform: translateX(-50%);
            border-radius: 30px;
            border: 3px solid rgba(250, 222, 157, .92);
            background:
                radial-gradient(circle at 50% 36%, rgba(242, 203, 98, .62) 0, rgba(242, 203, 98, .06) 54%, transparent 72%),
                linear-gradient(180deg, rgba(255, 243, 204, .18), rgba(239, 189, 70, .32) 52%, rgba(92, 57, 8, .86));
            box-shadow:
                inset 0 0 22px rgba(255, 229, 165, .4),
                0 0 54px rgba(212, 168, 67, .34)
        }

        .lantern-frame::before,
        .lantern-frame::after {
            content: "";
            position: absolute
        }

        .lantern-frame::before {
            inset: 14px;
            border-radius: 20px;
            border: 2px solid rgba(255, 229, 167, .42);
            background:
                radial-gradient(circle at 50% 44%, rgba(250, 211, 110, .3), rgba(250, 211, 110, .05) 54%, transparent 74%);
            box-shadow:
                inset 0 0 14px rgba(255, 229, 167, .22),
                inset 0 -16px 22px rgba(76, 44, 5, .24)
        }

        .lantern-frame::after {
            inset: 42px 24px 18px;
            border-radius: 12px;
            border-top: 2px solid rgba(255, 227, 164, .48);
            border-bottom: 2px solid rgba(255, 227, 164, .34)
        }

        .lantern-core {
            position: absolute;
            top: 98px;
            left: 50%;
            width: 88px;
            height: 118px;
            transform: translateX(-50%);
            border-radius: 14px;
            border: 1.6px solid rgba(255, 230, 170, .46);
            background:
                radial-gradient(circle at 50% 46%, rgba(255, 228, 150, .9) 0%, rgba(247, 196, 83, .48) 35%, rgba(247, 196, 83, .14) 66%, rgba(247, 196, 83, 0) 100%),
                linear-gradient(180deg, rgba(255, 241, 204, .14), rgba(87, 52, 8, .08));
            box-shadow:
                inset 0 0 24px rgba(255, 224, 148, .52),
                0 0 22px rgba(242, 195, 86, .26);
            animation: lanternCorePulse 3.2s ease-in-out infinite;
            pointer-events: none
        }

        .lantern-glow {
            position: absolute;
            left: 50%;
            bottom: 12px;
            width: 232px;
            height: 232px;
            transform: translateX(-50%);
            border-radius: 50%;
            background: radial-gradient(circle, rgba(243, 208, 118, .76) 0%, rgba(243, 208, 118, .12) 44%, rgba(243, 208, 118, 0) 72%);
            filter: blur(10px);
            pointer-events: none
        }

        .kicker {
            display: flex;
            align-items: center;
            gap: 10px;
            color: rgba(212, 168, 67, .54);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .35em;
            text-transform: uppercase
        }

        .kicker::before,
        .kicker::after {
            content: "";
            width: 68px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(212, 168, 67, .42), transparent)
        }

        .logo {
            font-family: var(--fd);
            font-size: clamp(5rem, 16vw, 10rem);
            line-height: .9;
            background: linear-gradient(180deg, #fff2b8 0%, #d4a843 50%, #7b580d 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            filter: drop-shadow(0 0 32px rgba(212, 168, 67, .28))
        }

        html.en .logo {
            font-family: var(--fe);
            font-size: clamp(4rem, 11vw, 6rem);
            font-weight: 900;
            letter-spacing: .06em
        }

        .subtitle {
            font-size: 15px;
            color: rgba(212, 168, 67, .68);
            letter-spacing: .18em;
            text-transform: uppercase
        }

        .chip-row {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center
        }

        .chip {
            padding: 10px 16px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            color: var(--muted);
            font-size: 12px;
            font-weight: 700
        }

        .cta-wrap {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: center
        }

        .cta,
        .ghost {
            border: none;
            cursor: pointer;
            border-radius: 999px;
            padding: 16px 28px;
            font-size: 17px;
            font-weight: 800;
            transition: .18s transform, .18s filter;
            position: relative;
            overflow: hidden;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        .cta {
            background: linear-gradient(135deg, var(--gold), #a86e08);
            color: #071019;
            animation: glowPulse 2.4s ease-in-out infinite
        }

        .cta::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(115deg, transparent 10%, rgba(255, 255, 255, .24) 30%, transparent 46%);
            background-size: 200% 100%;
            animation: shimmer 2.7s linear infinite
        }

        .ghost {
            background: rgba(255, 255, 255, .05);
            color: var(--text);
            border: 1px solid var(--line)
        }

        .mission-card {
            max-width: 760px;
            padding: 20px 22px;
            border-radius: 22px;
            background:
                linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
                rgba(5, 10, 20, .44);
            border: 1px solid rgba(212, 168, 67, .24);
            color: var(--muted);
            line-height: 1.8;
            font-size: 14px;
            white-space: pre-line;
            margin: 0 auto
        }

        .success-section {
            display: grid;
            grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
            align-items: start;
            gap: 14px
        }

        .initiative-card {
            position: relative;
            width: 100%;
            border-radius: 24px;
            padding: 16px;
            display: grid;
            align-content: start;
            align-self: start;
            gap: 12px;
            overflow: hidden
        }

        .initiative-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 14%, rgba(212, 168, 67, .12), transparent 40%),
                radial-gradient(circle at 86% 86%, rgba(96, 165, 250, .1), transparent 46%);
            pointer-events: none
        }

        .initiative-card>* {
            position: relative;
            z-index: 1
        }

        .initiative-head {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            flex-wrap: wrap;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(212, 168, 67, .16)
        }

        .initiative-title {
            font-size: 20px;
            font-weight: 900;
            letter-spacing: .01em
        }

        .initiative-copy {
            color: var(--muted);
            font-size: 13px;
            line-height: 1.75
        }

        .initiative-metrics {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px
        }

        .initiative-metric {
            border-radius: 16px;
            background:
                linear-gradient(152deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02)),
                rgba(9, 16, 29, .64);
            border: 1px solid rgba(212, 168, 67, .2);
            padding: 10px;
            display: grid;
            gap: 6px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08)
        }

        .initiative-metric span {
            font-size: 11px;
            color: var(--dim);
            font-weight: 700
        }

        .initiative-metric strong {
            color: var(--gold-2);
            font-size: 19px;
            line-height: 1
        }

        .global-impact-card {
            border-radius: 16px;
            border: 1px solid rgba(212, 168, 67, .22);
            background: rgba(8, 15, 27, .72);
            padding: 10px 12px;
            display: grid;
            gap: 8px
        }

        .global-impact-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap
        }

        .global-impact-head span {
            color: var(--dim);
            font-size: 12px;
            font-weight: 700
        }

        .global-impact-head strong {
            color: var(--gold-2);
            font-size: 14px
        }

        .global-impact-bar {
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden
        }

        .global-impact-bar span {
            display: block;
            height: 100%;
            width: 0%;
            border-radius: inherit;
            background: linear-gradient(90deg, #f5d96a, #d4a843);
            transition: width .28s ease
        }

        .global-impact-meta {
            color: var(--muted);
            font-size: 12px
        }

        .invite-card {
            border-radius: 16px;
            border: 1px solid rgba(212, 168, 67, .22);
            background: rgba(7, 14, 26, .74);
            padding: 12px;
            display: grid;
            gap: 10px
        }

        .invite-title {
            font-size: 16px;
            font-weight: 900
        }

        .invite-copy {
            color: var(--muted);
            font-size: 12px;
            line-height: 1.7
        }

        .invite-link-wrap {
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 8px
        }

        #invite-link-input {
            border-radius: 10px;
            border: 1px solid rgba(212, 168, 67, .2);
            background: rgba(6, 12, 22, .84);
            color: #fff;
            padding: 10px;
            font: inherit;
            font-size: 12px
        }

        #invite-copy-btn,
        #share-fb-btn,
        #share-x-btn,
        #share-li-btn,
        #activate-potion-btn {
            border: 1px solid rgba(212, 168, 67, .24);
            border-radius: 999px;
            background: rgba(255, 255, 255, .06);
            color: #fff;
            font: inherit;
            font-size: 12px;
            font-weight: 800;
            padding: 9px 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        #activate-potion-btn {
            background: linear-gradient(135deg, rgba(212, 168, 67, .3), rgba(96, 165, 250, .24))
        }

        #activate-potion-btn:disabled {
            opacity: .55;
            cursor: not-allowed
        }

        .invite-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }

        .invite-actions button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            padding: 0
        }

        .share-logo {
            width: 18px;
            height: 18px;
            display: inline-flex
        }

        .share-logo svg {
            width: 100%;
            height: 100%;
            fill: currentColor
        }

        .share-logo-facebook {
            color: #1877f2
        }

        .share-logo-linkedin {
            color: #0a66c2
        }

        .share-logo-x {
            color: #f5f7fa
        }

        .potion-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            flex-wrap: wrap
        }

        .potion-status {
            color: var(--gold-2);
            font-size: 12px;
            font-weight: 700
        }

        .auth-modal {
            position: fixed;
            inset: 0;
            z-index: 3300;
            display: grid;
            place-items: center;
            padding: 16px;
            background: rgba(2, 6, 14, .76);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease
        }

        .auth-modal.on {
            opacity: 1;
            pointer-events: auto
        }

        .auth-card {
            width: min(560px, 100%);
            border-radius: 24px;
            padding: 18px;
            display: grid;
            gap: 10px;
            direction: rtl;
            text-align: right;
            border: 1px solid rgba(212, 168, 67, .22);
            background:
                linear-gradient(152deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)),
                rgba(6, 12, 24, .94)
        }

        html.en .auth-card {
            direction: ltr;
            text-align: left
        }

        .auth-title {
            font-size: 22px;
            font-weight: 900
        }

        .auth-copy {
            color: var(--muted);
            line-height: 1.7;
            font-size: 13px
        }

        .auth-label {
            color: var(--dim);
            font-size: 12px;
            font-weight: 700
        }

        #auth-email-input,
        #auth-otp-input {
            border: 1px solid rgba(212, 168, 67, .22);
            border-radius: 14px;
            padding: 12px;
            background: rgba(9, 16, 29, .72);
            color: #fff;
            font: inherit
        }

        .auth-inline {
            display: flex;
            justify-content: flex-start
        }

        .auth-notice {
            min-height: 18px;
            color: #93c5fd;
            font-size: 12px;
            font-weight: 700
        }

        .auth-error {
            min-height: 18px;
            font-size: 12px;
            color: #fecaca;
            visibility: hidden
        }

        .auth-error.on {
            visibility: visible
        }

        .auth-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .identity-modal {
            position: fixed;
            inset: 0;
            z-index: 3200;
            display: grid;
            place-items: center;
            padding: 16px;
            background: rgba(2, 6, 14, .72);
            opacity: 0;
            pointer-events: none;
            transition: opacity .2s ease
        }

        .identity-modal.on {
            opacity: 1;
            pointer-events: auto
        }

        .identity-card {
            width: min(560px, 100%);
            border-radius: 24px;
            padding: 18px;
            display: grid;
            gap: 10px;
            direction: rtl;
            text-align: right;
            border: 1px solid rgba(212, 168, 67, .22);
            background:
                linear-gradient(152deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)),
                rgba(6, 12, 24, .92)
        }

        html.en .identity-card {
            direction: ltr;
            text-align: left
        }

        .identity-title {
            font-size: 22px;
            font-weight: 900
        }

        .identity-copy {
            color: var(--muted);
            line-height: 1.7;
            font-size: 13px
        }

        .identity-generated {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border: 1px solid rgba(212, 168, 67, .24);
            border-radius: 14px;
            padding: 10px 12px;
            background: rgba(255, 255, 255, .04)
        }

        .identity-generated span {
            color: var(--dim);
            font-size: 12px;
            font-weight: 700
        }

        .identity-generated strong {
            color: var(--gold-2);
            font-weight: 900
        }

        .identity-input-label {
            color: var(--dim);
            font-size: 12px;
            font-weight: 700
        }

        #identity-name-input {
            border: 1px solid rgba(212, 168, 67, .22);
            border-radius: 14px;
            padding: 12px;
            background: rgba(9, 16, 29, .72);
            color: #fff;
            font: inherit
        }

        .identity-error {
            min-height: 18px;
            font-size: 12px;
            color: #fecaca;
            visibility: hidden
        }

        .identity-error.on {
            visibility: visible
        }

        .identity-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .identity-cancel-btn {
            justify-self: flex-start;
            padding: 10px 16px;
            font-size: 12px
        }

        #paths {
            padding: 86px 18px 20px;
            overflow: auto
        }

        .path-shell {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .path-head {
            display: flex;
            justify-content: space-between;
            align-items: end;
            gap: 12px;
            flex-wrap: wrap
        }

        .path-title {
            font-size: 34px;
            font-family: var(--fd)
        }

        html.en .path-title {
            font-family: var(--fe)
        }

        .path-sub {
            color: var(--muted);
            line-height: 1.8;
            max-width: 760px
        }

        .level-picker {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .level-pill {
            padding: 12px 16px;
            border-radius: 999px;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .04);
            cursor: pointer;
            font-weight: 800;
            color: var(--text)
        }

        .level-pill.active {
            background: linear-gradient(135deg, var(--gold), #a86e08);
            color: #071019
        }

        .path-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 14px
        }

        .leaderboard-card {
            border-radius: 22px;
            padding: 14px
        }

        #title .leaderboard-card {
            background:
                linear-gradient(155deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 42%),
                rgba(7, 13, 24, .82);
            border: 1px solid rgba(212, 168, 67, .2);
            position: relative;
            overflow: hidden
        }

        #title .leaderboard-card::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 100% 0%, rgba(212, 168, 67, .12), transparent 45%),
                radial-gradient(circle at 0% 100%, rgba(96, 165, 250, .1), transparent 48%);
            pointer-events: none
        }

        #title .leaderboard-card>* {
            position: relative;
            z-index: 1
        }

        .leaderboard-head {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap
        }

        .leaderboard-title {
            font-size: 16px;
            font-weight: 900
        }

        .leaderboard-copy {
            font-size: 12px;
            color: var(--muted)
        }

        .leaderboard-list {
            margin-top: 10px;
            display: grid;
            gap: 7px
        }

        .leaderboard-row {
            display: grid;
            grid-template-columns: auto 1fr auto auto;
            gap: 9px;
            align-items: center;
            border: 1px solid var(--line);
            background: rgba(255, 255, 255, .03);
            border-radius: 14px;
            padding: 8px 10px
        }

        .leaderboard-row.me {
            border-color: rgba(245, 217, 106, .6);
            background: rgba(212, 168, 67, .12)
        }

        .leaderboard-rank {
            font-weight: 900;
            color: var(--gold-2)
        }

        .leaderboard-name {
            font-weight: 800
        }

        .leaderboard-stages {
            font-size: 12px;
            color: var(--muted)
        }

        .leaderboard-amount {
            font-size: 13px;
            font-weight: 900;
            color: var(--gold-2)
        }

        .leaderboard-empty {
            border: 1px dashed var(--line);
            border-radius: 14px;
            color: var(--dim);
            padding: 10px 12px;
            font-size: 12px
        }

        .path-card {
            padding: 18px;
            border-radius: 24px;
            display: flex;
            flex-direction: column;
            gap: 12px;
            cursor: pointer;
            transition: .18s transform, .18s border-color
        }

        .path-card:hover {
            transform: translateY(-2px);
            border-color: var(--line-strong)
        }

        .path-top {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: start;
            gap: 12px
        }

        .path-copy {
            min-height: 102px;
            display: grid;
            align-content: start;
            gap: 6px
        }

        .path-badge {
            width: 52px;
            height: 52px;
            border-radius: 16px;
            display: grid;
            place-items: center;
            background: rgba(212, 168, 67, .08);
            border: 1px solid rgba(212, 168, 67, .18);
            align-self: start;
            flex: 0 0 52px;
            margin-top: 2px
        }

        .path-icon {
            font-size: 23px;
            color: color-mix(in srgb, var(--path-color, var(--gold)) 82%, #fff)
        }

        .meta-pill-icon {
            margin-inline-end: 6px;
            font-size: 12px
        }

        .path-name {
            font-size: 22px;
            font-weight: 900;
            line-height: 1.25
        }

        .path-desc {
            color: var(--muted);
            line-height: 1.7;
            font-size: 13px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: calc(1.7em * 3)
        }

        .path-meta {
            display: flex;
            gap: 8px;
            flex-wrap: wrap
        }

        .meta-pill {
            padding: 8px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            font-size: 12px;
            color: var(--muted);
            font-weight: 700
        }

        .path-progress {
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden
        }

        .path-progress>span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--gold), var(--gold-2))
        }

        #map {
            background: transparent
        }

        .map-hud {
            position: relative;
            z-index: 6;
            display: grid;
            grid-template-columns: 1.2fr 1fr 1.2fr;
            align-items: center;
            gap: 12px;
            padding: 82px 20px 10px
        }

        .map-hud .hud-card {
            padding: 14px 16px;
            border-radius: 20px;
            background:
                linear-gradient(155deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 42%),
                rgba(8, 13, 24, .82)
        }

        .hud-left,
        .hud-center,
        .hud-right {
            display: flex;
            align-items: center;
            gap: 10px
        }

        .hud-left {
            justify-content: flex-start
        }

        .hud-center {
            justify-content: center;
            flex-direction: column;
            text-align: center
        }

        .hud-right {
            justify-content: flex-end;
            flex-wrap: wrap
        }

        .label {
            font-size: 10px;
            text-transform: uppercase;
            letter-spacing: .18em;
            color: var(--gold);
            font-weight: 800
        }

        .value {
            font-weight: 900
        }

        .xp-bar {
            width: min(220px, 40vw);
            height: 8px;
            background: rgba(255, 255, 255, .08);
            border-radius: 999px;
            overflow: hidden
        }

        .xp-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--gold), var(--gold-2));
            border-radius: 999px;
            transition: width .7s ease
        }

        .stat {
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 9px 12px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            font-size: 13px;
            font-weight: 800
        }

        .stat-icon {
            width: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        .panel-toggle-icon {
            width: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center
        }

        .map-wrap {
            position: relative;
            flex: 1;
            min-height: clamp(520px, 68vh, 820px);
            width: 100%;
            margin: 0;
            border-radius: 0;
            overflow: hidden;
            isolation: isolate;
            border: none;
            background: transparent;
            box-shadow: none
        }

        .map-wrap::before {
            content: none
        }

        .map-progress-badge,
        .map-legend,
        .panel-toggle,
        .map-wrap .side-panel {
            display: none !important
        }

        .map-atlas {
            display: none
        }

        .atlas-grid {
            position: absolute;
            inset: 0;
            opacity: .12;
            background:
                linear-gradient(to right, rgba(255, 255, 255, .035) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, .03) 1px, transparent 1px);
            background-size: 124px 124px;
            mask-image: radial-gradient(circle at 50% 46%, #000 45%, transparent 95%)
        }

        .atlas-aurora {
            position: absolute;
            width: 56%;
            aspect-ratio: 1;
            border-radius: 50%;
            filter: blur(62px);
            opacity: .15;
            animation: atlasDrift 24s ease-in-out infinite
        }

        .atlas-aurora-a {
            inset-inline-start: -12%;
            top: -20%;
            background: radial-gradient(circle, rgba(87, 116, 174, .36) 0%, rgba(87, 116, 174, 0) 70%)
        }

        .atlas-aurora-b {
            inset-inline-end: -16%;
            bottom: -26%;
            background: radial-gradient(circle, rgba(226, 191, 123, .3) 0%, rgba(226, 191, 123, 0) 72%);
            opacity: .1;
            animation-duration: 28s;
            animation-delay: -4s
        }

        .atlas-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 50% 44%, transparent 44%, rgba(0, 0, 0, .5) 100%)
        }

        #mapSvg {
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            display: block
        }

        .map-node-icon {
            pointer-events: none
        }

        .map-progress-badge {
            position: absolute;
            top: 14px;
            inset-inline-start: 16px;
            z-index: 6;
            border-radius: 14px;
            padding: 10px 12px;
            min-width: 132px;
            background:
                linear-gradient(150deg, rgba(233, 208, 146, .1), rgba(255, 255, 255, .02) 44%),
                rgba(6, 12, 24, .84);
            border: 1px solid rgba(245, 217, 106, .18);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
        }

        .map-progress-badge .k {
            font-size: 9px;
            letter-spacing: .09em;
            text-transform: uppercase;
            color: var(--dim);
            font-weight: 800
        }

        .map-progress-badge .v {
            margin-top: 5px;
            font-size: 18px;
            font-weight: 900;
            color: var(--gold-2)
        }

        .map-legend {
            position: absolute;
            top: 16px;
            inset-inline-end: 16px;
            z-index: 6;
            min-width: 160px;
            border-radius: 14px;
            padding: 10px 11px;
            background:
                linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 44%),
                rgba(5, 10, 21, .86);
            border: 1px solid rgba(245, 217, 106, .12);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .28)
        }

        .map-legend .legend-title {
            font-size: 9px;
            letter-spacing: .11em;
            text-transform: uppercase;
            color: var(--gold);
            font-weight: 900;
            margin-bottom: 8px
        }

        .legend-row {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 11px;
            color: var(--muted);
            font-weight: 700
        }

        .legend-row+.legend-row {
            margin-top: 6px
        }

        .legend-dot {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: inline-block;
            border: 1px solid rgba(255, 255, 255, .22);
            flex-shrink: 0
        }

        .legend-dot.active {
            background: var(--gold);
            border-color: rgba(245, 217, 106, .9);
            box-shadow: 0 0 8px rgba(245, 217, 106, .35)
        }

        .legend-dot.done {
            background: #34d399;
            border-color: rgba(52, 211, 153, .9)
        }

        .legend-dot.locked {
            background: rgba(124, 93, 173, .45);
            border-color: rgba(124, 93, 173, .7)
        }

        .tooltip {
            position: absolute;
            pointer-events: none;
            z-index: 8;
            opacity: 0;
            transform: translateY(10px) scale(.98);
            transition: .18s;
            background:
                linear-gradient(150deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015) 48%),
                rgba(4, 8, 18, .95);
            border: 1px solid rgba(245, 217, 106, .22);
            border-radius: 12px;
            padding: 10px 11px;
            min-width: 172px;
            max-width: min(250px, 82vw);
            box-shadow: 0 12px 28px rgba(0, 0, 0, .35)
        }

        .tooltip.on {
            opacity: 1;
            transform: translateY(0) scale(1)
        }

        .tooltip .tt-state {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 9px;
            letter-spacing: .12em;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 6px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 999px;
            border: 1px solid rgba(245, 217, 106, .2);
            background: rgba(245, 217, 106, .06)
        }

        .tooltip .tt-name {
            font-weight: 900;
            margin-bottom: 4px;
            line-height: 1.35
        }

        .tooltip .tt-meta {
            font-size: 11px;
            color: var(--muted);
            line-height: 1.6
        }

        .panel-toggle {
            position: absolute;
            bottom: 18px;
            inset-inline-start: 18px;
            z-index: 7;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 12px 14px;
            border-radius: 999px;
            background:
                linear-gradient(145deg, rgba(245, 217, 106, .08), rgba(255, 255, 255, .015) 45%),
                rgba(5, 10, 20, .9);
            border: 1px solid rgba(245, 217, 106, .16);
            box-shadow: 0 10px 24px rgba(0, 0, 0, .32);
            cursor: pointer;
            font-weight: 900;
            color: var(--text)
        }

        .panel-toggle .mini {
            color: var(--gold);
            font-size: 12px;
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .map-wrap .side-panel {
            position: absolute;
            bottom: 18px;
            inset-inline-start: 18px;
            z-index: 6;
            width: min(360px, calc(100% - 36px));
            padding: 16px 16px 14px;
            border-radius: 22px;
            transition: transform .22s ease, opacity .22s ease;
            overflow: hidden;
            background:
                linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02) 40%),
                rgba(4, 9, 20, .9)
        }

        .side-panel.hidden-panel {
            transform: translateY(18px);
            opacity: 0;
            pointer-events: none
        }

        .quest-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px
        }

        .quest-title {
            font-weight: 900;
            font-size: 16px
        }

        .quest-sub {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.6
        }

        .quest-progress {
            display: flex;
            gap: 6px;
            margin-top: 10px
        }

        .mini-dot {
            flex: 1;
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden
        }

        .mini-dot>span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--gold), var(--gold-2))
        }

        .deep-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 12px
        }

        .deep-card {
            padding: 12px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line)
        }

        .deep-card .dt {
            font-size: 11px;
            color: var(--muted);
            font-weight: 800;
            margin-bottom: 8px
        }

        .deep-card .dv {
            font-size: 13px;
            line-height: 1.7
        }

        .deep-list {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .book-item {
            padding: 9px 10px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .06)
        }

        .book-item .b1 {
            font-size: 12px;
            font-weight: 900
        }

        .book-item .b2 {
            font-size: 11px;
            color: var(--muted);
            margin-top: 4px
        }

        #story {
            justify-content: flex-start;
            direction: ltr
        }

        .story-shell {
            position: relative;
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 72px 20px 20px;
            overflow-y: visible;
            overflow-x: hidden;
            gap: 14px;
            direction: ltr
        }

        html:not(.en) #story .story-shell>* {
            direction: rtl
        }

        html.en #story .story-shell>* {
            direction: ltr
        }

        /* ── header ── */
        .story-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            padding: 14px 20px;
            border-radius: 20px;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto
        }

        .story-header-left {
            display: flex;
            flex-direction: column;
            gap: 3px
        }

        .story-header .chapter {
            font-size: 10px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--dim);
            font-weight: 800
        }

        .story-header .title {
            font-family: var(--fd);
            font-size: 26px
        }

        html.en .story-header .title {
            font-family: var(--fe)
        }

        .story-header .story-date {
            font-size: 11px;
            color: var(--gold);
            font-weight: 700
        }

        .story-header-right .icon {
            font-size: 42px;
            filter: drop-shadow(0 0 14px rgba(212, 168, 67, .22))
        }

        .stage-icon {
            font-size: inherit
        }

        .story-header-rewards {
            width: 100%;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px
        }

        .story-reward-item {
            border-radius: 14px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(212, 168, 67, .2);
            padding: 8px 10px;
            display: grid;
            gap: 5px
        }

        .story-reward-item span {
            font-size: 10px;
            color: var(--dim);
            font-weight: 800;
            letter-spacing: .08em;
            text-transform: uppercase
        }

        .story-reward-item strong {
            color: var(--gold-2);
            font-size: 16px;
            line-height: 1;
            font-weight: 900
        }

        /* ── era strip ── */
        .era-strip {
            display: flex;
            gap: 8px;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            padding-bottom: 2px
        }

        .era-card {
            flex: 1;
            min-width: 0;
            padding: 10px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            text-align: center
        }

        .era-card.active {
            border-color: color-mix(in srgb, var(--era-card-color, var(--gold)) 42%, transparent);
            background: color-mix(in srgb, var(--era-card-color, var(--gold)) 8%, transparent)
        }

        .era-card .e1 {
            font-size: 22px
        }

        .era-card .e1 .nq-icon {
            color: color-mix(in srgb, var(--era-card-color, var(--gold)) 70%, #fff)
        }

        .era-card .e2 {
            font-size: 11px;
            font-weight: 800;
            margin-top: 4px
        }

        .era-card .e3 {
            font-size: 10px;
            color: var(--muted);
            margin-top: 2px
        }

        /* ── horizontal timeline ── */
        .story-timeline-wrap {
            max-width: 1100px;
            width: 100%;
            margin: 0 auto
        }

        .story-timeline {
            overflow-x: auto;
            overflow-y: visible;
            padding: 12px 0;
            scroll-behavior: smooth;
            -webkit-overflow-scrolling: touch
        }

        .story-timeline::-webkit-scrollbar {
            height: 3px
        }

        .story-timeline::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, .03);
            border-radius: 999px
        }

        .story-timeline::-webkit-scrollbar-thumb {
            background: rgba(212, 168, 67, .25);
            border-radius: 999px
        }

        .timeline-track {
            display: flex;
            align-items: flex-start;
            min-width: max-content;
            padding: 0 20px;
            position: relative
        }

        .timeline-track::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            height: 2px;
            background: rgba(255, 255, 255, .06);
            border-radius: 999px;
            z-index: 0
        }

        .timeline-event {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-width: 130px;
            cursor: pointer;
            transition: transform .2s;
            padding: 0 4px
        }

        .timeline-event:hover {
            transform: translateY(-3px)
        }

        .timeline-event-node {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 16px;
            font-weight: 900;
            border: 2px solid rgba(255, 255, 255, .1);
            background: rgba(2, 8, 20, .9);
            color: var(--muted);
            transition: .2s
        }

        .timeline-event.done .timeline-event-node {
            border-color: rgba(16, 185, 129, .5);
            background: rgba(16, 185, 129, .12);
            color: #34d399
        }

        .timeline-event.active .timeline-event-node {
            border-color: var(--gold);
            background: rgba(245, 217, 106, .1);
            color: var(--gold);
            box-shadow: 0 0 18px rgba(245, 217, 106, .2)
        }

        .timeline-event.special .timeline-event-node {
            width: 48px;
            height: 48px;
            font-size: 20px;
            border-color: rgba(212, 168, 67, .5);
            background: rgba(212, 168, 67, .1)
        }

        .timeline-event.special.active .timeline-event-node {
            box-shadow: 0 0 24px rgba(212, 168, 67, .35)
        }

        .timeline-event-label {
            margin-top: 8px;
            text-align: center;
            max-width: 120px
        }

        .timeline-event-title {
            font-size: 11px;
            font-weight: 800;
            line-height: 1.35;
            color: var(--text)
        }

        .timeline-event.active .timeline-event-title {
            color: var(--gold)
        }

        .timeline-event-date {
            font-size: 9px;
            color: var(--muted);
            margin-top: 2px;
            font-weight: 700
        }

        .timeline-event-badge {
            display: none;
            margin-top: 4px;
            font-size: 8px;
            font-weight: 900;
            padding: 2px 7px;
            border-radius: 999px;
            text-transform: uppercase;
            letter-spacing: .06em
        }

        .timeline-event.special .timeline-event-badge {
            display: inline-block;
            background: rgba(212, 168, 67, .12);
            border: 1px solid rgba(212, 168, 67, .35);
            color: var(--gold)
        }

        .timeline-event.done .timeline-event-badge {
            display: inline-block;
            background: rgba(16, 185, 129, .08);
            border: 1px solid rgba(16, 185, 129, .25);
            color: #34d399
        }

        .timeline-connector {
            flex: 0 0 20px;
            display: flex;
            align-items: center;
            margin-top: -30px;
            z-index: 0
        }

        .timeline-connector-line {
            width: 100%;
            height: 2px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .06);
            overflow: hidden
        }

        .timeline-connector-line span {
            display: block;
            height: 100%;
            width: 0;
            border-radius: inherit;
            background: linear-gradient(90deg, #34d399, var(--gold));
            transition: width .35s
        }

        .timeline-connector.filled .timeline-connector-line span {
            width: 100%
        }

        /* ── story content card ── */
        .story-event-content {
            max-width: 1100px;
            width: 100%;
            margin: 0 auto;
            border-radius: 20px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .1);
            background: rgba(8, 14, 30, .85);
            backdrop-filter: blur(12px);
            box-shadow: 0 8px 40px rgba(0, 0, 0, .4)
        }

        .step-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px 26px 6px;
            margin-bottom: 0
        }

        .step-number {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--era-accent, var(--gold)), color-mix(in srgb, var(--era-accent, var(--gold)) 40%, #000));
            color: #fff;
            font-weight: 900;
            font-size: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            box-shadow: 0 4px 24px color-mix(in srgb, var(--era-accent, var(--gold)) 30%, transparent)
        }

        .step-info {
            flex: 1
        }

        .step-title-text {
            font-size: 18px;
            font-weight: 800;
            color: var(--text);
            line-height: 1.4
        }

        .step-label {
            font-size: 11px;
            color: var(--dim);
            margin-top: 3px;
            font-weight: 700;
            letter-spacing: .04em
        }

        .story-content-main {
            padding: 18px 26px 22px;
            font-size: 17px;
            line-height: 2.05;
            font-weight: 500;
            color: rgba(255, 255, 255, .88);
            max-height: none;
            overflow-y: visible;
            scrollbar-width: thin;
            scrollbar-color: rgba(255, 255, 255, .15) transparent
        }

        .story-content-main::-webkit-scrollbar {
            width: 4px
        }

        .story-content-main::-webkit-scrollbar-track {
            background: transparent
        }

        .story-content-main::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, .18);
            border-radius: 999px
        }

        .story-content-main p {
            margin: 0
        }

        /* ── Knowledge checklist ── */
        .key-points-section {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 18px 26px 22px;
            background: rgba(255, 255, 255, .02)
        }

        .key-points-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 14px;
            font-size: 13px;
            font-weight: 800;
            color: var(--era-accent, var(--gold))
        }

        .key-points-icon {
            font-size: 16px
        }

        .key-points-icon .nq-icon {
            display: inline-flex
        }

        .key-points-count {
            margin-inline-start: auto;
            font-size: 12px;
            background: rgba(255, 255, 255, .08);
            padding: 4px 12px;
            border-radius: 999px;
            color: var(--muted);
            font-weight: 700
        }

        .key-points-list {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .key-point {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 12px 16px;
            border-radius: 14px;
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .05);
            cursor: pointer;
            transition: all .25s ease;
            position: relative
        }

        .key-point:hover {
            background: rgba(255, 255, 255, .06);
            border-color: rgba(212, 168, 67, .2)
        }

        .key-point.checked {
            background: rgba(16, 185, 129, .06);
            border-color: rgba(16, 185, 129, .2)
        }

        .key-point input[type=checkbox] {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0
        }

        .kp-check {
            width: 22px;
            height: 22px;
            border-radius: 7px;
            border: 2px solid rgba(255, 255, 255, .15);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all .2s ease;
            margin-top: 1px
        }

        .key-point.checked .kp-check {
            background: var(--emerald);
            border-color: var(--emerald)
        }

        .key-point.checked .kp-check::after {
            content: "";
            width: 6px;
            height: 10px;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(40deg) translateY(-1px)
        }

        .kp-text {
            font-size: 14px;
            line-height: 1.65;
            color: var(--muted);
            font-weight: 600;
            transition: color .2s
        }

        .key-point.checked .kp-text {
            color: var(--text)
        }

        /* ── Summary step ── */
        .summary-header .step-number.summary-icon {
            background: linear-gradient(135deg, #2E8B57, #52c07e);
            font-size: 20px
        }

        .summary-all-points {
            padding: 18px 26px 4px;
            display: flex;
            flex-direction: column;
            gap: 18px
        }

        .summary-step-group {
            background: rgba(255, 255, 255, .03);
            border: 1px solid rgba(255, 255, 255, .07);
            border-radius: 16px;
            overflow: hidden
        }

        .summary-step-title {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px;
            font-size: 14px;
            font-weight: 700;
            color: var(--text);
            background: rgba(255, 255, 255, .04);
            border-bottom: 1px solid rgba(255, 255, 255, .06)
        }

        .summary-step-num {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--era-accent, var(--gold)), color-mix(in srgb, var(--era-accent, var(--gold)) 60%, #fff));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 11px;
            font-weight: 800;
            color: #000;
            flex-shrink: 0
        }

        .summary-kp-list {
            padding: 10px 14px;
            display: flex;
            flex-direction: column;
            gap: 6px
        }

        .summary-kp {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 7px 10px;
            border-radius: 10px;
            font-size: 13px;
            color: rgba(255, 255, 255, .72);
            transition: background .2s
        }

        .summary-kp.checked {
            color: rgba(255, 255, 255, .92);
            background: rgba(16, 185, 129, .07)
        }

        .summary-kp-icon {
            font-size: 14px;
            flex-shrink: 0;
            margin-top: 1px
        }

        .summary-kp-icon .nq-icon {
            display: inline-flex
        }

        .summary-reading-section {
            margin: 18px 26px 22px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding-top: 20px
        }

        .summary-reading-header {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            font-weight: 800;
            color: var(--text);
            margin-bottom: 6px
        }

        .summary-reading-desc {
            font-size: 12px;
            color: var(--muted);
            margin-bottom: 14px
        }

        .summary-reading-list {
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .story-dots .summary-dot {
            background: #2E8B57 !important;
            opacity: .5
        }

        .story-dots .summary-dot.active {
            opacity: 1;
            transform: scale(1.4)
        }

        .timeline-event.summary-node .timeline-event-node {
            background:
                linear-gradient(135deg,
                    color-mix(in srgb, var(--era-accent, var(--gold)) 14%, transparent),
                    color-mix(in srgb, var(--era-accent, var(--gold)) 22%, transparent));
            color: color-mix(in srgb, var(--era-accent, var(--gold)) 70%, #fff);
            border-color: color-mix(in srgb, var(--era-accent, var(--gold)) 52%, transparent)
        }

        .timeline-event.summary-node.active .timeline-event-node {
            color: color-mix(in srgb, var(--era-accent, var(--gold)) 84%, #fff);
            box-shadow: 0 0 20px color-mix(in srgb, var(--era-accent, var(--gold)) 30%, transparent)
        }

        .summary-glyph {
            width: 14px;
            height: 16px;
            border: 2px solid currentColor;
            border-radius: 4px;
            display: inline-block;
            position: relative
        }

        .summary-glyph::before {
            content: "";
            position: absolute;
            left: 2px;
            right: 2px;
            top: 3px;
            height: 2px;
            background: currentColor;
            box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor
        }

        .summary-glyph.done {
            width: 16px;
            height: 16px;
            border-radius: 50%
        }

        .summary-glyph.done::before {
            left: 4px;
            right: auto;
            top: 1px;
            width: 6px;
            height: 10px;
            background: transparent;
            box-shadow: none;
            border-right: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            transform: rotate(40deg)
        }

        @keyframes fadeSlideIn {
            from {
                opacity: 0;
                transform: translateY(12px)
            }

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

        .story-event-content {
            animation: fadeSlideIn .35s ease
        }

        /* ── dots / rewards / nav ── */
        .story-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            padding: 2px 0 6px
        }

        .story-dots span {
            height: 5px;
            width: 24px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            transition: .2s
        }

        .story-dots span.active {
            width: 40px;
            background: var(--gold)
        }

        .story-rewards {
            display: flex;
            justify-content: center;
            gap: 8px;
            flex-wrap: wrap;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto
        }

        .reward-pill {
            padding: 7px 11px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            font-size: 11px;
            color: var(--muted);
            font-weight: 700
        }

        .story-nav {
            display: flex;
            gap: 10px;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto
        }

        .story-nav button {
            border: none;
            border-radius: 16px;
            padding: 14px 18px;
            cursor: pointer;
            font-weight: 800
        }

        .story-skip {
            background: rgba(255, 255, 255, .05);
            color: var(--text);
            border: 1px solid var(--line)
        }

        .story-next {
            background: linear-gradient(135deg, var(--gold), var(--gold-3));
            color: #071019
        }

        /* ── era theme tints ── */
        #story .story-shell[data-era="jahiliyyah"] .story-event-content {
            background: linear-gradient(165deg, rgba(139, 105, 20, .1), transparent 40%), rgba(2, 8, 20, .7)
        }

        #story .story-shell[data-era="birth"] .story-event-content {
            background: linear-gradient(165deg, rgba(218, 165, 32, .08), transparent 40%), rgba(2, 8, 20, .65)
        }

        #story .story-shell[data-era="character"] .story-event-content {
            background: linear-gradient(165deg, rgba(192, 160, 96, .08), transparent 40%), rgba(2, 8, 20, .65)
        }

        #story .story-shell[data-era="revelation"] .story-event-content {
            background: linear-gradient(165deg, rgba(232, 212, 77, .1), transparent 40%), rgba(2, 8, 20, .7)
        }

        #story .story-shell[data-era="struggle"] .story-event-content {
            background: linear-gradient(165deg, rgba(212, 96, 58, .1), transparent 40%), rgba(2, 8, 20, .7)
        }

        #story .story-shell[data-era="hijra"] .story-event-content {
            background: linear-gradient(165deg, rgba(74, 144, 217, .1), transparent 40%), rgba(2, 8, 20, .65)
        }

        #story .story-shell[data-era="madinah"] .story-event-content {
            background: linear-gradient(165deg, rgba(46, 139, 87, .1), transparent 40%), rgba(2, 8, 20, .65)
        }

        #story .story-shell[data-era="legacy"] .story-event-content {
            background: linear-gradient(165deg, rgba(155, 89, 182, .1), transparent 40%), rgba(2, 8, 20, .65)
        }

        /* ── era overlay (background shift) ── */
        .era-overlay {
            position: fixed;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            opacity: 0;
            transition: opacity 1s ease
        }

        .screen.on#story~.era-overlay,
        body:has(#story.on) .era-overlay {
            opacity: 1
        }

        body {
            --era-bg1: #040812;
            --era-bg2: #09101d;
            --era-bg3: #02050c;
            --era-accent: #d4a843
        }

        .era-overlay {
            background: radial-gradient(ellipse at 30% 20%, var(--era-bg2), var(--era-bg1) 50%, var(--era-bg3) 100%)
        }

        .reference-board {
            margin-top: 0;
            display: grid;
            grid-template-columns: 1.2fr .8fr;
            gap: 12px;
            max-width: 1100px;
            width: 100%;
            margin: 0 auto
        }

        .ref-card {
            padding: 14px;
            border-radius: 20px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line)
        }

        .ref-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px
        }

        .ref-title {
            font-size: 14px;
            font-weight: 900
        }

        .ref-copy {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.8
        }

        .endorse-list,
        .reading-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            margin-top: 10px
        }

        #quiz {
            padding: 82px 16px 18px;
            align-items: center
        }

        .quiz-shell {
            max-width: 960px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 14px
        }

        .quiz-top {
            padding: 16px 18px;
            border-radius: 24px;
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 12px
        }

        .quiz-label {
            font-size: 11px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--dim);
            font-weight: 900
        }

        .combo {
            justify-self: center;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(212, 168, 67, .1);
            border: 1px solid rgba(212, 168, 67, .2);
            color: var(--gold);
            font-weight: 900;
            opacity: 0;
            transform: scale(.85);
            transition: .2s;
            display: inline-flex;
            align-items: center;
            gap: 7px
        }

        .combo-fa {
            font-size: 14px
        }

        .combo.on {
            opacity: 1;
            transform: scale(1)
        }

        .quiz-count {
            font-weight: 800;
            color: var(--muted)
        }

        .progress {
            height: 8px;
            border-radius: 999px;
            background: rgba(255, 255, 255, .08);
            overflow: hidden
        }

        .progress>span {
            display: block;
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, var(--gold), var(--gold-2));
            transition: width .28s ease
        }

        .booster-bar {
            display: flex;
            gap: 10px;
            flex-wrap: wrap
        }

        .booster {
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            font-size: 12px;
            color: var(--muted);
            font-weight: 800
        }

        .booster.active {
            border-color: rgba(212, 168, 67, .36);
            background: rgba(212, 168, 67, .08);
            color: var(--gold)
        }

        .mission-row {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 10px
        }

        .mission-card-mini {
            padding: 14px 12px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            text-align: center
        }

        .mission-card-mini .mi {
            font-size: 22px
        }

        .mission-card-mini .mt {
            font-size: 11px;
            color: var(--muted);
            font-weight: 800;
            margin-top: 6px
        }

        .mission-card-mini .mv {
            font-size: 16px;
            font-weight: 900;
            color: var(--gold);
            margin-top: 4px
        }

        .question-card {
            padding: 20px;
            border-radius: 24px;
            position: relative;
            overflow: hidden
        }

        .question-text {
            font-size: 24px;
            font-weight: 900;
            line-height: 1.65;
            text-align: center
        }

        .answer-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px
        }

        .answer {
            padding: 16px 14px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .05);
            border: 1px solid rgba(255, 255, 255, .08);
            display: flex;
            gap: 12px;
            align-items: center;
            cursor: pointer;
            transition: .16s transform, .16s border-color, .16s background;
            color: #fff
        }

        .answer:hover:not(.locked) {
            transform: translateY(-2px);
            border-color: rgba(212, 168, 67, .28);
            background: rgba(255, 255, 255, .08)
        }

        .answer.correct {
            background: rgba(16, 185, 129, .14);
            border-color: var(--emerald)
        }

        .answer.wrong {
            background: rgba(239, 68, 68, .12);
            border-color: var(--red);
            animation: shake .28s ease
        }

        .answer.dim {
            opacity: .28
        }

        .answer-key {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            display: grid;
            place-items: center;
            background: rgba(212, 168, 67, .1);
            border: 1px solid rgba(212, 168, 67, .18);
            color: var(--gold);
            font-size: 13px;
            font-weight: 900;
            flex-shrink: 0
        }

        .answer-text {
            font-size: 15px;
            font-weight: 700;
            line-height: 1.45;
            color: #fff
        }

        .feedback {
            height: 32px;
            display: grid;
            place-items: center;
            font-size: 15px;
            font-weight: 900;
            animation: rise .22s ease
        }

        .feedback.ok {
            color: var(--emerald)
        }

        .feedback.no {
            color: var(--red)
        }

        #result {
            align-items: center;
            justify-content: center;
            padding: 20px
        }

        .result-card {
            max-width: 760px;
            width: 100%;
            padding: 28px;
            border-radius: 30px;
            text-align: center;
            animation: pop .55s cubic-bezier(.34, 1.56, .64, 1)
        }

        .result-emoji {
            font-size: 92px;
            filter: drop-shadow(0 0 24px rgba(212, 168, 67, .34))
        }

        .result-icon {
            font-size: 88px
        }

        .result-title {
            font-size: 46px;
            font-family: var(--fd);
            margin-top: 6px
        }

        html.en .result-title {
            font-family: var(--fe)
        }

        .result-sub {
            margin-top: 5px;
            color: var(--muted);
            font-weight: 700
        }

        .stars {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin: 18px 0 12px
        }

        .stars span {
            font-size: 54px;
            opacity: .15;
            transform: scale(.84);
            transition: .3s
        }

        .stars span.on {
            opacity: 1;
            transform: scale(1);
            filter: drop-shadow(0 0 14px rgba(245, 217, 106, .45))
        }

        .loot-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin: 16px 0 22px
        }

        .loot {
            padding: 16px 10px;
            border-radius: 18px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line)
        }

        .loot .n {
            font-size: 28px;
            font-weight: 900;
            color: var(--gold)
        }

        .loot .l {
            font-size: 10px;
            color: var(--dim);
            letter-spacing: .15em;
            text-transform: uppercase;
            font-weight: 900
        }

        .result-actions {
            display: flex;
            gap: 10px;
            justify-content: center;
            flex-wrap: wrap
        }

        .result-actions button {
            border: none;
            border-radius: 16px;
            padding: 14px 20px;
            cursor: pointer;
            font-weight: 900
        }

        .primary {
            background: linear-gradient(135deg, var(--gold), var(--gold-3));
            color: #071019
        }

        .secondary {
            background: rgba(255, 255, 255, .05);
            color: var(--text);
            border: 1px solid var(--line)
        }

        .popup {
            position: fixed;
            inset: 0;
            z-index: 2000;
            background: rgba(0, 0, 0, .66);
            backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 18px;
            opacity: 0;
            pointer-events: none;
            transition: .25s
        }

        .popup.on {
            opacity: 1;
            pointer-events: auto
        }

        .popup-card {
            max-width: 620px;
            width: 100%;
            padding: 24px;
            border-radius: 28px;
            position: relative;
            animation: pop .38s cubic-bezier(.34, 1.56, .64, 1)
        }

        .close {
            position: absolute;
            top: 12px;
            left: 12px;
            border: none;
            border-radius: 12px;
            background: rgba(255, 255, 255, .06);
            color: var(--muted);
            padding: 8px 10px;
            cursor: pointer
        }

        .popup-head {
            text-align: center
        }

        .popup-ico {
            font-size: 56px
        }

        .popup-ico .nq-icon {
            color: var(--gold-2)
        }

        .popup-kicker {
            font-size: 10px;
            color: var(--dim);
            letter-spacing: .16em;
            text-transform: uppercase;
            font-weight: 900;
            margin-top: 6px
        }

        .popup-title {
            font-size: 28px;
            font-family: var(--fd);
            margin-top: 4px
        }

        html.en .popup-title {
            font-family: var(--fe)
        }

        .popup-desc {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.8;
            text-align: center;
            margin: 12px 0 14px
        }

        .popup-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 14px
        }

        .popup-mini {
            padding: 12px 6px;
            border-radius: 16px;
            background: rgba(255, 255, 255, .04);
            border: 1px solid var(--line);
            text-align: center
        }

        .popup-mini .i {
            font-size: 20px
        }

        .popup-mini .t {
            font-size: 11px;
            color: var(--muted);
            margin-top: 5px;
            font-weight: 800
        }

        .popup-btn {
            width: 100%;
            border: none;
            border-radius: 16px;
            padding: 15px;
            font-weight: 900;
            cursor: pointer;
            color: #071019;
            background: linear-gradient(135deg, var(--gold), var(--gold-3))
        }

        .toast,
        .achievement {
            position: fixed;
            left: 50%;
            right: auto;
            transform: translate(-50%, -8px) scale(.96);
            opacity: 0;
            z-index: 3000;
            padding: 14px 18px;
            border-radius: 18px;
            background: rgba(5, 10, 20, .95);
            border: 1px solid rgba(212, 168, 67, .36);
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 12px;
            transition: transform .28s ease, opacity .22s ease
        }

        .toast.on,
        .achievement.on {
            transform: translate(-50%, 0) scale(1);
            opacity: 1
        }

        .toast {
            top: 70px
        }

        .achievement {
            top: 132px
        }

        .toast .i,
        .achievement .i {
            font-size: 26px
        }

        .toast .i .nq-icon,
        .achievement .i .nq-icon {
            font-size: 24px
        }

        .toast .t1,
        .achievement .t1 {
            font-size: 10px;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: var(--gold);
            font-weight: 900
        }

        .toast .t2,
        .achievement .t2 {
            font-weight: 800
        }

        @media (max-width: 980px) {

            .path-grid,
            .reference-board,
            .deep-grid,
            .era-strip,
            .answer-grid,
            .loot-grid,
            .popup-grid {
                grid-template-columns: 1fr 1fr
            }

            .map-hud {
                grid-template-columns: 1fr;
                gap: 10px;
                padding-top: 92px
            }

            .map-wrap {
                margin: 0;
                min-height: clamp(560px, 72vh, 880px)
            }

            .map-progress-badge,
            .map-legend {
                top: 12px
            }

            .atlas-grid {
                opacity: .1
            }

            .hud-left,
            .hud-center,
            .hud-right {
                justify-content: center
            }

            .timeline-event {
                min-width: 140px
            }

            .initiative-metrics {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width: 680px) {

            .path-grid,
            .reference-board,
            .deep-grid,
            .era-strip,
            .mission-row,
            .answer-grid,
            .loot-grid,
            .popup-grid {
                grid-template-columns: 1fr
            }

            .story-content-main {
                font-size: 15px;
                padding: 14px 18px;
                line-height: 1.9;
                max-height: none
            }

            .step-header {
                padding: 16px 18px 0;
                gap: 12px
            }

            .step-number {
                width: 36px;
                height: 36px;
                font-size: 15px
            }

            .step-title-text {
                font-size: 15px
            }

            .key-points-section {
                padding: 14px 18px 16px
            }

            .key-point {
                padding: 10px 12px;
                gap: 10px
            }

            .kp-text {
                font-size: 13px
            }

            .kp-check {
                width: 20px;
                height: 20px
            }

            .timeline-event {
                min-width: 110px
            }

            .timeline-event-node {
                width: 36px;
                height: 36px;
                font-size: 14px
            }

            .timeline-event.special .timeline-event-node {
                width: 42px;
                height: 42px
            }

            .story-header .title {
                font-size: 22px
            }

            .story-header-rewards {
                grid-template-columns: 1fr
            }

            .question-text {
                font-size: 20px
            }

            .story-shell {
                padding-top: 86px
            }

            .map-wrap {
                margin: 0;
                min-height: 620px;
                padding-bottom: 0
            }

            .atlas-aurora {
                display: none
            }

            .atlas-grid {
                opacity: .08
            }

            .map-legend,
            .map-progress-badge,
            .panel-toggle,
            .side-panel {
                display: none !important
            }

            .logo {
                font-size: 74px
            }

            html.en .logo {
                font-size: 54px
            }

            .initiative-head {
                justify-content: center
            }

            .initiative-metrics {
                grid-template-columns: 1fr
            }

            .invite-link-wrap {
                grid-template-columns: 1fr
            }

            .leaderboard-row {
                grid-template-columns: auto 1fr;
                gap: 6px 10px
            }

            .leaderboard-amount,
            .leaderboard-stages {
                grid-column: 2
            }
        }

        /* Advanced UI layer */
        body {
            position: relative;
            isolation: isolate
        }

        body::before,
        body::after {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none
        }

        body::before {
            z-index: 1;
            background:
                radial-gradient(ellipse at 12% 8%, rgba(96, 165, 250, .12) 0%, rgba(96, 165, 250, 0) 48%),
                radial-gradient(ellipse at 88% 14%, rgba(212, 168, 67, .17) 0%, rgba(212, 168, 67, 0) 52%),
                radial-gradient(ellipse at 52% 120%, rgba(16, 185, 129, .12) 0%, rgba(16, 185, 129, 0) 56%);
            mix-blend-mode: screen
        }

        body::after {
            z-index: 2;
            opacity: 0;
            background: none
        }

        .glass {
            background:
                linear-gradient(160deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .02) 35%),
                var(--panel)
        }

        .path-shell {
            max-width: none;
            width: 100%;
            gap: 16px;
            padding-inline: 4px
        }

        .path-head {
            align-items: center
        }

        .path-controls {
            border-radius: 22px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            flex-wrap: wrap
        }

        .path-controls-copy {
            color: var(--muted);
            font-size: 13px;
            font-weight: 700
        }

        .paths-dashboard {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 12px
        }

        .path-dash-card {
            border-radius: 20px;
            padding: 13px 14px;
            min-height: 90px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 8px
        }

        .path-dash-k {
            color: var(--dim);
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            font-weight: 800
        }

        .path-dash-v {
            color: var(--gold-2);
            font-size: 28px;
            line-height: 1;
            font-weight: 900
        }

        .path-dash-v.user {
            font-size: 18px;
            line-height: 1.2;
            word-break: break-word
        }

        .path-filters {
            display: flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap
        }

        .path-filter {
            border: 1px solid var(--line);
            border-radius: 999px;
            background: rgba(255, 255, 255, .04);
            color: var(--muted);
            padding: 10px 14px;
            font-size: 12px;
            font-weight: 800;
            cursor: pointer;
            transition: .2s transform, .2s border-color, .2s color
        }

        .path-filter.active {
            color: #061022;
            border-color: rgba(255, 231, 150, .8);
            background: linear-gradient(135deg, var(--gold), var(--gold-2))
        }

        .path-grid {
            grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
            gap: 16px
        }

        @keyframes cardRise {
            from {
                opacity: 0;
                transform: translateY(10px) scale(.98)
            }

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

        .path-card {
            --path-color: var(--gold);
            --spot-x: 50%;
            --spot-y: 18%;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            min-height: 296px;
            border: 1px solid rgba(255, 255, 255, .08);
            transition: .24s transform, .24s border-color, .24s box-shadow;
            transform-style: preserve-3d;
            animation: cardRise .46s ease both;
            background:
                linear-gradient(164deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 38%),
                rgba(7, 13, 26, .92)
        }

        .path-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            border: 1px solid color-mix(in srgb, var(--path-color) 55%, transparent);
            opacity: .42;
            pointer-events: none
        }

        .path-card::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: radial-gradient(circle at var(--spot-x) var(--spot-y), rgba(255, 255, 255, .18), transparent 46%);
            opacity: .34;
            pointer-events: none;
            transition: .22s opacity
        }

        .path-card-aura {
            position: absolute;
            inset: -30% -20% auto;
            height: 180px;
            background: radial-gradient(circle, color-mix(in srgb, var(--path-color) 42%, transparent), transparent 68%);
            opacity: .42;
            pointer-events: none;
            z-index: 0
        }

        .path-card>:not(.path-card-aura) {
            position: relative;
            z-index: 1
        }

        .path-card:hover {
            border-color: color-mix(in srgb, var(--path-color) 58%, transparent);
            box-shadow: 0 14px 34px rgba(0, 0, 0, .34), 0 0 24px color-mix(in srgb, var(--path-color) 34%, transparent)
        }

        .path-card.selected {
            border-color: color-mix(in srgb, var(--path-color) 75%, transparent);
            box-shadow: 0 16px 36px rgba(0, 0, 0, .42), 0 0 30px color-mix(in srgb, var(--path-color) 45%, transparent)
        }

        .path-badge {
            border-color: color-mix(in srgb, var(--path-color) 55%, transparent);
            background: color-mix(in srgb, var(--path-color) 24%, transparent)
        }

        .path-progress {
            position: relative;
            height: 10px
        }

        .path-progress>span {
            background: linear-gradient(90deg, color-mix(in srgb, var(--path-color) 65%, #fff), var(--path-color))
        }

        .path-track {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, .08);
            background: rgba(255, 255, 255, .03);
            padding: 10px 11px
        }

        .path-track-k {
            color: var(--muted);
            font-size: 11px;
            font-weight: 700
        }

        .path-track-v {
            color: color-mix(in srgb, var(--path-color) 75%, #fff);
            font-size: 12px;
            font-weight: 900
        }

        .path-footer {
            margin-top: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px
        }

        .path-state {
            border-radius: 999px;
            padding: 8px 12px;
            font-size: 11px;
            font-weight: 800
        }

        .path-state-fresh {
            color: #bae6fd;
            background: rgba(96, 165, 250, .14);
            border: 1px solid rgba(96, 165, 250, .35)
        }

        .path-state-active {
            color: #fde68a;
            background: rgba(245, 158, 11, .14);
            border: 1px solid rgba(245, 158, 11, .35)
        }

        .path-state-mastered {
            color: #bbf7d0;
            background: rgba(16, 185, 129, .16);
            border: 1px solid rgba(16, 185, 129, .38)
        }

        .path-state-locked {
            color: #d1c4ff;
            background: rgba(116, 89, 166, .16);
            border: 1px solid rgba(140, 109, 196, .36)
        }

        .path-card.locked-chain {
            opacity: .82
        }

        .path-card.locked-chain .path-enter {
            opacity: .6;
            cursor: not-allowed;
            filter: grayscale(.15)
        }

        .path-lock-note {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 700;
            color: #d8cbff
        }

        .path-state-coming {
            color: rgba(255, 255, 255, .5);
            background: rgba(255, 255, 255, .06);
            border: 1px solid rgba(255, 255, 255, .1);
            font-style: italic
        }

        .path-card.disabled {
            opacity: .55;
            pointer-events: none
        }

        .path-card.disabled .path-card-aura {
            opacity: .35
        }

        .path-source {
            padding: 0 18px 8px;
            font-size: 11px;
            color: var(--muted);
            font-weight: 600
        }

        .path-source span {
            color: var(--gold);
            font-weight: 800
        }

        .popup-era {
            font-size: 12px;
            color: var(--muted);
            margin-top: 4px;
            font-weight: 600
        }

        .popup-focus {
            font-size: 13px;
            color: var(--muted);
            margin: 6px 0;
            line-height: 1.6;
            text-align: center
        }

        html:not(.en) .popup-focus {
            direction: rtl
        }

        html.en .popup-focus {
            direction: ltr
        }

        .popup-focus strong {
            color: var(--gold);
            font-weight: 800
        }

        .popup-steps-count {
            font-size: 12px;
            color: var(--dim);
            margin: 8px 0 4px;
            font-weight: 700;
            text-align: center
        }

        .path-enter {
            border: none;
            border-radius: 12px;
            cursor: pointer;
            padding: 9px 14px;
            font-size: 12px;
            font-weight: 900;
            color: #061022;
            background: linear-gradient(135deg, color-mix(in srgb, var(--path-color) 80%, #fff), var(--path-color));
            transition: .18s filter, .18s transform
        }

        .path-empty {
            grid-column: 1/-1;
            padding: 26px 20px;
            text-align: center;
            border-radius: 22px;
            color: var(--muted);
            font-weight: 800
        }

        .story-nav button,
        .result-actions button,
        .path-filter,
        .path-enter,
        .level-pill {
            touch-action: manipulation
        }

        @media (hover: hover) {

            .path-enter:hover,
            .path-filter:hover,
            .level-pill:hover,
            .story-nav button:hover,
            .result-actions button:hover {
                transform: translateY(-2px)
            }

            .path-enter:hover {
                filter: brightness(1.08)
            }
        }

        @media (max-width: 1180px) {
            .paths-dashboard {
                grid-template-columns: 1fr 1fr
            }
        }

        @media (max-width: 980px) {
            .path-head {
                align-items: flex-start
            }

            .path-controls {
                flex-direction: column;
                align-items: flex-start
            }

            .home-hero {
                min-height: calc(100vh - 150px)
            }

            .lantern-wrap {
                width: 188px;
                height: 244px
            }

            .lantern-frame {
                width: 142px;
                height: 186px
            }

            .lantern-core {
                top: 92px;
                width: 80px;
                height: 108px
            }

            .success-section {
                grid-template-columns: 1fr
            }

            .purpose-title {
                font-size: 22px
            }
        }

        @media (max-width: 760px) {
            #title {
                padding: 76px 10px 18px
            }

            #paths {
                padding: 84px 10px 16px
            }

            .top-controls {
                width: calc(100% - 8px);
                gap: 8px
            }

            .home-hero {
                min-height: auto
            }

            .lantern-wrap {
                width: 168px;
                height: 220px
            }

            .lantern-handle {
                width: 74px;
                height: 42px
            }

            .lantern-neck {
                width: 64px;
                top: 38px
            }

            .lantern-frame {
                top: 50px;
                width: 126px;
                height: 162px
            }

            .lantern-core {
                top: 82px;
                width: 68px;
                height: 92px
            }

            .lantern-glow {
                width: 184px;
                height: 184px
            }

            .paths-dashboard {
                grid-template-columns: 1fr
            }

            .path-grid {
                grid-template-columns: 1fr
            }

            .path-card {
                min-height: 0
            }

            .level-picker {
                width: 100%
            }

            .level-pill {
                flex: 1 1 calc(33.33% - 10px);
                text-align: center
            }

            .langbar button,
            .backbtn button,
            .startbtn button {
                padding: 8px 10px;
                font-size: 11px
            }

            .purpose-title {
                font-size: 20px
            }
        }

        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: .01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: .01ms !important
            }

            .path-card {
                transform: none !important
            }
        }