:root{color-scheme:dark;--navy:#0a1328;--panel:#132440;--edge:#354d73;--gold:#ffcd76;--soft:#bccae0;--green:#1c634f;--red:#873e4d;font-family:Arial,system-ui,sans-serif;color:#fff;background:var(--navy)}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 83% 12%,#253757 0,transparent 58%),var(--navy);display:flex;flex-direction:column}
body:before{content:"";height:5px;background:linear-gradient(90deg,#7c2437 0 37%,#f0d9a8 37% 62%,#344c7e 62%);position:fixed;inset:0 0 auto;z-index:4}
.top,footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px clamp(20px,5vw,78px);z-index:2}
.brand,.kicker{color:var(--gold);font-size:clamp(.75rem,1.2vw,1.1rem);letter-spacing:.115em;font-weight:800;text-transform:uppercase}
main{margin:auto;width:min(100%,1510px);padding:clamp(24px,5vw,80px);outline:none;position:relative;z-index:1}
body.cover{background-image:linear-gradient(90deg,#0a13281a,#0a132800),var(--cover);background-size:cover;background-position:center}
body.cover main{width:100%;max-width:none}body.cover .hero{max-width:min(49vw,620px)}
body.cover .hero h1{font-size:clamp(2.25rem,5.4vw,6.1rem);line-height:.99}
body.cover .hero strong{color:var(--gold);font-size:clamp(1.1rem,2.7vw,3.1rem);display:block;margin-top:18px}
h1,h2,p{margin:0}h1,h2{line-height:1.13}h1{font-size:clamp(1.95rem,4.1vw,5.5rem);max-width:26ch;margin:10px 0 20px}h2{font-size:clamp(1.4rem,2.7vw,2.8rem);margin:10px 0 16px}
p,li{font-size:clamp(1rem,1.55vw,1.55rem);line-height:1.47;color:var(--soft)}ol{margin:20px 0;padding-left:1.5em;display:grid;gap:10px}
button,input{font:inherit;border-radius:7px}button{color:#f7f8fa;border:1px solid var(--edge);background:#213657;padding:.78em 1em;font-weight:700;cursor:pointer}
button:hover:not(:disabled){border-color:var(--gold);background:#2b4670}button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}button:disabled{opacity:.5;cursor:default}
.primary{background:var(--gold);border-color:var(--gold);color:#18213a}.primary:hover:not(:disabled){background:#ffe1a7;color:#18213a}.danger{background:var(--red)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:23px}.choices,.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:25px 0 14px}
.choices button,.answers button{font-size:clamp(1.05rem,2vw,2.1rem);min-height:clamp(57px,7vw,112px);text-align:left;padding:12px 17px}.answers button{display:flex;align-items:center;gap:15px}
.letter{color:var(--gold);flex:none;font-size:.8em}.answers button.right{background:var(--green);border-color:#77bf9b;opacity:1}.answers button.wrong{background:#4e2b3d;opacity:.88}
.status{font-size:clamp(1rem,1.65vw,1.5rem);font-weight:800;color:var(--gold)}.error{color:#ffd5db;min-height:1.4em}
.login{max-width:600px;padding:clamp(18px,4vw,44px);border:1px solid var(--edge);background:#0e1c33;border-radius:14px;box-shadow:0 24px 80px #0004}
label{display:block;color:var(--soft);font-weight:700;margin:12px 0 7px}input{background:#101c33;color:#fff;border:1px solid var(--edge);padding:.75em;max-width:100%}
.jokers{display:grid;gap:15px;max-width:930px}.jokers section{border-bottom:1px solid var(--edge);padding-bottom:12px}.jokers strong{color:var(--gold);font-size:1.15rem}
.media{max-width:min(100%,850px);max-height:52vh;object-fit:contain;border-radius:8px;margin-top:14px;background:#070e1c}
.with-photo{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,1.3fr);gap:20px;align-items:start}.with-photo .answers{grid-template-columns:1fr;margin-top:14px}.with-photo .media{width:100%}
.count{font-size:clamp(2rem,7vw,7rem);font-weight:800;color:var(--gold)}
footer[hidden]{display:none}
@media(max-width:720px){.with-photo{display:block}body.cover{background-position:62% center}body.cover .hero{max-width:100%;padding:20px;background:#0a1328dc;border-radius:10px}.choices,.answers{gap:8px}.top,footer{padding:12px}.row{gap:8px}}