:root{--bg-primary: #0f0a1a;--bg-secondary: #1a1128;--bg-glass: rgba(26,17,40,.85);--bg-glass-light: rgba(40,28,65,.55);--pink: #f472b6;--pink-soft: #f9a8d4;--purple: #a78bfa;--purple-soft:#c4b5fd;--rose: #fb7185;--text-primary: #f1e8ff;--text-secondary: #b8a5d4;--text-muted: #7c6a96;--grad-header: linear-gradient(135deg,#1a1128 0%,#2d1b4e 50%,#1a1128 100%);--grad-send: linear-gradient(135deg,#f472b6 0%,#a78bfa 100%);--grad-ai: linear-gradient(135deg,rgba(164,139,250,.15) 0%,rgba(244,114,182,.1) 100%);--grad-love: linear-gradient(90deg,#f472b6,#fb7185);--grad-friend: linear-gradient(90deg,#60a5fa,#818cf8);--grad-shy: linear-gradient(90deg,#f9a8d4,#fda4af);--grad-trust: linear-gradient(90deg,#34d399,#60a5fa);--grad-annoy: linear-gradient(90deg,#f87171,#fbbf24);--r-sm: 8px;--r-md: 16px;--r-lg: 24px;--shadow-pink: 0 0 20px rgba(244,114,182,.3);--shadow-purple: 0 0 20px rgba(167,139,250,.3);--font: "Nunito","Segoe UI",sans-serif;--font-d: "Quicksand","Nunito",sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased}body{position:fixed;width:100%;top:0;left:0}#app{height:100%;width:100%;max-width:500px;margin:0 auto;position:relative}@media(min-width:768px){body{display:flex;align-items:center;justify-content:center;background-image:radial-gradient(ellipse at 20% 50%,rgba(167,139,250,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 50%,rgba(244,114,182,.08) 0%,transparent 50%)}#app{height:100vh;max-height:100vh;border-left:1px solid rgba(167,139,250,.15);border-right:1px solid rgba(167,139,250,.15);box-shadow:0 0 60px #a78bfa1a}}.scene{position:absolute;top:0;right:0;bottom:0;left:0;transition:opacity .6s ease}.scene.hidden{opacity:0;pointer-events:none}#scene-opening{background:#000;display:flex;align-items:center;justify-content:center}.opening-video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;background:url(/poster.webp) center/cover no-repeat #000}.opening-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background:linear-gradient(to bottom,rgba(15,10,26,.7) 0%,transparent 30%,transparent 60%,rgba(15,10,26,.9) 100%)}.opening-cta{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 32px;opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;pointer-events:none}.opening-cta.visible{opacity:1;transform:translateY(0);pointer-events:auto}.cta-avatar-wrap{width:88px;height:88px;border-radius:50%;overflow:hidden;border:3px solid var(--pink-soft);box-shadow:var(--shadow-pink),0 0 40px #f472b633;margin-bottom:14px;animation:float 3s ease-in-out infinite}.cta-avatar-wrap img{width:100%;height:100%;object-fit:cover}.cta-sub{font-family:var(--font-d);font-size:.9rem;font-weight:700;color:#fff;margin-bottom:24px;letter-spacing:1px;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.9)}.btn-enter{display:flex;align-items:center;gap:10px;padding:14px 32px;border:none;border-radius:50px;background:var(--grad-send);color:#fff;font-family:var(--font-d);font-size:1rem;font-weight:800;cursor:pointer;box-shadow:0 4px 30px #f472b673;transition:transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.btn-enter:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);border-radius:50px}.btn-enter:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 40px #f472b699}.btn-enter:active{transform:scale(.97)}.btn-enter-arrow{font-size:1.2rem;transition:transform .2s ease}.btn-enter:hover .btn-enter-arrow{transform:translate(4px)}.cta-hint{margin-top:14px;font-size:.75rem;color:#ffffffe6;font-weight:600;text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 10px rgba(0,0,0,.8);animation:blink 2s ease-in-out infinite}@keyframes blink{0%,to{opacity:.45}50%{opacity:.95}}.btn-skip{position:absolute;top:16px;right:16px;z-index:20;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:#0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#ffffffb3;font-family:var(--font);font-size:.78rem;font-weight:600;padding:6px 14px;cursor:pointer;transition:all .2s ease}.btn-skip:hover{background:#0009;color:#fff}#scene-chat{background:var(--bg-primary)}.chat-container{display:flex;flex-direction:column;height:100%;position:relative;overflow:hidden}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;min-height:60px;background:var(--grad-header);border-bottom:1px solid rgba(167,139,250,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:10;position:relative;flex-shrink:0}.header-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0}.header-info{display:flex;flex-direction:column;min-width:0}.avatar-wrapper{position:relative;width:40px;height:40px;flex-shrink:0}.header-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--pink-soft);box-shadow:var(--shadow-pink)}.online-dot{position:absolute;bottom:1px;right:1px;width:10px;height:10px;border-radius:50%;background:#34d399;border:2px solid var(--bg-secondary);animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{box-shadow:0 0 #34d39980}50%{box-shadow:0 0 0 4px #34d39900}}.char-name{font-family:var(--font-d);font-size:1rem;font-weight:700;background:linear-gradient(135deg,var(--text-primary) 0%,var(--pink-soft) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-credit{font-size:.7rem;font-weight:700;letter-spacing:.2px;vertical-align:baseline;margin-left:4px}.char-status{font-size:.72rem;color:var(--text-secondary);font-weight:500}.header-right{display:flex;gap:4px}.header-btn{width:36px;height:36px;border:none;border-radius:50%;background:#ffffff0f;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.header-btn:hover{background:#ffffff1f;transform:scale(1.1)}.header-btn:active{transform:scale(.95)}.char-stage{position:relative;width:100%;height:clamp(220px,35vh,320px);flex-shrink:0;overflow:hidden;background:linear-gradient(180deg,#1a0d2e,#0f0a1a)}.char-stage:before{content:"";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);width:280px;height:120px;background:radial-gradient(ellipse,rgba(244,114,182,.18) 0%,transparent 70%);pointer-events:none;z-index:0}.char-stage:after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,rgba(244,114,182,.4),rgba(167,139,250,.4),transparent)}#particle-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}.char-model{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:auto;height:100%;z-index:2;display:flex;align-items:flex-end;justify-content:center}.face-img{position:absolute;bottom:0;left:50%;transform:translate(-50%);height:100%;width:auto;object-fit:contain;opacity:0;transition:opacity .35s ease;mix-blend-mode:multiply;filter:drop-shadow(0 4px 20px rgba(244,114,182,.25))}.face-img.face-active{opacity:1}@keyframes charShake{0%{transform:translate(-50%) rotate(0) translateY(0)}10%{transform:translate(calc(-50% - 2px)) rotate(-.4deg) translateY(-1px)}20%{transform:translate(calc(-50% + 2px)) rotate(.4deg) translateY(1px)}30%{transform:translate(calc(-50% - 1.5px)) rotate(-.3deg) translateY(0)}40%{transform:translate(calc(-50% + 1.5px)) rotate(.3deg) translateY(-1px)}50%{transform:translate(calc(-50% - 1px)) rotate(-.2deg) translateY(1px)}60%{transform:translate(calc(-50% + 1px)) rotate(.2deg) translateY(0)}70%{transform:translate(calc(-50% - .5px)) rotate(-.1deg) translateY(0)}to{transform:translate(-50%) rotate(0) translateY(0)}}.char-model.shaking .face-img{animation:charShake .55s ease-in-out}@keyframes charBreathe{0%,to{transform:translate(-50%) translateY(0) scale(1)}50%{transform:translate(-50%) translateY(-4px) scale(1.005)}}.char-model{animation:charBreathe 4s ease-in-out infinite}.char-model.shaking{animation:charShake .55s ease-in-out}.chat-messages{flex:1;overflow-y:auto;overflow-x:hidden;padding:12px 14px 8px;display:flex;flex-direction:column;gap:10px;z-index:1;position:relative;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;background:var(--bg-primary)}.chat-messages::-webkit-scrollbar{width:3px}.chat-messages::-webkit-scrollbar-thumb{background:#a78bfa40;border-radius:4px}.welcome-message{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 16px;animation:fadeInUp .6s ease}.welcome-message h2{font-family:var(--font-d);font-size:1.2rem;font-weight:700;margin-bottom:6px;background:linear-gradient(135deg,var(--pink-soft),var(--purple-soft));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.welcome-message p{color:var(--text-secondary);font-size:.85rem;margin-bottom:16px}.welcome-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.welcome-chip{padding:7px 14px;border-radius:var(--r-lg);border:1px solid rgba(167,139,250,.22);background:var(--bg-glass-light);color:var(--text-primary);font-size:.78rem;font-family:var(--font);font-weight:600;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.welcome-chip:hover{background:#a78bfa33;border-color:var(--purple);transform:translateY(-2px)}.welcome-chip:active{transform:scale(.96)}.message-row{display:flex;gap:7px;animation:fadeInUp .3s ease;max-width:100%}.message-row.user{flex-direction:row-reverse}.msg-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0;border:1.5px solid rgba(167,139,250,.3);margin-top:4px}.msg-content{display:flex;flex-direction:column;max-width:83%}.msg-bubble{padding:9px 13px;border-radius:var(--r-md);font-size:.875rem;line-height:1.55;word-wrap:break-word;overflow-wrap:break-word}.message-row.ai .msg-bubble{background:var(--grad-ai);border:1px solid rgba(167,139,250,.15);border-top-left-radius:4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.message-row.user .msg-bubble{background:var(--grad-send);border-top-right-radius:4px;color:#fff;box-shadow:0 2px 12px #f472b633}.msg-time{font-size:.62rem;color:var(--text-muted);margin-top:3px;padding:0 4px}.message-row.user .msg-time{text-align:right}.bond-change{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;padding:2px 8px;border-radius:12px;margin-top:5px;background:#f472b61a;border:1px solid rgba(244,114,182,.2);color:var(--pink-soft);animation:popIn .4s ease}.bond-change.negative{background:#f871711a;border-color:#f8717133;color:#fca5a5}.typing-indicator{display:flex;gap:4px;padding:8px 12px;align-items:center}.typing-indicator .dot{width:6px;height:6px;border-radius:50%;background:var(--purple-soft);animation:typingBounce 1.4s ease-in-out infinite}.typing-indicator .dot:nth-child(2){animation-delay:.2s}.typing-indicator .dot:nth-child(3){animation-delay:.4s}@keyframes typingBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-6px);opacity:1}}.chat-input-area{padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:var(--grad-header);border-top:1px solid rgba(167,139,250,.12);z-index:10;position:relative;flex-shrink:0}.input-wrapper{display:flex;align-items:flex-end;gap:8px;background:#ffffff0f;border:1px solid rgba(167,139,250,.18);border-radius:var(--r-lg);padding:3px 3px 3px 14px;transition:border-color .2s,box-shadow .2s}.input-wrapper:focus-within{border-color:var(--purple);box-shadow:0 0 0 3px #a78bfa1a}#message-input{flex:1;border:none;outline:none;background:transparent;color:var(--text-primary);font-family:var(--font);font-size:.88rem;resize:none;max-height:110px;line-height:1.5;padding:7px 0}#message-input::placeholder{color:var(--text-muted)}.send-btn{width:38px;height:38px;border-radius:50%;border:none;background:var(--grad-send);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s ease;opacity:.45}.send-btn:not(:disabled){opacity:1;box-shadow:0 2px 12px #f472b659}.send-btn:not(:disabled):hover{transform:scale(1.08);box-shadow:0 4px 20px #f472b680}.send-btn:not(:disabled):active{transform:scale(.94)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:flex-end;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}.overlay.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.bond-modal{width:100%;max-width:500px;max-height:88vh;background:var(--bg-secondary);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow-y:auto;animation:slideUp .3s ease}@media(min-width:768px){.overlay{align-items:center}.bond-modal{border-radius:var(--r-lg);max-height:82vh}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(167,139,250,.12);position:sticky;top:0;background:var(--bg-secondary);z-index:5}.modal-header h2{font-family:var(--font-d);font-size:1.05rem;font-weight:700}.close-btn{width:30px;height:30px;border-radius:50%;border:none;background:#ffffff14;color:var(--text-secondary);font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn:hover{background:#f8717133;color:#fca5a5}.modal-body{padding:18px;display:flex;flex-direction:column;gap:14px}.bond-character-display{display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:14px;border-bottom:1px solid rgba(167,139,250,.1)}.bond-avatar-container{width:72px;height:72px;border-radius:50%;overflow:hidden;border:3px solid var(--pink-soft);box-shadow:var(--shadow-pink);margin-bottom:10px}.bond-avatar{width:100%;height:100%;object-fit:cover}.bond-name{font-family:var(--font-d);font-size:1.05rem;font-weight:700;background:linear-gradient(135deg,var(--pink-soft),var(--purple-soft));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:3px}.bond-title{font-size:.78rem;color:var(--text-secondary);font-style:italic}.bond-meters{display:flex;flex-direction:column;gap:12px}.bond-meter{display:flex;flex-direction:column;gap:5px}.meter-label{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;color:var(--text-secondary)}.meter-label span:last-child{color:var(--text-primary);font-weight:700}.meter-bar{height:7px;border-radius:7px;background:#ffffff0f;overflow:hidden}.meter-fill{height:100%;border-radius:7px;transition:width .6s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}.meter-fill:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.love-fill{background:var(--grad-love)}.friend-fill{background:var(--grad-friend)}.shy-fill{background:var(--grad-shy)}.trust-fill{background:var(--grad-trust)}.annoy-fill{background:var(--grad-annoy)}.reset-btn{width:100%;padding:9px;border:1px solid rgba(248,113,113,.25);border-radius:var(--r-sm);background:#f8717114;color:#fca5a5;font-family:var(--font);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease;margin-top:6px}.reset-btn:hover{background:#f8717126;border-color:#f8717166}.toast{position:fixed;bottom:72px;left:50%;transform:translate(-50%);padding:9px 18px;border-radius:var(--r-lg);background:var(--bg-glass);border:1px solid rgba(167,139,250,.2);color:var(--text-primary);font-size:.8rem;font-weight:600;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:200;animation:toastIn .3s ease,toastOut .3s ease 2.5s forwards;white-space:nowrap}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@keyframes toastOut{0%{opacity:1;transform:translate(-50%) translateY(0)}to{opacity:0;transform:translate(-50%) translateY(20px)}}.error-bubble{background:#f871711a!important;border-color:#f8717140!important;color:#fca5a5!important}.hidden{display:none!important}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes popIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}@supports (padding:env(safe-area-inset-top)){.chat-header{padding-top:max(10px,env(safe-area-inset-top))}.chat-input-area{padding-bottom:max(8px,env(safe-area-inset-bottom))}.btn-skip{top:max(16px,env(safe-area-inset-top))}}@media(max-width:360px){.char-name{font-size:.9rem}.msg-bubble{font-size:.82rem}.char-stage{height:200px}}