:root{--bg:#f7f7fb;--card:#fff;--accent:#2563eb;--text:#0f172a;--correct:#16a34a;--wrong:#ef4444}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-root{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:20px}.header{text-align:center;margin-bottom:32px}.header h1{margin:0 0 .2em;font-size:2.8rem;font-family:Inter,Segoe UI,Arial,sans-serif;font-weight:700;color:#3b82f6;letter-spacing:-1px}.subtitle{font-size:1.2rem;color:#64748b;margin-top:8px}.card{background:var(--card);border-radius:18px;padding:36px;box-shadow:0 4px 32px #3b82f614;max-width:400px;width:100%;transition:box-shadow .2s;display:flex;flex-direction:column;align-items:center;min-width:340px}.card h2{font-size:1.3rem;color:var(--accent);margin-bottom:12px;font-weight:600}.center{display:flex;flex-direction:column;align-items:center;gap:12px}.row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px;margin-bottom:24px;width:100%}.btn{background:#e0e7ff;color:#3b82f6;border:none;border-radius:10px;padding:.7em 1.2em;font-size:1.1rem;font-weight:500;cursor:pointer;box-shadow:0 2px 8px #3b82f60a;transition:background .2s,color .2s,transform .1s;outline:none}.btn:hover,.btn:focus{background:#3b82f6;color:#fff;transform:translateY(-2px) scale(1.04)}.btn.selected{background:#3b82f6;color:#fff}.btn.mode,.btn.difficulty{min-width:90px;font-size:1.1rem;border-radius:10px}.btn.primary{background:var(--accent);color:#fff;border:none}.btn.big{padding:12px 18px;font-weight:600}.btn.big.start{font-size:1.3rem;padding:1em 2em;background:linear-gradient(90deg,#6366f1,#3b82f6);color:#fff;font-weight:700;box-shadow:0 4px 16px #3b82f61f;border-radius:14px;letter-spacing:.5px}.btn.big.start:hover,.btn.big.start:focus{background:linear-gradient(90deg,#3b82f6,#6366f1)}.footer{margin-top:32px;color:#6b7280;font-size:13px;text-align:center}.footer small{color:#64748b}.toprow{display:flex;align-items:center;gap:12px;width:100%;max-width:720px;margin-bottom:12px}.score{margin-left:auto;font-weight:600}.timerbar{flex:1;position:relative;height:36px;background:#e6eefc;border-radius:999px;overflow:hidden}.timerbar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#60a5fa);transition:width .2s}.timer-text{position:absolute;right:8px;top:6px;color:#fff;font-weight:700}.timer-bar-container{width:100%;height:24px;background:#eee;border-radius:12px;margin:16px 0;box-shadow:0 1px 4px #00000014;position:relative}.timer-bar{border-radius:12px;transition:width .5s,background .3s;height:100%}.timer-bar-seconds{position:absolute;right:16px;top:0;height:100%;display:flex;align-items:center;font-weight:700;font-size:1.1rem;text-shadow:0 1px 4px #fff}.question-large{font-size:36px;font-weight:700}.input-display{font-size:28px;min-height:36px;opacity:.9}.keypad{display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;margin:24px auto 0;width:100%;max-width:340px}.keyrow{display:flex;gap:14px;width:100%;justify-content:center}.key{background:#e0e7ff;color:var(--accent);border:none;border-radius:16px;font-size:2rem;font-weight:600;width:80px;height:80px;box-shadow:0 2px 8px #3b82f60a;transition:background .2s,color .2s,transform .1s;cursor:pointer;outline:none;margin:0;touch-action:manipulation}.key-active,.key:active,.key:focus{background:#3b82f6!important;color:#fff!important;transform:scale(1.06);transition:background .1s,color .1s,transform .08s}.key-enter{background:linear-gradient(90deg,#6366f1,#3b82f6);color:#fff;font-weight:700;border-radius:16px}.key-back{background:#e0e7ff;color:var(--accent);font-weight:700;border:2px solid var(--accent);border-radius:16px}.key-back:active,.key-back:hover,.key-back:focus{background:var(--accent);color:#fff}@media (max-width: 500px){.keypad{max-width:98vw;gap:10px;margin-top:12px}.keyrow{gap:10px}.key{font-size:1.4rem;width:56px;height:56px;border-radius:12px;padding:0}.key-enter,.key-back{border-radius:12px}}.flash{position:absolute;margin-top:8px;font-size:22px;font-weight:800}.flash.correct{color:var(--correct)}.flash.wrong{color:var(--wrong)}@media (max-width: 500px){.page.home{min-height:100vh;width:100vw;padding:0;background:linear-gradient(135deg,#f8fafc,#e0e7ff);display:flex;flex-direction:column;align-items:center;justify-content:center}.header h1{font-size:2rem}.subtitle{font-size:1rem}.card.home-card{padding:18px 8px;min-width:0;max-width:98vw;width:100vw;box-shadow:0 2px 12px #3b82f614;border-radius:14px}.start-row{width:100%;justify-content:center}.btn.big.start{font-size:1.1rem;padding:.8em 1em;border-radius:10px;width:100%;max-width:320px}.footer{font-size:12px;margin-top:18px}}@media (min-width: 501px){.page.home{min-height:100vh;width:100vw;background:linear-gradient(135deg,#f8fafc,#e0e7ff);display:flex;flex-direction:column;align-items:center;justify-content:center}.card.home-card{min-width:320px;max-width:400px;width:100%;margin:0 auto;border-radius:18px;box-shadow:0 4px 32px #3b82f614;padding:36px}.keypad{max-width:98vw;gap:10px}.keyrow{gap:10px}.key{font-size:1.2rem;width:56px;height:44px}.card{padding:18px;min-width:unset;max-width:98vw}.btn{font-size:1rem;padding:.6em .8em}.btn.big.start{font-size:1.1rem;padding:.8em 1em;border-radius:10px}.page.home{padding:0 4vw}.header h1{font-size:2rem}.subtitle{font-size:1rem}.card.home-card{padding:12px;min-width:unset;max-width:98vw;box-shadow:0 2px 12px #3b82f614}.start-row{width:100%;justify-content:center}.footer{font-size:12px;margin-top:18px}}.page.gameover{min-height:100vh;width:100vw;background:linear-gradient(135deg,#f8fafc,#e0e7ff);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,Segoe UI,Arial,sans-serif;position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}.app-root>.page.gameover{min-height:100vh;width:100vw;position:fixed;top:0;left:0;right:0;bottom:0;z-index:0}.gameover-title{font-size:2.4rem;font-weight:700;color:var(--accent);margin-bottom:.2em;text-align:center}.badge-row{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:12px}.badge{display:inline-block;font-size:1.1rem;font-weight:600;color:#fff;padding:.4em 1em;border-radius:16px;box-shadow:0 2px 8px #3b82f614;letter-spacing:.5px}.stars{font-size:1.5rem;color:#fbbf24;letter-spacing:2px}.star{filter:drop-shadow(0 2px 2px #fbbf24aa)}.summary{font-size:1.1rem;color:#334155;margin-bottom:6px}.motivation{font-size:1rem;color:#64748b;margin-bottom:18px}.card.gameover-card{background:var(--card);border-radius:18px;box-shadow:0 4px 32px #3b82f614;padding:32px;min-width:320px;max-width:400px;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto;justify-content:center}.card.home-card,.card{min-width:320px;max-width:380px;width:100%;padding:32px;border-radius:18px;box-shadow:0 4px 32px #3b82f614;background:var(--card);display:flex;flex-direction:column;align-items:center}.btn.share{font-size:1.1rem;padding:.8em 1.6em;background:linear-gradient(90deg,#6366f1,#3b82f6);color:#fff;font-weight:600;border-radius:12px;margin-bottom:18px}.btn.share:hover,.btn.share:focus{background:linear-gradient(90deg,#3b82f6,#6366f1)}.gameover-actions{display:flex;gap:12px;justify-content:center;width:100%}@media (max-width: 500px){.card.gameover-card,.card.home-card,.card{padding:16px;min-width:unset;max-width:98vw;margin:0 auto}.gameover-title{font-size:1.5rem}.badge{font-size:1rem;padding:.3em .7em}.stars{font-size:1.1rem}.header h1{font-size:1.5rem}}.page.already-played{min-height:100vh;width:100vw;background:linear-gradient(135deg,#f8fafc,#e0e7ff);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Inter,Segoe UI,Arial,sans-serif}.header{text-align:center;width:100%}.card{background:var(--card);border-radius:18px;box-shadow:0 4px 32px #3b82f614;padding:32px;min-width:320px;max-width:400px;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto;justify-content:center}@media (max-width: 500px){.page.already-played{min-height:100vh;width:100vw;padding:0;background:linear-gradient(135deg,#f8fafc,#e0e7ff);display:flex;flex-direction:column;align-items:center;justify-content:center}.card{padding:18px 8px;min-width:0;max-width:98vw;width:100vw;box-shadow:0 2px 12px #3b82f614;border-radius:14px}.header h1{font-size:1.5rem}}