/*
 * SvaRoG — блоки, которых не было в зимнем шаблоне (templates/1k3xAqua/css/winter_modules.css):
 * «VIP от стримера», колонка «Telegram-чат», «Топ игроков».
 * Правила взяты из css/mystyles.css обычного шаблона, цвета заданы зимней палитрой.
 */
.tg-col, .tg-fab, .thm-top, .sv-promo {
	--th-line: rgba(125, 211, 252, .16);
	--th-line-2: rgba(125, 211, 252, .34);
	--th-gold: #facc15;
	--th-gold-2: #fde68a;
	--th-text: #d7e5f3;
	--th-text-2: #a7bbd0;
	--th-muted: #7f94a9;
	--th-head: 'Proxima Nova', 'Roboto', sans-serif;
}
/* значки в заголовках: зимняя тема рисует плитки по --wnt-c */
.sv-promo > .block_head i { --wnt-c: #9146ff; }
.tg-chat .block_head i { --wnt-c: #2aabee; }
.thm-top > .block_head i { --wnt-c: #facc15; }

.thm-top__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.thm-top__card { position: relative; border-radius: 12px; padding: 14px 14px 10px; background: rgba(11, 15, 23, .55); border: 1px solid var(--th-line); }
.thm-top__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.thm-top__srv { font-family: var(--th-head); font-weight: 800; font-size: 14px; color: #f6f8fb; }
.thm-top__all { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--th-gold-2); white-space: nowrap; }
.thm-top__all:hover { color: #fff; }
.thm-top__wrap { border: 0; border-radius: 0; overflow: visible; }
.thm-top__table { margin: 0; border: 0; }
.thm-top__table > tbody > tr[id^="sid"] { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "place nick stats" "place rank stats"; column-gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--th-line); background: rgba(255, 255, 255, .03); cursor: pointer; transition: background-color .2s, border-color .2s; }
.thm-top__table > tbody > tr[id^="sid"]:hover { background: rgba(255, 255, 255, .06); border-color: var(--th-line-2); }
.thm-top__table > tbody > tr[id^="sid"] > td { display: block; padding: 0; border: 0 !important; background: transparent !important; line-height: 1.3; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(1) { grid-area: place; width: 30px; height: 30px; border-radius: 50%; font: 800 12px/30px var(--th-head); text-align: center; color: #cdd3dd; background: #262d3c !important; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.thm-top__table > tbody > tr[id^="sid"]:nth-of-type(1) > td:nth-child(1) { background: linear-gradient(180deg, #ffd45c, #c48a08) !important; color: #2a1d02; }
.thm-top__table > tbody > tr[id^="sid"]:nth-of-type(3) > td:nth-child(1) { background: linear-gradient(180deg, #e9edf3, #9aa3b2) !important; color: #1a1f29; }
.thm-top__table > tbody > tr[id^="sid"]:nth-of-type(5) > td:nth-child(1) { background: linear-gradient(180deg, #e3a35a, #a35f1c) !important; color: #2a1a05; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(2) { grid-area: nick; font-weight: 600; font-size: 14px; color: #f3f6fa; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(2) a { color: #f3f6fa; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(2) img.small_us_av { width: 22px; height: 22px; border-radius: 50%; margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 1px var(--th-line-2); }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(3) { grid-area: stats; justify-self: end; font-family: var(--th-head); font-weight: 800; font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(3)::before { content: "\f05b"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: var(--th-gold); margin-right: 5px; font-size: 11px; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(4), .thm-top__table > tbody > tr[id^="sid"] > td:nth-child(5), .thm-top__table > tbody > tr[id^="sid"] > td:nth-child(7), .thm-top__table > tbody > tr[id^="sid"] > td:nth-child(8) { display: none; }
.thm-top__table > tbody > tr[id^="sid"] > td:nth-child(6) { grid-area: rank; font-size: 11px; color: var(--th-gold-2); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thm-top__table > tbody > tr.hidden-tr { display: block; height: 0; overflow: visible; }
.thm-top__table > tbody > tr.hidden-tr > td { display: block; height: 0 !important; padding: 0 !important; border: 0 !important; }
@media (max-width: 767.98px) {
	.thm-top__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.thm-top__card { padding: 12px 12px 8px; }
}
.tg-col { padding: 0 15px; }
.tg-col .block { margin-bottom: 30px; }
.tg-chat .block_head { display: flex; align-items: center; gap: 10px; }
.tg-chat .block_head i { --th-c: #2aabee; }
.tg-chat .block_head .tg-chat__open { margin-left: auto; width: 30px; height: 28px; padding: 0; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
.tg-chat .block_head .tg-chat__open::before { content: "\f35d"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 12px; }
.tg-chat__close { display: none; width: 30px; height: 28px; border-radius: 8px; border: 1px solid var(--th-line-2); background: rgba(255, 255, 255, .06); color: #fff; font-size: 20px; line-height: 1; }
.tg-chat__list { height: 560px; max-height: 70vh; overflow-y: auto; padding: 4px 6px 4px 0; scrollbar-width: thin; scrollbar-color: var(--th-line-2) transparent; -webkit-overflow-scrolling: touch; }
.tg-chat__empty { padding: 30px 10px; text-align: center; color: var(--th-muted); font-size: 13px; line-height: 1.6; }
.tg-chat__foot { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(180deg, #2aabee, #1b8ac4); color: #fff !important; font-weight: 700; font-size: 13px; }
.tg-chat__foot:hover { background: linear-gradient(180deg, #3cb8f5, #1f95d2); }
.tg-chat__foot i { font-size: 15px; }
.tg-msg { display: flex; gap: 10px; padding: 7px 0; }
.tg-msg--same { padding-top: 0; margin-top: -4px; }
.tg-msg__av { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 800 13px/1 var(--th-head); color: #fff; background: hsl(var(--tg-h, 200) 55% 42%); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.tg-msg--same .tg-msg__av { visibility: hidden; height: 0; }
.tg-msg__body { flex: 1 1 auto; min-width: 0; position: relative; padding: 8px 54px 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid var(--th-line); }
.tg-msg__meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.tg-msg__name { font-size: 13px; color: hsl(var(--tg-h, 200) 80% 72%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-msg__user { font-size: 11px; color: var(--th-muted); white-space: nowrap; }
.tg-msg__reply { margin: 2px 0 4px; padding: 2px 8px; border-left: 2px solid #2aabee; font-size: 12px; color: var(--th-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-msg__text { font-size: 13px; line-height: 1.45; color: var(--th-text); overflow-wrap: anywhere; }
.tg-msg__text a { color: #5fc3ff; }
.tg-msg__media { color: #ffd45c; font-weight: 600; }
.tg-msg__time { position: absolute; right: 10px; bottom: 7px; font-size: 10px; color: var(--th-muted); white-space: nowrap; }
.tg-fab { display: none; position: fixed; right: 16px; bottom: 16px; z-index: 1046; width: 56px; height: 56px; border-radius: 50%; border: 0; color: #fff; font-size: 26px; background: linear-gradient(180deg, #2aabee, #1b8ac4); box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .12); cursor: pointer; transition: transform .2s; }
.tg-fab:active { transform: scale(.94); }
.tg-fab__badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #ff4757; color: #fff; font: 800 11px/22px var(--th-head); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.tg-fab__badge[hidden] { display: none; }
body.tg-open .tg-fab { display: none; }
@media (min-width: 1400px) {
	body:has(.tg-col) .wapper .header > .container, body:has(.tg-col) .wapper .navigation > .container, body:has(.tg-col) .wapper > .content > .container, body:has(.tg-col) .wapper > .footer > .container { max-width: 1560px; }
	.wapper > .content > .container > .row:has(> .tg-col) { flex-wrap: nowrap; align-items: flex-start; }
	.wapper > .content > .container > .row:has(> .tg-col) > .tg-col { flex: 0 0 320px; max-width: 320px; order: 99; }
	.wapper > .content > .container > .row:has(> .tg-col) > .col-lg-9 { flex: 1 1 0; max-width: none; min-width: 0; }
	.wapper > .content > .container > .row:has(> .tg-col) > .col-lg-3 { flex: 0 0 300px; max-width: 300px; }
	.tg-col .block { position: sticky; top: 16px; }
}
@media (max-width: 1399.98px) {
	.tg-fab { display: flex; align-items: center; justify-content: center; }
	.tg-col { position: fixed; z-index: 1045; padding: 0; margin: 0; width: auto; max-width: none; flex: none; order: 99; transition: transform .3s ease; pointer-events: none; }
	.tg-col.is-open { pointer-events: auto; }
	.tg-col .block { margin: 0; height: 100%; display: flex; flex-direction: column; padding: 18px 18px 16px; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
	.tg-col .block::before { display: none; }
	.tg-col .block .block_head { margin-bottom: 12px; padding-bottom: 12px; }
	.tg-chat__close { display: inline-flex; align-items: center; justify-content: center; }
	.tg-chat .block_head .tg-chat__open { margin-left: auto; }
	.tg-chat__list { flex: 1 1 auto; min-height: 0; height: auto; max-height: none; }
	.tg-chat__foot { flex: 0 0 auto; }
	body.tg-open { overflow: hidden; }
	body.tg-open::after { content: ""; position: fixed; inset: 0; z-index: 1044; background: rgba(5, 8, 14, .6); backdrop-filter: blur(2px); }
}
@media (min-width: 768px) and (max-width: 1399.98px) {
	.tg-col { top: 0; right: 0; bottom: 0; width: 400px; transform: translateX(110%); }
	.tg-col.is-open { transform: none; }
	.tg-col .block { border-radius: 18px 0 0 18px; border-right: 0; }
}
@media (max-width: 767.98px) {
	.tg-col { left: 0; right: 0; bottom: 0; height: 86vh; height: 86dvh; transform: translateY(110%); }
	.tg-col.is-open { transform: none; }
	.tg-col .block { border-radius: 18px 18px 0 0; border-bottom: 0; padding: 14px 14px calc(12px + env(safe-area-inset-bottom)); }
	.tg-col .block::after { content: ""; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .25); }
	.tg-fab { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 54px; height: 54px; font-size: 24px; }
	.tg-msg__body { padding-right: 48px; }
}
.sv-promo { --sv-c: #9146ff; }
.sv-promo > .block_head i { --th-c: #9146ff; }
.sv-promo__body { display: flex; flex-direction: column; gap: 14px; }
.sv-promo__top { position: relative; padding: 14px 16px 14px 16px; border-radius: 10px; background: linear-gradient(135deg, rgba(145, 70, 255, .22), rgba(145, 70, 255, .06) 60%, rgba(245, 179, 1, .10)); border: 1px solid rgba(145, 70, 255, .35); }
.sv-promo__badge { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #10141e; background: var(--th-gold, #f5b301); }
.sv-promo__title { font-family: var(--th-head, 'Proxima Nova', sans-serif); font-size: 22px; font-weight: 800; line-height: 1.1; color: #fff; }
.sv-promo__sub { margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--th-text-2, #aab3c2); }
.sv-promo__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sv-promo__steps li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, .03); border: 1px solid var(--th-line, rgba(255, 255, 255, .09)); font-size: 13px; line-height: 1.3; color: var(--th-text, #d9dee7); }
.sv-promo__steps li i { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--sv-i, #9146ff); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.sv-promo__steps li:nth-child(1) i { --sv-i: #2aabee; }
.sv-promo__steps li:nth-child(2) i { --sv-i: #9146ff; }
.sv-promo__steps li:nth-child(3) i { --sv-i: #c98f0b; }
.sv-promo__btn, .sv-promo__btn:visited { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 9px; font-weight: 700; font-size: 15px; color: #fff !important; text-decoration: none !important; background: linear-gradient(180deg, #8a46f0, #6c2fd0); border: 1px solid rgba(0, 0, 0, .25); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); transition: background .15s ease, transform .15s ease; }
.sv-promo__btn:hover { background: linear-gradient(180deg, #9656f5, #7638db); transform: translateY(-1px); }
.sv-promo__btn:active { transform: none; }