/* ───────────────────────────────────────────────────────────────────────────
   گیتانما — هفت‌رنگ
   زمینه: سیاهِ کوره. کتیبه: گچِ نخودی. لعاب‌ها فقط جایی که کار می‌کنند.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'IranYekan'; font-weight: 100; font-display: swap;
  src: url('../assets/fonts/iranyekanwebthinfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebthinfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 300; font-display: swap;
  src: url('../assets/fonts/iranyekanweblightfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanweblightfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 400; font-display: swap;
  src: url('../assets/fonts/iranyekanwebregularfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebregularfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 500; font-display: swap;
  src: url('../assets/fonts/iranyekanwebmediumfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebmediumfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 700; font-display: swap;
  src: url('../assets/fonts/iranyekanwebboldfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebboldfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 800; font-display: swap;
  src: url('../assets/fonts/iranyekanwebextraboldfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebextraboldfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 900; font-display: swap;
  src: url('../assets/fonts/iranyekanwebblackfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebblackfanum.ttf') format('truetype'); }
@font-face { font-family: 'IranYekan'; font-weight: 950; font-display: swap;
  src: url('../assets/fonts/iranyekanwebextrablackfanum.woff') format('woff'),
       url('../assets/fonts/iranyekanwebextrablackfanum.ttf') format('truetype'); }

:root {
  --space:     #05070F;
  --kiln:      #05070F;
  --kiln-2:    #101728;
  --kiln-3:    #1F2A42;
  --grout:     #241812;

  --biscuit:   #E8DDC6;
  --plaster:   #E4D8BE;
  --plaster-2: #D6C8A9;
  --ink:       #241812;
  --ink-2:     #5A4736;
  --ink-3:     #7E6A52;

  --lajvard:   #22409A;
  --firooze:   #1C9095;
  --zard:      #D8A32B;
  --bademjani: #4E2B4B;
  --ajori:     #B24A2F;
  --sabz:      #5F7C46;
  --brass:     #B98B3E;

  --dim:       #A2937B;
  --dim-2:     #6E624F;

  --ease: cubic-bezier(.16, .84, .28, 1);
  /* لغزشِ کتیبه: منحنیِ تندشروع/نرم‌نشین و مدتِ کوتاه‌تر. همین عدد در globe.js
     هم هست (PANEL_MS) تا گنبد و کتیبه با هم راه بیفتند، نه یکی پشتِ دیگری. */
  --slide: cubic-bezier(.22, 1, .30, 1);
  --slide-ms: 440ms;

  /* گره‌چینی — شمسهٔ هشت‌پر، واحدِ تکرارشوندهٔ حاشیه */
  --girih: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34' viewBox='0 0 34 34'%3E%3Cg fill='none' stroke='%23B98B3E' stroke-width='1.15' stroke-opacity='.55'%3E%3Cpath d='M17 1.5 32.5 17 17 32.5 1.5 17Z'/%3E%3Cpath d='M6 6h22v22H6z'/%3E%3C/g%3E%3C/svg%3E");
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'IranYekan', system-ui, sans-serif;
  font-weight: 400;
  background: var(--space);
  color: var(--biscuit);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  /* فضا، نه یک سیاهِ تخت: دو کهکشانِ کم‌رنگ در دو گوشه */
  background-image:
    radial-gradient(90% 70% at 78% 10%, #16223F 0%, transparent 60%),
    radial-gradient(80% 65% at 10% 92%, #1B1730 0%, transparent 58%),
    radial-gradient(60% 50% at 45% 45%, #0B1024 0%, transparent 70%);
}

::selection { background: var(--firooze); color: #06110F; }

/* نوار پیمایش — بخشی از طرح است، نه پیش‌فرض مرورگر */
* { scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--brass) 60%, transparent);
  border-radius: 9px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--brass); background-clip: content-box; }

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

/* ── بارگذاری ─────────────────────────────────────────────────────────────── */

.loader {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-content: center; justify-items: center;
  gap: .9rem;
  background: var(--kiln);
  transition: opacity .7s var(--ease);
}
.loader.is-done { opacity: 0; pointer-events: none; }
.loader__mark {
  width: 76px; height: 76px;
  fill: none; stroke: var(--firooze); stroke-width: 1.6;
  animation: kiln 3.6s ease-in-out infinite;
}
.loader__mark path:last-of-type { stroke: var(--brass); }
.loader__mark circle { stroke: var(--zard); }
@keyframes kiln {
  0%, 100% { transform: rotate(0); opacity: .55; }
  50%      { transform: rotate(45deg); opacity: 1; }
}
.loader__t {
  margin: 0; font-weight: 950; font-size: 1.7rem; letter-spacing: -.02em;
  color: var(--biscuit);
}
.loader__n { margin: 0; font-weight: 300; font-size: .9rem; color: var(--dim); }

/* ── چیدمان ───────────────────────────────────────────────────────────────── */

.shell { position: fixed; inset: 0; }

/* گنبد وسطِ قاب می‌ماند. وقتی کتیبه باز می‌شود، جا باز کردنش کارِ دوربین است
   نه transform — بومِ وبجی‌ال را که بکشی و کوچک کنی، تصویر مات می‌شود.
   ← globe.js: makeRoom */
.stage { position: absolute; inset: 0; }
/* بوم دقیقاً به اندازهٔ قاب — نه به اندازهٔ بافرش. مهارِ دومِ همان قفلی که
   globe.js با setSize می‌زند، تا هیچ نمایشگرِ پرتراکمی گنبد را از مرکز نیندازد. */
.stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.stage canvas.is-pointing { cursor: pointer; }
.stage canvas.is-grabbing { cursor: grabbing; }

/* ── سرصفحه ───────────────────────────────────────────────────────────────── */

.mast {
  position: absolute; inset-block-start: clamp(1.1rem, 3vh, 2.2rem);
  inset-inline-start: clamp(1.1rem, 3vw, 2.6rem);
  max-width: 27ch; pointer-events: none;
}
.mast__h {
  margin: 0; font-weight: 950; font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  line-height: .95; letter-spacing: -.035em; color: var(--biscuit);
  text-shadow: 0 2px 0 #0000004d;
}
.mast__s {
  margin: .35rem 0 0; font-weight: 700; font-size: clamp(.86rem, 1.5vw, 1.02rem);
  color: var(--zard); letter-spacing: .01em;
}
.mast__d {
  margin: .7rem 0 0; font-weight: 300; font-size: .89rem; line-height: 1.85;
  color: var(--dim); max-width: 30ch;
}

/* ── دکمه‌ها ──────────────────────────────────────────────────────────────── */

.tools {
  position: absolute; inset-block-start: clamp(1.1rem, 3vh, 2.2rem);
  inset-inline-end: clamp(1.1rem, 3vw, 2.6rem);
  display: flex; flex-direction: column; align-items: stretch; gap: .55rem;
  z-index: 20;
}
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .62rem 1rem;
  font: inherit; font-weight: 500; font-size: .88rem;
  color: var(--biscuit);
  background: linear-gradient(180deg, #16203699, #0A0F1Ecc);
  backdrop-filter: blur(6px);
  border: 1px solid var(--kiln-3);
  border-radius: 2px;
  cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease);
  box-shadow: 0 2px 10px #0000005e;
}
.btn svg { width: 17px; height: 17px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { border-color: var(--brass); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--ghost { background: #ffffff0a; color: var(--dim); }
.btn--ghost:hover { color: var(--biscuit); }

.zoom {
  display: flex; flex-direction: column; margin-top: .3rem;
  border: 1px solid var(--kiln-3); border-radius: 2px; overflow: hidden;
  background: linear-gradient(180deg, #16203699, #0A0F1Ecc);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px #00000066;
  /* ستونِ ابزار در لبهٔ چپ می‌نشیند و دکمه‌هایش تمام‌عرض‌اند؛ بزرگ‌نمایی هم
     باید لبهٔ چپش روی همان خط بیفتد. در چیدمانِ راست‌چین، چپ یعنی پایانِ محور. */
  align-self: flex-end;
}
.zoom__b {
  width: 40px; height: 38px; display: grid; place-items: center;
  background: none; border: 0; color: var(--dim); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.zoom__b + .zoom__b { border-top: 1px solid var(--kiln-3); }
.zoom__b svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zoom__b:hover { background: #ffffff12; color: var(--biscuit); }
.zoom__b--mid svg { width: 15px; height: 15px; }

/* ── نامِ کاشیِ زیر نشانگر ────────────────────────────────────────────────── */

.readout {
  position: absolute; inset-block-end: clamp(1.2rem, 4vh, 2.6rem);
  inset-inline-start: 50%; transform: translate(50%, 8px);
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem .95rem;
  background: #060A16E6;
  backdrop-filter: blur(6px);
  border: 1px solid var(--kiln-3);
  border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  white-space: nowrap;
}
.readout.is-on { opacity: 1; transform: translate(50%, 0); }
.readout__n { font-weight: 800; font-size: 1.02rem; color: var(--biscuit); }
.readout__k { font-weight: 300; font-size: .78rem; color: var(--dim-2); }

/* ── پاصفحه ───────────────────────────────────────────────────────────────── */

.foot {
  position: absolute; inset-block-end: clamp(1.1rem, 3vh, 2rem);
  inset-inline-start: clamp(1.1rem, 3vw, 2.6rem);
  pointer-events: none;
}
.foot__hint {
  margin: 0; font-weight: 400; font-size: .84rem; color: var(--biscuit);
  transition: opacity .5s var(--ease);
}
.foot__hint.is-gone { opacity: 0; }
.foot__count { margin: .3rem 0 0; font-weight: 300; font-size: .78rem; color: var(--dim-2); }

/* ── کتیبه ────────────────────────────────────────────────────────────────── */

/* کتیبه در لبهٔ راست می‌نشیند — همان‌جا که چشمِ راست‌چین شروع می‌کند.
   translateX همیشه به راستِ صفحه است، مستقل از جهت متن. */
/* لغزشِ کتیبه باید کارِ ترکیب‌کننده باشد، نه کارِ نخِ اصلی. سه قید این را
   تضمین می‌کند: translate3d که لایهٔ خودش را می‌گیرد، will-change که لایه را
   پیش از حرکت می‌سازد نه وسطش، و contain که می‌گوید هرچه در این جعبه عوض شد،
   بیرونش را دوباره نچین. بی این‌ها، مرورگر باید همان فریمِ اولِ حرکت،
   ۴۵۵ پیکسل محتوای تازه را هم بچیند هم رنگ کند — و همان یک فریم، لنگ می‌زد.
   ← main.js:open کلاس is-open را یک فریم دیرتر می‌گذارد، به همین دلیل. */
.panel {
  position: fixed; inset-block: 0; inset-inline-start: 0;
  width: min(455px, 100%);
  display: flex; flex-direction: column;
  background: var(--plaster);
  color: var(--ink);
  transform: translate3d(100%, 0, 0);
  transition: transform var(--slide-ms) var(--slide);
  will-change: transform;
  contain: layout paint style;
  backface-visibility: hidden;
  z-index: 40;
  box-shadow: -22px 0 60px #00000073;
}
.panel.is-open { transform: translate3d(0, 0, 0); }

/* حاشیهٔ گره‌چینی روی لبهٔ روبه‌گنبد: ساختارِ کتیبه، نه تزیینِ پراکنده */
.panel::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 34px;
  background: var(--girih) repeat-y center / 34px 34px, var(--kiln);
  border-inline-start: 1px solid #00000038;
}
.panel__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 2.1rem 1.7rem 3rem;
  padding-inline-end: calc(34px + 1.4rem);
}
.panel__x {
  position: absolute; inset-block-start: .85rem;
  inset-inline-start: .85rem; z-index: 2;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: #00000010; border: 1px solid #0000001f; border-radius: 2px;
  color: var(--ink-2); cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.panel__x svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; }
.panel__x:hover { background: var(--ink); color: var(--plaster); }

/* سرِ کتیبه */
.ket__head { display: flex; align-items: flex-start; gap: 1rem; }
.medal { flex: none; width: 92px; height: 92px; }
.medal svg { width: 100%; height: 100%; display: block; }
.ket__t { min-width: 0; padding-top: .15rem; }
.ket__name {
  margin: 0; font-weight: 950; font-size: clamp(1.6rem, 4.6vw, 2.05rem);
  line-height: 1.15; letter-spacing: -.025em; color: var(--ink);
  text-wrap: balance;
}
.ket__latin {
  margin: .3rem 0 0; font-weight: 300; font-size: .8rem; color: var(--ink-3);
  direction: ltr; text-align: right; letter-spacing: .01em;
}
.ket__tag {
  margin: .5rem 0 0; display: inline-block;
  padding: .17rem .55rem;
  font-weight: 500; font-size: .72rem;
  /* روی لعاب روشن مرکب تیره می‌نشیند، روی لعاب تیره گچ */
  color: var(--glaze-ink, var(--plaster));
  background: var(--glaze, var(--lajvard));
  border-radius: 2px;
}
.ket--water .ket__tag { background: #14336E; color: var(--plaster); }

/* فان‌فکت — نوار کتیبهٔ لعابی، تنها جای تیرهٔ داخل پنل.
   لعاب را با مرکب تیره می‌آمیزیم تا هر هفت رنگ، زمینهٔ خواناای بدهد. */
.fun {
  margin: 1.5rem 0 0;
  padding: 1.05rem 1.15rem;
  background: color-mix(in srgb, var(--glaze-deep, #152A6F) 62%, #150E09);
  color: var(--biscuit);
  border-radius: 2px;
  position: relative; overflow: hidden;
}
.ket--water .fun { background: #0B1E46; }
.fun::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-end: 0;
  width: 3px; background: var(--zard);
}
.fun__h {
  margin: 0 0 .45rem; font-weight: 700; font-size: .74rem;
  color: var(--zard); letter-spacing: .04em;
}
.fun__p { margin: 0; font-weight: 400; font-size: .92rem; line-height: 2; }

/* بخش‌ها */
.ket__body { margin-top: 1.7rem; }
.sec + .sec { margin-top: 1.7rem; }
.sec__h {
  margin: 0 0 .65rem; font-weight: 800; font-size: .77rem;
  color: var(--ink-2); letter-spacing: .05em;
  padding-bottom: .42rem;
  border-bottom: 1px solid #00000021;
}

/* ردیف داده — برچسب/مقدار/یکا، هم‌تراز و بی‌استثنا */
.rows { margin: 0; }
.row {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: .5rem 1rem;
  padding: .43rem 0;
  border-bottom: 1px solid #00000012;
}
.row:last-child { border-bottom: 0; }
.row dt {
  font-weight: 300; font-size: .8rem; color: var(--ink-3);
  line-height: 1.7;
}
.row dd { margin: 0; min-width: 0; }
.row__v {
  display: block; font-weight: 500; font-size: .88rem; line-height: 1.75;
  color: var(--ink);
}
.row__n {
  display: block; margin-top: .12rem;
  font-weight: 300; font-size: .74rem; line-height: 1.7; color: var(--ink-3);
}
.prose {
  margin: 0; font-weight: 400; font-size: .88rem; line-height: 2;
  color: #3A2C20;
}

/* پرچم */
.flagfig { margin: 1.8rem 0 0; }
/* پرچم‌ها نسبت‌های گوناگون دارند (نپال که اصلاً مستطیل نیست). قابِ ثابت
   می‌گیرند تا وقتی عکس می‌رسد، چیدمانِ کتیبه وسطِ لغزش تکان نخورد. */
.flagfig img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 3 / 2; object-fit: contain; object-position: center;
  background: #00000012;
  border-radius: 2px;
  border: 1px solid #0000002e;
  box-shadow: 0 6px 18px #00000026;
}
.flagfig figcaption {
  margin-top: .45rem; font-weight: 300; font-size: .74rem; color: var(--ink-3);
}

/* ── جست‌وجو ──────────────────────────────────────────────────────────────── */

.search {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: start center;
  padding: clamp(2rem, 12vh, 7rem) 1rem 2rem;
  background: #0B0806D9;
  backdrop-filter: blur(7px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s var(--ease);
}
.search.is-open { opacity: 1; pointer-events: auto; }
.search__box {
  width: min(560px, 100%);
  background: var(--kiln-2);
  border: 1px solid var(--kiln-3);
  border-radius: 3px;
  overflow: hidden;
  transform: translateY(-10px);
  transition: transform .35s var(--ease);
  box-shadow: 0 26px 70px #00000091;
}
.search.is-open .search__box { transform: none; }
.search__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--kiln-3);
}
.search__bar > svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: var(--brass); stroke-width: 1.7; stroke-linecap: round;
}
#searchInput {
  flex: 1; min-width: 0;
  font: inherit; font-weight: 400; font-size: 1rem;
  color: var(--biscuit); background: none; border: 0; outline: none;
}
#searchInput::placeholder { color: var(--dim-2); }
#searchInput::-webkit-search-cancel-button { display: none; }
.search__x {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  background: none; border: 0; color: var(--dim-2); cursor: pointer;
}
.search__x svg { width: 14px; height: 14px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; }
.search__x:hover { color: var(--biscuit); }

.results { max-height: min(52vh, 440px); overflow-y: auto; padding: .4rem; }
.res {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .7rem;
  font: inherit; text-align: start;
  background: none; border: 0; border-radius: 2px;
  color: var(--biscuit); cursor: pointer;
  transition: background .16s var(--ease);
}
.res:hover, .res:focus-visible { background: #ffffff0f; }
.res__dot {
  flex: none; width: 11px; height: 11px; border-radius: 1px;
  background: var(--g, var(--lajvard));
  box-shadow: inset 0 0 0 1px #00000059;
}
.res--water .res__dot { background: #14336E; border-radius: 50%; }
.res__n { font-weight: 500; font-size: .92rem; }
.res__m { margin-inline-start: auto; font-weight: 300; font-size: .75rem; color: var(--dim-2); }
.res__none { margin: 0; padding: 1.4rem; text-align: center;
  font-weight: 300; font-size: .88rem; color: var(--dim-2); }

/* ── کوئیز ────────────────────────────────────────────────────────────────── */

/* دکمهٔ کوئیز، تنها دکمهٔ لعابیِ صفحه است — تا میان ابزارها گم نشود. */
.btn--quiz {
  background: linear-gradient(180deg, #1C9095, #14686D);
  border-color: #2FB3B8; color: #F2FBFA; font-weight: 700;
}
.btn--quiz:hover { border-color: var(--zard); color: #fff; }

.qz {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  padding: clamp(.6rem, 2.5vh, 2rem) clamp(.6rem, 3vw, 2rem);
  background: #04060Ceb;
  backdrop-filter: blur(9px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--slide);
}
.qz.is-open { opacity: 1; pointer-events: auto; }

.qz__box {
  width: min(920px, 100%); max-height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--kiln-2);
  border: 1px solid var(--kiln-3);
  border-radius: 4px;
  box-shadow: 0 30px 90px #000000a6;
  overflow: hidden;
  transform: translate3d(0, 14px, 0) scale(.985);
  transition: transform .38s var(--slide);
  will-change: transform;
}
.qz.is-open .qz__box { transform: translate3d(0, 0, 0) scale(1); }

.qz__top {
  flex: none; display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--kiln-3);
  background: #0B1120;
  /* گره‌چینی اینجا زیرِ نام می‌افتاد و می‌خوردش. سرِ کوئیز ساده می‌ماند و
     نقشِ کاشی را رنگ‌های سه‌گانهٔ سختی و خودِ کاشی‌ها می‌زنند. */
  box-shadow: inset 0 -1px 0 #B98B3E38;
}
.qz__brand {
  margin: 0 auto; font-weight: 800; font-size: .84rem;
  color: var(--zard); letter-spacing: .03em;
  text-shadow: 0 1px 3px #000;
}
.qz__back, .qz__x {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .34rem .55rem;
  font: inherit; font-weight: 500; font-size: .8rem;
  background: #0A0F1Ecc; border: 1px solid var(--kiln-3); border-radius: 2px;
  color: var(--dim); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.qz__back svg, .qz__x svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.qz__back:hover, .qz__x:hover { color: var(--biscuit); border-color: var(--brass); }
.qz__back[hidden] { display: none; }

/* کلیدِ صدا در سرِ کوئیز — چون کوئیز تمامِ قاب را می‌گیرد و دکمهٔ گوشه زیرش است */
.qz__mute {
  width: 30px; height: 28px; display: grid; place-items: center;
  background: #0A0F1Ecc; border: 1px solid var(--kiln-3); border-radius: 2px;
  color: var(--dim); cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.qz__mute:hover { color: var(--biscuit); border-color: var(--brass); }
.qz__mute svg {
  width: 16px; height: 16px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.qz__mute svg path:first-child { fill: currentColor; }
.qz__xx { opacity: 0; }
.qz__mute.is-off { color: var(--dim-2); }
.qz__mute.is-off .qz__w { opacity: 0; }
.qz__mute.is-off .qz__xx { opacity: 1; }
.qz__w, .qz__xx { transition: opacity .22s var(--ease); }

.qz__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.qz__stage {
  padding: clamp(1.1rem, 3vw, 2rem);
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity .26s var(--ease), transform .26s var(--slide);
}
.qz__stage.is-in { opacity: 1; transform: none; }

.qz__lede { max-width: 56ch; }
.qz__h {
  margin: 0; font-weight: 950; font-size: clamp(1.4rem, 3.4vw, 1.95rem);
  letter-spacing: -.03em; color: var(--biscuit); text-wrap: balance;
}
.qz__sub {
  margin: 2rem 0 .7rem; font-weight: 800; font-size: .78rem;
  color: var(--dim-2); letter-spacing: .05em;
  padding-bottom: .4rem; border-bottom: 1px solid var(--kiln-3);
}
.qz__p {
  margin: .55rem 0 0; font-weight: 300; font-size: .87rem; line-height: 2;
  color: var(--dim);
}

/* دسته‌ها */
.qz__grid {
  margin-top: 1.5rem;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.qcat {
  display: grid; gap: .3rem; justify-items: start; text-align: start;
  padding: 1.05rem 1.1rem;
  font: inherit; color: var(--biscuit);
  background: linear-gradient(180deg, #16203688, #0A0F1Ecc);
  border: 1px solid var(--kiln-3); border-radius: 3px;
  cursor: pointer;
  transition: border-color .22s var(--ease), transform .22s var(--slide),
              background .22s var(--ease);
}
.qcat:hover {
  border-color: var(--brass); transform: translateY(-2px);
  background: linear-gradient(180deg, #1D2A46aa, #0A0F1Ecc);
}
.qcat__i {
  width: 26px; height: 26px; margin-bottom: .35rem;
  fill: none; stroke: var(--firooze); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.qcat:hover .qcat__i { stroke: var(--zard); }
.qcat__n { font-weight: 800; font-size: 1.02rem; }
.qcat__d { font-weight: 300; font-size: .8rem; line-height: 1.8; color: var(--dim); }
.qcat__m { margin-top: .4rem; font-weight: 400; font-size: .73rem; color: var(--dim-2); }
.qcat__m b { color: var(--firooze); font-weight: 700; }

/* دو کوئیزِ یک دسته */
.qz__list { margin-top: 1.4rem; display: grid; gap: .7rem; }
.qpick {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem;
  font: inherit; text-align: start; color: var(--biscuit);
  background: linear-gradient(180deg, #16203688, #0A0F1Ecc);
  border: 1px solid var(--kiln-3); border-radius: 3px;
  cursor: pointer;
  transition: border-color .22s var(--ease), transform .22s var(--slide);
}
.qpick:hover { border-color: var(--brass); transform: translateY(-2px); }
.qpick--hard { border-inline-end: 3px solid var(--ajori); }
.qpick__t { display: grid; gap: .2rem; min-width: 0; }
.qpick__n { font-weight: 800; font-size: 1rem; }
.qpick__s { font-weight: 300; font-size: .79rem; color: var(--dim); }
.qpick__meta { flex: none; display: grid; gap: .4rem; justify-items: end; }
.qpick__bars { display: flex; gap: 3px; }
.qpick__bars i { width: 7px; height: 16px; border-radius: 1px; display: block; }
.qpick__best { font-weight: 400; font-size: .72rem; color: var(--dim-2); }

/* دو پلهٔ سختی، دو لعاب — زردِ «سخت» و آجریِ «خیلی سخت» */
.lv1 { background: var(--zard); }
.lv2 { background: var(--ajori); }

/* نوارِ پیشرفت */
.qbar { display: flex; gap: 4px; }
.qbar__i {
  flex: 1; height: 5px; border-radius: 1px; display: block;
  opacity: .3;
  transition: opacity .25s var(--ease), background-color .25s var(--ease),
              transform .25s var(--slide);
}
.qbar__i.is-now { opacity: 1; transform: scaleY(2.2); }
.qbar__i.is-right { opacity: 1; background: var(--firooze); }
.qbar__i.is-wrong { opacity: 1; background: #8C3A2A; }

.qhead {
  margin-top: 1.1rem;
  display: flex; align-items: center; gap: .6rem;
}
.qhead__c { font-weight: 400; font-size: .76rem; color: var(--dim-2); }
.qchip {
  margin-inline-start: auto;
  padding: .16rem .55rem; border-radius: 2px;
  font-weight: 700; font-size: .7rem; color: #0B0906;
}
.qchip.lv2 { color: #FFEFE8; }

.qz__q {
  margin: .8rem 0 0; font-weight: 800; font-size: clamp(1.12rem, 2.7vw, 1.45rem);
  line-height: 1.75; letter-spacing: -.02em; color: var(--biscuit);
  text-wrap: balance;
}

/* پرچمِ پرسش — بزرگ، در قابِ گچی، تا جزئیاتش دیده شود */
.qflag {
  margin: 1.2rem 0 0; padding: .8rem;
  display: grid; place-items: center;
  background: var(--plaster-2);
  border: 1px solid #00000040; border-radius: 3px;
}
.qflag img {
  display: block; width: min(340px, 100%); height: clamp(130px, 26vh, 200px);
  object-fit: contain;
  filter: drop-shadow(0 6px 16px #0000006b);
}

.qopts { margin-top: 1.2rem; display: grid; gap: .55rem; }
.qopt {
  display: flex; align-items: center; gap: .7rem;
  padding: .78rem .9rem;
  font: inherit; font-weight: 500; font-size: .95rem; text-align: start;
  color: var(--biscuit);
  background: #101728cc;
  border: 1px solid var(--kiln-3); border-radius: 3px;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease),
              transform .18s var(--slide), opacity .25s var(--ease);
}
.qopt:hover:not(:disabled) { border-color: var(--brass); background: #1B2740cc; transform: translateY(-1px); }
.qopt:disabled { cursor: default; }
.qopt__k {
  flex: none; width: 22px; height: 22px; display: grid; place-items: center;
  font-weight: 700; font-size: .72rem; color: var(--dim-2);
  border: 1px solid var(--kiln-3); border-radius: 2px;
}
.qopt__l { min-width: 0; }
.qopt.is-right {
  border-color: var(--firooze); background: #103A3Ccc; color: #E6FBFA;
}
.qopt.is-right .qopt__k { border-color: var(--firooze); color: var(--firooze); }
.qopt.is-wrong { border-color: #8C3A2A; background: #331610cc; color: #FBE4DC; }
.qopt.is-dim { opacity: .38; }

/* گزینه‌های پرچمی — چهار کاشیِ تصویری */
.qopts--flags { grid-template-columns: 1fr 1fr; gap: .6rem; }
.qopt--flag { flex-direction: column; align-items: stretch; gap: .5rem; padding: .6rem; }
.qopt--flag img {
  display: block; width: 100%; height: clamp(74px, 13vh, 104px);
  object-fit: contain;
  background: #0000002e; border-radius: 2px; padding: .3rem;
}
/* زیرِ پرچم فقط شمارهٔ گزینه می‌نشیند؛ نامِ کشور همان پاسخ است */
.qopt--flag .qopt__k { margin-inline: auto; }

/* پس از پاسخ */
.qfoot { margin-top: 1.1rem; display: grid; gap: .9rem; }
.qsay {
  padding: .85rem 1rem; border-radius: 3px;
  border-inline-end: 3px solid var(--firooze);
  background: #0C1B2Ecc;
  animation: qsay .3s var(--slide);
}
.qsay.is-wrong { border-inline-end-color: var(--ajori); background: #23110Ccc; }
@keyframes qsay { from { opacity: 0; transform: translateY(6px); } }
.qsay__h { margin: 0; font-weight: 800; font-size: .93rem; color: var(--firooze); }
.qsay.is-wrong .qsay__h { color: #E58A66; }
.qsay__n {
  margin: .4rem 0 0; font-weight: 300; font-size: .84rem; line-height: 1.95;
  color: var(--dim);
}

.qnext {
  justify-self: start;
  padding: .65rem 1.4rem;
  font: inherit; font-weight: 700; font-size: .9rem;
  color: #06110F;
  background: var(--firooze);
  border: 1px solid var(--firooze); border-radius: 2px;
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--slide);
}
.qnext:hover { background: #2AAFB4; transform: translateY(-1px); }
.qnext--ghost { background: none; color: var(--dim); border-color: var(--kiln-3); }
.qnext--ghost:hover { background: #ffffff10; color: var(--biscuit); border-color: var(--brass); }

/* نتیجه */
.qz__view--res { text-align: center; display: grid; justify-items: center; }
.qz__view--res .qz__p { text-align: center; }
.qmedal { position: relative; width: 132px; height: 132px; margin-bottom: 1rem; }
.qmedal svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qmedal circle { fill: none; stroke-width: 8; stroke-linecap: round; }
.qmedal__t { stroke: var(--kiln-3); }
.qmedal__v { stroke: var(--firooze); transition: stroke-dashoffset 1s var(--slide); }
.qmedal__n {
  position: absolute; inset: 0; display: grid; place-content: center;
  font-weight: 950; font-size: 2rem; color: var(--biscuit); letter-spacing: -.03em;
}
.qmedal__n i { font-style: normal; font-weight: 300; font-size: 1rem; color: var(--dim-2); }

.qtiers { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.qtier {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .8rem; border-radius: 2px;
  background: #101728; border: 1px solid var(--kiln-3);
  border-inline-end-width: 3px;
}
.qtier.lv1 { background: #101728; border-inline-end-color: var(--zard); }
.qtier.lv2 { background: #101728; border-inline-end-color: var(--ajori); }
.qtier__n { font-weight: 500; font-size: .78rem; color: var(--dim); }
.qtier__v { font-weight: 800; font-size: .84rem; color: var(--biscuit); }

.qrev { display: grid; gap: .3rem; width: 100%; text-align: start; }
.qrev__r {
  display: flex; align-items: baseline; gap: .8rem; justify-content: space-between;
  padding: .5rem .75rem; border-radius: 2px;
  background: #0D1424;
  border-inline-end: 3px solid var(--firooze);
}
.qrev__r.is-wrong { border-inline-end-color: var(--ajori); background: #1A0F0C; }
.qrev__q { font-weight: 300; font-size: .8rem; line-height: 1.8; color: var(--dim); min-width: 0; }
.qrev__f {
  flex: none; width: 46px; height: 30px; object-fit: contain;
  background: #00000033; border-radius: 2px; padding: 2px;
}
.qrev__a { flex: none; font-weight: 700; font-size: .82rem; color: var(--biscuit); }

.qacts { margin-top: 1.6rem; display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.qacts .qnext { justify-self: center; }

/* ── تنظیم صدا ────────────────────────────────────────────────────────────── */

.snd {
  position: fixed; z-index: 30;
  inset-block-end: clamp(1.1rem, 3vh, 2rem);
  inset-inline-end: clamp(1.1rem, 3vw, 2.6rem);
  display: grid; justify-items: end; gap: .5rem;
}
.snd__b {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: linear-gradient(180deg, #16203699, #0A0F1Ecc);
  backdrop-filter: blur(6px);
  border: 1px solid var(--kiln-3); border-radius: 2px;
  color: var(--dim); cursor: pointer;
  box-shadow: 0 2px 10px #0000005e;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.snd__b:hover { color: var(--biscuit); border-color: var(--brass); }
.snd__ico {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.snd__ico path:first-child { fill: currentColor; stroke-linejoin: round; }
.snd__x { opacity: 0; }
/* خاموش که شد، موج‌ها می‌روند و ضربدر می‌آید — یک نگاه، و معلوم است */
.snd.is-off .snd__b { color: var(--dim-2); }
.snd.is-off .snd__w1, .snd.is-off .snd__w2 { opacity: 0; }
.snd.is-off .snd__x { opacity: 1; }
.snd__w1, .snd__w2, .snd__x { transition: opacity .22s var(--ease); }

.snd__pop {
  width: 272px;
  padding: .85rem .95rem;
  background: #0B1120f2;
  backdrop-filter: blur(10px);
  border: 1px solid var(--kiln-3); border-radius: 3px;
  box-shadow: 0 20px 50px #000000a1;
  /* ستونِ auto در گرید به max-content میل می‌کند و لغزنده max-content خودش را
     دارد؛ نتیجه، سرریزِ پنجره از لبهٔ قاب بود. minmax(0,1fr) ستون را به پهنای
     پنجره می‌بندد و لغزنده همان‌قدر می‌شود که جا هست. */
  display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem;
  order: -1;
  transform-origin: bottom left;
  animation: sndin .24s var(--slide);
}
@keyframes sndin { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.snd__pop[hidden] { display: none; }
.snd__head { display: flex; align-items: center; justify-content: space-between; }
.snd__t { font-weight: 800; font-size: .86rem; color: var(--biscuit); }
.snd__sep { height: 1px; background: var(--kiln-3); margin: .1rem 0; }

.snd__row { display: flex; align-items: center; gap: .55rem; }
.snd__l { flex: none; width: 4.6rem; font-weight: 400; font-size: .78rem; color: var(--dim); }
.snd__l--sub { font-weight: 300; font-size: .74rem; color: var(--dim-2); }
.snd__row--sw { justify-content: space-between; }
.snd__row--sw .snd__l { width: auto; }
.snd__o { flex: none; width: 2.3rem; text-align: end; font-size: .72rem; color: var(--dim-2); font-variant-numeric: tabular-nums; }

/* لغزنده — کاشیِ برنجی روی شیارِ گِلی */
.snd__r {
  flex: 1; min-width: 0; height: 20px;
  -webkit-appearance: none; appearance: none;
  background: none; cursor: pointer;
}
.snd__r::-webkit-slider-runnable-track {
  height: 3px; border-radius: 2px;
  background: linear-gradient(to left, var(--firooze) var(--fill, 50%), var(--kiln-3) var(--fill, 50%));
}
.snd__r::-moz-range-track { height: 3px; border-radius: 2px; background: var(--kiln-3); }
.snd__r::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--firooze); }
.snd__r::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -5px;
  background: var(--brass); border: 0; border-radius: 1px;
  transform: rotate(45deg);
  transition: background .18s var(--ease);
}
.snd__r::-moz-range-thumb {
  width: 11px; height: 11px; background: var(--brass); border: 0; border-radius: 1px;
}
.snd__r:hover::-webkit-slider-thumb { background: var(--zard); }
.snd__r:disabled { opacity: .35; cursor: default; }

/* کلیدِ قطع‌ووصل */
.snd__sw {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .2rem .45rem .2rem .2rem;
  font: inherit; font-weight: 500; font-size: .74rem; color: var(--dim);
  background: #ffffff0a; border: 1px solid var(--kiln-3); border-radius: 2px;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.snd__knob {
  position: relative; flex: none;
  width: 26px; height: 14px; border-radius: 2px;
  background: var(--kiln-3);
  transition: background .22s var(--ease);
}
/* کاشیِ کلید از «آغاز» به «پایان» می‌رود. با transform ثابت نمی‌شد: در چیدمانِ
   راست‌چین، inline-end همان لبهٔ چپ است و translateX منفی کاشی را از شیار
   بیرون می‌انداخت. آفستِ منطقی هم می‌لغزد، هم جهت را خودش می‌فهمد. */
.snd__knob::after {
  content: ''; position: absolute; inset-block: 2px; inset-inline-start: 2px;
  width: 10px; border-radius: 1px; background: var(--dim-2);
  transition: inset-inline-start .22s var(--slide), background .22s var(--ease);
}
.snd__sw[aria-checked="true"] { color: var(--biscuit); border-color: #2A5F63; }
.snd__sw[aria-checked="true"] .snd__knob { background: #14494D; }
.snd__sw[aria-checked="true"] .snd__knob::after {
  inset-inline-start: 14px; background: var(--firooze);
}
.snd__sw--sm { padding: .2rem; }

.snd__seg { display: flex; gap: .3rem; margin-top: .15rem; }
.snd__seg button {
  flex: 1; padding: .35rem .2rem;
  font: inherit; font-weight: 500; font-size: .74rem; color: var(--dim-2);
  background: #ffffff08; border: 1px solid var(--kiln-3); border-radius: 2px;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.snd__seg button:hover { color: var(--biscuit); }
.snd__seg button.is-on {
  color: #06110F; background: var(--firooze); border-color: var(--firooze); font-weight: 700;
}
.snd__seg button:disabled { opacity: .4; cursor: default; }

/* پاصفحه از لبهٔ راست شروع می‌شود و صدا در لبهٔ چپ نشسته؛ مهار می‌کنیم
   تا روی صفحه‌های میانی به هم نرسند */
.foot { max-width: min(38ch, calc(100% - 12rem)); }

/* ── نمایشگرهای کوچک ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .mast__d { display: none; }
  .tools { flex-direction: row; align-items: flex-start; }
  .btn span { display: none; }
  .btn { padding: .62rem; }
  /* در نوار افقی، ستونِ بزرگ‌نمایی هم افقی می‌شود تا ارتفاع نگیرد.
     اینجا محورِ عمودی است، پس هم‌ترازی باید به بالا برگردد نه به چپ. */
  .zoom { flex-direction: row; margin-top: 0; align-self: flex-start; }
  .zoom__b + .zoom__b { border-top: 0; border-inline-start: 1px solid var(--kiln-3); }
  .zoom__b { width: 38px; height: 38px; }

  /* کتیبه که باز است، سرصفحه پشتِ گنبدِ کوچک‌شده گم می‌شود؛ کنارش می‌گذاریم */
  body.has-panel .mast { opacity: 0; }
  .mast { transition: opacity .4s var(--ease); }

  /* روی موبایل کتیبه از پایین بالا می‌آید و گره‌چینی می‌شود سردرش */
  .panel {
    inset-block-start: auto; inset-inline: 0;
    width: 100%; height: 76dvh;
    transform: translate3d(0, 100%, 0);
    border-start-start-radius: 6px; border-start-end-radius: 6px;
    box-shadow: 0 -20px 60px #00000080;
    padding-block-start: 34px;
  }
  .panel.is-open { transform: translate3d(0, 0, 0); }
  .panel::before {
    inset: 0 0 auto 0; width: auto; height: 34px;
    background: var(--girih) repeat-x center / 34px 34px, var(--kiln);
    border: 0; border-bottom: 1px solid #00000038;
    border-start-start-radius: 6px; border-start-end-radius: 6px;
  }
  .panel__x { inset-block-start: calc(34px + .6rem); }
  .panel__body { padding: 1.4rem 1.2rem 2.4rem; }
  .foot { inset-inline-start: 1rem; inset-block-end: 1rem; max-width: calc(100% - 5rem); }
  .readout { inset-block-end: 5.2rem; }
  .medal { width: 72px; height: 72px; }
  .row { grid-template-columns: 7.2rem 1fr; }

  /* ── کوئیز روی گوشی: کتیبه تمام‌صفحه می‌شود، نه کارتی وسطِ قاب ───────────── */
  .qz { padding: 0; }
  .qz__box {
    width: 100%; height: 100%; max-height: none;
    border: 0; border-radius: 0;
    transform: translate3d(0, 22px, 0);
  }
  .qz.is-open .qz__box { transform: none; }
  .qz__top { padding: .6rem .7rem; padding-block-start: max(.6rem, env(safe-area-inset-top)); }
  .qz__brand { font-size: .78rem; }
  .qz__back span { display: none; }
  .qz__scroll { -webkit-overflow-scrolling: touch; }
  .qz__stage { padding: 1rem .9rem calc(1.6rem + env(safe-area-inset-bottom)); }
  .qz__grid { grid-template-columns: 1fr; gap: .55rem; }
  .qcat { padding: .85rem .95rem; }
  .qpick { padding: .85rem .95rem; gap: .7rem; }
  .qpick__bars i { width: 5px; height: 13px; }
  .qpick__best { font-size: .68rem; }
  .qz__q { font-size: 1.08rem; line-height: 1.7; }
  /* دستِ شست به پایینِ صفحه نزدیک‌تر است تا به بالا: گزینه‌ها درشت‌اند */
  .qopt { padding: .85rem .8rem; font-size: .92rem; min-height: 48px; }
  .qopts--flags { gap: .5rem; }
  .qopt--flag img { height: 68px; }
  .qflag { padding: .6rem; }
  .qflag img { height: clamp(110px, 20vh, 160px); }
  .qnext { width: 100%; justify-self: stretch; text-align: center; padding: .8rem 1rem; }
  .qacts { flex-direction: column; align-items: stretch; }
  .qmedal { width: 112px; height: 112px; }
  .qmedal__n { font-size: 1.7rem; }
  .qrev__r { flex-direction: column; gap: .2rem; }
  .qrev__a { align-self: flex-start; }

  /* ── صدا روی گوشی ─────────────────────────────────────────────────────── */
  .snd { inset-inline-end: 1rem; inset-block-end: 1rem; }
  .snd__b { width: 38px; height: 38px; }
  .snd__pop {
    /* پنجرهٔ ۲۶۲ پیکسلی روی گوشیِ باریک از قاب می‌زند بیرون؛ اینجا پهنایش را
       به قاب می‌بندیم و از همان گوشه بالا می‌آید */
    position: fixed;
    inset-inline: auto 1rem; inset-block-end: 4rem;
    width: min(300px, calc(100vw - 2rem));
  }
  /* کتیبه که باز است، دکمهٔ صدا زیرش می‌ماند و بی‌فایده است */
  body.has-panel .snd, body.has-quiz .snd { opacity: 0; pointer-events: none; }
  .snd { transition: opacity .3s var(--ease); }
}

/* گوشی‌های خیلی باریک — نوارِ ابزار با شش دکمه تا زیرِ «گیتانما» می‌رسید و
   نامِ سایت را می‌پوشاند. بزرگ‌نمایی می‌رود سطر دوم: ستونِ ابزار باریک می‌ماند
   و نام، دست‌نخورده. */
@media (max-width: 430px) {
  .tools {
    gap: .4rem;
    flex-wrap: wrap; justify-content: flex-end; align-content: flex-start;
    max-width: 8.6rem;
  }
  .btn { padding: .55rem; }
  .zoom { margin-inline-start: auto; }
  .zoom__b { width: 34px; height: 34px; }
  .mast__h { font-size: 2.1rem; }
  .qopt--flag img { height: 58px; }
}

/* قابِ کوتاه و پهن (گوشیِ خوابیده): کوئیز نباید عمودی دراز شود */
@media (max-height: 560px) and (min-width: 640px) {
  .qflag img { height: 110px; }
  .qopt--flag img { height: 56px; }
  .qz__stage { padding-block: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── تشخیص ──────────────────────────────────────────────────────────────────
   دو چیزی که فقط وقت خرابی دیده می‌شوند: پیامِ خرابی، و جدولِ ?debug=1 .
   هیچ‌کدام جزو اثر نیستند، پس ساده‌اند و از همه‌چیز بالاترند. */
.trouble {
  position: fixed; inset-inline: 1rem; bottom: 1rem; z-index: 9999;
  background: #2A1410; border: 1px solid #7A3B2E; border-radius: .7rem;
  padding: .9rem 1.1rem; color: #F2E3D2; font: 400 .95rem/1.7 'IranYekan', sans-serif;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.trouble__t { font-weight: 800; margin: 0 0 .25rem; }
.trouble__d { margin: 0; opacity: .82; font-size: .86rem; }

.dbg {
  position: fixed; inset-block-start: 1rem; inset-inline-start: 1rem; z-index: 9999;
  display: grid; grid-template-columns: auto auto; gap: .2rem .9rem;
  max-width: min(24rem, calc(100vw - 2rem));
  background: rgba(10,14,26,.94); border: 1px solid #2C3B57; border-radius: .7rem;
  padding: .8rem 1rem; color: #DCE6F5;
  font: 400 .8rem/1.65 'IranYekan', sans-serif; direction: rtl;
}
.dbg b { grid-column: 1 / -1; font-weight: 800; color: #7FD4D8; margin-bottom: .3rem; }
.dbg span:nth-child(even) { color: #9FB4D0; overflow-wrap: anywhere; }