/**
 * new_css.css — оверрайд main.css для страниц, мигрированных в Standards Mode (DOCTYPE).
 * Подключать ПОСЛЕ main.css. Старые страницы в Quirks Mode не задеваются — main.css не меняется.
 *
 * В main.css есть несколько правил со значениями без px (height:228, padding:5),
 * которые работали в Quirks Mode, но игнорируются в Standards Mode.
 * Этот файл переопределяет их корректно.
 */

table.base2 td { padding: 2px 2px; }

.hint {
    padding-left: 5px;
    padding-right: 5px;
}

.imgview {
    height: 228px;
    width: 110px;
}

table.lbox td { padding: 5px; }

/* Inline <img> по умолчанию имеет vertical-align:baseline → внизу появляется gap под
   descender, даже если текста нет. Внутри <main> иконки персонажа/слотов не должны
   создавать таких зазоров. */
.it, .empt { vertical-align: top; }
main img { vertical-align: top; }


/* Прогресс-бары hp/мp/устал — раньше были <img>+png. Сейчас — <div> с серой outline 1px
   снаружи и вертикальным градиентом dark→bright→dark (пиксели из оригинальных png). */
.bar-wrap {
    position: relative;
    width: 232px;
    height: 12px;
    overflow: hidden;
    /* Внешняя 1px рамка (не считается в layout) — мягкий серый полутон. */
    outline: 1px solid #888;
    /* Имитация emptybar.png — светлый объёмный фон. */
    background: linear-gradient(to bottom, #a0a0a0 0%, #dcdcdc 50%, #a0a0a0 100%);
}
.bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
}
.bar-hp33 { background: linear-gradient(to bottom, #C84141 0%, #E85858 50%, #CE4444 100%); }
.bar-hp66 { background: linear-gradient(to bottom, #E5B040 0%, #F5C858 50%, #E8B444 100%); }
.bar-hp99 { background: linear-gradient(to bottom, #4DAA4D 0%, #34DC34 50%, #48B848 100%); }
.bar-mp   { background: linear-gradient(to bottom, #5757C5 0%, #8585EE 50%, #5E5ECC 100%); }
.bar-ust  { background: linear-gradient(to bottom, #2BACAC 0%, #6FC8C8 50%, #3AB2B2 100%); }

.bar-wrap .bar-l,
.bar-wrap .bar-r {
    position: absolute;
    top: 0;
    z-index: 2;
    font-size: 11px;
    line-height: 12px;
    color: #000;
}
.bar-wrap .bar-l { left: 5px; }
.bar-wrap .bar-r { right: 5px; }

/* Шапка с ником: фикс. ширина = ширине шкал, длинный логин не растягивает блок (overflow:visible). */
.nick-row { width: 232px; text-align: center; padding: 1px 0; white-space: nowrap; }
.nick-row img { vertical-align: middle; }

/* Подсветка модификаторов на которые есть зелёные камни ($ggren). Раньше — inline style на каждом <font>. */
.mf-bonus { color: olive; font-weight: normal; }

/* Мобильная версия (portrait, узкие экраны): полностью схлопываем главную таблицу
   через display:contents на всех уровнях (table → tbody → tr → td) — и каждый
   именованный блок становится прямым flex-item внутри <main>. Порядок управляется
   через order. Внешние таблицы (Ауры, Об игроке, Твинки, Подарки) уже прямые дети
   <main>, им просто назначаем order.

   Итоговый порядок:
     1  Персонаж + предметы (showpersout)
     2  Ауры
     3  Параметры
     4  Модификаторы
     5  Таблица "Персонаж" (Уровень/Побед/...)
     6  Status (лицензии, женат, травмы)
     7  Об игроке
     8  (зарезервировано)
     9  Подарки/Букеты/Открытки
    10  Админский блок (Твинки + наказания/IP-логи/dark forest) */
@media (max-width: 600px) and (orientation: portrait) {
    main { display: flex; flex-direction: column; }

    /* Минимальные отступы для компактного мобильного layout: H4 заголовок и таблицы
       внутри main (Персонаж/Параметры/Модификаторы/Об игроке/Ауры/Подарки/Админ)
       по умолчанию имеют ~1em margin сверху-снизу — на узком экране это съедает
       много пространства. Сокращаем до 4px между блоками. */
    main > h4 { margin: 0 0 4px; order: 0; }
    main table.base { margin: 4px 0; }

    main > table.inf-main,
    main > table.inf-main > tbody,
    main > table.inf-main > tbody > tr,
    main > table.inf-main > tbody > tr > td {
        display: contents;
    }

    /* .inf-pers — это <center>, inline-level: на mobile делаем явно block+100% */
    main .inf-pers   { order: 1; display: block; width: 100%; margin: 0; }
    main .inf-aures  { order: 2; }
    main .inf-params { order: 3; }
    main .inf-mods   { order: 4; }
    main .inf-stats  { order: 5; }
    main .inf-status { order: 6; }
    main .inf-about  { order: 7; }
    main .inf-gifts  { order: 9; }
    /* Админский блок (Твинки + lawkeepka/Айпи/dark forest) — в самый низ.
       max-width + overflow-x не дают широким таблицам IP-логов и часикам распирать
       страницу шире вьюпорта. */
    main .inf-admin {
        order: 10;
        max-width: 100%;
        overflow-x: auto;
    }
    main .inf-admin table { max-width: 100%; }

    /* width="300" — таблица лицензий, width="250" — таблица травм. На узком экране
       растягиваем на всю доступную ширину. */
    main table[width="300"],
    main table[width="250"] { width: 100% !important; }

    /* Компактный тултип (sh/sh2). На десктопе не трогаем. На мобиле:
       - max-width 92vw чтобы помещался в экран,
       - меньше шрифт и padding,
       - перенос длинных строк и таблиц без распирания. */
    .hint {
        max-width: 92vw;
        box-sizing: border-box;
        padding: 4px 6px;
        font-size: 11px;
        line-height: 1.25;
    }
    .hint table { width: auto !important; font-size: inherit !important; }
    .hint td    { padding: 1px 2px !important; word-break: break-word; }
    .hint small { font-size: inherit; }
}