/* Classic quizzes, Guess the Battle and Which Commander Are You? (web/blog + web/pl/blog): the one
   stylesheet of the quiz box (round 4 of the games audit: it used to be pasted inline into 34 pages
   and drifted). The article rules (.crumb, .prose ...) stay inline with every article.
   Buttons are the site's .btn-primary / .btn-ghost family; answer options stay cards.
   Right / wrong colours are site.css's brand-metal tokens (--ok, --ok-line, --ok-bg, --no ...). */
:root { --on-gold:#17130a; }
#quiz { border:1px solid var(--gold-line); border-radius:20px; background:linear-gradient(180deg,var(--card-2),var(--card)); padding:34px 30px 30px; box-shadow:0 40px 90px -55px var(--gold-glow); position:relative; overflow:hidden; margin:1.6rem 0 2.2rem; }
#quiz::before { content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
#quiz .kicker { font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); text-align:center; }
#quiz .qz-h { font-family:var(--font-display); font-size:clamp(1.6rem,5vw,2.1rem); line-height:1.15; margin:.5rem 0 .3rem; text-align:center; color:var(--text); }
#quiz .qz-h .em { color:var(--gold-bright); font-style:italic; }
#quiz .sub { color:var(--muted); text-align:center; font-size:1rem; line-height:1.65; max-width:480px; margin:0 auto 1.3rem; }
#quiz .medallions { display:flex; justify-content:center; margin:1.3rem 0; }
#quiz .medallions img { width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); margin-left:-12px; box-shadow:0 6px 14px -6px #000, inset 0 2px 5px rgba(255,255,255,.15), inset 0 -4px 8px rgba(0,0,0,.5); }
#quiz .medallions img:first-child { margin-left:0; }
#quiz .center { text-align:center; }
#quiz .topbar { display:flex; align-items:center; gap:.8rem; margin-bottom:1.3rem; }
#quiz .bar { flex:1; height:6px; border-radius:4px; background:var(--gold-line); overflow:hidden; }
#quiz .bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--gold),var(--gold-bright)); border-radius:4px; transition:width .35s ease; }
#quiz .qnum { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); white-space:nowrap; }
#quiz .scene { font-family:var(--font-body); font-size:clamp(1.1rem,3.2vw,1.28rem); line-height:1.6; text-align:center; margin:0 auto 1.4rem; max-width:520px; color:var(--text); font-style:italic; }
#quiz .scene-img { display:block; width:100%; max-width:560px; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:14px; border:1px solid var(--gold-line); margin:0 auto 1.1rem; background:var(--card-2); }
#quiz .qlead { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); text-align:center; margin-bottom:.9rem; }
#quiz .opts { display:grid; gap:.6rem; }
#quiz .opt { display:flex; align-items:center; justify-content:center; text-align:center; cursor:pointer; border:1px solid var(--gold-line); border-radius:14px; background:rgba(255,255,255,.02); padding:.95rem 1.05rem; color:var(--text); font-size:1rem; font-family:var(--font-display); line-height:1.3; transition:border-color .18s,background .18s,transform .12s; }
#quiz .opt:hover:not(:disabled) { border-color:var(--gold); background:var(--gold-soft); transform:translateY(-1px); }
#quiz .opt:disabled { cursor:default; }
#quiz .opt.correct { border-color:var(--ok-line); background:var(--ok-bg); color:var(--ok-ink); box-shadow:0 0 18px -8px var(--ok-glow); }
#quiz .opt.wrong { border-color:var(--no-line); background:var(--no-bg); color:var(--no-ink); }
#quiz .opt.correct::after, #quiz .opt.wrong::after { flex:none; margin-left:.55rem; font-family:var(--font-mono); font-weight:700; }
#quiz .opt.correct::after { content:"\2713"; content:"\2713" / ""; color:var(--ok); }
#quiz .opt.wrong::after { content:"\2717"; content:"\2717" / ""; color:var(--no); }
#quiz .opt.dim { opacity:.5; }
#quiz .feedback { margin:1.2rem auto 0; max-width:520px; text-align:center; }
#quiz .feedback .verdict { font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
#quiz .feedback .verdict.ok { color:var(--ok); } #quiz .feedback .verdict.no { color:var(--no); }
#quiz .feedback .fact { color:var(--muted); line-height:1.6; margin:.5rem 0 .9rem; }
#quiz .feedback a.read { color:var(--gold); text-decoration:none; font-size:.9rem; display:inline-block; padding:.7rem 0; } #quiz .feedback a.read:hover { text-decoration:underline; }
#quiz .nextrow { text-align:center; margin-top:1.2rem; }
#quiz .res-eyebrow { font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); text-align:center; margin-top:.4rem; }
#quiz .res-score { font-family:var(--font-display); font-size:3.4rem; text-align:center; color:var(--gold-bright); line-height:1; margin:.4rem 0 .1rem; }
#quiz .res-score small { font-size:1.3rem; color:var(--muted); }
#quiz .res-rank { font-family:var(--font-display); font-size:1.7rem; text-align:center; color:var(--text); margin:.2rem 0; }
#quiz .res-note { color:var(--muted); text-align:center; line-height:1.6; max-width:460px; margin:.3rem auto 1.3rem; }
#quiz .revisit { border:1px solid var(--gold-line); border-radius:14px; background:var(--card-2); padding:.6rem 1rem; margin:0 auto 1.3rem; max-width:420px; }
#quiz .revisit h4 { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:.3rem 0 .2rem; text-align:center; }
#quiz .revisit a { display:block; color:var(--gold-bright); text-decoration:none; padding:.32rem 0; text-align:center; font-family:var(--font-display);  min-height:44px; display:flex; align-items:center; justify-content:center; }
#quiz .revisit a:hover { text-decoration:underline; }
#quiz .res-actions { display:flex; flex-direction:column; gap:.65rem; align-items:stretch; max-width:340px; margin:0 auto; }
#quiz .share-nudge { text-align:center; color:var(--muted); font-size:.82rem; margin:1.4rem 0 .6rem; }
#quiz .share { display:flex; gap:.6rem; justify-content:center; }
#quiz .share button { width:44px; height:44px; border-radius:50%; border:1px solid var(--gold-line); display:grid; place-items:center; color:var(--muted); cursor:pointer; background:rgba(255,255,255,.02); transition:border-color .15s,color .15s,transform .12s; }
#quiz .share button:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
#quiz .share svg { width:18px; height:18px; fill:currentColor; }
#quiz .fade { animation:qzfade .35s ease; }
@keyframes qzfade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }

/* buttons: same family as .btn-primary / .btn-ghost */
#quiz .qz-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:46px; padding:.8rem 1.4rem; border-radius:10px; border:1px solid transparent;
  font-family:var(--font-mono); font-size:.82rem; font-weight:700; line-height:1.3;
  letter-spacing:.08em; text-transform:uppercase; text-align:center; text-decoration:none;
  white-space:normal; overflow-wrap:break-word; text-wrap:balance; max-width:100%;
  color:var(--on-gold); cursor:pointer;
  background:linear-gradient(135deg,var(--gold-bright),var(--gold) 55%,var(--gold-deep));
  box-shadow:0 10px 30px -12px rgba(201,168,76,.6);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s,border-color .25s;
}
#quiz .qz-btn:hover { transform:translateY(-2px); box-shadow:0 0 34px -6px var(--gold-glow),0 16px 34px -14px rgba(201,168,76,.7); }
#quiz .qz-btn.ghost { color:var(--text); background:rgba(255,255,255,.02); border-color:var(--gold-line); box-shadow:none; }
#quiz .qz-btn.ghost:hover { border-color:var(--gold); background:var(--gold-soft); color:var(--text); }
#quiz .qz-btn:focus-visible, #quiz .opt:focus-visible, #quiz .share button:focus-visible { outline:2px solid var(--gold-bright); outline-offset:3px; }

/* Which commander are you (data-kind="persona" on its #quiz) */
#quiz .qtext { font-family:var(--font-display); font-size:clamp(1.25rem,4vw,1.5rem); line-height:1.3; text-align:center; margin:0 auto 1.4rem; max-width:490px; color:var(--text); }
#quiz[data-kind="persona"] .opts { display:grid; gap:.65rem; }
#quiz[data-kind="persona"] .opt { display:flex; align-items:center; justify-content:flex-start; gap:.9rem; text-align:left; cursor:pointer; border:1px solid var(--gold-line); border-radius:14px; background:rgba(255,255,255,.02); padding:.95rem 1.05rem; color:var(--text); font-size:1rem; font-family:var(--font-body); line-height:1.4; transition:border-color .18s,background .18s,transform .12s; }
#quiz[data-kind="persona"] .opt:hover { border-color:var(--gold); background:var(--gold-soft); transform:translateX(3px); }
#quiz[data-kind="persona"] .opt.chosen { border-color:var(--gold); background:var(--gold-soft); }
#quiz[data-kind="persona"] .opt .ico { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--gold-line); color:var(--gold); font-size:1.05rem; }
#quiz .back { display:block; margin:1.1rem auto 0; min-height:44px; padding:.6rem 1rem; background:none; border:0; color:var(--muted); font-size:.82rem; cursor:pointer; font-family:var(--font-mono); letter-spacing:.08em; }
#quiz .back:hover { color:var(--gold); }
#quiz .res-medal { width:130px; height:130px; border-radius:50%; object-fit:cover; margin:0 auto; display:block; border:3px solid var(--rc,var(--gold)); box-shadow:0 14px 30px -12px #000, 0 0 30px -6px var(--rc,var(--gold)), inset 0 3px 7px rgba(255,255,255,.2), inset 0 -5px 10px rgba(0,0,0,.55); }
#quiz .res-name { font-family:var(--font-display); font-size:2.1rem; text-align:center; color:var(--gold-bright); margin:.15rem 0; }
#quiz .res-trait { text-align:center; color:var(--gold); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; }
#quiz .res-desc { color:var(--text); opacity:.92; text-align:center; line-height:1.7; max-width:480px; margin:0 auto 1.1rem; }
#quiz .strengths { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:0 auto 1.4rem; max-width:480px; }
#quiz .strengths span { font-size:.8rem; color:var(--gold-bright); border:1px solid var(--gold-line); background:var(--card-2); border-radius:100px; padding:.35rem .8rem; }
#quiz .res-affinity { text-align:center; color:var(--muted); font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; margin:-.5rem 0 .5rem; }
#quiz .res-tally { text-align:center; color:var(--gold); font-family:var(--font-mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase; margin:0 0 1.1rem; min-height:.85rem; }
#quiz .res-tally:empty { margin:0; }
#quiz .res-shadow { display:flex; align-items:center; gap:.7rem; justify-content:center; margin:0 auto 1.3rem; padding:.65rem .9rem; max-width:340px; border:1px solid var(--gold-line); border-radius:14px; background:var(--card-2); }
#quiz .res-shadow img { width:42px; height:42px; border-radius:50%; object-fit:cover; border:1px solid var(--gold-line); flex:none; }
#quiz .res-shadow .rs-label { font-family:var(--font-mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
#quiz .res-shadow .rs-name { color:var(--gold-bright); text-decoration:none; font-family:var(--font-display); font-size:1.05rem; }
#quiz .res-shadow .rs-name:hover { text-decoration:underline; }
#quiz .res-shadow .rs-trait { display:block; color:var(--gold); font-size:.72rem; }

.qz-toast { position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px); opacity:0; background:var(--gold); color:var(--on-gold); font-weight:600; font-size:.85rem; padding:.6rem 1.1rem; border-radius:100px; transition:opacity .25s,transform .25s; pointer-events:none; z-index:9; }
.qz-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
@media(max-width:520px){ #quiz{padding:28px 20px 24px} #quiz .res-score{font-size:2.8rem} }
@media (prefers-reduced-motion: reduce){ #quiz .fade{animation:none} #quiz .bar>i, #quiz .qz-btn{transition:none} #quiz .qz-btn:hover{transform:none} }
/* phones: the quiz goes first (dispatch column is a flex box that orders .prose first); compact text-only hero */
body.dx .dx-col > #quiz { order: 0; }
body.dx:has(#quiz) .dx-hero-plain { min-height: 0; padding-top: 5.2rem; padding-bottom: 0; }
body.dx:has(#quiz) .dx-hero-plain .dx-hero-in { padding-bottom: .6rem; }
@media(max-width:520px){ #quiz .res-name{font-size:1.7rem} }
/* Until the quiz draws (empty box, then quiz.js's loading line), reserve about the height of its first
   screen so the text below does not jump (CLS, review 2026-10-31; measured 320-1280 px, EN and PL). */
#quiz:is(:empty, :has(> [role="status"]:only-child)) { min-height:max(336px, calc(560px - 48vw)); }