/* question-formats.css — panels for whoami / falsefact / order / letters / scramble (2026-10-10).
   Night world: sits on the dark question stage, accent follows the mode gel (--gm). */
.qf{width:100%;max-width:980px;margin:14px auto 0;color:#f6efe2;text-align:right;font-family:inherit}
.qf .qf-t{flex:1;min-width:0;line-height:1.55}
#question[data-qf="whoami"] #qText,#question[data-qf="falsefact"] #qText,#question[data-qf="order"] #qText{font-size:clamp(26px,3vw,46px)}
/* list formats: the short prompt reads first, the list under it */
#question[data-qf="whoami"] .qa-content,#question[data-qf="falsefact"] .qa-content,#question[data-qf="order"] .qa-content{display:flex;flex-direction:column}
#question[data-qf="whoami"] .qa-content #qVisual,#question[data-qf="falsefact"] .qa-content #qVisual,#question[data-qf="order"] .qa-content #qVisual{order:1}
#answer[data-qf="falsefact"] #aText,#answer[data-qf="order"] #aText{font-size:clamp(24px,2.6vw,40px)}

/* من أنا؟ — clue ladder */
.qf-clues{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qf-clue{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.045);border:1px dashed rgba(255,255,255,.16);font-size:clamp(16px,1.45vw,23px);color:rgba(246,239,226,.42)}
.qf-clue.is-on{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#f6efe2;animation:qfIn .35s ease-out}
.qf-clue.was-hidden{opacity:.62}
.qf-n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8em;background:rgba(255,255,255,.08);color:var(--gm,#ffd23f);border:1px solid color-mix(in srgb,var(--gm,#ffd23f) 55%,transparent)}
.qf-clue:not(.is-on) .qf-n{color:rgba(246,239,226,.45);border-color:rgba(255,255,255,.15)}
.qf-more{display:flex;align-items:center;gap:10px;margin:16px auto 0;font-size:clamp(15px,1.3vw,19px)}
.qf-more small{opacity:.7;font-weight:600}

/* واحد منهم خطأ / رتّبهم — statement rows */
.qf-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qf-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);font-size:clamp(16px,1.45vw,23px)}
.qf-tag{flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-weight:800;background:color-mix(in srgb,var(--gm,#ffd23f) 18%,transparent);color:var(--gm,#ffd23f);border:1px solid color-mix(in srgb,var(--gm,#ffd23f) 55%,transparent)}
.qf-mark{flex:0 0 auto;font-weight:800;font-size:.72em;padding:5px 12px;border-radius:999px}
.qf-item.is-true{opacity:.66}
.qf-item.is-true .qf-mark{background:rgba(62,207,142,.16);color:#7ff0b8}
.qf-item.is-false{background:rgba(255,77,90,.14);border-color:rgba(255,99,110,.6);opacity:1}
.qf-item.is-false .qf-mark{background:#ff4d5a;color:#fff}
.qf-fix{margin:14px 0 0;padding:12px 16px;border-radius:12px;background:rgba(62,207,142,.1);border:1px solid rgba(62,207,142,.35);font-size:clamp(15px,1.4vw,21px);line-height:1.6}
.qf-fix b{color:#7ff0b8}
.qf-by{margin:0 0 12px;text-align:center;font-weight:700;color:var(--gm,#ffd23f);font-size:clamp(15px,1.4vw,21px)}
.qf-list--chips{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.qf-chip{padding:14px 22px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);font-size:clamp(17px,1.65vw,25px);font-weight:700}
.qf-list--ranked .qf-item{animation:qfIn .35s ease-out both}
.qf-list--ranked .qf-item:nth-child(2){animation-delay:.08s}.qf-list--ranked .qf-item:nth-child(3){animation-delay:.16s}.qf-list--ranked .qf-item:nth-child(4){animation-delay:.24s}.qf-list--ranked .qf-item:nth-child(5){animation-delay:.32s}

/* حروف / حروف ملخبطة — letter tiles */
.qf--let,.qf--scr{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.qf-cap{font-size:clamp(14px,1.2vw,18px);color:rgba(246,239,226,.7);font-weight:600}
.qf-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;direction:rtl}
.qf-tile{display:grid;place-items:center;width:clamp(52px,5vw,78px);height:clamp(52px,5vw,78px);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid color-mix(in srgb,var(--gm,#ffd23f) 60%,transparent);color:var(--gm,#ffd23f);font-weight:900;font-size:clamp(28px,2.8vw,44px);box-shadow:0 6px 0 rgba(0,0,0,.35)}
.qf-tile--big{width:clamp(96px,9vw,140px);height:clamp(96px,9vw,140px);font-size:clamp(56px,5.4vw,88px);border-radius:22px}

@keyframes qfIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qf-clue.is-on,.qf-list--ranked .qf-item{animation:none}}
@media (max-width:700px){
  .qf{margin-top:10px}
  .qf-clue,.qf-item{padding:10px 12px;gap:10px}
  .qf-n,.qf-tag{width:30px;height:30px}
  .qf-chip{padding:10px 14px}
}


/* ♥ favourites on picker cards (picker-shelves.js) — day world */
.cat-card .cat-cover{position:relative}
.kt-fav{position:absolute;bottom:7px;inset-inline-end:7px;z-index:4;width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:rgba(251,247,238,.92);box-shadow:0 2px 8px rgba(25,19,34,.18);cursor:pointer;padding:0;transition:transform .15s}
.kt-fav svg{width:18px;height:18px;fill:none;stroke:#7a6a80;stroke-width:2}
.kt-fav.on svg{fill:#e8336f;stroke:#e8336f}
.kt-fav:hover{transform:scale(1.08)}
.kt-fav:focus-visible{outline:3px solid #7140a2;outline-offset:2px}
@media (max-width:700px){.kt-fav{width:30px;height:30px;bottom:5px;inset-inline-end:5px}.kt-fav svg{width:16px;height:16px}}