:root {
            --bg: #fff;
            --bg-soft: #f4f6fb;
            --line: #e8eaef;
            --ink: #171a23;
            --ink-dim: #6b7280;
            --ink-faint: #a7adba;
            --amber: #ffb627;
            --mint: #12c48b;
            --azure: #2e6bff;
            --violet: #9b5de5;
            --danger: #ff4d4d;
            --stage: #22c55e;
            --btn: #2b2b2b;
            --radius-pill: 999px;
        }

        * {
            box-sizing: border-box
        }

        html,
        body {
            height: 100%;
            overflow: hidden
        }

        body {
            margin: 0;
            background: var(--bg);
            color: var(--ink);
            font-family: 'Alexandria', sans-serif
        }

        h1,
        h2,
        h3,
        .display {
            font-family: 'Alexandria', sans-serif
        }

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

        :focus-visible {
            outline: 3px solid #f5c400;
            outline-offset: 3px;
            border-radius: 6px
        }

        @media(prefers-reduced-motion:reduce) {
            * {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important
            }
        }

        .app {
            height: 100vh;
            display: none;
            flex-direction: column;
            overflow: hidden;
            background: #fafafa;
            padding: 10px 12px 8px
        }

        .app.on {
            display: flex
        }

        .home {
            height: 100vh;
            display: none;
            flex-direction: column;
            background: #f6f3ee;
            overflow: auto
        }

        .home.on {
            display: flex
        }

        .homeBar {
            display: flex;
            align-items: center;
            gap: 18px;
            padding: 14px 28px;
            border-bottom: 1px solid #ebe6dc;
            flex-shrink: 0;
            background: #fff
        }

        .brand {
            font: 800 22px Alexandria;
            color: #171a23
        }

        .homeBar nav {
            display: flex;
            gap: 6px;
            margin-inline-start: 12px
        }

        .homeBar nav span {
            padding: 8px 14px;
            border-radius: 10px;
            font: 700 14px Alexandria;
            color: #6b7280
        }

        .homeBar nav span.on {
            color: #171a23;
            border-bottom: 2px solid #171a23;
            border-radius: 0
        }

        .homeStats {
            margin-inline-start: auto;
            display: flex;
            gap: 10px;
            align-items: center
        }

        .homeGrid {
            flex: 1;
            display: grid;
            grid-template-columns: minmax(260px, 320px) 1fr;
            gap: 22px;
            padding: 22px 28px 40px;
            max-width: 1240px;
            margin: 0 auto;
            width: 100%
        }

        .courseCard {
            background: #fff;
            border: 1.5px solid #ece7dc;
            border-radius: 22px;
            padding: 22px;
            height: fit-content;
            position: sticky;
            top: 16px
        }

        .courseIco {
            width: 88px;
            height: 88px;
            border-radius: 18px;
            background: #f3edff;
            display: grid;
            place-items: center;
            font-size: 42px;
            margin-bottom: 14px
        }

        .courseCard h1 {
            margin: 0 0 8px;
            font: 800 22px/1.35 Alexandria
        }

        .courseCard .lead {
            margin: 0 0 16px;
            color: #6b7280;
            font: 500 14px/1.7 Alexandria
        }

        .courseMeta {
            display: flex;
            gap: 16px;
            color: #52525b;
            font: 700 13px Alexandria
        }

        .courseKeys {
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid #f0f2f6
        }

        .courseKeys h4 {
            margin: 0 0 8px;
            font: 800 12px Alexandria;
            color: #7c5cfc
        }

        .courseKeys ul {
            margin: 0;
            padding: 0 18px 0 0;
            color: #3f3f46;
            font: 500 13px/1.8 Alexandria
        }

        .pathCol {
            min-width: 0
        }

        .levelTag {
            display: inline-block;
            background: #fff;
            border: 3px solid #c4b5fd;
            color: #6d28d9;
            border-radius: 18px;
            padding: 10px 20px;
            font: 800 13px Alexandria;
            margin-bottom: 14px;
            box-shadow: 0 4px 0 #ddd6fe
        }

        .pathStage {
            position: relative;
            border-radius: 28px;
            overflow: hidden;
            min-height: 920px;
            background:
                radial-gradient(circle at 12% 8%, #fff6b0 0 18px, transparent 19px),
                linear-gradient(180deg, #b9e4ff 0%, #eaf6ff 16%, #f6efd4 52%, #e8c48a 100%)
        }

        .pathDecor {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 0
        }

        .pathDecor .sun {
            position: absolute;
            top: 22px;
            left: 8%;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            background: #ffe566;
            box-shadow: 0 0 0 12px rgba(255, 229, 102, .28), 0 0 40px rgba(255, 200, 40, .45)
        }

        .pathDecor .cloud {
            position: absolute;
            background: #fff;
            opacity: .92;
            border-radius: 40px;
            box-shadow: 18px 8px 0 #fff, -22px 10px 0 #fff, 0 14px 0 rgba(180, 210, 230, .25)
        }

        .pathDecor .hill {
            position: absolute;
            bottom: -70px;
            border-radius: 50%;
            background: #b7dc6a
        }

        .pathDecor .hill.b {
            background: #9ecb4c;
            bottom: -90px
        }

        .pathDecor .tree {
            position: absolute;
            bottom: 70px;
            width: 18px;
            height: 54px;
            background: #7a4a2a;
            border-radius: 4px
        }

        .pathDecor .tree::before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 36px;
            width: 64px;
            height: 64px;
            margin-left: -32px;
            border-radius: 50%;
            background: #5daf3a;
            box-shadow: -18px 10px 0 #4c9a2e, 18px 12px 0 #6bc246
        }

        .pathDecor .bird {
            position: absolute;
            font-size: 18px;
            opacity: .7
        }

        .path {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 920px
        }

        .pathTrail {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: visible;
            z-index: 1
        }

        .pnode {
            position: absolute;
            width: 120px;
            margin: 0;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 2
        }

        .pring {
            width: 88px;
            height: 88px;
            border-radius: 50%;
            border: 0;
            cursor: pointer;
            display: grid;
            place-items: center;
            font-size: 32px;
            line-height: 1;
            background: #fff;
            color: #171a23;
            box-shadow: 0 8px 0 #c4b5fd, 0 12px 18px rgba(23, 26, 35, .12);
            transition: transform .12s, box-shadow .12s;
            position: relative;
            z-index: 2
        }

        .pring:hover {
            transform: translateY(-2px)
        }

        .pring:active {
            transform: translateY(4px);
            box-shadow: 0 4px 0 #c4b5fd, 0 6px 10px rgba(23, 26, 35, .1)
        }

        .pnode.done .pring {
            background: #58cc02;
            color: #fff;
            box-shadow: 0 8px 0 #46a302, 0 12px 18px rgba(70, 163, 2, .2);
            font-size: 30px
        }

        .pnode.lock {
            pointer-events: none
        }

        .pnode.lock .pring {
            background: #e5e7eb;
            color: #9ca3af;
            box-shadow: 0 8px 0 #cfd3da;
            cursor: default
        }

        .pnode.lock .pring:hover,
        .pnode.lock .pring:active {
            transform: none
        }

        .pnode.now {
            z-index: 5
        }

        .pnode.now .pring {
            width: 102px;
            height: 102px;
            font-size: 36px;
            background: #7c5cfc;
            color: #fff;
            box-shadow: 0 9px 0 #5b3fd4, 0 14px 22px rgba(124, 92, 252, .28);
            animation: bob 1.8s ease-in-out infinite
        }

        .pnode.now .pring::after {
            content: '';
            position: absolute;
            inset: -12px;
            border-radius: 50%;
            border: 3px solid rgba(124, 92, 252, .3);
            animation: ringPulse 1.8s ease-out infinite
        }

        @keyframes bob {

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

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

        @keyframes ringPulse {
            0% {
                transform: scale(.92);
                opacity: .7
            }

            100% {
                transform: scale(1.18);
                opacity: 0
            }
        }

        .plab {
            margin-top: 10px;
            font: 800 13px/1.35 Alexandria;
            color: #3f3f46;
            text-align: center;
            max-width: 160px;
            text-shadow: 0 1px 0 rgba(255, 255, 255, .75)
        }

        .plab .psub {
            display: block;
            font: 600 11px Alexandria;
            color: #6b6458;
            margin-top: 2px
        }

        .pnode.lock .plab {
            color: #8b8b94
        }

        .pnode.now .plab {
            color: #171a23
        }

        .pcta {
            margin-top: 12px;
            background: #7c5cfc;
            color: #fff;
            border: 0;
            border-radius: 16px;
            padding: 11px 22px;
            font: 800 15px Alexandria;
            cursor: pointer;
            box-shadow: 0 5px 0 #5b3fd4;
            position: relative;
            animation: ctaIn .35s ease;
            z-index: 6
        }

        .pcta:hover {
            filter: brightness(1.06)
        }

        .pcta:active {
            transform: translateY(3px);
            box-shadow: 0 2px 0 #5b3fd4
        }

        .pcta::before {
            content: '';
            position: absolute;
            top: -7px;
            left: 50%;
            transform: translateX(-50%);
            border: 7px solid transparent;
            border-bottom-color: #7c5cfc
        }

        .pcta.review {
            background: #58cc02;
            box-shadow: 0 5px 0 #46a302
        }

        .pcta.review::before {
            border-bottom-color: #58cc02
        }

        @keyframes ctaIn {
            from {
                opacity: 0;
                transform: translateY(8px)
            }
        }

        .pchest {
            position: absolute;
            transform: translate(-50%, -50%);
            width: 64px;
            height: 64px;
            border-radius: 16px;
            background: #ffc107;
            display: grid;
            place-items: center;
            font-size: 30px;
            box-shadow: 0 7px 0 #d39e00;
            z-index: 2
        }

        .pchest.lock {
            background: #ece8e0;
            box-shadow: 0 7px 0 #cfc8ba;
            filter: grayscale(.35)
        }

        .pflag {
            position: absolute;
            transform: translate(-50%, -50%);
            font-size: 42px;
            z-index: 2;
            filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .12))
        }

        .startPop {
            display: none
        }

        @media(max-width:860px) {
            .homeGrid {
                grid-template-columns: 1fr
            }

            .courseCard {
                position: static
            }
        }

        .frame {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1.5px solid #eceef3;
            border-radius: 22px;
            overflow: hidden;
            position: relative;
            transition: box-shadow .25s, border-color .25s
        }

        .frame.wrong {
            border-color: #f5c400;
            box-shadow: 0 0 0 3px #f5c400 inset, 0 0 0 8px rgba(245, 196, 0, .18)
        }

        .frame.good {
            border-color: #bbf7d0;
            box-shadow: 0 0 0 3px #bbf7d0 inset
        }

        .topbar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 16px 8px;
            flex-shrink: 0;
            background: #fff;
            z-index: 80
        }

        .icoBtn {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            border-radius: 10px;
            cursor: pointer;
            display: grid;
            place-items: center;
            color: #6b7280;
            font-size: 18px
        }

        .icoBtn:hover {
            background: #f4f6fb;
            color: var(--ink)
        }

        .track {
            flex: 1;
            height: 8px;
            background: #eef1f6;
            border-radius: 99px;
            overflow: hidden
        }

        .track i {
            display: block;
            height: 100%;
            width: 0;
            background: var(--stage);
            border-radius: 99px;
            transition: width .4s
        }

        .stat {
            display: flex;
            align-items: center;
            gap: 5px;
            font: 800 14px Alexandria;
            color: var(--ink);
            min-width: 2.4em
        }

        .stat .ico {
            font-size: 16px;
            line-height: 1
        }

        .stat.gems {
            color: #7c5cfc
        }

        .stat.streak {
            color: #f59e0b
        }

        .pill {
            display: flex;
            align-items: center;
            gap: 6px;
            border: 1.5px solid #eceef3;
            border-radius: 99px;
            padding: 6px 12px;
            font: 800 14px Alexandria;
            background: #fff
        }

        .sndBtn {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            border-radius: 10px;
            cursor: pointer;
            display: grid;
            place-items: center;
            color: var(--ink-dim);
            flex-shrink: 0;
            font-size: 16px
        }

        .sndBtn:hover {
            background: #f4f6fb
        }

        .sndBtn.off {
            opacity: .4
        }

        /* المشهد يسار ٢/٣ على خلفية الصفحة مباشرة */
        .viewport {
            flex: 1;
            min-height: 0;
            position: relative;
            display: flex;
            flex-direction: row;
            direction: ltr;
            align-items: stretch;
            overflow: hidden;
            padding: 4px 20px 8px;
            gap: 20px
        }

        .art {
            position: relative;
            flex: 1 1 58%;
            min-width: 0;
            min-height: 0;
            width: auto;
            max-width: none;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .art svg {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%
        }

        .textSide {
            position: static;
            direction: rtl;
            flex: 0 1 440px;
            width: auto;
            max-width: 460px;
            min-height: 0;
            overflow-x: hidden;
            overflow-y: auto;
            z-index: 20;
            padding: 4px 4px 0
        }

        .q {
            font-family: Alexandria;
            font-weight: 800;
            font-size: clamp(15px, 1.4vw, 17.5px);
            line-height: 1.55;
            margin: 0
        }

        .q .sub {
            display: block;
            font: 600 12.5px Alexandria;
            color: var(--ink-dim);
            margin-top: 4px;
            min-height: 0;
            line-height: 1.45
        }

        .caret {
            display: inline-block;
            width: 8px;
            height: 1.05em;
            background: #f5c400;
            vertical-align: -2px;
            margin-inline-start: 2px;
            animation: crB .8s steps(1) infinite;
            border-radius: 2px
        }

        @keyframes crB {
            50% {
                opacity: 0
            }
        }

        /* زرّا التنقل: تخطي + التالي فقط */
        .dock {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 18px 16px;
            position: relative
        }

        .hintChip {
            position: absolute;
            right: 22px;
            bottom: 18px;
            max-width: 240px;
            background: #fff4cc;
            border: none;
            border-radius: 14px;
            padding: 10px 14px;
            font: 700 13px/1.45 Alexandria;
            color: #5c4a12;
            display: none;
            box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
        }

        .frame.wrong .hintChip {
            display: block
        }

        .navbtn {
            font-family: 'Alexandria', sans-serif;
            font-weight: 800;
            font-size: 15px;
            border: none;
            cursor: pointer;
            padding: 13px 36px;
            border-radius: var(--radius-pill);
            transition: transform .15s, opacity .15s, background .2s
        }

        .navbtn.next {
            background: var(--btn);
            color: #fff
        }

        .navbtn.next:hover {
            transform: translateY(-1px);
            background: #1a1a1a
        }

        .navbtn.next:disabled {
            background: #e8eaef;
            color: #b0b5c0;
            cursor: not-allowed;
            transform: none
        }

        .navbtn.skip,
        .navbtn.try {
            background: #eef1f6;
            color: #3a3f4b;
            padding: 13px 22px
        }

        .navbtn.skip:hover,
        .navbtn.try:hover {
            background: #e4e7ee
        }

        .navbtn.try {
            background: #f5c400;
            color: #171a23;
            display: none
        }

        .frame.wrong .navbtn.try {
            display: inline-flex
        }

        .frame.wrong .navbtn.next {
            display: none
        }

        @keyframes pulseGlow {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(43, 43, 43, .0)
            }

            50% {
                box-shadow: 0 0 0 6px rgba(43, 43, 43, .08)
            }
        }

        .navbtn.next.pulse-glow {
            animation: pulseGlow 1.2s ease-in-out 3
        }

        .lab {
            position: absolute;
            transform: translate(-50%, -50%) scale(.6);
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 999px;
            padding: 3px 11px;
            font: 800 clamp(10px, 1.3vw, 13px) Alexandria;
            color: var(--ink);
            white-space: nowrap;
            box-shadow: 0 2px 8px rgba(23, 26, 35, .08);
            pointer-events: none;
            z-index: 5;
            opacity: 0;
            transition: .4s cubic-bezier(.34, 1.5, .64, 1)
        }

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

        .lab.dim {
            color: var(--ink-dim)
        }

        .lab.good {
            background: #f2fbf8;
            border-color: #c9ecdd;
            color: #0a7a54
        }

        .stamp {
            position: absolute;
            transform: translate(-50%, -50%) rotate(-3deg) scale(.6);
            opacity: 0;
            background: #fff;
            border: 2.5px solid var(--violet);
            border-radius: 14px;
            padding: 5px 16px;
            font: 900 clamp(13px, 1.6vw, 16px) Alexandria;
            color: var(--violet);
            z-index: 7;
            pointer-events: none;
            transition: .35s cubic-bezier(.34, 1.5, .64, 1)
        }

        .stamp.on {
            opacity: 1;
            transform: translate(-50%, -50%) rotate(-3deg) scale(1)
        }

        .hud {
            position: absolute;
            top: 2%;
            left: 3%;
            background: #171a23;
            color: #ffd76e;
            border-radius: 99px;
            padding: 4px 13px;
            font: 800 clamp(9px, 1.1vw, 11.5px) Alexandria;
            z-index: 6;
            opacity: 0;
            transition: .3s;
            pointer-events: none
        }

        .hud.on {
            opacity: 1
        }

        .sceneBtn {
            position: absolute;
            transform: translate(-50%, -50%);
            background: #f5c400;
            color: #161922;
            border: none;
            border-radius: 999px;
            padding: 8px 18px;
            font: 800 clamp(10px, 1.2vw, 12.5px) Alexandria;
            cursor: pointer;
            box-shadow: 0 3px 0 #d4a800, 0 6px 14px rgba(0, 0, 0, .12);
            z-index: 6;
            white-space: nowrap;
            transition: transform .15s, background .3s
        }

        .sceneBtn:hover {
            transform: translate(-50%, -54%)
        }

        .sceneBtn:active {
            transform: translate(-50%, -47%)
        }

        .sceneBtn.armed {
            background: #12c48b;
            color: #fff
        }

        .spark {
            position: absolute;
            width: 7px;
            height: 7px;
            border-radius: 2px;
            z-index: 10;
            pointer-events: none;
            animation: sparkA .65s cubic-bezier(.2, .7, .4, 1) forwards
        }

        @keyframes sparkA {
            0% {
                transform: translate(0, 0) scale(1) rotate(0);
                opacity: 1
            }

            100% {
                transform: translate(var(--tx, 20px), var(--ty, -40px)) scale(.15) rotate(200deg);
                opacity: 0
            }
        }

        .tipBox {
            position: fixed;
            z-index: 999;
            background: #171a23;
            color: #fff;
            border-radius: 99px;
            padding: 4px 12px;
            font: 800 11.5px Alexandria;
            pointer-events: none;
            opacity: 0;
            transition: opacity .15s;
            transform: translate(-50%, -130%);
            white-space: nowrap;
            box-shadow: 0 6px 16px rgba(0, 0, 0, .25)
        }

        .tipBox.on {
            opacity: 1
        }

        .iso-tip {
            pointer-events: none
        }

        .iso-pop {
            transform-origin: 50% 100%;
            animation: isoPop .28s cubic-bezier(.34, 1.45, .64, 1)
        }

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

            to {
                opacity: 1;
                transform: none
            }
        }

        .nudge {
            font-size: 12.5px;
            font-weight: 700;
            color: var(--danger);
            text-align: center;
            min-height: 0;
            margin: 6px 0 0;
            line-height: 1.45
        }

        .nudge:empty {
            display: none;
            margin: 0
        }

        .nudge.good {
            color: #0a7a54
        }

        #ix {
            margin-top: 10px
        }

        .opts {
            display: flex;
            flex-direction: column;
            gap: 7px
        }

        .opt {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 9px 12px;
            font: 800 13.5px Alexandria;
            color: var(--ink);
            cursor: pointer;
            text-align: center;
            transition: .15s
        }

        .opt:hover:not(:disabled) {
            border-color: var(--stage);
            transform: translateY(-1px)
        }

        .opt.ok {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54
        }

        .opt.no {
            border-color: #ff4d4d;
            background: #fff2f2;
            color: #ff4d4d;
            animation: shk .4s
        }

        .opt.fade {
            opacity: .35;
            pointer-events: none
        }

        @keyframes shk {
            20% {
                transform: translateX(5px)
            }

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

            60% {
                transform: translateX(3px)
            }

            80% {
                transform: translateX(-3px)
            }
        }

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

        .tfBtn {
            flex: 1;
            max-width: 170px;
            border: 2.5px solid var(--line);
            background: #fff;
            border-radius: 14px;
            padding: 11px;
            font: 900 15px Alexandria;
            cursor: pointer;
            transition: .15s
        }

        .tfBtn:hover {
            border-color: var(--stage)
        }

        .tfBtn.ok {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54
        }

        .tfBtn.no {
            border-color: #ff4d4d;
            background: #fff2f2;
            color: #ff4d4d;
            animation: shk .4s
        }

        .tfDots {
            display: flex;
            gap: 5px;
            justify-content: center
        }

        .tfDots i {
            width: 9px;
            height: 9px;
            border-radius: 99px;
            background: #e4e7f0
        }

        .tfDots i.done {
            background: #12c48b
        }

        .tfDots i.now {
            background: var(--stage)
        }

        .typeRow {
            display: flex;
            gap: 8px
        }

        .typeIn {
            flex: 1;
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 10px 12px;
            font: 700 14px Alexandria;
            color: var(--ink);
            background: #fff;
            transition: .2s
        }

        .typeIn:focus {
            border-color: #2e6bff;
            outline: none
        }

        .typeIn.ok {
            border-color: #12c48b;
            background: #f2fbf8
        }

        .typeIn.no {
            border-color: #ff4d4d;
            animation: shk .4s
        }

        .typeGo {
            background: #2e6bff;
            color: #fff;
            border: none;
            border-radius: 14px;
            padding: 12px 22px;
            font: 800 14px Alexandria;
            cursor: pointer
        }

        .hintT {
            font-size: 12px;
            font-weight: 700;
            color: var(--ink-faint);
            text-align: center;
            line-height: 1.45
        }

        .multiRow {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center
        }

        .mchip {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 99px;
            padding: 7px 14px;
            font: 800 12.5px Alexandria;
            cursor: pointer;
            transition: .15s;
            user-select: none
        }

        .mchip:hover {
            border-color: var(--stage)
        }

        .mchip.sel {
            border-color: #2e6bff;
            background: #e8efff;
            color: #1d4ecc
        }

        .mchip.ok {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54
        }

        .mchip.no {
            border-color: #ff4d4d;
            opacity: .6
        }

        .verify {
            align-self: center;
            background: var(--stage);
            color: #161922;
            border: none;
            border-radius: 99px;
            padding: 10px 30px;
            font: 800 14px Alexandria;
            cursor: pointer;
            box-shadow: 0 3px 0 color-mix(in srgb, var(--stage) 65%, black);
            margin-top: 10px
        }

        .matchWrap {
            position: relative
        }

        .matchCols {
            display: flex;
            gap: 14px;
            justify-content: center
        }

        .mCol {
            display: flex;
            flex-direction: column;
            gap: 7px;
            flex: 1;
            max-width: 180px
        }

        .mItem {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 12px;
            padding: 8px 10px;
            font: 700 12px Alexandria;
            cursor: pointer;
            transition: .15s;
            position: relative;
            text-align: center
        }

        .mItem:hover {
            border-color: var(--stage)
        }

        .mItem.pick {
            border-color: #2e6bff;
            background: #e8efff
        }

        .mItem.done {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54;
            cursor: default
        }

        .mItem.no {
            border-color: #ff4d4d;
            animation: shk .4s
        }

        #matchSvg {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 4
        }

        .dragZone {
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .binRow {
            display: flex;
            gap: 9px;
            flex-wrap: wrap;
            justify-content: center
        }

        .bin {
            flex: 1;
            min-width: 105px;
            max-width: 190px;
            border: 2px dashed #c9d2e4;
            border-radius: 14px;
            background: #f8fafd;
            padding: 9px 8px 7px;
            min-height: 74px;
            transition: .2s;
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: center
        }

        .bin.hot {
            border-color: var(--stage);
            background: #fffaf0;
            transform: scale(1.02)
        }

        .bin.wrong {
            border-color: #ff4d4d;
            animation: shk .4s
        }

        .binT {
            font: 800 11px Alexandria;
            color: var(--ink-dim);
            text-align: center
        }

        .binN {
            font: 800 10px Alexandria;
            color: var(--ink-faint)
        }

        .chipRow {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center;
            min-height: 44px;
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 14px;
            padding: 8px
        }

        .dchip {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 99px;
            padding: 8px 15px;
            font: 800 12px Alexandria;
            cursor: grab;
            user-select: none;
            touch-action: none;
            transition: .15s;
            z-index: 5
        }

        .dchip:active {
            cursor: grabbing
        }

        .dchip.done {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54;
            cursor: default
        }

        .dchip.no {
            border-color: #ff4d4d;
            animation: shk .4s
        }

        .ghost {
            position: fixed;
            z-index: 99;
            pointer-events: none;
            transform: translate(-50%, -50%) scale(1.05);
            box-shadow: 0 10px 24px rgba(23, 26, 35, .22);
            opacity: .92
        }

        .ordRow {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center
        }

        .ochip {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 12px;
            padding: 8px 12px;
            font: 800 12.5px Alexandria;
            cursor: pointer;
            transition: .15s;
            position: relative;
            user-select: none
        }

        .ochip:hover {
            border-color: var(--stage)
        }

        .ochip .n {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--stage);
            color: #161922;
            border-radius: 99px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font: 800 11px Alexandria
        }

        .ochip.ok {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54;
            pointer-events: none
        }

        .ochip.ok .n {
            background: #12c48b;
            color: #fff
        }

        .fillP {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 11px 14px;
            font: 700 13px/2 Alexandria;
            text-align: center
        }

        .blank {
            display: inline-block;
            min-width: 64px;
            border-bottom: 2.5px dashed #c9d2e4;
            margin: 0 3px;
            padding: 0 6px;
            font: 800 13px Alexandria;
            color: #2e6bff;
            cursor: pointer;
            transition: .15s
        }

        .blank.act {
            border-color: var(--stage);
            background: #fffaf0
        }

        .blank.done {
            border: 2px solid #12c48b;
            border-radius: 8px;
            background: #ecfaf4;
            color: #0a7a54;
            border-bottom-width: 2px
        }

        .blank.no {
            border-color: #ff4d4d;
            animation: shk .4s
        }

        .essBox {
            width: 100%;
            min-height: 72px;
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 10px 12px;
            font: 500 13px/1.8 Alexandria;
            resize: vertical;
            background: #fff
        }

        .essBox:focus {
            border-color: #9b5de5;
            outline: none
        }

        .kwRow {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            justify-content: center
        }

        .kw {
            background: #fff;
            border: 1.5px solid var(--line);
            border-radius: 99px;
            padding: 4px 12px;
            font: 700 11px Alexandria;
            color: var(--ink-faint);
            transition: .2s
        }

        .kw.hit {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54
        }

        .survRow {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            justify-content: center
        }

        .schip {
            background: #fff;
            border: 2px solid var(--line);
            border-radius: 99px;
            padding: 7px 14px;
            font: 800 12.5px Alexandria;
            cursor: pointer;
            transition: .15s
        }

        .schip:hover {
            border-color: var(--stage)
        }

        .schip.pick {
            border-color: #12c48b;
            background: #ecfaf4;
            color: #0a7a54
        }

        .chartBars {
            display: flex;
            gap: 14px;
            justify-content: center;
            align-items: flex-end;
            height: 120px;
            border-bottom: 2.5px solid #c9d2e4;
            padding: 0 8px
        }

        .cbar {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
            width: 64px
        }

        .cbar .stick {
            width: 38px;
            background: #eef1f8;
            border-radius: 8px 8px 0 0;
            height: 4px;
            transition: height .3s;
            overflow: hidden;
            cursor: pointer
        }

        .cbar .stick i {
            display: block;
            width: 100%;
            height: 100%;
            background: var(--stage)
        }

        .cbar .vt {
            font: 800 13px Alexandria;
            color: var(--ink)
        }

        .cbar .bt {
            font: 700 10.5px Alexandria;
            color: var(--ink-dim)
        }

        /* مشي ووقوف */
        .wBob {
            animation: wBobA .38s ease-in-out infinite
        }

        @keyframes wBobA {

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

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

        .wLegF {
            transform-box: fill-box;
            transform-origin: 50% 6%;
            animation: wLegA .76s ease-in-out infinite
        }

        .wLegB {
            transform-box: fill-box;
            transform-origin: 50% 6%;
            animation: wLegA .76s ease-in-out infinite reverse
        }

        @keyframes wLegA {

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

            50% {
                transform: rotate(-12deg)
            }
        }

        .wArmF {
            transform-box: fill-box;
            transform-origin: 50% 8%;
            animation: wArmA .76s ease-in-out infinite
        }

        .wArmB {
            transform-box: fill-box;
            transform-origin: 50% 8%;
            animation: wArmA .76s ease-in-out infinite reverse
        }

        @keyframes wArmA {

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

            50% {
                transform: rotate(-9deg)
            }
        }

        .idleTop {
            animation: idleTopA 4.5s ease-in-out infinite
        }

        @keyframes idleTopA {
            50% {
                transform: translateY(-1px)
            }
        }

        /* حياة المشاهد */
        .twk {
            animation: twk 2.8s ease-in-out infinite
        }

        @keyframes twk {
            50% {
                opacity: .15
            }
        }

        .pulsR {
            transform-box: fill-box;
            transform-origin: center;
            animation: tp 1.5s infinite;
            pointer-events: none
        }

        @keyframes tp {
            0% {
                transform: scale(.6);
                opacity: .9
            }

            70%,
            100% {
                transform: scale(1.45);
                opacity: 0
            }
        }

        .flowline {
            stroke-dasharray: 4 8;
            animation: dm 1.1s linear infinite
        }

        @keyframes dm {
            to {
                stroke-dashoffset: -12
            }
        }

        .steamS {
            animation: stm 2.6s ease-out infinite
        }

        @keyframes stm {
            0% {
                transform: translateY(0);
                opacity: 0
            }

            25% {
                opacity: .6
            }

            100% {
                transform: translateY(-12px);
                opacity: 0
            }
        }

        .smokeS {
            animation: smk 4s ease-out infinite
        }

        @keyframes smk {
            0% {
                transform: translate(0, 0) scale(.6);
                opacity: 0
            }

            20% {
                opacity: .5
            }

            100% {
                transform: translate(-9px, -24px) scale(1.5);
                opacity: 0
            }
        }

        .ctTail {
            transform-box: fill-box;
            transform-origin: 15% 100%;
            animation: ctTl 3.8s ease-in-out infinite
        }

        @keyframes ctTl {

            0%,
            100% {
                transform: rotate(-6deg)
            }

            50% {
                transform: rotate(6deg)
            }
        }

        .breathe {
            transform-box: fill-box;
            transform-origin: 50% 100%;
            animation: brth 5s ease-in-out infinite
        }

        @keyframes brth {
            50% {
                transform: scale(1.02)
            }
        }

        .balnF {
            animation: balnA 5.5s ease-in-out infinite
        }

        @keyframes balnA {
            50% {
                transform: translateY(-5px)
            }
        }

        .cloudD {
            animation: cld 11s ease-in-out infinite
        }

        .cloudD.c2 {
            animation-duration: 15s;
            animation-delay: -5s
        }

        @keyframes cld {
            50% {
                transform: translateX(-14px)
            }
        }

        .fanSpin {
            transform-box: fill-box;
            transform-origin: center;
            animation: fanS .5s linear infinite
        }

        .reelSpin {
            transform-box: fill-box;
            transform-origin: center;
            animation: fanS 3.2s linear infinite
        }

        @keyframes fanS {
            to {
                transform: rotate(360deg)
            }
        }

        .ledB {
            animation: ledBf 1.4s steps(1) infinite
        }

        @keyframes ledBf {

            0%,
            49% {
                opacity: 1
            }

            50%,
            100% {
                opacity: .15
            }
        }

        .flagW {
            transform-box: fill-box;
            transform-origin: 0% 50%;
            animation: flw 2.6s ease-in-out infinite
        }

        @keyframes flw {
            50% {
                transform: skewY(4deg) scaleY(.96)
            }
        }

        .curtS {
            transform-box: fill-box;
            transform-origin: 50% 0%;
            animation: crt 5s ease-in-out infinite
        }

        @keyframes crt {
            50% {
                transform: skewX(-2deg)
            }
        }

        @keyframes popI {
            0% {
                opacity: 0;
                transform: scale(.4)
            }

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

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

        .popG {
            opacity: 0;
            transform-box: fill-box;
            transform-origin: center
        }

        .popG.on {
            opacity: 1;
            animation: popI .5s cubic-bezier(.34, 1.5, .64, 1)
        }

        .driving {
            transition: transform 2.6s cubic-bezier(.4, 0, .4, 1)
        }

        .hsG {
            cursor: pointer
        }

        .hsG:hover {
            filter: brightness(1.08) saturate(1.06)
        }

        .scanY {
            animation: scanYv .9s ease-in-out 2
        }

        @keyframes scanYv {

            0%,
            100% {
                transform: translateY(-9px)
            }

            50% {
                transform: translateY(9px)
            }
        }

        .swingSign {
            transform-box: fill-box;
            transform-origin: 50% 0;
            animation: swg 4s ease-in-out infinite
        }

        @keyframes swg {

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

            50% {
                transform: rotate(-2.5deg)
            }
        }

        .canopy {
            transform-box: fill-box;
            transform-origin: 50% 0;
            animation: cpy 7s ease-in-out infinite
        }

        @keyframes cpy {
            50% {
                transform: skewX(.8deg)
            }
        }

        .bulbT {
            animation: bulbA 3.2s ease-in-out infinite
        }

        @keyframes bulbA {
            50% {
                opacity: .25
            }
        }

        .exh {
            animation: exhA 1.7s ease-out infinite
        }

        .exh.e2 {
            animation-delay: .55s
        }

        .exh.e3 {
            animation-delay: 1.1s
        }

        @keyframes exhA {
            0% {
                opacity: .45;
                transform: translate(0, 0) scale(.5)
            }

            100% {
                opacity: 0;
                transform: translate(-30px, -6px) scale(1.8)
            }
        }

        .hubSpin {
            transform-box: fill-box;
            transform-origin: center;
            animation: fanS 1.1s linear infinite
        }

        .wingL {
            transform-box: fill-box;
            transform-origin: 100% 50%;
            animation: wng .22s ease-in-out infinite alternate
        }

        .wingR {
            transform-box: fill-box;
            transform-origin: 0% 50%;
            animation: wng .22s ease-in-out infinite alternate-reverse
        }

        @keyframes wng {
            to {
                transform: scaleX(.25)
            }
        }

        .tapeCard {
            animation: tcard 5s ease-in-out infinite
        }

        @keyframes tcard {

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

            45%,
            70% {
                transform: translateX(-15px)
            }

            100% {
                transform: translateX(0)
            }
        }

        .glowC {
            animation: glc 2.2s ease-in-out infinite
        }

        @keyframes glc {
            50% {
                opacity: .4
            }
        }

        @media(max-width:1020px) {
            .viewport {
                flex-direction: column;
                overflow: hidden;
                direction: rtl;
                padding: 4px 12px 8px;
                gap: 8px
            }

            .art {
                flex: 0 0 38vh;
                max-height: 38vh;
                width: 100%;
                max-width: none
            }

            .textSide {
                flex: 1 1 auto;
                width: auto;
                max-width: none;
                overflow-y: auto;
                padding: 8px 0 0
            }

            .topbar {
                padding: 10px 12px 6px
            }

            .hintChip {
                right: 12px;
                left: 12px;
                max-width: none;
                bottom: 70px
            }

            .dock {
                padding: 12px
            }
        }

        /* شرح — نافذة صغيرة داخل عمود النص */
        .bitWin {
            display: none;
            margin-top: 12px;
            position: relative;
            background: #fff;
            border: 2px solid #e6e9f2;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(23, 26, 35, .13), 0 1px 0 #fff inset
        }

        .bitWin.on {
            display: block;
            animation: bitIn .45s cubic-bezier(.34, 1.45, .64, 1) both
        }

        @keyframes bitIn {
            from {
                opacity: 0;
                transform: translateY(18px) scale(.92)
            }

            to {
                opacity: 1;
                transform: none
            }
        }

        .bitBar {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: linear-gradient(#fffdf8, #fff6e4);
            border-bottom: 1.5px solid #f0ddb0
        }

        .bitDots {
            display: flex;
            gap: 5px
        }

        .bitDots i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: block
        }

        .bitDots i:nth-child(1) {
            background: #ff5c7a
        }

        .bitDots i:nth-child(2) {
            background: #ffb627
        }

        .bitDots i:nth-child(3) {
            background: #12c48b
        }

        .bitBar h3 {
            margin: 0;
            font: 800 12px Alexandria;
            color: #9a6b00;
            letter-spacing: .02em
        }

        .bitBadge {
            margin-inline-start: auto;
            background: #ecfaf4;
            color: #0a7a54;
            border-radius: 99px;
            padding: 1px 8px;
            font: 800 10.5px Alexandria
        }

        .bitBody {
            padding: 11px 13px 12px;
            background: #f4fbf8;
            font: 500 13px/1.75 Alexandria;
            color: #16382c
        }

        .bitBody b {
            font-family: Alexandria;
            font-weight: 800;
            color: #085133
        }

        .textSide.solved #ix {
            opacity: .42;
            pointer-events: none;
            transition: opacity .35s
        }

        .textSide.solved .q {
            opacity: .72;
            transition: opacity .35s
        }

        /* تطبيق مفتوح بكامل الشاشة */
        .appScrim {
            position: fixed;
            inset: 0;
            z-index: 230;
            background: rgba(23, 26, 35, .45);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity .28s
        }

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

        .phoneFull {
            width: min(340px, 86vw);
            height: min(640px, 88vh);
            background: #0f1218;
            border-radius: 42px;
            padding: 12px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
            position: relative;
            transform: scale(.86);
            transition: transform .4s cubic-bezier(.34, 1.4, .64, 1)
        }

        .appScrim.on .phoneFull {
            transform: scale(1)
        }

        .appNotch {
            position: absolute;
            top: 18px;
            left: 50%;
            transform: translateX(-50%);
            width: 92px;
            height: 22px;
            background: #0f1218;
            border-radius: 99px;
            z-index: 3
        }

        .appScreen {
            height: 100%;
            border-radius: 32px;
            overflow: hidden;
            position: relative;
            background: #fff
        }

        .appClose {
            position: absolute;
            top: 14px;
            left: 14px;
            z-index: 5;
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 14px;
            background: rgba(255, 255, 255, .92);
            color: #171a23;
            font: 800 18px Alexandria;
            cursor: pointer;
            box-shadow: 0 4px 14px rgba(0, 0, 0, .12)
        }

        .appAuto {
            position: absolute;
            bottom: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            font: 800 12px Alexandria;
            color: #fff;
            background: rgba(23, 26, 35, .45);
            padding: 5px 12px;
            border-radius: 99px;
            backdrop-filter: blur(8px)
        }

        .appSplash {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 28px 22px 48px;
            text-align: center;
            color: #fff
        }

        .appSplash h3 {
            font: 800 28px Alexandria;
            margin: 14px 0 6px
        }

        .appSplash p {
            margin: 0;
            font: 600 15px Alexandria;
            opacity: .9;
            line-height: 1.6;
            max-width: 260px
        }

        .splIco {
            width: 88px;
            height: 88px;
            border-radius: 26px;
            display: grid;
            place-items: center;
            font-size: 42px;
            box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
            animation: splPop .55s cubic-bezier(.34, 1.5, .64, 1)
        }

        @keyframes splPop {
            from {
                transform: scale(.4);
                opacity: 0
            }

            to {
                transform: none;
                opacity: 1
            }
        }

        .chatDemo {
            width: 100%;
            margin-top: 22px;
            display: flex;
            flex-direction: column;
            gap: 8px
        }

        .bub {
            align-self: flex-start;
            background: rgba(255, 255, 255, .18);
            border-radius: 16px 16px 16px 4px;
            padding: 8px 12px;
            font: 700 13px Alexandria;
            animation: bubIn .45s ease both
        }

        .bub.me {
            align-self: flex-end;
            background: #fff;
            color: #171a23;
            border-radius: 16px 16px 4px 16px
        }

        @keyframes bubIn {
            from {
                opacity: 0;
                transform: translateY(8px)
            }
        }

        .storeGrid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            width: 100%;
            margin-top: 20px
        }

        .storeCard {
            background: rgba(255, 255, 255, .16);
            border-radius: 16px;
            padding: 14px 8px;
            font: 800 13px Alexandria;
            animation: bubIn .45s ease both
        }

        .vidFrame {
            width: 100%;
            aspect-ratio: 16/10;
            background: #171a23;
            border-radius: 18px;
            margin-top: 22px;
            display: grid;
            place-items: center;
            position: relative;
            overflow: hidden
        }

        .vidPlay {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #fff;
            display: grid;
            place-items: center;
            font-size: 22px;
            color: #9b5de5;
            animation: splPop .5s .2s both
        }

        .feedCard {
            width: 100%;
            background: rgba(255, 255, 255, .16);
            border-radius: 18px;
            padding: 14px;
            margin-top: 18px;
            text-align: right
        }