/* Основной контейнер */
#serverTop {
    text-align: center;
}

/* Ссылки внутри контейнера */
#serverTop a,
#serverTop a:hover,
#serverTop a:active,
#serverTop a:focus,
#serverTop a:visited,
#serverTop a:disabled {
    color: rgb(200, 200, 200);
    cursor: pointer;
    opacity: .7;
    text-decoration: none;
}

#serverTop a:hover {
    opacity: 1;
}

/* Контейнер для топ-3 игроков */
#serverTop > .topThird {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: stretch;
    align-items: start;
    width: 100%;
}

/* Общие стили для карточек топ-3 */
#serverTop > .topThird > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 6px;
    padding: 10px;
    will-change: opacity, transform, box-shadow;
    transition: all .3s ease-in-out;
    text-decoration: none;
}

/* Фоновая рамка для карточек */
#serverTop > .topThird > a > img {
    background-color: rgba(0, 0, 0, .6);
    border-radius: 50%;
    height: 120px;
    padding: 5px;
    position: relative;
    width: 120px;
}

/* Аватар игрока */
#serverTop > .topThird > a > .user > .avatar {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    left: calc(50% - 32px);
    position: absolute;
    top: 44px;
}

/* Имя игрока */
#serverTop > .topThird > a > .user > .name {
	display: flex;
    font-size: 1.5rem;
    font-weight: 700;
	max-width: 190px;
	padding: 6px 0;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    align-items: center;
    justify-content: center;
    gap: 6px;
    word-break: break-word;
}

#serverTop > .topThird > a > .user > .name .name-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
	/* flex: 1; */
    min-width: 0;
}

#serverTop > .topThird > a > .user > .name i {
    flex-shrink: 0;
}

/* Счет игрока */
#serverTop > .topThird > a > .user > .score {
    background: rgba(0, 0, 0, .5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
    color: rgb(200, 200, 200);
    padding: 5px 18px;
    display: inline-block;
	font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .4);
	text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

/* Элементы первого места */
#serverTop > .topThird > .one {
    background: linear-gradient(
        to bottom,
        rgba(255, 215, 0, .6) 0%,
        rgba(255, 190, 0, .6) 50%,
        rgba(255, 180, 0, .6) 51%,
        rgba(255, 165, 0, .6) 100%
    ), repeating-linear-gradient(
        45deg,
        rgba(255, 255, 200, .05) 0px,
        rgba(255, 255, 200, .05) 2px,
        transparent 4px,
        transparent 8px
    );
    background-blend-mode: normal;
    border: 2px solid rgba(255, 215, 0, .6);
    box-shadow: 0 1px 10px rgba(0, 0, 0, .3);
    transform: scale(.95);
    order: 2; /* Центральная позиция */
}

#serverTop > .topThird > .one:hover {
    border-color: rgba(255, 215, 0, .8);
    box-shadow: 0 2px 15px rgba(255, 215, 0, .5);
    transform: scale(1);
}

#serverTop > .topThird > .one > img {
    border: 2px solid rgba(255, 215, 0, .9);
    box-shadow: 0 0 10px rgb(255, 215, 0);
}

/* Элементы второго места */
#serverTop > .topThird > .two {
    background: linear-gradient(
        to bottom,
        rgba(192, 192, 192, .6) 0%,
        rgba(169, 169, 169, .6) 50%,
        rgba(146, 146, 146, .6) 51%,
        rgba(123, 123, 123, .6) 100%
	),
	repeating-linear-gradient(
		45deg,
		rgba(220, 220, 240, .05) 0px,
		rgba(220, 220, 240, .05) 2px,
		transparent 4px,
		transparent 8px
	);  
    background-blend-mode: normal;
    border: 2px solid rgba(192, 192, 192, .6);
    box-shadow: 0 1px 10px rgba(0, 0, 0, .3);
    transform: scale(.8);
    order: 1; /* Левая позиция */
}

#serverTop > .topThird > .two:hover {
    border-color: rgba(192, 192, 192, .8);
    box-shadow: 0 2px 15px rgba(192, 192, 192, .5);
    transform: scale(.85);
}

#serverTop > .topThird > .two > img {
    border: 2px solid rgba(192, 192, 192, .9);
    box-shadow: 0 0 10px rgb(192, 192, 192);
}

/* Элементы третьего места */
#serverTop > .topThird > .third {
    background: linear-gradient(
        to bottom,
        rgba(205, 127, 50, .6) 0%,
        rgba(184, 115, 51, .6) 50%,
        rgba(167, 103, 51, .6) 51%,
        rgba(139, 90, 43, .6) 100%
        ),
	repeating-linear-gradient(
		45deg,
		rgba(255, 180, 100, .05) 0px,
		rgba(255, 180, 100, .05) 2px,
		transparent 4px,
		transparent 8px
	);
    background-blend-mode: normal;
    border: 2px solid rgba(205, 127, 50, .6);
    box-shadow: 0 1px 10px rgba(0, 0, 0, .3);
    transform: scale(.8);
    order: 3; /* Правая позиция */
}

#serverTop > .topThird > .third:hover {
    border-color: rgba(205, 127, 50, .8);
    box-shadow: 0 2px 15px rgba(205, 127, 50, .5);
    transform: scale(.85);
}

#serverTop > .topThird > .third > img {
    border: 2px solid rgba(205, 127, 50, .9);
    box-shadow: 0 0 10px rgb(205, 127, 50);
}

/* Иконки внутри имени (звездочки/медали) */
#serverTop > .topThird .fa-trophy, 
#serverTop > .topThird .fa-medal {
    filter: drop-shadow(0 0 3px currentColor);
}

#serverTop > .topThird .fa-trophy { color: #ffd700; }
#serverTop > .topThird .two .fa-medal { color: #c0c0c0; }
#serverTop > .topThird .third .fa-medal { color: #cd7f32; }

/* Контейнер для всех карточек после топ-3 */
.ost-cards {
    display: block;
}

/* Строка с карточками */
.ost-row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    margin-bottom: 3px;
}

/* Контейнер для скрытых строк */
.hidden-rows {
    overflow: hidden;
    transition: max-height .5s ease-in-out;
}

/* Кнопка "показать ещё" */
.show-more-btn {
	display: inline-block;
	width: auto;
    text-align: center;
    margin: 3px auto;
    cursor: pointer;
    font-size: 2rem;
    color: rgba(190, 45, 50, .8);
    transition: opacity .3s ease-in-out, transform .3s ease-in-out;
	transform: scale(.9);
    user-select: none;
}

.show-more-btn:hover {
    opacity: 1;
    color: rgba(190, 45, 50, 1);
    transform: scale(1);
}

/* Анимация поворота иконки */
.show-more-btn i {
    transition: transform .5s ease-in-out;
    display: inline-block;
}

.show-more-btn.expanded i {
    transform: rotate(180deg);
}

/* Стиль карточки для игроков после топ-3 */
.ost .ost-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
        to bottom,
        rgba(190, 45, 50, .6) 0%,
        rgba(150, 35, 40, .6) 50%,
        rgba(140, 30, 35, .6) 51%,
        rgba(100, 20, 25, .6) 100%
	),
	repeating-linear-gradient(
		45deg,
		rgba(255, 200, 200, .05) 0px,
		rgba(255, 200, 200, .05) 2px,
		transparent 4px,
		transparent 8px
	);
	background-blend-mode: normal;
    border-radius: 6px;
    padding: 8px;
    text-align: center;
    border: 2px solid rgba(190, 45, 50, .6);
    box-shadow: 0 1px 7px rgba(0, 0, 0, .3);
    transform: scale(.90);
    transition: all .3s ease-in-out;
	will-change: opacity, transform, box-shadow;
    text-decoration: none;
}

.ost .ost-card:hover {
    opacity: 1;
    border-color: rgba(190, 45, 50, .8);
    box-shadow: 0 2px 12px rgba(190, 45, 50, .5);
    transform: scale(.95);
}

.ost .ost-card .avatar {
    border-radius: 25%;
    width: 70px;
    height: 70px;
    margin-bottom: 8px;
    border: 2px solid rgb(190, 45, 50);
    box-shadow: 0 0 10px rgba(190, 45, 50, .8);
	object-fit: cover;
    transition: box-shadow .3s;
    background: #1a1a1a;
}

.ost .ost-card:hover .avatar {
    box-shadow: 0 0 16px rgb(220, 60, 65);
}

.ost .ost-card .top-number,
.hint-name .hint-place-number {
	width: 32px;
    height: 32px;
    font-size: 1.25rem;
    font-weight: bold;
    color: rgb(200, 200, 200);
    text-shadow: 0 2px 5px black;
    background: rgba(80, 15, 20, .6);
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(190, 45, 50, .5);
	box-shadow: 0 0 7px rgba(190, 45, 50, .8), inset 0 2px 5px rgba(0, 0, 0, .5);
    display: inline-block;
    text-align: center;
    line-height: 32px;
}

/* Адаптивность */
@media (max-width: 650px) {
    .ost-row {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }

    .ost .ost-card .avatar {
        width: 85px;
        height: 85px;
    }

	.ost .ost-card .top-number {
		font-size: 1.4rem;
	}
}

@media (max-width: 480px) {
    #serverTop > .topThird {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
    }

    #serverTop > .topThird > .one,
    #serverTop > .topThird > .two,
    #serverTop > .topThird > .third {
        order: unset;
        transform: scale(.9);
    }

    #serverTop > .topThird > .one:hover,
    #serverTop > .topThird > .two:hover,
    #serverTop > .topThird > .third:hover {
        transform: scale(.95);
    }
    .ost .ost-cards {
        gap: 5px;
    }
    .ost .ost-card .avatar {
        width: 60px;
        height: 60px;
    }
}