/*
 * Gladiator UI 2.0
 * Drop-in replacement for the legacy image-sliced interface.
 * UI chrome is CSS-only: no background-image/url() is used here.
 */

:root {
    --bg: #090806;
    --bg-soft: #100d0a;
    --surface: #17120e;
    --surface-2: #1e1711;
    --surface-3: #271d14;
    --surface-hover: #302317;
    --surface-active: #3a2919;
    --line: #3c2f22;
    --line-soft: #2a2119;
    --line-strong: #6a4c2e;
    --gold: #d2a15e;
    --gold-2: #f0c77e;
    --gold-dim: #9d7546;
    --text: #eee6da;
    --text-soft: #c6bdb0;
    --muted: #938a7e;
    --green: #66cf8a;
    --green-dark: #24663a;
    --red: #f07b70;
    --blue: #82b8dc;
    --purple: #c486df;
    --shadow: 0 18px 55px rgba(0,0,0,.46);
    --shadow-soft: 0 5px 16px rgba(0,0,0,.28);
    --radius: 10px;
    --radius-sm: 7px;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background:
        radial-gradient(circle at 50% 8%, rgba(180, 126, 68, .14), transparent 34rem),
        radial-gradient(circle at 12% 42%, rgba(102, 73, 42, .09), transparent 28rem),
        radial-gradient(circle at 88% 55%, rgba(102, 73, 42, .08), transparent 28rem),
        repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0 1px, transparent 1px 9px),
        #090806;
    color-scheme: dark;
}

body {
    position: relative;
    width: 100%;
    max-width: 580px;
    min-height: 100vh;
    margin: 0 auto;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(255,255,255,.012), transparent 12rem),
        var(--bg-soft);
    border-left: 1px solid rgba(210, 161, 94, .16);
    border-right: 1px solid rgba(210, 161, 94, .16);
    box-shadow: var(--shadow);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    font-size: 14px;
    line-height: 1.42;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body::before,
body::after {
    content: none;
}

::selection {
    background: rgba(210, 161, 94, .28);
    color: #fff;
}

/* Base elements */
a:link,
a:active,
a:visited {
    color: #ead7bb;
    text-decoration: none;
}

a:hover,
a:focus {
    color: var(--gold-2);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgba(240, 199, 126, .78);
    outline-offset: 2px;
}

img {
    max-width: 100%;
    vertical-align: middle;
    border-style: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}

td,
tr {
    padding: 0;
}

TD.leftcol {
    width: 50px;
    vertical-align: top;
}

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

li {
    padding: 0;
}

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(210,161,94,.36), transparent);
}

/* Game shell / section separators */
.rzd {
    height: 1px;
    margin: 0;
    background: linear-gradient(90deg, transparent, rgba(210,161,94,.18) 12%, rgba(210,161,94,.38) 50%, rgba(210,161,94,.18) 88%, transparent);
}

.v {
    position: relative;
    color: var(--text-soft);
    padding: 7px 10px;
    background: linear-gradient(180deg, #211a14 0%, #15110e 100%);
    border-top: 1px solid rgba(255,255,255,.035);
    border-bottom: 1px solid rgba(210,161,94,.18);
    box-shadow: inset 0 -1px rgba(0,0,0,.55);
}

.verhihka {
    padding: 0;
    color: #d9c8aa;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .025em;
    text-shadow: 0 1px 2px #000;
}

.verhihka a {
    font-size: inherit;
}

.header {
    height: auto;
    min-height: 72px;
    text-align: center;
}

/* Main content cards */
.nev4,
.nev44,
.nev47,
.nev,
.lz,
.lz9 {
    color: var(--text);
    background: linear-gradient(180deg, rgba(35,27,20,.98), rgba(23,18,14,.98));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px rgba(255,255,255,.025), var(--shadow-soft);
}

.nev4 {
    padding: 8px 10px;
}

.nev44 {
    padding: 9px 10px;
    text-align: center;
}

.nev47 {
    padding: 9px 10px;
}

.nev {
    padding: 10px;
    color: var(--text-soft);
}

.nev a {
    color: #d9c6a7;
    padding: 3px;
}

.lz {
    padding: 10px;
}

.lz9 {
    padding: 12px;
}

/* Keep legacy nesting from generating four image-slice layers */
.bor1,
.bor2,
.bor3,
.bor4 {
    background: none;
    padding: 0;
}

.bor1 {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.bor_bg {
    padding: 7px 9px;
    color: var(--blue);
    font-weight: 700;
    background: linear-gradient(180deg, #1c1814, #14110e);
}

/* Main navigation rows */
.div_stanciya,
.div_stanciya2,
.div_stanciya3 {
    position: relative;
    width: 100%;
    min-height: 48px;
    padding: 10px 38px 10px 12px;
    color: var(--text);
    background: linear-gradient(180deg, #241c15 0%, #1b1510 100%);
    border: 0;
    border-left: 3px solid transparent;
    box-shadow: inset 0 1px rgba(255,255,255,.022), inset 0 -1px rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0,0,0,.75);
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

.div_stanciya::after,
.div_stanciya2::after,
.div_stanciya3::after {
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-52%);
    color: #806548;
    font-size: 23px;
    font-weight: 400;
    line-height: 1;
    transition: color .16s ease, transform .16s ease;
}

.div_stanciya:hover,
.div_stanciya2:hover,
.div_stanciya3:hover {
    color: #fff7e9;
    background: linear-gradient(180deg, #302318 0%, #241a12 100%);
    border-left-color: var(--gold-dim);
    cursor: pointer;
}

.div_stanciya:hover::after,
.div_stanciya2:hover::after,
.div_stanciya3:hover::after {
    color: var(--gold-2);
    transform: translate(2px, -52%);
}

.div_stanciya:active,
.div_stanciya2:active,
.div_stanciya3:active {
    background: var(--surface-active);
}

.div_stanciya > img,
.div_stanciya2 > img,
.div_stanciya3 > img,
.div_stanciya a > img,
.div_stanciya2 a > img,
.div_stanciya3 a > img {
    flex: 0 0 auto;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.8));
}

.div_stanciya a,
.div_stanciya2 a,
.div_stanciya3 a {
    width: 100%;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 9px;
}

/* Buttons */
a.button_one,
a.button_d,
button,
input.form-submit,
input[type="submit"].form-submit {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #765534;
    border-radius: 8px;
    background: linear-gradient(180deg, #8a6037 0%, #604124 50%, #493019 100%);
    color: #fff4df;
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 4px 12px rgba(0,0,0,.32);
    text-shadow: 0 1px 1px rgba(0,0,0,.8);
    font-family: inherit;
    font-weight: 750;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform .14s ease, filter .14s ease, border-color .14s ease, box-shadow .14s ease;
}

a.button_one {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 36px;
    padding: 7px 14px;
    font-size: 14px;
}

a.button_d {
    display: inline-block;
    min-height: 34px;
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 650;
    background: linear-gradient(180deg, #33302c, #211f1c);
    border-color: #4c4741;
}

button {
    min-height: 36px;
    padding: 7px 14px;
    font-size: 13px;
}

a.button_one:hover,
a.button_d:hover,
button:hover,
input.form-submit:hover,
input[type="submit"].form-submit:hover {
    color: #fff;
    border-color: #a97c47;
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: inset 0 1px rgba(255,255,255,.2), 0 6px 15px rgba(0,0,0,.36);
}

a.button_one:active,
a.button_d:active,
button:active,
input.form-submit:active {
    transform: translateY(0);
    filter: brightness(.96);
}

/* Forms */
input[type="text"],
input[type="password"],
input[type="password_pass"],
input[type="email"],
input[type="search"],
input[type="number"],
input.text,
textarea,
textarea.text,
.input,
select {
    width: 100%;
    min-height: 36px;
    margin: 3px 0;
    padding: 7px 9px;
    color: var(--text);
    background: #110f0d;
    border: 1px solid #3a332c;
    border-radius: 7px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,.42);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

div.nev4 input[type="text"],
div.nev4 input[type="password"],
div.nev4 input[type="password_pass"],
div.nev input[type="text"],
div.nev input[type="password"] {
    width: min(100%, 260px);
    height: auto;
    min-height: 36px;
    margin: 3px 0;
    padding: 7px 9px;
    color: var(--text);
    background: #110f0d;
    border: 1px solid #3a332c;
    border-radius: 7px;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input.text:focus,
textarea:focus,
textarea.text:focus,
.input:focus,
select:focus {
    border-color: #8b6840;
    background: #15120f;
    box-shadow: 0 0 0 3px rgba(210,161,94,.12), inset 0 1px 4px rgba(0,0,0,.38);
}

textarea,
textarea.text {
    min-height: 78px;
    resize: vertical;
    line-height: 1.42;
}

input.large,
textarea.large,
input.medium-text,
textarea.medium-text {
    width: 100%;
}

input[type="number"] {
    width: 90px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="checkbox"] {
    width: 17px;
    height: 17px;
    margin-right: 5px;
    vertical-align: -3px;
    accent-color: #9b7040;
}

input[type=file] {
    max-width: 100%;
    color: var(--text-soft);
}

select {
    width: min(100%, 280px);
    color: var(--text);
}

.form-submit,
input.form-submit {
    display: block;
    width: 100%;
    min-height: 38px;
    margin: 8px 0 6px;
    padding: 8px 12px;
    font-size: 14px;
}

/* Progress / experience */
.t.h-bar {
    display: table;
    width: 100%;
    min-height: 11px;
    margin-top: 3px;
    line-height: 11px;
}

.row {
    display: table-row;
}

.cell {
    display: table-cell;
}

.t.h-bar .cell {
    vertical-align: middle;
}

.t.h-bar .cell._var {
    width: 42px;
    padding-bottom: 2px;
    font-size: 13px;
    text-align: center;
}

.progress-bar,
.b-expa {
    width: 100%;
    min-height: 8px;
    height: 8px;
    overflow: hidden;
    background: #0c0b0a;
    border: 1px solid #2c2824;
    border-radius: 999px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.75);
}

.progress,
.expa-fill {
    min-height: 100%;
    height: 100%;
    max-width: 100%;
    border-radius: inherit;
    transition: width .2s ease;
}

.progress._green {
    background: linear-gradient(90deg, #3a9a57, #62ca7f);
    box-shadow: 0 0 7px rgba(90,199,120,.22);
}

.expa-fill {
    background: linear-gradient(90deg, #b98237, #e2b15f);
}

/* Footer navigation */
.footer_menu {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    width: 100%;
    margin: 4px 0;
}

.footer_menu .l {
    min-width: 0;
    text-align: center;
}

.footer_menu .l a {
    min-height: 92px;
    padding: 8px 4px 6px;
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--text-soft);
    font-size: 12px;
    line-height: 1.2;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.footer_menu .l a:hover {
    color: #fff0d6;
    background: rgba(210,161,94,.07);
    border-color: rgba(210,161,94,.18);
}

.footer_menu .l img {
    width: 54px !important;
    height: 54px !important;
    object-fit: contain;
}

.footer_end,
.footer_verh {
    height: 12px;
    background: linear-gradient(90deg, transparent, rgba(210,161,94,.16), transparent);
}

/* Messages / notifications */
.message {
    margin: 5px;
    padding: 8px 9px;
    color: #2a241e;
    background: #f2eadf;
    border: 1px solid #d4c6b5;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,.18);
    font-size: 12px;
    font-style: normal;
}

.notify-left {
    width: 0;
    height: 0;
    margin-left: 48px;
    border-left: 8px solid transparent;
    border-right: 0 solid transparent;
    border-top: 8px solid #d4c6b5;
}

.error {
    display: block;
    padding: 8px 10px;
    color: #ffd7d3;
    background: #301716;
    border: 1px solid #60302c;
    border-radius: 7px;
}

.notice {
    display: block;
    padding: 8px 10px;
    color: #d9f5c8;
    background: #192519;
    border: 1px solid #365236;
    border-radius: 7px;
}

.notification {
    position: fixed;
    z-index: 1000;
    top: 10px;
    left: 50%;
    width: min(calc(100% - 24px), 540px);
    transform: translateX(-50%);
    padding: 10px 12px;
    color: var(--text);
    text-align: center;
    background: #201912;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    box-shadow: 0 10px 35px rgba(0,0,0,.48);
}

.close-button {
    float: right;
    cursor: pointer;
}

/* Pagination */
.page {
    padding: 8px;
    text-align: center;
    background: #15110e;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

.page span,
.page b,
.page a {
    display: inline-block;
    min-width: 30px;
    margin: 2px;
    padding: 5px 8px;
    border-radius: 6px;
}

.page span,
.page b {
    color: var(--gold-2);
    background: #332015;
    border: 1px solid #5e3a22;
}

.page a {
    color: #e9dfd1;
    background: #24201c;
    border: 1px solid #403b35;
    font-weight: 700;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.page a:hover {
    color: #fff5e2;
    background: #3a2a1d;
    border-color: #7e5c37;
}

/* Misc layout */
.item_center,
.center {
    text-align: center;
}

.main_right,
.admin_right,
.fr {
    float: right;
}

.fl {
    float: left;
}

.fl10 {
    float: none;
    text-align: center;
}

.cb {
    clear: both;
}

.block {
    display: block;
}

.ib {
    display: inline-block;
}

.tleft { text-align: left; }
.tright { text-align: right; }
.right { text-align: right; }
.text { padding: 4px; overflow-wrap: anywhere; }
.mt { margin-top: 5px; }
.mb { margin-bottom: 5px; }
.mt5 { margin-top: 5px !important; }
.pt { padding-top: 4px; }
.pb { padding-bottom: 4px; }
.w50 { width: 50%; }
.w40 { width: 40%; }
.w30 { width: 30%; }
.w33 { width: 33.33%; }
.w25 { width: 25%; }
.w20 { width: 20%; }
.h8 { height: 8px; }
.h14 { height: 14px; }
.fs11 { font-size: 11px; }
.fs13 { font-size: 13px; }
.fs14 { font-size: 14px; }
.fs15 { font-size: 15px; }
.fs16 { font-size: 16px; }
.fs17 { font-size: 17px; }
.small { font-size: 12px; }
.smalls { font-family: inherit; font-size: 14px; line-height: 1.42; }
.vsmall { font-size: 10px; }
.big { font-size: 1.5em; }
.tnormal { font-weight: 400; }
.tbold { font-weight: 700; }
.portrait { float: left; padding: 0 8px 0 0; }
.border { border: 1px solid var(--line); }
.ct { width: 100px; text-align: center; }

.b-maneken {
    position: relative;
    min-height: 247px;
    height: auto;
    padding: 0 5px;
    background: none;
}

.i-amu {
    position: relative;
    width: 70px;
    margin: 5px 0;
    display: inline-block;
    text-align: center;
    vertical-align: top;
}

.amu-lvl {
    position: absolute;
    top: -3px;
    left: 7px;
    width: 22px;
    height: 22px;
    color: #fff8df;
    background: #7a552f;
    border: 1px solid #c99b5a;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,.45);
    font-size: 10px;
    font-weight: 800;
    line-height: 20px;
    text-align: center;
}

ul.l_menu li a {
    padding: 9px 10px;
    display: block;
    border-radius: 6px;
}

ul.l_menu li a:hover {
    background: rgba(210,161,94,.08);
}

ul.stats li.stat {
    width: 50%;
}

.sorting-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sorting-cell {
    flex: 1 1 62px;
    padding: 8px 6px;
    color: var(--text-soft);
    text-align: center;
    cursor: pointer;
    background: #191612;
    border: 1px solid #37322c;
    border-radius: 7px;
}

.sorting-cell:hover {
    color: var(--gold-2);
    border-color: #675038;
}

.block1 {
    width: 50%;
    display: inline-block;
    vertical-align: top;
    color: var(--text);
    background: #17130f;
    border: 1px solid var(--line-soft);
}

.param-container {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

/* Active states */
a.active,
a.active1,
a.active2 {
    font-weight: 800;
    border-radius: 6px;
}

a.active,
a.active2 {
    margin: 0 2px;
    padding: 5px 8px;
    background: #2c2219;
    border: 1px solid #4b3a2a;
}

a.active2 {
    color: #d8c8b3;
}

/* Semantic colors */
.time { float: right; color: #9ac39f; }
.city { float: right; color: #df7f76; }
.ruby { color: #c887d8; }
.cYellow { color: #d9df72; }
.mana { color: #82b8d4; }
.exp { color: #f2bd53; }
.feedbackPanelERROR { color: #ff7970; }
.feedbackPanelINFO { color: #72dc8a; }
.title { color: var(--gold-2); }
.white { color: #fff; }
.admin { color: #9cc3d2; }
.moder { color: #efad4b; }
.gold { color: #efad4b; }
.lime,
.green,
.cGreen { color: var(--green); }
.cBlues,
.cBlue { color: #9cc3d2; }
.anketa { color: #a5c6a7; }
.blue { color: #6fa6e5; }
.pink { color: #d16ad1; }
.darkblue { color: #778fe8; }
.common { color: #a9adb2; }
.uncommon { color: #91a75f; }
.rare { color: #6691e2; }
.epic { color: #a95cff; }
.legend { color: #ff9a43; }
.premium { color: #f6e86a; }
.minor { color: var(--muted); }
.minor2 { color: #716a62; }
span.cvet { color: var(--text); }
span.cvet4 { color: #aaa198; }
span.count_user { color: #9fd462; }
span.count_user2 { color: #ddcba7; }
span.green { color: var(--green); }

span.chet,
span.chet4 {
    float: right;
    padding: 2px 7px;
    color: #b4aaa0;
    background: #15120f;
    border: 1px solid #332d27;
    border-radius: 999px;
}

/* Legacy color-link classes */
a.a:hover { text-decoration: underline; }
a.white:link, a.white:active, a.white:visited { color: #fff; }
a.white:hover { color: #fff5df; }
a.orange:link, a.orange:active, a.orange:hover, a.orange:visited { color: #d4a15a; }
a.green:link, a.green:active, a.green:hover, a.green:visited { color: #72c487; }
a.red:link, a.red:active, a.red:hover, a.red:visited { color: #e16e64; }
a.reg:link, a.reg:active, a.reg:visited { color: #e4d8ca; text-decoration: underline; }
a.reg:hover { color: var(--gold-2); }
a.blue:link, a.blue:active, a.blue:hover, a.blue:visited { color: #72c5c1; }
a.act:link, a.act:active, a.act:visited { color: #c79756; }
a.act:hover { color: var(--gold-2); }

.copy {
    padding: 4px 6px;
    color: #716b64;
    font-size: 10px;
    text-align: right;
}

.copy a {
    color: #8a8177;
    font-size: 10px;
}

@media (max-width: 600px) {
    html {
        background: #090806;
    }

    body {
        max-width: none;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
        font-size: 14px;
    }

    .div_stanciya,
    .div_stanciya2,
    .div_stanciya3 {
        min-height: 47px;
        padding-left: 11px;
    }

    .footer_menu {
        gap: 3px;
    }

    .footer_menu .l a {
        min-height: 84px;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 11px;
    }

    .footer_menu .l img {
        width: 48px !important;
        height: 48px !important;
    }
}

@media (max-width: 380px) {
    body {
        font-size: 13px;
    }

    .div_stanciya,
    .div_stanciya2,
    .div_stanciya3 {
        font-size: 13px;
    }

    .footer_menu .l img {
        width: 43px !important;
        height: 43px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ========================================================================== */
/* Mobile viewport stabilization — Android/WebView                           */
/* ========================================================================== */
/*
 * На мобильном WebView длинная страница могла получать небольшой scrollWidth
 * сверх viewport. Диагональный вертикальный свайп тогда одновременно двигал
 * документ по X, из-за чего весь интерфейс выглядел "резиновым" и уезжал вбок.
 * Ограничиваем только корневой горизонтальный скролл. Внутренние карусели с
 * собственным overflow-x:auto продолжают работать независимо.
 */
@media (max-width: 820px), (pointer: coarse) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    body {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    /* CSS Overflow 3: там, где WebView умеет clip, он надёжнее hidden и не
       создаёт отдельный горизонтальный scroll-container. */
    @supports (overflow-x: clip) {
        html,
        body {
            overflow-x: clip;
        }
    }

    img,
    video,
    canvas,
    svg,
    iframe {
        max-width: 100%;
    }
}