:root {
  --bg: #0f1a17;
  --bg2: #15241f;
  --card: #1a2c26;
  --line: #2b4038;
  --gold: #d9b56a;
  --text: #f1ede3;
  --muted: #a6b3ad;
  --good: #4fbf85;
  --bad: #e0675c;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f6f2e9; --bg2: #efe8da; --card: #fffdf8; --line: #e2d8c4;
    --gold: #9a7425; --text: #1d2a25; --muted: #66726c;
    --good: #2e8b57; --bad: #c0463b;
  }
}
@font-face {
  font-family: "IndoPak Nastaleeq";
  src: url("fonts/indopak-nastaleeq.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Kolkatta";
  src: url("fonts/kolkatta.woff2") format("woff2");
  font-display: swap;
}
:root {
  --font-amiri: Amiri, "Traditional Arabic", serif;
  --font-indopak: "IndoPak Nastaleeq", Amiri, serif;
  --font-kolkatta: "Kolkatta", Amiri, serif;
  --ar-font: var(--font-amiri);
  --ar-scale: 1;
}
:root[data-arfont="indopak"] { --ar-font: var(--font-indopak); --ar-scale: .9; }
svg.kg { width: auto; max-width: 100%; fill: currentColor; overflow: visible; }
:root[data-arfont="kolkatta"] { --ar-font: var(--font-kolkatta); --ar-scale: 1.15; }
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 70%);
  background-color: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
  display: flex; flex-direction: column;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hidden { display: none !important; }

.top { position: relative; display: flex; justify-content: center; padding: 14px 16px 0; }
.tabs { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.tab { padding: 8px 22px; border-radius: 999px; color: var(--muted); font-weight: 500; }
.tab.active { background: var(--gold); color: var(--bg); }

.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Learn */
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.card { width: 100%; max-width: 520px; text-align: center; will-change: transform; }
.card.anim { transition: transform .2s ease, opacity .2s ease; }
.num { color: var(--gold); font-weight: 600; letter-spacing: .1em; font-size: .9rem; margin-bottom: 8px; }
.ar {
  font-family: var(--ar-font);
  font-size: calc(clamp(4rem, 22vw, 8rem) * var(--ar-scale));
  line-height: 1.7; color: var(--text);
}
.ar.long { font-size: calc(clamp(2.6rem, 13vw, 5.5rem) * var(--ar-scale)); }
.tr { font-size: clamp(1.4rem, 6vw, 2rem); font-weight: 600; color: var(--gold); margin-top: 4px; }
.en { font-size: clamp(1.05rem, 4.5vw, 1.3rem); color: var(--muted); margin-top: 10px; line-height: 1.4; }

.restart { align-self: center; font-size: .85rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; margin-bottom: 4px; }
.restart:active { transform: scale(.96); }
.controls { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 8px 16px 14px; }
.nav-btn { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); font-size: 2rem; line-height: 1; padding-bottom: 4px; }
.nav-btn:active { transform: scale(.94); }
.counter { min-width: 96px; padding: 10px 14px; border-radius: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.progress { height: 3px; background: var(--line); }
.bar { height: 100%; background: var(--gold); transition: width .2s; }

/* Test */
#test { padding: 16px; align-items: center; justify-content: center; }
.test-setup, .quiz, .result { width: 100%; max-width: 480px; display: flex; flex-direction: column; gap: 18px; }
.test-setup h2 { text-align: center; font-weight: 600; }
.test-setup label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .9rem; }
.range { display: flex; align-items: center; gap: 10px; }
input, select { font: inherit; font-size: 1rem; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; width: 100%; }
.range input { width: 90px; text-align: center; }
.primary { background: var(--gold); color: var(--bg); padding: 14px; border-radius: 14px; font-weight: 600; font-size: 1.05rem; }
.ghost { border: 1px solid var(--line); padding: 12px; border-radius: 14px; color: var(--muted); }

.quiz-head { display: flex; justify-content: space-between; color: var(--muted); font-variant-numeric: tabular-nums; }
.prompt { text-align: center; min-height: 160px; display: flex; flex-direction: column; justify-content: center; }
.prompt .ar { font-size: calc(clamp(3.4rem, 18vw, 6rem) * var(--ar-scale)); line-height: 1.6; }
.prompt .ar.long { font-size: calc(clamp(2.2rem, 11vw, 4rem) * var(--ar-scale)); }
.prompt .en { font-size: 1.5rem; color: var(--text); }
.prompt .hint { color: var(--muted); font-size: .85rem; margin-top: 6px; }
.options { display: grid; gap: 10px; }
.opt { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; font-size: 1.05rem; transition: background .15s, border-color .15s; }
.opt.ar-opt { font-family: var(--ar-font); font-size: calc(1.9rem * var(--ar-scale)); padding: 4px 14px; line-height: 1.8; }
.opt.correct { border-color: var(--good); background: color-mix(in srgb, var(--good) 22%, var(--card)); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 22%, var(--card)); }
.opt:disabled { cursor: default; }

.result { text-align: center; }
.result .big { font-size: 2.6rem; font-weight: 600; color: var(--gold); }
#missed { display: flex; flex-direction: column; gap: 8px; max-height: 45dvh; overflow: auto; text-align: left; }
.miss { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.miss .a { font-family: var(--ar-font); font-size: calc(1.6rem * var(--ar-scale)); }
.miss small { color: var(--muted); display: block; }

/* Learn: view toggle + grid */
.viewbtn { position: absolute; left: 16px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); display: grid; place-items: center; }
.viewbtn:active { transform: scale(.94); }
.viewbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.viewbtn .ico-card, .viewbtn.is-grid .ico-grid { display: none; }
.viewbtn.is-grid .ico-card { display: block; }
.subview { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.grid-wrap { flex: 1; overflow-y: auto; padding: 14px 16px 20px; -webkit-overflow-scrolling: touch; }
.grid-hint { text-align: center; color: var(--muted); font-size: .85rem; margin: 0 auto 12px; max-width: 900px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; max-width: 900px; margin: 0 auto; direction: rtl; }
.tile { height: 124px; perspective: 700px; padding: 0; text-align: center; direction: ltr; }
.tile-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s ease; }
.tile.flipped .tile-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 6px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--card);
  backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden;
}
.back { transform: rotateY(180deg); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); background: color-mix(in srgb, var(--gold) 10%, var(--card)); }
.t-num { position: absolute; top: 6px; right: 9px; font-size: .7rem; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.t-ar { font-family: var(--ar-font); font-size: calc(1.9rem * var(--ar-scale)); line-height: 1.7; }
.t-ar.long { font-size: calc(1.35rem * var(--ar-scale)); }
.t-ar.xlong { font-size: calc(1.05rem * var(--ar-scale)); line-height: 1.6; }
.t-tr { font-size: .85rem; font-weight: 600; color: var(--gold); line-height: 1.2; }
.t-en { font-size: .72rem; color: var(--muted); line-height: 1.25; }
.t-en.long { font-size: .64rem; }
.tile:focus-visible { outline: none; }
.tile:focus-visible .face { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (min-width: 720px) {
  .grid-hint { font-size: .95rem; max-width: 1080px; margin-bottom: 16px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; max-width: 1080px; }
  .tile { height: 150px; }
  .t-num { font-size: .8rem; top: 8px; right: 11px; }
  .t-ar { font-size: calc(2.35rem * var(--ar-scale)); }
  .t-ar.long { font-size: calc(1.65rem * var(--ar-scale)); }
  .t-ar.xlong { font-size: calc(1.25rem * var(--ar-scale)); }
  .t-tr { font-size: 1rem; }
  .t-en { font-size: .84rem; line-height: 1.3; }
  .t-en.long { font-size: .74rem; }
  .small { font-size: 1.02rem; padding: 11px 20px; }
  .revealed { font-size: 1rem; }
}

.grid-controls { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 16px 14px; border-top: 1px solid var(--line); }
.small { padding: 10px 16px; font-size: .95rem; border-radius: 12px; min-width: 104px; }
.primary:disabled { opacity: .45; cursor: default; }
.revealed { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; min-width: 56px; text-align: center; }

/* Learn: grid style switch */
.style-switch { display: flex; width: max-content; margin: 0 auto 12px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg { padding: 6px 18px; border-radius: 999px; color: var(--muted); font-size: .88rem; font-weight: 500; }
.seg.active { background: color-mix(in srgb, var(--gold) 18%, var(--card)); color: var(--gold); }

/* Learn: poster style (fixed palette, scales with its own width) */
.poster-pane { container: pane / inline-size; }
.poster {
  --p-bg: #1b1e1d; --p-deep: #141716; --p-ink: #f5f0e4; --p-gold: #f0b135; --p-teal: #22a99a; --p-line: rgb(240 177 53 / .5);
  container-type: inline-size;
  position: relative; max-width: 1080px; margin: 0 auto;
  background: var(--p-bg); color: var(--p-ink);
  border: min(.8cqw, 8px) solid var(--p-gold);
  box-shadow: 0 12px 40px rgb(0 0 0 / .35);
}
.poster::before, .poster::after { content: ''; position: absolute; pointer-events: none; z-index: 0; }
.poster::before { inset: 1cqw; border: .35cqw solid var(--p-teal); }
.poster::after { inset: 1.8cqw; border: .25cqw dotted var(--p-gold); }
.p-corner { position: absolute; z-index: 1; width: 12cqw; height: 12cqw; top: .4cqw; left: .4cqw; }
.p-corner.tr { left: auto; right: .4cqw; transform: scaleX(-1); }
.p-corner.bl { top: auto; bottom: .4cqw; transform: scaleY(-1); }
.p-corner.br { top: auto; left: auto; bottom: .4cqw; right: .4cqw; transform: scale(-1, -1); }
.p-body { position: relative; z-index: 2; padding: 5.5cqw 5.5cqw 4.5cqw; }

.p-band { display: flex; align-items: center; gap: 1.8cqw; margin: 0 7cqw; }
.p-flour { flex: 1; height: .25cqw; position: relative; background: linear-gradient(to right, transparent, var(--p-gold)); }
.p-flour.r { background: linear-gradient(to left, transparent, var(--p-gold)); }
.p-flour::after { content: ''; position: absolute; top: 50%; left: 100%; width: 1.1cqw; height: 1.1cqw; background: var(--p-teal); border: .2cqw solid var(--p-gold); transform: translate(-50%, -50%) rotate(45deg); }
.p-flour.r::after { left: 0; }
.p-bism {
  font-family: Amiri, serif; font-size: 3.4cqw; line-height: 1.7; color: var(--p-gold); white-space: nowrap;
  padding: 0 3cqw; background: var(--p-deep); border: .6cqw double var(--p-gold);
  box-shadow: inset 0 0 0 .45cqw var(--p-deep), inset 0 0 0 .65cqw var(--p-teal);
}
.p-title { text-align: center; font-family: Cinzel, Georgia, serif; font-weight: 700; font-size: 2.3cqw; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; margin: 1.8cqw 0 2.2cqw; }
.p-title span { display: block; font-size: 1.5cqw; font-weight: 600; letter-spacing: .16em; color: var(--p-gold); }

.p-grid { display: grid; grid-template-columns: repeat(9, 1fr); direction: rtl; gap: max(1px, .14cqw); background: var(--p-line); border: max(1px, .3cqw) solid var(--p-gold); }
.p-cell {
  direction: ltr; aspect-ratio: 1 / .95; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15cqw;
  padding: .4cqw .3cqw; background: var(--p-bg); text-align: center; transition: background .15s;
}
.p-cell:hover, .p-cell:focus-visible { background: #283230; outline: none; }
.p-ar { font-family: var(--ar-font); font-size: calc(3cqw * var(--ar-scale)); line-height: 1.45; color: var(--p-teal); }
.p-cell.alt .p-ar { color: var(--p-gold); }
.p-ar.long { font-size: calc(2.15cqw * var(--ar-scale)); }
.p-ar.xlong { font-size: calc(1.6cqw * var(--ar-scale)); }
.p-tr { font-size: 1.15cqw; font-weight: 600; line-height: 1.15; }
.p-en { font-size: .85cqw; line-height: 1.2; color: var(--p-gold); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.p-center { grid-column: 4 / span 3; grid-row: 5 / span 3; display: flex; padding: 1.4cqw; background: var(--p-deep); }
.p-medal {
  flex: 1; position: relative; display: grid; place-items: center;
  border: .35cqw solid var(--p-gold); box-shadow: inset 0 0 0 .6cqw var(--p-deep), inset 0 0 0 .8cqw var(--p-teal);
}
.p-medal::before { content: ''; position: absolute; inset: 1.4cqw; border: .2cqw dotted var(--p-gold); }
.p-allah {
  font-family: Amiri, serif; font-weight: 700; font-size: 12cqw; line-height: 1.3; padding-top: 3.4cqw;
  background: linear-gradient(115deg, var(--p-teal) 38%, var(--p-gold) 62%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.p-jalla { position: absolute; top: 2.6cqw; right: 2.8cqw; font-family: Amiri, serif; font-size: 1.9cqw; color: var(--p-gold); }
.p-foot { margin-top: 2.4cqw; }
.p-sadaq { font-family: Amiri, serif; font-weight: 700; font-size: 4cqw; line-height: 1.6; color: var(--p-gold); white-space: nowrap; }

/* Mid widths: drop the tiny English meanings */
@container pane (max-width: 899px) {
  .p-en { display: none; }
  .p-tr { font-size: 1.4cqw; }
}
/* Phones: 5 columns with the medallion spanning 3 x 2 */
@container pane (max-width: 699px) {
  .p-body { padding: 8cqw 5cqw 7cqw; }
  .p-corner { width: 16cqw; height: 16cqw; }
  .p-band { margin: 0 4cqw; gap: 2.4cqw; }
  .p-bism { font-size: 5.4cqw; border-width: .9cqw; }
  .p-title { font-size: 3.6cqw; margin: 3cqw 0 3.4cqw; }
  .p-title span { font-size: 2.5cqw; }
  .p-grid { grid-template-columns: repeat(5, 1fr); }
  .p-cell { aspect-ratio: 1 / .85; padding: .6cqw .4cqw; }
  .p-ar { font-size: calc(5.2cqw * var(--ar-scale)); }
  .p-ar.long { font-size: calc(3.7cqw * var(--ar-scale)); }
  .p-ar.xlong { font-size: calc(2.8cqw * var(--ar-scale)); }
  .p-tr { font-size: 2.3cqw; }
  .p-center { grid-column: 2 / span 3; grid-row: 10 / span 2; padding: 2cqw; }
  .p-medal::before { inset: 2cqw; }
  .p-allah { font-size: 16cqw; padding-top: 4cqw; }
  .p-jalla { font-size: 3cqw; top: 3cqw; right: 3.4cqw; }
  .p-sadaq { font-size: 6.4cqw; }
}

/* Settings */
.gear { position: absolute; right: 16px; top: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: 1.3rem; line-height: 1; }
.gear:active { transform: scale(.94); }
.settings { margin: auto; width: calc(100% - 32px); max-width: 420px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.settings::backdrop { background: rgb(0 0 0 / .5); }
.settings form { display: flex; flex-direction: column; gap: 16px; }
.settings h2 { font-weight: 600; font-size: 1.2rem; }
.settings fieldset { border: 0; display: flex; flex-direction: column; gap: 10px; }
.settings legend { color: var(--muted); font-size: .9rem; margin-bottom: 8px; }
.font-choice { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.font-choice:has(input:checked) { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--card)); }
.font-choice input { width: auto; accent-color: var(--gold); }
.font-name { flex: 1; }
.font-name small { color: var(--muted); }
.font-sample { font-size: 1.8rem; line-height: 1.9; }