:root{--bg-primary: #0f0f1a;--bg-secondary: #1a1a2e;--bg-card: #16213e;--text-primary: #e0e0e0;--text-secondary: #a0a0b0;--accent: #6c63ff;--accent-hover: #5a52d5;--green: #00c853;--green-bg: rgba(0, 200, 83, .15);--red: #ff1744;--red-bg: rgba(255, 23, 68, .15);--card-shadow: 0 8px 32px rgba(0, 0, 0, .3);--radius: 16px;--radius-sm: 8px;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-height:100dvh;display:flex;justify-content:center;background:var(--bg-primary)}#root{width:100%;max-width:420px;min-height:100dvh}.app{width:100%;min-height:100dvh;position:relative}.screen{width:100%;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:24px 20px}.start-screen{justify-content:center;gap:32px;text-align:center}.logo{display:flex;flex-direction:column;align-items:center;gap:8px}.logo-icon{font-size:3rem;color:var(--accent);font-weight:700;font-family:Courier New,monospace}.logo h1{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:var(--text-secondary);font-size:1.1rem}.instructions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:280px}.instruction{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:.95rem;color:var(--text-secondary)}.swipe-arrow{font-size:1.4rem;font-weight:700}.swipe-arrow.left{color:var(--red)}.swipe-arrow.right{color:var(--green)}.btn-play{padding:14px 48px;font-size:1.1rem;font-weight:700;color:#fff;background:var(--accent);border:none;border-radius:var(--radius);cursor:pointer;font-family:inherit;letter-spacing:.02em;transition:background .2s}.btn-play:hover{background:var(--accent-hover)}.game-screen{padding-top:16px;gap:16px}.game-header{display:flex;justify-content:space-between;width:100%;padding:0 4px}.score-display,.progress-display{font-size:.95rem;color:var(--text-secondary);background:var(--bg-secondary);padding:6px 14px;border-radius:var(--radius-sm)}.score-display strong{color:var(--accent)}.card-area{flex:1;display:flex;align-items:center;justify-content:center;width:100%;position:relative;user-select:none;-webkit-user-select:none}.swipe-card{width:100%;max-width:340px;background:var(--bg-card);border-radius:var(--radius);padding:32px 24px;box-shadow:var(--card-shadow);cursor:grab;position:relative;border:3px solid transparent;transition:border-color .15s,box-shadow .15s}.swipe-card:active{cursor:grabbing}.swipe-card.correct{border-color:var(--green);box-shadow:0 0 30px #00c8534d}.swipe-card.wrong{border-color:var(--red);box-shadow:0 0 30px #ff17444d;animation:shake .3s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.swipe-indicator{position:absolute;top:16px;font-size:2.5rem;font-weight:800;pointer-events:none;transition:opacity .1s}.swipe-indicator.nope{left:20px;color:var(--red)}.swipe-indicator.like{right:20px;color:var(--green)}.card-content{display:flex;flex-direction:column;align-items:center;gap:20px}.concept{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;width:100%;padding:16px;background:#ffffff0a;border-radius:var(--radius-sm)}.concept-icon{font-size:1.5rem;color:var(--accent);font-family:Courier New,monospace;font-weight:700;opacity:.7}.concept-text{font-size:1.15rem;font-weight:600;color:var(--text-primary);line-height:1.3}.separator{font-size:1.8rem;font-weight:700;color:var(--accent);opacity:.5}.feedback-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:800;border-radius:var(--radius);pointer-events:none;animation:feedbackPulse .4s ease-out}.feedback-overlay.correct{background:var(--green-bg);color:var(--green)}.feedback-overlay.wrong{background:var(--red-bg);color:var(--red)}@keyframes feedbackPulse{0%{opacity:0;transform:scale(.5)}50%{opacity:1;transform:scale(1.1)}to{opacity:1;transform:scale(1)}}.action-buttons{display:flex;gap:32px;padding-bottom:24px}.btn-action{width:60px;height:60px;border-radius:50%;border:3px solid;background:transparent;font-size:1.5rem;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .2s,transform .1s}.btn-action:disabled{opacity:.4;cursor:not-allowed}.btn-nope{border-color:var(--red);color:var(--red)}.btn-nope:hover:not(:disabled){background:var(--red-bg)}.btn-like{border-color:var(--green);color:var(--green)}.btn-like:hover:not(:disabled){background:var(--green-bg)}.flashcard-scene{width:100%;max-width:340px;perspective:1000px}.flashcard-inner{position:relative;width:100%;min-height:300px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.45,.05,.55,.95);cursor:pointer}.flashcard-inner.flipped{transform:rotateY(180deg);cursor:default}.flashcard-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--radius);padding:36px 28px;background:var(--bg-card);box-shadow:var(--card-shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}.flashcard-front{border:2px solid rgba(108,99,255,.35)}.flashcard-back{border:2px solid rgba(167,139,250,.45);transform:rotateY(180deg)}.flashcard-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);opacity:.7}.flashcard-text{font-size:1rem;color:var(--text-primary);line-height:1.6;white-space:pre-line}.flashcard-hint{font-size:.8rem;color:var(--text-secondary);opacity:.5;margin-top:4px}.flashcard-btn{margin-top:4px;padding:12px 36px;font-size:1rem}.info-tag{color:var(--accent)!important}.score-screen{gap:20px;padding-top:40px;padding-bottom:40px}.score-title{font-size:1.5rem;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.1em}.score-circle{width:160px;height:160px;border-radius:50%;border:4px solid var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:var(--bg-secondary)}.score-number{font-size:3rem;font-weight:800;color:var(--accent);line-height:1}.score-of{font-size:.9rem;color:var(--text-secondary)}.score-percent{font-size:1rem;font-weight:600;color:var(--text-secondary);margin-top:2px}.score-message{font-size:1.1rem;text-align:center;color:var(--text-primary);max-width:300px}.pairs-review{width:100%;display:flex;flex-direction:column;gap:8px}.pairs-review h3{font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);margin-bottom:4px}.pair-review{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-secondary);border-radius:var(--radius-sm);gap:8px}.pair-concepts{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text-primary);flex:1;min-width:0;flex-wrap:wrap}.pair-plus{color:var(--accent);font-weight:700;opacity:.6;flex-shrink:0}.pair-badge{font-size:.7rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;flex-shrink:0}.pair-badge.match{background:var(--green-bg);color:var(--green)}.pair-badge.no-match{background:var(--red-bg);color:var(--red)}.roadmap-screen{padding-top:24px;padding-bottom:40px;gap:0;overflow-y:auto}.roadmap-header{text-align:center;margin-bottom:8px;width:100%}.roadmap-header h2{font-size:1.4rem;font-weight:800;background:linear-gradient(135deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.roadmap-subtitle{color:var(--text-secondary);font-size:.85rem;margin-top:4px}.roadmap-progress-bar{width:100%;max-width:200px;height:6px;background:var(--bg-secondary);border-radius:3px;margin:12px auto 0;overflow:hidden}.roadmap-progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),#a78bfa);border-radius:3px;transition:width .6s ease}.roadmap-progress-text{font-size:.75rem;color:var(--text-secondary);margin-top:6px}.roadmap-tree{display:flex;flex-direction:column;align-items:center;width:100%;max-width:320px;padding:24px 0 20px}.roadmap-level{display:flex;justify-content:center;width:100%}.roadmap-level.branch{justify-content:space-between;padding:0 24px}.roadmap-connector{width:100%;height:50px;max-width:320px;display:block}.roadmap-connector path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:8 6;opacity:.3}.roadmap-node{display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:inherit;padding:4px;-webkit-tap-highlight-color:transparent;outline:none}.roadmap-node.locked{cursor:not-allowed;opacity:.35}.node-circle{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;background:var(--bg-card);border:3px solid var(--bg-secondary);transition:border-color .3s,box-shadow .3s,background .3s}.roadmap-node.unlocked .node-circle{border-color:var(--accent);box-shadow:0 0 20px #6c63ff66;animation:nodeGlow 2s ease-in-out infinite alternate}.roadmap-node.completed .node-circle{background:linear-gradient(135deg,var(--accent),#a78bfa);border-color:#ffd70099;box-shadow:0 0 15px #6c63ff4d}@keyframes nodeGlow{0%{box-shadow:0 0 15px #6c63ff4d}to{box-shadow:0 0 30px #6c63ff99}}.node-icon{font-size:1.8rem;line-height:1}.node-badge{position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;border:2px solid var(--bg-primary)}.node-badge.lock{background:#333;font-size:.6rem}.node-badge.check{background:var(--green);color:#fff;font-weight:800;font-size:.7rem}.node-title{font-size:.72rem;font-weight:600;color:var(--text-primary);text-align:center;max-width:100px;line-height:1.25}.roadmap-node.locked .node-title{color:var(--text-secondary)}.node-phase{font-size:.85rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em}.passed-banner{background:var(--green-bg);color:var(--green);padding:8px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem}.failed-banner{background:var(--red-bg);color:var(--red);padding:8px 20px;border-radius:var(--radius-sm);font-weight:700;font-size:.95rem}