/*
 * Классический скин: интерфейс оригинала поверх нашей же разметки.
 * Палитра снята пипеткой со скриншотов игры, а не подобрана на глаз.
 * Включается классом на корне, см. skin() в app.js.
 */
html.skin-classic {
  --bg: #1b1710;
  --panel: #615444;        /* тёплый металл панели */
  --panel-2: #6d5f4c;
  --line: #8f7734;         /* светлая кромка */
  --line-soft: #4a4034;
  --text: #efe6d2;
  --dim: #b8a98c;
  --rust: #d8a24a;
  --rust-dim: #8f7734;
  --blood: #eb927c;        /* тот самый крестик закрытия */
  --ok: #8fa04f;
  --zoom: 1;
  --figure: 1.35;
}

/*
 * Окно увеличивается ступенями: сцена под него уже экрана на ширину правой
 * колонки, и при плавном росте окно вылезало за её край.
 */
@media (min-width: 1400px) and (min-height: 720px) { html.skin-classic { --zoom: 1.15 } }
@media (min-width: 1600px) and (min-height: 800px) { html.skin-classic { --zoom: 1.3 } }
@media (min-width: 1800px) and (min-height: 900px) { html.skin-classic { --zoom: 1.45 } }

/*
 * Панели — настоящая рамка окна из клиента, а не нарисованная заново.
 *
 * В библиотеке она лежит девятью кусками с именами `frame_<столбец>_<строка>`,
 * то есть сетку задал сам клиент. Куски склеены в один лист, числа среза —
 * ширины и высоты угловых кусков: 16 / 12 / 10 / 14.
 */
html.skin-classic .box,
html.skin-classic .log,
html.skin-classic .presence,
html.skin-classic .panel,
html.skin-classic .sheetpanel,
html.skin-classic .deal {
  background: none;
  border: 0 solid transparent;
  border-width: 16px 12px 10px 14px;
  border-image: url(../tz/ui/frame.webp) 16 12 10 14 fill stretch;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

/* Шапка окна — полоса из трёх кусков, тянется только вбок. */
html.skin-classic .shophead,
html.skin-classic .presence h3,
html.skin-classic .queue h3 {
  background: none;
  border: 0 solid transparent;
  border-width: 0 16px;
  border-image: url(../tz/ui/header.webp) 0 16 0 14 fill stretch;
  box-shadow: none;
  color: #2b2318;
  text-shadow: 0 1px 0 #c9ad86;
  height: 20px;
  line-height: 20px;
  padding: 0 4px;
  margin: 0 0 6px;
  border-radius: 0;
}

/* Кнопка закрытия — красная, как в оригинале. */
html.skin-classic .close {
  background: linear-gradient(180deg, #c85a44 0%, #8f3a2c 100%);
  border: 1px solid #3a3125;
  color: #ffd9cf;
}

html.skin-classic button {
  background: linear-gradient(180deg, #7a6242 0%, #5c4a33 100%);
  border: 1px solid #3a3125;
  box-shadow: inset 0 1px 0 #a08a63;
  color: #f0e5cf;
}

html.skin-classic button:active { background: #4d3f2c }
html.skin-classic .tab.on,
html.skin-classic .langs button.on { border-color: var(--rust); color: #ffe1a3 }

/* Ячейки рюкзака: утопленные гнёзда, а не плоские квадраты. */
html.skin-classic .slot,
/*
 * Рюкзак оригинала: рамок у ячеек нет вовсе.
 *
 * Вещи лежат прямо на поле в свой натуральный размер — дробовик занимает
 * почти всю ширину, шприц едва заметен, — а количество белой цифрой в левом
 * нижнем углу. Квадратные гнёзда одинакового размера появились у нас от
 * бедности: пока иконки были наши и одинаковые, разницы не было видно.
 */
html.skin-classic .grid-bag {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  align-content: flex-start;
  gap: 10px 12px;
  padding: 4px 2px;
}

html.skin-classic .grid-bag > * {
  aspect-ratio: auto;
  width: auto;
  height: auto;
  max-width: 40%;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

html.skin-classic .bagcell .icon {
  max-width: none;
  max-height: 58px;
  width: auto;
  height: auto;
}

/* Количество — белым с обводкой, в левом нижнем углу, как в оригинале. */
html.skin-classic .bagcell i {
  right: auto;
  left: -2px;
  bottom: -4px;
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000;
}

html.skin-classic .bagcell.worn .icon {
  filter: drop-shadow(0 0 2px #d8a24a) drop-shadow(0 0 4px #d8a24a);
}

/* Фигурка стоит на подложке, как в оригинале. */
html.skin-classic .figure-stack {
  background: url(../tz/ui/backdrop.webp) center/cover no-repeat;
  border: 1px solid #3a3125;
  box-shadow: inset 0 0 0 1px #8f7734;
}

/* Поле боя: гексовая подложка вместо ровной сетки. */
html.skin-classic .tile { background: #4a4032; border-color: #2f2820 }
html.skin-classic .tile.reach { background: #6a5a3c }
html.skin-classic .tile.wall { background: #241e16; border-color: #241e16 }

html.skin-classic .scene-head h2 { color: #ffe1a3 }
html.skin-classic .log p b { color: #f4ead4 }

/*
 * Окно персонажа один в один.
 *
 * Размеры сняты с окна оригинала: границы колонок на 54, 372, 676 и 1075 —
 * значит окно 1021×510, колонки 318 / 298 / 399. Наша разметка совпала по
 * структуре (характеристики, фигурка, рюкзак), поэтому хватило чисел.
 *
 * Растягивать окно на весь экран нельзя: фигурка в оригинале 160×350, и в
 * растянутой панели она теряется посреди пустоты. Увеличиваем целиком, одним
 * масштабом: пропорции оригинала при этом не едут.
 */
html.skin-classic .sheetpanel {
  inset: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--zoom));
  /* 1021×510 — это нутро окна; рамка клиента добавляет 26 вширь и 26 ввысь. */
  width: 1047px;
  max-width: calc(100% - 16px);
  height: 536px;
  max-height: calc(100% - 16px);
  grid-template-columns: 318px 298px 399px;
  gap: 0;
  padding: 6px;
}

html.skin-classic .sheetpanel .col + .col {
  border-left: 1px solid #3a3125;
  padding-left: 8px;
  margin-left: 8px;
}

/* Фигурка стоит на подложке во всю колонку, как в оригинале. */
html.skin-classic .col.figure {
  background: url(../tz/ui/backdrop.webp) center/cover no-repeat;
  border: 1px solid #3a3125;
  box-shadow: inset 0 0 0 1px #8f7734;
  justify-content: center;
}

/* Холст фигурки родной, 160×350; растим его до высоты колонки. */
html.skin-classic .figure-stack {
  width: calc(160px * var(--figure));
  max-width: calc(160px * var(--figure));
  height: calc(350px * var(--figure));
  margin: auto;
  background: none;
  border: 0;
  box-shadow: none;
}

html.skin-classic .figure-stack .layer {
  height: auto;
  width: 100%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Крестик закрытия налезал на последнюю вкладку рюкзака. */
html.skin-classic .sheetpanel .tabs { padding-right: 34px }

/*
 * Круглый индикатор из правой колонки оригинала.
 *
 * В клиенте он нарисован векторно, растром лежала только фигурка внутри —
 * её и берём. Диск и три дуги собираются коническими градиентами: зелёная
 * слева это здоровье, голубая справа — очки действия, жёлтая снизу — вес.
 * Секторы разнесены так же, как в игре, между ними разрывы.
 */
html.skin-classic .dial {
  display: block;
  position: relative;
  width: 100%;
  max-width: 148px;
  aspect-ratio: 1;
  margin: 8px auto 2px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, #ffffff0d 0 1px, transparent 1px 7px),
    radial-gradient(circle at 50% 42%, #3f7fd6 0%, #24508f 52%, #11274b 100%);
  box-shadow: inset 0 0 12px #0b1b33, 0 1px 3px #0008;
}

html.skin-classic .dial .arc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  -webkit-mask: radial-gradient(closest-side, transparent 84%, #000 85%);
  mask: radial-gradient(closest-side, transparent 84%, #000 85%);
}

/* Каждая дуга живёт в своём секторе: за его краем прозрачно, иначе
   следующая дуга закрасила бы предыдущую по всему кольцу. */
html.skin-classic .dial .hp {
  background: conic-gradient(from 260deg,
    #6fdc4a 0 calc(var(--hp) * 100deg), #ffffff26 calc(var(--hp) * 100deg) 100deg, transparent 100deg);
}

html.skin-classic .dial .ap {
  background: conic-gradient(from 10deg,
    #57d8ff 0 calc(var(--ap) * 100deg), #ffffff26 calc(var(--ap) * 100deg) 100deg, transparent 100deg);
}

html.skin-classic .dial .load {
  background: conic-gradient(from 130deg,
    #ffd54a 0 calc(var(--load) * 100deg), #ffffff26 calc(var(--load) * 100deg) 100deg, transparent 100deg);
}

html.skin-classic .dial .body {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 66%;
  width: auto;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 6px #9fd0ff88);
}

/* Пояс: та же металлическая сетка, что на панелях окон. */
html.skin-classic .belt {
  background: url(../tz/ui/mesh.webp) repeat 0 0 / 64px, linear-gradient(180deg, #6d5f4c 0%, #574a3b 100%);
  border: 1px solid #3a3125;
  box-shadow: inset 0 1px 0 #9c8a68, inset 0 -1px 0 #2e2619;
  border-radius: 3px;
  padding: 3px;
  gap: 3px;
}

html.skin-classic .belt .bcell {
  background: #2b2419;
  border: 1px solid #1d1811;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #151109, inset -1px -1px 0 #7c6c50;
}

html.skin-classic .belt .bcell.on {
  border-color: #d8a24a;
  box-shadow: inset 0 0 0 1px #d8a24a;
}

/* Сетка надетого под индикатором — как в правой колонке оригинала. */
html.skin-classic .gear {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  margin-top: 6px;
}

html.skin-classic .gear .gcell {
  aspect-ratio: 1;
  background: #2b2419;
  border: 1px solid #1d1811;
  box-shadow: inset 1px 1px 0 #151109, inset -1px -1px 0 #7c6c50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

html.skin-classic .gear .gcell .icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1px;
}

html.skin-classic .gear .gcell small { display: none }

/*
 * Объекты локации — это здания, а не подписи в пустоте.
 *
 * Картинка ставится основанием в точку объекта, подпись уходит под неё,
 * булавка больше не нужна.
 */
html.skin-classic .marker {
  /* Метка — это button, а кнопки в скине с заливкой: здесь она не нужна. */
  background: none;
  border: 0;
  box-shadow: none;
  transform: translate(-50%, -100%);
  padding: 0;
  gap: 0;
}

html.skin-classic .marker .bld {
  display: block;
  width: auto;
  max-width: 170px;
  height: auto;
  filter: drop-shadow(0 3px 6px #0009);
}

html.skin-classic .marker .pin { display: none }

html.skin-classic .marker span {
  margin-top: -6px;
  background: #14120fd9;
  border: 1px solid #8f7734;
  border-radius: 2px;
}

/*
 * Оружие в руках: размеры под классическую фигурку.
 *
 * Отдельного рисунка «ствол в руке» в клиенте не существует: там брали
 * картинку самого предмета и клали её горизонтально на уровень бёдер.
 * Само расположение теперь общее, здесь только пропорции.
 */
html.skin-classic .figure-stack .held {
  width: 42%;
  max-width: none;
  filter: drop-shadow(0 2px 3px #000a);
}

html.skin-classic .figure-stack .held.heavy { width: 66% }

html.skin-classic .figure-stack .held.left { width: 42% }