/* =====================================================================
   ShotGram v139.30 (app 1.3.2) — lighter, cleaner, calmer.
   Loaded last, so these rules win over the older layers.
   ===================================================================== */

/* ---------- note composer sits at the top: the keyboard never covers it */
.modal-backdrop.modal-top { align-items: flex-start !important; padding-top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 18px) !important; }

/* ---------- a call in progress lives in the chat header ---------- */
body.call-in-head.chat-open .call-overlay.minimized:not(.pip) { display: none !important; }
body.call-in-head.chat-open .room { top: var(--room-top, 0px) !important; height: var(--room-h, 100dvh) !important; }
body.call-in-head.chat-open .room-head { padding-top: max(8px, var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) !important; }
body.call-in-head .room-head #callVoice, body.call-in-head .room-head #callVideo { display: none !important; }
.room-call-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-inline-end: 4px;
  border: 0; border-radius: 999px; background: #22c55e; color: #fff; font: 700 13px/1 Inter, system-ui, sans-serif;
  font-variant-numeric: tabular-nums; flex: none; cursor: pointer;
}
.room-call-chip svg { width: 15px; height: 15px; }
.room-call-chip:active { transform: scale(.96); }

/* ---------- reels: tap to pause ---------- */
.reel-paused-icon {
  position: absolute; left: 50%; top: 50%; z-index: 6; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .38);
  opacity: 0; transform: scale(.85); transition: opacity .14s ease, transform .14s ease; pointer-events: none;
}
.reel-paused-icon svg { width: 34px; height: 34px; fill: #fff; margin-inline-start: 4px; }
[dir="rtl"] .reel-paused-icon svg { margin-inline-start: 0; margin-inline-end: 4px; transform: none; }
.reel.is-paused .reel-paused-icon { opacity: 1; transform: scale(1); }
.reel .reel-tap-hint, .reel [data-tap-hint] { will-change: auto; }

/* ---------- DMs: lighter, more like a real messenger ---------- */
.room-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.room-body .bubble-row { margin-top: 2px !important; margin-bottom: 0 !important; padding: 0 10px !important; }
.room-body .bubble-row:not(.mine) + .bubble-row.mine,
.room-body .bubble-row.mine + .bubble-row:not(.mine) { margin-top: 10px !important; }
.room-body .bubble {
  max-width: 78% !important; padding: 7px 12px 7px !important; border-radius: 20px !important;
  font-size: 15.5px !important; line-height: 1.38 !important; box-shadow: none !important;
  background-image: none !important; filter: none !important;
}
.room-body .bubble-row.mine .bubble { background-color: #3b82f6 !important; color: #fff !important; }
.room-body .bubble-row:not(.mine) .bubble { background-color: #262a36 !important; color: #f2f3f7 !important; border: 0 !important; }
/* grouped messages: the corner on the sender's side tightens like iMessage */
.room-body .bubble-row.mine + .bubble-row.mine .bubble { border-start-end-radius: 6px !important; }
.room-body .bubble-row:not(.mine) + .bubble-row:not(.mine) .bubble { border-start-start-radius: 6px !important; }
.room-body .bubble-text { unicode-bidi: plaintext; white-space: pre-wrap; overflow-wrap: anywhere; }
/* the time sits at the end of the last line instead of on its own line */
.room-body .bubble:has(> .bubble-text:first-child) { display: block !important; }
.room-body .bubble:has(> .bubble-text:first-child)::after { content: ""; display: block; clear: both; }
.room-body .bubble:not(.has-photo):not(.has-voice):not(.bare) .bubble-time {
  float: inline-end; margin: 7px 0 -3px 10px !important; padding: 0 !important; position: static !important;
  font-size: 11px !important; line-height: 1 !important; opacity: .72; display: inline-flex !important; align-items: center; gap: 3px;
}
[dir="rtl"] .room-body .bubble:not(.has-photo):not(.has-voice):not(.bare) .bubble-time { margin: 7px 10px -3px 0 !important; }
.room-body .bubble-row.mine .bubble-time, .room-body .bubble-row.mine .bubble-time .dm-receipt { color: rgba(255, 255, 255, .85) !important; }
.room-body .bubble-time .dm-receipt svg { width: 14px; height: 14px; }
.room-body .bubble-row.mine .dm-receipt.seen { color: #fff !important; }
.room-body .bubble-row.fresh { animation: sgBubbleIn .16s ease-out both !important; }
@keyframes sgBubbleIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.room-body .day-divider { font-size: 11.5px !important; margin: 14px 0 8px !important; opacity: .7; }
.dm-earlier {
  display: block; margin: 8px auto 4px; padding: 7px 16px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .07); color: var(--text, #fff); font: 600 13px/1 Inter, system-ui, sans-serif;
}
/* composer: a plain rounded field, no glowing outline */
.room .room-bar .msg-input, .room .room-bar textarea {
  border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: none !important; background: #1d2029 !important;
  border-radius: 22px !important; font-size: 16px !important;
}
.room .room-bar .msg-input:focus { border-color: rgba(255, 255, 255, .22) !important; outline: none !important; }
.room .room-head, .room .room-bar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* ---------- default colours (free accounts, no colour theme chosen) ----------
   A calm graphite instead of the old navy-purple: surfaces are neutral, the
   ShotGram gradient is kept for accents only. Reads more like a real
   premium app and less like a neon demo. */
html:not([data-theme]) {
  --ink: #09090c; --bg: #09090c;
  --surface: #111115; --surface-2: #18181e; --surface-3: #222229;
  --line: rgba(255, 255, 255, .08); --line-strong: rgba(255, 255, 255, .16); --border: rgba(255, 255, 255, .08);
  --text: #f5f5f7; --muted: #a0a1ad; --dim: #6f707c;
  --hover: rgba(255, 255, 255, .05);
}
html:not([data-theme]) body { background: #09090c; }

/* ---------- ShotGram Plus sheet, refreshed ---------- */
.plus-hero-v2 {
  position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
  margin: 2px 0 14px; padding: 22px 16px 22px !important; border-radius: 22px; overflow: visible; height: auto !important; flex-shrink: 0 !important;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255, 214, 10, .22), rgba(255, 214, 10, 0) 65%), #16161b;
  border: 1px solid rgba(255, 214, 10, .22);
}
.plus-hero-v2 .plus-hero-star .identity-badge, .plus-hero-v2 .plus-hero-star .identity-icon { width: 58px !important; height: 58px !important; }
.plus-hero-v2 > b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: #fff; background: none !important; -webkit-text-fill-color: #fff; }
.plus-tagline { font-size: 13.5px; color: var(--muted); }
.plus-hero-v2 .plus-price { margin-top: 6px; font-size: 26px; line-height: 1.25; font-weight: 800; color: #ffd60a; display: block; }
.plus-hero-v2 .plus-price small { font-size: 14px; font-weight: 600; color: var(--muted); }
.plus-active-pill { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(48, 209, 88, .16); color: #30d158; font-size: 15px; }
.plus-perks-v2 { flex-shrink: 0; display: grid; gap: 2px; margin: 0 0 14px; padding: 4px; border-radius: 18px; background: #141419; border: 1px solid var(--line); }
.plus-perks-v2 > div { display: flex; align-items: center; gap: 12px; padding: 11px 10px; border: 0 !important; }
.plus-perks-v2 > div + div { border-top: 1px solid var(--line) !important; }
.plus-perk-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 214, 10, .14); color: #ffd60a; }
.plus-perk-ic svg { width: 18px; height: 18px; }
.plus-perk-tx { display: grid; gap: 2px; min-width: 0; text-align: start; }
.plus-perk-tx b { font-size: 14.5px; font-weight: 700; color: var(--text); }
.plus-perk-tx small { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.btn.plus-buy { background: #ffd60a !important; color: #111 !important; font-weight: 800 !important; border: 0 !important; box-shadow: none !important; }

/* ---------- Clans: every row is the same size, long names never stretch it ---------- */
.clan-ranked, .top-clans { display: grid !important; gap: 8px !important; width: 100%; min-width: 0; }
#clanDiscover, #topClans { min-width: 0; overflow: hidden; }
.clan-rank-row, .top-clan {
  display: grid !important; grid-template-columns: 30px 44px minmax(0, 1fr) auto; align-items: center; gap: 10px !important;
  width: 100% !important; max-width: 100% !important; min-height: 66px; box-sizing: border-box; overflow: hidden;
  padding: 10px 12px !important; text-align: start;
}
.top-clan { grid-template-columns: 26px 44px minmax(0, 1fr) 18px; }
.clan-rank-row > .grow, .top-clan > .grow { min-width: 0; display: grid !important; gap: 4px; }
.clan-rank-row .clan-card-title, .top-clan .clan-card-title {
  display: flex !important; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap !important;
}
.clan-rank-row .clan-card-title b, .top-clan .clan-card-title b {
  min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px;
}
.clan-rank-row .clan-tag, .top-clan .clan-tag { flex: none; max-width: 76px; overflow: hidden; white-space: nowrap; }
.clan-rank-row .clan-emblem, .top-clan .clan-emblem { width: 44px !important; height: 44px !important; flex: none; }
.clan-rank-row .clan-rank-no, .top-clan .top-clan-rank { text-align: center; font-size: 16px; }
.clan-rank-row > .chip { flex: none; white-space: nowrap; }
.clan-rank-stats, .top-clan-stats { display: flex !important; gap: 10px; align-items: center; white-space: nowrap; overflow: hidden; }
.clan-card-large .clan-card-title { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clan-card-large .clan-card-title h2 { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clan-card-large, .clan-pending { overflow: hidden; }
.clan-card-body { min-width: 0; }

/* ---------- performance: fewer live blurs ----------
   Each backdrop blur makes the iPhone re-blur everything behind it on every
   frame of a scroll or an animation. These everyday surfaces now use a solid
   (slightly see-through) colour instead, which looks the same at a glance
   and scrolls much smoother. */
.sheet-backdrop, .modal-backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(0, 0, 0, .58) !important; }
body:not(.live-open) .tabbar, .topbar, .app-top, header.top {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body:not(.live-open):not(.reels-open) .tabbar { background: rgba(14, 14, 18, .96) !important; }
html[data-theme] body:not(.live-open):not(.reels-open) .tabbar { background: color-mix(in srgb, var(--surface, #111) 96%, transparent) !important; }
.comment-bar, .pa-glass, .profile-note, .note-bubble, .dm-actions, .cx-head, .studio-flow, .explore-hero-v71, .watch-search, .sg-voice-pill {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.pa-glass { background: rgba(255, 255, 255, .07) !important; }
.comment-bar { background: var(--surface, #111115) !important; }

#view .bubble-row { contain: layout style; }
html:not([data-theme]) .topbar { background: rgba(9, 9, 12, .97) !important; }
html:not([data-theme]) .topbar::after { opacity: .55; }

/* ---------- Reels: the sound (TikTok-style) ---------- */
.reel-music {
  display: inline-flex; align-items: center; gap: 7px; max-width: 78%; height: 28px; padding: 0 12px 0 9px;
  border: 0; border-radius: 999px; background: rgba(0, 0, 0, .34); color: #fff; justify-self: start;
  font: 600 13px/1 Inter, system-ui, sans-serif; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); overflow: hidden; cursor: pointer;
}
.reel-music-ic { flex: none; width: 15px; height: 15px; }
.reel-music-track { min-width: 0; overflow: hidden; white-space: nowrap; display: block; }
.reel-music-text { display: inline-block; white-space: nowrap; }
/* long names slide past, like the TikTok sound ticker */
.reel.is-active .reel-music.long .reel-music-text { animation: sgSoundTicker 9s linear infinite; padding-inline-end: 40px; }
.reel.is-paused .reel-music .reel-music-text { animation-play-state: paused !important; }
@keyframes sgSoundTicker { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(-60%); } }
[dir="rtl"] .reel.is-active .reel-music.long .reel-music-text { animation-name: sgSoundTickerRtl; }
@keyframes sgSoundTickerRtl { 0%, 12% { transform: translateX(0); } 100% { transform: translateX(60%); } }
.reel-music.is-song { background: rgba(0, 0, 0, .42); }
.rail-disc {
  width: 44px; height: 44px; margin-top: 4px; padding: 7px; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle, #2a2a2f 0 38%, #121214 39% 100%); display: grid; place-items: center;
}
.rail-disc .avatar { width: 26px !important; height: 26px !important; }
.reel.is-active:not(.is-paused) .rail-disc { animation: sgDisc 6s linear infinite; }
@keyframes sgDisc { to { transform: rotate(360deg); } }

/* ---------- the sound sheet ---------- */
.sound-body { display: grid; gap: 14px; padding-bottom: 8px; }
.sound-head { display: flex; gap: 14px; align-items: center; }
.sound-art { flex: none; width: 84px; height: 84px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: #1d1d23; }
.sound-art .avatar { width: 84px !important; height: 84px !important; border-radius: 16px !important; }
.sound-art.song { background: linear-gradient(135deg, #2b2b33, #17171c); color: #fff; }
.sound-art.song svg { width: 40px; height: 40px; }
.sound-meta { display: grid; gap: 3px; min-width: 0; text-align: start; }
.sound-title { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-artist { font-size: 14px; color: var(--muted); }
.sound-count { font-size: 13px; color: var(--dim); }
.sound-song-tag { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; color: #ffd60a; }
.sound-song-tag svg { width: 13px; height: 13px; }
.sound-use { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
.sound-use svg { width: 18px; height: 18px; }
.sound-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 12px; overflow: hidden; }
.sound-tile { position: relative; aspect-ratio: 9 / 16; border: 0; padding: 0; background: #16161a; overflow: hidden; cursor: pointer; }
.sound-tile img, .sound-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sound-tile-likes { position: absolute; left: 6px; bottom: 6px; display: inline-flex; gap: 3px; align-items: center; color: #fff; font: 700 11.5px/1 Inter, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.sound-tile-likes svg { width: 13px; height: 13px; }
.sound-tile-orig { position: absolute; top: 6px; inset-inline-start: 6px; padding: 3px 7px; border-radius: 6px; background: #fe2c55; color: #fff; font: 700 10.5px/1 Inter, sans-serif; }

/* ---------- create: sound name / picked sound ---------- */
.sound-name { display: grid; gap: 8px; margin: 8px 0; padding: 12px 14px; border-radius: 16px; background: var(--surface-2, #18181e); border: 1px solid var(--line); }
.sound-name > label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.sound-name > label svg { width: 15px; height: 15px; }
.sound-song-row { display: grid; gap: 8px; }
.sound-song-row.hidden { display: none; }
.sound-song-row .switch-row { display: flex; align-items: center; gap: 10px; }
.sound-picked svg { flex: none; }

/* ---------- screen share: 3 · 2 · 1 ---------- */
.call-screen-countdown {
  position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 10px;
  background: rgba(6, 6, 10, .78); color: #fff; text-align: center; pointer-events: none;
  animation: sgFadeIn .18s ease-out both;
}
.csc-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, .1); }
.csc-icon svg { width: 28px; height: 28px; }
.csc-num { font: 800 84px/1 Inter, system-ui, sans-serif; letter-spacing: -.02em; min-height: 90px; display: grid; place-items: center; }
.csc-num.pop { animation: sgCountPop .9s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes sgCountPop { 0% { transform: scale(1.5); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 85% { opacity: 1; } 100% { opacity: .2; transform: scale(.92); } }
.csc-text { font: 600 15px/1.35 Inter, system-ui, sans-serif; color: rgba(255, 255, 255, .85); max-width: 260px; }
.csc-spin { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: #fff; animation: sgLiveSpin .8s linear infinite; }
@keyframes sgFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- pinch zoom on LIVE / call video ---------- */
.sg-zoomed { will-change: transform; }
.sg-zoom-tag {
  position: absolute; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 64px); left: 50%; z-index: 40;
  transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
  font: 700 13px/1 Inter, system-ui, sans-serif; opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.sg-zoom-tag.on { opacity: 1; }
/* the video can grow past its box while zoomed: keep it inside its frame */
.live-watch-player, .call-stage, .call-screen-view { overflow: hidden; }

/* =====================================================================
   Owner control room + Moderation — rebuilt (v139.31)
   On a phone they are full-screen pages (not a squeezed box): a fixed
   header, tabs you can scroll sideways, and tidy rows with the actions on
   the right. On a computer they stay a centred panel.
   ===================================================================== */
.modal-backdrop:has(.mod-panel) { padding: 0 !important; align-items: stretch !important; background: #09090c !important; }
.modal:has(.mod-panel) {
  width: 100% !important; max-width: none !important; height: 100dvh !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: #09090c !important; box-shadow: none !important; display: flex !important; flex-direction: column; overflow: hidden !important;
}
.modal:has(.mod-panel) > .modal-close {
  position: absolute !important; top: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 10px) !important;
  inset-inline-end: 12px !important; inset-inline-start: auto !important; z-index: 5; width: 36px; height: 36px;
  border-radius: 50%; background: rgba(255, 255, 255, .08) !important;
}
.mod-panel { display: flex !important; flex-direction: column; flex: 1; min-height: 0; width: 100%; gap: 0 !important; max-height: none !important; height: auto !important; margin: 0 !important; }
.mod-panel .mod-head {
  flex: none; display: flex; align-items: center; gap: 10px; margin: 0 !important;
  padding: calc(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) + 14px) 60px 10px 16px !important;
  border: 0 !important; background: transparent !important;
}
[dir="rtl"] .mod-panel .mod-head { padding-inline: 16px 60px !important; }
.mod-panel .mod-title { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 20px; }
.mod-panel .mod-title b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.mod-panel .mod-title > svg { width: 24px; height: 24px; color: #ffb020; flex: none; }
.mod-panel .mod-tabs {
  flex: none; display: flex !important; gap: 8px; margin: 0 !important; padding: 4px 16px 12px !important;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; background: transparent !important; border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .07) !important; border-radius: 0 !important;
}
.mod-panel .mod-tabs::-webkit-scrollbar { display: none; }
.mod-panel .mod-tabs button {
  flex: none !important; display: inline-flex !important; align-items: center; gap: 6px; height: 36px; padding: 0 14px !important;
  border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, .1) !important; background: transparent !important;
  color: var(--muted, #a0a1ad) !important; font: 600 14px/1 Inter, system-ui, sans-serif !important; white-space: nowrap; box-shadow: none !important;
}
.mod-panel .mod-tabs button svg { width: 15px; height: 15px; flex: none; }
.mod-panel .mod-tabs button.active { background: #fff !important; color: #0b0b0f !important; border-color: #fff !important; }
.mod-panel .mod-tabs .mod-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #ff3b5c; color: #fff; font-size: 11px; }
.mod-panel .mod-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px 16px calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) + 28px) !important;
  max-height: none !important; display: grid; align-content: start; gap: 12px;
}
.mod-panel .mod-note { margin: 0 !important; padding: 12px 14px; border-radius: 14px; background: rgba(255, 176, 32, .08); border: 1px solid rgba(255, 176, 32, .18); color: #e9e2cf; font-size: 13px; line-height: 1.5; }
.mod-panel .owner-card { margin: 0 !important; padding: 14px !important; border-radius: 18px !important; background: #141419 !important; border: 1px solid rgba(255, 255, 255, .07) !important; display: grid; gap: 12px; }
.mod-panel .owner-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mod-panel .owner-card-head b { font-size: 15.5px; font-weight: 700; }
.mod-panel .owner-card-head span { font-size: 12.5px; color: var(--muted); }
.mod-panel .mod-search, .mod-panel .mod-search .input { width: 100%; }
.mod-panel .input { height: 44px; border-radius: 12px !important; background: #1b1b21 !important; border: 1px solid rgba(255, 255, 255, .08) !important; font-size: 15px !important; }
.mod-panel textarea.input { height: auto; min-height: 88px; }
/* person rows: photo · name · actions on the side, all the same height */
.mod-panel .mod-row {
  display: grid !important; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  margin: 0 !important; padding: 10px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  background: transparent !important; border-radius: 0 !important;
}
.mod-panel .mod-row:last-child { border-bottom: 0 !important; }
.mod-panel .mod-row > .avatar { width: 44px !important; height: 44px !important; }
.mod-panel .mod-row .grow { min-width: 0; display: grid; gap: 2px; }
.mod-panel .mod-row .grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-panel .mod-row .row { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.mod-panel .mod-actions { display: flex !important; flex-direction: column; gap: 6px; align-items: stretch; margin: 0 !important; width: auto !important; }
.mod-panel .mod-actions .btn { height: 32px; min-width: 84px; padding: 0 12px !important; border-radius: 10px !important; font-size: 13px !important; white-space: nowrap; width: auto !important; }
.mod-panel .btn.block { width: 100%; height: 46px; border-radius: 14px !important; }
.mod-panel .role-chip { flex: none; }
.mod-panel .empty { padding: 40px 10px; }
/* computers: a centred panel again */
@media (min-width: 900px) {
  .modal-backdrop:has(.mod-panel) { padding: 24px !important; align-items: center !important; background: rgba(0, 0, 0, .6) !important; }
  .modal:has(.mod-panel) { width: min(760px, 100%) !important; height: min(88vh, 900px) !important; border-radius: 22px !important; border: 1px solid rgba(255,255,255,.08) !important; }
  .mod-panel .mod-head { padding-top: 18px !important; }
}

/* ======== v139.33 — Share sheet, redesigned (Instagram / TikTok) ========
   One light sheet sized to its content: search, a 4-across grid of the
   people you talk to most, then the apps row. Pick someone and the apps make
   room for the message bar + Send. No blur, no full-screen list. */
.sheet.sgs {
  display: flex; flex-direction: column; max-height: min(74dvh, 640px); height: auto;
  overflow: hidden; padding: 4px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-radius: 20px 20px 0 0; border-top: 1px solid var(--line);
}
.sheet.sgs .sheet-grip { margin: 6px auto 4px; width: 36px; }
.sheet.sgs .sheet-list { display: none; }
.sgs-head { position: relative; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 52px; }
.sgs-title { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgs-x { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%;
  border: 0; padding: 0; display: grid; place-items: center; background: var(--surface-3); color: var(--text); }
.sgs-x svg { width: 18px; height: 18px; }
.sgs-search { display: flex; align-items: center; gap: 8px; height: 38px; margin: 6px 14px 4px; padding: 0 12px;
  border-radius: 12px; background: var(--surface-3); color: var(--muted); flex: none; }
.sgs-search svg { width: 17px; height: 17px; flex: none; }
.sgs-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 15px; padding: 0; -webkit-appearance: none; appearance: none; }
.sgs-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.sgs-grid { flex: 0 1 auto; min-height: 112px; max-height: 236px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 12px 4px; padding: 10px 10px 12px; scrollbar-width: none; }
.sgs-grid::-webkit-scrollbar { display: none; }
.sgs-wait, .sgs-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 88px; color: var(--muted); font-size: 13.5px; text-align: center; }
.sgs-p { display: grid; justify-items: center; gap: 6px; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); -webkit-tap-highlight-color: transparent; }
.sgs-av { position: relative; display: block; border-radius: 50%; transition: transform .12s ease; }
.sgs-p:active .sgs-av { transform: scale(.94); }
.sgs-av .avatar { width: 58px !important; height: 58px !important; display: block; }
.sgs-p.on .sgs-av .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--blue, #0a84ff); }
.sgs-tick { position: absolute; inset-inline-end: -2px; bottom: -2px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue, #0a84ff); color: #fff; border: 2px solid var(--surface); transform: scale(0); transition: transform .14s ease; }
.sgs-tick svg { width: 12px; height: 12px; stroke-width: 3; }
.sgs-p.on .sgs-tick { transform: scale(1); }
.sgs-name { display: flex; align-items: center; justify-content: center; gap: 3px; max-width: 100%; font-size: 12px; line-height: 1.25; color: var(--text); }
.sgs-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sgs-name .verified, .sgs-name svg { width: 12px; height: 12px; flex: none; }

.sheet.sgs .share-attachment { margin: 0 14px 8px; }
.sgs-foot { display: none; align-items: center; gap: 8px; padding: 8px 14px 4px; border-top: 1px solid var(--line); flex: none; }
.sheet.sgs.has-pick .sgs-foot { display: flex; animation: sgsIn .16s ease; }
@keyframes sgsIn { from { opacity: 0; transform: translateY(6px); } }
.sgs-note { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 42px; padding: 0 4px; border-radius: 21px; background: var(--surface-3); }
.sgs-note input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 15px; padding: 0 10px; }
.sgs-mini { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; background: none; color: var(--muted); }
.sgs-mini svg { width: 20px; height: 20px; }
.sgs-send { flex: none; height: 42px; min-width: 76px; padding: 0 18px; border-radius: 21px; border: 0; background: var(--blue, #0a84ff); color: #fff; font: inherit; font-size: 15px; font-weight: 700; }
.sgs-send:disabled { opacity: .45; }

.sgs-rows { flex: none; border-top: 1px solid var(--line); padding-top: 12px; }
.sheet.sgs.has-pick .sgs-rows { display: none; }
.sgs-apps, .sgs-tools { display: flex; gap: 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 0 10px; }
.sgs-apps::-webkit-scrollbar, .sgs-tools::-webkit-scrollbar { display: none; }
.sgs-tools { padding-top: 12px; }
.sgs-tools:empty { display: none; }
.sgs-app, .sgs-tool { flex: 0 0 70px; width: 70px; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--text); -webkit-tap-highlight-color: transparent; }
.sgs-app small, .sgs-tool small { font-size: 11.5px; line-height: 1.2; color: var(--muted); text-align: center; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sgs-app .share-app-ic { width: 52px; height: 52px; transition: transform .12s ease; }
.sgs-app .share-app-ic svg { width: 26px; height: 26px; }
.sgs-app:active .share-app-ic, .sgs-tool:active .sgs-tool-ic { transform: scale(.92); }
.sgs-tool-ic { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text); transition: transform .12s ease; }
.sgs-tool-ic svg { width: 21px; height: 21px; }
.sgs-tool.danger .sgs-tool-ic { color: var(--bad, #ff453a); }

/* v139.33 — a shared post that is still loading (the chat no longer waits for it) */
.shared-post.is-loading { display: grid; gap: 8px; padding: 10px; min-width: 200px; pointer-events: none; }
.shared-ph-head { display: flex; align-items: center; gap: 8px; }
.shared-ph-av { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.10); }
.shared-ph-line { width: 90px; height: 10px; border-radius: 5px; background: rgba(255,255,255,.10); }
.shared-ph-media { display: block; width: 100%; aspect-ratio: 4 / 5; max-height: 260px; border-radius: 10px; background: rgba(255,255,255,.07); }

/* v139.33 — end of Reels */
.reel.reel-end { display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 30%, #1b1b24, #08080b 70%); }
.reel-end-box { display: grid; justify-items: center; gap: 10px; max-width: 300px; padding: 24px; text-align: center; color: #fff; }
.reel-end-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); }
.reel-end-ic svg { width: 30px; height: 30px; stroke-width: 2.4; }
.reel-end-box b { font-size: 20px; font-weight: 800; }
.reel-end-box span { font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.45; }
.reel-end-box .btn { min-width: 200px; justify-content: center; }
.reel-end-box .btn svg { width: 18px; height: 18px; }

/* v139.33 — Clear display: only the video */
body.sg-clear-display .reel-rail, body.sg-clear-display .reel-info, body.sg-clear-display .reel-shade,
body.sg-clear-display .reel-sound-badge, body.sg-clear-display .reel-paused-icon,
body.sg-clear-display .reel-overlay-layer,
body.sg-clear-display .w-rail, body.sg-clear-display .w-info, body.sg-clear-display .w-owner,
body.sg-clear-display .w-shade, body.sg-clear-display .w-progress, body.sg-clear-display .watch-top,
body.sg-clear-display .topbar, body.sg-clear-display .tabbar {
  opacity: 0 !important; pointer-events: none !important; transition: opacity .2s ease;
}
.sg-clear-hint {
  position: fixed; left: 50%; bottom: calc(40px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 1200; padding: 9px 16px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff;
  font-size: 13.5px; font-weight: 600; white-space: nowrap; pointer-events: none; transition: opacity .5s ease;
}
.sg-clear-hint.out { opacity: 0; }

/* v139.33 — badges never stuck to the name: a small space before the tick /
   star, centred on the name's line (they sat flush and ~4px too high) */
.badge-slot:not(:empty) { margin-inline-start: 5px; vertical-align: middle; position: relative; top: -1px; }
/* rows that already space their children with a flex gap keep that gap */
.row > .badge-slot, [style*="gap"] > .badge-slot, .badge-slot:first-child { margin-inline-start: 0; }
.row > .badge-slot, [style*="gap"] > .badge-slot { top: 0; }

/* ===================================================================
   v139.37 — profile badges: one design, ring, level-up moment
   Everything animated uses transform / opacity only (GPU), and nothing
   animated sits under a CSS filter (a filter would repaint every frame).
   =================================================================== */
.family-badge-art.sgb{display:block;filter:none!important;overflow:visible;flex:0 0 auto}
.badge-detail-hero .family-badge-art.sgb,.badge-showcase-tile .family-badge-art.sgb,.badge-level-node .family-badge-art.sgb{filter:none!important}
.profile-tag-icon .family-badge-art.sgb{width:27px;height:27px}
.badge-level-node:not(.reached) .family-badge-art.sgb{opacity:.55}

.sgb-hero{--ring:#8b93a0;position:relative;width:152px;height:152px;display:grid;place-items:center;margin:0 auto 6px}
.sgb-hero::before{content:"";position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,var(--ring) 0,transparent 70%);opacity:.22}
.sgb-hero .family-badge-art.sgb{position:relative;width:118px!important;height:118px!important;margin:0!important}
.sgb-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sgb-ring circle{fill:none;stroke-width:3.4}
.sgb-ring-track{stroke:rgba(255,255,255,.08)}
.sgb-ring-fill{stroke:var(--ring);stroke-linecap:round;transition:stroke-dasharray .9s cubic-bezier(.2,.8,.2,1)}
.tier-locked{--ring:#8b93a0;--glow:#9aa3b0}
.tier-bronze{--ring:#f0a066;--glow:#f0a066}
.tier-silver{--ring:#dfe6f0;--glow:#e6edf7}
.tier-gold{--ring:#ffd24a;--glow:#ffd24a}
.tier-platinum{--ring:#9cefff;--glow:#9cefff}
.tier-diamond{--ring:#5fb0ff;--glow:#6cb8ff}
.tier-emerald{--ring:#34e89e;--glow:#34e89e}
.tier-ruby{--ring:#ff4d6d;--glow:#ff5a78}
.tier-opal{--ring:#c3a6ff;--glow:#c9afff}
.badge-progress-numbers b{color:#eef1f5;font-weight:800}

/* light sweep across Ruby / Opal (large badge only) */
.sgb-live .sgb-sweep{animation:sgbSweep 4.2s ease-in-out infinite}
@keyframes sgbSweep{0%{transform:translateX(0)}55%,100%{transform:translateX(240px)}}

/* level-up reveal */
.sgb-levelup{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 42%,rgba(18,22,34,.97),rgba(3,4,8,.985) 70%);opacity:0;transition:opacity .25s ease}
.sgb-levelup.in{opacity:1}.sgb-levelup.out{opacity:0}
.sgb-lu-card{position:relative;text-align:center;color:#fff;max-width:340px;transform:translateY(18px) scale(.96);transition:transform .5s cubic-bezier(.2,1.25,.3,1)}
.sgb-levelup.in .sgb-lu-card{transform:none}
.sgb-lu-kicker{font-size:12px;font-weight:900;letter-spacing:.24em;color:var(--glow);margin-bottom:6px}
.sgb-lu-art{position:relative;width:220px;height:220px;margin:0 auto;display:grid;place-items:center}
.sgb-lu-art .family-badge-art.sgb{position:relative;width:176px;height:176px;animation:sgbRise .75s cubic-bezier(.2,1.35,.3,1) both}
.sgb-lu-rays{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;
  background:repeating-conic-gradient(var(--glow) 0deg 7deg,transparent 7deg 22deg);opacity:.16;
  -webkit-mask-image:radial-gradient(circle,#000 0,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 0,#000 18%,transparent 62%);
  animation:sgbSpin 16s linear infinite;pointer-events:none}
.sgb-lu-sparks{position:absolute;inset:0;pointer-events:none}
.sgb-lu-sparks i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:2px;background:var(--glow);opacity:0;
  transform:rotate(var(--a)) translateY(0) scale(.2);animation:sgbSpark 1s cubic-bezier(.1,.8,.3,1) forwards;animation-delay:calc(var(--t) + .25s)}
.sgb-lu-sparks i:nth-child(3n){background:#fff;width:5px;height:5px;margin:-2.5px;border-radius:50%}
.sgb-lu-card h2{margin:4px 0 2px;font-size:28px;font-weight:900;letter-spacing:.01em}
.sgb-lu-meta{font-size:12px;font-weight:800;letter-spacing:.12em;color:#c3cad4;text-transform:uppercase}
.sgb-lu-next{margin-top:10px;font-size:13px;color:#9aa4b1}
.sgb-lu-btn{margin-top:20px;min-width:160px;padding:13px 26px;border:0;border-radius:999px;background:#fff;color:#0b0e14;font-weight:900;font-size:15px;cursor:pointer}
@keyframes sgbRise{0%{opacity:0;transform:scale(.35) rotate(-14deg)}60%{opacity:1;transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes sgbSpin{to{transform:rotate(360deg)}}
@keyframes sgbSpark{0%{opacity:0;transform:rotate(var(--a)) translateY(-40px) scale(.2)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1)) scale(1)}}

@media (prefers-reduced-motion: reduce){
  .sgb-live .sgb-sweep,.sgb-lu-rays,.sgb-lu-art .family-badge-art.sgb{animation:none}
  .sgb-lu-sparks{display:none}
  .sgb-lu-card,.sgb-ring-fill{transition:none}
}
html[lang="ar"] .sgb-lu-kicker,html[lang="ar"] .sgb-lu-meta{letter-spacing:0}

/* v139.38 — badges with status: aura motion, rarity colours, "you vs them" */
.profile-tag-icon .family-badge-art.sgb{width:36px!important;height:36px!important}
.profile-tag-row{gap:4px}
.sgb .sgb-aura,.sgb .sgb-halo{transform-box:fill-box;transform-origin:center}
.sgb-moving .sgb-aura{animation:sgbAura 26s linear infinite}
.sgb-moving.sgb-opal .sgb-aura{animation-duration:18s}
.sgb-moving .sgb-halo{animation:sgbHalo 3.2s ease-in-out infinite}
@keyframes sgbAura{to{transform:rotate(360deg)}}
@keyframes sgbHalo{0%,100%{opacity:.75;transform:scale(.94)}50%{opacity:1;transform:scale(1.04)}}
.badge-rarity.rarity-locked{color:#9aa3b0!important;border-color:#4a515c!important;background:rgba(154,163,176,.08)!important}
.badge-rarity.rarity-bronze{color:#f0a066!important;border-color:rgba(240,160,102,.5)!important;background:rgba(240,160,102,.1)!important}
.badge-rarity.rarity-silver{color:#e6edf7!important;border-color:rgba(230,237,247,.45)!important;background:rgba(230,237,247,.08)!important}
.badge-rarity.rarity-gold{color:#ffd24a!important;border-color:rgba(255,210,74,.5)!important;background:rgba(255,210,74,.1)!important}
.badge-rarity.rarity-platinum{color:#9cefff!important;border-color:rgba(156,239,255,.5)!important;background:rgba(156,239,255,.1)!important}
.badge-rarity.rarity-diamond{color:#6cb8ff!important;border-color:rgba(108,184,255,.55)!important;background:rgba(108,184,255,.12)!important}
.badge-rarity.rarity-emerald{color:#34e89e!important;border-color:rgba(52,232,158,.55)!important;background:rgba(52,232,158,.12)!important}
.badge-rarity.rarity-ruby{color:#ff6b86!important;border-color:rgba(255,77,109,.6)!important;background:rgba(255,77,109,.14)!important}
.badge-rarity.rarity-opal{color:#fff!important;border-color:transparent!important;background:linear-gradient(90deg,#ff8fd8,#a98bff,#62e0ff,#ffd88a)!important}
.sgb-hero .family-badge-art.sgb{width:132px!important;height:132px!important}
.sgb-compare{display:flex;align-items:center;gap:12px;margin:2px 0 14px;padding:10px 14px;border-radius:14px;background:linear-gradient(90deg,rgba(124,92,255,.14),rgba(124,92,255,.04));border:1px solid rgba(124,92,255,.28)}
.sgb-compare .family-badge-art.sgb{flex:0 0 auto}
.sgb-compare-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.sgb-compare-copy span{font-size:11px;font-weight:800;letter-spacing:.06em;color:#aab3c0;text-transform:uppercase}
.sgb-compare-copy b{font-size:14px;color:#fff}
html[lang="ar"] .sgb-compare-copy span{letter-spacing:0}
@media (prefers-reduced-motion: reduce){.sgb-moving .sgb-aura,.sgb-moving .sgb-halo{animation:none}}
.profile-tag-row{min-height:40px;margin:2px auto 6px;align-items:center}
.profile-tag-row .profile-tag-icon{width:40px!important;height:40px!important;padding:0;display:grid;place-items:center;overflow:visible}
.profile-tag-row .profile-tag-icon .family-badge-art.sgb{width:38px!important;height:38px!important}
.sgb-compare .family-badge-art.sgb{width:50px!important;height:50px!important}
.badge-rarity.rarity-opal{-webkit-text-fill-color:#1b1033!important;color:#1b1033!important;font-weight:900;text-shadow:none}

/* v139.39 — insignia: calm, jeweller's finish (overrides the v139.38 styles) */
.badge-rarity[class*="rarity-"]{background:transparent!important;border:1px solid currentColor!important;-webkit-text-fill-color:currentColor!important;font-weight:800;letter-spacing:.14em;font-size:11px;padding:3px 10px}
.badge-rarity.rarity-opal{color:#e4dcff!important}
.badge-rarity.rarity-diamond{color:#d9e9fb!important}
.badge-rarity.rarity-emerald{color:#7fe0b2!important}
.badge-rarity.rarity-ruby{color:#ff8fa6!important}
.badge-rarity.rarity-platinum{color:#e3e8ee!important}
html[lang="ar"] .badge-rarity[class*="rarity-"]{letter-spacing:0}
.sgb-hero::before{opacity:.12}
.sgb-levelup{background:rgba(5,6,9,.97)}
.sgb-lu-kicker{color:#c9ced6;font-weight:700;letter-spacing:.32em;font-size:11px}
.sgb-lu-art{width:200px;height:200px}
.sgb-lu-art .family-badge-art.sgb{width:168px;height:168px;animation:sgbSettle .9s cubic-bezier(.2,.8,.2,1) both}
.sgb-lu-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.sgb-lu-ring circle{fill:none;stroke:var(--glow);stroke-width:.8;stroke-dasharray:100;stroke-dashoffset:100;opacity:.8;animation:sgbDraw 1.4s .25s cubic-bezier(.4,0,.2,1) forwards}
.sgb-lu-card h2{font-weight:800;letter-spacing:.005em}
.sgb-lu-meta{letter-spacing:.2em;font-weight:700}
.sgb-lu-btn{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5);font-weight:700;letter-spacing:.06em}
.sgb-live .sgb-sweep{animation:sgbSweep 6s ease-in-out infinite}
@keyframes sgbSettle{0%{opacity:0;transform:scale(.92)}100%{opacity:1;transform:scale(1)}}
@keyframes sgbDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.sgb-lu-ring circle{animation:none;stroke-dashoffset:0}}
.badge-tile-level{display:none!important}
.sgb-levelup{background:#05060a!important}
/* v139.40 — no ring; the medallion itself is the hero */
.sgb-hero{width:auto;height:auto;margin:4px auto 10px}
.sgb-hero::before{display:none}
.sgb-hero .family-badge-art.sgb{width:min(220px,58vw)!important;height:min(220px,58vw)!important}
.sgb-lu-art{width:auto;height:auto;margin:6px auto 4px}
.sgb-lu-art .family-badge-art.sgb{width:min(240px,64vw)!important;height:min(240px,64vw)!important}
.sgb-lu-ring{display:none}

/* v139.40 — photo posts: the frame takes the photo's own shape (4:5 … 1.91:1),
   so Home shows the whole photo, like Instagram */
.media-wrap.is-photo .slides{aspect-ratio:var(--media-ar,1)}
.media-wrap.is-photo .media-slide-stage{height:100%}
/* v139.40 — the badge is the symbol itself: no tiles, rings or backdrops */
.badge-showcase-tile{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.badge-showcase-tile.active{background:transparent!important}
.badge-showcase-tile.active .family-badge-art{transform:scale(1.08)}
.sgb-hero{background:none!important}
.sgb-hero::before,.sgb-hero::after{display:none!important}
.badge-detail-hero .family-badge-art.sgb{filter:none!important}
.sgb-compare .family-badge-art.sgb{width:52px!important;height:52px!important}
/* v139.42 — black opal (tier VIII): the colours drift inside the stone */
.sgb-black-opal .sgb-opal-play,.sgb-black-opal .sgb-opal-play2{transform-box:view-box;transform-origin:60px 60px}
.sgb-black-opal .sgb-opal-play{animation:sgbOpal 10s ease-in-out infinite alternate}
.sgb-black-opal .sgb-opal-play2{animation:sgbOpal2 7s ease-in-out infinite alternate}
.sgb-black-opal .sgb-opal-glints{animation:sgbTwinkle 2.6s ease-in-out infinite alternate}
@keyframes sgbOpal{0%{transform:rotate(0) translate(0,0)}50%{transform:rotate(40deg) translate(4px,-3px)}100%{transform:rotate(-30deg) translate(-5px,4px)}}
@keyframes sgbOpal2{0%{transform:rotate(0) scale(1)}100%{transform:rotate(-70deg) scale(1.12)}}
@keyframes sgbTwinkle{0%{opacity:.35}100%{opacity:1}}
.badge-rarity.rarity-opal{color:#9ff3ff!important;border-color:#9ff3ff!important;text-shadow:0 0 10px rgba(110,240,255,.35)}
@media (prefers-reduced-motion: reduce){.sgb-black-opal .sgb-opal-play,.sgb-black-opal .sgb-opal-play2,.sgb-black-opal .sgb-opal-glints{animation:none}}

/* v139.43 — a photo in a post can't be dragged around inside its frame.
   The frame is a sideways carousel; it was also scrollable up/down, so a
   finger landing on the photo while scrolling the feed dragged the photo
   (black gap above, photo cut off below). */
.media-wrap .slides{overflow-y:hidden!important;overscroll-behavior-y:none}
.media-wrap.is-photo .media-slide-stage{position:relative;overflow:hidden}
.media-wrap.is-photo img.slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:none!important}

/* v139.43 — the badge window: the badge is big, not huge */
.sgb-hero .family-badge-art.sgb{width:min(150px,40vw)!important;height:min(150px,40vw)!important}
.badge-detail-hero{padding-bottom:10px}
.badge-showcase-tile .family-badge-art.sgb{width:44px!important;height:44px!important}
.sgb-lu-art .family-badge-art.sgb{width:min(190px,52vw)!important;height:min(190px,52vw)!important}

/* v139.44 — raised hands: the avatar is a <span> too, and ".mj-hand span
   {flex:1}" stretched it into a wide oval. Keep it a fixed circle. */
.mj-hand > .avatar,.mj-hand > span:first-child.avatar,.mj-hand .avatar{flex:0 0 32px!important;width:32px!important;height:32px!important;min-width:32px;border-radius:50%;overflow:hidden}
.mj-hand .avatar img{width:100%!important;height:100%!important;object-fit:cover;border-radius:50%}
.mj-hand > span[dir]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* v139.44 — send/invite sheet: long names end in "…" instead of being cut on
   both sides (text-overflow does not work on a flex box) */
.sgs-name{display:block!important;text-align:center;width:100%;max-width:84px;margin:0 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sgs-p{width:100%;overflow:hidden}
.sgs-grid{max-height:min(300px,42vh)}

/* v139.45 — clan ban list */
.clan-bans h2{margin:0 0 4px;font-size:20px}
.clan-bans-list{display:grid;gap:8px;margin-top:12px;max-height:60vh;overflow-y:auto}
.clan-ban-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.clan-ban-info{display:grid;gap:2px;min-width:0}
.clan-ban-info .truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clan-ban-by{color:#ffb86b}
.clan-ban-row .btn{flex:none}
.clan-bans-h{margin:10px 2px 2px;font-size:13px;font-weight:800;color:var(--muted)}
.clan-ban-info .small.truncate{white-space:normal!important;overflow:visible;text-overflow:clip;line-height:1.35}
.clan-bans h2{padding-inline-end:44px}
.clan-bans h2{padding:0 44px!important;text-align:start}

/* v139.46 — Help page: staff button fits the screen; link to verification */
.support-staff-link{width:auto!important;max-width:calc(100% - 32px);box-sizing:border-box;margin:0 16px 14px!important}
.support-verify-link{display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 4px;padding:12px 14px;border-radius:14px;border:1px solid rgba(124,92,255,.35);background:rgba(124,92,255,.10);color:var(--text);text-align:start;cursor:pointer}
.support-verify-link .grow{display:grid;gap:2px;min-width:0}
.support-verify-link b{font-size:14px}.support-verify-link .grow span{font-size:12px;color:var(--muted)}
.support-verify-link svg{width:22px;height:22px;flex:none}