/* חידון הנ"ך - עיצוב (מנה 11.10.2026). מסך נפרד: אינו נוגע בעיצוב עמוד הפסוקים והפירוש.
   גופן וילנא בריווח 0.2 ורק בו; כפתורי ממשק בגופן נעים. מובייל קודם, ימין לשמאל. */
:root{
  --paper:#FBFAF3; --ink:#251F13; --ink2:#6A5E40; --line:#D8D0BB; --line2:#C4B994;
  --accent:#8C2B2B; --gold:#8A6D3B; --card:#FFFFFF; --hl:#F3E4B5; --scrim:#F2EEE1;
  --ok:#2E7D32; --okbg:#E6F3E7; --bad:#B3261E; --badbg:#FBE9E7;
  --titlefont:'Vilna XBold','BA Vilna','FrankRuehl',serif;
  --vilna:'Vilna Medium','Vilna XBold','FrankRuehl',serif;
  --sans:'Segoe UI','Heebo',Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#1B1813;--ink:#EAE4D4;--ink2:#B5AA8E;--line:#3C362A;--line2:#57503C;
    --accent:#D6907E;--gold:#C2A868;--card:#242019;--hl:#4E4120;--scrim:#221E17;--okbg:#1D3320;--badbg:#3A1E1B;--ok:#7FD085;--bad:#F0968C}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.5;
  -webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
a{color:var(--accent)}
.qh{display:flex;align-items:center;gap:10px;padding:8px 14px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20}
.qh-title{font-family:var(--titlefont);font-size:22px;letter-spacing:.2px;color:var(--accent);flex:1;text-align:center}
.qh-back{font-size:14px;text-decoration:none;white-space:nowrap}
.qh-snd{width:40px;height:40px;border:1px solid var(--line2);background:var(--scrim);border-radius:50%;display:grid;place-items:center;padding:0}
.qh-snd.on{background:var(--hl);border-color:var(--gold)}
.q-app{width:100%;max-width:760px;margin:0 auto;padding:16px 14px 70px;flex:1}
.q-load{text-align:center;color:var(--ink2);padding:40px 0}
h1,h2,h3{font-family:var(--titlefont);font-weight:700;letter-spacing:.2px;margin:0 0 8px}
.q-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0 0 14px;
  box-shadow:0 1px 4px rgba(0,0,0,.05)}
.q-sub{color:var(--ink2);margin:0 0 12px}
.q-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.q-btn{border:1px solid var(--line2);background:var(--scrim);border-radius:10px;padding:10px 16px;min-height:44px;font-weight:600}
.q-btn:hover,.q-btn:focus-visible{border-color:var(--accent);outline:none}
.q-btn.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.q-btn.sm{min-height:36px;padding:6px 12px;font-size:15px}
.q-btn:disabled{opacity:.5;cursor:default}
.q-link{background:none;border:none;color:var(--accent);text-decoration:underline;padding:4px;min-height:0;font-size:15px}

/* שתי הדלתות */
.q-doors{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:520px){.q-doors{grid-template-columns:1fr}}
.q-door{border-radius:16px;border:2px solid var(--line2);padding:22px 14px;text-align:center;min-height:150px;display:flex;
  flex-direction:column;justify-content:center;gap:6px}
.q-door b{font-family:var(--titlefont);font-size:30px;letter-spacing:.2px}
.q-door span{font-size:15px;opacity:.9}
.q-door.young{background:linear-gradient(135deg,#ffe082,#ffb74d 50%,#ff8a65);color:#3b1d00;border-color:#ff9800}
.q-door.adult{background:var(--card);color:var(--ink)}

/* בית */
.q-stats{display:flex;gap:10px;flex-wrap:wrap}
.q-stat{flex:1 1 90px;background:var(--scrim);border-radius:10px;padding:8px 10px;text-align:center}
.q-stat small{display:block;color:var(--ink2);font-size:13px}
.q-stat b{font-size:22px;font-family:var(--titlefont);letter-spacing:.2px}
.q-bar{height:8px;background:var(--scrim);border-radius:6px;overflow:hidden;margin-top:6px}
.q-bar i{display:block;height:100%;background:var(--gold)}
.q-modes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.q-modes{grid-template-columns:1fr}}
.q-mode{text-align:right;background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:12px 14px;min-height:78px}
.q-mode b{display:block;font-size:18px}
.q-mode span{font-size:14px;color:var(--ink2)}
.q-mode:hover,.q-mode:focus-visible{border-color:var(--accent);outline:none}
.q-mode.off{opacity:.55}

/* בחירת סבב */
.q-chips{display:flex;flex-wrap:wrap;gap:6px}
.q-chip{border:1px solid var(--line2);background:var(--scrim);border-radius:18px;padding:6px 13px;font-size:15px;min-height:38px}
.q-chip.sel{background:var(--hl);border-color:var(--gold);font-weight:700}
.q-chip.dis{opacity:.5}
.q-chip small{color:var(--ink2);margin-inline-start:4px}
.q-lab{font-weight:700;margin:14px 0 6px;font-size:15px}
.q-chgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px}
.q-chgrid .q-chip{text-align:center;padding:6px 4px;border-radius:8px}

/* שאלה */
.qz-hud{display:flex;gap:14px;align-items:center;margin-bottom:8px}
.qz-pts,.qz-str,.qz-time{background:var(--scrim);border-radius:10px;padding:4px 12px;text-align:center;min-width:76px;position:relative}
.qz-pts small,.qz-str small,.qz-time small{display:block;font-size:12px;color:var(--ink2)}
.qz-pts b,.qz-str b,.qz-time b{font-family:var(--titlefont);font-size:22px;letter-spacing:.2px}
.qz-str.hot{background:#ffe0b2;color:#7a3b00}
.qz-hearts{font-size:22px;letter-spacing:2px;margin-inline-start:auto}
.qz-track{display:flex;gap:4px;list-style:none;margin:0 0 10px;padding:0}
.qz-track li{flex:1;height:8px;border-radius:5px;background:var(--line)}
.qz-track li.ok{background:var(--ok)}
.qz-track li.bad{background:var(--bad)}
.qz-track li.cur{background:var(--gold)}
.qz-meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;font-size:14px;color:var(--ink2)}
.qz-chip{border-radius:12px;padding:2px 10px;font-weight:700;font-size:13px;background:var(--scrim);color:var(--ink)}
.qz-lv1{background:#dcedc8}.qz-lv2{background:#bbdefb}.qz-lv3{background:#ffe0b2}.qz-lv4{background:#e1bee7}
.qz-q{font-family:var(--vilna);font-size:23px;line-height:1.55;letter-spacing:.2px;margin:6px 0 14px;font-weight:400}
.qz-hints{margin:0 0 12px;padding:0;list-style:none}
.qz-hints li{background:var(--scrim);border-right:4px solid var(--gold);padding:7px 12px;margin:0 0 6px;border-radius:6px;
  font-family:var(--vilna);font-size:20px;letter-spacing:.2px}
.qz-opts{display:grid;gap:10px}
.qz-opt{display:flex;gap:12px;align-items:center;text-align:right;border:2px solid var(--line2);background:var(--card);
  border-radius:12px;padding:12px 14px;min-height:60px;font-size:18px;width:100%}
.qz-opt b{flex:0 0 32px;height:32px;border-radius:50%;background:var(--scrim);display:grid;place-items:center;font-size:16px}
.qz-opt:hover:not(:disabled),.qz-opt:focus-visible{border-color:var(--accent);outline:none}
.qz-opt.right{border-color:var(--ok);background:var(--okbg)}
.qz-opt.wrong{border-color:var(--bad);background:var(--badbg)}
.qz-opt:disabled{cursor:default}
.qz-fb{margin-top:14px}
.qz-msg{font-size:19px;margin:0 0 6px}
.qz-ok{color:var(--ok)}.qz-no{color:var(--bad)}
.qz-exp{background:var(--scrim);border-radius:8px;padding:10px 12px;margin:8px 0}
.qz-fun{border-right:4px solid var(--gold);padding:6px 12px;margin:8px 0;color:var(--ink2)}
.qz-places{margin:8px 0;padding:0 18px}
.qz-places li{margin:2px 0}
.qz-pop{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-weight:800;color:var(--ok);
  animation:qpop .9s ease-out forwards;pointer-events:none}
@keyframes qpop{0%{opacity:0;transform:translate(-50%,6px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-34px)}}

/* סיום */
.q-stars{font-size:46px;text-align:center;letter-spacing:6px;color:var(--gold)}
.q-end-nums{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:10px 0}
.q-miss{border-top:1px solid var(--line);padding:10px 0}
.q-miss h4{margin:0 0 4px;font-family:var(--vilna);font-size:19px;letter-spacing:.2px;font-weight:400}

/* מפה ואותות */
.q-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:5px}
.q-cell{border-radius:6px;text-align:center;padding:6px 0;font-size:14px;background:var(--scrim);border:1px solid var(--line);
  color:var(--ink)}
.q-cell.p1{background:#ffe0b2}.q-cell.p2{background:#fff59d}.q-cell.p3{background:#c5e1a5}.q-cell.p4{background:#81c784}
.q-cell.none{opacity:.45}
.q-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.q-badge{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;background:var(--card)}
.q-badge.off{opacity:.5;filter:grayscale(1)}
.q-badge b{display:block}
.q-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--paper);
  padding:10px 18px;border-radius:24px;z-index:50;font-weight:700;max-width:90vw;text-align:center}
.q-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);display:grid;place-items:center;z-index:60;padding:16px}
.q-modal>div{background:var(--card);border-radius:16px;padding:22px;max-width:380px;text-align:center}
.q-big{font-size:60px;color:var(--gold)}

/* שתי הדלתות: צעירים צבעוני, מבוגרים שקט */
.ui-young body,.ui-young{--paper:#FFF8E7}
.ui-young .q-card{border-color:#ffcc80;border-width:2px}
.ui-young .qz-opt{border-width:3px;font-weight:700}
.ui-young .qz-opt:nth-child(1){border-color:#ef5350}.ui-young .qz-opt:nth-child(2){border-color:#42a5f5}
.ui-young .qz-opt:nth-child(3){border-color:#66bb6a}.ui-young .qz-opt:nth-child(4){border-color:#ffa726}
.ui-young .qz-opt.right{background:#c8e6c9;border-color:#2e7d32}
.ui-young .qz-opt.wrong{background:#ffcdd2;border-color:#c62828}
.ui-young .q-btn.pri{background:linear-gradient(135deg,#ff7043,#ffa000)}
.ui-young .qz-track li{height:12px}
.qz-confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:55}
.qz-confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px}
@media (prefers-reduced-motion:reduce){.qz-pop{animation:none;opacity:0}}
@media print{.qh,.q-btn,.qh-snd{display:none}}

/* ערכות צלילים (מנה 11.10) */
.q-sndrow{margin-top:14px}
.q-sndhost .q-chips{align-items:center}
.q-vol{display:flex;gap:10px;align-items:center;margin-top:8px;font-size:14px;color:var(--ink2)}
.q-vol input{flex:1;max-width:260px;min-height:32px}
.q-link[disabled]{opacity:.4;cursor:default}
