/* Crush Rush web app: dark, photo-first */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/poppins-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url(/assets/fonts/poppins-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 900; font-display: swap; src: url(/assets/fonts/poppins-latin-900-italic.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/archivo-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/archivo-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/archivo-latin-700-normal.woff2) format("woff2"); }

:root {
  --hot: #F15A16; --hot-2: #FF3D6E;
  --grad: linear-gradient(120deg, #FF7A1A 0%, #F15A16 40%, #FF3D6E 100%);
  --bg: #0E0B0A; --bg-2: #181311; --bg-3: #241C18; --line: rgba(255,255,255,.09);
  --text: #fff; --soft: rgba(255,255,255,.66); --faint: rgba(255,255,255,.42);
  --blue: #1D9BF0;
  --display: "Poppins", "Arial Black", system-ui, sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: #000; color: var(--text); font-family: var(--body); -webkit-font-smoothing: antialiased; }
img { display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.app-shell { max-width: 480px; margin: 0 auto; height: 100vh; height: 100dvh; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; position: relative; }
@media (min-width: 500px) { .app-shell { box-shadow: 0 0 0 1px var(--line), 0 0 80px rgba(241,90,22,.08); } }
.app-loading { margin: auto; display: grid; place-items: center; color: var(--soft); }
.spin { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(255,255,255,.15); border-top-color: var(--hot); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* type */
.display { font-family: var(--display); font-style: italic; font-weight: 900; letter-spacing: -.03em; line-height: .98; margin: 0; }
.display em, .its-match { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.h2 { font-size: 36px; }
.lead { margin: 0; color: var(--soft); font-size: 16px; line-height: 1.5; }
.fine { margin: 0; color: var(--faint); font-size: 13px; line-height: 1.5; }
.center { text-align: center; }
.logo { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 22px; letter-spacing: -.03em; text-decoration: none; color: #fff; }
.logo span { color: var(--hot); }
.logo-lg { font-size: 26px; }

/* buttons */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: 17px; cursor: pointer; text-decoration: none; transition: transform .15s, opacity .2s; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; }
.btn-hot { background: var(--grad); color: #fff; box-shadow: 0 10px 26px -10px rgba(241,90,22,.7); }
.btn-soft { background: rgba(255,255,255,.08); color: #fff; }
.btn-dark { background: #B91C1C; color: #fff; }
.btn-sm { min-height: 44px; font-size: 15px; }
.link-btn { background: none; border: 0; font: inherit; font-size: 15px; color: var(--soft); text-decoration: none; cursor: pointer; padding: 8px 0; }
.link-btn.center { display: block; margin: 0 auto; }
.link-btn:hover { color: #fff; }
.danger { color: #FF7A7A; }

/* header + tabs */
.app-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 8px; padding-top: max(12px, env(safe-area-inset-top)); z-index: 10; }
.head-right { display: flex; align-items: center; gap: 8px; }
.hpill { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.08); color: var(--soft); border: 0; cursor: pointer; }
.hpill-gold { background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; }
.hbolt { width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #B07CFF; cursor: pointer; }
.hbolt.live { background: linear-gradient(135deg, #8B5CF6, #C084FC); color: #fff; box-shadow: 0 0 20px rgba(167,121,255,.6); animation: glow 1.6s ease-in-out infinite alternate; }
@keyframes glow { to { box-shadow: 0 0 6px rgba(167,121,255,.3); } }
.step { font-size: 13px; color: var(--soft); font-weight: 700; }
.app-main { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px 18px 28px; display: flex; flex-direction: column; gap: 16px; }
.app-tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.app-tabs button { position: relative; min-height: 54px; background: none; border: 0; font: inherit; font-size: 11px; font-weight: 700; color: var(--faint); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; transition: color .2s; }
.app-tabs button[aria-current="page"] { color: var(--hot); }
.app-tabs button[aria-current="page"] svg { filter: drop-shadow(0 0 8px rgba(241,90,22,.5)); }
.app-tabs .dot { position: absolute; top: 8px; right: calc(50% - 18px); width: 9px; height: 9px; border-radius: 50%; background: var(--hot-2); box-shadow: 0 0 0 2px var(--bg); }

/* auth */
.auth { flex: 1; min-height: 0; overflow-y: auto; }
.auth-hero { position: relative; height: 210px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 6px; mask-image: linear-gradient(#000 40%, transparent); -webkit-mask-image: linear-gradient(#000 40%, transparent); }
.auth-hero img { width: 100%; height: 100%; object-fit: cover; border-radius: 0 0 20px 20px; }
.auth-hero img:nth-child(2) { transform: translateY(-24px); }
.auth-body { padding: 0 22px 40px; display: flex; flex-direction: column; gap: 18px; margin-top: -30px; position: relative; }
.auth h1 { font-size: 46px; }
.seg { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.07); }
.seg button { min-height: 44px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: inherit; font-weight: 800; cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: #111; }
.note { margin: 0; font-size: 14px; color: var(--soft); }
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label, legend { font-size: 13px; font-weight: 700; color: var(--soft); }
.field input, .field textarea, .field select { font: inherit; font-size: 16px; color: #fff; background: rgba(255,255,255,.07); border: 1px solid transparent; border-radius: 16px; padding: 14px 16px; min-height: 52px; outline: none; transition: border-color .2s, background .2s; }
.field input:focus, .field textarea:focus { border-color: var(--hot); background: rgba(255,255,255,.1); }
.field input[type=date] { color-scheme: dark; }
.field textarea { resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { padding: 0; margin-bottom: 10px; }
.opt { font-weight: 400; color: var(--faint); }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; }
.choice-row label { position: relative; }
.choice-row input { position: absolute; opacity: 0; inset: 0; }
.choice-row span { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 14px; background: rgba(255,255,255,.07); color: var(--soft); cursor: pointer; transition: background .2s, color .2s; }
.choice-row input:checked + span { background: var(--grad); color: #fff; }
.choice-row input:focus-visible + span { outline: 3px solid #fff; outline-offset: 2px; }
.choice-row input:disabled + span { opacity: .35; cursor: not-allowed; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--soft); }
.check input { width: 20px; height: 20px; accent-color: var(--hot); flex: none; margin-top: 1px; }
.ts:empty { display: none; }
.form-msg { margin: 0; min-height: 1.3em; font-weight: 700; font-size: 14px; text-align: center; }
.form-msg.err { color: #FF8A8A; }
.form-msg.ok { color: #6EE7A0; }

/* rush */
.app-main.rush-main { overflow: hidden; padding: 4px 10px 10px; gap: 10px; }
.rush-card { position: relative; flex: 1; min-height: 0; border-radius: 26px; overflow: hidden; background: #111; box-shadow: 0 20px 50px -20px rgba(0,0,0,.8); animation: cardIn .45s cubic-bezier(.2,.9,.3,1.2); transition: transform .45s cubic-bezier(.4,0,.2,1), opacity .4s; }
@keyframes cardIn { from { transform: scale(.94) translateY(12px); opacity: 0; } }
.rush-card.fly-right { transform: translateX(130%) rotate(18deg); opacity: 0; }
.rush-card.fly-left { transform: translateX(-130%) rotate(-18deg); opacity: 0; }
.rush-card .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pbars { position: absolute; top: 9px; left: 12px; right: 12px; display: flex; gap: 4px; z-index: 3; }
.pbars span { flex: 1; height: 3.5px; border-radius: 4px; background: rgba(255,255,255,.35); }
.pbars span.on { background: #fff; }
.ptap { position: absolute; top: 0; height: 60%; width: 50%; background: transparent; border: 0; padding: 0; cursor: pointer; z-index: 1; }
.ptap.prev { left: 0; } .ptap.next { right: 0; }
.card-top { position: absolute; top: 22px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; z-index: 3; pointer-events: none; }
.card-top > * { pointer-events: auto; }
.tchip { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(0,0,0,.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.more { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 20px; font-weight: 900; cursor: pointer; }
.info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 90px 18px 18px; background: linear-gradient(transparent, rgba(0,0,0,.55) 40%, rgba(0,0,0,.85)); display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.who { margin: 0; font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.05; display: flex; align-items: center; gap: 8px; }
.who span { font-weight: 700; opacity: .9; }
.who svg { width: 24px; height: 24px; flex: none; }
.place { margin: 0; font-size: 14px; color: rgba(255,255,255,.85); }
.bio { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; max-height: 64px; overflow: hidden; }
.chip { font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.16); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.chip-goal { background: rgba(241,90,22,.85); }
.stamp { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.3) rotate(-14deg); opacity: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 84px; padding: 4px 26px; border-radius: 24px; background: var(--grad); color: #fff; box-shadow: 0 20px 60px rgba(255,61,110,.6); transition: transform .35s cubic-bezier(.2,.9,.3,1.6), opacity .2s; pointer-events: none; }
.stamp.show { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-8deg); }
.stamp.low { background: #333; box-shadow: none; }
.dock { flex: none; padding: 12px 16px 14px; border-radius: 24px; background: var(--bg-2); display: flex; flex-direction: column; gap: 8px; }
.dock-row { display: flex; justify-content: space-between; align-items: center; }
.dock-row label, .dock-row h2 { font-size: 14px; font-weight: 700; color: var(--soft); margin: 0; }
.rate-num { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 38px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 4px; }
input[type=range] { --p: 66%; -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: transparent; cursor: pointer; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, #FF7A1A, #FF3D6E) 0 / var(--p) 100% no-repeat, rgba(255,255,255,.1); }
input[type=range]::-moz-range-track { height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); }
input[type=range]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--grad); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.5); }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; }
.dock .btn { min-height: 50px; }
@media (max-height: 640px) { .bio { display: none; } .chips .chip:not(.chip-goal) { display: none; } .rate-num { font-size: 30px; } .who { font-size: 26px; } }

.empty { margin: auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 20px 10px; }
.empty .btn { max-width: 300px; }
.pulse { position: relative; width: 110px; height: 110px; margin-bottom: 10px; }
.pulse img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px var(--bg), 0 0 0 7px var(--hot); }
.pulse::before, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(241,90,22,.35); animation: ripple 2.4s ease-out infinite; }
.pulse::after { animation-delay: 1.2s; }
@keyframes ripple { to { transform: scale(2.6); opacity: 0; } }

/* sheets */
.sheet-wrap { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,0); transition: background .25s; }
.sheet-wrap.open { background: rgba(0,0,0,.6); }
.sheet { width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: var(--bg-2); color: #fff; border-radius: 28px 28px 0 0; padding: 26px 22px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; transform: translateY(100%); transition: transform .35s cubic-bezier(.2,.9,.3,1); }
.sheet::before { content: ""; width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); margin: -12px auto 6px; }
.sheet-wrap.open .sheet { transform: none; }
.sheet h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 22px; }
.sheet h2.display { font-size: 34px; font-weight: 900; }
.sheet p { margin: 0; color: var(--soft); line-height: 1.5; }
.sheet-match { text-align: center; align-items: center; background: radial-gradient(circle at 50% 0%, rgba(241,90,22,.35), var(--bg-2) 60%); }
.its-match { font-size: 46px !important; }
.match-pair { display: flex; align-items: center; justify-content: center; margin: 10px 0 4px; }
.match-pair img { width: 120px; height: 160px; object-fit: cover; border-radius: 20px; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.match-pair img:first-child { transform: rotate(-8deg) translateX(14px); animation: inL .6s cubic-bezier(.2,.9,.3,1.3); }
.match-pair img:last-child { transform: rotate(8deg) translateX(-14px); animation: inR .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes inL { from { transform: rotate(-25deg) translateX(-80px); opacity: 0; } }
@keyframes inR { from { transform: rotate(25deg) translateX(80px); opacity: 0; } }
.mheart { position: relative; z-index: 2; width: 58px; height: 58px; margin: 0 -16px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-size: 28px; box-shadow: 0 0 0 5px var(--bg-2); animation: popIn .5s cubic-bezier(.2,.9,.3,1.8) .3s both; }
@keyframes popIn { from { transform: scale(0); } }
.prem-head { display: flex; flex-direction: column; gap: 10px; }
.prem-badge { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; }
.perks { list-style: none; margin: 6px 0; padding: 0; display: grid; gap: 10px; font-weight: 700; }
.plan-list { display: grid; gap: 8px; }
.plan-opt { position: relative; }
.plan-opt input { position: absolute; opacity: 0; }
.plan-opt span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 14px 18px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 2px transparent; cursor: pointer; position: relative; transition: box-shadow .2s, background .2s; }
.plan-opt b { font-size: 16px; }
.plan-opt small { grid-column: 1; color: var(--faint); font-size: 13px; }
.plan-opt em { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-family: var(--display); font-weight: 800; font-size: 18px; }
.plan-opt i { position: absolute; top: -9px; right: 16px; font-style: normal; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--grad); }
.plan-opt input:checked + span { box-shadow: inset 0 0 0 2px var(--hot); background: rgba(241,90,22,.12); }
.plan-opt input:focus-visible + span { outline: 3px solid #fff; }
.boost-icon { width: 76px; height: 76px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #8B5CF6, #C084FC); color: #fff; box-shadow: 0 0 40px rgba(167,121,255,.5); }
.boost-icon svg { width: 38px; height: 38px; }
.boost-icon.blue { background: rgba(29,155,240,.15); box-shadow: 0 0 40px rgba(29,155,240,.35); }
.boost-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.boost-opt { display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 16px 6px; border-radius: 18px; border: 0; background: rgba(255,255,255,.06); color: #fff; font: inherit; cursor: pointer; }
.boost-opt b { font-size: 14px; } .boost-opt span { font-family: var(--display); font-weight: 800; color: #C9A6FF; }
.pose { text-align: center; font-family: var(--display); font-weight: 800; font-size: 22px; color: #fff !important; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.06); }
label.btn { cursor: pointer; }

/* likes */
.likes-lock { position: relative; flex: 1; min-height: 420px; border-radius: 26px; overflow: hidden; }
.blur-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; filter: blur(18px) saturate(1.2); transform: scale(1.15); }
.blur-grid img { width: 100%; height: 100%; object-fit: cover; }
.likes-over { position: absolute; inset: 0; background: linear-gradient(rgba(14,11,10,.3), rgba(14,11,10,.9)); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 28px 22px; }
.big-num { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; font-family: var(--display); font-weight: 900; font-size: 36px; }
.likes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.like-card { position: relative; aspect-ratio: 3 / 4; border: 0; padding: 0; border-radius: 20px; overflow: hidden; background: #111; cursor: pointer; }
.like-card img { width: 100%; height: 100%; object-fit: cover; }
.like-card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.like-score { position: absolute; z-index: 1; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--grad); color: #fff; font-family: var(--display); font-weight: 900; font-style: italic; }
.like-name { position: absolute; z-index: 1; left: 12px; bottom: 10px; color: #fff; font-family: var(--display); font-weight: 800; font-size: 17px; }

/* chats */
.new-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 4px; margin: 0 -18px; padding-left: 18px; padding-right: 18px; scrollbar-width: none; }
.new-row::-webkit-scrollbar { display: none; }
.new-match { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.new-match img { width: 72px; height: 96px; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 2px var(--hot); }
.match-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.match-list button { width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: #fff; text-align: left; font: inherit; cursor: pointer; }
.match-list img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.match-list span { flex: 1; min-width: 0; }
.match-list b { display: flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 800; font-size: 17px; }
.match-list b svg { width: 16px; height: 16px; }
.match-list small { display: block; color: var(--soft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unread { width: 10px; height: 10px; border-radius: 50%; background: var(--hot-2); flex: none; }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); }
.chat-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.chat-head b { font-family: var(--display); font-weight: 800; font-size: 18px; flex: 1; }
.icon-btn { min-width: 42px; min-height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.07); color: #fff; font: inherit; font-size: 22px; font-weight: 800; cursor: pointer; }
.msgs { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.chat-intro { text-align: center; margin: 10px auto 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.chat-intro img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--hot); }
.chat-intro p { margin: 0; color: var(--faint); font-size: 13px; }
.msg { max-width: 78%; padding: 11px 16px; border-radius: 22px; line-height: 1.4; font-size: 16px; word-wrap: break-word; animation: msgIn .25s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } }
.msg.theirs { align-self: flex-start; background: var(--bg-3); border-bottom-left-radius: 6px; }
.msg.mine { align-self: flex-end; background: var(--grad); border-bottom-right-radius: 6px; }
.chat-form { flex: none; display: flex; gap: 8px; padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 16px; color: #fff; padding: 0 18px; min-height: 50px; border: 0; border-radius: 999px; background: rgba(255,255,255,.08); outline: none; }
.send { width: 50px; height: 50px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; font-size: 18px; cursor: pointer; flex: none; }

/* me */
.me-hero { display: flex; align-items: center; gap: 16px; padding: 6px 0; }
.me-hero img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--hot); }
.me-hero h1 { font-size: 28px; display: flex; align-items: center; gap: 6px; }
.me-hero h1 svg { width: 22px; height: 22px; }
.me-hero p { margin: 4px 0 0; color: var(--soft); }
.card { background: var(--bg-2); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; border: 0; color: #fff; font: inherit; text-align: left; width: 100%; }
.card h2 { margin: 0; font-size: 14px; font-weight: 700; color: var(--soft); }
.card.row { flex-direction: row; align-items: center; gap: 14px; }
.card.row b { display: block; font-family: var(--display); font-weight: 800; font-size: 17px; }
.card.row small { color: var(--soft); font-size: 14px; }
.card.row > div { flex: 1; }
.card.tap { cursor: pointer; }
.card.dark { background: linear-gradient(120deg, #2A1C10, #1A1210); box-shadow: inset 0 0 0 1px rgba(245,196,81,.25); }
.big-ico { width: 46px; height: 46px; border-radius: 50%; background: rgba(255,255,255,.07); display: grid; place-items: center; font-size: 22px; flex: none; }
.big-ico svg { width: 26px; height: 26px; }
.chev { font-size: 26px; color: var(--faint); }
.banner { padding: 14px 16px; border-radius: 18px; background: rgba(29,155,240,.14); font-size: 14px; color: #CFE8FF; }
.banner .link-btn { color: #fff; text-decoration: underline; padding: 0; }
.save-btn { position: sticky; bottom: 0; }
.me-links { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 4px; }

/* photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pslot { position: relative; aspect-ratio: 3 / 4; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,.05); }
.pslot img { width: 100%; height: 100%; object-fit: cover; }
.pslot.rejected img { opacity: .35; filter: grayscale(1); }
.padd { display: grid; place-items: center; cursor: pointer; background: rgba(241,90,22,.1); box-shadow: inset 0 0 0 2px rgba(241,90,22,.5); }
.padd span { width: 40px; height: 40px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.pempty { box-shadow: inset 0 0 0 2px rgba(255,255,255,.06); }
.pmain, .pstatus { position: absolute; left: 6px; bottom: 6px; font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: var(--grad); }
.pstatus { left: 6px; top: 6px; bottom: auto; background: rgba(0,0,0,.65); }
.pstatus.bad { background: #B91C1C; }
.pbtn { position: absolute; border: 0; font: inherit; font-weight: 800; cursor: pointer; background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.pdel { top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 50%; font-size: 17px; line-height: 1; }
.pstar { left: 6px; bottom: 6px; font-size: 11px; padding: 4px 9px; border-radius: 999px; }

.toast { position: fixed; left: 50%; top: max(70px, calc(env(safe-area-inset-top) + 60px)); transform: translateX(-50%); background: #fff; color: #111; padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; z-index: 70; max-width: 90vw; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: toastIn .3s cubic-bezier(.2,.9,.3,1.4); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -12px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* velvet rope */
.velvet { margin: auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 10px 4px 20px; }
.velvet .btn { max-width: 340px; }
.velvet .banner { text-align: left; margin: 0; }
.vtag { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 7px 12px; border-radius: 999px; background: rgba(241,90,22,.15); color: #FFB08A; }
.vtag.bad { background: rgba(255,90,90,.15); color: #FF9C9C; }
.vsteps { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; text-align: left; }
.vsteps li { position: relative; padding: 12px 14px 12px 46px; border-radius: 16px; background: rgba(255,255,255,.05); color: var(--faint); font-weight: 700; font-size: 15px; }
.vsteps li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.2); }
.vsteps li.done { color: #fff; }
.vsteps li.done::before { content: "✓"; display: grid; place-items: center; font-size: 12px; background: #2BB673; box-shadow: none; color: #fff; }
.vsteps li.now { color: #fff; background: rgba(241,90,22,.14); box-shadow: inset 0 0 0 1.5px rgba(241,90,22,.6); }
.vsteps li.now::before { background: var(--grad); box-shadow: 0 0 12px rgba(241,90,22,.7); animation: glow 1.4s ease-in-out infinite alternate; }

/* looks score */
.looks { background: radial-gradient(circle at 100% 0%, rgba(241,90,22,.25), var(--bg-2) 60%); }
.looks-row { display: flex; align-items: center; gap: 16px; }
.looks-num { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 64px; line-height: .9; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 6px; }
.looks-top { display: inline-block; font-family: var(--display); font-weight: 800; font-size: 18px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; }
.looks-row small { display: block; margin-top: 6px; color: var(--soft); font-size: 13px; }
.looks-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.looks-stats span { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.05); font-size: 12px; color: var(--soft); }
.looks-stats b { display: block; font-family: var(--display); font-size: 20px; color: #fff; }
.looks-lock { display: flex; gap: 14px; align-items: center; }
.looks-lock b { display: block; font-family: var(--display); font-size: 16px; }
.looks-lock small { color: var(--soft); font-size: 13px; }
.looks-q { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-size: 28px; background: rgba(255,255,255,.07); color: var(--faint); }
.looks-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.looks-bar i { display: block; height: 100%; background: var(--grad); border-radius: 999px; }

/* Spanks */
.tab-peach { font-size: 22px; line-height: 26px; filter: grayscale(1) opacity(.55); transition: filter .2s; }
.app-tabs button[aria-current="page"] .tab-peach { filter: none; }
.app-tabs .badge { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--hot-2); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--bg); animation: popIn .4s cubic-bezier(.2,.9,.3,1.8); }
.spank-big { font-size: 72px; line-height: 1; text-align: center; }
.spank-big.pop { animation: spankPop .9s cubic-bezier(.2,.9,.3,1.6) both; }
@keyframes spankPop { 0% { transform: scale(0) rotate(-30deg); } 60% { transform: scale(1.25) rotate(12deg); } 80% { transform: scale(.95) rotate(-6deg); } 100% { transform: none; } }

/* tabs: 5 now */
.app-tabs { grid-template-columns: repeat(5, 1fr); }
/* Snapshots */
.snap-cta { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; border: 0; border-radius: 22px; background: var(--grad); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 14px 30px -14px rgba(241,90,22,.8); }
.snap-cta:disabled { background: var(--bg-2); box-shadow: none; cursor: default; }
.snap-cta b { display: block; font-family: var(--display); font-weight: 800; font-size: 18px; }
.snap-cta small { color: rgba(255,255,255,.8); font-size: 13px; }
.snap-cam { width: 52px; height: 52px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 26px; background: rgba(255,255,255,.2); }
.snap-mine { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 22px; background: radial-gradient(circle at 100% 0%, rgba(241,90,22,.25), var(--bg-2) 60%); }
.snap-mine img { width: 70px; height: 92px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 2px var(--hot); }
.snap-mine > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.snap-lbl { font-size: 12px; font-weight: 700; color: var(--soft); }
.snap-mine b { font-family: var(--display); font-size: 18px; }
.snap-mine small { color: var(--soft); font-size: 13px; }
.snap-score { font-style: italic; font-weight: 900 !important; font-size: 36px !important; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.snap-head { display: flex; justify-content: space-between; align-items: baseline; }
.snap-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 20px; }
.snap-head span { font-size: 13px; color: var(--hot); font-weight: 700; }
.snap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.snap-tile { position: relative; aspect-ratio: 3 / 4.2; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #111; cursor: pointer; }
.snap-tile img { width: 100%; height: 100%; object-fit: cover; }
.snap-tile.new { box-shadow: 0 0 0 2.5px var(--hot), 0 0 16px rgba(241,90,22,.4); }
.snap-tile::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.snap-who { position: absolute; z-index: 1; left: 8px; bottom: 7px; font-size: 11px; font-weight: 700; color: #fff; }
.snap-mark { position: absolute; z-index: 1; top: 6px; right: 6px; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 12px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; }
.snap-view { position: fixed; inset: 0; z-index: 60; max-width: 480px; margin: 0 auto; background: #000; display: flex; flex-direction: column; animation: svIn .25s ease; }
@keyframes svIn { from { opacity: 0; transform: scale(.97); } }
.sv-bars { position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; display: flex; gap: 3px; }
.sv-bars i { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); }
.sv-bars i.done, .sv-bars i.on { background: #fff; }
.sv-top { position: absolute; z-index: 3; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 14px; right: 10px; display: flex; align-items: center; gap: 8px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.sv-top b { font-family: var(--display); font-size: 17px; }
.sv-top span { font-size: 13px; opacity: .85; flex: 1; }
.sv-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 18px; cursor: pointer; }
.sv-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: svImg .35s ease; }
@keyframes svImg { from { opacity: .3; } }
.sv-prev, .sv-next { position: absolute; z-index: 2; top: 0; bottom: 230px; width: 35%; background: transparent; border: 0; cursor: pointer; }
.sv-prev { left: 0; } .sv-next { right: 0; }
.sv-dock { position: absolute; z-index: 3; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); padding: 14px 16px; border-radius: 24px; background: rgba(14,11,10,.75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; flex-direction: column; gap: 8px; }
.snap-view .stamp { z-index: 4; }
.cam { position: relative; aspect-ratio: 3 / 4; border-radius: 22px; overflow: hidden; background: #000; }
.cam video, .cam img { width: 100%; height: 100%; object-fit: cover; }
.cam video { transform: scaleX(-1); }
.cam-msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--soft); pointer-events: none; }
.sheet-cam { max-height: 96dvh; }

/* wallet + credits */
.hcoins { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; font: inherit; font-size: 13px; cursor: pointer; }
.hcoins b { font-family: var(--display); font-weight: 800; font-size: 14px; }
.dock-btns { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.btn-super { width: auto; padding: 0 16px; background: rgba(255,61,110,.15); color: #FF8FAE; box-shadow: inset 0 0 0 1.5px rgba(255,61,110,.55); font-size: 15px; }
.btn-super small { font-size: 11px; opacity: .85; margin-left: 2px; }
.wallet-top { display: flex; align-items: center; gap: 14px; }
.coin-big { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 30px; background: linear-gradient(120deg, #F5C451, #E89A2C); box-shadow: 0 0 30px rgba(245,196,81,.35); }
.wallet-top small { display: block; color: var(--soft); font-size: 13px; }
.wallet-top b { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 28px; }
.streak { margin-left: auto; font-size: 12px; font-weight: 800; padding: 6px 10px; border-radius: 999px; background: rgba(241,90,22,.15); color: #FFB08A; }
.wl-h { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.spend-list { display: flex; flex-direction: column; gap: 6px; }
.spend-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; background: rgba(255,255,255,.05); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.spend-row.static { cursor: default; }
.spend-row > span { font-size: 20px; width: 26px; text-align: center; }
.spend-row div { flex: 1; min-width: 0; }
.spend-row b { font-size: 14px; display: block; }
.spend-row small { color: var(--faint); font-size: 12px; }
.spend-row em { font-style: normal; font-family: var(--display); font-weight: 800; font-size: 14px; color: #F5C451; white-space: nowrap; }
.pack-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 6px 12px; border: 0; border-radius: 18px; background: rgba(255,255,255,.06); color: #fff; font: inherit; cursor: pointer; }
.pack:disabled { opacity: .55; cursor: default; }
.pack b { font-family: var(--display); font-weight: 900; font-size: 24px; color: #F5C451; }
.pack small { color: var(--faint); font-size: 11px; }
.pack span { margin-top: 6px; font-weight: 800; font-size: 14px; }
.pack i { position: absolute; top: -8px; font-style: normal; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--grad); }
/* hidden spanks */
.hidden-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: radial-gradient(circle at 50% 30%, rgba(241,90,22,.35), #1A1411 70%); color: #fff; }
.hidden-card::after { display: none; }
.hid-peach { font-size: 44px; filter: blur(.5px); }
.hid-txt { font-size: 13px; font-weight: 700; color: var(--soft); }
.hid-btn { font-family: var(--display); font-weight: 800; font-size: 13px; padding: 7px 12px; border-radius: 999px; background: linear-gradient(120deg, #F5C451, #E89A2C); color: #2a1a00; }
/* looks breakdown */
.bd { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 16px; background: rgba(0,0,0,.25); }
.bd h3 { margin: 0 0 2px; font-size: 13px; color: var(--soft); }
.bd-row { display: grid; grid-template-columns: 80px 1fr 34px; align-items: center; gap: 8px; font-size: 13px; }
.bd-row i { height: 8px; border-radius: 999px; background: var(--grad); }
.bd-row b { font-family: var(--display); text-align: right; }
/* ads */
.ad-card { margin: auto 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 26px; background: var(--bg-2); min-height: 320px; }
.ad-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.ad-actions { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
.snap-ad { grid-column: 1 / -1; padding: 10px; border-radius: 16px; background: var(--bg-2); }

/* ===== Rate Mate duels ===== */
.mode-seg { flex: none; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.06); }
.mode-seg button { min-height: 38px; border: 0; border-radius: 999px; background: none; color: var(--soft); font: inherit; font-weight: 800; font-size: 14px; cursor: pointer; transition: background .2s, color .2s; }
.mode-seg button[aria-selected="true"] { background: var(--grad); color: #fff; }
.rate-area { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.duel-main { gap: 8px; }
.duel-hud { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.hud-l { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hud-l small { font-size: 10px; color: var(--faint); white-space: nowrap; }
.tier-bar { display: block; height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; max-width: 110px; }
.tier-bar i { display: block; height: 100%; background: var(--grad); }
.hud-m { text-align: center; }
.hud-m b { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 26px; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 3px; }
.hud-m small { font-size: 10px; color: var(--faint); }
.hud-r { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.combo { font-family: var(--display); font-weight: 900; font-size: 14px; padding: 5px 9px; border-radius: 999px; background: rgba(241,90,22,.18); color: #FFB08A; animation: popIn .35s cubic-bezier(.2,.9,.3,1.8); }
.trophy { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(245,196,81,.15); font-size: 18px; cursor: pointer; }
.tier { display: inline-block; align-self: flex-start; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #fff; }
.tier-bronze { background: #9A5B34; } .tier-silver { background: #8E9AAB; } .tier-gold { background: #D9A53A; color: #2a1a00; }
.tier-platinum { background: #5FC9C4; color: #082a29; } .tier-diamond { background: linear-gradient(120deg, #6BB8FF, #B98CFF); } .tier-crown { background: var(--grad); }
.duel-timer { flex: none; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.duel-timer i { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, #2BB673, #F5C451); }
.duel-timer i.low { background: linear-gradient(90deg, #FF3D6E, #F15A16); }
.duel-q { flex: none; margin: 0; text-align: center; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 20px; }
.duel-q small { display: block; font-family: var(--body); font-style: normal; font-weight: 600; font-size: 11px; color: var(--faint); }
.duel { position: relative; flex: 1; min-height: 0; display: grid; grid-template-rows: 1fr 1fr; gap: 8px; }
.duel-card { position: relative; min-height: 0; padding: 0; border: 0; border-radius: 22px; overflow: hidden; background: #111; cursor: pointer; animation: dcIn .35s cubic-bezier(.2,.9,.3,1.2) both; transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .3s, filter .3s, box-shadow .3s; }
@keyframes dcIn { from { opacity: 0; transform: scale(.94); } }
.duel-card img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.duel-card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); }
.duel-card:active { transform: scale(.98); }
.dc-name { position: absolute; z-index: 1; left: 14px; bottom: 10px; font-family: var(--display); font-weight: 800; font-size: 17px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.duel-card.won { box-shadow: 0 0 0 3px #F5C451, 0 0 30px rgba(245,196,81,.45); transform: scale(1.015); }
.duel-card.lost { opacity: .35; filter: grayscale(.8); transform: scale(.97); }
.dc-res { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; align-content: center; pointer-events: none; }
.duel-card.scored .dc-res b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 64px; line-height: 1; color: #fff; text-shadow: 0 6px 30px rgba(241,90,22,.9); animation: scorePop .5s cubic-bezier(.2,.9,.3,1.8) both; }
.duel-card.scored .dc-res small { margin-top: 6px; font-weight: 800; font-size: 13px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; animation: up2 .4s ease .15s both; }
@keyframes scorePop { from { transform: scale(.2) rotate(-12deg); opacity: 0; } }
@keyframes up2 { from { opacity: 0; transform: translateY(8px); } }
.vs-badge { position: absolute; z-index: 3; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #111; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 17px; box-shadow: 0 0 0 4px var(--bg), 0 8px 20px rgba(0,0,0,.4); pointer-events: none; }
.duel-pop { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; align-content: center; text-align: center; font-family: var(--display); font-weight: 900; font-style: italic; font-size: 40px; color: #fff; background: rgba(14,11,10,.6); border-radius: 22px; animation: up2 .3s ease both; }
.duel-pop small { font-family: var(--body); font-style: normal; font-size: 13px; color: var(--soft); }
.sheet-lb { gap: 10px; }
.lb { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50dvh; overflow-y: auto; }
.lb li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: rgba(255,255,255,.04); }
.lb li.me { background: rgba(241,90,22,.14); box-shadow: inset 0 0 0 1.5px rgba(241,90,22,.5); }
.lb-rank { width: 26px; text-align: center; font-family: var(--display); font-weight: 900; }
.lb img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.lb-who { flex: 1; min-width: 0; }
.lb-who b { display: block; font-size: 14px; }
.lb-who small { color: var(--faint); font-size: 11px; }
.lb-pts { font-family: var(--display); font-weight: 900; font-style: italic; font-size: 17px; min-width: 44px; text-align: right; }
.lb-me { font-weight: 700; font-size: 14px; color: var(--soft); display: flex; align-items: center; gap: 6px; }

/* SpankRanker coin (replaces the 🪙 emoji, which renders as a silver eagle coin on iPhone) */
.coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE29A, #F5B83D 45%, #D9861F); box-shadow: inset 0 0 0 .09em rgba(255,255,255,.35), inset 0 -.08em .12em rgba(120,60,0,.35); position: relative; font-style: normal; }
.coin::after { content: "S"; position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 900; font-style: italic; font-size: .62em; color: #8A4B0B; }
.coin-lg { font-size: 26px; } .coin-xl { font-size: 34px; }
.coin-big { background: none !important; box-shadow: none !important; }