:root{
  --bg:#fbf9f4; --fg:#1c1a17; --mut:#6b665e; --line:#e6e0d4; --card:#fff;
  --acc:#0f6b52; --acc2:#c2831a; --ar:#12312a; --chip:#f1ede2;
  --i1:#e0a42e; --i2:#3f7d8c; --i3:#5b6bbf; --i4:#4d8a63; --i5:#b8862b; --i6:#7a5c8f;
  --rad:14px; --maxw:56rem;
  --hdr:56px;   /* fixed header height */
  --tab:0px;    /* bottom tab bar height — 0 on desktop, set at the breakpoint */
  --hdrw:64rem; /* header content band. Slightly wider than the 56rem text
                   column — the nav needs ~356px per side and an exact match
                   would squeeze it — but close enough to read as one page. */
}
:root[data-theme=dark]{
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --ar:#dff3ec; --chip:#231f1b;
}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#12100e; --fg:#eceae5; --mut:#a19b90; --line:#2b2723; --card:#1a1714;
  --acc:#4fd1a5; --acc2:#e2b455; --ar:#dff3ec; --chip:#231f1b;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:'Noto Serif Bengali',system-ui,'Nirmala UI','Kalpurush',sans-serif;
  font-size:17.5px;line-height:1.85;text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:color-mix(in srgb,var(--acc) 20%,transparent);
  /* clear the fixed header and (on phones) the fixed tab bar */
  padding-top:calc(var(--hdr) + env(safe-area-inset-top));
  padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
main{max-width:var(--maxw);margin:0 auto;
  padding:1rem max(1.1rem,env(safe-area-inset-left)) 4rem max(1.1rem,env(safe-area-inset-right))}
/* any in-page anchor must clear the fixed header when jumped to */
[id]{scroll-margin-top:calc(var(--hdr) + env(safe-area-inset-top) + .7rem)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:var(--acc);color:#fff;padding:.5rem 1rem;border-radius:8px;z-index:99}
a{color:var(--acc);text-decoration-thickness:.08em;text-underline-offset:.18em}
a:hover{text-decoration-thickness:.14em}
h1,h2,h3,h4,h5{line-height:1.4;font-weight:700}
h1{font-size:1.85rem;margin:.2em 0 .5em}
h2{font-size:1.3rem;margin:2.2em 0 .6em;padding-bottom:.3em;border-bottom:2px solid var(--line)}
h3{font-size:1.1rem;margin:1.6em 0 .4em}
h4{font-size:1.02rem;margin:1.8em 0 .5em}
h5{font-size:.97rem;margin:1.4em 0 .4em;color:var(--mut)}
p{margin:.75em 0}
.muted{color:var(--mut);font-size:.9em}
hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* ---- Arabic ---- */
.ar{font-family:'Amiri Quran','Scheherazade New','Traditional Arabic',serif;
  direction:rtl;unicode-bidi:isolate;color:var(--ar);font-size:1.28em;line-height:2.1}
.ar.lk{text-decoration:none;border-bottom:1px dotted var(--acc);padding-bottom:1px}
.ar.lk:hover{background:var(--chip);border-radius:4px}
.ar.big{font-size:1.7em;display:block;text-align:right;margin:.3em 0}
.ar.huge{font-size:3rem;text-align:center;line-height:1.8}
.ar.quran{font-size:2rem;text-align:center;line-height:2.35;margin:.6em 0;
  padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.ar-mix{direction:ltr}

/* ---- chrome: fixed header, and a bottom tab bar on phones ----------------
   --hdr / --tab are the single source of truth for how much space the fixed
   chrome occupies. Body padding, anchor scroll-margin and the sticky filter
   are all derived from them, so changing a height here fixes every page. */
/* 3-column grid, not flex: the side columns are equal 1fr so the brand in the
   middle stays optically centred no matter how wide the nav gets. */
.top{position:fixed;inset-inline:0;top:0;z-index:30;
  display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;
  height:calc(var(--hdr) + env(safe-area-inset-top));
  /* the bar is full width; its CONTENTS are pulled in to a band so they sit
     near the page column instead of glued to the screen edges on a wide
     monitor (at 1440 the nav used to start 250px outside the text column) */
  padding-inline:max(.9rem,env(safe-area-inset-left),calc((100% - var(--hdrw)) / 2));
  padding-top:env(safe-area-inset-top);
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line)}
/* grid-row:1 is load-bearing. With only grid-column set, sparse auto-placement
   walks the cursor past column 2 for the brand and drops the nav and theme
   onto a second row — the header silently became two rows tall. */
.brand{grid-column:2;grid-row:1;justify-self:center;display:flex;align-items:center;gap:.4rem;min-width:0;
  height:100%;font-weight:700;text-decoration:none;color:var(--fg);white-space:nowrap}
.brand .bt{overflow:hidden;text-overflow:ellipsis}
.brand .mark{filter:saturate(1.2);flex:none}
.nav-top{grid-column:1;grid-row:1;justify-self:start;display:flex;gap:.15rem;font-size:.87rem;min-width:0;overflow:hidden}
.nav-top a{display:inline-flex;align-items:center;gap:.32rem;padding:.45rem .6rem;border-radius:9px;
  text-decoration:none;color:var(--mut);white-space:nowrap}
.nav-top a:hover,.nav-top a.on{background:var(--chip);color:var(--fg)}
.hdr-r{grid-column:3;grid-row:1;justify-self:end;display:flex;gap:.4rem}
.theme{background:none;border:1px solid var(--line);border-radius:9px;
  cursor:pointer;font-size:1rem;min-width:44px;min-height:44px;color:var(--fg)}
.theme.is-in{border-color:var(--acc);color:var(--acc)}

/* bottom tab bar — hidden on desktop, shown at the mobile breakpoint */
/* Height is exactly --tab (border included, box-sizing:border-box) so that
   body's matching padding-bottom clears it to the pixel — no overlap. */
.tabbar{display:none;position:fixed;inset-inline:0;bottom:0;z-index:30;
  height:calc(var(--tab) + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:saturate(1.5) blur(12px);-webkit-backdrop-filter:saturate(1.5) blur(12px);
  border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.12rem;
  height:100%;text-decoration:none;color:var(--mut);font-size:.68rem;line-height:1.25}
.tabbar a .ic{font-size:1.2rem;line-height:1}
.tabbar a.on{color:var(--acc);font-weight:600}
.tabbar a:active{background:var(--chip)}

.foot{max-width:var(--maxw);margin:0 auto;padding:2rem 1.1rem 3rem;border-top:1px solid var(--line);color:var(--mut);font-size:.87rem}
.foot a{display:inline-block;padding:.4rem .1rem}
.crumb{font-size:.83rem;color:var(--mut);margin:.6rem 0 1.2rem}
.crumb a{color:var(--mut);display:inline-block;padding:.35rem .1rem}


/* ---- account modal (optional cloud sync — never required to play) ---- */
/* the [hidden] rule must win over the plain-class display:flex below, or the
   browser's built-in "hidden means display:none" rule loses the cascade to
   this author rule and the modal stays visible even when JS sets .hidden --
   it would cover the entire page on every load, before anyone clicks the
   account button */
.acct-modal[hidden]{display:none}
/* align-items:flex-start (not center) + overflow-y on the modal itself is
   the load-bearing part: the profile view can get tall (demographic fields +
   password form + logout), and a centered flex item taller than the
   viewport clips off both top and bottom with no way to scroll to it --
   this keeps the top always reachable and lets the whole thing scroll. */
.acct-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;
  background:color-mix(in srgb,#000 55%,transparent);padding:1.5rem 1rem;overflow-y:auto;
  -webkit-overflow-scrolling:touch}
.acct-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:1.5rem;max-width:22rem;width:100%;position:relative;margin:0 auto}
.acct-x{position:absolute;top:.3rem;right:.3rem;background:none;border:0;font-size:1.2rem;
  cursor:pointer;color:var(--mut);width:44px;height:44px;line-height:44px;text-align:center;
  padding:0;border-radius:9px}
.acct-x:active{background:var(--chip)}
.acct-card h2{margin-top:0;border:0;padding:0;font-size:1.25rem}
.acct-card input{display:block;width:100%;font:inherit;font-size:max(1rem,16px);padding:.65rem .9rem;
  border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);margin-bottom:.6rem}
.acct-card input:focus{outline:2px solid var(--acc);outline-offset:1px}
.acct-card form .btn{width:100%;border:0;font:inherit;font-size:1rem;cursor:pointer;margin-top:.2rem}
.acct-hint{color:var(--mut);font-size:.78rem;margin:-.4rem 0 .6rem;line-height:1.5}
.acct-err{color:#c0392b;font-size:.85rem;margin:.3rem 0}
.acct-ok{color:var(--acc);font-size:.85rem;margin:.3rem 0}
.acct-card select{display:block;width:100%;font:inherit;font-size:max(1rem,16px);padding:.65rem .9rem;
  border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--fg);margin-bottom:.6rem}
.acct-label{display:block;font-size:.82rem;color:var(--mut);margin:.7rem 0 0}
.acct-label input,.acct-label select{margin-top:.3rem}
.acct-req{color:#c0392b}
#pfForm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
#pfForm .btn{margin-top:1rem}
#pwForm{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
#pwForm h3{margin:0 0 .6rem;font-size:1rem;border:0;padding:0}
#pwForm .btn{margin-top:.3rem}
#acctLogout{display:block;margin:1.5rem auto 0}
.linklike{background:none;border:0;padding:0;color:var(--acc);text-decoration:underline;cursor:pointer;font:inherit}
.acct-nudge{background:var(--chip);border:1px solid var(--line);border-radius:var(--rad);
  padding:.8rem 1rem;margin:.8rem 0;font-size:.88rem;display:flex;gap:.6rem;align-items:center;
  justify-content:space-between;flex-wrap:wrap}


/* ---- quest dashboard ---- */
.quest{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);
  padding:1.2rem 1.1rem;margin:1rem 0 1.5rem}
.q-top{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.q-ring{position:relative;flex:none;width:104px;height:104px}
.q-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.q-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.q-ring .rbg{stroke:var(--line)}
.q-ring .rfg{stroke:var(--acc);transition:stroke-dashoffset .8s cubic-bezier(.3,1,.4,1)}
/* centre it properly — the old rule faked it with line-height:2.6 on a
   baseline-aligned flex row, which sat the number 17px above the ring centre */
.q-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.08rem}
.q-num b{font-size:1.7rem;line-height:1;color:var(--acc)}
.q-num small{font-size:.8rem;line-height:1;color:var(--mut);align-self:flex-end;padding-bottom:.22rem}
.q-info{flex:1;min-width:12rem}
.q-info h1{font-size:1.5rem;margin:0}
.q-info .lead{margin:.1em 0 .4em}
.q-line{font-size:.92rem;color:var(--mut);margin:.3em 0 .8em}
.btn.big{font-size:1.05rem;padding:.75rem 1.5rem}
.qs-head{display:flex;justify-content:space-between;align-items:center;
  font-size:.82rem;color:var(--mut);margin:.3rem 0}
.q-shield,.q-shelf{margin-top:1.1rem}
.qs-row,.shelf{display:flex;gap:.4rem;flex-wrap:wrap}
.sp{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;
  border:2px dashed var(--line);border-radius:9px;color:var(--mut);font-size:.85rem}
.sp.won{border:2px solid var(--acc2);border-style:solid;color:var(--fg);
  background:color-mix(in srgb,var(--acc2) 18%,transparent)}
.gi{display:flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;
  border:1px dashed var(--line);border-radius:10px;font-size:1.3rem;filter:grayscale(1);opacity:.35}
.gi.won{border-style:solid;border-color:var(--acc);filter:none;opacity:1;
  background:color-mix(in srgb,var(--acc) 10%,transparent)}
.q-stats{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.1rem}
.q-stats div{flex:1 1 6rem;background:var(--bg);border:1px solid var(--line);
  border-radius:10px;padding:.5rem .7rem;text-align:center}
.q-stats b{display:block;font-size:1.25rem;color:var(--acc)}
.q-stats span{font-size:.72rem;color:var(--mut)}
.q-note{font-size:.8rem;color:var(--mut);margin:1rem 0 0}
.mini{font:inherit;font-size:.78rem;background:none;border:1px solid var(--line);
  border-radius:999px;padding:.5rem 1rem;min-height:40px;color:var(--mut);cursor:pointer}
.mini:hover{border-color:var(--acc);color:var(--fg)}

/* island cards — collapsible, with a journey path inside */
.isl-head{display:flex;gap:.7rem;align-items:center;width:100%;padding:0;min-height:56px;
  background:none;border:0;font:inherit;color:var(--fg);text-align:start;cursor:pointer}
.isl-badge{flex:none;width:2.8rem;height:2.8rem;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;background:var(--chip);border-radius:12px}
.isl-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:.1rem}
.isl-name{font-size:1.08rem;font-weight:700;line-height:1.35}
.isl-sub{font-size:.85rem;color:var(--mut);overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.isl-state{flex:none;font-size:1rem}
.isl-chev{flex:none;color:var(--mut);transition:transform .25s}
.isl-head[aria-expanded=true] .isl-chev{transform:rotate(180deg)}

/* progress bar: label sits OUTSIDE the bar, so no blend-mode trickery */
.isl-bar{height:.6rem;background:var(--bg);border:1px solid var(--line);
  border-radius:999px;margin:.7rem 0 .35rem;overflow:hidden}
.isl-bar i{display:block;height:100%;width:0;background:var(--acc);
  transition:width .7s cubic-bezier(.3,1,.4,1)}
.isl-meta{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;
  margin:0;font-size:.8rem;color:var(--mut)}
.isl-count{color:var(--fg)}
.isl-shield{color:var(--acc2)}
.island.cleared{border-color:var(--acc2)}
.island.current{border-color:var(--acc);box-shadow:0 0 0 2px color-mix(in srgb,var(--acc) 22%,transparent)}
.isl-body{margin-top:.9rem}

/* the path: a connector line with stops hanging off it */
.leg{margin:.9rem 0 0}
.leg-n{font-size:.74rem;color:var(--mut);margin-bottom:.25rem}
/* The dot sits IN the flow, not absolutely — an absolute dot at a negative
   offset landed on top of the title text. The connector line is drawn behind
   the dot column instead. */
.stops{position:relative}
.stops::before{content:"";position:absolute;inset-block:1.4rem;inset-inline-start:1.05rem;
  width:2px;background:var(--line);border-radius:2px}
.stop{position:relative;display:flex;align-items:center;gap:.7rem;min-height:46px;
  padding:.35rem .6rem;text-decoration:none;color:var(--fg);font-size:.88rem;line-height:1.35}
.stop .s-dot{position:relative;z-index:1;width:1.7rem;height:1.7rem;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;
  background:var(--bg);border:2px solid var(--line);border-radius:50%;color:var(--mut)}
.stop .s-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stop .s-mark{flex:none;width:1.2rem;text-align:center;color:var(--acc);font-weight:700}
.stop:hover{background:var(--chip);border-radius:9px}
.stop:hover .s-dot{border-color:var(--acc)}
.stop.flag .s-dot{border-style:dashed;font-size:.85rem}
.stop.flag .s-t{font-weight:600}

.stop.is-done .s-dot{background:var(--acc);border-color:var(--acc);color:#fff}
.stop.is-done .s-mark::after{content:"✓"}
.stop.is-done .s-t{color:var(--mut)}
.stop.is-next{background:color-mix(in srgb,var(--acc2) 12%,transparent);border-radius:9px}
.stop.is-next .s-dot{border-color:var(--acc2);color:var(--acc2);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--acc2) 22%,transparent)}
.stop.is-next .s-mark::after{content:"▶";color:var(--acc2)}
@media(prefers-reduced-motion:no-preference){
  .stop.is-next .s-dot{animation:pulse 2.2s ease-in-out infinite}
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--acc2) 22%,transparent)}
  50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--acc2) 8%,transparent)}
}
.isl-gift{display:flex;align-items:center;gap:.6rem;margin:.6rem 0;padding:.5rem .7rem;
  background:var(--bg);border:1px dashed var(--line);border-radius:10px}
.isl-gift .g-e{font-size:1.4rem;filter:grayscale(1);opacity:.4}
.isl-gift .g-t{flex:1;min-width:0;display:flex;flex-direction:column;font-size:.85rem}
.isl-gift .g-t small{color:var(--mut);font-size:.75rem}
.isl-gift.won{border-style:solid;border-color:var(--acc)}
.isl-gift.won .g-e{filter:none;opacity:1}
.isl-gift.won .g-lock{display:none}

/* class node states */

/* finish button */
.done-box{margin-top:1rem}
.done-btn.is-done{background:var(--chip);color:var(--fg);cursor:default}
.done-btn.pop{animation:pop .6s ease}
@keyframes pop{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
.done-msg{font-size:.9rem;color:var(--mut);margin:.5em 0 0}

/* ---- home: quick links + certificate ---- */
.q-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;margin-top:1.1rem}
.ql{display:flex;flex-direction:column;gap:.1rem;padding:.7rem .8rem;min-height:64px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--fg)}
.ql:hover{border-color:var(--acc);background:var(--chip)}
.ql-e{font-size:1.3rem;line-height:1}
.ql b{font-size:.92rem}
.ql small{font-size:.74rem;color:var(--mut)}
.q-cert{margin-top:1.1rem}
.cert{text-align:center;padding:1.3rem 1rem;border:2px solid var(--acc2);border-radius:var(--rad);
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc2) 12%,transparent),transparent)}
.cert .c-top{font-size:.8rem;color:var(--mut);letter-spacing:.05em;margin:0}
.cert .c-name{font-size:1.6rem;font-weight:700;color:var(--acc2);margin:.3em 0}
.cert .c-line{font-size:.95rem;margin:.4em 0 .8em}

/* ---- badge wall ---- */
.bdg-isl{margin:1.8rem 0}
.bdg-isl h2{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:1.1rem}
.bdg-isl h2 .cnt{font-size:.75rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem;white-space:nowrap}
.bdg-isl.cleared h2 .cnt{border-color:var(--acc2);color:var(--acc2)}
.bdg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.45rem}
.bdg{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:.6rem .7rem;min-height:62px;
  background:var(--bg);border:1px dashed var(--line);border-radius:11px;text-decoration:none;color:var(--mut);
  font-size:.82rem;line-height:1.35;opacity:.55}
.bdg .b-n{font-size:.7rem;font-weight:700}
.bdg .b-t{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bdg .b-lock{position:absolute;top:.4rem;inset-inline-end:.5rem;font-size:.8rem}
.bdg.won{opacity:1;color:var(--fg);border-style:solid;border-color:var(--acc2);
  background:color-mix(in srgb,var(--acc2) 10%,var(--bg))}
.bdg.won .b-n{color:var(--acc2)}
.bdg.won .b-lock{display:none}
.bdg:hover{border-color:var(--acc)}

/* ---- practice room ---- */
.pr-scope{display:flex;gap:.5rem;flex-wrap:wrap;margin:.2rem 0 .8rem;font-size:.85rem;color:var(--mut)}
.pr-scope label{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;padding:.3rem .8rem;
  border:1px solid var(--line);border-radius:999px;cursor:pointer}
.pr-scope label:hover{border-color:var(--acc)}
.pr-scope label:has(input:checked){border-color:var(--acc);background:var(--chip);color:var(--fg)}
.pr-count{font-size:.88rem;margin:.2rem 0 .6rem}

/* checkboxes and radios need a real thumb target, not a 13px default */
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--acc);flex:none}
.practice{background:var(--card);border:1px solid var(--acc2);border-radius:var(--rad);
  padding:1rem 1.1rem;margin:1.5rem 0}
.practice h2{margin:0 0 .2rem;border:0;padding:0;font-size:1.05rem}
.pr-tabs{display:flex;gap:.35rem;flex-wrap:wrap;margin:.8rem 0}
.pr-tab{font:inherit;font-size:.85rem;padding:.5rem .9rem;min-height:40px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:999px;color:var(--mut)}
.pr-tab:hover{border-color:var(--acc)}
.pr-tab.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pr-body{min-height:11rem}

/* flash cards */
.fc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.fcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:9rem;padding:1.2rem;cursor:pointer;font:inherit;color:var(--fg);
  background:var(--bg);border:2px solid var(--line);border-radius:var(--rad)}
.fcard:hover{border-color:var(--acc)}
.fcard.flipped{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 7%,var(--bg))}
.fcard .fc-bn{font-size:1.35rem;text-align:center}
.fcard .fc-hint{font-size:.72rem;color:var(--mut)}
.fcard.flipped .fc-hint{display:none}
.fc-acts{display:flex;gap:.5rem;margin-top:.7rem}
.fc-acts .btn{flex:1;text-align:center;padding:.7rem 1rem}

/* matching pairs */
.pair-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.7rem 0}
.pcol{display:grid;gap:.45rem;align-content:start}
.pbtn{font:inherit;font-size:.9rem;padding:.6rem .7rem;min-height:48px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);border-radius:10px;color:var(--fg)}
.pbtn .ar{font-size:1.25em}
.pbtn:hover:not(:disabled){border-color:var(--acc)}
.pbtn.sel{border-color:var(--acc2);background:color-mix(in srgb,var(--acc2) 15%,transparent)}
.pbtn.done{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 14%,transparent);opacity:.7;cursor:default}
.pbtn.no{border-color:#c0503f;background:color-mix(in srgb,#c0503f 12%,transparent)}
.qz-q{text-align:center;margin:.8rem 0}
.qz-n{font-size:.75rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:.1rem .55rem}
.qz-q .ar.huge{font-size:2.4rem;margin:.3em 0 .1em}
.qz-opts{display:grid;gap:.45rem}
.qz-o{font:inherit;text-align:start;padding:.75rem 1rem;min-height:48px;
  background:var(--bg);border:1px solid var(--line);border-radius:12px;color:var(--fg);cursor:pointer}
.qz-o:hover:not(:disabled){border-color:var(--acc)}
.qz-o:disabled{cursor:default;opacity:.75}
.qz-o.ok{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);opacity:1}
.qz-o.no{border-color:#c0503f;background:color-mix(in srgb,#c0503f 12%,transparent)}
.qz-fb{margin:.6rem 0 0;font-size:.9rem}
.qz-fb.ok{color:var(--acc)}
.qz-fb.no{color:var(--acc2)}
.qz-end{text-align:center}

/* ---- home ---- */
.hero{text-align:center;padding:1.5rem 0 1rem}
.hero h1{font-size:2.3rem;margin-bottom:.1em}
.lead{font-size:1.08rem;color:var(--mut)}
.intro{max-width:40rem;margin:1.2rem auto;text-align:right;text-align:start}
.stat-row{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.stat-row div{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.6rem 1rem;min-width:5rem}
.stat-row b{display:block;font-size:1.4rem;color:var(--acc)}
.stat-row span{font-size:.8rem;color:var(--mut)}
.cta{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
.btn{display:inline-block;background:var(--acc);color:#fff;padding:.6rem 1.3rem;border-radius:999px;
  text-decoration:none;font-weight:600}
.btn.ghost{background:var(--chip);color:var(--fg)}
.map{margin-top:2rem}
.island{margin:2rem 0;padding:1.1rem;border:1px solid var(--line);border-radius:var(--rad);background:var(--card)}
.island h2{margin-top:0;border:0;padding:0}
.island .shield{font-size:.85rem;color:var(--acc2);margin:.2rem 0 0}

/* ---- class ---- */
.class-head{margin-bottom:1.5rem}
.eyebrow{font-size:.82rem;color:var(--mut);margin:0}
.class-head h1{margin:.1em 0}
.cnum{display:block;font-size:.8rem;color:var(--acc);font-weight:600;letter-spacing:.04em}
.story p{margin:.9em 0}
.dream{position:relative;border-top:1px dashed var(--line);margin:2.2em 0}
.dream::after{content:"⋆ ⋆ ⋆";position:absolute;top:-.85em;left:50%;transform:translateX(-50%);
  background:var(--bg);padding:0 .8rem;color:var(--mut);font-size:.8rem;letter-spacing:.3em}
blockquote{margin:1.2em 0;padding:.6em 1em;border-inline-start:3px solid var(--acc2);
  background:var(--chip);border-radius:0 var(--rad) var(--rad) 0}
.big-note{text-align:center;color:var(--acc2)}
ul.check{list-style:none;padding-inline-start:0}
ul.check li::before{content:"☐ ";color:var(--mut)}
.formula{margin:1em 0;padding:.8em 1em;background:var(--chip);border-radius:var(--rad);border:1px dashed var(--line)}
.formula .lbl{display:block;font-size:.78rem;color:var(--mut);margin-bottom:.2em}
.tryit,.punch,.why{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.8em 1em}
.src{font-size:.8rem;color:var(--mut)}
.badge{margin-top:1rem;padding:.9em 1.1em;background:linear-gradient(180deg,var(--chip),transparent);
  border:1px solid var(--acc2);border-radius:var(--rad);font-weight:600;white-space:pre-line}
.ayah{margin:2rem 0;padding-top:.5rem}
.akey{float:inline-end;font-size:.72rem;color:var(--mut);font-weight:400}
.ayah-meta{background:var(--chip);border-radius:var(--rad);padding:.7em 1em;margin:.6em 0}
.ayah-meta p{margin:.3em 0;font-size:.95em}

/* ---- Audio Player & Controls ---- */
.play-btn{background:none;border:none;padding:.2rem .45rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.35rem;border-radius:8px;
  font-size:.92rem;color:var(--acc);vertical-align:middle;transition:all .15s ease}
.play-btn:hover{background:var(--chip);transform:scale(1.06)}
.play-btn:active{transform:scale(.95)}
.play-btn.playing{color:var(--acc2);animation:audioPulse 1s infinite alternate}
@keyframes audioPulse{from{transform:scale(1)}to{transform:scale(1.15);filter:drop-shadow(0 0 4px var(--acc2))}}
.ar-term{display:inline-flex;align-items:center;vertical-align:baseline;white-space:nowrap;margin:0 .12rem}
.word-play-inline{font-size:.8rem;padding:0 .18rem;opacity:.7;line-height:1;margin-inline-start:.15rem;border-radius:4px}
.word-play-inline:hover{opacity:1;background:var(--chip);transform:scale(1.1)}
.word-play{font-size:1.05rem;padding:.15rem .35rem;opacity:.85;margin-inline-start:.3rem}
.word-play:hover{opacity:1}
.word-play-lg{font-size:1.35rem;padding:.35rem .65rem;background:var(--chip);border-radius:12px;margin-inline-start:.5rem}
.ayah-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin:1.8em 0 .5em}
.ayah-head h4{margin:0}
.ayah-play{background:color-mix(in srgb,var(--acc) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 25%,transparent);
  color:var(--acc);font-weight:600;font-size:.82rem;padding:.3rem .75rem;border-radius:20px}
.ayah-play:hover{background:var(--acc);color:#fff}
.audio-panel{margin:1.1rem 0 1.5rem;padding:.9rem 1.2rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);box-shadow:0 2px 6px rgba(0,0,0,.02)}
.audio-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  margin-bottom:.75rem;flex-wrap:wrap}
.audio-panel-title{font-weight:700;font-size:.9rem;color:var(--fg)}
.audio-durability-tag{font-size:.74rem;padding:.18rem .5rem;background:color-mix(in srgb,var(--acc2) 15%,transparent);
  color:var(--acc2);border-radius:12px;font-weight:600;display:inline-flex;align-items:center}
.audio-btn-group{display:flex;gap:.55rem;flex-wrap:wrap;align-items:center}
.audio-drive-btn{background:color-mix(in srgb,var(--acc) 16%,transparent);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  color:var(--acc);font-size:.84rem;font-weight:700;padding:.45rem .95rem;border-radius:9px;cursor:pointer;transition:all .2s ease}
.audio-drive-btn:hover{background:var(--acc);color:#fff}
.audio-drive-btn.is-saved{background:color-mix(in srgb,#059669 16%,transparent);color:#059669;border-color:#059669}
.audio-save-btn{background:var(--chip);border:1px solid var(--line);color:var(--fg);
  font-size:.84rem;font-weight:600;padding:.45rem .9rem;border-radius:9px;cursor:pointer;transition:all .2s ease}
.audio-save-btn:hover{background:var(--line);border-color:var(--mut)}
.audio-save-btn.is-saved{background:color-mix(in srgb,var(--acc) 15%,transparent);color:var(--acc);border-color:var(--acc)}
.audio-zip-btn{background:color-mix(in srgb,var(--acc2) 12%,transparent);border:1px solid color-mix(in srgb,var(--acc2) 30%,transparent);
  color:var(--acc2);font-size:.84rem;font-weight:600;padding:.45rem .9rem;border-radius:9px;cursor:pointer;transition:all .2s ease}
.audio-zip-btn:hover{background:var(--acc2);color:#fff}
.audio-del-btn{background:none;border:1px solid color-mix(in srgb,#e11d48 30%,transparent);color:#e11d48;
  font-size:.8rem;font-weight:600;padding:.42rem .75rem;border-radius:9px;cursor:pointer;transition:all .2s ease}
.audio-del-btn:hover{background:#e11d48;color:#fff}
.audio-status{margin-top:.65rem;font-size:.83rem;color:var(--mut);line-height:1.45}
.audio-status strong{color:var(--fg)}

/* ---- Interactive Storyteller & Auto-Scroll Styles ---- */
.story-interactive{position:relative}
.story-head-bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.story-head-bar h2{margin:0}
.story-audio-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.story-play-btn{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;
  font-weight:700;font-size:.88rem;padding:.48rem 1rem;border-radius:24px;border:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;box-shadow:0 3px 10px rgba(0,0,0,.12);
  transition:all .2s ease}
.story-play-btn:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.18)}
.story-play-btn.playing{background:#e11d48;animation:storyPulse 1.5s infinite}
@keyframes storyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03);box-shadow:0 0 14px rgba(225,29,72,.4)}}
.story-speed-ctrl{display:inline-flex;background:var(--chip);border:1px solid var(--line);border-radius:18px;padding:2px}
.sp-btn{background:none;border:none;padding:.2rem .5rem;font-size:.75rem;font-weight:600;
  color:var(--mut);border-radius:14px;cursor:pointer;transition:all .15s ease}
.sp-btn.on{background:var(--card);color:var(--acc);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.story-listening-status{background:color-mix(in srgb,var(--acc2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--acc2) 28%,transparent);border-radius:10px;
  padding:.45rem .8rem;font-size:.82rem;color:var(--fg);display:flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.pulse-dot{width:8px;height:8px;background:var(--acc2);border-radius:50%;animation:dotPulse 1s infinite alternate}
@keyframes dotPulse{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.3)}}
.story-body{position:relative}
.story-seg{padding:.65rem .9rem;margin:.5rem 0;border-radius:12px;border:1px solid transparent;
  transition:all .25s ease;cursor:pointer;position:relative;line-height:1.7}
.story-seg:hover{background:var(--chip);border-color:var(--line)}
.story-seg.active-story-seg{background:color-mix(in srgb,var(--acc2) 18%,var(--card));
  border:1px solid var(--acc2);box-shadow:0 4px 16px rgba(0,0,0,.06);transform:scale(1.015);
  transition:all .2s cubic-bezier(.2,.8,.2,1)}
.seg-speaker-tag{display:inline-block;font-size:.72rem;font-weight:700;padding:.12rem .5rem;
  border-radius:10px;margin-inline-end:.5rem;vertical-align:middle;text-transform:uppercase;letter-spacing:.02em}
.narrator-tag{background:color-mix(in srgb,var(--mut) 15%,transparent);color:var(--mut)}
.mahdi-tag{background:color-mix(in srgb,#3b82f6 18%,transparent);color:#2563eb}
.tasmiya-tag{background:color-mix(in srgb,#ec4899 18%,transparent);color:#db2777}
.dada-tag{background:color-mix(in srgb,#059669 18%,transparent);color:#059669}
.nana-tag{background:color-mix(in srgb,#d97706 18%,transparent);color:#d97706}
.nani-tag{background:color-mix(in srgb,#8b5cf6 18%,transparent);color:#7c3aed}
.ammu-tag{background:color-mix(in srgb,#14b8a6 18%,transparent);color:#0d9488}
.abbu-tag{background:color-mix(in srgb,#6366f1 18%,transparent);color:#4f46e5}
.waswasa-tag{background:color-mix(in srgb,#64748b 25%,transparent);color:#475569;font-style:italic}
.active-story-seg .seg-speaker-tag{animation:tagGlow 1.2s infinite alternate}
@keyframes tagGlow{from{filter:brightness(1)}to{filter:brightness(1.25)}}

/* ---- tables ---- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  margin:.8em 0;border:1px solid var(--line);border-radius:var(--rad)}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card)}
th,td{padding:.55em .7em;text-align:start;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--chip);font-size:.8rem;color:var(--mut);font-weight:600;white-space:nowrap}
tr:last-child td{border-bottom:0}
.c-ar{text-align:center;min-width:5.5rem}
.c-pr{white-space:nowrap}
.c-en{color:var(--mut);font-size:.87em}
.c-hk{font-size:.87em;min-width:13rem}
.c-num{text-align:center;white-space:nowrap}

/* ---- ladder ---- */
.ladder{margin:1.2rem 0;padding:1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.ladder h5{margin-top:0}
.note{font-size:.88rem;color:var(--mut)}
.drill{display:flex;gap:.4rem;flex-wrap:wrap;margin:.6rem 0}
.drill button{font:inherit;font-size:.83rem;padding:.3rem .8rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.drill button:hover{border-color:var(--acc)}
.drill button[aria-pressed=true]{background:var(--acc);color:#fff;border-color:var(--acc)}
.steps{list-style:none;padding:0;margin:.8rem 0 0;counter-reset:s}
.step{padding:.7rem 0;border-top:1px dashed var(--line)}
.step-n{font-size:.78rem;color:var(--acc);font-weight:700}
.pron{font-size:.92rem}
.mean{font-size:.92rem;color:var(--mut)}
.tick{display:flex;align-items:center;gap:.5rem;min-height:46px;font-size:.82rem;color:var(--mut);
  margin-top:.3rem;cursor:pointer}
.src a{display:inline-flex;align-items:center;min-height:40px}
.hidden-txt{filter:blur(6px);opacity:.45;transition:.15s;cursor:pointer}
.hidden-txt:hover{filter:none;opacity:1}
.two-way{margin-top:1rem;font-size:.88rem;color:var(--mut)}
.two-way ol{margin:.4em 0}

/* ---- links panel / chips ---- */
.links{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1rem;margin-top:2.5rem}
.links h2{margin-top:0;border:0;padding:0;font-size:1.05rem}
.links h3{font-size:.85rem;color:var(--mut);text-transform:none;margin:1rem 0 .4rem}
.chips{display:flex;flex-wrap:wrap;gap:.35rem}
.chip{display:inline-flex;gap:.4rem;align-items:center;padding:.28rem .7rem;border-radius:999px;
  background:var(--chip);border:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:.84rem}
.chip:hover{border-color:var(--acc)}
.chip .ar{font-size:1.1em}
.chip .gl{color:var(--mut);font-size:.9em}
a.xref{white-space:nowrap}

/* ---- pager ---- */
.pager{display:flex;justify-content:space-between;gap:.6rem;margin:2.5rem 0 0}
.pager a{flex:1;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--rad);
  text-decoration:none;background:var(--card);font-weight:600;font-size:.9rem}
.pager a:hover{border-color:var(--acc)}
.pager .next{text-align:end}
.pager a span{display:block;font-weight:400;font-size:.8rem;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- word page ---- */
.word-head{text-align:center;padding:1rem 0 .5rem}
.gloss{font-size:1.1rem;margin:.2em 0}
.forms{font-size:.9rem;color:var(--mut)}
.hook{background:var(--chip);border-radius:var(--rad);padding:.8em 1em}
.hook h2{margin:0 0 .3em;border:0;padding:0;font-size:.95rem}
.stats{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}
.stats div{flex:1;min-width:8rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--rad);padding:.6rem .8rem}
.stats .k{display:block;font-size:.76rem;color:var(--mut)}
.stats .v{font-weight:700}
.stats .v a{display:inline-flex;align-items:center;min-height:40px}
/* ---- duas ---- */
.dgroup{margin:2.2rem 0}
.dgroup h2 .cnt{font-size:.75rem;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:.1rem .5rem;vertical-align:middle}
.dua{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:1rem 1.1rem;margin:1rem 0}
.dua h3{margin:0 0 .5rem;font-size:1rem;color:var(--acc)}
.dua .ar.quran{margin:.2em 0;font-size:1.75rem}
.dua .pron{font-size:.95rem;margin:.5em 0 .2em}
.dua .mean{margin:.2em 0 .6em}
.dua .already{font-size:.88rem;color:var(--acc);margin:.4em 0}
.dua .dnote{font-size:.86rem;color:var(--mut);background:var(--chip);border-radius:10px;padding:.6em .8em;margin:.6em 0}
.dwords{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.dw{display:inline-flex;flex-direction:column;align-items:center;gap:.1rem;min-height:44px;
  padding:.3rem .6rem;border:1px solid var(--line);border-radius:10px;background:var(--bg);
  text-decoration:none;color:var(--fg)}
a.dw:hover{border-color:var(--acc);background:var(--chip)}
.dw.seen{border-color:color-mix(in srgb,var(--acc) 45%,var(--line));
  background:color-mix(in srgb,var(--acc) 8%,var(--bg))}
.dw .ar{font-size:1.25em}
.dw .gl{font-size:.72rem;color:var(--mut)}

.en-line{margin:.35em 0;font-size:1rem}
.en-line .lbl{display:inline-block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--mut);border:1px solid var(--line);border-radius:6px;padding:.05rem .4rem;margin-inline-end:.45rem}
.en-line .en{color:var(--fg)}
.en-line .sep{color:var(--mut);margin:0 .4rem}
.sm{font-size:.85em}
.memo{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:.9rem 1.1rem;margin:1.2rem 0}
.memo h2{margin:0 0 .4rem;border:0;padding:0;font-size:1rem}
.memo ul{margin:0;padding-inline-start:1.1rem}
.memo li{margin:.4em 0}
.warn{background:color-mix(in srgb,var(--acc2) 10%,var(--card));border:1px solid var(--acc2);
  border-radius:var(--rad);padding:.9rem 1.1rem;margin:1.2rem 0}
.warn h2{margin:0 0 .2rem;border:0;padding:0;font-size:1rem}
.chunk-list{list-style:none;padding:0;margin:.6rem 0}
.chunk-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.chunk-list .ar{font-size:1.35em}
.chunk-list .gl{color:var(--mut);font-size:.88rem}
.vrefs{display:flex;flex-wrap:wrap;gap:.25rem;min-width:0}
.vref{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;min-height:2.6rem;
  padding:0 .4rem;border:1px solid var(--line);border-radius:8px;background:var(--bg);
  text-decoration:none;font-size:.85rem}
.vref:hover{border-color:var(--acc);background:var(--chip)}
table.refs td{vertical-align:top}
tr.incomplete td:first-child{color:var(--acc2)}
.ayah-list,.prose-list{list-style:none;padding:0}
.ayah-list li{border-bottom:1px solid var(--line);padding:.6rem 0}
.ayah-list a{text-decoration:none;display:block}
.ayah-list .src{display:block;font-size:.8rem;color:var(--mut)}
.prose-list li{border-bottom:1px solid var(--line);padding:.55rem 0;font-size:.9rem}
.tag{display:inline-block;font-size:.72rem;background:var(--chip);border-radius:6px;padding:.05rem .45rem;margin:0 .35rem;color:var(--mut)}
.snip{color:var(--mut)}

/* ---- index / search ---- */
.page-head{margin-bottom:1rem}
/* 16px minimum, or iOS Safari zooms the whole page on focus.
   Sticky so the box stays reachable while scrolling 1315 word rows; the
   box-shadow paints a solid slab of --bg over the gap under the header. */
.filter{width:100%;font:inherit;font-size:max(1rem,16px);padding:.7rem 1rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--fg);margin:.6rem 0;
  position:sticky;top:calc(var(--hdr) + env(safe-area-inset-top) + .6rem);z-index:12;
  box-shadow:0 0 0 .6rem var(--bg)}
.filter.big{font-size:max(1.15rem,16px);padding:.85rem 1.2rem}
.filter:focus{outline:2px solid var(--acc);outline-offset:1px}
table.index td{padding:.4em .6em}
.results{margin-top:1rem}
.hit{display:block;padding:.7rem .9rem;margin-bottom:.5rem;background:var(--card);
  border:1px solid var(--line);border-radius:var(--rad);text-decoration:none;color:var(--fg)}
.hit:hover{border-color:var(--acc)}
.hit .h1{font-weight:700}
.hit .h2{font-size:.8rem;color:var(--mut)}
.hit .h3{font-size:.87rem;color:var(--mut);margin-top:.2rem}
.hit mark{background:color-mix(in srgb,var(--acc2) 35%,transparent);color:inherit;border-radius:3px}
.kind{display:inline-block;font-size:.7rem;padding:.05rem .45rem;border-radius:6px;
  background:var(--chip);color:var(--mut);margin-inline-end:.4rem}

/* ---- threads ---- */
.thread{margin:2rem 0;padding:1.1rem;background:var(--card);border:1px solid var(--line);border-radius:var(--rad)}
.thread h2{margin-top:0;border:0;padding:0;font-size:1.15rem}
.timeline{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.timeline a{display:flex;flex-direction:column;padding:.5rem .8rem;border:1px solid var(--line);
  border-radius:10px;text-decoration:none;color:var(--fg);font-size:.82rem;background:var(--bg);min-width:8rem}
.timeline a:hover{border-color:var(--acc)}
.timeline span:last-child{color:var(--mut);font-size:.78rem}
.prose ol,.prose ul{padding-inline-start:1.3rem}

/* ---- tablet ---- */
@media(max-width:900px){
  .nav-top a .lb{display:none}          /* icons only — keeps one row, never wraps */
  .nav-top a{padding:.45rem .5rem;font-size:1.05rem}
}

/* ---- phone: header shrinks, nav moves to a fixed bottom bar ---- */
@media(max-width:760px){
  :root{--hdr:52px; --tab:58px}
  .nav-top{display:none}
  .tabbar{display:flex}
  body{font-size:16.5px;line-height:1.8}
  main{padding:.75rem max(.85rem,env(safe-area-inset-left)) 2.5rem max(.85rem,env(safe-area-inset-right))}
  h1{font-size:1.5rem}
  h2{font-size:1.16rem;margin:1.8em 0 .5em}
  h3{font-size:1.04rem}
  .hero{padding:1rem 0 .5rem}
  .hero h1{font-size:1.85rem}
  .lead{font-size:1rem}

  /* Arabic has to stay large enough to read the harakat, but must not overflow */
  .ar.quran{font-size:1.5rem;line-height:2.15;padding:.75rem .6rem}
  .ar.huge{font-size:2.3rem}
  .ar.big{font-size:1.45em}

  /* roomier tap targets — a 9-year-old's thumb, not a mouse pointer */
  .chip{min-height:44px}
  /* links inside a stacked card get a real thumb target */
  table.stack td a{display:inline-flex;align-items:center;min-height:40px}
  table.stack td.c-ar a{min-height:48px;padding:.2rem .5rem}
  .ayah-list a,.prose-list a{min-height:40px}
  .ayah-list li,.prose-list li{padding:.75rem 0}
  .drill button{min-height:40px;padding:.45rem .95rem}
  .btn{padding:.7rem 1.4rem}
  .tick{display:inline-block;padding:.3rem 0;min-height:34px}

    .island,.links,.thread,.ladder{padding:.85rem .7rem}
  .stat-row div{flex:1 1 27%;min-width:4.2rem;padding:.5rem .6rem}
  .stat-row b{font-size:1.2rem}
  .stats div{min-width:6.5rem}
  .timeline a{min-width:0;flex:1 1 46%}
  .pager{flex-direction:column}
  .pager .next{text-align:start}

  /* Tables become stacked cards -- a 5-column word table cannot be read by
     side-scrolling on a phone. Each row turns into a labelled card, so the
     English gloss can finally be shown instead of hidden. */
  .tbl-wrap.has-stack{overflow:visible;border:0;border-radius:0;background:none}
  /* the <table> box itself must stop being a table, or it keeps sizing to
     content and overflows however block-y the rows are */
  table.stack,table.stack tbody{display:block;width:100%;max-width:100%}
  table.stack{background:none;font-size:1rem}
  /* display:none, not the clip trick — an absolutely positioned 1px thead
     still lays its row out at full width and leaks ~10px into the document's
     scroll width. Every cell carries data-label, so nothing is lost. */
  table.stack thead{display:none}
  table.stack tr{display:block;margin:0 0 .55rem;padding:.6rem .8rem;background:var(--card);
    border:1px solid var(--line);border-radius:var(--rad)}
  /* flex-wrap so a cell full of class-number links wraps instead of crushing
     each link to 6px and pushing the row 3px past the viewport */
  table.stack td{display:flex;flex-wrap:wrap;gap:.35rem .6rem;align-items:baseline;
    padding:.18rem 0;border:0;text-align:start;min-width:0}
  table.stack td a{flex:none}
  table.stack td::before{content:attr(data-label);flex:0 1 5.2rem;min-width:0;color:var(--mut);
    font-size:.74rem;line-height:1.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  table.stack td:empty{display:none}
  /* flex children default to min-width:auto -- without this the 30 verse
     chips of Surah al-Mulk refuse to wrap and push the page wide */
  table.stack td>*{min-width:0;max-width:100%}
  table.stack td.c-ar{display:block;text-align:center;margin-bottom:.2rem}
  table.stack td.c-ar::before{display:none}
  table.stack td.c-ar .ar{font-size:1.7em}
  table.stack td.c-num,table.stack td.c-hk{font-size:.9rem}
  table.stack .vrefs{flex:1}
  .c-hk{min-width:9rem}
  /* Audio Panel on Mobile */
  .audio-panel{padding:.85rem .9rem;margin:1rem 0}
  .audio-panel-head{flex-direction:column;align-items:flex-start;gap:.4rem}
  .audio-panel-title{font-size:.88rem}
  .audio-durability-tag{font-size:.72rem}
  .audio-btn-group{display:grid;grid-template-columns:1fr;gap:.5rem;width:100%}
  .audio-drive-btn,.audio-save-btn,.audio-zip-btn,.audio-del-btn{
    width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;
    padding:.6rem .8rem;font-size:.84rem;text-align:center
  }
  .audio-status{font-size:.8rem;line-height:1.4}

  /* Story Section & Interactive Storyteller on Mobile */
  .story-head-bar{flex-direction:column;align-items:stretch;gap:.7rem;margin-bottom:.8rem}
  .story-head-bar h2{font-size:1.15rem;margin:0}
  .story-audio-bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%}
  .story-play-btn{flex:1;min-height:44px;font-size:.84rem;padding:.5rem .8rem;justify-content:center}
  .story-speed-ctrl{min-height:44px;display:flex;align-items:center;padding:3px}
  .sp-btn{min-height:38px;min-width:38px;padding:.3rem .55rem;font-size:.78rem}
  .story-listening-status{font-size:.78rem;padding:.5rem .75rem;line-height:1.4}
  
  /* Story Segments & Tap targets */
  .story-seg{padding:.75rem .85rem;margin:.55rem 0;font-size:.98rem;line-height:1.85;border-radius:12px;
    -webkit-tap-highlight-color:transparent}
  .story-seg.active-story-seg{transform:none;border-width:2px}
  .seg-speaker-tag{font-size:.72rem;padding:.15rem .5rem;margin-bottom:.25rem;display:inline-block}

  /* Inline and Ayah play buttons on mobile */
  .play-btn{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .word-play-inline{padding:.2rem .4rem;font-size:.9rem}
  .ayah-play{min-height:44px;padding:.45rem .95rem;font-size:.85rem}

  blockquote{padding:.5em .8em}
  .foot{padding:1.5rem .85rem 2rem;text-align:center}
}

/* ---- very narrow (360px and below) ---- */
@media(max-width:380px){
  .brand{font-size:.95rem}              /* title stays — the header only holds brand + theme here */
  .ar.quran{font-size:1.35rem}
    .tabbar a{font-size:.63rem}
}

/* ---- landscape phone: reclaim vertical space ---- */
@media(max-height:480px) and (orientation:landscape){
  :root{--hdr:46px; --tab:46px}
  .tabbar a .lb{display:none}
  .tabbar a .ic{font-size:1.3rem}
}

@media print{
  .top,.foot,.pager,.drill,.nav-top,.tabbar,.theme,.links{display:none}
  body{background:#fff;font-size:11pt;padding:0}
  .filter{position:static;box-shadow:none}
  .ar.quran{border:0;background:none}
  a{color:#000;text-decoration:none}
}