@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.css');
/* LAYOUT */


html {
    background: #1b2838 url(../images/layout/html.fw.png);
}

body {
    margin: 0;
    padding: 0;
    text-align: center;
    background: url(../images/layout/bg.png) center top no-repeat;
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

#page {
    /*background:url("../images/layout/background.png") no-repeat scroll center top #000000;*/
    margin: 0 auto;
    width: 1002px;
}

#header {
    display: block;
    width: 100%;
    height: 365px;
}


#cnt-container {
    width: 1002px;
    text-align: left;
}

#cnt-left {
    float: left;
    width: 181px;
    margin: 0;
    padding: 0;
}

#cnt-center {
    float: left;
    width: 639px;
    margin: 0;
    padding: 0;
}

#cnt-right {
    float: left;
    width: 181px;
    margin: 0;
    padding: 0;
    text-align: center;
}

.content-bg-gallery {
    position: relative;
    margin-bottom: 32px;
}

.content-bg-gallery:after {
    content: "";
    position: absolute;
    background: url(../images/layout/gallery_frame.png) no-repeat;
    width: 100%;
    height: 282px;
    top: -37px;
    z-index: 99999;
}

.content-bg {
    background: url("../images/layout/cnt-bg.png") repeat-y scroll 0 0 transparent;
    margin-bottom: 8px;
}

.content-top {
    display: block;
    width: 639px;
    height: 38px;
    background: url("../images/layout/cnt-top.png") no-repeat scroll center top transparent;
}

.content-bot {
    display: block;
    width: 639px;
    height: 38px;
    background: url("../images/layout/cnt-bot.png") no-repeat scroll center bottom transparent;
}

.content-txt {
    margin: 0 auto;
    width: 569px;
}

#cnt-box2 {
    clear: both;
    margin-top: 40px;
    width: 1002px;
    text-align: center;
    color: #fff;
}

/* MENU */

ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}

#menu {
    float: left;
    font-size: 12px;
    font-weight: bold;
    text-align: justify;
}

#menu-top {
    background: url("../images/layout/nav-top.png") no-repeat scroll 0 0 transparent;
    color: #CCCCCC;
    float: left;
    height: 28px;
    padding-left: 20px;
    padding-top: 12px;
    width: 161px;
}

#menu-top-first {
    background: url("../images/layout/nav-top-first.png") no-repeat scroll 0 0 transparent;
    color: #CCCCCC;
    float: left;
    height: 28px;
    padding-left: 20px;
    padding-top: 12px;
    width: 161px;
}

#icon-news, #icon-account, #icon-community, #icon-library, #icon-shop, #icon-highscores, #icon-towns, #icon-pvp {
    width: 32px;
    height: 32px;
    float: left;
    margin: -10px 5px 0 2px;
}

#icon-news {
    background: url("../images/layout/news.gif") no-repeat scroll 0 0 transparent;
}

#icon-account {
    background: url("../images/layout/account.gif") no-repeat scroll 0 0 transparent;
}

#icon-community {
    background: url("../images/layout/community.gif") no-repeat scroll 0 0 transparent;
}

#icon-library {
    background: url("../images/layout/library.gif") no-repeat scroll 0 0 transparent;
}

#icon-shop {
    background: url("../images/layout/shop.gif") no-repeat scroll 0 0 transparent;
}

#icon-highscores {
    background: url("../images/layout/highscores.gif") no-repeat scroll 0 0 transparent;
}

#icon-towns {
    background: url("../images/layout/map.gif") no-repeat scroll 0 0 transparent;
}

#icon-pvp {
    background: url("../images/layout/pvp.gif") no-repeat scroll 0 0 transparent;
}

#menu-bottom {
    background: url("../images/layout/nav-bottom.png") no-repeat scroll 0 0 transparent;
    color: #CCCCCC;
    float: left;
    height: 25px;
    padding-left: 20px;
    padding-top: 15px;
    width: 161px;
}

.menu-cnt {
    background: url("../images/layout/chains.gif") repeat-y scroll 5px 0 transparent;
    float: left;
    width: 178px;
}

#menu li, #right_links li {
    background: url("../images/layout/li.png");
    display: block;
    padding: 8px 0 8px 20px;
    width: 155px;
    text-align: left;
    margin-left: 12px;
}

#right_links li {
    background: url("../images/layout/li.png");
    padding: 8px 0 8px 20px;
    font-size: 12px;
    margin-left: 12px;
}

#right_highscores li {
    background: none;
    display: block;
    padding: 4px 0 0 10px;
    font-size: 11px;
    text-align: left;
}

#right_highscores li a {
    color: #008dab;
    padding: 1px 0;
    text-decoration: none;
    width: 100%;
}

#menu .last, #right_links .last {
    margin-bottom: 4px;
}

#menu li a, #right_links li a {
    color: #8d8d8d;
    display: block;
    padding: 1px 0;
    text-decoration: none;
    width: 100%;
}

#right_links li {
    margin-left: 0px;
}

#menu li a:hover, #right_links li a:hover {
    color: #DDDDDD;
}


/* right */

#head-login {
    width: 181px;
    height: 55px;
    background: url("../images/layout/header-login.png") no-repeat scroll bottom transparent;
    text-align: center;
    line-height: 55px;
    color: #ddd;
    font-weight: bold;
}

#head-scores, #head-facebook, #head-lang {
    width: 181px;
    height: 42px;
    background: url("../images/layout/header-right.png") no-repeat scroll bottom transparent;
    text-align: center;
    line-height: 42px;
    color: #ddd;
    font-weight: bold;
}

.right-cnt {
    background: url("../images/layout/right-cnt.png") repeat-y top center transparent;
    color: white;
    padding: 10px;
}

.right-bottom {
    width: 181px;
    height: 15px;
    background: url("../images/layout/right-bottom.png") no-repeat scroll bottom transparent;
}

.side_login {
    /*width:70px;*/
    height: 22px;
    border: 0;
    line-height: 22px;
    padding: 0 3px;
    color: #fff;
    margin: 0 0 3px 5px;
}

.side_login:focus {
    outline: 0;
}

.side_login_l {
    width: 155px;
    padding-left: 31px;
    /*margin-left: 22px;*/
    padding-right: 30px;
    background: url("../images/layout/input_login.jpg") no-repeat scroll transparent;
    margin-bottom: 5px;
}

.side_login_p {
    width: 155px;
    padding-left: 31px;
    /*margin-left: 22px;*/
    padding-right: 30px;
    background: url("../images/layout/input_password.jpg") no-repeat scroll transparent;
    margin-bottom: 5px;
}

.side_login_s {
    width: 160px;
    padding-left: 31px;
    /*margin-left: 22px;*/
    background: url("../images/layout/input_shop.jpg") no-repeat scroll transparent;
}

/* TYPOGRAPHY */

a {
    color: #004294;
    font-weight: 500;
    text-decoration: none;
}

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

.stats-box {
    font-size: 15px;
    text-align: center;
}

/* Najlepsza postać — styl okna Tibii (kamień + pergamin, złoty pasek tytułu) */
@keyframes best-player-blink {

    0%,
    45% {
        opacity: 1;
        filter: brightness(1);
    }

    50%,
    95% {
        opacity: 0.25;
        filter: brightness(1.35);
    }

    100% {
        opacity: 1;
        filter: brightness(1);
    }
}

@keyframes best-player-slide {

    0%,
    100% {
        transform: translateX(-14px);
    }

    50% {
        transform: translateX(14px);
    }
}

@keyframes best-player-glow {

    0%,
    100% {
        box-shadow: 0 0 6px rgba(0, 255, 120, 0.55), 0 0 14px rgba(0, 200, 80, 0.35);
    }

    50% {
        box-shadow: 0 0 12px rgba(120, 255, 160, 0.85), 0 0 22px rgba(0, 255, 100, 0.5);
    }
}

.best-player-feature {
    max-width: 400px;
    margin: 22px auto 0;
    text-align: center;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    box-sizing: border-box;
    border: 2px solid #1a1410;
    box-shadow:
        0 0 0 1px #6b5a45,
        0 0 0 2px #2a2218,
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        4px 8px 20px rgba(0, 0, 0, 0.55);
    background: linear-gradient(180deg, #5a5248 0%, #3a3228 40%, #2a2218 100%);
}

.best-player-feature-head {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px 9px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #f5e6b8;
    text-shadow:
        0 1px 0 #1a1208,
        0 -1px 0 rgba(0, 0, 0, 0.6);
    border-bottom: 2px solid #0f0c08;
    background: linear-gradient(180deg, #4a4036 0%, #2e261c 55%, #1e1810 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.best-player-feature-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px 14px;
    color: #2a1f14;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 2px, rgba(0, 0, 0, 0.03) 3px),
        linear-gradient(175deg, #efe4cc 0%, #e0d2b4 35%, #d2c29a 70%, #c4b28a 100%);
    border: 2px solid #8a7a62;
    border-top: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.best-player-feature-body--empty {
    display: block;
    text-align: center;
}

.best-player-feature-mid {
    flex: 1;
    min-width: 0;
    text-align: center;
}

.best-player-outfit {
    flex-shrink: 0;
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(40, 32, 24, 0.12) 0%, rgba(20, 16, 10, 0.18) 100%);
    border: 2px solid #6b5c48;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.12);
}

.best-player-outfit img {
    width: 80px;
    height: 80px;
    display: block;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.best-player-feature-bot {
    width: 100%;
    height: 5px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #3a3228 0%, #141008 100%);
    border: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.best-player-feature .best-player-name {
    font-size: 20px;
    font-weight: bold;
    line-height: 1.25;
    margin-bottom: 2px;
}

.best-player-feature .best-player-name a {
    color: #c9a227;
    text-decoration: none;
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35),
        0 0 1px #1a1208;
    animation: best-player-blink 1.15s ease-in-out infinite;
}

.best-player-feature .best-player-name a:hover {
    color: #e8c84a;
}

.best-player-feature .best-player-lvl {
    margin-top: 10px;
    font-size: 11px;
    color: #4a3d2a;
    font-weight: bold;
    line-height: 1.5;
}

.best-player-feature .best-player-lvl-label {
    display: inline-block;
}

.best-player-feature .best-player-lvl-badge {
    display: inline-block;
    margin-top: 8px;
    min-width: 52px;
    padding: 5px 14px;
    font-size: 18px;
    font-weight: bold;
    color: #0a1a0a;
    background: linear-gradient(180deg, #7fff9a 0%, #2ecc71 45%, #1a9f52 100%);
    border: 2px solid #0d4a24;
    border-radius: 2px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
    animation: best-player-slide 2.4s ease-in-out infinite, best-player-glow 1.8s ease-in-out infinite;
}

.best-player-feature .best-player-lvl-empty {
    color: #5c4e3a;
    font-size: 11px;
    font-weight: bold;
}

@media (prefers-reduced-motion: reduce) {

    .best-player-feature .best-player-name a,
    .best-player-feature .best-player-lvl-badge {
        animation: none;
    }
}

.start_info, .font_ref {
    color: #6d0202;
    font-size: 20px;
    font-weight: bold;
}

/* #f9fcc4 */
#lang-box {
    border: 1px solid #4a7787;
    padding: 4px;
    background-color: #E6E8C7;
}

#lang-box img {
    border: 1px solid black;
}

.white {
    color: #FFFFFF;
}

.whites {
    color: #FFFFFF;
}

.font_red {
    color: red;
}

.font_green {
    color: green;
}

.font_lightgreen {
    color: #50d508;
}

.font_yellow {
    color: #e4e711;
}

.bold {
    font-weight: bold;
}

.pageheader {
    background-image: url("../images/layout/newsheadline_background.gif");
    background-repeat: repeat-x;
    color: #fff;
    margin: 0px 0px 15px 0px;
    padding: 2px;
    text-align: left;
    font-weight: bold;
    padding-left: 12px;
}

.news {
    text-align: justify;
    margin: 0px 3px;
}

.blinking {
    text-decoration: blink;
}

h2 {
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin: 20px auto;
}

a.button_bg, input.button_bg {
    display: block;
    width: 135px;
    height: 25px;
    background: url(../images/layout/button_bg.gif) no-repeat center center;
    padding: 0;
}

a:hover.button_bg, input.button_bg-hover {
    background: url(../images/layout/button_bg_hover.gif) no-repeat center center;
}

font#offline {
    font-size: 26px;
}

font#online {
    font-size: 26px;
    color: #008000;
}

a img {
    border: 0;
}

/* TABLES #91a5ac*/
.CaptionInnerContainer {
    padding: 0;
    margin: 0;
    width: 569px;
    background-color: #F1E0C6;
}

.error_bg {
    bakckground-color: #F1E0C6
}

.Table1 {
    background-color: #c3c9a9;
    border: 2px solid #55636C;
    width: 567px;
    margin-left: 1px;
    margin-top: -1px;
}

.pad3px {
    padding: 3px;
}

.Table1 td {
    padding: 3px;
}

.input-title {
    font-weight: bold;
    width: 110px;
    padding: 5px;
}

.submit_button {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    padding: 0;
    width: 120px;
}

.submit_button img {
    width: 155px;
}

.submit_button:hover {
    cursor: pointer;
}

/*========================================*/

.online {
    border-spacing: 1px;
    width: 100%;
    font-size: 12px;
}

.online thead {
    background-image: url("../images/layout/newsheadline_background.gif");
    background-repeat: repeat-x;

    background-color: #1c565a;
    color: white;
    font-weight: bold;
    text-align: left;
}

.thead_subtitle {
    background-image: url("../images/layout/newsheadline_background.gif");
    background-repeat: repeat-x;
    color: white;
    font-weight: bold;
    text-align: center;
}

.thead_subtitle a {
    color: white;
}

.thead_subtitle a:hover {
    color: #FFAE4F;
}

.thead_subtitle_bg {
    color: white;
    font-weight: bold;
    text-align: center;
    background-color: #D8DCC7;
}

.online th {
    text-align: center;
}

.online td, .online th {
    padding: 4px;
}

.online_bg1 {
    background-color: #F1E0C6;
}

.online_bg2 {
    background-color: #D4C0A1;
}

.wars_score {
    font-size: 25px;
}

.war_row td, .war_row th {
    padding: 8px 5px;
}

.war_logo {
    font-size: 10px;
    text-align: center;
    vertical-align: middle;
}

.manager_table {
    border: 1px solid #5F4D41;
    border-spacing: 2px;
}

.manager_table th {
    padding-left: 5px;
    text-align: left;
}

.rules {
    width: 530px;
    height: 300px;
    padding: 2px;
    margin: 0px;
}

.register tbody th {
    width: 175px;
}

/* Deadman walking? */

.middle {
    text-align: center;
}

.center {
    margin: 0 auto;
    text-align: center;
}

.top {
    vertical-align: top;
}

.w230 {
    width: 230px;
}

.outfit {
    margin: 0 auto;
    border-spacing: 1px;
    border-collapse: separate;
    width: 100%;
}

.outfit td, .outfit th {
    background-color: #DFC499;
    padding: 3px;
}

#outfity_cent td {
    text-align: center;
    font-weight: bold;
    width: 50%
}

#outfity #out_img {
    width: 150px;
    text-align: center;
    padding: 0px;
    margin: 0px
}

#outfity #out_wym {
    vertical-align: top
}

#outfity #title {
    padding-left: 15px;
    font-weight: bold
}

/* Left for Dead!

(+_+)    &&
 \|/  +-[__]
 / \     \ \

*/

.error {
    font-weight: bold;
    background-color: #BFAC8F;
    padding: 5px;
}

.errorleft {
    padding-left: 70px;
    background: url(../images/layout/attention.gif) 20px center no-repeat;
    min-height: 40px;
    vertical-align: middle;
}

.errorright {
    line-height: 20px;
    color: black;
    font-weight: normal;
    padding-right: 20px;
    vertical-align: middle;
}

.countdown td {
    width: 190px;
    font-size: 18px;
    font-weight: bold;
    color: black;
}

.border {
    border: 1px solid black;
}

.countrieshs td {
    line-height: 18px;
    vertical-align: middle;
    text-align: center;
}

.countrieshs td img {
    vertical-align: middle;

}

a.tooltip {
    position: relative;
    z-index: 24;
    text-decoration: none
}

a.tooltip:hover {
    z-index: 25
}

a.tooltip span {
    display: none
}

a.tooltip:hover span {
    display: block;
    position: absolute;
    top: 1em;
    left: 1em;

    border: 1px solid black;
    background-color: #0F0F0F;
    color: white;
    width: 150px;
    font-size: 13px;
    font-family: tahoma;
    font-weight: normal;
    padding: 10px;
    text-align: center
}

#minimap {
    width: 177px;
    height: 165px;
    margin: 0px;
    padding: 1px;
}

#highest_bidder {
    border: 1px solid black;
    width: 90%;
    padding: 5px;
    text-align: center;
    margin: 0 auto;
    background-color: #E6EFBA;
}

#ajax_auction_msg {
    border: 1px solid black;
    background-color: #FFE25F;
    padding: 12px;
    margin: 30px auto;
    text-align: center;
    width: 80%;
    font-size: 22px;
    color: black;
}

#highscore_page {
    border: 1px solid black;
    padding: 3px 5px;
    margin: 0px 2px;
    background-color: #CFD39A;
    color: black;
    font-size: 12px;
}

#highscore_page:hover {
    background-color: #DFE2B3;
}

.justify {
    text-align: justify;
}

#zaypay_iframe {
    width: 550px;
    height: 350px;
    border: 0px;
    margin: 0 auto
}


.tabs li {
    display: inline;
}

.tabs li a {
    cursor: pointer;
    padding: 12px 8px 8px 8px;
    border: 1px solid #D1D8B1;
    font-size: 12px;
    color: black;
    font-weight: 400;
    text-transform: uppercase;
    background: #F1E0C6;
}

.tabs .tab-current {
    padding: 20px 8px 8px 8px;
    border-bottom: 1px solid #D1D8B1;
    background: #D4C0A1;
    font-weight: bold;
}

.tabsContent {
    display: none;
}

ul.tabs {
    border-bottom: 1px solid #D1D8B1;
    padding: 0px 0px 8px 15px;
    margin: 0px 0px 8px 0px;
}

.hidden {
    display: none;
}

#sms {
    margin: 0 auto;
    background-color: #FFE6BF;
    padding: 6px;
}

#code_example {
    border: 1px dashed black;
    padding: 10px;
    background-color: #E7EAB6;
    font-type: Courier, tahoma;
    font-size: 12px;
    font-weight: bold;
}

.odn a {
    color: silver;
    font-size: 12px;
}

.p10 {
    text-align: left;
}

#bottom_bg {
    background: url(../images/layout/main_bottom.png) bottom center no-repeat;
    width: 100%;
    height: 684px;
    margin-top: -600px;
}

#os tr {
    margin: 0 auto;
    text-align: center;
}

#ticker {
    width: 580px;
}

#ticker li {
    list-style: none;
    background: #D4C0A1;
}

#ticker li:nth-child(even) {
    background: #F1E0C6;
}

#ticker li table {
    width: 100%;
}

#ticker div {
    cursor: pointer;
}

.plus {
    width: 12px;
    height: 12px;
    background: url(../images/plus.gif) no-repeat;
    float: right;
    margin-top: 2px;
}

.minus {
    width: 12px;
    height: 12px;
    background: url(../images/minus.gif) no-repeat;
    margin-top: 2px;
    position: relative;
    top: 1px;
    right: 1px;
    float: right;
}

.community {
    width: 16px;
    height: 16px;
    background: url(../images/community.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.fix {
    width: 16px;
    height: 16px;
    background: url(../images/fix.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.gamemaster {
    width: 16px;
    height: 16px;
    background: url(../images/gamemaster.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.infinity {
    width: 16px;
    height: 16px;
    background: url(../images/infinity.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.info {
    width: 16px;
    height: 16px;
    background: url(../images/info.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.update {
    width: 16px;
    height: 16px;
    background: url(../images/update.gif) no-repeat;
    float: left;
    padding-left: 10px;
}

.s {
    font-weight: bold;
}

short {
    color: #5A2800;
}

full {
    color: #5A2800;
    display: none;
}

#wanted {
    background: url(../images/wanted.png) no-repeat;
    width: 125px;
    height: 180px;
    background-size: 102%;
    position: relative;
    display: inline-block;
}

#wanted .nickname {
    position: absolute;
    font-weight: bold;
    top: 31px;
    width: 121px;
    height: 35px;
    text-align: center;
    color: #754a1d;
    cursor: default;
}

#wanted .reward {
    font-size: 12px;
    font-weight: bold;
    margin-left: 14px;
    margin-top: 5px;
    color: #2f1b0599;
}

#wanted .price {
    cursor: default;
    transform: scale(1, 1.5); /* W3C */
    -webkit-transform: scale(1, 1.5); /* Safari and Chrome */
    -moz-transform: scale(1, 1.5); /* Firefox */
    -ms-transform: scale(1, 1.5); /* IE 9 */
    -o-transform: scale(1, 1.5); /* Opera */
    text-align: center;
    color: #000000b3;
}

#admin_items {
    display: inline-block;
    float: right;
    font-size: 20px;
    margin-top: -4px;
}

pin {
    background: url(../images/pin.png) no-repeat;
    width: 23px;
    height: 32px;
    display: block;
    position: absolute;
    border-radius: 15px;
}

pin:hover {
    cursor: pointer;
}


#tip_text {
    background: #000;
    display: block;
    color: #fff;
    width: 200px;
    text-align: center;
    border-radius: 5px;
    padding: 2px;
    opacity: 0.7;
}

#tip_text h2 {
    font-size: 14px;
}

#tip_text p {
    font-size: 12px;
}

#menu-top {
    z-index: 1000;
    position: relative;
}

#menu-top.shine-outline:after {
    content: "";
    display: block;
    width: 181px; /* Adjust to your icon size */
    height: 40px; /* Adjust to your icon size */
    top: 0;
    left: 0;
    position: absolute;
    overflow: hidden;

    /* The "Shine" Gradient */
    background-image: linear-gradient(
            120deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, 0.5) 50%,
            rgba(255, 255, 255, 0) 70%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;

    /* Animation */
    animation: shine-sweep 3s infinite;
}

@keyframes shine-sweep {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* --- Sidebar: Czary (magia Tibii, osobne efekty profesji) --- */
@keyframes head-spells-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes head-spells-rune {

    0%,
    100% {
        opacity: 0.35;
        transform: scale(0.85);
        box-shadow: 0 0 4px rgba(160, 100, 255, 0.45);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
        box-shadow: 0 0 14px rgba(220, 180, 255, 0.95);
    }
}

@keyframes head-spells-title {

    0%,
    100% {
        filter: brightness(1);
        text-shadow:
            0 0 6px #7b68ee,
            0 0 10px #00b7c9,
            0 0 4px rgba(255, 255, 255, 0.5),
            0 1px 0 #1a0a2e,
            0 -1px 2px #000;
    }

    50% {
        filter: brightness(1.3);
        text-shadow:
            0 0 14px #da70d6,
            0 0 18px #00ffff,
            0 0 8px rgba(255, 255, 255, 0.85),
            0 1px 0 #0a0618,
            0 -1px 3px #000;
    }
}

/* Błysk tylko na badge czaru (obok nazwy profesji) */
@keyframes spells-tag-arcane {

    0%,
    100% {
        box-shadow:
            0 0 4px rgba(180, 100, 255, 0.35),
            0 0 8px rgba(255, 120, 60, 0.25);
    }

    50% {
        box-shadow:
            0 0 12px rgba(220, 140, 255, 0.75),
            0 0 16px rgba(255, 140, 80, 0.45);
    }
}

@keyframes spells-tag-ice {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(100, 200, 180, 0.35);
    }

    50% {
        box-shadow:
            0 0 14px rgba(120, 255, 220, 0.65),
            0 0 8px rgba(80, 180, 255, 0.35);
    }
}

@keyframes spells-tag-holy {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(255, 220, 140, 0.35);
    }

    50% {
        box-shadow:
            0 0 14px rgba(255, 235, 180, 0.7),
            0 0 10px rgba(255, 200, 100, 0.45);
    }
}

@keyframes spells-tag-strike {

    0%,
    100% {
        box-shadow: 0 0 4px rgba(255, 150, 80, 0.4);
        transform: scale(1);
    }

    40% {
        box-shadow:
            0 0 14px rgba(255, 180, 100, 0.75),
            0 0 8px rgba(255, 100, 60, 0.5);
        transform: scale(1.04);
    }
}

@keyframes spells-fx-exura {

    0%,
    100% {
        opacity: 0.45;
        transform: scale(1);
    }

    40% {
        opacity: 1;
        transform: scale(1.08);
    }

    55% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

@keyframes spells-exura-word {

    0%,
    45% {
        opacity: 1;
        color: #e8ffff;
        text-shadow:
            0 0 6px #fff,
            0 0 12px rgba(120, 255, 255, 0.95),
            0 0 18px rgba(80, 200, 255, 0.7);
    }

    50%,
    55% {
        opacity: 0.25;
        color: #a8f0ff;
        text-shadow: 0 0 4px rgba(200, 255, 255, 0.4);
    }

    60%,
    100% {
        opacity: 1;
        color: #f0ffff;
        text-shadow:
            0 0 8px #fff,
            0 0 16px rgba(150, 255, 255, 0.9),
            0 0 22px rgba(100, 220, 255, 0.65);
    }
}

#cnt-right .head-spells {
    position: relative;
    overflow: hidden;
}

#cnt-right .head-spells__burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220%;
    height: 220%;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg,
            transparent 0deg,
            rgba(138, 43, 226, 0.22) 55deg,
            transparent 110deg,
            rgba(0, 191, 255, 0.2) 180deg,
            transparent 240deg,
            rgba(255, 120, 200, 0.15) 300deg,
            transparent 360deg);
    animation: head-spells-spin 7s linear infinite;
    opacity: 0.75;
    pointer-events: none;
    z-index: 0;
}

#cnt-right .head-spells__rune {
    position: absolute;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border: 1px solid rgba(200, 180, 255, 0.75);
    box-shadow:
        0 0 6px rgba(160, 100, 255, 0.7),
        inset 0 0 4px rgba(255, 255, 255, 0.15);
    pointer-events: none;
    z-index: 1;
    animation: head-spells-rune 2.1s ease-in-out infinite;
}

#cnt-right .head-spells__rune--a {
    left: 10px;
    animation-delay: 0s;
}

#cnt-right .head-spells__rune--b {
    right: 10px;
    animation-delay: 1.05s;
}

#cnt-right .head-spells__text {
    position: relative;
    z-index: 2;
    display: inline-block;
    font-family: Verdana, Geneva, "DejaVu Sans", sans-serif;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 0.42em;
    text-indent: 0.42em;
    text-transform: uppercase;
    color: #fff8e8;
    text-shadow:
        0 0 6px #7b68ee,
        0 0 10px #00aec4,
        0 0 4px rgba(255, 255, 255, 0.55),
        0 1px 0 #120818,
        0 -1px 2px #000;
    animation: head-spells-title 2.3s ease-in-out infinite;
}

#cnt-right .spells-sidebar .spells-sidebar__body > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#cnt-right .spells-sidebar .spells-sidebar__body > ul > li.spells-voc {
    background: none;
    display: block;
    margin: 7px 2px 7px 4px;
    padding: 0;
    width: auto;
    max-width: 174px;
    text-align: left;
}

#cnt-right .spells-sidebar .spells-sidebar__body > ul > li.spells-voc.last {
    margin-bottom: 4px;
}

/* Jak pola .input1 z acc makera — jeden styl dla wszystkich profesji */
#cnt-right .spells-voc > a {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 8px 9px 8px 10px;
    border-radius: 2px;
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    color: #202122;
    background: linear-gradient(180deg, #2c261c 0%, #241f15 55%, #1a1610 100%);
    border-top: 1px solid #15120d;
    border-right: 1px solid #221e14;
    border-bottom: 1px solid #6e6b66;
    border-left: 1px solid #241f15;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

#cnt-right .spells-voc > a:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #352d22 0%, #2a2419 55%, #1e1a12 100%);
    border-bottom-color: #7a7670;
}

#cnt-right .spells-voc__fx {
    position: absolute;
    top: 0;
    right: 0;
    width: 48%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    border-radius: 0 2px 2px 0;
    display: none;
}

#cnt-right .spells-voc__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 1.2em;
}

#cnt-right .spells-voc__label {
    font-weight: bold;
    font-size: 12px;
    flex: 1 1 auto;
    min-width: 0;
    color: #d8d4cc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

#cnt-right .spells-voc__spell {
    flex: 0 0 auto;
    font-family: "Courier New", Courier, monospace;
    font-size: 7.5px;
    font-weight: bold;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    padding: 3px 6px;
    border-radius: 2px;
    white-space: nowrap;
    line-height: 1.15;
    position: relative;
    z-index: 2;
    background: #1a1510;
    border-top: 1px solid #15120d;
    border-right: 1px solid #221e14;
    border-bottom: 1px solid #5a5752;
    border-left: 1px solid #2a2419;
    color: #0099cc;
}

/* Efekt czaru tylko na badge (obok nazwy) */
#cnt-right .spells-voc--sorc .spells-voc__spell {
    animation: spells-tag-arcane 2.2s ease-in-out infinite;
}

#cnt-right .spells-voc--druid .spells-voc__spell {
    animation: spells-tag-ice 2.4s ease-in-out infinite;
}

#cnt-right .spells-voc--pally .spells-voc__spell {
    animation: spells-tag-holy 2.3s ease-in-out infinite;
}

#cnt-right .spells-voc--knight .spells-voc__spell {
    animation: spells-tag-strike 1.85s ease-in-out infinite;
}

/* Spalanie many — ta sama ramka co reszta; miganie exury tylko na badge */
#cnt-right .spells-voc--exura .spells-voc__fx--exura {
    display: block;
    width: 46%;
    background:
        radial-gradient(circle at 72% 45%, rgba(255, 255, 255, 0.2) 0%, transparent 42%),
        radial-gradient(ellipse 100% 80% at 70% 100%, rgba(100, 220, 255, 0.22) 0%, transparent 55%);
    animation: spells-fx-exura 1.1s ease-in-out infinite;
}

#cnt-right .spells-voc--exura .spells-voc__label--mana {
    color: #d8d4cc;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

#cnt-right .spells-voc--exura .spells-voc__spell--exura {
    color: #e8ffff;
    background: #0f2830;
    border-top: 1px solid #0a1e26;
    border-left: 1px solid #0f2830;
    border-right: 1px solid #143038;
    border-bottom: 1px solid #3a7080;
    animation: spells-exura-word 1.35s ease-in-out infinite;
}

#cnt-right .spells-voc--exura > a:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce) {

    #cnt-right .head-spells__burst,
    #cnt-right .head-spells__rune,
    #cnt-right .head-spells__text,
    #cnt-right .spells-voc__fx--exura,
    #cnt-right .spells-voc--sorc .spells-voc__spell,
    #cnt-right .spells-voc--druid .spells-voc__spell,
    #cnt-right .spells-voc--pally .spells-voc__spell,
    #cnt-right .spells-voc--knight .spells-voc__spell,
    #cnt-right .spells-voc--exura .spells-voc__spell--exura {
        animation: none;
    }

    #cnt-right .head-spells__burst {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    #cnt-right .spells-voc--knight .spells-voc__spell {
        transform: none;
    }
}