.character-image-container{width:100%;max-width:400px;aspect-ratio:16 / 9;position:relative;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#667eea,#764ba2)}.character-image-container--fullscreen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:max(.75rem,env(safe-area-inset-top)) max(.5rem,env(safe-area-inset-right)) max(11rem,calc(env(safe-area-inset-bottom) + 9.25rem)) max(.5rem,env(safe-area-inset-left));max-width:none;width:auto;height:auto;aspect-ratio:unset;border-radius:0;background:radial-gradient(ellipse 90% 70% at 50% 38%,rgba(102,126,234,.14) 0%,transparent 62%),linear-gradient(160deg,#1a1a2e,#16213e 45%,#0f3460)}.character-image-container .character-image{width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .3s ease-in}.character-image-container .character-image.fade-in{opacity:1}.character-image-container--fullscreen .character-image{width:auto;height:auto;max-width:100%;max-height:100%;aspect-ratio:16 / 9;object-fit:contain;object-position:center center;border-radius:0;filter:drop-shadow(0 24px 48px rgba(0,0,0,.35))}.character-image-vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to top,rgba(10,10,20,.55) 0%,rgba(10,10,20,.12) 14%,transparent 36%)}.character-image-error{background:#ff6b6b;display:flex;align-items:center;justify-content:center}.character-image-container--fullscreen.character-image-error{background:linear-gradient(160deg,#1a1a2e,#16213e)}.character-retry-button{background:#fff;color:#ff6b6b;border:none;width:64px;height:64px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s}.character-retry-button:hover{transform:scale(1.08);box-shadow:0 4px 12px #0003}.character-creation-transition{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem;overflow:hidden;pointer-events:none;background:linear-gradient(to bottom,#eff6ff,#faf5ff);z-index:20}.character-creation-transition__bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top right,#dbeafe33,#f3e8ff33,#fce7f333);animation:character-transition-pulse 2.5s ease-in-out infinite}.character-creation-transition__frame{position:relative;width:min(32rem,92vw);aspect-ratio:16 / 9;height:auto;border-radius:.75rem;overflow:hidden;border:4px solid #fff;box-shadow:0 25px 50px -12px #00000040;z-index:1}@media(min-width:768px){.character-creation-transition__frame{width:36rem}}.character-creation-transition__image{width:100%;height:100%;object-fit:contain;object-position:center center;display:block;background:linear-gradient(160deg,#eef2ff,#faf5ff)}.character-creation-transition__copy{position:relative;z-index:1;margin-top:2rem;text-align:center}.character-creation-transition__title{margin:0;font-size:1.875rem;font-weight:700;color:#1f2937;animation:character-transition-pulse 2s ease-in-out infinite}.character-creation-transition__subtitle{margin:.5rem 0 0;font-size:1.125rem;color:#4b5563;opacity:0;animation:character-transition-fade-in 1s ease forwards .5s}.character-creation-transition__sparkles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.character-creation-transition__sparkle{position:absolute;border-radius:9999px;animation:character-transition-ping 1.5s cubic-bezier(0,0,.2,1) infinite}.character-creation-transition__sparkle--1{top:25%;left:25%;width:.5rem;height:.5rem;background:#facc15}.character-creation-transition__sparkle--2{top:33%;right:25%;width:.5rem;height:.5rem;background:#c084fc;animation-delay:.5s;animation-duration:2s}.character-creation-transition__sparkle--3{bottom:33%;left:33%;width:.5rem;height:.5rem;background:#60a5fa;animation-delay:1s;animation-duration:1.8s}.character-creation-transition__sparkle--4{top:50%;right:33%;width:.375rem;height:.375rem;background:#f472b6;animation-delay:.7s;animation-duration:2.2s}@keyframes character-transition-pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes character-transition-fade-in{0%{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}@keyframes character-transition-ping{75%,to{transform:scale(2);opacity:0}}.engaging-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.engaging-screen--speaking .mic-button:not(:disabled){animation:none}.engagement-content{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:1rem;padding:1.5rem;padding-bottom:max(1.5rem,env(safe-area-inset-bottom));pointer-events:auto}.recording-waves{display:flex;align-items:center;justify-content:center;gap:.5rem;height:40px}.wave{width:8px;height:20px;background:linear-gradient(180deg,#667eea,#764ba2);border-radius:4px;animation:wave 1s ease-in-out infinite}.wave:nth-child(1){animation-delay:0s}.wave:nth-child(2){animation-delay:.1s}.wave:nth-child(3){animation-delay:.2s}@keyframes wave{0%,to{height:20px}50%{height:35px}}.mic-button{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 30px #667eea66,0 0 0 1px #ffffff1f;transition:transform .3s ease,box-shadow .3s ease,opacity .3s ease}.mic-button:hover:not(:disabled){transform:scale(1.08);box-shadow:0 15px 40px #667eea80,0 0 0 1px #ffffff2e}.mic-button:active:not(:disabled){transform:scale(.95)}.mic-button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:0 6px 20px #667eea33,0 0 0 1px #ffffff14}.engaging-screen--mic-inactive .mic-button:disabled{opacity:.4}.mic-button.recording{animation:pulse-record 1.5s ease-in-out infinite;background:linear-gradient(135deg,#f093fb,#f5576c);opacity:1}@keyframes pulse-record{0%,to{box-shadow:0 10px 30px #f5576c66}50%{box-shadow:0 15px 50px #f5576c99}}.mic-button:focus-visible{outline:3px solid #667eea;outline-offset:4px}@media(max-width:768px){.mic-button{width:100px;height:100px}.mic-button svg{width:48px!important;height:48px!important}}.engagement-magic-loader{position:relative;width:300px;height:300px;display:flex;align-items:center;justify-content:center}.engagement-magic-loader .sparkles{position:absolute;width:100%;height:100%;animation:rotate-sparkles 10s linear infinite}@keyframes rotate-sparkles{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.engagement-magic-loader .sparkle{position:absolute;width:4px;height:4px;background:#667eea;border-radius:50%;box-shadow:0 0 10px #667eea,0 0 20px #667eea;animation:sparkle 2s ease-in-out infinite}.engagement-magic-loader .sparkle:nth-child(1){top:0;left:50%;animation-delay:0s}.engagement-magic-loader .sparkle:nth-child(2){top:25%;right:0;animation-delay:.3s}.engagement-magic-loader .sparkle:nth-child(3){bottom:25%;right:0;animation-delay:.6s}.engagement-magic-loader .sparkle:nth-child(4){bottom:0;left:50%;animation-delay:.9s}.engagement-magic-loader .sparkle:nth-child(5){bottom:25%;left:0;animation-delay:1.2s}.engagement-magic-loader .sparkle:nth-child(6){top:25%;left:0;animation-delay:1.5s}@keyframes sparkle{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.5)}}.engagement-magic-loader .magic-circle{position:absolute;width:200px;height:200px;display:flex;align-items:center;justify-content:center}.engagement-magic-loader .magic-ring{position:absolute;width:100%;height:100%;border:3px solid transparent;border-top-color:#667eea;border-radius:50%;animation:spin 2s linear infinite}.engagement-magic-loader .magic-ring.delay-1{width:80%;height:80%;animation-delay:.3s;border-top-color:#764ba2}.engagement-magic-loader .magic-ring.delay-2{width:60%;height:60%;animation-delay:.6s;border-top-color:#667eea}@media(max-width:768px){.engagement-magic-loader{width:250px;height:250px}}.story-session-page{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:max(1.5rem,env(safe-area-inset-top)) 1.5rem max(1.5rem,env(safe-area-inset-bottom));background:linear-gradient(135deg,#1a1a2e,#16213e);color:#fff;text-align:center}.story-session-page--loading .story-session-spinner{width:3rem;height:3rem;border:3px solid rgba(255,255,255,.2);border-top-color:#f5c542;border-radius:50%;animation:story-session-spin .8s linear infinite;margin:0 auto 1rem}.story-start-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:28rem}.story-start-screen h1{margin:0;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;color:#f5c542}.story-start-screen p{margin:0;font-size:1.125rem;color:#ffffffbf;line-height:1.5}.story-start-button{margin-top:.5rem;padding:1rem 2rem;font-size:1.125rem;font-weight:600;color:#1a1a2e;background:linear-gradient(135deg,#f5c542,#e8a838);border:none;border-radius:999px;cursor:pointer;box-shadow:0 4px 20px #f5c54259;transition:transform .15s ease,box-shadow .15s ease}.story-start-button:hover{transform:scale(1.03);box-shadow:0 6px 24px #f5c54273}.story-start-button:active{transform:scale(.98)}.story-session-error{color:#ff8a8a;max-width:24rem}@keyframes story-session-spin{to{transform:rotate(360deg)}}.story-session{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#1a1a2e,#16213e)}.reconnecting-toast{position:fixed;top:max(1rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:100;padding:.5rem 1rem;background:#000000b3;border-radius:999px;color:#fff;font-size:.875rem}.error-message{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#1a1a2e;color:#ff8a8a;padding:2rem}.paused-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#0f1428d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.session-ended-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#0f1428f2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.session-ended-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;max-width:28rem;padding:2rem;text-align:center;color:#fff}.session-ended-content h1{margin:0;font-size:clamp(1.75rem,5vw,2.5rem);font-weight:700;color:#f5c542}.session-ended-content>p{margin:0;font-size:1.125rem;color:#ffffffd9;line-height:1.5}.session-ended-cta{margin-top:.5rem;padding:1rem 2rem;font-size:1.125rem;font-weight:600;color:#1a1a2e;background:linear-gradient(135deg,#f5c542,#e8a838);border:none;border-radius:999px;cursor:pointer;box-shadow:0 4px 20px #f5c54259;transition:transform .15s ease,box-shadow .15s ease}.session-ended-cta:hover{transform:scale(1.03);box-shadow:0 6px 24px #f5c54273}.session-ended-cta:active{transform:scale(.98)}.session-ended-countdown{margin:0;font-size:.875rem;color:#ffffff80}html.engagement-kiosk,html.engagement-kiosk body{margin:0;padding:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;touch-action:manipulation}html.engagement-kiosk body{position:fixed;top:0;right:0;bottom:0;left:0}html.engagement-kiosk #root{height:100%;overflow:hidden}.engagement-flow{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;height:100dvh;display:flex;flex-direction:column;background:linear-gradient(135deg,#1a1a2e,#16213e);overflow:hidden;overscroll-behavior:none}.engagement-stage{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.engagement-stage-fallback{width:100%;height:100%;background:linear-gradient(160deg,#1a1a2e,#16213e 45%,#0f3460)}.engagement-center-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:15;display:flex;align-items:center;justify-content:center;background:#0f14288c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:1;transition:opacity .2s ease-out}.engagement-progress{position:absolute;top:max(1.5rem,env(safe-area-inset-top));left:50%;transform:translate(-50%);z-index:20}.progress-bar-container{width:200px;height:8px;background:#fff3;border-radius:4px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .5s ease-out;border-radius:4px}.idle-screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:1}.play-button{width:180px;height:180px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 #667eea80,0 10px 40px #667eea73;animation:play-breathe 2.5s ease-in-out infinite;transition:transform .2s ease}@keyframes play-breathe{0%,to{box-shadow:0 0 #667eea66,0 10px 40px #667eea73;transform:scale(1)}50%{box-shadow:0 0 0 24px #667eea00,0 15px 50px #667eea8c;transform:scale(1.04)}}.play-button:hover{animation:none;transform:scale(1.08);box-shadow:0 15px 50px #667eea8c}.play-button:active{animation:none;transform:scale(.94)}.play-button:focus-visible{outline:3px solid #667eea;outline-offset:6px}@media(max-width:768px){.play-button{width:160px;height:160px}.play-button svg{width:72px!important;height:72px!important}}.error-screen{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(135deg,#1a1a2e,#16213e)}.error-content{display:flex;flex-direction:column;align-items:center;gap:3rem;padding:2rem}.error-content>svg:first-child{color:#ff6b6b;animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-10px)}20%,40%,60%,80%{transform:translate(10px)}}.retry-button{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:all .3s ease;box-shadow:0 4px 15px #667eea66}.retry-button:hover{transform:scale(1.1);box-shadow:0 6px 20px #667eea99}.retry-button:active{transform:scale(.95)}.retry-button svg{animation:none}.retry-button:hover svg{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.character-choice-screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:max(1.5rem,env(safe-area-inset-top)) 1.5rem max(1.5rem,env(safe-area-inset-bottom));text-align:center}.character-choice-title{margin:0;font-size:clamp(1.75rem,5vw,2.25rem);font-weight:700;color:#f5c542}.character-choice-subtitle{margin:0;max-width:22rem;font-size:1.05rem;color:#ffffffbf;line-height:1.5}.character-choice-avatar{width:168px;height:94px;object-fit:contain;border-radius:12px;border:3px solid rgba(245,197,66,.5);box-shadow:0 8px 32px #00000059;background:#0a0a1459}.character-choice-actions{display:flex;flex-direction:column;gap:.75rem;width:min(100%,20rem);margin-top:.5rem}.character-choice-btn{padding:.875rem 1.25rem;font-size:1rem;font-weight:600;border:none;border-radius:999px;cursor:pointer;transition:transform .15s ease,opacity .15s ease}.character-choice-btn:disabled{opacity:.7;cursor:wait}.character-choice-btn--primary{color:#1a1a2e;background:linear-gradient(135deg,#f5c542,#e8a838)}.character-choice-btn--secondary{color:#fff;background:#ffffff1f;border:1px solid rgba(255,255,255,.25)}.character-choice-btn:not(:disabled):hover{transform:scale(1.02)}.character-choice-btn:not(:disabled):active{transform:scale(.98)}