/* ===========================================================================
   «Последнее поколение» — тёмный матовый графит.

   Раньше панели были плоской заливкой #262626, и на почти чёрном фоне они
   читались как мёртвое серое пятно. Здесь вместо ровной заливки у каждой
   поверхности лёгкий вертикальный градиент и на полтона светлее верхняя
   кромка — так плоскость выглядит объёмной, но без глянца.

   В палитре нет ни чистого чёрного, ни чистого белого: тени уходят в
   холодный графит с синеватым подтоном, свет — в приглушённый серо-голубой.
   Именно этот холодный сдвиг отличает графит от нейтрального серого.
=========================================================================== */
:root{
    --bg:        #0B0D10;   /* фон страницы */
    --panel:     #191D22;   /* тело панели */
    --panel-hi:  #212630;   /* верх панели: мягкий блик матовой плоскости */
    --panel-lo:  #14171C;   /* низ панели */
    --recess:    #101317;   /* утопленные элементы: шапка и нижняя панель */
    --recess-hi: #161A20;
    --line:      #262B33;   /* базовая рамка */
    --line-hi:   #333A45;   /* верхняя кромка, светлее базовой */
    --line-lo:   #0A0C0F;
    --text:      #C3CAD3;   /* основной текст */
    --text-dim:  #868E99;   /* приглушённый */
    --accent:    #DE8B3A;   /* оранжевый: в игре имёна игроков и монеты — оранжевые */
    --tint:      rgba(86,106,138,0.07);
    --rad:       8px;
    --gut:       8px;
}

html{
    background-color: #08090B;
    /* Адаптив: страница обязана занимать ширину экрана, иначе телефон
       показывает её узкой полосой в углу. */
    width: 100%;
    -webkit-text-size-adjust: 100%;
}
body{
    margin: 0 auto;
    /* запас снизу под липкое меню, иначе последний блок уезжает под него */
    padding: var(--gut) 0 58px;
    width: 100%;
    max-width: 560px;
    min-width: 0;
    font-size: 15px;
    font-family: Arial,sans-serif;
    color: var(--text);
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Едва заметный холодный отсвет сверху: страница перестаёт быть
       однородной заливкой и получает глубину, но без «свечения». */
    background:
        radial-gradient(ellipse 130% 48% at 50% 0%,
            var(--tint) 0%,
            rgba(86,106,138,0) 62%),
        linear-gradient(180deg, #0F1216 0%, var(--bg) 100%);
}
/* Картинка не должна распирать вёрстку. Раньше атрибуты вида width=16px
   браузеры считали невалидными и рисовали картинку в натуральном размере
   - одна такая иконка растягивала страницу шире экрана. */
img{
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}
form{
    padding: 0;
    margin: 0;
}
input{outline: none}
textarea,
input[type="text"]{
    background-color: #0D1013;
    border: 1px solid var(--line);
    color: #E2E7ED;
    outline: none;
    margin: 5px auto;
}
input[type="text"]{padding: 4px;}
input[type="submit"]{
    font-size: 13px;
    cursor: pointer;
}
input[type=submit]{
    background-position:
        100% 0,
        0 0,
        0 0;
    background-repeat:
        no-repeat,
        no-repeat,
        repeat-x;
    display: inline-block;
    margin: 5px auto;
    padding: 0 20px;
    min-height: 28px;
    line-height: 28px;
    vertical-align: middle;
    border: 0;
    text-align: center;
    color: #DCE2E9;
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
    font-weight: bold;
    background-color: transparent;
    /* Картинки кнопок перекрашены из синего в графит, скос сохранён. */
    background-image: url("but_right.png"), url("but_left.png"), url("but_center.png");
}
a{
    text-decoration: none;
    color: var(--accent);
}
a.str{
	border: 1px solid var(--line);
	padding: 4px;
	margin-left: 4px;
}

/* ---- Общие блоки: одинаковые рамка, скругление и боковые отступы ----
   Градиент идёт от светлого к тёмному, рамка сверху на полтона светлее
   остальных - это и даёт матовый объём. Контраст минимальный, чтобы
   поверхность не выглядела пластиковой. */
.c{
    color: var(--text);
    display: block;
    line-height: 1.3;
    padding: 7px 9px;
    margin: 0 var(--gut) 8px;
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
    background: linear-gradient(180deg,
        var(--panel-hi) 0%,
        var(--panel) 48%,
        var(--panel-lo) 100%);
}
/* Шапка с характеристиками и подвал — утопленные, темнее содержимого. */
.top{
    box-sizing: border-box;
    position: relative;
    color: var(--text-dim);
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    background: linear-gradient(180deg, var(--recess-hi) 0%, var(--recess) 100%);
    border: 1px solid var(--line);
    border-bottom-color: var(--line-lo);
    border-radius: var(--rad);
    margin: 0 var(--gut) 8px;
    padding: 7px 9px;
}

/* ---- Шапка игрока (.hud) ----
   Компактный кластер вместо таблицы width=100%: аватар из профиля и
   уровень слева, золото с сапфирами прижаты вправо. Второй строкой
   полоса опыта. Панель повторяет материал .top: утопленный фон, та же
   рамка и радиус, отступы --gut. */
.hud{
    /* Локальные цвета темы: сапфира в общей палитре нет, золото --
       это --accent (в игре монеты оранжевые). */
    --hud-sap: #7FC4E8;
    --hud-ava-w: 22px;
    --hud-ava-h: 28px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto minmax(0,1fr) auto;
    grid-template-areas:
        "ava lvl hp res"
        "xp  xp  xp  xp";
    align-items: center;
    column-gap: 9px;
    row-gap: 6px;
    position: relative;
    color: var(--text-dim);
    text-shadow: 0 1px 1px rgba(0,0,0,.5);
    background: linear-gradient(180deg, var(--recess-hi) 0%, var(--recess) 100%);
    border: 1px solid var(--line);
    border-bottom-color: var(--line-lo);
    border-radius: var(--rad);
    margin: 0 var(--gut) 8px;
    padding: 5px 9px 7px;
}
.hud img{vertical-align:middle;}

/* Аватар: портреты 200x274, поэтому тайл вертикальный, а не квадратный */
.hud_ava{
    grid-area: ava;
    display: block;
    width: var(--hud-ava-w);
    height: var(--hud-ava-h);
    overflow: hidden;
    background: var(--panel-lo);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: 5px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.hud_ava img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

/* Уровень - плашка сразу за аватаром, правая граница блока */
.hud_lvl{
    grid-area: lvl;
    box-sizing: border-box;
    min-width: 20px;
    height: 19px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: 5px;
    color: var(--accent);
    font-size: 11px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

/* Здоровье. Тон заливки задаётся из PHP по остатку: зелёный выше
   половины, жёлтый до четверти, красный ниже. Полоса подписана
   текущим и максимальным значением - раненый игрок должен видеть
   не только долю, но и сколько именно не хватает. */
.hud_hp{
    grid-area: hp;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}
.hud_hpico{
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    vertical-align: middle;
}
.hud_hpnum{
    color: var(--text);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.hud_hpnum i{
    font-style: normal;
    color: var(--text-dim);
    font-size: 10px;
}
.hud_hpbar{
    flex: 1 1 auto;
    min-width: 30px;
    max-width: 210px;
    display: block;
    height: 7px;
    background: linear-gradient(180deg, #090B0E 0%, #12161B 100%);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.85),
        0 1px 0 rgba(255,255,255,.02);
    overflow: hidden;
}
.hud_hpbar i{
    position: relative;
    display: block;
    height: 100%;
    min-width: 3px;      /* остаток в пару процентов тоже должен быть виден */
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.45),
        inset 0 -1px 0 rgba(0,0,0,.35);
    transition: width .35s ease;
}
/* тот же блик по верхней кромке, что и на полосе опыта */
.hud_hpbar i::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 48%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0));
}

/* Валюты - самая тихая часть шапки, прижата к правому краю */
.hud_res{
    grid-area: res;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
    white-space: nowrap;
}
.hud_cur{
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hud_gold{color: var(--accent);}
.hud_sap  {color: var(--hud-sap);}

/* Полоса опыта до следующего уровня.
   Раз в шапке больше нечем мерить прогресс, полоса стала её главным
   элементом: утопленный жёлоб, заливка с вертикальным градиентом,
   тёплый янтарный свет по краю и блик по верхней кромке - «стеклянный»
   вид без анимации «шёлка». Янтарь выбран под материал темы: --accent
   в игре оранжевый, зелёный рядом с ним спорил с палитрой. Полоса
   двигается только когда опыт реально набирается. */
.hud_xp{
    grid-area: xp;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.hud_xpbar{
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    height: 7px;
    background: linear-gradient(180deg, #0A0908 0%, #15120D 100%);
    border: 1px solid var(--line);
    border-radius: 5px;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,.85),
        0 1px 0 rgba(255,255,255,.02);
    overflow: hidden;
}
.hud_xpbar i{
    position: relative;
    display: block;
    height: 100%;
    min-width: 3px;      /* крошечный остаток опыта тоже должен быть виден */
    border-radius: 4px;
    background: linear-gradient(180deg, #FFD694 0%, #F2A93A 44%, #9C5F14 100%);
    box-shadow:
        0 0 10px rgba(242,169,58,.50),
        inset 0 1px 0 rgba(255,255,255,.50),
        inset 0 -1px 0 rgba(0,0,0,.35);
    transition: width .35s ease;
}
/* блик по верхней кромке заливки */
.hud_xpbar i::before{
    content: "";
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 48%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0));
}
.hud_xptxt{
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}
.hud_xptxt b{
    color: var(--text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Полоса двигается только при смене состояния, не для украшения */
@media (prefers-reduced-motion: reduce){
    .hud_hpbar i,
    .hud_xpbar i{transition: none;}
}

a.link{
    display: block;
    padding: 6px 9px;
    margin: 0 var(--gut) 8px;
    background: linear-gradient(180deg,
        var(--panel-hi) 0%,
        var(--panel) 48%,
        var(--panel-lo) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
    color: var(--text-dim);
}

/* ---- Постер на главной ----
   Без скругления и ровно по ширине меню. */
.poster{
    margin: 0 var(--gut) 10px;
}
.poster-frame{
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background: #0C0E11;
    border: 1px solid var(--line);
    border-radius: 0;
}
.poster-frame img{
    display: block;
    width: 100%;
    height: auto;
}
/* Туман ложится ПОВЕРХ картинки. Движение сделано достаточно быстрым,
   чтобы его было видно: слой уезжает на 10% за 16 секунд, а не на 12%
   за 26 - раньше это было около 3 пикселей в секунду, то есть незаметно.
   Клочья плотные и идут блуждающим путём, а не по прямой. */
.fog{
    position: absolute;
    inset: -45%;
    pointer-events: none;
    mix-blend-mode: screen;
    will-change: transform;
}
.fog-a{
    opacity: 0.85;
    background:
        radial-gradient(26% 20% at 26% 30%, rgba(216,230,252,0.34), transparent 100%),
        radial-gradient(22% 28% at 62% 52%, rgba(198,216,246,0.28), transparent 100%),
        radial-gradient(28% 22% at 80% 26%, rgba(208,224,250,0.24), transparent 100%),
        radial-gradient(20% 24% at 44% 78%, rgba(190,210,244,0.26), transparent 100%);
    animation: fog-a 16s linear infinite;
}
.fog-b{
    opacity: 0.6;
    background:
        radial-gradient(24% 26% at 70% 68%, rgba(192,212,244,0.26), transparent 100%),
        radial-gradient(28% 20% at 34% 46%, rgba(178,200,238,0.22), transparent 100%),
        radial-gradient(22% 24% at 12% 72%, rgba(202,220,250,0.20), transparent 100%);
    animation: fog-b 23s linear infinite;
}
@keyframes fog-a{
    0%  { transform: translate3d(-10%, -6%, 0) scale(1); }
    33% { transform: translate3d(-1%, 5%, 0) scale(1.15); }
    66% { transform: translate3d(9%, -2%, 0) scale(1.05); }
    100%{ transform: translate3d(-10%, -6%, 0) scale(1); }
}
@keyframes fog-b{
    0%  { transform: translate3d(9%, 6%, 0) scale(1.12); }
    34% { transform: translate3d(1%, -5%, 0) scale(1); }
    67% { transform: translate3d(-8%, 3%, 0) scale(1.08); }
    100%{ transform: translate3d(9%, 6%, 0) scale(1.12); }
}
@media (prefers-reduced-motion: reduce){
    .fog{ animation: none; }
}

/* ---- Меню главной: капсулы в две колонки ----
   Капсулы чуть светлее обычных блоков: их нажимают, и они должны
   читаться как активные элементы. Радиус и рамка - общие с остальными.
   Разделителя посередине нет, промежуток создаёт gap. Ширина
   calc(50% - 4px): два пункта плюс gap 8px в сумме дают ровно 100%. */
.menu{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 var(--gut) 10px;
}
.menu a{
    box-sizing: border-box;
    flex: 0 0 calc(50% - 4px);
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
    min-width: 0;
    padding: 10px 9px;
    background: linear-gradient(180deg,
        #262C36 0%,
        #1E232A 55%,
        #1A1E24 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
    /* Пункты меню нажимают чаще всего, поэтому текст в них светлее,
       чем в шапке: иначе контраст падает до нижней границы AA. */
    color: #A2ABB6;
    font-size: 14px;
    line-height: 1.3;
    overflow-wrap: break-word;
}
.menu img{
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
    flex: 0 0 16px;
    margin-right: 6px;
}
/* Нечётный пункт - на всю ширину, чтобы не зияла пустая половина. */
.menu a.wide{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* ---- Блок персонажа: аватар по центру, снаряжение по бокам ----
   flex:1 у колонок и 1.25 у портрета делят ширину пропорционально,
   а не фиксированными пикселями — поэтому раскладка держится и на
   узком телефоне, и на планшете. min-width:0 обязателен, иначе
   содержимое слотов распирает колонку (как было с пунктами меню). */
.hero{
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin: 0 var(--gut) 8px;
}
.hero-side{
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.hero-portrait{
    flex: 1.25 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,
        var(--panel-hi) 0%,
        var(--panel) 48%,
        var(--panel-lo) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
    padding: 8px 4px;
}
.hero-portrait img{
    width: 100%;
    max-width: 170px;
    border-radius: 6px;
}
/* Слот снаряжения. Пустой слот отличается только рамкой и прочерком,
   чтобы пустые квадраты не выглядели поломками разметки.
   min-height:0 обязателен: без него квадрат с двухстрочным названием
   (например «Кожаные перчатки») не сжимается до общей высоты, и три
   слота в колонке выходят разными по высоте. */
.slot{
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px;
    text-align: center;
    background: linear-gradient(180deg,
        var(--panel-hi) 0%,
        var(--panel) 48%,
        var(--panel-lo) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
}
.slot img{
    width: 16px;
    height: 16px;
    opacity: .55;
}
.slot-name{
    font-size: 11px;
    line-height: 1.1;
    color: var(--text-dim);
}
.slot-item{
    font-size: 12px;
    line-height: 1.15;
    overflow-wrap: break-word;
}
.slot-none{
    color: #4C545F;
}
.hero-name{
    margin-top: 0;
}
/* Выбор аватара: миниатюры в ряд, выбранная обведена золотом. */
.hero-pick{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 var(--gut) 8px;
}
.hero-pick a{
    line-height: 0;
    padding: 4px;
    background: #14171C;
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.hero-pick a.on{
    border-color: var(--accent);
    background: #1A1E24;
}
.hero-pick img{
    width: 46px;
    height: auto;
    border-radius: 4px;
    opacity: .72;
}
.hero-pick a.on img{
    opacity: 1;
}

/* ---- Ник и уровень над аватаром ---- */
.hero-id{
    padding: 8px 9px 9px;
}
.hero-nick{
    font-size: 17px;
    line-height: 1.2;
    word-wrap: break-word;
}
.hero-lvl{
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 3px;
}
/* ---- Список навыков в профиле ---- */
.skill-list{
    margin: 0 var(--gut) 8px;
    padding: 6px;
    background: linear-gradient(180deg,
        var(--panel-hi) 0%,
        var(--panel) 48%,
        var(--panel-lo) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
}
.skill-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 8px;
    padding: 6px 7px;
    margin-bottom: 5px;
    background: #14171C;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.skill-row:last-child{margin-bottom: 0}
.skill-title{
    flex: 1 1 auto;
    min-width: 0;
}
.skill-val{
    color: var(--accent);
    font-weight: bold;
    font-size: 13px;
}
.skill-eff{
    flex: 1 1 100%;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.25;
}
/* ---- Кнопка-справка: что за что отвечает ---- */
.train-helpbar{
    margin: 0 var(--gut) 8px;
}
.train-helpbtn{
    display: block;
    width: 100%;
    padding: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    color: var(--accent);
    background: linear-gradient(180deg, #262D37 0%, #1C2128 100%);
    border: 1px solid var(--line-hi);
    border-radius: var(--rad);
    cursor: pointer;
}
.train-helpbtn:active{
    background: #1A1F25;
}
.train-help{
    display: none;
}
.train-help.open{
    display: block;
}
.train-help-row{
    font-size: 12px;
    line-height: 1.45;
    color: var(--text);
    margin-bottom: 6px;
}
.train-help-row:last-child{
    margin-bottom: 0;
}
.train-help-row b{
    color: var(--accent);
}

/* ---- Карточки навыков ----
   Заливки нет: тонкая рамка на фоне страницы. Внутри четыре строки -
   иконка с названием и уровнем, шкала, эффект, низ с временем и кнопкой.
   Слева узкая полоска заливается по мере прокачки: прогресс читается
   сразу, не глядя на цифры. */
.train-grid{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 var(--gut) 10px;
}
.tc{
    position: relative;
    box-sizing: border-box;
    padding: 10px 11px 9px 15px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 9px;
    overflow: hidden;
}
.tc-busy{
    border-color: #7A4A1E;
}
.tc-max{
    border-color: #33432F;
}
/* Полоска прогресса по левому краю карточки */
.tc-stripe{
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    background: linear-gradient(180deg, #8F5220, var(--accent));
    border-radius: 0 2px 2px 0;
    min-height: 2px;
    transition: height .35s ease;
}
.tc-inner{
    position: relative;
}
.tc-head{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Иконка в квадратной подложке - задаёт левый край строки */
.tc-ico{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #171B21;
    border: 1px solid #23282F;
}
.tc-ico img{
    opacity: .8;
}
.tc-name{
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #B6BEC8;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tc-lvl{
    margin-left: auto;
    white-space: nowrap;
    line-height: 1;
}
.tc-lvl b{
    font-size: 19px;
    font-weight: bold;
    color: var(--accent);
    /* цифры одинаковой ширины: уровень не "прыгает" при смене */
    font-variant-numeric: tabular-nums;
}
.tc-lvl i{
    font-style: normal;
    font-size: 10px;
    color: #545D69;
}
.tc-bar{
    height: 4px;
    margin: 9px 0 7px;
    background: #171B21;
    border-radius: 2px;
    overflow: hidden;
}
.tc-bar i{
    display: block;
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #8F5220, var(--accent));
    transition: width .35s ease;
}
.tc-eff{
    font-size: 11px;
    color: #707A86;
    line-height: 1.3;
}
/* Низ карточки: время и цена слева, кнопка справа */
.tc-foot{
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
}
.tc-meta{
    font-size: 11px;
    color: #626B77;
    white-space: nowrap;
}
.tc-go{
    margin-left: auto;
    padding: 5px 12px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid #6B4320;
    color: var(--accent);
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    transition: background .15s ease;
}
.tc-go:active{
    background: #1E140C;
}
.tc-off{
    margin-left: auto;
    font-size: 11px;
    letter-spacing: .3px;
    color: #4A535E;
    white-space: nowrap;
}
/* Активная тренировка: точка, подпись, таймер */
.tc-run{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 9px;
}
/* Пульсирующая точка - видно, что здесь что-то происходит */
.tc-dot{
    flex: 0 0 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: tc-pulse 1.4s ease-in-out infinite;
}
@keyframes tc-pulse{
    0%,100%{ opacity: .25; transform: scale(.8); }
    50%    { opacity: 1;   transform: scale(1); }
}
.tc-runlabel{
    font-size: 11px;
    color: #9A8354;
}
.tc-timer{
    margin-left: auto;
    font-size: 15px;
    font-weight: bold;
    color: #E3CE9C;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* ---- Липкое нижнее меню ----
   position:fixed держит его у нижней кромки экрана при прокрутке.
   Рамка сверху - в стиле остальных блоков: тонкая, светлее фона.
   Пункты делят ширину поровну через flex:1, поэтому на любом телефоне
   меню одинаково ровное. */
.dock{
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    z-index: 100;
    width: 100%;
    max-width: 560px;
    display: flex;
    box-sizing: border-box;
    background: #12161B;
    border-top: 1px solid #2E343D;
    /* тень вверх, чтобы меню визуально лежало поверх страницы */
    box-shadow: 0 -4px 14px rgba(0,0,0,.55);
}
/* Активный пункт отмечен полоской сверху - как в игровых меню */
.dock-item{
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 7px 2px 8px;
    font-size: 10px;
    letter-spacing: .2px;
    color: #6E7783;
    text-decoration: none;
}
.dock-item img{
    width: 16px;
    height: 16px;
    opacity: .55;
    transition: opacity .15s ease;
}
.dock-item.on{
    color: var(--accent);
}
.dock-item.on img{
    opacity: 1;
}
.dock-item.on::before{
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 26px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: var(--accent);
}
.dock-item:active{
    background: #191E25;
}

.white{color: #FFFFFF;}
.center{text-align: center;}
.line{
    background: url(border.png) repeat-x;
    height: 5px;
}
.bar{
background: #22262C;
height: 5px;
}
.xp{
background: var(--accent);
height: 5px;
}
/* ===========================================================================
   Инвентарь, гильдии, босс
   Стили держатся тех же переменных, что и остальной интерфейс: утопленная
   рамка для кнопок-действий и приглушённый текст для неактивных слотов.
=========================================================================== */

/* Действие в строке инвентаря: однострочная «утопленная» кнопка. */
.inv-act{
    display: inline-block;
    margin-left: 6px;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line-hi);
    border-radius: 5px;
}
.inv-act:active{
    background: var(--panel-lo);
}
/* Место под кнопку, чтобы строки выравнивались в одну колонку. */
.inv-off{
    display: inline-block;
    width: 1px;
}

/* Карточка босса: полоса здоровья идёт во всю ширину, а под ней -
   таймер до конца события. */
.boss-wrap{
    padding: 10px 9px;
    margin: 0 var(--gut) 8px;
    border: 1px solid var(--line);
    border-radius: var(--rad);
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
}
.boss-name{
    font-size: 15px;
    color: var(--accent);
}
.boss-bar{
    position: relative;
    height: 16px;
    margin: 7px 0 5px;
    background: var(--recess);
    border: 1px solid var(--line-hi);
    border-radius: 4px;
    overflow: hidden;
}
.boss-bar i{
    display: block;
    height: 100%;
    background: linear-gradient(180deg, #D8453F 0%, #8E2622 100%);
    transition: width .3s ease;
}
.boss-bar span{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* Строка в рейтинге босса. */
.boss-row{
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 7px;
    margin-bottom: 4px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.boss-row.me{
    border-color: var(--accent);
}
.boss-place{
    flex: 0 0 26px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
}

/* Карточка гильдии. */
.guild-card{
    padding: 9px;
    margin-bottom: 8px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.guild-flag{
    display: inline-block;
    min-width: 26px;
    padding: 2px 7px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #10131A;
    border-radius: 4px;
}
.guild-stats{
    margin-top: 5px;
    font-size: 12px;
    color: var(--text-dim);
}

/* ===========================================================================
   Инвентарь: карточная сетка вместо списка строк
   Каждая вещь - карточка с иконкой, названием, бонусами и подсказкой
   "сильнее/слабее" относительно надетого. Смысл в том, чтобы игрок не
   сравнивал характеристики в уме.
=========================================================================== */
.inv-head{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    margin: 0 var(--gut) 10px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.inv-stats{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.inv-chip{
    font-size: 13px;
    color: var(--text);
}
.inv-chip i{
    font-style: normal;
    color: var(--text-dim);
    font-size: 11px;
}
.inv-cap{
    font-size: 11px;
    color: var(--text-dim);
    min-width: 110px;
}
.inv-cap b{color: var(--text)}

/* Тонкая полоса прогресса - используется и для HP, и для заполненности сумки. */
.hpbar{
    height: 4px;
    margin-top: 4px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 3px;
    overflow: hidden;
}
.hpbar i{
    display: block;
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease;
}

.inv-sec{
    margin: 0 var(--gut) 6px;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* ---- Шесть слотов экипировки ---- */
.inv-slots{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin: 0 var(--gut) 12px;
}
.inv-slot{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 5px;
    min-height: 84px;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.inv-slot.empty{
    background: var(--recess);
    border-style: dashed;
    border-color: var(--line-lo);
}
.inv-slot-ico{opacity: .7}
.inv-slot-name{
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
}
.inv-item{
    font-size: 12px;
    line-height: 1.2;
}
.inv-slot-bonus{
    font-size: 10px;
    line-height: 1.25;
    color: #7FA96B;
}
.inv-slot-hint{
    font-size: 10px;
    color: var(--accent);
    opacity: 0;
    transition: opacity .15s;
}
/* Подсказка «снять» появляется при наведении - на телефоне её не видно,
   поэтому действие всё равно доступно по тапу на сам слот. */
.inv-slot.has-item:active .inv-slot-hint{opacity: 1}

/* ---- Карточки предметов в сумке ---- */
.inv-grid{
    margin: 0 var(--gut) 10px;
}
.inv-card{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 9px;
    margin-bottom: 6px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-hi);
    border-radius: 7px;
}
.inv-card.gear{
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
}
.inv-card.use{
    border-left-color: #4E6B8A;
}
.inv-card-ico{
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.inv-card-main{
    flex: 1 1 auto;
    min-width: 0;
}
.inv-card-name{
    display: block;
    font-size: 13px;
    line-height: 1.2;
    overflow-wrap: break-word;
}
.inv-qty{
    color: var(--text-dim);
    font-size: 11px;
    margin-left: 4px;
}
.inv-bonus{
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #7FA96B;
}
/* Сравнение с надетым: зелёное «сильнее», красное «слабее». */
.inv-diff{
    margin-left: 6px;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.inv-diff.up{
    color: #5FD98A;
    background: rgba(95,217,138,.12);
}
.inv-diff.down{
    color: #E5484D;
    background: rgba(229,72,77,.12);
}
.inv-diff.eq{
    color: var(--text-dim);
    background: rgba(134,142,153,.12);
}
.inv-card-act{
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}
.inv-go{
    display: block;
    padding: 5px 10px;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    color: #10131A;
    background: var(--accent);
    border-radius: 5px;
}
.inv-sell{
    display: block;
    padding: 3px 8px;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dim);
    border: 1px solid var(--line);
    border-radius: 5px;
}
.inv-empty{
    padding: 16px 10px;
    font-size: 12px;
    text-align: center;
    color: var(--text-dim);
    background: var(--recess);
    border: 1px dashed var(--line-lo);
    border-radius: var(--rad);
}

/* ===========================================================================
   Гильдии
   Шапка-герой, карточки, вкладки и состав. Кнопки инвентаря (.inv-go,
   .gm-btn) переиспользованы, чтобы не заводить вторые стили.
=========================================================================== */
.guild-hero{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    margin: 0 var(--gut) 10px;
    background: linear-gradient(135deg, #1C2028 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.guild-hero-ico{
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 50%;
}
.guild-hero-txt{
    font-size: 15px;
    line-height: 1.35;
}
.guild-hero-txt small{
    color: var(--text-dim);
    font-size: 11px;
}

/* ---- Вкладки ---- */
.guild-tabs{
    display: flex;
    gap: 6px;
    margin: 0 var(--gut) 10px;
}
.gt{
    flex: 1 1 0;
    padding: 7px 6px;
    font-size: 12px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dim);
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.gt.on{
    color: var(--accent);
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border-color: var(--line-hi);
}

/* ---- Карточка гильдии ---- */
.guild-list{margin: 0 var(--gut)}
.guild-card{
    padding: 11px;
    margin: 0 var(--gut) 8px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.guild-card-top{
    display: flex;
    align-items: center;
    gap: 10px;
}
.guild-flag{
    flex: 0 0 auto;
    min-width: 42px;
    padding: 5px 8px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    color: #10131A;
    border-radius: 5px;
}
.guild-desc{
    margin-top: 7px;
    font-size: 11px;
    color: var(--text-dim);
}
.guild-bonuses{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.gb{
    font-size: 11px;
    color: var(--text-dim);
    padding: 3px 8px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.gb i{
    font-style: normal;
    color: #5FD98A;
}
.guild-prog{
    margin-top: 9px;
}
.guild-prog small{
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--text-dim);
}
.guild-card-act{
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}
.gs{
    padding: 5px 12px;
    font-size: 11px;
    text-decoration: none;
    color: #10131A;
    background: var(--accent);
    border-radius: 5px;
}
.gs.closed{
    color: var(--text-dim);
    background: var(--recess);
    border: 1px solid var(--line);
}

/* ---- Форма создания ---- */
.guild-form-note{
    margin: 0 var(--gut) 8px;
    font-size: 12px;
    color: var(--text-dim);
}
.guild-form{
    margin: 0 var(--gut);
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.guild-form label{
    display: block;
    margin: 9px 0 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-dim);
}
.guild-form label:first-child{margin-top: 0}
.guild-form input[type=text]{
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--text);
    background: var(--recess);
    border: 1px solid var(--line-hi);
    border-radius: 6px;
}
.guild-form input[type=submit]{
    margin-top: 14px;
    width: 100%;
    padding: 9px;
    border: none;
    cursor: pointer;
}

/* ---- Состав ---- */
.guild-roster{
    margin: 0 var(--gut) 10px;
}
.guild-member{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 5px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.gm-rank{
    flex: 0 0 62px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.gm-name{
    flex: 1 1 auto;
    font-size: 13px;
    text-decoration: none;
}
.gm-lvl{
    font-size: 10px;
    color: var(--text-dim);
}
.gm-btn{
    padding: 3px 8px;
    font-size: 10px;
    text-decoration: none;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--line-hi);
    border-radius: 4px;
}
.gm-btn.danger{
    color: #E5484D;
    border-color: rgba(229,72,77,.4);
}

/* ---- Лента событий ---- */
.guild-feed{
    margin: 0 var(--gut) 10px;
    padding: 9px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.gf-row{
    font-size: 11px;
    line-height: 1.5;
    color: var(--text);
}
.gf-time{
    color: var(--text-dim);
}

/* ---- Вклад ---- */
.guild-donate{
    margin: 0 var(--gut) 10px;
    padding: 11px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.guild-donate b{color: var(--accent)}
.guild-donate form{
    display: flex;
    gap: 8px;
    margin-top: 9px;
}
.guild-donate input[type=number]{
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 9px;
    font-size: 13px;
    color: var(--text);
    background: var(--recess);
    border: 1px solid var(--line-hi);
    border-radius: 5px;
}
.guild-colors{
    margin: 0 var(--gut) 8px;
}
.guild-empty{
    margin: 0 var(--gut);
    padding: 22px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--text);
    background: var(--panel);
    border: 1px dashed var(--line-hi);
    border-radius: var(--rad);
}
.guild-empty small{
    display: block;
    margin-top: 5px;
    color: var(--text-dim);
    font-size: 11px;
}

/* ===========================================================================
   Рейтинг героев
=========================================================================== */
.rank-tabs{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 var(--gut) 10px;
}
.rt{
    flex: 1 1 auto;
    padding: 6px 8px;
    font-size: 11px;
    text-align: center;
    text-decoration: none;
    color: var(--text-dim);
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
    white-space: nowrap;
}
.rt.on{
    color: var(--accent);
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border-color: var(--line-hi);
}
.rank-list{margin: 0 var(--gut)}
.rank-row{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    margin-bottom: 5px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.rank-row.top{
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border-color: var(--line-hi);
}
.rk-num{
    flex: 0 0 26px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}
.rk-name{
    flex: 1 1 auto;
    font-size: 13px;
    text-decoration: none;
    overflow-wrap: break-word;
}
.rk-guild{
    flex: 0 0 auto;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: bold;
    color: #10131A;
    border-radius: 3px;
}
.rk-val{
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: bold;
    color: var(--accent);
}
.rk-lvl{
    flex: 0 0 auto;
    font-size: 10px;
    color: var(--text-dim);
}

/* ===========================================================================
   Подсказки новичку на главной
=========================================================================== */
.hints{
    margin: 0 var(--gut) 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #1E222A 0%, var(--panel) 100%);
    border: 1px solid rgba(200,164,78,.3);
    border-left: 3px solid #C8A44E;
    border-radius: var(--rad);
}
.hints-title{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #C8A44E;
    margin-bottom: 6px;
}
.hint-row{
    font-size: 12px;
    line-height: 1.5;
    color: var(--text);
    padding: 3px 0;
    border-bottom: 1px solid var(--line-lo);
}
.hint-row:last-child{border-bottom: none}
.hint-row a{color: var(--accent)}

/* ===========================================================================
   Завоевание городов
=========================================================================== */
.king-list{margin: 0 var(--gut)}
.king-card{
    padding: 10px 11px;
    margin: 0 var(--gut) 8px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: var(--rad);
}
.king-card-top{
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}
.king-army{
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-dim);
}
.king-army b{color: var(--accent)}
.king-card-act{
    margin-top: 9px;
}
.king-card-act form{display: inline}

.king-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: 5px;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px;
}
.kr-name{
    flex: 0 0 74px;
    font-size: 12px;
}
.kr-have{font-size: 11px; color: var(--text-dim)}
.kr-have b{color: var(--text)}
.kr-cost{
    flex: 1 1 100%;
    font-size: 10px;
    color: var(--text-dim);
}
.kr-buy{
    padding: 3px 7px;
    font-size: 10px;
    text-decoration: none;
    color: #10131A;
    background: var(--accent);
    border-radius: 4px;
}
.king-total{
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-dim);
}
.king-total b{color: var(--accent)}

/* ===========================================================================
   Сцена глобального босса.

   Локация - фон сцены, босс - картинка поверх него. Поверх лежат угли,
   аура и полоса здоровья. Удар дёргает фигуру: сцена должна показать,
   что попадание было, не перезагружая страницу.
=========================================================================== */
.boss-scene{
    position: relative;
    width: 100%;
    /* Кадр 1536x1024 - ровно 3:2. Контейнер повторяет пропорции, иначе
       фон обрезался бы по высоте и босс «плавал» бы над кадром. */
    aspect-ratio: 3 / 2;
    margin: 0 0 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--rad);
    background: #07080A;
}
/* Старые браузеры без aspect-ratio: запасная высота, близкая к 3:2. */
@supports not (aspect-ratio: 3 / 2){
    .boss-scene{ height: 62vw; max-height: 340px; }
}
.boss-scene-bg{
    position: absolute;
    inset: 0;
    /* Локация в webp: PNG весил 2.8 МБ, webp - 0.36 МБ. Раньше рядом
       стоял второй слой с PNG на случай браузера без webp - теперь он
       удалён, поддержка webp есть везде. */
    background-image: url(/img/other/locationglobalboss.webp);
    background-size: cover;
    background-position: 50% 60%;
}
/* Затемнение сверху и снизу: делает текст поверх кадра читаемым
   и убирает резкую границу между картинкой и тёмной темой. */
.boss-scene::after{
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(8,10,13,.80) 0%, rgba(8,10,13,0) 34%),
        linear-gradient(0deg,   rgba(8,10,13,.88) 0%, rgba(8,10,13,0) 40%);
}

/* ---- Фигура босса ----
   Спрайт 1254x1254 почти полностью непрозрачный, поэтому размер задаётся
   по высоте кадра, а низ прижат к земле. */
.boss-fig{
    position: absolute;
    left: 50%;
    /* Прижат к середине кадра, а не к низу: локация светлая в середине
       (средняя яркость 96 против 30 по краям) - там фигура читается,
       внизу она уходила бы в тень и терялась. */
    bottom: 29%;
    height: 52%;
    width: auto;
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    /* Покачивание: босс не может стоять каменным. */
    animation: boss-breathe 4.5s ease-in-out infinite;
    will-change: transform;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,.75));
}
.boss-fig img{
    display: block;
    height: 100%;
    width: auto;
}

/* Аура за фигурой.
   Первый слой - тёмное пятно ровно по размеру фигуры. Локация в центре
   кадра светлее краёв (средняя яркость 40 против 25), а босс тёмный, и
   без этого силуэт местами сливается с подсвеченным участком. Пятно
   гарантирует читаемость при любом фоне, второй слой - свечение снизу. */
.boss-aura{
    position: absolute;
    left: 50%;
    bottom: 27%;
    width: 78%;
    height: 54%;
    transform: translateX(-50%);
    pointer-events: none;
    background:
        /* Пятно должно лежать по центру фигуры, а не по центру кадра.
           Фигура занимает 19-71% высоты сцены, то есть её середина - на
           45% высоты; блок ауры начинается с 19% и высотой 54%, поэтому
           нужная точка внутри него - 48%, а не 36%. Смещение вверх
           оставляло силуэт на светлом участке локации: разница с фоном
           падала с 19.7 до 10.7. */
        radial-gradient(ellipse 46% 54% at 50% 48%,
            rgba(6,8,11,.88) 0%, rgba(6,8,11,.60) 46%, rgba(6,8,11,.22) 68%,
            rgba(6,8,11,0) 84%),
        radial-gradient(ellipse 52% 46% at 50% 66%,
            rgba(222,139,58,.30) 0%, rgba(216,69,63,.14) 46%, rgba(0,0,0,0) 74%);
    animation: boss-aura 3.2s ease-in-out infinite;
}

/* ---- Удар: фигура дёргается ----
   Класс вешается на элемент из скрипта и снимается по animationend,
   иначе повторный удар не перезапустит анимацию. */
.boss-fig.hit{
    animation: boss-shake .42s cubic-bezier(.36,.07,.19,.97) 1;
}
.boss-fig.hit img{
    animation: boss-flash .42s ease-out 1;
}
/* Критический удар: дёргает сильнее и добавляет золотой отсвет. */
.boss-scene.crit .boss-fig.hit{
    animation: boss-shake-hard .5s cubic-bezier(.36,.07,.19,.97) 1;
}
.boss-scene.crit .boss-fig.hit img{
    animation: boss-flash-crit .5s ease-out 1;
}
/* Ответный удар босса: кадр коротко вздрагивает красным. */
.boss-scene.hurt{ animation: boss-hurt .34s ease-out 1; }
@keyframes boss-hurt{
    0%  { transform: translate(0,0); }
    25% { transform: translate(-4px,2px); }
    55% { transform: translate(3px,-2px); }
    100%{ transform: translate(0,0); }
}
/* Красная цифра урона, полученного игроком. */
.boss-dmg.back{
    color: #FF7A6B;
    text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 18px rgba(229,72,77,.9);
}

/* Вспышка по всей сцене в момент попадания. */
.boss-scene.flash::before{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    /* Как и у цифр урона: вне анимации слой обязан быть прозрачным,
       иначе красная вспышка зависала на кадре до следующего удара. */
    opacity: 0;
    background: radial-gradient(ellipse 60% 60% at 50% 55%,
        rgba(255,90,70,.34) 0%, rgba(255,90,70,0) 70%);
    animation: boss-scene-flash .34s ease-out 1 forwards;
}
.boss-scene.crit::before{
    background: radial-gradient(ellipse 60% 60% at 50% 55%,
        rgba(255,210,74,.42) 0%, rgba(255,210,74,0) 70%);
}

@keyframes boss-shake{
    0%  { transform: translateX(-50%) rotate(0deg); }
    15% { transform: translateX(calc(-50% - 13px)) rotate(-2.4deg); }
    32% { transform: translateX(calc(-50% + 10px)) rotate(2deg); }
    50% { transform: translateX(calc(-50% - 7px)) rotate(-1.4deg); }
    68% { transform: translateX(calc(-50% + 5px)) rotate(1deg); }
    85% { transform: translateX(calc(-50% - 2px)) rotate(-.4deg); }
    100%{ transform: translateX(-50%) rotate(0deg); }
}
@keyframes boss-shake-hard{
    0%  { transform: translateX(-50%) scale(1.04) rotate(0deg); }
    12% { transform: translateX(calc(-50% - 20px)) scale(1.02) rotate(-4deg); }
    27% { transform: translateX(calc(-50% + 17px)) scale(1.02) rotate(3.4deg); }
    43% { transform: translateX(calc(-50% - 12px)) scale(1) rotate(-2.4deg); }
    60% { transform: translateX(calc(-50% + 9px)) scale(1) rotate(1.6deg); }
    76% { transform: translateX(calc(-50% - 5px)) scale(1) rotate(-.8deg); }
    100%{ transform: translateX(-50%) scale(1) rotate(0deg); }
}
@keyframes boss-flash{
    0%  { filter: brightness(1); }
    22% { filter: brightness(1.85) saturate(1.3); }
    100%{ filter: brightness(1); }
}
@keyframes boss-flash-crit{
    0%  { filter: brightness(1); }
    18% { filter: brightness(2.4) saturate(1.5) drop-shadow(0 0 22px rgba(255,210,74,.85)); }
    100%{ filter: brightness(1); }
}
@keyframes boss-breathe{
    0%, 100%{ transform: translateX(-50%) scale(1); }
    50%    { transform: translateX(-50%) scale(1.022); }
}
@keyframes boss-aura{
    0%, 100%{ opacity: .55; }
    50%    { opacity: 1; }
}
@keyframes boss-scene-flash{
    0%  { opacity: 0; }
    18% { opacity: 1; }
    100%{ opacity: 0; }
}

/* ---- Угли: медленные искры, поднимающиеся снизу вверх ----
   Позиции заданы точками в span, а не псевдоэлементами: псевдоэлементов
   на контейнере всего два, а углей нужно больше. */
.boss-embers{
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}
.boss-embers span{
    position: absolute;
    bottom: 4%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #F0A24A;
    box-shadow: 0 0 6px rgba(240,162,74,.9);
    opacity: 0;
    animation: boss-ember linear infinite;
}
@keyframes boss-ember{
    0%  { opacity: 0; transform: translate3d(0, 0, 0) scale(.6); }
    12% { opacity: .85; }
    80% { opacity: .45; }
    100%{ opacity: 0; transform: translate3d(12px, -42vh, 0) scale(1.1); }
}

/* ---- Всплывающая цифра урона ---- */
.boss-dmg{
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 4;
    pointer-events: none;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 14px rgba(255,120,80,.55);
    /* opacity:0 вне анимации - обязателен. Анимация заканчивается на
       1.15s, а скрипт убирает элемент на 1.20s. Без нулевой прозрачности
       в эти 50 мс цифра возвращалась к базовому виду: без сдвига, стояла
       по центру и снова становилась видна. Это и был «дубль урона».
       fill-mode:forwards удерживает конечный кадр до удаления. */
    opacity: 0;
    animation: boss-dmg-float 1.15s ease-out 1 forwards;
}
.boss-dmg.crit{
    color: #FFD24A;
    text-shadow: 0 2px 8px rgba(0,0,0,.95), 0 0 20px rgba(255,210,74,.9);
}
@keyframes boss-dmg-float{
    0%  { opacity: 0; transform: translate(-50%, 16px) scale(.6); }
    18% { opacity: 1; transform: translate(-50%, -4px) scale(1.18); }
    40% { opacity: 1; transform: translate(-50%, -14px) scale(1); }
    100%{ opacity: 0; transform: translate(-50%, -62px) scale(.92); }
}

/* ---- Интерфейс поверх сцены ---- */
.boss-hud{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    padding: 22px 9px 8px;
}
.boss-hud .boss-name{
    text-align: center;
    font-size: 14px;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.boss-hud .boss-bar{
    margin: 5px 0 3px;
}
/* Обратный отсчёт - в правом верхнем углу сцены. */
.boss-timer{
    position: absolute;
    top: 7px;
    right: 8px;
    z-index: 5;
    padding: 2px 8px;
    font-size: 11px;
    color: #fff;
    background: rgba(10,12,15,.72);
    border: 1px solid var(--line-hi);
    border-radius: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
/* Плашка с уроном игрока поверх сцены. */
.boss-mine{
    position: absolute;
    top: 7px;
    left: 8px;
    z-index: 5;
    padding: 2px 8px;
    font-size: 11px;
    color: #fff;
    background: rgba(10,12,15,.72);
    border: 1px solid var(--line-hi);
    border-radius: 20px;
    text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.boss-mine b{ color: var(--accent); }

/* ---- Плашка «лежишь» поверх сцены ---- */
.boss-down{
    position: absolute;
    left: 50%;
    top: 44%;
    z-index: 6;
    transform: translate(-50%,-50%);
    padding: 8px 16px;
    text-align: center;
    font-size: 14px;
    color: #fff;
    background: rgba(24,8,10,.82);
    border: 1px solid #8E2622;
    border-radius: var(--rad);
    text-shadow: 0 1px 3px rgba(0,0,0,.9);
    pointer-events: none;
}
.boss-down small{
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: #E2B0AC;
}
.boss-down b{
    color: #FFD24A;
    font-size: 15px;
}

/* Полоса здоровья игрока - вторая, под полосой босса. */
.boss-bar-me{
    box-sizing: border-box;
    height: 14px;
    margin-top: 4px;
}
.boss-bar-me i{
    background: linear-gradient(180deg, #6FD79A 0%, #3E9C68 100%);
}

/* ---- Кнопка удара ---- */
/* Кнопка удара: широкая и низкая, красная, с иконкой меча.
   В игре кнопки оранжевые (--accent), но удар - действие, а не переход:
   красный читается как «здесь больно» и не путается с остальным меню.
   Кнопка идёт во всю ширину экрана, а полоска отступов по бокам убрана -
   иначе на телефоне она выглядит узкой полосой в поле. */
.boss-hit-btn{
    display: block;
    /* border-box обязателен: без него width:100% считается по содержимому,
       рамка добавляет ещё 2 пикселя, и на телефоне страница получает
       горизонтальную прокрутку на ровном месте. */
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 9px;
    padding: 7px 0;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: .5px;
    text-align: center;
    text-decoration: none;
    color: #FFF3F0;
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 48%),
        linear-gradient(180deg, #D9503F 0%, #B32B1E 52%, #7E1A12 100%);
    border: 1px solid #F0857A;
    border-radius: 10px;
    box-shadow:
        0 3px 0 #5E120C,
        0 6px 16px rgba(0,0,0,.55),
        0 0 18px rgba(200,48,32,.28);
    text-shadow: 0 1px 2px rgba(90,10,4,.9);
    cursor: pointer;
}
/* Иконка меча внутри кнопки: глубина тени убирается, иначе на
   прозрачном PNG остаётся тёмный прямоугольник. */
.boss-hit-btn img{
    vertical-align: -3px;
    margin-right: 3px;
    filter: drop-shadow(0 1px 1px rgba(60,6,2,.85));
}
.boss-hit-btn:hover{
    background:
        linear-gradient(180deg,
            rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 48%),
        linear-gradient(180deg, #E55C4A 0%, #C23325 52%, #8C1D14 100%);
}
.boss-hit-btn:active{
    transform: translateY(3px);
    box-shadow: 0 0 0 #5E120C, 0 3px 9px rgba(0,0,0,.55);
}
/* Пауза между ударами: кнопка гаснет, но остаётся на месте - чтобы
   страница не прыгала после каждого попадания. Красный при этом сходит,
   иначе "жди" выглядит как ещё одно приглашение бить. */
.boss-hit-btn[disabled]{
    background: linear-gradient(180deg, #3A4049 0%, #2A2F37 100%);
    border-color: var(--line-hi);
    box-shadow: 0 3px 0 #14171C, 0 4px 10px rgba(0,0,0,.45);
    color: var(--text-dim);
    text-shadow: none;
    cursor: default;
}

/* ---- Подиум по итогам боя ---- */
.podium{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    margin: 0 0 8px;
}
.pod-col{
    flex: 1 1 0;
    text-align: center;
    background: var(--recess);
    border: 1px solid var(--line);
    border-radius: 6px 6px 0 0;
    padding: 6px 4px 5px;
}
.pod-place{
    font-size: 12px;
    color: var(--text-dim);
}
.pod-name{
    font-size: 12px;
    color: var(--accent);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pod-reward{
    font-size: 11px;
    color: var(--text-dim);
}
/* Второе место ниже первого, третье ниже второго - порядок виден по высоте. */
.pod-1{ flex: 1.18 1 0; border-color: #C9973F; background: linear-gradient(180deg, #2A2317 0%, var(--recess) 100%); }
.pod-2{ flex: 1.05 1 0; border-color: #8A9199; }
.pod-3{ flex: 1    1 0; border-color: #7A5A3C; }
.pod-me{ box-shadow: 0 0 0 1px var(--accent) inset; }

/* ---- Рейтинг: место 1-3 подсвечено ---- */
.boss-row.p1 .boss-place{ color: #E8B457; font-weight: bold; }
.boss-row.p2 .boss-place{ color: #B6BEC7; font-weight: bold; }
.boss-row.p3 .boss-place{ color: #C08552; font-weight: bold; }

/* Без движения: дёрганье и угли отключаются, но полоса и цифры остаются -
   урон должен быть виден всегда. */
@media (prefers-reduced-motion: reduce){
    .boss-fig, .boss-aura{ animation: none; }
    .boss-scene.hurt{ animation: none; }
    .boss-embers{ display: none; }
    .boss-scene.flash::before{ animation: none; opacity: 0; }
}

/* Заглушка на месте сцены, когда босса нет: та же рамка и тот же фон. */
.boss-empty{
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    opacity: .9;
}

/* ---- Правила боя под сценой ----
   Отдельный блок, а не мелкий текст под кнопкой: про сердце пожирателя
   надо сказать так, чтобы это читалось, а не терялось в серой мелкоте. */
.boss-info{
    margin: 0 var(--gut) 10px;
    padding: 10px 11px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-left: 3px solid #E5484D;
    border-radius: var(--rad);
}
.boss-info-head{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
    font-size: 14px;
    color: #E5484D;
}
/* Иконка сердца: она с прозрачным фоном, поэтому ровно по центру строки. */
.boss-info-head img{
    flex: 0 0 auto;
    display: block;
}
.boss-info-text{
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-dim);
}
.boss-info-text b{
    color: var(--text);
}
.boss-info-sep{
    height: 1px;
    margin: 8px 0;
    background: var(--line);
}

/* Значок предмета в строке «добыча» и на подиуме: картинки бывают
   разной высоты, поэтому выравниваем по середине строки, а не по базу. */
.skill-val img, .pod-reward img{
    vertical-align: -2px;
}


/* ===========================================================================
   Боевая арена.

   Размеры и контраст взяты не на глаз:
     - панель #191D22 на фоне #0B0D10 даёт 1.15:1 - рамки не видно, и
       экран читается как любительский. Отсюда рамка у каждой карточки;
     - светлый текст на оранжевом даёт 1.62:1 и не читается. На оранжевом
       идёт только тёмный #0B0D10 (7.28:1);
     - кнопка выше 56px выглядит неуклюже: первичная 48px, вторичная
       40px, иконочная 44x44 (минимум Apple HIG);
     - на экране должен быть ОДИН акцентный элемент, иначе всё сливается
       в одно оранжевое пятно.
=========================================================================== */

/* Кнопка: 48px основная, тёмный текст на оранжевом, вдавленное
   состояние. Высота и радиусы - по шкале Material 3. */
.a-btn{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: 1px solid #2E343D;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out, filter 90ms ease-out;
}
/* Основная: оранжевый фон, тёмный текст. Градиент слабый - 4-6%,
   иначе выглядит как веб 2008 года. */
.a-btn.primary{
    color: #0B0D10;
    background: linear-gradient(180deg,#E99B4F 0%,#DE8B3A 100%);
    border-color: #C8782C;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 3px rgba(0,0,0,.4);
}
/* Вторичная: без заливки. Размер прежний - различие подаётся стилем,
   а не размером, иначе рядом стоящие кнопки выглядят несогласованно. */
.a-btn.secondary{ min-height: 40px; font-size: 14px; border-radius: 10px; }
.a-btn.quiet{
    min-height: 40px; font-size: 14px; border-color: transparent;
    color: var(--text-dim); box-shadow: none;
}
.a-btn:active{ transform: scale(.97); filter: brightness(.92); box-shadow: none; }
.a-btn[disabled]{
    color: #5A626D; border-color: #232830; background: transparent;
    pointer-events: none;
}
.a-btn img{ flex: 0 0 auto; }
.a-btn-full{ width: 100%; }

/* Иконочная кнопка 44x44 - палец должен попасть без прицеливания. */
.a-icon{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    padding: 0;
    border-radius: 10px;
    color: var(--text-dim);
    background: transparent;
    border: 1px solid #2A3038;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out;
}
.a-icon:active{ transform: scale(.94); }
.a-icon.on{ color: #0B0D10; background: var(--accent); border-color: var(--accent); }

/* ---- Шапка ---- */
.arena-head{
    margin: 0 var(--gut) 8px;
    padding: 10px 12px;
    background: linear-gradient(180deg,#212630 0%,#191D22 100%);
    border: 1px solid #2A3038;
    border-radius: 12px;
}
.arena-head-title{
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 8px;
    font-size: 14px; color: var(--text);
}
/* Числа стоят в ряд и подписаны - без двоеточий, как в компактных
   списках Apple. Рейтинг - единственное, что должно бросаться в глаза. */
.arena-metrics{
    display: flex; gap: 6px;
}
.arena-metric{
    flex: 1 1 0;
    min-width: 0;
    padding: 5px 6px;
    text-align: center;
    background: #101317;
    border: 1px solid #232830;
    border-radius: 8px;
}
.arena-metric b{
    display: block; font-size: 15px; font-weight: 600; color: var(--text);
    line-height: 1.15;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-metric small{ display: block; font-size: 10px; color: #7D8692; }
.arena-metric.big b{ font-size: 17px; color: var(--accent); }
.arena-timer{
    margin-top: 8px;
    font-size: 11px; color: #7D8692;
}
.arena-timer b{ color: var(--text); font-weight: 600; }

/* ---- Обновление списка ---- */
.arena-refresh{
    display: flex; align-items: center; justify-content: flex-end;
    min-height: 34px;
    margin: 0 var(--gut) 8px;
}
.arena-refresh a,.arena-refresh span{
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: #7D8692; text-decoration: none;
}
.arena-refresh a:active{ color: var(--text); }

/* ---- Карточка соперника ----
   5 карточек в одну колонку: по две в ряд при 420px выходит 188px, и
   трое цифры (рейтинг, шанс, награда) начинают толкаться. */
.arena-foe{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 var(--gut) 8px;
    padding: 9px 11px;
    background: linear-gradient(180deg,#212630 0%,#191D22 100%);
    border: 1px solid #2A3038;
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.arena-foe-ico{
    flex: 0 0 auto;
    width: 46px; height: 46px;
    border-radius: 8px;
    object-fit: cover;
    background: #101317;
    border: 1px solid #232830;
}
.arena-foe-main{ flex: 1 1 auto; min-width: 0; }
.arena-foe-name{
    display: flex; align-items: baseline; gap: 6px;
    margin-bottom: 2px;
}
.arena-foe-name b{
    font-size: 15px; font-weight: 600; color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.arena-foe-name span{ flex: 0 0 auto; font-size: 11px; color: #7D8692; }
/* Три величины - три ранга: рейтинг главный, шанс и награда вторичны. */
.arena-foe-nums{ display: flex; align-items: baseline; gap: 10px; }
.arena-foe-nums span{ font-size: 12px; color: #7D8692; }
.arena-foe-nums b{ font-weight: 600; color: var(--text); }
.arena-foe-nums .chance-good b{ color: #5FD98A; }
.arena-foe-nums .chance-mid b{ color: #E2B33A; }
.arena-foe-nums .chance-bad b{ color: #E5484D; }
.arena-foe-nums .reward b{ color: var(--accent); font-size: 13px; }
.arena-foe-tag{
    margin-top: 2px;
    font-size: 10px; color: var(--accent);
}
/* Кнопка «В бой» - узкая, без заливки: акцент на экране должен быть один. */
.arena-foe-go{
    box-sizing: border-box;
    flex: 0 0 auto;
    min-width: 62px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    font-size: 14px; font-weight: 600;
    text-decoration: none;
    color: var(--text);
    background: transparent;
    border: 1px solid #2E343D;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out, background 90ms ease-out;
}
.arena-foe-go:active{ transform: scale(.95); background: #212630; }

/* ---- Сундуки ---- */
.arena-chests{
    display: flex; gap: 8px;
    margin: 0 var(--gut) 8px;
}
.arena-chest{
    box-sizing: border-box;
    flex: 1 1 0;
    padding: 8px 4px 7px;
    text-align: center;
    background: #191D22;
    border: 1px solid #2A3038;
    border-radius: 12px;
    text-decoration: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out;
}
.arena-chest:active{ transform: scale(.97); }
.arena-chest img{ display: block; margin: 0 auto 4px; height: 34px; width: auto; }
.arena-chest b{ display: block; font-size: 12px; color: var(--text); font-weight: 600; }
.arena-chest small{ display: block; font-size: 10px; color: #7D8692; }
/* Забрать можно - рамка и подпись меняются, но картинка та же. */
.arena-chest.ready{ border-color: var(--accent); background: #221B12; }
.arena-chest.ready small{ color: var(--accent); }
.arena-chest.done{ opacity: .45; }


/* ===========================================================================
   Окно боя
=========================================================================== */
.af-scene{
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-height: 224px;
    margin: 0 var(--gut) 8px;
    padding: 8px 10px 10px;
    border: 1px solid #2A3038;
    border-radius: 12px;
    /* Фон арены. Сверху тёмный скрим: центр кадра занят цифрами урона
       и надписью VS, и без затемнения они не читались бы на светлом. */
    background-image:
        linear-gradient(180deg, rgba(11,13,16,.72) 0%, rgba(11,13,16,0) 42%),
        url(/img/other/arena.webp);
    background-size: cover;
    background-position: 50% 55%;
    overflow: hidden;
}
.af-scene.shake{ animation: af-shake .26s ease-out 1; }
@keyframes af-shake{
    0%{ transform: translate(0,0); }
    25%{ transform: translate(-4px,2px); }
    60%{ transform: translate(3px,-2px); }
    100%{ transform: translate(0,0); }
}
.af-topbar{
    flex: 0 0 100%;
    display: grid;
    /* Сетка из трёх колонок вместо space-between: при разной длине
       ников space-between сдвигал середину, и «Раунд N» уезжал влево.
       Теперь центральная колонка auto, а боковые 1fr - надпись всегда
       стоит по середине, ники прижаты к краям. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 6px;
    font-size: 11px; color: #A9B2BD;
    margin-bottom: 4px;
}
.af-round{
    grid-column: 2;
    justify-self: center;
    color: var(--accent);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
    white-space: nowrap;
}
.af-topbar .af-nick{ grid-column: 3; justify-self: end; }
.af-topbar .af-nick:first-child{ grid-column: 1; justify-self: start; }
.af-nick{
    max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-fighter{
    display: flex; flex-direction: column; align-items: center;
    flex: 0 0 auto;
}
.af-fighter.right{ margin-left: auto; }
.af-vs{
    position: absolute;
    left: 50%; top: 58%;
    transform: translate(-50%,-50%);
    /* VS - не подпись, а знак: янтарный градиент тем же градиентом,
       что и полоса опыта в шапке, и две короткие линии по бокам.
       Никакой анимации - знак всегда один и тот же, мигание только
       отвлекало бы от ударов в центре кадра. */
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 17px; font-weight: 800; letter-spacing: .16em;
    line-height: 1;
    color: transparent;
    background: linear-gradient(180deg, #FFD694 0%, #DE8B3A 58%, #A9661A 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.75));
    pointer-events: none;
}
.af-vs::before,
.af-vs::after{
    content: "";
    width: 16px;
    height: 1px;
    background: linear-gradient(90deg, rgba(222,139,58,0), rgba(222,139,58,.8));
}
.af-vs::after{
    background: linear-gradient(90deg, rgba(222,139,58,.8), rgba(222,139,58,0));
}
/* Портрет ограничен по высоте: портреты 200x274, при width:104 каждый
   тянулся на 142px и раздувал сцену почти вдвое. */
.af-face{
    height: 108px; width: auto; max-width: 100%;
    border-radius: 8px;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,.6));
}
.af-fighter.lunge{ animation: af-lunge .32s ease-out 1; }
.af-fighter.right.lunge{ animation-name: af-lunge-r; }
.af-fighter.recoil{ animation: af-recoil .32s ease-out 1; }
.af-fighter.right.recoil{ animation-name: af-recoil-r; }
@keyframes af-lunge{
    0%{ transform: translateX(0); } 40%{ transform: translateX(8px) scale(1.03); }
    100%{ transform: translateX(0) scale(1); }
}
@keyframes af-lunge-r{
    0%{ transform: translateX(0); } 40%{ transform: translateX(-8px) scale(1.03); }
    100%{ transform: translateX(0) scale(1); }
}
@keyframes af-recoil{
    0%{ transform: translateX(0); } 35%{ transform: translateX(-6px); }
    70%{ transform: translateX(3px); } 100%{ transform: translateX(0); }
}
@keyframes af-recoil-r{
    0%{ transform: translateX(0); } 35%{ transform: translateX(6px); }
    70%{ transform: translateX(-3px); } 100%{ transform: translateX(0); }
}
.af-hpbar{
    position: relative;
    width: 104px; height: 13px;
    margin-top: 5px;
    background: #101317;
    border: 1px solid #2A3038;
    border-radius: 4px;
    overflow: hidden;
}
/* Две полосы: жёлтая «отстающая» под красной, иначе урон читался бы как
   мгновенное исчезновение половины здоровья. */
.af-hp-lag,.af-hp-fill{ position: absolute; left: 0; top: 0; bottom: 0; }
.af-hp-lag{ background: #E2B33A; }
.af-hp-fill{ background: linear-gradient(180deg,#D8453F 0%,#8E2622 100%); }
.af-hpbar span{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.9);
}
.af-rage{
    width: 104px; height: 3px; margin-top: 3px;
    background: #101317; border-radius: 2px; overflow: hidden;
}
.af-rage i{
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg,#8A6BD8,#C79BFF);
    transition: width .3s ease;
}

/* Плавающие цифры. Apple прямо предупреждает не выносить яркие
   движущиеся пятна на почти чёрном фоне - поэтому у цифр тёмная
   обводка, а разлёт по вертикали всего 40px. */
.af-floats{
    position: absolute; left: 0; right: 0; top: 38%;
    height: 52px; z-index: 5; pointer-events: none;
}
.af-num{
    position: absolute; left: 50%;
    font-size: 21px; font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px #0B0D10, 0 0 8px rgba(0,0,0,.9);
    animation: af-num 1s ease-out 1 forwards;
}
.af-num.crit{ color: #FFD24A; }
.af-num.miss{ color: #9AA3AF; font-size: 16px; }
.af-num.block{ color: #C6CFD9; }
@keyframes af-num{
    0%{ opacity: 0; transform: translate(-50%,10px) scale(.75); }
    22%{ opacity: 1; transform: translate(-50%,-3px) scale(1.1); }
    100%{ opacity: 0; transform: translate(-50%,-40px) scale(.95); }
}

/* ---- Управление: три иконки 44x44, скорости между ними ---- */
.af-controls{
    display: flex; align-items: center; gap: 8px;
    margin: 0 var(--gut) 8px;
}
.af-speed{
    display: inline-flex;
    border: 1px solid #2A3038;
    border-radius: 10px;
    overflow: hidden;
}
.af-speed a{
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 44px;
    font-size: 12px; text-decoration: none;
    color: #7D8692; background: #191D22;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.af-speed a+ a{ border-left: 1px solid #2A3038; }
.af-speed a.on{ color: #0B0D10; background: var(--accent); }
.af-spacer{ flex: 1 1 auto; }

/* ---- Лог ---- */
.af-log{ margin: 0 var(--gut) 8px; }
.af-log-row{ margin-bottom: 2px; font-size: 11px; color: #7D8692; }

/* ---- Итог: не выше 60% экрана, одна основная и одна вторая ---- */
.arena-verdict{
    box-sizing: border-box;
    margin: 0 var(--gut) 8px;
    padding: 14px 16px;
    max-height: 60vh;
    overflow-y: auto;
    text-align: center;
    background: linear-gradient(180deg,#212630 0%,#191D22 100%);
    border: 1px solid #2A3038;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.arena-verdict.win{ border-top: 2px solid #5FD98A; }
.arena-verdict.lose{ border-top: 2px solid #E5484D; }
.arena-verdict>b{
    display: block;
    font-size: 24px; font-weight: 700; letter-spacing: .08em;
}
.arena-verdict.win>b{ color: #5FD98A; }
.arena-verdict.lose>b{ color: #E5484D; }
.arena-verdict-vs{
    margin-top: 2px;
    font-size: 12px; color: #7D8692;
}
.arena-delta{
    margin-top: 6px;
    font-size: 17px; font-weight: 600;
}
.arena-delta.up{ color: #5FD98A; }
.arena-delta.down{ color: #E5484D; }
/* Награды одной строкой: числа не растягивают блок на пол-экрана. */
.arena-rewards{
    display: flex; justify-content: center; gap: 14px;
    margin-top: 10px;
    font-size: 13px; color: var(--text);
}
.arena-rewards span{ display: inline-flex; align-items: center; gap: 4px; }
.arena-verdict .a-btn{ margin-top: 12px; }
.arena-penalty{ margin-top: 8px; font-size: 11px; color: var(--accent); }
.arena-actions{ margin: 0 var(--gut) 8px; }

/* Текстовый повтор для устройств без анимаций. */
.af-text{
    display: none;
    margin: 0 var(--gut) 8px;
    padding: 9px 11px;
    background: #191D22;
    border: 1px solid #2A3038;
    border-radius: 8px;
    font-size: 12px;
}
.af-scene.static + .af-text{ display: block; }
.af-text-hp{ color: #7D8692; margin-bottom: 6px; }

/* Правила и подписи на странице арены. */
.arena-rules{ font-size: 12px; color: #7D8692; line-height: 1.5; }
.arena-rules b{ color: var(--text); }

@media (prefers-reduced-motion: reduce){
    .af-scene.shake, .af-fighter.lunge, .af-fighter.recoil{ animation: none; }
    .af-num{ animation: none; opacity: 1; }
    .af-hp-lag{ transition: none; }
    .a-btn, .a-icon, .arena-foe-go, .arena-chest{ transition: none; }
}

/* ---- Окно сундука ----
   Отдельная рамка вместо строки в тексте: по строке «+6 медалей» не
   понятно, что именно выпало и откуда. */
.arena-chestbox{
    box-sizing: border-box;
    margin: 0 var(--gut) 8px;
    padding: 14px 16px;
    text-align: center;
    background: linear-gradient(180deg,#212630 0%,#191D22 100%);
    border: 1px solid #2A3038;
    border-top: 2px solid var(--accent);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.arena-chestbox.win{ border-top-color: #5FD98A; }
.arena-chestbox-ico{ height: 56px; width: auto; display: block; margin: 0 auto 8px; }
.arena-chestbox>b{ display: block; font-size: 17px; font-weight: 600; color: var(--text); }
.arena-chestbox-need{ margin-top: 3px; font-size: 12px; color: #7D8692; }
.arena-chestbox-get{
    display: flex; align-items: center; justify-content: center; gap: 5px;
    margin: 10px 0;
    font-size: 20px; font-weight: 700; color: var(--accent);
}
.arena-chestbox-get span{ font-size: 12px; font-weight: 400; color: var(--text); }

/* ---- Сундуки: рамка при готовности видна сильнее ---- */
.arena-chest.ready{ border-color: var(--accent); background: #221B12; }
.arena-chest.ready small{ color: var(--accent); font-weight: 600; }

/* ---- Полосы здоровья: приглушённый красный ----
   Ярко-красная полоса рядом с красными числами урона перетягивала на
   себя внимание и выглядела как аварийная сигнализация. */
.af-hp-fill{ background: linear-gradient(180deg,#B4463F 0%,#7A2620 100%); }

/* ---- Панель итога появляется только после боя ----
   Сервер считает исход заранее, поэтому панель рендерилась сразу и
   игрок видел «ПОБЕДА» ещё до первого удара. Скрываем её и показываем
   из скрипта, когда бой доигран или нажат пропуск. Без скриптов
   панель всё равно видна - см. <noscript> ниже. */
.arena-verdict.hidden{ display: none; }
.arena-verdict{ border-top-width: 3px; }
.arena-verdict.win{ border-top-color: #5FD98A; }
.arena-verdict.lose{ border-top-color: #C4483E; }
.arena-verdict>b{ font-size: 22px; }
.arena-delta{ font-size: 15px; }

/* ---- Лог боя ----
   Строка разложена на четыре колонки: кто, что, сколько, раунд.
   Сплошной текст «ты удар на 226 (раунд 3)» приходилось читать подряд. */
.af-log{ margin: 0 var(--gut) 8px; }
.af-log-row{
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 9px;
    margin-bottom: 3px;
    font-size: 12px;
    background: #191D22;
    border: 1px solid #2A3038;
    border-radius: 6px;
}
.af-log-row.me{ background: #1B2028; border-color: #33404F; }
.af-log-who{
    flex: 0 0 62px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-log-row.foe .af-log-who{ color: #9AA3AF; font-weight: 400; }
.af-log-what{
    flex: 1 1 auto;
    color: #7D8692;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Урон выносим вправо цифрой - это то, на что смотрят в первую очередь. */
.af-log-num{
    flex: 0 0 auto;
    margin-left: auto;
    font-weight: 700; color: var(--text);
}
.af-log-round{
    flex: 0 0 18px;
    text-align: right;
    color: #6E7783; font-size: 10px;
}

/* ---- Скорость: ниже и аккуратнее ---- */
.af-speed{ display: inline-flex; border: 1px solid #2A3038; border-radius: 9px; overflow: hidden; }
.af-speed a{
    box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    font-size: 12px; text-decoration: none;
    color: #7D8692; background: #191D22;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.af-speed a+a{ border-left: 1px solid #2A3038; }
.af-speed a.on{ color: #0B0D10; background: var(--accent); font-weight: 600; }

/* ---- Пропуск ---- */
.af-controls{ display: flex; align-items: center; gap: 8px; margin: 0 var(--gut) 8px; }
.af-spacer{ flex: 1 1 auto; }
.af-controls .a-btn{ min-height: 40px; }

/* Иконки метрик в шапке арены: появляются, когда файлы будут на месте. */
.arena-metric{ position: relative; padding-top: 6px; }
.arena-metric img{
    display: block;
    height: 16px; width: auto;
    margin: 0 auto 3px;
}
.arena-metric.big{ padding-top: 8px; }
.arena-metric.big img{ height: 18px; }

/* Иконки, которые докидывает художник: пока файла нет, блок пустой
   и ничего не разъезжается. */
.arena-verdict-ico{
    display: block;
    height: 54px; width: auto;
    margin: 0 auto 6px;
}

/* ===========================================================================
   Правки по замечаниям к арене
=========================================================================== */

/* ---- Метрики в шапке ----
   Иконки были 16px и на тёмном фоне просто тонули; подписи наоборот
   занимали больше места, чем сами числа. */
.arena-metric{
    padding: 7px 4px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.arena-metric img{
    height: 24px; width: auto;
    margin: 0 0 3px;
}
.arena-metric b{
    font-size: 14px; line-height: 1.1;
    /* Рейтинг и лига длиннее остальных чисел, поэтому им чуть меньше
       кегль - иначе плитки разной ширины разъезжаются. */
}
.arena-metric b small{ font-size: 9px; color: #7D8692; font-weight: 400; }
.arena-metric small{ font-size: 9px; letter-spacing: .02em; }
.arena-metric.big img{ height: 26px; }
.arena-metric.big b{ font-size: 15px; }

/* ---- Обновление списка: маленькая капсула ---- */
.arena-refresh{ min-height: 28px; }
.arena-refresh-go{
    display: inline-flex; align-items: center;
    height: 28px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    border: 1px solid #2E343D;
    border-radius: 14px;          /* капсула по высоте */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out;
}
.arena-refresh-go:active{ transform: scale(.95); color: var(--text); }
.arena-refresh-wait{ font-size: 12px; color: #6E7783; }

/* ---- Пропустить: рамка с иконкой, не сплошная кнопка ---- */
.arena-skip{
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--text-dim);
    text-decoration: none;
    background: transparent;
    border: 1px solid #2E343D;
    border-radius: 17px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: transform 90ms ease-out;
}
.arena-skip:active{ transform: scale(.95); color: var(--text); }
.arena-skip img{ width: 16px; height: 16px; }

/* ---- Правила: четыре пункта вместо простыни с формулами ----
   Читать про Эло и дробные множители игрок не станет - значит, этого
   текста на странице быть не должно. Осталось то, что меняет решение. */
.arena-rules{ margin: 0 var(--gut) 10px; }
.arena-rule{
    font-size: 12px;
    line-height: 1.45;
    color: #7D8692;
    padding: 7px 10px;
    margin-bottom: 4px;
    background: #191D22;
    border: 1px solid #2A3038;
    border-radius: 8px;
}
.arena-rule b{
    display: block;
    font-size: 12px; font-weight: 600;
    color: var(--text);
    margin-bottom: 1px;
}

/* ---- Заголовок справки: по центру и тихо ----
   Это подсказка, а не заголовок раздела: тяжёлый верхний заголовок
   перетягивал внимание с самих соперников. */
.arena-rules-h{
    margin: 4px var(--gut) 6px;
    text-align: center;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6E7783;
}

/* ---- Награда из сундука ----
   Раньше картинки шли без размеров и разворачивались в натуральную
   величину - медаль 138x193 занимала пол-окна. Теперь размер задан
   явно, а строки выровнены по колонкам: иконка, число, подпись. */
.arena-chestbox{ padding: 16px 18px 14px; }
.arena-chestbox-ico{ height: 72px; }
.arena-chestbox>b{ margin-top: 2px; }
.arena-chestbox-need{ margin-top: 2px; }

.arena-loot{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 12px 0 14px;
    padding: 10px 12px;
    background: #101317;
    border: 1px solid #232830;
    border-radius: 10px;
}
.arena-loot-row{
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Иконка фиксированной высоты: колонки чисел и подписей встают ровно
   независимо от пропорций картинок. */
.arena-loot-row img{
    flex: 0 0 auto;
    width: 20px; height: 20px;
    object-fit: contain;
}
.arena-loot-row b{
    flex: 0 0 auto;
    min-width: 62px;
    text-align: right;
    font-size: 16px; font-weight: 700;
    color: var(--accent);
}
.arena-loot-row span{
    flex: 1 1 auto;
    text-align: left;
    font-size: 12px;
    color: #7D8692;
}

/* «Забрать» - капсула с контуром, внутри окна и без заливки:
   нажимать её и не обязательно, награда уже начислена. */
.a-btn-chest{
    /* inline-flex вместо flex: иначе кнопка растягивается на всю ширину
       окна и перестаёт быть капсулой. */
    display: inline-flex;
    margin: 0 auto;
    min-height: 34px;
    padding: 0 24px;
    border-radius: 17px;
    font-size: 13px;
    color: var(--text);
    background: transparent;
    border: 1px solid #3A4450;
}
.arena-chestbox{ text-align: center; }
.a-btn-chest:active{ transform: scale(.96); background: #212630; }

/* ---- Лестница ----
   Раньше тридцать отдельных рамок подряд: список из двадцати с лишним
   плашек читался тяжело и съедал пол-экрана. Теперь это одна панель, а
   строки разделяет тонкая линия. Рамку и цветной кант получают только
   первые три места и своя строка - ровно то, на что нужно смотреть.

   Иерархия слева направо: место, портрет, кто, сколько рейтинга.
   Портрет добавлен, чтобы список читался как игроки, а не как таблица.
=========================================================================== */
.arena-ladder{
    margin: 0 var(--gut) 8px;
    background: #191D22;
    border: 1px solid #2A3038;
    border-radius: 10px;
    overflow: hidden;
}
.arena-row{
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 10px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,.045);
}
.arena-row:last-child{ border-bottom: 0; }
.arena-row:hover{ background: #1F242B; }
/* Своя строка и подиум отмечены кантом слева, а не заливкой: коричневые
   подкрасы на графитовой теме читались как грязь. */
.arena-row.me{
    background: #1F1A13;
    box-shadow: inset 3px 0 0 var(--accent);
}
.arena-row.top1{ box-shadow: inset 3px 0 0 #8A6B2E; }
.arena-row.top2{ box-shadow: inset 3px 0 0 #454C55; }
.arena-row.top3{ box-shadow: inset 3px 0 0 #5E4530; }
.arena-row.me.top1{
    background: #221D13;
    box-shadow: inset 3px 0 0 var(--accent);
}
.arena-place{
    flex: 0 0 24px;
    text-align: center;
    font-size: 13px; font-weight: 700;
    color: #6E7783;
    font-variant-numeric: tabular-nums;
}
.arena-row.me   .arena-place{ color: var(--accent); }
.arena-row.top1 .arena-place{ color: #E8B457; }
.arena-row.top2 .arena-place{ color: #C2CAD2; }
.arena-row.top3 .arena-place{ color: #C08552; }
/* Портрет 200x274, поэтому тайл вертикальный - как в шапке. */
.arena-face{
    flex: 0 0 20px;
    width: 20px; height: 28px;
    object-fit: cover;
    object-position: 50% 0;
    border-radius: 4px;
    border: 1px solid #2A3038;
    background: var(--panel-lo);
}
.arena-lrow{
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}
.arena-lname{
    font-size: 13px; font-weight: 600;
    color: var(--text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Лига - метка: цвет ведёт от бронзы к легенде и на тёмном фоне
   читается цветом, а не текстом. */
.arena-ltag{
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 9px;
    border: 1px solid #2E343D;
    color: #8A93A0;
    white-space: nowrap;
}
.arena-ltag.silver  { color:#C2CAD2; border-color:#4A515A; }
.arena-ltag.gold    { color:#E8B457; border-color:#7A6224; }
.arena-ltag.platinum{ color:#9FE0D4; border-color:#2F6B60; }
.arena-ltag.diamond { color:#8FC7F5; border-color:#2E5B85; }
.arena-ltag.master  { color:#C89BF5; border-color:#5B3A80; }
.arena-ltag.legend  { color:#F0906B; border-color:#8A3F24; }
.arena-lrec{ font-size: 11px; color: #6E7783; white-space: nowrap; }
.arena-rate{
    flex: 0 0 auto;
    text-align: right;
    font-size: 13px; font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.arena-empty{ padding: 9px; text-align: center; font-size: 12px; color: #7D8692; }


/* «Забрать» в окне сундука: та же капсула, что и «Пропустить», но
   контур в тон награды - заметнее, при этом по-прежнему без заливки. */
/* Селектор из двух классов: `.a-btn.quiet` тоже весит два класса и
   объявлял border-color:transparent, поэтому одиночный .a-btn-chest
   проигрывал и контур пропадал. */
.a-btn.a-btn-chest{
    border: 1px solid var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 1px rgba(222,139,58,.16);
}
.a-btn.a-btn-chest:hover{ color:#EFA85F; border-color:#EFA85F; }
.a-btn.a-btn-chest:active{ background: rgba(222,139,58,.10); }

/* ---- Иконки в наградах итогового окна ----
   Без размера картинка разворачивалась в натуральную величину: медаль
   138x193 занимала половину окна. */
.arena-rewards img{
    width: 16px; height: 16px;
    vertical-align: -2px;
}


/* ===========================================================================
   Окно итога: заметно ниже и без «простыни».

   Раньше панель занимала почти пол-экрана: крупная эмблема, три блока
   награды во всю ширину и кнопки под ними. Теперь это компактная
   плашка: строка исхода, рейтинг одной строкой, награды в ряд, кнопки.
=========================================================================== */
.arena-verdict{
    padding: 12px 14px;
    border-radius: 14px;
    border-top-width: 2px;
}
.arena-verdict-ico{
    height: 40px; width: auto;
    margin: 0 auto 2px;
}
.arena-verdict>b{
    font-size: 20px;
    line-height: 1.1;
}
.arena-verdict-vs{ font-size: 12px; margin-top: 1px; }
/* Рейтинг: «1.234 → 1.256» одной строкой, подпись под ним. */
.arena-delta{
    margin-top: 5px;
    font-size: 16px;
    font-weight: 700;
}
/* Награды - компактной строкой, числа не раздуты. */
.arena-rewards{
    margin-top: 8px;
    gap: 12px;
    font-size: 13px;
}
.arena-penalty{ margin-top: 6px; font-size: 11px; }
.arena-verdict .a-btn{ margin-top: 10px; }
.arena-verdict .a-btn-full{ width: 100%; }

/* ===========================================================================
   Пещеры
   ---------------------------------------------------------------------------
   Иерархия страницы держит одну мысль: что сейчас важно - вверху. Если идёт
   вылазка, таймер занимает первый экран, а список пещер уходит под него и
   становится тише. Если вылазки нет - наоборот, вперёд выходит список.

   Материал тот же, что у .top и HUD: утопленная панель, та же рамка и
   радиус. Янтарная заливка полосы - та же, что у полосы опыта в шапке,
   чтобы прогресс на странице и прогресс в шапке читались одним цветом.
=========================================================================== */
.cave-head{ margin: 0 var(--gut) 8px; }
.cave-head-title{
    font-size: 15px; font-weight: 700; color: var(--text);
    letter-spacing: .01em;
}
.cave-head-sub{
    margin-top: 2px;
    font-size: 11px; color: var(--text-dim); line-height: 1.4;
}

/* ---- Сообщения: забрал награду / вернул досрочно ---- */
.cave-got{
    margin: 0 var(--gut) 8px;
    padding: 9px 10px;
    background: linear-gradient(180deg, #1B241A 0%, #151D15 100%);
    border: 1px solid #33502F; border-top-color: #4A7A43;
    border-radius: var(--rad);
    color: var(--text); font-size: 12px; line-height: 1.6;
}
.cave-got b{ color: #9FE0A8; }
.cave-got img{ vertical-align: -3px; margin: 0 2px 0 6px; }
.cave-got img:first-child{ margin-left: 0; }
.cave-got--stop{
    background: linear-gradient(180deg, #1C1F23 0%, #15171A 100%);
    border-color: #2A3038; border-top-color: #3A424C;
}
.cave-got--stop b{ color: var(--text-dim); }

/* ---- Идущая вылазка: главный блок ---- */
.cave-run{
    margin: 0 var(--gut) 8px;
    padding: 11px 12px 12px;
    background: linear-gradient(180deg, var(--recess-hi) 0%, var(--recess) 100%);
    border: 1px solid var(--line);
    border-top-color: var(--line-hi);
    border-radius: var(--rad);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.cave-run--ready{
    border-color: #4A7A43; border-top-color: #5E9A55;
    background: linear-gradient(180deg, #1A2318 0%, #141B14 100%);
}
.cave-run-title{
    display: flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 600; color: var(--text);
}
/* Номер пещеры - тот же «высеченный» маркер, что и в списке. */
.cave-mark,.cave-run-mark{
    flex: 0 0 auto;
    width: 19px; height: 19px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #2A3038 0%, #16191E 100%);
    border: 1px solid #000; border-radius: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
    font: 700 11px/1 var(--hud-font, Arial, sans-serif);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.cave-run-state{
    margin: 6px 0 9px;
    font-size: 12px; color: #9FE0A8;
}
/* Таймер: строка «часы, иконка, цифры». Крупным он был 26px и съедал
   треть блока - цифры таймера и так моноширинные, читаются и в 18px. */
.cave-run-timer{
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 5px 0 6px;
}
.cave-run-timer b{
    font: 700 18px/1 var(--hud-font, Arial, sans-serif);
    color: #FFD694;
    font-variant-numeric: tabular-nums;
    letter-spacing: .03em;
    text-shadow: 0 0 10px rgba(242,169,58,.30);
}
/* Иконка часов. Раньше ставилась фоном без background-size и в блок
   26px попадала только верхушка - теперь это обычная картинка. */
.cave-timer-ico{
    height: 16px;
    width: auto;
    flex: 0 0 auto;
    opacity: .85;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
.cave-run-track{
    position: relative;
    height: 7px; border-radius: 5px;
    background: linear-gradient(180deg,#0A0908 0%,#15120D 100%);
    border: 1px solid var(--line);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.85);
    overflow: hidden;
}
.cave-run-track > i{
    position: relative; display: block; height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg,#FFD694 0%,#F2A93A 44%,#9C5F14 100%);
    box-shadow: 0 0 10px rgba(242,169,58,.45), inset 0 1px 0 rgba(255,255,255,.5);
    transition: width .35s ease;
}
.cave-run-track > i::before{
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0));
}
.cave-run-hint{
    margin-top: 5px;
    font-size: 10px; color: var(--text-dim);
}
.cave-run-hint b{ color: var(--text); font-weight: 600; }
.cave-run-btns{ margin-top: 9px; display: flex; gap: 7px; flex-wrap: wrap; }
.cave-btn{
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 26px; padding: 5px 10px;
    background: linear-gradient(180deg, var(--panel-hi) 0%, var(--panel-lo) 100%);
    border: 1px solid var(--line); border-top-color: var(--line-hi);
    border-radius: 7px;
    color: var(--text); font-size: 12px; text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.cave-btn:active{ transform: translateY(1px); }
.cave-btn--claim{
    background: linear-gradient(180deg,#6FBF5A 0%,#3F8A33 100%);
    border-color: #2A5E22; border-top-color: #86D672;
    color: #0E1A0C; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30);
}
.cave-btn--warn{ color: var(--text-dim); }
.cave-btn--warn:hover{ color: #E08878; border-color: #6E3A32; }

/* ---- Список пещер ---- */
.cave-list{ margin: 0 var(--gut) 8px; }
.cave-card{
    margin-bottom: 7px; padding: 10px 11px 11px;
    background: #191D22;
    border: 1px solid #2A3038; border-radius: 10px;
}
.cave-card-top{ display: flex; align-items: center; gap: 7px; }
.cave-name{ font-size: 13px; font-weight: 600; color: var(--text); }
.cave-lock{
    margin-left: auto;
    font-size: 10px; color: #6E7783;
    padding: 1px 6px; border: 1px solid #2E343D; border-radius: 9px;
}
/* Закрытая пещера не гаснет целиком: её название остаётся читаемым,
   иначе игрок не поймёт, к чему идти. */
.cave-card--locked{ background: #16191D; border-color: #232830; }
.cave-card--locked .cave-name{ color: #8A93A0; }
.cave-card--locked .cave-mark{ color: #6E7783; }
.cave-desc{
    margin: 6px 0 8px;
    font-size: 11px; line-height: 1.45; color: var(--text-dim);
}
.cave-card--locked .cave-desc{ display: none; }



.cave-progress-bar > i{
    display: block; height: 100%; border-radius: 2px;
    background: linear-gradient(180deg,#9FE0D4 0%,#4E8C82 100%);
    transition: width .35s ease;
}
.cave-progress > span:last-child{
    flex: 0 0 auto; font-size: 10px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cave-why{
    padding: 7px 9px;
    background: #12151A; border: 1px solid #242932; border-radius: 7px;
    font-size: 11px; line-height: 1.45; color: #9A8F7E;
}
.cave-count{ margin-top: 7px; font-size: 10px; color: #6E7783; }

/* ---- Выбор длительности ----
   Три низкие капсулы в одну строку: игрок выбирает время, а не пещеру,
   а «≈N» сразу показывает, что длинная вылазка выгоднее. Высота 26px
   вместо прежних 57 - три кнопки больше не съедают полкарточки. */
.cave-go{ display: flex; gap: 6px; }
.cave-btn--go{
    flex: 1 1 0;
    flex-direction: row;
    gap: 4px;
    min-height: 24px;
    padding: 3px 6px;
    line-height: 1;      /* без этого строка распухает до 36px */
}
.cave-btn--go b{
    font-size: 12px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.cave-btn--go i{
    font-style: normal; font-size: 10px; color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.cave-btn--go i::before{ content: "≈"; }
.cave-btn--go:hover{ border-color: #7A6224; }

/* ---- Админка ---- */
.admin-panel{ display: flex; gap: 8px; margin: 0 var(--gut) 8px; }
.admin-stat{
    flex: 1 1 0; padding: 9px 6px; text-align: center;
    background: var(--recess); border: 1px solid var(--line); border-radius: 8px;
}
.admin-stat b{
    display: block; font-size: 18px; font-weight: 700; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.admin-stat small{ display: block; margin-top: 2px; font-size: 10px; color: var(--text-dim); }
.admin-field{ display: block; margin-bottom: 8px; font-size: 11px; color: var(--text-dim); }
.admin-field input{ width: 100%; max-width: 260px; margin-top: 3px; }

/* ---- Мини-кнопки и доход вылазки ----
   «Обновить» и «Вернуть досрочно» - служебные действия, а не призыв
   к действию: они должны уступать главному, таймеру. */
.cave-btn--mini{
    flex-direction: row;
    gap: 4px;
    min-height: 24px;
    padding: 4px 9px;
    font-size: 11px;
    line-height: 1;
}
/* Что реально нарыто за этот спуск. Показывается только пока идёт спуск:
   до старта цифр нет нигде. */
.cave-run-gain{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 6px 8px;
    background: #12151A;
    border: 1px solid #242932;
    border-radius: 7px;
}
.cave-run-gain > span{
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 600; color: var(--text);
    font-variant-numeric: tabular-nums;
}
.cave-run-gain img{ vertical-align: -3px; margin-right: 4px; }
.cave-run-gain > span:last-child{ color: #7FC4E8; }

/* ---- Узкий экран ---- */
@media (max-width:400px){
    .cave-run-timer b{ font-size: 16px; }
    .cave-go{ gap: 4px; }
    .cave-btn--go{ padding: 4px 3px; gap: 3px; }
    .cave-btn--go b{ font-size: 11px; }
    .cave-btn--go i{ font-size: 9px; }
}

/* Движение только на смену состояния, не для украшения */
@media (prefers-reduced-motion: reduce){
    .cave-run-track > i,
    .cave-progress-bar > i{ transition: none; }
}

/* ---- Фото пещеры в карточке ----
   Появляется само, как только в img/cave/ появится cave1.webp..cave3.webp:
   разметка проверяет файл на диске (caveImg) и не выводит блок вовсе,
   если картинки ещё нет. */
.cave-card{ overflow: hidden; }
/* Фото-шапка карточки.
   Кадр показывается целиком и в натуральной пропорции: высота по
   соотношению сторон исходника, без object-fit. Ни полей, ни обрезки -
   сцены у генератора выходят широкие (5.3:1), и любая попытка вписать
   их в фиксированную высоту либо обрезала бы кадр, либо оставила бы
   пустые полосы сверху и снизу. Пусть лучше кадр будет ниже. */
.cave-card-pic{
    margin: -10px -11px 9px;
    line-height: 0;
    background: #191D22;
    overflow: hidden;
}
.cave-card-pic img{
    display: block;
    width: 100%;
    height: auto;
}
/* Иконки модуля: маленькие, приглушены, чтобы не спорить с цифрами. */
.cave-ico{
    width: 12px; height: 12px;
    vertical-align: -2px; margin-right: 3px;
    opacity: .8;
}
.cave-ico--rare{ width: 13px; height: 13px; opacity: .95; }
/* Иконка в кнопке выбора длительности */
.cave-btn-ico{
    width: 12px; height: 12px;
    flex: 0 0 12px;
    opacity: .8;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.6));
}
@media (prefers-reduced-motion: reduce){
    .cave-btn:active{ transform: none; }
}