:root { --ink:#173c59; --cream:#fff9ee; --gold:#f2bd4c; --coral:#ec7258; --teal:#398f91; --night:#143651; --pale:#e8f3ed; --muted:#657382; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:"DM Sans", sans-serif; overflow-x:hidden; } body.rtl { font-family:"Noto Kufi Arabic", sans-serif; } .stars { position:absolute; inset:0 0 auto; height:600px; background:radial-gradient(circle at 12% 18%,#f5c55a 0 2px,transparent 2.5px),radial-gradient(circle at 80% 11%,#f5c55a 0 1.5px,transparent 2px),radial-gradient(circle at 65% 34%,#f5c55a 0 1.5px,transparent 2px); pointer-events:none; opacity:.6; }
.topbar { height:86px; max-width:1220px; margin:auto; padding:18px 30px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; } .brand { display:flex; gap:10px; align-items:center; color:var(--ink); font:700 19px/16px "Baloo 2", sans-serif; text-decoration:none; } .brand-mark { display:inline-grid; place-items:center; color:var(--gold); font-size:26px; } nav { display:flex; gap:34px; } nav a,.tiny-link { color:var(--ink); text-decoration:none; font-size:14px; font-weight:700; } .header-actions { display:flex; gap:12px; } button { font:inherit; cursor:pointer; border:0; } .language-toggle, footer button { color:var(--ink); background:#fff; border:1px solid #d9e2dd; padding:10px 14px; border-radius:50px; font-size:13px; font-weight:700; } .menu-button { display:none; background:none; color:var(--ink); font-size:25px; }
.section-wrap { max-width:1160px; margin:0 auto; padding-left:30px; padding-right:30px; } .hero { min-height:610px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:35px; padding-top:28px; padding-bottom:66px; } .eyebrow { margin:0 0 13px; color:var(--teal); font-size:12px; letter-spacing:1.7px; font-weight:800; text-transform:uppercase; display:flex; gap:9px; align-items:center; } .eyebrow span:first-child { color:var(--coral); } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:"Baloo 2", sans-serif; } h1 { font-size:clamp(52px,6vw,78px); line-height:.95; letter-spacing:-2.4px; margin-bottom:23px; } h1 em { color:var(--coral); font-style:normal; } .hero-text { max-width:480px; font-size:17px; line-height:1.7; color:var(--muted); } .hero-actions { display:flex; gap:12px; margin:27px 0 32px; } .button { padding:14px 20px; border-radius:12px; font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:15px; font-size:14px; } .primary { color:#fff; background:var(--ink); box-shadow:0 7px 0 #0b293f; } .primary:hover { transform:translateY(2px); box-shadow:0 5px 0 #0b293f; } .ghost { color:var(--ink); background:transparent; } .age-picker { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); flex-wrap:wrap; } .age { padding:7px 10px; background:#fff; color:var(--muted); border:1px solid #e3e7e0; border-radius:20px; font-size:12px; font-weight:700; } .age.active { background:#f9e7bc; color:var(--ink); border-color:#f9e7bc; }
.hero-art { min-height:470px; position:relative; overflow:hidden; border-radius:55% 45% 35% 40% / 39% 49% 45% 57%; background:#dff0e8; isolation:isolate; } .moon { position:absolute; right:19%; top:12%; width:114px; height:114px; border-radius:50%; background:#f7cf67; box-shadow:0 0 0 22px rgba(255,255,255,.17); }.arch { position:absolute; width:245px; height:430px; border-radius:145px 145px 0 0; bottom:-4px; }.arch-back { left:19%; background:#4e9e99; opacity:.55; }.arch-front { left:29%; background:var(--ink); }.arch-front:after { content:""; position:absolute; inset:37px 32px 0; border-radius:100px 100px 0 0; background:#dff0e8; }.dune { position:absolute; border-radius:50%; bottom:-110px; z-index:2; }.dune-one { left:-12%; width:92%; height:220px; background:#ecae55; }.dune-two { right:-20%; width:90%; height:250px; background:#f4cd78; }.lantern { width:78px; height:114px; position:absolute; z-index:4; bottom:110px; right:23%; background:var(--coral); border:7px solid var(--ink); border-radius:10px 10px 23px 23px; box-shadow:0 13px 0 rgba(23,60,89,.18); }.lantern:before { content:""; position:absolute; width:32px; height:22px; border:7px solid var(--ink); border-bottom:0; border-radius:20px 20px 0 0; top:-29px; left:16px; }.lantern-top { position:absolute; top:-16px; left:27px; width:12px; height:12px; background:var(--gold); border-radius:50%; }.lantern-light { position:absolute; inset:13px; display:grid; place-items:center; color:#fff8cd; background:var(--gold); border:4px solid var(--ink); border-radius:7px 7px 17px 17px; font-size:26px; }.lantern-base { position:absolute; width:56px; height:9px; bottom:-15px; left:4px; background:var(--ink); border-radius:10px; }.spark { position:absolute; z-index:5; color:var(--gold); font-size:26px; }.s1 { top:20%; left:16%; }.s2 { top:32%; right:12%; font-size:40px; }.s3 { top:48%; right:36%; }.art-note { position:absolute; z-index:6; left:10%; bottom:30px; color:var(--ink); font:700 16px/1.1 "Baloo 2", sans-serif; }
.journey { padding-top:56px; padding-bottom:102px; }.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:30px; }.section-heading h2 { font-size:42px; line-height:1; letter-spacing:-1.2px; margin:0; }.section-heading > p { max-width:330px; color:var(--muted); font-size:14px; line-height:1.6; margin:0; }.timeline-shell { background:white; border:1px solid #e5e9e2; border-radius:23px; padding:28px; box-shadow:0 12px 25px rgba(36,60,69,.05); }.timeline-years { display:flex; align-items:center; position:relative; justify-content:space-between; overflow:auto; padding:0 3px 24px; gap:20px; }.timeline-years:before { content:""; position:absolute; top:17px; left:3%; right:3%; height:3px; background:#d9e5de; }.year { color:var(--muted); padding:0; min-width:55px; background:transparent; position:relative; font-size:12px; font-weight:800; }.year:before { content:""; display:block; width:12px; height:12px; border:3px solid white; margin:0 auto 11px; background:#bfd7c9; border-radius:50%; position:relative; z-index:1; }.year.active { color:var(--ink); }.year.active:before { width:18px; height:18px; margin-bottom:8px; background:var(--coral); box-shadow:0 0 0 3px #ffe3d8; }.story-card { border-radius:17px; padding:25px; background:#fff5df; display:grid; grid-template-columns:75px 1fr; gap:20px; min-height:190px; }.story-icon { display:grid; place-items:center; width:65px; height:65px; border-radius:20px; background:#f6d270; color:var(--ink); font-size:28px; }.story-date { color:var(--coral); font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin-bottom:2px; }.story-card h3 { font-size:27px; line-height:1; margin-bottom:7px; }.story-card p:not(.story-date) { color:#576b71; font-size:14px; line-height:1.6; max-width:760px; margin-bottom:11px; }.story-tags { display:flex; gap:7px; flex-wrap:wrap; }.tag { padding:4px 8px; color:var(--teal); background:#e3f0e9; font-size:11px; font-weight:800; border-radius:9px; }
.discover { padding-bottom:105px; }.topic-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }.topic { border:1px solid #e1e7df; min-height:208px; background:#fff; border-radius:19px; padding:19px; text-align:left; transition:.2s transform,.2s box-shadow; }.topic:hover { transform:translateY(-5px); box-shadow:0 12px 23px rgba(23,60,89,.12); }.topic-symbol { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; font-size:23px; margin-bottom:25px; }.topic h3 { font-size:22px; line-height:1; margin-bottom:7px; }.topic p { font-size:12px; line-height:1.5; color:var(--muted); margin:0; }
.noor { padding-bottom:105px; }.noor-panel { padding:48px 50px; background:var(--night); border-radius:27px; color:#fff; position:relative; overflow:hidden; }.noor-panel:before,.noor-panel:after { content:"✦"; position:absolute; color:#f6d270; opacity:.45; }.noor-panel:before { top:25px; right:42px; font-size:29px; }.noor-panel:after { bottom:20px; left:43%; font-size:18px; }.noor-intro { display:flex; align-items:center; gap:22px; max-width:690px; }.avatar-wrap { flex:0 0 126px; height:126px; position:relative; }.avatar-wrap img { position:absolute; z-index:1; width:100%; height:100%; object-fit:contain; }.avatar-glow { position:absolute; inset:8px; border-radius:50%; background:#f7cb62; }.light { color:#f9d77b; }.light span:first-child { color:#fff; }.noor h2 { font-size:42px; line-height:1; margin:0 0 9px; }.noor-intro > div:last-child > p:not(.eyebrow) { margin:0; color:#c4d5d8; line-height:1.6; font-size:14px; }.chat-window { position:relative; margin-top:31px; max-width:765px; }.chat-messages { display:flex; flex-direction:column; gap:11px; min-height:77px; }.message { display:flex; align-items:flex-start; gap:10px; max-width:600px; padding:12px 15px; border-radius:13px; font-size:14px; line-height:1.5; }.message p { margin:0; }.noor-message { background:#24516d; }.user-message { align-self:flex-end; background:#f2bd4c; color:#173c59; }.message-dot { color:#f9d77b; }.quick-questions { display:flex; flex-wrap:wrap; gap:8px; margin:17px 0 12px; }.quick-question { color:#fff; background:transparent; border:1px solid #4e7288; padding:7px 10px; border-radius:19px; font-size:12px; }.quick-question:hover { background:#24516d; } form { display:flex; gap:9px; } input { width:100%; padding:14px 17px; border:0; outline:0; border-radius:11px; font:14px "DM Sans",sans-serif; } .send { width:49px; border-radius:11px; background:var(--coral); color:white; font-size:23px; font-weight:800; }.chat-safety { color:#b8cbd0; font-size:11px; margin:11px 0 0; } footer { padding:26px 30px 35px; display:flex; align-items:center; justify-content:center; gap:8px; color:#607079; font-size:13px; } footer button { margin-left:19px; padding:7px 10px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
body.rtl { direction:rtl; } body.rtl h1,body.rtl h2,body.rtl h3,body.rtl p { letter-spacing:0; } body.rtl .brand,body.rtl .eyebrow,body.rtl .hero-actions,body.rtl .age-picker,body.rtl .story-tags,body.rtl .quick-questions { flex-direction:row-reverse; } body.rtl .story-card { grid-template-columns:1fr 75px; } body.rtl .story-icon { grid-column:2; } body.rtl .story-card > div:last-child { grid-column:1; grid-row:1; } body.rtl .noor-intro { flex-direction:row-reverse; } body.rtl .user-message { align-self:flex-start; } body.rtl .timeline-years { flex-direction:row-reverse; }
@media (max-width:760px) { .topbar { height:72px; padding:14px 20px; }.topbar nav { display:none; }.menu-button { display:block; }.section-wrap { padding-left:20px; padding-right:20px; }.hero { grid-template-columns:1fr; padding-top:36px; }.hero-art { min-height:360px; max-width:540px; width:100%; }.section-heading { align-items:flex-start; flex-direction:column; }.section-heading h2 { font-size:35px; }.topic-grid { grid-template-columns:repeat(2,1fr); }.noor-panel { padding:32px 23px; }.noor-intro { align-items:flex-start; }.avatar-wrap { flex-basis:83px; height:83px; }.noor h2 { font-size:35px; }.story-card { grid-template-columns:54px 1fr; padding:19px; }.story-icon { width:50px; height:50px; }.timeline-shell { padding:17px; }.timeline-years { justify-content:flex-start; }.timeline-years:before { left:0; right:0; }.year { flex:0 0 55px; } }
@media (max-width:420px) { h1 { font-size:54px; }.hero-actions { flex-wrap:wrap; }.topic-grid { grid-template-columns:1fr; }.noor-intro { gap:12px; }.avatar-wrap { display:none; }.story-card h3 { font-size:23px; } }

/* Adventure mode */
.quest-hud { margin-top:22px; max-width:420px; padding:11px 14px; border:1px solid #f0dfb6; background:#fff; border-radius:14px; display:flex; gap:10px; align-items:center; }.quest-medal { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:#f8d36e; color:var(--ink); }.quest-hud strong { font-size:13px; display:block; }.quest-hud small { color:var(--muted); font-size:10px; }.meter { height:6px; width:180px; overflow:hidden; border-radius:5px; background:#e9eeea; margin:4px 0; }.meter i { height:100%; width:0%; background:var(--coral); border-radius:5px; display:block; transition:width .5s ease; }.xp-pill { margin-left:auto; background:#e3f0e9; color:var(--teal); padding:7px 9px; border-radius:9px; font-size:11px; font-weight:800; white-space:nowrap; }
.moon { animation:moonFloat 5s ease-in-out infinite; }.lantern { animation:lanternBob 3.5s ease-in-out infinite; }.lantern-light { animation:glow 2s ease-in-out infinite; }.spark { animation:twinkle 2s ease-in-out infinite; }.s2 { animation-delay:.4s; }.s3 { animation-delay:.9s; }
.story-card { grid-template-columns:75px 1fr auto; }.story-card p:not(.story-date) { max-width:660px; }.collect-star { align-self:start; color:var(--ink); background:#fff; border:1px solid #f1cf72; padding:9px 10px; border-radius:12px; display:grid; place-items:center; gap:2px; min-width:67px; }.collect-star span { color:#edb63f; font-size:22px; }.collect-star small { font-size:9px; font-weight:800; }.collect-star:hover { transform:rotate(-7deg) scale(1.05); }.collect-star.found { background:#f7d570; border-color:#f7d570; animation:pop .35s ease; }
.memory-quest { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-top:14px; padding:18px 20px; border-radius:14px; background:#e4f1ec; }.quest-label { color:var(--coral); text-transform:uppercase; letter-spacing:1px; font-size:10px; font-weight:800; }.memory-quest h3 { margin:3px 0 0; font-size:18px; }.quest-answers { display:flex; gap:7px; flex-wrap:wrap; justify-content:end; }.quest-answer { padding:8px 10px; background:#fff; color:var(--ink); border:1px solid #cfe3d8; border-radius:9px; font-size:11px; font-weight:800; }.quest-answer:hover { background:#f8d36e; }.quest-answer.correct { background:#71bca6; color:#fff; border-color:#71bca6; }.quest-answer.wrong { background:#f6cbc1; }.quest-result { margin:0; color:var(--teal); font-size:12px; font-weight:700; }
.guide-picker { display:flex; gap:11px; margin:25px 0 5px; }.guide-option { color:#d5e3e7; background:#1c455f; border:1px solid #36637b; border-radius:13px; padding:7px 12px 7px 7px; display:flex; gap:7px; align-items:center; font-size:11px; font-weight:800; }.guide-option img { width:38px; height:38px; object-fit:contain; border-radius:50%; background:#f4cd78; }.guide-option.active { color:#173c59; background:#f8d36e; border-color:#f8d36e; transform:translateY(-3px); }.chat-window { margin-top:25px; }.celebration { pointer-events:none; position:fixed; inset:0; z-index:30; overflow:hidden; }.confetti { position:absolute; animation:confetti 1.15s ease-out forwards; font-size:25px; }
@keyframes lanternBob { 50% { transform:translateY(-9px) rotate(2deg); } } @keyframes moonFloat { 50% { transform:translateY(6px); } } @keyframes glow { 50% { box-shadow:0 0 18px #fff6ba; } } @keyframes twinkle { 50% { transform:scale(1.45) rotate(20deg); opacity:.45; } } @keyframes pop { 50% { transform:scale(1.23) rotate(12deg); } } @keyframes confetti { to { transform:translate(var(--x), var(--y)) rotate(540deg); opacity:0; } }
@media (max-width:760px) { .story-card { grid-template-columns:54px 1fr; }.collect-star { grid-column:2; justify-self:start; display:flex; gap:6px; padding:6px 9px; }.collect-star span { font-size:16px; }.memory-quest { align-items:flex-start; flex-direction:column; }.quest-answers { justify-content:start; }.guide-picker { flex-wrap:wrap; }.quest-hud { max-width:100%; }.meter { width:135px; } }
body.rtl .quest-hud,body.rtl .guide-picker,body.rtl .memory-quest { flex-direction:row-reverse; } body.rtl .quest-answers { justify-content:start; } body.rtl .story-card { grid-template-columns:1fr 75px auto; } body.rtl .story-card > div:nth-child(2) { grid-column:1; grid-row:1; } body.rtl .story-icon { grid-column:2; } body.rtl .collect-star { grid-column:3; }

/* Library, quizzes, awards, and the private local profile */
.profile-button { color:var(--ink); background:#fff; border:1px solid #d9e2dd; padding:10px 13px; border-radius:50px; font-size:12px; font-weight:800; }.profile-button:hover { background:#fff3d5; }.active-nav { color:var(--coral)!important; }.world-page { min-height:100vh; background:linear-gradient(180deg,#fff9ee 0,#fff9ee 62%,#e7f2ec 100%); }.world-wrap { max-width:1060px; margin:0 auto; padding:72px 30px 110px; }.world-wrap h1 { font-size:clamp(48px,6vw,72px); margin-bottom:15px; }.world-lede { max-width:610px; color:var(--muted); font-size:17px; line-height:1.65; margin-bottom:38px; }.trail-grid,.quiz-select { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:52px; }.trail-card,.quiz-card { min-height:210px; padding:20px; border:1px solid #e0e8df; background:#fff; border-radius:19px; color:var(--ink); text-align:left; transition:.2s transform,.2s box-shadow; }.trail-card:hover,.quiz-card:hover { transform:translateY(-6px) rotate(-1deg); box-shadow:0 14px 28px rgba(23,60,89,.12); }.trail-card span,.quiz-card span { width:48px; height:48px; display:grid; place-items:center; border-radius:15px; background:#f9dc83; font-size:25px; margin-bottom:22px; }.trail-card small { color:var(--coral); font-weight:800; }.trail-card h2,.quiz-card h2 { font-size:22px; line-height:1; margin:7px 0; }.trail-card p,.quiz-card p { color:var(--muted); font-size:12px; line-height:1.45; margin:0; }.reader,.quiz-stage { padding:36px; background:#fff; border:1px solid #dde8de; border-radius:25px; box-shadow:0 16px 35px rgba(23,60,89,.07); }.reader { scroll-margin-top:25px; }.reader-top { display:flex; gap:17px; align-items:center; }.reader-top>span { width:66px; height:66px; display:grid; place-items:center; flex:0 0 66px; background:#e2f1e9; border-radius:20px; font-size:31px; }.reader h2,.quiz-stage h2 { font-size:34px; line-height:1; margin:0; }.reader>p { max-width:820px; margin:23px 0; color:#526a72; font-size:16px; line-height:1.75; }.fact-box { display:flex; gap:12px; align-items:flex-start; padding:17px; margin:23px 0; border-radius:14px; background:#fff4d7; }.fact-box>span { color:var(--coral); font-size:21px; }.fact-box strong { font-family:"Baloo 2",sans-serif; font-size:17px; }.fact-box p { margin:3px 0 0; color:#66767a; font-size:13px; }.quiz-select { grid-template-columns:repeat(3,1fr); }.quiz-card span { background:#e3e2fa; }.quiz-stage { max-width:720px; }.quiz-stage h2 { margin:5px 0 24px; }.quiz-choices { display:grid; gap:10px; }.quiz-choice { text-align:left; padding:15px 17px; color:var(--ink); background:#f8fbf8; border:1px solid #dbe8dd; border-radius:12px; font-weight:700; }.quiz-choice:hover:not(:disabled) { background:#fff0c6; transform:translateX(5px); }.quiz-choice.correct { color:#fff; background:#57aa92; border-color:#57aa92; }.quiz-choice.wrong { background:#f7d5cc; border-color:#f7d5cc; }.quiz-feedback { min-height:24px; margin:16px 0; color:var(--teal); font-weight:700; }.big-badge { display:grid; place-items:center; width:76px; height:76px; border-radius:50%; background:#f8d36e; font-size:35px; margin-bottom:13px; }.rank-reveal { display:inline-block; padding:10px 13px; margin:16px 0 20px; background:#e1f0e9; color:var(--teal); border-radius:10px; font-weight:800; }.rank-card { display:flex; gap:20px; align-items:center; padding:28px; margin:30px 0 48px; border-radius:22px; background:var(--night); color:white; }.rank-card p { margin:0; color:#b9ced4; font-size:13px; }.rank-card h2 { font-size:35px; line-height:1; margin:5px 0; }.rank-card strong { color:#f8d36e; }.rank-card .button { margin-left:auto; background:#f8d36e; color:var(--ink); }.rank-star { display:grid; place-items:center; width:72px; height:72px; border-radius:21px; background:#285875; color:#f8d36e; font-size:33px; }.badge-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.badge { min-height:150px; padding:18px; display:flex; flex-direction:column; gap:7px; border-radius:18px; border:1px solid #d8e7db; background:#fff; }.badge span { font-size:29px; }.badge strong { font-family:"Baloo 2",sans-serif; font-size:18px; line-height:1; }.badge small { color:var(--muted); font-size:11px; }.badge.locked { opacity:.47; filter:grayscale(.8); }.badge.earned { border-color:#f3cb62; background:#fffaed; }.privacy-note { margin-top:45px; padding:15px 17px; border-left:4px solid var(--teal); background:#e6f1ed; color:#54706e; font-size:12px; line-height:1.55; }.profile-modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; background:rgba(14,40,59,.55); backdrop-filter:blur(4px); }.profile-card { width:min(440px,100%); padding:33px; text-align:center; background:#fff9ee; color:var(--ink); border-radius:24px; box-shadow:0 30px 80px rgba(0,0,0,.25); }.profile-star { width:54px; height:54px; margin:0 auto 14px; display:grid; place-items:center; border-radius:18px; background:#f8d36e; font-size:27px; }.profile-card h2 { font-size:34px; line-height:1; margin:4px 0 10px; }.profile-card>p:not(.eyebrow) { color:var(--muted); font-size:13px; line-height:1.55; }.profile-card form { margin-top:18px; display:grid; gap:10px; }.profile-card input { border:1px solid #d7e3db; background:#fff; }.skip-profile { margin-top:14px; color:#75848b; background:transparent; text-decoration:underline; font-size:12px; }
@media (max-width:760px) { .world-wrap { padding:45px 20px 70px; }.world-page .topbar nav { display:none; }.trail-grid,.quiz-select,.badge-grid { grid-template-columns:repeat(2,1fr); }.rank-card { align-items:flex-start; flex-wrap:wrap; }.rank-card .button { margin-left:0; }.reader,.quiz-stage { padding:24px; }.reader h2,.quiz-stage h2 { font-size:29px; } }
@media (max-width:420px) { .trail-grid,.quiz-select,.badge-grid { grid-template-columns:1fr; }.profile-button { padding:8px 10px; }.world-wrap h1 { font-size:50px; } }

/* Quiz arena: a focused, game-like flow that opens a question as soon as a trail is chosen. */
.quiz-page { background:radial-gradient(circle at 89% 8%,#fce7b1 0 10%,transparent 27%),linear-gradient(180deg,#fff9ee 0%,#eff7f1 100%); }
.quiz-wrap { width:min(1080px,calc(100% - 40px)); margin:0 auto; padding:54px 0 104px; }
.quiz-hero { min-height:250px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:38px 48px; border-radius:30px; color:#fff; background:linear-gradient(120deg,#173c59,#246b75); box-shadow:0 21px 45px rgba(23,60,89,.18); }
.quiz-hero .eyebrow { color:#f8d36e; margin-bottom:8px; }.quiz-hero h1 { max-width:630px; margin:0; font-size:clamp(43px,6vw,68px); line-height:.93; }.quiz-hero p:not(.eyebrow) { max-width:590px; margin:16px 0 0; color:#d9edf0; line-height:1.6; font-size:16px; }
.quiz-hero-orb { position:relative; width:175px; height:175px; flex:0 0 175px; display:grid; place-items:center; border:13px solid rgba(255,255,255,.15); border-radius:50%; background:#f8d36e; color:#173c59; font-family:"Baloo 2",sans-serif; font-size:110px; font-weight:800; transform:rotate(-8deg); }.quiz-hero-orb i,.quiz-hero-orb b { position:absolute; color:#fff8df; font-style:normal; font-size:26px; }.quiz-hero-orb i { top:-24px; right:8px; }.quiz-hero-orb b { bottom:-18px; left:-19px; }
.quiz-lobby-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:50px 4px 20px; }.quiz-lobby-heading .eyebrow { margin:0 0 5px; }.quiz-lobby-heading h2 { margin:0; font-size:34px; line-height:1; }.quiz-lobby-heading>p { max-width:390px; margin:0; color:var(--muted); line-height:1.55; font-size:14px; }
.quiz-select { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0; }.quiz-card { min-height:142px; display:flex; align-items:center; gap:17px; position:relative; overflow:hidden; padding:20px; border:1px solid #dce7df; border-radius:21px; background:#fff; color:var(--ink); text-align:left; box-shadow:0 8px 18px rgba(23,60,89,.04); }.quiz-card:hover { transform:translateY(-4px); box-shadow:0 17px 28px rgba(23,60,89,.12); }.quiz-card:focus-visible,.quiz-choice:focus-visible,.quiz-back:focus-visible { outline:3px solid #f0b942; outline-offset:3px; }.quiz-card::after { content:""; position:absolute; width:126px; height:126px; right:-54px; bottom:-63px; border-radius:50%; background:rgba(255,255,255,.65); }.quiz-card-icon { width:62px; height:62px; flex:0 0 62px; display:grid; place-items:center; border-radius:19px; font-size:31px; background:#f8d36e; }.quiz-card-copy { min-width:0; display:grid; gap:4px; }.quiz-card-copy small { color:#5a7880; font-size:12px; font-weight:700; }.quiz-card-copy strong { font-family:"Baloo 2",sans-serif; font-size:25px; line-height:1; }.quiz-card-copy em { color:#687c80; font-size:11px; font-style:normal; font-weight:700; }.quiz-card-arrow { position:relative; z-index:1; margin-left:auto; color:#173c59; font-size:27px; font-weight:800; }.quiz-card-sand .quiz-card-icon { background:#f9dc83; }.quiz-card-coral .quiz-card-icon { background:#f8d7cf; }.quiz-card-mint .quiz-card-icon { background:#d8eee4; }.quiz-card-sky .quiz-card-icon { background:#d8edf5; }.quiz-card-violet .quiz-card-icon { background:#e4e2fa; }.quiz-card-gold .quiz-card-icon { background:#fbe8b0; }.quiz-card-peach .quiz-card-icon { background:#fbe0d8; }.quiz-card-rose .quiz-card-icon { background:#f6dce7; }
.quiz-stage { max-width:790px; min-height:440px; margin:44px auto 0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }.quiz-stage[hidden],.quiz-page [hidden] { display:none!important; }.quiz-back { margin:0 0 14px; padding:7px 0; border:0; background:transparent; color:#317b78; font-weight:800; }.quiz-stage-top { display:flex; align-items:center; gap:13px; padding:0 8px 16px; }.quiz-stage-top>div { min-width:0; flex:1; }.quiz-stage-top p { margin:0 0 7px; color:#5e747a; font-size:13px; font-weight:800; }.quiz-stage-top>strong { white-space:nowrap; color:#173c59; font-size:15px; }.quiz-stage-top>strong small { color:#7e9395; }.quiz-stage-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:17px; font-size:26px; }.quiz-steps { display:flex; gap:6px; }.quiz-steps i { display:block; width:30px; height:6px; border-radius:20px; background:#dce9e1; }.quiz-steps i.active { background:#f5c858; }.quiz-steps i.done { background:#63b49c; }.question-card { padding:37px; border:1px solid #dbe7de; border-radius:28px; background:#fff; box-shadow:0 18px 38px rgba(23,60,89,.09); }.question-prompt { margin:0 0 9px; color:#e16f5b; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.question-card h2 { margin:0 0 28px; font-size:clamp(28px,4vw,42px); line-height:1.08; }.quiz-choices { display:grid; gap:11px; }.quiz-choice { display:flex; align-items:center; gap:14px; width:100%; min-height:63px; padding:10px 14px; border:1px solid #d6e5dc; border-radius:16px; color:#173c59; background:#fbfdfa; text-align:left; font-weight:700; transition:.18s transform,.18s background,.18s border-color; }.quiz-choice:hover:not(:disabled) { transform:translateX(5px); border-color:#f0c45e; background:#fff7df; }.quiz-choice>span { display:grid; place-items:center; width:34px; height:34px; flex:0 0 34px; border-radius:11px; background:#e5f0e9; color:#37716d; font-size:13px; }.quiz-choice>b { font-size:16px; }.quiz-choice.correct { color:#fff; border-color:#4eaa8d; background:#4eaa8d; }.quiz-choice.correct>span { color:#2d7164; background:#ecfff4; }.quiz-choice.wrong { border-color:#e6a294; background:#f8d9d2; color:#7b372e; }.quiz-choice:disabled { cursor:default; }.quiz-feedback { min-height:26px; margin:18px 0 14px; color:#327b70; font-weight:800; }.quiz-next { margin-left:auto; }.quiz-finish { padding:52px 35px; border:1px solid #dbe7de; border-radius:28px; background:#fff; text-align:center; box-shadow:0 18px 38px rgba(23,60,89,.09); }.quiz-finish h2 { margin:0; font-size:43px; }.quiz-finish>p:not(.eyebrow) { max-width:460px; margin:13px auto; color:#62777b; line-height:1.6; }.big-badge.muted { background:#dce9e1; color:#729087; }.finish-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin-top:20px; }
body.rtl .quiz-hero,body.rtl .quiz-lobby-heading,body.rtl .quiz-stage-top { text-align:right; } body.rtl .quiz-card,body.rtl .quiz-choice { text-align:right; } body.rtl .quiz-card-arrow { margin-right:auto; margin-left:0; transform:scaleX(-1); } body.rtl .quiz-choice:hover:not(:disabled) { transform:translateX(-5px); } body.rtl .quiz-back { text-align:right; } body.rtl .quiz-next { margin-right:auto; margin-left:0; }
@media (max-width:760px) { .quiz-wrap { width:min(100% - 32px,1080px); padding-top:30px; }.quiz-hero { min-height:0; padding:32px 25px; border-radius:25px; }.quiz-hero-orb { width:105px; height:105px; flex-basis:105px; border-width:8px; font-size:67px; }.quiz-lobby-heading { display:block; margin-top:37px; }.quiz-lobby-heading>p { margin-top:12px; }.quiz-select { grid-template-columns:1fr; }.quiz-card { min-height:118px; }.question-card { padding:25px 20px; }.quiz-stage { margin-top:30px; }.quiz-stage-top { padding-inline:0; }.question-card h2 { font-size:30px; }.quiz-finish { padding:38px 22px; } }

/* Illustrated storybook */
.book-wrap { max-width:1180px; margin:0 auto; padding:54px 30px 100px; }.book-top { display:flex; align-items:end; justify-content:space-between; gap:25px; margin-bottom:30px; }.book-top h1 { font-size:clamp(48px,6vw,72px); margin:0 0 12px; }.book-top>div:first-child>p:last-child { max-width:590px; color:var(--muted); line-height:1.6; margin:0; }.access-tools { display:flex; gap:8px; flex-wrap:wrap; justify-content:end; }.access-tools button { padding:9px 11px; border-radius:10px; color:var(--ink); background:#fff; border:1px solid #dae6dd; font-size:12px; font-weight:800; }.book-shell { position:relative; display:flex; align-items:center; justify-content:center; }.paper-page { width:min(920px,calc(100% - 100px)); min-height:570px; display:grid; grid-template-columns:1.08fr .92fr; background:#fffdf7; border:1px solid #ddceb0; border-radius:6px 22px 22px 6px; overflow:hidden; box-shadow:18px 20px 0 #e6d9be,0 28px 50px rgba(47,41,26,.16); position:relative; }.paper-page:after { content:""; position:absolute; inset:0 50% 0 auto; width:2px; background:linear-gradient(90deg,transparent,#d7c7a8,transparent); }.book-image { position:relative; overflow:hidden; min-height:100%; }.book-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 70%,rgba(67,46,25,.16)); }.book-image img { width:100%; height:100%; display:block; object-fit:cover; }.book-image span { position:absolute; z-index:1; left:18px; top:18px; padding:7px 10px; border-radius:9px; color:var(--ink); background:#fff4d4; font-size:12px; font-weight:800; }.book-copy { padding:40px 35px 34px; position:relative; background:repeating-linear-gradient(0deg,transparent,transparent 28px,rgba(97,74,40,.045) 29px); }.book-copy h2 { font-size:38px; line-height:.98; margin:0 0 18px; }.book-copy #bookText { color:#54666b; font-size:14px; line-height:1.68; }.book-copy #bookText p { margin-bottom:14px; }.book-fact { display:flex; gap:9px; margin-top:13px; padding:12px; background:#f9edcb; border-radius:11px; color:#52666b; font-size:12px; line-height:1.45; }.book-fact span { color:var(--coral); font-size:18px; }.book-fact p { margin:0; }.page-number { position:absolute; bottom:16px; right:30px; color:#a59578; font-size:11px; }.page-arrow { width:45px; height:45px; margin:0 13px; flex:0 0 45px; border-radius:50%; color:#fff; background:var(--ink); font-size:25px; transition:.2s transform; }.page-arrow:hover { transform:scale(1.12); }.chapter-strip { display:flex; gap:8px; overflow:auto; padding:42px 4px 25px; }.chapter-button { flex:0 0 145px; min-height:67px; text-align:left; padding:10px; color:var(--muted); background:#fff; border:1px solid #e4e8df; border-radius:11px; }.chapter-button small { display:block; margin-bottom:3px; color:var(--coral); font-size:10px; font-weight:800; }.chapter-button span { font:700 14px/1.05 "Baloo 2",sans-serif; color:var(--ink); }.chapter-button.active { background:#fff1cb; border-color:#f0c65c; transform:translateY(-4px); }.story-extras { display:grid; grid-template-columns:1.1fr .9fr; gap:17px; margin-top:26px; }.map-card,.artifact-card { padding:25px; border:1px solid #dae8de; border-radius:20px; background:#fff; }.map-card h2,.artifact-card h2 { font-size:28px; margin:0 0 13px; }.map-board { height:280px; position:relative; overflow:hidden; border-radius:15px; background:radial-gradient(ellipse at 70% 70%,#e8c46e 0 12%,transparent 12.5%),radial-gradient(ellipse at 46% 52%,#d7b56c 0 13%,transparent 13.5%),linear-gradient(140deg,#82b8b2 0 26%,#dcead7 26% 45%,#edcf87 45% 100%); }.map-board:before { content:""; position:absolute; inset:0; opacity:.3; background-image:linear-gradient(40deg,transparent 48%,#fff 49%,transparent 51%),linear-gradient(-55deg,transparent 49%,#fff 50%,transparent 52%); background-size:95px 75px; }.map-board button { position:absolute; z-index:1; padding:6px 8px; border-radius:8px; color:#fff; background:var(--ink); border:2px solid #f9d66e; font-size:10px; font-weight:800; transform:translate(-50%,-50%); }.map-board button:hover { background:var(--coral); }.map-card>p:last-child { margin:12px 0 0; color:#65767b; font-size:12px; }.artifact-card { background:#173c59; color:white; }.artifact-card .eyebrow { color:#f9d477; }.artifact-card .eyebrow span:first-child { color:white; }.artifact-card>span { display:grid; place-items:center; width:56px; height:56px; margin:12px 0; border-radius:18px; color:var(--ink); background:#f9d477; font-size:27px; }.artifact-card h2 { color:white; }.artifact-card>p { color:#c8d9dc; font-size:14px; line-height:1.55; }.artifact-card .button { margin-top:8px; color:var(--ink); background:#f9d477; }.artifact-card #artifactAnswer { color:#fff3c5; font-weight:700; }.large-story-text .book-copy #bookText { font-size:17px; }.large-story-text .book-copy h2 { font-size:43px; }.calm-mode *, .calm-mode *:before,.calm-mode *:after { animation:none!important; scroll-behavior:auto!important; transition:none!important; }
.parent-gate { width:min(500px,100%); padding:31px; border-radius:21px; background:#fff; border:1px solid #dce8df; }.parent-gate h2 { font-size:30px; margin:0 0 8px; }.parent-gate form { margin-top:18px; }.parent-gate input { border:1px solid #d7e3db; }.teacher-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:15px; }.teacher-grid article { padding:20px; background:#fff; border:1px solid #dce8df; border-radius:17px; }.teacher-grid h2 { font-size:24px; line-height:1; margin:0 0 9px; }.teacher-grid p { color:#637377; font-size:13px; line-height:1.55; margin:0; }.clear-profile { margin-top:24px; color:var(--coral); }
.certificate { margin-top:48px; padding:42px; text-align:center; border:9px double #e9be55; border-radius:12px; background:linear-gradient(135deg,#fff9e9,#fff 45%,#fff5d6); }.certificate h2 { color:var(--ink); font-size:38px; margin:3px 0 11px; }.certificate>p:not(.eyebrow) { max-width:590px; margin:0 auto 20px; color:#5c6e72; }.certificate>div { display:flex; justify-content:center; gap:20px; margin-bottom:22px; color:var(--teal); font-size:13px; }
.daily-wrap { max-width:850px; }.daily-card { padding:38px; background:#fff; border:1px solid #dfe8de; border-radius:25px; box-shadow:0 18px 42px rgba(23,60,89,.07); }.daily-card h2 { font-size:45px; line-height:1; margin:0 0 8px; }.daily-source { color:var(--coral); font-size:12px; font-weight:800; }.daily-card #dailyBody { margin:25px 0; color:#526970; font-size:16px; line-height:1.75; }.daily-card #dailyBody p { margin-bottom:15px; }.daily-card aside { display:flex; gap:10px; padding:15px; border-radius:13px; background:#fff0c9; }.daily-card aside span { color:var(--coral); font-size:20px; }.daily-card aside p { margin:0; color:#566c70; font-weight:700; }.daily-challenge { margin-top:24px; padding:21px; border-radius:15px; color:#fff; background:#173c59; }.daily-challenge .eyebrow { color:#f9d477; }.daily-challenge .eyebrow span:first-child { color:#fff; }.daily-challenge h3 { font-size:24px; line-height:1.1; margin:0 0 13px; }.daily-challenge .button { color:var(--ink); background:#f9d477; }.daily-challenge #dailyAnswer { margin-bottom:0; color:#fff5c6; font-weight:700; }.daily-note { color:#6b7c80; font-size:11px; line-height:1.5; }
@media (max-width:760px) { .book-wrap { padding:35px 20px 65px; }.book-top { align-items:flex-start; flex-direction:column; }.access-tools { justify-content:start; }.paper-page { width:calc(100% - 58px); min-height:0; grid-template-columns:1fr; border-radius:16px; }.paper-page:after { display:none; }.book-image { min-height:260px; }.book-copy { padding:27px 24px 44px; }.book-copy h2 { font-size:32px; }.page-arrow { width:34px; height:34px; margin:0 5px; flex-basis:34px; font-size:19px; }.story-extras,.teacher-grid { grid-template-columns:1fr; }.chapter-strip { padding-top:33px; }.map-board { height:230px; } }
@media print { .topbar,.profile-button,.access-tools,.page-arrow,.chapter-strip,.story-extras { display:none!important; }.world-page,.book-wrap { background:white; padding:0; }.paper-page { width:100%; box-shadow:none; }.certificate-controls { display:none!important; } }

.daily-image { display:block; width:100%; height:300px; margin-bottom:25px; object-fit:cover; border-radius:15px; }

/* Award certificate and robust quiz-card alignment. */
.quiz-card-copy { flex:1; }.quiz-card-icon,.quiz-card-arrow { flex-shrink:0; }.quiz-card-copy strong { overflow-wrap:normal; word-break:normal; }
.awards-wrap { max-width:1080px; }.award-section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:45px 0 18px; }.award-section-heading h2 { margin:0; font-size:37px; }.award-section-heading .eyebrow { margin:0 0 5px; }.award-section-heading>p { max-width:330px; margin:0; color:#667a7d; font-size:13px; line-height:1.55; }.certificate { position:relative; isolation:isolate; overflow:hidden; margin-top:58px; padding:22px; border:0; border-radius:28px; background:linear-gradient(135deg,#174458,#215e6b 45%,#173c59); color:#fff; text-align:center; box-shadow:0 25px 55px rgba(23,60,89,.2); }.certificate:before { content:""; position:absolute; z-index:-1; inset:12px; border:1px solid rgba(248,211,110,.85); border-radius:19px; }.certificate:after { content:""; position:absolute; z-index:-1; inset:20px; border:1px solid rgba(255,255,255,.23); border-radius:14px; }.certificate-inner { position:relative; min-height:605px; display:flex; flex-direction:column; align-items:center; padding:43px 70px 36px; }.certificate-pattern { position:absolute; z-index:-1; width:230px; height:230px; opacity:.5; background:linear-gradient(30deg,transparent 42%,#f8d36e 43% 47%,transparent 48%),linear-gradient(-30deg,transparent 42%,#f8d36e 43% 47%,transparent 48%),linear-gradient(90deg,transparent 42%,#f8d36e 43% 47%,transparent 48%); background-size:70px 70px; transform:rotate(15deg); }.certificate-pattern-top { top:-100px; left:-96px; }.certificate-pattern-bottom { right:-100px; bottom:-112px; transform:rotate(-20deg); }.certificate-kicker { display:flex; align-items:center; gap:10px; color:#f8d36e; font-size:18px; }.certificate-kicker p { margin:0; font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }.certificate-arabic { margin:8px 0 4px; color:#d9edf0; font-family:"Noto Kufi Arabic",sans-serif; font-size:13px; }.certificate-seal { display:grid; place-items:center; width:82px; height:82px; margin:5px auto 13px; border:2px solid #f8d36e; outline:1px solid rgba(255,255,255,.55); outline-offset:5px; border-radius:50%; color:#f8d36e; background:rgba(12,48,65,.62); }.certificate-seal span { font-size:27px; line-height:.8; }.certificate-seal small { margin-top:-4px; color:#fff8df; font-size:7px; font-weight:800; letter-spacing:.08em; line-height:1.15; }.certificate .certificate-eyebrow { margin:5px 0 5px; color:#f8d36e; font-size:11px; }.certificate h2 { max-width:680px; margin:0; color:#fff; font-size:clamp(32px,4vw,48px); line-height:1.04; }.certificate-name { margin:7px 0 0; color:#f8d36e; font-family:"Baloo 2",sans-serif; font-size:clamp(48px,6vw,70px); font-weight:800; line-height:1; }.certificate-message { max-width:700px; margin:14px auto 20px; color:#deeff0; font-size:14px; line-height:1.65; }.certificate-achievements { display:grid; grid-template-columns:repeat(3,1fr); width:min(670px,100%); border-top:1px solid rgba(248,211,110,.55); border-bottom:1px solid rgba(248,211,110,.55); }.certificate-achievements>div { min-height:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:11px 14px; }.certificate-achievements>div+div { border-left:1px solid rgba(248,211,110,.36); }.certificate-achievements span { color:#f8d36e; font-family:"Baloo 2",sans-serif; font-size:23px; font-weight:800; }.certificate-achievements small { margin-top:2px; color:#cce1e2; font-size:10px; text-transform:uppercase; letter-spacing:.05em; }.certificate-achievements strong { color:#fff; font-size:13px; }.certificate-footer { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; width:min(760px,100%); margin-top:31px; }.certificate-footer>div { display:grid; gap:5px; }.certificate-line { display:block; border-top:1px solid rgba(255,255,255,.72); }.certificate-footer strong { color:#d7eaeb; font-size:10px; font-weight:700; }.certificate-controls { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:15px; margin:0 15px 2px; padding:17px 0 0; border-top:1px solid rgba(255,255,255,.22); }.certificate-controls .button { color:#173c59; background:#f8d36e; }.certificate-controls p { margin:0; color:#d5e7e8; font-size:11px; }

@media (max-width:760px) { .award-section-heading { display:block; }.award-section-heading>p { margin-top:10px; }.certificate { margin-top:42px; padding:14px; }.certificate-inner { min-height:0; padding:35px 20px 28px; }.certificate-message { font-size:12px; }.certificate-achievements { grid-template-columns:1fr; }.certificate-achievements>div { min-height:62px; }.certificate-achievements>div+div { border-top:1px solid rgba(248,211,110,.36); border-left:0; }.certificate-footer { gap:8px; margin-top:22px; }.certificate-footer strong { font-size:8px; } }

@page { size:A4 landscape; margin:0; }
@media print {
  html,body { width:297mm!important; height:210mm!important; margin:0!important; padding:0!important; background:#fff!important; }
  body * { visibility:hidden!important; }
  .certificate,.certificate * { visibility:visible!important; }
  .certificate { position:fixed!important; inset:0!important; display:block!important; box-sizing:border-box!important; width:297mm!important; height:210mm!important; min-height:210mm!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; background:linear-gradient(135deg,#174458,#215e6b 45%,#173c59)!important; box-shadow:none!important; }
  .certificate:before { inset:7mm!important; border-width:.35mm!important; border-radius:0!important; }.certificate:after { inset:10mm!important; border-width:.25mm!important; border-radius:0!important; }
  .certificate-inner { box-sizing:border-box!important; min-height:0!important; height:210mm!important; padding:13mm 24mm 11mm!important; }.certificate-pattern { width:62mm!important; height:62mm!important; background-size:19mm 19mm!important; }.certificate-pattern-top { top:-28mm!important; left:-27mm!important; }.certificate-pattern-bottom { right:-29mm!important; bottom:-30mm!important; }.certificate-kicker { gap:3mm!important; font-size:5mm!important; }.certificate-kicker p { font-size:2.8mm!important; }.certificate-arabic { margin:2.2mm 0 1.2mm!important; font-size:3mm!important; }.certificate-seal { width:22mm!important; height:22mm!important; margin:1mm auto 3mm!important; border-width:.55mm!important; outline-width:.25mm!important; outline-offset:1.5mm!important; }.certificate-seal span { font-size:7mm!important; }.certificate-seal small { font-size:1.6mm!important; }.certificate .certificate-eyebrow { margin:1mm 0!important; font-size:2.5mm!important; }.certificate h2 { max-width:190mm!important; font-size:8.2mm!important; }.certificate-name { margin:1.5mm 0 0!important; font-size:13mm!important; }.certificate-message { max-width:180mm!important; margin:3.5mm auto 4.5mm!important; font-size:3mm!important; line-height:1.52!important; }.certificate-achievements { width:175mm!important; }.certificate-achievements>div { min-height:22mm!important; padding:2.5mm 5mm!important; }.certificate-achievements span { font-size:5.2mm!important; }.certificate-achievements small { margin-top:.5mm!important; font-size:1.8mm!important; }.certificate-achievements strong { font-size:2.7mm!important; }.certificate-footer { width:194mm!important; gap:8mm!important; margin-top:7mm!important; }.certificate-footer>div { gap:1.3mm!important; }.certificate-footer strong { font-size:2mm!important; }.certificate-controls { display:none!important; }
}

/* Landing hero: make the AI guide immediately discoverable and keep the lantern caption legible. */
.hero-ai-card { max-width:510px; margin:20px 0 0; padding:14px 15px 13px; border:1px solid #cfe2dc; border-radius:18px; color:var(--ink); background:rgba(255,255,255,.92); box-shadow:0 12px 23px rgba(23,60,89,.08); }.hero-ai-heading { display:flex; align-items:center; gap:10px; }.hero-ai-avatar { display:grid; place-items:center; width:45px; height:45px; flex:0 0 45px; overflow:hidden; border-radius:15px; background:#f8d36e; }.hero-ai-avatar img { width:100%; height:100%; object-fit:contain; }.hero-ai-heading>div:nth-child(2) { min-width:0; }.hero-ai-heading p { margin:0 0 1px; color:var(--teal); font-size:9px; font-weight:800; letter-spacing:.11em; }.hero-ai-heading h2 { margin:0; font-size:22px; line-height:1; }.hero-ai-spark { margin-left:auto; color:#efba48; font-size:23px; }.hero-ai-copy { margin:9px 0 7px; color:#63767d; font-size:12px; line-height:1.4; }.hero-ai-reply { min-height:34px; margin:0 0 9px; padding:7px 9px; border-radius:9px; color:#315a70; background:#e5f1ed; font-size:12px; font-weight:700; line-height:1.35; }.hero-ai-reply.thinking { color:#5b7380; font-style:italic; }.hero-ai-form { display:flex; gap:7px; margin:0; }.hero-ai-form input { min-width:0; padding:10px 12px; border:1px solid #d8e6de; border-radius:9px; background:#fff; font-size:12px; }.hero-ai-form button { flex:0 0 auto; padding:10px 12px; border-radius:9px; color:#fff; background:var(--coral); font-size:12px; font-weight:800; }.hero-ai-form button:hover { background:#d95e49; }.art-note { z-index:10; left:36%; top:20px; bottom:auto; width:195px; margin:0; padding:9px 12px; border:1px solid rgba(23,60,89,.12); border-radius:12px; background:rgba(255,249,238,.94); box-shadow:0 8px 18px rgba(23,60,89,.12); font-size:15px; line-height:1.2; }
body.rtl .hero-ai-heading,body.rtl .hero-ai-form { flex-direction:row-reverse; } body.rtl .hero-ai-spark { margin-right:auto; margin-left:0; } body.rtl .hero-ai-card,body.rtl .hero-ai-reply { text-align:right; }
@media (max-width:760px) { .hero-ai-card { max-width:none; }.hero-ai-form { align-items:stretch; }.hero-ai-form button { padding-inline:10px; }.art-note { left:25%; top:17px; bottom:auto; width:180px; font-size:13px; } }

/* Higher-specificity certificate layout: the older generic .certificate > div rule must not collapse these grids. */
.certificate .certificate-achievements { display:grid; grid-template-columns:repeat(3,1fr); }.certificate .certificate-inner { display:flex; }.certificate .certificate-pattern { display:block; }
@media print {
  .topbar,.awards-wrap>:not(.certificate),.privacy-note { display:none!important; }
  .awards-wrap { display:contents!important; padding:0!important; }
  .certificate .certificate-inner { display:flex!important; margin:0!important; }
  .certificate .certificate-achievements { display:grid!important; grid-template-columns:repeat(3,1fr)!important; margin:0!important; }
  .certificate .certificate-achievements>div { display:flex!important; margin:0!important; }
  .certificate-pattern { margin:0!important; }
}

/* Shared brand artwork: a crisp logo replaces the text-only mark without changing the header rhythm. */
.brand { gap:0; min-width:186px; }
.brand-logo { display:block; width:184px; height:auto; max-height:52px; }
@media (max-width:760px) { .brand { min-width:148px; }.brand-logo { width:146px; max-height:42px; } }
@media (max-width:420px) { .brand { min-width:124px; }.brand-logo { width:122px; max-height:37px; } }

/* Arabic timeline cards get a full-width reading column on small screens. */
@media (max-width:760px) {
  body.rtl .story-card { grid-template-columns:1fr 50px; gap:12px; }
  body.rtl .story-icon { grid-column:2; grid-row:1; justify-self:end; width:50px; height:50px; }
  body.rtl .collect-star { grid-column:1; grid-row:1; justify-self:start; align-self:start; }
  body.rtl .story-card > div:nth-child(2) { grid-column:1 / -1; grid-row:2; min-width:0; }
  body.rtl .story-card h3 { font-size:22px; line-height:1.35; }
  body.rtl .story-card p:not(.story-date) { font-size:13px; line-height:1.9; }
  body.rtl .story-tags { justify-content:flex-start; }
  body.rtl .memory-quest { text-align:right; }
  body.rtl .quest-answers { width:100%; justify-content:flex-start; }
}

/* Mobile navigation opens from the visible hamburger button. */
@media (max-width:760px) {
  .topbar.menu-open nav { position:absolute; top:66px; right:16px; left:16px; z-index:20; display:flex; flex-direction:column; gap:3px; padding:12px; border:1px solid #d8e5dd; border-radius:17px; background:rgba(255,253,247,.98); box-shadow:0 15px 32px rgba(23,60,89,.16); }
  .topbar.menu-open nav a { display:block; padding:12px 14px; border-radius:10px; font-size:15px; }
  .topbar.menu-open nav a:hover,.topbar.menu-open nav a:focus-visible { color:#fff; background:var(--ink); outline:0; }
  .menu-button { width:38px; height:38px; display:grid; place-items:center; padding:0; border:1px solid #d9e2dd; border-radius:12px; background:#fff; line-height:1; }
  body.rtl .topbar.menu-open nav { text-align:right; }
}

/* Storybook: make the paper and words the focus on phones, not the arrows. */
@media (max-width:760px) {
  .storybook-page .book-shell { display:block; padding:0; }
  .storybook-page .paper-page { width:100%; }
  .storybook-page .page-arrow { position:absolute; z-index:6; top:224px; width:38px; height:38px; margin:0; border:2px solid #fff8e8; background:rgba(23,60,89,.93); box-shadow:0 5px 14px rgba(23,60,89,.25); }
  .storybook-page .page-arrow.previous { left:-10px; }
  .storybook-page .page-arrow.next { right:-10px; }
  .storybook-page .book-copy { padding:30px 25px 48px; }
  .storybook-page .book-copy #bookText { font-size:17px; line-height:1.75; }
  .storybook-page .book-copy #bookText p { margin-bottom:18px; }
  .storybook-page .book-fact { font-size:14px; line-height:1.55; }
}

/* A clear location game replaces the decorative, not-to-scale route map. */
.place-card { padding:25px; border:1px solid #dae8de; border-radius:20px; background:#fff; }.place-card h2 { margin:0 0 13px; font-size:28px; }.place-passport { display:flex; align-items:center; gap:13px; padding:16px; border-radius:15px; background:#e5f1ed; }.place-compass { display:grid; place-items:center; flex:0 0 53px; width:53px; height:53px; border-radius:17px; color:#fff; background:#398f91; font-size:27px; }.place-passport strong { display:block; color:#173c59; font:800 22px/1 "Baloo 2",sans-serif; }.place-passport p,.place-result { margin:4px 0 0; color:#607378; font-size:13px; line-height:1.5; }.place-choices { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }.place-choice { padding:9px 11px; border:1px solid #d3e4dc; border-radius:10px; color:#173c59; background:#fff; font-size:12px; font-weight:800; }.place-choice:hover { background:#fff1c9; }.place-choice.correct { color:#fff; border-color:#398f91; background:#398f91; }.place-choice.wrong { border-color:#ec7258; background:#fde4dd; }.place-result { min-height:20px; margin-top:12px; font-weight:700; }