/* Friends (requests and answers), the blacklist, the profile's photo album with likes, and the report dialog. */

/* ── the profile: the album slides, ♥ likes the photo shown ── */
/* (low on the photo: the report sign, the like and the crown are higher up on one side) */
.pf-pnav { position: absolute; bottom: 22px; z-index: 2; width: 30px; height: 44px; border-radius: 10px; background: rgba(0, 0, 0, .28); color: #fff; font-size: 26px; line-height: 1; }
.pf-pnav.prev { left: 6px; }
.pf-pnav.next { right: 6px; }
.pf-pnav[hidden] { display: none; }
.pf-pnav:hover { background: rgba(0, 0, 0, .45); }
.pf-like { cursor: pointer; transition: transform .15s ease; }
.pf-like:active { transform: scale(.9); }
.pf-like.pop .pf-ico { animation: pfHeartPop .5s ease-out; }
@keyframes pfHeartPop { 0% { transform: scale(1); } 30% { transform: scale(1.45); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }

/* the friend button: its state written under it */
.pf-buttons .pf-round { position: relative; }
.pf-fr-label { position: absolute; top: 100%; left: 50%; margin-top: 3px; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: #6a5a92; white-space: nowrap; }
.pf-round.fr-sent .pf-fr-label { color: #d98a00; }
.pf-round.fr-received .pf-fr-label { color: #1f86e6; }
.pf-round.fr-received .pf-round-in { animation: frCall 1.4s ease-in-out infinite; }
@keyframes frCall { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 155, 255, .45); } 50% { box-shadow: 0 0 0 7px rgba(47, 155, 255, 0); } }
.pf-freq { display: flex; align-items: center; gap: 8px; margin: 18px 12px 4px; padding: 10px 12px; border-radius: 14px; background: #eaf4ff; color: #1b4f86; font-size: 13px; font-weight: 600; }
.pf-freq span { flex: 1; }
.pf-freq button { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; font-weight: 800; }
.pf-freq-no { background: #fff; color: #6a5a92; border: 1px solid #d9d2ea; }
.pf-freq-yes { background: linear-gradient(180deg, #4fb0ff, #1f86e6); color: #fff; }
.pf-blocked, .dm-blocked { display: flex; align-items: center; gap: 8px; margin: 14px 12px 4px; padding: 10px 12px; border-radius: 14px; background: #fff0f0; color: #a61e1e; font-size: 13px; font-weight: 600; }
.pf-blocked span, .dm-blocked span { flex: 1; }
.pf-blocked button, .dm-blocked button { height: 30px; padding: 0 12px; border-radius: 15px; background: #fff; border: 1px solid #f1b4b4; color: #c92a2a; font-weight: 800; font-size: 12px; }
.dm-blocked { margin: 6px 8px; }
.dm-block { width: 32px; height: 32px; border-radius: 50%; background: none; font-size: 15px; opacity: .75; }
.dm-block:hover { opacity: 1; background: rgba(0, 0, 0, .05); }

/* ── the blacklist: confirmation, and what the blocked player sees ── */
.bl-box { width: min(330px, 100%); padding: 22px 20px 18px; border-radius: 22px; background: #fff; text-align: center; box-shadow: 0 18px 50px rgba(20, 8, 40, .45); font-family: Montserrat, Cairo, sans-serif; animation: edPop .25s ease-out; }
.bl-photo { position: relative; width: 74px; height: 74px; margin: 0 auto 10px; }
.bl-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(.6); }
.bl-photo i { position: absolute; right: -4px; bottom: -4px; font-size: 26px; font-style: normal; }
.bl-title { display: block; color: #2b2340; font-size: 16px; }
.bl-icons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0 16px; }
.bl-i { position: relative; display: grid; place-items: center; height: 48px; border-radius: 14px; background: #fff5f5; font-size: 24px; }
.bl-i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 34px; height: 3px; margin: -1.5px 0 0 -17px; border-radius: 2px; background: #e03131; transform: rotate(-35deg); box-shadow: 0 0 0 1.5px #fff5f5; }
.bl-list { margin: 12px 0 8px; padding: 0; list-style: none; text-align: start; }
.bl-list li { position: relative; padding: 5px 0 5px 22px; color: #4b4363; font-size: 13px; }
[dir="rtl"] .bl-list li { padding: 5px 22px 5px 0; }
.bl-list li::before { content: '✕'; position: absolute; inset-inline-start: 2px; color: #e03131; font-weight: 800; }
.bl-note { margin: 4px 0 14px; color: #8b84a3; font-size: 11px; }
.bl-btns { display: flex; gap: 8px; }
.bl-btns .btn { flex: 1; height: 42px; border-radius: 21px; font-weight: 800; }
.bl-btns .btn:first-child { flex: 0 0 52px; font-size: 16px; }
.bl-btns .btn.danger { background: linear-gradient(180deg, #ff6b6b, #e03131); color: #fff; }
.bl-me { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 60px 26px; text-align: center; color: #4b4363; }
.bl-me-ico { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: #fff0f0; font-size: 40px; }
.bl-me b { font-size: 17px; color: #2b2340; }
.bl-me p { margin: 0 0 6px; font-size: 13px; }

/* ── friends and visitors: requests ── */
.soc-sub { margin: 10px 14px 4px; color: #8b84a3; font-size: 12px; font-weight: 800; }
.soc-acts { display: flex; gap: 6px; margin-inline-start: auto; }
.soc-act.yes, .soc-act.no, .soc-act.wait { height: 30px; padding: 0 12px; display: inline-grid; place-items: center; border-radius: 15px; font-size: 12px; font-weight: 800; cursor: pointer; }
.soc-act.yes { background: linear-gradient(180deg, #4fb0ff, #1f86e6); color: #fff; }
.soc-act.no { background: #f1edf8; color: #6a5a92; }
.soc-act.wait { margin-inline-start: auto; background: #fff6e6; color: #c47a00; border: 1px solid #f6d79d; }
.soc-tabs small.hot { background: #ff3d6e; color: #fff; }

/* the Events list: a friend request is answered in place */
.nt-fr { display: flex; align-items: center; gap: 6px; flex: none; }
.nt-fr-no { width: 30px; height: 30px; border-radius: 50%; background: #f1edf8; color: #6a5a92; font-weight: 800; }
.nt-fr-yes { height: 30px; padding: 0 12px; border-radius: 15px; background: linear-gradient(180deg, #4fb0ff, #1f86e6); color: #fff; font-size: 12px; font-weight: 800; }

/* ── my photo's likers ── */
.ph-likers { position: absolute; left: 12px; right: 12px; bottom: 92px; z-index: 5; max-height: 55%; display: flex; flex-direction: column; border-radius: 16px; background: rgba(255, 255, 255, .97); color: #2b2340; box-shadow: 0 12px 30px rgba(0, 0, 0, .4); overflow: hidden; }
.ph-likers-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid #eee6f8; font-size: 14px; }
.ph-likers-head button { width: 28px; height: 28px; border-radius: 50%; background: #f4effb; }
.ph-likers-list { overflow: auto; padding: 6px; }
.ph-liker { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 8px; border-radius: 10px; background: none; color: inherit; font-size: 13px; font-weight: 700; text-align: start; }
.ph-liker:hover { background: #f7f2ff; }
.ph-liker img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.ph-likers-none { padding: 16px; margin: 0; text-align: center; color: #8b84a3; font-size: 13px; }

/* ── the report dialog: who, the violations as icon tiles, Send ── */
.rp2 { width: min(340px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 22px; background: #fff; box-shadow: 0 18px 50px rgba(20, 8, 40, .45); font-family: Montserrat, Cairo, sans-serif; animation: edPop .25s ease-out; }
.rp-top { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 14px; background: linear-gradient(135deg, #ff6b6b, #e03131); color: #fff; }
.rp-top img, .rp-emblem { width: 36px; height: 36px; flex: none; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .7); }
.rp-emblem { display: grid; place-items: center; background: #fff; font-size: 18px; }
.rp-top b { flex: 1; min-width: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-top .rp-x { position: static; flex: none; }
.rp2 .rp-kinds button { flex: 1 1 0; padding: 0 6px; }
.rp-prev { margin: 10px 14px 0; padding: 8px 12px; border-radius: 12px; background: #f6f3fb; color: #2b2340; font-size: 13px; word-break: break-word; text-align: center; }
.rp-prev.msg { text-align: start; border-start-start-radius: 4px; }
.rp-prev img { display: inline-block; max-height: 110px; max-width: 100%; border-radius: 8px; vertical-align: middle; }
.rp2 .rp-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px 14px 0; }
.rp2 .rp-reason { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: 6px 4px; border-radius: 14px; text-align: center; transition: background .15s, border-color .15s, transform .1s; }
.rp2 .rp-reason:active { transform: scale(.95); }
.rp2 .rp-reason.on { background: #fff0f0; border-color: #ff6b6b; color: #c92a2a; box-shadow: inset 0 0 0 1px #ff6b6b; }
.rp-ri { font-size: 22px; line-height: 1; }
.rp-rl { font-size: 11px; font-weight: 700; line-height: 1.15; }
.rp-send { display: block; width: calc(100% - 28px); height: 44px; margin: 12px 14px 14px; border-radius: 22px; background: linear-gradient(180deg, #ff6b6b, #e03131); color: #fff; font-size: 14px; font-weight: 800; box-shadow: 0 6px 16px rgba(224, 49, 49, .35); }
.rp-send:disabled { background: #e7e1f0; color: #a097b5; box-shadow: none; cursor: default; }
.rp-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px 18px; text-align: center; }
.rp-done-ico { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(180deg, #69db7c, #2f9e44); color: #fff; font-size: 30px; font-weight: 800; animation: edPop .35s ease-out; }
.rp-done b { color: #2b2340; font-size: 16px; }
.rp-done-btns { display: flex; gap: 8px; width: 100%; }
.rp-done-btns button { flex: 1; height: 42px; border-radius: 21px; font-size: 13px; font-weight: 800; }
.rp-block { background: #fff0f0; border: 1px solid #f1b4b4; color: #c92a2a; }
.rp-ok { background: linear-gradient(180deg, #69db7c, #2f9e44); color: #fff; }

/* ── who viewed my profile, shut below the VIP level: blurred photos, a lock, the count, the way to VIP ── */
.vis-lock { position: relative; margin: 12px; min-height: 260px; border-radius: 18px; overflow: hidden; background: #f4effb; }
.vis-blur { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; filter: blur(7px); opacity: .85; }
.vis-blur img, .vis-blur i { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; background: #d9cdee; }
.vis-lock-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .35); }
.vis-lock-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; font-size: 30px; box-shadow: 0 6px 18px rgba(80, 40, 140, .25); }
.vis-count { color: #3b2a63; font-size: 20px; }
.vis-vip { height: 44px; padding: 0 26px; border-radius: 22px; background: linear-gradient(180deg, #ffd25a, #f5a300); color: #4a2a00; font-size: 15px; font-weight: 800; box-shadow: 0 6px 16px rgba(245, 163, 0, .45); }

/* ── friends and visitors (the original's): two big tabs, white cards with the photo and its dot, round actions ── */
.fv { display: flex; flex-direction: column; gap: 10px; }
.fv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-tabs button { position: relative; height: 44px; border-radius: 14px; background: #f7f0ff; color: #7957b2; font-size: 15px; font-weight: 800; }
.fv-tabs button.on { background: #7957b2; color: #fff; box-shadow: 0 4px 12px rgba(121, 87, 178, .35); }
.fv-hot { position: absolute; top: -5px; inset-inline-end: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #ff3d6e; color: #fff; font-size: 11px; font-style: normal; line-height: 20px; }
.fv-list { display: flex; flex-direction: column; gap: 8px; }
.fv-card { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 16px; background: #fff; border: 1px solid #ece6f6; box-shadow: 0 2px 6px rgba(80, 40, 140, .05); cursor: pointer; }
.fv-card:hover { border-color: #d9cdf0; }
.fv-ph { position: relative; flex: 0 0 52px; height: 66px; }
.fv-ph img { width: 52px; height: 66px; border-radius: 8px; object-fit: cover; background: #eee; }
.fv-dot { position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #ff4d4f; border: 2px solid #fff; }
.fv-dot.on { background: #12c84a; }
.fv-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fv-txt b { color: #1f1633; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fv-line { color: #8b84a3; font-size: 12px; }
.fv-badges { font-size: 16px; line-height: 1; }
.fv-btn { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #f1e9ff; color: #7957b2; }
.fv-btn:hover { background: #e6dafb; }
.fv-btn.minus { background: #f3f1f7; color: #7957b2; }
.fv-btn.join { font-size: 18px; }
.fv-pill { flex: none; height: 32px; padding: 0 12px; border-radius: 16px; font-size: 12px; font-weight: 800; }
.fv-pill.yes { background: linear-gradient(180deg, #4fb0ff, #1f86e6); color: #fff; }
.fv-pill.no { width: 32px; padding: 0; background: #f1edf8; color: #6a5a92; }
.fv-pill.wait { background: #fff6e6; color: #c47a00; border: 1px solid #f6d79d; }
.fv-pill.unblock { background: #fff0f0; color: #c92a2a; border: 1px solid #f1b4b4; }
.fv-link { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #efe6ff; color: #2b2340; font-size: 13px; font-weight: 600; cursor: pointer; }
.fv-link span { flex: 1; }
.fv-copy { width: 34px; height: 34px; border-radius: 10px; background: none; color: #2b2340; font-size: 22px; }
.fv-search { height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid #e2dbef; background: #fff; font: 500 14px Montserrat, Cairo, sans-serif; color: #2b2340; }
.fv-search:focus { outline: none; border-color: #b197fc; }
.fv-head { margin-top: 2px; color: #4b4363; font-size: 13px; font-weight: 800; }
.fv-head b { color: #7957b2; margin-inline-start: 4px; }
.fv-send { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fv-send button { height: 44px; border-radius: 22px; color: #fff; font-size: 15px; font-weight: 800; }
.fv-vip { background: linear-gradient(180deg, #8fd14f, #5aa21e); }
.fv-pp { background: linear-gradient(180deg, #9a6cd6, #7347b8); }
.fv-blocked { align-self: center; padding: 8px 14px; border-radius: 16px; background: none; color: #8b84a3; font-size: 12px; font-weight: 700; }
.fv-back { align-self: flex-start; padding: 6px 10px; border-radius: 12px; background: #f4effb; color: #7957b2; font-weight: 800; font-size: 13px; }
.gf-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }

/* the private chat's ••• menu, under the button */
.dm-pop { position: absolute; top: 74px; inset-inline-end: 10px; z-index: 30; border-radius: 10px 0 10px 10px; }
[dir="rtl"] .dm-pop { border-radius: 0 10px 10px 10px; }

/* empty seats show whose they are: men's blue, women's pink */
.seat.empty.sex0 .plus { background: #4c9ffe; }
.seat.empty.sex1 .plus { background: #ff5fa2; }
.seat.empty.sex1 .seat-photo { border-color: rgba(255, 170, 210, .6); background: rgba(255, 140, 200, .16); }
.seat.empty.sex0 .seat-photo { border-color: rgba(150, 200, 255, .55); background: rgba(120, 180, 255, .14); }

/* ── invite friends to the table (the original's): search, All / Guys / Girls, ticks, one button at the bottom ── */
.iv2 { display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.iv2-hint { margin: 0; text-align: center; color: #8b84a3; font-size: 13px; }
.iv2-search { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 14px; background: #f7f2ff; border: 1px solid #e6dcf6; }
.iv2-search span { font-size: 18px; filter: grayscale(.3); }
.iv2-search input { flex: 1; border: 0; background: none; outline: none; font: 500 15px Montserrat, Cairo, sans-serif; color: #2b2340; }
.iv2-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.iv2-tabs button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 14px; background: #fff; border: 1px solid #e6dcf6; color: #4b4363; font-weight: 700; font-size: 13px; }
.iv2-tabs button span { font-size: 20px; }
.iv2-tabs button.on { background: #f1e9ff; border: 2px solid #9a7bd6; color: #5b3fa0; }
.iv2-list { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.iv2-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #8b84a3; font-size: 12px; font-weight: 700; }
.iv2-sub::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #b9b2c8; }
.iv2-sub.on::before { background: #12c84a; }
.iv2-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 16px; background: #fff; border: 1px solid #ece6f6; text-align: start; }
.iv2-row img { width: 48px; height: 52px; border-radius: 8px; object-fit: cover; }
.iv2-row b { flex: 1; color: #1f1633; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv2-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d4c8ea; flex: none; }
.iv2-row.on { border-color: #9a7bd6; background: #faf6ff; }
.iv2-row.on .iv2-check { border-color: #7957b2; background: #7957b2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5 9.5 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.iv2-foot { position: sticky; bottom: 0; padding: 10px 0 4px; background: linear-gradient(0deg, #fff 70%, rgba(255, 255, 255, 0)); }
.iv2-send { width: 100%; height: 48px; border-radius: 16px; background: #7957b2; color: #fff; font-size: 15px; font-weight: 800; }
.iv2-send:disabled { background: #e3dcef; color: #a69cbd; }

/* a guest's profile: message, add as a friend and court show locked (a guest only tries the game) */
.pf-round.pf-locked { filter: grayscale(1); opacity: .6; cursor: not-allowed; }
.pf-round.pf-locked .pf-round-in { position: absolute; }
.pf-lock-badge { position: absolute; inset-inline-end: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: #5a4a7a; display: grid; place-items: center; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.pf-lock-badge svg { width: 12px; height: 12px; }
.court-btn.locked { filter: grayscale(1); opacity: .65; cursor: not-allowed; }

/* the report window keeps its width in every language: its columns and tabs shrink with it, and a long word (Russian,
   German …) breaks inside its box instead of widening the window */
.rp2 { overflow-x: hidden; }
.rp2 .rp-reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp2 .rp-reason { min-width: 0; }
.rp-rl { max-width: 100%; overflow-wrap: break-word; hyphens: manual; -webkit-hyphens: manual; }
.rp-kinds { flex-wrap: wrap; }
.rp-kinds button { flex: 1 1 0; min-width: 0; height: auto; min-height: 30px; padding: 5px 8px; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.rp-top b, .rp-sub, .rp-note, .rp-prev { overflow-wrap: anywhere; }
.rp-send { white-space: normal; height: auto; min-height: 44px; padding: 8px 14px; line-height: 1.2; }
.rp-done-btns { flex-wrap: wrap; }
.rp-done-btns button { min-width: 0; height: auto; min-height: 42px; padding: 6px 12px; line-height: 1.2; }