/* ================= Друзья (ui/friends.js) и приглашения в комнату (ui/invites.js) ================= */

/* точка «есть заявки в друзья» на аватаре в шапке — как у новых предметов */
#profileChip .pf-av { position: relative; }
.fr-dot { top: -2px; right: -2px; }
.pm-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #ade55c; color: #10140c; font: 800 12px/20px Inter, sans-serif; text-align: center; }

/* ---------- Раздел #/friends ---------- */
.page-friends .fr-wrap { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.fr-addbox { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.fr-addbox > b { font-family: var(--font-display); font-size: 18px; letter-spacing: 1px; color: #dff8ff; text-transform: uppercase; }
.fr-form { display: flex; gap: 8px; margin-top: 6px; }
.fr-input, .iv-link, .iv-name {
  flex: 1; min-width: 0; height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(94,224,255,.28);
  background: rgba(0,0,0,.35); color: #fff; font: 600 15px Inter, sans-serif;
}
.fr-input:focus, .iv-link:focus, .iv-name:focus { outline: none; border-color: #5ee0ff; }
.fr-form .btn-primary { flex-shrink: 0; }
.ico-btn i { display: inline-flex; }
.fr-lists { display: flex; flex-direction: column; gap: 16px; }
.fr-sec h4 { margin: 0 0 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #9fb6c4; }
/* компактные карточки, по 3 в ряд */
.fr-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fr-full { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(255,170,60,.1); border: 1px solid rgba(255,170,60,.35); color: #ffcf8a; font-size: 13px; }
.fr-empty { margin: 4px 2px; }
.fr-row, .iv-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; min-width: 0; }
.fr-row:hover { border-color: rgba(94,224,255,.5); }
.fr-av { position: relative; flex-shrink: 0; display: inline-flex; }
.fr-ava { border-radius: 10px; background: radial-gradient(circle at 50% 40%, #2a3a5e, #141a30); }
.fr-online { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: #59606e; box-shadow: 0 0 0 2px #0d1520; }
.fr-online.on { background: #4ee07a; box-shadow: 0 0 0 2px #0d1520, 0 0 8px rgba(78,224,122,.7); }
.fr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-main b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-main small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-main small.on { color: #7fe9a0; }
.fr-rank { display: inline-flex; flex-shrink: 0; }
.fr-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.fr-acts .icon-btn { width: 28px; height: 28px; font-size: 13px; }
.fr-join { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 9px; font-size: 12px; color: #10140c; background: #ade55c; border-color: #ade55c; font-weight: 700; }
.fr-join.watch { background: transparent; color: #9fe8ff; border-color: rgba(94,224,255,.5); }
.fr-join i { display: inline-flex; }
.fr-ok { height: 28px; padding: 0 10px; font-size: 12px; color: #10140c; background: #ade55c; border-color: #ade55c; font-weight: 700; }
.fr-guest { width: min(460px, 100%); margin: 30px auto; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.fr-guest > span { color: #5ee0ff; display: inline-flex; }
.fr-guest b { font-family: var(--font-display); font-size: 22px; }
.fr-add[disabled] { opacity: .5; cursor: default; }

/* в профиле игрока: «В друзья» и «Пожаловаться» рядом */
.pp-acts { display: flex; gap: 8px; margin-top: 14px; }
.pp-acts .pp-report { margin-top: 0; flex: 1; }
.pp-acts .fr-add { color: #9fe8ff; border-color: rgba(94,224,255,.4); }
.pp-friend { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #7fe9a0; font-weight: 600; font-size: 14px; }
.pp-friend svg { flex-shrink: 0; }

/* итоги матча и рейтинга: кнопка рядом с жалобой */
#overlay .go-report.fr-add:hover { color: #5ee0ff; }
.rkr-acts { display: inline-flex; gap: 2px; justify-content: flex-end; }
.rkr-report.fr-add:hover { color: #5ee0ff; }

/* ---------- Лобби: «Позвать» ---------- */
/* заметная кнопка под списком игроков */
.invite-cta {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; margin: 0 12px 12px; padding: 11px 14px; text-align: left; cursor: pointer;
  border: 1px solid rgba(173,229,92,.55); border-radius: 10px; color: #eaffd0;
  background: linear-gradient(100deg, rgba(173,229,92,.22), rgba(94,224,255,.12)); box-shadow: 0 0 18px rgba(173,229,92,.15) inset;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.invite-cta:hover { transform: translateY(-1px); border-color: #ade55c; box-shadow: 0 0 22px rgba(173,229,92,.35) inset, 0 6px 18px rgba(0,0,0,.35); }
.invite-cta.hidden { display: none; }
.ic-ico { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: #ade55c; color: #10140c; flex-shrink: 0; }
.ic-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ic-txt b { font-family: var(--font-display); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; }
.ic-txt small { font-size: 11.5px; color: #b7c9a0; }
.ic-go { display: inline-flex; color: #ade55c; }
body.m-app .invite-cta { display: none; }

.iv-modal .pp-box { width: min(860px, 100%); max-height: 88vh; display: flex; flex-direction: column; }
.iv-welcome-modal .pp-box { width: min(480px, 100%); display: block; }
.iv-modal h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 22px; letter-spacing: .5px; }
.iv-modal .rp-title span { color: #5ee0ff; }
.iv-linkrow { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; }
.iv-ico { display: inline-flex; color: #5ee0ff; }
.iv-link { font-size: 13px; color: #cfe9f5; }
.iv-h { margin: 16px 0 8px; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: #9fb6c4; }
.iv-friends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; align-content: start; min-height: 120px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.iv-friends > p { grid-column: 1 / -1; }
.iv-row { cursor: default; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.03); }
.iv-row:not(.on) { opacity: .6; }
.iv-btn { flex-shrink: 0; min-width: 96px; }
.iv-btn[disabled] { opacity: .55; cursor: default; }

/* ---------- Всплывашка «Вас позвали в игру» (в меню) ---------- */
.iv-stack { position: fixed; right: 16px; bottom: 16px; z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(360px, calc(100vw - 32px)); }
.iv-pop { display: flex; gap: 12px; padding: 14px 16px 16px; overflow: hidden; animation: ivIn .3s ease-out; box-shadow: 0 16px 40px rgba(0,0,0,.6); }
.iv-pop.out { animation: ivOut .25s ease-in forwards; }
@keyframes ivIn { from { transform: translateX(30px); opacity: 0; } }
@keyframes ivOut { to { transform: translateX(30px); opacity: 0; } }
.iv-pop-ico { display: inline-flex; color: #5ee0ff; flex-shrink: 0; padding-top: 2px; }
.iv-pop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.iv-pop-main b { font-size: 15px; color: #fff; }
.iv-pop-main small { font-size: 12px; color: var(--muted); }
.iv-pop-acts { display: flex; gap: 8px; margin-top: 8px; }
.iv-pop-acts button { height: 34px; padding: 0 16px; font-size: 14px; }
.iv-pop-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #5ee0ff; transform-origin: left; animation: ivBar linear forwards; }
@keyframes ivBar { to { transform: scaleX(0); } }

/* ---------- Вход по ссылке: только ник ---------- */
.iv-roominfo { margin: 4px 0 14px; }
.iv-welcome { display: flex; flex-direction: column; gap: 8px; }
.iv-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: #9fb6c4; }
.iv-namerow { display: flex; gap: 8px; }
.iv-name { font-size: 18px; font-family: var(--font-display); letter-spacing: .5px; }
.iv-dice { width: 42px; height: 42px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
.iv-login { width: 100%; margin-top: 10px; }

@media (max-width: 1100px) { .fr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .fr-list, .iv-friends { grid-template-columns: 1fr; }
  .fr-rank { display: none; }
}
#mMe { position: relative; }
#mMe .fr-dot { top: 0; left: 32px; right: auto; }