@import "https://fonts.googleapis.com/css2?family=Codystar&display=swap";
:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}html,body{max-width:100vw;overflow-x:hidden}body{color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Arial,Helvetica,sans-serif}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}
:root{--color-darkest:#343a40;--color-dark:#495057;--color-medium:#ced4da;--color-light:#f1f3f5;--color-theme:#1098ad;--color-accent:#ffa94d;--color-accent-dark:#c76819;--color-primary:#0d6efd;--color-primary-hover:#0b5ed7;--color-info:#0dcaf0;--color-info-hover:#31d2f2}*{box-sizing:border-box;margin:0;padding:0}html{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:62.5%}body{min-height:100vh;color:var(--color-light);background-color:var(--color-darkest);padding:3.2rem}@media (max-width:768px){html{font-size:55%}body{padding:1.6rem}}@media (max-width:480px){html{font-size:50%}body{padding:1.2rem}}.app{flex-direction:column;justify-content:center;align-items:center;display:flex}.main{width:100%;max-width:50rem}.app-header{justify-content:space-between;align-items:center;width:100%;max-width:66rem;margin-bottom:4rem;display:flex}@media (max-width:768px){.app-header{text-align:center;flex-direction:column;gap:2rem;margin-bottom:3rem}}.error{text-align:center;background-color:#495057;border-radius:100px;padding:2rem;font-size:1.6rem;font-weight:500}@media (max-width:480px){.error{border-radius:20px;padding:1.5rem;font-size:1.4rem}}img{object-fit:contain;width:14rem;height:auto;max-height:10rem}@media (max-width:768px){img{width:12rem;max-height:8rem}}@media (max-width:480px){img{width:10rem;max-height:6rem}}h1{font-family:Codystar;font-size:5.6rem}@media (max-width:768px){h1{font-size:4.5rem}}@media (max-width:480px){h1{font-size:3.5rem}}h2{margin-bottom:2rem;font-size:3.6rem}@media (max-width:768px){h2{margin-bottom:1.5rem;font-size:3rem}}@media (max-width:480px){h2{margin-bottom:1.2rem;font-size:2.5rem}}h3{margin-bottom:4rem;font-size:2.4rem;font-weight:600}@media (max-width:768px){h3{margin-bottom:3rem;font-size:2.2rem}}@media (max-width:480px){h3{margin-bottom:2rem;font-size:2rem}}h4{margin-bottom:2.4rem;font-size:2.2rem;font-weight:600}@media (max-width:768px){h4{margin-bottom:2rem;font-size:2rem}}@media (max-width:480px){h4{margin-bottom:1.6rem;font-size:1.8rem}}.start{text-align:center;flex-direction:column;align-items:center;width:100%;display:flex}@media (max-width:480px){.start{padding:0 1rem}}.progress{color:var(--color-medium);grid-template-columns:auto auto;justify-content:space-between;gap:1.2rem;margin-bottom:4rem;font-size:1.8rem;display:grid}@media (max-width:768px){.progress{gap:1rem;margin-bottom:3rem;font-size:1.6rem}}@media (max-width:480px){.progress{gap:.8rem;margin-bottom:2rem;font-size:1.4rem}}progress{-webkit-appearance:none;grid-column:1/-1;width:100%;height:12px}@media (max-width:480px){progress{height:10px}}::-webkit-progress-bar{background-color:var(--color-medium);border-radius:100px}::-webkit-progress-value{background-color:var(--color-theme);border-radius:100px}.btn{color:var(--color-light);border:2px solid var(--color-dark);background-color:var(--color-dark);cursor:pointer;touch-action:manipulation;border-radius:100px;min-height:44px;padding:1.2rem 2.4rem;font-family:inherit;font-size:2rem;transition:all .3s;display:block}@media (max-width:768px){.btn{min-height:48px;padding:1.4rem 2rem;font-size:1.8rem}}@media (max-width:480px){.btn{border-radius:12px;min-height:52px;padding:1.6rem 2rem;font-size:1.6rem}}.btn:not([disabled]):hover{background-color:var(--color-darkest)}@media (hover:none) and (pointer:coarse){.btn:not([disabled]):hover{background-color:var(--color-dark)}.btn-option:not([disabled]):hover{transform:none}}.btn-option:not([disabled]):hover{transform:translate(1.2rem)}@media (max-width:480px){.btn-option:not([disabled]):hover{transform:translate(.8rem)}}.btn[disabled]:hover{cursor:not-allowed}.btn-ui{float:right;background-color:var(--color-primary)!important;border:2px solid var(--color-primary)!important;color:#fff!important}.btn-ui:not([disabled]):hover{background-color:var(--color-primary-hover)!important;border:2px solid var(--color-primary-hover)!important}@media (max-width:768px){.btn-ui{float:none;width:100%;margin-top:1rem}}@media (hover:none) and (pointer:coarse){.btn-ui:not([disabled]):hover{background-color:var(--color-primary)!important;border:2px solid var(--color-primary)!important}}.options{flex-direction:column;gap:1.2rem;margin-bottom:3.2rem;display:flex}@media (max-width:768px){.options{gap:1rem;margin-bottom:2.5rem}}@media (max-width:480px){.options{gap:.8rem;margin-bottom:2rem}}.btn-option{text-align:left;width:100%}.btn-option.correct{background-color:var(--color-theme);border:2px solid var(--color-theme);color:var(--color-light)}.btn-option.wrong{background-color:var(--color-accent);border:2px solid var(--color-accent);color:var(--color-darkest)}.answer{transform:translate(2rem)}@media (max-width:480px){.answer{transform:translate(1rem)}}.result{background-color:var(--color-theme);color:var(--color-light);text-align:center;border-radius:100px;margin-bottom:1.6rem;padding:2rem 8rem;font-size:2rem;font-weight:500}@media (max-width:768px){.result{border-radius:50px;padding:2rem 4rem;font-size:1.8rem}}@media (max-width:480px){.result{border-radius:20px;padding:1.5rem 2rem;font-size:1.6rem}}.result span{margin-right:4px;font-size:2.2rem}@media (max-width:768px){.result span{font-size:2rem}}@media (max-width:480px){.result span{margin-right:2px;font-size:1.8rem}}.highscore{text-align:center;margin-bottom:4.8rem;font-size:1.8rem}@media (max-width:768px){.highscore{margin-bottom:3.5rem;font-size:1.6rem}}@media (max-width:480px){.highscore{margin-bottom:2.5rem;font-size:1.4rem}}.loader-container{color:var(--color-medium);flex-direction:column;align-items:center;gap:1.6rem;margin-top:4rem;font-size:1.4rem;display:flex}@media (max-width:768px){.loader-container{gap:1.2rem;margin-top:3rem}}@media (max-width:480px){.loader-container{gap:1rem;margin-top:2rem;font-size:1.2rem}}.timer{float:left;color:var(--color-darkest);background-color:var(--color-info);border:2px solid var(--color-info);border-radius:100px;padding:1.35rem 2.8rem;font-size:1.8rem;font-weight:500}@media (max-width:768px){.timer{border-radius:50px;padding:1.2rem 2.4rem;font-size:1.6rem}}@media (max-width:480px){.timer{float:none;text-align:center;border-radius:12px;width:100%;margin-bottom:1rem;padding:1rem 2rem;font-size:1.4rem}}.loader{background-color:#0000;background-image:radial-gradient(circle closest-side,currentColor 90%,#0000),radial-gradient(circle closest-side,currentColor 90%,#0000),radial-gradient(circle closest-side,currentColor 90%,#0000);background-position:0%,50%,100%;background-repeat:no-repeat;background-size:33.3333% 12px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;width:50px;height:24px;animation:1s linear infinite loader}@media (max-width:480px){.loader{background-size:33.3333% 10px;width:40px;height:20px}}@keyframes loader{20%{background-position:0 0,50%,100%}40%{background-position:0 100%,50% 0,100%}60%{background-position:0%,50% 100%,100% 0}80%{background-position:0%,50%,100% 100%}}.counter{flex-direction:column;align-items:center;gap:1rem;margin:6rem;font-size:2rem;font-weight:700;display:flex}@media (max-width:768px){.counter{gap:.8rem;margin:4rem 2rem;font-size:1.8rem}}@media (max-width:480px){.counter{gap:.6rem;margin:3rem 1rem;font-size:1.6rem}}.counter *{font-size:inherit;padding:.8rem}@media (max-width:480px){.counter *{padding:.6rem}}.level-buttons{justify-content:center;gap:1.6rem;margin:2rem 0;display:flex}@media (max-width:768px){.level-buttons{flex-wrap:wrap;gap:1.2rem;margin:1.5rem 0}}@media (max-width:480px){.level-buttons{flex-direction:column;gap:1rem;margin:1rem 0}}.btn-level{background-color:var(--color-accent-dark);border:2px solid var(--color-accent-dark);color:#0a0a0a}@media (max-width:480px){.btn-level{width:100%;min-height:52px}}.btn-level:hover{background-color:var(--color-accent)!important;border:2px solid var(--color-accent)!important}@media (hover:none) and (pointer:coarse){.btn-level:hover{background-color:var(--color-accent-dark)!important;border:2px solid var(--color-accent-dark)!important}}.level-list{flex-direction:column;gap:1.5rem;width:100%;margin:3rem 0;display:flex}.level-card{background:linear-gradient(135deg,var(--color-dark),var(--color-darkest));border:2px solid var(--color-medium);cursor:pointer;border-radius:12px;align-items:center;padding:2rem;transition:all .3s;display:flex;position:relative;overflow:hidden;transform:translate(0)}.level-card:hover:not(.disabled):not(.selected){border-color:var(--color-primary);transform:translateY(-2px);box-shadow:0 8px 25px #0d6efd26}.level-card.disabled{opacity:.5;cursor:not-allowed;background:var(--color-dark)}.level-card.disabled:hover{border-color:var(--color-medium);box-shadow:none;transform:none}.level-card.selected{background:linear-gradient(135deg,#0d6efd1a,#0d6efd0d);transition:all .3s;transform:scale(1.02)translate(10px);box-shadow:0 0 0 2px #0d6efd4d;border-color:var(--color-primary)!important}.level-card.selected .level-header h4,.level-card.selected .level-arrow{color:var(--color-primary)}.level-icon{text-align:center;min-width:4rem;margin-right:2rem;font-size:3rem}.level-content{flex-direction:column;flex:1;gap:.8rem;display:flex}.level-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.level-header h4{color:var(--color-light);margin:0;font-size:2.2rem}.level-difficulty{background:var(--color-info);color:var(--color-darkest);border-radius:20px;padding:.4rem 1rem;font-size:1.2rem;font-weight:500}.level-description{color:var(--color-medium);margin:0;font-size:1.4rem;line-height:1.4}.level-stats{align-items:center;gap:2rem;margin-top:.5rem;display:flex}.level-count,.level-points{color:var(--color-info);font-size:1.3rem;font-weight:500}.level-arrow{color:var(--color-medium);margin-left:1rem;font-size:2rem;transition:transform .3s}.level-card:hover:not(.disabled) .level-arrow{color:var(--color-primary);transform:translate(5px)}.selected-indicator{background:var(--color-primary);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:2.5rem;height:2.5rem;font-size:1.4rem;font-weight:700;animation:.3s ease-out checkmark-appear;display:flex;position:absolute;top:1rem;right:1rem}@keyframes checkmark-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.level-info-selected{background:linear-gradient(135deg,var(--color-primary),var(--color-info));color:#fff;border-radius:12px;align-items:center;margin:2rem 0;padding:2rem;display:flex}.level-info-selected .level-icon{margin-right:2rem;font-size:3.5rem}.level-info-selected .level-details h3{margin:0 0 .5rem;font-size:2.4rem}.level-info-selected .level-details p{opacity:.9;margin:0;font-size:1.4rem}.level-stats{opacity:.8;margin-top:.5rem;font-size:1.3rem}.start-quiz-btn{background:linear-gradient(135deg,var(--color-primary),#0b5ed7);border:none;margin-top:3rem;padding:1.5rem 3rem;font-size:2.2rem;box-shadow:0 4px 15px #0d6efd4d}.start-quiz-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0d6efd66}.range-selection{flex-direction:column;align-items:center;gap:2rem;margin:2rem 0;display:flex}.range-input-group{align-items:center;gap:2rem;display:flex}.range-input-group label{color:var(--color-light);flex-direction:column;gap:.5rem;font-size:1.6rem;display:flex}.range-input{border:2px solid var(--color-medium);background-color:var(--color-light);color:var(--color-darkest);text-align:center;border-radius:8px;width:100px;padding:.8rem;font-size:1.6rem}.range-input:focus{border-color:var(--color-primary);outline:none}.range-info{color:var(--color-info);font-size:1.8rem;font-weight:500}.range-buttons{gap:1rem;display:flex}.selected-info,.instruction{color:var(--color-medium);margin-bottom:2rem;font-size:1.6rem}.selected-info{color:var(--color-info);font-weight:500}.level-count{opacity:.8;margin-top:.4rem;font-size:1.2rem;display:block}.quick-select-buttons{gap:1rem;margin-bottom:2rem;display:flex}.btn-quick{background-color:var(--color-medium);border:2px solid var(--color-medium);color:var(--color-darkest);padding:1rem 1.5rem;font-size:1.4rem}.btn-quick:hover{background-color:var(--color-info)!important;border-color:var(--color-info)!important;color:var(--color-darkest)!important}.divider{text-align:center;margin:2rem 0;position:relative}.divider:before{content:"";background-color:var(--color-medium);z-index:1;height:1px;position:absolute;top:50%;left:0;right:0}.divider span{background-color:var(--color-darkest);color:var(--color-medium);z-index:2;padding:0 1rem;font-size:1.3rem;position:relative}@media (max-width:768px){.level-list{gap:1.2rem;margin:2rem 0}.level-card{padding:1.5rem}.level-card.selected{transform:scale(1.02)translate(5px)}.level-icon{min-width:3rem;margin-right:1.5rem;font-size:2.5rem}.level-header h4{font-size:1.9rem}.level-difficulty{padding:.3rem .8rem;font-size:1.1rem}.level-description{font-size:1.3rem}.level-stats{gap:1.5rem}.level-info-selected{padding:1.5rem}.level-info-selected .level-icon{margin-right:1.5rem;font-size:3rem}.selected-indicator{width:2rem;height:2rem;font-size:1.2rem;top:.5rem;right:.5rem}.quick-select-buttons{flex-wrap:wrap;gap:.8rem}.btn-quick{flex:1;min-width:120px;padding:.9rem 1.2rem;font-size:1.3rem}}@media (max-width:480px){.level-card{text-align:center;flex-direction:column;padding:1.5rem 1rem}.level-card.selected{transform:scale(1.01)}.level-icon{margin-bottom:1rem;margin-right:0;font-size:2.8rem}.level-header{flex-direction:column;align-items:center;gap:.8rem}.level-header h4{font-size:1.8rem}.level-stats{justify-content:center;gap:2rem}.level-arrow{display:none}.level-info-selected{text-align:center;flex-direction:column;padding:1.5rem}.level-info-selected .level-icon{margin-bottom:1rem;margin-right:0}.start-quiz-btn{margin-top:2rem;padding:1.3rem 2rem;font-size:1.8rem}}