/* =========================================================
   مَجَالِسُ الْفَصَاحَةِ وَالْبَيَانِ — illuminated manuscript
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

:root{
  --walnut:#2E1B12;
  --leather:#4A2C1A;
  --parch:#E7D3AE;
  --ivory:#F7EFD9;
  --ink:#24170F;
  --gold:#C9A227;
  --gold-b:#F2D27A;
  --brass:#8C6A2F;
  --deep:#140B07;

  --gold-grad: linear-gradient(135deg, #8C6A2F 0%, #C9A227 26%, #F2D27A 52%, #C9A227 74%, #8C6A2F 100%);
  --font-body: 'Amiri', "Times New Roman", serif;
  --font-display: 'Aref Ruqaa', 'Amiri', serif;
}

[hidden]{ display:none !important; }

html, body{ height:100%; }

body{
  margin:0;
  background:#0E0704;
  color:var(--ivory);
  font-family:var(--font-body);
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none;
  user-select:none;
  touch-action:manipulation;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

button{ font:inherit; color:inherit; border:0; background:none; cursor:pointer; }
img{ display:block; max-width:100%; }

:focus-visible{ outline:2px solid var(--gold-b); outline-offset:3px; border-radius:3px; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* ================= SCENE ================= */
.scene{ position:fixed; inset:0; z-index:0; overflow:hidden; background:#0B0603; }

.scene__bg{
  position:absolute; inset:-3%;
  background-color:#120A05;
  background-image:
    url('assets/library.png'),
    radial-gradient(78% 62% at 50% 28%, #4A2C17 0%, #2A1710 46%, #150C07 78%, #0B0603 100%),
    linear-gradient(180deg, #241408 0%, #120A05 62%, #0A0503 100%);
  background-size:cover, cover, cover;
  background-position:center 42%, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  filter:saturate(.96) brightness(.82);
  animation:bgDrift 26s ease-in-out infinite alternate;
}
@keyframes bgDrift{
  from{ transform:scale(1.03) translateY(0); }
  to{ transform:scale(1.09) translateY(-1.1%); }
}

.scene__haze{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 26% 8%, rgba(255,198,112,.20), transparent 72%),
    radial-gradient(46% 36% at 80% 4%, rgba(255,172,84,.13), transparent 72%),
    radial-gradient(70% 50% at 50% 100%, rgba(60,30,14,.42), transparent 74%);
}

.scene__vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(118% 88% at 50% 44%, rgba(20,11,7,0) 28%, rgba(20,11,7,.55) 76%, rgba(9,5,3,.94) 100%);
}

.lantern{
  position:absolute; width:clamp(64px,11vw,148px); height:auto;
  transform-origin:50% 0;
  pointer-events:none;
  filter:drop-shadow(0 16px 34px rgba(255,166,66,.30)) brightness(.9);
  opacity:.92;
}
.lantern--r{ top:-3%; right:4%; animation:sway 12s ease-in-out infinite alternate; }
.lantern--l{ top:-7%; left:6%; width:clamp(48px,7.5vw,104px); opacity:.62; animation:sway 15s ease-in-out infinite alternate-reverse; }
@keyframes sway{ from{ transform:rotate(-1.7deg); } to{ transform:rotate(1.7deg); } }

.motes{ position:absolute; inset:0; pointer-events:none; }
.mote{
  position:absolute; display:block; border-radius:50%;
  background:radial-gradient(circle, #FFE9B8 0%, rgba(255,214,144,.55) 45%, rgba(255,214,144,0) 72%);
  animation-name:moteFloat; animation-timing-function:linear; animation-iteration-count:infinite;
  opacity:0;
}
@keyframes moteFloat{
  0%{ transform:translate3d(0,0,0); opacity:0; }
  14%{ opacity:.8; }
  80%{ opacity:.35; }
  100%{ transform:translate3d(22px,-140px,0); opacity:0; }
}

/* ================= STAGE ================= */
.stage{
  position:relative; z-index:3;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(6px,1.3vh,16px);
  padding:clamp(8px,1.8vh,20px) clamp(10px,3vw,28px);
  perspective:1800px;
  perspective-origin:50% 46%;
}

/* ================= HUD ================= */
.hud{
  position:relative; z-index:8;
  width:100%; max-width:1000px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 2px;
  flex:0 0 auto;
}
.hud__left{ display:flex; align-items:center; gap:8px; }

.tabs{ display:flex; gap:5px; list-style:none; margin:0; padding:0; }
.tabs li{
  width:34px; height:30px;
  display:grid; place-items:center;
  font-size:15px; line-height:1; color:#9a7a3a;
  border:1px solid rgba(140,106,47,.45);
  border-radius:4px 4px 2px 2px;
  background:linear-gradient(180deg, #33200f, #1b100a);
  box-shadow:inset 0 1px 0 rgba(255,205,140,.12), 0 2px 6px rgba(0,0,0,.5);
  transition:color .25s, background .25s, border-color .25s, box-shadow .25s;
}
.tabs li.is-done{ color:#E7C976; border-color:rgba(201,162,39,.7); }
.tabs li.is-active{
  color:#2A1A0C;
  background:var(--gold-grad);
  border-color:#E0BE63;
  box-shadow:0 0 16px rgba(242,210,122,.55), inset 0 1px 0 rgba(255,255,255,.6);
}

.hud__score{
  display:flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px;
  border-radius:5px;
  border:1px solid rgba(201,162,39,.38);
  background:linear-gradient(180deg, rgba(46,27,18,.86), rgba(24,14,9,.9));
  box-shadow:inset 0 1px 0 rgba(255,215,150,.16), 0 3px 10px rgba(0,0,0,.45);
  color:var(--gold-b);
  font-size:16px; line-height:1;
}
.hud__star{ width:13px; height:13px; fill:#C9A227; opacity:.9; }
.hud__score b{ font-weight:700; font-variant-numeric:tabular-nums; }
.hud__den{ color:#a98a4a; font-size:12px; }

.hud__mute{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:5px;
  border:1px solid rgba(201,162,39,.32);
  background:linear-gradient(180deg, rgba(46,27,18,.86), rgba(24,14,9,.9));
  color:#E2C57F;
  transition:transform .15s, background .2s, color .2s, border-color .2s;
}
.hud__mute svg{ width:20px; height:20px; }
.hud__mute .ic-off{ display:none; }
.hud__mute.is-muted{ color:#8a7250; border-color:rgba(140,106,47,.4); }
.hud__mute.is-muted .ic-on{ display:none; }
.hud__mute.is-muted .ic-off{ display:block; }
.hud__mute:active{ transform:scale(.94); }
.hud__mute.is-muted:not(.is-keep-lit){ opacity:.86; }

@media (hover:hover){
  .hud__mute:hover{ color:#F2D27A; border-color:rgba(201,162,39,.6); background:linear-gradient(180deg, rgba(58,35,22,.9), rgba(30,18,11,.92)); }
}

/* ================= BOOK ================= */
.bookWrap{
  position:relative; z-index:4;
  display:flex; align-items:center; justify-content:center;
  width:100%;
  transition:transform .55s cubic-bezier(.22,.9,.3,1);
  transform-style:preserve-3d;
  flex:0 0 auto;
}

.stand{
  position:absolute; left:50%; bottom:-9%;
  width:72%; height:auto;
  transform:translateX(-50%);
  z-index:1; pointer-events:none;
  filter:brightness(.66) saturate(.92) drop-shadow(0 12px 30px rgba(0,0,0,.85));
}

.book{
  position:relative; z-index:3;
  width:min(96%, calc((100vh - 168px) * 0.70), 470px);
  width:min(96%, calc((100dvh - 168px) * 0.70), 470px);
  aspect-ratio:0.70;
  perspective:1900px;
  opacity:0; visibility:hidden;
  transform:scale(.965);
  transition:opacity .65s ease, transform .8s cubic-bezier(.2,.9,.3,1), visibility .65s;
  pointer-events:none;
}
.book.is-open{
  opacity:1; visibility:visible;
  transform:none;
  pointer-events:auto;
}

.book__body{
  position:absolute; inset:0;
  display:grid; grid-template-columns:1fr; column-gap:4px;
  padding:11px;
  border-radius:9px;
  background:linear-gradient(180deg, #573520 0%, #402516 34%, #2A1710 100%);
  box-shadow:
    0 42px 70px -26px rgba(0,0,0,.95),
    0 8px 22px rgba(0,0,0,.6),
    0 0 0 1px rgba(201,162,39,.22),
    inset 0 1px 0 rgba(255,214,150,.16);
}
.book__body::before{
  content:'';
  position:absolute; inset:4px;
  border-radius:7px;
  border:1px solid rgba(201,162,39,.16);
  pointer-events:none;
}

.page{
  position:relative;
  border-radius:3px;
  overflow:hidden;
  background-color:#E9D7B4;
  background-image:
    url('assets/parchment.png'),
    radial-gradient(132% 104% at 26% 10%, #F6EBD0 0%, #E9D7B4 48%, #D8BF95 100%);
  background-size:cover, cover;
  background-position:center, center;
  background-repeat:no-repeat, no-repeat;
  box-shadow:
    inset 0 0 40px rgba(126,88,44,.20),
    inset 0 0 0 1px rgba(120,86,42,.18),
    0 1px 2px rgba(0,0,0,.35);
}
.page--deco{ display:none; }

.page--main::after{
  content:''; position:absolute; top:0; bottom:0; left:0; width:34px;
  background:linear-gradient(90deg, rgba(96,62,28,.34), rgba(96,62,28,0));
  pointer-events:none; z-index:2;
}
.page--deco::after{
  content:''; position:absolute; top:0; bottom:0; right:0; width:30px;
  background:linear-gradient(270deg, rgba(96,62,28,.32), rgba(96,62,28,0));
  pointer-events:none;
}

.frame{
  position:absolute; inset:clamp(7px,1.1vw,13px);
  border:1px solid rgba(140,106,47,.55);
  border-radius:2px;
  pointer-events:none; z-index:1;
}
.frame::before{
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(201,162,39,.30);
}
.frame__c{
  position:absolute; width:15px; height:15px;
  fill:var(--gold); opacity:.8;
}
.frame__c--tl{ top:-8px; left:-8px; }
.frame__c--tr{ top:-8px; right:-8px; }
.frame__c--bl{ bottom:-8px; left:-8px; }
.frame__c--br{ bottom:-8px; right:-8px; }

.page__scroll{
  position:absolute; inset:0; z-index:3;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(140,106,47,.55) transparent;
}
.page__scroll::-webkit-scrollbar{ width:5px; }
.page__scroll::-webkit-scrollbar-thumb{ background:rgba(140,106,47,.5); border-radius:3px; }
.page__scroll::-webkit-scrollbar-track{ background:transparent; }

.page__inner{
  position:relative;
  min-height:100%;
  display:flex; flex-direction:column;
  gap:clamp(7px,1.3vh,13px);
  padding:clamp(20px,3.4vw,40px);
  color:var(--ink);
}

.bloom{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0;
  background:radial-gradient(72% 62% at 50% 46%, rgba(255,228,152,.62), rgba(242,210,122,.20) 46%, rgba(242,210,122,0) 74%);
  mix-blend-mode:screen;
}
.bloom.go{ animation:bloomFlash .95s ease-out; }
@keyframes bloomFlash{ 0%{opacity:0;} 26%{opacity:1;} 100%{opacity:0;} }

/* leaf (page turn sheet) */
.leaf{
  position:absolute; z-index:7;
  transform-origin:left center;
  border-radius:3px;
  pointer-events:none;
  opacity:0;
  will-change:transform;
  background-color:#EFDFC0;
  background-image:
    linear-gradient(100deg, rgba(96,62,28,.42) 0%, rgba(96,62,28,.05) 24%, rgba(255,250,232,.35) 62%, rgba(126,92,48,.25) 100%),
    url('assets/parchment.png'),
    linear-gradient(180deg, #F3E6C8 0%, #DCC49C 100%);
  background-size:cover, cover, cover;
  background-position:center, center, center;
  background-repeat:no-repeat, no-repeat, no-repeat;
  box-shadow:0 18px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(201,162,39,.4);
}

.burst{
  position:absolute; left:50%; top:50%; z-index:6;
  width:78%; aspect-ratio:1;
  transform:translate(-50%,-50%) scale(.4);
  opacity:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,230,168,.85), rgba(255,192,102,.34) 42%, rgba(255,192,102,0) 68%);
  filter:blur(8px);
}
.burst.go{ animation:burstGo 1.9s ease-out; }
@keyframes burstGo{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.34); }
  24%{ opacity:.95; }
  70%{ opacity:.45; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.42); }
}

/* ================= COVER (closed manuscript) ================= */
.cover{
  position:absolute; left:50%; bottom:4%; z-index:5;
  width:min(400px, 52%);
  transform:translateX(-50%);
  transform-origin:50% 100%;
  will-change:transform, opacity;
  pointer-events:none; /* never swallow taps on the start seal */
}
.cover__img{
  width:100%; height:auto;
  display:block;
  transform-origin:50% 100%;
  filter:drop-shadow(0 26px 44px rgba(0,0,0,.8)) drop-shadow(0 0 34px rgba(255,178,80,.14));
  animation:coverPush 3.6s cubic-bezier(.32,0,.2,1) forwards;
}
@keyframes coverPush{
  from{ transform:translateY(2.5%) scale(.97); }
  to{ transform:translateY(-1.5%) scale(1.09); }
}
.stage.is-tappable{ cursor:pointer; }

/* ================= DECO PAGE ================= */
.deco{
  position:absolute; inset:clamp(18px,3vw,38px);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  color:#A9863C;
  padding:clamp(6px,1.4vh,16px) 0;
}
.deco__rule{
  width:60%; height:1px;
  background:linear-gradient(to left, rgba(201,162,39,0), rgba(201,162,39,.75), rgba(201,162,39,0));
}
.deco__run{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--font-body);
  font-size:clamp(12px,1.3vw,15px);
  line-height:1.6;
  color:#8A6A2F;
  opacity:.85;
  margin-top:clamp(6px,2vh,24px);
  letter-spacing:0;
}
.deco__shamsa{
  position:relative;
  width:min(74%, 220px);
  aspect-ratio:1;
  display:grid; place-items:center;
  color:#C9A227;
}
.deco__shamsa svg{ position:absolute; inset:0; width:100%; height:100%; }
.deco__num{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(26px,4vw,46px);
  color:#9A7419;
  line-height:1;
  text-shadow:0 0 22px rgba(242,210,122,.55);
  transition:opacity .3s;
}
.deco__foot{ font-size:clamp(10px,1.1vw,13px); color:#9c7c42; opacity:.8; }

/* ================= TYPE & COMPONENTS ================= */
.orn{
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:250px; margin:0 auto;
}
.orn span{ flex:1; height:1px; }
.orn span:first-child{ background:linear-gradient(to right, rgba(201,162,39,0), rgba(201,162,39,.7)); }
.orn span:last-child{ background:linear-gradient(to left, rgba(201,162,39,0), rgba(201,162,39,.7)); }
.orn svg{ width:14px; height:14px; fill:var(--gold); opacity:.9; }

.start{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(9px,1.7vh,18px);
  margin:auto 0;
  padding-block:4px;
}
.start__title{
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(23px,4.4vw,44px);
  line-height:1.8;
  margin:0;
  color:#B08B22;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .start__title{
    background:linear-gradient(158deg,#8C6A2F 0%, #C9A227 28%, #F7E3A8 50%, #C9A227 72%, #8C6A2F 100%);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
  }
}
.start__intro{
  margin:0;
  font-size:clamp(15px,1.9vw,19px);
  line-height:2;
  color:#3B2A1C;
  max-width:32ch;
}
.start__meta{
  margin:0;
  font-size:clamp(11px,1.4vw,13px);
  color:#8A6A2F;
  opacity:.9;
}

.qhead{
  display:flex; align-items:center; gap:9px;
  color:#8C6A2F;
  font-size:clamp(11px,1.5vw,14px);
  line-height:1.4;
  flex:0 0 auto;
}
.khatim{ width:15px; height:15px; fill:var(--gold); opacity:.9; flex:0 0 15px; }
.qhead__rule{
  flex:1; height:1px;
  background:linear-gradient(270deg, rgba(140,106,47,.55), rgba(140,106,47,0));
}

.qtext{
  margin:0;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(18px,2.4vw,26px);
  line-height:2;
  color:#24170F;
  flex:0 0 auto;
}

.opts{ display:flex; flex-direction:column; gap:clamp(7px,1.2vh,11px); flex:0 0 auto; }

.opt{
  position:relative;
  display:flex; align-items:center; gap:11px;
  width:100%;
  min-height:48px;
  padding:9px 12px;
  border:1px solid rgba(140,106,47,.45);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(255,251,238,.78), rgba(235,216,180,.55));
  color:#2A1C12;
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(16px,2.1vw,21px);
  line-height:1.7;
  text-align:right;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(90,60,25,.14);
  transition:transform .15s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
}
@media (hover:hover){
  .opt:hover:not(:disabled){
    border-color:rgba(201,162,39,.95);
    background:linear-gradient(180deg, rgba(255,252,242,.95), rgba(240,222,186,.7));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 3px 12px rgba(160,120,40,.22);
  }
}
.opt:active:not(:disabled){ transform:scale(.99); }
.opt:disabled{ cursor:default; }

.opt__mark{
  flex:0 0 32px; width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:50%;
  font-size:14px; font-weight:700; line-height:1;
  color:#4A2C1A;
  background:radial-gradient(circle at 34% 28%, #F7E6B6, #D9BC74 60%, #B7973F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(90,60,20,.35);
  transition:background .25s, color .25s, box-shadow .25s;
}
.opt__txt{ flex:1; }

.opt__seal{
  flex:0 0 20px; width:20px; height:20px;
  opacity:0; transform:scale(.55);
  color:#8A6A12;
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,1.6,.4,1), color .26s ease;
}
.opt__seal svg{ width:100%; height:100%; display:block; }

.opt.is-correct{
  border-color:#C9A227;
  color:#3A2A08;
  background:linear-gradient(180deg,#FCF3D6,#EEDCA8);
  animation:optGlow 1.5s ease-out;
}
@keyframes optGlow{
  0%{ box-shadow:0 0 0 1px rgba(201,162,39,.9), 0 0 0 rgba(242,210,122,0); }
  38%{ box-shadow:0 0 0 2px rgba(242,210,122,1), 0 0 42px rgba(242,210,122,.92); }
  100%{ box-shadow:0 0 0 1.5px rgba(201,162,39,.85), 0 0 24px rgba(242,210,122,.55); }
}
.opt.is-correct .opt__mark{
  background:linear-gradient(135deg,#F2D27A,#C9A227);
  color:#2A1A0C;
  box-shadow:0 0 16px rgba(242,210,122,.9), inset 0 1px 0 rgba(255,255,255,.7);
}
.opt.is-correct .opt__seal{ opacity:1; transform:scale(1); color:#8A6A12; }

.opt.is-wrong{
  border-style:dashed;
  border-color:rgba(120,90,60,.5);
  background:rgba(120,90,60,.10);
  color:rgba(36,23,15,.55);
}
.opt.is-wrong .opt__mark{
  background:rgba(120,90,60,.22);
  color:rgba(36,23,15,.5);
  box-shadow:none;
}
.opt.is-wrong .opt__seal{ opacity:1; transform:scale(1); color:rgba(90,64,38,.8); }

.opt.is-revealed{
  border-style:dashed;
  border-color:rgba(201,162,39,.9);
  background:rgba(242,210,122,.20);
  color:#4A3A18;
}
.opt.is-revealed .opt__seal{ opacity:1; transform:scale(1); color:#8A6A12; }

.fb{ margin-top:2px; flex:0 0 auto; }
.fb__msg{
  font-size:clamp(15px,1.9vw,19px);
  line-height:1.95;
  font-weight:700;
  animation:fbIn .4s ease-out;
}
.fb__msg--ok{ color:#8A6A12; text-shadow:0 0 20px rgba(242,210,122,.75); }
.fb__msg--no{ color:#4C3A2C; }
@keyframes fbIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

.fb__note{
  margin-top:9px;
  padding:8px 10px;
  font-size:clamp(12.5px,1.65vw,15.5px);
  line-height:1.95;
  color:#5A4634;
  border-inline-start:2px solid rgba(201,162,39,.55);
  background:linear-gradient(to left, rgba(201,162,39,.11), rgba(201,162,39,0));
  animation:fbIn .5s .1s ease-out backwards;
}
.fb__note b{
  display:block;
  font-size:10.5px;
  color:#8C6A2F;
  margin-bottom:3px;
  font-weight:700;
}

.pfoot{
  margin-top:auto;
  padding-top:clamp(8px,1.6vh,16px);
  display:flex; justify-content:center;
  flex:0 0 auto;
}

.seal{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px;
  padding:10px 26px;
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(16px,1.9vw,19px);
  line-height:1.3;
  color:#2A1A0C;
  background:var(--gold-grad);
  border:1px solid #8C6A2F;
  border-radius:6px;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(80,50,10,.35);
  transition:transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.seal::after{
  content:''; position:absolute; inset:4px;
  border:1px solid rgba(60,38,10,.35);
  border-radius:3px;
  pointer-events:none;
}
@media (hover:hover){ .seal:hover{ filter:brightness(1.08); } }
.seal:active{ transform:translateY(1px) scale(.99); }

/* ================= COLOPHON ================= */
.colo{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:clamp(7px,1.5vh,14px);
  margin:auto 0;
  width:100%;
}
.colo__seal{
  position:relative;
  width:clamp(112px,20vh,158px);
  aspect-ratio:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#C9A227;
}
.colo__shamsa{ position:absolute; inset:0; width:100%; height:100%; }
.colo__num{
  position:relative;
  font-family:var(--font-display);
  font-size:clamp(30px,6vh,50px);
  line-height:1;
  color:#8A6A12;
  text-shadow:0 0 26px rgba(242,210,122,.6);
  font-variant-numeric:tabular-nums;
}
.colo__den{
  position:relative;
  font-size:clamp(11px,1.4vw,13px);
  color:#8C6A2F;
  margin-top:4px;
}
.colo__msg{
  margin:0;
  font-size:clamp(14px,1.8vw,18px);
  line-height:1.9;
  color:#3B2A1C;
  max-width:30ch;
}
.colo__rows{
  display:flex; flex-direction:column; gap:5px;
  width:100%; max-width:330px;
}
.colo__row{
  display:flex; align-items:center; gap:8px;
  padding:5px 9px;
  border:1px solid rgba(140,106,47,.28);
  border-radius:4px;
  background:rgba(255,250,236,.42);
  font-size:clamp(12.5px,1.6vw,15px);
  line-height:1.6;
  color:#4C3A2C;
}
.colo__row.ok{ border-color:rgba(201,162,39,.7); background:rgba(242,210,122,.22); color:#6A4F0F; }
.colo__ic{ width:14px; height:14px; flex:0 0 14px; color:#8C6A2F; }
.colo__row.ok .colo__ic{ color:#8A6A12; }
.colo__q{ flex:1; text-align:right; }
.colo__a{ font-weight:700; color:#5A3E12; }
.colo__best{
  font-size:clamp(12px,1.6vw,14px);
  color:#8A6A2F;
}
.colo__best b{ color:#7A5A0E; font-size:1.15em; }

/* ================= RESPONSIVE ================= */
@media (min-width: 780px) and (min-height: 620px){
  .book{
    width:min(1000px, 94%, calc((100vh - 190px) * 1.52));
    width:min(1000px, 94%, calc((100dvh - 190px) * 1.52));
    aspect-ratio:1.52;
  }
  .book__body{ grid-template-columns:1fr 1fr; column-gap:5px; padding:14px; }
  .page--deco{ display:block; }
  .cover{ width:min(430px, 46%); bottom:3%; }
  .stand{ width:64%; }
}

@media (min-width: 1100px) and (min-height: 700px){
  .book{ width:min(1040px, 90%, calc((100dvh - 200px) * 1.55)); aspect-ratio:1.55; }
}

@media (max-height: 560px){
  .book{
    width:min(96%, calc((100vh - 112px) * 1.62));
    width:min(96%, calc((100dvh - 112px) * 1.62));
    aspect-ratio:1.62;
  }
  .page--deco{ display:none; }
  .page__inner{ padding:clamp(16px,2.4vw,26px); gap:6px; }
  .qtext{ font-size:clamp(15px,2.2vw,19px); line-height:1.85; }
  .opt{ min-height:44px; padding:6px 10px; font-size:clamp(14px,1.9vw,17px); }
  .start__title{ font-size:clamp(19px,3.4vw,28px); }
  .start__intro{ font-size:clamp(13px,1.7vw,15px); line-height:1.8; }
  .seal{ min-height:44px; padding:8px 20px; font-size:15px; }
  .cover{ width:min(230px, 30%); bottom:0; }
}

@media (max-width: 380px){
  .hud__score{ font-size:14px; padding:5px 8px; }
  .tabs li{ width:30px; height:27px; font-size:13px; }
  .hud__mute{ width:38px; height:38px; }
  .page__inner{ padding:18px 16px; }
}

/* ================= MOTION PREFERENCES ================= */
@media (prefers-reduced-motion: reduce){
  .scene__bg, .lantern, .mote{ animation:none !important; }
  .cover__img{ animation:none !important; }
  .burst.go{ animation:none !important; opacity:0 !important; }
  .bloom.go{ animation:bloomFlash .5s ease-out !important; }
  .opt.is-correct{ animation:none !important; }
  .bookWrap{ transition:none !important; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .bloom.go{ animation-duration:.5s !important; }
}