*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #6366f1;--primary-light: #818cf8;--primary-dark: #4f46e5;--success: #22c55e;--success-light: #4ade80;--warning: #f59e0b;--warning-light: #fbbf24;--danger: #ef4444;--danger-light: #f87171;--info: #3b82f6;--info-light: #60a5fa;--bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--card-bg: rgba(255,255,255,.95);--card-shadow: 0 8px 32px rgba(0,0,0,.12);--radius: 20px;--radius-sm: 12px;--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--text: #1e293b;--text-light: #64748b;--text-lighter: #94a3b8}html,body{width:100%;height:100%;font-family:var(--font);color:var(--text);background:var(--bg-gradient);overflow-x:hidden}body{min-height:100vh;min-height:100dvh}#app{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.gate-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-gradient);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.gate-overlay.hidden{display:none}.gate-card{background:var(--card-bg);border-radius:var(--radius);padding:48px 40px;text-align:center;max-width:420px;width:100%;box-shadow:var(--card-shadow)}.gate-emoji{font-size:64px;margin-bottom:16px}.gate-card h1{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--primary),#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.gate-subtitle{color:var(--text-light);margin-bottom:32px;font-size:15px}#gate-buttons{display:flex;flex-direction:column;gap:12px}.gate-btn{display:block;width:100%;padding:14px 24px;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.gate-btn-primary{background:var(--primary);color:#fff}.gate-btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}.gate-btn-secondary{background:#f1f5f9;color:var(--text)}.gate-btn-secondary:hover{background:#e2e8f0}#gate-password-form{margin-top:20px}#gate-input{width:100%;padding:14px 16px;border:2px solid #e2e8f0;border-radius:var(--radius-sm);font-family:var(--font);font-size:16px;margin-bottom:12px;transition:border-color .2s}#gate-input:focus{outline:none;border-color:var(--primary)}.gate-error{color:var(--danger);font-size:14px;margin-top:8px}#loading-spinner{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg-gradient);display:flex;align-items:center;justify-content:center;z-index:9998}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.app-header{background:#ffffff1f;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.15)}.header-left{display:flex;align-items:center;gap:12px}.header-back{background:#ffffff26;border:none;border-radius:10px;color:#fff;font-size:18px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}.header-back:hover{background:#ffffff40}.header-level{color:#fff;font-weight:700;font-size:15px}.header-right{display:flex;align-items:center;gap:16px}.header-xp{color:#fbbf24;font-weight:700;font-size:15px}.header-progress{width:120px;height:6px;background:#fff3;border-radius:3px;overflow:hidden}.header-progress-fill{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:3px;transition:width .5s ease}.screen-container{flex:1;padding:20px;max-width:800px;margin:0 auto;width:100%}.level-hub{padding:20px;max-width:600px;margin:0 auto}.hub-title{color:#fff;font-size:24px;font-weight:800;text-align:center;margin:20px 0 8px}.hub-subtitle{color:#fffc;text-align:center;margin-bottom:24px;font-size:14px}.hub-xp-bar{background:#ffffff1f;border-radius:12px;padding:12px 20px;text-align:center;color:#fbbf24;font-weight:700;font-size:18px;margin-bottom:24px}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.level-card{background:var(--card-bg);border-radius:var(--radius-sm);padding:16px;text-align:center;cursor:pointer;transition:all .2s;border:2px solid transparent}.level-card:hover:not(.level-locked){transform:translateY(-2px);box-shadow:0 8px 24px #00000026}.level-card.level-completed{border-color:var(--success);background:linear-gradient(135deg,#f0fdf4,#dcfce7)}.level-card.level-current{border-color:var(--primary);box-shadow:0 0 0 3px #6366f14d}.level-card.level-locked{opacity:.4;cursor:not-allowed}.level-card.level-demo-locked{opacity:.5;cursor:not-allowed;background:repeating-linear-gradient(-45deg,#f8fafc,#f8fafc 8px,#f1f5f9 8px,#f1f5f9 16px)}.level-num{font-size:28px;font-weight:800;color:var(--primary)}.level-card.level-completed .level-num{color:var(--success)}.level-card.level-locked .level-num{color:var(--text-lighter)}.level-title{font-size:12px;color:var(--text-light);margin-top:4px;line-height:1.3}.level-check{color:var(--success);font-size:20px;margin-top:4px}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}.overlay-card{background:var(--card-bg);border-radius:var(--radius);padding:40px 32px;max-width:480px;width:100%;text-align:center;box-shadow:0 24px 64px #0000004d}.overlay-char{font-size:56px;margin-bottom:16px}.overlay-card h2{font-size:22px;font-weight:700;margin-bottom:12px;color:var(--text)}.overlay-card p{color:var(--text-light);line-height:1.6;margin-bottom:20px;font-size:15px}.overlay-fact{background:#eff6ff;border-left:4px solid var(--info);padding:12px 16px;border-radius:0 8px 8px 0;text-align:left;margin-bottom:20px;font-size:14px;color:var(--text)}.overlay-xp{font-size:24px;font-weight:800;color:var(--warning);margin-bottom:20px}.overlay-btn{display:inline-block;padding:14px 32px;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.overlay-btn:hover{background:var(--primary-dark);transform:translateY(-1px)}.overlay-btn-success{background:var(--success)}.overlay-btn-success:hover{background:#16a34a}.demo-complete{text-align:center;padding:40px 20px;max-width:520px;margin:0 auto}.demo-complete h2{color:#fff;font-size:28px;font-weight:800;margin:16px 0}.demo-complete p{color:#ffffffd9;margin-bottom:24px;line-height:1.6}.demo-remaining{background:#ffffff1f;border-radius:var(--radius-sm);padding:20px;margin-bottom:24px;text-align:left}.demo-remaining h3{color:#fff;font-size:16px;margin-bottom:12px}.demo-remaining li{color:#ffffffb3;font-size:14px;margin-bottom:6px;list-style:none;padding-left:20px;position:relative}.demo-remaining li:before{content:"🔒";position:absolute;left:0}.demo-btn-interest{display:inline-block;padding:16px 40px;background:var(--success);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:18px;font-weight:700;cursor:pointer;transition:all .2s;text-decoration:none}.demo-btn-interest:hover{background:#16a34a;transform:translateY(-2px)}.screen-card{background:var(--card-bg);border-radius:var(--radius);padding:28px 24px;box-shadow:var(--card-shadow);margin-bottom:16px}.screen-title{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)}.screen-instructions{color:var(--text-light);font-size:14px;margin-bottom:20px;line-height:1.5}.screen-progress-bar{width:100%;height:8px;background:#e2e8f0;border-radius:4px;margin-bottom:20px;overflow:hidden}.screen-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:4px;transition:width .4s ease}.classify-card{background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius-sm);padding:14px 18px;margin-bottom:10px;cursor:pointer;transition:all .2s;font-size:15px;line-height:1.4}.classify-card:hover{border-color:var(--primary);transform:translate(4px)}.classify-card.correct{border-color:var(--success);background:#f0fdf4}.classify-card.wrong{border-color:var(--danger);background:#fef2f2;animation:shake .4s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px)}75%{transform:translate(6px)}}.choice-btn{display:block;width:100%;padding:14px 18px;background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius-sm);font-family:var(--font);font-size:15px;text-align:left;cursor:pointer;transition:all .2s;margin-bottom:10px;line-height:1.4}.choice-btn:hover{border-color:var(--primary);background:#f8faff}.choice-btn.selected{border-color:var(--primary);background:#eff6ff}.choice-btn.correct{border-color:var(--success);background:#f0fdf4}.choice-btn.wrong{border-color:var(--danger);background:#fef2f2}.drop-zone{min-height:80px;border:2px dashed #cbd5e1;border-radius:var(--radius-sm);padding:12px;transition:all .2s;margin-bottom:12px}.drop-zone.active{border-color:var(--primary);background:#eff6ff}.drop-zone-title{font-weight:600;font-size:14px;margin-bottom:8px;color:var(--text-light)}.tag-item{display:inline-block;padding:8px 14px;background:var(--primary);color:#fff;border-radius:20px;font-size:13px;font-weight:500;margin:4px;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}.tag-item:active{cursor:grabbing;opacity:.8}.tag-item.placed{opacity:.5;cursor:default}.emoji-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}.emoji-option{background:#f8fafc;border:2px solid #e2e8f0;border-radius:var(--radius-sm);padding:12px 8px;text-align:center;cursor:pointer;transition:all .2s}.emoji-option:hover{border-color:var(--primary)}.emoji-option.selected{border-color:var(--primary);background:#eff6ff}.emoji-option.correct{border-color:var(--success);background:#f0fdf4}.emoji-option.wrong{border-color:var(--danger);background:#fef2f2}.emoji-option .emoji{font-size:28px;display:block;margin-bottom:4px}.emoji-option .emoji-label{font-size:11px;color:var(--text-light)}.chat-container{background:#f1f5f9;border-radius:var(--radius-sm);padding:16px;max-height:360px;overflow-y:auto;margin-bottom:16px}.chat-msg{margin-bottom:10px;display:flex;gap:8px;align-items:flex-start}.chat-msg-right{flex-direction:row-reverse}.chat-avatar{width:32px;height:32px;border-radius:50%;background:var(--primary-light);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}.chat-bubble{background:#fff;border-radius:16px;padding:10px 14px;max-width:70%;font-size:14px;line-height:1.4;cursor:pointer;transition:all .2s;border:2px solid transparent}.chat-bubble:hover{border-color:var(--primary-light)}.chat-bubble.flagged{border-color:var(--danger);background:#fef2f2}.chat-bubble.flagged-correct{border-color:var(--success);background:#f0fdf4}.chat-msg-right .chat-bubble{background:var(--primary);color:#fff}.catch-game{position:relative;width:100%;height:340px;background:linear-gradient(180deg,#f0f9ff,#e0f2fe);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px;touch-action:none}.catch-basket{position:absolute;bottom:10px;width:80px;height:50px;border-radius:0 0 20px 20px;display:flex;align-items:center;justify-content:center;font-size:28px;transition:left .1s}.falling-word{position:absolute;padding:8px 14px;border-radius:20px;font-size:14px;font-weight:600;white-space:nowrap;transition:top .05s linear}.falling-word.kind{background:#dcfce7;color:#166534}.falling-word.mean{background:#fecaca;color:#991b1b}.breath-circle{width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,var(--primary-light),#a78bfa);margin:20px auto;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:#fff;transition:transform 4s ease-in-out}.breath-circle.inhale{transform:scale(1.4)}.breath-circle.exhale{transform:scale(.7)}.emotion-meter{width:100%;height:20px;background:#e2e8f0;border-radius:10px;overflow:hidden;margin:16px 0}.emotion-meter-fill{height:100%;border-radius:10px;transition:width 1s ease,background 1s ease}.shield-container{position:relative;width:240px;height:280px;margin:20px auto}.shield-shape{width:100%;height:100%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:3px solid var(--primary);border-radius:50%/30% 30% 70% 70%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:4px;padding:20px 16px;align-items:center}.shield-slot{background:#6366f11a;border:2px dashed rgba(99,102,241,.3);border-radius:8px;padding:8px;text-align:center;font-size:12px;color:var(--text-light);min-height:40px;display:flex;align-items:center;justify-content:center}.shield-slot.filled{background:linear-gradient(135deg,#eff6ff,#c7d2fe);border:2px solid var(--primary);color:var(--text);font-weight:600}.sequence-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}.sequence-item{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius-sm);padding:12px 16px;cursor:grab;transition:all .2s;-webkit-user-select:none;user-select:none}.sequence-item:active{cursor:grabbing}.sequence-item .seq-num{width:28px;height:28px;background:var(--primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.profile-card{background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius);padding:20px;margin-bottom:12px;cursor:pointer;transition:all .2s}.profile-card:hover{border-color:var(--primary)}.profile-card.flagged{border-color:var(--danger);background:#fef2f2}.profile-card.safe{border-color:var(--success);background:#f0fdf4}.profile-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}.profile-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px}.profile-name{font-weight:600;font-size:16px}.profile-age{font-size:13px;color:var(--text-light)}.profile-bio{font-size:14px;color:var(--text-light);line-height:1.4}.resource-card{background:#fff;border-radius:var(--radius-sm);padding:20px;margin-bottom:12px;border-left:4px solid var(--primary);cursor:pointer;transition:all .2s}.resource-card:hover{transform:translate(4px)}.resource-card h4{font-size:16px;margin-bottom:4px}.resource-card p{font-size:13px;color:var(--text-light);line-height:1.4}.score-display{background:linear-gradient(135deg,#fef3c7,#fde68a);border-radius:var(--radius-sm);padding:16px;text-align:center;margin-bottom:16px}.score-big{font-size:36px;font-weight:800;color:var(--text)}.score-label{font-size:14px;color:var(--text-light)}.timer-bar{width:100%;height:6px;background:#e2e8f0;border-radius:3px;margin-bottom:12px;overflow:hidden}.timer-fill{height:100%;background:linear-gradient(90deg,var(--warning),var(--danger));border-radius:3px;transition:width .1s linear}.tf-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.tf-btn{padding:16px;border:2px solid #e2e8f0;border-radius:var(--radius-sm);background:#fff;font-family:var(--font);font-size:18px;font-weight:700;cursor:pointer;transition:all .2s}.tf-btn:hover{transform:translateY(-2px)}.tf-btn.tf-true{color:var(--success)}.tf-btn.tf-true:hover{border-color:var(--success);background:#f0fdf4}.tf-btn.tf-false{color:var(--danger)}.tf-btn.tf-false:hover{border-color:var(--danger);background:#fef2f2}.tf-btn.correct{background:#f0fdf4;border-color:var(--success)}.tf-btn.wrong{background:#fef2f2;border-color:var(--danger)}.certificate{background:linear-gradient(135deg,#fef3c7,#fffbeb);border:3px solid #f59e0b;border-radius:var(--radius);padding:40px 32px;text-align:center}.certificate h2{color:#92400e;font-size:24px;margin-bottom:8px}.certificate .cert-emoji{font-size:64px;margin-bottom:16px}.certificate p{color:#78350f}.feedback{padding:12px 16px;border-radius:var(--radius-sm);margin:12px 0;font-size:14px;line-height:1.4}.feedback-success{background:#f0fdf4;color:#166534;border-left:4px solid var(--success)}.feedback-error{background:#fef2f2;color:#991b1b;border-left:4px solid var(--danger)}.feedback-info{background:#eff6ff;color:#1e40af;border-left:4px solid var(--info)}.confetti-piece{position:fixed;width:10px;height:10px;border-radius:2px;pointer-events:none;z-index:9999;animation:confetti-fall 2s ease-out forwards}@keyframes confetti-fall{0%{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(100vh) rotate(720deg)}}.story-text{background:#f8fafc;border-radius:var(--radius-sm);padding:20px;font-size:15px;line-height:1.7;color:var(--text);margin-bottom:16px;border-left:4px solid var(--primary-light)}.scene-container{position:relative;width:100%;aspect-ratio:16/10;background:linear-gradient(180deg,#fefce8,#fef9c3);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:16px;border:2px solid #e2e8f0}.scene-object{position:absolute;cursor:pointer;transition:all .2s;font-size:24px;display:flex;align-items:center;justify-content:center}.scene-object:hover{transform:scale(1.15)}.scene-object.found{animation:pulse-green .5s}@keyframes pulse-green{0%{filter:brightness(1)}50%{filter:brightness(1.5) drop-shadow(0 0 8px #22c55e)}to{filter:brightness(1)}}.next-btn{display:block;width:100%;padding:16px;background:var(--success);color:#fff;border:none;border-radius:var(--radius-sm);font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer;transition:all .2s;margin-top:16px}.next-btn:hover{background:#16a34a;transform:translateY(-1px)}.next-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.explanation{margin-top:8px;padding:10px 14px;background:#fefce8;border-radius:8px;font-size:13px;color:#713f12;line-height:1.4}@media(max-width:480px){.gate-card{padding:32px 24px}.gate-card h1{font-size:22px}.screen-card{padding:20px 16px}.emoji-grid,.level-grid{grid-template-columns:repeat(2,1fr)}.breath-circle{width:160px;height:160px}.catch-game{height:280px}}