/***  Dimenshon CSS Graph ***/
/*                          */
/*              Version 0.3 */
/*     Created by Shiroruby */
/*                          */
/****************************/
/*                          */
/* Copyright 2019           */
/*                          */
/****************************/

@keyframes degreeHue {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes degreeHueR {
    0% {
        filter: hue-rotate(360deg);
    }
    100% {
        filter: hue-rotate(0deg);
    }
}

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 400;
    src: local('Play'), url('../fonts/Play-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Play';
    font-style: normal;
    font-weight: 700;
    src: local('Play'), url('../fonts/Play-Bold.ttf') format('truetype');
}

@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: normal;
	font-style: normal;
}

body {
    background-position: center center;
    background-image: url('../img/back-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: 'TrajanPro-Regular';
    font-size: 14px;

    color: white;
}

/* Płynne przejścia między podstronami - klient gry, nie zwykła strona WWW. Fade-in działa
   samym CSS (animation), więc zawsze zadziała niezależnie od JS. Fade-out przed nawigacją
   (klasa .page-leaving) jest dokładany przez JS w footer.php - to tylko wzbogacenie,
   awaria tego skryptu nie blokuje strony na niewidocznym body. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes pageFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    body {
        animation: pageFadeIn .35s ease both;
    }

    body.page-leaving {
        opacity: 0 !important;
        transition: opacity .2s ease;
    }
}

a,
a:focus,
a:link {
    cursor: pointer;
    text-decoration: none;
    color: #a97a30;
}

a:hover {
    text-decoration: none;
    color: #f9ca80;
}

p {
    padding-top: 10px;
    padding-bottom: 10px;
}

input {
    color: black;
}

select {
    color: black !important;
}

.button,
.button:focus,
.button:link {
    display: inline-block;

    padding: 30px 40px;

    font-family: 'TrajanPro-Regular';
    font-size: 18px;

    border: 0;
    background-image: url('../img/border-down.png');
    background-size: 100% 50%;
    background-position: center top;
    background-color: transparent;

    color: #d9ba70;
}

.button:hover {
    opacity: .75;
    color: #997a30;
}

button,
button:focus,
button:link {
    padding: 8px 12px;

    font-family: 'TrajanPro-Regular';
    font-size: 18px;

    border: 0;
    color: #d9ba70;
}

button:hover {
    opacity: .75;
    color: #997a30;
}

h3.title {
    margin-top: 0;

    font-weight: 600;
    font-family: 'TrajanPro-Regular';

    color: #e9ba70;
}

textarea,
#loginForm input[type="text"],
#loginForm input[type="password"],
#loginForm input[type="email"] {
    width: 100%;

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

    padding: 8px 12px;

    border: 0;

    background-color: transparent;

    text-align: center;
    color: #c99a50;
}

textarea:hover,
textarea:focus,
#loginForm input[type="text"]:hover,
#loginForm input[type="password"]:hover,
#loginForm input[type="text"]:focus,
#loginForm input[type="password"]:focus {
    color: #f9ca80;
}

textarea {
    text-align: left;
    resize: vertical;
}

#loginForm button,
#loginForm button:focus,
#loginForm button:link {
    padding: 30px 40px;

    font-family: 'TrajanPro-Regular';
    font-size: 18px;

    border: 0;
    background-image: url('../img/border-down.png');
    background-size: 100% 50%;
    background-position: center top;
    background-color: transparent;

    color: #d9ba70;
}

#loginForm button:hover {
    opacity: .75;
    color: #997a30;
}

.border-down {
    z-index: 0;

    position: absolute;
    left: 0px;
    bottom: -20px;

    width: 100%;
    height: 35px;

    background-image: url('../img/border-down.png');
    background-position: center center;
    background-size: 100% 35px;
}

.border-up-left-nav {
    z-index: 0;

    position: absolute;
    left: -5px;
    top: -5px;

    width: 60px;
    height: 60px;

    background-image: url('../img/border-up-left.png');
    background-position: center top;
    background-size: 60px 108px;

    text-align: center;
}

.border-up-right-nav {
    z-index: 0;

    position: absolute;
    right: -5px;
    top: -5px;

    width: 60px;
    height: 60px;

    background-image: url('../img/border-up-right.png');
    background-position: center top;
    background-size: 60px 108px;

    text-align: center;
}

.border-up-left {
    z-index: 0;

    position: absolute;
    left: -5px;
    top: -5px;

    width: 60px;
    height: 108px;

    background-image: url('../img/border-up-left.png');
    background-position: center center;
    background-size: 60px 108px;

    text-align: center;
}

.border-up-right {
    z-index: 0;

    position: absolute;
    right: -5px;
    top: -5px;

    width: 70px;
    height: 135px;

    background-image: url('../img/border-up-right.png');
    background-position: center center;
    background-size: 70px 135px;

    text-align: center;
}

.border-up {
    z-index: 0;

    position: absolute;
    left: 0px;
    top: -175px;

    width: 100%;
    height: 350px;

    background-image: url('../img/border-up.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 350px;

    text-align: center;
}

.border-up img {
    padding-left: 10px;
    margin-top: 155px;
}

.under-border {
    position: relative;
    z-index: 1;
}

.navbar.navbar-first {
    font-family: 'TrajanPro-Regular';
    background: transparent;

    border-color: transparent;
    border-radius: 0;

    box-shadow: unset;
    position: relative;

    z-index: 999;
}

.navbar.navbar-first .navbar-brand {
    height: auto;
}

.navbar.navbar-first img {
    width: 400px;
    margin-top: 15px;
    margin-bottom: 15px;
}

.navbar.navbar-first .pull-right {
    padding-top: 55px;
    padding-bottom: 55px;

    list-style-type: none;
}

.navbar.navbar-first .pull-right li {
    padding-left: 15px;
    padding-right: 15px;

    display: inline-block;
}

.navbar.navbar-first .pull-right li a,
.navbar.navbar-first .pull-right li a:focus,
.navbar.navbar-first .pull-right li a:link {
    color: white;
    text-decoration: none;
}

.navbar.navbar-first .pull-right li a:hover {
    color: #ccc;
}

.navbar.navbar-second {
    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;
    border-radius: 0;

    box-shadow: unset;

    font-family: 'TrajanPro-Regular';
    position: relative;

    margin-bottom: 60px;
    z-index: 1;
}

.navbar.navbar-second:hover {
    z-index: 99;
}

.navbar.navbar-second li a,
.navbar.navbar-second li a:focus,
.navbar.navbar-second li a:link {
    cursor: pointer;

    color: #a97a30;
    text-decoration: none;

    text-shadow: unset;
}

.navbar.navbar-second li a:hover {
    color: #995a10;
}

.navbar.navbar-second .navbar-toggle,
.navbar.navbar-second .navbar-toggle:focus,
.navbar.navbar-second .navbar-toggle:link {
    padding: 12px 12px;

    border: 1px solid #c9aa60;
    background-color: transparent;
}

.navbar.navbar-second .navbar-toggle:hover {
    border-color: #f9da90;
}

.navbar.navbar-second .navbar-toggle span,
.navbar.navbar-second .navbar-toggle:focus span,
.navbar.navbar-second .navbar-toggle:link span {
    background-color: #c9aa60;
}

.navbar.navbar-second .navbar-toggle:hover span {
    background-color: #f9da90;
}

.navbar.navbar-second .navbar-collapse {
    border: 0;
    box-shadow: unset;

    text-align: center;
}

.navbar-second .dropdown:hover .dropdown-menu {
    display: block;
}

.navbar-second .navbar-nav > .open > a,
.navbar-second .navbar-nav > .open > a:focus,
.navbar-second .navbar-nav > .open > a:hover {
    text-align: right;

    background-image: none;
    background-color: transparent;

    box-shadow: unset;

    color: #995a10;
}

.navbar-second .dropdown-menu {
    position: absolute;
    border: 0;

    background-color: rgba(0, 0, 0, .9);
    background-image: none;

    box-shadow: unset;
}

.navbar-second .open .dropdown-menu {
    position: relative;
    border: 0;

    background-color: transparent;
    background-image: none;

    box-shadow: unset;
}

.navbar-second .dropdown-menu > li {
    display: block;
    text-align: right;
}

.navbar-second .dropdown-menu > li > a,
.navbar-second .dropdown-menu > li > a:focus {
    text-align: left;
}

.navbar-second .dropdown-menu > li > a:hover,
.navbar-second .dropdown-menu > .active > a,
.navbar-second .dropdown-menu > .active > a:focus,
.navbar-second .dropdown-menu > .active > a:hover {
    text-align: left;
    color: #995a10;

    background-image: none;
    background-color: transparent;
}

div.faded {
    text-align: center;
    position: fixed;
    left: 0px;
    top: 0px;
    display: none;
    width: 100%;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 9999;
}

div.faded .close-but {
    text-align: right;
    display: block;
    cursor: pointer;
    font-size: 50px;
    padding-top: 25px;
    padding-right: 40px;
    color: white;
    width: 100%;
}

div.faded .close-but:hover {
    opacity: 0.75;
}

div.faded .window {
    word-wrap: break-word;
    text-align: left;
    border: 1px solid rgba(32, 16, 0, 1);
    border-radius: 8px;
    background-color: white;
    width: 300px;
    color: black;
}

div.faded .window .title {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    width: 100%;
    color: white;
    padding: 10px;
    background-image: url('../img/head4.png');
    background-size: 100% 100%;
    font-weight: bold;
}

div.faded .window .desc {
    width: 100%;
    padding: 10px;
}

div.faded .window .foot {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    text-align: right;
    background-color: rgba(192, 192, 192, 1);
    width: 100%;
    padding: 10px;
}

.body {
    margin-top: 30px;
    padding: 15px;
    position: relative;

    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;

    min-height: 150px;
}

p {
    font-family: 'TrajanPro-Regular';
    color: white;
}

footer {
    margin-top: 50px;
    margin-bottom: 30px;
}

footer .copyright {
    position: relative;
    z-index: 1;

    width: 100%;

    font-family: 'TrajanPro-Regular';
    font-size: 12px;

    color: #ccc;
}

.gameVersion {
    font-size: 12px;
    color: #ccc;
}

.rules b {
    display: inline-block;
    font-size: 24px;

    color: #997a30;

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

.red {
    color: #cc5555;
}

@keyframes theMsgIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.the-error-msg {
    display: block;
    align-items: center;
    justify-content: center;
    gap: 8px;

    max-width: 480px;
    margin: 10px auto;
    padding: 10px 18px;

    text-align: center;

    color: #ffb3b3;
    background-color: rgba(204, 51, 51, .12);
    border: 1px solid rgba(255, 120, 120, .35);
    border-radius: 4px;
    box-shadow: 0 4px 14px -6px rgba(204, 51, 51, .5);

    animation: theMsgIn .25s ease;
}

.the-error-msg .fa {
    font-size: 16px;
    color: #ff8080;
}

.the-success-msg {
    display: block;
    align-items: center;
    justify-content: center;
    gap: 8px;

    max-width: 480px;
    margin: 10px auto;
    padding: 10px 18px;

    text-align: center;

    color: #b3ffb3;
    background-color: rgba(51, 204, 51, .1);
    border: 1px solid rgba(120, 255, 120, .35);
    border-radius: 4px;
    box-shadow: 0 4px 14px -6px rgba(51, 204, 51, .45);

    animation: theMsgIn .25s ease;
}

.the-success-msg .fa {
    font-size: 16px;
    color: #80ff80;
}

.the-warning-msg {
    display: block;
    align-items: center;
    justify-content: center;
    gap: 8px;

    max-width: 480px;
    margin: 10px auto;
    padding: 10px 18px;

    text-align: center;

    color: #ffff99;
    background-color: rgba(204, 204, 51, .1);
    border: 1px solid rgba(255, 255, 120, .35);
    border-radius: 4px;
    box-shadow: 0 4px 14px -6px rgba(204, 204, 51, .45);

    animation: theMsgIn .25s ease;
}

.the-warning-msg .fa {
    font-size: 16px;
    color: #ffff80;
}

.prog {
    position: relative;
    height: 28px;

    background-color: black;
    padding: 0px;

    border-radius: 5px;
}

.prog .border-up {
    z-index: 1;
}

.hpbar {
    position: absolute;
    z-index: 0;

    height: 28px;

    background-color: #bb1111;
    border-radius: 5px;
}

.epbar {
    position: absolute;
    z-index: 0;

    height: 28px;

    background-color: #1111bb;
    border-radius: 5px;
}

.prog > span {
    position: absolute;
    z-index: 2;

    top: 0px;
    width: 100%;

    margin-top: 6px;

    text-align: center;
}

.cookies-info {
    padding-top: 15px;
    padding-bottom: 15px;

    position: fixed;
    z-index: 99;

    bottom: 0;
    left: 0;

    text-align: center;
    background-color: white;
    color: black;

    width: 100%;
}

#shoutboxTab {
    padding-top: 15px;
    padding-bottom: 15px;

    text-align: center;
}

#shoutboxRow {
    display: block;
    position: relative;

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

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

.shoutboxDivider {
    height: 50px;

    background-image: url('../img/border-up.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 50px;
}


.under-border #divider {
    height: 50px;

    background-image: url('../img/border-up.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 50px;
}


.info-block b {
	display: block;
	font-size: 25px;
	padding: 13px 0px 0px 0px;
}

.info-block span {
	display: block;
	padding: 0px 0px 6px 0px;
	font-size: 10px;
}

.info-block {
	margin-top: 10px;
	margin-bottom: 15px;
	display: block;
	background: rgba(0,0,0,.5);
	color: #ffffff;
	font-size: 11px;
	border-radius: 2px;
	width: auto;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 22px;
	cursor: default;
	padding-left: 15px;
	padding-right: 15px;
}

.info-block:hover {
	display: block;
	font-size: 11px;
	border-radius: 2px;
	width: auto;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 22px;
	padding-left: 15px;
	padding-right: 15px;
	cursor: default;
    color: #f9ca80;
}

.card_template {
    position: relative;

    width: 300px;
    height: 565px;

    display: inline-block;
    overflow: hidden;
}

.card_template .card_up {
    width: 300px;
    height: 565px;

    display: inline-block;
    overflow: hidden;

    position: absolute;
    left: 0;
    top: 0;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    z-index: 9999;
}

.card_template .card_up.stars1 {
    background-image: url('../img/card_template1.png');
}

.card_template .card_up.stars2 {
    background-image: url('../img/card_template2.png');
}

.card_template .card_up.stars3 {
    background-image: url('../img/card_template3.png');
}

.card_template .card_up.stars4 {
    background-image: url('../img/card_template4.png');
}

.card_template .card_up.stars5 {
    background-image: url('../img/card_template5.png');
}

.card_template .card_up.stars6 {
    background-image: url('../img/card_template6.png');
}

.card_template .card_up.stars7 {
    background-image: url('../img/card_template7.png');
}

.card_template .card_up.stars8 {
    background-image: url('../img/card_template8.png');
}

.card_template .image_holder {
    position: absolute;
    top: 12px;
    left: 10px;

    width: 280px;
    height: 348px;

    display: inline-block;
    overflow: hidden;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.card_template .text {
    position: absolute;
    left: 10px;
    top: 360px;

    width: 280px;
    height: 188px;

    display: inline-block;
    overflow: hidden;

    background-color: black;
}

.card_template progress.xp {
    position: relative;

    border-radius: 2px;
    width: 90%;
    height: 32px;

    background-color: black;
    border-color: white;
}

.card_template .text .xp-i {
    position: relative;
    margin-top: 10px;
}

.card_template .text .xp-i span {
    position: relative;
    top: -32px;

    color: white;
}

.card_template progress.xp::-moz-progress-bar,
.card_template progress.xp::-webkit-progress-bar {
    background-color: #448800;
    color: white;
}


.content1 .norm_box {
    background: #232323;
    color: white;
    padding: 10px;
    text-align: center;
    height: 150px;

    -webkit-transition: background 2s;
    transition: background 2s;
}

.content1 .stat_box {
    background: #121212;
    color: white;
    padding: 10px;
    text-align: center;
    height: 150px;

    -webkit-transition: background 2s;
    transition: background 2s;
}

.content1 .stat_box:hover {
    background: #4d0a0c;
}

.content1 .stat_box.active:hover {
    background: #2d6a3c;
    cursor: pointer;
}

.content1 .stat_box .icon, .content1 .norm_box .icon {
	font-size: 36px;
}

.modal-content {
    background-color: transparent;
}

.modal-content .modal-header,
.modal-content .modal-body,
.modal-content .modal-footer {
    background-color: rgba(0,0,0,.8);
    border-color: #f9ca80;
}

.modal-content textarea,
.modal-content input[type="text"],
.modal-content input[type="password"],
.modal-content input[type="email"] {
    width: 100%;

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

    padding: 8px 12px;

    border: 0;

    background-color: transparent;

    text-align: left;
    color: #c99a50;
}

.modal-content textarea:hover,
.modal-content textarea:focus,
.modal-content input[type="text"]:hover,
.modal-content input[type="password"]:hover,
.modal-content input[type="text"]:focus,
.modal-content input[type="password"]:focus {
    color: #f9ca80 !important;
}

.modal-content textarea {
    text-align: left;
    resize: vertical;
}

.event-body {
    margin-top: 30px;
    padding: 15px;
    position: relative;

    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;

    min-height: 150px;
    filter: hue-rotate(-60deg);
}

.event-body2 {
    margin-top: 30px;
    padding: 15px;
    position: relative;

    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;

    min-height: 150px;
    filter: hue-rotate(-20deg);
}

.event-body3 {
    margin-top: 30px;
    padding: 15px;
    position: relative;

    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;

    min-height: 150px;
    filter: hue-rotate(120deg);
}

.event-body4 {
    animation: "degreeHue" 2s linear 0s infinite alternate;

    margin-top: 30px;
    padding: 15px;
    position: relative;

    background: transparent;
    background-image: url('../img/bg-color.png');
    background-repeat: repeat;

    border-color: transparent;

    min-height: 150px;
}

.event-body .under-border {
    filter: hue-rotate(60deg);
}

.event-body2 .under-border {
    filter: hue-rotate(20deg);
}

.event-body3 .under-border {
    filter: hue-rotate(-120deg);
}

.event-body4 .under-border {
    animation: "degreeHueR" 2s linear 0s infinite alternate;
}

.event-body .button {
    filter: hue-rotate(-60deg);
}

.event-body2 .button {
    filter: hue-rotate(-20deg);
}

.event-body3 .button {
    filter: hue-rotate(120deg);
}

.event-body4 .button {
    animation: "degreeHue" 2s linear 0s infinite alternate;
}

.skill_box a {
    display: inline-block;
}

.popover {
    max-width: 320px;
    padding: 0;

    font-family: 'TrajanPro-Regular';
    color: #e8dcc4;

    background-color: rgba(10, 8, 5, .97);
    background-clip: padding-box;
    border: 1px solid rgba(233, 186, 112, .4);
    border-radius: 6px;
    box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .75);
}

.popover-title {
    padding: 10px 14px;
    margin: 0;

    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #f9ca80;

    background-color: rgba(233, 186, 112, .08);
    border-bottom: 1px solid rgba(233, 186, 112, .25);
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 10px 14px;

    font-size: 12px;
    line-height: 1.5;
    color: #d8cdb8;
}

.popover-content small {
    color: rgba(232, 220, 196, .7);
}

.popover > .arrow {
    border-width: 11px;
}

.popover > .arrow:after {
    border-width: 10px;
}

.popover.top > .arrow {
    border-top-color: rgba(233, 186, 112, .4);
}

.popover.top > .arrow:after {
    border-top-color: rgba(10, 8, 5, .97);
}

.popover.right > .arrow {
    border-right-color: rgba(233, 186, 112, .4);
}

.popover.right > .arrow:after {
    border-right-color: rgba(10, 8, 5, .97);
}

.popover.bottom > .arrow {
    border-bottom-color: rgba(233, 186, 112, .4);
}

.popover.bottom > .arrow:after {
    border-bottom-color: rgba(10, 8, 5, .97);
}

.popover.left > .arrow {
    border-left-color: rgba(233, 186, 112, .4);
}

.popover.left > .arrow:after {
    border-left-color: rgba(10, 8, 5, .97);
}

a.nav-but,
a.nav-but:link {
    display: inline-block;

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;

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

a.nav-but.active {
    color: #f9ca80;
}

#gameElement {
    position: fixed;
    left: 0;
    top: 0;
    box-sizing: border-box;

    display: flex;
    z-index: 1000;

    background-color: black;

    width: 100%;
    height: 100%;

    /* rezerwujemy miejsce na górny pasek ikon (.gameTopBar) i dolny pasek HP/EP (.gameBottomBar),
       żeby mapa nigdy nie renderowała się pod nimi - inaczej kliknięcie w miejscu paska
       (ruch klikiem po mapie) trafiałoby w niewidoczny, zasłonięty kafelek */
    padding-top: calc(70px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));

    overflow: hidden;
}

#gameUI {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    pointer-events: none;
}

#gameUI canvas,
#gameUI a,
#gameUI div {
    pointer-events: all;
}

#gameContainer {
    position: relative;
    margin: auto;
    z-index: 999;
    border: 1px solid rgba(172, 116, 19, .75);
    box-shadow: 0px 0px 50px 5px rgba(172, 116, 19, .33),
                0px -20px 300px 5px rgba(172, 116, 19, .33),
                0px 20px 300px 5px rgba(172, 116, 19, .33),
                -20px 0px 300px 5px rgba(172, 116, 19, .33),
                20px 0px 300px 5px rgba(172, 116, 19, .33);
    border-radius: 0;

    transition: transform .25s ease;
}

#gameContainer > div.inGame {
    position: relative;
    overflow: hidden;
}

.text-primary {
    color: rgb(224, 169, 74)
}

.divider {
    width: 100%;
    height: 40px;

    background-image: url('../img/border-up.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 50px;
}

canvas, #teleportItem, #catchItem, [id^='quest_'] {
    transition: left .1s linear, top .1s linear;
}

.popover_dimenshon {
    width: 100%;
    max-width: 400px;
    z-index: 9999;
}

.popover_dimenshon #divider {
    height: 15px;
    margin-bottom: 5px;
}

.popover_dimenshon .body {
    background-color: rgba(0, 0, 0, .7);
}

.popover_dimenshon .title {
    text-align: center;
    font-size: 14px;

    margin-bottom: 5px;
}

.popover_dimenshon .content {
    font-size: 12px;
    text-align: center;

    height: 100%;
    max-height: 200px;

    overflow: auto;
}

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

.popover_dimenshon .footer .button {
    font-size: 12px;
}

.popover_dimenshon .footer .text-danger {
    margin-top: 10px;
}

.popover_dimenshon .footer .text-success {
    margin-top: 10px;
}

.tooltip {
    z-index: 99999 !important;
}

.questBlock {
    position: relative;
    width: 100%;

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

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

#battleWindow {
    position: absolute;

    width: 100%;
    height: 100%;

    left: 0px;
    top: 0px;
    z-index: 200000;
}

.textbox {
    background-color: black;
    color: white;

    border: 1px solid white;

    position: absolute;

    bottom: 0px;
    left: 0px;

    width: 100%;
    height: 200px;

    overflow: auto;

    z-index: 99999;
}

.textbox img {
    width: 100%;
    max-width: 170px;

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

.textbox p {
    height: auto;
    overflow: auto;
}

.textbox .actionButton {
    display: block;
}

/* Okno plecaka/ekwipunku - stały nagłówek (tytuł + wstecz do menu + zamknij) nad przewijaną
   siatką przedmiotów, zamiast gołego linku tekstowego "Wróć do menu" na dole okna */
.bag {
    display: flex;
    flex-direction: column;

    overflow: hidden !important;
}

.bagHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

    padding: 10px 14px;

    border-bottom: 1px solid var(--d3-bronze-dark);
    background: rgba(0, 0, 0, .25);
}

.bagTitle {
    flex: 1 1 auto;

    text-align: center;
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

.bagBack,
.bagClose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    font-size: 12px;
    color: rgba(217, 199, 160, .6);

    cursor: pointer;
    transition: color .15s ease;
}

.bagBack:hover,
.bagClose:hover {
    color: var(--d3-gold);
}

.bagContent {
    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;
    padding: 14px;
}

.bag .item-box {
    width: 100px;
    height: 100px;

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

    display: inline-flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;

    background: var(--d3-iron);
    border: 1px solid var(--d3-bronze-dark);
    border-radius: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8);

    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.bag .item-box:hover {
    transform: translateY(-3px);
    border-color: var(--d3-bronze-bright);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8), 0 0 10px rgba(240, 205, 138, .35);
}

/* Okno listy teleportacji - ten sam wzorzec co plecak/ekwipunek: stały nagłówek
   (tytuł + zamknij) nad przewijaną listą celów renderowaną przez serwer */
.teleportWindowBox {
    display: flex;
    flex-direction: column;
}

.teleportHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

    padding: 10px 14px;

    border-bottom: 1px solid var(--d3-bronze-dark);
    background: rgba(0, 0, 0, .25);
}

.teleportTitle {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

.teleportTitle i {
    margin-right: 6px;
}

.teleportClose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    font-size: 12px;
    color: rgba(217, 199, 160, .6);

    cursor: pointer;
    transition: color .15s ease;
}

.teleportClose:hover {
    color: var(--d3-gold);
}

.teleportContent {
    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;
    padding: 10px 14px;
}

/* Elementy listy renderowane przez serwer (dowolny tag z atrybutem target=""),
   stylizowane jak reszta klikalnych wierszy menu (.gameCharMenuItem) */
.teleportContent [target] {
    display: block;

    padding: 10px 12px;
    margin-bottom: 6px;

    font-size: 13px;
    color: #e8dcc4;

    background: rgba(0, 0, 0, .2);
    border-radius: 4px;
    border-left: 2px solid transparent;

    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.teleportContent [target]:hover {
    background-color: rgba(233, 186, 112, .1);
    border-left-color: var(--d3-gold);
    color: var(--d3-gold);
}

/* Tooltipy przedmiotów (biblioteka Tooltipster, motyw "tt_default" - patrz ui.js) - domyślny
   wygląd biblioteki to płaska szara karta z czarną obwódką (assets/css/tooltipster.css).
   Nadpisujemy tu tylko motyw tt_default, samej biblioteki (tooltipster.css) nie ruszamy -
   ten plik ładuje się PRZED style.css, więc wystarczy dopasować specyficzność bez !important. */
.tt_default .tooltipster-box {
    background: linear-gradient(160deg, rgba(50, 36, 18, .97), rgba(10, 8, 5, .98));
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 6px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark),
        0 6px 16px rgba(0, 0, 0, .6);
}

.tt_default .tooltipster-content {
    max-width: 260px;

    border: none;
    background-color: transparent;

    padding: 12px 14px;

    font-family: 'TrajanPro-Regular';
    font-size: 12px;
    line-height: 1.5;
    color: #d9c7a0;
}

.tt_default .tooltipster-arrow-background {
    border-bottom-color: rgba(10, 8, 5, .98) !important;
    border-right-color: rgba(10, 8, 5, .98) !important;
    border-left-color: rgba(10, 8, 5, .98) !important;
    border-top-color: rgba(50, 36, 18, .97) !important;
}

.tt_default .tooltipster-arrow-border {
    border-bottom-color: var(--d3-bronze-bright) !important;
    border-right-color: var(--d3-bronze-bright) !important;
    border-left-color: var(--d3-bronze-bright) !important;
    border-top-color: var(--d3-bronze-bright) !important;
}

/* Zawartość tooltipa przedmiotu, generowana w templates/ajax/eq.php */
.itemTooltip {
    border-top: 2px solid;
    margin: -12px -14px -12px;
    padding: 12px 14px;
}

.itemTooltipEmpty {
    border-top: none;
    margin: 0;
    padding: 0;

    color: rgba(217, 199, 160, .6);
}

.itemTooltipHead {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 8px;
    padding-bottom: 8px;

    border-bottom: 1px solid var(--d3-bronze-dark);
}

.itemTooltipImage {
    flex-shrink: 0;
    width: 50px;
    height: 50px;

    border: 2px solid;
    border-radius: 6px;
    background: var(--d3-iron);
}

.itemTooltipHeadText {
    min-width: 0;
}

.itemTooltipName {
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
}

.itemTooltipRarity {
    margin-top: 2px;

    font-size: 11px;
    opacity: .85;
}

.itemTooltipType {
    margin-bottom: 8px;

    font-size: 11px;
    color: rgba(217, 199, 160, .6);
}

.itemTooltipStats {
    margin-bottom: 4px;
}

.itemTooltipStat {
    padding: 2px 0;
    color: #d9c7a0;
}

.itemTooltipReqs {
    margin-top: 6px;
    padding-top: 6px;

    border-top: 1px solid var(--d3-bronze-dark);
}

.itemTooltipReq {
    padding: 2px 0;
}

.itemTooltipReqOk {
    color: #7fd99e;
}

.itemTooltipReqFail {
    color: #e07a6b;
}

.itemTooltipFooter {
    margin-top: 8px;
    padding-top: 8px;

    border-top: 1px solid var(--d3-bronze-dark);
}

.itemTooltipCount {
    margin-bottom: 4px;

    font-size: 11px;
    color: rgba(217, 199, 160, .8);
}

.itemTooltipHint {
    font-size: 11px;
    font-style: italic;
    color: var(--d3-gold);
}

/* Okno dziennika questów - stały nagłówek nad przewijaną treścią renderowaną przez serwer,
   ten sam wzorzec co plecak/ekwipunek/teleportacja */
.questLogWindowBox {
    display: flex;
    flex-direction: column;
}

.questLogHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;

    padding: 10px 14px;

    border-bottom: 1px solid var(--d3-bronze-dark);
    background: rgba(0, 0, 0, .25);
}

.questLogTitle {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

.questLogTitle i {
    margin-right: 6px;
}

.questLogClose {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 22px;
    height: 22px;

    font-size: 12px;
    color: rgba(217, 199, 160, .6);

    cursor: pointer;
    transition: color .15s ease;
}

.questLogClose:hover {
    color: var(--d3-gold);
}

.questLogContent {
    position: relative;

    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;
    padding: 14px;

    font-size: 13px;
    color: #d9c7a0;
}

.questLogSpinner {
    position: absolute;
    left: calc(50% - 24px);
    top: calc(50% - 24px);

    color: var(--d3-bronze-bright);
}

/* Domyślny wygląd nagłówków/list wewnątrz treści renderowanej przez serwer - żeby to, co
   przyjdzie z backendu (bez znanych nam klas), i tak wpasowało się w resztę motywu */
.questLogContent h1,
.questLogContent h2,
.questLogContent h3,
.questLogContent h4 {
    margin: 0 0 8px;
    color: var(--d3-gold);
}

.questLogContent a {
    color: var(--d3-bronze-bright);
}

.questLogContent a:hover {
    color: var(--d3-gold);
}

/* Mały, zawsze widoczny "tracker" aktualnie śledzonego questa (prawy górny obszar mapy) */
.questLogTrackingBox {
    padding: 10px 12px;

    max-height: 60vh;
    overflow: auto;
}

.questTrackingHeader {
    margin-bottom: 6px;

    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.questTrackingHeader i {
    margin-right: 4px;
    color: var(--d3-bronze-bright);
}

.questTrackingTitle {
    margin-bottom: 4px;

    font-size: 14px;
    color: var(--d3-gold);
}

.questTrackingCoords {
    margin-bottom: 6px;

    font-size: 11px;
    color: rgba(217, 199, 160, .6);
}

.questTrackingText {
    overflow: hidden;

    font-size: 12px;
    line-height: 1.4;
    color: #d9c7a0;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.contextMenu {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;

    z-index: 999999;

    width: 240px;
    padding: 15px;

    background-color: black;
    color: white;

    border: 1px solid white;
}

.contextMenu a,
.contextMenu a:link {
    color: #dfdfdf;
}

.contextMenu a:hover,
.contextMenu a:focus {
    color: white;
}

.miningMinigame,
.puzzleMinigame,
.keyMinigame {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100005;
    width: 100%;
    height: 100%;

    background-color: black;
}

.miningPlayer img {
    width: 32px;
    height: 32px;
}

.miningBlock {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 1;
    width: 32px;
    height: 32px;
    background-color: white;
}

.miningPlayer {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 2;
    width: 32px;
    height: 32px;
}

.miningMinigame .movesinfo {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;
}

.miningMinigame .mineralsinfo {
    position: absolute;
    left: 0;
    z-index: 5;
}

.keyMinigame {
    touch-action: none;
}

.keyMinigame .stage{
    width:320px;
    padding:15px;
    position:relative;
    max-height:100%;
    overflow-y:auto;
    touch-action:pan-y;
  }
  @media (max-width: 480px){
    .keyMinigame .stage{ padding:16px 12px 20px; }
    .keyMinigame h1{ font-size:22px; }
    .keyMinigame .sub{ font-size:12.5px; margin-bottom:16px; }
    .keyMinigame .diff-btn{ padding:9px 12px; font-size:11px; flex:1 1 auto; }
  }
.keyMinigame .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:11px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--brass);
    text-align:center;
    opacity:.8;
    margin-bottom:6px;
  }
.keyMinigame h1{
    font-family:'Cinzel', serif;
    font-weight:700;
    font-size:clamp(24px,5vw,34px);
    text-align:center;
    margin:0 0 4px;
    color:var(--brass-bright);
    text-shadow:0 0 18px rgba(201,163,91,0.25);
    letter-spacing:.02em;
  }
.keyMinigame .sub{
    text-align:center;
    color:rgba(232,220,196,0.55);
    font-size:13.5px;
    margin-bottom:22px;
  }

.keyMinigame .panel{
    background:linear-gradient(180deg, var(--bg-panel), #171208);
    border:1px solid var(--line);
    border-radius:6px;
    box-shadow: inset 0 0 60px rgba(0,0,0,0.5), 0 20px 40px -20px rgba(0,0,0,0.7);
    padding:18px;
    position:relative;
  }
.keyMinigame .panel::before, .panel::after{
    content:"";
    position:absolute; width:9px; height:9px; border-radius:50%;
    background:radial-gradient(circle at 35% 35%, var(--brass-bright), var(--copper));
    top:10px;
  }
.keyMinigame .panel::before{left:10px;}
.keyMinigame .panel::after{right:10px;}

.keyMinigame #diffRow{
    display:flex; gap:8px; justify-content:center; margin-bottom:14px; flex-wrap:wrap;
  }
.keyMinigame .diff-btn{
    font-family:'JetBrains Mono', monospace;
    font-size:12px; letter-spacing:.06em;
    background:transparent;
    border:1px solid var(--line);
    color:rgba(232,220,196,0.7);
    padding:8px 16px;
    border-radius:3px;
    cursor:pointer;
    transition:all .15s ease;
  }
.keyMinigame .diff-btn:hover{ border-color:var(--brass); color:var(--brass-bright); }
.keyMinigame .diff-btn.active{
    background:var(--brass);
    border-color:var(--brass);
    color:#1a1310;
    font-weight:700;
  }

.keyMinigame {
    --bg-deep:#15110d;
    --bg-panel:#1e1812;
    --brass:#c9a35b;
    --brass-bright:#e8c887;
    --copper:#a9612f;
    --parchment:#e8dcc4;
    --danger:#9a3324;
    --success:#4f7a4a;
    --line: rgba(201,163,91,0.25);
}

.keyMinigame canvas {
    display:block;
    width:250px;
    background:
      radial-gradient(ellipse at 50% 45%, #241a12 0%, #100c08 75%);
    border-radius:4px;
    cursor:none;
    touch-action:none;
    border:1px solid var(--line);
  }

.keyMinigame .hud{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:14px; gap:16px; flex-wrap:wrap;
  }
.keyMinigame .label{
    font-family:'JetBrains Mono', monospace;
    font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
    color:rgba(232,220,196,0.5);
    margin-bottom:5px;
  }
.keyMinigame .barwrap{ flex:1; min-width:180px; }
.keyMinigame .bar-outer{
    height:14px; border-radius:7px;
    background:#0e0b07;
    border:1px solid var(--line);
    overflow:hidden;
    position:relative;
  }
.keyMinigame .bar-inner{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--copper), var(--brass-bright));
    transition:width .12s linear, background .3s ease;
    box-shadow:0 0 12px rgba(201,163,91,0.5);
  }
.keyMinigame .stat{
    font-family:'JetBrains Mono', monospace;
    font-size:20px;
    color:var(--brass-bright);
    min-width:70px;
    text-align:right;
  }

.keyMinigame .overlay{
    position:absolute; inset:0;
    background:rgba(10,8,5,0.88);
    border-radius:4px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:14px;
    text-align:center;
    padding:20px;
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
  }
.keyMinigame .overlay.show{ opacity:1; pointer-events:auto; }
.keyMinigame .overlay h2{
    font-family:'Cinzel', serif;
    font-size:26px;
    margin:0;
  }
.keyMinigame .overlay p{
    margin:0; font-size:13.5px; color:rgba(232,220,196,0.7); max-width:320px;
  }
.keyMinigame .overlay.win h2{ color:var(--brass-bright); }
.keyMinigame .overlay.lose h2{ color:#d97757; }

.keyMinigame .again-btn{
    font-family:'Inter',sans-serif;
    font-weight:700; font-size:13.5px;
    background:var(--brass);
    color:#1a1310;
    border:none; padding:11px 22px; border-radius:3px;
    cursor:pointer;
    letter-spacing:.02em;
  }
.keyMinigame .again-btn:hover{ background:var(--brass-bright); }

.keyMinigame .canvas-wrap{ position:relative; }

.keyMinigame .footer {
    text-align:left; font-size:11.5px; color:rgba(232,220,196,0.35);
    margin-top:16px; font-family:'JetBrains Mono', monospace;
}

@media(max-width: 991px){
    .navbar-second .navbar-nav > .open > a,
    .navbar-second .navbar-nav > .open > a:focus,
    .navbar-second .navbar-nav > .open > a:hover {
        text-align: center;
    }

    .navbar.navbar-first img {
        width: 200px;
    }

    .navbar.navbar-first .pull-right {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .navbar.navbar-first {
        font-size: 12px;
    }
}

/* --- Modernizacja wnętrza kart (bez ingerencji w ramki) --- */

h3.title {
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(233, 186, 112, .35);
}

.under-border > h3.title,
.under-border > center > h3.title {
    padding-bottom: 12px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(233, 186, 112, .2);
}

.login-form-group {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
}

.login-form-group .fa {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    color: rgba(201, 154, 80, .6);
    font-size: 14px;

    pointer-events: none;

    transition: color .2s ease;
}

.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    padding-left: 34px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;

    background-color: rgba(0, 0, 0, .25) !important;
    border: 1px solid rgba(201, 154, 80, .2) !important;
    border-radius: 4px;

    letter-spacing: .5px;

    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.login-form-group input[type="text"]:hover,
.login-form-group input[type="password"]:hover {
    border-color: rgba(233, 186, 112, .4) !important;
}

.login-form-group input[type="text"]:focus,
.login-form-group input[type="password"]:focus {
    background-color: rgba(0, 0, 0, .4) !important;
    border-color: rgba(249, 202, 128, .7) !important;
    box-shadow: 0 0 0 3px rgba(249, 202, 128, .12), 0 8px 16px -10px rgba(249, 202, 128, .6);
}

.login-form-group input:focus + .fa {
    color: rgba(249, 202, 128, .9);
    transform: translateY(-50%) scale(1.1);
}

.login-form-group .fa {
    transition: color .2s ease, transform .2s ease;
}

#loginForm p {
    font-size: 12px;
    text-align: center;
    color: #cfcfcf;
}

.prog {
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.hpbar,
.epbar {
    transition: width .4s ease;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%);
}

.online-friend-item {
    display: inline-block;
    transition: transform .2s ease;
}

.online-friend-item:hover {
    transform: translateY(-3px);
}

.online-friend-item img {
    transition: box-shadow .2s ease;
    border-radius: 50%;
}

.online-friend-item:hover img {
    box-shadow: 0 0 0 2px rgba(249, 202, 128, .6);
}

.your-place-box {
    display: block;
    margin-bottom: 15px;
    padding: 10px;

    text-align: center;

    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
}

.rank-row {
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color .2s ease;
}

.rank-row:hover {
    background-color: rgba(255, 255, 255, .05);
}

.rank-row .rank-number {
    font-weight: 700;
    color: #cfcfcf;
}

.rank-row.rank-1 .rank-number {
    color: #f6d365;
    text-shadow: 0 0 8px rgba(246, 211, 101, .6);
}

.rank-row.rank-2 .rank-number {
    color: #d9d9d9;
    text-shadow: 0 0 6px rgba(217, 217, 217, .4);
}

.rank-row.rank-3 .rank-number {
    color: #d8935a;
    text-shadow: 0 0 6px rgba(216, 147, 90, .4);
}

/* --- Modernizacja nawigacji (bez ingerencji w ramki) --- */

.navbar.navbar-first .navbar-brand img {
    transition: filter .25s ease;
}

.navbar.navbar-first .navbar-brand:hover img {
    filter: drop-shadow(0 0 10px rgba(249, 202, 128, .5));
}

.navbar.navbar-first .pull-right li a {
    position: relative;
    padding-bottom: 4px;
    letter-spacing: .5px;
}

.navbar.navbar-first .pull-right li a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 1px;

    background-color: #f9ca80;
    transition: width .2s ease, left .2s ease;
}

.navbar.navbar-first .pull-right li a:hover::after {
    left: 0;
    width: 100%;
}

.navbar.navbar-second .navbar-nav > li > a {
    letter-spacing: .5px;
    transition: color .2s ease, background-color .2s ease;
}

.navbar.navbar-second .navbar-nav > li > a:hover,
.navbar.navbar-second .navbar-nav > li > a:focus {
    background-color: rgba(255, 255, 255, .04);
}

.navbar.navbar-second .navbar-toggle {
    transition: border-color .2s ease;
}

.navbar-second .dropdown-menu {
    margin-top: 4px;
    border-radius: 4px;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .6) !important;

    animation: navDropdownIn .15s ease;
}

@keyframes navDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.navbar-second .dropdown-menu > li > a {
    padding-top: 8px;
    padding-bottom: 8px;
    transition: color .15s ease, padding-left .15s ease;
}

.navbar-second .dropdown-menu > li > a:hover {
    padding-left: 20px;
}

/* --- Modernizacja profilu użytkownika (bez ingerencji w ramki) --- */

.profileHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;

    margin-bottom: 20px;
    padding-bottom: 20px;

    border-bottom: 1px solid var(--d3-bronze-dark, #4a2f10);
}

.profileHeaderText {
    flex: 1 1 auto;
    min-width: 0;
}

.profileActions {
    margin-top: 8px;
}

.profileInfoGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

.profile-avatar-img {
    flex-shrink: 0;

    border-radius: 50%;
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(233, 186, 112, .15);

    object-fit: cover;
}

.but1,
.avatar-button,
.change-opis {
    display: inline-block;

    margin: 4px;
    padding: 8px 16px;

    background-color: rgba(0, 0, 0, .35);
    border: 1px solid rgba(233, 186, 112, .25);
    border-radius: 4px;

    font-size: 13px;
    color: #d9ba70;

    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.but1:hover,
.avatar-button:hover,
.change-opis:hover {
    background-color: rgba(233, 186, 112, .12);
    border-color: rgba(249, 202, 128, .6);
    color: #f9ca80;
}

/* Modal wyboru avatara (view/new/user/profile.php) - siatka portretów posiadanych postaci,
   zastępuje dawny upload dowolnego pliku */
.avatarPickerOverlay {
    display: none;

    position: fixed;
    z-index: 500000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
    padding: 20px;

    background: rgba(3, 2, 1, .82);
}

.avatarPickerOverlayVisible {
    display: flex;
}

.avatarPickerModal {
    position: relative;

    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 40px);
    overflow: auto;

    padding: 24px 26px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .97), rgba(8, 6, 4, .98));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark, #4a2f10),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 20px 50px rgba(0, 0, 0, .7);

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

.avatarPickerClose {
    position: absolute;
    top: 12px;
    right: 14px;

    font-size: 16px;
    color: rgba(217, 199, 160, .6);
    cursor: pointer;

    transition: color .15s ease;
}

.avatarPickerClose:hover {
    color: var(--d3-gold, #f9ca80);
}

.avatarPickerGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 14px;

    margin-top: 16px;
}

.avatarPickerOption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    padding: 10px;

    border: 1px solid rgba(233, 186, 112, .2);
    border-radius: 6px;

    text-decoration: none;
    cursor: pointer;

    transition: border-color .2s ease, background .2s ease, transform .15s ease;
}

.avatarPickerOption:hover {
    background: rgba(233, 186, 112, .1);
    border-color: var(--d3-gold, #f9ca80);
    transform: translateY(-2px);
}

.avatarPickerOption img {
    width: 70px;
    height: 70px;

    object-fit: cover;
    border-radius: 50%;
    border: 1px solid rgba(217, 168, 92, .5);
}

.avatarPickerOption span {
    font-size: 11px;
    color: #d9c7a0;
    text-align: center;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.info-block {
    transition: background-color .2s ease, transform .2s ease;
    border-left: 2px solid rgba(233, 186, 112, .4);
}

.info-block:hover {
    background: rgba(0, 0, 0, .65);
    transform: translateX(3px);
}

.profileInfoGrid .info-block {
    padding-top: 6px;
    padding-bottom: 6px;
}

.profileInfoGrid .info-block b {
    font-size: 14px;
    line-height: 1.3;
    padding-top: 4px;

    overflow-wrap: break-word;
    word-break: break-word;
}

.profileInfoGrid .info-block .profile-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
}

.friends-avatar-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 15px;
}

.tooltip-image img {
    border-radius: 50%;
    transition: transform .2s ease, box-shadow .2s ease;
}

.tooltip-image:hover img {
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(249, 202, 128, .6);
}

.profile-select {
    min-width: 200px;

    padding: 8px 32px 8px 12px;

    font-family: 'TrajanPro-Regular';
    font-size: 14px;
    color: #d9ba70 !important;

    background-color: rgba(0, 0, 0, .35);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23d9ba70'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;

    border: 1px solid rgba(233, 186, 112, .35);
    border-radius: 4px;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    cursor: pointer;

    transition: border-color .2s ease, background-color .2s ease;
}

.profile-select:hover,
.profile-select:focus {
    border-color: rgba(249, 202, 128, .7);
    background-color: rgba(233, 186, 112, .1);
    outline: none;
}

.profile-select option {
    color: black;
    background-color: #2b2416;
}

.stats-table-wrap {
    overflow-x: auto;

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

.stats-table {
    width: 100%;

    border-collapse: collapse;
    text-align: center;

    background-color: rgba(0, 0, 0, .35);
    border-radius: 4px;
    overflow: hidden;
}

.stats-table tr {
    border-bottom: 1px solid rgba(233, 186, 112, .15);

    transition: background-color .2s ease;
}

.stats-table tr:last-child {
    border-bottom: 0;
}

.stats-table tr:hover {
    background-color: rgba(233, 186, 112, .08);
}

.stats-table td,
.stats-table th {
    padding: 12px 15px;
}

.stats-table td {
    width: 75%;

    text-align: left;
    color: #e0e0e0;
}

.stats-table th {
    width: 25%;

    font-size: 16px;
    color: #f9ca80;
    text-shadow: 0 0 8px rgba(249, 202, 128, .3);
}

/* --- Modernizacja listy znajomych (bez ingerencji w ramki) --- */

.the-box-msg {
    display: block;
    text-align: center;

    padding-top: 15px;
    padding-bottom: 15px;

    color: rgba(255, 255, 255, .5);
    font-style: italic;
}

.friend-card {
    text-align: center;

    margin-bottom: 20px;
    padding: 10px;

    border-radius: 4px;

    transition: background-color .2s ease;
}

.friend-card:hover {
    background-color: rgba(255, 255, 255, .04);
}

.friendCardName {
    margin-top: 6px;

    font-size: 11px;
    color: #d9c7a0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.friend-card-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 10px;
}

.friend-card-actions .but1 {
    margin: 0;
}

.but1-danger {
    border-color: rgba(204, 85, 85, .35);
    color: #cc8888;
}

.but1-danger:hover {
    background-color: rgba(204, 85, 85, .12);
    border-color: rgba(255, 120, 120, .6);
    color: #ff9999;
}

/* --- Modernizacja Wioski (bez ingerencji w ramki) --- */

.village-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    padding-bottom: 15px;
    margin-bottom: 15px;

    border-bottom: 1px solid rgba(233, 186, 112, .2);
}

.village-menu .but1 {
    margin: 0;
}

.info-panel {
    margin-top: 10px;
    margin-bottom: 10px;
}

.type1 {
    padding: 8px 12px;

    margin: 0;

    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 154, 80, .35);

    text-align: center;
    color: #c99a50;

    transition: border-color .2s ease, color .2s ease;
}

.type1:hover,
.type1:focus {
    border-color: rgba(249, 202, 128, .6);
    color: #f9ca80;
    outline: none;
}

.village-donate-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 10px;
}

.village-donate-form .profile-select {
    min-width: 220px;
}

/* --- Modernizacja wyszukiwarki graczy (bez ingerencji w ramki) --- */

.search-form {
    text-align: center;

    margin-bottom: 15px;
}

.search-form-group {
    position: relative;

    display: inline-block;
    width: 100%;
    max-width: 320px;

    margin-bottom: 10px;
}

.search-form-group .fa {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    color: rgba(201, 154, 80, .6);
    font-size: 14px;

    pointer-events: none;

    transition: color .2s ease;
}

.search-form-group input[type="text"] {
    width: 100%;

    padding: 8px 12px 8px 32px;

    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(201, 154, 80, .35);

    text-align: center;
    color: #c99a50;

    transition: border-color .2s ease, color .2s ease;
}

.search-form-group input[type="text"]:hover,
.search-form-group input[type="text"]:focus {
    border-color: rgba(249, 202, 128, .6);
    color: #f9ca80;
    outline: none;
}

.search-form-group input:focus + .fa {
    color: rgba(249, 202, 128, .9);
}

.search-result-name {
    margin-top: 8px;

    font-size: 12px;
    color: #d9ba70;

    transition: color .2s ease;
}

.friend-card:hover .search-result-name {
    color: #f9ca80;
}

/* --- Modernizacja sklepu (bez ingerencji w ramki) --- */

.char-box1 {
    margin: 4px;
    border-radius: 4px;
    border: 2px solid transparent;

    transition: border-color .2s ease, transform .2s ease;
}

.char-box1:hover {
    transform: translateY(-2px);
    border-color: rgba(233, 186, 112, .35);
}

.char-box1.active {
    border-color: #f9ca80;
    box-shadow: 0 0 10px rgba(249, 202, 128, .5);
}

.account-stats {
    text-align: center;
    margin-top: 20px;
}

.account-stat {
    padding: 12px;
    margin-bottom: 10px;
}

.account-stat .fa {
    display: block;
    margin-bottom: 6px;

    font-size: 22px;
    color: rgba(233, 186, 112, .6);
}

.account-stat b {
    display: block;

    font-size: 20px;
    color: #f9ca80;
    text-shadow: 0 0 8px rgba(249, 202, 128, .3);
}

.account-stat span {
    display: block;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .5);
}

.shop-filter-form {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 15px;
}

.shop-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-bottom: 10px;
}

.shop-item,
.item-box {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    width: 50px;
    height: 50px;

    background-color: rgba(0, 0, 0, .5);
    border-radius: 6px;

    transition: transform .15s ease, background-color .15s ease;
}

.shop-item:hover,
.item-box:hover {
    transform: translateY(-3px);
    background-color: rgba(233, 186, 112, .12);
}

/* --- Ekrany logowania/rejestracji/odzyskiwania hasła jako ekran startowy KLIENTA GRY, nie
   podstrona WWW - pełnoekranowa, wyciemniona scena z logo, i panel(e) w tym samym bronzowo-
   -złotym metalu co reszta HUD-u (patrz .charInfoBox), zamiast starej ramki strony
   (.border-up/.border-down/.body). Ta stara ramka zostaje nietknięta i dalej używana gdzie
   indziej (village/nav itd.) - tu świadomie po nią nie sięgamy. --- */
.authScreen {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: calc(100vh - 90px);
    padding: 20px 16px;

    /* winieta - przyciemnia i "wciąga" krawędzie tła gry ku środkowi, jak scena startowa klienta */
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(5, 3, 1, .55) 78%, rgba(3, 2, 1, .85) 100%);
}

.authScreen ~ footer {
    margin-top: 14px;
    margin-bottom: 14px;
}

.authBrand {
    text-align: center;
}

.authBrandLogo {
    max-width: 220px;
    width: 42vw;

    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .7));
}

.authBrandTagline {
    margin-top: 4px;

    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.authCards {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 14px;

    width: 100%;
}

.authCard {
    width: 100%;
    max-width: 420px;
}

.authCardWide {
    max-width: 480px;
}

/* Panel logowania w metalu HUD-u gry - ten sam język co .charInfoBox (bronzowa obwódka,
   ciemny gradient, wytłoczenia), tylko trochę grubszy/bardziej reprezentacyjny, bo to
   pierwszy ekran, jaki widzi gracz */
.gameAuthPanel,
.gamePanel {
    position: relative;

    padding: 28px 26px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .95), rgba(8, 6, 4, .97));
    backdrop-filter: blur(4px);
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark, #4a2f10),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 10px 30px rgba(0, 0, 0, .65);

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

.gameAuthPanel h3.title,
.gamePanel h3.title {
    margin-top: 0;
}

.authScreen .gameAuthPanel,
.authScreen .gamePanel {
    padding: 18px 22px;
}

.authScreen .newsDivider {
    margin: 10px 0;
}

.authScreen .newsContent p {
    margin: 6px 0;
}

/* .body miało margin-top: 30px, co dawało naturalny odstęp między kolejnymi ułożonymi w stos
   panelami (np. znajomi online -> ranking w tej samej kolumnie dashboardu) - .gamePanel tego
   nie ma, więc dokładamy odstęp jawnie w kontekście dashboardu */
.gameDashboard .gamePanel {
    margin-bottom: 24px;
}

.downloadAppScreen {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;

    max-width: 980px;
    margin: 0 auto;
    padding: 20px 16px 40px;

    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(5, 3, 1, .55) 78%, rgba(3, 2, 1, .85) 100%);
}

.downloadAppHero {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 30px 16px 6px;
}

.downloadAppHeroLogo {
    max-width: 260px;
    width: 50vw;

    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .7));
}

.downloadAppHeroTagline {
    margin-top: 6px;

    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.downloadAppHeroText {
    max-width: 480px;
    margin-top: 14px;

    font-size: 14px;
    line-height: 1.5;
    color: #d9c7a0;
}

.downloadAppPlatformGroup {
    display: flex;
    flex-direction: column;
    align-items: center;

    margin-top: 22px;
}

.downloadAppPlatformGroupTitle {
    margin-bottom: 10px;

    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .5);
}

.downloadAppStoreButtons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}

.downloadAppStoreBtn {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 10px 20px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .95), rgba(8, 6, 4, .97));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
    box-shadow: inset 0 1px 2px rgba(255, 220, 160, .15), 0 4px 12px rgba(0, 0, 0, .5);

    color: #d9c7a0;
    text-decoration: none;

    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.downloadAppStoreBtn:hover {
    border-color: var(--d3-gold, #f9ca80);
    box-shadow: 0 0 14px rgba(240, 205, 138, .35);
    transform: translateY(-2px);
}

.downloadAppStoreBtn i {
    font-size: 26px;
    color: var(--d3-gold, #f9ca80);
}

.downloadAppStoreBtn span {
    display: flex;
    flex-direction: column;

    font-family: 'TrajanPro-Regular';
    font-size: 15px;
    text-align: left;
}

.downloadAppStoreBtn span small {
    font-size: 10px;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.downloadAppWebPlay {
    margin-top: 16px;

    font-size: 12px;
    letter-spacing: .3px;
    color: rgba(217, 199, 160, .7);
    text-decoration: none;
}

.downloadAppWebPlay:hover {
    color: var(--d3-gold, #f9ca80);
}

.downloadAppWebPlay i {
    margin-left: 4px;
}

.downloadAppSection {
    width: 100%;
}

.downloadAppScreenshots {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 700px) {
    .downloadAppScreenshots {
        grid-template-columns: repeat(3, 1fr);
    }
}

.downloadAppScreenshot {
    aspect-ratio: 16 / 9;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: rgba(0, 0, 0, .35);
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 6px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .5);

    color: rgba(217, 199, 160, .35);
    font-size: 32px;

    transition: transform .15s ease, box-shadow .2s ease;
}

.downloadAppScreenshot:has(img):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .6);
}

/* Same zrzuty (dowolnej proporcji/rozmiaru) - zawsze wypełniają kartę i są równo przycięte,
   zamiast renderować się w swoim natywnym rozmiarze i rozjeżdżać siatkę (patrz zgłoszenie
   użytkownika - różne screeny miały różne wymiary i psuły układ) */
.downloadAppScreenshot img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.downloadAppNewsLayout {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;

    margin-bottom: 16px;
}

.downloadAppNewsList {
    flex: 1 1 280px;

    display: flex;
    flex-direction: column;

    max-height: 420px;
    overflow: auto;
}

.downloadAppNewsEmpty {
    padding: 10px 0;

    font-size: 12px;
    color: rgba(217, 199, 160, .5);
}

.downloadAppNewsItem {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;

    padding: 10px 8px;

    border-bottom: 1px solid rgba(233, 186, 112, .15);

    color: #d9c7a0;
    text-decoration: none;

    transition: background .15s ease, border-color .2s ease;
}

.downloadAppNewsItem:last-child {
    border-bottom: none;
}

.downloadAppNewsItem:hover,
.downloadAppNewsItemActive {
    background: rgba(233, 186, 112, .1);
    border-color: var(--d3-gold, #f9ca80);
}

.downloadAppNewsBadge {
    flex-shrink: 0;

    padding: 2px 8px;

    font-size: 10px;
    letter-spacing: .3px;

    border: 1px solid rgba(217, 168, 92, .5);
    border-radius: 20px;
    color: rgba(217, 199, 160, .7);
}

.downloadAppNewsItemTitle {
    flex: 1 1 auto;
    min-width: 0;

    font-size: 13px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.downloadAppNewsItemActive .downloadAppNewsItemTitle {
    color: var(--d3-gold, #f9ca80);
}

.downloadAppNewsItemDate {
    flex-shrink: 0;

    font-size: 11px;
    color: rgba(217, 199, 160, .5);
}

.downloadAppNewsPreview {
    flex: 1 1 320px;

    min-height: 220px;

    overflow: hidden;
    border-radius: 6px;
    border: 1px solid rgba(217, 168, 92, .35);
}

.downloadAppNewsPreview img {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.downloadAppNewsPreviewPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 220px;

    background: rgba(0, 0, 0, .35);
    color: rgba(217, 199, 160, .35);
    font-size: 32px;
}

.downloadAppNewsModalOverlay {
    display: none;

    position: fixed;
    z-index: 500000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    align-items: center;
    justify-content: center;
    padding: 20px;

    background: rgba(3, 2, 1, .82);
}

.downloadAppNewsModalOverlayVisible {
    display: flex;
}

body.downloadAppNewsModalOpen {
    overflow: hidden;
}

.downloadAppNewsModal {
    position: relative;

    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 40px);
    overflow: auto;

    padding: 26px 26px 22px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .97), rgba(8, 6, 4, .98));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark, #4a2f10),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 20px 50px rgba(0, 0, 0, .7);

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

.downloadAppNewsModalClose {
    position: absolute;
    top: 12px;
    right: 14px;

    font-size: 16px;
    color: rgba(217, 199, 160, .6);
    cursor: pointer;

    transition: color .15s ease;
}

.downloadAppNewsModalClose:hover {
    color: var(--d3-gold, #f9ca80);
}

.downloadAppNewsModalImg {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;

    margin-bottom: 16px;
    border-radius: 6px;
    border: 1px solid rgba(217, 168, 92, .35);
}

.downloadAppNewsModal .title {
    margin: 0 0 6px;
    padding-right: 20px;

    text-align: center;
}

.downloadAppNewsModalDate {
    margin-bottom: 14px;

    text-align: center;
    font-size: 11px;
    color: rgba(217, 199, 160, .5);
}

.downloadAppNewsModalContent {
    font-size: 13px;
    line-height: 1.6;
}

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

.downloadAppPwaSteps li {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 10px 0;

    font-size: 13px;
    line-height: 1.6;
    color: #d9c7a0;

    border-bottom: 1px solid rgba(233, 186, 112, .15);
}

.downloadAppPwaSteps li:last-child {
    border-bottom: none;
}

.downloadAppPwaStepNum {
    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    background: rgba(233, 186, 112, .12);
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 50%;

    font-size: 12px;
    color: var(--d3-gold, #f9ca80);
}

.downloadAppPwaNote {
    font-size: 13px;
    line-height: 1.6;
    color: #d9c7a0;
}

.newsDivider {
    height: 1px;
    margin: 18px 0;

    background: linear-gradient(90deg, transparent, var(--d3-bronze-dark, #4a2f10) 50%, transparent);
}

.newsContent h4 {
    margin-bottom: 4px;
    color: var(--d3-gold, #f9ca80);
}

.newsContent small {
    display: block;
    margin-bottom: 8px;

    color: rgba(217, 199, 160, .5);
}

/* Pełna lista aktualności po stronie gracza (view/new/news/index.php) - siatka kart zamiast
   pojedynczej pionowej listy, żeby dało się ogarnąć więcej artykułów naraz i żeby banery
   faktycznie wyglądały jak banery, nie jak rozciągnięty pasek na całą szerokość strony */
.newsGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

@media (min-width: 760px) {
    .newsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.newsCard {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: linear-gradient(160deg, rgba(50, 36, 18, .95), rgba(8, 6, 4, .97));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark, #4a2f10),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 10px 30px rgba(0, 0, 0, .5);

    transition: transform .15s ease, box-shadow .2s ease;
}

.newsCard:hover {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark, #4a2f10),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 14px 34px rgba(0, 0, 0, .6);
}

.newsCardBanerLink {
    display: block;
}

.newsCardBaner {
    display: block;
    width: 100%;
    height: 180px;

    object-fit: cover;
}

.newsCardBanerPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    color: rgba(217, 199, 160, .3);
    font-size: 34px;
}

.newsCardBody {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    padding: 16px 18px 18px;
}

.newsCardDate {
    margin-bottom: 6px;

    font-size: 11px;
    letter-spacing: .3px;
    color: rgba(217, 199, 160, .5);
}

.newsCardTitle {
    margin: 0 0 8px;

    font-size: 16px;
    line-height: 1.3;
}

.newsCardTitle a {
    color: var(--d3-gold, #f9ca80);
    text-decoration: none;
}

.newsCardTitle a:hover {
    text-decoration: underline;
}

.newsCardExcerpt {
    flex: 1 1 auto;

    margin: 0 0 16px;

    font-size: 13px;
    line-height: 1.6;
    color: #d9c7a0;
}

.newsCardFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.newsCardManage {
    display: flex;
    gap: 6px;
}

.newsCardManage .adminTableBtn {
    padding: 6px 9px;
}

.newsReadPanel {
    max-width: 820px;
    margin: 0 auto;
    padding: 0;

    overflow: hidden;
}

.newsReadBaner {
    display: block;
    width: 100%;
    max-height: 340px;

    object-fit: cover;
    border-radius: 6px 6px 0 0;
}

.newsReadHeader {
    padding: 24px 28px 0;
    text-align: center;
}

.newsReadTitle {
    margin: 0 0 12px;

    font-family: 'TrajanPro-Regular';
    font-size: 26px;
    line-height: 1.3;
    color: var(--d3-gold, #f9ca80);
}

.newsReadMeta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;

    margin-bottom: 14px;

    font-size: 12px;
    color: rgba(217, 199, 160, .55);
}

.newsReadManage {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-bottom: 18px;
}

.newsReadContent {
    padding: 4px 28px 28px;

    font-size: 14px;
    line-height: 1.8;
    color: #d9c7a0;

    border-bottom: 1px solid rgba(233, 186, 112, .15);
    margin-bottom: 22px;
}

.newsReadContent img {
    max-width: 100%;
    border-radius: 6px;
}

.newsReadContent p {
    margin: 0 0 14px;
}

.newsReadPanel > center {
    display: block;
    padding-bottom: 26px;
}

.authFooter {
    margin-top: 18px;
    padding-top: 14px;

    text-align: center;
    font-size: 13px;
    color: rgba(217, 199, 160, .6);

    border-top: 1px solid rgba(138, 90, 46, .25);
}

.authFooter a {
    color: var(--d3-gold, #f9ca80);
}

.authFooterLinks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;

    margin-top: 8px;
}

/* Dashboard zalogowanego gracza na stronie głównej (lista znajomych, ranking, newsy) -
   lekki odpowiednik .container, żeby siatka Bootstrapa (.row/.col-*) miała wokół siebie
   sensowny margines zamiast rozjeżdżać się do samych krawędzi ekranu */
/* Sklep i "Twoje przedmioty" obok siebie (dwie kolumny) - patrz view/new/item/buy.php */
.shopColumns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;

    margin-bottom: 24px;
}

.shopColumns .gamePanel {
    flex: 1 1 380px;
    min-width: 0;
    margin-bottom: 0;
}

.gameDashboard {
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* zostawiamy miejsce na stopkę (wersja gry/copyright) pod spodem, żeby wyśrodkowanie
       w pionie nie wypychało jej poza widoczny ekran */
    min-height: calc(100vh - 170px);
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
}

/* Minimalny pasek klienta na dashboardzie - garstka okrągłych ikon (sklep/gildia/hasło/wyloguj)
   zamiast pełnej strony-nawigacji z rozwijanymi menu. .gameMenuIcon to ta sama ikona co
   w prawdziwym HUD-zie gry (patrz mobile.js/ui.js), tu użyta jako zwykły element flexboksa */
.dashboardTopBar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;

    margin-bottom: 16px;
}

/* Podnawigacja sekcji gildii (view/new/guild/nav.php) - to samo bronzowo-złote okno co
   .gamePanel, ale środek zamieniony na pasek zakładek zamiast listy .nav-but z pełną
   nawigacją strony */
.guildNavPanel {
    padding: 18px 20px;
}

.guildNavTabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

    margin-top: 12px;
}

.guildNavTab {
    display: inline-block;
    padding: 7px 14px;
    font-family: 'TrajanPro-Regular';
    font-size: 12px;
    letter-spacing: .5px;
    color: #d9c7a0;
    text-decoration: none;
    text-transform: uppercase;

    background: linear-gradient(160deg, rgba(50,36,18,.85), rgba(8,6,4,.9));
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 4px;

    transition: background .15s ease, color .15s ease;
}

.guildNavTab:hover {
    color: #fff;
    background: linear-gradient(160deg, rgba(80,58,28,.95), rgba(20,14,8,.97));
    text-decoration: none;
}

.guildNavTab.active {
    color: #ffd98a;
    background: linear-gradient(160deg, rgba(110,78,30,.95), rgba(30,20,10,.97));
    border-color: #ffd98a;
}

/* Panel powitalny dashboardu ("kontynuuj grę") - to pierwsze, co widzi zalogowany gracz,
   więc duży, wyraźny przycisk "Wejdź do gry" zamiast chowania tej akcji w rozwijanym menu */
.dashboardHero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 24px;
}

.dashboardWelcome {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.dashboardUsername {
    margin-top: 2px;

    font-size: 22px;
    color: var(--d3-gold, #f9ca80);
    text-shadow: 0 0 14px rgba(240, 205, 138, .4);
}

.dashboardPlayBtn {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 14px 30px;

    background: linear-gradient(160deg, var(--d3-blood-bright, #e04c3c), var(--d3-blood, #5c0d0d));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 6px;
    box-shadow:
        inset 0 1px 2px rgba(255, 220, 160, .25),
        0 6px 16px rgba(0, 0, 0, .5);

    font-family: 'TrajanPro-Regular';
    font-size: 16px;
    letter-spacing: .5px;
    color: #fff2e0;

    transition: transform .15s ease, box-shadow .15s ease;
}

.dashboardPlayBtn:hover {
    transform: translateY(-2px);
    color: #fff2e0;
    box-shadow:
        inset 0 1px 2px rgba(255, 220, 160, .25),
        0 10px 22px rgba(0, 0, 0, .6),
        0 0 18px rgba(224, 76, 60, .5);
}

.dashboardNewsBar {
    padding-top: 18px;
    padding-bottom: 18px;
}

.dashboardNewsBarHeader {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 12px;
}

.dashboardNewsBarHeader h3.title {
    margin: 0;
}

.dashboardNewsBarHeader a {
    font-size: 12px;
    letter-spacing: .5px;
    color: rgba(217, 199, 160, .75);
    text-decoration: none;
}

.dashboardNewsBarHeader a:hover {
    color: #ffd98a;
}

.dashboardNewsBarList {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 700px) {
    .dashboardNewsBarList {
        grid-template-columns: repeat(3, 1fr);
    }
}

.dashboardNewsBarItem {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 12px 14px;

    background: linear-gradient(160deg, rgba(50,36,18,.85), rgba(8,6,4,.9));
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 4px;

    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}

.dashboardNewsBarItem:hover {
    text-decoration: none;
    background: linear-gradient(160deg, rgba(80,58,28,.95), rgba(20,14,8,.97));
    transform: translateY(-2px);
}

.dashboardNewsBarItemImg {
    display: block;
    width: 100%;
    height: 110px;

    object-fit: cover;
    border-radius: 3px;
    border: 1px solid rgba(217, 168, 92, .35);
}

.dashboardNewsBarItemImgPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    color: rgba(217, 199, 160, .35);
    font-size: 28px;
}

.dashboardNewsBarItemTitle {
    font-family: 'TrajanPro-Regular';
    font-size: 13px;
    color: #d9c7a0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboardNewsBarItem:hover .dashboardNewsBarItemTitle {
    color: #ffd98a;
}

.dashboardNewsBarItemDate {
    font-size: 11px;
    letter-spacing: .5px;
    color: rgba(217, 199, 160, .5);
}

/* --- Modernizacja zmiany hasła (bez ingerencji w ramki) --- */

.password-form {
    max-width: 340px;

    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

.password-field {
    margin-bottom: 15px;
}

.password-field label {
    display: block;

    margin-bottom: 4px;

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .5);
}

/* --- Modernizacja UI gry: HUD w stylu Diablo 3 - kuty brąz/mosiądz, okrągłe sloty run (bez ingerencji w ramki) --- */

:root {
    --d3-iron: #120d09;
    --d3-bronze-dark: #4a2f10;
    --d3-bronze: #8a5a2e;
    --d3-bronze-bright: #d9a85c;
    --d3-gold: #f0cd8a;
    --d3-blood: #5c0d0d;
    --d3-blood-bright: #e04c3c;
    --d3-mana: #0d2a5c;
    --d3-mana-bright: #4c9ce0;
}

.gameDpadBtn {
    position: absolute;
    z-index: 100000;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 50px;
    height: 50px;

    font-size: 24px;
    color: var(--d3-gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);

    background:
        radial-gradient(circle at 32% 28%, rgba(255, 220, 160, .12), transparent 45%),
        radial-gradient(circle at center, #241a10 0%, var(--d3-iron) 78%);
    border: 3px solid var(--d3-bronze-bright);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 3px 4px rgba(255, 220, 160, .2),
        inset 0 -4px 6px rgba(0, 0, 0, .7),
        0 4px 10px rgba(0, 0, 0, .6);

    cursor: pointer;
    user-select: none;
    touch-action: none;

    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
}

/* telefony w układzie pionowym - odrobinę mniejsze przyciski, żeby zmieściły się wygodnie
   w dwukolumnowym klastrze bez wychodzenia poza bezpieczny obszar ekranu */
@media (max-width: 420px) {
    .gameDpadBtn {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }

    .gameDpadBtn-action {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .gameMenuIcon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
}

.gameDpadBtn:hover {
    border-color: var(--d3-gold);
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 3px 4px rgba(255, 220, 160, .3),
        inset 0 -4px 6px rgba(0, 0, 0, .7),
        0 0 14px rgba(240, 205, 138, .5);
}

.gameDpadBtn.pressed,
.gameDpadBtn:active {
    transform: scale(.92);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 220, 160, .2), transparent 45%),
        radial-gradient(circle at center, #3a2a15 0%, var(--d3-iron) 78%);
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 2px 8px rgba(0, 0, 0, .8),
        0 0 18px rgba(240, 205, 138, .6);
}

/* przyciski akcji bojowej (atak) - większe, krwistoczerwony akcent zamiast brązu */
.gameDpadBtn-action {
    width: 58px;
    height: 58px;

    font-size: 26px;

    border-color: var(--d3-blood-bright);
    box-shadow:
        inset 0 0 0 2px var(--d3-blood),
        inset 0 3px 4px rgba(255, 160, 140, .2),
        inset 0 -4px 6px rgba(0, 0, 0, .7),
        0 4px 10px rgba(0, 0, 0, .6);
}

.gameDpadBtn-action:hover {
    border-color: #ff8a7a;
    box-shadow:
        inset 0 0 0 2px var(--d3-blood),
        inset 0 3px 4px rgba(255, 160, 140, .3),
        inset 0 -4px 6px rgba(0, 0, 0, .7),
        0 0 16px rgba(224, 76, 60, .6);
}

.gameDpadBtn-action.pressed,
.gameDpadBtn-action:active {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 160, 140, .25), transparent 45%),
        radial-gradient(circle at center, #3a1512 0%, var(--d3-iron) 78%);
    box-shadow:
        inset 0 0 0 2px var(--d3-blood),
        inset 0 2px 8px rgba(0, 0, 0, .8),
        0 0 20px rgba(224, 76, 60, .7);
}

.gameMenuIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    font-size: 17px;
    color: var(--d3-gold) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);

    background:
        radial-gradient(circle at 32% 28%, rgba(255, 220, 160, .1), transparent 45%),
        radial-gradient(circle at center, #241a10 0%, var(--d3-iron) 78%);
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 2px 3px rgba(255, 220, 160, .2),
        0 3px 8px rgba(0, 0, 0, .6);

    cursor: pointer;
    transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.gameMenuIcon:hover {
    transform: scale(1.08);
    border-color: var(--d3-gold);
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 2px 3px rgba(255, 220, 160, .3),
        0 0 12px rgba(240, 205, 138, .5);
}

.gameMenuIcon:active,
.gameMenuIcon.pressed {
    transform: scale(.92);
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 2px 8px rgba(0, 0, 0, .8),
        0 0 14px rgba(240, 205, 138, .6);
}

/* pozycjonowanie samodzielne (bez owijającego diva) - używane dla ikon stale przypiętych do rogu ekranu */
.gameMenuIcon-fixed {
    position: absolute;
    z-index: 100000;
}

/* Wspólny górny prawy pasek ikon - wszystkie przyciski akcji w jednym rzędzie,
   każda kolejna ikona dokłada się z prawej strony. Zastępuje rozrzucone,
   absolutnie pozycjonowane przyciski w rogach ekranu. */
.gameTopBar {
    position: absolute;
    z-index: 1000;
    top: calc(15px + env(safe-area-inset-top, 0px));
    right: calc(15px + env(safe-area-inset-right, 0px));
    transform-origin: top right;
    transition: transform .2s ease;

    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    max-width: calc(100vw - 30px);
}

/* w pasku pozycjonowanie odbywa się wyłącznie przez flexbox */
.gameTopBar .gameDpadBtn,
.gameTopBar .gameMenuIcon {
    position: static;
}

.gameTopToast {
    position: absolute;
    z-index: 200001;
    top: calc(75px + env(safe-area-inset-top, 0px));
    right: calc(15px + env(safe-area-inset-right, 0px));

    pointer-events: none !important;

    transition: transform .2s ease;
}

.battleAlertBox {
    position: relative;

    padding: 18px 22px;
    max-width: 260px;

    text-align: center;
    pointer-events: all;

    animation: theMsgIn .25s ease;
}

.battleAlertClose {
    position: absolute;
    top: 6px;
    right: 8px;

    font-size: 12px;
    color: rgba(217, 199, 160, .6);

    cursor: pointer;
    transition: color .15s ease;
}

.battleAlertClose:hover {
    color: var(--d3-gold);
}

.battleAlertTitle {
    margin-bottom: 6px;
    padding-right: 12px;

    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

/* Lista napotkanych przeciwników, wzór "[ilość]x [nazwa]" - po jednej pozycji w wierszu */
.battleAlertEnemies {
    margin-bottom: 16px;

    font-size: 12px;
    line-height: 1.5;
    color: #d9c7a0;
}

.battleAlertIcons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.battleAlertChoice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    cursor: pointer;
}

.battleAlertChoice .gameDpadBtn {
    position: static;
}

.battleAlertChoice span {
    font-size: 11px;
    color: #d9c7a0;
}

.battleAlertChoice:hover span {
    color: var(--d3-gold);
}

/* Walka turowa - na razie wyłączona/niedokończona, więc wyszarzona i nieklikalna,
   ale wciąż widoczna (zapowiedź funkcji zamiast całkowitego jej ukrywania) */
.battleAlertChoiceDisabled {
    cursor: default;
    opacity: .4;
    filter: grayscale(1);
}

.battleAlertChoiceDisabled .gameDpadBtn {
    pointer-events: none;
}

.battleAlertChoiceDisabled span {
    font-size: 10px;
    line-height: 1.4;
}

.battleAlertChoiceDisabled:hover span {
    color: #d9c7a0;
}

.battleResultToast {
    padding: 10px 16px;

    display: flex;
    align-items: center;
    gap: 10px;

    pointer-events: none;

    font-size: 13px;
    letter-spacing: .3px;
    color: #f5ead0;

    opacity: 0;
    animation: battleResultToastIn .25s ease forwards;
}

.battleResultToast.battleResultToastOut {
    animation: battleResultToastOutAnim .3s ease forwards;
}

.battleResultToast i {
    font-size: 20px;
}

.battleResultToast.win {
    border-color: var(--d3-gold);
}

.battleResultToast.win i {
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .6);
}

.battleResultToast.lose {
    border-color: var(--d3-blood-bright);
}

.battleResultToast.lose i {
    color: var(--d3-blood-bright);
    text-shadow: 0 0 10px rgba(224, 76, 60, .6);
}

.battleResultToast.draw {
    border-color: var(--d3-bronze-bright);
}

.battleResultToast.draw i {
    color: #d9c7a0;
}

.turnBattleScreen {
    position: fixed;
    z-index: 500000;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;

    overflow: auto;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background:
        radial-gradient(ellipse at center, rgba(60, 20, 20, .55) 0%, rgba(5, 3, 2, .95) 75%),
        linear-gradient(180deg, #1a0f08, #050302);

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

.turnBattleSceneField {
    flex: 1 1 auto;
    min-height: 0;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;

    padding: 20px 24px 10px;
}

.turnBattleEnemyField {
    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;

    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    align-content: center;
    gap: 28px;
}

.turnBattlePartySpriteField {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 14px;
}

.turnBattlePartySprite {
    transition: transform .15s ease, filter .15s ease;
}

.turnBattlePartySpriteImg,
.turnBattlePartySpriteField .turnBattlePartyImgPlaceholder {
    width: 56px;
    height: 56px;

    object-fit: contain;
    image-rendering: pixelated;

    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}

.turnBattlePartySpriteField .turnBattlePartyImgPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(217, 168, 92, .35);
    border-radius: 50%;
    color: rgba(217, 199, 160, .4);
    font-size: 20px;
}

.turnBattlePartySpriteActing {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 10px rgba(240, 205, 138, .7));
}

.turnBattleEnemySprite {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;

    width: 96px;

    transition: transform .15s ease, filter .15s ease;
}

.turnBattleEnemySprite.turnBattleTargetable {
    cursor: pointer;
}

.turnBattleEnemySprite.turnBattleTargetable:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 0 10px rgba(224, 76, 60, .6));
}

.turnBattleTargetCursor {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);

    color: var(--d3-gold);
    font-size: 20px;
    text-shadow: 0 0 8px rgba(240, 205, 138, .7);

    opacity: 0;
    animation: turnBattleCursorBounce 1s ease-in-out infinite;
}

.turnBattleEnemySprite.turnBattleTargetable:hover .turnBattleTargetCursor {
    opacity: 1;
}

@keyframes turnBattleCursorBounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(4px); }
}

.turnBattleEnemyImg,
.turnBattleEnemyImgPlaceholder {
    width: 72px;
    height: 72px;

    object-fit: contain;
    image-rendering: pixelated;

    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6));
}

.turnBattleEnemyImgPlaceholder {
    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(217, 168, 92, .35);
    border-radius: 50%;
    color: rgba(217, 199, 160, .4);
    font-size: 24px;
}

.turnBattleEnemyName {
    font-size: 12px;
    letter-spacing: .3px;
    color: #f5ead0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .8);

    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnBattleUnitDead {
    opacity: .35;
    filter: grayscale(1);
}

.turnBattleUnitBar {
    position: relative;
    width: 100%;

    height: 12px;
    border-radius: 3px;
    overflow: hidden;

    background: rgba(0, 0, 0, .55);
    border: 1px solid rgba(233, 186, 112, .3);
}

.turnBattleUnitBarFill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;

    transition: width .3s ease;
}

.turnBattleUnitBarFillHp {
    background: linear-gradient(90deg, #2f7d32, #57b85c);
}

.turnBattleUnitBarFillEnemy {
    background: linear-gradient(90deg, var(--d3-blood, #5c0d0d), var(--d3-blood-bright, #e04c3c));
}

.turnBattleUnitBarFillEp {
    background: linear-gradient(90deg, #1d5f8a, #4aa3d9);
}

.turnBattleUnitBarEp {
    height: 9px;
}

.turnBattleUnitBarEp span {
    line-height: 9px;
    font-size: 7px;
}

.turnBattleUnitBar span {
    position: relative;
    z-index: 1;

    display: block;
    text-align: center;

    font-size: 9px;
    line-height: 12px;
    color: #f5ead0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
}

.turnBattleUnitName {
    font-size: 11px;
    color: #d9c7a0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnBattleTopMessageBar {
    flex-shrink: 0;

    margin: 16px 20px 0;
    padding: 10px 22px;
    min-height: 16px;

    text-align: center;
    font-size: 14px;
    letter-spacing: .3px;
    color: #f5ead0;

    background: linear-gradient(160deg, rgba(50,36,18,.92), rgba(10,8,5,.95));
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(255, 220, 160, .15), 0 4px 12px rgba(0, 0, 0, .6);
}

.turnBattleBottomRow {
    flex-shrink: 0;

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 14px;

    padding: 0 20px 20px;
}

.turnBattleLeftBox,
.turnBattlePartyStatsBox {
    flex: 1 1 320px;
    max-height: 40vh;

    padding: 10px 14px;
    overflow: auto;

    background: linear-gradient(160deg, rgba(50,36,18,.95), rgba(8,6,4,.97));
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(255, 220, 160, .15), 0 4px 12px rgba(0, 0, 0, .6);
}

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

.turnBattleLogLine {
    font-size: 12px;
    line-height: 1.4;
    color: #d9c7a0;
}

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

.turnBattleStatRow {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 6px 4px;

    border-bottom: 1px solid rgba(233, 186, 112, .15);
}

.turnBattleStatRow:last-child {
    border-bottom: none;
}

.turnBattleStatRowActing {
    background: rgba(233, 186, 112, .1);
    box-shadow: inset 3px 0 0 var(--d3-gold);
}

.turnBattleStatName {
    flex: 0 0 84px;
    min-width: 0;

    font-size: 12px;
    color: #f5ead0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.turnBattleStatNums {
    flex: 0 0 auto;

    font-size: 12px;
    white-space: nowrap;
}

.turnBattleStatHp {
    color: #f5ead0;
}

.turnBattleStatSlash {
    margin: 0 2px;
    color: rgba(217, 199, 160, .4);
}

.turnBattleStatMaxHp {
    color: rgba(217, 199, 160, .6);
}

.turnBattleStatEp {
    flex: 0 0 44px;

    font-size: 10px;
    color: #4aa3d9;
    white-space: nowrap;
}

.turnBattleStatRow .turnBattleUnitBar {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
}

.turnBattleMenuHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 8px;
    padding-bottom: 6px;

    font-size: 12px;
    color: var(--d3-gold);
    border-bottom: 1px solid rgba(233, 186, 112, .25);
}

.turnBattleMenuBack {
    font-size: 11px;
    color: rgba(217, 199, 160, .6);
    cursor: pointer;
}

.turnBattleMenuBack:hover {
    color: var(--d3-gold);
}

.turnBattleMenuOption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 8px 10px;
    margin-bottom: 4px;

    font-size: 13px;
    color: #d9c7a0;

    border-radius: 4px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.turnBattleMenuOption:last-child {
    margin-bottom: 0;
}

.turnBattleMenuOption:hover {
    background: rgba(233, 186, 112, .12);
    color: var(--d3-gold);
}

.turnBattleMenuOption i {
    width: 16px;
    text-align: center;
}

.turnBattleMenuOptionDisabled {
    cursor: default;
    opacity: .4;
}

.turnBattleMenuOptionDisabled:hover {
    background: none;
    color: #d9c7a0;
}

.turnBattleMenuOptionCost {
    font-size: 11px;
    color: #4aa3d9;
    white-space: nowrap;
}

.turnBattleSkillEmpty {
    text-align: center;
    padding: 6px;

    font-size: 11px;
    color: rgba(217, 199, 160, .5);
}

.turnBattleResultTitle {
    margin-bottom: 10px;
    padding-bottom: 8px;

    text-align: center;
    font-size: 16px;
    letter-spacing: .5px;

    border-bottom: 1px solid rgba(233, 186, 112, .25);
}

.turnBattleResultTitleWin {
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .5);
}

.turnBattleResultTitleLose {
    color: var(--d3-blood-bright, #e04c3c);
}

.turnBattleResultTitleDraw {
    color: #d9c7a0;
}

.turnBattleResultRow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-bottom: 6px;

    font-size: 13px;
    color: #d9c7a0;
}

.turnBattleResultRow i {
    color: var(--d3-bronze-bright);
    width: 14px;
}

.turnBattleResultLevelUp {
    color: var(--d3-gold);
    font-weight: bold;
}

.turnBattleResultLevelUp i {
    color: var(--d3-gold);
}

.turnBattleResultItems {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

    margin: 8px 0;
}

.turnBattleResultItem {
    width: 28px;
    height: 28px;

    object-fit: contain;
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(217, 168, 92, .35);
    border-radius: 4px;
}

.turnBattleResultCloseBtn {
    margin-top: 10px;
    justify-content: center;
}

.turnBattleFastResultPopup {
    position: fixed;
    z-index: 500001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);

    width: 280px;
    max-width: calc(100vw - 30px);
    max-height: calc(100vh - 40px);
    padding: 18px 20px;
    overflow: auto;

    text-align: center;

    opacity: 1;
    transition: opacity .3s ease, transform .3s ease;
}

.turnBattleFastResultPopupOut {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
}

@media (max-width: 700px) {
    .turnBattleSceneField {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .turnBattlePartySpriteField {
        flex-direction: row;
    }

    .turnBattleBottomRow {
        flex-direction: column;
        align-items: stretch;
    }

    .turnBattleLeftBox,
    .turnBattlePartyStatsBox {
        flex-basis: auto;
        max-height: 26vh;
    }
}

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

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

.gameHudToastList {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.gameSystemToast {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 9px 16px;
    max-width: 260px;

    font-size: 12px;
    line-height: 1.4;
    color: #f5ead0;

    opacity: 0;
    animation: battleResultToastIn .2s ease forwards;
}

.gameSystemToast::before {
    content: '\f0a1';
    font-family: FontAwesome;
    flex-shrink: 0;

    font-size: 14px;
    color: var(--d3-bronze-bright);
}

.gameSystemToast.gameSystemToastOut {
    animation: battleResultToastOutAnim .3s ease forwards;
}

/* Pełnoekranowa animacja ostrzy po kliknięciu "Szybka walka" - czysto dekoracyjna,
   nie blokuje żadnych kliknięć i sama się usuwa (patrz Game_Battle.playBladeAnimation) */
.battleSlashOverlay {
    position: fixed;
    z-index: 300000;
    inset: 0;

    overflow: hidden;
    pointer-events: none !important;
}

.battleSlashFlash {
    position: absolute;
    inset: 0;

    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .35), transparent 60%);
    opacity: 0;
    animation: battleFlash .35s ease-out forwards;
}

.battleSlash {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 150vmax;
    height: 5px;

    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, .85) 44%,
        var(--d3-gold) 50%,
        rgba(255, 255, 255, .85) 56%,
        transparent
    );
    box-shadow: 0 0 12px rgba(240, 205, 138, .7);

    opacity: 0;
}

.battleSlash1 {
    transform: translate(-50%, -50%) rotate(35deg) scaleX(0);
    animation: bladeSlash1 .55s cubic-bezier(.2, .8, .3, 1) forwards;
}

.battleSlash2 {
    transform: translate(-50%, -50%) rotate(-35deg) scaleX(0);
    animation: bladeSlash2 .55s cubic-bezier(.2, .8, .3, 1) .12s forwards;
}

@keyframes battleFlash {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes bladeSlash1 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(35deg) scaleX(0); }
    20% { opacity: 1; }
    55% { opacity: 1; transform: translate(-50%, -50%) rotate(35deg) scaleX(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(35deg) scaleX(1); }
}

@keyframes bladeSlash2 {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(-35deg) scaleX(0); }
    20% { opacity: 1; }
    55% { opacity: 1; transform: translate(-50%, -50%) rotate(-35deg) scaleX(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) rotate(-35deg) scaleX(1); }
}

/* Kule HP/many w stylu Diablo 3 - płynne wypełnienie w okrągłym naczyniu */
.charOrbRow {
    display: flex;
    justify-content: center;
    gap: 10px;

    padding-top: 6px;
    padding-bottom: 4px;
}

.charOrb {
    position: relative;

    width: 56px;
    height: 56px;

    /* UWAGA: bez overflow:hidden tutaj! Dymek z tooltipem (.charOrb::after) wystaje ponad
       kółko, a overflow:hidden na tym samym elemencie by go obcinało. Przycinanie płynu do
       okrągłego kształtu robi teraz osobna, wewnętrzna warstwa .charOrbInner (patrz niżej) */
    background: var(--d3-iron);
    border: 3px solid var(--d3-bronze-bright);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 2px var(--d3-bronze-dark),
        inset 0 4px 8px rgba(0, 0, 0, .85),
        0 3px 8px rgba(0, 0, 0, .6);

    cursor: default;
}

.charOrbInner {
    position: absolute;
    z-index: 1;
    inset: 0;

    overflow: hidden;
    border-radius: 50%;
}

.charOrbFill {
    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;

    box-shadow: inset 0 3px 6px rgba(255, 255, 255, .2);
    transition: height .3s ease;

    /* "fiolka" - poziom cieczy delikatnie faluje w górę/w dół, jakby oddychała */
    animation: orbBob 2.8s ease-in-out infinite;
}

.charOrbFill.hp {
    background: linear-gradient(180deg, var(--d3-blood-bright), var(--d3-blood));
}

.charOrbFill.ep {
    background: linear-gradient(180deg, var(--d3-mana-bright), var(--d3-mana));
}

/* Falująca powierzchnia cieczy - prawdziwa, przesuwająca się w bok tekstura fali (SVG),
   a nie obracający się kształt (stąd poprzednio wyglądało to jak wirujący patyk zamiast
   fali). Pasek jest 2x szerszy niż kółko i zawiera dwie kopie jednego okresu fali - płynne
   przesunięcie o dokładnie jedną kopię (translateX: -50%) daje bezszwową, ciągłą pętlę.
   Wyśrodkowany na granicy poziomu cieczy (margin-top: -połowa wysokości), więc kawałek jest
   zawsze widoczny wewnątrz wypełnienia, nawet przy 100% - a przy niższym poziomie wystaje
   ponad taflę i jest przycinany przez .charOrbInner. Dwie warstwy o różnej prędkości/kierunku
   i delikatnej przezroczystości = lekki, subtelny efekt zamiast czegoś krzykliwego. */
.charOrbFill::before,
.charOrbFill::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -6px;

    width: 200%;
    height: 12px;

    background-repeat: repeat-x;
    background-size: 50% 100%;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%2020'%3E%3Cpath%20d='M0,12%20C25,4%2075,20%20100,12%20L100,20%20L0,20%20Z'%20fill='white'/%3E%3C/svg%3E");
}

.charOrbFill::before {
    opacity: .28;
    animation: orbWaveScrollA 6s linear infinite;
}

.charOrbFill::after {
    opacity: .16;
    background-position-x: 25%;
    animation: orbWaveScrollB 9s linear infinite reverse;
}

@keyframes orbBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes orbWaveScrollA {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes orbWaveScrollB {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.charOrbShine {
    position: absolute;
    z-index: 3;
    top: 10%;
    left: 22%;

    width: 30%;
    height: 22%;

    background: radial-gradient(ellipse at center, rgba(255, 255, 255, .55), transparent 70%);
    border-radius: 50%;

    pointer-events: none;
}

/* Liczby zniknęły z samych kółek - realna wartość PŻ/PE pokazuje się dopiero w dymku
   po najechaniu myszką (atrybut data-tooltip ustawiany w character.js) */
.charOrb[data-tooltip],
.gameMenuIcon[data-tooltip] {
    position: relative;
}

.charOrb[data-tooltip]::after,
.gameMenuIcon[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 100010;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translate(-50%, 4px);

    padding: 4px 9px;
    white-space: nowrap;

    background: linear-gradient(160deg, rgba(50, 36, 18, .96), rgba(10, 8, 5, .98));
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .6);

    font-size: 11px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: none;

    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}

.charOrb[data-tooltip]:hover::after,
.gameMenuIcon[data-tooltip]:hover::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Panele informacyjne HUD-u (staty postaci, lista wrogów, lokalizacja) */
.charInfoBox {
    background:
        linear-gradient(160deg, rgba(50, 36, 18, .92), rgba(10, 8, 5, .95));
    backdrop-filter: blur(4px);
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 6px;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark),
        inset 0 1px 2px rgba(255, 220, 160, .15),
        0 4px 12px rgba(0, 0, 0, .6);

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

/* Okienko statystyk postaci - przebudowane z gołych wierszy Bootstrapa na spójną z resztą
   HUD-u kartę: nagłówek z przyciskiem zamknięcia, odznaka wolnych punktów, sekcje z ikonkami. */
.statsWindowBox {
    padding: 0 0 14px;
}

.statsWindowHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 14px;

    border-bottom: 1px solid var(--d3-bronze-dark);
    background: rgba(0, 0, 0, .25);
}

.statsWindowTitle {
    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

.statsClose {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    font-size: 12px;
    color: rgba(217, 199, 160, .6);

    cursor: pointer;
    transition: color .15s ease;
}

.statsClose:hover {
    color: var(--d3-gold);
}

.statsPointsBadge {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;

    margin: 10px 14px 0;
    padding: 6px 10px;

    background: rgba(240, 205, 138, .08);
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 4px;

    font-size: 12px;
    color: var(--d3-gold);
}

.statsSectionTitle {
    margin: 14px 14px 4px;

    font-size: 11px;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: rgba(217, 199, 160, .55);
}

.statsRow {
    display: flex;
    align-items: center;
    gap: 8px;

    margin: 0 14px;
    padding: 6px 0;

    border-bottom: 1px solid rgba(138, 90, 46, .25);

    font-size: 12px;
}

.statsRowIcon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 20px;

    font-size: 13px;
    color: var(--d3-bronze-bright);
}

.statsRowReadonly .statsRowIcon {
    color: rgba(217, 199, 160, .4);
}

.statsRowLabel {
    flex: 1 1 auto;
    color: #d9c7a0;
}

.statsRowReadonly .statsRowLabel {
    color: rgba(217, 199, 160, .6);
}

.statsRowValue {
    min-width: 44px;

    text-align: right;
    font-weight: bold;
    color: var(--d3-gold);
}

.statsRowReadonly .statsRowValue {
    font-weight: normal;
    color: #d9c7a0;
}

/* Mały okrągły "+" do podniesienia statystyki - ten sam bronzowy bewel co reszta przycisków */
.statsRaiseBtn {
    display: none;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 18px;
    height: 18px;

    background: radial-gradient(circle at 32% 28%, rgba(255, 220, 160, .15), transparent 60%), var(--d3-iron);
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 50%;

    font-size: 9px;
    color: var(--d3-gold);

    cursor: pointer;
    transition: transform .1s ease, box-shadow .15s ease;
}

.statsRaiseBtn:hover {
    box-shadow: 0 0 8px rgba(240, 205, 138, .6);
}

.statsRaiseBtn:active {
    transform: scale(.9);
}

.charStatBarRow {
    position: relative;

    width: 100%;
    height: 18px;

    overflow: hidden;
    background-color: var(--d3-iron);
    border: 1px solid var(--d3-bronze-dark);
    border-radius: 4px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .8);
}

.charStatBarFill {
    position: absolute;
    z-index: 2002;
    left: 0;
    top: 0;

    height: 100%;

    box-shadow: inset 0 2px 3px rgba(255, 255, 255, .25), inset 0 -3px 4px rgba(0, 0, 0, .35);
    transition: width .3s ease;
}

.charStatBarFill.hp {
    background: linear-gradient(180deg, var(--d3-blood-bright), var(--d3-blood));
}

.charStatBarFill.ep {
    background: linear-gradient(180deg, var(--d3-mana-bright), var(--d3-mana));
}

.charStatBarFill.xp {
    background: linear-gradient(180deg, var(--d3-gold), var(--d3-bronze));
}

.charStatBarFill.pa {
    /* stonowana zieleń zamiast neonowej - lepiej pasuje do reszty bronzowo-złotej palety */
    background: linear-gradient(180deg, #6ba889, #24473a);
}

.charStatBarLabel {
    position: absolute;
    z-index: 2003;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: 11px;
    letter-spacing: .3px;
    color: #f5ead0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .9);
}

.charPosterCanvas {
    border: 2px solid var(--d3-bronze-bright);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark),
        inset 0 2px 3px rgba(255, 220, 160, .2),
        0 3px 8px rgba(0, 0, 0, .6);

    transition: transform .2s ease;
}

/* Portret w dolnym pasku HUD - stoi tuż obok kuli HP, na tej samej linii co reszta
   elementów (patrz .gameBottomBar align-items: flex-end) */
.charPosterCanvasHud {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    margin-bottom: 5px;
}

/* Wspólny wygląd "pigułki" dla wierszy w środkowej kolumnie dolnego paska (poziom/złoto,
   lokalizacja) - .gameBottomInfo i .charLocationRow celowo NIE dzielą jednej klasy z tym
   stylem, bo updateGoldLevel() w character.js usuwa i odtwarza wiersz poziomu/złota po
   selektorze ".gameBottomInfo" przy każdej zmianie golda/poziomu (częste po walce) - gdyby
   wiersz lokalizacji miał tę samą klasę, byłby przy okazji kasowany z DOM-u na stałe */
.gameBottomRow {
    display: flex;

    padding: 4px 8px;

    background: rgba(0, 0, 0, .4);
    border: 1px solid var(--d3-bronze-dark);
    border-radius: 4px;

    font-size: 11px;
    color: #d9c7a0;
}

/* Nazwa lokacji - osobny wiersz pod paskiem poziomu/złota, ta sama "kartka" tylko
   wyśrodkowana zamiast dwóch kolumn */
.charLocationRow {
    justify-content: center;

    letter-spacing: .3px;
    color: var(--d3-gold);
}

/* Dolny pasek statusu postaci - kula HP z lewej, kula many z prawej, pomiędzy nimi
   XP/PA i informacje o poziomie/złocie. Zajmuje całą szerokość dołu ekranu. */
.gameBottomBar {
    position: fixed;
    z-index: 1001;
    left: 0;
    right: 0;
    bottom: 0;
    transform-origin: bottom center;
    transition: transform .2s ease;

    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;

    padding: 0 15px calc(12px + env(safe-area-inset-bottom, 0px));
    padding-left: calc(15px + env(safe-area-inset-left, 0px));
    padding-right: calc(15px + env(safe-area-inset-right, 0px));

    /* #gameUI div { pointer-events: all } ma wyższą specyficzność (ID) - trzeba nadpisać jawnie,
       bo ten pasek jest pełnej szerokości i nie może blokować kliknięć na mapę pod spodem
       (np. ruch klikiem) w pustych miejscach między kulami a środkową kolumną */
    pointer-events: none !important;
}

.charOrbBig {
    width: 74px;
    height: 74px;
    flex-shrink: 0;
}

.gameBottomCenter {
    display: flex;
    flex-direction: column;
    gap: 4px;

    flex: 1 1 auto;
    min-width: 0;
    max-width: 480px;
    padding-bottom: 8px;
}

.gameBottomInfo {
    justify-content: space-between;
}

.gameCharMenuItem {
    display: block;

    padding: 12px 14px;
    margin-bottom: 6px;

    font-size: 14px;
    color: #e8dcc4;

    border-radius: 4px;
    border-left: 2px solid transparent;

    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.gameCharMenuItem i {
    width: 20px;
    margin-right: 8px;
    color: rgba(233, 186, 112, .8);
}

.gameCharMenuItem:hover {
    background-color: rgba(233, 186, 112, .1);
    border-left-color: #f9ca80;
    color: #f9ca80;
}

.closeMenu:hover {
    color: #ff9999 !important;
}

/* Główne menu gry (hub z zakładkami w stylu gier gacha) - lewy panel z wizytówką gracza
   i prawy z paskiem zakładek + treścią aktywnej zakładki (patrz GameUI.openMenu) */
.gameMenuLayout {
    display: flex;
    flex-wrap: nowrap;

    width: 100%;
    height: 100%;
}

.gameMenuLeftPanel {
    position: relative;
    flex: 0 0 220px;
    max-width: 26vw;

    margin: 2vw;
    padding: 1vw;

    text-align: center;
}

.gameMenuAvatarWrap {
    padding-top: 1.5vw;
}

.gameMenuAvatar {
    width: 110px;
    height: 110px;
    max-width: 60%;
    aspect-ratio: 1 / 1;

    object-fit: cover;
    object-position: center center;

    border-radius: 50%;
    border: 2px solid var(--d3-bronze-bright);
    box-shadow:
        inset 0 0 0 1px var(--d3-bronze-dark),
        0 3px 10px rgba(0, 0, 0, .6);
}

.gameMenuPlayerName {
    margin-top: 12px;

    font-size: 14px;
    letter-spacing: .3px;
    color: var(--d3-gold);
    text-shadow: 0 0 10px rgba(240, 205, 138, .4);
}

.gameMenuPlayerLevel {
    margin-top: 4px;

    font-size: 11px;
    color: #d9c7a0;
}

.gameMenuRightPanel {
    flex: 1 1 auto;
    min-width: 0;

    margin: 2vw 2vw 2vw 0;
    padding: 1vw;

    display: flex;
    flex-direction: column;
}

.gameMenuTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    flex-shrink: 0;
    padding-bottom: 14px;
    margin-bottom: 14px;

    border-bottom: 1px solid var(--d3-bronze-dark);
}

.gameMenuTab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 16px 8px 8px;

    font-family: 'TrajanPro-Regular';
    font-size: 11px;
    letter-spacing: .5px;
    text-transform: uppercase;
    font-weight: bold;
    color: #d9c7a0;

    background: linear-gradient(180deg, rgba(233, 186, 112, .1), rgba(0, 0, 0, .35));
    border: 1px solid var(--d3-bronze-dark);
    border-radius: 3px;
    box-shadow: inset 0 1px 0 rgba(255, 235, 190, .08);

    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease, box-shadow .2s ease;
}

.gameMenuTab i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 50%;

    font-size: 11px;
    color: rgba(233, 186, 112, .8);

    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.gameMenuTab:hover {
    background: linear-gradient(180deg, rgba(233, 186, 112, .2), rgba(0, 0, 0, .4));
    border-color: var(--d3-bronze-bright);
    color: var(--d3-gold);
    transform: translateY(-1px);
}

.gameMenuTab.active {
    background: linear-gradient(180deg, rgba(240, 205, 138, .25), rgba(0, 0, 0, .4));
    border-color: var(--d3-gold);
    color: var(--d3-gold);
    box-shadow: 0 0 10px rgba(240, 205, 138, .35), inset 0 1px 0 rgba(255, 235, 190, .15);
}

.gameMenuTab.active i {
    background: rgba(240, 205, 138, .2);
    border-color: var(--d3-gold);
    color: var(--d3-gold);
}

.gameMenuTab.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -9px;

    height: 2px;

    background: var(--d3-gold);
    box-shadow: 0 0 6px var(--d3-gold);
}

.gameMenuTabSoon {
    padding: 1px 5px;

    font-size: 8px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: #1c140a;

    background: var(--d3-bronze-bright);
    border-radius: 3px;
}

.gameMenuTabContent {
    flex: 1 1 auto;
    min-height: 0;

    overflow: auto;
}

.gameMenuSoon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    height: 100%;
    padding: 40px 20px;

    text-align: center;
    color: rgba(217, 199, 160, .6);
}

.gameMenuSoon i {
    margin-bottom: 14px;

    font-size: 42px;
    color: var(--d3-bronze-bright);
}

.gameMenuSoonTitle {
    margin-bottom: 6px;

    font-size: 16px;
    color: var(--d3-gold);
}

.gameMenuSoonText {
    font-size: 12px;
}

.gameMenuTabBadge {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    margin-left: 2px;

    background: var(--d3-blood-bright, #e04c3c);
    border-radius: 8px;

    font-size: 10px;
    font-weight: bold;
    color: #fff;
}

.chatRoomTabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 10px;
    padding-bottom: 10px;

    border-bottom: 1px solid rgba(233, 186, 112, .15);
}

.chatRoomTab {
    padding: 5px 12px;

    background: rgba(0, 0, 0, .25);
    border: 1px solid var(--d3-bronze-dark);
    border-radius: 12px;

    font-size: 11px;
    color: #d9c7a0;

    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.chatRoomTab:hover {
    border-color: var(--d3-bronze-bright);
    color: var(--d3-gold);
}

.chatRoomTab.active {
    background: rgba(233, 186, 112, .15);
    border-color: var(--d3-gold);
    color: var(--d3-gold);
}

.chatMessages {
    display: flex;
    flex-direction: column;
    gap: 8px;

    max-height: 320px;
    min-height: 120px;
    margin-bottom: 10px;
    padding-right: 4px;

    overflow-y: auto;
}

.chatMessageRow {
    display: flex;
    gap: 8px;
}

.chatMessageAvatar {
    flex: 0 0 auto;

    width: 32px;
    height: 32px;

    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 50%;

    object-fit: cover;
}

.chatMessageBody {
    flex: 1 1 auto;
    min-width: 0;
}

.chatMessageMeta {
    display: flex;
    gap: 8px;
    align-items: baseline;
}

.chatMessageAuthor {
    font-size: 12px;
    font-weight: bold;
    color: var(--d3-gold, #f9ca80);
}

.chatMessageTime {
    font-size: 10px;
    color: rgba(217, 199, 160, .45);
}

.chatMessageText {
    font-size: 12px;
    line-height: 1.5;
    color: #d9c7a0;

    word-break: break-word;
}

.chatInputRow {
    display: flex;
    gap: 8px;
}

.chatInput {
    flex: 1 1 auto;

    padding: 9px 12px;

    background-color: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .35);
    border-radius: 4px;

    font-family: 'TrajanPro-Regular';
    font-size: 13px;
    color: #f5ead0;
}

.chatInput:focus {
    outline: none;
    border-color: var(--d3-gold, #f9ca80);
}

.chatInput::placeholder {
    color: rgba(217, 199, 160, .4);
}

.gameSettingsTitle {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;

    color: #f9ca80;
    letter-spacing: 1px;
}

.gameSettingsPanel {
    padding: 0 10px;
}

.gameSettingsRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    margin-bottom: 14px;
}

.gameSettingsRow label:first-child {
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.gameSettingsRow .profile-select {
    min-width: 150px;
}

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

    width: 42px;
    height: 22px;

    margin: 0;
    cursor: pointer;
}

.toggleSwitch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggleSlider {
    position: absolute;
    inset: 0;

    background-color: rgba(255, 255, 255, .15);
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 22px;

    transition: background-color .2s ease;
}

.toggleSlider::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 1px;

    width: 16px;
    height: 16px;

    background-color: #d9ba70;
    border-radius: 50%;

    transition: transform .2s ease, background-color .2s ease;
}

.toggleSwitch input:checked + .toggleSlider {
    background-color: rgba(233, 186, 112, .35);
    border-color: rgba(249, 202, 128, .7);
}

.toggleSwitch input:checked + .toggleSlider::before {
    transform: translateX(20px);
    background-color: #f9ca80;
}

.gameSettingsGamepadStatus {
    text-align: center;
    margin-bottom: 15px;

    font-size: 12px;
}

.gpConnected {
    color: #99ff99;
}

.gpDisconnected {
    color: rgba(255, 255, 255, .4);
}

.gameSettingsActions {
    text-align: center;
}

.gameSettingsActions .button {
    display: inline-block;
}

.moveMarker {
    position: absolute;
    z-index: 1002;

    pointer-events: none;
}

.moveMarkerRing {
    position: absolute;
    inset: 15%;

    border: 2px solid rgba(249, 202, 128, .85);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(249, 202, 128, .6);

    animation: moveMarkerPulse .8s ease-out infinite;
}

.moveMarkerDot {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;

    background-color: #f9ca80;
    border-radius: 50%;
    box-shadow: 0 0 6px rgba(249, 202, 128, .9);
}

@keyframes moveMarkerPulse {
    0% {
        transform: scale(.6);
        opacity: 1;
    }
    100% {
        transform: scale(1.35);
        opacity: 0;
    }
}

/* --- Modernizacja listy postaci (bez ingerencji w ramki) --- */

.char-card-col {
    margin-bottom: 30px;
}

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

.card_template {
    transition: transform .2s ease, filter .2s ease;
}

.card_template:hover {
    transform: translateY(-6px);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .6));
}

.card-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;

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

.card-action-btn {
    display: inline-block;

    padding: 6px 12px;

    font-size: 11px;
    letter-spacing: .3px;
    color: #d9ba70;

    background-color: rgba(0, 0, 0, .4);
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 3px;

    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}

.card-action-btn:hover {
    background-color: rgba(233, 186, 112, .15);
    border-color: rgba(249, 202, 128, .7);
    color: #f9ca80;
    transform: translateY(-2px);
}

.card-action-btn-danger {
    border-color: rgba(204, 85, 85, .35);
    color: #cc8888;
}

.card-action-btn-danger:hover {
    background-color: rgba(204, 85, 85, .12);
    border-color: rgba(255, 120, 120, .6);
    color: #ff9999;
}

.content1 .norm_box,
.content1 .stat_box {
    border-radius: 4px;
}

.content1 .norm_box .icon,
.content1 .stat_box .icon {
    display: block;

    margin-bottom: 6px;

    color: #d9ba70;
}

.content1 .stat_box {
    cursor: default;
    opacity: .55;

    transition: background .3s ease, opacity .3s ease, transform .2s ease;
}

.content1 .stat_box:hover {
    background: #121212;
}

.content1 .stat_box.active {
    opacity: 1;
    cursor: pointer;
}

.content1 .stat_box.active:hover {
    background: #2d6a3c;
    transform: translateY(-3px);
}

.content1 .stat_box.active .icon {
    color: #f9ca80;
}

/* --- Modernizacja ekwipunku postaci (bez ingerencji w ramki) --- */

.eq-table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
}

/* lalka ekwipunku: sloty nadpisują ogólną klasę .item-box (kafle sklepu),
   bo tutaj ikony są pozycjonowane bezwzględnie na sylwetce postaci */
.equipment-doll .item-box {
    display: inline-block;

    width: auto;
    height: auto;

    background: none;
    border-radius: 0;

    transition: none;
}

.equipment-doll .item-box:hover {
    background: none;
    transform: none;
}

.equipment-doll .item-box img.tooltip-image {
    border-radius: 6px;
    transition: transform .15s ease, filter .15s ease;
}

.equipment-doll .item-box:hover img.tooltip-image {
    transform: scale(1.15);
    filter: brightness(1.15);
}

.head.bl3 {
    margin-top: 5px;
    margin-bottom: 15px;

    text-align: center;
}

.head.bl3 .title {
    display: inline-block;

    padding-bottom: 8px;

    font-size: 18px;
    letter-spacing: .5px;
    color: #f9ca80;
    text-shadow: 0 0 10px rgba(233, 186, 112, .35);

    border-bottom: 1px solid rgba(233, 186, 112, .25);
}

/* --- Ekran ładowania gry (bez ingerencji w ramki) --- */

.gameLoadingScreen {
    position: fixed;
    inset: 0;
    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    background-image: linear-gradient(rgba(0, 0, 0, .78), rgba(0, 0, 0, .92)), url('../img/back-bg.jpg');
    background-position: center center;
    background-size: cover;

    opacity: 1;
    transition: opacity .4s ease;
}

.gameLoadingScreen.fadeOut {
    opacity: 0;
    pointer-events: none;
}

.gameLoadingBox {
    width: 360px;
    max-width: 90vw;
    padding: 30px 40px;

    text-align: center;
}

.gameLoadingSpinner {
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;

    border: 3px solid rgba(233, 186, 112, .2);
    border-top-color: #f9ca80;
    border-radius: 50%;

    animation: gameLoadingSpin .9s linear infinite;
}

@keyframes gameLoadingSpin {
    to {
        transform: rotate(360deg);
    }
}

.gameLoadingTitle {
    margin-bottom: 15px;

    font-family: 'TrajanPro-Regular';
    font-size: 28px;
    letter-spacing: 2px;
    color: #f9ca80;
    text-shadow: 0 0 16px rgba(249, 202, 128, .4);
}

.gameLoadingText {
    min-height: 18px;
    margin-bottom: 15px;

    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}

.gameLoadingBarOuter {
    height: 8px;
    margin-bottom: 12px;

    background-color: rgba(0, 0, 0, .5);
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 4px;
    overflow: hidden;
}

.gameLoadingBarInner {
    width: 0%;
    height: 100%;

    background-image: linear-gradient(90deg, rgba(201, 154, 80, .9), rgba(249, 202, 128, .95));

    transition: width .2s ease;
}

.gameLoadingVersion {
    font-size: 11px;
    color: rgba(255, 255, 255, .4);
}

.gameConnectionLost .gameLoadingBox {
    animation: gameConnectionShake .5s ease;
}

.gameConnectionIcon {
    display: block;

    margin-bottom: 15px;

    font-size: 34px;
    color: #ff9999;
    text-shadow: 0 0 16px rgba(255, 120, 120, .5);

    animation: gameConnectionBlink 1.4s ease-in-out infinite;
}

.gameConnectionLost .gameLoadingTitle {
    color: #ff9999;
    text-shadow: 0 0 16px rgba(255, 120, 120, .4);
}

.gameConnectionBarInner {
    background-image: linear-gradient(90deg, rgba(204, 85, 85, .9), rgba(255, 153, 153, .95));
}

@keyframes gameConnectionBlink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .4;
    }
}

@keyframes gameConnectionShake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-6px);
    }
    40% {
        transform: translateX(6px);
    }
    60% {
        transform: translateX(-4px);
    }
    80% {
        transform: translateX(4px);
    }
}

@media(max-width: 767px)
{
    .navbar.navbar-first img {
        margin-left: -2%;
        width: 100%;
    }

    .navbar.navbar-first .pull-right {
        float: left;
    }
}

.adminPanel input[type="text"],
.adminPanel input[type="number"],
.adminPanel input[type="password"],
.adminPanel input[type="email"],
.adminPanel select,
.adminPanel textarea {
    padding: 9px 12px;

    background-color: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .35);
    border-radius: 4px;

    font-family: 'TrajanPro-Regular';
    font-size: 13px;
    color: #f5ead0 !important;

    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.adminPanel input[type="text"]:hover,
.adminPanel input[type="number"]:hover,
.adminPanel input[type="password"]:hover,
.adminPanel input[type="email"]:hover,
.adminPanel select:hover,
.adminPanel textarea:hover {
    border-color: rgba(249, 202, 128, .55);
}

.adminPanel input[type="text"]:focus,
.adminPanel input[type="number"]:focus,
.adminPanel input[type="password"]:focus,
.adminPanel input[type="email"]:focus,
.adminPanel select:focus,
.adminPanel textarea:focus {
    outline: none;

    border-color: var(--d3-gold, #f9ca80);
    background-color: rgba(233, 186, 112, .08);
    box-shadow: 0 0 0 3px rgba(240, 205, 138, .12);
}

.adminPanel input::placeholder,
.adminPanel textarea::placeholder {
    color: rgba(217, 199, 160, .4);
}

.adminPanel select option {
    background-color: #1c140a !important;
    color: #f5ead0 !important;
}

.adminPanel input[type="number"] {
    -moz-appearance: textfield;
}

.adminDashboardGroup {
    margin-bottom: 24px;
}

.adminDashboardGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;

    margin-top: 12px;
}

@media (min-width: 700px) {
    .adminDashboardGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.adminDashboardCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    padding: 22px 16px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .9), rgba(8, 6, 4, .95));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;

    color: #d9c7a0;
    text-decoration: none;

    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}

.adminDashboardCard:hover {
    border-color: var(--d3-gold, #f9ca80);
    box-shadow: 0 0 14px rgba(240, 205, 138, .35);
    transform: translateY(-2px);
}

.adminDashboardCard i {
    margin-bottom: 10px;

    font-size: 26px;
    color: var(--d3-gold, #f9ca80);
}

.adminDashboardCardName {
    font-size: 14px;
    font-weight: bold;
    color: #f5ead0;
}

.adminDashboardCardDesc {
    margin-top: 6px;

    font-size: 11px;
    line-height: 1.4;
    color: rgba(217, 199, 160, .6);
}

.adminSearchForm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.adminSearchForm input[type="text"] {
    flex: 1 1 240px;
}

.adminSearchIconInputWrap {
    position: relative;

    flex: 1 1 240px;
}

.adminSearchIconInputWrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);

    color: rgba(217, 199, 160, .45);
    font-size: 13px;

    pointer-events: none;
}

.adminSearchIconInputWrap input {
    width: 100%;
    padding-left: 34px !important;
}

.adminPlayerEmptyState {
    padding: 30px 10px;
    text-align: center;
}

.adminPlayerEmptyState i {
    margin-bottom: 10px;

    font-size: 32px;
    color: rgba(217, 199, 160, .3);
}

.adminPlayerEmptyState p {
    color: rgba(217, 199, 160, .6);
}

.adminPlayerCard {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;

    padding: 18px;
    margin-bottom: 4px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .9), rgba(8, 6, 4, .95));
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 8px;
}

.adminPlayerCardAvatarWrap {
    position: relative;
    flex: 0 0 auto;
}

.adminPlayerCardAvatar {
    width: 72px;
    height: 72px;

    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 50%;

    object-fit: cover;
}

.adminPlayerOnlineDot {
    position: absolute;
    right: 2px;
    bottom: 2px;

    width: 14px;
    height: 14px;

    background: #666;
    border: 2px solid #1c140a;
    border-radius: 50%;
}

.adminPlayerOnlineDotActive {
    background: #57b85c;
    box-shadow: 0 0 6px rgba(87, 184, 92, .8);
}

.adminPlayerCardInfo {
    flex: 1 1 260px;
}

.adminPlayerCardNameRow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;

    margin-bottom: 8px;
}

.adminPlayerCardName {
    font-size: 18px;
    font-weight: bold;
    color: #f5ead0;
}

.adminPlayerRankBadge {
    padding: 2px 8px;

    background: rgba(233, 186, 112, .15);
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 12px;

    font-size: 11px;
    color: var(--d3-gold, #f9ca80);
}

.adminPlayerBanBadge {
    padding: 2px 8px;

    background: rgba(224, 76, 60, .2);
    border: 1px solid rgba(224, 76, 60, .6);
    border-radius: 12px;

    font-size: 11px;
    color: #ff9999;
}

.adminPlayerCardMeta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    font-size: 12px;
    color: rgba(217, 199, 160, .7);
}

.adminPlayerBanNotice {
    margin-top: 10px;
    padding: 8px 12px;

    background: rgba(224, 76, 60, .12);
    border: 1px solid rgba(224, 76, 60, .4);
    border-radius: 4px;

    font-size: 12px;
    color: #ffb3b3;
}

.adminActionRow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;

    margin-top: 14px;
}

.adminSubPanel {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(233, 186, 112, .2);
}

.adminSubPanel h4 {
    margin-top: 0;
    margin-bottom: 10px;

    color: var(--d3-gold, #f9ca80);
    text-align: center;
}

.adminInlineForm {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.adminInlineForm input[type="text"] {
    flex: 1 1 200px;
}

.adminLegacyEmbed {
    color: #d9c7a0;
    font-size: 13px;
    line-height: 1.6;
}

.adminLegacyEmbed a {
    color: var(--d3-gold, #f9ca80);
}

.adminLegacyEmbed img {
    max-width: 100%;
}

.adminLegacyEmbed .but1 {
    display: inline-block;
    margin: 4px 6px 4px 0;
    padding: 6px 12px;

    background: rgba(233, 186, 112, .12);
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 4px;

    color: #f5ead0;
    text-decoration: none;
    font-size: 12px;
}

.adminLegacyEmbed .col-sm-12,
.adminLegacyEmbed .col-sm-2,
.adminLegacyEmbed .col-sm-4,
.adminLegacyEmbed .col-sm-6 {
    margin-bottom: 10px;
}

.adminItemGrid {
    display: flex;
    flex-direction: column;
    gap: 10px;

    margin-top: 16px;
}

.adminItemGrid .head,
.adminItemGrid .body {
    color: #d9c7a0;
    font-size: 13px;
}

.adminItemGrid .head {
    margin-bottom: 10px;
}

.adminItemGridEntry {
    width: 100%;
    max-width: none;

    padding: 14px 16px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .9), rgba(8, 6, 4, .95));
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 6px;

    transition: opacity .1s ease;
}

.adminItemGrid .head .title {
    font-size: 14px;
    font-weight: bold;
}

.adminItemGridEntry .body {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    text-align: left !important;
}

.adminItemGridEntry .body .col-md-3 {
    float: none !important;
    width: auto !important;
    min-width: 0;

    flex: 1 1 170px;

    margin-bottom: 0;
}

.adminItemGridEntry .body .col-md-3:first-child {
    flex: 0 0 60px;
    text-align: center;
}

.adminItemGridEntry .body .col-md-3:last-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 auto;

    margin-left: auto;
}

.adminItemGridEntry .body .col-md-3:last-child .button {
    white-space: nowrap;
}

.adminItemGrid img {
    max-width: 100%;
}

.adminStatRows {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 10px;
}

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

.adminStatRowKey {
    flex: 1 1 260px;
}

.adminStatRowValue {
    flex: 1 1 140px;
}

.adminStatRowRemove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    background: rgba(224, 76, 60, .12);
    border: 1px solid rgba(224, 76, 60, .4);
    border-radius: 4px;

    color: #ff9999;
    cursor: pointer;
}

.adminStatRowRemove:hover {
    background: rgba(224, 76, 60, .3);
}

.adminCharacterGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;

    margin-top: 16px;
}

.adminCharacterCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background: linear-gradient(160deg, rgba(50, 36, 18, .9), rgba(8, 6, 4, .95));
    border: 1px solid rgba(233, 186, 112, .3);
    border-radius: 8px;

    transition: border-color .15s ease, transform .15s ease;
}

.adminCharacterCard:hover {
    border-color: var(--d3-gold, #f9ca80);
    transform: translateY(-2px);
}

.adminCharacterCardImg {
    display: block;
    width: 100%;
    height: 150px;

    object-fit: contain;
    background: rgba(0, 0, 0, .35);
}

.adminCharacterCardBody {
    padding: 10px 12px 4px;
}

.adminCharacterCardName {
    font-size: 14px;
    font-weight: bold;
    color: #f5ead0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminCharacterCardMeta {
    display: flex;
    gap: 12px;
    margin-top: 4px;

    font-size: 11px;
    color: rgba(217, 199, 160, .55);
}

.adminCharacterCardActions {
    display: flex;
    gap: 6px;

    padding: 10px 12px 12px;
    margin-top: auto;
}

.adminCharacterCardActions .button {
    flex: 1 1 auto;
    text-align: center;
}

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

.adminCharacterEditPreview {
    flex: 0 0 auto;
    text-align: center;
}

.adminCharacterEditLayout .adminForm {
    flex: 1 1 320px;
}

.adminHint {
    margin-top: 0;
    margin-bottom: 16px;

    font-size: 12px;
    line-height: 1.5;
    color: rgba(217, 199, 160, .65);
}

.adminCollisionLegendBlocked,
.adminCollisionLegendOpen {
    font-weight: bold;
}

.adminCollisionLegendBlocked {
    color: var(--d3-blood-bright, #e04c3c);
}

.adminCollisionLegendOpen {
    color: #57b85c;
}

.adminCollisionToolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 8px;
}

.adminCollisionToolBtn {
    opacity: .55;
}

.adminCollisionToolActive {
    opacity: 1;
    border-color: var(--d3-gold, #f9ca80);
}

.adminCollisionToolDisabled {
    opacity: .25 !important;
    pointer-events: none;
}

.adminTileEditorLayout {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 14px;
}

.adminTileEditorPalette {
    flex: 1 1 220px;
    max-width: 320px;
}

.adminTileEditorPaletteGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;

    max-height: 360px;
    overflow-y: auto;

    padding: 8px;

    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 4px;

    transition: opacity .15s ease;
}

.adminTileEditorPaletteDisabled {
    opacity: .35;
    pointer-events: none;
}

.adminTilesetLibrary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 14px;
}

.adminTilesetChip {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 6px 6px 6px 12px;

    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 20px;

    font-size: 12px;
    color: #d9c7a0;

    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.adminTilesetChip:hover {
    border-color: rgba(249, 202, 128, .5);
}

.adminTilesetChipActive {
    border-color: var(--d3-gold, #f9ca80);
    background: rgba(233, 186, 112, .12);
    color: #f5ead0;
}

.adminTilesetChipName small {
    opacity: .6;
}

.adminTilesetChipRemove {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;

    background: transparent;
    border: 0;
    border-radius: 50%;

    color: rgba(217, 199, 160, .6);
    font-size: 10px;
    line-height: 1;
    padding: 0;

    cursor: pointer;
}

.adminTilesetChipRemove:hover {
    background: rgba(224, 76, 60, .3);
    color: #fff;
}

.adminTilePaletteSwatch {
    width: 28px;
    height: 28px;
    flex: 0 0 auto;

    background-color: rgba(255, 255, 255, .04);
    border: 1px solid transparent;
    border-radius: 2px;

    cursor: pointer;
}

.adminTilePaletteSwatch:hover {
    border-color: rgba(249, 202, 128, .5);
}

.adminTilePaletteSwatchActive {
    border-color: var(--d3-gold, #f9ca80);
    box-shadow: 0 0 8px rgba(240, 205, 138, .5);
}

.adminTileEditorGridWrap {
    flex: 2 1 320px;

    max-width: 100%;
    max-height: 460px;
    overflow: auto;

    padding: 10px;

    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 4px;
}

.adminMapEditorCanvas {
    position: relative;
}

.adminMapEditorBackdrop {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background-repeat: no-repeat;
    background-position: top left;
    background-size: 100% 100%;

    pointer-events: none;
}

.adminTileEditorGrid {
    position: relative;
    z-index: 1;

    display: grid;
    gap: 0;

    width: max-content;
}

.adminTileEditorCell {
    width: 22px;
    height: 22px;

    background-color: rgba(255, 255, 255, .03);
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, .06);

    cursor: pointer;

    transition: border-color .1s ease, box-shadow .1s ease;
}

.adminTileEditorCell:hover {
    border-color: var(--d3-gold, #f9ca80);
}

.adminTileEditorCellPreview {
    border-color: var(--d3-gold, #f9ca80) !important;
    box-shadow: inset 0 0 0 1px var(--d3-gold, #f9ca80);
}

.adminMapEditorCellBlocked {
    box-shadow: inset 0 0 0 999px rgba(224, 76, 60, .55);
}

.adminMapEditorCellBlocked:hover {
    box-shadow: inset 0 0 0 999px rgba(224, 76, 60, .55), inset 0 0 0 1px var(--d3-gold, #f9ca80);
}

.adminTroopChips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 8px;
}

.adminTroopChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 4px 6px 4px 10px;

    background: rgba(0, 0, 0, .3);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 14px;

    font-size: 11px;
    color: #d9c7a0;
}

.adminTroopChipRemove {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 16px;
    height: 16px;

    border-radius: 50%;
    color: rgba(217, 199, 160, .6);
    font-size: 9px;

    cursor: pointer;
}

.adminTroopChipRemove:hover {
    background: rgba(224, 76, 60, .3);
    color: #fff;
}

.adminTroopPicker {
    display: flex;
    gap: 8px;
    align-items: center;

    margin-top: 10px;
}

.adminTroopPicker .adminSearchableSelectWrap {
    flex: 1 1 auto;
}

.adminTeleportList {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.adminTeleportCard {
    padding: 12px 14px;

    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(201, 154, 80, .25);
    border-radius: 6px;
}

.adminTeleportCardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 10px;

    font-size: 12px;
    font-weight: bold;
    color: var(--d3-gold, #f9ca80);
}

.adminTeleportCardGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
}

.adminTeleportCardGrid .adminFormRow {
    margin-bottom: 0;
}

.adminTeleportCardTarget {
    grid-column: span 2;
}

.adminSearchableSelectWrap {
    position: relative;
}

.adminSearchableSelectNative {
    display: none;
}

.adminSearchableSelectInput {
    width: 100%;
}

.adminSearchableSelectDropdown {
    display: none;

    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;

    max-height: 220px;
    overflow-y: auto;

    background: rgba(10, 8, 5, .97);
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 4px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}

.adminSearchableSelectDropdownOpen {
    display: block;
}

.adminSearchableSelectOption {
    padding: 7px 10px;

    font-size: 12px;
    color: #d9c7a0;

    cursor: pointer;
}

.adminSearchableSelectOption:hover,
.adminSearchableSelectOptionActive {
    background: rgba(233, 186, 112, .15);
    color: #f5ead0;
}

.adminSearchableSelectEmpty {
    padding: 7px 10px;

    font-size: 12px;
    color: rgba(217, 199, 160, .5);
    font-style: italic;
}

.adminQuestBrokenGoto {
    color: var(--d3-blood-bright, #e04c3c);
    font-weight: bold;
}

.adminQuestEntryBadge {
    padding: 1px 6px;

    background: rgba(87, 184, 92, .2);
    border: 1px solid rgba(87, 184, 92, .5);
    border-radius: 3px;

    font-size: 10px;
    text-transform: uppercase;
    color: #57b85c;
}

.adminQuestEditLayout {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
}

.adminQuestChainPanel {
    flex: 0 0 220px;
    max-height: 700px;
    overflow-y: auto;
}

.adminQuestFormPanel {
    flex: 2 1 420px;
}

.adminQuestPreviewPanel {
    flex: 1 1 260px;
    align-self: flex-start;
    position: sticky;
    top: 12px;
}

.adminQuestChainList {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.adminQuestChainItem {
    display: flex;
    flex-direction: column;
    gap: 2px;

    padding: 8px 10px;

    background: rgba(0, 0, 0, .25);
    border: 1px solid rgba(201, 154, 80, .2);
    border-radius: 4px;

    text-decoration: none;

    transition: border-color .15s ease, background .15s ease;
}

.adminQuestChainItem:hover {
    border-color: rgba(249, 202, 128, .5);
}

.adminQuestChainItemActive {
    border-color: var(--d3-gold, #f9ca80);
    background: rgba(233, 186, 112, .15);
}

.adminQuestChainItemPid {
    font-size: 11px;
    font-weight: bold;
    color: var(--d3-gold, #f9ca80);
}

.adminQuestChainItemTitle {
    font-size: 12px;
    color: #d9c7a0;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adminQuestPreviewBubble {
    padding: 16px;

    background: linear-gradient(160deg, rgba(50, 36, 18, .9), rgba(8, 6, 4, .95));
    border: 2px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 8px;
}

.adminQuestPreviewTitle {
    margin-bottom: 10px;

    font-size: 15px;
    font-weight: bold;
    color: var(--d3-gold, #f9ca80);
}

.adminQuestPreviewText {
    margin-bottom: 14px;

    font-size: 13px;
    line-height: 1.6;
    color: #f5ead0;

    white-space: pre-wrap;
}

.adminQuestPreviewButton {
    display: inline-block;

    padding: 6px 16px;

    background: rgba(233, 186, 112, .15);
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 4px;

    font-size: 12px;
    color: #f5ead0;
    text-align: center;
}

.adminTableWrap {
    overflow-x: auto;
}

.adminTable {
    width: 100%;
    border-collapse: collapse;

    font-size: 13px;
    color: #d9c7a0;
}

.adminTable th {
    padding: 8px 10px;

    text-align: left;
    font-size: 11px;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--d3-gold, #f9ca80);

    border-bottom: 2px solid rgba(233, 186, 112, .3);
    white-space: nowrap;
}

.adminTable td {
    padding: 8px 10px;

    border-bottom: 1px solid rgba(233, 186, 112, .12);
    vertical-align: middle;
}

.adminTable tr:hover td {
    background: rgba(233, 186, 112, .06);
}

.adminTableBtn {
    padding: 5px 10px;
    margin: 2px 4px 2px 0;

    font-size: 11px;
}

.adminPanel .button,
.adminPanel .button:focus,
.adminPanel .button:link {
    position: relative;

    padding: 10px 22px;

    background:
        linear-gradient(180deg, rgba(240, 205, 138, .2), rgba(74, 47, 16, .55) 55%, rgba(18, 13, 9, .85));
    border: 1px solid var(--d3-bronze-bright, #d9a85c);
    border-radius: 3px;
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, .35),
        inset 0 -6px 10px -6px rgba(0, 0, 0, .6),
        0 2px 6px rgba(0, 0, 0, .4);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

    font-family: 'TrajanPro-Regular';
    font-size: 13px;
    letter-spacing: .6px;
    text-transform: uppercase;

    color: var(--d3-gold, #f0cd8a);

    transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}

.adminPanel .button:hover {
    opacity: 1;
    transform: translateY(-1px);

    border-color: var(--d3-gold, #f0cd8a);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, .45),
        inset 0 -6px 10px -6px rgba(0, 0, 0, .6),
        0 0 14px rgba(240, 205, 138, .45);

    color: #fff2d6;
}

.adminPanel .button:active {
    transform: translateY(1px);

    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .5);
}

.adminPanel .adminTableBtn {
    padding: 6px 12px;

    font-size: 11px;
    letter-spacing: .3px;
}

.adminPanel .adminCollisionToolBtn {
    padding: 8px 14px;

    opacity: .5;
}

.adminPanel .adminCollisionToolActive {
    opacity: 1;

    border-color: var(--d3-gold, #f0cd8a);
    box-shadow:
        inset 0 1px 0 rgba(255, 235, 190, .45),
        0 0 10px rgba(240, 205, 138, .4);
}

.new-message {
    margin-left: 6px;

    color: var(--d3-blood-bright, #e04c3c);
    font-weight: bold;
}

.adminTicketMessage {
    padding: 12px 0;

    border-bottom: 1px solid rgba(233, 186, 112, .15);
}

.adminTicketMessage:last-child {
    border-bottom: none;
}

.adminTicketMessageDate {
    margin-bottom: 6px;

    font-size: 11px;
    color: rgba(217, 199, 160, .55);
}

.adminTicketMessageText {
    font-size: 13px;
    line-height: 1.6;
    color: #d9c7a0;
}

.adminForm {
    max-width: 640px;
    margin: 0 auto;
}

.adminFormRow {
    margin-bottom: 14px;
}

.adminFormRow label {
    display: block;
    margin-bottom: 5px;

    font-size: 12px;
    color: rgba(217, 199, 160, .7);
}

.adminFormRow input[type="text"],
.adminFormRow input[type="number"],
.adminFormRow select,
.adminFormRow textarea {
    width: 100%;
}

.adminFormRow textarea {
    min-height: 100px;

    padding: 10px 12px;

    background-color: rgba(0, 0, 0, .25);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 4px;

    color: #f5ead0;
    font-family: 'TrajanPro-Regular';
    font-size: 13px;

    resize: vertical;
}

.adminFormImgPreview {
    display: block;
    max-width: 120px;
    margin: 0 auto 10px;
}

.adminFormRow input[type="file"] {
    color: #d9c7a0;
    font-size: 12px;
}

.adminNewsEditor {
    max-width: 820px;
    margin: 0 auto;
}

.adminNewsEditorCover {
    margin-bottom: 20px;
}

.adminNewsEditorFields {
    max-width: 640px;
    margin: 0 auto;
}

.adminNewsTitleInput {
    font-size: 18px;
    padding: 12px 14px;
}

.adminNewsContent {
    min-height: 320px;
    font-size: 14px;
    line-height: 1.6;
}

.adminBanerDropzone {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 260px;

    overflow: hidden;
    cursor: pointer;

    background: rgba(0, 0, 0, .25);
    border: 2px dashed rgba(201, 154, 80, .4);
    border-radius: 6px;

    transition: border-color .2s ease, background .2s ease;
}

.adminBanerDropzone:hover {
    background: rgba(0, 0, 0, .35);
    border-color: var(--d3-gold, #f9ca80);
}

.adminBanerDropzone input[type="file"] {
    display: none;
}

.adminBanerPreviewImg {
    display: block;
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.adminBanerDropzoneEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    color: rgba(217, 199, 160, .55);
    font-size: 13px;
    text-align: center;
    padding: 0 16px;
}

.adminBanerDropzoneEmpty i {
    font-size: 30px;
    color: rgba(217, 199, 160, .35);
}

.adminBanerCurrentName {
    margin-top: 6px;

    font-size: 11px;
    color: rgba(217, 199, 160, .5);
    text-align: center;
}

.adminBanerDropzoneSquare {
    width: 160px;
    aspect-ratio: 1 / 1;
    max-height: none;

    margin: 0 auto;
}

.adminBanerDropzoneSquare .adminBanerPreviewImg {
    object-fit: contain;
    background: rgba(0, 0, 0, .3);
}

.adminTicketReply {
    width: 100%;
    max-width: 640px;
    height: 160px;
    padding: 10px 12px;

    background-color: rgba(0, 0, 0, .25);
    border: 1px solid rgba(201, 154, 80, .3);
    border-radius: 4px;

    color: #f5ead0;
    font-family: 'TrajanPro-Regular';
    font-size: 13px;

    resize: vertical;
}

.premiumOfferGrid,
.premiumPayGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;

    margin-top: 16px;
}

@media (min-width: 700px) {
    .premiumOfferGrid,
    .premiumPayGrid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.premiumOfferCard,
.premiumPayCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;

    padding: 18px 16px;

    background: linear-gradient(160deg, rgba(50,36,18,.85), rgba(8,6,4,.9));
    border: 1px solid var(--d3-bronze-bright);
    border-radius: 6px;
}

.premiumOfferIcon {
    width: 46px;
    height: 46px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    border: 1px solid var(--d3-bronze-bright);
    color: #ffd98a;
    font-size: 20px;

    margin-bottom: 4px;
}

.premiumOfferCard h4,
.premiumPayCard .premiumPayCardAmount {
    margin: 0;
    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
}

.premiumOfferCard p {
    font-size: 12px;
    color: rgba(217, 199, 160, .65);
    min-height: 32px;
}

.premiumOfferCost,
.premiumPayCardPP {
    font-size: 13px;
    font-weight: bold;
    color: #ffd98a;
    margin-bottom: 6px;
}

.premiumOfferCard select,
.premiumPayCard select {
    margin-bottom: 8px;
}

.premiumPayCardAmount {
    font-size: 18px;
}

.premiumPayHeader {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 24px;
    margin-bottom: 4px;

    font-family: 'TrajanPro-Regular';
    color: #d9c7a0;
    letter-spacing: .5px;
}

.premiumSectionTitle {
    margin-top: 28px;
    margin-bottom: 0;

    font-family: 'TrajanPro-Regular';
    font-size: 15px;
    letter-spacing: .5px;
    color: #d9c7a0;

    border-bottom: 1px solid rgba(217, 168, 92, .3);
    padding-bottom: 10px;
}

.premiumGoldInput {
    width: 100%;
    box-sizing: border-box;
    text-align: center;

    padding: 8px 12px;

    font-family: 'TrajanPro-Regular';
    font-size: 14px;
    color: #d9ba70;

    background-color: rgba(0, 0, 0, .35);
    border: 1px solid rgba(233, 186, 112, .35);
    border-radius: 4px;

    transition: border-color .2s ease, background-color .2s ease;
}

.premiumGoldInput:hover,
.premiumGoldInput:focus {
    border-color: rgba(249, 202, 128, .7);
    background-color: rgba(233, 186, 112, .1);
    outline: none;
}

.premiumOfferCostSoon {
    color: rgba(217, 199, 160, .55);
    font-style: italic;
    font-weight: normal;
}

#teleportItem,
[id^='quest_'] {
    pointer-events: none !important;
}