/* ==========================================================================
   Ник: свои префиксы (цвета, шрифты, фон) и рамки ника. Общий для игры и Студии.
   ========================================================================== */

/* --- Префикс со своим оформлением --- */
.pfx .pt { display: inline-block; }
.pfx.cust {
  position: relative; overflow: hidden;
  font-family: var(--pf-font); font-weight: var(--pf-w); color: var(--pf-fg);
  background: var(--pf-bg); box-shadow: inset 0 0 0 1px var(--pf-bd);
}
.pfx.cust.bare { padding: 0 0.15em; }
.pfx.cust.grad .pt { background: linear-gradient(90deg, var(--pf-fg), var(--pf-fg2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pfx.cust.glow .pt { filter: drop-shadow(0 0 calc(var(--pf-glow) * .5) var(--pf-fg)) drop-shadow(0 0 var(--pf-glow) var(--pf-fg2)); }
.pfx.cust.it .pt { font-style: italic; transform: skewX(-8deg); }
.pfx.cust.up .pt { text-transform: uppercase; letter-spacing: .06em; }
.pfx.cust.a-shine::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .7) 50%, transparent 70%);
  background-size: 250% 100%; animation: pf-shine 2.6s ease-in-out infinite;
}
@keyframes pf-shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.pfx.cust.a-rainbow { animation: pf-hue 5s linear infinite; }
@keyframes pf-hue { to { filter: hue-rotate(360deg); } }
.pfx.cust.a-pulse .pt { animation: pf-pulse 1.4s ease-in-out infinite; }
@keyframes pf-pulse { 50% { transform: scale(1.08); filter: brightness(1.35); } }
.pfx.cust.a-float .pt { animation: pf-float 2.2s ease-in-out infinite; }
@keyframes pf-float { 50% { transform: translateY(-2px); } }

/* --- Бейдж над головой: уровень слева, в рамке только ник, корона справа, префикс под ником --- */
.tag .nmrow { display: flex; align-items: center; gap: 7px; }
.tag .nmrow > .lv { margin: 0; height: 20px; min-width: 22px; font-size: 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.tag.me .nmrow > .lv { background: #fff; color: #A3105C; }
.tag .nmrow .rd { margin: 0; font-size: 15px; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.tag .nm {
  --nm-bg: rgba(20, 10, 38, .78);
  position: relative; padding: 4px 12px; border-radius: 12px; white-space: nowrap;
  font-weight: 800; font-size: 13px; color: #fff;
  background: var(--nm-bg); border: 1px solid var(--line);
}
.tag.me .nm { --nm-bg: #D9468C; background: var(--nm-bg); border-color: transparent; }
.tag .pxrow { display: flex; justify-content: center; margin-top: -1px; }
.tag .pxrow:empty { display: none; }
.tag .pxrow .pfx { font-size: 11px; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tag .pxrow .pfx.cust { box-shadow: inset 0 0 0 1px var(--pf-bd), 0 2px 8px rgba(0, 0, 0, .35); }
.tag .pxrow .pfx.cust.bare { box-shadow: none; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }

/* --- Рамки ника: класс nf-<key> на самом нике --- */
.nfp { display: inline-block; position: relative; padding: 4px 12px; border-radius: 12px; font-weight: 800; font-size: 13px; color: #fff; white-space: nowrap;
  --nm-bg: rgba(20, 10, 38, .78); background: var(--nm-bg); border: 1px solid rgba(255, 255, 255, .14); }

.nf-dash { border: 2px dashed rgba(255, 255, 255, .85) !important; }
.nf-sticker { border: 2px solid #fff !important; box-shadow: 3px 3px 0 #0B0614; transform: rotate(-2deg); }
.nf-neon-pink { border: 2px solid #FF5FB0 !important; box-shadow: 0 0 10px #FF5FB0, inset 0 0 8px rgba(255, 95, 176, .55); }
.nf-neon-mint { border: 2px solid #4FE3C1 !important; box-shadow: 0 0 10px #4FE3C1, inset 0 0 8px rgba(79, 227, 193, .5); }
.nf-double { border: 4px double #fff !important; }
.nf-bubble { border: 3px solid #9FDFFF !important; border-radius: 999px !important; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .55), 0 0 12px rgba(127, 227, 255, .55); }
.nf-ice {
  border: 2px solid transparent !important;
  background: linear-gradient(var(--nm-bg), var(--nm-bg)) padding-box, linear-gradient(135deg, #F2FDFF, #7FE3FF 45%, #8F9BFF) border-box !important;
  box-shadow: 0 0 10px rgba(127, 227, 255, .45);
}
.nf-ice::after { content: '❄'; position: absolute; right: -7px; top: -9px; font-size: 13px; color: #CFF6FF; text-shadow: 0 0 6px #7FE3FF; }
.nf-pixel { border: 0 !important; border-radius: 0 !important; margin: 3px;
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 -6px 0 #FF5FB0, 0 6px 0 #8F6BFF, -6px 0 0 #FF5FB0, 6px 0 0 #8F6BFF; }
.nf-hearts { border: 2px solid #FF8FC8 !important; box-shadow: 0 0 8px rgba(255, 95, 176, .45); }
.nf-hearts::before, .nf-hearts::after { content: '♥'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; color: #FF5FB0; text-shadow: 0 0 6px rgba(255, 95, 176, .8); }
.nf-hearts::before { left: -15px; } .nf-hearts::after { right: -15px; }
.nf-stars { border: 2px solid #FFE08A !important; box-shadow: 0 0 8px rgba(255, 200, 87, .45); }
.nf-stars::before, .nf-stars::after { content: '✦'; position: absolute; font-size: 12px; color: #FFE08A; text-shadow: 0 0 6px #FFC857; }
.nf-stars::before { left: -8px; top: -9px; } .nf-stars::after { right: -8px; bottom: -9px; }
.nf-sakura { border: 2px solid #FFC0DA !important; box-shadow: 0 0 8px rgba(255, 160, 200, .4); }
.nf-sakura::before, .nf-sakura::after { content: '✿'; position: absolute; font-size: 14px; color: #FF9CC8; text-shadow: 0 0 5px rgba(255, 255, 255, .6); }
.nf-sakura::before { left: -9px; top: -11px; } .nf-sakura::after { right: -9px; bottom: -11px; transform: rotate(40deg); }
.nf-cat { border: 2px solid #FFB8DD !important; margin-top: 8px; }
.nf-cat::before, .nf-cat::after { content: ''; position: absolute; top: -11px; width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid #FFB8DD; }
.nf-cat::before { left: 7px; transform: rotate(-12deg); } .nf-cat::after { right: 7px; transform: rotate(12deg); }
.nf-cyber { border: 2px solid transparent !important; border-radius: 0 !important;
  background: linear-gradient(var(--nm-bg), var(--nm-bg)) padding-box, linear-gradient(90deg, #3FF3FF, #8F6BFF) border-box !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.nf-gold { border: 2px solid transparent !important;
  background: linear-gradient(var(--nm-bg), var(--nm-bg)) padding-box, linear-gradient(135deg, #FFF3C4, #FFC857 40%, #B8780F 60%, #FFE08A) border-box !important;
  box-shadow: 0 0 12px rgba(255, 200, 87, .55), inset 0 0 8px rgba(255, 200, 87, .3); }
.nf-glitch { border: 2px solid #fff !important; box-shadow: -3px 0 0 #FF3D7F, 3px 0 0 #3FD3FF; animation: nf-glitch 2.4s steps(1) infinite; }
@keyframes nf-glitch { 0%, 86%, 100% { box-shadow: -3px 0 0 #FF3D7F, 3px 0 0 #3FD3FF; transform: none; } 88% { box-shadow: 4px 0 0 #FF3D7F, -4px 0 0 #3FD3FF; transform: translateX(1px); } 92% { box-shadow: -5px 1px 0 #FF3D7F, 5px -1px 0 #3FD3FF; transform: translateX(-1px); } }
.nf-fire { border: 2px solid transparent !important;
  background: linear-gradient(var(--nm-bg), var(--nm-bg)) padding-box, linear-gradient(90deg, #FFD23D, #FF7A3D, #FF3D3D, #FF7A3D, #FFD23D) border-box !important;
  background-size: 100% 100%, 200% 100% !important; animation: nf-flow 1.6s linear infinite; box-shadow: 0 0 12px rgba(255, 110, 50, .65), 0 -4px 10px rgba(255, 160, 60, .35); }
@keyframes nf-flow { to { background-position: 0 0, 200% 0; } }
.nf-wings::before, .nf-wings::after {
  content: ''; position: absolute; top: 50%; width: 22px; height: 18px; transform: translateY(-55%);
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 36'%3E%3Cpath fill='%23F4F0FF' d='M44 14C34 2 16 0 2 4c8 2 13 5 16 9-7-1-12 0-16 3 7 0 12 2 15 5-5 0-9 2-11 5 8-2 15-1 20 3 4-6 11-11 18-15z'/%3E%3C/svg%3E");
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .7));
}
.nf-wings { border: 2px solid #F4F0FF !important; box-shadow: 0 0 10px rgba(255, 255, 255, .45); }
.nf-wings::before { left: -24px; } .nf-wings::after { right: -24px; transform: translateY(-55%) scaleX(-1); }
.nf-aurora { border: 2px solid rgba(255, 255, 255, .5) !important; animation: nf-aurora 4s ease-in-out infinite; }
@keyframes nf-aurora { 0%, 100% { box-shadow: 0 0 12px #4FE3C1, inset 0 0 8px rgba(79, 227, 193, .5); } 33% { box-shadow: 0 0 14px #8F6BFF, inset 0 0 8px rgba(143, 107, 255, .5); } 66% { box-shadow: 0 0 14px #FF5FB0, inset 0 0 8px rgba(255, 95, 176, .5); } }
.nf-rainbow { border: 2px solid transparent !important;
  background: linear-gradient(var(--nm-bg), var(--nm-bg)) padding-box, linear-gradient(90deg, #FF5F6D, #FFC857, #4FE3C1, #3FA0FF, #8F6BFF, #FF5FB0, #FF5F6D) border-box !important;
  background-size: 100% 100%, 300% 100% !important; animation: nf-flow 3s linear infinite; box-shadow: 0 0 10px rgba(255, 255, 255, .25); }
.nf-royal { --nm-bg: linear-gradient(180deg, #3A1466, #22093F); border: 3px double #FFC857 !important; box-shadow: 0 0 12px rgba(255, 200, 87, .4); margin-top: 6px; }
.nf-royal.nm, .nf-royal.nfp { background: var(--nm-bg) !important; }
.nf-royal::before { content: '❖'; position: absolute; left: 50%; top: -12px; transform: translateX(-50%); font-size: 12px; color: #FFC857; text-shadow: 0 0 6px #FFC857; }

/* превью рамок в окне выбора */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; max-height: 52vh; overflow-y: auto; padding: 14px 6px 6px; margin-bottom: 12px; }
.fr-card { display: grid; justify-items: center; gap: 10px; padding: 16px 8px 10px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid transparent; text-align: center; }
.fr-card.on { border-color: rgba(79, 227, 193, .6); background: rgba(79, 227, 193, .1); }
.fr-card .fr-nm { font-size: 12px; color: var(--muted, #B9A9D9); font-weight: 700; }
.fr-card .nfp { max-width: 100%; overflow: visible; }
.fr-card .btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .pfx.cust, .pfx.cust .pt, .pfx.cust::after, .nf-glitch, .nf-fire, .nf-aurora, .nf-rainbow { animation: none !important; }
}

/* рамки с украшениями по бокам — место для них, чтобы не наезжали на уровень и корону */
.tag .nm.nf-wings { margin: 0 22px; }
.tag .nm.nf-hearts { margin: 0 13px; }
.tag .nm.nf-stars, .tag .nm.nf-sakura, .tag .nm.nf-ice { margin: 0 6px; }
.tag .nm.nf-pixel { margin: 3px 4px; }
.fr-card .nfp.nf-wings { margin: 0 22px; }