/* Flash-card quiz (quiz.js) — inside the Game section, same night-sky + parchment look. */
.qz-lead { margin-top: 0; }
.qz-small { font-weight: 500; font-size: 14px; }
.qz-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #e8dcc0; font-size: 14px; }
.qz-stats b { color: #f3c862; }
.qz-levels { display: flex; flex-direction: column; gap: 10px; }
.qz-level { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; cursor: pointer; font: inherit; color: var(--ink); min-height: 76px; }
.qz-level.on { outline: 3px solid #f3c862; box-shadow: 0 0 22px #ffbf4a88, inset 0 0 26px #c9a76a44; }
.qz-lv-i { font-size: 30px; flex: none; }
.qz-lv-t { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.qz-lv-t b { font: 600 1.2rem var(--serif); } .qz-lv-t small { color: #6b5a40; font-size: 13px; }
.qz-bar { display: block; height: 6px; border-radius: 6px; background: #0002; overflow: hidden; }
.qz-bar i { display: block; height: 100%; background: linear-gradient(90deg, #c8962e, #f3c862); border-radius: 6px; }
.qz-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qz-cat { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; padding: 8px 10px; border-radius: 12px; border: 1px solid #c9b07a; background: #fffaf0; color: var(--ink); font: 14px var(--sans); text-align: left; cursor: pointer; touch-action: manipulation; }
.qz-cat > span:first-child { font-size: 20px; line-height: 1; }
.qz-cat b { font-weight: 600; line-height: 1.2; } .qz-cat small { color: #6b5a40; font-size: 12px; } .qz-cat .qz-bar { width: 100%; height: 4px; }
.qz-cat.on { background: #2c3e75; border-color: #f3c862; color: #fff6e6; box-shadow: 0 0 12px #ffbf4a66; } .qz-cat.on small { color: #e8dcc0; }
.qz-all { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 48px; }
.qz-seg { display: flex; gap: 6px; margin: 8px 0; } .qz-seg .gm-btn { flex: 1; padding: 8px 4px; }
.qz-seg .gm-btn.on, .hm-seg .gm-btn.on { background: #2c3e75; color: #fff6e6; border-color: #f3c862; }
.qz-mc { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; cursor: pointer; }
.qz-mc input { width: 22px; height: 22px; accent-color: #8a5a32; }
/* play */
.qz-playv { min-height: calc(100vh - 24px); min-height: calc(100dvh - 24px); }
.qz-score { color: #f3c862; font-weight: 700; font-size: 15px; white-space: nowrap; }
.qz-prog { display: flex; align-items: center; gap: 10px; color: #e8dcc0; font-size: 14px; }
.qz-prog .qz-bar { flex: 1; background: #fff2; }
.qz-run { min-width: 44px; text-align: right; } .qz-run.hot { color: #ffbf4a; text-shadow: 0 0 10px #ff9f2a; }
.qz-stage { perspective: 1400px; flex: 1; display: flex; align-items: stretch; min-height: 300px; }
.qz-card { position: relative; width: 100%; min-height: 300px; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.3, .7, .3, 1); cursor: pointer; border-radius: 18px; touch-action: pan-y; outline: none; }
.qz-card:focus-visible { box-shadow: 0 0 0 3px #f3c862; }
.qz-card.flipped { transform: rotateY(180deg); }
.qz-card.qz-out-r { transform: rotateY(180deg) translateX(-120%) rotate(-8deg); opacity: 0; transition: transform .26s ease-in, opacity .26s; }
.qz-card.qz-out-l { transform: rotateY(180deg) translateX(120%) rotate(8deg); opacity: 0; transition: transform .26s ease-in, opacity .26s; }
.qz-face { position: absolute; inset: 0; touch-action: pan-y; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 18px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; overflow: auto;
  background: linear-gradient(180deg, #f8f0dc, #efe2c3); border: 1px solid #c9b07a; box-shadow: 0 10px 30px #000a, inset 0 0 30px #c9a76a55; color: var(--ink); }
.qz-front { justify-content: center; }
.qz-back { transform: rotateY(180deg); background: linear-gradient(180deg, #fbf5e6, #f1e6cb); }
.qz-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7a4a2a; background: #f3c86233; border: 1px solid #d9b35a; border-radius: 10px; padding: 2px 8px; }
.qz-front .qz-tag { position: absolute; top: 14px; left: 16px; }
.qz-q { font: 500 1.45rem/1.35 var(--serif); margin: 18px 0 0; text-align: center; }
.qz-tap { text-align: center; color: #8a7350; font-size: 14px; margin: 6px 0 0; }
.qz-a { font: 700 1.5rem/1.3 var(--serif); margin: 2px 0; color: #5a3519; }
.qz-pick { margin: 0; font-weight: 600; font-size: 14px; } .qz-pick.ok { color: #2d6a27; } .qz-pick.bad { color: #9a2e12; }
.qz-verse { border-top: 1px dashed #c9b07a; padding-top: 8px; }
.qz-ref { min-height: 44px; padding: 6px 12px; border-radius: 22px; border: 1px solid #b39a68; background: #fffaf0; color: #5a3519; font: 600 15px var(--sans); cursor: pointer; }
.qz-ref small { color: #8a7350; font-weight: 500; }
.qz-vt { font: 1.06rem/1.55 var(--serif); margin: 8px 0 0; }
.qz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.qz-opt { min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid #b39a68; background: #fffaf0; color: var(--ink); font: 15px var(--sans); text-align: left; cursor: pointer; touch-action: manipulation; }
.qz-opt.ok { background: #d9f0d2; border-color: #2d6a27; } .qz-opt.bad { background: #f8d9cf; border-color: #9a2e12; }
.qz-act { display: flex; gap: 10px; min-height: 56px; }
.qz-act .gm-btn { flex: 1; min-height: 56px; font-size: 17px; }
.qz-act .gm-big { margin: 0; }
.qz-not { background: #fff1e6; border-color: #c97a50; color: #7a2e0e; }
.qz-keys { text-align: center; margin: 0; }
@media (pointer: coarse) { .qz-keys { display: none; } }
/* summary */
.qz-big { font: 1.4rem var(--serif); margin: 4px 0; } .qz-big b { font-size: 2.4rem; color: #7a4a2a; }
.qz-sumline { margin: 0; color: #6b5a40; }
.qz-by, .qz-miss { list-style: none; padding: 0; margin: 6px 0 0; }
.qz-by li { display: grid; grid-template-columns: 1fr auto 3.2em; gap: 8px; padding: 7px 0; border-bottom: 1px dashed #d7c49a; font-size: 14px; }
.qz-k { color: #2d6a27; font-weight: 600; } .qz-n { color: #9a2e12; font-weight: 600; text-align: right; }
.qz-miss li { display: flex; flex-direction: column; gap: 2px; padding: 7px 0; border-bottom: 1px dashed #d7c49a; font-size: 14px; } .qz-miss small { color: #6b5a40; }
/* home panel cards for the extra modes (quiz, hangman, lots) */
.gm-modecard { display: flex; align-items: center; gap: 12px; }
.gm-modecard .gm-mi { font-size: 34px; flex: none; width: 48px; text-align: center; }
.gm-modecard .gm-mt { flex: 1; min-width: 0; } .gm-modecard .gm-mt p { margin: 2px 0 0; font-size: 14px; color: #6b5a40; }
.gm-modecard .gm-btn { flex: none; }
/* dark theme */
html:not(.light) .qz-level, html:not(.light) .qz-face, html:not(.light) .gm-modecard { color: #f1e6cf; }
html:not(.light) .qz-lv-t small, html:not(.light) .qz-cat small, html:not(.light) .qz-sumline, html:not(.light) .qz-miss small, html:not(.light) .gm-modecard .gm-mt p { color: #cdb98f; }
html:not(.light) .qz-cat, html:not(.light) .qz-opt, html:not(.light) .qz-ref { background: #221d12; border-color: #6a5530; color: #f1e6cf; }
html:not(.light) .qz-cat.on { background: #2c3e75; border-color: #f3c862; }
html:not(.light) .qz-face { background: linear-gradient(180deg, #221d12, #1a160d); border-color: #6a5530; box-shadow: 0 10px 30px #000c, inset 0 0 30px #00000055; }
html:not(.light) .qz-a, html:not(.light) .qz-big b { color: #f3c862; }
html:not(.light) .qz-tag { color: #f3d79a; }
html:not(.light) .qz-tap, html:not(.light) .qz-ref small { color: #cdb98f; }
html:not(.light) .qz-opt.ok { background: #1f3a1c; border-color: #6fbf62; } html:not(.light) .qz-opt.bad { background: #44201a; border-color: #d9775a; }
html:not(.light) .qz-pick.ok, html:not(.light) .qz-k { color: #9fd89a; } html:not(.light) .qz-pick.bad, html:not(.light) .qz-n { color: #f0a088; }
html:not(.light) .qz-not { background: #3a2016; border-color: #c97a50; color: #ffd9c6; }
html:not(.light) .qz-by li, html:not(.light) .qz-miss li, html:not(.light) .qz-verse { border-color: #4a3c22; }
@media (max-height: 460px) and (orientation: landscape) {
  .qz-stage, .qz-card { min-height: 210px; } .qz-q { font-size: 1.2rem; margin-top: 10px; } .qz-act, .qz-act .gm-btn { min-height: 48px; }
  .qz-playv { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-card { transition: none; transform: none !important; }
  .qz-card.flipped .qz-front { display: none; } .qz-card:not(.flipped) .qz-back { display: none; }
  .qz-back { transform: none; }
}
.gm-modecard a.gm-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.hm-kb { max-width: 480px; width: 100%; margin: 0 auto; }
@media (pointer: fine) and (min-height: 600px) { .qz-playv { min-height: 0; } .qz-stage, .qz-card { min-height: 380px; } }