:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --demo-scale: 1;
  --demo-base-width: 390px;
  --demo-base-height: 693.333333px;
  --viewport-left: 0px;
  --viewport-top: 0px;
  --viewport-width: 100vw;
  --viewport-height: 100dvh;
  --glass: rgba(22, 16, 24, .52);
  --line: rgba(255,255,255,.14);
  --pink: #ff78a8;
  --hot: #ff4f8a;
}
* { box-sizing: border-box; }
.app-shell,.app-shell * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.app-shell input,.app-shell textarea,.app-shell [contenteditable="true"] { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
.app-shell img,.app-shell video,.app-shell canvas,.app-shell svg { -webkit-user-drag:none; user-drag:none; -webkit-user-select:none; user-select:none; }
html, body { width:100%; min-height:100%; margin:0; overflow:hidden; background:#0c0910; }
body { position:fixed; inset:0; }
.compat-noscript { position:fixed; z-index:9999; inset:0; display:grid; place-items:center; padding:28px; color:#fff; background:#160b15; font:600 16px/1.5 system-ui,sans-serif; text-align:center; }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { position:fixed; left:calc(var(--viewport-left) + env(safe-area-inset-left,0px)); top:calc(var(--viewport-top) + env(safe-area-inset-top,0px)); width:calc(var(--viewport-width) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)); height:calc(var(--viewport-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)); overflow:hidden; background:radial-gradient(circle at 50% 15%,#332230 0,#120d15 45%,#09070b 100%); }
.phone { position:absolute; left:50%; top:50%; width:var(--demo-base-width); height:var(--demo-base-height); overflow:hidden; overflow:clip; isolation:isolate; border:1px solid rgba(255,255,255,.12); border-radius:28px; background:#171018; box-shadow:0 28px 90px rgba(0,0,0,.56); touch-action:pan-y; transform:translate(-50%,-50%) scale(var(--demo-scale)); transform-origin:50% 50%; }
.mobile-fullscreen .phone { border:0; border-radius:0; box-shadow:none; }
.room, .live-video, .clip-stage, .ambient-vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.room { object-fit: cover; z-index: -5; }
.ambient-vignette { z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(4,1,5,.46), transparent 20%, transparent 57%, rgba(7,3,8,.58) 91%), radial-gradient(ellipse at 50% 44%, transparent 40%, rgba(0,0,0,.25) 100%); }
.live-video { z-index: -3; overflow:hidden; opacity:0; transition:opacity .7s ease; background:#120c13; transform:translateZ(0); backface-visibility:hidden; contain:strict; }
.live-video.connected { opacity: 1; }
.live-video video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; background:#120c13; transform:translateZ(0); backface-visibility:hidden; will-change:transform; }
.live-video video.incoming-live-video { position:absolute; inset:0; opacity:0; pointer-events:none; }
.gift-sequence-backdrop { position:absolute; z-index:-2; inset:0; opacity:0; pointer-events:none; background:#120c13; }
.gift-sequence-backdrop.active { opacity:1; }
.clip-stage { z-index:-2; border:0; object-fit:cover; opacity:0; pointer-events:none; background:#120c13; transition:opacity .65s ease; }
.clip-stage.active { opacity:1; }
.gift-swipe-hint { position:absolute; z-index:12; left:-1px; top:50%; display:grid; place-items:center; width:28px; height:58px; border:1px solid rgba(255,168,205,.48); border-left:0; border-radius:0 999px 999px 0; opacity:0; visibility:hidden; pointer-events:none; color:#ffe5f0; background:linear-gradient(145deg,rgba(101,17,60,.32),rgba(233,46,117,.2)); -webkit-backdrop-filter:blur(4px) saturate(125%); backdrop-filter:blur(4px) saturate(125%); box-shadow:4px 0 13px rgba(111,17,61,.18),0 0 9px rgba(255,79,138,.1),inset 0 1px rgba(255,224,238,.2); transform:translate(-105%,-50%) scale(.94); transition:opacity .38s ease,transform .56s cubic-bezier(.2,.82,.2,1),visibility .38s step-end; }
.gift-swipe-hint.visible { opacity:.86; visibility:visible; transform:translate(0,-50%) scale(1); transition:opacity .38s ease,transform .56s cubic-bezier(.2,.82,.2,1),visibility .38s step-start; animation:giftSwipeHintEnter .56s cubic-bezier(.2,.82,.2,1) both,giftSwipeHintBreathe 2.1s ease-in-out .72s infinite; }
.gift-swipe-hint-chevrons { display:flex; align-items:center; justify-content:center; width:18px; height:22px; margin-left:-3px; filter:drop-shadow(0 0 5px rgba(255,164,205,.62)); }
.gift-swipe-hint-chevrons i { display:block; width:8px; height:8px; margin-left:-3px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); animation:giftSwipeChevron 1.45s ease-in-out infinite; }
.gift-swipe-hint-chevrons i:first-child { margin-left:0; animation-delay:-.2s; }
.gift-swipe-hint-chevrons i:last-child { animation-delay:.06s; }
@keyframes giftSwipeHintEnter { from { opacity:0; transform:translate(-105%,-50%) scale(.94); } to { opacity:.86; transform:translate(0,-50%) scale(1); } }
@keyframes giftSwipeHintBreathe { 0%,100% { filter:brightness(.98); box-shadow:4px 0 12px rgba(111,17,61,.16),0 0 8px rgba(255,79,138,.08),inset 0 1px rgba(255,224,238,.18); } 50% { filter:brightness(1.08); box-shadow:5px 0 16px rgba(190,37,99,.22),0 0 11px rgba(255,79,138,.14),inset 0 1px rgba(255,224,238,.24); } }
@keyframes giftSwipeChevron { 0%,100% { opacity:.48; transform:translateX(-1px) rotate(45deg); } 50% { opacity:1; transform:translateX(2px) rotate(45deg); } }
.topbar { position:absolute; z-index:5; top:14px; left:12px; right:12px; display:flex; align-items:center; justify-content:space-between; gap:9px; }
.identity { display:flex; align-items:center; min-width:0; padding:5px 7px 5px 5px; border:1px solid var(--line); border-radius:999px; background:rgba(12,8,14,.42); backdrop-filter:blur(18px) saturate(140%); box-shadow:0 8px 28px rgba(0,0,0,.18); transition:padding .42s cubic-bezier(.2,.82,.2,1),background .32s ease; }
.avatar-ring { position:relative; isolation:isolate; overflow:hidden; width:42px; height:42px; flex:0 0 42px; border:0; border-radius:50%; padding:3px; clip-path:circle(50% at 50% 50%); background:transparent; filter:drop-shadow(0 0 8px rgba(255,101,171,.72)); }
.profile-avatar { cursor:pointer; transition:filter .24s ease,transform .24s ease; }
.profile-avatar:hover,.profile-avatar:focus-visible { filter:drop-shadow(0 0 12px rgba(255,118,174,.9)); transform:scale(1.035); outline:none; }
.profile-avatar[aria-expanded="true"] { filter:drop-shadow(0 0 13px rgba(255,142,190,.95)); }
.avatar-ring::before { content:""; position:absolute; z-index:0; inset:0; border-radius:inherit; background:conic-gradient(#ff74ad, #80f9ff, #f9df7b, #ac78ff, #ff74ad); animation:ringFlow 3s linear infinite; }
@keyframes ringFlow { to { transform: rotate(360deg); } }
@keyframes counterRingFlow { to { transform: rotate(-360deg); } }
.avatar-crop { position:relative; z-index:2; display:block; overflow:hidden; width:100%; height:100%; border:2px solid rgba(13,9,14,.86); border-radius:50%; background:#1c131e url("assets/mia-profile-avatar.jpg?v=profile-60") center/cover no-repeat; transform:translateZ(0); }
.avatar-crop img { position:relative; z-index:2; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.035); }
.identity-copy { padding:0 7px; min-width:84px; line-height:1.08; }
.name-row { display:flex; align-items:center; gap:5px; font-size:13px; }
.live-dot { padding: 2px 5px; border-radius: 4px; background: #ff427d; font-size: 7px; font-weight: 800; letter-spacing: .08em; }
.presence { display:grid; grid-template-columns:max-content; align-items:start; gap:3px; margin-top:3px; color:rgba(255,255,255,.68); white-space:nowrap; font-variant-numeric:tabular-nums; }
.presence-viewers,.presence-likes { display:flex; align-items:center; gap:2px; min-width:0; min-height:9px; line-height:1; }
.presence-viewers i { width:4px; height:4px; flex:0 0 4px; border-radius:50%; background:#68f2aa; box-shadow:0 0 6px rgba(90,246,167,.76); animation:liveViewerPulse 1.9s ease-in-out infinite; }
.presence-viewers b,.presence-likes b { color:rgba(255,255,255,.82); font-size:8px; font-weight:800; line-height:1; }
.presence-viewers em { color:rgba(255,255,255,.58); font-size:7px; font-style:normal; line-height:1; }
.presence-separator { display:none; }
.presence-likes i { color:#ff78aa; font-size:8px; font-style:normal; line-height:1; filter:drop-shadow(0 0 4px rgba(255,73,138,.56)); }
@keyframes liveViewerPulse { 0%,100% { opacity:.62; transform:scale(.84); } 50% { opacity:1; transform:scale(1.18); } }
.follow { position:relative; display:grid; place-items:center; width:68px; height:30px; flex:0 0 auto; overflow:hidden; border:1px solid rgba(255,170,202,.34); border-radius:999px; padding:0 7px; background:rgba(255,255,255,.12); color:rgba(255,255,255,.94); backdrop-filter:blur(12px); font-size:8px; font-weight:800; white-space:nowrap; cursor:pointer; transition:width .36s cubic-bezier(.2,.72,.25,1),background .28s ease,color .28s ease,border-color .28s ease,transform .2s ease; }
.follow-label { opacity:1; transform:translateX(0); transition:opacity .24s ease,transform .3s ease; }
.follow:hover { background:rgba(255,119,169,.24); border-color:rgba(255,170,202,.62); }
.follow:active { transform:scale(.96); }
.follow.subscribed { width:78px; color:#ffe3ed; border-color:rgba(255,202,221,.4); background:rgba(255,255,255,.075); }
.subscribe-countdown { position:absolute; z-index:6; top:68px; right:12px; display:flex; align-items:center; gap:10px; min-width:118px; padding:8px 11px; border:1px solid rgba(255,199,220,.24); border-radius:14px; color:rgba(255,255,255,.9); background:rgba(23,15,25,.46); backdrop-filter:blur(18px) saturate(140%); box-shadow:0 9px 26px rgba(0,0,0,.2); opacity:0; visibility:hidden; transform:translateY(-6px) scale(.97); transition:opacity .4s ease,transform .55s cubic-bezier(.2,.78,.2,1),visibility .4s step-end; }
.subscribe-countdown.visible { opacity:1; visibility:visible; transform:translateY(0) scale(1); transition:opacity .4s ease,transform .55s cubic-bezier(.2,.78,.2,1),visibility .4s step-start; }
.subscribe-countdown span { color:rgba(255,255,255,.66); font-size:8px; }
.subscribe-countdown strong { color:#ffd7e5; font-size:12px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.top-actions { display: flex; align-items: center; gap: 7px; }
.affection { display: flex; align-items: center; gap: 5px; min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px; background: rgba(12,8,14,.42); backdrop-filter: blur(18px); font-size: 12px; }
.heart { display: inline-block; color: #ff76a4; filter: drop-shadow(0 0 7px #ff4f8a); animation: breathe 1.8s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform: scale(.82); opacity: .74; } 45% { transform: scale(1.18); opacity: 1; } }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: rgba(12,8,14,.42); backdrop-filter: blur(16px); font-size: 22px; line-height: 1; cursor: pointer; }
.profile-card { position:absolute; z-index:13; top:76px; left:12px; width:292px; padding:14px; border:1px solid rgba(255,255,255,.17); border-radius:22px; opacity:0; visibility:hidden; color:#fff; background:linear-gradient(145deg,rgba(31,19,31,.86),rgba(16,11,18,.76)); backdrop-filter:blur(30px) saturate(155%); box-shadow:0 22px 55px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.08); transform:translateY(-8px) scale(.97); transform-origin:32px 0; pointer-events:none; transition:opacity .24s ease,transform .34s cubic-bezier(.2,.82,.2,1),visibility .24s step-end; }
.profile-card.open { opacity:1; visibility:visible; transform:translateY(0) scale(1); pointer-events:auto; transition:opacity .24s ease,transform .34s cubic-bezier(.2,.82,.2,1),visibility .24s step-start; }
.profile-card::before { content:""; position:absolute; top:-5px; left:25px; width:10px; height:10px; border-top:1px solid rgba(255,255,255,.17); border-left:1px solid rgba(255,255,255,.17); background:rgba(30,19,30,.9); transform:rotate(45deg); }
.profile-card-head { display:grid; grid-template-columns:52px minmax(0,1fr) 28px; align-items:center; gap:10px; }
.profile-card-head > img { display:block; overflow:hidden; width:52px; height:52px; border:2px solid rgba(255,155,193,.72); border-radius:50%; clip-path:circle(50% at 50% 50%); object-fit:cover; object-position:50% 50%; box-shadow:0 0 16px rgba(255,90,151,.22); }
.profile-card-title { min-width:0; }
.profile-card-title small { display:block; color:rgba(255,174,205,.72); font-size:7px; font-weight:800; letter-spacing:.16em; }
.profile-card-title h2 { margin:3px 0 1px; font-size:20px; line-height:1; }
.profile-card-title p { overflow:hidden; margin:0; color:rgba(255,255,255,.62); font-size:9px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.profile-card-close { align-self:start; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.12); border-radius:50%; padding:0; color:rgba(255,255,255,.68); background:rgba(255,255,255,.06); cursor:pointer; font-size:17px; }
.profile-card-primary { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0 9px; padding:9px 11px; border:1px solid rgba(255,127,174,.2); border-radius:13px; background:linear-gradient(110deg,rgba(255,91,151,.13),rgba(255,255,255,.035)); }
.profile-card-primary span,.profile-facts dt { color:rgba(255,255,255,.48); font-size:8px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.profile-card-primary strong { font-size:12px; }
.profile-facts { display:grid; gap:7px; margin:0; }
.profile-facts > div { display:grid; grid-template-columns:82px minmax(0,1fr); align-items:start; gap:8px; }
.profile-facts dt,.profile-facts dd { margin:0; }
.profile-facts dd { color:rgba(255,255,255,.82); font-size:10px; line-height:1.35; }
.profile-facts .profile-gift { margin-top:2px; padding-top:9px; border-top:1px solid rgba(255,255,255,.09); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.chat { position:absolute; z-index:4; left:13px; right:13px; bottom:82px; max-height:35%; overflow-x:hidden; overflow-y:auto; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; gap:7px; pointer-events:auto; scrollbar-width:none; mask-image:linear-gradient(transparent 0%,#000 18%,#000 100%); will-change:opacity,filter,transform; transition:opacity 1.15s cubic-bezier(.22,.72,.22,1),filter 1.15s cubic-bezier(.22,.72,.22,1),transform 1.15s cubic-bezier(.22,.72,.22,1); }
.chat::-webkit-scrollbar { display:none; }
.chat.history-hidden { opacity:0; filter:blur(6px); transform:translateY(6px); pointer-events:auto; }
#phone .chat.clip-hidden { visibility:hidden; opacity:0; filter:blur(8px); transform:translateY(8px); pointer-events:none; transition-duration:.16s; }
.bubble { display:flex; flex:0 0 auto; align-items:flex-start; gap:6px; width:max-content; max-width:50%; min-height:29px; padding:6px 9px; border:1px solid rgba(255,255,255,.09); border-radius:7px 14px 14px 14px; color:rgba(255,255,255,.94); background:rgba(16,10,18,.5); backdrop-filter:blur(12px) saturate(130%); box-shadow:0 6px 18px rgba(0,0,0,.12); animation:bubbleIn .4s cubic-bezier(.2,.8,.2,1); transition:opacity .75s ease,filter .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),max-height .75s ease,margin .75s ease,padding .75s ease; }
.bubble.viewer { border-color:rgba(112,221,255,.2); border-radius:13px 6px 13px 13px; background:linear-gradient(135deg,rgba(24,79,102,.66),rgba(50,42,92,.58)); }
.bubble.leaving { opacity:0; filter:blur(8px); transform:translateY(-13px) scale(.97); max-height:0!important; margin-block:-4px; padding-block:0; border-width:0; overflow:hidden; }
.bubble-name { flex:0 0 auto; padding-top:1px; color:#ff9abd; font-size:9px; font-weight:800; letter-spacing:.03em; }
.bubble.viewer .bubble-name { color:#7ee8ff; text-shadow:0 0 10px rgba(80,216,255,.5); }
.bubble p { display:block; min-width:0; max-width:100%; margin:0; overflow:visible; color:rgba(255,255,255,.92); font-size:11px; line-height:1.28; overflow-wrap:anywhere; text-overflow:clip; white-space:normal; }
@keyframes bubbleIn { from { opacity: 0; transform: translateY(12px) scale(.96); } }
.composer { position:absolute; z-index:8; left:12px; right:12px; bottom:12px; display:flex; align-items:center; gap:10px; transition:transform .48s cubic-bezier(.2,.82,.2,1),opacity .3s ease,gap .42s cubic-bezier(.2,.82,.2,1); }
.composer form { position:relative; isolation:isolate; overflow:hidden; flex:1; display:flex; align-items:center; min-width:0; border:1px solid var(--line); border-radius:999px; background:rgba(18,12,21,.5); backdrop-filter:blur(18px) saturate(140%); transition:background .42s ease,border-color .42s ease,box-shadow .42s ease; }
.composer input { flex:1 1 auto; min-width:0; height:47px; border:0; outline:0; padding:0 4px 0 16px; color:#fff; background:transparent; font-size:13px; transition:flex-basis .42s cubic-bezier(.2,.82,.2,1),width .42s cubic-bezier(.2,.82,.2,1),padding .32s ease,opacity .22s ease; }
.composer input::placeholder { color: rgba(255,255,255,.58); }
.send, .voice-input, .gift-trigger { display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer; }
.voice-input { position:relative; width:35px; height:35px; flex:0 0 35px; color:rgba(255,231,240,.78); background:transparent; touch-action:manipulation; -webkit-tap-highlight-color:transparent; transition:color .18s ease,background .18s ease,transform .18s ease,box-shadow .18s ease; }
.voice-input svg { display:block; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.voice-input:hover,.voice-input:focus-visible { color:#fff; background:rgba(255,255,255,.1); }
.voice-input:active { transform:scale(.94); }
.voice-input.listening { color:#fff; background:linear-gradient(145deg,#ff8ab4,#ec3978); box-shadow:0 0 0 4px rgba(255,78,139,.16),0 0 18px rgba(255,69,135,.55); animation:voiceListeningPulse 1.25s ease-in-out infinite; }
.voice-input:disabled { cursor:default; opacity:.34; box-shadow:none; animation:none; }
.voice-input[aria-disabled="true"] { opacity:.48; }
@keyframes voiceListeningPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
.voice-hold { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; flex:0 0 0; width:0; min-width:0; height:47px; padding:0; overflow:hidden; border:0; border-radius:999px; opacity:0; color:#2a1723; background:transparent; pointer-events:none; touch-action:none; user-select:none; -webkit-user-select:none; transform:translateX(14px); transition:flex-basis .44s cubic-bezier(.2,.82,.2,1),width .44s cubic-bezier(.2,.82,.2,1),opacity .24s ease,transform .44s cubic-bezier(.2,.82,.2,1); }
.voice-hold::before { content:""; position:absolute; z-index:-1; inset:-80% -35%; background:linear-gradient(104deg,transparent 28%,rgba(255,127,181,.12) 39%,rgba(148,118,255,.18) 49%,rgba(102,211,255,.13) 58%,transparent 70%); transform:translateX(-52%) rotate(6deg); animation:voiceLightFlow 2.6s ease-in-out infinite; }
.voice-wave { display:flex; align-items:center; justify-content:center; gap:2px; width:24px; height:22px; flex:0 0 24px; }
.voice-wave i { display:block; width:2.5px; height:7px; border-radius:99px; background:linear-gradient(#ff3f9e,#9a4dff); box-shadow:0 0 8px rgba(232,57,172,.52); animation:voiceWaveIdle 1.2s ease-in-out infinite; }
.voice-wave i:nth-child(2),.voice-wave i:nth-child(4) { animation-delay:-.42s; }
.voice-wave i:nth-child(3) { animation-delay:-.76s; }
.voice-hold-copy { display:flex; align-items:baseline; gap:7px; min-width:0; white-space:nowrap; }
.voice-hold-copy b { color:#d72a9c; font-size:13px; font-weight:800; letter-spacing:.01em; text-shadow:0 0 8px rgba(228,55,177,.42); }
.voice-hold-copy small { color:#8d43c4; font-size:9px; font-weight:700; text-shadow:0 0 6px rgba(164,72,213,.22); }
.voice-hold.arming { transform:scale(.992); }
.voice-hold.recording { color:#d91d97; }
.voice-hold.recording .voice-hold-copy b { color:#ff2c9e; text-shadow:0 0 6px rgba(255,255,255,.85),0 0 13px rgba(255,38,163,.72); }
.voice-hold.recording .voice-hold-copy small { color:#8736c5; }
.voice-hold.recording::before { animation-duration:1.05s; background:linear-gradient(104deg,transparent 20%,rgba(255,80,145,.2) 38%,rgba(121,82,238,.23) 51%,rgba(60,199,255,.18) 62%,transparent 78%); }
.voice-hold.recording .voice-wave i { animation-duration:.48s; background:linear-gradient(#ff347f,#6737d3); box-shadow:0 0 9px rgba(255,63,137,.42); }
.voice-hold.recording .voice-hold-copy b::after { content:"…"; }
.voice-hold.processing::before { animation-duration:1.35s; background:linear-gradient(104deg,transparent 18%,rgba(255,103,168,.16) 36%,rgba(127,94,239,.22) 51%,rgba(89,207,255,.16) 65%,transparent 82%); }
.voice-hold.processing .voice-wave i { animation-duration:.9s; }
.voice-hold.speaking::before { animation-duration:1.7s; background:linear-gradient(104deg,transparent 18%,rgba(116,92,239,.16) 38%,rgba(255,86,154,.2) 54%,rgba(255,187,216,.18) 68%,transparent 82%); }
.voice-hold.speaking .voice-wave i { background:linear-gradient(#784ee7,#ff4f98); animation-duration:.65s; }
.voice-hold:disabled { cursor:not-allowed; }
.composer[data-voice-phase="unavailable"] .voice-hold-copy b { color:#cf337f; text-shadow:0 0 9px rgba(229,62,137,.3); }
.composer[data-voice-phase="unavailable"] .voice-hold-copy small { color:#8e5277; text-shadow:none; }
.composer[data-voice-phase="unavailable"] .voice-wave i { opacity:.72; background:linear-gradient(#ee5c9e,#a95391); box-shadow:0 0 7px rgba(226,65,137,.28); animation-duration:1.7s; }
.composer[data-voice-phase="error"] form { box-shadow:0 10px 30px rgba(28,6,19,.28),0 0 0 2px rgba(224,58,112,.18),inset 0 1px rgba(255,255,255,1); }
.composer.voice-mode { gap:0; }
.composer.voice-mode form { border-color:rgba(255,255,255,.92); background:rgba(255,255,255,.96); box-shadow:0 10px 30px rgba(28,6,19,.28),0 0 24px rgba(255,158,198,.2),inset 0 1px rgba(255,255,255,1); }
.composer.voice-mode input,.composer.voice-mode .voice-input { flex:0 0 0; width:0; min-width:0; padding:0; margin:0; opacity:0; pointer-events:none; }
.composer.voice-mode .voice-hold { flex:1 1 auto; width:auto; opacity:1; pointer-events:auto; transform:translateX(0); }
.composer.voice-mode .send { color:#fff; background:#171217; box-shadow:0 5px 16px rgba(22,10,17,.32),inset 0 1px rgba(255,255,255,.14); }
.composer.voice-mode .gift-trigger { width:0; flex-basis:0; min-width:0; margin:0; padding:0; border-width:0; opacity:0; transform:scale(.72); pointer-events:none; animation:none; }
@keyframes voiceLightFlow { 0% { transform:translateX(-58%) rotate(6deg); } 52%,100% { transform:translateX(58%) rotate(6deg); } }
@keyframes voiceWaveIdle { 0%,100% { height:6px; opacity:.62; } 50% { height:17px; opacity:1; } }
.send { position:relative; width:37px; height:37px; margin-right:5px; color:#20131d; background:#fff; font-size:0; box-shadow:0 5px 16px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.9); transition:transform .2s ease,box-shadow .2s ease; }
.send svg { display:block; width:17px; height:17px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
.send:hover { transform:translateY(-1px); box-shadow:0 7px 18px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.9); }
.send:active { transform:translateY(1px) scale(.96); }
.gift-trigger { position:relative; isolation:isolate; overflow:hidden; width:47px; height:47px; flex:0 0 47px; border:1px solid rgba(255,255,255,.5); background:linear-gradient(145deg,#ffa5c5 0%,#ff4f8b 52%,#f52b72 100%); box-shadow:0 8px 26px rgba(255,45,112,.55),0 0 18px rgba(255,112,166,.38),inset 0 1px rgba(255,255,255,.64); animation:giftTriggerGlow 2.3s ease-in-out infinite; transition:transform .34s ease,filter .22s ease,width .42s cubic-bezier(.2,.82,.2,1),flex-basis .42s cubic-bezier(.2,.82,.2,1),opacity .22s ease,border-width .22s ease; }
.gift-trigger::before { content:""; position:absolute; z-index:0; top:-35%; bottom:-35%; left:-62%; width:32%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),transparent); filter:blur(1px); transform:rotate(18deg) translateX(-190%); animation:giftTriggerShine 3.2s ease-in-out infinite; }
.gift-trigger::after { content:""; position:absolute; z-index:0; inset:3px; border:1px solid rgba(255,255,255,.28); border-radius:inherit; box-shadow:inset 0 0 11px rgba(255,255,255,.22); pointer-events:none; }
.gift-trigger-icon { position:relative; z-index:1; display:block; font-size:20px; line-height:1; filter:brightness(1.18) saturate(1.18) drop-shadow(0 2px 4px rgba(109,10,48,.34)); animation:giftIconFloat 1.9s ease-in-out infinite; }
.gift-trigger:hover,.gift-trigger:focus-visible { filter:brightness(1.1) saturate(1.08); }
.gift-trigger:active { transform:scale(.94); }
@keyframes giftTriggerGlow { 0%,100% { box-shadow:0 8px 24px rgba(255,45,112,.47),0 0 14px rgba(255,112,166,.3),inset 0 1px rgba(255,255,255,.58); } 50% { box-shadow:0 9px 30px rgba(255,45,112,.7),0 0 26px rgba(255,126,177,.58),inset 0 1px rgba(255,255,255,.78); } }
@keyframes giftTriggerShine { 0%,58% { transform:rotate(18deg) translateX(-190%); opacity:0; } 67% { opacity:.94; } 84%,100% { transform:rotate(18deg) translateX(510%); opacity:0; } }
@keyframes giftIconFloat { 0%,100% { transform:translateY(1px) scale(.98); } 50% { transform:translateY(-2px) scale(1.05); } }
.gift-panel { --drawer-drag:0px; position:absolute; z-index:7; left:0; right:0; bottom:0; height:46%; padding:10px 14px 16px; border-top:1px solid rgba(255,255,255,.18); border-radius:24px 24px 0 0; background:rgba(19,13,22,.6); backdrop-filter:blur(36px) saturate(150%); transform:translateY(101%); transition:transform .58s cubic-bezier(.2,.86,.22,1.03),opacity .26s ease; box-shadow:0 -20px 50px rgba(0,0,0,.22); }
.gift-panel.open { transform:translateY(var(--drawer-drag)); }
.gift-panel.dragging { transition:none; }
.gift-panel.open ~ .composer { transform: translateY(80px); opacity:0; pointer-events:none; }
.drawer-handle { display: block; width: 60px; height: 17px; padding: 7px; margin: -7px auto 5px; border: 0; background: transparent; cursor:grab; touch-action:none; }
.drawer-handle:active { cursor:grabbing; }
.drawer-handle span { display: block; height: 3px; border-radius: 999px; background: rgba(255,255,255,.38); }
.drawer-heading { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 13px; touch-action:none; cursor:grab; }
.drawer-heading small { display:block; color: rgba(255,255,255,.56); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.drawer-heading strong { display:block; margin-top: 3px; font-size: 17px; }
.wallet { display:flex; align-items:center; gap:3px; padding:3px 4px 3px 7px; border:1px solid var(--line); border-radius:999px; color:#fff; background:rgba(12,8,14,.28); font:inherit; font-size:11px; }
.wallet button { border:0; color:inherit; background:transparent; cursor:pointer; font:inherit; }
.wallet-balance { display:flex; align-items:center; gap:5px; min-height:24px; padding:0 2px; }
.wallet-balance span { color:#ffd965; }
.wallet-add { display:grid; place-items:center; width:22px; height:22px; padding:0; border-radius:50%!important; color:#271526!important; background:#ffd965!important; box-shadow:0 0 12px rgba(255,217,101,.28); font-size:15px!important; font-weight:900!important; line-height:1; transition:transform .18s ease,filter .18s ease,box-shadow .18s ease; }
.wallet-add:hover,.wallet-add:focus-visible { filter:brightness(1.12); box-shadow:0 0 16px rgba(255,217,101,.5); outline:2px solid rgba(255,255,255,.36); outline-offset:2px; }
.wallet-add:active { transform:scale(.9); }
.gift-grid { height: calc(100% - 58px); overflow-y: auto; display: grid; grid-template-columns: repeat(3,1fr); grid-auto-rows: 94px; gap: 10px; padding-bottom: 8px; scrollbar-width: none; overscroll-behavior:contain; scroll-snap-type:y proximity; }
.gift-grid::-webkit-scrollbar { display:none; }
.gift-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; border:1px solid rgba(255,255,255,.11); border-radius:16px; background:rgba(255,255,255,.07); cursor:pointer; transition:.18s ease; scroll-snap-align:start; }
.gift-card.needed { border-color:rgba(255,139,185,.88); background:linear-gradient(155deg,rgba(255,118,169,.24),rgba(255,255,255,.09)); animation:neededGiftGlow 1.8s ease-in-out infinite; }
.gift-card.needed::after { content:"Needed"; position:absolute; top:6px; right:6px; padding:2px 4px; border-radius:999px; color:#ffeaf3; background:rgba(255,92,151,.72); font-size:6px; font-weight:850; letter-spacing:.05em; text-transform:uppercase; }
@keyframes neededGiftGlow { 0%,100% { box-shadow:0 0 0 rgba(255,90,154,0); transform:translateY(0); } 50% { box-shadow:0 0 22px rgba(255,90,154,.34); transform:translateY(-1px); } }
.gift-card:active { transform:scale(.95); background:rgba(255,106,161,.22); }
.gift-card > span { font-size:28px; }
.gift-card.pose-card { --pose-a:#ff74b4; --pose-b:#d88bff; background:linear-gradient(155deg,rgba(255,255,255,.095),rgba(120,66,102,.1)); }
.gift-card.pose-card:hover,.gift-card.pose-card:focus-visible { border-color:rgba(255,151,201,.55); background:linear-gradient(155deg,rgba(255,145,192,.18),rgba(126,70,123,.14)); box-shadow:0 8px 24px rgba(238,76,149,.14); outline:none; }
.gift-card.pose-orchid { --pose-a:#ff91c8; --pose-b:#b58cff; }
.gift-card.pose-pink { --pose-a:#ff6da8; --pose-b:#ff9ed6; }
.gift-card.pose-plum { --pose-a:#ec78c6; --pose-b:#aa82ff; }
.gift-card.pose-ruby { --pose-a:#ff678f; --pose-b:#e986d7; }
.gift-card.pose-violet { --pose-a:#d77cff; --pose-b:#ff79bd; }
.pose-gift { position:relative; display:grid; place-items:center; width:62px; height:52px; border:1px solid rgba(255,168,208,.34); border-radius:17px; color:var(--pose-a); background:radial-gradient(circle at 38% 24%,rgba(255,235,246,.3),rgba(255,111,176,.11) 55%,rgba(93,48,91,.05) 76%); box-shadow:inset 0 1px rgba(255,255,255,.22),0 8px 20px rgba(0,0,0,.15),0 0 17px rgba(255,92,163,.14); overflow:hidden; }
.pose-gift::after { content:""; position:absolute; inset:-50% -25%; background:linear-gradient(118deg,transparent 39%,rgba(255,255,255,.26) 48%,transparent 57%); transform:translateX(-70%) rotate(5deg); animation:poseGiftShine 3.8s ease-in-out infinite; pointer-events:none; }
.pose-gift svg { width:60px; height:48px; overflow:visible; filter:drop-shadow(0 2px 5px rgba(255,65,145,.35)); transition:transform .22s ease,filter .22s ease; }
.pose-card:hover .pose-gift svg,.pose-card:focus-visible .pose-gift svg { transform:scale(1.06) translateY(-1px); filter:drop-shadow(0 4px 7px rgba(255,65,145,.44)); }
.pose-body-shape,.pose-limb-shape,.pose-head { fill:var(--pose-a); stroke:rgba(255,245,251,.18); stroke-width:.65; vector-effect:non-scaling-stroke; }
.pose-body-shape { opacity:.96; }
.pose-limb-shape { opacity:.94; }
.pose-head { opacity:.99; }
.pose-hair-fill { fill:var(--pose-b); stroke:rgba(255,245,251,.16); stroke-width:.6; opacity:.94; vector-effect:non-scaling-stroke; }
.pose-lingerie { fill:none; stroke:#ffe0ef; stroke-width:1.55; stroke-linecap:round; opacity:.82; }
.pose-highlight { fill:none; stroke:rgba(255,247,252,.58); stroke-width:1.05; stroke-linecap:round; opacity:.78; }
.pose-face { fill:none; stroke:#fff0f7; stroke-width:1.35; stroke-linecap:round; opacity:.9; }
.pose-spark { fill:none; stroke:#ffe7f4; stroke-width:1.7; stroke-linecap:round; opacity:.9; }
@keyframes poseGiftShine { 0%,58% { transform:translateX(-75%) rotate(5deg); opacity:0; } 68% { opacity:1; } 86%,100% { transform:translateX(78%) rotate(5deg); opacity:0; } }
.gift-card b { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
.gift-card small { color:#ffd86e; font-size:10px; }
.gift-card.daily-free { border-color:rgba(255,198,222,.52); background:linear-gradient(155deg,rgba(255,126,177,.24),rgba(137,75,153,.16)); }
.gift-card.daily-free small { color:#fff0f7; font-size:8px; font-weight:850; letter-spacing:.01em; }
.gift-float-layer { position:absolute; z-index:6; inset:0; pointer-events:none; overflow:hidden; }
.gift-float { position:absolute; left:8%; bottom:15%; display:grid; place-items:center; width:42px; height:42px; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(255,255,255,.17); backdrop-filter:blur(10px); font-size:22px; animation:floatGift 2.4s ease-out forwards; }
.gift-float svg { width:30px; height:30px; color:#ffacd0; filter:drop-shadow(0 2px 5px rgba(255,62,134,.36)); }
@keyframes floatGift { 0% { opacity:0; transform:translate(0,20px) scale(.65) rotate(-9deg); } 18% {opacity:1;} 100% {opacity:0; transform:translate(var(--drift),-310px) scale(1.2) rotate(16deg);} }
.like-float-layer { position:absolute; z-index:7; inset:0; overflow:hidden; pointer-events:none; }
.like-heart-float { position:absolute; font-size:clamp(19px,5.4vw,30px); line-height:1; filter:drop-shadow(0 4px 10px rgba(255,54,126,.48)); animation:likeHeartRise 2.25s cubic-bezier(.2,.65,.3,1) var(--heart-delay,0ms) forwards; }
@keyframes likeHeartRise { 0% { opacity:0; transform:translate(-50%,8px) scale(.62) rotate(-12deg); } 14% { opacity:1; transform:translate(-50%,0) scale(1.12) rotate(5deg); } 78% { opacity:.9; } 100% { opacity:0; transform:translate(calc(-50% + var(--heart-drift,0px)),-42vh) scale(.78) rotate(18deg); } }
.ambient-reaction-layer { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.ambient-reaction-float { position:absolute; left:var(--start-left,88%); bottom:var(--start-bottom,10%); display:grid; place-items:center; width:var(--bubble-size,26px); height:var(--bubble-size,26px); border:1px solid hsla(var(--bubble-hue,330),90%,90%,.22); border-radius:50%; opacity:0; color:#fff; background:hsla(var(--bubble-hue,330),72%,62%,.14); backdrop-filter:blur(7px) saturate(135%); box-shadow:inset 0 1px rgba(255,255,255,.16),0 4px 14px hsla(var(--bubble-hue,330),80%,45%,.15); font-size:calc(var(--bubble-size,26px) * .49); line-height:1; filter:saturate(1.08); animation:ambientReactionRise var(--duration,3.9s) cubic-bezier(.2,.62,.28,1) forwards; will-change:transform,opacity; }
.ambient-reaction-float.like { background:hsla(var(--bubble-hue,205),78%,63%,.13); }
@keyframes ambientReactionRise { 0% { opacity:0; transform:translate(0,8px) scale(.68) rotate(-8deg); } 14% { opacity:.7; transform:translate(0,0) scale(1) rotate(2deg); } 66% { opacity:.42; } 100% { opacity:0; transform:translate(var(--drift,-20px),-43vh) scale(.76) rotate(14deg); } }
.toast { position:absolute; z-index:20; left:50%; bottom:84px; max-width:82%; transform:translate(-50%,16px); opacity:0; padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:rgba(15,10,17,.72); backdrop-filter:blur(18px); font-size:10px; pointer-events:none; transition:.3s ease; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.collection-trigger { position:absolute; z-index:10; top:106px; right:0; display:flex; align-items:center; gap:7px; width:88px; height:40px; padding:0 12px 0 10px; overflow:hidden; border:1px solid rgba(255,255,255,.18); border-right:0; border-radius:15px 0 0 15px; color:#fff; background:rgba(18,12,21,.5); backdrop-filter:blur(20px) saturate(145%); box-shadow:0 10px 28px rgba(0,0,0,.22); cursor:pointer; transition:width .46s cubic-bezier(.2,.82,.2,1),padding .46s cubic-bezier(.2,.82,.2,1),background .25s ease; }
.collection-trigger:hover,.collection-trigger:focus-visible { width:88px; padding-left:10px; background:rgba(255,110,165,.25); }
.collection-trigger.compact { width:43px; padding-left:11px; padding-right:10px; }
.collection-trigger-icon { position:relative; display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; filter:drop-shadow(0 0 8px rgba(255,132,180,.42)); }
.collection-trigger-icon svg { width:100%; height:100%; overflow:visible; }
.collection-trigger-icon path { fill:rgba(255,255,255,.025); stroke:rgba(255,255,255,.9); stroke-width:1.8; stroke-linejoin:round; }
.collection-trigger.unlock-alert .collection-trigger-icon { animation:sceneUnlockPulse 1.15s ease-in-out infinite; }
.collection-trigger.unlock-alert .collection-trigger-icon path { stroke:#ff496f; filter:drop-shadow(0 0 5px rgba(255,45,91,.88)); }
@keyframes sceneUnlockPulse { 0%,100% { opacity:.72; transform:scale(.94); } 48% { opacity:1; transform:scale(1.1); } }
.collection-trigger-label { overflow:hidden; max-width:48px; opacity:1; transform:translateX(0); font-size:10px; font-weight:800; letter-spacing:.03em; white-space:nowrap; transition:max-width .38s ease,opacity .25s ease,transform .38s ease; }
.collection-trigger.compact .collection-trigger-label { max-width:0; opacity:0; transform:translateX(8px); }
.scene-coachmark { position:absolute; z-index:11; top:108px; right:62px; display:flex; flex-direction:column; align-items:flex-start; width:126px; padding:8px 10px; border:1px solid rgba(255,255,255,.16); border-radius:14px; opacity:0; visibility:hidden; color:#fff; background:rgba(17,11,19,.48); backdrop-filter:blur(18px) saturate(135%); box-shadow:0 10px 26px rgba(0,0,0,.18); transform:translateX(10px) scale(.92); transform-origin:right center; filter:blur(3px); will-change:opacity,transform,filter; transition:opacity .38s ease,transform .55s cubic-bezier(.22,.72,.24,1),filter .38s ease,visibility 0s linear .55s; cursor:pointer; text-align:left; }
.scene-coachmark::after { content:""; position:absolute; right:-6px; top:15px; width:11px; height:11px; border-top:1px solid rgba(255,255,255,.16); border-right:1px solid rgba(255,255,255,.16); background:rgba(30,20,32,.7); transform:rotate(45deg); }
.scene-coachmark strong { font-size:10px; line-height:1.2; }
.scene-coachmark span { margin-top:3px; color:rgba(255,255,255,.62); font-size:8px; }
.scene-coachmark.show { opacity:1; visibility:visible; transform:translateX(0) scale(1); filter:blur(0); transition:opacity .38s ease,transform .55s cubic-bezier(.22,.72,.24,1),filter .38s ease,visibility 0s; }
.collection-backdrop { position:absolute; z-index:14; inset:0; border:0; padding:0; opacity:0; pointer-events:none; background:rgba(5,3,7,.24); backdrop-filter:blur(2px); transition:opacity .42s ease; }
.collection-backdrop.show { opacity:1; pointer-events:auto; }
.collection-panel { position:absolute; z-index:15; top:0; right:0; bottom:0; width:80%; padding:20px 14px 18px; border-left:1px solid rgba(255,255,255,.18); background:rgba(18,12,21,.54); backdrop-filter:blur(36px) saturate(155%); box-shadow:-24px 0 60px rgba(0,0,0,.28); transform:translateX(101.5%); transition:transform .6s cubic-bezier(.22,.74,.24,1); overflow:hidden; will-change:transform; }
.collection-panel.open { transform:translateX(0); animation:collectionPanelOpen .66s both; }
.collection-panel.closing { transform-origin:right center; animation:collectionPanelClose .52s cubic-bezier(.4,0,.2,1) both; }
@keyframes collectionPanelOpen { 0% { transform:translateX(101.5%); } 84% { transform:translateX(-.22%); } 95% { transform:translateX(.05%); } 100% { transform:translateX(0); } }
@keyframes collectionPanelClose { 0% { transform:translateX(0) scale(1); } 100% { transform:translateX(101.5%) scale(.985); } }
.collection-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 2px 12px; }
.collection-head small { color:rgba(255,255,255,.55); font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.collection-head h2 { margin:3px 0 0; font-size:19px; line-height:1.05; }
.collection-actions { display:flex; align-items:center; gap:6px; }
.collection-actions button { height:36px; border:1px solid var(--line); background:rgba(255,255,255,.08); cursor:pointer; }
.collection-actions .bgm-toggle { display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px; padding:0; border:1px solid var(--line); border-radius:50%; color:rgba(255,154,188,.78); background:rgba(255,255,255,.08); opacity:.82; transition:color .22s ease,opacity .22s ease,transform .22s ease,background .22s ease; }
.collection-actions .bgm-toggle:hover,.collection-actions .bgm-toggle:focus-visible { color:#ff9abc; opacity:1; transform:translateY(-1px); outline:none; }
.bgm-toggle svg { width:18px; height:18px; overflow:visible; }
.bgm-toggle path { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.bgm-toggle[aria-pressed="false"] { color:rgba(255,255,255,.42); opacity:.48; }
.collection-actions .collection-close { width:36px; flex:0 0 36px; padding:0; border-radius:50%; font-size:21px; }
.collection-summary { display:flex; align-items:center; justify-content:space-between; gap:9px; margin:0 2px 10px; }
.collection-affection { display:flex; align-items:center; gap:7px; padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.07); }
.collection-affection > span { color:#ff7ca8; font-size:16px; filter:drop-shadow(0 0 7px #ff4f8a); animation:breathe 1.8s ease-in-out infinite; }
.collection-affection > div { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.collection-affection small { display:inline; color:rgba(255,255,255,.55); font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.collection-progress { display:grid; flex:1 1 auto; grid-template-columns:minmax(24px,1fr) auto; align-items:center; gap:5px; min-width:0; max-width:104px; color:rgba(255,255,255,.48); }
.collection-progress > span { position:relative; overflow:hidden; display:block; height:3px; border-radius:999px; background:rgba(255,255,255,.1); }
.collection-progress > span i { position:absolute; inset:0 auto 0 0; width:0; border-radius:inherit; background:linear-gradient(90deg,#ff7baa,#9cecf2); box-shadow:0 0 8px rgba(255,108,167,.36); transition:width .42s cubic-bezier(.2,.8,.2,1); }
.collection-progress b { overflow:hidden; max-width:58px; font-size:7px; font-weight:750; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.collection-progress.ready { color:rgba(210,255,244,.66); }
.collection-progress.ready > span i { background:linear-gradient(90deg,#80e9cf,#c8fff1); }
.collection-affection b { display:inline; margin:0; font-size:11px; }
.collection-guide { display:flex; align-items:center; justify-content:space-between; gap:4px; margin:0 2px 12px; padding:9px 10px; border-radius:14px; color:rgba(255,255,255,.64); background:rgba(255,255,255,.055); font-size:8px; }
.collection-guide span { display:flex; align-items:center; gap:4px; white-space:nowrap; }
.collection-guide b { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#fff; background:rgba(255,112,164,.28); font-size:7px; }
.collection-guide i { color:rgba(255,255,255,.28); font-style:normal; }
.scene-grid { height:calc(100% - 142px); overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:1px 1px 18px; scrollbar-width:none; }
.scene-grid::-webkit-scrollbar { display:none; }
.scene-card { position:relative; overflow:hidden; display:grid; grid-template-columns:74px minmax(0,1fr) auto; align-items:center; gap:11px; flex:0 0 78px; min-width:0; padding:5px 10px 5px 5px; border:1px solid rgba(255,255,255,.11); border-radius:17px; color:#fff; background:rgba(255,255,255,.055); cursor:pointer; text-align:left; transition:background .22s ease,border-color .22s ease,transform .22s ease; }
.scene-card:hover { background:rgba(255,255,255,.09); }
.scene-card:active { transform:scale(.985); }
.scene-thumb { position:relative; overflow:hidden; display:block; width:74px; height:64px; border-radius:12px; background:#201722; }
.scene-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease,filter .3s ease; }
.scene-card:hover img { transform:scale(1.04); }
.scene-card.locked img { filter:grayscale(.2) brightness(.56); }
.scene-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(10,6,11,.28) 100%); }
.scene-copy { min-width:0; }
.scene-card strong { display:block; overflow:hidden; font-size:11px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.scene-card small { display:block; margin-top:5px; color:rgba(255,255,255,.57); font-size:8px; line-height:1.3; }
.scene-lock { position:relative; isolation:isolate; display:grid; place-items:center; width:28px; height:28px; border:1px solid rgba(255,255,255,.15); border-radius:50%; background:rgba(12,8,14,.38); font-size:11px; transition:border-color .28s ease,box-shadow .28s ease,background .28s ease; }
.scene-lock::before,.scene-lock::after { content:""; position:absolute; pointer-events:none; border-radius:50%; opacity:0; }
.scene-lock::before { inset:-6px; border:1.5px solid transparent; border-top-color:#ff9fc2; border-right-color:rgba(255,216,231,.82); filter:drop-shadow(0 0 4px rgba(255,93,151,.62)); }
.scene-lock::after { inset:-4px; border:1px solid rgba(255,128,176,.46); box-shadow:0 0 12px rgba(255,78,139,.28),inset 0 0 8px rgba(255,154,191,.16); }
.collection-panel.open .scene-card.locked .scene-lock { border-color:rgba(255,174,204,.76); background:rgba(45,20,33,.56); box-shadow:0 0 10px rgba(255,91,151,.22); }
.collection-panel.open .scene-card.locked .scene-lock::before { opacity:1; animation:sceneLockOrbit 2s linear infinite; }
.collection-panel.open .scene-card.locked .scene-lock::after { opacity:.78; animation:sceneLockHalo 2s ease-in-out infinite; }
@keyframes sceneLockOrbit { to { transform:rotate(360deg); } }
@keyframes sceneLockHalo { 0%,100% { transform:scale(.9); opacity:.42; } 50% { transform:scale(1.08); opacity:.92; } }
.scene-current { padding:4px 6px; border-radius:999px; color:#ffd7e5; background:rgba(255,85,146,.24); font-size:7px; font-weight:800; letter-spacing:.08em; }
.scene-card.unlocked .scene-lock { display:none; }
.scene-card.active { border-color:rgba(255,126,174,.92); box-shadow:inset 0 0 0 1px rgba(255,126,174,.55),0 0 20px rgba(255,78,139,.18); }
.music-backdrop { position:absolute; z-index:16; inset:0; border:0; padding:0; opacity:0; pointer-events:none; background:rgba(5,3,7,.3); backdrop-filter:blur(3px); transition:opacity .38s ease; }
.music-backdrop.show { opacity:1; pointer-events:auto; }
.music-panel { position:absolute; z-index:17; top:0; right:0; bottom:0; width:80%; padding:20px 14px 18px; border-left:1px solid rgba(255,255,255,.18); background:rgba(18,12,21,.6); backdrop-filter:blur(38px) saturate(160%); box-shadow:-24px 0 60px rgba(0,0,0,.3); transform:translateX(104%); transition:transform .56s cubic-bezier(.4,0,.2,1); overflow:hidden; will-change:transform; }
.music-panel.open { transform:translateX(0); animation:musicPanelOpen .64s both; }
.music-panel.closing { animation:musicPanelClose .54s cubic-bezier(.4,0,.2,1) both; pointer-events:none; }
@keyframes musicPanelOpen { 0% { transform:translateX(104%); } 82% { transform:translateX(-.55%); } 94% { transform:translateX(.14%); } 100% { transform:translateX(0); } }
@keyframes musicPanelClose { from { transform:translateX(0); } to { transform:translateX(104%); } }
.music-head { margin-bottom:13px; }
.music-head .collection-close { width:36px; height:36px; flex:0 0 36px; padding:0; border:1px solid var(--line); border-radius:50%; background:rgba(255,255,255,.08); cursor:pointer; font-size:21px; }
.music-now { display:flex; align-items:center; gap:10px; margin:0 2px 13px; padding:10px 12px; border:1px solid rgba(255,132,177,.22); border-radius:15px; background:linear-gradient(140deg,rgba(255,99,155,.13),rgba(255,255,255,.055)); }
.music-now small { display:block; color:rgba(255,255,255,.46); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.music-now strong { display:block; margin-top:3px; font-size:12px; }
.music-pulse { display:flex; align-items:flex-end; justify-content:center; gap:3px; width:30px; height:30px; padding:4px 7px; border-radius:0; color:rgba(255,154,188,.7); background:transparent; opacity:.7; }
.music-pulse i { width:2px; height:8px; border-radius:999px; background:currentColor; opacity:.72; animation:musicPulse .9s ease-in-out infinite alternate; }
.music-pulse i:nth-child(2) { height:14px; animation-delay:-.32s; }
.music-pulse i:nth-child(3) { height:10px; animation-delay:-.58s; }
@keyframes musicPulse { to { height:4px; opacity:.55; } }
.music-list { height:calc(100% - 174px); overflow-y:auto; display:flex; flex-direction:column; gap:11px; padding:1px 1px 16px; scrollbar-width:none; }
.music-list::-webkit-scrollbar { display:none; }
.music-card { position:relative; display:grid; grid-template-columns:58px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:76px; padding:8px 10px 8px 8px; border:1px solid rgba(255,255,255,.11); border-radius:17px; color:#fff; background:rgba(255,255,255,.055); cursor:pointer; text-align:left; transition:background .22s ease,border-color .22s ease,transform .22s ease; }
.music-card:hover { background:rgba(255,255,255,.09); }
.music-card:active { transform:scale(.985); }
.music-card.active { border-color:rgba(255,126,174,.88); background:linear-gradient(145deg,rgba(255,102,158,.16),rgba(255,255,255,.06)); box-shadow:inset 0 0 0 1px rgba(255,126,174,.36),0 0 20px rgba(255,78,139,.12); }
.music-art { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; width:58px; height:58px; border-radius:14px; color:rgba(255,255,255,.88); font-size:22px; box-shadow:inset 0 0 24px rgba(255,255,255,.08); }
.music-art img { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.music-art::after { content:""; position:absolute; z-index:1; inset:0; background:linear-gradient(155deg,rgba(12,8,16,.02) 8%,rgba(12,8,16,.14) 43%,rgba(12,8,16,.68) 100%); pointer-events:none; }
.music-art-mark { position:relative; z-index:2; display:grid; place-items:center; width:auto; height:auto; border:0; border-radius:0; color:rgba(255,255,255,.68); background:transparent; box-shadow:none; backdrop-filter:none; font-size:21px; opacity:.78; text-shadow:0 1px 8px rgba(0,0,0,.65); }
.music-card:hover .music-art img { transform:scale(1.07); }
.music-art.rose { background:radial-gradient(circle at 28% 24%,#ffb3cf,#8e3157 62%,#25101b); }
.music-art.amber { background:radial-gradient(circle at 28% 24%,#ffd39a,#885b32 62%,#21150e); }
.music-art.violet { background:radial-gradient(circle at 28% 24%,#d7b2ff,#57386f 62%,#160f1e); }
.music-art.blue { background:radial-gradient(circle at 28% 24%,#a4c8ff,#354866 62%,#0d121a); }
.music-copy { min-width:0; }
.music-copy strong { display:block; overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.music-copy small { display:block; margin-top:5px; color:rgba(255,255,255,.52); font-size:8px; line-height:1.3; }
.music-state { padding:4px 6px; border-radius:999px; color:rgba(255,255,255,.42); background:rgba(255,255,255,.055); font-size:6px; font-weight:850; letter-spacing:.06em; }
.music-card.active .music-state { color:#ffe0eb; background:rgba(255,92,151,.24); }
.music-pause { position:absolute; left:14px; right:14px; bottom:18px; display:flex; align-items:center; justify-content:center; gap:8px; min-height:40px; border:1px solid rgba(255,255,255,.13); border-radius:14px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.07); cursor:pointer; }
.music-pause span { color:#ff9abc; font-size:10px; }
.music-pause b { font-size:10px; }
.music-pause[aria-pressed="false"] span { color:rgba(255,255,255,.45); }
.clean-hint { position:absolute; z-index:12; left:50%; bottom:18px; transform:translate(-50%,12px); opacity:0; visibility:hidden; pointer-events:none; padding:8px 12px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(12,8,14,.32); backdrop-filter:blur(12px); color:rgba(255,255,255,.72); font-size:10px; white-space:nowrap; transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1),visibility .48s step-end; }
.topbar,.chat,.collection-trigger { transition:opacity .32s ease,transform .42s cubic-bezier(.2,.8,.2,1); }
.phone.clean .topbar,.phone.clean .chat,.phone.clean .composer,.phone.clean .collection-trigger,.phone.clean .scene-coachmark { opacity:0; pointer-events:none; }
.phone.clean .topbar { transform:translateY(-18px); }
.phone.clean .chat,.phone.clean .composer { transform:translateY(18px); }
.phone.clean .clean-hint { opacity:1; visibility:visible; transform:translate(-50%,0); transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s step-start; }
.phone.clean .clean-hint.timed-out { opacity:0; visibility:hidden; transform:translate(-50%,5px); transition:opacity .48s ease,transform .48s cubic-bezier(.2,.8,.2,1),visibility .48s step-end; }
.phone.clean .gift-swipe-hint { opacity:0; visibility:hidden; transform:translate(-105%,-50%) scale(.94); animation:none; transition:opacity .2s ease,transform .3s ease,visibility .2s step-end; }
.entry-gate { position:absolute; z-index:30; inset:0; display:grid; grid-template-columns:minmax(0,1fr); align-items:center; justify-items:center; padding:28px; opacity:1; visibility:visible; touch-action:none; overscroll-behavior:contain; background:rgba(14,9,16,.46); backdrop-filter:blur(34px) saturate(125%); transition:opacity .75s ease,visibility .75s step-start; }
.entry-gate.ready { opacity:0; visibility:hidden; pointer-events:none; transition:opacity .75s ease,visibility .75s step-end; }
.entry-card { justify-self:center; width:min(100%,350px); min-width:0; max-width:350px; padding:34px 24px 30px; border:1px solid rgba(255,255,255,.2); border-radius:30px; text-align:center; background:rgba(27,18,30,.46); backdrop-filter:blur(36px) saturate(150%); box-shadow:0 28px 70px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.08); }
.entry-orbit { position:relative; display:grid; place-items:center; width:88px; height:88px; margin:0 auto 17px; padding:3px; border:0; border-radius:50%; background:conic-gradient(#ff75a8,#7ff4ff,#ffe28a,#ac7cff,#ff75a8); animation:ringFlow 3s linear infinite; box-shadow:0 0 30px rgba(255,83,148,.42); cursor:pointer; }
.entry-orbit::before { content:""; position:absolute; inset:3px; border-radius:inherit; background:rgba(18,12,21,.94); }
.entry-orbit:hover { box-shadow:0 0 40px rgba(255,83,148,.62); }
.entry-avatar-crop { position:relative; z-index:1; overflow:hidden; display:block; width:78px; height:78px; border-radius:50%; background:#1c131e; animation:counterRingFlow 3s linear infinite; }
.entry-avatar-crop img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transform:scale(1.035); }
.entry-orbit:disabled { cursor:default; }
.entry-card > small { display:block; color:rgba(255,255,255,.72); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.entry-card h1 { margin:10px 0 0; font-size:22px; line-height:1.02; letter-spacing:-.045em; white-space:nowrap; }
.entry-access { overflow:hidden; max-height:145px; margin-top:24px; opacity:1; transform:translateY(0); transition:max-height .52s cubic-bezier(.22,.8,.28,1),opacity .32s ease,transform .52s cubic-bezier(.22,.8,.28,1),margin .52s ease; }
.entry-access.authorized { max-height:0; margin:0; opacity:0; transform:translateY(-8px); pointer-events:none; }
.entry-access-form { display:grid; grid-template-columns:1fr auto; gap:9px 8px; }
.entry-access-field { min-width:0; text-align:left; }
.entry-access-field span { display:block; margin:0 0 7px 4px; color:rgba(255,255,255,.62); font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.entry-access-field input { width:100%; height:46px; padding:0 14px; border:1px solid rgba(255,255,255,.2); border-radius:14px; outline:0; color:#fff; background:rgba(255,255,255,.08); font-size:12px; transition:.2s ease; }
.entry-access-field input:focus { border-color:rgba(255,128,174,.78); box-shadow:0 0 0 3px rgba(255,90,148,.11); }
.entry-access-form > button { align-self:end; height:46px; padding:0 16px; border:1px solid rgba(255,255,255,.28); border-radius:14px; color:#21121c; background:linear-gradient(135deg,#fff,#ffe8f0); box-shadow:0 10px 24px rgba(255,77,139,.18); cursor:pointer; font-size:11px; font-weight:800; white-space:nowrap; }
.entry-access-form > button:disabled { cursor:progress; opacity:.58; }
.entry-access-form output { grid-column:1/-1; display:block; min-height:14px; color:rgba(255,255,255,.54); font-size:9px; }
.entry-access-form output.error { color:#ff9caf; }
.entry-access:not(.authorized) ~ .entry-start-row { display:none; }
.entry-access:not(.authorized) ~ .entry-status { display:none; }
.entry-start-row { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; margin-top:24px; }
.entry-start { display:flex; flex:1 1 auto; align-items:center; justify-content:center; gap:8px; min-width:0; min-height:52px; padding:0 12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; color:#21121c; background:linear-gradient(135deg,#fff,#ffe8f0); background-size:150% 150%; box-shadow:0 12px 30px rgba(255,77,139,.2); cursor:pointer; font-size:14px; font-weight:800; }
.entry-like-count { display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; gap:5px; min-height:40px; padding:0 10px; border:1px solid rgba(255,151,188,.32); border-radius:999px; color:#ffeaf2; background:rgba(255,117,164,.12); box-shadow:inset 0 1px rgba(255,255,255,.06); white-space:nowrap; }
.entry-like-count > span { color:#ff79a9; font-size:13px; filter:drop-shadow(0 0 6px rgba(255,110,163,.6)); }
.entry-like-count b { font-size:9px; letter-spacing:.01em; }
.entry-start:not(:disabled) { animation:startLiveBreathe 2.8s ease-in-out infinite; }
@keyframes startLiveBreathe { 0%,100% { background-position:0% 50%; box-shadow:0 10px 26px rgba(255,77,139,.16); } 50% { background-position:100% 50%; box-shadow:0 14px 34px rgba(255,77,139,.25); } }
.entry-start > b { position:relative; transform:none; animation:none; }
.entry-start:disabled { cursor:progress; color:#fff; background:rgba(255,255,255,.12); }
.entry-spinner { display:none; width:15px; height:15px; border:2px solid rgba(255,255,255,.25); border-top-color:#fff; border-radius:50%; animation:ringFlow .8s linear infinite; }
.entry-start.loading .entry-spinner { display:block; }
.entry-status { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.entry-status.visible { position:static!important; display:block; width:100%!important; max-width:100%; height:auto!important; margin:10px auto 0!important; overflow:visible!important; clip:auto!important; color:rgba(255,255,255,.76); font-size:10px; line-height:1.35; overflow-wrap:anywhere; word-break:break-word; white-space:normal!important; }
.media-transition { position:absolute; z-index:60; inset:0; display:grid; place-items:center; padding:28px; opacity:0; visibility:hidden; pointer-events:none; background:rgba(14,9,16,.46); backdrop-filter:blur(34px) saturate(125%); transition:opacity .34s ease,visibility .34s step-end; }
.media-transition.show { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .28s ease,visibility .28s step-start; }
.media-transition.soft { display:block; padding:0; background:transparent; backdrop-filter:none; pointer-events:none; }
.media-transition.soft.hint-faded { opacity:0; visibility:hidden; transition:opacity .7s ease,visibility .7s step-end; }
.media-transition.soft .media-transition-card { position:absolute; left:50%; top:66%; flex-direction:row; gap:8px; width:max-content; max-width:74%; min-height:34px; padding:8px 12px 8px 9px; border-radius:999px; background:rgba(22,14,25,.58); backdrop-filter:blur(16px) saturate(135%); box-shadow:0 9px 26px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08); transform:translate(-50%,-50%); }
.media-transition.soft .media-transition-card b { overflow:hidden; max-width:205px; font-size:9.5px; font-weight:720; text-overflow:ellipsis; white-space:nowrap; }
.media-transition.soft .media-transition-card small,
.media-transition.soft .transition-track { display:none; }
.media-transition.soft .transition-orbit { width:18px; height:18px; flex:0 0 18px; box-shadow:0 0 13px rgba(255,83,148,.24); }
.media-transition.soft .transition-orbit::before { inset:2px; }
.media-transition.soft .transition-orbit i { width:10px; height:10px; }
.media-transition-card { display:flex; flex-direction:column; align-items:center; gap:10px; width:min(74%,270px); padding:21px 20px 18px; border:1px solid rgba(255,255,255,.18); border-radius:24px; color:rgba(255,255,255,.86); text-align:center; background:rgba(24,16,27,.34); box-shadow:0 20px 54px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.08); }
.media-transition-card b { font-size:12px; letter-spacing:.01em; }
.media-transition-card small { color:rgba(255,255,255,.54); font-size:9px; letter-spacing:.04em; }
.transition-orbit { position:relative; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:conic-gradient(#ff75a8,#7ff4ff,#ffe28a,#ac7cff,#ff75a8); animation:ringFlow 2.4s linear infinite; box-shadow:0 0 24px rgba(255,83,148,.3); }
.transition-orbit::before { content:""; position:absolute; inset:3px; border-radius:inherit; background:rgba(18,12,21,.9); }
.transition-orbit i { position:relative; z-index:1; display:grid; place-items:center; width:18px; height:18px; border-radius:0; background:transparent; box-shadow:none; animation:counterRingFlow 2.4s linear infinite; }
.transition-orbit i::before { content:""; position:absolute; left:50%; top:50%; width:17px; height:16px; background:linear-gradient(145deg,#ff8fbd 0%,#ff3f7d 58%,#d92562 100%); filter:drop-shadow(0 0 5px rgba(255,67,135,.95)) drop-shadow(0 0 9px rgba(225,66,149,.55)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.5 2 7.7C2 3.8 6.8 1.4 9.8 4.2L12 6.3l2.2-2.1C17.2 1.4 22 3.8 22 7.7 22 14.5 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.5 2 7.7C2 3.8 6.8 1.4 9.8 4.2L12 6.3l2.2-2.1C17.2 1.4 22 3.8 22 7.7 22 14.5 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; transform-origin:50% 52%; animation:transitionHeartBreath 1.42s ease-in-out infinite; }
.transition-orbit i::after { content:""; position:absolute; left:5px; top:13px; width:3px; height:5px; border-radius:55% 45% 62% 38%; background:#ff70a7; box-shadow:5px 1px 0 -1px #ff9ac1; transform:rotate(10deg); animation:transitionHeartDrip 1.75s ease-in-out infinite; }
.media-transition.soft .transition-orbit i::before { width:9px; height:9px; filter:drop-shadow(0 0 4px rgba(255,67,135,.9)); }
.media-transition.soft .transition-orbit i::after { left:3px; top:7px; width:2px; height:3px; box-shadow:3px 1px 0 -1px #ff9ac1; }
@keyframes transitionHeartBreath { 0%,100% { opacity:.76; transform:translate(-50%,-50%) scale(.86); } 48% { opacity:1; transform:translate(-50%,-50%) scale(1.12); } }
@keyframes transitionHeartDrip { 0%,45% { opacity:.35; transform:translateY(-1px) rotate(10deg) scale(.82); } 72% { opacity:.92; transform:translateY(1px) rotate(10deg) scale(1); } 100% { opacity:.38; transform:translateY(2px) rotate(10deg) scale(.72); } }
.transition-track { position:relative; overflow:hidden; display:block; width:72%; height:3px; margin-top:2px; border-radius:999px; background:rgba(255,255,255,.1); }
.transition-track i { position:absolute; inset:0 auto 0 0; width:42%; border-radius:inherit; background:linear-gradient(90deg,transparent,#ff8fba,#8eefff,transparent); animation:loadingSweep 1.35s ease-in-out infinite; }
@keyframes loadingSweep { from { transform:translateX(-120%); } to { transform:translateX(330%); } }
.story-screen { position:absolute; z-index:40; inset:0; isolation:isolate; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:#120d16; contain:layout paint; transition:opacity .7s ease,visibility .7s step-end; }
.story-screen.show { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .7s ease,visibility .7s step-start; }
.story-video { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; background:#170812; filter:blur(13px) saturate(.84) brightness(.7); transform:scale(1.055); transition:filter .8s ease,transform 1.05s cubic-bezier(.2,.82,.2,1),opacity .35s ease; }
.story-screen.show .story-video.ready { filter:blur(0) saturate(1.03) brightness(.98); transform:scale(1); }
.story-video.switching { opacity:.58; filter:blur(12px) saturate(.82) brightness(.62); transform:scale(1.045); }
.story-video.choice-hidden { display:none; }
.story-frame { position:absolute; z-index:0; inset:0; display:block; width:100%; height:100%; opacity:0; visibility:hidden; pointer-events:none; background:#170812; object-fit:cover; transition:opacity .16s ease; }
.story-frame.visible { opacity:1; visibility:visible; }
.story-vignette { position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(8,5,10,.52),transparent 24%,transparent 68%,rgba(8,4,10,.38)),radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(6,3,7,.25)); }
.story-cut-glass { position:absolute; z-index:6; inset:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; background:linear-gradient(145deg,rgba(105,27,76,.42),rgba(27,7,24,.58)),radial-gradient(circle at 52% 38%,rgba(241,90,154,.24),transparent 58%); backdrop-filter:blur(0) saturate(105%); -webkit-backdrop-filter:blur(0) saturate(105%); transition:opacity .3s ease,visibility .3s step-end,backdrop-filter .38s ease,-webkit-backdrop-filter .38s ease; }
.story-cut-glass i { position:absolute; inset:-22%; background:linear-gradient(112deg,transparent 38%,rgba(255,220,236,.13) 49%,transparent 60%); transform:translateX(-52%) rotate(-4deg); }
.story-cut-glass.visible { opacity:1; visibility:visible; backdrop-filter:blur(20px) saturate(125%); -webkit-backdrop-filter:blur(20px) saturate(125%); transition:opacity .24s ease,visibility .24s step-start,backdrop-filter .3s ease,-webkit-backdrop-filter .3s ease; }
.story-cut-glass.visible i { animation:storyGlassSweep .75s ease-in-out both; }
@keyframes storyGlassSweep { from { transform:translateX(-52%) rotate(-4deg); } to { transform:translateX(52%) rotate(-4deg); } }
.story-avatar { position:absolute; z-index:5; top:15px; left:14px; width:54px; height:54px; padding:3px; border:0; border-radius:50%; background:transparent; box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 24px rgba(255,101,171,.4); cursor:pointer; transition:filter .22s ease,box-shadow .22s ease; }
.story-avatar::before { content:""; position:absolute; inset:0; border-radius:inherit; background:conic-gradient(#ff74ad,#80f9ff,#f9df7b,#ac78ff,#ff74ad); animation:ringFlow 3s linear infinite; }
.story-avatar:hover { filter:brightness(1.08); box-shadow:0 8px 28px rgba(0,0,0,.25),0 0 32px rgba(255,101,171,.58); }
.story-avatar > span { position:relative; z-index:1; display:block; width:100%; height:100%; overflow:hidden; border:2px solid rgba(13,9,14,.88); border-radius:inherit; background:#1c121c; }
.story-avatar img { width:100%; height:100%; object-fit:cover; object-position:50% 19%; transform:scale(1.55); }
.story-timer { position:absolute; z-index:5; top:15px; right:14px; display:grid; grid-template-columns:auto auto; align-items:center; column-gap:7px; min-width:116px; padding:7px 10px 6px; border:1px solid rgba(255,177,211,.34); border-radius:16px; color:#fff7fb; background:linear-gradient(145deg,rgba(81,21,61,.7),rgba(28,8,25,.67)); backdrop-filter:blur(12px) saturate(135%); -webkit-backdrop-filter:blur(12px) saturate(135%); box-shadow:0 9px 28px rgba(34,2,23,.35),inset 0 1px rgba(255,255,255,.1); }
.story-timer small { color:rgba(255,224,237,.65); font-size:6.5px; font-weight:850; letter-spacing:.13em; }
.story-timer strong { justify-self:end; font-size:13px; font-variant-numeric:tabular-nums; letter-spacing:.04em; }
.story-timer span { grid-column:1/-1; margin-top:2px; color:rgba(255,211,230,.78); font-size:6.5px; text-align:right; }
.story-timer.earning span { color:#ffd2e5; text-shadow:0 0 9px rgba(255,73,142,.7); }
.story-preload { position:absolute; z-index:4; left:50%; bottom:18px; width:min(72%,250px); padding:7px 10px 6px; border:1px solid rgba(255,184,213,.18); border-radius:14px; color:rgba(255,224,237,.68); background:rgba(29,8,25,.58); box-shadow:0 8px 24px rgba(20,2,14,.32); transform:translateX(-50%); transition:opacity .35s ease,transform .35s ease; }
.story-preload.complete { opacity:0; transform:translate(-50%,8px); pointer-events:none; }
.story-preload > span { display:block; overflow:hidden; height:2px; border-radius:999px; background:rgba(255,255,255,.1); }
.story-preload i { display:block; width:var(--story-preload,0%); height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef3e78,#ff9fc4,#b96ee1); box-shadow:0 0 9px rgba(255,87,151,.62); transition:width .28s ease; }
.story-preload small { display:block; margin-top:4px; font-size:6.5px; letter-spacing:.07em; text-align:center; }
.story-back { position:absolute; z-index:5; left:14px; bottom:18px; padding:6px 8px; border:0; color:rgba(255,235,243,.58); background:transparent; text-shadow:0 2px 10px rgba(15,1,10,.78); cursor:pointer; font-size:8px; font-weight:760; letter-spacing:.025em; transition:color .2s ease,opacity .2s ease,transform .2s ease; }
.story-back:hover,.story-back:focus-visible { color:rgba(255,247,251,.92); opacity:1; transform:translateX(-1px); outline:none; }
.story-back[hidden] { display:none; }
.story-chapter-tree { position:absolute; z-index:8; inset:0; display:flex; padding:14px 10px 12px; opacity:0; visibility:hidden; pointer-events:none; color:#f8edf2; background:radial-gradient(circle at 18% 12%,rgba(150,55,111,.16),transparent 30%),radial-gradient(circle at 82% 78%,rgba(52,129,135,.1),transparent 34%),#100a10; transition:opacity .3s ease,visibility .3s step-end; }
.story-chapter-tree.visible { opacity:1; visibility:visible; pointer-events:auto; transition:opacity .3s ease,visibility 0s step-start; }
.story-map-panel { display:flex; flex:1; min-height:0; flex-direction:column; overflow:hidden; border:1px solid rgba(255,173,208,.2); border-radius:26px; background:linear-gradient(180deg,#1c111a 0%,#151016 100%); box-shadow:0 22px 58px rgba(0,0,0,.38),inset 0 1px rgba(255,255,255,.04); }
.story-map-panel > header { position:relative; padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,.055); }
.story-map-panel > header small { color:#df779f; font-size:6px; font-weight:900; letter-spacing:.22em; }
.story-map-panel > header h2 { margin:2px 0 2px; font-size:20px; line-height:1.08; letter-spacing:-.02em; }
.story-map-panel > header p { position:absolute; right:16px; bottom:12px; margin:0; color:#ffb2ce; font-size:7px; font-weight:760; }
.story-map-legend { display:flex; justify-content:center; gap:18px; padding:8px 12px; border-bottom:1px solid rgba(255,255,255,.055); color:#8e7a85; font-size:6.5px; }
.story-map-legend span { display:flex; align-items:center; gap:5px; }
.story-map-legend i { width:8px; height:8px; border:1px solid #55434d; border-radius:50%; background:#21191f; box-shadow:0 0 0 2px #181117; }
.story-map-legend i.visited { border-color:#68beb7; background:#3b8d87; }
.story-map-legend i.current { border-color:#ff9bc0; background:#ef4e8b; box-shadow:0 0 8px rgba(239,78,139,.6); }
.story-map-viewport { position:relative; flex:1; min-height:0; overflow:hidden; cursor:grab; touch-action:none; overscroll-behavior:none; user-select:none; -webkit-user-select:none; }
.story-map-viewport.dragging { cursor:grabbing; }
.story-map-ambience { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; background:radial-gradient(circle at 12% 24%,rgba(206,75,135,.07),transparent 25%),radial-gradient(circle at 88% 64%,rgba(71,173,164,.06),transparent 27%); }
.story-map-ambience i { --size:4px; --base-rotate:0deg; position:absolute; display:block; width:var(--size); height:var(--size); opacity:.42; animation:storyMapParticleDrift var(--drift,9s) ease-in-out var(--delay,0s) infinite alternate; }
.story-map-ambience .dot { border-radius:50%; background:#d45a8e; box-shadow:0 0 7px rgba(222,81,141,.42); }
.story-map-ambience .ring { --size:9px; border:1px solid rgba(91,184,176,.58); border-radius:50%; box-shadow:0 0 8px rgba(77,177,169,.15),inset 0 0 5px rgba(77,177,169,.12); }
.story-map-ambience .diamond { --size:7px; --base-rotate:45deg; border:1px solid rgba(192,112,178,.55); background:rgba(129,66,123,.12); }
.story-map-ambience .spark::before,.story-map-ambience .spark::after { content:""; position:absolute; left:50%; top:50%; border-radius:999px; background:rgba(255,181,211,.62); box-shadow:0 0 6px rgba(255,123,178,.28); transform:translate(-50%,-50%); }
.story-map-ambience .spark::before { width:1px; height:9px; }
.story-map-ambience .spark::after { width:9px; height:1px; }
.story-map-ambience i:nth-child(1) { left:5%; top:9%; --drift:8.4s; --delay:-2.1s; }
.story-map-ambience i:nth-child(2) { left:21%; top:17%; --drift:11.8s; --delay:-7.2s; }
.story-map-ambience i:nth-child(3) { left:78%; top:11%; --drift:10.1s; --delay:-4.8s; }
.story-map-ambience i:nth-child(4) { left:91%; top:23%; --drift:7.7s; --delay:-1.3s; }
.story-map-ambience i:nth-child(5) { left:9%; top:34%; --drift:12.6s; --delay:-5.9s; }
.story-map-ambience i:nth-child(6) { left:31%; top:29%; --drift:9.3s; --delay:-3.4s; }
.story-map-ambience i:nth-child(7) { left:68%; top:38%; --drift:13.2s; --delay:-8.1s; }
.story-map-ambience i:nth-child(8) { left:94%; top:43%; --drift:10.6s; --delay:-6.2s; }
.story-map-ambience i:nth-child(9) { left:15%; top:54%; --drift:8.9s; --delay:-4.1s; }
.story-map-ambience i:nth-child(10) { left:43%; top:49%; --drift:12.1s; --delay:-2.7s; }
.story-map-ambience i:nth-child(11) { left:81%; top:57%; --drift:9.8s; --delay:-6.9s; }
.story-map-ambience i:nth-child(12) { left:4%; top:70%; --drift:11.4s; --delay:-8.6s; }
.story-map-ambience i:nth-child(13) { left:27%; top:76%; --drift:13.6s; --delay:-3.8s; }
.story-map-ambience i:nth-child(14) { left:61%; top:68%; --drift:8.1s; --delay:-5.1s; }
.story-map-ambience i:nth-child(15) { left:89%; top:79%; --drift:12.8s; --delay:-9.2s; }
.story-map-ambience i:nth-child(16) { left:12%; top:91%; --drift:9.6s; --delay:-7.4s; }
.story-map-ambience i:nth-child(17) { left:55%; top:88%; --drift:11.1s; --delay:-1.8s; }
.story-map-ambience i:nth-child(18) { left:95%; top:94%; --drift:13.9s; --delay:-10.3s; }
@keyframes storyMapParticleDrift { 0% { opacity:.2; transform:translate3d(-5px,6px,0) rotate(var(--base-rotate)) scale(.82); } 42% { opacity:.56; transform:translate3d(8px,-9px,0) rotate(calc(var(--base-rotate) + 22deg)) scale(1.05); } 100% { opacity:.3; transform:translate3d(-3px,-17px,0) rotate(calc(var(--base-rotate) - 16deg)) scale(.9); } }
.story-map-tools { position:absolute; z-index:5; top:9px; right:9px; display:flex; align-items:center; gap:3px; padding:3px; border:1px solid rgba(255,177,210,.19); border-radius:13px; background:rgba(24,15,22,.9); box-shadow:0 7px 20px rgba(0,0,0,.3); touch-action:manipulation; }
.story-map-tools button { display:grid; place-items:center; width:30px; height:30px; padding:0; border:0; border-radius:9px; color:#dcc7d1; background:#2a1b24; font-size:14px; font-weight:800; cursor:pointer; touch-action:manipulation; transition:transform .12s ease,background-color .12s ease,color .12s ease,opacity .12s ease; }
.story-map-tools button:hover,.story-map-tools button:focus-visible { color:#fff; background:#71304f; outline:none; }
.story-map-tools button:active { color:#fff; background:#a83d6d; transform:scale(.84); }
.story-map-tools button:disabled { opacity:.3; cursor:not-allowed; transform:none; }
.story-map-tools output { min-width:32px; color:#bda6b1; font-size:6.5px; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.story-map-nodes { position:absolute; z-index:1; left:0; top:0; width:620px; min-height:920px; padding:48px 28px 58px; background-image:radial-gradient(rgba(255,255,255,.04) .65px,transparent .65px); background-size:14px 14px; transform-origin:0 0; will-change:transform; transition:transform .14s cubic-bezier(.2,.75,.2,1); }
.story-map-viewport.dragging .story-map-nodes { transition:none; }
.story-map-links { position:absolute; z-index:0; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; }
.story-map-link { opacity:.28; stroke:#896277; stroke-width:1.15; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.story-map-link.visited { opacity:.94; stroke:#4ba69f; stroke-width:1.8; filter:drop-shadow(0 0 3px rgba(75,166,159,.24)); }
.story-map-link.current { opacity:1; stroke:#ef4e8b; stroke-width:2.4; filter:drop-shadow(0 0 5px rgba(239,78,139,.48)); }
.story-map-stage { --route-stops:1; position:relative; z-index:1; padding:7px 0 24px; }
.story-map-stage h3 { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:5px; width:max-content; min-width:70px; margin:0 auto 9px; padding:4px 9px 4px 5px; border:1px solid #49323f; border-radius:999px; color:#ac97a2; background:#1b1219; font-size:6.5px; font-weight:850; letter-spacing:.045em; text-transform:uppercase; box-shadow:0 4px 12px rgba(0,0,0,.24); }
.story-map-stage h3 b { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#7f6974; background:#2b1d25; font-size:5.5px; }
.story-map-stage.has-progress h3 { border-color:#3f706d; color:#a8d4d0; }
.story-map-stage.has-progress h3 b { color:#c7ebe8; background:#315f5c; }
.story-map-stage.has-current h3 { border-color:#ba4a77; color:#ffd6e5; }
.story-map-stage.has-current h3 b { color:#fff; background:#d6407c; }
.story-map-node-grid { position:relative; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0; }
.story-map-node { position:relative; z-index:1; display:grid; min-width:0; justify-items:center; gap:5px; padding:0 1px; border:0; color:#715f68; background:transparent; font:inherit; text-align:center; }
.story-map-node:disabled { cursor:not-allowed; }
.story-map-node .story-map-pin { display:grid; place-items:center; width:34px; height:34px; border:2px solid #493741; border-radius:50%; color:#604f58; background:#21171e; box-shadow:0 0 0 3px #181117; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.story-map-node .story-map-pin b { font-size:6px; font-style:normal; font-weight:900; }
.story-map-node span { display:-webkit-box; overflow:hidden; min-height:17px; max-width:52px; color:inherit; font-size:7px; font-weight:720; line-height:1.18; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.story-map-node.visited { color:#addbd7; }
.story-map-node.visited .story-map-pin { border-color:#68bdb6; color:#d9f4f1; background:#326c68; box-shadow:0 0 0 3px #181117,0 0 12px rgba(80,181,173,.22); }
.story-map-node.visited:not(:disabled) { cursor:pointer; }
.story-map-node.visited:not(:disabled):hover .story-map-pin,.story-map-node.visited:not(:disabled):focus-visible .story-map-pin { border-color:#9be2dc; background:#438781; transform:translateY(-1px) scale(1.06); box-shadow:0 0 0 3px #181117,0 0 18px rgba(102,207,197,.38); }
.story-map-node.visited:not(:disabled):focus-visible { outline:none; }
.story-map-node.current { color:#ffd7e6; }
.story-map-node.current .story-map-pin { border-color:#ffafcc; color:#fff; background:linear-gradient(145deg,#f05b94,#c62d69); box-shadow:0 0 0 3px #181117,0 0 0 5px rgba(239,78,139,.18),0 0 20px rgba(239,78,139,.52); }
.story-map-panel > footer { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:6px; padding:9px 12px 12px; border-top:1px solid rgba(255,255,255,.055); background:#151015; }
.story-map-panel > footer button { min-height:34px; border:1px solid #49313f; border-radius:12px; color:#a997a0; background:#21171e; font-size:7px; font-weight:780; cursor:pointer; }
.story-map-panel > footer .story-map-primary { grid-column:auto; grid-row:auto; order:3; border-color:#d95087; color:#fff; background:linear-gradient(135deg,#c43b72,#a72b61); font-size:8px; }
.story-map-panel > footer button:focus-visible { outline:2px solid #ff9ac4; outline-offset:2px; }
.story-choice-layer { position:absolute; z-index:4; inset:0; display:grid; place-items:center; padding:84px 17px 34px; opacity:0; visibility:hidden; background:linear-gradient(180deg,rgba(40,6,29,.3),rgba(33,5,25,.7)),radial-gradient(circle at 52% 34%,rgba(225,61,129,.23),transparent 56%); backdrop-filter:blur(0) saturate(105%); -webkit-backdrop-filter:blur(0) saturate(105%); transform:translateZ(0); backface-visibility:hidden; will-change:opacity,backdrop-filter; transition:opacity .64s cubic-bezier(.22,.72,.22,1),visibility .64s step-end,backdrop-filter .7s cubic-bezier(.22,.72,.22,1),-webkit-backdrop-filter .7s cubic-bezier(.22,.72,.22,1); }
.story-choice-layer.visible { opacity:1; visibility:visible; backdrop-filter:blur(16px) saturate(122%); -webkit-backdrop-filter:blur(16px) saturate(122%); transition:opacity .64s cubic-bezier(.22,.72,.22,1),visibility 0s step-start,backdrop-filter .7s cubic-bezier(.22,.72,.22,1),-webkit-backdrop-filter .7s cubic-bezier(.22,.72,.22,1); }
.story-choice-card { width:100%; padding:20px 15px 16px; border:1px solid rgba(255,185,216,.35); border-radius:27px; color:#fff; background:linear-gradient(155deg,rgba(96,28,72,.76),rgba(35,9,31,.82)); box-shadow:0 26px 64px rgba(30,1,20,.5),0 0 34px rgba(218,51,117,.15),inset 0 1px rgba(255,235,243,.12); opacity:0; filter:blur(7px); transform:translate3d(0,14px,0) scale(.975); backface-visibility:hidden; will-change:opacity,filter,transform; transition:opacity .5s .12s cubic-bezier(.22,.72,.22,1),filter .58s .08s ease,transform .68s .08s cubic-bezier(.2,.82,.2,1); }
.story-choice-layer.visible .story-choice-card { opacity:1; filter:blur(0); transform:translate3d(0,0,0) scale(1); }
.story-choice-card > small { display:block; margin-bottom:6px; color:#ff9ec3; font-size:7px; font-weight:900; letter-spacing:.18em; text-align:center; }
.story-choice-card h2 { margin:0 0 13px; font-size:18px; line-height:1.15; text-align:center; text-shadow:0 3px 16px rgba(0,0,0,.38); }
.story-options { display:grid; gap:8px; }
.story-option { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; min-height:54px; padding:8px 10px; border:1px solid rgba(255,187,216,.2); border-radius:18px; color:#fff; background:linear-gradient(145deg,rgba(255,137,185,.12),rgba(142,63,151,.12)); box-shadow:inset 0 1px rgba(255,255,255,.04); cursor:pointer; text-align:left; transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease; }
.story-option:hover,.story-option:focus-visible { transform:translateY(-1px); border-color:rgba(255,153,196,.64); background:linear-gradient(145deg,rgba(232,62,126,.28),rgba(159,76,183,.22)); box-shadow:0 8px 24px rgba(38,2,25,.24),inset 0 1px rgba(255,255,255,.09); outline:none; }
.story-option:disabled { opacity:.58; cursor:wait; }
.story-option .emoji { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.22),rgba(231,57,124,.17) 55%,rgba(107,40,106,.14)); font-size:17px; filter:drop-shadow(0 0 7px rgba(255,85,151,.32)); }
.story-option .label { min-width:0; font-size:10px; font-weight:820; line-height:1.24; }
.story-option .price { display:inline-flex; align-items:center; gap:4px; padding:4px 7px; border:1px solid rgba(255,194,218,.2); border-radius:999px; color:#ffe1ed; background:rgba(255,119,172,.1); font-size:7px; font-weight:850; white-space:nowrap; }
.story-option .price.free { color:#ffd7e8; background:rgba(255,255,255,.08); }
.story-option .coin-dot { width:8px; height:8px; border:1px solid rgba(255,244,179,.72); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fffbd2 0 12%,#ffd760 28%,#f19a27 100%); box-shadow:0 0 7px rgba(255,195,72,.48); }
.story-option.story-secondary { grid-template-columns:30px minmax(0,1fr); justify-content:center; }
.story-option.story-secondary .price { display:none; }
.story-finish-note { margin:0 0 12px; color:rgba(255,225,237,.72); font-size:9px; line-height:1.45; text-align:center; }
.tutorial-spotlight { --tutorial-shade:rgba(6,3,8,.62); position:absolute; z-index:31; inset:0; overflow:hidden; width:100%; height:100%; border:0; border-radius:inherit; opacity:0; pointer-events:none; background:transparent; box-shadow:none; transform:translateZ(0); transition:opacity .22s ease; }
.tutorial-spotlight::before { content:""; position:absolute; left:var(--spot-left,0); top:var(--spot-top,0); box-sizing:border-box; width:var(--spot-width,0); height:var(--spot-height,0); border-radius:var(--spot-radius,17px); background:transparent; box-shadow:0 0 0 100vmax var(--tutorial-shade); }
.tutorial-spotlight::after { content:""; position:absolute; left:var(--spot-left,0); top:var(--spot-top,0); box-sizing:border-box; width:var(--spot-width,0); height:var(--spot-height,0); border:1px solid rgba(255,218,232,.94); border-radius:var(--spot-radius,17px); box-shadow:0 0 0 2px rgba(255,107,166,.16),0 0 24px rgba(255,104,164,.38); }
.phone.tutorial-active .tutorial-spotlight { opacity:1; }
.tutorial-spotlight.no-target { background:rgba(6,3,8,.54); }
.tutorial-spotlight.no-target::before,.tutorial-spotlight.no-target::after { display:none; }
.live-tutorial { position:absolute; z-index:35; left:var(--tutorial-left,50%); top:var(--tutorial-top,auto); bottom:auto; display:flex; align-items:center; gap:8px; width:var(--tutorial-width,190px); min-height:44px; padding:8px 10px; border:1px solid rgba(255,206,225,.38); border-radius:18px; opacity:0; visibility:hidden; color:#fff; background:linear-gradient(145deg,rgba(58,34,57,.9),rgba(24,15,28,.86)); backdrop-filter:blur(18px) saturate(145%); box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 24px rgba(255,93,153,.18),inset 0 1px rgba(255,255,255,.13); transform:translate(0,8px) scale(.97); transform-origin:var(--tutorial-arrow-x,50%) 50%; transition:opacity .25s ease,transform .38s cubic-bezier(.2,.82,.2,1),visibility .25s step-end; pointer-events:none; }
.live-tutorial.visible { opacity:1; visibility:visible; transform:translate(0,0) scale(1); transition:opacity .25s ease,transform .38s cubic-bezier(.2,.82,.2,1),visibility .25s step-start; pointer-events:auto; }
.live-tutorial.completed { opacity:.35; transform:translate(0,-3px) scale(.96); }
.live-tutorial[data-placement="target"]::after { content:""; position:absolute; left:var(--tutorial-arrow-x,50%); width:9px; height:9px; background:rgba(43,27,45,.94); transform:translateX(-50%) rotate(45deg); }
.live-tutorial[data-side="below"]::after { top:-5px; border-top:1px solid rgba(255,206,225,.38); border-left:1px solid rgba(255,206,225,.38); }
.live-tutorial[data-side="above"]::after { bottom:-5px; border-right:1px solid rgba(255,206,225,.38); border-bottom:1px solid rgba(255,206,225,.38); }
.tutorial-copy { min-width:0; flex:1 1 auto; }
.live-tutorial p { margin:0; color:#fff; font-size:9.5px; font-weight:760; line-height:1.35; white-space:normal; text-shadow:0 1px 7px rgba(0,0,0,.45); }
.live-tutorial .tutorial-copy > span { display:block; margin-top:2px; color:rgba(255,231,240,.68); font-size:7px; letter-spacing:.08em; }
.tutorial-actions { display:flex; flex:0 0 auto; align-items:center; gap:4px; }
.tutorial-actions button { min-height:24px; padding:0 8px; border:0; border-radius:999px; color:rgba(255,255,255,.5); background:rgba(255,255,255,.055); cursor:pointer; font-size:7px; }
.tutorial-actions button[hidden] { display:none; }
.tutorial-actions #tutorialNext { color:#fff; background:rgba(239,85,145,.42); box-shadow:inset 0 1px rgba(255,255,255,.14); }
.tutorial-cue { position:relative; display:grid; place-items:center; width:34px; height:24px; flex:0 0 34px; color:rgba(255,220,233,.86); }
.tutorial-cue svg { width:34px; height:16px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.live-tutorial[data-cue="right"] .tutorial-cue svg { animation:tutorialSwipeRight 1.45s cubic-bezier(.25,.6,.3,1) infinite; }
.live-tutorial[data-cue="left"] .tutorial-cue svg { transform:rotate(180deg); animation:tutorialSwipeLeft 1.45s cubic-bezier(.25,.6,.3,1) infinite; }
.live-tutorial[data-cue="tap"] .tutorial-cue { width:22px; flex-basis:22px; }
.live-tutorial[data-cue="tap"] .tutorial-cue svg { display:none; }
.live-tutorial[data-cue="tap"] .tutorial-cue::before { content:""; width:7px; height:7px; border-radius:50%; background:#ffd7e6; box-shadow:0 0 0 0 rgba(255,150,190,.45); animation:tutorialTap 1.35s ease-out infinite; }
@keyframes tutorialSwipeRight { 0%,18% { opacity:.24; transform:translateX(-5px); } 62% { opacity:1; transform:translateX(4px); } 100% { opacity:0; transform:translateX(7px); } }
@keyframes tutorialSwipeLeft { 0%,18% { opacity:.24; transform:translateX(5px) rotate(180deg); } 62% { opacity:1; transform:translateX(-4px) rotate(180deg); } 100% { opacity:0; transform:translateX(-7px) rotate(180deg); } }
@keyframes tutorialTap { 0% { opacity:.55; box-shadow:0 0 0 0 rgba(255,150,190,.45); } 68%,100% { opacity:1; box-shadow:0 0 0 7px rgba(255,150,190,0); } }
.live-tutorial[data-placement="gesture"] { left:50%; top:auto; bottom:118px; width:226px; transform:translate(-50%,8px) scale(.97); transform-origin:50% 50%; }
.live-tutorial[data-placement="gesture"].visible { transform:translate(-50%,0) scale(1); }
.live-tutorial[data-placement="gesture"].completed { transform:translate(-50%,-3px) scale(.96); }
.tutorial-focus { position:relative; z-index:34!important; outline:none; animation:none; }
.phone.tutorial-active button,
.phone.tutorial-active input,
.phone.tutorial-active textarea,
.phone.tutorial-active select,
.phone.tutorial-active a,
.phone.tutorial-active .chat,
.phone.tutorial-active .gift-panel,
.phone.tutorial-active .collection-panel,
.phone.tutorial-active .music-panel,
.phone.tutorial-active .profile-card,
.phone.tutorial-active dialog { pointer-events:none!important; }
.phone.tutorial-active .tutorial-focus,
.phone.tutorial-active .tutorial-focus *,
.phone.tutorial-active .live-tutorial,
.phone.tutorial-active .live-tutorial * { pointer-events:auto!important; }
.phone.tutorial-active .chat { opacity:1; filter:none; pointer-events:none; }
.game-invite-dialog { width:343.2px; max-width:none; padding:0; border:0; color:#fff; background:transparent; overflow:visible; transform:scale(var(--demo-scale)); transform-origin:50% 50%; }
.game-invite-dialog::backdrop { background:rgba(7,4,8,.52); backdrop-filter:blur(15px) saturate(125%); }
.game-invite-card { padding:29px 22px 20px; border:1px solid rgba(255,255,255,.2); border-radius:28px; text-align:center; background:linear-gradient(160deg,rgba(45,27,48,.76),rgba(22,14,25,.66)); backdrop-filter:blur(34px) saturate(150%); box-shadow:0 28px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); }
.game-invite-orbit { position:relative; display:grid; place-items:center; width:54px; height:54px; margin:0 auto 17px; border-radius:50%; background:conic-gradient(#ff75a8,#7ff4ff,#ffe28a,#ac7cff,#ff75a8); box-shadow:0 0 26px rgba(255,83,148,.4); animation:ringFlow 3s linear infinite; }
.game-invite-orbit::before { content:""; position:absolute; inset:3px; border-radius:inherit; background:rgba(23,14,25,.94); }
.game-invite-orbit i { position:relative; width:10px; height:10px; border-radius:50%; background:#ff6c9e; box-shadow:0 0 13px #ff6c9e; animation:breathe 1.6s ease-in-out infinite; }
.game-invite-card small { color:rgba(255,255,255,.5); font-size:9px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
.game-invite-card h2 { max-width:290px; margin:8px auto 9px; font-size:21px; line-height:1.18; letter-spacing:-.02em; }
.game-invite-card p { max-width:285px; margin:0 auto 21px; color:rgba(255,255,255,.66); font-size:12px; line-height:1.5; }
.game-invite-actions { display:grid; grid-template-columns:1fr 1.08fr; gap:9px; }
.game-invite-actions button { min-height:44px; border:1px solid rgba(255,255,255,.14); border-radius:14px; color:rgba(255,255,255,.72); background:rgba(255,255,255,.08); cursor:pointer; font-size:11px; font-weight:750; }
.game-invite-actions button.primary { border-color:rgba(255,137,179,.58); color:#fff; background:linear-gradient(145deg,rgba(255,124,170,.72),rgba(222,68,128,.72)); box-shadow:0 9px 25px rgba(255,61,130,.2); }
.game-invite-actions button.quiet-exit { grid-column:1 / -1; min-height:24px; margin:2px auto -4px; padding:2px 16px; border:0; color:rgba(255,255,255,.34); background:transparent; font-size:10px; font-weight:650; letter-spacing:.04em; }
.game-invite-actions button.quiet-exit:hover { color:rgba(255,255,255,.58); }
.dialog-card { padding:25px 22px 18px; text-align:center; border:1px solid rgba(255,255,255,.2); border-radius:24px; background:rgba(24,16,27,.5); backdrop-filter:blur(32px) saturate(140%); }
.dialog-heart { color:#ff78a8; font-size:26px; }
.dialog-card h2 { margin:8px 0 6px; font-size:18px; }
.dialog-card p { margin:0 0 18px; color:rgba(255,255,255,.67); font-size:12px; }
.dialog-card div { display:flex; gap:8px; }
.dialog-card button { flex:1; min-height:40px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.12); cursor:pointer; font-size:11px; }
.dialog-card button.danger { background:rgba(255,78,126,.28); }

.topup-dialog { width:366.6px; max-width:none; max-height:669.333333px; padding:0; border:0; color:#fff; background:transparent; overflow:auto; scrollbar-width:none; transform:scale(var(--demo-scale)); transform-origin:50% 50%; }
.topup-dialog.dialog-fallback-open,.game-invite-dialog.dialog-fallback-open { position:fixed; z-index:90; left:50%; top:50%; margin:0; transform:translate(-50%,-50%) scale(var(--demo-scale)); }
.topup-dialog::-webkit-scrollbar { display:none; }
.topup-dialog::backdrop { background:rgba(8,3,10,.62); backdrop-filter:blur(18px) saturate(130%); }
.topup-card { position:relative; isolation:isolate; overflow:hidden; padding:20px; border:1px solid rgba(255,219,236,.25); border-radius:28px; background:linear-gradient(155deg,rgba(55,31,55,.92),rgba(23,13,27,.94) 54%,rgba(41,18,37,.94)); box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 42px rgba(255,73,139,.12),inset 0 1px rgba(255,255,255,.15); backdrop-filter:blur(36px) saturate(160%); }
.topup-card::before { content:""; position:absolute; z-index:-2; width:250px; height:250px; top:-145px; right:-82px; border-radius:50%; background:radial-gradient(circle,rgba(255,126,180,.32),rgba(255,85,148,.08) 48%,transparent 72%); filter:blur(2px); animation:topupAura 5.5s ease-in-out infinite; }
.topup-card::after { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; opacity:.46; background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.75) 0 1px,transparent 1.6px),radial-gradient(circle at 88% 33%,rgba(255,215,231,.7) 0 1px,transparent 1.7px),radial-gradient(circle at 74% 78%,rgba(255,255,255,.55) 0 1px,transparent 1.6px),linear-gradient(120deg,transparent 28%,rgba(255,255,255,.045) 46%,transparent 62%); background-size:auto,auto,auto,200% 100%; animation:topupSheen 7s linear infinite; }
.topup-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.topup-title { display:flex; align-items:center; gap:11px; }
.topup-emblem { position:relative; display:grid; place-items:center; width:39px; height:39px; flex:0 0 39px; border:1px solid rgba(255,222,237,.38); border-radius:13px; color:transparent; background:linear-gradient(145deg,rgba(255,155,196,.32),rgba(255,75,142,.12)); box-shadow:0 8px 24px rgba(255,65,135,.2),inset 0 1px rgba(255,255,255,.2); font-size:18px; animation:topupEmblemBreath 3.4s ease-in-out infinite; }
.topup-emblem::before { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:transparent; background:linear-gradient(115deg,#ff8ac1 5%,#ffd66f 28%,#8ef0e2 50%,#b89bff 72%,#ff8ac1 95%); background-size:240% 100%; background-clip:text; -webkit-background-clip:text; animation:topupEmblemFlow 5s linear infinite; }
.topup-head small { color:rgba(255,226,239,.59); font-size:8px; font-weight:800; letter-spacing:.17em; text-transform:uppercase; }
.topup-head h2 { margin:3px 0 0; font-size:21px; letter-spacing:-.025em; }
.topup-head > button { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#fff; background:rgba(255,255,255,.07); cursor:pointer; font-size:20px; transition:transform .2s ease,background .2s ease; }
.topup-head > button:hover,.topup-head > button:focus-visible { transform:rotate(5deg) scale(1.06); background:rgba(255,255,255,.13); }
.topup-balance { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:17px 0 8px; padding:12px 14px; border:1px solid rgba(255,220,236,.13); border-radius:17px; background:linear-gradient(120deg,rgba(255,255,255,.085),rgba(255,105,164,.055)); box-shadow:inset 0 1px rgba(255,255,255,.055); }
.topup-balance > span { display:grid; gap:3px; }
.topup-balance span small { color:rgba(255,255,255,.5); font-size:9px; letter-spacing:.06em; text-transform:uppercase; }
.topup-balance span b { color:rgba(255,236,245,.82); font-size:10px; font-weight:600; }
.topup-balance > strong { display:flex; align-items:center; gap:6px; font-size:18px; letter-spacing:-.02em; }
.topup-balance i { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; color:#fff0a7; background:radial-gradient(circle at 35% 30%,#fff5b9,#ffc33d 48%,#d9800d); box-shadow:0 0 15px rgba(255,197,62,.35); font-size:9px; font-style:normal; }
.topup-message { min-height:16px; margin:0 2px 11px; color:rgba(255,236,245,.62); font-size:10px; line-height:1.45; }
.coin-packages { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.coin-packages button { --art-width:28px; position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:var(--art-width) 1fr auto; grid-template-areas:"art amount price" "art label price"; align-items:center; min-height:74px; padding:15px 12px 11px; border:1px solid rgba(255,234,243,.12); border-radius:18px; color:#fff; background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.035)); box-shadow:inset 0 1px rgba(255,255,255,.055),0 8px 20px rgba(0,0,0,.1); cursor:pointer; text-align:left; transition:transform .22s cubic-bezier(.2,.82,.25,1),border-color .22s ease,background .22s ease,box-shadow .22s ease; }
.coin-packages button::before { content:""; position:absolute; z-index:-1; inset:-45% 38% -45% -35%; border-radius:50%; background:radial-gradient(circle,rgba(255,119,173,.2),transparent 68%); opacity:.45; transition:opacity .22s ease,transform .28s ease; }
.coin-packages button:hover,.coin-packages button:focus-visible { transform:translateY(-2px); border-color:rgba(255,172,205,.36); background:linear-gradient(145deg,rgba(255,168,203,.14),rgba(255,255,255,.045)); outline:none; }
.coin-packages button:hover::before,.coin-packages button:focus-visible::before { opacity:.9; transform:scale(1.12); }
.coin-packages button.selected { transform:translateY(-2px); border-color:rgba(255,139,184,.9); background:linear-gradient(145deg,rgba(255,112,170,.27),rgba(102,38,81,.2)); box-shadow:0 9px 28px rgba(255,63,134,.17),0 0 0 1px rgba(255,182,211,.14) inset,inset 0 1px rgba(255,255,255,.16); }
.coin-packages button.selected::after { content:"✓"; position:absolute; right:7px; bottom:6px; display:grid; place-items:center; width:15px; height:15px; border-radius:50%; color:#331426; background:#ffd5e6; box-shadow:0 0 12px rgba(255,156,196,.5); font-size:9px; font-weight:900; }
.coin-packages strong { grid-area:amount; font-size:17px; line-height:1; letter-spacing:-.02em; }
.coin-packages .pack-label { grid-area:label; margin-top:4px; color:rgba(255,255,255,.5); font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
.coin-packages .pack-label b { margin-left:3px; color:#ffa8ca; font-size:9px; font-weight:800; }
.coin-packages small { grid-area:price; padding-right:2px; color:#ffe0ed; font-size:12px; font-weight:800; }
.coin-packages em { position:absolute; top:5px; right:8px; padding:3px 6px; border:1px solid rgba(255,211,229,.18); border-radius:999px; color:#ffd5e5; background:rgba(255,94,153,.16); font-size:7px; font-style:normal; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }
.coin-packages button:has(em) { padding-top:20px; }
.coin-packages button.popular { border-color:rgba(255,151,193,.34); }
.coin-packages button.best-value { border-color:rgba(255,214,129,.28); background:linear-gradient(145deg,rgba(255,189,95,.09),rgba(255,95,155,.07)); }
.coin-packages button.best-value em { color:#321b1c; background:linear-gradient(135deg,#ffe99c,#ffb765); border-color:rgba(255,246,198,.56); }
.coin-packages .tier-2 { --art-width:34px; min-height:78px; }
.coin-packages .tier-3 { --art-width:38px; min-height:84px; }
.coin-packages .tier-4 { --art-width:43px; min-height:90px; }
.coin-packages .tier-5 { --art-width:74px; grid-column:1/-1; min-height:94px; padding-inline:14px 17px; }
.coin-packages .tier-6 { --art-width:90px; grid-column:1/-1; min-height:108px; padding-inline:15px 18px; border-radius:21px; }
.coin-packages .tier-5 strong { font-size:20px; }
.coin-packages .tier-5 small { font-size:13px; }
.coin-packages .tier-6 strong { font-size:23px; }
.coin-packages .tier-6 small { color:#fff0c0; font-size:15px; }
.pack-art { grid-area:art; position:relative; align-self:center; width:var(--art-width); height:48px; filter:drop-shadow(0 7px 9px rgba(174,93,15,.22)); }
.pack-art i { position:absolute; width:19px; height:19px; border:1px solid rgba(255,247,183,.78); border-radius:50%; background:radial-gradient(circle at 36% 30%,#fffbd1 0 8%,#ffe776 18%,#ffc139 55%,#d98510 100%); box-shadow:inset -2px -3px 3px rgba(153,76,0,.24),0 0 9px rgba(255,195,53,.22); }
.pack-art i::after { content:"✦"; position:absolute; inset:0; display:grid; place-items:center; color:rgba(137,76,7,.7); font-size:7px; }
.coin-single i { left:3px; top:15px; }
.coin-pair i:nth-child(1) { left:2px; top:20px; }
.coin-pair i:nth-child(2) { left:12px; top:10px; }
.coin-stack i:nth-child(1) { left:2px; top:24px; }
.coin-stack i:nth-child(2) { left:14px; top:24px; }
.coin-stack i:nth-child(3) { left:8px; top:10px; }
.coin-pile i:nth-child(1) { left:1px; top:27px; }
.coin-pile i:nth-child(2) { left:13px; top:27px; }
.coin-pile i:nth-child(3) { left:24px; top:25px; }
.coin-pile i:nth-child(4) { left:8px; top:13px; }
.coin-pile i:nth-child(5) { left:21px; top:9px; }
.coin-chest { height:62px; }
.coin-chest > span { position:absolute; left:6px; right:5px; bottom:4px; height:33px; border:1px solid rgba(255,208,113,.62); border-radius:5px 5px 9px 9px; background:linear-gradient(135deg,#b6543d,#6d2733 68%,#451a2b); box-shadow:inset 0 5px rgba(255,154,96,.16),0 8px 14px rgba(0,0,0,.2); }
.coin-chest > span::before { content:""; position:absolute; left:-3px; right:-3px; top:-8px; height:15px; border:1px solid rgba(255,212,116,.58); border-radius:11px 11px 4px 4px; background:linear-gradient(#d9764c,#7c3040); transform:rotate(-4deg); transform-origin:left bottom; }
.coin-chest > span::after { content:"✦"; position:absolute; left:50%; top:9px; display:grid; place-items:center; width:14px; height:14px; border-radius:3px; color:#7a4510; background:linear-gradient(#ffe58a,#d8961d); transform:translateX(-50%); font-size:7px; }
.coin-chest i:nth-of-type(1) { left:12px; top:8px; }
.coin-chest i:nth-of-type(2) { left:29px; top:4px; }
.coin-chest i:nth-of-type(3) { left:46px; top:10px; }
.coin-chest.overflowing { height:75px; }
.coin-chest.overflowing > span { left:7px; right:3px; bottom:2px; height:40px; }
.coin-chest.overflowing i { width:21px; height:21px; }
.coin-chest.overflowing i:nth-of-type(1) { left:7px; top:19px; }
.coin-chest.overflowing i:nth-of-type(2) { left:23px; top:8px; }
.coin-chest.overflowing i:nth-of-type(3) { left:40px; top:17px; }
.coin-chest.overflowing i:nth-of-type(4) { left:55px; top:6px; }
.coin-chest.overflowing i:nth-of-type(5) { left:67px; top:22px; }
.coin-chest.overflowing i:nth-of-type(6) { left:38px; top:-3px; }
.coin-tier:hover .pack-art,.coin-tier.selected .pack-art { animation:coinTreasureLift .72s cubic-bezier(.2,.82,.25,1); }
@keyframes coinTreasureLift { 0%,100% { transform:translateY(0); } 48% { transform:translateY(-4px) scale(1.04); } }
.topup-confirm { position:relative; overflow:hidden; width:100%; min-height:47px; margin-top:13px; border:0; border-radius:16px; color:#321422; background:linear-gradient(110deg,#ff8fbb,#ffd4e5 48%,#ff9cc4); background-size:180% 100%; box-shadow:0 10px 28px rgba(255,65,135,.23),inset 0 1px rgba(255,255,255,.62); cursor:pointer; font-weight:900; letter-spacing:.01em; transition:transform .2s ease,box-shadow .2s ease; animation:topupConfirmGlow 3.8s ease-in-out infinite; }
.topup-confirm:not(:disabled):hover,.topup-confirm:not(:disabled):focus-visible { transform:translateY(-1px); box-shadow:0 13px 34px rgba(255,65,135,.34),inset 0 1px rgba(255,255,255,.7); }
.topup-confirm:disabled { color:rgba(255,255,255,.42); background:rgba(255,255,255,.09); box-shadow:none; cursor:default; animation:none; }
@keyframes topupAura { 0%,100% { transform:scale(.94); opacity:.65; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes topupEmblemBreath { 0%,100% { transform:scale(1); } 50% { transform:scale(1.045); } }
@keyframes topupEmblemFlow { from { background-position:0% 50%; } to { background-position:240% 50%; } }
@keyframes topupSheen { 0% { background-position:0 0,0 0,0 0,180% 0; } 100% { background-position:0 0,0 0,0 0,-120% 0; } }
@keyframes topupConfirmGlow { 0%,100% { background-position:0 50%; } 50% { background-position:100% 50%; } }

/* Keep the live video on its own lightweight compositor layer. Translucent
   fills preserve the glass look without repeatedly blurring every RTC frame. */
.phone.video-live .identity,
.phone.video-live .follow,
.phone.video-live .subscribe-countdown,
.phone.video-live .affection,
.phone.video-live .icon-btn,
.phone.video-live .bubble,
.phone.video-live .composer form,
.phone.video-live .collection-trigger,
.phone.video-live .scene-coachmark,
.phone.video-live .toast,
.phone.video-live .clean-hint { backdrop-filter:none; -webkit-backdrop-filter:none; }
.phone.video-live .identity,
.phone.video-live .affection,
.phone.video-live .icon-btn { background:rgba(12,8,14,.58); }
.phone.video-live .bubble { background:rgba(16,10,18,.64); }
.phone.video-live .composer form,
.phone.video-live .collection-trigger { background:rgba(18,12,21,.66); }
.phone.video-live .bubble.leaving,
.phone.video-live .chat.history-hidden { filter:none; }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Rose noir: a warm rose-red and orchid palette with polished glass depth. */
:root {
  --glass:rgba(48,13,38,.58);
  --line:rgba(255,177,211,.23);
  --pink:#ff7bb2;
  --hot:#ed356f;
  --rose-red:#e52f68;
  --orchid:#b45fe3;
  --rose-pearl:#fff0f6;
}
html,body { background:#10040d; }
.app-shell { background:radial-gradient(circle at 22% 9%,#5d183e 0,rgba(93,24,62,.42) 18%,transparent 39%),radial-gradient(circle at 82% 78%,rgba(129,45,127,.42),transparent 42%),linear-gradient(155deg,#21091a 0%,#130711 48%,#09050c 100%); }
.phone { border-color:rgba(255,151,195,.3); background:#1a0916; box-shadow:0 30px 95px rgba(42,3,27,.68),0 0 42px rgba(207,47,112,.12); }
.ambient-vignette { background:linear-gradient(180deg,rgba(24,2,16,.5),transparent 22%,transparent 54%,rgba(36,5,25,.62) 91%),radial-gradient(circle at 78% 22%,rgba(204,50,116,.16),transparent 34%),radial-gradient(circle at 16% 66%,rgba(137,54,164,.14),transparent 38%),radial-gradient(ellipse at 50% 44%,transparent 40%,rgba(20,2,14,.34) 100%); }
.live-video,.live-video video,.clip-stage { background:#1a0916; }
.identity,.affection,.icon-btn { border-color:rgba(255,171,207,.24); background:linear-gradient(145deg,rgba(55,14,42,.72),rgba(28,8,24,.63)); box-shadow:0 9px 28px rgba(44,4,28,.28),inset 0 1px rgba(255,221,235,.06); }
.avatar-ring::before,.entry-orbit,.transition-orbit,.game-invite-orbit,.story-avatar::before { background:conic-gradient(#f33f7a,#ff9ec4,#d97af0,#8e46cd,#e52f68,#f33f7a); }
.avatar-ring,.profile-avatar:hover,.profile-avatar:focus-visible { filter:drop-shadow(0 0 11px rgba(236,58,123,.82)); }
.live-dot { background:linear-gradient(135deg,#ff4a82,#d91f5e); box-shadow:0 0 10px rgba(240,47,111,.38); }
.follow { border-color:rgba(255,152,194,.4); background:linear-gradient(145deg,rgba(103,31,74,.4),rgba(52,17,46,.35)); }
.follow:hover { border-color:rgba(255,185,215,.68); background:linear-gradient(145deg,rgba(224,54,118,.36),rgba(126,50,138,.3)); }
.follow.subscribed { color:#ffe7f0; border-color:rgba(222,117,180,.42); background:rgba(83,29,68,.36); }
.heart,.collection-affection>span { color:#ff6ea5; filter:drop-shadow(0 0 8px #e72f70); }
.profile-card { border-color:rgba(255,174,208,.25); background:linear-gradient(145deg,rgba(76,21,58,.9),rgba(29,9,26,.86)); box-shadow:0 24px 58px rgba(43,3,29,.5),0 0 35px rgba(194,45,116,.12),inset 0 1px rgba(255,226,238,.08); }
.profile-card::before { border-color:rgba(255,174,208,.25); background:#461536; }
.profile-card-primary { border-color:rgba(255,124,176,.3); background:linear-gradient(110deg,rgba(229,47,104,.2),rgba(173,78,202,.1)); }
.bubble { border-color:rgba(255,179,210,.13); background:linear-gradient(135deg,rgba(67,17,49,.5),rgba(37,10,32,.45)); box-shadow:0 6px 17px rgba(47,3,30,.13),inset 0 1px rgba(255,222,235,.035); }
.bubble.viewer { border-color:rgba(202,134,255,.24); background:linear-gradient(135deg,rgba(117,46,145,.56),rgba(89,30,104,.5)); }
.bubble-name { color:#ff87b4; text-shadow:0 0 9px rgba(240,66,129,.36); }
.bubble.viewer .bubble-name { color:#e5b5ff; text-shadow:0 0 10px rgba(190,99,245,.52); }
.composer form { border-color:rgba(255,166,204,.27); background:linear-gradient(135deg,rgba(61,15,47,.72),rgba(30,8,27,.68)); box-shadow:0 10px 30px rgba(44,3,29,.2),inset 0 1px rgba(255,229,240,.05); }
.send { color:#5b173c; background:linear-gradient(145deg,#fff7fa,#ffdce9); box-shadow:0 6px 18px rgba(83,9,50,.32),inset 0 1px #fff; }
.gift-trigger { border-color:rgba(255,223,236,.72); background:linear-gradient(145deg,#ff9bc0 0%,#ef3f79 49%,#b82c68 100%); box-shadow:0 9px 29px rgba(220,37,100,.62),0 0 22px rgba(190,81,209,.28),inset 0 1px rgba(255,255,255,.72); }
.gift-panel { border-top-color:rgba(255,177,211,.28); background:linear-gradient(165deg,rgba(80,25,60,.84),rgba(36,10,32,.9)); box-shadow:0 -22px 55px rgba(48,3,31,.38),inset 0 1px rgba(255,225,237,.06); }
.wallet { border-color:rgba(255,173,207,.25); background:rgba(72,20,57,.5); }
.gift-card { border-color:rgba(255,187,216,.16); background:linear-gradient(155deg,rgba(255,156,198,.11),rgba(111,42,102,.12)); }
.gift-card:hover,.gift-card:focus-visible { border-color:rgba(255,141,187,.46); background:linear-gradient(155deg,rgba(232,59,123,.23),rgba(159,77,183,.16)); outline:none; }
.gift-card.pose-card { background:linear-gradient(155deg,rgba(229,62,126,.16),rgba(131,55,139,.18)); }
.pose-gift { border-color:rgba(255,157,199,.46); background:radial-gradient(circle at 38% 24%,rgba(255,224,237,.36),rgba(228,64,132,.16) 55%,rgba(110,36,105,.09) 78%); box-shadow:inset 0 1px rgba(255,255,255,.24),0 8px 20px rgba(46,2,30,.25),0 0 18px rgba(227,48,116,.2); }
.collection-trigger,.scene-coachmark,.clean-hint,.toast { border-color:rgba(255,171,207,.24); background:linear-gradient(145deg,rgba(67,17,51,.75),rgba(31,9,28,.72)); }
.collection-trigger:hover,.collection-trigger:focus-visible { background:linear-gradient(145deg,rgba(221,49,112,.45),rgba(135,55,152,.35)); }
.collection-backdrop,.music-backdrop { background:rgba(24,3,18,.5); }
.collection-panel,.music-panel { border-left-color:rgba(255,173,208,.26); background:linear-gradient(155deg,rgba(73,20,56,.88),rgba(30,8,28,.92)); box-shadow:-25px 0 62px rgba(44,2,29,.48),inset 1px 0 rgba(255,224,237,.04); }
.collection-actions button,.collection-affection,.collection-guide,.music-head .collection-close,.music-pause { border-color:rgba(255,183,213,.18); background:rgba(255,138,187,.08); }
.collection-progress>span i { background:linear-gradient(90deg,#ec3d79,#c766e5); box-shadow:0 0 10px rgba(234,56,120,.46); }
.collection-progress.ready>span i { background:linear-gradient(90deg,#f05a91,#e6a0ff); }
.scene-card,.music-card { border-color:rgba(255,186,214,.15); background:linear-gradient(145deg,rgba(255,147,191,.09),rgba(116,45,108,.1)); }
.scene-card:hover,.music-card:hover { background:linear-gradient(145deg,rgba(229,57,121,.18),rgba(149,69,168,.14)); }
.scene-card.active,.music-card.active { border-color:rgba(255,111,166,.92); background:linear-gradient(145deg,rgba(229,48,109,.26),rgba(153,67,173,.15)); box-shadow:inset 0 0 0 1px rgba(255,145,188,.42),0 0 22px rgba(220,45,113,.22); }
.music-now { border-color:rgba(255,134,181,.3); background:linear-gradient(140deg,rgba(229,52,114,.2),rgba(164,81,188,.1)); }
.music-art.amber { background:radial-gradient(circle at 28% 24%,#ffb6cf,#a52d65 62%,#2c0b20); }
.music-art.blue { background:radial-gradient(circle at 28% 24%,#dca8ff,#703c91 62%,#170b20); }
.entry-gate,.media-transition { background:radial-gradient(circle at 50% 26%,rgba(166,54,133,.28),transparent 43%),rgba(34,5,25,.58); }
.entry-card { border-color:rgba(255,179,211,.3); background:linear-gradient(155deg,rgba(78,22,60,.72),rgba(31,9,28,.74)); box-shadow:0 30px 76px rgba(47,3,31,.52),0 0 46px rgba(183,46,116,.12),inset 0 1px rgba(255,229,239,.09); }
.entry-start,.entry-access-form>button { color:#5b153a; border-color:rgba(255,215,231,.56); background:linear-gradient(135deg,#fff4f8,#ffc9dd 55%,#ef99c0); box-shadow:0 12px 31px rgba(213,40,105,.28); }
.entry-like-count { border-color:rgba(255,135,183,.4); background:linear-gradient(135deg,rgba(229,48,108,.22),rgba(169,76,191,.17)); }
.media-transition-card { border-color:rgba(255,178,211,.24); background:linear-gradient(145deg,rgba(75,21,58,.7),rgba(31,9,29,.72)); }
.story-screen { background:#1a0817; }
.story-vignette { background:linear-gradient(180deg,rgba(31,4,22,.56),transparent 24%,transparent 65%,rgba(42,5,29,.5)),radial-gradient(circle at 78% 23%,rgba(224,52,118,.14),transparent 35%),radial-gradient(ellipse at 50% 42%,transparent 45%,rgba(23,3,17,.3)); }
.tutorial-spotlight { --tutorial-shade:rgba(33,4,24,.7); }
.live-tutorial { border-color:rgba(255,176,210,.5); background:linear-gradient(145deg,rgba(104,32,77,.95),rgba(48,13,43,.93)); box-shadow:0 13px 36px rgba(51,3,33,.5),0 0 28px rgba(225,56,121,.25),inset 0 1px rgba(255,237,244,.15); }
.live-tutorial[data-placement="target"]::after { background:#5f204d; }
.tutorial-actions #tutorialNext { background:linear-gradient(135deg,rgba(232,61,124,.78),rgba(161,71,183,.7)); }
.tutorial-focus { outline:none; }
.game-invite-card,.dialog-card { border-color:rgba(255,178,211,.28); background:linear-gradient(155deg,rgba(81,23,62,.86),rgba(32,9,29,.84)); box-shadow:0 29px 92px rgba(47,3,31,.5),inset 0 1px rgba(255,229,240,.08); }
.game-invite-actions button.primary { border-color:rgba(255,150,193,.68); background:linear-gradient(145deg,#e8407b,#a94fc3); box-shadow:0 10px 28px rgba(219,44,108,.3); }
.topup-card { border-color:rgba(255,177,210,.28); background:radial-gradient(circle at 16% 0,rgba(215,72,137,.25),transparent 33%),radial-gradient(circle at 88% 13%,rgba(164,75,192,.2),transparent 36%),linear-gradient(155deg,rgba(72,19,56,.98),rgba(30,8,27,.98)); }
.topup-confirm { color:#571437; background:linear-gradient(110deg,#ef5b91,#ffd1e2 48%,#ca73dd); box-shadow:0 11px 30px rgba(216,41,106,.34),inset 0 1px rgba(255,255,255,.66); }
.phone.video-live .identity,.phone.video-live .affection,.phone.video-live .icon-btn { background:linear-gradient(145deg,rgba(58,15,44,.82),rgba(28,8,25,.79)); }
.phone.video-live .bubble { border-color:rgba(255,179,210,.12); background:linear-gradient(135deg,rgba(67,17,49,.48),rgba(37,10,32,.42)); box-shadow:0 5px 15px rgba(40,2,25,.12); }
.phone.video-live .bubble.viewer { border-color:rgba(202,134,255,.22); background:linear-gradient(135deg,rgba(117,46,145,.54),rgba(89,30,104,.48)); }
.phone.video-live .bubble p { text-shadow:0 1px 4px rgba(17,2,12,.72); }
.phone.video-live .composer form,.phone.video-live .collection-trigger { background:linear-gradient(135deg,rgba(63,16,49,.84),rgba(31,9,28,.82)); }
.affection { min-width:82px; min-height:41px; justify-content:center; gap:9px; padding:0 15px 0 12px; }
.affection .heart { position:relative; display:grid; place-items:center; width:23px; height:27px; flex:0 0 23px; color:transparent; font-size:0; line-height:1; transform-origin:50% 44%; animation:affectionHeartBreath 1.8s ease-in-out infinite; }
.affection .heart::before { content:""; width:22px; height:21px; background:linear-gradient(145deg,#ff91bd 0%,#ff3d78 58%,#d82460 100%); filter:drop-shadow(0 0 7px rgba(235,45,107,.9)); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.5 2 7.7C2 3.8 6.8 1.4 9.8 4.2L12 6.3l2.2-2.1C17.2 1.4 22 3.8 22 7.7 22 14.5 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21S2 14.5 2 7.7C2 3.8 6.8 1.4 9.8 4.2L12 6.3l2.2-2.1C17.2 1.4 22 3.8 22 7.7 22 14.5 12 21 12 21Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.affection .heart::after { content:""; position:absolute; left:7px; top:19px; width:3.5px; height:6px; border-radius:55% 45% 65% 35%; background:#d9275c; box-shadow:7px 1px 0 -1px #ef4776; transform:rotate(9deg); animation:affectionHeartDrip 1.85s ease-in-out infinite; }
@keyframes affectionHeartBreath { 0%,100% { opacity:.78; transform:scale(.88); } 46% { opacity:1; transform:scale(1.13); } }
@keyframes affectionHeartDrip { 0%,38% { opacity:.28; transform:translateY(-1px) rotate(9deg) scale(.78); } 68% { opacity:.95; transform:translateY(1px) rotate(9deg) scale(1); } 100% { opacity:.32; transform:translateY(3px) rotate(9deg) scale(.68); } }

/* Premium gift artwork: square, contained, and price-only at small sizes. */
.gift-card.gift-image-card { gap:5px; padding:5px 4px 4px; }
.gift-card.gift-image-card .pose-gift { width:60px; height:60px; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:visible; }
.gift-card.gift-image-card .pose-gift::after { display:none; }
.gift-card.gift-image-card .pose-gift img { display:block; width:100%; height:100%; border-radius:0; object-fit:contain; object-position:center; filter:drop-shadow(0 5px 8px rgba(62,5,44,.24)); transition:transform .24s cubic-bezier(.2,.82,.25,1),filter .24s ease; }
.gift-card.gift-image-card:hover .pose-gift img,.gift-card.gift-image-card:focus-visible .pose-gift img { transform:scale(1.045); filter:saturate(1.08) brightness(1.04); }
.gift-card.gift-image-card small { margin-top:0; color:#ffe07d; font-size:10px; line-height:1; font-weight:800; text-shadow:0 1px 5px rgba(44,3,29,.72); }
.gift-card.gift-image-card small::before { content:""; display:inline-grid; width:10px; height:10px; margin-right:4px; border:1px solid rgba(255,248,183,.86); border-radius:50%; vertical-align:-1.5px; background:radial-gradient(circle at 34% 28%,#fffbd6 0 9%,#ffe46e 20%,#ffbd31 58%,#b9680a 100%); box-shadow:inset -1px -1px 2px rgba(127,61,0,.26),0 0 7px rgba(255,193,48,.34); }
.gift-float img { display:block; width:32px; height:32px; border-radius:9px; object-fit:contain; }

.scene-card.switching { cursor:progress; border-color:rgba(255,135,181,.88); background:linear-gradient(145deg,rgba(235,64,129,.26),rgba(155,70,177,.18)); box-shadow:inset 0 0 0 1px rgba(255,164,199,.38),0 0 22px rgba(229,53,119,.25); }
.scene-card.switching::after { content:""; position:absolute; z-index:6; top:-25%; bottom:-25%; left:-42%; width:34%; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,229,239,.32),transparent); transform:skewX(-18deg); animation:sceneCardPreparing 1.15s ease-in-out infinite; }
@keyframes sceneCardPreparing { from { left:-42%; } to { left:118%; } }