*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #e8f4fc;--color-surface: #ffffff;--color-primary: #4a90d9;--color-primary-dark: #357abd;--color-success: #5cb85c;--color-error: #e74c3c;--color-text: #2c3e50;--color-text-light: #5a6a7a;--color-accent: #f5a623;--radius: 16px;--radius-sm: 10px;--shadow: 0 4px 12px rgba(0, 0, 0, .1);--touch-min: 48px;font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;color:var(--color-text);background:var(--color-bg)}html,body,#root{min-height:100dvh}body{-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.app{min-height:100dvh;display:flex;flex-direction:column;max-width:900px;margin:0 auto;padding:16px}.screen-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.back-btn{display:flex;align-items:center;justify-content:center;min-width:var(--touch-min);min-height:var(--touch-min);border:none;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-primary);font-size:1.25rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow);touch-action:manipulation}.back-btn:active{transform:scale(.96)}.screen-title{font-size:1.5rem;font-weight:700;color:var(--color-text)}.home-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px;padding:24px 0}.home-title{font-size:2rem;font-weight:800;color:var(--color-primary);line-height:1.2}.home-subtitle{font-size:1.125rem;color:var(--color-text-light);max-width:320px}.level-section{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;gap:12px}.level-section+.level-section{margin-top:8px;padding-top:24px;border-top:2px solid rgba(74,144,217,.2)}.level-heading{font-size:1.25rem;font-weight:700;color:var(--color-text);text-align:center}.level-desc{font-size:.95rem;color:var(--color-text-light);text-align:center;margin:-4px 0 4px}.mode-buttons{display:flex;flex-direction:column;gap:16px;width:100%;max-width:360px}.mode-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 20px;min-height:100px;border:none;border-radius:var(--radius);background:var(--color-surface);box-shadow:var(--shadow);cursor:pointer;touch-action:manipulation;transition:transform .15s ease}.mode-btn:active{transform:scale(.97)}.mode-btn-icon{font-size:2.5rem}.mode-btn-label{font-size:1.25rem;font-weight:700;color:var(--color-text)}.mode-btn-desc{font-size:.9rem;color:var(--color-text-light)}.progress-bar-wrap{margin-bottom:16px}.progress-label{font-size:.95rem;color:var(--color-text-light);margin-bottom:6px;font-weight:600}.progress-track{height:10px;background:#4a90d933;border-radius:5px;overflow:hidden}.progress-fill{height:100%;background:var(--color-primary);border-radius:5px;transition:width .3s ease}.flashcard-screen{flex:1;display:flex;flex-direction:column}.question-card{background:var(--color-surface);border-radius:var(--radius);padding:24px 20px;text-align:center;box-shadow:var(--shadow);margin-bottom:24px}.flashcard-map{margin-top:16px;border-radius:var(--radius-sm);background:#7ec8e8;width:100%;display:flex;justify-content:center;line-height:0}.flashcard-map svg{display:block;width:auto;max-width:100%;height:auto;max-height:min(48vh,380px)}.question-text{font-size:1.5rem;font-weight:700;color:var(--color-text)}.question-highlight{color:var(--color-primary)}.choices-grid{display:flex;flex-direction:column;gap:12px;flex:1}.choice-btn{display:flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:16px 20px;border:2px solid transparent;border-radius:var(--radius-sm);background:var(--color-surface);font-size:1.125rem;font-weight:600;color:var(--color-text);cursor:pointer;box-shadow:var(--shadow);touch-action:manipulation;transition:transform .15s ease,border-color .15s ease,background .15s ease}.choice-btn:active:not(:disabled){transform:scale(.98)}.choice-btn.correct{border-color:var(--color-success);background:#e8f5e9;animation:pulse-success .4s ease}.choice-btn.wrong{border-color:var(--color-error);background:#fdecea;animation:shake .4s ease}.choice-btn:disabled{cursor:default}.feedback-banner{text-align:center;padding:12px;border-radius:var(--radius-sm);font-size:1.125rem;font-weight:600;margin-bottom:16px}.feedback-banner.success{background:#e8f5e9;color:var(--color-success)}.feedback-banner.error{background:#fdecea;color:var(--color-error)}.map-screen{flex:1;display:flex;flex-direction:column;min-height:0}.map-prompt{background:var(--color-surface);border-radius:var(--radius-sm);padding:16px;text-align:center;font-size:1.25rem;font-weight:700;box-shadow:var(--shadow);margin-bottom:12px}.map-prompt-highlight{color:var(--color-primary)}.map-drag-hint{text-align:center;font-size:.95rem;font-weight:600;color:var(--color-accent);margin-bottom:8px}.drop-zone-pulse{animation:zone-pulse 1.2s ease-in-out infinite}@keyframes zone-pulse{0%,to{opacity:.7}50%{opacity:1}}.map-container{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:var(--radius);box-shadow:var(--shadow);background:#7ec8e8;min-height:200px;margin-bottom:16px;touch-action:pan-x pan-y;position:relative}.correct-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#4caf5073;pointer-events:none;animation:correct-overlay-in .2s ease forwards}.correct-burst{display:flex;align-items:center;gap:12px;padding:20px 32px;border-radius:var(--radius);background:linear-gradient(135deg,#66bb6a,#43a047);box-shadow:0 8px 32px #00000040;animation:correct-pop .45s cubic-bezier(.34,1.56,.64,1) forwards}.correct-text{margin:0;font-size:clamp(2rem,9vw,3.5rem);font-weight:900;color:#fff;letter-spacing:.08em;text-shadow:0 3px 8px rgba(0,0,0,.25)}.correct-spark{font-size:clamp(1.5rem,6vw,2.5rem);color:#fff9c4;animation:correct-sparkle .6s ease infinite alternate}.correct-spark:last-child{animation-delay:.3s}@keyframes correct-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes correct-pop{0%{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}@keyframes correct-sparkle{0%{transform:scale(1) rotate(-10deg);opacity:.8}to{transform:scale(1.2) rotate(10deg);opacity:1}}.map-container svg{display:block;width:100%;min-width:600px;height:auto}.chip-area{display:flex;justify-content:center;padding:8px 0;min-height:72px}.draggable-chip{display:inline-flex;align-items:center;justify-content:center;padding:14px 28px;min-height:var(--touch-min);border-radius:999px;background:var(--color-accent);color:#fff;font-size:1.125rem;font-weight:700;box-shadow:0 4px 16px #f5a62380;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;z-index:10;transform-origin:center center;transition:box-shadow .15s ease}.draggable-chip.dragging{opacity:0;cursor:grabbing}.drag-pin{width:26px;height:26px;border-radius:50%;background:#ff9800;border:3px solid #fff;box-shadow:0 0 0 4px #ff98008c,0 4px 14px #0006;pointer-events:none;animation:drag-pin-pulse .8s ease-in-out infinite}@keyframes drag-pin-pulse{0%,to{box-shadow:0 0 0 4px #ff98008c,0 4px 14px #0006}50%{box-shadow:0 0 0 7px #ff980059,0 4px 18px #00000073}}.draggable-chip.returning{animation:bounce-return .5s ease}.results-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;padding:24px 0}.results-title{font-size:2rem;font-weight:800;color:var(--color-primary)}.results-score{font-size:3rem;font-weight:800;color:var(--color-text)}.results-detail{font-size:1.125rem;color:var(--color-text-light)}.results-actions{display:flex;flex-direction:column;gap:12px;width:100%;max-width:300px;margin-top:16px}.action-btn{display:flex;align-items:center;justify-content:center;min-height:var(--touch-min);padding:14px 24px;border:none;border-radius:var(--radius-sm);font-size:1.125rem;font-weight:700;cursor:pointer;touch-action:manipulation}.action-btn.primary{background:var(--color-primary);color:#fff}.action-btn.secondary{background:var(--color-surface);color:var(--color-primary);box-shadow:var(--shadow)}.action-btn:active{transform:scale(.97)}.hint-arrow{position:absolute;pointer-events:none;font-size:2rem;color:var(--color-accent);animation:hint-bounce 1s ease infinite;z-index:5}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@keyframes pulse-success{0%{transform:scale(1)}50%{transform:scale(1.03)}to{transform:scale(1)}}@keyframes bounce-return{0%{transform:scale(1.1)}50%{transform:scale(.95)}to{transform:scale(1)}}@keyframes hint-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(min-width:768px){.home-title{font-size:2.5rem}.question-text{font-size:1.75rem}.choices-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.map-container svg{min-width:800px}}