:root{--terracotta:#c75b39;--terracotta-deep:#a8421f;--teal:#2e7d77;--gold:#e8a33d;--ink:#3a2e25;--ink-2:#6b5746;--cream:#f4ecdd;--surface:#fffdf8;--success:#4caf82;--line-strong:#4a301e29;--navy:#1e2740;--orange:#e8743b;--cream-card:#f4efe1;--yellow:#f4cf45;--yellow-fill:#f1e2a4;--slate:#59626f;--border-w:3px;--shadow-card:0 9px 22px #1e274038;--shadow-btn:0 6px 15px #1e274038;--shadow-btn-press:0 2px 6px #1e274033;--r-md:16px;--r-lg:24px;--r-xl:30px;--r-pill:999px;--shadow-sm:0 1px 2px #4a301e1a, 0 2px 8px #4a301e14;--shadow-md:0 2px 6px #4a301e1a, 0 10px 24px #4a301e24;--shadow-lg:0 8px 18px #4a301e24, 0 28px 56px #4a301e38;--shadow-pop:0 12px 28px #4a301e2e, 0 44px 88px #4a301e4d;--ease:cubic-bezier(.22, 1, .36, 1);--dur-1:.14s;--dur-2:.24s;--z-vignette:1;--z-hud:10;--z-toast:30;--z-modal:40;--theme:var(--terracotta);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{background:var(--cream);color:var(--ink);overscroll-behavior:none;font-family:Nunito,system-ui,-apple-system,sans-serif;overflow:hidden}canvas{touch-action:none;outline:none;display:block}.app{position:fixed;inset:0;overflow:hidden}.overlay{pointer-events:none;z-index:var(--z-hud);color:var(--navy);-webkit-user-select:none;user-select:none;font-family:Nunito,system-ui,-apple-system,sans-serif;position:absolute;inset:0}.overlay button{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;font-family:inherit}.overlay button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.vignette{pointer-events:none;z-index:var(--z-vignette);background:radial-gradient(125% 95% at 50% 36%,#0000 55%,#1e181029 100%);position:absolute;inset:0}.play{position:absolute;inset:0}.topbar{z-index:2;justify-content:center;width:min(92vw,540px);display:flex;position:absolute;top:clamp(14px,3.2vh,30px);left:50%;transform:translate(-50%)}@media (width<=1000px){.topbar{top:clamp(78px,11vh,100px)}}.bubble{background:var(--cream-card);border:var(--border-w) solid var(--navy);max-width:100%;box-shadow:var(--shadow-card);transition:transform var(--dur-1) var(--ease);border-radius:18px;align-items:center;gap:clamp(10px,1.6vw,16px);padding:clamp(8px,1.4vh,12px) clamp(12px,1.8vw,18px);display:flex}@media (hover:hover){.bubble:hover{transform:translateY(-2px)}}.bubble:active{transform:translateY(1px)}.bubble-chip{border:2px solid var(--navy);width:clamp(36px,5vw,46px);height:clamp(36px,5vw,46px);color:var(--navy);background:color-mix(in srgb, var(--orange) 20%, white);border-radius:12px;flex:none;place-items:center;font-size:clamp(16px,2.5vw,22px);display:grid}.bubble-text{text-align:left;text-wrap:balance;min-height:1.2em;color:var(--navy);flex:auto;font-size:clamp(17px,3vw,25px);font-weight:800;line-height:1.15}.bubble-speaker{border:2px solid var(--navy);width:clamp(34px,4.6vw,42px);height:clamp(34px,4.6vw,42px);color:var(--navy);background:color-mix(in srgb, var(--yellow) 35%, white);transition:transform var(--dur-1) var(--ease);border-radius:12px;flex:none;place-items:center;font-size:clamp(14px,2.1vw,19px);display:grid}@media (hover:hover){.bubble:hover .bubble-speaker{transform:scale(1.06)}}.hud{justify-content:space-between;align-items:flex-start;gap:12px;padding:clamp(12px,2.2vh,20px);display:flex;position:absolute;inset:0 0 auto}.dots{background:var(--cream-card);border:2px solid var(--navy);border-radius:var(--r-pill);box-shadow:var(--shadow-btn);align-items:center;gap:clamp(6px,1vw,9px);padding:9px 13px;display:flex}.dot{background:color-mix(in srgb, var(--navy) 22%, var(--cream-card));width:11px;height:11px;transition:background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);border-radius:50%}.dot.done{background:var(--orange)}.dot.current{background:var(--navy);box-shadow:0 0 0 3px color-mix(in srgb, var(--yellow) 75%, transparent);transform:scale(1.4)}.hud-right{align-items:center;gap:clamp(8px,1.2vw,12px);display:flex}.scorechip{border:var(--border-w) solid var(--navy);height:clamp(44px,6vw,52px);color:var(--navy);background:var(--yellow-fill);box-shadow:var(--shadow-btn);border-radius:14px;align-items:center;gap:6px;padding:0 clamp(15px,1.8vw,20px);font-size:clamp(16px,2.2vw,21px);font-weight:900;display:inline-flex}.scorechip .star{align-items:center;display:inline-flex}.iconbtn{background:var(--cream-card);border:var(--border-w) solid var(--navy);width:clamp(44px,6vw,52px);height:clamp(44px,6vw,52px);color:var(--navy);box-shadow:var(--shadow-btn);transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);border-radius:14px;place-items:center;font-size:clamp(19px,2.5vw,23px);display:grid}@media (hover:hover){.iconbtn:hover{transform:translateY(-2px)}}.iconbtn:active{box-shadow:var(--shadow-btn-press);transform:translateY(3px)}.iconbtn-lang{grid-auto-flow:column;gap:7px;width:auto;padding:0 clamp(11px,1.6vw,15px)}.iconbtn-lang .lang-label{font-size:clamp(15px,1.9vw,18px);font-weight:800;line-height:1}.bigbtn{letter-spacing:.01em;color:#fff;background:var(--orange);border:var(--border-w) solid var(--navy);min-height:58px;box-shadow:var(--shadow-btn);transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), filter var(--dur-1) var(--ease);border-radius:18px;justify-content:center;align-items:center;gap:8px;padding:0 clamp(26px,3.8vw,40px);font-family:Nunito,system-ui,sans-serif;font-size:clamp(18px,2.6vw,23px);font-weight:800;display:inline-flex}@media (hover:hover){.bigbtn:hover{filter:brightness(1.04);transform:translateY(-2px)}}.bigbtn:active{box-shadow:var(--shadow-btn-press);transform:translateY(3px)}.cardback{z-index:var(--z-modal);pointer-events:auto;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#18140e80;place-items:center;padding:clamp(16px,4vw,32px);display:grid;position:absolute;inset:0}.card{text-align:center;background:var(--cream-card);border:var(--border-w) solid var(--navy);width:min(92vw,440px);box-shadow:var(--shadow-card);border-radius:22px;padding:clamp(24px,4vw,36px) clamp(22px,4vw,34px) clamp(22px,4vw,30px);position:relative}.card-spotlight{border:var(--border-w) solid var(--navy);background:radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--theme) 32%, white), color-mix(in srgb, var(--theme) 10%, white));border-radius:50%;place-items:center;width:clamp(110px,27vw,144px);height:clamp(110px,27vw,144px);margin:0 auto clamp(12px,2vw,18px);display:grid}.card-emoji{font-size:clamp(54px,13vw,78px);line-height:1}.card-img{object-fit:contain;filter:drop-shadow(0 4px 6px #0000002e);width:88%;height:88%}.drag-hint{border:2px solid var(--navy);color:var(--navy);box-shadow:var(--shadow-btn);pointer-events:none;white-space:nowrap;background:#f4efe1cc;border-radius:999px;align-items:center;gap:7px;padding:5px 12px 5px 8px;font-family:Nunito,system-ui,sans-serif;font-size:clamp(11px,1.5vw,13px);font-weight:700;display:inline-flex;position:absolute;bottom:clamp(12px,3vh,26px);left:50%;transform:translate(-50%)}.drag-hint-ico{width:22px;height:auto;display:block}.kw-cursor-none,.kw-cursor-none *{cursor:none!important}.kw-cursor{z-index:99999;pointer-events:none;will-change:transform;transition:opacity .15s;position:fixed;top:0;left:0}.kw-cursor .kw-arrow,.kw-cursor .kw-hand,.kw-cursor .kw-drag{transition:opacity .13s,transform .13s;display:block;position:absolute;top:0;left:0}.kw-hand-img,.kw-drag-img{filter:drop-shadow(0 3px 4px #0000004d);width:56px;height:auto;display:block}.kw-drag-img{width:52px}.kw-arrow{filter:drop-shadow(0 3px 4px #0000004d);transform-origin:5px 3px;transform:translate(-5px,-3px)}.kw-hand{transform-origin:24px 2px;opacity:0;transform:translate(-24px,-2px)scale(.55)}.kw-drag{transform-origin:26px 25px;opacity:0;transform:translate(-26px,-25px)scale(.6)}.kw-cursor.is-pointing .kw-arrow{opacity:0;transform:translate(-5px,-3px)scale(.55)}.kw-cursor.is-pointing .kw-hand{opacity:1;transform:translate(-24px,-2px)scale(1)}.kw-cursor.is-dragging .kw-arrow{opacity:0;transform:translate(-5px,-3px)scale(.55)}.kw-cursor.is-dragging .kw-drag{opacity:1;transform:translate(-26px,-25px)scale(1)}@keyframes kw-bob{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.kw-cursor.is-pointing .kw-hand-bob{animation:.85s ease-in-out infinite kw-bob}@media (prefers-reduced-motion:reduce){.kw-cursor.is-pointing .kw-hand-bob{animation:none}}.card-badge{color:#1c6443;background:color-mix(in srgb, var(--success) 24%, white);border:2px solid var(--navy);border-radius:var(--r-pill);align-items:center;gap:6px;margin-bottom:12px;padding:5px 16px;font-size:clamp(13px,2vw,16px);font-weight:800;display:inline-flex}.card-title{color:var(--navy);text-shadow:2.5px 2.5px 0 var(--yellow);text-wrap:balance;margin:0 0 10px;font-family:Playfair Display,Georgia,serif;font-size:clamp(26px,5.2vw,36px);font-weight:800;line-height:1.06}.card-fact{max-width:34ch;color:var(--slate);text-wrap:pretty;margin:0 auto clamp(20px,3vw,26px);font-size:clamp(16px,2.6vw,19px);line-height:1.5}.toast{z-index:var(--z-toast);color:var(--navy);background:var(--yellow-fill);border:var(--border-w) solid var(--navy);border-radius:var(--r-pill);box-shadow:var(--shadow-btn);align-items:center;gap:8px;padding:12px 24px;font-size:clamp(15px,2.4vw,20px);font-weight:800;display:inline-flex;position:absolute;bottom:clamp(22px,7vh,64px);left:50%;transform:translate(-50%)}.screen{z-index:var(--z-modal);pointer-events:auto;background-color:#e7d9bd;background-image:url(/intro-bg.png);background-position:50%;background-repeat:repeat;background-size:240px;place-items:center;padding:clamp(26px,5vw,52px);display:grid;position:absolute;inset:0}.screen:before{content:"";border:4px solid var(--navy);pointer-events:none;border-radius:30px;position:absolute;inset:clamp(12px,2.4vw,22px)}.screen-card{text-align:center;background:var(--cream-card);border:var(--border-w) solid var(--navy);width:min(92vw,480px);box-shadow:var(--shadow-card);border-radius:24px;padding:clamp(28px,5vw,44px) clamp(24px,5vw,40px) clamp(26px,5vw,38px);position:relative}.eyebrow{letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin:0 0 8px;font-family:Playfair Display,Georgia,serif;font-size:clamp(13px,2.3vw,18px);font-style:italic;font-weight:700}.hero-disc{border:var(--border-w) solid var(--navy);background:radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--yellow) 40%, white), color-mix(in srgb, var(--orange) 16%, white));border-radius:50%;place-items:center;width:clamp(84px,20vw,112px);height:clamp(84px,20vw,112px);margin:0 auto clamp(12px,2vw,18px);font-size:clamp(42px,10vw,58px);display:grid}.screen-card h1{color:var(--navy);text-shadow:3px 3px 0 var(--yellow);text-wrap:balance;margin:0 0 12px;font-family:Playfair Display,Georgia,serif;font-size:clamp(30px,6vw,46px);font-weight:800;line-height:1.04}.screen-card p{max-width:32ch;color:var(--slate);text-wrap:pretty;margin:0 auto clamp(22px,3.5vw,30px);font-size:clamp(16px,3vw,20px);line-height:1.5}.screen-card p b{color:var(--orange)}.stars{letter-spacing:3px;margin:0 0 8px;font-size:clamp(20px,3.4vw,26px)}.devbadge{pointer-events:none;opacity:.85;border-radius:8px;padding:5px 10px;font-family:ui-monospace,monospace;font-size:12px;font-weight:700;position:absolute;bottom:10px;left:10px}.devbadge.ok{color:#1f6b48;background:#d6f0e3}.devbadge.warn{color:#a23a1a;background:#ffe0d6}.lang-sub{font-family:"Baloo Bhaijaan 2",Tajawal,sans-serif;margin-top:-6px!important}.lang-row{flex-wrap:wrap;justify-content:center;gap:14px;display:flex}.lang-btn{min-width:150px}.lang-ar{font-family:"Baloo Bhaijaan 2",Tajawal,sans-serif;font-weight:700}.overlay[dir=rtl] .eyebrow,.overlay[dir=rtl] .screen-card h1,.overlay[dir=rtl] .card-title{letter-spacing:0;font-family:"Baloo Bhaijaan 2",Tajawal,sans-serif;font-style:normal}.overlay[dir=rtl] .screen-card p,.overlay[dir=rtl] .card-fact,.overlay[dir=rtl] .bubble-text,.overlay[dir=rtl] .bigbtn,.overlay[dir=rtl] .toast,.overlay[dir=rtl] .card-badge,.overlay[dir=rtl] .scorechip{font-family:Tajawal,"Baloo Bhaijaan 2",sans-serif}.overlay[dir=rtl] .bubble-text{text-align:right}@media (prefers-reduced-motion:reduce){.overlay *,.overlay :before,.overlay :after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}