/*
Theme Name: Byrutor Clone
Theme URI: https://example.com/
Author: Gemini
Author URI: https://example.com/
Description: A clone of byrutgame.org theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, two-columns, grid-layout, gaming
Text Domain: byrutor-clone
*/

/*--- SET BASE ---*/
* {background: transparent; margin: 0; padding: 0; outline: none; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
*::selection{background:#fedc80;}
*::-moz-selection{background:#fedc80;}
ol, ul {list-style: none;}
hr {margin: 0 15px; border-top: 1px solid #ddd;}
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: #2b2b2b; outline: none; background: #f3f3f3;}
body.hide {opacity: 0;}
body {opacity: 1; transition: opacity 0.3s ease;}

/* Night mode styles */
body.night-mode {background: #1a1a1a; color: #fff;}
body.night-mode .main {background: #2a2a2a; color: #fff;}
body.night-mode .header-main {background: #2a2a2a; color: #fff;}
body.night-mode .sidebar {background: #2a2a2a; color: #fff;}
body.night-mode .short_title a {color: #fff;}
body.night-mode .short_title a:hover {color: #fedc80;}
body.night-mode .sidebar_widget h3 {color: #fff;}
body.night-mode .sidebar_widget a {color: #fedc80;}
body.night-mode .sidebar_widget a:hover {color: #fff;}
img {max-width:100%; max-height: 100%;}
.clearfix::after {content: ""; display: table; clear: both;}
a {color: #4a84c4; text-decoration: none;}
a:hover, a:focus {color:#1172a6; text-decoration: none;}
h1 {font-size:23px; font-weight: 500;}
h2 {font-size:21px; font-weight: 500;}
h3 {font-size:20px; font-weight: 500;}

.orang_rate {color: #ca3d19;}
.yell_rate {color: #b78322;}
.gr_rate {color: #36920c;}

/*--- 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: #f5f5f5; border-radius: 3px; font-size: 13px; border: 1px solid #ededed;}
input[type="text"]::placeholder, input[type="password"]::placeholder {color: #595959;}
input[type="text"]:focus {}
.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 {font-weight: 500; border: 2px solid #ebebeb; border-radius: 3px; margin-left: 4px; cursor: pointer;}

.imgbox {overflow:hidden; position:relative;}
.imgbox img {width:100%; min-height:100%;}
.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:20px 0;}

/*--- BASIC GRID ---*/
.wrap {max-width:1130px; min-width: 320px; position: relative; margin: 40px auto; margin-bottom: 0;}
.upperwrap {box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.mainwrap {display: flex; justify-content: space-between;}
.main {position: relative; width: calc(100% - 308px); background-color: #fff; padding: 20px 24px; border-radius: 8px 8px 0 0; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.right-nav {position: relative; width: 296px; z-index: 30;}
.info-content {display: flex; justify-content: space-between; position: relative; min-height: 315px;}
.fmainwrap {display: flex; justify-content: space-between; position: relative; min-height: 310px; margin-bottom: 24px;}
.header-main {position: relative; display: flex; align-items: center; justify-content: space-between; height: 56px; background: #fff; color: #000; padding: 0 18px; border-radius: 8px 8px 0px 0px; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.carusel-box {position: relative; background-color: #fff; min-height: 311px; height: auto; margin-bottom: 24px;}
.footer {background: #1e1e1e;min-width: 320px;padding: 25px 0;border-top: 1px solid #2b2b2b;box-shadow: 2px 0px 2px 0 rgb(0, 0, 0);}

.foot-main {background: #1e1e1e;min-width: 320px;padding: 25px 0;border-top: 1px solid #2b2b2b;box-shadow: 2px 0px 2px 0 rgb(0, 0, 0);}
.foot-menu {text-align: center;margin-bottom: 20px;}
.foot-menu a {color: #fff;margin: 0 10px;text-decoration: none;}
.foot-menu a:hover {color: #fedc80;}
.copyright {text-align: center;color: #999;font-size: 14px;}
.copyright p {margin: 5px 0;}
.copyright a {color: #fedc80;text-decoration: none;}
.copyright a:hover {color: #fff;}
.btn-menu-wr {display: none;}
body.night-mode .btn-menu-wr {color: #fff;}

.br_stat {position: relative; display: flex; max-width: 1130px; min-width: 320px; margin: 0px auto; background: #e8e8e8; color: #666; padding: 5px 18px; font-size: 0.96em; border-radius: 0 0 3px 3px; cursor: pointer;}
body.night-mode .br_stat {background: #3a3a3a; color: #ccc;}
.br_stat [class^='br_stat'] {margin-right: 12px;}
.br_stat span {padding-left: 3px; color: #000; font-weight: 500;}
body.night-mode .br_stat span {color: #fff;}
.br_stat::before {position: absolute; right: 14px; top: 6px; color: #b6b6b6;}
body.night-mode .br_stat::before {color: #999;}
.marquee {position: relative; width: 420px; height: 16px; margin-left: 10px; white-space: nowrap; opacity: 1; transition: opacity 0.5s ease; overflow: hidden;}
.marquee-content {display: inline-block; padding-left: 100%; animation: marquee 45s linear 2;}
@keyframes marquee {0% { transform: translateX(0%); } 100% { transform: translateX(-100%); }}

.dist-dashboard {position: absolute; width: 280px; top: 8px; right: 8px; background-color: #2f2f32; color: #fff; padding: 14px 20px; border-radius: 8px;}
.dist-dashboard_title {font-size: 15px; font-weight: 700;}
.dist-dashboard_feature {padding-top: 6px; line-height: 1.2; font-size: 1.08em;}            
.dist-dashboard_close {position: absolute; top: 7px; right: 7px; width: 16px; height: 16px; transition: transform 0.3s ease; cursor: pointer; background: #636365; color: #2f2f32; border-radius: 20px; line-height: 10px;}
.dist-dashboard_close:hover {transform: scale(1.2);}
.dist_hr {border-top: 1px dashed #636365; padding-top: 10px; margin-top: 10px; text-transform: uppercase; font-weight: 700; font-size: 13px;}

/*--- HEADER ---*/
.logo {position: relative; width: 137px; height: 30px;}
body.night-mode .logo span {color: #fff;}
.logo img {width: 137px; height: 30px;}
.logo:hover {opacity: .8;}
.logo:active::after, .logo:focus-within::after, .logo:focus::after {content: ""; width: 160px; height: 40px; border-radius: 5px; background-color: rgba(100, 116, 149, .08); position: absolute; top: -4px; left: -10px;}

.menu-head {position: relative; display: flex; align-items: center; justify-content: space-between;}
body.night-mode .menu-head {color: #fff;}
.menu-headnav {position: relative; border: 1px solid transparent; border-radius: 4px; padding: 3px 8px; display: inline-block; color: #b1860f; cursor: pointer;}
body.night-mode .menu-headnav {color: #fedc80;}
.menu-headnav:hover {box-shadow: 0px 0px 0px 2px #aa750f2b;}
body.night-mode .menu-headnav:hover {box-shadow: 0px 0px 0px 2px #fedc802b;}
.menu-headnav .far, .menu-headnav .fas {color: #9e9e9e; padding-left: 2px;}
.menu-headnav.open {box-shadow: 0px 0px 0px 2px #b1860fbd; color: #75580a;}
body.night-mode .menu-headnav.open {box-shadow: 0px 0px 0px 2px #fedc80bd; color: #fff;}

.menu-headnav-list {display: none; background-color: #fff; padding: 6px 12px; font-size: 15px; position: absolute; right: auto; left: -10px; top: 48px; width: 170px; z-index: 9999; box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2); border-radius: 8px; line-height: normal;}
body.night-mode .menu-headnav-list {background-color: #2a2a2a; color: #fff;}
.menu-headnav-list li {border-bottom: dashed 1px #e8e8e8;}
body.night-mode .menu-headnav-list li {border-bottom-color: #555;}
.menu-headnav-list .headnav-a {font-weight: 500; color: #333; transition: .3s; display: block; padding: 8px 0;}
body.night-mode .menu-headnav-list .headnav-a {color: #fff;}

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

.search-wrap {position: relative; margin-right: 24px;}
body.night-mode .search-wrap {color: #fff;}
#search_btn {display: none; font-size: 21px; border-radius: 5px; margin: 0 20px 0 12px; cursor: pointer;}
#search_btn::before {font-weight: 700; color: #1a1a1a;}
.search_open #search_btn::before {content: "\e916"; padding: 0 3px;}
.search_open .search-wrap {opacity: 1; visibility: visible;}

#quicksearch {position: relative; width: 325px; display: flex;}
#quicksearch input {width: 100%; height: 38px; line-height: 38px; padding: 0 38px 0 20px; font-size: 1.1em; background: #f3f3f3; color: #3b3b3c; border-radius: 4px; border: none;}
#quicksearch input:focus {background: #fff; border: 1px solid #f1f1f1;}

.search-field {width: 100%; height: 38px; line-height: 38px; padding: 0 38px 0 20px; font-size: 1.1em; background: #f3f3f3; color: #3b3b3c; border-radius: 4px; border: none;}
.search-field:focus {background: #fff; border: 1px solid #f1f1f1;}
body.night-mode .search-field {background: #3a3a3a; color: #fff;}
body.night-mode .search-field:focus {background: #4a4a4a; border-color: #666;}
.search-button {position: absolute; top: 0; right: 0; width: 40px; height: 40px; font-size: 17px; color: #5d5d5d; cursor: pointer; border-radius: 5px;}
body.night-mode .search-button {color: #ccc;}
.search-button::before {font-weight: 900 !important;}

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

.miniprofile {position: relative; color: #909090; display: inline-block; font-size: 15px; line-height: 15px; cursor: pointer; float: right; margin-left: 20px;}
body.night-mode .miniprofile {color: #ccc;}
.miniprofile .avatar {position: relative; width: 32px; height: 32px; border-radius: 20px; margin-right: 16px; background: #fff url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8BAMAAADI0sRBAAAAIVBMVEXJycnW1tZSUlJra2vBwcHQ0NBgYGCcnJyvr697e3uMjIzqNeKvAAACZ0lEQVQ4y32Uz2vbMBTHVZAh7BQdDDk7w1uuFqRNTtqm0mYnGyLCrg547W2wH2lzKiTL1qtburankpGm3V85PcmypcSpDImtj957X31tPRTYIw2CzJlA9kMnD9rT3fh62X56FYRpPT7ld2ds1n7Ka3H4jc85Oj9jyzoc3nImL84a3V60jSVFDDOM8O9f6SYO/3COEGIMIc6OntMNfCuzIjXkMszPXbzPCor1ssbSxu0LEwklMEN4ZuMDTREu/vhxbmETXA18aeGTIpJXnP+o8LXCDBn1UOMoLfEXHaCkGcxzg0OJGQjSthR8UeIL9Rzr1F4h7oPBpXDMLPEfS6xn40J6rLNvYCGs1GbngDuAPUJitSoWagm+saO9hBDiC08QeUEOnG9hM3xhY7kxyE18QEKtixGObJzAVAKBQuOGY6okwrfSe8MyefCgchOnOl5YrqnSawCtleZ8YPAbVZW0Aph//1rHe6Xnb4cK6+jRd42bywqDZeXWhgzuLoPK1ETW4jAJWTjfk8FR9THdvyPNY55o7PO5xK3U+pBXEG1sxXD3yf7OT8Ans2cBKhbOKdnbsKWZO2dsVRHl+cg9gp+hcFO+VYGVvwsXh2CGL48nP1TORhvnW4UTod82mW11hwdL2GireQSdnyUdPtZ0pv6hseWxtq/151A4Prra0TRP13PReI529NQw6x6IQTdLa3E4pnQ/GVBK67EEvflX+VvbkWUwpXfwE+3EanTrMH0RQ2na/3dFHW0O7q0nU+poK3Gbdml/Op38fQlPJB7X44z2JxpH23gsp+kEameWdBffg/IdOAPt1MX/AZDGDe3ZF5MRAAAAAElFTkSuQmCC') no-repeat; background-size: contain; float: right;}
.miniprofile .avatar img {width: 32px; height: 32px; border-radius: 20px;}
.miniprofile .avatar::before {position: absolute; top: 7px; right: -19px; color: #333; font-weight: 700; transition: transform .25s;}
.miniprofile .avatar.active::before {transform: rotate(180deg);}
.avatar:hover::after {content: ""; height: 38px; background-color: rgba(0, 0, 0, 0.05); position: absolute; top: -3px; left: -5px; right: -26px; border-radius: 6px;}
.profile-box {display: none;}
body.night-mode .profile-box {background: #2a2a2a; color: #fff;}
.hidefav {display: none;}
.tgprofile {padding: 6px 5px 2px 12px; font-weight: 500; font-size: 17px; color: #000;}
body.night-mode .tgprofile {color: #fff;}
.profile-box .head-addcomm {margin: 12px 0 10px 0; justify-content: center;}
body.night-mode .profile-box .head-addcomm {color: #fff;}

.fav_hr {width: 2px; height: 17px; background: #e8e8e8; margin: 0 20px;}
body.night-mode .fav_hr {background: #555;}
a.favorite {position: relative; display: flex; align-items: center; gap: 6px; color: #000; font-weight: 500; font-size: 15px;}
a.favorite:hover {color: #000;}
body.night-mode a.favorite {color: #fff;}
body.night-mode a.favorite:hover {color: #fedc80;}
a.favorite::before {font-size: 16px;}
.hidefav.i_bookmark {display: none;} /* fav в профиле */

.switch-container {margin: 0 20px;}
body.night-mode .switch-container {color: #fff;}
.switch {position: relative; display: inline-block; width: 50px; height: 26px;}
.switch input {opacity: 0; width: 0; height: 0;}
.slider {position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #f3f3f3; border: 1px solid #ebecf1; transition: 0.4s; border-radius: 30px;}
body.night-mode .slider {background-color: #4a4a4a; border-color: #666;}                
.slider::before {position: absolute; content: ""; background: #fff; height: 18px; width: 18px; left: 4px; bottom: 3px; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.4); border-radius: 50%; transition: transform 0.5s, background-color 0.5s;}
input:checked + .slider {background-color: #5a6076; border: 1px solid #34373f;}
body.night-mode input:checked + .slider {background-color: #7a7a7a; border-color: #999;}
input:checked + .slider::before {transform: translateX(22px); background: #fff;}
.slider.round {border-radius: 34px;}
.slider.round::before {border-radius: 50%;}

/*--- HEAD Menu ---*/
.nav-menu {position: relative; display: flex; gap: 11px; align-items: center; background: #ffe487; height: 44px; font-size: 16px; border: 2px solid #fdda60; white-space: nowrap; padding: 0 18px; border-radius: 0 0 8px 8px; margin-bottom: 12px;}
body.night-mode .nav-menu {background: #3a3a3a; border-color: #555;}
.main_catmenu_two {position: relative; display: flex; gap: 20px; overflow: auto;}
.main_catmenu_two a {position: relative; display: flex; align-items: center; gap: 4px; color: #b1860f; font-weight: 500; transition: 0.2s; cursor: pointer;}
.main_catmenu_two a:hover {color: #75580a;}
body.night-mode .main_catmenu_two a {color: #fedc80;}
body.night-mode .main_catmenu_two a:hover {color: #fff;}
.main_catmenu_two::-webkit-scrollbar {height: 0;}

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

/*--- HEAD Carou ---*/
.head-carusel, .head-carusel2 {display: flex; flex-wrap: wrap; justify-content: space-between; position: relative; height: auto; overflow: hidden;}

.carouhead {position: relative; display: inline-flex; gap: 8px; font-size: 16px; font-weight: 700; text-transform: uppercase;}
.carouhead .carousp {color: #0c6bb6; border-bottom: 2px dotted #0c6bb6; cursor: pointer;}
.carouhead .carousp:hover {color: #01599f; border-bottom: 2px dotted #01599f;}
.carouhead .carousp.active {color: #000; border-bottom: none; cursor: default;}
.carusel-box .tab2 {display: none;}
.carou_sub {display: block; font-size: 16px; color: #7b7b7b; margin: 4px 0 14px 0;}

.carusel-box.showfull {min-height: 313px; padding: 16px 24px 6px 24px; margin-bottom: 12px; border-radius: 8px; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1); overflow: hidden;}

.itemtop-box {display: block; width: 140px; height: 242px; float: left; overflow: hidden;}
.itemtop-title {position: relative; font-weight: 500; text-overflow: ellipsis; -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;}
.itemtop-title a {color: #272727;}
.itemtop-subtitle {margin-top: 4px; color: #7c7c7c; font-size: 0.94em;}
.itemtop-box .imgbox {height: 198px;border-radius: 2px;margin-bottom: 8px;}
.itemtop-box .imgbox:hover {filter: brightness(0.9); transition: .15s all;}
.itemtop-box:hover .itemtop-title {color: #000;}

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

.catsub {display: inline-block;}
.catheader {position: relative; display: flex ; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid #f3f3f3; padding-bottom: 10px; margin-bottom: 20px;}
.catheader h1 {font-size: 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: #888888;}

.catheadblock {position: relative;}
.flex-content, .flexstatic {display: flex; flex-wrap: wrap; justify-content: space-between;}

.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: #f5f5f5;}
.allcontent.active {background-color: #f5f5f5; 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: flex ; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-between; margin-top: 20px;}

.custom_block {display: flex; flex-wrap: wrap; justify-content: space-between;}
.custom-navigation {display: flex ; flex-direction: column; align-items: center; gap: 6px; width: 100%;}
.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;}

/*--- FAV News ---*/
.short_img a[onclick*="doFavorites"] {position: absolute; bottom: 8px; left: 8px; right: auto; border-radius: 4px; background-color: #0000008f; color: rgb(245, 245, 245); border: 1px solid rgb(245 245 245 / 48%); box-shadow: 0 0 3px rgba(0,0,0,.9); cursor: pointer; z-index: 1; opacity: 0;}
.poster-imgbox a[onclick*="doFavorites"] {position: absolute; bottom: 8px; left: auto; right: 8px; display: flex; width: 32px; height: 32px; border-radius: 7px; background-color: #202022bd; color: #fff; border: 1px solid #474747; cursor: pointer; z-index: 1; justify-content: center; align-items: center;}
.poster-imgbox a[onclick*="doFavorites"]:hover {background-color: #000000bd;}
.short_img a[onclick*="doFavorites"], .poster-imgbox a[onclick*="doFavorites"] {color: #fff; font-size: 17px; line-height: 1;}
.short_img:hover a[onclick*="doFavorites"] {opacity: 1;}

/*--- SHORT News ---*/
.short_item {position: relative; cursor: pointer; width: calc(25% - 14px); height: auto; margin-bottom: 26px;}
.short_img {position: relative; display: block; height: auto; overflow: hidden;}
.short_img img {width: 100%; max-height: 246px; border-radius: 2px;}
.short_img {font-size: 0;}
.short_img:hover img {filter: brightness(0.9); transition: .15s all;}
.short_title {overflow: hidden;margin-top: 8px;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical;}
.short_title a {color: #000;font-size: 1.06em;font-weight: 500;} 
.shor_subtitle {position: relative;}
.short_line {display: flex ; justify-content: space-between; margin-top: 7px; height: 17px;}
.short_line .downloads {display: flex; align-items: center; font-weight: 500; color: #7c7c7c; font-size: 0.94em;}
.short_line .downloads::before {padding-right: 4px;}
.status_line {display: flex; align-items: center; gap: 5px;}

.search_res {position: relative; display: flex; gap: 16px; width: 100%; padding: 10px 10px; border-radius: 10px; cursor: pointer;}
.search_res:hover .i_square-up {opacity: 1;}
.search_res .i_square-up {display: inherit; position: absolute; right: 14px; bottom: 14px; color: #0000004f; font-size: 22px; transition: .3s; opacity: .3;}
.flex-content .search_res:nth-child(2n) {background-color: #f5f5f5;}
.search_res_img {position: relative; overflow: hidden;}
.search_res_img img {width: 102px; height: 132px; border-radius: 5px;}
.search_res_img:hover img {filter: brightness(0.9);transition: .15s ease-in-out;}
.search_res_info {display: flex; flex-direction: column; gap: 10px; margin-top: 10px;}
.search_res_title {color: #000; font-size: 19px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.search_res_title:hover {color: #d00;}
.search_res_sub {color: #999; font-weight: 500;}

/* Рейтинг в поиске */
.shor_rt {position: relative; display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px; color: #000;}
svg.rt-icon {height: 15px; width: 15px;}

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

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

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

.main_content {}
.f_downloads {position: absolute; right: 24px; top: 20px; display: flex; align-items: center; gap: 5px; color: #808080; font-size: 1.06em; z-index: 1; cursor: default;}

.favinfo {position: relative; margin-top: 18px; color: #6b6b6b; font-size: 13px;}
.poster-imgbox {position: relative; width: 215px; height: 310px;}
.poster-imgbox .imgbox {background-size: 100%; width: 215px; height: 310px; border-radius: 2px; box-shadow: 0 1px 2px #bbb;}

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

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

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

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

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

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

.game_details {position: relative; width: calc(100% - 215px); padding-left: 24px;}
.hname {margin-bottom: 16px;}
.hname h1 {font-size: 24px; font-weight: 700; color: #000;}
.subhnamever {margin-top: 8px; font-weight: 500; color: #d93025; font-size: 1.08em;}

/*--- GAME INFO ---*/
.game_info {margin-bottom: 20px;}
.game_info table {width: 100%; border-collapse: collapse;}
.game_info td {padding: 8px 0; border-bottom: 1px solid #f0f0f0; vertical-align: top;}
.game_info td:first-child {width: 120px; color: #666; font-weight: 500;}
.game_info td:last-child {color: #333;}

/*--- DOWNLOAD SECTION ---*/
.download_section {margin-top: 30px; padding: 20px; background: #f8f8f8; border-radius: 8px;}
.download_section h3 {margin-bottom: 15px; color: #333;}
.download_links {display: flex; flex-wrap: wrap; gap: 10px;}
.download_link {display: inline-block; padding: 10px 20px; background: #4a84c4; color: #fff; border-radius: 5px; text-decoration: none; transition: background 0.3s;}
.download_link:hover {background: #1172a6;}

/*--- COMMENTS ---*/
.comments_section {margin-top: 30px;}
.comment {padding: 15px; border-bottom: 1px solid #eee; margin-bottom: 15px;}
.comment_author {font-weight: 500; color: #333; margin-bottom: 5px;}
.comment_date {color: #999; font-size: 12px;}
.comment_text {margin-top: 10px; line-height: 1.5;}

/*--- SIDEBAR ---*/
.sidebar {width: 296px; background: #fff; border-radius: 8px; box-shadow: 0 0px 3px 0 rgba(0,0,0,0.1);}
.sidebar_widget {padding: 20px; border-bottom: 1px solid #f0f0f0;}
.sidebar_widget:last-child {border-bottom: none;}
.sidebar_widget h3 {margin-bottom: 15px; color: #333; font-size: 18px;}
.sidebar_widget ul {list-style: none;}
.sidebar_widget li {padding: 8px 0; border-bottom: 1px solid #f5f5f5;}
.sidebar_widget li:last-child {border-bottom: none;}
.sidebar_widget a {color: #4a84c4; text-decoration: none;}
.sidebar_widget a:hover {color: #1172a6;}

/*--- PAGINATION ---*/
.pagination {display: flex; justify-content: center; gap: 10px; margin: 30px 0;}
.pagination a, .pagination span {padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; text-decoration: none; color: #333;}
.pagination a:hover {background: #f5f5f5;}
.pagination .current {background: #4a84c4; color: #fff; border-color: #4a84c4;}

/*--- RESPONSIVE ---*/
@media (max-width: 768px) {
    .mainwrap {flex-direction: column;}
    .main {width: 100%; margin-bottom: 20px;}
    .right-nav {width: 100%;}
    .short_item {width: calc(50% - 10px);}
    .search_res {flex-direction: column;}
    .search_res_img {margin-bottom: 10px;}
    .game_details {width: 100%; padding-left: 0; margin-top: 20px;}
    .poster-imgbox {width: 100%; height: auto;}
    .poster-imgbox .imgbox {width: 100%; height: auto;}
}

@media (max-width: 480px) {
    .short_item {width: 100%;}
    .nav-menu {flex-direction: column; height: auto; padding: 10px;}
    .main_catmenu_two {flex-direction: column; gap: 10px;}
    .header-main {flex-direction: column; height: auto; padding: 10px;}
    .search-wrap {margin-right: 0; margin-bottom: 10px;}
    #quicksearch {width: 100%;}
}

/*--- UTILITIES ---*/
.text-center {text-align: center;}
.text-right {text-align: right;}
.mb-10 {margin-bottom: 10px;}
.mb-20 {margin-bottom: 20px;}
.mt-10 {margin-top: 10px;}
.mt-20 {margin-top: 20px;}
.hidden {display: none;}
.visible {display: block;}

/*--- ANIMATIONS ---*/
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(20px);}
    to {opacity: 1; transform: translateY(0);}
}

.fade-in {animation: fadeIn 0.5s ease-in-out;}

/*--- LOADING ---*/
.loading {display: inline-block; width: 20px; height: 20px; border: 3px solid #f3f3f3; border-top: 3px solid #4a84c4; border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Styles will be copied here from the original CSS file later. */