/* ================= ELO RACE — страница гонки (стиль сайта, без лишних свечений) ================= */

/* ===== Баннер: инфо-плитки (месяц·статус + таймер) ровно в один ряд ===== */
.left_blocked .btns_blocked{display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;margin-top:6px;}
.stats_info.er_info{
	display:flex;align-items:center;gap:11px;
	padding:9px 18px 9px 9px;
	flex:1 1 auto;min-width:210px;
	white-space:nowrap;
}
/* иконка в одинаковом кружке — и кубок-картинка, и часы */
.er_info .er_info_ic,
.stats_info.er_info > i{
	width:36px;height:36px;flex:0 0 auto;box-sizing:border-box;
	display:flex;align-items:center;justify-content:center;
	border-radius:10px;background:rgb(252 191 126 / 18%);
	color:rgb(255 201 145);font-size:18px;
	padding:7px;object-fit:contain;margin:0;filter:none;
}
.er_info_body{display:flex;flex-direction:column;line-height:1.25;min-width:0;}
.er_info_lbl{font-size:10px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:rgba(250,199,144,.8);}
.er_info_val{font-size:14px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;}
@media(max-width:560px){ .stats_info.er_info{flex:1 1 100%;min-width:0;} }

/* ================= Призовой фонд — modern ================= */
.er_prizes_block{
	position:relative;
	background:
		radial-gradient(120% 200% at 0% 0%, rgba(232,145,90,.06) 0%, rgba(232,145,90,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%);
	border:1px solid rgba(255,255,255,.07);
	border-radius:16px;
	padding:16px 18px 18px;
	margin-bottom:16px;
	overflow:hidden;
}
.er_prizes_block::before{
	content:'';position:absolute;top:0;left:0;right:0;height:1px;
	background:linear-gradient(90deg, transparent 0%, rgba(232,145,90,.35) 50%, transparent 100%);
	pointer-events:none;
}

.er_prizes_head{
	font-size:14px;font-weight:700;color:#fff;margin-bottom:14px;
	display:flex;align-items:center;gap:9px;flex-wrap:wrap;letter-spacing:.2px;
}
/* Контейнер иконки-медали */
.er_prizes_ico{
	display:inline-flex;align-items:center;justify-content:center;
	width:30px;height:30px;
	filter:drop-shadow(0 3px 6px rgba(255,183,72,.35));
}
.er_prizes_ico img{
	width:100%;height:100%;
	display:block;
	object-fit:contain;
}
/* Оставляем старое правило, если где-то встретится <i> */
.er_prizes_head > i{
	display:inline-flex;align-items:center;justify-content:center;
	width:28px;height:28px;border-radius:8px;
	background:linear-gradient(135deg, rgba(232,145,90,.22), rgba(232,145,90,.08));
	color:#f0a06d;font-size:16px;
	box-shadow:inset 0 0 0 1px rgba(232,145,90,.28), 0 4px 10px rgba(232,145,90,.12);
}

.er_prizes_list{display:flex;flex-wrap:wrap;gap:10px;}

.er_prize{
	position:relative;
	display:flex;align-items:center;gap:12px;
	background:linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.015) 100%);
	border:1px solid rgba(255,255,255,.07);
	border-radius:14px;
	padding:14px 16px 14px 14px;
	min-width:200px;flex:1 1 200px;
	transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
	overflow:hidden;
}
.er_prize::after{
	content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
	background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 30%);
	opacity:.6;
}
.er_prize:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.11);}

/* Текст названия услуги — обрезаем в одну строку с многоточием,
   даём отступ справа под бейдж, чтобы не наезжал */
.er_prize_txt{
	flex:1 1 auto;min-width:0;
	padding-right:44px;
	overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
	line-height:1.25;
}

/* Бейдж с суммой приза в правом верхнем углу карточки */
.er_prize_badge{
	position:absolute;top:8px;right:8px;
	display:inline-flex;align-items:center;justify-content:center;
	padding:2px 9px;min-width:38px;
	font-size:10.5px;font-weight:800;letter-spacing:.2px;
	color:#e6e9f0;
	background:rgba(255,255,255,.06);
	border:1px solid rgba(255,255,255,.10);
	border-radius:50px;
	line-height:1.5;
	backdrop-filter:blur(3px);
	-webkit-backdrop-filter:blur(3px);
	z-index:2;
	white-space:nowrap;
}
/* Персональные оттенки бейджа под каждое место */
.er_p1 .er_prize_badge{
	color:#3a2a05;
	background:linear-gradient(160deg, #ffe9a3 0%, #f8d675 60%, #d9a233 100%);
	border-color:rgba(255,205,102,.55);
	box-shadow:0 2px 8px rgba(255,183,72,.30);
}
.er_p2 .er_prize_badge{
	color:#2b2f3a;
	background:linear-gradient(160deg, #ffffff 0%, #e0e4ec 60%, #a4acbb 100%);
	border-color:rgba(220,228,240,.55);
	box-shadow:0 2px 8px rgba(180,190,210,.25);
}
.er_p3 .er_prize_badge{
	color:#331a08;
	background:linear-gradient(160deg, #f5c19a 0%, #e2a274 60%, #a3623a 100%);
	border-color:rgba(232,145,90,.55);
	box-shadow:0 2px 8px rgba(224,138,84,.28);
}
.er_p4 .er_prize_badge{
	color:#0f1a3a;
	background:linear-gradient(160deg, #9dafdc 0%, #7f92c9 60%, #33427a 100%);
	border-color:rgba(120,140,210,.55);
	box-shadow:0 2px 8px rgba(103,125,200,.25);
}
.er_p5 .er_prize_badge{
	color:#1e0e33;
	background:linear-gradient(160deg, #a58ac9 0%, #8b70b3 60%, #4b3565 100%);
	border-color:rgba(170,130,215,.55);
	box-shadow:0 2px 8px rgba(160,120,200,.25);
}

/* Медаль-контейнер (внутри — inline SVG) */
.er_place{
	position:relative;
	width:44px;height:44px;
	display:flex;align-items:center;justify-content:center;
	flex:0 0 auto;
	background:transparent;
	border-radius:0;
	box-shadow:none;
	padding:0;
	color:inherit;
	font:inherit;
}
.er_place .er_medal_svg{
	width:100%;height:100%;display:block;
	overflow:visible;
}

/* Свечение под медалью — своё для каждого места */
.er_p1 .er_place{filter:drop-shadow(0 3px 10px rgba(255,183,72,.55));}
.er_p2 .er_place{filter:drop-shadow(0 3px 10px rgba(200,210,225,.50));}
.er_p3 .er_place{filter:drop-shadow(0 3px 10px rgba(224,138,84,.55));}
.er_p4 .er_place{filter:drop-shadow(0 3px 10px rgba(103,125,200,.50));}
.er_p5 .er_place{filter:drop-shadow(0 3px 10px rgba(160,120,200,.50));}

/* Тонировка карточек под цвет медали */
.er_p1{
	border-color:rgba(255,205,102,.28);
	background:
		radial-gradient(140% 200% at 0% 0%, rgba(255,205,102,.10) 0%, rgba(255,205,102,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
	box-shadow:0 6px 18px rgba(255,183,72,.08);
}
.er_p1 .er_prize_txt{color:#ffe6b3;}

.er_p2{
	border-color:rgba(200,210,225,.22);
	background:
		radial-gradient(140% 200% at 0% 0%, rgba(220,228,240,.08) 0%, rgba(220,228,240,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
}
.er_p2 .er_prize_txt{color:#e6ebf3;}

.er_p3{
	border-color:rgba(232,145,90,.24);
	background:
		radial-gradient(140% 200% at 0% 0%, rgba(232,145,90,.09) 0%, rgba(232,145,90,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
	box-shadow:0 6px 18px rgba(224,138,84,.06);
}
.er_p3 .er_prize_txt{color:#f2d9c5;}

.er_p4{
	border-color:rgba(120,140,210,.24);
	background:
		radial-gradient(140% 200% at 0% 0%, rgba(120,140,210,.09) 0%, rgba(120,140,210,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
}
.er_p4 .er_prize_txt{color:#d5dcee;}

.er_p5{
	border-color:rgba(170,130,215,.24);
	background:
		radial-gradient(140% 200% at 0% 0%, rgba(170,130,215,.09) 0%, rgba(170,130,215,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
}
.er_p5 .er_prize_txt{color:#e2d3ef;}

.er_prize_txt{
	position:relative;z-index:1;
	font-size:13px;color:#d7dbe4;font-weight:600;letter-spacing:.1px;
	white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.er_prize_empty{color:#858585;font-size:13px;}

@media(max-width:768px){
	.er_prize{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px);padding:9px 12px;gap:9px;}
	.er_place{width:38px;height:38px;}
	.er_prize_txt{font-size:12px;}
}
@media(max-width:420px){
	.er_prize{min-width:100%;flex-basis:100%;}
	.er_place{width:40px;height:40px;}
}

.er_toolbar{display:flex;justify-content:flex-end;margin-bottom:10px;}
.er_arch{display:flex;align-items:center;gap:8px;font-size:13px;color:#858585;}
.er_arch select{
	/* Просит браузер отрисовать нативный дропдаун в тёмной схеме (Chromium/Edge/Firefox) */
	color-scheme: dark;
	appearance:none;-webkit-appearance:none;-moz-appearance:none;
	background:transparent;
	background-repeat:no-repeat;
	color:#e8ecf5;
	border:1px solid rgba(255,255,255,.10);
	border-radius:8px;
	padding:6px 30px 6px 12px;
	font-size:13px;font-weight:600;
	cursor:pointer;
	transition:.18s border-color, .18s box-shadow;
	/* SVG-шеврон вниз */
	background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23858585' d='M0 0h10L5 6z'/></svg>");
	background-position: right 10px center;
	background-size: 10px 6px;
}
.er_arch select:hover{
	border-color:rgba(255,255,255,.16);
}
.er_arch select:focus{
	outline:none;
	border-color:rgba(232,145,90,.45);
	box-shadow:0 0 0 3px rgba(232,145,90,.12);
}
/* Стилизуем options (для случая, если кастомный дропдаун не подхватится) */
.er_arch select option{
	background:linear-gradient(222deg,#3c3c3c 0,#313131 55%) !important;
	color:#e8ecf5;
	font-weight:600;
}
.er_arch select option:checked{
	color:#fff;
}

/* ---- Кастомный дропдаун (используется вместо нативного <select>) ---- */
.er_dd_native{
	position:absolute !important;
	opacity:0 !important;
	width:0 !important;height:0 !important;
	padding:0 !important;border:0 !important;
	pointer-events:none !important;
	overflow:hidden;
}

.er_dd{position:relative;display:inline-block;}
.er_dd_btn{
	color-scheme:dark;
	background:transparent;
	color:#e8ecf5;
	border:1px solid rgba(255,255,255,.10);
	border-radius:8px;
	padding:6px 30px 6px 12px;
	font-size:13px;font-weight:600;
	cursor:pointer;
	display:inline-flex;align-items:center;gap:8px;
	position:relative;min-width:120px;
	transition:.18s border-color,.18s box-shadow;
}
.er_dd_btn:hover{border-color:rgba(255,255,255,.16);}
.er_dd.is_open .er_dd_btn,
.er_dd_btn:focus-visible{
	outline:none;
	border-color:rgba(232,145,90,.45);
	box-shadow:0 0 0 3px rgba(232,145,90,.12);
}
.er_dd_arr{
	position:absolute;right:10px;top:50%;width:10px;height:6px;margin-top:-3px;
	background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23858585' d='M0 0h10L5 6z'/></svg>") no-repeat center/10px 6px;
	transition:transform .18s ease;
}
.er_dd.is_open .er_dd_arr{transform:rotate(180deg);}

.er_dd_menu{
	position:absolute;z-index:50;top:calc(100% + 6px);right:0;min-width:100%;
	background:linear-gradient(222deg,#3c3c3c 0,#313131 55%) !important;
	border:1px solid rgba(255,255,255,.10);
	border-radius:10px;
	padding:6px;
	box-shadow:0 12px 30px rgba(0,0,0,.4);
	display:none;
	max-height:260px;overflow:auto;
	/* Ставим пункты в flex-колонку с равным зазором между собой */
	flex-direction:column;
	gap:3px;
}
.er_dd.is_open .er_dd_menu{display:flex;animation:er_dd_in .14s ease;}
@keyframes er_dd_in{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

.er_dd_item{
	padding:8px 14px;border-radius:7px;
	font-size:13px;font-weight:600;color:#e8ecf5;
	cursor:pointer;white-space:nowrap;
	transition:background .12s ease, color .12s ease;
	/* Явно отделяем каждый пункт — bg не растекается на соседей */
	background:transparent;
}
.er_dd_item:hover{background:rgba(255,255,255,.08);}
.er_dd_item.is_active{background:rgba(232,145,90,.22);color:#fff;}
.er_dd_item.is_active:hover{background:rgba(232,145,90,.30);}

/* Таблица лидеров */
.er_table{display:flex;flex-direction:column;gap:6px;}
.er_row{
	display:grid;grid-template-columns:72px 1fr 70px 90px 110px;align-items:center;
	background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);
	border-radius:12px;padding:10px 14px;transition:.15s all;
}
.er_row.er_head{
	background:transparent;border:none;padding:2px 14px;color:#858585;
	font-size:11px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;
}
.er_row:not(.er_head):hover{background:rgba(255,255,255,.05);}
/* топ-5: сброс единой оранжевой заливки + лёгкий оттенок под цвет своей медали */
.er_row.er_top{border-color:rgba(255,255,255,.07);background:rgba(255,255,255,.025);}
.er_row.er_rp1{border-color:rgba(255,205,102,.24);background:linear-gradient(90deg, rgba(255,205,102,.12) 0%, rgba(255,205,102,0) 42%);}
.er_row.er_rp2{border-color:rgba(220,228,240,.22);background:linear-gradient(90deg, rgba(220,228,240,.11) 0%, rgba(220,228,240,0) 42%);}
.er_row.er_rp3{border-color:rgba(224,138,84,.24);background:linear-gradient(90deg, rgba(224,138,84,.12) 0%, rgba(224,138,84,0) 42%);}
.er_row.er_rp4{border-color:rgba(120,140,210,.24);background:linear-gradient(90deg, rgba(120,140,210,.12) 0%, rgba(120,140,210,0) 42%);}
.er_row.er_rp5{border-color:rgba(170,130,215,.24);background:linear-gradient(90deg, rgba(170,130,215,.12) 0%, rgba(170,130,215,0) 42%);}
.er_row.er_rp1:hover{background:linear-gradient(90deg, rgba(255,205,102,.18) 0%, rgba(255,205,102,0) 46%);}
.er_row.er_rp2:hover{background:linear-gradient(90deg, rgba(220,228,240,.16) 0%, rgba(220,228,240,0) 46%);}
.er_row.er_rp3:hover{background:linear-gradient(90deg, rgba(224,138,84,.18) 0%, rgba(224,138,84,0) 46%);}
.er_row.er_rp4:hover{background:linear-gradient(90deg, rgba(120,140,210,.18) 0%, rgba(120,140,210,0) 46%);}
.er_row.er_rp5:hover{background:linear-gradient(90deg, rgba(170,130,215,.18) 0%, rgba(170,130,215,0) 46%);}
.er_row.er_me{border-color:rgba(127,209,140,.5);}
.er_c{display:flex;align-items:center;}
.er_rank{gap:6px;font-weight:800;font-size:16px;align-items:center;}
.er_rank_n{min-width:26px;display:inline-flex;justify-content:center;}

/* Медаль в колонке места (для мест 1-5) — то же SVG, что в блоке призов,
   но уменьшенный размер под высоту строки лидерборда */
.er_rank_medal{
	display:inline-flex;align-items:center;justify-content:center;
	width:34px;height:34px;
	flex:0 0 auto;
	margin:-4px 0;
}
.er_rank_medal .er_medal_svg{
	width:100%;height:100%;display:block;overflow:visible;
}
/* Персональное свечение под медалью — совпадает с блоком призов */
.er_row[data-rank="1"] .er_rank_medal{filter:drop-shadow(0 2px 6px rgba(255,183,72,.55));}
.er_row[data-rank="2"] .er_rank_medal{filter:drop-shadow(0 2px 6px rgba(200,210,225,.50));}
.er_row[data-rank="3"] .er_rank_medal{filter:drop-shadow(0 2px 6px rgba(224,138,84,.55));}
.er_row[data-rank="4"] .er_rank_medal{filter:drop-shadow(0 2px 6px rgba(103,125,200,.50));}
.er_row[data-rank="5"] .er_rank_medal{filter:drop-shadow(0 2px 6px rgba(160,120,200,.50));}
.er_row_prize{color:#e8915a;font-size:15px;display:inline-flex;}
.er_player{gap:10px;min-width:0;}
.er_ava{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:#2a2f3d;}
.er_name{color:#fff;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
a.er_name:hover{color:#e8915a;}
.er_guest{color:#c3c8d4;}
.er_guest_tag{font-size:10px;color:#858585;background:rgba(255,255,255,.06);border-radius:5px;padding:2px 6px;margin-left:2px;}
.er_games{justify-content:center;font-weight:600;}
.er_wl{justify-content:center;color:#858585;font-weight:600;gap:2px;}
.er_wl .w{color:#7fd18c;}
.er_wl .l{color:#e0796f;}
.er_score{justify-content:flex-end;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums;}
.er_score.pos{color:#7fd18c;}
.er_score.neg{color:#e0796f;}
.er_score.zero{color:#858585;}
.er_empty{text-align:center;color:#858585;padding:30px;font-size:14px;}

@media(max-width:768px){
	.er_row{grid-template-columns:36px 1fr 48px 72px;padding:10px 12px;gap:8px;align-items:center;}
	.er_row .er_games{display:none;}
	.er_head .er_games{display:none;}
	.er_row.er_head{padding:2px 12px;font-size:10.5px;letter-spacing:.4px;align-items:center;}
	.er_ava{width:30px;height:30px;}
	.er_name{font-size:13px;}
	.er_rank{font-size:14px;gap:4px;}
	.er_rank_n{min-width:20px;}
	.er_wl{font-size:12px;justify-content:center;}
	.er_score{font-size:14px;justify-content:flex-end;white-space:nowrap;line-height:1.15;}
}
@media(max-width:420px){
	.er_row{grid-template-columns:30px 1fr 44px 62px;padding:9px 10px;gap:6px;}
	.er_row.er_head{padding:2px 10px;font-size:10px;}
	.er_name{font-size:12.5px;}
	.er_ava{width:28px;height:28px;}
	.er_score{font-size:13px;}
	.er_empty{padding:20px 15px;font-size:13px;}
}