/* Рамки аватарок и шрифты ника (вкладки «Рамки» и «Шрифты» маркета).
   Файл подключается ПОСЛЕ inline-стилей (см. </style> в index.html), поэтому
   классы одного уровня спецификации перебивают игровые правила по порядку.

   Правила рамок:
   - класс вешается только на <img> аватара (img.fr-*): профиль, инфо матча,
     кооператив, превью карточки;
   - у <img> нет ::before/::after, поэтому рамка делается border/box-shadow/
     outline/background/animation - ничего лишнего;
   - box-sizing:border-box обязателен: иначе border увеличит размер аватара
     и сломает раскладку (в игре нет глобального *{box-sizing}). */

/* =========================== РАМКИ: монеты ============================== */

img.fr-bronze {
    box-sizing: border-box;
    border: 3px solid #8c5a2b;
    box-shadow: inset 0 0 0 2px #cd853f, 0 0 0 1px #5b3a1a;
}

img.fr-silver {
    box-sizing: border-box;
    border: 3px solid #c0c0c0;
    box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1px #7a7a7a;
}

img.fr-gold {
    box-sizing: border-box;
    border: 3px solid #d4af37;
    box-shadow: inset 0 0 0 2px #f5e084, 0 0 0 1px #8a6d1f;
}

img.fr-forest {
    box-sizing: border-box;
    border: 3px solid #2f7d32;
    box-shadow: inset 0 0 0 2px #7fd17f, 0 0 0 1px #1c4d1e;
}

img.fr-ocean {
    box-sizing: border-box;
    border: 3px solid #0a6ea8;
    box-shadow: inset 0 0 0 2px #7fd0ff, 0 0 0 1px #053d5c;
}

img.fr-retro {
    box-sizing: border-box;
    border: 4px double #d2691e;
    box-shadow: 0 0 0 1px #6b3410, inset 0 0 0 1px #ffd9a8;
}

/* =========================== РАМКЫ: рубли =============================== */

/* Золотое сияние - пульсирующий золотой ободок. */
img.fr-goldglow {
    box-sizing: border-box;
    border: 3px solid #ffd700;
    box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.75), inset 0 0 6px rgba(255, 236, 150, 0.8);
    animation: frGoldGlow 1.6s ease-in-out infinite alternate;
}

@keyframes frGoldGlow {
    from { box-shadow: 0 0 6px 1px rgba(255, 215, 0, 0.5), inset 0 0 4px rgba(255, 236, 150, 0.5); }
    to   { box-shadow: 0 0 16px 5px rgba(255, 215, 0, 0.95), inset 0 0 8px rgba(255, 245, 190, 0.95); }
}

/* Радуга - ободок перекрашивается по кругу. */
img.fr-rainbow {
    box-sizing: border-box;
    border: 3px solid #ff4d4d;
    box-shadow: 0 0 10px 2px rgba(255, 77, 77, 0.6);
    animation: frRainbow 3.6s linear infinite;
}

@keyframes frRainbow {
    0%   { border-color: #ff4d4d; box-shadow: 0 0 10px 2px rgba(255, 77, 77, 0.65); }
    16%  { border-color: #ffd24d; box-shadow: 0 0 10px 2px rgba(255, 210, 77, 0.65); }
    33%  { border-color: #5dff5d; box-shadow: 0 0 10px 2px rgba(93, 255, 93, 0.65); }
    50%  { border-color: #4dd2ff; box-shadow: 0 0 10px 2px rgba(77, 210, 255, 0.65); }
    66%  { border-color: #6b6bff; box-shadow: 0 0 10px 2px rgba(107, 107, 255, 0.65); }
    83%  { border-color: #e04dff; box-shadow: 0 0 10px 2px rgba(224, 77, 255, 0.65); }
    100% { border-color: #ff4d4d; box-shadow: 0 0 10px 2px rgba(255, 77, 77, 0.65); }
}

/* Пламя - красно-оранжевая рамка с мерцанием. */
img.fr-flame {
    box-sizing: border-box;
    border: 3px solid #ff6a00;
    box-shadow: 0 0 10px 2px rgba(255, 90, 0, 0.7), inset 0 0 8px rgba(255, 190, 60, 0.7);
    animation: frFlame 0.9s ease-in-out infinite alternate;
}

@keyframes frFlame {
    from { border-color: #ff5100; box-shadow: 0 0 7px 1px rgba(255, 70, 0, 0.6), inset 0 0 5px rgba(255, 160, 40, 0.6); }
    to   { border-color: #ffc300; box-shadow: 0 0 16px 5px rgba(255, 160, 0, 0.9), inset 0 0 10px rgba(255, 230, 120, 0.9); }
}

/* Неон - тонкий бирюзовый ободок с пульсацией. */
img.fr-neon {
    box-sizing: border-box;
    border: 2px solid #00fff2;
    box-shadow: 0 0 9px 2px rgba(0, 255, 242, 0.7);
    animation: frNeon 1.3s ease-in-out infinite alternate;
}

@keyframes frNeon {
    from { box-shadow: 0 0 4px 1px rgba(0, 255, 242, 0.45); opacity: 0.9; }
    to   { box-shadow: 0 0 15px 4px rgba(0, 255, 242, 1); opacity: 1; }
}

/* Мороз - статичный ледяной двойной ободок. */
img.fr-frost {
    box-sizing: border-box;
    border: 3px double #bfeaff;
    box-shadow: 0 0 0 1px #4aa6d6, 0 0 10px 2px rgba(150, 220, 255, 0.6), inset 0 0 6px rgba(230, 250, 255, 0.8);
}

/* Галактика - сине-фиолетовый ободок с медленной сменой цвета. */
img.fr-galaxy {
    box-sizing: border-box;
    border: 3px solid #7b3ff2;
    box-shadow: 0 0 12px 3px rgba(123, 63, 242, 0.7);
    animation: frGalaxy 5s ease-in-out infinite alternate;
}

@keyframes frGalaxy {
    from { border-color: #7b3ff2; box-shadow: 0 0 8px 2px rgba(123, 63, 242, 0.6); }
    50%  { border-color: #2f8bff; box-shadow: 0 0 16px 4px rgba(47, 139, 255, 0.8); }
    to   { border-color: #ff4dc4; box-shadow: 0 0 12px 3px rgba(255, 77, 196, 0.7); }
}

/* Матрица - зелёный код с полосами. */
img.fr-matrix {
    box-sizing: border-box;
    border: 2px solid #00ff66;
    background-image: repeating-linear-gradient(180deg, rgba(0, 255, 102, 0.28) 0 2px, rgba(0, 0, 0, 0) 2px 7px);
    box-shadow: 0 0 10px 2px rgba(0, 255, 102, 0.55);
    animation: frMatrix 2.4s linear infinite;
}

@keyframes frMatrix {
    from { background-position: 0 0; box-shadow: 0 0 6px 1px rgba(0, 255, 102, 0.4); }
    to   { background-position: 0 14px; box-shadow: 0 0 14px 4px rgba(0, 255, 102, 0.8); }
}

/* Роза - статичная розовая двойная рамка. */
img.fr-rose {
    box-sizing: border-box;
    border: 3px double #e0517a;
    box-shadow: 0 0 0 1px #7c1b38, 0 0 9px 2px rgba(255, 150, 190, 0.55), inset 0 0 6px rgba(255, 220, 235, 0.7);
}

/* Кристалл - статичный сине-белый гранёный ободок. */
img.fr-crystal {
    box-sizing: border-box;
    border: 3px solid #9be7ff;
    box-shadow: 0 0 0 1px #2c7a99, 0 0 12px 3px rgba(155, 231, 255, 0.7), inset 0 0 8px rgba(255, 255, 255, 0.9);
}

/* Королевская - фиолетовое поле с золотой каймой. */
img.fr-royal {
    box-sizing: border-box;
    border: 4px double #ffd700;
    box-shadow: 0 0 0 2px #6a1b9a, 0 0 10px 3px rgba(106, 27, 154, 0.65), inset 0 0 6px rgba(255, 240, 200, 0.6);
}

/* Диско - яркая смена цвета с короткими вспышками. */
img.fr-disco {
    box-sizing: border-box;
    border: 3px solid #ff00c8;
    box-shadow: 0 0 12px 3px rgba(255, 0, 200, 0.7);
    animation: frDisco 1.2s steps(1) infinite;
}

@keyframes frDisco {
    0%   { border-color: #ff00c8; box-shadow: 0 0 12px 3px rgba(255, 0, 200, 0.75); }
    25%  { border-color: #00e5ff; box-shadow: 0 0 12px 3px rgba(0, 229, 255, 0.75); }
    50%  { border-color: #ffe600; box-shadow: 0 0 12px 3px rgba(255, 230, 0, 0.75); }
    75%  { border-color: #7cff00; box-shadow: 0 0 12px 3px rgba(124, 255, 0, 0.75); }
    100% { border-color: #ff00c8; box-shadow: 0 0 12px 3px rgba(255, 0, 200, 0.75); }
}

/* Тень - тёмный ободок с мягкой внешней тенью. */
img.fr-shadow {
    box-sizing: border-box;
    border: 3px solid #16161c;
    box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.55), 0 0 0 1px #4a4a55, inset 0 0 8px rgba(0, 0, 0, 0.65);
}

/* ========================= ПРЕВЬЮ РАМК В КАРТОЧКЕ ======================= */
/* Игнорирует .market-card-img img{width:100%;height:100%} (большая
   спецификация) и оставляет запас под внешнее свечение внутри контейнера. */
.market-card-img img.pv-frame {
    width: 74px;
    height: 74px;
    object-fit: cover;
    flex: 0 0 auto;
}

/* =========================== ШРИФТЫ: монеты ============================= */

/* Классы шрифтов перечисляются для каждого элемента, где живёт ник:
   #profileNick имеет больший вес (1,0,0), поэтому для него нужен
   селектор #profileNick.fnt-*, иначе игровые правила его перебьют. */
.fnt-georgia, #profileNick.fnt-georgia {
    font-family: Georgia, "Times New Roman", serif;
}

.fnt-comic, #profileNick.fnt-comic {
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.fnt-impact, #profileNick.fnt-impact {
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    letter-spacing: 0.5px;
}

.fnt-courier, #profileNick.fnt-courier {
    font-family: "Courier New", Courier, monospace;
}

.fnt-verdana, #profileNick.fnt-verdana {
    font-family: Verdana, Geneva, sans-serif;
}

.fnt-hand, #profileNick.fnt-hand {
    font-family: "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
}

/* =========================== ШРИФТЫ: рубли ============================== */

/* Радуга - градиент по тексту, едет по горизонтали. */
.fnt-rainbow, #profileNick.fnt-rainbow {
    background-image: linear-gradient(90deg, #ff3b3b, #ffb300, #37d400, #00b3ff, #7b3ff2, #ff3bd0, #ff3b3b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fntRainbow 3.2s linear infinite;
}

@keyframes fntRainbow {
    from { background-position: 0% 0; }
    to   { background-position: 300% 0; }
}

/* Огонь - вертикальный градиент с едва заметным дрожанием. */
.fnt-fire, #profileNick.fnt-fire {
    background-image: linear-gradient(180deg, #fff3a0 0%, #ffb020 35%, #ff5a00 70%, #d81f00 100%);
    background-size: 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fntFire 1.1s ease-in-out infinite alternate;
}

@keyframes fntFire {
    from { background-position: 0% 0; text-shadow: 0 0 4px rgba(255, 120, 0, 0.35); }
    to   { background-position: 0% 100%; text-shadow: 0 0 9px rgba(255, 170, 40, 0.75); }
}

/* Неон - бирюзовая подсветка с пульсацией. */
.fnt-neon, #profileNick.fnt-neon {
    color: #7dfcff;
    text-shadow: 0 0 6px rgba(0, 255, 242, 0.85), 0 0 14px rgba(0, 255, 242, 0.5);
    animation: fntNeon 1.4s ease-in-out infinite alternate;
}

@keyframes fntNeon {
    from { text-shadow: 0 0 3px rgba(0, 255, 242, 0.5), 0 0 7px rgba(0, 255, 242, 0.3); }
    to   { text-shadow: 0 0 8px rgba(0, 255, 242, 1), 0 0 20px rgba(0, 255, 242, 0.7); }
}

/* Матрица - зелёный градиент с едущими строками кода. */
.fnt-matrix, #profileNick.fnt-matrix {
    background-image: linear-gradient(180deg, #b6ffbf 0%, #00e03c 45%, #007a1e 60%, #a8ffb6 100%);
    background-size: 100% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fntMatrix 2.6s linear infinite;
    font-family: "Courier New", Courier, monospace;
}

@keyframes fntMatrix {
    from { background-position: 0% 0; }
    to   { background-position: 0% 300%; }
}

/* Пиксель - моноширинный с жёсткой тенью. */
.fnt-pixel, #profileNick.fnt-pixel {
    font-family: "Courier New", Courier, monospace;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, 0.4);
}

/* Призрак - холодный полупрозрачный свет. */
.fnt-ghost, #profileNick.fnt-ghost {
    color: #dfe9f5;
    text-shadow: 0 0 8px rgba(159, 198, 255, 0.9), 0 0 16px rgba(110, 168, 255, 0.6);
}

/* Глич - красно-синие сдвиги с рывками. */
.fnt-glitch, #profileNick.fnt-glitch {
    color: #ececec;
    animation: fntGlitch 2.4s steps(1) infinite;
}

@keyframes fntGlitch {
    0%, 86%, 100% { text-shadow: none; transform: none; }
    87% { text-shadow: -2px 0 #ff2b6d, 2px 0 #00e5ff; transform: translateX(1px); }
    91% { text-shadow: 2px 0 #ff2b6d, -2px 0 #00e5ff; transform: translateX(-1px); }
    95% { text-shadow: -1px 0 #ff2b6d, 1px 0 #00e5ff; transform: none; }
}

/* Лёд - холодный градиент с переливом. */
.fnt-ice, #profileNick.fnt-ice {
    background-image: linear-gradient(120deg, #ffffff 0%, #a8e6ff 30%, #4aa6ff 55%, #dff6ff 80%, #ffffff 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: fntIce 3.4s ease-in-out infinite alternate;
}

@keyframes fntIce {
    from { background-position: 0% 0; }
    to   { background-position: 100% 0; }
}

/* Конфета - розовый с сахарным свечением. */
.fnt-candy, #profileNick.fnt-candy {
    color: #ff5fa2;
    text-shadow: 0 0 6px rgba(255, 95, 162, 0.75), 0 1px 0 #ffffff;
    font-family: "Comic Sans MS", "Comic Sans", cursive;
}

/* Королевский - фиолет с золотом. */
.fnt-royal, #profileNick.fnt-royal {
    color: #8a4bff;
    font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
    text-shadow: 0 0 6px rgba(138, 75, 255, 0.6), 0 1px 0 #3d1470, 0 0 12px rgba(255, 215, 0, 0.35);
}

/* Хром - металлический градиент по тексту. */
.fnt-chrome, #profileNick.fnt-chrome {
    background-image: linear-gradient(180deg, #ffffff 0%, #9fb6c6 45%, #4e5f6d 55%, #e8f6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0.4px #2b3941;
}

/* ======================= ПРЕВЬЮ ШРИФТОВ В КАРТОЧКЕ ====================== */
.market-card-img .pv-font {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    padding: 0 8px;
    word-break: break-word;
}