/*--- 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');
}

/*--- VARIABLES ---*/
: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-secondary: #6b6b6b;
    --text-muted: #858889;
    
    /* Borders */
    --border-light: #e7e7e7;
    --border-medium: #ddd;
    --border-dark: #101014;
    
    /* Accent */
    --accent: #63b814;
    --accent-hover: #5dc020;
    --accent-dark: #4aa438;
    
    /* Navigation */
    --nav-btn-bg: #cecfd075;
    --nav-btn-active: #000;
    
    /* Tags */
    --tag-bg: #f7f7f7;
    --tag-color: #9a9a9a;
    
    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.1);
    --shadow-strong: rgba(0, 0, 0, 0.2);
    
    /* Inputs */
    --input-border: #ededed;
    
    /* Menu */
    --menu-dropdown-bg: #fff;

    /* Links */
    --link-color: #4a84c4;
    --link-hover: #1172a6;

    /* Danger/Error */
    --danger: #e02424;
    --danger-hover: #c81e1e;
    --danger-bg: #fef2f2;

    /* Success */
    --success: #46a819;
    --success-light: #85c207;

    /* Warning */
    --warning-bg: #fedc80;
    --warning-border: #D2A146;

    /* Text additions */
    --text-placeholder: #9c9c9c;

    /* Ratings */
    --rating-good: #36920c;
    --rating-medium: #b78322;
    --rating-poor: #ca3d19;

    /* Shadows */
    --shadow-sm: 0 1px 3px 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);

    /* Border-radius */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;   /* Hover эффекты: иконки, изображения */
    --transition-normal: 0.3s ease;  /* Стандарт: ссылки, кнопки, меню */
    --transition-slow: 0.4s ease;    /* Панели, side-menu, модалки */

    /* Typography Scale (base: 14px = 1rem) */
    --text-xs: 0.75rem;      /* ~10.5px - мелкие иконки, лейблы */
    --text-sm: 0.857rem;     /* 12px - теги, статусы */
    --text-base: 1rem;       /* 14px - базовый текст */
    --text-md: 1.0625rem;    /* ~15px - слегка увеличенный */
    --text-lg: 1.143rem;     /* 16px - навигация, заголовки секций */
    --text-xl: 1.286rem;     /* 18px - заголовки карточек */
    --text-2xl: 1.429rem;    /* 20px - h3, заголовки блоков */
    --text-3xl: 1.714rem;    /* 24px - h1, крупные названия */

    /* Spacing Scale (base: 4px) */
    --space-1: 2px;          /* Микро: borders, мелкие отступы */
    --space-2: 4px;          /* Малый: между иконками, внутри тегов */
    --space-3: 8px;          /* Стандартный: между элементами */
    --space-4: 12px;         /* Средний: padding карточек */
    --space-5: 16px;         /* Большой: секционные отступы */
    --space-6: 24px;         /* Крупный: между блоками */
    --space-7: 32px;         /* Очень крупный: main sections */
    --space-8: 48px;         /* Максимальный: page margins */

    /* Semantic Spacing (контекстные отступы) */
    --section-gap: var(--space-6);       /* Между секциями: 24px */
    --block-gap: var(--space-5);         /* Между блоками: 16px */
    --element-gap: var(--space-3);       /* Между элементами: 8px */
    --inline-gap: var(--space-2);        /* Между мелкими элементами: 4px */
    --container-padding: var(--space-6); /* Padding контейнеров: 24px */
    --card-padding-sm: var(--space-5);   /* Малый padding карточек: 16px */
    --card-padding: var(--space-6);      /* Padding карточек: 24px */
    --heading-margin: var(--space-6);    /* Margin-bottom заголовков секций: 24px */
    --heading-margin-sm: var(--space-4); /* Margin-bottom подзаголовков: 12px */

    /* Game Hero Poster Sizes */
    --poster-width: 215px;               /* Ширина постера игры */
    --poster-height: 310px;              /* Высота постера игры */

    /* Header Dimensions */
    --header-height: 72px;               /* Высота основного хедера */
    --header-height-tablet: 64px;        /* Высота на планшетах */
    --header-height-mobile: 56px;        /* Высота на мобильных */
    --subnav-height: 42px;               /* Высота sub-nav */
    --subnav-height-mobile: 36px;        /* Высота sub-nav на мобильных */
    --touch-target-min: 44px;            /* Минимальный touch target (Apple HIG) */

    /* Z-Index Scale */
    --z-base: 1;             /* Базовые интерактивные элементы */
    --z-above: 10;           /* Выше базовых (fav-кнопка, badges) */
    --z-dropdown: 100;       /* Dropdown меню, tooltips */
    --z-sticky: 200;         /* Sticky элементы */
    --z-overlay: 900;        /* Overlay фоны */
    --z-modal: 9999;         /* Модальные окна, панели */
    --z-max: 99999;          /* Максимальный (reCAPTCHA, критические) */
    /* Border Radius Scale */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
}

/*--- SET BASE ---*/
* {background: transparent; margin: 0; padding: 0; border: 0; box-sizing: border-box;}
*::selection{background:#fedc80;}
*::-moz-selection{background:#fedc80;}
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); outline: none; background: var(--bg-body);}
img {max-width:100%; max-height: 100%;}
.clearfix {display: flow-root;}
a {color: var(--link-color); text-decoration: none;}
a:hover, a:focus {color: var(--link-hover); text-decoration: none;}
:focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) {outline: none;}
h1 {font-size: var(--text-3xl); font-weight: 500;}
h2 {font-size: var(--text-2xl); font-weight: 500;}
h3 {font-size: var(--text-xl); font-weight: 500;}


/*--- 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(--bg-tertiary); 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::-webkit-input-placeholder {color: transparent}
input:focus::-moz-placeholder {color: transparent}
input:focus:-moz-placeholder {color: transparent}
input:focus:-ms-input-placeholder {color: transparent} 

select {background-color: #fff; height: 30px; border: 1px solid #dadada;}

.imgbox {overflow:hidden; position:relative;}
.imgbox img {width:100%; min-height:100%;}
.img-cover {width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm);}
.img-cover:hover {filter: brightness(0.9); transition: var(--transition-fast);}
.nowrap {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
button {transition: all .2s;}
a, .button {transition: color .4s, background-color .4s, opacity .4s;}
.pm-page, .form-wrap {padding: var(--card-padding) 0;}

/*--- BASIC GRID (Modern Card Layout) ---*/
.wrap {
    max-width: 1200px; /* Slightly wider for modern screens */
    min-width: 320px; 
    position: relative; 
    background: transparent; 
    margin: 0 auto;
}

.mainwrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 300px; /* Main content + Sidebar */
    gap: 24px; /* Space between columns */
    align-items: start;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    overflow: visible;
}

/* Remove old grid areas setup for simpler flex/grid mix if needed, 
   but keeping grid is fine. Just resetting styles. */
.mainwrap > .carusel-box {
    grid-column: 1 / -1; /* Full width */
    margin-bottom: 24px;
}

.main {
    position: relative;
    background-color: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px -1px rgba(0, 0, 0, 0.02), 
        0 0 0 1px rgba(0,0,0,0.03);
    min-width: 0;
    overflow-x: clip; /* Предотвращает горизонтальное переполнение */
}

.right-nav {
    position: relative;
    z-index: 1;
    /* Sidebar content is now inside cards (.block-right), so no background needed here */
}



.info-content { display: flex; justify-content: space-between; position: relative; min-height: 315px; }

/*--- GAME HERO BLOCK (fullstory header) ---*/
/* Old game-hero style removed */
#header { 
    position: relative; 
    margin: 24px auto 24px auto; /* Added top margin for floating effect */
    max-width: 1200px; 
    width: 100%;
    /* Safe area support for iOS devices with notch */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
/*--- HEADER REDESIGN ---*/
.header {
    position: relative;
    background: #1e1e20; /* Fallback */
    background: rgba(30, 30, 32, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 24px 24px 0 0; /* Rounded top only */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    z-index: var(--z-sticky);
}

.header-main {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-height);
    padding: 0 max(var(--space-6), env(safe-area-inset-left)) 0 max(var(--space-6), env(safe-area-inset-right));
    gap: var(--space-4);
}

/* Sub Navigation (Secondary Header Nav) */
.sub-nav {
    background-color: #252527;
    white-space: nowrap;
    overflow: visible;
    border-radius: 0 0 24px 24px; /* Rounded bottom only, matching header */
    z-index: var(--z-above);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.sub-nav::-webkit-scrollbar {
    height: 0;
}

.sub-nav__list {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--subnav-height);
    padding: 0 var(--container-padding);
    gap: var(--space-6);
}

.sub-nav__link {
    font-size: 1.0625em;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.sub-nav__link:hover,
.sub-nav__link:focus {
    color: #fff;
}
.sub-nav__divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}
.carusel-box {position: relative; min-height: 311px; height: auto; margin-bottom: var(--section-gap);}


/*--- HEADER ---*/
/*--- CAROUSEL CLS FIX ---*/
/* Pre-style carousels to match JS layout before initialization */
.head-carusel, .head-carusel2, .fixnews {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    padding-bottom: 5px; /* Prevent scrollbar overlay issues */
}
.head-carusel::-webkit-scrollbar, 
.head-carusel2::-webkit-scrollbar, 
.fixnews::-webkit-scrollbar {
    display: none;
}

/* Default Item Sizes (Desktop) */
.head-carusel > *, .head-carusel2 > *, .fixnews > * {
    flex: 0 0 calc(20% - 13px); /* 5 items minus gap approx */
    min-width: 0; 
}
.head-carusel2 > * {
    flex: 0 0 calc(14.28% - 15px); /* 7 items for fullwidth */
}
.fixnews > * {
    flex: 0 0 calc(25% - 13px); /* 4 items for pinned */
}

/* Tablet */
@media screen and (max-width: 1100px) {
    .head-carusel > * { flex: 0 0 calc(25% - 12px); } /* 4 items */
}
@media screen and (max-width: 960px) {
    .head-carusel > * { flex: 0 0 calc(33.333% - 11px); } /* 3 items */
    .head-carusel2 > * { flex: 0 0 calc(25% - 13px); } /* 4 items */
}

/* Mobile */
@media screen and (max-width: 630px) {
    .head-carusel > *, .fixnews > * { flex: 0 0 calc(50% - 8px); } /* 2 items */
    .head-carusel2 > * { flex: 0 0 calc(33.333% - 11px); } /* 3 items */
}
@media screen and (max-width: 440px) {
    .head-carusel2 > * { flex: 0 0 calc(50% - 8px); } /* 2 items */
}
@media screen and (max-width: 380px) {
    /* Very small screens: 1 or 2 items depending on preference, sticking to 2 for compactness or 1 for readability */
    /* JS config says 0: {items: 1} for standard, let's match that more closely for tiny screens if needed, 
       but 2 usually works fine for posters. JS config: responsive: { 0: {items: 1}, 320: {items: 2} } */
    .head-carusel > * { flex: 0 0 100%; } 
}

/* Hide navigation buttons if they exist in DOM before init (usually they don't, but good safety) */
.carousel-nav { display: none; }
.carousel-initialized .carousel-nav { display: flex; }

/* Reset for initialized carousels (let JS take over) */
.carousel-initialized {
    display: block;
    overflow: visible;
    gap: 0;
}
.carousel-initialized > * {
    flex: none;
    width: auto;
}

/*--- LOGO (Premium) ---*/
.logotype {
    display: flex;
    align-items: center;
    padding-right: 10px;
    gap: 12px;
    text-decoration: none;
    transition: 0.3s;
    flex-shrink: 0; /* Не сжиматься */
}

/* Hover Effect: Icon Only */
.logotype:hover .logo-icon {
    transform: scale(1.1);
    border-color: var(--accent);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(99, 184, 20, 0.3);
}

.logotype:hover {
    /* No transformation on container to keep text static */
    background: transparent; 
}

.logo-icon {
    /* Минимальный touch target для accessibility (Apple HIG: 44px) */
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.1);
    border-image: initial;
    padding: 6px;
    overflow: hidden;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logotype:hover .logo-desc {
    color: rgb(255, 255, 255);
    text-shadow: rgba(255, 255, 255, 0.4) 0px 0px 5px;
}

.logo-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 4px);
}

.logo-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.logo-title {
        font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px;
    display: flex;
    align-items: center;
}

.logo-title span {
    color: var(--accent);
    margin-left: 4px;
    position: relative;
}

.logo-desc {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-top: 4px;
    transition: 0.3s;
}

.menu-head {position: relative; display: flex; align-items: center; justify-content: space-between;}
.menu-headnav {position: relative; font-size: 15px; font-weight: 500;}
.menu-headnav .link {font-size: 16px; padding: 0 14px;}
.menu-headnav .far, .menu-headnav .fas {color:#9e9e9e; padding-left:2px;}
.link.open {color:#fff;}

/*==========================================================================
  MEGA NAVIGATION MENU COMPONENT
  
  Architecture:
  - CSS Custom Properties for theming
  - State management via .is-open class (not inline styles)
  - No !important declarations
  - Clean BEM naming
  - Accessibility: prefers-reduced-motion support
==========================================================================*/

/* Component Variables */
.mega-nav {
    --mn-sidebar-width: 240px;
    --mn-min-height: 480px;
    --mn-max-height: 600px;
    --mn-mobile-height: 80vh;
    --mn-transition-duration: 0.2s;
    --mn-transition-timing: cubic-bezier(0.16, 1, 0.3, 1);
    --mn-gap: 16px;
    --mn-padding: 25px 30px;
    --mn-radius: var(--radius-lg);
}

/* Base - Allow full-width positioning */
.mega-nav,
.mega-nav .menu-headnav {
    position: static;
}

/* Trigger Button (Minimal Capsule) */
.mega-nav__trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Slightly reduced gap since padding is gone */
    padding: 0 14px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.mega-nav__trigger:hover,
.mega-nav__trigger.open {
    color: #fff;
    background: transparent;
    transform: none;
}

.mega-nav__trigger::after {
    content: "\f078";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 10px;
    color: #888;
    transition: color var(--mn-transition-duration) ease, transform var(--mn-transition-duration) ease;
}

.mega-nav__trigger:hover::after {
    color: #fff;
}

.mega-nav__trigger.open {
    color: #fff;
}

.mega-nav__trigger.open::after {
    transform: rotate(180deg);
}

/* Dropdown Container (Premium Glass) - Hidden by default */
.mega-nav__dropdown {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    width: 100%;
    z-index: var(--z-dropdown);
    
    /* Visual - Premium Light Glass */
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 24px;
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.12),
        0 1px 1px rgba(0,0,0,0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    overflow: hidden;
    
    /* Hidden state */
    display: none;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition: 
        opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); /* Subtle elastic bounce */
}

.mega-nav__dropdown:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
    z-index: 10;
}

/* Open State - Controlled via JS class */
.mega-nav__dropdown.is-open {
    display: flex;
    flex-direction: row;
    min-height: var(--mn-min-height);
    opacity: 1;
    transform: translateY(0) scale(1);
}

/*--- Sidebar ---*/
.mega-nav__sidebar {
    width: 260px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, rgba(245, 247, 250, 0.7), rgba(245, 247, 250, 0.3));
    border-right: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.mega-nav__title {
    padding: 10px 15px;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.4);
    letter-spacing: 0.1em;
}

.mega-nav__tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px; /* More gap for capsules */
}

.mega-nav__tab {
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 500;
    font-size: 14px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.mega-nav__tab i {
    width: 22px;
    text-align: center;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.mega-nav__tab:hover {
    background: rgba(255, 255, 255, 0.6);
    color: var(--text-main);
    transform: translateX(2px);
}

.mega-nav__tab:hover i {
    color: var(--text-main);
    transform: scale(1.1);
}

.mega-nav__tab.active {
    background: #fff;
    color: var(--accent-dark);
    font-weight: 600;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 
        0 4px 12px rgba(0,0,0,0.06),
        0 1px 2px rgba(0,0,0,0.04);
}

.mega-nav__tab.active i {
    color: var(--accent);
}

/*--- Content Area ---*/
.mega-nav__content {
    flex: 1;
    background: transparent; /* Seamless glass */
    min-height: var(--mn-min-height);
    max-height: var(--mn-max-height);
    overflow-y: auto;
}

/* Custom Scrollbar - Darker for dark theme */
.mega-nav__content::-webkit-scrollbar {
    width: 6px;
}

.mega-nav__content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}
.mega-nav__content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

.mega-nav__content::-webkit-scrollbar-track {
    background: transparent;
}

/*--- Panels ---*/
.mega-nav__panel {
    display: none;
    padding: var(--mn-padding);
}

.mega-nav__panel.active {
    display: block;
}

/* Panel Header - supports both semantic <header> and .mega-nav__panel-header */
.mega-nav__panel > header,
.mega-nav__panel-header {
    margin-bottom: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mega-nav__panel > header h3,
.mega-nav__panel-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.mega-nav__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    border-radius: 4px;
}

/*--- Tags Grid ---*/
.mega-nav__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.mega-nav__link {
    display: flex;
    align-items: center;
    gap: 8px; /* Отступ между иконкой и текстом */
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid transparent;
    border-radius: 8px; /* Smooth rounded */
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.3;
    transition: all 0.3s ease;
}

.mega-nav__link i {
    font-size: 14px;
    color: var(--text-muted);
    width: 18px; /* Фиксированная ширина для выравнивания */
    text-align: center;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.mega-nav__link:hover i {
    color: var(--accent);
}

.mega-nav__link:hover {
    background: #fff; /* Brighter on hover */
    color: var(--text-main);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.05);
}

/*--- Categories Split Layout ---*/
.categories-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.categories-column {
    display: flex;
    flex-direction: column;
}

.categories-column__title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: var(--mn-gap);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.categories-column .mega-nav__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.categories-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.category-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 14px;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border: 1px solid transparent;
}

.category-item:hover {
    background: #fff;
    color: var(--accent);
    border-color: rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 20px rgba(0, 0, 0, 0.06),
        0 2px 4px rgba(0, 0, 0, 0.02);
}

.category-item i {
    width: 24px;
    color: rgba(0, 0, 0, 0.3);
    font-size: 18px;
    transition: all 0.3s ease;
}

.category-item:hover i {
    color: var(--accent);
    transform: scale(1.15) rotate(5deg);
}

/*--- Years Panel ---*/
.years-container {
    display: flex;
    flex-direction: column;
    gap: var(--mn-gap);
}

/*--- Years Group & Tags ---*/
.years-group {
    position: relative;
    margin-bottom: 12px;
}

.years-head {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.years-head span {
    font-weight: 500;
    color: var(--text-muted);
    font-size: .9em;
}

/* Glass Divider Line */
.years-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.06);
}

.years-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 6px;
}

.year-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 36px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-main);
    background: rgba(0, 0, 0, 0.03); /* Slightly darker default */
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}

.year-tag:hover {
    background: #fff;
    border-color: var(--accent);
    color: var(--accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99, 184, 20, 0.15);
}

.year-tag--current {
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    border-color: var(--accent);
}

.year-tag--current:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}

.year-tag--retro {
    background: var(--text-secondary);
    color: #fff;
    border-color: transparent;
}

.mega-nav__panel .years-group {
    margin-bottom: 0;
}

.mega-nav__panel .years-grid {
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
}

/*--- Mobile Header (Hidden on Desktop) ---*/
.mega-nav__mobile-header {
    display: none;
}

.mobile-close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-muted);
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background var(--mn-transition-duration), color var(--mn-transition-duration);
}

.mobile-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-main);
}

/*==========================================================================
  MEGA NAV - RESPONSIVE (Mobile)
==========================================================================*/
@media screen and (max-width: 768px) {
    .mega-nav__dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: var(--mn-mobile-height);
        border-radius: var(--mn-radius) var(--mn-radius) 0 0;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
        z-index: var(--z-modal);
        
        /* Mobile closed state */
        transform: translateY(100%);
    }
    
    .mega-nav__dropdown.is-open {
        flex-direction: column;
        transform: translateY(0);
        min-height: auto;
    }
    
    /* Mobile Header - Visible */
    .mega-nav__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        background: var(--bg-card);
        border-bottom: 1px solid var(--border-light);
        z-index: 20;
        flex-shrink: 0;
    }
    
    .mega-nav__mobile-header span {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-main);
    }
    
    /* Sidebar becomes horizontal tabs */
    .mega-nav__sidebar {
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-light);
        padding: 10px 15px;
        background: var(--bg-card);
        flex-shrink: 0;
    }
    
    .mega-nav__title {
        display: none;
    }
    
    .mega-nav__tabs {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 5px;
        gap: 8px;
        scrollbar-width: none;
    }
    
    .mega-nav__tabs::-webkit-scrollbar {
        display: none;
    }
    
    .mega-nav__tab {
        white-space: nowrap;
        background: var(--bg-secondary);
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 20px;
    }
    
    .mega-nav__tab.active {
        background: var(--text-main);
        color: #fff;
        box-shadow: none;
    }
    
    .mega-nav__tab.active i {
        color: #fff;
    }
    
    /* Content Area */
    .mega-nav__content {
        flex: 1;
        min-height: 0;
        padding: 20px;
        overflow-y: auto;
        padding-bottom: calc(20px + env(safe-area-inset-bottom));
        max-height: none;
    }
    
    /* Grids */
    .mega-nav__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .mega-nav__panel .years-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }
    
    .categories-split {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    

}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    .mega-nav__tab,
    .mega-nav__link,
    .category-item,
    .search__form,
    .search__overlay,
    .search__toggle,
    .search__input-wrapper,
    .search__submit,
    .search__clear {
        transition: none;
    }
}


.selyears-item {font-size: 15px; cursor: pointer;}
.selyears-item a {display: block; color: var(--text-main);}
.selyears-item .ym {padding: 8px 0; font-weight: 500;}
.selyears {position: relative; display: block; padding: 8px 18px 8px 0; font-size: 15px; font-weight: 500; color: var(--text-main);}
.selyears:before {position: absolute; content: "\f105"; font-family: 'Font Awesome 6 Pro'; font-weight: 900; top: 50%; right: 0; transform: translateY(-50%); color: #d2d2d2;}
.selyears.open:before {transform: translateY(-50%) rotate(90deg);}
.selyears-content {display: none;padding: 8px 0;border-top: 1px dashed var(--border-light);}
.years-item {display: block; padding: 5px 25px 5px 10px; background-color: transparent; transition: var(--transition-normal); border-radius: 4px;}
.years-item:hover {background-color: rgba(0,0,0,.1);}

.link {position: relative; color: #b8b8b8; display: inline-flex; align-items: center; cursor: pointer; letter-spacing: 0.3px; padding: 6px 0; gap: var(--inline-gap); transition: var(--transition-normal);}
.link:hover {color: #fff;}
.link:after {content: "\f078"; font-family: "Font Awesome 6 Pro"; font-weight: 600; font-size: 10px; color: #888; transition: var(--transition-normal);}
.link:hover:after {color: #fff;}

/*==========================================================================
  SEARCH COMPONENT
  
  Architecture:
  - Desktop: inline capsule form in header
  - Tablet (<=1130px): toggle button, form shows in fixed position
  - Mobile (<=690px): fullscreen search overlay
  
  Accessibility:
  - ARIA labels and roles
  - Focus management
  - Keyboard navigation (Escape to close)
  - Reduced motion support
==========================================================================*/

/* Component Variables */
.search {
    --search-height: 44px;
    --search-bg: rgba(255, 255, 255, 0.04);
    --search-bg-hover: rgba(255, 255, 255, 0.08);
    --search-bg-focus: rgba(30, 30, 35, 0.95);
    --search-border: rgba(255, 255, 255, 0.08);
    --search-border-hover: rgba(255, 255, 255, 0.15);
    --search-border-focus: var(--accent);
    --search-text: #e5e5e5;
    --search-placeholder: rgba(255, 255, 255, 0.3);
    --search-icon: rgba(255, 255, 255, 0.4);
    --search-transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    position: relative;
    display: flex;
    align-items: center;
}

/* ==========================================================================
   SEARCH TOGGLE BUTTON
   - Now OUTSIDE the .search container for better mobile layout control
   - Hidden on desktop, visible on tablet/mobile via media queries
   ========================================================================== */
.search__toggle {
    display: none; /* Hidden on desktop */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
    cursor: pointer;
    transition: all 0.25s ease;
    /* Prevent shrinking and set order */
    flex-shrink: 0;
    order: 0;
}

.search__toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.search__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Active state when search is open (class added via JS) */
.search__toggle.is-active {
    color: var(--accent);
    background: rgba(99, 184, 20, 0.15);
    border-color: rgba(99, 184, 20, 0.3);
}

/* ==========================================================================
   SEARCH FORM (Desktop: inline, Mobile: overlay)
   ========================================================================== */
.search__form {
    position: relative;
    display: flex;
    align-items: center;
    width: 240px; /* Уменьшено для предотвращения переполнения хедера */
    flex-shrink: 1; /* Может сжиматься при необходимости */
    min-width: 180px;
    transition: all var(--search-transition);
}

.search__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--search-height);
    background: var(--search-bg);
    border: 1px solid var(--search-border);
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all var(--search-transition);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
}

.search__input-wrapper:hover {
    background: var(--search-bg-hover);
    border-color: var(--search-border-hover);
    box-shadow: 
        inset 0 1px 1px rgba(255, 255, 255, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.1);
}

.search__input-wrapper:focus-within {
    background: var(--search-bg-focus);
    border-color: var(--search-border-focus);
    box-shadow: 
        0 0 0 4px rgba(99, 184, 20, 0.15),
        0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   SEARCH INPUT
   ========================================================================== */
.search__input {
    flex: 1;
    width: 100%;
    height: 100%;
    padding: 0 var(--space-5) 0 calc(var(--touch-target-min) + 4px);
    background: transparent;
    border: none;
    border-radius: 100px;
    color: var(--search-text);
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.search__input::placeholder {
    color: var(--search-placeholder);
    font-weight: 400;
    transition: color 0.2s ease;
}

.search__input:focus {
    color: #fff;
    outline: none;
}

.search__input:focus::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

/* Hide default search cancel button in WebKit */
.search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

/* ==========================================================================
   SEARCH SUBMIT BUTTON
   ========================================================================== */
.search__submit {
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--search-icon);
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
}

.search__submit:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.search__input-wrapper:focus-within .search__submit {
    color: var(--accent);
}

.search__submit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ==========================================================================
   SEARCH CLEAR BUTTON
   ========================================================================== */
.search__clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    visibility: hidden;
}

.search__clear:not([hidden]) {
    opacity: 1;
    visibility: visible;
}

.search__clear:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   SEARCH CLOSE BUTTON (Mobile only)
   ========================================================================== */
.search__close {
    display: none; /* Hidden on desktop */
}

/* ==========================================================================
   SEARCH OVERLAY (Mobile only)
   ========================================================================== */
.search__overlay {
    display: none; /* Hidden on desktop */
}

/* ==========================================================================
   SEARCH SUGGESTIONS (Results dropdown)
   ========================================================================== */
.search-item {position: relative; padding-left: 90px; min-height: 80px; overflow: hidden;}
.search-img {float: left; margin-left: -90px; width: 80px; height: 80px;}
.search-img img {width: 80px; height: 80px; border-radius: var(--radius-sm); object-fit: cover;}
.search-body {overflow: hidden; padding-top: 4px;}
.search-body .name {display: block; font-size: 16px; font-weight: 500; line-height: 20px; color: var(--text-main);}
.search-line {font-size: 14px; margin-top: 8px;}
.search-line .size {color: #929292;}

/* Search Page - Full width block */
.search-page {
    width: 100%;
    padding: var(--element-gap);
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--element-gap);
}
/* Flex-content с search-page: блок поиска выходит из grid */
.flex-content:has(.search-page) {
    display: block;
}
.flex-content:has(.search-page) .search-page {
    margin-bottom: 24px;
}
.flex-content:has(.search-page) .card-search {
    display: inline-block;
    vertical-align: top;
    width: calc(25% - 15px);
    margin: 0 7.5px 20px;
}
@media (max-width: 1200px) {
    .flex-content:has(.search-page) .card-search { width: calc(33.333% - 15px); }
}
@media (max-width: 900px) {
    .flex-content:has(.search-page) .card-search { width: calc(50% - 15px); }
}
@media (max-width: 500px) {
    .flex-content:has(.search-page) .card-search { width: 100%; margin: 0 0 20px; }
}
.search-page h1 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-main);
}
.search-page .searchtable {
    width: 100%;
}
.search-page .search {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 !important;
}
.search-page .search input[type="text"] {
    flex: 1;
    min-width: 200px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 16px;
    background: var(--bg-secondary);
    color: var(--text-main);
}



/*--- User Panel (Compact Premium Glass) ---*/
.user-panel {
    position: relative;

    z-index: var(--z-dropdown);
    flex-shrink: 0; /* Не сжиматься */
}

.user-panel__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 12px 4px 4px;
    border-radius: 100px; /* Capsule */
    transition: all 0.3s ease;
    background: transparent;
    border: 1px solid transparent;
}

.user-panel__trigger:hover, .user-panel__trigger.active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .user-panel__trigger {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.1);
        padding: 2px 8px 2px 2px;
    }
}

.user-panel__avatar-img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.1);
}

.user-panel__arrow {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-panel__trigger.active .user-panel__arrow {
    transform: rotate(180deg);
    color: #fff;
}

/* Guest Trigger */
.user-panel__guest-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    transition: all 0.3s ease;
}

.user-panel__trigger:hover .user-panel__guest-icon {
    background: var(--accent);
    color: #fff;
}

.user-panel__guest-text {
    font-weight: 500;
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    display: none; /* Hide text for cleaner look, or keep if preferred */
}
@media (min-width: 1024px) {
    .user-panel__guest-text { display: block; }
}

/* Dropdown Base */
.user-panel__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 260px;
    /* Visual - Light Glass */
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    box-shadow: 
        0 20px 50px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    animation: fadeUp 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top right;
}

.user-panel__dropdown:before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.05), transparent);
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logged In Card */
.user-panel__card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 15px;
    background: linear-gradient(to bottom, rgba(245, 247, 250, 0.5), rgba(245, 247, 250, 0.1));
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.user-panel__card-avatar img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.user-panel__card-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-main);
    line-height: 1.2;
    margin-bottom: 3px;
}

.user-panel__card-role {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.user-panel__card-role:hover { color: var(--accent); }

/* Navigation */
.user-panel__nav {
    list-style: none;
    padding: 8px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-panel__nav li a {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
}

.user-panel__nav li a:hover {
    background: #fff;
    color: var(--text-main);
    transform: translateX(4px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.user-panel__nav li a i {
    width: 24px;
    text-align: center;
    color: var(--text-muted);
    margin-right: 12px;
    font-size: 15px;
    transition: color 0.2s ease;
}

/* Hover colors specific for each item */
.user-panel__nav li a:hover i {
    color: var(--accent);
}

/* Specific colors for specific interactions */
.user-panel__nav li a[href*="favorites"]:hover i { color: var(--danger); }




.user-panel__logout-wrap {
    margin: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.user-panel__logout-link {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    color: #ef4444; /* Standard danger red */
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    transition: all 0.2s ease;
    text-decoration: none;
    background: transparent;
}

.user-panel__logout-link i {
    width: 24px;
    text-align: center;
    color: #ff5b5b;
    margin-right: 12px;
    font-size: 14px;
    transition: transform 0.2s ease;
}

.user-panel__logout-link:hover {
    background: rgba(239, 68, 68, 0.08); /* Light red tint */
    color: #dc2626;
}

.user-panel__logout-link:hover i {
    transform: translateX(2px);
}

/* Guest Form (Compact + Glass) */
.user-panel__dropdown--guest {
    padding: 20px;
    width: 280px;
}

.user-panel__login-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 15px;
}

.user-panel__field {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 100px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.5);
    outline: none;
    color: var(--text-main);
    transition: all 0.3s ease;
}

.user-panel__field:focus { 
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 2px 8px rgba(99, 184, 20, 0.15);
}

.user-panel__field::placeholder {
    color: #9ca3af;
}

.user-panel__submit-btn {
    width: 100%;
    height: 40px;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.3);
}
.user-panel__submit-btn:hover { 
    background: var(--accent-hover); 
    box-shadow: 0 6px 16px rgba(99, 184, 20, 0.5);
    transform: translateY(-1px);
}

.user-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.user-panel__socials-row {
    display: flex;
    gap: var(--inline-gap);
}

.usp-soc {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
}
.usp-soc.vk { background: #0077ff; }
.usp-soc.go { background: #E94F43; }
.usp-soc.ya { background: #fc0; }
.usp-soc:hover { opacity: 0.9; }

.user-panel__links-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
}

.user-panel__links-col a {
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
}
/* Theme Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Уменьшенный размер для соответствия другим элементам */
    width: 36px;
    height: 36px;

    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0; /* Не сжиматься! */
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: scale(1.08);
}
.theme-toggle:active {
    transform: scale(0.95);
}
.theme-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Светлая тема: показываем луну (переключить на тёмную) */
.theme-icon--moon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}
.theme-icon--sun {
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}
/* Тёмная тема: показываем солнце (переключить на светлую) */
.dark .theme-icon--moon {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}
.dark .theme-icon--sun {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/*--- MAIN NAVIGATION (PREMIUM CAPSULE) ---*/
.main-nav {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 var(--space-6);
}

.main-nav__list {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.05);
    /* Высота соответствует поиску (44px) */
    height: 44px;
}

.main-nav__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    border-radius: 100px;
    background: transparent;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid transparent;
}

.main-nav__link i {
    font-size: 14px;
    color: #6b7280;
    transition: all 0.3s ease;
}

/* Hover State */
.main-nav__link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.main-nav__link:hover i {
    transform: scale(1.1) rotate(5deg);
}

/* Active/Focus State */
.main-nav__link:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.05);
}

/* Specific Accent Colors on Hover */
.main-nav__link[href*="new-games"]:hover i { 
    color: #ef4444; 
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.main-nav__link[href*="top-actual"]:hover i { 
    color: #f59e0b; 
    text-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.main-nav__link[href*="all-top"]:hover i { 
    color: #3b82f6; 
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

/*--- HEADER TOOLS ---*/
.menu-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Order elements for optimal mobile layout */
.menu-head .search { order: 1; }
.menu-head .search__toggle { order: 2; }
.menu-head .theme-toggle { order: 3; }
.menu-head .user-panel { order: 4; }

/* Old search styles removed - now using .search component above */

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



/* Карточка в карусели */
.item-top {
    display: block;
    width: 140px;
    height: 242px;
    overflow: hidden;
}
.item-top .imgbox {
    height: 198px;
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-3);
}
.item-top .imgbox:hover {filter: brightness(0.9); transition: var(--transition-fast);}

/* Название: 2 строки с min-height */
.item-top__title {
    position: relative;
    font-weight: 500;
    min-height: 2.6em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item-top__title a {color: var(--text-main);}
.item-top__title a:hover {color: var(--link-hover);}
.item-top:hover .item-top__title a {color: var(--link-hover);}

.category-header {position: relative;}

/* Сетка карточек: современный flexbox с gap */
.flex-content, .flexstatic {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px; /* Increased gap for better card separation */
    margin-top: 24px;
}

.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; }
.load-more-btn:hover { background: #555; }

.ddprev, .ddnext {background: transparent; border: 2px solid #ccc; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #000000; cursor: pointer; transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;}
.ddprev[data-page]:hover, .ddnext[data-page]:hover {background-color: #333; border-color: #333; color: #fff;}
.ddprev:not([data-page]), .ddnext:not([data-page]) {border-color: #e9e9e9; color: #aaa; cursor: not-allowed;}

.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: 21px; font-weight: 700; color: #000;}
.catheader h2 {font-size: 21px; font-weight: 700; color: #000;}
.subtitle {display: block; margin-top: 5px; font-size: 16px; color: var(--text-muted);}

.catnewscount {color: #7b7b7b; 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;}

/*--- SHORT News (Modern Card) ---*/
.card-game {
    position: relative;
    cursor: pointer;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02),
        0 2px 4px -1px rgba(0, 0, 0, 0.02),
        0 0 0 1px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
}

.card-game:hover {
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 
        0 8px 16px -4px rgba(0, 0, 0, 0.08),
        0 4px 8px -2px rgba(0, 0, 0, 0.04),
        0 0 0 1px rgba(0,0,0,0.02);
    z-index: 2;
}

.card-game__poster {
    position: relative; 
    display: block; 
    overflow: hidden; 
    font-size: 0;
    aspect-ratio: 5 / 7; /* Slightly shorter than 2/3 (which is roughly 5/7.5) */
    margin: 0; 
    border-radius: 0;
    background: #f0f0f0; 
}

.card-game__poster img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-game:hover .card-game__poster img {
    transform: scale(1.03); /* Minimal zoom */
}

/* Content Area */
.card-game__body {
    padding: 10px 12px;
    background: #fff;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-top: 1px solid rgba(0,0,0,0.03);
    z-index: 1;
}

/* Title Area */
.card-game__title {
    padding: 0;
    margin: 0;
    width: 100%;
}

.card-game__title a {
    display: block; /* Changed from -webkit-box for better flow */
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-main);
    font-size: 15px; /* Slightly larger */
    font-weight: 700;
    line-height: 1.5; /* Better line height */
    text-decoration: none;
    transition: color 0.2s ease;
    letter-spacing: -0.01em; /* Tighter tracking */
}

/* Hover on CARD triggers title color change */
.card-game:hover .card-game__title a {
    color: var(--accent); 
}

/* New Badge (Бейдж "Новинка") */
.card-game__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #000;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 5;
    backdrop-filter: blur(4px);
}
/* New Badge (Green/Accent variant if needed, but white looks premium on posters) */


.card-search {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: var(--element-gap);
    margin: 0;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.card-search .rate-stars {margin-bottom: 6px; margin-left: -2px; vertical-align: baseline;}
.card-search__poster {
    width: 100%;
    height: 180px;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
}
.card-search__poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-fast);
}
.card-search__poster:hover img {filter: brightness(0.9);}
.card-search__title {margin-bottom: 8px;}
.card-search__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-main);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
} 
.card-search__subtitle {color: var(--text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 8px;}
.card-search__desc {
    color: var(--text-muted);
    line-height: 1.4;
    font-size: 14px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-search__actions {margin-top: auto; padding-top: 10px;}
.card-search__link {font-size: 14px; color: var(--link-color); font-weight: 500;}
.card-search__link:hover {color: var(--link-hover);}

.short-upd {position: relative; display: flex; width: 100%; height: auto;}
.short-upd__imgs {width: 140px; height: 196px;}
.short-upd__body {display: flex; flex-direction: column; align-items: flex-start; margin-left: 20px;}
.short-upd__body .name {display: block; font-size: 24px; font-weight: 700; color: var(--text-main); margin: var(--space-3) 0;}
.short-upd__body .name:hover {color: #000;}
.short-upd__body .cat {height: 22px; overflow: hidden; display: block;}
.short-upd__body .cat a {display: inline-block; line-height: 22px; padding: 0 7px; color: var(--tag-color); background-color: var(--tag-bg); margin-right: 2px; border-radius: var(--radius-xs); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px;}
.short-upd__body .cat a:hover {color: #000;}
.short-upd__body .side-two {font-size: 1.0625em; margin-top: 12px;}
.short-upd__label {font-size: 14px; text-transform: uppercase; color: #000; font-weight: 500; background: #ffe486; padding: 0 4px; display: table; margin-bottom: 10px;}
.short-upd__date {margin-bottom: 4px;}
.short-upd__info {margin-top: var(--space-6); color: var(--text-secondary);}
.side-updinfo span {color: #000; font-size: 16px; font-weight: 500;}
.short-upd__divider {width: 100%; height: 1px; background-color: var(--border-light); margin: var(--card-padding) 0;}

/*--- FULL News ---*/


/*--- GAME HERO: Poster ---*/
.game-hero__poster {
    position: relative;
    width: var(--poster-width, 215px);
    height: var(--poster-height, 310px);
    flex-shrink: 0;
}

.game-hero__poster .imgbox {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background-size: cover;
    background-position: center;
}

/*--- GAME HERO: Edit Button ---*/
.publ-edit {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-end: var(--space-3);
    opacity: 0;
    font-size: 1.25rem;
    z-index: 1;
    transition: opacity var(--transition-fast);
}

.publ-edit i {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.card-game:hover .publ-edit,
.game-hero__poster:hover .publ-edit,
.imgbox:hover .publ-edit,
.related-card:hover .publ-edit,
.related-card__media:hover .publ-edit {
    opacity: 1;
}

/*--- GAME HERO: Language Badge ---*/
.lang_ru {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-start: var(--space-2);
    width: 54px;
}

.pingame {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    width: 18px;
    height: 18px;
    background: url('/templates/dbtemplates/images/pin-icon.png') center/contain no-repeat;
}

/*--- GAME HERO: Year Badge ---*/
.short_year {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.1);
    z-index: 1;
}

/*--- GAME HERO: Notice Box ---*/
.notice-box {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
}

.notice-box .fa-check-circle {
    background-color: #608c0c;
    color: #8fce15;
    border-radius: 50%;
    font-size: 1.4375rem;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
}

.notice-box .fa-clock {
    background-color: #ad2d06;
    color: #ff6130;
    border-radius: 50%;
    font-size: 1.3125rem;
    box-shadow: 0 2px 2px rgba(0,0,0,.25);
}

/*--- HERO COMPONENT (New Redesign) ---*/
.game-hero {
    position: relative;
    margin-bottom: var(--section-gap);
    isolation: isolate; 
}



.game-hero__wrap {
    position: relative;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
}

/* Visual Column */
.game-hero__visual {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.game-hero__poster-wrap {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    aspect-ratio: 2/3;
    background: #eee;
}

.game-hero__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Actions Overlay on Poster */
.game-hero__actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.game-hero__action-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
}

.game-hero__action-btn:hover {
    background: #fff;
    color: var(--accent);
    transform: scale(1.1);
}

.game-hero__action-btn--active {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

.game-hero__action-btn--active:hover {
    background: var(--danger-hover);
    border-color: var(--danger-hover);
    color: #fff;
}

.game-hero__edit-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Badge on poster */
/* Badge on poster */
.game-hero__lang-sticker {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    z-index: 10;
    pointer-events: auto;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, background 0.2s ease;
    cursor: help;
}

.game-hero__lang-sticker:hover {
    transform: translateY(-2px);
    background: rgba(0, 0, 0, 0.85);
}

.game-hero__lang-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #fff 33.3%, #0039A6 33.3%, #0039A6 66.6%, #D52B1E 66.6%);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
    flex-shrink: 0;
}

.game-hero__lang-info {
    display: flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.game-hero__lang-info span {
    letter-spacing: 0.5px;
}

/* Modifiers */
.game-hero__lang-sticker--full {
    border-color: rgba(143, 206, 21, 0.3);
}

/* Content Column */
.game-hero__content {
    display: flex;
    flex-direction: column;
}


.game-hero__title {
    grid-column: 1 / -1;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-main);
    letter-spacing: -0.5px;
}

.game-hero__tags {
    display: flex;
    gap: 8px;
    align-items: center;
}

.game-hero__status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-secondary);
    border: 1px solid rgba(0, 0, 0, 0.05);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.game-hero__status-tag--license { 
    background: #2d3436; 
    color: #fff;
    border-color: #2d3436;
}

.game-hero__status-tag--early { 
    background: rgba(255, 159, 67, 0.1); 
    color: #e58e26; 
    border-color: rgba(255, 159, 67, 0.2);
}

.game-hero__status-tag--full { 
    background: rgba(33, 150, 83, 0.1); 
    color: #219653; 
    border-color: rgba(33, 150, 83, 0.2);
}

/* Version Row */
.game-hero__version-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.game-hero__ver-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.game-hero__status-row {
    display: flex;
    gap: 8px;
}

.game-hero__ver-pill {
    background: var(--text-main);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
}

.game-hero__ver-new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 20px;
    background: #e14039;
    color: #fff;
    white-space: nowrap;
}

.game-hero__ver-lang {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Info Grid */
.game-hero__info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.game-hero__info-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.game-hero__info-cell--full {
    grid-column: 1 / -1;
}

.game-hero__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    font-weight: 600;
}

.game-hero__value {
    font-size: 15px;
    color: var(--text-main);
    font-weight: 500;
    line-height: 1.4;
}

.game-hero__value--tags a {
    display: inline-block;
    color: var(--text-secondary);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    margin-right: 6px;
    transition: 0.2s;
}

.game-hero__value--tags a:hover {
    color: var(--accent);
    border-color: var(--accent);
}

/* Steam Section */
.game-hero__steam {
    display: flex;
    align-items: center;
    color: rgb(255, 255, 255);
    background: rgba(0, 0, 0, 0.03);
    border-radius: 12px;
    padding: 12px 16px;
    gap: 12px;
    transition: transform 0.2s;
    margin-bottom: 20px;
}

.game-hero__steam-icon {
    font-size: 28px;
    color: #000;
}

.game-hero__steam-data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: auto;
}

.game-hero__steam-score {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
}
.game-hero__steam-score--pos { color: var(--success); }
.game-hero__steam-score--mix { color: var(--rating-medium); }
.game-hero__steam-score--neg { color: var(--danger); }

.game-hero__summary {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    margin-bottom: 0;
}
.game-hero__summary--pos { color: var(--success); }
.game-hero__summary--mix { color: var(--rating-medium); }
.game-hero__summary--neg { color: var(--danger); }

.game-hero__steam-btm {
    font-size: 12px;
    color: var(--text-muted);
}

/* Footer / Notice */

.game-hero__notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.3;
}

.game-hero__notice--updated {
    background: rgba(99, 184, 20, 0.1);
    color: var(--accent-dark);
}

.game-hero__notice--waiting {
    background: rgba(255, 193, 7, 0.1);
    color: #b78322;
}

.game-hero__notice-icon {
    font-size: 24px;
}

.game-hero__notice-txt {
    display: flex;
    flex-direction: column;
}

.game-hero__notice a {
    font-size: 0.85em; 
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    color: inherit;
    align-self: flex-start;
    opacity: 0.85;
    transition: all 0.2s ease;
}

.game-hero__notice strong {
    font-weight: 500;
}

.game-hero__notice a:hover {
    opacity: 1;
    border-bottom-style: solid;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .game-hero__wrap {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px;
        gap: 24px;
    }
    
    .game-hero__visual {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    .game-hero__poster-wrap {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    
    .game-hero__title {
        font-size: 26px;
        text-align: center;
        margin-bottom: 8px;
    }

    .game-hero__content {
        align-items: center;
        text-align: center;
    }

    .game-hero__tags {
        justify-content: center;
    }
    
    .game-hero__version-row {
        justify-content: center;
    }
}

.rel_network {display: block; margin: var(--space-6) 0;}
.net_header {display: inline-block; background: #fedc80; padding: 3px 5px; color: #000; font-weight: 500;}
.net_header i {margin-left: 4px; transform: rotate(180deg);}
a.net_header:hover {color: #75580a;}

.net_url {display: block; margin-top: 12px;}
.short-net {position: relative; display: flex; width: 100%; height: auto; border-radius: 4px;}
.short-net__imgs {width: 115px;height: 152px;}
.short-net__body {display: flex; flex-direction: column; align-items: flex-start; margin-left: 20px;}
.short-net__body .name {display: block;font-size: 24px;font-weight: 700;color: var(--text-main);margin: 4px 0 8px 0;}
.short-net__body .name:hover {color: var(--link-hover);}
.short-net__body .short-net__buttons {height: 22px; overflow: hidden; display: block;}
.short-net__body .short-net__buttons a {display: inline-block; line-height: 22px; padding: 0 7px; color: var(--tag-color); background-color: var(--tag-bg); margin-right: 2px; border-radius: var(--radius-xs); max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px;}
.short-net__body .short-net__buttons a:hover {color: #000;}
.short-net__body .side-two {font-size: 1.0625em;margin-bottom: var(--space-4);}
.short-net__info {margin-bottom: 10px; color: var(--text-secondary);}
.short-net__info .short-upd__label {text-transform: inherit;}
.short-net__info .short-net__version {color: #000; font-size: 16px; font-weight: 500;}
.side_net-updinfo .s_updnover {color: #646464; font-size: 14px;}

/*--- Game Description (Minimalist) ---*/
.game_desc {
    position: relative;
    margin: var(--space-6) 0 var(--section-gap) 0;
    color: var(--text-main);
    font-size: 1.0625rem; /* ~17px */
    line-height: 1.75;
    font-weight: 400;
}

.game_desc p {
    margin-bottom: 1.5em;
    padding-bottom: 0;
}
.game_desc p:last-child {
    margin-bottom: 0;
}

/* Clean Typography */
.game_desc h1, .game_desc h2, .game_desc h3, .game_desc h4 {
    color: var(--text-main);
    font-weight: 700;
    margin: 1.5em 0 0.75em;
    line-height: 1.3;
}
.game_desc h2 { font-size: 1.5rem; }
.game_desc h3 { font-size: 1.25rem; }

/* Remove orange color for minimalist look, keep bold */
.game_desc strong, .game_desc b {
    font-weight: 700;
    color: var(--text-main);
}
.cat-game b { color: #F96B4A; } /* Keep for cat-game */

.game_desc a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}
.game_desc a:hover {
    border-bottom-color: var(--accent);
    color: var(--accent-hover);
}

/* Lists */
.game_desc ul, .game_desc ol {
    margin-bottom: 1.5em;
    padding-left: 1.25em;
}
.game_desc ul li {
    list-style: disc; /* Minimalist circle */
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}
.game_desc ol li {
    list-style: decimal;
    margin-bottom: 0.5em;
    padding-left: 0.5em;
}

/* Collapsible State */
.game_desc--collapsible {
    max-height: 320px; /* ~11 строк текста */
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.game_desc--collapsible::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--bg-main));
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.game_desc--expanded {
    max-height: 4000px; /* Достаточно большое значение для любого текста */
}

.game_desc--expanded::after {
    opacity: 0;
}

/* Toggle Button */
.game_desc__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game_desc__toggle:hover {
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.2);
    border-style: solid;
}

:root[class~="dark"] .game_desc__toggle:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.game_desc__toggle.active {
    border-style: solid;
    border-color: var(--border-light);
}

.game_desc__toggle i {
    transition: transform 0.2s ease;
}

.game_desc__toggle.active i {
    transform: rotate(180deg);
}

/* Hide toggle when not needed */
.game_desc__toggle.hidden {
    display: none;
}

.game_desc.expand {margin-bottom: 30px;}
.expand {height: auto !important;}

/*--- Screenshots Block (Redesigned) ---*/
.game-screenshots {
    margin-bottom: var(--space-6);
}

.game-screenshots__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: var(--section-gap) 0 var(--space-4) 0;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}
.game-screenshots__title::before {
    content: '\f03e'; 
    font-family: "Font Awesome 6 Pro"; 
    font-weight: 400;
    color: var(--accent);
}

.game-screenshots__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
}

/* Screenshot Items (Anchors) */
.game-screenshots__list > a.fresco,
.game-screenshots__hidden > a.fresco {
    display: block;
    width: calc((100% - 24px) / 3); /* 3 columns with 12px gap */
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    overflow: hidden;
    position: relative;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    margin: 0;
}

/* Hidden container */
.game-screenshots__hidden {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    height: 0;
    overflow: hidden;
    transition: height 0.4s ease;
    margin-top: 0;
}
/* When expanding via JS setting height */
.game-screenshots__hidden.is-expanded {
    height: auto !important;
    margin-top: 12px;
}

/* Image styling */
.game-screenshots__list img,
.game-screenshots__hidden img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Parent handles radius */
    margin: 0;
    display: block;
    transition: transform 0.5s ease, filter 0.3s ease;
    box-shadow: none;
}

/* Hover Effects */
.game-screenshots__list > a.fresco:hover,
.game-screenshots__hidden > a.fresco:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    z-index: 5;
}
.game-screenshots__list > a.fresco:hover img,
.game-screenshots__hidden > a.fresco:hover img {
    transform: scale(1.05);
}

/* Show More Button */
.game-screenshots__toggle {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: static;
}

.game-screenshots__toggle:hover {
    color: var(--text-main);
    border-color: rgba(0, 0, 0, 0.2); /* Slightly darker border */
    border-style: solid;
}
:root[class~="dark"] .game-screenshots__toggle:hover {
     border-color: rgba(255, 255, 255, 0.15);
}

.game-screenshots__toggle.active {
    border-style: solid;
    border-color: var(--border-light);
}

.game-screenshots__toggle i {
    transition: transform 0.2s ease;
}
.game-screenshots__toggle.active i {
    transform: rotate(180deg);
}


/*--- Video Block (Redesigned) ---*/
.game-video {
    margin-bottom: var(--section-gap);
}

.game-video__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: var(--section-gap) 0 var(--space-4) 0;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 12px;
}
.game-video__title::before {
    content: '\f03d'; /* Video icon */
    font-family: "Font Awesome 6 Pro"; 
    font-weight: 400;
    color: var(--accent);
}

.game-video__wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    background: #000; /* Placeholder bg */
}

.game-video__wrapper iframe, 
.game-video__wrapper video,
.game-video__wrapper lite-youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-width: 0;
    outline-width: 0;
    border-radius: var(--radius-md);
}

#microtrailer {
    position: relative; 
    text-align: center;
    border-radius: var(--radius-md); /* Ensure wrapper has radius */
    overflow: hidden;
}

/* Play button for microtrailer */
.play_sound {
    position: absolute; 
    width: 44px; 
    height: 44px; 
    bottom: 20px; 
    right: 20px; 
    top: auto; /* Reset top */
    color: #fff; 
    background-color: rgba(0,0,0,0.6); 
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2); 
    border-radius: 50%; 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 10;
}

.play_sound:hover {
    transform: scale(1.1); 
    background-color: var(--accent);
    border-color: var(--accent);
}

.play_sound i {
    color: #fff; 
    font-size: 16px;
    margin-left: 3px; /* visual center fix */
}

.turn_sound {position: absolute; top: 12px; right: 12px; color: #fff; cursor: pointer; text-transform: uppercase; font-size: 13px; padding: 5px 5px; background-color: #0006; border: 1px solid #aaa3; border-radius: 50%;}
.turn_sound:hover {transform: scale(1.07);}
.turn_sound.twoturn {font-size: 10px; border-radius: 2px; padding: 2px 6px; color: #f0f0f0;}
.turn_sound.twoturn:hover {transform: scale(1.02);}

.videoox {text-align: center; font-size: 1.125em; margin-top: 12px;}
.openvideoox {position: relative; padding-bottom: 1px; border-bottom: 1px dashed; color: #2f2f2f; font-weight: 700; cursor: pointer;}
.openvideoox:before {content: "";position: absolute;right: -20px;top: 2px;width: 15px;height: 18px;background: url(../images/click.png) no-repeat;background-size: contain;}
.openvideoox:after {content: "";position: absolute;right: -15px;top: 6px;width: 6px;height: 6px;border-radius: 50%;animation: radial-pulse 2s infinite;}
.openvideoox a {color: #2f2f2f;}
@keyframes radial-pulse {0% {box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.59);}100% {box-shadow: 0 0 0 8px rgba(0, 0, 0, 0);}}

.imglogo {position: relative; margin: var(--space-7) 0; text-align: center;}
.imglogo img {width: 320px; max-height: 180px;}

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: all 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('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></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;}

/*--- Game Specs Block (Redesigned) ---*/
.game-specs {
    position: relative;
    margin: var(--section-gap) 0;
}

.game-specs__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-4);
    color: var(--text-main);
}

.game-specs__list {
    font-size: 1rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.game-specs__item {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--border-light);
}

.game-specs__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.game-specs__label {
    font-weight: 600;
    color: var(--text-muted);
    min-width: 160px; /* Increased for better alignment */
    flex-shrink: 0;
}

/* Dark Mode Overrides */
:root[class~="dark"] .game-specs__title {
    color: #acb2b8;
}
:root[class~="dark"] .game-specs__label {
    color: #61686D;
    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;}

/*--- DOWNLOAD HEADER (Minimalist) ---*/
.download-header {
    margin: var(--section-gap) 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--border-light);
}

.download-header__top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.download-header__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

.download-header__badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--radius-xs);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.download-header__badge--early {
    background: rgba(245, 158, 11, 0.1);
    color: #ce8918;
}

/* Meta Data - Clean Row */
.download-header__grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.download-header__row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    align-items: center;
}

/* Secondary row styling (languages) */
.download-header__row--secondary {
    padding-top: 20px;
    border-top: 1px dashed var(--border-medium);
}

.download-header__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: none;
}

/* No hover effects on items in minimal mode */
.download-header__item:hover {
    background: transparent;
    border-color: transparent;
    transform: none;
    box-shadow: none;
}

.download-header__icon {
    font-size: 18px;
    color: var(--text-muted); /* Subtler icon */
    margin-top: 3px; /* Align with text */
    flex-shrink: 0;
}

.download-header__info {
    display: flex;
    flex-direction: column;
}

.download-header__label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
}

.download-header__value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-main);
    line-height: 1.4;
}

/* Specific styling for Version to handle long text */
.download-header__value .game-hero__ver-pill {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}

.download-header__value b {
    font-weight: 600;
}

.version-notice {margin-top: var(--space-5); font-weight: 500; font-size: 0.9375em;}
.version-notice .ac_ver {color: #d93025;}
.version-notice .ac_text {color: var(--text-muted); -webkit-font-smoothing: antialiased; text-decoration: underline;}
.version-notice .ac_text:hover {color: var(--link-hover);}

/* --- Download Actions Block (Minimal Redesign) --- */
.download-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-5);
    margin: var(--section-gap) 0;
}

.download-actions__item {
    position: relative;
    width: auto;
    min-width: 240px;
    max-width: 280px;
    flex: 1;
}

/* Main Download Button */
a.btn-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-size: 1.0625rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

a.btn-download::before { display: none; }

a.btn-download:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.25);
}

a.btn-download:active {
    transform: translateY(0);
}

a.btn-download:after { display: none; }

/* Secondary Download */
a.btn-download--alt {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid var(--border-medium);
    color: var(--text-main);
    font-size: 1.0625rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.2s ease;
}

a.btn-download--alt::before { display: none; }

a.btn-download--alt:hover {
    background: var(--bg-secondary);
    border-color: var(--border-light);
    color: var(--text-main);
}

a.btn-download--alt:hover::before {
    color: var(--accent);
}

.btn-download--sub {
    margin-top: 6px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--text-muted);
    letter-spacing: 0.1px;
}

.btn-download--alt-sub {
    margin-top: 6px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--text-muted);
    letter-spacing: 0.1px;
}

.btn-download--hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content; 
    min-width: 260px;
    height: 50px;
    margin: var(--section-gap) auto;
    padding: 0 30px;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: #fff;
    font-size: 1.25rem; 
    font-weight: 500;
    text-align: center;
    transition: var(--transition-normal);
}
.btn-download--hero {margin-bottom: var(--space-4);}
.btn-download--hero:hover, .btn-download--hero:focus {background: var(--accent-hover); color: #fff; transform: translateY(-1px);}



.yadisc {position: relative; display: inline-block; text-align: center; width: 264px; margin: var(--space-4) 0; padding: 6px 0; border-radius: var(--radius-sm); font-size: 1.5em; color: #000; background: var(--bg-tertiary); border: 1px solid var(--bg-tertiary);}
.yadisc a, .yadisc span {position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 1; cursor: pointer;}
.yadisc:hover {background: #efefef; border: 1px solid #e4e4e4;}

/* --- Game Notice Block (Redesigned) --- */
.game-notice {
    position: relative;
    margin: var(--section-gap) 0;
    padding: var(--space-5) var(--block-gap) var(--space-5) calc(var(--block-gap) + 28px);
    background: linear-gradient(135deg, #fef3cd 0%, #fff8e1 100%);
    border-radius: var(--radius-sm);
    color: #664d03;
    font-size: 1rem;
    line-height: 1.5;
}

.game-notice a:hover, .torrent-details a:hover, .game-specs a:hover { color: #000; }

.game-notice::before {
    content: "\f0eb"; /* lightbulb icon */
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    position: absolute;
    left: var(--block-gap);
    top: var(--space-5);
    font-size: 18px;
    color: #f59e0b;
}

.game-notice__title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #92690a;
    margin-bottom: var(--space-2);
}

.game-notice__body {
    font-weight: 500;
}

.game-notice__body sub {
    display: inline-block;
    width: 16px;
    height: 11px;
    margin-right: 4px;
    background: linear-gradient(180deg, #fff 33%, #113b9a 0, #113b9a 66%, #ee1e34 0);
    border-radius: 2px;
    border: 1px solid #000;
    text-indent: -9999px;
    vertical-align: middle;
}

.spoiler-details {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 15px;
    color: var(--text-main);
    cursor: pointer;
    margin-top: var(--space-4);
    transition: all 0.2s ease;
    user-select: none;
    letter-spacing: 0.5px;
}

.spoiler-details:hover {
    background: var(--bg-tertiary);
    border-color: #d0d0d0; 
    color: #000;
}

.spoiler-details--open {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--bg-tertiary);
    z-index: 2;
}

.spoiler-details::before {
    content: "\f107"; /* fa-angle-down */
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-right: 12px;
    font-size: 14px;
    transition: transform 0.3s ease;
    transform: rotate(-90deg);
}

.spoiler-details--open::before {
    transform: rotate(0deg);
}

.spoiler-details:after {
    display: none;
}

.release-note {position: relative; margin-top: var(--block-gap); font-weight: 500; color: var(--text-main);}
.release-note:before {position: absolute; top: 10px; left: -12px; color: #e2000e; content: "*"; font-weight: 700; font-size: 18px;}
.release-note__info {display: inline-block; font-weight: normal; padding-top: 2px; font-size: 12px; color: #6b6b6b; cursor: pointer; border-bottom: 1px dashed #b3b3b3;}
.release-note__info:hover {color: #000;}
.release-note .fa-square-question {margin-left: 4px; vertical-align: middle; font-size: 12px; color: #b1b1b1; transition: .4s; cursor: pointer;}
.event-message {position: relative; font-weight: 500; color: var(--text-main);}





.box-steamrating {position: relative; font-size: 1.1em; margin: var(--block-gap) 0;}
.box-steamrating .fa-square-question {font-size: 13px;}
.steam-score {font-weight: 500;}
.steam-toggle, .update-toggle {color: #b1b1b1; transition: 0.4s; cursor: pointer;}
.steam-toggle:hover, .update-toggle:hover {color: #000;}
.steamreviews {display: none;}
.steam-percent {font-weight: 500;}

[steam_updinfo] {display: inline-block; font-size: 13px; color: var(--text-secondary); transition: 0.4s; cursor: pointer;}
[steam_updinfo]:hover {color: #000;}
[steam_updinfo] .updinfo_button {border-bottom: 1px dashed #b3b3b3;}
[steam_updinfo] .fa-square-question {font-size: 12px; padding-left: 4px; vertical-align: middle;}
#steam_url {margin-top: var(--space-4);}
#steam_url a:hover {color: #2011e6;}
.steam_url_head {font-weight: 500;}
.publ_updcomm {margin-top: var(--space-4);}

/* Game Tags System */
.game-tags {
    position: relative;
    margin: var(--space-6) 0;
    --tags-row-height: 44px; /* Reduced from 48px to correct visibility */
}

.game-tags__inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    
    /* Layout & Overflow */
    position: relative;
    max-height: var(--tags-row-height);
    overflow: hidden;
    
    /* Padding to prevent hover clipping */
    padding: 6px 4px;
    margin: -6px -4px;
    
    /* Transition */
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height;
}

.game-tags.active .game-tags__inner {
    max-height: 500px; /* Large enough to fit all tags */
    transition: max-height 0.5s ease-in-out;
}

/* Icon */
.game-tags__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: 50%;
    font-size: 14px;
}

.dark .game-tags__icon {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
}

/* Tags List */
.game-tags__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
    padding-right: 40px; /* Reserve space for toggle button */
}

/* Tag Item */
.game-tags__list a {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 16px;
    
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    background: var(--tag-bg);
    border: 1px solid transparent;
    border-radius: 50px;
    
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Tag Hover/Focus */
.game-tags__list a:hover,
.game-tags__list a:focus-visible {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.25);
    z-index: 2; /* Bring to front on hover */
}

/* Dark Mode Tag */
.dark .game-tags__list a {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    border-color: rgba(255, 255, 255, 0.04);
}

.dark .game-tags__list a:hover,
.dark .game-tags__list a:focus-visible {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.2);
}

/* Toggle Button */
.game-tags__toggle {
    position: absolute;
    top: 6px; /* Align with first row visually */
    right: 0;
    
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    
    background: transparent;
    border: 1px solid var(--border-light);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    
    transition: all 0.2s ease;
}

.game-tags__toggle:hover {
    color: var(--text-main);
    border-color: var(--text-muted);
    background: var(--bg-secondary);
}

.game-tags.active .game-tags__toggle {
    transform: rotate(180deg);
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.dark .game-tags__toggle {
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
}

.dark .game-tags__toggle:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.related {position: relative; min-height: 84px; content-visibility: auto; contain-intrinsic-size: auto 350px;}
.section-heading {font-weight: 500; color: var(--text-main); font-size: 20px; margin-bottom: var(--element-gap);}
.section-heading .commcount {padding: 3px 6px; border-radius: var(--radius-sm); margin-left: var(--element-gap); font-size: 14px; font-weight: 500; background: var(--bg-secondary);}
.section-heading--related:before {float: left; content: ""; background: var(--danger); width: 4px; height: 18px; margin-right: var(--space-3); margin-top: 2px; border-radius: 2px;}
.related .head-carusel {margin: var(--space-4) 0;}
/*--- RELATED GAMES CARD ---*/
.related-card {
    display: block;
    width: 100%;
    text-decoration: none;
}

.related-card__media {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 5/7;
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.related-card:hover .related-card__media {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.related-card__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.related-card:hover .related-card__img {
    transform: scale(1.05);
}

.related-card__content {
    margin-top: var(--space-3);
}

.related-card__title {
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-main);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
}

.related-card:hover .related-card__title {
    color: var(--accent);
}

.dark .related-card__title {
    color: #e0e0e0;
}
.dark .related-card:hover .related-card__title {
    color: var(--accent);
}

.section-divider {background: var(--border-light); height: 1px; margin: var(--section-gap) 0;}

/*--- Alternative Downloads Block ---*/
.alt-downloads { margin: var(--section-gap) 0; }
.alt-downloads.highlighted { background: #fedc804a; outline: 10px solid #fedc804a; }

.alt-downloads__header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    padding: 14px 20px;
    margin-bottom: var(--space-4);
    background: var(--bg-secondary);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    letter-spacing: 0.3px;
}

.alt-downloads__header i {
    font-size: 18px;
    color: var(--accent);
}

.alt-downloads__list {
    position: relative;
    display: flex;
    flex-direction: column;
}

.alt-downloads__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 16px 20px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.alt-downloads__label:not(:first-child) {
    border-top: 1px solid var(--border-light);
}
/* --- Torrent Item (Additional Downloads) --- */
.torrent-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--inline-gap);
    background: var(--bg-body);
    color: var(--text-main);
    padding: var(--space-4) var(--block-gap);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.torrent-item[opencast2],
.torrent-item[opencast3],
.torrent-item[opencast4] {
    cursor: pointer;
}

.torrent-item[opencast2]:hover,
.torrent-item[opencast3]:hover,
.torrent-item[opencast4]:hover {
    background: var(--bg-tertiary);
}

.torrent-item.activesp {
    background: var(--bg-tertiary);
    border-color: var(--border-medium);
}

.torrent-item.activesp .torrent-item__version {
    font-weight: 500;
}

/* Download Button & Size */
.torrent-item__download {
    position: absolute;
    right: var(--block-gap);
    bottom: var(--space-4);
    left: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--inline-gap);
}

.torrent-item__size {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: var(--text-sm);
}

.torrent-item__btn {
    background: var(--accent);
    color: #fff;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 500;
    border-bottom: 2px solid var(--accent-dark);
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.torrent-item__btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}


/* Title & Version */
.torrent-item__title {
    position: relative;
    display: inline-block;
    font-weight: 600;
    font-size: 1.0625rem;
    padding-left: 24px;
    line-height: 1.3;
}

.torrent-item__version {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

/* Folder Icon (FontAwesome) */
.foldclose::before {
    content: "\f07b";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    position: absolute;
    right: -28px;
    top: 0;
    font-size: 20px;
    color: #ffc107;
    transition: transform 0.2s ease;
}

.torrent-item.activesp .foldclose::before {
    content: "\f07c";
    font-weight: 400;
}

.torrent-item__title::after {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url(../images/d.gif) no-repeat center;
    background-size: contain;
}

.torrent-details {
    position: relative;
    border: 1px solid var(--border-light);
    background: var(--bg-tertiary);
    padding: var(--space-3) var(--space-4);
    margin: var(--element-gap) 0;
    font-size: var(--text-md);
    line-height: 1.5;
    overflow: hidden;
}

.spoiler-details__content .torrent-details {
    margin-top: -1px;
    overflow: auto;
}

.spoiler-details__content .opencast {
    border: 1px solid var(--border-light);
    border-top: none;
    padding: 20px;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin-top: -1px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-main);
}

.torrent-details h3 {
    font-size: 1.125rem;
}

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

/* Alternative sources (GOG, Storage) */
.torrent-item.tm5,
.torrent-item.tm6 {
    background: rgba(213, 223, 240, 0.73);
    cursor: pointer;
}

.torrent-item.tm5.activesp,
.torrent-item.tm6.activesp {
    background: rgba(216, 221, 230, 0.89);
    border-color: #d2d8e0;
}

.torrent-item.tm5:hover,
.torrent-item.tm6:hover {
    background: rgba(216, 221, 230, 0.89);
}

.torrent-item.tm5::before,
.torrent-item.tm6::before {
    position: absolute;
    font-size: 1.25rem;
    right: var(--block-gap);
    top: var(--space-4);
    color: rgba(103, 122, 159, 0.6);
}

.torrent-item.tm5 .torrent-item__title::after {
    background: url(../images/gog.png) no-repeat center;
    background-size: contain;
}

.torrent-item.tm6 .torrent-item__title::after {
    background: url(../images/storage.png) no-repeat center;
    background-size: contain;
}

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

.nametitle_st {font-size: 16px; margin-top: var(--space-4);}
.nametitle_st span {font-weight: 700; display: block; margin-top: var(--inline-gap); font-size: 16px;}
.unit_st {display: flex; margin-top: var(--space-4);}
.unit_st .ps-link-out {color: #4f62ca; font-size: 16px; font-weight: 500; cursor: pointer;}
.unit_st .ps-link-out:hover {color: #092ddb;}
.unit_st .ps-link-out:before {font-size: 11px; font-weight: 700; line-height: 11px; color: #848484;}
.unit_st .ps-link-out:after {content: "|"; position: relative; padding: 0 6px 0 6px; color: #000;}
.unit_st .ps-link-out:last-child::after {content: none;}
.unit_tune {margin-top: var(--space-4); font-size: 15px;}

#gog, #otherlink { display: flex; flex-direction: column; gap: var(--space-6); }
.althead {display: inline-block; font-weight: 700; font-size: 18px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 2px solid #000; text-transform: uppercase;}
.althead_short {margin-top: var(--element-gap); margin-left: var(--element-gap);}
.althead_name { display: block; font-size: 24px; font-weight: 700; line-height: normal; color: #000; }
.althead_text {position: relative; margin-top: var(--element-gap); font-size: 16px; color: #7b7b7b;}
.althead_warning {position: relative; margin-top: var(--element-gap); font-size: 15px; background: #ededed; color: #000; padding: var(--element-gap) var(--block-gap); border-radius: var(--radius-sm);}
.appruv_warning {position: absolute; top: 10px; right: 10px; font-size: 20px; cursor: pointer;}
.appruv_warning:before {font-family: 'Font Awesome 6 Pro'; content: "\f00d";}
.appruv_warning:hover {color: var(--danger);}

.grid-cols { display: flex; flex-direction: column; gap: var(--space-6);}
summary[h] { position: relative; display: flex; align-content: center; align-items: center; gap: var(--inline-gap); padding: var(--space-3) var(--space-4); cursor: pointer; }
summary[h]::before {content: "\f054"; position: absolute; top: 10px; right: 12px; font-family: 'Font Awesome 6 Pro'; font-weight: 900; transition-duration: .3s;}
summary[h]:hover {background-color: var(--bg-hover);}
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: var(--text-main); border-bottom: 1px solid var(--border-light);}
details.item a { position: relative; display: block; padding: 10px 12px; color: #000; cursor: pointer; }
details.item a:hover {background-color: var(--bg-hover);}
details.item a::before {content: none !important;}

.file_item { display: flex; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border-light); }
/* other link */
a.otherlink {position: relative; border-bottom: 1px solid var(--border-light); display: flex; align-content: center; align-items: center; gap: var(--inline-gap); padding: var(--space-3) var(--space-4); color: var(--text-main); cursor: pointer;}
a.otherlink:hover {background-color: var(--bg-hover);}
a.otherlink::before {position: absolute; top: 14px; right: 12px; font-family: 'Font Awesome 6 Pro'; content: "\f35d"; font-size: 13px;}
a.otherlink img {width: 14px; height: auto; max-width: 100%;}
#althead_info {margin-top: var(--space-3); font-size: 18px; color: #989898; font-weight: 700;}
#otherlink_info {margin-top: var(--space-4); font-size: 15px;}

/*--- Sidebar Block (Conservative) ---*/
.block-right {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0,0,0,0.03);
    overflow: hidden;
}

/* Sidebar Navigation Group */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove gap, handle spacing within items/header */
}

.nav-group__header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    padding: 0;
    border: none;
}

.nav-group__header i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(99, 184, 20, 0.1); /* var(--accent) with opacity */
    color: var(--accent);
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-group__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 14px;
    background: transparent;
}

.nav-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px; /* Smaller icon box */
    height: 20px;
    border-radius: 4px;
    background: transparent; /* Remove background by default */
    color: var(--text-muted);
    transition: all 0.2s ease;
    font-size: 13px;
}

.nav-item:hover {
    background: rgba(0,0,0,0.03);
    color: var(--text-main);
    transform: none; /* No movement */
}

.nav-item:hover .nav-item__icon {
    color: var(--accent);
    background: transparent;
    box-shadow: none;
}

.nav-item.active {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.3);
}

.nav-item.active .nav-item__icon {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
/*--- Actual Box Container ---*/
.actual-box {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: auto; /* Remove fixed height */
    overflow: visible; /* Remove scroll */
    counter-reset: top-rank;
    padding: 0;
    margin: 0;
}



a.topnavr {color: #fd0303 !important; text-transform: uppercase; font-size: 1.0625em !important; font-weight: 700 !important; letter-spacing: -0.2px; padding-left: 22px !important;}
a.topnavr:before {content: ""; position: absolute; top: 8px; left: 7px; width: 8px; height: 8px; background: #fe461a; border: 1px solid #000; border-radius: 2px;}

/*--- Top Card (Modern Glass) ---*/
.top-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-radius: 16px;
    counter-increment: top-rank;
    background: transparent;
    border: 1px solid transparent;
    /* Removed margin-bottom in favor of gap in container */
}

/* Remove last-child margin rule as we use gap */

.top-card:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Ranking Badge (Premium) */
.top-card__media::before {
    content: counter(top-rank);
    position: absolute;
    left: -6px; /* Shift out slightly more */
    top: -6px;
    z-index: 10;
    background: rgba(30,30,35,0.95);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    pointer-events: none;
    border: 1px solid rgba(255,255,255,0.15);
}

/* Специальные стили для топ-3 */
.top-card:nth-child(1) .top-card__media::before { 
    background: linear-gradient(135deg, #ffd700, #f59e0b); 
    color: #000; 
    border: none;
    box-shadow: 0 4px 12px rgba(234, 179, 8, 0.4);
}
.top-card:nth-child(2) .top-card__media::before { 
    background: linear-gradient(135deg, #e0e0e0, #9ca3af); 
    color: #000; 
    border: none;
    box-shadow: 0 4px 12px rgba(156, 163, 175, 0.3);
}
.top-card:nth-child(3) .top-card__media::before { 
    background: linear-gradient(135deg, #d97706, #92400e); 
    color: #fff; 
    border: none;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.3);
}


.top-card:hover {
    background: rgba(255, 255, 255, 0.6); /* Slightly more subtle background */
    transform: translateY(-1px); /* Reduced movement */
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* Softer shadow */
    border-color: rgba(0,0,0,0.04);
    z-index: 5;
}

.top-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.top-card__media {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: visible; /* To see badge */
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.top-card__media img {
    border-radius: 12px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.top-card:hover .top-card__media img {
    transform: scale(1.02); /* Reduced scaling */
}


.top-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.top-card:hover .top-card__img {
    transform: scale(1.08);
}

.top-card__content {
    flex-grow: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

.top-card__title {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-main);
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color var(--transition-fast);
    margin-bottom: 2px;
}

.top-card:hover .top-card__title {
    color: var(--link-hover);
}

.top-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 13px;
    line-height: normal;
}

.top-card__meta .meta-tag {
    padding: 3px 8px;
    background: var(--tag-bg);
    color: var(--tag-color);
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.top-card__year {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* Скрытие нумерации для блоков без рейтинга */
.actual-box--no-rank .top-card__media::before {
    display: none;
}

.side-two {display: flex; font-size: 0.9375em; color: var(--text-secondary); line-height: 20px;}
.side-two .info:first-child:after {content: "•"; margin: 0 4px;}

.sidebar-nav {position: relative;}
.nav-group-title {display: block; font-size: 16px; font-weight: 700; color: var(--text-main); margin-bottom: var(--space-4); text-transform: uppercase; cursor: pointer;}
.nav-group-title.active {margin-bottom: 5px;}
.nav-group-list {position: relative; margin-bottom: var(--space-4); list-style: none; padding: 0;}
.nav-group-list li a {display: block; color: var(--text-main); transition: .1s; padding: 5px 0; font-size: 16px; opacity: .7; text-decoration: none;}
.nav-group-list li a:hover {font-weight: 500; opacity: 1;}

.nav-group-list.hidden {display: none;}
.nav-item-hidden {display: none;}
.nav-item-hidden.active {display: block;}

.nav-show-more {font-size: 13px; margin-bottom: var(--space-4); opacity: 0.4; transition: var(--transition-slow); cursor: pointer;}
.nav-show-more:hover {opacity: 0.8;}
.nav-show-more:before {content: "Показать больше";}
.nav-show-more.active:before {content: "Показать меньше";}

.open_alltag {display: flex; align-items: center; position: relative; margin-top: -10px; background: var(--bg-body); font-weight: 700; padding: 4px 0; padding-left: 14px; font-size: 13px; text-transform: uppercase; cursor: pointer; border: 1px solid var(--border-light);}
.open_alltag, .open_alltag a {color: var(--text-main); transition: none; text-decoration: underline;}
.open_alltag:hover, .open_alltag a:hover {color: var(--link-hover);}



/* SEO Category Text Block (Glass) */
.catext {
    position: relative;
    padding: 30px;
    margin-top: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.04),
        0 1px 3px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 0 500px; /* Approximate height to prevent collapse */
}

.catext::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

.catext h2 {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-main);
    margin-bottom: 24px;
    letter-spacing: -0.5px;
    text-transform: uppercase;
}

.catext h2::before {
    content: "\f05a"; /* Info circle icon */
    font-family: 'Font Awesome 6 Pro';
    font-weight: 300;
    font-size: 24px;
    margin-right: 12px;
    color: var(--accent);
}

.catext p {
    line-height: 1.8;
    margin-bottom: 18px;
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.catext p:last-child {
    margin-bottom: 0;
}

.catext img {
    float: left;
    margin: 8px 24px 16px 0;
    width: 260px;
    border-radius: 8px;
    transition: transform 0.3s ease;
}

.catext img:hover {
    transform: scale(1.01);
}

.catext a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.catext a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.catul {
    padding-left: 0;
    list-style: none;
    margin-bottom: 20px;
}

.catul li {
    position: relative;
    padding-left: 24px;
    line-height: 1.7;
    margin-bottom: 10px;
    color: #4b5563;
    font-size: var(--text-base);
}

.catul li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 11px;
    width: 5px;
    height: 5px;
    background-color: #9ca3af;
    border-radius: 50%;
}

.catul li:last-child {
    margin-bottom: 0;
}

.foot_menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
}

.foot_menu > li {
    flex: 1 1 280px; /* Гибкая ширина, min 280px */
    max-width: 30%;
}

.foot_menu > li > b {
    display: block;
    margin-bottom: 1em;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0.02em;
}

.foot_menu > li > b > i {
    display: none;
}

.foot_menu .collapse {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
}

/* Tablet: 2 колонки */
@media screen and (max-width: 960px) {
    .foot_menu > li {
        flex: 1 1 45%;
        max-width: 48%;
    }
}

/* Mobile: 1 колонка */
@media screen and (max-width: 690px) {
    .foot_menu {
        flex-direction: column;
        gap: var(--space-5);
    }
    
    .foot_menu > li {
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .foot_menu > li > b {
        font-size: 13px;
        margin-bottom: 0.75em;
    }
    
    .foot_menu .collapse {
        font-size: 13px;
    }
}

.staticpord {margin: 0 auto;font-size: 1.2em;font-weight: 500;text-align: center;}
.staticpord a {display: inline-block;background: var(--accent);border-radius: 4px;width: 300px;height: 32px;color: #fff;padding: 6px 16px;}
.staticpord a:hover {background: #3ca5c4;}



/*--- FOOTER ---*/
footer {display: flex; align-items: center; font-size: 14px; padding: var(--space-6) 0; color: var(--text-muted);}
footer span {font-weight: 500;}
.footer_menu {position: relative; padding: var(--section-gap) 0 var(--space-4) 0; margin-top: var(--section-gap); line-height: 1.5; font-size: 1.125em; border-top: 1px solid var(--border-light);}

/* Primary Button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background: var(--accent);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}
.btn-primary:hover {
    background: var(--accent-dark, #4a9a14);
}
.btn-primary:active {
    transform: scale(0.98);
}
.dark .btn-primary {
    background: #4a9a14;
}
.dark .btn-primary:hover {
    background: #3c8011;
}

/*--- COMMENTS ---*/
.comment-box {position: relative; margin-bottom: 20px;}
.comments-items {margin-top: 12px;}
.last-comm-link {font-size: 16px; margin-top: 10px;}
.last-comm-link a {text-decoration: underline; color: var(--link-color);}

/* Comment Form */
.comm-form {
    padding: var(--space-4) 0;
}

.comm-form__guest {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.comm-form__input {
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-main);
    transition: border-color 0.2s;
}

.comm-form__input:focus {
    outline: none;
    border-color: var(--accent);
}

.comm-form__input::placeholder {
    color: var(--text-muted);
}

.comm-form__guest .comm-form__input {
    flex: 1;
    min-width: 180px;
    max-width: 260px;
}

.comm-form__input--textarea {
    width: 100%;
    min-height: 100px;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    line-height: 1.5;
    resize: vertical;
}

.comm-form__social {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.comm-form__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.comm-form__social-btn:hover {
    opacity: 0.8;
}

.comm-form__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
}

.comm-form__captcha .g-recaptcha,
.comm-form__captcha .cf-turnstile {
    margin: 0;
}

/* Comment Item */
.comm {
    position: relative;
    padding: var(--space-5) 0;
    overflow-wrap: break-word;
    border-top: 1px solid var(--border-light);
}

.comm:first-child {
    border-top: none;
}

/* Pinned Comment */
.comm--pinned {
    padding: var(--space-4);
    margin-bottom: var(--space-2);
    border-top: none;
    border-bottom: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
    background: rgba(var(--accent-rgb, 91, 173, 25), 0.03);
    border-radius: var(--radius-sm);
}

.comm--pinned .comm__body {
    margin-bottom: 0;
}

.comm--pinned .comm__body b {
    font-weight: 600;
    color: var(--text-main);
}

/* Comment Header */
.comm__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.comm__head input {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    opacity: 0;
    cursor: pointer;
}

.comm__head input:checked {
    opacity: 1;
}

.comm__avatar {
    position: relative;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
}

.comm__avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
    transition: transform 0.15s ease;
}

.comm__avatar:hover img {
    transform: scale(1.05);
}

.comm__online {
    position: absolute;
    top: -2px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #7fb900;
    border: 2px solid var(--bg-card);
    border-radius: 50%;
    z-index: 1;
}

.comm__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.comm__author {
    font-weight: 600;
    font-size: var(--text-base);
    line-height: 1.3;
    color: var(--text-main);
    transition: color 0.15s ease;
}

.comm__author a {
    color: inherit;
    text-decoration: none;
}

.comm__author a:hover {
    color: var(--link-color);
}

.comm__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.comm__badge i {
    font-size: 10px;
}

.comm__badge--team {
    background: linear-gradient(135deg, #8BC34A, #689F38);
    color: #fff;
}

.comm__group {color: var(--text-muted); font-size: 12px;}

.comm__pin {
    color: var(--text-muted);
    font-size: 12px;
}

.comm__pin::before {
    content: "\f08d";
    font-family: 'Font Awesome 6 Pro';
    font-weight: 900;
}

.comm__date {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

/* Comment Body */
.comm__body {
    margin-bottom: 10px;
    color: var(--text-main);
    font-size: 1rem;
    line-height: 1.55;
}

.comm__body .comm__author {
    font-size: inherit;
    font-weight: 500;
    color: var(--link-color);
    cursor: text;
}

.comm__body div[id] {
    display: initial;
}

.comm__body--highlighted {
    background: rgba(254, 220, 128, 0.15);
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
    border-radius: var(--radius-sm);
}

/* Comment Actions */

.comm__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,0.05); /* Minimal separator */
    gap: 15px;
}

/* Primary Reply Button */
.comm__actions > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    border-radius: 4px;
}

.comm__actions > a:hover {
    color: var(--accent);
    transform: translateX(4px); /* Subtle interaction: move */
}

/* Admin/Author Tools */
.comm__tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.comm__tools a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 13px;
    transition: all 0.2s ease;
    background: transparent;
}

.comm__tools a:hover {
    background: rgba(0,0,0,0.04);
    color: var(--text-main);
}

/* Specific Tool Hover Colors */
/* Edit */
.comm__tools a:has(.fa-pen):hover {
    color: var(--accent);
    background: rgba(99, 184, 20, 0.1); /* --accent alpha 0.1 */
}

/* Delete */
.comm__tools a:has(.fa-trash-can):hover {
    color: #ef4444; /* red-500 */
    background: rgba(239, 68, 68, 0.1);
}

.signature {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-light);
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-style: italic;
}

/*--- BOTTOM Navi ---*/
.bottom-page {display: flex; flex-wrap: wrap; justify-content: center; align-items: center; font-size: 16px; padding: 20px 0 5px 0; overflow: hidden;}
.pprev, .pnext {display: inline-block; background: var(--bg-secondary); border: 2px solid var(--border-light); font-size: 24px; border-radius: var(--radius-sm); padding: 0px 14px; color: var(--border-light); margin: 0 4px; height: 28px; line-height: 21px;}
a .pnext, a .pprev { color: var(--link-color); }
a .pnext:hover, a .pprev:hover { color: #000; }
.page-navi {text-align:center;}
.page-navi a, .page-navi span {display: inline-block; min-width: 38px; height: 28px; line-height: 27px; background: var(--bg-card); border: 1px solid var(--border-light); color: var(--text-secondary); padding: 0 6px; border-radius: 4px;}
.page-navi a:last-child {background: none; padding: 0; border: 1px solid #fff0;}
.page-navi span {color: var(--link-color);}
.page-navi a:hover {color: var(--link-hover);}
.page-navi span.nav_ext {background:transparent; min-width: auto; margin: 0; color:#888;}

.add-comment__navigation {display: flex; justify-content: center; align-items: center; margin-top: 6px;}
.add-comment__navigation a {display: inline-block;min-width: 300px;background-color: var(--bg-body); color: var(--text-main); text-align: center; line-height: 32px; border-radius: 2px; white-space: nowrap; padding: 0 10px; cursor: pointer;}
.add-comment__navigation a:hover {background-color: var(--bg-secondary);}
.nav_ext {margin: 0 10px; color: var(--text-main);}
#nav-load, #nav-load span {display: none;}



/*--- LOGIN Profile ---*/
.profile-box {position: absolute; background-color: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); top: 43px; left: auto; right: -20px; overflow: hidden; z-index: var(--z-max); padding: 6px 0; box-shadow: var(--shadow-md); min-width: 220px;}
.profile-box form {width: 255px; padding: 10px;}
.account-menu_user {display: grid; grid-template-columns: 40px 1fr; gap: 0 12px; align-items: center; justify-items: start; padding: 10px 15px; height: 60px; font-size: 16px;}
.account-menu_user:hover .account-menu_profile {color: var(--link-color);}
.account-menu_avbox {width: 40px; height: 40px; grid-row: span 2; border-radius: 50%; overflow: hidden;}
.account-menu_name {max-width: 146px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #000; font-weight: 500;}
.account-menu_profile {font-size: 15px; color: var(--text-secondary);}
.lb-menu li {position: relative;}
.lb-menu li.exit {border-top: 1px solid #eaeaea; margin-top: 6px; margin-bottom: -6px;}
.lb-menu li a {display: flex; align-items: center; color: #000; padding: 10px 15px; font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased;}
.lb-menu li a:hover {background-color: rgba(32,35,51,.04); transition: background-color .1s ease-out;}
.lb-menu i {margin-right: 10px;}

.lb-lnk {display: flex; line-height: 22px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--border-light); justify-content: space-between; align-items: center;}
.log-register {background: var(--accent); color: #fff; padding: 0 10px; border-radius: 2px;}
.log-register:hover {opacity: .88; color: #fff;}

.grecaptcha-badge {z-index: var(--z-max);}

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

/* 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; /* Prevent clipping of hover effects */
    margin: -10px 0; /* Compensate for padding */
}

.carousel-track {
    display: flex;
    gap: var(--carousel-gutter);
    will-change: transform;
    /* Базовая анимация (управляется через JS duration) */
    transition-property: transform;
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); /* Ease-out quart, более "дорогое" ощущение */
}

.carousel-track > * {
    width: calc((100% - (var(--carousel-gutter) * (var(--carousel-visible) - 1))) / var(--carousel-visible));
    flex-shrink: 0;
    flex-grow: 0;
    margin-right: 0 !important;
}

/* Carousel Navigation Dots */
.carousel-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 12px;
    gap: 4px;
}

.carousel-nav-btn {
    background-color: var(--nav-btn-bg);
    width: 15px;
    height: 11px;
    border-radius: var(--radius-xs);
    transition: background-color 0.2s;
    cursor: pointer;
    border: none;
    padding: 0;
}

.carousel-nav-btn:hover {
    background-color: var(--nav-btn-active);
}

.carousel-nav-btn.active {
    background-color: var(--nav-btn-active);
}



/* Pinned items carousel - vertical nav */
.pinned_line {
    position: relative;
    margin-top: 20px;
    margin-bottom: -20px;
}

.pinned_line .carousel-nav {
    flex-direction: column;
    margin: 0;
    position: absolute;
    top: -2px;
    right: -21px;
    gap: 2px;
}

.pinned_line .carousel-nav-btn {
    height: 15px;
}

.fixnews {
    position: relative;
    height: auto;
    max-height: 342px;
    overflow: hidden;
}

.wait-box {
    position: relative;
    min-height: 320px;
    height: auto;
    margin: var(--space-4) 0;
    border-top: 1px solid var(--border-light);
    padding-top: var(--space-4);
}

.wait-box .subtitle {
    display: block;
    color: #7b7b7b;
    margin-bottom: 10px;
}

.itemdown_soc {display: inline-block; padding: 0 16px; border-radius: var(--radius-sm); transition: all .3s; font-size: 1.1em; height: 38px; line-height: 38px; cursor: pointer; margin: 16px 4px 12px 4px;}
.itemdown_soc:hover {opacity: .85;}
.vk_button {background: #0077ff; color: #fff;}
.ggl_button {background: #E94F43; color: #fff;}
.ya_button {background: #fc0; color: #000;}
.itemdown_soc i {padding-right: 4px;}

.itemprofile_soc {display: flex; width: 28px; height: 28px; margin: 0 2px; border-radius: var(--radius-sm); transition: all .3s; font-size: 1.1em; cursor: pointer; justify-content: center; align-items: center;}
.itemprofile_soc:hover {opacity: .85;}

/*--- ADAPTIVE ---*/
@media screen and (max-width: 1130px) {

    /* Переключаем grid на одну колонку когда сайдбар скрыт */
    .mainwrap {
        grid-template-columns: 1fr;
    }
    .right-nav {display: none;}
    .main {width: 100%; float: none;}
    .footer {padding-left: var(--card-padding);}


    
    /* Mega Nav Grid - адаптация для планшетов */
    .mega-nav__grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Compact Nav for Tablet */
    .main-nav__link {
        padding: 8px 12px;
        font-size: 14px;
    }
    .main-nav__link span {
        display: none; /* Скрываем текст, оставляем иконки */
    }
    .main-nav__link i {
        margin: 0;
    }
    .header-main {
        padding: 0 max(var(--space-5), env(safe-area-inset-left)) 0 max(var(--space-5), env(safe-area-inset-right));
    }
    
    /* ==========================================================================
       SEARCH - TABLET MODE (Toggle button + Fixed form)
       Toggle is now OUTSIDE .search container for better layout control
       ========================================================================== */
    
    /* Hide the inline search container, keep only overlay and form */
    .search {
        position: static;
        width: auto;
    }
    
    .search__toggle {
        display: flex; /* Show toggle button (now outside .search) */
    }
    
    .search__form {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: var(--header-height);
        padding: 0 var(--space-4);
        padding-top: env(safe-area-inset-top);
        background: linear-gradient(180deg, rgba(30, 30, 32, 0.98) 0%, rgba(30, 30, 32, 0.95) 100%);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: var(--z-modal);
        
        /* Hidden state */
        opacity: 0;
        visibility: hidden;
        transform: translateY(-100%);
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .search.is-open .search__form {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    
    .search__input-wrapper {
        flex: 1;
        margin: auto 0;
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.12);
    }
    
    .search__close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--touch-target-min);
        height: var(--touch-target-min);
        margin-left: var(--space-3);
        background: transparent;
        border: none;
        border-radius: 50%;
        color: rgba(255, 255, 255, 0.6);
        font-size: 20px;
        cursor: pointer;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }
    
    .search__close:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
    }
    
    .search__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: calc(var(--z-modal) - 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    .search.is-open .search__overlay {
        opacity: 1;
        visibility: visible;
    }
}

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

    .carusel-box {margin-bottom: var(--card-padding);}

    .carousel-nav-btn:nth-child(n+9) {display: none;}
    .main {width: 100%; float: none;}
    .mainwrap {
        display: block; /* Switch back to block layout for mobile, or grid-template-columns: 1fr; */
        box-shadow: none; 
        border-radius: 0;
    }
    .main {
        width: 100%;
        padding: var(--space-4) var(--block-gap);
    }
    .right-nav {
        display: none; /* Keep hidden as originally intended */
    }
    .mainwrap:before {display: none;}
    .wrap {margin: 0;}

    .carusel-box {min-height: 303px;}


    ::-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}
    
    /* Logo: скрываем описание на планшетах */
    .logo-desc {
        display: none;
    }
    .logo-title {
        font-size: 16px;
    }
    
    /* Main nav: скрываем полностью, функционал в мегаменю */
    .main-nav {
        display: none;
    }
    
    /* Sub-nav: уменьшаем padding */
    .sub-nav__list {
        padding: 0 var(--space-5);
        gap: var(--space-4);
    }
}

/* ==========================================================================
   TABLET BREAKPOINT (768px)
   - Компактный header и sub-nav
   - Уменьшенные touch targets (но не меньше 44px)
   ========================================================================== */
@media screen and (max-width: 768px) {
    .header-main {
        height: var(--header-height-tablet);
        padding: 0 max(var(--space-4), env(safe-area-inset-left)) 0 max(var(--space-4), env(safe-area-inset-right));
    }
    
    /* Sub-nav: компактный режим */
    .sub-nav__list {
        height: 38px;
        padding: 0 var(--space-4);
        gap: var(--space-3);
    }
    
    /* User panel: компактный режим */
    .user-panel__trigger {
        padding: 2px 8px 2px 2px;
    }
    .user-panel__guest-text {
        display: none; /* Скрываем текст "Войти" на мобильных */
    }
    .user-panel__dropdown {
        right: -10px;
        min-width: 280px;
    }
    
    /* Theme toggle size is now consistent (36px) across all breakpoints */
}

/* ==========================================================================
   MOBILE BREAKPOINT (690px)
   - Минимальный header, только иконка логотипа
   - Полная адаптация для мобильных устройств
   ========================================================================== */
@media screen and (max-width: 690px) {
    /* Header: минимальный режим */
    .header-main {
        height: var(--header-height-mobile);
        padding: 0 max(var(--space-4), env(safe-area-inset-left)) 0 max(var(--space-4), env(safe-area-inset-right));
        gap: var(--space-2);
    }
    
    /* Sub-nav: минимальный режим */
    .sub-nav__list {
        height: var(--subnav-height-mobile);
        padding: 0 var(--space-3);
    }
    
    /* Logo: показываем только иконку на мобильных */
    .logotype {
        display: flex; 
        align-items: center;
    }
    .logo-info {
        display: none; /* Скрываем текст логотипа */
    }
    .logo-icon {
        width: var(--touch-target-min);  /* Минимальный touch target 44px */
        height: var(--touch-target-min);
    }
    
    /* Theme toggle: сохраняем минимальный touch target */
    .theme-toggle {
        width: 36px;
        height: 36px;
        margin-left: var(--space-2);
    }
    
    .game-specs {width: 100%; padding: 2% 0; margin: 0;}
    .tabs-nav li {float: none;}
    .tabs-nav li:not(:first-of-type) {border-left: 1px solid var(--border-light);}
    .title-list { font-size: var(--text-md); }
    .torrent-item__title { width: calc(100% - 120px); }
    .torrent-item__version { margin-bottom: var(--space-1); }
    .foldclose::before { font-size: 18px; }


    .card-search__title a {white-space: wrap;}
    .card-search__title a {white-space: wrap;}

    /* Old .search-wrap removed - using .search component */
    .hidefav {display: block;}
    .switch-container {margin-right: 0;}
    .min-details {position: relative; left: -15px; right: 0; top: -4px; margin-bottom: var(--space-3); font-size: 15px; font-weight: 500; -webkit-font-smoothing: antialiased;}
    .short-upd__body .name {font-size: 20px; margin: 0 0 var(--space-3) 0;}
    /* Game Hero Mobile */
    .game-hero {
        display: flex;
        flex-direction: column;
        gap: var(--section-gap);
        margin-block-end: 0;
    }
    .game-hero__poster {
        margin-inline: auto;
    }
    .game-hero__info {
        width: 100%;
    } 
    .steam-score {display: block; padding-bottom: 2px;}
    .steamreviews {margin-top: var(--inline-gap); background: #f6f6f6; padding: var(--inline-gap) var(--element-gap);}
    .release-note {font-size: 1.1em; margin: var(--space-4) 0;}
    .btn-download--hero {display: none;}
    .game_desc {margin: var(--space-3) 0 var(--space-1) 0;}
    .game-screenshots__title, .game-video__title {font-size: 20px;}
    .game-screenshots__list > a.fresco, .game-screenshots__hidden > a.fresco {width: calc((100% - 12px) / 2);} 
    .imglogo {margin: var(--space-4) 0;}
    .imglogo img {width: 240px;}
    .version-notice .ac_ver {display: block; margin-top: 4px; margin-bottom: -14px;}
    .release-info__size {padding: 0; margin: 3px 0 0 0; border: none;}
    .release-info__size b {color: #7f7f7f; border-bottom: 2px dotted #c5c5c5; line-height: 24px;}
    .spoiler-details {font-size: 16px; background-size: 11px;}
    .rels-c {display: flex; flex-wrap: wrap; justify-content: space-around; margin-right: 0px;}    
    .comm__meta > span:nth-child(4) {display:none;}
    .comm-form__guest {flex-direction: column; align-items: stretch;}
    .comm-form__guest .comm-form__input {max-width: 100%;}
    .ui-dialog {width:100% !important;}
    .upop-left, .upop-right {float:none !important; width:100% !important; margin:0; padding:0 var(--card-padding);}
    .upop-left {margin-bottom: var(--space-3); text-align:center;}
    #dofullsearch, #searchsuggestions span.seperator {display:none !important;}
    .bottom-page {display:none;}
    .dle-comments-navigation .bottom-page {display: inline-block;}
    .pprev, .pnext {padding: 0px 4px 1px 4px;}
    .page-navi a, .page-navi span {padding: 0px 3px;}
    #nav-load {display: inline-block;}
    
    /* Адаптивная пагинация - Mobile */
    .pagination-wrapper {
        margin: var(--space-5) 0;
    }

    .pagination-list {
        gap: var(--space-1);
    }
    .pagination-list a,
    .pagination-list span {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
    }
    .pagination-prev a,
    .pagination-next a {
        width: 36px;
        height: 36px;
    }
    .pagination-prev > i,
    .pagination-next > i,
    .pagination-prev > span,
    .pagination-next > span {
        width: 36px;
        height: 36px;
    }
    .pagination-load-more a {
        height: 48px;
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    /* Old search styles removed - using .search component */
    
    /* Search - Mobile fullscreen adjustments */
    .search__form {
        padding: 0 var(--space-3);
        padding-top: env(safe-area-inset-top);
    }
    
    .search__input {
        font-size: 16px; /* Prevent iOS zoom on focus */
    }
    
    .search__input:focus {
        font-size: 16px;
        font-weight: 500;
    }
    
    .sort-hide {height: 34px; padding: 0 18px;}
    .sort-hide span {display: none;}
    .sort-hide:before {right: 12px;}
    #news_set_sort {left: auto; right: 0;}
    .btn-download, .btn-download--alt {font-size: 1.0625em; overflow: hidden;}
    .game_block_action {right: 0; left: 0; bottom: -16px; text-align: center;}
    .torrent-item__size { font-size: 13px; }
    .torrent-item__btn { font-size: var(--text-md); padding: var(--space-1) var(--space-3); }

    #searchsuggestions {width: 100% !important;}
    .download-actions {flex-wrap: wrap; justify-content: center;}
    .download-actions .download-actions__item:first-child {margin-right: 0;}
    .torrent-item__title { width: calc(100% - 100px); padding-left: 20px; font-size: var(--text-md); }
    .torrent-item__title::after { width: 14px; height: 14px; }
    .foldclose::before { right: -22px; font-size: 16px; }
    .torrent-item__download { bottom: var(--space-3); }
    .card-search__link {float: none;}

    .carusel-box {min-height: clamp(286px, 86vw, 349px);}

    .item-top {width: clamp(128px, 40vw, 175px); height: auto;}
    .item-top .imgbox {height: clamp(176px, 58vw, 228px);}

    
    /* Пагинация - экстремально узкие экраны */
    .pagination-list a,
    .pagination-list span {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
        padding: 0 2px;
    }
    .pagination-prev a,
    .pagination-next a,
    .pagination-prev > i,
    .pagination-next > i,
    .pagination-prev > span,
    .pagination-next > span {
        width: 32px;
        height: 32px;
    }
    .pagination-load-more a {
        height: 44px;
        font-size: 13px;
        gap: 8px;
    }
    
    /* Навигация комментариев - адаптивная ширина */
    .add-comment__navigation a {
        min-width: auto;
        width: 100%;
    }
}

@media screen and (max-width: 360px) {
    .card-search {text-align: center;}
    .card-search__poster {margin: 0 auto 12px;}
    .card-search__actions {padding: 0;}
    .save-buttons input[type="button"] {padding: 7px 10px !important;}
}

/*--- Dark Theme ---*/
html.dark body {
    color-scheme: dark;
    
    /* Backgrounds */
    --bg-body: #101014;
    --bg-card: #1c1c20;
    --bg-secondary: rgba(112, 129, 137, 0.15);
    --bg-tertiary: #26272e;
    --bg-hover: rgba(255, 255, 255, 0.06);
    
    /* Text */
    --text-main: #ffffff;
    --text-secondary: #858889;
    --text-muted: #6a6d6f;
    
    /* Borders */
    --border-light: #101014;
    --border-medium: #1d1d1d;
    --border-dark: #000;
    
    /* Accent */
    --accent-dark: #58bd44;
    --accent-darker: #378228;
    
    /* Navigation */
    --nav-btn-bg: #4e515b4a;
    --nav-btn-active: #5a6076;
    
    /* Tags */
    --tag-bg: rgba(112, 129, 137, 0.15);
    --tag-color: #878787;
    
    /* Shadows */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.5);
    
    /* Inputs */
    --input-border: #16161a;
    
    /* Menu */
    --menu-dropdown-bg: #2f2f35;

    /* Links */
    --link-color: #60a5fa;
    --link-hover: #93c5fd;

    /* Danger/Error */
    --danger: #f87171;
    --danger-hover: #ef4444;
    --danger-bg: #291414;

    /* Success */
    --success: #4ade80;
    --success-light: #6ee7b7;

    /* Text additions */
    --text-placeholder: #6a6d6f;

    /* Ratings */
    --rating-good: #4ade80;
    --rating-medium: #fbbf24;
    --rating-poor: #f87171;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);

    -webkit-font-smoothing: antialiased;
}
.dark .fav-game {background: #262626; border: 1px solid #262626; color: #d6d6d6;}

/* Search Component - Dark Theme */
.dark .search__toggle {
    color: rgba(255, 255, 255, 0.6);
}
.dark .search__toggle:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.dark .search__input {
    color: #fff;
}
.dark .search__input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}
.dark .search__submit {
    color: rgba(255, 255, 255, 0.5);
}
.dark .search__clear {
    color: rgba(255, 255, 255, 0.4);
}
.dark #searchsuggestions {background: #393b46; box-shadow: 0 0 0 3px rgb(0 0 0);}
.dark #searchsuggestions a:hover {background-color: rgb(0 0 0 / 16%);}
.dark #searchsuggestions a, .dark #searchsuggestions span.notfound {border-bottom: 1px solid #17191d;}
.dark .card-search__title a:hover {color: #fff;}
.dark .berrors {background: rgba(112,129,137,.15); border: 1px solid #1d1d1d; color: #bfbfbf;}
.dark .main_catmenu_two a {color: #e4e4e4;}
.dark .main_catmenu_two a:hover {color: #fff;}
.dark .menu-headnav {color: #e4e4e4;}
.dark .menu-headnav:hover {box-shadow: 0px 0px 0px 2px #10101480;}
.dark .menu-headnav.open {box-shadow: 0px 0px 0px 2px #101014bd;}


.dark .years-item:hover {background-color: var(--bg-hover);}

/* Years Tags - Dark Theme */
.dark .years-head {
    color: rgba(255, 255, 255, 0.5);
}

.dark .years-head::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1) 50%, transparent);
}

.dark .year-tag {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    border-color: transparent;
}

.dark .year-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: transparent;
    box-shadow: none;
}

.dark .year-tag--current {
    background: rgba(99, 184, 20, 0.15);
    color: #8ed44a;
    border-color: rgba(99, 184, 20, 0.2);
}

.dark .year-tag--current:hover {
    background: rgba(99, 184, 20, 0.25);
    color: #fff;
    border-color: rgba(99, 184, 20, 0.4);
    box-shadow: none;
}

.dark .year-tag--retro {
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark .year-tag--retro:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: transparent;
}



/* Упрощённые карточки - тёмная тема */
.dark .card-game:hover .card-game__title a {color: #fff;}

.dark .miniprofile .avatar:before {color: #58586c;}
.dark .account-menu_name {color: #fff;}
.dark .account-menu_profile {color: #adadad;}
.dark .download-header__row--secondary {border-top-color: #333;}
.dark .lb-menu li.exit {border-top: 1px solid #101014;}
.dark .lb-menu li a {color: #fff;}
.dark .lb-menu li a:hover {background-color: #1c1c20;}


.dark .item-top__title a:hover, .dark .item-top:hover .item-top__title a {color: #fff;}






.dark .lmenu-name {color: #fff;}
.dark .lmenu-nav a {color: #fff; opacity: 0.85;}
.dark .actual-box::-webkit-scrollbar-thumb {background: #434953;border-radius:10px;}
.dark .actual-box::-webkit-scrollbar-track-piece {background: #cecfd014;}

.dark .open_alltag {background: rgb(39 44 48); border: 1px solid #1d1d1d; border-top: 2px solid #1c1c1c;}
.dark .open_alltag:hover, .dark .open_alltag a:hover {color: #fff;}

.dark .pprev, .dark .pnext {border: 2px solid #101014; background: #272c30;}

.dark .head-publ {color: #fff;}
.dark main .list_lastgame:nth-child(2n+1) {background: #101014;}
.dark .list_title {color: #b4b4b4;}

.dark .subhnamever {font-weight: 500; color: #fdce45;}
.dark .ul-details li > span:first-child {font-weight: 400;}
.dark .ulgenre a, .dark .link-year {border-bottom: none;}
.dark .ulgenre a:hover, .dark .link-year:hover {color: #fff;}
.dark .release-note {font-weight: 400;}
.dark .release-note__info, .dark .release-note .fa-square-question {color: #6a6d6f; border-color: #565656;}
.dark .release-note__info:hover, .dark .release-note .fa-square-question:hover {color: #acb2b8;}
.dark .net_header {background: #39424f54; color: #96bd4c; font-weight: 400;}

.dark .btn-download--hero { background: var(--accent-dark); }
.dark .btn-download--hero:hover { background: var(--accent-hover); }

.dark a.btn-download--alt {
    border-color: #3a3a40;
    color: #c8c8c8;
}
.dark a.btn-download--alt::before { color: #6a6a70; }
.dark a.btn-download--alt:hover {
    background: #252528;
    border-color: #4a4a50;
}
.dark a.btn-download--alt:hover::before { color: var(--accent); }
.dark .btn-download--alt-sub { color: #707075; }
.dark .game-video__title {text-transform: uppercase; color: #858889; font-weight: 500; font-size: 16px;}


.dark .box-steamrating {color: #c8c8c8;}
.dark .steam-toggle:hover, .update-toggle:hover {color: #4c4c4c;}
.dark .game-notice {
    background: linear-gradient(135deg, #2d2a1f 0%, #252520 100%);
    color: #e0d9c8;
}
.dark .game-notice::before { color: #f59e0b; }
.dark .game-notice__title { color: #c9a227; }
.dark .game-notice b { font-weight: 500; color: #7aa5d1; }
.dark .game-notice a { color: #8bb8e8; }
.dark .game-notice a:hover { color: #afd4ff; }
.dark .download-header {border-top-color: #1c1c20;}
.dark .download-header__item {background: transparent; border: none;}
.dark .download-header__item:hover {background: transparent; border: none;}
.dark .download-header__value {color: #e0e0e0;}
.dark .download-header__icon {color: #707070;}
.dark .download-header__badge--early {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Game Hero Dark Theme */
.dark .game-hero__poster-wrap { background: #2a2a30; box-shadow: 0 10px 30px rgba(0,0,0,0.4); }

.dark .game-hero__status-tag { background: #2a2a30; color: #9a9a9a; }
.dark .game-hero__status-tag--license { background: #4a4a50; color: #fff; }
.dark .game-hero__status-tag--early { background: rgba(245, 158, 11, 0.15); color: #f5b34a; }
.dark .game-hero__status-tag--full { background: rgba(99, 184, 20, 0.15); color: #8ed44a; }
.dark .game-hero__version-row { border-bottom-color: rgba(255,255,255,0.08); }
.dark .game-hero__ver-pill { background: #e0e0e0; color: #1a1a1a; }
.dark .game-hero__value--tags a { border-bottom-color: rgba(255,255,255,0.15); }
.dark .game-hero__steam { background: rgba(255,255,255,0.04); }
.dark .game-hero__steam-icon { color: #e0e0e0; }
.dark .game-hero__notice--updated { background: rgba(99, 184, 20, 0.12); color: #8ed44a; }
.dark .game-hero__notice--waiting { background: rgba(245, 158, 11, 0.12); color: #f5b34a; }

.dark .spoiler-details {background: #292b2f; border: 1px solid #161616; color: #c8c8c8;}
.dark .spoiler-details:hover {background: #303236; border-color: #444; color: #fff;}
.dark .spoiler-details--open {background: #1c1c20; border-bottom: 1px solid #1c1c20;}
.dark .torrent-details {border: 1px solid #000; background: #1c1c20; color: #b9b9b9;}
.dark .spoiler-details__content .opencast {
    background: #1c1c20;
    border: 1px solid #161616;
    border-top: none;
    color: #c8c8c8;
}

.dark a.btn-download {background: var(--accent-dark);}
.dark a.btn-download:hover {background: var(--accent-hover); box-shadow: none;}
.dark a.btn-download--alt {background: #303a4a;}

.dark .notice_info {border: 2px solid #000; background-color: #25252a;}
.dark .notice_info .close {color: #181819;}
.dark .notice_info .close:hover {color: #000;}
.dark .torrent-section.highlighted {background: #292b2f; outline: 10px solid #292b2f;}
/* Torrent Item Dark Theme */
.dark .torrent-section.highlighted .torrent-item { background: #212226; }
.dark .torrent-item { background: rgba(112, 129, 137, 0.1); }
.dark .torrent-item[opencast2]:hover,
.dark .torrent-item[opencast3]:hover,
.dark .torrent-item[opencast4]:hover { background: rgba(112, 129, 137, 0.2); }
.dark .torrent-item.activesp { background: rgba(112, 129, 137, 0.2); border-color: rgba(0, 0, 0, 0.5); }
.dark .torrent-item__version { color: #707070; }
.dark .torrent-item__size { color: inherit; }
.dark .torrent-item__btn { background: var(--accent-darker); border-bottom-color: var(--accent-dark); }
.dark .torrent-item__btn:hover { background: var(--accent-dark); }
.dark .foldclose::before { color: #d4a100; }
.dark .torrent-item.tm5,
.dark .torrent-item.tm6 { background: rgba(103, 122, 159, 0.15); }
.dark .torrent-item.tm5:hover,
.dark .torrent-item.tm6:hover { background: rgba(103, 122, 159, 0.25); }
.dark .torrent-item.tm5.activesp,
.dark .torrent-item.tm6.activesp { background: rgba(103, 122, 159, 0.25); border-color: rgba(0, 0, 0, 0.3); }
.dark .title-list {
    background: rgba(255, 255, 255, 0.03);
    border-left-color: var(--accent);
    color: var(--text-main);
}

.dark .title-list i {
    color: var(--accent);
}
.dark .event-message {font-weight: 400;}


.dark .team-item {border-bottom: 1px solid #101014;}

.dark .short-net__body .name:hover {color: var(--link-hover);}
.dark .side_net-updinfo span {color: #6a6d6f;}
.dark .button_net a {color: #fff; background-color: #25262b;}
.dark .button_net a:hover {color: #fedc80;}

.dark .short-upd__body .name:hover {color: #fff;}
.dark .short-upd__info {color: #adadad;}
.dark .short-upd__info span {color: #6a6d6f;}



.dark .tabs-nav li {background-color: #292b33; color: #e4e4e4; border: 1px solid #19191c; border-bottom: 2px solid #17191d; font-weight: 400;}
.dark .tabs-nav li:hover, .dark .tabs-nav li.active {background-color: #393b46;}
.dark .tabs-nav li:not(:first-of-type) {border-left: none;}
.dark .add-comment__navigation a {background-color: #3b3e49; color: #fff;}
.dark .add-comment__navigation a:hover {background-color: #292b34;}

.dark .section-heading .commcount {background: #2f3135;}
.dark .comm-form__input {
    background: #2a2c35;
    border-color: #3a3c45;
    color: #fff;
}
.dark .comm-form__input::placeholder {color: #ffffffb5;}
.dark .comm--pinned {border-bottom: 1px solid #101014;}
.dark #dle-comments-list > .comments-tree-list > .comments-tree-item {border-top: 1px solid #101014;}
.dark .comm__date {color: #858889;}
.dark .fixcoms {color: #c8c8c8;}
.dark [steam_updinfo] {color: #6a6d6f;}
.dark [steam_updinfo] .updinfo_button {border-bottom: 1px dashed #565656;}
.dark [steam_updinfo]:hover {color: #acb2b8;}
.dark .comm__actions a {color: #858889;}
.dark .comm__actions a:hover {color: #fff;}

.dark input[type="submit"].bbcodes {background-color: var(--accent-darker);}
.dark select {background-color: #1f2125; border: 1px solid #101014; border-radius: 6px; color: #bfbfbf;}
.dark #dlefastreplycomments {background: #1c1c20; border: 1px solid #1c1c20;}
.dark #dlefastreplycomments textarea {border: 2px solid #16161a; background: #26272e; color: #fff;}
.dark .comments-edit-area {background: inherit; border: inherit;}
.dark .comments-edit-area textarea {border: 2px solid #16161a; background: #26272e;}
.dark input[type="submit"].bbcodes, .dark input[type="button"].bbcodes, .dark input.bbcodes, .dark .ui-dialog-buttonset button {background-color: var(--accent-dark);}

.dark .pm tr:nth-child(2n+2), .dark .userstop tr:nth-child(2n+2) {background-color: #101014;}
.dark .pm tr td, .dark .userstop tr td {border: 1px solid #000;}

.dark .user-prof {border: 1px solid #101014; background-color: #1c1c20;}
.dark .up-first {background-color: #232323;}
.dark .up-second {background-color: #101014;}
.dark .up-third {border-bottom: 1px solid #fdda60; border-top: 1px solid #fdda60;}
.dark .up-third li:nth-child(2n) {background-color: #101014;}
.dark .up-third input {color: #fff; background: #1c1c20;}
.dark input[type="text"], .dark input[type="password"] {border: 2px solid #16161a; background: #26272e; color: #fff;}

.dark .wait-box {border-top: 1px solid #2e2e2e;}
.dark .waithead {color: #fff;}
.dark .catext {color: rgba(255, 255, 255, 0.8); border-top-color: #252528;}
.dark .catext img {box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);}
.dark .catul {color: rgba(255, 255, 255, 0.65);}

.dark .si-soft {border: 1px solid #101014;}
.dark .si-upd {color: #6a6d6f;}
.dark .si-soft:hover {background: #101014;}

.dark .static-pages {color: #ffffffb5;}
.dark .title_spoiler {background: #292b2f; border: 1px solid #333333; border-left: 2px solid #4b5a6f;}
.dark .title_spoiler a {color: #c8c8c8;}
.dark .text_spoiler {border: 1px solid #000; background: #1c1c20;}
.dark textarea {background: #26272e; color: #fff; border: 2px solid #16161a;}

.dark .ya-site-suggest__iframe {background: #36363a !important;}
.dark .ya-site-suggest-list {border: none !important; box-shadow: none !important;}

.dark .ui-dialog {background-color: #2f2f35; box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 80%);}
.dark .ui-dialog-titlebar {border-bottom: 1px solid #101014;}
.dark .ui-dialog-title {color: #fff;}
.dark .upop-img {border: 2px solid #1f2025;}
.dark .offline, .dark .online {background: #ffffff36;}
.dark .ui-icon-closethick {background-color: #1f2125; color: #9a9b9d;}
.dark .ui-dialog-buttonpane {background-color: #1f2125 !important; border-top: 1px solid #101014 !important;}

/*--- Section Headers (Modern) ---*/
.section-title {
    display: flex;
    align-items: center;
    gap: var(--element-gap);
    font-size: 22px;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--heading-margin);
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-title i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 16px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}


.section-title span {
    position: relative;
}

/* Specific Icon Colors (Optional overrides) */
.section-title .fa-fire { color: #FF5252; background: rgba(255, 82, 82, 0.1); }

.section-title .fa-hourglass-half { color: #f59e0b; background: rgba(245, 158, 11, 0.1); }

.section-title .fa-rotate { color: #3B82F6; background: rgba(59, 130, 246, 0.1); }

.section-title .fa-crown { color: #FBBF24; background: rgba(251, 191, 36, 0.1); }

.section-title .fa-layer-group { color: #8B5CF6; background: rgba(139, 92, 246, 0.1); }

.section-title .fa-arrows-rotate { color: #3B82F6; background: rgba(59, 130, 246, 0.1); }
.section-title .fa-heart { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

/* Generic Icon for Category Headers */
h1.cat-h1 {
    display: flex;
    align-items: center;
    gap: var(--element-gap);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: var(--heading-margin);
    line-height: 1.2;
    letter-spacing: 0.5px;
}

h1.cat-h1::before {
    content: "\f11b"; /* fa-gamepad */
    font-family: "Font Awesome 6 Pro";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 16px;
    color: var(--text-secondary);
    font-weight: 900;
    transition: all 0.3s ease;
}

h1.cat-h1:hover::before {
    background: var(--accent);
    color: #fff;
    transform: rotate(-10deg);
}

/* Legacy .text-blue, .text-danger, .section-icon removed - now using .section-title i */

/* Fix spacing for wait box header */
.wait-box .section-title { margin-bottom: var(--heading-margin) !important; }

/* Updates to section-title margin */
.section-title { margin-bottom: var(--heading-margin); }

/*--- MODERN PAGINATION ---*/
.pagination-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    margin: var(--space-7) 0;
    width: 100%;
    grid-column: 1 / -1; /* Растянуть на всю ширину grid-контейнера */
}

/* Load More Button (Glass) */
.pagination-load-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 56px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08); /* Light border */
    border-radius: 100px; /* Capsule */
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.pagination-load-more a:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.05);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.pagination-load-more a:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pagination-load-more a i {
    font-size: 16px;
    transition: transform 0.5s ease;
}

.pagination-load-more a:hover i {
    animation: rotate 0.6s ease-in-out;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(180deg); }
}

/* Pagination Controls (Floating Capsule) */
.pagination-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 8px 12px;
    border-radius: 100px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0,0,0,0.03);
    border: none;
    width: fit-content;
    min-width: 200px; /* Стабильная минимальная ширина */
    margin: 0 auto;
}

/* Пустые контейнеры prev/next скрываем с помощью :empty */
.pagination-prev:empty,
.pagination-next:empty {
    display: none;
}

.pagination-list {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 500;
}

/* Page Numbers */
.pagination-list a,
.pagination-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 0 4px;
    border-radius: 50%; /* Circle links */
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
}

.pagination-list a:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-main);
    transform: none; /* Removed scale to fix jumping */
}

/* Active Page */
.pagination-list span:not(.nav_ext) {
    background-color: var(--text-main); /* Dark circle for active */
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transform: scale(1.05);
}

.pagination-list span.nav_ext {
    color: var(--text-muted);
    background: transparent;
    cursor: default;
    min-width: 20px;
}

/* Prev/Next Buttons */
.pagination-prev a,
.pagination-next a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08); /* Subtle border */
    color: var(--text-main);
    transition: all 0.2s ease;
}

.pagination-prev a:hover,
.pagination-next a:hover {
    background-color: #fff;
    border-color: var(--accent);
    color: var(--accent);
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 184, 20, 0.2);
}



/* Disabled State */
.pagination-prev > i,
.pagination-next > i,
.pagination-prev > span,
.pagination-next > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.02);
    color: rgba(0, 0, 0, 0.2);
    opacity: 1;
    cursor: default;
}

/*--- MEGA NAV DARK THEME ---*/
.dark .mega-nav__dropdown {
    background: rgba(30, 30, 35, 0.96);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0,0,0,1);
}

.dark .mega-nav__sidebar {
    background: rgba(0, 0, 0, 0.15);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.dark .mega-nav__title {
    color: rgba(255, 255, 255, 0.4);
}

.dark .mega-nav__tab {
    color: rgba(255, 255, 255, 0.6);
}

.dark .mega-nav__tab i {
    color: rgba(255, 255, 255, 0.3);
}

.dark .mega-nav__tab:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.dark .mega-nav__tab.active {
    background: rgba(255, 255, 255, 0.08); /* White glass */
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.dark .mega-nav__tab.active i {
    color: var(--accent);
}

.dark .mega-nav__content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
}
.dark .mega-nav__content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

.dark .mega-nav__panel > header, 
.dark .mega-nav__panel-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark .mega-nav__panel > header h3, 
.dark .mega-nav__panel-header h3 {
    color: #fff;
}

.dark .mega-nav__link {
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.7);
}

.dark .mega-nav__link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .categories-column__title {
    color: rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark .category-item {
    color: rgba(255, 255, 255, 0.8);
}

.dark .category-item i {
    color: rgba(255, 255, 255, 0.3);
}

.dark .category-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .category-item:hover i {
    color: var(--accent);
}

.dark .years-head {
    color: #fff;
}
.dark .years-head span {
    color: rgba(255, 255, 255, 0.4);
}
.dark .years-head::after {
    background: rgba(255, 255, 255, 0.1);
}

.dark .year-tag {
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.05);
}

.dark .year-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .year-tag--current {
    background: rgba(99, 184, 20, 0.15);
    color: #a3e635;
    border-color: rgba(99, 184, 20, 0.4);
}
.dark .year-tag--current:hover {
    background: var(--accent-dark);
}

/* User Panel Dark Override */
.dark .user-panel__dropdown {
    background: rgba(30, 30, 35, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.dark .user-panel__dropdown:before {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.dark .user-panel__card {
    background: rgba(255, 255, 255, 0.02);
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.dark .user-panel__card-avatar img {
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .user-panel__card-name {
    color: #fff;
}

.dark .user-panel__card-role {
    color: rgba(255, 255, 255, 0.5);
}

.dark .user-panel__nav li a {
    color: rgba(255, 255, 255, 0.7);
}

.dark .user-panel__nav li a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.dark .user-panel__nav li a i {
    color: rgba(255, 255, 255, 0.4);
}

.dark .user-panel__nav li a:hover i {
    color: var(--accent);
}

.dark .user-panel__logout-wrap {
    border-top-color: rgba(255, 255, 255, 0.05);
}

.dark .user-panel__logout-link {
    color: #ff5b5b;
}

.dark .user-panel__logout-link:hover {
    background: rgba(255, 91, 91, 0.1);
}

.dark .user-panel__field {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.dark .user-panel__field:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

.dark .user-panel__field::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.dark .user-panel__footer {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Pagination Dark Theme Overrides */
.dark .pagination-load-more a {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.8);
    box-shadow: none;
}

.dark .pagination-load-more a:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark .pagination-inner {
    background: rgba(30, 30, 35, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.05);
}

.dark .pagination-list a, 
.dark .pagination-list span {
    color: rgba(255, 255, 255, 0.6);
}

.dark .pagination-list a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.dark .pagination-list span:not(.nav_ext) {
    background-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.dark .pagination-prev a,
.dark .pagination-next a {
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
}

.dark .pagination-prev a:hover,
.dark .pagination-next a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

.dark .pagination-prev > i,
.dark .pagination-next > i,
.dark .pagination-prev > span,
.dark .pagination-next > span {
    background-color: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.15);
}


/* Actual Box Dark Theme */
.dark .top-card:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

.dark .top-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.dark .top-card__media::before {
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
    background: rgba(0,0,0,0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .top-card__title {
    color: #fff;
}
.dark .top-card:hover .top-card__title {
    color: var(--accent);
}

/* Sidebar Dark Mode */
.dark .block-right {
    background: rgba(30,30,35,0.6); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.02);
}

.dark .nav-group__header {
    color: #fff;
    border: none;
}

.dark .nav-group__header i {
    background: rgba(99, 184, 20, 0.15);
    color: var(--accent);
}

.dark .nav-item {
    color: rgba(255,255,255,0.6);
}

.dark .nav-item__icon {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.3);
}
/* Short Item Dark Mode */
.dark .card-game {
    background: #252528; /* Solid dark card for better contrast */
    border: 1px solid rgba(255,255,255,0.03); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.dark .card-game__body {
    background: #252528;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.dark .card-game:hover {
    background: #2a2a2e;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    border-color: rgba(255,255,255,0.08);
}

.dark .card-game__title a {
    color: rgba(255,255,255,0.9);
}

.dark .card-game:hover .card-game__title a {
    color: #fff;
}
.dark .nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

.dark .nav-item:hover .nav-item__icon {
    background: rgba(255,255,255,0.1);
    color: var(--accent);
}

.dark .nav-item.active {
    background: var(--accent-dark);
    color: #fff;
}
/* Main Layout Dark Mode */
.dark .main {
    background: rgba(30,30,35,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.02);
}

.dark body { 
    background-color: #101014; /* Deep dark background for page */
}
/* Catext Dark Mode */
.dark .catext {
    background: rgba(30,30,35,0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.02);
}

.dark .catext h2 {
    color: #fff;
}

.dark .catext p {
    color: rgba(255,255,255,0.7);
}

.dark .catext img {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.dark .catext img:hover {
    opacity: 1;
}

/*--- Download List (Clean Row Design) ---*/
.alt-downloads__list {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    overflow: hidden;
    gap: 0;
}

.dl-item {
    display: grid;
    grid-template-columns: 50px 1fr 80px 130px 32px;
    /* Columns: Icon | Info | Size | Button | Toggle */
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s ease;
    cursor: pointer;
    position: relative;
}

.dl-item:last-child {
    border-bottom: none;
}

.dl-item:hover {
    background-color: var(--bg-secondary);
}

.dl-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 20px;
    transition: all 0.3s ease;
}

.dl-item:hover .dl-item__icon {
    background: var(--accent);
    color: #fff;
    /* Removed heavy box-shadow */
}

.dl-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; 
}

.dl-item__title {
    font-size: 16px;
    font-weight: 600; /* Refined weight */
    color: var(--text-main);
    line-height: 1.3;
    letter-spacing: -0.01em; /* Modern tight spacing */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dl-item__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted); /* More subtle color */
    padding-top: 2px; /* Slight optical separation */
}

.dl-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dl-item__meta i {
    font-size: 12px;
    color: var(--text-muted);
}

/* Download Button */
.dl-item__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    height: 42px;
    padding: 0 16px;
    background: transparent;
    color: var(--text-main);
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    transition: all 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    text-decoration: none;
    border: 1px solid var(--border-light); /* Default outline */
}

.dl-item:hover .dl-item__btn {
    border-color: #dbe0e6; /* Slightly darker border on row hover */
}

.dl-item__btn:hover {
    background: var(--accent) !important;
    color: #fff;
    border-color: transparent !important;
}
.dl-item__btn i { font-size: 16px; }

/* Expand/Toggle Icon */
.dl-item__toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-muted);
    transition: 0.2s;
}

.dl-item:hover .dl-item__toggle {
    background: rgba(0,0,0,0.05);
    color: var(--text-main);
}

/* Specific Types */
/* Specific Types */
.dl-item--gog .dl-item__icon { color: #9d3dc3; background: rgba(157, 61, 195, 0.1); }
.dl-item--gog:hover .dl-item__icon { background: #9d3dc3; color: #fff; }
.dl-item--gog .dl-item__btn:hover { background: var(--text-main) !important; }

.dl-item--storage .dl-item__icon { color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
.dl-item--storage:hover .dl-item__icon { background: #3b82f6; color: #fff; }
.dl-item--storage .dl-item__btn:hover { background: var(--text-main) !important; }

/* Dark Theme Adjustments */
.dark .alt-downloads__list {
    background: var(--bg-card);
    border-color: var(--border-medium);
}

.dark .dl-item {
    background: var(--bg-card);
    border-color: var(--border-medium);
}

.dark .dl-item:hover {
    background: var(--bg-tertiary);
}

.dark .dl-item__btn {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
}

.dark .dl-item__btn:hover {
    background: var(--accent) !important;
    color: #fff;
}

.dark .dl-item:hover .dl-item__btn {
    border-color: rgba(255, 255, 255, 0.2);
}

.dark .dl-item:hover .dl-item__toggle {
    background: rgba(255,255,255,0.05);
    color: #fff;
}

/* Expanded content details */
.dl-item__details {
    display: none;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-light);
    padding: 24px;
    margin: 0; 
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.02);
}

.dark .dl-item__details {
    background: #1a1a1e;
    border-color: var(--border-medium);
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.2);
}

/* Responsive */
@media screen and (max-width: 640px) {
    .dl-item {
        grid-template-columns: 1fr auto auto;
        /* Columns: Info | Size | Button (icon and toggle hidden) */
        gap: 12px;
        padding: 14px 16px;
    }
    
    .dl-item__icon {
        display: none;
    }
    
    .dl-item__size {
        font-size: 13px;
    }
    
    .dl-item__btn {
        height: 36px;
        padding: 0 16px;
        font-size: 13px;
    }
    
    .dl-item__toggle {
        display: none; 
    }
}

.dl-item__icon img {
    width: 22px; /* Matches font-size: 20px visual weight */
    height: 22px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.dl-item:hover .dl-item__icon img {
    transform: scale(1.1);
}

.dl-item__size {
    font-size: 13px;
    font-weight: 500;
    font-variant-numeric: tabular-nums; /* Monospaced numbers */
    color: var(--text-secondary);
    white-space: nowrap;
    text-align: right;
    letter-spacing: 0.3px; /* Slightly improved readability for numbers */
}

/* Direct Links Section Label */
.alt-downloads__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 16px 20px 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid var(--border-light);
}

.dark .alt-downloads__label {
    color: var(--text-muted);
    border-top-color: var(--border-medium);
}

/* ===== 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;}

/*--- Виджет помощник ---*/
.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;
    }
}