/* Bible Hub Trivia — styles (v3: owner's mockups, 2026-10-01).
   Bible Hub fonts only: Arial / Helvetica (no serif anywhere).
   Colours: Bible Hub blue #4479ba, navy headings #1b2d4f, panels #eef5fd. */

html{scroll-padding-top:56px}
#tqSection{margin:0 auto;box-shadow:1px 0 0 #e8e8e8,-1px 0 0 #e8e8e8;min-height:65vh;padding-bottom:60px}
@media(max-width:768px){#tqSection{box-shadow:none}}
#tq{max-width:940px;margin:0 auto;padding:8px 18px 0;font-family:Arial,Helvetica,sans-serif;color:#1b2d4f;text-align:left;
    --pri:#4479ba;--pri-dk:#365f97;--navy:#1b2d4f;--text:#33475f;--muted:#5d7189;--panel:#eef5fd;--panel-line:#cfe0f4;
    --line:#d5e2f0;--sel:#e6f0fc;--link:#2f6bb3;--ok:#1e7d36;--ok-bg:#e9f7ee;--bad:#b42318;--bad-bg:#fdeeec;--amber:#a85a00}
#tq *{box-sizing:border-box}
#tq [hidden]{display:none !important}
#tq a{color:var(--link)}
#tq button,#tq select,#tq input,#tq textarea{font-family:Arial,Helvetica,sans-serif}
#tq :focus-visible{outline:2px solid var(--pri);outline-offset:2px}
#tq .tq-q:focus,#tq .tq-q:focus-visible{outline:none}   /* focused for screen readers only; not clickable */
#tq svg.tq-ico{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── hero ── */
#tq .tq-hero{text-align:center;padding:4px 0 12px}
#tq .tq-hero p{font-size:18px;color:var(--muted);margin:0}
#tq .tq-hero p b{color:var(--navy)}

/* ── buttons ── */
#tq .tq-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:36px;padding:0 16px;font-size:15px;font-weight:bold;
    border-radius:7px;border:1.5px solid var(--pri);background:#fff;color:var(--pri);cursor:pointer;text-decoration:none;
    transition:background .12s,border-color .12s,color .12s,transform .05s}
#tq .tq-btn:hover{background:#f2f7fe}
#tq .tq-btn:active{transform:translateY(1px)}
#tq .tq-btn:disabled{opacity:.45;cursor:default;transform:none}
#tq .tq-btn-pri{background:var(--pri);color:#fff}
#tq .tq-btn-pri:hover{background:var(--pri-dk);border-color:var(--pri-dk)}
#tq .tq-btn-big{min-height:42px;font-size:16px;padding:0 22px}
#tq .tq-btn-link{border:0;background:none;color:var(--link);font-weight:normal;font-size:15px;padding:0 4px;min-height:30px}
#tq .tq-btn-link:hover{background:none;text-decoration:underline}
#tq .tq-chev{font-size:22px;line-height:1;margin-left:2px}
#tq .tq-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
#tq .tq-row-c{justify-content:center}

/* ── "Ready to play?" ── */
#tq .tq-ready{display:flex;align-items:center;gap:22px;background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:14px 20px;margin-bottom:14px}
#tq .tq-ready .tq-book{width:46px;height:46px;color:var(--pri);stroke-width:1.4}
#tq .tq-ready-t{flex:1 1 auto}
#tq .tq-ready-t h3{font:bold 20px/1.2 Arial,Helvetica,sans-serif;color:var(--navy);margin:0 0 2px}
#tq .tq-ready-t p{margin:0;font-size:15.5px;color:var(--text)}
#tq .tq-ready-t small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}

/* ── cards ── */
#tq .tq-card{background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 3px rgba(27,45,79,.05);margin-bottom:12px}
#tq .tq-card-in{padding:16px 20px}
#tq .tq-card-h{padding:14px 20px 2px;font-size:17px;color:var(--navy)}   /* the results "Your answers" card */
#tq .tq-card-b{padding:0 20px 6px}
#tq .tq-card h3{font:bold 20px/1.2 Arial,Helvetica,sans-serif;color:var(--navy);margin:0;padding-bottom:10px;border-bottom:1px solid var(--line)}

/* ── "Make it your own" ── */
#tq .tq-field{padding-top:12px}
#tq .tq-label{display:block;font-size:15.5px;font-weight:bold;color:var(--navy);margin:0 0 7px}
#tq .tq-pills{display:flex;flex-wrap:wrap;gap:8px}
#tq .tq-pill{position:relative}
#tq .tq-pill input{position:absolute;opacity:0;width:1px;height:1px}
#tq .tq-pill span,#tq .tq-selwrap{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 14px;border:1px solid #c9d8ea;border-radius:8px;
    background:#fff;color:var(--navy);font-size:15px;cursor:pointer;user-select:none;transition:background .12s,border-color .12s}
#tq .tq-pill span:hover,#tq .tq-selwrap:hover{border-color:#9dbbe0;background:#f7faff}
#tq .tq-pill span::before{content:"";display:none;width:15px;height:9px;border-left:2.4px solid var(--pri);border-bottom:2.4px solid var(--pri);
    transform:rotate(-45deg) translate(1px,-2px);margin-right:2px}
#tq .tq-pill input:checked + span{background:var(--sel);border-color:var(--pri);color:#1d4f91;font-weight:bold}
#tq .tq-pill input:checked + span::before{display:inline-block}
#tq .tq-pill input:focus-visible + span{outline:2px solid var(--pri);outline-offset:2px}
#tq .tq-pill input:disabled + span{opacity:.4;cursor:default}
#tq .tq-selwrap{position:relative;padding:0;min-width:140px}
#tq .tq-selwrap select{appearance:none;-webkit-appearance:none;border:0;background:transparent;font-size:15px;color:var(--navy);
    min-height:34px;width:100%;padding:0 36px 0 14px;cursor:pointer;border-radius:9px}
#tq .tq-selwrap::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
    transform:translateY(-70%) rotate(45deg);pointer-events:none}
#tq .tq-selwrap.tq-on{background:var(--sel);border-color:var(--pri)}
#tq .tq-selwrap.tq-on select{color:#1d4f91;font-weight:bold}
#tq .tq-count{font-size:14px;color:var(--muted);margin-top:6px}
#tq .tq-more{margin-top:14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#tq .tq-more-h{display:flex;align-items:center;gap:14px;width:100%;padding:9px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--navy)}
#tq .tq-more-h .tq-ico{width:24px;height:24px;color:#566b85}
#tq .tq-more-h b{display:block;font-size:15.5px}
#tq .tq-more-h small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}
#tq .tq-more-h .tq-caret{margin-left:auto;width:10px;height:10px;border-right:2px solid #566b85;border-bottom:2px solid #566b85;transform:rotate(45deg);transition:transform .2s}
#tq .tq-more.tq-open .tq-caret{transform:rotate(-135deg)}
#tq .tq-more-b{padding:0 0 12px 38px}
#tq .tq-more-b .tq-field:first-child{padding-top:0}
/* start screen: two ways to play (owner's mockup-4) */
#tq .tq-choose .tq-card-in{text-align:center;padding:22px 24px 24px}
#tq .tq-choose .tq-book{width:52px;height:52px;color:var(--pri);stroke-width:1.4}
#tq .tq-choose h3{border:0;padding:0;margin:6px 0 18px;font-size:24px}
#tq .tq-two-ways{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:640px;margin:0 auto}
#tq .tq-two-ways small{display:block;margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.4}
#tq .tq-way{width:100%;min-height:58px;font-size:19px;gap:12px;border-radius:9px}
#tq .tq-way .tq-ico{width:24px;height:24px}
/* customize screen */
#tq .tq-back{display:inline-flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15.5px}
#tq .tq-chevl{width:9px;height:9px;border-left:2.2px solid var(--link);border-bottom:2.2px solid var(--link);transform:rotate(45deg);margin-left:3px}
#tq .tq-custom-h{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
#tq .tq-custom-h h3{border:0;padding:0;margin:0 0 2px}
#tq .tq-custom-h .tq-summary{font-size:15px;color:var(--muted)}
#tq .tq-seen{margin-top:10px}
#tq .tq-seen .tq-btn-link{font-size:14px;min-height:0;padding:0;text-decoration:underline}
#tq .tq-opts{margin-top:14px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#tq .tq-opts:last-child{border-bottom:0;padding-bottom:0}
#tq .tq-optrow{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center}
#tq .tq-opt{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:bold;color:var(--navy);cursor:default}
#tq .tq-opt .tq-selwrap{min-width:0;font-weight:normal}
#tq .tq-opt .tq-selwrap select{padding-right:42px}
#tq .tq-opt select:disabled{opacity:.5}
#tq .tq-note{font-size:14px;color:var(--muted);margin-top:8px}
#tq .tq-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
#tq .tq-names input{font-size:15px;min-height:36px;padding:0 12px;border:1px solid #c9d8ea;border-radius:8px;width:100%;color:var(--navy)}
#tq .tq-custom-f{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:12px}
#tq .tq-summary{font-size:15.5px;color:var(--text)}
#tq .tq-foot{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-size:14.5px;margin:4px 0 2px;text-align:center}
#tq .tq-foot .tq-ico{width:24px;height:24px;color:var(--pri);stroke-width:1.5}
#tq .tq-banner{background:#fff8ec;border:1px solid #f0d3a2;color:#7a3e06;border-radius:9px;padding:10px 14px;font-size:15px;margin-bottom:16px;text-align:center}

/* ── game ── */
#tq .tq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 8px}
#tq .tq-top h3{font:bold 19px/1.2 Arial,Helvetica,sans-serif;color:var(--navy);margin:0}
#tq .tq-chips{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#tq .tq-chip{background:var(--panel);border:1px solid var(--panel-line);border-radius:7px;padding:4px 11px;font-size:14.5px;color:#1d4f91;white-space:nowrap}
#tq .tq-chip b{font-variant-numeric:tabular-nums}
/* score box in three parts: Score | right ✓ | wrong ✗ */
#tq .tq-chip.tq-rw{display:inline-flex;align-items:stretch;padding:0;gap:0}
#tq .tq-chip.tq-rw .tq-seg{display:flex;align-items:center;padding:4px 11px}
#tq .tq-chip.tq-rw .tq-seg + .tq-seg{border-left:1px solid var(--panel-line)}
#tq .tq-chip.tq-chip-big.tq-rw{align-items:stretch;padding:0}
#tq .tq-chip.tq-chip-big.tq-rw .tq-seg{padding:0 12px}
#tq .tq-chip.tq-chip-big.tq-rw .tq-seg + .tq-seg{border-left-width:2px}
#tq .tq-chip.tq-player{background:#fff4e5;border-color:#f0d3a2;color:var(--amber);font-weight:bold}
/* timer: prominent when used; green → gold → red (#FF0000), flashing in the last 5 s */
#tq .tq-chip.tq-timer,#tq .tq-chip.tq-chip-big{font-size:22px;font-weight:bold;padding:0 16px;min-width:104px;height:44px;
    display:inline-flex;align-items:center;justify-content:center;gap:6px;border-width:2px;border-style:solid;
    line-height:1;font-variant-numeric:tabular-nums;box-sizing:border-box}
#tq .tq-chip.tq-chip-big b{font-weight:bold}
#tq .tq-chip.tq-timer{color:#fff}
#tq .tq-chip.tq-timer.tq-green{background:#1f9d48;border-color:#1f9d48}
#tq .tq-chip.tq-timer.tq-gold{background:#f5c400;border-color:#f5c400;color:#3d2f00}
#tq .tq-chip.tq-timer.tq-red{background:#FF0000;border-color:#FF0000;color:#fff}
#tq .tq-chip.tq-timer.tq-flash{animation:tqFlash .5s steps(1,end) infinite}
@keyframes tqFlash{0%{background:#FF0000;color:#fff}50%{background:#fff;color:#FF0000}}
#tq .tq-tbar{height:8px;border-radius:4px;background:#e6f4ea;overflow:hidden;margin:-4px 0 14px}
#tq .tq-tbar i{display:block;height:100%;width:100%;background:#1f9d48;border-radius:4px;transition:width .25s linear,background .3s}
#tq .tq-tbar.tq-gold{background:#fdf3c4}
#tq .tq-tbar.tq-gold i{background:#f5c400}
#tq .tq-tbar.tq-red{background:#ffd6d6}
#tq .tq-tbar.tq-red i{background:#FF0000}
#tq .tq-resume{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;
    background:#fff8e6;border:1px solid #f0d08a;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:15.5px;color:var(--navy)}
#tq .tq-resume-b{display:inline-flex;align-items:center;gap:12px}
#tq .tq-qref{font-size:15px;color:var(--muted);font-weight:bold;margin:2px 0 -4px}
#tq .tq-chip.tq-diff{background:#fff;border-color:var(--line);color:var(--muted)}
#tq .tq-chip.tq-diff b{color:var(--navy)}
/* 2026-10-20: the difficulty chip is as tall as the score box (and the timer when timed) */
#tq .tq-top .tq-chip.tq-diff{display:inline-flex;align-items:center;align-self:stretch;box-sizing:border-box}
#tq .tq-top-timed .tq-chip.tq-diff{height:44px;font-size:18px;padding:0 14px;border-width:2px}
#tq .tq-selwrap.tq-off{opacity:.45;background:#f4f6f9;cursor:not-allowed}
#tq .tq-selwrap.tq-off select{cursor:not-allowed}
#tq .tq-fbnote{font-size:13.5px;color:var(--muted)}
#tq .tq-fbnote:empty{display:none}
#tq .tq-box-bad .tq-dot{background:#e5484d;margin-top:3px}
#tq .tq-box .tq-boxhead{display:block;font-size:20px;line-height:1.2;margin:2px 0 6px}
#tq .tq-box-bad .tq-boxhead{color:#d92d20}
#tq .tq-box-bad.tq-box-icon small{color:var(--muted)}
#tq .tq-box-ok .tq-boxhead{color:var(--ok);margin:0}
#tq .tq-boxtop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 6px}
#tq .tq-box-icon > div{flex:1 1 auto;min-width:0}
#tq .tq-selwrap{position:relative}
#tq .tq-clear{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;border:0;padding:0;
    background:var(--pri);color:#fff;font:bold 15px/22px Arial,Helvetica,sans-serif;text-align:center;cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.25);z-index:2}
#tq .tq-clear:hover{background:var(--pri-dk)}
#tq .tq-quit{display:inline-flex;gap:14px;align-items:center;flex-wrap:wrap}
#tq .tq-tools .tq-quit{margin-left:auto}
#tq .tq-bar{height:7px;border-radius:4px;background:#e3ecf6;overflow:hidden;margin-bottom:12px}
#tq .tq-bar i{display:block;height:100%;width:0;background:var(--pri);border-radius:5px;transition:width .35s}
#tq .tq-qhead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid var(--line);font-size:15px}
#tq .tq-qhead b{color:var(--navy)}
#tq .tq-qhead span{color:var(--muted)}
#tq .tq-q{font:bold 25px/1.25 Arial,Helvetica,sans-serif;color:var(--navy);margin:12px 0 2px;letter-spacing:-.01em}
#tq .tq-qsub{font-size:15px;color:var(--muted);margin:0 0 10px}
#tq .tq-choices{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
#tq .tq-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:46px;padding:6px 14px;text-align:left;
    font-size:17px;line-height:1.35;color:var(--navy);background:#fff;border:1px solid #c9d8ea;border-radius:9px;cursor:pointer;
    transition:background .15s,border-color .15s,opacity .25s,transform .05s}
#tq .tq-choice:hover:not(:disabled){background:#f5f9fe;border-color:#9dbbe0}
#tq .tq-choice:active:not(:disabled){transform:translateY(1px)}
#tq .tq-choice:disabled{cursor:default}
#tq .tq-key{flex:0 0 30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    font-size:15px;color:#1d4f91;background:var(--panel);border:1px solid var(--panel-line)}
#tq .tq-ctext{flex:1 1 auto}
#tq .tq-mark{flex:0 0 auto;font-weight:bold;font-size:20px}
#tq .tq-choice.tq-removed{opacity:.35;text-decoration:line-through;background:#fafafa}
#tq .tq-choice.tq-right{background:var(--ok-bg);border-color:var(--ok);opacity:1;text-decoration:none}
#tq .tq-choice.tq-right .tq-key{background:var(--ok);border-color:var(--ok);color:#fff}
#tq .tq-choice.tq-right .tq-mark{color:var(--ok)}
#tq .tq-choice.tq-wrong{background:var(--bad-bg);border-color:var(--bad)}
#tq .tq-choice.tq-wrong .tq-key{background:var(--bad);border-color:var(--bad);color:#fff}
#tq .tq-choice.tq-wrong .tq-mark{color:var(--bad)}
#tq .tq-choice.tq-dim{opacity:.55}
#tq .tq-tools{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
#tq .tq-hint{min-height:36px;padding:0 14px}
#tq .tq-hint-t{font-size:13.5px;color:var(--muted);line-height:1.45}


/* answer card (owner's mockup-3) */
#tq .tq-fbk{animation:tqIn .25s ease-out}
#tq .tq-fb-ref{font-size:15px;color:var(--muted);margin-bottom:4px}
#tq .tq-qagain{font:bold 19px/1.35 Arial,Helvetica,sans-serif;color:var(--navy);margin:10px 0 12px}
#tq .tq-status{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#tq .tq-status strong{font-size:23px;line-height:1.2}
#tq .tq-status.tq-bad strong{color:#d92d20}
#tq .tq-status.tq-ok strong{color:var(--ok)}
#tq .tq-dot{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e5484d}
#tq .tq-dot svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
#tq .tq-status.tq-ok .tq-dot,#tq .tq-answer .tq-dot{background:#2e9a4b}
#tq .tq-answer{display:flex;align-items:center;gap:18px;background:#edf8f0;border:1px solid #c6e6cf;border-radius:10px;padding:10px 16px}
#tq .tq-answer small{display:block;color:#1e7d36;font-size:14.5px;margin-bottom:1px}
#tq .tq-answer b{display:block;font-size:23px;line-height:1.2;color:var(--navy)}
#tq .tq-expl{font-size:17px;line-height:1.5;color:var(--navy);margin:10px 0 0}
#tq .tq-sect{border-top:1px solid var(--line);margin-top:12px;padding-top:10px}
#tq .tq-yours{font-size:14.5px;color:var(--muted)}
#tq .tq-sect h4{font:bold 21px/1.25 Arial,Helvetica,sans-serif;color:var(--navy);margin:2px 0 4px}
#tq .tq-sect p{font-size:17px;line-height:1.5;color:var(--navy);margin:0}
#tq details.tq-others summary{list-style:none;display:flex;gap:14px;align-items:flex-start;cursor:pointer}
#tq details.tq-others summary::-webkit-details-marker{display:none}
#tq .tq-chevr{flex:0 0 auto;width:10px;height:10px;margin:8px 4px 0 2px;border-right:2.4px solid var(--link);border-bottom:2.4px solid var(--link);transform:rotate(-45deg);transition:transform .2s}
#tq details[open].tq-others .tq-chevr{transform:rotate(45deg)}
#tq .tq-sum-t{display:block;font-size:17px;color:var(--link)}
#tq .tq-sum-s{display:block;font-size:14.5px;color:var(--muted);margin-top:2px}
#tq details.tq-others ul{list-style:none;margin:12px 0 0;padding:0 0 0 30px}
#tq details.tq-others li{margin:0 0 12px;font-size:17px;line-height:1.5;color:var(--text)}
#tq details.tq-others li b{display:block;color:var(--navy)}
/* answer boxes (owner's mockup-6) */
#tq .tq-box{border-radius:10px;padding:14px 18px;margin-top:12px}
#tq .tq-box small{display:block;font-size:14.5px;color:var(--muted)}
#tq .tq-box b{display:block;font-size:22px;line-height:1.25;color:var(--navy);margin:2px 0 6px}
#tq .tq-box p{margin:0;font-size:16.5px;line-height:1.5;color:var(--text)}
#tq .tq-box-bad{background:#fdeeee;border:1px solid #f2b8b5}
#tq .tq-box-ok{background:#edf8f0;border:1px solid #c6e6cf}
#tq .tq-box-icon{display:flex;gap:14px;align-items:flex-start}
#tq .tq-box-icon small{color:#1e7d36}
#tq .tq-box-ok .tq-dot{background:#2e9a4b;margin-top:3px}
#tq .tq-box details.tq-others{margin-top:10px}
#tq .tq-box details.tq-others li b{font-size:16px;line-height:1.35;margin:0 0 2px}
#tq .tq-box details.tq-others ul{padding-left:30px}
#tq .tq-others-out{margin-top:12px}
#tq details.tq-others summary{align-items:center}
#tq details.tq-others summary .tq-chevr{margin-top:0}
#tq .tq-fb-f{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 16px}
#tq .tq-ref{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16.5px}
#tq .tq-ref .tq-ico{width:26px;height:26px;color:var(--pri);stroke-width:1.5}
#tq .tq-ref a{text-decoration:none}
#tq .tq-ref a:hover{text-decoration:underline}
#tq .tq-ref select{min-height:34px;min-width:100px;font-size:15px;border:1px solid #c9d8ea;border-radius:8px;padding:0 10px;color:var(--navy);background:#fff}
#tq .tq-fb-f .tq-btn-link{font-size:15px}
#tq .tq-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 8px}
#tq .tq-nav .tq-btn-link{font-size:15.5px}

/* pass screen + results */
#tq .tq-center{text-align:center;padding:18px 20px}
#tq .tq-big{font:bold 28px/1.2 Arial,Helvetica,sans-serif;color:var(--navy);margin:6px 0}
#tq .tq-score{font:bold 44px/1.1 Arial,Helvetica,sans-serif;color:var(--pri);margin:4px 0}
#tq .tq-sub{color:var(--muted);font-size:17px}
#tq .tq-board .tq-rwn b{margin-left:6px}
#tq .tq-board{margin:18px auto 4px;max-width:440px;border-collapse:collapse;width:100%;font-size:17px}
#tq .tq-board td{padding:10px 12px;border-bottom:1px solid #eef2f7;text-align:left}
#tq .tq-board td:last-child{text-align:right;font-weight:bold;color:var(--navy)}
#tq .tq-board tr.tq-me td{background:#fff8ec}
#tq .tq-medal{width:34px}
#tq .tq-review{margin:0;padding:0;list-style:none}
#tq .tq-review li{border-top:1px solid #eef2f7;padding:12px 2px}
#tq .tq-review li:first-child{border-top:0}
#tq .tq-review .tq-rq{display:flex;gap:12px;align-items:flex-start;font-size:16.5px;line-height:1.45}
#tq .tq-review .tq-rq b{flex:0 0 auto}
#tq .tq-ok-t{color:var(--ok)}
#tq .tq-bad-t{color:var(--bad)}
#tq .tq-review details{margin:5px 0 0 28px;font-size:16px;color:var(--text)}
#tq .tq-review summary{cursor:pointer;color:var(--link)}
#tq .tq-copied{color:var(--ok);font-size:15px}

/* suggest-edit dialog */
#tqDlg{border:1px solid #cfe0f4;border-radius:12px;padding:0;max-width:540px;width:calc(100% - 24px);font-family:Arial,Helvetica,sans-serif;color:#1b2d4f}
#tqDlg::backdrop{background:rgba(20,40,70,.45)}
#tqDlg form{padding:20px}
#tqDlg h2{font:bold 20px Arial,Helvetica,sans-serif;margin:0 0 4px}
#tqDlg .tq-dq{font-size:15px;color:#33475f;background:#eef5fd;border-radius:8px;padding:9px 12px;margin:8px 0 12px}
#tqDlg label{display:block;font-size:15px;margin:7px 0}
#tqDlg textarea,#tqDlg input[type=text],#tqDlg input[type=email]{width:100%;font:15px Arial,Helvetica,sans-serif;padding:9px 11px;border:1px solid #c9d8ea;border-radius:8px;box-sizing:border-box}
#tqDlg textarea{min-height:90px;resize:vertical}
#tqDlg .tq-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
#tqDlg .tq-hp{position:absolute;left:-9999px}
#tqDlg .tq-dbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
#tqDlg .tq-dbtns button{min-height:42px;padding:0 18px;border-radius:8px;border:1.5px solid #4479ba;background:#fff;color:#4479ba;font:bold 15px Arial,Helvetica,sans-serif;cursor:pointer}
#tqDlg .tq-dbtns .tq-send{background:#4479ba;color:#fff}

@keyframes tqIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#tq *{animation:none !important;transition:none !important}}


/* ── colour frame (owner's mockup-5) ── */
#tq .tq-body{padding:0}
#tq .tq-tagline{text-align:center;font-size:15px;color:#222;margin:-8px 0 14px}
#tq.tq-playing .tq-tagline{display:none}
#tq .tq-strip{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;color:var(--muted);font-size:14.5px;text-align:center}
#tq .tq-strip .tq-ico{width:24px;height:24px;color:var(--pri);stroke-width:1.5}
/* while playing: no masthead, no panel frame */
/* start screen: two cards */
#tq .tq-ways{display:grid;grid-template-columns:1fr 1fr;gap:18px}
#tq .tq-wayc{display:flex;flex-direction:column;align-items:flex-start;border-radius:12px;padding:22px 22px 20px;background:#fff;border:1.5px solid var(--pri)}
#tq .tq-wayc-quick{background:#e3eefc;border:1px solid var(--panel-line)}
#tq .tq-wayc .tq-ico{width:40px;height:40px;color:var(--pri);margin-bottom:10px}
#tq .tq-wayc-quick .tq-ico{width:34px;height:34px}
#tq .tq-wayc h3{font:bold 26px/1.2 Arial,Helvetica,sans-serif;color:var(--navy);margin:0 0 6px}
#tq .tq-wayc p{margin:0;font-size:16.5px;color:var(--text);line-height:1.45}
#tq .tq-wayc small{display:block;margin-top:12px;font-size:15px;color:var(--muted)}
#tq .tq-wayc .tq-btn{margin-top:auto;width:100%;min-height:50px;font-size:18px;justify-content:center}
#tq .tq-wayc p,#tq .tq-wayc small{margin-bottom:18px}
#tq .tq-wayc p:has(+ small){margin-bottom:0}
/* customize: tinted header band and options box */
#tq .tq-custom{overflow:hidden}
#tq .tq-custom .tq-custom-h{background:#eef5fd;padding:14px 20px;border-bottom:1px solid var(--panel-line)}
#tq .tq-custom .tq-card-in{padding-top:4px}
#tq .tq-custom .tq-opts{background:#eaf2fc;border:0;border-radius:10px;padding:12px 16px;margin-top:16px}
#tq .tq-custom .tq-optrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#tq .tq-custom .tq-opt{flex-direction:column;align-items:stretch;gap:6px}
#tq .tq-custom .tq-opt .tq-selwrap{background:#fff;width:100%}

/* ── tablets ── */
@media(max-width:820px){
  #tq .tq-ready{flex-wrap:wrap}
  #tq .tq-ready .tq-btn{width:100%}
}
/* ── phones ── */
@media(max-width:600px){
          #tq .tq-ways{grid-template-columns:1fr;gap:14px}
  #tq .tq-wayc{padding:18px 16px}
  #tq .tq-wayc h3{font-size:22px}
  #tq .tq-custom .tq-custom-h{padding:12px 14px}
  #tq .tq-custom .tq-optrow{grid-template-columns:1fr}
  #tq .tq-top .tq-chips{gap:6px}
  #tq .tq-top-timed h3{flex:1 1 100%}
  #tq .tq-chip.tq-timer,#tq .tq-chip.tq-chip-big{font-size:19px;height:40px;min-width:88px;padding:0 12px}
  #tq .tq-top-timed .tq-chip.tq-diff{height:40px;font-size:16px;padding:0 11px}
  #tq .tq-custom .tq-opt .tq-selwrap{flex:none;height:auto}
  #tq .tq-strip{display:flex;align-items:center;justify-content:center;gap:8px;margin:10px 0 0;color:var(--muted);font-size:14.5px;text-align:center}
  #tq .tq-two-ways{grid-template-columns:1fr;gap:14px}
  #tq .tq-choose h3{font-size:20px;margin-bottom:14px}
  #tq .tq-choose .tq-card-in{padding:18px 14px 20px}
  #tq .tq-way{min-height:52px;font-size:17px}
  #tq .tq-custom-h{flex-direction:column;align-items:stretch}
  #tq .tq-custom-h .tq-btn{width:100%}
  #tq{padding:4px 12px 0}
  #tq .tq-hero{padding:6px 0 14px}
  #tq .tq-hero p{font-size:15.5px}
  #tq .tq-ready{gap:12px 16px;padding:18px 16px}
  #tq .tq-ready .tq-book{width:48px;height:48px}
  #tq .tq-ready-t h3{font-size:20px}
  #tq .tq-ready-t p{font-size:15.5px}
  #tq .tq-ready-t small{font-size:14px}
  #tq .tq-card-in{padding:18px 16px}
  #tq .tq-card-h{padding:14px 16px 2px}
  #tq .tq-card-b{padding:0 16px 6px}
  #tq .tq-card h3{font-size:21px;padding-bottom:12px}
  #tq .tq-label{font-size:15.5px}
  #tq .tq-pills{gap:8px}
  #tq .tq-pill span{padding:0 12px;font-size:14.5px;min-height:38px;gap:6px}
  #tq .tq-pill span::before{width:12px;height:7px;border-width:0 0 2px 2px}
  #tq .tq-selwrap{min-width:0;flex:1 1 92px;min-height:40px}
  #tq .tq-selwrap select{font-size:14.5px;padding:0 28px 0 12px;min-height:38px;width:100%;text-overflow:ellipsis}
  #tq .tq-selwrap::after{right:12px;width:7px;height:7px}
  #tq .tq-optrow{flex-direction:column;align-items:stretch;gap:8px}
  #tq .tq-opt{justify-content:space-between;font-size:14.5px}
  #tq .tq-opt .tq-selwrap{flex:0 1 230px}
  #tq .tq-custom-f{flex-direction:column;align-items:stretch}
  #tq .tq-custom-f .tq-btn{width:100%}
  #tq .tq-summary{font-size:15px}
  #tq .tq-top h3{font-size:19px}
  #tq .tq-chip{font-size:15px;padding:6px 11px}
  #tq .tq-chip.tq-rw .tq-seg{padding:6px 11px}
  #tq .tq-qhead{font-size:15.5px}
  #tq .tq-q{font-size:21px;margin-top:10px}
  #tq .tq-qsub{font-size:16px}
  #tq .tq-choice{font-size:16px;min-height:48px;gap:12px;padding:6px 12px}
  #tq .tq-key{flex-basis:30px;height:30px;font-size:14.5px}
  #tq .tq-tools{gap:12px}
  
  #tq .tq-fb-ref{font-size:15px}
  #tq .tq-status strong{font-size:22px}
  #tq .tq-dot{width:32px;height:32px}
  #tq .tq-dot svg{width:19px;height:19px}
  #tq .tq-answer{padding:14px 16px;gap:14px}
  #tq .tq-answer small{font-size:15px}
  #tq .tq-answer b{font-size:23px}
  #tq .tq-expl{font-size:16.5px;margin-top:14px}
  #tq .tq-sect{margin-top:16px;padding-top:14px}
  #tq .tq-yours{font-size:15px}
  #tq .tq-sect h4{font-size:22px}
  #tq .tq-sect p{font-size:16.5px}
  #tq .tq-sum-t{font-size:17px}
  #tq .tq-sum-s{font-size:14.5px}
  #tq details.tq-others ul{padding-left:0}
  #tq details.tq-others li{font-size:15.5px}
  #tq .tq-ref{font-size:17px;flex-wrap:nowrap;gap:10px}
  #tq .tq-ref .tq-ico{width:28px;height:28px}
  #tq .tq-ref select{min-height:40px;width:100px;min-width:0;margin-left:auto}
  #tq .tq-ref a{white-space:nowrap}
  #tq .tq-fb-f{flex-direction:column;align-items:stretch}
  #tq .tq-fb-f .tq-btn-link{align-self:flex-end;font-size:15px}
  #tq .tq-nav{flex-direction:column-reverse;align-items:stretch}
  #tq .tq-nav .tq-btn-link{font-size:16.5px}
  #tq .tq-nav .tq-quit{align-self:center;justify-content:center}
  #tq .tq-score{font-size:42px}
  #tqDlg .tq-two{grid-template-columns:1fr}
}

/* 2026-10-14: levels (difficulty unlocks) and chapter quizzes */
#tq .tq-level{margin:14px 0 0;font-size:14.5px;color:var(--muted);text-align:center}
#tq .tq-lock{font-style:normal;font-size:12px;margin-left:-2px}
#tq .tq-wayc .tq-wayalt{margin-top:10px;min-height:0;width:auto;align-self:center;font-size:15px}
#tq .tq-unlock{background:#eaf7ec;border-color:#a9d8b1;color:#1f6b2c;font-weight:bold}
#tq .tq-pts{margin-left:auto;font-weight:bold;color:var(--navy);font-size:18px;white-space:nowrap}
#tq .tq-pts small{font-weight:normal;color:var(--muted);font-size:14px}
#tq .tq-pts.tq-pop{animation:tqPop .45s ease-out}
@keyframes tqPop{0%{transform:scale(1)}40%{transform:scale(1.25)}100%{transform:scale(1)}}

/* 2026-10-20: Topic on one line on desktop (Whole Bible · OT · NT · Section · Book · Chapter); the three
   boxes have fixed widths (owner: they must not change size with the choice); it wraps on narrower screens */
@media(min-width:601px){
  #tq .tq-topic .tq-selwrap{flex:none;min-width:0}         /* fixed widths: nothing moves when the choice changes */
  #tq .tq-topic .tq-groupw{width:166px}                     /* "Law (Pentateuch)", "Wisdom & Poetry" */
  #tq .tq-topic .tq-bookw{width:170px}                      /* "Song of Solomon" */
  #tq .tq-topic .tq-chapw{width:130px}                      /* "All chapters", "Chapter 150" */
  #tq .tq-topic .tq-selwrap select{text-overflow:ellipsis;padding-right:27px;padding-left:10px}
  #tq .tq-topic .tq-selwrap::after{right:11px}
}
@media(min-width:1000px){
  #tq .tq-topic{flex-wrap:nowrap}
  #tq .tq-topic .tq-pill{flex:none}
  #tq .tq-topic .tq-pill span{padding:0 12px}
}
@media(max-width:600px){                                     /* phone: each box half the row, whatever is chosen */
  #tq .tq-topic .tq-selwrap{flex:0 0 calc(50% - 4px)}
}