/* ===== Noor Quest design system: "Mosaic Night Garden" ===== */
@font-face{font-family:"Baloo 2";font-weight:600;font-display:swap;src:url(../../assets/fonts/baloo-2-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Baloo 2";font-weight:800;font-display:swap;src:url(../../assets/fonts/baloo-2-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:400;font-display:swap;src:url(../../assets/fonts/nunito-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:700;font-display:swap;src:url(../../assets/fonts/nunito-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Nunito";font-weight:800;font-display:swap;src:url(../../assets/fonts/nunito-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Amiri";font-weight:400;font-display:swap;src:url(../../assets/fonts/amiri-arabic-400-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:"Amiri";font-weight:700;font-display:swap;src:url(../../assets/fonts/amiri-arabic-700-normal.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --ink:#1d1650; --ink-soft:#4a4180;
  --indigo-950:#120e35; --indigo-900:#1a1450; --indigo-800:#241b63; --indigo-700:#3a2c8f; --indigo-500:#5b46c9; --indigo-300:#9c8cf0;
  --teal:#28c7b7; --teal-d:#0f9d94; --teal-dd:#0b7a76;
  --gold:#f6b93b; --gold-d:#d9962b; --gold-dd:#b8741a; --gold-l:#ffe08a;
  --coral:#ff6b57; --coral-d:#e5483a; --coral-dd:#b83024;
  --leaf:#33a95f; --leaf-d:#1b7a45; --leaf-l:#7fd68b;
  --cream:#fff7e6; --cream-d:#f1e2bd; --white:#fff;
  --font-display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ar:"Amiri","Noto Naskh Arabic","Geeza Pro","Traditional Arabic",serif;
  --r:18px; --r-sm:12px; --r-lg:26px;
  --shadow:0 6px 0 rgba(10,6,40,.35);
  --shadow-lg:0 14px 40px rgba(6,3,30,.5);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); --sal:env(safe-area-inset-left,0px); --sar:env(safe-area-inset-right,0px);
  --ease-bounce:cubic-bezier(.34,1.56,.64,1);
  font-size:16px;
}
html[data-text="large"]{font-size:19px}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--indigo-950);color:var(--cream);font-family:var(--font-body);overscroll-behavior:none}
body{overflow:hidden;-webkit-font-smoothing:antialiased;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#app{position:fixed;inset:0;overflow:hidden;
  background:
   radial-gradient(1200px 700px at 50% -10%,#3a2c8f55,transparent 70%),
   var(--indigo-950)}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:800;line-height:1.05;margin:0;letter-spacing:.2px}
p{margin:0;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:not-allowed}
img,svg{display:block}
.ar{font-family:var(--font-ar);direction:rtl;font-weight:700;line-height:1.5}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hidden{display:none!important}
:focus{outline:none}
:focus-visible{outline:4px solid var(--gold-l);outline-offset:3px;border-radius:12px}

/* subtle geometric tessellation used on dark surfaces */
.tess{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'><g fill='none' stroke='%239c8cf0' stroke-opacity='.10' stroke-width='1.5'><path d='M42 6l9 15 17-4-4 17 15 9-15 9 4 17-17-4-9 15-9-15-17 4 4-17-15-9 15-9-4-17 17 4z'/><circle cx='42' cy='42' r='8'/></g></svg>");background-size:84px 84px}

/* ===== Buttons: chunky "game" buttons ===== */
a.btn,a.icon-btn{text-decoration:none}
.btn{--c:var(--gold);--cd:var(--gold-dd);--fg:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:54px;padding:.45em 1.4em;
  font-family:var(--font-display);font-weight:800;font-size:1.2rem;letter-spacing:.3px;color:var(--fg);
  background:var(--c);border-radius:var(--r);border:3px solid var(--ink);box-shadow:0 6px 0 var(--ink),inset 0 -5px 0 var(--cd);
  transition:transform .08s,box-shadow .08s,filter .15s;position:relative;text-align:center;-webkit-user-select:none;user-select:none}
.btn:hover:not(:disabled){filter:brightness(1.08)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 2px 0 var(--ink),inset 0 -3px 0 var(--cd)}
.btn.teal{--c:var(--teal);--cd:var(--teal-d)}
.btn.coral{--c:#c43628;--cd:#9d2a1f;--fg:#fff}
.btn.indigo{--c:var(--indigo-500);--cd:var(--indigo-700);--fg:#fff}
.btn.leaf{--c:var(--leaf-d);--cd:#125c33;--fg:#fff}
.btn.cream{--c:var(--cream);--cd:var(--cream-d)}
.btn.ghost{--c:rgba(255,255,255,.08);--cd:rgba(255,255,255,.04);--fg:var(--cream);border-color:rgba(255,255,255,.35);box-shadow:0 5px 0 rgba(0,0,0,.35)}
.btn.sm{min-height:46px;font-size:1rem;padding:.3em 1em;border-radius:14px}
.btn.lg{min-height:64px;font-size:1.5rem;padding:.4em 2em;border-radius:22px}
.btn.block{display:flex;width:100%}
.btn:disabled{filter:grayscale(.7) brightness(.8);opacity:.7;transform:none}
.btn .ui-ico{flex:none}
.icon-btn{width:50px;height:50px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.1);border:2px solid rgba(255,255,255,.25);color:var(--cream);transition:background .15s,transform .08s;flex:none}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn:active{transform:scale(.92)}
.icon-btn[aria-pressed="true"]{background:var(--gold);color:var(--ink);border-color:var(--ink)}

/* ===== Surfaces ===== */
.panel{background:linear-gradient(180deg,var(--indigo-800),var(--indigo-900));border:3px solid var(--indigo-500);border-radius:var(--r-lg);padding:1rem 1.1rem;box-shadow:var(--shadow)}
.paper{background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:1rem 1.1rem}
.chip{display:inline-flex;align-items:center;gap:.4em;padding:.25em .75em;border-radius:99px;background:rgba(255,255,255,.12);font-weight:800;font-size:.85rem}
.chip.gold{background:var(--gold);color:var(--ink)}
.muted{opacity:.75}
.stars{display:inline-flex;gap:2px;align-items:center}
.star.on{filter:drop-shadow(0 2px 0 rgba(0,0,0,.25))}
.bar{height:14px;border-radius:99px;background:rgba(0,0,0,.35);border:2px solid rgba(255,255,255,.18);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--gold));transition:width .7s var(--ease-bounce)}

/* ===== Screen scaffolding ===== */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;
  padding-left:var(--sal);padding-right:var(--sar)}
.screen.enter{animation:screenIn .38s ease both}
.screen.leave{animation:screenOut .2s ease both;pointer-events:none}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes screenOut{to{opacity:0;transform:scale(.99)}}
.scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.wrap{width:min(100%,980px);margin-inline:auto;padding:1rem 1rem calc(1rem + var(--sab))}
.topbar{display:flex;align-items:center;gap:.75rem;padding:calc(.6rem + var(--sat)) .9rem .6rem;flex:none}
.topbar h1{font-size:1.5rem;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.backdrop{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.screen>.above{position:relative;z-index:1}
.veil{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(18,14,53,.55),rgba(18,14,53,.8));pointer-events:none}

/* ===== Dock (bottom navigation) ===== */
.dock{flex:none;display:flex;justify-content:center;gap:.25rem;padding:.4rem .6rem calc(.4rem + var(--sab));background:rgba(18,14,53,.92);border-top:3px solid var(--indigo-700);position:relative;z-index:5}
.dock a{flex:1;max-width:150px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.35rem .25rem;border-radius:14px;color:var(--indigo-300);text-decoration:none;font-weight:800;font-size:.75rem;min-height:56px;justify-content:center;transition:color .15s,background .15s,transform .1s}
.dock a[aria-current="page"]{color:var(--gold);background:rgba(246,185,59,.12)}
.dock a:active{transform:scale(.94)}
.dock a .badge{position:absolute;margin:-18px -26px 0 0;min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:#fff;font-size:.65rem;display:grid;place-items:center;padding:0 4px;border:2px solid var(--indigo-950)}

/* ===== Modal / sheet ===== */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,5,30,.72);animation:fadeIn .2s ease both}
.overlay.center{align-items:center}
.sheet{width:min(100%,560px);max-height:92%;overflow:auto;background:var(--cream);color:var(--ink);border:4px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;padding:1.25rem 1.25rem calc(1.25rem + var(--sab));animation:sheetUp .32s var(--ease-bounce) both;position:relative}
.overlay.center .sheet{border-bottom:4px solid var(--ink);border-radius:28px;max-width:520px;margin:1rem}
@keyframes sheetUp{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet h2{font-size:1.7rem}
.sheet .actions{display:flex;gap:.75rem;margin-top:1rem;flex-wrap:wrap}
.sheet .actions .btn{flex:1;min-width:130px}

/* ===== Toasts ===== */
#toasts{position:fixed;left:0;right:0;top:calc(.5rem + var(--sat));z-index:80;display:flex;flex-direction:column;align-items:center;gap:.5rem;pointer-events:none}
.toast{pointer-events:none;display:flex;align-items:center;gap:.7rem;max-width:min(92vw,440px);background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:18px;padding:.5rem .9rem .5rem .5rem;box-shadow:var(--shadow);animation:toastIn .45s var(--ease-bounce) both}
.toast.out{animation:toastOut .3s ease both}
.toast .t-ico{width:48px;height:48px;flex:none;border-radius:14px;background:var(--gold-l);display:grid;place-items:center}
.toast b{font-family:var(--font-display);font-size:1.05rem;display:block;line-height:1.1}
.toast small{font-weight:700;opacity:.75}
@keyframes toastIn{from{transform:translateY(-30px) scale(.85);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(-20px);opacity:0}}

/* ===== Noor speech bubble ===== */
.noor{display:flex;align-items:flex-end;gap:.6rem}
.noor .bubble{position:relative;background:var(--cream);color:var(--ink);border:3px solid var(--ink);border-radius:20px 20px 20px 6px;padding:.65rem .9rem;font-weight:700;font-size:1rem;line-height:1.35;box-shadow:var(--shadow);max-width:36ch}
.noor svg.mascot-svg{flex:none}

/* ===== Reduced motion & other accessibility modes ===== */
html[data-motion="reduced"] *,html[data-motion="reduced"] *::before,html[data-motion="reduced"] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
html[data-motion="reduced"] .anim-sway,html[data-motion="reduced"] .anim-float,html[data-motion="reduced"] .anim-drift,html[data-motion="reduced"] .anim-flap,html[data-motion="reduced"] .anim-twinkle,html[data-motion="reduced"] .anim-pulse{animation:none!important}
.anim-sway{animation:sway 4s ease-in-out infinite;transform-origin:50% 100%}
.anim-float{animation:float 3.6s ease-in-out infinite}
.anim-drift{animation:drift 22s ease-in-out infinite alternate}
.anim-flap{animation:flap .9s ease-in-out infinite}
.anim-twinkle{animation:twinkle 2.6s ease-in-out infinite}
.anim-pulse{animation:pulse 2.8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.2deg)}}
@keyframes float{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@keyframes drift{from{transform:translateX(-18px)}to{transform:translateX(22px)}}
@keyframes flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.78)}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.08)}}
@keyframes pulse{0%,100%{opacity:.75;transform:scale(.96)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-contrast:more){:root{--ink:#000}.btn.ghost{border-color:#fff}}
noscript p{padding:2rem;font-size:1.2rem}