*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif}body.light{color:#111;background:#f2f2f2}body.dark{color:#fff;background:#121212}.app{justify-content:center;align-items:center;min-height:100vh;display:flex}.container{width:100%;max-width:375px;padding:12px}.card{color:#111;text-align:center;background:#fff;border-radius:24px;width:100%;max-width:375px;padding:22px;box-shadow:0 10px 30px #0000001f}body.dark .card{color:#fff;background:#1e1e1e}h1{margin:0 0 22px;font-size:38px;line-height:1}.upper-h1{text-transform:uppercase}p{margin:0}.menu{flex-direction:column;gap:12px;margin-top:22px;display:flex}.btn{cursor:pointer;color:#fff;background:#3b82f6;border:none;border-radius:16px;padding:14px 18px;font-size:17px;font-weight:600;transition:transform .15s,background .15s,box-shadow .15s;box-shadow:0 4px 12px #3b82f640}.btn:hover{background:#2563eb;transform:translateY(-1px)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.65;cursor:not-allowed;transform:none}.btn{justify-content:center;align-items:center;gap:12px;display:flex}.btn svg{width:24px;height:24px}.btn-secondary{color:#fff;box-shadow:none;background:#3a3a3a}.btn-secondary:hover{background:#483a3a}.btn-secondary:active{background:#555}.btn-small{color:#fff;width:auto;box-shadow:none;background:#3a3a3a;padding:13px 22px}.btn-small:hover{background:#3a483a}.btn-full{width:100%}.page-nav{justify-content:flex-end;gap:12px;margin-bottom:16px;display:flex}.nav-icon-btn{cursor:pointer;width:36px;height:36px;color:inherit;background:0 0;border:none;justify-content:center;align-items:center;font-size:22px;transition:transform .15s,opacity .15s;display:flex}.nav-icon-btn:hover{opacity:.8;transform:scale(1.1)}label{text-align:left;flex-direction:column;gap:8px;margin:18px 0;font-weight:700;display:flex}select,input{border-radius:16px;width:100%;padding:10px;font-size:16px}input[type=range]{accent-color:#3b82f6;border-radius:0;height:28px;padding:0}.records-table td:nth-child(2){text-overflow:ellipsis;white-space:nowrap;max-width:0;overflow:hidden}.timer{background:#2f2f2f;border-radius:8px;width:100%;height:18px;margin-bottom:28px;overflow:hidden}.timer-fill{background:#8b8b8b;height:100%;transition:width 50ms linear}.game-header{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:24px;display:flex}.question-box,.score-box{flex-direction:column;justify-content:flex-start;display:flex}.question-box{flex:1;min-width:0}.score-box{flex-shrink:0;align-items:flex-end;min-width:80px}.game-label{height:20px;margin:0 0 14px;font-size:18px;font-weight:700;line-height:1}.invisible-label{visibility:hidden}.question,.score{white-space:nowrap;margin:0;font-size:clamp(34px,11vw,46px);line-height:1}.question{text-align:left}.score{color:#777}.answers-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;display:grid}.answer-btn{cursor:pointer;color:#111;background:#ececf1;border:none;border-radius:18px;min-height:88px;padding:20px 10px;font-size:26px;font-weight:700;transition:transform .15s,background .15s}.answer-btn:hover:not(:disabled){transform:scale(1.03)}.answer-btn.correct{color:#fff;background:#22c55e}.answer-btn.wrong{color:#fff;background:#ef4444}.answer-btn:disabled{cursor:not-allowed}.end-stats{justify-content:space-between;gap:24px;margin:28px 0;display:flex}.end-stats>div{flex:1}.end-label{margin:0 0 12px;font-size:17px;font-weight:700}.end-stats h2{margin:0;font-size:34px;line-height:1}.name-input{text-align:center;width:100%;color:inherit;background:0 0;border:1px solid #333;border-radius:10px;margin-bottom:22px;padding:16px;font-size:26px}.records-table{border-collapse:collapse;table-layout:fixed;margin-top:22px}.records-table th svg{font-size:18px}.records-table th,.records-table td{text-align:center;text-overflow:ellipsis;white-space:nowrap;border:1px solid;height:42px;padding:4px;font-size:17px;font-weight:700;overflow:hidden}.records-table th{font-size:16px}.records-table th:first-child,.records-table td:first-child{width:34px}.records-table th:nth-child(2),.records-table td:nth-child(2){width:116px}.records-table th:nth-child(3),.records-table td:nth-child(3),.records-table th:nth-child(4),.records-table td:nth-child(4),.records-table th:nth-child(5),.records-table td:nth-child(5),.records-table th:nth-child(6),.records-table td:nth-child(6){width:43px}.card{animation:.28s both cardFadeIn}@keyframes cardFadeIn{0%{opacity:0;transform:translateY(10px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.card>*{animation:.32s both contentFadeIn}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.skeleton{background:linear-gradient(90deg,#e5e5e5 25%,#f5f5f5 50%,#e5e5e5 75%) 0 0/200% 100%;border-radius:6px;width:100%;height:18px;animation:2.2s infinite skeleton-loading}body.dark .skeleton{background:linear-gradient(90deg,#2a2a2a 25%,#3a3a3a 50%,#2a2a2a 75%) 0 0/200% 100%}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%,to{content:"..."}}.loading-text{align-items:center;display:inline-flex}.loading-dots:after{content:"";animation:1.2s steps(4,end) infinite dots}
