@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body, html {
    font-family: 'Onest',sans-serif;
    -webkit-transition: all .5s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    scroll-behavior: smooth
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background-color: #000;
}

.bg-video {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -100;
}

button {
    background: none;
    color: inherit;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit
}

img.twemoji {
    height: 1.2em;
    width: 1.2em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    display: inline-block
}

a {
    color: #89c2e8;
    text-decoration: none;
    text-shadow: -0.5px -0.5px 0 #000,0.5px -0.5px 0 #000,-0.5px .5px 0 #000,0.5px .5px 0 #000
}

button:focus, a:focus {
    outline: none
}

input[type=text]:focus, input[type=password]:focus {
    outline: none;
    border-color: #69533d
}

input[type=submit], input[type=file] {
    outline: none;
    border: 0;
    background-color: #4CAF50;
    color: white;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    cursor: pointer
}

input[type=checkbox]:focus, .form-control:focus {
    outline: none
}

h1 {
    font-size: 22px
}

.navbar {
    background: url(/assets/img/default/img_0.png) repeat-x;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 30;
    transition: all .3s ease-in-out
}

    .navbar::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: url(/assets/img/default/img_1.png) no-repeat;
        width: 404px;
        height: 73px;
        z-index: -1
    }

    .navbar::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        background: url(/assets/img/default/img_2.png) no-repeat;
        width: 448px;
        height: 73px;
        z-index: -1
    }

.navbar.not-scrolled {
    opacity: .55
}

.navbar.not-scrolled::before {
    opacity: .55
}

.navbar.not-scrolled::after {
    opacity: .55
}

body > nav.not-scrolled > div.nav-menu > ul > li.active, body > nav.not-scrolled > div.nav-menu > ul > li.active::after {
    opacity: .55
}

body > nav.not-scrolled > div.nav-logo > img {
    opacity: .55
}

.nav-logo img {
    height: 38px;
    width: auto;
    margin-top: -10px;
    margin-right: 80px;
    cursor: pointer
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center
}

.fix-nav {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000
}

.hidden {
    display: none !important
}

.hamburger {
    display: none
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    border-radius: 5px;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    background-color: #fbe8d4
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin-top: -15px
}

.nav-links li {
    padding: 0 15px;
    position: relative
}

    .nav-links li.active::after {
        content: '';
        position: absolute;
        top: 26px;
        left: 50%;
        transform: translateX(-50%);
        background: url(/assets/img/default/img_3.png) no-repeat;
        width: 53px;
        height: 21px
    }

.nav-links li.active a {
    color: #ffdeb9 !important
}

.nav-links a {
    text-decoration: none;
    color: #dac0a3;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    font-size: 14px;
    text-transform: uppercase;
    transition: all .3s ease
}

.nav-links a:hover, .nav-links a.active {
    color: #ffdeb9;
    text-shadow: 0 0 10px #502015
}

.language-dropdown {
    position: relative
}

.language-select {
    width: 73px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background-image: linear-gradient(to right,#4e3f2f,#5c4c3a);
    align-self: center;
    margin-top: -15px;
    margin-left: 90px;
    color: #c5ac90;
    text-transform: uppercase;
    font-size: 14px
}

.languages {
    position: absolute;
    top: 100%;
    left: 0;
    width: 73px;
    background-color: #514231;
    border-radius: 4px;
    margin-left: 90px;
    display: none
}

.languages a {
    margin: 0 auto;
    line-height: 40px;
    float: left;
    color: #c5ac90;
    width: 100%;
    height: 40px;
    padding-left: 12px
}

.languages a:hover {
    background-color: #695742
}

.languages a i {
    margin-top: 9px
}

.flags {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    margin-right: 5px
}

.flag-en {
    background: url(/assets/img/languages/en.png) no-repeat
}

.flag-de {
    background: url(/assets/img/languages/de.png) no-repeat
}

.flag-tr {
    background: url(/assets/img/languages/tr.png) no-repeat
}

.flag-ro {
    background: url(/assets/img/languages/ro.png) no-repeat
}

.flag-es {
    background: url(/assets/img/languages/es.png) no-repeat
}

.flag-cz {
    background: url(/assets/img/languages/cz.png) no-repeat
}

.flag-fr {
    background: url(/assets/img/languages/fr.png) no-repeat
}

.flag-gr {
    background: url(/assets/img/languages/gr.png) no-repeat
}

.flag-hu {
    background: url(/assets/img/languages/hu.png) no-repeat
}

.flag-it {
    background: url(/assets/img/languages/it.png) no-repeat
}

.flag-pl {
    background: url(/assets/img/languages/pl.png) no-repeat
}

.flag-pt {
    background: url(/assets/img/languages/pt.png) no-repeat
}

.logo-content{
    padding-bottom: 3rem !important;
}

.logo-content,
.container {
    position: relative;
    z-index: 1;
}

.logo-box {
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%)
}

.logo-box video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    animation: logo_ani_scale 3s infinite
}

.logo {
    background: url(/assets/img/genel/logo.png) no-repeat center center;
    width: 597px;
    height: 200px;
    background-size: contain;
    animation: logo_ani_scale 3s infinite
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    z-index: 30
}

.top-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 30px 0;
    margin-top: 240px
}

.download {
    background: url(/assets/img/default/img_4.png) no-repeat center center;
    height: 61px;
    font-size: 22px;
    color: #dac0a3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    transition: .3s
}

.download:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%)
}

.statistics {
    width: 359px;
    padding: 10px 10px 10px 0;
    position: relative;
    overflow: hidden
}

.statistics-list, .statistics-list--forum {
    list-style: none;
    padding-left: 0
}

.statistics-list li, .statistics-list--forum li {
    display: flex;
    align-items: center;
    font-size: 10px;
    color: #b4503c;
    background: rgba(0,0,0,0.2);
    padding: 7px 10px;
    position: relative
}

    .statistics-list li::before {
        content: '';
        background-image: url(/assets/img/default/img_5.png);
        background-size: contain;
        background-repeat: no-repeat;
        width: 23px;
        height: 23px;
        margin-right: 10px
    }

.statistics-list--forum li .sub-text {
    font-size: 13px;
    color: #dac0a3;
    padding-left: 5px
}

.statistics-list li .sub-text {
    font-size: 14px;
    color: #dac0a3;
    padding-left: 5px
}

.statistics-list li:nth-child(even), .statistics-list--forum li:nth-child(even) {
    background: none
}

.mid-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    margin-top: 270px;
    background: linear-gradient(135deg, rgba(36, 27, 24, 0.98) 0%, rgba(42, 34, 29, 0.98) 50%, rgba(36, 27, 24, 0.98) 100%);
}

.slider {
    width: 673px;
    height: 264px;
    background-color: #3e2a1e;
    display: flex;
    overflow: hidden
}

.slider-wrapper {
    position: relative
}

.slide {
    min-width: 100%;
    transition: transform .5s ease
}

.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    z-index: 10;
    opacity: .5;
    transition: .3s
}

.slider-control:hover {
    opacity: 1
}

.slider-control.left {
    left: 35px
}

.slider-control.right {
    right: 35px
}

.slider-control i {
    color: #fbe8d4;
    font-size: 24px
}

.info-boxes {
    display: flex;
    flex-direction: column
}

.info-boxes .box {
    width: 168px;
    height: 88px;
    background-color: #50392f;
    cursor: pointer;
    transition: .3s
}

.info-boxes .box:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%)
}

.info-boxes .box:last-child {
    margin-bottom: 0
}

.toplist {
    padding: 0 10px 0 10px;
    position: relative
}

.toplist .title, .mid-dark .title {
    position: relative;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #b4946e;
    color: #dac0a3;
    font-size: 14px;
    padding-bottom: 0;
    padding-left: 27px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1
}

.mid-dark .title i {
    margin: 0 5px 0 5px
}

.mid-dark .title .btn {
    margin-left: auto
}

.kr.top5 {
    width: 33px;
    height: 39px;
    padding-right: 35px;
    background: url(/assets/img/default/img_6.png) no-repeat center center
}

.kr.download {
    background: url(/assets/img/default/img_7.png) no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 49px;
    height: 33px
}

.toplist .icons {
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 30;
    display: flex;
    float: right;
    cursor: pointer
}

    .toplist .icons .icon-player {
        width: 54px;
        height: 42px;
        background: url(/assets/img/default/img_8.png) no-repeat center center;
        transition: .3s
    }

        .toplist .icons .icon-player:hover, .toplist .icons .icon-player.active {
            background: url(/assets/img/default/img_9.png) no-repeat center center
        }

    .toplist .icons .icon-guild {
        width: 54px;
        height: 42px;
        background: url(/assets/img/default/img_10.png) no-repeat center center;
        transition: .3s
    }

        .toplist .icons .icon-guild:hover, .toplist .icons .icon-guild.active {
            background: url(/assets/img/default/img_11.png) no-repeat center center
        }

.toplist .responsive-table {
    width: 100%;
    border-collapse: collapse;
    color: #341d15;
    font-size: 12px
}

.toplist .responsive-table thead tr {
    background: transparent !important;
    height: auto
}

.toplist .responsive-table th, .toplist .responsive-table td {
    text-align: left;
    padding: 8px
}

.toplist .responsive-table tbody td {
    font-size: 13px;
    color: #dac0a3
}

.toplist .responsive-table tr:nth-child(odd) {
    background-color: rgba(0,0,0,0.25)
}

.toplist .responsive-table tr {
    height: 50px
}

.toplist .responsive-table th, .toplist .responsive-table td {
    text-align: center;
    padding: 8px
}

.first {
    color: #e2c76a
}

.second {
    color: #c9c9c9
}

.third {
    color: #d6a26a
}

.jinno {
    color: #a3c6da !important
}

.chunjo {
    color: #cebe80 !important
}

.shinsoo {
    color: #cd6969 !important
}

.level {
    color: #98ff33
}

.align1 {
    color: #0cf
}

.align2 {
    color: #5c6eff
}

.align3 {
    color: #7373ff
}

.align4 {
    color: #9b9bff
}

.align5 {
    color: #fff
}

.align6 {
    color: #cf7500
}

.align7 {
    color: #eb5300
}

.align8 {
    color: #e30000
}

.align9 {
    color: #f00
}

.toplist .title::after, .mid-dark .title::after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 0;
    bottom: -2.5px;
    width: 83px;
    height: 18px;
}

.main-content {
    display: flex;
    align-items: flex-start;
    width: 100%
}

.side-wrapper {
    display: flex;
    flex-direction: column;
    margin-right: 27px
}

.mid-wrapper {
    display: flex;
    background-color: #3e2a1e;
    min-width: 0;
    flex-flow: wrap
}

.side-light, .side-dark {
    width: 333px;
    overflow: hidden;
    margin-bottom: 33px
}

    .side-light .content-separator, .side-dark .content-separator {
        width: 100%;
        overflow: hidden;
        margin: 0;
        height: 1px;
        background-image: url(/assets/img/default/img_13.png)
    }

.side-light {
    background-color: #766450
}

    .side-light .content, .side-dark .content {
        padding: 15px 10px 15px 10px;
        background: linear-gradient(135deg, rgba(36, 27, 24, 0.98) 0%, rgba(42, 34, 29, 0.98) 50%, rgba(36, 27, 24, 0.98) 100%);
    }

.side-dark .content {
    padding: 20px 18px 15px 18px;
}

.side-dark .current-event {
    width: 297px;
    height: 80px;
    background: no-repeat center center;
    margin: 0 auto;
    position: relative;
    margin-bottom: 25px
}

.side-dark .current-event .event-name {
    position: absolute;
    top: -7px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 105px;
    min-height: 20px;
    margin: auto;
    border-radius: 5px;
    font-size: 11px;
    color: #bf9b7f;
    line-height: 20px;
    text-align: center;
    padding: 0 7px;
    background-image: linear-gradient(to right,#402f21,#503a29);
    white-space: normal
}

.side-dark .current-event .event-date {
    position: absolute;
    bottom: -7px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    min-width: 105px;
    height: 20px;
    margin: auto;
    border-radius: 5px;
    font-size: 11px;
    color: #bf9b7f;
    line-height: 20px;
    text-align: center;
    padding: 0 7px 0 7px;
    background-image: linear-gradient(to right,#57402d,#6d4f38)
}

.side-dark .event-list {
    list-style: none;
    padding: 0;
    font-size: 11px
}

.side-dark .event-list li {
    display: flex;
    align-items: center;
    padding: 10px
}

.side-dark .event-list li.alternate-background {
    background-color: rgba(0,0,0,0.15)
}

.side-dark .event-name {
    flex-basis: 40%;
    text-align: left;
    color: #f1dcc5;
    margin-right: 10px
}

.side-dark .event-date {
    flex-basis: 30%;
    color: #cc7344;
    margin-right: 10px
}

.side-dark .event-button {
    flex-basis: 30%;
    display: inline-block;
    background-color: #752d20;
    color: #cca97e;
    font-size: 11px;
    border-radius: 4px;
    width: 52px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    text-decoration: none;
    padding: 0 5px
}

.kr.login {
    width: 55px;
    height: 37px;
    padding-right: 35px;
    background: url(/assets/img/default/img_15.png) no-repeat center center
}

.kr.event {
    width: 43px;
    height: 37px;
    padding-right: 35px;
    background: url(/assets/img/default/img_16.png) no-repeat center center
}

.side-wrapper .title {
    background: linear-gradient(to right, #2a221df2 0, #362e28f2 50%, #2a221df2 100%);
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 15px;
    color: #dac0a3;
    padding: 0 14px
}

.side-wrapper .title .session-name {
    color: #ffdeb9;
    font-size: 14px;
    text-shadow: 0 0 5px rgba(255,222,185,0.5),0 0 10px rgba(255,222,185,0.3),0 0 15px rgba(255,222,185,0.2);
    font-family: 'Trebuchet MS',sans-serif;
    letter-spacing: .5px;
    margin-left: 10px
}

.side-wrapper .title i {
    margin-right: 0
}

.side-wrapper .title span {
    margin-left: auto;
    color: #cc7344;
    font-size: 12px;
    text-shadow: 0 0 6px rgba(0,0,0,0.6)
}

.side-wrapper .title span a {
    color: #ffdeb9;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    display: inline-block;
    min-height: 24px;
    line-height: 16px;
    transition: all .2s ease;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    min-width: 100px;
    text-align: center
}

.side-wrapper .title span a:hover {
    background: rgba(0,0,0,0.3);
    transform: translateY(-1px)
}

.login-form {
    color: #dac0a3
}

.login-form button {
    padding: 0;
    display: block;
    margin: 0 auto
}

button.language-select {
    border: 0
}

.form-footer {
    display: flex;
    justify-content: center;
    align-items: center
}

.login-form .form-label {
    font-size: 14px;
    display: block;
    margin-bottom: 5px
}

.login-form input[type=text], .login-form input[type=password] {
    width: 100%;
    height: 44px;
    background-color: #604d38;
    color: #dac0a3;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #493b2c;
    box-shadow: 0 0 0 1px #69533d,inset 0 0 5px #4e3f2d
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 20px
}

.login-form input[type=checkbox] {
    accent-color: #774431
}

.checkbox-label {
    font-size: 14px;
    margin-left: 5px
}

.styled-checkbox, .mid-dark input[type=checkbox] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #dec2a5;
    width: 17px;
    height: 17px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    outline: none;
    transition: background-color .3s ease
}

.styled-checkbox:checked, .mid-dark input[type=checkbox]:checked {
    background-color: #774431
}

.styled-checkbox::after, .mid-dark input[type=checkbox]::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 52%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    color: #d5bb9f;
    font-size: 11px;
    transition: transform .2s ease;
    opacity: 0
}

.styled-checkbox:checked::after, .mid-dark input[type=checkbox]:checked::after {
    transform: translate(-50%,-50%) scale(1);
    opacity: 1
}

.side-wrapper .ucp {
    list-style: none;
    padding: 0;
    font-size: 14px
}

.side-wrapper .ucp li {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    width: 100%
}

.side-wrapper .ucp li a {
    display: block;
    width: 100%
}

.side-wrapper .btn-ucp {
    border-radius: 7px;
    display: flex;
    align-items: center;
    text-align: left;
    color: #ffdeb9;
    height: 42px;
    background: #562217;
    background: linear-gradient(90deg,rgba(86,34,23,1) 0,rgba(102,39,27,1) 100%);
    border: 1px solid #722c1e;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-weight: 600;
    letter-spacing: .5px
}

.side-wrapper .btn-ucp:hover, .side-wrapper .btn-ucp.active {
    -webkit-filter: brightness(130%);
    filter: brightness(130%);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7)
}

.side-wrapper .btn-ucp .icon {
    min-width: 42px;
    text-align: center;
    margin-right: 10px;
    line-height: 42px;
    border-right: 1px solid #722c1e
}

.side-wrapper .btn-ucp .icon i {
    text-shadow: 0 0 2px rgba(255,222,185,0.3);
    filter: drop-shadow(0 0 1px rgba(255,222,185,0.3))
}

.side-wrapper .btn-ucp:hover .icon i {
    text-shadow: 0 0 3px rgba(255,222,185,0.4);
    filter: drop-shadow(0 0 2px rgba(255,222,185,0.4))
}

.form-links {
    font-size: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-start
}

.form-link {
    color: #ffdeb9;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    display: inline-block;
    min-height: 24px;
    line-height: 16px;
    transition: all .2s ease;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    min-width: 100px;
    text-align: center
}

.form-link:hover {
    background: rgba(0,0,0,0.3);
    transform: translateY(-1px)
}

.side-dark {
    background-color: #573f2c
}

.mid-dark {
    width: 840px;
    background: linear-gradient(135deg, rgba(36, 27, 24, 0.98) 0%, rgba(42, 34, 29, 0.98) 50%, rgba(36, 27, 24, 0.98) 100%);
    color: #dac0a3;
    flex-grow: 1
}

.mid-dark.dl {
    background: url(/assets/img/genel/bg_dl.png) 0 0 no-repeat #3e2a1e;
    background-size: cover !important;
    background-position: top right !important
}

.mid-dark .content {
    padding: 25px;
    color: #dac0a3;
    font-size: 14px
}

.mid-dark .basic {
    padding: 7px 19px
}

.mid-dark {
    position: relative
}

.mid-dark.news {
    padding-bottom: 50px
}

.mid-dark.news-i {
    padding-bottom: 50px;
    width: 100%
}

.mid-dark.news:before {
    content: '';
    width: 100%;
    height: 25%;
    max-height: 180px;
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    background: linear-gradient(transparent 60px,#322218)
}

.card {
    background: rgba(44,33,27,0.95);
    border: 1px solid #5c4636;
    border-radius: 8px;
    margin-bottom: 20px;
    overflow: hidden
}

.card-header {
    background: rgba(0,0,0,0.2);
    padding: 15px 20px;
    border-bottom: 1px solid #5c4636;
    color: #ffdeb9;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px
}

.card-header i {
    color: #cc7344;
    font-size: 18px
}

.card-body {
    padding: 20px
}

.form-group {
    margin-bottom: 0
}

.form-group label {
    display: block;
    color: #ffdeb9;
    margin-bottom: 8px;
    font-size: 14px
}

.password-input-container {
    position: relative;
    display: flex;
    align-items: center
}

.password-input-container input {
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: 1px solid #5c4636;
    color: #ffdeb9;
    padding: 10px 40px 10px 15px;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .3s ease
}

.password-input-container input:focus {
    outline: none;
    border-color: #cc7344
}

.toggle-password {
    position: absolute;
    right: 10px;
    background: none;
    border: 0;
    color: #cc7344;
    cursor: pointer;
    padding: 0;
    font-size: 16px;
    transition: color .3s ease
}

.toggle-password:hover {
    color: #ffdeb9
}

.password-requirements {
    list-style: none;
    padding: 0;
    margin: 8px 0 0
}

.password-requirements li {
    color: #cc7344;
    font-size: 12px;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 8px
}

.password-requirements li::before {
    content: "✗";
    color: #cc7344
}

.password-requirements li.valid {
    color: #4CAF50
}

.password-requirements li.valid::before {
    content: "✓";
    color: #4CAF50
}

.form-footer {
    margin-top: 0;
    text-align: center
}

.btn-main {
    background: #752d20;
    color: #ffdeb9;
    border: 1px solid #a24632;
    padding: 10px 25px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all .3s ease
}

.mid-dark .form-group {
    margin-bottom: 15px
}

.mid-dark .form-group label {
    display: block;
    margin-bottom: 5px
}

.form-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px
}

.form-label {
    font-size: 14px;
    color: #dac0a3;
    margin: 0
}

.form-link {
    color: #ffdeb9;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    display: inline-block;
    min-height: 24px;
    line-height: 16px;
    transition: all .2s ease;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    min-width: 100px;
    text-align: center
}

.form-link:hover {
    background: rgba(0,0,0,0.3);
    transform: translateY(-1px)
}

.login-form input[type=text], .login-form input[type=password] {
    width: 100%;
    height: 44px;
    background-color: #604d38;
    color: #dac0a3;
    padding: 8px 12px;
    border: 1px solid #493b2c;
    box-shadow: 0 0 0 1px #69533d,inset 0 0 5px #4e3f2d;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color .2s ease
}

.login-form input[type=text]:focus, .login-form input[type=password]:focus {
    border-color: #906d50;
    outline: none
}

.form-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: 0
}

.btn-main {
    min-width: 120px;
    height: 44px;
    line-height: 44px;
    padding: 0 20px
}

.form-row input[type=text], .form-row input[type=email], .form-row input[type=password], .form-row input[type=date], .form-row input[type=number], .form-row input[type=tel], .form-row input[type=url], .form-row input[type=search], .form-row select, .form-row .btn, .form-row button {
    margin: 0
}

.form-row .btn, .form-row button {
    margin-left: 5px
}

input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=url], input[type=search], .form-group .form-control, select {
    width: 100%;
    background-color: #57412f;
    border: 1px solid #745740;
    box-shadow: inset 0 0 15px rgba(62,42,30,0.6);
    padding: 8px 12px;
    border-radius: 4px;
    color: #dac0a3;
    transition: border-color .3s ease;
    margin-top: 5px
}

input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=url]:focus, input[type=search]:focus, .form-group .form-control:focus, select:focus {
    border-color: #906d50
}

.form-group .form-text.text-muted {
    font-size: 11px;
    color: #dda17a;
    display: block;
    margin-top: 5px
}

.mid-dark table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    margin-bottom: 1rem;
    overflow-x: auto
}

.mid-dark table.ranking td, .mid-dark table.ranking th {
    text-align: left
}

.mid-dark th, .mid-dark td {
    text-align: center;
    padding: 5px;
    min-width: 30px
}

.mid-dark table thead th {
    background-color: #492f1f
}

.mid-dark tr {
    border-bottom: 1px solid #513828
}

.mid-dark tr:nth-child(even) {
    background-color: rgba(0,0,0,0.2)
}

.btn, button {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
    color: #cca97e;
    height: 36px;
    line-height: 36px;
    border-radius: 3px;
    padding: 0 12px;
    font-size: 14px;
    text-align: center;
    border: 0;
    cursor: pointer;
    background-color: #752d20;
    border: 1px solid #a24632;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    margin-right: 10px
}

.btn.fa.fa-thumbs-up.emojimenutoggle {
    padding: 8px 12px
}

.btn-success {
    background-image: linear-gradient(to right,#31371f,#37401d);
    border: 1px solid #5b6538
}

.btn-danger {
    background-image: linear-gradient(to right,#3b1918,#421d1c);
    border: 1px solid #612828
}

.btn-warning {
    background-image: linear-gradient(to right,#4e3416,#553a1d);
    border: 1px solid #7d6244
}

.btn-info {
    background-image: linear-gradient(to right,#172d33,#213c44);
    border: 1px solid #285461
}

.btn:hover, button:hover {
    -webkit-filter: brightness(130%);
    filter: brightness(130%)
}

.news-button {
    margin: 0 20px 15px 0;
    float: right;
    position: relative;
    z-index: 3
}

.btn-main, .mid-dark input[type=submit]:not(forum-tags), .mid-dark input[type=file] {
    display: block;
    width: 183px;
    height: 48px;
    background-image: url(/assets/img/default/img_18.png);
    background-size: cover;
    background-position: center;
    color: #dac0a3;
    font-size: 14px;
    text-align: center;
    line-height: 48px;
    text-decoration: none;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    margin: 0 auto
}

.btn-main:hover, .mid-dark input[type=submit]:hover, .mid-dark input[type=file]:hover {
    -webkit-filter: brightness(150%);
    filter: brightness(150%)
}

.content-separator {
    height: 1px;
    background-image: url(/assets/img/default/img_19.png);
    margin: 10px 0 10px 0
}

.kr.basic {
    width: 47px;
    height: 40px;
    padding-right: 35px;
    background: url(/assets/img/default/img_20.png) no-repeat center center
}

.toplist .title span, .mid-dark .title span {
    margin-left: auto;
    color: #cc7344;
    font-size: 12px;
    text-shadow: 0 0 6px rgba(0,0,0,0.6)
}

.toplist .title span a {
    color: #ffdeb9;
    text-decoration: none;
    font-weight: bold;
    padding: 6px 12px;
    display: inline-block;
    min-height: 24px;
    line-height: 16px;
    transition: all .2s ease;
    border-radius: 4px;
    background: rgba(0,0,0,0.2);
    font-size: 12px;
    min-width: 100px;
    text-align: center
}

.toplist .title span a:hover {
    background: rgba(0,0,0,0.3);
    transform: translateY(-1px)
}

.site-footer {
    width: 100%;
    background-color: rgba(44,33,27,0.95);
    padding: 2rem 0 1rem;
    text-align: center;
    color: #926e5c;
    font-size: 14px;
    box-sizing: border-box
}

.footer-container {
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box
}

.footer-main {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem
}

.footer-main:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #5c4636;
    z-index: 1
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin: 8px 0
}

.footer-links a {
    color: #dac0a3;
    text-decoration: none;
    transition: color .3s ease;
    position: relative;
    z-index: 2
}

.footer-links a::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -39px;
    left: 0;
    background-color: #f36f5f;
    transform: scaleX(0);
    transform-origin: bottom center;
    transition: transform .3s ease;
    z-index: 2
}

.footer-links a:hover {
    color: #f36f5f
}

.footer-links a:hover::after {
    transform: scaleX(1)
}

.footer-socials {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin: 8px 0
}

.footer-socials .icon {
    width: 35px;
    height: 35px;
    margin-right: 10px
}

.footer-socials .icon:last-child {
    margin-right: 0
}

    .footer-socials .icon.fb {
        background: url(/assets/img/default/img_21.png) -10px -10px
    }

        .footer-socials .icon.fb:hover {
            background: url(/assets/img/default/img_21.png) -65px -10px
        }

    .footer-socials .icon.insta {
        background: url(/assets/img/default/img_21.png) -10px -65px
    }

        .footer-socials .icon.insta:hover {
            background: url(/assets/img/default/img_21.png) -65px -65px
        }

    .footer-socials .icon.m2dl {
        background: url(/assets/img/default/img_21.png) -120px -10px
    }

.footer-socials .icon.m2dl:hover {
    background: url(/assets/img/default/img_21.png) -120px -65px
}

    .footer-socials .icon.tiktok {
        background: url(/assets/img/default/img_21.png) -10px -120px
    }

        .footer-socials .icon.tiktok:hover {
            background: url(/assets/img/default/img_21.png) -65px -120px
        }

    .footer-socials .icon.whatsapp {
        background: url(/assets/img/default/img_21.png) -120px -120px
    }

        .footer-socials .icon.whatsapp:hover {
            background: url(/assets/img/default/img_21.png) -175px -10px
        }

    .footer-socials .icon.dc {
        background: url(/assets/img/default/img_21.png) -175px -65px
    }

        .footer-socials .icon.dc:hover {
            background: url(/assets/img/default/img_21.png) -65px -175px
        }

    .footer-socials .icon.x {
        background: url(/assets/img/default/img_21.png) -10px -175px
    }

        .footer-socials .icon.x:hover {
            background: url(/assets/img/default/img_21.png) -175px -120px
        }

    .footer-socials .icon.epvp {
        background: url(/assets/img/default/img_21.png) -120px -175px
    }

        .footer-socials .icon.epvp:hover {
            background: url(/assets/img/default/img_21.png) -175px -175px
        }

    .footer-socials .icon.m2pserver {
        background: url(/assets/img/default/img_21.png) -230px -65px
    }

        .footer-socials .icon.m2pserver:hover {
            background: url(/assets/img/default/img_21.png) -230px -10px
        }

    .footer-socials .icon.inforge {
        background: url(/assets/img/default/img_21.png) -230px -120px
    }

        .footer-socials .icon.inforge:hover {
            background: url(/assets/img/default/img_21.png) -230px -175px
        }

.alert {
    color: #dac0a3;
    border-radius: 10px;
    font-size: 14px;
    padding: 10px;
    margin-bottom: 10px
}

.alert-info {
    background-color: #244c58;
    border: 1px solid #518aa5
}

.alert-danger, .alert-error {
    background-color: #582424;
    border: 1px solid #a55151
}

.alert-warning {
    background-color: #6a5224;
    border: 1px solid #a58251
}

.alert-success {
    background-color: #495023;
    border: 1px solid #68722f
}

.alert ul {
    margin-left: 15px
}

.alert ul li {
    padding-top: 2px;
    padding-bottom: 2px
}

.board-text-input, .mid-dark textarea {
    width: 100%;
    border: 0;
    color: #b4946e !important;
    padding: 6px 10px 6px 10px;
    background: #281c14;
    resize: vertical;
    margin-top: 15px;
    border-radius: 10px;
    color: inherit
}

.board-text-input:focus, .mid-dark textarea:focus {
    outline: none !important;
    border: 1px solid #553c2b
}

.card-body.board {
    padding: 0
}

.title-right {
    font-size: 15px;
    color: #dac0a3
}

.topics-nav {
    font-size: 1.3rem;
    color: #c4c4c4
}

.topics-nav .nav {
    display: flex;
    padding: 10px;
    justify-content: space-between
}

.pageNav {
    display: flex;
    align-items: center
}

.pageNav a {
    font-size: 12px;
    color: #dac0a3
}

.pageNav-main {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-table;
    margin-left: 0 !important
}

.pageNav-page.pageNav-page--current {
    background-color: #682417;
    cursor: pointer
}

.pageNav-page:not(:last-child) {
    border-right: none
}

.pageNav-page {
    display: inline-table;
    background: #766450;
    color: #fff;
    white-space: nowrap;
    font-size: 12px;
    width: 25px;
    height: 25px;
    line-height: 25px;
    border-radius: 7px;
    text-align: center;
    margin-right: 5px
}

.pageNav-page > a {
    display: block;
    padding: 0 8px;
    text-decoration: none;
    color: inherit;
    color: #fff !important;
    border-radius: 7px;
    transition: .15s ease-in-out
}

.pageNav-page > a:hover {
    background-color: #a89075;
    border-radius: 7px
}

.topics-container {
    display: table;
    table-layout: fixed;
    border-collapse: collapse;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%
}

.topics-container-group {
    display: table-row-group
}

.topics-container-group.sticky .topic-item {
    background-color: #4f3c31
}

.topic-item {
    display: table;
    table-layout: fixed;
    background-color: #3c291d;
    border-bottom: 1px solid #624b3d;
    color: #d7ccc1;
    font-size: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    min-width: 530px
}

.topics-main {
    overflow-x: auto
}

.topic-item-cell.topic-item-cell--icon {
    width: 40px;
    position: relative
}

.topic-item-cell {
    display: table-cell;
    vertical-align: middle;
    padding: 10px 10px
}

.topic-item-cell--icon + .topic-item-cell--main, .topic-item-cell--icon + .topic-item-cell--newThread {
    padding-left: 0
}

.topic-item-cell.topic-item-cell--meta {
    width: 80px
}

.topic-item-cell.topic-item-cell--latest {
    width: 140px;
    text-align: right
}

.topic-item-cell.topic-item-cell--icon.topic-item-cell--iconEnd {
    width: 44px;
    padding-left: 5px
}

.topic-item-statuses, .topic-item .topic-item-extraInfo {
    list-style: none;
    margin: 0;
    padding: 0;
    float: right
}

.topic-item-statuses > li, .topic-item .topic-item-extraInfo > li {
    float: left;
    margin-left: 8px;
    list-style: none
}

.u-srOnly {
    position: absolute;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden
}

.topic-item-cell--main .topic-item-minor {
    display: flex;
    align-items: center
}

.topic-item-cell--main .topic-item-minor {
    clear: both
}

.topic-item-minor a span {
    font-size: 14px;
    color: #dac0a3 !important
}

.topic-item-parts li span {
    color: #dac0a3 !important
}

.topic-item-cell--main .topic-item-minor .topic-item-parts {
    flex-grow: 1;
    margin-left: 0
}

.topic-item-parts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline
}

.topic-item-parts > li {
    display: inline;
    margin: 0;
    padding: 0
}

.topic-item-parts > li {
    display: inline;
    margin: 0;
    padding: 0
}

.topic-item .pairs {
    line-height: inherit
}

.pairs.pairs--justified {
    justify-content: space-between
}

.pairs {
    padding: 0;
    margin: 0;
    overflow: hidden;
    line-height: 1.7
}

.pairs.pairs--justified > dt {
    float: left;
    max-width: 100%;
    margin-right: 10px;
    flex-shrink: 0
}

.pairs > dt {
    padding: 0;
    margin: 0
}

.pairs.pairs--justified > dd {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.pairs > dd {
    padding: 0;
    margin: 0
}

.topic-item-iconContainer .avatar.avatar--xxs {
    width: 37px;
    height: 37px;
    font-size: 14px
}

.topic-item-title a {
    color: #e1e1e1 !important;
    font-size: 14px;
    transition: color .15s ease-in-out
}

.topic-item-title a:hover {
    color: #b56353 !important
}

.avatar img:not(.cropImage) {
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal;
    display: block;
    border-radius: 10px;
    width: 100%;
    height: 100%
}

.dropdown {
    position: relative;
    display: inline-block
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #533929;
    border: 1px solid #845b42;
    border-radius: 3px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    transform: translate3d(0px,4px,0px);
    z-index: 20;
    width: 100%;
    left: 0
}

.dropdown-item {
    color: #dac0a3;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.dropdown-item:hover {
    background-color: #77523c
}

.dropdown-toggle {
    background-color: #752d20;
    color: #cca97e;
    padding: 8px 12px;
    border-radius: 3px;
    border: 1px solid #a24632;
    cursor: pointer;
    width: auto
}

.popover {
    display: none;
    position: absolute;
    background-color: #57412f;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    border: 1px solid #745740;
    color: #dac0a3;
    border-radius: 4px;
    padding: 10px;
    z-index: 1000;
    transition: opacity .3s ease,transform .3s ease;
    transform: scale(0.95);
    left: 30%
}

.mid-dark .bottom-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px
}

.mid-dark .bottom-section div {
    display: flex;
    align-items: center
}

.forum-container {
    background-color: #513828;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2)
}

.forum-container .forum-header {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0
}

.forum-container {
    border-radius: 8px;
    overflow: hidden
}

.forum-topic {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-radius: 7px;
    border-bottom: 1px solid rgba(117,77,53,0.3);
    margin-bottom: 5px;
    transition: background-color .3s;
    background: rgba(73,49,34,0.7)
}

.forum-topic .forum-title a {
    color: #ffdeb9 !important;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.forum-topic .forum-title a:hover {
    color: #ffdeb9 !important
}

.forum-topic:not(.forum-container .forum-topic) > .forum-details > .forum-title > a {
    font-weight: 700;
    letter-spacing: .3px
}

.forum-topic:not(.forum-container .forum-topic) > .forum-details > .forum-title > a:hover {
    color: inherit !important
}

.forum-topic:hover {
    background-color: #754d35
}

.forum-topic:last-child {
    margin-bottom: 0
}

.forum-icon {
    display: flex;
    align-items: center;
    justify-content: center
}

.forum-icon i {
    font-size: 24px;
    color: #cca97e;
    margin-right: 15px;
    width: 35px
}

.thread-icon i {
    width: 40px;
    font-size: 16px
}

.forum-details {
    flex-grow: 1
}

    .forum-details.status {
        width: 55px;
        padding-left: 15px
    }

    .forum-details.stats {
        display: grid
    }

.forum-title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

    .forum-title .fa-lock {
        margin-right: 15px;
        margin-left: 10px;
        color: #cca97e
    }

    .forum-title a {
        color: #ffdeb9 !important;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        width: 200px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

        .forum-title a.thread-vote {
            width: 70px
        }

.forum-stats {
    color: #cca97e;
    font-size: 13px
}

.forum-latest {
    text-align: right;
    width: 110px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

    .forum-latest .latest-post {
        display: inline-block;
        text-align: right;
        width: 115px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        direction: ltr;
        padding-left: 5px
    }

    .forum-latest a {
        color: #ffdeb9 !important
    }

    .forum-latest time {
        display: block;
        color: #cca97e;
        font-size: 12px
    }

@media (max-width:768px) {
    .forum-topic {
        flex-direction: column;
        align-items: start
    }

    .forum-latest {
        text-align: left;
        margin-top: 10px
    }
}

.forum-posts {
    margin-top: 20px
}

.forum-post {
    background-color: #754d35;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 7px;
    overflow-wrap: break-word
}

    .forum-post.first-post {
        padding: 22px;
        background-color: #402315;
        font-size: 15px;
        border: 1px solid #82492e
    }

.gm_color {
    color: #ffda00 !important;
    font-weight: bold;
    line-height: 22px
}

.post-footer {
    display: flex;
    justify-content: space-between;
    font-size: 14px
}

.post-author, .post-date {
    color: #cca97e
}

.forum-reply form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px
}

.forum-reply input[type=submit] {
    background-color: #752d20;
    color: #dac0a3;
    border: 1px solid #a24632;
    border-radius: 5px;
    line-height: 0;
    cursor: pointer
}

.react-level-option {
    display: flex;
    align-items: center
}

.forum-post {
    background-color: #3f2b1e;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 15px
}

.post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.post-author {
    font-weight: bold;
    color: #cca97e
}

    .post-author i {
        margin-right: 5px
    }

.post-date {
    margin-left: 10px;
    font-size: 12px;
    color: #cca97e
}

.post-vote {
    margin-left: auto
}

    .post-vote i {
        margin-right: 5px
    }

.post-content {
    color: #dac0a3;
    margin-top: 2rem;
    font-size: 14px;
}

    .post-content ul, .post-content ol, .post-content dl, .content ul {
        padding-left: 30px;
        padding-top: 5px
    }

.post-footer {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.post-actions {
    display: flex;
    list-style: none
}

    .post-actions li {
        margin-right: 10px;
        color: #cca97e
    }

.emoji-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center
}

    .emoji-container a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 25px;
        line-height: 24px;
        font-weight: 700;
        padding: 0 5px 0 5px;
        background-color: hsla(234.935 calc(1 * 85.556%) 64.706% / .15);
        border-radius: 5px;
        cursor: pointer;
        margin-bottom: 3px;
        transition: background-color .3s ease
    }

        .emoji-container a:hover {
            background-color: #966344
        }

    .emoji-container a {
        color: #cca97e;
        text-decoration: none
    }

        .emoji-container a i {
            margin-left: 5px
        }

    .emoji-container .btn {
        margin: 0
    }

@media (max-width:768px) {
    .post-header, .post-footer {
        flex-direction: column;
        align-items: flex-start
    }
}

.action-buttons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 10px
}

    .action-buttons button, .action-buttons select {
        margin-top: 0;
        margin-bottom: 0
    }

::placeholder {
    color: #b49e85;
    opacity: 1
}

:-ms-input-placeholder {
    color: #b49e85
}

::-webkit-input-placeholder {
    color: #b49e85
}

@media screen and (max-width:550px) {
    .mid-content {
        margin-top: 168px
    }

    .mid-dark .content {
        padding: 25px 0 25px 0
    }

    .hide-m {
        display: none
    }
}

@media screen and (max-width:400px) {
    .side-dark .current-event {
        width: unset
    }
}

@media screen and (max-width:790px) {
    .language-select {
        margin-left: 7px
    }

    .nav-logo img {
        margin-right: 7px
    }

    .footer-links a {
        margin: 0 10px
    }

    #bg-video {
        visibility: hidden
    }
}

@media screen and (max-width:1085px) {
    .slider {
        width: 400px
    }

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

    .mid-content {
        position: relative;
        justify-content: center
    }

    .statistics {
        width: 100%
    }
}

@media screen and (max-width:930px) {
    .slider-wrapper {
        display: none
    }

    .r-advertisement {
        display: none;
        -webkit-animation: none;
        animation: none
    }

    #discord {
        display: none
    }

    .statistics {
        height: unset
    }

    .side-dark {
        display: none
    }
}

@media screen and (max-width:840px) {
    .main-content {
        flex-direction: column;
        align-items: center
    }

    .mid-wrapper, .side-wrapper {
        width: 100%;
        margin-right: 0
    }

    .side-light, .side-dark {
        width: unset
    }
}

@media screen and (max-width:635px) {
    .logo-content{
        padding-bottom: 6rem !important;
    }

    .nav-menu {
        position: fixed;
        left: -100%;
        top: 5rem;
        flex-direction: column;
        background-color: #342a1d;
        width: 100%;
        border-radius: 10px;
        text-align: center;
        transition: .3s;
        box-shadow: 0 10px 27px rgba(0,0,0,0.3);
        display: none;
        padding: 10px;
        transition: opacity .3s ease,height .3s ease,visibility .3s ease;
        visibility: hidden;
        opacity: 0
    }

    .nav-links {
        flex-direction: column;
        width: 100%;
        align-items: center;
        padding: 0
    }

        .nav-links li.active::after {
            content: '';
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            background: transparent;
            border-bottom: 1px solid #a5402d;
            width: 53px;
            height: 21px
        }

    .language-select {
        margin: 0 auto
    }

    .language-dropdown {
        display: block;
        position: absolute;
        top: 15px;
        left: 20px
    }

    .languages {
        top: 35px;
        right: 0;
        left: unset
    }

    .nav-links li {
        width: 100%;
        padding: 10px 0
    }

    .nav-menu.active {
        left: 0;
        display: block
    }

    .nav-item {
        margin: 2.5rem 0
    }

    .nav-links {
        margin-top: 0
    }

    .nav-logo img {
        margin-right: 0
    }

    .hamburger {
        display: block;
        position: absolute;
        top: 15px;
        right: 20px;
        cursor: pointer
    }

        .hamburger.active .bar:nth-child(2) {
            opacity: 0
        }

        .hamburger.active .bar:nth-child(1) {
            transform: translateY(8px) rotate(45deg)
        }

        .hamburger.active .bar:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg)
        }

    .logo-box {
        height: 90px;
        max-width: 75% !important;
        top: 67px
    }

    .logo {
        max-width: 100% !important
    }

    .mid-content {
        flex-direction: column;
        align-items: center
    }

    .slider-wrapper {
        display: flex !important
    }

    .slider {
        width: 100%;
        height: auto
    }

        .slider img {
            width: 100%;
            height: auto;
            object-fit: unset;
            object-position: unset
        }

    .top-content {
        justify-content: center
    }

    .info-boxes {
        display: flex;
        justify-content: center;
        flex-direction: row;
        width: 100%;
        display: none !important
    }

    .navbar::after {
        background: transparent
    }
}

.content-tabs-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background-color: rgba(0,0,0,.2);
    width: 98%;
    padding: 5px;
    margin: 10px auto 10px auto;
    border-radius: 6px
}

input[name=tab] + label {
    border-radius: 7px;
    padding: 12px 20px;
    text-align: center;
    color: #dac0a3;
    margin: 5px;
    cursor: pointer;
    background: #562217;
    background: linear-gradient(90deg,rgba(86,34,23,1) 0,rgba(102,39,27,1) 100%);
    border: 1px solid #722c1e;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 120px;
    justify-content: center
}

    input[name=tab] + label i {
        font-size: 16px;
        color: #ffdeb9
    }

input[name=tab]:checked + label {
    background: #763021;
    background: linear-gradient(90deg,rgba(118,48,33,1) 0,rgba(140,55,37,1) 100%);
    border: 1px solid #9b3e2a;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2)
}

input[name=tab] + label:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1)
}

input[type=radio][name=tab] {
    display: none
}

.tabs .tab-link {
    border-radius: 7px;
    padding: 12px 20px;
    text-align: center;
    color: #dac0a3;
    margin: 5px;
    cursor: pointer;
    background: #562217;
    background: linear-gradient(90deg, rgba(86,34,23,1) 0, rgba(102,39,27,1) 100%);
    border: 1px solid #722c1e;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 120px;
    justify-content: center;
    text-decoration: none;
}

    .tabs .tab-link i {
        font-size: 16px;
        color: #ffdeb9;
    }

    .tabs .tab-link.active {
        background: #763021;
        background: linear-gradient(90deg, rgba(118,48,33,1) 0, rgba(140,55,37,1) 100%);
        border: 1px solid #9b3e2a;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }

    .tabs .tab-link:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }



#discord {
    position: fixed;
    top: 100px;
    right: -150px;
    z-index: 45;
    opacity: .5;
    transition: .3s
}

    #discord:hover {
        right: 0;
        opacity: 1
    }

#countdown-badge {
    position: fixed;
    top: 340px;
    left: -10px;
    z-index: 44;
    opacity: .92;
    transition: all .4s cubic-bezier(0.4,0,0.2,1);
    transform: translateX(0)
}

    #countdown-badge:hover {
        opacity: 1;
        transform: translateX(5px)
    }

.countdown-content {
    background: linear-gradient(135deg,#8b4513 0,#a0522d 50%,#8b4513 100%);
    border: 2px solid #d4a574;
    border-left: none;
    border-radius: 0 12px 12px 0;
    padding: 16px 20px;
    min-width: 240px;
    box-shadow: 0 8px 32px rgba(139,69,19,0.5),inset 0 1px 0 rgba(255,222,185,0.2),inset 0 -1px 0 rgba(0,0,0,0.3);
    position: relative;
    overflow: hidden
}

    .countdown-content::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle,rgba(255,222,185,0.1) 0,transparent 70%);
        animation: shimmer 4s infinite linear;
        pointer-events: none
    }

@keyframes shimmer {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}

.countdown-icon {
    text-align: center;
    margin-bottom: 8px
}

    .countdown-icon i {
        font-size: 28px;
        color: #ffd700;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
        animation: pulse 2s ease-in-out infinite
    }

@keyframes pulse {
    0%,100% {
        transform: scale(1);
        opacity: 1
    }

    50% {
        transform: scale(1.1);
        opacity: .9
    }
}

.countdown-text {
    text-align: center;
    margin-bottom: 12px
}

.countdown-title {
    font-size: 20px;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5),0 0 10px rgba(255,215,0,0.4);
    letter-spacing: 1px;
    margin-bottom: 4px
}

.countdown-subtitle {
    font-size: 13px;
    color: #ffdeb9;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    opacity: .95
}

.countdown-timer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,222,185,0.3)
}

.time-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px
}

.time-value {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.3);
    padding: 8px 6px;
    border-radius: 6px;
    min-width: 40px;
    text-align: center;
    border: 1px solid rgba(255,222,185,0.2);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.1);
    font-family: 'Courier New',monospace;
    letter-spacing: 1px
}

.time-label {
    font-size: 9px;
    color: #ffdeb9;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5)
}

@media (max-width:1400px) {
    #countdown-badge {
        left: -5px
    }
}

@media (max-width:1200px) {
    #countdown-badge {
        display: none
    }
}

.closed {
    background-color: rgba(173,151,151,0.2)
}

.sticky {
    background-color: rgba(95,48,18,0.6)
}

.thread-voted {
    color: green
}

.reacted {
    border: 2px solid #51733b
}

.emojimenu {
    height: 50px;
    position: relative;
    display: contents;
    background-color: transparent
}

div.emojis {
    display: contents
}

.right {
    right: 0;
    position: absolute
}

ul, ol {
    line-height: 20px
}

.clickable {
    cursor: pointer
}

.text-left {
    text-align: left
}

.r-advertisement {
    right: 0;
    width: 173px;
    height: 290px;
    position: fixed;
    top: 45%;
    z-index: 999;
    -webkit-animation: flashing infinite 3s linear;
    animation: flashing infinite 3s linear
}

.main_pc {
    color: #FFC800
}

@-webkit-keyframes flashing {
    0%,100% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-filter: brightness(150%);
        filter: brightness(150%)
    }
}

@keyframes flashing {
    0%,100% {
        -webkit-filter: brightness(100%);
        filter: brightness(100%)
    }

    50% {
        -webkit-filter: brightness(150%);
        filter: brightness(150%)
    }
}

@keyframes logo_ani_scale {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1)
    }

    100% {
        transform: scale(1)
    }
}

ul.nav-links > li.active {
    font-weight: bold
}

ul.nav-links > li:hover {
    font-weight: bold
}

@keyframes blinking {
    0% {
        filter: hue-rotate(0deg);
        transform: scale(1.0)
    }

    50% {
        filter: hue-rotate(-10deg);
        transform: scale(1.04)
    }

    100% {
        filter: hue-rotate(0deg);
        transform: scale(1.0)
    }
}

.blink {
    animation: blinking 1.0s infinite
}

a:not(.logo-box), .btn-ucp, img, .download, .current-event, button, input[type='submit'] {
    transition: transform .2s
}

    a:not(.logo-box):hover, .btn-ucp:hover, img:hover, .download:hover, .current-event:hover, button:hover, input[type='submit']:hover {
        transform: scale(1.03)
    }

.forum-tag {
    display: inline-block;
    padding: .2em .5em;
    margin: .2em;
    border-radius: .2em;
    color: white;
    font-size: .8em
}

.gm_icon {
    display: inline-block;
    margin-bottom: -6px;
    width: 44px;
    height: 22px;
    background: url(/assets/img/default/img_22.png) no-repeat center center
}

div.post-content img, div.content img {
    max-width: 100%;
    height: auto;
    vertical-align: middle
}

.content-less-padding {
    padding: 8px 2px !important
}

.forum-ticker {
    padding: 5px
}

    .forum-ticker .forum-ticker-item {
        background-color: rgba(81,56,40,0.4);
        display: block;
        padding: 8px 12px;
        margin: 5px 0;
        border-radius: 6px;
        transition: background-color .2s ease,transform .2s ease;
        border: 1px solid rgba(180,148,110,0.1)
    }

        .forum-ticker .forum-ticker-item:hover {
            background-color: rgba(117,77,53,0.6)
        }

    .forum-ticker .ticker-content {
        display: flex;
        flex-direction: column;
        gap: 4px
    }

    .forum-ticker .ticker-category {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 13px;
        color: #b58148
    }

    .forum-ticker .category-tag {
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 4px;
        color: #dac0a3;
        background-color: rgba(204,169,126,0.15)
    }

        .forum-ticker .category-tag.dev-diary {
            background-color: rgba(255,218,0,0.15);
            color: #ffda00
        }

        .forum-ticker .category-tag.marketplace {
            background-color: rgba(204,115,68,0.15);
            color: #cc7344
        }

    .forum-ticker .thread-title {
        color: #dac0a3;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .forum-ticker .ticker-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #cca97e
    }

    .forum-ticker .author {
        color: #cc7344
    }

    .forum-ticker .topic-item-latestDate {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #cca97e;
        font-size: 12px;
        text-align: right
    }

    .forum-ticker .fa-clock {
        color: #754d35;
        font-size: 12px
    }

.forum-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    transition: all .2s ease
}

    .forum-tag.approved {
        background-color: rgba(81,115,59,0.4);
        color: #98cc65;
        border: 1px solid rgba(125,166,84,0.4)
    }

        .forum-tag.approved:hover {
            background-color: rgba(81,115,59,0.5);
            border-color: rgba(125,166,84,0.5)
        }

    .forum-tag.existing {
        background-color: rgba(81,115,59,0.4);
        color: #98cc65;
        border: 1px solid rgba(125,166,84,0.4)
    }

        .forum-tag.existing:hover {
            background-color: rgba(81,115,59,0.5);
            border-color: rgba(125,166,84,0.5)
        }

    .forum-tag.rejected {
        background-color: rgba(180,80,60,0.4);
        color: #ff8f5e;
        border: 1px solid rgba(204,115,68,0.4)
    }

        .forum-tag.rejected:hover {
            background-color: rgba(180,80,60,0.5);
            border-color: rgba(204,115,68,0.5)
        }

    .forum-tag i {
        font-size: 11px
    }

    .forum-tag.low-prio {
        background-color: rgba(147,87,180,0.4);
        color: #c49ddb;
        border: 1px solid rgba(196,157,219,0.4)
    }

        .forum-tag.low-prio:hover {
            background-color: rgba(147,87,180,0.5);
            border-color: rgba(196,157,219,0.5)
        }

    .forum-tag.noted {
        background-color: rgba(70,130,180,0.4);
        color: #89c2e8;
        border: 1px solid rgba(137,194,232,0.4)
    }

        .forum-tag.noted:hover {
            background-color: rgba(70,130,180,0.5);
            border-color: rgba(137,194,232,0.5)
        }

    .forum-tag.considering {
        background-color: rgba(180,140,50,0.4);
        color: #ffd280;
        border: 1px solid rgba(255,210,128,0.4)
    }

        .forum-tag.considering:hover {
            background-color: rgba(180,140,50,0.5);
            border-color: rgba(255,210,128,0.5)
        }

    .forum-tag.partially-approved {
        background-color: rgba(50,120,200,0.4);
        color: #80c8ff;
        border: 1px solid rgba(128,200,255,0.4)
    }

        .forum-tag.partially-approved:hover {
            background-color: rgba(50,120,200,0.5);
            border-color: rgba(128,200,255,0.5)
        }

.news-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    padding: 10px;
    width: 100%
}

.news-card {
    position: relative;
    background-color: rgba(81,56,40,0.4);
    overflow: hidden;
    transition: transform .3s ease,box-shadow .3s ease;
    border: 1px solid rgba(180,148,110,0.2)
}

    .news-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.3)
    }

.news-image {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden
}

    .news-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        transition: transform .3s ease
    }

.news-card:hover .news-image img {
    transform: scale(1.05)
}

.news-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top,rgba(62,42,30,0.9),transparent)
}

.news-content {
    padding: 15px
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.news-date {
    font-size: 12px;
    color: #dac0a3
}

.news-author {
    display: flex;
    align-items: center;
    gap: 5px
}

.news-title {
    color: #dac0a3;
    font-size: 15px;
    line-height: 1.4;
    margin: 0;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5)
}

@media (max-width:768px) {
    .news-grid {
        grid-template-columns: 1fr;
        padding: 10px
    }

    .news-image {
        height: 160px
    }
}

@media (max-width:1200px) {
    .news-grid {
        grid-template-columns: repeat(2,1fr)
    }
}

@media (max-width:768px) {
    .news-grid {
        grid-template-columns: 1fr
    }

    .news-image {
        height: 160px
    }
}

@media (max-width:1200px) {
    .statistics {
        margin-top: 10px
    }
}

.statistics .forum-ticker .forum-ticker-item {
    margin: 9px 0;
    border-radius: 0;
    background-color: rgb(57 40 29 / 60%);
    transition: background-color .2s ease,transform .2s ease;
    border: 1px solid rgb(190 156 116 / 10%);
    text-shadow: none
}

    .statistics .forum-ticker .forum-ticker-item:last-child {
        margin-bottom: 0
    }

.statistics .forum-ticker {
    padding: 0
}

.statistics .thread-title {
    color: #dac0a3;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    display: inline-block
}

.statistics .ticker-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

@media (max-width:768px) {
    .thread-title {
        max-width: 140px
    }
}

.shoutbox {
    background-color: rgb(53 36 25 / 70%);
    border: 1px solid rgb(30 23 14 / 20%);
    border-radius: 8px
}

    .shoutbox .shoutbox-title {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 12px 15px;
        color: #ffdeb9;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 1px;
        background: url(/assets/img/genel/side_title_bg.png) no-repeat center center,#493122b3;
        border-radius: 8px 8px 0 0;
        text-shadow: 0 0 5px rgba(255,222,185,0.5),0 0 10px rgba(255,222,185,0.3),0 0 15px rgba(255,222,185,0.2)
    }

        .shoutbox .shoutbox-title > i, .shoutbox .shoutbox-title > span {
            position: relative;
            z-index: 1
        }

    .shoutbox .shoutbox-controls {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 12px;
        z-index: 2
    }

    .shoutbox .shoutbox-control, #shoutbox_chatroom {
        cursor: pointer
    }

    .shoutbox .shoutbox-control {
        color: #b4946e;
        font-size: 12px;
        transition: color .2s ease
    }

        .shoutbox .shoutbox-control:hover {
            color: #dac0a3
        }

    .shoutbox .shoutbox-content {
        max-height: 300px;
        overflow-y: auto;
        padding: 10px
    }

    .shoutbox .shoutbox-message img {
        vertical-align: middle
    }

    .shoutbox .shoutbox-message {
        display: flex;
        transition: background-color .2s ease
    }

        .shoutbox .shoutbox-message:hover {
            background-color: rgba(117,77,53,0.1)
        }

    .shoutbox .message-avatar {
        width: 32px;
        height: 32px;
        background-color: rgba(180,148,110,0.2);
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .shoutbox .avatar-text {
        color: #dac0a3;
        font-size: 12px;
        font-weight: bold
    }

    .shoutbox .message-content {
        flex: 1;
        min-width: 0
    }

    .shoutbox .message-header {
        display: inline;
        margin-right: 5px
    }

    .shoutbox .message-author {
        color: #dac0a3;
        font-size: 13px;
        font-weight: bold
    }

    .shoutbox .message-time {
        color: #b4946e;
        font-size: 11px
    }

    .shoutbox .message-text {
        color: #dac0a3;
        font-size: 13px;
        word-break: break-word;
        display: inline
    }

    .shoutbox .message-actions {
        display: inline-block;
        margin-right: 5px
    }

    .shoutbox .message-action {
        color: #b4946e;
        margin-right: 3px;
        cursor: pointer
    }

        .shoutbox .message-action:hover {
            color: #dac0a3
        }

    .shoutbox .shoutbox-input {
        display: flex;
        gap: 8px;
        padding: 10px;
        align-items: flex-start
    }

        .shoutbox .shoutbox-input input[type=text] {
            flex: 1;
            background-color: rgba(81,56,40,0.6);
            border: 1px solid rgba(180,148,110,0.2);
            border-radius: 4px;
            margin-top: 0;
            color: #dac0a3;
            font-size: 13px;
            padding: 8px 40px 8px 12px;
            resize: none;
            min-height: 36px;
            line-height: 20px
        }

    .shoutbox .input-wrapper {
        position: relative;
        flex: 1;
        display: flex;
        align-items: flex-start
    }

    .shoutbox .shoutbox-input input[type=text]:focus {
        outline: none;
        border-color: rgba(180,148,110,0.4)
    }

    .shoutbox .btn-send {
        background-color: rgba(180,148,110,0.2);
        border: 1px solid rgba(180,148,110,0.2);
        border-radius: 4px;
        color: #dac0a3;
        width: 36px;
        height: 36px;
        display: flex;
        margin-right: 0;
        margin-top: 1px;
        align-items: center;
        justify-content: center;
        transition: all .2s ease
    }

        .shoutbox .btn-send:hover {
            background-color: rgba(180,148,110,0.3);
            border-color: rgba(180,148,110,0.3)
        }

    .shoutbox .btn-emoji {
        position: absolute;
        right: 8px;
        color: #b4946e;
        font-size: 16px;
        padding: 4px;
        background: none;
        border: 0;
        transition: color .2s ease
    }

        .shoutbox .btn-emoji:hover {
            color: #dac0a3
        }

.shoutbox-content::-webkit-scrollbar {
    width: 6px
}

.shoutbox-content::-webkit-scrollbar-track {
    background: rgba(81,56,40,0.4)
}

.shoutbox-content::-webkit-scrollbar-thumb {
    background: rgba(180,148,110,0.3);
    border-radius: 3px
}

    .shoutbox-content::-webkit-scrollbar-thumb:hover {
        background: rgba(180,148,110,0.4)
    }

@media (max-width:768px) {
    .shoutbox-content {
        max-height: 250px
    }

    .shoutbox .message-avatar {
        width: 28px;
        height: 28px
    }

    .shoutbox .shoutbox-input input[type=text] {
        font-size: 12px
    }
}

.shoutbox .content-separator {
    margin: 0
}

.shoutbox-language {
    background-color: rgba(81,56,40,0.6);
    border: 1px solid rgba(180,148,110,0.2);
    border-radius: 4px;
    color: #dac0a3;
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    transition: all .2s ease;
    margin-top: 0
}

    .shoutbox-language:hover {
        border-color: rgba(180,148,110,0.4)
    }

    .shoutbox-language:focus {
        outline: none;
        border-color: rgba(180,148,110,0.4)
    }

    .shoutbox-language option {
        background-color: #513828;
        color: #dac0a3;
        padding: 8px
    }

        .shoutbox-language option[value=global] {
            background-image: url(/assets/img/flags/en.png)
        }

        .shoutbox-language option[value=de] {
            background-image: url(/assets/img/flags/de.png)
        }

        .shoutbox-language option[value=tr] {
            background-image: url(/assets/img/flags/tr.png)
        }

        .shoutbox-language option[value=ro] {
            background-image: url(/assets/img/flags/ro.png)
        }

.language-dd {
    position: relative
}

    .language-dd .s-language-select {
        background: rgba(81,56,40,0.4);
        border: 1px solid rgba(180,148,110,0.2);
        border-radius: 4px;
        color: #dac0a3;
        font-size: 12px;
        padding: 4px 8px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 70px;
        margin-bottom: 0
    }

    .language-dd .s-languages {
        position: absolute;
        top: calc(100% + 5px);
        left: 0;
        background: rgba(81,56,40,0.4);
        padding: 3px;
        border-radius: 4px;
        border: 1px solid rgba(180,148,110,0.2);
        display: none;
        min-width: 100%;
        z-index: 1000
    }

.shoutbox-controls .s-languages {
    margin-top: 0
}

#shoutbox_chatroom {
    font-family: "Twemoji Country Flags","Helvetica","Comic Sans",serif;
    font-size: 20px;
    padding: 3px 8px 3px 4px
}

    #shoutbox_chatroom option {
        text-align: center;
        text-align-last: center;
        direction: rtl
    }

.language-dd .s-language-select:hover .s-languages {
    display: block
}

.language-dd .s-languages a {
    color: #dac0a3;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: all .2s ease;
    white-space: nowrap
}

    .language-dd .s-languages a:hover {
        background: rgba(180,148,110,0.2);
        color: #ee9a59
    }

    .language-dd .s-languages a.active {
        background: rgba(117,77,53,0.6);
        color: #ee9a59
    }

.language-dd .flags {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 20px;
    height: 15px;
    display: inline-block;
    vertical-align: middle
}

.language-dd .s-languages {
    transform-origin: top;
    animation: dropdownOpen .2s ease
}

@keyframes dropdownOpen {
    from {
        opacity: 0;
        transform: translateY(-10px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

@media (max-width:768px) {
    .language-dd .s-language-select, .s-languages a {
        font-size: 11px;
        padding: 3px 6px
    }

    .language-dd .flags {
        width: 18px;
        height: 14px
    }
}

.shoutbox_emoji_menu {
    border: 1px solid green;
    border-radius: 7px;
    padding: 4px
}

.addemoji {
    padding: 2px
}

    .addemoji:hover {
        background-color: rgba(0,0,0,0.6)
    }

.spoiler {
    border: 1px solid #754d35;
    background-color: #3f2b1e;
    border-radius: 5px;
    width: 100%;
    margin: 4px 0 10px 0
}

.spoiler-title {
    background-color: rgba(0,0,0,0.2);
    cursor: pointer;
    color: #dac0a3;
    padding: 4px;
    font-family: 'Trebuchet MS',sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 14px;
    display: flex;
    align-items: center
}

.spoiler-arrow {
    color: #cc7344;
    margin-right: 4px;
    display: flex;
    align-items: center
}

.spoiler-body {
    display: none;
    padding: 8px;
    color: #dac0a3;
    border-top: 1px solid #754d35
}

.spoiler.opened .spoiler-arrow {
    transform: rotate(90deg)
}

.spoiler.opened .spoiler-body {
    display: block
}

.hr-line {
    border: 0;
    height: 2px;
    background: linear-gradient(to right,transparent,#754d35 50%,transparent);
    display: block;
    clear: both;
    padding: 0;
    margin: 0 0 14px 0
}

[data-copy] {
    cursor: pointer
}

.event-list {
    list-style: none;
    padding: 0;
    margin: 0
}

.event-item {
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    margin-bottom: 5px;
    padding: 8px
}

.event-content {
    display: flex;
    gap: 12px;
    align-items: center
}

.event-icon {
    flex-shrink: 0
}

    .event-icon img {
        border-radius: 4px;
        display: block
    }

.event-info {
    flex-grow: 1
}

.event-name {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 2px;
    color: #ffdeb9;
    text-shadow: 0 0 5px rgba(255,222,185,0.5),0 0 10px rgba(255,222,185,0.3),0 0 15px rgba(255,222,185,0.2);
    font-family: 'Trebuchet MS',sans-serif;
    letter-spacing: .5px
}

.event-time {
    font-size: 1.1em;
    color: #dac0a3;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 500
}

    .event-time i {
        font-size: 13px;
        color: #dac0a3;
        margin-top: 1px
    }

.status-text {
    color: #dac0a3;
    letter-spacing: .2px
}

    .status-text.active {
        color: #dac0a3
    }

.event-item:hover .event-time i, .event-item:hover .status-text {
    color: #ffdeb9;
    transition: color .2s ease
}

.overview-section {
    background: rgba(44,33,27,0.95);
    border: 1px solid #5c4636;
    border-radius: 4px;
    padding: 15px
}

.profile-row {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #5c4636
}

    .profile-row:last-child {
        border-bottom: none
    }

.profile-label {
    flex: 0 0 200px;
    color: #ffdeb9;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px
}

    .profile-label i {
        color: #cc7344;
        width: 16px;
        text-align: center
    }

.profile-value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px
}

    .profile-value input {
        background: rgba(0,0,0,0.2);
        border: 1px solid #5c4636;
        color: #ffdeb9;
        padding: 6px 10px;
        border-radius: 3px;
        font-size: 14px;
        width: 100%;
        max-width: 300px
    }

        .profile-value input:read-only {
            background: rgba(0,0,0,0.3)
        }

.buy-button {
    background: #752d20;
    color: #ffdeb9;
    padding: 8px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background-color .2s;
    border: 1px solid #a24632;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #a24632;
    cursor: pointer;
    background-image: none;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    margin: 0
}

    .buy-button:hover {
        background: #8d362b
    }

@media (max-width:768px) {
    .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px
    }

    .profile-label {
        margin-bottom: 4px
    }

    .profile-value {
        width: 100%
    }

        .profile-value input {
            max-width: none
        }
}

.characters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 20px;
    padding: 10px
}

.character-card {
    background: rgba(44,33,27,0.95);
    border: 1px solid #5c4636;
    border-radius: 8px;
    overflow: hidden;
    transition: transform .2s ease,box-shadow .2s ease
}

    .character-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2)
    }

.character-header {
    background: rgba(0,0,0,0.2);
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #5c4636
}

.character-level {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #98ff33;
    font-size: 16px;
    font-weight: bold
}

    .character-level span {
        color: #98ff33;
        font-size: 16px
    }

.character-name {
    font-size: 18px;
    font-weight: bold;
    flex: 1
}

.character-info {
    padding: 15px
}

.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px
}

.info-label {
    color: #dac0a3;
    display: flex;
    align-items: center;
    gap: 8px
}

    .info-label i {
        color: #cc7344;
        width: 16px;
        text-align: center
    }

.info-value {
    color: #ffdeb9;
    font-weight: 500
}

.character-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px
}

.action-button {
    background: #752d20;
    color: #ffdeb9;
    border: 1px solid #a24632;
    padding: 8px 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    justify-content: center;
    cursor: pointer;
    transition: background-color .2s
}

    .action-button:hover {
        background: #8d362b
    }

    .action-button i {
        font-size: 14px
    }

.auth-message {
    text-align: center;
    padding: 40px 20px;
    color: #dac0a3
}

    .auth-message i {
        font-size: 48px;
        color: #cc7344;
        margin-bottom: 20px
    }

    .auth-message h2 {
        font-size: 24px;
        margin-bottom: 20px
    }

.verify-button {
    background: #752d20;
    color: #ffdeb9;
    border: 1px solid #a24632;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color .2s
}

    .verify-button:hover {
        background: #8d362b
    }

@media (max-width:768px) {
    body, html {
        overflow-x: hidden;
        max-width: 100vw
    }

    .mid-dark, .basic {
        overflow-x: hidden;
        max-width: 100%
    }

    .content-tabs-container {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 10px;
        overflow: visible
    }

    input[name=tab] + label {
        width: 100%;
        margin: 0;
        padding: 12px 16px;
        justify-content: flex-start;
        box-sizing: border-box
    }

    .characters-grid {
        grid-template-columns: 1fr
    }

    .character-header {
        padding: 12px
    }

    .character-name {
        font-size: 16px
    }

    .profile-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px
    }

    .profile-label {
        flex: none;
        width: 100%
    }

    .profile-value {
        width: 100%
    }

        .profile-value input {
            max-width: 100%
        }

    .invite-panel {
        overflow-x: hidden;
        max-width: 100%
    }

        .invite-panel .referral-slots {
            flex-direction: column;
            padding: 16px;
            gap: 12px;
            overflow: visible
        }

        .invite-panel .referral-slot {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            box-sizing: border-box
        }

        .invite-panel .header-content {
            flex-direction: column;
            gap: 12px
        }

        .invite-panel .header-right {
            width: 100%;
            margin-top: 8px
        }

        .invite-panel .user-badge {
            flex: 1
        }

        .invite-panel .slot-header {
            flex-wrap: wrap;
            gap: 10px
        }

        .invite-panel .slot-info {
            flex: 1;
            min-width: 0
        }

        .invite-panel .reward-item {
            flex-wrap: wrap;
            gap: 10px
        }

        .invite-panel .reward-content {
            flex: 1;
            min-width: 0
        }

        .invite-panel .reward-value {
            min-width: 100px
        }
}

.news .content-tabs-container {
    display: flex;
    background: rgba(0,0,0,0.3);
    border-radius: 8px 8px 0 0;
    padding: 10px;
    margin: 0;
    overflow: hidden;
    width: 100%
}

    .news .content-tabs-container input[type=radio] {
        display: none
    }

    .news .content-tabs-container label {
        flex: 1;
        padding: 15px 20px;
        text-align: center;
        cursor: pointer;
        color: #dac0a3;
        font-size: 14px;
        font-weight: 500;
        transition: all .3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        border: 0;
        background: rgba(81,56,40,0.6);
        height: 50px
    }

        .news .content-tabs-container label i {
            font-size: 16px;
            transition: all .3s ease;
            color: #dac0a3
        }

        .news .content-tabs-container label:hover {
            background: rgba(117,77,53,0.8);
            color: #ffdeb9
        }

    .news .content-tabs-container input[type=radio]:checked + label {
        background: rgba(117,77,53,0.8);
        color: #ffdeb9;
        border-bottom: 2px solid #b4946e;
        border-left: none;
        border-right: none;
        border-top: none
    }

        .news .content-tabs-container input[type=radio]:checked + label i {
            color: #ffdeb9
        }

.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    gap: 20px;
    padding: 20px
}

.download-card {
    background: rgba(44,33,27,0.95);
    border: 1px solid #5c4636;
    border-radius: 8px;
    overflow: hidden;
    transition: all .3s ease;
    position: relative;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1)
}

    .download-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg,#cc7344,#b4946e);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s ease
    }

    .download-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2)
    }

        .download-card:hover::before {
            transform: scaleX(1)
        }

.download-card-header {
    background: rgba(0,0,0,0.2);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid #5c4636;
    transition: background-color .3s ease
}

.download-card:hover .download-card-header {
    background: rgba(0,0,0,0.3)
}

.download-card-header i {
    font-size: 1.8em;
    color: #cc7344;
    transition: transform .3s ease
}

.download-card:hover .download-card-header i {
    transform: scale(1.1)
}

.download-title {
    font-size: 1.2em;
    color: #dac0a3;
    font-weight: 500;
    transition: color .3s ease
}

.download-card:hover .download-title {
    color: #ffdeb9
}

.download-card-content {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center
}

.download-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 24px;
    background: linear-gradient(135deg,#752d20,#8d362b);
    color: #dac0a3;
    border: 1px solid #a24632;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: all .3s ease;
    position: relative;
    overflow: hidden
}

    .download-button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
        transition: left .5s ease
    }

    .download-button:hover {
        background: linear-gradient(135deg,#8d362b,#a24632);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.2)
    }

        .download-button:hover::before {
            left: 100%
        }

    .download-button i {
        font-size: 1.2em;
        color: #dac0a3;
        transition: transform .3s ease
    }

    .download-button:hover i {
        transform: translateY(-2px)
    }

@media (max-width:768px) {
    .download-grid {
        grid-template-columns: 1fr;
        padding: 15px
    }

    .download-card-header {
        padding: 15px
    }

    .download-button {
        padding: 10px 20px
    }
}

.download-card-header i.fa-google-drive {
    color: #4285F4;
    font-size: 1.8em
}

.download-card-header i.fa-mega {
    color: #D9272E;
    font-size: 1.8em
}

.download-card-header i.fa-cloud {
    color: #2C7BE5;
    font-size: 1.8em
}

.download-card-header i.fa-link {
    color: #B4946E;
    font-size: 1.8em
}

.download-card-header i.fa-cloud-download {
    color: #D9272E;
    font-size: 1.8em
}

.download-card-header i.fa-download {
    color: #D9272E;
    font-size: 1.8em
}

.kr.basic + a, .kr.basic ~ a {
    color: #dac0a3 !important;
    text-decoration: none
}

    .kr.basic + a:hover, .kr.basic ~ a:hover {
        color: #ffdeb9 !important
    }

.forum-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 12px 15px;
    color: #ffdeb9;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: url(/assets/img/genel/side_title_bg.png) no-repeat center center,#493122b3;
    border-radius: 8px 8px 0 0;
    text-shadow: 0 0 5px rgba(255,222,185,0.5),0 0 10px rgba(255,222,185,0.3),0 0 15px rgba(255,222,185,0.2)
}

    .forum-header::before {
        content: '';
        position: absolute;
        left: 15px;
        width: 43px;
        height: 37px;
        background: url(/assets/img/genel/kr_basic.png) no-repeat center center
    }

    .forum-header::after {
        content: '';
        position: absolute;
        right: 15px;
        width: 43px;
        height: 37px;
        background: url(/assets/img/genel/kr_basic.png) no-repeat center center;
        transform: scaleX(-1)
    }

.forum-topic-latest {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding: 10px;
    background: rgba(73,49,34,0.7);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: background-color .2s ease;
    cursor: pointer;
    overflow: hidden
}

    .forum-topic-latest a.topic-link {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1
    }

    .forum-topic-latest:hover {
        background: rgba(81,56,40,0.7)
    }

    .forum-topic-latest .forum-icon {
        width: 24px;
        text-align: center;
        flex-shrink: 0;
        margin-right: 0
    }

    .forum-topic-latest .forum-details {
        flex: 1;
        min-width: 0
    }

        .forum-topic-latest .forum-details.stats {
            flex: 0 0 80px;
            display: flex;
            align-items: center;
            padding: 0
        }

    .forum-topic-latest .threads-count {
        display: flex;
        align-items: center;
        gap: 5px
    }

    .forum-topic-latest .forum-latest {
        width: 110px;
        text-align: right;
        flex-shrink: 0
    }

.ranking-container {
    display: flex;
    min-height: 500px;
    width: 100%;
    background: rgba(81,56,40,0.4);
    border-radius: 8px;
    overflow: hidden
}

.sidebar {
    width: 180px;
    background: rgba(81,56,40,0.2);
    flex-shrink: 0;
    padding: .5rem 0;
    border-radius: 8px 0 0 8px
}

.main-content {
    flex: 1;
    min-width: 0
}

.category-box {
    margin-bottom: .25rem
}

.category-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .75rem;
    cursor: pointer;
    background: rgba(102,74,55,0.7);
    transition: all .3s ease;
    position: relative;
    gap: .4rem;
    overflow: hidden
}

    .category-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg,transparent,rgba(218,192,163,0.1),transparent);
        transform: translateX(-100%);
        transition: transform .5s ease
    }

    .category-header:hover::before {
        transform: translateX(100%)
    }

    .category-header i.fas:not(.fa-chevron-down) {
        color: #dac0a3;
        font-size: 1.2rem;
        transition: transform .3s ease;
        filter: drop-shadow(0 0 8px rgba(218,192,163,0.3))
    }

    .category-header span {
        color: #dac0a3;
        font-size: .85rem;
        text-align: center
    }

    .category-header i.fa-chevron-down {
        color: #dac0a3;
        font-size: .7rem;
        transition: transform .3s ease;
        position: absolute;
        right: .75rem;
        top: 50%;
        transform: translateY(-50%)
    }

.category-items {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease,opacity .3s ease;
    opacity: 0;
    background: rgba(81,56,40,0.35)
}

.category-box.open .category-items {
    max-height: 2000px;
    opacity: 1
}

.category-box.open .category-header i.fa-chevron-down {
    transform: translateY(-50%) rotate(180deg)
}

.category-item {
    display: flex;
    align-items: center;
    padding: .5rem 1.25rem;
    color: #dac0a3;
    font-size: .8rem;
    transition: all .3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden
}

    .category-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to right,rgba(218,192,163,0.1),rgba(218,192,163,0.05));
        transform: translateX(-100%);
        transition: transform .3s ease
    }

    .category-item:hover::before {
        transform: translateX(0)
    }

.category-header:hover i.fas:not(.fa-chevron-down) {
    transform: scale(1.1);
    filter: drop-shadow(0 0 12px rgba(218,192,163,0.5))
}

.category-item.active {
    background: rgba(218,192,163,0.1);
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255,215,0,0.5)
}

.ranking-table-container {
    background: rgba(73,47,31,0.4);
    border-radius: 8px;
    overflow: auto;
    width: 100%;
    transition: opacity .3s ease
}

.responsive-table.ranking {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: .8rem
}

    .responsive-table.ranking th, .responsive-table.ranking td {
        padding: .5rem .75rem;
        text-align: center;
        border-bottom: 1px solid rgba(180,148,110,0.2)
    }

        .responsive-table.ranking td:nth-child(2) {
            text-align: left
        }

    .responsive-table.ranking th {
        background: rgba(81,56,40,0.6);
        color: #dac0a3;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        font-size: .8rem
    }

    .responsive-table.ranking td span.level {
        font-size: .75rem;
        margin-right: .4rem;
        color: #98ff33;
        background: none !important;
        padding: 0;
        border-radius: 0;
        text-shadow: 0 0 8px rgba(0,255,0,0.5)
    }

    .responsive-table.ranking tr:hover {
        background: rgba(180,148,110,0.05)
    }

.gold-trophy {
    color: #ffd700
}

.silver-trophy {
    color: #c0c0c0
}

.bronze-trophy {
    color: #cd7f32
}

@media (max-width:768px) {
    .ranking-container {
        flex-direction: column;
        min-width: unset;
        width: 100%
    }

    .sidebar {
        width: 100%;
        padding: 0;
        border-radius: 8px 8px 0 0
    }

    .category-header {
        flex-direction: row;
        justify-content: flex-start;
        gap: .75rem;
        padding: .75rem 1rem
    }

        .category-header i.fas:not(.fa-chevron-down) {
            font-size: 1rem
        }

        .category-header span {
            font-size: .9rem;
            text-align: left
        }

    .category-item {
        padding: .75rem 1.5rem;
        font-size: .85rem
    }

    .main-content {
        padding: .5rem;
        width: 100%;
        overflow-x: auto
    }

    .ranking-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch
    }

    .responsive-table.ranking {
        min-width: 600px
    }

        .responsive-table.ranking th, .responsive-table.ranking td {
            padding: .75rem .5rem;
            white-space: nowrap
        }

            .responsive-table.ranking td:nth-child(2) {
                white-space: normal;
                min-width: 150px
            }

            .responsive-table.ranking td img {
                max-height: 20px;
                width: auto
            }
}

.content.top3 {
    background: linear-gradient(135deg, rgba(36, 27, 24, 0.98) 0%, rgba(42, 34, 29, 0.98) 50%, rgba(36, 27, 24, 0.98) 100%);
}

.top3-cards {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 18px;
    width: 100%;
    margin: 0 auto
}

.top3-card {
    background-color: rgba(96,77,56,0.7);
    border-radius: 18px;
    box-shadow: 0 2px 12px 0 rgba(44,33,27,0.18),inset 0 8px 24px -8px rgba(30,20,10,0.45);
    border: 2px solid #b4946e;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 43px 5px 5px 5px;
    position: relative;
    min-width: 90px;
    min-height: 140px;
    width: 110px;
    transition: all .3s ease
}

    .top3-card.top1 {
        margin-bottom: 24px;
        animation: floatTop1 3s ease-in-out infinite;
        z-index: 2
    }

.top3-rank-badge-img {
    width: 42px;
    height: 57px;
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 3;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center
}

    .top3-rank-badge-img.rank-1 {
        background-image: url(/assets/img/default/img_23.png)
    }

    .top3-rank-badge-img.rank-2 {
        background-image: url(/assets/img/default/img_24.png)
    }

    .top3-rank-badge-img.rank-3 {
        background-image: url(/assets/img/default/img_25.png)
    }

    .top3-rank-badge-img span {
        display: block;
        width: 100%;
        height: 100%;
        font-size: 20px;
        font-weight: bold;
        color: #e9ccad;
        text-align: center;
        line-height: 57px;
        text-shadow: 0 2px 6px #000,0 0 2px #000;
        font-family: 'Onest',sans-serif;
        letter-spacing: 1px;
        user-select: none;
        pointer-events: none;
        padding-left: 2px
    }

.top3-class-img {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    overflow: hidden;
    background: #4a3626;
    box-shadow: 0 1px 4px #0004;
    border: 2px solid #b4946e;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: pulseClassImage 3s ease-in-out infinite
}

.top3-card i {
    position: absolute;
    z-index: 100;
    top: 90px
}

.top3-class-img.class {
    width: 55px;
    height: 55px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block
}

.top3-card-name {
    font-size: 12px;
    color: #dac0a3;
    font-weight: 600;
    text-shadow: 0 1px 2px #0006;
    font-family: 'Onest',sans-serif;
    letter-spacing: .2px;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

@keyframes floatTop1 {
    0% {
        transform: translateY(-5px)
    }

    50% {
        transform: translateY(-10px)
    }

    100% {
        transform: translateY(-5px)
    }
}

@keyframes pulseClassImage {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.02)
    }

    100% {
        transform: scale(1)
    }
}

.s2 .logo {
    width: 321px;
    height: 196px;
    background-size: contain;
    animation: logo_ani_scale 3s infinite
}

.s2 .logo-box {
    width: 321px;
    height: 196px;
    position: absolute;
    top: 105px;
    left: 50%;
    transform: translateX(-50%)
}

body.s2 {
    margin: 0;
    height: 100vh;
    overflow-x: hidden;
    background-image: url(/assets/img/genel/s2.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover
}

.s2 .mid-content {
    background-color: #37201b;
    margin-top: 335px
}

.s2 .news-card {
    background-color: rgba(81,47,40,0.4);
    border: 1px solid rgba(180,129,110,0.2)
}

.s2 .statistics .forum-ticker .forum-ticker-item {
    background-color: rgba(59,30,25,0.6);
    border: 1px solid rgba(190,132,116,0.1)
}

.s2 .forum-ticker .fa-clock {
    color: #7d412e
}

.s2 .download {
    background: url(/assets/img/default/img_26.png) no-repeat center center
}

.s2 .navbar {
    background: url(/assets/img/default/img_27.png) repeat-x
}

.s2 .nav-links li.active::after {
    background: url(/assets/img/default/img_28.png) no-repeat
}

.s2 .kr.download {
    background: url(/assets/img/default/img_7.png) no-repeat;
    display: inline-block;
    vertical-align: middle;
    width: 49px;
    height: 33px
}

.s2 .news-title {
    color: #d5a45b
}

.s2 .btn-main, .s2 .mid-dark input[type=submit]:not(forum-tags), .s2 .mid-dark input[type=file] {
    background-image: url(/assets/img/default/img_29.png)
}

.s2 .mid-dark {
    background-color: #311f18
}

    .s2 .mid-dark.reg {
        background: url(/assets/img/default/bg_reg.png) 0 0 no-repeat #311f18
    }

    .s2 .mid-dark.dl {
        background: url(/assets/img/default/bg_dl.png) 0 0 no-repeat #311f18
    }

.s2 .kr.basic {
    background: url(/assets/img/default/img_30.png) no-repeat center center
}

.s2 .kr.login {
    background: url(/assets/img/default/img_31.png) no-repeat center center
}

.s2 .kr.event {
    background: url(/assets/img/default/img_32.png) no-repeat center center
}

.s2 .kr.top5 {
    background: url(/assets/img/default/img_33.png) no-repeat center center
}

.s2 .download-button, .s2 .input[name=tab]:checked + label {
    background: linear-gradient(135deg,#754d20,#a37646);
    border: 1px solid #a27432
}

    .s2 .download-button:hover {
        background: linear-gradient(135deg,#97642a,#c38e55)
    }

.s2 .side-dark {
    background-color: #4e251d
}

.side-wrapper .side-dark .title {
    background: linear-gradient(to right, #2a221df2 0, #362e28f2 50%, #2a221df2 100%)
}

.s2 .side-wrapper .side-dark .title {
    background: url(/assets/img/default/img_17.png) no-repeat center center,#3c1d16
}

.s2 .toplist .title::after, .s2 .mid-dark .title::after {
    background-image: url(/assets/img/default/img_12.png),linear-gradient(to right,#311f18,#311f18)
}

.s2 .side-wrapper .btn-ucp {
    background: #562217;
    background: linear-gradient(90deg,rgba(86,58,23,0),rgba(102,72,27,1.0));
    border: 1px solid #72501e
}

    .s2 .side-wrapper .btn-ucp .icon {
        border-right: 1px solid #72521e
    }

.s2 .buy-button {
    background: #755020;
    border: 1px solid #a27e32
}

.s2 .btn, .s2 button {
    background-color: #754e20;
    border: 1px solid #a27432
}

.s2 .btn-main {
    background: #755020;
    border: 1px solid #a27432
}

.s2 .toplist .title span, .s2 .mid-dark .title span {
    color: #d5a861
}

.s2 .site-footer {
    background-color: rgba(55,32,27,0.95)
}

.s2 .footer-links a::after {
    background-color: #f3b65f
}

.s2 .footer-links a:hover {
    color: #f3c05f
}

.server-selection {
    width: 333px;
    display: flex;
    justify-content: space-between
}

.btn-s-select {
    width: 165px;
    height: 59px;
    cursor: pointer;
    transition: all .3s ease;
    background-size: 165px 59px;
    background-position: center;
    background-repeat: no-repeat;
    border: 0;
    position: relative
}

    .btn-s-select.elveron {
        background-image: url(/assets/img/default/img_34.png)
    }

        .btn-s-select.elveron:hover, .btn-s-select.elveron.active {
            background-image: url(/assets/img/default/img_35.png)
        }

    .btn-s-select.fury {
        background-image: url(/assets/img/default/img_36.png)
    }

        .btn-s-select.fury:hover, .btn-s-select.fury.active {
            background-image: url(/assets/img/default/img_37.png)
        }

    .btn-s-select::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 10px;
        height: 10px;
        background-color: #8c7458;
        transform: rotate(45deg);
        transition: left .4s ease;
        opacity: 0
    }

    .btn-s-select:hover::after, .btn-s-select.active::after {
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        opacity: 1
    }

    .btn-s-select.fury::before {
        content: 'NEW';
        position: absolute;
        top: -8px;
        right: -8px;
        background: linear-gradient(135deg,#752d20,#8d362b);
        color: #fff;
        font-size: 10px;
        font-weight: bold;
        padding: 3px 8px;
        border-radius: 12px;
        border: 1px solid #a24632;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0 2px 6px rgba(255,107,53,0.4),inset 0 1px 0 rgb(255,115,115,0.6);
        z-index: 10;
        letter-spacing: .5px;
        animation: newBadgePulse 2s infinite ease-in-out;
        transform-origin: center center
    }

@media screen and (max-width:370px) {
    .server-selection {
        justify-content: center
    }
}

.invite-panel {
    background: #45321e;
    border-radius: 12px
}

    .invite-panel .referral-header {
        background: #653a2a;
        padding: 24px;
        position: relative
    }

        .invite-panel .referral-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
            opacity: .3
        }

    .invite-panel .header-content {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 16px
    }

    .invite-panel .header-left {
        display: flex;
        align-items: center;
        gap: 16px
    }

    .invite-panel .header-icon {
        width: 48px;
        height: 48px;
        background: rgba(255,255,255,0.2);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255,255,255,0.1)
    }

        .invite-panel .header-icon i {
            font-size: 24px;
            color: #ffdeb9
        }

    .invite-panel .referral-title {
        color: #ffdeb9;
        font-size: 24px;
        font-weight: 700;
        margin: 0 0 8px 0;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3)
    }

    .invite-panel .level-info {
        display: flex;
        gap: 24px;
        flex-wrap: wrap
    }

    .invite-panel .your-level, .invite-panel .slots-info {
        color: #ffdeb9;
        font-size: 14px;
        opacity: .9;
        display: flex;
        align-items: center;
        gap: 10px
    }

    .invite-panel .slots-info {
        position: relative
    }

    .invite-panel .your-level strong {
        padding: 5px;
        background: rgba(0,0,0,0.3);
        border-radius: 5px
    }

    .invite-panel .header-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 12px
    }

        .invite-panel .header-right .top-row {
            display: flex;
            align-items: center;
            gap: 12px
        }

    .invite-panel .user-badge {
        background: rgba(0,0,0,0.3);
        padding: 8px 16px;
        border-radius: 20px;
        border: 1px solid rgba(255,255,255,0.2)
    }

        .invite-panel .user-badge span {
            color: #ffdeb9;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: .5px
        }

    .invite-panel .share-button, .invite-panel .wide-button {
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.2);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffdeb9;
        cursor: pointer;
        transition: all .3s ease;
        backdrop-filter: blur(10px);
        margin: 0
    }

    .invite-panel .share-button {
        width: 40px;
        height: 40px
    }

    .invite-panel .wide-button {
        padding: 8px 16px;
        gap: 8px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .5px;
        justify-content: center;
        width: calc(100% - 0)
    }

        .invite-panel .share-button:hover, .invite-panel .wide-button:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px)
        }

    .invite-panel .referral-warning {
        background: linear-gradient(135deg,#752d20 0,#8b3426 100%);
        padding: 16px 24px;
        display: flex;
        gap: 16px;
        border-top: 1px solid rgba(255,255,255,0.1)
    }

    .invite-panel .warning-icon {
        flex-shrink: 0;
        width: 24px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 2px
    }

        .invite-panel .warning-icon i {
            color: #ffb84d;
            font-size: 18px
        }

    .invite-panel .warning-content h4 {
        color: #ffdeb9;
        font-size: 14px;
        font-weight: 600;
        margin: 0 0 8px 0
    }

    .invite-panel .warning-content p {
        color: #ffdeb9;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
        opacity: .9
    }

    .invite-panel .referral-banned {
        background: linear-gradient(135deg,#752d20 0,#8b3426 100%);
        padding: 16px 24px;
        display: flex;
        gap: 16px;
        border-top: 1px solid rgba(255,255,255,0.1)
    }

    .invite-panel .referral-slots {
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 16px
    }

    .invite-panel .referral-slot {
        background: linear-gradient(90deg,#392919 0,#3b2b1a 100%);
        border-radius: 12px;
        border: 1px solid #444;
        transition: all .3s ease;
        overflow: hidden
    }

        .invite-panel .referral-slot:hover {
            border-color: #cc7344;
            box-shadow: 0 4px 20px rgba(204,115,68,0.1)
        }

        .invite-panel .referral-slot.active {
            border-color: #7b4a2e
        }

    .invite-panel .slot-header {
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px;
        cursor: pointer
    }

    .invite-panel .slot-avatar {
        width: 48px;
        height: 48px;
        background: linear-gradient(90deg,rgba(118,48,33,1) 0,rgba(140,55,37,1) 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

        .invite-panel .slot-avatar i {
            color: #ffdeb9;
            font-size: 20px
        }

    .invite-panel .slot-info {
        flex: 1
    }

    .invite-panel .referral-name {
        color: #ffdeb9;
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 4px 0
    }

    .invite-panel .referral-meta {
        color: #bd9074;
        font-size: 13px;
        margin: 0
    }

    .invite-panel .slot-progress {
        text-align: right;
        margin-right: 16px
    }

    .invite-panel .progress-text {
        color: #c9724f;
        font-size: 18px;
        font-weight: 700;
        display: block
    }

    .invite-panel .progress-label {
        color: #bd9074;
        font-size: 12px
    }

    .invite-panel .expand-button {
        width: 32px;
        height: 32px;
        background: rgba(255,255,255,0.1);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #dda58a;
        cursor: pointer;
        transition: all .3s ease;
        margin-bottom: 0
    }

        .invite-panel .expand-button:hover {
            background: rgba(255,255,255,0.2);
            color: #ffdeb9
        }

    .invite-panel .info-link {
        text-decoration: none;
        margin-left: 8px;
        display: inline-flex
    }

        .invite-panel .info-link:hover {
            transform: scale(1.1)
        }

    .invite-panel .rewards-section {
        border-top: 1px solid #7b4a2e;
        background: linear-gradient(90deg,#392919 0,#352617 100%);
        padding: 0 20px;
        max-height: 0;
        overflow: hidden;
        transition: all .3s ease;
        opacity: 0
    }

    .invite-panel .referral-slot.expanded .rewards-section {
        padding: 20px;
        max-height: 1000px;
        opacity: 1
    }

    .invite-panel .expand-button i {
        transition: transform .3s ease
    }

    .invite-panel .referral-slot.expanded .expand-button i {
        transform: rotate(90deg)
    }

    .invite-panel .reward-item {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 12px;
        border: 1px solid transparent;
        transition: all .3s ease
    }

        .invite-panel .reward-item:hover {
            transform: translateY(-2px)
        }

        .invite-panel .reward-item:last-child {
            margin-bottom: 0
        }

        .invite-panel .reward-item.completed {
            background: linear-gradient(135deg,rgb(76 109 77 / 10%) 0,rgb(96 147 98 / 5%) 100%);
            border-color: rgb(85 131 86 / 30%)
        }

        .invite-panel .reward-item.pending {
            background: linear-gradient(135deg,rgb(209 179 90 / 10%) 0,rgb(129 110 52 / 5%) 100%);
            border-color: rgb(141 128 88 / 30%)
        }

    .invite-panel .reward-icon {
        width: 40px;
        height: 40px;
        background: linear-gradient(90deg,rgba(118,48,33,1) 0,rgba(140,55,37,1) 100%);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

        .invite-panel .reward-icon i {
            color: #ffdeb9;
            font-size: 16px
        }

    .invite-panel .reward-content {
        flex: 1
    }

        .invite-panel .reward-content h4 {
            color: #ffdeb9;
            font-size: 14px;
            font-weight: 600;
            margin: 0 0 4px 0
        }

        .invite-panel .reward-content p {
            color: #c19c85;
            font-size: 12px;
            margin: 0;
            line-height: 1.4
        }

    .invite-panel .reward-value {
        text-align: right;
        flex-shrink: 0
    }

        .invite-panel .reward-value span {
            font-size: 14px;
            font-weight: 700;
            display: block
        }

            .invite-panel .reward-value span img {
                vertical-align: sub;
                margin-left: 6px
            }

        .invite-panel .reward-value small {
            font-size: 11px;
            opacity: .8;
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .invite-panel .reward-value.earned span {
            color: #689b6a
        }

        .invite-panel .reward-value.earned small {
            color: #559557
        }

        .invite-panel .reward-value.pending span {
            color: #cdab5b
        }

        .invite-panel .reward-value.pending small {
            color: #c1a246
        }

    .invite-panel .referral-slot.locked {
        background: rgba(0,0,0,0.3);
        border-color: #573623;
        opacity: .6
    }

    .invite-panel .referral-slot.banned {
        border-color: #573623;
        opacity: .6
    }

    .invite-panel .locked-content {
        padding: 20px;
        display: flex;
        align-items: center;
        gap: 16px
    }

    .invite-panel .locked-icon {
        width: 48px;
        height: 48px;
        background: linear-gradient(135deg,#555 0,#666 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0
    }

        .invite-panel .locked-icon i {
            color: #888;
            font-size: 20px
        }

    .invite-panel .locked-info h3 {
        color: #888;
        font-size: 16px;
        font-weight: 600;
        margin: 0 0 4px 0
    }

    .invite-panel .locked-info p {
        color: #666;
        font-size: 13px;
        margin: 0
    }

    .invite-panel .slot-footer {
        background: #2e2216;
        border-top: 1px solid rgba(180,83,54,0.2);
        border-radius: 0 0 8px 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0
    }

    .invite-panel .slot-footer {
        border-top: none !important;
        padding: 6px
    }

    .invite-panel .unlink-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(168,64,42,0.15);
        color: #f4c7a3;
        border: 1px solid rgba(180,83,54,0.3);
        border-radius: 6px;
        padding: 10px 28px;
        font-weight: 600;
        font-size: 15px;
        cursor: pointer;
        transition: all .25s ease;
        margin: 0;
        min-width: 160px
    }

        .invite-panel .unlink-btn i {
            font-size: 16px;
            transition: transform .25s ease,color .25s ease
        }

        .invite-panel .unlink-btn:hover {
            background: rgba(185,77,54,0.25);
            border-color: rgba(185,77,54,0.6);
            color: #ffd7b3
        }

            .invite-panel .unlink-btn:hover i {
                transform: rotate(-10deg);
                color: #ffd7b3
            }

        .invite-panel .unlink-btn:active {
            background: rgba(185,77,54,0.35);
            transform: translateY(1px)
        }

@media (max-width:768px) {
}

@media (max-width:480px) {
    input[name=tab] + label {
        padding: 10px 14px;
        font-size: 13px
    }

        input[name=tab] + label i {
            font-size: 14px
        }

    .invite-panel .referral-header {
        padding: 14px
    }

    .invite-panel .header-left {
        gap: 10px
    }

    .invite-panel .header-icon {
        width: 36px;
        height: 36px
    }

        .invite-panel .header-icon i {
            font-size: 18px
        }

    .invite-panel .referral-title {
        font-size: 18px
    }

    .invite-panel .header-right .top-row {
        flex-direction: column;
        gap: 8px
    }

    .invite-panel .user-badge {
        width: 100%;
        text-align: center
    }

    .invite-panel .share-button {
        width: 100%
    }

    .invite-panel .referral-slots {
        padding: 12px;
        gap: 10px
    }

    .invite-panel .slot-header {
        padding: 12px;
        gap: 8px
    }

    .invite-panel .slot-avatar {
        width: 36px;
        height: 36px
    }

        .invite-panel .slot-avatar i {
            font-size: 16px
        }

    .invite-panel .referral-name {
        font-size: 14px
    }

    .invite-panel .referral-meta {
        font-size: 11px
    }

    .invite-panel .slot-info {
        min-width: 120px
    }

    .invite-panel .progress-text {
        font-size: 15px
    }

    .invite-panel .progress-label {
        font-size: 10px
    }

    .invite-panel .expand-button {
        width: 26px;
        height: 26px
    }

        .invite-panel .expand-button i {
            font-size: 12px
        }

    .invite-panel .reward-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        gap: 10px
    }

    .invite-panel .reward-icon {
        width: 36px;
        height: 36px
    }

        .invite-panel .reward-icon i {
            font-size: 16px
        }

    .invite-panel .reward-content {
        width: 100%;
        min-width: auto
    }

        .invite-panel .reward-content h4 {
            font-size: 13px
        }

        .invite-panel .reward-content p {
            font-size: 11px
        }

    .invite-panel .reward-value {
        width: 100%;
        min-width: auto;
        display: flex;
        justify-content: space-between;
        align-items: center
    }

        .invite-panel .reward-value span {
            font-size: 14px
        }

        .invite-panel .reward-value small {
            font-size: 10px
        }

    .invite-panel .locked-content {
        padding: 14px;
        gap: 10px
    }

    .invite-panel .locked-icon {
        width: 36px;
        height: 36px
    }

        .invite-panel .locked-icon i {
            font-size: 16px
        }

    .invite-panel .locked-info h3 {
        font-size: 14px
    }

    .invite-panel .locked-info p {
        font-size: 11px
    }
}

.invite-panel .info-tooltip-container {
    position: relative;
    display: inline-block;
    margin-left: 8px
}

.invite-panel .info-trigger {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .3s ease
}

    .invite-panel .info-trigger:hover {
        background: rgba(255,255,255,0.2);
        border-color: rgba(255,255,255,0.4);
        transform: scale(1.1)
    }

    .invite-panel .info-trigger i {
        font-size: 12px;
        color: #fff
    }

.invite-panel .info-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg,#2a2a2a 0,#1e1e1e 100%);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 0;
    min-width: 280px;
    max-width: 320px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all .3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    z-index: 1000;
    margin-bottom: 10px
}

.invite-panel .info-tooltip-container:hover .info-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0)
}

.invite-panel .tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #2a2a2a
}

.invite-panel .tooltip-content {
    padding: 16px
}

    .invite-panel .tooltip-content h4 {
        margin: 0 0 12px 0;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 8px
    }

.invite-panel .slot-requirements {
    margin-bottom: 12px
}

.invite-panel .requirement-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05)
}

    .invite-panel .requirement-item.locked {
        border-left: 3px solid #893737
    }

    .invite-panel .requirement-item.unlocked {
        border-left: 3px solid #378937
    }

    .invite-panel .requirement-item:last-child {
        margin-bottom: 0
    }

.invite-panel .level-badge {
    color: #fff;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap
}

    .invite-panel .level-badge.locked {
        background: linear-gradient(90deg,rgba(118,48,33,1) 0,rgba(140,55,37,1) 100%)
    }

    .invite-panel .level-badge.unlocked {
        background: linear-gradient(90deg,rgba(33,118,48,1) 0,rgba(37,140,55,1) 100%)
    }

.invite-panel .requirement-text {
    color: #ccc;
    font-size: 12px;
    margin-left: 10px;
    flex: 1
}

.invite-panel .tooltip-note {
    margin: 0;
    color: #aaa;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    font-style: italic;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 8px
}

@media (max-width:768px) {
    .invite-panel .info-tooltip {
        min-width: 260px;
        max-width: 280px;
        left: auto;
        right: 0;
        transform: translateX(0)
    }

    .invite-panel .info-tooltip-container:hover .info-tooltip {
        transform: translateX(0) translateY(0)
    }

    .invite-panel .tooltip-arrow {
        left: auto;
        right: 12px;
        transform: translateX(0)
    }
}

@media (max-width:480px) {
    .invite-panel .info-tooltip {
        min-width: 240px;
        max-width: 260px;
        position: fixed;
        left: 10px !important;
        right: 10px !important;
        bottom: auto !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 9999
    }

    .invite-panel .info-tooltip-container:hover .info-tooltip {
        transform: translateY(-50%) !important
    }

    .invite-panel .tooltip-arrow {
        display: none
    }

    .invite-panel .tooltip-content {
        padding: 20px
    }

        .invite-panel .tooltip-content h4 {
            font-size: 16px;
            margin-bottom: 16px
        }

    .invite-panel .requirement-item {
        padding: 8px 10px;
        margin-bottom: 10px
    }

    .invite-panel .level-badge {
        font-size: 12px;
        padding: 4px 10px
    }

    .invite-panel .requirement-text {
        font-size: 13px
    }

    .invite-panel .tooltip-note {
        font-size: 12px;
        padding-top: 12px;
        margin-top: 12px
    }
}

.input-field {
    position: relative;
    margin-bottom: 25px
}

.input-container {
    position: relative;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(139,69,19,0.3);
    transition: all .3s ease;
    backdrop-filter: blur(5px);
    overflow: hidden
}

    .input-container:focus-within {
        border-color: #e67e22;
        box-shadow: 0 0 15px rgba(230,126,34,0.3);
        background: rgba(0,0,0,0.4)
    }

.input-icon {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    color: #8d6e63;
    font-size: 16px;
    transition: all .3s ease;
    z-index: 3;
    pointer-events: none;
}

.input-container:focus-within .input-icon {
    color: #e67e22
}

.input-container input {
    width: 100%;
    padding: 12px 0 12px 40px;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 16px;
    font-family: 'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
    outline: none;
    transition: all .3s ease;
    box-sizing: border-box;
    line-height: 1.2;
}

    .input-container input::placeholder {
        color: transparent;
    }

.input-container label {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    color: #a1887f;
    font-size: 16px;
    font-weight: 400;
    transition: all .3s ease;
    pointer-events: none;
    z-index: 2
}

.input-container input:focus ~ label, .input-container input:not(:placeholder-shown) ~ label {
    top: 12px;
    font-size: 12px;
    color: #e67e22;
    font-weight: 600;
    left: 16px
}

.password-requirements {
    background: linear-gradient(135deg,rgba(139,69,19,0.2) 0,rgba(160,82,45,0.15) 100%);
    border: 1px solid rgba(139,69,19,0.4);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden
}

    .password-requirements::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(230,126,34,0.1),transparent);
        transition: left .6s ease
    }

    .password-requirements:hover::before {
        left: 100%
    }

.req-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #d4a574;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 1px solid rgba(212,165,116,0.3);
    padding-bottom: 8px
}

    .req-header i {
        font-size: 16px;
        color: #d4a574
    }

.req-grid {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.req-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #d4a574;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all .3s ease;
    background: rgba(212,165,116,0.05)
}

    .req-item:hover {
        background: rgba(212,165,116,0.1);
        transform: translateX(4px)
    }

.req-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: rgba(39,174,96,0.2);
    border-radius: 50%;
    color: #27ae60;
    font-size: 10px;
    transition: all .3s ease
}

.req-item:hover .req-icon {
    background: rgba(39,174,96,0.3);
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(39,174,96,0.4)
}

.login-link {
    text-align: center;
    margin-top: 25px;
    padding: 20px;
    background: linear-gradient(135deg,rgba(139,69,19,0.1) 0,rgba(160,82,45,0.1) 100%);
    border-radius: 10px;
    border: 1px solid rgba(139,69,19,0.3);
    backdrop-filter: blur(5px);
    position: relative;
    overflow: hidden
}

    .login-link::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
        transition: left .5s ease
    }

    .login-link:hover::before {
        left: 100%
    }

    .login-link span {
        color: #d7ccc8;
        font-size: 14px;
        font-weight: 500;
        position: relative;
        z-index: 1
    }

    .login-link a {
        color: #e67e22;
        text-decoration: none;
        font-weight: 700;
        margin-left: 8px;
        padding: 6px 12px;
        background: linear-gradient(135deg,rgba(230,126,34,0.2) 0,rgba(211,84,0,0.2) 100%);
        border-radius: 6px;
        border: 1px solid rgba(230,126,34,0.3);
        transition: all .3s ease;
        position: relative;
        z-index: 1;
        text-shadow: 0 1px 2px rgba(0,0,0,0.3)
    }

        .login-link a:hover {
            color: #fff;
            background: linear-gradient(135deg,rgba(230,126,34,0.4) 0,rgba(211,84,0,0.4) 100%);
            border-color: rgba(230,126,34,0.6);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(230,126,34,0.3)
        }

.form-text {
    color: #aaa;
    font-size: 12px;
    margin-top: 6px
}

.system-requirements {
    background: linear-gradient(135deg,rgba(139,69,19,0.15) 0,rgba(160,82,45,0.1) 100%);
    border: 1px solid rgba(139,69,19,0.4);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
    backdrop-filter: blur(10px);
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    overflow: hidden
}

    .system-requirements::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg,transparent,rgba(230,126,34,0.05),transparent);
        transition: left .8s ease
    }

    .system-requirements:hover::before {
        left: 100%
    }

.req-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    color: #d4a574;
    font-weight: 700;
    font-size: 18px;
    border-bottom: 2px solid rgba(212,165,116,0.3);
    padding-bottom: 12px
}

    .req-header i {
        font-size: 20px;
        color: #d4a574
    }

.req-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 16px
}

.req-item {
    display: flex;
    gap: 15px;
    padding: 16px;
    border-radius: 8px;
    transition: all .3s ease;
    background: rgba(0,0,0,0.2);
    border: 1px solid rgba(139,69,19,0.2)
}

    .req-item:hover {
        background: rgba(0,0,0,0.3);
        border-color: rgba(230,126,34,0.4);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.3)
    }

.req-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg,rgba(212,165,116,0.2) 0,rgba(184,134,11,0.2) 100%);
    border-radius: 50%;
    color: #d4a574;
    font-size: 16px;
    flex-shrink: 0;
    transition: all .3s ease
}

.req-item:hover .req-icon {
    background: linear-gradient(135deg,rgba(212,165,116,0.3) 0,rgba(184,134,11,0.3) 100%);
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(212,165,116,0.4)
}

.req-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.req-title {
    color: #d4a574;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px
}

.req-desc {
    color: #d7ccc8;
    font-size: 13px;
    line-height: 1.4
}

.req-warning {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(244,67,54,0.1);
    border: 1px solid rgba(244,67,54,0.3);
    border-radius: 4px;
    color: #ff6b6b;
    font-size: 11px;
    font-weight: 500
}

    .req-warning i {
        font-size: 10px;
        color: #ff6b6b
    }

@media (max-width:768px) {
    .req-grid {
        grid-template-columns: 1fr
    }

    .req-item {
        padding: 12px
    }

    .req-icon {
        width: 35px;
        height: 35px;
        font-size: 14px
    }

    .req-header {
        font-size: 16px
    }

        .req-header i {
            font-size: 18px
        }
}

.modal {
    display: block;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    padding-top: 160px;
    transition: all .5s ease
}

.modal-content {
    background-color: #57412f;
    border: 1px solid #745740;
    margin: auto;
    padding: 0;
    border-radius: 5px;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: opacity .2s ease,transform .2s ease;
    opacity: 1;
    transform: scale(1)
}

.close {
    color: #dac0a3;
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer
}

    .close:hover, .close:focus {
        color: #f6dabb;
        text-decoration: none;
        cursor: pointer
    }

.modal-header {
    padding: 10px 16px;
    border-radius: 5px;
    background-color: #4a3626;
    color: #dac0a3;
    border-bottom: 1px solid #745740;
    display: block !important;
    margin: initial
}

.modal-body {
    padding: 15px;
    font-size: 14px;
    color: #dac0a3
}

    .modal-body a {
        color: #dac0a3;
        text-decoration: none
    }

        .modal-body a:hover {
            color: #f6dabb;
            text-decoration: none
        }

    .modal-body img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%
    }

.modal {
    display: block;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
    padding-top: 160px;
    transition: all .5s ease
}

.modal-content {
    background-color: #57412f;
    border: 1px solid #745740;
    margin: auto;
    padding: 0;
    border-radius: 5px;
    width: 40%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: opacity .2s ease,transform .2s ease;
    opacity: 1;
    transform: scale(1)
}

.close {
    color: #dac0a3;
    float: right;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer
}

    .close:hover, .close:focus {
        color: #f6dabb;
        text-decoration: none;
        cursor: pointer
    }

.modal-header {
    padding: 10px 16px;
    border-radius: 5px;
    background-color: #4a3626;
    color: #dac0a3;
    border-bottom: 1px solid #745740;
    display: block !important;
    margin: initial
}

.modal-body {
    padding: 15px;
    font-size: 14px;
    color: #dac0a3
}

    .modal-body a {
        color: #dac0a3;
        text-decoration: none
    }

        .modal-body a:hover {
            color: #f6dabb;
            text-decoration: none
        }

    .modal-body img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%
    }

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    display: inline-block;
    vertical-align: middle;
    *vertical-align: auto;
    position: relative
}

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    *display: inline
}

    .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
        display: -moz-inline-box;
        -moz-box-orient: vertical;
        display: inline-block;
        vertical-align: middle;
        *vertical-align: auto;
        position: relative
    }

    .odometer.odometer-auto-theme .odometer-digit, .odometer.odometer-theme-default .odometer-digit {
        *display: inline
    }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
            display: -moz-inline-box;
            -moz-box-orient: vertical;
            display: inline-block;
            vertical-align: middle;
            *vertical-align: auto;
            visibility: hidden
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-spacer, .odometer.odometer-theme-default .odometer-digit .odometer-digit-spacer {
            *display: inline
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-digit-inner, .odometer.odometer-theme-default .odometer-digit .odometer-digit-inner {
            text-align: left;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            overflow: hidden
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon {
            display: block
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-ribbon-inner, .odometer.odometer-theme-default .odometer-digit .odometer-ribbon-inner {
            display: block;
            -webkit-backface-visibility: hidden
        }

        .odometer.odometer-auto-theme .odometer-digit .odometer-value, .odometer.odometer-theme-default .odometer-digit .odometer-value {
            display: block;
            -webkit-transform: translateZ(0)
        }

            .odometer.odometer-auto-theme .odometer-digit .odometer-value.odometer-last-value, .odometer.odometer-theme-default .odometer-digit .odometer-value.odometer-last-value {
                position: absolute
            }

    .odometer.odometer-auto-theme.odometer-animating-up .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up .odometer-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s
    }

    .odometer.odometer-auto-theme.odometer-animating-up.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-up.odometer-animating .odometer-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .odometer.odometer-auto-theme.odometer-animating-down .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down .odometer-ribbon-inner {
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        -ms-transform: translateY(-100%);
        -o-transform: translateY(-100%);
        transform: translateY(-100%)
    }

    .odometer.odometer-auto-theme.odometer-animating-down.odometer-animating .odometer-ribbon-inner, .odometer.odometer-theme-default.odometer-animating-down.odometer-animating .odometer-ribbon-inner {
        -webkit-transition: -webkit-transform 2s;
        -moz-transition: -moz-transform 2s;
        -ms-transition: -ms-transform 2s;
        -o-transition: -o-transform 2s;
        transition: transform 2s;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

.odometer.odometer-auto-theme, .odometer.odometer-theme-default {
    font-family: "Helvetica Neue",sans-serif;
    line-height: 1.1em
}

    .odometer.odometer-auto-theme .odometer-value, .odometer.odometer-theme-default .odometer-value {
        text-align: center
    }