/* Trajan — lokalny font (nie Google). Deklaracja też tu, bo gotei.css ładuje się po material-kit. */
@font-face {
	font-family: 'TrajanPro-Regular';
	src: url('font/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'),
		 url('font/TrajanPro-Regular.otf') format('opentype'),
		 url('font/TrajanPro-Regular.woff') format('woff'),
		 url('font/TrajanPro-Regular.ttf') format('truetype'),
		 url('font/TrajanPro-Regular.svg#TrajanPro-Regular') format('svg');
	font-weight: 100 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TrajanPro-Regular';
	src: url('font/TrajanPro-Regular.woff') format('woff'),
		 url('font/TrajanPro-Regular.ttf') format('truetype');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TrajanPro-Regular';
	src: url('font/TrajanPro-Regular.woff') format('woff'),
		 url('font/TrajanPro-Regular.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'TrajanPro-Regular';
	src: url('font/TrajanPro-Regular.woff') format('woff'),
		 url('font/TrajanPro-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Nagłówki / body — Trajan + Roboto (Google) jako awaryjny. BEZ Georgia. */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
	font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
}

body {
    background-color: #000;
    background-image: url(../img/login-bg.jpg);
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-blend-mode: normal;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.card{
	margin-bottom:10px;
}
.gameBody {
    background-image: url('../img/login-bg.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    /* bez overlay z body — całe tło ma być czytelne po wejściu do gry */
    background-color: #000;
    background-blend-mode: normal;

    width: 100%;
    height: 100%;

    overflow-x: hidden;
    overflow-y: auto;
}

.gameBody .smallContainer {
    width: 100%;
    max-width: 800px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 15px;
    padding-right: 15px;
}

.gameBody #menutop .navbar-nav {
    display: flex;

    align-items: center;
    align-self: center;
    float: none;
}

.gameBody #menutop .navbar-nav li:not(:last-child) {
border-right:1px solid #212020;
}
.gameBody #menutop .navbar-nav li:not(:first-child) {
border-left:1px solid #323232;
}

.gameBody #menutop .navbar-nav li {
    float: none;
}

.gameBody #menutop .navbar-nav .nav-link {
    padding-left: 25px;
    padding-right: 25px;
}

.bottomContent {
    position: absolute;

    bottom: 35px;
    left: 0px;

    width: 100%;
}

.loginBox {
    position: relative;
    background-color: rgba(0, 0, 0, .7);

    min-height: 40px;
    width: 100%;
}

.loginBox .logo {
    position: absolute;

    left: calc(50% - 135px);
    top: -55px;

    max-height: 110px;
}

.loginBox label {
    color: white;
    font-size: 18px;
}

.btn-ga,
.btn-ga:link {
    border-color: #9e6530;
    background-color: #9e6530;
    color: white;
}

.btn-ga:hover,
.btn-ga:focus {
    border-color: #ae8550;
    background-color: #ae8550;
}

.ga-input {
    background-color: rgba(0, 0, 0, .6);
    color: white;

    border: 1px solid #dcb96e;
    border-radius: 5px;

    font-size: 16px;

    width: 100%;
    
    padding: 12px 18px;
}

.ga-input.v2 {
    background-color: rgba(0, 0, 0, .6);
    color: white;

    border: 1px solid #292929;
    border-radius: 5px;

    font-size: 16px;

    width: 100%;
    
    padding: 12px 18px;
}

.ga-button {
    background: rgba(0, 0, 0, .6);
    color: #efad4d;

    border-radius: 8px;
    padding: 12px 18px;

    font-size: 18px;
}

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

.gameBody .footer {
    margin-top: 30px;
    color: #dcdcdc;
}

.biggerFont {
    font-size: 120%;
}

.biggerFont2 {
    font-size: 133%;
}

.biggerLineHeight {
    line-height: 150%;
}

.modal .modal-header .close {
	padding:10px;
	border-radius:5px;
	border:1px solid #303030; 
}

.tim-white-buttons {
    background-color: #777777;
}
.title{
    margin-top: 10px;
    margin-bottom: 10px;
    min-height: 12px;
	color:#dcb96e;
}
.title.text-center{
    margin-bottom: 50px;
}
.tim-typo{
    padding-left: 25%;
    margin-bottom: 40px;
    position: relative;
}
.tim-typo .tim-note{
    bottom: 10px;
    color: #c0c1c2;
    display: block;
    font-weight: 400;
    font-size: 13px;
    line-height: 13px;
    left: 0;
    margin-left: 20px;
    position: absolute;
    width: 260px;
}
.tim-row{
    padding-top: 50px;
	margin-bottom: 10px;
}
.tim-row2{
    padding-top: 0px;
}
.tim-row h3{
    margin-top: 0;
}
.switch{
    margin-right: 20px;
}
#navbar-full .navbar{
    border-radius: 0 !important;
    margin-bottom: 15px;
    z-index: 2;
}
.space{
    height: 130px;
    display: block;
}
.space-110{
    height: 110px;
    display: block;
}
.space-50{
    height: 50px;
    display: block;
}
.space-70{
    height: 70px;
    display: block;
}
.pd15{
	margin-top:15px!important;
}
.pd5{
	margin-top:5px!important;
}
.navigation-example .img-src{
    background-attachment: scroll;
}

.navigation-example{
    background-image: url('../img/bg.jpg');
    background-position: center center;
    background-size: cover;
    margin-top:0;
    min-height: 740px;
}
#notifications{
    background-color: #FFFFFF;
    display: block;
    width: 100%;
    position: relative;
}
.tim-note{
    text-transform: capitalize;
}

#buttons .btn{
    margin: 0 0px 15px;
}
.space-100{
    height: 100px;
    display: block;
    width: 100%;
}

.be-social{
    padding-bottom: 20px;
/*     border-bottom: 1px solid #aaa; */
    margin: 0 auto 40px;
}
.txt-white{
    color: #FFFFFF;
}
.txt-gray{
    color: #ddd !important;
}


.parallax{
  width:100%;
  height:570px;

  display: block;
  background-attachment: fixed;
    background-repeat:no-repeat;
    background-size:cover;
    background-position: center center;

}

.logo-container .logo{
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #333333;
    width: 50px;
    float: left;
}

.logo-container .brand{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 18px;
    float: left;
    margin-left: 10px;
    margin-top: 7px;
    width: 70px;
    height: 40px;
    text-align: left;
}
.logo-container .brand-material{
    font-size: 18px;
    margin-top: 15px;
    height: 25px;
    width: auto;
}
.logo-container .logo img{
    width: 100%;
}
.navbar-small .logo-container .brand{
    color: #333333;
}

.fixed-section{
    top: 90px;
    max-height: 80vh;
    overflow: scroll;
}
.fixed-section ul li{
    list-style: none;
}
.fixed-section li a{
    font-size: 14px;
    padding: 2px;
    display: block;
    color: #666666;
}
.fixed-section li a.active{
    color: #00bbff;
}
.fixed-section.float{
    position: fixed;
    top: 100px;
    width: 200px;
    margin-top: 0;
}


.parallax .parallax-image{
    width: 100%;
    overflow: hidden;
    position: absolute;
}
.parallax .parallax-image img{
    width: 100%;
}

@media (max-width: 768px){
	.arena-top{
		margin-top:250px;
	}
	.przeciwnicy h1{
		font-size:24px;
	}
	.przeciwnicy{
		margin-top:0px!important;
		padding-top:0px;
	}
    .parallax .parallax-image{
         width: 100%;
         height: 640px;
         overflow: hidden;
     }
    .parallax .parallax-image img{
       height: 100%;
       width: auto;
   }
   .kan_bg{
    background-image: url('../kan/bg.jpg');
	min-height:650px;
	background-color:#000000;
    background-repeat: no-repeat;
    background-position: top 25px center;
	background-size: 900px;
    border-radius: 5px;
	padding-top:30px;
	}
	.kanshop{
		padding:0px!important;
		margin:0px!important;
	}
}

.separator{
    content: "Separator";
    color: #FFFFFF;
    display: block;
    width: 100%;
    padding: 20px;
}
.separator-line{
    background-color: #EEE;
    height: 1px;
    width: 100%;
    display: block;
}
.separator.separator-gray{
    background-color: #EEEEEE;
}
.social-buttons-demo .btn{
    margin-right: 5px;
    margin-bottom: 7px;
}

.img-container{
    width: 100%;
    overflow: hidden;
}
.img-container img{
    width: 100%;
}

.lightbox img{
    width: 100%;
}
.lightbox .modal-content{
    overflow: hidden;
}
.lightbox .modal-body{
    padding: 0;
}
@media screen and (min-width: 991px){
    .lightbox .modal-dialog{
        width: 960px;
    }
}
@media (max-width: 991px){
    .fixed-section.affix{
        position: relative;
        margin-bottom: 100px;
    }
}
@media (max-width: 768px){
    .btn, .btn-morphing{
        margin-bottom: 10px;
    }
    .parallax .motto{
        top: 170px;
        margin-top: 0;
        font-size: 60px;
        width: 270px;
    }
}

/*       Loading dots  */

/*      transitions */
.presentation .front, .presentation .front:after, .presentation .front .btn, .logo-container .logo, .logo-container .brand{
     -webkit-transition: all .2s;
    -moz-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}


#images h4{
    margin-bottom: 30px;
}
#javascriptComponents{
    padding-bottom: 0;
}
#javascriptComponents .btn-raised{
    margin: 10px 5px;
}


/*      layer animation          */

.layers-container{
    display: block;
    margin-top: 50px;
    position: relative;
}
.layers-container img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  text-align: center;
}

.section-black {
  background-color: #333;
}

.animate {
  transition: 1.5s ease-in-out;
  -moz-transition: 1.5s ease-in-out;
  -webkit-transition: 1.5s ease-in-out;
}

.navbar-default.navbar-small .logo-container .brand{
    color: #333333;
}
.navbar-transparent.navbar-small .logo-container .brand{
    color: #FFFFFF;
}
.navbar-default.navbar-small .logo-container .brand{
    color: #333333;
}

.sharing-area{
    margin-top: 80px;
}
.sharing-area .btn{
    margin: 15px 4px 0;
    color: #FFFFFF;
}
.sharing-area .btn i{
    font-size: 18px;
    position: relative;
    top: 2px;
    margin-right: 5px;
}
.sharing-area .btn-twitter{
    background-color: #55acee;
    box-shadow: 0 2px 2px 0 rgba(85, 172, 238, 0.14), 0 3px 1px -2px rgba(85, 172, 238, 0.2), 0 1px 5px 0 rgba(85, 172, 238, 0.12);
}
.sharing-area .btn-twitter:hover{
    box-shadow: 0 14px 26px -12px rgba(85, 172, 238, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(85, 172, 238, 0.2);
}

.sharing-area .btn-facebook{
    background-color: #3b5998;
    box-shadow: 0 2px 2px 0 rgba(59, 89, 152, 0.14), 0 3px 1px -2px rgba(59, 89, 152, 0.2), 0 1px 5px 0 rgba(59, 89, 152, 0.12);
}
.sharing-area .btn-facebook:hover{
    box-shadow: 0 14px 26px -12px rgba(59, 89, 152, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(59, 89, 152, 0.2);
}

.sharing-area .btn-google-plus{
    background-color: #dd4b39;
    box-shadow: 0 2px 2px 0 rgba(221, 75, 57, 0.14), 0 3px 1px -2px rgba(221, 75, 57, 0.2), 0 1px 5px 0 rgba(221, 75, 57, 0.12);
}
.sharing-area .btn-google-plus:hover{
    background-color: #dd4b39;
    box-shadow: 0 14px 26px -12px rgba(221, 75, 57, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(221, 75, 57, 0.2);
}

.sharing-area .btn-github{
    background-color: #333333;
    box-shadow: 0 2px 2px 0 rgba(51, 51, 51, 0.14), 0 3px 1px -2px rgba(51, 51, 51, 0.2), 0 1px 5px 0 rgba(51, 51, 51, 0.12);
}
.sharing-area .btn-github:hover{
    background-color: #333333;
    box-shadow: 0 14px 26px -12px rgba(51, 51, 51, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(51, 51, 51, 0.2);
}

.section-thin,
.section-notifications{
    padding: 0;
}
.section-navbars{
    padding-top: 0;
}
#navbar .navbar{
    border-radius: 0;
}
.section-tabs{
    background: #EEEEEE;
}
.section-pagination{
    padding-bottom: 0;
}
.section-download h4{
    margin-bottom: 25px;
}
.section-examples a{
    text-decoration: none;
}
.section-examples h5{
    margin-top: 30px;
}
.components-page .wrapper > .header,
.tutorial-page .wrapper > .header{
    min-height: 380px;
    padding-top: 180px;
    background-size: cover;
    background-position: center center;
}
.components-page .title,
.tutorial-page .title{
    color: #FFFFFF;
}
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 200px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
	color:#fff;
    background-color: #000;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}
.dropdown-menu li > a {
    font-size: 13px;
    padding: 10px 20px;
    margin: 0 5px;
	color:#fff;
    border-radius: 2px;
    -webkit-transition: all 150ms linear;
    -moz-transition: all 150ms linear;
    -o-transition: all 150ms linear;
    -ms-transition: all 150ms linear;
    transition: all 150ms linear;
}.dropdown-menu li {
    position: relative;
    height: 45px!important;
}
.nl{
	display: block;
}
.list-group-item:first-child {
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: #070a0e;
    border: 1px solid #000000;
}
.action-time{
    background-image: url('../design/action.png');
	height:56px;
	line-height:60px;
	padding-left:25px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.arena_bg h1,
.lasnoches_bg h1,
.missions_bg h1,
.kan_bg h1,
.home_bg h1,
.training-header h1,
#start_training h1,
.shop-top-titles h1,
.shinoi-top-titles h1,
.przeciwnicy h1 {
	font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
}

.arena_bg h1{
	color:#c7ca95;
}

.arena_bg{
    background-image: none;
	background-color:rgba(0, 0, 0, .9);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0;
    padding-top: 15px;
    min-height: 700px;
}

.arena_info{
	padding-top:115px;
}

.arena_bg .avatar_border {
    position: relative;
}

.arena_bg .avatar_border:after {
    display: block;
    content: "";
    width: 3px;
    height: 5px;
    background: transparent url('../img/arena/avatar_border.png') no-repeat;
}

.lasnoches_bg h1{
	color:#c7ca95;
}

.lasnoches_bg{
    background-image: url('../lasnoches/bg.jpg');
	min-height:700px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
    border-radius: 5px;
}
.lasnoches_apteka_bg{
    background-image: url('../lasnoches/bg_apteka.jpg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;	
    border-radius: 5px;
}
.darkcontainer_bg{
	position:relative;
	background-color:rgba(0,0,0,0.5);
	padding-top:0px;
	padding-bottom:25px;
	padding-left:20px;
	padding-right:20px;
    border-radius: 5px;

}
.darkcontainer_bg:before{
	position:absolute;
	left:-4px;
	bottom:-6px;
	clear:both;
  display: inline;
  width:34px;
  height:51px;
  float:left;
  background:url('../img/belka_left.png') bottom no-repeat;
  z-index:555;
  content: "";
}
.darkcontainer_bg:after{
	position:absolute;
	right:-3px;
	clear:both;
	bottom:-6px;
  display: inline;
  width:34px;
  float:left;
  height:51px;
  background:url('../img/belka_right.png') bottom no-repeat;
  z-index:555;
  content: "";
}
.red_button {
	border:0px;
    cursor: pointer!important;
	position:relative;
	float:left;
    width: 193px;
    height: 51px;
    line-height: 51px;
    text-align: center;
    color: #ffffff;
    background: transparent url(../design/red_button.png) no-repeat;
    z-index: 6;
}
.gray_button {
	border:0px;
    cursor: pointer!important;
	position:relative;
	float:left;
    width: 193px;
    height: 51px;
    line-height: 51px;
    text-align: center;
    color: #ffffff;
    background: transparent url(../design/gray_button.png) no-repeat;
    z-index: 6;
}

.bg_nag{
 background-color:rgba(0,0,0,0.8);
  border-radius: 5px;
}

.missions_bg h1{
	color:#c7ca95;
	font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
}

/* Modal wyboru liczby dusz w misji specjalnej */
.mission-souls-modal {
    z-index: 1060;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
}
.mission-souls-modal .modal-dialog {
    width: auto;
    max-width: 480px;
    margin: 10vh auto 30px;
    padding: 0 14px;
}
.mission-souls-card {
    position: relative;
    overflow: hidden;
    color: #c8d8e8;
    background:
        radial-gradient(circle at 86% 10%, rgba(25, 110, 145, .17), transparent 38%),
        linear-gradient(145deg, rgba(7, 14, 20, .99), rgba(3, 8, 13, .99));
    border: 1px solid #725d12;
    border-radius: 2px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .8), inset 0 0 38px rgba(25, 94, 122, .08);
}
.mission-souls-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4b62c, transparent);
}
.mission-souls-card .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 82px;
    padding: 18px 20px;
    border-bottom: 1px solid #263847;
}
.mission-souls-heading {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 14px;
}
.mission-souls-sigil {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #f1cf36;
    font-size: 18px;
    border: 1px solid #8b7217;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(47, 132, 157, .25), rgba(6, 13, 18, .9) 68%);
    box-shadow: 0 0 18px rgba(30, 143, 181, .18), inset 0 0 0 4px rgba(184, 150, 21, .07);
}
.mission-souls-eyebrow {
    display: block;
    margin-bottom: 4px;
    color: #4cc7f4;
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.mission-souls-title {
    margin: 0;
    color: #f0d55b;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.35;
}
.mission-souls-close {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    margin: 0 0 0 12px !important;
    padding: 0 !important;
    color: #8fa6b8;
    font-size: 22px;
    line-height: 31px;
    text-align: center;
    text-shadow: none;
    opacity: 1;
    border: 1px solid #344958 !important;
    border-radius: 0;
    background: rgba(8, 17, 24, .85) !important;
    transition: color .2s, border-color .2s, background .2s;
}
.mission-souls-close:hover,
.mission-souls-close:focus {
    color: #f3d85b;
    border-color: #9b7e17 !important;
    background: rgba(31, 26, 6, .75) !important;
    outline: none;
}
.mission-souls-card .modal-body {
    padding: 22px 20px 18px;
}
.mission-souls-label {
    display: block;
    margin-bottom: 9px;
    color: #9eb4c7;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.mission-souls-input-wrap {
    position: relative;
}
.mission-souls-input-wrap > i {
    position: absolute;
    top: 50%;
    left: 15px;
    z-index: 2;
    width: 22px;
    color: #d2b62d;
    line-height: 1;
    text-align: center;
    transform: translateY(-50%);
    pointer-events: none;
}
.mission-souls-input {
    width: 100%;
    height: 50px;
    padding: 8px 15px 8px 54px !important;
    color: #ecf6ff;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-size: 17px;
    border: 1px solid #344b5b;
    border-radius: 0;
    background: rgba(2, 8, 13, .92);
    box-shadow: inset 0 0 14px rgba(0, 0, 0, .45);
    transition: border-color .2s, box-shadow .2s;
}
.mission-souls-input:focus {
    border-color: #c5a51d;
    outline: none;
    box-shadow: 0 0 0 2px rgba(197, 165, 29, .1), inset 0 0 14px rgba(0, 0, 0, .45);
}
.mission-souls-available {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding-top: 12px;
    color: #748da1;
    font-size: 12px;
    border-top: 1px dashed #263946;
}
.mission-souls-available strong {
    color: #51cafa;
    font-weight: 500;
}
.mission-souls-card .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 20px 18px;
    border-top: 1px solid #263847;
}
.mission-souls-card .modal-footer:before,
.mission-souls-card .modal-footer:after {
    display: none;
}
.mission-souls-button {
    min-width: 112px;
    margin: 0 !important;
    padding: 11px 16px;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .6px;
    text-transform: uppercase;
    border-radius: 0;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.mission-souls-button--ghost {
    color: #9fb3c3;
    border: 1px solid #344b5b;
    background: rgba(7, 15, 21, .85);
}
.mission-souls-button--ghost:hover,
.mission-souls-button--ghost:focus {
    color: #dceaf5;
    border-color: #5a7487;
    background: #101d26;
}
.mission-souls-button--primary {
    color: #f5dc62;
    border: 1px solid #8c7114;
    background: linear-gradient(180deg, rgba(64, 51, 7, .88), rgba(20, 17, 4, .95));
}
.mission-souls-button--primary:hover,
.mission-souls-button--primary:focus {
    color: #fff1a0;
    border-color: #d0ac21;
    background: linear-gradient(180deg, rgba(91, 72, 8, .95), rgba(30, 24, 4, .98));
    box-shadow: 0 0 16px rgba(203, 169, 28, .15);
}
@media (max-width: 520px) {
    .mission-souls-modal .modal-dialog { margin-top: 5vh; }
    .mission-souls-card .modal-header { padding: 16px; }
    .mission-souls-card .modal-body { padding: 19px 16px 16px; }
    .mission-souls-card .modal-footer { padding: 13px 16px 16px; }
    .mission-souls-sigil { flex-basis: 40px; width: 40px; height: 40px; }
    .mission-souls-title { font-size: 16px; }
    .mission-souls-button { flex: 1 1 50%; min-width: 0; }
}
/* Misje = ta sama szerokość co second-panel (tło na dziecku .container, nie na samym containerze) */
.missions-page > .container {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}
.missions_bg{
    background-image: url('../missions/bg.jpg');
	background-color:#000000;
	min-height:700px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    border-radius: 5px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    padding: 8px 12px 20px;
    margin-left: auto;
    margin-right: auto;
}
/* Belki bloczków misji na zewnętrznych kantach (desktop) */
.missions_bg .decor {
    overflow: visible;
}
.missions_bg .decor:before {
    left: -4px;
}
.missions_bg .decor:after {
    right: -3px;
}

.missions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 18px;
}

.missions-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Tablet: 2 w rzędzie */
@media (min-width: 768px) {
    .missions-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        width: 50%;
    }
}
/* Desktop: 4 w rzędzie — lepiej wypełnia szerokość, mniej „pustych” boków przy grafikach */
@media (min-width: 992px) {
    .missions-grid > [class*="col-"] {
        flex: 0 0 25%;
        max-width: 25%;
        width: 25%;
    }
}
/* ===== MISJE – karty (gaming) ===== */
.missions-grid .mission-card {
    --mc-accent: #009ef7;
    --mc-accent-soft: rgba(0,158,247,.45);
    --mc-badge-text: #06121a;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    background: linear-gradient(180deg, rgba(20,22,26,.96), rgba(8,9,11,.98));
    border: 1px solid var(--mc-accent-soft);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    animation: missionCardIn .45s ease both;
}

.missions-grid .mission-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--mc-accent), transparent);
    opacity: .85;
    z-index: 3;
}

.missions-grid .mission-card:hover {
    border-color: var(--mc-accent);
    box-shadow: 0 10px 24px rgba(0,0,0,.55), 0 0 18px var(--mc-accent-soft);
}

.missions-grid .mission-card--dzienna {
    --mc-accent: #009ef7;
    --mc-accent-soft: rgba(0,158,247,.55);
    --mc-badge-text: #06121a;
    border-color: rgba(0,158,247,.55);
}
.missions-grid .mission-card--tygodniowa {
    --mc-accent: #a06bff;
    --mc-accent-soft: rgba(160,107,255,.55);
    --mc-badge-text: #120a1a;
    border-color: rgba(160,107,255,.55);
}
.missions-grid .mission-card--specjalna {
    --mc-accent: #c7ca95;
    --mc-accent-soft: rgba(199,202,149,.55);
    --mc-badge-text: #1a1a12;
    border-color: rgba(199,202,149,.55);
}
.missions-grid .mission-card--unknown {
    --mc-accent: #7a7a7a;
    --mc-accent-soft: rgba(122,122,122,.45);
    --mc-badge-text: #111;
    border-color: rgba(122,122,122,.45);
}

.mission-card.is-locked { opacity: .82; }
.mission-card.is-locked .mc-img { filter: grayscale(.7) brightness(.7); }

/* Media / grafika misji — cover + jaśniejszy obraz */
.mc-media {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #0a0b0d;
    margin-bottom: 0;
    isolation: isolate;
    transform: translateZ(0);
}

.mc-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    filter: brightness(1.18) contrast(1.06) saturate(1.1);
    transition: transform .55s ease;
    will-change: transform;
}

.mission-card:hover .mc-img {
    transform: scale(1.04);
}

/* Lekki cień tylko u dołu — bez ciemnego „przyciemnienia” całej fotki */
.mc-media::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 28%;
    background: linear-gradient(180deg, transparent 0%, rgba(8,9,11,.55) 70%, #08090b 100%);
    pointer-events: none;
    z-index: 1;
}

.mc-shine {
    position: absolute;
    top: 0; left: -60%;
    width: 45%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.14), transparent);
    transform: skewX(-20deg);
    z-index: 2;
    pointer-events: none;
}

.mission-card:hover .mc-shine {
    animation: mcSweep .7s ease;
}

.mc-type {
    position: absolute;
    top: 8px; left: 8px;
    z-index: 3;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 8px;
    border-radius: 20px;
    color: var(--mc-badge-text);
    background: var(--mc-accent);
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.mc-type .fa { margin-right: 2px; }

/* Jawne kolory badge (na wypadek braku dziedziczenia zmiennych) */
.missions-grid .mission-card--dzienna .mc-type,
.mc-type--dzienna {
    background: #009ef7;
    color: #06121a;
}
.missions-grid .mission-card--tygodniowa .mc-type,
.mc-type--tygodniowa {
    background: #a06bff;
    color: #120a1a;
}
.missions-grid .mission-card--specjalna .mc-type,
.mc-type--specjalna {
    background: #c7ca95;
    color: #1a1a12;
}
.missions-grid .mission-card--unknown .mc-type,
.mc-type--unknown {
    background: #7a7a7a;
    color: #111;
}

.mc-level {
    position: absolute;
    top: 8px; right: 8px;
    z-index: 3;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 3px 8px;
    border-radius: 20px;
    background: rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.18);
}
.mc-level.is-ok  { color: #7CFC00; border-color: rgba(124,252,0,.4); }
.mc-level.is-bad { color: #ff6b6b; border-color: rgba(255,107,107,.5); }

.mc-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    line-height: 1.25;
    min-height: calc(1.25em * 2);
    color: #fff;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    flex-shrink: 0;
}

/* Body — pełne tło, bez prześwitu fotografii między tytułem a pastylkami */
.mc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 10px 12px 12px;
    gap: 8px;
    background: linear-gradient(180deg, #08090b 0%, rgba(12,13,16,.98) 100%);
    position: relative;
    z-index: 2;
    margin-top: -1px; /* zasklepia szew z media */
}

.mc-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mc-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    color: #cfd2d6;
}
.mc-chip .fa { color: var(--mc-accent); }
.mc-chip--souls { color: #ffcf6b; }
.mc-chip--souls .fa { color: #ff9d3b; }
.mc-chip--buried { color: #9dcea8; }
.mc-chip--buried .fa { color: #6dbf7f; }

.mc-progress {
    height: 6px;
    border-radius: 4px;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}
.mc-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mc-accent), var(--mc-accent-soft));
    box-shadow: 0 0 8px var(--mc-accent-soft);
    transition: width .8s ease;
}

.missions-grid .mission-start-wrap,
.missions-grid .mission-unavailable {
    margin-top: auto;
}

.mc-start {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 193px;
    height: 51px;
    line-height: 51px;
    margin: 0 auto !important;
    text-align: center;
    background-size: 100% 100% !important;
}
.mc-start .fa { margin-right: 4px; }

.mission-unavailable {
    text-align: center;
    color: #9a9a9a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 8px;
    opacity: .9;
}
.mission-unavailable .fa { margin-right: 4px; opacity: .8; }

/* (stary tooltip misji usunięty — nagrody są na karcie) */

.mission-queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.mission-queue-slots {
    color: #009ef7;
    font-weight: 700;
}

.mission-queue-hint {
    margin-top: 14px;
    margin-bottom: 0.35em;
    opacity: .8;
}

.mission-queue-empty {
    padding: 18px 12px;
    text-align: center;
    color: #888;
    border: 1px dashed rgba(255,255,255,.15);
    background: rgba(0,0,0,.25);
}

.mission-queue-item {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
    margin-bottom: 10px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(199,202,149,.25);
    position: relative;
    overflow: hidden;
    clear: both;
    text-align: left !important;
}

.mission-queue-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(0,158,247,.08), transparent);
    transform: translateX(-100%);
    animation: missionShine 3.2s ease-in-out infinite;
    pointer-events: none;
}

.mission-queue-thumb {
    position: relative;
    width: 64px;
    min-width: 64px;
    height: 64px;
    overflow: hidden;
    border: 1px solid rgba(199,202,149,.35);
    background: #111;
}

.mission-queue-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-queue-pulse {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0,158,247,.35);
    animation: missionPulse 1.8s ease-in-out infinite;
    pointer-events: none;
}

.mission-queue-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mission-queue-title {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mission-queue-progress {
    height: 8px !important;
    margin-bottom: 6px !important;
    background: rgba(255,255,255,.08);
    overflow: hidden;
}

.mission-queue-progress .progress-bar {
    transition: width .9s linear;
    box-shadow: 0 0 8px rgba(0,158,247,.45);
}

.mission-queue-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.mission-queue-meta .timer {
    font-weight: 700;
    color: #c7ca95;
    letter-spacing: .04em;
}

.mission-queue-meta a {
    color: #ff6b6b;
    text-transform: uppercase;
    font-size: 11px;
}

.mission-queue-enter {
    animation: missionQueueIn .4s ease both;
}

.mission-queue-leave {
    animation: missionQueueOut .4s ease forwards;
}

.mission-queue-done {
    border-color: rgba(76, 175, 80, .55);
}

.mission-queue-done .mission-queue-title::after {
    content: " — zakończona";
    color: #4caf50;
    font-weight: 600;
}

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

@keyframes missionQueueIn {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes missionQueueOut {
    to { opacity: 0; transform: translateX(-20px) scale(.96); height: 0; margin: 0; padding: 0; border: 0; }
}

@keyframes missionPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,158,247,.2); }
    50% { box-shadow: inset 0 0 0 1px rgba(0,158,247,.7), 0 0 10px rgba(0,158,247,.25); }
}

@keyframes missionShine {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}

/* ===== MISJE (mobile responsiveness) ===== */
@media (max-width: 767px) {
    .missions_bg {
        background-size: cover;
        min-height: 0;
        padding-left: 10px;
        padding-right: 10px;
        overflow: hidden; /* belki nie „lewitują” w tle poza panelem */
    }

    /* Na mobile belki siedzą na kantach bloku, nie wystają w tło */
    .missions_bg .decor {
        overflow: hidden;
        margin-left: 0;
        margin-right: 0;
    }
    .missions_bg .decor:before {
        left: 0 !important;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }
    .missions_bg .decor:after {
        right: 0 !important;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }

    /* 2 karty w rzędzie; nieparzysta ostatnia = full width */
    .missions-grid {
        margin-left: -4px;
        margin-right: -4px;
        margin-top: 22px;
        justify-content: flex-start;
    }
    .missions-grid > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 4px;
        padding-right: 4px;
        margin-bottom: 12px;
        float: none !important;
    }
    .missions-grid > .mission-col--span-full {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .missions-grid > .mission-col--span-full .mc-start.red_button {
        max-width: 193px !important;
        height: 51px !important;
        line-height: 51px !important;
        font-size: 14px !important;
    }

    .missions_bg .col-sm-offset-1 {
        margin-left: 0 !important;
    }
    .missions_bg .row:not(.missions-grid) > [class*="col-"] {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .mission-queue-hint {
        margin-bottom: 0.5em;
    }

    /* Przycisk Start: dopasowany do wąskiej karty */
    .missions-grid .mc-start.red_button,
    .missions-grid .red_button,
    .missions-grid .gray_button {
        float: none !important;
        display: block !important;
        width: 100% !important;
        max-width: 160px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 12px !important;
        margin: 0 auto !important;
        background-size: 100% 100%;
    }
    .missions-grid .mission-start-wrap {
        text-align: center;
        width: 100%;
    }
    .missions-grid .btn-group-center {
        text-align: center;
    }

    .mc-media { aspect-ratio: 16 / 11; }
    .mc-body { padding: 8px 8px 10px; gap: 6px; }
    .mc-title { font-size: 11px; }
    .mc-chip { font-size: 10px; padding: 2px 6px; }
    .mc-type, .mc-level { font-size: 9px; padding: 2px 6px; }
    .mission-unavailable { font-size: 10px; padding: 6px 4px; }

    .missions_bg .info_container {
        flex-wrap: wrap;
        overflow: hidden;
        width: 100%;
    }
    .missions_bg .info_container .char_info {
        flex: 1 1 45%;
        max-width: 50%;
        padding: 6px 4px;
        min-width: 0;
        box-sizing: border-box;
    }
    .missions_bg .info_container .char_info p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .missions_bg .info_container .char_info p:first-child {
        font-size: 9px;
        line-height: 1.25;
    }
    .missions_bg .info_container .char_info p:last-child {
        font-size: 13px;
        line-height: 1.2;
    }

    .mission-queue-item {
        gap: 10px;
        padding: 8px;
    }
    .mission-queue-thumb {
        width: 52px;
        min-width: 52px;
        height: 52px;
    }
    .mission-queue-progress {
        width: 100%;
    }
    .mission-queue-meta {
        flex-wrap: wrap;
        gap: 4px 10px;
    }
}

@media (max-width: 479px) {
    .mission-queue-thumb {
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
    .mission-queue-title {
        font-size: 12px;
    }
    .mc-title {
        font-size: 11px;
    }
    .mc-media { aspect-ratio: 16 / 10; }
}
.drop{
	border-top:1px solid #1c1c1c;
	border-bottom:1px solid #1c1c1c;
	margin-top:10px;
	margin-bottom:10px;
	padding-top:10px;
	padding-bottom:5px;
}
.karta-header-new{
	background-image: url('../img/newprofilenag.jpg') !important;
	padding: 0 !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 150px;
	position: relative;
	display: flex;
	justify-content: center;
	text-align:center;
}
.karta-header-female{
	background-image: url('../img/ona.jpg') !important;
	padding: 0 !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 150px;
	position: relative;
	display: flex;
	justify-content: center;
	text-align:center;
}
.karta-header-male{
	background-image: url('../img/on.jpg') !important;
	padding: 0 !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 150px;
	position: relative;
	display: flex;
	justify-content: center;
	text-align:center;
}
.karta:hover{
	
	background:rgba(0,0,0,0.9);
}
.karta{
	overflow: hidden;
	border:0 !important;
	width: 100%;
	background:rgba(0,0,0,0.5);
	margin-bottom:15px;
}
.karta-new:hover{
	
	background:rgba(0,0,0,1);
}
.karta-new{
	overflow: hidden;
	border:0 !important;
	width: 100%;
	background:rgba(0,0,0,0.8);
	margin-bottom:15px;
}
.profile_pic-new{
	position: absolute;
	bottom: -50px;
	height: 112px;
	width: 112px;
	padding: 5px;
	border: 2px solid #fff;
	border-radius: 50%;
}
.profile_pic{
	position: absolute;
	bottom: -50px;
	height: 112px;
	width: 112px;
	padding: 5px;
	border: 2px solid #f39c12;
	border-radius: 50%;
}
.karta-body{
	padding-top: 65px !important;
}
.przeciwnicy{
	margin-top:250px;
}
.profile_pic img{
	height: 100px;
	width: 100px;
	border-radius: 50%;
}
.profile_pic-new img{
	height: 100px;
	width: 100px;
	border-radius: 50%;
}
.name_container{
	display: flex;
	justify-content: center;

}
.name{
	padding-top:5px;
	font-size: 20px;
	font-weight: 700;
	color: #fff;
	position: relative;
}
.kin{
	display: flex;
	justify-content: center;
	font-size: 12px;
	color: #f54a05;
	padding-top:5px;
}
.kin2{
	padding-left:5px;
	display: flex;
	justify-content: center;
	font-size: 12px;
	color: #f54a05;
	padding-top:5px;
}
.login_container{
	padding-top: 15px;
	display: flex;
	justify-content: center;
}

.info_container{
	padding-top: 0px;
	display: flex;
	justify-content: space-around;
	flex-direction: row;
}
.missions_bg .missions-stats-panel,
.missions_bg .info_container {
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
}
.missions_bg .info_container .char_info {
	min-width: 0;
}
.char_info{
	display: flex;
	flex-direction: column;
	padding:10px;
}
.char_info p{
	padding-bottom:5px;
}
.char_info p:first-child{
	margin-bottom: 0;
	font-size: 12px;
	color: gray;
	text-transform: uppercase;
	text-align: center;
}
.char_info p:last-child{
	margin-bottom: 0;
	font-size: 20px;
	font-weight: 700;
	color: gray;
	text-transform: uppercase;
	text-align: center;
}
.kan{
	color:#009ef7!important;
}

.kan_bg h1{
	color:#c7ca95;
}

.kan_bg{
    background-image: url('../kan/bg.jpg');
	min-height:650px;
	background-color:#000000;
    background-repeat: no-repeat;
    background-position: top 25px center;
    border-radius: 5px;
	padding-top:30px;
}
.kanshop{
	padding-top:480px;
}
.kanshop .decor{
	padding-bottom:15px;
	margin-bottom:15px;
	font-size:16px;
}
.kanbox{
	padding:10px;
	margin:10px;
}
.zdolnosc-ile {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 52px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #00ff00;
    background: transparent url('../training/quantity_bg.png') no-repeat;
    background-size: 100% 100%;
    z-index: 2;
}
h2.card-title{
	color:#c7ca95;
	margin-top:0px;
}
h3.card-title{
	color:#c7ca95;
	margin-top:17px;
	margin-bottom:17px;
}
.selectedcard{
	background-color:rgba(40,0,0,0.45) !important;
	border-color: rgba(169,120,29,.85) !important;
	box-shadow: inset 0 0 0 1px #a9781d, 0 0 18px rgba(169,120,29,.35) !important;
	transform: translateY(-2px);
}
#start_training h1{
	padding-top:16px;
	font-size:15px;
	line-height:1.2;
	margin: 0 0 4px;
}
#start_training h2{
	font-size:12px;
	line-height:1.3;
	margin: 0;
	padding-bottom: 10px;
}
#start_training{
	min-height:64px;
	margin-bottom:0;
    text-align: center!important;
    background: transparent url('../training/start.png') no-repeat center center;
    background-size: cover;
    border-radius: 8px 8px 0 0;
    z-index: 2;
}
.training_bg,
.eq_bg
{	
    background-image: url('../training/bg.jpg');
	min-height:0;
	background-color:#000000;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
	padding: 14px 14px 18px;
    border: 1px solid rgba(199,202,149,.2);
}

/* Sala treningowa = ta sama szerokość co second-panel (Bootstrap .container) */
.training-page > .container {
    margin-left: auto;
    margin-right: auto;
}
.training_bg.decor.decor-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 0;
    border: 0;
    box-shadow: none;
    text-align: left;
    background-color: rgba(0, 0, 0, .9);
    background-image:
        url('../training/bg.jpg'),
        url('../img/belka_bg.png');
    background-position: top center, center bottom -5px;
    background-repeat: no-repeat, repeat-x;
    background-size: cover, auto;
    padding: 14px 16px 22px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    position: relative;
}
/* Belki jak na misjach / second-panel — zewnętrzne kanty */
.training_bg.decor.decor-new:before {
    display: block;
    left: -4px;
    bottom: -6px;
}
.training_bg.decor.decor-new:after {
    display: block;
    right: -3px;
    bottom: -6px;
}
@media (max-width: 767px) {
    .training-page > .container {
        overflow: hidden;
    }
    .training_bg.decor.decor-new {
        overflow: hidden;
    }
    .training_bg.decor.decor-new:before {
        left: 0;
        width: 28px;
        height: 42px;
        background-size: contain;
        bottom: -4px;
    }
    .training_bg.decor.decor-new:after {
        right: 0;
        width: 28px;
        height: 42px;
        background-size: contain;
        bottom: -4px;
    }
}
#trainActiveWrap.is-empty {
    display: none;
}
#trainActiveWrap:not(.is-empty) {
    margin-bottom: 12px;
}

.train-creator {
    position: relative;
    margin-top: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.train-wizard,
.train-wizard-step {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.train-creator-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: #c7ca95;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.train-creator-step-label {
    color: rgba(199, 202, 149, .65);
    font-weight: 600;
}
.train-wizard-step[hidden],
.train-wizard-step:not(.is-active) {
    display: none !important;
}
.train-wizard-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 6px 12px;
    border: 1px solid rgba(199, 202, 149, .35);
    border-radius: 6px;
    background: rgba(0, 0, 0, .45);
    color: #c7ca95;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.train-wizard-back:hover {
    border-color: rgba(0, 180, 255, .55);
    background: rgba(0, 180, 255, .1);
    color: #fff;
}
.train-setup {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.train-setup-selected {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    background: linear-gradient(120deg, rgba(12, 14, 18, .88), rgba(30, 18, 8, .7));
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 8px;
}
.train-setup-art {
    position: relative;
    width: 88px;
    min-width: 88px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 40%, rgba(0, 180, 255, .15), rgba(0, 0, 0, .55));
    border: 1px solid rgba(0, 180, 255, .35);
    overflow: hidden;
}
.train-setup-art img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}
.train-setup-ico {
    position: absolute;
    left: 6px;
    bottom: 6px;
    display: inline-flex;
    padding: 4px;
    border-radius: 5px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(199, 202, 149, .35);
    line-height: 0;
}
.train-setup-ico .akcjaikona-inline {
    margin-right: 0;
    display: block;
}
.train-setup-meta {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-align: center;
}
.train-setup-kicker {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #9aa0a6;
}
.train-setup-name {
    margin: 0;
    font-size: 22px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.train-setup-gain {
    display: inline-flex;
    align-self: center;
    justify-content: center;
    margin-top: 4px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 800;
    color: #6bff9a;
    background: rgba(107, 255, 154, .12);
    border: 1px solid rgba(107, 255, 154, .35);
    letter-spacing: .04em;
}

.train-bonuses-compact {
    width: 100%;
    margin-top: 12px;
    padding: 10px 10px 8px;
    background: rgba(6, 7, 10, .72);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 8px;
}
.train-bonuses-compact-label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #c7ca95;
}
.train-bonuses-compact-label .fa {
    margin-right: 5px;
    color: #ffcf6b;
}
.train-bonuses-strip {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
}
.train-bonus-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    padding: 7px 4px;
    margin: 0;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 6px;
    text-align: center;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.train-bonus-chip.is-selected {
    border-color: rgba(0, 180, 255, .55);
    background: rgba(0, 180, 255, .1);
    box-shadow: 0 0 12px rgba(0, 180, 255, .18);
}
.train-bonus-chip .train-bonus-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: wrap;
    font-size: 10px;
    line-height: 1.2;
    color: #d7dade;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.train-bonus-chip .train-bonus-name .akcjaikona-inline {
    margin-right: 0;
}
.train-bonus-chip .train-bonus-val {
    font-size: 12px;
    font-weight: 800;
    color: #fff288;
    line-height: 1;
}
.train-setup-duration {
    padding: 12px;
    background: rgba(6, 7, 10, .72);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 8px;
}

/* Setup: tylko kreator (bez belki efektywności / kolejki / nagłówka) */
.training_bg.is-wizard-setup .training-header,
.training_bg.is-wizard-setup .training-info--bar,
.training_bg.is-wizard-setup #trainActiveWrap {
    display: none !important;
}
.training_bg.is-wizard-setup .train-creator-step-label {
    display: none;
}

/* ===== TRAINING – gęsty, gamingowy layout ===== */
.training-header {
    text-align: center;
    margin-bottom: 10px;
}
.training-header h1 {
    margin: 0 0 2px;
    color: #c7ca95;
    text-shadow: 0 2px 10px rgba(0,0,0,.8);
    animation: trainFadeIn .45s ease both;
}
.training-header-sub {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(199,202,149,.7);
}

.training-info--bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}
.training-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 6px;
    background: rgba(0,0,0,.5);
    border: 1px solid rgba(199,202,149,.22);
    border-radius: 8px;
    text-align: center;
    animation: trainFadeIn .5s ease both;
}
.training-stat:nth-child(2) { animation-delay: .05s; }
.training-stat:nth-child(3) { animation-delay: .1s; }
.training-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa0a6;
}
.training-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #cfd2d6;
    line-height: 1;
}

.training-stat--trainer {
    position: relative;
    display: flex;
    text-decoration: none !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    overflow: hidden;
}
.training-stat--trainer:hover {
    transform: translateY(-2px);
    border-color: rgba(0,180,255,.5);
    box-shadow: 0 0 16px rgba(0,180,255,.2);
}
.training-stat--trainer::after {
    content: "\f08e";
    font-family: FontAwesome;
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 10px;
    color: rgba(199,202,149,.5);
    line-height: 1;
    pointer-events: none;
}
.training-trainer-ico {
    display: block;
    height: 46px;
    margin-bottom: 4px;
}
.training-trainer-ico img {
    height: 46px;
    width: auto;
    object-fit: contain;
    transition: filter .25s ease, transform .25s ease;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.training-stat--trainer:hover .training-trainer-ico img {
    transform: scale(1.08);
}

.training-layout { display: none; }
.training-main { display: contents; }
.training-skills {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}
.training-skills--wide {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}
.training-bottom {
    display: none;
}
.akcjaikona-inline {
    vertical-align: middle;
    margin-right: 5px;
}

.train-captcha-form {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.train-active {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 14px;
    min-height: 120px;
    margin-bottom: 0;
    padding: 12px;
    background: linear-gradient(120deg, rgba(12,14,18,.88), rgba(30,18,8,.75));
    border: 1px solid rgba(199,202,149,.3);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.4);
    animation: trainFadeIn .55s ease both;
}
.train-active.is-running {
    border-color: rgba(0,180,255,.45);
    box-shadow: 0 0 22px rgba(0,180,255,.18), 0 6px 18px rgba(0,0,0,.4);
}
.train-queue {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}
.train-queue-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #c7ca95;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.train-queue-count {
    color: #00b4ff;
    font-weight: 800;
}
.train-queue-item {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.06);
}
.train-queue-item.is-running {
    border-color: rgba(0,180,255,.4);
    box-shadow: 0 0 14px rgba(0,180,255,.12);
}
.train-queue-item.is-queued {
    border-color: rgba(255,207,107,.35);
}
.train-queue-item.is-queued .train-active-bar {
    background: linear-gradient(90deg, #8a7340, #c7a14a) !important;
    box-shadow: none;
}
.train-active-badge--queue {
    background: #c7a14a !important;
    color: #1a1408 !important;
}
.train-active-pulse.is-idle-pulse {
    animation: none;
    opacity: .35;
}
.train-active-ends-sep {
    margin: 0 4px;
    opacity: .5;
}
.train-cancel-pending {
    opacity: .7;
}
.train-queue-item .train-active-meta {
    min-height: 32px;
}
.train-active::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
    transform: translateX(-100%);
    animation: trainShine 4s ease-in-out infinite;
    pointer-events: none;
}
.train-active-art {
    position: relative;
    width: 110px;
    min-width: 110px;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 40%, rgba(0,180,255,.15), rgba(0,0,0,.55));
    border: 1px solid rgba(0,180,255,.35);
    overflow: hidden;
}
.train-active-art img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    animation: trainFloat 2.8s ease-in-out infinite;
}
.train-active-pulse {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(0,180,255,.35);
    animation: trainPulse 1.8s ease-in-out infinite;
    pointer-events: none;
}
.train-active-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}
.train-active-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.train-active-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 3px 9px;
    border-radius: 20px;
    color: #06121a;
    background: #00b4ff;
}
.train-active-ends {
    font-size: 11px;
    color: #9aa0a6;
}
.train-active-name {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.train-active-ico { display: inline-flex; align-items: center; line-height: 0; }
.train-active-ico .akcjaikona-inline { margin-right: 0; display: block; }
.train-active-gain {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #6bff9a;
    background: rgba(107,255,154,.12);
    border: 1px solid rgba(107,255,154,.35);
    border-radius: 20px;
    padding: 2px 10px;
    text-transform: none;
}
.train-active-gain .fa { font-size: 11px; }
.train-active-progress {
    height: 8px !important;
    margin: 2px 0 0 !important;
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    overflow: hidden;
}
.train-active-bar {
    background: linear-gradient(90deg, #0072b5, #00b4ff) !important;
    box-shadow: 0 0 10px rgba(0,180,255,.45);
    transition: width .9s linear;
}
.train-active-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.train-active-timer {
    font-size: 18px;
    font-weight: 800;
    color: #c7ca95;
    letter-spacing: .04em;
}
.train-active-remain {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa0a6;
}
.train-active-cancel {
    color: #ff6b6b;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 4px 12px;
    border: 1px solid rgba(255,107,107,.4);
    border-radius: 6px;
    transition: background .2s ease, color .2s ease;
}
.train-active-cancel:hover {
    background: rgba(255,107,107,.15);
    color: #ff9a9a;
}
.train-active-idle {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 4px 6px;
}
.train-active-idle-icon {
    width: 64px;
    height: 64px;
    min-width: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(199,202,149,.1);
    border: 1px solid rgba(199,202,149,.3);
    color: #c7ca95;
    font-size: 26px;
    animation: trainPulse 2.4s ease-in-out infinite;
}
.train-active-idle strong {
    display: block;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.train-active-idle p {
    margin: 0;
    font-size: 12px;
    color: #9aa0a6;
    line-height: 1.4;
}

.train-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    background: linear-gradient(180deg, rgba(18,20,24,.92), rgba(8,9,11,.96));
    border: 1px solid rgba(199,202,149,.22);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: trainCardIn .45s ease both;
}
.train-card:nth-child(1) { animation-delay: .02s; }
.train-card:nth-child(2) { animation-delay: .06s; }
.train-card:nth-child(3) { animation-delay: .1s; }
.train-card:nth-child(4) { animation-delay: .14s; }
.train-card:nth-child(5) { animation-delay: .18s; }
.train-card:nth-child(6) { animation-delay: .22s; }
.train-card {
    cursor: pointer;
}
.train-card:hover {
    transform: translateY(-4px);
    border-color: rgba(199,202,149,.5);
    box-shadow: 0 12px 24px rgba(0,0,0,.5);
}
.train-card.is-active-skill {
    border-color: rgba(0,180,255,.55);
    box-shadow: 0 0 16px rgba(0,180,255,.25);
}
.train-card-media {
    position: relative;
    height: 128px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(199,202,149,.12), transparent 70%);
    cursor: help;
    padding: 10px;
    overflow: hidden;
}
.train-card-media img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform .35s ease;
}
.train-card:hover .train-card-media img {
    transform: scale(1.08);
}
.train-card-shine {
    position: absolute;
    top: 0; left: -55%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.train-card-ico {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    line-height: 0;
    border-radius: 6px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(199,202,149,.35);
}
.train-card-ico .akcjaikona-inline {
    margin-right: 0;
    display: block;
}
.train-card-fallback {
    display: none;
    font-size: 54px;
    line-height: 1;
    color: var(--tc-accent, #c7ca95);
    text-shadow: 0 0 18px rgba(199,202,149,.45);
    animation: trainFloat 2.8s ease-in-out infinite;
}
.train-card-media--noimg .train-card-fallback { display: block; }
.train-card--element.is-active-skill { border-color: var(--tc-accent, rgba(0,180,255,.55)); }
.train-card--element:hover { border-color: var(--tc-accent, rgba(199,202,149,.5)); }
.tr-tt-art { position: relative; }
.tr-tt-fallback {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
    color: #c7ca95;
    z-index: 1;
    text-shadow: 0 0 20px rgba(199,202,149,.4);
}
.tr-tt-art img { position: relative; z-index: 2; }
.train-card:hover .train-card-shine {
    animation: trainSweep .7s ease;
}
.train-card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 12px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}
.train-card-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .03em;
    text-align: center;
}
.train-pick,
.train-card .gray_button {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    background-size: 100% 100% !important;
    height: 42px;
    line-height: 42px;
    font-size: 12px;
    box-sizing: border-box;
    position: relative;
    z-index: 3;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(199, 202, 149, 0.25);
}
.train-pick.is-hidden,
.train-pick[hidden] {
    display: none !important;
    pointer-events: none !important;
}
.train-card.is-pick-locked {
    cursor: default;
    pointer-events: none;
}
.train-card.is-pick-locked:hover {
    transform: none;
    box-shadow: none;
}

.train-panel {
    background: rgba(6,7,10,.78);
    border: 1px solid rgba(199,202,149,.25);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,.35);
    animation: trainFadeIn .5s ease both;
}
.train-panel-body {
    padding: 10px 12px 14px;
}
.train-duration-title {
    margin: 0 0 10px;
    font-size: 12px;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: center;
}
.train-duration {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}
.train-duration-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    min-height: 64px;
    padding: 10px 8px;
    background:
        linear-gradient(180deg, rgba(36, 28, 12, .35), transparent 55%),
        linear-gradient(180deg, rgba(18, 20, 24, .95), rgba(8, 9, 11, .98));
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 0;
    box-shadow:
        inset 0 1px 0 rgba(231, 214, 187, .1),
        0 4px 12px rgba(0, 0, 0, .35);
    font-size: 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease;
}
.train-duration-opt .circle,
.train-duration-opt .check {
    display: none !important;
}
.train-duration-opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.train-duration-opt:hover {
    border-color: rgba(199, 202, 149, .55);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(231, 214, 187, .14),
        0 0 14px rgba(199, 202, 149, .12),
        0 6px 14px rgba(0, 0, 0, .4);
}
.train-duration-opt:has(input:checked),
.train-duration-opt.is-checked {
    border-color: rgba(0, 180, 255, .65);
    background:
        linear-gradient(180deg, rgba(0, 120, 180, .22), transparent 60%),
        linear-gradient(180deg, rgba(14, 22, 30, .98), rgba(6, 10, 14, .98));
    box-shadow:
        inset 0 0 0 1px rgba(0, 180, 255, .2),
        0 0 18px rgba(0, 180, 255, .22),
        0 6px 14px rgba(0, 0, 0, .4);
}
.train-duration-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    line-height: 1.1;
}
.train-duration-h {
    font-size: 15px;
    font-weight: 800;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .7);
}
.train-duration-gain {
    font-size: 13px;
    font-weight: 800;
    color: #6bff9a;
    letter-spacing: .03em;
}
.train-duration-opt:has(input:checked) .train-duration-h,
.train-duration-opt.is-checked .train-duration-h {
    color: #fff;
}
.train-start-wrap {
    display: flex !important;
    justify-content: center;
    align-items: center;
    float: none !important;
    width: 100%;
    text-align: center;
    margin: 16px 0 0;
    padding-top: 4px;
}
.train-start-wrap .red_button {
    float: none !important;
    display: inline-block !important;
    width: auto;
    min-width: 210px;
    max-width: 100%;
    height: 51px;
    line-height: 51px;
    padding: 0 26px;
    margin: 0 auto !important;
    white-space: nowrap;
    background-size: 100% 100%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(199, 202, 149, 0.25);
    cursor: pointer;
    pointer-events: auto;
    position: relative;
    z-index: 5;
}

.train-bonuses-title {
    margin: 0;
    padding: 12px 14px 0;
    font-size: 14px;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.train-bonuses-title .fa { margin-right: 6px; color: #ffcf6b; }
.train-bonuses {
    margin: 8px 0 6px !important;
}
.train-bonuses .list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 9px 14px;
    font-size: 13px;
    transition: background .2s ease;
}
.train-bonuses .list-group-item:hover {
    background: rgba(199,202,149,.06);
}
.train-bonus-name {
    display: inline-flex;
    align-items: center;
    color: #d7dade;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: 12px;
}
.train-bonus-val {
    color: #fff288;
    font-weight: 800;
}

.tr-tt {
    display: flex;
    flex-direction: column;
    width: 470px;
    max-width: 92vw;
    text-align: left;
}
.tr-tt-art {
    width: 100%;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(199,202,149,.4);
    background: radial-gradient(circle at 50% 35%, #1a1c22, #0a0b0d 78%);
    box-shadow: inset 0 0 40px rgba(0,0,0,.5);
    margin-bottom: 10px;
}
.tr-tt-art img {
    max-width: 96%;
    max-height: 96%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.tr-tt-name {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 800;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 8px;
}
.tr-tt-desc {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: #d7dade;
}

.list-group {
    margin-bottom: 0;
    padding-left: 0;
}
li.list-group-item:hover{
	background:rgba(0,0,0,0.5);
}
li.list-group-item strong{
	color:#fff288;
}
li.list-group-item .col-md-2.text-center {
    line-height: 25px;
}

@keyframes trainFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes trainCardIn {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes trainShine {
    0% { transform: translateX(-100%); }
    55%, 100% { transform: translateX(100%); }
}
@keyframes trainSweep {
    from { left: -55%; }
    to { left: 120%; }
}
@keyframes trainFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
@keyframes trainPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(0,180,255,.2), 0 0 0 rgba(0,180,255,0); }
    50% { box-shadow: inset 0 0 0 1px rgba(0,180,255,.7), 0 0 12px rgba(0,180,255,.25); }
}

@media (max-width: 1199px) {
    .training-skills,
    .training-skills--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .train-card-media { height: 118px; }
    .train-bonuses-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .training-skills,
    .training-skills--wide {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    .train-card-media { height: 120px; }
}

@media (max-width: 767px) {
    .training-info--bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    .training-stat {
        padding: 6px 4px;
        gap: 2px;
    }
    .training-stat-label {
        font-size: 8px;
        letter-spacing: .02em;
        line-height: 1.15;
    }
    .training-stat-value {
        font-size: 13px;
    }
    .training-trainer-ico {
        height: 28px;
        margin-bottom: 2px;
    }
    .training-trainer-ico img {
        height: 28px;
    }
    .training-stat--trainer::after {
        display: none;
    }
    .training-skills,
    .training-skills--wide {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .train-active {
        flex-direction: row;
        align-items: stretch;
        text-align: left;
        min-height: 0;
        padding: 8px;
        gap: 8px;
    }
    .train-queue {
        gap: 8px;
    }
    .train-queue-head {
        font-size: 11px;
        margin-bottom: 0;
    }
    .train-queue-item {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        column-gap: 8px;
        row-gap: 2px;
        padding: 6px;
        min-height: 64px;
    }
    .train-active-art {
        grid-column: 1;
        grid-row: 1 / 4;
        width: 64px;
        min-width: 64px;
        height: 64px;
        border-radius: 6px;
        align-self: center;
    }
    .train-active-body {
        display: contents;
    }
    .train-active-badge {
        display: none !important;
    }
    .train-active-ico {
        display: none !important;
    }
    .train-active-progress {
        display: none !important;
    }
    .train-active-name {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        font-size: 13px;
        gap: 6px;
        line-height: 1.15;
        min-width: 0;
    }
    .train-active-gain {
        font-size: 11px;
        padding: 1px 7px;
    }
    .train-active-remain {
        grid-column: 2;
        grid-row: 2;
        font-size: 10px;
        line-height: 1.2;
        min-width: 0;
    }
    .train-active-timer {
        font-size: 12px;
    }
    .train-active-head {
        grid-column: 2;
        grid-row: 3;
        display: block;
        margin: 0;
        min-width: 0;
    }
    .train-active-ends {
        display: block;
        font-size: 9px;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .train-active-ends .fa {
        display: none;
    }
    .train-active-ends-sep {
        display: none;
    }
    .train-active-meta {
        display: contents;
        min-height: 0;
    }
    .train-queue-item .train-active-meta {
        min-height: 0;
    }
    .train-active-cancel {
        grid-column: 3;
        grid-row: 1 / 4;
        align-self: center;
        justify-self: end;
        font-size: 10px;
        padding: 5px 8px;
        white-space: nowrap;
        margin: 0;
    }
    .train-setup-selected {
        flex-direction: column;
        text-align: center;
    }
    .train-setup-meta {
        align-items: center;
    }
    .train-setup-gain {
        align-self: center;
    }
    .train-bonuses-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .train-card-media { height: 108px; }
    .train-duration {
        gap: 6px;
    }
    .train-duration-opt {
        min-height: 56px;
        padding: 8px 6px;
    }
}

@media (max-width: 479px) {
    .training_bg,
    .training_bg.decor.decor-new {
        padding: 10px 8px 16px;
    }
    .training-info--bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
    .training-stat {
        padding: 5px 3px;
    }
    .training-stat-label {
        font-size: 7px;
    }
    .training-stat-value {
        font-size: 12px;
    }
    .training-trainer-ico {
        height: 22px;
    }
    .training-trainer-ico img {
        height: 22px;
    }
    .training-skills,
    .training-skills--wide {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .train-pick {
        max-width: 100%;
        height: 40px;
        line-height: 40px;
    }
    .zdolnosc-ile {
        width: 44px;
        height: 48px;
        line-height: 48px;
        font-size: 12px;
    }
    .train-bonuses-strip {
        grid-template-columns: 1fr 1fr;
    }
    .train-active-art {
        width: 58px;
        min-width: 58px;
        height: 58px;
    }
    .train-queue-item {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        min-height: 58px;
        padding: 5px;
        column-gap: 6px;
    }
    .train-active-name { font-size: 12px; }
    .train-active-timer { font-size: 11px; }
    .train-active-ends { font-size: 8px; }
    .train-active-cancel {
        font-size: 9px;
        padding: 4px 6px;
    }
}

.title_thread{
	line-height:25px;
}
li.list-group-item{
	text-align:left;
	padding-top:5px;
	padding-bottom:5px;
	margin-top:6px;
	margin-bottom:6px;
	min-height:47px;
}

.unactive {
    filter: grayscale(100%);
}


a {
    cursor: pointer;
}

.item-place {
    display: inline-block;
    background-color: black;

    width: 64px;
    height: 64px;

    margin-right: 5px;
    margin-bottom: 5px;
}

.mw-100 {
    max-width: 100%;
}
.relogprofil,
.relog-av > img.relogprofil,
.relogbutton .relog-dropdown img.relogprofil {
    width: 40px !important;
    height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0b0c10;
    box-sizing: border-box !important;
    flex: none !important;
}

.relog-av {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid rgba(199, 202, 149, .45);
    border-radius: 2px;
    background: #0b0c10;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, .45),
        0 0 0 1px rgba(199, 162, 68, .15);
}

.shoutboxTabs li {
    float: none;
    display: inline-block;
}

.pl-30 {
    padding-left: 30px;
}

.pr-30 {
    padding-right: 30px;
}

.battleWindow {
    position: fixed;

    width: 100%;
    height: 100%;
}
 
.zdolki_top{
    display: inline-block;
    vertical-align: middle;

    margin-right: 12px;
    text-align: center;

    line-height: 20px;
}

.container {
    padding-left: 15px;
    padding-right: 15px;
}

.down-left {
    background: rgba(0, 0, 0, .72);
    border-top: 1px solid rgba(199, 202, 149, .45);
    box-shadow:
        inset 0 1px 0 rgba(231, 214, 187, .08),
        0 -8px 24px rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    width: 100%;
    height: 88px;
    min-height: 88px;

    position: fixed;
    z-index: 1499;

    left: 0;
    bottom: 0;

    padding: 0 14px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    contain: layout style;
}

/* Odstęp contentu od dolnego paska — klasa z <body>, bez :has() (mniej CLS) */
body.has-down-left {
    padding-bottom: 0;
}

body.has-down-left .ga-async-page {
    padding-bottom: 112px;
    box-sizing: border-box;
}

.down-left-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 1180px;
    min-width: 0;
    height: 100%;
}

.down-left-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex: 0 0 auto;
    height: 46px;
}

.down-left-icons a,
.down-left-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 80px;
    width: 80px;
    height: 46px;
    line-height: 0;
    font-size: 0;
    color: transparent;
    text-decoration: none;
    overflow: hidden;
}

.down-left-ico--discord {
    flex-basis: 110px;
    width: 110px;
}

.down-left-icons img {
    display: block;
    width: 80px;
    height: 46px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.down-left-ico--discord img {
    width: 110px;
    height: 35px;
}

.down-left-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    flex: 0 1 auto;
    min-height: 42px;
    padding: 6px 12px;
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 6px;
    background: rgba(0, 0, 0, .55);
    color: #b8bca8;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: .02em;
    text-align: left;
    box-sizing: border-box;
}

.down-left-stats .dls-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px 6px;
    white-space: nowrap;
}

.down-left-stats .dls-item {
    color: #c7ca95;
    text-decoration: none;
    white-space: nowrap;
}

.down-left-stats a.dls-item:hover {
    color: #ecf28d;
}

.down-left-stats b {
    color: #ecf28d;
    font-weight: 700;
}

.down-left-stats .dls-premium b {
    color: #f0d66d;
}

.down-left-stats .dls-online b {
    color: #7dffb0;
}

.down-left-stats .dls-dot {
    color: rgba(199, 202, 149, .55);
    flex: 0 0 auto;
}

.down-left-stats .dls-short {
    display: none;
}

.down-left-stats .dls-full {
    display: inline;
}

/* Tablet / mobile: ikony nad stats, 2 linie na pełną szerokość */
@media (max-width: 991px) {
    .down-left {
        height: 108px;
        min-height: 108px;
        padding: 8px 10px 10px;
        overflow: hidden;
    }

    body.has-down-left .ga-async-page {
        padding-bottom: 132px;
    }

    .down-left-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        max-width: 100%;
    }

    .down-left-icons {
        width: 100%;
        gap: 14px;
        height: 36px;
    }

    .down-left-icons a,
    .down-left-ico {
        flex-basis: 64px;
        width: 64px;
        height: 36px;
    }

    .down-left-ico--discord {
        flex-basis: 96px;
        width: 96px;
    }

    .down-left-icons img {
        width: 64px;
        height: 36px;
    }

    .down-left-ico--discord img {
        width: 96px;
        height: 28px;
    }

    .down-left-stats {
        width: 100%;
        max-width: 100%;
        align-items: center;
        text-align: center;
        padding: 5px 8px;
        font-size: 10px;
        gap: 2px;
        min-height: 38px;
    }

    .down-left-stats .dls-row {
        justify-content: center;
        flex-wrap: nowrap;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .down-left-stats .dls-full {
        display: none;
    }

    .down-left-stats .dls-short {
        display: inline;
    }
}

@media (max-width: 479px) {
    .down-left {
        height: 100px;
        min-height: 100px;
        padding: 6px 6px 8px;
    }

    body.has-down-left .ga-async-page {
        padding-bottom: 124px;
    }

    .down-left-icons {
        gap: 10px;
        height: 30px;
    }

    .down-left-icons a,
    .down-left-ico {
        flex-basis: 52px;
        width: 52px;
        height: 30px;
    }

    .down-left-ico--discord {
        flex-basis: 84px;
        width: 84px;
    }

    .down-left-icons img {
        width: 52px;
        height: 30px;
    }

    .down-left-ico--discord img {
        width: 84px;
        height: 24px;
    }

    .down-left-stats {
        font-size: 9px;
        padding: 4px 6px;
        letter-spacing: 0;
        min-height: 34px;
    }

    .down-left-stats .dls-row {
        gap: 3px 4px;
    }
}

.navbar,
.navbar.navbar-default,
.navbar.navbar-expand-lg,
nav.navbar {
    margin-bottom: 0;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

.navbar > .container,
.navbar > .container-fluid {
    position: relative;
    border-radius: 0 !important;
}

.navbar .navbar-header {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Desktop: logo w jednym rzędzie z menu — bez pełnej szerokości (to rozpychało górę) */
@media (min-width: 768px) {
    .navbar .brand-centered {
        float: left;
        width: auto !important;
        position: relative;
        left: auto;
        top: auto;
        margin: 0 16px 0 0; /* odstęp logo → avatar */
        z-index: 2;
    }

    /* Pusty header (mobile-only kids) nie może zajmować wysokości */
    .navbar .navbar-header {
        float: left;
        width: auto;
        min-height: 0;
        padding: 0;
    }
}

/* Header CLS — sloty na obrazki; logo jak wcześniej: wysokość brandu 50px */
.navbar .navbar-brand {
    height: 50px;
    padding: 0 !important;
    margin: 0;
}
.navbar-brand > img,
.brand-centered .navbar-brand > img {
    height: 50px !important;
    width: auto !important;
    max-height: 50px;
    max-width: 123px;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: contain;
    display: block;
}

.mobile-logo img {
    height: 50px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
}

#actual_char > a > img,
.actual_char > a > img,
img.header-avatar {
    width: 45px !important;
    height: 45px !important;
    max-height: 45px !important;
    object-fit: cover;
    padding-top: 0 !important;
    padding-right: 10px;
    display: inline-block;
    vertical-align: middle;
    box-sizing: content-box;
}

/* Belka statystyk pod menu — ostre narożniki */
.second-panel,
.second-panel.decor,
.second-panel.decor-new,
.second-panel.bg_darker {
    border-radius: 0 !important;
}

.relogbutton > a.dropdown-toggle {
	margin: 0 !important;
	padding: 0 !important;
}

/* Dropdown przelogowania postaci */
.relogbutton .dropdown-menu.relog-dropdown,
.relogbutton > .dropdown-menu.relog-dropdown {
    min-width: 280px;
    padding: 14px 12px 16px;
    margin-top: 10px !important;
    background-color: rgba(0, 0, 0, .96);
    background-image:
        url('../img/belka_left.png'),
        url('../img/belka_right.png'),
        linear-gradient(180deg, rgba(36, 28, 12, .45), transparent 36%);
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: left -3px bottom -5px, right -3px bottom -5px, center top;
    background-size: 32px 48px, 32px 48px, 100% 50%;
    border: 1px solid rgba(199, 202, 149, .55);
    border-radius: 0;
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .65),
        inset 0 0 0 1px rgba(199, 162, 68, .18),
        inset 0 1px 0 rgba(231, 214, 187, .12);
    overflow: visible;
}

/* Global .dropdown-menu li { height: 45px !important } psuje layout */
.relogbutton > .dropdown-menu.relog-dropdown > li {
    position: relative;
    height: auto !important;
    float: none !important;
    clear: both;
}

.relogbutton > .dropdown-menu.relog-dropdown > li > a.relog-char {
    display: flex !important;
    align-items: center !important;
    float: none !important;
    clear: both !important;
    gap: 0;
    width: auto !important;
    margin: 0 0 6px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent;
    border-radius: 2px;
    color: #e4ddc9 !important;
    white-space: nowrap;
    line-height: 1.25;
    background: transparent;
}

.relogbutton > .dropdown-menu.relog-dropdown > li > a.relog-char:hover,
.relogbutton > .dropdown-menu.relog-dropdown > li > a.relog-char:focus {
    background: rgba(199, 162, 68, .12) !important;
    border-color: rgba(199, 162, 68, .45);
    color: #fff6d0 !important;
}

.relogbutton > .dropdown-menu.relog-dropdown .relog-av,
.relogbutton > .dropdown-menu.relog-dropdown .relogprofil {
    float: none !important;
}

.relog-char-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    line-height: 1.2;
    text-align: left;
}

.relog-char-meta .relog-char-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.relog-char-lvl {
    color: #8e96a8;
    font-size: 11px;
}

.relogbutton > .dropdown-menu.relog-dropdown > li.relog-add {
    display: flex !important;
    justify-content: center;
    align-items: center;
    float: none !important;
    margin-top: 4px;
    padding: 12px 4px 4px;
    border-top: 1px solid rgba(199, 202, 149, .3);
    text-align: center;
    background: linear-gradient(90deg, transparent, rgba(199, 162, 68, .08), transparent);
}

.relogbutton > .dropdown-menu.relog-dropdown > li.relog-add > a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: none !important;
    gap: 8px;
    width: auto !important;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 8px 18px !important;
    border: 1px solid rgba(199, 162, 68, .55);
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(48, 40, 18, .9), rgba(12, 10, 6, .92));
    color: #f0d77d !important;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
    box-shadow: inset 0 1px 0 rgba(231, 214, 187, .12);
}

.relogbutton > .dropdown-menu.relog-dropdown > li.relog-add > a:hover {
    border-color: #e6c45a;
    color: #fff6d0 !important;
    background: linear-gradient(180deg, rgba(58, 48, 24, .95), rgba(18, 14, 8, .95));
}

/* Ozdobniki — złote linie u góry/dół (belki są w background-image) */
.relogbutton > .dropdown-menu.relog-dropdown::before,
.relogbutton > .dropdown-menu.relog-dropdown::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 1px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(199, 162, 68, .25) 12%,
        rgba(231, 214, 187, .75) 50%,
        rgba(199, 162, 68, .25) 88%,
        transparent 100%
    );
}

.relogbutton > .dropdown-menu.relog-dropdown::before {
    top: 5px;
}

.relogbutton > .dropdown-menu.relog-dropdown::after {
    bottom: 6px;
}

.mobile-player-stat {
    width: 80px;
    height: 46px;
}

.mobile-player-stat img {
    width: 80px;
    height: 46px;
    max-height: 46px !important;
    display: block;
}

.mobile-relog {
    width: 25px;
    height: 25px;
}

.mobile-relog img {
    width: 25px;
    height: 25px;
    max-height: 25px !important;
    display: block;
}

.navbar img[src*="flags/"] {
    width: 23px;
    height: 17px;
    vertical-align: middle;
}

.gold_container > img,
.kan_container > img,
.redkan_container > img {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: middle;
    display: inline-block;
}

.second-panel.decor-new {
    min-height: 118px;
    box-sizing: border-box;
    /* Belki na zewnętrznych kantach — jak panele wyboru postaci */
    overflow: visible;
}
.second-panel.decor-new:before {
    left: -4px;
}
.second-panel.decor-new:after {
    right: -3px;
}

.top-quick-icons a {
    width: 56px;
    height: 56px;
}

.bg_dark {
    background-color: rgba(0,0,0,0.8) !important;
}

.bg_darker {
    background-color: rgba(0,0,0,0.9);
}

.bg_fulldark {
    background-color: black;
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.d-flex.center {
    justify-content: center;
}

.w-100 {
    width: 100%;
}

.character_infos {
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    background-color:rgba(0,0,0,0.8);

    height:100px;
    
    padding-left:5px;
    padding-right:5px;
    padding-top:15px;
    
    text-align: center;
}

.top_container_1 {
    display: inline-block;
    padding: 5px 10px;

    width: 125px;
}

.top_container_2 {
    display: inline-block;
    padding: 5px 10px;

    width: 150px;
}

.top_container_3 {
    text-align: left;

    display: inline-block;
    padding: 5px 10px;

    margin-top: 12px;

    width: 450px;
}

.top_container_4 {
    padding: 5px 10px;
    align-self: center;

    display: inline-block;
    width: 350px;

    text-align: center;
}

.gold_container {
    padding-bottom: 5px;

    display: inline-block;
    clear: both;
    color: #d1bd4c;
}

.kan_container {
    padding-bottom: 5px;

    display: inline-block;
    clear: both;
    color: #009ef7;
}

.redkan_container {
    padding-bottom: 10px;

    display: inline-block;
    clear: both;
    color: #e02020;
}

.energy_hp_container,
.reiatsu_xp_container {
    display: inline-block;
    width: 150px;

    margin-right: 10px;
}

.top-bars-row {
    display: flex;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
}

.top-bars-row .energy_hp_container,
.top-bars-row .reiatsu_xp_container {
    display: block;
    flex: 0 1 118px;
    width: 118px;
    max-width: 118px;
    min-width: 0;
    margin-right: 0;
    vertical-align: top;
}

.top-abilities-row {
    clear: both;
}

.daily-icon {
    width: 100%;
    max-width: 75px;

    margin-left: 5px;
    margin-top: -15px;
}

.top-quick-icons {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    gap: 4px;
    margin-top: -10px;
    margin-left: 2px;
    line-height: 0;
    white-space: nowrap;
}

.top-quick-icons a {
    display: inline-block;
    line-height: 0;
    flex: 0 0 auto;
}

.top-quick-icons .daily-icon,
.top-quick-icons .usable-icon {
    width: 56px;
    max-width: 56px;
    height: 56px;
    object-fit: contain;
    margin: 0;
}

.usable-items-modal {
    border: solid 1px #d2c195;
    background: #161412;
}

.usable-items-modal .modal-body {
    position: relative;
    padding: 24px 20px 20px;
}

.usable-items-close {
    position: absolute;
    right: 12px;
    top: 8px;
    color: #d2c195;
    opacity: 0.85;
    font-size: 28px;
    z-index: 2;
}

.usable-items-close:hover {
    color: #fff;
    opacity: 1;
}

.usable-items-title {
    margin: 0 0 8px;
}

.usable-items-sub {
    color: #b9a98a;
    margin-bottom: 18px;
    font-size: 13px;
}

.usable-items-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px;
}

.usable-items-loading,
.usable-items-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #cfc3a8;
    padding: 24px 8px;
}

.usable-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 8px;
    border: 1px solid rgba(210, 193, 149, 0.35);
    background: rgba(0, 0, 0, 0.45);
    color: #efe6d2;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
    text-align: center;
    min-height: 128px;
}

.usable-item:hover,
.usable-item:focus {
    border-color: #d2c195;
    background: rgba(40, 32, 22, 0.9);
    transform: translateY(-1px);
    outline: none;
}

.usable-item.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.usable-item img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.usable-item-name {
    font-size: 12px;
    line-height: 1.25;
    color: #f0e6d0;
}

.usable-item-amount {
    font-size: 11px;
    color: #9fd4ff;
}

.usable-item-effect {
    font-size: 10px;
    line-height: 1.3;
    color: #a8b59a;
}

.usable-items-status {
    min-height: 22px;
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
}

.usable-items-status.is-ok {
    color: #8fd18f;
}

.usable-items-status.is-err {
    color: #e08a8a;
}

.usable-confirm {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.usable-confirm.is-open {
    display: flex;
}

.usable-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
}

.usable-confirm-card {
    position: relative;
    z-index: 1;
    width: min(420px, 94vw);
    padding: 22px 20px 18px;
    background: #0d0b09;
    border: 1px solid #d2c195;
    color: #efe6d2;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 18px 40px rgba(0, 0, 0, 0.55);
}

.usable-confirm-title {
    margin: 0 0 12px;
    color: #f0e6d0;
    font-size: 18px;
    letter-spacing: 0.04em;
}

.usable-confirm-text {
    margin: 0 0 18px;
    color: #cfc3a8;
    font-size: 14px;
    line-height: 1.45;
}

.usable-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.usable-confirm-actions .red_button,
.usable-confirm-actions .gray_button {
    float: none !important;
    display: inline-block !important;
    width: 140px !important;
    height: 42px !important;
    line-height: 42px !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    margin: 0 !important;
}

.ability_element {
    display: inline-block;

    color: white;

    margin-top: 19px;
    margin-right: 7px;
}

.progress {
    box-shadow: none;
    background: #000000;

    margin-bottom: 0;
    position: relative;
}

.progress .progress-bar {
    float: none;
}

.progress .progress-bar-text {
    position: absolute;

    left: 10px;
    top: 0px;

    z-index: 5;
    color: white;
}

.font-10 .progress {
    height: 20px;
}

.decor.decor-new {
    padding-left: 0;
    padding-right: 0;

    border-radius: 0;
}

.ico_button {
    display: inline-block;

    padding: 8px 12px;
    background-color: #212121;

    border-radius: 8px;
    margin-right: 10px;
}

.ico_button .icomenu {
    float: none;
    position: relative;
    top: 3px;

    margin-right: 0;
}

.ico_button.small_b {
    padding: 4px 6px;
    background-color: #212121;

    border-radius: 4px;
    border: 1px solid #b7b7b7;
}

.ico_button.small_c {
    padding: 4px 12px;
}

.ico_button.nobg {
    background-color: transparent;
}

.decor-left {
    position:relative;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    line-height:22px;
    background-color:rgba(0,0,0,0.4);
    border-radius: 5px;
    padding:5px;
    text-align:center;
}

.decor-left:before {
	position:absolute;
	left:-4px;
	bottom:-6px;
	clear:both;
    display: inline;
    width:34px;
    height:51px;
    float:left;
    background:url('../img/belka_left.png') bottom no-repeat;
    z-index:555;
    content: "";
}

.decor3 {
    position:relative;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    line-height:22px;
    background-color:rgba(0,0,0,0.4);
    border-radius: 5px;
    padding:5px;
    text-align:center;
}

.decor3:before {
	position:absolute;
	left:-4px;
	bottom:-6px;
	clear:both;
    display: inline;
    width:34px;
    height:51px;
    float:left;
    background:url('../img/belka_left.png') bottom no-repeat;
    z-index:555;
    content: "";
}

.decor4 {
    position:relative;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    line-height:22px;
    background-color:rgba(0,0,0,0.4);
    border-radius: 5px;
    padding:5px;
    text-align:center;
}

.decor4:before {
	position:absolute;
	left:-12px;
	bottom:-1px;
	clear:both;
    display: inline;
    width:34px;
    height:34px;
    float:left;
    background:url('../img/decor_vertical.png') bottom no-repeat;
    background-size: auto 100%;
    z-index:555;
    content: "";
}

.decor5 {
    position:relative;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    line-height:22px;
    background-color:rgba(0,0,0,0.4);
    border-radius: 5px;
    padding:5px;
    text-align:center;
}

.decor5:before {
	position:absolute;
	left:-12px;
	bottom:-1px;
	clear:both;
    display: inline;
    width:34px;
    height:44px;
    float:left;
    background:url('../img/decor_vertical.png') bottom no-repeat;
    background-size: auto 100%;
    z-index:555;
    content: "";
}

.decor.decor_button::before {
    position: absolute;
    left: -4px;
    bottom: -6px;
    clear: both;
    display: inline;
    width: 34px;
    height: 30px;
    float: left;
    background: url('../img/belka_left.png') bottom no-repeat;
    z-index: 555;
    content: "";
}

.decor.decor_button::after {
    position: absolute;
    right: -3px;
    clear: both;
    bottom: -6px;
    display: inline;
    width: 34px;
    float: left;
    height: 30px;
    background: url('../img/belka_right.png') bottom no-repeat;
    z-index: 555;
    content: "";
}

.button_1 {
    display: inline-block;
    padding: 3px 14px;

    color: #ae8550;

    background-color: #000000;
    background-image: url('../img/buttons/button-bg-1.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.button_2 {
    display: inline-block;
    padding: 5px 18px;

    color: #ae8550;

    background-color: #000000;
    background-image: url('../img/buttons/button-bg-2.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    text-align: left;
}

.button_3 {
    display: inline-block;
    padding: 5px 18px;

    color: #ae8550;

    background-color: #000000;
    background-image: url('../img/buttons/button-bg-3.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.button_4 {
    display: inline-block;
    padding: 10px 18px;

    background-color: #000000;
    background-image: url('../img/buttons/button-bg-4.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    color: white;
    font-size: 14px;
}

.button_5 {
    display: inline-block;
    padding: 5px 18px;

    color: #ae8550;

    background-color: #111111;
    background-image: url('../img/map_ui/top.png');
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center center;

    text-align: left;
}

.button_6 {
    display: inline-block;
    padding: 12px 30px;

    color: #ae8550;
    font-size: 18px;

    background-color: #111111;
    background-image: url('../img/buttons/button-bg-4.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    text-align: left;
}

.button_kan {
    display: inline-block;
    padding: 10px 18px;

    width: calc(100% - 20px);
    max-width: 255px;

    background-color: #000000;
    background-image: url('../img/buttons/button_kan.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;

    color: white;
    line-height: normal;
    font-size: 12px;

    text-align: left;
}

.no_mobile {
    display: block;
}

.mobile_look {
    display: none !important;
}

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.mr-1 {
    margin-right: 5px !important;
}

.mr-2 {
    margin-right: 10px !important;
}

.mr-3 {
    margin-right: 15px !important;
}

.mr-4 {
    margin-right: 20px !important;
}

.ml-1 {
    margin-left: 5px !important;
}

.ml-2 {
    margin-left: 10px !important;
}

.ml-3 {
    margin-left: 15px !important;
}

.ml-4 {
    margin-left: 20px !important;
}

.mt-none {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 5px !important;
}

.mt-2 {
    margin-top: 10px !important;
}

.mt-3 {
    margin-top: 15px !important;
}

.mt-4 {
    margin-top: 20px !important;
}

.mb-none {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: 5px !important;
}

.mb-2 {
    margin-bottom: 10px !important;
}

.mb-3 {
    margin-bottom: 15px !important;
}

.mb-4 {
    margin-bottom: 20px !important;
}

.middle {
    vertical-align: middle;
}

.font-10 {
    font-size: 10px;
    line-height: 20px;
}

.clear {
    clear: both;
}

.mobile-button {
    display: none;
}

.blue-sep {
    border-top: 1px solid #0c486b;

    margin-top: 10px;
    margin-bottom: 10px;
}

.mobile-ico.icomenu {
    display: none;
}

.white {
    color: white !important;
}

.mv-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* TECHS */

#techContainer {
    background: url('../img/tech/bg.png');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: cover;

    padding: 15px;
}

#techContainer h3,
#techContainer h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#techContainer .skillState {
    position: relative;
    margin-top: -15px;

    text-align: left;
    align-items: center;
}

#techContainer .skillState > .circle_data {
    position: absolute;

    left: 26px;
}

.tech_card {
    position: relative;

    margin-left: auto;
    margin-right: auto;
}

.tech_card > div {
    margin-right: 5px;
}

.tech_card .circle_all {
    position: absolute;

    right: 0;
    top: 0;
}

.tech_card .circle_learned {
    position: absolute;

    left: calc(50% - 44px);
    top: 290px;
}

.skill_card {
    position: relative;

    margin-left: auto;
    margin-right: auto;
}

.skill_card .card_inside {
    position: absolute;

    left: 0;
    top: -20px;
    
    width: 100%;
}

.skill_card .tech_image {
    display: block;

    margin-left: auto;
    margin-right: auto;
}

.skill_card .level_place {
    position: absolute;

    left: 15px;
    top: 30px;

    width: 40px;
}

.skill_card .level_place img {
    display: inline-block;
    margin-bottom: 2px;
}

.skill_card .level_circle {
    position: absolute;

    top: 20px;
    right: 5px;
}

.skill_card .level_circle .help_circle {
    position: absolute;

    right: 20px;
    top: 80px;
}

.skill_card .level_gem {
    position: absolute;

    left: 5px;
    top: 115px;
}

.skill_card .level_gem .text {
    position: absolute;

    left: 45px;
    bottom: 20px;

    font-size: 1em;
    line-height: 1em;
}

.skill_card .desc {
    position: absolute;

    left: 15px;
    top: 175px;
    padding-right: 15px;

    font-size: 9px;
    color: #565656;

    line-height: normal;
}

.card_description {
    background-color: #141316;
    color: #5f5f60 !important;

    padding-left: 15px;
    padding-right: 15px;
    padding-top: 20px;
    padding-bottom: 15px;
}

.card_description p {
    margin: 0;
}

.card_separate {
    border-bottom: 1px solid #5f5f60;

    margin-top: 5px;
    margin-bottom: 5px;
}

/* END TECHS */

/* Las Noches */

#LasNochesContainer {
    /* panel styles live on .ln-page + decor */
    padding: 15px;
}

#LasNochesContainer .upPanel {
    padding-bottom:15px;
    border-bottom: 1px solid rgba(255, 255, 255, .5);
}

#LasNochesContainer .rightBorder {
    border-right: 1px solid rgba(255, 255, 255, .5);
}

#LasNochesContainer .grayBG {
    background-color: rgba(255, 255, 255, .1);
    padding: 10px 15px;
    border-radius: 15px;

    margin-top: 15px;
    
    color: white;
}

#LasNochesContainer h3,
#LasNochesContainer h4 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#LasNochesContainer .medicalStore {
    text-align: left;
}

#LasNochesContainer .medicalStore a > img {
    width: 100px;
    max-width: 100%;
}

#LasNochesContainer .skillState {
    position: relative;
    margin-left: 40px;
    margin-right: 40px;

    margin-top: -15px;
    margin-bottom: -15px;

    text-align: left;
    align-items: center;
}

#LasNochesContainer .skillState img {
    position: relative;
    
    left: 0;
    top: 0;
}

#LasNochesContainer .skillState > .circle_data {
    position: absolute;

    left: 26px;
    top: 15px;

    width: 100px;
}

#LasNochesContainer .attacksToReward {
    padding-top: 4px;

    font-size: 14px;
    vertical-align: top;
}

#LasNochesContainer .infoContainer {
    margin-top: 80px;
    margin-bottom: 20px;
}

#LasNochesContainer .infoContainer .grayContainer {
    background-color: rgba(255, 255, 255, .1);
    padding: 10px 15px;
    border-radius: 15px;

    margin-top: 15px;
    
    color: white;
}

#LasNochesContainer .grayContainer strong {
    font-size: 18px;
    font-weight: 900;
}

#LasNochesContainer .grayContainer p {
    line-height: 20px;
    font-size: 16px;
}

#LasNochesContainer .levelButton,
#LasNochesContainer .levelButton:link {
    background-color: black;
    opacity: .3;

    padding: 10px 15px;

    border-radius: 10px;
}

#LasNochesContainer .levelButton:hover,
#LasNochesContainer .levelButton:focus,
#LasNochesContainer .levelButton.active {
    opacity: 1;
}

#LasNochesContainer .infoContainer2 {
    margin-top: 80px;
    margin-bottom: 20px;

    font-size: 14px;
    line-height: 20px;
}

#LasNochesContainer .locPicture {
    position: relative;
    font-size: 14px;

    width: 300px;
    height: 225px;
}

#LasNochesContainer .locPicture .toBoss {
    position: absolute;

    right: 15px;
    top: 15px;

    color: white;

    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;

    padding: 10px 15px;
}

#LasNochesContainer .locPicture .doIt {
    position: absolute;

    left: 0;
    bottom: 15px;
    width: calc(100% - 30px);

    margin-left: 15px;
    margin-right: 15px;

    background-color: rgba(0, 0, 0, .3);
    border-radius: 8px;

    padding: 10px 15px;

    color: white;
}

/* END Las Noches */

/* DAILY */
.daily_bg{
    background-image: url('../img/daily/bg.png');
	background-color:#000000;
	min-height:700px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100%;
    border-radius: 5px;

    padding-left: 15px;
    padding-right: 15px;

    margin-bottom: 20px;
}

.pt-0 {
    padding-bottom: 0px;
}

.pt-1 {
    padding-top: 5px;
}

.pt-2 {
    padding-top: 10px;
}

.pt-3 {
    padding-top: 15px;
}

.pt-4 {
    padding-top: 20px;
}

.pb-0 {
    padding-bottom: 0px;
}

.pb-1 {
    padding-bottom: 5px;
}

.pb-2 {
    padding-bottom: 10px;
}

.pb-3 {
    padding-bottom: 15px;
}

.pb-4 {
    padding-bottom: 20px;
}

.pl-0 {
    padding-bottom: 0px;
}

.pl-1 {
    padding-left: 5px;
}

.pl-2 {
    padding-left: 10px;
}

.pl-3 {
    padding-left: 15px;
}

.pl-4 {
    padding-left: 20px;
}

.pr-0 {
    padding-bottom: 0px;
}

.pr-1 {
    padding-right: 5px;
}

.pr-2 {
    padding-right: 10px;
}

.pr-3 {
    padding-right: 15px;
}

.pr-4 {
    padding-right: 20px;
}

.p-0 {
    padding: 0px;
}

.p-1 {
    padding: 5px;
}

.p-2 {
    padding: 10px;
}

.p-3 {
    padding: 15px;
}

.p-4 {
    padding: 20px;
}

.font-large {
    font-size: 18px;
    line-height: 25px;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.decor2{
	position:relative;
  font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
  line-height:22px;
  border-radius: 5px;
  padding:5px;
  text-align:center;
  height: calc(100% - 15px);
}
.decor2:before{
	position:absolute;
	left:-4px;
	bottom:-6px;
	clear:both;
  display: inline;
  width:34px;
  height:51px;
  float:left;
  background:url('../img/belka_left.png') bottom no-repeat;
  z-index:555;
  content: "";
}
.decor2:after{
	position:absolute;
	right:47px;
	clear:both;
	bottom:-6px;
  display: inline;
  width:34px;
  float:left;
  height:51px;
  background:url('../img/belka_right.png') bottom no-repeat;
  z-index:555;
  content: "";
}

.daily_box {
    padding: 12px 8px;
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .8) calc(100% - 50px), transparent 50px);

    height: auto;

    letter-spacing: 0.5px;
    margin-bottom: 10px;
}

.daily_box .name {
    font-size: 18px;
	color: #e6d88b;
}

.daily_box .item,
.daily_box .desc,
.daily_box .action {
    display: block;
    float: left;
}

.daily_box .item {
    width: 100px;
}

.daily_box .desc {
    width: calc(100% - 100px - 125px);
    text-align: left;
}

.daily_box .desc p {
    margin-bottom: 0;
}

.daily_box .action {
    position: relative;
    z-index: 1000;

    width: 125px;
    text-align: center;
}

.daily_box .separate {
    border-bottom: 1px solid gray;

    margin-top: 5px;
    margin-bottom: 5px;
}

footer {
    background-color: black;

    padding-bottom: 85px;
}

.bg-second {
    background-color: #17161c;
}

.rounded {
    border-radius: 5px;
}

.footer-sep {
    border-top: 1px solid #3a393e;
    
    margin-top: 10px;
    margin-bottom: 10px;
}

.text-white {
    color: white;
}

.text-light-brown {
    color: #9a9578;
}

footer h2,
footer h3 {
    color: #aea797;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.horizontal-separator {
    border-bottom: 1px solid #2f2f2f;
}

.vertical-separator {
    border-right: 1px solid #2f2f2f;
}

#questLogContainer {
    background-image: url('./../img/battle/bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    min-height: 300px;
    padding: 15px;
}

#questLogContainer .box {
    background-color: #000;
    color: white;

    border: 1px solid #796d42;
    border-radius: 10px;
}

#questLogContainer .box .title {
    background: url('../img/buttons/button-bg-4.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    margin: 0;

    padding: 15px;
}

#questLogContainer .box .desc {
    color: #b8b8b8;

    margin: 0;
    padding: 15px;
}

#questLogContainer .box a,
#questLogContainer .box a:link {
    color: #ae8550 !important;
}

#questLogContainer .box a:hover,
#questLogContainer .box a:focus {
    color: #cea570 !important;
}

#caveContainer {
    /* panel styles live on .cave-page + decor */
    min-height: 600px;
}

#caveContainer .long-break {
    background-color: rgba(0, 0, 0, .8);
    margin-top: 100px;
}

#caveContainer .restText {
    color: #2f2f2f;
}

.inputBordered {
    border: 1px solid #d2c195 !important;
}

/* BATTLE RULES */
#battleWindow
{
    position: fixed;
    
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 99999;

    background-color: black;
}

#battleWindow .attack-mob {
	color:#ccbf92;
}

#battleWindow .attack-howmuch {
	color:#ff0000;
}

#battleWindow > .content {
    margin-left: auto;
    margin-right: auto;

    overflow: auto;
    height: calc(100% - 30px);

	width: 998px;
    margin-top: 15px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color: #000000!important;
	border: 1px solid #2d2e2e;
	z-index: 1;
}

#battleWindow > .content > .window {
	position:relative;
	z-index: 0;
	width:100%;
    min-height:640px;
	margin-left:auto;
	margin-right:auto;
	background:#000000 url('./../img/battle/bg.jpg') top center no-repeat;
	color:#fff;
	font-family:Tahoma;
	font-size:11px;
}

#battleWindow > .content > .window > .top {
    position:relative;
    float:left;
    width:100%;
	min-height:80px;
    background:#070a11 url('./../img/battle/top_pve.jpg') bottom center no-repeat;
    
    padding-top: 15px;
}

#battleWindow > .content > .window > .top > ul.team1 {
    position:relative;
    float:left;
	list-style: none;
	width:auto;
	color:#838383;
	text-align:left;
    margin-left:10px;
    margin-right: 10px;
	margin-bottom:10px;
}

#battleWindow > .content > .window > .top > ul.team2 {
    position:relative;
    float:left;
	list-style: none;
	width:auto;
	color:#838383;
	text-align:left;
	margin-left:10px;
    margin-bottom:10px;
    padding-left: 0;
}

#battleWindow > .content > .window > .top > ul.team1 li,
#battleWindow > .content > .window > .top > ul.team2 li {
	width: auto;
	padding-top:5px;
	min-height:95px;
	line-height:30px;
	position: relative;
	float:left;
	display: inline-block;
	line-height:30px;
	z-index:9999999;
	color:#fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	background: rgb(0,0,0);
	background: rgba(0,0,0, .5);
	margin-top:8px;
}

#battleWindow > .content > .window > .top .vs {
    position:relative;
    float:left;

	margin-left:10px;
	margin-right:10px;
    margin-top:20px;

	width:56px;
    height:72px;
    
	background: url('./../img/battle/vs.png') top center no-repeat;
}

#battleWindow > .content > .window > .top .user {
	position:relative;
	float:left;
	width:290px;
	padding:5px;
}

#battleWindow > .content > .window > .top .user > .avatar {
	position:relative;
	float:left;
	width:75px;
	height:75px;
	padding-left:5px;
}

#battleWindow > .content > .window > .top .user > .avatar img {
	width:75px;
	height:75px;
}

#battleWindow > .content > .window > .top .user > .name {
	position:relative;
	float:left;
	width:175px;
    padding-left:10px;
    font-size: 14px;
}

#battleWindow > .content > .window > .top .user > .name a {
	color:#fff;
    text-decoration: none;
}

#battleWindow > .content > .window > .top .name > .lvl {
    display: inline-block;

    margin-left: 5px;
    
    font-size: 10px !important;
    font-weight: 400;

    color: #898989;
}

#battleWindow > .content > .window > .top > .body {
    clear:right;
	overflow:auto;
	margin:10px;
	margin-left:auto;
	margin-right:auto;
	width:100%;
	text-align:center;
	font-family:Tahoma;
	font-size:11px;
}

div#walka-tryb {
	position:absolute;
	top:5px;
	left:690px;
	line-height:33px;
	font-weight:bold;
	width:140px;
	text-align:center;
	font-size:11px;
	font-family:Tahoma;
	height:33px;
	color:#ff0000;
	text-decoration:none;
}

div#walka-kogotura {
	position:absolute;
	top:45px;
	left:690px;
	line-height:30px;
	min-width:128px;
	text-align:center;
	font-size:11px;
	font-family:Tahoma;
	height:30px;
	color:#fff;
	padding-left:5px;
	padding-right:5px;
	text-decoration:none;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	background: rgb(0,0,0);
	background: rgba(0,0,0,.7);
}

#battleWindow .closeButton {
	position:absolute;
	top:25px;
	right:5px;
	line-height:33px;
	width:128px;
	text-align:center;
	font-size:11px;
	font-family:Tahoma;
	height:33px;
	color:#fff;
	text-decoration:none;
	background:url('./../img/battle/close_button.png') top center no-repeat;
}

#battleWindow > .content > .window > .top .bars {
	position:relative;
	float:left;
	width:185px;
	padding-left:10px;
	line-height:20px;
}

#battleWindow > .content > .window > .top .hp {
	position:relative;
	height:14px;
	max-width:175px;
	background: rgb(0,0,0);
	background: rgba(0,0,0, .8);
	text-align:left;
	font-size:11px;
	font-family:Tahoma;
	font-weight:normal;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:3px;
}

#battleWindow > .content > .window > .top .hp span {
	position:absolute;
	right:10px;
	top:-4px;
	text-align:center;
	z-index:1;
	font-size:10px;
	color:#fff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#battleWindow > .content > .window > .top .hp strong {
	position:absolute;
	font-weight:normal;
	font-size:11px;
	left:10px;
	top:-4px;
	text-align:center;
	z-index:1;
	font-size:10px;
	color:#fff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#battleWindow > .content > .window > .top .reiatsu {
	position:relative;
	height:14px;
	max-width:175px;
	background: rgb(0,0,0);
	background: rgba(0,0,0, .8);
	text-align:left;
	font-size:11px;
	font-family:Tahoma;
	font-weight:normal;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	margin-bottom:3px;
}

#battleWindow > .content > .window > .top .reiatsu span {
	position:absolute;
	right:10px;
	top:-4px;
	text-align:center;
	z-index:1;
	font-size:10px;
	color:#fff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#battleWindow > .content > .window > .top .reiatsu strong {
	position:absolute;
	font-weight:normal;
	font-size:11px;
	left:10px;
	top:-4px;
	text-align:center;
	z-index:1;
	font-size:10px;
	color:#fff;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 1);
}

#battleWindow > .content > .window > .top progress[value] {
	appearance: none;
	border: none;
	width: 99%; height: 14px;
	background-color:#000;
	position: relative;
	margin: 0 0 1.5em; 
	  border-radius: 5px;
}

#battleWindow > .content > .window > .top progress[value]::-webkit-progress-bar {
	background-color: #000;
	border-radius: 5px;
	height:14px;
	margin:1px;
}

#battleWindow > .content > .window > .top .hpbar::-webkit-progress-value {
	background-image:
	-webkit-linear-gradient( 135deg,
                            transparent,
                            transparent 33%,
                            rgba(0,0,0,.1) 33%,
                            rgba(0,0,0,.1) 66%,
                            transparent 66%),
    -webkit-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
    -webkit-linear-gradient( left, #000, #f44);
	border-radius: 5px;
}

#battleWindow > .content > .window > .top .hpbar::-moz-progress-bar {
	background-image:
	-moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                        rgba(255, 255, 255, .25),
                        rgba(0,0,0,.2)),
    -moz-linear-gradient( left, #000, #f44);
	border-radius: 5px;
}

#battleWindow > .content > .window > .top .reiatsubar::-webkit-progress-value {
	background-image:
	-webkit-linear-gradient( 135deg,
                            transparent,
                            transparent 33%,
                            rgba(0,0,0,.1) 33%,
                            rgba(0,0,0,.1) 66%,
                            transparent 66%),
    -webkit-linear-gradient( top,
                            rgba(255, 255, 255, .25),
                            rgba(0,0,0,.2)),
    -webkit-linear-gradient( left, #000, #10307e);
	border-radius: 5px;
}

#battleWindow > .content > .window > .top .reiatsubar::-moz-progress-bar {
	/* Gradient background with Stripes */
	background-image:
	-moz-linear-gradient( 135deg,
                        transparent,
                        transparent 33%,
                        rgba(0,0,0,.1) 33%,
                        rgba(0,0,0,.1) 66%,
                        transparent 66%),
    -moz-linear-gradient( top,
                        rgba(255, 255, 255, .25),
                        rgba(0,0,0,.2)),
    -moz-linear-gradient( left, #000, #10307e);
	border-radius: 5px;
}

#battleWindow > .content > .window > .body .loot {
    position:relative;
    height:65px;
	margin-top:15px;
	padding-bottom:5px;
	text-align:center;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	border:1px solid #796d42;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

#battleWindow > .content > .window > .body .loot img {
	display:inline-block;
	padding:2px;
}

#battleWindow > .content > .window > .body ul {
	list-style: none;
	width:100%;
	color:#838383;
    text-align:left;
    padding-left: 0;
}

#battleWindow > .content > .window > .body ul li {
	padding-left:10px;
	min-height:30px;
	line-height:30px;
	position: relative;
	z-index:9999999;
	color:#fff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	background: rgb(41,41,41);
	background: rgba(41,41,41, .4);
	margin-top:8px;
}

#battleWindow > .content > .window > .body ul li.crit {
	border:1px solid #4c0000;
	background: rgb(60,0,0);
	background: rgba(60,0,00, .5)!important;
}

#battleWindow > .content > .window > .body ul li.crit2 {
	border:1px solid #4c0000;
	background: rgb(41,41,41);
	background: rgba(40,40,40, .1);
}

#battleWindow > .content > .window > .body ul li:nth-child(even) {
	background: rgb(41,41,41);
	background: rgba(40,40,40, .2);
}

#battleWindow > .content > .window > .body ul li.onDebuff {
	border:1px solid #4c0000;
	background: rgba(60,8,8, 0.2);
}

#battleWindow > .content > .window > .body ul li.onBuff {
	border:1px solid #004c00;
	background: rgba(8, 60, 8, 0.2);
}

#battleWindow > .content > .window > .body ul li img{
	margin-top:2px;
	margin-right:10px;
	width:25px;
	height:25px;
	position:relative;
	float:left;
}

div.walka-left2{
	position:relative;
	float:left;
	width:500px;
	font-weight:normal;
}

div.walka-right2{
	position:relative;
	float:right;
	width:250px;
	text-align:right;
	padding-right:10px;
}

div.walka-left{
	position:relative;
	float:left;
	width:100%;
	font-weight:normal;
}

div.walka-right{
	position:relative;
	float:right;
	width:100%;
	text-align:right;
	padding-right:10px;
}

#battleContentScroll {
    margin-left: auto;
    margin-right: auto;
    position:relative;
	margin-top:15px;
	width:840px;
	min-height:300px;
	color:#dedede;
	padding:10px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	border:1px solid #171717;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

#battleWindow > .content > .window > .body .result {
    position:relative;
	margin-top:15px;
	line-height:35px;
	padding-bottom:5px;
	text-align:center;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	border:1px solid #584f32;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

#walka-opcje {
	margin-left:auto;
	margin-right:auto;
	margin-top:25px;
	width:580px;
	height:140px;
	padding-top:10px;
	padding-left:10px;
	text-align:center;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	box-sizing: border-box;
	border:1px solid #796d42;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

#walka-timer {
    position:relative;
    float:right;
	width:140px;
	height:30px;
	line-height:30px;
	text-align:right;
	padding-right:2px;
}

#walka-submit {
    position:relative;
    float:left;
	width:120px;
	height:30px;
	line-height:30px;
	text-align:center;
	
}

div#walka-submit input[type=submit] {
	background-color:#0b0b0b;
	border: 1px solid #524930;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding:5px;
	margin-left:5px;
	width:115px;
	height:30px;
	font-weight:bold;
	color:#fff;
	font-size:11px;
}

div#walka-opcje-wybierz {
	position:relative;
	float:left;
	width:240px;
}

div#walka-opcje-wybierz img {
	margin-top:6px;
}

div#walka-content {
    position:relative;
    float:left;
    width:560px;
    padding-top:10px;
    margin-top:10px;
    border-top:1px solid #4b4226;
    text-align:left;
}

div#walka-tech-img {
    position:relative;
    float:left;
    width:66px;
}

div#walka-tech-txt {
    position:relative;
    float:left;
    width:480px;
    padding:5px;
    border-bottom:1px solid #4b4226;
    padding-bottom:10px;
}

strong#walka-tech-left {
	position:relative;
	float:left;
	font-weight:normal;
}

strong#walka-tech-left i {
	font-style:normal;
	font-weight:bold;
}

strong#walka-tech-right {
	position:relative;
	float:right;
	font-weight:normal;
	padding-right:5px;
}

#walka-tech-select {
	position:relative;
	float:left;
	width:180px;
	padding:6px;
}

#walka-opcje-form {
	position:relative;
	float:right;
	width:285px;
	padding-left:6px;
	padding-right:3px;
	padding-top:6px;
	height:30px;
	line-height:30px;
}

#walka-tech-filtr {
	position:relative;
	float:right;
	text-align:right;
	width:300px;
	padding-right:10px;
	height:30px;
	line-height:30px;
}

#walka-tech-filtr strong {
    display:inline;
    position:relative;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:15px;
	padding-right:15px;
	font-weight:normal;
	background-color:#000;
	cursor:pointer;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

#walka-tech-filtr strong.selected {
    display:inline;
	padding-top:8px;
	padding-bottom:8px;
	padding-left:15px;
	padding-right:15px;
	font-weight:normal;
	background-color:#000;
	border:1px solid #51431f;
	cursor:pointer;
	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
}

.debuff {
	color:#be2d2d;
}

.buff {
	color:#048009;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.news-card-header {
    height: 194.25px;
}

.news-card-header img {
    object-fit: cover;
    object-position: center;
}

.modal.modal-centered-v {
    text-align: center;
    padding: 0 !important;
}

.modal.modal-centered-v:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.modal-centered-v .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;

    width: 700px;
    max-width: 100%;
}

.modal .modal-dialog {
    margin-top: 15px !important;
    padding-right: 20px;
}

#activeTechSetModal .modal-content {
    border: solid 1px #d2c195;
}

#activeTechSetModal .container {
    width: 100%;
}

#activeTechSetModal .row {
    display: flex;
    align-items: center;
}

#activeTechSetModal .techbox {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 24px;
    line-height: normal;

    margin-right: 15px;
}

#activeTechSetModal .settings {
    margin-left: auto;
}

#activeTechSetModal [settech] {
    filter: grayscale(100%);
}

#activeTechSetModal .active[settech] {
    filter: grayscale(0%);
}

.modal-backdrop {
    background: black;
}

.modal-open {
    overflow: auto;
    padding-right: 0 !important;
}

.pb-50 {
    padding-bottom: 50px !important;
}

.pb-25 {
    padding-bottom: 25px !important;
}

.pt-50 {
    padding-top: 50px !important;
}

.pt-25 {
    padding-top: 25px !important;
}

.kanbg {
	background:rgba(0,0,0,0.5);
}

.kanbg:hover {
	background: rgba(0,8,80,0.5);
}

.bonaktywny {
	background: rgba(0,18,160,0.5);
}

.bonaktywny:hover {
	background: rgba(0,8,80,0.5);
}

.settings_bg {
    background-image: url('./../img/battle/bg.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    min-height: 300px;
    padding: 15px;
}

.roundedMark {
    border: 1px solid #292929;
    border-radius: 5px;
}

li.active a.nav-link {
    background-color: #000!important;
    border: 1px solid #6f604d!important;
    color: #6f604d;
}

select.ga-input option {
    background-color: #000;
    color: #fefefe;
}

select.ga-input option[disabled] {
    background-color: #414141;
    color: #999999;
    
    text-decoration: line-through;
}

/* OLD STYLES — item tooltip (ajax/item) jak w stylu klasycznym */
.item_ramkie{
	width:500px;
	min-height:200px;
	height:auto;
	padding:10px 10px 16px;
	font-family: 'PT Sans', Arial, sans-serif;
	font-size:11px;
	color:#fff;
	box-sizing: border-box;
	overflow: visible;
}
.item_ramkie:after{
	content:"";
	display:table;
	clear:both;
}
.item_ramkie-img{
	position:relative;
	float:left;
	width:180px;
	text-align:center;
}
.item_ramkie-img > img{
	display:block;
	margin:0 auto;
	max-width:160px !important;
	width:auto !important;
	height:auto !important;
}
.item_ramkie-info{
	position:relative;
	float:left;
	width:310px;
	padding-left:10px;
	padding-top:6px;
	box-sizing: border-box;
}
.item_ramkie-title{
	position:relative;
	float:left;
	width:300px;
	background: rgba(35, 35, 35, .5);
	border: 1px solid #3b3b3b;
	min-height:35px;
	height:auto;
	padding:5px 10px;
	border-radius: 5px;
	box-sizing: border-box;
}
.item_ramkie-title h1{
	margin:0 !important;
	padding:0 !important;
	font-weight:normal !important;
	font-size:14px !important;
	line-height:1.25 !important;
	color:#ffffff;
}
.item_ramkie-title .lvl{
	display:block;
	margin-top:2px;
	color:#9a9a9a;
	font-size:11px;
}
.item_ramkie-details{
	position:relative;
	float:left;
	width:310px;
	color:#ffffff;
}
.item_ramkie-details > img{
	display:block;
	margin:8px 0 4px;
	max-width:100% !important;
	height:auto !important;
}
.item_ramkie-details ul {
	padding:10px 0 0;
	margin:0;
	width:100%;
	max-width:320px;
	position:relative;
	list-style-type: none;
	color:#bdbdbd;
}
.item_ramkie-details ul li{
	list-style-type: none;
	min-height:20px;
	height:auto;
	margin:2px;
	padding:0 10px;
	line-height:20px;
	font-size:11px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .1);
}
.item_ramkie-details ul li.sloulbond{
	min-height:20px;
	margin:6px 2px 2px;
	padding:8px 10px;
	line-height:20px;
	text-align: center;
	color:#5f5fe2;
	font-weight:bold;
	font-size:14px;
	background: rgba(5, 5, 80, .35);
}
.item_ramkie-details ul li:nth-child(odd) {
	background: rgba(0, 0, 0, .5);
}
.item_ramkie-details ul li p{
	margin:0;
	padding:0;
}
.item_ramkie-details ul li .i-weapon-hint{
	color:#9fb2c8;
	font-size:11px;
}
.zanek-left{
	position:relative;
	float:left;
	width:180px;
	z-index:2;
}
.zanek-left img{
	position:relative;
	float:left;
	width:180px;
	height:180px;

}
.zanek-left-i{
	position:relative;
	float:left;
	width:150px;
	margin-left:11px;
	margin-top:5px;
	padding:5px;
	font-size:16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#8a8a8a;
	text-align:center;
}
small.light{
	font-size:11px;
}
.zanek-left-i strong{
	color:#cacaca;
}
.item-left-i{
	position:relative;
	float:left;
	width:150px;
	margin-left:11px;
	margin-top:0px;
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px;
	font-size:16px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	color:#8a8a8a;
	text-align:center;
}
.item-left-i strong{
	color:#cacaca;
}
.zanek-right{
	position:relative;
	float:left;
	width:320px;
	z-index:1;
}
.zanek-info{
	position:relative;
	float:left;
	width:300px;
	left:-10px;
	margin-top:8px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:10px;
	padding-top:10px;
	background: rgb(35, 35, 35);
    background: rgba(35, 35, 35, .5);
	border: 1px solid #3b3b3b;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.zanek-details{
	position:relative;
	float:left;
	width:300px;
	color:#7f7f7f;
	padding-top:10px;
	padding-left:10px;
	padding-right:10px;
	text-align:center;
}
.zanek-title{
	position:relative;
	float:left;
	width:300px;
	padding-bottom:10px;
	
	border-bottom:1px solid #3f3f3f;
}
.zanek-staty {
	position:relative;
	float:left;
	width:300px;
}
.zanek-staty ul {
padding-top:10px;
	width:300px;
position:relative;
list-style-type: none;
color:#bdbdbd;
}
.zanek-statyul li{
	list-style-type: none;
	height:15px;
	margin:2px;
padding-left:10px;
	line-height:15px;
	font-size:11px;
}
.zanek-komenda{
	position:relative;
	float:left;

   margin-top:10px;
   text-align:center;
   color:#aaaaaa;
   width:480px;
   padding-left:10px;
   padding-right:10px;
   padding-bottom:5px;
   padding-top:10px;
	border-top:1px solid #3f3f3f;
}

.text-brown {
    color: #dcb96e !important;
}

.cave_counter {
    position: relative;
    display: inline-block;

    width: calc(100% - 120px);
    height: 35px;

    border-radius: 5px;

    background-color: black;
    border: 1px solid #424132;
}

.cave_counter .progress {
    position: absolute;
    background-color: #003956;

    left: 2px;
    top: 2px;

    max-width: calc(100% - 4px);
    width: calc(100% - 4px);
    height: calc(100% - 4px);
}

.cave_counter .text {
    position: absolute;
    top: 10px;
    right: 15px;
}

.cave_counter .text .timer {
    color: #decb01;
}

.cave_counter .text .stats {
    color: #3bd202;
}

/* END OLD CONTENTS */

/****************/

@media(max-width: 1199px)
{
    .sep + .sep:before {
        background:none;
        height: 0;
    }

    .caret {
        color: #cfcfcf;
    }

    .navbar .icomenu:not(.mobile-ico) {
        display: none;
    }

    .mobile-ico.icomenu {
        display: inline-block;
        float: none;
    }

    .mobile-button {
        display: block;
        width: 100%;
    
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .mobile-button-inside {
        display: block;
        width: 100%;

        border: 1px solid #0c486b !important;
        border-radius: 5px !important;

        color: #2680b4 !important;

        padding: 8px 12px !important;
        margin-bottom: 2px !important;

        background-color: rgba(0, 0, 0, .6);
    }

    .mobile-button-inside img {
        display: none;
    }

    .navbar-nav .dropdown-menu {
        padding: 0;
    }

    .dropdown-menu > li {
        height: auto !important;

        padding-left: 15px;
        padding-right: 5px;
    }

    .dropdown-menu > li .mobile-button-inside {
        margin-right: 0;
    }
    
    .mobile-button-inside > i {
        font-size: 20px;
        margin-right: 6px;

        color: white;
    }
    
    .mobile-button-inside .icon-bar {
        margin-left: auto;
        margin-right: auto;
    }

    .mobile-button-inside:hover,
    .mobile-button-inside:focus {
        background-color: rgba(14, 69, 121, 0.6) !important;
    }

    .navbar-nav {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .mobile_look {
        display: block !important;
    }

    .mobile_look.collapse:not(.in) {
        display: none !important;
    }

    /* Ukryj logotyp na mobile */
    .mobile-logo {
        display: none !important;
    }

    .mobile-header-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        padding: 0 4px 0 0;
    }

    .mobile-header-bar #actual_char,
    .mobile-header-bar .actual_char {
        float: none !important;
        flex: 1 1 auto;
        min-width: 0;
        margin-left: 8px !important;
    }

    .mobile-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
        flex: 0 0 auto;
        float: none;
        margin-left: auto;
    }

    .mobile-header-actions a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        float: none !important;
        margin: 0 !important;
        padding: 0;
        line-height: 0;
    }

    .mobile-header-actions img {
        display: block;
    }

    .mobile-header-actions .mobile-player-stat img {
        width: 80px;
        height: 46px;
        max-height: 46px;
    }

    .mobile-header-actions .mobile-relog img {
        width: 25px;
        height: 25px;
        max-height: 25px;
    }

    .mobile-header-bar > .clear {
        display: none;
    }

    .mobile-header-panel {
        width: 100%;
        clear: both;
        float: none !important;
    }

    .mobile-header-panel-inner {
        padding: 8px 10px 10px;
    }

    .mobile-stats-bars .progress {
        display: block !important;
        width: 100% !important;
        height: 22px;
        margin: 0 0 6px !important;
        overflow: hidden;
        border-radius: 3px;
    }

    .mobile-stats-bars .progress:last-child {
        margin-bottom: 0 !important;
    }

    .mobile-stats-bars .progress-bar-text {
        left: 8px;
        right: 8px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        font-size: 11px;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        pointer-events: none;
    }

    .mobile-stats-currency {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px 16px;
        text-align: center;
    }

    .mobile-stats-currency .gold_container,
    .mobile-stats-currency .kan_container,
    .mobile-stats-currency .redkan_container {
        display: inline-flex;
        align-items: center;
        padding-bottom: 0;
        clear: none;
        margin: 0;
    }

    .mobile-stats-skills {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px 8px;
        text-align: center;
    }

    .mobile-stats-skills .zdolki_top {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 2px;
        width: 100%;
        margin: 0;
        font-size: 11px;
        line-height: 1.2;
    }

    .mobile-stats-skills .zdolki_top .nl {
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .no_mobile {
        display: none !important;
    }

    .navbar, .navbar.navbar-default {
        border-bottom: 0;
    }
    
    .navbar-header {
        float: none;
    }

    .navbar-nav {
        padding-left: 10px;
        padding-right: 10px;

        background-color: transparent;
    }

    .navbar-toggle {
        display: block;
        margin: 0;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-nav {
        float: none !important;
        margin: 7.5px -15px;
    }

    .navbar-nav>li {
        float: none;
    }

    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    
    .navbar-collapse.collapse.in { 
        display: block !important;
    }

    .collapsing {
        overflow: hidden !important;
    }

    .zdolki_top {
        font-size: 9px;
        margin-right: 4px;
    }

    .gold_container,
    .kan_container,
    .redkan_container {
        padding-bottom: 0;
    }

    .daily_box .name {
        font-size: 14px;
    }

    .news-card-header {
        height: 159.25px;
    }

    .modal.modal-centered-v:before {
        content: '';
        display: inline-block;
        height: auto;
        vertical-align: middle;
        margin-right: -4px;
    }

    /* ===== Mobile game menu hub ===== */
    body.ga-mnav-open {
        overflow: hidden !important;
        overscroll-behavior: none;
    }

    .ga-desktop-nav {
        display: none !important;
    }

    .ga-mnav-toggle {
        display: block;
        width: 100%;
        margin: 6px 0 4px;
        padding: 0 10px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .ga-mnav-toggle-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 0 16px;
        border: 1px solid rgba(188, 153, 46, .55);
        border-radius: 10px;
        background:
            linear-gradient(180deg, rgba(44, 32, 9, .85), rgba(8, 7, 5, .95)),
            radial-gradient(120% 80% at 50% 0%, rgba(212, 178, 74, .14), transparent 55%);
        box-shadow:
            inset 0 1px 0 rgba(255, 230, 160, .14),
            0 6px 18px rgba(0, 0, 0, .5);
        color: #ead477;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: none;
        transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
    }

    .ga-mnav-toggle:active .ga-mnav-toggle-inner,
    body.ga-mnav-open .ga-mnav-toggle-inner {
        transform: scale(.98);
        border-color: rgba(213, 180, 64, .85);
        color: #fff2a6;
        box-shadow:
            inset 0 1px 0 rgba(255, 230, 160, .22),
            0 0 0 1px rgba(213, 180, 64, .28),
            0 8px 22px rgba(0, 0, 0, .55);
    }

    .ga-mnav-burger {
        position: relative;
        width: 18px;
        height: 14px;
        flex: 0 0 auto;
    }

    .ga-mnav-burger i {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform .28s ease, opacity .2s ease, top .28s ease;
    }

    .ga-mnav-burger i:nth-child(1) { top: 0; }
    .ga-mnav-burger i:nth-child(2) { top: 6px; }
    .ga-mnav-burger i:nth-child(3) { top: 12px; }

    body.ga-mnav-open .ga-mnav-burger i:nth-child(1) {
        top: 6px;
        transform: rotate(45deg);
    }
    body.ga-mnav-open .ga-mnav-burger i:nth-child(2) {
        opacity: 0;
    }
    body.ga-mnav-open .ga-mnav-burger i:nth-child(3) {
        top: 6px;
        transform: rotate(-45deg);
    }

    #navbar9.ga-mnav-collapse.collapse.in,
    #navbar9.ga-mnav-collapse.collapsing {
        display: block !important;
        position: fixed !important;
        inset: 0;
        z-index: 10050;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        height: 100% !important;
        max-height: none !important;
        overflow: hidden !important;
    }

    #navbar9.ga-mnav-collapse.collapsing {
        transition: opacity .22s ease;
        opacity: 0;
    }

    #navbar9.ga-mnav-collapse.collapse.in {
        opacity: 1;
    }

    .ga-mnav {
        position: absolute;
        inset: 0;
        display: flex !important;
        align-items: stretch;
        justify-content: center;
        pointer-events: none;
    }

    .ga-mnav-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        pointer-events: auto;
        background:
            radial-gradient(90% 55% at 50% 0%, rgba(120, 90, 20, .28), transparent 55%),
            rgba(0, 0, 0, .78);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
        animation: gaMnavFade .28s ease both;
    }

    .ga-mnav-sheet {
        position: relative;
        z-index: 1;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        width: min(100%, 440px);
        height: 100%;
        max-height: 100%;
        margin: 0 auto;
        font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        background:
            linear-gradient(180deg, rgba(12, 11, 8, .98), rgba(4, 5, 6, .99)),
            repeating-linear-gradient(
                -12deg,
                transparent,
                transparent 11px,
                rgba(188, 153, 46, .035) 11px,
                rgba(188, 153, 46, .035) 12px
            );
        border-left: 1px solid rgba(188, 153, 46, .4);
        border-right: 1px solid rgba(188, 153, 46, .4);
        box-shadow: 0 0 40px rgba(0, 0, 0, .65);
        animation: gaMnavSheetIn .38s cubic-bezier(.2, .9, .2, 1) both;
    }

    .ga-mnav-head {
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 14px 12px;
        border-bottom: 1px solid rgba(188, 153, 46, .4);
        background: linear-gradient(180deg, rgba(44, 32, 9, .65), rgba(8, 7, 5, .15));
        flex: 0 0 auto;
    }

    .ga-mnav-head-glow {
        position: absolute;
        left: 10%;
        right: 10%;
        top: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, rgba(237, 214, 116, .7), rgba(188, 153, 46, .45), transparent);
        pointer-events: none;
    }

    .ga-mnav-head-text {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .ga-mnav-kicker {
        font-size: 10px;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: #9299a7;
    }

    .ga-mnav-title {
        font-size: 16px;
        line-height: 1.2;
        color: #eed674;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ga-mnav-lvl {
        font-size: 11px;
        color: #c7ca95;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .ga-mnav-close {
        flex: 0 0 auto;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid rgba(188, 153, 46, .5);
        background: rgba(0, 0, 0, .45);
        color: #ead477;
        font-size: 28px;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform .15s ease, background .2s ease, color .2s ease;
    }

    .ga-mnav-close:active {
        transform: scale(.92);
        background: rgba(44, 32, 9, .75);
        color: #fff2a6;
    }

    .ga-mnav-scroll {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 12px 12px 8px;
    }

    .ga-mnav-section {
        margin-bottom: 14px;
    }

    .ga-mnav-section-label {
        margin: 0 0 8px 4px;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .16em;
        text-transform: uppercase;
        color: #9299a7;
    }

    .ga-mnav-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
    }

    .ga-mnav-tile {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 78px;
        padding: 10px 4px 8px;
        text-decoration: none !important;
        border-radius: 12px;
        border: 1px solid rgba(112, 92, 34, .7);
        background:
            linear-gradient(165deg, rgba(28, 22, 10, .95), rgba(8, 7, 5, .98));
        box-shadow:
            inset 0 1px 0 rgba(237, 214, 116, .1),
            0 4px 12px rgba(0, 0, 0, .4);
        color: #ead477 !important;
        transition: transform .14s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
        animation: gaMnavTileIn .42s ease both;
    }

    .ga-mnav-tile:nth-child(1) { animation-delay: .02s; }
    .ga-mnav-tile:nth-child(2) { animation-delay: .05s; }
    .ga-mnav-tile:nth-child(3) { animation-delay: .08s; }
    .ga-mnav-tile:nth-child(4) { animation-delay: .11s; }
    .ga-mnav-tile:nth-child(5) { animation-delay: .14s; }
    .ga-mnav-tile:nth-child(6) { animation-delay: .17s; }
    .ga-mnav-tile:nth-child(7) { animation-delay: .2s; }
    .ga-mnav-tile:nth-child(8) { animation-delay: .23s; }
    .ga-mnav-tile:nth-child(9) { animation-delay: .26s; }

    .ga-mnav-tile:active,
    .ga-mnav-tile.is-pressed {
        transform: scale(.94);
        border-color: rgba(213, 180, 64, .85);
        box-shadow:
            inset 0 0 0 1px rgba(213, 180, 64, .28),
            0 2px 8px rgba(0, 0, 0, .45);
    }

    .ga-mnav-tile.is-active {
        border-color: rgba(213, 180, 64, .9);
        background:
            linear-gradient(165deg, rgba(56, 44, 12, .98), rgba(14, 12, 6, .98));
        color: #fff2a6 !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 242, 166, .18),
            0 0 14px rgba(188, 153, 46, .18);
    }

    .ga-mnav-tile--accent {
        border-color: rgba(213, 180, 64, .75);
        background:
            linear-gradient(165deg, rgba(52, 40, 12, .98), rgba(12, 10, 5, .98));
        color: #eed674 !important;
    }

    .ga-mnav-tile--admin {
        border-color: rgba(180, 80, 80, .55);
        color: #df9188 !important;
    }

    .ga-mnav-tile-ico {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        font-size: 18px;
        color: #eed674;
        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
    }

    .ga-mnav-tile-ico img {
        max-width: 28px;
        max-height: 28px;
        width: auto;
        height: auto;
        display: block;
    }

    .ga-mnav-tile-label {
        display: block;
        width: 100%;
        padding: 0 2px;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: .02em;
        text-align: center;
        text-transform: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ga-mnav-acc {
        margin-bottom: 8px;
        border-radius: 12px;
        border: 1px solid rgba(112, 92, 34, .65);
        background: rgba(6, 6, 5, .85);
        overflow: hidden;
        transition: border-color .2s ease, box-shadow .2s ease;
    }

    .ga-mnav-acc.is-open {
        border-color: rgba(213, 180, 64, .7);
        box-shadow: 0 0 0 1px rgba(188, 153, 46, .15);
    }

    .ga-mnav-acc-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px;
        padding: 10px 12px;
        border: 0;
        background: transparent;
        color: #ead477;
        text-align: left;
        transition: background .2s ease;
    }

    .ga-mnav-acc-btn:active {
        background: rgba(44, 32, 9, .45);
    }

    .ga-mnav-acc-ico {
        width: 28px;
        height: 28px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(180deg, #2c2009, #130f05);
        border: 1px solid #705c22;
        color: #eed674;
        flex: 0 0 auto;
    }

    .ga-mnav-acc-label {
        flex: 1 1 auto;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: none;
    }

    .ga-mnav-acc-chev {
        width: 10px;
        height: 10px;
        border-right: 2px solid #b29431;
        border-bottom: 2px solid #b29431;
        transform: rotate(45deg);
        transition: transform .25s ease;
        flex: 0 0 auto;
        margin-top: -4px;
    }

    .ga-mnav-acc.is-open .ga-mnav-acc-chev {
        transform: rotate(225deg);
        margin-top: 4px;
        border-color: #eed674;
    }

    .ga-mnav-acc-panel {
        max-height: 0;
        overflow: hidden;
        transition: max-height .32s ease;
    }

    .ga-mnav-acc.is-open .ga-mnav-acc-panel {
        max-height: 720px;
    }

    .ga-mnav-subgrid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 0 10px 10px;
    }

    .ga-mnav-subgrid a {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 8px 10px;
        border-radius: 9px;
        border: 1px solid rgba(112, 92, 34, .55);
        background: rgba(10, 10, 8, .9);
        color: #d9c875 !important;
        text-decoration: none !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        transition: transform .12s ease, border-color .2s ease, background .2s ease;
    }

    .ga-mnav-subgrid a i {
        width: 16px;
        text-align: center;
        color: #c7ca95;
        flex: 0 0 auto;
    }

    .ga-mnav-subgrid a span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ga-mnav-subgrid a:active,
    .ga-mnav-subgrid a.is-active {
        transform: scale(.97);
        border-color: rgba(213, 180, 64, .75);
        background: rgba(44, 32, 9, .85);
        color: #fff2a6 !important;
    }

    .ga-mnav-subgrid a.is-active i {
        color: #eed674;
    }

    .ga-mnav-foot {
        flex: 0 0 auto;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid rgba(188, 153, 46, .35);
        background: rgba(0, 0, 0, .45);
    }

    .ga-mnav-logout {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        min-height: 46px;
        border-radius: 11px;
        border: 1px solid rgba(160, 70, 70, .55);
        background: linear-gradient(180deg, rgba(70, 24, 24, .75), rgba(28, 8, 8, .9));
        color: #f0b4a8 !important;
        text-decoration: none !important;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: none;
        transition: transform .14s ease, filter .2s ease;
    }

    .ga-mnav-logout:active {
        transform: scale(.97);
        filter: brightness(1.1);
    }

    @keyframes gaMnavFade {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes gaMnavSheetIn {
        from {
            opacity: 0;
            transform: translateY(18px) scale(.98);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @keyframes gaMnavTileIn {
        from {
            opacity: 0;
            transform: translateY(10px) scale(.96);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }

    @media (max-width: 360px) {
        .ga-mnav-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .ga-mnav-tile {
            min-height: 72px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ga-mnav-backdrop,
        .ga-mnav-sheet,
        .ga-mnav-tile,
        .ga-mnav-burger i,
        .ga-mnav-acc-panel,
        .ga-mnav-acc-chev {
            animation: none !important;
            transition: none !important;
        }
    }
}

@media (max-width: 991px) {
    .news-card-header {
        height: 120.75px;
    }
}

@media(max-width: 800px)
{
    .bottomContent {
        position: static;
    }

    .loginBox .logo {
        display: block;
        position: static;

        max-width: 200px;

        padding-top: 15px;
        margin-left: auto;
        margin-right: auto;
    }

    .align-items-center {
        display: block;
    }

    .ga-button {
        margin-top: 15px;
        margin-bottom: 15px;
        
        display: inline-block;
    }
}

@media(max-width: 767px)
{
    .news-card-header {
        height: auto;
    }

    #activeTechSetModal .modal-dialog {
        padding-right: 20px;
    }

    #activeTechSetModal .row {
        display: block;
    }
    
    #activeTechSetModal .techbox {
        display: inline-block;
    
        font-size: 24px;
        line-height: normal;
    
        margin-right: 15px;
    }

    #activeTechSetModal .techbox img {
        height: 70px;
    }
}



/* ===== Shared page shells (header width + decor belki) ===== */
.lasnoches-page > .container,
.cave-shell > .container,
.home-page > .container,
.shop-page > .container,
.shinoi-page > .container,
.outfit-page > .container,
.auctions-shell > .container,
.eq-page-wrap > .container,
.deposit-page-wrap > .container,
.development-page-wrap > .container,
.questlog-page-wrap > .container,
.matsumura-page-wrap > .container,
.spp-page-wrap > .container,
.achievements-page-wrap > .container,
.fande-page-wrap > .container,
.settings-page-wrap > .container,
.kan-page-wrap > .container,
.kin-page-wrap > .container,
.rank-page-wrap > .container,
.announcements-page-wrap > .container,
.forum-page-wrap > .container,
.wiki-page-wrap > .container,
.messages-page-wrap > .container,
.transfer-page-wrap > .container {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.ln-page.decor.decor-new,
.lnb-page.decor.decor-new,
.cave-page.decor.decor-new,
.home_bg.decor.decor-new,
.shop_bg.decor.decor-new,
.shinoi_bg.decor.decor-new,
.outfit_bg.decor.decor-new,
.auctions-page.decor.decor-new,
.auction-sell-page.decor.decor-new,
.eq-shell.decor.decor-new,
.deposit-shell.decor.decor-new,
.development-shell.decor.decor-new,
.questlog-shell.decor.decor-new,
.matsumura-shell.decor.decor-new,
.spp-shell.decor.decor-new,
.achievements-shell.decor.decor-new,
.fande-shell.decor.decor-new,
.settings-shell.decor.decor-new,
.kan-shell.decor.decor-new,
.kin-shell.decor.decor-new,
.rank-shell.decor.decor-new,
.announcements-shell.decor.decor-new,
.forum-shell.decor.decor-new,
.wiki-shell.decor.decor-new,
.messages-shell.decor.decor-new,
.transfer-shell.decor.decor-new {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
}
.ln-page.decor.decor-new { padding: 25px; }
.lnb-page.decor.decor-new { padding: 18px; }
.cave-page.decor.decor-new { padding: 26px; }
.home_bg.decor.decor-new { padding: 22px 20px 28px; }
.shop_bg.decor.decor-new { padding: 12px 12px 20px; }
.shinoi_bg.decor.decor-new { padding: 16px 16px 28px; }
.outfit_bg.decor.decor-new { padding: 16px 14px 24px; }
.auctions-page.decor.decor-new,
.auction-sell-page.decor.decor-new { padding: 18px !important; }
.eq-shell.decor.decor-new,
.deposit-shell.decor.decor-new {
    padding: 0;
    background-color: rgba(0, 0, 0, .9) !important;
    background-image: url('../img/belka_bg.png') !important;
    background-position: center bottom -5px !important;
    background-repeat: repeat-x !important;
}
.development-shell.decor.decor-new {
    padding: 28px 32px 40px !important;
    background-color: rgba(0, 0, 0, .9) !important;
    background-image: url('../img/belka_bg.png') !important;
    background-position: center bottom -5px !important;
    background-repeat: repeat-x !important;
}
.questlog-shell.decor.decor-new {
    padding: 24px 28px 36px !important;
    background-color: #000 !important;
    background-image:
        url('../img/belka_bg.png'),
        linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.72) 45%, rgba(0,0,0,.78) 100%),
        linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%),
        url('../img/questlog_background.jpg') !important;
    background-position: center bottom -5px, center, center, center top !important;
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat !important;
    background-size: auto, auto, auto, cover !important;
}
.matsumura-shell.decor.decor-new,
.achievements-shell.decor.decor-new,
.fande-shell.decor.decor-new,
.settings-shell.decor.decor-new,
.kin-shell.decor.decor-new,
.rank-shell.decor.decor-new,
.announcements-shell.decor.decor-new,
.forum-shell.decor.decor-new,
.wiki-shell.decor.decor-new,
.messages-shell.decor.decor-new,
.transfer-shell.decor.decor-new {
    padding: 22px 26px 30px !important;
    background-color: rgba(0, 0, 0, .9) !important;
    background-image: url('../img/belka_bg.png') !important;
    background-position: center bottom -5px !important;
    background-repeat: repeat-x !important;
}
/* Kan: solid shell + belka (art as <img>, not background) */
.kan-shell.decor.decor-new {
    padding: 22px 26px 30px !important;
    background-color: rgba(0, 0, 0, .9) !important;
    background-image: url('../img/belka_bg.png') !important;
    background-position: center bottom -5px !important;
    background-repeat: repeat-x !important;
}
/* Matsumura: art bg stretched on shell, no letterbox stripes */
.matsumura-shell.decor.decor-new {
    background-color: #000 !important;
    background-image:
        linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.2) 40%, rgba(0,0,0,.15) 100%),
        linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 100%),
        url('../matsumura/bg.jpg') !important;
    background-position: center, center, center top !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-size: auto, auto, cover !important;
    min-height: 560px;
}
.matsumura-shell.decor.decor-new.matsumura-shell--charge {
    min-height: 520px;
}
/* SPP: art bg with opacity overlay + belka */
.spp-shell.decor.decor-new {
    padding: 22px 26px 30px !important;
    min-height: 620px;
    background-color: #05070c !important;
    background-image:
        url('../img/belka_bg.png'),
        linear-gradient(180deg, rgba(3,5,10,.35) 0%, rgba(2,4,8,.62) 55%, rgba(2,3,7,.88) 100%),
        radial-gradient(circle at 50% 32%, rgba(3,5,10,.15) 0%, rgba(3,5,10,.55) 70%, rgba(3,5,10,.82) 100%),
        url('../img/spp/bg.jpg') !important;
    background-position: center bottom -5px, center, center, center top !important;
    background-repeat: repeat-x, no-repeat, no-repeat, no-repeat !important;
    background-size: auto, auto, auto, cover !important;
}

.ln-page.decor.decor-new:before,
.lnb-page.decor.decor-new:before,
.cave-page.decor.decor-new:before,
.home_bg.decor.decor-new:before,
.shop_bg.decor.decor-new:before,
.shinoi_bg.decor.decor-new:before,
.outfit_bg.decor.decor-new:before,
.auctions-page.decor.decor-new:before,
.auction-sell-page.decor.decor-new:before,
.eq-shell.decor.decor-new:before,
.deposit-shell.decor.decor-new:before,
.development-shell.decor.decor-new:before,
.questlog-shell.decor.decor-new:before,
.matsumura-shell.decor.decor-new:before,
.spp-shell.decor.decor-new:before,
.achievements-shell.decor.decor-new:before,
.fande-shell.decor.decor-new:before,
.settings-shell.decor.decor-new:before,
.kan-shell.decor.decor-new:before,
.kin-shell.decor.decor-new:before,
.rank-shell.decor.decor-new:before,
.announcements-shell.decor.decor-new:before,
.forum-shell.decor.decor-new:before,
.wiki-shell.decor.decor-new:before,
.messages-shell.decor.decor-new:before,
.transfer-shell.decor.decor-new:before {
    display: block;
    position: absolute;
    left: -4px;
    bottom: -6px;
    width: 34px;
    height: 51px;
    background: url('../img/belka_left.png') bottom no-repeat;
    content: "";
    z-index: 5;
    pointer-events: none;
}
.ln-page.decor.decor-new:after,
.lnb-page.decor.decor-new:after,
.cave-page.decor.decor-new:after,
.home_bg.decor.decor-new:after,
.shop_bg.decor.decor-new:after,
.shinoi_bg.decor.decor-new:after,
.outfit_bg.decor.decor-new:after,
.auctions-page.decor.decor-new:after,
.auction-sell-page.decor.decor-new:after,
.eq-shell.decor.decor-new:after,
.deposit-shell.decor.decor-new:after,
.development-shell.decor.decor-new:after,
.questlog-shell.decor.decor-new:after,
.matsumura-shell.decor.decor-new:after,
.spp-shell.decor.decor-new:after,
.achievements-shell.decor.decor-new:after,
.fande-shell.decor.decor-new:after,
.settings-shell.decor.decor-new:after,
.kan-shell.decor.decor-new:after,
.kin-shell.decor.decor-new:after,
.rank-shell.decor.decor-new:after,
.announcements-shell.decor.decor-new:after,
.forum-shell.decor.decor-new:after,
.wiki-shell.decor.decor-new:after,
.messages-shell.decor.decor-new:after,
.transfer-shell.decor.decor-new:after {
    display: block;
    position: absolute;
    right: -3px;
    bottom: -6px;
    width: 34px;
    height: 51px;
    background: url('../img/belka_right.png') bottom no-repeat;
    content: "";
    z-index: 5;
    pointer-events: none;
}

@media (max-width: 767px) {
    .lasnoches-page > .container,
    .cave-shell > .container,
    .home-page > .container,
    .shop-page > .container,
    .shinoi-page > .container,
    .outfit-page > .container,
    .auctions-shell > .container,
    .eq-page-wrap > .container,
    .deposit-page-wrap > .container,
    .development-page-wrap > .container,
    .questlog-page-wrap > .container,
    .matsumura-page-wrap > .container,
    .spp-page-wrap > .container,
    .achievements-page-wrap > .container,
    .fande-page-wrap > .container,
    .settings-page-wrap > .container,
    .kan-page-wrap > .container,
    .kin-page-wrap > .container,
    .rank-page-wrap > .container,
    .announcements-page-wrap > .container,
    .forum-page-wrap > .container,
    .wiki-page-wrap > .container,
    .messages-page-wrap > .container,
    .transfer-page-wrap > .container {
        overflow: hidden;
    }
    .ln-page.decor.decor-new,
    .lnb-page.decor.decor-new,
    .cave-page.decor.decor-new,
    .home_bg.decor.decor-new,
    .shop_bg.decor.decor-new,
    .shinoi_bg.decor.decor-new,
    .outfit_bg.decor.decor-new,
    .auctions-page.decor.decor-new,
    .auction-sell-page.decor.decor-new,
    .eq-shell.decor.decor-new,
    .deposit-shell.decor.decor-new,
    .development-shell.decor.decor-new,
    .questlog-shell.decor.decor-new,
    .matsumura-shell.decor.decor-new,
    .spp-shell.decor.decor-new,
    .achievements-shell.decor.decor-new,
    .fande-shell.decor.decor-new,
    .settings-shell.decor.decor-new,
    .kan-shell.decor.decor-new,
    .kin-shell.decor.decor-new,
    .rank-shell.decor.decor-new,
    .announcements-shell.decor.decor-new,
    .forum-shell.decor.decor-new,
    .wiki-shell.decor.decor-new,
    .messages-shell.decor.decor-new,
    .transfer-shell.decor.decor-new {
        overflow: hidden;
    }
    .ln-page.decor.decor-new:before,
    .lnb-page.decor.decor-new:before,
    .cave-page.decor.decor-new:before,
    .home_bg.decor.decor-new:before,
    .shop_bg.decor.decor-new:before,
    .shinoi_bg.decor.decor-new:before,
    .outfit_bg.decor.decor-new:before,
    .auctions-page.decor.decor-new:before,
    .auction-sell-page.decor.decor-new:before,
    .eq-shell.decor.decor-new:before,
    .deposit-shell.decor.decor-new:before,
    .development-shell.decor.decor-new:before,
    .questlog-shell.decor.decor-new:before,
    .matsumura-shell.decor.decor-new:before,
    .spp-shell.decor.decor-new:before,
    .achievements-shell.decor.decor-new:before,
    .fande-shell.decor.decor-new:before,
    .settings-shell.decor.decor-new:before,
    .kan-shell.decor.decor-new:before,
    .kin-shell.decor.decor-new:before,
    .rank-shell.decor.decor-new:before,
    .announcements-shell.decor.decor-new:before,
    .forum-shell.decor.decor-new:before,
    .wiki-shell.decor.decor-new:before,
    .messages-shell.decor.decor-new:before,
    .transfer-shell.decor.decor-new:before {
        left: 0;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }
    .ln-page.decor.decor-new:after,
    .lnb-page.decor.decor-new:after,
    .cave-page.decor.decor-new:after,
    .home_bg.decor.decor-new:after,
    .shop_bg.decor.decor-new:after,
    .shinoi_bg.decor.decor-new:after,
    .outfit_bg.decor.decor-new:after,
    .auctions-page.decor.decor-new:after,
    .auction-sell-page.decor.decor-new:after,
    .eq-shell.decor.decor-new:after,
    .deposit-shell.decor.decor-new:after,
    .development-shell.decor.decor-new:after,
    .questlog-shell.decor.decor-new:after,
    .matsumura-shell.decor.decor-new:after,
    .spp-shell.decor.decor-new:after,
    .achievements-shell.decor.decor-new:after,
    .fande-shell.decor.decor-new:after,
    .settings-shell.decor.decor-new:after,
    .kan-shell.decor.decor-new:after,
    .kin-shell.decor.decor-new:after,
    .rank-shell.decor.decor-new:after,
    .announcements-shell.decor.decor-new:after,
    .forum-shell.decor.decor-new:after,
    .wiki-shell.decor.decor-new:after,
    .messages-shell.decor.decor-new:after,
    .transfer-shell.decor.decor-new:after {
        right: 0;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }
}

/* ===== ARENA — szerokość jak second-panel / trening (tło na dziecku .container) ===== */
.arena-page > .container {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.arena_bg,
.arena_bg.decor.decor-new {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    border-radius: 0 !important;
    border: 0;
    box-shadow: none;
    text-align: left;
    background-color: rgba(0, 0, 0, .9) !important;
    background-image: url('../img/belka_bg.png') !important;
    background-position: center bottom -5px;
    background-repeat: repeat-x;
    background-size: auto;
    padding: 0 0 24px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12px;
    min-height: 0;
}

.arena_bg.decor.decor-new:before {
    display: block;
    left: -4px;
    bottom: -6px;
}
.arena_bg.decor.decor-new:after {
    display: block;
    right: -3px;
    bottom: -6px;
}

@media (max-width: 767px) {
    .arena-page > .container {
        overflow: hidden;
    }
    .arena_bg.decor.decor-new {
        overflow: hidden;
    }
    .arena_bg.decor.decor-new:before {
        left: 0;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }
    .arena_bg.decor.decor-new:after {
        right: 0;
        bottom: -4px;
        width: 28px;
        height: 42px;
        background-size: contain;
    }
}

.arena-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: 16px;
    margin: 16px 16px 0;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.arena-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
    flex: 1 1 300px;
}

.arena-hero-avatar-frame {
    position: relative;
    width: 78px;
    height: 78px;
    min-width: 78px;
    padding: 3px;
    background: linear-gradient(135deg, #c7ca95, #6b5b2e);
    border-radius: 4px;
    box-shadow: 0 0 14px rgba(199,202,149,.25);
}

.arena-hero-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #111;
}

.arena-hero-info {
    flex: 1;
    min-width: 0;
}

.arena-hero-rod {
    font-size: 12px;
    margin: 0 0 2px;
}

.arena-hero-name {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.2;
    text-shadow: 0 1px 2px #000;
}

.arena-hero-lvl {
    font-size: 12px;
    margin-bottom: 4px;
    color: #ddd;
}

.arena-exp-label {
    font-size: 11px;
    opacity: .8;
    margin-bottom: 3px;
    color: #bbb;
}

.arena-exp-progress {
    height: 9px !important;
    margin-bottom: 0 !important;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(199,202,149,.2);
    border-radius: 3px;
    overflow: hidden;
    max-width: 220px;
}

.arena-exp-progress .progress-bar {
    background: linear-gradient(90deg, #0072b5, #00b4ff);
    box-shadow: 0 0 8px rgba(0,180,255,.6);
}

.arena-topbar-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 1 1 340px;
}

.arena-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    padding: 8px 6px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(199,202,149,.16);
    border-radius: 4px;
}

.arena-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #e8e8e8;
    line-height: 1.05;
    text-shadow: 0 1px 2px #000;
}

.arena-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8f8f8f;
    margin-top: 4px;
}

.arena-stat--win .arena-stat-value { color: #57c964; }
.arena-stat--lose .arena-stat-value { color: #ff6b6b; }
.arena-stat--draw .arena-stat-value { color: #c7ca95; }
.arena-stat--timer .arena-stat-value { color: #00b4ff; font-size: 18px; }

.arena-opponents {
    position: relative;
    z-index: 2;
    margin: 18px 16px 0;
}

.arena-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.arena-section-title {
    font-size: 15px;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    white-space: nowrap;
}

.arena-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(199,202,149,.5), transparent);
}

.arena-blocked-banner {
    text-align: center;
    color: #ffcf66;
    background: linear-gradient(180deg, rgba(120,20,20,.5), rgba(60,10,10,.5));
    border: 1px solid rgba(255,107,107,.45);
    padding: 10px 14px;
    border-radius: 4px;
    letter-spacing: .02em;
    font-size: 13px;
    margin-bottom: 16px;
}

.arena-grid {
    display: flex;
    flex-wrap: wrap;
    margin-left: -8px;
    margin-right: -8px;
}

.arena-grid > [class*="col-"] {
    display: flex;
    flex-direction: column;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 16px;
}

.arena-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1 1 auto;
    padding: 14px;
    background: linear-gradient(180deg, rgba(24,24,30,.95), rgba(12,12,16,.95));
    border: 1px solid rgba(199, 202, 149, .2);
    border-radius: 5px;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    animation: missionCardIn .45s ease both;
}

.arena-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #c7ca95, #6b5b2e);
    opacity: .55;
    border-radius: 5px 0 0 5px;
}

.arena-card:hover {
    transform: translateY(-3px);
    border-color: rgba(199, 202, 149, .55);
    box-shadow: 0 6px 20px rgba(0,0,0,.55), 0 0 14px rgba(199,202,149,.12);
}

.arena-card-inner {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
}

.arena-card-avatar {
    position: relative;
    display: block;
    width: 74px;
    min-width: 74px;
    height: 74px;
    overflow: hidden;
    border: 1px solid rgba(199,202,149,.35);
    border-radius: 4px;
    background: #111;
}

.arena-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .3s ease;
}

.arena-card:hover .arena-card-avatar img {
    transform: scale(1.07);
}

.arena-card-badge {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 20px;
    padding: 1px 5px;
    font-size: 11px;
    font-weight: 700;
    color: #1b1b1b;
    text-align: center;
    background: linear-gradient(180deg, #e7c86a, #b8922f);
    border-top-left-radius: 4px;
}

.arena-card-body {
    flex: 1;
    min-width: 0;
}

.arena-card-name {
    display: block;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    margin-bottom: 4px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arena-card-name:hover {
    color: #fffeab;
}

.arena-card-lvl {
    font-size: 12px;
    opacity: .85;
    margin-bottom: 8px;
    color: #ccc;
}

.arena-card-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    border-top: 1px solid rgba(199,202,149,.18);
    padding-top: 8px;
    color: #9a9a9a;
}

.arena-card-stats .win strong { color: #57c964; }
.arena-card-stats .lose strong { color: #ff6b6b; }
.arena-card-stats .draw strong { color: #c7ca95; }

.arena-card-action {
    margin-top: 14px;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.arena-cooldown {
    width: 100%;
    font-size: 12px;
    color: #c7ca95;
    letter-spacing: .02em;
    padding: 8px 4px;
    background: rgba(0,0,0,.3);
    border: 1px dashed rgba(199,202,149,.25);
    border-radius: 4px;
}

.arena-cooldown--blocked {
    color: #9a9a9a;
    border-style: solid;
    border-color: rgba(255,255,255,.1);
}

.arena-cooldown-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

.arena-cooldown-timer {
    font-weight: 700;
    font-size: 15px;
    display: inline-block;
    margin-top: 2px;
    color: #e8e8e8;
}

.arena-attack-wrap {
    display: flex;
    justify-content: center;
    width: 100%;
}

.arena-attack-btn {
    float: none !important;
    display: inline-block;
    cursor: pointer;
    transition: filter .2s ease, transform .1s ease;
}

.arena-attack-btn:hover {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(200,40,40,.6));
}

.arena-attack-btn:active {
    transform: translateY(1px);
}

.arena-battle-wrap {
    margin-top: 20px;
    margin-bottom: 30px;
    color: #fff;
}

.arena-battle-error {
    text-align: center;
    padding: 40px 20px;
    color: #ddd;
}

.arena-battle-error .red_button {
    float: none !important;
    display: inline-block;
    margin-top: 14px;
}

/* ===== Arena attack / duel shell ===== */
.arena-attack-page.main-raised {
    margin-top: 6px;
    width: 100%;
    float: none !important;
}
.arena-attack-page > .container {
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: visible;
}
.arena-attack-shell.arena_bg {
    position: relative;
    margin-bottom: 48px;
    padding: 0 !important;
    color: #dcd6cc;
    min-height: 0;
    /* Tylko X — Y musi rosnąć z pełnym logiem walki (po walce też widoczny) */
    overflow-x: hidden !important;
    overflow-y: visible !important;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
}
/* Belki w środku — shell ma overflow-x:hidden (intro/slash) */
.arena-attack-shell.arena_bg.decor.decor-new:before {
    left: 0;
}
.arena-attack-shell.arena_bg.decor.decor-new:after {
    right: 0;
}
/* Blokada poziomego scrollbara od animacji intro — pionowo strona rośnie z logiem */
html:has(.arena-attack-page),
body:has(.arena-attack-page) {
    overflow-x: hidden !important;
    max-width: 100vw;
}
.arena-attack-page.main-raised {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    max-width: 100%;
}
/* Podczas intro: clip slash/piorun; po usunięciu intro shell już nie tnie logu */
.arena-attack-page:has(.arena-duel-intro) .arena-attack-shell.arena_bg {
    overflow: hidden !important;
}
.arena-attack-page,
.arena-attack-page #walka,
.arena-attack-page #walka-body,
.arena-attack-page #contentscroll,
.arena-attack-page .arena-duel-name,
.arena-attack-page .arena-duel-rod,
.arena-attack-page .arena-duel-eyebrow,
.arena-attack-page .arena-duel-status,
.arena-attack-page .arena-duel-countdown,
.arena-attack-page #walka-top .walka-user-name,
.arena-attack-page #walka-top .walka-user-name a {
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
}

/* Intro VS */
.arena-duel-intro {
    position: relative;
    z-index: 5;
    padding: 28px 18px 32px;
    text-align: center;
    min-height: 0;
    overflow: hidden; /* slash 140% + rotate(-18deg) / scale(1.04) — bez overflow page scroll */
    background:
        radial-gradient(ellipse 55% 50% at 18% 40%, rgba(160,20,20,.38), transparent 70%),
        radial-gradient(ellipse 55% 50% at 82% 40%, rgba(20,90,150,.28), transparent 70%),
        linear-gradient(180deg, #101014 0%, #08080a 100%);
    transition: opacity .65s ease, transform .65s ease, filter .4s ease;
}
.arena-duel-intro.is-clash .arena-duel-stage.is-impact {
    animation: arena-duel-impact .35s ease-out both;
}
.arena-duel-intro.is-out {
    opacity: 0;
    transform: scale(1.02);
    filter: brightness(1.4);
    pointer-events: none;
}
.arena-duel-intro-bg {
    display: none;
}
.arena-duel-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 75% 70% at 50% 42%, transparent 35%, rgba(0,0,0,.45) 100%);
}
.arena-duel-sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,220,160,.7), transparent),
        radial-gradient(1px 1px at 78% 22%, rgba(160,210,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,180,120,.5), transparent),
        radial-gradient(1px 1px at 88% 68%, rgba(255,255,255,.4), transparent),
        radial-gradient(1px 1px at 55% 18%, rgba(255,100,80,.45), transparent);
    animation: arena-duel-sparks 2s linear infinite;
    opacity: .75;
}
.arena-duel-flash {
    position: absolute;
    inset: 0;
    z-index: 8;
    pointer-events: none;
    background: #fff;
    opacity: 0;
}
.arena-duel-flash.is-on {
    animation: arena-duel-flash-bang .28s ease-out both;
}
.arena-duel-slash {
    position: absolute;
    top: 38%;
    left: -10%;
    width: 120%;
    height: 3px;
    z-index: 4;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,220,160,.0), rgba(255,240,200,.85), rgba(255,80,40,.7), transparent);
    transform: rotate(-18deg) scaleX(0);
    transform-origin: center;
    animation: arena-duel-slash 1.1s .9s cubic-bezier(.2,.8,.2,1) both;
    box-shadow: 0 0 18px rgba(255,180,80,.6);
    /* will-change alone can inflate scrollport in some engines — keep clipped by .arena-duel-intro */
}
@keyframes arena-duel-sparks {
    from { transform: translateY(0); opacity: .55; }
    to { transform: translateY(-12px); opacity: .9; }
}
@keyframes arena-duel-flash-bang {
    0% { opacity: 0; }
    30% { opacity: .85; }
    100% { opacity: 0; }
}
@keyframes arena-duel-slash {
    0% { transform: rotate(-18deg) scaleX(0); opacity: 0; }
    35% { transform: rotate(-18deg) scaleX(1); opacity: 1; }
    100% { transform: rotate(-18deg) scaleX(1) translateX(8%); opacity: 0; }
}
@keyframes arena-duel-impact {
    0% { transform: scale(1); }
    40% { transform: scale(1.06) translateX(-4px); }
    70% { transform: scale(1.04) translateX(4px); }
    100% { transform: scale(1); }
}

.arena-duel-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(199, 202, 149, .65);
    animation: arena-duel-fade-up .6s ease both;
}
@keyframes arena-duel-fade-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.arena-duel-stage {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px 18px;
    flex-wrap: nowrap;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 12px;
}
.arena-duel-fighter {
    flex: 0 1 180px;
    max-width: 190px;
    animation: arena-duel-from-left 1s cubic-bezier(.2,.8,.2,1) both;
}
.arena-duel-fighter--enemy {
    animation-name: arena-duel-from-right;
    animation-delay: .15s;
}
@keyframes arena-duel-from-left {
    0% { opacity: 0; transform: translateX(-72px) scale(.86); filter: brightness(.4); }
    60% { opacity: 1; transform: translateX(6px) scale(1.02); filter: brightness(1.1); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes arena-duel-from-right {
    0% { opacity: 0; transform: translateX(72px) scale(.86); filter: brightness(.4); }
    60% { opacity: 1; transform: translateX(-6px) scale(1.02); filter: brightness(1.1); }
    100% { opacity: 1; transform: none; filter: none; }
}

.arena-duel-frame {
    position: relative;
    width: 124px;
    height: 124px;
    margin: 0 auto 12px;
    border: 2px solid rgba(199, 202, 149, .4);
    background: #0a0a0c;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.8),
        0 0 28px rgba(146,11,11,.4),
        inset 0 0 18px rgba(0,0,0,.55);
    overflow: hidden;
}
.arena-duel-fighter--enemy .arena-duel-frame {
    border-color: rgba(80, 140, 180, .45);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.8),
        0 0 28px rgba(0,120,180,.35),
        inset 0 0 18px rgba(0,0,0,.55);
}
.arena-duel-aura {
    position: absolute;
    inset: -30%;
    pointer-events: none;
    border-radius: 50%;
    opacity: .55;
    animation: arena-duel-aura 2.2s ease-in-out infinite alternate;
}
.arena-duel-aura--me {
    background: radial-gradient(circle, rgba(200,40,40,.45), transparent 65%);
}
.arena-duel-aura--enemy {
    background: radial-gradient(circle, rgba(30,140,200,.4), transparent 65%);
}
@keyframes arena-duel-aura {
    from { transform: scale(.85); opacity: .35; }
    to { transform: scale(1.15); opacity: .7; }
}
.arena-duel-frame img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: arena-duel-portrait 2.6s ease-in-out infinite alternate;
}
@keyframes arena-duel-portrait {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}
.arena-duel-lvl {
    position: absolute;
    z-index: 2;
    right: 4px;
    bottom: 4px;
    min-width: 28px;
    padding: 2px 6px;
    background: rgba(0,0,0,.85);
    border: 1px solid rgba(199, 202, 149, .35);
    color: #f0c060;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}
.arena-duel-meta { text-align: center; }
.arena-duel-rod {
    display: block;
    font-size: 12px;
    color: #c4782a;
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.arena-duel-name {
    display: block;
    font-size: 17px;
    color: #f0e6d8;
    line-height: 1.25;
}
.arena-duel-record {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: rgba(220,214,204,.55);
}

.arena-duel-vs {
    position: relative;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: arena-duel-vs-pop .75s .35s cubic-bezier(.2,1.4,.3,1) both;
}
.arena-duel-vs-img {
    display: block;
    width: 56px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(200,40,40,.45));
    animation: arena-walka-vs-pulse 1.8s ease-in-out .9s infinite;
}
@keyframes arena-duel-vs-pop {
    from { opacity: 0; transform: scale(.15) rotate(-28deg); }
    to { opacity: 1; transform: none; }
}

.arena-duel-countdown {
    position: relative;
    z-index: 3;
    min-height: 48px;
    margin: 14px 0 0;
    font-size: 40px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #ffe0a8;
    text-shadow: 0 0 24px rgba(200,40,40,.7), 0 2px 0 #300;
    opacity: 0;
    pointer-events: none;
}
.arena-duel-countdown.is-pop {
    animation: arena-duel-cd-pop .75s cubic-bezier(.2,1.3,.3,1) both;
}
.arena-duel-countdown.is-fight {
    font-size: 26px;
    letter-spacing: .2em;
    color: #ff6a4a;
}
@keyframes arena-duel-cd-pop {
    0% { opacity: 0; transform: scale(1.6); filter: blur(4px); }
    40% { opacity: 1; transform: scale(.92); filter: none; }
    100% { opacity: 1; transform: scale(1); }
}

.arena-duel-status {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    font-size: 14px;
    color: rgba(220,214,204,.8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 20px;
}
.arena-duel-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c22;
    box-shadow: 0 0 8px #f44;
    animation: arena-duel-blink 1s ease-in-out infinite;
}
@keyframes arena-duel-blink {
    0%, 100% { opacity: .35; transform: scale(.85); }
    50% { opacity: 1; transform: scale(1.15); }
}

.arena-duel-bar {
    position: relative;
    z-index: 1;
    width: 260px;
    height: 6px;
    margin: 14px auto 0;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 0 10px rgba(146,11,11,.2);
}
.arena-duel-bar span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #6a1010, #c03020 45%, #e0a040);
    box-shadow: 0 0 10px rgba(224,160,64,.55);
    transition: width linear;
}
.arena-duel-bar span.is-fill { width: 100%; }

/* Chrome walki: bez position:absolute (to powodowało skok layoutu po intro) */
.arena-battle-chrome {
    position: relative;
    z-index: 2;
    padding: 0 0 12px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s ease, transform .45s ease;
    pointer-events: none;
}
.arena-battle-chrome.is-live {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
.arena-battle-chrome.is-loading {
    height: 0;
    min-height: 0;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    visibility: hidden;
}

.arena-battle-toolbar {
    display: flex;
    justify-content: flex-end;
    max-width: 1000px;
    margin: 10px auto 8px;
    padding: 0 12px;
    box-sizing: border-box;
}
.arena-battle-back {
    float: none !important;
    flex-shrink: 0;
}

/* Belka graczy — wyśrodkowana (flex bez ::after na 100%, bo zabijał VS) */
.arena-attack-page #walka-top {
    position: relative !important;
    width: 100% !important;
    max-width: 1000px !important;
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    margin: 0 auto !important;
    min-height: 130px;
    padding: 14px 12px 16px !important;
    box-sizing: border-box;
    background: #070a11 url('./../img/battle/top.jpg') bottom center no-repeat !important;
    background-size: auto !important;
    overflow: visible !important;
}
.arena-attack-page #walka-top::after {
    content: none !important;
    display: none !important;
}
.arena-attack-page #walka-top ul.walka-team,
.arena-attack-page #walka-top ul.walka-team2 {
    position: relative !important;
    float: none !important;
    display: block !important;
    flex: 0 0 300px;
    width: 300px !important;
    max-width: 42%;
    margin: 0 !important;
    overflow: visible !important;
}
.arena-attack-page #walka-top ul.walka-team li,
.arena-attack-page #walka-top ul.walka-team2 li {
    position: relative !important;
    width: 100% !important;
    min-height: 110px;
    padding: 10px 8px !important;
    box-sizing: border-box;
    float: none !important;
    background: rgba(0,0,0,.45) !important;
    border: 1px solid rgba(120, 160, 200, .22);
    transition: border-color .25s ease, box-shadow .25s ease, filter .25s ease;
}
.arena-attack-page #walka-top .walka-user {
    width: 100% !important;
    height: auto !important;
    min-height: 88px;
    padding: 4px !important;
    box-sizing: border-box;
}
.arena-attack-page #walka-top .walka-user-avatar {
    width: 84px !important;
    height: 84px !important;
    padding-left: 2px !important;
}
.arena-attack-page #walka-top .walka-user-avatar img {
    width: 84px !important;
    height: 84px !important;
    border: 1px solid rgba(120, 160, 200, .35);
    border-radius: 3px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    object-fit: cover;
}
.arena-attack-page #walka-top .walka-user-name {
    width: calc(100% - 100px) !important;
    max-width: 200px;
    height: auto !important;
    min-height: 28px;
    padding-left: 12px !important;
    line-height: 1.25 !important;
    font-size: 15px !important;
    font-weight: 700;
}
.arena-attack-page #walka-top .walka-user-name a {
    color: #f2ebe0 !important;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0,0,0,.8);
}
.arena-attack-page #walka-top .walka-user-name a:hover {
    color: #e0b04a !important;
}
.arena-attack-page #walka-top .walka-user-bars {
    width: calc(100% - 100px) !important;
    max-width: 200px;
    padding-left: 12px !important;
    height: auto !important;
    margin-top: 6px;
}
.arena-attack-page #walka-top .walka-usr-hp,
.arena-attack-page #walka-top .walka-usr-reiatsu {
    max-width: 190px !important;
    height: 16px !important;
    font-size: 12px !important;
    margin-bottom: 4px;
}
.arena-attack-page #walka-top .walka-usr-hp strong,
.arena-attack-page #walka-top .walka-usr-reiatsu strong {
    font-size: 11px !important;
    line-height: 16px !important;
}

/* VS — na środku między kartami */
.arena-attack-page #walka-top #walka-vs {
    float: none !important;
    display: block !important;
    flex: 0 0 56px;
    width: 56px !important;
    height: 72px !important;
    margin: 28px 0 0 !important;
    background: url('./../img/battle/vs.png') top center no-repeat !important;
    background-size: contain !important;
    position: relative !important;
    align-self: center;
    animation: arena-walka-vs-pulse 1.8s ease-in-out .4s infinite;
    filter: drop-shadow(0 0 8px rgba(200,40,40,.4));
}
.arena-attack-page #walka-top #walka-vs::before,
.arena-attack-page #walka-top #walka-vs::after {
    content: none !important;
    display: none !important;
}
@keyframes arena-walka-vs-pulse {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(200,40,40,.35)) brightness(1); }
    50% { filter: drop-shadow(0 0 14px rgba(200,40,40,.65)) brightness(1.15); }
}

.arena-attack-page #walka-top #close-button,
.arena-attack-page #close-button {
    display: none !important;
}

.arena-attack-page #content.arena-battle-stage,
.arena-attack-page .arena-battle-stage#content {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    float: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    overflow: visible;
}
.arena-attack-page #walka {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
    float: none !important;
    clear: both !important;
    min-height: 0 !important;
    background: #000 url('./../img/battle/bg.jpg') top center no-repeat !important;
    background-size: 1000px auto !important;
    background-color: #000 !important;
    position: relative;
    box-sizing: border-box;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}
.arena-attack-page #walka::before {
    display: none !important;
}
.arena-attack-page #walka > * {
    position: relative;
    z-index: 1;
}

/* Po intro: belka graczy widoczna, log jeszcze ukryty */
.arena-attack-page #walka-body.is-fighters-only {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin: 0 !important;
    pointer-events: none;
}
.arena-attack-page #walka-body.is-fight-live {
    opacity: 1;
    max-height: none;
    transition: opacity .35s ease;
}
.arena-attack-page #walka-body {
    clear: both !important;
    width: 94% !important;
    max-width: 860px !important;
    margin: 12px auto 18px !important;
    float: none !important;
    box-sizing: border-box;
    overflow: visible !important;
    max-height: none !important;
    scrollbar-width: none !important;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 13px !important;
}
.arena-attack-page #contentscroll {
    width: 100% !important;
    max-width: 860px;
    float: none !important;
    margin: 8px auto !important;
    padding: 6px 4px 12px !important;
    box-sizing: border-box;
    overflow: visible !important;
    min-height: 0 !important;
    max-height: none !important;
    border: none !important;
    background: transparent !important;
    scrollbar-width: none !important;
}
.arena-attack-page #walka,
.arena-attack-page #walka-top {
    overflow: visible !important;
    max-height: none !important;
    scrollbar-width: none !important;
}
.arena-attack-page #walka-body::-webkit-scrollbar,
.arena-attack-page #contentscroll::-webkit-scrollbar,
.arena-attack-page #walka::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.arena-attack-page #walka-top ul.walka-team,
.arena-attack-page #walka-top ul.walka-team2 {
    overflow: visible !important;
}
.arena-attack-page #walka-body ul,
.arena-attack-page #contentscroll ul {
    list-style: none !important;
    width: 100% !important;
    max-width: 100%;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    overflow: visible !important;
}
/* Najnowsza tura NA GÓRZE logu; podsumowanie NAD logiem. */
.arena-attack-page #walka-body.arena-fight-layout,
#arenaAttackPage #walka-body.arena-fight-layout,
.arena-attack-page.is-fight-done #walka-body.arena-fight-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 10px;
}
.arena-attack-page #contentscroll ul,
#arenaAttackPage #contentscroll ul,
.arena-attack-page.is-step-log #contentscroll ul,
.arena-attack-page.is-fight-done #contentscroll ul,
#arenaAttackPage.is-fight-done #contentscroll ul {
    display: flex !important;
    flex-direction: column-reverse !important;
}
.arena-attack-page.is-fight-done #contentscroll,
.arena-attack-page.is-fight-done #walka,
.arena-attack-page.is-fight-done #walka-result {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
.arena-attack-page .arena-fight-log-title {
    display: flex !important;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 4px 0 2px !important;
    padding: 8px 12px !important;
    border: 1px solid rgba(199, 202, 149, .28);
    border-left: 3px solid #c9a227;
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(80, 55, 12, .45) 0%, rgba(18, 16, 14, .7) 55%, rgba(12, 12, 14, .5) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.arena-attack-page .arena-fight-log-title span {
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e8d5a0 !important;
}
.arena-attack-page .arena-fight-log-title em {
    font-style: normal;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(199, 202, 149, .65);
}
.arena-attack-page #walka-result.arena-fight-summary,
.arena-attack-page #walka-result {
    order: 0;
}
.arena-attack-page .arena-fight-log-title {
    order: 1;
}
.arena-attack-page #contentscroll {
    order: 2;
}
.arena-attack-page #walka-loot {
    order: 3;
}
.arena-attack-page #walka-body ul li,
.arena-attack-page #contentscroll ul li {
    float: none !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 12px;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    margin: 8px 0 !important;
    padding: 11px 14px !important;
    min-height: 44px;
    line-height: 1.45 !important;
    color: #f0e8dc !important;
    font-size: 13px !important;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    background:
        linear-gradient(105deg, rgba(90,22,18,.55) 0%, rgba(22,22,28,.78) 28%, rgba(16,16,20,.72) 100%) !important;
    border: 1px solid rgba(199, 202, 149, .18) !important;
    border-left: 3px solid #a82820 !important;
    border-radius: 5px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 3px 10px rgba(0,0,0,.4);
    overflow: visible !important;
}
.arena-attack-page #contentscroll ul li.crit,
.arena-attack-page #contentscroll ul li.crit2 {
    border-color: rgba(160, 30, 20, .55) !important;
    border-left-color: #e04030 !important;
    background:
        linear-gradient(105deg, rgba(120,20,15,.65) 0%, rgba(40,12,12,.8) 35%, rgba(20,16,16,.7) 100%) !important;
    box-shadow: inset 0 0 20px rgba(180,30,20,.15), 0 3px 12px rgba(0,0,0,.45);
}
.arena-attack-page #contentscroll ul li.onDebuff {
    border-left-color: #c04040 !important;
}
.arena-attack-page #contentscroll ul li.onBuff {
    border-left-color: #3a8a40 !important;
    background:
        linear-gradient(105deg, rgba(20,70,30,.4) 0%, rgba(22,22,28,.78) 30%, rgba(16,16,20,.72) 100%) !important;
}
/* Ikona techniki — zawsze widoczna po lewej (bez float, bo ginęła w flex/overflow) */
.arena-attack-page #contentscroll ul li > img,
.arena-attack-page #contentscroll ul li img.tt_tech,
.arena-attack-page #contentscroll .tt_tech {
    float: none !important;
    position: relative !important;
    order: -1;
    flex: 0 0 42px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(199, 202, 149, .45) !important;
    border-radius: 4px;
    background: #0a0a0c;
    box-shadow: 0 0 10px rgba(146,11,11,.25);
    object-fit: contain !important;
    cursor: help;
    z-index: 2;
}
.arena-attack-page #contentscroll .tt_tech:hover {
    border-color: rgba(224, 160, 64, .75) !important;
    box-shadow: 0 0 12px rgba(224, 160, 64, .4);
}
.arena-attack-page #contentscroll .walka-left,
.arena-attack-page #contentscroll .walka-left2,
.arena-attack-page #contentscroll .walka-right,
.arena-attack-page #contentscroll .walka-right2 {
    float: none !important;
    position: relative !important;
    flex: 1 1 calc(100% - 60px);
    width: auto !important;
    max-width: 100%;
    display: block !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.4;
    visibility: visible !important;
    opacity: 1 !important;
}
.arena-attack-page #contentscroll .walka-right,
.arena-attack-page #contentscroll .walka-right2 {
    margin-top: 0 !important;
    color: #e07070 !important;
    font-size: 12px !important;
    padding-left: 0 !important;
}
.arena-attack-page #contentscroll .techniquecolor,
.arena-attack-page #contentscroll strong.techniquecolor {
    color: #e0b04a !important;
    font-weight: 700;
}
.arena-attack-page #walka-result {
    max-width: 860px;
    width: 100% !important;
    margin: 4px auto 8px !important;
    padding: 16px 18px !important;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center;
    color: #f3e6c8 !important;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(180, 120, 40, .28), transparent 60%),
        linear-gradient(180deg, rgba(48, 36, 14, .85), rgba(14, 12, 8, .92)) !important;
    border: 1px solid rgba(224, 176, 74, .55) !important;
    border-radius: 6px !important;
    box-shadow:
        0 0 28px rgba(180, 120, 40, .22),
        inset 0 1px 0 rgba(255, 220, 140, .12);
    animation: arena-summary-in .45s ease both;
}
@keyframes arena-summary-in {
    from { opacity: 0; transform: translateY(-8px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* Blok KO — wyraźnie inny niż zwykły wpis logu */
.arena-attack-page #contentscroll ul li.arena-ko-banner {
    display: block !important;
    margin: 14px 0 !important;
    padding: 0 !important;
    min-height: 0;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}
.arena-attack-page #contentscroll ul li.arena-ko-banner .arena-ko-frame,
.arena-attack-page #contentscroll ul li.arena-ko-banner > strong {
    display: block !important;
    position: relative;
    padding: 18px 16px 16px !important;
    text-align: center;
    color: #ffd0d0 !important;
    font-size: 15px !important;
    letter-spacing: .04em;
    text-transform: uppercase;
    background:
        linear-gradient(180deg, rgba(90, 12, 12, .92) 0%, rgba(28, 6, 6, .95) 100%) !important;
    border: 2px solid #c03030 !important;
    border-radius: 4px !important;
    box-shadow:
        0 0 0 1px rgba(0,0,0,.6),
        0 0 24px rgba(180, 20, 20, .45),
        inset 0 0 40px rgba(0,0,0,.35);
    clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
}
.arena-attack-page #contentscroll ul li.arena-ko-banner .arena-ko-tag {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 12px 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #1a0505;
    background: linear-gradient(180deg, #ff6a5a, #c02820);
    border: 1px solid #ffb0a0;
    box-shadow: 0 2px 0 #5a0808, 0 0 12px rgba(255, 60, 40, .4);
}
.arena-attack-page #contentscroll ul li.arena-tech-hit {
    border-left-color: #e0b04a !important;
    border-color: rgba(224, 176, 74, .4) !important;
    background:
        linear-gradient(105deg, rgba(90, 60, 12, .55) 0%, rgba(28, 22, 14, .82) 32%, rgba(16, 16, 20, .72) 100%) !important;
}
.arena-attack-page #contentscroll ul li.arena-basic-hit {
    border-left-color: #8a9098 !important;
}
.arena-attack-page #contentscroll ul li.arena-basic-hit::before {
    content: var(--arena-label-attack, 'ATAK');
    flex: 0 0 auto;
    align-self: center;
    margin-right: 4px;
    padding: 2px 7px 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    color: #c8ccd0;
    background: rgba(40, 44, 52, .9);
    border: 1px solid rgba(140, 148, 160, .45);
    border-radius: 2px;
}

/* ===== Arena battle report (viewBattle) ===== */
.arena-report-page .arena-report-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 10px auto 12px;
    padding: 0 12px;
    box-sizing: border-box;
}
.arena-report-heading {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
}
.arena-report-eyebrow {
    margin: 0 0 4px !important;
    padding: 0 !important;
    text-align: left !important;
    animation: none !important;
}
.arena-report-title {
    margin: 0;
    padding: 0;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 26px;
    line-height: 1.15;
    letter-spacing: .04em;
    color: #f2ebe0;
    text-shadow: 0 1px 2px rgba(0,0,0,.75);
}
.arena-report-page .arena-battle-chrome {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    height: auto !important;
    visibility: visible !important;
    overflow: visible !important;
}
.arena-report-page #walka-result {
    display: block !important;
}
@media (max-width: 640px) {
    .arena-report-title {
        font-size: 20px;
    }
    .arena-report-page .arena-report-toolbar {
        align-items: stretch;
    }
    .arena-report-page .arena-battle-back {
        width: 100%;
        text-align: center;
    }
}


/* Badge zwycięzca / pokonany na belce u góry */
.arena-attack-page #walka-top ul.walka-team,
.arena-attack-page #walka-top ul.walka-team2 {
    overflow: visible !important;
}
.arena-attack-page #walka-top ul.walka-team li,
.arena-attack-page #walka-top ul.walka-team2 li {
    overflow: visible !important;
}
.arena-attack-page #walka-top ul.arena-team-win > li {
    border-color: rgba(60, 200, 90, .75) !important;
    box-shadow: 0 0 18px rgba(46, 200, 90, .35), inset 0 0 20px rgba(10, 60, 20, .25) !important;
}
.arena-attack-page #walka-top ul.arena-team-lose > li {
    border-color: rgba(120, 30, 30, .7) !important;
    filter: grayscale(.45) brightness(.78);
    box-shadow: inset 0 0 24px rgba(0,0,0,.45) !important;
}
.arena-attack-page #walka-top ul.arena-team-draw > li {
    border-color: rgba(140, 140, 160, .45) !important;
}
.arena-outcome-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    left: auto;
    transform: none;
    z-index: 50;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 5px 11px 6px;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: 2px;
    pointer-events: none;
    animation: arena-outcome-pop .55s cubic-bezier(.2,1.3,.3,1) both;
}
.arena-outcome-badge--win {
    color: #062010 !important;
    background: linear-gradient(180deg, #8dffb0 0%, #2ecc57 50%, #1a8f38 100%) !important;
    border: 1px solid #c8ffd8 !important;
    box-shadow: 0 0 16px rgba(46, 204, 87, .65), 0 2px 0 #0d5a22 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.arena-outcome-badge--lose {
    color: #f0d0d0 !important;
    background: linear-gradient(180deg, #6a2020 0%, #3a1010 100%) !important;
    border: 1px solid #a04040 !important;
    box-shadow: 0 0 12px rgba(160, 40, 40, .4), 0 2px 0 #200808 !important;
}
.arena-outcome-badge--draw {
    color: #ddd !important;
    background: linear-gradient(180deg, #4a4a58 0%, #2a2a34 100%) !important;
    border: 1px solid #787888 !important;
    box-shadow: 0 0 10px rgba(100,100,120,.35) !important;
}
@keyframes arena-outcome-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.7); }
    to { opacity: 1; transform: none; }
}

/* Animacja nowego wpisu — bez translateY (powodował „skok”) */
.arena-attack-page #contentscroll ul li.arena-log-step-in {
    animation: arena-log-step-in .35s ease both;
}
@keyframes arena-log-step-in {
    from { opacity: .35; filter: brightness(1.25); }
    to { opacity: 1; filter: none; }
}

/* Tooltip techniki — samodzielny (NEW nie ładuje styleEngineGame .technika) */
.tooltipster-base.tooltipster-arena-tech {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    overflow: visible !important;
}
.tooltipster-arena-tech .tooltipster-content {
    padding: 0 !important;
    background: transparent !important;
    color: #e8e0d4 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    overflow: visible !important;
}
.tooltipster-arena-tech .tooltipster-arrow span {
    border-right-color: #1c1c24 !important;
    border-left-color: #1c1c24 !important;
}
.arena-tech-tt-loading,
.arena-tech-tt-err {
    padding: 12px 16px;
    min-width: 160px;
    background: linear-gradient(180deg, #1a1a22, #0e0e12);
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 6px;
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: rgba(220,214,204,.85);
}
.arena-tech-tt-err { color: #e08080; }
.tooltipster-arena-tech .arena-tech-tt,
.tooltipster-arena-tech .technika {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 320px !important;
    max-width: 86vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(ellipse 80% 60% at 10% 0%, rgba(120,40,20,.28), transparent 55%),
        linear-gradient(180deg, #1c1c24 0%, #0c0c10 100%) !important;
    border: 1px solid rgba(199, 202, 149, .32) !important;
    border-radius: 8px !important;
    box-shadow:
        0 12px 32px rgba(0,0,0,.65),
        inset 0 1px 0 rgba(255,255,255,.06) !important;
    color: #e8e0d4 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}
.tooltipster-arena-tech .arena-tech-tt .technika {
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
.tooltipster-arena-tech .technika-title {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    float: none !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px 14px 10px !important;
    background: linear-gradient(180deg, rgba(40,36,28,.55), transparent) !important;
    border-bottom: 1px solid rgba(199, 202, 149, .14);
    border-radius: 0 !important;
}
.tooltipster-arena-tech .technika-img {
    float: none !important;
    position: relative !important;
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    flex-shrink: 0;
    border: 1px solid rgba(199, 202, 149, .35);
    border-radius: 4px;
    background: #08080a;
    overflow: hidden;
    box-shadow: 0 0 12px rgba(146,11,11,.25);
}
.tooltipster-arena-tech .technika-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    display: block;
}
.tooltipster-arena-tech .technika-title-txt {
    float: none !important;
    position: relative !important;
    width: auto !important;
    flex: 1;
    min-width: 0;
    padding: 0 !important;
    color: #dcd6cc !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}
.tooltipster-arena-tech .technika-title-txt .gold,
.tooltipster-arena-tech .technika-title-txt strong.gold {
    color: #e0b04a !important;
    font-size: 14px;
}
.tooltipster-arena-tech .technika-title-txt small {
    display: block;
    margin-top: 4px;
    color: rgba(220,214,204,.62) !important;
    font-size: 11px !important;
}
.tooltipster-arena-tech .technika-desc {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    color: rgba(232,224,212,.88) !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    border-bottom: 1px solid rgba(199, 202, 149, .1);
}
.tooltipster-arena-tech .technika-detail {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 10px 14px 12px !important;
    background: rgba(0,0,0,.22) !important;
}
.tooltipster-arena-tech .technika-detail-title {
    float: none !important;
    width: auto !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    color: #c7ca95 !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}
.tooltipster-arena-tech .technika-detail ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    float: none !important;
}
.tooltipster-arena-tech .technika-detail ul li {
    float: none !important;
    display: block !important;
    width: auto !important;
    margin: 0 0 4px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
    color: rgba(220,214,204,.78) !important;
    background: rgba(255,255,255,.03);
    border-left: 2px solid rgba(200,80,40,.55);
    border-radius: 0 3px 3px 0;
}

.arena-attack-error {
    text-align: center;
    padding: 48px 20px 40px;
    max-width: 420px;
    margin: 0 auto;
}
.arena-attack-error-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 14px;
    border: 2px solid #6a2020;
    border-radius: 50%;
    color: #e07070;
    font-size: 24px;
    font-weight: 700;
    line-height: 44px;
    animation: arena-duel-vs-pop .5s ease both;
}
.arena-attack-error h1 {
    margin: 0 0 8px;
    font-size: 18px;
    color: #f0e6d8;
}
.arena-attack-error p {
    margin: 0 0 18px;
    font-size: 13px;
    color: rgba(220,214,204,.7);
    line-height: 1.45;
}
.arena-attack-error .red_button {
    float: none !important;
    display: inline-block;
}

@media (max-width: 767px) {
    .arena-duel-frame { width: 96px; height: 96px; }
    .arena-duel-vs { width: 56px; height: 62px; }
    .arena-duel-stage {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 10px;
    }
    .arena-duel-countdown { font-size: 34px; }
    .arena-duel-vs-img { width: 48px; height: 62px; }
    .arena-attack-page #walka-top #walka-vs {
        width: 48px !important;
        height: 62px !important;
    }
    .arena-attack-page #walka-top .walka-user-name { font-size: 14px !important; }
    .arena-attack-page #walka {
        min-height: 480px !important;
        background-size: cover !important;
    }
    .arena-attack-page #walka-top ul.walka-team,
    .arena-attack-page #walka-top ul.walka-team2 {
        width: 100% !important;
        max-width: 300px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (max-width: 991px) {
}

@media (max-width: 768px) {

    .arena-topbar {
        margin: 12px 8px 0;
        padding: 14px;
    }

    .arena-topbar-left {
        flex-direction: column;
        text-align: center;
        flex: 1 1 100%;
    }

    .arena-exp-progress { max-width: 100%; }

    .arena-topbar-stats {
        justify-content: space-between;
        flex: 1 1 100%;
    }

    .arena-stat { flex: 1 1 22%; min-width: 68px; }

    .arena-opponents { margin: 16px 8px 0; }

    .arena-card-action .red_button {
        width: 100%;
        max-width: 193px;
    }

    .arena-grid > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 479px) {
    .arena-stat { min-width: 60px; padding: 6px 4px; }
    .arena-stat-value { font-size: 18px; }
    .arena-stat--timer .arena-stat-value { font-size: 15px; }
}

/* ===== HOME / Mieszkanie (gaming) ===== */
.home_bg {
    position: relative;
    background-color: rgba(0, 0, 0, .9);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border: 0;
    border-radius: 0;
    min-height: 520px;
    padding: 22px 20px 28px;
    overflow: visible;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.home-header {
    text-align: center;
    margin-bottom: 18px;
}

.home_bg h1 {
    margin: 0 0 4px;
    color: #c7ca95;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    text-shadow: 0 2px 14px rgba(0,0,0,.9);
    letter-spacing: .04em;
}

.home-header-sub {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(199,202,149,.7);
}

.home-layout {
    display: flex;
    align-items: stretch;
    gap: 16px;
    margin-bottom: 16px;
}

.home-panel {
    position: relative;
    background: rgba(6,7,10,.58);
    border: 1px solid rgba(199,202,149,.28);
    border-radius: 10px;
    padding: 14px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.3);
    backdrop-filter: blur(1px);
}

.home-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(199,202,149,.7), transparent);
    border-radius: 2px;
}

.home-panel--story {
    flex: 1 1 46%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-panel--stats {
    flex: 1 1 54%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.home-panel--energy {
    width: 100%;
}

.home-meal-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, rgba(199,202,149,.12), transparent 70%);
    border: 1px solid rgba(199,202,149,.3);
    border-radius: 8px;
    box-shadow: inset 0 0 40px rgba(0,0,0,.55);
    margin-bottom: 12px;
}

.home-meal-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.home-meal-art:hover img {
    transform: scale(1.05);
}

.home-meal-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.55) 100%);
    pointer-events: none;
}

.home-meal-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 4px 10px;
    border-radius: 20px;
    color: #1a1a12;
    background: #c7ca95;
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
}

.home-meal-art .fa {
    display: none;
    font-size: 54px;
    color: #c7ca95;
    text-shadow: 0 0 18px rgba(199,202,149,.5);
}

.home-meal-art--fallback {
    height: 120px;
}

.home-meal-art--fallback > .fa {
    display: block;
}

.home-story {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.home-story p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #d7dade;
}

.home-warn {
    margin-top: auto !important;
    font-size: 11px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #ff8a6b !important;
    padding: 8px 10px;
    border-radius: 6px;
    background: rgba(255,80,40,.1);
    border: 1px solid rgba(255,107,107,.35);
}

.home-warn .fa {
    margin-right: 4px;
}

.home-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex: 1 1 auto;
    margin-bottom: 12px;
}

.home-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 88px;
    padding: 12px 8px;
    text-align: center;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(199,202,149,.18);
    border-radius: 8px;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.home-stat:hover {
    border-color: rgba(0,180,255,.45);
    box-shadow: 0 0 14px rgba(0,180,255,.15);
}

.home-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9aa0a6;
}

.home-stat-value {
    font-size: 26px;
    font-weight: 800;
    color: #00b4ff;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0,180,255,.35);
}

.home-stat-value small {
    font-size: 12px;
    font-weight: 600;
    color: #7ab8d4;
}

.home-stat-value .fa {
    font-size: 14px;
    color: #c7ca95;
}

.home-hint {
    margin: 0 0 14px;
    font-size: 11px;
    color: #c7ca95;
    text-align: center;
    opacity: .9;
}

.home-hint .fa {
    margin-right: 4px;
    opacity: .8;
}

.home-energy {
    padding: 2px 4px;
}

.home-energy-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #bbb;
    margin-bottom: 8px;
}

.home-energy-head .fa {
    color: #c7ca95;
    margin-right: 4px;
}

.home-energy-head .home-energy-text {
    color: #00b4ff;
    font-weight: 700;
}

.home-energy-progress {
    height: 22px !important;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(199,202,149,.25);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0 !important;
}

.home-energy-progress .progress-bar {
    line-height: 22px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(90deg, #0072b5, #00b4ff);
    box-shadow: 0 0 10px rgba(0,180,255,.5);
    transition: width .6s ease;
}

.home-meal-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 4px;
}

.home-meal-action .red_button {
    float: none !important;
    display: inline-block;
    cursor: pointer;
    transition: filter .2s ease, transform .1s ease;
}

.home-meal-action .red_button:hover {
    filter: brightness(1.15) drop-shadow(0 0 6px rgba(200,40,40,.6));
}

.home-meal-action .red_button:active {
    transform: translateY(1px);
}

.home-meal-empty {
    color: #9a9a9a;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 14px;
    border: 1px dashed rgba(255,255,255,.15);
    border-radius: 6px;
    background: rgba(0,0,0,.25);
}

.home-meal-empty .fa {
    margin-right: 4px;
    opacity: .7;
}

@media (max-width: 991px) {
    .home-layout {
        flex-direction: column;
    }
    .home-panel--story,
    .home-panel--stats {
        flex: 1 1 auto;
        width: 100%;
    }
    .home-meal-art {
        height: 240px;
    }
}

@media (max-width: 575px) {
    .home_bg {
        padding: 14px 10px 18px;
        min-height: 0;
        border-radius: 6px;
    }
    .home-meal-art {
        height: 180px;
    }
    .home-stats-grid {
        gap: 8px;
    }
    .home-stat {
        min-height: 76px;
        padding: 10px 6px;
    }
    .home-stat-value {
        font-size: 22px;
    }
    .home-meal-action .red_button {
        width: 100%;
        max-width: 193px;
        background-size: 100% 100%;
    }
    .home-energy-head {
        font-size: 11px;
    }
}


/* ===== PROFILE – MMO paperdoll UI + EQ doll (eq_bg.png) ===== */
/* Profil: zewnętrzny kontener przeźroczysty (jak misje) — belki/tła na sekcjach */
.profile-page > .container {
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}
.profile_bg {
    position: relative;
    min-height: 0;
    padding: 14px 0 22px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border: 0;
}
.profile_bg .profile-main {
    overflow: visible;
}
.profile-bio-html {
    overflow: auto;
    max-width: 100%;
}
.profile_bg--questlog { padding-bottom: 28px; }

/* Wspólne belki sekcji profilu (jak hub / second-panel / CS) */
.profile_bg .profile-hero.decor,
.profile_bg .profile-skills-block.decor,
.profile_bg .profile-bio-block.decor,
.profile_bg .profile-friends-block.decor,
.profile_bg .profile-panel.decor,
.profile_bg .profile-eq-wrap.decor {
    position: relative;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    text-align: left;
    box-sizing: border-box;
}
.profile_bg .profile-hero.decor.decor-new,
.profile_bg .profile-skills-block.decor.decor-new,
.profile_bg .profile-bio-block.decor.decor-new,
.profile_bg .profile-friends-block.decor.decor-new,
.profile_bg .profile-eq-wrap.decor.decor-new {
    padding: 12px 14px 16px;
}
.profile_bg .profile-panel.decor.decor-new {
    padding: 12px;
}
.profile_bg .profile-hero.decor:before,
.profile_bg .profile-skills-block.decor:before,
.profile_bg .profile-bio-block.decor:before,
.profile_bg .profile-friends-block.decor:before,
.profile_bg .profile-panel.decor:before,
.profile_bg .profile-eq-wrap.decor:before {
    left: -4px;
    bottom: -6px;
}
.profile_bg .profile-hero.decor:after,
.profile_bg .profile-skills-block.decor:after,
.profile_bg .profile-bio-block.decor:after,
.profile_bg .profile-friends-block.decor:after,
.profile_bg .profile-panel.decor:after,
.profile_bg .profile-eq-wrap.decor:after {
    right: -5px !important;
    bottom: -8px !important;
}

.profile-hero.decor,
.profile_bg .profile-hero.decor {
    position: relative;
    margin-bottom: 14px;
    border: 0;
    background-color: rgba(0, 0, 0, .9);
    background-image: url('../img/belka_bg.png');
    background-position: center bottom -5px;
    background-repeat: repeat-x;
}
.profile-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) auto;
    align-items: start;
    gap: 14px 18px;
    padding: 2px 2px 4px;
}
.profile-hero-persona {
    flex: 0 0 auto;
}
.profile-avatar-frame {
    position: relative;
    width: 112px;
    height: 112px;
    min-width: 112px;
    padding: 3px;
    background: linear-gradient(180deg, #6a6040, #2a2618);
    border-radius: 2px;
    box-shadow: 0 0 0 1px #111, 0 4px 14px rgba(0,0,0,.55);
}
.profile-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    background: #0a0a0e;
    border-radius: 1px;
}
.profile-lvl-badge {
    position: absolute;
    left: -5px;
    top: -5px;
    min-width: 34px;
    height: 26px;
    padding: 0 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #f0e6c8;
    background: linear-gradient(180deg, #4a3f28, #2a2414);
    border: 1px solid #8a7340;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0,0,0,.55);
    z-index: 3;
}
.profile-online-dot {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #1a1a20;
    background: #555;
    z-index: 3;
}
.profile-avatar-frame.is-online .profile-online-dot {
    background: #3ecf6e;
    box-shadow: 0 0 8px rgba(62,207,110,.7);
}
.profile-outfit-chip,
.profile-map-preview {
    position: absolute;
    right: -6px;
    bottom: -6px;
    z-index: 4;
    width: 44px;
    height: 44px;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #12141a;
    border: 1px solid rgba(199,202,149,.4);
    border-radius: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,.65);
    box-sizing: border-box;
}
.profile-outfit-chip img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.profile-map-preview-stage {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 38px;
    height: 38px;
    overflow: hidden;
}
.profile-map-preview canvas {
    display: block;
    max-width: 38px !important;
    max-height: 38px !important;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    transform-origin: 50% 100%;
}
.profile-map-preview.is-walking canvas {
    animation: profileMapBob 0.55s ease-in-out infinite;
}
@keyframes profileMapBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1px); }
}
.profile-map-preview-fallback {
    display: block;
    width: 36px;
    height: 36px;
    object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
    .profile-map-preview.is-walking canvas { animation: none; }
}

.profile-hero-identity {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding-top: 2px;
}
.profile-rod {
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}
.profile-name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #f2f0e8;
    line-height: 1.1;
    text-shadow: 0 1px 2px #000;
    letter-spacing: .01em;
}
.profile-oddzial-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 72px;
    min-height: 72px;
    padding: 8px;
    background: rgba(0,0,0,.35);
    border: 1px solid #33363f;
    border-radius: 2px;
    box-sizing: border-box;
    cursor: help;
}
.profile-oddzial-herb {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.profile-oddzial-tt {
    text-align: center;
    max-width: 220px;
    padding: 4px;
}
.profile-oddzial-tt img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 8px;
}
.profile-oddzial-tt strong {
    display: block;
    color: #c7ca95;
    font-size: 13px;
    line-height: 1.3;
}
.profile-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0;
    font-size: 11px;
    color: #8b9098;
    line-height: 1.35;
}
.profile-dates strong { color: #c7ca95; }
.profile-dates i { margin-right: 3px; opacity: .7; }

.profile-hero-side {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    align-self: start;
    width: auto;
    max-width: 100%;
    min-width: 0;
}
.profile-hero-side-panels {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}
.profile-hero-side-panels .profile-oddzial-badge {
    align-self: stretch;
}
.profile-side-box {
    padding: 8px 10px;
    background: rgba(0,0,0,.35);
    border: 1px solid #33363f;
    border-radius: 2px;
    height: auto;
    flex: 1 1 auto;
    min-width: 0;
}
.profile-achievements {
    flex: 1 1 auto;
}
.profile-side-label {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b9098;
    margin: 0 0 6px;
    line-height: 1;
}
.profile-combat-bar {
    display: grid;
    grid-template-columns: repeat(3, minmax(70px, 86px));
    gap: 5px;
}
.profile-combat-stat {
    text-align: center;
    padding: 6px 5px 5px;
    background: rgba(0,0,0,.35);
    border: 1px solid #33363f;
    border-radius: 2px;
    min-width: 0;
}
.profile-combat-label {
    display: block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #8b9098;
    line-height: 1.15;
    white-space: nowrap;
}
.profile-combat-value {
    display: block;
    margin-top: 2px;
    font-size: 15px;
    font-weight: 700;
    color: #d8c48a;
    line-height: 1.1;
}
.profile-ach-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    align-items: center;
}
.profile-ach-ico {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.profile-ach-ico.is-empty { opacity: .28; filter: none; }
.profile-ach-more {
    flex: 0 0 auto;
    line-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    appearance: none;
}
.profile-ach-more img { width: 30px; height: 30px; display: block; }

.profile-actions-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    width: 100%;
    padding: 8px 0 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}
.profile-actions-bar .profile-action,
.profile-actions-bar .gray_button,
.profile-actions-bar .red_button {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 0;
    width: auto !important;
    height: 42px !important;
    line-height: 42px !important;
    margin: 0;
    padding: 0 8px;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none !important;
    white-space: nowrap;
    box-shadow: none !important;
    box-sizing: border-box;
    transition: filter .2s, transform .2s;
}
.profile-actions-bar .profile-action:hover,
.profile-actions-bar .gray_button:hover,
.profile-actions-bar .red_button:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    color: #fff !important;
}
.profile-actions-bar .profile-btn-110 {
    width: 110px !important;
    background-image: url('../design/gray_button_110.png') !important;
}
.profile-actions-bar .profile-btn-130 {
    width: 130px !important;
    background-image: url('../design/gray_button_130.png') !important;
}
.profile-actions-bar .red_button.profile-btn-110 {
    background-image: url('../design/red_button_110.png') !important;
}
.profile-actions-bar .red_button.profile-btn-130 {
    background-image: url('../design/red_button_130.png') !important;
}
.profile-actions-bar .profile-action span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff !important;
    text-decoration: none !important;
}
.profile-actions--own .profile-action { font-size: 11px; }

.profile-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    gap: 14px;
    align-items: start;
}
.profile-main-right { position: sticky; top: 10px; }

.profile-block { margin-bottom: 14px; }
.profile-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}
.profile-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #b8a66a;
    white-space: nowrap;
}
.profile-section-title i { margin-right: 4px; opacity: .75; }
.profile-section-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(140,120,60,.55), transparent 90%);
}

.profile-skills-block.decor,
.profile_bg .profile-skills-block.decor {
    padding: 12px;
    background-color: rgba(12, 8, 4, .72);
    background-image:
        linear-gradient(180deg, rgba(28,24,14,.78), rgba(8,6,4,.82)),
        url('../img/belka_bg.png');
    background-position: center top, center bottom -5px;
    background-repeat: no-repeat, repeat-x;
    border: 1px solid rgba(160,120,50,.35);
    border-radius: 0;
    box-shadow: inset 0 0 30px rgba(0,0,0,.35), 0 0 20px rgba(180,120,40,.06);
}
.profile-skills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.profile-skill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 10px;
    background:
        linear-gradient(105deg, rgba(60,48,20,.35) 0%, rgba(12,10,8,.95) 40%),
        #0c0a08;
    border: 1px solid #4a3c22;
    border-radius: 2px;
    box-shadow: inset 0 0 20px rgba(0,0,0,.55);
    animation: trainFadeIn .45s ease both;
    overflow: hidden;
}
.profile-skill::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #ffe08a, #8a6a28);
    box-shadow: 0 0 10px rgba(255,200,80,.45);
}
.profile-skill:hover {
    border-color: #a88440;
    box-shadow: 0 0 18px rgba(200,150,50,.18), inset 0 0 20px rgba(0,0,0,.55);
}
.profile-skill-ico {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 40% 30%, rgba(255,200,80,.2), rgba(0,0,0,.6));
    border: 1px solid rgba(180,140,60,.45);
    border-radius: 2px;
    color: #ffe08a;
    font-size: 16px;
    box-shadow: 0 0 12px rgba(200,150,50,.15);
}
.profile-skill-body { flex: 1; min-width: 0; }
.profile-skill-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.profile-skill-name {
    font-size: 12px;
    font-weight: 600;
    color: #e0dcc8;
    text-shadow: 0 1px 2px #000;
}
.profile-skill-val {
    font-size: 14px;
    font-weight: 800;
    color: #ffe08a;
    text-shadow: 0 0 10px rgba(255,200,80,.4);
}
.profile-skill-bar {
    height: 7px;
    background: rgba(0,0,0,.65);
    border: 1px solid rgba(120,100,50,.35);
    border-radius: 1px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.7);
}
.profile-skill-bar span {
    display: block;
    height: 100%;
    background:
        linear-gradient(180deg, rgba(255,255,255,.25), transparent 45%),
        linear-gradient(90deg, #5a4018, #c9a24a 55%, #ffe08a);
    box-shadow: 0 0 10px rgba(255,200,80,.55);
    position: relative;
    animation: profileSkillFill .7s ease both;
}
@keyframes profileSkillFill {
    from { filter: brightness(.6); }
    to { filter: brightness(1); }
}

.profile-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
    overflow: visible;
}
.profile-panel.decor,
.profile_bg .profile-panel.decor {
    position: relative;
    display: flex;
    gap: 10px;
    min-height: 110px;
    background-color: rgba(8, 6, 4, .72);
    background-image:
        linear-gradient(145deg, rgba(50,36,14,.45) 0%, rgba(8,6,4,.78) 50%),
        url('../img/belka_bg.png');
    background-position: center top, center bottom -5px;
    background-repeat: no-repeat, repeat-x;
    border: 1px solid #5a4828;
    border-radius: 0;
    box-shadow: inset 0 0 28px rgba(0,0,0,.4);
    overflow: visible;
}
.profile-panel-shine {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 40%, rgba(255,220,140,.07) 48%, transparent 56%);
    background-size: 220% 100%;
    animation: profilePanelShine 5s ease-in-out infinite;
}
@keyframes profilePanelShine {
    0%, 100% { background-position: 120% 0; }
    50% { background-position: -20% 0; }
}
.profile-panel--arena.decor,
.profile_bg .profile-panel--arena.decor {
    border-color: #6a3a28;
    box-shadow:
        inset 3px 0 0 #ff6a3d,
        inset 0 0 28px rgba(0,0,0,.4),
        0 0 20px rgba(180,60,30,.1);
}
.profile-panel--missions.decor,
.profile_bg .profile-panel--missions.decor {
    border-color: #3a4a5a;
    background-image:
        linear-gradient(145deg, rgba(30,40,55,.45) 0%, rgba(8,6,4,.78) 50%),
        url('../img/belka_bg.png');
    box-shadow:
        inset 3px 0 0 #6ab0ff,
        inset 0 0 28px rgba(0,0,0,.4),
        0 0 20px rgba(60,120,180,.1);
}
.profile-panel-art {
    position: relative;
    z-index: 1;
    width: 58px;
    min-width: 58px;
    display: flex;
    align-items: center;
}
.profile-panel-art img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(200,150,50,.2));
}
.profile-panel-body { position: relative; z-index: 1; flex: 1; min-width: 0; }
.profile-panel-body h3 {
    margin: 0 0 4px;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 15px;
    font-weight: 400;
    color: #f0e6c8;
    text-shadow: 0 0 12px rgba(255,200,80,.25);
}
.profile-panel-lvl { margin: 0 0 8px; font-size: 11px; color: #9aa0a6; }
.profile-panel-lvl .kan { color: #ffe08a; font-weight: 800; font-size: 14px; }
.profile-panel-stats { list-style: none; margin: 0; padding: 0; font-size: 11px; }
.profile-panel-stats li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    color: #8b9098;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.profile-panel-stats li:last-child { border-bottom: 0; }
.profile-panel-stats strong { color: #fff; font-size: 13px; }
.profile-panel-stats .win { color: #3ecf6e; text-shadow: 0 0 8px rgba(62,207,110,.35); }
.profile-panel-stats .lose { color: #e85d5d; }
.profile-ln-line { margin: 0 0 4px; font-size: 12px; color: #ccc; }
.profile-ln-empty { margin: 0; font-size: 12px; color: #666; }

.profile-soul-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.profile-soul-card {
    background: linear-gradient(180deg, rgba(24,24,30,.95), rgba(6,6,10,.98));
    border: 1px solid rgba(199,202,149,.22);
    border-radius: 4px;
    overflow: hidden;
}
.profile-soul-name {
    padding: 6px 8px;
    font-size: 11px;
    color: #c7ca95;
    border-bottom: 1px solid rgba(199,202,149,.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-soul-art {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, rgba(199,202,149,.08), transparent 60%), rgba(0,0,0,.4);
}
.profile-soul-art img { max-height: 86px; max-width: 92%; object-fit: contain; }

.profile-bio-text,
.profile-bio-empty,
.profile-friends-empty,
.profile-quest-empty {
    padding: 12px 14px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(199,202,149,.16);
    border-radius: 4px;
    color: #b5b8bf;
    font-size: 13px;
    line-height: 1.5;
}
.profile-bio-empty,
.profile-friends-empty { color: #666; }
.profile-bio-block.decor,
.profile_bg .profile-bio-block.decor {
    margin-bottom: 14px;
    background-color: rgba(0, 0, 0, .72);
    background-image: url('../img/belka_bg.png');
    background-position: center bottom -5px;
    background-repeat: repeat-x;
    border: 0;
}
.profile-bio-block .profile-bio-text {
    background: transparent;
    border: 0;
    padding: 0;
}
.profile-friends-block.decor,
.profile_bg .profile-friends-block.decor {
    padding: 10px 12px 12px;
    background-color: rgba(0, 0, 0, .72);
    background-image: url('../img/belka_bg.png');
    background-position: center bottom -5px;
    background-repeat: repeat-x;
    border: 0;
    border-radius: 0;
}
.profile-friends-count {
    font-size: 10px;
    font-weight: 700;
    color: #1a1408;
    background: linear-gradient(180deg, #e0c060, #c7a14a);
    padding: 2px 7px;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(200,150,50,.3);
}
.profile-friends-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    align-items: stretch;
}
.profile-friends-list > li {
    display: flex;
    min-width: 0;
    height: 100%;
}
.profile-friend {
    display: flex;
    gap: 6px;
    align-items: center;
    flex: 1 1 auto;
    width: 100%;
    min-height: 100%;
    padding: 6px 8px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(120,100,50,.25);
    border-radius: 2px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color .12s, box-shadow .12s;
    min-width: 0;
    box-sizing: border-box;
}
.profile-friend:hover {
    border-color: rgba(199,202,149,.55);
    box-shadow: 0 0 10px rgba(200,150,50,.15);
}
.profile-friend-av {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid #555;
}
.profile-friend-av.is-online { border-color: #3ecf6e; box-shadow: 0 0 6px rgba(62,207,110,.45); }
.profile-friend-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-friend-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 0;
    font-size: 10px;
    line-height: 1.2;
    flex: 1;
    align-self: stretch;
}
.profile-friend-info .orange {
    font-size: 9px;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-friend-name {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 11px;
}
.profile-friend-lvl {
    color: #888;
    font-size: 9px;
    margin-top: auto;
}

/* --- EQ doll: character board + absolute slots (eq_bg2.png) --- */
.profile-main-right .profile-ln-banner,
.profile-main-right #lasnoches_profil {
    max-width: 100%;
    width: 100%;
    margin: 0 0 12px;
}
.profile-eq-wrap.decor,
.profile_bg .profile-eq-wrap.decor {
    padding: 12px;
    background-color: rgba(12, 13, 18, .72);
    background-image:
        linear-gradient(180deg, rgba(22,24,31,.7), rgba(12,13,18,.78)),
        url('../img/belka_bg.png');
    background-position: center top, center bottom -5px;
    background-repeat: no-repeat, repeat-x;
    border: 1px solid rgba(58,61,72,.7);
    border-radius: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.profile-eq-stage {
    display: flex;
    justify-content: center;
    padding: 4px 0 2px;
}
.profile-eq {
    position: relative;
    width: 380px;
    height: 570px;
    margin: 0 auto;
    background-color: #0a0a0c;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    border-radius: 2px;
    box-shadow: 0 0 0 1px #22252e, inset 0 0 40px rgba(0,0,0,.45);
}
.profile-eq ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 380px;
    height: 570px;
}
.profile-eq li {
    position: absolute;
    width: 60px;
    height: 60px;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: box-shadow .15s, border-color .15s;
}
.profile-eq li.is-filled {
    background: rgba(0,0,0,.35);
}
.profile-eq li:hover {
    z-index: 3;
}
.profile-eq li.rarity-normal { border-color: #9a9a9a; box-shadow: 0 0 8px rgba(160,160,160,.35); }
.profile-eq li.rarity-unique { border-color: #24ff00; box-shadow: 0 0 10px rgba(36,255,0,.45); }
.profile-eq li.rarity-rare { border-color: #3d7cff; box-shadow: 0 0 10px rgba(61,124,255,.5); }
.profile-eq li.rarity-epic { border-color: #a200ff; box-shadow: 0 0 12px rgba(162,0,255,.5); }
.profile-eq li.rarity-legendary { border-color: #ffb400; box-shadow: 0 0 12px rgba(255,180,0,.55); }
.profile-eq li.rarity-event { border-color: #ff6a3d; box-shadow: 0 0 10px rgba(255,106,61,.45); }
.profile-eq li.rarity-special { border-color: #c7ca95; box-shadow: 0 0 10px rgba(199,202,149,.4); }
.profile-eq li img {
    max-width: 54px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.85));
    display: block;
}
.profile-eq li img.tt_item,
.profile-eq li img.tt_zanek {
    pointer-events: auto;
    cursor: help;
}
/* slot map = eq_bg2.png (380×570) */
.profile-eq li:nth-child(1) { top: 23px; left: 160px; }     /* głowa */
.profile-eq li:nth-child(2) { top: 95px; left: 160px; }     /* amulet */
.profile-eq li:nth-child(3) { top: 165px; left: 160px; }    /* ubranie */
.profile-eq li:nth-child(4) { top: 264px; left: 81px; }     /* rękawice */
.profile-eq li:nth-child(5) { top: 265px; left: 160px; }    /* pas */
.profile-eq li:nth-child(6) { top: 265px; left: 241px; }    /* pierścień */
.profile-eq li:nth-child(7) { top: 366px; left: 28px; }     /* broń */
.profile-eq li:nth-child(8) { top: 359px; left: 160px; }    /* spodnie */
.profile-eq li:nth-child(9) { top: 469px; left: 160px; }    /* buty */
.profile-eq li:nth-child(10) { top: 470px; left: 38px; }    /* zanpakutō */

/* Questlog (kept) */
.profile-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(26,26,32,.94), rgba(12,12,16,.94));
    border: 1px solid rgba(199,202,149,.28);
    border-radius: 5px;
}
.profile-header--compact { align-items: center; }
.profile-header-sub {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(199,202,149,.7);
}
.profile-quest-list { display: flex; flex-direction: column; gap: 10px; }
.profile-quest {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(26,26,32,.92), rgba(10,10,14,.95));
    border: 1px solid rgba(199,202,149,.22);
    border-radius: 5px;
    animation: trainFadeIn .35s ease both;
}
.profile-quest.is-dimmed { opacity: .55; }
.profile-quest.is-main { border-color: rgba(255,207,107,.4); }
.profile-quest-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}
.profile-quest-badge {
    display: inline-block;
    margin-bottom: 4px;
    padding: 2px 7px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #1a1408;
    background: #c7a14a;
    border-radius: 2px;
}
.profile-quest-title { margin: 0; font-size: 16px; color: #fff; }
.profile-quest-track {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: #c7ca95 !important;
    border: 1px solid rgba(199,202,149,.3);
    border-radius: 3px;
    text-decoration: none !important;
    white-space: nowrap;
}
.profile-quest-track.is-on { color: #e8c56a !important; border-color: rgba(232,197,106,.4); }
.profile-quest-loc { font-size: 12px; color: #9aa0a6; margin-bottom: 6px; }
.profile-quest-loc span { color: #c7ca95; margin-left: 4px; }
.profile-quest-desc { margin: 0; font-size: 13px; color: #bbb; line-height: 1.45; }
.profile-quest-empty { text-align: center; padding: 36px 20px; }
.profile-quest-empty i { font-size: 28px; color: #c7ca95; margin-bottom: 10px; display: block; }
.profile-quest-empty strong { display: block; color: #fff; margin-bottom: 6px; }

/* —— Odznaczenia (profile/achievements) —— */
.achievements_bg {
    background: rgba(0, 0, 0, .72);
    min-height: 0;
    border-radius: 8px;
    padding: 14px 14px 22px;
    border: 1px solid rgba(199, 202, 149, .22);
    margin-bottom: 48px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
}
.ach-top-actions {
    display: flex;
    justify-content: center;
    margin: 0 0 14px;
}
.ach-profile-btn {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 160px;
    max-width: 100%;
    height: 42px;
    line-height: 42px;
    padding: 0 22px;
    background-size: 100% 100% !important;
    font-size: 13px;
    text-decoration: none !important;
    color: #fff !important;
}
.ach-active-panel {
    margin: 0 0 14px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 8px;
}
.ach-active-hint {
    margin: 0 0 6px;
    font-size: 13px;
    line-height: 1.45;
    text-align: center;
    color: #e8e4d4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
}
.ach-drag-hint {
    margin: 0 0 14px;
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
    color: #c7ca95;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .9;
}
.ach-active-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
    justify-content: center;
    min-height: 56px;
}
.ach-active-strip li,
.ach-slot {
    margin: 0;
    line-height: 0;
    list-style: none;
}
.ach-slot.is-filled {
    cursor: grab;
}
.ach-slot.is-filled.ui-sortable-helper {
    cursor: grabbing;
    z-index: 20;
}
.ach-slot-placeholder {
    width: 48px;
    height: 48px;
    box-sizing: border-box;
    border: 1px dashed rgba(232, 197, 106, .55);
    border-radius: 4px;
    background: rgba(232, 197, 106, .12);
}
.ach-active-ico {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    padding: 4px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(199, 202, 149, .35);
    border-radius: 4px;
    opacity: 1 !important;
    visibility: visible !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.ach-active-ico.is-empty {
    opacity: .55 !important;
    filter: none;
}
.ach-active-count {
    margin: 12px 0 0;
    text-align: center;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c7ca95;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
.ach-empty {
    text-align: center;
    padding: 36px 20px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 8px;
    color: #d8d4c4;
}
.ach-empty strong {
    display: block;
    color: #c7ca95;
    font-size: 15px;
    margin-bottom: 8px;
}
.ach-empty p {
    margin: 0;
    font-size: 13px;
    color: #b8b4a4;
}
.ach-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ach-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) minmax(100px, 150px) auto;
    gap: 10px 12px;
    align-items: center;
    padding: 12px 14px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 8px;
    animation: trainFadeIn .35s ease both;
}
.ach-row.is-visible {
    border-color: rgba(232, 197, 106, .45);
    box-shadow: inset 0 0 0 1px rgba(232, 197, 106, .1);
}
.ach-row-ico { line-height: 0; }
.ach-row-ico img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .5));
}
.ach-row-body { min-width: 0; }
.ach-row-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #ecf28d;
    line-height: 1.25;
    margin-bottom: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.ach-row-desc {
    display: block;
    font-size: 12px;
    color: #c8c4b4;
    line-height: 1.35;
}
.ach-row-prog { min-width: 0; }
.ach-prog-track {
    height: 7px;
    background: rgba(0, 0, 0, .65);
    border: 1px solid rgba(199, 202, 149, .15);
    border-radius: 3px;
    overflow: hidden;
}
.ach-prog-bar {
    height: 100%;
    background: linear-gradient(90deg, #1e8a0a, #3ec41a);
    border-radius: 3px;
    min-width: 0;
}
.ach-prog-label {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: #a8a494;
    letter-spacing: .04em;
}
.ach-row-act {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}
.ach-toggle.red_button,
.ach-toggle.gray_button {
    float: none !important;
    display: inline-block !important;
    width: 120px !important;
    max-width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    margin: 0;
    background-size: 100% 100% !important;
    font-size: 12px;
    color: #fff !important;
}
.ach-toggle:disabled { opacity: .55; cursor: wait; }

@media (max-width: 720px) {
    .achievements_bg { margin-bottom: 36px; }
    .ach-row {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            "ico body"
            "prog prog"
            "act act";
    }
    .ach-row-ico { grid-area: ico; }
    .ach-row-body { grid-area: body; }
    .ach-row-act {
        grid-area: act;
        justify-content: center;
    }
    .ach-row-prog { grid-area: prog; }
    .ach-toggle.red_button,
    .ach-toggle.gray_button {
        width: 160px !important;
    }
}

@media (max-width: 1100px) {
    .profile-main { grid-template-columns: 1fr; }
    .profile-main-right { position: static; }
    .profile-eq-stage { overflow-x: auto; }
    .profile-hero-inner {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .profile-hero-side {
        grid-column: 1 / -1;
        width: 100%;
    }
}
@media (max-width: 900px) {
    .profile-friends-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
    .profile-page > .container {
        overflow-x: hidden;
        overflow-y: visible;
        padding-left: 12px;
        padding-right: 12px;
    }
    .profile_bg {
        padding: 10px 0 18px;
        box-sizing: border-box;
        max-width: 100%;
    }
    .profile-main,
    .profile-main-left,
    .profile-main-right,
    .profile-panels,
    .profile-ln-banner,
    #lasnoches_profil {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .profile_bg .profile-hero.decor,
    .profile_bg .profile-skills-block.decor,
    .profile_bg .profile-bio-block.decor,
    .profile_bg .profile-friends-block.decor,
    .profile_bg .profile-panel.decor,
    .profile_bg .profile-eq-wrap.decor {
        overflow: hidden;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .profile_bg .profile-hero.decor:before,
    .profile_bg .profile-skills-block.decor:before,
    .profile_bg .profile-bio-block.decor:before,
    .profile_bg .profile-friends-block.decor:before,
    .profile_bg .profile-panel.decor:before,
    .profile_bg .profile-eq-wrap.decor:before {
        left: 0;
        bottom: 0;
        width: 28px;
        height: 42px;
        background-size: 28px 42px;
        background-position: left bottom;
    }
    .profile_bg .profile-hero.decor:after,
    .profile_bg .profile-skills-block.decor:after,
    .profile_bg .profile-bio-block.decor:after,
    .profile_bg .profile-friends-block.decor:after,
    .profile_bg .profile-panel.decor:after,
    .profile_bg .profile-eq-wrap.decor:after {
        right: 0 !important;
        bottom: 0 !important;
        width: 28px;
        height: 42px;
        background-size: 28px 42px;
        background-position: right bottom;
    }
    .profile-name { font-size: 22px; }
    .profile-avatar-frame { width: 88px; height: 88px; min-width: 88px; }
    .profile-hero-inner { grid-template-columns: 1fr; }
    .profile-hero-side { width: 100%; }
    .profile-combat-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .profile-ach-row { flex-wrap: wrap; }
    .profile-actions-bar { flex-wrap: wrap; }
    .profile-actions-bar .profile-action { flex: 0 0 auto; }
    .profile-skills-grid,
    .profile-panels,
    .profile-soul-grid,
    .profile-friends-list { grid-template-columns: 1fr; }
    .profile-eq {
        transform: scale(.92);
        transform-origin: top center;
        margin-bottom: -40px;
    }
}

/* Profile: Las Noches — jak stary profil (napis w dolnej części ramki) */
.profile-ln-banner,
#lasnoches_profil {
    position: relative;
    display: block;
    width: 100%;
    max-width: none;
    height: 90px;
    margin: 0 0 12px;
    padding: 0 12px 5px;
    box-sizing: border-box;
    color: #fff;
    text-align: center;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    /* stary trik: wyższy line-height → tekst ląduje niżej w grafice */
    line-height: 120px;
    border-radius: 5px;
    background: #000 url('../bg/lasnoches_bg.png') no-repeat center center;
    background-size: cover;
    border: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    overflow: hidden;
}
.profile-ln-banner span,
#lasnoches_profil span {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    text-align: center;
    text-shadow: 0 1px 3px #000, 0 0 10px rgba(0,0,0,.85);
    font-size: 13px;
    line-height: 1.3;
    /* drobna korekta w dół w ramach artu */
    transform: translateY(5px);
    color: #fff;
}
.profile-ln-banner strong,
#lasnoches_profil strong { color: #e0bd5f; }

/* Profile: soul cards (legacy frame bg_karta.png) */
.profile-soul-cards,
ul#soul_cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
}
.profile-soul-cards li,
ul#soul_cards li {
    position: relative;
    width: 136px;
    height: 210px;
    margin: 6px;
    float: none;
    display: block;
}
.profile-soul-cards .soul_name,
ul#soul_cards .soul_name {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 136px;
    height: 210px;
    line-height: 365px;
    text-align: center;
    color: #e7d97c;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: 12px;
    background: url('../profil/bg_karta.png') no-repeat center center;
    background-size: 136px 210px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 6px;
    box-sizing: border-box;
}
.profile-soul-cards .soul_bg,
ul#soul_cards .soul_bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 136px;
    height: 210px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.profile-soul-cards .soul_bg img,
ul#soul_cards .soul_bg img {
    width: 124px;
    height: 192px;
    margin-top: 8px;
    object-fit: cover;
    object-position: top center;
}

.profile-bio-html {
    color: #ddd;
}
.profile-bio-html img { max-width: 100%; height: auto; }
.profile-bio-html a { color: #c7ca95; }

.profile-ach-tt {
    text-align: center;
    max-width: 260px;
    padding: 4px;
}
.profile-ach-tt img {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
}
.profile-ach-tt strong {
    display: block;
    color: #c7ca95;
    margin-bottom: 4px;
    font-size: 13px;
}
.profile-ach-tt p {
    margin: 0;
    font-size: 11px;
    color: #ccc;
    line-height: 1.35;
}
.profile-ach-ico {
    cursor: help;
}
.profile-ach-more { cursor: pointer; display: inline-block; }

/* Achievements modal — solidne tło, bez legacy statement-window / belka stripes */
.profile-ach-modal {
    position: fixed;
    inset: 0;
    z-index: 10000050;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 8vh 12px 24px;
    box-sizing: border-box;
}
.profile-ach-modal.is-open,
.profile-ach-modal[aria-hidden="false"] {
    display: flex !important;
}
.profile-ach-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    backdrop-filter: blur(2px);
}
.profile-ach-modal-box {
    position: relative;
    z-index: 1;
    width: min(560px, calc(100vw - 24px));
    max-height: min(80vh, 640px);
    margin: 0;
    padding: 18px 18px 16px;
    background: #0e0f14 !important;
    background-image: none !important;
    border: 1px solid rgba(199, 162, 68, .42);
    border-radius: 0;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .75);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: #dcd6cc;
    text-align: left;
}
.profile-ach-modal-close {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(199, 162, 68, .35);
    background: rgba(0, 0, 0, .55);
    color: #e4d08a;
    font-size: 22px;
    line-height: 28px;
    cursor: pointer;
}
.profile-ach-modal-close:hover {
    border-color: rgba(199, 162, 68, .7);
    color: #f3df9a;
}
.profile-ach-modal-title {
    margin: 0 40px 14px 0;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(199, 162, 68, .28);
    background: none !important;
    background-image: none !important;
    color: #f0da83 !important;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: left;
}
.profile-ach-modal-title::before,
.profile-ach-modal-title::after {
    content: none !important;
    display: none !important;
}
.profile-ach-modal-body {
    position: relative;
    overflow: auto;
    max-height: calc(80vh - 100px);
    padding-right: 2px;
    background: transparent !important;
    background-image: none !important;
}
.profile-ach-modal-list,
ul#achiev_mini {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    background: transparent !important;
    background-image: none !important;
}
.profile-ach-modal-list li,
ul#achiev_mini li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    float: none !important;
    width: 100%;
    min-height: 48px;
    margin: 0 0 8px !important;
    padding: 10px 12px;
    background: rgba(18, 20, 26, .98) !important;
    background-image: none !important;
    border: 1px solid rgba(60, 64, 74, .9);
    border-radius: 0;
    color: #e8e4dc;
    box-sizing: border-box;
}
.profile-ach-modal-list li:nth-child(odd),
ul#achiev_mini li:nth-child(odd) {
    background: rgba(12, 13, 18, .98) !important;
}
.profile-ach-modal-list li:last-child,
ul#achiev_mini li:last-child {
    margin-bottom: 0 !important;
}
.ach-img_mini {
    width: 40px;
    min-width: 40px;
    height: 40px;
    float: none !important;
}
.ach-img_mini img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    cursor: help;
}
.ach-name_mini {
    flex: 1;
    min-width: 0;
}
.ach-title_mini {
    margin: 0 0 4px;
    color: #e2ba39;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 13px;
    letter-spacing: .02em;
}
.ach-desc_mini {
    margin: 0;
    color: #a8aeb8;
    font: 12px/1.4 Roboto, Helvetica, Arial, sans-serif;
}
.profile-ach-empty {
    display: block !important;
    padding: 24px 12px !important;
    text-align: center;
    color: #9aa0aa !important;
    border-style: dashed !important;
}

@media (max-width: 767px) {
    .profile-ln-banner,
    #lasnoches_profil { max-width: 100%; }
    .profile-soul-cards,
    ul#soul_cards { justify-content: center; }
}

.profile-admin-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin: 0 0 10px;
}
.profile-admin-btn {
    display: inline-block;
    padding: 8px 12px;
    color: #fff !important;
    background: #000;
    border: 1px solid rgba(199,202,149,.35);
    border-radius: 3px;
    text-decoration: none !important;
    font-size: 12px;
}
.profile-admin-btn:hover {
    border-color: #c7ca95;
    color: #c7ca95 !important;
}
.profile-rod a.orange { text-decoration: none; }
.profile-rod a.orange:hover { text-decoration: underline; }

/* ===== Classic item tooltip — 2 kolumny jak stary design (odporne na Bootstrap) ===== */
.tooltipster-base.tooltipster-item,
.tooltipster-item {
    --tt-rarity: #c7ca95;
    --tt-rarity-soft: rgba(199, 202, 149, .35);
    --tt-rarity-glow: rgba(0, 0, 0, .0);
    --tt-rarity-bg: rgba(8, 8, 8, .96);
    border: 1px solid var(--tt-rarity-soft) !important;
    border-radius: 8px !important;
    background: var(--tt-rarity-bg) !important;
    color: #fff !important;
    box-shadow: 0 10px 32px rgba(0,0,0,.85) !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    max-height: calc(100vh - 16px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}
.tooltipster-item .tooltipster-content {
    overflow: visible !important;
    padding: 8px 10px !important;
    font-family: 'PT Sans', Arial, sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    width: auto !important;
    max-width: 540px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Główny blok: ikona | info (ekwipunek) */
.tooltipster-item .item_ramkie {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 520px !important;
    min-width: 520px !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 4px 10px !important;
    float: none !important;
    box-sizing: border-box !important;
    text-align: left !important;
}
.tooltipster-item .item_ramkie:after { display: none !important; }

/* Specjalne / mikstury / waluta — zwarta karta, bez pustej czarnej dziury */
.tooltipster-item .item_ramkie.item_ramkie--special {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 240px !important;
    max-width: 360px !important;
    padding: 10px !important;
    background: linear-gradient(160deg, rgba(28, 26, 18, .92) 0%, rgba(8, 8, 8, .95) 100%) !important;
    border: 1px solid rgba(199, 202, 149, .28) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 1px 0 rgba(232, 197, 106, .08) !important;
}
.tooltipster-item .item_ramkie.item_ramkie--special:has(.item_ramka_prawo) {
    max-width: 420px !important;
    min-width: 300px !important;
}
.tooltipster-item .item_ramkie--special > .item_ramkie-img {
    flex: 0 0 96px !important;
    width: 96px !important;
    max-width: 96px !important;
    padding: 4px 8px 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}
.tooltipster-item .item_ramkie--special > .item_ramkie-img > img {
    max-width: 84px !important;
    width: auto !important;
    height: auto !important;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.65));
}
.tooltipster-item .item_ramkie--special > .item_ramkie-info {
    flex: 1 1 140px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 0 0 4px !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-title {
    background: rgba(0, 0, 0, .4) !important;
    border-color: rgba(199, 202, 149, .22) !important;
    padding: 8px 10px !important;
}
.tooltipster-item .item_ramkie--special .item-special-badge {
    display: inline-block !important;
    margin: 0 0 4px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #1a1810 !important;
    background: linear-gradient(180deg, #e8c56a 0%, #c7ca95 100%) !important;
    border-radius: 3px !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-title h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-title h1 small {
    font-size: inherit !important;
    font-weight: inherit !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-details {
    margin-top: 6px !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-details ul li {
    background: rgba(255, 255, 255, .06) !important;
}
.tooltipster-item .item_ramkie--special .item_ramkie-details ul li:nth-child(odd) {
    background: rgba(0, 0, 0, .35) !important;
}
.tooltipster-item .item_ramkie--special .item-special-hint {
    color: #9a9688 !important;
    font-style: italic !important;
}
.tooltipster-item .item_ramkie--special > .item_ramka_prawo {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 10px !important;
}

/* Zanpakutō tooltip — czytelna karta (bez floatów) */
.tooltipster-item .item_ramkie.item_ramkie--zanek {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 320px !important;
    max-width: 420px !important;
    padding: 12px !important;
    float: none !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-head {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-left {
    float: none !important;
    position: relative !important;
    flex: 0 0 110px !important;
    width: 110px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-left img {
    float: none !important;
    display: block !important;
    width: 110px !important;
    height: 110px !important;
    max-width: 110px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.55));
}
.tooltipster-item .item_ramkie--zanek .zanek-right {
    float: none !important;
    position: relative !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-title {
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(255, 180, 0, .28) !important;
    border-radius: 6px !important;
    background: rgba(0, 0, 0, .35) !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-badge {
    display: inline-block !important;
    margin: 0 0 4px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #1a1408 !important;
    background: linear-gradient(180deg, #ffd56a 0%, #ffb400 100%) !important;
    border-radius: 3px !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-name {
    display: block !important;
    margin: 0 0 6px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: #ffb400 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-meta {
    margin: 2px 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    color: #cfcfcf !important;
    line-height: 1.35 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-meta strong {
    color: #fff !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-forma {
    font-weight: 700 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-forma--shikai {
    color: #ecf28d !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-forma--bankai {
    color: #ff4d4d !important;
}
.tooltipster-item .item_ramkie--zanek ul.zanek-staty {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.tooltipster-item .item_ramkie--zanek ul.zanek-staty li {
    float: none !important;
    display: block !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    min-height: 0 !important;
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 12px !important;
    color: #d8d4c4 !important;
    background: rgba(255, 255, 255, .06) !important;
    border-radius: 3px !important;
    border-left: 2px solid rgba(255, 180, 0, .45) !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie--zanek ul.zanek-staty li:nth-child(odd) {
    background: rgba(0, 0, 0, .35) !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-details {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    color: #cfc8b8 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
    background: rgba(0, 0, 0, .28) !important;
    border: 1px solid rgba(255, 180, 0, .18) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-komenda {
    float: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    text-align: center !important;
    font-size: 12px !important;
    color: #d8d4c4 !important;
    background: rgba(255, 180, 0, .08) !important;
    border: 1px solid rgba(255, 180, 0, .28) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-komenda strong {
    color: #ffd56a !important;
    font-weight: 700 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-signature {
    width: 100% !important;
    padding: 10px 12px !important;
    color: #bdc8d1 !important;
    background: linear-gradient(135deg, rgba(17, 45, 62, .72), rgba(8, 15, 23, .88)) !important;
    border: 1px solid rgba(89, 190, 226, .32) !important;
    border-radius: 6px !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-signature span {
    display: block !important;
    margin-bottom: 4px !important;
    color: #72cce9 !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-signature strong {
    display: block !important;
    color: #f2d56d !important;
    font-family: 'TrajanPro-Regular', Roboto, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.tooltipster-item .item_ramkie--zanek .zanek-signature p {
    margin: 6px 0 0 !important;
    color: #aeb9c3 !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

/* Fallback: stary HTML specjalnych (tylko ikona, bez .item_ramkie) */
.tooltipster-item:not(:has(.item_ramkie)):not(:has(.item_ramka_prawo)) .tooltipster-content {
    max-width: 220px !important;
    padding: 12px 14px !important;
}
.tooltipster-item:not(:has(.item_ramkie-info)) .item_ramkie-img {
    float: none !important;
    width: 100% !important;
    max-width: 200px !important;
    flex: none !important;
    margin: 0 auto !important;
    padding: 4px !important;
}
.tooltipster-item:not(:has(.item_ramkie-info)) .item_ramkie-img > img {
    max-width: 110px !important;
}
.tooltipster-item:not(:has(.item_ramkie-info)) .item-left-i {
    margin-top: 10px !important;
}
.tooltipster-item:not(:has(.item_ramkie-info)) .item-left-i .light {
    display: inline-block !important;
    margin-bottom: 4px !important;
    padding: 2px 8px !important;
    font-size: 9px !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #1a1810 !important;
    background: linear-gradient(180deg, #e8c56a 0%, #c7ca95 100%) !important;
    border-radius: 3px !important;
}
.tooltipster-item:not(:has(.item_ramkie-info)) .item-left-i .ispecial {
    display: block !important;
    margin-top: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ecf28d !important;
}

.tooltipster-item .item_ramkie-img {
    position: relative !important;
    float: none !important;
    flex: 0 0 170px !important;
    width: 170px !important;
    max-width: 170px !important;
    margin: 0 !important;
    padding: 0 6px 0 0 !important;
    text-align: center !important;
}
.tooltipster-item .item_ramkie-img > img {
    display: block !important;
    margin: 0 auto !important;
    max-width: 150px !important;
    width: auto !important;
    height: auto !important;
}

.tooltipster-item .item-left-i {
    position: relative !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #8a8a8a !important;
    font-size: 12px !important;
}
.tooltipster-item .item-left-i small {
    display: inline !important;
    font-size: 12px !important;
}
.tooltipster-item .item-left-i .iunique,
.tooltipster-item .item-left-i .irare,
.tooltipster-item .item-left-i .iepic,
.tooltipster-item .item-left-i .ilegendary,
.tooltipster-item .item-left-i .inormal {
    display: block !important;
    margin-top: 2px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.tooltipster-item .item_ramkie-info {
    position: relative !important;
    float: none !important;
    flex: 1 1 330px !important;
    width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 2px 0 0 8px !important;
    box-sizing: border-box !important;
}

.tooltipster-item .item_ramkie-title {
    position: relative !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 6px 10px !important;
    background: rgba(35, 35, 35, .55) !important;
    border: 1px solid #3b3b3b !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie-title h1 {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.25 !important;
    color: #fff !important;
}
.tooltipster-item .item_ramkie-title .lvl,
.tooltipster-item .item_ramkie-title small.lvl {
    display: block !important;
    margin-top: 3px !important;
    color: #9a9a9a !important;
    font-size: 11px !important;
}

.tooltipster-item .item_ramkie-details {
    position: relative !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    color: #fff !important;
}
.tooltipster-item .item_ramkie-details > img {
    display: block !important;
    margin: 6px 0 4px !important;
    max-width: 100% !important;
    height: auto !important;
}
.tooltipster-item .item_ramkie-details ul {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    list-style: none !important;
    color: #bdbdbd !important;
}
.tooltipster-item .item_ramkie-details ul li {
    display: block !important;
    list-style: none !important;
    min-height: 22px !important;
    height: auto !important;
    margin: 2px 0 !important;
    padding: 3px 10px !important;
    line-height: 18px !important;
    font-size: 11px !important;
    border-radius: 2px !important;
    background: rgba(255, 255, 255, .1) !important;
    box-sizing: border-box !important;
}
.tooltipster-item .item_ramkie-details ul li:nth-child(odd) {
    background: rgba(0, 0, 0, .5) !important;
}
.tooltipster-item .item_ramkie-details ul li.sloulbond {
    margin-top: 8px !important;
    padding: 8px 10px !important;
    text-align: center !important;
    color: #5f5fe2 !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    background: rgba(5, 5, 80, .35) !important;
}
.tooltipster-item .item_ramkie-details ul li p {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sety pod spodem, 2 kolumny */
.tooltipster-item .techsetsy,
.techsetsy {
    display: flex !important;
    flex-wrap: wrap !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    margin: 10px 0 0 !important;
    padding: 8px 2px 2px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}
.tooltipster-item .techsetsy .set-details,
.techsetsy .set-details {
    float: none !important;
    flex: 1 1 48% !important;
    width: 48% !important;
    min-width: 200px !important;
    padding: 0 8px 0 0 !important;
    box-sizing: border-box !important;
}
.tooltipster-item .set-details h3,
.set-details h3 {
    padding: 6px 0 !important;
    margin: 0 0 4px !important;
    font-size: 13px !important;
    color: #e0bd5f !important;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    line-height: 1.3 !important;
}
.tooltipster-item .statset,
.statset {
    border-bottom: 1px solid #181818 !important;
    padding: 4px 0 !important;
    width: 100% !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

.tooltipster-item h1,
.tooltipster-item h2,
.tooltipster-item h3,
.tooltipster-item h4,
.tooltipster-item h5 {
    font-family: inherit;
}
.tooltipster-item ul { list-style: none !important; }
.tooltipster-item small { font-size: 11px; }

/* kolory rzadkości / statów */
.tooltipster-item .inormal,
.inormal { color: #d4d4d4 !important; }
.tooltipster-item .iunique,
.iunique { color: #24ff00 !important; }
.tooltipster-item .irare,
.irare { color: #3d7cff !important; }
.tooltipster-item .iepic,
.iepic { color: #a200ff !important; }
.tooltipster-item .ilegendary,
.ilegendary { color: #ffb400 !important; }
.tooltipster-item .ievent,
.ievent { color: #ff6a3d !important; }
.tooltipster-item .ispecial,
.ispecial { color: #c7ca95 !important; }

/* Tła / ramki tooltipa wg rzadkości */
.tooltipster-item:has(.item-rarity-normal),
.tooltipster-item:has(.inormal) {
    --tt-rarity: #9a9a9a;
    --tt-rarity-soft: rgba(154, 154, 154, .22);
    --tt-rarity-glow: rgba(154, 154, 154, .18);
    --tt-rarity-bg: linear-gradient(165deg, rgba(42,42,42,.97) 0%, rgba(10,10,10,.98) 55%, rgba(6,6,6,.99) 100%);
}
.tooltipster-item:has(.item-rarity-unique),
.tooltipster-item:has(.iunique) {
    --tt-rarity: #24ff00;
    --tt-rarity-soft: rgba(36, 255, 0, .28);
    --tt-rarity-glow: rgba(36, 255, 0, .2);
    --tt-rarity-bg: linear-gradient(165deg, rgba(12, 36, 14, .97) 0%, rgba(6, 14, 8, .98) 55%, rgba(4, 8, 5, .99) 100%);
}
.tooltipster-item:has(.item-rarity-rare),
.tooltipster-item:has(.irare) {
    --tt-rarity: #3d7cff;
    --tt-rarity-soft: rgba(61, 124, 255, .32);
    --tt-rarity-glow: rgba(61, 124, 255, .22);
    --tt-rarity-bg: linear-gradient(165deg, rgba(12, 22, 48, .97) 0%, rgba(6, 10, 22, .98) 55%, rgba(4, 6, 14, .99) 100%);
}
.tooltipster-item:has(.item-rarity-epic),
.tooltipster-item:has(.iepic) {
    --tt-rarity: #a200ff;
    --tt-rarity-soft: rgba(162, 0, 255, .32);
    --tt-rarity-glow: rgba(162, 0, 255, .22);
    --tt-rarity-bg: linear-gradient(165deg, rgba(36, 10, 48, .97) 0%, rgba(16, 6, 24, .98) 55%, rgba(8, 4, 14, .99) 100%);
}
.tooltipster-item:has(.item-rarity-legendary),
.tooltipster-item:has(.ilegendary) {
    --tt-rarity: #ffb400;
    --tt-rarity-soft: rgba(255, 180, 0, .35);
    --tt-rarity-glow: rgba(255, 180, 0, .25);
    --tt-rarity-bg: linear-gradient(165deg, rgba(48, 34, 8, .97) 0%, rgba(22, 14, 4, .98) 55%, rgba(10, 8, 2, .99) 100%);
}
.tooltipster-item:has(.item-rarity-event),
.tooltipster-item:has(.ievent) {
    --tt-rarity: #ff6a3d;
    --tt-rarity-soft: rgba(255, 106, 61, .32);
    --tt-rarity-glow: rgba(255, 106, 61, .22);
    --tt-rarity-bg: linear-gradient(165deg, rgba(48, 18, 10, .97) 0%, rgba(22, 8, 6, .98) 55%, rgba(12, 4, 4, .99) 100%);
}
.tooltipster-item:has(.item-rarity-special),
.tooltipster-item:has(.ispecial) {
    --tt-rarity: #c7ca95;
    --tt-rarity-soft: rgba(199, 202, 149, .3);
    --tt-rarity-glow: rgba(199, 202, 149, .2);
    --tt-rarity-bg: linear-gradient(165deg, rgba(34, 32, 18, .97) 0%, rgba(14, 14, 10, .98) 55%, rgba(8, 8, 6, .99) 100%);
}

.tooltipster-base.tooltipster-item:has(.item-rarity-normal),
.tooltipster-base.tooltipster-item:has(.item-rarity-unique),
.tooltipster-base.tooltipster-item:has(.item-rarity-rare),
.tooltipster-base.tooltipster-item:has(.item-rarity-epic),
.tooltipster-base.tooltipster-item:has(.item-rarity-legendary),
.tooltipster-base.tooltipster-item:has(.item-rarity-event),
.tooltipster-base.tooltipster-item:has(.item-rarity-special),
.tooltipster-item:has(.item-rarity-normal),
.tooltipster-item:has(.item-rarity-unique),
.tooltipster-item:has(.item-rarity-rare),
.tooltipster-item:has(.item-rarity-epic),
.tooltipster-item:has(.item-rarity-legendary),
.tooltipster-item:has(.item-rarity-event),
.tooltipster-item:has(.item-rarity-special),
.tooltipster-item:has(.inormal),
.tooltipster-item:has(.iunique),
.tooltipster-item:has(.irare),
.tooltipster-item:has(.iepic),
.tooltipster-item:has(.ilegendary),
.tooltipster-item:has(.ievent),
.tooltipster-item:has(.ispecial) {
    border-color: var(--tt-rarity-soft) !important;
    background: var(--tt-rarity-bg) !important;
    box-shadow: 0 12px 36px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.4), 0 0 28px var(--tt-rarity-glow) !important;
}
.tooltipster-item .item_ramkie.item-rarity-normal,
.tooltipster-item .item_ramkie.item-rarity-unique,
.tooltipster-item .item_ramkie.item-rarity-rare,
.tooltipster-item .item_ramkie.item-rarity-epic,
.tooltipster-item .item_ramkie.item-rarity-legendary,
.tooltipster-item .item_ramkie.item-rarity-event,
.tooltipster-item .item_ramkie.item-rarity-special {
    position: relative !important;
}
.tooltipster-item .item_ramkie.item-rarity-normal::before,
.tooltipster-item .item_ramkie.item-rarity-unique::before,
.tooltipster-item .item_ramkie.item-rarity-rare::before,
.tooltipster-item .item_ramkie.item-rarity-epic::before,
.tooltipster-item .item_ramkie.item-rarity-legendary::before,
.tooltipster-item .item_ramkie.item-rarity-event::before,
.tooltipster-item .item_ramkie.item-rarity-special::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 3px !important;
    border-radius: 2px 2px 0 0 !important;
    background: linear-gradient(90deg, transparent, var(--tt-rarity), transparent) !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.tooltipster-item .item_ramkie-title {
    border-color: var(--tt-rarity-soft, #3b3b3b) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03) !important;
}
.tooltipster-item .item_ramkie-details ul li {
    border-left: 2px solid transparent !important;
}
.tooltipster-item:has(.item-rarity-unique) .item_ramkie-details ul li:nth-child(odd),
.tooltipster-item:has(.item-rarity-rare) .item_ramkie-details ul li:nth-child(odd),
.tooltipster-item:has(.item-rarity-epic) .item_ramkie-details ul li:nth-child(odd),
.tooltipster-item:has(.item-rarity-legendary) .item_ramkie-details ul li:nth-child(odd),
.tooltipster-item:has(.item-rarity-event) .item_ramkie-details ul li:nth-child(odd),
.tooltipster-item:has(.item-rarity-special) .item_ramkie-details ul li:nth-child(odd) {
    border-left-color: var(--tt-rarity-soft) !important;
}

.tooltipster-item .white,
.item_ramkie .white { color: #fff !important; }
.tooltipster-item .green,
.item_ramkie .green,
.statset.green { color: #24ff00 !important; }
.tooltipster-item .gold,
.item_ramkie .gold { color: #ffb400 !important; }
.tooltipster-item .orange,
.item_ramkie .orange { color: #ff8a3d !important; }
.tooltipster-item .blue,
.item_ramkie .blue { color: #3d9eff !important; }
.tooltipster-item .purple,
.item_ramkie .purple { color: #b06bff !important; }
.tooltipster-item .red2,
.item_ramkie .red2 { color: #ff4d4d !important; }
.tooltipster-item .light,
.item_ramkie .light { color: #bdbdbd !important; }
.tooltipster-item .gray,
.item_ramkie .gray,
.statset.gray { color: #777 !important; }

/* Zawartość skrzyni w sklepie (ajax/item + shop id) */
.tooltipster-item .item_ramka_prawo {
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 8px 0 0 !important;
    padding: 10px 12px !important;
    box-sizing: border-box !important;
    background: rgba(12, 12, 10, .72) !important;
    border: 1px solid rgba(199, 202, 149, .28) !important;
    border-radius: 6px !important;
    clear: both !important;
}
.tooltipster-item .item_ramka_prawo h1 {
    margin: 0 0 8px !important;
    padding: 0 0 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
    color: #c7ca95 !important;
    border-bottom: 1px solid rgba(199, 202, 149, .22) !important;
    text-align: left !important;
}
.tooltipster-item ul#cozawiera {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    text-align: left !important;
}
.tooltipster-item ul#cozawiera li {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 6px 4px !important;
    line-height: 1.3 !important;
    color: #e8e4d4 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
    box-sizing: border-box !important;
}
.tooltipster-item ul#cozawiera li:last-child {
    border-bottom: 0 !important;
}
.tooltipster-item .cozawiera-img {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
}
.tooltipster-item .cozawiera-img img {
    max-width: 36px !important;
    max-height: 36px !important;
    width: auto !important;
    height: auto !important;
}
.tooltipster-item .cozawiera-txt {
    float: none !important;
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 12px !important;
    color: #d8d4c4 !important;
}
.tooltipster-item .cozawiera-txt strong {
    color: #ecf28d !important;
    font-weight: 700 !important;
}

/* ===== Character select — 3 kolumny (lista | scena | info) ===== */
body.cs-page {
    height: 100vh;
    overflow: hidden !important;
    background-color: #000 !important;
    background-blend-mode: normal !important;
}
body.cs-page.gameBody {
    height: 100vh;
    overflow: hidden !important;
    background-color: #000;
    background-blend-mode: normal;
}

#createChar.modal.show,
#csLogoutModal.modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 16px !important;
}
#createChar .modal-dialog,
#csLogoutModal .modal-dialog {
    margin: 0 auto !important;
    width: 100%;
    max-width: 480px;
}
#createChar .modal-content,
#csLogoutModal .modal-content {
    background: #1a1a1c;
    border: 1px solid rgba(196, 140, 48, .45);
}
#csLogoutModal .modal-body {
    color: #e8e2d2;
    font-size: 15px;
}
#csLogoutModal .cs-logout-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
#csLogoutModal .cs-logout-confirm {
    float: none !important;
    display: inline-block !important;
    margin: 0 !important;
}

.cs-page-wrap {
    position: relative;
    height: 100vh;
    max-height: 100vh;
    box-sizing: border-box;
    /* miejsce na belki decor wystające poza panele (~4–6px) */
    padding: 12px 18px 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cs-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.cs-shell {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px);
    gap: 12px;
    width: 100%;
    max-width: 1400px;
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
.cs-panel {
    position: relative;
    box-sizing: border-box;
    min-height: 0;
}
/* Panele CS: ten sam dekor co hub / second-panel (decor + decor-new + bg_darker)
   Belki :before/:after mają zostać na zewnętrznych kantach (domyślne left:-4px / right:-3px). */
.cs-page .cs-panel.decor,
.cs-page .cs-topnav.decor,
.cs-page .cs-focus-plate.decor {
    box-shadow: none;
    border: 0;
    border-radius: 0;
    background-color: rgba(0, 0, 0, .9);
    background-image: url('../img/belka_bg.png');
    background-position: center bottom -5px;
    background-repeat: repeat-x;
    overflow: visible;
}
.cs-page .cs-panel.decor.decor-new {
    padding: 10px 12px 16px;
    text-align: left;
}
.cs-page .cs-panel--info.decor {
    /* scroll wewnątrz bloków, nie na panelu — inaczej belki by się obcięły */
    overflow: visible;
}
.cs-page .cs-topnav.decor.decor-new {
    padding: 0;
    text-align: center;
    overflow: visible;
}
.cs-page .cs-focus-plate.decor.decor-new {
    padding: 16px 28px 22px;
    text-align: center;
    overflow: visible;
}
.cs-page .cs-foot .ga-button.decor {
    overflow: visible;
    display: inline-block;
    position: relative;
}
.cs-panel--list,
.cs-panel--info {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.cs-panel--list .cs-list {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    flex: 1 1 auto;
}
.cs-panel--info > .cs-info-block {
    flex: 0 0 auto;
}

/* Language switcher */
.cs-lang {
    flex: 0 0 auto;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.cs-lang-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 10px;
    color: #e8e2d2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.cs-lang-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid rgba(255, 255, 255, .1);
    background: rgba(0, 0, 0, .35);
    color: #e8e2d2 !important;
    text-decoration: none !important;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.cs-lang-item:hover {
    border-color: rgba(239, 173, 77, .55);
    background: rgba(0, 0, 0, .55);
}
.cs-lang-item.is-active {
    border-color: rgba(239, 173, 77, .85);
    background: linear-gradient(90deg, rgba(140, 55, 12, .35), rgba(0, 0, 0, .45));
    box-shadow: inset 0 0 0 1px rgba(239, 173, 77, .2);
}
.cs-lang-flag {
    flex: 0 0 auto;
    width: 34px;
    height: 24px;
    border: 1px solid rgba(255, 255, 255, .18);
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.cs-lang-flag img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-lang-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
}
.cs-lang-badge {
    flex: 0 0 auto;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #1a1208;
    background: #efad4d;
}
.cs-lang--mobile {
    display: none;
}
.cs-actions-row {
    display: none;
}
.cs-panel-head,
.cs-info-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #e8e2d2;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.cs-panel-head em {
    margin-left: auto;
    font-style: normal;
    letter-spacing: .04em;
    color: #c7ca95;
    font-weight: 600;
    font-size: 13px;
}
.cs-diamond {
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    background: #c48c30;
    box-shadow: 0 0 6px rgba(196, 140, 48, .55);
    flex: 0 0 auto;
}
.cs-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 2px;
    -webkit-overflow-scrolling: touch;
}
.cs-card {
    position: relative;
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 1px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 6px 8px 6px 6px;
    text-align: left;
    color: #fff;
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .1);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    flex: 0 0 auto;
}
.cs-card:hover {
    background: rgba(255, 255, 255, .06);
    border-color: rgba(196, 140, 48, .45);
}
.cs-card.is-active {
    background: rgba(120, 40, 12, .28);
    border-color: #e08a2a;
    box-shadow: 0 0 0 1px rgba(224, 138, 42, .35), 0 0 18px rgba(180, 60, 10, .25);
}
.cs-card-lvl {
    position: absolute;
    left: 3px;
    top: 3px;
    z-index: 2;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 22px;
    padding: 2px 5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    color: #fff;
    background: rgba(0, 0, 0, .85);
    border: 1px solid #c48c30;
}
.cs-card-lvl b {
    font-weight: 700;
    font-style: normal;
}
.cs-card-lvl i {
    font-style: normal;
    font-weight: 600;
    font-size: .78em;
    letter-spacing: .04em;
    text-transform: lowercase;
    color: #efad4d;
    opacity: .95;
}
.cs-card-crest {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 2;
    width: 16px;
    height: 16px;
    object-fit: contain;
    opacity: .9;
}
.cs-card-av {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    background: #111 center / cover no-repeat;
    border: 1px solid rgba(196, 140, 48, .5);
}
.cs-card-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 16px;
}
.cs-card-meta strong {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-card-meta small {
    font-size: 12px;
    color: #c7ca95;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-card-meta em {
    font-size: 11px;
    font-style: normal;
    color: #888;
}
.cs-card--empty {
    grid-template-columns: 48px 1fr;
    border-style: dashed;
    border-color: rgba(255, 255, 255, .22);
    background: rgba(0, 0, 0, .2);
}
.cs-card--empty .cs-card-empty-mark {
    grid-row: 1 / span 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 300;
    color: rgba(255, 255, 255, .7);
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .04);
}
.cs-card--empty.is-locked {
    cursor: default;
    opacity: .55;
}
.cs-panel--stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 0;
    height: 100%;
    padding: 0 8px;
    background: transparent;
}
.cs-topnav-wrap {
    position: relative;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    flex: 0 0 auto;
    z-index: 5;
}
.cs-nav-toggle {
    display: none;
    width: 42px;
    height: 36px;
    margin: 0 auto 6px;
    padding: 8px 9px;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(196, 140, 48, .45);
    cursor: pointer;
}
.cs-nav-toggle span {
    display: block;
    height: 2px;
    background: #efad4d;
    transition: transform .2s ease, opacity .2s ease;
}
.cs-topnav {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0;
}
.cs-topnav-link {
    flex: 1 1 auto;
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: #e6e6e6 !important;
    text-decoration: none !important;
    border-right: 1px solid rgba(255, 255, 255, .12);
    white-space: nowrap;
}
.cs-topnav-link:last-child {
    border-right: 0;
}
.cs-topnav-link:hover {
    color: #efad4d !important;
    background: rgba(255, 255, 255, .04);
}
.cs-stage-focus {
    width: 100%;
    max-width: 480px;
    text-align: center;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .85);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 0 24px;
    min-height: 0;
}
.cs-logo {
    display: block;
    width: auto;
    max-width: min(340px, 58vw);
    height: auto;
    max-height: 120px;
    margin: 0 auto 18px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .75));
    flex: 0 0 auto;
}
.cs-focus-plate {
    width: 100%;
    max-width: 420px;
    margin: 0 auto 22px;
    padding: 16px 28px 18px;
    box-sizing: border-box;
    text-align: center;
}
.cs-focus-name {
    margin: 0 0 8px;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: clamp(28px, 4.2vw, 52px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .04em;
    color: #fff;
    text-transform: uppercase;
}
.cs-focus-rod {
    margin: 0;
    font-size: 15px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #e24a2a;
    font-weight: 600;
}
.cs-enter {
    float: none !important;
    display: inline-block !important;
    margin: 0 auto !important;
}
.cs-enter-slot {
    display: none;
}
.cs-enter.red_button,
.cs-enter.gray_button {
    width: 260px;
    height: 68px;
    line-height: 68px;
    background-size: 100% 100%;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cs-info-block {
    margin-bottom: 10px;
    flex: 0 0 auto;
}
.cs-info-block:last-child {
    margin-bottom: 0;
}
.cs-info-lvl {
    text-align: center;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.cs-lvl-wrap {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
}
.cs-lvl-num {
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    font-size: clamp(32px, 4vh, 44px);
    font-weight: 700;
    line-height: 1;
    color: #e24a2a;
    text-shadow: 0 0 18px rgba(226, 74, 42, .35);
}
.cs-lvl-tag {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: lowercase;
    color: #c7ca95;
    opacity: .9;
    transform: translateY(-2px);
}
.cs-xp-bar {
    position: relative;
    height: 5px;
    margin: 8px 6px 4px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(196, 140, 48, .25);
    overflow: hidden;
}
.cs-xp-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #8b1e0e, #e08a2a);
    transition: width .25s ease;
}
.cs-xp-text {
    font-size: 12px;
    color: #bbb;
}
.cs-skills {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cs-skills li {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, .05);
    font-size: 13px;
    color: #ddd;
}
.cs-skills li:last-child {
    border-bottom: 0;
}
.cs-skills strong {
    color: #fff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.cs-skills .akcjaikona-inline {
    margin: 0;
    transform: scale(.8);
    transform-origin: left center;
}
.cs-map-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    background: rgba(0, 0, 0, .28);
    border: 1px solid rgba(255, 255, 255, .08);
}
.cs-map-preview {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(30, 34, 28, .75), rgba(10, 12, 10, .85)),
        repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(255,255,255,.03) 8px);
    border: 1px solid rgba(196, 140, 48, .3);
    image-rendering: pixelated;
}
.cs-map-preview canvas,
.cs-map-fallback {
    image-rendering: pixelated;
}
.cs-map-meta {
    min-width: 0;
}
.cs-map-meta strong {
    display: block;
    font-size: 13px;
    color: #fff;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-map-meta strong[hidden] {
    display: none !important;
}
.cs-map-meta small {
    font-size: 12px;
    color: #999;
}
.cs-eq {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.cs-eq li {
    position: relative;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-eq li.is-filled {
    border-color: rgba(196, 140, 48, .55);
    box-shadow: inset 0 0 10px rgba(196, 140, 48, .12);
}
.cs-eq li img {
    max-width: 85%;
    max-height: 85%;
    object-fit: contain;
}
.cs-col--right {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    gap: 8px;
}
.cs-col--right .cs-panel--info {
    flex: 1 1 auto;
    min-height: 0;
}
.cs-foot {
    width: 100%;
    margin: 0;
    padding: 2px 2px 0;
    text-align: right;
    flex: 0 0 auto;
}
.cs-foot .ga-button {
    display: inline-block;
    margin-bottom: 4px;
    padding: 8px 14px;
    font-size: 14px;
}
.cs-foot p {
    margin: 0;
    font-size: 11px;
    color: #888;
}

@media (max-width: 1100px) {
    body.cs-page,
    body.cs-page.gameBody {
        height: auto;
        min-height: 100vh;
        overflow: auto !important;
    }
    .cs-page-wrap {
        height: auto;
        max-height: none;
        overflow: visible;
        min-height: 100vh;
    }
    .cs-shell {
        grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
        grid-template-rows: auto auto;
        height: auto;
    }
    .cs-panel--list {
        grid-column: 1;
        grid-row: 1 / span 2;
        max-height: calc(100vh - 24px);
    }
    .cs-panel--stage {
        grid-column: 2;
        grid-row: 1;
        min-height: 280px;
        height: auto;
    }
    .cs-col--right {
        grid-column: 2;
        grid-row: 2;
        height: auto;
    }
    .cs-topnav-wrap {
        max-width: 100%;
    }
    .cs-topnav-link {
        padding: 9px 6px;
        font-size: 11px;
    }
}

/* ===== Character select — MOBILE: 1 ekran, zero scrollbarów ===== */
@media (max-width: 767px) {
    html:has(body.cs-page) {
        overflow: hidden !important;
        height: 100%;
    }
    body.cs-page,
    body.cs-page.gameBody {
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 0 !important;
        overflow: hidden !important;
        overscroll-behavior: none;
    }
    .cs-page-wrap,
    .cs-shell,
    .cs-panel--list,
    .cs-panel--info,
    .cs-list,
    .cs-col--right {
        overflow: hidden !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .cs-page-wrap::-webkit-scrollbar,
    .cs-shell::-webkit-scrollbar,
    .cs-panel--list::-webkit-scrollbar,
    .cs-panel--info::-webkit-scrollbar,
    .cs-list::-webkit-scrollbar,
    .cs-col--right::-webkit-scrollbar {
        width: 0 !important;
        height: 0 !important;
        display: none !important;
        background: transparent !important;
    }

    .cs-page-wrap {
        height: 100dvh;
        max-height: 100dvh;
        min-height: 0;
        /* miejsce na belki decor na kantach paneli */
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .cs-shell {
        display: flex;
        flex-direction: column;
        gap: 14px;
        height: 100%;
        min-height: 0;
        flex: 1 1 auto;
    }

    .cs-topnav-wrap,
    .cs-logo {
        display: none !important;
    }

    /* ——— GÓRA: imię + ród ——— */
    .cs-panel--stage {
        order: 1;
        flex: 0 0 auto;
        min-height: 0;
        height: auto;
        padding: 0;
    }
    .cs-stage-focus {
        flex: none;
        gap: 0;
        padding: 0;
        justify-content: flex-start;
    }
    .cs-focus-plate {
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 10px 14px 16px;
        overflow: visible;
    }
    .cs-focus-name {
        font-size: clamp(20px, 6vw, 26px);
        margin: 0 0 2px;
        line-height: 1.1;
        letter-spacing: .04em;
    }
    .cs-focus-rod {
        margin: 0;
        font-size: 11px;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: #d4a24a;
        opacity: 1;
    }
    .cs-enter-slot {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 0 0 auto;
        width: auto;
        margin: 0;
        min-height: 0;
    }
    .cs-actions-row {
        display: flex !important;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px 14px;
        flex: 0 0 auto;
        width: 100%;
        margin: 2px 0;
        order: 2;
    }
    .cs-actions-row .cs-logout-trigger {
        float: none !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 8px 14px;
        font-size: 12px;
        letter-spacing: .06em;
        line-height: 1.2;
        white-space: nowrap;
    }
    .cs-enter-slot .cs-enter.red_button,
    .cs-enter-slot .cs-enter.gray_button,
    .cs-enter.red_button,
    .cs-enter.gray_button {
        float: none !important;
        display: inline-block !important;
        width: 193px !important;
        max-width: 193px !important;
        height: 51px !important;
        line-height: 51px !important;
        font-size: 14px !important;
        letter-spacing: .08em;
        margin: 0 !important;
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .55));
    }

    /* ——— DÓŁ: lista + stats/EQ/buttony (margin-top:auto → wolna przestrzeń nad nimi) ——— */
    .cs-panel--list {
        order: 2;
        flex: 0 0 auto;
        margin-top: auto;
        padding: 8px 10px 14px;
        overflow: visible;
    }
    .cs-lang--desktop {
        display: none !important;
    }
    .cs-lang--mobile {
        display: block !important;
        margin-top: 0;
        padding: 8px 6px 4px;
        border-top: 0;
        order: 3;
    }
    .cs-lang--mobile .cs-lang-head {
        margin-bottom: 8px;
        font-size: 10px;
    }
    .cs-lang--mobile .cs-lang-list {
        flex-direction: row;
        justify-content: center;
        gap: 8px;
    }
    .cs-lang--mobile .cs-lang-item {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        text-align: center;
        gap: 5px;
        padding: 8px 6px;
    }
    .cs-lang--mobile .cs-lang-name {
        font-size: 11px;
    }
    .cs-lang--mobile .cs-lang-badge {
        font-size: 8px;
        padding: 1px 5px;
    }
    .cs-foot .cs-logout-trigger--desk {
        display: none !important;
    }

    .cs-panel-head {
        display: none;
    }
    .cs-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 6px;
        padding: 0 !important;
        margin: 0;
        overflow: hidden !important;
    }
    .cs-card {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        padding: 6px 4px 7px !important;
        background: rgba(255, 255, 255, .04);
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: none;
        text-align: center;
    }
    .cs-card.is-active {
        background: linear-gradient(180deg, rgba(140, 55, 12, .42), rgba(40, 18, 6, .55));
        border-color: #efad4d;
        box-shadow: 0 0 0 1px rgba(239, 173, 77, .35), 0 0 14px rgba(180, 80, 10, .35);
    }
    .cs-card-lvl {
        position: static !important;
        order: 2;
        display: inline-flex !important;
        align-items: baseline;
        justify-content: center;
        gap: 3px;
        min-width: 0;
        width: auto;
        margin: 0 auto;
        padding: 2px 6px;
        font-size: 10px;
        line-height: 1.2;
        background: rgba(0, 0, 0, .75);
        border-color: rgba(196, 140, 48, .65);
    }
    .cs-card-lvl b {
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }
    .cs-card-lvl i {
        font-size: 9px;
        letter-spacing: .06em;
    }
    .cs-card-crest {
        display: none !important;
    }
    .cs-card-av {
        order: 1;
        grid-row: auto !important;
        width: clamp(36px, 11vw, 52px) !important;
        height: clamp(36px, 11vw, 52px) !important;
        flex: 0 0 auto;
        margin: 0 auto;
        border-radius: 2px;
        border-color: rgba(196, 140, 48, .55);
        box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
    }
    .cs-card-meta {
        order: 3;
        width: 100%;
        min-width: 0;
        text-align: center;
        display: block;
        padding: 0;
    }
    .cs-card-meta strong {
        display: block;
        font-size: clamp(9px, 2.7vw, 11px);
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .cs-card-meta small,
    .cs-card-meta em {
        display: none !important;
    }
    .cs-card--empty {
        justify-content: center;
        min-height: 0;
    }
    .cs-card--empty .cs-card-empty-mark {
        order: 1;
        width: clamp(36px, 11vw, 52px);
        height: clamp(36px, 11vw, 52px);
        font-size: clamp(20px, 6vw, 28px);
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px dashed rgba(196, 140, 48, .45);
        color: #efad4d;
        background: rgba(0, 0, 0, .25);
    }
    .cs-card--empty .cs-card-meta strong {
        font-size: 9px;
        opacity: .85;
    }
    .cs-card--empty .cs-card-meta small,
    .cs-card--empty .cs-card-meta em {
        display: none !important;
    }

    /* ——— INFO: stats / mapa / EQ ——— */
    .cs-col--right {
        order: 3;
        flex: 0 0 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: flex-start;
    }
    .cs-col--right .cs-panel--info,
    .cs-panel--info {
        flex: 0 0 auto;
        min-height: 0;
        height: auto;
        display: grid !important;
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
        grid-template-rows: auto auto auto;
        gap: 6px 8px;
        align-content: start;
        align-items: stretch;
        padding: 8px 10px 14px !important;
        overflow: visible !important;
        order: 1;
    }
    .cs-col--right .cs-actions-row {
        order: 2;
    }
    .cs-col--right .cs-lang--mobile {
        order: 3;
    }
    .cs-col--right .cs-foot {
        order: 4;
        margin-top: 0;
        flex: 0 0 auto;
    }
    .cs-info-block {
        margin: 0 !important;
        padding: 0 !important;
    }
    .cs-info-label {
        margin: 0 0 4px;
        font-size: 9px;
        letter-spacing: .16em;
        opacity: .9;
    }
    .cs-info-label .cs-diamond {
        width: 4px;
        height: 4px;
    }

    .cs-info-lvl {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 3px;
        align-items: center;
        padding: 6px 8px !important;
        background: linear-gradient(90deg, rgba(40, 24, 8, .55), rgba(0, 0, 0, .35));
        border: 1px solid rgba(196, 140, 48, .35);
    }
    .cs-lvl-wrap {
        grid-row: 1 / span 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0;
        line-height: 1;
    }
    .cs-lvl-num {
        font-size: clamp(22px, 7vw, 30px);
        line-height: 1;
        margin: 0;
        color: #efad4d;
        text-shadow: 0 0 12px rgba(239, 173, 77, .35);
    }
    .cs-lvl-tag {
        font-size: 9px;
        letter-spacing: .16em;
        color: #d4a24a;
        transform: none;
        margin-top: 1px;
    }
    .cs-xp-bar {
        height: 6px;
        margin: 0;
        background: rgba(0, 0, 0, .55);
        border: 1px solid rgba(255, 255, 255, .08);
    }
    .cs-xp-bar > span {
        background: linear-gradient(90deg, #a86a18, #efad4d);
    }
    .cs-xp-text {
        font-size: 10px;
        margin: 0;
        color: #b0b0b0;
    }

    .cs-panel--info > .cs-info-block:nth-child(2) {
        grid-column: 1 / -1;
    }
    .cs-skills {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3px 12px;
        margin: 0;
        padding: 0 2px;
    }
    .cs-skills li {
        padding: 3px 0;
        font-size: 11px;
        border-bottom: 1px solid rgba(255, 255, 255, .06);
        gap: 6px;
    }
    .cs-skills strong {
        font-size: 12px;
        color: #f0f0f0;
    }
    .cs-skills .akcjaikona-inline {
        transform: scale(.8);
        transform-origin: left center;
    }

    .cs-info-map {
        grid-column: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        height: 100%;
        min-height: 0;
    }
    .cs-panel--info > .cs-info-block:last-child {
        grid-column: 2;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-self: stretch;
        height: 100%;
        min-height: 0;
    }

    .cs-map-box {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 6px 5px 5px;
        margin: 0;
        width: 100%;
        min-height: 0;
        height: 100%;
        box-sizing: border-box;
        background:
            radial-gradient(ellipse at center, rgba(50, 70, 90, .35), rgba(6, 8, 12, .92) 70%);
        border: 1px solid rgba(196, 140, 48, .45);
        box-shadow: inset 0 0 14px rgba(0, 0, 0, .55);
    }
    .cs-map-preview {
        width: 40px;
        height: 52px;
        margin: 0;
        background: rgba(0, 0, 0, .4);
        border: 1px solid rgba(239, 173, 77, .25);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 10px rgba(0, 0, 0, .4);
        flex: 0 0 auto;
    }
    .cs-map-preview canvas,
    .cs-map-fallback {
        max-width: 36px;
        max-height: 48px;
    }
    .cs-map-meta {
        text-align: center;
        width: 100%;
        flex: 0 0 auto;
    }
    .cs-map-meta strong {
        font-size: 9px;
        margin: 0;
        color: #e8e8e8;
        line-height: 1.2;
    }
    .cs-map-meta small {
        display: none;
    }

    .cs-eq {
        flex: 0 0 auto;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
        max-width: none;
        margin: 0;
        align-content: start;
        min-height: 0;
        width: 100%;
    }
    .cs-eq li {
        aspect-ratio: 1;
        border-radius: 3px;
        background: linear-gradient(160deg, rgba(36, 36, 42, .98), rgba(8, 8, 10, .98));
        border: 1px solid rgba(255, 255, 255, .12);
        box-shadow: inset 0 0 8px rgba(0, 0, 0, .35);
    }
    .cs-eq li.is-filled {
        border-color: rgba(239, 173, 77, .75);
        box-shadow:
            inset 0 0 10px rgba(196, 140, 48, .2),
            0 0 0 1px rgba(196, 140, 48, .18);
    }
    .cs-eq li img {
        max-width: 76%;
        max-height: 76%;
    }

    .cs-foot {
        order: 4;
        flex: 0 0 auto;
        text-align: center;
        margin: 0;
        padding: 2px 0 0;
    }
    .cs-foot .ga-button {
        display: inline-block;
        margin: 0;
        padding: 5px 10px;
        font-size: 11px;
        letter-spacing: .06em;
        opacity: .85;
    }
    .cs-foot p {
        display: none;
    }
}

/* Niższe telefony — jeszcze ciaśniej, nadal bez scrolla */
@media (max-width: 767px) and (max-height: 720px) {
    .cs-page-wrap {
        padding: 5px 8px calc(5px + env(safe-area-inset-bottom, 0px));
    }
    .cs-shell {
        gap: 10px;
    }
    .cs-focus-plate {
        padding: 7px 10px 14px;
    }
    .cs-focus-name {
        font-size: 18px;
    }
    .cs-enter.red_button,
    .cs-enter.gray_button {
        width: 193px !important;
        max-width: 193px !important;
        height: 51px !important;
        line-height: 51px !important;
        font-size: 13px !important;
    }
    .cs-panel--list,
    .cs-panel--info {
        padding: 6px 8px 14px !important;
    }
    .cs-card {
        padding: 4px 2px 5px !important;
        gap: 2px;
    }
    .cs-card-av,
    .cs-card--empty .cs-card-empty-mark {
        width: 32px !important;
        height: 32px !important;
    }
    .cs-lvl-num {
        font-size: 22px;
    }
    .cs-skills li {
        font-size: 10px;
        padding: 1px 0;
        border-bottom: 0;
    }
    .cs-map-preview {
        width: 36px;
        height: 46px;
    }
    .cs-map-preview canvas,
    .cs-map-fallback {
        max-width: 32px;
        max-height: 42px;
    }
    .cs-eq {
        gap: 3px;
    }
    .cs-info-label {
        margin-bottom: 2px;
        font-size: 8px;
    }
}

@media (max-width: 420px) {
    .cs-list {
        grid-template-columns: none !important;
    }
}



/* ===== SHOP Urahara / Kuźnia ===== */
.shop_bg {
    background-color: rgba(0, 0, 0, .9);
    border-radius: 0;
    padding: 12px 12px 20px;
    border: 0;
    margin-bottom: 12px;
    box-shadow: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
}
.shop-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 10px;
}
.shop-top-titles h1 {
    margin: 0 0 2px;
    color: #c7ca95;
    font-size: 22px;
    font-family: 'TrajanPro-Regular', "Roboto", "Helvetica", "Arial", sans-serif !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.8);
}
.shop-top-titles p {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(199,202,149,.7);
}
.shop-rate-box {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
}
.shop-rate,
.shop-rate-timer {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(199, 202, 149, .28);
    border-radius: 6px;
}
.shop-rate {
    border-color: rgba(232, 197, 106, .35);
}
.shop-rate-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #c7ca95;
}
.shop-rate-value-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.shop-rate-gold-ico {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
.shop-rate-value,
.shop-rate-timer strong {
    font-size: 15px;
    color: #ecf28d;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    text-shadow: 0 1px 2px #000;
}
.shop-rate-clock {
    position: relative;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1.5px solid #c7ca95;
    box-shadow: 0 0 6px rgba(199, 202, 149, .35);
    background: rgba(0, 0, 0, .35);
}
.shop-rate-clock::before,
.shop-rate-clock::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform-origin: 50% 100%;
    background: #ecf28d;
    border-radius: 1px;
}
.shop-rate-clock::before {
    width: 1.5px;
    height: 4px;
    margin-left: -.75px;
    margin-top: -4px;
    animation: shopClockHour 12s linear infinite;
}
.shop-rate-clock::after {
    width: 1.5px;
    height: 5.5px;
    margin-left: -.75px;
    margin-top: -5.5px;
    background: #e8c56a;
    animation: shopClockMin 2s linear infinite;
}
@keyframes shopClockHour {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes shopClockMin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.shop-inactive {
    text-align: center;
    color: #e8e4d4;
    padding: 20px;
    background: rgba(0,0,0,.55);
    border: 1px solid rgba(199,202,149,.22);
    border-radius: 8px;
}

/* Tabs — underline / gold accent, no beige fill */
.shop-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0 0 10px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(199, 202, 149, .28);
    border-radius: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.shop-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}
.shop-tab {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 10px 16px 11px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #9a9688 !important;
    text-decoration: none !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1.2;
    box-shadow: none !important;
    transition: color .15s ease;
}
.shop-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    background: transparent;
    transition: background .15s ease, box-shadow .15s ease;
}
.shop-tab:hover {
    color: #e8c56a !important;
    background: transparent !important;
}
.shop-tab:hover::after {
    background: rgba(232, 197, 106, .45);
}
.shop-tab.is-active {
    color: #ecf28d !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.shop-tab.is-active::after {
    background: #c7ca95;
    box-shadow: 0 0 10px rgba(199, 202, 149, .55);
}

.shop-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin: 0 0 10px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, .5);
    border: 1px solid rgba(199, 202, 149, .18);
    border-radius: 6px;
    font-size: 12px;
    color: #c8c4b4;
}
.shop-toolbar strong { color: #ecf28d; }
.shop-toolbar-left {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}
.shop-toolbar-sep { color: #666; }
.shop-currencies {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.shop-currency {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 7px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(199, 202, 149, .2);
    border-radius: 4px;
    color: #e8e4d4;
    font-weight: 700;
    font-size: 12px;
}

/* Two columns with internal scroll */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
}
.shop-panel.shop-col {
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(199, 202, 149, .22);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.shop-col-head {
    flex: 0 0 auto;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(199, 202, 149, .16);
    background: rgba(0, 0, 0, .35);
}
.shop-col-head h2 {
    margin: 0 0 8px;
    font-size: 12px;
    color: #c7ca95;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.shop-bulk-mini {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 11px;
    color: #b8b4a4;
}
.shop-bulk-mini strong { color: #ecf28d; }
.shop-scroll {
    flex: 1 1 auto;
    max-height: min(58vh, 520px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(199,202,149,.35) rgba(0,0,0,.3);
}
.shop-scroll::-webkit-scrollbar { width: 8px; }
.shop-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.3); border-radius: 4px; }
.shop-scroll::-webkit-scrollbar-thumb {
    background: rgba(199,202,149,.35);
    border-radius: 4px;
}
.shop-empty {
    margin: 24px 8px;
    text-align: center;
    color: #b8b4a4;
    font-size: 13px;
}
.shop-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.shop-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: center;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .45);
    border: 1px solid rgba(199, 202, 149, .16);
    border-radius: 6px;
}
.shop-row.is-selected { border-color: rgba(232, 197, 106, .45); }
.shop-row.is-locked { opacity: .7; }
.shop-row-ico {
    position: relative;
    line-height: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}
.shop-row-ico > img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}
.shop-check { margin: 0; cursor: pointer; line-height: 0; }
.shop-row-body { min-width: 0; }
.shop-row-title {
    display: block;
    font-size: 12px;
    color: #ecf28d;
    line-height: 1.25;
}
.shop-row-lvl {
    display: block;
    font-size: 10px;
    color: #8b9098;
    margin-top: 1px;
}
.shop-cost {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.shop-cost li {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #d8d4c4;
    font-size: 11px;
    font-weight: 700;
}
.shop-sell-price {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 3px;
    color: #d8d4c4;
    font-weight: 700;
    font-size: 12px;
}
.shop-buy-btn,
.shop-sell-btn,
.shop-select-all,
.shop-sell-bulk {
    float: none !important;
    display: inline-block !important;
    width: 108px !important;
    max-width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    margin: 0;
    background-size: 100% 100% !important;
    font-size: 11px;
    color: #fff !important;
    text-decoration: none !important;
}
.shop-select-all,
.shop-sell-bulk {
    width: auto !important;
    min-width: 110px;
    padding: 0 10px;
}
.shop-locked-tag {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8b9098;
}

.shop-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.shop-modal-card {
    position: relative;
    width: 100%;
    max-width: 420px;
    padding: 20px 18px 16px;
    background: rgba(0, 0, 0, .92);
    border: 1px solid rgba(199, 202, 149, .35);
    border-radius: 8px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .65);
    color: #e8e4d4;
}
.shop-modal-card h3 { margin: 0 0 10px; color: #c7ca95; font-size: 15px; }
.shop-modal-card p { margin: 0 0 12px; font-size: 13px; line-height: 1.45; }
.shop-modal-card .ga-input { margin-top: 8px; }
.shop-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #c7ca95;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
.shop-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.shop-modal-actions .red_button,
.shop-modal-actions .gray_button {
    float: none !important;
    width: 120px !important;
    height: 42px;
    line-height: 42px;
    background-size: 100% 100% !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    .shop-grid { grid-template-columns: 1fr; }
    .shop-scroll { max-height: min(42vh, 380px); }
}
@media (max-width: 575px) {
    .shop_bg { padding: 10px 8px 18px; margin-bottom: 36px; }
    .shop-top-titles h1 { font-size: 18px; }
    .shop-tab { padding: 8px 11px; font-size: 10px; }
    .shop-row {
        grid-template-columns: 40px minmax(0, 1fr);
        grid-template-areas:
            "ico body"
            "act act";
    }
    .shop-row-ico { grid-area: ico; }
    .shop-row-body { grid-area: body; }
    .shop-buy-btn,
    .shop-sell-btn,
    .shop-locked-tag {
        grid-area: act;
        justify-self: stretch;
        width: 100% !important;
        text-align: center;
    }
    .shop-bulk-mini .red_button,
    .shop-bulk-mini .gray_button {
        flex: 1 1 calc(50% - 8px);
        width: auto !important;
    }
    .shop-scroll { max-height: 46vh; }
}

/* ===== SHINOI — Musashiya forge ===== */
.shinoi_bg {
    position: relative;
    background-color: rgba(0, 0, 0, .9);
    background-image:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(224, 189, 95, .12), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.78) 100%),
        url('../shinoi/bg.jpg'),
        url('../img/belka_bg.png');
    background-repeat: no-repeat, no-repeat, no-repeat, repeat-x;
    background-position: center, center, top center, center bottom -5px;
    background-size: auto, auto, cover, auto;
    min-height: 640px;
    border-radius: 0;
    padding: 16px 16px 28px;
    margin-bottom: 12px;
    border: 0;
    box-shadow: none;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.shinoi_bg > * { position: relative; z-index: 1; }

.shinoi-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(224, 189, 95, .18);
}
.shinoi-top-titles h1 {
    margin: 0 0 2px;
    color: #e7d6bb;
    font-size: 24px;
    letter-spacing: .02em;
    text-shadow: 0 2px 10px rgba(0,0,0,.85);
}
.shinoi-top-titles p {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: rgba(231, 214, 187, .7);
}
.shinoi-cap {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 118px;
    padding: 8px 14px;
    background: linear-gradient(180deg, rgba(28, 22, 12, .85), rgba(0, 0, 0, .72));
    border: 1px solid rgba(224, 189, 95, .45);
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(224, 189, 95, .12), inset 0 1px 0 rgba(255,255,255,.06);
    text-align: center;
}
.shinoi-cap-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #c7ca95;
}
.shinoi-cap strong {
    font-size: 20px;
    line-height: 1.1;
    color: #ecf28d;
    text-shadow: 0 0 12px rgba(236, 242, 141, .35);
}

.shinoi-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
.shinoi-panel {
    background: rgba(0, 0, 0, .52);
    border: 1px solid rgba(199, 202, 149, .2);
    border-radius: 10px;
    padding: 14px;
    backdrop-filter: blur(3px);
    box-shadow: inset 0 1px 0 rgba(231, 214, 187, .05);
}
.shinoi-panel h2,
.shinoi-panel > strong {
    display: block;
    margin: 0 0 10px;
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #c7ca95;
}
.shinoi-panel.is-hidden,
.shinoi-options.is-hidden,
.shinoi-shard-form.is-hidden,
.shinoi-cost.is-hidden { display: none !important; }

.shinoi-slots {
    list-style: none;
    margin: 0;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 5px;
    max-height: min(70vh, 560px);
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background: rgba(0,0,0,.18);
    border-radius: 8px;
    box-sizing: border-box;
}
.shinoi-slots::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent;
}
.shinoi-slot {
    aspect-ratio: 1 / 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: rgba(0, 0, 0, .42);
    border: 1px solid rgba(40, 36, 28, .95);
    box-sizing: border-box;
    float: none !important;
    overflow: hidden;
}
.shinoi-slot.is-item {
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.shinoi-slot.is-item:hover {
    border-color: rgba(224, 189, 95, .65);
    background: rgba(224, 189, 95, .08);
    box-shadow: 0 0 14px rgba(224, 189, 95, .28);
    transform: translateY(-1px);
}
.shinoi-slot img {
    max-width: 82%;
    max-height: 82%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

.shinoi-work-head {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
}
.shinoi-selected-ico {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, rgba(40, 32, 18, .55), rgba(0,0,0,.5));
    border: 1px solid rgba(224, 189, 95, .28);
    border-radius: 10px;
    box-shadow: inset 0 0 24px rgba(0,0,0,.35);
}
.shinoi-selected-ico img {
    max-width: 96px;
    max-height: 96px;
}
.shinoi-lvl-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 28px;
    padding: 2px 6px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: #e7d6bb;
    background: rgba(0,0,0,.75);
    border: 1px solid rgba(224, 189, 95, .45);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(224, 189, 95, .15);
}
.shinoi-selected-meta { flex: 1 1 auto; min-width: 0; color: #e8e4d4; }
.shinoi-selected-name {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    color: #e0bd5f;
    border-bottom: 1px solid rgba(224, 189, 95, .35);
    padding-bottom: 6px;
}
.shinoi-stat-label {
    display: block;
    margin: 0 0 4px;
    font-size: 11px;
    color: #c7ca95;
}
.shinoi-stat-select,
.shinoi-shard-form .ga-input {
    width: 100%;
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid rgba(224, 189, 95, .45);
    border-radius: 5px;
    background: rgba(0,0,0,.55);
    color: #d8d4c4;
    outline: none;
}
.shinoi-opisy { margin-top: 10px; font-size: 12px; color: #d8d4c4; }
.shinoi-opisy p { margin: 4px 0; }
.shinoi-syn-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
}
.shinoi-syn-row progress {
    flex: 1 1 auto;
    height: 12px;
    border: 0;
    background: #000;
}
.shinoi-syn-row progress::-webkit-progress-bar { background: #000; }
.shinoi-syn-row progress::-webkit-progress-value {
    background: linear-gradient(to bottom, #776c54 0%, #0e0c08 100%);
}
.shinoi-syn-row progress::-moz-progress-bar {
    background: linear-gradient(to bottom, #776c54 0%, #0e0c08 100%);
}

.shinoi-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.shinoi-actions .red_button,
.shinoi-actions .gray_button,
.shinoi-extra-toggles .gray_button,
.shinoi-option-row .gray_button,
.shinoi-shard-form .red_button {
    float: none !important;
    display: inline-block !important;
    width: auto !important;
    min-width: 120px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    background-size: 100% 100% !important;
    color: #fff !important;
    text-decoration: none !important;
}
.shinoi-forge-btn.is-disabled {
    filter: grayscale(1);
    opacity: .55;
    pointer-events: none;
}
.shinoi-extra-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.shinoi-toggle.is-active {
    filter: hue-rotate(70deg) saturate(1.2);
}

.shinoi-cost ul,
.shinoi-res-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.shinoi-cost li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    padding: 4px 8px;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(18,23,34,.9);
    border-radius: 6px;
    color: #e8e4d4;
    font-weight: 700;
    font-size: 12px;
}
.shinoi-cost li img { width: 28px; height: 28px; }

.shinoi-option-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.shinoi-resources { margin-top: 12px; }
.shinoi-res {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(18,23,34,.9);
    cursor: pointer;
    transition: border-color .15s ease;
}
.shinoi-res:hover,
.shinoi-res.is-active {
    border-color: rgba(224, 189, 95, .55);
}
.shinoi-res img { max-width: 48px; max-height: 48px; }
.shinoi-res-amt {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,.65);
    border-radius: 4px;
}
.shinoi-shard-form {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.shinoi-shard-form label {
    width: 100%;
    font-size: 11px;
    color: #c7ca95;
}
.shinoi-shard-form .ga-input { max-width: 140px; }

.shinoi-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.65);
}
.shinoi-modal-card {
    position: relative;
    width: min(420px, 92vw);
    padding: 18px 18px 14px;
    background: rgba(10,10,10,.95);
    border: 1px solid rgba(199,202,149,.3);
    border-radius: 8px;
    color: #e8e4d4;
    box-shadow: 0 12px 36px rgba(0,0,0,.7);
}
.shinoi-modal-card h3 {
    margin: 0 0 10px;
    color: #c7ca95;
    font-size: 16px;
}
.shinoi-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: #c7ca95;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}
.shinoi-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.shinoi-modal-actions .red_button,
.shinoi-modal-actions .gray_button {
    float: none !important;
    width: 120px !important;
    height: 42px;
    line-height: 42px;
    background-size: 100% 100% !important;
    color: #fff !important;
}

@media (max-width: 991px) {
    .shinoi-layout { grid-template-columns: 1fr; }
    .shinoi-slots { max-height: min(50vh, 480px); }
}
@media (max-width: 575px) {
    .shinoi_bg { padding: 10px 8px 20px; margin-bottom: 36px; }
    .shinoi-top-titles h1 { font-size: 18px; }
    .shinoi-slots { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
    .shinoi-work-head { flex-direction: column; align-items: center; text-align: center; }
    .shinoi-actions .red_button,
    .shinoi-actions .gray_button { flex: 1 1 calc(50% - 8px); width: auto !important; }
}

/* ===== Outfit (profile/outfit) ===== */
.outfit_bg {
    position: relative;
    padding: 16px 14px 24px;
    margin-bottom: 12px;
    color: #e8e8e8;
    background-color: rgba(0, 0, 0, .9);
    background-image: url('../img/belka_bg.png');
    background-position: center bottom -5px;
    background-repeat: repeat-x;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.outfit-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.outfit-top-titles h1 {
    margin: 0 0 4px;
    font-size: 22px;
    color: #fff;
    letter-spacing: .02em;
}
.outfit-top-titles p {
    margin: 0;
    max-width: 44ch;
    color: rgba(255, 255, 255, .62);
    font-size: 13px;
    line-height: 1.45;
}
.outfit-hero-preview {
    display: flex;
    align-items: center;
    gap: 12px;
}
.outfit-hero-stage {
    width: 92px;
    height: 100px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000;
    border: 1px solid #222;
}
.outfit-walk {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.outfit-walk canvas,
.outfit-walk-fallback {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
}
.outfit-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .55);
}

.outfit-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 1px solid #1a1a1a;
    overflow-x: auto;
}
.outfit-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, .5);
    padding: 10px 16px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.outfit-tab:hover { color: #fff; }
.outfit-tab.is-active {
    color: #fff;
    border-bottom-color: #c7ca95;
}
.outfit-panel { display: none; }
.outfit-panel.is-active { display: block; }
.outfit-empty {
    margin: 24px 0;
    text-align: center;
    color: rgba(255, 255, 255, .45);
}

.outfit-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}
.outfit-card {
    display: flex;
    flex-direction: column;
    background: #000;
    border: 1px solid #1a1a1a;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.55);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.outfit-card:hover {
    border-color: #333;
}
.outfit-card.is-selected {
    border-color: #c7ca95;
    box-shadow: 0 0 0 1px rgba(199, 202, 149, .35);
}
.outfit-card.is-locked { opacity: .78; }
.outfit-card-stage {
    position: relative;
    height: 220px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: #000;
}
.outfit-card-stage::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .65) 100%);
    z-index: 1;
}
.outfit-card-art {
    position: relative;
    z-index: 0;
    display: block;
    width: auto;
    max-width: 92%;
    height: 96%;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.8));
    image-rendering: auto;
}
.outfit-walk--card {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 2;
    width: 52px;
    height: 64px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000;
    border: 1px solid #222;
    box-shadow: 0 4px 12px rgba(0,0,0,.6);
}
.outfit-card-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 12px 14px;
    border-top: 1px solid #1a1a1a;
    background: #000;
}
.outfit-card-name {
    font-size: 14px;
    color: #fff;
    line-height: 1.25;
}
.outfit-card-lvl {
    font-size: 12px;
    color: rgba(255, 255, 255, .55);
}
.outfit-card-price {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.outfit-card-price.kan-blue {
    color: #009ef7;
    font-weight: bold;
}
.outfit-card-price .icomenu.ikan,
.outfit-card-meta .outfit-buy-btn .icomenu.ikan,
.outfit-confirm-cost-value .icomenu.ikan {
    float: none;
    position: relative;
    display: inline-block;
    margin: 0;
    opacity: 1;
    vertical-align: middle;
}
.outfit-badge {
    display: inline-block;
    margin-top: 4px;
    font-size: 11px;
    color: #c7ca95;
    border: 1px solid rgba(199, 202, 149, .4);
    padding: 2px 8px;
}
.outfit-badge.is-locked {
    color: rgba(255, 255, 255, .4);
    border-color: #333;
}
.outfit-card-meta .outfit-select-btn,
.outfit-card-meta .outfit-buy-btn {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 160px !important;
    height: 42px !important;
    line-height: 1 !important;
    margin: 8px 0 0 !important;
    padding: 0 8px !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-size: 12px;
}

.outfit-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.outfit-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
}
.outfit-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    padding: 22px 20px 16px;
    background: #000;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .75);
    color: #e8e8e8;
}
.outfit-modal-card h3 {
    margin: 0 0 14px;
    padding-right: 28px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .02em;
}
.outfit-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}
.outfit-modal-close:hover { color: #fff; }

.outfit-confirm {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 14px;
    align-items: stretch;
}
.outfit-confirm-stage {
    position: relative;
    min-height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000;
    border: 1px solid #222;
    overflow: hidden;
}
.outfit-confirm-art {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: contain;
    object-position: center bottom;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.8));
}
.outfit-walk--modal {
    position: absolute;
    left: 6px;
    bottom: 6px;
    z-index: 2;
    width: 48px;
    height: 58px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: #000;
    border: 1px solid #333;
}
.outfit-confirm-copy {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}
.outfit-confirm-name {
    display: block;
    font-size: 15px;
    color: #fff;
    line-height: 1.3;
}
.outfit-confirm-q {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
}
.outfit-confirm-cost {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: #0a0a0a;
    border: 1px solid #222;
}
.outfit-confirm-cost-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .45);
}
.outfit-confirm-cost-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}
.outfit-confirm-cost-value.kan-blue {
    color: #009ef7;
}

.outfit-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
}
.outfit-modal-actions .red_button,
.outfit-modal-actions .gray_button {
    float: none !important;
    display: inline-block !important;
    width: 120px !important;
    height: 42px !important;
    line-height: 42px !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

@media (max-width: 575px) {
    .outfit_bg { padding: 12px 10px 20px; }
    .outfit-top-titles h1 { font-size: 18px; }
    .outfit-card-stage { height: 180px; }
    .outfit-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
    .outfit-confirm {
        grid-template-columns: 1fr;
    }
    .outfit-confirm-stage {
        min-height: 160px;
    }
}

/* ===== Matsumura — symbole energii ===== */
.main-raised.matsumura-page {
    margin-top: 4px;
}
.matsumura_bg.container {
    margin-left: auto;
    margin-right: auto;
}
.matsumura_bg {
    position: relative;
    margin-bottom: 48px;
    padding: 12px 16px 20px;
    color: #7f7f7f;
    background-color: transparent;
    background-image: none;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    box-sizing: border-box;
    overflow: visible;
}
.matsumura_bg::before {
    display: none;
}
.matsumura_bg > *:not(.matsumura-active) {
    position: relative;
    z-index: 1;
}

/* Nagłówek: tytuł + timer w jednej belce */
.matsumura-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 18px;
    max-width: 640px;
    margin: 0 0 12px;
}
.matsumura-top-titles {
    flex: 1 1 220px;
    min-width: 0;
}
.matsumura-top-titles h1 {
    margin: 0 0 4px;
    font-size: 18px;
    color: #dcd6cc;
    letter-spacing: .02em;
}
.matsumura-top-titles p {
    margin: 0;
    max-width: 46ch;
    font-size: 12px;
    line-height: 1.4;
    color: rgba(220, 214, 204, .65);
}
.matsumura-reset {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(0,0,0,.55);
    border: 1px solid #2a2a2a;
}
.matsumura-reset span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(220, 214, 204, .55);
}
.matsumura-reset strong {
    font-size: 15px;
    color: #dcd6cc;
}

/* Sklep od razu pod nagłówkiem, pełna szerokość */
.matsumura-shops {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

/* Kompaktowy aktywny symbol — przy łapie (prawy dół artu) */
.matsumura-active {
    position: absolute;
    z-index: 4;
    top: 318px;
    right: max(14px, calc(50% - 500px + 12px));
    width: 270px;
    margin: 0;
    padding: 10px 10px 8px;
    background: rgba(0, 10, 8, .82);
    border: 1px solid rgba(80, 200, 140, .4);
    border-radius: 6px;
    box-shadow: 0 0 24px rgba(40, 180, 110, .28), 0 10px 22px rgba(0,0,0,.55);
    box-sizing: border-box;
}
.matsumura-active-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.matsumura-active-art {
    position: relative;
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.matsumura-active-art img {
    max-width: 68px;
    max-height: 68px;
    object-fit: contain;
}
.matsumura-active-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 0;
    text-align: left;
}
.matsumura-active-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(180, 230, 200, .7);
}
.matsumura-active-name {
    display: block;
    width: 100%;
    color: #dcd6cc;
    font-size: 13px;
    line-height: 1.2;
}
.matsumura-bars {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    box-sizing: border-box;
}
.matsumura-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.matsumura-bar .progress-text,
.matsumura-bar span {
    font-size: 10px;
    color: rgba(220, 214, 204, .85);
}
.matsumura-bar progress,
.matsumura-active progress#hpbar,
.matsumura-active progress#reibar,
.matsumura-active progress#exbar {
    width: 100%;
    max-width: 100%;
    height: 10px;
    border: 0;
}
.matsumura-active-actions,
#matsumura-buttons {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 4px;
    width: 100%;
    padding: 2px 0 0;
    box-sizing: border-box;
}

/* Stary badge poziomu — kompaktowo w rogu karty */
#active-lvl,
.active-lvl {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 5;
    width: 48px;
    height: 52px;
    line-height: 48px;
    text-align: center;
    vertical-align: middle;
    color: #b4a27c;
    font-size: 14px;
    background: var(--m-lvl, url('../img/matsumura/lvl-bg.png')) no-repeat;
    background-size: 48px 52px;
    pointer-events: none;
}

.matsumura-bar--hp progress::-webkit-progress-value,
progress#hpbar::-webkit-progress-value { background: linear-gradient(to bottom, #920b0b 0%, #0e0c08 100%); }
.matsumura-bar--hp progress::-moz-progress-bar,
progress#hpbar::-moz-progress-bar { background: linear-gradient(to bottom, #920b0b 0%, #0e0c08 100%); }
.matsumura-bar--rei progress::-webkit-progress-value,
progress#reibar::-webkit-progress-value { background: linear-gradient(to bottom, #0b6a92 0%, #0e0c08 100%); }
.matsumura-bar--rei progress::-moz-progress-bar,
progress#reibar::-moz-progress-bar { background: linear-gradient(to bottom, #0b6a92 0%, #0e0c08 100%); }
.matsumura-bar--xp progress::-webkit-progress-value,
progress#exbar::-webkit-progress-value { background: #46d500; }
.matsumura-bar--xp progress::-moz-progress-bar,
progress#exbar::-moz-progress-bar { background: #46d500; }
.matsumura-bar progress::-webkit-progress-bar { background: #000; height: 10px; }

.matsumura-powerup-btn,
.matsumura-charge-btn,
.powerup-button,
.charge-button {
    display: inline-block;
    float: none;
    width: 83px;
    height: 33px;
    line-height: 33px;
    text-align: center;
    color: #ab9b79 !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    background: var(--m-powerup) top center no-repeat;
    font-size: 11px;
}
.matsumura-charge-btn,
.charge-button {
    background-image: var(--m-charge);
}

.matsumura-section { margin-bottom: 16px; }
.matsumura-section h2 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #c7ca95;
}
.matsumura-empty {
    margin: 0;
    color: rgba(220, 214, 204, .5);
    font-size: 13px;
}

.matsumura-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: stretch;
}
.matsumura-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 170px;
    max-width: 190px;
    min-width: 160px;
    min-height: 360px;
    background: rgba(0, 0, 0, .6);
    border: 1px solid #121722;
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
}
.matsumura-card.is-premium { border-color: #3a4a5c; }
.matsumura-card.is-active {
    border-color: #5c5232;
    background: rgba(40, 40, 0, .45);
}
.matsumura-card.is-premium.is-active {
    background: rgba(0, 50, 90, .4);
}
.matsumura-card-art {
    flex: 0 0 auto;
    height: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 10px;
}
.matsumura-card-art img {
    max-width: 110px;
    max-height: 120px;
    object-fit: contain;
}
.matsumura-separ {
    flex: 0 0 36px;
    width: 100%;
    height: 36px;
    background: var(--m-separ) top center no-repeat;
}
.matsumura-separ--prem {
    background-image: var(--m-separ-prem);
}
.matsumura-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 10px 8px;
    text-align: left;
}
.matsumura-card-name {
    display: block;
    color: #dcd6cc;
    font-size: 13px;
    text-align: center;
    margin-bottom: 2px;
}
.matsumura-card-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: #7f7f7f;
}
.matsumura-card-stats strong { color: #cfc8ba; }
.matsumura-price.kan-blue,
.matsumura-price.kan-blue strong { color: #009ef7; }
.matsumura-price .icomenu {
    float: none;
    display: inline-block;
    margin: 0 0 0 4px;
    opacity: 1;
    vertical-align: middle;
}
.matsumura-card-actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    padding: 8px 8px 14px;
    margin-top: auto;
}
.matsumura-buy-btn,
.matsumura-act-btn {
    display: inline-block;
    width: 135px;
    height: 53px;
    line-height: 53px;
    text-align: center;
    color: #ab9b79 !important;
    text-decoration: none !important;
    cursor: pointer;
    border: 0;
    padding: 0;
    background: var(--m-buy) top center no-repeat;
    font-size: 12px;
}
.matsumura-act-btn.is-disabled {
    filter: grayscale(100%);
    cursor: default;
    pointer-events: none;
}
.matsumura-back {
    flex: 0 0 auto;
    align-self: center;
}

/* ===== Matsumura charge (doładowanie) ===== */
.matsumura_bg--charge {
    min-height: 520px;
}
.matsumura-top--charge {
    max-width: none;
    width: 100%;
    align-items: center;
    margin-bottom: 18px;
}
.matsumura-charge-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px 24px;
}
.matsumura-charge-main {
    flex: 1 1 420px;
    min-width: 0;
    max-width: 720px;
}
.matsumura_bg--charge .matsumura-active,
.matsumura-active--charge {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    flex: 0 0 280px;
    width: 280px;
    max-width: 100%;
    margin: 0;
    align-self: flex-start;
}
.matsumura_bg--charge .matsumura-potion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-width: 680px;
}
.matsumura_bg--charge .matsumura-potion {
    width: auto;
    min-height: 110px;
}
.matsumura_bg--charge .matsumura-charge-form {
    max-width: 480px;
}

.matsumura-potion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.matsumura-potion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 92px;
    padding: 8px 6px;
    background: rgba(0,0,0,.55);
    border: 1px solid #222;
    border-radius: 4px;
    color: #dcd6cc;
    cursor: pointer;
}
.matsumura-potion.is-selected {
    border-color: #c4a050;
    box-shadow: 0 0 0 1px rgba(196, 160, 80, .45);
}
.matsumura-potion img { width: 40px; height: 40px; object-fit: contain; }
.matsumura-potion span { font-size: 10px; line-height: 1.2; text-align: center; }
.matsumura-potion em { font-style: normal; font-size: 11px; color: #ab9b79; }
.matsumura-charge-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px;
    background: rgba(0,0,0,.5);
    border: 1px solid #222;
}
.matsumura-charge-form.is-hidden { display: none !important; }
.matsumura-charge-form .ga-input { max-width: 100px; }

.matsumura-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.matsumura-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
}
.matsumura-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 92vw);
    padding: 20px 18px 14px;
    background: #000;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e8e8e8;
}
.matsumura-modal-card h3 { margin: 0 0 10px; color: #dcd6cc; font-size: 15px; }
.matsumura-modal-close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 22px;
    cursor: pointer;
}
.matsumura-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.matsumura-modal-actions .red_button,
.matsumura-modal-actions .gray_button {
    float: none !important;
    display: inline-block !important;
    width: 120px !important;
    height: 42px !important;
    line-height: 42px !important;
    background-size: 100% 100% !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .main-raised.matsumura-page {
        margin-top: 4px;
    }
    .matsumura_bg {
        min-height: 0;
        padding: 10px 12px 20px;
        background-size: auto;
        background-position: top center;
    }
    .matsumura-top {
        max-width: 100%;
    }
    .matsumura-active {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 14px;
    }
    .matsumura-shops {
        max-width: 100%;
    }
    .matsumura-charge-body {
        flex-direction: column;
    }
    .matsumura-charge-main {
        max-width: 100%;
    }
    .matsumura_bg--charge .matsumura-active,
    .matsumura-active--charge {
        flex: 1 1 auto;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
        order: -1;
    }
    .matsumura-card {
        flex: 1 1 calc(50% - 12px);
        max-width: none;
        min-width: 0;
        min-height: 340px;
    }
}
@media (max-width: 480px) {
    .matsumura-card { flex: 1 1 100%; }
    .matsumura-active-row { flex-direction: column; text-align: center; }
    .matsumura-active-meta { align-items: center; text-align: center; }
    .matsumura-active-actions { justify-content: center; }
}


/* ===== Transfer ===== */
.main-raised.transfer-page-wrap { margin-top: 6px; }
.transfer-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 12px;
    color: #cfc8ba;
    box-sizing: border-box;
    overflow: visible;
    text-align: left;
}
.transfer-shell.decor.decor-new {
    padding: 22px 26px 30px !important;
}
.tr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #30333b;
    background: linear-gradient(90deg, rgba(183,139,35,.1), transparent 60%);
    text-align: left;
}
.tr-head-titles h1 {
    margin: 0 0 4px;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f3df9a;
    line-height: 1.2;
}
.tr-head-titles p {
    margin: 0;
    font-size: 12px;
    color: rgba(220,214,204,.65);
    max-width: 56ch;
}
.tr-tabs {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0 0 14px;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(199, 202, 149, .28);
    scrollbar-width: none;
}
.tr-tabs::-webkit-scrollbar { display: none; width: 0; height: 0; }
.tr-tab {
    flex: 0 0 auto;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px 11px;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    color: #9a9688 !important;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s ease;
}
.tr-tab::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -1px;
    height: 2px;
    background: transparent;
    transition: background .15s ease;
}
.tr-tab:hover { color: #dcd6cc !important; }
.tr-tab:hover::after { background: rgba(199, 162, 68, .45); }
.tr-tab.is-active,
.tr-tab.active {
    color: #f0d470 !important;
}
.tr-tab.is-active::after,
.tr-tab.active::after {
    background: #c7a14a;
}
.tr-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: #8b7127;
    color: #0b0c0f;
    font: 700 10px/18px Roboto, Helvetica, Arial, sans-serif;
    letter-spacing: 0;
}
.tr-pane { display: none; margin-top: 4px; }
.tr-pane.is-active,
.tr-pane.active { display: block; }
.tr-layout {
    display: grid;
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
    gap: 14px;
}
.tr-item-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
}
.tr-panel {
    border: 1px solid rgba(151, 132, 69, .35);
    background: rgba(0, 0, 0, .55);
    padding: 16px;
}
.tr-panel h2 {
    margin: 0 0 12px;
    color: #e4cb69;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.tr-field {
    display: block;
    margin: 10px 0;
    color: #9ca1aa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tr-field .ga-input,
.tr-field input {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    margin-top: 5px;
}
.tr-currencies { display: flex; gap: 8px; margin: 12px 0; }
.tr-currency {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #343944;
    background: rgba(11, 13, 18, .95);
    color: #c9cbd0;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
}
.tr-currency:has(input:checked) {
    border-color: #b39437;
    color: #f0d36d;
    background: rgba(23, 19, 10, .95);
}
.tr-currency input { position: absolute; opacity: 0; pointer-events: none; }
.tr-recipient {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    margin: 14px 0;
    padding: 11px;
    border: 1px solid #30343c;
    background: rgba(10, 12, 16, .95);
}
.tr-recipient img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid #75652e;
}
.tr-recipient strong {
    display: inline-block;
    color: #e9ce67;
    font: 16px/1.3 'TrajanPro-Regular', Georgia, serif;
    cursor: help;
}
.tr-recipient small {
    display: block;
    margin-top: 5px;
    color: #979ca6;
    font-size: 12px;
}
.transfer-shell .red_button,
.transfer-shell .gray_button,
.shinoi-modal .red_button,
.shinoi-modal .gray_button {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 8px;
    border: 0;
    border-radius: 0;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    color: #fff !important;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    box-sizing: border-box;
    height: 42px !important;
    line-height: 42px !important;
}
.tr-btn-110 {
    width: 110px !important;
    background-image: url('../design/gray_button_110.png') !important;
}
.red_button.tr-btn-110 {
    background-image: url('../design/red_button_110.png') !important;
}
.tr-btn-190 {
    width: 190px !important;
    background-image: url('../design/red_button_190.png') !important;
}
.tr-history {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tr-entry {
    display: flex;
    align-items: center;
    min-height: 58px;
    padding: 8px 10px;
    border: 1px solid #292e36;
    background: rgba(8, 10, 14, .9);
}
.tr-arrow {
    margin-right: 10px;
    color: #e1544f;
    font-size: 22px;
    line-height: 1;
}
.tr-arrow.in { color: #58b873; }
.tr-info { min-width: 100px; flex: 1; }
.tr-info a {
    color: #e4cb69 !important;
    text-decoration: none !important;
}
.tr-info a:hover { color: #f3df9a !important; }
.tr-info small {
    display: block;
    color: #858b95;
    margin-top: 3px;
    font-size: 11px;
}
.tr-value {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
    color: #d7bd5d;
}
.tr-value img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}
.tr-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(56px, 1fr));
    gap: 6px;
}
.tr-slot {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #343a44;
    background: rgba(7, 9, 13, .93);
    transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tr-slot.selectable { cursor: pointer; }
.tr-slot.selectable:hover {
    border-color: #9d8639;
    transform: translateY(-1px);
}
.tr-slot.selected {
    border-color: #e2ba39;
    box-shadow: 0 0 12px rgba(221, 181, 47, .35);
}
.tr-slot.disabled { opacity: .38; }
.tr-slot img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
}
.tr-check {
    display: none;
    position: absolute;
    right: 3px;
    top: 2px;
    color: #f6d452;
    font-size: 12px;
}
.tr-slot.selected .tr-check { display: block; }
.tr-selected {
    margin: 10px 0 0;
    color: #d5bc62;
    font-size: 12px;
}
.tr-empty {
    grid-column: 1 / -1;
    padding: 36px 15px;
    text-align: center;
    color: #7e8490;
}
.tr-cancel {
    margin-left: 4px;
}
.shinoi-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .8);
}
.shinoi-modal-card {
    position: relative;
    width: min(430px, 90vw);
    padding: 22px 22px 18px;
    border: 1px solid #756a45;
    background: rgba(10, 12, 16, .97);
    color: #ddd;
    text-align: left;
}
.shinoi-modal-card h3 {
    margin: 0 0 10px;
    color: #ead477;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.shinoi-modal-close {
    position: absolute;
    right: 8px;
    top: 5px;
    border: 0;
    background: none;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
}
.shinoi-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.ui-autocomplete {
    z-index: 10000 !important;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
}
@media (max-width: 950px) {
    .tr-layout,
    .tr-item-layout { grid-template-columns: 1fr; }
    .tr-grid { grid-template-columns: repeat(8, minmax(48px, 1fr)); }
}
@media (max-width: 767px) {
    .transfer-shell.decor.decor-new { padding: 16px 14px 22px !important; }
    .tr-head-titles h1 { font-size: 20px; }
    .tr-history { grid-template-columns: 1fr; }
    .tr-grid { grid-template-columns: repeat(5, minmax(48px, 1fr)); }
    .tr-btn-190 { width: 100% !important; max-width: 250px; }
}

/* ===== Messages — skrzynka pocztowa ===== */
.main-raised.messages-page-wrap { margin-top: 6px; }
.messages-page-wrap > .container {
    margin-left: auto;
    margin-right: auto;
}
.messages-shell {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 12px;
    color: #cfc8ba;
    box-sizing: border-box;
    overflow: visible;
    text-align: left;
}
.messages-shell.decor.decor-new {
    padding: 22px 26px 30px !important;
}
.msg-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 18px;
    margin-bottom: 14px;
    padding: 0 0 14px;
    border-bottom: 1px solid #30333b;
    background: linear-gradient(90deg, rgba(183,139,35,.1), transparent 60%);
    text-align: left;
}
.msg-top-titles h1 {
    margin: 0 0 4px;
    font-family: 'TrajanPro-Regular', Georgia, serif;
    font-size: 22px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #f3df9a;
    line-height: 1.2;
    text-align: left;
}
.msg-top-titles p {
    margin: 0;
    font-size: 12px;
    color: rgba(220,214,204,.65);
    max-width: 52ch;
    text-align: left;
}
.msg-badge {
    display: inline-block;
    padding: 6px 10px;
    background: rgba(146, 11, 11, .85);
    border: 1px solid #5c2020;
    color: #fff;
    font-size: 12px;
}
.msg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
    padding: 8px;
    background: rgba(0,0,0,.75);
    border: 1px solid #222;
}
.msg-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #ab9b79 !important;
    text-decoration: none !important;
    border: 1px solid transparent;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.msg-tab .icomenu { float: none; margin: 0; opacity: .85; }
.msg-tab:hover,
.msg-tab.is-active {
    border-color: #3a3a3a;
    background: rgba(255,255,255,.04);
    color: #dcd6cc !important;
}
.msg-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding: 8px 10px;
    background: rgba(0,0,0,.7);
    border: 1px solid #222;
}
.msg-check-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(220,214,204,.7);
    cursor: pointer;
}
.msg-btn,
.msg-btn-sm {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none !important;
}
.msg-btn .icomenu { float: none; margin: 0; opacity: .9; }
.msg-btn-sm {
    width: 120px !important;
    height: 42px !important;
    line-height: 42px !important;
    background-size: 100% 100% !important;
}
.msg-list { display: flex; flex-direction: column; gap: 8px; }
.msg-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    background: rgba(0,0,0,.72);
    border: 1px solid #1c1c1c;
    transition: border-color .2s ease, background .2s ease;
}
.msg-row:hover { border-color: #333; background: rgba(12,12,12,.9); }
.msg-row.is-unread {
    border-color: #4a3a1a;
    box-shadow: inset 3px 0 0 #c4a050;
}
.msg-row.is-system { opacity: .95; }
.msg-row-check { margin: 0; cursor: pointer; }
.msg-row-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
}
.msg-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #2a2a2a;
    background: #111;
    flex: 0 0 40px;
}
.msg-row-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg-topic {
    font-size: 14px;
    color: #e8e0d4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-row.is-unread .msg-topic { color: #fff; }
.msg-meta {
    font-size: 11px;
    color: rgba(220,214,204,.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.msg-name { color: #ab9b79; }
.msg-row-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
.msg-ico-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid #2a2a2a;
    background: rgba(0,0,0,.55);
    color: #ab9b79 !important;
    text-decoration: none !important;
    cursor: pointer;
    font-size: 11px;
}
.msg-ico-btn .icomenu { float: none; margin: 0; opacity: .85; }
.msg-ico-btn:hover { border-color: #4a4a4a; color: #dcd6cc !important; }
.msg-empty, .msg-notice {
    margin: 18px 0;
    padding: 14px;
    text-align: center;
    background: rgba(0,0,0,.55);
    border: 1px solid #222;
    color: rgba(220,214,204,.7);
    font-size: 13px;
}
.msg-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #1c1c1c;
}
.msg-pager-info { font-size: 12px; color: rgba(220,214,204,.55); }
.msg-pager-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.msg-pager-nav.is-disabled {
    opacity: .35;
    pointer-events: none;
    cursor: default;
}
.msg-pager-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #2a2a2a;
    background: #121212;
    color: #dcd6cc !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
}
.msg-pager-num:hover { border-color: #4a4a4a; background: #1a1a1a; }
.msg-pager-num.is-active {
    border-color: #8a1f1f;
    background: #2a1010;
    color: #f0e6d8 !important;
    font-weight: 600;
}
.msg-pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    color: rgba(220,214,204,.45);
    font-size: 13px;
}

/* Player visiting card (tooltipster HTML) */
.msg-player-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 200px;
    max-width: 280px;
    padding: 2px 0;
    text-align: left;
    color: #dcd6cc;
}
.msg-player-card-av {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border: 1px solid #3a3a3a;
    background: #0a0a0a;
    flex-shrink: 0;
}
.msg-player-card-body { min-width: 0; flex: 1; }
.msg-player-card-name {
    display: block;
    font-size: 14px;
    color: #f0e6d8;
    margin: 0 0 6px;
    line-height: 1.2;
}
.msg-player-card-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(220,214,204,.75);
}
.msg-player-card-row b { color: #dcd6cc; font-weight: 600; }

/* Thread */
.msg-thread-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.msg-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.msg-bubble {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 860px;
}
.msg-bubble.is-mine {
    margin-left: auto;
    flex-direction: row-reverse;
}
.msg-bubble-av img {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 1px solid #2a2a2a;
    background: #111;
}
.msg-bubble-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 12px;
    background: rgba(0,0,0,.72);
    border: 1px solid #222;
}
.msg-bubble.is-mine .msg-bubble-body {
    background: rgba(20, 18, 10, .85);
    border-color: #3a3424;
}
.msg-bubble-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 6px;
    font-size: 12px;
}
.msg-bubble-head a { color: #ab9b79 !important; }
.msg-bubble-head time { color: rgba(220,214,204,.45); font-size: 11px; }
.msg-bubble-text {
    font-size: 13px;
    line-height: 1.5;
    color: #e4ddd0;
    word-break: break-word;
}
.msg-bubble-text a { color: #7eb6ff !important; }

.msg-compose {
    margin-top: 8px;
    padding: 14px;
    background: rgba(0,0,0,.7);
    border: 1px solid #222;
}
.msg-compose h2 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #dcd6cc;
}
.msg-compose--write { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.msg-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(220,214,204,.55);
}
.msg-textarea {
    width: 100%;
    min-height: 120px;
    resize: vertical;
    box-sizing: border-box;
}
.msg-recipient-wrap { position: relative; }
.msg-suggest {
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 20;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #0a0a0a;
    border: 1px solid #333;
    max-height: 240px;
    overflow: auto;
}
.msg-suggest li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid #1a1a1a;
}
.msg-suggest li:hover { background: #151515; }
.msg-suggest img { border: 1px solid #2a2a2a; }
.msg-recipient-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.msg-recipient-list li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0,0,0,.65);
    border: 1px solid #333;
    font-size: 12px;
}
.msg-recipient-list img { border: 1px solid #2a2a2a; }
.msg-recipient-remove {
    border: 0;
    background: transparent;
    color: #ab9b79;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.msg-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.msg-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.78);
}
.msg-modal-card {
    position: relative;
    z-index: 1;
    width: min(420px, 92vw);
    padding: 20px 18px 14px;
    background: #000;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    color: #e8e8e8;
}
.msg-modal-card h3 { margin: 0 0 10px; color: #dcd6cc; font-size: 15px; }
.msg-modal-close {
    position: absolute;
    top: 8px; right: 10px;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.55);
    font-size: 22px;
    cursor: pointer;
}
.msg-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 14px;
}
.msg-modal-actions .red_button,
.msg-modal-actions .gray_button {
    float: none !important;
    display: inline-block !important;
    width: 120px !important;
    height: 42px !important;
    line-height: 42px !important;
    background-size: 100% 100% !important;
}
.msg-modal-text { margin: 0; font-size: 13px; line-height: 1.45; }

@media (max-width: 767px) {
    .messages-shell.decor.decor-new { padding: 16px 14px 22px !important; }
    .msg-top-titles h1 { font-size: 20px; }
    .msg-row {
        grid-template-columns: 24px minmax(0, 1fr);
        grid-template-areas:
            "chk main"
            "act act";
    }
    .msg-row-check { grid-area: chk; }
    .msg-row-main { grid-area: main; }
    .msg-row-actions { grid-area: act; justify-content: flex-end; }
    .msg-bubble { max-width: 100%; }
    .msg-top .msg-btn,
    .msg-thread-actions .msg-btn {
        width: 100% !important;
        background-size: 100% 100% !important;
    }
}

/* ===== Hub dashboard (logged-in home) ===== */
.hub-page {
    padding-bottom: 24px;
}

.hub-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4px 0 14px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hub-hero .hub-cta-play.red_button {
    float: none !important;
    display: inline-block !important;
    margin: 0 auto !important;
    color: #fff !important;
    text-decoration: none !important;
    text-align: center;
    transition: filter .2s ease, transform .1s ease;
}

.hub-hero .hub-cta-play.red_button:hover {
    filter: brightness(1.12);
    color: #fff !important;
}

.hub-hero .hub-cta-play.red_button:active {
    transform: translateY(1px);
}

/* Panele hub: dekor belki jak second-panel (decor + decor-new + bg_darker) */
.hub-page .hub-shortcuts.decor,
.hub-page .hub-panel.decor {
    margin-bottom: 12px;
    overflow: visible;
    box-shadow: none;
    background-color: rgba(0, 0, 0, .9);
    border: 0;
    text-align: left;
}

.hub-page .hub-shortcuts.decor.decor-new,
.hub-page .hub-panel.decor.decor-new {
    border-radius: 0;
    padding: 12px 14px 14px;
}

.hub-page .hub-feed {
    margin-bottom: 12px;
}

.hub-page .hub-feed > .hub-panel.decor {
    margin-bottom: 0;
}

.hub-shortcuts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.hub-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 84px;
    padding: 10px 6px;
    border: 1px solid rgba(199, 202, 149, .18);
    border-radius: 4px;
    background: rgba(0, 0, 0, .45);
    color: #e4ddc9 !important;
    text-decoration: none !important;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, box-shadow .2s ease;
}

/* 6-frame sprite strip (768×128), idle = frame 1
   Przy background-size: 600% pozycje % liczone względem (box − image),
   więc animujemy 0% → 100% ze steps(5), nie −600%. */
.hub-shortcut-ico {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    background-repeat: no-repeat;
    background-position: 0% 0;
    background-size: 600% 100%;
    image-rendering: auto;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    transform: translateZ(0);
    will-change: background-position;
}

.hub-shortcut-label {
    font-size: 11px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.hub-shortcut:hover {
    border-color: rgba(199, 162, 68, .65);
    background: rgba(0, 0, 0, .7);
    box-shadow: inset 0 0 18px rgba(210, 180, 74, .08);
}

.hub-shortcut:hover .hub-shortcut-ico,
.hub-shortcut:focus-visible .hub-shortcut-ico {
    animation: hub-shortcut-frames .9s steps(5) infinite;
}

@keyframes hub-shortcut-frames {
    from { background-position: 0% 0; }
    to { background-position: 100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .hub-shortcut:hover .hub-shortcut-ico,
    .hub-shortcut:focus-visible .hub-shortcut-ico {
        animation: none;
        background-position: 0% 0;
        filter: drop-shadow(0 0 4px rgba(210, 180, 74, .35));
    }
}

.hub-combat {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 0;
}

.hub-combat .hub-panel {
    margin-bottom: 12px;
}

.hub-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hub-panel-head h2 {
    margin: 0;
    color: #d8c37d;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hub-panel-head a {
    color: #9aa1b0 !important;
    font-size: 12px;
    white-space: nowrap;
}

.hub-panel-head a:hover {
    color: #f0d77d !important;
}

.hub-eq-track {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 8px;
    overflow: visible;
    padding-bottom: 0;
    justify-items: center;
}

.hub-eq-slot {
    width: 100%;
    max-width: 56px;
    aspect-ratio: 1 / 1;
    height: auto;
    border: 1px solid rgba(77, 80, 88, .9);
    border-radius: 5px;
    background: rgba(0, 0, 0, .55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hub-eq-slot img {
    width: 88%;
    height: 88%;
    max-width: 48px;
    max-height: 48px;
    object-fit: contain;
    display: block;
    cursor: help;
}

.hub-eq-slot.is-empty {
    opacity: .75;
}

.hub-eq-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #626976 !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
}

.hub-skills {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.hub-skill {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    min-width: 0;
}

.hub-skill-val {
    color: #f0d77d;
    font-weight: 700;
    font-size: 13px;
}

.hub-skill-name {
    color: #8e96a8;
    font-size: 10px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-attrs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.hub-attr {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 9px;
    background: rgba(0, 0, 0, .4);
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 3px;
    color: #b7bdc9;
    font-size: 12px;
}

.hub-attr strong {
    color: #e8dfc4;
}

.hub-attr-free {
    border-color: rgba(107, 90, 24, .8);
    grid-column: 1 / -1;
}

.hub-attr-free strong {
    color: #f0d77d;
}

.hub-feed {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
}

.hub-feed > .hub-panel {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.hub-news-featured {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.hub-news-media {
    display: block;
    line-height: 0;
    text-decoration: none !important;
}

.hub-news-featured img,
.hub-news-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 4px;
    background: rgba(0, 0, 0, .5);
    transition: border-color .15s ease, opacity .15s ease;
}

.hub-news-media:hover img {
    border-color: rgba(199, 162, 68, .55);
    opacity: .92;
}

.hub-news-copy h3 {
    margin: 0 0 6px;
    font-size: 14px;
    line-height: 1.25;
}

.hub-news-copy h3 a {
    color: #f3df9a !important;
    text-decoration: none !important;
}

.hub-news-copy h3 a:hover {
    color: #fff6d0 !important;
}

.hub-news-copy p {
    margin: 0 0 8px;
    color: #9aa1b0;
    font-size: 12px;
    line-height: 1.45;
}

.hub-news-copy time {
    display: block;
    margin-bottom: 10px;
    color: #6f7685;
    font-size: 11px;
}

.hub-news-read.red_button {
    float: none !important;
    display: inline-block !important;
    width: auto;
    min-width: 170px;
    max-width: 100%;
    height: 44px;
    line-height: 44px;
    margin: 0;
    padding: 0 22px;
    white-space: nowrap;
    background-size: 100% 100%;
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none !important;
    text-align: center;
    transition: filter .2s ease, transform .1s ease;
}

.hub-news-read.red_button:hover {
    filter: brightness(1.12);
    color: #fff !important;
}

.hub-news-read.red_button:active {
    transform: translateY(1px);
}

.hub-news-list time {
    color: #6f7685;
    font-size: 11px;
}

.hub-news-list,
.hub-rank-list,
.hub-forum-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hub-news-list li + li,
.hub-forum-list li + li {
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.hub-rank-list > li + li {
    border-top: 1px solid rgba(255, 255, 255, .07);
    margin-top: 4px;
    padding-top: 8px;
}

.hub-news-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    color: #d7d0bf !important;
    text-decoration: none !important;
    min-width: 0;
}

.hub-news-list a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.hub-rank-row {
    display: flex;
    align-items: stretch;
    gap: 10px;
    min-height: 52px;
    padding: 0;
    color: #d7d0bf !important;
    text-decoration: none !important;
    min-width: 0;
}

.hub-rank-pos {
    flex: 0 0 28px;
    width: 28px;
    align-self: center;
    color: #c7a244;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
    text-align: right;
}

.hub-rank-av {
    flex: 0 0 auto;
    align-self: stretch;
    aspect-ratio: 1 / 1;
    width: auto;
    height: auto;
    max-width: 56px;
    overflow: hidden;
    border-radius: 3px;
    border: 1px solid rgba(199, 202, 149, .28);
    background: #0b0c10;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4);
}

.hub-rank-av img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hub-rank-meta {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    line-height: 1.2;
}

.hub-rank-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.hub-rank-lvl {
    color: #8e96a8;
    font-size: 11px;
}

.hub-forum-list li {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
}

.hub-forum-title {
    color: #d7d0bf !important;
    text-decoration: none !important;
    font-size: 13px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hub-forum-author {
    font-size: 11px;
    color: #8e96a8 !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hub-empty {
    margin: 0;
    padding: 8px 0;
    color: #6f7685;
    font-size: 12px;
}


@media (min-width: 600px) {
    .hub-skills {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .hub-attrs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hub-attr-free {
        grid-column: auto;
    }

    .hub-news-featured {
        grid-template-columns: 96px 1fr;
        align-items: start;
    }

    .hub-news-featured img,
    .hub-news-media img {
        aspect-ratio: 1 / 1;
        height: 96px;
    }
}

@media (min-width: 900px) {
    .hub-shortcuts {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }

    .hub-shortcut {
        min-height: 84px;
    }

    .hub-combat {
        grid-template-columns: 1.1fr .9fr;
    }

    .hub-eq-track {
        grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
    }

    .hub-feed {
        flex-direction: row;
        align-items: stretch;
        gap: 16px;
    }

    .hub-feed > .hub-panel {
        flex: 1 1 0;
    }
}

@media (max-width: 420px) {
    .hub-shortcuts {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }

    .hub-shortcut {
        min-height: 64px;
        padding: 8px 4px;
    }

    .hub-shortcut-ico {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .hub-shortcut-label {
        font-size: 10px;
    }

    .hub-hero .hub-cta-play.red_button {
        width: 100%;
        max-width: 260px;
    }
}

/* Główne menu musi pozostać nad zawartością każdej podstrony. */
.navbar.navbar-default {
    position: relative;
    z-index: 1030;
}

.navbar.navbar-default .dropdown-menu {
    z-index: 1040;
}

/* Asynchroniczne przejścia pomiędzy stronami. */
.ga-async-page {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 180ms ease, transform 180ms ease;
    will-change: opacity, transform;
}

.ga-async-page.ga-page-fade-out {
    opacity: 0;
    transform: translateY(5px);
    pointer-events: none;
}

.ga-async-page.ga-page-fade-in {
    opacity: 0;
    transform: translateY(-5px);
}

html.ga-page-loading {
    cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
    .ga-async-page {
        transition-duration: 1ms;
        transform: none !important;
    }
}
a (prefers-reduced-motion: reduce) {
    .ga-async-page {
        transition-duration: 1ms;
        transform: none !important;
    }
}