/* ===== Play & practise — design system for the hub (play.html) and every game, story and chant =====
   Light only; every colour is a token; Arabic in 'Arial'/'Amiri' (calligraphic titles in Amiri); geometric
   mosaic accents are CSS masks (8-fold star, interlaced circles, zellij diamonds) coloured by --tone.
   No faces anywhere: the guides إِبْرَاهِيمُ / أَمِيرَةُ are letter medallions.

   Building blocks for modules (see the contract at the top of play/core.js):
     .qp-panel          a white card for the play area            .qp-ar / .qp-ar-lg / .qp-ar-xl   Arabic text
     .qp-btn            + .qp-btn-primary | -ghost | -soft | -sm    .qp-icon-btn  a round 44px button
     .qp-say            listen button (QSpeak/reciter add .playing / .q-loading)
     .qp-opts > .qp-opt option tiles: .is-right .is-wrong .is-picked .is-dim [disabled]; .qp-opts-2 / -1 columns
     .qp-timer > span   a draining bar: style="--t:.6" (0-1); .is-low near the end; .is-paused
     .qp-combo          combo meter: <div class="qp-combo is-hot"><b>×3</b><span class="qp-combo-bar"><i style="--c:.6"></i></span></div>
     .qp-score          a number that pops when .is-bump is added   .qp-dots > i(.is-done/.is-now/.is-miss)  progress dots
     .qp-chip, .qp-badge, .qp-kbd, .qp-tl (transliteration), .qp-en, .qp-muted, .qp-vh (visually hidden)
     .qp-card (hub cards), .qp-end (end screen), .qp-avatar, .qp-guide, .qp-seal, .qp-mosaic, .qp-tone-*
   Tones: .qp-tone-terracotta | -gold | -navy | -green | -rose set --tone, --tone-tint, --tone-deep. */

:root{
  color-scheme: light;
  --bg:#F2F8FC; --bg-panel:#FBFDFE; --ink:#24262B; --ink-soft:#5B6672;
  --teal:#B85C38; --teal-deep:#6B3420; --teal-tint:#EFE1D3; --gold:#A67C3D; --gold-soft:#E9D9BC; --gold-deep:#6E4F1F;
  --gold-text:#8A6430;   /* gold for small text (4.9:1 or more on the light backgrounds); --gold stays for borders, fills and large titles */
  --teal-text:#A9532F;   /* terracotta for small text and links (4.9:1 or more on the light backgrounds; --teal is 4.2-4.5) */
  --navy:#123B5C; --navy-mid:#24506F; --navy-tint:#E3EEF6;
  --border:#C3D8E3; --border-soft:#DCE9F0; --radius:14px;
  --pill-learned-bg:#DCEEE1; --pill-learned-ink:#2E6B47; --green-deep:#1F4A31;
  --red-soft:#A23B32; --red-tint:#F6E1DE; --red-deep:#6E2620;
  --sand:#FBF6EE; --shadow:rgba(20,40,60,.30);
  --ar-font:'Arial','Amiri',serif; --cal-font:'Amiri','Arial',serif; --ui-font:'Karla',system-ui,sans-serif; --head-font:'Lora',Georgia,serif;
  --tone:#B85C38; --tone-tint:#EFE1D3; --tone-deep:#6B3420;
  --qp-ease:cubic-bezier(.2,.8,.2,1);
  /* the mosaic tiles (masks: black = drawn) */
  --qp-khatam:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='black' stroke-width='1.1'%3E%3Cpath fill='black' fill-opacity='.22' d='M20 4.44L24.56 9H31V15.44L35.56 20L31 24.56V31H24.56L20 35.56L15.44 31H9V24.56L4.44 20L9 15.44V9H15.44Z'/%3E%3Cpath d='M20 0V4.44M20 35.56V40M0 20H4.44M35.56 20H40M0 0L9 9M40 0L31 9M0 40L9 31M40 40L31 31'/%3E%3Ccircle cx='20' cy='20' r='4.5'/%3E%3C/g%3E%3C/svg%3E");
  --qp-circles:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Ccircle cx='30' cy='0' r='15'/%3E%3Ccircle cx='0' cy='30' r='15'/%3E%3Ccircle cx='30' cy='30' r='15'/%3E%3Ccircle cx='15' cy='15' r='15'/%3E%3Ccircle cx='15' cy='15' r='3' fill='black' fill-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");
  --qp-zellij:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M12 2L22 12L12 22L2 12Z'/%3E%3Cpath fill='black' fill-opacity='.25' d='M12 8L16 12L12 16L8 12Z'/%3E%3Cpath d='M0 0L2 2M24 0L22 2M0 24L2 22M24 24L22 22'/%3E%3C/g%3E%3C/svg%3E");
  --qp-star8:polygon(50% 0%, 64.6% 14.6%, 85.4% 14.6%, 85.4% 35.4%, 100% 50%, 85.4% 64.6%, 85.4% 85.4%, 64.6% 85.4%, 50% 100%, 35.4% 85.4%, 14.6% 85.4%, 14.6% 64.6%, 0% 50%, 14.6% 35.4%, 14.6% 14.6%, 35.4% 14.6%);
}
.qp-tone-terracotta{--tone:#B85C38; --tone-tint:#EFE1D3; --tone-deep:#6B3420;}
.qp-tone-gold{--tone:#A67C3D; --tone-tint:#F3E8D3; --tone-deep:#6E4F1F;}
.qp-tone-navy{--tone:#24506F; --tone-tint:#E3EEF6; --tone-deep:#123B5C;}
.qp-tone-green{--tone:#2E6B47; --tone-tint:#DCEEE1; --tone-deep:#1F4A31;}
.qp-tone-rose{--tone:#A23B32; --tone-tint:#F6E1DE; --tone-deep:#6E2620;}

*{box-sizing:border-box;}
body.qp-body{background:var(--bg); color:var(--ink); font-family:var(--head-font); margin:0; padding:0 0 80px; line-height:1.5; overflow-x:clip;}
.qp-page{max-width:1180px; margin:0 auto; padding:0 20px; min-width:0;}
.qp-page [hidden], .qp-toasts [hidden]{display:none !important;}
.qp-page a{color:var(--teal-text);}
[lang="ar"]{font-family:var(--ar-font);}
.qp-vh{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}
.qp-noscript{font-family:var(--ui-font); background:var(--teal-tint); border-radius:var(--radius); padding:12px 16px;}

/* ---------- Arabic text ---------- */
.qp-ar{font-family:var(--ar-font); direction:rtl; unicode-bidi:isolate; line-height:1.7; color:var(--teal-deep);}
.qp-ar-lg{font-size:30px;}
.qp-ar-xl{font-size:44px; line-height:1.55;}
.qp-cal{font-family:var(--cal-font); font-weight:700;}
.qp-tl{font-family:var(--head-font); font-style:italic; color:var(--gold-text);}
.qp-en{font-family:var(--ui-font); color:var(--ink);}
.qp-muted{color:var(--ink-soft);}

/* ---------- Hero ---------- */
.qp-hero{position:relative; text-align:center; padding:30px 12px 18px; isolation:isolate;}
.qp-hero-band{position:absolute; inset:10px 0 0; z-index:-1; border-radius:0 0 50% 50% / 0 0 26px 26px; background:linear-gradient(180deg, var(--teal-tint), rgba(239,225,211,0)); overflow:hidden;}
.qp-hero-band::before{content:''; position:absolute; inset:0; background-color:var(--teal); opacity:.13;
  -webkit-mask:var(--qp-khatam) center top / 40px 40px repeat; mask:var(--qp-khatam) center top / 40px 40px repeat;}
.qp-hero-band::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(242,248,252,0) 30%, var(--bg) 96%);}
.qp-eyebrow{font-family:var(--ui-font); font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-text); margin:0 0 6px;}
.qp-hero h1{font-family:var(--head-font); font-weight:600; font-size:34px; line-height:1.15; color:var(--teal-deep); margin:0;}
.qp-hero-ar{font-family:var(--cal-font); font-weight:700; font-size:40px; line-height:1.6; color:var(--navy); margin:2px 0 6px;}
.qp-lead{font-family:var(--ui-font); font-size:16px; color:var(--ink-soft); max-width:560px; margin:0 auto;}
/* the one thing to tap first: today's next game */
.qp-hero-go{margin:16px auto 0; padding:12px 24px 12px 18px; font-size:16.5px;}
.qp-hero-go svg{width:20px; height:20px; flex:none; fill:currentColor;}

/* ---------- Section headings ---------- */
.qp-h2{font-family:var(--head-font); font-weight:600; font-size:22px; line-height:1.3; color:var(--teal-deep); margin:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 12px;}
.qp-h2-ar{font-family:var(--cal-font); font-weight:700; font-size:24px; color:var(--gold); line-height:1.4;}

/* ---------- Banners ---------- */
.qp-banner{display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--bg-panel); border:1px solid var(--border-soft); border-left:5px solid var(--teal);
  border-radius:var(--radius); padding:14px 16px; margin:6px 0 18px; box-shadow:0 10px 28px -24px var(--shadow); font-family:var(--ui-font);}
.qp-banner-b{flex:1 1 280px; min-width:0; display:flex; flex-direction:column; gap:2px;}
.qp-banner-b b{color:var(--ink); font-size:16px;}
.qp-banner-b span{color:var(--ink-soft); font-size:14.5px;}
.qp-banner-acts{display:flex; gap:8px; flex-wrap:wrap;}
.qp-banner-ic{flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--teal-tint); color:var(--teal);}
.qp-banner-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.qp-banner-star{background:var(--gold); clip-path:var(--qp-star8); border-radius:0;}
.qp-banner-lock{border-left-color:var(--gold);}
.qp-one{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:26px 22px; text-align:center; margin:10px auto 30px; max-width:560px; font-family:var(--ui-font);}
.qp-one h2{font-family:var(--head-font); color:var(--teal-deep); font-size:22px; margin:0 0 8px;}
.qp-one p{color:var(--ink-soft); margin:0 0 16px;}

/* ---------- Buttons ---------- */
.qp-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:10px 20px; border-radius:100px; border:2px solid var(--teal);
  background:var(--bg-panel); color:var(--teal-text); font-family:var(--ui-font); font-weight:700; font-size:15.5px; line-height:1.2; text-decoration:none; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .15s var(--qp-ease), background-color .15s, box-shadow .15s;}
.qp-btn:hover{background:var(--teal-tint);}
.qp-btn:active{transform:scale(.97);}
.qp-btn-primary{background:var(--teal); color:#fff !important; box-shadow:0 8px 18px -12px rgba(107,52,32,.8);}
.qp-btn-primary:hover{background:var(--teal-deep); border-color:var(--teal-deep);}
.qp-btn-ghost{border-color:var(--border); color:var(--ink);}
.qp-btn-ghost:hover{border-color:var(--teal); color:var(--teal-text); background:var(--bg-panel);}
.qp-btn-soft{border-color:transparent; background:var(--teal-tint); color:var(--teal-deep);}
.qp-btn-sm{min-height:40px; padding:7px 16px; font-size:14.5px;}
.qp-btn[disabled], .qp-btn[aria-disabled="true"]{opacity:.5; cursor:not-allowed; transform:none;}
.qp-icon-btn{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--bg-panel); color:var(--teal-deep);
  display:inline-grid; place-items:center; cursor:pointer; padding:0; touch-action:manipulation;}
@media (hover:hover){ .qp-icon-btn:hover:not([disabled]){border-color:var(--teal); color:var(--teal);} }
.qp-icon-btn[disabled]{opacity:.35; cursor:default;}
.qp-icon-btn svg, .qp-back svg, .qp-tog svg, .qp-say svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.qp-icon-btn svg .f, .qp-tog svg .f, .qp-say svg .f{fill:currentColor; stroke:none;}
.qp-say{flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--border-soft); background:var(--teal-tint); color:var(--teal);
  display:inline-grid; place-items:center; cursor:pointer; padding:0; touch-action:manipulation; transition:transform .15s var(--qp-ease);}
@media (hover:hover){ .qp-say:hover{border-color:var(--teal);} }
.qp-say.playing{background:var(--teal); color:#fff; border-color:var(--teal);}
.qp-say-sm{width:38px; height:38px;}
.qp-say-sm svg{width:17px; height:17px;}
:where(.qp-btn, .qp-icon-btn, .qp-say, .qp-opt, .qp-stop, .qp-card, .qp-tool, .qp-today-chip, .qp-back, .qp-tog, .qp-toast-act):focus-visible{outline:3px solid var(--navy-mid); outline-offset:2px;}

/* ---------- Chips ---------- */
.qp-chip{display:inline-flex; align-items:center; gap:5px; border-radius:100px; padding:3px 11px; font-family:var(--ui-font); font-size:12.5px; font-weight:700;
  background:var(--tone-tint); color:var(--tone-deep); letter-spacing:.01em; white-space:nowrap;}
.qp-chip svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.qp-chip-off{background:var(--border-soft); color:var(--ink-soft);}
.qp-chip-best{background:var(--sand); color:var(--gold-deep); box-shadow:inset 0 0 0 1px var(--gold-soft);}
.qp-badge{display:inline-block; min-width:20px; padding:1px 7px; border-radius:100px; background:var(--teal); color:#fff; font-family:var(--ui-font); font-size:12px; font-weight:700; text-align:center;}
.qp-kbd{font-family:var(--ui-font); font-size:12px; border:1px solid var(--border); border-bottom-width:2px; border-radius:4px; padding:0 5px; background:var(--bg-panel);}

/* ---------- Journey map ---------- */
.qp-journey{margin:6px 0 22px;}
.qp-journey-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 16px; margin:0 0 10px;}
.qp-legend{list-style:none; display:flex; flex-wrap:wrap; gap:4px 14px; margin:0; padding:0; font-family:var(--ui-font); font-size:12.5px; color:var(--ink-soft);}
.qp-legend li{display:inline-flex; align-items:center; gap:6px;}
.qp-key{display:inline-block; width:14px; height:14px; border-radius:50%; border:2px solid var(--teal); background:var(--bg-panel);}
.qp-key-sel{background:var(--teal);}
.qp-key-done{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg);}
.qp-key-gate{border-radius:7px 7px 2px 2px; border-color:var(--gold); background:var(--gold-soft);}
.qp-key-lock{border-style:dashed; border-color:var(--border); opacity:.8;}
.qp-map{position:relative; display:grid; grid-template-columns:repeat(auto-fill, minmax(372px, 1fr)); gap:12px; min-width:0;}
.qp-unitnav{display:none;}
.qp-region{position:relative; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:10px 8px 12px; overflow:hidden;
  transition:border-color .2s, box-shadow .2s; isolation:isolate; min-width:0;}
.qp-region::before{content:''; position:absolute; left:0; right:0; top:0; height:38px; z-index:-1; background-color:var(--gold); opacity:.10;
  -webkit-mask:var(--qp-zellij) 0 0 / 24px 24px repeat; mask:var(--qp-zellij) 0 0 / 24px 24px repeat;}
.qp-region:nth-child(2n)::before{-webkit-mask-image:var(--qp-circles); mask-image:var(--qp-circles); -webkit-mask-size:30px 30px; mask-size:30px 30px;}
.qp-region:nth-child(3n)::before{-webkit-mask-image:var(--qp-khatam); mask-image:var(--qp-khatam); -webkit-mask-size:40px 40px; mask-size:40px 40px;}
.qp-region.is-here{border-color:var(--teal); box-shadow:0 12px 30px -22px rgba(107,52,32,.7);}
.qp-region.is-here::before{background-color:var(--teal); opacity:.14;}
.qp-region-head{display:flex; align-items:baseline; flex-wrap:wrap; gap:0 8px; padding:0 4px 8px; min-height:38px;}
.qp-region-n{font-family:var(--ui-font); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold-deep);}
.qp-region-ar{font-family:var(--cal-font); font-weight:700; font-size:17px; color:var(--teal-deep); line-height:1.4;}
.qp-region-name{flex-basis:100%; font-family:var(--ui-font); font-size:13px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.qp-stops{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); row-gap:6px;}
.qp-cell{position:relative; display:flex; justify-content:center; align-items:center; min-width:0;}
/* the path between stops: half a line on each side, none before the first or after the last of a row */
.qp-cell::before, .qp-cell::after{content:''; position:absolute; top:50%; height:3px; margin-top:-1.5px; background:repeating-linear-gradient(90deg, var(--gold-soft) 0 6px, transparent 6px 9px); z-index:0;}
.qp-cell::before{left:0; right:50%;}
.qp-cell::after{left:50%; right:0;}
.qp-cell:nth-child(8n+1)::before, .qp-cell:nth-child(8n)::after, .qp-cell:last-child::after{display:none;}
.qp-cell.is-class .qp-stop::after{content:''; position:absolute; bottom:-1px; left:50%; width:6px; height:6px; margin-left:-3px; border-radius:50%; background:var(--navy-mid);}
.qp-stop{position:relative; z-index:1; width:100%; max-width:44px; aspect-ratio:1; min-height:40px; padding:0; border:none; background:none; cursor:pointer;
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent; touch-action:manipulation; border-radius:50%;}
.qp-stop-n{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; border:2px solid var(--teal); background:var(--bg-panel); color:var(--teal-deep);
  font-family:var(--ui-font); font-weight:700; font-size:13px; transition:transform .2s var(--qp-ease), background-color .2s, box-shadow .2s;}
.qp-stop:hover .qp-stop-n{transform:scale(1.08); box-shadow:0 0 0 4px var(--teal-tint);}
.qp-stop.is-gate .qp-stop-n{border-radius:16px 16px 5px 5px / 18px 18px 5px 5px; border-color:var(--gold); background:var(--sand); color:var(--gold-deep); height:34px;}
.qp-stop.is-done .qp-stop-n{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg); color:var(--green-deep);}
.qp-stop.is-locked .qp-stop-n{border-style:dashed; border-color:var(--border); color:var(--ink-soft); background:var(--bg);}
.qp-stop.is-locked{opacity:.62;}
.qp-stop.is-sel{opacity:1;}
.qp-stop.is-sel .qp-stop-n{background:var(--teal); border-color:var(--teal-deep); color:#fff; transform:scale(1.14); box-shadow:0 0 0 4px var(--teal-tint), 0 6px 14px -6px rgba(107,52,32,.8);}
.qp-stop.is-sel.is-gate .qp-stop-n{background:var(--gold-deep); border-color:var(--gold);}
.qp-stop.is-sel.is-locked .qp-stop-n{background:var(--ink-soft); border-color:var(--ink-soft); border-style:solid;}

/* the chosen week */
.qp-week{margin:14px 0 0; display:grid; gap:12px;}
.qp-week-nav{display:flex; align-items:center; gap:12px; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:12px 14px;}
.qp-week-info{flex:1 1 auto; min-width:0; text-align:center; font-family:var(--ui-font);}
.qp-week-k{margin:0; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep);}
.qp-week-h{margin:2px 0 4px; font-family:var(--head-font); font-weight:600; font-size:21px; line-height:1.25; color:var(--teal-deep);}
.qp-week-stats{margin:0; display:flex; justify-content:center; flex-wrap:wrap; gap:4px 16px; font-size:14px; color:var(--ink-soft);}
.qp-week-stats b{color:var(--ink); font-size:15px;}
.qp-week-stats a{font-weight:700; text-decoration:none;}
.qp-week-stats a:hover{text-decoration:underline;}

/* ---------- Letter guides (avatars, no faces) ---------- */
.qp-avatar{position:relative; flex:none; display:inline-grid; place-items:center; width:52px; height:52px; isolation:isolate;}
.qp-avatar::before{content:''; position:absolute; inset:0; z-index:-1; background:var(--tone); clip-path:var(--qp-star8); opacity:.9;}
.qp-avatar::after{content:''; position:absolute; inset:7px; z-index:-1; border-radius:50%; background:var(--bg-panel); box-shadow:inset 0 0 0 2px var(--tone-tint);}
.qp-avatar-l{font-family:var(--cal-font); font-weight:700; font-size:24px; line-height:1; color:var(--tone-deep); transform:translateY(2px);}
.qp-guide{display:flex; align-items:flex-start; gap:12px; background:var(--sand); border:1px solid var(--gold-soft); border-radius:var(--radius); padding:10px 14px 10px 10px; font-family:var(--ui-font);}
.qp-guide-amira{background:var(--navy-tint); border-color:#C9DCEA;}
.qp-guide-b{min-width:0;}
.qp-guide-name{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.4;}
.qp-guide-name b{font-family:var(--cal-font); font-size:17px; color:var(--teal-deep);}
.qp-guide-amira .qp-guide-name b{color:var(--navy);}
.qp-guide-t{margin:2px 0 0; font-size:15px; line-height:1.45; color:var(--ink);}
.qp-guide-go{margin:8px 0 2px;}
.qp-page a.qp-guide-go{color:var(--teal-deep);}

/* ---------- Today ---------- */
.qp-today{position:relative; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:18px; padding:16px; margin:0 0 26px; overflow:hidden; isolation:isolate;}
.qp-today::before{content:''; position:absolute; inset:0 0 auto auto; width:220px; height:100%; z-index:-1; background-color:var(--navy-mid); opacity:.07;
  -webkit-mask:var(--qp-khatam) right top / 40px 40px repeat; mask:var(--qp-khatam) right top / 40px 40px repeat;}
.qp-today-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin:0 0 12px;}
.qp-today-sub{margin:0; font-family:var(--ui-font); font-size:14px; color:var(--ink-soft);}
.qp-today-row{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px;}
.qp-today-chip{display:flex; align-items:center; gap:10px; min-height:62px; padding:10px 12px; border-radius:14px; border:2px solid var(--border-soft); background:var(--bg);
  text-decoration:none; color:var(--ink) !important; font-family:var(--ui-font); transition:border-color .15s, transform .15s var(--qp-ease), background-color .2s; min-width:0;}
.qp-today-chip:hover{border-color:var(--teal); transform:translateY(-2px);}
.qp-today-tick{flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:var(--teal-tint); color:var(--teal-deep);
  font-family:var(--cal-font); font-weight:700; font-size:20px;}
.qp-today-tick svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round;}
.qp-today-l{display:flex; flex-direction:column; min-width:0; font-weight:700; font-size:15px; line-height:1.25;}
.qp-today-l small{font-weight:500; font-size:12.5px; color:var(--ink-soft);}
.qp-today-chip.is-done{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg);}
.qp-today-chip.is-done .qp-today-tick{background:var(--pill-learned-ink); color:#fff;}
.qp-today-chip.is-off{opacity:.55; filter:grayscale(.5);}
.qp-today-chip.is-off:hover{transform:none; border-color:var(--border-soft);}
.qp-seal{display:flex; flex-direction:column; align-items:center; gap:6px; margin:16px auto 2px; text-align:center;}
.qp-seal-medal{position:relative; width:124px; height:124px; display:grid; place-items:center; isolation:isolate; animation:qp-seal-in .7s var(--qp-ease) both;}
.qp-seal-star, .qp-end-star{position:absolute; inset:0; z-index:-1; background:var(--gold); clip-path:var(--qp-star8);}
.qp-seal-star::after, .qp-end-star::after{content:''; position:absolute; inset:9px; background:var(--sand); clip-path:var(--qp-star8);}
.qp-seal-star::before, .qp-end-star::before{content:''; position:absolute; inset:16px; z-index:1; border-radius:50%; border:2px solid var(--gold-soft);}
.qp-seal-ar{position:relative; z-index:2; font-family:var(--cal-font); font-weight:700; font-size:24px; line-height:1.4; color:var(--gold-deep);}
.qp-seal-en{font-family:var(--ui-font); font-weight:700; font-size:12.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--gold-deep);}
.qp-today.is-all{border-color:var(--gold-soft); background:linear-gradient(180deg, var(--bg-panel), var(--sand));}

/* ---------- Shelves and cards ---------- */
.qp-shelf{margin:0 0 30px;}
.qp-shelf-head{margin:0 0 12px;}
.qp-shelf-lead{margin:4px 0 0; font-family:var(--ui-font); font-size:14.5px; color:var(--ink-soft);}
.qp-shelf-pair{display:grid; grid-template-columns:1fr 1fr; gap:0 18px;}
.qp-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap:14px;}
.qp-shelf-pair .qp-grid{grid-template-columns:1fr;}
.qp-card{position:relative; display:flex; flex-direction:column; min-width:0; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:18px; overflow:hidden;
  text-decoration:none; color:var(--ink) !important; box-shadow:0 10px 26px -22px var(--shadow); transition:transform .22s var(--qp-ease), box-shadow .22s, border-color .2s;
  -webkit-tap-highlight-color:transparent;}
.qp-card:hover{transform:translateY(-4px); border-color:var(--tone); box-shadow:0 22px 36px -24px var(--shadow);}
.qp-card:active{transform:translateY(-1px) scale(.99);}
.qp-card-art{position:relative; display:block; height:78px; background:linear-gradient(135deg, var(--tone-tint), var(--bg-panel)); isolation:isolate; overflow:visible;}
.qp-mosaic{position:absolute; inset:0; z-index:-1; background-color:var(--tone); opacity:.32; transition:opacity .3s;
  -webkit-mask:var(--qp-khatam) center / 40px 40px repeat; mask:var(--qp-khatam) center / 40px 40px repeat;}
.qp-grid > :nth-child(3n+2) .qp-mosaic{-webkit-mask-image:var(--qp-circles); mask-image:var(--qp-circles); -webkit-mask-size:30px 30px; mask-size:30px 30px;}
.qp-grid > :nth-child(3n) .qp-mosaic{-webkit-mask-image:var(--qp-zellij); mask-image:var(--qp-zellij); -webkit-mask-size:24px 24px; mask-size:24px 24px;}
.qp-card:hover .qp-mosaic{opacity:.48;}
.qp-medal{position:absolute; left:50%; bottom:-26px; width:58px; height:58px; margin-left:-29px; display:grid; place-items:center; z-index:2; transition:transform .35s var(--qp-ease);}
.qp-medal::before{content:''; position:absolute; inset:0; background:var(--tone); clip-path:var(--qp-star8);}
.qp-medal::after{content:''; position:absolute; inset:7px; border-radius:50%; background:var(--bg-panel);}
.qp-medal span{position:relative; z-index:1; font-family:var(--cal-font); font-weight:700; font-size:26px; line-height:1; color:var(--tone-deep); transform:translateY(3px);}
.qp-card:hover .qp-medal{transform:rotate(22.5deg);}
.qp-card:hover .qp-medal span{transform:translateY(3px) rotate(-22.5deg);}
.qp-card-body{display:flex; flex-direction:column; align-items:center; gap:2px; padding:32px 14px 14px; text-align:center; flex:1 1 auto;}
.qp-card-ar{font-family:var(--cal-font); font-weight:700; font-size:24px; line-height:1.55; color:var(--tone-deep);}
.qp-card-title{font-family:var(--head-font); font-weight:600; font-size:18px; line-height:1.25; color:var(--ink);}
.qp-card-title small{display:block; font-family:var(--ui-font); font-weight:600; font-size:12.5px; color:var(--ink-soft); letter-spacing:.02em;}
.qp-card-blurb{font-family:var(--ui-font); font-size:14px; line-height:1.45; color:var(--ink-soft); margin:6px 0 10px;}
.qp-card-foot{margin-top:auto;}
.qp-card.is-off{box-shadow:none;}
.qp-card.is-off .qp-card-art, .qp-card.is-off .qp-card-ar{filter:grayscale(.75); opacity:.7;}
.qp-card.is-off:hover{transform:none; border-color:var(--border);}
.qp-card.is-off:hover .qp-medal{transform:none;}
.qp-card.is-off:hover .qp-medal span{transform:translateY(3px);}

/* study tools */
.qp-grid-tools{grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:10px;}
/* the three story modes fill the row (auto-fill would leave two empty tracks beside them on a wide screen) */
@media (min-width: 641px){ .qp-grid-stories{grid-template-columns:repeat(3, minmax(0, 1fr));} }
.qp-tool{position:relative; display:flex; align-items:flex-start; gap:12px; min-width:0; padding:12px 14px; border-radius:14px; border:1px solid var(--border-soft); background:var(--bg-panel);
  text-decoration:none; color:var(--ink) !important; font-family:var(--ui-font); transition:border-color .15s, transform .15s var(--qp-ease);}
.qp-tool:hover{border-color:var(--teal); transform:translateY(-2px);}
.qp-tool-ic{flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:12px; background:var(--teal-tint); color:var(--teal-deep);}
.qp-tool-ic svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.qp-tool-ic svg .f{fill:currentColor; stroke:none;}
.qp-tool-b{flex:1 1 auto; min-width:0; display:flex; flex-direction:column;}
.qp-tool-t{font-weight:700; font-size:15.5px; line-height:1.3;}
.qp-tool-ar{font-family:var(--cal-font); font-weight:700; font-size:16px; color:var(--gold-deep); line-height:1.5; text-align:left; direction:rtl; unicode-bidi:isolate;}
.qp-tool-d{font-size:13.5px; line-height:1.4; color:var(--ink-soft);}
.qp-tool-tag{flex:none; display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--pill-learned-ink);}
.qp-tool-tag:empty{display:none;}
.qp-tool-tag svg{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;}
.qp-tool.is-off .qp-tool-tag{color:var(--ink-soft);}
.qp-tool.is-off .qp-tool-ic{background:var(--border-soft); color:var(--ink-soft);}
.qp-shelf-tools .qp-guide{margin-top:12px;}

/* ---------- The module stage and its shell ---------- */
.qp-stage{padding:14px 0 10px; min-width:0;}
.qp-stage-loading{display:flex; align-items:center; justify-content:center; gap:12px; min-height:240px; font-family:var(--ui-font); color:var(--ink-soft);}
.qp-spinner{width:26px; height:26px; background:var(--teal); clip-path:var(--qp-star8); animation:qp-spin 1.6s linear infinite;}
.qp-stage-msg{max-width:520px; margin:30px auto; text-align:center; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:18px; padding:28px 22px; font-family:var(--ui-font);}
.qp-stage-msg h1{font-family:var(--head-font); color:var(--teal-deep); font-size:23px; margin:10px 0 6px; outline:none;}
.qp-stage-msg p{color:var(--ink-soft); margin:0 0 18px;}
.qp-stage-msg .qp-btn + .qp-btn{margin:10px 0 0 10px;}
@media (max-width: 640px){ .qp-stage-msg .qp-btn{display:flex; width:100%; max-width:320px; margin:0 auto;} .qp-stage-msg .qp-btn + .qp-btn{margin:10px auto 0;} }
.qp-stage-star{display:inline-block; width:46px; height:46px; background:var(--gold); clip-path:var(--qp-star8);}
.qp-shell{max-width:860px; margin:0 auto; min-width:0;}
.qp-shell-head{display:flex; align-items:center; gap:10px; margin:0 0 10px;}
.qp-back{flex:none; display:inline-flex; align-items:center; gap:4px; min-height:44px; padding:0 14px 0 8px; border-radius:100px; border:1px solid var(--border); background:var(--bg-panel);
  color:var(--ink); font-family:var(--ui-font); font-weight:700; font-size:14.5px; cursor:pointer; touch-action:manipulation;}
.qp-back:hover{border-color:var(--teal); color:var(--teal-text);}
.qp-shell-titles{flex:1 1 auto; min-width:0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px;}
.qp-shell-h{margin:0; font-family:var(--head-font); font-weight:600; font-size:23px; line-height:1.25; color:var(--teal-deep); outline:none;}
.qp-shell-ar{font-family:var(--cal-font); font-weight:700; font-size:21px; line-height:1.5; color:var(--gold);}
.qp-shell-sub{flex-basis:100%; font-family:var(--ui-font); font-size:13.5px; color:var(--ink-soft);}
.qp-shell-tools{flex:none; display:flex; align-items:center; gap:6px;}
.qp-shell-week{font-family:var(--ui-font); font-size:12.5px; font-weight:700; color:var(--gold-deep); background:var(--sand); border:1px solid var(--gold-soft); border-radius:100px; padding:3px 10px; white-space:nowrap;}
.qp-tog{width:44px; height:44px; border-radius:50%; border:1px solid var(--border); background:var(--bg-panel); color:var(--ink-soft); display:inline-grid; place-items:center; cursor:pointer; padding:0; position:relative;}
.qp-tog[aria-pressed="true"]{color:var(--teal-deep); background:var(--teal-tint); border-color:var(--teal);}
.qp-tog[aria-pressed="false"]::after{content:''; position:absolute; width:26px; height:2px; background:currentColor; transform:rotate(-45deg); border-radius:2px;}
.qp-shell-bar{height:8px; border-radius:8px; background:var(--border-soft); overflow:hidden; margin:0 0 10px;}
.qp-shell-bar span{display:block; height:100%; background:linear-gradient(90deg, var(--teal), var(--gold)); transform-origin:left center; transform:scaleX(0); transition:transform .35s var(--qp-ease);}
.qp-shell-status{margin:0 0 8px; font-family:var(--ui-font); font-size:14px; color:var(--ink-soft); min-height:0;}
.qp-shell-status:empty{display:none;}
.qp-shell-body{min-width:0;}
.qp-panel{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:18px; padding:20px; box-shadow:0 12px 30px -24px var(--shadow); min-width:0;}

/* ---------- Game pieces ---------- */
.qp-opts{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
.qp-opts-1{grid-template-columns:minmax(0, 1fr);}
.qp-opts-3{grid-template-columns:repeat(3, minmax(0, 1fr));}
.qp-opt{position:relative; display:flex; align-items:center; justify-content:center; gap:8px; min-height:60px; padding:10px 14px; border-radius:14px; border:2px solid var(--border);
  background:var(--bg-panel); color:var(--ink); font-family:var(--ui-font); font-size:16.5px; font-weight:600; line-height:1.35; text-align:center; cursor:pointer; overflow-wrap:anywhere;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:transform .12s var(--qp-ease), border-color .15s, background-color .15s, box-shadow .15s;
  box-shadow:0 3px 0 var(--border-soft);}
/* only where there is a real hover: a phone keeps :hover on the tapped tile, and the next question reuses it */
@media (hover: hover){ .qp-opt:hover:not([disabled]){border-color:var(--teal); background:var(--teal-tint);} }
.qp-opt:active:not([disabled]){transform:translateY(2px); box-shadow:0 1px 0 var(--border-soft);}
.qp-opt[disabled]{cursor:default;}
.qp-opt .qp-ar, .qp-opt[lang="ar"]{font-size:24px; line-height:1.6; font-weight:400; color:inherit;}
.qp-opt.is-picked{border-color:var(--navy-mid); background:var(--navy-tint);}
.qp-opt.is-right{border-color:var(--pill-learned-ink); background:var(--pill-learned-bg); color:var(--green-deep); box-shadow:0 3px 0 #B7D9C2; animation:qp-pop .4s var(--qp-ease);}
.qp-opt.is-wrong{border-color:var(--red-soft); background:var(--red-tint); color:var(--red-deep); animation:qp-shake .35s ease;}
.qp-opt.is-dim{opacity:.45;}
.qp-opt-key{position:absolute; top:6px; left:8px; font-size:11px; font-weight:700; color:var(--ink-soft); opacity:.7;}
.qp-timer{position:relative; height:10px; border-radius:10px; background:var(--border-soft); overflow:hidden;}
.qp-timer > span{position:absolute; inset:0; background:linear-gradient(90deg, var(--pill-learned-ink), var(--gold)); transform-origin:left center; transform:scaleX(var(--t, 1)); transition:transform .2s linear;}
.qp-timer.is-low > span{background:linear-gradient(90deg, var(--red-soft), var(--teal)); animation:qp-throb 1s ease-in-out infinite;}
.qp-timer.is-paused > span{opacity:.5;}
.qp-combo{display:inline-flex; align-items:center; gap:8px; font-family:var(--ui-font); font-weight:700; color:var(--ink-soft);}
.qp-combo b{min-width:38px; text-align:center; font-size:17px; color:var(--teal-deep); background:var(--teal-tint); border-radius:100px; padding:2px 8px; transition:transform .2s var(--qp-ease);}
.qp-combo-bar{width:80px; height:8px; border-radius:8px; background:var(--border-soft); overflow:hidden;}
.qp-combo-bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg, var(--gold), var(--teal)); transform-origin:left center; transform:scaleX(var(--c, 0)); transition:transform .25s var(--qp-ease);}
.qp-combo.is-hot b{background:var(--teal); color:#fff; box-shadow:0 0 0 4px rgba(184,92,56,.18); animation:qp-glow 1.2s ease-in-out infinite;}
.qp-combo.is-bump b, .qp-score.is-bump{animation:qp-pop .35s var(--qp-ease);}
.qp-score{display:inline-block; font-family:var(--head-font); font-weight:600; font-size:28px; color:var(--teal-deep); font-variant-numeric:tabular-nums;}
.qp-dots{display:flex; flex-wrap:wrap; gap:6px; justify-content:center;}
.qp-dots i{width:10px; height:10px; border-radius:50%; background:var(--border-soft); transition:background-color .2s, transform .2s;}
.qp-dots i.is-done{background:var(--pill-learned-ink);}
.qp-dots i.is-miss{background:var(--gold);}
.qp-dots i.is-now{background:var(--teal); transform:scale(1.35);}
.qp-wordlist{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.qp-wordrow{display:flex; align-items:center; gap:12px; padding:6px 8px 6px 12px; border-radius:12px; background:var(--bg); border:1px solid var(--border-soft);}
.qp-wordrow-ar{flex:none; font-family:var(--ar-font); font-size:22px; line-height:1.6; color:var(--teal-deep); direction:rtl; unicode-bidi:isolate;}
.qp-wordrow-en{flex:1 1 auto; min-width:0; font-family:var(--ui-font); font-size:14.5px; color:var(--ink);}

/* ---------- End screen ---------- */
.qp-end{scroll-margin-top:72px; max-width:560px; margin:10px auto; text-align:center; background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:22px; padding:26px 20px 22px;
  box-shadow:0 18px 40px -30px var(--shadow); font-family:var(--ui-font); animation:qp-rise .45s var(--qp-ease) both;}
.qp-end-seal{position:relative; width:118px; height:118px; margin:0 auto 6px; display:grid; place-items:center; isolation:isolate;}
.qp-end-seal .qp-end-star{background:var(--teal);}
.qp-end-seal.is-best .qp-end-star{background:var(--gold);}
.qp-end-praise{position:relative; z-index:2; font-family:var(--cal-font); font-weight:700; font-size:24px; line-height:1.4; color:var(--teal-deep);}
.qp-end-praise-en{font-family:var(--ui-font); font-size:34px;}
.qp-end.is-celebrate .qp-end-seal{animation:qp-seal-in .8s var(--qp-ease) both;}
.qp-end-h{font-family:var(--head-font); font-weight:600; font-size:25px; color:var(--teal-deep); margin:4px 0 2px;}
.qp-end-score{margin:0; font-family:var(--head-font); color:var(--ink-soft); font-size:20px;}
.qp-end-score b{font-size:44px; color:var(--teal-deep); font-weight:600; font-variant-numeric:tabular-nums;}
.qp-end-unit{font-family:var(--ui-font); font-size:15px;}
.qp-end-best{display:inline-block; margin:8px 0 0; padding:3px 12px; border-radius:100px; background:var(--bg); color:var(--ink-soft); font-weight:700; font-size:13.5px;}
.qp-end-best.is-new{background:var(--gold-deep); color:#fff; letter-spacing:.02em;}
.qp-end-stats{display:grid; grid-template-columns:repeat(auto-fit, minmax(110px, 1fr)); gap:8px; margin:16px 0 0;}
.qp-end-stat{background:var(--bg); border:1px solid var(--border-soft); border-radius:12px; padding:10px 8px;}
.qp-end-stat b{display:block; font-family:var(--head-font); font-size:22px; color:var(--teal-deep);}
.qp-end-stat span{font-size:12.5px; color:var(--ink-soft);}
.qp-end-note{margin:14px 0 0; color:var(--ink-soft); font-size:15px;}
.qp-end-words{margin:22px 0 0; padding-top:16px; border-top:1px solid var(--border-soft); text-align:left;}
.qp-end-wh{margin:0 0 8px; font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--gold-deep);}
.qp-end-btns{display:flex; flex-direction:column; align-items:center; gap:10px; margin:20px 0 0;}
.qp-end-btns .qp-btn{width:100%; max-width:320px;}

/* ---------- Toasts ---------- */
.qp-toasts{position:fixed; left:0; right:0; bottom:max(18px, env(safe-area-inset-bottom)); z-index:80; display:flex; justify-content:center; pointer-events:none; padding:0 16px;}
@media (max-width:600px){ body.q-has-tabbar .qp-toasts{bottom:calc(72px + env(safe-area-inset-bottom));} }
.qp-toast{pointer-events:auto; display:flex; align-items:center; gap:12px; max-width:520px; background:var(--navy); color:#fff; font-family:var(--ui-font); font-size:15px; line-height:1.4;
  border-radius:14px; padding:12px 16px; box-shadow:0 16px 34px -18px rgba(18,59,92,.9); transform:translateY(16px); opacity:0; transition:transform .25s var(--qp-ease), opacity .25s;}
.qp-toast.is-in{transform:none; opacity:1;}
.qp-toast-act{flex:none; min-height:40px; border:none; border-radius:100px; padding:6px 14px; background:#fff; color:var(--navy); font-family:var(--ui-font); font-weight:700; font-size:14px; cursor:pointer;}

/* ---------- Motion ---------- */
@keyframes qp-pop{0%{transform:scale(1);} 45%{transform:scale(1.07);} 100%{transform:scale(1);}}
@keyframes qp-shake{0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 50%{transform:translateX(4px);} 75%{transform:translateX(-2px);}}
@keyframes qp-rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@keyframes qp-glow{50%{box-shadow:0 0 0 7px rgba(184,92,56,.10);}}
@keyframes qp-throb{50%{opacity:.7;}}
@keyframes qp-spin{to{transform:rotate(360deg);}}
@keyframes qp-seal-in{0%{opacity:0; transform:scale(.4) rotate(-45deg);} 70%{opacity:1; transform:scale(1.08) rotate(6deg);} 100%{transform:none;}}
@media (prefers-reduced-motion: reduce){
  .qp-page *, .qp-page *::before, .qp-page *::after, .qp-toast{animation:none !important; transition:none !important;}
  .qp-card:hover, .qp-tool:hover, .qp-today-chip:hover{transform:none;}
  .qp-card:hover .qp-medal, .qp-card:hover .qp-medal span{transform:none;}
  .qp-card:hover .qp-medal span, .qp-medal span{transform:translateY(3px);}
}

/* ---------- Touch screens: every target at least 44px ---------- */
@media (pointer: coarse){
  .qp-stop{min-height:44px;}
  .qp-btn-sm{min-height:44px;}
  .qp-say-sm{width:44px; height:44px;}
  .qp-toast-act{min-height:44px;}
  .qp-week-stats a{display:inline-flex; align-items:center; min-height:44px;}
  .qp-card:hover, .qp-tool:hover, .qp-today-chip:hover{transform:none;}
  .qp-card:hover .qp-medal{transform:none;}
  .qp-card:hover .qp-medal span{transform:translateY(3px);}
}

/* ---------- Tablets ---------- */
@media (max-width: 820px){
  .qp-page{padding:0 16px;}
  .qp-hero{padding:22px 4px 12px;}
  .qp-hero h1{font-size:29px;}
  .qp-hero-ar{font-size:34px;}
  /* the map: one unit at a time, swiped sideways inside the map (never the page) */
  .qp-map{display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; gap:10px; padding:2px 0 6px; scrollbar-width:none;
    transition:height .25s var(--qp-ease);}
  .qp-map::-webkit-scrollbar{display:none;}
  .qp-region{flex:0 0 100%; scroll-snap-align:start; padding:10px 2px 12px;}
  .qp-region-head{padding:0 8px 8px;}
  /* which unit the map shows; tap one to go there */
  .qp-unitnav{display:flex; justify-content:center; gap:6px; margin:4px 0 0;}
  .qp-unitnav button{min-width:44px; min-height:44px; padding:0 8px; border-radius:100px; border:1px solid var(--border); background:var(--bg-panel); color:var(--ink-soft);
    font-family:var(--ui-font); font-weight:700; font-size:13px; cursor:pointer; touch-action:manipulation;}
  .qp-unitnav button[aria-current="true"]{background:var(--teal-tint); border-color:var(--teal); color:var(--teal-deep);}
  .qp-unitnav button.has-sel::after{content:''; display:inline-block; width:6px; height:6px; margin-left:5px; border-radius:50%; background:var(--teal); vertical-align:2px;}
  /* six equal pills, each on one line; the chosen week's unit keeps its dot, under the label */
  .qp-unitnav button{white-space:nowrap; padding:0 4px; font-size:12.5px; position:relative; flex:1 1 0; min-width:0; max-width:76px;}
  .qp-unitnav button.has-sel::after{position:absolute; left:50%; bottom:5px; margin:0 0 0 -3px;}
  .qp-shelf-pair{grid-template-columns:1fr 1fr; gap:0 12px;}
  .qp-shelf-pair .qp-grid{grid-template-columns:minmax(0, 1fr);}
  .qp-week-h{font-size:19px;}
  .qp-opt .qp-ar, .qp-opt[lang="ar"]{font-size:23px;}
}

/* ---------- Phones ---------- */
@media (max-width: 640px){
  .qp-lead{font-size:15px;}
  .qp-h2{font-size:20px;}
  .qp-h2-ar{font-size:21px;}
  .qp-banner{padding:12px; gap:10px;}
  .qp-banner-ic{display:none;}
  .qp-banner-acts{width:100%;}
  .qp-banner-acts .qp-btn{flex:1 1 auto;}
  .qp-legend{gap:4px 10px; font-size:12px;}
  .qp-week-nav{padding:10px 8px; gap:6px;}
  .qp-week-stats{gap:2px 12px; font-size:13.5px;}
  .qp-today{padding:14px 12px;}
  .qp-today-row{gap:8px;}
  .qp-today-chip{flex-direction:column; text-align:center; gap:6px; padding:10px 6px; min-height:96px; justify-content:center;}
  .qp-today-l{font-size:13.5px; align-items:center;}
  .qp-today-l small{font-size:12px;}
  .qp-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px;}
  /* an odd last card in a two-column shelf lies across the whole row */
  .qp-grid-games > .qp-card:last-child:nth-child(odd), .qp-grid-stories > .qp-card:last-child:nth-child(odd){grid-column:1 / -1; flex-direction:row; align-items:stretch;}
  .qp-grid-games > .qp-card:last-child:nth-child(odd) .qp-card-art, .qp-grid-stories > .qp-card:last-child:nth-child(odd) .qp-card-art{flex:none; width:92px; height:auto; min-height:120px;}
  .qp-grid-games > .qp-card:last-child:nth-child(odd) .qp-medal, .qp-grid-stories > .qp-card:last-child:nth-child(odd) .qp-medal{left:auto; right:-25px; bottom:auto; top:50%; margin:-25px 0 0;}
  .qp-grid-games > .qp-card:last-child:nth-child(odd) .qp-card-body, .qp-grid-stories > .qp-card:last-child:nth-child(odd) .qp-card-body{align-items:flex-start; text-align:left; padding:12px 12px 12px 38px;}
  .qp-grid-tools{grid-template-columns:minmax(0, 1fr);}
  .qp-card{border-radius:16px;}
  .qp-card-art{height:62px;}
  .qp-medal{width:50px; height:50px; margin-left:-25px; bottom:-22px;}
  .qp-medal span{font-size:22px;}
  .qp-card-body{padding:28px 10px 12px;}
  .qp-card-ar{font-size:20px;}
  .qp-card-title{font-size:16px;}
  .qp-card-blurb{font-size:13px; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
  .qp-shell-head{flex-wrap:wrap;}
  .qp-shell-titles{order:3; flex-basis:100%;}
  .qp-shell-tools{margin-left:auto;}
  .qp-shell-h{font-size:21px;}
  .qp-panel{padding:16px 12px; border-radius:16px;}
  .qp-opts-3{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .qp-opt{min-height:56px; font-size:15.5px; padding:8px 10px;}
  .qp-ar-xl{font-size:38px;}
  .qp-end{padding:22px 14px 18px; border-radius:18px;}
  .qp-end-score b{font-size:40px;}
}
@media (max-width: 360px){
  .qp-grid, .qp-shelf-pair{grid-template-columns:minmax(0, 1fr);}
  .qp-today-l small{display:none;}
}
@media print{ .qp-toasts, .qp-today, .qp-journey{display:none !important;} }

/* ---------- programme mode (window.QPLAY_PROGRAMME, e.g. the GCSE games): only what a programme adds ---------- */
.fg-masdar{display:flex; align-items:center; gap:8px 12px; flex-wrap:wrap; margin:12px 0 0; font-family:var(--ui-font); font-size:14px; color:var(--ink-soft);}
.fg-masdar > span{font-weight:700; color:var(--teal-deep);}
.fg-masdar > span [lang="ar"]{font-weight:400; margin-left:4px;}
.fg-masdar .fg-masdar-btn{width:auto; min-width:120px; flex:none;}

/* ===== The class's hub (non-programme): compact title, week bar, one board for the week ===== */
.qp-hero-compact{padding:18px 12px 6px;}
.qp-hero-compact h1{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 16px; font-size:28px;}
.qp-hero-compact .qp-hero-ar{font-size:26px; line-height:1.4; margin:0;}
.qp-journey .qp-week{margin:0;}
.qp-here{color:var(--pill-learned-ink, #2E6B47);}
.qp-week-acts{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.qp-mapbox{margin:10px 0 0;}
.qp-mapbox > summary{display:none;}
.qp-mapbox[open]{background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius); padding:14px 12px 10px;}
.qp-mapbox .qp-legend{margin:0 0 12px; justify-content:flex-start;}
.qp-board-head{margin:22px 0 14px; padding:14px 16px; border:1px solid var(--border-soft); border-radius:18px; background:var(--bg-panel);}
.qp-board-top{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px;}
.qp-board-top .qp-h2{margin:0;}
.qp-board-prog{display:flex; align-items:center; gap:10px; font-family:var(--ui-font); font-size:14px; color:var(--ink);}
.qp-board-bar{display:block; width:140px; height:9px; border-radius:100px; background:var(--border-soft); overflow:hidden;}
.qp-board-bar span{display:block; height:100%; background:var(--pill-learned-ink, #2E6B47); border-radius:100px; transition:width .35s ease;}
.qp-board-today{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:12px 0 0; padding-top:12px; border-top:1px dashed var(--border); font-family:var(--ui-font); font-size:14px;}
.qp-board-today-l b{color:var(--teal-deep);}
.qp-tchips{display:flex; flex-wrap:wrap; gap:6px; flex:1 1 auto;}
.qp-tchip{font-size:12.5px; font-weight:700; padding:2px 10px; border-radius:100px; background:var(--bg); border:1px solid var(--border-soft); color:var(--ink-soft);}
.qp-tchip.is-done{background:var(--pill-learned-bg, #DCEEE1); border-color:var(--pill-learned-ink, #2E6B47); color:var(--pill-learned-ink, #2E6B47);}
.qp-board-well{font-weight:700; color:var(--pill-learned-ink, #2E6B47);}
.qp-group{margin:0 0 20px;}
.qp-group-h{display:flex; align-items:baseline; gap:10px; margin:0 0 8px; font-family:var(--head-font); font-size:19px; font-weight:600; color:var(--teal-deep);}
.qp-group-h span{font-family:var(--cal-font); font-size:19px; color:var(--gold-deep, #8A6A2D);}
.qp-tiles{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:10px;}
.qp-tile{position:relative; display:flex; align-items:center; gap:12px; min-width:0; padding:10px 12px; border-radius:14px; background:var(--bg-panel); border:2px solid var(--border-soft); text-decoration:none; color:var(--ink); transition:border-color .15s, transform .15s;}
.qp-tile:hover{border-color:var(--tone, var(--teal)); transform:translateY(-1px);}
.qp-tile:focus-visible{outline:3px solid var(--navy-mid); outline-offset:2px;}
.qp-tile-medal{flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--tone-tint, var(--teal-tint)); color:var(--tone, var(--teal-deep)); font-family:var(--cal-font); font-size:24px; font-weight:700; line-height:1;}
.qp-tile-b{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; font-family:var(--ui-font);}
.qp-tile-t{font-weight:700; font-size:15.5px; line-height:1.25;}
.qp-tile-t small{display:block; margin-top:1px; font-weight:500; font-size:12.5px; color:var(--ink-soft);}
.qp-tile-d{font-size:13px; color:var(--ink-soft); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.qp-tile-meta{display:flex; flex-wrap:wrap; gap:2px 10px; font-size:12.5px; font-weight:700; color:var(--gold-deep, #8A6A2D);}
.qp-tile-today{color:var(--ink-soft);}
.qp-tile-today.is-done{color:var(--pill-learned-ink, #2E6B47);}
.qp-tile-chip{flex:none; display:inline-flex; align-items:center; gap:5px; font-family:var(--ui-font); font-size:13px; font-weight:700; padding:5px 12px; border-radius:100px; background:var(--tone-tint, var(--teal-tint)); color:var(--teal-deep); white-space:nowrap;}
.qp-tile-chip svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.qp-tile.is-done{border-color:var(--pill-learned-ink, #2E6B47); background:var(--pill-learned-bg, #DCEEE1);}
.qp-tile.is-done .qp-tile-chip{background:var(--pill-learned-ink, #2E6B47); color:#fff;}
.qp-tile.is-off{opacity:.6; filter:grayscale(.45);}
.qp-tile.is-off:hover{transform:none; border-color:var(--border-soft);}
.qp-toolsbox{margin:26px 0 0; border-top:1px solid var(--border-soft); padding-top:14px;}
.qp-toolsbox > summary{cursor:pointer; list-style:none; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;}
.qp-toolsbox > summary::-webkit-details-marker{display:none;}
.qp-toolsbox > summary::before{content:'▸'; color:var(--teal-deep); font-size:15px;}
.qp-toolsbox[open] > summary::before{content:'▾';}
.qp-toolsbox > summary .qp-h2{margin:0;}
.qp-toolsbox > summary small{font-family:var(--ui-font); font-size:13px; color:var(--ink-soft);}
.qp-toolsbox .qp-grid{margin-top:14px;}
.qp-later .qp-tiles{margin-top:14px;}
@media (max-width:600px){
  .qp-hero-compact h1{font-size:24px;}
  .qp-board-bar{width:100px;}
  .qp-board-head{padding:12px;}
  .qp-tiles{grid-template-columns:1fr;}
  .qp-tile-chip{padding:5px 10px;}
}
.qp-board-today .qp-btn{margin-left:auto; white-space:nowrap;}
.qp-board-today .qp-btn svg{width:16px; height:16px; flex:none; fill:currentColor;}
.qp-tile .qp-tile-t{color:var(--ink);}
.qp-tile .qp-tile-t small{color:var(--ink-soft);}
@media (max-width:600px){ .qp-board-today .qp-btn{margin-left:0; width:100%; justify-content:center;} }

/* a programme's own study tools, open under the board (the GCSE siblings, 25 Oct 2026) */
.qp-group-tools{margin-top:24px;}

/* the board's small previews (Round 4, 26 Oct 2026; play/core.js SHOTS): the picture on the left with the letter medal
   as its badge, the title sharing its row with the Play / Done chip, the hint and the meta line under both. The picture
   never covers the chip; a locked tile puts its longer chip ("Opens in week 14") under the text instead. */
@media (min-width:601px){ .qp-tiles{grid-template-columns:repeat(auto-fill, minmax(min(100%, 340px), 1fr));} }
.qp-tile.has-shot{display:grid; grid-template-columns:128px minmax(0, 1fr) auto; grid-template-areas:"shot t chip" "shot d d" "shot m m"; grid-template-rows:auto auto 1fr; align-items:start; gap:2px 12px;}
.qp-tile.has-shot.is-off{grid-template-columns:128px minmax(0, 1fr); grid-template-areas:"shot t" "shot d" "shot m" "shot chip"; grid-template-rows:auto auto auto 1fr;}
.qp-tile.has-shot .qp-tile-b{display:contents;}
.qp-tile.has-shot .qp-tile-t{grid-area:t; align-self:center;}
.qp-tile.has-shot .qp-tile-d{grid-area:d;}
.qp-tile.has-shot .qp-tile-meta{grid-area:m;}
.qp-tile.has-shot .qp-tile-chip{grid-area:chip; align-self:start;}
.qp-tile.has-shot.is-off .qp-tile-chip{justify-self:start; margin-top:4px;}
.qp-tile-shot{grid-area:shot; align-self:center; position:relative; display:block; width:128px; border-radius:9px; overflow:hidden; border:1px solid var(--border-soft); background:var(--bg);}
.qp-tile-shot img{display:block; width:100%; height:auto; aspect-ratio:300 / 190;}
.qp-tile-shot .qp-tile-medal{position:absolute; left:4px; bottom:4px; width:24px; height:24px; font-size:14px; box-shadow:0 0 0 2px var(--bg-panel);}
.qp-tile-takes{color:var(--ink-soft); font-weight:600;}
/* phones: the picture full width above the text (a 92px thumbnail was unreadable), its top part shown */
@media (max-width:600px){
  .qp-tile.has-shot{grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"shot shot" "t chip" "d d" "m m"; grid-template-rows:auto auto auto 1fr; row-gap:3px;}
  .qp-tile.has-shot.is-off{grid-template-columns:minmax(0, 1fr); grid-template-areas:"shot" "t" "d" "m" "chip"; grid-template-rows:auto auto auto auto 1fr;}
  .qp-tile-shot{width:100%; margin-bottom:6px;}
  .qp-tile-shot img{height:110px; aspect-ratio:auto; object-fit:cover; object-position:top;}
}