/*--- FONTS ---*/
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../font/roboto-v20-latin_cyrillic-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../font/roboto-v20-latin_cyrillic-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../font/roboto-v20-latin_cyrillic-700.woff2') format('woff2');
}

/*--- CSS CUSTOM PROPERTIES ---*/
:root {
    /* ====== BACKGROUNDS ====== */
    --bg-body: #f3f3f3;
    --bg-card: #ffffff;
    --bg-secondary: #f4f4f4;
    --bg-tertiary: #f5f5f5;
    --bg-hover: rgba(0, 0, 0, 0.04);
    
    /* ====== TEXT ====== */
    --text-main: #2b2b2b;
    --text-black: #000;
    --text-secondary: #6b6b6b;
    --text-light: #8a8a8a;
    --text-placeholder: #595959;
    --text-sm: 13px;
    
    /* ====== BORDERS ====== */
    --border-light: #e7e7e7;
    --border-medium: #ddd;
    --border-dark: #101014;
    
    /* ====== ACCENT / BRAND ====== */
    --accent: #63b814;
    --accent-hover: #5dc020;
    --accent-dark: #4aa438;
    --accent-darker: #378228;
    
    /* ====== NAV MENU ====== */
    --nav-menu-bg: #ffe487;
    --nav-menu-border: #fdda60;
    --nav-menu-text: #b1860f;
    --nav-menu-text-hover: #75580a;
    
    /* ====== LINKS ====== */
    --link-color: #0c6bb6;
    --link-hover: #1172a6;
    
    /* ====== RATINGS ====== */
    --rating-good: #36920c;
    --rating-medium: #b78322;
    --rating-poor: #ca3d19;
    
    /* ====== NAVIGATION ====== */
    --nav-btn-bg: #cecfd075;
    --nav-btn-active: #000;
    
    /* ====== TAGS ====== */
    --tag-bg: #f7f7f7;
    --tag-color: #9a9a9a;
    
    /* ====== INPUTS ====== */
    --input-bg: #f5f5f5;
    --input-border: #ededed;
    
    /* ====== MENU / DROPDOWNS ====== */
    --menu-dropdown-bg: #fff;
    
    /* ====== SHADOWS ====== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.2);
    
    /* ====== DANGER / ERROR ====== */
    --danger: #e02424;
    --danger-hover: #c81e1e;
    --danger-bg: #fef2f2;
    
    /* ====== SUCCESS ====== */
    --success: #46a819;
    --success-light: #85c207;
    
    /* ====== WARNING ====== */
    --warning-bg: #fedc80;
    --warning-border: #D2A146;
    
    /* ====== BORDER RADIUS ====== */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;
    
    /* ====== TRANSITIONS ====== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* ====== Z-INDEX SCALE ====== */
    --z-base: 1;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 9999;
    --z-max: 99999;
    
    /* ====== SPACING ====== */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 8px;
    --space-4: 12px;
    --space-5: 16px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 48px;
    
    /* ====== CAROUSEL DEFAULTS ====== */
    --carousel-visible: 5;
    --carousel-gutter: 16px;
    
    /* ====== SEMANTIC SPACING ====== */
    --section-gap: var(--space-6);
    --block-gap: var(--space-5);
    --element-gap: var(--space-3);
    --card-padding: var(--space-6);
}


/*--- SET BASE ---*/
* {background: transparent; margin: 0; padding: 0; border: 0; box-sizing: border-box;}
*::selection{background: var(--warning-bg);}

ol, ul {list-style: none;}
hr {margin: 0 15px; border-top: 1px solid var(--border-medium);}
table {border-collapse:collapse;border-spacing:0;}
input, select {vertical-align:middle;}
article, aside, footer, header, nav, section, main {display: block;}
body, select, input, textarea {font-family: Roboto, sans-serif; font-size: 14px; line-height:normal; font-weight:400; color: var(--text-main); background: var(--bg-body); letter-spacing: 0.015em;}
img {max-width:100%; max-height: 100%;}
.clearfix::after {content: ""; display: table; clear: both;}
a {color: var(--link-color); text-decoration: none;}
a:hover, a:focus {color: var(--link-hover); text-decoration: none;}

/* Доступный фокус клавиа/* Доступность (a11y) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}
:focus-visible {
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* Убираем outline при клике мышью, но оставляем для клавиатуры */
:focus:not(:focus-visible) {
    outline: none;
}
h1 {font-size:23px; font-weight: 500;}
h2 {font-size:21px; font-weight: 500;}
h3 {font-size:20px; font-weight: 500;}

.orang_rate {color: var(--rating-poor);}
.yell_rate {color: var(--rating-medium);}
.gr_rate {color: var(--rating-good);}

/*--- SET ---*/
button::-moz-focus-inner, input::-moz-focus-inner {border:0; padding:0;}
button[disabled], input[disabled] {cursor:default;}
input[type="text"], input[type="password"] {display: block; width: 100%; height: 40px; line-height: 40px; padding: 0 15px; background-color: var(--input-bg); border-radius: var(--radius-sm); font-size: 13px; border: 1px solid var(--input-border);}
input[type="text"]::placeholder, input[type="password"]::placeholder {color: var(--text-placeholder);}

.textin {margin-top: 10px;}

input:focus::placeholder {color: transparent} 

select {font-weight: 500; border: 2px solid #ebebeb; border-radius: 3px; margin-left: 4px; cursor: pointer;}

.imgbox {overflow:hidden; position:relative;}
.imgbox img {width:100%; min-height:100%; transition: transform 0.3s;}
.nowrap {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
button {transition: background-color .2s, color .2s;}
a, .button {transition: color .4s, background-color .4s, opacity .4s;}
.pm-page, .form-wrap {padding:20px 0;}

/*--- BASIC GRID ---*/
.wrap {max-width:1130px; min-width: 320px; position: relative; margin: 40px auto; margin-bottom: 0;}
.mainwrap {
    display: grid;
    grid-template-columns: 1fr 296px;
    gap: 12px;
}
.main {position: relative; min-width: 0; background-color: var(--bg-card); padding: 20px 24px; border-radius: 8px 8px 0 0; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.right-nav {position: relative; z-index: 30; display: flex; flex-direction: column; gap: 24px;}
.fmainwrap {
    display: grid;
    grid-template-columns: 215px 1fr;
    gap: 24px;
    position: relative;
    min-height: 310px;
    margin-bottom: 24px;
    align-items: start;
}
.header-main {position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; background: var(--bg-card); color: var(--text-black); padding: 0 18px; border-radius: 8px 8px 0px 0px; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.carusel-box {position: relative; background-color: var(--bg-card); margin-bottom: 24px; overflow: hidden;}
.footer {background: #1e1e1e;min-width: 320px;padding: 25px 0;border-top: 1px solid #2b2b2b;box-shadow: 2px 0px 2px 0 rgb(0, 0, 0);}
.btn-menu-wr {display: none;}

.br_stat {position: relative; display: flex; align-items: center; gap: 14px; max-width: 1130px; min-width: 320px; margin: 0px auto; background: var(--border-light); color: var(--text-light); padding: 5px 45px 5px 18px; font-size: var(--text-sm); border-radius: 0 0 3px 3px; cursor: pointer;}
.br_stat_list {display: flex; align-items: center; gap: 14px;}
.br_stat span {padding-left: 4px; color: var(--text-black); font-weight: 700; font-family: monospace; letter-spacing: -0.2px;}
.br_stat::before {position: absolute; right: 14px; top: 6px; color: var(--text-light);}
.marquee {position: relative; flex: 1; min-width: 0; height: 16px; white-space: nowrap; opacity: 1; transition: opacity 0.5s ease; overflow: hidden;}
.marquee-content {display: inline-block; padding-left: 100%; animation: marquee 45s linear 2;}
@keyframes marquee {0% { transform: translateX(0%); } 100% { transform: translateX(-100%); }}

/*--- HEADER ---*/
.logo {position: relative; max-width: 137px; height: auto; display: flex; align-items: center;}
.logo img {width: 100%; height: auto; display: block;}
.logo:hover {opacity: .8;}
.logo:active::after, .logo:focus-within::after, .logo:focus::after {content: ""; position: absolute; inset: -5px -10px; border-radius: 5px; background-color: rgba(100, 116, 149, .08); pointer-events: none;}

.menu-head {position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 20px;}
.menu-headnav {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) 0;
    color: var(--nav-menu-text);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: color var(--transition-fast), box-shadow var(--transition-fast);
}
.menu-headnav .link {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-icon-gap);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: inherit;
}
.menu-headnav .link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.menu-headnav .link::after {
    display: inline-block;
    transition: transform var(--transition-fast);
    transform-origin: 50% 50%;
}
.menu-headnav:hover {color: var(--nav-menu-text-hover);}
.menu-headnav.open {color: var(--nav-menu-text-hover);}
.menu-headnav.open .link::after {transform: rotate(180deg);}

.menu-headnav-list {display: none; background-color: var(--menu-dropdown-bg); padding: 6px 12px; font-size: 15px; position: absolute; right: auto; left: -10px; top: 48px; width: 170px; z-index: 9999; box-shadow: var(--shadow-md); border-radius: 8px; line-height: normal;}
.menu-headnav-list li {border-bottom: dashed 1px var(--border-light);}

.selyears-item {font-size: 15px; cursor: pointer;}
.selyears-item a {display: block; color: #333;}
.selyears-item .ym {padding: 8px 0; font-weight: 500;}
.selyears {position: relative; display: block; padding: 8px 0; font-weight: 500; color: #333;}
.selyears::before {position: absolute; font-weight: 900 !important; transform: rotate(-90deg); top: 10px; right: 0; color: #d2d2d2; transition: 0.2s;}
.selyears-item.open .selyears::before {transform: none;}
.selyears-content {display: none;padding: 8px 0;border-top: 1px dashed #e8e8e8;}
.years-item {display: block; padding: 5px 25px 5px 10px; background-color: transparent; -webkit-transition: background-color .3s; transition: background-color .3s; border-radius: 4px;}
.years-item:hover {background-color: rgba(0,0,0,.1);}
.link {display: flex; gap: 7px; align-items: center; font-weight: 500;}
.link::after {content: "\e906"; font-family: 'custom_ico' !important;}

.search-wrap {position: relative;}
#search_btn {display: none; font-size: 21px;}
#search_btn::before {font-weight: 700; color: #1a1a1a;}
.search_open #search_btn::before {content: "\e916"; padding: 0 3px;}
.search_open .search-wrap {opacity: 1; visibility: visible;}

#quicksearch {position: relative; width: 325px; display: flex;}
#quicksearch input {
    width: 100%; 
    height: 40px; 
    line-height: 40px; 
    padding: 0 40px 0 16px; 
    font-size: 15px; 
    background: var(--input-bg); 
    color: var(--text-main); 
    border-radius: 8px; /* Slightly softer corners */
    border: 1px solid transparent; /* Prepare for border transition */
    transition: all 0.2s ease;
}
#quicksearch input:focus {
    background: #fff; 
    border-color: var(--border-light);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Subtle lift effect */
}
.search-button {position: absolute; top: 1px; right: 1px; width: 40px; height: 40px; font-size: 17px; color: var(--text-light); cursor: pointer; border-radius: 8px; transition: color 0.2s;}
.search-button:hover {color: var(--text-black);}
.search-button::before {font-weight: 900 !important;}
.search-close-btn {display: none;}

.search-item {position: relative; padding-left: 90px;}
.search-item a {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;}
.search-img {float: left; margin-left: -90px; width: 80px; height: 80px;}
.search-img img {width: 80px; aspect-ratio: 1/1; border-radius: 4px; object-fit: cover;}
.search-body {float: right; width: 100%; margin-top: 4px;}
.search-body .name {display: block; font-size: 17px; font-weight: 500; line-height: 20px; color: var(--text-black);}
.search-line {font-size: 14px; margin-top: 8px;}
.search-line .size {color: var(--text-light);}

.miniprofile {position: relative; color: var(--text-secondary); font-size: 15px; cursor: pointer; float: none; margin: 0; z-index: 200; transition: color 0.2s;}
.miniprofile:hover {color: var(--text-main);}

.miniprofile .avatar {
    position: relative; 
    width: 32px; 
    height: 32px; 
    border-radius: 6px; 
    margin-right: 16px; 
    background-color: var(--bg-secondary);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjOTA5MDkwIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgMjF2LTJhNCA0IDAgMCAwLTQtNEg4YTQgNCAwIDAgMC00IDR2MiI+PC9wYXRoPjxjaXJjbGUgY3g9IjEyIiBjeT0iNyIgcj0iNCI+PC9jaXJjbGU+PC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    float: right;
    transition: transform 0.2s, box-shadow 0.2s;
}
.miniprofile .avatar img {
    width: 100%; 
    height: 100%; 
    border-radius: 6px; 
    object-fit: cover;
    display: block;
}
.miniprofile .avatar:hover {box-shadow: 0 0 0 2px var(--bg-tertiary);}

.miniprofile .avatar::before {
    position: absolute; 
    top: 50%; 
    right: -18px; 
    transform: translateY(-50%);
    color: var(--text-secondary); 
    font-size: 12px; 
    font-weight: 700; 
    transition: transform .25s, color 0.2s;
}
.miniprofile .avatar.active::before {transform: translateY(-50%) rotate(180deg);}
.miniprofile:hover .avatar::before {color: var(--text-main);}

.avatar:hover::after {display: none;}

.profile-box {display: none;}
.profile-box.active {display: block; animation: fadeUnfold 0.2s ease;}

@keyframes fadeUnfold {
    from {opacity: 0; transform: translateY(5px);}
    to {opacity: 1; transform: translateY(0);}
}


.profile-box .login-actions {
    display: flex; 
    justify-content: center; 
    margin-top: 4px;
    width: 100%;
}
.profile-box .btn-cn {
    width: 100%;
    background-color: var(--accent);
    color: #fff;
    border: none;
    transition: background-color 0.2s, transform 0.1s;
    border-radius: var(--radius-sm);
    padding: 10px;
    font-weight: 500;
    cursor: pointer;
}
.profile-box .btn-cn:hover {
    background-color: var(--accent-hover);
}
.profile-box .btn-cn:active {
    transform: scale(0.98);
}

.profile-box form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-wrap {
    position: relative;
    width: 100%;
}
.input-wrap input {
    padding-left: 42px !important;
    background-color: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}
.input-wrap input:focus {
    background-color: var(--bg-card);
    border-color: var(--border-medium);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.input-wrap::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 12px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--text-light);
    opacity: 0.7;
    transition: opacity 0.2s, background-color 0.2s;
    pointer-events: none;
}
.input-wrap:focus-within::before {
    opacity: 1;
    background-color: var(--text-main);
}

.input-wrap.i_user::before {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDIxdi0yYTQgNCAwIDAgMC00LTRIOGE0IDQgMCAwIDAtNCA0djIiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjciIHI9IjQiPjwvY2lyY2xlPjwvc3ZnPg==');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBhdGggZD0iTTIwIDIxdi0yYTQgNCAwIDAgMC00LTRIOGE0IDQgMCAwIDAtNCA0djIiPjwvcGF0aD48Y2lyY2xlIGN4PSIxMiIgY3k9IjciIHI9IjQiPjwvY2lyY2xlPjwvc3ZnPg==');
}
.input-wrap.i_lock::before {
    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMTEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMSIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PHBhdGggZD0iTTcgMTFWN2E1IDUgMCAwIDEgMTAgMHY0Ij48L3BhdGg+PC9zdmc+');
    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHJlY3QgeD0iMyIgeT0iMTEiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMSIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PHBhdGggZD0iTTcgMTFWN2E1IDUgMCAwIDEgMTAgMHY0Ij48L3BhdGg+PC9zdmc+');
}

.tgprofile {
    padding: 12px;
    font-weight: 700;
    font-size: 16px;
    color: var(--text-black);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
    margin-bottom: 10px;
}
.profile-box .head-addcomm {
    margin: 4px 0 0 0; 
    justify-content: center; 
    gap: 12px;
    display: flex;
}
.profile-box .head-addcomm .socbutton {
    width: 40px; 
    height: 40px; 
    font-size: 20px; 
    margin: 0;
    transition: transform 0.2s;
}
.profile-box .head-addcomm .socbutton:hover {
    transform: scale(1.1);
}

.fav_hr {width: 2px; height: 17px; background: var(--bg-secondary);}
a.favorite {position: relative; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: #000; border-radius: 50%; transition: background-color 0.2s;}
a.favorite:hover {color: #000; background-color: var(--bg-hover);}
a.favorite svg {width: 20px; height: 20px; transition: all 0.2s ease;}
a.favorite:hover svg {color: #e2000e;}
.favorite .cnt {position: absolute; top: 0px; right: 0px; min-width: 18px; height: 18px; background-color: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 3px; pointer-events: none; z-index: 2; border: 2px solid var(--bg-card);}

/* Animation for favorites counter */
@keyframes bump {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.favorite .cnt.bump {
    animation: bump 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}


.switch {position: relative; display: inline-block; width: 50px; height: 26px;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-body); border: 1px solid #ebecf1; transition: 0.4s; border-radius: 30px;}                
.slider::before {position: absolute; content: ""; background: #fff url(../images/night.svg) no-repeat 0 0; background-size: 12px; background-position: 50% 50%; height: 18px; width: 18px; left: 4px; bottom: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); border-radius: 50%; transition: transform 0.5s, background-color 0.5s;}
input:checked + .slider {background-color: #5a6076; border: 1px solid #34373f;}
input:checked + .slider::before {transform: translateX(22px); background: #fff url(../images/day.svg) no-repeat 0 0; background-size: 16px; background-position: 50% 50%;}
.slider.round {border-radius: 34px;}
.slider.round::before {border-radius: 50%;}

/*--- HEAD Menu ---*/
.nav-menu {
    --nav-item-gap: var(--space-6);
    --nav-icon-gap: var(--space-3);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--nav-item-gap);
    height: 44px;
    padding: 0 var(--space-5);
    background-color: var(--nav-menu-bg);
    border: 2px solid var(--nav-menu-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin-bottom: var(--space-4);
    white-space: nowrap;
}

.main_catmenu_two {
    display: flex;
    gap: var(--nav-item-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.main_catmenu_two::-webkit-scrollbar {
    display: none;
}

.main_catmenu_two li {
    flex-shrink: 0;
}

.main_catmenu_two a {
    display: inline-flex;
    align-items: center;
    gap: var(--nav-icon-gap);
    padding: var(--space-2) 0;
    color: var(--nav-menu-text);
    font-size: 15px;
    font-weight: 700;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color var(--transition-fast);
}
.main_catmenu_two a svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.main_catmenu_two a:hover,
.main_catmenu_two a:focus-visible {
    color: var(--nav-menu-text-hover);
}

.breadcrumbs {width: 70%; color: var(--text-light); margin-bottom: 20px; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.breadcrumbs a {color: #616161; white-space: nowrap;}
.breadcrumbs a:hover {color: #06c;}
.bread {font-size: 16px; line-height: 15px; color: #e1e1e1; padding: 0 6px;}

/*--- HEAD Carou ---*/
.head-carusel, .head-carusel2 {position: relative;}

.carouhead {position: relative; display: inline-flex; gap: 8px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.carouhead .carousp {color: var(--link-color); cursor: pointer;}
.carouhead .carousp:hover {color: #01599f;}
.carouhead .carousp.active {color: #000; cursor: default;}
.carusel-box .tab2 {display: none;}
.carou_sub {display: block; font-size: 14px; color: var(--text-light); margin: 4px 0 14px 0;}

.carusel-box.showfull {padding: 20px 24px 10px 24px; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);}

.itemtop-box {width: 140px;}
.itemtop-title {
    position: relative; 
    font-weight: 700; 
    font-size: 15px; 
    margin: 10px 0 0 0; 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 1; 
    line-clamp: 1; 
    overflow: hidden; 
    line-height: 1.35; 
    color: var(--text-main);
    transition: color 0.2s ease;
}
.itemtop-title a {color: inherit;}
.itemtop-subtitle {margin-top: 4px; color: var(--text-light); font-size: 13px;}
.itemtop-box .imgbox {
    aspect-ratio: 7/10; 
    border-radius: 6px; 
    margin-bottom: 8px;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.itemtop-box--poster .imgbox {margin-bottom: 0;}
.footer-carusel .itemtop-box--poster .imgbox {height: 186px; aspect-ratio: auto;}
.footer-carusel .itemtop-box--poster img {height: 186px; min-height: 186px; width: 100%;}
.footer-carusel .itemtop-box .imgbox img {
    display: block;
    border-radius: inherit;
}
.footer-carusel .itemtop-box .imgbox img[data-src] {
    border-radius: inherit;
}
.itemtop-box:hover .imgbox {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.itemtop-box:hover .itemtop-title {color: var(--link-color);}

.headcat {display: flex; gap: 10px;}
.headcat h1 {font-size: 21px; font-weight: 700; color: #000;}
.sub.i_catupd {display: flex ; color: var(--text-light); align-items: center;}
.sub.i_catupd::before {padding-right: 6px;}

.catsub {display: inline-block;}
.catheader {position: relative; display: flex ; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #f3f3f3; padding-bottom: 10px; margin-bottom: 20px;}
.catheader h1 {font-size: 19px; font-weight: 700; color: #000; text-transform: uppercase;}
.catheader h2 {font-size: 21px; font-weight: 700; color: #000;}
.subtitle {display: block; margin-top: 5px; font-size: 14px; color: var(--text-light);}

.flex-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 26px 14px;
}

.allcontent {display: inline-block; background-color: #fff; border: 1px solid #e0e0e0; padding: 2px 10px; font-size: 16px; line-height: 1.5; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; margin-top: 14px; cursor: pointer; border-radius: 1rem;}
.allcontent:hover {background-color: var(--bg-tertiary);}
.allcontent.active {background-color: var(--bg-tertiary); border: 1px solid #000; font-weight: 500;}
.tab_group {display: flex; flex-direction: column; gap: 40px; margin-top: 24px;}
.tab_group .custom_box.allcatgame {display: none;}
.tab_group .custom_box.allcatgame.active {display: block;}
.flex-allcontent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 26px 14px;
    margin-top: 20px;
}

.custom_block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 26px 14px;
}
.custom-navigation {display: flex ; flex-direction: column; align-items: center; gap: 6px; width: 100%; grid-column: 1 / -1;}
.ac-dotted {display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; margin-top: -13px;}
.nav-dotted {display: flex; gap: 4px; }
.nav-dotted span {display: inline-block; background-color: #cecfd075; width: 15px; height: 7px; border-radius: 2px; transition: background-color 0.2s; cursor: pointer;}
.nav-dotted span.current {background-color: #000 !important;}

.load-more-btn { padding: 10px 30px; background: #333; color: #fff; border: none; cursor: pointer; transition: background 0.3s; letter-spacing: 0.015em; border-radius: 6px;}
.load-more-btn:hover { background: #555; }

.ddprev, .ddnext {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--text-main);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: var(--shadow-sm);
}

.ddprev[data-page]:hover, .ddnext[data-page]:hover {
    background-color: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-card);
    transform: translateY(-2px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.ddprev:not([data-page]), .ddnext:not([data-page]) {
    opacity: 0.5;
    background-color: var(--bg-tertiary);
    border-color: transparent;
    color: var(--text-light);
    cursor: not-allowed;
    box-shadow: none;
}

/*--- FAV News ---*/
.short_img a[onclick*="doFavorites"],
.poster-imgbox a[onclick*="doFavorites"] {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: rgba(30, 30, 35, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Карточка игры: Нижний левый угол */
.short_img a[onclick*="doFavorites"] {
    top: auto;
    right: auto;
    bottom: 10px;
    left: 10px;
    opacity: 0;
    transform: translateY(5px);
}

/* Полная новость: Нижний правый угол */
.poster-imgbox a[onclick*="doFavorites"] {
    top: auto;
    left: auto;
    bottom: 10px;
    right: 10px;
    opacity: 1;
    transform: translateY(0);
}

.short_img:hover a[onclick*="doFavorites"] {
    opacity: 1;
    transform: translateY(0);
}

.short_img a[onclick*="doFavorites"]:hover,
.poster-imgbox a[onclick*="doFavorites"]:hover {
    background: rgba(255, 255, 255, 0.9);
    color: #e2000e;
    border-color: rgba(255, 255, 255, 1);
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.short_img a[onclick*="doFavorites"]:active,
.poster-imgbox a[onclick*="doFavorites"]:active {
    transform: scale(0.92);
}

.short_img a[onclick*="doFavorites"] svg,
.poster-imgbox a[onclick*="doFavorites"] svg {
    width: 20px;
    height: 20px;
    transition: all 0.3s ease;
}

.short_img a[onclick*="doFavorites"]:hover svg,
.poster-imgbox a[onclick*="doFavorites"]:hover svg {
    fill: currentColor;
}

/*--- SHORT News ---*/
.short_item {position: relative; cursor: pointer; height: auto;}
.short_img {position: relative; display: block; height: auto;}
.short_img img {
    width: 100%; 
    aspect-ratio: 7/10; 
    border-radius: 6px; 
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.short_img {font-size: 0;}
.short_item:hover .short_img img {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}
.short_title {
    overflow: hidden;
    margin-top: 10px; 
    font-size: 15px; 
    font-weight: 700;
    margin-bottom: 0; 
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-height: 1.35;
    color: var(--text-main);
    transition: color 0.2s ease;
}
.short_item:hover .short_title {color: var(--link-color);}
.side-body .name {font-weight: 500; font-size: 14px; margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text-primary);}
.short_title a {color: inherit;} 
.shor_subtitle {position: relative;}
.short_line {display: flex ; justify-content: space-between; margin-top: 7px; height: 17px;}
.short_line .downloads {display: flex; align-items: center; font-weight: 500; color: var(--text-light); font-size: 13px;}
.short_line .downloads::before {padding-right: 4px;}
.status_line {display: flex; align-items: center; gap: 5px;}

.search_res {position: relative; display: flex; gap: 16px; width: 100%; padding: 10px 10px; border-radius: 10px; cursor: pointer;}
.search_res:hover .i_square-up {opacity: 1;}
.search_res .i_square-up {display: inherit; position: absolute; right: 14px; bottom: 14px; color: #0000004f; font-size: 22px; transition: .3s; opacity: .3;}
.flex-content .search_res:nth-child(2n) {background-color: var(--bg-tertiary);}

/* При наличии карточек поиска — одна колонка */
.flex-content:has(.search-page) {
    grid-template-columns: 1fr;
    gap: 0;
}

/* При наличии карточек обновлений — одна колонка */
.custom_block:has(.short_upd) {
    grid-template-columns: 1fr;
    gap: 0;
}
.search_res_img {position: relative; overflow: hidden; flex-shrink: 0; border-radius: 5px;}
.search_res_img img {width: 102px; aspect-ratio: 102/132; border-radius: 5px; object-fit: cover; transition: transform 0.3s ease, filter 0.15s ease-in-out;}
.search_res_img:hover img {filter: brightness(0.9);}
.search_res:hover .search_res_img img {transform: scale(1.03);}
.search_res_info {display: flex; flex-direction: column; gap: 10px; margin-top: 10px;}
.search_res_title {color: #000; font-size: 19px; margin: 0; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; transition: color 0.2s ease;}
.search_res_title:hover, .search_res:hover .search_res_title {color: #d00;}
.search_res_sub {color: var(--text-light); font-weight: 500;}

/* Рейтинг в поиске */
.shor_rt {position: relative; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; color: var(--text-black);}
.shor_rt .strate[class*="rating_"] {background-color: transparent !important;}
svg.rt-icon {height: 15px; width: 15px;}

.short_upd {position: relative; display: flex; gap: 16px; width: 100%; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eaeaea; cursor: pointer;}
.shortupd_imgs {position: relative; display: contents; overflow: hidden;}
.shortupd_imgs img {width: 102px; aspect-ratio: 102/132; border-radius: 5px; object-fit: cover;}
.shortupd_imgs:hover img {filter: brightness(0.9);transition: .15s ease-in-out;}

.shortupd_body {display: flex; flex-direction: column; gap: 10px;}
.shortupd_body .name {color: #000; font-size: 19px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.shortupd_body .name:hover {color: #d00;}

.side-updinfo {display: flex; flex-direction: column; gap: 10px; color: #2b2b2b; margin-top: 6px;}
.updico {color: #000; font-size: 11px; font-weight: 700; background: #fedc80; padding: 3px 5px; margin-right: 4px; border-radius: 4px;}
.updico::before {padding-right: 2px;}
.short_upd .i_square-up {display: inherit; position: absolute; right: 14px; bottom: 14px; color: #0000004f; font-size: 22px; transition: .3s; opacity: .3;}
.short_upd:hover .i_square-up {opacity: 1;}

/*--- FULL News ---*/
.f_downloads {position: absolute; right: 24px; top: 20px; display: flex; align-items: center; gap: 5px; color: var(--text-light); font-size: 1.06em; z-index: 1; cursor: default;}

.favinfo {position: relative; margin-top: 18px; color: var(--text-light); font-size: 13px;}
.poster-imgbox {position: relative; width: 215px; aspect-ratio: 215/310; overflow: hidden;}
.poster-imgbox .imgbox {width: 100%; height: 100%; border-radius: 6px; box-shadow: 0 1px 2px #bbb;}

.i_edit {position: absolute; right: 14px; top: 15px; transition: 0.2s; color: #fff; opacity: 0; font-size: 20px; z-index: 1;}
.i_edit::before {color: #fff;}
.short_item:hover .i_edit, .poster-imgbox:hover .i_edit, .imgbox:hover .i_edit {opacity: 1;}
.stick_ru {position: absolute; left: 4px; bottom: 4px; width: 56px; border-radius: 3px; font-weight: 700; fill: #fff; font-size: 44px; text-anchor: middle; text-transform: uppercase; border: 1px solid #00000030;}

.status_img {position: absolute; top: 10px; left: 8px; display: flex; flex-direction: column; gap: 1px;}
.status_news {position: relative; display: flex; gap: 3px; background: var(--bg-tertiary); color: var(--text-light); text-transform: uppercase; font-weight: 500; font-size: 11px; cursor: default; align-items: center; padding: 0 6px; height: 17px; border-radius: 4px;}
.status_img .i_upd {position: relative; color: #ffffff94; border-radius: 20px; font-size: 22px; cursor: default;}
.short_size {position: absolute; top: 10px; right: 8px; width: auto; height: 20px; display: none; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 4px; font-size: 0.72rem; font-weight: 500; padding: 0 4px;}

[status_info]:hover::after {content: attr(status_info); position: absolute; top: 20px; left: 4px; z-index: 100; background-color: #f2f2f2; color: #343434; font-size: 11px; font-weight: 400; padding: 2px 6px; border-radius: 2px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); white-space: nowrap; line-height: normal; text-transform: none;}

.status_img2 {position: absolute; bottom: 6px; right: 0; display: flex; flex-direction: column; gap: 5px; font-weight: 500;}
.short_year {width: 36px; height: 20px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 4px 0 0 4px; font-size: 0.72rem;}
.img_rating {width: 36px; height: 20px; display: flex; justify-content: center; align-items: center; border-radius: 4px 0 0 4px; background-color: #999999; color: #fff; font-size: 13px;}

.short_item:hover .short_size {display: flex;}

.i_steam {position: relative; color: #ffffff94; font-size: 22px;}
.i_steam:hover {color: #000;}

.game_details {position: relative; min-width: 0;}
.hname {margin-bottom: 16px;}
.hname h1 {font-size: 24px; font-weight: 700; color: var(--text-black); letter-spacing: 0.4px;}
.subhnamever {margin-top: 8px; font-weight: 500; color: #d93025; font-size: 1.08em;}

.subver_info {position: relative; display: flex; gap: 5px; font-weight: 500; margin-top: 8px;}
.subver {background: var(--bg-tertiary); -webkit-font-smoothing: antialiased; color: var(--text-light); font-size: 1.02em; border-radius: 4px; padding: 4px 8px; cursor: default;}

.ul-details {line-height: 28px; font-size: 1.02em;}
.ul-details li {font-size: 1.1em;}
.ul-details li > span:first-child {font-weight: 500; padding-right: 2px;}
.ulgenre {line-height: 20px; padding: 5px 0;}
.ulgenre a, .dateym a {color: var(--link-color); border-bottom: 1px dotted; font-size: 0.95em;}
.ulgenre a:hover, .dateym a:hover {color: #174ea6;}
span.dateym {padding-right: 2px; color: var(--text-light); cursor: default;}

.ratingbox {position: relative; display: flex; align-items: center; gap: 5px; margin-top: 16px; overflow: hidden;}
.ratelabel {display: flex; align-items: center; justify-content: center; background: #d3d3d3; font-size: 16px; font-weight: 500; width: 36px; height: 22px; color: #fff; border-radius: 4px;}
.rate-stars, .unit-rating {width: 109px; height: 22px; overflow: hidden; cursor: pointer;}
.unit-rating, .unit-rating span:hover, .unit-rating span.current-rating {position: relative; background-image: url('../images/white-rating.svg'); -webkit-background-size: 22px auto; background-size: 22px auto;}
.unit-rating {position: relative; background-position: 0px 0;}
.unit-rating span {display: block; width: 22px; height: 22px; z-index: 17; position: absolute;}
.unit-rating span:hover {background-position: 0 -22px; z-index: 2; left: 0 !important;}
.unit-rating span.r1-unit {left: 0;}
.unit-rating span.r1-unit:hover {width: 22px;}
.unit-rating span.r2-unit {left: 22px;}
.unit-rating span.r2-unit:hover {width: 44px;}
.unit-rating span.r3-unit {left: 44px;}
.unit-rating span.r3-unit:hover {width: 66px;}
.unit-rating span.r4-unit {left: 66px;}
.unit-rating span.r4-unit:hover {width: 88px;}
.unit-rating span.r5-unit {left: 88px;}
.unit-rating span.r5-unit:hover {width: 109px;}
.unit-rating span.current-rating {background-position: 0 -44px; position: absolute; height: 22px; display: block; z-index: 1;}

.rating_low {background-color: #ee2c28 !important;}
.rating_medium {background-color: #f5c518 !important;}
.rating_high {background-color: #82c315 !important;}
.rating_excellent {background-color: #46a819 !important;}

.persize_bottom {font-size: 19px; font-weight: 700;}

/* header lan_game */
.net_header {display: inline-flex; align-items: center; background: #fedc80; gap: 4px; padding: 5px 8px; color: #634a06; font-size: 14px; font-weight: 500; border-radius: 3px;}
a.net_header:hover, a.net_header:focus {color: #000;}

/* ===== NETWORK GAME BLOCK (rel_network) ===== */
.rel_network {
    position: relative;
    display: flex;
    gap: 16px;
    margin: 24px 0;
    padding: 10px;
    background-color: var(--bg-tertiary);
    border-radius: 10px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    isolation: isolate;
    box-sizing: border-box;
}

.title-list + .rel_network {
    margin-top: 0;
}

/* Link overlay - covers entire block */
.shortnet-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
}

/* Image container */
.shortnet-img {
    flex-shrink: 0;
    width: 80px;
    height: 97px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
}

.shortnet-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
}

/* Body container */
.shortnet-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}



/* Title - matches .showtitle style */
.shortnet-name {font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--text-black);}
.rel_network.highlighted .shortnet-name {color: #d00;}

/* Meta info (size) - matches .dist_size style */
.shortnet-size {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
}

.shortnet-version {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #686868;
}

.shortnet-version--empty {
    color: var(--text-light);
    font-weight: 500;
}

/* Badge */
.shortnet-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    background: transparent;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    padding: 0;
    width: fit-content;
    transition: all 0.2s ease;
    cursor: pointer;
    opacity: 0.85;
}

.shortnet-badge:hover {
    color: var(--link-color);
    opacity: 1;
}

/* External link icon */
.rel_network .i_square-up {
    display: inherit;
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: #0000004f;
    font-size: 22px;
    transition: .3s;
    opacity: .3;
    transform: rotate(90deg);
}

.rel_network:hover .i_square-up {
    opacity: 1;
}

.rel_network.highlighted .i_square-up {
    opacity: 1;
}

.game_desc {position: relative; margin: 10px 0 24px 0; color: #212529; line-height: 1.6; font-size: 1.125em;}
.game_desc p {padding-bottom: 22px;}
.game_desc p:last-child {padding-bottom: 0;}
.game_desc strong {color: #F96B4A;}
.game_desc a {color: #1155cc;}
.game_desc a:hover {color: #013a84;}
.game_desc h3 {font-size: 1rem; font-weight: 500; padding-bottom: 4px;} /* head spoiler */
.game_desc ul {padding-bottom: 22px;}
.game_desc ul li {list-style: square; margin-left: 24px;}
.game_desc ol li {list-style: decimal; margin-left: 24px;}
.game_desc.expand {margin-bottom: 30px;}
.expand {height: auto !important;}

.scrhead {padding: 12px 0px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.scrblock {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}
.scrblock-hide {position: relative; text-align: center; overflow: hidden; height: 0px;}
.open-scr {position: absolute; bottom: -14px; right: 4px; font-size: 12px; color: var(--text-light); cursor: pointer; background: #f9f9f9; border: 1px solid #e8eced; padding: 0 4px;}
.open-scr::before {float: right; line-height: 14px !important; padding-left: 3px;}
.scrblock img {width: 100%; height: auto; border-radius: 1.5px; cursor: zoom-in;}
.scrblock .expand {height: auto; grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px;}

/* Видео Steam */
.videohead {margin: 24px 0 16px 0; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}

.video_steam {position: relative; display: grid; grid-auto-flow: column; gap: 4px; margin-bottom: 4px; overflow: hidden;}
.moviesteam {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;}
.moviesteam video, .moviesteam iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-width: 0; outline-width: 0; cursor: pointer;}

.play_video {position: absolute; display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; top: calc(50% - 25px); right: calc(50% - 25px); color: #fff; background-color: #0006; border: 1px solid #aaa3; opacity: 0.75; transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; border-radius: 50%; cursor: pointer;}
.play_video.hidden {opacity: 0; visibility: hidden; transform: scale(0.9);}
.play_video::before {font-size: 20px; transition: transform 0.16s ease-in-out;}
.play_video:hover {background-color: #000000ab; transform: scale(1.1); opacity: 1;}

.autoplay_switch {position: absolute; display: flex; align-items: center; gap: 6px; left: 4px; bottom: 4px; z-index: 5; background: #000000b3; padding: 4px 8px; border-radius: 20px; opacity: 0.7; transition: opacity 0.3s; cursor: pointer;}
.video_steam:hover .autoplay_switch {opacity: 1;}
.autoplay_switch.hidden, .video_steam:hover .autoplay_switch.hidden {opacity: 0; visibility: hidden; pointer-events: none;}
.autoplay_switch__label {color: #fff; font-size: 11px; font-weight: 500; white-space: nowrap; user-select: none;}
.autoplay_switch__toggle {position: relative; width: 34px; height: 18px; background: #ffffff40; border: none; border-radius: 9px; cursor: pointer; transition: background 0.2s ease; flex-shrink: 0; padding: 0;}
.autoplay_switch__knob {position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; pointer-events: none;}
.autoplay_switch.active .autoplay_switch__toggle {background: #4ade80;}
.autoplay_switch.active .autoplay_switch__knob {transform: translateX(16px);}
@media (hover: none) {.autoplay_switch {opacity: 0.85;}}

.video_steam.play {display: block;}

.video_steam button.switch_video {display: none;}
.video_steam.play button.switch_video {display: block;}

button.switch_video {position: absolute; width: 45px; height: 50%; top: 25%; background: #00000038; color: #fff; font-size: 27px; cursor: pointer;}
button.switch_video.two {right: 0; border-radius: 12px 0 0 12px;}
button.switch_video.one {left: 0; border-radius: 0 12px 12px 0;}
button.switch_video.one.i_chevron::before {display: block; transform: rotate(180deg);}
.moviesteam .i_chevron::before {opacity: 0.7;}
.moviesteam .i_chevron:hover::before {opacity: 1;}

.quality_toggle {display: none; position: absolute; top: 12px; right: 12px; z-index: 10; align-items: center; justify-content: center; background: #000000b3; color: #fff; font-size: 12px; font-weight: 600; padding: 4px 8px; border-radius: 4px; cursor: pointer; transition: background 0.2s; min-width: 36px;}
.quality_toggle:hover {background: #000000e6;}
.video_steam.play .quality_toggle {display: flex;}

.quality_toast {position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 20; background: #000000cc; color: #fff; font-size: 13px; padding: 8px 16px; border-radius: 6px; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; white-space: nowrap;}
.quality_toast.show {opacity: 1; visibility: visible;}

.video_error {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; align-items: center; justify-content: center; background: #1a1a1a; color: #888; font-size: 15px; font-weight: 500; z-index: 15;}
.video_error.show {display: flex;}

/* Видео Steam */

.imglogo {position: relative; margin: 34px 0; text-align: center;}
.imglogo img {width: 320px; max-height: 180px;}
#logo {scroll-margin-top: 450px;}

lite-youtube {background-color: #000; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; width: 100%;}
lite-youtube::before {content: ''; display: block; position: absolute; top: 0; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==); background-position: top; background-repeat: repeat-x; height: 60px; padding-bottom: 50px; width: 100%; transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1);}
lite-youtube::after {content: ""; display: block; padding-bottom: calc(100% / (16 / 9));}
lite-youtube > .lty-playbtn {display: block; width: 68px; height: 48px; position: absolute; cursor: pointer; transform: translate3d(-50%, -50%, 0); top: 50%; left: 50%; z-index: 1; background-color: transparent; background-image: url('../images/youtube-play.svg'); filter: grayscale(100%); transition: filter .1s cubic-bezier(0, 0, 0.2, 1); border: none;}
lite-youtube:hover > .lty-playbtn, lite-youtube .lty-playbtn:focus {filter: none;}
lite-youtube.lyt-activated {cursor: unset;}
lite-youtube.lyt-activated::before, lite-youtube.lyt-activated > .lty-playbtn {opacity: 0; pointer-events: none;}
.lyt-visually-hidden {clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}

.tech_details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 48px;
    margin: 32px 0;
}
.tech_details .infotech {padding-bottom: 5px; margin-bottom: 8px; margin-top: 0; border-bottom: 2px solid #f1f3f4; font-size: 17px; font-weight: 700;}
.tech_details .tech_details-block ul {font-size: 15px; line-height: 1.5;}
.tech_details .tech_details-block ul span:first-child {font-weight: 500;}
.rus {display: inline-block; width: 16px; height: 11px; margin-right: 4px; background: linear-gradient( 180deg ,#ececec 33%,#004aac 0,#004aac 66%,#eb3935 0); border-radius: 2px;}

.info-basic {padding: 14px 0 6px;}
.info_rd {font-size: 16px; font-weight: 500; margin-bottom: 14px;}
.info-basictor {display: inline-block; padding: 10px 18px; background: #fbfbfb; font-size: 1.125em; border: 1px solid var(--border-light);     border-left: 3px solid rgb(176, 176, 176); border-radius: 6px;}
.info_type {display: inline-block;padding: 0 0 0 15px;margin: 0 0 0 15px;border-left: 1px solid #b1b1b1;}

.not-actual {margin-top: 17px; font-weight: 500; font-size: 0.96em;}
.not-actual .ac_ver {color: #d93025;}
.not-actual .ac_text {color: var(--text-light); -webkit-font-smoothing: antialiased; text-decoration: underline;}
.not-actual .ac_text:hover {color: #3154b2;}

.downl_game {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0 18px 0;
}
.block_down {position: relative;}
.itemdown_games {position: relative; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #71c63d; color: #fff; font-size: 1.4em; font-weight: 500; -webkit-font-smoothing: antialiased; letter-spacing: .5px; height: 48px; line-height: 48px; transition: transform .1s ease-out, color .15s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation;}
.itemdown_games::after {content: ""; position: absolute; bottom: 0px; right: 0; width: 32px; height: 28px; background: url('../images/download-decor.png'); opacity: .15; background-size: contain;}
.itemdown_games:hover, .itemdown_games:focus {background: #66bf32; color: #fff;}
.itemdown_games:active {color: #fff; transform: scale(0.98); transition: none;}

[class^="itemdown_nottorent"] {position: relative; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #394558; color: #fff; font-size: 1.22em; font-weight: 500; -webkit-font-smoothing: antialiased; letter-spacing: .2px; height: 48px; line-height: 48px; transition: transform .1s ease-out, color .15s linear; -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: manipulation;}
[class^="itemdown_nottorent"]:hover, [class^="itemdown_nottorent"]:focus {background-color: #2b3545; color: #fff;}
[class^="itemdown_nottorent"]:active {color: #fff; transform: scale(0.98); transition: none;}
.nottorent_sub {color: var(--text-light); margin-top: 10px;}

.itemtop_games {position: relative; display: flex; align-items: center; justify-content: center; width: 270px; margin: 12px auto; background: #71c63d; color: #fff; font-size: 1.4em; font-weight: 500; padding: 10px 20px; border-radius: 6px; transition: background .2s ease, transform .2s ease, -webkit-transform .2s ease;}
.itemtop_games:hover, .itemtop_games:focus {background: #5dc020; color: #fff; transform: scale(1.004); transition: background .2s ease,transform .2s ease,-webkit-transform .2s ease;}
.reldist {margin-top: 10px;}
.reldist a {border-bottom: 1px dashed var(--border-light); color: #000; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.4px;}
.reldist a:hover {color: #3154b2; border-color: var(--text-light);}

.notice_main {position: relative; margin: 24px 0; background: #f7f7f7; color: #000; line-height: 1.3; font-size: 1.125em; border-radius: 6px; padding: 12px 14px;}
.notice_main a:hover, .opencast a:hover, .tech_details-block a:hover {color: #000;}
.notice_head {position: absolute; left: 14px; top: 12px; font-size: 13px; color: var(--text-light); letter-spacing: 0.8px; text-transform: uppercase;}
.notice_text {margin-top: 17px;}

.notice_text a::before {
    content: "\e92f";
    position: relative;
    font-family: 'custom_ico' !important;
    font-weight: 400;
    padding-right: 2px;
}

.notice_text .flag-ru {
    display: inline;
    position: relative;
    padding-left: 22px;
    vertical-align: baseline;
}

.notice_text .flag-ru::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 13px;
    border-radius: 3px;
    background: linear-gradient(to bottom, #fff 0, #fff 33.333%, #113b9a 33.333%, #113b9a 66.666%, #ee1e34 66.666%, #ee1e34 100%);
    box-shadow: inset 0 0 0 1px #000;
}

.i_spoiler {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--bg-secondary);
    border: 1px solid #00000008;
    padding: 8px 14px;
    font-weight: 500;
    margin-top: 8px;
    cursor: pointer;
    color: var(--text-main);
    border-radius: 3px;
    border-left: 3px solid rgb(61 61 61);
    transition: all 0.2s ease;
}

.i_spoiler:hover {
    background: var(--bg-tertiary);
    color: var(--text-black);
}

.spoiler > summary {
    list-style: none;
}
.spoiler > summary::-webkit-details-marker {
    display: none;
}

/* Icon for the spoiler (plus/minus) */
.i_spoiler::before {
    content: "\e928"; /* Plus */
    font-family: 'custom_ico' !important;
    font-size: 14px;
    transition: color 0.2s ease;
    padding-right: 10px; /* Space between icon and text */
}

/* Remove ::after */
.i_spoiler::after {
    content: none;
}

.spoiler[open] .i_spoiler {
    background: var(--bg-tertiary);
}

.spoiler[open] .i_spoiler::before {
    content: "\e926"; /* Minus */
    color: var(--text-black);
}
.tquote {position: relative; margin-top: 18px; font-weight: 500; font-size: 1.04em;}
.tquote::before {position: absolute; top: 0; left: -12px; color: #e2000e; content: "*"; font-weight: 700; font-size: 18px;}
.notice_main::before {position: absolute; top: 10px; left: -12px; color: #e2000e; content: "*"; font-weight: 700; font-size: 18px;}
.quoteinf {position: relative; font-weight: normal; font-size: 12px; color: var(--text-light); cursor: pointer; border-bottom: 1px dashed #b3b3b3;}
.quoteinf:hover {color: #000;}
.quoteinf.i_quest::before {position: absolute; right: -15px; top: 2px;}
.eventrow {position: relative; color: #131313; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}

/* ===== VT BADGE ===== */
.vt-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
    line-height: normal;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    width: fit-content;
    --shimmer-base: var(--text-secondary);
    --shimmer-highlight: rgba(255, 255, 255, 0.8);
}

.vt-badge__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.vt-badge__text {
    white-space: nowrap;
}

.vt-badge__status {
    transition: opacity 0.15s ease;
}

.vt-badge__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 14px;
    margin-left: 6px;
    border: none;
    border-radius: 99px;
    background: none;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.vt-badge__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--text-main);
    opacity: 0.08;
    transition: opacity 0.2s ease;
}

.vt-badge__btn:hover::before {
    opacity: 0.15;
}

.vt-badge__btn--details {
    color: inherit;
}
.vt-badge__btn--details::before {
    background: currentColor;
    opacity: 0.1;
}
.vt-badge__btn--details:hover::before {
    opacity: 0.18;
}

.vt-badge__link {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.vt-badge__link:hover {
    border-color: currentColor;
}

/* Status Variations */
.vt-badge--unchecked {
    background: var(--bg-tertiary);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.vt-badge--pending {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}
.vt-badge--pending .vt-badge__icon {
    color: var(--text-light);
    animation: vt-pulse 1.5s ease-in-out infinite;
}

/* Scanning state — shimmer on status text */
.vt-badge--scanning {
    background: var(--bg-secondary);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}
.vt-badge--scanning .vt-badge__icon {
    color: var(--text-light);
    animation: vt-pulse 1.5s ease-in-out infinite;
}
.vt-badge--scanning .vt-badge__status {
    background: linear-gradient(110deg, var(--shimmer-base) 40%, var(--shimmer-highlight) 50%, var(--shimmer-base) 60%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: vt-shimmer 3s linear infinite;
}

.vt-badge--clean {
    background: rgba(70, 168, 25, 0.08);
    border-color: rgba(70, 168, 25, 0.2);
    color: var(--rating-good);
}
.vt-badge--clean .vt-badge__icon {
    color: var(--rating-good);
}

.vt-badge--threat {
    background: rgba(224, 36, 36, 0.08);
    border-color: rgba(224, 36, 36, 0.2);
    color: var(--rating-poor);
}
.vt-badge--threat .vt-badge__icon {
    color: var(--rating-poor);
}

.vt-badge--unknown {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.2);
    color: var(--rating-medium);
}
.vt-badge--unknown .vt-badge__icon {
    color: var(--rating-medium);
}

.vt-badge--error {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.2);
    color: #f97316;
}

/* Dropdown Card */
.vt-badge__card {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    min-width: 280px;
    padding: 16px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.06);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.vt-badge__card--open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.vt-badge__card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.vt-badge__card-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    font-size: 20px;
    line-height: 24px;
}
.vt-badge__card-icon--clean { color: var(--rating-good); }
.vt-badge__card-icon--threat { color: var(--rating-poor); }

.vt-badge__card-title {
    font-size: 15px;
    font-weight: 700;
}

.vt-badge__card-stat,
.vt-badge__card-date {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-secondary);
    margin-bottom: 3px;
}

.vt-badge__card-stat b {
    color: var(--text-main);
    font-weight: 600;
}

.vt-badge__card-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: opacity 0.2s;
    cursor: pointer;
}
.vt-badge__card-link:hover { opacity: 0.8; }

@keyframes vt-pulse {
    0% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.05); }
    100% { opacity: 0.6; transform: scale(0.95); }
}

@keyframes vt-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@media screen and (max-width: 480px) {
    .vt-badge {
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }
    .vt-badge__card {
        left: 0;
        right: 0;
        min-width: 0;
        width: 100%;
    }
}

.tupd {border-top: 2px solid #f1f3f4; margin-top: 18px; padding-top: 12px; position: relative; color: #131313; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;}
.tupd::before {position: absolute; top: 12px; left: -12px; color: #e2000e; content: "*"; font-weight: 700; font-size: 16px;}

.tracker_notice {position: relative; font-size: 15px; font-weight: 500;}
.box-steamrating {position: relative; font-size: 1.08em; margin-top: 12px; cursor: default;}
.stser {font-weight: 500;}

.tupd .tupd-link {position: relative; color: inherit; text-decoration: none; transition: color 0.2s; cursor: pointer;}
.tupd:hover .tupd-link {color: var(--link-color);}
.tupd .tupd-link::after {
    content: "\e922";
    font-family: 'custom_ico' !important;
    font-weight: normal;
    font-style: normal;
    margin-left: 6px;
    color: var(--text-light);
    transition: color 0.4s;
    vertical-align: text-top;
    display: inline-block;
}
.tupd:hover .tupd-link::after {color: var(--link-color);}

/* ===== ACTIVATION BLOCK ===== */
.act-block {
    background-color: var(--bg-card);
    border: 2px solid rgba(127,127,127,0.12);
    border-radius: var(--radius-md);
    padding: 24px;
    margin: 24px 0;
    box-shadow: var(--shadow-sm);
}
.act-head {margin-bottom: 24px;}
.act-title {font-size: 18px; font-weight: 700; color: var(--text-black); margin-bottom: 4px;}
.act-title-license {color: #e1000e;}
.act-desc {color: var(--text-secondary); font-size: 16px; line-height: 1.6; letter-spacing: 0.4px;}
.act-body {margin-bottom: 24px;}
.act-subtitle {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.act-subtitle::after {content: ""; flex: 1; border-bottom: 2px solid rgba(127,127,127,0.12);}
.act-list {display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 24px; list-style: none; padding: 0; margin: 0;}
.act-li-title {font-weight: 700; color: var(--text-main); font-size: 16px; margin-bottom: 4px; letter-spacing: 0.4px;}
.act-li-desc {color: var(--text-main); font-size: 15px; line-height: 1.5;}
.act-info {
    position: relative;
    background: rgba(51,148,230,0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(51,148,230,0.25);
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 10px;
    box-shadow: 0 4px 16px rgba(51,148,230,0.1);
}
.act-info-title {
    font-weight: 700;
    color: #1976d2;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.act-info-title::before {content: "🛡"; font-size: 16px; line-height: 1;}
.act-info-text {color: var(--text-main); font-size: 14px; line-height: 1.5;}
.act-info-text .ps-link-out {cursor: pointer; color: var(--link-color); text-decoration: none; border-bottom: 1px solid rgba(51,148,230,0.3); transition: border-color 0.2s;}
.act-info-text .ps-link-out:hover {border-color: var(--link-color);}
.act-desc .ps-link-out {cursor: pointer; color: #0c6bb6; font-weight: 700; text-decoration: none; border-bottom: 2px dashed var(--link-color); transition: border-color 0.2s;}
.act-action {display: flex; justify-content: center; margin-top: 24px;}
.act-btn {
    cursor: pointer;
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 18px 32px;
    background: rgba(99,184,20,0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(99,184,20,0.25);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.act-btn:hover {background: rgba(99,184,20,0.95); border-color: rgba(255,255,255,0.6); box-shadow: 0 12px 32px 0 rgba(99,184,20,0.4); transform: translateY(-1px);}
.act-btn:active {transform: translateY(1px); box-shadow: 0 4px 16px 0 rgba(99,184,20,0.15);}

/* Activation Toggle */
.act-head {position: relative; cursor: pointer; padding-right: 32px;}
.act-toggle {
    position: absolute; top: 4px; right: 0;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
}
.act-toggle::before {
    content: "\e928";
    font-family: 'custom_ico' !important;
    font-size: 14px; color: var(--text-secondary);
    transform: rotate(90deg);
    opacity: 0.25;
    transition: opacity 0.2s ease;
}
.act-head:hover .act-toggle::before {opacity: 1;}
.act-collapsed .act-toggle::before {transform: rotate(0deg);}
.act-collapsed {padding: 20px;}
.act-collapsed .act-head {margin-bottom: 0;}
.act-collapsed .act-body,
.act-collapsed .act-info {display: none;}

[data-ajax="steam_updinfo"] {display: inline-block; font-size: 13px; color: var(--text-light); transition: 0.4s;}
[data-ajax="steam_updinfo"]:hover {color: #000;}
[data-ajax="steam_updinfo"] .updinfo_button {position: relative; border-bottom: 1px dashed #b3b3b3; cursor: pointer;}
[data-ajax="steam_updinfo"] .updinfo_button:before {position: absolute; right: -15px; top: 2px;}
#steam_url {margin-top: 12px;}
#steam_url a:hover {color: #2011e6;}
.steam_url_head {font-weight: 500;}
.publ_updcomm {margin-top: 12px;}
.acver_dist {font-weight: 700;}

#gog, #otherlink { display: flex; flex-direction: column; gap: 24px; }
.althead {display: inline-block; font-weight: 700; font-size: 17px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 2px solid #000; text-transform: uppercase;}
.althead_short {margin-top: 8px; margin-left: 8px;}
.althead_name { display: block; font-size: 22px; font-weight: 600; line-height: 1.25; color: #000; }
.althead_text {position: relative; margin-top: 8px; font-size: 15px; line-height: 1.45; color: var(--text-light);}
.althead_warning {position: relative; margin-top: 10px; font-size: 14px; line-height: 1.5; background: #f0f0f0; color: #000; padding: 8px 36px 8px 16px; border-radius: 6px;}
.appruv_warning {position: absolute; top: 8px; right: 12px; font-size: 18px; cursor: pointer;}
.appruv_warning:hover {color: #e03131;}

summary[h] { position: relative; display: flex; align-content: center; align-items: center; gap: 5px; padding: 10px 12px; cursor: pointer; }
summary[h]::before {content: "\e928"; position: absolute; top: 10px; right: 12px; font-family: 'custom_ico' !important; font-weight: 900; color: #000; transition-duration: .3s;}
summary[h]:hover {background-color: #e5e7eb66;}
summary[h] img {width: 14px; height: auto; max-width: 100%;}
[open] summary[h]::before {transform: rotate(90deg); transition-duration: .3s;}

details.item {position: relative; color: #000; border-bottom: 1px solid #eee;}
details.item a { position: relative; display: block; padding: 10px 12px; color: var(--link-color); cursor: pointer; }
details.item a:hover {background-color: #e5e7eb66; color: var(--link-color);}
details.item a::before {content: none !important;}
details.item a::after {content: "\e919"; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-family: 'custom_ico' !important; color: var(--link-color); font-size: 13px;}

.file_item { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #eee; }
/* other link */
a.otherlink {position: relative; border-bottom: 1px solid #eee; display: flex; align-content: center; align-items: center; gap: 5px; padding: 10px 12px; color: #000; cursor: pointer;}
a.otherlink:hover {background-color: #e5e7eb66; color: var(--link-color);}
a.otherlink::before {position: absolute; top: 14px; right: 12px; color: #000; font-size: 13px; transition: color 0.2s;}
a.otherlink:hover::before {color: var(--link-color);}
a.otherlink img {width: 14px; height: auto; max-width: 100%;}
#althead_info {margin-top: 6px; font-size: 16px; color: var(--text-light); font-weight: 600;}
#otherlink_info {margin-top: 12px;}
.otherlink_info_head {display: inline-block; font-weight: 700; font-size: 17px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; margin-top: 24px; border-bottom: 2px solid #000; text-transform: uppercase;}

/* apptag */
.apptag_ctn {position: relative; width: calc(100% - 45px); margin: 34px 0 25px 0;}
.apptag {display: flex; flex-wrap: wrap; gap: 8px;}
.apptag .hidetag {display: none;}
.apptag_ctn.active .hidetag {display: inline-block;}

.apptag a {display: inline-block; box-sizing: border-box; word-break: break-word; background: #f4f4f4; color: #3f3f3f; font-weight: 500; font-size: 13px; letter-spacing: 0.3px; padding: 5px 8px; border-radius: 5px;}
.apptag a:hover {background: #eaeaea;}
.apptag_head {display: flex; align-items: center; gap: 8px; margin-bottom: 12px;}
.apptag_head .i_tags {font-family: 'custom_ico' !important; font-size: 25px; width: 25px; height: 25px;}

.button_showtag {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    width: 32px;
    height: 32px;
    top: 34px;
    right: -40px;
    cursor: pointer;
    border-radius: 50%;
    color: var(--text-light);
    z-index: 1;
    transition: all .2s ease;
}
.button_showtag:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-main);
}
.apptag_ctn.active .button_showtag.i_angle-down::before {transform: rotate(180deg); transition: .3s;}

/* controller */
.controller_block {display: flex; flex-direction: column; margin: 24px 0; gap: 8px;}
.device_info {font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;}
.device_support {display: flex; flex-direction: row; gap: 6px;}

.device {display: flex; align-items: center; gap: 6px; background: #f1f1f1; padding: 5px 8px; color: #3f3f3f; font-weight: 500; font-size: 13px; letter-spacing: 0.3px; border-radius: 3px; cursor: default;}
.device:hover {background: #eaeaea;}

.device .i_deck {font-family: 'custom_ico' !important; font-size: 17px;}

.device .i_deck-verified {display: flex; align-items: center; gap: 4px; color: #4c9720;}
.device .i_deck-verified::before {background: #000; color: #6bba3d; font-size: 15px; border-radius: 50%;}

.device .i_deck-unsupported {display: flex; align-items: center; gap: 4px; color: #717171;}
.device .i_deck-unsupported::before {font-size: 15px; color: #b2b2b2;}

.device .i_deck-unknown {display: flex; align-items: center; gap: 4px; color: #717171;}
.device .i_deck-unknown::before {font-size: 15px; color: #b2b2b2;}

.device .i_deck-playable {display: flex; align-items: center; gap: 4px; color: #a77e0d;}
.device .i_deck-playable::before {background: #000; color: #ffc82d; font-size: 15px; border-radius: 50%;}

.device .i_noinfosupport {display: flex; align-items: center; gap: 4px;}
.device .i_noinfosupport::before {font-size: 17px;}

.device .i_xbox {display: flex; align-items: center; gap: 6px;}
.device .i_xbox::before {font-size: 17px;}

.device .i_dualshock {display: flex; align-items: center; gap: 6px;}
.device .i_dualshock::before {font-size: 17px;}

.device .i_dualsense {display: flex; align-items: center; gap: 6px;}
.device .i_dualsense::before {font-size: 17px;}

.device .half::before {mask: linear-gradient(to left, #000 50%, rgb(0 0 0 / 57%) 50%);}


.recommend_controller {display: flex; align-items: center; gap: 6px; padding: 5px 0; font-weight: 500; cursor: default;}


.navfaq {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.navfaq a {
    color: var(--text-light);
    font-size: 15px;
    font-weight: 400;
    transition: all 0.2s ease;
}
.navfaq a:hover {
    color: var(--text-main);
    transform: translateX(2px);
}

.related {position: relative; min-height: 84px;}
.c-head {font-weight: 700; color: var(--text-black); font-size: 22px; margin-bottom: 8px; letter-spacing: -0.02em;}
.c-head .commcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 8px;
    background-color: var(--bg-secondary);
    color: #555;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    vertical-align: middle;
}
.c_rel::before {float: left; content: ""; background: #e60000; width: 4px; height: 18px; margin-right: 7px; margin-top: 4px; border-radius: 2px;}
#relgame .head-carusel {margin: 12px 0px;}
#relgame .itemtop-title { -webkit-line-clamp: 2; line-clamp: 2; }
.si-games {width: 142px;}
.si-games .imgbox {aspect-ratio: 7 / 10; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; transition: transform 0.2s, box-shadow 0.2s; margin-bottom: 8px;}
.si-games:hover .imgbox {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
}

.divhr {background: #f1f3f4; height: 1px; margin: 24px 0;}

.button_action {position: fixed; display: flex; align-items: center; bottom: 20px; left: 50%; background: #202022; color: #fff; height: 52px; border-radius: 16px; transform: translateX(-50%); transition: transform .3s ease-in-out; z-index: 99999; overflow: hidden;}
.button_action span {display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; cursor: pointer; -webkit-font-smoothing: antialiased;}
.button_action span:hover {color: hsla(0, 0%, 100%, .7);}
.button_action .i_navcomm {padding: 16px 0px 16px 20px;}

@media screen and (max-width: 768px) {
    .site-helper {
        transform: scale(0.85);
        transform-origin: bottom right;
        bottom: 10px;
        right: 10px;
        opacity: 0.7;
        transition: opacity 0.3s ease;
    }
    .site-helper:hover { opacity: 1; }
    .button_action {
        transform: translateX(-50%) scale(0.85);
        bottom: 10px;
        opacity: 0.7;
    }
    .button_action:hover { opacity: 1; }
}
.button_action .i_goup {padding: 16px 20px;}
.button_action .i_goup.cat {padding: 16px 20px;}
.button_action [class^="i_"]::before {font-size: 20px;}

/*--- ATTACH Block ---*/
fieldset.tracker_list {margin: 14px 0;}
fieldset.tracker_list.highlighted {background: #fedc804a; outline: 10px solid #fedc804a;}
fieldset.tracker_list.highlighted .list_item {background: #fffcf6;}
.title-list {font-size: 15px;font-weight: 500;margin-bottom: 16px;background: #FED166;color: #704A25;padding: 7px 0px 7px 22px;border-radius: 3px;border: 1px solid #D2A146;border-top: 1px solid #efb852;box-shadow: inset 0 1px #FEE9AA, inset 1px 0 #FED67F, inset -1px 0 #FEDA85, inset 0 -1px #FECA6F, 0 1px #B98A37, 0 2px #9F7630, 0 4px 2px rgba(0,0,0,0.4);}
.torrent_list {position: relative; display: flex; flex-direction: column; gap: 16px;}
.torrent_list .ajax-content {display: none;}
.ajax-block .ajax-content {display: none;}
.ajax-block.ajax-open .ajax-content {display: block;}
.list_item {position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--bg-body); color: #0e0e0e; padding: 14px 16px; border-radius: 3px;}
.list_item.activesp {background: #ededed; box-shadow: inset 0 0 0 1px #e4e4e4;}
.list_item.activesp .show_ver {font-weight: 500;}
.ajax-block.ajax-open .list_item {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.dist_size {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 8px;
    border-radius: 6px;
    z-index: 2;
}

/* Кнопка скачивания внутри спойлера */
.packagedownld-spoiler {display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-light);}
.packagedownld-spoiler .downld {position: relative; background: #6bba3d; color: #fff; padding: 6px 16px; border-radius: 4px; font-size: 15px; border-bottom: 2px solid #4c9721; text-decoration: none; width: 164px;}
.packagedownld-spoiler .downld::after {content: ""; position: absolute; bottom: 0px; right: 0; width: 32px; height: 28px; background: url('../images/download-decor.png'); opacity: .15; background-size: contain;}
.packagedownld-spoiler .downld:hover {background: #60a92a; color: #fff;}
.packagedownld-spoiler .size {font-weight: 700;}

/* Все блоки tm2-4 теперь кликабельны */
.list_item.tm2, .list_item.tm3, .list_item.tm4, .list_item.tm5, .list_item.tm6 {cursor: pointer;}
.list_item.tm2:hover, .list_item.tm3:hover, .list_item.tm4:hover {background: #ededed;}

.list_item[class*="tm"]::before {
    content: "\e909";
    font-family: 'custom_ico' !important;
    display: inherit;
    position: absolute;
    right: 14px;
    bottom: 14px;
    color: #444; /* Fallback or base color if needed, though usually overridden or set by opacity */
    color: #0000004f;
    font-size: 15px;
    line-height: 1;
    pointer-events: none;
    transition: opacity 0.3s ease;
    opacity: 0.3;
}

.list_item[class*="tm"]:hover::before,
.list_item[class*="tm"].activesp::before {
    opacity: 1;
}

.showtitle {
    position: relative; 
    display: block; 
    font-weight: 700; 
    font-size: 16px; 
    line-height: 1.35; 
    color: var(--text-main);
}
.show_ver {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    margin-top: 2px;
}

.foldclose::before {position: absolute; content: ''; width: 22px; height: 22px; right: -26px; top: -1px; background-image: url('../images/folder-closed.svg');}
.list_item.activesp .foldclose::before {background-image: url('../images/folder-open.svg');}


.opencast {
    position: relative;
    background: #fafafa;
    border: 1px solid var(--border-light);
    padding: 16px;
    margin: 12px 0;
    font-size: 15px;
    line-height: 1.6;
    border-radius: 8px;
    overflow: hidden;
    color: var(--text-main);
}
.ajax-content .opencast {
    margin-top: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.opencast h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-black);
}
.opencast code {display: block; color: #996655; border: solid #c3cbd1; border-width: 1px 1px 1px 2px; margin: 6px 0; padding: 2px 6px;}
.opencast details.mce-accordion {margin-top: 22px;}
.opencast details.mce-accordion[open] {border: 1px solid rgb(229, 229, 229); background: rgb(250, 250, 250); padding: 10px 14px;} 
.opencast details.mce-accordion[open] summary {margin: -11px -15px 22px -15px;}
.opencast details.mce-accordion summary {position: relative;background: var(--bg-body);border: 1px solid #e4e4e4;font-weight: 500;border-left: 2px solid #909090;margin-bottom: 22px;padding: 2px;padding-left: 10px;cursor: pointer;}

.title_spoiler a::before {content: none;}

.list_item.tm5 {background: #d5dff0ba;}
.list_item.tm5.activesp {background: #d8dde6e3; border: 1px solid #d2d8e0;}
.list_item.tm5:hover {background: #d8dde6e3;}

.list_item.tm6 {background: #d5dff0ba;}
.list_item.tm6.activesp {background: #d8dde6e3; border: 1px solid #d2d8e0;}
.list_item.tm6:hover {background: #d8dde6e3;}


.showtitle[storage]::before {filter: hue-rotate(185deg) saturate(80%) brightness(80%);}

/*--- explicit ---*/
.poster-imgbox .explicit {top: 20%;}
.scrblock .explicit {top: 10%;}
.video_steam .explicit {top: 8%;}
.imgbox .explicit_other {top: 0;}

.explicit {position: absolute; left: 0; padding: 8px 12px; color: #e8e8e8; font-size: 0.95rem; line-height: 1.25; background-color: rgba(0, 0, 0, 0.5); text-align: center; z-index: 1;}
.explicit::before {content: "Эта игра из категории 18+. Вы уверены, что хотите открыть этот контент?";}
.confirm_1 {position: absolute; bottom: -38px; left: 12px; padding: 4px 10px; color: #fff; background: #4CAF50; border-radius: 4px; cursor: pointer;}
.confirm_1:hover {background: #45a049;}

#cat_1 .poster-imgbox, #cat_1 .scrblock, #cat_1 .imgbox {overflow: hidden;}
#cat_1 .poster-imgbox img, #cat_1 .scrblock img, #cat_1 .video_steam .moviesteam {
    filter: blur(5px) grayscale(100%) brightness(50%); box-shadow: 0 0 0px 4px #000; pointer-events: none; cursor: default;}
#cat_1 .imgbox img {filter: blur(5px) grayscale(100%) brightness(50%); box-shadow: 0 0 0px 4px #000; cursor: default;}

.explicit_other { position: absolute; left: 0; padding: 4px; color: #e8e8e8; background-color: rgba(0, 0, 0, 0.5); z-index: 1; }
.explicit_other::before {content: "18+";}

/*--- SIDE ---*/
.block-right {background: var(--bg-card); padding: 20px 16px; border-radius: 6px; box-shadow: 0 0px 3px 0 rgba(0, 0, 0, 0.1);}
.head-right {position: relative; display: block; text-transform: uppercase; font-size: 16px; font-weight: 700; color: var(--text-black); margin-top: 0; margin-bottom: 14px; cursor: pointer; transition: color 0.2s ease; padding-right: 20px;}
.head-right:hover {color: var(--link-color);}
.head-right::after {content: "\e928"; position: absolute; right: 0; top: 1px; font-family: 'custom_ico' !important; font-size: 14px; font-weight: 400; transition: transform 0.3s ease, opacity 0.3s ease; opacity: 0.1;}
.head-right:hover::after {opacity: 1;}
.head-right.active::after {transform: rotate(90deg);}
.head-title {display: block; font-size: 16px; font-weight: 700; color: var(--text-black); text-transform: uppercase; margin-top: 0; margin-bottom: 14px; letter-spacing: 0.5px;}
.ht_rtop {margin-bottom: 10px;}
.ht_rtop::before {float: left; content: ""; background: #fdd000; width: 4px; height: 19px; margin-right: 7px; border-radius: 2px;}

.actual-box {position: relative; display: flex; flex-direction: column; gap: 8px;}
.actual-box.commright {overflow-y: scroll; scrollbar-width: none; -ms-overflow-style: none;}
.actual-box.commright::-webkit-scrollbar {display: none;}



.hr {margin-bottom: 6px;}
.category-wrapper {
    --cat-scrollbar-width: 4px;
    --cat-scrollbar-track: #f1f1f1;
    --cat-scrollbar-thumb: #ccc;
    position: relative;
    max-height: 272px;
    overflow-y: auto;
    padding-right: calc(var(--cat-scrollbar-width) + 1px);
    margin-bottom: 20px;
    transition: max-height 0.3s ease-in-out;
}
.category-wrapper.expanded {max-height: none !important; overflow-y: visible !important;}
.category-wrapper.expanded::before {
    content: "";
    position: absolute;
    right: 1px;
    width: var(--cat-scrollbar-width);
    border-radius: 2px;
    pointer-events: none;
}
.category-wrapper.expanded::before {
    top: 0;
    bottom: 0;
    background: var(--cat-scrollbar-track);
    opacity: 0.7;
}
.category-wrapper::-webkit-scrollbar {width: var(--cat-scrollbar-width);}
.category-wrapper::-webkit-scrollbar-track {background: var(--cat-scrollbar-track);}
.category-wrapper::-webkit-scrollbar-thumb {background: var(--cat-scrollbar-thumb); border-radius: 2px;}
.category-wrapper::-webkit-scrollbar-thumb:hover {background: #aaa;}
.sctag {position: relative; display: block; opacity: 0.8;}
.sctag:hover {opacity: 1;}
.sctag a {display: block; font-weight: 400; color: #000; padding-bottom: 6px; font-size: 1.1em;}
.sctag:hover a {font-weight: 500;}

/*--- SIDE ITEM ---*/
.side-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 -10px;
    padding: 10px;
    border-radius: 12px;

    isolation: isolate;
    box-sizing: border-box;
}

/* Separator lines moved to ::before to enable hiding next sibling's border */
.side-item::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 10px;
    right: 10px;
    height: 0;
    border-top: 1px dashed var(--border-light);

    z-index: -1;
}

.side-item:first-child::before {
    display: none;
}

.side-item:hover {
    background-color: var(--bg-tertiary);
    z-index: 2;
}

/* Hide line above AND line below (which is next item's top border) */
.side-item:hover::before,
.side-item:hover + .side-item::before {
    opacity: 0;
}

.side-item a {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.side-img {
    flex-shrink: 0;
    width: 60px;
    height: 68px; /* Fixed size preserved */
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    background-color: var(--bg-secondary);
    overflow: hidden;
    position: relative;
    transform: translateZ(0);
}

.side-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;

}

.side-item:hover .side-img img {
    filter: brightness(1.1);
}

.side-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding-right: 4px;
}

.side-body .name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-main);

    margin: 0;
}

.side-item:hover .side-body .name {
    color: var(--link-color);
}


.side-body .strate {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-black);
    background-color: var(--bg-secondary);
    border-radius: 6px;
    line-height: 1;
    transition: all 0.2s ease;
}
.side-body .strate::before {
    content: '★';
    color: #f5c518; /* Star color */
    font-size: 11px;
}

/* Reset specific background overrides if present, or style them better */
.side-body .strate[class*="rating_"] {
    background-color: var(--bg-secondary) !important;
}

.side-two {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
    margin-top: 1px;
}

.side-two .info {
    display: flex;
    align-items: center;
}

.side-two .info:not(:last-child)::after {
    content: "•";
    margin: 0 6px;
    font-size: 0.8em;
    opacity: 0.6;
}


.sidenav-main {position: relative; padding-bottom: 12px;}
.sidenav-group {display: grid; gap: 14px;}
.sidenav-group + .sidenav-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-light);
}
.sidenav-heading {display: block; text-transform: uppercase; font-size: 16px; font-weight: 700; color: var(--text-black); margin: 0; letter-spacing: 0.5px;}
.sidenav-list {position: relative; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none;}
.sidenav-list li {display: contents;}
.sidenav-list a {display: inline-block; background-color: var(--bg-secondary); padding: 8px 16px; font-size: 14px; font-weight: 500; border-radius: 8px; color: #000; letter-spacing: 0.4px;}
.sidenav-list a:hover {background: #e6e6e6; font-weight: 500; -webkit-font-smoothing: auto;}
/*--- Custom Full Width Navigation ---*/
.sidenav-list.sidenav-list--cards {
    flex-direction: column;
    gap: 8px;
}
.sidenav-list.sidenav-list--cards a {
    padding: 11px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.sidenav-list.sidenav-list--cards a svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-light); /* Or slightly darker, or inherit? Usually icons are slightly muted or same as text */
    transition: color 0.2s;
}
.sidenav-list.sidenav-list--cards a:hover svg {
    color: inherit; /* Or a specific active color */
}

/*--- Tags Compact Style ---*/
.sidenav-list.sidenav-list--compact {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 4px;
}

.sidenav-list.sidenav-list--compact a {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 4px 6px;
    margin: -4px 0 -4px -6px;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: 6px;
    letter-spacing: 0;
    transition: color 0.15s ease, background 0.15s ease;
}

.sidenav-list.sidenav-list--compact a::before {
    content: "#";
    flex-shrink: 0;
    margin-right: 6px;
    color: #c0c0c0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    transition: color 0.15s ease;
}

.sidenav-list.sidenav-list--compact a:hover {
    color: var(--text-black);
    background: rgba(0, 0, 0, 0.06);
}

.sidenav-list.sidenav-list--compact a:hover::before {
    color: var(--text-black);
}
.open_alltag {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding: 6px 12px;
    background: transparent;
    border: 2px dashed #ddd; /* Dashed border to distinguish from navigation */
    color: var(--text-light);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.open_alltag:hover {
    background: #f9f9f9;
    border-color: #bbb;
    color: #000;
    transform: translateY(-0.5px);
    z-index: 5;
}

.open_alltag:active {
    transform: translateY(0);
    background: #f0f0f0;
}

.open_alltag [class^="i_"] {
    font-family: 'custom_ico' !important;
    font-size: 16px;
    font-weight: normal;
    width: auto;
    height: auto;
    margin-right: 0;
    color: inherit; /* Inherit button color */
    opacity: 0.7;
    transition: none;
}

.open_alltag:hover [class^="i_"] {
    color: inherit;
    opacity: 1;
}

.open_alltag a, .open_alltag .sidenav-label {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

/* Make both the link and the JS-span clickable across the entire button area */
.open_alltag a::after, .open_alltag .sidenav-label::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}



.catnewscount {color: var(--text-light); font-weight: 400 !important;}
.catnewscount:before {display: inline-block; margin: 0 .25rem .2rem; content: ""; font-size: 1rem; line-height: .5rem; padding: 1px; border-radius: 50%; vertical-align: middle; background-color: currentColor;}

.cat_overflow {position: relative; margin-top: 12px;}
.cat_overflow::before {content: "▾"; position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; line-height: 28px; text-align: center; color: var(--text-light); cursor: pointer; border-radius: 50%; transition: background-color 0.2s, color 0.2s; font-size: 18px;}
.cat_overflow:hover::before {color: #000; background-color: #f0f0f0;}
.cat_overflow__text {position: relative; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; line-height: 1.5; font-size: 1.125em; cursor: grabbing;}
.cat_overflow__text img {position: relative; display: block; border-radius: 12px; max-width: 350px; margin: 12px auto;}
.cat_overflow__text p {margin-bottom: 12px;}
.cat_overflow__text ul, .cat_overflow__text ol {margin-bottom: 12px; padding-left: 20px;}
.cat_overflow__text ul {list-style: disc;}
.cat_overflow__text ol {list-style: decimal;}
.cat_overflow__text li {margin-bottom: 5px;}
.cat_overflow__text br {display: none;}
.cat_overflow.expanded .cat_overflow__text { -webkit-line-clamp: unset; line-clamp: unset; }
.cat_overflow.expanded::before { transform: rotate(180deg); }



/*--- FOOTER ---*/
.footer-navi {background: #292929; min-width: 320px; padding: 12px 0;}
.footer-c {max-width: 1100px; display: flex; justify-content: space-between; margin: 0 auto; padding: 0 10px;}
.footer-navi_menu {
    max-width: 1130px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 296px;
    gap: 12px;
    margin: 0 auto;
    padding: 0 10px;
    align-items: start;
}
.footer-upd_main {min-width: 0; padding: 10px 14px;}
.footer-upd_aside {display: flex; flex-direction: column; gap: 10px; padding: 10px 0;}
.footer-upd-title {
    position: relative;
    display: inline-flex;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f2f2f2;
}
.footer-upd-text {
    font-size: 15px;
    color: #b0b0b0;
    margin: 5px 0 10px 0;
    line-height: 1.5;
}
.footer-upd-text p + p {
    display: block;
    margin-top: 10px;
}
.footer-upd-controls {display: flex; gap: 10px; align-items: center;}
.footer-upd-controls .ddprev,
.footer-upd-controls .ddnext {
    width: 38px; 
    height: 32px; 
    font-size: 20px;
    background: transparent;
    border: none;
    color: #777;
    box-shadow: none;
}
.footer-upd-controls .ddprev:hover,
.footer-upd-controls .ddnext:hover {
    background: transparent;
    border: none;
    color: #fff;
    transform: none;
    box-shadow: none;
}
.footer-lc {color: var(--text-light); font-size: 15px;}
.footer-dc {font-size: 15px;}
.footer-dc a {margin: 0 3px; color: var(--text-light);}
.footer-dc a:hover {color: #fff;}
.pravo {border-right: 2px solid #444444; padding-right: 10px;}

/*--- COMMENTS ---*/
.comm-box {position: relative;}
.comm-box .c-head {margin-bottom: 24px;}
.add-commform {position: relative;}
.ac-inputs {display: flex; justify-content: space-between; margin-bottom: 16px; overflow: hidden;}
.ac-inputs input {width: 250px;}
.ac-textarea {position: relative; min-height: 96px; background-color: var(--bg-tertiary); padding: 15px; border: 2px solid #00000008; border-radius: 10px; margin-bottom: 20px; color: #000;}
.ac-textarea textarea {background: inherit; width: 100%; font-size: 16px; font-weight: 500; letter-spacing: 0; height: 50px; line-height: 25px; resize: none; outline: none;}
.ac-textarea textarea::placeholder {font-weight: 400; color: rgba(0,0,0,.65);}
.ac-textarea textarea::-webkit-scrollbar {width: 0; height: 0;}
.ac-bottom_line {display: none; position: relative; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;}
.ac-bottom_b {display: flex; gap: 10px;}
.recaptchacomm {position: relative;}
.recaptchacomm .g-recaptcha, .recaptchacomm .cf-turnstile {margin-bottom: 57px;}
.ac-submit {text-align: center;}
.ac-faq {display: inline-flex; height: 40px; align-items: center; justify-content: center; width: 134px; text-transform: uppercase; background-color: #ffe38d; border: 2px solid #ffda67; padding: 0 20px; border-radius: 6px; color: #000; font-size: 15px; font-weight: 500;}
.ac-faq:hover, .ac-faq:focus {color: inherit; opacity: 0.8;}
.nofaq .ac-faq {display:none;}
.ac-submit, .btn-cn {background-color: var(--bg-tertiary); border-radius: 6px; color: #000; font-size: 15px; cursor: pointer; padding: 10px 20px; font-weight: 500; font-family: Roboto, sans-serif;}
.ac-submit:hover, .btn-cn:hover {background-color: #e5e5e5;}
.btn-cn.i_auch::before {padding-right: 4px;}
.ac-submit.no_active {position: absolute; right: 0;}
.active_comment {margin-bottom: 20px;}
.active_comment .ac-bottom_line {display: flex; margin-bottom: -57px; z-index: 1;}
.active_comment .ac-submit.no_active {display:none;}
.ac-inputs input {background-color:#fff;}
.mass_comments_action {display: flex; justify-content: flex-end; align-items: center; padding: 8px 24px; margin: 0 -24px; margin-bottom: -20px; background: var(--bg-body); border-bottom: 1px solid #e8e8e8;}
.mass_comments_action input[type="submit"] {background: #424242; color: #fff; margin-left: 4px; padding: 3px 12px; border-radius: 5px; cursor: pointer;}

.dle-comments-navigation {margin-top: 20px; margin-bottom: -20px;}
.dle-comments-navigation .navigation {margin: 0 -24px; overflow: hidden;}

.last-comm-link {font-size:16px; margin-top:10px;}
.last-comm-link a {text-decoration:underline; color:#06c;}
.comments-items {margin-top: 12px;}

.head-addcomm {display: flex; flex: 1 0 auto; justify-content: flex-end; flex-direction: row; align-items: center;}
.head-addcomm-title {font-size: 15px; color: #000; font-weight: 700; margin-right: 8px;}
.head-addcomm .socbutton {display: flex; justify-content: center; align-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; margin-left: 5px; font-size: 17px; cursor: pointer;}
.socbutton.i_vk {background: #0077ff;}
.socbutton.i_google {background: #E94F43;}
.socbutton.i_yandex {background: #fc0;}
.head-addcomm .socbutton:hover {opacity: 0.9;}

.comm-item {position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 0; overflow-wrap: break-word;}
#comm-status {padding-top: 0px; border-bottom: 1px solid #efefef;}
#comm-status .comm-two {position: relative; margin-bottom: 0; padding-bottom: 0;}
#comm-status .comm-two b {font-weight: 500;}
#comm-status .comm-two::before {position: absolute; top: 1px; left: -13px; color: #e2000e; content: "*"; font-weight: 700; font-size: 18px; line-height: 1;}
.fixcom {width: 15px; height: 15px; background: url(../images/fixcom.png) no-repeat; background-size: 100%;}
.comm-two .highlighted {background-color: #ffe7a8; transition: background-color 0.5s ease;}

.comm-one_line {position: relative; display: flex; gap: 12px;}
.comm-one_line .form-check-label {position: absolute; top: 0; left: 0; width: 38px; height: 38px; margin: 0; padding: 0; z-index: 2;}
.comm-one_line input {position: absolute; top: 0; left: 0; width: 38px; height: 38px; opacity: 0; cursor: pointer;}
.comm-one_line input:checked {opacity: 1;}
.team_one {line-height: 1.3;}
.comm-one {position: relative; display: flex; align-items: center; gap: 4px;}
.comm-av {position: relative; width: 38px; height: 38px; cursor: pointer;}
.comm-av img {display: block; width: 38px; height: 38px; border-radius: 6px;}
.comgroup {display: inline-flex; gap: 4px; color: #717171;}
.comgroup:hover {color: #000;}
.user-on {position: absolute; top: -1px; left: -1px; border: 7px solid transparent; border-top-color: rgb(127, 185, 0); border-left-color: rgb(127, 185, 0); border-top-left-radius: 5px; border-top-right-radius: 3px; border-bottom-left-radius: 3px;}
.comm-author {font-size: 15px; font-weight: 600; line-height: 1; color: initial; cursor: pointer;}
.comm-author a {color: #000;}
.comm-author a:hover {color: #1172a6;}

.comm-reply {display: flex; flex-wrap: nowrap; align-items: center; gap: 16px; line-height: 0;}
.comm-reply a {position: relative; display: flex; align-items: center; gap: 4px; color: #595959; cursor: pointer; font-size: 14px; font-weight: 500; -webkit-font-smoothing: antialiased;}

a[onclick^="dle_reply"]:hover {color: #000;}

.comm-reply .i_dottcom {position: relative; color: var(--text-light); cursor: pointer;}
.edithide {display: none; align-items: center; gap: 8px; margin-left: -4px;}
.edithide.active {display: flex;}
.edithide span:hover, .eldot:hover {color: #000;}
.eldot:hover::after {position: absolute; top: -4px; left: -4px; right: auto; content: ""; width: 22px; height: 22px; background: #00000014; border-radius: 999px;}

.comm-date {color: var(--text-light); font-size: 13px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums;}
.comm-two {color: #111; font-size: 1.08em; line-height: 1.5;}
.comm-two .comm-author {float: none; padding: 0; font-size: inherit;}
.comm-two div[id] {display: initial;}

.comm-rate {display: flex; align-items: center; gap: 6px; font-weight: 500; font-size: 16px;}
a[onclick^="doCommentsRate('plus'"] {transform: rotate(180deg);}
.ratingtypeplusminus {font-size: 14px; font-variant-numeric: tabular-nums;}
.i_ratebut {position: relative; display: inline-flex; align-items: center; font-size: 16px; color: var(--text-light);}
.i_ratebut:hover::after {position: absolute; top: -4px; left: -4px; right: auto; content: ""; width: 24px; height: 24px; background: #00000014; border-radius: 999px;}

a[onclick^="doCommentsRate('plus'"] .i_ratebut:hover {color: #d93900;}
a[onclick^="doCommentsRate('minus'"] .i_ratebut:hover {color: #6a5cff;}

.ac-textarea {
    position: relative;
}

.ac-textarea_controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.smileicon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 20px;
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
}

.smileicon:hover, .smileicon.active {
    color: var(--text-main);
    background-color: var(--bg-hover);
}

.smileicon:active {
    transform: scale(0.95);
}

.emoji-popover {
    display: none;
    position: absolute;
    bottom: 52px;
    right: 0;
    width: 320px;
    max-width: calc(100vw - 32px); /* Responsive safety margin */
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 100;
    padding: 12px;
    user-select: none;
}

.emoji-popover::before {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 10px;
    height: 10px;
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    transform: rotate(45deg);
}

.emoji-popover.active {
    display: block;
    animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.emoji-grid {
    display: grid;
    /* Авто-колонки: мин. 40px для удобного нажатия */
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
    /* Плавная прокрутка на iOS */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Предотвращает прокрутку страницы */
}

/* Кастомный скроллбар для списка смайлов */
.emoji-grid::-webkit-scrollbar {
    width: 4px;
}
.emoji-grid::-webkit-scrollbar-track {
    background: transparent;
}
.emoji-grid::-webkit-scrollbar-thumb {
    background-color: var(--border-medium);
    border-radius: 4px;
}

.emoji-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; 
    height: 40px;
    font-size: 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s, transform 0.1s;
    background: transparent;
    border: none;
    padding: 0;
    /* Предотвращение зума при двойном тапе */
    touch-action: manipulation;
}

/* Ховер только для устройств с мышью (убирает залипание на мобильных) */
@media (hover: hover) {
    .emoji-btn:hover {
        background-color: var(--bg-hover);
        /* Scale убран, так как он может вызывать размытие текста/сдвиги */
        transform: scale(1.1);
    }
}

.emoji-btn:active {
    background-color: var(--bg-hover);
    transform: scale(0.95);
}

#counter {
    position: absolute;
    right: 54px;
    bottom: 12px;
    height: 32px;
    display: flex;
    align-items: center;
    line-height: 1;
    color: #2a2a2a;
    font-weight: 500;
}

.ac-textarea_controls #counter {
    position: static;
    height: 32px;
}

/* right comment block */
.actual-box.commright {display: flex; flex-direction: column; gap: 10px; user-select: none;}
.rcomm_item {position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px 0; color: #000; border-bottom: 1px dashed var(--border-light);}
.actual-box li:last-child .rcomm_item {border-bottom: none;}
.rcomm_head {display: flex; align-items: center; gap: 10px;}

.rcomm_av {position: relative; width: 32px; height: 32px; flex-shrink: 0; aspect-ratio: 1/1; overflow: hidden;}
.rcomm_av img {width: 100%; height: 100%; border-radius: 6px; object-fit: cover;}

.rcomm_meta {display: flex; flex: 1; flex-direction: row; align-items: center; gap: 8px; overflow: hidden;}
.rcomm_meta .author {font-size: 13px; font-weight: 600; line-height: 1; color: initial; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;}
.rcomm_date {color: var(--text-light); font-size: 11px; flex-shrink: 0; margin-left: auto;}
.rcomm_text {position: relative; color: var(--text-main); font-size: 13px; line-height: 1.35; -webkit-line-clamp: 3; line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}

.rcomm_title {position: relative; display: block; margin-top: 4px; margin-bottom: 0px; color: var(--link-color); font-size: 12px; font-weight: 500; -webkit-font-smoothing: antialiased; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; opacity: 0.8;}
.rcomm_title.i_square-up::before {position: absolute; right: 0; bottom: 0; color: #0000004f; font-size: 15px; opacity: 0;}
.rcomm_item:hover .i_square-up::before {opacity: 1;}

.actual-box.team_site {display: flex; flex-direction: column; gap: 8px; user-select: none; height: auto; max-height: 252px; overflow-y: auto; margin: 0 -10px; padding: 0 2px;} 
.actual-box.team_site::-webkit-scrollbar {width: 4px;}
.actual-box.team_site::-webkit-scrollbar-thumb {background-color: #dcdcdc; border-radius: 4px;}

.team_author {display: flex; align-items: center; gap: 12px; padding: 4px 10px; border-radius: 8px; transition: background-color 0.2s ease, transform 0.2s ease;}
.team_author:hover {background-color: var(--bg-tertiary); transform: translateX(2px);}

.team_av {position: relative; width: 36px; height: 36px; flex-shrink: 0;}
.team_av img {width: 100%; height: 100%; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 5px rgba(0,0,0,0.08);}

.team_one {display: flex; flex-direction: column; justify-content: center; overflow: hidden; gap: 2px;}
.team_login {display: flex; align-items: center; gap: 6px;}
.team_name {font-size: 0.95rem; font-weight: 600; line-height: 1.2; color: var(--text-black);}
.team_status {color: var(--text-light); font-size: 13px;}
.team_status:empty {display: none;}

.rel_author {display: flex; gap: 12px;}
.rel_author_av {position: relative; width: 34px; height: 34px; overflow: hidden;}
.rel_author_av img {width: 34px; height: 34px; border-radius: 6px;}
.author_text {color: var(--text-light); font-size: 12px;}
#relgame {min-height: 274px;}


/*--- BOTTOM Navi ---*/

.navigation {width: -webkit-fill-available; padding: 8px 24px; margin: 10px -24px; background: var(--bg-secondary); grid-column: 1 / -1;}
.navigation:after {clear: both; display: block; content: "";}

.pages {text-align: left;}
.pages span, .pages a:hover, .page_next-prev {background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); border-radius: 8px;}
.pages span, .pages a {color: inherit; display: inline-block; position: relative; border-radius: 8px; padding: 7px; min-width: 22px; height: 22px; line-height: 22px; text-align: center; font-weight: 700; box-sizing: initial; font-size: 16px; transition: none;}
.pages span {color: var(--link-color);}
.pages a:hover {color: #fff; background-color: #3394e6;}

.page_next-prev {float: right; height: 36px;}
.page_next-prev * {float: left;}
.page_next-prev i {font-size: 20px; color: #d7d7d7;}
.page_next-prev > span >  a:hover i { color: #0c5f7eed; }
.page_next-prev > span > * {float: left; padding: 8px 12px;}
.page_next > span, .page_prev > span {opacity: 0.5;}
.nav_ext {margin: 0 10px; color: var(--text-light);}


.btn-menu-wr {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    transition: background-color 0.2s ease;
}
.btn-menu-wr:hover {
    background-color: var(--bg-hover);
}
.btn-menu-wr span {
    width: 26px;
    height: 3px;
    background-color: var(--text-black);
    border-radius: 3px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: center;
}
.opened-menu .btn-menu-wr span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}
.opened-menu .btn-menu-wr span:nth-child(2) {
    opacity: 0;
    transform: translateX(10px);
}
.opened-menu .btn-menu-wr span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

.side-panel {width: 240px; height: 100%; overflow-x: hidden; overflow-y: auto; background-color: #fff; z-index: 99999; position: fixed; left: -320px; top: 0; transition: left .4s; -webkit-transition: left .4s;}
.side-panel.active {left: 0;}
.side-panel .right-nav {display: block;}
.close-overlay {width: 100%; height: 100%; background-color: rgba( 0, 0, 0, 0.4); position: fixed; left: 0; top: 0; z-index: 887;}
body.opened-menu {overflow: hidden; width: 100%; height: 100%;}

/*--- LOGIN Profile ---*/
/*--- DROPDOWN STYLES ---*/
.profile-box {
    position: absolute;
    background-color: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    top: 55px;
    right: 0;
    left: auto;
    z-index: 999;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1), 0 4px 8px rgba(0,0,0,0.05);
    min-width: 250px;
}
.profile-box form {width: 100%; padding: 4px;}

.account-menu_user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    margin-bottom: 6px;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background-color 0.2s;
}
.account-menu_user:hover {background-color: var(--bg-hover);}
.account-menu_user:hover .account-menu_profile {color: var(--link-color);}

.account-menu_avbox {
    width: 42px; 
    height: 42px; 
    border-radius: 50%; 
    overflow: hidden; 
    flex-shrink: 0;
}
.account-menu_name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-black);
    width: 100%;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}
.account-menu_profile {font-size: 12px; color: var(--text-secondary); margin-top: 1px;}

.lb-menu li {
    position: relative; 
    display: flex; 
    align-items: center; 
    color: var(--text-main); 
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.2s;
}
.lb-menu li:hover {background-color: var(--bg-hover);}

.lb-menu li::before {
    font-size: 16px;
    width: 20px; 
    text-align: center;
    margin-right: 12px;
    color: var(--text-light);
    transition: color 0.2s;
}
.lb-menu li:hover::before {color: var(--link-color);}

.lb-menu li.exit {
    margin-top: 12px;
    color: var(--danger);
}
.lb-menu li.exit::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 10px;
    right: 10px;
    height: 1px;
    background-color: var(--border-light);
}
.lb-menu li.exit::before {
    color: var(--danger);
}
.lb-menu li.exit:hover::before {
    color: var(--danger-hover);
}
.lb-menu li.exit:hover {
    background-color: var(--danger-bg);
}

.lb-menu li a {
    color: inherit; 
    font-weight: 500; 
    font-size: 15px; 
    flex: 1;
    line-height: 1.35;
}

.lb-lnk {
    display: flex; 
    flex-direction: column;
    gap: 16px;
    align-items: center; 
    margin-top: 8px; 
    border: none;
    width: 100%;
}
.lb-lnk a:first-child {
    color: var(--text-light); 
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s;
}
.lb-lnk a:first-child:hover {color: var(--text-main);}

.log-register {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 44px;
    background-color: transparent;
    color: var(--text-main) !important;
    border: 2px solid var(--border-medium);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.log-register:hover {
    border-color: var(--accent);
    color: var(--accent) !important;
    background-color: rgba(99, 184, 20, 0.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.log-register:active {
    transform: scale(0.98);
}

.grecaptcha-badge {z-index: 99999;}

.regwrap {color: #444; line-height: 1.5; font-size: 1.08em;}
.regwrap h2 {font-size: 18px; font-weight: 500; margin-bottom: 4px;}
.ulreg li {list-style: disc; margin-left: 16px; margin-bottom: 5px;}

/* ====== CLS Prevention: Pre-JS Carousel Layout ====== */
/* Стили до инициализации JavaScript - предотвращают сдвиг макета */
/* CSS-переменные --carousel-visible и --carousel-gutter задаются в HTML */
.head-carusel:not(.carousel-initialized),
.head-carusel2:not(.carousel-initialized),
.fixnews:not(.carousel-initialized),
.footer-carusel:not(.carousel-initialized) {
    display: flex;
    gap: var(--carousel-gutter, 16px);
    overflow: hidden;
    padding: 10px 0;
    margin: -10px 0;
}
.head-carusel:not(.carousel-initialized) > *,
.head-carusel2:not(.carousel-initialized) > *,
.fixnews:not(.carousel-initialized) > *,
.footer-carusel:not(.carousel-initialized) > * {
    width: calc((100% - (var(--carousel-gutter, 16px) * (var(--carousel-visible, 5) - 1))) / var(--carousel-visible, 5));
    flex-shrink: 0;
}

/* Custom Carousel Styles */
.carousel-initialized {position: relative;}
.carousel-wrapper {position: relative; width: 100%;}
.carousel-viewport {overflow: hidden; width: 100%; touch-action: pan-y; padding: 10px 0; margin: -10px 0;}
.carousel-track {display: flex; gap: var(--carousel-gutter); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);}
.carousel-initialized .carousel-track {will-change: transform;}
.carousel-track > * {width: calc((100% - (var(--carousel-gutter) * (var(--carousel-visible) - 1))) / var(--carousel-visible)); flex-shrink: 0; flex-grow: 0;}

/* Lazy Loading */
img.lazy-loaded {animation: fadeIn 0.15s ease-out;}
img[data-src] {background: linear-gradient(110deg, var(--bg-tertiary) 8%, var(--bg-secondary) 18%, var(--bg-tertiary) 33%); background-size: 200% 100%; animation: shimmer 1.5s linear infinite;}
@keyframes fadeIn {from {opacity: 0.7;} to {opacity: 1;}}
@keyframes shimmer {to {background-position-x: -200%;}}

/* Carousel Navigation Dots */
.carousel-nav {display: flex; align-items: center; justify-content: center; margin-top: 14px; gap: 4px;}
.carousel-nav-btn {background-color: var(--nav-btn-bg); width: 15px; height: 11px; border-radius: 2px; transition: background-color 0.2s; cursor: pointer; border: none; padding: 0;}
.carousel-nav-btn:hover,
.carousel-nav-btn.active {background-color: var(--nav-btn-active);}
.carousel-nav-btn:focus-visible {outline: 2px solid var(--link-color); outline-offset: 2px;}

/* Pinned items carousel - vertical nav */
.pinned_line {position: relative; border-bottom: 1px dashed var(--border-light); margin-bottom: 20px;}
.pinned_line .short_item {margin-bottom: 20px;}
.fixnews {position: relative;}
.pinned_line .carousel-nav {flex-direction: column; margin: 0; position: absolute; top: 10px; right: -19px; gap: 4px;}
.pinned_line .carousel-nav-btn {height: 15px;}


.itemdown_soc {display: inline-flex; gap: 4px; padding: 0 16px; border-radius: 3px; transition: opacity .3s; font-size: 1.1em; height: 38px; line-height: 38px; cursor: pointer; margin: 16px 4px 12px 4px; align-items: center;}
.itemdown_soc:hover {opacity: .85;}
.static-pages .i_vk {background: #0077ff; color: #fff;}
.static-pages .i_google {background: #E94F43; color: #fff;}
.static-pages .i_yandex {background: #fc0; color: #000;}

#Tooltip {max-width: 350px; padding: 4px 12px; background: #000; color: #fff; border-radius: 4px; font-size: 13px; z-index: 9999;}

/*--- STATISTICS ---*/
/*--- STATISTICS ---*/
.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    margin: 20px 0;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.stats-header {
    display: contents;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.stats-header .stats-cell {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-light);
    padding: 14px 20px;
}

.stats-row {
    display: contents;
    transition: background-color 0.2s;
}

.stats-row:hover .stats-cell {
    background-color: var(--bg-tertiary);
}

.stats-cell {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--text-main);
}
.stats-cell span {font-weight: 700; color: var(--text-black);}

/* Remove border from last row cells if needed, or keep for consistency */
.stats-container .stats-row:last-child .stats-cell {
    border-bottom: none; 
}


.statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.stat-list {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.stat-list h4 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-black);
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-list li {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
    border-bottom: 1px dashed var(--border-light);
}

.stat-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.stat-list li span {
    font-weight: 700;
    color: var(--text-black);
}

.stat-list li a {
    font-weight: 500;
}

@media screen and (max-width: 768px) {
    .stats-container {
        display: flex;
        flex-direction: column;
    }
    
    .stats-header {
        display: none; /* Hide header on mobile if stacked */
    }
    
    .stats-row {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid var(--border-medium);
        padding: 10px;
    }
    
    .stats-cell {
        border-bottom: none;
        padding: 5px 10px;
        width: 50%; /* 2 cols on mobile */
    }
    
    /* Add labels for mobile if needed, or rely on context */
    .stats-cell::before {
        content: attr(data-label);
        font-weight: 700;
        margin-right: 5px;
        display: none; /* Only if we add data-labels */
    }
}

.stats-row {
    display: contents;
}

.stats-cell {
    padding: 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-light);
    font-size: 14px;
    text-align: center;
}

.stats-cell:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--text-black);
}

.stats-row:last-child .stats-cell {
    border-bottom: none;
}

.statistics {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.stat-list {
    flex: 1;
    min-width: 200px;
}

.stat-list li {
    margin-bottom: 8px;
    font-size: 15px;
    color: var(--text-light);
}

.stat-list li h4 {
    font-size: 16px;
    margin-bottom: 10px;
    color: var(--text-black);
    font-weight: 700;
}

.stat-list span {
    color: var(--text-black);
    font-weight: 500;
}

/*--- ADAPTIVE ---*/
@media screen and (max-width: 1100px) {
    .br_stat .marquee {display: none;}
    .nav_ext {margin: 0;}
}

@media screen and (max-width: 960px) {

    /* Mobile Logo - Show only icon using clean crop */
    .logo {
        width: 32px; 
        overflow: hidden;
        flex-shrink: 0;
    }
    .logo img {
        width: 137px; /* Full logo width to maintain scale */
        height: 30px; /* Fixed height matching the original design */
        max-width: none;
        object-fit: cover;
        object-position: left center;
    }

    .carusel-box {margin-bottom: 20px;}
    .carusel-box.showfull .carousel-nav {margin: 12px 0 2px 0;}
    .carousel-nav-btn {display: none;}
    .carousel-nav-btn:nth-child(-n+8) {display: inline-block; height: 11px;}
    .mainwrap {
        grid-template-columns: 1fr;
    }
    .footer-navi_menu {grid-template-columns: 1fr;}
    .footer-upd_aside {display: none;}
    .right-nav {display: none;}
    .block-right {margin-bottom: 0;}
    .btn-menu-wr {display: flex;}    
    .wrap {margin: 0;}
    .nav-menu .menu-headnav {display: none;}
    .side-panel .right-nav {width: 100%;}
    ::-webkit-scrollbar{height:12px;width:14px;background:rgba(0,0,0,0);z-index:12;overflow:visible}
    ::-webkit-scrollbar-thumb{width:10px;background-color:#434953;border-radius:10px;z-index:12;border:4px solid rgba(0,0,0,0);background-clip:padding-box;transition:background-color .32s ease-in-out;margin:4px;min-height:32px;min-width:32px}
    ::-webkit-scrollbar-thumb:hover{background-color:#4e5157}
    
    /* Theme Toggle - Convert slider to button */
    .switch-container {
        margin: 0;
    }
    .switch {
        width: 44px;
        height: 44px;
    }
    .slider {
        border-radius: 8px;
        background-color: transparent;
        border: none;
    }
    .slider::before {
        width: 28px;
        height: 28px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background-size: 16px;
        box-shadow: none;
    }
    input:checked + .slider::before {
        transform: translate(-50%, -50%); /* No slide, just stay centered */
    }
    .slider:hover {
        background-color: var(--bg-hover);
    }

    a.favorite {
        width: 44px;
        height: 44px;
        border-radius: 5px;
    }

    .miniprofile .avatar::before {
        display: none;
    }
    .miniprofile .avatar {
        margin-right: 0;
    }
}

@media screen and (max-width: 730px) {
    #search_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        border-radius: 5px;
        font-size: 22px;
        color: var(--text-black);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }
    #search_btn:hover {
        background-color: var(--bg-hover);
    }

    /* Mobile Search Overlay */
    .search-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: transparent;
        z-index: 1000;
        visibility: hidden;
        transition: visibility 0.3s;
        pointer-events: none;
        margin: 0;
    }
    
    .search_open .search-wrap {
        visibility: visible;
        pointer-events: auto;
    }

    /* Backdrop */
    .search-wrap::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        backdrop-filter: blur(4px);
        opacity: 0;
        transition: opacity 0.3s;
    }
    .search_open .search-wrap::before {
        opacity: 1;
    }

    /* Search Container */
    #quicksearch {
        position: relative;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding: 10px;
        background: var(--bg-card);
        transform: translateY(-100%);
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        display: flex;
        align-items: center;
        gap: 10px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .search_open #quicksearch {
        transform: translateY(0);
    }

    /* Input Field */
    #quicksearch input {
        flex: 1; /* Allow input to take available space */
        order: 1; /* Place input first */
        height: 50px;
        font-size: 18px;
        border: none;
        background: var(--bg-secondary);
        border-radius: 8px;
        padding: 0 15px;
        margin: 0;
        min-width: 0; /* Prevent flex overflow */
    }
    #quicksearch input:focus {
        background: var(--bg-body);
        box-shadow: inset 0 0 0 2px var(--link-color);
    }

    /* Search Submit Button - now a flex item */
    .search-button {
        position: static; /* Reset absolute positioning */
        order: 2; /* Place after input */
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: var(--accent);
        color: #fff;
        font-size: 20px;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
        transform: none;
    }
    .search-button:hover {
        background: var(--accent-hover);
    }
    .search-button:active {
        transform: scale(0.95);
    }
    
    /* Close Button */
    .search-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        order: 3; /* Place after input */
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        background: transparent;
        color: var(--text-light);
        font-size: 24px;
        cursor: pointer;
        border-radius: 50%;
        transition: background 0.2s, color 0.2s;
    }
    .search-close-btn:hover {
        background: var(--bg-hover);
        color: var(--text-black);
    }

    /* Search Suggestions Mobile Adjustments */
    #searchsuggestions {
        position: absolute;
        top: 70px !important; /* Below the search bar */
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        max-height: calc(100vh - 90px);
        overflow-y: auto;
        border-radius: 8px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    .title-list {font-size: 16px;}
    .navfaq a {font-size: 16px;}

    .page_next-prev {height: auto; float: none; background: none; box-shadow: none; -webkit-box-shadow: none;}
    .page_prev, .page_next {position: relative; z-index: 1; border-radius: 8px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2);}
    .page_prev {float: left;}
    .page_next {float: right;}
    .pages {text-align: center;}
    .navigation .pages > span.nav_ext { text-indent: -9999px; background: none; box-shadow: none; width: 10px; min-width: 5px; padding: 0;}
}    

/*--- От 690px до 590px ---*/
@media screen and (max-width: 690px) {
    .br_stat {display: none;}
    .active_comment .ac-bottom_line {margin-bottom: 0;}
    .recaptchacomm .g-recaptcha {margin-bottom: 12px;}
    .search_res_title {white-space: normal;}
}    

/*--- От 590px до 491px ---*/
@media screen and (max-width: 590px) {
    .search-wrap {width: 100%;}
    .switch-container {margin-right: 0;}
    .catheader {display: block;}
    .breadcrumbs {width: 100%; font-size: 15px;}
    .shortupd_body .name {font-size: 20px; margin: 0 0 10px 0;}
    .fmainwrap {
        grid-template-columns: 1fr;
        justify-items: center;
        margin-bottom: 0;
    }
    .poster-imgbox {margin: 0 auto;}
    .game_details {padding-top: 24px;} 
    .stser {display: block; padding-bottom: 2px;}
    .tquote, .tupd {font-size: 1.1em; margin: 14px 0;}
    .itemtop_games {display: none;}
    .game_desc {margin: 10px 0 2px 0;}
    .scrhead, .videohead {font-size: 19px;}
    .scrblock {
        grid-template-columns: repeat(2, 1fr);
    } 
    .scrblock .expand {
        grid-template-columns: repeat(2, 1fr);
    } 
    .imglogo {margin: 14px 0;}
    .imglogo img {width: 240px;}
    .not-actual .ac_ver {display: block; margin-top: 4px; margin-bottom: -14px;}
    .infohide {display: none;}
    .info_type {padding: 0; margin: 3px 0 0 0; border: none;}
    .info_type b {color: var(--text-light); border-bottom: 2px dotted #c5c5c5; line-height: 24px;}
    .spoiler {font-size: 16px; background-size: 11px;}
    .list_item {font-size: 1.1em; gap: 8px;}
    .comm-one > span:nth-child(4) {display:none;}
    .ac-inputs {display: block !important;}     
    .ac-inputs input {width:100%;}
    .head-addcomm {padding-top: 20px; justify-content: left;}
    .footer-c {display: block;}
    .footer-dc a {margin: 20px 14px 0 0px; color: var(--link-color); display: inline-block;}    
    .ui-dialog {width:100% !important;}
    .upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 20px;}
    .upop-left {margin-bottom:10px; text-align:center;}
    #dofullsearch, #searchsuggestions span.seperator {display:none !important;}
    .itemtop-box, .si-games {width: 154px;}
}

/*--- От 491px до 437px ---*/
@media screen and (max-width: 491px) {
    .search_open .search-wrap {width: 100%; left: 0;}
    #quicksearch {width: 100%;}
    #quicksearch input {height: 42px; line-height: 42px; margin: 0px 10px;}
    #quicksearch input:focus {font-size: 17px; font-weight: 500;}
    .search-button {font-size: 20px;}
    #news_set_sort {left: auto; right: 0;}
    .comm-rate {top: 22px;}
    .mass_comments_action {display: inherit;}
    .mass_comments_action select {margin: 8px 4px;}
    .mass_comments_action input[type="submit"] {margin: 2px 0;}
    .itemtop-box, .si-games {width: 136px;}
}
/*--- От 437px до 396px ---*/
@media screen and (max-width: 437px) {
    #searchsuggestions {width: 100% !important;}

    .itemtop-box, .si-games {width: 175px;}
}

/*--- От 396px ---*/
@media screen and (max-width: 396px) {
    .itemtop-box, .si-games {width: 164px;}
    .menu-head {gap: 8px;}
    .carouhead {flex-direction: column; margin-bottom: 4px;}
}

/*--- От 375px ---*/
@media screen and (max-width: 375px) {
    .itemtop-box, .si-games {width: 155px;}
    .search_res {text-align: center;}
    .search_res_img {float: none; margin: 0;}
}

/*--- Менее 360px ---*/
@media screen and (max-width: 359px) {
    .itemtop-box, .si-games {width: 128px;}
    .save-buttons input[type="button"] {padding: 7px 10px !important;}
}
/*--- Виджет помощник ---*/
.site-helper {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 990;
    width: 260px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: fadeUnfold 0.4s ease;
    border: 1px solid var(--border-light);
    background: var(--bg-card);
    transition: width 0.3s, background-color 0.3s, border-radius 0.3s, transform 0.3s;
}

/* PNG-карточки — убираем рамку, тень и фон контейнера */
.site-helper.no-frame {
    box-shadow: none;
    border: none;
    background: transparent;
}

.site-helper.minimized {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #2b2b2b; /* Dark neutral color */
    cursor: pointer;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.site-helper.minimized:hover {
    transform: scale(1.05);
    background: #3a3a3a;
}

.site-helper.minimized .promo-card,
.site-helper.minimized .site-helper__close,
.site-helper.minimized .site-helper__pin {
    display: none;
}

.site-helper__open {
    display: none;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    color: #ffd700; /* Gold color for the gift icon */
    cursor: pointer;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.site-helper__open svg {
    width: 20px;
    height: 20px;
}

.site-helper.minimized .site-helper__open {
    display: flex;
}

/* Промо-карточка внутри виджета */
.site-helper .promo-card {
    display: block;
    line-height: 0;
    cursor: pointer;
}

.site-helper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.site-helper__close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s, transform 0.2s;
    z-index: 10;
}

.site-helper__close::before,
.site-helper__close::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 2px;
    background-color: #fff;
    border-radius: 1px;
}

.site-helper__close::before {
    transform: rotate(45deg);
}

.site-helper__close::after {
    transform: rotate(-45deg);
}

.site-helper__close:hover {
    background-color: var(--danger);
    transform: scale(1.1);
}

/* Кнопка закрепки — скрыта по умолчанию, видна при hover или когда активна */
.site-helper__pin {
    position: absolute;
    top: 8px;
    right: 40px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
}

/* Показать при наведении на виджет или когда закреплено */
.site-helper:hover .site-helper__pin,
.site-helper__pin.active {
    opacity: 1;
    pointer-events: auto;
}

.site-helper__pin svg {
    width: 12px;
    height: 12px;
    stroke: #fff;
}

.site-helper__pin:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Активное состояние — закреплено */
.site-helper__pin.active {
    background-color: #ffd700;
}

.site-helper__pin.active svg {
    stroke: #1a1a1a;
}

.site-helper__pin.active:hover {
    background-color: #ffed4a;
}

@media (max-width: 768px) {
    .site-helper {
        display: none !important;
    }
}