/* Jodi Call — soft light theme (lavender + plum + pink), rounded cards, circle avatars,
   floating tab bar, gentle animations. */
:root {
  --bg: #f6f1ff; --surface: #ffffff; --surface-2: #f1eafc; --line: #e7ddf8;
  --text: #2a1840; --muted: #8b80a3; --accent: #7b3fe4; --accent-2: #e84d9a; --plum: #4b1f5c;
  --danger: #f0457a; --success: #22c37a; --gold: #b7860b; --radius: 22px;
  --shadow: 0 10px 30px rgba(91, 47, 160, .10); --shadow-lg: 0 18px 50px rgba(91, 47, 160, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; letter-spacing: -.02em; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.error { color: var(--danger); font-size: 14px; margin: 0; min-height: 1em; }

/* Phone-sized column + screen enter animation */
.app { max-width: 480px; margin: 0 auto; min-height: 100%; position: relative; }
.screen { padding: 18px 18px 110px; display: flex; flex-direction: column; gap: 18px; min-height: 100vh; animation: screenIn .45s var(--ease); }
@keyframes screenIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Inputs & buttons */
input, select, textarea { font: inherit; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text); width: 100%; transition: border-color .2s, box-shadow .2s; }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(123, 63, 228, .12); }
label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
button { -webkit-user-select: none; user-select: none; }
.btn { font: inherit; font-weight: 700; padding: 14px 18px; border-radius: 999px; border: none; background: var(--surface-2); color: var(--plum); cursor: pointer; transition: transform .15s var(--ease), box-shadow .2s; }
.btn:active, .round:active, .chip:active, .person:active, .pack:active { transform: scale(.96); }
.btn.primary { background: var(--plum); color: #fff; box-shadow: 0 10px 24px rgba(75, 31, 92, .28); }
.btn.danger { background: #fff0f5; color: var(--danger); }
.btn.wide { width: 100%; }
.icon-btn { padding: 12px; flex: none; width: 50px; }
.link { background: none; border: none; color: var(--accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; text-align: left; }
.row { display: flex; gap: 10px; align-items: center; }
.row > .btn { flex: 1; }
.form { display: flex; flex-direction: column; gap: 14px; }
.card { background: var(--surface); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); animation: popIn .5s var(--ease) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.grow { flex: 1; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; }
.field { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ---------- Auth: orbit hero ---------- */
.auth { display: flex; flex-direction: column; gap: 18px; padding-top: 2vh; }
.orbit { position: relative; width: 280px; height: 280px; margin: 0 auto; }
.orbit .ring-line { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed #e3d6fb; }
.orbit .ring-line.r2 { inset: 50px; background: radial-gradient(circle, #f3e8ff 0%, #fbe7f3 70%); border: none; animation: breathe 3.2s ease-in-out infinite; }
.orbit .ring-line.r3 { inset: 95px; background: #fff; border: none; box-shadow: var(--shadow); }
.orbit .core { position: absolute; inset: 104px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 10px 30px rgba(232, 77, 154, .35); }
.orbit .spin { position: absolute; inset: 0; animation: spin 26s linear infinite; }
.orbit .bubble { position: absolute; width: var(--s, 46px); height: var(--s, 46px); margin: calc(var(--s, 46px) / -2) 0 0 calc(var(--s, 46px) / -2); border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--s, 46px) * .45); box-shadow: 0 8px 20px rgba(91, 47, 160, .2); border: 3px solid #fff; background: var(--c); animation: spin 26s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { transform: scale(1.05); } }
.logo { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.logo h1 { font-size: 28px; line-height: 1.2; }
.logo-mark { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 12px 30px rgba(232, 77, 154, .35); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface-2); border-radius: 999px; padding: 5px; }
.tab { font: inherit; font-weight: 600; padding: 11px; border: none; border-radius: 999px; background: none; color: var(--muted); cursor: pointer; transition: all .25s var(--ease); }
.tab.active { background: var(--surface); color: var(--plum); box-shadow: var(--shadow); }
.features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: 14px; text-align: center; }

/* ---------- Top bar, lists ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.section-head { display: flex; justify-content: space-between; align-items: center; }
.search { background: var(--surface); border-radius: 999px; box-shadow: var(--shadow); border-color: transparent; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list li { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); animation: popIn .45s var(--ease) both; }
.list li:nth-child(2) { animation-delay: .04s; } .list li:nth-child(3) { animation-delay: .08s; } .list li:nth-child(4) { animation-delay: .12s; } .list li:nth-child(n+5) { animation-delay: .16s; }
.card .list li { box-shadow: none; background: var(--surface-2); }
.list .info { flex: 1; min-width: 0; }
.list .info strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .actions { display: flex; gap: 6px; }
.list .actions button { width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--surface-2); color: var(--plum); cursor: pointer; font-size: 16px; transition: transform .15s; }
.list .actions button:active { transform: scale(.9); }
.list .actions button.ok { background: var(--success); color: #fff; }
.list .actions button.no { background: var(--surface-2); }
.empty { color: var(--muted); text-align: center; font-size: 14px; padding: 28px 8px; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #c9c1d8; margin-right: 6px; }
.status-dot.on { background: var(--success); }
.missed { color: var(--danger); }
.count { display: inline-block; min-width: 26px; padding: 2px 9px; border-radius: 999px; background: #e7f9f0; color: var(--success); font-size: 13px; font-weight: 700; vertical-align: middle; text-align: center; }

/* Avatars (initials) */
.avatar { width: 46px; height: 46px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: var(--c, #9b8ac4); }
.avatar.big { width: 54px; height: 54px; font-size: 20px; }
.avatar.huge { width: 120px; height: 120px; font-size: 46px; border: 5px solid #fff; box-shadow: var(--shadow-lg); }
.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(123, 63, 228, .45); } 100% { box-shadow: 0 0 0 30px rgba(123, 63, 228, 0); } }

/* ---------- Online: friends row + circle grid ---------- */
.stories { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.stories::-webkit-scrollbar { display: none; }
.story { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text); background: none; border: none; cursor: pointer; font-family: inherit; width: 64px; padding: 0; animation: popIn .4s var(--ease) both; }
.story .avatar { width: 60px; height: 60px; font-size: 22px; border: 3px solid #fff; box-shadow: 0 0 0 2.5px var(--accent-2); }
.story span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 10px; }
.person { background: none; padding: 4px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; position: relative; min-width: 0; cursor: pointer; animation: popIn .5s var(--ease) both; transition: transform .15s; }
.grid .person:nth-child(3n+2) { animation-delay: .05s; } .grid .person:nth-child(3n) { animation-delay: .1s; }
.person .avatar { width: 88px; height: 88px; font-size: 32px; position: relative; border: 4px solid #fff; box-shadow: 0 0 0 2.5px #e3d6fb, var(--shadow); }
.person.is-friend .avatar { box-shadow: 0 0 0 2.5px var(--accent-2), var(--shadow); }
.person .avatar::after { content: ''; position: absolute; right: 2px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--success); border: 3px solid #fff; animation: onlineBlink 2.4s ease-in-out infinite; }
@keyframes onlineBlink { 50% { transform: scale(.8); } }
.person strong { font-size: 14px; margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .meta { color: var(--muted); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person .langs, .person .bio, .person .tag, .person .more { display: none; }
.person .acts { display: flex; gap: 6px; justify-content: center; margin-top: 4px; }
.person .acts button { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface); box-shadow: var(--shadow); color: var(--plum); cursor: pointer; font-size: 15px; display: grid; place-items: center; padding: 0; transition: transform .15s; }
.person .acts button:active { transform: scale(.88); }
.person .acts .call-btn { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.person .acts button:disabled { opacity: .5; }

.random-card { background: linear-gradient(135deg, #5b2a86 0%, #8e3fc9 55%, #e84d9a 100%); color: #fff; flex-direction: row; align-items: center; gap: 14px; overflow: hidden; position: relative; }
.random-card::before { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; top: -70px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.random-card > * { position: relative; }
.random-card .muted, .random-card .rate-line { color: rgba(255, 255, 255, .85); }
.random-card h3 { font-size: 18px; }
.random-card .row { flex-direction: column; gap: 8px; flex: none; }
.random-card .btn { background: #fff; color: var(--plum); padding: 11px 16px; box-shadow: none; width: 100%; }
.random-card .btn.primary { animation: glow 2s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, .25); } }

/* Chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; font: inherit; font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 999px; border: none; background: var(--surface); color: var(--muted); cursor: pointer; box-shadow: var(--shadow); transition: all .25s var(--ease); }
.chip.active { background: var(--plum); color: #fff; }
.chip.unlock { color: var(--success); }
.chip.unlock.active { background: var(--success); color: #fff; }

/* Settings */
.profile { flex-direction: row; align-items: center; }
.preview-wrap { position: relative; border-radius: 18px; overflow: hidden; background: #1d1430; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.preview-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.preview-wrap .btn { position: relative; }
.switch-row { flex-direction: row; justify-content: space-between; align-items: center; color: var(--text); font-weight: 500; font-size: 14px; }
.switch-row input { width: 44px; height: 24px; accent-color: var(--accent); flex: none; }
.mirror { transform: scaleX(-1); }

/* ---------- Floating tab bar ---------- */
.tabbar { position: fixed; bottom: calc(14px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 440px; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; padding: 8px; z-index: 5; box-shadow: var(--shadow-lg); animation: barIn .5s var(--ease); }
@keyframes barIn { from { transform: translate(-50%, 30px); opacity: 0; } }
.tabbar button { font: inherit; font-size: 11px; font-weight: 600; background: none; border: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; cursor: pointer; position: relative; border-radius: 999px; transition: all .3s var(--ease); }
.tabbar button span { font-size: 20px; transition: transform .3s var(--ease); }
.tabbar button.active { color: var(--plum); background: var(--surface-2); }
.tabbar button.active span { transform: translateY(-2px) scale(1.12); }
.badge { position: absolute; top: 4px; right: calc(50% - 20px); width: 10px; height: 10px; border-radius: 50%; background: var(--accent-2); border: 2px solid #fff; }

/* ---------- Ringing / searching ---------- */
.ring { justify-content: space-between; align-items: center; padding: 15vh 16px 10vh; background: radial-gradient(circle at 50% 32%, #efe2ff 0%, #fbe9f4 45%, var(--bg) 75%); }
.ring-body, .sheet { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ring-actions { display: flex; gap: 48px; justify-content: center; margin-top: 16px; }
.round { width: 62px; height: 62px; border-radius: 50%; border: none; font-size: 22px; background: var(--surface-2); color: var(--plum); cursor: pointer; transition: transform .15s var(--ease), background .2s; display: grid; place-items: center; padding: 0; }
.round.danger { background: var(--danger); color: #fff; box-shadow: 0 10px 24px rgba(240, 69, 122, .35); }
.round.success { background: var(--success); color: #fff; box-shadow: 0 10px 24px rgba(34, 195, 122, .35); animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(0); } }
.round.off { background: var(--plum); color: #fff; }
.round.next { background: var(--accent); color: #fff; }
.overlay { position: fixed; inset: 0; background: rgba(42, 24, 64, .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 16px; z-index: 10; animation: fadeIn .25s; }
@keyframes fadeIn { from { opacity: 0; } }
.sheet { background: var(--surface); border-radius: 28px; padding: 28px 20px; width: min(380px, 100%); box-shadow: var(--shadow-lg); animation: sheetUp .4s var(--ease); }
@keyframes sheetUp { from { transform: translateY(40px) scale(.96); opacity: 0; } }
.sheet.form { align-items: stretch; text-align: left; }

/* ---------- Call screen ---------- */
.screen.call { padding: 0; gap: 0; height: 100vh; background: var(--bg); animation: fadeIn .3s; }
.stage { position: relative; flex: 1; background: #120a1f; overflow: hidden; border-radius: 0 0 28px 28px; }
#remote { width: 100%; height: 100%; object-fit: cover; }
.stage-center { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; color: #cbbfe3; text-align: center; padding: 16px; background: radial-gradient(circle at 50% 40%, #3a2160, #120a1f 70%); }
.call-top { position: absolute; top: 0; left: 0; right: 0; padding: 18px 16px 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #fff; background: linear-gradient(rgba(18, 10, 31, .7), transparent); }
.call-top strong { font-size: 18px; }
#callTimer { font-size: 13px; font-weight: 700; padding: 4px 12px 4px 22px; border-radius: 999px; background: rgba(255, 255, 255, .16); position: relative; }
#callTimer::before { content: ''; position: absolute; left: 10px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--accent-2); animation: onlineBlink 1.2s infinite; }
.call-top .muted { color: rgba(255, 255, 255, .75); }
.pip { position: absolute; right: 14px; top: 96px; width: 30%; max-width: 150px; border-radius: 20px; border: 3px solid rgba(255, 255, 255, .85); background: #2a1840; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.call-panel { background: var(--bg); padding: 14px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; }
.call-controls { display: flex; justify-content: center; gap: 14px; }
.call-controls .round { width: 56px; height: 56px; background: var(--surface); box-shadow: var(--shadow); }
.call-controls .round.danger { background: var(--danger); width: 64px; height: 64px; }
.call-controls .round.off { background: var(--plum); color: #fff; }
.call-controls .round.next { background: var(--accent); }
#hangBtn { transform: rotate(135deg); }
#hangBtn:active { transform: rotate(135deg) scale(.94); }
.report-btn { position: absolute; top: 16px; right: 12px; z-index: 2; }
.small-round { width: 40px; height: 40px; font-size: 18px; background: rgba(255, 255, 255, .18); color: #fff; }

.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: var(--plum); color: #fff; padding: 12px 18px; border-radius: 999px; font-size: 14px; font-weight: 500; z-index: 20; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); animation: toastIn .35s var(--ease); }
@keyframes toastIn { from { transform: translate(-50%, 20px); opacity: 0; } }

/* ---------- Coins / wallet ---------- */
.coin-pill { font: inherit; font-weight: 700; padding: 9px 15px; border-radius: 999px; border: none; background: #fff6d9; color: var(--gold); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow); }
.small-pill { font-size: 13px; padding: 4px 10px; margin-top: 4px; cursor: default; }
.small-pill.earn { color: var(--success); background: #e7f9f0; }
.small-pill.low { color: var(--danger); background: #ffe8ef; }
.rate-line { color: var(--gold); margin: 6px 0 0; }
.balance { text-align: center; align-items: center; background: linear-gradient(135deg, #fff6d9, #ffe9b8); }
.balance.earn { background: linear-gradient(135deg, #e7f9f0, #c9f1dd); }
.balance .row { width: 100%; }
.big-num { font-size: 42px; }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0 6px; }
.pack { font: inherit; position: relative; background: var(--surface); border: 2px solid transparent; border-radius: 20px; padding: 18px 6px 12px; color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: var(--shadow); transition: transform .15s, border-color .2s; }
.pack:hover { border-color: var(--accent); }
.pack b { font-size: 20px; }
.pack .price { background: var(--plum); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 700; margin-top: 4px; }
.pack .ptag { position: absolute; top: -10px; font-size: 11px; background: var(--accent-2); color: #fff; padding: 2px 9px; border-radius: 999px; font-weight: 700; }
.plus { color: var(--success); font-weight: 700; }
.minus { color: var(--danger); font-weight: 700; }

/* Draw-a-heart pad + floating heart bubbles on the call screen */
#drawPad { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; z-index: 1; }
#heartFx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 3; }
#heartFx span { position: absolute; bottom: -60px; opacity: 0; animation: heartUp var(--dur, 3s) cubic-bezier(.2,.7,.4,1) forwards; filter: drop-shadow(0 4px 10px #ff4d7966); }
@keyframes heartUp {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  12% { opacity: 1; transform: translate(calc(var(--sway) * -.3), -12vh) scale(1.1); }
  50% { transform: translate(var(--sway), -50vh) scale(1); opacity: .95; }
  100% { transform: translate(calc(var(--sway) * -.5), -105vh) scale(.8); opacity: 0; }
}
.call-top, .report-btn, .pip, #waiting { z-index: 2; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Home header like the "corner" reference ---------- */
.home-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 6px; }
.home-head .hi { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-head .coin-pill { justify-self: end; }
.seg { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.seg i { color: var(--muted); font-style: normal; }
.seg button { font: inherit; background: none; border: none; padding: 4px 2px; color: var(--muted); cursor: pointer; }
.seg button.on { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.seg .count { font-size: 11px; padding: 1px 7px; min-width: 0; }
.find-row { display: flex; gap: 10px; }
.find { flex: 1; flex-direction: row; align-items: center; gap: 8px; background: var(--text); border-radius: 999px; padding: 0 16px; color: #fff; font-size: 15px; }
.find input { background: none; border: none; color: #fff; padding: 13px 0; box-shadow: none; }
.find input::placeholder { color: rgba(255, 255, 255, .55); }
.find input:focus { box-shadow: none; }
.invite { font: inherit; font-weight: 700; border: none; border-radius: 999px; padding: 0 18px; background: var(--text); color: #fff; cursor: pointer; transition: transform .15s; }
.invite:active { transform: scale(.94); }
.person .pic { position: relative; }
.person .pic .avatar::after { display: none; }
.person .pill { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); background: #fff; border: 1.5px solid var(--text); border-radius: 999px; font-size: 11px; font-weight: 700; padding: 1px 8px; white-space: nowrap; }
.person strong { margin-top: 12px; }
.ps-call { width: 100%; margin-top: 6px; }

/* ---------- Welcome screen (dark, orbit of rounded photo tiles) ---------- */
.screen.welcome { background: #0d0b10; color: #fff; justify-content: space-between; align-items: center; padding: 8vh 24px calc(40px + env(safe-area-inset-bottom)); min-height: 100vh; }
.w-orbit { position: relative; width: min(330px, 86vw); aspect-ratio: 1; }
.w-ring { position: absolute; inset: 0; border-radius: 50%; background: #1c1a21; animation: breathe 4s ease-in-out infinite; }
.w-ring.r2 { inset: 22%; background: #2a2730; animation-delay: -2s; }
.w-core { position: absolute; inset: 37%; border-radius: 30%; background: #f2f0f5; color: #111; display: grid; place-items: center; font: 800 44px/1 Georgia, 'Times New Roman', serif; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: coreIn .8s var(--ease) both; }
@keyframes coreIn { from { transform: scale(.4); opacity: 0; } }
.w-spin { position: absolute; inset: 0; animation: spin 40s linear infinite; }
.w-orbit .tile { position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 32%; background: var(--c); display: grid; place-items: center; font-size: calc(var(--s) * .55); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); animation: tileIn .7s var(--ease) var(--d) both, spin 40s linear infinite reverse; }
@keyframes tileIn { from { opacity: 0; transform: scale(.2); } }
.w-text { text-align: center; display: flex; flex-direction: column; gap: 10px; animation: popIn .7s var(--ease) .3s both; }
.w-text h1 { font-size: 38px; letter-spacing: -.03em; }
.w-text p { margin: 0; color: #a7a2b0; font-size: 15px; line-height: 1.5; }
.w-enter { font: inherit; font-size: 18px; font-weight: 600; width: min(280px, 80%); padding: 18px; border-radius: 999px; border: none; background: #fff; color: #111; cursor: pointer; box-shadow: 0 10px 30px rgba(255, 255, 255, .12); transition: transform .15s; animation: popIn .7s var(--ease) .5s both; }
.w-enter:active { transform: scale(.96); }

/* ---------- Profile sheet with cover (like the reference profile page) ---------- */
#personSheet .sheet { padding: 0 0 20px; overflow: hidden; align-items: stretch; text-align: left; gap: 10px; }
.ps-cover { height: 130px; background: radial-gradient(circle at 20% 30%, #c9b6ff 0, transparent 45%), radial-gradient(circle at 80% 60%, #ffb3d5 0, transparent 50%), linear-gradient(135deg, #4b1f5c, #7b3fe4); }
.ps-head { display: flex; align-items: flex-end; gap: 12px; padding: 0 20px; margin-top: -48px; }
#personSheet .avatar.huge { width: 96px; height: 96px; font-size: 36px; border-radius: 30%; border: 4px solid #fff; }
.ps-id { display: flex; flex-direction: column; padding-bottom: 6px; min-width: 0; }
.ps-id h2 { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-meta { margin: 0; padding: 0 20px; color: var(--muted); font-size: 14px; }
.ps-bio { margin: 0 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.ps-bio h3 { font-size: 14px; margin-bottom: 4px; }
.ps-bio p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.5; }
#personSheet .ps-call, #personSheet .stack { padding: 0 20px; width: auto; }

/* =====================================================================
   DARK THEME (reference: dark glass, lavender + mint accents, white pills)
   Overrides everything above.
   ===================================================================== */
:root {
  --bg: #0e0f12; --surface: #1c1d22; --surface-2: #2a2b31; --line: #33343b;
  --text: #f4f3f7; --muted: #9b99a6; --accent: #b9a6f7; --accent-2: #9be3a8; --plum: #b9a6f7;
  --danger: #ff5c7a; --success: #9be3a8; --gold: #f5c842;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .55);
}
body { background: radial-gradient(120% 60% at 100% 0%, #1d3b2a 0%, transparent 55%), radial-gradient(120% 70% at 0% 100%, #2f2450 0%, transparent 55%), #0e0f12; background-attachment: fixed; }
.screen { background: transparent; }
input, select, textarea { background: var(--surface); border-color: var(--line); color: var(--text); }
input::placeholder, textarea::placeholder { color: #6f6d79; }
.btn { background: var(--surface-2); color: var(--text); }
.btn.primary { background: var(--accent); color: #141418; box-shadow: 0 10px 30px rgba(185, 166, 247, .25); }
.btn.danger { background: rgba(255, 92, 122, .12); color: var(--danger); }
.card { background: rgba(28, 29, 34, .85); border: 1px solid rgba(255, 255, 255, .06); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.tabs { background: var(--surface); }
.tab.active { background: #fff; color: #141418; }
.chip { background: transparent; color: var(--text); border: 1.5px solid var(--line); box-shadow: none; }
.chip.active { background: #fff; color: #141418; border-color: #fff; }
.count { background: rgba(155, 227, 168, .15); color: var(--accent-2); }
.list li { background: var(--surface); }
.card .list li { background: var(--surface-2); }
.list .actions button { background: var(--surface-2); color: var(--text); }
.list .actions button.ok { background: var(--accent-2); color: #141418; }
.link { color: var(--accent); }
.search { background: var(--surface); }
.avatar.huge { border-color: #2a2b31; }
.logo-mark { background: #f2f0f5; color: #141418; font-family: Georgia, 'Times New Roman', serif; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }

/* Home */
.home-title { font-size: 32px; line-height: 1.15; letter-spacing: -.03em; margin: -4px 0 -4px; }
.home-title span { color: var(--accent); }
.seg button.on { color: var(--text); }
.find { background: var(--surface); border: 1px solid var(--line); }
.find input { color: var(--text); }
.find input::placeholder { color: #6f6d79; }
.invite { background: #fff; color: #141418; }
.coin-pill { background: rgba(245, 200, 66, .12); color: var(--gold); box-shadow: none; }
.stories .story { color: var(--text); }
.story .avatar { border-color: var(--bg); box-shadow: 0 0 0 2.5px var(--accent-2); }

.random-card { background: linear-gradient(135deg, #b9a6f7, #d7cbff); color: #141418; border: none; }
.random-card::before { background: rgba(255, 255, 255, .25); }
.random-card .muted, .random-card .rate-line { color: rgba(20, 20, 24, .7); }
.random-card .btn { background: #141418; color: #fff; }
.random-card .btn.primary { animation: none; }

/* People: big rounded cards in two columns, alternating lavender / mint / white */
.grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.person { background: var(--accent); color: #141418; border-radius: 28px; padding: 12px 12px 14px; align-items: flex-start; text-align: left; gap: 2px; box-shadow: var(--shadow); }
.grid .person:nth-child(4n+2), .grid .person:nth-child(4n+3) { background: var(--accent-2); }
.grid .person:nth-child(5n) { background: #f2f0f5; }
.person .pill { position: static; transform: none; align-self: flex-start; background: #141418; color: #fff; border: none; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.person .pic { width: 100%; margin: 10px 0 8px; }
.person .avatar, .person .pic .avatar { width: 100%; height: auto; aspect-ratio: 1; border-radius: 22px; font-size: 44px; border: none; box-shadow: none; background: rgba(20, 20, 24, .85); color: var(--c, #b9a6f7); }
.person .avatar::after { display: none; }
.person strong { margin-top: 0; font-size: 17px; letter-spacing: -.02em; color: #141418; }
.person .meta { color: rgba(20, 20, 24, .65); font-size: 12px; }
.person .acts { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-start; }
.person .acts button { width: 38px; height: 38px; background: #141418; color: #fff; box-shadow: none; font-size: 15px; }
.person .acts button:first-child { background: #fff; }

/* Floating dark nav with a white active circle */
.tabbar { background: rgba(28, 29, 34, .9); border: 1px solid rgba(255, 255, 255, .06); }
.tabbar button { color: var(--muted); }
.tabbar button.active { background: transparent; color: var(--text); }
.tabbar button.active span { background: #fff; border-radius: 50%; width: 40px; height: 40px; display: grid; place-items: center; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(255, 255, 255, .15); }
.badge { border-color: var(--surface); background: var(--accent-2); }

/* Sheets, overlays, ringing */
.overlay { background: rgba(0, 0, 0, .55); }
.sheet { background: #17181c; border: 1px solid rgba(255, 255, 255, .06); }
.ps-cover { background: radial-gradient(circle at 25% 35%, #9be3a8 0, transparent 45%), radial-gradient(circle at 80% 60%, #f2f0f5 0, transparent 45%), linear-gradient(135deg, #b9a6f7, #8f7ae8); }
#personSheet .avatar.huge { border-color: #17181c; }
.ps-bio { border-color: var(--line); }
.ring { background: radial-gradient(circle at 50% 32%, rgba(185, 166, 247, .25) 0%, transparent 55%), transparent; }
.round { background: var(--surface-2); color: var(--text); }
.round.success { background: var(--accent-2); color: #141418; }
.round.danger { background: var(--danger); }
.round.next { background: var(--accent); color: #141418; }
.toast { background: #fff; color: #141418; }

/* Call screen */
.screen.call { background: var(--bg); }
.stage { background: #000; }
.call-panel { background: transparent; }
.call-controls .round { background: var(--surface-2); color: var(--text); }
.call-controls .round.off { background: #fff; color: #141418; }
.call-controls .round.next { background: var(--accent); }

/* Wallet */
.balance { background: linear-gradient(135deg, #2b2614, #1c1a10); }
.balance.earn { background: linear-gradient(135deg, #15301f, #10221a); }
.pack { background: var(--surface); color: var(--text); }
.pack .price { background: var(--accent); color: #141418; }
.pack .ptag { background: var(--accent-2); color: #141418; }
.preview-wrap { background: #000; }

/* ---------- Tab bar with a sliding notch (reference: curved dip that moves to the active tab) ---------- */
@property --i { syntax: '<number>'; inherits: true; initial-value: 0; }
.tabbar { --i: 0; --x: calc(8px + (100% - 16px) / 4 * var(--i) + (100% - 16px) / 8); overflow: visible; padding: 10px 8px 8px; border-radius: 26px; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; transition: --i .6s cubic-bezier(.68, -0.35, .27, 1.35); }
/* the bar itself, with a round bite cut out above the active tab */
.tabbar::before { content: ''; position: absolute; inset: 0; border-radius: 26px; background: #1c1d22; box-shadow: var(--shadow-lg); z-index: -1;
  -webkit-mask: radial-gradient(circle at var(--x) 0, transparent 36px, #000 37px); mask: radial-gradient(circle at var(--x) 0, transparent 36px, #000 37px); }
.tabbar .indicator { position: absolute; top: -26px; left: calc(var(--x) - 28px); width: 56px; height: 56px; border-radius: 50%; background: var(--accent); z-index: 0; box-shadow: 0 10px 24px rgba(185, 166, 247, .4); }
.tabbar button { z-index: 1; padding: 4px 4px 2px; background: transparent !important; font-size: 0; }
.tabbar button span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; transition: transform .6s cubic-bezier(.68, -0.35, .27, 1.35); filter: grayscale(.4) opacity(.75); }
.tabbar button.active span { background: none !important; box-shadow: none !important; transform: translateY(-28px) scale(1.15) !important; filter: none; }
.tabbar button.active { font-size: 11px; color: var(--text); animation: labelIn .5s var(--ease); }
@keyframes labelIn { from { opacity: 0; } }
.tabbar .badge { top: 2px; }

/* =====================================================================
   JODI BRAND (logo file): Dark Plum #321937, Raspberry Red #B01E3E, White; typeface Sora.
   Overrides the colours above.
   ===================================================================== */
:root {
  --plum-brand: #321937; --rasp: #b01e3e;
  --bg: #3a1d42; --surface: #4f2b59; --surface-2: #5c3467; --line: #6d4479;
  --text: #ffffff; --muted: #dccbe1; --accent: #b01e3e; --accent-2: #e04a6a; --plum: #b01e3e;
  --success: #3ddc84; --danger: #ff4d6d;
}
html, body, button, input, select, textarea { font-family: 'Sora', system-ui, -apple-system, sans-serif; }
body { background: radial-gradient(120% 60% at 100% 0%, rgba(214, 52, 92, .5) 0%, transparent 55%), radial-gradient(120% 70% at 0% 100%, rgba(110, 52, 120, .75) 0%, transparent 60%), #3a1d42; background-attachment: fixed; }

.btn.primary { background: var(--rasp); color: #fff; box-shadow: 0 10px 30px rgba(176, 30, 62, .4); }
.tab.active, .chip.active { background: #fff; color: var(--plum-brand); }
.count { background: rgba(61, 220, 132, .15); color: var(--success); }
.home-title span { color: #ff6b8a; }
.link { color: #ff8fa6; }
.toast { background: #fff; color: var(--plum-brand); }

/* Logo (SVG recreation of the Jodi mark) + animation: lines draw in, heads pop, then a heartbeat */
.jodi-logo { display: block; width: 100%; height: 100%; overflow: visible; }
.jodi-logo .lg-head, .jodi-logo .lg-tail { fill: currentColor; }
.jodi-logo .lg-tail { stroke: currentColor; stroke-width: 6; stroke-linejoin: round; }
.jodi-logo .lg-line { fill: none; stroke: currentColor; stroke-width: 37.2; stroke-linecap: round; stroke-linejoin: round; animation: lgDraw 1.1s cubic-bezier(.65, 0, .35, 1) forwards; }
.jodi-logo .lg-line.b { animation-delay: .25s; }
.jodi-logo .lg-head { transform-box: fill-box; transform-origin: center; animation: lgPop .6s cubic-bezier(.34, 1.8, .64, 1) both; }
.jodi-logo .lg-head.l { animation-delay: .9s; } .jodi-logo .lg-head.r { animation-delay: 1.05s; }
.jodi-logo .lg-tail { opacity: 0; animation: lgFade .4s ease 1.1s forwards; }
.jodi-logo { animation: lgBeat 2.4s ease-in-out 1.6s infinite; transform-origin: 50% 60%; }
@keyframes lgDraw { to { stroke-dashoffset: 0; } }
@keyframes lgPop { from { transform: scale(0); } }
@keyframes lgFade { to { opacity: 1; } }
@keyframes lgBeat { 0%, 40%, 100% { transform: scale(1); } 10% { transform: scale(1.09); } 20% { transform: scale(.98); } 30% { transform: scale(1.06); } }
/* heads gently lean toward each other while the heart beats */
.jodi-logo .lg-head.l { animation: lgPop .6s cubic-bezier(.34, 1.8, .64, 1) .9s both, lgLeanL 2.4s ease-in-out 1.6s infinite; }
.jodi-logo .lg-head.r { animation: lgPop .6s cubic-bezier(.34, 1.8, .64, 1) 1.05s both, lgLeanR 2.4s ease-in-out 1.6s infinite; }
@keyframes lgLeanL { 0%, 40%, 100% { transform: translate(0, 0); } 15% { transform: translate(6px, -4px); } }
@keyframes lgLeanR { 0%, 40%, 100% { transform: translate(0, 0); } 15% { transform: translate(-6px, -4px); } }

/* Welcome screen in brand colours */
.screen.welcome { background: linear-gradient(115deg, #231427 0%, #321937 40%, #6a1f3a 75%, #b01e3e 100%); }
.w-ring { background: rgba(255, 255, 255, .05); }
.w-ring.r2 { background: rgba(255, 255, 255, .07); }
.w-core { inset: 34%; border-radius: 32%; background: transparent; color: #fff; box-shadow: none; padding: 2%; }
.w-text h1 { font-size: 44px; font-weight: 700; }
.w-text .tagline { color: #fff; opacity: .85; font-size: 12px; letter-spacing: .25em; text-transform: uppercase; }
.w-text p { color: rgba(255, 255, 255, .7); }
.w-enter { color: var(--plum-brand); }
.logo-mark { background: linear-gradient(135deg, var(--plum-brand), var(--rasp)); color: #fff; padding: 14px; box-shadow: 0 12px 30px rgba(176, 30, 62, .4); }

/* Home & cards in brand colours */
.random-card { background: linear-gradient(115deg, #321937, #b01e3e); color: #fff; }
.random-card::before { background: rgba(255, 255, 255, .08); }
.random-card .muted, .random-card .rate-line { color: rgba(255, 255, 255, .8); }
.random-card .btn { background: #fff; color: var(--plum-brand); }
.person { background: var(--rasp); color: #fff; }
.grid .person:nth-child(4n+2), .grid .person:nth-child(4n+3) { background: #fff; color: var(--plum-brand); }
.grid .person:nth-child(5n) { background: #4a2a52; color: #fff; }
.person strong { color: inherit; }
.person .meta { color: inherit; opacity: .7; }
.person .avatar, .person .pic .avatar { background: rgba(28, 15, 32, .85); color: #fff; }
.grid .person:nth-child(4n+2) .avatar, .grid .person:nth-child(4n+3) .avatar { background: linear-gradient(135deg, var(--plum-brand), var(--rasp)); }
.person .pill { background: rgba(0, 0, 0, .35); color: #fff; }
.grid .person:nth-child(4n+2) .pill, .grid .person:nth-child(4n+3) .pill { background: var(--plum-brand); }
.person .acts button { background: var(--plum-brand); color: #fff; }
.person .acts button:first-child { background: #fff; }
.grid .person:nth-child(4n+2) .acts button:first-child, .grid .person:nth-child(4n+3) .acts button:first-child { background: var(--rasp); }
.invite { color: var(--plum-brand); }
.story .avatar { box-shadow: 0 0 0 2.5px var(--rasp); }

/* Tab bar, sheets, call */
.tabbar::before { background: #4a2853; }
.tabbar .indicator { background: var(--rasp); box-shadow: 0 10px 24px rgba(176, 30, 62, .5); }
.sheet { background: #44234d; }
.ps-cover { background: radial-gradient(circle at 75% 30%, rgba(255, 255, 255, .25) 0, transparent 40%), linear-gradient(115deg, #321937, #b01e3e); }
#personSheet .avatar.huge { border-color: #44234d; }
.ring { background: radial-gradient(circle at 50% 32%, rgba(176, 30, 62, .35) 0%, transparent 55%), transparent; }
.round.success { background: var(--success); color: #10301f; }
.round.next, .call-controls .round.next { background: var(--rasp); color: #fff; }
.call-controls .round.off { background: #fff; color: var(--plum-brand); }
.stage { background: #120814; }
.pack .price { background: var(--rasp); color: #fff; }
.pack .ptag { background: #fff; color: var(--rasp); }
.w-core { inset: 30%; }
.w-text .tagline { font-size: 11px; letter-spacing: .16em; white-space: nowrap; }

/* Mask colour swatches */
.swatches { display: flex; gap: 12px; align-items: center; padding: 2px 4px; }
.swatches::before { content: 'Mask colour'; font-size: 12px; font-weight: 600; color: var(--muted); margin-right: 2px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); background: var(--sw); cursor: pointer; padding: 0; transition: transform .2s var(--ease); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 3px var(--rasp); transform: scale(1.12); }
.swatch:active { transform: scale(.9); }

/* Splash screen: animated Jodi logo on opening */
.splash { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: #fff; background: #321937; transition: opacity .35s ease; }
.splash > * { transition: opacity .45s ease, transform .45s ease; }
.splash.content-out > * { opacity: 0 !important; transform: scale(.92); }
.splash.out { opacity: 0; pointer-events: none; }
.splash-logo { width: 132px; height: 132px; }
.splash-name { font-size: 40px; font-weight: 700; letter-spacing: -.02em; animation: popIn .6s var(--ease) 1.2s both; }
.splash-tag { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; animation: popIn .6s var(--ease) 1.45s both; }

/* ---------- Chat ---------- */
.screen.chat { padding: 0; gap: 0; height: 100vh; height: 100dvh; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 10px; background: rgba(36, 20, 42, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.chat-head .info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-head .info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .avatar { width: 40px; height: 40px; font-size: 15px; }
.icon-plain { width: 40px; height: 40px; flex: none; border: none; border-radius: 50%; background: var(--surface-2); color: var(--text); font-size: 18px; cursor: pointer; display: grid; place-items: center; padding: 0; transition: transform .15s; }
.icon-plain:active { transform: scale(.9); }
#chatEph.on { background: var(--rasp); }
.eph-note { margin: 0; padding: 8px 14px; font-size: 12px; text-align: center; background: rgba(176, 30, 62, .18); color: #ffb3c2; }
.msgs { list-style: none; margin: 0; padding: 14px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.msgs .sys { align-self: center; color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.msg { display: flex; flex-direction: column; max-width: 78%; position: relative; animation: popIn .25s var(--ease); }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.them { align-self: flex-start; }
.bubble { padding: 9px 12px 6px; border-radius: 18px; background: var(--surface-2); line-height: 1.35; font-size: 15px; word-wrap: break-word; overflow-wrap: anywhere; }
.msg.me .bubble { background: var(--rasp); border-bottom-right-radius: 6px; }
.msg.them .bubble { border-bottom-left-radius: 6px; }
.msg.gone .bubble { background: transparent; border: 1px dashed var(--line); color: var(--muted); font-style: italic; }
.bubble img { display: block; max-width: 220px; max-height: 280px; border-radius: 12px; margin-bottom: 4px; cursor: zoom-in; }
.bubble audio { display: block; width: 220px; height: 36px; margin-bottom: 2px; }
.bubble .meta { display: block; font-size: 10.5px; opacity: .75; text-align: right; margin-top: 3px; }
.tick { font-weight: 700; letter-spacing: -2px; margin-left: 2px; }
.tick.read { color: #7cc7ff; }
.rx { font-size: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-top: -6px; z-index: 1; }
.msg-menu { position: absolute; bottom: 100%; display: flex; gap: 2px; background: #fff; border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow-lg); z-index: 3; animation: sheetUp .2s var(--ease); }
.msg.me .msg-menu { right: 0; } .msg.them .msg-menu { left: 0; }
.msg-menu button { border: none; background: none; font-size: 20px; cursor: pointer; padding: 2px 4px; }
.msg-menu .unsend { font-size: 12px; font-weight: 700; color: var(--rasp); font-family: inherit; }
.chat-input { display: flex; gap: 8px; align-items: center; padding: 10px 10px calc(10px + env(safe-area-inset-bottom)); background: rgba(36, 20, 42, .95); border-top: 1px solid var(--line); }
.chat-input input { flex: 1; border-radius: 999px; padding: 11px 16px; }
.chat-input .send { width: 44px; height: 44px; flex: none; border: none; border-radius: 50%; background: var(--rasp); color: #fff; font-size: 18px; cursor: pointer; }
.chat-input .mic.rec { background: var(--danger); animation: pulse 1s infinite; }
.chat-row { cursor: pointer; }
.chat-row .unread { color: var(--text); font-weight: 600; }
.unread-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--rasp); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; align-self: center; }

/* ---------- Call extras: icebreaker, reveal, gifts, panic, voice-first, vibe check ---------- */
.fx-bar { display: flex; gap: 8px; justify-content: center; }
.fx-pill { font: inherit; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s; }
.fx-pill:active { transform: scale(.94); }
.fx-pill.reveal { background: linear-gradient(115deg, #321937, #b01e3e); border: none; }
.fx-pill.reveal.waiting { animation: pulse 1.4s infinite; }
.panic-btn { position: absolute; top: 16px; left: 12px; z-index: 4; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(255, 77, 109, .9); font-size: 18px; cursor: pointer; box-shadow: 0 6px 16px rgba(255, 77, 109, .4); }
.ice-card { position: absolute; left: 50%; top: 90px; z-index: 4; width: min(320px, 80%); transform: translate(-50%, -20px) scale(.9); opacity: 0; pointer-events: none; background: #fff; color: var(--plum-brand); border-radius: 20px; padding: 12px 16px; text-align: center; box-shadow: var(--shadow-lg); transition: all .45s var(--ease); }
.ice-card.show { opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto; }
.ice-card small { color: var(--rasp); font-weight: 700; font-size: 11px; }
.ice-card p { margin: 4px 0 0; font-size: 17px; font-weight: 700; }
.reveal-banner { position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 4; background: linear-gradient(115deg, #321937, #b01e3e); border-radius: 16px; padding: 12px 14px; font-size: 14px; text-align: center; animation: sheetUp .4s var(--ease); }
.vf-note { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: rgba(0, 0, 0, .55); padding: 12px 18px; border-radius: 999px; font-size: 14px; white-space: nowrap; }
.vf-note.mine { top: auto; bottom: 70px; font-size: 12px; }
.curtain { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.curtain i { position: absolute; top: 0; bottom: 0; width: 50%; background: linear-gradient(115deg, #321937, #b01e3e); }
.curtain i:first-child { left: 0; } .curtain i:last-of-type { right: 0; }
.curtain span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 80px; }
.curtain.open i:first-child { animation: curtainL 2.2s var(--ease) forwards; }
.curtain.open i:last-of-type { animation: curtainR 2.2s var(--ease) forwards; }
.curtain.open span { animation: curtainHeart 2.2s ease forwards; }
@keyframes curtainL { 0% { transform: translateX(-100%); } 35%, 50% { transform: none; } 100% { transform: translateX(-100%); } }
@keyframes curtainR { 0% { transform: translateX(100%); } 35%, 50% { transform: none; } 100% { transform: translateX(100%); } }
@keyframes curtainHeart { 0%, 25% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 45% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } 60% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1.4); } }
.gift-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.gift-big { font-size: 110px; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .5)); }
.gift-fx.play .gift-big { animation: giftPop 3s var(--ease) forwards; }
.gift-text { background: rgba(0, 0, 0, .55); padding: 8px 16px; border-radius: 999px; font-weight: 700; margin-top: 6px; }
.gift-fx.play .gift-text { animation: popIn .5s var(--ease) .3s both; }
@keyframes giftPop { 0% { transform: scale(0) rotate(-20deg); } 20% { transform: scale(1.25) rotate(8deg); } 35% { transform: scale(1) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }
.gift-rain { position: absolute; top: -40px; animation: giftRain 2.6s ease-in forwards; }
@keyframes giftRain { to { transform: translateY(110vh) rotate(200deg); } }
.gift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; margin: 6px 0 4px; }
.gift-item { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s; }
.gift-item:active { transform: scale(.94); }
.gift-item .g-emoji { font-size: 40px; }
.gift-item small { color: var(--gold); font-weight: 700; }
.vibe-row { display: flex; gap: 10px; width: 100%; margin: 8px 0; }
.vibe { flex: 1; font: inherit; font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 4px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s; }
.vibe span { font-size: 34px; }
.vibe:active { transform: scale(.92); }
.sheet.match { background: linear-gradient(160deg, #321937, #b01e3e); }
.match-hearts { font-size: 80px; animation: lgBeat 1.4s ease-in-out infinite; }

/* ---------- Batch 3: streak, spotlight, compatibility, interests, gold, mask shop ---------- */
.home-pills { display: flex; gap: 8px; align-items: center; margin-top: -8px; }
.streak-pill { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(255, 140, 0, .14); color: #ffb35c; }
.boost-pill { font: inherit; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); background: transparent; color: var(--text); cursor: pointer; }
.boost-pill:disabled { background: rgba(176, 30, 62, .3); border-color: transparent; opacity: 1; }
.person { position: relative; }
.person .compat { position: absolute; top: 12px; right: 12px; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--plum-brand); }
.ps-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 20px; }
.ps-tags .tag { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text); }
.ps-tags .tag.same { background: rgba(176, 30, 62, .35); }
.ps-tags .compat-tag { background: #fff; color: var(--plum-brand); font-weight: 700; }
.gold-card { background: linear-gradient(115deg, #3a2a0c, #6b4e12); border: 1px solid rgba(245, 200, 66, .35); }
.gold-card h3 { color: #f5c842; }
.gold-card .small { color: rgba(255, 255, 255, .8); margin: 4px 0 0; }
.gold-card .btn.primary { background: #f5c842; color: #3a2a0c; flex: none; box-shadow: none; }
.gold-card.active { box-shadow: 0 0 0 2px #f5c842; }
.mini-select { width: auto; padding: 8px 12px; border-radius: 999px; font-size: 13px; }
.swatches { flex-wrap: wrap; row-gap: 10px; }
.swatch { background: var(--sw); }
.swatch.locked { position: relative; opacity: .55; }
.swatch.locked::after { content: '🔒'; position: absolute; right: -6px; bottom: -6px; font-size: 11px; }
.shop-label { font-size: 14px; margin-left: 4px; }

/* ---------- Safe view (AI nudity check on the other person's video) ---------- */
#remote { transition: filter .25s; }
#remote.safe-hidden { filter: blur(48px) brightness(.7); transform: scale(1.1); }
.safe-checking { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; background: rgba(0, 0, 0, .55); padding: 10px 16px; border-radius: 999px; font-size: 13px; white-space: nowrap; }
.safe-warn { position: absolute; inset: auto 14px 14px; z-index: 6; background: rgba(24, 12, 28, .96); border: 1px solid rgba(255, 77, 109, .5); border-radius: 22px; padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; text-align: center; animation: sheetUp .35s var(--ease); }
.safe-warn .safe-icon { font-size: 36px; }
.safe-warn p { margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.safe-chip { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 4; font: inherit; font-size: 12px; font-weight: 600; border: none; border-radius: 999px; padding: 8px 14px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }

/* ---------- Plans, offers, free coins, demo ad ---------- */
.offer-card { position: relative; background: linear-gradient(115deg, #b01e3e, #ff6b5a); border: none; text-align: center; align-items: center; }
.offer-card h3 { font-size: 20px; }
.offer-card .small { margin: 0; opacity: .85; }
.offer-card .btn.primary { background: #fff; color: var(--rasp); }
.offer-card .ptag { position: absolute; top: -10px; background: #fff; color: var(--rasp); font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.plan { font: inherit; position: relative; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px 12px 12px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s; }
.plan:active { transform: scale(.96); }
.plan b { font-size: 15px; }
.plan .price { color: #f5c842; font-weight: 700; font-size: 14px; }
.plan small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.plan.hot { border-color: var(--rasp); }
.plan.current { background: linear-gradient(135deg, #3a2a0c, #6b4e12); border-color: #f5c842; }
.plan .ptag { position: absolute; top: -9px; left: 12px; font-size: 10px; background: var(--rasp); color: #fff; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.free-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.free-item { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); cursor: pointer; text-align: center; }
.free-item span { font-size: 26px; }
.free-item b { font-size: 12px; }
.free-item small { font-size: 10.5px; color: var(--muted); }
.free-item:disabled { opacity: .5; }
.ad-overlay { background: rgba(0, 0, 0, .85); }
.ad-box { width: min(360px, 100%); background: linear-gradient(160deg, #10243a, #1d4a5a); border-radius: 26px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; gap: 10px; position: relative; animation: sheetUp .4s var(--ease); }
.ad-label { position: absolute; top: 12px; left: 14px; font-size: 10px; background: rgba(255, 255, 255, .2); padding: 2px 8px; border-radius: 999px; }
.ad-art { font-size: 80px; animation: lgBeat 2s ease-in-out infinite; }
.ad-box p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; }
.ad-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.ad-bar i { display: block; height: 100%; width: 0; background: #f5c842; transition: width 1s linear; }

/* ---------- Random options, call time limit ---------- */
.random-opts { display: flex; gap: 8px; margin-top: -8px; flex-wrap: wrap; }
.opt-chip { font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; width: auto; }
.opt-chip.on { background: #fff; color: var(--plum-brand); border-color: #fff; }
select.opt-chip { appearance: none; -webkit-appearance: none; }
.limit-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 4px 6px 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, .45); }
.limit-pill .extend { font: inherit; font-size: 11px; font-weight: 700; border: none; border-radius: 999px; padding: 4px 10px; background: var(--rasp); color: #fff; cursor: pointer; }

/* ---------- Hosts, admirers, super like, leaderboard ---------- */
.admirers-card { font: inherit; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; border: 1px solid rgba(176, 30, 62, .5); background: linear-gradient(115deg, rgba(50, 25, 55, .9), rgba(176, 30, 62, .5)); color: #fff; cursor: pointer; font-size: 14px; margin-top: -6px; }
.admirers-card b { font-size: 17px; }
.admirers-card i { margin-left: auto; font-style: normal; font-size: 22px; opacity: .7; }
.host-card { border: 1px solid rgba(176, 30, 62, .4); }
.rate-row { flex-direction: column; color: var(--text); font-size: 13px; }
.rate-row input { padding: 0; accent-color: var(--rasp); }
.toggle { position: relative; width: 50px; height: 28px; flex: none; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); transition: .25s; }
.toggle span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: .25s; }
.toggle input:checked + span { background: var(--rasp); }
.toggle input:checked + span::after { transform: translateX(22px); }
.super-btn { background: linear-gradient(115deg, #f5c842, #ff9f43); color: #3a2a0c; margin: 0 20px; width: auto; }
.adm-list li.locked .info strong { filter: blur(0); }
.avatar.blurred { filter: blur(5px); background: var(--rasp); }
.btn.mini { padding: 6px 14px; font-size: 12px; flex: none; }
.leaderboard .rank { width: 28px; text-align: center; font-size: 18px; flex: none; }
#requests li.super { box-shadow: 0 0 0 2px #f5c842; }

/* ---------- Gifts (festival / premium), frames, sponsor, meetups ---------- */
.gift-grid { grid-template-columns: repeat(3, 1fr); max-height: 52vh; overflow-y: auto; }
.gift-item { position: relative; }
.gift-item .g-emoji { font-size: 34px; }
.gift-item b { font-size: 12px; }
.gift-item .g-tag { position: absolute; top: 4px; right: 4px; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--rasp); }
.gift-item.premium { border-color: #f5c842; background: linear-gradient(160deg, #3a2a0c, #44234d); }
.gift-item.premium .g-tag { background: #f5c842; color: #3a2a0c; }
.gift-item.festival { border-color: #ff9933; }
.spark { position: absolute; font-size: 20px; animation: spark 1.4s ease-out forwards; opacity: 0; }
@keyframes spark { 0% { opacity: 1; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); } }
.avatar.frame-gold { box-shadow: 0 0 0 3px #f5c842, 0 0 14px rgba(245, 200, 66, .7) !important; }
.avatar.frame-fire { box-shadow: 0 0 0 3px #ff6a00, 0 0 18px rgba(255, 90, 0, .8) !important; animation: fireGlow 1.6s ease-in-out infinite; }
.avatar.frame-neon { box-shadow: 0 0 0 3px #4df3ff, 0 0 16px rgba(77, 243, 255, .8) !important; }
.avatar.frame-rose { box-shadow: 0 0 0 3px #ff8fab, 0 0 14px rgba(255, 143, 171, .7) !important; }
@keyframes fireGlow { 50% { box-shadow: 0 0 0 3px #ffb000, 0 0 26px rgba(255, 140, 0, .95); } }
.frames { display: flex; gap: 12px; overflow-x: auto; padding: 6px 4px 4px; }
.frame-opt { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: none; color: var(--text); cursor: pointer; padding: 4px; border-radius: 14px; flex: none; }
.frame-opt .avatar { width: 52px; height: 52px; }
.frame-opt small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.frame-opt.active { background: var(--surface-2); }
.person .pic .avatar[class*="frame-"] { border-radius: 22px; }
.sponsor-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border-radius: 18px; background: linear-gradient(115deg, #2a0f0f, #7a1d1d); border: 1px solid rgba(255, 120, 100, .35); margin-top: -6px; }
.sponsor-card small { width: 100%; font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .1em; }
.sponsor-card b { font-size: 14px; }
.sponsor-card span { flex: 1; font-size: 12px; opacity: .85; min-width: 60%; }
.sponsor-card .btn { background: #fff; color: #7a1d1d; }
.meetups .meetup { align-items: flex-start; }
.m-date { width: 48px; flex: none; text-align: center; border-radius: 12px; background: var(--rasp); padding: 6px 0; display: flex; flex-direction: column; }
.m-date b { font-size: 20px; line-height: 1; } .m-date small { font-size: 11px; text-transform: uppercase; }
.meetups .info span { display: block; }

.home-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 0; padding-bottom: 2px; }
.home-pills::-webkit-scrollbar { display: none; }
.home-pills > * { flex: none; white-space: nowrap; }
.sponsor-card, .admirers-card { margin-top: 0; }

/* ---------- Live rooms ---------- */
.live-pill { border-color: rgba(255, 77, 109, .6); color: #ff8fa6; }
.go-live { background: linear-gradient(115deg, #ff4d6d, #b01e3e); }
.live-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.live-card { font: inherit; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 34px 10px 14px; border-radius: 22px; border: 1px solid rgba(255, 77, 109, .4); background: linear-gradient(160deg, #3a1530, #44234d); color: var(--text); cursor: pointer; text-align: center; }
.live-card .avatar { width: 70px; height: 70px; font-size: 26px; box-shadow: 0 0 0 3px #ff4d6d; animation: liveRing 1.6s ease-in-out infinite; }
@keyframes liveRing { 50% { box-shadow: 0 0 0 6px rgba(255, 77, 109, .4); } }
.live-badge { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: #ff4d6d; color: #fff; white-space: nowrap; }
.live-card .live-badge { position: absolute; top: 10px; left: 10px; }
.screen.live-room { padding: 0; gap: 0; height: 100vh; height: 100dvh; }
.live-stage { position: relative; flex: 1; background: #000; overflow: hidden; }
#liveVideo, #liveSelf { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 14px; background: linear-gradient(rgba(0, 0, 0, .6), transparent); }
.live-top > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.live-top small { opacity: .8; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-host-note { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); z-index: 3; margin: 0; background: rgba(0, 0, 0, .5); padding: 6px 12px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.live-chat { position: absolute; left: 10px; bottom: 10px; z-index: 3; width: 70%; max-height: 38%; overflow-y: auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; mask-image: linear-gradient(transparent, #000 25%); -webkit-mask-image: linear-gradient(transparent, #000 25%); }
.live-chat li { background: rgba(0, 0, 0, .45); padding: 5px 10px; border-radius: 14px; font-size: 13px; align-self: flex-start; }
.live-chat li.sys { opacity: .75; font-style: italic; }
.live-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.live-gift-banner { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); background: linear-gradient(115deg, #321937, #b01e3e); padding: 10px 18px; border-radius: 999px; font-weight: 700; white-space: nowrap; animation: giftPop 3.4s var(--ease) forwards; }
.live-bottom { background: rgba(28, 15, 32, .95); }
.live-gifts { display: flex; gap: 8px; justify-content: space-around; padding: 10px 10px 0; }
.lg-gift { font: inherit; display: flex; flex-direction: column; align-items: center; border: none; background: var(--surface-2); color: var(--text); border-radius: 14px; padding: 6px 10px; cursor: pointer; }
.lg-gift span { font-size: 24px; } .lg-gift small { color: #f5c842; font-weight: 700; font-size: 11px; }
.lg-gift:active { transform: scale(.9); }

/* keep the last cards clear of the floating tab bar; hint that the pill row scrolls */
.screen[data-screen="online"], .screen[data-screen="friends"], .screen[data-screen="recents"], .screen[data-screen="settings"] { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.home-pills { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 30px; }
.rate-line { white-space: normal; }

/* ---------- Group games ---------- */
.games-pill { border-color: rgba(120, 200, 255, .5); color: #9fd8ff; }
.game-list { display: flex; flex-direction: column; gap: 10px; }
.game-card { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; padding: 14px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); animation: popIn .4s var(--ease) both; }
.game-card .g-icon { font-size: 34px; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, #321937, #b01e3e); }
.game-card .info { display: flex; flex-direction: column; gap: 2px; }
.game-card .g-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.game-card .g-acts .btn { flex: 1; }
.screen.game-room { padding: 0; gap: 0; height: 100vh; height: 100dvh; }
.game-players { display: flex; gap: 10px; overflow-x: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.gp { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; font-size: 11px; }
.gp .avatar { width: 42px; height: 42px; font-size: 15px; }
.gp b { font-size: 12px; color: #f5c842; }
.gp.turn .avatar { box-shadow: 0 0 0 3px #f5c842; animation: liveRing 1.4s infinite; }
.gp.me small { color: #ff8fa6; }
.game-area { padding: 14px; min-height: 230px; }
.g-lobby, .g-q { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: popIn .35s var(--ease); }
.g-big { font-size: 64px; animation: lgBeat 2s ease-in-out infinite; }
.g-q h3 { font-size: 18px; line-height: 1.35; }
.g-timer { width: 100%; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.g-timer i { display: block; height: 100%; background: linear-gradient(90deg, #f5c842, #b01e3e); transition: width .2s linear; }
.g-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.g-opt { font: inherit; font-size: 14px; font-weight: 600; padding: 14px 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; transition: transform .15s, background .2s; }
.g-opt:active { transform: scale(.95); }
.g-opt.picked { background: var(--surface-2); border-color: #fff; }
.g-opt.right { background: #1f7a4a; border-color: #3ddc84; }
.g-opt.wrong { background: #7a1f2f; border-color: #ff4d6d; }
.g-opt.truth { background: linear-gradient(135deg, #2a3f7a, #4b6bff); font-size: 17px; }
.g-opt.dare { background: linear-gradient(135deg, #7a1f2f, #ff6a00); font-size: 17px; }
.g-emoji { font-size: 56px; letter-spacing: 6px; }
.g-hint { font-family: monospace; letter-spacing: 3px; font-size: 16px; margin: 0; }
.td-card { width: 100%; padding: 16px; border-radius: 20px; background: linear-gradient(135deg, #2a3f7a, #4b6bff); animation: sheetUp .4s var(--ease); }
.td-card.dare { background: linear-gradient(135deg, #7a1f2f, #ff6a00); }
.td-card p { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.game-chat { list-style: none; margin: 0; padding: 8px 12px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); }
.game-chat li { font-size: 13px; padding: 5px 10px; border-radius: 12px; background: var(--surface); align-self: flex-start; max-width: 90%; }
.game-chat li.me { align-self: flex-end; background: var(--rasp); }
.game-chat li.sys { align-self: center; background: transparent; color: var(--muted); font-style: italic; }

/* =====================================================================
   REDESIGN v2 (simpler than FRND): 5 tabs, Online-now cards, Explore tiles,
   Connect bubbles + Random dock, Rooms tab, Recents status pills.
   ===================================================================== */
.app-top { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.me-btn { border: none; background: none; padding: 0; cursor: pointer; }
.me-btn .avatar { width: 40px; height: 40px; font-size: 15px; box-shadow: 0 0 0 2px var(--rasp); }
.app-top .streak-pill { padding: 6px 10px; }
.hello p { margin: 0 0 2px; font-size: 14px; }
.hello .home-title { margin: 0; }
.sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: -6px; }
.sec-head h3, .sec-title { font-size: 17px; margin: 0; }
.sec-title { margin-bottom: -6px; }

/* Online now: horizontal cards */
.h-cards { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
.h-cards::-webkit-scrollbar { display: none; }
.h-card { flex: none; width: 74%; max-width: 280px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 24px; background: linear-gradient(150deg, #3a1d44 0%, #4a2853 60%); border: 1px solid rgba(255, 255, 255, .08); box-shadow: var(--shadow); cursor: pointer; animation: popIn .45s var(--ease) both; }
.h-card.is-friend { border-color: rgba(176, 30, 62, .6); }
.hc-top { display: flex; gap: 12px; align-items: center; }
.hc-top .avatar { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); position: relative; }
.hc-top .avatar::after { content: ''; position: absolute; right: 2px; bottom: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--success); border: 2px solid #4a2853; }
.hc-info { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hc-info strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hc-tags .tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.hc-tags .tag.host { background: rgba(245, 200, 66, .18); color: #f5c842; }
.hc-call { font: inherit; font-weight: 700; padding: 12px; border: none; border-radius: 999px; background: linear-gradient(115deg, #b01e3e, #e0466a); color: #fff; cursor: pointer; transition: transform .15s; }
.hc-call:active { transform: scale(.96); }

/* Explore tiles */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { font: inherit; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 118px; padding: 14px; border: none; border-radius: 24px; color: #fff; text-align: left; cursor: pointer; box-shadow: var(--shadow); transition: transform .15s; animation: popIn .45s var(--ease) both; }
.tile:active { transform: scale(.96); }
.tile .t-emoji { font-size: 34px; margin-bottom: auto; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); }
.tile b { font-size: 15px; }
.tile small { font-size: 11.5px; opacity: .85; }
.tile::after { content: ''; position: absolute; width: 120px; height: 120px; right: -40px; top: -40px; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.t-video { background: linear-gradient(140deg, #b01e3e, #ff5d7a); }
.t-audio { background: linear-gradient(140deg, #321937, #7a3aa0); }
.t-live { background: linear-gradient(140deg, #ff4d6d, #ff9a3c); }
.t-games { background: linear-gradient(140deg, #2a3f9a, #4b8bff); }
.t-admire { background: linear-gradient(140deg, #6b1f5c, #c03f8e); }
.t-hosts { background: linear-gradient(140deg, #8a6212, #e0b23c); }
.t-meet { background: linear-gradient(140deg, #0f6b5c, #22c3a6); }
.t-boost { background: linear-gradient(140deg, #3a2a7a, #8b6bff); }
.tile:disabled { opacity: 1; }
.tiles .tile:nth-child(2) { animation-delay: .04s; } .tiles .tile:nth-child(3) { animation-delay: .08s; } .tiles .tile:nth-child(4) { animation-delay: .12s; }
.tiles .tile:nth-child(n+5) { animation-delay: .16s; }

/* Connect: floating bubbles over hearts + bottom dock */
.screen.connect { padding-bottom: 0; min-height: 100vh; }
.bubble-field { position: relative; flex: 1; min-height: 52vh; border-radius: 28px; overflow: hidden; background:
  radial-gradient(circle at 20% 25%, rgba(255, 77, 109, .25) 0, transparent 30%),
  radial-gradient(circle at 80% 70%, rgba(176, 30, 62, .35) 0, transparent 35%),
  linear-gradient(160deg, #3a1530, #44234d); border: 1px solid rgba(255, 255, 255, .06); }
.bubble-field::before { content: '♥  ♥    ♥   ♥  ♥     ♥    ♥  ♥   ♥'; position: absolute; inset: 0; font-size: 46px; line-height: 1.6; color: rgba(255, 255, 255, .04); word-spacing: 30px; white-space: pre-wrap; overflow: hidden; }
.bubble-p { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; border: none; background: none; color: #fff; cursor: pointer; font: inherit; animation: floaty 4s ease-in-out var(--d) infinite; }
.bubble-p .avatar { width: 64px; height: 64px; font-size: 22px; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 8px 20px rgba(0, 0, 0, .4); }
.bubble-p.spot .avatar { box-shadow: 0 0 0 3px #f5c842, 0 0 20px rgba(245, 200, 66, .6); }
.bubble-p .b-lang { margin-top: -10px; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #fff; color: var(--plum-brand); z-index: 1; }
.bubble-p small { font-size: 11px; font-weight: 600; text-shadow: 0 1px 4px #000; }
@keyframes floaty { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 8px)); } }
.b-empty { position: absolute; inset: 40% 0 auto; }
.connect-dock { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 0 calc(110px + env(safe-area-inset-bottom)); background: linear-gradient(transparent, var(--bg) 25%); }
.connect-dock .random-opts { justify-content: center; margin: 0; }
.dock-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dock-btn { font: inherit; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 12px 16px; border: none; border-radius: 22px; background: #fff; color: var(--plum-brand); cursor: pointer; box-shadow: var(--shadow-lg); transition: transform .15s; text-align: left; }
.dock-btn:active { transform: scale(.96); }
.dock-btn span { grid-row: span 2; font-size: 26px; }
.dock-btn b { font-size: 15px; }
.dock-btn small { font-size: 11px; color: var(--gold); font-weight: 700; }
.dock-btn.video { background: linear-gradient(115deg, #b01e3e, #e0466a); color: #fff; }
.dock-btn.video small { color: #ffe08a; }

/* Rooms tab */
.rooms-tiles .tile { min-height: 100px; }

/* Recents status pill */
.status-pill { font-size: 11px; font-weight: 700; padding: 6px 12px; border-radius: 999px; align-self: center; }
.status-pill.on { background: rgba(61, 220, 132, .15); color: var(--success); }
.status-pill.off { background: var(--surface-2); color: var(--muted); }

/* 5-tab bar */
.tabbar { grid-template-columns: repeat(5, 1fr); --x: calc(8px + (100% - 16px) / 5 * var(--i) + (100% - 16px) / 10); }
.tabbar button.active { font-size: 10px; }
.screen[data-screen="connect"], .screen[data-screen="lives"] { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
.screen[data-screen="connect"] { padding-bottom: 0; }
.live-grid .empty { grid-column: 1 / -1; }

/* ---------- Chat safety: blocked note, warning, capture shield ---------- */
.msgs .sys.safety { align-self: center; max-width: 88%; background: rgba(176, 30, 62, .18); border: 1px solid rgba(176, 30, 62, .45); color: #ffc2cf; font-size: 12.5px; padding: 8px 12px; border-radius: 14px; text-align: center; }
.warn-sheet { border: 1px solid rgba(255, 77, 109, .5); }
.warn-sheet .warn-icon { font-size: 48px; }
.warn-sheet p { margin: 0; font-size: 14px; line-height: 1.45; }
.msgs { background-repeat: repeat; }
.screen.chat .msgs, .screen.chat .bubble, .screen.chat .bubble img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.screen.chat .bubble img { pointer-events: none; }
.screen.chat.shielded .msgs, .screen.chat.shielded .chat-head .info { filter: blur(18px); }
.screen.chat.shielded::after { content: '🔒 Chat hidden'; position: fixed; inset: 0; display: grid; place-items: center; font-size: 18px; font-weight: 700; color: #fff; background: rgba(28, 15, 32, .6); z-index: 20; pointer-events: none; }

/* ---------- Registration v2: steps ---------- */
.auth-screen { gap: 14px; padding-top: calc(14px + env(safe-area-inset-top)); padding-bottom: 30px; }
.auth-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.auth-logo { width: 46px; height: 46px; padding: 8px; border-radius: 16px; background: linear-gradient(135deg, #321937, #b01e3e); color: #fff; box-shadow: 0 8px 20px rgba(176, 30, 62, .35); }
.auth-switch { display: flex; background: var(--surface); border-radius: 999px; padding: 4px; }
.auth-switch .tab { padding: 8px 16px; font-size: 14px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.steps { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.steps i { display: block; height: 100%; width: 25%; border-radius: 999px; background: linear-gradient(90deg, #ff6b8a, #b01e3e); transition: width .45s var(--ease); }
.step-label { margin: -6px 0 0; }
.step { display: flex; flex-direction: column; gap: 12px; animation: stepIn .4s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.step h1 { font-size: 28px; line-height: 1.15; margin: 4px 0 0; }
.step > .muted { margin: -6px 0 6px; }
.field-box { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s; color: var(--muted); font-size: 12px; font-weight: 600; }
.field-box:focus-within { border-color: var(--rasp); }
.field-box input { border: none; background: none; padding: 0; font-size: 17px; font-weight: 500; color: var(--text); box-shadow: none !important; }
.field-box .hint { font-weight: 500; color: var(--muted); }
.field-box.pass .eye { position: absolute; right: 10px; bottom: 8px; border: none; background: none; font-size: 18px; cursor: pointer; }
.q { font-size: 14px; font-weight: 700; margin-top: 4px; }
.gender-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.g-card { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: 20px; border: 2px solid var(--line); background: var(--surface); color: var(--text); font-weight: 700; cursor: pointer; transition: transform .15s, border-color .2s, background .2s; }
.g-card span { font-size: 34px; }
.g-card.active { border-color: var(--rasp); background: rgba(176, 30, 62, .2); transform: scale(1.03); }
.age-stepper { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); }
.age-stepper button { width: 46px; height: 46px; border-radius: 14px; border: none; background: var(--surface-2); color: var(--text); font-size: 24px; cursor: pointer; }
.age-stepper input { width: 80px; text-align: center; border: none; background: none; font-size: 26px; font-weight: 800; color: var(--text); padding: 0; box-shadow: none !important; }
.city-chips .chip { padding: 7px 12px; font-size: 13px; }
.privacy-step { align-items: stretch; }
.promise-art { font-size: 64px; text-align: center; animation: lgBeat 2s ease-in-out infinite; }
.privacy-step h1 { text-align: center; }
.promise { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.promise li { display: flex; flex-direction: column; padding: 12px 14px; border-radius: 16px; background: var(--surface); }
.promise li b { font-size: 14px; } .promise li span { font-size: 12.5px; color: var(--muted); }
.consent { flex-direction: row; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--text); font-weight: 500; padding: 4px 2px; }
.consent input { width: 22px; height: 22px; flex: none; accent-color: var(--rasp); margin: 0; }
.auth-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 8px; }
.auth-actions .btn { flex: 1; padding: 16px; font-size: 16px; }
.auth-actions .btn.primary { flex: 2; }
.login-step h1 { font-size: 30px; }

/* =====================================================================
   Logo animation v2: the two people slide in and meet → sparkle burst →
   heartbeat with glowing ripple rings; "Jodi" rises letter by letter.
   ===================================================================== */
.jodi-logo .lg-left, .jodi-logo .lg-right { transform-box: fill-box; transform-origin: center; }
.jodi-logo .lg-left { animation: meetL .85s cubic-bezier(.2, 1.35, .35, 1) .1s both; }
.jodi-logo .lg-right { animation: meetR .85s cubic-bezier(.2, 1.35, .35, 1) .1s both; }
@keyframes meetL { from { transform: translateX(-150px) rotate(-14deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
@keyframes meetR { from { transform: translateX(150px) rotate(14deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
.jodi-logo .lg-line { animation: lgDraw .9s cubic-bezier(.65, 0, .35, 1) .1s forwards !important; }
.jodi-logo .lg-head.l, .jodi-logo .lg-head.r { animation: lgPop .55s cubic-bezier(.34, 1.8, .64, 1) .55s both !important; }
.jodi-logo { animation: meetBump .5s ease .95s both, lgBeat2 1.8s ease-in-out 1.6s infinite !important; transform-origin: 50% 60%; }
@keyframes meetBump { 0% { transform: scale(1); } 40% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes lgBeat2 { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(.99); } 34% { transform: scale(1.05); } }

.splash-logo { position: relative; }
.splash-logo .jodi-logo { position: relative; z-index: 2; }
.splash-glow { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 30, 62, .55) 0%, rgba(176, 30, 62, 0) 65%); animation: glowIn 1s ease .9s both, glowBeat 1.8s ease-in-out 1.6s infinite; pointer-events: none; }
@keyframes glowIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }
@keyframes glowBeat { 0%, 45%, 100% { transform: scale(1); opacity: .85; } 12% { transform: scale(1.12); opacity: 1; } }
.splash-rings { position: absolute; inset: 6%; z-index: 1; }
.splash-rings i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 120, 150, .7); opacity: 0; animation: ring 1.8s ease-out infinite; }
.splash-rings i:nth-child(1) { animation-delay: 1.1s; } .splash-rings i:nth-child(2) { animation-delay: 1.7s; } .splash-rings i:nth-child(3) { animation-delay: 2.3s; }
@keyframes ring { 0% { transform: scale(.7); opacity: .9; } 100% { transform: scale(2.3); opacity: 0; } }
.splash-sparks { position: absolute; left: 50%; top: 55%; z-index: 3; }
.splash-sparks b { position: absolute; left: -6px; top: -8px; font-size: 14px; color: #ffd6e0; opacity: 0; text-shadow: 0 0 8px #ff8fab; animation: spark2 .8s ease-out calc(.95s + var(--d)) both; }
@keyframes spark2 { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-95px) scale(1.1); } }
.splash-name { display: flex; gap: 1px; animation: none !important; }
.splash-name span { display: inline-block; animation: letterUp .55s cubic-bezier(.2, 1.4, .4, 1) calc(1.05s + var(--i) * .09s) both; }
@keyframes letterUp { from { opacity: 0; transform: translateY(26px) scale(.7); } to { opacity: 1; transform: none; } }
.splash-tag { animation: popIn .6s var(--ease) 1.5s both !important; }

/* =====================================================================
   Splash v4 "Among strangers" — driven entirely by app.js (canvas + Web Animations
   on one clock), so every CSS animation inside the splash is switched off here.
   ===================================================================== */
#splash { overflow: hidden; background: radial-gradient(120% 80% at 50% 42%, #3d1f44 0%, #321937 55%, #24112a 100%); }
#splash .jodi-logo, #splash .jodi-logo *, #splash .splash-glow, #splash .splash-rings i, #splash .splash-name, #splash .splash-name span, #splash .splash-tag, #splash .splash-story { animation: none !important; }
#splash .lg-head { opacity: 0; filter: drop-shadow(0 0 8px rgba(255, 143, 171, .8)); }
#splash .lg-line { stroke-dashoffset: 9999; }
#splash .splash-glow, #splash .splash-rings i, #splash .splash-name span, #splash .splash-tag, #splash .splash-story { opacity: 0; }
#splash .splash-sparks { display: none; }
.splash-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.splash-story { margin: 0; font-size: 15px; font-style: italic; color: #ffc2d0; min-height: 20px; }
.splash-name { display: flex; gap: 1px; }
.splash-name span { display: inline-block; }
#splash .lg-shine { opacity: 0; pointer-events: none; } #splash .lg-shine path { stroke-width: 37.2; stroke-linecap: round; stroke-linejoin: round; }
#splash .splash-story { margin-top: 8px; }

/* =====================================================================
   Bottom nav v3: glass plum bar, line icons that fill when active, a raspberry
   pill that glides to the active tab, and a raised Jodi-heart "Connect" button.
   ===================================================================== */
.navbar { position: fixed; z-index: 5; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: calc(100% - 24px); max-width: 460px; height: 66px; padding: 0 6px;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch; border-radius: 24px;
  --nav-bg: linear-gradient(180deg, rgba(92, 50, 102, .97), rgba(70, 36, 80, .98)); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .08); box-shadow: 0 18px 40px rgba(10, 2, 12, .55), inset 0 1px 0 rgba(255, 255, 255, .07); animation: navIn .55s cubic-bezier(.2, .9, .3, 1.2); }
.navbar[hidden] { display: none; }
@keyframes navIn { from { opacity: 0; transform: translate(-50%, 30px); } }
.nav-pill { position: absolute; top: 9px; left: 0; width: 56px; height: 48px; border-radius: 16px; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(176, 30, 62, .38), rgba(176, 30, 62, .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(176, 30, 62, .25);
  transition: transform .5s cubic-bezier(.5, 1.6, .4, .9), width .4s ease, opacity .25s ease; }
.nb { position: relative; z-index: 1; font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: rgba(255, 255, 255, .5);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; -webkit-tap-highlight-color: transparent; transition: color .3s ease; }
.nb .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.nb .ic .fl { fill: currentColor; fill-opacity: 0; transition: fill-opacity .3s ease; }
.nb .ic .dots { stroke-width: 2.6; }
.nb .lb { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; transition: opacity .3s ease; }
.nb.active { color: #fff; }
.nb.active .ic { transform: translateY(-1px) scale(1.08); }
.nb.active .ic .fl { fill-opacity: .22; }
.nb.active .ic .dots { stroke: #fff; }
.nb.pop .ic { animation: nbPop .45s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes nbPop { 0% { transform: scale(.75); } 60% { transform: scale(1.18); } 100% { transform: translateY(-1px) scale(1.08); } }
.nb:active .ic { transform: scale(.88); }
/* raised centre button */
.nb-center { justify-content: flex-end; padding-bottom: 13px; }
.nc-btn { position: absolute; top: -22px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, #e0436a 0%, #b01e3e 55%, #861530 100%); border: 4px solid #4b2855;
  box-shadow: 0 10px 24px rgba(176, 30, 62, .55), inset 0 2px 0 rgba(255, 255, 255, .25); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1); }
.nc-btn svg { width: 28px; height: 28px; overflow: visible; }
.nc-btn svg circle { fill: #fff; }
.nc-btn svg path { fill: none; stroke: #fff; stroke-width: 37.2; stroke-linecap: round; stroke-linejoin: round; }
.nc-halo { position: absolute; top: -22px; left: 50%; width: 58px; height: 58px; margin-left: -29px; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 0 rgba(224, 67, 106, .5); animation: ncHalo 2.4s ease-out infinite; }
@keyframes ncHalo { 0% { box-shadow: 0 0 0 0 rgba(224, 67, 106, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(224, 67, 106, 0); } }
.nb-center .lb { color: rgba(255, 255, 255, .5); }
.nb-center.active .lb { color: #fff; }
.nb-center.active .nc-btn { transform: translateY(-3px) scale(1.06); }
.nb-center.active .nc-btn svg { animation: ncBeat 1.6s ease-in-out infinite; }
.nb-center:active .nc-btn { transform: scale(.92); }
@keyframes ncBeat { 0%, 45%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 26% { transform: scale(.98); } 36% { transform: scale(1.06); } }
.navbar .badge { top: 8px; right: calc(50% - 17px); width: 10px; height: 10px; background: #ff4d6d; border: 2px solid #4b2855; box-shadow: 0 0 8px rgba(255, 77, 109, .8); }
@media (prefers-reduced-motion: reduce) { .nc-halo, .nb-center.active .nc-btn svg { animation: none; } }
/* scrim under the floating nav: page content fades out instead of showing below the bar */
.navbar::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: 50%; width: 100vw; transform: translateX(-50%);
  top: -34px; bottom: calc(-12px - env(safe-area-inset-bottom) - 40px);
  background: linear-gradient(180deg, rgba(58, 29, 66, 0) 0%, rgba(58, 29, 66, .88) 38%, #3a1d42 62%); }
/* lighter plum theme: lift the remaining near-black cards */
.card { background: rgba(92, 52, 103, .62); border-color: rgba(255, 255, 255, .1); }
.balance { background: linear-gradient(135deg, #7a3a5e, #5a2a63); }
.balance.earn { background: linear-gradient(135deg, #2f6b55, #24524a); }

/* =====================================================================
   🌅 Sunrise theme (default): warm sky gradient — coral at the top melting
   into raspberry and plum — with frosted white glass cards. Plum night = the
   theme above (html[data-theme="plum"]).
   ===================================================================== */
html.glass { --bg: #c23a6e; --surface: rgba(255, 255, 255, .18); --surface-2: rgba(255, 255, 255, .26); --line: rgba(255, 255, 255, .34); --muted: #fff0ea; }
html[data-theme="sunrise"] body { background:
  radial-gradient(70% 38% at 50% -6%, rgba(255, 224, 160, .75) 0%, rgba(255, 190, 130, 0) 70%),
  linear-gradient(180deg, #ff9466 0%, #f4607a 30%, #cf3f72 58%, #8e2f6c 82%, #6b2862 100%) fixed; background-attachment: fixed; }
html.glass .card { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3); box-shadow: 0 10px 30px rgba(110, 30, 70, .18); }
html.glass .balance { background: linear-gradient(135deg, rgba(255, 255, 255, .32), rgba(255, 255, 255, .12)); }
html.glass .balance.earn { background: linear-gradient(135deg, rgba(60, 200, 150, .35), rgba(255, 255, 255, .1)); }
html.glass .home-title span, html.glass .link { color: #fff1b8; }
html.glass .btn.primary { background: linear-gradient(135deg, #b01e3e, #7d1747); box-shadow: 0 10px 26px rgba(110, 20, 50, .35); }
html.glass .chip.active, html.glass .tab.active { background: #fff; color: #b01e3e; }
html.glass input, html.glass textarea, html.glass select { color: #fff; }
html.glass input::placeholder, html.glass textarea::placeholder { color: rgba(255, 255, 255, .75); }
html.glass .navbar::after { background: linear-gradient(180deg, rgba(107, 40, 98, 0) 0%, rgba(107, 40, 98, .88) 38%, #6b2862 62%); }
html.glass .coin-pill { background: rgba(255, 255, 255, .92); color: #9a5a00; box-shadow: 0 4px 14px rgba(120, 30, 60, .2); }
html.glass .streak-pill { background: rgba(255, 255, 255, .92); color: #d9480f; }
html.glass .count { background: #fff; color: #1f9d5c; }
html.glass .h-card { background: linear-gradient(150deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .12)); border-color: rgba(255, 255, 255, .35); box-shadow: 0 12px 28px rgba(110, 30, 70, .22); }
html.glass .person .pill, html.glass .h-card .pill { background: rgba(255, 255, 255, .22); }
html.glass .gold-card .btn { color: #fff; }
html.glass .chat-head { background: rgba(255, 255, 255, .16); border-bottom-color: rgba(255, 255, 255, .25); }
html.glass .chat-input { background: rgba(107, 40, 98, .92); }

/* more sky themes (same frosted-glass look, different skies) */
html.glass h1, html.glass h2, html.glass .home-title { text-shadow: 0 1px 10px rgba(110, 30, 70, .22); }
html[data-theme="sunset"] body { background: radial-gradient(80% 30% at 50% 62%, rgba(255, 200, 120, .35) 0%, transparent 70%), linear-gradient(180deg, #ff9f4a 0%, #ff6a5a 26%, #d93b6c 52%, #7b2b7c 80%, #3f1d58 100%) fixed; background-attachment: fixed; }
html[data-theme="blossom"] body { background: radial-gradient(70% 35% at 80% 0%, rgba(255, 255, 255, .45) 0%, transparent 70%), linear-gradient(180deg, #f39cc4 0%, #e27bb0 30%, #c4579d 60%, #8c3a88 100%) fixed; background-attachment: fixed; }
html[data-theme="twilight"] body { background: radial-gradient(60% 30% at 20% 0%, rgba(255, 255, 255, .3) 0%, transparent 70%), linear-gradient(180deg, #7f78ee 0%, #a865d8 32%, #d65c9e 64%, #9c2457 100%) fixed; background-attachment: fixed; }
html[data-theme="peach"] body { background: radial-gradient(70% 35% at 50% -5%, rgba(255, 240, 210, .7) 0%, transparent 70%), linear-gradient(180deg, #ffb58f 0%, #ff8f86 30%, #ec6a8c 60%, #a8457e 100%) fixed; background-attachment: fixed; }

/* =====================================================================
   ☀️ Light theme (reference: clean white dating-app kits) — white cards on a
   soft grey page, plum text, one raspberry accent, dark plum pill nav with a
   white "bubble" on the active tab.
   ===================================================================== */
html.lite { --bg: #f6f4f8; --surface: #ffffff; --surface-2: #f2eef5; --line: #ebe5ef; --text: #24152b; --muted: #8b7f93;
  --shadow: 0 6px 22px rgba(50, 25, 55, .07); --shadow-lg: 0 16px 40px rgba(50, 25, 55, .14); color-scheme: light; }
html.lite body { background: #f6f4f8; color: var(--text); }
html.lite .card, html.lite .h-card { background: #fff; border: 1px solid #efe9f2; box-shadow: var(--shadow); color: var(--text); -webkit-backdrop-filter: none; backdrop-filter: none; }
html.lite h1, html.lite h2, html.lite h3, html.lite strong { color: var(--text); }
html.lite .home-title span { color: var(--rasp); }
html.lite .link { color: var(--rasp); }
html.lite .muted, html.lite .small.muted { color: var(--muted); }
html.lite .btn { background: #f2eef5; color: var(--text); }
html.lite .btn.primary { background: var(--rasp); color: #fff; box-shadow: 0 8px 20px rgba(176, 30, 62, .28); }
html.lite .chip { background: #f2eef5; color: #5b4a63; border: 0; }
html.lite .chip.active, html.lite .tab.active { background: var(--rasp); color: #fff; }
html.lite .tabs { background: #efeaf2; }
html.lite .tab { color: #6b5b73; }
html.lite input, html.lite textarea, html.lite select { background: #f4f1f6; color: var(--text); border-color: #e6dfea; }
html.lite input::placeholder, html.lite textarea::placeholder { color: #a497ab; }
html.lite .coin-pill { background: #fff5dc; color: #9a6a00; box-shadow: none; }
html.lite .streak-pill { background: #fff0e6; color: #d9480f; }
html.lite .count { background: #e6f8ee; color: #1f9d5c; }
html.lite .h-card .pill, html.lite .person .pill { background: #f4eff6; color: #5b4a63; }
html.lite .balance { background: linear-gradient(135deg, #321937, #6a2552); color: #fff; }
html.lite .balance * { color: #fff; }
html.lite .balance.earn { background: linear-gradient(135deg, #1f8f62, #2bb37b); }
html.lite .gold-card .btn { color: #fff; }
/* nav: dark plum pill, icons only, white bubble on the active tab */
html.lite .navbar::after { background: linear-gradient(180deg, rgba(246, 244, 248, 0) 0%, rgba(246, 244, 248, .9) 40%, #f6f4f8 62%); }
/* chat */
html.lite .chat-head { background: #fff; border-bottom: 1px solid #efe9f2; }
html.lite .chat-input { background: #fff; border-top: 1px solid #efe9f2; }

/* the bar's own fill lives on ::before (z -1) so it paints above the scrim (::after, z -2) */
.navbar::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--nav-bg); pointer-events: none; }
.navbar::after { z-index: -2 !important; }
html.lite .find { background: #fff; border: 1px solid #ebe5ef; box-shadow: var(--shadow); }
html.lite .find input { background: none !important; border: 0; color: var(--text); }
html.lite .bubble-field { background: radial-gradient(70% 55% at 30% 20%, #ffffff 0%, transparent 70%), linear-gradient(160deg, #f3e9f5 0%, #f8e6ec 55%, #efe3f4 100%); border: 1px solid #efe6f2; }
html.lite .bubble-field .chip, html.lite .opt-chip { background: #fff; color: #5b4a63; border: 1px solid #ece4f0; }
html.lite .bubble-p small { color: var(--text); text-shadow: none; }
html.lite .msg.me .bubble, html.lite .msg.me .bubble * { color: #fff; }
html.lite .msg.them .bubble { background: #fff; color: var(--text); box-shadow: var(--shadow); }
html.lite .msgs .sys.safety { background: #fdecef; border-color: #f5c2cd; color: #8a1830; }
html.lite .plan { background: #fff; border-color: #efe9f2; box-shadow: var(--shadow); }
html.lite .plan.hot { border-color: var(--rasp); }
html.lite .plan .price { color: #b7860b; }
html.lite .plan.current { background: linear-gradient(135deg, #fff7e0, #ffe9b3); border-color: #e0b33a; }
html.lite .plan.current b, html.lite .plan.current small { color: #5a3d00; }

/* =====================================================================
   🍷 Wine & Blush (sample B): blush-white pages, white cards, raspberry buttons,
   and a deep wine header that curves under the Home greeting + stories.
   Built on the .lite rules above; the bottom nav is untouched.
   ===================================================================== */
html[data-theme="wine"] { --bg: #fbf6f8; --surface-2: #f8eef2; --line: #f1e4ea; --text: #2a1324; --muted: #94808c; --wine: #5e1530; }
html[data-theme="wine"] body { background: #fbf6f8; }
html[data-theme="wine"] .card, html[data-theme="wine"] .h-card { border-color: #f3e6ec; box-shadow: 0 8px 24px rgba(94, 21, 48, .08); }
html[data-theme="wine"] .btn.primary, html[data-theme="wine"] .h-card .btn, html[data-theme="wine"] .h-card button.call { background: linear-gradient(135deg, #c8264b, #9c1b3c); }
html[data-theme="wine"] .chip { background: #f8eef2; color: #7a3a52; }
html[data-theme="wine"] .chip.active, html[data-theme="wine"] .tab.active { background: linear-gradient(135deg, #c8264b, #9c1b3c); color: #fff; }
html[data-theme="wine"] .h-card .pill, html[data-theme="wine"] .person .pill { background: #fbeef2; color: #8a2a45; }
html[data-theme="wine"] .home-title span { color: #ff8fab; }
/* the wine header on Home */
html[data-theme="wine"] .screen[data-screen="online"] { position: relative; }
html[data-theme="wine"] .screen[data-screen="online"]::before { content: ''; position: absolute; left: 0; right: 0; top: -140px; height: calc(var(--wineH, 300px) + 140px); z-index: 0; pointer-events: none;
  background: radial-gradient(90% 70% at 85% 0%, rgba(214, 52, 92, .45) 0%, transparent 60%), linear-gradient(165deg, #7a1d3d 0%, #5e1530 55%, #461025 100%); border-radius: 0 0 32px 32px; box-shadow: 0 14px 30px rgba(94, 21, 48, .25); }
html[data-theme="wine"] .screen[data-screen="online"] > * { position: relative; z-index: 1; }
html[data-theme="wine"] .screen[data-screen="online"] .wine-on, html[data-theme="wine"] .screen[data-screen="online"] .wine-on * { color: #fff; }
html[data-theme="wine"] .screen[data-screen="online"] .wine-on .muted, html[data-theme="wine"] .screen[data-screen="online"] .wine-on small { color: rgba(255, 255, 255, .78); }
html[data-theme="wine"] .wine-on .coin-pill { background: rgba(255, 255, 255, .16); color: #ffd98a; }
html[data-theme="wine"] .wine-on .streak-pill { background: rgba(255, 255, 255, .16); color: #ffb38a; }
html[data-theme="wine"] .wine-on .story .avatar { box-shadow: 0 0 0 2.5px #5e1530, 0 0 0 5px #ff8fab; }
html[data-theme="wine"] .screen[data-screen="online"] .wine-on .home-title span { color: #ff9fb8; }
html[data-theme="wine"] .screen[data-screen="online"] .hello { padding-bottom: 6px; }
html[data-theme="wine"] .screen[data-screen="online"] .sec-head { margin-top: 26px; }
html[data-theme="wine"] .balance { background: radial-gradient(90% 80% at 85% 0%, rgba(214, 52, 92, .45) 0%, transparent 60%), linear-gradient(165deg, #7a1d3d, #5e1530 55%, #461025); }
html[data-theme="wine"] .screen[data-screen="online"] .h-cards { padding-bottom: 2px; }
/* Explore tiles in the wine & blush family */
html[data-theme="wine"] .tile.t-video { background: linear-gradient(135deg, #e2557a, #b01e3e); }
html[data-theme="wine"] .tile.t-audio { background: linear-gradient(135deg, #a3365d, #6e1a38); }
html[data-theme="wine"] .tile.t-live { background: linear-gradient(135deg, #ff9a86, #e8607a); }
html[data-theme="wine"] .tile.t-games { background: linear-gradient(135deg, #8e2f5a, #4f1230); }
html[data-theme="wine"] .tile.t-admire { background: linear-gradient(135deg, #f4a7bd, #d9668f); }
html[data-theme="wine"] .tile.t-hosts { background: linear-gradient(135deg, #e9b65c, #c4802c); }
html[data-theme="wine"] .tile.t-meet { background: linear-gradient(135deg, #d8739b, #a8436f); }
html[data-theme="wine"] .tile.t-boost { background: linear-gradient(135deg, #7a2d63, #3e1530); }
/* review fixes (lite themes): readable text on white */
html.lite #goldStatus, html.lite .gold-card .small { color: var(--muted); }
html.lite .plus { color: #1f9d5c; }
.dock-btn.audio small { color: #8a5a00 !important; }
html.lite .txn .avatar, html.lite .history .avatar { font-size: 18px; }
html.lite .sheet { background: #fff; color: var(--text); border-color: #efe9f2; }
html.lite .sheet .muted, html.lite .sheet small { color: var(--muted); }
/* review fix: popups never wider than the screen */
.overlay { grid-template-columns: minmax(0, 1fr); }
.sheet { max-width: 100%; }
html.lite .msg.gone .bubble, html.lite .msg.gone .bubble * { color: var(--muted); background: transparent; }
html.lite [data-screen="welcome"] h1, html.lite [data-screen="welcome"] h2 { color: #fff; }
html.lite .field-box input, html.lite .field-box select, html.lite .field-box textarea { background: transparent; border: 0; box-shadow: none; }
.m-date small { color: rgba(255, 255, 255, .9) !important; }

/* =====================================================================
   Call screen v2: the video fills the whole screen; controls float over it;
   mask & effects open from the 🎭 button; the small self-view can be dragged
   to any corner. Same in every theme.
   ===================================================================== */
.screen.call { position: fixed; inset: 0; height: 100vh; height: 100dvh; min-height: 0; padding: 0; background: #000 !important; z-index: 6; }
.screen.call .stage { position: absolute; inset: 0; border-radius: 0; background: #0d0710; }
.screen.call .call-panel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; gap: 10px; color: #fff;
  padding: 46px 14px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent 0%, rgba(10, 4, 14, .55) 35%, rgba(10, 4, 14, .85) 100%) !important; pointer-events: none; }
.screen.call .call-panel > * { pointer-events: auto; }
.fx-card { display: none; flex-direction: column; gap: 10px; padding: 12px; border-radius: 22px; background: rgba(24, 12, 28, .82); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .1); animation: popIn .25s var(--ease); }
.call-panel.fx-open .fx-card { display: flex; }
.fx-card .muted, .fx-card p { color: rgba(255, 255, 255, .78) !important; }
.screen.call .chip { background: rgba(255, 255, 255, .14) !important; color: #fff !important; border: 0 !important; }
.screen.call .chip.active { background: #fff !important; color: var(--plum-brand) !important; }
.screen.call .fx-pill { background: rgba(255, 255, 255, .16); color: #fff; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.screen.call .call-controls { gap: 12px; }
.screen.call .call-controls .round { width: 52px; height: 52px; background: rgba(255, 255, 255, .16) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: none; }
.screen.call .call-controls .round.off { background: #fff !important; color: var(--plum-brand) !important; }
.screen.call .call-controls .round.danger { background: #ef4565 !important; width: 60px; height: 60px; border: 0; }
.screen.call .call-controls .round.next { background: var(--rasp) !important; }
.screen.call #fxBtn.on { background: #fff !important; }
/* draggable self-view */
.screen.call .pip { z-index: 4; touch-action: none; cursor: grab; right: auto; left: calc(100% - 14px - min(30%, 150px)); top: 92px; width: 30%; max-width: 150px; transition: left .28s cubic-bezier(.3, 1.3, .5, 1), top .28s cubic-bezier(.3, 1.3, .5, 1); }
.screen.call .pip.dragging { transition: none; cursor: grabbing; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.screen.call .call-top, .screen.call .call-top strong, .screen.call .call-top span:not(.coin-pill) { color: #fff !important; text-shadow: 0 1px 6px rgba(0, 0, 0, .45); }
html.lite .tag.host { background: #fff5dc; color: #8a5a00; }
html.lite .status-pill.on { background: #e6f8ee; color: #17834b; }
.safe-warn h3 { color: #fff !important; }
/* live room sits on video: keep its text light in every theme */
[data-screen="live"] .live-top, [data-screen="live"] .live-top *, [data-screen="live"] .live-chat, [data-screen="live"] .live-chat *, [data-screen="live"] h1, [data-screen="live"] h2, [data-screen="live"] strong { color: #fff !important; }
[data-screen="live"] .live-chat li.sys { color: rgba(255, 255, 255, .85) !important; }
.balance.earn .muted, .balance.earn small, .balance.earn p { color: rgba(255, 255, 255, .88) !important; }
.balance .muted { color: rgba(255, 255, 255, .8) !important; }

/* =====================================================================
   Welcome v2: wine background, two tilted "profile cards" wearing the Jodi
   mask meet over a 92% match heart, three short promises, clear sign-up / log-in.
   ===================================================================== */
.screen.welcome { background: radial-gradient(90% 55% at 50% 30%, rgba(255, 143, 171, .22) 0%, transparent 70%), linear-gradient(170deg, #7a1d3d 0%, #5e1530 45%, #3a0e22 100%) !important;
  color: #fff; justify-content: space-between; align-items: center; gap: 14px; padding: calc(18px + env(safe-area-inset-top)) 20px calc(22px + env(safe-area-inset-bottom)); min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.w-brand { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; animation: popIn .5s var(--ease) both; }
.w-logo { width: 30px; height: 30px; color: #fff; display: inline-block; }
.w-hero { position: relative; width: min(340px, 92vw); height: 300px; flex: none; }
.w-glow { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 160, .35), transparent 65%); animation: glowBeat 3s ease-in-out infinite; }
.w-card { position: absolute; top: 18px; width: 150px; padding: 12px 12px 14px; border-radius: 26px; background: #fff; color: #2a1324; box-shadow: 0 22px 44px rgba(20, 2, 12, .45); display: flex; flex-direction: column; gap: 3px; }
.w-card b { font-size: 15px; margin-top: 6px; }
.w-card small { font-size: 10.5px; color: #8b6f7d; }
.w-card.c1 { left: 6px; transform: rotate(-9deg); animation: cardInL .9s cubic-bezier(.2, 1.2, .3, 1) .15s both, bobL 4s ease-in-out 1.1s infinite; }
.w-card.c2 { right: 6px; top: 46px; transform: rotate(8deg); animation: cardInR .9s cubic-bezier(.2, 1.2, .3, 1) .3s both, bobR 4s ease-in-out 1.3s infinite; }
@keyframes cardInL { from { opacity: 0; transform: translateX(-120px) rotate(-25deg); } to { opacity: 1; transform: rotate(-9deg); } }
@keyframes cardInR { from { opacity: 0; transform: translateX(120px) rotate(25deg); } to { opacity: 1; transform: rotate(8deg); } }
@keyframes bobL { 0%, 100% { transform: rotate(-9deg) translateY(0); } 50% { transform: rotate(-7deg) translateY(-6px); } }
@keyframes bobR { 0%, 100% { transform: rotate(8deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } }
.w-pic { position: relative; height: 138px; border-radius: 18px; overflow: hidden; background: linear-gradient(160deg, var(--g1), var(--g2)); display: grid; place-items: center; }
.w-face { font-size: 92px; line-height: 1; transform: translateY(8px); }
.w-mask { position: absolute; left: 50%; top: 62px; width: 74px; height: 60px; margin-left: -37px; background: var(--mc);
  -webkit-mask: url(assets/mask_tex.png) center / contain no-repeat; mask: url(assets/mask_tex.png) center / contain no-repeat; }
.w-mask::after { content: ''; position: absolute; inset: 0; background: url(assets/mask_tex.png) center / contain no-repeat; mix-blend-mode: multiply; opacity: .55; }
.w-match { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; animation: popIn .6s cubic-bezier(.3, 1.6, .5, 1) .9s both; }
.w-heart { width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: radial-gradient(circle at 30% 25%, #e0436a, #b01e3e 60%, #861530); border: 4px solid #fff; box-shadow: 0 12px 28px rgba(176, 30, 62, .55); animation: ncBeat 1.8s ease-in-out 1.6s infinite; }
.w-heart svg { width: 38px; height: 38px; }
.w-match small { font-size: 12px; font-weight: 700; background: #fff; color: #b01e3e; padding: 4px 10px; border-radius: 999px; box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.w-float { position: absolute; font-style: normal; font-size: 20px; opacity: 0; animation: floatUp 4.5s ease-in-out infinite; }
.w-float.f1 { left: 46%; top: 30px; animation-delay: 1.2s; } .w-float.f2 { left: 18%; top: 210px; animation-delay: 2.4s; } .w-float.f3 { right: 14%; top: 225px; animation-delay: 3.3s; }
@keyframes floatUp { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 20% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-50px) scale(1.1); } }
.screen.welcome .w-text { text-align: center; display: flex; flex-direction: column; gap: 8px; animation: popIn .6s var(--ease) .5s both; }
.screen.welcome .w-text h1 { margin: 0; font-size: 34px; font-weight: 800; letter-spacing: -.03em; color: #fff !important; }
.screen.welcome .w-text h1 span { color: #ffb3c6; }
.screen.welcome .w-text p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 15px; line-height: 1.5; max-width: 320px; }
.w-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; animation: popIn .6s var(--ease) .65s both; }
.w-feats span { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); }
.w-actions { width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 10px; animation: popIn .6s var(--ease) .8s both; }
.screen.welcome .w-enter { width: 100%; font: inherit; font-size: 17px; font-weight: 700; padding: 17px; border: 0; border-radius: 18px; background: #fff; color: #7a1d3d !important; box-shadow: 0 14px 30px rgba(10, 0, 6, .35); cursor: pointer; }
.w-login { font: inherit; font-size: 14px; background: none; border: 0; color: rgba(255, 255, 255, .85); padding: 8px; cursor: pointer; }
.w-login b { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-height: 700px) { .w-hero { height: 250px; transform: scale(.86); margin: -20px 0; } .w-feats { display: none; } }
.w-match { left: 0; right: 0; transform: none; margin: 0 auto; width: max-content; }
.w-hero { height: 330px; } .w-match { bottom: 0; } .w-card.c1 { top: 10px; } .w-card.c2 { top: 34px; }
@media (max-height: 700px) { .w-hero { height: 300px; transform: scale(.84); margin: -26px 0; } }

/* =====================================================================
   Home v3 (Sam): only what matters — quick random call + everyone online.
   Live rooms / games / meetups / top hosts live in Rooms; admirers / spotlight in Profile.
   ===================================================================== */
.quick-row { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.quick-row .tile { min-height: 96px; }
.p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.p-grid .h-card { width: auto; max-width: none; padding: 14px 10px 12px; gap: 10px; align-items: stretch; animation: popIn .45s var(--ease) both; }
.p-grid .hc-top { flex-direction: column; text-align: center; gap: 8px; }
.p-grid .hc-top .avatar { width: 76px; height: 76px; font-size: 26px; }
.p-grid .hc-info { align-items: center; width: 100%; }
.p-grid .hc-info strong { font-size: 15px; max-width: 100%; }
.p-grid .hc-tags { justify-content: center; }
.p-grid .hc-call { padding: 10px; font-size: 14px; }
.me-tiles { grid-template-columns: 1fr 1fr; }
.me-tiles .tile, .rooms-tiles .tile { min-height: 100px; }
.rooms-tiles .tile.t-meet { background: linear-gradient(135deg, #d8739b, #a8436f); }
.rooms-tiles .tile.t-hosts { background: linear-gradient(135deg, #e9b65c, #c4802c); }
.me-tiles .tile.t-admire { background: linear-gradient(135deg, #f4a7bd, #d9668f); }
.me-tiles .tile.t-boost { background: linear-gradient(135deg, #7a2d63, #3e1530); }
/* sponsor banner: readable on every theme */
.sponsor-card, .sponsor-card * { color: #fff !important; }
.sponsor-card .btn { color: #7a1d1d !important; }

/* =====================================================================
   🌸 Pastel Bubble (Sam's pick, sample 3): blush → lilac page, white bubbly
   cards, pink + lilac accents, Poppins. Nav: same nav, pastel colours (option A).
   ===================================================================== */
html[data-theme="pastel"] { --bg: #fff0f5; --surface: #ffffff; --surface-2: #fbeff5; --line: #f6dce7; --text: #3a1a3a; --muted: #9a7f99; --rasp: #ff6f96; --accent: #e64c7a; }
html[data-theme="pastel"] body { background: linear-gradient(180deg, #fff0f5 0%, #f6eefe 60%, #f3ecff 100%) fixed; background-attachment: fixed; }
html[data-theme="pastel"] body, html[data-theme="pastel"] button, html[data-theme="pastel"] input, html[data-theme="pastel"] select, html[data-theme="pastel"] textarea { font-family: 'Poppins', 'Sora', system-ui, sans-serif; }
html[data-theme="pastel"] .card, html[data-theme="pastel"] .h-card, html[data-theme="pastel"] .plan { border-radius: 24px; border-color: #fbe3ec; box-shadow: 0 10px 26px rgba(230, 76, 122, .10); }
html[data-theme="pastel"] .btn.primary, html[data-theme="pastel"] .hc-call { background: linear-gradient(135deg, #ff8fb0, #ff6f96); box-shadow: 0 8px 18px rgba(255, 111, 150, .3); }
html[data-theme="pastel"] .chip { background: #ffe4ee; color: #c23a63; }
html[data-theme="pastel"] .chip.active, html[data-theme="pastel"] .tab.active { background: #ff6f96; color: #fff; }
html[data-theme="pastel"] .coin-pill { background: #fff; color: #b0700a; box-shadow: 0 4px 12px rgba(230, 76, 122, .12); }
html[data-theme="pastel"] .streak-pill { background: #fff; color: #e8590c; box-shadow: 0 4px 12px rgba(230, 76, 122, .12); }
html[data-theme="pastel"] .home-title span, html[data-theme="pastel"] .link { color: #e64c7a; }
html[data-theme="pastel"] .tag { background: #fdeef4 !important; color: #8a4a6a !important; }
html[data-theme="pastel"] .count { background: #ffe4ee; color: #c23a63; }
/* Home: friends online on top, then quick calls, then everyone online */
.friends-label { margin: 2px 0 -6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
html[data-theme="pastel"] .stories .avatar { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5px #ff8fb0; }
html[data-theme="pastel"] .quick-row .tile.t-video { background: linear-gradient(135deg, #ff9ab8, #ff6f96); }
html[data-theme="pastel"] .quick-row .tile.t-audio { background: linear-gradient(135deg, #b9a3ff, #8e6cf0); }
html[data-theme="pastel"] .tile { border-radius: 24px; }
html[data-theme="pastel"] .rooms-tiles .tile.t-live { background: linear-gradient(135deg, #ffb39a, #ff7f8f); }
html[data-theme="pastel"] .rooms-tiles .tile.t-games { background: linear-gradient(135deg, #b9a3ff, #8e6cf0); }
html[data-theme="pastel"] .rooms-tiles .tile.t-meet { background: linear-gradient(135deg, #ffa8c8, #e97aa8); }
html[data-theme="pastel"] .rooms-tiles .tile.t-hosts { background: linear-gradient(135deg, #ffd38a, #f0a93e); }
html[data-theme="pastel"] .me-tiles .tile.t-admire { background: linear-gradient(135deg, #ffb3c9, #ff7fa3); }
html[data-theme="pastel"] .me-tiles .tile.t-boost { background: linear-gradient(135deg, #c5b3ff, #9a7bff); }
html[data-theme="pastel"] .balance { background: linear-gradient(135deg, #ff8fb0, #b18cff); }
html[data-theme="pastel"] .msg.me .bubble { background: linear-gradient(135deg, #ff8fb0, #ff6f96); }
html[data-theme="pastel"] .msg.them .bubble { background: #fff; }
/* Chats: status under each friend */
.f-status { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; }
.f-status.on { color: #1f9d5c; } .f-status.busy { color: #d98a00; } .f-status.off { color: var(--muted); font-weight: 500; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #c9bccb; display: inline-block; flex: none; }
.status-dot.on { background: #2fd47a; } .status-dot.busy { background: #f5a524; } .status-dot.off { background: #c9bccb; }
.friend-filter { margin: -4px 0 0; }
html[data-theme="pastel"] .chat-row { background: #fff; border-radius: 22px; padding: 10px 12px; box-shadow: 0 8px 20px rgba(230, 76, 122, .08); margin-bottom: 8px; }
html[data-theme="pastel"] .unread-badge { background: #ff6f96; color: #fff; }
/* Nav — option A: white glass bar, pink icons, pink heart (shape unchanged) */
html[data-theme="pastel"] .navbar { --nav-bg: rgba(255, 255, 255, .94); border: 1px solid #f6d6e2; box-shadow: 0 12px 28px rgba(230, 76, 122, .18); }
html[data-theme="pastel"] .nb { color: #b897b6; }
html[data-theme="pastel"] .nb.active { color: #e64c7a; }
html[data-theme="pastel"] .nav-pill { background: linear-gradient(180deg, #ffe4ee, #fff0f5); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8); }
html[data-theme="pastel"] .nc-btn { background: radial-gradient(circle at 30% 25%, #ff9ab8, #ff6f96 55%, #e64c7a); border-color: #fff; box-shadow: 0 8px 20px rgba(255, 111, 150, .45); }
html[data-theme="pastel"] .nc-halo { animation-name: ncHaloP; }
@keyframes ncHaloP { 0% { box-shadow: 0 0 0 0 rgba(255, 111, 150, .45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(255, 111, 150, 0); } }
html[data-theme="pastel"] .nb-center .lb { color: #b897b6; } html[data-theme="pastel"] .nb-center.active .lb { color: #e64c7a; }
html[data-theme="pastel"] .navbar .badge { border-color: #fff; }
html[data-theme="pastel"] .navbar::after { background: linear-gradient(180deg, rgba(246, 238, 254, 0) 0%, rgba(246, 238, 254, .9) 40%, #f4edfe 62%); }
html[data-theme="pastel"] .m-date { background: #e64c7a; }
html[data-theme="pastel"] .msg.gone .bubble { background: transparent !important; }
html[data-theme="pastel"] .balance.earn { background: linear-gradient(135deg, #7fd6c4, #4fb3a6); }

/* Real line icons in place of emoji (icons.js) */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.2em; display: inline-block; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-coins { color: #c48a12; } .ic-flame { color: #ef6a1f; } .ic-crown { color: #d99a00; }
html[data-theme="pastel"] .ic-heart, html[data-theme="pastel"] .ic-gift { color: #e64c7a; }
.tile .ic, .quick-row .ic { color: #fff; }
/* Checkout */
.pay-sheet .pay-lines { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.pay-line { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.pay-line.good b { color: #16a34a; }
.pay-line.total { border-top: 1px dashed rgba(127,127,127,.35); padding-top: 10px; font-size: 17px; }
.pay-line.total b { font-size: 22px; }
.pay-sheet .row input { flex: 1; min-width: 0; text-transform: uppercase; }