/* Bayt ul-Ahzan live quiz. Own fixed black & gold look (matches the gold logo), independent of the
   site colour schemes on purpose: the quiz runs full screen on a projector and on phones. */
@font-face { font-family: "QzVazir"; src: url("fonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "QzVazir"; src: url("fonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "QzVazir"; src: url("fonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root {
  --qz-bg: #0b0b0d; --qz-panel: #16161a; --qz-panel2: #1e1e24; --qz-line: #2c2a26;
  --qz-gold: #c9a45c; --qz-gold2: #ecd49a; --qz-text: #efe9dc; --qz-muted: #9d978a;
  --qz-a0: #a33544; --qz-a1: #2c5795; --qz-a2: #b5822a; --qz-a3: #2b7656;
  --qz-ok: #2f8f5f; --qz-bad: #a8404b;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--qz-bg); color: var(--qz-text);
  font-family: "QzVazir", "Segoe UI", Tahoma, Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
body { background: radial-gradient(1100px 560px at 50% -180px, #2a2416 0%, transparent 65%), var(--qz-bg); }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--qz-gold2); }
#qz { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.qz-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 22px; text-align: center; }
.qz-logo { width: min(240px, 60vw); height: auto; display: block; filter: drop-shadow(0 6px 30px rgba(201,164,92,.18)); }
.qz-logo.sm { width: 92px; }
.qz-sub { color: var(--qz-muted); margin: 0; }
.qz-card { background: var(--qz-panel); border: 1px solid var(--qz-line); border-radius: 18px; padding: 22px; }
.qz-narrow { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.qz-card h2, .qz-h2 { margin: 0; font-size: 1.25rem; }
.qz-in { width: 100%; background: var(--qz-panel2); border: 1px solid var(--qz-line); border-radius: 12px; padding: 13px 14px; outline: none; }
.qz-in:focus { border-color: var(--qz-gold); }
.qz-in.big { font-size: 1.7rem; text-align: center; letter-spacing: .18em; font-weight: 800; direction: ltr; }
.qz-btn { border: 1px solid var(--qz-line); background: var(--qz-panel2); border-radius: 12px; padding: 12px 20px; font-weight: 700; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.qz-btn:active { transform: scale(.98); }
.qz-btn.gold { background: linear-gradient(180deg, var(--qz-gold2), var(--qz-gold)); color: #19130a; border: 0; }
.qz-btn.big { font-size: 1.2rem; padding: 14px 42px; }
.qz-btn.sm { padding: 7px 12px; font-size: .9rem; border-radius: 10px; }
.qz-btn.danger { color: #f1a7ae; }
.qz-btn[disabled] { opacity: .5; cursor: default; }
.qz-err { color: #f1a7ae; min-height: 1.3em; margin: 0; }
.qz-langs { display: flex; gap: 12px; justify-content: center; font-size: .9rem; }
.qz-langs a { color: var(--qz-muted); text-decoration: none; }
.qz-langs a.on { color: var(--qz-gold2); font-weight: 700; }
.qz-foot { color: var(--qz-muted); font-size: .8rem; text-align: center; padding: 10px; }
.qz-foot a { color: var(--qz-muted); }
.qz-bar { display: flex; align-items: center; gap: 12px; padding: 10px 18px; background: rgba(22,22,26,.85); border-bottom: 1px solid var(--qz-line); }
.qz-bar b { color: var(--qz-gold2); }
.qz-bar .sp { flex: 1; }
.qz-bar img { height: 34px; width: auto; }
.qz-ico { font-size: 4.8rem; line-height: 1; }
.qz-pts { font-size: 2.1rem; font-weight: 800; color: var(--qz-gold2); }
.qz-ok-bg { background: linear-gradient(180deg, #17402c, var(--qz-bg) 70%); }
.qz-bad-bg { background: linear-gradient(180deg, #45181f, var(--qz-bg) 70%); }
.qz-c0 { background: var(--qz-a0); } .qz-c1 { background: var(--qz-a1); } .qz-c2 { background: var(--qz-a2); } .qz-c3 { background: var(--qz-a3); }
.qz-ans { border: 0; border-radius: 14px; color: #fff; font-weight: 700; display: flex; align-items: center; gap: 12px; padding: 16px 18px; text-align: start; min-height: 76px; font-size: clamp(1rem, 2.3vw, 1.5rem); }
.qz-ans .sh { font-size: 1.35em; opacity: .9; flex: none; }
.qz-ans .n { margin-inline-start: auto; background: rgba(0,0,0,.28); border-radius: 99px; padding: 2px 12px; flex: none; }
.qz-ans.dim { opacity: .25; }
.qz-ans.right { box-shadow: 0 0 0 4px #fff inset; }
.qz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
/* player */
.qz-full { width: 100%; max-width: 540px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.qz-row { display: flex; align-items: center; gap: 10px; }
.qz-row .sp { flex: 1; }
.qz-pq { font-size: 1.15rem; font-weight: 700; line-height: 1.75; margin: 0; }
.qz-pimg { max-width: 100%; max-height: 28vh; border-radius: 12px; align-self: center; }
.qz-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 46vh; }
.qz-pgrid .qz-ans { flex-direction: column; justify-content: center; text-align: center; min-height: 100px; font-size: 1.05rem; cursor: pointer; }
.qz-pgrid .qz-ans .sh { font-size: 2rem; }
.qz-timer-s { font-weight: 800; color: var(--qz-gold2); font-size: 1.2rem; min-width: 2.2em; text-align: center; }
/* host big screen */
.qz-pinbox { display: flex; gap: 30px; align-items: center; justify-content: center; flex-wrap: wrap; }
.qz-pin { font-size: clamp(3rem, 10vw, 6.2rem); font-weight: 800; letter-spacing: .14em; color: var(--qz-gold2); direction: ltr; line-height: 1; }
.qz-qr { background: #fff; padding: 12px; border-radius: 14px; width: 200px; height: 200px; }
.qz-qr svg { width: 100%; height: 100%; display: block; }
.qz-url { direction: ltr; font-weight: 700; font-size: 1.15rem; }
.qz-count { font-size: 2.4rem; font-weight: 800; color: var(--qz-gold2); }
.qz-names { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-height: 34vh; overflow: auto; max-width: 1000px; }
.qz-name { background: var(--qz-panel2); border: 1px solid var(--qz-line); padding: 6px 12px; border-radius: 99px; display: inline-flex; gap: 6px; align-items: center; animation: qz-pop .3s ease; }
.qz-name button { background: none; border: 0; color: var(--qz-muted); cursor: pointer; padding: 0 2px; font-size: 1rem; }
@keyframes qz-pop { from { transform: scale(.6); opacity: 0; } }
.qz-wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 22px; align-items: center; text-align: center; flex: 1; }
.qz-qtext { font-size: clamp(1.4rem, 3.6vw, 2.6rem); font-weight: 800; line-height: 1.6; margin: 0; }
.qz-himg { max-height: 34vh; max-width: 70%; border-radius: 14px; }
.qz-ring { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 2.1rem; font-weight: 800; border: 4px solid var(--qz-gold); color: var(--qz-gold2); }
.qz-bars { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 680px; }
.qz-lb { display: flex; align-items: center; gap: 12px; background: var(--qz-panel); border: 1px solid var(--qz-line); border-radius: 12px; padding: 12px 16px; font-size: 1.25rem; animation: qz-pop .35s ease both; }
.qz-lb .r { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--qz-panel2); font-weight: 800; flex: none; }
.qz-lb.first .r { background: var(--qz-gold); color: #19130a; }
.qz-lb .s { margin-inline-start: auto; font-weight: 800; color: var(--qz-gold2); }
.qz-podium { display: flex; align-items: flex-end; gap: 14px; justify-content: center; }
.qz-pod { width: 160px; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; align-items: center; padding: 12px 8px; background: var(--qz-panel); border: 1px solid var(--qz-line); }
.qz-pod .nm { font-weight: 800; font-size: 1.15rem; word-break: break-word; }
.qz-pod .md { font-size: 2.1rem; }
.qz-pod.p1 { height: 240px; border-color: var(--qz-gold); } .qz-pod.p2 { height: 180px; } .qz-pod.p3 { height: 140px; }
.qz-list { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 12px; }
.qz-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qz-item .sp { flex: 1; }
.qz-item form { display: flex; gap: 8px; align-items: center; margin: 0; }
.qz-item select { background: var(--qz-panel2); border: 1px solid var(--qz-line); border-radius: 10px; padding: 9px; }
.qz-tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.qz-tbl td, .qz-tbl th { padding: 8px; border-bottom: 1px solid var(--qz-line); text-align: start; }
@media (max-width: 640px) { .qz-grid { grid-template-columns: 1fr; } .qz-pod { width: 30vw; } }
@media (prefers-reduced-motion: reduce) { .qz-name, .qz-lb { animation: none; } }