*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--blue: #00AEEF;--dark-blue: #0072BC;--green: #8DC63F;--dark-green: #39B54A;--orange: #F7941D;--red: #E31E24;--text: #2D2D2D;--radius: 24px}html{height:100%}body{font-family:Nunito,-apple-system,sans-serif;background:linear-gradient(150deg,#e8f4fd,#d1ecfd,#e8f4fd);color:var(--text);min-height:100%;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;overflow:hidden}#app{height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.screen{width:100%;height:100%;display:flex;flex-direction:column}.home{align-items:center;justify-content:center;padding:2rem;gap:1.5rem;text-align:center}.title{font-size:3rem;font-weight:900;color:var(--dark-blue);line-height:1.1}.subtitle{font-size:1.25rem;color:#666}.home-sections{display:flex;flex-direction:column;gap:1.2rem;width:100%;max-width:400px}.home-section{background:#fff9;border-radius:20px;padding:1rem 1.2rem 1.2rem}.section-label{font-size:1.15rem;font-weight:800;color:#888;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.6rem}.section-buttons{display:flex;gap:.7rem}.section-buttons .btn{flex:1}.btn{font-family:inherit;font-size:1.35rem;font-weight:800;padding:.9rem 1.5rem;border:none;border-radius:16px;cursor:pointer;transition:all .15s;box-shadow:0 4px 14px #00000026;color:#fff}.btn:active{transform:scale(.96)}.btn-flash{background:linear-gradient(135deg,#f7941d,#ffc20e)}.btn-flash-all{background:linear-gradient(135deg,#e8501e,#f7941d)}.btn-quiz{background:linear-gradient(135deg,#8dc63f,#39b54a)}.btn-quiz-all{background:linear-gradient(135deg,#006838,#39b54a)}.btn-retry{background:linear-gradient(135deg,var(--blue),var(--dark-blue))}.btn-home{background:linear-gradient(135deg,var(--orange),#FFC20E)}.top-bar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;flex-shrink:0}.top-btn{font-family:inherit;font-size:1rem;font-weight:800;padding:.45rem .9rem;border:none;border-radius:12px;background:#ffffffd9;color:var(--dark-blue);cursor:pointer;box-shadow:0 2px 8px #00000014;min-width:72px;text-align:center}.top-btn:active{transform:scale(.95)}.progress,.score-badge{font-size:1.15rem;font-weight:800;color:var(--dark-blue);background:#ffffffd9;padding:.35rem .9rem;border-radius:12px}.card-area{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:0 .5rem 1rem;min-height:0}.nav-btn{font-size:2.8rem;font-weight:900;background:#ffffffb3;border:none;border-radius:50%;width:56px;height:56px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--dark-blue);flex-shrink:0;transition:all .15s;box-shadow:0 2px 8px #00000014;line-height:1;padding:0 0 4px}.nav-btn:active{transform:scale(.9)}.nav-btn.hidden{visibility:hidden;pointer-events:none}.card-container{-webkit-perspective:800px;perspective:800px;width:min(300px,60vw);height:min(400px,62vh);cursor:pointer;flex-shrink:0}.card{width:100%;height:100%;position:relative;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1)}.card.flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;background:#fff;border:5px solid var(--blue);box-shadow:0 8px 30px #0000001a}.card-back{transform:rotateY(180deg)}.card-shape{width:70%;max-width:200px;aspect-ratio:1}.card-shape svg{width:100%;height:100%}.tap-hint{font-size:.95rem;color:#bbb;margin-top:.8rem}.card-name{font-size:1.8rem;font-weight:900;color:var(--dark-blue);margin-top:.8rem;text-align:center;line-height:1.2}.quiz-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1.2rem 1.5rem;gap:.8rem;min-height:0}.quiz-card{width:min(180px,40vw);aspect-ratio:1;background:#fff;border-radius:var(--radius);border:5px solid var(--blue);padding:1rem;box-shadow:0 8px 30px #0000001a;flex-shrink:0}.quiz-card svg{width:100%;height:100%}.quiz-prompt{font-size:1.4rem;font-weight:800;text-align:center}.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;width:100%;max-width:460px}.quiz-option{font-family:inherit;font-size:1.2rem;font-weight:800;padding:.85rem .5rem;border:4px solid var(--blue);border-radius:16px;background:#fff;color:var(--text);cursor:pointer;transition:all .15s;text-align:center;line-height:1.2}.quiz-option:active:not(.correct):not(.wrong){transform:scale(.96)}.quiz-option.correct{background:var(--green);border-color:#6ba030;color:#fff;animation:pop .35s ease}.quiz-option.wrong{background:var(--red);border-color:#b01820;color:#fff;animation:shake .4s ease}.quiz-feedback{font-size:1.3rem;font-weight:800;min-height:1.8rem;text-align:center}.quiz-feedback.is-correct{color:var(--dark-green)}.quiz-feedback.is-wrong{color:var(--dark-blue)}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.quiz-end{align-items:center;justify-content:center;padding:2rem;gap:1.5rem;text-align:center}.quiz-end h2{font-size:2.5rem;font-weight:900;color:var(--dark-blue)}.score-display{background:#fff;border-radius:var(--radius);padding:2rem 3rem;box-shadow:0 8px 30px #0000001a}.score-big{font-size:3.5rem;font-weight:900;color:var(--orange)}.score-msg{font-size:1.4rem;font-weight:700;color:#666;margin-top:.3rem}.end-buttons{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}@media(max-width:420px){.title{font-size:2.2rem}.btn{font-size:1.3rem;padding:.85rem 2rem}.card-name{font-size:1.5rem}.quiz-card{width:min(160px,42vw)}.quiz-option{font-size:1.05rem;padding:.7rem .4rem}.score-big{font-size:2.8rem}}@media(min-width:768px){.card-container{width:340px;height:450px}.card-shape{max-width:230px}.card-name{font-size:2rem}.quiz-card{width:210px}.quiz-options{max-width:520px}.quiz-option{font-size:1.35rem;padding:1rem}}@media(min-width:1024px){.card-container{width:380px;height:500px}.card-shape{max-width:260px}.nav-btn{width:64px;height:64px;font-size:3rem}}