:root{--brand: #4f46e5;--ok: #16a34a;--bad: #dc2626;--bg: #f4f4f8;--card: #ffffff;--text: #1e1e28;--muted: #6b7280}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent}.app{max-width:640px;margin:0 auto;padding:16px 16px 96px}h1{font-size:1.4rem;margin:8px 0 16px}h2{font-size:1.15rem;margin:4px 0 12px}.muted{color:var(--muted);font-size:.9rem}.card{background:var(--card);border-radius:16px;padding:20px;box-shadow:0 2px 10px #0000000f;margin-bottom:14px}.btn{display:block;width:100%;padding:16px;font-size:1.05rem;border:none;border-radius:14px;background:var(--brand);color:#fff;font-weight:600;cursor:pointer;margin-top:10px}.btn.secondary{background:#e5e7eb;color:var(--text)}.btn.ok{background:var(--ok)}.btn.bad{background:var(--bad)}.btn:disabled{opacity:.5}.row{display:flex;gap:10px}.row .btn{margin-top:0}.grade-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}select,input,textarea{width:100%;padding:12px;font-size:1rem;border:1px solid #d1d5db;border-radius:12px;background:#fff;margin-top:6px}textarea{min-height:120px;resize:vertical}label{display:block;margin-top:12px;font-weight:600;font-size:.95rem}a.tile{display:block;text-decoration:none;color:var(--text);background:var(--card);border-radius:16px;padding:18px;margin-bottom:12px;box-shadow:0 2px 10px #0000000f;font-weight:600;font-size:1.1rem}a.tile .sub{display:block;font-weight:400;color:var(--muted);font-size:.85rem;margin-top:4px}.topbar{display:flex;align-items:center;gap:12px;margin-bottom:8px}.topbar a{color:var(--brand);text-decoration:none;font-weight:600}.source-img{width:100%;border-radius:12px;border:1px solid #e5e7eb;margin-top:8px}.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8rem;background:#eef2ff;color:var(--brand)}.result-good{color:var(--ok);font-weight:700}.result-bad{color:var(--bad);font-weight:700}.opt{display:block;width:100%;text-align:left;padding:14px;margin-top:10px;border:2px solid #e5e7eb;border-radius:12px;background:#fff;font-size:1rem;cursor:pointer}.opt.correct{border-color:var(--ok);background:#f0fdf4}.opt.wrong{border-color:var(--bad);background:#fef2f2}.center{text-align:center}.flip-hint{text-align:center;color:var(--muted);margin-top:8px;font-size:.85rem}.player-bar{background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border-radius:16px;padding:14px 16px;margin-bottom:14px;box-shadow:0 4px 14px #4f46e559}.player-top{display:flex;justify-content:space-between;align-items:center;font-weight:700}.player-top .lvl{font-size:1.1rem}.player-top .flame{font-size:1rem}.player-top .freeze{font-size:.95rem}.player-top .xp-num{font-size:.9rem;opacity:.9}.daily-ring{display:flex;align-items:center;gap:12px}.daily-ring-label{display:flex;flex-direction:column}.daily-ring-label b{font-size:1rem}.xp-track{height:12px;background:#ffffff40;border-radius:999px;margin:8px 0 4px;overflow:hidden}.xp-fill{height:100%;background:linear-gradient(90deg,#fde047,#f59e0b);border-radius:999px;transition:width .6s ease}.player-sub{font-size:.75rem;opacity:.9}.progress-row{display:flex;align-items:center;gap:10px;margin-top:10px}.progress-row .p-title{flex:1;font-size:.9rem;font-weight:600}.progress-row .p-count{font-size:.8rem;color:var(--muted);white-space:nowrap}.p-track{height:10px;background:#e5e7eb;border-radius:999px;overflow:hidden;margin-top:6px}.p-fill{height:100%;background:linear-gradient(90deg,#22c55e,#16a34a);border-radius:999px;transition:width .5s ease}.combo{text-align:center;font-weight:700;color:#f59e0b;min-height:22px}.xp-pop{position:fixed;left:50%;top:35%;transform:translate(-50%);font-size:1.6rem;font-weight:800;color:#f59e0b;z-index:1000;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.2);animation:xpfloat 1.1s ease-out forwards}@keyframes xpfloat{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}20%{opacity:1;transform:translate(-50%) scale(1.1)}to{opacity:0;transform:translate(-50%,-60px) scale(1)}}.game-toast{position:fixed;left:50%;top:20%;transform:translate(-50%);background:#111827;color:#fff;padding:10px 18px;border-radius:999px;font-weight:700;z-index:1001;animation:toastin 1.6s ease forwards}@keyframes toastin{0%{opacity:0;transform:translate(-50%,-10px)}15%,80%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-10px)}}.confetti{position:fixed;top:-30px;z-index:999;pointer-events:none;animation:fall 2.1s linear forwards}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(105vh) rotate(540deg);opacity:.9}}.stars{font-size:2rem;letter-spacing:4px}