/* Visual system carried over from the v3 prototype (dark live-stream look). */
:root{
  --display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --app:#0E0C12; --app2:#17141D; --app3:#221E29; --cue:#FFB547; --cue-ink:#2A1A00; --heart:#FF5C8A; --host:#FFC9DA;
  --glass:rgba(16,14,20,.6); --glass-line:rgba(255,255,255,.14); --w:#FFFFFF; --w2:rgba(255,255,255,.7); --w3:rgba(255,255,255,.45);
  --safe-top:env(safe-area-inset-top,0px); --safe-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0; height:100%; background:#050407; overscroll-behavior:none}
body{display:flex; justify-content:center}
.app{position:relative; width:100%; max-width:480px; height:100dvh; overflow:hidden; background:var(--app); color:var(--w); font-family:var(--body); font-size:14px; -webkit-tap-highlight-color:transparent; isolation:isolate}
@media (min-width:520px){.app{box-shadow:0 0 0 1px #222}}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none; padding:0}
button:focus-visible,input:focus-visible{outline:2px solid var(--cue); outline-offset:2px}
input{font:inherit}
.coin{display:inline-grid; place-items:center; width:1.05em; height:1.05em; border-radius:50%; background:radial-gradient(circle at 35% 30%,#FFE29A,#F4A82A 60%,#C77A0C); color:#6B3B00; font-size:.95em; font-weight:800; vertical-align:-2px; box-shadow:inset 0 0 0 1px rgba(107,59,0,.35)}
.coin::after{content:"c"; font-size:.62em; line-height:1}
.statusbar{position:absolute; left:0; right:0; top:0; height:30px; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:0 22px; font-size:12px; font-weight:600; pointer-events:none}
.statusbar i{font-style:normal; letter-spacing:1px; opacity:.85}
.screen{position:absolute; inset:0; display:none; overflow:auto; scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.on{display:block; animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{transform:translateY(6px); opacity:0}to{transform:none; opacity:1}}
@keyframes up{from{transform:translateY(40px); opacity:0}to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
/* ---------- tab bar ---------- */
.tabs{position:absolute; left:0; right:0; bottom:0; z-index:20; display:grid; grid-template-columns:repeat(3,1fr); background:rgba(14,12,18,.94); border-top:1px solid var(--glass-line); padding:7px 8px 16px; backdrop-filter:blur(10px)}
.tabs button{display:grid; justify-items:center; gap:3px; font-size:10.5px; color:var(--w3); font-weight:600}
.tabs svg{width:22px; height:22px}
.tabs button[aria-current="page"]{color:var(--w)}
/* ---------- home ---------- */
.pad{padding:40px 16px 92px}
.hhead{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.hhead h2{font-family:var(--display); font-weight:800; font-size:28px; margin:0; letter-spacing:-.01em; flex:1}
.coinchip{display:flex; align-items:center; gap:5px; background:var(--app3); border-radius:99px; padding:6px 10px; font-weight:700; font-variant-numeric:tabular-nums}
.bubbles{display:flex; gap:12px; overflow-x:auto; margin:0 -16px 14px; padding:0 16px; scrollbar-width:none}
.bubble{display:grid; justify-items:center; gap:5px; font-size:11px; color:var(--w2); flex:none}
.bubble .ring{width:58px; height:58px; border-radius:50%; padding:2px; background:var(--app3)}
.bubble .ring.live{background:conic-gradient(var(--cue),var(--heart),var(--cue))}
.bubble .ring div{width:100%; height:100%; border-radius:50%; border:2px solid var(--app); background-size:cover; background-position:50% 18%}
.cats{display:flex; gap:7px; overflow-x:auto; margin:0 -16px 14px; padding:0 16px; scrollbar-width:none}
.cats button{flex:none; padding:7px 12px; border-radius:99px; background:var(--app3); color:var(--w2); font-size:12.5px; font-weight:600}
.cats button[aria-pressed="true"]{background:var(--w); color:#16131B}
.feature{position:relative; display:block; width:100%; aspect-ratio:4/4.3; border-radius:20px; overflow:hidden; background-size:cover; background-position:50% 25%; text-align:left; margin-bottom:12px}
.feature::after,.card::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.25) 0, transparent 30%, transparent 50%, rgba(0,0,0,.85) 100%)}
.feature .meta,.card .meta{position:absolute; left:12px; right:12px; bottom:12px; z-index:1; display:grid; gap:3px}
.feature .meta b{font-family:var(--display); font-weight:800; font-size:24px; line-height:1}
.feature .meta span{font-size:13px; color:var(--w2)}
.feature .join{position:absolute; right:12px; bottom:14px; z-index:2; background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:99px; padding:8px 14px; font-size:13px}
.badges{position:absolute; left:10px; top:10px; z-index:1; display:flex; gap:6px; align-items:center}
.live{background:#E5374D; font-weight:700; font-size:10px; letter-spacing:.08em; padding:3px 6px; border-radius:6px}
.vc{background:rgba(0,0,0,.45); font-size:10.5px; padding:3px 7px; border-radius:6px; font-variant-numeric:tabular-nums}
.lang{position:absolute; right:10px; top:10px; z-index:1; background:rgba(255,255,255,.9); color:#16131B; font-size:10px; font-weight:800; padding:3px 6px; border-radius:6px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.card{position:relative; display:block; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background-size:cover; background-position:50% 22%; text-align:left}
.card .meta b{font-family:var(--display); font-weight:800; font-size:17px; line-height:1}
.card .meta span{font-size:11.5px; color:var(--w2); line-height:1.3}
.card.off{filter:saturate(.35)}
.card .soon{position:absolute; left:10px; top:10px; z-index:1; background:rgba(0,0,0,.55); font-size:10.5px; padding:3px 7px; border-radius:6px}
.fb{background:linear-gradient(150deg,#3B2A5A,#1A1424)}
/* list page additions */
.gbanner{display:flex; align-items:center; gap:10px; background:linear-gradient(120deg,rgba(255,181,71,.2),rgba(255,92,138,.2)); border:1px solid rgba(255,181,71,.35); border-radius:16px; padding:10px 6px 10px 12px; margin-bottom:14px}
.gbanner .gi{font-size:24px}
.gbanner div{flex:1; display:grid; gap:1px; min-width:0}
.gbanner b{font-size:13.5px}
.gbanner small{font-size:11.5px; color:var(--w2); line-height:1.3}
.gbanner .go{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:99px; padding:7px 12px; font-size:12px; white-space:nowrap}
.gbanner .x{width:24px; height:24px; color:var(--w3); font-size:17px}
.secth{display:flex; align-items:baseline; justify-content:space-between; margin:2px 0 10px}
.secth b{font-size:16px; font-family:var(--display); font-weight:800}
.secth span{font-size:11.5px; color:var(--w3)}
.upcoming{display:flex; gap:10px; overflow-x:auto; margin:0 -16px; padding:0 16px 2px; scrollbar-width:none}
.up{flex:none; width:236px; display:flex; align-items:center; gap:10px; background:var(--app2); border:1px solid var(--glass-line); border-radius:14px; padding:10px}
.up .ava{width:40px; height:40px; filter:saturate(.55)}
.up div{flex:1; display:grid; gap:1px; min-width:0}
.up b{font-size:12.5px}
.up span{font-size:11.5px; color:var(--w2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.up .nb{background:rgba(255,255,255,.1); border-radius:99px; padding:6px 10px; font-size:11.5px; font-weight:700; white-space:nowrap}
.up .nb[aria-pressed="true"]{background:rgba(255,181,71,.18); color:var(--cue)}
.emptylive{background:var(--app2); border-radius:16px; padding:18px 16px; color:var(--w2); font-size:12.5px; line-height:1.5; margin-bottom:6px; text-align:center}
.emptylive b{display:block; color:var(--w); font-size:14px; margin-bottom:2px}
.kv{display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px}
.kv span{color:var(--w2)}
.kv .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#E5374D; margin-right:6px; vertical-align:1px}
/* login guidance */
.perks{display:grid; gap:8px; margin:2px 0 14px}
.perks div{display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--w2)}
.perks span{width:26px; height:26px; border-radius:8px; background:var(--app3); display:grid; place-items:center; font-size:14px; flex:none}
.auth button{display:flex; align-items:center; justify-content:center; gap:8px}
.auth .ic{font-weight:800; width:18px; text-align:center}
.check.err{color:#FFB3B3; animation:shake .3s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.sback{position:absolute; left:12px; top:12px; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.08); font-size:19px; line-height:28px}
.code{display:grid; grid-template-columns:repeat(6,1fr); gap:6px; margin:4px 0 12px}
.code span{aspect-ratio:1/1.15; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid var(--glass-line); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:20px}
.code span.on{border-color:var(--cue)}
.link{color:var(--cue); font-weight:700; font-size:12.5px; padding:10px 0 2px; width:100%}
.nudge{position:absolute; left:10px; right:10px; bottom:62px; z-index:7; display:flex; align-items:center; gap:8px; background:rgba(23,20,29,.94); border:1px solid rgba(255,181,71,.5); border-radius:14px; padding:8px 6px 8px 12px; font-size:12.5px; animation:pop .25s ease}
.nudge span{flex:1; line-height:1.35}
.nudge .go{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:99px; padding:6px 11px; font-size:12px; white-space:nowrap}
.nudge .x{color:var(--w3); width:24px; font-size:16px}
/* me page additions */
.meava.guest{background:var(--app3); color:var(--w2)}
.mehead .edit{margin-left:auto; background:rgba(255,255,255,.1); border-radius:99px; padding:6px 12px; font-size:12px; font-weight:700}
.signcard{background:linear-gradient(135deg,#2A2233,#1C1724); border:1px solid rgba(255,181,71,.35); border-radius:18px; padding:14px; margin-bottom:14px}
.signcard > b{font-family:var(--display); font-weight:800; font-size:17px; display:block; margin-bottom:10px; line-height:1.2}
.daily{display:flex; align-items:center; gap:10px; background:var(--app2); border-radius:14px; padding:10px 10px 10px 12px; margin-bottom:12px}
.daily div{flex:1; display:grid; gap:1px}
.daily b{font-size:13.5px}
.daily small{font-size:11.5px; color:var(--w2)}
.daily button{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:99px; padding:7px 14px; font-size:12.5px; white-space:nowrap}
.daily button:disabled{background:rgba(255,255,255,.1); color:var(--w3); cursor:default}
.txl{color:var(--w2); font-size:12px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); background:var(--app2); border-radius:14px}
.stats button{display:grid; gap:1px; padding:10px 6px; text-align:center}
.stats b{font-family:var(--display); font-weight:800; font-size:18px; font-variant-numeric:tabular-nums}
.stats span{font-size:11px; color:var(--w2)}
.trow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:13px}
.trow small{display:block; color:var(--w3); font-size:11.5px; margin-top:2px}
.sw{width:42px; height:24px; border-radius:99px; background:rgba(255,255,255,.18); position:relative; flex:none}
.sw::after{content:""; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s}
.sw[aria-checked="true"]{background:#2FBF71}
.sw[aria-checked="true"]::after{transform:translateX(18px)}
.faq{display:grid; gap:8px}
.faq div{background:var(--app3); border-radius:12px; padding:11px 12px; font-size:12.5px; line-height:1.45}
.faq b{display:block; font-size:13px; margin-bottom:3px}
.faq span{color:var(--w2)}
/* ---------- room ---------- */
.room{overflow:hidden}
.stage{position:absolute; inset:0; overflow:hidden; background:linear-gradient(150deg,#3B2A5A,#1A1424)}
.stage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; transition:opacity .45s ease, transform .45s ease}
.stage.bounce img{animation:bounce .5s ease-in-out infinite alternate}
.stage.sway img{animation:sway 1.6s ease-in-out infinite alternate}
@keyframes bounce{to{transform:translateY(-10px) scale(1.02)}}
@keyframes sway{from{transform:rotate(-1deg) scale(1.03)}to{transform:rotate(1deg) scale(1.03)}}
.stage.slide-up{animation:slideUp .35s ease}
.stage.slide-down{animation:slideDown .35s ease}
@keyframes slideUp{from{transform:translateY(30%); opacity:.2}to{transform:none; opacity:1}}
@keyframes slideDown{from{transform:translateY(-30%); opacity:.2}to{transform:none; opacity:1}}
.stage::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 20%, rgba(0,0,0,0) 46%, rgba(0,0,0,.8) 100%); pointer-events:none}
.stage .fbig{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:120px; font-weight:800; color:rgba(255,255,255,.15)}
.rtop{position:absolute; left:10px; right:12px; top:34px; z-index:6; display:flex; align-items:center; gap:7px}
.back{width:30px; height:30px; border-radius:50%; background:var(--glass); font-size:22px; line-height:28px; text-align:center; flex:none}
.host{display:flex; align-items:center; gap:7px; background:var(--glass); border:1px solid var(--glass-line); border-radius:99px; padding:3px 4px 3px 3px; backdrop-filter:blur(8px); min-width:0}
.ava{width:30px; height:30px; border-radius:50%; background-size:cover; background-position:50% 18%; flex:none}
.host b{font-family:var(--display); font-weight:800; font-size:14px; display:block; line-height:1.1}
.host small{font-size:10px; color:var(--w2); display:block}
.follow{background:var(--heart); color:#fff; font-weight:700; font-size:11.5px; border-radius:99px; padding:6px 10px; white-space:nowrap}
.follow[aria-pressed="true"]{background:rgba(255,255,255,.16)}
.viewers{margin-left:auto; font-size:11px; color:var(--w2); background:var(--glass); padding:5px 9px; border-radius:99px; white-space:nowrap; font-variant-numeric:tabular-nums}
.rtags{position:absolute; left:12px; top:74px; z-index:5; display:flex; gap:6px}
.rtags span{font-size:10px; letter-spacing:.03em; color:var(--w2); background:rgba(0,0,0,.35); padding:3px 8px; border-radius:6px}
.banner-off{position:absolute; left:12px; right:12px; top:104px; z-index:7; display:flex; align-items:center; gap:10px; background:rgba(23,20,29,.92); border:1px solid var(--glass-line); border-radius:14px; padding:8px 10px; font-size:12px; animation:pop .3s ease}
.banner-off .ava{width:32px; height:32px; filter:saturate(.4)}
.banner-off span{flex:1; line-height:1.35}
.banner-off button{background:var(--w); color:#16131B; font-weight:700; border-radius:99px; padding:6px 10px; font-size:11.5px; white-space:nowrap}
.soundpill{position:absolute; left:50%; top:38%; transform:translate(-50%,-50%); z-index:8; background:rgba(0,0,0,.6); border:1px solid var(--glass-line); border-radius:99px; padding:12px 18px; font-weight:700; font-size:14px; display:flex; gap:8px; align-items:center; backdrop-filter:blur(6px); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,255,255,.08)}}
.soundicon{position:absolute; right:12px; top:74px; z-index:6; width:28px; height:28px; border-radius:50%; background:var(--glass); font-size:13px}
.swipe{position:absolute; right:8px; top:42%; z-index:6; display:grid; gap:8px}
.swipe button{width:32px; height:32px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-line); font-size:16px; line-height:1}
.sub{position:absolute; left:12px; right:52px; top:43%; z-index:5; background:rgba(0,0,0,.55); padding:7px 11px; border-radius:10px; font-size:13.5px; line-height:1.35; animation:pop .25s ease}
.caps{position:absolute; left:12px; right:52px; top:100px; z-index:5; font-size:10.5px; color:var(--w2); text-shadow:0 1px 3px rgba(0,0,0,.6)}
.sub .quote{display:block; font-size:12px; color:var(--w2); margin-bottom:3px; padding-bottom:3px; border-bottom:1px solid rgba(255,255,255,.12)}
.sub .quote b{color:var(--w); font-weight:600; margin-right:5px}
.sub .quote b::after{content:':'}
.sub i{font-style:normal; color:var(--host); font-weight:700; margin-right:4px}
.giftbars{position:absolute; left:10px; bottom:262px; z-index:6; display:grid; gap:6px}
.giftbar{display:flex; align-items:center; gap:8px; background:linear-gradient(90deg,rgba(255,92,138,.9),rgba(255,92,138,.15)); border-radius:99px; padding:3px 14px 3px 3px; animation:slideIn .35s ease; min-width:180px}
@keyframes slideIn{from{transform:translateX(-30px); opacity:0}to{transform:none; opacity:1}}
.giftbar .ini{width:28px; height:28px; border-radius:50%; background:#fff; color:#B0204F; display:grid; place-items:center; font-weight:800; font-size:12px; flex:none}
.giftbar div{display:grid; line-height:1.15}
.giftbar b{font-size:12px}
.giftbar small{font-size:11px; color:rgba(255,255,255,.85)}
.giftbar .ge{font-size:24px; margin-left:auto}
.bigfx{position:absolute; left:50%; top:40%; z-index:9; font-size:84px; pointer-events:none; animation:bigfx 1.6s ease forwards}
@keyframes bigfx{0%{transform:translate(-50%,30px) scale(.4); opacity:0}25%{transform:translate(-50%,0) scale(1.15); opacity:1}70%{transform:translate(-50%,-20px) scale(1); opacity:1}100%{transform:translate(-50%,-80px) scale(.9); opacity:0}}
.chat{position:absolute; left:10px; right:64px; bottom:104px; z-index:4; display:flex; flex-direction:column; gap:5px; max-height:150px; overflow:hidden; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 36px); mask-image:linear-gradient(to bottom, transparent 0, #000 36px); justify-content:flex-end}
.msg{align-self:flex-start; background:rgba(0,0,0,.36); border-radius:12px; padding:5px 9px; font-size:12.5px; line-height:1.3; max-width:100%; animation:pop .25s ease}
.msg b{color:#BFD9FF; font-weight:600; margin-right:4px}
.msg.me b{color:var(--cue)}
.msg.answered{box-shadow:inset 0 0 0 1.5px rgba(255,181,71,.85); background:rgba(255,181,71,.16)}
.msg.answered::after{content:" · replied"; color:var(--cue); font-size:10.5px; font-weight:700}
.msg.hostmsg{background:rgba(255,92,138,.22)}
.msg.hostmsg b{color:var(--host)}
.msg.sys{color:var(--w2); font-size:11.5px; background:rgba(0,0,0,.25)}
.msg.private{opacity:.5}
.hearts{position:absolute; right:22px; bottom:104px; z-index:3; width:30px; height:200px; pointer-events:none}
.hearts span{position:absolute; bottom:0; left:6px; color:var(--heart); font-size:18px; animation:float 2.2s ease-out forwards}
@keyframes float{to{transform:translateY(-180px) translateX(-10px); opacity:0}}
.qchips{position:absolute; left:10px; right:10px; bottom:62px; z-index:6; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none}
.qchips button{flex:none; background:rgba(255,255,255,.14); border:1px solid var(--glass-line); border-radius:99px; padding:7px 11px; font-size:12.5px; backdrop-filter:blur(6px)}
.rbar{position:absolute; left:10px; right:10px; bottom:16px; z-index:7; display:flex; gap:7px; align-items:center}
.rbar .inp{flex:1; min-width:0; display:flex; align-items:center; background:var(--glass); border:1px solid var(--glass-line); border-radius:99px; padding:0 4px 0 14px; backdrop-filter:blur(8px)}
.rbar input{flex:1; min-width:0; background:none; border:0; color:var(--w); padding:10px 0; font-size:13.5px}
.rbar input::placeholder{color:var(--w2)}
.rbar input:focus-visible{outline:none}
.rbar .send{width:30px; height:30px; border-radius:50%; background:var(--cue); color:var(--cue-ink); font-weight:800; font-size:15px; flex:none}
.giftbtn{width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#FF8A3D,#FF5C8A); font-size:20px; flex:none; box-shadow:0 6px 16px rgba(255,92,138,.35)}
.like{width:42px; height:42px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-line); font-size:18px; color:var(--heart); flex:none}
.momentchip{position:absolute; left:50%; transform:translateX(-50%); bottom:64px; z-index:9; background:var(--w); color:#16131B; font-weight:700; border-radius:99px; padding:8px 8px 8px 14px; display:flex; gap:10px; align-items:center; white-space:nowrap; animation:pop .25s ease; font-size:12.5px; box-shadow:0 10px 24px rgba(0,0,0,.35)}
.momentchip span{background:#16131B; color:#fff; border-radius:99px; padding:5px 10px}
.offline-card{position:absolute; left:16px; right:16px; top:40%; z-index:7; background:rgba(23,20,29,.92); border:1px solid var(--glass-line); border-radius:18px; padding:16px; text-align:center; display:grid; gap:8px}
.offline-card b{font-family:var(--display); font-size:20px; font-weight:800}
.offline-card span{color:var(--w2); font-size:12.5px}
/* ---------- sheets ---------- */
.scrim{position:absolute; inset:0; z-index:30; background:rgba(0,0,0,.45)}
.sheet{position:absolute; left:0; right:0; bottom:0; z-index:31; background:var(--app2); border-radius:22px 22px 0 0; padding:10px 16px 20px; border-top:1px solid var(--glass-line); animation:up .28s ease; max-height:84%; overflow:auto}
.grab{width:36px; height:4px; border-radius:2px; background:rgba(255,255,255,.25); margin:0 auto 12px}
.sheet h4{font-family:var(--display); font-weight:800; font-size:19px; margin:0 0 4px}
.sheet .lead{color:var(--w2); font-size:12.5px; margin:0 0 12px; line-height:1.45}
.shead{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px}
.shead h4{margin:0}
.bal{display:flex; align-items:center; gap:6px; font-weight:700; font-variant-numeric:tabular-nums; font-size:13px}
.bal button{color:var(--cue); font-weight:700; font-size:12.5px}
.ggrid{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.gift{display:grid; justify-items:center; gap:2px; padding:9px 2px 8px; border-radius:14px; border:1px solid transparent}
.gift .e{font-size:28px; line-height:1.1}
.gift .nm{font-size:11px; font-weight:600; text-align:center; line-height:1.15}
.gift .pr{font-size:11px; color:var(--cue); font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:3px}
.gift[aria-pressed="true"]{border-color:var(--cue); background:rgba(255,181,71,.12)}
.gdesc{display:flex; align-items:center; gap:10px; margin-top:12px; background:var(--app3); border-radius:14px; padding:10px 10px 10px 12px}
.gdesc .e{font-size:26px}
.gdesc div{flex:1; display:grid; gap:2px; min-width:0}
.gdesc b{font-size:13.5px}
.gdesc small{color:var(--w2); font-size:12px}
.gdesc .extra{margin-top:6px; display:flex; gap:6px; flex-wrap:wrap}
.gdesc .extra input{background:rgba(255,255,255,.08); border:1px solid var(--glass-line); color:var(--w); border-radius:10px; padding:7px 9px; width:100%; font-size:12.5px}
.gdesc .extra button{background:rgba(255,255,255,.09); border:1px solid var(--glass-line); border-radius:99px; padding:5px 9px; font-size:11.5px}
.gdesc .extra button[aria-pressed="true"]{border-color:var(--cue); color:var(--cue)}
.sendg{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:12px; padding:11px 14px; font-family:var(--display); font-size:14px; white-space:nowrap}
.promise{font-size:11px; color:var(--w3); margin-top:10px; line-height:1.4}
.primary{background:var(--cue); color:var(--cue-ink); font-weight:800; font-family:var(--display); border-radius:14px; padding:13px; font-size:15px; width:100%}
.ghost{background:rgba(255,255,255,.1); border-radius:14px; padding:12px; font-weight:600; width:100%}
.packs{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.pack{position:relative; display:grid; gap:2px; background:var(--app3); border:1px solid var(--glass-line); border-radius:14px; padding:12px; text-align:left}
.pack[aria-pressed="true"]{border-color:var(--cue); background:rgba(255,181,71,.12)}
.pack b{font-family:var(--display); font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:5px}
.pack s{color:var(--w3); font-size:11.5px}
.pack .price{font-weight:700; font-size:13px; color:var(--w2)}
.pack .badge{position:absolute; right:8px; top:8px; background:var(--heart); color:#fff; font-size:10px; font-weight:800; padding:2px 6px; border-radius:6px}
.paym{display:flex; align-items:center; justify-content:space-between; background:var(--app3); border-radius:12px; padding:11px 12px; margin-bottom:12px; font-size:13px}
.paym button{color:var(--cue); font-weight:700; font-size:12.5px}
.payopts{display:grid; gap:6px; margin-bottom:12px}
.payopts button{display:flex; justify-content:space-between; background:var(--app3); border:1px solid var(--glass-line); border-radius:12px; padding:11px 12px; font-size:13px}
.payopts button[aria-pressed="true"]{border-color:var(--cue)}
.applepay{background:#000; color:#fff; border-radius:12px; padding:13px; font-weight:700; width:100%; font-size:15px; border:1px solid rgba(255,255,255,.25)}
.paysheet{text-align:center}
.testtag{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.04em; color:#16131B; background:#F2C14C; border-radius:99px; padding:3px 9px}
.paymethods{display:grid; gap:8px; margin-bottom:6px}
.gpay{background:#fff; color:#16131B; border-radius:12px; padding:13px; font-weight:700; font-size:15px}
.cardpay{background:var(--app3); color:var(--w); border:1px solid var(--glass-line); border-radius:12px; padding:13px; font-weight:700; font-size:15px}
.paysheet .link{margin-top:6px}
.clipstage video{width:100%; height:100%; object-fit:cover}
.paysheet .amt{font-family:var(--display); font-weight:800; font-size:34px; margin:6px 0 2px}
.paysheet .what{color:var(--w2); font-size:12.5px; margin-bottom:14px}
.spinner{width:34px; height:34px; border-radius:50%; border:3px solid rgba(255,255,255,.2); border-top-color:#fff; margin:8px auto; animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.okmark{width:52px; height:52px; border-radius:50%; background:#2FBF71; display:grid; place-items:center; font-size:28px; margin:6px auto; animation:pop .3s ease}
.auth{display:grid; gap:8px; margin:6px 0 10px}
.auth button{background:var(--w); color:#16131B; border-radius:12px; padding:12px; font-weight:700}
.auth button.alt{background:rgba(255,255,255,.1); color:var(--w)}
.check{display:flex; gap:8px; align-items:flex-start; font-size:12px; color:var(--w2); margin-top:4px}
.check input{accent-color:var(--cue); margin-top:2px}
.fine{font-size:10.5px; color:var(--w3); margin-top:10px; line-height:1.45}
.field{display:flex; gap:8px}
.field input{flex:1; min-width:0; background:rgba(255,255,255,.08); border:1px solid var(--glass-line); color:var(--w); border-radius:12px; padding:11px 12px; font-size:14px}
.field button{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:12px; padding:0 16px}
.clip{display:flex; gap:12px; margin-bottom:14px}
.thumb{width:96px; aspect-ratio:9/16; border-radius:12px; background-size:cover; background-position:center; position:relative; flex:none; overflow:hidden; background-color:var(--app3)}
.thumb span{position:absolute; left:5px; right:5px; bottom:5px; font-size:9px; background:rgba(255,181,71,.95); color:var(--cue-ink); font-weight:700; border-radius:5px; padding:2px 4px}
.thumb i{position:absolute; right:4px; top:4px; font-style:normal; font-size:8px; background:rgba(0,0,0,.5); padding:1px 4px; border-radius:4px}
.clipmeta{display:grid; gap:6px; align-content:start; font-size:12.5px; color:var(--w2)}
.clipmeta b{font-family:var(--display); font-weight:800; color:var(--w); font-size:16px}
.two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.pwa{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.appicon{width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg,#FFB547,#FF5C8A); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:22px; color:#2A1A00; flex:none}
.steps{display:grid; gap:8px; margin:4px 0 14px; font-size:12.5px; color:var(--w2)}
.steps div{display:flex; gap:10px; align-items:center}
.steps em{font-style:normal; width:22px; height:22px; border-radius:50%; background:var(--app3); display:grid; place-items:center; font-weight:800; font-size:11px; color:var(--w); flex:none}
.prof{display:flex; gap:12px; align-items:center; margin-bottom:12px}
.prof .ava{width:56px; height:56px}
.prof b{font-family:var(--display); font-weight:800; font-size:20px; display:block}
.prof small{color:var(--w2); font-size:12px}
.cando{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 12px}
.cando span{background:var(--app3); border-radius:99px; padding:5px 9px; font-size:11.5px}
.toast{position:absolute; left:50%; transform:translateX(-50%); top:118px; z-index:50; background:rgba(255,255,255,.96); color:#16131B; font-weight:600; font-size:12.5px; padding:8px 14px; border-radius:99px; white-space:nowrap; animation:pop .25s ease; box-shadow:0 8px 20px rgba(0,0,0,.3)}
/* ---------- me / wallet / following ---------- */
.mehead{display:flex; align-items:center; gap:12px; margin-bottom:16px}
.meava{width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,#6E5BD9,#FF5C8A); display:grid; place-items:center; font-family:var(--display); font-weight:800; font-size:24px; flex:none}
.mehead b{font-family:var(--display); font-weight:800; font-size:20px; display:block}
.mehead small{color:var(--w2); font-size:12px}
.wcard{background:linear-gradient(135deg,#2A2233,#1C1724); border:1px solid var(--glass-line); border-radius:18px; padding:14px; display:grid; gap:10px; margin-bottom:14px}
.wcard .row{display:flex; align-items:center; justify-content:space-between}
.wcard small{color:var(--w2); font-size:11px; text-transform:uppercase; letter-spacing:.08em}
.wcard b{font-family:var(--display); font-weight:800; font-size:28px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:7px}
.wbtns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.wbtns button{border-radius:12px; padding:10px; font-weight:700; background:rgba(255,255,255,.1)}
.wbtns button.go{background:var(--cue); color:var(--cue-ink)}
.sect{font-size:11.5px; color:var(--w2); text-transform:uppercase; letter-spacing:.08em; margin:16px 0 8px; font-weight:600}
.moments{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.moments .thumb{width:auto}
.rows{display:grid; background:var(--app2); border-radius:14px; overflow:hidden}
.rows > *{display:flex; justify-content:space-between; align-items:center; padding:12px; font-size:13px; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; width:100%}
.rows > *:last-child{border-bottom:0}
.rows span{color:var(--w2); font-size:12px}
.empty{background:var(--app2); border-radius:14px; padding:14px; color:var(--w2); font-size:12.5px; line-height:1.45}
.pagehead{display:flex; align-items:center; gap:8px; margin-bottom:14px}
.pagehead button{font-size:24px; width:28px}
.pagehead h2{font-family:var(--display); font-weight:800; font-size:22px; margin:0}
.balbig{background:radial-gradient(circle at 80% 0%,rgba(255,181,71,.35),transparent 60%),var(--app2); border-radius:18px; padding:16px; margin-bottom:12px}
.balbig small{color:var(--w2); font-size:11.5px}
.balbig b{display:flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:38px; font-variant-numeric:tabular-nums}
.firstpay{background:rgba(255,92,138,.16); border:1px solid rgba(255,92,138,.45); border-radius:12px; padding:9px 12px; font-size:12.5px; margin-bottom:12px}
.tx{display:grid; background:var(--app2); border-radius:14px}
.tx div{display:grid; grid-template-columns:1fr auto; gap:2px 10px; padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); font-size:12.5px}
.tx div:last-child{border-bottom:0}
.tx small{color:var(--w3); font-size:11px}
.tx .amt{font-weight:700; font-variant-numeric:tabular-nums; text-align:right}
.tx .plus{color:#5FD99A}
.frow{display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06)}
.frow .ava{width:48px; height:48px; flex:none}
.frow .ava.live{box-shadow:0 0 0 2px var(--app), 0 0 0 4px var(--heart)}
.frow div{flex:1; display:grid; gap:2px; min-width:0}
.frow b{font-size:14px}
.frow small{color:var(--w2); font-size:12px}
.frow .act{background:var(--cue); color:var(--cue-ink); font-weight:800; border-radius:99px; padding:7px 12px; font-size:12px}
.frow .act.alt{background:rgba(255,255,255,.1); color:var(--w)}
/* clip page */
.clippage{position:absolute; inset:0}
.clippage .bg{position:absolute; inset:0; background-size:cover; background-position:50% 30%}
.clippage .bg::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.35), transparent 30%, transparent 55%, rgba(0,0,0,.85))}
.clippage .bar{position:absolute; left:14px; right:14px; top:38px; height:3px; background:rgba(255,255,255,.25); border-radius:2px; overflow:hidden}
.clippage .bar i{display:block; height:100%; width:0; background:#fff; animation:prog 6s linear forwards}
@keyframes prog{to{width:100%}}
.clippage .burn{position:absolute; left:14px; top:52%; background:rgba(255,181,71,.95); color:var(--cue-ink); font-weight:700; font-size:12.5px; padding:5px 10px; border-radius:8px}
.clippage .wm{position:absolute; right:14px; top:52px; font-size:10px; background:rgba(0,0,0,.4); padding:3px 7px; border-radius:6px}
.clippage .foot{position:absolute; left:16px; right:16px; bottom:24px; display:grid; gap:10px}
.clippage .foot p{margin:0; font-size:14px; line-height:1.4}

/* ---------- live-app overrides (full screen instead of a phone mock) ---------- */
.screen{-webkit-overflow-scrolling:touch}
.pad{padding:calc(var(--safe-top) + 18px) 16px calc(92px + var(--safe-bottom))}
.tabs{padding-bottom:calc(10px + var(--safe-bottom))}
.rtop{top:calc(var(--safe-top) + 12px)}
.rtags{top:calc(var(--safe-top) + 52px)}
.caps{top:calc(var(--safe-top) + 78px)}
.soundicon{top:calc(var(--safe-top) + 52px)}
.banner-off{top:calc(var(--safe-top) + 84px)}
.rbar{bottom:calc(12px + var(--safe-bottom))}
.qchips,.nudge{bottom:calc(62px + var(--safe-bottom))}
.chat{bottom:calc(104px + var(--safe-bottom)); max-height:34vh}
.hearts{bottom:calc(104px + var(--safe-bottom))}
.momentchip{bottom:calc(64px + var(--safe-bottom))}
.giftbars{bottom:calc(104px + 34vh + var(--safe-bottom))}
.sheet{padding-bottom:calc(20px + var(--safe-bottom)); max-height:88%}
.toast{top:calc(var(--safe-top) + 90px); max-width:calc(100% - 32px); white-space:normal; text-align:center}
.stage img,.stage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%}
.stage .layer{position:absolute; inset:0; transition:opacity .45s ease}
.stage .layer.out{opacity:0}
.m-idle{animation:breathe 4s ease-in-out infinite alternate}
.m-sway{animation:sway 1.6s ease-in-out infinite alternate}
.m-bounce{animation:bounce .5s ease-in-out infinite alternate}
.m-shake{animation:shake2 .35s ease-in-out infinite alternate}
.m-spin{animation:spin3 1.8s ease-in-out infinite}
.m-zoom{animation:zoomin 6s ease-out forwards}
.m-float{animation:floaty 2s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.05)}}
@keyframes shake2{from{transform:rotate(-1.5deg) scale(1.04)}to{transform:rotate(1.5deg) scale(1.04)}}
@keyframes spin3{0%{transform:scale(1.04) rotateY(0)}50%{transform:scale(1.08) rotateY(180deg)}100%{transform:scale(1.04) rotateY(360deg)}}
@keyframes zoomin{from{transform:scale(1.15)}to{transform:scale(1.02)}}
@keyframes floaty{from{transform:translateY(0) scale(1.04)}to{transform:translateY(-12px) scale(1.06)}}
.perfbanner{position:absolute; left:50%; transform:translateX(-50%); top:calc(var(--safe-top) + 120px); z-index:6; background:rgba(255,92,138,.9); font-weight:800; font-family:var(--display); padding:8px 14px; border-radius:99px; white-space:nowrap; animation:pop .3s ease; max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis}
.aibadge{font-size:10px; letter-spacing:.03em; color:var(--w2); background:rgba(0,0,0,.35); padding:3px 8px; border-radius:6px}
.msg{cursor:default}
.msg .rep{margin-left:6px; color:var(--w3); font-size:10.5px}
.devnote{font-size:11px; color:var(--w3); text-align:center; margin-top:8px}
.err{color:#FFB3B3; font-size:12px; min-height:16px; margin:4px 0 0}
.code input{position:absolute; opacity:0; pointer-events:none}
.codein{width:100%; text-align:center; letter-spacing:.5em; font-family:var(--display); font-weight:800; font-size:24px; background:rgba(255,255,255,.08); border:1px solid var(--glass-line); color:var(--w); border-radius:12px; padding:12px; margin:4px 0 8px}
.spinner.sm{width:22px; height:22px; border-width:2px; margin:0}
.loading{position:absolute; inset:0; display:grid; place-items:center}
.clipstage{position:absolute; inset:0; overflow:hidden}
.clipstage img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%}
.cap{position:absolute; left:16px; right:16px; top:58%; background:rgba(0,0,0,.55); padding:8px 12px; border-radius:10px; font-size:15px; line-height:1.35}
.cap i{font-style:normal; color:var(--host); font-weight:700; margin-right:4px}
a{color:var(--cue)}

/* ---------- layout fixes ---------- */
.screen.tabbed{overflow:hidden}
.scroller{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
.scroller::-webkit-scrollbar{display:none}
.gbanner{transition:opacity .25s ease, transform .25s ease, max-height .25s ease, margin .25s ease, padding .25s ease; max-height:120px; overflow:hidden}
.gbanner.collapse{opacity:0; transform:scale(.96); max-height:0; margin-bottom:0; padding-block:0; border-width:0}

/* ---------- motion ---------- */
:root{--ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.3,.7,.4,1.4)}
/* page changes (View Transitions); only the app column moves, the backdrop stays */
.app{view-transition-name:app}
::view-transition-old(app),::view-transition-new(app){animation-duration:.34s; animation-timing-function:var(--ease-out)}
html[data-vt=tab]::view-transition-old(app),html[data-vt=tab]::view-transition-new(app){animation-duration:.18s}
html[data-vt=push]::view-transition-old(app){animation-name:vt-out-left}
html[data-vt=push]::view-transition-new(app){animation-name:vt-in-right}
html[data-vt=pop]::view-transition-old(app){animation-name:vt-out-right; z-index:2}
html[data-vt=pop]::view-transition-new(app){animation-name:vt-in-left}
html[data-vt=next]::view-transition-old(app){animation-name:vt-out-up}
html[data-vt=next]::view-transition-new(app){animation-name:vt-in-up}
html[data-vt=prev]::view-transition-old(app){animation-name:vt-out-down}
html[data-vt=prev]::view-transition-new(app){animation-name:vt-in-down}
@keyframes vt-in-right{from{transform:translateX(40%); opacity:0}}
@keyframes vt-out-left{to{transform:translateX(-15%); opacity:0}}
@keyframes vt-in-left{from{transform:translateX(-15%); opacity:.4}}
@keyframes vt-out-right{to{transform:translateX(40%); opacity:0}}
@keyframes vt-in-up{from{transform:translateY(100%)}}
@keyframes vt-out-up{to{transform:translateY(-35%); filter:brightness(.4)}}
@keyframes vt-in-down{from{transform:translateY(-100%)}}
@keyframes vt-out-down{to{transform:translateY(35%); filter:brightness(.4)}}
.screen.on{animation:none}

/* press feedback */
.primary,.ghost,.go,.join,.sendg,.gift,.pack,.cats button,.qchips button,.follow,.giftbtn,.like,.send,.tabs button,.bubble,.nb,.act,.edit,.daily button,.wbtns button,.applepay,.auth button,.coinchip,.back,.swipe button,.soundicon,.host,.field button,.link,.stats button,.thumb{transition:transform .16s var(--ease-spring), background-color .2s, color .2s, border-color .2s, opacity .2s}
.primary:active,.ghost:active,.go:active,.join:active,.sendg:active,.gift:active,.pack:active,.cats button:active,.qchips button:active,.follow:active,.giftbtn:active,.like:active,.send:active,.bubble:active,.nb:active,.act:active,.edit:active,.daily button:active,.wbtns button:active,.applepay:active,.auth button:active,.coinchip:active,.back:active,.swipe button:active,.soundicon:active,.host:active,.field button:active,.stats button:active,.thumb:active{transform:scale(.93)}
.tabs button:active{transform:scale(.88)}
.feature,.card{transition:transform .2s var(--ease-out), filter .2s}
.feature:active,.card:active{transform:scale(.97); filter:brightness(.9)}
.tabs button[aria-current="page"] svg{animation:tabpop .35s var(--ease-spring)}
@keyframes tabpop{40%{transform:scale(1.2)}}
.primary.busy{opacity:.7; pointer-events:none}
.primary.busy::after{content:""; display:inline-block; width:14px; height:14px; margin-left:8px; vertical-align:-2px; border-radius:50%; border:2px solid rgba(42,26,0,.3); border-top-color:var(--cue-ink); animation:spin .7s linear infinite}

/* list entrance: cards rise in one after another */
.anim-page .feature,.anim-page .card,.anim-page .up,.anim-page .emptylive,.anim-page .gbanner,.anim-page .bubble,
.anim-list .feature,.anim-list .card,.anim-list .emptylive{animation:rise .45s var(--ease-out) both; animation-delay:calc(var(--i,0) * 50ms)}
@keyframes rise{from{transform:translateY(14px) scale(.98); opacity:0}}
.live{animation:livepulse 2.4s ease-in-out infinite}
@keyframes livepulse{50%{box-shadow:0 0 0 4px rgba(229,55,77,.25)}}

/* sheets: scrim fades, sheet slides up; closing reverses; swapping sheets just cross-fades */
.scrim{animation:fade .22s ease}
.scrim.still{animation:none}
.scrim.closing{animation:fadeout .21s ease forwards}
.sheet{animation:up .32s var(--ease-out); transition:transform .25s var(--ease-out); will-change:transform}
.sheet.swap{animation:swapin .22s var(--ease-out)}
.sheet.closing{animation:down .21s ease-in forwards}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
@keyframes down{to{transform:translateY(100%)}}
@keyframes fadeout{to{opacity:0}}
@keyframes swapin{from{opacity:0; transform:translateX(16px)}}
.gift .e{transition:transform .25s var(--ease-spring)}
.gift[aria-pressed="true"] .e{transform:scale(1.15) rotate(-6deg)}
.gift,.pack{transition:transform .16s var(--ease-spring), background-color .2s, border-color .2s}
.gdesc.swapin{animation:pop .25s var(--ease-out)}
.okmark{animation:okpop .45s var(--ease-spring)}
@keyframes okpop{from{transform:scale(.3); opacity:0}}
.code span.on,.codein:focus{border-color:var(--cue); box-shadow:0 0 0 3px rgba(255,181,71,.18)}
.codein{transition:border-color .2s, box-shadow .2s}
.field input{transition:border-color .2s, box-shadow .2s}
.field input:focus{border-color:var(--cue); box-shadow:0 0 0 3px rgba(255,181,71,.15); outline:none}
.check.err{animation:shake .3s}

/* room */
.stage{transition:transform .35s var(--ease-out), filter .35s}
.stage .layer{transition:opacity .5s ease, transform .6s var(--ease-out)}
.stage .layer.out{opacity:0; transform:scale(1.04)}
.soundpill{transition:opacity .25s, transform .25s}
.soundpill.gone{opacity:0; transform:translate(-50%,-50%) scale(.85)}
.sub{animation:capin .3s var(--ease-out)}
@keyframes capin{from{transform:translateY(8px); opacity:0}}
.msg{animation:msgin .28s var(--ease-out)}
@keyframes msgin{from{transform:translateY(10px); opacity:0}}
.msg.answered{animation:answered 1.4s var(--ease-out)}
@keyframes answered{0%{box-shadow:inset 0 0 0 1.5px rgba(255,181,71,.85), 0 0 0 0 rgba(255,181,71,.6)}40%{box-shadow:inset 0 0 0 1.5px rgba(255,181,71,.85), 0 0 0 8px rgba(255,181,71,0)}}
.like.pop{animation:likepop .35s var(--ease-spring)}
@keyframes likepop{40%{transform:scale(1.25)}}
.follow.pop{animation:likepop .35s var(--ease-spring)}
.giftbtn{animation:giftwiggle 6s ease-in-out 8s infinite}
@keyframes giftwiggle{0%,90%,100%{transform:none}92%{transform:rotate(-12deg) scale(1.06)}94%{transform:rotate(10deg) scale(1.06)}96%{transform:rotate(-6deg)}98%{transform:rotate(3deg)}}
.giftbtn:active{animation:none}
.giftbar{animation:slideIn .4s var(--ease-spring)}
.momentchip{animation:chipin .35s var(--ease-spring)}
.momentchip.out,.nudge.out{animation:chipout .25s ease-in forwards}
@keyframes chipin{from{transform:translate(-50%,16px) scale(.9); opacity:0}}
@keyframes chipout{to{opacity:0; transform:translateY(10px)}}
.momentchip.out{animation-name:chipout2}
@keyframes chipout2{to{opacity:0; transform:translate(-50%,10px)}}
.nudge{animation:chipin2 .35s var(--ease-spring)}
@keyframes chipin2{from{transform:translateY(16px); opacity:0}}
.perfbanner{animation:bannerin .45s var(--ease-spring)}
@keyframes bannerin{from{transform:translate(-50%,-10px) scale(.8); opacity:0}}
.toast{animation:toastin .3s var(--ease-spring)}
.toast.out{animation:toastout .22s ease-in forwards}
@keyframes toastin{from{transform:translate(-50%,-10px) scale(.95); opacity:0}}
@keyframes toastout{to{transform:translate(-50%,-6px); opacity:0}}
.bump{animation:bump .7s var(--ease-out)}
@keyframes bump{30%{transform:scale(1.06); color:var(--cue)}}
.offline-card{animation:pop .35s var(--ease-out)}
.banner-off{animation:chipin2 .35s var(--ease-spring)}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(app),::view-transition-new(app){animation:none!important}
  .giftbtn,.live{animation:none!important}
}