/* v8 Arabic section presentation (مذكّر ومؤنّث · الضمائر · كلمات من القرآن). Shared components keep their own styles in kids.css. */
.ar-game{--ar-line:#d9cbb3;--ar-ink:#213c49;--ar-cream:#fff8ec;--ar-plum:#7a4ea8;--ar-plum-l:#efe6fb;color:var(--ar-ink)}
.ar-game .kk-main{max-width:1000px;padding-inline:16px}
.ar-hero{position:relative;border:4px solid #fff;border-radius:30px;overflow:hidden;box-shadow:0 12px 30px #23403914;margin:10px 0 22px}
.ar-hero img{display:block;width:100%;height:auto;max-height:360px;object-fit:cover}
.ar-hero h2{position:absolute;inset-inline:16px;bottom:20px;margin:0 auto;width:fit-content;max-width:90%;padding:8px 22px;background:#fff8e9ee;border:2px solid #fff;border-radius:20px;color:#213c49;text-align:center;font:800 clamp(24px,4vw,44px)/1.3 var(--font-fun);box-shadow:0 5px 12px #18363414}
.ar-goal{max-width:740px;margin:12px auto 24px;text-align:center;font-size:18px;line-height:1.8}
.ar-heading,.ar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0}
.ar-heading h3,.ar-toolbar h2{margin:0}
.ar-toolbar>div{flex:1;min-width:130px;text-align:center}
.ar-toolbar p{margin:3px 0}
.ar-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px 0}
.ar-round-note{max-width:760px;margin:18px auto;text-align:center;font-size:15px;line-height:1.8;color:#425862}
/* the rule card: the one concept of the stage, before the first mission and again on demand */
.ar-rule{margin:18px auto;max-width:760px;background:var(--ar-plum-l);border:2px solid #cdb9ea;border-radius:26px;padding:20px 22px}
.ar-rule h3{margin:0 0 10px;font:800 clamp(22px,3.4vw,30px)/1.4 var(--font-fun);color:var(--accent-d)}
.ar-rule ul{margin:0;padding:0;list-style:none}
.ar-rule li{position:relative;padding-inline-start:28px;margin:8px 0;font-size:18px;line-height:1.9}
.ar-rule li::before{content:'';position:absolute;inset-inline-start:4px;top:.75em;width:12px;height:12px;border-radius:50%;background:var(--accent)}
.ar-rule-ex{margin:14px 0 0;padding:12px 16px;background:#fff;border-radius:16px;font:800 clamp(20px,3vw,26px)/1.7 var(--font-fun);text-align:center}
.ar-rule--mini{padding:14px 18px;margin-top:14px}
.ar-rule--mini h3{font-size:20px}
.ar-rule--mini li{font-size:16px}
.ar-say{text-align:center;margin:-4px 0 12px}
.ar-say .kk-btn{min-height:44px;padding:8px 18px;gap:8px}
.ar-say .kk-ico{width:22px;height:22px}
.ar-prompt{font:800 clamp(22px,3.3vw,32px)/1.6 var(--font-fun);text-align:center;margin:15px auto;max-width:860px;scroll-margin-top:90px}
.ar-scene{padding:14px;background:#fffdf8;border:2px solid var(--ar-line);border-radius:26px;box-shadow:0 5px 0 #d9cbb344;overflow:hidden;text-align:center}
.ar-word{font:800 clamp(44px,9vw,76px)/1.5 var(--font-fun);direction:rtl;color:#2a1b3d;margin:6px 0;word-break:keep-all}
.ar-word b{color:var(--accent-d)}
.ar-gloss{display:block;font:600 17px/1.6 var(--font-body);color:#5a6a72;margin-top:2px}
.ar-sentence{font:800 clamp(26px,5vw,40px)/1.9 var(--font-fun);direction:rtl;color:#2a1b3d;margin:6px 0}
.ar-blank{display:inline-block;min-width:2.4em;padding:0 .3em;border-bottom:4px dashed var(--accent);color:var(--accent-d);line-height:1.3;vertical-align:baseline}
.ar-blank.is-filled{border-bottom-style:solid;background:var(--accent-l);border-radius:10px 10px 0 0}
.ar-diagram{display:block;width:100%;height:auto;max-height:340px;direction:ltr;overflow:visible;font-family:var(--font-body),sans-serif}
.ar-caption{font-size:18px;line-height:1.8;text-align:center;margin:10px auto 2px;max-width:790px}
.ar-pic-big{display:block;width:min(60%,260px);aspect-ratio:1/1;margin:4px auto;border-radius:22px;border:3px solid #fff;box-shadow:0 6px 16px #2a1b3d1a;object-fit:cover;background:#fff6e5}
.ar-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:22px 0}
.ar-answers--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ar-choice{appearance:none;display:block;min-height:64px;padding:14px 16px;border:2px solid #c7b3e3;border-bottom-width:5px;border-radius:19px;background:#fff;color:#213c49;font:800 clamp(20px,3.6vw,28px)/1.5 var(--font-fun);cursor:pointer;overflow-wrap:anywhere;text-align:center}
.ar-choice:hover:not(:disabled){background:var(--accent-l);transform:translateY(-1px)}
.ar-choice.is-right{border-color:#31886a;background:#dff4e8;color:#195741}
.ar-choice.is-wrong{border-color:#c07b72;background:#fbeee9;color:#76483e}
.ar-choice:disabled{cursor:default;opacity:1}
.ar-choice--pic{padding:8px}
.ar-choice--pic img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#fff6e5}
.ar-choice--pic .ar-pic-name{display:block;margin-top:6px;font-size:18px;min-height:1.4em}
.ar-choice .ar-mark{display:inline-block;margin-inline-start:6px}
.ar-game button:focus-visible,.ar-game summary:focus-visible{outline:4px solid #245884;outline-offset:4px}
.ar-feedback{min-height:30px;font:600 18px/1.9 var(--font-body);text-align:center;padding:12px 18px;background:#fff4ce;border-radius:17px;margin:12px 0}
.ar-feedback:empty{padding:0;background:none}
.ar-continue{display:block;min-width:180px;margin:14px auto 28px}
.ar-journey{display:flex;justify-content:center;gap:9px;direction:ltr;margin:6px 0}
.ar-stop{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:#eeeade;border:2px solid #c6cfc4;color:#738579;font-size:21px;font-weight:800}
.ar-stop.is-done{background:#7a4ea8;color:#fff;border-color:#7a4ea8}
.ar-hint{margin:22px 0;background:#f3eefb;border:2px solid #cdb9ea;border-radius:24px;padding:18px}
.ar-hint h4{font:800 22px/1.5 var(--font-fun);margin:0 0 8px}
.ar-hint p{font-size:18px;line-height:1.85;margin:8px 0}
.ar-recap details{border:2px solid #d9cbe8;border-radius:18px;background:#fffdf7;padding:15px;margin:12px 0}
.ar-recap summary{font-weight:700;cursor:pointer;line-height:1.8;font-size:18px}
.ar-recap details p{line-height:1.8}
.ar-recap .ar-scene{margin-top:10px}
.ar-recap>p,.ar-recap>h3{text-align:center}
.ar-unavailable{border:2px solid #b9836b;border-radius:20px;background:#fff1e8;padding:20px;line-height:1.8}
.ar-game [hidden]{display:none!important}
.ar-figure-ring{stroke-dasharray:10 7}
@media(max-width:480px){.ar-game .kk-main{padding-inline:10px}.ar-hero{border-radius:22px}.ar-hero h2{font-size:25px;bottom:10px;padding:5px 14px}.ar-scene{padding:8px;border-radius:19px}.ar-toolbar{gap:7px}.ar-toolbar .kk-btn{padding:9px 13px;font-size:16px}.ar-choice{font-size:22px;padding:12px 9px;min-height:62px}.ar-answers--3 .ar-choice{font-size:20px;padding:10px 6px}.ar-caption{font-size:16px}.ar-hint{padding:12px}.ar-hint p{font-size:16px}.ar-stop{width:30px;height:30px}.ar-goal{font-size:17px}.ar-rule{padding:14px 14px}.ar-rule li{font-size:16px}.ar-pic-big{width:min(70%,220px)}}
@media(prefers-reduced-motion:reduce){.ar-game *{scroll-behavior:auto!important}.ar-choice:hover:not(:disabled){transform:none}}