/* The screens of the chat column (gift screen, profiles) and the pause page — sizes, colours and fonts taken
   from the original's screens (Montserrat; purple #7957B2; dark text #04050F; the chat column is 375px). */

.messenger { position: relative; }
.room-screen { position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; background: #fff; font-family: Montserrat, Cairo, sans-serif; color: #04050f; overflow: hidden; }
[lang="ar"] .room-screen { font-family: Cairo, Montserrat, sans-serif; }
.room-screen button { font-family: inherit; }

/* ── gift screen ── */
.gs { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.gs-header { flex: 0 0 auto; padding-top: 10px; background: #fff; }
.gs-actions { display: flex; align-items: center; height: 32px; margin-top: 8px; padding: 0 9px 0 5px; }
.gs-back { width: 22px; height: 22px; display: grid; place-items: center; margin-inline-end: 6px; }
[dir="rtl"] .gs-back span { display: block; transform: scaleX(-1); }
.gs-btns { flex: 1; display: flex; gap: 8px; }
.gs-chip, .gs-cats { height: 32px; border-radius: 20px; background: #7957b2; color: #fff; display: inline-flex; align-items: center; }
.gs-chip { width: 58px; padding: 0 4px 0 2px; gap: 4px; }
.gs-ava { width: 28px; height: 28px; border-radius: 50%; background: #ddd center / cover no-repeat; }
.gs-chev { display: inline-grid; color: inherit; }
.gs-cats { width: 126px; padding: 0 8px 0 10px; gap: 4px; }
.gs-cats b { letter-spacing: -.2px; }
.gs-cats b, .gs-player b { flex: 1; font-size: 12px; font-weight: 700; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-player { flex: 1; max-width: 126px; height: 32px; border-radius: 20px; border: 1px solid #7957b2; color: #7957b2; display: inline-flex; align-items: center; padding: 0 10px; gap: 4px; background: #fff; }
.gs-counts { display: flex; justify-content: space-between; height: 34px; margin: 6px 24px 4px; }
.gs-count { min-width: 26px; padding: 0 10px; height: 34px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 700; color: #808080; background: none; }
.gs-count.on { border-color: #7957b2; color: #7957b2; }
.gs-count.off { color: #9a9ba0; }
.gs-list { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 12px; }
.gs-cat { background: #fff; }
.gs-caption { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; }
.gs-cap-text { font-size: 14px; font-weight: 700; line-height: 18px; background: linear-gradient(90deg, var(--cc, #8e36de), #c13ad6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.gs-timer { height: 26px; padding: 0 10px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.gs-grid { display: grid; grid-template-columns: repeat(4, 84px); justify-content: center; }
.gs-gift { width: 84px; height: 124px; display: flex; flex-direction: column; align-items: center; background: none; padding: 0; }
.gs-gift.locked { opacity: .55; }
.gs-gift-img { position: relative; width: 64px; height: 76px; display: grid; place-items: center; }
.gs-pic { max-width: 64px; max-height: 64px; object-fit: contain; }
.gs-pic.emoji { font-size: 50px; line-height: 64px; }
.gs-price { margin-top: 14px; width: 68px; height: 24px; border-radius: 50px; background: rgba(131, 187, 12, .5); display: inline-flex; align-items: center; justify-content: center; gap: 2px; }
.gs-price i { font-style: normal; font-size: 14px; line-height: 1; }
.gs-price b { font-size: 14px; font-weight: 700; color: #000; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.gs-more-wrap { display: flex; justify-content: center; padding: 2px 0 17px; }
.gs-more { width: 164px; height: 32px; border-radius: 20px; border: 2px solid #7957b2; background: #fcf4fa; color: #7957b2; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.gs-drop { position: absolute; z-index: 5; min-width: 208px; max-height: 60%; overflow-y: auto; background: #fff; border: 2px solid #7957b2; border-radius: 0 10px 10px 10px; padding: 0 5px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
[dir="rtl"] .gs-drop { border-radius: 10px 0 10px 10px; }
.gs-drop-in { display: flex; flex-direction: column; }
.gs-drop-item { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px 0 6px; font-size: 14px; font-weight: 500; color: #04050f; background: none; text-align: start; white-space: nowrap; }
.gs-drop-item:hover { background: #f4effb; }
.gs-drop-item.danger { color: #e03131; }
.gs-drop-ico { width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; }
.gs-drop-ico .gs-cat-ico { max-width: 24px; max-height: 24px; }
.gs-drop-ico .gs-cat-ico.emoji { font-size: 18px; }
.gs-mini { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.gs-block { height: auto; }
.gs-block-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px 0; }
.gs-block-head b { font-size: 14px; font-weight: 700; color: #04050f; }
.gs-cat-select { height: 32px; border-radius: 20px; border: 0; background: #7957b2; color: #fff; font: 700 12px Montserrat, Cairo, sans-serif; padding: 0 12px; }

/* ── profiles ── */
.pf { display: flex; flex-direction: column; height: 100%; min-height: 0; position: relative; }
.pf-header { position: relative; flex: 0 0 64px; height: 64px; display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.pf-header.small { flex-basis: 40px; height: 40px; background: #fff; }
.pf-back { width: 52px; height: 100%; display: grid; place-items: center; background: none; }
[dir="rtl"] .pf-back .pf-ico { transform: scaleX(-1); }
.pf-caption { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 18px; font-weight: 700; color: #04050f; pointer-events: none; }
.pf-menu-btn { width: 40px; height: 100%; display: grid; place-items: center; margin-inline-end: 6px; background: none; }
.pf-ico { display: inline-grid; place-items: center; line-height: 0; }
.pf-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.pf-pop { position: absolute; top: 40px; inset-inline-end: 38px; z-index: 6; min-width: 194px; background: #fff; border: 2px solid #7957b2; border-radius: 10px 0 10px 10px; padding: 5px; display: flex; flex-direction: column; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
[dir="rtl"] .pf-pop { border-radius: 0 10px 10px 10px; }
.pf-pop button { display: flex; align-items: center; gap: 8px; padding: 8px; font-size: 14px; font-weight: 500; background: none; text-align: start; }
.pf-pop button:hover { background: #f4effb; }
.pf-pop button.danger { color: #e03131; }

/* my profile: the warm header with hearts behind the top */
.pf.self { background: #fff; }
.pf.self::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 320px; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90' viewBox='0 0 120 90'%3E%3Cg fill='%23fff' fill-opacity='.28'%3E%3Cpath d='M20 30s-9-6-9-12a5 5 0 0 1 9-3 5 5 0 0 1 9 3c0 6-9 12-9 12z'/%3E%3Cpath d='M78 22s-6-4-6-8a3.4 3.4 0 0 1 6-2 3.4 3.4 0 0 1 6 2c0 4-6 8-6 8z'/%3E%3Cpath d='M100 70s-11-7-11-15a6 6 0 0 1 11-3 6 6 0 0 1 11 3c0 8-11 15-11 15z'/%3E%3Cpath d='M45 78s-5-3.4-5-7a3 3 0 0 1 5-1.6 3 3 0 0 1 5 1.6c0 3.6-5 7-5 7z'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #f9b06c 0%, #fbc590 38%, #fde3cc 72%, rgba(255, 255, 255, 0) 100%); }
.pf.self .pf-scroll { position: relative; z-index: 1; }
.pf-content { padding: 16px 16px 80px; }
.pf-main { position: relative; display: flex; gap: 21px; height: 109px; margin: 0 0 14px 5px; }
[dir="rtl"] .pf-main { margin: 0 5px 14px 0; }
.pf-photo-wrap { position: relative; flex: 0 0 84px; height: 109px; }
.pf-photo { width: 84px; height: 109px; border-radius: 14px; background: #eee center / cover no-repeat; }
.pf-frame { position: absolute; left: -21px; top: -26px; width: 126px; height: 164px; object-fit: contain; pointer-events: none; }
.pf-frame.color { left: -4px; top: -4px; width: 92px; height: 117px; border-radius: 17px; border: 4px solid var(--fc); }
.pf-info { min-width: 0; flex: 1; padding-top: 5px; }
.pf-info .pf-name, .pf-info .pf-location { margin-inline-end: 48px; }
.pf-name { font-size: 18px; font-weight: 700; line-height: 22px; color: #000; margin: 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-location { display: flex; align-items: center; gap: 6px; height: 20px; margin-top: 11px; font-size: 14px; font-weight: 500; color: #cc7244; }
.pf-status, .pf-status-input { display: block; width: 100%; margin-top: 12px; padding: 4px 8px; border-radius: 5px; background: #fff; border: 0; font: 500 12px/15px inherit; font-family: inherit; color: #04050f; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-status-input { outline: 2px solid #7957b2; }
.pf-sub-caption { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; font-size: 14px; font-weight: 700; color: #333; }
.pf-i { width: 20px; height: 16px; display: inline-grid; place-items: center; background: none; }
.pf-statistic { margin-bottom: 14px; text-align: center; }
.pf-stats { display: flex; justify-content: space-around; margin-top: 11px; }
.pf-stat { position: relative; min-width: 78px; display: flex; flex-direction: column; align-items: center; cursor: default; }
.pf-stat-ico { width: 18px; height: 18px; font-size: 15px; line-height: 18px; }
.pf-daily { position: absolute; top: -5px; left: calc(50% + 14px); font-size: 12px; font-weight: 700; line-height: 24px; color: #83bb0c; }
[dir="rtl"] .pf-daily { left: auto; right: calc(50% + 14px); }
.pf-daily.zero { color: #999; }
.pf-count { margin-top: 5px; font-size: 20px; font-weight: 700; line-height: 22px; color: #333; }
.pf-hint { margin-top: 5px; font-size: 14px; font-weight: 500; line-height: 22px; color: rgba(51, 51, 51, .6); }
.pf-league { display: flex; align-items: center; gap: 10px; width: 100%; height: 72px; padding: 0 12px; margin-bottom: 14px; border-radius: 20px; background: #ffdf7d; text-align: start; }
.pf-league-img { flex: 0 0 60px; height: 64px; display: grid; place-items: center; }
.pf-league-img span, .pf-league.locked .pf-league-img { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc) 40%, #fff), var(--lc) 60%, color-mix(in srgb, var(--lc) 60%, #000)); border: 3px solid #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.pf-league.locked .pf-league-img { background: #ccc; font-size: 22px; }
.pf-league-text { flex: 1; min-width: 0; }
.pf-league-hint { font-size: 12px; font-weight: 500; line-height: 16px; color: #808080; }
.pf-scale { position: relative; height: 18px; margin: 4px 0 0 10px; border-radius: 12px; border: 2px solid #7957b2; background: #392b64; overflow: visible; }
[dir="rtl"] .pf-scale { margin: 4px 10px 0 0; }
.pf-scale-fill { position: absolute; inset: 0 auto 0 0; border-radius: 12px; background: linear-gradient(90deg, #ffb300, #ffd84a); }
[dir="rtl"] .pf-scale-fill { inset: 0 0 0 auto; }
.pf-scale-txt { position: relative; display: block; text-align: center; font-size: 12px; font-weight: 700; line-height: 14px; color: #fff; }
.pf-scale-ico, .pf-scale-lock { position: absolute; top: -5px; width: 24px; height: 24px; border-radius: 50%; background: #4f369c; border: 2px solid #7957b2; display: grid; place-items: center; }
.pf-scale-ico { inset-inline-start: -14px; }
.pf-scale-lock { inset-inline-end: -14px; }
.pf-league-right { flex: 0 0 auto; }
.pf-timer { padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 14px; font-weight: 700; line-height: 18px; white-space: nowrap; }
.pf-rel { margin-bottom: 14px; text-align: center; }
.pf-rel-sub { margin: 11px 8px 12px; font-size: 12px; font-weight: 500; line-height: 16px; color: rgba(51, 51, 51, .75); }
.pf-empty { display: flex; flex-direction: column; align-items: center; }
.pf-empty > div { width: 260px; font-size: 12px; font-weight: 500; line-height: 14px; color: rgba(51, 51, 51, .6); }
.pf-find { margin-top: 10px; height: 24px; padding: 0 24px; border-radius: 50px; background: #7957b2; color: #fff; font-size: 12px; font-weight: 700; }
.pf-court { text-align: start; }
/* the profile's card has no title of its own (the courting box re-adds one when it updates after a purchase) */
.pf-court > .section-title { display: none; }
.pf-balances { margin-bottom: 14px; }
.pf-tabs { display: flex; justify-content: center; margin-top: 8px; }
.pf-tab { margin: 0 10px; font-size: 12px; font-weight: 500; line-height: 14px; color: #808080; background: none; padding: 0 0 2px; border-bottom: 2px solid transparent; }
.pf-tab.on { font-weight: 800; color: #7957b2; border-bottom-color: #7957b2; }
.pf-bal-list { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 7px; }
.pf-bal { width: 60px; padding: 8px 0 17px; display: flex; flex-direction: column; align-items: center; }
.pf-bal-ico { height: 32px; font-size: 26px; line-height: 32px; }
.pf-bal-n { margin-top: 6px; font-size: 18px; font-weight: 700; line-height: 21px; color: #333; white-space: nowrap; }
.pf-content .emotion-picker { margin-top: 6px; }
.pf-footer { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 66px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .25); padding: 8px; }
.pf-design { width: 100%; height: 50px; border-radius: 50px; background: #7957b2; color: #fff; font-size: 16px; font-weight: 600; }

/* a player's profile */
.pf.other .pf-scroll { padding-bottom: 12px; }
.pf-about { position: relative; padding-bottom: 33px; }
.pf-photos { position: relative; height: 232px; margin-inline-end: 8px; border-radius: 20px; overflow: hidden; background: #ddd center / cover no-repeat; }
.pf-photos::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .65) 100%); }
.pf-pages { position: absolute; top: 12px; left: 32px; right: 32px; z-index: 1; display: flex; gap: 4px; }
.pf-pages i { flex: 1; height: 4px; border-radius: 8px; background: rgba(255, 255, 255, .2); }
.pf-pages i.on { background: #fff; }
.pf-like { position: absolute; top: 80px; inset-inline-end: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; color: #fff; font-size: 12px; font-weight: 700; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4)); }
.pf-pinfo { position: absolute; left: 28px; right: 28px; bottom: 0; z-index: 1; max-width: 334px; color: #fff; padding-bottom: 40px; }
.pf-pname { display: flex; align-items: center; margin-inline-start: 16px; font-size: 24px; line-height: 24px; text-shadow: 0 0 4px rgba(0, 0, 0, .35); white-space: nowrap; }
.pf-n { font-weight: 700; max-width: calc(100% - 136px); overflow: hidden; text-overflow: ellipsis; }
.pf-age { font-weight: 500; }
/* the gender sign and the online dot come before the name in both directions (left of it in LTR, right of it in RTL) */
.pf-pname .pf-ico { order: -2; margin-inline-end: 6px; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .4)); }
.pf-pname .pf-online { order: -1; margin-inline-start: 0; margin-inline-end: 8px; }
.pf-online { width: 10px; height: 10px; margin-inline-start: 8px; border-radius: 50%; background: gray; border: 1px solid #fff; }
.pf-online.on { background: #00d235; }
.pf-pcountry { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 16px; font-size: 14px; font-weight: 500; line-height: 22px; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .35); }
[dir="rtl"] .pf-pcountry { margin: 6px 16px 0 0; }
/* the name and the country side by side in the header */
.pf-hid { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; color: #04050f; }
.pf-hid .pf-pname { margin: 0; font-size: 17px; line-height: 22px; text-shadow: none; flex: none; }
.pf-hid .pf-n { max-width: 140px; }
.pf-hid .pf-pcountry { margin: 0; gap: 4px; font-size: 13px; color: #6b6880; text-shadow: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pf-hid .pf-pcountry svg { width: 14px; height: 14px; }
/* a VIP's crown under the like heart */
/* the report sign, the like and a VIP's crown: on the reading-start side (left in LTR, right in RTL) */
.pf-side { position: absolute; top: 70px; inset-inline-start: 14px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pf-side .pf-like { position: static; }
.pf-vipmark { display: grid; place-items: center; filter: drop-shadow(0 0 4px rgba(0, 0, 0, .45)); }
.pf-vipmark > * { transform: scale(1.5); }
/* the report sign above the like */
.pf-photos .pf-warn { top: 22px; inset-inline-start: 16px; inset-inline-end: auto; }
.pf-pleague { display: flex; align-items: center; gap: 8px; margin-inline-start: 16px; margin-top: 12px; min-height: 32px; }
.pf-pleague:empty { display: none; }
.pf-club { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; }

.pf-club { background: rgba(255, 255, 255, .25); font-size: 18px; }
/* the status before the courting card: a speech box as wide as the league strip (long ones wrap) */
.pf-ostatus { margin: 14px 15px 0; text-align: start; }
.pf-ostatus span { display: block; box-sizing: border-box; width: 100%; padding: 8px 14px; border-radius: 14px; border-start-start-radius: 4px; background: #efe7ff; color: #3d2a7a; font-size: 13px; font-weight: 500; line-height: 18px; overflow-wrap: anywhere; }
/* the league strip under the buttons: its picture, "Rose league", View › (tap: the leagues) */
.pf-lgstrip { display: flex; align-items: center; gap: 10px; width: calc(100% - 30px); margin: 14px 15px 0; padding: 6px 12px; border-radius: 12px; background: linear-gradient(90deg, #fff4dc, #ffe7b0); color: #6b4300; font-size: 13px; font-weight: 700; text-align: start; }
.pf-lgstrip img { width: 34px; height: 34px; object-fit: contain; flex: none; }
.pf-lgstrip-n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--lc); }
.pf-lgstrip i { margin-inline-start: auto; font-style: normal; font-size: 12px; font-weight: 600; }
.pf-lgstrip-arrow { display: inline-block; }
[dir="rtl"] .pf-lgstrip-arrow { transform: scaleX(-1); }
.pf-buttons { position: absolute; left: 0; right: 8px; bottom: 0; height: 65px; display: flex; align-items: center; justify-content: center; gap: 18px; z-index: 2; }
.pf-round { position: relative; border-radius: 50%; background: #83bb0c; padding: 0; display: grid; place-items: center; }
.pf-round.small { width: 48px; height: 48px; }
.pf-round.big { width: 65px; height: 65px; }
.pf-round-in { position: absolute; inset: 3px; border-radius: 50%; background: #fff; display: grid; place-items: center; }
.pf-round:disabled { filter: grayscale(1); opacity: .6; }
.pf-gift { font-size: 34px; line-height: 1; margin-top: -8px; }
.pf-buy { position: absolute; bottom: 0; left: 3px; right: 3px; height: 16px; border-radius: 50px; background: rgba(131, 187, 12, .5); font-size: 11px; font-weight: 700; color: #fff; display: flex; align-items: center; justify-content: center; }
.pf-relbox { margin: 10px 15px 10px 15px; min-height: 78px; border-radius: 12px; background: #f5e6f5; padding: 8px; display: flex; flex-direction: column; justify-content: center; }
.pf-relempty { display: flex; align-items: center; gap: 8px; padding: 0 0 0 0; font-size: 12px; font-weight: 500; color: #04050f; }
.pf-relbox .court-btn { align-self: flex-start; margin-top: 6px; }
.pf-subs { display: flex; gap: 4px; margin: 0 15px 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.pf-sub { flex: 0 0 125px; height: 80px; border-radius: 10px; padding: 6px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; text-align: center; }
.pf-sub.vip { flex-basis: 180px; background: linear-gradient(180deg, #fff3d6, #ffe0a3); }
.pf-sub.pass1 { background: #cddeff; }
.pf-sub.pass2 { background: #e6d9ff; }
.pf-sub-head { font-size: 10px; font-weight: 700; color: #c26a19; line-height: 13px; }
.pf-sub-title { font-size: 13px; font-weight: 800; line-height: 15px; color: #ffd84a; -webkit-text-stroke: 4px #8a4b12; paint-order: stroke fill; }
.pf-sub.pass1 .pf-sub-title { color: #fff; -webkit-text-stroke-color: #4949ad; }
.pf-sub.pass2 .pf-sub-title { color: #fff; -webkit-text-stroke-color: #7957b2; }
.pf-sub-btn { width: 100%; height: 32px; border-radius: 20px; background: #83bb0c; color: #fff; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 700; }
.pf-statrow { display: flex; align-items: center; gap: 6px; margin: 0 16px 12px; min-height: 39px; font-size: 12px; font-weight: 500; color: #04050f; }
.pf-statrow > span { display: inline-flex; align-items: center; gap: 4px; }
.pf-statrow i { font-style: normal; font-size: 14px; }
.pf-compare { margin-inline-start: auto; height: 39px; padding: 0 12px; border-radius: 20px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: #04050f; }
.pf-compare i { font-style: normal; font-size: 16px; }

/* ── friends & search ── */
.soc { display: flex; flex-direction: column; gap: 10px; }
.soc-tabs { display: flex; gap: 4px; }
.soc-tabs button { flex: 1; padding: 6px 4px; border-radius: 10px; background: #f3effa; color: #7957b2; font-weight: 700; font-size: .78rem; display: flex; flex-direction: column; align-items: center; }
.soc-tabs button.on { background: #7957b2; color: #fff; }
.soc-tabs small { opacity: .8; }
.soc-list { display: flex; flex-direction: column; gap: 6px; }
.soc-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 12px; background: #faf8ff; text-align: start; }
.soc-ph { position: relative; flex: 0 0 44px; height: 44px; }
.soc-ph img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.soc-on { position: absolute; bottom: -2px; inset-inline-end: -2px; width: 12px; height: 12px; border-radius: 50%; background: #00d235; border: 2px solid #fff; }
.soc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.soc-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-txt small, .soc-when { color: var(--muted); font-size: .75rem; }
.soc-act { padding: 4px 10px; border-radius: 999px; background: #f1e9ff; color: #7957b2; font-weight: 700; font-size: .75rem; }
.soc-empty { text-align: center; padding: 20px; color: var(--muted); }
.soc-empty span { font-size: 40px; }
.soc-form { display: flex; flex-direction: column; gap: 8px; }
.soc-q { padding: 10px 14px; border-radius: 12px; border: 2px solid #e4dbf5; font-size: 1rem; }
.soc-ages { display: flex; align-items: center; gap: 6px; }
.soc-age { width: 70px; padding: 6px; border-radius: 10px; border: 2px solid #e4dbf5; text-align: center; }
.soc-hint { padding: 8px 12px; border-radius: 12px; background: #fff6d6; font-weight: 700; }

/* ── pause ── */
body.paused .table-area { position: relative; }
.ps-view { position: absolute; inset: 0; z-index: 5; overflow: hidden; font-family: Montserrat, Cairo, sans-serif;
  background: radial-gradient(ellipse at 50% 40%, rgba(86, 56, 160, .55), rgba(20, 10, 40, .92)), radial-gradient(circle at 30% 70%, #3a2a62, #120a26); backdrop-filter: blur(8px); }
.ps-scroll { position: absolute; inset: 0; overflow-y: auto; display: flex; justify-content: center; }
.ps-main { width: min(393px, calc(100% - 32px)); padding: 70px 0 24px; display: flex; flex-direction: column; gap: 16px; color: #fff; }
.ps-title { text-align: center; font-size: 24px; font-weight: 700; line-height: 29px; }
.ps-why { margin-top: -10px; text-align: center; font-size: 13px; font-weight: 600; opacity: .85; }
.ps-cap { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 18px; color: #fff; margin-bottom: 4px; }
.ps-i { width: 18px; height: 18px; border-radius: 50%; background: #fff; color: #4f369c; font-weight: 900; font-style: italic; font-size: 11px; }
.ps-socials { padding-top: 12px; }
.ps-social-btns { display: flex; gap: 8px; margin-top: 4px; }
.ps-social { flex: 1; height: 28px; border-radius: 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.ps-vipcard { position: relative; margin-top: 32px; padding: 28px 18px 16px; border-radius: 24px; background: linear-gradient(180deg, #f9eed3 0%, #f9eed3 10%, #fdf8ee 100%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: #4c2b55; }
.ps-flag { position: absolute; top: -30px; left: -10px; right: -10px; height: 50px; display: grid; place-items: center;
  background: linear-gradient(180deg, #ffe46b, #f5b301); clip-path: polygon(0 18%, 6% 18%, 6% 0, 94% 0, 94% 18%, 100% 18%, 96% 50%, 100% 82%, 94% 82%, 94% 100%, 6% 100%, 6% 82%, 0 82%, 4% 50%); }
.ps-flag span { font-size: 18px; font-weight: 800; color: #fff; -webkit-text-stroke: 4px #b06b00; paint-order: stroke fill; letter-spacing: .5px; }
.ps-vip-head { font-size: 13px; font-weight: 500; color: #cd6c51; font-style: italic; }
.ps-vip-items { display: grid; grid-template-columns: repeat(4, 76px); gap: 5px; }
.ps-vip-item { height: 118px; border-radius: 8px; background: #fffdfb; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 4px; text-align: center; }
.ps-vip-item > span { font-size: 40px; line-height: 58px; position: relative; }
.ps-vip-item b { font-size: 12px; font-weight: 700; color: #4c2b55; line-height: 14px; display: flex; flex-direction: column; }
.ps-vip-item b small { font-weight: 500; }
.ps-coin i { position: absolute; right: -14px; bottom: 0; font-style: normal; font-size: 16px; font-weight: 900; color: #fff; -webkit-text-stroke: 3px #c26a19; paint-order: stroke fill; }
.ps-vip-count { font-size: 12px; font-weight: 500; color: rgba(205, 108, 81, .8); }
.ps-vip-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
.ps-buy-vip { height: 40px; border-radius: 100px; background: #83bb0c; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.ps-gift-vip { height: 42px; border-radius: 100px; border: 1px solid #eabda1; background: transparent; color: #cd6c51; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.ps-league-box { width: 100%; height: 82px; border-radius: 16px; background: #ffefdd; display: flex; align-items: center; gap: 8px; padding: 2px; text-align: start; }
.ps-league-icon img, .pf-league-img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(53, 41, 93, .3)); }
.ps-league-icon { flex: 0 0 78px; height: 78px; border-radius: 14px; background: rgba(255, 255, 255, .4); display: grid; place-items: center; }
.ps-league-icon span { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 22px; color: #fff; border: 3px solid #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--lc) 40%, #fff), var(--lc) 60%, color-mix(in srgb, var(--lc) 60%, #000)); }
.ps-league-right { flex: 1; min-width: 0; padding-inline-end: 8px; display: flex; flex-direction: column; gap: 8px; }
.ps-league-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 500; color: #04050f; line-height: 15px; }
.ps-timer { flex: 0 0 auto; height: 26px; padding: 0 8px; border-radius: 8px; border: 2px solid #fff; background: rgba(0, 0, 0, .25); color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.ps-progress { position: relative; height: 24px; }
.ps-progress-bg { position: absolute; left: 3px; right: 3px; top: 0; height: 24px; border-radius: 8px; border: 2px solid #fff; background: #d7d7d7; overflow: hidden; text-align: center; }
.ps-progress-bg div { position: absolute; inset: 0 auto 0 0; border-radius: 8px; background: #01c138; }
[dir="rtl"] .ps-progress-bg div { inset: 0 0 0 auto; }
.ps-progress-bg span { position: relative; font-size: 12px; font-weight: 700; color: #fff; line-height: 20px; text-shadow: 0 0 2px rgba(0, 0, 0, .3); }
.ps-pl, .ps-pr { position: absolute; top: 0; width: 24px; height: 24px; border-radius: 50%; background: #7957b2; border: 2px solid #fff; display: grid; place-items: center; }
.ps-pl { inset-inline-start: 0; }
.ps-pr { inset-inline-end: 0; }
.ps-bal-list { border-radius: 16px; background: #e7ecff; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ps-bal-row { height: 74px; border-radius: 4px; background: rgba(255, 255, 255, .4); display: flex; justify-content: space-around; align-items: center; }
.ps-bal { width: 60px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ps-bal-ico { font-size: 32px; line-height: 40px; }
.ps-bal-n { font-size: 12px; font-weight: 700; color: #392b64; white-space: nowrap; }
.ps-buttons { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.ps-back-row { position: relative; }
.ps-back { width: 100%; height: 50px; border-radius: 24px; background: #fff; display: flex; align-items: center; padding: 0 12px; }
.ps-play { flex: 0 0 32px; line-height: 0; }
.ps-labels { flex: 1; display: flex; flex-direction: column; align-items: center; }
.ps-labels b { font-size: 16px; font-weight: 700; color: #4f369c; line-height: 19px; }
.ps-labels small { font-size: 12px; font-weight: 500; color: rgba(79, 54, 156, .7); }
.ps-change { position: absolute; top: 6px; inset-inline-end: 6px; width: 38px; height: 38px; border-radius: 100px; background: rgba(121, 87, 178, .08); display: grid; place-items: center; }
.ps-faq { height: 50px; border-radius: 100px; border: 2px solid #fff; background: transparent; color: #fff; font-size: 16px; font-weight: 700; }
.ps-faq-list { display: flex; flex-direction: column; gap: 8px; }
.ps-faq-item { padding: 10px 12px; border-radius: 12px; background: #f6f0ff; }
.ps-faq-item summary { font-weight: 800; cursor: pointer; }
.ps-faq-item p { margin: 8px 0 0; color: #444; }
.ps-chat-off { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255, 255, 255, .88); color: #333; text-align: center; font-weight: 600; }
.ps-chat-ico { width: 40px; height: 40px; border-radius: 50%; background: #e6e6e6; display: grid; place-items: center; font-size: 18px; }
.top-btn.pause-btn { display: grid; place-items: center; }

/* my own seat: emotions (the original's emotion screen) */
.es-header { padding-bottom: 6px; }
.es-header .gs-actions { gap: 6px; }
.es-open { height: 32px; padding: 0 12px 0 2px; border-radius: 20px; background: #7957b2; color: #fff; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.es-bal { margin-inline-start: auto; height: 32px; padding: 0 10px; border-radius: 20px; border: 1px solid #7957b2; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: #7957b2; }
.es-list { padding: 16px 32px 20px; }
.es-title { display: flex; align-items: center; justify-content: center; gap: 4px; height: 20px; margin-bottom: 12px; font-size: 14px; font-weight: 700; color: #04050f; }
.es-i { width: 16px; height: 20px; display: grid; place-items: center; background: none; }
.es-grid { display: grid; grid-template-columns: repeat(4, 56px); justify-content: space-between; row-gap: 10px; }
.es-item { width: 56px; height: 87px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: none; padding: 0; }
.es-img { width: 56px; height: 56px; display: grid; place-items: center; }
.es-pic { max-width: 56px; max-height: 56px; object-fit: contain; }
.es-pic.emoji { font-size: 44px; line-height: 56px; }
.es-cost { width: 56px; height: 27px; border-radius: 24px; background: #bcdb7a; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.es-cost i { font-style: normal; font-size: 13px; }
.es-cost b { font-size: 14px; font-weight: 700; color: #000; -webkit-text-stroke: 3px #fff; paint-order: stroke fill; }
.es-cost.lock { height: 24px; background: #919399; }
.es-item.locked .es-img { opacity: .75; }
.es-cat-head { display: flex; align-items: center; justify-content: space-between; height: 30px; margin: 24px 0 24px; font-size: 14px; font-weight: 700; color: #04050f; }
.es-getvip { width: 118px; height: 30px; border-radius: 45px; background: linear-gradient(214deg, #ffd646, #ffb800); color: #5a3200; font-size: 12px; font-weight: 800; }

/* every menu as a chat-column screen with the profile header */
/* panels and screens share one layer: the one opened last is on top (a profile opened from the table over a list
   that is open), and back shows the one under it again */
.panel-screen.solo { z-index: 31; position: fixed; top: 0; bottom: 0; inset-inline-start: 0; width: min(375px, 100%); box-shadow: 10px 0 40px rgba(0, 0, 0, .3); }
[dir="rtl"] .panel-screen.solo { box-shadow: -10px 0 40px rgba(0, 0, 0, .3); }
.pnl { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.pnl > .panel-head { position: relative; flex: 0 0 56px; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0; border-bottom: 0; background: #fff; color: #04050f; }
.pnl-back { width: 52px; height: 100%; display: grid; place-items: center; background: none; color: inherit; }
[dir="rtl"] .pnl-back span { display: block; transform: scaleX(-1); }
.pnl > .panel-head .panel-title { position: absolute; left: 56px; right: 56px; text-align: center; font-size: 18px; font-weight: 700; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pnl-side { width: 52px; }
.pnl > .panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; }
/* themed menus keep their colours (Passion Pass, cards) */
.pp-panel .pnl > .panel-head, .cp-panel .pnl > .panel-head { background: linear-gradient(180deg, #5a3aa8, #46288c); color: #fff; }
.pp-panel .pnl > .panel-body, .cp-panel .pnl > .panel-body { padding: 0; }
.pp-panel .pnl { background: #2b1a55; }
.cp-panel .pnl { background: #f1ebff; }

/* "Your design" — header with ✕, connected tabs, frame filters, uniform cards (the chat column's size) */
.pnl > .pnl-head-close { flex-basis: 52px; height: 52px; padding: 0 12px 0 18px; border-bottom: 1px solid #ece6f7; }
.pnl > .pnl-head-close .panel-title { position: static; flex: 1; justify-content: flex-start; font-size: 20px; color: #2b1a55; pointer-events: auto; }
.pnl-x { width: 36px; height: 36px; display: grid; place-items: center; background: none; color: #8a86a0; border-radius: 50%; }
.pnl-x:hover { background: #f3effa; color: #4f369c; }
.dz-screen .pnl > .panel-body { display: flex; flex-direction: column; overflow: hidden; padding: 12px 14px 0; background: #fbf9ff; }
.dz { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.dz-tabs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); height: 40px; border-radius: 12px; overflow: hidden; background: #4f2fa0; box-shadow: 0 2px 6px rgba(79, 47, 160, .25); }
.dz-tab { position: relative; min-width: 0; height: 100%; background: transparent; color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.dz-tab + .dz-tab::before { content: ''; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 1px; background: rgba(255, 255, 255, .28); }
.dz-tab.on { background: #7b3ff2; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.dz-tab.on::before, .dz-tab.on + .dz-tab::before { display: none; }
.dz-tab:not(.on):hover { background: rgba(255, 255, 255, .1); }
.dz-tab:focus-visible { outline: 2px solid #ffd84a; outline-offset: -3px; }
.dz-cats { flex: 0 0 auto; display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.dz-cats[hidden] { display: none; }
.dz-cat { flex: 0 0 auto; height: 28px; padding: 0 16px; border-radius: 14px; background: #efe9fb; color: #2b1a55; font-size: 13px; font-weight: 600; }
.dz-cat.on { background: #7b3ff2; color: #fff; }
.dz-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-content: start; padding: 12px 0 16px; }
@media (max-width: 340px) { .dz-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dz-card { position: relative; min-width: 0; height: 120px; padding: 8px 4px 6px; border-radius: 12px; background: #fff; border: 2px solid #ebe5f6; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 2px 6px rgba(57, 45, 96, .06); }
.dz-card:hover { border-color: #cbb8f2; }
.dz-card.dz-on { border-color: #36c25a; box-shadow: 0 0 0 1px #36c25a inset, 0 2px 8px rgba(54, 194, 90, .2); }
.dz-art { flex: 0 0 64px; width: 64px; height: 64px; position: relative; display: grid; place-items: center; }
.dz-art-frame .dz-ava { width: 52px; height: 60px; border-radius: 8px; object-fit: cover; }
.dz-frame-img { position: absolute; inset: -4px; width: 72px; height: 72px; object-fit: contain; pointer-events: none; }
.dz-frame-ring { position: absolute; left: 4px; right: 4px; top: 0; bottom: 0; border-radius: 11px; border: 4px solid var(--fc); box-shadow: 0 0 8px var(--fc); }
.dz-art-name { width: 80px; height: 64px; border-radius: 10px; background: linear-gradient(180deg, #3b2a6e, #22174a); overflow: hidden; }
.dz-art-name .nm { font-size: 15px; font-weight: 800; }
.dz-art-name .nm:not(.nm-c):not(.nm-gradient) { color: #fff; }
.dz-art-table span { width: 64px; height: 44px; border-radius: 8px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 2px 4px rgba(0, 0, 0, .2); }
.dz-art-bottle svg, .dz-art-bottle img { width: 64px; height: 64px; object-fit: contain; transform: rotate(-35deg); }
.dz-name { max-width: 100%; font-size: 11px; font-weight: 600; color: #2b1a55; line-height: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-st { font-size: 11px; font-weight: 700; line-height: 18px; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.dz-st-on { color: #23a047; }
.dz-st-own { color: #8a86a0; font-weight: 600; }
.dz-st-price { color: #2b1a55; }
.dz-st-price i { font-style: normal; font-size: 12px; }
.dz-st-vip { padding: 0 8px; border-radius: 6px; background: linear-gradient(180deg, #ffd84a, #f5a300); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.dz-st-reward { color: #8a86a0; font-weight: 600; }
.dz-reward .dz-art, .dz-locked .dz-art { opacity: .8; }
.dz-empty { grid-column: 1 / -1; text-align: center; color: #8a86a0; padding: 24px 0; }

/* name styles (seats, profiles, previews) */
.nm-c { color: var(--nc); }
.nm-glow { color: var(--nc, #fff); text-shadow: 0 0 6px var(--nc, #ff5fa2), 0 0 12px var(--nc, #ff5fa2); }
.nm-neon { color: var(--nc, #fff); text-shadow: 0 0 2px #fff, 0 0 6px var(--nc2, #ff2bd6), 0 0 12px var(--nc2, #ff2bd6), 0 0 20px var(--nc2, #ff2bd6); }
.nm-outline { color: var(--nc, #fff); -webkit-text-stroke: 3px var(--nc2, #7957b2); paint-order: stroke fill; }
.nm-gradient { background: linear-gradient(90deg, var(--nc, #ffb347), var(--nc2, #ff3d8b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nm-f-elegant { font-family: Georgia, 'Times New Roman', serif; font-style: italic; letter-spacing: .3px; }
.nm-f-bold { font-weight: 900; letter-spacing: .2px; }
.nm-f-rounded { font-family: Nunito, Cairo, sans-serif; font-weight: 900; }
.nm-f-wide { font-family: Montserrat, Cairo, sans-serif; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }

/* the moving names — shimmer, rainbow, pulse, twinkle, fire, three colours. Light on the phone: only a gradient's
   position, the opacity or a small scale change (what the graphics chip moves without redrawing the page), slow, and
   only where few names show at once (the seats, a profile, a preview); in the chat and the lists the same colours
   stand still. Nothing moves for a player who asked their phone for less motion. */
.nm-shimmer, .nm-rainbow, .nm-fire, .nm-tri { -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; }
.nm-shimmer { background-image: linear-gradient(100deg, var(--nc, #f5b301) 0%, var(--nc, #f5b301) 35%, var(--nc2, #fff3bf) 50%, var(--nc, #f5b301) 65%, var(--nc, #f5b301) 100%); }
.nm-rainbow { background-image: linear-gradient(90deg, #ff5f6d, #ffc371, #f9f871, #4cd97b, #47a3ff, #b06bff, #ff5f6d); }
.nm-fire { background-image: linear-gradient(0deg, var(--nc, #ff512f), var(--nc2, #f09819)); filter: drop-shadow(0 0 3px rgba(255, 110, 40, .55)); }
.nm-tri { background-image: linear-gradient(90deg, var(--nc, #00f5a0), var(--nc2, #00d9f5), var(--nc3, #a78bfa), var(--nc, #00f5a0)); }
.nm-pulse { color: var(--nc, #ff5fa2); text-shadow: 0 0 6px var(--nc2, rgba(255, 95, 162, .6)); display: inline-block; }
.nm-blink { color: var(--nc, #4dabf7); text-shadow: 0 0 6px var(--nc2, var(--nc, #4dabf7)); }
/* on the light chat and lists a white neon would not show: there it takes its glow colour as the letters' colour */
:is(.chat-list, .world-list, .vip-list, .msg-name) .nm-neon { color: var(--nc2, var(--nc)); text-shadow: none; }
@keyframes nmSlide { from { background-position: 0% 0; } to { background-position: -200% 0; } }
@keyframes nmPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes nmBlink { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
@media (prefers-reduced-motion: no-preference) {
  :is(.seat-name, .pf-name, .pf-n, .dz-art-name, .nc-preview) .nm-shimmer { animation: nmSlide 3.6s linear infinite; }
  :is(.seat-name, .pf-name, .pf-n, .dz-art-name, .nc-preview) :is(.nm-rainbow, .nm-tri) { animation: nmSlide 6s linear infinite; }
  :is(.seat-name, .pf-name, .pf-n, .dz-art-name, .nc-preview) .nm-fire { animation: nmSlide 4s ease-in-out infinite alternate; background-size: 100% 200%; }
  :is(.seat-name, .pf-name, .pf-n, .dz-art-name, .nc-preview) .nm-pulse { animation: nmPulse 1.8s ease-in-out infinite; }
  :is(.seat-name, .pf-name, .pf-n, .dz-art-name, .nc-preview) .nm-blink { animation: nmBlink 1.6s ease-in-out infinite; }
}
.dz-card > * { flex-shrink: 0; }
/* bigger previews: the cards use the full column width (4 × ~83px), the photo fills the frame art */
.dz-screen .pnl > .panel-body { padding: 12px 10px 0; }
.dz-grid { gap: 8px; overflow-x: hidden; }
.dz-card { height: 132px; padding: 6px 3px 6px; }
.dz-art { flex: 0 0 72px; width: 72px; height: 72px; }
.dz-art-frame .dz-ava { width: 60px; height: 68px; border-radius: 9px; }
.dz-frame-img { inset: -6px; width: 84px; height: 84px; }
.dz-frame-ring { left: 3px; right: 3px; border-radius: 12px; }
.dz-art-name { width: 76px; height: 72px; }
.dz-art-name .nm { font-size: 16px; }
.dz-art-table span { width: 72px; height: 50px; }
.dz-art-bottle svg, .dz-art-bottle img { width: 72px; height: 72px; }
.dz-name { font-size: 12px; }
.dz-card { height: 112px; justify-content: center; gap: 8px; }
/* frames: two big cards a row */
.dz-grid.dz-grid-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dz-grid-frames .dz-card { height: 188px; gap: 10px; }
.dz-grid-frames .dz-art { flex: 0 0 138px; width: 138px; height: 138px; }
.dz-grid-frames .dz-art-frame .dz-ava { width: 112px; height: 128px; border-radius: 14px; }
.dz-grid-frames .dz-frame-img { inset: -10px; width: 158px; height: 158px; }
.dz-grid-frames .dz-frame-ring { left: 9px; right: 9px; border-width: 6px; border-radius: 18px; }
/* a picture frame is drawn for the seat (photo 93×121 inside a 140×181 picture): sized and placed from the card's photo the same way */
.dz-art-frame { --aw: 60px; --ah: 68px; }
.dz-grid-frames .dz-art-frame { --aw: 112px; --ah: 128px; }
.dz-art-frame .dz-frame-img { inset: auto; left: calc(50% - var(--aw) * 69.5 / 93); top: calc(50% - var(--ah) * 89.5 / 121); width: calc(var(--aw) * 140 / 93); height: calc(var(--ah) * 181 / 121); object-fit: fill; }
.dz-grid-frames .dz-st { font-size: 13px; }
.dz-more { grid-column: 1 / -1; justify-self: center; height: 34px; padding: 0 20px; border-radius: 20px; border: 2px solid #7957b2; background: #fcf4fa; color: #7957b2; font-size: 13px; font-weight: 700; }
/* name styles, tables and bottles in the same big cards as the frames */
.dz-grid-frames .dz-art-name { width: 138px; height: 138px; border-radius: 16px; }
.dz-grid-frames .dz-art-name .nm { font-size: 26px; }
.dz-grid-frames .dz-art-table span { width: 138px; height: 110px; border-radius: 16px; }
.dz-grid-frames .dz-art-bottle svg, .dz-grid-frames .dz-art-bottle img { width: 132px; height: 132px; }

/* the latest gift a player received: on their card, no circle, until a newer one or they leave */
/* measured from the original: a 60px gift whose box ends 18px past the card's bottom-right corner (centre 12px inside it) */
.seat-gift { position: absolute; right: calc(-18 * var(--u)); bottom: calc(-18 * var(--u)); z-index: 4; width: calc(60 * var(--u)); height: calc(60 * var(--u)); display: grid; place-items: center; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); }
.seat-gift.new { animation: pop2 .4s ease-out; }
.seat-gift .seat-gift-pic { width: 100%; height: 100%; object-fit: contain; }
/* a big pile (over the panel's cap): a small +99 beside the gift */
.seat-gift-qty { position: absolute; right: calc(-6 * var(--u)); top: calc(-4 * var(--u)); min-width: calc(22 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--accent, #ff3d8b); color: #fff; font-size: calc(10 * var(--u)); line-height: calc(15 * var(--u)); font-weight: 800; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); unicode-bidi: isolate; direction: ltr; }
.seat-gift .seat-gift-pic.emoji { font-size: calc(44 * var(--u)); line-height: calc(60 * var(--u)); text-align: center; }

/* "Your design": a short hint on the card that was tapped */
.dz-tip { position: absolute; left: 6px; right: 6px; top: 40%; transform: translateY(-50%); z-index: 2; padding: 6px 8px; border-radius: 10px; background: rgba(43, 26, 85, .92); color: #fff; font-size: 12px; font-weight: 700; line-height: 15px; text-align: center; pointer-events: none; animation: popIn .2s; }

/* the chat's gift button: Categories and the recipients side by side (159 wide each), like the original */
.gs-btns.table { gap: 8px; padding-inline-start: 6px; }
.gs-btns.table .gs-cats, .gs-btns.table .gs-player { flex: 1; width: auto; max-width: 159px; }
/* "Gift at the table": Everyone here / All guys / All girls */
.gs-recipients { left: auto; min-width: 193px; padding: 12px 10px 6px; border-radius: 10px 0 10px 10px; display: flex; flex-direction: column; }
[dir="rtl"] .gs-recipients { border-radius: 0 10px 10px 10px; }
.gs-rec-title { padding: 2px 2px 8px; font-size: 16px; font-weight: 700; color: #7957b2; }
.gs-rec-item { display: flex; align-items: center; gap: 8px; height: 28px; margin-bottom: 8px; padding: 0 2px; background: none; color: #000; font-size: 14px; font-weight: 400; text-align: start; }
.gs-rec-item:hover { color: #7957b2; }
.gs-rec-ico { width: 24px; height: 24px; display: grid; place-items: center; font-size: 18px; }
/* the league points a gift gives: a small white tag at the gift's top corner */
.gs-lp { position: absolute; top: 6px; inset-inline-end: -10px; width: 20px; height: 28px; border-radius: 8px; background: #fff; box-shadow: 0 2px 4px rgba(78, 19, 175, .35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; }
.gs-lp i { font-style: normal; font-size: 10px; line-height: 12px; }
.gs-lp b { font-size: 10px; font-weight: 700; line-height: 12px; color: #bd5a18; }
/* each balance named under its number; the lifetime kisses on a row of their own */
.ps-bal-l { max-width: 100%; font-size: 9px; line-height: 11px; color: #5d5470; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-bal-row.kisses { height: 64px; justify-content: center; }
.ps-bal-row.kisses .ps-bal { width: 120px; }

/* compare achievements: the two players, the numbers, every achievement with each one's badge */
.cmp-panel .panel-body { padding: 0; background: #fff; }
.cmp { display: flex; flex-direction: column; font-family: Montserrat, Cairo, sans-serif; }
.cmp-top { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 10px 12px; background: linear-gradient(135deg, #3a2370, #5b3a9e); color: #fff; }
.cmp-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cmp-who.me { flex-direction: row-reverse; }
.cmp-who img { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; flex: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5); }
.cmp-who span { display: flex; align-items: baseline; gap: 1px; white-space: nowrap; }
.cmp-who b { font-size: 20px; font-weight: 900; }
.cmp-who small { font-size: 11px; opacity: .75; }
.cmp-vs { font-size: 12px; font-weight: 900; opacity: .7; padding: 0 6px; }
.cmp-sec { position: sticky; top: 62px; z-index: 1; display: flex; justify-content: center; padding: 8px 0 6px; background: #fff; }
.cmp-sec span { padding: 2px 12px; border-radius: 12px; background: #ece6f8; color: #7957b2; font-size: 11px; font-weight: 800; max-width: 80%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-row { display: grid; grid-template-columns: 64px 1fr 64px; align-items: center; gap: 6px; padding: 6px 12px; border-bottom: 1px solid #f3eefb; }
.cmp-row:nth-of-type(even) { background: #fcfaff; }
.cmp-row.stat { background: #fff4f7; }
.cmp-side { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cmp-side b { font-size: 13px; font-weight: 800; color: #2a2438; }
.cmp-ico { font-style: normal; font-size: 22px; line-height: 1; }
.cmp-name { min-width: 0; text-align: center; font-size: 12px; font-weight: 700; color: #3d3360; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-badge { position: relative; display: inline-grid; place-items: center; width: 46px; height: 46px; }
.cmp-medal { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 35% 30%, #fff6d6, #f3c64e 60%, #c48a1a); box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.cmp-medal img, .cmp-medal .cmp-pic { width: 34px; height: 34px; object-fit: contain; }
.cmp-emoji { font-size: 22px; line-height: 1; }
.cmp-badge.off .cmp-medal { background: radial-gradient(circle at 35% 30%, #f4f4f6, #cfcdd6); filter: grayscale(1); opacity: .7; }
.cmp-ribbon { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); padding: 0 6px; border-radius: 8px; background: #7957b2; color: #fff; font-style: normal; font-size: 10px; font-weight: 800; line-height: 15px; white-space: nowrap; }
.cmp-ribbon.ok { background: #2e9e5b; }
.cmp-badge.off .cmp-ribbon { background: #a59fb6; }
/* an SVGA gift's tile: where it plays (the seats, or the whole room) */
.gs-gift-img .gs-svga { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 0 5px; border-radius: 6px; font-size: 9px; font-weight: 800; line-height: 14px; white-space: nowrap; color: #fff; background: #7b2ff7; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); pointer-events: none; }
.gs-gift-img .gs-svga.room { background: linear-gradient(90deg, #ff3d8b, #ff9a3d); }
/* the bundle a reply asked for (app.giveBackCombo): marked in the list */
.cb-card.cb-focus { box-shadow: 0 0 0 3px #ff3d8b, 0 6px 18px rgba(255, 61, 139, .35); animation: cbFocus 1.2s ease-in-out 2; }
@keyframes cbFocus { 50% { transform: scale(1.03); } }

/* the call cards under the league: voice and video side by side; silver with a lock when the call is not possible */
.pf-callcards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: calc(100% - 30px); margin: 10px 15px 0; }
.pf-callcard { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 9px 10px; border-radius: 14px; text-align: start;
  background: linear-gradient(135deg, #2fbf71, #14935a); color: #fff; box-shadow: 0 3px 10px rgba(20, 147, 90, .28); }
.pf-callcard.video { background: linear-gradient(135deg, #7c4dff, #5a2fd6); box-shadow: 0 3px 10px rgba(90, 47, 214, .28); }
.pf-callcard.off { background: linear-gradient(135deg, #eef0f4, #c9ced8); color: #5f6675; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); cursor: not-allowed; }
.pf-cc-ico { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; font-size: 17px; }
.pf-callcard.off .pf-cc-ico { filter: grayscale(1); opacity: .75; }
.pf-cc-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pf-cc-txt b { font-size: 13px; }
.pf-cc-txt small { font-size: 10.5px; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-cc-lock { position: absolute; top: 5px; inset-inline-end: 6px; width: 16px; height: 16px; border-radius: 50%; background: #7d8494; display: grid; place-items: center; }
.pf-cc-lock svg { width: 10px; height: 10px; }