/* Общие элементы платформы: аватарки с рамками, монеты, выбор ставки, награды. Подключаются и в играх. */
.pf-ava {
  --s: 36px; --ring: transparent;
  position: relative; display: inline-flex; flex-shrink: 0; vertical-align: middle;
  width: var(--s); height: var(--s); border-radius: 50%; background: #8a5a2b;
  box-shadow: 0 0 0 calc(var(--s) * .07) var(--ring), 0 1px 3px rgba(0, 0, 0, .35);
}
.pf-ava > svg, .pf-ava > img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }
/* Уровень — по центру под аватаркой. */
.pf-lvl {
  position: absolute; left: 50%; bottom: calc(var(--s) * -.14); transform: translateX(-50%);
  min-width: max(15px, calc(var(--s) * .42)); height: max(15px, calc(var(--s) * .3)); padding: 0 .35em;
  border-radius: 999px; background: #1b2430; color: #fff; border: 1.5px solid #fff; box-sizing: border-box;
  font: 700 max(9px, calc(var(--s) * .2))/1 system-ui, sans-serif; font-variant-numeric: tabular-nums;
  display: grid; place-items: center; white-space: nowrap;
}
/* Рамки — все анимированные: кольцо из градиента вращается вокруг аватарки (только снаружи круга). */
.pf-ava[class*="pf-frame-"]:not(.pf-frame-none)::before {
  content: ''; position: absolute; inset: calc(var(--s) * -.1); border-radius: 50%; pointer-events: none;
  background: var(--ring-grad); animation: pf-spin var(--spin, 6s) linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) * .1), #000 calc(100% - var(--s) * .09));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--s) * .1), #000 calc(100% - var(--s) * .09));
}
.pf-frame-bronze { --ring-grad: conic-gradient(#7a4a1d, #e3a35c, #9c5f27, #f0c08a, #7a4a1d); --spin: 7s; }
.pf-frame-silver { --ring-grad: conic-gradient(#8a939c, #ffffff, #a9b2bb, #e6ebf0, #8a939c); --spin: 6s; }
.pf-frame-gold { --ring-grad: conic-gradient(#a8740a, #fff3b0, #e0a923, #ffe27a, #a8740a); --spin: 5s; box-shadow: 0 0 calc(var(--s) * .3) rgba(242, 194, 48, .55); animation: pf-glow 2.4s ease-in-out infinite; }
.pf-frame-ruby { --ring-grad: conic-gradient(#7d0a35, #ff5c8d, #b0124a, #ff9ab8, #7d0a35); --spin: 4.5s; animation: pf-pulse 1.8s ease-in-out infinite; }
.pf-frame-legend { --ring-grad: conic-gradient(#f2c230, #d81b60, #6b5bd2, #2a9db5, #3f9d5a, #f2c230); --spin: 3s; box-shadow: 0 0 calc(var(--s) * .35) rgba(107, 91, 210, .55); }
@keyframes pf-spin { to { transform: rotate(1turn); } }
@keyframes pf-glow { 50% { box-shadow: 0 0 calc(var(--s) * .45) rgba(242, 194, 48, .85); } }
@keyframes pf-pulse { 50% { box-shadow: 0 0 calc(var(--s) * .4) rgba(216, 27, 96, .7); } }
@media (prefers-reduced-motion: reduce) { .pf-ava::before, .pf-ava { animation: none !important; } }

/* Обои профиля. */
.pf-wall-none { background: #232b38; }
.pf-wall-desert { background: linear-gradient(180deg, #f3b26b 0%, #e88a4e 45%, #a8562e 100%); }
.pf-wall-office { background: linear-gradient(160deg, #2f74c0, #1b3f72); }
.pf-wall-saloon { background: repeating-linear-gradient(90deg, #6b4423 0 22px, #5a381c 22px 24px), #6b4423; }
.pf-wall-night { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 60% 20%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 80% 60%, #fff, transparent), radial-gradient(1px 1px at 35% 75%, #fff, transparent), linear-gradient(180deg, #0b1230, #23205a); }
.pf-wall-cash { background: repeating-linear-gradient(45deg, #2e7d4f 0 14px, #286b44 14px 28px); }
.pf-wall-aurora { background: linear-gradient(120deg, #0f2027, #2a9db5, #6b5bd2, #3f9d5a, #0f2027); background-size: 300% 300%; animation: pf-aurora 9s ease-in-out infinite; }
.pf-wall-gold { background: linear-gradient(120deg, #7a5a10, #f6d77a, #b8860b, #fff3b0, #7a5a10); background-size: 300% 300%; animation: pf-aurora 7s ease-in-out infinite; }
@keyframes pf-aurora { 50% { background-position: 100% 50%; } }

/* Карточка профиля (своя — в профиле, чужая — по нажатию на игрока). */
.pf-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; margin-bottom: 12px; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.pf-card > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-card-name { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-card-lvl { opacity: .9; }
.pf-stats { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.pf-statrow { display: grid; grid-template-columns: 1.2fr 1fr 1fr .6fr; gap: 6px; font-size: 14px; padding: 6px 8px; border-radius: 8px; background: rgba(0, 0, 0, .06); }

/* Быстрая игра: три ставки. */
.pf-stakes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.pf-stake-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; }
.pf-stake-btn b { font-size: 22px; }
.pf-stake-btn span { font-size: 13px; font-weight: 700; }
.pf-stake-btn small { font-size: 11px; font-weight: 400; opacity: .75; }
.pf-mini-row { display: flex; gap: 8px; margin-bottom: 10px; }
.pf-mini { flex: 1; padding: 8px; background: rgba(255, 255, 255, .55); color: inherit; border: 2px solid rgba(0, 0, 0, .2); box-shadow: none; }
.pf-mini.on { border-color: currentColor; background: rgba(255, 255, 255, .95); }
.pf-countdown { position: relative; margin: 10px 0 6px; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .08); overflow: hidden; font-weight: 700; text-align: center; }
.pf-countdown i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p, 0%); background: #e0a923; transition: width .25s linear; }
.pf-botface { width: 32px; height: 32px; display: inline-grid; place-items: center; font-size: 20px; }

.pf-coins { display: inline-flex; align-items: center; gap: .3em; font-weight: 700; white-space: nowrap; }
/* Золотая монета. */
.pf-coin {
  display: inline-block; width: 1.05em; height: 1.05em; border-radius: 50%; vertical-align: -.17em; flex-shrink: 0; margin: 0 .08em;
  background: radial-gradient(circle at 35% 30%, #fff6c4 0 10%, #f7d76a 28%, #e0a923 62%, #a8740a 100%);
  box-shadow: inset 0 0 0 .07em #b8860b, inset 0 0 0 .15em #f6d77a, 0 .05em .1em rgba(0, 0, 0, .3);
}

/* Профиль в меню игры */
.pf-chip { display: flex; align-items: center; gap: 12px; }
.pf-chip .grow { flex: 1; min-width: 0; }
.pf-chip b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-chip a { color: inherit; font-size: 14px; }

/* Выбор ставки */
.pf-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.pf-tier {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 8px; font-weight: 400;
  background: rgba(255, 255, 255, .55); color: inherit; border: 2px solid rgba(0, 0, 0, .2); box-shadow: none;
}
.pf-tier b { font-size: 15px; }
.pf-tier span { font-size: 12px; opacity: .8; }
.pf-tier.on { border-color: currentColor; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 2px rgba(0, 0, 0, .15); }
.pf-tier[data-poor] { opacity: .5; }
@media (max-width: 420px) { .pf-tiers { grid-template-columns: 1fr; } .pf-tier { flex-direction: row; flex-wrap: wrap; column-gap: 8px; } }

.pf-stake { font-size: 14px; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .06); margin-bottom: 10px; }

/* Награда в конце партии */
.pf-rewards { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(63, 157, 90, .14); font-weight: 700; }
.pf-rewards.empty { background: rgba(0, 0, 0, .06); font-weight: 400; }

/* Значок Клуба на аватарке. */
.pf-crown { position: absolute; top: calc(var(--s) * -.22); right: calc(var(--s) * -.12); font-style: normal; font-size: max(11px, calc(var(--s) * .38)); line-height: 1; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pf-frame-club { --ring-grad: conic-gradient(#6b5bd2, #f2c230, #d81b60, #f2c230, #6b5bd2); --spin: 4s; box-shadow: 0 0 calc(var(--s) * .35) rgba(242, 194, 48, .6); }
.pf-wall-club { background: radial-gradient(circle at 80% 20%, rgba(242, 194, 48, .55), transparent 45%), linear-gradient(135deg, #2b1055, #6b5bd2 55%, #d81b60); }

/* Кнопка «в друзья» в карточке профиля. */
.pf-friend-btn { width: 100%; margin: 4px 0 10px; padding: 10px; border-radius: 10px; font-weight: 700; background: #2e7d32; color: #fff; border: 0; }
.pf-friend-btn.outgoing { background: #6b7685; }
.pf-friend-btn.incoming { background: #e0a923; color: #1b2430; }
.pf-friend-btn.friends { background: transparent; color: inherit; border: 2px solid currentColor; opacity: .85; }

/* Окно «Позвать друзей» поверх игры. */
.pf-sheet { position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .55); }
.pf-sheet-card { width: 100%; max-width: 560px; max-height: 80dvh; overflow-y: auto; background: #f4ecdc; color: #1b2430; border-radius: 18px 18px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom)); font-family: 'PT Sans', system-ui, sans-serif; animation: pf-up .22s ease-out; }
@keyframes pf-up { from { transform: translateY(40px); opacity: 0; } }
.pf-sheet-head { display: flex; align-items: center; justify-content: space-between; font-size: 18px; margin-bottom: 10px; }
.pf-x { background: none; border: 0; font-size: 18px; padding: 4px 10px; color: inherit; cursor: pointer; box-shadow: none; }
.pf-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.pf-row button { padding: 7px 12px; border-radius: 9px; font-weight: 700; }
.pf-grow { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-grow b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-grow small { opacity: .7; font-size: 12px; }
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #3f9d36; margin-right: 5px; vertical-align: 1px; font-style: normal; }
.pf-wide { width: 100%; padding: 10px; font-weight: 700; border-radius: 10px; }
.pf-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  z-index: 80; background: rgba(0, 0, 0, .85); color: #fff; padding: 10px 16px; border-radius: 10px; max-width: 90vw; transition: all .2s; font-family: system-ui, sans-serif; }
.pf-toast.on { opacity: 1; transform: translate(-50%, 0); }