/* HTFC Football Quiz. Scoped under .qz; leaderboard styles come from /games/games.css */
.qz-wrap{padding:110px 0 30px}
.qz{max-width:560px;margin:0 auto;font-family:"Saira",system-ui,-apple-system,"Segoe UI",sans-serif}
.qz-title{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.qz-title img{width:52px;height:auto;flex:none}
.qz-title .club{color:var(--red);font-weight:700;font-size:.9rem;margin:0}
.qz-title h1{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:clamp(2.2rem,9vw,3rem);line-height:.95;text-transform:uppercase;margin:0}
.qz-card{scroll-margin-top:96px;position:relative;background:linear-gradient(160deg,#0f1f47,#08122b 70%);color:#fff;border-radius:22px;padding:22px 18px;box-shadow:0 24px 50px -30px rgba(8,18,43,.6);overflow:hidden;min-height:430px}
.qz-card::before{content:"";position:absolute;inset:auto -40px -60px auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(rgba(245,183,0,.18),transparent 70%);pointer-events:none}
.qz-card[hidden]{display:none}
.qz-card h2{font-family:"Saira Condensed","Arial Narrow",sans-serif;font-weight:800;font-size:2rem;line-height:1;text-transform:uppercase;margin:0 0 10px}
.qz-card p{margin:0}
.qz-rules{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:8px}
.qz-rules li{display:flex;gap:10px;align-items:center;font-size:.95rem;color:#dbe4f7}
.qz-rules b{display:inline-grid;place-items:center;min-width:38px;height:30px;padding:0 8px;border-radius:8px;background:rgba(245,183,0,.16);color:#f5b700;font:800 1rem "Saira Condensed",sans-serif}
.qz-card label{display:block;font-weight:700;font-size:.9rem;margin:6px 0 6px}
.qz-card input[type=text]{width:100%;min-height:50px;padding:10px 14px;border-radius:12px;border:2px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:600 1.05rem "Saira",sans-serif}
.qz-card input[type=text]::placeholder{color:rgba(255,255,255,.5)}
.qz-card .hint{font-size:.85rem;color:#b9c6e4;margin-top:6px}
.qz-card .err{color:#ff8d9b;font-weight:700;font-size:.92rem;min-height:1.3em;margin-top:6px}
.qz-card .welcome{color:#f5b700;font-weight:700;min-height:1.4em}
.qz-card .notice{font-size:.8rem;color:#9fb0d4;margin-top:12px}
.qz-card .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qz-go{display:block;width:100%;min-height:54px;margin-top:10px;border:0;border-radius:14px;background:#f5b700;color:#08122b;font:800 1.15rem "Saira Condensed",sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:transform .15s}
.qz-go:hover{transform:translateY(-1px)}
.qz-link{display:inline-flex;align-items:center;min-height:44px;background:none;border:0;padding:0;color:#9fc1ff;font:700 .92rem "Saira",sans-serif;text-decoration:underline;cursor:pointer}

/* question screen */
.qz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:700;font-size:.9rem;color:#b9c6e4}
.qz-score{position:relative;display:flex;align-items:baseline;gap:6px;color:#fff}
.qz-score strong{font:800 1.6rem "Saira Condensed",sans-serif;color:#f5b700}
.qz-plus{position:absolute;right:0;top:-18px;font:800 1.3rem "Saira Condensed",sans-serif;color:#7CFFB2;animation:qzUp 1.1s ease-out forwards;pointer-events:none}
@keyframes qzUp{from{opacity:0;transform:translateY(8px)}20%{opacity:1}to{opacity:0;transform:translateY(-22px)}}
.qz-dots{display:flex;gap:5px;margin:10px 0 12px}
.qz-dots i{flex:1;height:6px;min-height:0;border-radius:3px;background:rgba(255,255,255,.15)}
.qz-dots i.ok{background:#2ecc71}.qz-dots i.no{background:#e0243c}.qz-dots i.now{background:#f5b700}
.qz-timer{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.qz-timer span{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,#2ecc71,#f5b700);border-radius:5px}
.qz-timer.low span{background:#e0243c}
.qz-tleft{display:flex;justify-content:space-between;font-size:.8rem;color:#9fb0d4;margin-top:4px}
.qz-diff{display:inline-block;font-weight:800;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#dbe4f7;margin-top:14px}
.qz-diff.d2{background:rgba(42,109,244,.3)}.qz-diff.d3{background:rgba(224,36,60,.35)}
.qz-q{font:700 1.25rem/1.35 "Saira",sans-serif;margin:10px 0 16px!important;min-height:3.4em}
.qz-opts{display:grid;gap:10px}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:14px;border:2px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:600 1rem/1.3 "Saira",sans-serif;text-align:left;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.qz-opt:hover:not(:disabled){background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)}
.qz-opt .k{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.12);font:800 .95rem "Saira Condensed",sans-serif}
.qz-opt:disabled{cursor:default}
.qz-opt.right{background:rgba(46,204,113,.25);border-color:#2ecc71}
.qz-opt.right .k{background:#2ecc71;color:#08122b}
.qz-opt.wrong{background:rgba(224,36,60,.25);border-color:#e0243c}
.qz-opt.wrong .k{background:#e0243c}
.qz-opt.dim{opacity:.55}
.qz-feedback{min-height:1.6em;margin-top:12px!important;font-weight:700}
.qz-feedback.ok{color:#7CFFB2}.qz-feedback.no{color:#ff8d9b}
.qz-next{margin-top:10px}

/* end screen */
.qz-end{text-align:center}
.qz-end .big{font:800 4rem/1 "Saira Condensed",sans-serif;color:#f5b700;margin:6px 0 2px}
.qz-end .who{font-weight:700;color:#dbe4f7}
.qz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.qz-stats div{background:rgba(255,255,255,.07);border-radius:12px;padding:10px 6px}
.qz-stats b{display:block;font:800 1.6rem "Saira Condensed",sans-serif}
.qz-stats small{color:#b9c6e4;font-size:.78rem}
.qz-end .save{font-size:.88rem;color:#b9c6e4;min-height:1.4em}
.qz-review{text-align:left;margin-top:14px;background:rgba(255,255,255,.05);border-radius:12px}
.qz-review summary{min-height:44px;display:flex;align-items:center;padding:0 12px;font-weight:700;cursor:pointer}
.qz-review ol{margin:0;padding:0 14px 12px 34px;font-size:.88rem;color:#dbe4f7;display:grid;gap:6px}
.qz-review .yes{color:#7CFFB2}.qz-review .nope{color:#ff8d9b}

.qz :focus-visible{outline:3px solid #f5b700;outline-offset:3px}
.qz-help{font-size:.85rem;color:var(--muted);margin-top:12px}
@media (max-width:380px){.qz-card{padding:18px 14px}.qz-q{font-size:1.12rem}}
@media (prefers-reduced-motion:reduce){.qz *,.qz *::before{animation:none!important;transition:none!important}}