*,:before,:after{box-sizing:border-box}body{font-family:var(--font-family);font-weight:var(--font-weight-normal);color:var(--color-gray-900);background:var(--bg-page);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0}button{font-family:inherit}:root{--color-math:#2563eb;--color-math-light:#dbeafe;--color-polish:#ea580c;--color-polish-light:#fff7ed;--color-nature:#16a34a;--color-nature-light:#dcfce7;--color-logic:#7c3aed;--color-logic-light:#ede9fe;--color-social:#d97706;--color-social-light:#fef9c3;--color-success:#10b981;--color-success-dark:#059669;--color-success-light:#d1fae5;--color-error:#ef4444;--color-error-dark:#dc2626;--color-error-light:#fee2e2;--color-warning:#f59e0b;--color-warning-light:#fef3c7;--color-info:#3b82f6;--color-info-light:#eff6ff;--color-primary:#6366f1;--color-primary-dark:#4f46e5;--color-primary-light:#eef2ff;--color-primary-gradient:linear-gradient(135deg, #6366f1, #8b5cf6);--color-gray-50:#f9fafb;--color-gray-100:#f3f4f6;--color-gray-200:#e5e7eb;--color-gray-300:#d1d5db;--color-gray-400:#9ca3af;--color-gray-500:#6b7280;--color-gray-600:#4b5563;--color-gray-700:#374151;--color-gray-800:#1f2937;--color-gray-900:#111827;--bg-page:#f0f4ff;--bg-card:#fff;--bg-game-setup:linear-gradient(150deg, #bfdbfe 0%, #ede9fe 55%, #bbf7d0 100%);--bg-game-results:linear-gradient(150deg, #fef9c3 0%, #d1fae5 100%);--bg-correct:#dcfce7;--bg-wrong:#fee2e2;--bg-neutral:#f0f9ff;--font-family:"Nunito", system-ui, -apple-system, sans-serif;--font-size-xs:12px;--font-size-sm:14px;--font-size-base:16px;--font-size-lg:18px;--font-size-xl:22px;--font-size-2xl:28px;--font-size-3xl:36px;--font-size-4xl:48px;--font-weight-normal:500;--font-weight-bold:700;--font-weight-black:900;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--radius-sm:8px;--radius-md:13px;--radius-lg:16px;--radius-xl:22px;--radius-pill:9999px;--shadow-sm:0 2px 8px #0000000f;--shadow-md:0 4px 18px #00000014;--shadow-lg:0 20px 70px #0000001c}@keyframes floatUp{0%{opacity:1;transform:translateY(0)rotate(0)scale(1)}80%{opacity:1}to{transform:translateY(-80vh) rotate(var(--pr,180deg)) scale(.4);opacity:0}}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-50%)scale(.4)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes popInPlace{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}.btn{font-family:var(--font-family);font-weight:var(--font-weight-bold);cursor:pointer;border-radius:var(--radius-md);justify-content:center;align-items:center;gap:var(--space-2);border:none;line-height:1.2;transition:transform .1s,box-shadow .15s;display:inline-flex}.btn:not(:disabled):hover{transform:scale(1.04)}.btn:not(:disabled):active{transform:scale(.96)}.btn:disabled{cursor:not-allowed;opacity:.6}.btn-primary{background:var(--color-primary-gradient);color:#fff;font-size:var(--font-size-lg);font-weight:var(--font-weight-black);padding:var(--space-4) var(--space-8);box-shadow:0 7px 24px #6366f16b}.btn-success{background:linear-gradient(135deg, var(--color-success), var(--color-success-dark));color:#fff;font-size:var(--font-size-xl);font-weight:var(--font-weight-black);padding:var(--space-4) var(--space-12);border-radius:var(--radius-lg);letter-spacing:.5px;box-shadow:0 7px 24px #10b98166}.btn-success:disabled{background:var(--color-gray-200);color:var(--color-gray-400);box-shadow:none}.btn-outline{background:var(--bg-card);border:3px solid var(--color-gray-200);color:var(--color-gray-700);font-size:var(--font-size-base);font-weight:var(--font-weight-bold);padding:var(--space-3) var(--space-6)}.btn-pill{border-radius:var(--radius-pill);padding:var(--space-2) var(--space-4);font-size:var(--font-size-sm);border:2px solid var(--color-gray-200);background:var(--bg-card);color:var(--color-gray-500);font-weight:var(--font-weight-normal);cursor:pointer;transition:all .13s}.btn-pill.active{background:var(--color-gray-900);color:#fff;border-color:var(--color-gray-900);font-weight:var(--font-weight-bold)}.btn-back{cursor:pointer;font-size:var(--font-size-base);font-weight:var(--font-weight-bold);color:var(--color-gray-500);padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);background:0 0;border:none;transition:all .13s}.btn-back:hover{background:var(--color-gray-100);color:var(--color-gray-700)}.btn-select{font-family:var(--font-family);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border:3px solid var(--color-gray-200);background:var(--color-gray-50);color:var(--color-gray-700);font-weight:var(--font-weight-black);cursor:pointer;transition:all .13s}.btn-select:hover{transform:scale(1.06)}.btn-select.active{border-color:var(--color-primary);background:var(--color-primary-light);transform:scale(1.05)}.btn-select.active-success{border-color:var(--color-success);background:var(--color-success-light);transform:scale(1.1)}.btn-select.active-info{border-color:var(--color-info);background:var(--color-info-light);box-shadow:0 4px 12px #3b82f66b}.btn-select.active-green{border-color:var(--color-success);background:var(--color-success);color:#fff;box-shadow:0 4px 12px #10b98166}.btn-icon{width:48px;height:48px;font-size:var(--font-size-lg);font-weight:var(--font-weight-black);font-family:var(--font-family);border:3px solid var(--color-gray-200);background:var(--color-gray-50);color:var(--color-gray-700);cursor:pointer;border-radius:50%;padding:0;transition:all .1s}.btn-icon:hover{transform:scale(1.12)}.btn-icon.active{border-color:var(--color-info);background:var(--color-info);color:#fff;transform:scale(1.15);box-shadow:0 4px 12px #3b82f66b}.card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-6) var(--space-8);box-shadow:var(--shadow-lg)}.card-game{background:var(--bg-card);border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-4);cursor:pointer;transition:transform .15s,box-shadow .15s;position:relative}.card-game:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.card-game.locked{cursor:default;opacity:.6}.card-game.locked:hover{box-shadow:none;transform:none}.badge{font-size:var(--font-size-xs);font-weight:var(--font-weight-bold);padding:3px var(--space-2);border-radius:var(--radius-sm);display:inline-block}.progress-track{background:var(--color-gray-200);border-radius:var(--radius-pill);height:12px;overflow:hidden}.progress-fill{background:var(--color-primary-gradient);border-radius:var(--radius-pill);height:100%;transition:width .4s}.toggle-track{border-radius:var(--radius-pill);flex-shrink:0;width:44px;height:24px;transition:background .2s;position:relative}.toggle-thumb{background:#fff;border-radius:50%;width:18px;height:18px;transition:left .2s;position:absolute;top:3px;box-shadow:0 1px 4px #00000040}.btn-subject{padding:var(--space-1) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);font-weight:var(--font-weight-normal);cursor:pointer;border:2px solid var(--color-gray-200);background:var(--bg-card);color:var(--color-gray-500);transition:all .13s}.btn-subject.active{font-weight:var(--font-weight-bold)}.game-page{min-height:100vh;padding:var(--space-6);font-family:var(--font-family);flex-direction:column;justify-content:center;align-items:center;display:flex}