@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}.animate-slideUp{animation:slideUp .25s ease-out forwards}.animate-slideDown{animation:slideDown .25s ease-in forwards}.pipecat-voice-wrapper{position:relative;width:100%;height:100%}.pipecat-connection-badge{position:fixed;top:16px;right:16px;z-index:9999;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#ffffffeb;color:#1f2937;font-size:12px;font-weight:600;box-shadow:0 8px 20px #0f172a1f;backdrop-filter:blur(8px)}.pipecat-connection-dot{width:8px;height:8px;border-radius:999px;background:#f59e0b;box-shadow:0 0 #f59e0b99;animation:pipecatPulse 1.2s ease-in-out infinite}.pipecat-connection-subtext{margin-left:4px;font-weight:500;color:#6b7280}.pipecat-ready-badge{position:fixed;top:16px;right:16px;z-index:9999;padding:8px 12px;border-radius:999px;background:#ecfdf3;color:#15803d;font-size:12px;font-weight:700;box-shadow:0 8px 20px #0f172a1f;animation:pipecatReady 1.2s ease-in-out}@keyframes pipecatPulse{0%{box-shadow:0 0 #f59e0b99}70%{box-shadow:0 0 0 8px #f59e0b00}to{box-shadow:0 0 #f59e0b00}}@keyframes pipecatReady{0%{transform:translateY(-6px);opacity:0}30%{transform:translateY(0);opacity:1}to{opacity:0}}.activity-progress-dots{display:flex;justify-content:center;gap:8px;padding-top:80px;margin-bottom:16px}.activity-dot{width:10px;height:10px;border-radius:50%;background:#00000026;transition:all .3s ease}.activity-dot.completed{background:#58cc02}.activity-dot.current{background:#3b82f6}.confetti-container{position:absolute;bottom:0;left:0;right:0;height:100%;pointer-events:none;overflow:visible}.confetti-particle{position:absolute;bottom:0;pointer-events:none}.completion-overlay{position:fixed;bottom:0;left:0;right:0;padding:30px 20px calc(40px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,#fff,#fffffffa 70%,#fff0);display:flex;flex-direction:column;align-items:center;gap:20px;z-index:100}.completion-content{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;z-index:10}.completion-title{font-size:28px;font-weight:800;color:#2d3748;margin:0;font-family:var(--font-display)}.xp-earned{display:flex;align-items:baseline;gap:6px}.xp-value{font-size:32px;font-weight:800;color:#58cc02;font-family:var(--font-ui)}.xp-label{font-size:18px;font-weight:700;color:#9ca3af;font-family:var(--font-ui)}.continue-button{width:100%;max-width:400px;height:56px;padding:0;background:transparent;border:none;border-radius:16px;cursor:pointer;font-family:var(--font-ui);position:relative;z-index:10;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-appearance:none}.continue-button:after{content:"";position:absolute;inset:0;border-radius:16px;background:#46a302;transform:translateY(2px);z-index:0;pointer-events:none}.continue-button-surface{position:relative;z-index:1;width:100%;height:100%;display:flex;align-items:center;justify-content:center;border-radius:16px;border:2px solid #46A302;background:#58cc02;color:#fff;font-size:15px;font-weight:900;letter-spacing:.04em;text-transform:uppercase;transition:transform .12s ease}.continue-button:active .continue-button-surface{transform:translateY(2px)}.activity-header{text-align:left;margin-bottom:24px}.activity-header.fixed{position:fixed!important;top:90px!important;left:20px!important;z-index:80;transform:translateZ(0)}.activity-title{font-size:28px;font-weight:800;color:#2d3748;margin:0 0 4px;font-family:var(--font-display)}.activity-instruction{font-size:15px;color:#718096;margin:0;font-family:var(--font-ui)}.match-item{padding:18px 14px;background:#fff;border:2.5px solid #E5E7EB;border-radius:14px;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s ease;text-align:center;color:#374151;font-family:var(--font-ui);min-height:60px;display:flex;align-items:center;justify-content:center}.match-item.word-item{font-weight:600}.match-item.definition-item{font-size:13px;line-height:1.4}.match-item:hover:not(:disabled):not(.settled){border-color:#d1d5db;background:#f9fafb}.match-item.selected{border-color:#60a5fa!important;background:#dbeafe!important;color:#1e40af!important}.match-item.just-matched{border-color:#34d399!important;background:#d1fae5!important;color:#065f46!important}.match-item.settled{border-color:#d1d5db!important;background:#f3f4f6!important;color:#9ca3af!important;cursor:default}.match-item.wrong{border-color:#f87171!important;color:#dc2626!important;animation:matchShake .4s ease}@keyframes matchShake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.option-button{padding:18px 20px;background:#fff;border:2.5px solid #E5E7EB;border-radius:14px;font-size:16px;font-weight:500;text-align:left;cursor:pointer;transition:all .2s ease;color:#374151;font-family:var(--font-ui)}.option-button:hover:not(:disabled){border-color:#d1d5db;background:#f9fafb}.option-button.selected{border-color:#60a5fa;background:#dbeafe;color:#1e40af}.option-button.correct{border-color:#34d399!important;background:#d1fae5!important;color:#065f46!important}.option-button.wrong{border-color:#f87171!important;background:#fee2e2!important;color:#dc2626!important}.primary-button{width:100%;padding:18px 32px;background:#58cc02;border:none;border-radius:16px;font-size:17px;font-weight:700;color:#fff;cursor:pointer;font-family:var(--font-ui);box-shadow:0 4px #46a302;transition:all .1s ease}.primary-button:hover:not(:disabled){background:#4caf00}.primary-button:active:not(:disabled){transform:translateY(4px);box-shadow:none}.primary-button:disabled{background:#d1d5db;box-shadow:0 4px #9ca3af;cursor:not-allowed}.audio-button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:18px 24px;background:linear-gradient(135deg,#60a5fa,#3b82f6);border:none;border-radius:16px;color:#fff;font-size:17px;font-weight:700;cursor:pointer;font-family:var(--font-ui);box-shadow:0 4px #2563eb;transition:all .1s ease}.audio-button:active{transform:translateY(4px);box-shadow:none}.audio-button.playing{background:linear-gradient(135deg,#818cf8,#6366f1);box-shadow:0 4px #4f46e5}.audio-icon{font-size:20px}
