:root{color:#17324d;font-synthesis:none;background:#eef5ff;font-family:Inter,ui-rounded,Nunito,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 10% 0,#77aaff38,#0000 28%),radial-gradient(circle at 95% 10%,#ffbe5a33,#0000 26%),linear-gradient(#f8fbff 0%,#eaf3ff 100%);min-width:320px;min-height:100vh;margin:0}button{font:inherit}button:focus-visible{outline-offset:2px;outline:4px solid #2563eb40}.app{width:min(1180px,100% - 28px);margin:0 auto;padding:18px 0 42px}.topbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.brand{align-items:center;gap:10px;display:flex}.brand-icon{color:#fff;background:linear-gradient(135deg,#2463eb,#4c8dff);border-radius:14px;place-items:center;width:46px;height:46px;display:grid;box-shadow:0 8px 22px #2563eb3d}.brand b{font-size:1.12rem;display:block}.brand span{color:#66788d;margin-top:2px;font-size:.86rem;display:block}.icon-btn{color:#2d5f97;cursor:pointer;background:#fff;border:0;border-radius:13px;width:44px;height:44px;box-shadow:0 6px 18px #294e781f}.stats-grid{grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:10px;display:grid}.stat{background:#ffffffe0;border:1px solid #dbe8f5;border-radius:16px;padding:10px 13px;box-shadow:0 5px 16px #264b7614}.stat span{color:#73869a;text-transform:uppercase;letter-spacing:.04em;align-items:center;gap:5px;font-size:.76rem;font-weight:700;display:flex}.stat strong{color:#1d426a;margin-top:3px;font-size:1.3rem;display:block}.stat strong small{color:#7f90a0;margin-left:2px;font-size:.78rem}.stat.score strong{color:#2463eb}.stat.timer strong{color:#2f8c56}.stat.timer.danger{background:#fff2f2;border-color:#ffcaca}.stat.timer.danger strong{color:#d53838}.progress-wrap{background:#dce8f4;border-radius:999px;height:10px;margin:0 0 14px;overflow:hidden}.progress-bar{border-radius:inherit;background:linear-gradient(90deg,#2463eb,#61a6ff);height:100%;transition:width .3s}.game-card{background:#fffffff5;border:1px solid #d7e5f3;border-radius:24px;padding:22px;box-shadow:0 18px 50px #2e507824}.question-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.category{color:#2463eb;background:#eaf2ff;border-radius:999px;padding:7px 11px;font-size:.82rem;font-weight:800}.accuracy{color:#788a9d;font-size:.82rem;font-weight:700}.game-card h1{color:#163c63;margin:8px 0 16px;font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.2}.question-image{object-fit:contain;background:#f7fbff;border:1px solid #e0ebf5;border-radius:20px;width:min(660px,100%);max-height:330px;margin:0 auto 18px;display:block}.options-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.option-btn{color:#183b5f;text-align:left;cursor:pointer;background:#f9fcff;border:2px solid #d7e5f3;border-radius:18px;align-items:center;gap:12px;min-height:78px;padding:12px 14px;font-weight:800;transition:all .16s;display:flex}.option-btn:hover:not(:disabled){background:#f1f7ff;border-color:#76a8e7;transform:translateY(-2px);box-shadow:0 8px 18px #295d981a}.option-letter{color:#2463eb;background:#e2edff;border-radius:12px;flex:0 0 38px;place-items:center;width:38px;height:38px;font-size:1.05rem;display:grid}.option-btn.correct{color:#216b39;background:#ebf9ef;border-color:#5eb778}.option-btn.correct .option-letter{color:#fff;background:#65b97b}.option-btn.wrong{color:#a43838;background:#fff0f0;border-color:#e16c6c}.option-btn.wrong .option-letter{color:#fff;background:#df6666}.feedback{border-radius:16px;align-items:flex-start;gap:10px;margin-top:14px;padding:12px 14px;display:flex}.feedback svg{margin-top:2px}.feedback b{font-size:1rem}.feedback p{margin:3px 0 0;font-size:.9rem;line-height:1.35}.feedback.correct{color:#246b3c;background:#ecf9ef}.feedback.wrong,.feedback.timeout{color:#9e3f3f;background:#fff0f0}.rules-line{color:#8494a5;border-top:1px dashed #d7e4f0;justify-content:space-between;gap:14px;margin-top:15px;padding-top:11px;font-size:.75rem;display:flex}.finished-page{grid-template-columns:minmax(0,1fr) 340px;gap:18px;padding-top:40px;display:grid}.finish-card,.ranking-card{background:#fff;border:1px solid #d7e5f3;border-radius:24px;box-shadow:0 18px 50px #2e507824}.finish-card{text-align:center;padding:30px}.finish-icon{color:#c88b07;background:#fff4c8;border-radius:24px;place-items:center;width:86px;height:86px;margin:0 auto 14px;display:grid}.eyebrow{letter-spacing:.16em;color:#6e8196;font-size:.75rem;font-weight:900}.finish-card h1{color:#163c63;margin:7px 0}.finish-sub{color:#74869a;max-width:640px;margin:0 auto 22px}.finish-grid{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px;display:grid}.finish-grid div{background:#f4f8fc;border-radius:16px;padding:14px 8px}.finish-grid strong{color:#21558a;font-size:1.45rem;display:block}.finish-grid span{color:#798b9d;margin-top:3px;font-size:.78rem;display:block}.primary-btn{color:#fff;cursor:pointer;background:#2463eb;border:0;border-radius:14px;align-items:center;gap:8px;padding:13px 18px;font-weight:900;display:inline-flex}.ranking-card{padding:22px}.ranking-card h2{color:#244c77;align-items:center;gap:8px;margin:0 0 14px;display:flex}.ranking-card ol{gap:8px;margin:0;padding:0;list-style:none;display:grid}.ranking-card li{background:#f5f9fd;border-radius:12px;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;padding:10px;display:grid}.ranking-card li span{color:#7990a8;font-weight:900}.ranking-card li b{color:#24588e}.ranking-card li small{color:#7d8d9c}@media (width<=760px){.stats-grid{grid-template-columns:repeat(2,1fr)}.stat.timer{grid-column:span 2}.options-grid{grid-template-columns:1fr}.rules-line{flex-direction:column}.finished-page{grid-template-columns:1fr}.finish-grid{grid-template-columns:repeat(2,1fr)}}.start-page{place-items:center;min-height:100vh;padding:28px 18px;display:grid}.start-card{background:#fffffff7;border:1px solid #d7e5f3;border-radius:30px;grid-template-columns:minmax(0,.92fr) minmax(380px,1.08fr);width:min(1080px,100%);min-height:600px;display:grid;overflow:hidden;box-shadow:0 24px 70px #2e50782e}.start-copy{flex-direction:column;justify-content:center;padding:clamp(30px,5vw,58px);display:flex}.start-brand{align-items:center;gap:14px;margin-bottom:22px;display:flex}.start-brand-icon{color:#fff;background:linear-gradient(135deg,#2463eb,#4c8dff);border-radius:20px;place-items:center;width:64px;height:64px;display:grid;box-shadow:0 12px 28px #2563eb40}.start-brand .eyebrow{margin:0 0 3px}.start-brand h1{color:#163c63;margin:0;font-size:clamp(2rem,5vw,3.15rem);line-height:1}.start-lead{color:#64788d;max-width:560px;margin:0 0 18px;font-size:1.03rem;line-height:1.55}.start-highlights{flex-wrap:wrap;gap:8px;margin-bottom:26px;display:flex}.start-highlights span{color:#315f91;background:#eef5ff;border-radius:12px;align-items:center;gap:7px;padding:8px 10px;font-size:.82rem;font-weight:800;display:inline-flex}.name-label{color:#294f77;margin-bottom:7px;font-size:.88rem;font-weight:900;display:block}.name-field{color:#6f8aa4;background:#f9fcff;border:2px solid #d6e4f2;border-radius:15px;align-items:center;gap:10px;padding:0 14px;transition:all .16s;display:flex}.name-field:focus-within{background:#fff;border-color:#4d8ee4;box-shadow:0 0 0 4px #2463eb17}.name-field.has-error{background:#fff7f7;border-color:#df6666}.name-field input{color:#183b5f;background:0 0;border:0;outline:0;width:100%;min-width:0;height:52px;font-size:1rem;font-weight:800}.name-field input::placeholder{color:#9aa9b8;font-weight:600}.name-error{color:#bd4141;margin:7px 0 0;font-size:.82rem;font-weight:800}.start-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2463eb,#397eea);border:0;border-radius:15px;justify-content:center;align-items:center;gap:9px;width:100%;min-height:54px;margin-top:14px;font-size:1rem;font-weight:900;transition:all .16s;display:flex;box-shadow:0 12px 24px #2563eb38}.start-btn:hover{transform:translateY(-2px);box-shadow:0 16px 28px #2563eb47}.start-note{text-align:center;color:#8a99a9;margin:10px 0 0;font-size:.76rem}.start-visual{background:linear-gradient(145deg,#e9f4ff,#f9fbff);min-height:600px;position:relative;overflow:hidden}.start-visual:after{content:"";pointer-events:none;background:linear-gradient(90deg,#ffffff0f,#0000 38%);position:absolute;inset:0}.start-visual img{object-fit:cover;width:100%;height:100%;display:block}.start-badge{z-index:1;text-align:center;color:#fff;background:#2463eb;border:6px solid #ffffffe6;border-radius:50%;place-content:center;width:112px;height:112px;display:grid;position:absolute;bottom:24px;right:24px;box-shadow:0 10px 30px #1f4f8247}.start-badge b{font-size:2rem;line-height:1}.start-badge span{text-transform:uppercase;letter-spacing:.04em;margin-top:2px;font-size:.78rem;font-weight:900}.rank-player{flex-direction:column;min-width:0;display:flex}.rank-player b{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.rank-player small{margin-top:2px}.ranking-card li>strong{white-space:nowrap;color:#24588e}.footer-credits{text-align:center;color:#64748b;border-top:1px solid #0000000d;margin-top:32px;padding-top:20px;font-size:.875rem}.footer-credits a{color:#2463eb;font-weight:600;text-decoration:none}.footer-credits a:hover{text-decoration:underline}@media (width<=840px){.start-card{grid-template-columns:1fr;min-height:0}.start-copy{padding:30px 24px}.start-visual{order:-1;min-height:290px}.start-visual img{min-height:290px}.start-badge{width:92px;height:92px;bottom:16px;right:16px}.start-badge b{font-size:1.65rem}}@media (width<=520px){.start-page{padding:12px}.start-card{border-radius:22px}.start-copy{padding:24px 18px}.start-visual,.start-visual img{min-height:220px}.start-brand-icon{border-radius:17px;width:54px;height:54px}.start-highlights{display:grid}}