/* Тема под оригинал: кремовый пергамент в золотой рамке, синие вкладки
   флажками, объёмные жёлтые кнопки, коричневый текст.

   Правило одно: фон страницы светлый и тёплый, а вся отрисованная графика
   (локации, персонажи, иконки) тёмная и насыщенная. Именно этот контраст
   и делает картинку читаемой на телефоне. */

:root{
  --sky:#a8d6f0;
  --paper:#fdf1d6;          /* панель */
  --paper2:#f6e3bb;         /* панель поглубже */
  --paper3:#efd39a;         /* заголовки и подложки */
  --gold:#d9a441;           /* рамка */
  --gold-dark:#a4761f;
  --ink:#4a3520;            /* основной текст */
  --ink-soft:#8a6f4c;       /* подписи */
  --blue:#3f9ad4;           /* вкладки */
  --blue-light:#8fd0f2;
  --blue-dark:#1f5f8c;
  --red:#c0392b;
  --green:#4b9b3f;
  --line:#e0c68f;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
svg{display:block}

body{
  background:var(--sky);
  background-image:linear-gradient(180deg,#bfe4f7 0,#a8d6f0 120px,#93c9e8 100%);
  color:var(--ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding-bottom:66px;
  overscroll-behavior:none;
}

/* Общая рамка панели: двойная, как в оригинале */
.panel{
  background:var(--paper);
  border:2px solid var(--gold);
  border-radius:12px;
  box-shadow:inset 0 0 0 2px #fff8e6, 0 2px 0 rgba(0,0,0,.12);
}

/* ---------- шапка ---------- */
.bar{
  position:sticky; top:0; z-index:5;
  background:var(--paper);
  border:2px solid var(--gold); border-top:0;
  border-radius:0 0 14px 14px;
  box-shadow:inset 0 0 0 2px #fff8e6, 0 3px 0 rgba(0,0,0,.15);
  padding:9px 12px 11px;
}
.who{display:flex;gap:10px;align-items:center}
.who-txt{flex:1;min-width:0}
.nick{font-weight:800;font-size:17px;letter-spacing:.2px;color:#6b3f14}
.sub{color:var(--ink-soft);font-size:12px;white-space:nowrap}
.sub b{color:var(--ink);font-weight:700}
.fac{font-weight:800}

.wallet{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.wallet b{
  background:linear-gradient(180deg,#fff3d2,var(--paper3));
  border:1.5px solid var(--gold-dark); border-radius:20px;
  padding:3px 10px; font-size:13px; font-weight:800; color:#6b3f14;
}

.gauges{display:flex;gap:7px;margin-top:8px}
.gauge{
  position:relative; flex:1; height:24px;
  background:#e7d3a6; border:1.5px solid var(--gold-dark); border-radius:6px;
  overflow:hidden; box-shadow:inset 0 2px 3px rgba(0,0,0,.14);
}
.gauge span{position:relative;z-index:1;display:flex;gap:5px;align-items:center;
  justify-content:center;height:100%;font-size:12px;font-weight:700;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.fill{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .4s}
.fill.e{background:linear-gradient(180deg,#8fd0f2,#3f9ad4)}
.fill.h{background:linear-gradient(180deg,#84d06a,#4b9b3f)}
.fill.c{background:linear-gradient(180deg,#f7c85a,#dd9a1c)}
.ic{font-style:normal}

.busy{margin-top:8px;background:#ffe2c2;border:1.5px solid #d98a3a;
  color:#8a4a12;border-radius:8px;padding:6px 10px;font-size:12px;
  text-align:center;font-weight:600}

/* ---------- общее ---------- */
main{padding:12px 12px 8px}

.card{
  background:var(--paper); border:2px solid var(--gold); border-radius:11px;
  box-shadow:inset 0 0 0 2px #fff8e6; padding:11px 12px; margin-bottom:9px;
}
.card.off{opacity:.5}
.card.mine{border-color:var(--red)}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.title{font-weight:700;color:#6b3f14}
.title.big{font-size:19px}
.desc{color:var(--ink-soft);font-size:13px;margin-top:3px}
.desc.big{font-size:15px;color:var(--ink);line-height:1.5}
.desc.dim{opacity:.75}
.desc.pad{margin:10px 2px}
.meta{color:var(--ink-soft);font-size:12px;margin-top:7px;display:flex;
  gap:10px;flex-wrap:wrap}
.meta.big{font-size:14px;margin:0;justify-content:center;font-weight:600}
.meta .risk{color:#b06a20}
.meta .jack{color:#c08a10;font-weight:700}
.good{color:var(--green);font-weight:700}
.bad{color:var(--red);font-weight:700}
/* Предупреждение: не ошибка, но правило, которое надо прочитать до того,
   как жать кнопку. Красный тут врал бы, а серый не заметили бы. */
.warn{color:var(--gold-dark);font-weight:700}
/* Карточка, по которой можно ткнуть. Без этого признака человек не знает,
   что строка топа куда-то ведёт, и просто не пробует: ровно так топ и
   выглядел мёртвым, хотя открывать там было что. */
.card.tap{cursor:pointer;position:relative;padding-right:30px}
.card.tap:active{transform:scale(.985)}
/* Стрелка рисуется СИМВОЛОМ, а не escape-последовательностью.
   Экранирование по дороге съелось, и вместо стрелки в топе печаталась
   буква A прямо поверх рейтинга. */
.card.tap::after{content:"›";position:absolute;right:11px;top:50%;
  transform:translateY(-50%);color:var(--ink-soft);font-size:16px;
  font-weight:700;opacity:.45;pointer-events:none}
/* Правая колонка строки это число: не сжимаем и не переносим. */
.card.tap > .row > .title{flex:none;white-space:nowrap}

/* Шкала, по которой можно ткнуть за объяснением. */
.gauge.tapable{cursor:pointer}
.gauge.tapable:active{filter:brightness(1.15)}

/* Поле клички на экране создания. Стоит перед кнопкой, потому что читают
   сверху вниз, а решение про имя принимают до «поехали». */
.pick-nick{margin:10px 0 6px;text-align:left}
.pick-nick .fld{margin:4px 0}

.sm{font-size:11px;font-weight:400}

/* Заголовок-баннер, как вывеска в оригинале */
.sect{
  position:relative; margin:14px auto 10px; max-width:82%;
  background:linear-gradient(180deg,#fff3d2,var(--paper3));
  border:2px solid var(--gold-dark); border-radius:20px;
  padding:5px 16px; text-align:center;
  font-weight:800; font-size:14px; color:#6b3f14; letter-spacing:.4px;
  box-shadow:0 2px 0 rgba(0,0,0,.12);
}

button{font:inherit;border:0;background:none;cursor:pointer;color:inherit}
.btn{
  background:linear-gradient(180deg,#ffd977,#e8a51f);
  border:2px solid #a4761f; border-bottom-width:3px; border-radius:9px;
  padding:7px 15px; font-weight:800; font-size:14px; color:#5a3408;
  text-shadow:0 1px 0 rgba(255,255,255,.5); white-space:nowrap;
}
.btn:active{transform:translateY(1px);border-bottom-width:2px}
.btn:disabled{background:linear-gradient(180deg,#e6dcc4,#cfc09c);
  border-color:#a89873;color:#8a7d63;text-shadow:none}
.btn.ghost{background:linear-gradient(180deg,#fff6e0,var(--paper2));color:#6b3f14}
.btn.wide{display:block;width:100%;text-align:center;margin-bottom:8px}
.back{color:var(--blue-dark);font-size:13px;font-weight:700;padding:2px 0 10px}

/* ---------- вкладки-флажки ---------- */
.tabs{
  position:fixed;bottom:0;left:0;right:0;display:flex;gap:4px;
  background:var(--paper2); border-top:2px solid var(--gold);
  padding:5px 5px calc(5px + env(safe-area-inset-bottom));
}
.tabs button{
  flex:1; padding:9px 0 11px; font-size:12px; font-weight:800; color:#eaf6ff;
  background:linear-gradient(180deg,var(--blue-light),var(--blue));
  border:2px solid var(--blue-dark); border-radius:9px 9px 4px 4px;
  text-shadow:0 1px 2px rgba(0,40,70,.55);
  clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%);
}
.tabs button.on{
  background:linear-gradient(180deg,#ffe28f,#e8a51f);
  border-color:#a4761f; color:#5a3408; text-shadow:0 1px 0 rgba(255,255,255,.5);
}

/* ---------- локации ---------- */
.loc{position:relative;border:2px solid var(--gold);border-radius:12px;
  overflow:hidden;margin-bottom:11px;background:var(--paper);
  box-shadow:inset 0 0 0 2px #fff8e6}
.loc.off{opacity:.55}
.loc-art{height:106px;overflow:hidden;border-bottom:2px solid var(--gold)}
.loc-art svg,.loc-art img{width:100%;height:106px;object-fit:cover;display:block}
.loc-cap{display:flex;justify-content:space-between;align-items:center;
  gap:10px;padding:9px 11px}
.loc-tag{font-size:12px;font-weight:700;color:#6b3f14;
  background:linear-gradient(180deg,#fff3d2,var(--paper3));
  border:1.5px solid var(--gold-dark);border-radius:20px;padding:3px 10px;
  white-space:nowrap}
.loc-tag.home{border-color:var(--red);color:var(--red)}

.banner{position:relative;border:2px solid var(--gold);border-radius:12px;
  overflow:hidden;margin-bottom:10px;box-shadow:inset 0 0 0 2px #fff8e6}
.banner svg,.banner img{width:100%;height:132px;object-fit:cover;display:block}
.banner-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 11px;
  background:linear-gradient(transparent,rgba(20,10,0,.82))}
.banner-cap .title{color:#fff6e0;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.banner-cap .desc{color:#f2ddb6}

/* ---------- персонажи в списках ---------- */
.who-row{display:flex;gap:10px;align-items:center;min-width:0}
.mini svg{border-radius:8px;border:2px solid var(--gold-dark)}
.place{width:22px;text-align:center;color:var(--ink-soft);font-weight:800}
.face{position:relative;overflow:hidden;border-radius:9px;flex:none;
  background:linear-gradient(180deg,#ffe9b4,#e7c987);
  border:2px solid var(--gold-dark)}
/* Лицо в квадрате.

   Раньше кадр растягивался на 290% высоты и прижимался к верху: у одних
   персонажей голова попадала целиком, у других срезалась макушка, потому
   что множитель один, а рост на картинках разный.

   object-fit сам подгоняет кадр под коробку, а object-position говорит,
   КУДА смотреть. Четыре процента сверху это ровно тот запас, который
   модель оставляет над головой. */
.face img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 4%;max-width:none}
/* Нарезанный кадр головы уже обрезан как надо: подгонять его ещё раз
   значит срезать макушку второй раз. */
.face.cut img{object-fit:contain;object-position:50% 50%}

.hero{display:flex;gap:12px;align-items:center;background:var(--paper);
  border:2px solid var(--gold);border-radius:12px;padding:12px;margin-bottom:12px;
  box-shadow:inset 0 0 0 2px #fff8e6}
.hero-ava{background:repeating-linear-gradient(-45deg,#f7d98f 0 10px,#f0cd79 10px 20px);
  border:2px solid var(--gold-dark);border-radius:10px;padding:4px}
.hero-body{display:block;width:auto;margin:0 auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.4))}

/* ---------- слоты и вещи ---------- */
.slots{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-bottom:10px}
.slot{background:var(--paper2);border:2px solid var(--gold-dark);border-radius:9px;
  padding:7px 9px;min-height:70px;display:flex;gap:8px;align-items:center}
.slot.full{background:linear-gradient(180deg,#fff3d2,#f2dda8)}
.slot-txt{min-width:0}
.slot-name{font-size:10px;color:var(--ink-soft);text-transform:uppercase;
  letter-spacing:.5px;font-weight:700}
.slot-item{font-weight:700;font-size:12.5px;margin-top:2px;line-height:1.2;
  color:#6b3f14}
.slot:not(.full) .slot-item{color:var(--ink-soft);font-weight:400}
.slot-bonus{font-size:10.5px;color:var(--green);margin-top:3px;font-weight:700}

.icon{width:42px;height:42px;flex:none;border-radius:8px;
  background:radial-gradient(circle at 50% 40%,#fff6e0,#eed9a6);
  border:2px solid var(--gold-dark);display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.icon img{width:100%;height:100%;object-fit:contain}
.icon.big{width:54px;height:54px}

.kit{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}
.kit-item{background:var(--paper);border:2px solid var(--gold);border-radius:10px;
  padding:8px 10px;font-weight:700;font-size:14px;display:flex;gap:10px;
  align-items:center;color:#6b3f14}
.kit-item .desc{display:block;font-weight:400;margin-top:2px}

/* ---------- выбор стороны ---------- */
.pickhead{margin-bottom:12px;text-align:center}
.sides{display:flex;gap:8px;margin-bottom:11px}
.side-btn{flex:1;padding:10px 8px;border-radius:10px;font-weight:800;font-size:15px;
  background:linear-gradient(180deg,#fff6e0,var(--paper2));
  border:2px solid var(--gold-dark);color:var(--ink-soft)}
.side-btn.on{border-color:var(--fc);color:#fff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc) 72%,#fff),var(--fc));
  text-shadow:0 1px 2px rgba(0,0,0,.35)}

.pick{position:relative;border:2px solid var(--fc);border-radius:13px;
  padding:12px;margin-bottom:13px;background:var(--paper);
  box-shadow:inset 0 0 0 2px #fff8e6}
.carousel{display:flex;align-items:center;gap:6px}
.hero-stage{flex:1;height:238px;display:flex;align-items:flex-end;
  justify-content:center;border-radius:10px;border:2px solid var(--gold-dark);
  background:repeating-linear-gradient(-45deg,#f7d98f 0 14px,#f0cd79 14px 28px)}
.hero-stage .hero-body{height:228px}
.arrow{width:42px;height:62px;border-radius:9px;font-size:26px;line-height:1;
  background:linear-gradient(180deg,#ffd977,#e8a51f);
  border:2px solid #a4761f;border-bottom-width:3px;color:#5a3408;font-weight:800}
.hero-cap{text-align:center;margin:9px 0 4px}
.pick-title{font-size:21px;font-weight:800;color:var(--fc)}
.pick-motto{color:var(--ink-soft);font-size:13px;font-style:italic;text-align:center;
  margin:6px 0}
.pick-perk{margin:9px 0;padding:7px 10px;border-radius:8px;background:var(--paper2);
  border:1.5px solid var(--gold-dark);font-size:13px;font-weight:700;
  text-align:center}
.pick .btn{background:linear-gradient(180deg,
  color-mix(in srgb,var(--fc) 45%,#fff),var(--fc));
  border-color:color-mix(in srgb,var(--fc) 60%,#000);color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.35);margin-top:9px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:7px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--fc)}

/* ---------- арена ---------- */
.arena{position:relative;height:300px;border:2px solid var(--gold);
  border-radius:12px;overflow:hidden;margin-bottom:9px;
  box-shadow:inset 0 0 0 2px #fff8e6}
.arena-bg{position:absolute;inset:0}
.arena-bg img,.arena-bg svg{width:100%;height:100%;object-fit:cover;
  filter:brightness(.82)}
.arena-floor{position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(transparent,rgba(30,16,0,.55))}
.arena.shake{animation:shake .42s}
@keyframes shake{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-7px,3px)}
  40%{transform:translate(7px,-3px)} 60%{transform:translate(-5px,-2px)}
  80%{transform:translate(5px,2px)}}

.fighter{position:absolute;bottom:8px;width:136px;text-align:center;
  will-change:transform}
.side-a{left:8px}
.side-d{right:8px}
/* Зеркалим САМИ КАДРЫ, а не .fig-body: на нём живёт покачивание
   и дыхание, и transform из анимации стёр бы отражение. */
.side-d .frames .frame{transform:scaleX(-1)}
.side-d .fig-body > .hero-body{transform:scaleX(-1)}
.fig-body{position:relative;display:block;width:100%}
.fig-name{font-size:12px;font-weight:800;margin:3px 0 4px;color:#fff6e0;
  text-shadow:0 1px 3px rgba(0,0,0,.95)}
.hpbar{height:9px;border-radius:5px;background:#5a2a22;
  border:1.5px solid #2a1108;overflow:hidden}
.hpbar i{display:block;height:100%;transition:width .35s;
  background:linear-gradient(180deg,#84d06a,#3f8b33)}

/* пыль из-под ног на разбеге */
.dust{position:absolute;left:50%;bottom:-4px;width:54px;height:16px;
  transform:translateX(-50%);opacity:0;pointer-events:none;
  background:radial-gradient(circle at 30% 60%,rgba(255,240,210,.8) 0 22%,transparent 24%),
    radial-gradient(circle at 62% 40%,rgba(255,240,210,.65) 0 18%,transparent 20%),
    radial-gradient(circle at 85% 65%,rgba(255,240,210,.5) 0 14%,transparent 16%)}

/* Кадры стопкой: перетекают один в другой вместо щелчка src */
/* Абсолютные кадры с автополями центрируются по своей же ширине,
   поэтому стойка и выпад стоят ровно на одном месте. */
.frames{position:relative;display:block;width:100%}
.frames .frame{position:absolute;left:0;right:0;bottom:0;margin:0 auto;
  width:auto;transform-origin:50% 100%}
/* Все кадры, кроме стойки, прозрачны и ждут своей очереди.
   Перечислять их поимённо нельзя: каждая новая поза потребовала бы правки
   ещё и здесь, и однажды её бы забыли, а кадр остался бы висеть поверх
   стойки навсегда. */
.frames .frame:not(.idle){opacity:0}


/* предмет в руке проходит дугу */
/* Предмет живёт НА БОЙЦЕ, а не внутри .fig-body: там кадры лежат
   абсолютом и перекрыли бы его. Крупный и поверх всего. */
.inhand{position:absolute;top:86px;right:-26px;z-index:6;
  transform-origin:75% 80%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}
.side-d .inhand{right:auto;left:-26px;transform:scaleX(-1)}
.proplabel{position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  z-index:7;white-space:nowrap;font-size:12px;font-weight:800;color:#5a3408;
  background:linear-gradient(180deg,#ffe9a8,#e8a51f);
  border:2px solid #a4761f;border-radius:14px;padding:2px 10px;
  box-shadow:0 2px 0 rgba(0,0,0,.3)}
.side-d .inhand{right:auto;left:-18px}
@keyframes arc{from{transform:rotate(var(--a0))} to{transform:rotate(var(--a1))}}
/* Как предмет ЛЕЖИТ в руке. Отдельный слой под внешним: внешний занят
   движением, и любой transform из стилей на нём стёрся бы анимацией. */
.propfit{width:100%;height:100%;transform-origin:50% 50%}
.propfit img,.propfit svg{width:100%;height:100%;display:block}

.propfly{position:absolute;z-index:6;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5))}

/* получающий */
/* Реакции бойцов живут в Web Animations API, в стилях им делать нечего:
   иначе класс и таймлайн дерутся за один и тот же transform. */
.down{transform:translateY(20px) rotate(76deg);opacity:.5;transition:transform .5s}
@keyframes hurt{
  0%{transform:translateX(0)} 30%{transform:translateX(var(--knock,14px))}
  60%{transform:translateX(calc(var(--knock,14px) * -.4))} 100%{transform:translateX(0)}}
@keyframes hurtcrit{
  0%{transform:translateX(0) scale(1) rotate(0)}
  25%{transform:translateX(calc(var(--knock,14px) * 1.8)) scale(.9) rotate(9deg)}
  60%{transform:translateX(calc(var(--knock,14px) * -.5)) scale(1.05) rotate(-4deg)}
  100%{transform:translateX(0) scale(1) rotate(0)}}
@keyframes dodgea{0%,100%{transform:translateX(0) rotate(0)}
  45%{transform:translateX(-26px) rotate(-12deg)}}
@keyframes dodged{0%,100%{transform:translateX(0) rotate(0)}
  45%{transform:translateX(26px) rotate(12deg)}}

/* эффекты */
.fx{position:absolute;inset:0;pointer-events:none}
.boom{position:absolute;width:84px;height:84px;animation:boom .45s ease-out forwards}
.boom.crit{width:112px;height:112px}
@keyframes boom{
  0%{opacity:0;transform:scale(.2) rotate(-25deg)}
  35%{opacity:1;transform:scale(1.15) rotate(6deg)}
  100%{opacity:0;transform:scale(1.3) rotate(14deg)}}
.puff{position:absolute;width:90px;height:70px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,255,255,0) 70%);
  animation:puff .85s ease-out forwards}
@keyframes puff{
  0%{opacity:0;transform:scale(.3)} 30%{opacity:1}
  100%{opacity:0;transform:scale(1.7) translateY(-16px)}}

/* Эффекты попадания под способ применения.

   Одна звёздочка на всё делала удар скалкой неотличимым от вспышки
   кольцевого света. Тут каждый способ договаривает то, чего не скажет
   движение: от болгарки летят искры, из термоса плещет, свет бьёт по
   глазам. */
.hitfx{position:absolute;width:90px;height:90px;pointer-events:none}
.hitfx i{position:absolute;left:50%;top:50%;display:block;
  transform-origin:0 50%;animation:shard .5s ease-out forwards;
  animation-delay:var(--t,0ms)}

.hitfx.sparks i{width:16px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,#fff3c4,#ff9d2e);
  box-shadow:0 0 6px rgba(255,180,60,.9)}
.hitfx.splash i{width:13px;height:8px;border-radius:50%;
  background:#7fc7de;box-shadow:0 0 5px rgba(120,200,225,.8)}

@keyframes shard{
  0%{opacity:0;transform:rotate(var(--a)) translateX(0) scale(.5)}
  20%{opacity:1}
  100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(.9)}}

/* Вспышка света: не осколки, а засветка всего кадра у цели. */
.hitfx.flash{width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.95),
    rgba(255,246,214,.5) 45%,rgba(255,255,255,0) 72%);
  animation:flash .5s ease-out forwards}
@keyframes flash{
  0%{opacity:0;transform:scale(.3)}
  18%{opacity:1;transform:scale(1.05)}
  100%{opacity:0;transform:scale(1.5)}}

/* Питомец. Живёт поверх бойцов, но под всплывающим уроном: зверь должен
   перекрывать ноги хозяина, а цифру урона перекрывать не должен. */
.petfx{position:absolute;z-index:7;width:84px;height:84px;
  margin-left:-42px;pointer-events:none}
/* Центрирование и разворот сидят на ВНУТРЕННЕМ слое, а не на самом
   .petfx. Внешний занят анимацией: она задаёт transform целиком, и любой
   transform из стилей на нём просто стирается первым же кадром. */
.petfx .petimg{width:100%;height:100%;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.petfx .petimg.flip{transform:scaleX(-1)}
.petfx img,.petfx svg{width:100%;height:100%;display:block}

.pop{position:absolute;transform:translateX(-50%);font-weight:900;font-size:22px;
  animation:pop 1.1s ease-out forwards;
  text-shadow:0 2px 0 #3a1f08,0 0 8px rgba(0,0,0,.7)}
.pop.dmg{color:#ffd0a0}
.pop.crit{color:#ffc23a;font-size:30px}
.pop.critword{color:#ffc23a;font-size:14px;letter-spacing:3px;animation-delay:.05s}
.pop.miss{color:#e6e0d0;font-size:14px}
@keyframes pop{
  0%{opacity:0;transform:translate(-50%,12px) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-8px) scale(1.16)}
  100%{opacity:0;transform:translate(-50%,-52px) scale(1)}}

.fight-line{background:var(--paper);border:2px solid var(--gold);border-radius:10px;
  box-shadow:inset 0 0 0 2px #fff8e6;padding:10px 12px;font-size:14px;
  min-height:44px;margin-bottom:9px;line-height:1.35;font-weight:600}

/* ---------- текстовый бой ---------- */
.duel{display:flex;align-items:center;justify-content:space-around;
  background:var(--paper);border:2px solid var(--gold);border-radius:12px;
  box-shadow:inset 0 0 0 2px #fff8e6;padding:12px;margin-bottom:9px}
.duel-side{text-align:center}
.duel-side .desc{margin-top:5px;color:#6b3f14;font-weight:700}
.big-ava svg{border-radius:10px;margin:0 auto;border:2px solid var(--gold-dark)}
.duel-vs{color:var(--red);font-weight:900;font-size:22px;letter-spacing:1px}

.verdict{text-align:center;font-weight:900;font-size:23px;margin:11px 0;
  letter-spacing:.5px;color:#6b3f14}
.verdict.ok{color:var(--green)}
.verdict.fail{color:var(--red)}
.verdict.jackpot{color:#c08a10;text-shadow:0 0 16px rgba(224,160,32,.55)}

.log{background:#fffaef;border:2px solid var(--gold);border-radius:10px;
  box-shadow:inset 0 0 0 2px #fff8e6;padding:9px 11px;font-size:13px;
  max-height:42vh;overflow:auto;margin-bottom:9px}
.log div{padding:5px 0;border-bottom:1px dashed var(--line)}
.log div:last-child{border:0}
.log .crit{color:#b06a10;font-weight:700}
.log .miss{color:var(--ink-soft)}

.toast{position:fixed;left:12px;right:12px;bottom:78px;z-index:9;
  background:var(--paper);border:2px solid var(--gold-dark);border-radius:10px;
  padding:9px 12px;font-size:13px;text-align:center;font-weight:700;
  box-shadow:0 3px 0 rgba(0,0,0,.18)}


/* ---------- характеристики соперника ---------- */
/* Характеристик стало семь плюс здоровье. В три колонки эта решётка
   вырастала на пол-экрана, поэтому колонки узкие и подписи короткие. */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  margin-top:9px}
.statcell{background:var(--paper2);border:1.5px solid var(--gold-dark);
  border-radius:7px;padding:4px 5px;font-size:10.5px;display:flex;
  justify-content:space-between;align-items:baseline;gap:4px}
.statcell span{color:var(--ink-soft)}
.statcell b{font-weight:800;color:#6b3f14}
.statcell i{font-style:normal;font-size:10.5px}
.wornrow{display:flex;gap:5px;margin-top:8px;flex-wrap:wrap}
.wornrow .icon{width:34px;height:34px}
.band-слабее{color:var(--green)}
.band-равный{color:var(--ink-soft)}
.band-сильнее{color:var(--red)}
.loc-tag.soon{color:var(--ink-soft);border-color:var(--line)}

/* ---------- розыск ---------- */
.heat{height:12px;border-radius:6px;background:#e7d3a6;margin:8px 0;
  border:1.5px solid var(--gold-dark);overflow:hidden;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.14)}
.heat i{display:block;height:100%;transition:width .4s;
  background:linear-gradient(90deg,#f7c85a,#c0392b)}

/* ---------- инвентарь ---------- */
.invbar{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:9px}
.invbar button{padding:5px 10px;border-radius:16px;font-size:12px;font-weight:700;
  background:linear-gradient(180deg,#fff6e0,var(--paper2));
  border:1.5px solid var(--gold-dark);color:var(--ink-soft)}
.invbar button.on{background:linear-gradient(180deg,#ffd977,#e8a51f);
  border-color:#a4761f;color:#5a3408}
.empty{text-align:center;color:var(--ink-soft);font-size:13px;padding:14px}


/* дыхание в простое: боец не должен быть статуей между ударами */
.fig-body{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{
  0%,100%{transform:translateY(0) scaleY(1)}
  50%{transform:translateY(-2px) scaleY(1.012)}}


/* ---------- значки валют ---------- */
.cur{width:17px;height:17px;vertical-align:-3px;display:inline-block;
  margin-right:2px}
.wallet .cur{width:19px;height:19px;vertical-align:-4px}

/* ---------- клуб ---------- */
.card.daily{border-color:var(--green);
  background:linear-gradient(180deg,#f2fbe8,var(--paper))}
.cups{display:flex;gap:10px;justify-content:center;margin:14px 0 6px}
.cupbox{position:relative;width:82px;height:92px;will-change:transform}
.cup{position:absolute;left:0;bottom:0;width:82px;height:82px;border-radius:12px;
  padding:6px;background:linear-gradient(180deg,#fff6e0,var(--paper2));
  border:2px solid var(--gold-dark);transition:transform .3s ease-out;
  pointer-events:none}
/* Стаканы кликабельны только в фазе выбора, и это видно глазом */
.cups.pick .cupbox{cursor:pointer}
.cups.pick .cup{animation:cupwait 1.1s ease-in-out infinite alternate}
.cups.pick .cupbox:active .cup{transform:translateY(3px)}
@keyframes cupwait{from{box-shadow:0 0 0 0 rgba(216,85,42,0)}
  to{box-shadow:0 0 0 4px rgba(216,85,42,.35)}}
.cupbox.up .cup{transform:translateY(-34px) rotate(-8deg)}
.cupbox.lucky .cup{border-color:var(--green);
  background:linear-gradient(180deg,#e8f8dd,#cdeab8)}
.cupbox.hit .cup{border-color:var(--green);border-width:3px}
.cupbox.miss .cup{border-color:var(--red)}
/* Шарик лежит ПОД стаканом и виден, только когда стакан поднят */
.ball{position:absolute;left:50%;bottom:6px;width:24px;height:24px;
  margin-left:-12px;border-radius:50%;opacity:0;transition:opacity .2s .18s;
  background:radial-gradient(circle at 35% 30%,#fff,#d8552a 70%);
  border:2px solid #14171c}
.cupbox.lucky .ball{opacity:1}
.cupline{text-align:center;font-size:13px;font-weight:700;margin-top:8px;
  min-height:20px;color:var(--ink-soft)}


/* ---------- стенка ---------- */
.card.wall{border-color:var(--blue-dark);
  background:linear-gradient(180deg,#e6f3fb,var(--paper))}
.card.wall .meta span{background:var(--paper2);border:1px solid var(--line);
  border-radius:12px;padding:2px 8px}


/* ---------- забег ----------

   Собака бежит ПО СВОЕЙ дорожке, а не поверх общей картинки. Раньше под
   всеми шестью лежало одно полотно, и линии на нём не совпадали с рядами:
   визуально собаки ехали по фону.

   Теперь у каждой дорожки своя полоса песка, повторяющаяся по ширине, а
   трибуны это отдельная лента сверху. И бегут не иконки, а модельки: у
   иконки не видно ног, а без ног бег не читается. */
.track{position:relative;border:2px solid var(--gold-dark);border-radius:10px;
  margin-bottom:10px;overflow:hidden;background:#e2c88c}

.stands{height:54px;overflow:hidden;position:relative}
.stands .scene{width:100%;height:100%;object-fit:cover;display:block}

.lane{position:relative;height:52px;display:flex;align-items:center;
  overflow:hidden}
.lane-bg{position:absolute;inset:0;z-index:0}
.lane-bg .scene{width:100%;height:100%;object-fit:cover;display:block}
.lane span{position:absolute;left:8px;z-index:2;font-size:11px;
  font-weight:800;color:#3d2a0e;
  text-shadow:0 1px 0 rgba(255,255,255,.8)}

.runner{position:relative;z-index:1;margin-left:52px;transform:translateX(0);
  will-change:transform;--bob:300ms}
.runner .hero-body{height:42px;width:auto;display:block;
  transform-origin:52% 92%}
.runner .frames{height:42px;width:56px;transform-origin:52% 92%}
.runner .frames .frame{height:42px;width:auto}

/* Галоп.

   Раньше собака просто дрожала на месте: анимация меняла только высоту и
   наклон, и получалось не «бежит», а «трясётся».

   Настоящий галоп это четыре фазы, и главная из них СЖАТИЕ. Собака
   группируется (тело короче и ниже), потом выбрасывается вперёд (тело
   длиннее и выше), приземляется на передние, отталкивается. Меняем
   поэтому не только сдвиг, но и пропорции: scaleX вместе с scaleY дают ту
   самую волну по корпусу, без которой бег не читается ни у одной
   четвероногой модели. */
/* На дорожке кадры ЧЕРЕДУЮТСЯ, а не только качаются.

   Squash-and-stretch одной картинки давал волну по корпусу, но лапы на ней
   оставались в одном положении. Второй кадр с полным галопом и мигание
   между ними это и есть бег: две позы, переключаемые шагами, ровно как в
   рисованной мультипликации.

   Качание оставлено поверх: оно добавляет вес, которого двум кадрам не
   хватает. */
.lane.go .runner .frames .frame.idle{
  animation:swapA var(--bob) steps(1, end) infinite}
.lane.go .runner .frames .frame.run{
  animation:swapB var(--bob) steps(1, end) infinite}
@keyframes swapA{0%,49%{opacity:1} 50%,100%{opacity:0}}
@keyframes swapB{0%,49%{opacity:0} 50%,100%{opacity:1}}

.lane.go .runner .frames{animation:gallop var(--bob) linear infinite}
.lane.go .runner > .hero-body{animation:gallop var(--bob) linear infinite}
@keyframes gallop{
  /* группировка: собрался, ниже и короче */
  0%   {transform:translateY(2px)  rotate(-2deg) scale(.94, .96)}
  /* толчок задними: вытянулся вперёд и вверх */
  25%  {transform:translateY(-9px) rotate(-9deg) scale(1.08, .94)}
  /* полёт: вытянут в струну */
  45%  {transform:translateY(-11px) rotate(-6deg) scale(1.10, .92)}
  /* приземление на передние: клюнул носом */
  70%  {transform:translateY(-1px) rotate(4deg)  scale(1.02, 1.00)}
  /* подбор задних под себя */
  88%  {transform:translateY(3px)  rotate(1deg)  scale(.92, 1.04)}
  100% {transform:translateY(2px)  rotate(-2deg) scale(.94, .96)}
}

/* Тень под лапами живёт своим ритмом: в полёте её почти нет, на
   приземлении она резко расплывается. Без неё галоп смотрится как
   плавание в воздухе. */
.runner::after{content:"";position:absolute;left:50%;bottom:1px;
  width:26px;height:6px;margin-left:-13px;border-radius:50%;
  background:rgba(70,50,20,.35);z-index:-1}
.lane.go .runner::after{animation:pawshadow var(--bob) linear infinite}
@keyframes pawshadow{
  0%   {transform:scale(1,1);opacity:.35}
  45%  {transform:scale(.55,.8);opacity:.14}
  70%  {transform:scale(1.15,1);opacity:.4}
  100% {transform:scale(1,1);opacity:.35}
}

/* Пыль из-под лап. Она и продаёт бег: без следа собака просто едет. */
/* Пыль из-под лап. Она и продаёт бег: без следа собака просто едет.
   Живёт на ::before, потому что ::after занят тенью. */
.lane.go .runner::before{content:"";position:absolute;left:-6px;bottom:2px;
  width:10px;height:10px;border-radius:50%;background:rgba(120,88,44,.55);
  animation:dust .46s linear infinite}
@keyframes dust{
  0%  {transform:translate(0,0) scale(.4);opacity:.7}
  100%{transform:translate(-30px,-11px) scale(1.7);opacity:0}
}

/* Кто сейчас первый. За двенадцать секунд лидер меняется, и это надо
   видеть, иначе забег читается как одна длинная полоса. */
.lane.lead{box-shadow:inset 0 0 0 2px rgba(255,206,90,.9)}
.lane.won{box-shadow:inset 0 0 0 2px rgba(47,143,62,.9)}
.lane.lost .runner{opacity:.75}

.dogpic{width:58px;display:flex;justify-content:center}
.dogpic .hero-body{height:54px;width:auto}

.finish{position:absolute;right:10px;top:54px;bottom:0;width:9px;z-index:2;
  background:repeating-linear-gradient(180deg,#fff 0 7px,#222 7px 14px);
  border:1px solid #222;border-radius:2px}
.track.done .finish{box-shadow:0 0 14px 3px rgba(255,214,102,.9)}

/* Отсчёт и комментарий по ходу */
.count{display:inline-block;font-weight:900;font-size:22px;color:#8a5a10;
  animation:countpop .6s ease-out}
.count.go{font-size:17px;color:#2f8f3e}
.lead-line{font-weight:800;color:#8a5a10}
@keyframes countpop{from{transform:scale(1.7);opacity:0} to{transform:scale(1)}}


/* ---------- обучение ---------- */
.card.tutor{border-color:var(--blue-dark);
  background:linear-gradient(180deg,#e8f4fd,var(--paper))}
.card.tutor .title{color:var(--blue-dark)}


/* ---------- поля ввода ---------- */
.fld{display:block;width:100%;margin-top:9px;padding:9px 11px;
  border:2px solid var(--gold-dark);border-radius:9px;font:inherit;
  background:#fffaef;color:var(--ink)}
.fld::placeholder{color:var(--ink-soft)}


/* ---------- цепь ---------- */
.card.chain.live{border-color:var(--red);
  background:linear-gradient(180deg,#ffeee6,var(--paper))}
.card.chain.live .title{color:var(--red)}


/* ---------- чат ---------- */
.chat{height:46vh;overflow:auto;background:#fffaef;border:2px solid var(--gold);
  border-radius:10px;box-shadow:inset 0 0 0 2px #fff8e6;padding:9px 11px;
  margin-bottom:9px}
.msg{padding:5px 0;border-bottom:1px dashed var(--line);font-size:13.5px;
  line-height:1.4}
.msg:last-child{border:0}
.msg b{margin-right:6px;font-weight:800}
.msg.mine{background:rgba(216,164,65,.14);border-radius:6px;
  padding-left:6px;padding-right:6px}
.row .fld{flex:1}


/* ---------- быстрый ряд по площади ---------- */
.quick{display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;
  margin:-2px -2px 4px;scrollbar-width:none}
.quick::-webkit-scrollbar{display:none}
.chip{flex:none;padding:7px 13px;border-radius:18px;font-size:13px;
  font-weight:800;white-space:nowrap;color:#5a3408;
  background:linear-gradient(180deg,#ffd977,#e8a51f);
  border:2px solid #a4761f;border-bottom-width:3px}
.chip:active{transform:translateY(1px);border-bottom-width:2px}
.chip.off{background:linear-gradient(180deg,#e6dcc4,#cfc09c);
  border-color:#a89873;color:#8a7d63}


/* ---------- всплывающая справка ---------- */
.sheet{position:fixed;inset:0;z-index:80;background:rgba(20,16,8,.55);
  display:flex;align-items:flex-end;justify-content:center;
  animation:fade .18s ease-out}
.sheet-in{width:100%;max-width:520px;max-height:82vh;overflow:auto;
  background:var(--paper);border:2px solid var(--gold-dark);
  border-radius:14px 14px 0 0;padding:12px 12px 16px;
  animation:rise .22s cubic-bezier(.2,.8,.3,1)}
@keyframes fade{from{opacity:0} to{opacity:1}}
@keyframes rise{from{transform:translateY(40px)} to{transform:translateY(0)}}
.wallet{cursor:pointer}


/* ---------- разбор стенки ---------- */
.wall-bar{display:flex;height:10px;border-radius:5px;overflow:hidden;
  border:1.5px solid var(--gold-dark);margin:9px 0 8px;background:#e6d9b8}
.wall-bar i{display:block;height:100%}
.wall-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wall-col{background:var(--paper2);border:1.5px solid var(--gold-dark);
  border-radius:8px;padding:6px 7px}
.wall-head{font-size:12px;font-weight:800;display:flex;
  justify-content:space-between;gap:6px;padding-bottom:4px;
  border-bottom:1px dashed var(--line);margin-bottom:4px}
.wall-head b{color:var(--ink)}
.wall-man{display:flex;justify-content:space-between;gap:6px;
  font-size:11.5px;padding:2px 0}
.wall-man b{font-weight:800;color:#6b3f14}
.wall-man.mvp{background:rgba(216,164,65,.22);border-radius:5px;
  padding-left:4px;padding-right:4px}
.wall-man.mvp span::after{content:" ★"}
.wall-man.dim{color:var(--ink-soft);font-style:italic}


/* ---------- показ стенки ---------- */
.wall-score{display:flex;justify-content:space-between;font-size:12px;
  font-weight:800;margin:-2px 0 8px}
.wall-score b{color:var(--ink)}
.wall-man.dark{opacity:.35}
.wall-man{transition:opacity .2s}


/* ---------- барабан ---------- */

/* Колесо это один conic-gradient, а не восемь фигур с тригонометрией в
   clip-path: тригонометрические функции в CSS поддержаны не везде, а
   конусный градиент работает во всех браузерах, где вообще идёт игра.
   Сами доли собираются в скрипте и подставляются переменной. */
.drum{position:relative;width:190px;height:190px;margin:12px auto 10px}
.drum-wheel{position:absolute;inset:0;border-radius:50%;
  border:3px solid var(--gold-dark);
  background:var(--slices,#d8a441);
  box-shadow:inset 0 0 0 5px #fff6e0, 0 3px 0 rgba(0,0,0,.18);
  will-change:transform}
.drum-hub{position:absolute;left:50%;top:50%;width:38px;height:38px;
  margin:-19px 0 0 -19px;border-radius:50%;
  background:linear-gradient(180deg,#ffd977,#e8a51f);
  border:3px solid var(--gold-dark)}
.drum-arrow{position:absolute;left:50%;top:-8px;margin-left:-11px;
  width:0;height:0;z-index:2;
  border-left:11px solid transparent;border-right:11px solid transparent;
  border-top:20px solid #c0392b;
  filter:drop-shadow(0 1px 0 #7d2318)}


/* ---------- война бригад ---------- */
.warscore{font-size:30px;font-weight:900;text-align:center;color:#6b3f14;
  margin-top:8px;letter-spacing:2px}


/* ---------- полка коллекций ---------- */
.colitem{display:flex;flex-direction:column;align-items:center;gap:3px;
  width:56px;font-size:9.5px;line-height:1.15;text-align:center;
  color:var(--ink-soft)}
.colitem.miss{opacity:.4;filter:grayscale(1)}
.colitem.miss span{font-style:italic}


/* ---------- полоса опыта ---------- */
.xpbar{position:relative;height:16px;margin-top:6px;border-radius:8px;
  background:#e6d9b8;border:1.5px solid var(--gold-dark);overflow:hidden}
.xpbar i{display:block;height:100%;
  background:linear-gradient(180deg,#7fc47f,#4a9a4a)}
.xpbar b{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10px;font-weight:800;color:#2f3a2f;
  text-shadow:0 1px 0 rgba(255,255,255,.6)}
.desc.sm{font-size:11px}


/* ---------- правка вёрстки ----------

   Карточки поехали по трём причинам, и все три чинятся тут.

   Первая: `.row` растягивал левую колонку без ограничений, и длинный
   заголовок выдавливал кнопку за край. Колонке нужен `min-width:0`, иначе
   flex считает её минимальной шириной длину самого длинного слова.

   Вторая: `.meta` в узких карточках переносился так, что подписи липли к
   краям. Появился отступ и перенос по словам.

   Третья: длинные слова без пробелов (ники, названия) не переносились
   вовсе и рвали карточку. */
.row > div:first-child{min-width:0;flex:1}
.row > .who-row{min-width:0}
.title,.desc,.meta span{overflow-wrap:anywhere}
.title{line-height:1.25}
.row > .btn,.row > button{flex:none}

/* Кнопка с ценой во второй строке не должна расти в высоту сильнее
   соседей: иначе строка карточки прыгает. */
.btn .sm{display:block;font-size:10px;font-weight:700;opacity:.85;
  margin-top:1px}

/* Тег со стороной внутри заголовка переносится вместе с ним, а не
   болтается отдельной строкой. */
.title .sm{font-size:11px;font-weight:700;margin-left:5px;
  white-space:nowrap}

/* Ряд иконок в карточке коллекции и снаряжения: перенос вместо
   горизонтальной прокрутки, иначе половина набора не видна. */
.wornrow{display:flex;flex-wrap:wrap;gap:7px}

/* Полоски характеристик соперника: одинаковая высота ячеек, чтобы
   решётка не рвалась на строки разной высоты. */
.statcell{min-height:24px}

/* Экран не должен ездить вбок ни при каких подписях. */
body,#view{overflow-x:hidden}


/* ---------- ходка в шахте ---------- */
.mobface{width:88px;display:flex;justify-content:center;align-items:flex-end}
.mobface .hero-body{max-width:100%}


/* ---------- свалка ---------- */
.wall-man.aim{outline:2px solid var(--red);outline-offset:-2px;
  border-radius:5px}
.log{max-height:46vh;overflow:auto}


/* ---------- конец боя ----------

   Раньше проигравший заваливался набок одним классом, а победитель просто
   стоял: бой выглядел оборванным, а не законченным.

   Теперь у обоих своя поза. Побеждённый оседает и остаётся на колене,
   победитель распрямляется. Наклон делает скрипт таймлайном, а тут только
   то, что остаётся ПОСЛЕ: приглушённый цвет проигравшего и лёгкий подъём
   победителя. */
.fighter.kneel{filter:saturate(.55) brightness(.9)}
.fighter.kneel .hpbar{opacity:.5}
.fighter.cheer .fig-name{color:#2f8f3e;font-weight:900}


/* ---------- тег бригады ---------- */
.crewtag{font-size:11px;font-weight:800;color:#8a5a10;
  background:rgba(216,164,65,.22);border-radius:5px;padding:1px 5px;
  margin-left:2px}
.mini{cursor:pointer}


/* ---------- код приглашения ---------- */
.refcode{font-size:26px;font-weight:900;letter-spacing:3px;color:#6b3f14;
  text-align:center;padding:10px;margin:8px 0;border-radius:10px;
  background:var(--paper2);border:2px dashed var(--gold-dark)}


/* ---------- дорожка пропуска ---------- */
.passgrid{display:grid;grid-template-columns:28px 1fr 1fr;gap:5px;
  align-items:stretch}
.pass-head{grid-column:span 1;font-size:11px;font-weight:800;
  color:var(--ink-soft);text-align:center;padding:2px 0}
.pass-head:first-of-type{grid-column:2}
.pass-row{display:contents}
.pass-n{display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:var(--ink-soft)}
.pass-cell{background:var(--paper2);border:1.5px solid var(--gold-dark);
  border-radius:8px;padding:6px 7px;font-size:11px;min-height:36px;
  display:flex;flex-direction:column;justify-content:center}
.pass-cell.empty{background:transparent;border-style:dashed;opacity:.35}
.pass-cell.ready{border-color:var(--green);cursor:pointer;
  background:linear-gradient(180deg,#f2fbe8,var(--paper2))}
.pass-cell.done{opacity:.45}
.pass-cell.shut{opacity:.5}
.pass-cell.ready{animation:passwait 1.6s ease-in-out infinite}
/* Готовая к получению клетка должна ловить взгляд сама: иначе среди
   пятидесяти шести клеток её просто не находят. */
@keyframes passwait{
  0%,100%{box-shadow:0 0 0 0 rgba(122,168,58,0)}
  50%{box-shadow:0 0 0 3px rgba(122,168,58,.28)}}
.pass-cell{align-items:flex-start;gap:2px}
.pass-ico{width:22px;height:22px}
.pass-ico img,.pass-ico svg{width:100%;height:100%;display:block}
.pass-what{font-weight:700;color:#6b3f14;line-height:1.2}
.pass-tag{font-size:9.5px;color:var(--ink-soft);margin-top:2px}